:root {
  --bg:#000000;
  --panel:#0a0910;
  --panel-2:#100e1a;
  --border:#211f2b;
  --border-hi:#3a2f52;
  --purple-deep:#5b21b6;
  --purple:#8b5cf6;
  --purple-light:#c4a6fb;
  --text:#f2f1f6;
  --dim:#8c899b;
  --faint:#524f60;
  --display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:var(--display); -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(139,92,246,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.045) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 75% 62% at 50% 0%,#000 8%,transparent 72%); }
body::after { content:""; position:fixed; z-index:0; top:-320px; left:50%; width:900px; height:620px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse,rgba(139,92,246,.18),transparent 68%); }
button,a,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid var(--purple-light); outline-offset:4px; }
::selection { color:#fff; background:var(--purple-deep); }
[hidden] { display:none!important; }

.shell,.reader,.gone { position:relative; z-index:1; width:min(1080px,calc(100% - 56px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
header { height:84px; flex:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--border); }
.brand,.back-home { color:var(--text); text-decoration:none; font:500 13px/1 var(--mono); }
.brand { display:flex; align-items:center; gap:9px; }
.brand i { width:7px; height:7px; border-radius:50%; background:var(--purple); box-shadow:0 0 11px 2px rgba(139,92,246,.75); }
.back-home { justify-self:start; display:flex; align-items:center; gap:10px; color:var(--dim); transition:color .15s ease; }
.back-home:hover { color:var(--purple-light); }
.back-home span { color:var(--purple); }
.lifetime,.expiry-pill { justify-self:end; display:flex; align-items:center; gap:9px; color:var(--dim); font:400 10px/1 var(--mono); letter-spacing:.08em; }
.lifetime i,.expiry-pill i { width:6px; height:6px; border-radius:50%; background:var(--purple); box-shadow:0 0 10px 2px rgba(139,92,246,.6); }

.hero,.composer,.progress-view,.result { flex:1; width:min(760px,100%); margin:auto; display:flex; flex-direction:column; justify-content:center; padding:48px 0 100px; }
h1 { margin:0; color:var(--text); font-size:clamp(52px,8vw,84px); line-height:.98; letter-spacing:-.055em; font-weight:600; }
h1 span,h1 em { font-style:normal; background:linear-gradient(180deg,var(--purple-light),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.drop-mark,.view-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:25px; border:1px solid var(--border-hi); border-radius:10px; background:var(--panel); color:var(--purple-light); font:500 13px/1 var(--mono); box-shadow:0 0 28px rgba(139,92,246,.12); }

.actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:52px; }
.actions button { position:relative; min-height:112px; padding:0 22px; gap:17px; border:1px solid var(--border); border-radius:10px; cursor:pointer; display:flex; align-items:center; text-align:left; color:var(--text); background:var(--panel); overflow:hidden; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.actions button::before { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(125deg,rgba(139,92,246,.12),transparent 52%); transition:opacity .18s ease; }
.actions button:hover { transform:translateY(-2px); border-color:var(--border-hi); background:var(--panel-2); }
.actions button:hover::before { opacity:1; }
.actions strong { position:relative; display:block; font-size:15px; font-weight:600; }
.actions small { position:relative; display:block; margin-top:5px; color:var(--dim); font-size:12px; }
.upload-icon,.type-icon { position:relative; width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--border-hi); border-radius:8px; color:var(--purple-light); background:#0e0b17; font:500 15px/1 var(--mono); }
.action-arrow { position:relative; margin-left:auto; color:var(--faint); transition:color .18s ease,transform .18s ease; }
.actions button:hover .action-arrow { color:var(--purple-light); transform:translateX(3px); }
.privacy-note { margin-top:17px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--faint); font:10px/1 var(--mono); }
.privacy-note span { color:var(--purple); }
.privacy-note i { width:2px; height:2px; border-radius:50%; background:var(--faint); }

.composer { position:relative; width:min(720px,100%); }
.composer h1 { font-size:clamp(46px,7vw,68px); }
.view-back { position:absolute; top:42px; left:-62px; width:38px; height:38px; border:1px solid var(--border); border-radius:8px; color:var(--dim); background:var(--panel); cursor:pointer; transition:border-color .15s ease,color .15s ease; }
.view-back:hover { color:var(--purple-light); border-color:var(--border-hi); }
.composer label { margin:38px 0 11px; color:var(--dim); font:500 11px/1 var(--mono); }
textarea { width:100%; min-height:240px; resize:vertical; padding:20px; color:var(--text); caret-color:var(--purple-light); border:1px solid var(--border); border-radius:10px; background:rgba(10,9,16,.88); font:13px/1.75 var(--mono); transition:border-color .15s ease,box-shadow .15s ease; }
textarea:hover,textarea:focus { border-color:var(--border-hi); box-shadow:0 0 28px rgba(139,92,246,.07); }
textarea::placeholder { color:var(--faint); }
.composer-foot { margin-top:14px; display:flex; align-items:center; justify-content:space-between; }
.composer-foot small { color:var(--faint); font:10px/1 var(--mono); }

.primary,.secondary { min-height:48px; display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:0 18px; border-radius:8px; cursor:pointer; text-decoration:none; font-size:12px; font-weight:500; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.primary { min-width:164px; border:1px solid var(--purple); background:var(--purple); color:white; }
.primary:hover { transform:translateY(-1px); background:#9b6df7; }
.secondary { border:1px solid var(--border); background:var(--panel); color:var(--text); }
.secondary:hover { border-color:var(--border-hi); background:var(--panel-2); }

.progress-view,.result { align-items:center; text-align:center; }
.progress-view h1 { font-size:clamp(34px,6vw,58px); }
.orbit { width:66px; height:66px; margin-bottom:30px; display:grid; place-items:center; border:1px solid var(--border-hi); border-radius:50%; animation:spin 1.4s linear infinite; }
.orbit span { width:9px; height:9px; border-radius:50%; transform:translateX(32px); background:var(--purple); box-shadow:0 0 10px rgba(139,92,246,.9); }
.progress-track { width:min(420px,100%); height:2px; margin:38px 0 16px; background:var(--border); overflow:hidden; }
.progress-track i { display:block; width:35%; height:100%; background:var(--purple); animation:indeterminate 1.2s ease-in-out infinite; }
.progress-view p { margin:0; color:var(--dim); font:11px/1 var(--mono); }

.success-mark { width:46px; height:46px; display:grid; place-items:center; margin-bottom:26px; border:1px solid var(--border-hi); border-radius:50%; background:rgba(139,92,246,.14); color:var(--purple-light); box-shadow:0 0 30px rgba(139,92,246,.1); }
.result h1 { font-size:clamp(46px,7vw,68px); }
.link-box { width:min(540px,100%); margin:34px 0 12px; display:flex; border:1px solid var(--border); border-radius:8px; background:var(--panel); overflow:hidden; }
.link-box code { flex:1; padding:17px 18px; overflow:hidden; color:var(--dim); text-overflow:ellipsis; white-space:nowrap; text-align:left; font:11px/1 var(--mono); }
.link-box button { padding:0 19px; border:0; border-left:1px solid var(--border); background:transparent; color:var(--purple-light); cursor:pointer; font:500 10px/1 var(--mono); }
.result-actions { display:flex; gap:9px; }
.countdown { width:260px; margin:34px 0 23px; }
.countdown small { display:block; color:var(--faint); text-transform:uppercase; font:9px/1 var(--mono); letter-spacing:.13em; }
.countdown strong { display:block; margin:10px 0; color:var(--purple-light); font:400 27px/1 var(--mono); letter-spacing:.05em; }
.countdown div { height:2px; background:var(--border); }
.countdown i { display:block; width:100%; height:100%; background:var(--purple); transform-origin:left; }
.text-link { border:0; padding:5px 0; background:none; color:var(--dim); cursor:pointer; text-decoration:none; font:11px/1 var(--mono); transition:color .15s ease; }
.text-link:hover { color:var(--purple-light); }

.drop-overlay { position:fixed; inset:14px; z-index:10; display:none; place-items:center; border:1px solid var(--border-hi); border-radius:12px; background:rgba(5,3,9,.97); color:var(--text); }
.drop-overlay.active { display:grid; }
.drop-overlay div { text-align:center; }
.drop-overlay span { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 24px; border:1px solid var(--border-hi); border-radius:50%; background:rgba(139,92,246,.15); color:var(--purple-light); font-size:28px; }
.drop-overlay strong { display:block; font-size:46px; letter-spacing:-.045em; }
.toast { position:fixed; z-index:20; left:50%; bottom:22px; padding:11px 15px; border:1px solid var(--border-hi); border-radius:7px; background:var(--panel-2); color:var(--text); opacity:0; pointer-events:none; transform:translate(-50%,20px); font:10px/1 var(--mono); transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.reader { max-width:900px; }
.reader article { flex:1; margin:60px 0 30px; padding:36px; border:1px solid var(--border); border-radius:10px; background:rgba(10,9,16,.8); white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.8 var(--mono); }
.reader footer { display:flex; align-items:center; gap:10px; padding-bottom:46px; }
.reader footer .text-link { margin-left:auto; }
.encrypted-reader { max-width:900px; }
.decrypt-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:52px 0 64px; text-align:center; }
.decrypt-card .eyebrow { margin:0 0 18px; color:var(--purple-light); text-transform:uppercase; letter-spacing:.14em; font:9px/1 var(--mono); }
.decrypt-card h1 { font-size:clamp(42px,7vw,68px); }
.decrypt-card .progress-track { margin:34px 0 16px; }
.decrypt-card [data-decrypt-bar] { width:12%; animation:none; transition:width .24s ease; }
.decrypt-status { min-height:18px; margin:0; color:var(--dim); font:11px/1.55 var(--mono); }
.decrypt-card article { width:100%; max-height:48vh; margin:34px 0 18px; overflow:auto; text-align:left; }
.decrypt-card footer { width:100%; padding:12px 0 0; }
.file-ready { width:min(520px,100%); margin:32px 0 18px; padding:22px; border:1px solid var(--border); border-radius:10px; background:var(--panel); text-align:left; }
.file-ready strong,.file-ready small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-ready strong { color:var(--text); font-size:14px; }
.file-ready small { margin:7px 0 20px; color:var(--dim); font:10px/1 var(--mono); }
.file-ready .primary { width:100%; }
.file-ready button:disabled { opacity:.55; cursor:wait; }
.file-preview { width:100%; min-height:160px; margin:0 0 20px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#050407; }
.file-preview img { display:block; width:100%; max-height:160px; border:0; object-fit:contain; background:#000; }
.file-preview video,.file-preview iframe { display:block; width:100%; height:min(24vh,160px); border:0; object-fit:contain; background:#000; }
.file-preview audio { width:calc(100% - 32px); }
.file-preview pre { width:100%; max-height:300px; margin:0; padding:18px; overflow:auto; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; font:11px/1.65 var(--mono); }
.file-preview.preview-generic { display:flex; min-height:160px; flex-direction:column; justify-content:center; gap:12px; color:var(--faint); }
.file-preview.preview-generic>span { width:54px; height:54px; display:grid; place-items:center; border:1px solid var(--border-hi); border-radius:12px; color:var(--purple-light); background:rgba(139,92,246,.1); font:500 21px/1 var(--mono); }
.file-preview.preview-generic>small { margin:0; white-space:normal; text-align:center; line-height:1.5; }
.lock-mark { margin-bottom:18px; font:600 20px/1 var(--mono); }
.gone-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:84px; text-align:center; }
.gone-mark { margin-bottom:18px; color:var(--purple); font:500 12px/1 var(--mono); }
.gone h1 { margin-bottom:30px; font-size:clamp(42px,7vw,70px); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes indeterminate { 0%{transform:translateX(-100%)} 50%{transform:translateX(130%)} 100%{transform:translateX(310%)} }

@media (max-width:820px) { .view-back { position:static; margin-bottom:24px; } }

@media (max-width:640px) {
  .shell,.reader,.gone { width:min(100% - 30px,1080px); }
  header { height:72px; grid-template-columns:1fr auto; }
  .brand { justify-self:end; }
  .lifetime,.expiry-pill { display:none; }
  .hero,.composer,.progress-view,.result { padding:40px 0 72px; }
  h1,.hero h1 { font-size:48px; }
  .actions { grid-template-columns:1fr; margin-top:38px; }
  .actions button { min-height:92px; }
  .composer .view-icon { display:none; }
  .composer label { margin-top:30px; }
  textarea { min-height:260px; }
  .result-actions { width:100%; flex-direction:column; }
  .result-actions>* { width:100%; }
  .reader article { margin:28px 0 18px; padding:22px 18px; }
  .reader footer { flex-wrap:wrap; }
  .reader footer .text-link { width:100%; margin:12px 0 0; }
  .decrypt-card { padding:38px 0 46px; }
  .decrypt-card article { max-height:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}