:root {
  --ground: #edf1ef;
  --surface: #ffffff;
  --sunken: #e2e9e6;
  --ink: #14211f;
  --muted: #576964;
  --line: #d0dad6;
  --accent: #0f6b66;
  --accent-ink: #ffffff;
  --danger: #b2382b;
  --danger-soft: #f7e5e2;
  --warn: #946310;
  --ok: #26734d;
  --image: #2f7fbf;
  --video: #7b5cd6;
  --other: #8b9c97;
  --amber: #c27f10;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #0e1614;
    --surface: #15201d;
    --sunken: #1c2a27;
    --ink: #e4eeeb;
    --muted: #8da19b;
    --line: #263632;
    --accent: #45b8ae;
    --accent-ink: #06201d;
    --danger: #ee7767;
    --danger-soft: #3a1f1b;
    --warn: #e0a83f;
    --ok: #5cc48d;
    --image: #5aa7e8;
    --video: #a58df3;
    --other: #6c807a;
    --amber: #e0a83f;
  }
}

/* ---- themes: set with data-theme on <html> (see theme.js); none = follow the system ---- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e1614; --surface: #15201d; --sunken: #1c2a27; --ink: #e4eeeb; --muted: #8da19b; --line: #263632;
  --accent: #45b8ae; --accent-ink: #06201d; --danger: #ee7767; --danger-soft: #3a1f1b; --warn: #e0a83f; --ok: #5cc48d;
  --image: #5aa7e8; --video: #a58df3; --other: #6c807a; --amber: #e0a83f;
}
:root[data-theme="solarized-dark"] {
  color-scheme: dark;
  --ground: #002b36; --surface: #073642; --sunken: #00212b; --ink: #eee8d5; --muted: #93a1a1; --line: #124856;
  --accent: #2aa198; --accent-ink: #002b36; --danger: #f1635f; --danger-soft: #3b2328; --warn: #b58900; --ok: #859900;
  --image: #268bd2; --video: #6c71c4; --other: #657b83; --amber: #cb4b16;
}
:root[data-theme="solarized-light"] {
  color-scheme: light;
  --ground: #eee8d5; --surface: #fdf6e3; --sunken: #e6dfc8; --ink: #073642; --muted: #586e75; --line: #d9d0b4;
  --accent: #1f7f78; --accent-ink: #fdf6e3; --danger: #c02a27; --danger-soft: #f4e0d4; --warn: #946f00; --ok: #5f7000;
  --image: #1f78b4; --video: #5a60b0; --other: #839496; --amber: #b5470f;
}
:root[data-theme="dracula"] {
  color-scheme: dark;
  --ground: #282a36; --surface: #303341; --sunken: #21222c; --ink: #f8f8f2; --muted: #a9b0d6; --line: #44475a;
  --accent: #bd93f9; --accent-ink: #1e1f29; --danger: #ff6e6e; --danger-soft: #402734; --warn: #f1fa8c; --ok: #50fa7b;
  --image: #8be9fd; --video: #ff79c6; --other: #6272a4; --amber: #ffb86c;
}
:root[data-theme="nord"] {
  color-scheme: dark;
  --ground: #2e3440; --surface: #3b4252; --sunken: #272c36; --ink: #eceff4; --muted: #a5b1c6; --line: #4c566a;
  --accent: #88c0d0; --accent-ink: #2e3440; --danger: #e0838d; --danger-soft: #4a363c; --warn: #ebcb8b; --ok: #a3be8c;
  --image: #81a1c1; --video: #b48ead; --other: #71809a; --amber: #d08770;
}
:root[data-theme="gruvbox"] {
  color-scheme: dark;
  --ground: #282828; --surface: #32302f; --sunken: #1d2021; --ink: #ebdbb2; --muted: #a89984; --line: #4a4540;
  --accent: #8ec07c; --accent-ink: #1d2021; --danger: #fb6a55; --danger-soft: #3c2421; --warn: #fabd2f; --ok: #b8bb26;
  --image: #83a598; --video: #d3869b; --other: #7c6f64; --amber: #fe8019;
}
/* Dark Lavender, after t7yang's VS Code theme (Material palette on a near-black ground) */
:root[data-theme="dark-lavender"] {
  color-scheme: dark;
  --ground: #07090f; --surface: #141519; --sunken: #0a0c11; --ink: #cfd8dc; --muted: #90a4ae; --line: #26282c;
  --accent: #a98bff; --accent-ink: #07090f; --danger: #f06292; --danger-soft: #2e1220; --warn: #ff9800; --ok: #4caf50;
  --image: #2196f3; --video: #e040fb; --other: #607d8b; --amber: #fbc02d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}

h1, h2, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- top bar ---- */
.bar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar-inner, .page { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.brand .muted { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.875rem; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.pill[data-state="ok"] .dot { background: var(--ok); }
.pill[data-state="warn"] .dot { background: var(--amber); }
.pill[data-state="fail"] .dot { background: var(--danger); }

.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted); cursor: pointer; }
.switch input { accent-color: var(--accent); }

/* ---- buttons / inputs ---- */
.btn {
  font: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.solid:hover { background: var(--danger); filter: brightness(1.08); }
.btn.sm { padding: 3px 9px; font-size: 0.8125rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.danger.solid:disabled:hover { filter: none; }

input[type="search"], input[type="text"], input[type="password"], select {
  font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---- page ---- */
.page { padding-top: 32px; padding-bottom: 72px; }
h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.005em; }

/* ---- disk strip ---- */
.disk h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 650; letter-spacing: -0.025em; line-height: 1.1;
}
.disk h1 .of { color: var(--muted); font-weight: 500; }
#usage-sub { margin-top: 6px; }
.strip-wrap { position: relative; margin-top: 22px; }
#strip { display: block; width: 100%; height: 76px; cursor: crosshair; touch-action: pan-y; }
.strip-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }
.evict-mark { position: absolute; top: -20px; left: 0; font-size: 0.75rem; font-weight: 600; color: var(--ink); white-space: nowrap; pointer-events: none; }
.evict-mark.flip { transform: translateX(-100%); }
.tip {
  position: absolute; z-index: 3; pointer-events: none; top: -8px;
  max-width: min(420px, 90vw);
  background: var(--ink); color: var(--ground);
  padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem; line-height: 1.4;
  transform: translateY(-100%);
}
.tip .tip-key { font-family: var(--mono); word-break: break-all; }
.tip .tip-meta { opacity: 0.8; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 0.875rem; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--other); flex: none; }
.legend .sw.image { background: var(--image); }
.legend .sw.video { background: var(--video); }
.legend .sw.other { background: var(--other); }
.legend .sw.flight { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); border: 1px solid var(--muted); }
.legend .sw.free { background: var(--sunken); border: 1px solid var(--line); }
.legend .sw.line { height: 3px; border-radius: 2px; }
.legend .v { color: var(--muted); }

