/* =========================================================================
   #SamY 2026 — Mobile-first, Apple-inspired white theme
   Works 320px → 4K. No horizontal scroll. Touch-friendly (44px targets).
   ========================================================================= */

/* ---- Design tokens ----
   Colour tokens now live in foundation.css (single source of truth, loaded
   before this file). The geometry tokens below are retained until a later
   migration phase adopts the foundation scales with layout verification. */
:root{
  /* M4 redesign — refined, utility-first geometry (tighter, Linear/Stripe idiom) */
  --qs-radius:14px;              /* cards */
  --qs-radius-sm:10px;           /* buttons, inputs */
  --qs-radius-pill:999px;

  --qs-shadow:0 4px 24px rgba(0,0,0,.06);
  --qs-shadow-hover:0 10px 40px rgba(0,0,0,.10);
  --qs-shadow-lg:0 -6px 30px rgba(0,0,0,.10);

  --qs-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --qs-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --qs-tap:44px;                 /* minimum touch target */
  --qs-gap:clamp(12px,3vw,20px);
  --qs-pad:clamp(16px,4vw,28px); /* card padding — admin-tight base */
  --qs-pad-lg:clamp(24px,5vw,40px); /* public "breathe" rhythm */
  --qs-space:clamp(16px,4vw,24px);

  --qs-container:1120px;
  --qs-ease:cubic-bezier(.22,.61,.36,1);

  /* iOS safe areas */
  --qs-safe-b:env(safe-area-inset-bottom,0px);
  --qs-safe-t:env(safe-area-inset-top,0px);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;}
body{
  font-family:var(--qs-font);
  background-color:var(--bg);
  /* Ambient light — a whisper of the brand accent above the fold (premium depth,
     no geometry change). Fades out fast; follows the theme accent. */
  background-image:radial-gradient(1000px 440px at 50% -220px, var(--accent-soft), transparent 66%);
  background-repeat:no-repeat;background-attachment:fixed;
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  font-size:clamp(15px,2.6vw,16px);
}
img,video,canvas,svg,iframe{max-width:100%;height:auto;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);}
button{font-family:inherit;}
.text-muted{color:var(--text-muted)!important;}

/* ---- Accessibility ---- */
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px;}
.qs-skip{
  position:absolute;left:-999px;top:0;z-index:3000;
  background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;
  font-weight:600;
}
.qs-skip:focus{left:0;color:#fff;}
.qs-visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---- Typography (M4: tighter tracking, stronger display weights) ---- */
h1,h2,h3,h4,h5{letter-spacing:-.025em;line-height:1.14;margin:0 0 .4em;}
h1{font-size:clamp(1.7rem,6vw,2.6rem);font-weight:750;letter-spacing:-.032em;}
h2{font-size:clamp(1.35rem,5vw,1.9rem);font-weight:740;}
h3{font-size:clamp(1.15rem,4.2vw,1.45rem);font-weight:680;}
h4{font-size:clamp(1.02rem,3.6vw,1.2rem);font-weight:660;}
h5{font-size:clamp(.96rem,3vw,1.08rem);font-weight:640;}
p{margin:0 0 1rem;}
.qs-num,[data-num]{font-family:var(--qs-mono);font-variant-numeric:tabular-nums;}

/* ---- Container ---- */
.container{
  width:100%;
  max-width:var(--qs-container);
  margin-inline:auto;
  padding-inline:clamp(16px,5vw,32px);
}

/* ---- Nav (public) — sticky top ---- */
.qs-nav{
  background:var(--surface-glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
  padding:calc(10px + var(--qs-safe-t)) 0 10px;
}
.qs-nav .container{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.qs-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:clamp(1.05rem,3.4vw,1.2rem);color:var(--text-strong);
  min-height:var(--qs-tap);
}
.qs-brand img{max-height:30px;width:auto;}
.qs-logo-dot{width:22px;height:22px;border-radius:7px;background:var(--accent);display:inline-block;flex-shrink:0;}
.qs-nav-link{
  color:var(--text-strong);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--qs-tap);min-width:var(--qs-tap);padding:0 14px;
  border-radius:var(--qs-radius-pill);background:var(--bg);transition:background .2s var(--qs-ease);
}
.qs-nav-link:hover{background:var(--accent-soft);color:var(--accent);}

/* ---- Main / footer ---- */
.qs-main{flex:1;padding:var(--qs-space) 0 calc(var(--qs-space) + 20px);}
.qs-footer{
  border-top:1px solid var(--border);
  padding:20px 0 calc(20px + var(--qs-safe-b));
  color:var(--text-muted);font-size:.9rem;text-align:center;
}
.qs-footer p{margin:0;}

/* ---- Cards ---- */
.qs-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--qs-radius);
  box-shadow:var(--e1);
  padding:var(--qs-pad);
}

