/* PrestigeX Drop — brand layer (black / white / red).
   Matches prestigex.space: Archivo display + JetBrains Mono technical labels,
   accent #ff2238. Dark-only utility surface. All class/id hooks preserved for drop.js. */
:root{
  --bg:#0a0a0b;
  --bg-2:#121214;
  --bg-3:#19191c;
  --bg-elev:#1f1f23;
  --ink:#f5f5f6;
  --ink-soft:#c6c6cb;
  --muted:#8a8a92;
  --dim:#5a5a62;
  --rule:rgba(255,255,255,.08);
  --rule-2:rgba(255,255,255,.15);
  --accent:#ff2238;
  --accent-strong:#ff4d5f;
  --accent-deep:#d50f24;
  --accent-soft:rgba(255,34,56,.14);
  --accent-softer:rgba(255,34,56,.07);
  --accent-ink:#ffffff;
  --bad:#ff5468;
  --bad-soft:rgba(255,84,104,.12);
  --warn:#ffce5c;
  --warn-soft:rgba(255,206,92,.10);
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink)}
body{
  font-family:var(--mono);font-size:14px;line-height:1.55;letter-spacing:.005em;overflow-x:hidden;
  background:
    radial-gradient(1000px 640px at 86% -14%, var(--accent-softer), transparent 60%),
    radial-gradient(820px 620px at -10% 110%, rgba(255,255,255,.022), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

.dropMain{max-width:860px;margin:0 auto;padding:clamp(16px,3vw,30px)}

/* ===== header ===== */
.dropHead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--rule);margin-bottom:22px;
}
.dropBack{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;transition:color .15s}
.dropBack:hover{color:var(--accent)}
.dropTitle{
  font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  text-transform:lowercase;
}
.dropTitle em{font-style:normal;color:var(--accent)}
.dropMe{
  font-size:10.5px;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--rule-2);border-radius:999px;background:var(--bg-2);
}

/* ===== signed-out gate ===== */
.dropGate{
  padding:56px 20px;text-align:center;background:var(--bg-2);
  border:1px solid var(--rule);border-radius:var(--r-lg);
}
.dropGate p{color:var(--muted);margin:0 0 18px;letter-spacing:.02em}

/* ===== mode tabs (segmented) ===== */
.dropMode{
  display:flex;gap:3px;padding:4px;background:var(--bg-2);
  border:1px solid var(--rule);border-radius:var(--r-md);margin-bottom:18px;overflow:auto;
}
.dropMode::-webkit-scrollbar{display:none}
.modeBtn{
  padding:9px 16px;border-radius:var(--r-sm);color:var(--muted);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s;
}
.modeBtn:hover{color:var(--ink)}
.modeBtn.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 12px rgba(255,34,56,.3)}

.pane{display:none}
.pane.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== file drop zone ===== */
.zone{
  border:1.5px dashed var(--rule-2);border-radius:var(--r-lg);padding:54px 18px;
  text-align:center;cursor:pointer;background:var(--bg-2);
  transition:border-color .2s,background .2s,transform .15s;
}
.zone:hover{border-color:var(--accent);background:var(--accent-softer)}
.zone.dragover{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.005)}
.zoneInner strong{display:block;font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.zoneInner small{color:var(--muted);font-size:12px}

/* ===== options bar ===== */
.opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0}
.opts label{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.opts select,.opts input{
  background:var(--bg-3);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  padding:8px 11px;color:var(--ink);font-size:12.5px;font-family:var(--mono);
  text-transform:none;letter-spacing:0;transition:border-color .15s;
}
.opts select:focus,.opts input:focus{outline:none;border-color:var(--accent)}
.opts input{min-width:200px}
.optsLabel{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-right:auto}

/* ===== buttons ===== */
.btnSolid{
  display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;transition:background .15s,transform .1s,box-shadow .15s;
}
.btnSolid:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,34,56,.28)}
.btnGhost{
  padding:8px 14px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--rule-2);
  color:var(--ink-soft);font-size:11px;letter-spacing:.04em;text-transform:uppercase;transition:border-color .15s,color .15s,background .15s;
}
.btnGhost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-softer)}
.btnDanger{color:var(--bad);border-color:rgba(255,84,104,.4)}
.btnDanger:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}

