/* AscendX product UI: the Charlie workspace, the SearchScore report, the Growth Blueprint and page review.
   Every screen is an illustration for a fictional business (Riverside Coaching). Light by default, .dark for the spotlight. */

.ax {
  --a-bg: #ffffff; --a-side: #f8f9fc; --a-soft: #f3f4f9; --a-hover: #eef0f6; --a-sel: #eef1fe;
  --a-line: #e5e7ef; --a-line2: #f0f1f6; --a-text: #151223; --a-muted: #5b5a78; --a-faint: #9a99b2;
  --a-acc: #2940f2; --a-acc-soft: rgba(41, 64, 242, 0.08); --a-out: #eef1ff; --a-out-text: #151223;
  --a-green: #0e9455; --a-green-soft: rgba(14, 148, 85, 0.1); --a-amber: #b45309; --a-amber-soft: #fff3df;
  --a-red: #cf3b36; --a-red-soft: #fdeceb; --a-blue-soft: rgba(41, 64, 242, 0.09);
  --a-shadow: 0 0 0 1px rgba(3, 5, 53, 0.03), 0 2px 4px rgba(3, 5, 53, 0.04), 0 40px 80px -24px rgba(3, 5, 53, 0.28);
  --a-card: 0 1px 2px rgba(3, 5, 53, 0.05), 0 8px 22px -8px rgba(3, 5, 53, 0.16);
  font: 400 13px/1.45 var(--font-body); color: var(--a-text); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.ax.dark {
  --a-bg: #0e1027; --a-side: #0a0c1f; --a-soft: #161a36; --a-hover: rgba(255, 255, 255, 0.05); --a-sel: rgba(120, 132, 255, 0.13);
  --a-line: rgba(255, 255, 255, 0.08); --a-line2: rgba(255, 255, 255, 0.05); --a-text: #eceefd; --a-muted: #a7acd2; --a-faint: #6d7299;
  --a-acc: #7181ff; --a-acc-soft: rgba(113, 129, 255, 0.14); --a-out: #1c2052; --a-out-text: #e9ebff;
  --a-green: #3ad29a; --a-green-soft: rgba(58, 210, 154, 0.12); --a-amber: #f6b93b; --a-amber-soft: rgba(246, 185, 59, 0.12);
  --a-red: #f77b76; --a-red-soft: rgba(247, 123, 118, 0.12); --a-blue-soft: rgba(113, 129, 255, 0.16);
  --a-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 50px 100px -20px rgba(0, 0, 0, 0.7);
  --a-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}
.ax *, .ax *::before, .ax *::after { box-sizing: border-box; }
.ax p, .ax h2, .ax h3, .ax h4, .ax h5, .ax h6 { margin: 0; }
.ax ul, .ax ol { margin: 0; padding: 0; }
.ax ul, .ax ol { list-style: none; }
.ax h2, .ax h3, .ax h4 { font-family: var(--font-body); color: var(--a-text); letter-spacing: -0.01em; }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: middle; }
.i.s { width: 14px; height: 14px; }
.i.xs { width: 12px; height: 12px; }
.i.l { width: 18px; height: 18px; }

