/* Android 17 inspired Account UI (mobile-first) */
:root{
  --bg0:#07121f;
  --bg1:#0b1f33;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.10);
  --txt:rgba(255,255,255,.92);
  --mut:rgba(255,255,255,.70);
  --mut2:rgba(255,255,255,.58);
  --accent:#27e0b3;
  --accent2:#19b693;
  --danger:#ff5a6a;
  --shadow: 0 10px 30px rgba(0,0,0,.38);
  --r16:16px;
  --r20:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.acc-body{
  margin:0;
  color:var(--txt);
  font: 500 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(39,224,179,.22), transparent 55%),
    radial-gradient(900px 700px at 110% 10%, rgba(96,165,250,.16), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}
.acc-wrap{max-width:900px;margin:0 auto;padding:14px 14px 112px}
.acc-top{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:14px;
}
.acc-top-row{display:flex;align-items:center;gap:12px}
.acc-back,.acc-store{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  color:var(--txt);text-decoration:none;
}
.acc-avatar{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  border:1px solid rgba(39,224,179,.25);
  background:linear-gradient(180deg, rgba(39,224,179,.18), rgba(39,224,179,.08));
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  font-weight:900;letter-spacing:.4px;
}
.acc-top-titles{flex:1;min-width:0}
.acc-title{font-size:22px;font-weight:900;letter-spacing:.2px}
.acc-subtitle{color:var(--mut);font-size:13px;margin-top:2px;word-break:break-word}
.acc-chip{
  margin-top:10px;
  display:flex;gap:10px;flex-wrap:wrap
}
.chip{
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.10);
  color:var(--txt);
  font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;gap:8px
}
.chip .dot{width:10px;height:10px;border-radius:50%;background:rgba(39,224,179,.8);box-shadow:0 0 0 4px rgba(39,224,179,.14)}
.acc-card{
  margin-top:14px;
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
}
.acc-h2{margin:0 0 10px;font-size:18px;font-weight:900}
.acc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.acc-grid2{grid-template-columns:1fr}}
.action{
  position:relative;
  display:flex;gap:12px;align-items:center;
  padding:14px;border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  text-decoration:none;color:var(--txt);
  min-height:56px;
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
.action:active{transform:scale(.996)}
.action .ico{
  width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(0,0,0,.16)
}
.action .meta{flex:1;min-width:0}
.action .t{font-weight:900}
.action .s{color:var(--mut);font-size:13px;margin-top:2px}
.action .chev{color:var(--mut2);font-size:18px}
.acc-logout{
  border-color:rgba(255,90,106,.30);
  background:linear-gradient(180deg, rgba(255,90,106,.12), rgba(0,0,0,.10));
}
.acc-logout .ico{border-color:rgba(255,90,106,.35)}
/* Bottom nav (Android-ish) */
.navbar{
  position:fixed;left:0;right:0;bottom:0;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,18,31,.55);
  backdrop-filter: blur(14px);
  border-top:1px solid rgba(255,255,255,.10);
}
.navbar .inner{
  max-width:900px;margin:0 auto;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;padding:8px;
}
.navbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;color:var(--mut);
  border-radius:18px;
  padding:10px 8px;
  min-height:56px;
  position:relative;
}
.navbtn strong{font-size:12px;color:var(--mut);margin-top:6px}
.navbtn .i{font-size:18px;line-height:1}
.navbtn.active{
  color:var(--txt);
  background:linear-gradient(180deg, rgba(39,224,179,.18), rgba(0,0,0,.10));
  border:1px solid rgba(39,224,179,.25);
}
.badge{
  position:absolute;top:6px;right:16px;
  min-width:20px;height:20px;border-radius:999px;
  padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;
  color:#05231c;
  background:rgba(39,224,179,.95);
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.badge.is-hidden{display:none}