/* /discord-bots/server-analytics (sap-). Loaded after builtin_services.css
   (pa- tokens, hero type, buttons, mock window bar, closing band) and
   all_in_one.css (aio- sections, fact tiles, perks, steps, plans, FAQ,
   related links), both unchanged. Only what is new to this page lives here. */

.sap { --sap-good: #34d399; --sap-mid: #f6c453; --sap-low: #f87171; --sap-msg: #3b82f6; --sap-voice: #1793c6; --sap-drop: #ff6b6b; }

.sap-k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted); }
.sap-mono { font-family: var(--mono); }
.sap-good { color: var(--sap-good); }
.sap-hash { color: var(--yb-muted); font-weight: 700; }

/* A mock window: the same frame as the pa- mocks. */
.sap-win { margin: 0; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.28); min-width: 0; }

/* ---- Hero stage: the analyst behind the Overview tab ---- */
.sap-stage { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 520px; padding-top: 150px; }
.sap-bot { position: absolute; top: -30px; right: -22px; width: 270px; height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.42)); }
.sap-dash { position: relative; z-index: 1; background: var(--yb-void); border: 1px solid var(--yb-border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,0.3); }
.sap-dash-body { padding: 0.8rem 0.85rem 0.9rem; display: grid; gap: 0.6rem; }
.sap-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.sap-kpi { position: relative; display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 9px; padding: 0.5rem 0.65rem 0.55rem; overflow: hidden; }
.sap-kpi-k { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-kpi-v { font-family: var(--disp); font-weight: 700; font-size: 1.28rem; line-height: 1.1; color: var(--yb-text); }
.sap-kpi-v small { font-size: 0.7em; font-weight: 500; color: var(--yb-muted); }
.sap-kpi-sub { font-size: 0.66rem; line-height: 1.35; color: var(--yb-muted); }
.sap-kpi-hot .sap-kpi-v { color: var(--sap-low); }
.sap-spark { position: absolute; right: 0.55rem; bottom: 0.55rem; width: 44%; height: 22px; overflow: visible; }
.sap-spark path { fill: none; stroke: var(--sap-msg); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sap-kpi:nth-child(2) .sap-spark path { stroke: var(--sap-voice); }
.sap-insight { font-size: 0.74rem; line-height: 1.45; color: var(--sap-good); background: rgba(52,211,153,0.07); border: 1px solid rgba(52,211,153,0.24); border-radius: 8px; padding: 0.42rem 0.6rem; }
.sap-insight b { font-weight: 700; }
.sap-u { text-decoration: underline; text-underline-offset: 2px; }
.sap-chart { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 9px; padding: 0.5rem 0.6rem 0.55rem; }
.sap-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.sap-chart-t { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-text); }
.sap-legend { display: flex; gap: 0.6rem; font-size: 0.64rem; color: var(--yb-muted); }
.sap-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sap-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sap-chart-frame { position: relative; height: 104px; }
.sap-chart-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sap-grid-line { stroke: var(--yb-border); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; fill: none; }
.sap-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sap-line-msg { stroke: var(--sap-msg); }
.sap-line-voice { stroke: var(--sap-voice); stroke-dasharray: 5 4; opacity: 0.9; }
.sap-mark-line { stroke: var(--yb-gold-light); stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sap-mark-flag { position: absolute; top: -4px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.04em; white-space: nowrap; color: #1b1300; background: var(--yb-gold-light); border-radius: 4px; padding: 2px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

.sap-cohort { position: relative; z-index: 2; width: 72%; margin: -18px auto 0 -14px; background: var(--yb-abyss); border: 1px solid var(--yb-gold-dim); border-radius: 12px; padding: 0.7rem 0.9rem 0.75rem; display: grid; gap: 0.45rem; box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 18px 46px rgba(37,99,235,0.2); transform: rotate(-1.2deg); }
.sap-cohort-bar { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted); }
.sap-cohort-week { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--yb-text); }
.sap-cohort-week b { font-family: var(--mono); font-weight: 600; }
.sap-cohort-n { color: var(--yb-muted); font-size: 0.76rem; }
.sap-cohort-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.sap-cc { display: flex; flex-direction: column; gap: 0.15rem; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-radius: 7px; padding: 0.35rem 0.5rem; }
.sap-pct { font-weight: 700; font-size: 0.86rem; }
.sap-pct-good { color: var(--sap-good); }
.sap-pct-mid { color: var(--sap-mid); }
.sap-pct-low { color: var(--sap-low); }
.sap-pending { font-size: 0.72rem; color: var(--yb-muted2); }

/* ---- 01 The tab map ---- */
.sap-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; align-items: stretch; }
.sap-group { --g: var(--yb-cyan); position: relative; display: flex; flex-direction: column; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1.05rem 1.05rem 0.9rem; overflow: hidden; }
.sap-group::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--g); }
.sap-group-1 { --g: #3b82f6; }
.sap-group-2 { --g: #a78bfa; }
.sap-group-3 { --g: #34d399; }
.sap-group-4 { --g: #f6c453; }
.sap-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.sap-group-name { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g); }
.sap-group-n { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yb-muted2); }
.sap-group-q { font-family: var(--disp); font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: var(--yb-text); margin: 0.45rem 0 0.7rem; }
.sap-tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sap-tabs li { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.55rem 0; border-top: 1px dashed rgba(96,128,210,0.18); }
.sap-tab-k { font-weight: 600; font-size: 0.9rem; color: var(--yb-text); }
.sap-tab-x { font-size: 0.8rem; line-height: 1.45; color: var(--yb-muted); }

/* ---- 02 Retention: cohort table and funnel ---- */
.sap-split { align-items: start; }
.sap-table-wrap { overflow-x: auto; }
.sap-cohorts { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sap-cohorts th, .sap-cohorts td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--yb-border); white-space: nowrap; }
.sap-cohorts thead th { font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted); background: var(--yb-overlay-soft); }
.sap-cohorts tbody th { font-size: 0.78rem; font-weight: 500; color: var(--yb-text); }
.sap-cohorts td { color: var(--yb-text); }
.sap-cohorts tbody tr:last-child th, .sap-cohorts tbody tr:last-child td { border-bottom: 0; }
.sap-cnt { font-size: 0.72rem; color: var(--yb-muted); }