/* ===== paste textarea ===== */
.pasteWrap{border:1px solid var(--rule-2);border-radius:var(--r-md);background:var(--bg-2);overflow:hidden;transition:border-color .15s}
.pasteWrap:focus-within{border-color:var(--accent)}
#pasteText{
  display:block;width:100%;min-height:300px;padding:16px;border:0;background:transparent;
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink-soft);resize:vertical;
}
#pasteText:focus{outline:none;color:var(--ink)}

/* ===== results list ===== */
.results{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.results li{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px 14px;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);
  animation:slideIn .25s cubic-bezier(.2,.7,.2,1);
}
.results .resName{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.results .resUrl{font-size:11.5px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin-top:3px}
.results .resBtns{display:flex;gap:6px}
.results.error li{border-color:rgba(255,84,104,.35)}
.results .resErr{color:var(--bad);font-size:11.5px;font-style:italic}
@keyframes slideIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}

.uploading{position:relative;overflow:hidden}
.uploading::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:scan 1.4s linear infinite;width:40%;
}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ===== my drops / tokens list ===== */
.mineList{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.mineList li{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);
}
.mineList .mineKind{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:4px 8px;border-radius:var(--r-xs);font-weight:700;
}
.mineList .mineKind.paste{color:var(--warn);background:var(--warn-soft)}
.mineList .mineMid{min-width:0;overflow:hidden}
.mineList .mineMidLine{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mineList .mineMidLine b{color:var(--ink);font-weight:600}
.mineList .mineMidLine em{font-style:normal;color:var(--muted);font-size:11px}
.mineList .mineMidLine a{color:var(--accent)}
.mineList .mineSub{font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.03em}
.mineList .mineBtns{display:flex;gap:5px}

.tokensHelp{padding:14px 16px;background:var(--bg-2);border:1px solid var(--rule);border-left:2px solid var(--accent);border-radius:var(--r-md);margin-bottom:14px;font-size:12.5px;color:var(--ink-soft)}
.tokensHelp code{background:var(--accent-soft);color:var(--accent);padding:1px 5px;border-radius:var(--r-xs);font-size:.92em}
.tokenFresh{
  margin:14px 0;padding:14px 16px;
  background:var(--warn-soft);border:1px solid rgba(255,206,92,.4);border-radius:var(--r-md);
  font-size:12px;color:var(--ink);
}
.tokenFresh code{display:block;margin-top:9px;padding:9px 11px;background:var(--bg);border:1px dashed var(--rule-2);border-radius:var(--r-sm);word-break:break-all;color:var(--accent);font-weight:600;cursor:copy}
.tokenFresh small{color:var(--muted);font-size:11px}

.sharexBox{margin-top:20px;background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);padding:12px 16px}
.sharexBox summary{cursor:pointer;font-size:12px;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.sharexBox summary:hover{color:var(--accent)}
.sharexBox p{font-size:12px;color:var(--muted);margin:12px 0}
.sharexBox code{color:var(--accent)}
.sharexBox pre{
  margin:0;padding:14px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:auto;font-size:11.5px;color:var(--ink-soft);
}

.empty{padding:36px 14px;text-align:center;color:var(--muted);font-size:12px}

/* ===== quota bar ===== */
.quotaBar{
  display:grid;gap:8px;margin-bottom:16px;padding:12px 14px;
  background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--r-md);
}
.quotaInfo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.quotaInfo b{color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none}
.quotaNum{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0;text-transform:none}
.quotaNum b{color:var(--accent);margin-right:2px}
.quotaTrack{height:6px;background:var(--bg-3);border-radius:999px;overflow:hidden;border:1px solid var(--rule)}
.quotaFill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-deep),var(--accent));border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.2,1),background-color .25s}
.quotaBar[data-level="mid"]  .quotaFill{background:linear-gradient(90deg,#ffce5c,#f8a83f)}
.quotaBar[data-level="high"] .quotaFill{background:linear-gradient(90deg,#ffa340,#ff6b40)}
.quotaBar[data-level="full"] .quotaFill{background:linear-gradient(90deg,var(--bad),var(--accent-deep))}
.quotaBar[data-level="high"] .quotaNum b,.quotaBar[data-level="full"] .quotaNum b{color:var(--bad)}

/* ===== expiry pill ===== */
.expPill{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid transparent;line-height:1.4;vertical-align:middle;
  margin-left:6px;font-family:var(--mono);
}
.expPill--permanent{background:rgba(255,255,255,.04);border-color:var(--rule-2);color:var(--muted)}
.expPill--ok{background:var(--accent-soft);border-color:rgba(255,34,56,.3);color:var(--accent-strong)}
.expPill--soon{background:var(--warn-soft);border-color:rgba(255,206,92,.4);color:var(--warn)}
.expPill--urgent{background:var(--bad-soft);border-color:rgba(255,84,104,.45);color:var(--bad)}
.expPill--gone{background:rgba(255,84,104,.18);border-color:rgba(255,84,104,.5);color:var(--bad)}

/* ===== mobile ===== */
@media (max-width:560px){
  .dropMain{padding:12px}
  .dropHead{flex-wrap:wrap;gap:8px 12px}
  .dropTitle{font-size:22px;order:-1;width:100%}
  .zone{padding:40px 14px}
  .opts{gap:8px}
  .opts input{min-width:0;flex:1}
  .mineList li{grid-template-columns:auto 1fr;gap:8px}
  .mineList .mineBtns{grid-column:1/-1;justify-content:flex-end;border-top:1px solid var(--rule);padding-top:8px;margin-top:4px}
}

/* ===== FX 20260612: real progress, checkmark, drag frame, send feedback ===== */
.results li{position:relative;overflow:hidden}
.resProg{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.resProg u{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
li:not(.uploading) .resProg{opacity:0;transition:opacity .4s ease .3s}
.resCheck{width:14px;height:14px;vertical-align:-2px;margin-right:6px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.resCheck path{stroke-dasharray:30;stroke-dashoffset:30;animation:checkDraw .45s cubic-bezier(.23,1,.32,1) .1s forwards}
@keyframes checkDraw{to{stroke-dashoffset:0}}
/* whole-window drag frame: painted once, only opacity animates */
body.is-dragging::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 110px var(--accent-soft);
  animation:dragBreathe 1.3s ease-in-out infinite;
}
@keyframes dragBreathe{0%,100%{opacity:.55}50%{opacity:1}}
body.is-dragging .zone{border-color:var(--accent);background:var(--accent-soft)}
/* copy button pop */
.copied{animation:copyPop .35s cubic-bezier(.23,1,.32,1);color:var(--accent)!important;border-color:var(--accent)!important}
@keyframes copyPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
/* paste editor visibly sends */
.pasteWrap{transform-origin:top center}
.fx-sent{animation:pasteSent .5s cubic-bezier(.23,1,.32,1)}
@keyframes pasteSent{0%{transform:scaleY(1)}35%{transform:scaleY(.965);opacity:.6}100%{transform:scaleY(1);opacity:1}}
/* my-drops rows cascade in */
.mineList li{animation:slideIn .3s cubic-bezier(.2,.7,.2,1) both}
.mineList li:nth-child(2){animation-delay:45ms}
.mineList li:nth-child(3){animation-delay:90ms}
.mineList li:nth-child(4){animation-delay:135ms}
.mineList li:nth-child(5){animation-delay:180ms}
.mineList li:nth-child(6){animation-delay:225ms}
.mineList li:nth-child(7){animation-delay:270ms}
.mineList li:nth-child(n+8){animation-delay:300ms}
@media (prefers-reduced-motion: reduce){
  .uploading::after,body.is-dragging::after,.resCheck path,.copied,.fx-sent,.mineList li{animation:none!important}
  .resCheck path{stroke-dashoffset:0}
  .resProg u{transition:none}
}