.brand { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 var(--space-2) var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-dark); letter-spacing: .1em; }
.brand-name { font-size: 20px; font-weight: 800; }
.brand-os { color: var(--color-hosa-gold); font-size: 10px; font-weight: 800; }
.main-navigation { display: grid; gap: 3px; }
.nav-link { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: rgba(244,239,230,.68); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.nav-link .ui-icon { color: rgba(244,239,230,.58); transition: color var(--transition-fast); }
.nav-link:hover { color: var(--color-text-on-dark); background: rgba(244,239,230,.075); }
.nav-link:hover .ui-icon { color: var(--color-hosa-gold); }
.nav-link[aria-current="page"] { border-color: rgba(198,161,91,.24); color: var(--color-hosa-ivory); background: linear-gradient(90deg, rgba(198,161,91,.18), rgba(198,161,91,.05)); box-shadow: inset 2px 0 0 var(--color-hosa-gold), 0 0 18px rgba(198,161,91,.06); }
.nav-link[aria-current="page"] .ui-icon { color: var(--color-hosa-gold); }
.sidebar-footer { margin-top: auto; padding: var(--space-5) var(--space-2) 0; border-top: 1px solid var(--color-border-dark); }
.user-label { margin: 0 0 2px; font-weight: 650; font-size: 13px; }
.user-role { margin: 0; color: rgba(244,239,230,.56); font-size: 12px; }
.page-kicker { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: 12px; }
.topbar-title { margin: 0; font-size: 19px; letter-spacing: -.02em; line-height: 1.2; }
.topbar-subtitle { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 12px; }
.topbar-tools { display: flex; align-items: center; gap: var(--space-4); }
.demo-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--space-2); border: 1px solid #d5c49f; border-radius: 99px; color: #76591c; background: #f7f1e4; font-size: 11px; font-weight: 650; }
.data-source-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid #d5c49f; border-radius: 99px; color: #71571f; background: #faf5e8; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; }
.icon-button:hover { background: var(--color-surface-muted); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-hosa-green); color: var(--color-hosa-ivory); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.avatar--active { width: 36px; height: 36px; border: 1px solid rgba(198, 161, 91, .84); box-shadow: inset 0 0 0 3px var(--color-hosa-green); }
.user-zone { position: relative; display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
.user-menu-trigger { display: flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; }
.user-menu-trigger:hover .identity-name { color: var(--color-hosa-green); }
.user-menu-trigger:hover .avatar { box-shadow: inset 0 0 0 3px var(--color-hosa-green), 0 0 0 3px rgba(198, 161, 91, .13); }
.user-menu { top: calc(100% + var(--space-2)); right: 0; }
.user-menu-trigger__chevron { transition: transform var(--transition-fast); }
.user-menu-trigger[aria-expanded="true"] .user-menu-trigger__chevron { transform: rotate(180deg); }
.user-menu__logout { color: var(--color-hosa-green); }
.user-menu__logout:hover, .user-menu__logout:focus-visible { color: var(--color-hosa-green); background: rgba(198,161,91,.12); }
.user-summary { display: grid; gap: 2px; min-width: 116px; text-align: right; }
.identity-name { font-size: 12px; font-weight: 700; }
.identity-role { color: var(--color-text-muted); font-size: 10px; font-weight: 650; letter-spacing: .02em; }
.text-button { border: 0; padding: 0; color: var(--color-text-muted); background: transparent; font-size: 12px; cursor: pointer; }
.text-button:hover { color: var(--color-text); }
.logout-button { min-height: 32px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); }
.logout-button:hover { border-color: var(--color-text-muted); color: var(--color-text); background: var(--color-surface-muted); }
.auth-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(340px, 41%) 1fr; background: var(--color-hosa-ivory); }
.auth-identity { position: relative; display: flex; min-height: 100%; flex-direction: column; padding: clamp(36px, 5vw, 80px); overflow: hidden; color: var(--color-hosa-ivory); background: var(--color-hosa-green); }
.auth-identity::before, .auth-identity::after { position: absolute; content: ""; pointer-events: none; }
.auth-identity::before { inset: 24px; border: 1px solid rgba(244, 239, 230, .12); }
.auth-identity::after { top: 17%; right: -82px; width: 240px; height: 240px; border: 1px solid rgba(198, 161, 91, .42); transform: rotate(45deg); }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: baseline; gap: var(--space-2); letter-spacing: .09em; }
.auth-brand strong { font-size: clamp(26px, 2.2vw, 34px); line-height: 1; }
.auth-brand span { color: var(--color-hosa-gold); font-size: 12px; font-weight: 800; }
.auth-organization { position: relative; z-index: 1; margin: auto 0 0; color: rgba(244, 239, 230, .66); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.auth-statement { position: relative; z-index: 1; max-width: 310px; margin: var(--space-3) 0 auto; font-size: clamp(22px, 2.6vw, 36px); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
.auth-index { position: relative; z-index: 1; display: grid; gap: var(--space-2); margin-top: auto; color: rgba(244, 239, 230, .58); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
.auth-index span { display: flex; align-items: center; gap: var(--space-2); }
.auth-index span::before { width: 24px; height: 1px; content: ""; background: var(--color-hosa-gold); }
.auth-panel { display: grid; align-items: center; justify-items: center; min-width: 0; padding: clamp(32px, 7vw, 110px); }
.auth-card { width: min(100%, 408px); }
.auth-eyebrow { margin: 0 0 var(--space-5); color: var(--color-warning); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.auth-title { margin: 0; color: var(--color-hosa-green); font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -.055em; line-height: .98; }
.auth-copy { max-width: 310px; margin: var(--space-4) 0 var(--space-8); color: var(--color-text-muted); font-size: 15px; }
.auth-form { display: grid; gap: var(--space-5); }
.auth-field { display: grid; gap: var(--space-2); color: var(--color-text); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.auth-field input { width: 100%; min-height: 50px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; background: #f8f5ee; color: var(--color-text); font: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.auth-field input:hover { border-color: #b9bdb3; }
.auth-field input:focus { border-color: var(--color-hosa-gold); background: var(--color-surface); box-shadow: 0 0 0 3px rgba(198, 161, 91, .16); }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0 1000px #f8f5ee inset; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-top: var(--space-2); padding: 0 var(--space-4); border: 1px solid rgba(198, 161, 91, .72); border-radius: var(--radius-sm); background: var(--color-hosa-green); color: var(--color-hosa-ivory); font-weight: 750; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); }
.auth-submit:hover:not(:disabled) { background: var(--color-green-soft); transform: translateY(-1px); }
.auth-submit:disabled { cursor: wait; opacity: .72; }
.auth-message { margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--color-danger); color: #7c2d12; background: #fbefe9; font-size: 12px; }
.auth-message--neutral { border-left-color: var(--color-hosa-gold); color: var(--color-text-muted); background: var(--color-surface-muted); }
.auth-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 860px) { .auth-screen { grid-template-columns: 1fr; } .auth-identity { min-height: 290px; padding: var(--space-6); } .auth-identity::before { inset: 16px; } .auth-organization { margin-top: auto; } .auth-statement { margin-bottom: auto; font-size: 27px; } .auth-index { display: none; } .auth-panel { min-height: calc(100vh - 290px); padding: var(--space-8) var(--space-5); } }
@media (max-width: 620px) { .topbar-tools { width: 100%; justify-content: flex-end; gap: var(--space-2); } .user-zone { gap: var(--space-2); padding-left: var(--space-2); } .user-summary { min-width: 0; } .logout-button { padding-inline: 8px; } .auth-identity { min-height: 224px; } .auth-statement { max-width: 250px; font-size: 24px; } .auth-panel { min-height: calc(100vh - 224px); padding: var(--space-8) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .auth-field input, .auth-submit, .logout-button { transition: none; } }
.placeholder-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.placeholder-panel { min-height: 164px; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.placeholder-panel--wide { grid-column: span 7; } .placeholder-panel--narrow { grid-column: span 5; }
.placeholder-label { display: block; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.placeholder-line { height: 7px; margin: 9px 0; background: var(--color-surface-muted); border-radius: 2px; } .placeholder-line--long { width: 84%; } .placeholder-line--medium { width: 62%; } .placeholder-line--short { width: 39%; }
@media (max-width: 850px) { .placeholder-panel--wide, .placeholder-panel--narrow { grid-column: 1 / -1; } }