/* v3.1 brighter and cleaner UI */
:root{
  --bg:#0f172b;
  --panel:rgba(25,35,63,.78);
  --panel-strong:rgba(29,40,72,.94);
  --border:rgba(255,255,255,.14);
  --muted:#c4cee7;
  --text:#f7faff;
  --shadow:0 18px 48px rgba(3,8,20,.30);
}
body{
  background:
    radial-gradient(circle at 8% 0%, rgba(80,110,220,.28) 0, transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(123,68,209,.22) 0, transparent 28%),
    linear-gradient(180deg, #101a31 0%, #0f172b 48%, #101828 100%);
}
.ambient{opacity:.24;filter:blur(120px)}
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
}
.topbar,
.sidebar{
  background:linear-gradient(180deg, rgba(17,24,44,.92), rgba(20,29,52,.85));
}
.topbar{padding:0 24px;height:74px}
.app-body{gap:18px;padding:18px}
.brand-lockup strong{font-size:18px}
.brand-lockup span{font-size:11px;color:#c7d2fe}
.language-quick-select,.streak-pill,.api-pill{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}
.sidebar nav{gap:8px}
.sidebar nav button{
  padding:14px 15px;
  font-size:14px;
  font-weight:700;
  color:#d8e1f7;
}
.sidebar nav button.active{
  background:linear-gradient(135deg, rgba(139,92,246,.32), rgba(56,189,248,.16));
  border-color:rgba(196,181,253,.38);
  box-shadow:0 10px 24px rgba(79,70,229,.18);
}
.sidebar-tip{background:rgba(255,255,255,.06)}
.sidebar-tip p{font-size:12px}
.section-heading h1{letter-spacing:-.03em}
.section-heading p,
.hero-panel p,
.dashboard-review-banner p,
.review-hero p,
.review-card p,
.topic-copy p,
.methodology-title p,
.skill-method-copy p,
.skill-summary-main p,
.skill-unit-title p,
.skill-audio-preview small,
.skill-lesson-list>button small,
.skill-topic-link span,
.skill-topic-link b,
.skill-bridge-actions span,
.coach-result-hero p,
.coach-day-focus p,
.coach-day-list li,
.teaching-guide li,
.mastery-advice span,
.learning-cycle-copy small,
.topic-phase>p,
.topic-pattern span,
.topic-step-copy p,
.lesson-note p,
.reader-title p,
.story-list small,
.sentence-translation,
.voice-hint,
.voice-card p,
.empty-state p,
.settings-help,
.provider-meta,
.provider-name-v22 small,
.dashboard-ai-plan p{
  font-size:13px !important;
  line-height:1.65 !important;
}
.eyebrow{font-size:11px}
.primary-button,.secondary-button,.ghost-button{font-size:14px}
.primary-button,.secondary-button{padding:12px 18px}
.level-tabs{gap:8px}
.level-tabs button,
.mini-level-tabs button{
  min-width:112px;
  padding:11px 12px;
  border-radius:13px;
}
.level-tabs button b,
.mini-level-tabs button b,
.level-tabs button strong{font-size:14px}
.level-tabs button small,.mini-level-tabs button small{font-size:11px}
.skill-method-map,
.lesson-context-map,
.methodology-panel,
.dashboard-cycle-panel,
.topic-journey,
.skill-summary-main,
.skill-mini-stat,
.skill-unit-card,
.course-overview,
.unit-card,
.review-card,
.coach-card,
.story-list,
.reader-paper,
.voice-layout article,
.kanji-card,
.settings-panel,
.provider-card-v22,
.settings-modal-wide{
  border-radius:22px;
}
.skill-method-map{padding:20px}
.skill-method-copy h2{font-size:24px}
.skill-summary-main h2{font-size:28px}
.skill-summary-main p{font-size:13px !important}
.skill-mini-stat b{font-size:26px}
.skill-mini-stat span{font-size:12px}
.skill-unit-grid{gap:18px}
.skill-unit-card{padding:20px;gap:14px}
.skill-unit-number{font-size:11px}
.skill-unit-badge{font-size:10px;padding:6px 9px}
.skill-unit-title{grid-template-columns:52px 1fr}
.skill-unit-title>span{width:50px;height:50px;border-radius:16px}
.skill-unit-title h2{font-size:20px}
.skill-focus-box{padding:13px 14px;border-radius:15px;background:rgba(255,255,255,.045)}
.skill-focus-box small{font-size:10px}
.skill-focus-box b{font-size:14px}
.skill-topic-link{padding:10px 12px;border-radius:0 12px 12px 0}
.skill-topic-link span{font-size:10px !important}
.skill-topic-link b{font-size:12px !important}
.skill-audio-preview{padding:12px 13px;border-radius:15px}
.skill-audio-preview b{font-size:13px}
.skill-audio-preview small{font-size:12px !important}
.skill-lesson-list{gap:9px}
.skill-lesson-list>button{
  padding:12px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  grid-template-columns:34px 1fr 20px;
}
.skill-lesson-list>button b{font-size:13px}
.skill-lesson-list>button small{font-size:11px !important}
.skill-lesson-list>button>span{width:32px;height:32px;border-radius:10px}
.skill-roleplay-link{padding:12px 13px;font-size:12px;border-radius:14px}
.learning-cycle-item{background:rgba(255,255,255,.045);min-height:112px}
.learning-cycle-copy b{font-size:11px}
.learning-cycle-copy small{font-size:12px !important}
.learning-cycle.compact .learning-cycle-item{min-height:78px;padding:10px 8px}
.learning-cycle.compact .learning-cycle-copy b{font-size:11px}
.dashboard-ai-plan,
.dashboard-review-banner,
.teaching-guide,
.mastery-advice{
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}
.course-overview h2,.topic-copy h2,.reader-title h2{font-size:28px}
.unit-heading h2{font-size:18px}
.unit-heading p,.lesson-list button small,.sentence-reading,.sentence-translation,.story-list small{font-size:12px !important}
.lesson-list button b,.reader-title span,.story-list b{font-size:13px}
.reader-layout{gap:18px}
.reader-paper,.story-list{padding:18px}
.sentence-block{padding:14px 0}
.interactive-sentence button,
.interactive-sentence span,
.sentence-translation{font-size:15px}
.sentence-reading{margin-top:6px}
.modal-title,
.settings-fixed-head h2{font-size:28px}
.settings-fixed-head p,
.settings-status-inline,
.provider-name-v22 small,
.provider-card-v22 p{font-size:13px !important}
.settings-tabs>button{font-size:13px;padding:12px 14px}
.input, input, select, textarea{font-size:14px}
@media (max-width: 900px){
  .app-body{padding:14px;gap:14px}
  .skill-summary-grid{grid-template-columns:1fr}
  .skill-mini-stat{min-height:88px}
  .skill-method-map{padding:16px}
  .skill-unit-card{padding:16px}
}
@media (max-width: 600px){
  .topbar{padding:0 12px;height:70px}
  .section-heading p,
  .skill-unit-title p,
  .skill-lesson-list>button small,
  .story-list small,
  .sentence-translation,
  .reader-title p{font-size:12px !important}
  .skill-method-copy h2{font-size:20px}
  .skill-summary-main h2{font-size:24px}
  .skill-unit-title h2{font-size:18px}
  .skill-bridge-actions b{font-size:12px}
}