:root{
  --bg:#0b1220; --bg2:#0e1830; --card:#0f1b33; --line:rgba(255,255,255,.10);
  --text:#e7eefc; --muted:rgba(231,238,252,.72);
  --accent:#2ee59d; --danger:#ff6b6b; --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Hebrew", "Heebo";
}
body.theme-light{
  --bg:#f5f7fb; --bg2:#ffffff; --card:#ffffff; --line:rgba(12,20,40,.12);
  --text:#0c1428; --muted:rgba(12,20,40,.70); --shadow:0 14px 40px rgba(16,24,40,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(99,179,255,.18), transparent 60%),
              radial-gradient(900px 550px at 90% 0%, rgba(46,229,157,.16), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}
.skip{ position:absolute; inset:auto auto auto -9999px; }
.skip:focus{ inset:16px auto auto 16px; background:var(--card); border:1px solid var(--line);
  padding:10px 12px; border-radius:12px; z-index:9999; }
.topbar{
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 16px; background: rgba(10,16,28,.72); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
body.theme-light .topbar{ background: rgba(255,255,255,.72); }
.brand{display:flex; align-items:center; gap:12px}
.logo{width:44px; height:44px; display:grid; place-items:center; border-radius:14px;
  background: linear-gradient(135deg, rgba(99,179,255,.22), rgba(46,229,157,.18));
  border:1px solid var(--line); box-shadow:var(--shadow); font-size:22px;}
.brand-title{font-weight:900}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  background: rgba(46,229,157,.14); font-weight:900; font-size:12px; margin-inline-start:6px;}
.top-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pill{display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid var(--line);}
body.theme-light .pill{ background: rgba(12,20,40,.04); }
.btn{
  border:1px solid var(--line); background: rgba(255,255,255,.06); color:var(--text);
  padding:10px 12px; border-radius:14px; cursor:pointer; font-weight:800;
}
.btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0px); }
.btn.primary{ background: linear-gradient(135deg, rgba(46,229,157,.25), rgba(99,179,255,.18));
  border-color: rgba(46,229,157,.35); }
.btn.ghost{ background: transparent; }
.select{ background: transparent; color:var(--text); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; font-weight:800; }
.select.tiny{ padding:8px 10px; }
.tiny{font-size:12px} .muted{color:var(--muted)}
.hide-sm{display:inline} @media(max-width:820px){ .hide-sm{display:none} }
.tabs{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.03); overflow:auto; }
.tab{white-space:nowrap; border:1px solid var(--line); background:transparent; color:var(--text);
  padding:10px 12px; border-radius:999px; cursor:pointer; font-weight:900;}
.tab.active{ background: rgba(99,179,255,.18); border-color: rgba(99,179,255,.35); }
.container{ max-width:1200px; margin:0 auto; padding:18px 14px 40px; }
.view-head{ margin:10px 4px 14px; } .view-head h2{ margin:0 0 6px; }
.lead{ color:var(--muted); line-height:1.6 }
.card{ background: rgba(255,255,255,.06); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px;}
body.theme-light .card{ background: rgba(255,255,255,.9); }
.card-title{ font-weight:950; margin:0 0 8px; }
.divider{ height:1px; background:var(--line); margin:12px 0; }
.hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start; }
@media(max-width:980px){ .hero{ grid-template-columns:1fr; } }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
.stat{ background: rgba(255,255,255,.06); border:1px solid var(--line); border-radius:16px; padding:12px; text-align:center;}
.num{ font-size:26px; font-weight:950; } .lbl{ font-size:12px; color:var(--muted); margin-top:4px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .space-between{ justify-content:space-between; }
.list{ margin:8px 0 0; padding:0 18px 0 0; line-height:1.7; }
.layout{ display:grid; grid-template-columns:360px 1fr; gap:14px; }
@media(max-width:980px){ .layout{ grid-template-columns:1fr; } }
.sidebar{ display:flex; flex-direction:column; gap:10px; }
.search{ width:100%; padding:12px; border-radius:14px; border:1px solid var(--line);
  background: rgba(255,255,255,.06); color:var(--text); font-weight:800; }
.lesson-list{ display:flex; flex-direction:column; gap:10px; }
.lesson-item{ padding:12px; border-radius:16px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); cursor:pointer; }
.lesson-item:hover{ transform: translateY(-1px); }
.lesson-item.active{ border-color: rgba(46,229,157,.35); background: rgba(46,229,157,.10); }
.lesson-item .t{ font-weight:950; } .lesson-item .d{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5;}
.tagrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag{ font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.05); }
.prompt{ padding:12px; border-radius:16px; border:1px dashed rgba(99,179,255,.35);
  background: rgba(99,179,255,.10); line-height:1.7; }