.sap-funnel { margin: 1.6rem 0 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.2rem 0.95rem; }
.sap-funnel-head { margin-bottom: 0.8rem; }
.sap-funnel-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; align-items: end; }
.sap-funnel-bars li { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sap-fb-col { position: relative; height: 120px; border-radius: 8px; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); overflow: hidden; }
.sap-fb-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: linear-gradient(180deg, rgba(59,130,246,0.85), rgba(23,147,198,0.55)); }
.sap-funnel-bars li:last-child .sap-fb-fill { background: linear-gradient(180deg, rgba(52,211,153,0.85), rgba(52,211,153,0.45)); }
.sap-fb-v { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; color: var(--yb-text); }
.sap-fb-v small { font-family: var(--mono); font-size: 0.62rem; font-weight: 500; color: var(--yb-muted); margin-left: 0.2rem; }
.sap-fb-k { font-size: 0.78rem; line-height: 1.35; color: var(--yb-muted); }
.sap-funnel-cap { font-size: 0.8rem; color: var(--yb-muted); margin-top: 0.85rem; }

/* ---- 03 Activity: heatmap and channel verdicts ---- */
.sap-act { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-bottom: 1.2rem; }
.sap-heat-body { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.8rem; }
.sap-heat-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sap-heat-kpis > div { display: flex; flex-direction: column; gap: 0.12rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 9px; padding: 0.5rem 0.65rem; min-width: 0; }
.sap-heat-kpis .sap-kpi-v { font-size: 1.12rem; }
.sap-grid { display: grid; grid-template-columns: 2rem repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.sap-grid-day { font-family: var(--mono); font-size: 0.56rem; color: var(--yb-muted); letter-spacing: 0.06em; }
.sap-cell { aspect-ratio: 1; border-radius: 2px; background: hsl(217 91% 60% / calc(0.1 + var(--a) * 0.86)); }
.sap-cell-peak { outline: 2px solid var(--yb-gold-light); outline-offset: 0; position: relative; z-index: 1; }
.sap-grid-hr { font-family: var(--mono); font-size: 0.52rem; color: var(--yb-muted2); white-space: nowrap; overflow: visible; }

.sap-chan-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.sap-chan-list li { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr) 3.6rem 2.8rem 6.6rem; align-items: center; gap: 0.35rem 0.6rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--yb-border); font-size: 0.84rem; }
.sap-chan-list li:last-child { border-bottom: 0; }
.sap-chan-name { color: var(--yb-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-chan-n { font-family: var(--mono); font-size: 0.74rem; color: var(--yb-muted); text-align: right; }
.sap-chan-chg { font-family: var(--mono); font-size: 0.7rem; color: var(--yb-muted); text-align: right; }
.sap-verdict { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--yb-border2); color: var(--yb-muted); white-space: nowrap; justify-self: end; }
.sap-v-growing { color: var(--sap-good); border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.1); }
.sap-v-declining { color: var(--sap-low); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.08); }
.sap-v-new { color: var(--yb-cyan); border-color: var(--yb-cyan-dim); background: var(--yb-cyan-bg); }
.sap-v-dead { color: var(--yb-muted2); border-style: dashed; }

