/* Simplicity — app catalogue. Shared styles (matches the download page look). */
:root{
  --bg:#060912;--text:#e8eefc;--muted:#9fb0d6;--muted2:#7e8fbb;--dim:#6f7ea7;
  --blue1:#5b86ff;--blue2:#2540c9;--cyan:#16c0e8;--cyan2:#0b76c4;
  --card:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  --border:rgba(255,255,255,.1);
  --cta:linear-gradient(120deg,#3a74f0,#2540c9);
  --head:'Sora','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:520px;
}
@media (min-width:900px){:root{--wrap:1100px}}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lock,html.lock body{overflow:hidden}
html,body{min-height:100%}
body{font-family:var(--body);color:var(--text);background:var(--bg);position:relative;overflow-x:hidden;line-height:1.45;font-weight:500}
body::before,body::after{content:"";position:fixed;inset:-25%;z-index:0;filter:blur(95px);opacity:.6;pointer-events:none}
body::before{background:radial-gradient(38% 38% at 22% 14%,#2f5bff66,transparent),radial-gradient(40% 40% at 84% 22%,#7c3aed40,transparent)}
body::after{background:radial-gradient(46% 46% at 80% 86%,#0ea5e93f,transparent),radial-gradient(32% 32% at 14% 78%,#22d3ee30,transparent)}
a{color:inherit}
button{font-family:inherit;color:inherit}
svg{display:block}
::selection{background:rgba(91,134,255,.45);color:#fff}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(6,9,18,.7);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.07)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:var(--head);font-weight:800;font-size:16px;letter-spacing:-.3px}
.mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(150deg,var(--blue1),var(--blue2));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -6px #2f5bffaa,inset 0 1px 0 rgba(255,255,255,.45);flex:0 0 auto}
.mark svg{width:19px;height:19px}
.tabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.tab{padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:#aebbdd;text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.tab:hover{color:#fff}
.tab.on{background:var(--cta);color:#fff;box-shadow:0 6px 16px -6px #2f5bffcc}
@media (max-width:429px){.brand .bname{display:none}}
@media (min-width:900px){.hdr-in{padding:12px 20px}.brand{font-size:17px}.tab{padding:8px 16px;font-size:13px}}

/* ---------- layout ---------- */
.wrap{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:16px 14px 6px}
@media (min-width:900px){.wrap{padding:28px 20px 10px}}
.narrow{max-width:560px;margin:0 auto}

/* ---------- intro (compact) ---------- */
.intro{padding:6px 2px 8px}
.eyebrow{font-size:10.5px;letter-spacing:3px;font-weight:800;color:#8ea6ff;margin-bottom:6px;text-transform:uppercase}
h1,.h1{font-family:var(--head);font-size:27px;line-height:1.12;font-weight:800;letter-spacing:-.7px;background:linear-gradient(180deg,#fff,#b7caff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.intro .hi{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
.sub{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 10px;font-weight:500;max-width:560px}
.sub b{color:#cdd9ff;font-weight:700}
.rstats{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.stat{font-size:11.5px;font-weight:700;color:#aebbdd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:5px 10px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.stat svg{width:12px;height:12px;color:#8ea6ff}
@media (min-width:900px){
  .intro{padding:10px 2px 14px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 24px}
  .intro>div:first-child{flex:1;min-width:320px}
  h1,.h1{font-size:40px;letter-spacing:-1.4px;margin-bottom:6px}
  .intro .hi{font-size:15px}
  .sub{font-size:15px;max-width:640px;margin-bottom:0}
  .rstats{margin-bottom:6px}
}

/* ---------- section labels ---------- */
.sectlabel{display:flex;align-items:baseline;gap:8px;margin:16px 2px 8px}
.sectlabel::after{content:"";flex:1;height:1px;align-self:center;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
.sectlabel .en{font-size:11.5px;letter-spacing:1.8px;font-weight:800;color:#aebbdd;text-transform:uppercase}
.sectlabel .hi{font-size:12px;color:var(--muted2);font-weight:600}
@media (min-width:900px){.sectlabel{margin:22px 2px 10px}.sectlabel .en{font-size:12px}}

/* ---------- generic card / tiles ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:22px;overflow:hidden;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.tile{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -10px rgba(0,0,0,.6);background:linear-gradient(150deg,var(--blue1),var(--blue2));color:#fff}
.tile svg{width:22px;height:22px}
.tile.cyan,.ftile.cyan{background:linear-gradient(150deg,#16c0e8,#0b76c4)}
.tile.violet,.ftile.violet{background:linear-gradient(150deg,#a78bfa,#6d28d9)}
.tile.green,.ftile.green{background:linear-gradient(150deg,#28c46e,#0f9a59)}
.tile.amber,.ftile.amber{background:linear-gradient(150deg,#fbbf24,#d97706)}
.tile.rose,.ftile.rose{background:linear-gradient(150deg,#fb7185,#be123c)}
.tile.slate,.ftile.slate{background:linear-gradient(140deg,#3a3f4a,#1c2027)}

/* ---------- action buttons (Watch / Link) ---------- */
.act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:10px;font-size:12.5px;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;transition:transform .15s,background .15s}
.act svg{width:12px;height:12px}
.act:active{transform:scale(.96)}
.act.play{background:var(--cta);color:#fff;box-shadow:0 8px 18px -8px #2f5bffcc}
.act.link{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#cdd9ff}
.act.link:hover{background:rgba(255,255,255,.12)}
.act.only{width:32px;padding:0}
.act.only svg{width:14px;height:14px}

/* ---------- links block ---------- */
.links{margin-top:10px}
.lgrid{display:grid;gap:7px;grid-template-columns:minmax(0,1fr)}
.lrow{display:flex;align-items:center;gap:11px;min-width:0;padding:9px 11px 9px 10px;border-radius:15px;background:var(--card);border:1px solid var(--border);text-decoration:none;color:inherit;box-shadow:0 12px 26px -22px rgba(0,0,0,.7);transition:transform .15s,border-color .15s;min-height:56px}
a.lrow:hover{transform:translateY(-1px);border-color:rgba(91,134,255,.45)}
.lrow .tile{width:36px;height:36px;border-radius:11px}
.lrow .tile svg{width:18px;height:18px}
.lbody{flex:1;min-width:0}
.llabel{display:block;font-size:14px;font-weight:800;color:#fff;line-height:1.25}
.ldesc{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgo{color:#8ea6ff;flex:0 0 auto}
.lgo svg{width:18px;height:18px}
.lacts{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.lrow.walk{grid-column:1/-1}
@media (min-width:600px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lrow{padding:11px 13px 11px 12px;min-height:64px}.lrow .tile{width:40px;height:40px;border-radius:12px}.llabel{font-size:14.5px}.ldesc{font-size:12px}}

/* ---------- role sections + feature rows ---------- */
.rolesec{margin-top:22px;scroll-margin-top:72px}
.rolehead{display:flex;align-items:center;gap:11px;padding:0 2px 10px;border-bottom:1px solid rgba(255,255,255,.09);text-decoration:none;color:inherit}
.rolehead .tile{width:40px;height:40px;border-radius:13px}
.rolehead .tile svg{width:20px;height:20px}
.rhead-t{flex:1;min-width:0}
.rolehead h2{font-family:var(--head);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.4px;line-height:1.2;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rolehead h2 small{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.rtag{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.rcount{font-size:11.5px;font-weight:800;color:#cdd9ff;background:rgba(91,134,255,.16);border:1px solid rgba(91,134,255,.3);padding:4px 9px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.rcount svg{width:12px;height:12px}
a.rolehead:hover .rcount{background:rgba(91,134,255,.28)}
@media (min-width:900px){.rolesec{margin-top:34px}.rolehead h2{font-size:26px}.rolehead h2 small{font-size:14px}.rtag{font-size:13px}.rolehead .tile{width:46px;height:46px;border-radius:15px}}

.rows{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.frow{display:flex;gap:11px;min-width:0;padding:10px 11px 10px 10px;border-radius:17px;background:var(--card);border:1px solid var(--border);box-shadow:0 14px 30px -22px rgba(0,0,0,.7);position:relative;transition:transform .15s,border-color .15s,box-shadow .15s;outline:none}
.frow.has-video{cursor:pointer}
.frow.has-video:hover{transform:translateY(-2px);border-color:rgba(91,134,255,.5);box-shadow:0 22px 44px -24px rgba(47,91,255,.6)}
.frow.has-video:focus-visible{border-color:#5b86ff;box-shadow:0 0 0 3px rgba(91,134,255,.35)}
.fmedia{flex:0 0 auto}
.fposter,.ftile{width:56px;height:100px;border-radius:12px;background:#0b0f1e;display:block;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.fposter{object-fit:cover;border:1px solid rgba(255,255,255,.14)}
.ftile{display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(160deg,var(--blue1),var(--blue2));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -8px rgba(0,0,0,.7)}
.ftile svg{width:22px;height:22px}
.frow.soon-card .ftile{filter:saturate(.55);opacity:.8}
.fbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ftop{display:flex;align-items:baseline;gap:8px}
.fnum{font-size:11px;font-weight:800;color:#6f7ea7;letter-spacing:.5px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ftitle{font-size:15px;font-weight:800;color:#fff;line-height:1.25}
.fhi{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.3}
.fdesc{font-size:12.5px;color:#aebbdd;line-height:1.45;margin-top:1px}
.ffoot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:7px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#aebbdd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums;line-height:1.2}
.chip svg{width:12px;height:12px}
.chip.soon{color:#ffd28a;background:rgba(255,180,60,.12);border-color:rgba(255,180,60,.32)}
.chip.soon small{font-weight:600;opacity:.85}
.facts{margin-left:auto;display:flex;gap:6px}
@media (min-width:900px){.frow{padding:12px 13px 12px 12px}.ftitle{font-size:15.5px}}

/* skeleton + errors */
.skel{height:96px;border-radius:17px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite;border:1px solid rgba(255,255,255,.06)}
.skel.sm{height:56px}
@keyframes sh{to{background-position:-200% 0}}
.errbox{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.35);color:#ffc1cb;border-radius:16px;padding:14px 16px;font-size:13.5px;font-weight:600;line-height:1.5;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.errbox button{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer}

/* ---------- download buttons (modal strip) ---------- */
.dl{display:flex;flex-direction:column;gap:10px;margin:0 auto}
.dl-item{display:flex;flex-direction:column;gap:7px;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;text-decoration:none;border:none;cursor:pointer;border-radius:14px;padding:12px 16px;font-size:14px;color:#fff;transition:transform .15s,box-shadow .2s,background .2s;position:relative;width:100%;line-height:1.2}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-primary{background:var(--cta);box-shadow:0 14px 28px -12px #2f5bffcc,inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{box-shadow:0 18px 34px -12px #2f5bffee}
.btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.11)}
.dl-note{font-size:11.5px;color:#8593ba;font-weight:600;line-height:1.5;text-align:center}
.dl-note a{color:#9db4ff;text-decoration:none;border-bottom:1px solid rgba(157,180,255,.35)}

/* ---------- video modal ---------- */
.ov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(3,5,12,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0}
.ov.on{display:flex;animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;height:100%;overflow:auto;background:linear-gradient(180deg,#0f1733,#0a0f24);display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-top{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:rgba(15,23,51,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:2}
.sheet-t{flex:1;min-width:0}
.sheet-title{font-family:var(--head);font-size:17px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sheet-sub{font-size:12px;color:#9db4ff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xb{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#cfdaff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s}
.xb:hover{background:rgba(255,255,255,.18)}
.xb.desk{display:none;position:absolute;top:16px;right:16px;z-index:3}
.sheet-body{display:flex;flex-direction:column;gap:14px;padding:16px 16px 22px;flex:1}
.player-col{display:flex;justify-content:center;align-items:center}
.phone{position:relative;height:min(62vh,620px);height:min(62dvh,620px);max-width:100%;aspect-ratio:9/19.5;border-radius:34px;padding:7px;background:#0b0f1e;box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05);transition:aspect-ratio .2s}
.phone video{width:100%;height:100%;object-fit:contain;border-radius:28px;background:#000;display:block}
.phone.wide{aspect-ratio:16/9;height:auto;width:100%;max-width:840px;border-radius:18px;padding:6px}
.phone.wide video{border-radius:13px}
.verr{position:absolute;inset:7px;border-radius:28px;background:rgba(6,9,18,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;font-size:13.5px;color:#ffc1cb;font-weight:600;line-height:1.5}
.verr button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:13px;padding:9px 16px;border-radius:10px;cursor:pointer}
.info-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.info-head{display:none}
.sheet-desc{font-size:13.5px;color:#aebbdd;line-height:1.55;text-align:center}
.mrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.strip{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:14px}
.strip-l{font-size:10.5px;letter-spacing:2px;font-weight:800;color:var(--muted2);text-transform:uppercase;margin-bottom:10px}
.next{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:14px;background:var(--cta);color:#fff;font-weight:800;font-size:15px;border:none;cursor:pointer;box-shadow:0 14px 28px -12px #2f5bffcc;transition:transform .15s}
.next:active{transform:scale(.98)}
.next svg{width:18px;height:18px}
.next.done{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:none}
.next-sub{font-size:12px;color:var(--dim);text-align:center;font-weight:600;margin-top:-4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){
  .ov{padding:28px}
  .sheet{height:auto;max-height:100%;max-width:1000px;border-radius:28px;border:1px solid rgba(255,255,255,.15);box-shadow:0 40px 100px -20px rgba(0,0,0,.85)}
  .sheet-top{display:none}
  .xb.desk{display:flex}
  .sheet-body{flex-direction:row;gap:0;padding:0;align-items:stretch}
  .player-col{flex:0 0 auto;padding:30px 34px;background:radial-gradient(70% 60% at 50% 50%,rgba(47,91,255,.2),transparent 70%);border-right:1px solid rgba(255,255,255,.06)}
  .phone{height:min(70vh,700px)}
  .phone.wide{width:560px;max-width:56vw}
  .info-col{flex:1;padding:40px 40px 32px;justify-content:center;gap:16px}
  .info-head{display:block}
  .info-head .eyebrow{margin-bottom:10px}
  .info-title{font-family:var(--head);font-size:30px;font-weight:800;color:#fff;letter-spacing:-.6px;line-height:1.15}
  .info-sub{font-size:15px;color:#9db4ff;font-weight:700;margin-top:6px}
  .sheet-desc{text-align:left;font-size:15px}
  .mrow{justify-content:flex-start}
  .strip{padding:16px 18px}
  .next{margin-top:4px}
}

/* ---------- help form ---------- */
.help-hero{text-align:center;padding:14px 0 10px}
.help-hero .appicon{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;background:linear-gradient(150deg,var(--cyan),var(--cyan2));display:flex;align-items:center;justify-content:center;box-shadow:0 22px 46px -10px #16c0e8aa,inset 0 2px 0 rgba(255,255,255,.5)}
.help-hero .appicon svg{width:36px;height:36px}
.help-hero h1{font-size:30px}
.help-hero .hi{font-size:14px;color:#cdd9ff;font-weight:700;margin-bottom:6px}
.help-hero .sub{margin:0 auto 14px;text-align:center}
@media (min-width:900px){.help-hero{padding:24px 0 12px}.help-hero .appicon{width:84px;height:84px}.help-hero .appicon svg{width:40px;height:40px}.help-hero h1{font-size:44px}.help-hero .hi{font-size:16px}}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12.5px;font-weight:800;color:#cdd9ff;letter-spacing:.2px}
.label small{color:var(--muted2);font-weight:600;margin-left:6px;font-size:11.5px}
.input,.select,.textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 14px;color:#fff;font-family:inherit;font-size:16px;font-weight:600;outline:none;transition:border-color .15s,background .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.input:focus,.select:focus,.textarea:focus{border-color:#5b86ff;background:rgba(91,134,255,.08);box-shadow:0 0 0 3px rgba(91,134,255,.2)}
.input::placeholder,.textarea::placeholder{color:#5f6d93;font-weight:500}
.textarea{min-height:128px;resize:vertical;line-height:1.5}
.select-wrap{position:relative}
.select{padding-right:42px;cursor:pointer}
.select option{color:#0b1220;background:#fff}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid #8ea6ff;border-bottom:2px solid #8ea6ff;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two .label{white-space:nowrap}
.two .label small{display:none}
.chips{display:flex;gap:8px}
.chipbtn{flex:1;padding:11px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#aebbdd;font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,color .15s,box-shadow .15s}
.chipbtn svg{width:16px;height:16px}
.chipbtn.on{background:var(--cta);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px #2f5bffcc}
.drop{border:1.5px dashed rgba(255,255,255,.2);border-radius:16px;padding:18px 14px;text-align:center;cursor:pointer;color:#aebbdd;font-size:13px;font-weight:600;background:rgba(255,255,255,.03);transition:border-color .15s,background .15s;line-height:1.5}
.drop:hover,.drop.over{border-color:#5b86ff;background:rgba(91,134,255,.07)}
.drop svg{width:26px;height:26px;margin:0 auto 6px;color:#8ea6ff}
.drop b{color:#cdd9ff}
.drop input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0b0f1e}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .file{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#8ea6ff}
.thumb .file svg{width:26px;height:26px}
.thumb .rm{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.25);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.thumb .sz{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:2px 5px;text-align:center}
.note{font-size:12px;color:#8593ba;font-weight:600;line-height:1.5}
.note.warn{color:#ffd28a}
.err{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.35);color:#ffc1cb;border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.5}
.submit{width:100%;padding:16px 20px;border-radius:16px;font-size:16px}
.submit[disabled]{opacity:.7;cursor:progress;transform:none}
.spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.success{text-align:center;padding:36px 22px 30px}
.bigcheck{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;background:linear-gradient(150deg,#28c46e,#0f9a59);display:flex;align-items:center;justify-content:center;box-shadow:0 22px 46px -12px #28c46eaa,inset 0 2px 0 rgba(255,255,255,.4);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.bigcheck svg{width:46px;height:46px;color:#fff}
.tno{font-family:var(--head);font-size:25px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.2}
.tno b{color:#7fe3ff}
.success p{font-size:14px;color:var(--muted);line-height:1.6;margin:10px auto 22px;max-width:340px}
.success .again{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:14px;text-decoration:none}
.success .again svg{width:16px;height:16px}

/* ---------- footer ---------- */
.foot{margin-top:30px;position:relative;z-index:1}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:0 14px 40px}
.helpcard{border-radius:22px;padding:1px;background:linear-gradient(150deg,var(--cyan),var(--cyan2));box-shadow:0 22px 48px -18px #0ea5e9aa;display:block;text-decoration:none;transition:transform .2s}
.helpcard:hover{transform:translateY(-2px)}
.helpcard-in{border-radius:21px;background:linear-gradient(180deg,#06202c,#072530);padding:16px 16px;display:flex;align-items:center;gap:13px;color:#fff}
.helpcard .tile{background:linear-gradient(150deg,var(--cyan),var(--cyan2));width:46px;height:46px;border-radius:14px}
.helpcard-t{flex:1;min-width:0}
.helpcard-h{font-family:var(--head);font-size:17px;font-weight:800;line-height:1.3}
.helpcard-p{font-size:12.5px;color:#bfeaf7;margin-top:3px;line-height:1.5}
.foot-links{text-align:center;font-size:11.5px;color:var(--dim);margin-top:16px;line-height:1.9;font-weight:600}
.foot-links a{color:#8593ba;text-decoration:none}
.foot-links a:hover{color:#cdd9ff}
.foot-links .dot{margin:0 8px;opacity:.5}
@media (min-width:900px){
  .foot{margin-top:44px}
  .foot-in{padding:0 20px 56px}
  .helpcard-in{padding:24px 28px;gap:20px}
  .helpcard .tile{width:54px;height:54px;border-radius:17px}
  .helpcard-h{font-size:21px}.helpcard-p{font-size:13.5px}
  .foot-links{margin-top:22px;font-size:12.5px}
}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.nf .appicon{width:72px;height:72px;border-radius:22px;margin:0 auto 12px;background:linear-gradient(150deg,var(--blue1),var(--blue2));display:flex;align-items:center;justify-content:center;box-shadow:0 22px 46px -10px #2f5bffaa}
.nf .appicon svg{width:38px;height:38px}
.nf .sub{text-align:center;margin:0 auto 14px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}