/* THEME=bold: chunky borders, hard offset shadows, mono labels. Loaded after app.css. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  --font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --bg: #f2efe6;
  --dots: #d8d3c4;
  --surface: #ffffff;
  --surface-2: #f2efe6;
  --line: #111111;
  --ink: #111111;
  --ink-2: #3b3b3b;
  --ink-3: #6f6c63;
  --accent: #ffd02b;
  --accent-hover: #ffc400;
  --accent-ink: #111111;
  --on-accent: #111111;
  --danger: #e2401c;
  --danger-soft: #ffe1d8;
  --shadow: #111111;
  --radius: 6px;
  --radius-sm: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --dots: #2a2a2a;
    --surface: #1b1b1b;
    --surface-2: #262626;
    --line: #f2efe6;
    --ink: #f2efe6;
    --ink-2: #cfcac0;
    --ink-3: #8f8b82;
    --accent: #c6ff3a;
    --accent-hover: #b4f01f;
    --accent-ink: #c6ff3a;
    --on-accent: #111111;
    --danger: #ff6a4a;
    --danger-soft: #3a1d16;
    --shadow: #c6ff3a;
  }
}

body {
  font-size: 16px;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 13px; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* layout */
.topbar, .column { max-width: 540px; }
.topbar { padding-top: 32px; padding-bottom: 20px; }
.brand { font-family: var(--mono); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.brand-mark { border: 2px solid var(--line); background: var(--accent); color: #111; border-radius: 4px; width: 30px; height: 30px; box-shadow: 2px 2px 0 var(--line); }
.topbar .btn-ghost { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.column { gap: 22px; }

/* cards */
.card { border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); }
.card-pad { padding: 26px; }
.lede, .footnote { font-family: var(--mono); font-size: 13px; }
.footnote { color: var(--ink-2); }

/* buttons */
.btn { border: 2px solid var(--line); font-weight: 700; transition: transform .08s, box-shadow .08s, background-color .15s; }
.btn-primary {
  box-shadow: 3px 3px 0 var(--line);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
}
.btn-primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.btn-primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn-primary:disabled { opacity: 1; background: var(--surface-2); color: var(--ink-3); border-style: dashed; box-shadow: none; }
.btn-ghost { border-color: transparent; }
.btn-lg { height: 52px; }
.btn-meta { font-weight: 500; text-transform: none; letter-spacing: 0; }
.text-link { font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { background: var(--accent); color: #111; text-decoration: none; }
.icon-btn { color: var(--ink-2); border-radius: 4px; }
.icon-btn:hover { background: var(--accent); color: #111; }
.icon-btn.armed, .icon-btn.armed:hover { font-family: var(--mono); text-transform: uppercase; border: 2px solid var(--line); }

/* inputs */
.pw-field input, .message-field textarea, .copy-field input {
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.pw-field input { height: 50px; font-family: var(--mono); }
.pw-field input:focus, .message-field textarea:focus, .copy-field input:focus {
  border-color: var(--line); box-shadow: 3px 3px 0 var(--accent);
}
.copy-field input { height: 48px; font-family: var(--mono); font-size: 13px; background: var(--surface-2); }
.copy-field .btn { height: 48px; }

/* uploader */
.dropzone { margin: 22px 22px 0; padding: 34px 16px; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.dropzone:hover, body.dragging .dropzone { background: var(--accent); border-style: solid; }
.dropzone:hover .add-main, .dropzone:hover .add-folder, .dropzone:hover .drop-hint,
body.dragging .dropzone .add-main { color: #111; }
.add-main { font-size: 18px; font-weight: 700; color: var(--ink); }
.add-main .i { width: 22px; height: 22px; stroke-width: 2.6; }
.add-folder { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.add-main:hover, .add-folder:hover { background: transparent; text-decoration: underline; text-decoration-thickness: 2px; }
.drop-hint { font-family: var(--mono); font-size: 13px; }
[data-state="files"] .dropzone { padding: 6px 8px; border-style: solid; border-width: 2px; background: var(--surface-2); }

.file-list { padding: 0 14px; }
.file-list li { border-radius: 0; padding: 10px 8px; }
.file-list li + li { border-top: 2px dotted var(--ink-3); }
.file-name { font-weight: 500; }
.file-dir { font-family: var(--mono); font-size: 12px; }
.file-size, .capacity, .tx-meta, .expiry, #progress-sub { font-family: var(--mono); font-size: 12.5px; }
.chip {
  width: 44px; height: 30px; border: 2px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--ink); background: var(--surface);
}
.file-list li:nth-child(4n+1) .chip { background: #ffd02b; color: #111; }
.file-list li:nth-child(4n+2) .chip { background: #8fd6ff; color: #111; }
.file-list li:nth-child(4n+3) .chip { background: #ff9f8a; color: #111; }
.file-list li:nth-child(4n+4) .chip { background: #b9f28c; color: #111; }

.meter { height: 10px; border: 2px solid var(--line); border-radius: 2px; background: var(--surface); }
.meter i { background: var(--ink); }

.segmented legend, .field-label { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.field-label em { text-transform: none; letter-spacing: 0; }
.seg-row { padding: 0; gap: 0; background: none; border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg-row label + label { border-left: 2px solid var(--line); }
.seg-row span { border-radius: 0; padding: 9px 0; font-family: var(--mono); font-weight: 700; color: var(--ink); }
.seg-row label:hover span { background: var(--surface-2); }
.seg-row input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }

/* progress */
#progress-title { font-size: 22px; }
.pct { font-family: var(--mono); font-size: 34px; font-weight: 800; }
.bar { height: 26px; margin: 18px 0 12px; border: 2px solid var(--line); border-radius: 3px; background: var(--surface); }
.bar i {
  background-color: var(--accent);
  background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .18) 0 8px, transparent 8px 16px);
  background-size: 22.6px 22.6px;
  border-right: 2px solid var(--line);
  animation: stripes .6s linear infinite;
}
@keyframes stripes { to { background-position: 22.6px 0; } }

/* done */
#pane-done h1 { display: inline-block; background: var(--accent); color: #111; padding: 2px 10px; border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line); transform: rotate(-1.5deg); }
#pane-done .lede { margin-top: 14px; }

/* transfers */
.count { font-family: var(--mono); background: var(--ink); color: var(--bg); padding: 1px 7px; border-radius: 3px; font-size: 12px; }
.tx + .tx { border-top: 2px dotted var(--ink-3); }
.tx-name { font-weight: 600; }
.tx-name:hover { color: var(--ink); background: var(--accent); }
.tx-more { font-family: var(--mono); font-size: 12px; }
.section-head .subtle { font-family: var(--mono); font-size: 12px; }

/* download page */
.dim { color: var(--ink-3); }
.note { border-left: 6px solid var(--accent); background: var(--surface-2); font-size: 15px; color: var(--ink); padding: 12px 14px; }
@media (prefers-color-scheme: dark) { .note { border-left-color: var(--accent); } }
.file-list-static { border-top: 2px solid var(--line); }
.card-foot { padding: 18px 22px 24px; }

/* overlays */
.drop-overlay { background: var(--accent); padding: 18px; }
.drop-overlay-inner { border: 4px dashed #111; color: #111; font-family: var(--mono); font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.toast { background: var(--ink); color: var(--bg); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--accent); font-family: var(--mono); font-size: 13px; border-radius: 3px; }
#upload-error { border: 2px solid var(--danger); font-family: var(--mono); font-size: 13px; }

@media (max-width: 520px) {
  .card { box-shadow: 4px 4px 0 var(--shadow); }
  .card-pad { padding: 20px; }
  .dropzone { margin: 16px 16px 0; }
}
#cancel { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }