:root { --navi-vts: #d9322b; }
.brand-mark { background: center / contain no-repeat url('/branding/v-system.svg?v=20260910.18'); border-radius: 0; box-shadow: none; }
.login-brand { background: radial-gradient(ellipse at 45% 34%, #d9322b35, transparent 62%), linear-gradient(150deg,#252532,#13151d); }
.login-brand .company-lockup { margin-bottom: 22px; }
.navi-login-mascot { display: flex; flex-direction: column; align-items: center; margin: -24px 0 20px; }
.navi-login-mascot img { display: block; width: clamp(150px,19vw,260px); height: clamp(150px,19vw,260px); object-fit: contain; filter: drop-shadow(0 14px 25px #0003); }
.navi-login-mascot > span { margin-top: 3px; font-size: 10px; color: #c4b8e9; letter-spacing: 3px; }
.navi-topbar { display: flex; align-items: center; gap: 8px; flex: none; margin-right: 12px; }
.navi-topbar img { width: 62px; height: 66px; object-fit: contain; }
.navi-topbar b { display: block; font-size: 22px; color: #d9322b; line-height: 1.1; letter-spacing: -.5px; }
.navi-topbar small { display: block; font-size: 8px; letter-spacing: 1px; color: #7c7789; margin-top: 4px; }
.topbar { min-height: 80px; }
@media (max-width: 1100px) { .navi-topbar span { display:none; } .navi-topbar { margin-right:0; } .navi-topbar img { width:46px; height:56px; } }
@media (max-width: 760px) { .navi-topbar { display:none; } .mobile-logo .brand-mark { width:56px; height:56px; } }
@media (max-height: 760px) and (min-width: 901px) { .navi-login-mascot img { width:160px; height:160px; } .navi-login-mascot { margin-top:0; margin-bottom:12px; } }

:root { --vn-red: #d9322b; --vn-red-dark: #ac2721; --blue: #d9322b; }
.navi-mobile { width:72px; height:80px; object-fit:contain; flex:none; }
@media (max-width:760px) { .navi-topbar { display:flex; margin:0; } .navi-topbar img { width:34px; height:42px; } }
.login-card h2 { font-size:28px; line-height:1.4; text-wrap:balance; }

/* Navi family — light surfaces, V-System red accent, independent semantic states. */
:root { --navi-accent:#d9322b; --navi-soft:#fcecea; --vn-black:#243247; --vn-charcoal:#39475c; --vn-graphite:#526075; --vn-line:#dce3ec; --vn-paper:#f4f6fa; --border:#dce3ec; }
body,.portal-main,.invite-view { background:var(--navi-canvas); color:var(--navi-ink); }
.login-brand,.invite-brand { background:radial-gradient(ellipse at 40% 35%,#f8dcd9,transparent 65%),linear-gradient(145deg,#fff4f2,#f4f6fa); color:var(--navi-ink); }
.login-brand::before { background:none; }
.login-brand::after,.invite-brand::after { border-color:#d9322b18; border-radius:50%; box-shadow:0 0 0 70px #d9322b04,0 0 0 140px #d9322b03; }
.company-lockup strong,.login-brand h1,.brand-stats strong,.invite-brand h1 { color:var(--navi-ink); }
.company-lockup span,.brand-copy,.brand-stats span,.invite-brand-copy p:last-child,.invite-security-note { color:var(--navi-muted); }
.brand-stats,.invite-security-note { border-color:#d9322b24; }
.eyebrow.light,.navi-login-mascot > span,.invite-brand-copy .eyebrow,.invite-security-note .ui-icon,.invite-card .eyebrow,.invite-role-row b { color:var(--navi-accent); }
.login-panel,.invite-panel { background:var(--navi-canvas); }
.navi-login-mascot img { filter:drop-shadow(0 14px 25px #d9322b20); }
.sidebar { background:#fff; border-right:1px solid var(--navi-line); box-shadow:none; }
.sidebar-brand,.sidebar-footer { border-color:var(--navi-line); color:var(--navi-muted); }
.sidebar-brand b,.sidebar-brand-copy b { color:var(--navi-ink); }
.sidebar-brand small,.sidebar-footer small { color:var(--navi-muted); }
.sidebar-brand::after { display:none; }
.nav-item { color:var(--navi-muted); border-radius:10px; }
.nav-item:hover { background:#fff5f3; color:var(--navi-accent); }
.nav-item.active { background:var(--navi-soft); color:var(--navi-accent); font-weight:700; }
.topbar { border-top:0; border-bottom-color:var(--navi-line); box-shadow:none; }
.panel,.metric-card,.upload-panel,.table-panel,.invite-card { border:1px solid var(--navi-line); border-radius:14px; box-shadow:var(--navi-shadow); }
.metric-card { border-top:1px solid var(--navi-line); }
.metric-card:first-child { border-top-color:var(--navi-line); }
.metric-icon,.quick-icon,.avatar,.mini-avatar,.profile-avatar { border-radius:12px; }
.avatar,.mini-avatar,.profile-avatar,.metric-card.blue .metric-icon,.metric-card.violet .metric-icon,.signal-dot,.quick-icon.blue { background:var(--navi-soft); color:var(--navi-accent); }
.metric-card.green .metric-icon,.quick-icon.green { background:#e8f6ee; color:var(--navi-success); }
.quick-action:hover,.account-dropdown > button:hover { background:#fff5f3; color:var(--navi-accent); }
.primary-button,.secondary-button,.language-toggle,.input-wrap,.file-picker span,.invite-card .input-wrap,.invite-card .primary-button,.invitation-link-row input,.invitation-link-row button { border-radius:9px; }
.input-wrap:focus-within { border-color:var(--navi-accent); box-shadow:0 0 0 3px #d9322b18; }
.account-dropdown,.notification-panel,.modal { border-radius:16px; border-color:var(--navi-line); }
.modal { border-top:1px solid var(--navi-line); }
.modal-note,.role-notice { border-radius:10px; }
th { background:#f5f7fb; color:var(--navi-muted); }
th,td { border-bottom-color:var(--navi-line); }
.role-badge.super,.role-badge.admin { background:var(--navi-soft); color:#ac2721; }
.role-badge.user { background:#edf1f6; color:#526075; }
.role-notice { background:#fff5f3; border-color:#f0d7d4; color:#8c4b46; }
.role-notice > span { background:var(--navi-accent); }
.admin-navigation > button { border-radius:10px; background:var(--navi-soft); color:var(--navi-accent); }
.admin-navigation > button small { color:#9b625c; }
.toast { border-radius:10px; background:#39475c; }
.danger-text,.form-error { color:var(--navi-danger); }
.toast.error,.danger-button { background:var(--navi-danger); color:#fff; }
.invite-error { background:#fff0ef; border-color:var(--navi-danger); color:var(--navi-danger); }
button:disabled { cursor:not-allowed; }
.quality-filter-panel,.quality-metric-card,.metric-definition,.overview-project-filter,.overview-metric,.project-health-method,.ota-boundary { border-radius:14px; }
.quality-filter-title > span,.quality-metric-card > div span,.notification-panel header button,.generate-password-button:hover { color:var(--navi-accent); }
.quality-filter-title > span,.overview-metric-mark,.notification-unread { background:var(--navi-soft); }
.quality-filters select,.quality-filters input,.ota-form input,.ota-form select { border-radius:9px; }
.quality-metric-card.active { box-shadow:0 0 0 2px #d9322b18; }
.portal-language:hover,.notification-button:hover,.notification-button[aria-expanded="true"],.notification-item.unread,.generate-password-button:hover { background:#fff5f3; }
.sync-progress-track i { background:linear-gradient(90deg,var(--navi-accent),color-mix(in srgb,var(--navi-accent) 65%,white)); }
.profile-tabs button.active { color:var(--navi-accent); border-color:var(--navi-accent); }
.navi-topbar b { font-size:17px; letter-spacing:0; }
.navi-topbar small { font-size:10px; letter-spacing:0; }
.formal-product-english { margin-top:8px; font-size:15px; color:var(--navi-muted, #66758b); }

/* One brand in the sidebar; only the page name in the desktop header. */
.topbar-mobile-brand { display:none; }
.sidebar-brand-copy small { letter-spacing:0; font-size:8px; line-height:1.5; white-space:normal; }
@media (max-width:760px) { .topbar-mobile-brand { display:block; width:34px; height:34px; flex-shrink:0; object-fit:contain; } }