:root{
  --bg:#0F1A33; --bg2:#152548; --card:#1D3164; --card2:#233A73; --line:#2E4A8E;
  --ink:#ECF2FF; --muted:#9BB0DC;
  --gold:#FFC02E; --gold-d:#B8800A;
  --teal:#23C2A6; --teal-d:#12806C;
  --coral:#FF6F57; --coral-d:#B33D28;
  --violet:#8C6CF2; --violet-d:#5B41B0;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 520px at 50% -180px, #23407F 0%, transparent 70%),
    var(--bg);
  color:var(--ink); font-family:Nunito,system-ui,sans-serif; font-weight:600;
  min-height:100dvh; padding-bottom:calc(84px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.f{font-family:Fredoka,Nunito,sans-serif;font-weight:600;letter-spacing:.2px}
h1{font-size:1.5rem;margin:.2em 0 .5em}
h2{font-size:1.15rem;margin:1.4em 0 .6em;display:flex;align-items:center;gap:.45em}
a{color:inherit;text-decoration:none}
small{color:var(--muted);font-weight:600}
.wrap{max-width:640px;margin:0 auto;padding:14px 16px 20px}

/* ---------------- header ---------------- */
.top{position:sticky;top:0;z-index:20;background:rgba(15,26,51,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.top-in{max-width:640px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.who{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.lvl-badge{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(160deg,var(--card2),var(--card));border:2px solid var(--line);border-radius:14px}
.who-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.who-t b{font-family:Fredoka;font-size:1.05rem}
.who-t small{font-size:.74rem}
.wallet{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#FFD264,var(--gold));
  color:#3B2600;border-radius:999px;padding:7px 14px 8px;box-shadow:0 3px 0 var(--gold-d);flex:0 0 auto}
.wallet .star{font-size:1rem;line-height:1}
.wallet .amt{font-family:Fredoka;font-weight:600;font-size:1.1rem;line-height:1}
.xpbar{height:4px;background:#12213F}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .6s}

/* ---------------- nav ---------------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:rgba(16,28,56,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px 10px;font-size:.7rem;color:var(--muted);font-weight:700}
.tabs a span{font-size:21px;line-height:1;position:relative}
.tabs a.on{color:var(--gold)}
.tabs a.on span{transform:translateY(-2px)}
.dot{position:absolute;top:-5px;right:-11px;background:var(--coral);color:#fff;font-style:normal;
  font-size:.62rem;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* ---------------- carduri ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.card.flat{background:var(--bg2)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.tiny{font-size:.78rem}
.center{text-align:center}

/* misiune */
.quest{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--violet);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.quest.ok{border-left-color:var(--teal);opacity:.62}
.quest.wait{border-left-color:var(--coral)}
.q-ico{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;font-size:23px;
  background:var(--card2);border-radius:13px}
.q-t{flex:1;min-width:0}
.q-t b{display:block;font-family:Fredoka;font-size:1rem;font-weight:500;line-height:1.25}
.q-t small{display:block;font-size:.75rem;margin-top:1px}
.q-val{font-family:Fredoka;color:var(--gold);font-size:.95rem;white-space:nowrap}

/* butoane */
button,.btn{font-family:Fredoka;font-weight:500;font-size:1rem;border:0;cursor:pointer;
  border-radius:14px;padding:11px 18px;color:#0E1830;background:var(--gold);
  box-shadow:0 4px 0 var(--gold-d);transition:transform .06s,box-shadow .06s;display:inline-block;text-align:center}
button:active,.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--gold-d)}
.btn-go{background:var(--teal);box-shadow:0 4px 0 var(--teal-d);color:#04231D}
.btn-no{background:var(--coral);box-shadow:0 4px 0 var(--coral-d);color:#fff}
.btn-alt{background:var(--card2);box-shadow:0 4px 0 #142651;color:var(--ink)}
.btn-sm{padding:8px 13px;font-size:.88rem;border-radius:11px;box-shadow:0 3px 0 var(--gold-d)}
.btn-go.btn-sm{box-shadow:0 3px 0 var(--teal-d)}
.btn-no.btn-sm{box-shadow:0 3px 0 var(--coral-d)}
.btn-alt.btn-sm{box-shadow:0 3px 0 #142651}
.btn-wide{display:block;width:100%}
.btn[disabled],button[disabled]{opacity:.45;box-shadow:none;transform:none;cursor:default}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* formulare */
input,select,textarea{font-family:Nunito;font-weight:700;font-size:1rem;width:100%;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:11px 13px}
input:focus,select,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
label{display:block;font-size:.8rem;color:var(--muted);margin:10px 0 4px;font-weight:700}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chk{display:flex;align-items:center;gap:9px;margin:10px 0}
.chk input{width:auto;transform:scale(1.35)}

/* diverse */
.flash{background:var(--teal);color:#04231D;border-radius:14px;padding:11px 15px;margin-bottom:14px;
  font-weight:800;box-shadow:0 3px 0 var(--teal-d)}
.flash.err{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-d)}
.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:.85rem;font-weight:800;white-space:nowrap;color:var(--muted)}
.pill.on{background:var(--gold);color:#3B2600;border-color:var(--gold)}
.stat{display:flex;gap:10px;margin-bottom:14px}
.stat>div{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:11px 8px;text-align:center}
.stat b{display:block;font-family:Fredoka;font-size:1.4rem;color:var(--gold);line-height:1.1}
.stat small{font-size:.7rem}
.goal{background:linear-gradient(135deg,#2B2168,#1D3164);border:1px solid var(--violet)}
.bar{height:12px;background:#14224A;border-radius:99px;overflow:hidden;margin:9px 0 6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--gold));border-radius:99px}
.empty{text-align:center;color:var(--muted);padding:26px 10px;font-weight:700}
.empty .big{font-size:38px;display:block;margin-bottom:8px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.bdg{background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:12px 6px;text-align:center;opacity:.32}
.bdg.got{opacity:1;border-color:var(--gold);background:linear-gradient(160deg,#3A2E10,var(--card))}
.bdg span{font-size:26px;display:block}
.bdg b{font-size:.7rem;display:block;margin-top:5px;font-family:Fredoka;font-weight:500}
.led{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.led:last-child{border:0}
.led .v{font-family:Fredoka;font-size:1rem;white-space:nowrap}
.v.up{color:var(--teal)} .v.dn{color:var(--coral)}
.week{display:flex;gap:6px;align-items:flex-end;height:78px;margin:6px 0 2px}
.week div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px;text-align:center}
.week i{display:block;background:linear-gradient(180deg,var(--gold),var(--gold-d));border-radius:6px 6px 3px 3px;min-height:3px}
.week em{font-style:normal;font-size:.62rem;color:var(--muted);font-weight:800}
.hr{height:1px;background:var(--line);margin:18px 0}
.flame{color:var(--coral)}

/* login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-box{width:100%;max-width:330px;text-align:center}
.login h1{font-size:1.9rem;margin-bottom:.15em}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:18px}
.pinpad button{font-size:1.5rem;padding:16px 0;background:var(--card2);box-shadow:0 4px 0 #142651;color:var(--ink)}
.pindots{display:flex;justify-content:center;gap:12px;margin:22px 0 4px;height:18px}
.pindots i{width:15px;height:15px;border-radius:50%;background:var(--card2);border:2px solid var(--line)}
.pindots i.f{background:var(--gold);border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* scoala */
.cal{display:inline-grid;place-items:center;min-width:32px;height:26px;padding:0 7px;border-radius:9px;
  font-family:Fredoka;font-weight:600;font-size:.82rem;background:color-mix(in srgb,var(--c) 22%,transparent);
  color:var(--c);border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent)}
.cal.big{min-width:44px;height:36px;font-size:1.05rem;background:color-mix(in srgb,var(--c) 30%,transparent)}
.topic{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);margin:0;font-size:.92rem}
.topic:last-child{border:0}
.topic.l1{color:var(--teal)} .topic.l2{color:var(--gold)}
.tbox{width:27px;height:27px;flex:0 0 27px;padding:0;border-radius:9px;background:var(--bg2);
  border:2px solid var(--line);box-shadow:none;color:var(--ink);font-size:.95rem;line-height:1}
.tbox:active{transform:scale(.92);box-shadow:none}
.l1 .tbox{background:var(--teal);border-color:var(--teal);color:#04231D}
.l2 .tbox{background:var(--gold);border-color:var(--gold);color:#3B2600}
details>summary{list-style:none} details>summary::-webkit-details-marker{display:none}
details>summary::after{content:'▾';float:right;color:var(--muted);font-size:.9rem}
details[open]>summary::after{content:'▴'}
.tabs a{font-size:.66rem}

span.tbox{display:grid;place-items:center;cursor:default}
button.cal{cursor:pointer;font-family:Fredoka}
.center{text-align:center}

.pen-card{border-color:color-mix(in srgb,var(--coral) 45%,var(--line))}
.stat>div:nth-child(4){flex:0 0 auto;min-width:64px}

.heart{background:transparent;box-shadow:none;border:1.5px solid var(--line);color:var(--muted);
  width:36px;height:36px;padding:0;border-radius:11px;font-size:1.1rem;line-height:1}
.heart.on{background:color-mix(in srgb,var(--coral) 22%,transparent);border-color:var(--coral);color:var(--coral)}
.heart:active{transform:scale(.9);box-shadow:none}
a.card.goal{color:inherit}