/* Culture Of One — Operator Dashboard Shared design system. Lifted from the live client dashboards (Jane / Jeremy / Daniel): light theme, white cards, semantic status colours fixed across every page. Two brand skins toggle via : CO1 (black/gold) and Meridian (clinic teal). Data-encoding colours (--good/--warn/--bad, chart palettes) NEVER rebrand. */ :root{ --bg:#f4f6f8; --card:#fff; --ink:#12212e; --muted:#6b7a88; --accent:#0e7c86; --accent2:#12a3b0; /* Meridian teal (default skin) */ --brand:#0e7c86; /* brandbar top rule + avatar tint */ --warn:#c8871b; --good:#1f9d55; --bad:#c0492f; /* fixed meaning, every client */ --line:#e4e9ee; --hl:#eef7f8; --bar-bill:#12a3b0; --bar-cost:#cfe6e9; /* chart fills (fixed) */ --barbg:#fff; --bartext:var(--ink); --logo:var(--accent); } /* CO1 house skin — black chrome, gold accent */ html[data-brand="co1"]{ --accent:#9a7b1f; --accent2:#c6a24e; /* gold, darkened for white-text contrast */ --brand:#c6a24e; --barbg:#0c0d10; --bartext:#f3ead0; --logo:#c6a24e; } *{box-sizing:border-box;margin:0;padding:0} body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);padding:24px;max-width:1120px;margin:0 auto} a{color:var(--accent)} h1{font-size:24px;letter-spacing:-.01em} h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px} .sub{color:var(--muted);font-size:14px;margin-top:2px} /* header band ---------------------------------------------------------- */ .brandbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--barbg); color:var(--bartext);border-radius:14px;padding:13px 20px;margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.06);border-top:4px solid var(--brand)} .brandbar .wm{font-weight:800;font-size:18px;letter-spacing:.01em;color:var(--logo);white-space:nowrap} .brandbar .wm small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--bartext);opacity:.7} .brandbar .bt{font-size:15px;font-weight:700;color:var(--bartext)} .brandbar .right{margin-left:auto;display:flex;align-items:center;gap:12px} .brandbar .right a{color:var(--bartext);opacity:.85;font-size:13.5px;text-decoration:none} .brandbar .right a:hover{opacity:1} .demo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em; padding:2px 8px;border-radius:9px;background:#f4cccc;color:#8a2c1c} .bswitch{border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--bartext); font:600 12px system-ui;padding:5px 11px;border-radius:20px;cursor:pointer;opacity:.9} html[data-brand="meridian"] .bswitch{border-color:var(--line)} .bswitch:hover{opacity:1} .crumb{margin-left:auto} .crumb a{color:var(--accent);font-size:14px;text-decoration:none} /* KPI tiles ------------------------------------------------------------ */ .hero{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0} .stat{background:var(--card);border-radius:14px;padding:18px 20px;flex:1;min-width:150px; box-shadow:0 1px 3px rgba(0,0,0,.06)} .stat .n{font-size:30px;font-weight:700;letter-spacing:-.02em} .stat .l{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.35} .stat.big .n{color:var(--accent)} .stat.good .n{color:var(--good)} .stat.warn .n{color:var(--warn)} .stat.bad .n{color:var(--bad)} .stat.hl{border-top:4px solid var(--good)} /* cards ---------------------------------------------------------------- */ .card{background:var(--card);border-radius:14px;padding:20px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)} .card h2+.sub{margin-bottom:8px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:760px){.grid2{grid-template-columns:1fr}} /* nav cards (home hub -> spokes) --------------------------------------- */ .navgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px} @media(max-width:760px){.navgrid{grid-template-columns:1fr}} .nav{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s} .nav:hover{border-color:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .nav .ico{flex:0 0 30px;height:30px;border-radius:8px;display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent); font-size:14px;font-weight:700;line-height:1} .nav .nt{font-weight:700;font-size:16px} .nav .nd{color:var(--muted);font-size:12.5px;margin-top:2px} .nav .arr{margin-left:auto;color:var(--muted);font-size:20px} /* tabs + segmented toggles --------------------------------------------- */ .tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .tab{border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 14px;border-radius:20px; cursor:pointer;font-size:14px;transition:.15s} .tab:hover{border-color:var(--accent2)} .tab.on{background:var(--accent);color:#fff;border-color:var(--accent)} .seg{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden} .seg button{border:0;background:#fff;padding:7px 16px;cursor:pointer;font-size:14px;color:var(--ink)} .seg button.on{background:var(--accent2);color:#fff} .spacer{margin-left:auto} /* tables --------------------------------------------------------------- */ table{width:100%;border-collapse:collapse;font-size:14px} thead th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase; letter-spacing:.03em;padding:6px 10px;text-align:right;border-bottom:1px solid var(--line)} thead th:first-child{text-align:left} tbody td{padding:8px 10px;border-top:1px solid var(--line);text-align:right} tbody td:first-child{text-align:left} tr.tot td{font-weight:700;border-top:2px solid var(--ink)} tr.own td{color:var(--muted)} tr.sub td:first-child{padding-left:24px;color:var(--muted)} tr.head td{font-weight:700;background:#fafcfc} .pos{color:var(--good)} .neg{color:var(--bad)} .amb{color:var(--warn)} /* insight callouts ----------------------------------------------------- */ .ins{border-left:3px solid var(--accent);background:#f0f8f9;padding:12px 14px;border-radius:0 8px 8px 0; margin:10px 0;font-size:14.5px} .ins.good{border-color:var(--good);background:#eefaf1} .ins.warn{border-color:var(--warn);background:#fdf6ec} .ins.bad{border-color:var(--bad);background:#fbeeeb} html[data-brand="co1"] .ins{background:#faf6ea} /* pills + status tags -------------------------------------------------- */ .pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#eef3f5; color:var(--muted);margin-left:6px} .tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:10px} .tag.ok{background:#d9ead3;color:#1f6b3b} .tag.rev{background:#fce5cd;color:#8a5a13} .tag.bad{background:#f4cccc;color:#8a2c1c} /* avatars -------------------------------------------------------------- */ .avi{display:inline-flex;width:26px;height:26px;border-radius:50%;vertical-align:-8px;margin-right:8px; background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);font-size:11px;font-weight:700; align-items:center;justify-content:center} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px} /* funnel (marketing) --------------------------------------------------- */ .flow{display:flex;flex-wrap:wrap;align-items:stretch;margin:14px 0 4px} .step{flex:1;min-width:110px;padding:12px 10px;text-align:center;position:relative} .step .fn{font-size:24px;font-weight:700} .step .fl{font-size:12px;color:var(--muted);margin-top:2px} .step:not(:last-child):after{content:"→";position:absolute;right:-8px;top:34%;color:var(--muted);font-size:18px} /* wf two-col table (unit economics) ------------------------------------ */ .wf{width:100%;border-collapse:collapse;font-size:14.5px} .wf td{padding:9px 10px;border-top:1px solid var(--line)} .wf td:last-child{text-align:right;font-weight:700} /* gates (target vs actual) --------------------------------------------- */ .gate{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px} .gate .g{min-width:190px;font-weight:700} .gate .s{color:var(--muted)} /* sliders (simulator) -------------------------------------------------- */ .lever{margin:14px 0} .lever .lt{font-weight:700;font-size:14px} .lever .kv{color:var(--accent);font-weight:700} .lever .ld{color:var(--muted);font-size:12.5px;margin:2px 0 6px} input[type=range]{width:100%;accent-color:var(--accent)} .meter{height:16px;border-radius:8px;border:1px solid var(--line);overflow:hidden;position:relative; background:linear-gradient(90deg,#1f9d55,#c8871b 55%,#c0492f)} .meter .fill{position:absolute;top:0;right:0;height:100%;background:var(--card);opacity:.82} .meter .tick{position:absolute;top:-3px;width:1px;height:22px;background:var(--ink);opacity:.5} /* chart helpers -------------------------------------------------------- */ svg .gl{stroke:var(--line);stroke-width:1} svg .axt{fill:var(--muted);font-size:11px} svg .dl{fill:var(--ink);font-size:11.5px;font-weight:700} svg .dlm{fill:var(--muted);font-size:11px} .bar{fill:var(--bar-bill)} .bar.dim{fill:var(--bar-cost)} .legend{font-size:12px;color:var(--muted);margin:6px 0} .legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin:0 5px -1px 12px} .foot{color:var(--muted);font-size:12px;margin:22px 0 8px;line-height:1.6} .hint{color:var(--muted);font-size:14px;padding:12px 14px;background:#fafcfc;border:1px dashed var(--line); border-radius:8px;margin:8px 0} /* narrative lists (cockpit) -------------------------------------------- */ .tlist{font-size:14.5px;line-height:1.9;padding-left:18px} /* walkthrough strip — previous / step counter / next, on every page ----- */ .walk{display:flex;align-items:stretch;gap:12px;margin:20px 0 4px} .walk a{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:12px 16px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px; display:flex;flex-direction:column;justify-content:center} .walk a:hover{border-color:var(--accent2)} .walk a.wn{text-align:right} .walk .wd{display:block;font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin-bottom:2px} .walk .empty{flex:1;min-width:0} .walk .wc{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;font-size:12px; color:var(--muted);white-space:nowrap} @media(max-width:600px){.walk{flex-wrap:wrap}.walk .wc{order:-1;width:100%;justify-content:center;padding:0 0 4px}} /* risk register + move list (risks & next moves) ------------------------ */ .risk{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)} .risk:first-child{border-top:0} .risk .rk{flex:0 0 78px} .risk .rt{font-weight:700;font-size:15px} .risk .rb{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:3px} .risk .rl{font-size:12.5px;margin-top:6px} .risk .rl a{color:var(--accent);text-decoration:none;font-weight:600} .risk .rl a:hover{text-decoration:underline} .move{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)} .move:first-child{border-top:0} .move .mn{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center; background:var(--accent);color:#fff;font-weight:700;font-size:14px} .move .mt{font-weight:700;font-size:16px} .move .md{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:4px} .move .me{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;font-size:12.5px} .move .me b{color:var(--ink)} .move .me span{color:var(--muted)} .move .me a{color:var(--accent);text-decoration:none;font-weight:600} /* desktop-register chrome — present in the DOM on every page, shown only by the ≥1100px block at the bottom of this file. Phone never sees it. */ .tbar,.drail{display:none} /* ========================================================================= DESKTOP REGISTER — the enterprise control room, ≥1100px only. One system, two registers: below 1100px every rule above stands unchanged and the phone-first build renders exactly as it always has. From 1100px up the same DOM is re-presented as a dense operator console — navy title bar, module tab rail, KPI ribbon, bordered panels, dense tables, status chips. Cards carrying queue/flag content are marked data-side in the page and move to a right rail; pages without that content run full width. ========================================================================= */ @media (min-width:1100px){ :root{ --bg:#eaeef2; --ink:#17232e; --muted:#5a6b7c; --line:#d5dde5; --faint:#8595a5; --lsoft:#e7ecf1; --tint:#f7f9fb; --ownerrow:#fbf7ec; --chrome:#142638; --chromeink:#e8eef4; --chromedim:#93a6b8; } /* ---- frame ---------------------------------------------------------- */ body{font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; font-size:13px;line-height:1.5;max-width:none;margin:0;padding:108px 0 56px; display:grid;gap:14px;grid-auto-flow:row dense;-webkit-font-smoothing:antialiased; grid-template-columns:minmax(8px,1fr) minmax(0,1434px) minmax(8px,1fr)} body>*{grid-column:2;min-width:0} /* ---- title bar ------------------------------------------------------ */ .tbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:60; background:var(--chrome);color:var(--chromeink); display:flex;align-items:center;gap:16px;padding:0 22px;overflow:hidden} .tb-wm{display:flex;align-items:baseline;gap:9px;white-space:nowrap;flex:none} .tb-wm b{font-weight:700;font-size:13.5px;letter-spacing:.06em;color:var(--accent2)} .tb-wm span{font-weight:500;font-size:13px;opacity:.92} .tb-sep{width:1px;height:22px;background:rgba(255,255,255,.14);flex:none} .tb-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:4px 11px;font-size:12px; white-space:nowrap;flex:none} /* only the client name ever gives ground; the rest drop out whole at the widths below rather than squeezing into unreadable stubs */ .tb-chip.client{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .tb-chip .k{color:var(--chromedim);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;flex:none} .tb-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none} .tb-demo{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#0e1a26;background:var(--accent2);border-radius:3px;padding:3px 8px;white-space:nowrap} .tb-switch{border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--chromeink); font-family:inherit;font-weight:600;font-size:11.5px;padding:5px 11px;border-radius:3px; cursor:pointer;white-space:nowrap} .tb-switch:hover{background:rgba(255,255,255,.08)} .tb-user{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--chromedim);white-space:nowrap} .tb-dot{width:26px;height:26px;border-radius:50%;background:#2c4a66;color:#dbe6f0; display:grid;place-items:center;font-size:10.5px;font-weight:600} /* ---- module rail: the pages as headings across the top -------------- */ .drail{position:fixed;top:52px;left:0;right:0;z-index:55;background:var(--card); border-bottom:1px solid var(--line);padding:0 22px;display:flex;gap:2px;overflow-x:auto} .drail a{display:block;padding:11px 14px 9px;line-height:18px;font-size:12.5px;font-weight:600; color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap} .drail a:hover{color:var(--ink);background:#f2f6fa} .drail a.on{color:var(--accent);border-bottom-color:var(--accent)} .drail a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .brandbar{display:none} /* ---- page head ------------------------------------------------------ */ h1{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 -10px} body>.sub{font-size:11.5px;color:var(--faint);margin:0} /* ---- KPI ribbon ----------------------------------------------------- */ .hero{display:flex;flex-wrap:nowrap;gap:10px;margin:0} .stat{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:none; padding:12px 14px 11px;flex:1 1 0;min-width:0} .stat .n{font-size:23px;font-weight:700;letter-spacing:-.01em;line-height:1.15; font-variant-numeric:tabular-nums} .stat .l{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35} .stat.hl{border-top:1px solid var(--line);border-left:3px solid var(--good)} .stat.bad{border-left:3px solid var(--bad)} /* ---- panels --------------------------------------------------------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:none; padding:14px 16px;margin:0} .card>h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink); margin:-14px -16px 12px;padding:11px 16px 10px;border-bottom:1px solid var(--lsoft)} .card>h2:has(+.sub){margin-bottom:0;padding-bottom:0;border-bottom:0} .card>h2+.sub{font-size:11.5px;color:var(--faint);margin:0 -16px 12px;padding:2px 16px 10px; border-bottom:1px solid var(--lsoft)} .grid2{gap:22px} /* ---- dense tables --------------------------------------------------- */ table{font-size:12.5px;font-variant-numeric:tabular-nums} thead th{font-size:10.5px;letter-spacing:.06em;color:var(--faint);padding:7px 10px; border-bottom:1px solid var(--line)} tbody td{padding:7px 10px;border-top:1px solid var(--lsoft)} tr.tot td{border-top:1.5px solid var(--line);background:var(--tint)} tr.own td{background:var(--ownerrow);color:var(--ink)} tr.head td{background:var(--tint)} .wf{font-size:12.5px} .wf td{padding:7px 10px;border-top:1px solid var(--lsoft)} /* ---- status chips + pills ------------------------------------------- */ .tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;border-radius:3px;padding:2.5px 8px} .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .tag.ok{background:#e7f2ea;color:#1e7d46} .tag.rev{background:#faf1de;color:#a86d10} .tag.bad{background:#f8e9e5;color:#b3402e} .pill{font-size:10.5px;border-radius:3px;background:#eef2f6;color:var(--muted);padding:2px 7px} .avi{width:22px;height:22px;border-radius:3px;font-size:10px;vertical-align:-6px;margin-right:7px} /* ---- callouts ------------------------------------------------------- */ .ins{border-left-width:3px;border-radius:0 3px 3px 0;padding:10px 14px;font-size:12.5px; line-height:1.55;margin:10px 0} .hint{border-radius:3px;font-size:12.5px;padding:10px 14px} /* ---- module tiles (cockpit) ----------------------------------------- */ .navgrid{grid-template-columns:repeat(3,1fr);gap:10px} .nav{border-radius:4px;padding:12px 14px;gap:11px;box-shadow:none;transition:none} .nav:hover{transform:none;box-shadow:none;border-color:var(--accent)} .nav .ico{flex:0 0 22px;height:22px;border-radius:3px;font-size:11.5px} .nav .nt{font-size:13.5px} .nav .nd{font-size:11.5px} .nav .arr{font-size:16px} /* ---- controls ------------------------------------------------------- */ .tab{border-radius:3px;font-size:12px;padding:6px 12px} .seg{border-radius:3px} .seg button{font-size:12px;padding:6px 14px} .lever .lt{font-size:12.5px} .lever .ld{font-size:11.5px} .lever .seg{width:max-content} .meter{height:14px;border-radius:3px} .legend{font-size:11.5px} /* ---- funnel strip (acquisition) ------------------------------------- */ .flow{border:1px solid var(--line);border-radius:4px;overflow:hidden;flex-wrap:nowrap;margin:12px 0 4px} .step{padding:11px 13px;text-align:left;border-right:1px solid var(--lsoft)} .step:last-child{border-right:0} .step:not(:last-child):after{display:none} .step .fn{font-size:19px;font-variant-numeric:tabular-nums} .step .fl{font-size:11px} /* ---- gates ---------------------------------------------------------- */ .gate{font-size:12.5px;padding:7px 0;border-top:1px solid var(--lsoft)} .gate .g{min-width:200px} /* ---- page-level styles that ship inside valuation.html / rooms.html -- */ html .vcard{border-radius:4px;padding:16px;border-color:var(--line)} html .vcard .vt{font-size:11.5px} html .vcard .vn{font-size:28px;font-variant-numeric:tabular-nums} html .vcard .vm{font-size:11.5px} html .vcard.tgt{border:1px solid var(--good)} html .varrow .x{font-size:19px} html .varrow .xl{font-size:11px} html .yr{border-radius:4px;padding:14px} html .yr.tgt{border:1px solid var(--good)} html .track{border-radius:3px;height:24px} html .blk{border-radius:3px;font-size:10.5px;height:20px} html .rlabel{font-size:11px} /* ---- walkthrough strip ---------------------------------------------- */ .walk{gap:8px;margin:14px 0 0} .walk a{border-radius:4px;padding:9px 13px;font-size:12.5px;font-weight:600} .walk .wd{font-size:10px;letter-spacing:.1em} .walk .wc{font-size:11px;color:var(--faint)} /* ---- risk register + move list -------------------------------------- */ .risk{padding:11px 0;gap:12px;border-top:1px solid var(--lsoft)} .risk .rk{flex:0 0 72px} .risk .rt{font-size:13px} .risk .rb{font-size:12px;line-height:1.5} .risk .rl{font-size:11.5px} .move{padding:13px 0;gap:13px;border-top:1px solid var(--lsoft)} .move .mn{flex:0 0 24px;height:24px;border-radius:3px;font-size:12px} .move .mt{font-size:13.5px} .move .md{font-size:12px;line-height:1.5} .move .me{font-size:11.5px;gap:6px 16px} /* ---- footer --------------------------------------------------------- */ .foot{font-size:11px;color:var(--faint);line-height:1.6;margin:6px 0 0; border-top:1px solid var(--line);padding-top:12px} } /* Narrow desktop: the title bar drops chips whole rather than squeezing them. Client always survives; period and site go in that order. */ @media (min-width:1100px) and (max-width:1339px){ .tb-chip.site{display:none} } @media (min-width:1100px) and (max-width:1199px){ .tb-chip.period{display:none} } /* The right rail needs a main column wide enough to keep tables on one line, so it engages at 1280px. Between 1100 and 1280 the register runs single column and the rail card simply takes its place in the stack. */ @media (min-width:1280px){ body:has([data-side]){grid-template-columns:minmax(8px,1fr) minmax(0,1100px) 320px minmax(8px,1fr)} /* the rail sits beside the first two panels at its own natural height, so neither column is stretched to match the other */ body:has([data-side])>[data-side]{grid-column:3;grid-row:span 2;align-self:start} body:has([data-side])>h1, body:has([data-side])>.sub, body:has([data-side])>.hero, body:has([data-side])>.walk, body:has([data-side])>.foot{grid-column:2/4} [data-side] .grid2{grid-template-columns:1fr;gap:12px} [data-side] .ins{font-size:12px;margin:0 0 12px} [data-side] .gate{display:block} [data-side] .gate .g{min-width:0;display:block;margin-bottom:2px} [data-side] .tlist{font-size:12.5px;line-height:1.55;padding-left:16px} [data-side] .tlist.qnum{list-style:none;padding-left:0;counter-reset:q} [data-side] .tlist.qnum li{counter-increment:q;position:relative;padding:7px 0 7px 28px; border-bottom:1px solid var(--lsoft)} [data-side] .tlist.qnum li:last-child{border-bottom:0} [data-side] .tlist.qnum li::before{content:counter(q);position:absolute;left:0;top:7px; width:20px;height:20px;border-radius:3px;display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent); font-size:11px;font-weight:700} }