* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font:inherit; border:0; }
html { font-size:12px; line-height:1.5; font-feature-settings:'tnum'; }
body { font-size:12px; }
a:link, a:visited { color:inherit; }

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

:root{
  --blue:#1677ff;
  --blue2:#005bea;
  --lightBlue:#dff4ff;
  --cyan:#72eaff;
  --gold:#ffd84d;
  --gold2:#ffb300;
  --black:#07111f;
  --white:#ffffff;
  --muted:#61768c;
  --green:#16c76a;
  --red:#ef4444;
}

html,
body{
  width:100%;
  min-height:100%;
}

body{
  min-height:100vh;
  font-family:Arial, Helvetica, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow-x:hidden;
  color:var(--black);
  background:
    radial-gradient(circle at 10% 8%, rgba(114,234,255,.42), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255,216,77,.30), transparent 26%),
    radial-gradient(circle at 50% 110%, rgba(22,119,255,.24), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#e8f8ff 52%,#cfefff 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(22,119,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,119,255,.075) 1px, transparent 1px);
  background-size:32px 32px;
  animation:bgMove 12s linear infinite;
  pointer-events:none;
  opacity:.65;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,216,77,.16) 45%, transparent 56%),
    radial-gradient(circle at center, transparent 0%, rgba(0,91,234,.08) 100%);
  pointer-events:none;
}

@keyframes bgMove{
  from{background-position:0 0;}
  to{background-position:32px 32px;}
}

.wrapper{
  width:100%;
  max-width:420px;
  position:relative;
  z-index:2;
}

.mobile-frame{
  width:100%;
  padding:8px;
  border-radius:30px;
  background:
    linear-gradient(145deg,#ffffff 0%,#dff4ff 45%,#fff7cf 100%);
  border:1px solid rgba(22,119,255,.24);
  box-shadow:
    0 22px 58px rgba(22,119,255,.18),
    0 0 32px rgba(255,216,77,.22),
    inset 0 0 26px rgba(255,255,255,.92);
}

.mobile-screen{
  width:100%;
  min-height:calc(100vh - 36px);
  border-radius:24px;
  padding:16px 13px 18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(114,234,255,.24), transparent 32%),
    radial-gradient(circle at bottom right, rgba(255,216,77,.18), transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#f5fcff 55%,#eaf8ff 100%);
  border:1px solid rgba(22,119,255,.18);
}

.mobile-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(22,119,255,.045) 50%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(255,216,77,.055) 50%, transparent 52%);
  background-size:46px 46px;
  opacity:.58;
}

.mobile-screen::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-120px;
  top:-105px;
  border-radius:50%;
  background:rgba(255,216,77,.18);
}

.content{
  position:relative;
  z-index:2;
  min-height:calc(100vh - 70px);
  display:flex;
  flex-direction:column;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,216,77,.30);
  border:1px solid rgba(255,179,0,.36);
  color:#805000;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:14px;
  box-shadow:0 8px 18px rgba(255,179,0,.10);
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(22,199,106,.75);
  animation:dotPulse 1.15s infinite;
}

@keyframes dotPulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.5);
    opacity:.55;
  }
}

.user-card{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  border-radius:21px;
  background:#ffffff;
  border:1px solid rgba(22,119,255,.18);
  box-shadow:
    0 12px 26px rgba(22,119,255,.08),
    0 0 18px rgba(255,216,77,.12);
  margin-bottom:14px;
}

.user-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  background:linear-gradient(180deg,#eaf8ff,#fff7cf);
  box-shadow:inset 0 0 0 1px rgba(22,119,255,.16);
  flex-shrink:0;
}

.user-label{
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  color:#58708a;
  margin-bottom:4px;
}

.user-text{
  font-size:12.5px;
  line-height:1.35;
  font-weight:900;
  color:var(--black);
}

.user-count{
  color:#b06d00;
  font-size:21px;
  text-shadow:0 1px 0 #fff, 0 0 14px rgba(255,179,0,.36);
}

.title{
  font-size:24px;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  font-weight:1000;
  color:#07111f;
  margin-bottom:8px;
}

.title span{
  display:block;
  color:#b06d00;
  text-shadow:0 0 16px rgba(255,179,0,.24);
}

.subtitle{
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:13px;
}

