/* === Theme tokens (yours, unchanged) === */
:root{
  --brand:#0ea5e9;
  --bg:#0b1220; --bg2:#111827;
  --card:#111827; --border:#1f2937;
  --text:#e5e7eb; --muted:#9ca3af;
  --input-bg:#0b1220; --table-border:#243145;
  --badge-bg:#1f2937; --badge-text:#93c5fd;

  /* NEW: shared UI tokens */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --focus:0 0 0 3px rgba(14,165,233,.35);
}

/* Light */
[data-theme="light"]{
  --brand:#0ea5e9;
  --bg:#f8fafc; --bg2:#e2e8f0;
  --card:#ffffff; --border:#cbd5e1;
  --text:#0f172a; --muted:#475569;
  --input-bg:#ffffff; --table-border:#e5e7eb;
  --badge-bg:#e2e8f0; --badge-text:#0f172a;
}

/* Midnight */
[data-theme="midnight"]{
  --brand:#38bdf8;
  --bg:#0a0f1f; --bg2:#0f172a;
  --card:#0f172a; --border:#1f2937;
  --text:#e5e7eb; --muted:#94a3b8;
  --input-bg:#0b1220; --table-border:#1f2937;
  --badge-bg:#1f2937; --badge-text:#93c5fd;
}

/* Emerald */
[data-theme="emerald"]{
  --brand:#10b981;
  --bg:#062015; --bg2:#0b2a1d;
  --card:#0b2a1d; --border:#134e4a;
  --text:#e6fffa; --muted:#8fb3a1;
  --input-bg:#0f2f24; --table-border:#14532d;
  --badge-bg:#134e4a; --badge-text:#e6fffa;
}

/* === Base === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui;
  background:linear-gradient(120deg,var(--bg),var(--bg2));
  color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:1200px;margin:36px auto;padding:0 20px}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.badge{
  font-size:12px;padding:6px 10px;border-radius:999px;
  background:var(--badge-bg);color:var(--badge-text);text-decoration:none;display:inline-block
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* Forms */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1 1 260px}
input,select,textarea,button{
  font:inherit;
}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--input-bg); color:var(--text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--focus)}

/* Buttons */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--input-bg);color:var(--text);cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:linear-gradient(90deg,#0284c7,var(--brand));border:none}
.btn-secondary{background:transparent}
.btn-ghost{background:transparent;border-color:transparent}
.btn-danger{background:#7f1d1d;border-color:#ef4444}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus)}

/* Chips (quick filters) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;font-size:12px;text-decoration:none
}
.chip[data-active="1"]{background:var(--badge-bg);color:var(--badge-text)}

/* Pills (statuses) */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px}
.pill-sale{background:#052e1a;color:#22c55e;border:1px solid #14532d}
.pill-decline{background:#3b0a0a;color:#ef4444;border:1px solid #7f1d1d}

/* Tables */
.table-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table{width:100%;border-collapse:collapse;margin:0}
.table th,.table td{border-bottom:1px solid var(--table-border);padding:10px 12px;text-align:left}
.table th{
  position:sticky;top:0;z-index:1;
  background:rgba(0,0,0,.08);backdrop-filter:saturate(130%);
  color:var(--badge-text)
}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}

/* Responsive: table ? cards */
@media (max-width: 860px){
  .table-wrap{border:none}
  table, thead, tbody, th, td, tr{display:block}
  thead{display:none}
  tbody tr{border:1px solid var(--border);border-radius:12px;margin:10px 0;overflow:hidden}
  td{border:none;display:flex;justify-content:space-between;gap:12px;padding:10px 14px}
  td::before{content:attr(data-label);color:var(--muted)}
}

/* Progress bars */
.bar{height:10px;background:var(--input-bg);border:1px solid var(--border);
  border-radius:999px;overflow:hidden}
.bar > div{height:100%;background:linear-gradient(90deg,#22c55e,var(--brand));width:0%}

/* Sticky toolbar */
.toolbar{position:sticky;top:0;z-index:2;
  background:rgba(0,0,0,.35);backdrop-filter:saturate(140%) blur(6px);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px}

/* Vertical stacks */
.stack-sm > *+*{margin-top:8px}
.stack-md > *+*{margin-top:12px}
.stack-lg > *+*{margin-top:18px}

/* Watermark */
.watermark{position:fixed;inset:0;pointer-events:none;opacity:.07;background-repeat:repeat;background-size:320px 200px}

/* Anti-copy */
body.nocopy *{user-select:none;-webkit-user-select:none}