:root { --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#22d3ee; --card:#0b1220; --border:#1f2937; }
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,\"Helvetica Neue\",Arial; background:var(--bg); color:var(--text);}
.site-header{padding:24px 16px; text-align:center; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgb(16 36 56), var(--bg) 60%); position:sticky; top:0; z-index:1000}
.site-header h1{margin:0 0 4px 0; font-size:28px}
.site-header .tagline{margin:0; color:var(--muted)}
.site-header .back{position:absolute; left:12px; top:16px; color:var(--accent); text-decoration:none}
.container{max-width:900px; margin:24px auto; padding:0 16px}
.card-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.card{width: 100%;display:block; padding:16px; background:var(--card); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:inherit; transition:transform .08s ease, border-color .2s}
.card:hover{transform:translateY(-2px); border-color:var(--accent)}
.card h3{margin:0 0 8px 0; font-size:18px}
.card p{margin:0; color:var(--muted)}
/* Reusable score block styles (used on cards and lesson header) */
.scores{ margin-top:10px; padding-top:8px; border-top:1px solid var(--border); }
.scores-title{ font-size:12px; color:var(--muted); margin:0 0 6px 0; }
.score-line{ margin:4px 0 0 0; color:var(--text); font-size:14px; }
.score-line .badge{ display:inline-block; padding:2px 6px; margin-right:6px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); background:#0b1220; }
/* Horizontal layout for lesson header scores */
.scores-horizontal{ justify-content: center; display:flex; align-items:center; column-gap:10px; row-gap:6px; flex-wrap:wrap; }
.scores-horizontal .scores-title{ margin:0; }
.scores-horizontal .score-line{ margin:0; }
.card#lesson-blurb p, #lesson-blurb p{ margin:8px 0; }
#lesson-blurb > :first-child{ margin-top:0; }
.loading,.error{color:var(--muted)}
.status-strip{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:10px; color:var(--muted);}
.spinner{width:14px; height:14px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.site-footer{padding:24px 16px; text-align:center; color:var(--muted); border-top:1px solid var(--border)}
table.vocab{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
table.vocab th, table.vocab td{padding:12px 10px; text-align:left; border-bottom:1px solid var(--border)}
table.vocab thead th{background:rgba(34,211,238,.08)}
.table-scroll{overflow:auto; border-radius:12px}
/* Shared quiz/test styles */
.quiz-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px;}
.prompt{display:flex; align-items:center; gap:12px; font-size:18px; margin:8px 0 16px 0}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.choices button{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0b1220; color:inherit; cursor:pointer}
.choices button:hover{border-color:var(--accent)}
.choices button.correct{border-color:#16a34a; background:#052e16}
.choices button.wrong{border-color:#dc2626; background:#450a0a}
.status{color:var(--muted); margin-top:10px}
.center{display:flex; gap:10px; align-items:center}
/* Sentence builder specific */
.bank, .dropzone{display:flex; flex-wrap:wrap; gap:8px; min-height:46px; padding:10px; border:1px dashed var(--border); border-radius:10px; background:#0b1220}
.token{padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#111827; cursor:grab; user-select:none}
.token[draggable="true"]:active{cursor:grabbing}
.controls{display:flex; gap:8px; margin-top:10px}
@media (max-width:600px){
  .site-header{ padding-top:48px; }
  .site-header h1{font-size:22px}
  .card-list{grid-template-columns:1fr}
  /* Make header controls stack so they don't crowd the title */
  .site-header .back{ position:static; display:inline-block; margin:0 0 8px 0; }
  .site-header #auth-slot{ position:static !important; right:auto !important; top:auto !important; display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:8px; }
}