/* ---- Hero (public "breathe" rhythm) ---- */
.qs-hero{text-align:center;max-width:660px;margin:0 auto clamp(24px,5vw,38px);}
.qs-hero h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:760;letter-spacing:-.04em;margin-bottom:.32em;}
.qs-hero p{color:var(--text-muted);font-size:clamp(1.02rem,3.2vw,1.18rem);margin:0 auto;max-width:52ch;line-height:1.5;}
.qs-emoji{font-size:clamp(2rem,7vw,2.6rem);margin-bottom:8px;line-height:1;}

/* Trust strip — truthful reassurance (no account / private link / auto-expires) */
.qs-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin-top:20px;}
.qs-trust-item{display:inline-flex;align-items:center;gap:7px;color:var(--text-muted);font-size:.85rem;font-weight:500;}
.qs-trust-item svg{opacity:.85;flex-shrink:0;}
.qs-trust-item svg .qs-i,.qs-trust-item .qs-i{vertical-align:middle;}

/* =========================================================================
   Uploader — the hero action (elevated; progress stays dominant)
   ========================================================================= */
.qs-uploader{max-width:720px;margin:0 auto;}
.qs-dropzone{
  border:1.5px dashed var(--border-strong);
  border-radius:20px;
  padding:clamp(34px,7vw,56px) clamp(20px,5vw,32px);
  text-align:center;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .2s var(--qs-ease),box-shadow .2s var(--qs-ease),transform .2s var(--qs-ease);
  background:var(--surface);box-shadow:var(--e2);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.qs-dropzone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 190px at 50% 0,var(--accent-soft),transparent 72%);opacity:0;transition:opacity .25s var(--qs-ease);}
.qs-dropzone-inner{position:relative;z-index:1;}
.qs-dropzone:hover,.qs-dropzone:focus-visible{border-color:var(--accent);box-shadow:var(--e3);transform:translateY(-2px);}
.qs-dropzone:hover::after,.qs-dropzone.dragover::after{opacity:1;}
.qs-dropzone.dragover{
  border-color:var(--accent);border-style:solid;
  box-shadow:0 0 0 4px var(--accent-soft),var(--e3);
}
.qs-dropzone:active{transform:translateY(0) scale(.996);}
.qs-dropzone:hover .qs-upload-icon,.qs-dropzone.dragover .qs-upload-icon{transform:translateY(-2px);}
.qs-upload-icon{
  width:clamp(60px,15vw,74px);height:clamp(60px,15vw,74px);
  margin:0 auto 18px;border-radius:20px;line-height:0;
  background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--qs-ease);
}
.qs-upload-icon svg{width:clamp(28px,7vw,32px);height:auto;}
.qs-dropzone h3{margin-bottom:3px;font-size:clamp(1.15rem,4vw,1.4rem);font-weight:700;}
.qs-dropzone p{margin:0;color:var(--text-muted);}
.qs-dropzone-hint{font-size:.8rem;margin-top:14px!important;opacity:.85;}
.qs-link{color:var(--accent);font-weight:640;}

.qs-options{margin-top:var(--qs-gap);}
.form-label{font-weight:500;font-size:.92rem;margin-bottom:6px;display:block;}
.form-select,.form-control{
  width:100%;border-radius:var(--qs-radius-sm);border:1px solid var(--border-strong);
  padding:.7rem .9rem;min-height:var(--qs-tap);font-size:16px;background:var(--input-bg);color:var(--text);
  transition:border-color .2s var(--qs-ease),box-shadow .2s var(--qs-ease);
}
.form-select:focus,.form-control:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;
}

