#app { min-height: 100vh; }
#app.is-route-loading { opacity: .94; }
#app.is-route-loading > .app-shell .main-area { position: relative; }
#app.is-route-loading > .app-shell .main-area::after { position: absolute; inset: var(--topnav-height) 0 0; z-index: var(--z-sticky); content: ''; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(201,162,39,.12), transparent) top/30% 2px no-repeat; animation: routeProgress 900ms ease-in-out infinite; }
.window-status-card { display: flex; align-items: flex-start; gap: var(--space-5); min-height: 260px; max-width: 980px; margin-inline: auto; padding: clamp(24px, 5vw, 48px); }
.window-status-card .btn { margin-top: var(--space-2); }
.window-status-icon { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid var(--border-gold); border-radius: var(--radius-xl); color: var(--text-gold); background: rgba(201,162,39,.08); }
.window-status-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.window-status-copy { flex: 1; min-width: 0; }
.window-status-kicker { display: block; margin-bottom: var(--space-2); color: var(--text-gold); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.window-status-copy h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-2xl); }
.window-status-copy p { max-width: 760px; margin: 0 0 var(--space-5); color: var(--text-secondary); line-height: var(--line-height-relaxed); }
.window-status-badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); color: var(--text-warning); background: var(--warning-bg); font-size: var(--font-size-xs); font-weight: 700; }
.window-status-badge::before { width: 7px; height: 7px; content: ''; border-radius: 50%; background: currentColor; }
.window-source { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-1); font-size: var(--font-size-sm); }
.window-source dt { color: var(--text-muted); }
.window-source dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-primary); }
@keyframes routeProgress { 0% { background-position: -30% 0; } 100% { background-position: 130% 0; } }
@media (max-width: 560px) { .window-status-card { flex-direction: column; } .window-source { grid-template-columns: 1fr; gap: var(--space-1); } .window-source dd { margin-bottom: var(--space-2); } }

:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root {
  --qp-surface-gradient: linear-gradient(135deg, color-mix(in srgb, var(--bg-1) 96%, var(--brand-primary) 4%), var(--bg-2));
  --qp-frame-gradient: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 42%, var(--border-strong)), color-mix(in srgb, var(--diamond) 28%, var(--border)), color-mix(in srgb, var(--brand-primary) 24%, var(--border)));
}

:root[data-theme="light"] {
  --qp-surface-gradient: linear-gradient(135deg, #ffffff, color-mix(in srgb, #f4f5f7 90%, var(--brand-primary) 10%));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shell positioning lives in layout.css — keep only visual styling here. */
.sidebar-item[hidden], .sidebar-section[hidden], .nav-rail-group[hidden] { display: none !important; }
.sidebar-brand:hover { color: inherit; text-decoration: none; }
.topnav-action svg, .topnav-logout svg, .topnav-hamburger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-item svg, .nav-rail-trigger svg, .sidebar-flyout__item svg, .topnav-item svg, .topnav-trigger svg, .topnav-dropdown-item svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-title-icon svg, .admin-summary-icon svg, .window-status-icon svg, .report-unavailable-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page { padding: var(--content-padding); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border-strong)); border-radius: var(--radius-xl); background: linear-gradient(120deg, rgba(var(--brand-primary-rgb), .13), rgba(var(--diamond-rgb), .05) 52%, rgba(var(--brand-accent-rgb), .07)); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06); }
.page-title-wrap h1 { margin: 0; font-size: var(--font-size-3xl); color: var(--text-primary); text-shadow: 0 1px 18px rgba(var(--brand-primary-rgb), .16); overflow-wrap: anywhere; }
.page-title-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--border-gold); border-radius: var(--radius-lg); color: var(--text-gold); background: linear-gradient(135deg, rgba(var(--brand-primary-rgb),.18), rgba(var(--diamond-rgb),.08)); }
.page-title-icon svg { width: 22px; height: 22px; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Grid-frame unification: AppShell.page wraps list pages in
   .page-card-fused — a single card where the card-header holds the
   title+actions and card-body holds the grid. */
.page-card-fused { margin-bottom: var(--space-6); }
.page-card-fused .card-header { padding: var(--space-4) var(--space-5); }
.page-card-fused .card-header h1 { font-size: var(--font-size-xl); }
.page-card-fused .card-body { padding: 0; }
.page-card-fused .data-table-wrap { border-radius: 0; }
.page-card-fused .page-title-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--radius-md); }
.page-card-fused .page-title-icon svg { width: 18px; height: 18px; }
/* When a list page renders its own card inside the fused wrapper, unwrap it
   so we don't get double borders. */
