.app-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; background: var(--navy); color: var(--nav-text); padding: 28px 16px 18px; display: flex; flex-direction: column; overflow: hidden; }
.wordmark { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--brand-mark); font-size: 1.8rem; font-weight: 850; letter-spacing: -.06em; padding: 0 10px 26px; }
.wordmark span { font-size: 1.4rem; font-weight: 700; color: white; letter-spacing: -.045em; }
.sidebar-caption { margin: 20px 12px 10px; color: var(--nav-muted); font-size: .63rem; letter-spacing: .15em; font-weight: 650; }
.sidebar nav { display: grid; gap: 4px; min-height: 0; overflow-y: auto; flex: 1; } .sidebar-section-links { display: grid; gap: 4px; }
.sidebar-section-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding-right: 12px; }
.sidebar-section-summary::-webkit-details-marker { display: none; }
.sidebar-section-summary::after { content: '\25BE'; font-size: .6rem; opacity: .6; transition: transform .15s; }
.sidebar-section:not([open]) .sidebar-section-summary::after { transform: rotate(-90deg); }

.nav-link { display: flex; align-items: center; gap: 12px; border: 0; background: none; width: 100%; text-decoration: none; padding: 10px 12px; color: var(--nav-ink); border-radius: 7px; font-size: .84rem; text-align: left; }
.nav-link.active { background: var(--nav-active); color: var(--nav-active-ink); box-shadow: inset 3px 0 var(--nav-active-bar); } a.nav-link:hover { background: var(--nav-hover); }
.nav-symbol { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border: 1px solid var(--nav-symbol-line); border-radius: 5px; font-size: .65rem; flex-shrink: 0; }
.nav-link.planned { opacity: .62; font-weight: 400; } .sidebar-bottom { margin-top: auto; padding: 32px 10px 0; font-size: .74rem; color: var(--nav-faint); }
.sidebar-collapse { border-color: var(--nav-line); color: var(--nav-ink); background: none; font-size: .72rem; } .sidebar-collapse:hover { background: var(--nav-active); }
.workspace { min-width: 0; display: flex; flex-direction: column; } .topbar { min-height: 86px; padding: 14px 32px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; }
.topbar > .select-field { min-width: 160px; max-width: 360px; } .topbar select { font-weight: 600; border: 0; padding-left: 0; min-height: 30px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.profile-menu { position: relative; } .profile-menu summary { display: flex; align-items: center; gap: 10px; list-style: none; font-size: .86rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 37px; height: 37px; background: var(--avatar-bg); color: var(--avatar-ink); border: 1px solid var(--avatar-line); }
.profile-options { position: absolute; top: 48px; right: 0; z-index: 10; width: 190px; background: white; padding: 15px; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.profile-options a { font-size: .86rem; } .main-content { width: 100%; padding: 32px; flex: 1; } .workspace-footer { margin: 20px 32px; display: flex; justify-content: space-between; color: var(--muted); font-size: .73rem; }
.security-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 24px; } .lookup-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; } .lookup-panel .form { grid-template-columns: minmax(100px,1fr) auto; align-items: end; } .lookup-panel .form-error { grid-column: 1/-1; }
.sidebar-toggle,.sidebar-scrim { display: none; } .compact { grid-template-columns: 82px minmax(0,1fr); } .compact .nav-label { display: none; } .compact .sidebar { padding-inline: 10px; } .compact .sidebar-bottom { padding-inline: 0; }
.auth-layout { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; background: white; } .auth-story { background: var(--navy); color: white; display: flex; flex-direction: column; padding: 44px 10%; position: relative; overflow: hidden; }
.auth-story::after { content: ''; position: absolute; width: 560px; height: 560px; border: 1px solid var(--auth-ring); border-radius: 50%; bottom: -240px; right: -200px; box-shadow: 0 0 0 65px var(--auth-ring-fill),0 0 0 66px var(--auth-ring),0 0 0 130px color-mix(in srgb, var(--auth-ring-fill) 33%, transparent); pointer-events: none; }
.auth-story .wordmark { padding-left: 0; } .auth-story-copy { margin: auto 0; position: relative; z-index: 1; padding-block: 50px; } .auth-story-copy h1 { font-size: clamp(2.4rem,3.6vw,4.1rem); line-height: 1.07; max-width: 11ch; margin-bottom: 28px; font-weight: 650; }
.auth-story-copy > p:not(.eyebrow) { color: var(--auth-copy); max-width: 35ch; font-size: 1.05rem; } .auth-story .eyebrow { color: var(--accent-on-dark); }
.trust-row { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 24px; } .trust-row span { border-top: 2px solid var(--trust-line); padding-top: 10px; color: var(--auth-chip); font-size: .72rem; }
.auth-pane { display: flex; flex-direction: column; min-height: 100dvh; } .auth-pane > .auth-card { flex: 1 0 auto; align-content: center; }
.powered-by { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 24px 26px; color: #8a8a8a; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.powered-by img { height: 34px; width: auto; transition: opacity .15s; opacity: .9; } .powered-by:hover img, .powered-by:focus-visible img { opacity: 1; }
.auth-footer { color: var(--auth-muted); font-size: .73rem; position: relative; z-index: 1; margin: 0; }
.auth-card { width: min(100%,510px); padding: 54px; margin: auto; display: grid; gap: 14px; } .auth-card h2 { font-size: 1.9rem; letter-spacing: -.035em; margin: 0; } .auth-card .eyebrow { margin-bottom: 0; }
.auth-card > .muted { margin: 0 0 15px; font-size: .9rem; } .auth-card > a { font-size: .86rem; } .fine-print { color: var(--muted); font-size: .76rem; margin-top: 20px; }
.provisioning { text-align: center; padding: 14px; background: #f8fafc; border-radius: 8px; border: 1px solid var(--line); } .qr { width: min(220px,100%); height: auto; } .secret { overflow-wrap: anywhere; display: block; font-size: .85rem; }
.recovery-list { padding: 14px; list-style: none; background: #f5f8fa; display: grid; gap: 9px; font-size: .76rem; overflow-wrap: anywhere; }
.client-logo { max-width: 130px; max-height: 38px; object-fit: contain; }
@media (max-width: 1200px) { .app-layout { grid-template-columns: 200px minmax(0,1fr); } .main-content { padding: 24px; } .topbar { padding-inline: 24px; } .priority-3 { display: none; } .profile-name,.client-name { display: none; } .compact { grid-template-columns: 82px minmax(0,1fr); } }
@media (max-width: 950px) { .app-layout,.compact { display: block; } .sidebar { position: fixed; z-index: 25; width: 240px; left: -260px; } .sidebar-open .sidebar { left: 0; } .sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 24; border: 0; border-radius: 0; background: var(--scrim); color: transparent; } .sidebar-toggle { display: inline-flex; } .sidebar-collapse { display: none; } .compact .nav-label { display: inline; } .security-grid { grid-template-columns: 1fr; } .priority-2 { display: none; } .auth-story { padding-inline: 12%; } .auth-card { padding: 36px; } }
@media (max-width: 620px) { .topbar { padding: 12px 16px; gap: 12px; } .topbar > .select-field { min-width: 0; flex: 1; } .topbar-right { gap: 0; } .refresh-access { display: none; } .main-content { padding: 22px 16px; } .page-header { align-items: flex-start; flex-direction: column; } .panel { padding: 20px; } .table-panel { padding: 0; } .lookup-panel { grid-template-columns: 1fr; gap: 14px; } .lookup-panel .form { grid-template-columns: 1fr; } .auth-layout { grid-template-columns: 1fr; } .auth-story { min-height: 100px; padding: 24px; } .auth-story-copy,.auth-footer { display: none; } .auth-story .wordmark { padding: 0; } .auth-card { padding: 30px 24px; width: 100%; max-width: 450px; } .auth-pane { min-height: 0; } .powered-by img { height: 28px; } .pagination,.export-actions,.filter-bar { padding: 14px; } .pagination { justify-content: flex-start; } .workspace-footer { margin-inline: 16px; } .detail-list { grid-template-columns: 1fr; gap: 5px; } .detail-list dd { margin-bottom: 12px; } }

/* Shared desktop rail: header/control stay visible while navigation scrolls. */
.sidebar-header { position: relative; flex-shrink: 0; padding-right: 22px; }
.sidebar-header .wordmark { padding: 0 0 22px; gap: 6px; }
.sidebar-header .wordmark span { font-size: 1rem; }
.sidebar-collapse { position: absolute; right: -8px; top: 0; width: 28px; min-height: 28px; padding: 0; font-size: 1.2rem; }
.sidebar-bottom { flex-shrink: 0; }
@media (min-width: 951px) {
  .compact .sidebar-header { padding-top: 32px; padding-right: 0; }
  .compact .sidebar-section { border-top: 1px solid var(--nav-line); padding-top: 8px; margin-top: 8px; }
  .compact .sidebar-section-summary { display: none; }
}
@media (max-width: 950px) {
  .compact .sidebar { padding-inline: 16px; }
  .compact .sidebar-section-summary { display: flex; }
}