/* ══════════════════════════════════════════════════════
   JM DEMO — client dashboard demo (static, example data only)
   Same design language as the HQ Release / Client Portal videos.
   ══════════════════════════════════════════════════════ */
:root {
  --bg: #08080d; --bg2: #0c0c13; --panel: #11111a; --card: #151520; --card2: #1b1b28; --input: #0b0b12;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --txt: #f0f4f8; --sub: #c9d3dd; --mu: #8d9aab; --mu2: #5d6878;
  --or: #F86B25; --or2: #ff9a5a; --green: #22c55e; --amber: #f5b84b; --red: #ef4444; --blue: #3b82f6;
  --r: 22px; --r2: 16px; --r3: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 600px at 12% -10%, rgba(248,107,37,.16), transparent 60%),
              radial-gradient(800px 700px at 100% 110%, rgba(91,69,255,.14), transparent 60%); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hidden { display: none !important; }

/* ── buttons / inputs ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px;
  border: 1px solid var(--line2); background: rgba(255,255,255,.04); font-weight: 600; font-size: 15px; transition: background .15s, border-color .15s, transform .08s; }
.btn:hover { border-color: rgba(255,255,255,.28); }
.btn:active { transform: scale(.98); }
.btn-p { background: var(--or); border-color: var(--or); color: #1a0b03; }
.btn-p:hover { background: #ff7a38; border-color: #ff7a38; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; }
.btn:disabled { opacity: .55; cursor: default; }
.inp { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; background: var(--input); border: 1.5px solid var(--line2); font-size: 16px; outline: none; transition: border-color .15s; }
.inp:focus { border-color: var(--or); }
textarea.inp { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.45; }
.lbl { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mu); margin: 0 0 9px; }

/* ── gate ── */
.gate { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.gate-card { width: 100%; max-width: 440px; padding: 40px 36px 34px; border-radius: 28px; background: linear-gradient(180deg, rgba(26,26,40,.92), rgba(14,14,24,.95));
  border: 1px solid var(--line2); box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); text-align: center; }
