/* Consolidated design system: base + neon-glass + brighter-pastel + aurora-motion layers merged into one set of rules (previously four stacked override passes redefining the same selectors). */
    /* Side gutter for the app shell on phones. `main`'s padding and the topbar's negative
       margin MUST use the same value -- they cancel each other out, and hardcoding them
       separately is what previously left the topbar hanging 5px off both edges. */
    :root { --app-gutter:18px; }
    :root { color-scheme:dark; --bg:#070814; --panel:#111429; --panel-2:#0d1022; --line:#2b315d; --text:#f4f4ff; --muted:#a1a8c6; --accent:#a78bfa; --mint:#5eead4; --warn:#fbbf72; --bad:#fb7185; }
    * { box-sizing:border-box; }
    body { margin:0; background:radial-gradient(circle at 6% 0%,#a78bfa42 0,transparent 34%),radial-gradient(circle at 98% 8%,#67e8f942 0,transparent 30%),radial-gradient(circle at 55% 100%,#f0abfc24 0,transparent 36%),#101225; color:var(--text); font:14px Inter,ui-sans-serif,system-ui,sans-serif; min-height:100vh; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; border:0; border-radius:9px; padding:10px 13px; color:#09111f; background:linear-gradient(120deg,#c4b5fd,#7dd3fc); font-weight:800; box-shadow:0 8px 24px #8b5cf633; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease; background-size:180% 180%; animation:gradient-shift 7s ease infinite; }
    button:hover { filter:brightness(1.08); }
    button.secondary { background:linear-gradient(135deg,#202747dd,#17213ddd); color:#e2e8ff; border:1px solid #344666; border-color:#464d88; box-shadow:none; }
    button:disabled { opacity:.45; cursor:not-allowed; }
    input,select,textarea { width:100%; padding:10px 11px; color:#f8f9ff; border:1px solid var(--line); border-radius:8px; background:#171c39ef; border-color:#58639d; box-shadow:inset 0 1px #ffffff08; }
    input:focus,select:focus,textarea:focus { outline:2px solid #8fa5ff33; border-color:#748eff; }
    textarea { min-height:120px; resize:vertical; font:12px ui-monospace,monospace; }
    /* The rule above sizes text fields, and a checkbox is not one. Left at width:100% a checkbox
       claims the whole row it sits in and squeezes its own label into a two-character column —
       which is exactly what it did to the tools-only toggle. Applies to radios for the same
       reason, so the next one added does not rediscover this. */
    input[type="checkbox"], input[type="radio"] {
      width:auto; min-width:0; padding:0; box-shadow:none; border-radius:4px;
      flex:0 0 auto; accent-color:#7dd3fc;
    }
    label { display:block; margin:14px 0 6px; color:#aab9d5; font-size:12px; font-weight:700; }
    small,.muted { color:var(--muted); }
    .hidden { display:none !important; }
    /* A list that grows without bound grows the page with it. Capping the height keeps the
       pager reachable without scrolling the whole window — the point of a pager is lost if you
       have to scroll past every row to reach it. Scrolls inside itself instead. */
    .scroll-list { max-height:340px; overflow-y:auto; overscroll-behavior:contain;
      padding-right:6px; border-radius:9px; }
    /* The history timeline groups rows under day headings, so it needs more room before the cap
       bites — otherwise a single day of activity is already taller than the box. */
    #historyTimeline.scroll-list { max-height:460px; }
    /* An empty list should not reserve blank panel height, but it must not opt out of scrolling
       either — `.empty` is only the placeholder state, and the same element becomes the populated
       list. max-height stays; the element simply has nothing to overflow while it is empty. */
    .empty.scroll-list { overflow:visible; }
    .scroll-list::-webkit-scrollbar { width:9px; }
    .scroll-list::-webkit-scrollbar-track { background:#141a2e66; border-radius:9px; }
    .scroll-list::-webkit-scrollbar-thumb { background:#2c3766; border-radius:9px; }
    .scroll-list::-webkit-scrollbar-thumb:hover { background:#3c4a84; }
    /* Pager under a list. Stays out of the way when there is only one page — the JS hides it
       rather than rendering disabled buttons that look like something is broken. */
    .pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
    .pager .muted { font-size:11.5px; }
    .pager button[disabled] { opacity:.4; cursor:default; }
    /* Sub-tabs inside the Admin page. Sits under the topbar as a row of segmented controls, so
       the page shows one concern at a time instead of stacking all of them into one scroll. */
    .subnav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:4px;
      border:1px solid #202b40; border-radius:11px; background:#141a2e66; }
    .subnav button { flex:1 1 auto; min-width:96px; padding:8px 12px; border:0; border-radius:8px;
      background:transparent; color:#92a2c0; font:inherit; font-size:12.5px; font-weight:600;
      cursor:pointer; box-shadow:none; }
    .subnav button:hover { color:#e0e8ff; background:#202448cc; }
    .subnav button.active { color:#09111f; background:linear-gradient(120deg,#c4b5fd,#7dd3fc); }
    /* History timeline. The project name leads because it is the only field a person recognises
       a run by; everything else is supporting detail at one step down. */
    .history-day { margin:18px 0 8px; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.12em;
      text-transform:uppercase; color:#63718d; }
    .history-day:first-child { margin-top:4px; }
    .history-row { display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
      padding:12px 14px; border:1px solid #202b40; border-radius:11px; margin-bottom:8px; background:#141a2e66; }
    .history-row.is-failed { border-color:#5c2b39; background:#2a141c55; }
    .history-row.is-money { border-style:dashed; background:transparent; }
    .history-main { min-width:0; }
    .history-title { font-size:14px; font-weight:600; }
    .history-title .unnamed { color:#7d86ad; font-weight:400; }
    .history-meta { margin:4px 0 0; font-size:11.5px; color:#92a2c0; }
    .history-amount { flex:none; text-align:right; font-size:13px; font-weight:700; white-space:nowrap; }
    .history-amount small { display:block; font-weight:400; font-size:10.5px; color:#7d86ad; margin-top:2px; }
    .history-amount.is-credit { color:#7ee787; }
    .history-amount.is-refunded { color:#fbbf72; }
    /* The `hidden` attribute only carries the UA default `[hidden]{display:none}`, specificity
       (0,1,0) — so any rule with a class beats it. `.nav button{display:flex}` below did exactly
       that, which meant `adminNavButton.hidden = true` silently did nothing and every account saw
       the Admin tab. Matching `.hidden`'s !important here makes the attribute mean what it says,
       for this and any element hidden that way later. */
    [hidden] { display:none !important; }
    /* align-items:flex-start, not center: the label wraps to two lines, and centring floated the
       checkbox to the middle of the text block instead of sitting against its first line. */
    .ai-toggle { display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:11.5px;
      line-height:1.55; color:var(--muted); cursor:pointer; }
    .ai-toggle input { margin:2px 0 0; width:14px; height:14px; }
    .ai-toggle strong { color:#e0e8ff; font-weight:600; }
    .shell { min-height:100vh; display:grid; grid-template-columns:236px minmax(0,1fr); align-items:start; position:relative; isolation:isolate; }
    .sidebar { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; padding:24px 14px; border-right:1px solid #202b40; background:linear-gradient(180deg,#1a1d3adc,#101328ef); display:flex; flex-direction:column; border-right-color:#303563; backdrop-filter:blur(18px); }
    .brand { display:flex; gap:10px; align-items:center; padding:0 8px 28px; }
    .mark { width:58px; height:58px; display:grid; place-items:center; animation:mark-float 4s ease-in-out infinite; }
    .mark img { width:100%; height:100%; object-fit:contain; }
    .rabbit-visitor { position:fixed; top:0; left:0; z-index:500; pointer-events:none; opacity:0; transition:opacity .35s ease, left 2.1s cubic-bezier(.45,0,.55,1); }
    .rabbit-visitor.visible { opacity:1; }
    .rabbit-visitor .frame { width:62px; height:62px; display:block; object-fit:contain; filter:drop-shadow(0 4px 6px #00000055); }
    .rabbit-visitor.bobbing .frame { animation:rabbit-bob .32s ease-in-out infinite; }
    @keyframes rabbit-bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-6px) rotate(3deg); } }
    @media (prefers-reduced-motion:reduce) { .rabbit-visitor { display:none !important; } }
    .brand strong,.brand span { display:block; }
    .brand strong { font-size:16px; }
    .brand span { margin-top:2px; color:#a5afd0; font-size:11px; }
    .nav-label { padding:0 10px 8px; color:#63718d; font-size:10px; font-weight:900; letter-spacing:.14em; }
    .nav { display:grid; gap:4px; }
    .nav button { display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; color:#92a2c0; border:1px solid transparent; background:transparent; text-align:left; border-radius:10px; transition:background .16s ease,color .16s ease,transform .16s ease; }
    .nav button.active { color:#e0e8ff; border-color:#8c8ed6; background:linear-gradient(100deg,#3d3b78e8,#254161e8); box-shadow:inset 3px 0 #67e8f9,0 7px 22px #11174266; }
    .nav button:hover { background:#202448cc; transform:translateX(2px); }
    .nav-icon { width:17px; text-align:center; }
    .theme-picker { margin:20px 8px 0; padding:11px; border:1px solid #3d4b74; border-radius:11px; background:#111a31; }
    .theme-picker label { margin:0 0 6px; color:#aab8d7; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
    .theme-picker select { padding:8px 9px; border-color:#40517c; background:#17233f; color:#dce6ff; font-size:11px; }
    /* The sidebar is a flex column and `.safety` reaches the bottom with margin-top:auto. This
       block claims that free space first, so it settles just above the safety notes with a clear
       gap from the workflow nav above. The adjacent-sibling rule then gives `.safety` a fixed
       offset instead of its own auto margin — two auto margins would split the slack between
       them and leave the two blocks floating apart. */
    .nav-secondary { margin-top:auto; padding-top:14px; border-top:1px solid #202b40; }
    .nav-secondary + .safety { margin-top:14px; }
    .safety { margin-top:auto; padding:12px; border:1px solid #1c4a47; border-radius:10px; background:linear-gradient(135deg,#1a4a55,#202a58); border-color:#3e8991; }
    /* Only the first box takes the auto margin that pushes the pair to the bottom of the
       sidebar — with `auto` on both, the flex free space is split between them and they drift
       apart instead of stacking. */
    .safety + .safety { margin-top:10px; }
    .safety strong,.safety span { display:block; }
    .safety strong { color:#a2ead3; font-size:11px; }
    .safety span { margin-top:3px; color:#74afa4; font-size:10px; }
    main { min-width:0; padding:34px clamp(20px,4vw,58px) 70px; }
    .topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; z-index:30; margin:-34px calc(-1 * clamp(20px,4vw,58px)) 22px; padding:34px clamp(20px,4vw,58px) 18px; background:var(--bg); border-bottom:1px solid var(--line); }
    .eyebrow { color:#bbc4ff; font-size:10px; font-weight:900; letter-spacing:.14em; }
    .topbar h1 { margin:5px 0 7px; font-size:clamp(29px,3.2vw,42px); letter-spacing:-.055em; background:linear-gradient(100deg,#ffffff,#c4b5fd 52%,#7dd3fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .topbar p { max-width:660px; margin:0; color:var(--muted); line-height:1.5; }
    .connection { display:flex; align-items:center; gap:8px; flex:0 0 auto; padding:9px 11px; border:1px solid var(--line); border-radius:99px; color:#e2e8ff; background:#22284dd9; font-size:11px; border-color:#6570ad; box-shadow:0 8px 28px #08091d88; }
    .dot { width:7px; height:7px; border-radius:50%; background:#72809c; }
    .dot.live { background:var(--mint); box-shadow:0 0 0 4px #5eead42b,0 0 16px #5eead4a8; animation:live-pulse 2.1s ease-in-out infinite; }
    .topbar-controls { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
    .theme-toggle { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; width:58px; height:32px; padding:3px; border:1px solid #475783; border-radius:99px; color:#d6e4ff; background:#151f3b; box-shadow:0 6px 18px #050a1f55; font-size:15px; line-height:1; animation:none; }
    .theme-toggle::before { position:absolute; width:24px; height:24px; border-radius:50%; content:""; background:#ffffff; box-shadow:0 2px 7px #0004; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
    .theme-toggle span { position:relative; z-index:1; display:grid; place-items:center; opacity:.55; transition:opacity .18s ease,color .18s ease; }
    .theme-toggle .sun { color:#fbbf24; opacity:1; }
    .theme-toggle.dark::before { transform:translateX(26px); }
    .theme-toggle.dark .sun { opacity:.5; }
    .theme-toggle.dark .moon { color:#c4b5fd; opacity:1; }
    .contract-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; padding:13px 15px; border:1px solid #2a3958; border-radius:13px; background:linear-gradient(105deg,#2b3156e8,#1a2240ef); border-color:#5963a5; }
    .contract-id { min-width:0; display:flex; gap:10px; align-items:center; }
    .contract-orb { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#0a1020; background:linear-gradient(135deg,#a7b7ff,#6ce0bd); font-weight:950; }
    .contract-id strong,.contract-id span { display:block; }
    .contract-id strong { font-size:12px; }
    .contract-id span { max-width:54vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#91a0bd; font:11px ui-monospace,monospace; margin-top:3px; }
    .contract-bar button { padding:7px 10px; font-size:11px; }
    .view { display:none; }
    .view.active { display:block; }
    .grid { display:grid; gap:18px; }
    .audit-layout { grid-template-columns:minmax(270px,.8fr) minmax(0,1.55fr); align-items:start; }
    .sim-layout { grid-template-columns:280px minmax(0,1fr); align-items:start; }
    .sim-side,.sim-main { display:grid; gap:18px; align-content:start; grid-template-columns:minmax(0,1fr); }
    .panel { border:1px solid #202d45; border-radius:13px; background:linear-gradient(145deg,#252a4adf,#161a35ef); box-shadow:0 20px 55px #06081755,inset 0 1px #ffffff20; padding:19px; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; border-color:#525b99; animation:panel-enter .48s cubic-bezier(.2,.8,.2,1) both; }
    .panel h2 { margin:4px 0 6px; font-size:17px; letter-spacing:-.02em; }
    .panel h3 { margin:0; font-size:13px; }
    .panel p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
    .panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .badge { padding:5px 7px; border:1px solid #304262; border-radius:6px; color:#dce4ff; background:#222951e6; font-size:9px; font-weight:900; letter-spacing:.09em; white-space:nowrap; border-color:#6670b1; box-shadow:inset 0 1px #ffffff26,0 5px 16px #0a0b2044; }
    .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
    .actions button { flex:1 1 135px; }
    .button-with-info { display:flex; align-items:center; gap:6px; flex:1 1 135px; }
    .button-with-info button:first-child { flex:1; }
    .actions button.info-icon { flex:0 0 18px; align-self:center; width:18px; height:18px; padding:0; border-radius:50%; display:grid; place-items:center; font:italic 700 10px Georgia,serif; line-height:1; color:#9fb0d6; background:#1b2140; border:1px solid #40517c; box-shadow:none; animation:none; }
    .info-icon:hover { color:#dce6ff; border-color:#6570ad; filter:none; }
    .info-tooltip { position:fixed; z-index:50; padding:10px 12px; border-radius:8px; background:#1b2140f5; border:1px solid #4a578f; color:#c0c9e6; font-size:12px; line-height:1.5; box-shadow:0 12px 28px #06081555; pointer-events:none; }
    .drop-zone { display:grid; place-items:center; min-height:150px; margin-top:16px; padding:20px; border:1px dashed #40577f; border-radius:11px; background:#1b2142a8; text-align:center; border-color:#7582ca; }
    .drop-zone strong,.drop-zone span { display:block; }
    .drop-zone strong { color:#dbe5ff; }
    .drop-zone span { margin-top:5px; color:#8595b5; font-size:12px; }
    .drop-zone input { display:none; }
    .link-button { margin-top:10px; padding:0; border:0; background:none; color:#a9bbff; text-decoration:underline; font-size:12px; }
    /* pre-line, not nowrap/normal: a few API errors are deliberately multi-line lists (e.g. the
       missing-import rejection names one file per line), and collapsing those into one run-on
       paragraph is what makes them unreadable. Extra spaces still collapse, so single-line
       messages render exactly as before. */
    .status { margin-top:14px; padding:10px 11px; border-radius:8px; color:#c0c9e6; background:#1b2140db; font-size:12px; border:1px solid #29345a; border-color:#4a578f; white-space:pre-line; }
    .status.good { color:#a3e9d3; background:#103a37d9; border-color:#277465; box-shadow:0 0 22px #34d3991d; }
    .status.bad { color:#ffc0ca; background:#3a1b2bd9; border-color:#733044; }
    .status.warn { color:#f4d58b; background:#3c2d17d9; border-color:#775b28; }
    .spinner { display:inline-block; width:16px; height:16px; margin-left:10px; vertical-align:middle; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .finding-index { display:inline-block; min-width:22px; margin-right:6px; color:var(--muted); font-weight:700; }
    .drop-zone.disabled { opacity:.5; pointer-events:none; }
    .drop-zone .spinner { display:inline-block; margin:0 6px 0 0; vertical-align:middle; }
    .selected-file-list { display:flex; flex-direction:column; margin-top:10px; max-height:220px; overflow-y:auto; border:1px solid #23324b; border-radius:9px; background:#0b1220; }
    .selected-file-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-top:1px solid #1e2b42; font-size:11.5px; color:#c0c9e6; }
    .selected-file-row:first-child { border-top:0; }
    .selected-file-row span { overflow-wrap:anywhere; }
    .selected-file-remove { flex:0 0 auto; padding:0; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:none; border:1px solid #40517c; color:#9fb0d6; font-size:12px; line-height:1; box-shadow:none; animation:none; }
    .selected-file-remove:hover { color:#ffb2c0; border-color:#733044; filter:none; }
    .selected-file-count { padding:7px 10px; border-top:1px solid #1e2b42; font-size:11px; color:#8494b4; }
    /* A row is now three things: a checkbox+path that selects the file for audit, a role label
       saying why the file is in the round, and the remove control. The label is what answers "is
       this file costing me money", which the old flat list could not, because every row cost the
       same. */
    .selected-file-pick { display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; cursor:pointer; }
    .selected-file-pick input { flex:0 0 auto; margin:0; accent-color:#7ea6ff; cursor:pointer; }
    .selected-file-role { flex:0 0 auto; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#7f90b1; white-space:nowrap; }
    /* Dependencies and unused files are deliberately quieter than the audited ones: the audited
       set is the thing being decided, the rest is consequence. */
    .selected-file-row.is-dependency { color:#8494b4; }
    .selected-file-row.is-unused { color:#6b7a99; }
    .selected-file-row.is-unused .selected-file-role { color:#5d6b88; }
    .selected-file-list.over-limit { border-color:#733044; }
    .selected-file-count.over-limit { color:#ffb2c0; font-weight:700; }
    .progress-bar { margin-top:14px; height:8px; border-radius:5px; background:var(--line); overflow:hidden; }
    .progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--mint)); border-radius:5px; transition:width .4s ease; }
    .progress-overlay { text-align:center; }
    .progress-overlay .spinner-lg { display:block; width:40px; height:40px; margin:4px auto 18px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
    .progress-overlay h3 { margin:0 0 6px; }
    .progress-overlay .progress-bar { margin-top:18px; height:10px; }
    .progress-overlay .progress-percent { margin-top:10px; font-size:12px; color:var(--muted); }
    .security-score-card { display:flex; align-items:center; gap:16px; margin-top:15px; padding:14px 16px; border-radius:10px; border:1px solid var(--line); background:#0b1220; }
    .security-score-card .score-value { display:flex; align-items:baseline; gap:2px; flex-shrink:0; }
    .security-score-card .score-value strong { font-size:32px; line-height:1; }
    .security-score-card .score-value span { font-size:13px; color:var(--muted); }
    .security-score-card .score-label { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .security-score-card p.muted { margin:2px 0 0; font-size:12px; }
    .security-score-card.safe { border-color:#277465; background:#103a37; }
    .security-score-card.safe .score-value strong,.security-score-card.safe .score-label { color:#5eead4; }
    .security-score-card.low_risk { border-color:#3a5a94; background:#101c33; }
    .security-score-card.low_risk .score-value strong,.security-score-card.low_risk .score-label { color:#7ea6ff; }
    .security-score-card.moderate_risk { border-color:#775b28; background:#3c2d17; }
    .security-score-card.moderate_risk .score-value strong,.security-score-card.moderate_risk .score-label { color:#f3d184; }
    .security-score-card.high_risk,.security-score-card.critical_risk { border-color:#733044; background:#3a1b2b; }
    .security-score-card.high_risk .score-value strong,.security-score-card.high_risk .score-label,.security-score-card.critical_risk .score-value strong,.security-score-card.critical_risk .score-label { color:#ffb2c0; }
    #toastContainer { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:380px; }
    .toast { pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid #4a578f; background:#1b2140f2; color:#c0c9e6; box-shadow:0 12px 32px #00000055; font-size:13px; line-height:1.45; animation:toast-in .18s ease-out; }
    /* Errors are line-broken lists as often as they are sentences (see describe_missing_imports),
       and the default `white-space:normal` ran seven bulleted file paths together into one wall of
       text. `.status` has always rendered them correctly with pre-line; the toast that setStatus
       routes errors through has to match. `anywhere` is for the paths themselves — a bare
       @scope/package/contracts/.../IThing.sol has no break opportunity and would otherwise push the
       toast's own width out. Long lists scroll inside the toast rather than running off-screen. */
    .toast p { margin:0; flex:1; white-space:pre-line; overflow-wrap:anywhere; max-height:52vh; overflow-y:auto; }
    .toast button { background:none; border:0; color:inherit; opacity:.65; cursor:pointer; font-size:15px; line-height:1; padding:0; }
    .toast button:hover { opacity:1; }
    .toast.good { color:#a3e9d3; background:#103a37f2; border-color:#277465; }
    .toast.bad { color:#ffc0ca; background:#3a1b2bf2; border-color:#733044; }
    .toast.warn { color:#f4d58b; background:#3c2d17f2; border-color:#775b28; }
    @keyframes toast-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
    /* Sits inside a .status block, which is padded already — this only pulls the browser's
       default list indent back to something that lines up with the sentence above it. */
    .import-check-list { margin:6px 0; padding-left:17px; }
    .import-check-list li { margin-top:2px; overflow-wrap:anywhere; }
    .summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:15px; }
    /* The shared .summary is a fixed three-column grid, which leaves a four-tile row orphaning its
       last tile onto a line of its own. `.summary.wide` fits as many as the width allows instead —
       used by the admin overview, which has four. */
    .summary.wide { grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); }
    .metric { padding:11px; border:1px solid #22324b; border-radius:9px; background:#0b1220; }
    .metric small,.metric strong { display:block; }
    .metric small { color:#7f90b1; font-size:10px; }
    .metric strong { margin-top:3px; color:#e4ebff; font-size:18px; }
    .contract-overview { margin-top:14px; padding:13px; border:1px solid #31466b; border-radius:10px; background:linear-gradient(135deg,#262d55e6,#172143ef); border-color:#454d88; }
    .overview-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
    .overview-head h3 { margin:0; font-size:13px; }
    .overview-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:11px; }
    .overview-fact { padding:9px; border:1px solid #263a59; border-radius:8px; background:#0b1220; }
    .overview-fact small,.overview-fact strong { display:block; }
    .overview-fact small { color:#8294b7; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
    .overview-fact strong { margin-top:4px; color:#e4edff; font-size:12px; overflow-wrap:anywhere; }
    .overview-block { min-width:0; margin-top:10px; padding:10px; border:1px solid #21324e; border-radius:8px; background:#0a111e; }
    .overview-block h4 { margin:0; color:#9eb4e5; font-size:10px; letter-spacing:.08em; }
    .role-row { display:grid; grid-template-columns:132px minmax(0,1fr); gap:9px; padding:8px 0; border-top:1px solid #1d2c45; color:#d9e5fb; font-size:11px; }
    .role-row:first-of-type { margin-top:5px; }
    .role-row span { color:#90a2c4; overflow-wrap:anywhere; }
    .file-row { padding:8px 0; border-top:1px solid #1d2c45; font-size:11px; }
    .file-row:first-of-type { margin-top:5px; border-top:0; }
    .file-row strong { display:block; color:#d9e5fb; overflow-wrap:anywhere; }
    .file-row span { display:block; margin-top:3px; color:#90a2c4; overflow-wrap:anywhere; }
    .emergency-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; margin-top:8px; }
    .emergency-row { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid #1d2c45; color:#96a8ca; font-size:11px; }
    .emergency-row b { color:#a3e8d2; text-align:right; overflow-wrap:anywhere; }
    .emergency-row b.missing { color:#f0c879; }
    .finding-list,.tool-list,.function-list,.detail-list { display:grid; gap:9px; margin-top:14px; }
    .finding-list { max-height:520px; overflow:auto; padding-right:5px; }
    .finding,.tool,.detail { padding:11px; border:1px solid #23324b; border-radius:9px; background:#0b1220; }
    .finding-top,.tool-top,.detail-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
    .finding strong,.tool strong,.detail strong { font-size:12px; }
    .finding p,.tool p,.detail p { margin:5px 0 0; }
    .severity { padding:4px 6px; border-radius:99px; font-size:9px; font-weight:900; text-transform:uppercase; }
    .severity.high,.severity.critical { color:#ffb2c0; background:#48212e; }
    .severity.medium { color:#f3d184; background:#443519; }
    .severity.low,.severity.informational { color:#a7c1ff; background:#1c2d4c; }
    .delivery-status { display:inline-block; padding:4px 6px; border-radius:99px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }
    .delivery-status.pending,.delivery-status.sending { color:#a7c1ff; background:#1c2d4c; }
    .delivery-status.retry { color:#f3d184; background:#443519; }
    .delivery-status.delivered { color:#a3e9d3; background:#10332f; }
    .delivery-status.dead_letter { color:#ffb2c0; background:#48212e; }
    .finding-type { display:inline-block; padding:4px 6px; border-radius:99px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }
    .finding-type.lead { color:#f3d184; background:#443519; }
    .provenance { display:inline-block; padding:2px 6px; border-radius:99px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-left:6px; }
    .provenance.prov-ai { color:#c9b6ff; background:#2a2050; }
    .provenance.prov-tool { color:#9fb0d6; background:#1b2440; }
    .fork-verified { display:inline-block; padding:4px 6px; border-radius:99px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; color:#a3e9d3; background:#10332f; }
    .jury-detail { margin-top:9px; padding:8px 10px; border:1px solid #2a2050; border-radius:8px; background:#150f2e; }
    .jury-detail summary { cursor:pointer; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#c9b6ff; }
    .jury-votes { list-style:none; margin:9px 0 0; padding:0; display:grid; gap:5px; }
    .jury-votes li { font-size:12px; color:#c9d0d6; }
    .jury-note { margin:8px 0 0; font-size:11.5px; color:#8494b4; }
    /* Conformance rows carry a quoted clause and a citation, so they need more room than a
       one-line juror vote — same list, looser rhythm and a rule between requirements. */
    .conformance-list li { padding:8px 0; border-bottom:1px solid #2a3357; }
    .conformance-list li:last-child { border-bottom:none; }
    .conformance-list p { margin:5px 0 3px; font-size:12px; color:#dfe4ea; }
    .conformance-list small { color:#8494b4; }
    .finding-detail p { margin:8px 0 0; font-size:12px; line-height:1.5; color:#c9d0d6; }
    .finding-detail p:first-of-type { margin-top:9px; }
    .finding-actions { display:flex; gap:7px; margin-top:9px; }
    .finding-actions button { padding:5px 9px; font-size:11px; }
    .finding.withdrawn { opacity:.5; }
    .finding.withdrawn .finding-top strong { text-decoration:line-through; }
    .empty { margin-top:15px; padding:16px; color:#b9c5e6; border:1px dashed #2c3c58; border-radius:9px; font-size:12px; border-color:#6570ad; background:#1b2040bf; }
    .results-actions { display:flex; align-items:center; gap:7px; }
    .finding-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; color:#8494b4; font-size:11px; }
    .finding-controls select { width:auto; min-width:150px; padding:7px 8px; font-size:11px; }
    .report-download { position:relative; }
    .report-download summary { padding:7px 10px; border:1px solid #344666; border-radius:8px; color:#d5e0fa; background:#1d2a43; cursor:pointer; list-style:none; font-size:11px; font-weight:800; }
    .report-download summary::-webkit-details-marker { display:none; }
    .report-download-menu { position:absolute; z-index:4; right:0; top:34px; display:grid; gap:5px; min-width:135px; padding:7px; border:1px solid #344666; border-radius:9px; background:#111b2d; box-shadow:0 16px 35px #0008; }
    .report-download-menu button { padding:7px 9px; text-align:left; font-size:11px; }
    .coverage { margin-top:14px; border-top:1px solid #23324b; padding-top:12px; }
    .coverage summary { color:#aebddd; cursor:pointer; font-size:11px; font-weight:800; }
    .coverage-list { display:grid; gap:6px; margin-top:9px; }
    /* A list row with its own controls on the right — the admin panels' users, discounts, runs and
       ledger entries. Distinct from .coverage-row above, which is a two-column label/value grid
       with no interactive elements in it. Colours come from the theme variables so this reads
       correctly in both the dark and light stylesheets rather than needing an override in each. */
    .coverage-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); color:var(--muted); font-size:11.5px; }
    .coverage-item > div:first-child { flex:1 1 260px; min-width:0; overflow-wrap:anywhere; }
    .coverage-item strong { color:var(--text); }
    /* Without this the shared `.actions button { flex:1 1 135px }` stretches every row control to
       full width, turning a one-line row into a stack three deep. */
    .coverage-item .actions { flex:0 0 auto; margin-top:0; gap:6px; }
    .coverage-item .actions button { flex:0 0 auto; padding:6px 11px; font-size:11px; }
    .coverage-item .actions input { width:82px; padding:6px 8px; font-size:11px; }
    .coverage-row { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:9px 0; border-top:1px solid #1e2b42; color:#a6b5d1; font-size:11px; }
    .coverage-row strong { color:#dbe5fa; text-transform:capitalize; min-width:0; overflow-wrap:anywhere; }
    /* The code-quality panel lists findings, not tool names: titles are long, and a big project
       produces enough of them to stretch the page. Wider first column, wrapping in both cells,
       and a scroll container so the panel stays a panel instead of becoming the page. */
    .quality-list { max-height:320px; overflow-y:auto; }
    .quality-list .coverage-row { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
    .quality-count { color:#8ea3c9; font-weight:600; }
    .coverage-status { color:#9fe5ce; overflow-wrap:anywhere; line-height:1.45; }
    .coverage-status b { display:block; margin-bottom:2px; text-transform:capitalize; }
    .coverage-status.warn { color:#f2d286; }
    .coverage-status.bad { color:#ffb1bf; }
    .result-card { margin-top:14px; padding:14px; border:1px solid #263750; border-radius:10px; background:#0b1220; }
    .result-title { display:flex; justify-content:space-between; gap:12px; align-items:center; }
    .result-title strong { font-size:14px; }
    .outcome { padding:5px 7px; border-radius:99px; font-size:10px; font-weight:900; }
    .outcome.success { color:#a2e9d2; background:#143a34; }
    .outcome.failure { color:#ffc0cb; background:#47212e; }
    .outcome.warning { color:#f3d48a; background:#423418; }
    .reason { margin-top:12px; padding:11px; border-left:3px solid var(--bad); border-radius:5px; background:#2f1822; color:#ffd0d7; font-size:12px; line-height:1.5; }
    .key-values { display:grid; gap:6px; margin-top:12px; }
    .key-value { display:flex; justify-content:space-between; gap:12px; color:#8ea0bf; font-size:11px; }
    .key-value span:last-child { max-width:60%; color:#d3dff7; text-align:right; overflow-wrap:anywhere; }
    .state-row { display:grid; grid-template-columns:1.3fr repeat(3,minmax(60px,1fr)); gap:7px; align-items:center; padding:8px 0; border-top:1px solid #203047; color:#91a2c0; font:11px ui-monospace,monospace; }
    .state-row strong { color:#d7e2f8; font-weight:600; overflow-wrap:anywhere; }
    .state-row:first-child { margin-top:8px; }
    .state-label { color:#7f91b2; font:10px system-ui,sans-serif; }
    .debugger-panel { grid-column:1/-1; }
    .debugger-inputs { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr); gap:12px; align-items:end; margin-top:12px; }
    .debug-source { padding:10px; border:1px dashed #3e5683; border-radius:9px; background:#0b1220; }
    .debug-source input { margin-top:7px; padding:7px; font-size:11px; }
    .debug-result { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; margin-top:14px; }
    .debug-location,.debug-stack { min-width:0; padding:12px; border:1px solid #2b3e61; border-radius:9px; background:#0a111e; }
    .debug-location h3,.debug-stack h3 { margin:0; color:#dce7ff; font-size:13px; }
    .debug-location pre { margin:10px 0 0; padding:9px; overflow:auto; border-radius:7px; color:#cce5ff; background:#060b14; font:11px ui-monospace,monospace; white-space:pre-wrap; }
    .debug-note { margin-top:8px; color:#91a4c8; font-size:11px; line-height:1.45; }
    .debug-frame { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; margin-top:7px; padding:9px; border-left:3px solid #536fa8; border-radius:5px; background:#0d1626; }
    .debug-frame.failed { border-left-color:var(--bad); background:#241621; }
    .debug-depth { color:#8ba3d4; font:10px ui-monospace,monospace; }
    .debug-frame strong,.debug-frame span { display:block; }
    .debug-frame strong { color:#dce7ff; font-size:11px; }
    .debug-frame span { margin-top:3px; color:#91a4c8; font:10px ui-monospace,monospace; overflow-wrap:anywhere; }
    .sim-main > .panel:first-child { grid-column:1/-1; }
    .function-list { max-height:470px; overflow:auto; padding-right:5px; }
    .function-group { margin-top:10px; padding:9px; border:1px solid #23344f; border-radius:9px; background:#0b1220; }
    .function-group summary { display:block; margin-bottom:3px; padding:2px 0 8px; border-bottom:1px solid #203047; color:#c5cbff; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.12em; }
    .function { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 0; border-top:1px solid #203047; }
    .function-group > .function:first-of-type { border-top:0; }
    .function-name strong,.function-name span { display:block; }
    .function-name strong { font-size:12px; }
    .function-name span { margin-top:2px; color:#7486a7; font:10px ui-monospace,monospace; overflow-wrap:anywhere; }
    .function button { padding:7px 9px; font-size:10px; }
    .function-args { display:grid; gap:6px; grid-column:1/-1; }
    .function-args input { padding:7px 8px; font-size:11px; }
    .call-result { grid-column:1/-1; padding:8px; border-radius:7px; background:#071a20; color:#7ee7ce; font:11px ui-monospace,monospace; overflow-wrap:anywhere; }
    #trace { max-height:470px; overflow:auto; }
    .trace-tree { display:grid; gap:6px; margin-top:12px; }
    .trace-node { padding:9px; border:1px solid #24344f; border-radius:8px; background:#0b1220; }
    .trace-node header { display:flex; justify-content:space-between; gap:8px; color:#d9e4fb; font:11px ui-monospace,monospace; }
    .trace-node small { display:block; margin-top:4px; overflow-wrap:anywhere; }
    .trace-node .trace-node { margin:7px 0 0 12px; }
    .trace-note { margin-top:10px; color:#90a2c3; font-size:11px; line-height:1.5; }
    .advanced { margin-top:14px; }
    .advanced summary { color:#a9b9d8; cursor:pointer; font-size:12px; }
    .advanced .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .report { white-space:pre-wrap; max-height:560px; overflow:auto; margin-top:14px; padding:14px; border:1px solid #263750; border-radius:9px; color:#c8d5ed; background:#0a101b; font:12px ui-monospace,monospace; }
    .report-actions { display:flex; gap:8px; }
    .report-actions button { width:auto; }
    .monitor-layout { grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr); align-items:start; }
    .subscription-list { display:grid; gap:12px; max-height:500px; overflow:auto; margin-top:14px; padding-right:4px; }
    .subscription-group { padding:11px; border:1px solid #263a58; border-radius:9px; background:#0b1220; }
    .subscription-group h3 { color:#aabde8; font-size:11px; letter-spacing:.08em; }
    .subscription-group p { margin-bottom:9px; font-size:11px; }
    .subscription-option { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-top:1px solid #1d2c45; color:#d6e1f9; cursor:pointer; font:11px ui-monospace,monospace; overflow-wrap:anywhere; transition:padding .16s ease,background .16s ease; }
    .subscription-option input { width:auto; margin:2px 0 0; accent-color:#67e8f9; }
    .monitor-selection { margin-top:13px; color:#93a8cf; font-size:11px; }
    .monitor-output { display:grid; gap:7px; max-height:620px; margin-top:13px; overflow:auto; }
    .monitor-row { padding:10px; border:1px solid #233650; border-radius:8px; background:#0b1220; }
    .monitor-row strong,.monitor-row span { display:block; }
    .monitor-row strong { color:#d9e6fd; font-size:12px; }
    .monitor-row span { margin-top:4px; color:#91a5c8; font:10px ui-monospace,monospace; overflow-wrap:anywhere; }
    .guide-hero { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; padding:21px; border:1px solid #394878; border-radius:14px; background:linear-gradient(120deg,#172344,#121a31); }
    .guide-hero h2 { margin:4px 0 7px; font-size:23px; }
    .guide-hero p { max-width:680px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
    .guide-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    .guide-step { position:relative; padding-top:25px; }
    .guide-step h2 { margin-top:6px; }
    .step-number { position:absolute; top:16px; right:17px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#07101b; background:var(--mint); font-size:13px; font-weight:900; }
    .guide-lock { display:none; position:absolute; top:17px; right:55px; padding:4px 7px; border:1px solid #6b4b23; border-radius:99px; color:#ffd58b; background:#352716; font-size:10px; font-weight:800; letter-spacing:.03em; }
    .guide-step .actions { margin-top:13px; }
    .guide-step.locked,.guide-operations.locked { opacity:.64; }
    .guide-step.locked .step-number { color:#9aabc8; background:#263653; }
    .guide-step.locked .guide-lock,.guide-operations.locked .guide-lock { display:inline-flex; align-items:center; gap:4px; }
    .guide-operations { position:relative; margin-top:18px; }
    .guide-operations .guide-lock { top:17px; right:17px; }
    .guide-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
    .guide-results h3 { color:#cbd8f7; font-size:13px; }
    .guide-filter { display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px; margin:14px 0 8px; }
    .guide-filter select,.guide-filter input { margin:0; padding:8px; font-size:11px; }
    .guide-option-list { display:grid; gap:7px; max-height:260px; overflow-y:auto; padding-right:4px; }
    .guide-option { display:flex; width:100%; align-items:flex-start; gap:9px; margin:0; padding:10px; color:var(--text); border:1px solid #2d3b60; border-radius:9px; background:#0b1220; text-align:left; animation:none; }
    .guide-option:hover { border-color:#7b91ff; background:#16223d; }
    .guide-option strong,.guide-option span { display:block; }
    .guide-option strong { font-size:12px; }
    .guide-option span { margin-top:3px; color:var(--muted); font-size:11px; }
    .guide-option .guide-kind { flex:0 0 auto; padding:3px 5px; border-radius:5px; color:#a6f0d7; background:#173b35; font-size:9px; font-weight:900; }
    .guide-results .monitor-output { max-height:360px; }
    .guide-empty { padding:13px; color:var(--muted); border:1px dashed #344262; border-radius:9px; font-size:12px; }
    .shell::after { position:fixed; z-index:-1; inset:0; pointer-events:none; content:""; opacity:.13; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 84%); animation:grid-breathe 8s ease-in-out infinite; }
    .actions button:hover,button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 28px #8b5cf64a; }
    .secondary { backdrop-filter:blur(10px); }
    .input:focus,input:focus,select:focus,textarea:focus { outline-color:#a78bfa44; border-color:#9f8cff; box-shadow:0 0 0 4px #8b5cf61c; }
    .contract-orb { background:linear-gradient(135deg,#d8b4fe,#67e8f9); box-shadow:0 8px 24px #a78bfa44; }
    .contract-bar,.panel { border-color:#303764; background:linear-gradient(145deg,#171a35e8,#0d1023ed); box-shadow:0 18px 48px #02030c66,inset 0 1px #ffffff0a; }
    .panel:hover { border-color:#8d94d6; box-shadow:0 25px 60px #06081766,inset 0 1px #ffffff30; transform:translateY(-3px); }
    .metric,.finding,.tool,.detail,.result-card,.monitor-row,.subscription-group { border-color:#4c5792; background:linear-gradient(145deg,#1d2343ed,#141a34f2); }
    .function-group,.debug-location,.debug-stack,.debug-source,.trace-node { border-color:#4d5892; background:#151a35ed; }
    .subscription-option:hover { color:#ffffff; background:#ffffff05; padding-left:6px; }
    .overview-fact,.overview-block { border-color:#4a578f; background:#151a35da; }
    .topbar p,.panel p { color:#b4bdd8; }
    body::before { position:fixed; z-index:-2; inset:-25vmax; pointer-events:none; content:""; opacity:.75; filter:blur(34px); background:radial-gradient(circle at 28% 28%,#8b5cf645 0 10%,transparent 25%),radial-gradient(circle at 73% 25%,#22d3ee36 0 9%,transparent 24%),radial-gradient(circle at 55% 72%,#f472b637 0 8%,transparent 23%); animation:aurora-drift 18s ease-in-out infinite alternate; }
    .topbar h1::after { display:block; width:80px; height:3px; margin-top:14px; border-radius:99px; content:""; background:linear-gradient(90deg,#67e8f9,#c4b5fd,#f0abfc); box-shadow:0 0 18px #a78bfa99; }
    .nav button.active .nav-icon { color:#67e8f9; text-shadow:0 0 14px #67e8f9aa; }
    .panel,.contract-bar { position:relative; overflow:hidden; }
    .panel::before,.contract-bar::before { position:absolute; top:0; right:0; left:0; height:2px; content:""; background:linear-gradient(90deg,transparent,#f0abfcbb,#7dd3fcbb,transparent); opacity:.75; }
    /* Two states for the callback queue's badges. Colour only — padding, size and weight stay
       exactly as .badge sets them, so adding a variant cannot change any row's height. */
    .badge.ok { border-color:#2f7d63; background:#123028e6; color:#8ef0c8; }
    .badge.warn { border-color:#8a6a2c; background:#33270fe6; color:#fbd68a; }
    .badge,.severity,.finding-type,.provenance,.fork-verified,.delivery-status,.outcome { box-shadow:inset 0 1px #ffffff22; }
    .grid .panel:nth-child(2) { animation-delay:.06s; }
    .grid .panel:nth-child(3) { animation-delay:.11s; }
    .metric,.finding,.monitor-row,.subscription-group { transition:transform .18s ease,border-color .18s ease,background .18s ease; }
    .metric:hover,.finding:hover,.monitor-row:hover,.subscription-group:hover { transform:translateY(-2px); border-color:#94a3ff; background:linear-gradient(145deg,#28305b,#182044); }
    @keyframes aurora-drift { from { transform:translate3d(-3%, -2%, 0) rotate(-4deg) scale(1); } to { transform:translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); } }
    @keyframes grid-breathe { 50% { opacity:.2; transform:scale(1.015); } }
    @keyframes mark-float { 50% { transform:translateY(-3px) rotate(4deg); } }
    @keyframes gradient-shift { 50% { background-position:100% 50%; } }
    @keyframes panel-enter { from { opacity:0; transform:translateY(12px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
    @keyframes live-pulse { 50% { transform:scale(1.25); box-shadow:0 0 0 7px #5eead418,0 0 20px #5eead4c7; } }

    /* ---- delight pass: tactile feedback, celebration, and a bit of shine ---- */
    button:active:not(:disabled) { transform:scale(.94); }
    .audit-layout .panel:nth-child(1) { animation-delay:0s; }
    .audit-layout .panel:nth-child(2) { animation-delay:.09s; }
    .severity.critical { animation:severity-pulse 2.4s ease-in-out infinite; }
    @keyframes severity-pulse { 0%,100% { box-shadow:0 0 0 0 #ff4d6d4d; } 50% { box-shadow:0 0 0 5px #ff4d6d00; } }
    .topbar { position:sticky; top:0; isolation:isolate; }
    .topbar-spotlight { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .25s ease; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), #7dd3fc22, transparent 65%); }
    @media (hover:hover) and (pointer:fine) { .topbar:hover .topbar-spotlight { opacity:1; } }
    .points-chip #balanceAmount { display:inline-block; min-width:1ch; }
    .points-chip.bump #balanceAmount { animation:points-bump .5s cubic-bezier(.3,1.6,.4,1); }
    @keyframes points-bump { 0% { transform:scale(1); } 35% { transform:scale(1.22); color:var(--mint,#5eead4); } 100% { transform:scale(1); } }
    .confetti-piece { position:fixed; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:400; animation:confetti-pop .85s cubic-bezier(.2,.7,.3,1) forwards; }
    @keyframes confetti-pop { 0% { opacity:1; transform:translate(0,0) rotate(0deg); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(240deg); } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
    @media (max-width:900px) { .guide-layout,.guide-results { grid-template-columns:1fr; }.guide-hero { flex-direction:column; } }
    @media (max-width:1050px) { .shell { grid-template-columns:1fr; }.sidebar { position:static; height:auto; overflow:visible; padding:14px; border-right:0; border-bottom:1px solid #202b40; }.brand { padding-bottom:12px; }
      /* min-width:0 is what lets this strip actually scroll. Without it the nav reported its
         whole button row as its minimum width, the sidebar (a flex column) took that as its own,
         and the grid column stretched to fit — 360px of page on a 320px screen, so the ENTIRE
         app scrolled sideways rather than just this one row. */
      .sidebar { min-width:0; padding:var(--app-gutter); }.nav { display:flex; flex-wrap:wrap; overflow:visible; min-width:0; }.nav button { flex:0 0 auto; width:auto; }.nav-label,.safety,.theme-picker { display:none; }.audit-layout,.sim-layout,.monitor-layout { grid-template-columns:1fr; }.sim-main { grid-template-columns:1fr; } }
    @media (max-width:600px) { main { padding:24px var(--app-gutter) 45px; }.topbar { display:block; }.topbar-controls { margin-top:12px; }.connection { margin:0; width:max-content; }.contract-bar { align-items:flex-start; flex-direction:column; }.summary,.overview-facts,.emergency-list,.debugger-inputs,.debug-result,.monitor-controls { grid-template-columns:1fr; }.role-row { grid-template-columns:1fr; gap:3px; }.advanced .field-grid { grid-template-columns:1fr; }.state-row { grid-template-columns:1fr 1fr; }.state-label { display:none; } }
    /* The topbar bleeds to the edges by cancelling main's side padding with a negative margin, so
       the two have to agree on what that padding IS. Below 600px main drops to 15px while the
       margin kept computing clamp(20px,4vw,58px) = 20px, so the bar hung 5px off each side and
       gave the whole page a horizontal scrollbar on every phone. Restated here against the same
       15px so the two stay in step. */
    @media (max-width:600px) {
      .topbar { margin:-24px calc(-1 * var(--app-gutter)) 22px; padding:24px var(--app-gutter) 16px; }
      /* A fixed 380px box pinned 18px from the right runs off the left of a 360px screen. */
      #toastContainer { right:12px; left:12px; max-width:none; }
      /* Both are one-line flex rows whose controls are wider than a phone once side by side. */
      .finding-controls,.results-actions,.report-actions { flex-wrap:wrap; }
      .guide-filter { grid-template-columns:1fr; }
      .promo-strip { flex-wrap:wrap; text-align:center; }
      .modal-overlay { padding:14px; }
    }
    /* Narrow phones: 24px of gate padding either side of a card that adds 26px of its own left
       the sign-in fields about 260px to live in. The card is the whole screen here, so it gets
       the room back. */
    @media (max-width:420px) {
      .auth-gate { padding:14px; }
      .auth-card { padding:20px 16px; }
      .auth-card h2 { font-size:18px; }
      .topbar h1 { font-size:clamp(25px,7.5vw,32px); }
    }
    /* The discounted price line above Run audit. Built from numbers the client computed, never
       from server text, so it is the one place markup is assembled rather than set as
       textContent like every other status line. */
    .price-line { display:flex; align-items:baseline; gap:9px; margin:0 0 9px; font-size:13px; }
    .price-line .price-was { color:#7f8cb8; text-decoration:line-through; }
    .price-line .price-now { font-size:15px; font-weight:800; color:#eaf0ff; }
    .price-line .price-off { padding:3px 7px; border:1px solid #3f8f76; border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.1em; color:#b8f5e2; background:#17402f; }
    .price-line.hidden { display:none; }
    .auth-gate { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:#080b1a; overflow-y:auto; }
    /* Two columns: what this product is on the left, the way in on the right. The card keeps its
       own max-width so the right column never stretches it on a wide screen. */
    .auth-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(32px,6vw,72px); align-items:center; width:100%; max-width:1060px; }
    .auth-brand-logo { width:76px; height:76px; margin-bottom:14px; object-fit:contain; }
    .auth-eyebrow-row { display:flex; align-items:center; gap:9px; }
    .beta-pill { padding:3px 7px; border:1px solid #6f7bc4; border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.12em; color:#dbe3ff; background:#26305c; }
    .beta-inline { color:#c3cdf5; }
    .discount-pill { border-color:#3f8f76; color:#b8f5e2; background:#17402f; }
    /* The app-wide promotion strip. Rendered only when the server reports a live discount, so it
       cannot outlast the promotion it advertises. */
    .promo-strip { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 16px; border-bottom:1px solid #2b6b57; background:linear-gradient(100deg,#14382b,#183f4f); font-size:12px; color:#cdf4e6; }
    .promo-strip strong { color:#ffffff; font-weight:800; }
    .promo-strip .promo-badge { padding:3px 8px; border:1px solid #46a184; border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.1em; color:#0e2a20; background:#7fe6c0; }
    .promo-strip.hidden { display:none; }
    .auth-brand h1 { margin:10px 0 16px; font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.02em; color:#eef2ff; }
    .auth-brand h1 i { font-style:italic; color:transparent; background:linear-gradient(100deg,#8fb6ff,#c9a7ff 52%,#7fe6d0); -webkit-background-clip:text; background-clip:text; }
    .auth-brand > p { margin:0 0 22px; max-width:48ch; font-size:13px; line-height:1.75; color:#95a2cc; }
    .auth-points { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
    .auth-points li { position:relative; padding-left:24px; font-size:12.5px; line-height:1.65; color:#a9b5dd; }
    .auth-points li::before { content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:3px; background:linear-gradient(135deg,#8fb6ff,#7fe6d0); }
    /* Below this the two columns stop being two columns: the card comes first, because someone
       who reached the sign-in page is trying to sign in, not read a pitch. */
    @media (max-width:900px) {
      .auth-layout { grid-template-columns:minmax(0,420px); justify-content:center; gap:26px; }
      .auth-brand { order:2; text-align:center; }
      .auth-eyebrow-row { justify-content:center; }
      .auth-brand-logo { width:56px; height:56px; }
      .auth-brand h1 { margin:6px 0 12px; }
      .auth-brand > p { margin:0 auto; max-width:42ch; }
      .auth-points { display:none; }
    }
    .auth-card { width:100%; max-width:420px; padding:26px; border:1px solid #2a3556; border-radius:14px; background:linear-gradient(160deg,#141a34,#0e1226); box-shadow:0 24px 60px #04060f88; }
    .auth-card h2 { margin:0 0 4px; font-size:19px; }
    .auth-card p.muted { margin:0 0 18px; font-size:12px; }
    .auth-card label { display:block; margin:12px 0 5px; font-size:11px; }
    .auth-card input { width:100%; }
    .auth-actions { display:flex; gap:8px; margin-top:16px; }
    .auth-actions button { flex:1; }
    /* Two rules and a flex gap rather than a label sitting on a border with an opaque background
       behind it: that background was a hardcoded #121838 that had to match the card, and did not
       — the card is a #332a68 gradient, so the label rendered inside a darker box. Same technique
       as .or-divider below, which needs no background colour at all and so cannot drift again. */
    .auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0 12px; }
    .auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:#3b4675; }
    .auth-divider span { font-size:10px; letter-spacing:.09em; color:#9aa8d2; }
    .auth-gate.hidden { display:none; }
    .shell.locked { display:none; }
    /* The status line above these buttons carries its own border and background, so with no gap
       it butted directly against the first button and the two read as one welded block. This is
       the only separation between them when password auth is off and the divider above is
       hidden -- which is the live configuration. Collapses with .auth-divider's 12px bottom
       margin when the divider IS shown, so that case keeps its existing spacing. */
    .auth-alt { display:grid; gap:8px; margin-top:14px; }
    .auth-toggle { margin-top:14px; font-size:12px; text-align:center; color:#9aa9d4; }
    .auth-toggle button { padding:0; border:0; background:none; color:#8fb6ff; font-size:12px; text-decoration:underline; cursor:pointer; }
    .auth-legal { margin:16px 0 0; padding-top:13px; border-top:1px solid #202b48; font-size:11px; line-height:1.6; text-align:center; color:#7b88b4; }
    .auth-legal a { color:#8fb6ff; }
    .session-chip { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #2c3a5c; border-radius:99px; background:#151c38; font-size:11px; }
    .session-chip button { padding:3px 9px; font-size:10px; }
    .actions button.btn-compact,button.btn-compact { flex:0 0 auto; padding:6px 11px; font-size:11px; display:inline-flex; align-items:center; gap:6px; }
    .btn-compact .gh-icon { flex:0 0 auto; }
    .or-divider { display:flex; align-items:center; gap:10px; margin:12px 0; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#8e9dc8; }
    .or-divider::before,.or-divider::after { content:""; flex:1; height:1px; background:#2c3a5c; }
    .points-chip { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #2c3a5c; border-radius:99px; background:#151c38; font-size:11px; color:#dce4ff; white-space:nowrap; }
    .points-chip button { padding:3px 9px; font-size:10px; }
    .modal-overlay { position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:24px; background:#050816cc; overflow-y:auto; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
    .modal-overlay.hidden { display:none; }
    .modal-card { position:relative; width:100%; max-width:440px; margin:auto; }
    /* The skill detail is long by nature — four axes, ten finding types, four limitations — and it
       must not push the modal past the viewport. The CARD is capped and the BODY scrolls inside it,
       so the header and close button stay put however much content is rendered. 80vh rather than a
       fixed pixel height so it adapts to short laptop screens. */
    .skill-modal { max-width:560px; max-height:80vh; display:flex; flex-direction:column; }
    .skill-modal .overview-head { flex:0 0 auto; padding-right:30px; }
    .skill-modal-body { flex:1 1 auto; overflow-y:auto; margin-top:10px; padding-right:6px; }
    .skill-modal-body h4 { margin:14px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#8ea2c9; }
    .skill-modal-body h4:first-child { margin-top:0; }
    .skill-modal-body ul { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
    .skill-modal-body li { font-size:12px; color:#dfe4ea; padding:6px 0; border-bottom:1px solid #2a3357; }
    .skill-modal-body li:last-child { border-bottom:none; }
    .skill-modal-body p { font-size:12px; }
    .modal-close { position:absolute; top:10px; right:10px; width:26px; height:26px; padding:0; border-radius:50%; font-size:12px; line-height:1; display:grid; place-items:center; }

    /* ---- experiment 4: Twilight Glass — true frosted glass on a deep plum ground ---- */
    :root { --bg:#150c30; --panel:#2c2158; --panel-2:#211a48; --line:#5a4a94; --text:#faf6ff; --muted:#c2b3ea; --accent:#c4a4fb; --mint:#7ff2da; --warn:#ffcb8a; --bad:#ff92ac; }
    body { background:radial-gradient(circle at 6% 0%,#8b5cf680 0,transparent 42%),radial-gradient(circle at 98% 8%,#22d3ee73 0,transparent 40%),radial-gradient(circle at 55% 100%,#f472b666 0,transparent 44%),radial-gradient(circle at 28% 55%,#5eead44d 0,transparent 38%),#150c30; }
    .sidebar { background:linear-gradient(180deg,#302669b0,#1a1140c8); backdrop-filter:blur(20px); border-right-color:#5a4a94; }
    .safety { background:linear-gradient(135deg,#1f5c66,#2c2464); border-color:#4fb1a8; }
    .theme-picker { border-color:#5a4a94; background:#241c50; }
    .theme-picker select { border-color:#6a5aae; background:#2c2358; color:#f1ebff; }
    .panel,.contract-bar,.metric,.finding,.tool,.detail,.result-card,.monitor-row,.subscription-group,.overview-fact,.overview-block,.function-group,.debug-location,.debug-stack,.debug-source,.trace-node,.jury-detail,.guide-option,.contract-overview,.report,.debug-frame,.drop-zone,.empty,.status,.toast,.info-tooltip,.report-download-menu,.report-download summary,.guide-hero {
      background:#2c235e78 !important; backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-color:#ffffff26 !important;
    }
    .panel:hover { border-color:#c4a4fb99 !important; box-shadow:0 28px 65px #0a063366,inset 0 1px #ffffff36; }
    .metric:hover,.finding:hover,.monitor-row:hover,.subscription-group:hover { border-color:#c4a4fb99 !important; background:#3c317888 !important; }
    .status.good,.toast.good { background:#1a4a3d78 !important; color:#8ff2d4 !important; }
    .status.warn,.toast.warn { background:#4a3a1a78 !important; color:#ffcb8a !important; }
    .status.bad,.toast.bad { background:#4a1a2a78 !important; color:#ff92ac !important; }
    .call-result { background:linear-gradient(135deg,#0f4a3f,#0a3730); color:#8ff2d4; }
    .debug-location pre { background:#150f38; }
    button.secondary { background:linear-gradient(135deg,#4a3e8dcc,#2f2760dd); border-color:#8a7ad9; color:#f6f1ff; }
    .badge { background:linear-gradient(120deg,#3f3480,#2b2362); border-color:#8a7ad9; color:#ede6ff; }
    .severity.high,.severity.critical { color:#3d0a1e; background:linear-gradient(120deg,#ff9fb8,#ff6f9a); }
    .severity.medium,.delivery-status.retry,.finding-type.lead,.status.warn,.toast.warn,.outcome.warning { color:#3d2705; background:linear-gradient(120deg,#ffd08a,#ffb15e); }
    .severity.low,.severity.informational,.provenance.prov-tool,.delivery-status.pending,.delivery-status.sending { color:#0d2a5c; background:linear-gradient(120deg,#a9c6ff,#7ea6ff); }
    .status.good,.toast.good,.outcome.success,.fork-verified,.delivery-status.delivered { color:#043d2e; background:linear-gradient(120deg,#8ff2d4,#5ee6bb); }
    .status.bad,.toast.bad,.outcome.failure { color:#4a0a20; background:linear-gradient(120deg,#ff9fb8,#ff6f9a); }
    .provenance.prov-ai,.jury-detail summary { color:#2c0a5c; background:linear-gradient(120deg,#d8bfff,#b98cff); }
    .jury-detail summary { display:inline-block; padding:2px 7px; border-radius:6px; }
    .contract-orb { background:linear-gradient(135deg,#ffb7ea,#8ff2d4); box-shadow:0 9px 22px #ffb7ea55; }
    .auth-card,.modal-card.contract-overview { background:linear-gradient(160deg,#332a68,#1e1748); border-color:#6a5aae; }
    .session-chip,.points-chip { background:linear-gradient(135deg,#3a2f72,#241c52); border-color:#7566bb; }
    .modal-overlay { background:#160c33cc; }
    .step-number { color:#0a2a20; }
    .contract-id span,.role-row span,.emergency-row,.finding p,.tool p,.detail p,.overview-fact small,.metric small,.state-label,.key-value,.debug-frame span,.debug-note,.trace-note,.function-name span,.subscription-option,.monitor-row span,.coverage-row { color:#c2b3ea; }
    .topbar p,.panel p { color:#d3c6f2; }

    /* ---- sign-in screen: pinned to its own palette ---- */
    /* The gate is a dark cover screen in BOTH themes -- .auth-gate keeps its #080b1a ground and
       .auth-brand h1 its light ink, neither of which the light stylesheet overrides. But the
       headline, the subtitle and the field labels set no colour of their own, so they inherited
       --text / --muted, which the light theme flips to near-black. On the dark card that put the
       "Sign in" heading at a 1.04:1 contrast ratio against its own background -- invisible, and
       the light theme is the DEFAULT (app.js falls back to 'light' when nothing is stored).
       Pinning them here makes the card render the same either way. Deliberately limited to the
       elements that have no background of their own: the status box, the inputs and the
       secondary buttons all carry the theme's own light surfaces and stay legible as they are. */
    .auth-card h2 { color:#f2f5ff; }
    .auth-card p.muted,#authSubtitle { color:#a8b4dc; }
    .auth-card label { color:#c3cdf0; }
    .auth-legal { color:#95a1cc; }