:root{--acid:#b9ef00;--bg:#050505;--panel:#080808;--line:#252525;--muted:#8c8c85;--text:#f5f3eb}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
button,a{font:inherit}
.app{width:min(100%,430px);margin:auto;padding:10px 10px 32px}
.hidden{display:none!important}
.topbar{height:48px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #191919;margin-bottom:9px}
.brand{display:flex;align-items:center;gap:8px}.brand-mark{width:36px;height:36px;border:1px solid #303030;display:grid;place-items:center;color:var(--acid);font-size:18px;font-weight:900}.brand small{display:block;font-size:7px;color:#777;letter-spacing:.12em}.brand strong{font-size:14px}
.controls{margin-left:auto;display:flex;align-items:center;gap:8px}.lang-btn{height:34px;min-width:42px;border:1px solid #333;background:#080808;color:var(--acid);font-weight:900;font-size:9px}
.notify-toggle{display:flex;align-items:center;gap:5px;cursor:pointer}.notify-toggle input{display:none}.switch{width:38px;height:20px;border:1px solid #343434;border-radius:30px;background:#101010;position:relative}.switch:after{content:"";width:12px;height:12px;background:#666;border-radius:50%;position:absolute;left:3px;top:3px;transition:.2s}.notify-toggle input:checked+.switch{border-color:var(--acid)}.notify-toggle input:checked+.switch:after{left:21px;background:var(--acid)}.notify-toggle small{font-size:7px;color:#777}
.card,.state-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin:9px 0;padding:12px}
.state-card{text-align:center;padding:44px 18px}.state-card h1{font-size:22px}.state-card p{font-size:10px;color:#aaa;line-height:1.5}.spinner{width:30px;height:30px;border:2px solid #333;border-top-color:var(--acid);border-radius:50%;margin:0 auto 15px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.hero{display:flex;justify-content:space-between;gap:10px;min-height:120px}.hero-left{min-width:0;flex:1}.acid-label{font-size:8px;color:var(--acid);letter-spacing:.12em;font-weight:900}.hero h1{font-size:29px;line-height:.9;margin:10px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-left p{font-size:8px;margin:0;color:#d8d8d2}
.hero-right{display:grid;grid-template-columns:112px 60px;grid-template-rows:auto 22px;gap:6px 7px;align-items:start}.user-box{border:1px solid #333;border-radius:8px;min-height:63px;padding:8px;display:flex;flex-direction:column;justify-content:center}.user-box small,.day-box small{font-size:6px;color:#777;letter-spacing:.12em}.user-box strong{font-size:15px;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-box{display:flex;flex-direction:column;align-items:flex-end}.day-box strong{font-size:30px;line-height:.9;color:var(--acid)}.day-box span{font-size:7px;color:#777;font-weight:900;margin-top:4px}.xp-pill{grid-column:1/3;justify-self:end;color:var(--acid);font-size:8px;font-weight:900}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-head strong{font-size:10px}.card-head small{font-size:7px;color:#777}
.trophy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.trophy{aspect-ratio:1;border:1px solid #333;border-radius:11px;background:#000;padding:4px;position:relative;display:grid;place-items:center;overflow:hidden}.trophy img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}.trophy.locked img{filter:grayscale(1) brightness(.28);opacity:.55}.trophy.unlocked{border-color:var(--acid);box-shadow:0 0 12px rgba(185,239,0,.15)}.trophy span{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);background:#000c;color:#aaa;font-size:6px;padding:1px 4px;border-radius:8px}.trophy.unlocked span{color:var(--acid)}
.today-card h2{font-size:18px;margin:7px 0 7px}.today-card p,.healing-card p,.support-card p,.reward-card p{font-size:9px;line-height:1.45;color:#aaa;margin:0}.tip-line{margin-top:9px;padding-top:8px;border-top:1px solid #1d1d1d;color:#d7d7cf;font-size:8px;line-height:1.4}
.healing-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.healing-card>strong{font-size:24px;color:var(--acid);white-space:nowrap}
.care-card{padding:0}.care-toggle{width:100%;min-height:62px;padding:12px;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;color:var(--text);text-align:left}.care-toggle strong{display:block;font-size:10px}.care-toggle small{font-size:7px;color:#777}.care-toggle i{width:34px;height:34px;border:1px solid #333;border-radius:50%;display:grid;place-items:center;color:var(--acid);font-size:20px;font-style:normal;transition:.2s}.care-card.open .care-toggle i{transform:rotate(45deg);border-color:var(--acid)}.care-content{display:none;border-top:1px solid #1d1d1d;padding:4px 12px 12px}.care-card.open .care-content{display:block}.care-step{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #171717}.care-step>b{width:22px;height:22px;border:1px solid #333;border-radius:50%;display:grid;place-items:center;color:var(--acid);font-size:8px;flex:0 0 auto}.care-step span strong{display:block;font-size:8px}.care-step span small{display:block;font-size:8px;color:#999;line-height:1.35;margin-top:2px}.medicine-note{margin-top:10px;padding:9px;border:1px solid #3b3425;background:#0d0b07}.medicine-note>strong{font-size:8px;color:#d8bb72}.medicine-note p{font-size:8px;line-height:1.4;color:#aaa;margin:5px 0 0}
.question{padding:10px 0;border-bottom:1px solid #171717}.question h3{font-size:9px;margin:0 0 7px}.choices{display:flex;gap:5px;flex-wrap:wrap}.choice{border:1px solid #2c2c2c;border-radius:8px;background:#111;color:#bbb;padding:7px 9px;font-size:8px}.choice.active{border-color:var(--acid);color:var(--acid);background:#111607}
.primary,.secondary,.whatsapp{display:block;width:100%;border-radius:9px;padding:12px;text-align:center;text-decoration:none;font-size:9px;font-weight:900}.primary{margin-top:11px;border:0;background:var(--acid);color:#000}.primary:disabled{opacity:.3}.secondary{margin-top:10px;border:1px solid #3a3a3a;color:var(--text);background:#0b0b0b}.whatsapp{margin-top:10px;background:var(--acid);color:#000}.hint{text-align:center;color:#777;font-size:8px}.chip{display:inline-block;padding:5px 7px;border:1px solid #333;border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.08em}.chip.danger{border-color:#6a4c24;color:#e0bd68}.completed,.info-day{text-align:center;padding:10px 0}.check{width:42px;height:42px;margin:auto;border-radius:50%;border:1px solid var(--acid);display:grid;place-items:center;color:var(--acid);font-size:22px}.completed h2,.info-day h2{font-size:15px}.completed p,.info-day p{font-size:9px;color:#999}
.reward-box{display:flex;align-items:flex-end;gap:7px;margin:12px 0}.reward-box strong{font-size:42px;color:var(--acid);line-height:.8}.reward-box span{font-size:8px;font-weight:900}
footer{text-align:center;padding:18px 4px 6px;color:#777}footer strong{display:block;font-size:8px;color:#aaa}footer small{display:block;font-size:7px;margin-top:4px;line-height:1.4}
@media(max-width:380px){.hero-right{grid-template-columns:98px 54px}.user-box strong{font-size:13px}.hero h1{font-size:25px}.notify-toggle small{display:none}.trophy-grid{gap:6px}}


/* ===== HERO V3: name without box + circular day indicator ===== */
.hero{
  align-items:stretch;
}

.hero-right{
  display:grid;
  grid-template-columns:1fr 74px;
  grid-template-rows:1fr 22px;
  gap:6px 10px;
  min-width:190px;
}

.user-box{
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}

.user-box small{
  display:none!important;
}

.user-box strong{
  font-size:22px!important;
  line-height:.95!important;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.day-box{
  width:68px;
  height:68px;
  border:2px solid #f5f3eb;
  border-radius:50%;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center!important;
  padding:0;
  align-self:start;
  justify-self:end;
}

.day-box small{
  font-size:6px!important;
  color:#f5f3eb!important;
  margin-bottom:1px;
  letter-spacing:.12em;
}

.day-box strong{
  font-size:26px!important;
  line-height:.82!important;
  color:#b9ef00!important;
}

.day-box span{
  font-size:5.5px!important;
  color:#f5f3eb!important;
  margin-top:3px!important;
  font-weight:900;
}

.xp-pill{
  grid-column:1/3!important;
  justify-self:end!important;
  align-self:end!important;
  margin-right:2px;
}

@media(max-width:380px){
  .hero-right{
    grid-template-columns:1fr 66px;
    min-width:172px;
  }
  .user-box strong{
    font-size:19px!important;
  }
  .day-box{
    width:62px;
    height:62px;
  }
  .day-box strong{
    font-size:24px!important;
  }
}


/* ===== APPROVED HERO ALIGNMENT ===== */
.hero-right{
  position:relative!important;
  min-width:190px!important;
}

.user-box{
  position:absolute!important;
  left:0!important;
  top:27px!important;
  width:118px!important;
  display:block!important;
  text-align:left!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  min-height:0!important;
}

.user-box small{
  display:none!important;
}

.user-box strong{
  display:block!important;
  font-size:22px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.day-box{
  position:absolute!important;
  right:0!important;
  top:-3px!important;
  width:68px!important;
  height:68px!important;
  border:2px solid #f5f3eb!important;
  border-radius:50%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  padding:0!important;
}

.day-box small{
  font-size:6px!important;
  color:#f5f3eb!important;
  margin-bottom:1px!important;
  letter-spacing:.12em!important;
}

.day-box strong{
  font-size:26px!important;
  line-height:.82!important;
  color:#b9ef00!important;
}

.day-box span{
  font-size:5.5px!important;
  color:#f5f3eb!important;
  margin-top:3px!important;
  font-weight:900!important;
}

.xp-pill{
  position:absolute!important;
  right:0!important;
  bottom:4px!important;
  grid-column:auto!important;
  justify-self:auto!important;
  align-self:auto!important;
}

@media(max-width:380px){
  .hero-right{min-width:172px!important;}
  .user-box{top:29px!important;width:108px!important;}
  .user-box strong{font-size:20px!important;}
  .day-box{width:62px!important;height:62px!important;}
  .day-box strong{font-size:24px!important;}
}

.care-region-note{
  margin-top:10px;
  padding:10px;
  border:1px solid #2c2c2c;
  border-radius:9px;
  background:#0b0b0b;
}
.care-region-note strong{
  display:block;
  color:#b9ef00;
  font-size:8px;
  letter-spacing:.08em;
}
.care-region-note p{
  margin:5px 0 0;
  color:#aaa;
  font-size:8px;
  line-height:1.4;
}

.install-btn{
  min-height:44px;
  padding:0 14px;
  border:1px solid #7d3cff;
  background:#12051d;
  color:#d88cff;
  font:800 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
}
.install-btn:hover{filter:brightness(1.15)}
@media (max-width:560px){
  .install-btn{padding:0 10px;font-size:10px}
}


/* ===== PWA INSTALL CARD v9 ===== */
.install-card{
  position:fixed;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:9999;
  width:min(92vw,520px);
  box-sizing:border-box;
  border:2px solid #9b4dff;
  background:rgba(8,4,14,.97);
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 34px rgba(155,77,255,.22);
  padding:18px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:14px 16px;
  align-items:center;
}
.install-card.hidden{display:none!important}
.install-icon{
  width:72px;
  height:72px;
  border-radius:18px;
  display:block;
  grid-row:1 / span 1;
  box-shadow:0 0 22px rgba(181,76,255,.28);
}
.install-copy small{
  display:block;
  color:#c989ff;
  font:800 10px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.12em;
  margin-bottom:6px;
}
.install-copy strong{
  display:block;
  color:#fff;
  font:900 18px/1.05 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.015em;
}
.install-copy p{
  margin:7px 0 0;
  color:#b8b1be;
  font:600 12px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.install-big-btn{
  grid-column:1 / -1;
  width:100%;
  min-height:58px;
  border:0;
  background:linear-gradient(135deg,#7a20ff,#c24cff);
  color:#fff;
  font:950 15px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.055em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(143,48,255,.25);
}
.install-later-btn{
  grid-column:1 / -1;
  border:0;
  background:transparent;
  color:#8e8792;
  min-height:32px;
  font:800 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.09em;
  cursor:pointer;
}
.install-close{
  position:absolute;
  right:8px;
  top:6px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#8f8795;
  font:400 28px/1 sans-serif;
  cursor:pointer;
}
@media (max-width:560px){
  .install-card{
    width:calc(100vw - 24px);
    padding:16px;
    grid-template-columns:64px 1fr;
    gap:12px 14px;
  }
  .install-icon{width:64px;height:64px;border-radius:16px}
  .install-copy strong{font-size:16px}
  .install-copy p{font-size:11px}
  .install-big-btn{min-height:60px;font-size:14px}
}

/* ===== TEXT SIZE +2 v10 =====
   Headings are intentionally unchanged. Supporting/body copy is +2px. */
.brand small{font-size:9px}
.notify-toggle small{font-size:9px}
.state-card p{font-size:12px}
.hero-left p{font-size:10px}
.user-box small,.day-box small{font-size:8px}
.day-box span{font-size:9px}
.xp-pill{font-size:10px}
.card-head small{font-size:9px}
.today-card p,.healing-card p,.support-card p,.reward-card p{font-size:11px}
.tip-line{font-size:10px}
.care-toggle small{font-size:9px}
.care-step span small{font-size:10px}
.medicine-note p{font-size:10px}
.question h3{font-size:11px}
.choice{font-size:10px}
.primary,.secondary,.whatsapp{font-size:11px}
.hint{font-size:10px}
.chip{font-size:9px}
.completed p,.info-day p{font-size:11px}
.reward-box span{font-size:10px}
footer strong{font-size:10px}
footer small{font-size:9px}
.care-region-note p{font-size:10px}
.install-copy small{font-size:12px}
.install-copy p{font-size:14px}
.install-later-btn{font-size:12px}
@media (max-width:560px){.install-copy p{font-size:13px}}


/* ===== V11 HELP / HOW TO USE ===== */
.help-btn{width:34px;height:34px;border:1px solid #333;border-radius:50%;background:#080808;color:#b44cff;font-size:16px;font-weight:900;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.help-btn:hover{border-color:#b44cff;box-shadow:0 0 14px rgba(180,76,255,.2)}
.help-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.help-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}
.help-sheet{position:relative;width:min(100%,430px);max-height:88vh;overflow:auto;background:#09080b;border:1px solid #30243a;border-radius:22px 22px 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -22px 70px rgba(0,0,0,.55)}
.help-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid #343038;border-radius:50%;background:#0c0b0f;color:#eee;font-size:22px;line-height:1;cursor:pointer}
.help-kicker{display:inline-block;color:#c066ff;border:1px solid #5b2f76;background:#170d1e;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.08em;margin-bottom:10px}
.help-sheet h2{font-size:27px;line-height:.95;margin:4px 42px 9px 0;letter-spacing:-.035em}
.help-sheet>p{font-size:11px;line-height:1.55;color:#b8b5bd;margin:0 0 14px}
.help-steps{display:grid;gap:7px;margin:10px 0 14px}
.help-steps>div{display:flex;gap:10px;padding:10px;border:1px solid #232027;border-radius:12px;background:#0c0b0e}
.help-steps b{width:28px;height:28px;border:1px solid #5b2f76;border-radius:50%;display:grid;place-items:center;color:#c066ff;font-size:9px;flex:0 0 auto}
.help-steps strong{display:block;font-size:10px;margin-bottom:3px}
.help-steps small{display:block;font-size:10px;color:#aaa6ae;line-height:1.4}
.help-reward{border:1px solid #6f3991;border-radius:15px;padding:13px;background:linear-gradient(135deg,#170c20,#0d0b10);position:relative;overflow:hidden}
.help-reward:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;top:-55px;background:rgba(180,76,255,.12);filter:blur(8px)}
.help-reward span{display:block;color:#c066ff;font-size:8px;font-weight:900;letter-spacing:.12em}
.help-reward strong{display:block;color:#c066ff;font-size:48px;line-height:.9;margin:7px 0 6px}
.help-reward p{font-size:11px;line-height:1.45;color:#eee;margin:0;max-width:320px;position:relative;z-index:1}
.help-note{font-size:9px!important;color:#77737c!important;margin:11px 2px!important}
.help-done{width:100%;border:0;border-radius:10px;padding:13px;background:#b44cff;color:#09060c;font-size:10px;font-weight:900;cursor:pointer}
body.help-open{overflow:hidden}


/* ===== V12 FINAL — ALWAYS-AVAILABLE WHATSAPP SUPPORT ===== */
.contact-card{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px 12px;
  align-items:start;
  border-color:#30243a;
  background:radial-gradient(circle at 95% 0%,rgba(180,76,255,.10),transparent 38%),#0a090c;
}
.contact-icon{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #5b2f76;color:#c066ff;background:#160d1d;
  font-size:18px;box-shadow:0 0 18px rgba(180,76,255,.10);
}
.contact-copy small{
  display:block;color:#c066ff;font-size:9px;font-weight:900;
  letter-spacing:.10em;margin:2px 0 5px;
}
.contact-copy h2{margin:0 0 6px;font-size:16px;line-height:1.05}
.contact-copy p{margin:0;color:#aaa6ae;font-size:11px;line-height:1.5}
.contact-whatsapp{
  grid-column:1 / -1;margin-top:2px;background:#b44cff;color:#09060c;
  box-shadow:0 8px 26px rgba(180,76,255,.12);
}
.support-card{
  border-color:#5d4322;
  background:radial-gradient(circle at 100% 0%,rgba(224,189,104,.08),transparent 35%),#0b0a09;
}
@media (max-width:560px){
  .contact-copy p{font-size:12px}
  .contact-copy small{font-size:10px}
  .contact-whatsapp{min-height:48px;display:grid;place-items:center}
}

/* ===== V12.1 WHATSAPP GREEN FIX ===== */
.whatsapp,
.contact-whatsapp{
  background:#25D366 !important;
  color:#07150c !important;
  border-color:#25D366 !important;
  box-shadow:0 8px 26px rgba(37,211,102,.16) !important;
}
.whatsapp:hover,
.contact-whatsapp:hover{
  filter:brightness(1.04);
}