/* Stage: a fixed design size, scaled to fit (see screens.js) */
.app-stage { position: relative; width: 100%; }
.app-stage > .win { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* Windows */
.win { background: var(--a-bg); border: 1px solid var(--a-line); border-radius: 14px; box-shadow: var(--a-shadow); overflow: hidden; display: flex; flex-direction: column; }
.win-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.wb { height: 40px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--a-line); background: var(--a-side); }
.wb-dots { display: flex; gap: 6px; }
.wb-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--a-line); }
.wb-nav { display: flex; gap: 8px; color: var(--a-faint); }
.wb-url { flex: 0 1 440px; margin: 0 auto; height: 26px; border-radius: 7px; background: var(--a-bg); border: 1px solid var(--a-line); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--a-muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.wb-url b { color: var(--a-text); font-weight: 500; }
.wb-end { display: flex; gap: 8px; align-items: center; color: var(--a-faint); }
.wbody { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Common atoms */
.btn-a { height: 28px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--a-line); background: var(--a-bg); color: var(--a-text); font: 500 12.5px/1 var(--font-body); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 0 1px 1px rgba(3, 5, 53, 0.04); transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.btn-a.pri { background: var(--a-text); color: var(--a-bg); border-color: var(--a-text); }
.btn-a.blue { background: var(--a-acc); color: #fff; border-color: var(--a-acc); }
.btn-a.ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--a-muted); }
.btn-a.sm { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
.btn-a.is-press { transform: scale(0.95); }
.ax kbd { font: 500 10.5px/1 var(--font-body); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--a-line); background: var(--a-bg); color: var(--a-faint); display: inline-flex; align-items: center; justify-content: center; }
.btn-a.pri kbd { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.7); }
.ax.dark .btn-a.pri kbd { border-color: rgba(14, 16, 39, 0.25); color: rgba(14, 16, 39, 0.6); }
.st { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px; font: 600 11px/1 var(--font-body); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.nodot::before { display: none; }
.st.blue { background: var(--a-blue-soft); color: var(--a-acc); }
.st.green { background: var(--a-green-soft); color: var(--a-green); }
.st.amber { background: var(--a-amber-soft); color: var(--a-amber); }
.st.red { background: var(--a-red-soft); color: var(--a-red); }
.st.grey { background: var(--a-soft); color: var(--a-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.green { background: var(--a-green); box-shadow: 0 0 0 3px var(--a-green-soft); }
.dot.amber { background: var(--a-amber); }
.dot.blue { background: var(--a-acc); }
.dot.grey { background: var(--a-faint); }
.dot.red { background: var(--a-red); }
.chip-a { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--a-line); font-size: 11.5px; color: var(--a-muted); background: var(--a-bg); white-space: nowrap; }
.chip-a.kwd { font-weight: 600; letter-spacing: 0.04em; color: var(--a-acc); border-color: var(--a-blue-soft); background: var(--a-blue-soft); }
.sw { width: 28px; height: 16px; border-radius: 99px; background: var(--a-acc); position: relative; flex: none; display: inline-block; }
.sw::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.sw.off { background: var(--a-line); }
.sw.off::after { left: 2px; }
.ax .muted { color: var(--a-muted); }
.ax .faint { color: var(--a-faint); }
.ax .sm { font-size: 12px; }
.ax .xs { font-size: 11px; }
.ax b, .ax strong { font-weight: 600; }
.lbl { font-size: 11px; font-weight: 600; color: var(--a-faint); letter-spacing: 0.01em; }
.hr { height: 1px; background: var(--a-line); }
.fade-b { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }

/* Avatars, channel badges, Charlie */
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11px/1 var(--font-body); color: #fff; position: relative; flex: none; }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.av.lg { width: 52px; height: 52px; font-size: 18px; }
.c1 { background: linear-gradient(135deg, #e5734f, #f2b06b); }
.c2 { background: linear-gradient(135deg, #1f9a8a, #67cf9a); }
.c3 { background: linear-gradient(135deg, #7a3dd6, #c38bff); }
.c4 { background: linear-gradient(135deg, #2f7cf6, #7cc3ef); }
.c5 { background: linear-gradient(135deg, #e5486e, #ffa8c0); }
.c6 { background: linear-gradient(135deg, #5d6474, #a7adba); }
.c7 { background: linear-gradient(135deg, #151223, #4a4870); }
.chb { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--a-bg); }
.av.lg .chb { width: 20px; height: 20px; right: -2px; bottom: -2px; }
.chb .i { width: 8px; height: 8px; stroke-width: 2.2; }
.av.lg .chb .i { width: 11px; height: 11px; }
.ig { background: linear-gradient(45deg, #f59a36, #e1306c 55%, #8a3ab9); }
.fb { background: #1877f2; }
.li { background: #0a66c2; }
.web { background: #4b5568; }
.glyph { width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; color: #fff; flex: none; }
.glyph .i { width: 11px; height: 11px; stroke-width: 2; }
.orb { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-block; background: radial-gradient(circle at 34% 30%, #b9ecff 0%, #3d8bff 34%, #2940f2 68%, #15209a 100%); box-shadow: 0 0 0 1px rgba(41, 64, 242, 0.2), 0 2px 6px rgba(41, 64, 242, 0.35); }
.orb.sm { width: 13px; height: 13px; }
.orb.md { width: 28px; height: 28px; }
.orb.lg { width: 44px; height: 44px; }
.orb.breathe { animation: orb-pulse 2.4s ease-in-out infinite; }
@keyframes orb-pulse { 50% { box-shadow: 0 0 0 4px rgba(41, 64, 242, 0.12), 0 2px 8px rgba(41, 64, 242, 0.45); } }

/* Sidebar */
.sb { background: var(--a-side); border-right: 1px solid var(--a-line); padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.sb-ws { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.sb-ws .ws { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #2940f2, #15c9e0); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sb-ws .i { color: var(--a-faint); }
.sb-ws .end { margin-left: auto; color: var(--a-muted); }
.sb-search { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; height: 30px; padding: 0 8px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-bg); color: var(--a-faint); font-size: 12.5px; }
.sb-search kbd { margin-left: auto; }
.sb-item { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 7px; color: var(--a-muted); font-weight: 500; font-size: 13px; }
.sb-item .i { width: 15px; height: 15px; }
.sb-item.on { background: var(--a-hover); color: var(--a-text); box-shadow: inset 0 0 0 1px var(--a-line2); }
.ax:not(.dark) .sb-item.on { background: #fff; box-shadow: 0 1px 2px rgba(3, 5, 53, 0.06), 0 0 0 1px var(--a-line); }
.sb-n { margin-left: auto; font-size: 11.5px; color: var(--a-faint); font-weight: 500; }
.sb-n.hot { color: #fff; background: var(--a-acc); border-radius: 99px; padding: 0 6px; height: 17px; display: inline-flex; align-items: center; font-weight: 600; font-size: 10.5px; }
.sb-lbl { margin: 14px 8px 4px; font-size: 11px; font-weight: 600; color: var(--a-faint); display: flex; align-items: center; }
.sb-lbl .i { margin-left: auto; width: 12px; height: 12px; }
.sb-ch { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 8px; border-radius: 7px; color: var(--a-muted); font-size: 12.5px; }
.sb-ch .dot { margin-left: auto; width: 6px; height: 6px; box-shadow: none; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.sb-charlie { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; background: var(--a-bg); border: 1px solid var(--a-line); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.04); }
.sb-charlie b { display: block; font-size: 12.5px; }
.sb-charlie span { display: block; font-size: 11px; color: var(--a-faint); }
.sb-charlie .sw { margin-left: auto; }
.sb-brand { display: flex; align-items: center; gap: 6px; padding: 4px 8px 0; font-size: 10.5px; color: var(--a-faint); }
.sb-brand img { height: 10px; width: auto; opacity: 0.75; }
.ax.dark .sb-brand img { filter: invert(1) brightness(1.6); opacity: 0.6; }

/* Main area */
.mn { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mh { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--a-line); }
.mh-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.mh-t .i { color: var(--a-muted); }
.mh-t .crumb { color: var(--a-faint); font-weight: 500; }
.mh-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.segs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--a-soft); }
.seg { height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--a-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.seg.on { background: var(--a-bg); color: var(--a-text); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.08); }
.ax.dark .seg.on { background: rgba(255, 255, 255, 0.08); }
.seg em { font-style: normal; color: var(--a-faint); font-size: 11px; }
.mb { flex: 1; min-height: 0; overflow: hidden; display: grid; }
.pad { padding: 20px 24px; }
.scroll { overflow: hidden; min-height: 0; }

/* Cards inside the app */
.cd { border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.04); }
.cd-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--a-line2); font-weight: 600; font-size: 12.5px; }
.cd-h .i { color: var(--a-muted); }
.cd-h .r { margin-left: auto; font-weight: 500; color: var(--a-faint); font-size: 11.5px; }
.cd-b { padding: 12px 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.rows > * + * { border-top: 1px solid var(--a-line2); }
.ax .grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chats */
.chats { grid-template-columns: 272px minmax(0, 1fr) 256px; }
.ib { border-right: 1px solid var(--a-line); display: flex; flex-direction: column; min-height: 0; }
.ib-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.ib-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--a-line2); position: relative; }
.ib-row.on { background: var(--a-sel); }
.ib-row.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--a-acc); }
.ib-top { display: flex; align-items: center; gap: 6px; }
.ib-top b { font-size: 13px; }
.ib-top .t { margin-left: auto; font-size: 11px; color: var(--a-faint); }
.ib-p { color: var(--a-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ib-tag { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--a-muted); font-weight: 500; }
.ib-tag .dot { width: 6px; height: 6px; box-shadow: none; }
.th { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.th-h { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--a-line); }
.th-h .who b { display: block; font-size: 13.5px; }
.th-h .who span { display: block; font-size: 11.5px; color: var(--a-faint); }
.th-b { flex: 1; min-height: 0; overflow: hidden; padding: 16px 20px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.evt { align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--a-line); background: var(--a-bg); font-size: 11.5px; color: var(--a-muted); }
.evt .glyph { width: 14px; height: 14px; border-radius: 4px; }
.evt .glyph .i { width: 9px; height: 9px; }
.evt .t { color: var(--a-faint); }
.mg { display: flex; flex-direction: column; gap: 4px; max-width: 76%; }
.mg.in { align-self: flex-start; align-items: flex-start; }
.mg.out { align-self: flex-end; align-items: flex-end; }
.mg-l { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--a-faint); font-weight: 500; }
.bub { padding: 8px 12px; border-radius: 15px; line-height: 1.45; font-size: 13px; }
.mg.in .bub { background: var(--a-soft); border-bottom-left-radius: 5px; }
.mg.out .bub { background: var(--a-out); color: var(--a-out-text); border-bottom-right-radius: 5px; }
.mg.you .bub { background: var(--a-acc); color: #fff; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg); font-size: 12px; }
.file .ft { width: 22px; height: 26px; border-radius: 4px; background: var(--a-red-soft); color: var(--a-red); font-size: 8px; font-weight: 700; display: grid; place-items: center; }
.file span { color: var(--a-faint); font-size: 11px; display: block; }
.qbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--a-acc); color: var(--a-acc); background: var(--a-bg); font-size: 12px; font-weight: 600; }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 13px; border-radius: 15px; border-bottom-right-radius: 5px; background: var(--a-out); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--a-acc); opacity: 0.35; animation: blink 1.1s infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 40% { opacity: 1; transform: translateY(-2px); } }
.appr { align-self: flex-end; width: 92%; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg); box-shadow: var(--a-card); overflow: hidden; }
.appr-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--a-line2); font-weight: 600; font-size: 12.5px; }
.appr-h .st { margin-left: auto; }
.appr-b { padding: 10px 12px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 7px 10px; font-size: 12.5px; }
.appr-b .k { color: var(--a-faint); font-size: 11.5px; padding-top: 1px; }
.draft { padding: 8px 10px; border-radius: 9px; background: var(--a-soft); border: 1px solid var(--a-line2); line-height: 1.45; }
.appr-f { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--a-line2); background: var(--a-side); }
.appr-f .r { margin-left: auto; display: flex; gap: 4px; align-items: center; color: var(--a-faint); font-size: 11px; }
.appr-d { display: none; align-items: center; gap: 8px; padding: 10px 12px; color: var(--a-green); font-weight: 500; font-size: 12.5px; }
.appr-d .muted { font-weight: 400; }
.appr .s-ok { display: none; }
.appr.done .appr-b, .appr.done .appr-f, .appr.done .s-wait { display: none; }
.appr.done .appr-d { display: flex; }
.appr.done .s-ok { display: inline-flex; }
.cmp { flex: none; padding: 0 16px 10px; }
.cmp-box { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 12px; border: 1px solid var(--a-line); border-radius: 12px; color: var(--a-faint); background: var(--a-bg); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.04); }
.cmp-box .ph { flex: 1; font-size: 12.5px; }
.cmp-box .send { width: 28px; height: 28px; border-radius: 8px; background: var(--a-soft); display: grid; place-items: center; color: var(--a-muted); }
.cmp-n { text-align: center; font-size: 10.5px; color: var(--a-faint); margin-top: 6px; }
.dt { border-left: 1px solid var(--a-line); padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; }
.dt-p { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.dt-p b { font-size: 14px; margin-top: 6px; }
.dt-p span { font-size: 11.5px; color: var(--a-faint); }
.dt-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px 8px; font-size: 12px; align-items: center; }
.kv .k { color: var(--a-faint); }
.tl { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 12px; padding: 5px 0; position: relative; }
.tl li::before { content: ""; position: absolute; left: 8.5px; top: 21px; bottom: -6px; width: 1px; background: var(--a-line); }
.tl li:last-child::before { display: none; }
.tl .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--a-soft); color: var(--a-muted); }
.tl .ic .i { width: 10px; height: 10px; stroke-width: 2; }
.tl .ic.ok { background: var(--a-green-soft); color: var(--a-green); }
.tl .ic.blue { background: var(--a-blue-soft); color: var(--a-acc); }
.tl .t { color: var(--a-faint); font-size: 11px; }

/* Home */
.home { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.greet h2 { font-size: 20px; font-weight: 600; }
.greet p { color: var(--a-faint); font-size: 12.5px; margin-top: 2px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--a-line); background: linear-gradient(90deg, var(--a-acc-soft), transparent 70%), var(--a-bg); }
.banner b { display: block; font-size: 13px; }
.banner span { display: block; font-size: 12px; color: var(--a-muted); }
.banner .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wl > li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12.5px; }
.wl > li + li { border-top: 1px solid var(--a-line2); }
.wl .s { display: block; color: var(--a-faint); font-size: 11.5px; }
.stat { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; font-size: 12.5px; color: var(--a-muted); }
.stat b { color: var(--a-text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 8px; }
.bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--a-acc-soft); }
.bars i.on { background: var(--a-acc); }
.ql > li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 12.5px; }
.ql > li + li { border-top: 1px solid var(--a-line2); }
.ql .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--a-soft); display: grid; place-items: center; color: var(--a-muted); }
.ql kbd { margin-left: auto; }
.ql kbd + kbd { margin-left: 3px; }
.feed > li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; color: var(--a-muted); }
.feed b { color: var(--a-text); font-weight: 500; }
.feed .t { margin-left: auto; color: var(--a-faint); font-size: 11px; }

/* Audience */
.opt3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opt { position: relative; padding: 12px 14px 12px 38px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-bg); }
.opt::before { content: ""; position: absolute; left: 14px; top: 14px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--a-line); background: var(--a-bg); }
.opt.on { border-color: var(--a-acc); box-shadow: 0 0 0 3px var(--a-acc-soft); }
.opt.on::before { border: 4.5px solid var(--a-acc); }
.opt b { display: block; font-size: 12.5px; }
.opt span { display: block; color: var(--a-muted); font-size: 11.5px; margin-top: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-weight: 600; font-size: 11px; color: var(--a-faint); padding: 8px 12px; border-bottom: 1px solid var(--a-line); background: var(--a-side); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--a-line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td .s { display: block; color: var(--a-faint); font-size: 11.5px; }
.gl { display: inline-flex; gap: 3px; }
.who-c { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.sec-h { display: flex; align-items: baseline; gap: 10px; }
.sec-h h3 { font-size: 14px; font-weight: 600; }
.sec-h p { color: var(--a-faint); font-size: 12px; }

/* Alerts */
.alerts { grid-template-columns: minmax(0, 1fr) 340px; }
.al-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 18px; border-bottom: 1px solid var(--a-line2); position: relative; }
.al-row.on { background: var(--a-sel); }
.al-row.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--a-acc); border-radius: 2px; }
.al-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.al-ic.amber { background: var(--a-amber-soft); color: var(--a-amber); }
.al-ic.red { background: var(--a-red-soft); color: var(--a-red); }
.al-ic.blue { background: var(--a-blue-soft); color: var(--a-acc); }
.al-ic.grey { background: var(--a-soft); color: var(--a-muted); }
.al-row .k { font-size: 11px; font-weight: 600; color: var(--a-faint); display: flex; gap: 6px; align-items: center; }
.al-row b { display: block; font-size: 13px; margin-top: 2px; }
.al-row p { color: var(--a-muted); font-size: 12px; margin-top: 2px; }
.al-row .t { font-size: 11px; color: var(--a-faint); }
.ald { border-left: 1px solid var(--a-line); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.ald h3 { font-size: 15px; font-weight: 600; }
.quote { padding: 10px 12px; border-left: 2px solid var(--a-line); color: var(--a-muted); font-size: 12.5px; background: var(--a-side); border-radius: 0 8px 8px 0; }

/* Briefings */
.brief { grid-template-columns: 210px minmax(0, 1fr); }
.bl { border-right: 1px solid var(--a-line); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.bl-i { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--a-muted); }
.bl-i b { display: block; color: var(--a-text); font-weight: 500; }
.bl-i span { font-size: 11px; color: var(--a-faint); }
.bl-i.on { background: var(--a-hover); }
.ax:not(.dark) .bl-i.on { background: #fff; box-shadow: 0 0 0 1px var(--a-line), 0 1px 2px rgba(3, 5, 53, 0.05); }
.doc { padding: 22px 30px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.doc h2 { font-size: 19px; font-weight: 600; }
.doc .dmeta { display: flex; align-items: center; gap: 8px; color: var(--a-faint); font-size: 12px; margin-top: 4px; }
.doc p.lead { font-size: 13.5px; line-height: 1.6; color: var(--a-text); }
.doc h4 { font-size: 12px; font-weight: 600; color: var(--a-faint); letter-spacing: 0.01em; margin-bottom: 8px; }
.hb { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.hb i { height: 8px; border-radius: 4px; background: var(--a-soft); position: relative; overflow: hidden; }
.hb i::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: 4px; background: var(--a-acc); }
.hb b { text-align: right; font-variant-numeric: tabular-nums; }
.fu > li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; }
.fu > li + li { border-top: 1px solid var(--a-line2); }
.fu .s { display: block; color: var(--a-faint); font-size: 11.5px; }

/* Growth: keyword rules */
.growth { grid-template-columns: 300px minmax(0, 1fr); }
.rl { border-right: 1px solid var(--a-line); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--a-side); }
.rule { padding: 11px 12px; border-radius: 11px; border: 1px solid var(--a-line); background: var(--a-bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.rule.on { border-color: var(--a-acc); box-shadow: 0 0 0 3px var(--a-acc-soft); }
.rule .kw { font-weight: 700; letter-spacing: 0.05em; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.rule .s { grid-column: 1 / -1; color: var(--a-faint); font-size: 11.5px; }
.flow { padding: 22px 28px; display: flex; flex-direction: column; gap: 0; }
.flow-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.flow-h h3 { font-size: 15px; font-weight: 600; }
.node { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.node::before { content: ""; position: absolute; left: 15.5px; top: 34px; bottom: 2px; width: 1px; background: repeating-linear-gradient(var(--a-line) 0 4px, transparent 4px 7px); }
.node:last-child::before { display: none; }
.node .n-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-muted); border: 1px solid var(--a-line); }
.node .n-ic.blue { background: var(--a-blue-soft); color: var(--a-acc); border-color: transparent; }
.node .n-k { font-size: 11px; font-weight: 600; color: var(--a-faint); margin-bottom: 4px; }
.node .n-c { border: 1px solid var(--a-line); border-radius: 12px; padding: 12px 14px; background: var(--a-bg); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.04); display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.sel { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--a-line); background: var(--a-side); font-weight: 500; font-size: 12px; }

/* Settings */
.settings { grid-template-columns: 206px minmax(0, 1fr); }
.sn { border-right: 1px solid var(--a-line); padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.sn span { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; color: var(--a-muted); font-weight: 500; font-size: 12.5px; }
.sn span.on { background: var(--a-hover); color: var(--a-text); }
.ax:not(.dark) .sn span.on { background: #fff; box-shadow: 0 0 0 1px var(--a-line); }
.sp { padding: 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.sg h3 { font-size: 13.5px; font-weight: 600; }
.sg > p { color: var(--a-faint); font-size: 12px; margin: 2px 0 10px; }
.sr { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 12.5px; }
.sr + .sr { border-top: 1px solid var(--a-line2); }
.sr b { display: block; font-weight: 500; }
.sr .s { display: block; color: var(--a-faint); font-size: 11.5px; }
.sr .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.wave i { width: 2px; border-radius: 2px; background: var(--a-acc); opacity: 0.7; }
.play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--a-acc-soft); color: var(--a-acc); }
.play .i { width: 10px; height: 10px; }

/* Sign in */
.signin { flex: 1; display: grid; place-items: center; background: radial-gradient(600px 300px at 50% 0%, var(--a-acc-soft), transparent), var(--a-side); }
.si-card { width: 360px; padding: 28px; border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-bg); box-shadow: var(--a-card); display: flex; flex-direction: column; gap: 14px; }
.si-card img { height: 18px; width: auto; align-self: flex-start; }
.ax.dark .si-card img { filter: invert(1) brightness(1.8); }
.si-card h3 { font-size: 17px; font-weight: 600; }
.si-card > p { color: var(--a-muted); font-size: 12.5px; margin-top: -8px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label { font-size: 11.5px; font-weight: 600; color: var(--a-muted); }
.fld .in { height: 36px; border-radius: 9px; border: 1px solid var(--a-line); background: var(--a-bg); padding: 0 11px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fld .in.focus { border-color: var(--a-acc); box-shadow: 0 0 0 3px var(--a-acc-soft); }
.fld .in .i { margin-left: auto; color: var(--a-faint); }
.si-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--a-muted); }
.si-row a, .si-link { color: var(--a-acc); font-weight: 600; text-decoration: none; }
.cbx { width: 14px; height: 14px; border-radius: 4px; background: var(--a-acc); display: inline-grid; place-items: center; color: #fff; margin-right: 6px; vertical-align: -2px; }
.cbx .i { width: 9px; height: 9px; stroke-width: 3; }
.si-btn { height: 38px; border-radius: 10px; background: var(--a-text); color: var(--a-bg); font-weight: 600; display: grid; place-items: center; font-size: 13px; }
.si-foot { display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--a-faint); font-size: 11.5px; }

/* Growth Blueprint (AscendX report) */
.bp { padding: 22px 26px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
.bp-score { padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.ring { width: 132px; height: 132px; position: relative; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 132px; height: 132px; transform: rotate(-90deg); }
.ring .rg-bg { fill: none; stroke: var(--a-soft); stroke-width: 11; }
.ring .rg-v { fill: none; stroke: var(--a-acc); stroke-width: 11; stroke-linecap: round; }
.ring .rg-t { stroke: var(--a-text); stroke-width: 2.5; stroke-linecap: round; }
.ring span { position: relative; display: grid; place-items: center; align-content: center; }
.ring b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ring small { font-size: 11px; color: var(--a-faint); margin-top: 4px; }
.drv { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) 30px 92px; gap: 10px; align-items: center; padding: 9px 14px; font-size: 12.5px; }
.drv + .drv { border-top: 1px solid var(--a-line2); }
.drv .n { font-size: 11px; color: var(--a-faint); font-weight: 600; }
.drv i { height: 6px; border-radius: 3px; background: var(--a-soft); position: relative; overflow: hidden; }
.drv i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 1%); background: var(--a-acc); border-radius: 3px; }
.drv i.low::after { background: var(--a-amber); }
.drv .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.drv .m { color: var(--a-faint); font-size: 11.5px; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.step3 { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--a-line); font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.step3 .k { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--a-faint); font-weight: 600; }
.step3 b { font-weight: 600; }

/* SearchScore report */
.ss { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.ss-top { display: flex; align-items: center; gap: 12px; }
.ss-top .site { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ss-top .site .fav { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #1f9a8a, #67cf9a); color: #fff; font-size: 11px; display: grid; place-items: center; }
.gauge { padding: 14px 16px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; }
.gauge .g { width: 76px; height: 40px; position: relative; overflow: hidden; }
.gauge .g::before { content: ""; position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(from 270deg, var(--gc) calc(var(--v) * 1.8deg), var(--a-soft) 0 180deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 28px, #000 29px); mask: radial-gradient(circle, transparent 28px, #000 29px); }
.gauge .g b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 17px; font-weight: 600; line-height: 1; }
.gauge .lab b { display: block; font-size: 13px; }
.gauge .lab span { font-size: 11.5px; font-weight: 600; }
.ai-ans { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ai-q { align-self: flex-end; padding: 7px 11px; border-radius: 12px; background: var(--a-soft); font-size: 12px; }
.ai-a { font-size: 12px; color: var(--a-muted); }
.ai-li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--a-line2); font-size: 12px; }
.ai-li .n { width: 18px; height: 18px; border-radius: 5px; background: var(--a-soft); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--a-muted); }
.ai-li.you { border: 1px dashed var(--a-red); background: var(--a-red-soft); color: var(--a-red); font-weight: 500; }
.trk { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 12px; }
.trk th { font-size: 10.5px; font-weight: 600; color: var(--a-faint); text-align: center; padding: 0 2px; }
.trk th:first-child { text-align: left; }
.trk td { text-align: center; padding: 0 2px; }
.trk td:first-child { text-align: left; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.trk .c { width: 14px; height: 14px; border-radius: 4px; display: inline-block; background: var(--a-soft); vertical-align: middle; }
.trk .c.y { background: var(--a-green); }
.trk .c.p { background: var(--a-green-soft); box-shadow: inset 0 0 0 1px var(--a-green); }
.eng { width: 16px; height: 16px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; }
.fx > li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 14px; font-size: 12.5px; }
.fx > li + li { border-top: 1px solid var(--a-line2); }
.fx .n { width: 20px; height: 20px; border-radius: 50%; background: var(--a-text); color: var(--a-bg); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }

/* Page review */
.pr { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.pv { background: var(--a-side); padding: 18px; overflow: hidden; }
.pv-page { background: #fff; border-radius: 10px; border: 1px solid var(--a-line); box-shadow: 0 1px 2px rgba(3, 5, 53, 0.05); overflow: hidden; color: #151223; }
.pv-nav { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #eef0f5; font-size: 11px; color: #6b6a8a; }
.pv-nav b { color: #151223; font-size: 12px; margin-right: auto; display: flex; align-items: center; gap: 6px; }
.pv-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; padding: 26px 22px; align-items: center; }
.pv-hero h4 { font-size: 22px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: #151223; }
.pv-hero p { font-size: 12px; color: #5b5a78; margin-top: 8px; line-height: 1.5; }
.pv-cta { position: relative; display: inline-flex; margin-top: 14px; }
.pv-cta span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 99px; background: #2940f2; color: #fff; font-size: 12px; font-weight: 600; }
.pv-cta::after { content: ""; position: absolute; inset: -6px; border-radius: 99px; border: 1.5px dashed #2940f2; }
.pv-cta em { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); font-style: normal; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #2940f2; background: rgba(41, 64, 242, 0.1); padding: 3px 7px; border-radius: 6px; }
.pv-times { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pv-times span { font-size: 10.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid #e5e7ef; color: #5b5a78; background: #fbfbfe; }
.pv-times.new span { border-color: rgba(41, 64, 242, 0.35); background: rgba(41, 64, 242, 0.05); }
.pv-img { height: 150px; border-radius: 12px; background: radial-gradient(120px 90px at 30% 30%, rgba(255, 255, 255, 0.35), transparent), linear-gradient(135deg, #030535, #2940f2 60%, #15c9e0); position: relative; overflow: hidden; }
.pv-img::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; border: 22px solid rgba(21, 239, 254, 0.3); }
.pv-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 22px; }
.pv-feat div { padding: 10px; border-radius: 8px; background: #f6f7fc; font-size: 10.5px; color: #5b5a78; }
.pv-feat b { display: block; color: #151223; font-size: 11px; margin-bottom: 2px; }
.rp { border-left: 1px solid var(--a-line); padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.rp-h { display: flex; align-items: center; gap: 10px; }
.rp-h .tm { width: 30px; height: 30px; border-radius: 9px; background: var(--a-text); display: grid; place-items: center; }
.rp-h .tm img { width: 18px; height: auto; filter: invert(1) brightness(2); }
.ax.dark .rp-h .tm img { filter: none; }
.rp-h b { display: block; font-size: 13px; }
.rp-h span { display: block; font-size: 11.5px; color: var(--a-faint); }
.diff { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.diff .del { color: var(--a-red); text-decoration: line-through; background: var(--a-red-soft); padding: 3px 7px; border-radius: 6px; align-self: flex-start; }
.diff .add { color: var(--a-green); background: var(--a-green-soft); padding: 3px 7px; border-radius: 6px; align-self: flex-start; font-weight: 500; }
.rp-f { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.rp-f .btn-a { height: 34px; justify-content: center; font-size: 13px; }

/* Cursor used by the hero replay */
.cur { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.cur.on { opacity: 1; }
.cur::after { content: ""; position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(41, 64, 242, 0.25); transform: scale(0); opacity: 0; }
.cur.click::after { animation: ripple 0.5s ease-out; }
@keyframes ripple { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* Replay states */
.replay .stp:not(.show) { display: none !important; }
.replay .stp.show { animation: pop 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Compact: narrow screens show the main pane only */
.win.compact.win-app { grid-template-columns: minmax(0, 1fr); }
.win.compact .side-col { display: none !important; }
.win.compact .cols { grid-template-columns: minmax(0, 1fr) !important; }
.win.compact .g3, .win.compact .opt3, .win.compact .steps3 { grid-template-columns: minmax(0, 1fr); }
.win.compact .home, .win.compact .pad, .win.compact .flow, .win.compact .sp, .win.compact .doc, .win.compact .ss, .win.compact .bp { padding-left: 16px; padding-right: 16px; }
.win.compact .bp { grid-template-columns: minmax(0, 1fr); }
.win.compact .mg { max-width: 86%; }
.win.compact .appr { width: 100%; }
.win.compact .drv { grid-template-columns: 22px 80px minmax(0, 1fr) 28px; }
.win.compact .drv .m { display: none; }
.win.compact .hb { grid-template-columns: 120px minmax(0, 1fr) 20px; }
.win.compact .wb-url { flex-basis: 260px; }

@media (prefers-reduced-motion: reduce) {
  .orb.breathe, .typing span { animation: none; }
  .replay .stp.show { animation: none; }
  .cur { transition: none; }
}
.win:not(.replay) .typing, .win:not(.replay) .hide-static { display: none; }
.sb-ws { white-space: nowrap; min-width: 0; }
.sb-ws .ws-n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.th-h .who { min-width: 0; white-space: nowrap; }
.th-h .who span { overflow: hidden; text-overflow: ellipsis; }
.th-h .mh-r { flex: none; }
.cmp-box .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win.no-dt .chats { grid-template-columns: 272px minmax(0, 1fr); }
.win.no-dt .dt { display: none; }
.sn span { white-space: nowrap; }
.th-b > *, .try-b > * { flex-shrink: 0; }

/* Revenue review (hero) */
.rv { flex: 1; min-height: 0; padding: 18px; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; background: var(--a-side); }
.rv-l { display: flex; flex-direction: column; gap: 12px; }
.rv-score { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rv-ss { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 14px; }
.rv-ss img { border-radius: 7px; }
.rv-ss b { display: block; font-size: 12.5px; }
.rv-ss div span { font-size: 11.5px; color: var(--a-amber); font-weight: 600; }
.rv-ss > .xs { grid-column: 2; margin-top: -6px; }
.rv-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rv-leaks > li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 110px 64px; grid-template-areas: "n t bar tag" "n fix fix fix"; gap: 2px 12px; align-items: center; padding: 10px 14px; }
.rv-leaks > li + li { border-top: 1px solid var(--a-line2); }
.rv-n { grid-area: n; align-self: start; padding-top: 2px; font-size: 11px; font-weight: 700; color: var(--a-faint); }
.rv-leaks .grow { grid-area: t; }
.rv-leaks .grow b { display: block; font-size: 12.5px; }
.rv-leaks .grow span { display: block; font-size: 11.5px; color: var(--a-faint); }
.rv-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--a-soft); position: relative; overflow: hidden; }
.rv-bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 1%); border-radius: 3px; }
.rv-bar.high::after { background: var(--a-red); } .rv-bar.med::after { background: var(--a-amber); } .rv-bar.low::after { background: var(--a-faint); }
.rv-leaks .st { grid-area: tag; justify-self: end; }
.rv-fix { grid-area: fix; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--a-green); font-weight: 500; }
.rv-first { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(41, 64, 242, 0.25); background: linear-gradient(90deg, var(--a-acc-soft), var(--a-bg) 70%); }
.rv-first b { display: block; font-size: 13px; }
.rv-first .btn-a { margin-left: auto; }
.win.compact .rv { grid-template-columns: minmax(0, 1fr); padding: 12px; }
.win.compact .rv-l { flex-direction: row; }
.win.compact .rv-score { flex: 0 0 150px; padding: 12px 8px; }
.win.compact .rv-score .ring { transform: scale(0.8); margin: -12px; }
.win.compact .rv-score .row { flex-direction: column; }
.win.compact .rv-ss { flex: 1; align-self: stretch; grid-template-columns: 28px minmax(0, 1fr); align-content: center; }
.win.compact .rv-leaks > li { grid-template-columns: 22px minmax(0, 1fr) 64px; grid-template-areas: "n t tag" "n fix fix"; }
.win.compact .rv-bar { display: none; }
.win.compact .rv-first { flex-wrap: wrap; }