:root{
    --bg:#fafaf9; --panel:#ffffff; --ink:#18181b; --muted:#71717a; --faint:#a1a1aa;
    --line:#e7e5e4; --line-2:#f1f0ee; --hover:#f5f5f4; --accent:#4f46e5; --accent-soft:#eef2ff;
    --ok:#16a34a; --warn:#d97706; --off:#d4d4d8; --bad:#dc2626;
    --sub:#0f766e; --sub-bg:#f0fdfa; --api:#4338ca; --api-bg:#eef2ff; --gpu:#9333ea; --gpu-bg:#faf5ff; --loc:#52525b; --loc-bg:#f4f4f5;
    --r:10px; --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.02);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
    --bg:#0b0b0c; --panel:#131315; --ink:#f4f4f5; --muted:#a1a1aa; --faint:#71717a;
    --line:#26262a; --line-2:#1c1c1f; --hover:#1a1a1d; --accent:#818cf8; --accent-soft:#1e1b4b;
    --off:#3f3f46; --sub:#5eead4; --sub-bg:#042f2e; --api:#a5b4fc; --api-bg:#1e1b4b; --gpu:#d8b4fe; --gpu-bg:#2e1065; --loc:#d4d4d8; --loc-bg:#27272a;
  }}
  :root[data-theme="dark"]{
    --bg:#0b0b0c; --panel:#131315; --ink:#f4f4f5; --muted:#a1a1aa; --faint:#71717a;
    --line:#26262a; --line-2:#1c1c1f; --hover:#1a1a1d; --accent:#818cf8; --accent-soft:#1e1b4b;
    --off:#3f3f46; --sub:#5eead4; --sub-bg:#042f2e; --api:#a5b4fc; --api-bg:#1e1b4b; --gpu:#d8b4fe; --gpu-bg:#2e1065; --loc:#d4d4d8; --loc-bg:#27272a;
  }
  *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  .app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
  aside{border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;background:var(--panel)}
  .brand{display:flex;align-items:center;gap:10px;font-weight:600;padding:4px 10px 18px}
  .logo{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#06b6d4)}
  nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:500}
  nav a:hover{background:var(--hover);color:var(--ink)} nav a.on{background:var(--hover);color:var(--ink)}
  nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
  .usage{position:absolute;bottom:18px;left:12px;right:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;color:var(--muted)}
  .bar{height:6px;background:var(--line-2);border-radius:99px;overflow:hidden;margin:6px 0 10px}.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
  main{padding:28px 40px 80px;max-width:1080px}
  h1{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px} .sub{color:var(--muted);margin:0 0 22px}
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
  .tabs button{background:none;border:0;padding:9px 12px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tabs button.on{color:var(--ink);border-color:var(--ink)}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
  .stat{min-width:0} .stat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em} .stat span{color:var(--muted);font-size:12px}
  .leg{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;box-shadow:var(--shadow);overflow:hidden}
  .leg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
  .leg-h h3{margin:0;font-size:14px;font-weight:600} .leg-h p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
  .chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:99px;white-space:nowrap}
  .row{display:grid;grid-template-columns:20px 22px 1fr auto auto auto 42px;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line-2);background:var(--panel)}
  .row:first-child{border-top:0} .row:hover{background:var(--hover)} .row.drag{opacity:.4}
  .row.disabled .name,.row.disabled .meta{opacity:.5}
  .handle{cursor:grab;color:var(--faint);display:flex} .handle svg{width:14px;height:14px}
  .rank{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--line-2)}
  .row>div{min-width:0} .name{font-weight:500} .meta{overflow-wrap:anywhere;color:var(--muted);font-size:12.5px;font-family:"JetBrains Mono",ui-monospace,monospace}
  .tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap}
  .t-subscription{color:var(--sub);background:var(--sub-bg)} .t-api{color:var(--api);background:var(--api-bg)} .t-gpu{color:var(--gpu);background:var(--gpu-bg)} .t-local{color:var(--loc);background:var(--loc-bg)}
  .price{font-size:12.5px;color:var(--muted);min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
  .status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:98px}
  .dot{width:7px;height:7px;border-radius:99px;background:var(--off)} .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)}
  .sw{position:relative;width:34px;height:20px;border-radius:99px;background:var(--off);border:0;cursor:pointer;transition:.15s}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .sw.on{background:var(--ink)} .sw.on::after{left:16px}
  .hint{color:var(--faint);font-size:12px;margin:-6px 0 18px}
  .foot{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 40px;margin:0 -40px}
  .btn{font:inherit;font-weight:500;border-radius:8px;padding:8px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
  .btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .panel{display:none} .panel.on{display:block}
  table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
  th,td{text-align:left;padding:11px 16px;border-top:1px solid var(--line-2);font-size:13px} th{border-top:0;color:var(--muted);font-weight:500;font-size:12px;background:var(--line-2)}
  code{font-family:"JetBrains Mono",monospace;font-size:12px;background:var(--line-2);padding:2px 6px;border-radius:5px}
  .field{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line-2)} .field:first-child{border-top:0}
  .field label{font-weight:500} .field small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
  input[type=number],select{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);width:140px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 20px;box-shadow:var(--shadow)}
  @media (max-width:860px){ .app{grid-template-columns:1fr} aside{display:none} main{padding:20px 16px 80px} .grid{grid-template-columns:repeat(2,1fr)}
    .row{grid-template-columns:18px 1fr auto 42px;padding:10px 14px} .row .rank,.row .price,.row .status{display:none}
    .leg-h{flex-direction:column;align-items:flex-start} .chip{white-space:normal} main{max-width:100vw;overflow-x:hidden} .foot .hint{display:none} .foot{padding:12px 16px;margin:0 -16px} .field{grid-template-columns:1fr;gap:8px} }
.navbadge{margin-left:auto;font-size:11px;font-weight:600;background:var(--accent);color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:6px} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--ink)}
.badge{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;background:var(--line-2);color:var(--muted)}
.badge.run{background:var(--accent-soft);color:var(--accent)} .badge.ok{background:var(--sub-bg);color:var(--sub)}
.badge.wait{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)} .badge.bad{background:color-mix(in srgb,var(--bad) 12%,var(--panel));color:var(--bad)}
.toph{display:flex;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap} .toph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sample{font-size:11.5px;color:var(--faint);margin-top:28px}
.log .e{color:var(--bad)} .step.fail .ic{border-color:var(--bad);color:var(--bad)}