/* ---- figures ---- */
.figures { margin-top: 40px; }
.figures dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 24px; }
.fig { border-top: 2px solid var(--line); padding-top: 12px; min-width: 0; }
.fig.lead { border-top-color: var(--accent); }
.fig dd { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.fig dt { color: var(--ink); font-size: 0.875rem; font-weight: 600; margin-top: 2px; }
.fig dd.note, .fig .note { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: 0.8125rem; }

/* ---- health + traffic ---- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 48px; }
.pair h2 { margin-bottom: 14px; }
.checks li { display: grid; grid-template-columns: 14px 1fr; gap: 0 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks .dot { margin-top: 6px; }
.checks li[data-s="ok"] .dot { background: var(--ok); }
.checks li[data-s="warn"] .dot { background: var(--amber); }
.checks li[data-s="fail"] .dot { background: var(--danger); }
.checks .name { font-weight: 600; }
.checks .detail { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin-top: 18px; font-size: 0.8125rem; }
.facts dt { color: var(--muted); }
.facts dd { overflow-wrap: anywhere; }
.facts dd.mono { font-family: var(--mono); }

.chart-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 10px 12px 6px; }
#chart { display: block; width: 100%; height: 150px; }
#chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#chart .req { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#chart .req-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
#chart .s3 { fill: none; stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.legend-chart .sw.req { background: var(--accent); }
.legend-chart .sw.s3 { background: var(--amber); }

/* ---- table ---- */
.entries { margin-top: 56px; }
.entries-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.tools input[type="search"] { width: min(300px, 70vw); }

.bulk { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 0.875rem; font-weight: 600; }
.bulk #bulk-count { margin-right: auto; }

.table-wrap { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; vertical-align: middle; }
thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--sunken) 55%, var(--surface)); }
thead th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; }
thead th button:hover { color: var(--ink); }
thead th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
thead th[aria-sort="ascending"] button::after { content: "\2191"; }
thead th[aria-sort="descending"] button::after { content: "\2193"; }
thead th[aria-sort="ascending"], thead th[aria-sort="descending"] { color: var(--ink); }
tbody tr.row { border-bottom: 1px solid var(--line); }
tbody tr.row:hover { background: color-mix(in srgb, var(--sunken) 45%, transparent); }
tbody tr.row.sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
tbody tr.detail > td { background: color-mix(in srgb, var(--sunken) 40%, var(--surface)); border-bottom: 1px solid var(--line); padding: 12px 12px 14px 48px; }
.c-check { width: 40px; padding-right: 0; }
.c-num { text-align: right; white-space: nowrap; }
.c-type { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.c-act { width: 1%; white-space: nowrap; text-align: right; }
.c-key { width: 100%; max-width: 0; min-width: 200px; }

.keycell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.expander { all: unset; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); flex: none; }
.expander:hover { color: var(--ink); background: var(--sunken); }
.expander:focus-visible { outline: 2px solid var(--accent); }
.expander svg { width: 10px; height: 10px; }
.expander[aria-expanded="true"] svg { transform: rotate(90deg); }
.key { display: flex; min-width: 0; font-family: var(--mono); font-size: 0.8125rem; }
.key .dir { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.key .file { white-space: nowrap; flex: none; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; font-size: 0.6875rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--danger-soft); color: var(--danger); }

.row-purge { all: unset; cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 3px 8px; border-radius: 5px; }
.row-purge:hover { color: var(--danger); background: var(--danger-soft); }
.row-purge:focus-visible { outline: 2px solid var(--accent); }

.detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; font-size: 0.8125rem; }
.detail dt { color: var(--muted); }
.detail dd { overflow-wrap: anywhere; }
.detail dd.mono { font-family: var(--mono); }
.detail .detail-actions { margin-top: 10px; display: flex; gap: 8px; }

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.875rem; }
.pager-btns { display: flex; gap: 8px; }

/* ---- dialogs / toasts ---- */
dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 22px; width: min(500px, 92vw); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
dialog::backdrop { background: rgba(10, 18, 16, 0.55); }
dialog h2 { font-size: 1.15rem; margin-bottom: 6px; }
dialog p.muted { font-size: 0.875rem; margin-bottom: 14px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 4px; }
.field input { width: 100%; }
.preview { min-height: 1.5em; margin: 4px 0 10px; font-size: 0.9rem; font-weight: 600; }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 0.875rem; margin-bottom: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

#toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
.toast.error { background: var(--danger); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 0.18s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
}

/* ---- narrow screens ---- */
@media (max-width: 820px) {
  .pair { grid-template-columns: 1fr; gap: 36px; }
  .c-opt, .c-type { display: none; }
}
@media (max-width: 560px) {
  .bar-inner, .page { padding-left: 14px; padding-right: 14px; }
  #strip { height: 60px; }
  .c-mob { display: none; }
  .c-key { min-width: 120px; }
}

