/* Dark-themed, iPhone-first styles (expanded) */
:root{
  --bg:#0b0d10;
  --card:#0f1114;
  --muted:#9aa4b2;
  --accent:#6ee7b7;
  --danger:#ff6b6b;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --gap:14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:linear-gradient(180deg,var(--bg),#060708);
  margin:0;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display:flex;
  align-items:stretch;
  justify-content:center;
  color:#e6eef6;
}

#app{width:100%;max-width:430px;padding:calc(var(--gap)*1.2);}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.topbar h1{margin:0;font-size:18px}

/* Nav grid */
.navGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.navBtn{padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(2,4,8,0.6)}
.hidden{display:none}

/* Buttons */
button{font:inherit;border:0;padding:12px 14px;border-radius:12px;cursor:pointer;background:var(--glass);color:inherit;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.primary{background:linear-gradient(90deg, rgba(110,231,183,0.12), rgba(110,231,183,0.06));box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.03)}
.icon-btn{padding:8px;border-radius:10px;font-size:18px;min-width:44px}

/* lists */
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.topicBtn{width:100%;text-align:left;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.meta{font-size:12px;color:var(--muted);margin-top:6px}

/* small utilities */
.playerHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.card.small{padding:8px}

/* flashcards */
#flashArea{min-height:160px;display:flex;align-items:center;justify-content:center;font-size:16px}

/* responsive */
@media (hover:none) and (pointer:coarse) {
  button{min-height:54px;border-radius:14px}
  .topicBtn{padding:16px}
}

/* lesson article */
#lessonContent{line-height:1.5}
#lessonContent h3{margin-top:8px}