.card{
  padding:15px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(22,119,255,.16);
  box-shadow:
    0 12px 28px rgba(22,119,255,.08),
    0 0 18px rgba(255,216,77,.12);
}

.progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12.5px;
  font-weight:900;
  color:var(--black);
  margin-bottom:9px;
}

.progress-wrap{
  width:100%;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:#eef8ff;
  border:1px solid rgba(22,119,255,.16);
  margin-bottom:14px;
}

.progress-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ffd84d,#72eaff,#1677ff,#005bea);
  box-shadow:
    0 0 18px rgba(22,119,255,.42),
    0 0 18px rgba(255,179,0,.28);
  transition:width .18s linear;
}

.items{
  display:grid;
  gap:9px;
}

.item{
  display:none;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:12px 10px;
  border-radius:17px;
  background:#ffffff;
  border:1px solid rgba(255,179,0,.28);
  box-shadow:
    0 8px 18px rgba(22,119,255,.04),
    inset 0 0 0 1px rgba(255,255,255,.85);
}

.item.show{
  display:flex;
  animation:itemIn .32s ease forwards;
}

@keyframes itemIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.item-left{
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-width:0;
}

.check-icon{
  width:25px;
  height:25px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff7a8,#ffb300);
  font-size:15px;
  box-shadow:0 0 12px rgba(255,179,0,.34);
  flex-shrink:0;
}

.item-text{
  font-size:13.2px;
  line-height:1.35;
  font-weight:1000;
  color:#07111f;
  word-break:break-word;
}

.item-status{
  font-size:11px;
  font-weight:900;
  color:#b06d00;
  white-space:nowrap;
  margin-top:3px;
  flex-shrink:0;
}

.item.done .item-status{
  color:#0b9854;
}

.spacer{
  flex:0;
  min-height:14px;
}

/* NÚT XANH DƯƠNG ĐEN */
.cta-wrap{
  position:relative;
  padding-top:10px;
  background:transparent;
}

.cta{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:62px;
  border-radius:22px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  background:linear-gradient(180deg,#4aa3ff 0%,#1677ff 42%,#005bea 72%,#031b45 100%);
  color:#ffffff;
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.7px;
  box-shadow:
    0 16px 30px rgba(0,91,234,.30),
    0 0 30px rgba(22,119,255,.52),
    inset 0 2px 0 rgba(255,255,255,.46);
  text-shadow:
    0 2px 0 rgba(0,0,0,.48),
    0 0 10px rgba(255,255,255,.22);
  animation:btnZoom 1.12s infinite ease-in-out;
}

.cta.show{
  display:flex;
}

@keyframes btnZoom{
  0%,100%{
    transform:scale(1);
    filter:brightness(1);
  }
  50%{
    transform:scale(1.065);
    filter:brightness(1.16);
  }
}

.cta:active{
  transform:scale(.96);
}

.note{
  text-align:center;
  font-size:11.5px;
  line-height:1.5;
  color:#647990;
  margin-top:10px;
}

/* LAYER CAPTCHA */
.captcha-layer{
  position:fixed;
  inset:0;
  z-index:99;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(2,8,23,.70);
  backdrop-filter:blur(9px);
}

.captcha-layer.show{
  display:flex;
  animation:fadeIn .22s ease;
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

.captcha-modal{
  width:100%;
  max-width:390px;
  border-radius:26px;
  background:#ffffff;
  border:1px solid rgba(114,234,255,.34);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 34px rgba(114,234,255,.24),
    0 0 24px rgba(255,216,77,.18);
  padding:14px;
  animation:modalIn .28s ease;
}

@keyframes modalIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.captcha-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.captcha-head strong{
  font-size:16px;
  color:#20242a;
}

.captcha-tag{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,216,77,.28);
  color:#805000;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}

.captcha-image{
  position:relative;
  width:100%;
  height:175px;
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.10)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80");
  background-size:cover;
  background-position:center;
  border:1px solid rgba(0,0,0,.08);
}

.captcha-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(114,234,255,.15),transparent 42%,rgba(255,216,77,.15)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 9px);
  pointer-events:none;
}

.target-ring{
  position:absolute;
  top:66px;
  left:calc(100% - 122px);
  width:58px;
  height:58px;
  border-radius:16px;
  border:3px solid rgba(255,255,255,.96);
  background:rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.36),
    0 0 18px rgba(114,234,255,.35);
}