/* ---- Queue ---- */
.qs-queue{list-style:none;padding:0;margin:var(--qs-gap) 0 0;}
.qs-queue-row{
  display:flex;align-items:center;gap:clamp(10px,3vw,14px);
  padding:clamp(10px,3vw,14px);border:1px solid var(--border);border-radius:var(--qs-radius-sm);
  margin-bottom:10px;animation:qsSlideIn .3s var(--qs-ease);background:var(--surface);
}
.qs-file-info{flex:1;min-width:0;}
.qs-file-name{
  font-weight:600;font-size:clamp(.88rem,2.8vw,.95rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qs-file-meta{
  display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;
  font-size:clamp(.72rem,2.4vw,.78rem);color:var(--text-muted);margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.qs-file-meta span:empty{display:none;}
.qs-file-status.done{color:var(--success-fill);font-weight:600;}
.qs-file-status.done::before{content:"✓ ";}
.qs-file-status.error{color:var(--danger-fill);font-weight:600;}
.qs-progress{height:6px;background:var(--border);border-radius:var(--qs-radius-pill);margin-top:8px;overflow:hidden;}
.qs-progress-bar{
  height:100%;width:0;background:var(--accent);border-radius:inherit;
  transition:width .25s var(--qs-ease);position:relative;overflow:hidden;
}
.qs-progress-bar.done{background:var(--success-fill);}
/* Subtle moving sheen while a row is actively uploading */
.qs-queue-row[data-state="uploading"] .qs-progress-bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  background-size:200% 100%;
  animation:qsSheen 1.4s linear infinite;
}
@keyframes qsSheen{from{background-position:150% 0;}to{background-position:-150% 0;}}
/* Row state accents */
.qs-queue-row[data-state="error"]{
  border-color:rgba(255,59,48,.4);
  background:linear-gradient(0deg,rgba(255,59,48,.05),rgba(255,59,48,.05)),var(--surface);
}
.qs-queue-row[data-state="paused"]{border-style:dashed;}
.qs-queue-row[data-state="paused"] .qs-progress-bar{opacity:.55;}
.qs-file-controls{display:flex;gap:2px;flex-shrink:0;}
.qs-file-controls .qs-icon-btn{width:40px;height:40px;min-width:40px;min-height:40px;}
.qs-file-controls .qs-cancel:hover{background:rgba(255,59,48,.12);color:var(--danger-fill);}
.qs-file-controls .qs-pause:hover,.qs-file-controls .qs-resume:hover{color:var(--accent);}

/* Icon buttons — 44x44 touch targets */
.qs-icon-btn{
  border:none;background:transparent;
  width:var(--qs-tap);height:var(--qs-tap);min-width:var(--qs-tap);min-height:var(--qs-tap);
  border-radius:12px;cursor:pointer;color:var(--text-muted);
  font-size:1rem;line-height:1;transition:background .2s var(--qs-ease),color .2s var(--qs-ease);
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;text-decoration:none;
}
.qs-icon-btn:hover{background:var(--bg);color:var(--text-strong);}
.qs-icon-btn:active{background:var(--border);}

/* ---- Buttons ---- */
.qs-actions{display:flex;gap:12px;margin-top:var(--qs-gap);flex-wrap:wrap;}
.qs-btn{
  border:none;border-radius:var(--qs-radius-sm);
  padding:.8rem 1.4rem;min-height:var(--qs-tap);
  font-weight:600;font-size:clamp(.95rem,2.8vw,1rem);cursor:pointer;
  transition:background .2s var(--qs-ease),box-shadow .2s var(--qs-ease),transform .15s var(--qs-ease),color .2s var(--qs-ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;line-height:1.1;
  text-decoration:none;
}
.qs-btn:disabled{background:var(--disabled-surface);color:var(--disabled-text);cursor:not-allowed;box-shadow:none;transform:none;}
.qs-btn-primary{background:var(--accent);color:#fff;flex:1 1 auto;box-shadow:var(--e1);}
.qs-btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--e2);transform:translateY(-1px);color:#fff;}
.qs-btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--e1);}
.qs-btn-ghost{background:var(--bg);color:var(--text-strong);}
.qs-btn-ghost:hover{background:var(--border);color:var(--text-strong);}
.qs-btn-lg{padding:.95rem 1.6rem;font-size:clamp(1rem,3vw,1.05rem);min-height:52px;}
.qs-btn-block{width:100%;flex:1 1 100%;}

/* ---- Result panel ---- */
.qs-result{max-width:640px;margin:var(--qs-space) auto 0;text-align:center;}
.qs-result-list{list-style:none;padding:0;margin:var(--qs-gap) 0 0;text-align:left;}
.qs-result-item{border:1px solid var(--border);border-radius:var(--qs-radius-sm);padding:14px;margin-bottom:12px;}
.qs-result-item .name{font-weight:600;margin-bottom:10px;word-break:break-word;}
.qs-share-row{display:flex;gap:8px;flex-wrap:wrap;}
.qs-share-input{
  flex:1 1 180px;min-width:0;border:1px solid var(--border-strong);border-radius:var(--qs-radius-sm);
  padding:.7rem .8rem;min-height:var(--qs-tap);background:var(--bg);
  font-size:16px;color:var(--text-strong);
  transition:border-color .2s var(--qs-ease),box-shadow .2s var(--qs-ease);
}
.qs-share-input:focus{
  border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.qs-share-row .qs-btn{flex:0 0 auto;}

/* =========================================================================
   Fixed bottom upload status (mobile-friendly, all sizes)
   ========================================================================= */
.qs-upload-statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1500;
  background:var(--surface-glass);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--border);
  box-shadow:var(--qs-shadow-lg);
  padding:12px clamp(14px,5vw,24px) calc(12px + var(--qs-safe-b));
  transform:translateY(110%);
  transition:transform .35s var(--qs-ease);
}
.qs-upload-statusbar.show{transform:translateY(0);}
.qs-usb-inner{max-width:var(--qs-container);margin-inline:auto;display:flex;align-items:center;gap:14px;}
.qs-usb-text{flex:1;min-width:0;}
.qs-usb-title{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-usb-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--text-muted);margin-top:2px;}
.qs-usb-pct{font-weight:700;font-size:1.05rem;color:var(--accent);flex-shrink:0;font-variant-numeric:tabular-nums;}
.qs-usb-progress{height:6px;background:var(--border);border-radius:var(--qs-radius-pill);overflow:hidden;margin-top:10px;}
.qs-usb-progress-bar{height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .25s var(--qs-ease);}
/* Avoid content hidden behind the fixed bar while uploading */
body.qs-uploading .qs-main{padding-bottom:120px;}

