* { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  /* Studio's dashboard page background (theme-v2 tokens: gradients.pageBackground). */
  body { background: radial-gradient(180% 230% at -10.99% 155.05%, #FBF0DA 0%, #F7F3EB 45%, #659FAA 72%, #3D7F8F 100%) fixed;
    color: var(--fg-2); overflow: hidden; }
  button { font-family: inherit; }

  .who { font-size: 12.5px; color: var(--ink-450); margin: 0 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------------- App shell (Studio) ---------------- */
  .shell { position: fixed; inset: 0; }
  .shell.hidden { display: none; }

  .rail { position: absolute; left: 16px; top: 16px; bottom: 16px; width: 88px; background: var(--teal-800);
    border-radius: 20px; box-shadow: var(--shadow-card-teal); display: flex; flex-direction: column; align-items: center; padding: 20px 0 16px; z-index: 10; }
  /* Mirrors Studio's SideNav: logo → divider → icon chips set lower down → avatar. */
  .rail-logo { width: 28px; height: 28px; border-radius: 7px; display: block; margin-bottom: 16px; }
  .rail-sep { width: 40px; height: 1px; border-radius: 1px; background: rgba(240,231,209,.14); margin-bottom: 34px; }
  .rail-sep.mid { margin: 26px 0 22px; }
  .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .rail-grow { flex: 1; min-height: 14px; }
  .navitem { width: 100%; border: none; cursor: pointer; background: transparent; padding: 0; display: flex; flex-direction: column;
    align-items: center; gap: 8px; font-family: var(--font-body); }
  .navitem .chip { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--cream-100);
    background: var(--teal-600); border: 1px solid rgba(240,231,209,.10);
    box-shadow: inset 0 1px 0 rgba(240,231,209,.07), 0 2px 6px rgba(0,0,0,.20);
    transition: transform .16s cubic-bezier(.2,0,0,1), background .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .navitem .chip svg { width: 20px; height: 20px; }
  .navitem span { font-size: 10.5px; font-weight: 450; letter-spacing: .01em; color: rgba(238,238,238,.78); text-align: center; line-height: 1.1; transition: color .15s ease; }
  .navitem:hover .chip { transform: translateY(-1.5px); background: var(--teal-400); border-color: var(--teal-100); box-shadow: 0 5px 13px -3px rgba(0,0,0,.42); }
  .navitem:hover span { color: #fff; }
  .navitem.active .chip { background: var(--teal-400); border-color: var(--teal-100);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), -2px -2px 16px -3px rgba(11,35,41,.6), 0 6px 15px -4px rgba(0,0,0,.42); }
  .navitem.active span { color: #fff; font-weight: 500; }
  .navitem.soon .chip { background: var(--teal-600); border-color: rgba(240,231,209,.08); box-shadow: inset 0 1px 0 rgba(240,231,209,.05); }
  .navitem.soon .chip svg { opacity: .5; }
  .navitem.soon span { color: rgba(238,238,238,.4); }
  .rail-av { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-500); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.28); }

  .topbar { position: absolute; top: 16px; left: 120px; right: 16px; height: 72px; background: var(--cream-100);
    border-radius: 18px; box-shadow: var(--shadow-neo-warm); display: flex; align-items: center; padding: 0 18px 0 16px; gap: 14px; z-index: 5; }
  .ib { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--cream-100); color: var(--teal-700);
    box-shadow: var(--shadow-neo-warm-sm); cursor: pointer; display: grid; place-items: center; }
  .ib:active { transform: scale(.95); }
  .ib svg { width: 17px; height: 17px; }
  .tb-meta { flex: 1; min-width: 0; }
  .tb-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.01em; }
  .tb-sub { font-size: 12px; color: var(--ink-500); letter-spacing: .02em; margin-top: 1px; }
  .tb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-700); background: var(--cream-200);
    border-radius: 999px; padding: 6px 13px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--cream-green); }
  /* Custom environment picker (top bar) — fully Creatium-branded, not a native <select>. */
  .env-picker { position: relative; }
  .env-trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
    color: var(--ink-700); background: var(--cream-200); border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 11px 6px 13px; }
  .env-trigger:hover { border-color: var(--teal-400); }
  .env-trigger.static { cursor: default; }
  .env-trigger.static:hover { border-color: var(--border-default); }
  .env-trigger.static .env-chev { display: none; }
  .env-chev { width: 14px; height: 14px; color: var(--ink-450); flex: none; transition: transform .15s ease; }
  .env-trigger[aria-expanded="true"] .env-chev { transform: rotate(180deg); }
  .env-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 288px;
    background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: 14px; padding: 6px;
    box-shadow: 0 14px 34px -12px rgba(23,53,64,.34), 0 2px 8px -2px rgba(23,53,64,.16); }
  .env-menu.hidden { display: none; }
  .env-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 10px; padding: 9px 11px; color: var(--ink-900); }
  .env-row:hover { background: var(--cream-200); }
  .env-row.sel { background: var(--info-bg, #e7eef0); }
  .env-row-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .env-row-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
  .env-row-name { font-size: 13px; font-weight: 500; color: var(--teal-800); text-transform: capitalize; }
  .env-row-host { font-family: var(--font-mono); font-size: 11px; color: var(--ink-450); }
  .env-row-check { color: var(--teal-700); font-weight: 600; font-size: 14px; }
  .env-row-signin { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--gold, #B98A3E);
    background: rgba(185,138,62,.14); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
  /* Per-environment sign-in modal — Creatium-branded. */
  .env-sheet { max-width: 440px; }
  .env-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 13px 5px 11px; border-radius: 999px;
    background: var(--teal-700); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
  .env-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #B98A3E); box-shadow: 0 0 0 3px rgba(185,138,62,.30); }
  .env-host { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-800);
    background: var(--cream-200, #f4efe6); border: 1px solid var(--cream-300); border-radius: 10px; padding: 9px 13px; }
  .env-host-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #B98A3E); flex: none; }
  .env-note { font-size: 12px; color: var(--ink-500); line-height: 1.5; margin: -2px 2px 2px; }
  .tb-env-sel:disabled { cursor: default; opacity: 1; -webkit-appearance: none; appearance: none; }
  .link-btn { background: none; border: none; cursor: pointer; color: var(--teal-700); font-size: 13px; font-weight: 500; letter-spacing: .02em; }

  .canvas { position: absolute; left: 120px; top: 104px; right: 16px; bottom: 16px; overflow: auto; padding: 38px 44px 48px; }
  .canvas::-webkit-scrollbar { width: 10px; }
  .canvas::-webkit-scrollbar-thumb { background: rgba(23,53,64,.16); border-radius: 8px; }
  .inner { max-width: 1000px; margin: 0 auto; }
  .hero-head { text-align: center; margin-bottom: 38px; }
  /* The page eyebrow sits on the teal part of the gradient — the default warm-grey
     (--ink-450) has poor contrast there, so use the dark teal like the heading. */
  .hero-head .eyebrow { color: var(--teal-800); opacity: .82; }
  .hero-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 48px; letter-spacing: -0.04em; line-height: 1; color: var(--teal-800); margin: 8px 0 0; }

  /* Studio hero-tile look: full-bleed photo, teal multiply overlay, white caption. */
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 22px; }
  .card { position: relative; aspect-ratio: 300 / 274; border: none; cursor: pointer; border-radius: 24px; overflow: hidden; padding: 0;
    background: var(--teal-800); box-shadow: var(--shadow-card-teal); transition: transform .18s ease, box-shadow .18s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-neo-warm-lg); }
  .card:active { transform: scale(.985); }
  .card .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .card .ph.imgfail { display: none; }
  .card .shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(20deg, #173540 -14.19%, #173540 16.37%, #FFF 52.65%); mix-blend-mode: multiply; }
  .card .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px 18px; text-align: left; pointer-events: none; }
  .card .ttl { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: #fff; letter-spacing: -0.01em; line-height: 1.12; display: block; }
  .card .sub { font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 4px; display: block; line-height: 1.3; }
  .card .na-pill { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: rgba(11,35,41,.5); border-radius: 999px; padding: 5px 10px; backdrop-filter: blur(4px); }
  .card.na { cursor: default; }
  .card.na .ph { filter: grayscale(.5) brightness(.88); }
  .card.na .ttl { color: rgba(255,255,255,.78); }
  .card.na:hover { transform: none; box-shadow: var(--shadow-card-teal); }

  .soon-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 56vh; gap: 16px; }
  .soon-panel img { width: 320px; max-width: 76vw; height: 200px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-card-teal); }
  /* Status chip — a cream pill keeps it legible on the teal gradient (gold-on-teal had poor contrast). */
  .soon-panel .tag { color: var(--teal-800); background: rgba(247,243,235,.72); border: 1px solid rgba(23,53,64,.08);
    padding: 5px 13px; border-radius: 999px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; display: inline-block; }
  .soon-panel h1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; letter-spacing: -0.03em; color: var(--teal-800); margin: 4px 0 0; }
  .soon-panel p { color: var(--ink-500); max-width: 44ch; margin: 4px 0 0; }

  /* ---------------- Run modal ---------------- */
  .modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--gradient-veil); }
  .modal.open { display: flex; }
  .sheet { width: 100%; max-width: 780px; max-height: 88vh; display: flex; flex-direction: column; background: var(--cream-100);
    border: 1px solid var(--cream-400); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); overflow: hidden; }
  .sheet-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--cream-300); }
  .sheet-head .meta { flex: 1; min-width: 0; }
  .sheet-head code { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--teal-800); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 13px; overflow: auto; }
  .fb-field { display: flex; flex-direction: column; gap: 5px; }
  .fb-field > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-450); }
  .fb-field select, .fb-field input, .fb-field textarea { font: inherit; font-size: 13px; color: var(--ink-900); background: var(--cream-50, #fff); border: 1px solid var(--border-default); border-radius: 11px; padding: 10px 12px; outline: none; width: 100%; }
  .fb-field textarea { resize: vertical; min-height: 84px; }
  .fb-field select:focus, .fb-field input:focus, .fb-field textarea:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--info-bg); }
  .fb-ctx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); background: var(--cream-200, #f4efe6); border: 1px solid var(--border-default); border-radius: 10px; padding: 9px 11px; white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; }
  .fb-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
  .fb-msg { font-size: 12.5px; }
  .fb-msg.ok { color: var(--success); } .fb-msg.err { color: var(--error); }
  .grow { flex: 1; }
  .status { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: 5px 12px; }
  .status.running { background: var(--info-bg); color: var(--teal-600); }
  .status.pass { background: var(--success-bg); color: var(--success); }
  .status.fail { background: var(--error-bg); color: var(--error); } .status.cancelled { background: var(--warning-bg); color: var(--warning); }
  .spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .console { margin: 0; background: var(--teal-900); color: #CFE0E2; font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
    padding: 16px 18px; overflow: auto; white-space: pre-wrap; word-break: break-word; flex: 1; min-height: 150px; }
  .console .ok { color: #8FD3A6; } .console .bad { color: #E79A8F; } .console .muted { color: #6E9298; }
  .cases { display:none; max-height: 320px; overflow:auto; margin:0; padding: 4px 0; border-top:1px solid var(--border-default, #E6DFD1); background:#fff; }
  .cases.show { display:block; }
  .cases .grp { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color: var(--teal-700, #254F59); background: var(--cream-100, #FEFBF6); padding: 7px 18px 3px; position: sticky; top:0; }
  .cases .grp .gc { color: var(--ink-450, #6b7a79); font-weight:600; }
  .cases .case { display:flex; align-items:baseline; gap:9px; padding: 4px 18px; font-size: 13px; border-bottom: 1px solid #F4EFE4; }
  .cases .case .mk { width: 15px; flex:0 0 auto; }
  .cases .case.pass .mk { color: #1f8a5b; } .cases .case.fail .mk { color: #c0532e; }
  .cases .case .ti { flex:1; color: var(--ink-900, #1d2b2b); }
  .cases .case.fail .ti { color: #c0532e; font-weight:600; }
  .cases .case .ms { color: var(--ink-450, #6b7a79); font-size: 11px; flex:0 0 auto; }
  .result { padding: 16px 20px; border-top: 1px solid var(--cream-300); display: none; gap: 14px; align-items: center; flex-wrap: wrap; }
  .result.show { display: flex; }
  .verdict { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
  .verdict.pass { color: var(--success); } .verdict.fail { color: var(--error); } .verdict.cancelled { color: var(--warning); }
  .counts { font-size: 13px; color: var(--ink-700); } .counts b { color: var(--teal-800); }
  .grow { flex: 1; }
  .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: .02em; border-radius: 12px; padding: 10px 18px; border: none; transition: all .15s cubic-bezier(.2,0,0,1); }
  .btn.primary { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-neo-warm); }
  .btn.ghost { background: var(--cream-100); color: var(--teal-700); border: 1px solid var(--border-default); box-shadow: var(--shadow-neo-warm); }
  .btn:active { transform: scale(.97); } .btn svg { width: 15px; height: 15px; }
  .reportframe { width: 100%; height: 0; border: none; background: var(--cream-100); }
  .reportframe.show { height: 440px; border-top: 1px solid var(--cream-300); }

  .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); background: var(--teal-800); color: var(--cream-050);
    padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-modal); font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none;
    transition: all .22s cubic-bezier(.2,0,0,1); display: flex; gap: 9px; align-items: center; max-width: 88vw; z-index: 60; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .toast svg { width: 15px; height: 15px; flex: none; }

  /* ---------------- History + Schedule ---------------- */
  .histwrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
  .fb-card { background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-neo-warm-sm); }
  .fb-head { display: flex; align-items: center; gap: 10px; }
  .fb-type { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--cream-300, #efe7d8); color: var(--ink-600, #5a5048); white-space: nowrap; flex: none; }
  .fb-type.fail { background: var(--error-bg, #fbece5); color: var(--error); }
  .fb-type.pass { background: var(--success-bg, #e9f5ee); color: var(--success); }
  .fb-type.flaky { background: #f6edd9; color: var(--gold, #B98A3E); }
  .fb-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-when { font-size: 11.5px; color: var(--ink-450); white-space: nowrap; flex: none; }
  .fb-detail { font-size: 13.5px; color: var(--ink-700, #3a342e); margin: 8px 0 0; white-space: pre-wrap; }
  .fb-meta { font-size: 12px; color: var(--ink-500); margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .fb-meta code { font-family: var(--font-mono); font-size: 11px; background: var(--cream-200, #f4efe6); padding: 2px 7px; border-radius: 7px; }
  .fb-console { margin-top: 8px; } .fb-console summary { cursor: pointer; font-size: 12px; color: var(--teal-700); }
  .fb-console pre { font-family: var(--font-mono); font-size: 11px; color: var(--ink-600, #5a5048); background: var(--cream-200, #f4efe6); border: 1px solid var(--border-default); border-radius: 9px; padding: 9px 11px; margin: 6px 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
  .empty { text-align: center; color: var(--ink-500); padding: 44px 20px; font-size: 15px; background: var(--cream-100); border: 1px dashed var(--cream-400); border-radius: 16px; }
  .hist-row { display: flex; align-items: center; gap: 14px; background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-neo-warm-sm); }
  .hist-row.clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
  .hist-row.clickable:hover { box-shadow: var(--shadow-neo-warm); transform: translateY(-1px); }
  .hist-noreport { font-size: 12px; color: var(--ink-450); white-space: nowrap; flex: none; }
  .hist-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; flex: none; }
  .hist-row.pass .hist-dot { background: var(--success); }
  .hist-row.fail .hist-dot { background: var(--error); } .hist-row.cancelled .hist-dot { background: var(--warning); }
  .hist-main { flex: 1; min-width: 0; }
  .hist-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-900); }
  .hist-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
  .hist-report { font-size: 13px; font-weight: 500; color: var(--teal-700); text-decoration: none; white-space: nowrap; flex: none; }
  .hist-report:hover { text-decoration: underline; }

  .sched-card { max-width: 760px; margin: 0 auto 18px; background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-neo-warm); }
  .sched-form { display: flex; flex-wrap: wrap; gap: 13px 14px; align-items: flex-end; }
  .field2 { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-450); }
  .field2.hidden { display: none; }
  .field2 select, .field2 input { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-900);
    background: var(--cream-050); border: 1.5px solid var(--border-default); border-radius: 10px; padding: 9px 12px; min-width: 122px; cursor: pointer; }
  .field2 select:focus, .field2 input:focus { outline: none; border-color: var(--teal-400); }
  .field2 input { cursor: text; }
  .field2 input::placeholder { color: var(--ink-400); }
  .field2.wide { flex: 1 1 240px; }
  .sched-emails { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--teal-700); margin-top: 5px; word-break: break-word; }
  .sched-emails svg { width: 13px; height: 13px; flex: none; }
  .sched-form .btn { height: 40px; }
  .sched-hint { font-size: 12.5px; color: var(--brand-gold); margin-top: 14px; }
  .sched-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
  .sched-row { display: flex; align-items: center; gap: 14px; background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow-neo-warm-sm); }
  .sched-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--teal-700); color: var(--cream-100); display: grid; place-items: center; flex: none; }
  .sched-ic svg { width: 18px; height: 18px; }
  .sched-main { flex: 1; min-width: 0; }
  .sched-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-900); }
  .sched-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
  .sched-del { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--cream-100); color: var(--ink-500); cursor: pointer; flex: none; font-size: 13px; }
  .sched-del:hover { color: var(--error); border-color: var(--error); }
  /* per-feature: Test cases + Acceptance criteria */
  .ac-row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--border-default); }
  .ac-st { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
  .ac-st.ok, .ac-st.cov { background: rgba(47,125,107,.16); color: #2f7d6b; }
  .ac-st.bad { background: rgba(190,60,60,.16); color: #be3c3c; }
  .ac-st.flaky { background: rgba(176,122,46,.18); color: #b07a2e; }
  .ac-st.na { background: var(--cream-100); color: var(--ink-500); }
  .ac-main { flex: 1; min-width: 0; }
  .ac-crit { font-size: 14px; font-weight: 600; color: var(--ink-900); }
  .ac-meta { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
  .ac-src { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 5px; margin-left: 5px; vertical-align: middle; border: 1px solid var(--border-default); color: var(--ink-500); }
  .ac-src.spec { color:#2e7db0; border-color:#2e7db0; } .ac-src.kpi { color:#7a2eb0; border-color:#7a2eb0; } .ac-src.failure-mode { color:#b07a2e; border-color:#b07a2e; }
  .ac-stl { flex: none; font-size: 11.5px; font-weight: 600; align-self: center; }
  .ac-stl.ok, .ac-stl.cov { color:#2f7d6b; } .ac-stl.bad { color:#be3c3c; } .ac-stl.flaky { color:#b07a2e; } .ac-stl.na { color: var(--ink-500); }
  /* failure-modes panel — same card framing as the criteria table (was floating, unstyled) */
  .ac-fm { margin-top: 18px; font-size: 13px; background: #fff; border: 1px solid var(--border-default); border-radius: 12px; padding: 2px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
  .ac-fm summary { cursor: pointer; font-weight: 600; color: var(--ink-700); padding: 13px 0; list-style-position: inside; }
  .ac-fm[open] summary { border-bottom: 1px solid var(--border-default); }
  .ac-fmrow { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-default); align-items: flex-start; }
  .ac-fmrow:last-child { border-bottom: none; }
  .ac-fmrow b { flex: 1; font-weight: 500; color: var(--ink-900); } .ac-fmrow span { flex: 1; color: var(--ink-500); }
  .ac-fmrow .ac-fmbadge { flex: none; width: 86px; justify-content: center; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .ac-fmrow .ac-fmbadge.ok { color: #2f7d6b; background: rgba(47,125,107,.14); }
  .ac-fmrow .ac-fmbadge.flaky { color: #b07a2e; background: rgba(176,122,46,.16); }
  .ac-fmrow .ac-fmbadge.bad { color: #be3c3c; background: rgba(190,60,60,.15); }
  /* utility tiles (Test cases / Acceptance criteria) — flat, no photo */
  .card.util { background: linear-gradient(155deg, var(--teal-800), #1f4f47); }
  .card.util .cap { top: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .card.util .cap::before { content: ''; }
  /* sub-views opened from those tiles */
  .subwrap { max-width: 900px; margin: 6px auto 0; text-align: left; }
  /* separate (not collapse) so the rounded-card border-radius + overflow:hidden clip cleanly */
  .ac-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
  .ac-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); border-bottom: 1px solid var(--border-default); padding: 11px 13px; white-space: nowrap; }
  .ac-table td { padding: 13px 13px; border-bottom: 1px solid var(--border-default); vertical-align: top; color: var(--ink-900); line-height: 1.4; }
  .ac-table td b { font-weight: 600; }
  .ac-table .ac-note { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
  .ac-table .ac-stl { white-space: nowrap; font-weight: 600; }
  .ac-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 16px; }
  .ac-actions-note { font-size: 12.5px; color: var(--ink-500); flex: 1; min-width: 220px; line-height: 1.45; }
  .ac-actions .btn { white-space: nowrap; }
  .ac-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
  .ac-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid; }
  .ac-chip.ok, .ac-chip.cov { color: #2f7d6b; border-color: rgba(47,125,107,.38); background: rgba(47,125,107,.08); }
  .ac-chip.bad { color: #be3c3c; border-color: rgba(190,60,60,.4); background: rgba(190,60,60,.08); }
  .ac-chip.flaky { color: #b07a2e; border-color: rgba(176,122,46,.42); background: rgba(176,122,46,.09); }
  .ac-chip.na { color: var(--ink-500); border-color: var(--border-default); background: var(--cream-100); }
  .ac-table { border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
  .ac-table thead th { background: var(--cream-100); }
  .ac-table tbody tr:nth-child(even) { background: rgba(128,128,128,.03); }
  .ac-table tbody tr:hover { background: rgba(47,125,107,.05); }
  .ac-table tbody tr:last-child td { border-bottom: none; }
  .ac-table td:nth-child(2) { color: var(--ink-700); font-weight: 500; }
  .ac-table td:nth-child(3) { color: var(--ink-500); font-size: 12.5px; }
  .ac-table td:last-child, .ac-table th:last-child { text-align: right; white-space: nowrap; }
  .ac-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
  .ac-pill.ok, .ac-pill.cov { color: #2f7d6b; background: rgba(47,125,107,.14); }
  .ac-pill.bad { color: #be3c3c; background: rgba(190,60,60,.15); }
  .ac-pill.flaky { color: #b07a2e; background: rgba(176,122,46,.16); }
  .ac-pill.na { color: var(--ink-500); background: var(--cream-100); }
  /* Home dashboard (landing view) */
  .dash-muted { color: var(--ink-500); }
  .dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 10px; }
  @media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
  .dash-card { background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-neo-warm);
    display: flex; flex-direction: column; }
  .dash-card .kpi-foot { margin-top: auto; padding-top: 9px; }
  .dash-card[data-status="red"] { border-color: rgba(190,60,60,.45); }
  .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  .dash-card-head b { font-size: 15px; color: var(--teal-800); letter-spacing: -0.01em; }
  .dash-kpi { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 4px 0; border-top: 1px solid var(--border-default); }
  .dash-kpi > span:first-child { color: var(--ink-500); white-space: nowrap; }
  .dash-kpi > span:last-child { text-align: right; }
  /* KPI home: per-KPI rows + expandable evidence */
  .inner.wide { max-width: 1200px; }
  .home-sec-head { display: flex; align-items: center; gap: 12px; margin: 26px 2px 12px; }
  .home-sec-head b { font-size: 17px; color: var(--teal-800); letter-spacing: -0.01em; }
  .home-sec-sp { flex: 1; }
  .home-strip { display: flex; flex-direction: row; align-items: center; gap: 14px; font-size: 13px; color: var(--teal-800); line-height: 1.5; margin-bottom: 22px; }
  .kpi-line, .kpi-det summary { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-default); }
  .kpi-det summary { cursor: pointer; list-style: none; }
  .kpi-det summary::-webkit-details-marker { display: none; }
  .kpi-det summary:hover .kpi-ttl { color: var(--teal-700); }
  .kpi-det[open] { background: rgba(190,60,60,.045); margin: 0 -18px; padding: 0 18px 12px; }
  .kpi-det[open] summary { margin: 0; }
  .kpi-ic { width: 17px; text-align: center; flex: none; font-weight: 700; font-size: 12px; margin-top: 1px; }
  .kpi-ic.ok { color: #2f7d6b; } .kpi-ic.bad { color: #be3c3c; } .kpi-ic.flaky { color: #b07a2e; } .kpi-ic.na { color: var(--ink-450); }
  .kpi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .kpi-ttl { color: var(--teal-800); font-weight: 600; font-size: 12.5px; line-height: 1.35; }
  .kpi-det.failed .kpi-ttl { color: #be3c3c; }
  .kpi-sub { color: var(--ink-500); font-size: 11.5px; line-height: 1.45; }
  .kpi-caret { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; align-self: center;
    color: var(--teal-700); font-size: 13px; background: #fff; border: 1px solid var(--border-default); border-radius: 50%; transition: transform .15s ease; }
  .kpi-det summary:hover .kpi-caret { border-color: var(--teal-700); }
  .kpi-det.failed .kpi-caret { color: #be3c3c; border-color: rgba(190,60,60,.4); }
  .kpi-det[open] .kpi-caret { transform: rotate(180deg); }
  .kpi-why { font-size: 11.5px; color: #7a2f1d; background: #fff; border: 1px solid rgba(190,60,60,.3); border-radius: 10px; padding: 8px 11px; margin: 6px 0 8px; line-height: 1.5; }
  .ev-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .ev-table th { text-align: left; font-weight: 600; color: var(--ink-500); padding: 3px 6px; }
  .ev-table td { padding: 4px 6px; border-top: 1px solid var(--border-default); vertical-align: top; }
  .ev-table td:nth-child(4) { white-space: nowrap; }
  .ev-table a { color: #8a6516; font-weight: 600; text-decoration: none; }
  .ev-table a:hover { text-decoration: underline; }
  .ev-ok { color: #2f7d6b; font-weight: 700; } .ev-bad { color: #be3c3c; font-weight: 700; }
  .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }
  .kpi-foot-btns { display: inline-flex; gap: 7px; }
  .btn.mini { font-size: 11.5px; padding: 6px 13px; border-radius: 999px; background: var(--cream-100); color: var(--teal-700); border: 1px solid var(--border-default); box-shadow: none; }
  .btn.mini:hover { background: #fff; border-color: var(--teal-700); }

    .sim-intro{ font-size:13px; opacity:.72; margin-bottom:12px; line-height:1.4; }
    .sim-topics{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; margin-bottom:6px; }
    .sim-topic{ display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border:1px solid rgba(128,128,128,.22); border-radius:10px; cursor:pointer; font-size:13.5px; line-height:1.35; }
    .sim-topic:hover{ background:rgba(128,128,128,.08); }
    .sim-topic input{ margin-top:2px; flex:none; }
    .sim-topic--custom{ border-color:rgba(47,125,107,.45); background:rgba(47,125,107,.07); }
    .sim-topic-x{ margin-left:auto; flex:none; border:none; background:rgba(128,128,128,.18); color:inherit; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
    .sim-topic-x:hover{ background:rgba(220,80,80,.85); color:#fff; }
    .sim-tools{ display:flex; gap:14px; margin:0 0 12px; font-size:12.5px; }
    .sim-tools a{ color:inherit; opacity:.7; cursor:pointer; text-decoration:underline; }
    .sim-tools a:hover{ opacity:1; }
    .sim-custom-row{ display:flex; gap:8px; align-items:flex-start; }
    .sim-custom-row input, .sim-custom-row textarea{ flex:1; }
    #sim-add-custom{ flex:none; white-space:nowrap; }
    .sim-custom-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .sim-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; border:1px solid rgba(128,128,128,.28); border-radius:999px; font-size:12.5px; line-height:1.2; }
    .sim-chip button{ border:none; background:rgba(128,128,128,.18); color:inherit; width:17px; height:17px; border-radius:50%; cursor:pointer; font-size:11px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
    .sim-chip button:hover{ background:rgba(220,80,80,.85); color:#fff; }

  /* ---------------- Production health (real-user failure modes) ---------------- */
  .ph-sec .ac-pill { font-size: 10.5px; }
  .ph-updated { font-size: 12px; }
  .ph-card { gap: 0; }
  .ph-head-right { display: inline-flex; align-items: center; gap: 12px; }
  .ph-headline { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 6px; }
  .ph-headline small { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
  .ph-headline.green { color: #2f7d6b; }
  .ph-headline.amber { color: #b07a2e; }
  .ph-headline.red { color: #be3c3c; }
  .ph-delta { font-size: 11px; font-weight: 700; margin-left: 2px; }
  .ph-delta.up { color: #be3c3c; } .ph-delta.down { color: #2f7d6b; } .ph-delta.flat { color: var(--ink-450); }
  .ph-spark { flex: none; display: block; }
  .ph-reason { display: flex; align-items: center; gap: 10px; padding: 8px 0 7px; border-top: 1px solid var(--border-default); }
  .ph-rank { flex: none; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--teal-700); background: var(--cream-200); border: 1px solid var(--border-default); }
  .ph-rmain { flex: 1; min-width: 0; }
  .ph-rline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .ph-rname { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ph-rcount { flex: none; font-size: 11.5px; color: var(--ink-500); }
  /* Share bar: single-hue magnitude (identity is in the label). 4px rounded data-end. */
  .ph-bar { position: relative; height: 6px; margin-top: 4px; border-radius: 4px; background: var(--cream-300); overflow: hidden; }
  .ph-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--teal-400); }
  .ph-trace { flex: none; font-size: 11px; color: var(--teal-600); text-decoration: none; border-bottom: 1px dotted var(--teal-400); }
  .ph-trace:hover { color: var(--teal-800); }
  .ph-trace.off { color: var(--ink-450); border-bottom-style: dashed; cursor: help; }
  .ph-sev { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border-default); }
  .ph-sev-ic { color: var(--error); font-size: 13px; }
  .ph-sev .ph-rcount { color: var(--error); }
  /* Latency bullet: fill to p95, tick at the SLO target. Status color = state, with ✓/✕ text. */
  .ph-lat { padding: 8px 0 7px; border-top: 1px solid var(--border-default); }
  .ph-lat .ph-rname { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-700); }
  .ph-bar.lat { height: 8px; overflow: visible; background: var(--cream-300); }
  .ph-bar.lat i { border-radius: 4px; }
  .ph-bar.lat i.ok { background: #2f7d6b; opacity: .75; }
  .ph-bar.lat i.bad { background: var(--error); opacity: .8; }
  .ph-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink-700); }
  .ph-lat-ok { color: #2f7d6b; font-weight: 700; } .ph-lat-bad { color: #be3c3c; font-weight: 700; }
  .ph-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ph-chips { display: inline-flex; gap: 6px; }
  .ph-chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; cursor: help; }
  .ph-chip.ok { color: #2f7d6b; background: rgba(47,125,107,.12); }
  .ph-chip.warn { color: #b07a2e; background: rgba(176,122,46,.14); }
  .ph-chip.src { color: var(--ink-500); background: var(--cream-200); }
  .ph-empty { font-size: 12.5px; color: var(--ink-500); padding: 10px 0; border-top: 1px solid var(--border-default); }
  .ph-degr { border-top: 1px solid var(--border-default); padding: 7px 0; }
  .ph-degr-head { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #b07a2e; cursor: help; margin-bottom: 2px; }
  .ph-degr-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
  .ph-degr-ic { color: #b07a2e; font-size: 12px; flex: none; }
  .ph-degr-row .ph-rname { font-family: var(--font-body); color: var(--ink-700); }
  .ph-more { border-top: 1px solid var(--border-default); }
  .ph-more summary { cursor: pointer; list-style: none; padding: 7px 0; font-size: 11.5px; font-weight: 600; color: var(--teal-600); }
  .ph-more summary:hover { color: var(--teal-800); }
  .ph-more summary::-webkit-details-marker { display: none; }
  .ph-more[open] summary { color: var(--ink-500); }
  .ph-more .ph-reason:first-of-type { border-top: none; padding-top: 0; }
  .ph-orgs { font-size: 10.5px; font-weight: 600; color: #b07a2e; background: rgba(176,122,46,.12); border-radius: 999px; padding: 1px 7px; margin-right: 7px; cursor: help; }

  /* ---- Customer impact strip (Home, design 2c) + Failures page (2b) ---- */
  .ph-strip { background: var(--teal-800); border-radius: 14px; padding: 13px 18px 14px; color: var(--cream-100); box-shadow: var(--shadow-card-teal); margin-bottom: 6px; }
  .ph-strip-head { display: flex; align-items: baseline; gap: 10px; }
  .ph-strip-head b { font-size: 13px; letter-spacing: .02em; }
  .ph-strip-sub { font-size: 11.5px; color: var(--teal-200); }
  .ph-strip-all { font-size: 11.5px; font-weight: 600; color: var(--teal-100); text-decoration: none; }
  .ph-strip-all:hover { color: #fff; }
  .ph-strip-row { display: flex; gap: 10px; margin-top: 10px; }
  .ph-strip-tile { flex: 1; min-width: 0; background: rgba(240,231,209,.08); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
  .ph-strip-tile:hover { background: rgba(240,231,209,.14); }
  .ph-strip-feat { font-size: 11px; color: var(--teal-200); }
  .ph-strip-mode { font-size: 13px; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ph-strip-n { font-size: 11px; margin-top: 2px; }
  .rail-badge { position: absolute; top: -7px; right: -8px; background: #c2402f; color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.4; }
  .navitem .chip { position: relative; }
  .fl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .fl-toggles { display: flex; gap: 8px; align-items: center; }
  .fl-toggles button.btn.mini.fl-on { background: var(--teal-700); color: #fff; border-color: var(--teal-700); box-shadow: none; }
  .fl-sel { height: 30px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--cream-100); font-family: var(--font-body); font-size: 12px; color: var(--ink-700); padding: 0 10px; }
  .fl-tiles { display: flex; gap: 12px; margin-bottom: 14px; }
  .fl-tile { flex: 1; background: var(--cream-100); border: 1px solid var(--border-default); border-top: 3px solid; border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-neo-warm-sm); }
  .fl-tn { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
  .fl-tl { font-size: 11.5px; color: var(--ink-500); margin-top: 1px; }
  .fl-table { background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-neo-warm-sm); }
  .fl-hrow, .fl-row { display: grid; grid-template-columns: 1fr 130px 80px 108px 96px 88px; gap: 8px; padding: 10px 16px; align-items: center; } .fl-seen { font-size: 11.5px; color: var(--ink-600); } .fl-detailmsg { display: block; font-size: 11.5px; color: var(--ink-600); font-style: italic; margin-top: 2px; }
  .fl-hrow { background: var(--cream-200); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; padding: 8px 16px; }
  .fl-row { border-top: 1px solid var(--border-default); font-size: 12.5px; color: var(--ink-700); }
  .fl-mode b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-900); margin-right: 8px; }
  .fl-sub { display: block; font-size: 11px; color: var(--ink-450); margin-top: 1px; }
  .fl-n { font-weight: 700; color: var(--ink-900); }
  .fl-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
  .fl-bars span { width: 6px; border-radius: 2px; display: inline-block; }
  .fl-detail { grid-column: 1 / -1; font-size: 11px; color: var(--ink-450); padding-top: 2px; }
  .fl-hrow.org, .fl-row.org { grid-template-columns: 220px 110px 1fr; } .fl-int, .fl-modechip { display: inline-block; border: 1px solid var(--border-default); } .fl-int { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--cream-300); color: var(--ink-500); font-size: 10px; font-weight: 600; letter-spacing: .03em; } .fl-modechip { margin: 1px 6px 1px 0; padding: 2px 8px; border-radius: 6px; background: var(--cream-200); font-size: 11.5px; } .fl-code { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 5px; background: var(--teal-700); color: #fff; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
  .fl-foot { font-size: 11.5px; margin-top: 12px; line-height: 1.6; }
  .fl-unit { display: block; font-size: 10px; font-weight: 400; color: var(--ink-450); }
  .fl-intro { font-size: 12.5px; color: var(--ink-700); line-height: 1.55; background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
  .fl-stale { font-size: 12px; color: #8a5f14; background: rgba(176,122,46,.14); border-radius: 8px; padding: 7px 12px; margin-bottom: 12px; }
  .fl-updated { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-700); background: var(--cream-100); border: 1px solid var(--border-default); border-radius: 999px; padding: 4px 6px 4px 12px; }