.gate-logo { height: 26px; display: block; margin: 0 auto 30px; }
.gate h1 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 800; }
.gate p.sub { margin: 0 0 26px; color: var(--sub); font-size: 15.5px; line-height: 1.45; }
.gate .row { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.gate .msg { min-height: 22px; margin-top: 14px; font-size: 14px; line-height: 1.4; }
.gate .msg.err { color: #ff8a8a; } .gate .msg.ok { color: #7ee2a8; }
.otp { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.otp input { width: 52px; height: 62px; text-align: center; font-size: 26px; font-weight: 700; border-radius: 14px; background: var(--input); border: 1.5px solid var(--line2); outline: none; }
.otp input:focus, .otp input.filled { border-color: var(--or); }
.gate .links { margin-top: 16px; font-size: 13.5px; color: var(--mu); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.gate .links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); cursor: pointer; }
.gate .fine { margin-top: 26px; font-size: 11px; color: var(--mu2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── app shell ── */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(12,12,19,.7); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 6px; }
.side .logo { height: 19px; margin: 6px 10px 22px; }
.acct { margin: 0 4px 18px; }
.acct .lbl { margin-left: 6px; }
.acct .sel { font-size: 13.5px; }
.sel { width: 100%; height: 44px; padding: 0 36px 0 14px; border-radius: 12px; background: var(--input); border: 1px solid var(--line2); font-size: 14px; font-weight: 600; outline: none;
  -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mu) 50%), linear-gradient(135deg, var(--mu) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.nav a { display: flex; align-items: center; gap: 13px; height: 46px; padding: 0 14px; border-radius: 13px; color: var(--sub); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a svg { width: 21px; height: 21px; flex: none; opacity: .85; }
.nav a:hover { background: rgba(255,255,255,.04); }
.nav a.on { background: linear-gradient(90deg, rgba(248,107,37,.22), rgba(248,107,37,.04)); color: #fff; box-shadow: inset 3px 0 0 var(--or); }
.nav a .ct { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--mu); }
.side .spacer { flex: 1; }
.side .cta { display: block; margin: 0 4px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(248,107,37,.22), rgba(91,69,255,.14)); border: 1px solid rgba(248,107,37,.45); text-decoration: none; }
.side .cta b { display: block; font-size: 15px; margin-bottom: 4px; } .side .cta span { font-size: 13px; color: var(--sub); line-height: 1.4; }
.side .out { margin: 12px 10px 0; font-size: 12.5px; color: var(--mu); background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.main { min-width: 0; padding: 30px 36px 80px; max-width: 1240px; width: 100%; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.top h1 { margin: 0; font-size: 36px; letter-spacing: -.025em; font-weight: 800; line-height: 1.05; }
.top .sub { margin-top: 10px; font-size: 12px; color: var(--mu); }
.demo-pill { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mu); padding: 6px 10px; border: 1px solid var(--line2); border-radius: 8px; }
.top .acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: -6px 0 24px; overflow-x: auto; scrollbar-width: none; }
.ptabs a { padding: 12px 2px 13px; font-size: 14.5px; font-weight: 600; color: var(--mu); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.ptabs a:hover { color: var(--sub); }
.ptabs a.on { color: var(--txt); border-color: var(--or); }
.ptabs a .n { font-family: var(--mono); font-size: 11px; color: var(--mu); margin-left: 7px; }
.link { color: #7fb0ff; cursor: pointer; } .link:hover { text-decoration: underline; } .link.mu { color: var(--mu); }
.mu { color: var(--mu); } .sm { font-size: 12px; }
.nodata { padding: 30px 10px; text-align: center; color: var(--mu); font-size: 14px; }
.mobilebar { display: none; }
.tabbar { display: none; }

/* ── cards / tiles ── */
.card { background: linear-gradient(180deg, rgba(26,26,40,.88), rgba(14,14,24,.92)); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.grid { display: grid; gap: 18px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { padding: 22px 24px; border-radius: 20px; }
.tile .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.tile .v { font-size: 38px; font-weight: 800; letter-spacing: -.02em; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g5 .tile .v { font-size: 30px; }
.tile .v.sm { font-size: 28px; }
.tile .s { font-size: 13.5px; color: var(--mu); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up { color: var(--green); font-weight: 700; } .down { color: #ff8a8a; font-weight: 700; }
.tile .chg { font-size: 14px; font-weight: 700; margin-left: 8px; letter-spacing: 0; }
.tile.st2 { padding: 20px 22px; } .tile.st2 .v { font-size: 26px; }
.slbl { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 30px 2px 12px; }
.slbl span { color: var(--mu); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; }

/* ── alerts (leads up / down vs the prior period) ── */
.alert { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; font-size: 14.5px; border: 1px solid; margin-bottom: 14px; color: var(--sub); }
.alert b { color: var(--txt); }
.alert .ic { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
.alert.good { background: rgba(45,212,167,.07); border-color: rgba(45,212,167,.3); } .alert.good .ic { background: var(--green); color: #03150f; }
.alert.warn { background: rgba(255,176,46,.08); border-color: rgba(255,176,46,.32); } .alert.warn .ic { background: #ffb02e; color: #1a1200; }

/* ── date bar + picker panel ── */
.datebar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.datebar .note { color: var(--mu); font-size: 13px; } .datebar .right { margin-left: auto; font-size: 12.5px; }
.datebox { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-radius: 12px; background: var(--input); border: 1px solid var(--line2); font-weight: 700; font-size: 14.5px; cursor: pointer; user-select: none; }
.datebox:hover { border-color: rgba(255,255,255,.28); } .datebox .car { color: var(--mu); font-size: 9px; }
.dnav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; font-size: 19px; line-height: 1; color: var(--txt); display: inline-flex; align-items: center; justify-content: center; }
.dnav:hover { border-color: rgba(255,255,255,.28); } .dnav:disabled { opacity: .35; cursor: default; }
.dpanel { position: absolute; top: 50px; left: 0; z-index: 40; display: flex; background: #12121c; border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.dpresets { width: 210px; border-right: 1px solid var(--line); padding: 8px 0; }
.dpreset { padding: 10px 18px; font-size: 14px; cursor: pointer; color: var(--sub); }
.dpreset:hover { background: rgba(255,255,255,.04); } .dpreset.on { background: rgba(248,107,37,.14); color: var(--or2); font-weight: 700; }
.dpanel .cmp { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 18px 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--mu); text-transform: uppercase; }
.dcal { padding: 16px 18px; width: 320px; }
.dcal .se { font-size: 13px; color: var(--mu); margin-bottom: 12px; } .dcal .se b { color: var(--txt); }
.dcal .mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: 14.5px; }
.dcalgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 13px; }
.dcalgrid .dw { color: var(--mu); font-size: 11px; padding: 4px 0; }
.dday { padding: 8px 0; border-radius: 8px; cursor: pointer; }
.dday:hover { background: rgba(255,255,255,.07); } .dday.inr { background: rgba(248,107,37,.16); border-radius: 0; }
.dday.edge { background: var(--or); color: #1a0b03; font-weight: 800; } .dday.off { opacity: .28; cursor: default; } .dday.off:hover { background: none; }
.dcal .acts2 { display: flex; justify-content: flex-end; gap: 20px; margin-top: 12px; font-size: 14px; }

/* ── budget line ── */
.bline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 18px; border-radius: 18px; }
.bline .bl { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.bline .bl i { width: 9px; height: 9px; border-radius: 50%; background: var(--or); }
.bline .amt { font-size: 18px; font-weight: 800; white-space: nowrap; } .bline .amt span { font-size: 13px; color: var(--mu); font-weight: 500; }
.bline .trk { flex: 1; min-width: 140px; position: relative; height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); }
.bline .trk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--or2), var(--or)); }
.bline .trk b { position: absolute; top: -3px; width: 2px; height: 14px; background: #fff; opacity: .8; }
.bline .lab { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bline .bsub { width: 100%; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--mu); }

/* ── chart cards ── */
.pc { padding: 22px 24px; margin-top: 18px; border-radius: 20px; }
.pc .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pc .phr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pc h3 { margin: 0; font-size: 18px; } .pc .ps, .form .ps { color: var(--mu); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }
.pc .sel { width: auto; height: 38px; font-size: 13.5px; }
.lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--sub); } .lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chartw { position: relative; } .chartw svg { width: 100%; display: block; overflow: visible; }
.chartw.donut { flex: none; }
.ctip { position: absolute; pointer-events: none; display: none; background: #1d1d2b; border: 1px solid var(--line2); font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 9px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 5; }
.g2b { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-top: 18px; }
.g2b .pc { margin-top: 0; }
.mixw { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.mixt { flex: 1; min-width: 240px; }
.mixt .r { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mixt .r:last-child { border-bottom: 0; }
.mixt .r.h { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); padding: 6px 0; }
.mixt .r i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mixt .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixt .c1 { width: 46px; text-align: right; } .mixt .c2 { width: 40px; text-align: right; color: var(--mu); } .mixt .c3 { width: 80px; text-align: right; color: var(--sub); }

/* ── modals ── */
.mod { width: 100%; max-width: 460px; padding: 26px 28px; } .mod.wide { max-width: 720px; }
.mod h3 { margin: 0 0 6px; font-size: 21px; } .mod .sub { color: var(--mu); font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
.mod .lbl { margin-top: 16px; } .mod .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.mod .big { font-size: 24px; font-weight: 800; } .mod .big span { font-size: 13px; color: var(--mu); font-weight: 500; }
.two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yt { display: flex; gap: 8px; margin-top: 8px; } .yt button { flex: 0 0 90px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; color: var(--sub); font-weight: 600; }
.yt button.on { border-color: var(--or); color: var(--or2); background: rgba(248,107,37,.12); }
.seg { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 14px; color: var(--mu); }
.seg button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--sub); font-size: 12.5px; }
.seg button.on { border-color: var(--or); color: var(--or2); background: rgba(248,107,37,.12); }
.htab { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.htab th { text-align: right; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--mu); padding: 8px; border-bottom: 1px solid var(--line); text-transform: uppercase; white-space: nowrap; }
.htab td { text-align: right; padding: 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.htab th:first-child, .htab td:first-child { text-align: left; }
.htab.lt th, .htab.lt td { text-align: left; } .htab.lt td { white-space: nowrap; }
.sec { margin: 34px 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.sec .note { font-size: 13px; color: var(--mu); }
.bud { padding: 24px 26px; }
.bud .head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.bud .amt { font-size: 30px; font-weight: 800; } .bud .of { color: var(--mu); font-size: 16px; }
.bar { position: relative; height: 14px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 18px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--or2), var(--or)); }
.bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .65; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ch { padding: 22px 24px; }
.ch .t { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ch .t b { font-size: 18px; } .ch .t span { font-size: 13px; color: var(--mu); }
.ch .cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ch .cells .v { font-size: 26px; font-weight: 800; margin-top: 8px; }
.ch .cells .s { font-size: 12.5px; color: var(--mu); margin-top: 6px; }
.chart { padding: 22px 24px; }
.chart svg { width: 100%; height: 240px; display: block; margin-top: 16px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--sub); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.mix { padding: 22px 24px; }
.mix .donut { display: flex; justify-content: center; margin: 14px 0 6px; }
.mixrow { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.mixrow:last-child { border-bottom: 0; }
.mixrow i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.mixrow .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixrow .c { width: 34px; text-align: right; color: var(--sub); } .mixrow .p { width: 44px; text-align: right; color: var(--mu); font-size: 13px; }
.mixrow .cpl { width: 78px; text-align: right; font-weight: 700; }
.free { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--green); }

/* ── leads ── */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; font-weight: 600; font-size: 14px; color: var(--sub); display: inline-flex; align-items: center; gap: 8px; }
.tab .n { font-family: var(--mono); font-size: 12px; color: var(--mu); }
.tab.on { border-color: var(--or); background: rgba(248,107,37,.14); color: #fff; }
.tools { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; margin-bottom: 16px; border-radius: 18px; }
.fbar .inp { height: 42px; font-size: 14.5px; flex: 1 1 220px; max-width: 320px; }
.fbar .sel { width: auto; height: 42px; font-size: 13.5px; flex: 0 0 auto; min-width: 132px; }
.fbar .btn-p { height: 42px; }
.vt { display: flex; margin-left: auto; border: 1px solid var(--line2); border-radius: 11px; overflow: hidden; }
.vt button { height: 40px; padding: 0 15px; background: transparent; border: 0; color: var(--mu); font-weight: 600; font-size: 13.5px; }
.vt button.on { background: rgba(248,107,37,.14); color: var(--or2); }
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.lcard { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; border-radius: 20px; transition: border-color .12s; }
.lcard:hover { border-color: rgba(248,107,37,.55); } .lcard.flash { border-color: var(--or); }
.lcard .t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lcard .nm2 { font-weight: 700; font-size: 16.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard .meta2 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mu); }
.lcard .ms2 { color: var(--sub); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard .dt2 { font-size: 12.5px; color: var(--mu); }
.bdgs { display: flex; gap: 5px; flex-wrap: wrap; }
.bdg { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line2); text-transform: uppercase; white-space: nowrap; color: var(--mu); }
.bdg.appt { color: #c084fc; border-color: rgba(192,132,252,.5); background: rgba(192,132,252,.1); }
.bdg.spam { color: #f87171; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.08); }
.bdg.test { color: #a78bfa; border-color: rgba(167,139,250,.45); }
.bdg.mtd { color: #2dd4bf; border-color: rgba(45,212,191,.6); } .bdg.auto { color: var(--mu); }
.bdg.open { color: var(--or2); border-color: rgba(248,107,37,.6); } .bdg.ok { color: var(--green); border-color: rgba(34,197,94,.55); }
.tools .inp { height: 44px; font-size: 15px; flex: 1 1 260px; max-width: 420px; }
.tools .sel { width: auto; flex: 0 0 auto; min-width: 170px; }
.banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.4); margin-bottom: 16px; font-size: 15px; }
.banner b { font-weight: 700; } .banner span { color: var(--sub); }
.banner .go { margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line2); background: transparent; }
.banner.done { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.45); }
.ltable { padding: 10px 14px 14px; container: dl / inline-size; }
.lhead, .lrow { display: grid; grid-template-columns: 150px minmax(110px, 1.25fr) 156px minmax(0, 1.15fr) 128px minmax(0, 1fr) minmax(0, 1.3fr) 142px; gap: 12px; align-items: center; }
.lhead { padding: 14px 12px 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.lhead > *, .lrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow > .c-st { overflow: visible; }
.lrow { min-height: 62px; padding: 8px 12px; border-radius: 14px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .12s; }
.lrow:hover { background: rgba(255,255,255,.04); }
.lrow.flash { background: rgba(248,107,37,.14); }
.lrow .nm { display: flex; flex-direction: column; gap: 4px; }
.lrow .nmt { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .meta { display: none; }
.lrow .src { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--sub); white-space: nowrap; overflow: hidden; }
.lrow .src svg { width: 19px; height: 19px; flex: none; }
.lrow .ph, .lrow .dt, .lrow .ad { font-size: 14px; color: var(--sub); white-space: nowrap; }
.lrow .em { font-size: 14px; color: var(--mu); }
.lrow .dt { font-size: 13.5px; }
.lrow .ft2 { display: none; }
.lrow .ms { font-size: 14px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { height: 32px; padding: 0 30px 0 30px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 650; font-size: 13.5px; background-color: transparent; outline: none; cursor: pointer; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  background-image: radial-gradient(circle at 15px 50%, currentColor 0 4px, transparent 4.6px), linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 0 0, calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 100% 100%, 5px 5px, 5px 5px; background-repeat: no-repeat; }
.st option { color: var(--txt); background: #15151f; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--mu); }
.foot { margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--mu2); }
.empty { padding: 50px 20px; text-align: center; color: var(--mu); }

/* ── lead window ── */
.ov { position: fixed; inset: 0; z-index: 50; background: rgba(4,4,8,.66); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.lw { width: 100%; max-width: 760px; padding: 24px 30px 26px; position: relative; }
.lwnav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.lwnav .ct { font-family: var(--mono); font-size: 12px; color: var(--mu); letter-spacing: .12em; margin-left: 4px; }
.lwnav .x { position: static; margin-left: auto; }
.lwmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; color: var(--mu); font-size: 14.5px; }
.sec2 { margin-top: 18px; padding: 8px 20px 14px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.frow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; }
.frow.top { align-items: start; } .frow.top .k { padding-top: 12px; }
.frow > .k { color: var(--mu); font-size: 14px; }
.frow textarea.inp { min-height: 84px; font-size: 15px; }
.frow .money { display: flex; align-items: center; gap: 8px; color: var(--mu); } .frow .money .inp { height: 44px; font-size: 15px; }
.frow .dtin { height: 42px; width: auto; font-size: 14.5px; color-scheme: dark; }
.appt-on { color: #c084fc; font-weight: 700; }
.facts2 .frow b { font-weight: 600; }
.qp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.qp .k2 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--mu); text-transform: uppercase; margin-right: 4px; }
.qp button { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid; background: transparent; font-size: 13px; font-weight: 650; }
.qp button.hit { background: currentColor; } .qp button.hit { color: #fff !important; }
.fd { margin-top: 18px; }
.fd .h { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mu); text-transform: uppercase; margin-bottom: 6px; }
.fd .q { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.fd .q span:first-child { color: var(--mu); }
.foot2 { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.lw .hd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-right: 40px; }
.lw h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; font-weight: 800; }
.srcpill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 650; font-size: 13.5px; }
.srcpill svg { width: 15px; height: 15px; }
.lw .rcv { margin-left: auto; color: var(--mu); font-size: 15px; }
.lw .x { position: absolute; top: 22px; right: 22px; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line2); background: transparent; color: var(--mu); font-size: 20px; line-height: 1; }
.lw .two { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; margin-top: 28px; }
.lw .hint { font-size: 13px; color: var(--mu); margin-top: 8px; }
.lw .notes { margin-top: 22px; }
.quick { display: flex; gap: 10px; flex-wrap: wrap; }
.quick button { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); font-weight: 600; font-size: 15px; }
.quick button:hover { border-color: var(--or); }
.quick button.hit { background: var(--green); border-color: var(--green); color: #03170a; }
.lw .facts { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.lw .facts div div { font-size: 16px; font-weight: 600; margin-top: 4px; }
.lw .msgbox { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--sub); line-height: 1.5; font-size: 15px; }
.lw .navs { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.lw .navs .ct { font-family: var(--mono); font-size: 12px; color: var(--mu); letter-spacing: .12em; }
.lw .navs .grow { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80; padding: 14px 20px; border-radius: 14px; background: #1d1d2b; border: 1px solid var(--line2);
  font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 10px; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--green); }

/* ── reports / requests / settings ── */
.intro { padding: 20px 24px; margin-bottom: 16px; } .intro b { font-size: 17px; } .intro p { margin: 6px 0 0; color: var(--mu); line-height: 1.5; font-size: 14.5px; } .intro strong { color: var(--sub); }
.form > b { font-size: 17px; }
.rgen { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .rgen > div { flex: 0 0 180px; } .rgen .grow { flex: 1 1 200px; } .rgen .btn { height: 52px; }
.rcard { padding: 18px 22px; cursor: pointer; margin-top: 12px; border-radius: 20px; transition: border-color .12s; }
.rcard:hover { border-color: rgba(248,107,37,.6); }
.rcard .t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.rcard .lb { font-weight: 700; font-size: 16.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .rcard .open { color: var(--or); font-size: 13px; font-weight: 600; }
.rcard .dr { color: var(--mu); font-size: 13px; margin-top: 4px; }
.rcard .del { height: 30px; font-size: 12.5px; color: var(--mu); }
.rcard .nums { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 10px; } .rcard .nums b { font-size: 21px; font-weight: 800; } .rcard .nums span { font-size: 12.5px; color: var(--mu); margin-left: 5px; }
.chip2 { display: inline-block; background: rgba(255,255,255,.06); border-radius: 99px; padding: 4px 11px; margin: 0 6px 6px 0; font-size: 12.5px; color: var(--sub); } .chip2 b { color: var(--txt); }
.rview { width: 100%; max-width: 1120px; padding: 22px 24px 28px; }
.rview .bar3 { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.cover { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 20px; background: linear-gradient(135deg, #F26522 0%, #d24e18 52%, #7a2d10 100%); padding: 32px 30px; color: #fff; }
.cover::before { content: ''; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 20px 20px; }
.cover > * { position: relative; } .cover .k { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .92; }
.cover h2 { font-size: 34px; margin: 10px 0 4px; letter-spacing: -.02em; } .cover div:last-child { opacity: .93; font-size: 16px; }
.rtab { padding: 6px 16px 10px; }
.set { padding: 20px 24px; max-width: 680px; margin-bottom: 16px; } .set h3 { margin: 0 0 6px; font-size: 17px; }
.set .r { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .set .r:last-child { border-bottom: 0; }
.set .r span:first-child { color: var(--mu); } .set .r span:last-child { text-align: right; }
.set-note { color: var(--mu); font-size: 14px; margin-top: 4px; }
.rep { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.rep .t { display: flex; align-items: center; gap: 12px; } .rep .t b { font-size: 18px; } .rep .t a { margin-left: auto; color: var(--or); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.form { padding: 22px 24px; display: grid; gap: 12px; margin-bottom: 8px; }
.reqs { display: grid; gap: 14px; }
.req { padding: 20px 22px; margin-top: 12px; border-color: rgba(248,107,37,.55); } .req.done { border-color: var(--line2); opacity: .78; }
.req .t { display: flex; align-items: center; gap: 10px; } .req .t b { font-size: 17px; }
.req p { margin: 10px 0 0; color: var(--sub); line-height: 1.45; font-size: 15px; white-space: pre-wrap; }
.req .m { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--mu); }

/* ── tablet: the lead table sizes off ITS OWN width (no overlapping headings) ── */
@media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── phone ── */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 12px 16px; background: rgba(8,8,13,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .mobilebar img { height: 16px; }
  .mobilebar .sel { height: 38px; font-size: 13.5px; margin-left: auto; max-width: 62%; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: rgba(10,10,16,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; color: var(--mu); text-decoration: none; font-size: 11px; font-weight: 600; }
  .tabbar a svg { width: 22px; height: 22px; }
  .ptabs { display: none; }
  .top .acts .btn { height: 36px; }
  .datebar .right, .datebar .note { display: none; }
  .datebox { flex: 1 1 0; min-width: 0; justify-content: space-between; white-space: nowrap; font-size: 14px; padding: 0 12px; }
  .datebox span:first-child { overflow: hidden; text-overflow: ellipsis; }
  #show30 { flex-basis: 100%; font-size: 13.5px; }
  .tile .v[style*="font-size:22px"] { font-size: 18px !important; white-space: normal; line-height: 1.25 !important; }
  .dpanel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 60; border-radius: 18px 18px 0 0; flex-direction: column; max-height: 86vh; overflow-y: auto; }
  .dpresets { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .dpreset { padding: 11px 12px; border-radius: 9px; } .dpanel .cmp { grid-column: 1 / -1; }
  .dcal { width: auto; } .dday { padding: 10px 0; }
  .bline { padding: 16px; gap: 10px 14px; } .bline .trk { order: 5; flex-basis: 100%; }
  .pc { padding: 18px 16px; } .g2b { grid-template-columns: minmax(0, 1fr); }
  .mixw { justify-content: center; } .mixt { min-width: 100%; }
  .fbar { padding: 10px; } .fbar .inp { max-width: none; flex-basis: 100%; } .fbar .sel { flex: 1 1 40%; min-width: 0; } .vt { margin-left: 0; }
  .lw .lwnav { margin-bottom: 10px; } .frow { grid-template-columns: 82px minmax(0, 1fr); } .fd .q { grid-template-columns: 120px minmax(0, 1fr); }
  .two2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rgen > div, .rgen .grow { flex: 1 1 100%; } .rgen .btn { width: 100%; }
  .rcard .nums { gap: 18px; } .rview { border-radius: 0; min-height: 100%; padding: 18px 14px 120px; max-width: none; }
  .mod { border-radius: 0; min-height: 100%; max-width: none; padding: 24px 18px 120px; } .mod.wide { max-width: none; }
  .cover { padding: 24px 20px; } .cover h2 { font-size: 26px; }
  .tabbar a.on { color: var(--or); }
  .main { padding: 22px 16px 110px; }
  .top h1 { font-size: 28px; }
  .g4, .g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .g5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .grid.stack { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 18px; } .tile .v, .g5 .tile .v { font-size: 26px; } .tile .v.sm { font-size: 20px; line-height: 1.25; white-space: normal; }
  .tile .s { white-space: normal; line-height: 1.35; }
  .ch .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ch .cells .v { font-size: 21px; }
  .lhead { display: none; }
  .ltable { padding: 0; background: none; border: 0; box-shadow: none; display: grid; gap: 12px; }
  .lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm st" "meta meta" "ms ms" "dt dt"; gap: 6px 10px; padding: 18px 18px; min-height: 0;
    border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
  .lrow .nm { grid-area: nm; } .lrow .nmt { font-size: 17px; } .lrow .c-st { grid-area: st; }
  .lrow .meta { grid-area: meta; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--mu); min-width: 0; }
  .lrow > * { overflow: visible; white-space: normal; }
  .lrow .src, .lrow .ph, .lrow .em, .lrow .ad, .lrow .dt { display: none; }
  .lrow .ft2 { grid-area: dt; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--mu); }
  .lrow .ms { grid-area: ms; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: var(--sub); line-height: 1.4; }

  .st { height: 30px; font-size: 13px; }
  .tools .sel { flex: 1 1 auto; }
  .banner { font-size: 14px; } .banner span { display: none; }
  .ov { padding: 0; align-items: stretch; }
  .lw { border-radius: 0; min-height: 100%; padding: 26px 20px 120px; max-width: none; }
  .lw h2 { font-size: 28px; }
  .lw .rcv { margin-left: 0; width: 100%; font-size: 14px; }
  .lw .two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lw .facts { gap: 22px; }
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, .app, .gate, .toast, .ov:not(.rep-ov) { display: none !important; }
  .ov { position: static; background: var(--bg); padding: 0; backdrop-filter: none; overflow: visible; }
  .rview { box-shadow: none; max-width: none; border: 0; }
  .rview .bar3, .rview .metricSel { display: none; }
  .card { break-inside: avoid; }
}