/* CrossRoom demo. Every rule sits under .demo-scope .crx so nothing reaches the rest of the
   page or the other five demos. The palette is CrossRoom's own: a navy rail, a recorder amber for
   the one thing to act on, and the four experience bands. */

.demo-scope .crx {
  --cr-amber: #b45309; --cr-amber-soft: #fdf3e7; --cr-amber-line: #f0c89a;
  --cr-ink: #16203a; --cr-soft: #4a5571; --cr-faint: #6b768f;
  --cr-line: #dfe5ee; --cr-line2: #eaeff5; --cr-bg: #f4f6f9; --cr-panel: #fff; --cr-panel2: #f8fafc;
  --good: #2e8b57; --fair: #a87a12; --poor: #c05f22; --bad: #c33a2f;
  --good-bg: #e7f4ec; --fair-bg: #fbf2dc; --poor-bg: #fcebdf; --bad-bg: #fbe6e4;
  --line: #dfe5ee; --line-strong: #9aa7bb; --panel: #fff; --panel-2: #f8fafc; --faint: #6b768f;
  --text: #16203a; --muted: #4a5571; --recorder: #b45309; --bad-text: #b0342a; --ink2: #eef1f5;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--sans); color: var(--cr-ink);
}
.demo-scope .crx .app-main { background: var(--cr-bg); padding: 16px 20px 26px; min-width: 0; }
.demo-scope .crx .app-hd { gap: 10px; }
.demo-scope .crx .cr-menu {
  display: none; margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px; font: inherit; font-size: 12px; font-weight: 650; padding: 5px 10px; cursor: pointer;
}
.demo-scope .crx .hd-badge { margin-left: auto; }
.demo-scope .crx button { font-family: inherit; }
.demo-scope .crx :focus-visible { outline: 2px solid var(--cr-amber); outline-offset: 2px; }
.demo-scope .crx .app-nav :focus-visible { outline-color: #7fd3e2; }

/* rail */
.demo-scope .crx .an-cfg { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; color: #aebfdb; padding: 9px 10px 3px; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.demo-scope .crx .an-cfg svg { width: 12px; height: 12px; transition: transform .15s; }
.demo-scope .crx .an-cfg[aria-expanded="true"] svg { transform: rotate(90deg); }
.demo-scope .crx .an-sep { height: 1px; background: rgba(255,255,255,.12); margin: 8px 6px; }

/* page chrome */
.demo-scope .crx .crumbs { font-size: 11.5px; color: var(--cr-faint); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-scope .crx .crumbs button { background: none; border: 0; padding: 0; color: var(--cr-faint); font-size: 11.5px; cursor: pointer; }
.demo-scope .crx .crumbs button:hover { color: var(--cr-amber); text-decoration: underline; }
.demo-scope .crx .crumbs b { color: var(--cr-ink); font-weight: 650; }
.demo-scope .crx .phead { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px;
  background: radial-gradient(120% 140% at 88% 0%, #1d5566 0%, #102438 48%, #0d1c2e 100%); color: #fff; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(13,33,67,.18); }
.demo-scope .crx .phicon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: #1f7f8f; color: #e9fbff; }
.demo-scope .crx .phicon svg { width: 20px; height: 20px; }
.demo-scope .crx .phkicker { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 2px 9px; margin-bottom: 4px; color: #d6eef3; }
.demo-scope .crx .phtitle { margin: 0; font-size: 21px; line-height: 1.2; color: #fff; letter-spacing: -.01em; font-weight: 750; }
.demo-scope .crx .phsub { margin: 3px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); }

.demo-scope .crx .card { background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.demo-scope .crx .card > h3, .demo-scope .crx .sech { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-soft); margin: 0 0 8px; }
.demo-scope .crx .card p { font-size: 12.5px; color: var(--cr-soft); margin: 0 0 8px; line-height: 1.5; }
.demo-scope .crx .note { font-size: 11.5px; color: var(--cr-faint); line-height: 1.5; margin: 6px 0 0; }
.demo-scope .crx .passive { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--cr-line); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--cr-soft); margin-bottom: 12px; }
.demo-scope .crx .row-end { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.demo-scope .crx .lede { background: #fff; border: 1px solid var(--cr-line); border-left: 4px solid var(--cr-amber); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; }
.demo-scope .crx .lede.ok { border-left-color: var(--good); }
.demo-scope .crx .ledehead { font-size: 15px; font-weight: 650; color: var(--cr-ink); line-height: 1.4; }
.demo-scope .crx .ledehead b { color: var(--cr-amber); }
.demo-scope .crx .lede.ok .ledehead b { color: var(--good); }
.demo-scope .crx .ledebody { font-size: 12.5px; color: var(--cr-soft); margin: 6px 0 0; line-height: 1.55; max-width: 78ch; }
.demo-scope .crx .ledeact { margin-top: 10px; background: var(--cr-amber-soft); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--cr-ink); line-height: 1.5; }
.demo-scope .crx .lede.ok .ledeact { background: var(--good-bg); }
.demo-scope .crx .ledeactk { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-amber); margin-bottom: 3px; }
.demo-scope .crx .lede.ok .ledeactk { color: var(--good); }

/* KPI tiles */
.demo-scope .crx .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 14px; }
.demo-scope .crx .kpi { position: relative; text-align: left; background: #fff; border: 1px solid var(--cr-line); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.demo-scope .crx .kpi:hover { border-color: var(--cr-amber-line); box-shadow: 0 2px 8px rgba(13,33,67,.07); }
.demo-scope .crx .kpi.hot { border: 1.5px solid var(--cr-amber); }
.demo-scope .crx .kpi .n { font-size: 24px; font-weight: 750; letter-spacing: -.02em; color: var(--cr-ink); line-height: 1.1; }
.demo-scope .crx .kpi.hot .n { color: var(--cr-amber); }
.demo-scope .crx .kpi .l { font-size: 11.5px; color: var(--cr-soft); margin-top: 4px; font-weight: 600; }
.demo-scope .crx .kpi .s { font-size: 10.5px; color: var(--cr-faint); margin-top: 2px; }
.demo-scope .crx .kpi::after { content: ''; position: absolute; top: 8px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: #b5c0d0; }

/* buttons, pills, chips */
.demo-scope .crx .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid var(--cr-line);
  background: #fff; color: var(--cr-ink); font-size: 12px; font-weight: 650; padding: 6px 11px; cursor: pointer; line-height: 1.2; }
.demo-scope .crx .btn:hover { border-color: var(--cr-amber); color: var(--cr-amber); }
.demo-scope .crx .btn.pri { background: var(--cr-amber); border-color: var(--cr-amber); color: #fff; }
.demo-scope .crx .btn.pri:hover { background: #963f06; color: #fff; }
.demo-scope .crx .btn.sm { font-size: 11px; padding: 4px 8px; }
.demo-scope .crx .btn[disabled] { opacity: .55; cursor: default; }
.demo-scope .crx .lnk { background: none; border: 0; padding: 0; color: var(--cr-amber); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.demo-scope .crx .lnk:hover { text-decoration: underline; }
.demo-scope .crx .lnks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.demo-scope .crx .lnks .lnk { color: var(--cr-soft); font-weight: 500; font-size: 11px; }
.demo-scope .crx .lnks .lnk:hover { color: var(--cr-amber); }
.demo-scope .crx .pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.demo-scope .crx .b-good { background: var(--good); color: #fff; }
.demo-scope .crx .b-fair { background: var(--fair); color: #fff; }
.demo-scope .crx .b-poor { background: var(--poor); color: #fff; }
.demo-scope .crx .b-bad, .demo-scope .crx .b-failed { background: var(--bad); color: #fff; }
.demo-scope .crx .tag { display: inline-block; border: 1px solid var(--cr-line); border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cr-soft); background: #fff; white-space: nowrap; }
.demo-scope .crx .tag.ok { color: var(--good); border-color: #a9d8bd; background: var(--good-bg); }
.demo-scope .crx .tag.warn { color: #8a5a00; border-color: #e6c98c; background: var(--fair-bg); }
.demo-scope .crx .tag.bad { color: var(--bad-text); border-color: #eab1ab; background: var(--bad-bg); }
.demo-scope .crx .tag.amb { color: var(--cr-amber); border-color: var(--cr-amber-line); background: var(--cr-amber-soft); }
.demo-scope .crx .chip { display: inline-block; border: 1px solid var(--cr-line); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; color: var(--cr-soft); background: var(--cr-panel2); margin: 2px 4px 2px 0; }
.demo-scope .crx .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-scope .crx .fchip { border: 1px solid var(--cr-line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 600; color: var(--cr-soft); cursor: pointer; }
.demo-scope .crx .fchip[aria-pressed="true"] { background: var(--cr-amber-soft); border-color: var(--cr-amber); color: var(--cr-amber); }
.demo-scope .crx .mono { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.demo-scope .crx .hash { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; word-break: break-all; }

/* tables */
.demo-scope .crx .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.demo-scope .crx table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
.demo-scope .crx table.t th { text-align: left; font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint);
  padding: 8px 10px; border-bottom: 1px solid var(--cr-line); white-space: nowrap; }
.demo-scope .crx table.t td { padding: 10px; border-bottom: 1px solid var(--cr-line2); vertical-align: top; color: var(--cr-ink); }
.demo-scope .crx table.t tr[data-open], .demo-scope .crx table.t tr[data-row] { cursor: pointer; }
.demo-scope .crx table.t tr[data-open]:hover td, .demo-scope .crx table.t tr[data-row]:hover td { background: #fbf7f1; }
.demo-scope .crx table.t tr.on td { background: var(--cr-amber-soft); }
.demo-scope .crx .sub { display: block; font-size: 11px; color: var(--cr-faint); margin-top: 2px; }
.demo-scope .crx .fresh { color: var(--good); }
.demo-scope .crx .scr { font-weight: 750; margin-left: 4px; }

.demo-scope .crx .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.demo-scope .crx .search { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.demo-scope .crx input[type="search"], .demo-scope .crx input[type="text"], .demo-scope .crx input[type="url"], .demo-scope .crx input[type="number"],
.demo-scope .crx select, .demo-scope .crx textarea {
  font: inherit; font-size: 12.5px; border: 1px solid var(--cr-line); border-radius: 8px; padding: 6px 9px; background: #fff; color: var(--cr-ink); min-width: 0; }
.demo-scope .crx input[type="search"] { flex: 1; }
.demo-scope .crx textarea { width: 100%; min-height: 58px; resize: vertical; }
.demo-scope .crx label.f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 650; color: var(--cr-soft); }
.demo-scope .crx .form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.demo-scope .crx .status { font-size: 12px; color: var(--good); font-weight: 600; min-height: 1em; }
.demo-scope .crx .pager { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--cr-faint); }

/* rows (hotspots, far-end, alerts) */
.demo-scope .crx .frow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--cr-line);
  border-left: 4px solid var(--cr-line); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; }
.demo-scope .crx .frow:hover { border-color: var(--cr-amber-line); }
.demo-scope .crx .frow.critical, .demo-scope .crx .frow.us { border-left-color: var(--bad); }
.demo-scope .crx .frow.high, .demo-scope .crx .frow.them { border-left-color: var(--poor); }
.demo-scope .crx .frow.medium, .demo-scope .crx .frow.warning { border-left-color: var(--fair); }
.demo-scope .crx .frow.low, .demo-scope .crx .frow.info { border-left-color: #2f7f9c; }
.demo-scope .crx .frow.clean { border-left-color: var(--good); }
.demo-scope .crx .frow .ft { font-weight: 650; font-size: 13px; color: var(--cr-ink); line-height: 1.35; }
.demo-scope .crx .frow .fm { margin-top: 3px; font-size: 11px; color: var(--cr-faint); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.demo-scope .crx .frow .fd { margin-top: 5px; font-size: 12px; color: var(--cr-soft); line-height: 1.5; }
.demo-scope .crx .frow .fr { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; white-space: nowrap; }
.demo-scope .crx .sev { display: inline-block; border-radius: 6px; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.demo-scope .crx .sev.critical { background: var(--bad); } .demo-scope .crx .sev.high { background: var(--poor); }
.demo-scope .crx .sev.medium, .demo-scope .crx .sev.warning { background: var(--fair); } .demo-scope .crx .sev.low, .demo-scope .crx .sev.info { background: #2f7f9c; }
.demo-scope .crx .vtag { border: 1.5px solid currentColor; border-radius: 7px; padding: 4px 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.demo-scope .crx .vtag.us { color: var(--bad-text); } .demo-scope .crx .vtag.them { color: var(--poor); } .demo-scope .crx .vtag.clean { color: var(--good); } .demo-scope .crx .vtag.shared { color: #2f7f9c; }

/* bars */
.demo-scope .crx .bars { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 7px 12px; align-items: center; font-size: 12px; }
.demo-scope .crx .bars > button { display: contents; cursor: pointer; }
.demo-scope .crx .btrack { height: 8px; background: var(--cr-line2); border-radius: 999px; overflow: hidden; }
.demo-scope .crx .btrack i { display: block; height: 100%; background: var(--cr-amber); border-radius: 999px; }
.demo-scope .crx .barrow { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 64px; gap: 12px; align-items: center; width: 100%;
  background: none; border: 0; padding: 5px 0; font: inherit; font-size: 12px; color: var(--cr-ink); text-align: left; cursor: pointer; }
.demo-scope .crx .barrow:hover { color: var(--cr-amber); }
.demo-scope .crx .barrow .v { text-align: right; color: var(--cr-soft); font-variant-numeric: tabular-nums; }
.demo-scope .crx .mix { display: flex; height: 16px; border-radius: 6px; overflow: hidden; margin: 6px 0 8px; }
.demo-scope .crx .mix button { border: 0; padding: 0; cursor: pointer; min-width: 4px; }
.demo-scope .crx .legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--cr-soft); }
.demo-scope .crx .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.demo-scope .crx .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.demo-scope .crx .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.demo-scope .crx .li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--cr-line2); font-size: 12px; width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; color: var(--cr-ink); font-family: inherit; }
.demo-scope .crx .li:hover { color: var(--cr-amber); }
.demo-scope .crx .li span:last-child { color: var(--cr-faint); white-space: nowrap; }

/* meeting bar */
.demo-scope .crx .mbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.demo-scope .crx .mtabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--cr-line); border-radius: 8px; overflow: hidden; background: #fff; }
.demo-scope .crx .mtabs button { border: 0; border-right: 1px solid var(--cr-line); background: #fff; padding: 6px 10px; font-size: 11.5px; font-weight: 650; color: var(--cr-soft); cursor: pointer; }
.demo-scope .crx .mtabs button:last-child { border-right: 0; }
.demo-scope .crx .mtabs button.on { background: var(--cr-amber); color: #fff; }

/* the report sheet */
.demo-scope .crx .sheet { background: #fff; border: 1px solid var(--cr-line); border-radius: 14px; max-width: 900px; margin: 0 auto 10px; overflow: hidden; }
.demo-scope .crx .sheet > section, .demo-scope .crx .sheet > details, .demo-scope .crx .sheet > header, .demo-scope .crx .sheet > footer { padding: 16px 20px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .samplemark { background: #f7efe2; font-size: 11.5px; color: #5b4630; padding: 10px 20px; line-height: 1.5; }
.demo-scope .crx .brand { font-size: 11px; font-weight: 700; color: var(--cr-amber); letter-spacing: .02em; }
.demo-scope .crx .brand span { color: var(--cr-faint); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-left: 6px; font-size: 9.5px; }
.demo-scope .crx .sheet h2.mt { font-size: 21px; margin: 6px 0 2px; color: var(--cr-ink); letter-spacing: -.01em; }
.demo-scope .crx .meta { font-size: 11.5px; color: var(--cr-faint); }
.demo-scope .crx .verdict { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: center; }
.demo-scope .crx .scorebig { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--cr-ink); }
.demo-scope .crx .scorebig small { font-size: 15px; color: var(--cr-faint); font-weight: 600; }
.demo-scope .crx .thesis { font-weight: 700; font-size: 14px; text-align: right; color: var(--cr-ink); }
.demo-scope .crx .fidwrap { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); }
.demo-scope .crx .fidbar { width: 90px; height: 4px; background: var(--cr-line2); border-radius: 2px; overflow: hidden; }
.demo-scope .crx .fidbar i { display: block; height: 100%; background: var(--cr-amber); }
.demo-scope .crx .findings { margin-top: 12px; border-top: 1px dashed var(--cr-line); padding-top: 10px; }
.demo-scope .crx .fnd { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; font-size: 12px; padding: 4px 0; align-items: baseline; }
.demo-scope .crx .fnd .k { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-faint); }
.demo-scope .crx .fnd.cap .k, .demo-scope .crx .fnd.cap b { color: var(--cr-amber); }
.demo-scope .crx .fnd .a { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.demo-scope .crx .fixlead { background: var(--cr-amber-soft); border-left: 4px solid var(--cr-amber); }
.demo-scope .crx .sech2 { display: flex; gap: 8px; align-items: center; font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-soft); margin-bottom: 8px; }
.demo-scope .crx .sech2 svg { width: 15px; height: 15px; color: var(--cr-amber); }
.demo-scope .crx .step { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font-size: 12.5px; line-height: 1.5; padding: 3px 0; }
.demo-scope .crx .step .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); padding-top: 3px; }
.demo-scope .crx .farfix { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--cr-amber); }
.demo-scope .crx .env { display: flex; gap: 3px; align-items: stretch; height: 62px; background: var(--cr-panel2); border: 1px solid var(--cr-line2); border-radius: 8px; padding: 6px; margin: 8px 0 6px; }
.demo-scope .crx .env i { flex: 1; border-radius: 2px; }
.demo-scope .crx .mosbig { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.demo-scope .crx .mosbig small { font-size: 12px; color: var(--cr-faint); font-weight: 600; margin-left: 4px; }
.demo-scope .crx svg.trace { width: 100%; height: auto; display: block; }
.demo-scope .crx .pc { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; align-items: stretch; margin-top: 8px; }
.demo-scope .crx .pcs { border: 1px solid var(--cr-line); border-radius: 10px; padding: 11px 13px; background: #fff; }
.demo-scope .crx .pcs.observed { border-left: 4px solid var(--good); }
.demo-scope .crx .pcs.dark { border-left: 4px solid var(--cr-faint); background: var(--cr-panel2); }
.demo-scope .crx .pcs .e { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); }
.demo-scope .crx .pcs .lb { font-weight: 700; font-size: 13px; margin-top: 5px; }
.demo-scope .crx .pcs .st { font-size: 11.5px; color: var(--bad-text); font-weight: 650; }
.demo-scope .crx .pcs .rs { font-size: 11px; color: var(--cr-faint); margin-top: 4px; }
.demo-scope .crx .pcm { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10.5px; color: var(--cr-soft); padding: 0 6px; }
.demo-scope .crx .pcm i { display: block; width: 100%; border-top: 2px dashed var(--cr-line-strong, #9aa7bb); margin-bottom: 6px; }
.demo-scope .crx .pcm span { color: var(--cr-amber); font-weight: 600; }
.demo-scope .crx details.topo > summary { cursor: pointer; font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-soft); list-style: none; }
.demo-scope .crx details.topo > summary::-webkit-details-marker { display: none; }
.demo-scope .crx details.topo > summary::before { content: '+ '; color: var(--cr-amber); }
.demo-scope .crx details.topo[open] > summary::before { content: '- '; }
.demo-scope .crx .topobox { margin-top: 10px; }
.demo-scope .crx .topobox .fc { font-size: 12px; color: var(--cr-soft); background: var(--cr-panel2); border: 1px solid var(--cr-line2); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.demo-scope .crx .topobox svg { min-width: 620px; }
.demo-scope .crx .q4 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.demo-scope .crx .q4 > div { padding: 12px 20px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .q4 > div:nth-child(odd) { border-right: 1px solid var(--cr-line2); }
.demo-scope .crx .qk { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); margin-bottom: 4px; }
.demo-scope .crx .qv { font-size: 12.5px; line-height: 1.5; }
.demo-scope .crx .ev { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .ev .t { font-size: 11.5px; font-weight: 700; color: var(--cr-soft); text-align: right; font-variant-numeric: tabular-nums; }
.demo-scope .crx .ev .h { font-size: 12.5px; font-weight: 650; }
.demo-scope .crx .ev .d { font-size: 12px; color: var(--cr-soft); line-height: 1.45; }
.demo-scope .crx .ev .s { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-faint); margin-top: 3px; }
.demo-scope .crx .ev.said { background: #fff8ef; }
.demo-scope .crx .ev.said .h::before { content: 'Said: '; color: var(--cr-amber); }
.demo-scope .crx .say { margin-top: 12px; background: var(--cr-panel2); border: 1px solid var(--cr-line2); border-radius: 10px; padding: 12px; display: grid; gap: 10px; }
.demo-scope .crx .conf { display: flex; gap: 14px; align-items: center; }
.demo-scope .crx .confn { font-size: 34px; font-weight: 800; color: var(--cr-ink); letter-spacing: -.02em; }
.demo-scope .crx .conff { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.demo-scope .crx .conff button { text-align: left; background: var(--cr-panel2); border: 1px solid var(--cr-line2); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; }
.demo-scope .crx .conff button:hover { border-color: var(--cr-amber); }
.demo-scope .crx .conff b { display: block; font-size: 16px; color: var(--cr-ink); }
.demo-scope .crx .conff span { font-size: 11px; color: var(--cr-soft); }
.demo-scope .crx .stsub { font-size: 11px; font-weight: 750; color: var(--cr-soft); margin: 12px 0 6px; }
.demo-scope .crx .cl { border: 1px solid var(--cr-line2); border-left: 3px solid var(--good); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 12px; }
.demo-scope .crx .cl.uw { border-left-color: var(--cr-faint); background: var(--cr-panel2); }
.demo-scope .crx .cl.cause { border-left-color: var(--bad); }
.demo-scope .crx .cl b { display: block; margin-bottom: 2px; }
.demo-scope .crx .cl span { color: var(--cr-soft); }
.demo-scope .crx .epi { border: 1px solid var(--cr-line2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.demo-scope .crx .epi-h { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
.demo-scope .crx .epi-c { border-left: 3px solid var(--poor); padding: 4px 10px; margin: 6px 0; font-size: 12px; }
.demo-scope .crx .lift-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cr-line2); font-size: 12px; }
.demo-scope .crx .ledger { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--cr-panel2); font-size: 11px; color: var(--cr-faint); }

/* replay */
.demo-scope .crx .rp { background: #fff; border: 1px solid var(--cr-line); border-radius: 14px; overflow: hidden; max-width: 900px; margin: 0 auto; }
.demo-scope .crx .rp-hd { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .rp-stage { padding: 12px 18px 10px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .transport { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.demo-scope .crx .playbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cr-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--cr-ink); }
.demo-scope .crx .playbtn svg { width: 15px; height: 15px; }
.demo-scope .crx input.scrub { flex: 1 1 160px; accent-color: var(--cr-amber); min-width: 120px; }
.demo-scope .crx .tcode { font-size: 12px; color: var(--cr-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-scope .crx .jump { border: 1px solid var(--cr-amber-line); color: var(--cr-amber); background: #fff; border-radius: 7px; font-size: 11.5px; font-weight: 650; padding: 5px 9px; cursor: pointer; }
.demo-scope .crx .jump:hover { background: var(--cr-amber-soft); }
.demo-scope .crx .speed { border: 1px solid var(--cr-line); background: #fff; border-radius: 6px; font-size: 11px; padding: 4px 7px; cursor: pointer; font-variant-numeric: tabular-nums; }
.demo-scope .crx .rp-now { display: grid; grid-template-columns: 1fr 1fr; }
.demo-scope .crx .rp-now > div { padding: 14px 18px; }
.demo-scope .crx .rp-now > div:first-child { border-right: 1px solid var(--cr-line2); background: var(--cr-panel2); }
.demo-scope .crx .eq { display: flex; gap: 3px; align-items: flex-end; height: 64px; background: #fff; border: 1px solid var(--cr-line2); border-radius: 8px; padding: 6px; margin: 8px 0; }
.demo-scope .crx .eq i { flex: 1; border-radius: 2px; transition: height .12s linear; }
.demo-scope .crx .weight { font-size: 11px; color: var(--cr-soft); }
.demo-scope .crx .meter { margin-bottom: 9px; }
.demo-scope .crx .meter .top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cr-soft); }
.demo-scope .crx .meter .top b { color: var(--cr-ink); font-variant-numeric: tabular-nums; }
.demo-scope .crx .meter .tr { height: 5px; background: var(--cr-line2); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.demo-scope .crx .meter .tr i { display: block; height: 100%; border-radius: 999px; }
.demo-scope .crx .prov { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--good); font-weight: 750; }
.demo-scope .crx .moment { padding: 11px 18px; border-top: 1px solid var(--cr-line2); border-bottom: 1px solid var(--cr-line2); font-size: 12.5px; background: var(--cr-panel2); line-height: 1.5; }
.demo-scope .crx .moment .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-right: 10px; color: var(--good); }
.demo-scope .crx .moment.m-poor .k, .demo-scope .crx .moment.m-bad .k { color: var(--bad-text); }
.demo-scope .crx .moment.m-poor, .demo-scope .crx .moment.m-bad { background: #fdf2f0; }
.demo-scope .crx .five { padding: 12px 18px; }
.demo-scope .crx .five > div { display: grid; grid-template-columns: 60px 1fr; gap: 12px; font-size: 12.5px; padding: 4px 0; line-height: 1.5; }
.demo-scope .crx .five .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-faint); padding-top: 3px; }

/* paired lanes */
.demo-scope .crx .lanes { border-top: 1px solid var(--cr-line2); }
.demo-scope .crx .lane { display: grid; grid-template-columns: 230px 1fr 130px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .lane > div { padding: 12px 14px; min-width: 0; }
.demo-scope .crx .lane .lc { border-right: 1px solid var(--cr-line2); }
.demo-scope .crx .lane.local .lc { box-shadow: inset 3px 0 0 var(--bad); }
.demo-scope .crx .lane .lr { border-left: 1px solid var(--cr-line2); text-align: center; }
.demo-scope .crx .lane.dark .lg { background: repeating-linear-gradient(-45deg, #f6f8fb, #f6f8fb 6px, #eef2f6 6px, #eef2f6 12px); display: grid; place-items: center; font-size: 12px; color: var(--cr-soft); text-align: center; }
.demo-scope .crx .fct { display: grid; grid-template-columns: 42px 1fr; gap: 6px; font-size: 11.5px; margin-top: 4px; }
.demo-scope .crx .fct .k { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-faint); padding-top: 2px; }
.demo-scope .crx .fct.cause .v { color: var(--bad-text); font-weight: 650; }
.demo-scope .crx .midbox { margin: 10px 18px; border: 1px dashed var(--cr-line-strong, #9aa7bb); border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; background: var(--cr-panel2); }
.demo-scope .crx .midbox span { color: var(--cr-amber); font-size: 11px; }
.demo-scope .crx .lanefix { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cr-line2); font-size: 12px; line-height: 1.5; }

/* deep dive, evidence, rediagnosis */
.demo-scope .crx .ddbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px; background: var(--cr-panel2); border-bottom: 1px solid var(--cr-line2); align-items: center; }
.demo-scope .crx .hyp { border: 1px solid var(--cr-line2); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; font-size: 12px; background: var(--cr-panel2); }
.demo-scope .crx .hyp.acc { border-color: #a9d8bd; background: #f3faf6; }
.demo-scope .crx .hyp .m { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 8px; color: var(--cr-faint); }
.demo-scope .crx .hyp.acc .m { color: var(--good); }
.demo-scope .crx .rc { border: 1px solid var(--cr-amber-line); color: var(--cr-amber); background: #fff; border-radius: 5px; font-size: 10px; padding: 0 5px; margin-left: 3px; cursor: pointer; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.demo-scope .crx .rrow { display: grid; grid-template-columns: 34px minmax(110px, 170px) 1fr 100px; gap: 10px; font-size: 11px; padding: 5px 0; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .rrow.hl { background: var(--cr-amber-soft); }
.demo-scope .crx .kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cr-line2); font-size: 12px; }
.demo-scope .crx .kv > span:first-child { color: var(--cr-faint); }
.demo-scope .crx .sealok { display: flex; gap: 8px; align-items: center; font-weight: 750; font-size: 13.5px; }
.demo-scope .crx .sealok i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); display: inline-block; }
.demo-scope .crx .cmd { background: var(--cr-panel2); border: 1px solid var(--cr-line); border-radius: 8px; padding: 9px 12px; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; overflow-x: auto; white-space: nowrap; }
.demo-scope .crx .tl { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cr-line2); font-size: 12px; }

/* home */
.demo-scope .crx .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; padding: 22px; border-radius: 16px; margin-bottom: 16px;
  background: radial-gradient(120% 140% at 90% 0%, #1b5163 0%, #0f2336 50%, #0b1929 100%); color: #fff; }
.demo-scope .crx .hero h2 { color: #fff; font-size: 26px; line-height: 1.15; margin: 8px 0 10px; letter-spacing: -.02em; }
.demo-scope .crx .hero p { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.55; margin: 0 0 12px; }
.demo-scope .crx .hero .k { display: inline-block; font-size: 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 3px 10px; color: #d8f1f6; }
.demo-scope .crx .hero .btn { border-color: transparent; }
.demo-scope .crx .herotrace { background: #0c1a28; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px; }
.demo-scope .crx .hcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.demo-scope .crx .hcard { text-align: left; background: #fff; border: 1px solid var(--cr-line); border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: inherit; }
.demo-scope .crx .hcard:hover { border-color: var(--cr-amber-line); }
.demo-scope .crx .hcard b { display: block; font-size: 13px; margin-bottom: 5px; }
.demo-scope .crx .hcard span { font-size: 12px; color: var(--cr-soft); line-height: 1.5; }
.demo-scope .crx .hnum { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #1f5f6e; color: #fff; font-weight: 750; font-size: 12px; margin-bottom: 8px; }
.demo-scope .crx .h3 { font-size: 14px; font-weight: 750; margin: 6px 0 10px; color: var(--cr-ink); }

/* dialog */
.demo-scope .crx .ev-panel { position: fixed; inset: 0; z-index: 90; background: rgba(13,28,46,.48); display: flex; align-items: flex-start; justify-content: center; padding: 64px 14px 20px; overflow-y: auto; }
.demo-scope .crx .ev-panel[hidden] { display: none; }
.demo-scope .crx .dlg { background: #fff; border-radius: 14px; width: min(660px, 100%); box-shadow: 0 24px 60px rgba(13,33,67,.3); overflow: hidden; }
.demo-scope .crx .dlg-h { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .dlg-h h3 { margin: 0; font-size: 15px; line-height: 1.35; color: var(--cr-ink); }
.demo-scope .crx .dlg-h p { margin: 3px 0 0; font-size: 11.5px; color: var(--cr-faint); }
.demo-scope .crx .dlg-x { flex: none; border: 1px solid var(--cr-line); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; height: fit-content; }
.demo-scope .crx .dlg-b { padding: 12px 18px 16px; max-height: 70vh; overflow-y: auto; }
.demo-scope .crx .dsec { margin-bottom: 12px; }
.demo-scope .crx .dsec .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-amber); margin-bottom: 3px; }
.demo-scope .crx .dsec .v { font-size: 12.5px; line-height: 1.55; color: var(--cr-ink); }
.demo-scope .crx .dlist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.demo-scope .crx .dlist li { padding: 5px 0; border-bottom: 1px solid var(--cr-line2); }
.demo-scope .crx .dacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.demo-scope .crx pre.out { background: var(--cr-panel2); border: 1px solid var(--cr-line); border-radius: 8px; padding: 10px; font-size: 10.5px; line-height: 1.45; overflow: auto; max-height: 50vh; white-space: pre; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.demo-scope .crx .printsheet { border: 1px solid var(--cr-line); border-radius: 6px; padding: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13,33,67,.08); font-size: 11px; }
.demo-scope .crx .printsheet table { width: 100%; border-collapse: collapse; }
.demo-scope .crx .printsheet td, .demo-scope .crx .printsheet th { border-bottom: 1px solid var(--cr-line2); padding: 4px 6px; text-align: left; vertical-align: top; }

/* assistant */
.demo-scope .crx .ai-fab { position: absolute; right: 16px; bottom: 44px; z-index: 6; border: 0; border-radius: 999px; background: var(--cr-amber); color: #fff;
  font-size: 12.5px; font-weight: 700; padding: 10px 14px; box-shadow: 0 6px 18px rgba(180,83,9,.35); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.demo-scope .crx .ai-fab svg { width: 16px; height: 16px; }
.demo-scope .crx .ai-panel { position: absolute; right: 16px; bottom: 92px; z-index: 7; width: min(380px, calc(100% - 32px)); background: #fff; border: 1px solid var(--cr-line);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(13,33,67,.25); overflow: hidden; }
.demo-scope .crx .ai-panel[hidden] { display: none; }
.demo-scope .crx .ai-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--cr-line2); font-weight: 700; font-size: 13px; }
.demo-scope .crx .ai-off { background: var(--cr-amber-soft); font-size: 11px; color: #6b4a1f; padding: 7px 14px; }
.demo-scope .crx .ai-log { max-height: 300px; overflow-y: auto; padding: 10px 14px; font-size: 12px; }
.demo-scope .crx .ai-q { background: var(--cr-panel2); border-radius: 10px; padding: 7px 10px; margin: 6px 0 6px 30px; }
.demo-scope .crx .ai-a { white-space: pre-wrap; line-height: 1.5; margin: 6px 0 4px; }
.demo-scope .crx .ai-tools { font-size: 10.5px; color: var(--cr-faint); margin-bottom: 8px; }
.demo-scope .crx .ai-sugg { display: grid; gap: 6px; padding: 0 14px 10px; }
.demo-scope .crx .ai-sugg button { text-align: left; border: 1px solid var(--cr-line); background: #fff; border-radius: 8px; padding: 7px 9px; font-size: 11.5px; cursor: pointer; }
.demo-scope .crx .ai-sugg button:hover { border-color: var(--cr-amber); }
.demo-scope .crx .ai-in { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--cr-line2); }
.demo-scope .crx .ai-in input { flex: 1; }

.demo-scope .crx .prog { height: 6px; border-radius: 999px; background: var(--cr-line2); overflow: hidden; margin: 8px 0; }
.demo-scope .crx .prog i { display: block; height: 100%; background: var(--cr-amber); width: 0; transition: width .2s linear; }
.demo-scope .crx .timelinebox { overflow-x: auto; }
.demo-scope .crx .timelinebox svg { min-width: 560px; width: 100%; height: auto; display: block; }
.demo-scope .crx .icat { display: flex; flex-direction: column; gap: 3px; }
.demo-scope .crx .icard { display: grid; grid-template-columns: 1fr auto; gap: 10px; text-align: left; width: 100%; background: #fff; border: 1px solid var(--cr-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer; font: inherit; color: inherit; }
.demo-scope .crx .icard:hover { border-color: var(--cr-amber-line); }
.demo-scope .crx .icard b { font-size: 12.5px; }
.demo-scope .crx .icard span.u { display: block; font-size: 11.5px; color: var(--cr-soft); margin-top: 3px; line-height: 1.45; }
.demo-scope .crx .ilay { display: grid; grid-template-columns: 180px 1fr; gap: 14px; }
.demo-scope .crx .catbtn { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; padding: 6px 9px; border-radius: 7px; font-size: 12px; cursor: pointer; color: var(--cr-soft); text-align: left; }
.demo-scope .crx .catbtn[aria-pressed="true"] { background: var(--cr-amber-soft); color: var(--cr-amber); font-weight: 700; }
.demo-scope .crx .secret { background: #fff8ef; border: 1px solid var(--cr-amber-line); border-radius: 8px; padding: 9px 12px; font-size: 12px; margin-top: 10px; }
.demo-scope .crx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* legacy.css styles some of the same class names for the other demos; take them back here */
.demo-scope .crx.app[data-app="room"] { height: min(800px, calc(100vh - 120px)); min-height: 560px; }
.demo-scope .crx .pill { border-color: transparent; font-size: 11px; }
.demo-scope .crx .verdict { display: grid; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.demo-scope .crx .lede { max-width: none; font-size: inherit; line-height: inherit; }
.demo-scope .crx .brand { display: block; }
.demo-scope .crx .tcode { background: none; border: 0; border-radius: 0; overflow: visible; margin: 0; }
.demo-scope .crx .li { align-items: flex-start; }
.demo-scope .crx .li > span:first-child { min-width: 0; flex: 1 1 auto; }
.demo-scope .crx .tl > span:first-child { min-width: 0; }
.demo-scope .crx .say, .demo-scope .crx .form { grid-template-columns: minmax(0, 1fr); }
.demo-scope .crx .form { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.demo-scope .crx .say > *, .demo-scope .crx .form > *, .demo-scope .crx label.f > * { min-width: 0; max-width: 100%; }

@media (max-width: 900px) {
  .demo-scope .crx .hero { grid-template-columns: 1fr; }
  .demo-scope .crx .lane { grid-template-columns: 1fr; }
  .demo-scope .crx .lane .lc, .demo-scope .crx .lane .lr { border: 0; }
  .demo-scope .crx .lane .lr { text-align: left; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .demo-scope .crx .ilay { grid-template-columns: 1fr; }
  .demo-scope .crx .ilay .icat { flex-direction: row; flex-wrap: wrap; }
  .demo-scope .crx .ilay .catbtn { width: auto; }
}
@media (max-width: 760px) {
  .demo-scope .crx.app { grid-template-columns: minmax(0, 1fr); }
  .demo-scope .crx.app[data-app="room"] { height: calc(100svh - 80px); min-height: 520px; }
  .demo-scope .crx .li, .demo-scope .crx .tl { flex-wrap: wrap; }
  .demo-scope .crx .li span:last-child, .demo-scope .crx .tl span:last-child { white-space: normal; }
  .demo-scope .crx .cr-menu { display: inline-block; }
  .demo-scope .crx .hd-badge { margin-left: 0; }
  .demo-scope .crx .hd-tag { display: none; }
  .demo-scope .crx.nav-open .app-nav { display: block; position: absolute; top: 44px; left: 0; bottom: 0; width: 220px; z-index: 20; overflow-y: auto; box-shadow: 8px 0 30px rgba(0,0,0,.25); }
  .demo-scope .crx .app-main { padding: 12px 10px 70px; }
  .demo-scope .crx .phead { padding: 12px; }
  .demo-scope .crx .phtitle { font-size: 18px; }
  .demo-scope .crx .verdict { grid-template-columns: auto 1fr; }
  .demo-scope .crx .verdict .right { grid-column: 1 / -1; }
  .demo-scope .crx .thesis, .demo-scope .crx .fidwrap { text-align: left; justify-content: flex-start; }
  .demo-scope .crx .q4, .demo-scope .crx .rp-now, .demo-scope .crx .pc { grid-template-columns: 1fr; }
  .demo-scope .crx .q4 > div:nth-child(odd) { border-right: 0; }
  .demo-scope .crx .rp-now > div:first-child { border-right: 0; }
  .demo-scope .crx .pcm { padding: 8px 0; }
  .demo-scope .crx .frow { grid-template-columns: 1fr; }
  .demo-scope .crx .frow .fr { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .demo-scope .crx .sheet > section, .demo-scope .crx .sheet > details, .demo-scope .crx .sheet > header, .demo-scope .crx .sheet > footer, .demo-scope .crx .q4 > div { padding: 12px; }
  .demo-scope .crx .ev { grid-template-columns: 58px 1fr; gap: 8px; }
  .demo-scope .crx .kv, .demo-scope .crx .lanefix, .demo-scope .crx .lift-row { grid-template-columns: 1fr; gap: 2px; }
  .demo-scope .crx .rrow { grid-template-columns: 30px 1fr; }
  .demo-scope .crx .rrow span:nth-child(3), .demo-scope .crx .rrow span:nth-child(4) { grid-column: 2; }
  .demo-scope .crx .barrow, .demo-scope .crx .bars { grid-template-columns: 90px 1fr 50px; gap: 8px; }
  .demo-scope .crx table.mtab thead { display: none; }
  .demo-scope .crx table.mtab, .demo-scope .crx table.mtab tbody, .demo-scope .crx table.mtab tr, .demo-scope .crx table.mtab td { display: block; width: auto; }
  .demo-scope .crx table.mtab tr { border-bottom: 1px solid var(--cr-line); padding: 6px 0; }
  .demo-scope .crx table.mtab td { border: 0; padding: 3px 8px; }
  .demo-scope .crx .ai-fab { bottom: 40px; right: 10px; padding: 9px 12px; }
  .demo-scope .crx .ai-panel { right: 10px; bottom: 86px; width: calc(100% - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-scope .crx .eq i, .demo-scope .crx .prog i, .demo-scope .crx .an-cfg svg { transition: none; }
}
.demo-scope .crx .hcard .hnum { color: #fff; font-size: 12px; }
.demo-scope .crx .app-nav .an-brand .tag { background: none; border: 0; padding: 0; border-radius: 0; color: #aebfdb; font-size: 8px; font-weight: 600; letter-spacing: .1em; white-space: normal; }