.target-ring::before{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  border-radius:50%;
  left:17px;
  bottom:-15px;
  background:rgba(255,255,255,.22);
  border-bottom:3px solid rgba(255,255,255,.96);
}

.target-ring::after{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  border-radius:50%;
  right:-15px;
  top:17px;
  background:rgba(255,255,255,.22);
  border-right:3px solid rgba(255,255,255,.96);
}

.puzzle-piece{
  position:absolute;
  top:66px;
  left:14px;
  width:58px;
  height:58px;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.08)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80");
  background-size:330px 175px;
  background-position:-208px -66px;
  border:3px solid rgba(255,255,255,.98);
  box-shadow:
    0 10px 22px rgba(0,0,0,.30),
    0 0 18px rgba(114,234,255,.24),
    inset 0 0 12px rgba(255,255,255,.26);
  z-index:3;
  will-change:transform;
}

.puzzle-piece::before{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  border-radius:50%;
  left:17px;
  bottom:-15px;
  background:inherit;
  background-size:330px 175px;
  background-position:-225px -109px;
  border-bottom:3px solid rgba(255,255,255,.98);
}

.puzzle-piece::after{
  content:"";
  position:absolute;
  width:23px;
  height:23px;
  border-radius:50%;
  right:-15px;
  top:17px;
  background:inherit;
  background-size:330px 175px;
  background-position:-244px -83px;
  border-right:3px solid rgba(255,255,255,.98);
}

.slider-area{
  margin-top:12px;
}

.slider-track{
  position:relative;
  height:50px;
  border-radius:999px;
  background:#eef8ff;
  border:1px solid rgba(22,119,255,.16);
  overflow:hidden;
  box-shadow:
    inset 0 2px 8px rgba(22,119,255,.08),
    0 0 18px rgba(114,234,255,.10);
}

.slider-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg,rgba(255,216,77,.72),rgba(114,234,255,.78),rgba(22,119,255,.30));
  border-radius:999px;
}

.slider-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 52px;
  font-size:12px;
  font-weight:900;
  color:#6d86a0;
  pointer-events:none;
}

.slider-btn{
  position:absolute;
  left:4px;
  top:4px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:linear-gradient(180deg,#ffffff,#fff7cf);
  color:#005bea;
  font-size:21px;
  font-weight:900;
  box-shadow:
    0 6px 16px rgba(22,119,255,.24),
    0 0 16px rgba(255,216,77,.26),
    inset 0 0 0 1px rgba(22,119,255,.22);
  cursor:grab;
  z-index:2;
  touch-action:none;
  will-change:transform;
}

.captcha-message{
  display:none;
  margin-top:11px;
  padding:11px;
  border-radius:14px;
  text-align:center;
  font-size:13px;
  font-weight:900;
}

.captcha-message.success{
  display:block;
  background:rgba(23,201,100,.10);
  color:#087850;
  border:1px solid rgba(23,201,100,.25);
}

.captcha-message.error{
  display:block;
  background:rgba(239,68,68,.10);
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.25);
}

.captcha-actions{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
}

.captcha-actions button{
  border:none;
  background:transparent;
  color:#4a4f57;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

@media(max-width:380px){
  body{
    padding:6px;
  }

  .mobile-frame{
    padding:6px;
    border-radius:26px;
  }

  .mobile-screen{
    min-height:calc(100vh - 24px);
    border-radius:21px;
    padding:13px 10px 15px;
  }

  .title{
    font-size:22px;
  }

  .subtitle{
    font-size:12.5px;
  }

  .user-text{
    font-size:12px;
  }

  .user-count{
    font-size:20px;
  }

  .item-text{
    font-size:12.4px;
  }

  .item-status{
    font-size:10.5px;
  }

  .cta{
    font-size:16px;
    min-height:58px;
  }

  .captcha-image{
    height:165px;
  }

  .target-ring{
    top:62px;
    left:calc(100% - 112px);
    width:54px;
    height:54px;
  }

  .puzzle-piece{
    top:62px;
    width:54px;
    height:54px;
  }
}

/* Keyboard accessibility and reduced-motion preferences. */
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #005bea; outline-offset:4px; }
.captcha-modal { max-height:calc(100dvh - 28px); overflow-y:auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}