/* Minimal, clean styles */
:root{
  --bg:#0f0f10; --fg:#e8e8ea; --muted:#9aa0a6; --card:#16171a; --accent:#7aa2ff; --accent2:#68d391;
  --border:#272a30;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif; background:var(--bg); color:var(--fg);}
header{position:sticky; top:0; background:#0d0e10; border-bottom:1px solid var(--border); padding:12px 16px; z-index:10}
h1{margin:0 0 8px; font-size:20px; letter-spacing:0.3px}
nav{display:flex; gap:8px; flex-wrap:wrap}
.nav-btn{background:#1a1c22; color:var(--fg); border:1px solid var(--border); padding:8px 10px; border-radius:8px; cursor:pointer}
.nav-btn:hover{border-color:#333947}
main{padding:16px; max-width:980px; margin:0 auto}
.view{display:none}
.view.active{display:block}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.card{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px}
.card h3{margin-top:4px}
button, input, select, textarea{background:#1a1c22; color:var(--fg); border:1px solid var(--border); border-radius:8px; padding:8px}
button{cursor:pointer}
button.primary{background:var(--accent); color:#0a0b10; border:none}
button.danger{background:#2b1316; border-color:#63272c}
.muted{color:var(--muted)}
.prompt{background:var(--card); padding:12px; border:1px solid var(--border); border-radius:10px; margin:12px 0}
.prompt-actions{display:flex; gap:8px}
.skills{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px; background:var(--card); padding:12px; border:1px solid var(--border); border-radius:10px}
.rating-notes{display:grid; grid-template-columns:1fr 2fr; gap:12px; margin:12px 0}
.practice-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.timer{display:flex; align-items:center; gap:12px}
#timerDisplay{font-variant-numeric:tabular-nums; font-size:28px; padding:6px 10px; background:#121317; border:1px solid var(--border); border-radius:8px}
.practice-actions{display:flex; align-items:center; gap:12px}
#logTable{width:100%; border-collapse:collapse; margin-top:12px}
#logTable th,#logTable td{border-bottom:1px solid var(--border); padding:8px; vertical-align:top}
.list{list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px}
.list li{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px}
.list .meta{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px}
footer{padding:20px; text-align:center; color:var(--muted)}
.analytics-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:12px 0}
.stat{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center}
label{display:block; margin:6px 0}
textarea{min-height:90px; resize:vertical}
.deck-controls, .log-controls, .timer-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
dialog{background:#0e1116; border:1px solid var(--border); border-radius:10px; padding:12px; width:min(480px,90vw)}
menu{display:flex; gap:8px; justify-content:flex-end; padding:0; margin-top:12px}
@media (max-width:720px){
  .rating-notes{grid-template-columns:1fr}
}