:root {
    --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f7f8fa; --sunken:#eef0f3;
    --border:#e4e6eb; --border-strong:#d3d6dd;
    --text:#141619; --text-2:#4a4e57; --dim:#787d88;
    --accent:#0d9488; --accent-2:#14b8a6; --accent-soft:#d5f2ee; --accent-ink:#0b6b62;
    --ok:#15803d; --ok-soft:#dcf5e4; --warn:#b45309; --warn-soft:#fbeecc; --err:#c2261d; --err-soft:#fbe0dd;
    --grid:#eaecf0;
    /* Takma adlar: aşağıdaki kurallar bu üçünü kullanıyor ama tanımlı değildi
       (kenarlıklar görünmüyordu). Tema bloğu --border/--text/--sunken'i
       yeniden tanımladığı için bunlar da kendiliğinden koyu temaya uyar. */
    --line:var(--border); --fg:var(--text); --hover:var(--sunken);
    /* Dolu düğme mürekkebi. Koyu temada --accent AÇIK teal; üstüne beyaz yazı
       ≈1.9:1 ile okunmuyordu, aydınlıkta da 3.8:1 ile AA altındaydı. */
    --accent-btn:#0b6b62; --accent-btn-ink:#ffffff;
    --shadow-sm:0 1px 2px rgba(16,20,28,.05);
    --shadow:0 1px 2px rgba(16,20,28,.05), 0 6px 20px -8px rgba(16,20,28,.12);
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
    --nav-w:216px;
    --r1:8px; --r2:11px; --r3:14px;
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#0b0d10; --surface:#15181d; --surface-2:#1a1e24; --sunken:#101317;
      --border:#262b33; --border-strong:#333a45;
      --text:#eceef2; --text-2:#b3b9c4; --dim:#868d9a;
      --accent:#2dd4bf; --accent-2:#5eead4; --accent-soft:#0f3b37; --accent-ink:#7ff0e2;
      --ok:#4ade80; --ok-soft:#123122; --warn:#fbbf24; --warn-soft:#3a2c0c; --err:#f87171; --err-soft:#3a1714;
      --grid:#222831;
      --shadow-sm:none; --shadow:0 8px 28px -12px rgba(0,0,0,.6);
      --accent-btn:#2dd4bf; --accent-btn-ink:#04120b;
    }
  }
  * { box-sizing:border-box; }
  /* Yazar stilleri (ör. .live-empty{display:flex}) tarayıcının [hidden] kuralını
     ezer — boş durum ile dashboard aynı anda görünüyordu. Bu kural onu kilitler. */
  [hidden] { display:none !important; }

  /* Senaryo görünürlüğü. [hidden] ile ÇAKIŞMASIN diye ayrı nitelik: [hidden]
     koşuya bağlı anlık durum, data-only ise senaryoya bağlı kalıcı yapı. */
  body[data-scenario="outbound"] [data-only="inbound"] { display:none !important; }
  body[data-scenario="inbound"]  [data-only="outbound"] { display:none !important; }

  /* Hangi soruyu cevapladığımız her ekranda görünür kalsın. */
  .scn { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
    font-size:11px; font-weight:650; letter-spacing:.03em; text-transform:uppercase;
    white-space:nowrap; border:1px solid var(--line); }
  .scn.in  { color:#7aa2f7; border-color:#7aa2f733; background:#7aa2f71f; }
  .scn.out { color:var(--accent); border-color:var(--accent); background:transparent; }

  /* Nadiren dokunulan ayarlar: formdan çıkmasın ama önde de durmasın. */
  details.adv { margin-top:var(--s4); border:1px solid var(--line); border-radius:10px; }
  details.adv > summary { cursor:pointer; padding:10px 14px; font-size:11px; font-weight:600;
    color:var(--dim); letter-spacing:.06em; text-transform:uppercase; list-style:none; }
  details.adv > summary::-webkit-details-marker { display:none; }
  details.adv > summary::before { content:"▸"; display:inline-block; margin-right:6px; transition:transform .15s; }
  details.adv[open] > summary::before { transform:rotate(90deg); }
  details.adv > .advbody { padding:0 14px 14px; }
  @media (prefers-reduced-motion: reduce) { details.adv > summary::before { transition:none; } }

  /* Üst çubuğun ANA kontrolü: hangi soruyu soruyorum. Dosya seçmek kullanıcının
     işi değil — o bir uygulama detayı ve kaydetme satırında zaten yazıyor. */
  .scnpick { display:inline-flex; border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; }
  .scnpick button { border:none; background:transparent; color:var(--dim); padding:7px 14px;
    font-size:13px; font-weight:550; display:inline-flex; align-items:center; gap:7px; border-radius:0; }
  .scnpick button + button { border-left:1px solid var(--line); }
  .scnpick button:hover { color:var(--text); background:var(--sunken); }
  .scnpick button[aria-pressed="true"] { background:var(--accent-btn); color:var(--accent-btn-ink); font-weight:650; }
  .scnpick .ar { font-size:14px; line-height:1; }
  #testPick { max-width:230px; }

  /* Giriş kartı */
  .who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; }
  .who .dot { width:8px; height:8px; border-radius:50%; background:var(--border-strong); flex:0 0 8px; }
  .who.on .dot { background:var(--ok); }
  .who .lbl { font-size:12.5px; font-weight:600; color:var(--text-2); }
  .who .val { font-size:13px; font-weight:550; }
  .who .exp { font-size:11.5px; color:var(--dim); }
  /* Izgara yerine sarmalı satır: url alanı olsa da olmasa da (3 ya da 4 çocuk)
     kolonlar kaymıyor ve alanlar kart genişliğine yayılmıyor. */
  .loginrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:2px 0 10px; }
  .loginrow input { flex:1 1 190px; min-width:0; max-width:260px; }
  @media (max-width:820px){ .loginrow input { max-width:none; flex-basis:100%; } }

  /* ── Giriş kapısı ──────────────────────────────────────── */
  /* Kilitliyken panelin yapabileceği TEK iş giriş. Nav ve üst çubuk o an
     tıklanamayan şeyler gösteriyordu; ekranı tek bir karta indiriyoruz. */
  body[data-locked="1"] .nav, body[data-locked="1"] .topbar { display:none; }
  body[data-locked="1"] .views { padding:clamp(var(--s5), 7vh, 84px) var(--s5) var(--s6); }
  body[data-locked="1"] .view-max { max-width:408px; }
  body[data-locked="1"] #authCard { padding:var(--s6) var(--s5) var(--s5); box-shadow:var(--shadow); }
  body[data-locked="1"] #authCard > h2 { display:none; }
  body[data-locked="1"] #authCard .field { max-width:none !important; }
  body[data-locked="1"] #authCard > .hint { margin-top:var(--s5) !important; padding-top:var(--s4);
    border-top:1px solid var(--border); }
  .gate-mark { width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 3px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
  .gate-mark svg { width:23px; height:23px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .gate-h { margin-bottom:var(--s5); }
  .gate-t { font-size:20px; font-weight:650; letter-spacing:-.02em; margin-top:var(--s4); }
  .gate-s { font-size:12.5px; color:var(--dim); line-height:1.55; margin-top:5px; }
  .loginrow.gate { display:block; padding:0; }
  .loginrow.gate .field { margin-bottom:var(--s3); }
  .loginrow.gate input { max-width:none; }
  .loginrow.gate .go { width:100%; justify-content:center; padding:9px 14px; margin-top:var(--s4); }
  .pw { position:relative; }
  .pw input { padding-right:64px; }
  .pw .rv { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:none; background:none;
    color:var(--dim); font-size:11.5px; padding:4px 8px; border-radius:6px; }
  .pw .rv:hover { color:var(--text); background:var(--sunken); border-color:transparent; }
  /* Hata artık kaybolmasın: kartın içinde kendi kutusu var. */
  #authTenant .hint.err, #authAdmin .hint.err { margin-top:var(--s3); padding:8px 11px; border-radius:var(--r1);
    background:var(--err-soft); border:1px solid color-mix(in srgb,var(--err) 40%,var(--border)); font-size:12.5px; }
  #authTenant .hint.warn, #authAdmin .hint.warn { margin-top:var(--s3); }

  /* Kontrol listesi: durumu TÜRETİLİR, sihirbaz durumu tutulmaz — sayfa
     yenilenince, config değişince, yarım kalınca hep doğru kalır. */
  .ck { display:flex; flex-direction:column; gap:2px; }
  .ck-step { display:flex; gap:12px; align-items:flex-start; padding:12px 4px;
    border-top:1px solid var(--line); }
  .ck-step:first-child { border-top:0; }
  .ck-dot { flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center;
    font-size:11px; font-weight:700; border:1px solid var(--border-strong); color:var(--dim); margin-top:1px; }
  .ck-step.done .ck-dot { background:var(--ok); border-color:var(--ok); color:#04120b; }
  .ck-step.blocked .ck-dot { border-color:var(--warn); color:var(--warn); }
  .ck-body { flex:1; min-width:0; }
  .ck-title { font-size:13.5px; font-weight:600; }
  .ck-step.done .ck-title { color:var(--dim); font-weight:500; }
  .ck-why { font-size:12.5px; color:var(--dim); margin-top:3px; line-height:1.6; }
  .ck-step.blocked .ck-why { color:var(--warn); }
  .ck-act { flex:0 0 auto; }

  /* İlk açılış: hiç config yokken boş form yerine "hangi soru" seçtir. */
  .pick { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s4); }
  .pick-card { border:1px solid var(--border-strong); border-radius:14px; padding:22px; cursor:pointer;
    background:transparent; text-align:left; transition:border-color .15s, transform .1s; }
  .pick-card:hover { border-color:var(--accent); }
  .pick-card:active { transform:scale(.99); }
  .pick-icon { font-size:26px; line-height:1; }
  .pick-h { font-size:16px; font-weight:650; margin:10px 0 6px; }
  .pick-p { font-size:13px; color:var(--dim); line-height:1.65; }
  @media (prefers-reduced-motion: reduce){ .pick-card { transition:none; } }

  /* Türetilmiş güvenlik özeti — sayı kutuları yerine tek cümle. */
  .derived { font-size:13px; line-height:1.75; color:var(--dim); }
  .derived b { color:var(--fg); }
  html, body { height:100%; }
  body { margin:0; background:var(--bg); color:var(--text);
         font:13.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
         -webkit-font-smoothing:antialiased; }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

  button, select, input, textarea { font:inherit; color:var(--text); }
  button { padding:7px 13px; border-radius:var(--r1); border:1px solid var(--border-strong); background:var(--surface);
           cursor:pointer; transition:border-color .16s, background .16s, color .16s; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-ink); }
  button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline:2px solid var(--accent); outline-offset:1px; }
  button:disabled { opacity:.4; cursor:not-allowed; }
  button:not(:disabled):active { transform:scale(.97); transition:transform 80ms ease-out; }
  .nav-item:active { transform:scale(.985); }
  button.primary { background:var(--accent-btn); border-color:var(--accent-btn); color:var(--accent-btn-ink); font-weight:600; }
  button.primary:hover:not(:disabled) { filter:brightness(1.09); color:var(--accent-btn-ink); }
  button.danger { color:var(--err); border-color:color-mix(in srgb, var(--err) 40%, var(--border-strong)); }
  button.danger:hover:not(:disabled) { border-color:var(--err); color:var(--err); }
  button.ghost { border-color:transparent; background:transparent; color:var(--dim); padding:5px 9px; }
  button.ghost:hover { background:var(--sunken); border-color:transparent; color:var(--text); }
  svg.i { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }

  select, textarea,
  input[type=text], input[type=number], input[type=email], input[type=password],
  input[type=url], input[type=search], input[type=tel] {
    background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r1); padding:8px 11px; width:100%;
    color:var(--text); transition:border-color .16s, box-shadow .16s; }
  select:hover, input:hover:not([type=checkbox]) { border-color:var(--dim); }
  input:focus, select:focus, textarea:focus { border-color:var(--accent); }
  ::placeholder { color:var(--dim); opacity:1; }
  textarea { font-family:var(--mono); font-size:12px; min-height:440px; resize:vertical; line-height:1.5; }
  input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  label { display:block; font-size:12px; color:var(--text-2); margin-bottom:4px; font-weight:500; }
  .hint { font-size:11.5px; color:var(--dim); margin-top:4px; line-height:1.45; }
  .field { margin-bottom:var(--s4); }
  .fields2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
  .fields3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s3); }
  .mono { font-family:var(--mono); }
  .muted { color:var(--dim); } .err { color:var(--err); } .ok { color:var(--ok); } .warn { color:var(--warn); }
  .grow { flex:1; }
  .row { display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }

  /* ── App shell ─────────────────────────────────────────── */
  .app { display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100vh; }

  .sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
             background:var(--surface); border-right:1px solid var(--border); padding:var(--s4) var(--s3); gap:var(--s2); }
  .brand { display:flex; align-items:center; gap:10px; padding:6px 8px 14px; }
  .brand .logo { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg, var(--accent), var(--accent-2));
                 display:grid; place-items:center; flex:none; box-shadow:0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent); }
  .brand .logo svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .brand .eyebrow { font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); line-height:1; margin-bottom:3px; }
  .brand .name { font-weight:700; font-size:17px; letter-spacing:-.02em; line-height:1; }
  .brand .tag { font-size:10.5px; color:var(--dim); letter-spacing:.02em; margin-top:2px; }

  .nav { display:flex; flex-direction:column; gap:2px; margin-top:var(--s2); }
  .nav-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r1); border:none;
              background:transparent; color:var(--text-2); font-weight:500; font-size:13.5px; width:100%; text-align:left; }
  .nav-item:hover { background:var(--sunken); color:var(--text); border:none; }
  .nav-item[aria-current=true] { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
  .nav-item[aria-current=true] svg { color:var(--accent); }
  .nav-item .badge { margin-left:auto; font-size:11px; font-weight:600; padding:1px 7px; border-radius:99px;
                     background:var(--sunken); color:var(--dim); font-variant-numeric:tabular-nums; }
  .nav-item[aria-current=true] .badge { background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent-ink); }
  .nav-item .livedot { margin-left:auto; width:7px; height:7px; border-radius:99px; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); animation:pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  .sidebar .spacer { flex:1; }
  .side-foot { border-top:1px solid var(--border); padding-top:var(--s3); display:flex; flex-direction:column; gap:var(--s2); }

  .seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r1); overflow:hidden; }
  .seg button { border:none; border-radius:0; padding:6px 12px; background:var(--surface); color:var(--dim); font-size:12.5px; }
  .seg button:hover { color:var(--text); background:var(--sunken); }
  .seg button[aria-pressed=true] { background:var(--accent-btn); color:var(--accent-btn-ink); font-weight:600; }
  .seg button + button { border-left:1px solid var(--border); }
  .seg.lang { width:100%; }
  .seg.lang button { flex:1; }

  /* ── Workspace ─────────────────────────────────────────── */
  .workspace { display:flex; flex-direction:column; min-width:0; }
  .topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--s3);
            padding:11px var(--s5); background:color-mix(in srgb, var(--bg) 82%, transparent);
            backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--border); flex-wrap:wrap; }
  .topbar .view-title { font-weight:650; font-size:15px; letter-spacing:-.01em; }
  .pill { font-size:12px; padding:4px 11px; border-radius:99px; border:1px solid var(--border-strong); color:var(--dim);
          white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
  .pill.live { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, var(--border)); background:var(--ok-soft); }
  .pill.live::before { content:""; width:7px; height:7px; border-radius:99px; background:var(--ok); animation:pulse 1.4s ease-in-out infinite; }

  .views { padding:var(--s5); }
  .view { animation:fade .2s ease; }
  .view[hidden] { display:none; }
  @keyframes fade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
  .view-max { max-width:1120px; margin:0 auto; }
  .grid-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4); align-items:start; }
  @media (max-width:1080px){ .grid-2 { grid-template-columns:1fr; } }

  /* ── Cards ─────────────────────────────────────────────── */
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r3);
          padding:var(--s5); margin-bottom:var(--s4); box-shadow:var(--shadow-sm); }
  .card-h { display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s4);
            font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); font-weight:700; }
  .card-h .grow { flex:1; }
  .card-h::before { content:""; width:3px; height:13px; border-radius:99px; background:var(--accent); flex:none; }
  .card > h2 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin:0 0 var(--s4); font-weight:700;
               display:flex; align-items:center; gap:var(--s2); }
  .card > h2::before { content:""; width:3px; height:13px; border-radius:99px; background:var(--accent); flex:none; }

  /* ── Call path ─────────────────────────────────────────── */
  .path { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:var(--s2); align-items:stretch; }
  @media (max-width:820px) { .path { grid-template-columns:1fr; } .path .arrow { transform:rotate(90deg); justify-self:center; } }
  .node { border:1px solid var(--border-strong); border-radius:var(--r2); padding:11px 13px; background:var(--surface-2); min-width:0; transition:border-color .16s; }
  .node.active { border-color:var(--accent); background:var(--accent-soft); }
  .node.bad { border-color:var(--err); background:var(--err-soft); }
  .node .role { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin-bottom:5px; font-weight:600; }
  .node .main { font-family:var(--mono); font-size:13px; font-weight:600; overflow-wrap:anywhere; }
  .node .sub { font-size:11.5px; color:var(--dim); margin-top:3px; overflow-wrap:anywhere; }
  .arrow { display:flex; align-items:center; color:var(--border-strong); }
  .verdict { margin-top:var(--s3); padding:11px 13px; border-radius:var(--r1); border:1px solid var(--border-strong);
             background:var(--surface-2); font-size:12.5px; line-height:1.5; }
  .verdict.warn { border-color:color-mix(in srgb,var(--warn) 40%,var(--border)); background:var(--warn-soft); color:var(--warn); }
  .verdict.err { border-color:color-mix(in srgb,var(--err) 40%,var(--border)); background:var(--err-soft); color:var(--err); }
  .verdict.ok { border-color:color-mix(in srgb,var(--ok) 40%,var(--border)); background:var(--ok-soft); color:var(--ok); }
  .verdict + .verdict { margin-top:var(--s2); }

  /* ── Chips ─────────────────────────────────────────────── */
  .chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-strong); border-radius:99px;
          padding:3px 6px 3px 11px; font-family:var(--mono); font-size:12px; background:var(--surface-2); }
  .chip button { padding:0 3px; border:none; background:none; color:var(--dim); line-height:1; }
  .chip button:hover { color:var(--err); border-color:transparent; background:none; }
  .chip.bad { border-color:var(--err); color:var(--err); background:var(--err-soft); }
  .chipadd { display:flex; gap:6px; margin-top:var(--s2); }
  .chipadd input { font-family:var(--mono); }
  .chipadd input.bad { border-color:var(--err); }
  .sub-field { margin-top:var(--s3); padding-left:11px; border-left:2px solid var(--border); }
  .sub-field label { font-size:11.5px; color:var(--dim); font-weight:400; }
  .field-err { font-size:11.5px; color:var(--err); margin-top:4px; }
  .save-hint { font-size:11.5px; color:var(--dim); }
  .save-hint b { color:var(--text-2); font-family:var(--mono); font-weight:600; }

  .steprow { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-bottom:6px; align-items:center; }
  .steprow input { font-family:var(--mono); }

  .tabs { display:flex; gap:2px; margin-bottom:var(--s4); border-bottom:1px solid var(--border); align-items:center; }
  .tabs button { border:none; border-radius:0; background:none; color:var(--dim); padding:7px 12px;
                 border-bottom:2px solid transparent; font-weight:500; }
  .tabs button:hover { color:var(--text); background:none; border-color:transparent; border-bottom:2px solid var(--border-strong); }
  .tabs button[aria-selected=true] { color:var(--text); border-bottom-color:var(--accent); font-weight:600; }

  /* ── Hero tiles ────────────────────────────────────────── */
  .tiles { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3); }
  @media (max-width:900px) { .tiles { grid-template-columns:repeat(3,1fr); } }
  @media (max-width:520px) { .tiles { grid-template-columns:repeat(2,1fr); } }
  .tile { border:1px solid var(--border); border-radius:var(--r2); padding:14px 15px; background:var(--surface); position:relative; overflow:hidden; }
  .tile.hero { border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); }
  .tile.hero::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
  .tile .k { font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:7px; }
  .tile .v { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.05; letter-spacing:-.02em; }
  .tile .v small { font-size:11px; font-weight:500; color:var(--dim); letter-spacing:0; }
  .tile .v.err { color:var(--err); }

  canvas { width:100%; height:200px; display:block; }
  .legend { display:flex; gap:15px; font-size:11px; color:var(--dim); margin-top:var(--s3); flex-wrap:wrap; }
  .legend i { display:inline-block; width:12px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }

  pre { font-family:var(--mono); font-size:11.5px; background:var(--sunken); border:1px solid var(--border);
        border-radius:var(--r1); padding:11px; max-height:300px; overflow:auto; margin:0; white-space:pre-wrap; line-height:1.55; }
  table { width:100%; border-collapse:collapse; font-size:12.5px; }
  th { text-align:left; font-weight:600; color:var(--dim); font-size:10.5px; text-transform:uppercase;
       letter-spacing:.05em; padding:7px 8px; border-bottom:1px solid var(--border); }
  td { padding:8px 8px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
  tbody tr:last-child td { border-bottom:none; }
  tr.clickable { cursor:pointer; }
  tr.clickable:hover td { background:var(--sunken); }

  .detail { margin-top:var(--s4); border-top:1px solid var(--border); padding-top:var(--s4); }
  .detail-h { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); flex-wrap:wrap; }
  .detail-h .rid { font-family:var(--mono); font-weight:600; font-size:13px; }
  .badge-out { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:99px; background:var(--sunken); color:var(--text-2); }
  .badge-out.ok { background:var(--ok-soft); color:var(--ok); }
  .badge-out.warn { background:var(--warn-soft); color:var(--warn); }
  .badge-out.err { background:var(--err-soft); color:var(--err); }
  .dstats { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); margin-bottom:var(--s4); }
  @media (max-width:640px){ .dstats { grid-template-columns:repeat(3,1fr); } }
  .dstat { border:1px solid var(--border); border-radius:var(--r1); padding:10px 12px; }
  .dstat .k { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); font-weight:600; }
  .dstat .v { font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.01em; }
  .dstat .v.err { color:var(--err); }
  details.raw { margin-top:var(--s4); }
  details.raw summary { cursor:pointer; font-size:12px; color:var(--dim); user-select:none; }
  details.raw summary:hover { color:var(--text); }
  details.raw pre { margin-top:var(--s2); }
  .spark { position:absolute; left:0; right:0; bottom:0; width:100%; height:26px; opacity:.55; }
  .diag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:start; }
  @media (max-width:960px){ .diag-grid { grid-template-columns:1fr; } }
  .diag-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; }
  @media (max-width:960px){ .diag-grid-2 { grid-template-columns:1fr; } }
  #chartLat, #chartErr { height:150px; }
  .steptl-track { display:flex; gap:6px; flex-wrap:wrap; }
  .stepbox { flex:1 1 0; min-width:66px; border:1px solid var(--border-strong); border-radius:var(--r1); padding:8px 9px; background:var(--surface-2); text-align:center; position:relative; }
  .stepbox.done { border-color:color-mix(in srgb,var(--ok) 45%,var(--border)); }
  .stepbox.fail { border-color:color-mix(in srgb,var(--err) 45%,var(--border)); background:var(--err-soft); }
  .stepbox.ceiling { border-color:var(--warn); background:var(--warn-soft); }
  .stepbox.current { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent); }
  .stepbox .conc { font-family:var(--mono); font-weight:700; font-size:15px; }
  .stepbox .meta { font-size:10px; color:var(--dim); margin-top:2px; }
  .stepbox .dot { position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:99px; }
  .recon { display:flex; flex-direction:column; gap:var(--s2); }
  .recon-row { display:flex; align-items:center; gap:var(--s2); }
  .recon-row .lbl { width:74px; font-size:11.5px; color:var(--dim); }
  .recon-row .bar { flex:1; height:16px; background:var(--sunken); border-radius:4px; overflow:hidden; }
  .recon-row .bar > i { display:block; height:100%; border-radius:4px; }
  .recon-row .num { width:34px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
  .recon-gap { margin-top:var(--s2); font-size:12px; padding:7px 10px; border-radius:var(--r1); }
  .recon-gap.ok { background:var(--ok-soft); color:var(--ok); }
  .recon-gap.warn { background:var(--warn-soft); color:var(--warn); }
  .donut-wrap { display:flex; align-items:center; gap:var(--s4); }
  .donut { width:96px; height:96px; border-radius:50%; flex:none; position:relative; background:var(--sunken); }
  .donut::after { content:attr(data-total); position:absolute; inset:22px; border-radius:50%; background:var(--surface);
                  display:grid; place-items:center; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
  .donut-legend { display:flex; flex-direction:column; gap:5px; font-size:12px; flex:1; }
  .donut-legend .dl { display:flex; align-items:center; gap:7px; }
  .donut-legend .dl i { width:9px; height:9px; border-radius:2px; flex:none; }
  .donut-legend .dl .c { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--dim); }
  .meter { height:12px; border-radius:99px; background:var(--sunken); overflow:hidden; margin:6px 0 10px; }
  .meter > i { display:block; height:100%; border-radius:99px; transition:width .3s; }
  .media-big { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .live-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
                 min-height:56vh; gap:var(--s3); padding:var(--s6); }
  .le-mark { width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
             background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 16%,transparent), color-mix(in srgb,var(--accent) 4%,transparent));
             border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); margin-bottom:var(--s2); }
  .le-mark svg { width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .le-title { font-size:19px; font-weight:650; letter-spacing:-.02em; }
  .le-body { font-size:13.5px; color:var(--dim); max-width:360px; line-height:1.5; }
  .le-actions { display:flex; gap:var(--s2); margin-top:var(--s3); }
  .toasts { position:fixed; top:64px; right:22px; z-index:60; display:flex; flex-direction:column; gap:10px;
            max-width:min(460px, calc(100vw - 44px)); pointer-events:none; }
  .toast { pointer-events:auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r2);
           box-shadow:var(--shadow); padding:12px 14px; display:flex; gap:11px; align-items:flex-start;
           animation:toastIn .22s cubic-bezier(.22,1,.36,1); }
  @keyframes toastIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .toast { animation:none; } }
  .toast.err { border-color:color-mix(in srgb,var(--err) 45%,var(--border)); }
  .toast.ok { border-color:color-mix(in srgb,var(--ok) 45%,var(--border)); }
  .toast .ico { width:18px; height:18px; flex:none; margin-top:1px; }
  .toast.err .ico { color:var(--err); } .toast.ok .ico { color:var(--ok); } .toast.info .ico { color:var(--accent); }
  .toast .body { flex:1; min-width:0; }
  .toast .ttl { font-weight:600; font-size:13px; }
  .toast .det { font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:5px; white-space:pre-wrap;
                max-height:120px; overflow:auto; line-height:1.5; }
  .toast .x { border:none; background:none; color:var(--dim); padding:0 2px; font-size:15px; line-height:1; }
  .toast .x:hover { color:var(--text); background:none; border-color:transparent; }
  .empty { text-align:center; color:var(--dim); padding:var(--s6) var(--s4); font-size:13px; }
  .empty svg { width:30px; height:30px; stroke:var(--border-strong); margin-bottom:var(--s2); }

  @media (max-width:760px){
    .app { grid-template-columns:1fr; }
    .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border); }
    .sidebar .spacer { display:none; } .side-foot { border-top:none; padding-top:0; flex-direction:row; }
    .nav { flex-direction:row; margin-top:0; } .brand { padding:6px 8px; }
  }