/* ---- Cards (activity, privacy) ---- */
.sap-cards { display: grid; gap: 0.8rem; }
.sap-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sap-card { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 12px; padding: 1rem 1.05rem 1.1rem; }
.sap-card-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); margin-bottom: 0.2rem; }
.sap-card-ic svg { width: 17px; height: 17px; }
.sap-card-t { font-family: var(--disp); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--yb-text); }
.sap-card-x { font-size: 0.86rem; line-height: 1.56; color: var(--yb-muted); }

/* ---- 04 Automation: four tools, each with its own mock ---- */
.sap-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sap-tool { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 14px; padding: 1.2rem 1.25rem 1.25rem; }
.sap-tool-x { font-size: 0.88rem; line-height: 1.58; color: var(--yb-muted); margin: 0 0 0.5rem; }
.sap-tool > [role="img"] { margin-top: auto; }

.sap-reward { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 10px; padding: 0.8rem 0.9rem 0.85rem; display: grid; gap: 0.55rem; }
.sap-reward-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sap-role { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.86rem; color: #a5b4fc; background: rgba(99,102,241,0.14); border-radius: 5px; padding: 0.18rem 0.5rem; }
.sap-role-dot { width: 9px; height: 9px; border-radius: 50%; background: #818cf8; }
.sap-holders { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; color: var(--yb-text); }
.sap-holders small { font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted); }
.sap-reward-match { font-size: 0.74rem; color: var(--yb-muted); }
.sap-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sap-conds li { font-size: 0.8rem; line-height: 1.4; color: var(--yb-text); background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-left: 3px solid var(--yb-cyan); border-radius: 7px; padding: 0.4rem 0.6rem; }
.sap-reward-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.sap-reward-sched { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.78rem; color: var(--yb-text); }
.sap-reward-tags { display: inline-flex; gap: 0.3rem; }
.sap-tag { font-family: var(--mono); font-size: 0.62rem; padding: 1px 7px; border-radius: 4px; color: var(--sap-good); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); }

.sap-disc { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 10px; overflow: hidden; }
.sap-disc-ch { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--yb-text); padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--yb-border); }
.sap-msg { display: flex; gap: 0.7rem; padding: 0.75rem 0.85rem 0.85rem; min-width: 0; }
.sap-msg-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--yb-depth); border: 1px solid var(--yb-gold-dim); overflow: hidden; }
.sap-msg-av img { width: 76%; height: auto; display: block; }
.sap-msg-body { flex: 1; min-width: 0; }
.sap-msg-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; }
.sap-msg-head b { font-weight: 600; color: var(--yb-text); }
.sap-embed { margin-top: 0.4rem; border-left: 4px solid var(--yb-border2); background: var(--yb-depth); border-radius: 4px; padding: 0.55rem 0.8rem 0.65rem; }
.sap-embed-drop { border-left-color: var(--sap-drop); }
.sap-embed-title { font-weight: 700; font-size: 0.86rem; color: var(--yb-text); margin-bottom: 0.3rem; }
.sap-embed-desc { font-size: 0.8rem; line-height: 1.5; color: var(--yb-muted); }
.sap-embed-desc b { color: var(--yb-text); }

