/* AutoCFO surgical UI improvements.
   This file deliberately preserves the existing Point Zero visual system.
   It only adds report assurance and fixes responsive navigation/actions. */

.report-assurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.assurance-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 13px;
  border-right: 1px solid var(--glass-border);
}
.assurance-item:last-child { border-right: 0; }
.assurance-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  color: var(--text-soft);
  font-size:11px;
  font-weight: 700;
}
.assurance-item.is-good .assurance-icon { color: var(--emerald); border-color: rgba(16, 201, 122, .35); }
.assurance-item.is-review .assurance-icon { color: var(--gold); border-color: rgba(212, 168, 83, .35); }
.assurance-item.is-warning .assurance-icon { color: #FF8080; border-color: rgba(255, 128, 128, .35); }
.assurance-copy, .assurance-label, .assurance-value { display: block; min-width: 0; }
.assurance-label {
  color: var(--text-faint);
  font-size:11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.assurance-value {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="light"] .report-assurance { background: rgba(20, 20, 70, .018); }

/* The app currently hides the sidebar below 680px. This adds a drawer while
   keeping the existing desktop navigation and visual language unchanged. */
.mobile-menu-btn, .mobile-nav-scrim { display: none; }
.mobile-menu-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-primary);
  cursor: pointer;
}
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 88;
  padding: 0;
  border: 0;
  background: rgba(3, 4, 18, .68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}


