/* JN Tools public access – Apple inspired, loaded last */
:root {
    --public-blue: #007aff;
    --public-blue-hover: #006ee6;
    --public-navy: #0f2747;
    --public-text: #10233d;
    --public-muted: #66758a;
    --public-bg: #f3f5f8;
    --public-card: #ffffff;
    --public-line: #dfe6ee;
    --public-soft: #f6f8fb;
    --public-success: #218653;
    --public-danger: #c53f4a;
}

html,
body { min-height: 100%; }

body.auth-clean-page,
body.jn-start-page {
    margin: 0 !important;
    color: var(--public-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background: var(--public-bg) !important;
    background-image: none !important;
}

body.auth-clean-page::before,
body.auth-clean-page::after,
body.jn-start-page::before,
body.jn-start-page::after { display: none !important; }

/* Shared brand */
.auth-clean-brand,
.jn-entry-brand {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    width: auto !important;
    min-width: 152px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: #123b63 !important;
    background-image: none !important;
    box-shadow: 0 10px 26px rgba(18, 59, 99, .14) !important;
    text-decoration: none !important;
}

.auth-clean-brand::after,
.jn-entry-brand::after {
    content: "WORKSPACE";
    display: block;
    padding: 15px 0 0 11px;
    border-left: 1px solid rgba(255, 255, 255, .26);
    color: rgba(255, 255, 255, .72);
    font-size: 7px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .18em;
}

.auth-clean-brand-mark,
.jn-entry-brand span {
    color: #fff !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
}

.auth-clean-brand strong,
.jn-entry-brand strong {
    position: relative;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

/* Login and password flow */
body.auth-clean-page {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 40px 24px 28px !important;
}

.auth-clean-bg { display: none !important; }

.auth-clean-shell {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(100%, 500px) !important;
    margin: auto !important;
}

.auth-clean-card {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    padding: 28px 34px 30px !important;
    overflow: visible !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 28px !important;
    color: var(--public-text) !important;
    background: var(--public-card) !important;
    background-image: none !important;
    box-shadow: 0 18px 48px rgba(15, 39, 71, .09) !important;
    backdrop-filter: none !important;
}

.auth-clean-card::before,
.auth-clean-card::after { display: none !important; }

.auth-clean-topbar {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 27px !important;
}

.auth-clean-card > .auth-clean-brand {
    display: flex !important;
    width: max-content !important;
    margin: 0 auto 27px !important;
}

.auth-clean-heading { margin: 0 0 24px !important; }

.auth-clean-card h1,
.auth-clean-heading h1 {
    margin: 0 !important;
    color: var(--public-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: clamp(31px, 5vw, 40px) !important;
    line-height: 1.08 !important;
    font-weight: 820 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
}

.auth-clean-card h1::after {
    content: "Geschützter Zugang zu deinem Workspace";
    display: block;
    margin-top: 9px;
    color: var(--public-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
}

.auth-login-page .auth-clean-card h1::after { content: "Willkommen zurück bei JN Tools"; }

.auth-clean-form {
    display: grid !important;
    gap: 15px !important;
    margin-top: 22px !important;
}

.auth-clean-form label {
    display: grid !important;
    gap: 8px !important;
    color: #43536a !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
}

.auth-clean-form input:not([type="checkbox"]):not([type="hidden"]) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    border: 1px solid #d5dee8 !important;
    border-radius: 14px !important;
    color: var(--public-text) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 39, 71, .025) !important;
    font: inherit !important;
    outline: none !important;
    transform: none !important;
}

.auth-clean-form input:not([type="checkbox"]):not([type="hidden"]):hover {
    border-color: #bfcbd8 !important;
}

.auth-clean-form input:not([type="checkbox"]):not([type="hidden"]):focus {
    border-color: var(--public-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .12) !important;
}

.auth-remember-check {
    justify-content: flex-start !important;
    margin: 0 !important;
    color: var(--public-muted) !important;
    font-weight: 650 !important;
}

.auth-remember-check input {
    border-color: #c9d4df !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.auth-remember-check input:checked {
    border-color: var(--public-blue) !important;
    background: var(--public-blue) !important;
    background-image: none !important;
}

.auth-clean-actions {
    display: grid !important;
    width: 100% !important;
    margin: 5px 0 0 !important;
}

.auth-clean-button,
.auth-clean-link-button {
    box-sizing: border-box !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    box-shadow: none !important;
}

.auth-clean-button {
    width: 100% !important;
    border: 1px solid var(--public-blue) !important;
    color: #fff !important;
    background: var(--public-blue) !important;
    background-image: none !important;
}

.auth-clean-button:hover,
.auth-clean-button:focus-visible {
    border-color: var(--public-blue-hover) !important;
    background: var(--public-blue-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 9px 22px rgba(0, 122, 255, .18) !important;
}

.auth-login-page .auth-clean-button::after { content: "→" !important; }

.auth-clean-link-button {
    border: 1px solid #d8e1ea !important;
    color: #24405f !important;
    background: var(--public-soft) !important;
    background-image: none !important;
}

.auth-clean-link-button:hover,
.auth-clean-link-button:focus-visible {
    border-color: #c6d2df !important;
    background: #eef3f8 !important;
    transform: none !important;
}

.auth-clean-links {
    margin-top: 15px !important;
    color: var(--public-muted) !important;
}

.auth-clean-links .auth-clean-link-button {
    width: 100% !important;
}

.auth-clean-links a:not(.auth-clean-link-button) {
    color: #42607e !important;
    font-weight: 700 !important;
}

.auth-clean-secure-note {
    display: flex !important;
    margin: 17px auto 0 !important;
    color: #718096 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

.auth-clean-secure-icon { font-size: 12px !important; }

.auth-clean-alert {
    margin: 0 0 14px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 13px !important;
    background: var(--public-soft) !important;
}

.auth-clean-alert.error { border-color: rgba(197, 63, 74, .22) !important; background: #fff6f7 !important; }
.auth-clean-alert.success { border-color: rgba(33, 134, 83, .20) !important; background: #f3fbf6 !important; }
.auth-clean-alert.warning { border-color: rgba(0, 122, 255, .18) !important; background: #f3f8ff !important; }

.code-inputs { gap: 8px !important; margin: 0 0 4px !important; }
.code-inputs .code-box { min-height: 56px !important; padding: 0 !important; border-radius: 13px !important; font-size: 22px !important; }
.password-rule { margin: -7px 0 1px !important; color: var(--public-muted) !important; }
.resend-form { margin-top: 12px !important; }
.resend-form .auth-clean-link-button { width: 100% !important; }

.auth-clean-shell > .jn-global-footer {
    margin: 18px auto 0 !important;
    color: #8390a2 !important;
    font-size: 11px !important;
}

/* Public welcome page */
body.jn-start-page {
    min-height: 100vh !important;
    padding: 24px !important;
}

.jn-entry-shell {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: min(100%, 1160px) !important;
    min-height: calc(100vh - 48px) !important;
    margin: 0 auto !important;
}

.jn-entry-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1.08fr .92fr !important;
    min-height: 540px !important;
    overflow: hidden !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 32px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 22px 60px rgba(15, 39, 71, .09) !important;
}

.jn-entry-brand-panel,
.jn-entry-action-panel {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(42px, 6vw, 74px) !important;
    background-image: none !important;
}

.jn-entry-brand-panel {
    align-items: flex-start !important;
    color: #fff !important;
    background: #123b63 !important;
}

.jn-entry-brand-panel::before {
    content: "JN";
    position: absolute;
    right: 34px;
    bottom: -30px;
    color: rgba(255, 255, 255, .055);
    font-size: clamp(180px, 22vw, 300px);
    line-height: .8;
    font-weight: 900;
    letter-spacing: -.08em;
    pointer-events: none;
}

.jn-entry-brand { position: absolute !important; top: 42px !important; left: clamp(42px, 6vw, 74px) !important; }

.jn-entry-intro { position: relative !important; z-index: 1 !important; margin: 58px 0 0 !important; }
.jn-entry-intro p { margin: 0 0 14px !important; color: #69b0ff !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .15em !important; text-transform: uppercase !important; }
.jn-entry-intro h1 { max-width: 520px !important; margin: 0 !important; color: #fff !important; font-size: clamp(42px, 5vw, 64px) !important; line-height: 1.02 !important; font-weight: 820 !important; letter-spacing: -.055em !important; }

.jn-entry-action-panel {
    align-items: flex-start !important;
    border-left: 1px solid var(--public-line) !important;
    background: #fff !important;
}

.jn-entry-eyebrow { margin: 0 0 12px !important; color: var(--public-blue) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .15em !important; text-transform: uppercase !important; }
.jn-entry-action-panel h2 { margin: 0 !important; color: var(--public-text) !important; font-size: clamp(36px, 4vw, 49px) !important; line-height: 1.05 !important; font-weight: 820 !important; letter-spacing: -.05em !important; }
.jn-entry-action-panel > p { max-width: 390px !important; margin: 15px 0 29px !important; color: var(--public-muted) !important; font-size: 15px !important; line-height: 1.65 !important; }

.jn-entry-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    min-width: 210px !important;
    min-height: 54px !important;
    padding: 0 18px 0 21px !important;
    border: 1px solid var(--public-blue) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: var(--public-blue) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.jn-entry-button:hover,
.jn-entry-button:focus-visible { background: var(--public-blue-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(0, 122, 255, .18) !important; }
.jn-entry-button i { font-size: 19px !important; font-style: normal !important; }

.jn-entry-message {
    margin: 0 0 22px !important;
    padding: 11px 13px !important;
    border: 1px solid rgba(33, 134, 83, .18) !important;
    border-radius: 12px !important;
    color: var(--public-success) !important;
    background: #f3fbf6 !important;
}

.jn-entry-footer { margin: 18px auto 0 !important; color: #8390a2 !important; font-size: 11px !important; }

/* Keep the public flow calm and consistent in automatic night mode too. */
body[data-theme="night"].auth-clean-page,
body[data-theme="night"].jn-start-page { background: var(--public-bg) !important; }
body[data-theme="night"] .auth-clean-card,
body[data-theme="night"] .jn-entry-action-panel { color: var(--public-text) !important; background: #fff !important; border-color: var(--public-line) !important; }
body[data-theme="night"] .auth-clean-form input:not([type="checkbox"]):not([type="hidden"]) { color: var(--public-text) !important; background: #fff !important; }

@media (max-width: 820px) {
    body.jn-start-page { padding: 14px !important; }
    .jn-entry-shell { min-height: calc(100vh - 28px) !important; }
    .jn-entry-card { grid-template-columns: 1fr !important; min-height: 0 !important; border-radius: 25px !important; }
    .jn-entry-brand-panel,
    .jn-entry-action-panel { min-height: 330px !important; padding: 38px 30px !important; }
    .jn-entry-brand { top: 30px !important; left: 30px !important; }
    .jn-entry-action-panel { min-height: 360px !important; border-top: 1px solid var(--public-line) !important; border-left: 0 !important; }
}

@media (max-width: 560px) {
    body.auth-clean-page { padding: 14px !important; }
    .auth-clean-card { padding: 24px 19px 25px !important; border-radius: 23px !important; }
    .auth-clean-card h1,
    .auth-clean-heading h1 { font-size: 31px !important; }
    .code-inputs { gap: 5px !important; }
    .code-inputs .code-box { min-height: 49px !important; font-size: 19px !important; }
    .jn-entry-brand-panel,
    .jn-entry-action-panel { padding: 34px 25px !important; }
    .jn-entry-brand { left: 25px !important; }
    .jn-entry-intro h1 { font-size: 39px !important; }
    .jn-entry-button { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-clean-button,
    .auth-clean-link-button,
    .jn-entry-button { transition: none !important; transform: none !important; }
}

/* V2 – hard final auth layout. Higher specificity prevents legacy layers. */
html body.auth-clean-page {
    padding: 24px !important;
    background-color: #f4f6f8 !important;
}

html body.auth-clean-page main.auth-clean-shell {
    width: min(100%, 438px) !important;
}

html body.auth-clean-page section.auth-clean-card {
    min-height: 0 !important;
    padding: 31px 32px 27px !important;
    border: 1px solid #e1e7ee !important;
    border-radius: 26px !important;
    background-color: #fff !important;
    box-shadow: 0 16px 42px rgba(15, 39, 71, .08) !important;
}

html body.auth-clean-page .auth-clean-topbar {
    min-height: 0 !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Compact wordmark – no dark logo slab on authentication pages. */
html body.auth-clean-page a.auth-clean-brand,
html body.auth-clean-page .auth-clean-card > a.auth-clean-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: max-content !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto 25px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #123b63 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.auth-clean-page .auth-clean-topbar a.auth-clean-brand { margin-bottom: 0 !important; }

html body.auth-clean-page a.auth-clean-brand::after { display: none !important; content: none !important; }

html body.auth-clean-page a.auth-clean-brand .auth-clean-brand-mark {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #123b63 !important;
    background: transparent !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.06em !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.auth-clean-page a.auth-clean-brand strong {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #123b63 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.auth-clean-page .auth-clean-heading { margin: 0 0 23px !important; padding: 0 !important; border: 0 !important; }

html body.auth-clean-page .auth-clean-card h1,
html body.auth-clean-page .auth-clean-heading h1 {
    font-size: 34px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
}

html body.auth-clean-page .auth-clean-card h1::after {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #748195 !important;
}

html body.auth-clean-page form.auth-clean-form {
    gap: 14px !important;
    margin-top: 20px !important;
}

html body.auth-clean-page .auth-clean-form label {
    gap: 7px !important;
    color: #405169 !important;
    font-size: 12px !important;
}

html body.auth-clean-page .auth-clean-form input:not([type="checkbox"]):not([type="hidden"]),
html body.auth-clean-page[data-theme="night"] .auth-clean-form input:not([type="checkbox"]):not([type="hidden"]) {
    min-height: 49px !important;
    padding: 0 14px !important;
    border: 1px solid #d8e0e9 !important;
    border-radius: 13px !important;
    color: #10233d !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body.auth-clean-page .auth-clean-form input:not([type="checkbox"]):not([type="hidden"]):focus {
    border-color: #007aff !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .11) !important;
}

html body.auth-clean-page label.auth-remember-check {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 1px 0 0 !important;
}

html body.auth-clean-page label.auth-remember-check input[type="checkbox"] {
    flex: 0 0 19px !important;
    width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    margin: 0 !important;
    border-radius: 6px !important;
}

html body.auth-clean-page .auth-clean-actions { margin-top: 4px !important; }

html body.auth-clean-page button.auth-clean-button {
    min-height: 50px !important;
    border-color: #007aff !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: #007aff !important;
    background-color: #007aff !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body.auth-clean-page button.auth-clean-button:hover,
html body.auth-clean-page button.auth-clean-button:focus-visible {
    border-color: #006ee6 !important;
    background: #006ee6 !important;
    box-shadow: 0 8px 20px rgba(0, 122, 255, .18) !important;
}

html body.auth-clean-page .auth-clean-links { margin-top: 12px !important; }

html body.auth-clean-page .auth-clean-links a.auth-clean-link-button,
html body.auth-clean-page a.auth-clean-link-button,
html body.auth-clean-page button.auth-clean-link-button {
    min-height: 46px !important;
    border: 1px solid #d9e1ea !important;
    border-radius: 13px !important;
    color: #36516f !important;
    background: #fff !important;
    background-image: none !important;
}

html body.auth-clean-page .auth-clean-secure-note {
    margin-top: 15px !important;
    color: #8490a0 !important;
}

html body.auth-clean-page .auth-clean-secure-icon {
    width: 14px !important;
    overflow: hidden !important;
    color: #8490a0 !important;
    filter: grayscale(1) !important;
}

/* V3 – Chrome/Edge autofill on Windows must remain white. */
html body.auth-clean-page .auth-clean-form input:-webkit-autofill,
html body.auth-clean-page .auth-clean-form input:-webkit-autofill:hover,
html body.auth-clean-page .auth-clean-form input:-webkit-autofill:focus,
html body.auth-clean-page .auth-clean-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #10233d !important;
    caret-color: #10233d !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: #d8e0e9 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    transition: background-color 999999s ease-out 0s !important;
}

html body.auth-clean-page .auth-clean-form input:-webkit-autofill:focus {
    border-color: #007aff !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(0, 122, 255, .11) !important;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 4px rgba(0, 122, 255, .11) !important;
}

html body.auth-clean-page .auth-clean-secure-note {
    color: #218653 !important;
}

html body.auth-clean-page .auth-clean-secure-icon {
    width: auto !important;
    overflow: visible !important;
    color: #218653 !important;
    filter: none !important;
}

html body.auth-clean-page .code-inputs .code-box {
    min-height: 52px !important;
    padding: 0 !important;
    background: #fff !important;
}

@media (max-width: 520px) {
    html body.auth-clean-page { padding: 12px !important; }
    html body.auth-clean-page section.auth-clean-card { padding: 26px 19px 24px !important; border-radius: 22px !important; }
}