/* jxndrop — studio-utility look: near-black panel, tape-amber rec light,
   engineer's mono for anything operational, level-meter progress. */

:root {
  --bg: #0a0b0d;
  --panel: #14151a;
  --panel-2: #1b1d24;
  --line: #272a33;
  --ink: #edeef2;
  --mut: #8e95a5;
  --acc: #f0b04b;        /* tape amber */
  --acc-ink: #191104;
  --ok: #5fd68f;
  --err: #e4705c;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(900px 480px at 50% -140px, #16181f 0%, var(--bg) 65%);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px) 16px;
}

.shell { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 14px; }

/* ---- masthead -------------------------------------------------------- */
.mast { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.brand { font-weight: 800; font-size: 24px; letter-spacing: -0.6px; }
.rec {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); margin-left: 8px; vertical-align: 12px;
  transition: background .3s;
}
.rec.live { background: var(--acc); }
.rec.done { background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .rec.live { animation: pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
}

.steps { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; font-family: var(--mono); font-size: 11px; color: var(--mut); letter-spacing: .02em; }
.steps li { opacity: .55; white-space: nowrap; }
.steps li b { font-weight: 400; color: var(--mut); margin-right: 4px; }
.steps li.on { opacity: 1; color: var(--ink); }
.steps li.on b { color: var(--acc); }
.steps li.donestep { opacity: 1; }
.steps li.donestep b { color: var(--ok); }

/* ---- panel ----------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 5vw, 34px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.panel h1 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.3px; }
.lead { margin: 0 0 20px; color: var(--mut); }

/* ---- inputs ---------------------------------------------------------- */
input {
  width: 100%; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-size: 15px; outline: none;
}
input::placeholder { color: #5b6172; }
input:focus-visible { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(240, 176, 75, .18); }

.codebox {
  font-family: var(--mono); font-size: 24px; letter-spacing: .55em; text-indent: .55em;
  text-align: center; margin-bottom: 12px;
}
.codebox.small { font-size: 18px; margin-bottom: 0; }

button {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 10px;
  background: var(--acc); color: var(--acc-ink);
  font-weight: 700; font-size: 15px; cursor: pointer;
}
button:hover { filter: brightness(1.06); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }

.err { color: var(--err); margin: 12px 0 0; font-size: 14px; }
.done { color: var(--ok); margin: 16px 0 0; font-weight: 600; }

/* ---- drop zone ------------------------------------------------------- */
.zone {
  display: block; border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 30px 18px; text-align: center; color: var(--mut); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.zone:hover, .zone.drag, .zone:focus-within { border-color: var(--acc); background: rgba(240, 176, 75, .05); color: var(--ink); }
.zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.zone-text u { text-underline-offset: 3px; }

/* ---- queue ----------------------------------------------------------- */
.list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.item .row { display: flex; align-items: baseline; gap: 10px; }
.item .name { font-family: var(--mono); font-size: 13px; word-break: break-all; flex: 1; }
.item .size { font-family: var(--mono); font-size: 12px; color: var(--mut); white-space: nowrap; }
.item .x {
  width: auto; padding: 0 6px; background: none; border: 0; color: var(--mut);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.item .x:hover { color: var(--err); filter: none; }

/* the level meter: segmented ticks, amber while running, green when done */
.meter { height: 8px; margin-top: 8px; border-radius: 3px; background: #0e1014; overflow: hidden; position: relative; display: none; }
.meter > i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--acc) 0 6px, rgba(240, 176, 75, .25) 6px 9px);
  transition: width .25s;
}
.item.sending .meter, .item.done .meter, .item.error .meter { display: block; }
.item.done .meter > i { background: repeating-linear-gradient(90deg, var(--ok) 0 6px, rgba(95, 214, 143, .3) 6px 9px); }
.item.error .meter > i { background: var(--err); }

.item .st { font-family: var(--mono); font-size: 11px; margin-top: 6px; color: var(--mut); display: none; }
.item.sending .st, .item.done .st, .item.error .st { display: block; }
.item.done .st { color: var(--ok); }
.item.error .st { color: var(--err); }

/* ---- details + send bar ---------------------------------------------- */
.details { display: grid; gap: 8px; margin-top: 14px; }

.sendbar { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.sendhint { font-family: var(--mono); font-size: 12px; color: var(--acc); margin-bottom: 10px; letter-spacing: .02em; }
.sendrow { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
@media (max-width: 440px) { .sendrow { grid-template-columns: 1fr; } }

.foot { color: var(--mut); font-size: 12px; text-align: center; opacity: .75; font-family: var(--mono); }