/* Brellow Send — locked design (WeTransfer palette, Fraunces display, edge chips). */
:root{
  --bg:#0d0c14; --bg2:#171233;
  --ink:#f4f2ff; --soft:#9d98b8;
  --card:#ffffff; --card-ink:#17141f; --card-soft:#8b8699;
  --line:rgba(255,255,255,.13);
  --cta:#4b53ff; --cta-hover:#5d64ff;
  --lav:#cdd4ff; --peach:#ffb59e; --mint:#b9f0d0; --lemon:#ffe38f; --rose:#ffc7e0;
  --disp:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  font-family:var(--sans); color:var(--ink); overflow-x:hidden;
  background:radial-gradient(1200px 800px at 75% -10%, var(--bg2) 0%, var(--bg) 55%),
             radial-gradient(900px 700px at -10% 110%, #251a4d 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased;
}
body::after{ /* grain */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- floating parallax chips ---------- */
.stage{position:fixed; inset:0; z-index:1; pointer-events:none; transition:opacity .5s}
body.no-floats .stage{opacity:0}
body.calm .stage{opacity:.22}
body.hero-media .stage{opacity:0}
.fl{position:absolute; will-change:transform}
.chip{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:900; border-radius:26px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.55);
  animation:bob 7s ease-in-out infinite alternate;
}
@keyframes bob{from{transform:translateY(-9px) rotate(var(--r,0deg))} to{transform:translateY(9px) rotate(var(--r,0deg))}}
.c1{top:15%; left:-2%}   .c1 .chip{width:130px; height:130px; background:var(--lav); color:#3a3fd6; font-size:29px; --r:-6deg}
.c2{top:62%; left:-1.5%} .c2 .chip{width:100px; height:100px; background:var(--peach); color:#a63d1e; font-size:23px; --r:5deg; animation-delay:-2s}
.c3{top:10%; right:-2%}  .c3 .chip{width:110px; height:110px; background:var(--mint); color:#1d7a4f; font-size:25px; --r:7deg; animation-delay:-4s}
.c4{top:58%; right:-2.5%}.c4 .chip{width:140px; height:140px; background:var(--lemon); color:#8f6400; font-size:31px; --r:-4deg; animation-delay:-1s}
.c5{bottom:-2%; right:8%}.c5 .chip{width:88px; height:88px; background:var(--rose); color:#b3306f; font-size:20px; --r:9deg; animation-delay:-5s}
.c6{bottom:4%; left:4%}  .c6 .chip{width:112px; height:76px; background:var(--cta); color:#fff; font-size:20px; border-radius:18px; --r:-8deg; animation-delay:-3s}
.c6 .chip i{font-style:normal; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.02em}

/* ---------- layout ---------- */
.screen{min-height:100vh; min-height:100dvh; position:relative; z-index:2; display:flex; flex-direction:column}
.view:not(.on){display:none !important}
.view.on{display:flex; flex-direction:column; flex:1; animation:screenIn .55s cubic-bezier(.22,1,.36,1)}
@keyframes screenIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.center-stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 20px; gap:30px; position:relative}
.wm{padding:22px 34px 0; font-family:var(--disp); font-weight:900; font-size:21px; letter-spacing:.01em; position:relative; z-index:2}
.wm a{color:inherit; text-decoration:none}
.wm em{font-style:italic; color:var(--lav)}
.foot{margin-top:auto; text-align:center; padding:24px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); position:relative}

/* ---------- hero background media (Appearance backdrop) ---------- */
.hero-bg{position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .9s ease; overflow:hidden; pointer-events:none}
body.hero-media .hero-bg{opacity:1}
.hero-bg .media{position:absolute; inset:0; background-size:cover; background-position:center}
.hero-bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-bg .veil{position:absolute; inset:0; background:rgba(10,9,16,.66)}
.screen>.wm, .screen>.center-stage, .screen>.foot{position:relative}

/* ---------- type + buttons ---------- */
.hero-wrap{display:flex; align-items:center; gap:60px; flex-wrap:wrap; justify-content:center}
.hero h1{font-family:var(--disp); font-weight:900; font-size:clamp(56px, 7.5vw, 108px); line-height:.95; letter-spacing:-.015em; max-width:560px}
.hero h1 em{font-style:italic; color:var(--lav)}
.hero p{margin-top:22px; font-size:16px; color:var(--soft); max-width:400px; line-height:1.65}
.btn{
  font:15px/1 var(--sans); font-weight:600; letter-spacing:.01em;
  padding:16px 34px; border-radius:999px; cursor:pointer; border:none;
  background:var(--cta); color:#fff; text-decoration:none; display:inline-block; text-align:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1), background .2s, box-shadow .25s, opacity .2s;
}
.btn:hover{transform:translateY(-2px); background:var(--cta-hover); box-shadow:0 14px 34px -12px var(--cta)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4; pointer-events:none}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:rgba(255,255,255,.4); box-shadow:none}
.btn.onlight{color:#fff}
.btn.ghost.onlight{color:var(--card-ink); border-color:#e2e0ea}
.btn.ghost.onlight:hover{border-color:#b9b5c9}

/* ---------- transfer card ---------- */
.card{
  width:min(400px, 92vw); background:var(--card); color:var(--card-ink);
  border-radius:28px; padding:26px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7);
}
.drop{
  position:relative; border-radius:20px; padding:34px 18px; text-align:center; cursor:pointer;
  background:#f4f3f9; overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.drop:hover, .drop.over{transform:scale(1.02); background:#eceafd}
.drop .plus{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--cta); color:#fff;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.drop:hover .plus{transform:rotate(90deg) scale(1.1)}
.drop h2{font-family:var(--disp); font-weight:900; font-size:22px}
.drop p{font-size:12.5px; color:var(--card-soft); margin-top:4px}
.fields{display:flex; flex-direction:column; margin-top:8px}
.fields label{display:block; padding:14px 4px; border-bottom:1px solid #eceaf2}
.fields label.hidden{display:none}
.fields label span{display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--card-soft)}
.fields input, .fields textarea{
  width:100%; font:15px/1.5 var(--sans); color:var(--card-ink);
  border:none; outline:none; background:transparent; resize:none; margin-top:3px;
}
.fields ::placeholder{color:#c2bfd0}
.card .btn{width:100%; margin-top:20px}
.card .tiny{text-align:center; font-size:11.5px; color:var(--card-soft); margin-top:12px}

.filelist{display:flex; flex-direction:column; gap:7px; margin-top:14px; max-height:220px; overflow-y:auto}
.filerow{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  background:#f4f3f9; border-radius:14px; font-size:13.5px;
  animation:rowIn .45s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes rowIn{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
.filerow .ext{
  flex:none; font-family:var(--disp); font-weight:900; font-size:11px;
  padding:8px 9px; border-radius:9px; background:var(--lav); color:#3a3fd6;
}
.filerow b{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filerow span{margin-left:auto; color:var(--card-soft); font-size:12px; white-space:nowrap}
.filerow .rm, .filerow .dl{
  flex:none; width:32px; height:32px; margin-left:4px; border-radius:50%;
  border:1px solid #e2e0ea; background:#fff; color:#17141f; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.filerow .dl:hover{background:var(--cta); border-color:var(--cta); color:#fff; transform:translateY(-1px)}
.filerow .rm:hover{background:#a63d33; border-color:#a63d33; color:#fff}

/* ---------- mode + expiry pills ---------- */
.modes{display:flex; gap:8px; margin-top:16px}
.mode{
  flex:1; font:13px/1 var(--sans); font-weight:500; padding:11px 8px; text-align:center;
  border:1px solid #e2e0ea; border-radius:999px; cursor:pointer; color:var(--card-soft);
  transition:all .22s ease;
}
.mode:hover{border-color:var(--cta); color:var(--card-ink)}
.mode.sel{background:var(--cta); border-color:var(--cta); color:#fff}
.explabel{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--card-soft); margin:16px 0 8px}
.expiries{display:flex; gap:6px}
.exp-pill{
  flex:1; font:12.5px/1 var(--sans); font-weight:500; padding:10px 4px; text-align:center;
  border:1px solid #e2e0ea; border-radius:999px; cursor:pointer; color:var(--card-soft);
  transition:all .2s ease; white-space:nowrap;
}
.exp-pill:hover{border-color:var(--cta); color:var(--card-ink)}
.exp-pill.sel{border-color:var(--cta); background:#eceafd; color:#3a3fd6}

/* ---------- uploading ---------- */
.up-num{font-family:var(--disp); font-weight:900; font-style:italic; font-size:clamp(120px, 24vw, 300px); line-height:1; letter-spacing:-.03em}
.up-num span{display:inline-block; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.up-num small{font-size:.35em; font-style:normal; color:var(--lav)}
.up-label{font-size:15px; color:var(--soft); text-align:center; line-height:1.7; font-variant-numeric:tabular-nums; max-width:480px}
.up-track{position:fixed; left:0; right:0; bottom:0; height:6px; background:rgba(255,255,255,.08); z-index:45}
.up-track b{position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg, var(--cta), var(--lav)); transition:width .18s linear}

/* ---------- sent / status pages ---------- */
.sent-h{font-family:var(--disp); font-weight:900; font-size:clamp(64px, 11vw, 150px); line-height:.95; letter-spacing:-.02em; text-align:center}
.sent-h em{font-style:italic; color:var(--mint)}
.sent-p{font-size:16px; color:var(--soft); text-align:center; max-width:380px; line-height:1.65}
.linkbox{
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; font-size:14px; color:var(--lav); word-break:break-all; text-align:center; max-width:420px;
}

/* ---------- download page ---------- */
.dl-head{text-align:center; max-width:820px}
.dl-head .from{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); margin-bottom:18px}
.dl-head h1{font-family:var(--disp); font-weight:900; font-size:clamp(48px, 6.5vw, 92px); line-height:.98; letter-spacing:-.015em}
.dl-head h1 em{font-style:italic; color:var(--peach)}
.dl-head .note{font-family:var(--disp); font-style:italic; font-weight:400; font-size:19px; color:var(--soft); max-width:460px; margin:22px auto 0; line-height:1.55}
.expiry{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:12px; letter-spacing:.06em; color:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
}
.expiry .dot{width:6px; height:6px; border-radius:50%; background:var(--mint)}
.dl-actions{display:flex; gap:10px; margin-top:18px}
.dl-actions .btn{flex:1}

/* ---------- preview overlay ---------- */
.pvw{
  position:fixed; inset:0; z-index:70; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:rgba(8,7,14,.92); backdrop-filter:blur(12px); padding:16px;
}
.pvw.on{display:flex; animation:screenIn .35s cubic-bezier(.22,1,.36,1)}
.pvw .frame{
  width:min(860px, 94vw); max-height:72vh; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  position:relative; display:flex; align-items:center; justify-content:center; background:#000;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.8);
}
.pvw video, .pvw img{width:100%; height:100%; object-fit:contain; background:#000}
.pvw .name{font-size:13px; color:var(--soft); text-align:center; max-width:90vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pvw .name b{color:var(--ink); font-weight:600}
.pvw .close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(8,7,14,.55); color:#fff; font-size:16px; line-height:1;
}
.pvw .pnav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(8,7,14,.45); color:#fff; font-size:24px; line-height:1; cursor:pointer;
  transition:all .2s ease;
}
.pvw .pnav:hover{background:#fff; color:#17141f; border-color:#fff}
.pvw .pnav.prev{left:14px} .pvw .pnav.next{right:14px}

/* ---------- admin ---------- */
.admin{width:min(920px, 94vw); margin:0 auto; padding:30px 0 90px; position:relative; z-index:2; flex:1}
.atabs{display:flex; gap:6px; margin-bottom:30px; align-items:center}
.atab{
  font:13px/1 var(--sans); font-weight:500; padding:9px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--soft); transition:all .2s; text-decoration:none;
}
.atab:hover{color:var(--ink); border-color:rgba(255,255,255,.35)}
.atab.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.atabs .logout{margin-left:auto; font-size:12px; color:var(--soft); text-decoration:none}
.atabs .logout:hover{color:var(--ink)}
.admin-top{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; gap:16px}
.admin-top h1{font-family:var(--disp); font-weight:900; font-size:56px; letter-spacing:-.015em}
.admin-top h1 em{font-style:italic; color:var(--lemon)}
.admin-top p{font-size:13.5px; color:var(--soft); margin-top:6px}
.stats{display:flex; gap:12px; margin-bottom:24px}
.stat{flex:1; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:20px; padding:20px 22px}
.stat b{font-family:var(--disp); font-weight:900; font-size:34px; display:block; letter-spacing:-.01em}
.stat span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.tbl{background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:22px; overflow:hidden}
.tbl .empty{padding:28px; text-align:center; color:var(--soft); font-size:14px}
.trow{
  display:grid; grid-template-columns:48px 1.5fr 1fr .8fr .95fr auto;
  gap:14px; align-items:center; padding:17px 20px;
  border-top:1px solid var(--line); font-size:13.5px;
  transition:background .2s, opacity .4s;
}
.trow:first-child{border-top:none}
.trow:hover{background:rgba(255,255,255,.04)}
.dir{width:38px; height:38px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:900; font-size:17px}
.dir.in{background:var(--mint); color:#1d7a4f}
.dir.out{background:var(--lav); color:#3a3fd6}
.trow .who{min-width:0}
.trow .who b{font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trow .who span{font-size:12px; color:var(--soft); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trow .meta, .trow .exp, .trow .dls{font-size:12.5px; color:var(--soft)}
.trow .exp.soon{color:var(--lemon)}
.acts{display:flex; gap:6px}
.chipbtn{
  font:12.5px/1 var(--sans); font-weight:500; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink); transition:all .2s; text-decoration:none;
}
.chipbtn:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chipbtn.danger{color:#ff9d8f}
.chipbtn.danger:hover, .chipbtn.danger.armed{background:#a63d33; border-color:#a63d33; color:#fff}
.section-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin:32px 0 10px}
.tbl.faded .trow{opacity:.5}

/* ---------- appearance ---------- */
.panel{background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:22px; padding:26px 28px; margin-bottom:16px}
.panel h3{font-family:var(--disp); font-weight:900; font-size:20px; margin-bottom:4px}
.panel .sub{font-size:12.5px; color:var(--soft); margin-bottom:18px}
.dark-field{display:block; margin-bottom:16px}
.dark-field span{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-bottom:6px}
.dark-field input{
  width:100%; font:16px/1.4 var(--sans); color:var(--ink); background:transparent;
  border:none; border-bottom:1px solid var(--line); padding:8px 2px; outline:none; transition:border-color .25s;
}
.dark-field input:focus{border-color:var(--lav)}
.bgtiles{display:flex; gap:14px; flex-wrap:wrap}
.bgtile{cursor:pointer; text-align:center; background:none; border:none; color:inherit; font:inherit}
.bgtile .swatch{
  width:132px; height:82px; border-radius:14px; border:2px solid transparent;
  transition:border-color .2s, transform .25s; overflow:hidden; position:relative;
  background-size:cover; background-position:center;
}
.bgtile:hover .swatch{transform:translateY(-2px)}
.bgtile.sel .swatch{border-color:var(--lav)}
.bgtile p{font-size:12px; color:var(--soft); margin-top:8px}
.bgtile.sel p{color:var(--ink)}
.sw-none{background:var(--bg2)}
.sw-media{display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); font-size:17px; background:#26224a}
.dimrow{display:flex; align-items:center; gap:14px; margin-top:20px; font-size:12.5px; color:var(--soft)}
.dimrow input[type=range]{flex:1; accent-color:var(--cta)}
.hint{font-size:12px; color:var(--soft); margin-top:12px; line-height:1.6}

/* ---------- login ---------- */
.login-card{width:min(380px, 92vw); background:var(--card); color:var(--card-ink); border-radius:28px; padding:32px; box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.login-card h2{font-family:var(--disp); font-weight:900; font-size:26px; margin-bottom:6px}
.login-card p{font-size:13.5px; color:var(--card-soft); line-height:1.6; margin-bottom:14px}
.login-card .err{color:#a63d33; font-size:13px; margin-top:10px; display:none}

/* ---------- toast + popover ---------- */
.toast{
  position:fixed; bottom:26px; left:50%; z-index:80;
  transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); font:13px/1 var(--sans); font-weight:500;
  padding:13px 22px; border-radius:999px; transition:all .35s cubic-bezier(.22,1,.36,1);
  max-width:90vw; text-align:center;
}
.toast.on{opacity:1; transform:translateX(-50%)}
.expop{
  position:fixed; z-index:75; display:none; gap:6px; padding:7px;
  background:#211d31; border:1px solid var(--line); border-radius:999px;
  box-shadow:0 20px 45px -18px rgba(0,0,0,.85);
}
.expop.on{display:flex; animation:screenIn .25s cubic-bezier(.22,1,.36,1)}
.expop button{
  font:12.5px/1 var(--sans); font-weight:500; padding:9px 13px; border-radius:999px;
  border:1px solid transparent; background:transparent; color:var(--soft); cursor:pointer;
  white-space:nowrap; transition:all .18s;
}
.expop button:hover{background:var(--cta); color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero{text-align:center}
  .hero p{margin-left:auto; margin-right:auto}
  .chip{opacity:.9}
  .c1{top:11%; left:-38px}  .c1 .chip{width:104px; height:104px; font-size:24px}
  .c2{top:64%; left:-26px}  .c2 .chip{width:84px; height:84px; font-size:20px}
  .c3{top:9%;  right:-30px} .c3 .chip{width:92px; height:92px; font-size:21px}
  .c4{top:58%; right:-44px} .c4 .chip{width:118px; height:118px; font-size:27px}
  .c5{bottom:4%; right:14%} .c5 .chip{width:72px; height:72px; font-size:17px}
  .c6{bottom:7%; left:6%}   .c6 .chip{width:104px; height:70px}
  .c6 .chip i{font-size:11px}
  .admin-top{flex-direction:column; align-items:flex-start; gap:16px}
  .trow{grid-template-columns:44px 1.4fr 1fr auto}
  .trow .dls, .trow .exp{display:none}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(44px, 13vw, 56px)}
  .c1{top:22%} .c3{top:26%}
  .stats{flex-direction:column}
  .admin-top h1{font-size:42px}
  .trow{grid-template-columns:40px 1fr; row-gap:10px}
  .trow .meta{display:none}
  .acts{grid-column:1 / -1; justify-content:flex-end; flex-wrap:wrap}
  .dl-actions{flex-direction:column}
  .up-num{font-size:clamp(96px, 34vw, 150px)}
  .bgtiles{justify-content:center}
  .panel{padding:20px}
  .wm{padding:18px 20px 0}
  .pvw .pnav{width:40px; height:40px}
}