.page-card-fused > .card-body > .card { margin: 0; border: none; box-shadow: none; border-radius: 0; background: transparent; }
.page-card-fused > .card-body > .card > .card-body { padding: 0; }
.page-card-fused > .card-body > .card > .card-header { display: none; }

.app-shell .card, .app-shell .datagrid, .app-shell .modal-content, .app-shell .stat-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-strong));
  background: var(--qp-surface-gradient);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.04);
}
.app-shell .card::after, .app-shell .datagrid::after, .app-shell .stat-card::after {
  position: absolute; inset: -80% -20%; content: '';
  background: linear-gradient(115deg, transparent 40%, rgba(var(--diamond-rgb), .06) 49%, rgba(var(--brand-primary-rgb), .10) 51%, transparent 60%);
  transform: translateX(-45%) rotate(8deg); animation: qp-card-sheen 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qp-card-sheen { 0%, 58% { transform: translateX(-55%) rotate(8deg); } 100% { transform: translateX(55%) rotate(8deg); } }

.breadcrumbs { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); color: var(--text-muted); font-size: var(--font-size-xs); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs [aria-current="page"] { color: var(--text-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.report-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.report-filter-grid .form-group { margin-bottom: 0; }
.report-check { align-self: end; min-height: var(--input-height); padding-block: var(--space-2); }
.report-filter-actions { display: flex; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-5); }
.report-result { margin-top: var(--space-5); min-height: 220px; }
.report-result .table-wrapper { max-height: 62vh; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
/* .admin-summary-card/icon/value replaced by unified .stat-card-* (layout.css). */
.admin-quick-panel { margin-top: var(--space-5); }
.admin-quick-panel .card-header { align-items: flex-start; }
.admin-quick-panel .card-header p { margin: var(--space-1) 0 0; }
@media (max-width: 560px) { .admin-summary-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .report-filter-grid { grid-template-columns: 1fr; } }

/* Balance sheet — two-sided layout */
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bs-side td.num, .bs-side th.num { text-align: end; font-family: var(--font-num); }
.bs-side tr.bs-parent td { font-weight: 700; }
.bs-diff { margin-top: var(--space-4); }
@media (max-width: 900px) { .bs-grid { grid-template-columns: 1fr; } }

/* Unified balance sheet — single DataGrid; row tint per side + parent bold. */
.datagrid tbody tr.bs-asset td:first-child { box-shadow: inset-inline-start 3px 0 0 var(--success); }
.datagrid tbody tr.bs-liability td:first-child { box-shadow: inset-inline-start 3px 0 0 var(--info); }
.datagrid tbody tr.bs-parent td { font-weight: var(--weight-bold); }
.datagrid tbody tr.bs-parent.bs-asset { background: var(--success-bg); }
.datagrid tbody tr.bs-parent.bs-liability { background: var(--info-bg); }
/* Totals strip pinned right under the grid (own table, same .datagrid skin). */
.datagrid.bs-totals { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.datagrid.bs-totals .dg-totals-row td { font-weight: var(--weight-bold); }
.datagrid.bs-totals .bs-total.bs-asset td { background: var(--success-bg); }
.datagrid.bs-totals .bs-total.bs-liability td { background: var(--info-bg); }
.datagrid.bs-totals .bs-total.bs-diff td { background: var(--bg-hover); }
.datagrid.bs-totals .dg-total-label { color: var(--brand-primary-soft); }

/* Sales/Gold report — per-karat grams summary + direction chips */
.sg-summary { margin-bottom: var(--space-5); }
.sg-summary-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 var(--space-3); }
.sg-summary-table { width: 100%; border-collapse: collapse; }
.sg-summary-table th, .sg-summary-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); text-align: start; font-size: 0.9rem; color: var(--text-primary); }
.sg-summary-table thead th { background: var(--grid-header-bg); font-weight: 700; color: var(--text-primary); }
.sg-summary-table tbody td { background: var(--bg-surface); color: var(--text-primary); }
.sg-summary-table tfoot td { font-weight: 700; background: var(--bg-overlay); color: var(--text-primary); border-top: 2px solid var(--border-strong); }
.sg-summary-table .num, .sg-dir-num { text-align: end; font-variant-numeric: tabular-nums; }
.sg-diff-pos { color: #b91c1c; font-weight: 700; }
.sg-compensation { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid #f59e0b; background: #fffbeb; color: #92400e; border-radius: var(--radius-md, 8px); font-weight: 600; }
.sg-dir { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.sg-dir.sg-in { background: #dcfce7; color: #166534; }
.sg-dir.sg-out { background: #fee2e2; color: #b91c1c; }
.num { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .page-heading { flex-direction: column; }
  .page-title-wrap, .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .app-shell .card, .app-shell .datagrid { border-radius: var(--radius-lg); }
}

@media (max-width: 420px) {
  .page-title-wrap h1 { font-size: var(--font-size-xl); }
  .page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .card, .app-shell .datagrid, .app-shell .modal-content { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell .card, .app-shell .datagrid, .app-shell .modal-content { transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
  .app-shell .card:hover, .app-shell .datagrid:hover { border-color: color-mix(in srgb, var(--brand-primary) 46%, var(--border-strong)); }
}

.error-code { color: var(--text-gold); font: 700 var(--font-size-5xl)/1 var(--font-mono); margin-bottom: var(--space-4); }
.report-unavailable { display: grid; justify-items: center; gap: var(--space-3); max-width: 720px; margin: clamp(24px, 10vh, 120px) auto; padding: clamp(24px, 5vw, 56px); text-align: center; }
.report-unavailable h2 { font-size: var(--font-size-xl); }
.report-unavailable p { max-width: 500px; color: var(--text-secondary); }
.report-unavailable-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--border-gold); border-radius: 20px; color: var(--text-gold); background: rgba(201,162,39,.08); }
.report-unavailable-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.login-page { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); align-items: stretch; gap: clamp(28px, 6vw, 88px); min-height: 100vh; min-height: 100dvh; padding: clamp(24px, 6vw, 88px); overflow-x: hidden; overflow-y: auto; background: var(--bg-0); }
/* Default jewellery backdrop — gold/silver/diamond artwork, cover-fit so
   it stretches to any screen. A custom LoginBackgroundUrl overrides it. */
.login-page > .login-backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .5; pointer-events: none; }
.login-page::before, .login-page::after { position: absolute; z-index: -1; content: ''; border-radius: 50%; filter: blur(1px); pointer-events: none; will-change: transform; }
.login-page::before { width: 520px; height: 520px; inset-block-start: -260px; inset-inline-end: -140px; background: radial-gradient(circle, rgba(201,162,39,.12), transparent 68%); animation: qp-login-drift-a 22s ease-in-out infinite alternate; }
.login-page::after { width: 480px; height: 480px; inset-block-end: -300px; inset-inline-start: -180px; background: radial-gradient(circle, rgba(15,123,108,.13), transparent 70%); animation: qp-login-drift-b 28s ease-in-out infinite alternate; }
@keyframes qp-login-drift-a { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-6%, 8%) scale(1.15); } }
@keyframes qp-login-drift-b { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(7%, -6%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .login-page::before, .login-page::after { animation: none; } }
.login-story { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.login-brand { display: inline-flex; align-items: center; gap: var(--space-3); width: fit-content; color: var(--text-primary); font-size: var(--font-size-xl); font-weight: 700; }
.login-brand img { width: 44px; height: 44px; }
.login-story-main { max-width: 580px; padding-block: var(--space-10); }
.login-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-gold); font-size: var(--font-size-sm); font-weight: 600; }
.login-eyebrow::before { width: 22px; height: 1px; content: ''; background: var(--brand-gold); }
.login-story h1 { margin: var(--space-4) 0 var(--space-3); font-size: clamp(32px, 4.3vw, 58px); line-height: 1.2; letter-spacing: -.035em; }
.login-story h1 span { display: block; background: var(--gold-wave, linear-gradient(135deg,#9C7E1E,#C9A227,#F6E27A,#C9A227,#9C7E1E)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-page.has-custom-bg::before { background-image: var(--login-bg); background-size: cover; background-position: center; opacity: .28; filter: none; border-radius: 0; inset: 0; width: auto; height: auto; animation: none; }
.login-card { position: relative; }
.login-card::before { position: absolute; inset: -1px; z-index: -1; content: ''; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(var(--diamond-rgb,191,231,255),0.45), rgba(var(--brand-primary-rgb,201,162,39),0.55) 40%, rgba(var(--diamond-rgb,191,231,255),0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.login-story-copy { max-width: 470px; color: var(--text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.login-art { width: min(100%, 520px); margin-top: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); }
.login-footnote { color: var(--text-muted); font-size: var(--font-size-xs); }
.login-panel-wrap { position: relative; isolation: isolate; display: grid; place-items: center; align-content: center; min-width: 0; padding-block: var(--space-2); }
.login-panel-wrap::before { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; z-index: -1; content: ''; width: min(560px, 90vw); max-width: 130%; aspect-ratio: 1; background: url('/app/assets/brand/login-emblem.svg') center/contain no-repeat; opacity: .9; filter: drop-shadow(0 24px 60px rgba(201,162,39,.28)); pointer-events: none; }
.login-panel-wrap::after { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; z-index: -1; content: ''; width: min(680px, 100vw); max-width: 150%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,39,.16), transparent 62%); pointer-events: none; }
@keyframes qp-emblem-float { 0%, 100% { transform: translateY(-10px) } 50% { transform: translateY(10px) } }
@keyframes qp-emblem-spin { to { rotate: 360deg } }
@keyframes qp-emblem-pulse { from { opacity: .5; scale: .92 } to { opacity: 1; scale: 1.04 } }
@media (prefers-reduced-motion: reduce) { .login-panel-wrap::before, .login-panel-wrap::after { animation: none; } }
.login-card { width: min(100%, 460px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--border-strong); border-radius: var(--radius-2xl); background: var(--bg-1); box-shadow: var(--shadow-xl); }
.login-card-head { margin-bottom: var(--space-8); }
.login-card-head h2 { margin-bottom: var(--space-2); font-size: var(--font-size-2xl); }
.login-card-head p { margin: 0; color: var(--text-secondary); }
.login-card .form-group { margin-bottom: var(--space-5); }
.login-card .form-label { color: var(--text-primary); }
.login-card .form-input { height: 48px; background: var(--bg-0); }
.login-input-wrap { position: relative; }
.login-input-wrap .form-input { padding-inline-start: 46px; padding-inline-end: 48px; }
.login-input-wrap:not(.has-toggle) .form-input { padding-inline-end: var(--space-3); }
.login-input-icon { position: absolute; inset-inline-start: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: inline-flex; align-items: center; justify-content: center; }
.login-input-wrap:focus-within .login-input-icon { color: var(--text-gold); }
.login-input-icon svg, .password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle { position: absolute; inset-inline-end: 8px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; transform: translateY(-50%); border-radius: var(--radius-sm); color: var(--text-muted); }
.password-toggle:hover { color: var(--text-primary); background: var(--bg-3); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block: var(--space-4) var(--space-6); }
.login-remember { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); cursor: pointer; }
.login-remember input { width: 16px; height: 16px; accent-color: var(--brand-gold); }
.login-language { color: var(--text-gold); font-size: var(--font-size-sm); }
.login-submit { width: 100%; height: 48px; }
.login-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Reserve a fixed slot for the error banner so toggling it NEVER changes the
   card height (the "login card jumps on the first keystroke" bug). The slot is
   always the same size; only content visibility flips. */
.login-error { height: 44px; overflow: hidden; opacity: 0; visibility: hidden; margin-top: var(--space-4); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-error); font-size: var(--font-size-sm); display: flex; align-items: center; }
.login-error.is-visible { visibility: visible; opacity: 1; border-color: rgba(239,68,68,.3); background: var(--error-bg); }
.login-card-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--font-size-xs); text-align: center; }

/* Short viewports: compress the card so the submit button stays on-screen. */
@media (max-height: 700px) {
  .login-page { padding-block: var(--space-5); }
  .login-card { padding-block: var(--space-6); }
  .login-card-head { margin-bottom: var(--space-4); }
  .login-card .form-group { margin-bottom: var(--space-3); }
  .login-card .form-input { height: 42px; }
  .login-submit { height: 42px; }
  .login-options { margin-block: var(--space-2) var(--space-4); }
  .login-card-foot { margin-top: var(--space-4); padding-top: var(--space-3); }
  .login-story-main { padding-block: var(--space-4); }
  .login-art { display: none; }
}
@media (max-height: 520px) {
  .login-card-head p { display: none; }
  .login-card .form-input { height: 38px; }
  .login-submit { height: 38px; }
}

@media (max-width: 1000px) {
  .login-page { grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); gap: var(--space-8); padding: var(--space-8); }
  .login-story h1 { font-size: clamp(30px, 4vw, 44px); }
}
@media (max-width: 768px) {
  .app-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(-105%); transition: transform var(--transition-normal); z-index: var(--z-modal); box-shadow: var(--shadow-xl); }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .sidebar.mobile-open, [dir="rtl"] .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(4,7,11,.62); z-index: var(--z-modal-backdrop); transition: opacity var(--transition-normal), visibility var(--transition-normal); }
  .sidebar-overlay.show { visibility: visible; opacity: 1; }
  .main-area { min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .page { overflow: visible; }
  .topnav-hamburger { display: inline-flex; }
  .topnav-context { font-size: var(--font-size-xs); }
  .topnav { padding-inline: var(--space-3); }
  .login-page { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); width: 100%; max-width: 100vw; }
  .login-story { display: contents; }
  .login-brand { order: 0; }
  .login-story-main { order: 1; padding-block: var(--space-4) 0; }
  .login-story h1 { margin-block: var(--space-3); font-size: clamp(28px, 8vw, 42px); }
  .login-story-copy, .login-art, .login-footnote { display: none; }
  .login-panel-wrap { order: 2; align-items: start; }
  .login-panel-wrap::before { opacity: .5; width: min(360px, 90vw); }
  .login-panel-wrap::after { display: none; }
  .login-card { padding: var(--space-6); }
  .page-heading { align-items: flex-start; }
  .page-title-wrap h1 { font-size: var(--font-size-2xl); }
}
@media (max-width: 420px) {
  .topnav-context { display: none; }
  .topnav-actions { gap: 0; }
  .topnav-logout span { display: none; }
  .topnav-logout { width: var(--btn-height); padding: 0; }
  .page { padding: var(--space-4); }
  .page-title-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .page-heading { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}