/* =========================================================================
   Download page
   ========================================================================= */
.qs-download{
  display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,20px);
  max-width:900px;margin:0 auto;align-items:start;
}
.qs-download-card{text-align:center;padding:clamp(28px,5vw,40px);position:relative;overflow:hidden;}
.qs-download-card::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;pointer-events:none;
  background:radial-gradient(340px 150px at 50% -30px,var(--accent-soft),transparent 72%);}
.qs-file-badge{
  position:relative;z-index:1;
  width:clamp(80px,20vw,104px);height:clamp(80px,20vw,104px);border-radius:24px;margin:0 auto 18px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:750;font-size:clamp(1rem,3.4vw,1.3rem);letter-spacing:.02em;
  box-shadow:0 12px 28px -10px var(--accent-soft),var(--e1);
}
.qs-download-btn{box-shadow:0 10px 26px -10px var(--accent-soft);}
.qs-download-name{position:relative;z-index:1;word-break:break-word;font-size:clamp(1.4rem,5vw,1.9rem);font-weight:730;letter-spacing:-.03em;}
.qs-download-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:clamp(20px,3vw,26px) 0;
}
.qs-download-meta div{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--qs-radius-sm);padding:12px 14px;
}
.qs-download-meta span{font-family:var(--qs-mono);font-size:.66rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.qs-download-meta strong{font-size:clamp(.95rem,2.6vw,1.05rem);margin-top:4px;font-weight:680;}
.qs-preview{
  margin:var(--qs-gap) 0;border-radius:var(--qs-radius-sm);overflow:hidden;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;min-height:80px;
}
.qs-preview img,.qs-preview video{max-height:min(50vh,440px);display:block;margin:0 auto;}
.qs-preview iframe{width:100%;height:min(60vh,440px);border:none;display:block;}
.qs-preview audio{width:100%;padding:16px;}
.qs-download-btn{width:100%;margin-top:8px;}
.qs-qr-card{text-align:center;}
.qs-qr-card h4{margin-bottom:12px;}
#qrcode{display:inline-block;padding:10px;background:#fff;border-radius:12px;border:1px solid var(--border);}
#qrcode canvas,#qrcode img{display:block;width:clamp(150px,45vw,200px);height:auto;}

/* =========================================================================
   Toasts — bottom on mobile, top-right on larger screens
   ========================================================================= */
.toast-container{
  position:fixed;z-index:2500;
  left:12px;right:12px;bottom:calc(12px + var(--qs-safe-b));top:auto;
  display:flex;flex-direction:column;align-items:stretch;pointer-events:none;
}
.qs-toast{
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;
  padding:12px 14px 12px 16px;margin-top:10px;box-shadow:var(--e3);
  font-size:.92rem;display:flex;align-items:center;gap:10px;
  animation:qsSlideUp .3s var(--qs-ease);pointer-events:auto;
}
.qs-toast.success{background:var(--success-fill);color:#fff;border-color:transparent;}
.qs-toast.error{background:var(--danger-fill);color:#fff;border-color:transparent;}
.qs-toast.fade-out{animation:qsFadeOut .3s var(--qs-ease) forwards;}
.qs-toast-icon{display:inline-flex;flex-shrink:0;line-height:0;}
.qs-toast-text{flex:1;min-width:0;word-break:break-word;}
.qs-toast-close{
  border:none;background:transparent;color:inherit;opacity:.75;cursor:pointer;
  padding:6px;margin:-6px -4px -6px 0;border-radius:8px;display:inline-flex;flex-shrink:0;line-height:0;
}
.qs-toast-close:hover{opacity:1;background:rgba(255,255,255,.16);}
@media (min-width:576px){
  .toast-container{left:auto;right:20px;bottom:auto;top:calc(16px + var(--qs-safe-t));max-width:360px;}
  .qs-toast{animation:qsSlideIn .3s var(--qs-ease);}
}

/* =========================================================================
   Confirm dialog (QS.confirm) — lightweight, matches the design system
   ========================================================================= */
.qs-dialog-backdrop{
  position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:qsFadeIn .15s var(--qs-ease);
}
.qs-dialog-backdrop.closing{opacity:0;transition:opacity .15s var(--qs-ease);}
.qs-dialog{
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:var(--qs-radius);box-shadow:var(--e3);
  max-width:400px;width:100%;padding:22px;animation:qsSlideUp .18s var(--qs-ease);
}
.qs-dialog-title{margin:0 0 6px;font-weight:700;}
.qs-dialog-body{color:var(--text-muted);font-size:.95rem;margin:0 0 18px;word-break:break-word;}
.qs-dialog-actions{display:flex;gap:10px;justify-content:flex-end;}
.qs-dialog-actions .qs-btn{flex:0 0 auto;}

/* Solid danger button (destructive confirmations) */
.qs-btn-danger-solid{background:var(--danger-fill);color:#fff;}
.qs-btn-danger-solid:hover:not(:disabled){filter:brightness(1.08);color:#fff;}

/* ---- Button loading state (spinner replaces the label) ---- */
.qs-btn{position:relative;}
.qs-btn.is-loading{color:transparent!important;pointer-events:none;}
.qs-btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;
  left:calc(50% - 9px);top:calc(50% - 9px);border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:qsSpin .7s linear infinite;
}
.qs-btn-ghost.is-loading::after{border-color:rgba(0,0,0,.12);border-top-color:var(--text-muted);}
.qs-icon-btn.is-loading{color:transparent!important;pointer-events:none;position:relative;}
.qs-icon-btn.is-loading::after{
  content:"";position:absolute;width:14px;height:14px;
  left:calc(50% - 7px);top:calc(50% - 7px);border-radius:50%;
  border:2px solid rgba(0,0,0,.12);border-top-color:var(--text-muted);
  animation:qsSpin .7s linear infinite;
}
@keyframes qsSpin{to{transform:rotate(360deg);}}

/* ---- M3: copy/share micro-interactions + inline validation ---- */
.qs-btn.qs-copied{background:var(--success-fill);color:#fff;}
.qs-flash{animation:qsFlash .9s var(--qs-ease);}
@keyframes qsFlash{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45);}100%{box-shadow:0 0 0 7px rgba(52,199,89,0);}}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger);background-image:none;}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{box-shadow:0 0 0 3px var(--danger-soft);}
/* Storage bar grow-in on load (dashboard) */
.qs-anim-grow{transform-origin:left;animation:qsGrowX .9s var(--qs-ease);}
@keyframes qsGrowX{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ---- Empty states ---- */
.qs-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:36px 16px;text-align:center;color:var(--text-muted);
}
.qs-empty svg{opacity:.5;color:var(--text-muted);}
.qs-empty h2,.qs-empty h3,.qs-empty h4,.qs-empty h5{margin:2px 0 0;color:var(--text);}
.qs-empty p{margin:0;max-width:360px;font-size:.9rem;}
.qs-empty .qs-btn{margin-top:6px;flex:0 0 auto;}
.qs-empty-sm{padding:18px 12px;gap:6px;}

/* ---- Search input with a leading icon ---- */
.qs-input-icon{position:relative;display:flex;align-items:center;min-width:0;}
.qs-input-icon>svg{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;}
.qs-input-icon .form-control{padding-left:38px;width:100%;}

/* ---- Inline SVG icon defaults ---- */
.qs-i{flex-shrink:0;vertical-align:-3px;}
.qs-btn .qs-i{vertical-align:middle;}

/* ---- Subtle scrollbars for overflow containers (WebKit + Firefox) ---- */
.qs-table-wrap,.qs-sidebar{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
.qs-table-wrap::-webkit-scrollbar,.qs-sidebar::-webkit-scrollbar{height:8px;width:8px;}
.qs-table-wrap::-webkit-scrollbar-track,.qs-sidebar::-webkit-scrollbar-track{background:transparent;}
.qs-table-wrap::-webkit-scrollbar-thumb,.qs-sidebar::-webkit-scrollbar-thumb{
  background:var(--border-strong);border-radius:var(--qs-radius-pill);
}
.qs-table-wrap::-webkit-scrollbar-thumb:hover,.qs-sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* ---- Login badge (admin sign-in) ---- */
.qs-login-badge{
  width:48px;height:48px;border-radius:14px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* ---- Skeleton ---- */
.qs-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:qsShimmer 1.4s ease infinite;border-radius:8px;}

/* ---- Animations ---- */
@keyframes qsSlideIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes qsSlideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes qsFadeOut{to{opacity:0;transform:translateY(10px);}}
@keyframes qsShimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.qs-fade-in{animation:qsFadeIn .5s var(--qs-ease);}
@keyframes qsFadeIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* =========================================================================
   Breakpoints (mobile-first: styles above are the phone baseline)
   ========================================================================= */

/* Small tablets and up */
@media (min-width:600px){
  .qs-download-meta{grid-template-columns:repeat(4,1fr);}
}

/* Tablets / laptops: download page becomes two columns */
@media (min-width:840px){
  .qs-download{grid-template-columns:1fr 300px;}
  .qs-qr-card{order:0;}
}

/* Large desktops / 4K: cap width, keep centred */
@media (min-width:1600px){
  :root{--qs-container:1320px;}
}

/* =========================================================================
   Enhanced upload experience (options, custom link, thumbnails, results)
   ========================================================================= */

/* Options grid */
.qs-options-grid{display:grid;grid-template-columns:1fr;gap:var(--qs-gap);margin-top:var(--qs-gap);}
@media (min-width:560px){ .qs-options-grid{grid-template-columns:1fr 1fr;} }

/* Segmented control (Random / Custom) */
.qs-segment{display:flex;background:var(--bg);border-radius:var(--qs-radius-sm);padding:4px;gap:4px;}
.qs-seg-btn{
  flex:1;border:none;background:transparent;border-radius:9px;
  min-height:38px;font-weight:600;font-size:.9rem;color:var(--text-muted);cursor:pointer;
  transition:all .2s var(--qs-ease);-webkit-tap-highlight-color:transparent;
}
.qs-seg-btn.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* Custom link */
.qs-custom-link{margin-top:var(--qs-gap);animation:qsFadeIn .3s var(--qs-ease);}
.qs-slug-row{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:var(--qs-radius-sm);overflow:hidden;}
.qs-slug-prefix{
  display:flex;align-items:center;padding:0 10px;background:var(--bg);
  color:var(--text-muted);font-size:.82rem;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis;
}
.qs-slug-row .form-control{border:none;border-radius:0;flex:1;min-width:0;}
.qs-slug-row .form-control:focus{box-shadow:none;}
.qs-slug-status{font-size:.82rem;margin-top:6px;min-height:1.1em;font-weight:600;}
.qs-slug-status.available{color:var(--success-fill);}
.qs-slug-status.taken{color:var(--danger-fill);}
.qs-custom-hint{font-size:.8rem;margin:6px 0 0;}

/* Queue thumbnails */
.qs-file-thumb{
  width:clamp(42px,12vw,52px);height:clamp(42px,12vw,52px);border-radius:11px;flex-shrink:0;
  background:var(--accent);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.qs-file-thumb.has-img{background:var(--bg);}
.qs-file-icon{color:#fff;font-size:.66rem;font-weight:700;text-transform:uppercase;}
.qs-file-substatus{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8rem;margin-top:2px;}
.qs-file-status{min-width:0;overflow-wrap:anywhere;}
.qs-file-pct{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;flex-shrink:0;}
.qs-file-status.paused{color:#ff9500;font-weight:600;}
.qs-queue-row{transition:opacity .2s var(--qs-ease),transform .2s var(--qs-ease);}
.qs-queue-row.removing{opacity:0;transform:translateX(20px);}
.qs-queue-row[data-state="done"]{background:linear-gradient(0deg,rgba(52,199,89,.06),rgba(52,199,89,.06));}

/* Speed graph */
.qs-speedgraph{margin-top:var(--qs-gap);background:var(--bg);border-radius:var(--qs-radius-sm);padding:12px 14px;}
.qs-speedgraph-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--text-muted);margin-bottom:4px;}
.qs-speedgraph-head strong{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.95rem;}
#speedGraph{width:100%;height:60px;display:block;}

.qs-btn-sm{min-height:38px;padding:.5rem 1rem;font-size:.88rem;}

/* Result items */
.qs-usb-meta #usbSizes{font-variant-numeric:tabular-nums;}
.qs-result-item{border:1px solid var(--border);border-radius:var(--qs-radius-sm);padding:14px;margin-bottom:12px;animation:qsSlideIn .3s var(--qs-ease);}
.qs-result-main{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.qs-result-thumb{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;background-size:cover;background-position:center;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;
}
.qs-result-thumb.has-img{background:var(--bg);}
.qs-result-body{flex:1;min-width:180px;}
.qs-result-name{font-weight:600;word-break:break-word;}
.qs-result-sub{font-size:.82rem;margin-bottom:8px;}
.qs-result-qr{flex-shrink:0;}
.qs-result-qr canvas{display:block;border-radius:8px;width:96px;height:96px;}
@media (max-width:480px){ .qs-result-qr{order:3;margin:0 auto;} }

/* Success check animation */
.qs-success-check{width:64px;height:64px;margin:0 auto 6px;opacity:0;transform:scale(.6);}
.qs-result.show-check .qs-success-check{animation:qsPop .5s var(--qs-ease) forwards;}
.qs-success-check svg{width:100%;height:100%;}
.qs-sc-circle{stroke:var(--success-fill);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;}
.qs-sc-check{stroke:var(--success-fill);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;}
.qs-result.show-check .qs-sc-circle{animation:qsDash .5s var(--qs-ease) .1s forwards;}
.qs-result.show-check .qs-sc-check{animation:qsDash .3s var(--qs-ease) .5s forwards;}
@keyframes qsPop{to{opacity:1;transform:scale(1);}}
@keyframes qsDash{to{stroke-dashoffset:0;}}

/* History */
.qs-history{max-width:640px;margin:var(--qs-gap) auto 0;}
.qs-history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.qs-history-head h4{margin:0;font-size:1.05rem;}
.qs-history-list{list-style:none;padding:0;margin:0 0 10px;}
.qs-history-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.qs-history-item:last-child{border-bottom:none;}
.qs-history-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.qs-history-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qs-history-meta{font-size:.78rem;}
.qs-history-actions{display:flex;gap:6px;flex-shrink:0;}

/* =========================================================================
   Theme picker (nav)
   ========================================================================= */
.qs-nav-right{display:flex;align-items:center;gap:8px;}
.qs-theme-picker{position:relative;}
.qs-theme-btn{
  width:var(--qs-tap);height:var(--qs-tap);min-width:var(--qs-tap);
  border:none;background:var(--bg);border-radius:var(--qs-radius-pill);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s var(--qs-ease);-webkit-tap-highlight-color:transparent;
}
.qs-theme-btn:hover{background:var(--border);}
.qs-theme-dot{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);}
.qs-theme-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:1100;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--qs-shadow-hover);padding:6px;min-width:170px;
  animation:qsFadeIn .18s var(--qs-ease);
}
.qs-theme-item{
  display:flex;align-items:center;gap:10px;width:100%;
  border:none;background:transparent;border-radius:10px;padding:9px 10px;
  min-height:40px;cursor:pointer;color:var(--text);font-weight:500;font-size:.92rem;text-align:left;
}
.qs-theme-item:hover{background:var(--bg);}
.qs-theme-item.active{background:var(--bg);font-weight:700;}
.qs-theme-swatch{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1);}