.form-error { color: var(--danger); font-size: 0.875rem; margin: 0 0 10px; }
.field select, .field textarea { width: 100%; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; word-break: break-all; resize: vertical; }
.field textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* ---- tabs, header extras ---- */
.tabs { max-width: 1160px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; }
.tab-btn { all: unset; cursor: pointer; padding: 8px 14px; font-size: 0.9375rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.theme-pick select { padding: 4px 8px; font-size: 0.875rem; }
.who { font-size: 0.875rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.tab-title { font-size: 1.6rem; letter-spacing: -0.015em; }
.tab-note { font-size: 0.9rem; margin-bottom: 18px; max-width: 70ch; }
.small { font-size: 0.8125rem; }
.mono { font-family: var(--mono); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { all: unset; cursor: pointer; padding: 5px 12px; font-size: 0.875rem; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- cards and charts ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; margin-top: 20px; }
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 16px 18px; min-width: 0; margin-top: 20px; }
.grid2 .card { margin-top: 0; }
.card h2 { margin-bottom: 8px; }
.card p.small { margin-bottom: 10px; }
.chart-box { margin-top: 6px; }
.chart-box svg { width: 100%; height: 170px; display: block; }
.chart-box .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-box .ln, .chart-box .ln-b { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart-box .ln { stroke: var(--accent); }
.chart-box .ln-b { stroke: var(--amber); }
.chart-box .ar { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.chart-box .bar-hit { fill: var(--accent); }
.chart-box .bar-miss { fill: var(--amber); }
.chart-box .bar-s3 { fill: var(--image); }
.chart-box .bar-bytes { fill: var(--video); }
.chart-box .ylab, .chart-box .xlab { fill: var(--muted); font: 11px var(--sans); }
.chart-box .none { fill: var(--muted); font: 13px var(--sans); }
.legend .sw.hit { background: var(--accent); }
.legend .sw.miss { background: var(--amber); }
.legend .sw.s3 { background: var(--image); }
.legend .sw.bytes { background: var(--video); }

.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 0.875rem; }
.bars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bars .lbl.key { font-family: var(--mono); font-size: 0.8125rem; }
.bars .val { color: var(--muted); white-space: nowrap; }
.bars .track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.bars .fill { height: 100%; border-radius: 3px; background: var(--accent); }
.bars .fill.alt { background: var(--image); }
.bars-empty { color: var(--muted); font-size: 0.875rem; }

/* ---- upload ---- */
.dir-row { display: flex; gap: 8px; align-items: center; }
.dir-row input { flex: 1; min-width: 0; }
.dir-row code { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.drop { border: 2px dashed var(--line); border-radius: 10px; padding: 26px 16px; text-align: center; cursor: pointer; display: grid; gap: 4px; justify-items: center; background: var(--sunken); }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--accent); outline: none; }
.queue { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 0.875rem; align-items: center; }
.queue .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .st { color: var(--muted); }
.queue .st.err { color: var(--danger); }
.queue .st.done { color: var(--ok); }
.queue progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--accent); }
.plain td, .plain th { padding: 9px 12px; }
.plain .key { font-family: var(--mono); font-size: 0.8125rem; word-break: break-all; }
.c-act2 { text-align: right; white-space: nowrap; }
.c-act2 .btn + .btn { margin-left: 6px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.badge.admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.badge.off { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.snippet { margin: 8px 0 0; padding: 12px 14px; background: var(--sunken); border-radius: 8px; font: 0.8125rem/1.5 var(--mono); overflow-x: auto; white-space: pre; }
@media (max-width: 560px) { .dir-row code { display: none; } .who { display: none; } }
.field .dir-row { display: flex; margin: 0; font-weight: 400; font-size: inherit; }
.field .dir-row code { margin: 0; font-weight: 400; display: block; }

/* ---- API tab ---- */
.api-opts { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 20px; }
.ex-sec { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.ex-sec h2 { margin: 0; }
.ep { font: 0.8125rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.ex { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ex:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-head h3 { font-size: 0.9375rem; margin: 0; }
.ex p.small { margin: 4px 0 0; max-width: 80ch; }
.ex .snippet { margin-top: 8px; }
.ex details { margin-top: 8px; }
.ex summary { cursor: pointer; }