:root {
  --ink: #242222;
  --muted: #77706d;
  --line: rgba(38,31,29,.09);
  --paper: #f7f4f2;
  --card: rgba(255,255,255,.88);
  --good: #2d7553;
  --danger: #a84545;
  --shadow: 0 18px 55px rgba(50,38,34,.08);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
  min-width: 320px; min-height: 100%; margin: 0; color: var(--ink);
  background: radial-gradient(circle at 12% 0%, rgba(241,78,149,.055), transparent 28rem), var(--paper);
  font-family: "Work Sans", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased;
}
button,a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.upload-header {
  position: sticky; top: 0; z-index: 30; background: rgba(247,244,242,.9);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.upload-header-inner { width: min(1560px, calc(100% - 64px)); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 0 11px; }
.upload-nav { min-height: 58px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 24px; }
.upload-logo { justify-self: start; color: var(--ink); font-family: "Sacramento", cursive; font-size: clamp(36px,3vw,47px); line-height: 1; text-decoration: none; white-space: nowrap; }
.upload-date { display:inline-block; margin-left:.22em; font-family:"Work Sans",Arial,sans-serif; font-size:.23em; font-weight:400; letter-spacing:.08em; vertical-align:.34em; }
.upload-current { justify-self:center; min-width:220px; text-align:center; line-height:1.2; }
.upload-current strong { display:block; font-size:15px; font-weight:500; }
.upload-current span { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.upload-back { justify-self:end; color:var(--muted); font-size:13px; font-weight:400; text-decoration:none; padding:9px 0; }
.upload-back::before { content:"← "; }
.upload-back:hover,.upload-back:focus-visible { color:var(--ink); }
.upload-main { width:min(920px,calc(100% - 36px)); margin:0 auto; padding:clamp(34px,5vw,68px) 0 80px; }
.upload-intro { text-align:center; margin-bottom:28px; }
.upload-intro h1 { margin:0; font-family:"Sacramento",cursive; font-size:clamp(42px,6vw,66px); line-height:1.08; font-weight:400; }
.upload-intro p { max-width:680px; margin:11px auto 0; color:var(--muted); font-size:14px; line-height:1.65; }
.drop-card,.queue-card,.success-card { border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:var(--shadow); }
.drop-card { position:relative; min-height:330px; padding:48px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-style:dashed; border-width:1.5px; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.drop-card.is-dragover { transform:translateY(-2px); border-color:rgba(36,34,34,.42); background:#fff; }
.file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:13px; border-radius:50%; background:#f1ece9; }
.drop-icon svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.drop-card h2 { margin:0; font-size:20px; font-weight:500; }
.drop-card > p { color:var(--muted); }
.drop-desktop { margin:6px 0 18px; font-size:13px; }
.drop-note { max-width:580px; margin:17px 0 0; font-size:11px; line-height:1.55; }
.pick-button,.secondary-button { border:0; border-radius:999px; cursor:pointer; transition:transform .15s ease,opacity .15s ease,background .15s ease; }
.pick-button { min-height:46px; padding:0 25px; background:var(--ink); color:#fff; font-size:13px; font-weight:500; }
.pick-button:hover,.secondary-button:hover { transform:translateY(-1px); }
.pick-button:active,.secondary-button:active { transform:translateY(0); }
.queue-card { margin-top:20px; overflow:hidden; }
.queue-head { padding:20px 22px 17px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.queue-head h2 { margin:0; font-size:16px; font-weight:500; }
.queue-head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.queue-actions { display:flex; gap:8px; }
.secondary-button { min-height:34px; padding:0 13px; background:#eee9e6; color:var(--ink); font-size:11px; font-weight:500; }
.secondary-button.danger { color:var(--danger); }
.overall-progress { padding:16px 22px 15px; border-bottom:1px solid var(--line); }
.overall-progress-track,.file-progress-track { position:relative; overflow:hidden; width:100%; height:5px; border-radius:999px; background:#e8e2df; }
.overall-progress-track span,.file-progress-track span { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:var(--ink); transition:width .12s linear; }
.overall-progress-text { margin-top:8px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.overall-progress-text strong { color:var(--ink); font-weight:600; }
.file-list { max-height:min(52vh,620px); overflow:auto; overscroll-behavior:contain; }
.file-row { display:grid; grid-template-columns:minmax(0,1fr) 120px 34px; align-items:center; gap:16px; min-height:67px; padding:12px 22px; border-bottom:1px solid var(--line); }
.file-row:last-child { border-bottom:0; }
.file-main { min-width:0; }
.file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.file-meta { margin-top:3px; color:var(--muted); font-size:9.5px; }
.file-progress { min-width:0; }
.file-progress-text { margin-top:5px; color:var(--muted); font-size:9px; text-align:right; }
.file-status { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f0ebe8; color:var(--muted); font-size:13px; font-weight:600; }
.file-row.is-done .file-status { background:#e5f0e9; color:var(--good); }
.file-row.is-error .file-status { background:#f6e6e6; color:var(--danger); }
.file-row.is-error .file-progress-track span { background:var(--danger); }
.success-card { margin-top:20px; padding:54px 28px; text-align:center; }
.success-mark { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 13px; border-radius:50%; background:#e5f0e9; color:var(--good); font-size:25px; }
.success-card h2 { margin:0; font-size:23px; font-weight:500; }
.success-card p { margin:8px 0 20px; color:var(--muted); font-size:13px; }
.noscript { margin-top:18px; padding:14px; border-radius:12px; background:#fff0f0; color:var(--danger); text-align:center; font-size:12px; }
[hidden] { display:none !important; }
@media (max-width:760px) {
  .upload-header-inner { width:calc(100% - 24px); padding-top:max(9px,env(safe-area-inset-top)); }
  .upload-nav { grid-template-columns:1fr auto; gap:10px 14px; min-height:62px; }
  .upload-logo { font-size:clamp(29px,8.5vw,38px); }
  .upload-date { font-size:.21em; }
  .upload-current { grid-column:1/-1; grid-row:2; min-width:0; margin-top:-3px; }
  .upload-current strong { font-size:11px; }
  .upload-current span { display:none; }
  .upload-back { grid-column:2; grid-row:1; font-size:11px; }
  .upload-main { width:calc(100% - 20px); padding-top:26px; }
  .upload-intro { margin-bottom:18px; }
  .upload-intro p { font-size:12px; }
  .drop-card { min-height:300px; padding:36px 18px; border-radius:18px; }
  .drop-desktop { display:none; }
  .queue-card { border-radius:18px; }
  .queue-head { align-items:flex-start; padding:16px; }
  .queue-actions { flex-direction:column; }
  .overall-progress { padding:14px 16px; }
  .file-row { grid-template-columns:minmax(0,1fr) 82px 30px; gap:9px; min-height:62px; padding:10px 14px; }
  .file-status { width:30px; height:30px; }
}
@media (max-width:430px) {
  .upload-logo { font-size:28px; }
  .upload-date { font-size:.2em; }
  .upload-intro h1 { font-size:42px; }
  .queue-head { display:grid; grid-template-columns:1fr; }
  .queue-actions { flex-direction:row; }
  .file-row { grid-template-columns:minmax(0,1fr) 30px; }
  .file-progress { grid-column:1/-1; grid-row:2; }
  .file-status { grid-column:2; grid-row:1; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }