:root{
  --ink:#0b1220; --muted:#6b7a90; --white:#fff; --line:#e6edf7;
  --blue:#2563eb; --blue-dark:#1d4ed8; --blue-light:#3b82f6; --blue-2:#38bdf8;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); min-height:100dvh;
  background:
    radial-gradient(1100px 560px at 50% -12%, #eaf2ff 0%, rgba(234,242,255,0) 60%),
    radial-gradient(900px 500px at 120% 110%, #e6f6ff 0%, rgba(230,246,255,0) 55%),
    linear-gradient(180deg,#fff 0%,#f6faff 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom)); overflow-x:hidden;
}
.bg{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.bg .grid{ position:absolute; inset:-2px;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(700px 500px at 50% 22%,#000 0%,transparent 75%);
  mask-image:radial-gradient(700px 500px at 50% 22%,#000 0%,transparent 75%); }
.bg b{ position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#bfdbfe,var(--blue-light)); opacity:.16; filter:blur(6px); animation:float linear infinite; }
.bg b:nth-child(2){ width:150px;height:150px;left:6%;top:10%;animation-duration:16s; }
.bg b:nth-child(3){ width:80px;height:80px;left:80%;top:16%;animation-duration:12s;animation-delay:-3s; }
.bg b:nth-child(4){ width:200px;height:200px;left:72%;top:66%;animation-duration:20s;animation-delay:-7s; }
.bg b:nth-child(5){ width:100px;height:100px;left:12%;top:72%;animation-duration:17s;animation-delay:-2s; }
@keyframes float{ 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(22px,-30px) scale(1.1);} 100%{transform:translate(0,0) scale(1);} }

.card{ position:relative; z-index:1; width:100%; max-width:440px;
  background:rgba(255,255,255,.74); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(37,99,235,.14); border-radius:30px; padding:26px 22px 24px;
  box-shadow:0 30px 60px -24px rgba(30,64,175,.4),0 2px 10px rgba(15,23,42,.05);
  animation:cardIn .8s cubic-bezier(.16,1,.3,1) both; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0; border-radius:30px; padding:1.5px;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(56,189,248,0) 60deg,var(--blue) 120deg,transparent 200deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 6s linear infinite; opacity:.6; pointer-events:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes cardIn{ from{opacity:0;transform:translateY(28px) scale(.96);} to{opacity:1;transform:none;} }

.logo-wrap{ position:relative; width:112px; height:112px; margin:2px auto 8px; animation:pop .9s cubic-bezier(.34,1.56,.64,1) .12s both; }
.logo-glow{ position:absolute; inset:-14px; border-radius:34px; z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue-2) 70%,transparent),rgba(37,99,235,.15) 55%,transparent 72%); filter:blur(8px); animation:breathe 3s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{transform:scale(1);opacity:.85;} 50%{transform:scale(1.12);opacity:1;} }
.logo{ position:relative; z-index:1; width:112px; height:112px; border-radius:28px; object-fit:cover;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 16px 34px -12px rgba(2,20,60,.65),inset 0 0 0 1px rgba(37,99,235,.15); }
.logo-ph{ display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:900; color:#fff;
  background:linear-gradient(145deg,var(--blue-light),var(--blue-dark)); }
.logo-wrap::after{ content:""; position:absolute; z-index:2; inset:0; border-radius:28px;
  background:linear-gradient(130deg,rgba(255,255,255,.5) 0%,transparent 38%); pointer-events:none; mix-blend-mode:screen; }
@keyframes pop{ from{transform:scale(0) rotate(-18deg);} to{transform:scale(1) rotate(0);} }

.brand{ text-align:center; font-size:12px; letter-spacing:3px; font-weight:800; color:var(--blue); margin:2px 0 12px; text-transform:uppercase; }
h1{ text-align:center; font-size:23px; line-height:1.25; margin:0 0 6px; letter-spacing:-.5px; font-weight:800; }
.sub{ text-align:center; color:var(--muted); font-size:14px; margin:0 auto 20px; max-width:320px; line-height:1.5; }

.progress{ height:9px; border-radius:99px; background:#e8eefb; overflow:hidden; margin:0 4px 8px; box-shadow:inset 0 1px 2px rgba(2,20,60,.08); }
.progress i{ display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--blue-2),var(--blue),var(--blue-dark)); background-size:200% 100%; transition:width .7s cubic-bezier(.16,1,.3,1); animation:flow 2s linear infinite; }
@keyframes flow{ to{ background-position:200% 0; } }
.p-label{ text-align:center; font-size:12px; color:var(--muted); font-weight:600; margin:0 0 18px; }
.p-label b{ color:var(--blue); }

.active-pill{ position:absolute; top:14px; right:14px; z-index:4; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.9); border:1px solid rgba(37,99,235,.16); padding:5px 10px 5px 9px; border-radius:99px; box-shadow:0 6px 16px -10px rgba(37,99,235,.5); }
.active-pill .live{ position:relative; width:8px; height:8px; }
.active-pill .live i{ position:absolute; inset:0; border-radius:50%; background:#22c55e; }
.active-pill .live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22c55e; animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping{ 0%{transform:scale(1);opacity:.7;} 80%,100%{transform:scale(2.6);opacity:0;} }
.active-pill b{ color:var(--blue); font-size:12.5px; font-weight:900; line-height:1; }

.task{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background:var(--white); border:1.5px solid var(--line); border-radius:20px; padding:14px 15px; margin-bottom:13px;
  font-size:15px; font-weight:700; color:var(--ink); transition:transform .16s ease,box-shadow .28s ease,border-color .28s ease,background .3s ease;
  position:relative; overflow:hidden; font-family:inherit; }
.task:active{ transform:scale(.975); }
.task .ic{ width:46px; height:46px; flex:0 0 46px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 18px -8px rgba(2,20,60,.4); }
.task .ic svg{ width:25px; height:25px; }
.grad-yt{ background:linear-gradient(145deg,#f87171,#dc2626); }
.grad-tk{ background:linear-gradient(145deg,#2b2b33,#000); }
.grad-wa{ background:linear-gradient(145deg,#4ade80,#16a34a); }
.grad-ig{ background:linear-gradient(145deg,#feda75,#d62976 45%,#962fbf 80%,#4f5bd5); }
.grad-tg{ background:linear-gradient(145deg,#37bbfe,#007dbb); }
.grad-dc{ background:linear-gradient(145deg,#7289da,#4a5bb0); }
.grad-fb{ background:linear-gradient(145deg,#3b82f6,#1d4ed8); }
.grad-tw{ background:linear-gradient(145deg,#a970ff,#6441a5); }
.grad-lk{ background:linear-gradient(145deg,#94a3b8,#475569); }
.grad-x{ background:linear-gradient(145deg,#3a3a3a,#000); }
.grad-th{ background:linear-gradient(145deg,#2a2a2a,#000); }
.grad-kk{ background:linear-gradient(145deg,#53fc18,#1f9e0a); }
.grad-sc{ background:linear-gradient(145deg,#fffc00,#d9c500); }
.grad-sp{ background:linear-gradient(145deg,#1ed760,#0f8f3f); }
.grad-pi{ background:linear-gradient(145deg,#ef4444,#bd081c); }
.grad-li{ background:linear-gradient(145deg,#2f8de6,#0a66c2); }
.task .txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.task .txt small{ font-weight:500; color:var(--muted); font-size:12px; }
.task .state{ flex:0 0 auto; font-size:11.5px; font-weight:800; display:flex; align-items:center; gap:6px; color:var(--muted); }
.task .state .dot{ width:9px; height:9px; border-radius:50%; background:#cbd5e1; transition:background .3s; }
.task .check{ width:22px; height:22px; border-radius:50%; background:var(--blue); display:none; align-items:center; justify-content:center; box-shadow:0 4px 10px -2px rgba(37,99,235,.7); }
.task .check svg{ width:13px; height:13px; }
.task .ok{ display:none; }
.task.pending{ border-color:var(--blue-light); box-shadow:0 6px 18px -10px rgba(37,99,235,.5); }
.task.pending .state{ color:var(--blue); }
.task.pending .state .dot{ background:var(--blue); animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.7);opacity:.45;} }
.task.done{ border-color:var(--blue); background:linear-gradient(180deg,#f3f8ff,#fff); box-shadow:0 10px 26px -14px rgba(37,99,235,.6); }
.task.done .state{ color:var(--blue); }
.task.done .state .dot,.task.done .label{ display:none; }
.task.done .check{ display:flex; animation:pop .45s cubic-bezier(.34,1.56,.64,1); }
.task.done .ok{ display:inline; }
.task.done::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); transform:translateX(-120%); animation:shine 1s ease forwards; }
@keyframes shine{ to{ transform:translateX(120%); } }

.continue-wrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height .55s ease,opacity .55s ease,margin .55s ease; margin-top:0; }
.continue-wrap.show{ max-height:130px; opacity:1; margin-top:8px; }
.btn-continue{ width:100%; border:none; cursor:pointer; padding:17px; border-radius:20px; font-size:16.5px; font-weight:900; color:#fff; letter-spacing:.4px;
  text-decoration:none; font-family:inherit; background:linear-gradient(135deg,var(--blue-2),var(--blue),var(--blue-dark)); background-size:200% 100%;
  box-shadow:0 16px 34px -10px rgba(37,99,235,.75); display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden; animation:btnFlow 3s linear infinite; }
@keyframes btnFlow{ to{ background-position:200% 0; } }
.btn-continue:active{ transform:scale(.97); }
.btn-continue svg{ width:21px; height:21px; }
.btn-continue::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation:sweep 2.4s ease-in-out infinite; }
@keyframes sweep{ 0%{ left:-60%; } 60%,100%{ left:130%; } }
.hint{ text-align:center; font-size:12px; color:var(--muted); margin:16px 4px 4px; }
.spark{ position:absolute; width:9px; height:9px; border-radius:2px; pointer-events:none; z-index:9; }
@media (max-width:360px){ h1{ font-size:21px; } .logo-wrap,.logo{ width:100px; height:100px; } }