/* cloud.xybersean.com — drive (v0.5)
   Viewport-fit two-column layout. Themes mirror int.xybersean.com. */

/* ─── design tokens ─────────────────────────────────────────────────── */

:root {
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  --max-content: 1480px;
  --gap: clamp(16px, 2.5vw, 40px);
  --pad-x: clamp(16px, 3vw, 48px);
  --pad-y: clamp(12px, 2vh, 28px);

  --radius: 6px;

  /* fluid type — scales 1366 → 5K without re-tuning */
  --t-eyebrow: 11px;
  --t-h1:      clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
  --t-body:    clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
  --t-meta:    12px;
}

/* ─── theme palettes (mirror of int.xybersean.com) ──────────────────── */

/* gray — restrained tonal grayscale, default theme */
[data-theme="gray"] {
  --bg:#1a1a1c; --frame:#222226; --line:#2c2c30; --line-2:#3a3a40;
  --ink:#d4d4d8; --ink-dim:#8a8a90; --ink-faint:#52525a;
  --cy:#9ca3af; --gn:#86c195; --or:#c19090; --am:#c1b390;
  --wallpaper: none;
  color-scheme: dark;
}

[data-theme="dark"] {
  --bg:#000000; --frame:#0a0a0a; --line:#1a1a1f; --line-2:#26262c;
  --ink:#e8eaf6; --ink-dim:#8a8a93; --ink-faint:#4a4a52;
  --cy:#7dd3fc; --gn:#86efac; --or:#fb7185; --am:#fcd34d;
  --wallpaper: none;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:#fafafa; --frame:#ebebeb; --line:#dadada; --line-2:#c4c4c4;
  --ink:#1a1a1a; --ink-dim:#4b5563; --ink-faint:#9ca3af;
  --cy:#3584e4; --gn:#26a269; --or:#c01c28; --am:#cd9309;
  --wallpaper: radial-gradient(circle at 50% 0%, #ffffff 0%, #f6f4ee 60%, #ebe8df 100%);
  color-scheme: light;
}
[data-theme="paper-beige-brown"] {
  --bg:#f4e6cf; --frame:#ead8b8; --line:#c9b48b; --line-2:#b89a72;
  --ink:#3a2616; --ink-dim:#6b4a2c; --ink-faint:#9a7950;
  --cy:#a8601e; --gn:#4a6230; --or:#a8332a; --am:#a8801a;
  --wallpaper: radial-gradient(circle at 30% 25%, #faf3e7 0%, #f4e6cf 45%, #e8d4b8 100%);
  color-scheme: light;
}
[data-theme="brown"] {
  --bg:#2a1f15; --frame:#1f1610; --line:#4a3625; --line-2:#5a3f2b;
  --ink:#f5deb3; --ink-dim:#c4a877; --ink-faint:#8a6c4a;
  --cy:#e8b04b; --gn:#a3b676; --or:#c44536; --am:#f4c970;
  --wallpaper: radial-gradient(circle at 30% 25%, #5a3f28 0%, #2a1f15 45%, #1a1208 100%);
  color-scheme: dark;
}
[data-theme="tokyo-night"] {
  --bg:#1a1b26; --frame:#15161e; --line:#2e3148; --line-2:#414868;
  --ink:#c0caf5; --ink-dim:#8a92b8; --ink-faint:#565b85;
  --cy:#7aa2f7; --gn:#9ece6a; --or:#f7768e; --am:#e0af68;
  --wallpaper: radial-gradient(circle at 30% 20%, #2e3552 0%, #1a1b26 45%, #0a0b14 100%);
  color-scheme: dark;
}
[data-theme="sunset-orange"] {
  --bg:#1f0a07; --frame:#1a0806; --line:#5e2818; --line-2:#7a2a18;
  --ink:#f4d4b0; --ink-dim:#c0967a; --ink-faint:#7a5840;
  --cy:#d97757; --gn:#9ca068; --or:#e85a3c; --am:#f0b25a;
  --wallpaper: linear-gradient(to bottom, #321524 0%, #7a2a18 28%, #b85230 50%, #3a1208 78%, #0f0604 100%);
  color-scheme: dark;
}
[data-theme="barbie-pink"] {
  --bg:#1f0c19; --frame:#15080f; --line:#4a1f38; --line-2:#5e2848;
  --ink:#fce7f0; --ink-dim:#c8a4b8; --ink-faint:#7a5868;
  --cy:#e0218a; --gn:#6fdc8c; --or:#e84564; --am:#f5c270;
  --wallpaper: radial-gradient(circle at 50% 35%, #3a1024 0%, #1f0c19 50%, #0a0307 100%);
  color-scheme: dark;
}
[data-theme="rainbow"] {
  --bg:#0a0a0a; --frame:#141414; --line:#26262c; --line-2:#3a3a40;
  --ink:#e8eaf6; --ink-dim:#a0a0b0; --ink-faint:#5a5a68;
  --cy:#a8c0e0; --gn:#9bd9a8; --or:#e8a3a3; --am:#e3c088;
  --wallpaper: none;
  color-scheme: dark;
}
[data-theme="rainbow"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(to right, #e8a3a3 0%, #e3c088 25%, #9bd9a8 50%, #8ec0e0 75%, #b0a8ea 100%);
  opacity: 0.18; pointer-events: none;
}

/* ─── reset + viewport-locked frame ─────────────────────────────────── */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { font-family: var(--sans); color: var(--ink); background: var(--bg); }

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;                  /* the page never scrolls */
  background-image: var(--wallpaper, none);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  -webkit-font-smoothing: antialiased;
}

/* keep all content above any wallpaper ::before backdrop */
.bar, main, .foot, .modal { position: relative; z-index: 1; }

a { color: var(--cy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── header bar ────────────────────────────────────────────────────── */

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px var(--pad-x);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-dim);
  background: var(--bg);
}
.brand { color: var(--ink); white-space: nowrap; }
.brand .x { color: var(--cy); }
.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.alpha { color: var(--ink-faint); }
.dot { color: var(--ink-faint); }
.hot-keys { color: var(--ink-faint); display: inline-flex; gap: 4px; align-items: baseline; }
.hot-keys .dim { opacity: 0.5; }
kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink-dim);
  background: var(--frame);
}
@media (max-width: 900px) { .hot-keys { display: none; } }

/* ─── theme picker (mirrors int) ────────────────────────────────────── */

.theme-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--mono); font-size: 11px;
  padding: 3px 8px; cursor: pointer; letter-spacing: 0.04em;
  transition: border-color 120ms ease, color 120ms ease;
}
.theme-pill:hover, .theme-pill:focus-visible { border-color: var(--cy); color: var(--cy); }
.theme-pill .theme-emoji { font-size: 12px; line-height: 1; }
.theme-pill .theme-name  { color: var(--ink-dim); }
.theme-pill[aria-expanded="true"] { border-color: var(--cy); color: var(--cy); }
.theme-pill[aria-expanded="true"] .theme-name { color: var(--cy); }

.theme-popover {
  position: absolute; top: 44px; right: var(--pad-x); z-index: 50;
  background: var(--frame); border: 1px solid var(--line-2);
  min-width: 220px; padding: 4px 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.theme-popover[hidden] { display: none; }
.theme-popover .theme-popover-label {
  display: block;
  padding: 8px 14px 6px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.theme-popover ul { list-style: none; margin: 0; padding: 4px 0; }
.theme-popover li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 14px; cursor: pointer;
  font-size: 12px; color: var(--ink);
  transition: background-color 100ms ease;
}
.theme-popover li:hover, .theme-popover li:focus-visible { background: var(--line); }
.theme-popover li[aria-current="true"] { background: var(--line); color: var(--cy); }
.theme-popover li[aria-current="true"]::after {
  content: "current"; margin-left: auto;
  color: var(--ink-faint); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.theme-popover li .em { font-size: 14px; line-height: 1; width: 18px; text-align: center; }
.theme-popover li .nm { letter-spacing: 0.02em; }
.theme-popover li .key {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 10px; letter-spacing: 0.08em;
}
.theme-popover li[aria-current="true"] .key { display: none; }

/* ─── 2-column grid ─────────────────────────────────────────────────── */

main.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--gap);
  padding: var(--pad-y) var(--pad-x);
  width: 100%; max-width: var(--max-content);
  margin: 0 auto;
  min-height: 0;                     /* allow children to constrain to parent */
  overflow: hidden;
}

.col {
  display: flex; flex-direction: column;
  min-height: 0;                     /* enables internal scroll if needed */
  overflow: hidden;
}
.col-left { justify-content: center; }
.col-right { justify-content: center; }

/* panels are state-driven; only one is visible per column */
.panel { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.panel[hidden] { display: none; }

/* ─── eyebrow + headlines ───────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.eyebrow.error { color: var(--or); }
.aside-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.dim { opacity: 0.6; }

.hero h1 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.hero .sub {
  font-size: var(--t-body);
  color: var(--ink-dim);
  margin: 0;
  max-width: 32em;
}
.hero-tight h1 { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.8rem); margin-bottom: 4px; }
.hero-tight .sub { font-family: var(--mono); font-size: var(--t-meta); margin-bottom: 6px; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-row h1, .hero-row .eyebrow { margin: 0; }

.bucket-title {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.burn-banner {
  font-family: var(--mono);
  font-size: var(--t-meta);
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--or, #d1601a);
  border-radius: 4px;
  color: var(--or, #d1601a);
  background: color-mix(in oklab, var(--or, #d1601a) 8%, transparent);
}

/* ─── passphrase form ───────────────────────────────────────────────── */

.passphrase-card {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 28rem;
}
.passphrase-card label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.passphrase-card input[type="password"] {
  appearance: none;
  background: var(--frame);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 150ms;
}
.passphrase-card input[type="password"]:focus { border-color: var(--cy); }

.passphrase-card button,
.btn-primary {
  appearance: none;
  background: var(--cy);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  cursor: pointer;
  transition: filter 150ms;
}
.passphrase-card button:hover, .btn-primary:hover { filter: brightness(1.1); }
.passphrase-card button:disabled, .btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ─── KDF progress ──────────────────────────────────────────────────── */

.progress-bar {
  background: var(--frame); border: 1px solid var(--line-2);
  border-radius: 999px; height: 6px; overflow: hidden;
  max-width: 32rem;
}
.progress-fill { background: var(--cy); height: 100%; width: 0%; transition: width 80ms linear; }
.hint { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-dim); margin: 0; }

/* ─── unlocked: file list (internal scroll) ─────────────────────────── */

.file-list-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.file-list-scroll::-webkit-scrollbar { width: 6px; }
.file-list-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.file-card {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta button"
    "progress progress";
  align-items: center;
  gap: 10px;
  background: var(--frame);
  transition: border-color 120ms;
}
.file-card:hover, .file-card.is-selected { border-color: var(--cy); }
.file-meta { grid-area: meta; min-width: 0; }
.file-name {
  font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.file-actions { grid-area: button; display: flex; gap: 8px; }

.btn-download {
  appearance: none; background: transparent;
  color: var(--cy); border: 1px solid var(--cy);
  border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px;
  padding: 7px 12px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.btn-download:hover { background: var(--cy); color: var(--bg); }
.btn-download:disabled { color: var(--ink-faint); border-color: var(--line-2); cursor: default; background: transparent; }

.btn-request-delete {
  appearance: none; background: transparent;
  color: var(--ink-faint); border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px;
  padding: 7px 8px; cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.btn-request-delete:hover { color: var(--or); border-color: var(--or); }

.dl-progress { grid-area: progress; }
.dl-bar {
  background: var(--frame); border-radius: 999px; height: 3px; position: relative;
  border: 1px solid var(--line-2);
}
.dl-fill { background: var(--cy); height: 100%; width: 0%; border-radius: 999px; transition: width 100ms linear; }
.dl-label {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-dim);
  margin-top: 4px;
  display: block;
}

.delete-status {
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--frame);
  border: 1px dashed var(--line-2);
  color: var(--ink-dim);
}
.delete-status.pending { border-color: var(--am); color: var(--am); }
.delete-status.denied  { border-color: var(--or); color: var(--or); }

/* ─── error screen ──────────────────────────────────────────────────── */

.btn-secondary {
  appearance: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
  align-self: flex-start;
}
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--cy); color: var(--cy); }

/* ─── lock button ───────────────────────────────────────────────────── */

.lock-btn {
  appearance: none; background: transparent;
  color: var(--ink-dim); border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px;
  padding: 5px 10px; cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 120ms, border-color 120ms;
}
.lock-btn:hover { color: var(--cy); border-color: var(--cy); }
.lock-btn .lock-glyph { margin-right: 4px; opacity: 0.7; }

/* ─── right column aside content ────────────────────────────────────── */

.col-right .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 28px);
  background: color-mix(in oklab, var(--frame) 90%, transparent);
  max-height: 100%;
  overflow: auto;
}
.how-list {
  list-style: none; padding: 0; margin: 0 0 18px;
  counter-reset: step;
}
.how-list li {
  counter-increment: step;
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0.9rem;
  color: var(--ink-dim);
  font-size: var(--t-body);
  line-height: 1.5;
}
.how-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--mono); font-size: 11px;
  color: var(--cy);
}
.aside-meta {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.kv {
  font-family: var(--mono); font-size: var(--t-meta);
  color: var(--ink);
  display: flex; gap: 8px;
}
.kv .k {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 9rem;
  flex-shrink: 0;
}
.action-body { margin-bottom: 14px; }
.action-body .sub { color: var(--ink-dim); font-size: var(--t-body); }
.action-body .file-detail-name {
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
  margin: 0 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.action-body .file-detail-sub {
  font-family: var(--mono); font-size: var(--t-meta);
  color: var(--ink-dim); margin: 0 0 14px;
}
.action-body .action-row {
  display: flex; flex-direction: column; gap: 8px;
}

/* ─── footer ────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding: 8px var(--pad-x);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  background: var(--bg);
}

/* ─── modal ─────────────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--frame);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  max-width: 32rem;
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card h2 {
  font-family: var(--sans); font-weight: 500;
  font-size: 1.4rem; color: var(--ink);
  margin: 0;
}
.modal-label {
  font-family: var(--mono); font-size: var(--t-meta);
  color: var(--ink-faint);
  text-transform: lowercase; letter-spacing: 0.04em;
  margin-top: 6px;
}
.modal-card textarea {
  appearance: none;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  min-height: 70px;
}
.modal-card textarea:focus { border-color: var(--cy); }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px;
}

/* ─── focus ring (keyboard nav) ─────────────────────────────────────── */

[data-nav-cell]:focus-visible,
input:focus-visible,
button:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ─── responsive: collapse to single column under 720px ─────────────── */

@media (max-width: 720px) {
  body { overflow: auto; height: auto; min-height: 100dvh; }
  main.grid { grid-template-columns: 1fr; gap: 20px; padding-top: 18px; }
  .col-right .panel { max-height: none; }
}

/* ─── responsive: tighter on very short viewports (1366×768) ─────────── */

@media (max-height: 800px) {
  :root {
    --t-h1: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    --pad-y: 12px;
  }
  .panel { gap: 14px; }
  .how-list li { margin-bottom: 0.6rem; line-height: 1.45; }
  .aside-meta { padding-top: 10px; }
}

/* ─── upload UI ─────────────────────────────────────────────────────── */

.alt-link {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin: 6px 0 0;
}
.alt-link a { color: var(--cy); }

.upload-form { display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1 1 auto; }
.upload-passphrase { display: flex; flex-direction: column; gap: 6px; }
.upload-passphrase label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  text-transform: lowercase; letter-spacing: 0.04em;
}
.upload-pp-row {
  display: flex; gap: 6px; align-items: stretch;
}
.upload-pp-row input {
  flex: 1 1 auto;
  appearance: none;
  background: var(--frame);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}
.upload-pp-row input:focus { border-color: var(--cy); }
.btn-secondary.small {
  align-self: stretch;
  padding: 8px 10px;
  font-size: 12px;
}
.fineprint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin: 0;
}