/* Overview refinement: scoped to the portfolio page, preserving Point Zero. */
.page-overview { --ov-alert-high: #ff8585; --ov-alert-review: #edbf68; }
.page-overview .ov-alert-chip.is-high { color: var(--ov-alert-high); }
.page-overview .ov-alert-chip.is-review { color: var(--ov-alert-review); }
[data-theme="light"] .page-overview { --ov-alert-high: #b42335; --ov-alert-review: #8a5700; }
.page-overview .orb { opacity: .22; animation: none; }
.page-overview .geo, .page-overview .mark { display: none; }
.page-overview .card, .page-overview .pf-tile,
.page-overview .rpt-row, .page-overview .hero-card {
  box-shadow: none !important;
  transform: none !important;
}
.page-overview .card { background: #2a2a2a; border-radius: 14px; }
.page-overview .card::before, .page-overview .hero-card::before,
.page-overview .hero-card::after { display: none; }
.page-overview .new-btn, .page-overview .btn-primary-sm {
  background: #5082D5 !important; color: #fff !important; box-shadow: none !important; border: 1px solid transparent;
}
.page-overview .new-btn:hover, .page-overview .btn-primary-sm:hover { background: #4072C5; }
.page-overview .ov-head { margin-bottom: 20px; align-items: center; }
.page-overview .page-title { font-size: 32px; letter-spacing: -.025em; }
.page-overview .page-sub { line-height: 1.6; }
.page-overview .pf-grid {
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0;
  border: 1px solid var(--glass-border); border-radius: 14px;
  background: #2a2a2a; overflow: hidden; margin-bottom: 24px;
}
.page-overview .pf-tile {
  min-width: 0; border: 0; border-inline-end: 1px solid var(--glass-border);
  border-radius: 0; background: transparent !important; padding: 18px 20px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.page-overview .pf-tile:last-child { border-inline-end: 0; }
.page-overview a.pf-tile:hover { background: rgba(92,150,246,.07) !important; }
.page-overview .pf-value { font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.page-overview .pf-label { font-size: 11px; line-height: 1.5; min-height: 17px; }
.page-overview .pf-note { font-size: 12px; line-height: 1.5; }
.page-overview .ov-worklist { grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 20px; align-items: start; }
.page-overview .card-head { padding: 17px 20px; gap: 12px; }
.page-overview .card-body { padding: 4px 20px; }
.page-overview .att-list, .page-overview .rpt-list { gap: 0; }
.page-overview .att-row, .page-overview .rpt-row {
  border: 0 !important; border-bottom: 1px solid var(--glass-border) !important;
  border-radius: 0; background: transparent !important;
  padding: 15px 0; gap: 12px; min-width: 0;
}
.page-overview .att-row:last-child, .page-overview .rpt-row:last-child { border-bottom: 0 !important; }
.page-overview .att-row:hover, .page-overview .rpt-row:hover { background: rgba(92,150,246,.06) !important; }
.page-overview .att-name, .page-overview .rpt-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.page-overview .att-meta, .page-overview .rpt-meta { line-height: 1.5; }
.page-overview .ov-status-group { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.page-overview .ov-status-label { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.page-overview .att-chip { border: 0; padding: 0; border-radius: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.page-overview .rpt-icon { width: 30px; height: 34px; flex: 0 0 30px; background: transparent; border: 0; }
.page-overview .rpt-body { min-width: 0; }
.page-overview .type-chip { display: inline-block; margin-top: 4px; }
.page-overview .ov-spotlight .hero-card { padding: 22px !important; background: transparent; }
.page-overview .hero-spot-inner { flex-wrap: nowrap; gap: 24px; }
.page-overview .hero-ring-col { flex-direction: column; gap: 10px; flex: 0 0 116px; }
.page-overview .hero-main { min-width: 0; flex: 1; }
.page-overview .hero-kpi-value { font-size: clamp(22px,2.3vw,32px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-overview .hero-kpi-grid { gap: 16px; }
.page-overview .ov-select { max-width: 100%; min-width: 0; }
.page-overview :is(a,button,select):focus-visible { outline: 2px solid #9AC0FF; outline-offset: 4px; }
.page-overview .empty-state { box-shadow: none; }
[data-theme="light"] .page-overview .card,
[data-theme="light"] .page-overview .pf-grid,
.page-overview[data-theme="light"] .card,
.page-overview[data-theme="light"] .pf-grid { background: #fff !important; }
@media (max-width: 1150px) {
  .page-overview .ov-worklist { grid-template-columns: 1fr; }
  .page-overview .pf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .page-overview .pf-tile:nth-child(2) { border-inline-end: 0; }
  .page-overview .pf-tile:nth-child(-n+2) { border-bottom: 1px solid var(--glass-border); }
}
@media (max-width: 680px) {
  .page-overview:not(.nav-open) .sidebar { box-shadow: none !important; }
  .page-overview .content { padding: 20px 16px; }
  .page-overview .topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding-block: 12px !important; }
  .page-overview .topbar-right { flex-wrap: wrap; }
  .page-overview .ov-head { gap: 12px; }
  .page-overview .card-head { flex-wrap: wrap; padding-inline: 16px; }
  .page-overview .card-body { padding-inline: 16px; }
  .page-overview .att-row { flex-wrap: wrap; }
  .page-overview .att-row > div:first-child { flex: 1 0 100% !important; }
  .page-overview .ov-status-group { margin-inline-end: 16px; }
  .page-overview .hero-spot-inner { flex-direction: column; align-items: stretch; }
  .page-overview .hero-ring-col { flex-basis: auto; flex-direction: row; justify-content: flex-start; }
  .page-overview .hero-kpi-grid { grid-template-columns: 1fr; }
  .page-overview .spot-links { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .page-overview .pf-grid { grid-template-columns: 1fr; }
  .page-overview .pf-tile { border-inline-end: 0; border-bottom: 1px solid var(--glass-border); padding: 14px 16px; }
  .page-overview .pf-tile:last-child { border-bottom: 0; }
}
@media (max-width: 680px) {
  html, body { overflow-x: hidden; }
  .mobile-menu-btn { display: inline-flex; }
  .mobile-nav-scrim { display: block; }
  .sidebar {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 90 !important;
    width: min(86vw, 286px) !important;
    height: 100dvh !important;
    transform: translateX(-104%);
    transition: transform .24s cubic-bezier(.2, .75, .2, 1);
    box-shadow: 24px 0 70px rgba(0, 0, 0, .45);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; }
  .topbar { padding-inline: 14px !important; gap: 10px; }
  .topbar .breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { margin-left: auto; gap: 6px !important; }
  .report-assurance { grid-template-columns: 1fr 1fr; }
  .assurance-item:nth-child(2) { border-right: 0; }
  .assurance-item:nth-child(-n+2) { border-bottom: 1px solid var(--glass-border); }
  .stmt-tabs { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .stmt-tabs::-webkit-scrollbar { display: none; }
  .stmt-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .ph > div:last-child { width: 100%; display: flex !important; flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .report-assurance { grid-template-columns: 1fr; }
  .assurance-item { border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .assurance-item:nth-child(3) { border-bottom: 1px solid var(--glass-border); }
  .assurance-item:last-child { border-bottom: 0; }
  .ph > div:last-child .btn-back { flex: 1 0 100%; justify-content: center; }
  .ph > div:last-child .btn-action { flex: 1 1 calc(33.333% - 8px); justify-content: center; padding-inline: 10px; }
}

@media print {
  .mobile-menu-btn, .mobile-nav-scrim, .report-assurance { display: none !important; }
}

/* Executive Graphite: the portfolio page behaves like a CFO workspace.
   Neutral surfaces carry the data; purple is reserved for brand and action. */
.page-overview {
  --bg-deep:#0d0e12; --bg-mid:#111319; --glass-border:rgba(255,255,255,.075);
  --purple:#6D9FF1; --text-primary:#f2f3f5; --text-soft:#9a9faa; --text-faint:#9b9893;
  --emerald:#27b686; --blue:#7398f6; --orange:#dda348;
  --ov-surface:#15171d; --ov-raised:#191c23; --ov-muted:#111319;
  --ov-line:rgba(255,255,255,.075); --ov-accent:rgba(109,159,241,.12);
  --ov-alert-high:#ee6f7b; --ov-alert-review:#dda348;
  background:var(--bg-deep);
}
[data-theme="light"] .page-overview {
  --bg-deep:#f4f4f1; --bg-mid:#ecece8; --glass-border:rgba(24,25,28,.10);
  --text-primary:#1a1b1f; --text-soft:#676d78; --text-faint:#625b55;
  --ov-surface:#fff; --ov-raised:#fff; --ov-muted:#efefeb;
  --ov-line:rgba(24,25,28,.10); --ov-accent:rgba(65,115,198,.08);
  --ov-alert-high:#bd3448; --ov-alert-review:#93600a;
  background:var(--bg-deep)!important;
}
.page-overview .bg-orbs,.page-overview .bg-shapes{display:none}
.page-overview .main{background:var(--bg-deep)}
.page-overview .sidebar{background:#101116!important;border-inline-end:1px solid var(--ov-line)!important;backdrop-filter:none}
[data-theme="light"] .page-overview .sidebar{background:#fafaf8!important}
.page-overview .sidebar-brand,.page-overview .sidebar-footer{border-color:var(--ov-line)!important}
.page-overview .mark{display:grid;background:#6496E8;border-radius:8px;box-shadow:none;animation:none}
.page-overview .brand-name{font-weight:600;letter-spacing:-.02em}
.page-overview .nav-item{border:1px solid transparent;border-radius:7px}
.page-overview .nav-item:hover{background:rgba(255,255,255,.045)}
.page-overview .nav-item.active{color:var(--text-primary);background:var(--ov-accent);border-color:rgba(109,159,241,.18)}
.page-overview .topbar{height:58px;background:rgba(13,14,18,.94);border-color:var(--ov-line);backdrop-filter:blur(14px)}
[data-theme="light"] .page-overview .topbar{background:rgba(244,244,241,.94)!important;border-color:var(--ov-line)!important}
.page-overview .icon-btn,.page-overview .language-switch{background:transparent!important;border-color:var(--ov-line)!important;box-shadow:none!important}
.page-overview .new-btn,.page-overview .btn-primary-sm{min-height:36px;padding-inline:15px;border-radius:8px;background:#2563EB!important;border:1px solid rgba(255,255,255,.08);box-shadow:none!important}
.page-overview .new-btn:hover,.page-overview .btn-primary-sm:hover{background:#5788D7!important;transform:none}
.page-overview .content{padding:34px clamp(22px,3vw,46px) 48px}
.page-overview .ov-head{margin-bottom:22px;align-items:flex-end}
.page-overview .ov-eyebrow,.page-overview .ov-brief-kicker{margin-bottom:8px;color:var(--text-faint);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.page-overview .page-title{margin-bottom:7px;font-size:clamp(26px,2.2vw,34px);font-weight:600;letter-spacing:-.035em}
.page-overview .page-sub{color:var(--text-soft);font-size:13px}
.page-overview .ov-link{color:var(--text-soft);text-decoration:none}.page-overview .ov-link:hover{color:var(--text-primary)}
.page-overview .ov-brief{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:14px;padding:20px 22px;border:1px solid var(--ov-line);border-radius:10px;background:var(--ov-raised)}
.page-overview .ov-brief-copy{display:grid;gap:4px;min-width:0}.page-overview .ov-brief-copy .ov-brief-kicker{margin-bottom:2px}
.page-overview .ov-brief-copy strong{color:var(--text-primary);font-size:16px;font-weight:600;letter-spacing:-.015em}
.page-overview .ov-brief-copy>span:last-child{color:var(--text-soft);font-size:13px;line-height:1.55}
.page-overview .ov-brief-action{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:36px;padding:8px 12px;border:1px solid rgba(109,159,241,.28);border-radius:7px;background:var(--ov-accent);color:#A7C8FF;font-size:12px;font-weight:600;text-decoration:none}
[data-theme="light"] .page-overview .ov-brief-action{color:#426EB5}.page-overview .ov-brief-action:hover{border-color:rgba(109,159,241,.55)}
[dir="rtl"] .page-overview .ov-brief-action svg,[dir="rtl"] .page-overview .rpt-arrow svg{transform:scaleX(-1)}
.page-overview .pf-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px;border:1px solid var(--ov-line);border-radius:10px;background:var(--ov-surface)!important}
.page-overview .pf-tile{position:relative;padding:17px 20px 18px;border-color:var(--ov-line)}
.page-overview .pf-tile:before{content:'';position:absolute;inset:14px auto 14px 0;width:2px;border-radius:2px;background:transparent}
[dir="rtl"] .page-overview .pf-tile:before{inset:14px 0 14px auto}
.page-overview .pf-tile-risk:before{background:var(--ov-alert-high)}.page-overview .pf-tile-health:before{background:var(--purple)}
.page-overview a.pf-tile:hover{background:var(--ov-accent)!important}
.page-overview .pf-label{color:var(--text-faint);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.page-overview .pf-value{margin-top:7px;font-size:24px;font-weight:600;letter-spacing:-.035em}.page-overview .pf-note{margin-top:3px;color:var(--text-soft)}
.page-overview .ov-worklist{gap:16px}.page-overview .card,.page-overview .pf-grid{background:var(--ov-surface)!important;border-color:var(--ov-line)!important;border-radius:10px}
.page-overview .ov-panel{overflow:hidden}.page-overview .card-head{min-height:54px;padding:15px 18px;border-color:var(--ov-line)}
.page-overview .card-title{font-size:13px;font-weight:600;letter-spacing:-.01em}.page-overview .card-action{color:var(--text-soft);font-size:12px}.page-overview .card-action:hover{color:var(--purple)}.page-overview .card-body{padding:2px 18px}
.page-overview .att-row,.page-overview .rpt-row{min-height:68px;padding:13px 2px;border-color:var(--ov-line)!important}
.page-overview .att-row:hover,.page-overview .rpt-row:hover{background:transparent!important}
.page-overview .att-name,.page-overview .rpt-title{color:var(--text-primary);font-size:13px;font-weight:500}
.page-overview .att-meta,.page-overview .rpt-meta{color:var(--text-faint);font-size:12px}
.page-overview .ov-status-label{color:var(--text-faint);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.page-overview .att-chip{font-size:11px;font-weight:600}
.page-overview .rpt-icon{width:32px;height:32px;flex-basis:32px;border:0;border-radius:7px;background:var(--ov-muted)!important}
.page-overview .type-chip{margin-inline-start:5px;padding:2px 6px;border:0;border-radius:4px;background:var(--ov-muted)!important;color:var(--text-soft)!important;font-size:11px}
.page-overview .rpt-arrow{color:var(--text-faint)}
.page-overview .ov-spotlight{margin-top:16px!important}.page-overview .ov-company-heading{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}.page-overview .ov-company-context{display:inline-flex;align-items:baseline;gap:7px;min-width:0;color:var(--text-soft);font-size:12px;font-weight:500}.page-overview .ov-company-context bdi{max-width:min(42vw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-overview .ov-select{min-height:34px;border-color:var(--ov-line);border-radius:7px;background:var(--ov-muted)!important}
.page-overview .ov-spotlight .hero-card{padding:20px 22px!important}.page-overview .hero-spot-inner{gap:28px}.page-overview .hero-ring-col{flex-basis:112px}
.page-overview .hero-kpi-grid{gap:0;border:1px solid var(--ov-line);border-radius:8px;overflow:hidden}
.page-overview .hero-kpi{min-width:0;padding:16px 18px;border-inline-end:1px solid var(--ov-line)}.page-overview .hero-kpi:last-child{border-inline-end:0}
.page-overview .hero-kpi-label{color:var(--text-faint);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.page-overview .hero-kpi-value{margin-top:8px;font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.035em}.page-overview .hero-kpi-note{margin-top:5px;font-size:11px}
.page-overview .hero-health-caption{color:var(--text-soft);font-size:12px;line-height:1.6}
.page-overview .spot-links{gap:0!important;margin:0!important;padding:0 18px 18px!important;border-top:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.page-overview .action-item{min-height:48px;padding:10px 12px;border-color:var(--ov-line);border-radius:0;background:transparent;box-shadow:none}
.page-overview .action-item:first-child{border-radius:7px 0 0 7px}.page-overview .action-item:last-child{border-radius:0 7px 7px 0}
[dir="rtl"] .page-overview .action-item:first-child{border-radius:0 7px 7px 0}[dir="rtl"] .page-overview .action-item:last-child{border-radius:7px 0 0 7px}
.page-overview .action-item+.action-item{margin-inline-start:-1px}.page-overview .action-item:hover{border-color:rgba(109,159,241,.35);background:var(--ov-accent);box-shadow:none}
.page-overview .action-icon{width:28px;height:28px;border:0;border-radius:6px;background:var(--ov-muted)!important;color:var(--text-soft)!important}.page-overview .action-label{font-size:12px;font-weight:500}
.page-overview :is(a,button,select):focus-visible{outline-color:#92BBFF;outline-offset:3px}
@media(max-width:1150px){
  .page-overview .ov-worklist{grid-template-columns:1fr}.page-overview .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-overview .hero-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-overview .hero-kpi:nth-child(2){border-inline-end:0}.page-overview .hero-kpi:nth-child(-n+2){border-bottom:1px solid var(--ov-line)}
}
@media(max-width:680px){
  .page-overview .content{padding:24px 16px 36px}.page-overview .ov-head{align-items:flex-start}.page-overview .ov-brief{align-items:flex-start;flex-direction:column;padding:18px}.page-overview .ov-brief-action{width:100%;justify-content:space-between}
  .page-overview .card-head,.page-overview .card-body{padding-inline:15px}.page-overview .att-row{align-items:flex-start}.page-overview .hero-spot-inner{gap:18px}.page-overview .hero-ring-col{flex-basis:auto}.page-overview .spot-links{grid-template-columns:1fr 1fr}
  .page-overview .action-item,.page-overview .action-item:first-child,.page-overview .action-item:last-child,[dir="rtl"] .page-overview .action-item:first-child,[dir="rtl"] .page-overview .action-item:last-child{border-radius:6px;margin:4px}
}
@media(max-width:430px){
  .page-overview .pf-grid,.page-overview .hero-kpi-grid{grid-template-columns:1fr}.page-overview .pf-tile,.page-overview .hero-kpi{border-inline-end:0;border-bottom:1px solid var(--ov-line)}
  .page-overview .pf-tile:last-child,.page-overview .hero-kpi:last-child{border-bottom:0}.page-overview .hero-kpi:nth-child(2){border-bottom:1px solid var(--ov-line)}.page-overview .spot-links{grid-template-columns:1fr}
}

/* Global Executive Graphite
   One restrained visual system across workspace, analysis, reports, COA and login. */
body.app-shell,
body.page-login {
  --bg-deep:#0d0e12; --bg-mid:#111319; --glass-border:rgba(255,255,255,.075);
  --text-primary:#f2f3f5; --text-soft:#9a9faa; --text-faint:#9b9893;
  --purple:#6D9FF1; --gold:#87B1F5; --gold-glow:rgba(109,159,241,.16);
  --emerald:#27b686; --blue:#7398f6; --orange:#dda348;
  --ov-surface:#15171d; --ov-raised:#191c23; --ov-muted:#111319;
  --ov-line:rgba(255,255,255,.075); --ov-accent:rgba(109,159,241,.12);
  background:#0d0e12!important;
  color:var(--text-primary);
}
[data-theme="light"] body.app-shell,
[data-theme="light"] body.page-login {
  --bg-deep:#f4f4f1; --bg-mid:#ecece8; --glass-border:rgba(24,25,28,.10);
  --text-primary:#1a1b1f; --text-soft:#676d78; --text-faint:#625b55;
  --purple:#5585D3; --gold:#5585D3; --gold-glow:rgba(85,133,211,.12);
  --ov-surface:#fff; --ov-raised:#fff; --ov-muted:#efefeb;
  --ov-line:rgba(24,25,28,.10); --ov-accent:rgba(65,115,198,.08);
  background:#f4f4f1!important;
}
body.app-shell .bg-orbs,
body.app-shell .bg-shapes,
body.page-login .bg-orbs { display:none!important; }
body.app-shell .main { background:var(--bg-deep)!important; }
body.app-shell .sidebar {
  background:#101116!important; border-inline-end:1px solid var(--ov-line)!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
[data-theme="light"] body.app-shell .sidebar { background:#fafaf8!important; }
body.app-shell .sidebar-brand,
body.app-shell .sidebar-footer { border-color:var(--ov-line)!important; }
body.app-shell .mark,
body.page-login .logo-mark {
  background:#6496E8!important; border-radius:8px!important; box-shadow:none!important;
  animation:none!important;
}
body.app-shell .brand-name { font-weight:600; letter-spacing:-.02em; }
body.app-shell .nav-item { border:1px solid transparent!important; border-radius:7px!important; }
body.app-shell .nav-item:hover { background:rgba(255,255,255,.045)!important; border-color:transparent!important; }
[data-theme="light"] body.app-shell .nav-item:hover { background:rgba(24,25,28,.04)!important; }
body.app-shell .nav-item.active {
  color:var(--text-primary)!important; background:var(--ov-accent)!important;
  border-color:rgba(109,159,241,.18)!important;
}
body.app-shell .topbar {
  min-height:58px; background:rgba(13,14,18,.94)!important;
  border-color:var(--ov-line)!important; backdrop-filter:blur(14px)!important;
}
[data-theme="light"] body.app-shell .topbar { background:rgba(244,244,241,.94)!important; }
body.app-shell .content { padding:34px clamp(22px,3vw,46px) 48px; }
body.app-shell .page-title { font-weight:600; letter-spacing:-.035em; }
body.app-shell .page-sub { color:var(--text-soft); line-height:1.6; }
body.app-shell .icon-btn,
body.app-shell .language-switch,
body.page-login .login-theme-btn {
  background:transparent!important; border-color:var(--ov-line)!important; box-shadow:none!important;
}
body.app-shell .card,
body.app-shell .task-option,
body.app-shell .co-card,
body.app-shell .kpi,
body.app-shell .stat,
body.app-shell .stmt-doc,
body.app-shell .stmt-footer,
body.app-shell .acef6-stage,
body.page-login .card {
  background:var(--ov-surface)!important; border-color:var(--ov-line)!important;
  border-radius:10px!important; box-shadow:none!important;
}
body.app-shell [data-tilt],
body.page-login [data-tilt] { transform:none!important; }
body.app-shell .card::before,
body.app-shell .hero-card::before,
body.app-shell .hero-card::after { display:none!important; }
body.app-shell .card-head { border-color:var(--ov-line)!important; }
body.app-shell .card-title { font-weight:600; letter-spacing:-.01em; }
body.app-shell .task-option:hover,
body.app-shell .co-card:hover,
body.app-shell .action-item:hover { border-color:rgba(109,159,241,.35)!important; box-shadow:none!important; transform:none!important; }
body.app-shell .task-icon,
body.app-shell .action-icon,
body.app-shell .empty-icon,
body.app-shell .rpt-icon { background:var(--ov-muted)!important; border-color:var(--ov-line)!important; box-shadow:none!important; }
body.app-shell .new-btn,
body.app-shell .btn-primary-sm,
body.app-shell .btn-analyse,
body.app-shell .btn-primary,
body.page-login .btn-primary {
  background:#2563EB!important; color:#fff!important; border:1px solid rgba(255,255,255,.08)!important;
  border-radius:8px!important; box-shadow:none!important; transform:none!important;
}
body.app-shell .new-btn:hover,
body.app-shell .btn-primary-sm:hover,
body.app-shell .btn-analyse:hover,
body.app-shell .btn-primary:hover,
body.page-login .btn-primary:hover { background:#5788D7!important; box-shadow:none!important; transform:none!important; }
body.app-shell .btn-back,
body.app-shell .btn-upload,
body.app-shell .std-btn,
body.app-shell .file-chip,
body.app-shell .load-file,
body.app-shell .saved-badge,
body.page-login .btn-google {
  background:var(--ov-muted)!important; border-color:var(--ov-line)!important;
  color:var(--text-primary)!important; box-shadow:none!important;
}
body.app-shell .std-btn:hover,
body.app-shell .btn-back:hover,
body.app-shell .btn-upload:hover,
body.page-login .btn-google:hover { border-color:rgba(109,159,241,.38)!important; background:var(--ov-accent)!important; }
body.app-shell .std-btn.active { background:var(--ov-accent)!important; border-color:#6D9FF1!important; box-shadow:none!important; }
body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.page-login .field input {
  background:var(--ov-muted)!important; border-color:var(--ov-line)!important;
  color:var(--text-primary)!important; box-shadow:none!important;
}
body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus,
body.page-login .field input:focus { border-color:rgba(109,159,241,.60)!important; outline:none; }
body.app-shell .drop-zone,
body.app-shell .picker-group,
body.app-shell .insight-item,
body.app-shell .ratio-gauge-tile,
body.app-shell .cv-kpi,
body.app-shell .cv-details,
body.app-shell .action-item,
body.app-shell .rpt-row,
body.app-shell .att-row {
  background:var(--ov-muted)!important; border-color:var(--ov-line)!important; box-shadow:none!important;
}
body.app-shell .drop-zone:hover,
body.app-shell .drop-zone.drag-over { background:var(--ov-accent)!important; border-color:rgba(109,159,241,.50)!important; }
body.app-shell .stmt-tabs { background:var(--ov-surface)!important; border-color:var(--ov-line)!important; box-shadow:none!important; }
body.app-shell .stmt-tab.active { color:#94BDFF!important; border-color:#6D9FF1!important; }
body.app-shell table th,
body.app-shell table td { border-color:var(--ov-line)!important; }
body.app-shell table tbody tr:hover td { background:var(--ov-accent); }
body.app-shell .report-assurance { background:var(--ov-surface)!important; border-color:var(--ov-line)!important; }
body.app-shell .assurance-item { border-color:var(--ov-line)!important; }
body.app-shell :is(a,button,input,select,textarea):focus-visible,
body.page-login :is(a,button,input):focus-visible { outline:2px solid #92BBFF!important; outline-offset:3px!important; }
body.page-login .card { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
body.page-login .card-title { font-weight:600; letter-spacing:-.025em; }
body.page-login .divider::before,
body.page-login .divider::after { background:var(--ov-line)!important; }
@media(max-width:680px){
  body.app-shell .content{padding:24px 16px 36px}
  body.app-shell .topbar{min-height:64px}
}

/* KPI Explorer: one decision layer before the detailed ratio tables. */
.cv-explorer{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;padding:22px;margin-bottom:2px;border:1px solid var(--ov-line,var(--glass-border));border-radius:14px;background:var(--ov-surface,rgba(42,42,42,.55))}
.cv-explorer-summary{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-inline-end:1px solid var(--ov-line,var(--glass-border));padding-inline-end:22px}
.cv-explorer-kicker{color:var(--text-faint);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.cv-score-ring{--score:0;display:grid;place-items:center;width:112px;height:112px;margin:14px 0;border-radius:50%;background:conic-gradient(var(--emerald) calc(var(--score)*1%),rgba(248,113,113,.85) 0);position:relative}
.cv-score-ring:before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--ov-surface,#2a2a2a)}
.cv-score-ring strong,.cv-score-ring span{position:relative;z-index:1}.cv-score-ring strong{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}.cv-score-ring span{font-size:11px;color:var(--text-faint);margin-top:-22px}
.cv-explorer-counts{display:flex;gap:13px;color:var(--text-soft);font-size:11px}.cv-explorer-counts b{color:var(--text-primary);font-size:14px}
.cv-perspectives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cv-perspective{appearance:none;display:grid;gap:8px;min-width:0;padding:13px;text-align:start;border:1px solid var(--ov-line,var(--glass-border));border-radius:10px;background:var(--ov-muted,rgba(255,255,255,.035));color:var(--text-primary);font:inherit;cursor:pointer}
.cv-perspective:hover{border-color:rgba(109,159,241,.5);background:var(--ov-accent,rgba(92,150,246,.08))}.cv-perspective:focus-visible{outline:2px solid #92BBFF;outline-offset:2px}
.cv-perspective-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.cv-perspective-name{font-size:12px;font-weight:600}.cv-perspective-score{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cv-perspective-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.cv-perspective-fill{display:block;height:100%;border-radius:inherit;background:var(--emerald)}
.cv-perspective-meta{display:flex;justify-content:space-between;gap:8px;color:var(--text-faint);font-size:11px}.cv-perspective-risk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fb7185}
/* The slot names the worst exception; "Clear" means there is none, so it must not wear the alarm colour. */
.cv-perspective-risk.is-clear{color:var(--text-faint)}
[data-theme="light"] .cv-score-ring:before{background:#fff}[data-theme="light"] .cv-perspective-bar{background:rgba(20,20,70,.08)}
@media(max-width:900px){.cv-explorer{grid-template-columns:1fr}.cv-explorer-summary{border-inline-end:0;border-bottom:1px solid var(--ov-line,var(--glass-border));padding:0 0 20px}.cv-perspectives{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cv-perspectives{grid-template-columns:1fr}.cv-explorer{padding:16px}}

/* KPI wheel: the same perspectives as the cards above, laid out radially. */
.cv-wheel-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:4px;font-size:11px}
.cv-wheel-legend span{display:inline-flex;align-items:center;gap:6px}
.cv-wheel-legend{gap:6px}
.cv-category-picker{display:inline-flex;align-items:center;gap:7px;color:var(--text-soft);font-size:11px;white-space:nowrap}
.cv-category-picker>span{color:var(--text-faint);font-weight:600}
.cv-category-picker select{max-width:190px;min-width:135px;border:1px solid var(--ov-line,var(--glass-border));border-radius:7px;background:var(--ov-surface,#fff);color:var(--text-primary);padding:6px 25px 6px 9px;font:inherit;font-size:11px;cursor:pointer}
.cv-category-picker select:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
@media(max-width:520px){.cv-category-picker{flex-wrap:wrap}.cv-category-picker select{max-width:100%}}

.cv-wheel-hint{margin-inline-start:auto;color:var(--text-faint)}
/* ── Control sentence, status chips, KPI table ────────────────────────────
   The sentence states the current view AND is the control: the underlined
   words are what you change. The chips carry the distribution and filter by
   it, so the counts became something to act on rather than only read. */
.cv-control{margin:2px 0 14px}
.cv-sentence{font-size:14px;line-height:1.95;color:var(--text-soft);font-weight:500;margin:0 0 11px}
.cv-sentence u{color:var(--text-primary);font-weight:700;text-decoration:none;border-bottom:1.5px dashed rgba(212,168,83,.55);padding-bottom:1px}
.cv-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cv-chips-gap{flex:1 1 18px;min-width:8px}
.cv-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-border);background:rgba(255,255,255,.03);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;color:var(--text-soft);cursor:pointer;transition:border-color .15s,color .15s}
.cv-chip:hover:not([disabled]){color:var(--text-primary)}
.cv-chip[disabled]{opacity:.45;cursor:default}
.cv-chip b{font-size:14px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.cv-chip.on{border-color:var(--purple);background:rgba(92,150,246,.14);color:var(--text-primary)}
.cv-chip-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.cv-viewbtn{padding:6px 14px}

/* one view at a time */
.cv-kpis[data-view-state="table"] .cv-kpiview-wheel,
.cv-kpis[data-view-state="wheel"] .cv-kpiview-table{display:none}

/* Filtering is one attribute + CSS, so no re-render and no lost scroll — and
   one state drives both views: the table rows, the wheel's tiles and the ring
   labels that name them. Four of the states are one exact verdict (the legend's
   grain); "attention" and "issue" are the chips' coarse buckets over two. */
.cv-kpis[data-filter-state="good"]      tr.cv-t-row:not([data-status="good"]),
.cv-kpis[data-filter-state="good"]      .cv-wheel-tile:not([data-status="good"]),
.cv-kpis[data-filter-state="good"]      text.cv-wheel-lbl:not(.cv-wheel-lbl-good),
.cv-kpis[data-filter-state="warning"]   tr.cv-t-row:not([data-status="warning"]),
.cv-kpis[data-filter-state="warning"]   .cv-wheel-tile:not([data-status="warning"]),
.cv-kpis[data-filter-state="warning"]   text.cv-wheel-lbl:not(.cv-wheel-lbl-warning),
.cv-kpis[data-filter-state="critical"]  tr.cv-t-row:not([data-status="critical"]),
.cv-kpis[data-filter-state="critical"]  .cv-wheel-tile:not([data-status="critical"]),
.cv-kpis[data-filter-state="critical"]  text.cv-wheel-lbl:not(.cv-wheel-lbl-critical),
.cv-kpis[data-filter-state="none"]      tr.cv-t-row:not([data-status="none"]),
.cv-kpis[data-filter-state="none"]      .cv-wheel-tile:not([data-status="none"]),
.cv-kpis[data-filter-state="none"]      text.cv-wheel-lbl:not(.cv-wheel-lbl-none),
.cv-kpis[data-filter-state="issue"]     tr.cv-t-row:not([data-status="issue"]):not([data-status="none"]),
.cv-kpis[data-filter-state="issue"]     .cv-wheel-tile:not([data-status="issue"]):not([data-status="none"]),
.cv-kpis[data-filter-state="issue"]     text.cv-wheel-lbl:not(.cv-wheel-lbl-issue):not(.cv-wheel-lbl-none),
.cv-kpis[data-filter-state="attention"] tr.cv-t-row:not([data-status="warning"]):not([data-status="critical"]),
.cv-kpis[data-filter-state="attention"] .cv-wheel-tile:not([data-status="warning"]):not([data-status="critical"]),
.cv-kpis[data-filter-state="attention"] text.cv-wheel-lbl:not(.cv-wheel-lbl-warning):not(.cv-wheel-lbl-critical){display:none}
.cv-kpis[data-ratio-category="Liquidity"] .cv-wheel-tile:not([data-ratio-category="Liquidity"]),
.cv-kpis[data-ratio-category="Liquidity"] text.cv-wheel-lbl:not([data-ratio-category="Liquidity"]),
.cv-kpis[data-ratio-category="Liquidity"] tr.cv-t-grp:not([data-ratio-category="Liquidity"]),
.cv-kpis[data-ratio-category="Liquidity"] tr.cv-t-row:not([data-ratio-category="Liquidity"]){display:none}
.cv-kpis[data-ratio-category="Profitability"] .cv-wheel-tile:not([data-ratio-category="Profitability"]),
.cv-kpis[data-ratio-category="Profitability"] text.cv-wheel-lbl:not([data-ratio-category="Profitability"]),
.cv-kpis[data-ratio-category="Profitability"] tr.cv-t-grp:not([data-ratio-category="Profitability"]),
.cv-kpis[data-ratio-category="Profitability"] tr.cv-t-row:not([data-ratio-category="Profitability"]){display:none}
.cv-kpis[data-ratio-category="Returns"] .cv-wheel-tile:not([data-ratio-category="Returns"]),
.cv-kpis[data-ratio-category="Returns"] text.cv-wheel-lbl:not([data-ratio-category="Returns"]),
.cv-kpis[data-ratio-category="Returns"] tr.cv-t-grp:not([data-ratio-category="Returns"]),
.cv-kpis[data-ratio-category="Returns"] tr.cv-t-row:not([data-ratio-category="Returns"]){display:none}
.cv-kpis[data-ratio-category="Growth"] .cv-wheel-tile:not([data-ratio-category="Growth"]),
.cv-kpis[data-ratio-category="Growth"] text.cv-wheel-lbl:not([data-ratio-category="Growth"]),
.cv-kpis[data-ratio-category="Growth"] tr.cv-t-grp:not([data-ratio-category="Growth"]),
.cv-kpis[data-ratio-category="Growth"] tr.cv-t-row:not([data-ratio-category="Growth"]){display:none}
.cv-kpis[data-ratio-category="Period"] .cv-wheel-tile:not([data-ratio-category="Period"]),
.cv-kpis[data-ratio-category="Period"] text.cv-wheel-lbl:not([data-ratio-category="Period"]),
.cv-kpis[data-ratio-category="Period"] tr.cv-t-grp:not([data-ratio-category="Period"]),
.cv-kpis[data-ratio-category="Period"] tr.cv-t-row:not([data-ratio-category="Period"]){display:none}
.cv-kpis[data-ratio-category="Leverage"] .cv-wheel-tile:not([data-ratio-category="Leverage"]),
.cv-kpis[data-ratio-category="Leverage"] text.cv-wheel-lbl:not([data-ratio-category="Leverage"]),
.cv-kpis[data-ratio-category="Leverage"] tr.cv-t-grp:not([data-ratio-category="Leverage"]),
.cv-kpis[data-ratio-category="Leverage"] tr.cv-t-row:not([data-ratio-category="Leverage"]){display:none}
.cv-kpis[data-ratio-category="Solvency"] .cv-wheel-tile:not([data-ratio-category="Solvency"]),
.cv-kpis[data-ratio-category="Solvency"] text.cv-wheel-lbl:not([data-ratio-category="Solvency"]),
.cv-kpis[data-ratio-category="Solvency"] tr.cv-t-grp:not([data-ratio-category="Solvency"]),
.cv-kpis[data-ratio-category="Solvency"] tr.cv-t-row:not([data-ratio-category="Solvency"]){display:none}
.cv-kpis[data-ratio-category="Efficiency"] .cv-wheel-tile:not([data-ratio-category="Efficiency"]),
.cv-kpis[data-ratio-category="Efficiency"] text.cv-wheel-lbl:not([data-ratio-category="Efficiency"]),
.cv-kpis[data-ratio-category="Efficiency"] tr.cv-t-grp:not([data-ratio-category="Efficiency"]),
.cv-kpis[data-ratio-category="Efficiency"] tr.cv-t-row:not([data-ratio-category="Efficiency"]){display:none}
tr.cv-t-grp.is-empty{display:none}
/* One message for both views, so it sits outside the table. */
.cv-t-empty{display:none;padding:26px 4px;color:var(--text-faint);font-size:13px;text-align:center}
.cv-kpis.is-empty .cv-t-empty{display:block}
.cv-kpis.is-empty .cv-wheel-wrap,.cv-kpis.is-empty .cv-table-wrap{display:none}


.cv-table-wrap{overflow-x:auto}
table.cv-kpi-table{width:100%;border-collapse:collapse;min-width:560px}
table.cv-kpi-table th{position:sticky;top:0;z-index:1;background:var(--ov-surface,var(--bg-mid,#1f1f1f));text-align:start;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--glass-border)}
table.cv-kpi-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;color:var(--text-primary)}
.cv-t-n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
th.cv-t-n{text-align:end}
tr.cv-t-grp td{padding:15px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:none}
.cv-t-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;font-size:11px;font-weight:700;color:#0b0c1e;margin-inline-end:8px;vertical-align:-3px}
tr.cv-t-row{cursor:pointer}
tr.cv-t-row:hover td,tr.cv-t-row:focus-visible td{background:rgba(92,150,246,.07)}
tr.cv-t-row:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.cv-t-pri,.cv-t-target{color:var(--text-soft)}
.cv-t-delta{font-weight:700;font-size:12px}
.cv-t-verdict{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.cv-v-good{background:rgba(16,201,122,.14);color:var(--emerald)}
.cv-v-warning{background:rgba(245,158,11,.15);color:var(--orange)}
.cv-v-critical{background:rgba(248,113,113,.15);color:#F87171}
.cv-v-issue{background:rgba(212,168,83,.15);color:var(--gold)}
.cv-v-none{background:rgba(255,255,255,.05);color:var(--text-faint)}
/* Numbers stay LTR on the Arabic page — "-0.9%" would otherwise reorder. */
[dir="rtl"] table.cv-kpi-table td.cv-t-n{direction:ltr}
/* One target reads "≥ 1.0x · healthy 1.5–3x", and its Arabic carries a word
   between two numbers. Arabic-Indic digits are bidi class AN, not EN, so under
   a forced LTR base the word and the ranges around it come out reordered.
   plaintext takes the base direction from the text itself, which is right for
   both this cell and the purely numeric targets beside it. */
[dir="rtl"] table.cv-kpi-table td.cv-t-target{unicode-bidi:plaintext}
@media(max-width:620px){.cv-sentence{font-size:14px}.cv-chips-gap{flex-basis:100%}}
.cv-wheel-wrap{display:flex;justify-content:center}
/* direction:ltr — the radial labels anchor outward with text-anchor start/end,
   whose sides swap under the Arabic RTL page direction. */
/* Square, so the cap matches the square viewBox. 690 left roughly 165px of
   dead space on each side of a full-width overview card while the ring labels
   were rendering small; width:100% still shrinks it on narrow screens and in
   the report page's narrower panel, so this only changes the wide case. */
.cv-wheel-svg{width:100%;max-width:840px;height:auto;direction:ltr}
/* transform-box:fill-box scales the tile around its OWN shape's center
   (the sector path plus its glyph) rather than the SVG viewport's corner,
   so it grows in place instead of sliding off toward the ring's center. */
.cv-wheel-tile{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .18s cubic-bezier(.25,.9,.4,1)}
.cv-wheel-tile:hover,.cv-wheel-tile:focus-visible{transform:scale(1.16)}
.cv-wheel-tile:active{transform:scale(1.26)}
/* The tile's shape is an SVG <path> (sector()), not a <rect> — targeting
   :hover rect here never matched anything, so hovering a tile used to glow
   nothing at all and only the .cv-tip popup (now removed) showed feedback. */
.cv-wheel-tile path{transition:filter .15s}
/* Off-track tiles carry a quiet, always-on glow (not just on hover) so a
   problem reads at a glance across the whole ring, the way the reference
   ring's bright arcs do — a healthy tile stays plain, which is what keeps a
   mostly-good ring calm instead of 50 things glowing at once. */
.cv-wheel-tile[data-status="warning"] path,.cv-wheel-tile[data-status="critical"] path,.cv-wheel-tile[data-status="issue"] path{filter:drop-shadow(0 0 3px var(--cvw))}
.cv-wheel-tile:hover path,.cv-wheel-tile:focus-visible path{filter:drop-shadow(0 0 5px var(--cvw)) drop-shadow(0 0 14px var(--cvw))}
.cv-wheel-tile:active path{filter:drop-shadow(0 0 3px var(--cvw)) drop-shadow(0 0 22px var(--cvw)) brightness(1.25)}
/* No browser focus ring on the ring: it drew a black square around the tile
   after a click (Safari/Edge draw it on :focus, not only :focus-visible).
   Keyboard focus is still shown, by the neon glow and scale above. */
.cv-wheel-svg,.cv-wheel-svg:focus,.cv-wheel-tile:focus,.cv-wheel-tile:focus-visible,.cv-wheel-lbl:focus{outline:none;-webkit-tap-highlight-color:transparent}
/* Grown tiles need to draw over their untouched neighbors, not under them —
   sectors sit edge to edge, so at 1.16x a tile's corners reach into the
   next one's space. */
.cv-wheel-tile:hover,.cv-wheel-tile:focus-visible,.cv-wheel-tile:active{z-index:2}
/* The tile's own name label sits right after it in the markup (one <text>
   per tile, drawn immediately after that tile's <g>), so the adjacent-sibling
   combinator lights up exactly the label that belongs to the hovered tile. */
.cv-wheel-tile:hover+.cv-wheel-lbl,.cv-wheel-tile:focus-visible+.cv-wheel-lbl,.cv-wheel-tile:active+.cv-wheel-lbl{filter:drop-shadow(0 0 4px currentColor)}
.cv-wheel-tick{stroke:var(--text-faint);stroke-width:1;opacity:.55}
.cv-wheel-group{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;fill:var(--text-primary)}
/* Semibold, not larger. The ring's box is sized to whatever the longest label
   needs, so raising the point size grows the viewBox by about as much and the
   SVG scales back down inside its 840px column — the text lands the same size
   on screen. Weight costs a few percent of width and is all gain. */
.cv-wheel-lbl{font-size:9.5px;font-weight:600;fill:var(--text-soft);cursor:pointer} .cv-wheel-lbl:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--purple))}
/* Every KPI is named on the ring, but an off-track name carries its tile's
   verdict colour and a step more weight so it still reads out of the band at a
   glance. A good KPI deliberately has no rule here: it keeps .cv-wheel-lbl's
   muted fill, so the healthy majority reads as a quiet index instead of 50
   competing labels. */
.cv-wheel-lbl-warning{fill:var(--orange);font-weight:750}
.cv-wheel-lbl-critical{fill:#F87171;font-weight:750}
.cv-wheel-lbl-issue{fill:var(--gold);font-weight:750}
.cv-wheel-lbl-none{fill:var(--text-faint)}
.cv-wheel-c1{font-size:18px;font-weight:600;fill:var(--text-primary)}
.cv-wheel-c2{font-size:11px;fill:var(--text-faint)}
.cv-wheel-score{font-size:20px;font-weight:650;fill:var(--text-primary);font-variant-numeric:tabular-nums}
.cv-wheel-side{font-size:17px;font-weight:650;fill:var(--text-primary);font-variant-numeric:tabular-nums}
.cv-wheel-side-l{font-size:9px;font-weight:700;letter-spacing:.07em;fill:var(--text-faint)}
@media(max-width:520px){.cv-wheel-lbl{font-size:8.5px}.cv-wheel-hint{margin-inline-start:0;flex-basis:100%}}

/* Optional visual lens for financial-statement amounts. */
.stmt-doc.stmt-visual{max-width:980px}.stmt-visual .stmt-body{padding-top:20px}.sv-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;color:var(--text-faint);font-size:11px}.sv-legend span{display:inline-flex;align-items:center;gap:6px}.sv-legend i{width:9px;height:9px;border-radius:2px}.sv-list{display:grid}.sv-row{display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(220px,2fr) minmax(110px,.7fr);align-items:center;gap:14px;min-height:38px;border-bottom:1px solid var(--ov-line,var(--glass-border))}.sv-label{min-width:0;color:var(--text-soft);font-size:12px;overflow-wrap:anywhere}.sv-track{height:18px;display:flex;align-items:center;border-inline-start:1px solid var(--ov-line,var(--glass-border));background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%)}.sv-bar{display:block;height:15px;min-width:2px;border-radius:0 3px 3px 0;opacity:.9}.sv-amount{text-align:end;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.sv-row.subtotal,.sv-row.total{min-height:44px;background:var(--ov-muted,rgba(255,255,255,.035))}.sv-row.subtotal .sv-label,.sv-row.total .sv-label{color:var(--text-primary);font-weight:700}.sv-row.total{border-top:1px solid var(--ov-line,var(--glass-border));border-bottom:2px solid var(--ov-line,var(--glass-border))}.sv-section{padding:15px 0 7px;color:var(--text-primary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.sv-space{height:9px}[dir="rtl"] .sv-bar{border-radius:3px 0 0 3px}
@media(max-width:680px){.stmt-visual .stmt-body{padding-inline:16px}.sv-row{grid-template-columns:minmax(120px,1fr) minmax(100px,1.2fr);gap:10px}.sv-amount{grid-column:2}.sv-track{grid-row:1 / span 2;grid-column:2}.sv-amount{position:relative;z-index:1;padding-inline:6px;color:var(--text-primary)!important;text-shadow:0 1px 2px rgba(0,0,0,.65)}}



/* The same ratio explanation dialog is also opened from the Overview KPI
   wheel, where these report-page styles are not otherwise loaded. */
.ratio-modal-overlay{position:fixed;inset:0;background:rgba(4,5,18,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.ratio-modal-card{background:rgba(42,42,42,.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(212,168,83,.35);border-radius:var(--radius-card,16px);max-width:760px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.ratio-modal-head{padding:20px 26px 14px;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.1));display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.ratio-modal-title{font-weight:700;font-size:20px;color:var(--gold,#d4a853);line-height:1.35}
.ratio-modal-close{background:none;border:0;color:var(--text-soft,#9ca3af);font-size:24px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px;flex-shrink:0}
.ratio-modal-close:hover{color:var(--text-primary,#fff);background:rgba(255,255,255,.08)}
.ratio-modal-body{padding:20px 26px 24px}
.ratio-modal-value{font-size:32px;font-weight:700;color:var(--text-primary,#fff);font-variant-numeric:tabular-nums;margin-bottom:4px}
.ratio-modal-formula{font-size:13px;color:var(--text-soft,#cbd5e1);background:rgba(255,255,255,.05);border:1px solid var(--glass-border,rgba(255,255,255,.1));border-radius:10px;padding:10px 14px;margin:10px 0;font-family:'Courier New',monospace;line-height:1.6}
.ratio-modal-section-label{font-size:11px;font-weight:700;color:var(--text-faint,#8991a3);text-transform:uppercase;letter-spacing:.06em;margin:17px 0 6px}
.ratio-modal-optimal{font-size:13px;color:var(--text-soft,#cbd5e1);line-height:1.65;margin:0 0 8px}
.ratio-detail-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.1))}
.ratio-detail-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint,#8991a3);margin-bottom:3px}
.ratio-detail-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-primary,#fff);max-width:65%}
.ratio-detail-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.ratio-detail-compare{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:8px 14px;padding:11px 13px;margin-top:12px;border:1px solid var(--glass-border,rgba(255,255,255,.1));border-radius:10px;color:var(--text-soft,#cbd5e1);font-size:12px}
.ratio-detail-compare strong{font-variant-numeric:tabular-nums;color:var(--text-primary,#fff);text-align:end}
.ratio-detail-table{width:100%;border-collapse:collapse;margin:8px 0 10px}
.ratio-detail-table th,.ratio-detail-table td{padding:8px 10px;border-bottom:1px solid var(--glass-border,rgba(255,255,255,.1));font-size:12px;text-align:start;color:var(--text-soft,#cbd5e1)}
.ratio-detail-table td{font-variant-numeric:tabular-nums;text-align:end;color:var(--text-primary,#fff);white-space:nowrap}
.ratio-detail-equation{padding:11px 13px;border-radius:10px;background:rgba(121,165,236,.08);border:1px solid rgba(121,165,236,.18);color:var(--text-primary,#fff);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.7;overflow-wrap:anywhere}
.ratio-detail-note,.ratio-detail-source{font-size:12px;color:var(--text-faint,#8991a3);line-height:1.6;margin:9px 0 0}
.ratio-detail-caveat{padding:9px 11px;border-inline-start:3px solid #f59e0b;background:rgba(245,158,11,.07);border-radius:5px;color:var(--text-soft,#cbd5e1)}
.ratio-modal-close:focus-visible{outline:2px solid var(--gold,#d4a853);outline-offset:2px}
[data-theme="light"] .ratio-modal-card{background:rgba(255,255,255,.98);border-color:rgba(92,150,246,.22);box-shadow:0 30px 90px rgba(20,20,70,.25)}
[data-theme="light"] .ratio-modal-formula{background:rgba(20,20,70,.04);border-color:rgba(20,20,70,.1)}
[data-theme="light"] .ratio-modal-value,[data-theme="light"] .ratio-detail-compare strong,[data-theme="light"] .ratio-detail-table td{color:#1a1b2e}
@media(max-width:680px){.ratio-modal-overlay{padding:12px}.ratio-modal-card{max-height:92vh}.ratio-modal-head{padding:17px 18px 13px}.ratio-modal-body{padding:16px 18px 20px}.ratio-detail-compare{grid-template-columns:1fr auto;gap:7px 10px}.ratio-detail-status{max-width:100%}}

/* ── Zero: the corner companion (mascot.js) ─────────────────────────────────
   Sits on the page's end side, clear of the sidebar, under any modal. State
   is one attribute; each state only swaps the glow colour and the motion. */
.zero{--zero-glow:#7E9EFE;position:fixed;bottom:18px;right:20px;z-index:90;display:flex;align-items:flex-end;gap:10px;pointer-events:none;direction:ltr}
/* Physical sides, not logical: .zero is forced ltr for stable layout, so
   inset-inline-end would stay on the right in Arabic — on top of the RTL
   sidebar. In RTL it moves to the left corner and the bubble flips to its right. */
[dir="rtl"] .zero{right:auto;left:20px;flex-direction:row-reverse}
[dir="rtl"] .zero-hide{right:auto;left:-4px}
.zero>*{pointer-events:auto}
.zero-orb{position:relative;width:50px;height:78px;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;image-rendering:pixelated;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--zero-glow) 80%,transparent)) drop-shadow(0 5px 8px rgba(0,0,0,.35));transition:filter .4s,scale .25s cubic-bezier(.3,1.4,.5,1);animation:zeroFloat 4.2s ease-in-out infinite}
.zero-orb svg{display:block;width:100%;height:100%;overflow:visible}
.zero-orb:hover{scale:1.08}
.zero-orb:focus-visible{outline:2px solid var(--zero-glow);outline-offset:4px}
.zero-eyes{transform-box:view-box;transition:transform .08s steps(1)}
.zero-blink .zero-eyes rect{transform:scaleY(.34);transform-box:fill-box;transform-origin:center}
.zero-arm{transform-box:fill-box;transform-origin:center bottom}
.zero-bubble{max-width:230px;padding:9px 13px;border-radius:14px;background:rgba(42,42,42,.94);border:1px solid color-mix(in srgb,var(--zero-glow) 55%,transparent);color:#e8e6e3;font:600 13px/1.45 var(--font,system-ui);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 18px color-mix(in srgb,var(--zero-glow) 30%,transparent);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .25s,transform .25s;pointer-events:none;direction:auto;text-align:start;margin-bottom:14px}
.zero-talk .zero-bubble{opacity:1;transform:none;pointer-events:auto}
.zero-hide{position:absolute;bottom:72px;right:-4px;width:20px;height:20px;border-radius:50%;border:1px solid var(--glass-border);background:rgba(42,42,42,.9);color:#B7BFD6;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.zero:hover .zero-hide,.zero-hide:focus-visible{opacity:1}
[data-theme="light"] .zero-bubble{background:rgba(255,255,255,.97);color:#1A1B2E;box-shadow:0 10px 30px rgba(20,20,70,.18)}
[data-theme="light"] .zero-hide{background:#fff;color:#4a4f66}

.zero[data-state="thinking"]{--zero-glow:#3B82F6}
.zero[data-state="thinking"] .zero-eyes{animation:zeroRead 1.2s steps(1) infinite}
.zero[data-state="success"]{--zero-glow:#10C97A}
.zero[data-state="success"].zero-once .zero-orb{animation:zeroHop .7s cubic-bezier(.3,1.5,.5,1),zeroFloat 4.2s ease-in-out .7s infinite}
.zero[data-state="success"] .zero-arm{animation:zeroWave .5s steps(2) 3}
.zero[data-state="idle"] .zero-orb:hover .zero-arm-r{animation:zeroWave .5s steps(2) infinite}
.zero[data-state="alert"]{--zero-glow:#F59E0B}
.zero[data-state="alert"] .zero-orb{animation:zeroLean 2.6s ease-in-out infinite}
.zero[data-state="error"]{--zero-glow:#F87171}
.zero[data-state="error"].zero-once .zero-orb{animation:zeroShake .55s ease-in-out,zeroFloat 4.2s ease-in-out .55s infinite}

/* Hidden: shrinks to a glowing dot that brings Zero back on click. */
.zero-off .zero-bubble,.zero-off .zero-hide{display:none}
.zero-off .zero-orb{width:14px;height:14px;animation:none;opacity:.7}
.zero-off .zero-orb svg{visibility:hidden}
.zero-off .zero-orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--zero-glow)}

@keyframes zeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes zeroRead{0%,100%{transform:translate(-1px,0)}50%{transform:translate(1px,0)}}
@keyframes zeroWave{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
@keyframes zeroHop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-16px) scale(1.06,.94)}65%{transform:translateY(0) scale(1.08,.9)}100%{transform:translateY(0) scale(1)}}
@keyframes zeroLean{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}}
@keyframes zeroShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

@media (max-width:620px){.zero{bottom:14px;right:14px}[dir="rtl"] .zero{right:auto;left:14px}.zero-orb{width:40px;height:62px}.zero-bubble{max-width:190px;font-size:12px}.zero-hide{bottom:56px}}
@media (prefers-reduced-motion:reduce){.zero *,.zero-orb{animation:none!important;transition:none!important}}
@media print{.zero{display:none}}

/* ── Dark theme: Charcoal (replaced Point Zero, Sep 28) ─────────────────────
   The owner asked for a neutral charcoal dark (anime.js reference): no hue in
   the background, so the verdict colours (green/amber/red) and purple are the
   only colour on screen. Flat cards, thin lines, no orbs. Light theme is
   untouched — this only re-scopes body.app-shell/.page-login under dark. */
:root:not([data-theme="light"]) body.app-shell,
:root:not([data-theme="light"]) body.page-login {
  --bg-deep:#242424; --bg-mid:#1f1f1f;
  --ov-surface:#2a2a2a; --ov-raised:#303030; --ov-muted:#212121;
  --ov-line:rgba(255,255,255,.07); --glass-border:rgba(255,255,255,.08);
  --ov-accent:rgba(255,255,255,.06);
  --text-primary:#e8e6e3; --text-soft:#a9a6a1; --text-faint:#9b9893;
  --gold:#e8e6e3; --gold-glow:rgba(255,255,255,.08);
  background:#242424!important;
}
:root:not([data-theme="light"]) body.app-shell .main { background:transparent!important; }
:root:not([data-theme="light"]) body.app-shell .card, :root:not([data-theme="light"]) body.app-shell .ov-card { background:#2a2a2a!important; box-shadow:none!important; }
:root:not([data-theme="light"]) body.app-shell .sidebar { background:#1f1f1f!important; }
:root:not([data-theme="light"]) body.app-shell .topbar { background:rgba(36,36,36,.92)!important; }
/* Orbs belonged to Point Zero; hidden for the neutral charcoal look. */
:root:not([data-theme="light"]) body.app-shell .bg-orbs,
:root:not([data-theme="light"]) body.page-login .bg-orbs { display:none!important; }
/* Gold as the brand accent: the active nav marker and page eyebrows. */
:root:not([data-theme="light"]) body.app-shell .nav-item.active { box-shadow:inset 2px 0 0 var(--gold)!important; }
[dir="rtl"]:root:not([data-theme="light"]) body.app-shell .nav-item.active { box-shadow:inset -2px 0 0 var(--gold)!important; }
:root:not([data-theme="light"]) body.app-shell .ov-eyebrow { color:var(--gold)!important; }
/* Small section labels in a mono face, upper-case, like the reference — dark theme only. */
:root:not([data-theme="light"]) .nav-label,
:root:not([data-theme="light"]) .cv-wheel-group,
:root:not([data-theme="light"]) .picker-group-label,
:root:not([data-theme="light"]) .ov-eyebrow,
:root:not([data-theme="light"]) .stmt-tab-group,
:root:not([data-theme="light"]) .cv-category-picker>span {
  font-family:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace!important; letter-spacing:.08em!important;
}
/* ── Light theme: warm greige (Sep 28) ──────────────────────────────────────
   Paper-toned rather than blue-white: greige page, slightly lighter cards,
   warm charcoal text — the anime.js docs-page reference. !important because
   several rules above (body.app-shell, .page-overview) set their own light
   tokens at the same or higher specificity and must lose to this. */
[data-theme="light"] body.app-shell,
[data-theme="light"] body.page-login,
[data-theme="light"] .page-overview {
  --bg-deep:#dad6d3!important; --bg-mid:#d3cfcb!important;
  --ov-surface:#e6e2de!important; --ov-raised:#ebe7e3!important; --ov-muted:#dfdbd7!important;
  --ov-line:rgba(46,43,42,.14)!important; --glass-border:rgba(46,43,42,.15)!important;
  --ov-accent:rgba(59,130,246,.08)!important;
  --text-primary:#2e2b2a!important; --text-soft:#6b645e!important; --text-faint:#625b55!important;
  background:#dad6d3!important;
}
[data-theme="light"] body.app-shell .main,
[data-theme="light"] .page-overview .main { background:#dad6d3!important; }
[data-theme="light"] body.app-shell .sidebar,
[data-theme="light"] .page-overview .sidebar { background:#d3cfcb!important; }
[data-theme="light"] body.app-shell .topbar,
[data-theme="light"] .page-overview .topbar { background:rgba(218,214,211,.92)!important; }
[data-theme="light"] .card, [data-theme="light"] .ov-card,
[data-theme="light"] .page-overview .card, [data-theme="light"] .page-overview .pf-grid,
.page-overview[data-theme="light"] .card, .page-overview[data-theme="light"] .pf-grid {
  background:#e6e2de!important; box-shadow:0 1px 0 rgba(46,43,42,.04)!important;
}
/* Surfaces that were hard-coded #fff under the old off-white light theme —
   on greige they'd sit as a bright white patch, so they take the token too. */
[data-theme="light"] .cv-score-ring:before,
[data-theme="light"] .rd,
[data-theme="light"] .period-kind span,
[data-theme="light"] .period-field input, [data-theme="light"] .period-field select,
[data-theme="light"] .form-input,
[data-theme="light"] .export-menu-popover,
[data-theme="light"] .assurance-item,
[data-theme="light"] .zero-hide { background:#ebe7e3!important; }
[data-theme="light"] .rd-side, [data-theme="light"] .rd-trend { background:#dfdbd7!important; }
[data-theme="light"] .period-kind input:checked+span { background:color-mix(in srgb,var(--gold) 10%,#ebe7e3)!important; }
[data-theme="light"] .ratio-modal-card { background:rgba(235,231,227,.98)!important; }
[data-theme="light"] .zero-bubble { background:rgba(235,231,227,.97)!important; }

/* Brand mark: ".0" — a zero with a gold decimal point (Point Zero). The SVG
   carries its own gradient tile, so the container only sizes it. */
body.app-shell .mark, body.page-login .logo-mark, .ai-logo .mark {
  background:none!important; padding:0!important; overflow:hidden; box-shadow:0 0 18px rgba(92,150,246,.35)!important;
}
.mark svg, .logo-mark svg { display:block; width:100%; height:100%; }

/* Overview header action: a real secondary button, not a floating text link. */
.page-overview .ov-head-btn{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 14px;border:1px solid var(--ov-line);border-radius:8px;background:var(--ov-raised);color:var(--text-primary);font-size:13px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.page-overview .ov-head-btn:hover{border-color:rgba(92,150,246,.45);background:var(--ov-accent)}
.page-overview .ov-worklist-single{grid-template-columns:1fr!important}
@media(max-width:680px){.page-overview .ov-head-actions{width:100%}.page-overview .ov-head-btn{width:100%;justify-content:center}}

/* Phone top bar: one row. The Graphite rule pins .topbar to 58px, which beat
   the older mobile rule letting it wrap — so the wrapped buttons spilled over
   the page title. On a phone the breadcrumb is dropped (the menu button
   already says where you are) and "New analysis" collapses to its + icon. */
@media(max-width:680px){
  body.app-shell .topbar,body.app-shell.page-overview .topbar{height:auto!important;min-height:56px!important;flex-wrap:nowrap!important;padding-block:10px!important}
  body.app-shell .topbar .breadcrumb{display:none!important}
  body.app-shell .topbar-right{flex-wrap:nowrap!important;margin-inline-start:auto}
  body.app-shell .topbar .new-btn{width:36px;min-width:36px;padding:0!important;justify-content:center;font-size:0!important;gap:0}
  body.app-shell .topbar .new-btn svg{width:14px;height:14px}
}
/* Zero steps aside while the page moves: nearly transparent during a scroll,
   back once it settles, so it never sits on top of what is being read. */
.zero{transition:opacity .25s}
.zero.zero-scrolling{opacity:.18}
@media(max-width:620px){.zero-orb{width:34px!important;height:53px!important}.zero-hide{bottom:48px!important}}
/* Shared sidebar footer (nav.php) — index.php styled .user-name, the other
   pages .user-name-el; the shared markup uses the latter everywhere. */
body.app-shell .user-name-el{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app-shell .user-email-el{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app-shell .user-info{min-width:0}

/* ── KPI detail panel (ratio_defs.js ac_openRatioDetail) ──────────────────────
   Reading order follows who reads it: the lede (definition + what it says
   about this company) and the trend for the CEO, why/next/related for the
   CFO, and the formula with its full calculation folded away for the
   accountant. Numbers-only column on the side. */
.rd{max-width:940px!important;width:100%;padding:0!important;background:var(--ov-surface,#2a2a2a)!important;border:1px solid var(--ov-line,rgba(155,193,255,.12))!important;border-radius:16px!important;overflow:auto}
.rd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--ov-line,rgba(255,255,255,.08))}
.rd-titlewrap{display:grid;gap:8px;min-width:0}
.rd .ratio-modal-title{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)!important}
.rd-pill{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:4px 10px 4px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.05);color:var(--text-soft);border:1px solid var(--ov-line,rgba(255,255,255,.08))}
.rd-sev-good .rd-pill{color:#34d399;background:rgba(16,201,122,.10);border-color:rgba(16,201,122,.28)}
.rd-sev-warning .rd-pill{color:#fbbf24;background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.28)}
.rd-sev-critical .rd-pill{color:#fb7185;background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.30)}
.rd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex:0 0 8px}
.rd-dot.rd-good{background:#10C97A}.rd-dot.rd-warning{background:#F59E0B}.rd-dot.rd-critical{background:#F87171}.rd-dot.rd-issue{background:#D4A853}
.rd-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px}
.rd-main{padding:20px 24px 22px;min-width:0}
.rd-side{padding:20px 20px 22px;border-inline-start:1px solid var(--ov-line,rgba(255,255,255,.08));background:var(--ov-muted,rgba(255,255,255,.02));display:flex;flex-direction:column;gap:14px}
.rd-lede{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--text-soft)}
.rd-lede strong{color:var(--text-primary);font-weight:600}
.rd-trend{margin:0 0 18px;padding:12px 12px 6px;border:1px solid var(--ov-line,rgba(255,255,255,.08));border-radius:12px;background:var(--ov-muted,rgba(255,255,255,.02))}
.rd-chart{display:block;width:100%;height:auto;direction:ltr}
.rd-chart .rd-gline{stroke:var(--ov-line,rgba(255,255,255,.08));stroke-width:1}
.rd-axis{fill:var(--text-faint);font-size:11px;font-variant-numeric:tabular-nums}
.rd-line{fill:none;stroke:#5C96F6;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.rd-pt{fill:var(--ov-surface,#2a2a2a);stroke:#5C96F6;stroke-width:2}
.rd-pt.is-last{fill:#5C96F6;stroke:#B5D0FD}
.rd-pt-lbl{fill:var(--text-primary);font-size:12px;font-weight:700}
.rd-target{fill:none;stroke:#D4A853;stroke-width:1.4;stroke-dasharray:5 4}
.rd-target-lbl{fill:#D4A853;font-size:11px;font-weight:700;letter-spacing:.04em}
.rd-band{fill:rgba(212,168,83,.10);stroke:rgba(212,168,83,.35);stroke-dasharray:5 4}
.rd-trend figcaption{margin-top:4px;font-size:11px;color:var(--text-faint);text-align:end}
.rd-sec{margin:0 0 16px}
.rd-sec h5{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#D4A853)}
.rd-sec p{margin:0;font-size:13px;line-height:1.65;color:var(--text-soft)}
.rd-rels{display:flex;flex-wrap:wrap;gap:8px}
.rd-rel{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--ov-line,rgba(255,255,255,.1));border-radius:10px;background:transparent;color:var(--text-soft);font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s}
.rd-rel:hover{border-color:rgba(92,150,246,.5);background:rgba(92,150,246,.08)}
.rd-rel b{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}
.rd-calc{margin:4px 0 14px;border:1px solid var(--ov-line,rgba(255,255,255,.08));border-radius:12px;overflow:hidden}
.rd-calc summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;flex-wrap:wrap}
.rd-calc summary::-webkit-details-marker{display:none}
.rd-calc-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.rd-calc-f{flex:1;min-width:0;font-size:13px;color:var(--text-primary);font-family:'Courier New',monospace;overflow-wrap:break-word}
[dir="rtl"] .rd-calc-f{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
.rd-calc-open{font-size:12px;font-weight:600;color:#8BB5FA}
.rd-calc-open::after{content:' ▾'}.rd-calc[open] .rd-calc-open::after{content:' ▴'}
.rd-calc-body{padding:0 14px 12px}
.rd-foot{margin:0;font-size:11px;line-height:1.55;color:var(--text-faint)}
.rd-stat{display:grid;gap:3px}
.rd-stat span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.rd-stat b{font-size:16px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:start}
.rd-stat-main b{font-size:32px;letter-spacing:-.02em}
.rd-sev-good .rd-stat-main b{color:#34d399}.rd-sev-warning .rd-stat-main b{color:#fbbf24}.rd-sev-critical .rd-stat-main b{color:#fb7185}
.rd-tone-up b{color:#34d399}.rd-tone-down b{color:#fb7185}.rd-tone-flat b{color:var(--text-soft)}
.rd-assess{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--ov-line,rgba(255,255,255,.08));font-size:12px;line-height:1.55;color:var(--text-soft)}
[data-theme="light"] .rd{background:#fff!important;border-color:rgba(24,25,28,.10)!important}
[data-theme="light"] .rd-side,[data-theme="light"] .rd-trend{background:#f7f7f4}
[data-theme="light"] .rd-sev-good .rd-pill{color:#0a8a52}[data-theme="light"] .rd-sev-warning .rd-pill{color:#93600a}[data-theme="light"] .rd-sev-critical .rd-pill{color:#bd3448}
[data-theme="light"] .rd-sev-good .rd-stat-main b,[data-theme="light"] .rd-tone-up b{color:#0a8a52}[data-theme="light"] .rd-sev-warning .rd-stat-main b{color:#93600a}[data-theme="light"] .rd-sev-critical .rd-stat-main b,[data-theme="light"] .rd-tone-down b{color:#bd3448}
[data-theme="light"] .rd-sec h5{color:#8a6a1e}[data-theme="light"] .rd-calc-open{color:#4B81D8}[data-theme="light"] .rd-target-lbl{fill:#9c7a2e}
@media(max-width:760px){.rd-grid{grid-template-columns:1fr}.rd-side{order:-1;border-inline-start:0;border-bottom:1px solid var(--ov-line,rgba(255,255,255,.08));display:grid;grid-template-columns:1fr 1fr;gap:12px}.rd-stat-main{grid-column:1/-1}.rd-assess{grid-column:1/-1}.rd-head,.rd-main,.rd-side{padding-inline:16px}}
/* Trend, folded like the calculation: the summary line names the span. */
.rd-trend-box .rd-trend{margin:0}
.rd-trend-sum{font-family:inherit!important;color:var(--text-soft)!important;font-size:12px!important}

/* Upload: reporting period picker (required). */
.period-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.period-kind{position:relative;cursor:pointer}
.period-kind input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.period-kind span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);color:var(--text-soft);font-size:13px;font-weight:600;transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}
.period-kind:hover span{border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--text-primary)}
.period-kind input:checked+span{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent),0 0 14px color-mix(in srgb,var(--gold) 18%,transparent)}
.period-kind input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
[data-theme="light"] .period-kind span{background:#fff}
[data-theme="light"] .period-kind input:checked+span{background:color-mix(in srgb,var(--gold) 10%,#fff)}
.period-pair{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.period-prior{margin-top:3px;font-weight:500;font-size:12px;color:var(--text-soft)}
.period-preview.is-missing{border-color:#F87171;color:#F87171}
.period-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.period-grid[hidden]{display:none}
.period-field{display:grid;gap:6px;min-width:0}
.period-field[hidden]{display:none}
.period-field>span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.period-field input,.period-field select{width:100%;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:10px;color:var(--text-primary);font:inherit;font-size:13px;padding:10px 12px;outline:none}
.period-field input:focus,.period-field select:focus{border-color:var(--gold)}
.period-field select option{background:#2a2a2a;color:#f2f3f5}
[data-theme="light"] .period-field input,[data-theme="light"] .period-field select{background:#fff}
[data-theme="light"] .period-field select option{background:#fff;color:#1a1b1f}
.period-preview{margin-top:10px;padding:9px 12px;border-radius:9px;border:1px dashed var(--glass-border);font-size:13px;color:var(--text-faint)}
.period-preview.is-set{border-style:solid;border-color:rgba(212,168,83,.45);color:var(--text-primary);background:rgba(212,168,83,.07);font-weight:600}
.period-hint{margin-top:8px;font-size:11px;line-height:1.55;color:var(--text-faint)}
.period-hint b{color:var(--text-soft)}
@media(max-width:620px){.period-grid{grid-template-columns:1fr}}
/* The upload page sits its form beside a help column; on a phone they stack. */
@media(max-width:900px){.upload-grid{grid-template-columns:1fr !important}}

/* Ratio detail: dial in the side column */
.rd-gauge{margin-top:6px;padding-top:14px;border-top:1px solid var(--ov-line,rgba(255,255,255,.08))}
.rd-gauge .rgauge-svg{width:100%;height:auto;margin:0 auto -6px}
.rd-gauge-key{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-top:10px;font-size:11px;color:var(--text-faint)}
.rd-gauge-key span{display:inline-flex;align-items:center;gap:5px}
.rd-gauge-key i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* Zero, recoloured to the logo: antenna ball pulses like a status light. */
.zero-ant{animation:zeroAnt 2.4s steps(1) infinite}
@keyframes zeroAnt{0%,70%{fill:#7E9EFE}72%,88%{fill:#FFFFFF}90%,100%{fill:#7E9EFE}}

/* ── First-run focus (Overview with no saved report): no sidebar, one task ── */
.ac-focus .topbar{justify-content:space-between;background:transparent!important;border-bottom:0!important;min-height:64px}
.ac-focus .focus-brand{display:inline-flex;align-items:center;color:var(--text-primary);text-decoration:none}
.ac-focus .focus-brand .ac-logo{height:28px}
.ac-focus .focus-signout{margin:0}
.ac-focus .focus-signout-btn{width:auto;padding:0 14px;font:600 13px/1 var(--font,system-ui);color:var(--text-soft);gap:6px}
.ac-focus .content{display:flex;align-items:center;justify-content:center;padding:12px 40px 56px}
.ac-sidebar-enter .sidebar{animation:acSbIn .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes acSbIn{from{transform:translateX(-28px);opacity:0}to{transform:none;opacity:1}}
.ac-start{display:grid;grid-template-columns:minmax(0,520px) minmax(0,520px);gap:72px;align-items:center;width:100%;max-width:1120px}
.ac-kicker{font:600 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.ac-start h1{text-wrap:balance;font-size:32px;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:14px 0 12px;color:var(--text-primary)}
.ac-lede{font-size:16px;line-height:1.65;color:var(--text-soft);margin:0 0 24px;max-width:480px}
.ac-next{display:flex;gap:16px;align-items:center;padding:22px;border:1.5px dashed color-mix(in srgb,var(--purple) 50%,transparent);background:color-mix(in srgb,var(--purple) 7%,transparent);border-radius:16px;text-decoration:none;color:var(--text-primary);transition:background .2s,border-color .2s;max-width:520px}
.ac-next:hover{background:color-mix(in srgb,var(--purple) 12%,transparent);border-color:var(--purple)}
.ac-next-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple);flex:0 0 auto}
.ac-next-tx b{display:block;font-size:16px}.ac-next-tx small{font-size:13px;color:var(--text-faint)}
.ac-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:20px}
.ac-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:10px;background:var(--purple);color:#10131f;font-weight:600;font-size:14px;text-decoration:none}
.ac-cta:hover{filter:brightness(1.08)}
.ac-alt{font-size:13px;color:var(--text-faint);text-decoration:none}.ac-alt:hover{color:var(--text-primary)}
.ac-steps{list-style:none;display:flex;margin:34px 0 0;padding:0;max-width:520px}
.ac-steps li{flex:1;position:relative;padding-top:22px;font-size:12px;color:var(--text-faint)}
.ac-steps li:before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--ov-line,rgba(255,255,255,.08))}
.ac-steps li:after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--ov-surface,#2a2a2a);border:2px solid var(--ov-line,rgba(255,255,255,.12))}
.ac-steps li.is-on{color:var(--text-primary)}.ac-steps li.is-on:after{background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 22%,transparent)}
.ac-steps li.is-done:after{background:#2FE68A;border-color:#2FE68A}.ac-steps li.is-done:before{background:#2FE68A}
.ac-steps li b{display:block;font-size:13px;font-weight:600;color:inherit}
.ac-start-visual{position:relative;height:430px}
.ac-card{position:absolute;background:var(--ov-surface,#2a2a2a);border:1px solid var(--ov-line,rgba(255,255,255,.08));border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.ac-sample{left:0;right:24px;top:20px;padding:18px;color:var(--text-primary)}
.ac-sample-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:650;margin-bottom:12px}
.ac-sample-head em{font:600 9px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--text-faint);border:1px solid var(--ov-line,rgba(255,255,255,.1));border-radius:99px;padding:4px 8px}
.ac-sample-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ac-sample-kpis>div,.ac-sample-box{background:var(--ov-muted,#242424);border:1px solid var(--ov-line,rgba(255,255,255,.08));border-radius:10px}
.ac-sample-kpis>div{padding:9px 10px}.ac-sample-kpis small{display:block;font:600 8.5px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.ac-sample-kpis b{font-size:14.5px}
.ac-sample-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}.ac-sample-box{height:150px;padding:10px;display:grid;place-items:center}
.ac-chip{left:8px;bottom:56px;padding:9px 13px;font-size:12px;display:flex;gap:8px;align-items:center;color:var(--text-soft)}
.ac-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
@media(max-width:980px){.ac-start{grid-template-columns:1fr;gap:36px}.ac-start-visual{display:none}.ac-focus .content{padding:8px 20px 40px}}
@media(prefers-reduced-motion:reduce){.ac-sidebar-enter .sidebar{animation:none}}
.ac-alt-strong{color:var(--text-primary);font-weight:600}
.ac-demo-form{margin:0;display:inline}.ac-demo-btn{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:13px}
.ac-demo-btn::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--purple);margin-inline-end:8px;vertical-align:middle}

/* Trend chart hover / focus readout */
.rd-hv{outline:none;cursor:crosshair}
.rd-hv-hit{fill:transparent}
.rd-hv-line,.rd-hv-dot,.rd-hv-tip{opacity:0;transition:opacity .12s;pointer-events:none}
.rd-hv:hover .rd-hv-line,.rd-hv:hover .rd-hv-dot,.rd-hv:hover .rd-hv-tip,
.rd-hv:focus .rd-hv-line,.rd-hv:focus .rd-hv-dot,.rd-hv:focus .rd-hv-tip{opacity:1}
.rd-hv-line{stroke:var(--purple);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.rd-hv:hover .rd-hv-line,.rd-hv:focus .rd-hv-line{opacity:.55}
.rd-hv-dot{fill:var(--purple);stroke:var(--ov-surface,#2a2a2a);stroke-width:2.5}
.rd-hv-tip rect{fill:var(--ov-surface,#2a2a2a);stroke:var(--purple);stroke-width:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.rd-hv-l1{fill:var(--text-faint);font-size:11px;font-weight:600}
.rd-hv-l2{fill:var(--text-primary);font-size:16px;font-weight:700}
.rd-hv-l3{fill:var(--text-soft);font-size:11px}
.rd-chart:has(.rd-hv:hover) .rd-pt-lbl,.rd-chart:has(.rd-hv:focus) .rd-pt-lbl{opacity:0}
.rd-gauge-note{margin-top:8px;text-align:center;font-size:11px;color:var(--text-faint)}

/* Demo company: banner, tag and remove buttons */
.ac-demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--purple) 40%,transparent);background:color-mix(in srgb,var(--purple) 8%,transparent);border-radius:10px;font-size:13px;color:var(--text-soft)}
.ac-demo-bar b{color:var(--text-primary)}
.ac-demo-bar form{margin:0}
.ac-demo-bar button,.ac-demo-remove{background:none;border:1px solid var(--ov-line,rgba(255,255,255,.14));border-radius:8px;padding:5px 12px;color:var(--text-primary);font:600 12px/1.2 inherit;font-family:inherit;cursor:pointer}
.ac-demo-bar button:hover,.ac-demo-remove:hover{border-color:#FF4D4D;color:#FF4D4D}
.ac-demo-tag{margin-inline-start:6px;padding:2px 7px;border-radius:99px;border:1px solid var(--ov-line,rgba(255,255,255,.14));font:600 11px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);vertical-align:middle}

/* The wheel is an SVG scaled to its column: its font sizes are viewBox units, so they stay as designed. */
/* Zero must never trap content or be impossible to dismiss */
.app-shell .content{padding-bottom:112px}
.zero-hide{width:26px;height:26px;font-size:16px}
@media (hover:none),(max-width:820px){.zero-hide{opacity:1;bottom:76px}.zero-orb{width:38px;height:59px}}
.zero-bubble{cursor:pointer}
.ac-demo-wrap{padding:14px 28px 0}.ac-demo-wrap .ac-demo-bar{margin:0}@media(max-width:680px){.ac-demo-wrap{padding:12px 14px 0}}

/* ═══ Readability & consistency pass (2026-10-04, owner-approved audit) ═══════════════════
   Built on the Charcoal / warm-greige theme — colours only deepen where text failed WCAG AA. */

/* Primary buttons: white on the old #6496E8 read at ~3:1. One deeper blue of the same family
   (#2563EB, hover #1D4ED8) for every primary action, in both themes. */
:root:root body .new-btn, :root:root body .btn-primary-sm, :root:root body .btn-analyse, :root:root body .btn-action{background:#2563EB!important;color:#fff!important;border-color:transparent!important}
:root:root body .new-btn:hover, :root:root body .btn-primary-sm:hover, :root:root body .btn-analyse:hover, :root:root body .btn-action:hover{background:#1D4ED8!important}

/* Active tabs in light: the dark theme's pale blue (#94BDFF) was used on a pale-blue pill. */
:root:root[data-theme="light"] .stmt-tab.active{color:#1D4ED8!important;background:rgba(37,99,235,.12)!important;border-color:rgba(37,99,235,.28)!important}
:root:root .view-btn.active{background:rgba(92,150,246,.12)!important}
:root:root[data-theme="light"] .view-btn.active{color:#1D4ED8!important;border-color:rgba(37,99,235,.35)!important}

/* Light sidebar: links and section labels were ~3.8:1 on the greige rail. */
:root:root[data-theme="light"] body.app-shell .nav-item:not(.active){color:#57514c!important}
:root:root[data-theme="light"] body.app-shell .nav-label{color:#57514c!important}

/* Zero: never sit on a figure — the bubble steps aside while you scroll, and every page keeps
   room at the bottom so the last rows clear the mascot. */
:root .zero-scrolling .zero-bubble{opacity:0!important;pointer-events:none!important}
body.app-shell main.content{padding-bottom:110px}

/* Light theme accents: the dark theme's bright mint / sky / peach / periwinkle read at 1.5–2.9:1
   on the greige paper. Same hues, deepened until text clears 4.5:1. */
:root:root[data-theme="light"] body.app-shell,
:root:root[data-theme="light"] body.page-login,
:root:root[data-theme="light"] .page-overview{
  --text-soft:#57504b!important;
  --purple:#2752B8!important; --gold:#2752B8!important;
  --emerald:#0f6e52!important; --blue:#1d4ed8!important; --orange:#7f5208!important;
  --ov-alert-review:#7f5208!important;
}

/* One red for "bad" figures (was a hard-coded #F87171 in ~20 places): soft on charcoal,
   deep enough to read on greige. */
body.app-shell, body.page-login, .page-overview{--red:#F87171}
:root:root[data-theme="light"] body.app-shell, :root:root[data-theme="light"] .page-overview{--red:#b4232f}
/* Unfavourable budget variances read red, not amber. */
.stat.peach.bad .stat-label, .stat.peach.bad .stat-value{color:var(--red)!important}

/* Light theme: hard-coded dark-theme pastels on chips, badges and kickers. */
:root:root[data-theme="light"] .file-badge.xlsx{color:#0f6e52!important}
:root:root[data-theme="light"] .file-badge.csv, :root:root[data-theme="light"] .file-badge.png{color:#1d4ed8!important}
:root:root[data-theme="light"] .file-badge.pdf{color:#b4232f!important}
:root:root[data-theme="light"] .opt-tag.blue, :root:root[data-theme="light"] .badge.auto{color:#1d4ed8!important}
:root:root[data-theme="light"] .opt-tag.mint, :root:root[data-theme="light"] .badge.user{color:#0f6e52!important}
:root:root[data-theme="light"] .executive-kicker{color:#1d4ed8!important}
:root:root[data-theme="light"] .variance-pill.good{color:#0f6e52!important}
:root:root[data-theme="light"] .variance-pill.bad{color:#b4232f!important}
:root:root[data-theme="light"] .page-overview .ov-brief-action{color:#2752B8!important}
:root:root[data-theme="light"] .stat.mint .stat-label, :root:root[data-theme="light"] .stat.mint .stat-value, :root:root[data-theme="light"] .stat.mint .stat-note{color:#0b5c44!important}
/* Trial-balance format sample: the type chips' pastel text, deepened on the light paper. */
:root:root[data-theme="light"] .tb-type-chip{filter:brightness(.52) saturate(1.4)}

/* Legal / data-protection pages (privacy, terms, data-control): they carried a fixed dark
   palette and the retired gold link. They now follow the theme toggle like the app. */
body.page-legal button, body.page-legal input, body.page-legal select{font:inherit}
[dir="rtl"] body.page-legal{font-family:"IBM Plex Sans Arabic",Inter,system-ui,sans-serif!important}
body.page-legal .btn:not(.danger){background:#2563EB!important}
:root[data-theme="light"] body.page-legal{background:#dad6d3!important;color:#2e2b2a!important}
:root[data-theme="light"] body.page-legal .legal p, :root[data-theme="light"] body.page-legal .legal li,
:root[data-theme="light"] body.page-legal .muted, :root[data-theme="light"] body.page-legal .head p{color:#57504b!important}
:root[data-theme="light"] body.page-legal a{color:#1d4ed8!important}
:root[data-theme="light"] body.page-legal .card, :root[data-theme="light"] body.page-legal .legal .meta{background:#e6e2de!important;border-color:rgba(46,43,42,.14)!important}
:root[data-theme="light"] body.page-legal input[type=text]{background:#ebe7e3!important;color:#2e2b2a!important;border-color:rgba(46,43,42,.2)!important}
:root[data-theme="light"] body.page-legal .company{border-color:rgba(46,43,42,.12)!important}
:root[data-theme="light"] body.page-legal .ok{color:#0f6e52!important}:root[data-theme="light"] body.page-legal .err{color:#b4232f!important}

/* Balance: a row of 4 KPI cards (Trend, Budget) left the 4th alone on a second row; the 5
   report links in the classic overview left Red Flags alone too. Cards now share the row. */
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}
@media (min-width:1100px){.page-overview .spot-links{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
/* Clients: the form and the company list side by side instead of one narrow column. */
.clients-layout{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:20px;align-items:start}
.clients-layout>.card{max-width:none!important;margin:0!important}
.clients-layout .co-grid{margin:0}
@media (max-width:1000px){.clients-layout{grid-template-columns:1fr}}
/* Report on a phone: the banner, title chips and four full-width buttons filled the first
   screen before any figure. Buttons go compact (wrapping, not stretched), KPIs two-up. */
@media (max-width:620px){
  body.page-report .report-actions{gap:6px!important;justify-content:flex-start!important}
  body.page-report .report-actions>*,body.page-report .report-actions .btn-action{flex:0 0 auto!important;width:auto!important}
  body.page-report .report-actions .btn-back,body.page-report .report-actions .btn-action{min-height:34px!important;padding:6px 11px!important;font-size:13px!important}
  body.page-report .ph-title{font-size:16px!important;line-height:1.3!important}
  body.page-report .ph-sub{gap:6px!important}
  body.page-report .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .ac-demo-bar{padding:8px 12px!important;font-size:12px!important;gap:6px 10px!important}
}
/* KPI labels stay on one line so the four figures in a row share a baseline. */
.hero-kpi-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* KPI stat cards in light: the old off-white gradient (rgba(240,244,255)) left white patches on
   the greige page. Greige surface, a faint tint of the card's colour, no white inset. */
:root:root[data-theme="light"] .stat{box-shadow:0 1px 0 rgba(46,43,42,.04)!important}
:root:root[data-theme="light"] .stat.mint{background:linear-gradient(135deg,rgba(15,110,82,.08),#e6e2de 60%)!important}
:root:root[data-theme="light"] .stat.blue,:root:root[data-theme="light"] .stat.lav{background:linear-gradient(135deg,rgba(29,78,216,.07),#e6e2de 60%)!important}
:root:root[data-theme="light"] .stat.peach{background:linear-gradient(135deg,rgba(127,82,8,.08),#e6e2de 60%)!important}
:root:root[data-theme="light"] .stat.peach.bad{background:linear-gradient(135deg,rgba(180,35,47,.07),#e6e2de 60%)!important;border-color:rgba(180,35,47,.22)!important}
.stat.peach.bad::before{background:linear-gradient(90deg,transparent,var(--red),transparent)!important;box-shadow:none!important}

/* Type: one monospace (JetBrains Mono — loaded by google-fonts.css) everywhere a page asks for
   var(--mono); form controls take the page font instead of the browser's Arial. */
body.app-shell, body.page-login, body.page-legal{--mono:'JetBrains Mono',ui-monospace,monospace}
input, select, textarea, button{font-family:inherit}

/* One top bar on every app page (report and Chart of Accounts used to differ): language,
   bordered theme toggle, "New analysis". Pages that define these themselves still win. */
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--glass-border,rgba(255,255,255,.1));background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;color:var(--text-soft)}
.icon-btn:hover{color:var(--text-primary)}
[data-theme="light"] .icon-btn{background:rgba(46,43,42,.04);border-color:rgba(46,43,42,.14)}
.new-btn{padding:7px 16px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* File pickers: the browser's grey "Choose File" button, restyled as a quiet secondary button. */
input[type=file]{color:var(--text-soft);font-size:13px}
input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;margin-inline-end:10px;padding:7px 13px;border-radius:8px;border:1px solid var(--glass-border,rgba(255,255,255,.14));background:transparent;color:var(--text-primary);cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:rgba(92,150,246,.55);background:rgba(92,150,246,.08)}
/* Chart of Accounts: learned names arrive lower-case ("accrued expenses and payroll"); show them
   in sentence case. Display only — the stored name is untouched. */
.acct-name::first-letter{text-transform:uppercase}
/* Phone: the Export menu anchors to the whole action row (not the button), so it opens on screen. */
@media (max-width:620px){
  body.page-report .report-actions{position:relative}
  body.page-report .export-menu{position:static!important}
  body.page-report .export-menu-popover{left:0!important;right:auto!important;max-width:calc(100vw - 28px)}
}
/* Top-bar trail links (some now come from the page's own path): never the browser's default
   underlined violet. */
.topbar .breadcrumb a{color:var(--text-soft)!important;text-decoration:none!important}
.topbar .breadcrumb a:hover{color:var(--text-primary)!important}
/* Tasks: the two option cards line their titles up at the top. */
.task-grid .task-option{align-items:flex-start}
.task-grid .task-opt-arrow{align-self:center}
/* The phone top bar shows "New analysis" as a "+" icon: keep it a 36px square on every page. */
@media (max-width:900px){body.app-shell .topbar .new-btn{min-height:36px;height:36px}}

/* ═══ Top navigation (Oct 5, owner request) ══════════════════════════════════════════════
   On wide screens the side menu becomes one 56px bar across the top: logo, Overview · Tasks ·
   Reports, then "Finance ▾" and "Clients ▾" menus; the page's own top-bar buttons (language,
   theme, New analysis) sit on the same row, and the avatar opens name + Sign out. The page gets
   back the 240px the rail took. Phones and narrow windows keep the side menu (☰). Same markup
   (nav.php) — only the layout changes. */
button.nav-label{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;cursor:default;width:100%}
button.avatar{border:0;cursor:pointer;font:inherit;padding:0}

@media (min-width:901px){
  body.app-shell:has(> .sidebar){padding-top:56px}
  body.app-shell > .sidebar{position:fixed!important;inset:0 0 auto 0!important;top:0!important;width:auto!important;height:56px!important;
    flex-direction:row!important;align-items:center;gap:6px;padding:0 20px!important;z-index:60!important;overflow:visible!important;
    border-inline-end:0!important;border-right:0!important;border-bottom:1px solid var(--ov-line,rgba(255,255,255,.07))!important;transform:none!important;animation:none!important;box-shadow:none!important}
  body.app-shell > .sidebar .sidebar-brand{flex:none;height:56px;padding:0 16px 0 0!important;border:0!important;margin:0!important;display:flex;align-items:center}
  [dir="rtl"] body.app-shell > .sidebar .sidebar-brand{padding:0 0 0 16px!important}
  body.app-shell > .sidebar .sidebar-brand svg,body.app-shell > .sidebar .sidebar-brand img{max-height:26px;width:auto}
  body.app-shell > .sidebar .sidebar-nav{flex:none;display:flex;align-items:center;gap:2px;padding:0!important;overflow:visible!important}
  body.app-shell > .sidebar .nav-section{display:flex;align-items:center;gap:2px;margin:0!important;position:relative}
  body.app-shell > .sidebar .nav-sec-main > .nav-label{display:none}
  body.app-shell > .sidebar .nav-item{padding:7px 11px!important;margin:0!important;font-size:14px;white-space:nowrap;gap:7px}
  body.app-shell > .sidebar .nav-sec-main .nav-item svg{display:none}
  /* Finance ▾ / Clients ▾ */
  body.app-shell > .sidebar .nav-sec-menu > .nav-label{display:flex;align-items:center;gap:6px;width:auto;padding:7px 11px;border-radius:7px;cursor:pointer;
    font:500 14px var(--font,Inter,sans-serif)!important;letter-spacing:0!important;text-transform:none!important;color:var(--text-soft)!important;margin:0!important}
  body.app-shell > .sidebar .nav-sec-menu > .nav-label::after{content:'';width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);opacity:.7}
  body.app-shell > .sidebar .nav-sec-menu.has-active > .nav-label{color:var(--text-primary)!important;background:var(--ov-accent,rgba(92,150,246,.12))}
  body.app-shell > .sidebar .nav-sec-menu > .nav-label:hover{color:var(--text-primary)!important}
  body.app-shell > .sidebar .nav-sec-menu > .nav-item{display:none!important}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item{display:flex!important}
  body.app-shell > .sidebar .nav-sec-menu .nav-menu{display:none}
  body.app-shell > .sidebar .nav-sec-menu.open::before{content:'';position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:230px;height:calc(var(--n,4) * 38px + 12px);
    background:var(--ov-raised,#2a2a2a);border:1px solid var(--ov-line,rgba(255,255,255,.1));border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.35);z-index:-1}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item{position:absolute;inset-inline-start:6px;min-width:218px;z-index:2}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item:nth-of-type(1){top:calc(100% + 12px)}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item:nth-of-type(2){top:calc(100% + 50px)}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item:nth-of-type(3){top:calc(100% + 88px)}
  body.app-shell > .sidebar .nav-sec-menu.open > .nav-item:nth-of-type(4){top:calc(100% + 126px)}
  /* user: avatar at the far end, name + Sign out in its menu */
  body.app-shell > .sidebar .sidebar-footer{position:static!important;margin-inline-start:auto;border:0!important;padding:0!important;display:flex;align-items:center;order:3}
  body.app-shell > .sidebar .sidebar-footer .user-chip{padding:0!important;margin:0!important;border:0!important;background:none!important}
  body.app-shell > .sidebar .sidebar-footer .user-info,body.app-shell > .sidebar .sidebar-footer form{display:none}
  body.app-shell > .sidebar .sidebar-footer.open{position:relative!important}
  body.app-shell > .sidebar .sidebar-footer.open .user-info,body.app-shell > .sidebar .sidebar-footer.open form{display:block;position:absolute;inset-inline-end:0;min-width:220px;
    background:var(--ov-raised,#2a2a2a);border:1px solid var(--ov-line,rgba(255,255,255,.1));padding:10px 14px!important;z-index:2}
  body.app-shell > .sidebar .sidebar-footer.open .user-info{top:calc(100% + 8px);border-radius:10px 10px 0 0;border-bottom:0}
  body.app-shell > .sidebar .sidebar-footer.open form{top:calc(100% + 58px);border-radius:0 0 10px 10px;border-top:0;box-shadow:0 16px 40px rgba(0,0,0,.35)}
  /* the page's own top bar: its buttons move up onto the same row, its trail goes */
  body.app-shell:has(> .sidebar) .topbar{position:fixed!important;top:0!important;inset-inline-end:64px;inset-inline-start:auto;height:56px!important;z-index:61;
    background:transparent!important;border:0!important;padding:0!important;backdrop-filter:none!important;width:auto!important}
  body.app-shell:has(> .sidebar) .topbar .breadcrumb{display:none}
  :root:root body.app-shell:has(> .sidebar) .topbar{background:transparent!important}   /* beats the theme blocks' tinted bar */
  body.app-shell:has(> .sidebar) > .main{z-index:auto!important}   /* else the fixed button row is trapped under the bar */
  body.app-shell:has(> .sidebar) .mobile-menu-btn{display:none!important}
  [data-theme="light"] body.app-shell > .sidebar{background:#d3cfcb!important;border-bottom-color:rgba(46,43,42,.14)!important}
  :root:not([data-theme="light"]) body.app-shell > .sidebar{background:#1f1f1f!important}
  [data-theme="light"] body.app-shell > .sidebar .nav-sec-menu.open::before,
  [data-theme="light"] body.app-shell > .sidebar .sidebar-footer.open .user-info,[data-theme="light"] body.app-shell > .sidebar .sidebar-footer.open form{background:#ebe7e3;box-shadow:0 16px 40px rgba(46,43,42,.18)}
  /* the overview's framed briefing measures from its own top */
  body.app-shell:has(> .sidebar) .ac-brief-frame{height:calc(100vh - 56px)}
}
@media (min-width:901px) and (max-width:1180px){
  body.app-shell > .sidebar .nav-item,body.app-shell > .sidebar .nav-sec-menu > .nav-label{padding:7px 8px!important;font-size:13px}
  body.app-shell:has(> .sidebar) .topbar .new-btn{font-size:0!important;gap:0;width:36px;height:36px;min-height:36px;padding:0!important;justify-content:center;border-radius:9px!important}
}

/* ═══ Design system (Oct 5): the shell speaks the briefing's palette and type scale ══════
   One warm white (#e8e6e3, never #fff/#f0f4ff for text), one data/link blue (#6F9CEE dark),
   one action blue (#2563EB buttons), one green / red / amber across every page; the top bar
   uses 14 (nav) and 13 (controls), weights 500/600. */
:root:not([data-theme="light"]) body.app-shell, :root:not([data-theme="light"]) body.page-login,
:root:not([data-theme="light"]) .page-overview{
  --text-primary:#e8e6e3!important; --purple:#6F9CEE!important; --gold:#6F9CEE!important;
  --emerald:#3CB88A!important; --red:#EC6F7A!important; --orange:#DDA348!important; --blue:#6F9CEE!important}
:root:not([data-theme="light"]) body.app-shell{color:#e8e6e3}
body.app-shell .nav-item, body.app-shell .sidebar .nav-sec-menu > .nav-label{font-size:14px!important}
body.app-shell .language-switch{font-size:13px!important;font-weight:500!important}
:root:root body.app-shell .new-btn{font-size:13px!important;font-weight:600!important}
body.app-shell .avatar{font-size:13px!important;font-weight:600!important}
body.app-shell .logout-link{font-size:13px!important}
body.app-shell .user-name-el{font-size:13px}
body.app-shell .user-email-el{font-size:12px}
body.app-shell .nav-label:not(button){font-size:11px!important;letter-spacing:.08em!important;font-weight:600!important}
.zero button{font-family:inherit}

/* ═══ Tables (Oct 5): one technical-drawing style for every financial table ═══════════════
   Hairlines, not fills; column / section heads in the 11px mono caps label; figures 14px,
   tabular and right-aligned; the prior period muted beside the current one; subtotals a
   hairline above, totals a hairline above and the accounting double rule below. Same
   language as the overview's callouts and side cards. */
:root:root body table.fst td.lbl, :root:root body table.fst td.amt{font-size:14px}
:root:root body table.fst td.amt{font-variant-numeric:tabular-nums}
:root:root body table.fst td.amt:has(+ td.amt){color:var(--text-soft)}                 /* prior year */
:root:root body table.fst tr.t-normal:hover td{background:color-mix(in srgb,var(--purple) 6%,transparent)}
:root:root body table.fst tr.t-header td.lbl{font:600 11px/1.6 var(--mono,'JetBrains Mono',monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding-top:16px}
:root:root body table.fst tr.t-subtotal td{font-weight:600;border-top:1px solid var(--glass-border)}
:root:root body table.fst tr.t-total td{font-weight:700;border-top:1px solid color-mix(in srgb,var(--text-primary) 35%,transparent);border-bottom:3px double color-mix(in srgb,var(--text-primary) 35%,transparent)}
:root:root body table.fst tr.t-subtotal td.amt:has(+ td.amt),:root:root body table.fst tr.t-total td.amt:has(+ td.amt){color:var(--text-soft)}
:root:root body tr.t-yr-hdr td{font:500 11px/1.6 var(--mono,'JetBrains Mono',monospace)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--text-faint)!important;border-bottom:1px solid var(--glass-border)!important}
:root:root body tr.t-yr-hdr td:last-child{color:var(--text-primary)!important}
:root:root body table.fst-analysis tr.t-grp td[colspan]{border-bottom-color:var(--glass-border)!important}
:root:root body table.fst-analysis tr.t-grp td,:root:root body table.fst-analysis tr.t-sub td{font-family:var(--mono,'JetBrains Mono',monospace);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
:root:root body .stmt-doc-head{border-bottom:1px solid var(--glass-border)!important}
:root:root body .stmt-co{letter-spacing:.08em}
:root:root body .stmt-title{font:500 11px/1.6 var(--mono,'JetBrains Mono',monospace);letter-spacing:.08em}
:root:root body .note-link:hover{color:var(--purple);border-color:var(--purple)}
:root:root[data-theme="light"] body .stmt-doc{background:#e6e2de!important;border-color:rgba(46,43,42,.14)!important;box-shadow:none!important}
/* trend / budget / KPI tables: the same heads and hairlines */
:root:root body table.trend-tbl th, :root:root body table.cv-kpi-table th{font:500 11px/1.4 var(--mono,'JetBrains Mono',monospace)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--text-faint)!important}
:root:root body table.trend-tbl td{font-size:14px;font-variant-numeric:tabular-nums}
:root:root body table.trend-tbl tbody tr:hover td{background:color-mix(in srgb,var(--purple) 6%,transparent)}
/* Arabic: letter-spacing breaks the joins between letters, and the mono face has no Arabic */
:root:root[dir="rtl"] body table.fst tr.t-header td.lbl,:root:root[dir="rtl"] body tr.t-yr-hdr td,:root:root[dir="rtl"] body table.trend-tbl th,:root:root[dir="rtl"] body table.cv-kpi-table th,:root:root[dir="rtl"] body .stmt-title,:root:root[dir="rtl"] body table.fst-analysis tr.t-grp td,:root:root[dir="rtl"] body table.fst-analysis tr.t-sub td{font-family:inherit!important;letter-spacing:0!important;text-transform:none!important}
[dir="rtl"] body table.fst td.note{width:auto;min-width:64px}   /* "الإيضاح" is wider than "Note" */