/* Matrytech control room - dark theme. No external fonts, images or scripts. */
:root {
  --bg: #0a0f1e; --bg2: #0d1426; --surface: #111a2f; --surface2: #17223c; --raise: #1d2a49; --line: #233152; --line2: #2f4067;
  --text: #eaf0fb; --text2: #c3cde3; --muted: #93a1c0;
  --blue: #5aa9ff; --blue-soft: #8cc3ff; --yellow: #f2c94c; --orange: #ff9b54; --red: #ff6b6b; --pink: #ff7eb6; --purple: #b79cff; --cyan: #5ed3d3; --slate: #7d8aa5;
  --radius: 14px; --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: radial-gradient(1200px 600px at 10% -10%, #14224a 0%, transparent 60%), var(--bg); color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--blue-soft); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 16px; font-weight: 650; }
code { background: var(--raise); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.muted { color: var(--muted); }
.ico { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.ico.rot { transform: rotate(45deg); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- shell / navigation ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 26px 18px; background: linear-gradient(180deg, #0e1730, #0b1226); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { font-size: 16px; letter-spacing: -.01em; display: block; }
.brand small { color: var(--muted); font-size: 12px; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #5aa9ff, #7c5cff); box-shadow: 0 6px 18px rgba(90, 169, 255, .3); flex: none; }
#nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
#nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--text2); text-decoration: none; font-weight: 550; }
#nav a .ico { width: 18px; height: 18px; color: var(--muted); }
#nav a:hover { background: var(--surface2); color: var(--text); }
#nav a.active { background: var(--raise); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
#nav a.active .ico { color: var(--blue); }
.side-foot { display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 13px; }
.ghost { background: transparent; color: var(--text2); border: 1px solid var(--line2); padding: 8px 14px; border-radius: 9px; }
.ghost:hover { background: var(--surface2); }
.mtop { display: none; }
.content { padding: 36px 44px 64px; max-width: 1480px; width: 100%; display: flex; flex-direction: column; gap: 28px; }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sub { color: var(--muted); margin-top: 6px; font-size: 14px; max-width: 760px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot-note { color: var(--muted); font-size: 12.5px; margin-top: 12px; }
.sample-banner, .notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.sample-banner { background: repeating-linear-gradient(135deg, rgba(183, 156, 255, .13) 0 8px, rgba(183, 156, 255, .06) 8px 16px); border: 1px dashed var(--purple); color: var(--text2); }
.sample-banner b { color: var(--purple); margin-right: 6px; letter-spacing: .05em; }
.sample-banner .ico { color: var(--purple); margin-top: 2px; }
.n-warn { background: rgba(255, 155, 84, .1); border: 1px solid rgba(255, 155, 84, .5); }
.n-warn .ico { color: var(--orange); margin-top: 3px; }
.n-info { background: rgba(94, 211, 211, .08); border: 1px solid rgba(94, 211, 211, .35); }

/* ---------- panels / KPI ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.count { background: var(--raise); border-radius: 999px; padding: 2px 11px; font-weight: 700; font-size: 13px; color: var(--text2); }
.two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.two-col.wide-left { grid-template-columns: 1.6fr 1fr; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpis.small { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; border-top: 3px solid var(--line2); }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
.kpi-value { font-size: 38px; line-height: 1.1; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-sub { color: var(--text2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-move { border-top-color: var(--blue); } .k-decide { border-top-color: var(--pink); } .k-block { border-top-color: var(--red); }
.k-att { border-top-color: var(--orange); } .k-week { border-top-color: var(--slate); } .k-pay { border-top-color: var(--cyan); }
.kpis.small .kpi-value { font-size: 30px; }
.pips { display: flex; gap: 4px; margin-top: 6px; }
.pip { flex: 1; height: 8px; border-radius: 3px; max-width: 26px; }
.pip.c-moved, .cellmini.c-moved { background: var(--blue); }
.pip.c-noprog { background: transparent; border: 2px solid var(--yellow); }
.pip.c-none { background: transparent; border: 1.5px dotted var(--slate); }
.kpi.small { padding: 16px 18px; }

/* ---------- badges + state vocabulary ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .07em; padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); white-space: nowrap; line-height: 1.4; }
.badge .ico { width: 12px; height: 12px; }
.badge:not(:has(.ico)) { padding-left: 8px; }
.b-sample { color: #d6c6ff; border-color: var(--purple); background: repeating-linear-gradient(135deg, rgba(183, 156, 255, .25) 0 4px, rgba(183, 156, 255, .08) 4px 8px); }
.b-stale { color: #ffc190; border-color: var(--orange); background: rgba(255, 155, 84, .18); }
.b-nodata, .b-notlogged { color: var(--muted); border: 1px dotted var(--slate); background: transparent; }
.b-noprog { color: var(--yellow); border-color: var(--yellow); background: transparent; }
.b-moved { color: #a9d2ff; border-color: transparent; background: rgba(90, 169, 255, .2); }
.b-sensitive { color: #d6dcec; border-color: #54648a; background: rgba(255, 255, 255, .04); }
.b-restricted { color: var(--muted); border-style: dashed; }
.b-paper { color: var(--cyan); border-color: var(--cyan); }
.b-overdue { color: #ffb0b0; border-color: var(--red); background: rgba(255, 107, 107, .15); }
.b-soon { color: #ffc190; border-color: var(--orange); }
.unk { display: inline-block; color: var(--text2); border: 1.5px dashed var(--slate); border-radius: 6px; padding: 0 7px; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; line-height: 1.6; vertical-align: middle; }
.unk-lg { font-size: 14px; padding: 2px 10px; }
.cur { white-space: nowrap; color: var(--muted); font-size: .5em; font-weight: 650; letter-spacing: .05em; margin-right: 6px; vertical-align: .35em; }
.pay-amt .cur, .cur-tile .cur, .tile-outcome .cur, .s-val .cur, td .cur { font-size: .75em; vertical-align: baseline; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--text2); background: rgba(148, 163, 184, .14); border-radius: 999px; padding: 2px 9px 2px 7px; white-space: nowrap; }
.delta.worse { color: #ffb0b0; background: rgba(255, 107, 107, .16); }
.delta.na { color: var(--muted); background: transparent; border: 1px dotted var(--slate); font-weight: 550; padding: 2px 9px; }
.prev { color: var(--muted); font-size: 12.5px; }
.src { color: var(--muted); font-size: 12px; }

/* ---------- attention list ---------- */
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.att { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 11px; background: var(--surface2); border-left: 4px solid var(--slate); }
.att-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-body b { font-weight: 650; overflow-wrap: anywhere; }
.att-body span { color: var(--muted); font-size: 12.5px; }
.att-ic { color: var(--slate); display: grid; place-items: center; }
.att-ic .ico { width: 20px; height: 20px; }
.att-go { color: var(--muted); }
.att-decision { border-left-color: var(--pink); } .att-decision .att-ic { color: var(--pink); }
.att-blocker, .att-overdue { border-left-color: var(--red); } .att-blocker .att-ic, .att-overdue .att-ic { color: var(--red); }
.att-stale, .att-soon { border-left-color: var(--orange); } .att-stale .att-ic, .att-soon .att-ic { color: var(--orange); }
.att-noprog { border-left-color: var(--yellow); } .att-noprog .att-ic { color: var(--yellow); }
.att-nodata { border-left-style: dotted; }
.att-worse { border-left-color: var(--red); }
.more { margin-top: 10px; } .more summary { cursor: pointer; color: var(--blue-soft); font-size: 13.5px; padding: 6px 0; }
.more .att-list { margin-top: 8px; }

/* ---------- charts ---------- */
.spark { width: 100%; height: 36px; display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .dot { fill: var(--blue); } .spark .dot-now { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.nohist { color: var(--muted); font-size: 12px; border: 1px dotted var(--line2); border-radius: 8px; padding: 8px; text-align: center; }
.movechart { width: 100%; height: auto; max-height: 220px; }
.seg-moved { fill: var(--blue); } .seg-noprog { fill: var(--yellow); } .seg-none { fill: #2a3757; }
.axis { fill: var(--muted); font-size: 10.5px; } .axis-n { fill: var(--text2); font-size: 11px; font-weight: 700; }
.cmpbars { width: 120px; height: 24px; display: block; }
.bar-now { fill: var(--blue); } .bar-prev { fill: #5a6a8f; } .bar-unk { fill: var(--muted); font-size: 7px; font-weight: 700; }
.bar-key { color: var(--muted); font-size: 11px; display: inline-flex; gap: 5px; align-items: center; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.sw.seg-moved, .sw.b-now { background: var(--blue); } .sw.seg-noprog { background: var(--yellow); } .sw.seg-none { background: #2a3757; } .sw.b-prev { background: #5a6a8f; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text2); font-size: 12.5px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.panel-head .legend { margin-top: 0; }
.cellmini { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.cellmini.big { width: 20px; height: 20px; border-radius: 6px; }
.cellmini.c-noprog { border: 2px solid var(--yellow); background: transparent; }
.cellmini.c-none { border: 1.5px dotted var(--slate); background: transparent; }
.strip { display: inline-flex; gap: 4px; }
.empty { border: 1px dashed var(--line2); border-radius: 12px; padding: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.empty strong { color: var(--text2); }

/* ---------- workstream tiles ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface); color: var(--text2); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 600; }
.chip.on { background: var(--blue); border-color: var(--blue); color: #06142b; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.tile[hidden] { display: none; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tile.stale { box-shadow: inset 4px 0 0 var(--orange); }
.tile.no-data { border: 1px dashed var(--slate); background: transparent; }
.tile.restricted { border-style: dashed; background: transparent; }
.tile-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tile-head h3 { font-size: 18px; letter-spacing: -.01em; }
.tile-head p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.tile-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 55%; }
.today-line { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: var(--text2); min-width: 0; }
.today-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.today-line .badge { flex: none; }
.tl-moved { background: rgba(90, 169, 255, .1); }
.tl-noprog { background: rgba(242, 201, 76, .07); border: 1px solid rgba(242, 201, 76, .4); }
.tl-none { border: 1px dotted var(--slate); color: var(--muted); }
.tile-metric { display: grid; grid-template-columns: 1fr 130px; gap: 14px; align-items: end; }
.tm-label, .to-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.tm-label { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.tm-val { font-size: 40px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tm-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-chart { display: flex; flex-direction: column; gap: 3px; }
.tm-cap { color: var(--muted); font-size: 11px; text-align: right; }
.tile-outcome { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.to-label { flex: 1 1 100%; }
.to-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--text2); }
.tf-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.tf-k { color: var(--muted); }
.src-row { justify-content: flex-start; }

/* ---------- Today ---------- */
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.panel.decision { border-top: 3px solid var(--pink); } .panel.decision h2 .ico { color: var(--pink); }
.panel.blockers { border-top: 3px solid var(--red); } .panel.blockers h2 .ico { color: var(--red); }
.today-grid .panel:nth-child(2) { border-top: 3px solid var(--blue); } .today-grid .panel:nth-child(2) h2 .ico { color: var(--blue); }
.big-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.big-list li { padding-left: 4px; overflow-wrap: anywhere; } .big-list li::marker { color: var(--muted); font-weight: 700; }
.li-meta { display: block; color: var(--muted); font-size: 12.5px; }
.none-line { color: var(--muted); }
.mini { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 16px 0 10px; font-weight: 650; }
.mini:first-child { margin-top: 0; }
.move-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.move-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.mv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv { padding: 12px 14px; border-radius: 11px; background: var(--surface2); border-left: 4px solid var(--blue); }
.mv-noprog { border-left-color: var(--yellow); }
.mv-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.mv p { color: var(--text2); font-size: 14px; } .mv-meta { color: var(--muted) !important; font-size: 12.5px !important; overflow-wrap: anywhere; }
.chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-none { border: 1px dotted var(--slate); color: var(--muted); border-radius: 999px; padding: 3px 11px; font-size: 13px; }

/* ---------- Daily log ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
.toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
select, input, textarea { background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; width: 100%; text-transform: none; letter-spacing: 0; }
.toolbar select { min-width: 150px; width: auto; }
.scroll { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: 0 5px; width: 100%; }
.matrix th { color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: center; padding: 0 3px; }
.matrix th:first-child, .matrix td:first-child { text-align: left; min-width: 170px; padding-right: 12px; }
.matrix td { text-align: center; padding: 0 3px; } .matrix td:first-child a { color: var(--text); text-decoration: none; font-weight: 600; }
.day { margin-bottom: 24px; }
.day h3 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.day h3 span { color: var(--muted); font-size: 13px; font-weight: 500; }
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.entry { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.e-noprog { border-left-color: var(--yellow); } .e-restricted { border-left-style: dotted; border-left-color: var(--slate); }
.e-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.rev { color: var(--muted); font-size: 12px; border: 1px solid var(--line2); border-radius: 999px; padding: 0 8px; }
.e-sum { color: var(--text); margin-bottom: 8px; overflow-wrap: anywhere; }
.entry dl { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; font-size: 13px; color: var(--text2); }
.entry dt { color: var(--muted); } .entry dd { margin: 0; overflow-wrap: anywhere; } .k-block { color: #ff9a9a !important; }

/* ---------- Money ---------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--cyan); }
.f-outstanding { border-top-color: var(--orange); } .f-contract_value { border-top-color: var(--purple); }
.fig-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fig-label { color: var(--text2); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }
.fig-val { font-size: 46px; font-weight: 770; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig-src { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; min-width: 0; }
.pay-who { min-width: 0; } .pay-who .muted { overflow-wrap: anywhere; display: block; }
.fig { min-width: 0; }
.tile-status { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--line2); background: var(--surface2); border-radius: 8px; }
.tile-status .ts-k { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tile-status p { margin: 4px 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.tile-status .ts-src { display: block; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pay { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.pay:first-child { border-top: 0; } .pay.paid { opacity: .7; }
.pay-who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .pay-who .muted { font-size: 12px; }
.pay-amt { font-size: 20px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pay-due { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--text2); min-width: 110px; }
.cur-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); margin-bottom: 10px; }
.cur-tile b { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cur-tile small { color: var(--muted); width: 100%; }
table.plain { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.plain th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line2); }
table.plain td { padding: 10px; border-bottom: 1px solid var(--line); } .r { text-align: right !important; }

/* ---------- Scoreboard ---------- */
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 20px; }
.sc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; min-width: 0; }
.sc.restricted { border-style: dashed; background: transparent; }
.sc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.srow { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(80px, .8fr) minmax(120px, 1fr) 124px 134px; gap: 6px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.s-label { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 14px; }
.s-kind { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.s-val { font-size: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srow:not(.primary) .s-val { font-size: 20px; } .srow:not(.primary) .s-label { font-weight: 500; }
.s-delta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.s-bars { display: flex; flex-direction: column; gap: 2px; } .s-src { grid-column: 1 / -1; }
.sc .more { margin-top: 4px; }

/* ---------- admin forms ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { background: var(--surface); color: var(--text2); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.tabs button.on { background: var(--blue); border-color: var(--blue); color: #06142b; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
form.f { display: grid; gap: 14px; max-width: 720px; }
label { display: grid; gap: 5px; color: var(--muted); font-size: 12.5px; font-weight: 550; }
textarea { min-height: 84px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inl { display: flex; flex-direction: row; gap: 8px; align-items: center; }
input[type=checkbox] { width: auto; }
.mt24 { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
form.f button { background: var(--blue); color: #06142b; border: 0; padding: 11px 20px; border-radius: 10px; font-weight: 700; justify-self: start; }
.msg { display: none; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.msg.ok { display: block; border: 1px solid var(--blue); color: var(--blue-soft); } .msg.err { display: block; border: 1px solid var(--red); color: #ffb0b0; }
.small { font-size: 12.5px; } pre.small { color: var(--text2); overflow-x: auto; }
.login-box { max-width: 400px; margin: 14vh auto; padding: 0 16px; }
.login-box h1 { margin-bottom: 6px; } .login-box .muted { margin-bottom: 18px; }
main.login-box { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .today-grid { grid-template-columns: 1fr 1fr; } .scoreboard { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 20; inset: auto 0 0 0; height: auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); flex-direction: row; border-right: 0; border-top: 1px solid var(--line2); background: #0c1429; gap: 0; }
  .side .brand, .side-foot { display: none; }
  #nav { flex-direction: row; justify-content: space-around; gap: 0; }
  #nav a { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 11px; flex: 1; text-align: center; border-radius: 8px; }
  #nav a.active { box-shadow: none; background: var(--raise); }
  .mtop { display: flex; align-items: center; gap: 10px; padding: 12px 16px; position: sticky; top: 0; z-index: 10; background: rgba(10, 15, 30, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .mtop .who { margin-left: auto; color: var(--muted); font-size: 12px; }
  .mtop .ghost { padding: 6px 10px; font-size: 13px; }
  .content { padding: 20px 16px 108px; gap: 22px; }
  h1 { font-size: 25px; }
  .two-col, .two-col.wide-left, .move-cols, .today-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 14px 15px; } .kpi-value { font-size: 30px; }
  .tiles { grid-template-columns: 1fr; gap: 16px; }
  .tile { padding: 18px; } .tile-badges { max-width: 48%; }
  .panel { padding: 18px; } .toolbar select { min-width: 0; width: 100%; } .toolbar label { flex: 1 1 140px; }
  .fig-val { font-size: 38px; }
  .srow { grid-template-columns: 1fr 1fr; } .s-label { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .s-bars, .s-spark { grid-column: auto; } .scoreboard { gap: 14px; } .sc { padding: 16px; }
  .pay { grid-template-columns: 1fr auto; } .pay-due { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .entries { grid-template-columns: 1fr; } .two { grid-template-columns: 1fr; } .card { padding: 18px; }
  .matrix th:first-child, .matrix td:first-child { min-width: 128px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
}
@media (max-width: 380px) { .kpis { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .chip, #nav a, .ghost { transition: background .15s, color .15s; } }
.fig-val .cur { font-size: 15px; vertical-align: baseline; display: block; margin: 0 0 2px; }
.kpi-value .cur { font-size: 12px; vertical-align: baseline; margin-right: 5px; }
.pay-who { align-items: flex-start; }
.kpi { overflow: hidden; }
.k-pay .kpi-value { font-size: 30px; }
@media (max-width: 960px) { .k-pay { grid-column: 1 / -1; } .k-pay .kpi-value br { display: none; } }
@media (max-width: 960px) { .kpis.small { grid-template-columns: repeat(2, minmax(0, 1fr)); } .matrix td:first-child a { font-size: 13px; } .matrix th:first-child, .matrix td:first-child { min-width: 112px; } }
@media (max-width: 960px) { .k-week { grid-column: 1 / -1; } }

/* Clients view */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.chip { display: inline-block; padding: 6px 14px; border: 1px solid var(--line2); border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; background: var(--surface); }
.chip.on { color: var(--text); border-color: var(--accent); background: var(--surface2); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ccard h3 { margin: 0; font-size: 16px; }
.ccard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.c-kind { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.k-client { color: var(--good); border-color: var(--good); }
.k-prospect { color: var(--accent); border-color: var(--accent); }
.k-cold { color: var(--muted); }
.k-archived { color: var(--muted); opacity: .7; }
.cstage { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ctext { margin: 0 0 8px; font-size: 13px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.cnext { font-size: 12.5px; color: var(--text); background: var(--surface2); border-left: 2px solid var(--accent); border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; }
.snap-exp summary { cursor: pointer; font-size: 13px; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; list-style: none; }
.snap-exp summary::-webkit-details-marker { display: none; }
.snap-exp summary .more { color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.snap-exp[open] summary { margin-bottom: 6px; }
.snap-exp p { margin: 0 0 4px; }
@media (max-width: 640px) { .cgrid { grid-template-columns: 1fr; } }