.drop-zone {
  flex: 1 1 auto;
  min-height: 120px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column;
  align-items: stretch; gap: 8px;
  cursor: pointer;
  background: color-mix(in oklab, var(--frame) 60%, transparent);
  transition: border-color 120ms, background 120ms;
}
.drop-zone:hover, .drop-zone:focus-visible { border-color: var(--cy); }
.drop-zone.drag-over { border-color: var(--cy); background: color-mix(in oklab, var(--cy) 8%, var(--frame)); }
.drop-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.drop-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin: 0;
  text-align: center;
}

.upload-queue {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 30vh; overflow: auto;
}
.queue-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name size status" "bar bar bar";
  gap: 4px 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.qi-name { grid-area: name; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-size { grid-area: size; color: var(--ink-dim); }
.qi-status { grid-area: status; color: var(--ink-faint); }
.qi-bar {
  grid-area: bar;
  background: var(--frame);
  border-radius: 999px;
  height: 2px;
  overflow: hidden;
}
.qi-fill { display: block; height: 100%; background: var(--cy); width: 0%; transition: width 120ms linear; }

.upload-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─── upload success ─────────────────────────────────────────────── */

.upload-success-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border: 1px solid var(--gn);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--gn) 8%, var(--frame));
}
.kv-line {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--mono);
  font-size: 12px;
  margin: 0;
  word-break: break-all;
}
.kv-line .k {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 6.5rem;
  flex-shrink: 0;
}
.kv-line a { color: var(--cy); text-decoration: underline; }
.success-pp { color: var(--ink); font-weight: 500; }

.warn-block {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--am);
  padding: 8px 10px;
  border: 1px dashed var(--am);
  border-radius: 4px;
  margin: 0;
}

.check-saved {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-size: var(--t-body);
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
}
.check-saved input { margin-top: 4px; flex-shrink: 0; }