.feedback{ margin-top:10px; font-weight:900; } .ok{ color:var(--accent);} .bad{ color:var(--danger);}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:980px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.vocab-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px; align-items:center; }
.flashwrap{ display:grid; grid-template-columns:1fr 360px; gap:14px; align-items:start; }
@media(max-width:980px){ .flashwrap{ grid-template-columns:1fr; } }
.flash{ padding:20px; min-height:220px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center;}
.flash-word{ font-size:38px; font-weight:950; line-height:1.2; }
.progress{ height:10px; background: rgba(255,255,255,.10); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.progress-bar{ height:100%; background: linear-gradient(90deg, rgba(46,229,157,.8), rgba(99,179,255,.8)); width:0%; }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.kpi{ text-align:center; padding:10px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.05); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.05); font-size:12px; font-weight:900; }
.spark{ margin:8px 0 0; padding:10px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); overflow:auto; }
.footer{ padding:18px 14px; border-top:1px solid var(--line); text-align:center; background: rgba(255,255,255,.02); }
.a11y-panel{ padding:10px 14px; } .toggle{ display:flex; gap:10px; align-items:center; font-weight:900; }
body.big-text{ font-size:18px; }
body.high-contrast{ --line: rgba(255,255,255,.22); --muted: rgba(231,238,252,.9); }
body.theme-light.high-contrast{ --line: rgba(12,20,40,.26); --muted: rgba(12,20,40,.92); }
body.reduce-motion *{ transition:none !important; animation:none !important; }

.badlike{ border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10); }
.placement .q{ padding:12px; border:1px solid var(--line); border-radius:16px; background: rgba(255,255,255,.04); margin-bottom:12px; }
.placement .q h4{ margin:0 0 10px; }
.opt{ display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.03); cursor:pointer; margin-top:8px;}
.opt input{ margin-top:2px; }
.opt:hover{ transform: translateY(-1px); }
kbd{ border:1px solid var(--line); padding:2px 6px; border-radius:8px; background: rgba(255,255,255,.06); }
.hl{ background: rgba(46,229,157,.18); border:1px solid rgba(46,229,157,.28); padding:0 4px; border-radius:6px; }
.tooltip{ position:fixed; z-index:9999; padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  background: rgba(10,16,28,.92); color: var(--text); box-shadow: var(--shadow); max-width: 320px;}
body.theme-light .tooltip{ background: rgba(255,255,255,.96); }

.tabbar{ display:flex; flex-wrap:wrap; gap:8px; padding:10px; border-bottom:1px solid var(--line); background: rgba(255,255,255,.03); position:sticky; top:0; z-index:20;}
.tabbar button{ border:1px solid var(--line); background: rgba(255,255,255,.04); color:var(--text); padding:8px 10px; border-radius:12px; font-weight:900; cursor:pointer;}
.tabbar button.active{ border-color: rgba(46,229,157,.4); background: rgba(46,229,157,.12); }
.view{ display:none; }
.view.active{ display:block; }
.opt{ display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.03); cursor:pointer; margin-top:8px;}
.tooltip{ position:fixed; z-index:9999; padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  background: rgba(10,16,28,.92); color: var(--text); box-shadow: var(--shadow); max-width: 340px;}
body.theme-light .tooltip{ background: rgba(255,255,255,.96); }
.badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge-card{ width: 200px; border:1px solid var(--line); border-radius:16px; padding:10px; background: rgba(255,255,255,.04); cursor:pointer;}
.badge-card.locked{ opacity:.55; }
.badge-top{ display:flex; gap:10px; align-items:center; }
.badge-ico{ font-size:22px; width:34px; height:34px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.06); }
.badge-name{ font-weight:900; }
.badge-desc{ margin-top:8px; font-size:12px; color: var(--muted); line-height:1.35; }

.chat{ display:flex; flex-direction:column; gap:10px; min-height: 240px; }
.bubble{ max-width: 92%; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.bubble.bot{ align-self:flex-start; }
.bubble.you{ align-self:flex-end; background: rgba(46,229,157,.10); border-color: rgba(46,229,157,.28); }
.score{ font-weight:900; font-size:18px; padding:8px 12px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.diff{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.5; }
.diff ins{ background: rgba(46,229,157,.18); text-decoration:none; padding:2px 4px; border-radius:8px; }
.diff del{ background: rgba(255,107,107,.18); text-decoration:line-through; padding:2px 4px; border-radius:8px; }

.chat{ display:flex; flex-direction:column; gap:10px; min-height: 260px; max-height: 420px; overflow:auto; padding-inline-end:6px; }
.bubble{ max-width: 92%; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.bubble.bot{ align-self:flex-start; }
.bubble.you{ align-self:flex-end; background: rgba(46,229,157,.10); border-color: rgba(46,229,157,.28); }
.score{ font-weight:900; font-size:18px; padding:8px 12px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.shop-item{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:12px; border:1px solid var(--line); border-radius:16px; background: rgba(255,255,255,.03); margin-bottom:10px; }
.shop-left{ flex:1; }
.shop-name{ font-weight:900; }
.shop-desc{ color: var(--muted); font-size:12px; margin-top:4px; line-height:1.5; }
.shop-cost{ font-weight:900; }

#shRate{ width:100%; margin-top:8px; }


/* --- v4 UX additions --- */
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:800;
}
body.theme-light .input{ background: rgba(12,20,40,.03); }

.modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:grid; place-items:center;
  z-index:9999;
  padding:18px;
}
.modal.hidden{ display:none; }
.modal-card{ width:min(860px, 96vw); max-height:88vh; overflow:auto; }

#toastHost{
  position:fixed; bottom:14px; inset-inline-start:14px;
  display:flex; flex-direction:column; gap:10px;
  z-index:99999;
}
.toast{
  background: rgba(15,27,51,.92);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:12px 14px;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  min-width:280px;
}
body.theme-light .toast{ background: rgba(255,255,255,.92); }
.toast .msg{ font-weight:900; }
.kbd{
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  font-size:12px;
}