.sap-side { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 10px; overflow: hidden; }
.sap-side-server { font-weight: 700; font-size: 0.86rem; color: var(--yb-text); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--yb-border); }
.sap-side-list { list-style: none; margin: 0; padding: 0.4rem 0.4rem 0.5rem; display: grid; gap: 1px; }
.sap-side-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.36rem 0.5rem; border-radius: 6px; font-size: 0.84rem; color: var(--yb-muted); }
.sap-side-list li .sap-hash { width: 16px; text-align: center; }
.sap-side-counter { color: var(--yb-text) !important; background: var(--yb-overlay-soft); }
.sap-side-ic, .sap-side-lock { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sap-side-ic { color: var(--yb-cyan); }
.sap-side-lock { margin-left: auto; width: 13px; height: 13px; color: var(--yb-muted2); }
.sap-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sap-marks { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 10px; padding: 0.85rem 0.9rem 0.8rem; display: grid; gap: 0.7rem; }
.sap-marks-chart { position: relative; height: 78px; border-bottom: 1px solid var(--yb-border); }
.sap-marks-chart svg { position: absolute; inset: 14px 0 0; width: 100%; height: calc(100% - 14px); overflow: visible; }
.sap-pin { --pin: var(--yb-cyan); position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--pin); }
.sap-pin span { position: absolute; top: -2px; left: 0; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; color: #0b1020; background: var(--pin); }
.sap-pin-cyan { --pin: #38bdf8; }
.sap-pin-gold { --pin: #f6c453; }
.sap-pin-red { --pin: #f87171; }
.sap-pin-green { --pin: #34d399; }
.sap-marks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.8rem; }
.sap-marks-list li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; line-height: 1.35; color: var(--yb-text); min-width: 0; }
.sap-marks-n { width: 16px; height: 16px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.54rem; font-weight: 700; color: #0b1020; background: var(--pin); }

/* ---- 05 The stats card (a rendered image in Discord, so it keeps its own dark palette) ---- */
.sap-card-fig { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; }
.sap-sc { width: 100%; background: linear-gradient(160deg, #141a33 0%, #0e1226 60%, #10162c 100%); border: 1px solid rgba(96,128,210,0.28); border-radius: 14px; padding: 1rem 1rem 1.05rem; box-shadow: 0 22px 60px rgba(0,0,0,0.32); color: #e8ecf8; }
.sap-sc-top { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; }
.sap-sc-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #6366f1, #3b82f6); box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }
.sap-sc-name { font-family: var(--disp); font-weight: 700; font-size: 1.12rem; }
.sap-sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.sap-sc-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.6rem 0.7rem 0.65rem; display: grid; gap: 0.32rem; min-width: 0; }
.sap-sc-h { font-weight: 700; font-size: 0.82rem; color: #fff; margin-bottom: 0.1rem; }
.sap-sc-rank { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.04); border-radius: 7px; padding: 0.3rem 0.55rem; font-size: 0.78rem; color: #cfd6ea; }
.sap-sc-rank b { font-family: var(--disp); font-size: 1.05rem; color: #60a5fa; }
.sap-sc-row { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.78rem; color: #dfe4f2; }
.sap-sc-k { width: 1.7rem; flex: none; font-weight: 700; font-size: 0.74rem; color: #f6c453; }
.sap-sc-ch { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: #dfe4f2; }
.sap-sc-ic { color: #8b93b0; font-weight: 700; display: flex; }
.sap-sc-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sap-sc-chn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-sc-chv { font-size: 0.7rem; color: #8b93b0; }
.sap-sc-btn { font-size: 0.8rem; font-weight: 500; color: var(--yb-text); background: var(--yb-overlay-soft); border: 1px solid var(--yb-border2); border-radius: 6px; padding: 0.35rem 0.9rem; }

.sap-cmds { min-width: 0; }
.sap-cmd-list { margin: 0; display: grid; gap: 0; }
.sap-cmd-list > div { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0.8rem; padding: 0.7rem 0; border-top: 1px dashed rgba(96,128,210,0.18); }
.sap-cmd-list dt { display: flex; flex-wrap: wrap; gap: 0.3rem; align-content: flex-start; }
.sap-cmd-list dt code { font-family: var(--mono); font-size: 0.8rem; color: var(--yb-cyan); background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.sap-cmd-list dd { margin: 0; font-size: 0.88rem; line-height: 1.52; color: var(--yb-muted); }
.sap-cmd-note { font-size: 0.86rem; line-height: 1.58; color: var(--yb-text); border-top: 1px dashed rgba(96,128,210,0.18); padding-top: 0.8rem; margin-top: 0; }

/* ---- 06 Stored or not ---- */
.sap-ledger { background: var(--yb-void); border: 1px solid var(--yb-border2); border-radius: 12px; overflow: hidden; margin-bottom: 1.2rem; }
.sap-ledger-bar { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-cyan); padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--yb-border); background: var(--yb-overlay-soft); }
.sap-ledger-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sap-ledger-col { padding: 0.95rem 1.15rem 1rem; }
.sap-ledger-never { border-left: 1px solid var(--yb-border); background: rgba(248,113,113,0.04); }
.sap-ledger-col ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.sap-ledger-col li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; line-height: 1.45; color: var(--yb-text); }
.sap-ledger-kept li::before { content: ''; position: absolute; left: 0.15rem; top: 0.2em; width: 0.4rem; height: 0.72rem; border-right: 2px solid var(--sap-good); border-bottom: 2px solid var(--sap-good); transform: rotate(40deg); }
.sap-ledger-never li::before, .sap-ledger-never li::after { content: ''; position: absolute; left: 0.05rem; top: 0.62em; width: 0.8rem; height: 2px; background: var(--sap-low); transform: rotate(45deg); }
.sap-ledger-never li::after { transform: rotate(-45deg); }
.sap-ledger-note { font-size: 0.82rem; line-height: 1.55; color: var(--yb-muted); padding: 0.7rem 1.15rem 0.8rem; border-top: 1px dashed rgba(96,128,210,0.2); margin: 0; }

/* ---- Closing band ---- */
.sap-close .aio-close-art { max-width: 330px; }

/* ---- Light theme ---- */
[data-theme="light"] .sap { --sap-good: #0f9f6e; --sap-mid: #b7791f; --sap-low: #d63c3c; --sap-drop: #e05252; }
[data-theme="light"] .sap-dash, [data-theme="light"] .sap-win { box-shadow: 0 16px 40px rgba(30,41,80,0.12); }
[data-theme="light"] .sap-cohort { box-shadow: 0 0 0 1px rgba(37,99,235,0.08), 0 14px 34px rgba(37,99,235,0.14); }
[data-theme="light"] .sap-bot { filter: drop-shadow(0 14px 22px rgba(20,30,60,0.22)); }
[data-theme="light"] .sap-insight { background: rgba(15,159,110,0.07); border-color: rgba(15,159,110,0.28); }
[data-theme="light"] .sap-mark-line { stroke: var(--yb-gold); }
[data-theme="light"] .sap-mark-flag { background: #f6c453; }
[data-theme="light"] .sap-cell { background: hsl(221 83% 53% / calc(0.07 + var(--a) * 0.88)); }
[data-theme="light"] .sap-cell-peak { outline-color: #d97706; }
[data-theme="light"] .sap-role { color: #4338ca; background: rgba(99,102,241,0.12); }
[data-theme="light"] .sap-ledger-bar { color: var(--yb-gold); }
[data-theme="light"] .sap-sc { box-shadow: 0 16px 40px rgba(30,41,80,0.18); }
[data-theme="light"] .sap-group-4 { --g: #b7791f; }
[data-theme="light"] .sap-group-3 { --g: #0f9f6e; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .sap-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sap-stage { justify-self: center; max-width: 540px; }
  .sap-act, .sap-tools { grid-template-columns: 1fr; }
  .sap-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sap-funnel-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.1rem; }
}
@media (max-width: 760px) {
  .sap-stage { padding-top: 128px; }
  .sap-bot { width: 220px; top: -20px; right: -8px; }
  /* Mono labels: legible floor on a phone, nothing below ~10px. */
  .sap-k, .sap-kpi-k, .sap-chart-t, .sap-cohort-bar, .sap-group-n, .sap-cohorts thead th, .sap-grid-day, .sap-verdict, .sap-holders small, .sap-tag, .sap-ledger-bar, .sap-fb-v small { font-size: 0.64rem; }
  .sap-mark-flag { font-size: 0.6rem; }
  .sap-grid-hr { font-size: 0.6rem; }
}
@media (max-width: 560px) {
  .sap-kpi-k { white-space: normal; }
  .sap-cohorts th, .sap-cohorts td { padding: 0.5rem 0.45rem; }
  .sap-cnt { display: none; }
  .sap-chan-list li { grid-template-columns: 0.8rem minmax(0, 1fr) 3.4rem 2.6rem 6.2rem; gap: 0.3rem 0.45rem; padding: 0.55rem 0.75rem; }
  .sap-map, .sap-cards-3, .sap-marks-list, .sap-ledger-cols { grid-template-columns: 1fr; }
  .sap-ledger-never { border-left: 0; border-top: 1px solid var(--yb-border); }
  .sap-stage { padding-top: 110px; }
  .sap-bot { width: 188px; }
  .sap-cohort { width: 92%; margin-left: -6px; }
  .sap-kpi-v { font-size: 1.12rem; }
  .sap-spark { display: none; }
  .sap-funnel-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sap-fb-col { height: 90px; }
  .sap-cmd-list > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .sap-sc-grid { grid-template-columns: 1fr; }
  .sap-grid { grid-template-columns: 1.6rem repeat(24, minmax(0, 1fr)); gap: 1px; }
  .sap-heat-kpis .sap-kpi-v { font-size: 0.95rem; }
}