:root { color-scheme:light; --navi-canvas:#edf0f4; --navi-surface:#f9fafb; --appearance-raised:#f3f5f8; }
body,.portal-main,.content { background:var(--navi-canvas); }
.sidebar,.topbar,.panel,.metric-card,.quick-action,.modal,.account-dropdown,.notification-panel,.connection-panel { background:var(--navi-surface); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 10px; border:1px solid var(--navi-line); border-radius:9px; background:var(--navi-surface); color:var(--navi-ink); cursor:pointer; white-space:nowrap; font-size:12px; }
.theme-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.theme-toggle:hover { background:var(--navi-soft); }
html[data-theme=dark] { color-scheme:dark; --navi-canvas:#111822; --navi-surface:#1b2431; --appearance-raised:#243041; --navi-ink:#e1e7f0; --navi-muted:#a0afc2; --navi-line:#344153; --navi-soft:#402a31; --navi-accent:#ff8880; --navi-success:#64d5a5; --navi-warning:#f1c272; --navi-danger:#ff8a85; --vn-black:#e1e7f0; --vn-charcoal:#cbd6e4; --vn-graphite:#a0afc2; --vn-line:#344153; --vn-paper:#111822; --border:#344153; --blue:#ff8880; --navi-shadow:0 4px 18px #0002; }
html[data-theme=dark] :is(.sidebar,.topbar,.panel,.metric-card,.quick-action,.modal,.account-dropdown,.notification-panel,.connection-panel,.invite-card,.quality-filter-panel,.quality-metric-card,.overview-metric,.overview-project-filter,.metric-definition,.project-health-method,.ota-boundary,.profile-card,.sync-progress-panel,.password-page-card) { background:var(--navi-surface); color:var(--navi-ink); border-color:var(--navi-line); }
html[data-theme=dark] :is(h1,h2,h3,h4,.breadcrumb b,.account-copy b,.quick-action b,.metric-card strong,.nav-group-title,.nav-sub-item,.table-action,.account-menu-button,.dropdown-identity,.profile-summary,.field,.quality-filter-title,.quality-metric-card strong,.overview-metric strong) { color:var(--navi-ink); }
html[data-theme=dark] :is(p,small,.muted,.empty-state,.table-secondary,.account-copy span,.metric-card span,.metric-card small,.notification-copy,.notification-meta,.quick-action small,.panel p,.sidebar-brand small,.page-heading p,.activity-row span,.profile-summary-details) { color:var(--navi-muted); }
html[data-theme=dark] :is(input,select,textarea,.input-wrap,.secondary-button,.portal-language,.language-toggle,.data-refresh-button,.logout-button,.modal-note,.role-notice,.metric-definition,th,.profile-tabs,.notification-panel header,.dropdown-identity,.sync-progress-track,.ota-boundary,.readonly) { background:var(--appearance-raised); color:var(--navi-ink); border-color:var(--navi-line); }
html[data-theme=dark] :is(td,th,.panel-title,.activity-row,.sidebar-brand,.sidebar-footer,.notification-item,.profile-tabs,.dropdown-identity,.account-separator) { border-color:var(--navi-line); }
html[data-theme=dark] td { color:var(--navi-ink); }
html[data-theme=dark] :is(.nav-item:hover,.nav-sub-item:hover,.quick-action:hover,.notification-item.unread,.notification-button:hover,.portal-language:hover,.account-dropdown button:hover,tr:hover td) { background:var(--appearance-raised); color:var(--navi-ink); }
html[data-theme=dark] :is(.nav-item.active,.nav-sub-item.active,.nav-group.active .nav-group-title,.admin-navigation>button.active,.role-badge.admin,.role-badge.super,.avatar,.mini-avatar,.metric-icon,.quick-icon,.overview-metric-mark) { background:var(--navi-soft); color:var(--navi-accent); }
html[data-theme=dark] :is(.status-badge,.quality-badge,.role-badge.user,.metric-card.green .metric-icon) { background:#193c35; color:#72dbb0; }
html[data-theme=dark] :is(.danger-text,.form-error,.danger-note) { color:var(--navi-danger); }
html[data-theme=dark] .primary-button { background:#c93631; color:#fff; }
html[data-theme=dark] .primary-button:hover { background:#b42d28; }
html[data-theme=dark] .login-brand,html[data-theme=dark] .invite-brand { background:radial-gradient(ellipse at 40% 35%,#462b35,transparent 65%),linear-gradient(145deg,#1c2432,#111822); }
html[data-theme=dark] .modal-backdrop { background:#030811b3; }
html[data-theme=dark] ::placeholder { color:#8394aa; }
html[data-theme=dark] :is(button:disabled,input:disabled,select:disabled) { opacity:.5; }
@media(max-width:600px) { .theme-toggle { width:34px; padding:0; } .theme-toggle span { display:none; } }
html[data-theme=dark] :is(.account-menu-button,.notification-button,.dashboard-relay-status,.connection-details,.quality-filters,.quality-filter-actions,.overview-project-filter select) { background:var(--navi-surface); color:var(--navi-ink); border-color:var(--navi-line); }
html[data-theme=dark] :is(.text-action,.table-action,.eyebrow) { color:var(--navi-accent); }
html[data-theme=dark] :is(.status-badge.failed,.status-badge.offline,.ota-status.failed,.notification-status.failed,.invitation-status.revoked) { background:#482a32; color:#ff9992; }
html[data-theme=dark] :is(.status-badge.pending,.status-badge.in-progress,.ota-status.pending,.ota-status.in-progress,.notification-status.pending,.invitation-status.expired) { background:#433824; color:#f1c272; }
html[data-theme=dark] :is(.account-dropdown button,.notification-panel header button) { color:var(--navi-ink); }
/* Administration destinations share one readable single-column menu. */
.admin-navigation > button[data-go] { display:flex; align-items:center; width:100%; min-height:44px; margin:4px 0; padding:12px; text-align:left; background:transparent; color:var(--navi-muted); }
.admin-navigation > button[data-go] > span { display:block; white-space:normal; }
.admin-navigation > button[data-go].active { background:var(--navi-soft); color:var(--navi-accent); font-weight:700; }
/* Login identity belongs to the service; company attribution stays in the footer. */
.login-view { position:relative; padding-bottom:0; box-sizing:border-box; }
.login-service-icon { width:112px; height:auto; display:block; margin:0 auto 26px; object-fit:contain; }
.login-brand h1,.login-brand .formal-product-english { text-align:center; }
.login-brand,.login-panel { padding-bottom:max(64px, 8vh); }
.login-copyright { position:absolute; bottom:16px; left:0; width:100%; text-align:center; color:var(--navi-muted); font-size:11px; letter-spacing:.3px; }
@media(max-width:900px) { .login-panel { min-height:100vh; } .mobile-logo small { line-height:1.5; } }
.login-identity-row { display:flex; align-items:center; gap:28px; }
.login-vertical-lockup { flex:0 0 150px; text-align:center; color:#ed1717; }
.login-vertical-lockup img { display:block; width:140px; height:145px; object-fit:contain; margin:0 auto 2px; }
.login-vertical-lockup strong { display:block; font:800 29px/1.1 "Segoe UI",sans-serif; letter-spacing:-1px; }
.login-vertical-lockup span { display:block; font:16px/1.3 "Segoe UI",sans-serif; letter-spacing:4px; padding-left:4px; }
.login-service-name { min-width:0; flex:1; }
.login-brand .login-service-name h1 { text-align:left; font-size:clamp(28px,2.6vw,48px); line-height:1.35; text-wrap:balance; margin:0; }
.login-brand .login-service-name .formal-product-english { text-align:left; line-height:1.6; margin-bottom:0; }
@media (min-width:901px) and (max-width:1200px) { .login-identity-row { gap:18px; } .login-vertical-lockup { flex-basis:110px; } .login-vertical-lockup img { width:110px; height:120px; } .login-vertical-lockup strong { font-size:23px; } .login-vertical-lockup span { font-size:12px; } }

/* Standalone full mascot, aligned with the bilingual service title. */
.login-vertical-lockup img { width:150px; height:176px; margin:0 auto; }
@media (min-width:901px) and (max-width:1200px) { .login-vertical-lockup img { width:110px; height:140px; } }

/* The approved dimensional mascot is supporting artwork, not an inline logo. */
.login-brand { padding-inline:clamp(48px,7vw,134px); }
.login-identity-row { flex-direction:column; align-items:flex-start; gap:22px; }
.login-vertical-lockup { flex:0 0 auto; width:180px; }
.login-vertical-lockup img { display:block; width:180px; height:151px; margin:0; object-fit:contain; }
.login-service-name { width:100%; }
.login-brand .login-service-name h1 { font-size:clamp(30px,2.5vw,46px); line-height:1.4; letter-spacing:-.6px; text-wrap:balance; }
.login-brand .login-service-name .formal-product-english { font-size:14px; margin-top:12px; }
.login-brand > .brand-copy { margin-top:28px; max-width:560px; line-height:1.9; }
.login-brand .brand-stats { margin-top:34px; padding-top:22px; }
@media(max-height:760px) and (min-width:901px) { .login-vertical-lockup,.login-vertical-lockup img { width:140px; } .login-vertical-lockup img { height:118px; } .login-identity-row { gap:16px; } }

/* Looping mascot performance stays in a reserved stage above the service identity. */
.login-vertical-lockup { width:100%; height:166px; position:relative; }
.login-vertical-lockup img { position:absolute; left:0; bottom:8px; width:160px; height:134px; transform-origin:50% 90%; animation:navi-patrol 12s ease-in-out infinite; }
.login-service-name { display:flex; align-items:center; gap:18px; }
.login-app-icon { width:66px; height:66px; flex:0 0 66px; object-fit:contain; }
.login-service-name > div { min-width:0; }
.login-brand .login-service-name h1 { font-size:clamp(28px,2.2vw,42px); }
.login-brand .login-service-name .formal-product-english { margin-top:8px; }
@keyframes navi-patrol {
  0%,100% { left:0; transform:translateY(0) rotate(-3deg); }
  12% { transform:translateY(-12px) rotate(3deg); }
  25% { left:calc(50% - 80px); transform:translateY(0) rotate(-3deg); }
  37% { transform:translateY(-16px) rotate(3deg); }
  50% { left:calc(100% - 160px); transform:translateY(0) rotate(0); }
  62% { transform:translateY(-12px) rotate(-3deg); }
  75% { left:calc(50% - 80px); transform:translateY(0) rotate(3deg); }
  87% { transform:translateY(-16px) rotate(-3deg); }
}
@media(max-height:760px) and (min-width:901px) { .login-vertical-lockup { height:140px; } .login-vertical-lockup img { width:160px; height:118px; } }
@media(prefers-reduced-motion:reduce) { .login-vertical-lockup img { animation:none; left:0; transform:none; } }
.navi-actor { position:absolute; left:0; bottom:5px; width:160px; height:134px; }
.navi-gait { width:100%; height:100%; background:url('/branding/navi-gait-atlas.png') no-repeat; background-size:400% 400%; transform-origin:50% 95%; }
@media(prefers-reduced-motion:reduce) { .navi-gait { background-image:url('/branding/navi-approved-3d.png'); background-size:contain; background-position:center!important; } }
.navi-gait { position:relative; }
.navi-eyelids { position:absolute; inset:0; background:url('/branding/navi-blink-atlas.png') no-repeat; background-size:400% 400%; clip-path:url('#navi-blink-eyes'); opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .navi-eyelids { display:none; } }
/* Warm, quiet login surface complements the blush brand panel. */
html:not([data-theme=dark]) .login-panel { background:radial-gradient(ellipse at 65% 35%,#fffdfb 0%,#fbf8f6 58%,#f5f1ef 100%); }
html[data-theme=dark] .login-panel { background:radial-gradient(ellipse at 65% 35%,#202632 0%,#181e29 58%,#141a24 100%); }

.mobile-logo .navi-mobile { width:60px; height:60px; flex:0 0 60px; object-fit:contain; }
/* Login needs no reserved scrollbar lane when all content fits. */
html:has(#login-view:not(.hidden)) { scrollbar-gutter:auto; }
@media(max-width:900px) {
  .mobile-logo { justify-content:center; width:100%; }
  .mobile-logo > div { min-width:0; }
}
/* Invitation and sign-in share the same public entry-page visual hierarchy. */
.invite-view { position:relative; grid-template-columns:minmax(420px,1.07fr) minmax(420px,.93fr); }
.invite-brand.login-brand { justify-content:center; gap:0; }
html:not([data-theme=dark]) .invite-panel { background:radial-gradient(ellipse at 65% 35%,#fffdfb 0%,#fbf8f6 58%,#f5f1ef 100%); }
html[data-theme=dark] .invite-panel { background:radial-gradient(ellipse at 65% 35%,#202632 0%,#181e29 58%,#141a24 100%); }
.invite-panel { padding:76px clamp(28px,6vw,116px) 76px; }
html .invite-card { width:min(520px,100%); padding:0; background:transparent; border:0; box-shadow:none; border-radius:0; }
.invite-card .input-wrap,.invite-card .primary-button { border-radius:9px; }
.invite-mobile-brand { justify-content:center; border:0; padding:0; margin-bottom:38px; }
.invite-mobile-brand img { width:60px; height:60px; }
.invite-mobile-brand b { font-size:16px; }
.invite-mobile-brand small { letter-spacing:0; line-height:1.5; }
html:has(#invite-view:not(.hidden)) { scrollbar-gutter:auto; }
@media(max-width:900px) { .invite-mobile-brand { display:flex; } .invite-panel { padding:80px 28px 76px; } }
html[data-theme=dark] .invite-card { background:transparent; }
html[data-theme=dark] :is(.invite-role-row,.password-assistant) { background:var(--appearance-raised); border-color:var(--navi-line); color:var(--navi-ink); }
/* One continuous brand backdrop across every V-System page. */
:root { --system-backdrop:radial-gradient(ellipse at 28% 30%,#f8dcd9 0%,transparent 62%),linear-gradient(145deg,#fff4f2,#f4f6fa); --system-arc:#d9322b12; }
html[data-theme=dark] { --system-backdrop:radial-gradient(ellipse at 28% 30%,#422b36 0%,transparent 62%),linear-gradient(145deg,#1c2432,#111822); --system-arc:#fa918418; }
html { background:var(--navi-canvas); }
body { background:var(--system-backdrop); background-attachment:fixed; isolation:isolate; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--system-backdrop); }
body::after { content:""; position:fixed; right:-240px; bottom:-320px; width:720px; height:720px; border:1px solid var(--system-arc); border-radius:50%; box-shadow:0 0 0 70px var(--system-arc),0 0 0 140px var(--system-arc); opacity:.5; pointer-events:none; z-index:-1; }
html[data-theme] body :is(.login-view,.invite-view,.portal-view,.portal-main,.content,.login-brand,.invite-brand,.login-panel,.invite-panel) { background:transparent; }
.login-brand::before,.login-brand::after,.invite-brand::after { display:none; }
html:not([data-theme=dark]) :is(.sidebar,.topbar) { background:#fffaf8ed; }
html[data-theme=dark] :is(.sidebar,.topbar) { background:#1b2431f2; }
@media print { body::before,body::after { display:none; } body { background:#fff; } }

/* Let the document own scrolling; an unbounded inner panel must not trap wheel input. */
.login-panel,.invite-panel { overflow:visible; overscroll-behavior:auto; }
/* Compact brand group and naturally sized form share a visual center. */
@media (min-width:901px) {
  .login-view,.invite-view {
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    column-gap:clamp(40px,6vw,104px);
    align-items:center;
    align-content:center;
    padding:100px max(40px,calc((100vw - 1120px)/2)) 100px;
  }
  .login-view > .login-brand,.invite-view > .login-brand {
    padding:0; overflow:visible; min-width:0; justify-content:flex-start;
  }
  .login-panel,.invite-panel { padding:0; min-width:0; min-height:0; place-items:start stretch; }
  .login-card,html .invite-card { width:100%; max-width:440px; margin:0 auto; padding:0; }
  .login-identity-row { position:relative; gap:24px; }
  .login-vertical-lockup { position:relative; left:auto; bottom:auto; width:100%; height:140px; }
  .login-brand .login-service-name h1 { font-size:clamp(26px,2.2vw,36px); line-height:1.35; letter-spacing:-.6px; }
  .login-service-name { gap:18px; align-items:center; }
  .login-app-icon { width:64px; height:64px; flex-basis:64px; }
  .login-brand .login-service-name .formal-product-english { margin-top:8px; font-size:13px; }
  .login-brand > .brand-copy { max-width:none; margin:30px 0 0; font-size:15px; line-height:1.9; }
  .login-brand .brand-stats { width:100%; margin:32px 0 0; padding-top:24px; gap:48px; }
  .login-brand > .brand-copy { margin:24px 0 0; }
  .login-brand .brand-stats { margin:22px 0 0; padding:0; border:0; gap:0; }
  .login-brand .brand-stats span { display:none; }
  .login-brand .brand-stats strong { font-size:13px; font-weight:500; color:var(--navi-muted); }
  .login-brand .brand-stats div { flex-direction:row; align-items:center; }
  .login-brand .brand-stats div + div::before { content:"·"; margin:0 14px; color:var(--navi-muted); }
  .login-card .login-help { margin-bottom:0; }
  .login-card h2,.invite-card h2 { margin:0 0 8px; font-size:28px; line-height:1.35; }
  .login-card > .muted,.invite-card > .muted { margin:0; font-size:14px; line-height:1.6; }
  .login-card .field,.invite-card .field { margin-top:24px; }
}
@media (max-width:900px) {
  .login-panel,.invite-panel { padding:80px 28px 88px; }
  .login-card,html .invite-card { width:min(520px,100%); margin:0 auto; }
  .mobile-logo,.invite-mobile-brand { margin-bottom:38px; }
  .login-card h2,.invite-card h2 { margin:0 0 8px; }
}


body:has(#login-view:not(.hidden))::after,body:has(#invite-view:not(.hidden))::after { right:-500px; bottom:-560px; opacity:.16; }



/* Public identities follow the selected language; supporting copy replaces the translation. */
.login-brand .service-description { margin:12px 0 0; font-size:14px; line-height:1.8; color:var(--navi-muted); }
.login-brand .brand-stats { justify-content:center; }
@media(min-width:901px) {
  .login-service-name { align-items:flex-start; }
  .login-app-icon { margin-top:3px; }
  html[lang=en] .login-brand .login-service-name h1 { font-size:clamp(26px,2.2vw,34px); text-wrap:balance; }
}
/* Language-independent identity geometry prevents translated copy moving the brand group. */
@media(min-width:901px) {
  .login-service-name { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:18px; row-gap:16px; align-items:center; }
  .login-service-name > div { display:contents; }
  .login-app-icon { grid-column:1; grid-row:1; margin:0; }
  .login-brand .login-service-name h1,
  html[lang=en] .login-brand .login-service-name h1 {
    grid-column:2; grid-row:1; display:flex; align-items:center;
    min-height:88px; margin:0; max-width:none;
    font-size:clamp(26px,2.05vw,34px); line-height:1.3;
    letter-spacing:-.5px; text-wrap:pretty; overflow-wrap:normal;
  }
  .login-brand .service-description { grid-column:1 / -1; grid-row:2; min-height:52px; margin:0; line-height:26px; }
  .login-brand .brand-stats { margin-top:18px; }
  .login-card > .muted,.invite-card > .muted { min-height:44px; }
}
/* Title and highlights form one unit beside the service icon. */
@media(min-width:901px) {
  .login-service-name { row-gap:8px; }
  .login-app-icon { grid-row:1 / 3; align-self:center; }
  .login-brand .login-service-name h1,
  html[lang=en] .login-brand .login-service-name h1 { min-height:0; align-self:end; }
  .login-brand .login-service-name .brand-stats { grid-column:2; grid-row:2; margin:0; width:auto; justify-content:flex-start; align-self:start; }
  .login-brand .service-description { grid-row:3; margin-top:16px; }
}

/* Keep language changes inside stable title and description rows. */
@media(min-width:901px) {
  .login-app-icon { grid-row:1; align-self:start; }
  .login-brand .login-service-name h1,
  html[lang=en] .login-brand .login-service-name h1 {
    display:block; align-self:start; min-height:88px;
    white-space:pre-line; text-wrap:wrap;
  }
  .login-brand .service-description { grid-column:2; min-height:78px; }
}
/* A single entry card separates product context from the current account task. */
.login-view,.invite-view { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px 32px; gap:24px; }
.entry-shell { width:min(1120px,100%); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:center; padding:48px; border-radius:28px; background:#fffaf8e8; }
html[data-theme=dark] .entry-shell { background:#1b2431ed; }
.entry-shell > .login-brand { padding:0; min-width:0; overflow:visible; }
.entry-shell > :is(.login-panel,.invite-panel) { padding:0; min-height:0; }
.login-view .login-copyright,.invite-view .login-copyright { position:static; width:auto; margin:0; }
.entry-shell .login-vertical-lockup { height:140px; }
.entry-shell .login-brand .login-service-name h1 { font-size:28px; }
html[lang=en] .entry-shell .login-brand .login-service-name h1 { font-size:28px; }
.account-back { display:flex; gap:10px; align-items:center; max-width:100%; margin:24px 0 0; padding:8px 12px; border:1px solid var(--navi-line); border-radius:20px; background:transparent; color:var(--navi-ink); font-size:12px; }
#login-account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-back > span:last-child { flex-shrink:0; color:var(--navi-accent); }
#login-form[data-step=account] #login-error { margin-top:20px; }
#login-form .primary-button { width:auto; min-width:112px; margin-left:auto; border-radius:24px; }
#login-form .login-help { text-align:left; line-height:1.7; }
@media(max-width:1100px) and (min-width:901px) { .entry-shell { gap:36px; padding:32px; } .entry-shell .login-service-name { grid-template-columns:48px minmax(0,1fr); column-gap:14px; } .entry-shell .login-app-icon { width:48px; height:48px; } .entry-shell .login-brand .login-service-name h1,html[lang=en] .entry-shell .login-brand .login-service-name h1 { font-size:24px; } }
@media(max-width:900px) {
 .login-view,.invite-view { display:flex; padding:74px 20px 24px; justify-content:flex-start; }
 .entry-shell { display:block; padding:32px 24px; max-width:568px; border-radius:24px; }
 .entry-shell > .login-brand { display:none; }
 .entry-shell > :is(.login-panel,.invite-panel) { padding:0; }
 .login-view .login-copyright,.invite-view .login-copyright { font-size:10px; }
}
@media(max-width:420px) { .login-view,.invite-view { padding-inline:12px; } .entry-shell { padding:28px 16px; } }
/* Compact account introduction, with a small mascot beside the sole product icon. */
.entry-shell { align-items:start; gap:64px; }
.entry-shell > .entry-intro { display:block; }
.entry-brand-row { display:flex; gap:24px; align-items:center; height:64px; margin-bottom:24px; }
.entry-icon { width:44px; height:44px; flex:0 0 44px; }
.entry-shell .entry-brand-row .login-vertical-lockup { position:relative; width:auto; flex:1; height:64px; }
.entry-brand-row .navi-actor { width:76px; height:64px; bottom:0; }
.entry-shell .entry-intro h1 { font-size:36px; font-weight:500; line-height:1.3; letter-spacing:0; margin:0 0 16px; text-align:left; }
.entry-account-copy { margin:0; font-size:16px; line-height:1.7; color:var(--navi-ink); }
.entry-shell > .login-panel,.entry-shell > .invite-panel { padding-top:88px; }
#login-form > .field:first-of-type { margin-top:0; }
.login-view,.invite-view { position:relative; padding-bottom:84px; min-height:100dvh; }
.login-view .login-copyright,.invite-view .login-copyright { position:absolute; bottom:18px; left:20px; width:calc(100% - 40px); text-align:center; }
@media(max-width:900px) {
 .entry-shell > .entry-intro { display:block; }
 .entry-shell > .login-panel,.entry-shell > .invite-panel { padding-top:32px; }
 .entry-shell .entry-intro h1 { font-size:30px; }
 .entry-account-copy { font-size:14px; }
}
/* Compact single-column frosted entry, with the mascot outside the form surface. */
.login-view,.invite-view { padding:132px 24px 88px; justify-content:center; }
.entry-shell { position:relative; display:flex; flex-direction:column; width:min(520px,100%); max-width:520px; padding:36px 40px; gap:24px; border:1px solid #ffffffa6; border-radius:24px; background:rgba(255,250,248,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 16px 56px #55322b09; }
html[data-theme=dark] .entry-shell { background:rgba(27,36,49,.78); border-color:#ffffff14; box-shadow:0 16px 56px #0002; }
.entry-shell > .entry-intro,.entry-shell > .login-panel,.entry-shell > .invite-panel { width:100%; padding:0; }
.entry-brand-row { height:auto; min-height:48px; gap:14px; margin:0 0 28px; }
.entry-product-name { font-size:17px; line-height:1.5; font-weight:600; color:var(--navi-ink); }
.entry-icon { width:48px; height:48px; flex-basis:48px; }
.entry-shell .entry-intro h1 { margin:0; font-size:26px; font-weight:600; }
.entry-shell .entry-brand-row .login-vertical-lockup { position:absolute; left:auto; right:12px; bottom:calc(100% + 8px); width:170px; height:80px; }
.entry-brand-row .navi-actor { width:96px; height:80px; }
#login-form .primary-button { width:100%; border-radius:12px; margin:0; }
#login-form .login-help { text-align:center; margin-top:24px; }
#login-form[data-step=account] #login-error { margin-top:12px; }
#login-account-back { margin-top:0; }
@media(max-width:600px) {
 .login-view,.invite-view { padding:120px 16px 80px; }
 .entry-shell { padding:28px 24px; border-radius:20px; }
 .entry-product-name { font-size:15px; }
 .entry-shell .entry-intro h1 { font-size:24px; }
}
@media(max-width:360px) { .entry-shell { padding-inline:18px; } .entry-brand-row { gap:10px; } }
.entry-shell > .entry-intro { position:static; }
/* Wrapped inputs share one visible focus boundary, including keyboard focus. */
.input-wrap:focus-within { border-color:var(--navi-accent); box-shadow:none; outline:none; }
.input-wrap input:focus,.input-wrap input:focus-visible,
.input-wrap textarea:focus,.input-wrap textarea:focus-visible { outline:none; box-shadow:none; }
.entry-shell .entry-brand-row .login-vertical-lockup { left:24px; right:24px; width:auto; }
.entry-intro > .entry-brand-row { position:static; }
.input-wrap.has-error { border-color:var(--navi-accent); }
.field-feedback { margin:8px 0 0; color:var(--navi-accent); font-size:12px; line-height:1.6; }
.entry-shell .form-error:not(:empty),.entry-shell .invite-error { padding:10px 12px; margin:16px 0; border:1px solid var(--navi-line); border-radius:8px; background:var(--navi-soft); color:var(--navi-ink); font-size:12px; line-height:1.6; }
/* A permanent feedback slot prevents submit errors resizing the centered login card. */
#login-form .field-feedback { height:48px; margin:8px 0 0; font-size:12px; line-height:20px; }
#login-form #login-error { display:none; }
#login-form .login-options { margin-top:8px; }
/* Invitation uses the same progressive card and stable feedback slots as sign-in. */
#invitation-register-form .field-feedback { min-height:40px; margin:8px 0 0; font-size:12px; line-height:20px; }
#invite-account-back { margin:0 0 20px; }
#invite-account-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#invitation-register-form .primary-button { border-radius:12px; }
#invitation-register-form .field { margin-top:16px; }
#invitation-register-form > .field:first-child,#invite-password-step > .field:first-child { margin-top:0; }
#invite-form-error,#invitation-register-form #invite-form-error:not(:empty) { min-height:48px; margin:8px 0; padding:0; border:0; background:transparent; line-height:20px; color:var(--navi-accent); }
#invite-password-step .password-assistant { margin-top:0; padding:12px; }
#invitation-register-form[data-step=account] #invite-form-error { display:none; }
/* Compact invitation spacing keeps password setup within a desktop viewport. */
#invite-view { padding-top:112px; padding-bottom:56px; }
#invite-view .entry-shell { padding-block:24px; gap:16px; }
#invite-view .entry-brand-row { margin-bottom:16px; }
#invite-view .invite-card > .muted { min-height:0; margin:0 0 16px; line-height:20px; font-size:12px; }
#invite-account-back { margin-bottom:12px; padding-block:6px; }
#invitation-register-form .field { margin-top:12px; }
#invitation-register-form .field-feedback { min-height:20px; margin-top:4px; }
#invite-password-feedback { min-height:40px; }
#invite-form-error,#invitation-register-form #invite-form-error:not(:empty) { min-height:40px; margin:4px 0 8px; }
#invite-password-step .password-assistant { padding:10px 12px; }
#invite-password-step .generated-password-message { margin:6px 0 0; min-height:16px; line-height:16px; }

/* The login field already supplies its own password visibility control. */
#login-password::-ms-reveal { display:none; }

/* Keep all three theme choices readable on compact screens. */
.theme-toggle.theme-selector { width:auto; min-width:92px; max-width:140px; padding:0 8px; }