/* upticc workbench theme — palette + fonts copied verbatim from cocpipe/dashboard.py
   (Fraunces / Hanken Grotesk / JetBrains Mono, signal-lime on near-black, light/dark). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Hanken+Grotesk:wght@300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:#0a0e0b; --ink-2:#0f1410; --panel:#121813; --panel-2:#161d17;
  --bone:#f3f0e6; --bone-dim:rgba(243,240,230,.62); --bone-faint:rgba(243,240,230,.34);
  --signal:#b6ff3a; --signal-deep:#8be000; --amber:#ecc14b;
  --line:rgba(243,240,230,.11); --line-2:rgba(243,240,230,.06);
  --bg:var(--ink); --bg-2:var(--ink-2); --pnl:var(--panel); --pnl-2:var(--panel-2);
  --tx:var(--bone); --tx-dim:var(--bone-dim); --tx-faint:var(--bone-faint); --bd:var(--line); --bd-2:var(--line-2);
}
[data-theme="light"]{
  --bg:#f3f0e6; --bg-2:#eae6d8; --pnl:#fffdf7; --pnl-2:#f6f2e7;
  --tx:#0a0e0b; --tx-dim:rgba(10,14,11,.62); --tx-faint:rgba(10,14,11,.4);
  --bd:rgba(10,14,11,.14); --bd-2:rgba(10,14,11,.07); --signal:#6fae00; --signal-deep:#5c9200; --amber:#b8860b;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk",sans-serif;margin:0;background:var(--bg);color:var(--tx);transition:background .3s,color .3s}
h1,h2,h3{font-family:"Fraunces",serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--signal-deep)}
.mono{font-family:"JetBrains Mono",monospace}

header{padding:22px 32px;background:var(--bg-2);border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.brand{font-family:"Fraunces",serif;font-size:20px;font-weight:600} .brand .dot{color:var(--signal)}
.brand a{color:inherit;text-decoration:none}
.sub{color:var(--tx-dim);font-size:13px;margin-top:2px;font-family:"Hanken Grotesk"}
.toggle{cursor:pointer;border:1px solid var(--bd);background:var(--pnl);color:var(--tx);border-radius:20px;padding:7px 14px;font-size:12px;font-family:"JetBrains Mono"}

main{padding:28px 32px;max-width:1100px;margin:0 auto}
.panel{background:var(--pnl);border:1px solid var(--bd);border-radius:12px;padding:24px;margin-bottom:22px}
.panel h2{margin:0 0 4px;font-size:22px}
.panel .hint{color:var(--tx-dim);font-size:13px;margin:0 0 16px}

/* upload dropzone */
.drop{position:relative;border:1.5px dashed var(--bd);border-radius:14px;padding:34px 24px;text-align:center;
  background:var(--bg-2);cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;outline:none}
.drop:hover{border-color:var(--tx-dim);background:var(--pnl-2)}
.drop:focus-visible{border-color:var(--signal)}
.drop.drag{border-color:var(--signal);background:rgba(182,255,58,.06);box-shadow:0 0 0 3px rgba(182,255,58,.12) inset}
.drop.has-files{border-style:solid;border-color:var(--signal-deep)}
.drop-ico{width:34px;height:34px;color:var(--tx-dim);margin-bottom:8px}
.drop.drag .drop-ico,.drop.has-files .drop-ico{color:var(--signal-deep)}
.drop-title{font-size:15px;color:var(--tx)}
.drop-link{color:var(--signal-deep);text-decoration:underline;text-underline-offset:2px}
.drop-sub{font-size:11px;color:var(--tx-faint);margin-top:4px}
.filelist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.file-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;
  background:var(--pnl);border:1px solid var(--bd);border-radius:8px;text-align:left}
.fc-name{font-size:13px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-size{font-size:11px;color:var(--tx-dim);flex:none}
.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:11px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.field input[type=text]{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--bd);background:var(--bg-2);color:var(--tx);font-family:"JetBrains Mono";font-size:13px}
.btn{cursor:pointer;font-family:"JetBrains Mono";font-size:13px;font-weight:500;border:1px solid var(--signal);background:var(--signal);color:#0a0e0b;border-radius:8px;padding:11px 20px;margin-top:16px}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--bd)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* tables / lists */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--tx-dim);border-bottom:1px solid var(--bd);padding:8px 8px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
td{padding:9px 8px;border-bottom:1px solid var(--bd-2);vertical-align:middle}
td.mono,.fn{font-family:"JetBrains Mono";font-size:12px}
tr.clickable:hover{background:var(--bg-2);cursor:pointer}

/* status pills */
.pill{display:inline-block;font-family:"JetBrains Mono";font-size:10.5px;padding:2px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em}
.pill.queued{background:var(--bg-2);color:var(--tx-dim)}
.pill.processing{background:rgba(236,193,75,.16);color:var(--amber)}
.pill.done{background:rgba(182,255,58,.16);color:var(--signal-deep)}
.pill.error{background:rgba(255,90,90,.18);color:#ff6a6a}

.muted{color:var(--tx-faint);font-style:italic;font-size:12px}
.note{color:var(--tx-faint);font-size:11px;margin-top:10px}
.spin{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amber);margin-right:6px;animation:p 1s infinite}
@keyframes p{50%{opacity:.25}}

.costbar{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:18px 0;padding:16px 20px;background:var(--bg-2);border:1px solid var(--bd);border-radius:10px}
.costnum{display:block;font-family:"JetBrains Mono";font-size:22px;font-weight:700;color:var(--signal-deep)}
.costlbl{font-size:10px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.07em}
.costmeta{margin-left:auto;font-family:"JetBrains Mono";font-size:11px;color:var(--tx-faint)}