/* ============================================================
   DeutschStart — стили по макету (светлая + тёмная тема)
   ============================================================ */
:root {
  --font: "Inter", "DS Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #F4F7FB;
  --sidebar-top: #EEF5FE;
  --sidebar-bottom: #E4EEFC;
  --card: #FFFFFF;
  --card-2: #F7F9FD;
  --border: #E6ECF5;
  --border-strong: #D9E2EF;
  --text: #0F1A3D;
  --text-2: #33415E;
  --muted: #6B7A99;
  --muted-2: #8C98B3;
  --blue: #2F6BF6;
  --blue-2: #1F5BE6;
  --blue-soft: #DCEAFF;
  --blue-tint: #ECF3FF;
  --blue-text: #1E5AE6;
  --green: #3AC291;
  --green-2: #2FAE80;
  --green-soft: #E5F7EE;
  --green-text: #1E9E5A;
  --orange: #F08A24;
  --orange-soft: #FFF3E6;
  --orange-text: #D46A12;
  --red: #E0432F;
  --red-soft: #FDE5E2;
  --red-text: #C43A2A;
  --yellow-soft: #FFF6DE;
  --avatar: #7C8FB0;
  --shadow: 0 6px 20px rgba(23, 51, 105, 0.06);
  --shadow-2: 0 10px 30px rgba(23, 51, 105, 0.10);
  --radius: 20px;
  --radius-s: 14px;
  --radius-xs: 10px;
  --sidebar-w: 248px;
  --nav-h: 66px;
}
:root[data-theme="dark"] {
  --bg: #0E1422;
  --sidebar-top: #121A2C;
  --sidebar-bottom: #0F172A;
  --card: #182135;
  --card-2: #1D2740;
  --border: #263251;
  --border-strong: #31405F;
  --text: #EAF0FB;
  --text-2: #C9D3E8;
  --muted: #8C9AB8;
  --muted-2: #6F7D9C;
  --blue: #4C84FF;
  --blue-2: #3B72F0;
  --blue-soft: #22335E;
  --blue-tint: #1C2A4C;
  --blue-text: #8FB2FF;
  --green: #3AC291;
  --green-2: #33B384;
  --green-soft: #173A30;
  --green-text: #5FD8A9;
  --orange: #F3963A;
  --orange-soft: #3B2A17;
  --orange-text: #FFB566;
  --red: #E85A48;
  --red-soft: #41201E;
  --red-text: #FF8A7A;
  --yellow-soft: #3A3218;
  --avatar: #5E6F93;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.bold { font-weight: 700; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; row-gap: 8px; }
.grow { flex: 1; min-width: 0; }
.topic-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.center { text-align: center; }
.de { font-weight: 600; }
svg.ico { width: 20px; height: 20px; flex: none; }
svg.ico * { vector-effect: non-scaling-stroke; }

/* ---------- Каркас ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 22px 16px 16px;
  background: linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom));
  border-inline-end: 1px solid var(--border);
  overflow: hidden;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-weight: 800; font-size: 17px; }
.logo-flag {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(180deg, #111 0 34%, #E0262B 34% 67%, #FFCE00 67%);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.nav { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  color: var(--muted); font-weight: 500; font-size: 14.5px;
  transition: background .15s, color .15s;
}
.nav a svg { width: 20px; height: 20px; }
.nav a:hover { background: rgba(47,107,246,.08); color: var(--text-2); }
.nav a.active { background: var(--blue-soft); color: var(--blue-text); font-weight: 600; }
.sidebar-art { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; }
.sidebar-art svg { width: 100%; height: 100%; display: block; }
.mountains .m1 { fill: #D7E7FB; } .mountains .m2 { fill: #CADFF8; } .mountains .m3 { fill: #BFD6F5; } .mountains .trees { fill: #B3CDF1; }
:root[data-theme="dark"] .mountains .m1 { fill: #1A2540; } :root[data-theme="dark"] .mountains .m2 { fill: #172038; } :root[data-theme="dark"] .mountains .m3 { fill: #141C31; } :root[data-theme="dark"] .mountains .trees { fill: #10182B; }
.streak-card {
  margin-top: auto; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; box-shadow: var(--shadow);
}
.streak-card .bulb { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow-soft); display: grid; place-items: center; font-size: 18px; flex: none; }
.streak-card b { display: block; font-size: 13px; }
.streak-card span { font-size: 12px; color: var(--muted); }

.main-wrap { min-width: 0; padding: 26px 34px 40px; max-width: 1320px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.topbar h1 { font-size: 30px; font-weight: 800; line-height: 1.15; }
.topbar .subtitle { color: var(--muted); font-size: 16px; margin-top: 4px; }
.topbar .crumb { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex: none; margin-top: 2px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border); color: var(--text-2);
  box-shadow: var(--shadow); transition: transform .1s;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn.sun { color: var(--orange); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--avatar); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; position: relative; }
.avatar::after { content: ""; position: absolute; inset-inline-end: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); border: 2px solid var(--bg); }
.user-chip b { display: block; font-size: 14px; }
.user-chip span { font-size: 13px; color: var(--muted); }
.content { margin-top: 22px; outline: none; }
.page-head { margin-bottom: 20px; }

/* ---------- Карточки, кнопки ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.card.pad-s { padding: 16px 18px; }
.card-title { font-size: 17px; font-weight: 700; }
.section-title { font-size: 18px; font-weight: 700; margin: 26px 0 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-s); font-weight: 600; font-size: 15px;
  transition: transform .1s, box-shadow .15s, background .15s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(180deg, #4383FF, #2A64F0); color: #fff; box-shadow: 0 8px 18px rgba(47,107,246,.28); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(47,107,246,.36); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 24px; font-size: 16px; }
.btn-soft { background: var(--blue-tint); color: var(--blue-text); }
.btn-soft:hover { background: var(--blue-soft); }
.btn-ghost { background: var(--card-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); }
.btn-danger { background: var(--red-soft); color: var(--red-text); }
.btn-danger.solid { background: var(--red); color: #fff; }
.btn-green { background: var(--green-soft); color: var(--green-text); }
.btn-orange { background: var(--orange-soft); color: var(--orange-text); }
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.link { color: var(--blue-text); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 13px; line-height: 1.3; white-space: nowrap; max-width: 100%; }
.chip.blue { background: var(--blue-tint); color: var(--blue-text); border-color: transparent; }
.chip.green { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.chip.orange { background: var(--orange-soft); color: var(--orange-text); border-color: transparent; }
.chip.red { background: var(--red-soft); color: var(--red-text); border-color: transparent; }
.chip.num { background: var(--orange-soft); color: var(--orange-text); border-color: transparent; font-weight: 700; font-size: 14px; padding: 4px 9px; }

.bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; flex: 1; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-2), #62D3A8); transition: width .4s; }
.bar.blue > i { background: linear-gradient(90deg, var(--blue-2), #6CA0FF); }
.bar.orange > i { background: linear-gradient(90deg, var(--orange), #FFB066); }
.bar.thin { height: 8px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row .pct { font-weight: 700; min-width: 44px; text-align: end; font-size: 14px; }
.bar-row .pct.green { color: var(--green-text); } .bar-row .pct.blue { color: var(--blue-text); } .bar-row .pct.orange { color: var(--orange-text); }

.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { padding: 9px 20px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: all .15s; }
.pill:hover { border-color: var(--border-strong); }
.pill.active { background: linear-gradient(180deg, #4383FF, #2A64F0); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(47,107,246,.28); }
.pill.sm { padding: 7px 14px; font-size: 13.5px; border-radius: 10px; }

.tabs { display: flex; gap: 12px; }
.tab { flex: 1; text-align: center; padding: 12px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--border); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .15s; }
.tab.active { background: linear-gradient(180deg, #4383FF, #2A64F0); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(47,107,246,.28); }
.tab .cnt { font-weight: 500; opacity: .75; margin-inline-start: 4px; font-size: 13px; }

.input { width: 100%; padding: 15px 18px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-s); background: var(--card); color: var(--text); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,107,246,.12); }
.input::placeholder { color: var(--muted-2); }
.input-wrap { position: relative; }
.input-wrap .input { padding-inline-end: 52px; }
.input-wrap .input-ico { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.input-wrap .input-ico.btn-like { pointer-events: auto; cursor: pointer; }

/* ---------- Главная ---------- */
.home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; }
.continue-card { display: grid; grid-template-columns: 1fr 200px; grid-template-areas: "text art" "btn art"; gap: 4px 18px; overflow: hidden; align-items: start; }
.continue-card .cc-text { grid-area: text; min-width: 0; }
.continue-card .tile-art { grid-area: art; align-self: stretch; }
.continue-card > .btn { grid-area: btn; justify-self: start; margin-top: 14px; }
.continue-card .label { font-weight: 700; font-size: 16px; }
.continue-card .crumb { color: var(--muted); font-size: 14px; margin-top: 6px; }
.continue-card h2 { font-size: 28px; font-weight: 800; margin-top: 4px; overflow-wrap: break-word; }
.continue-card .sub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.continue-card .bar { margin-top: 18px; }
.continue-card .done { font-weight: 700; margin-top: 8px; font-size: 14px; }

.tile-art { border-radius: 16px; display: grid; place-items: center; font-size: 84px; min-height: 220px; background: linear-gradient(160deg, #EAF2FF, #DCE9FF 55%, #F6E9D8); }
:root[data-theme="dark"] .tile-art { background: linear-gradient(160deg, #1D2A4A, #1A2340 55%, #2B2A3A); }
.tile-art.sm { font-size: 44px; min-height: 96px; width: 96px; border-radius: 14px; }
.goal-card .label { font-weight: 700; font-size: 16px; }
.goal-card .goal-min { font-weight: 800; font-size: 20px; margin-top: 2px; }
.goal-card { display: flex; flex-direction: column; justify-content: center; }
.goal-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.goal-text { min-width: 0; }
.ring { position: relative; width: 120px; height: 120px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .track { stroke: var(--border); }
.ring .val { stroke: var(--green); transition: stroke-dashoffset .6s; }
.ring.blue .val { stroke: var(--blue); }
.ring .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.1; }
.ring .txt b { font-size: 18px; font-weight: 800; }
.ring .txt span { font-size: 12px; color: var(--muted); }
.goal-list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.goal-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.goal-list .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.goal-list .dot svg { width: 15px; height: 15px; }
.dot.green { background: var(--green-soft); color: var(--green-text); } .dot.red { background: var(--red-soft); color: var(--red-text); } .dot.blue { background: var(--blue-tint); color: var(--blue-text); } .dot.orange { background: var(--orange-soft); color: var(--orange-text); }
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.qa { border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 190px; border: 1px solid transparent; }
.qa .qa-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; }
.qa .qa-icon svg { width: 22px; height: 22px; }
.qa b { font-size: 16px; }
.qa p { color: var(--muted); font-size: 13.5px; flex: 1; }
.qa .btn { margin-top: 10px; align-self: flex-start; }
.qa.blue { background: var(--blue-tint); } .qa.blue .qa-icon { background: var(--blue-soft); color: var(--blue-text); } .qa.blue .btn { background: var(--blue-soft); color: var(--blue-text); }
.qa.orange { background: var(--orange-soft); } .qa.orange .qa-icon { background: rgba(240,138,36,.16); color: var(--orange-text); } .qa.orange .btn { background: rgba(240,138,36,.16); color: var(--orange-text); }
.qa.green { background: var(--green-soft); } .qa.green .qa-icon { background: rgba(58,194,145,.16); color: var(--green-text); } .qa.green .btn { background: rgba(58,194,145,.16); color: var(--green-text); }
.level-list { display: flex; flex-direction: column; gap: 12px; }
.level-list .lvl { display: grid; grid-template-columns: 56px 1fr 52px; align-items: center; gap: 12px; font-weight: 600; }
.level-list .lvl .name { font-weight: 800; }

/* ---------- Темы ---------- */
.topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.topic-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: block; transition: transform .15s, box-shadow .15s; }
.topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.topic-card .emoji-tile { position: absolute; inset-inline-end: 16px; top: 16px; width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; font-size: 40px; background: linear-gradient(160deg, var(--blue-tint), var(--card-2)); }
.topic-card h3 { font-size: 19px; margin-top: 10px; padding-inline-end: 90px; overflow-wrap: anywhere; hyphens: auto; }
.topic-card .ru { color: var(--muted); margin-top: 2px; padding-inline-end: 90px; }
.topic-card .cnt { color: var(--muted); font-size: 13.5px; margin-top: 12px; }
.topic-card .bar-row { margin-top: 8px; }
.topic-card.locked { opacity: .7; }
.topic-card .soon { position: absolute; inset-inline-end: 16px; bottom: 16px; }

/* ---------- Тема ---------- */
.topic-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.topic-head .bar-row { width: 320px; }
.word-list { margin-top: 20px; }
.word-row { display: grid; grid-template-columns: 44px 1.15fr 1fr 1.5fr 36px; gap: 16px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--border); }
.word-row:last-child { border-bottom: 0; }
.word-row .w-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.word-row .w-ico:hover { background: var(--blue-soft); }
.word-row .w-ico svg { width: 20px; height: 20px; }
.word-row .w-de { font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.word-row .w-ru { color: var(--muted); font-size: 14px; margin-top: 2px; }
.word-row .w-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.word-row .w-pos { color: var(--muted); font-size: 13px; margin-top: 5px; }
.word-row:hover .chip.art { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.word-row .w-ex { font-size: 14.5px; }
.word-row .w-exru { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.word-row .more { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.word-row .more:hover { background: var(--card-2); }
.word-row .lvl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-inline-end: 6px; }
.lvl-new { background: var(--muted-2); } .lvl-learn { background: var(--orange); } .lvl-know { background: var(--blue); } .lvl-done { background: var(--green); }
.section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.section-card { display: flex; flex-direction: column; gap: 8px; }
.section-card .s-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; }
.section-card b { font-size: 16px; }
.section-card p { color: var(--muted); font-size: 13.5px; }
.section-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Карточки ---------- */
.session-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.session-head .bar-row { width: 320px; }
.session-head .count { font-weight: 700; }
.fc-wrap { display: grid; grid-template-columns: 56px 1fr 56px; gap: 16px; align-items: center; margin-top: 24px; }
.fc-arrow { width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--text-2); }
.fc-arrow:disabled { opacity: .4; cursor: default; }
.flashcard { position: relative; min-height: 350px; background: var(--card); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px 36px; cursor: pointer; text-align: center; user-select: none; }
.flashcard .fc-tag { position: absolute; inset-inline-start: 20px; top: 20px; }
.flashcard .fc-word { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.flashcard .fc-word.long { font-size: 36px; }
.flashcard .fc-word.xlong { font-size: 29px; }
.flashcard .fc-hint { color: var(--muted); font-size: 17px; margin-top: 12px; }
.flashcard .fc-ru { font-size: 26px; font-weight: 600; margin-top: 12px; }
.flashcard .fc-meta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.flashcard .fc-ex { margin-top: 18px; background: var(--card-2); border-radius: 14px; padding: 12px 16px; text-align: start; width: 100%; max-width: 520px; }
.flashcard .fc-ex .de { font-weight: 600; }
.flashcard .fc-ex .ru { color: var(--muted); font-size: 14px; margin-top: 2px; }
.rate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.rate-btn { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; transition: transform .1s, filter .15s; }
.rate-btn:hover { filter: brightness(.97); }
.rate-btn:active { transform: scale(.98); }
.rate-btn svg { width: 30px; height: 30px; }
.rate-btn.no { background: var(--red-soft); color: var(--red-text); }
.rate-btn.hard { background: var(--orange-soft); color: var(--orange-text); }
.rate-btn.yes { background: var(--green-soft); color: var(--green-text); }
.rate-btn:disabled { opacity: .5; }

/* ---------- Перевод / упражнения ---------- */
.ex-card { text-align: center; padding: 28px 30px; position: relative; }
.ex-card .fc-tag { position: absolute; inset-inline-start: 20px; top: 20px; }
.ex-card .prompt { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; margin: 34px 0 26px; line-height: 1.25; overflow-wrap: anywhere; }
.ex-card .prompt.md { font-size: 24px; }
.ex-card .prompt .blank { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--blue); margin: 0 4px; vertical-align: baseline; }
.ex-card .prompt .filled { color: var(--blue-text); }
.ex-card .prompt .filled.ok { color: var(--green-text); } .ex-card .prompt .filled.bad { color: var(--red-text); text-decoration: line-through; }
.ex-card .prompt-ru { color: var(--muted); font-size: 16px; margin-top: -16px; margin-bottom: 22px; }
.ex-card .btn-block { margin-top: 16px; }
.hint-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.hint-card .h-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--yellow-soft); display: grid; place-items: center; font-size: 22px; flex: none; }
.hint-card b { color: var(--blue-text); font-size: 15px; display: block; }
.hint-card p { color: var(--text-2); font-size: 14.5px; margin-top: 2px; }
.feedback { border-radius: var(--radius-s); padding: 14px 18px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; text-align: start; }
.feedback svg { width: 20px; height: 20px; flex: none; }
.feedback.ok { background: var(--green-soft); color: var(--green-text); }
.feedback.bad { background: var(--red-soft); color: var(--red-text); }
.feedback.warn { background: var(--orange-soft); color: var(--orange-text); }
.result-box { text-align: start; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.result-box .rb { background: var(--card-2); border-radius: 12px; padding: 12px 14px; }
.result-box .rb .lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.result-box .rb .val { font-size: 16px; margin-top: 2px; }
.result-box .rb.bad .val { color: var(--red-text); }
.result-box .rb.ok .val { color: var(--green-text); font-weight: 600; }
.result-box .rb ul { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.result-box .rb li { padding-inline-start: 16px; position: relative; font-size: 14.5px; }
.result-box .rb li::before { content: "•"; position: absolute; inset-inline-start: 2px; color: var(--blue); }
.action-row { display: flex; gap: 14px; margin-top: 16px; align-items: stretch; }
.action-row .feedback { flex: 1; }
.action-row .btn { flex: none; }
.options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.options.three { grid-template-columns: repeat(3, 1fr); }
.options.two { grid-template-columns: repeat(2, 1fr); }
.option { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-s); background: var(--card); font-weight: 600; font-size: 16px; text-align: start; transition: all .15s; }
.option:hover { border-color: var(--blue); }
.option .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; display: grid; place-items: center; color: #fff; }
.option .radio svg { width: 13px; height: 13px; opacity: 0; }
.option.selected .radio svg, .option.correct .radio svg, .option.wrong .radio svg { opacity: 1; }
.option.selected { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-text); }
.option.selected .radio { background: var(--blue); border-color: var(--blue); }
.option.correct { background: var(--green-soft); border-color: var(--green); color: var(--green-text); }
.option.correct .radio { background: var(--green); border-color: var(--green); }
.option.wrong { background: var(--red-soft); border-color: var(--red); color: var(--red-text); }
.option.wrong .radio { background: var(--red); border-color: var(--red); }
.option:disabled { cursor: default; }
.build-zone { min-height: 64px; border: 2px dashed var(--border-strong); border-radius: var(--radius-s); padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; justify-content: center; }
.build-zone.empty::before { content: "Нажимай на слова, чтобы собрать предложение"; color: var(--muted-2); font-size: 14px; }
.build-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.wchip { padding: 10px 16px; border-radius: 12px; background: var(--card-2); border: 1.5px solid var(--border-strong); font-weight: 600; font-size: 16px; cursor: pointer; transition: all .12s; }
.wchip:hover { border-color: var(--blue); }
.wchip.used { opacity: .25; pointer-events: none; }
.build-zone .wchip { background: var(--blue-tint); border-color: var(--blue-soft); color: var(--blue-text); }
.build-zone.ok .wchip { background: var(--green-soft); border-color: transparent; color: var(--green-text); }
.build-zone.bad .wchip { background: var(--red-soft); border-color: transparent; color: var(--red-text); }
.ex-type { position: absolute; inset-inline-end: 20px; top: 20px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.summary-grid .tile { text-align: center; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.tile .lbl { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.tile .val { font-size: 24px; font-weight: 800; margin-top: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.tile .val .stick { width: 8px; height: 26px; border-radius: 4px; }
.stick.green { background: var(--green); } .stick.blue { background: var(--blue); } .stick.orange { background: var(--orange); } .stick.red { background: var(--red); }
.tile .val.sm { font-size: 20px; }
.wrong-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.wrong-list li { background: var(--card-2); border-radius: 12px; padding: 12px 14px; }
.wrong-list .q { font-weight: 600; }
.wrong-list .a { font-size: 14px; margin-top: 4px; }
.wrong-list .a .bad { color: var(--red-text); text-decoration: line-through; margin-inline-end: 8px; }
.wrong-list .a .good { color: var(--green-text); font-weight: 600; }

/* ---------- Грамматика ---------- */
.rule-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.rule-card > div { min-width: 0; }
.rule-card.single { grid-template-columns: 1fr; }
.rule-card h2 { font-size: 28px; font-weight: 800; }
.rule-card .sub { color: var(--muted); margin-top: 2px; }
.rule-card h4 { font-size: 17px; margin-top: 18px; }
.rule-card .txt { color: var(--text-2); margin-top: 8px; line-height: 1.6; white-space: pre-line; }
.rule-card .txt b, .example-box b { color: var(--blue-text); }
.example-box { display: flex; align-items: center; gap: 12px; background: var(--blue-tint); border-radius: 14px; padding: 12px 14px; margin-top: 12px; }
.example-box .e-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--blue); display: grid; place-items: center; flex: none; }
.example-box .e-ico svg { width: 18px; height: 18px; }
.example-box .de { font-weight: 600; font-size: 15.5px; }
.example-box .ru { color: var(--muted); font-size: 14px; margin-top: 2px; }
.gtable-wrap { background: var(--card-2); border-radius: 16px; padding: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gtable-wrap + .gtable-wrap { margin-top: 14px; }
.gtable-wrap .t-title { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.gtable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 14.5px; }
.gtable th { background: var(--card-2); font-weight: 700; padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.gtable td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); }
.gtable tr:last-child td { border-bottom: 0; }
.gtable td:first-child { text-align: start; font-weight: 600; color: var(--muted); }
.grammar-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.grammar-item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.grammar-item .g-num { width: 40px; height: 40px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-text); display: grid; place-items: center; font-weight: 800; flex: none; }
.grammar-item b { display: block; font-size: 15.5px; }
.grammar-item span { color: var(--muted); font-size: 13.5px; }
.grammar-item .done-mark { margin-inline-start: auto; color: var(--green-text); }
.exercise-card { margin-top: 20px; padding: 22px 24px; }
.exercise-card .q { font-size: 20px; font-weight: 700; margin-top: 12px; }
.exercise-card .q-ru { color: var(--muted); margin-top: 4px; font-size: 14.5px; }

/* ---------- Повторение / ошибки ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-col > .card { display: flex; flex-direction: column; }
.two-col > .card > :last-child { margin-top: auto; }
.two-col > .card > :nth-last-child(2) { margin-bottom: 18px; }
.big-num { font-size: 40px; font-weight: 800; line-height: 1; }
.mistake-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.mistake-row + .mistake-row { margin-top: 10px; }
.mistake-row .m-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mistake-row .m-ico svg { width: 20px; height: 20px; }
.mistake-row b { display: block; font-size: 15.5px; overflow-wrap: anywhere; }
.mistake-row span.sub { color: var(--muted); font-size: 13.5px; }
.mistake-row .cnt { margin-inline-start: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.due-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.due-list li:last-child { border-bottom: 0; }

/* ---------- Статистика ---------- */
.stats-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
.stats-top > .card { display: flex; flex-direction: column; }
.stats-top > .card > :last-child { margin-top: auto; }
.stats-top > .card > :nth-last-child(2) { margin-bottom: 18px; }
.stats-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stats-tiles.four { grid-template-columns: repeat(4, 1fr); }
.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 130px; margin-top: 14px; }
.chart .col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart .col i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #8DB4FF, #5A8DFF); min-height: 4px; }
.chart .col.today i { background: linear-gradient(180deg, #4383FF, #2A64F0); }
.chart .col span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.chart .col.done span::after { content: " 🔥"; }
.topic-progress li { display: grid; grid-template-columns: 34px 1fr 160px 48px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.topic-progress li:last-child { border-bottom: 0; }
.topic-progress .n { color: var(--orange-text); font-weight: 700; }
.topic-progress .name b { display: block; }
.topic-progress .name span { color: var(--muted); font-size: 13px; }

/* ---------- Поиск ---------- */
.search-result { display: flex; gap: 14px; align-items: flex-start; }
.search-result .w-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex: none; }
.search-result b.de { font-size: 17px; overflow-wrap: anywhere; }
.search-result .ru { color: var(--muted); margin-top: 2px; }
.search-result .chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.search-result .ex { margin-top: 10px; font-size: 14.5px; }
.search-result .ex .ru { font-size: 13.5px; }
.search-result .more-link { text-align: end; margin-top: 6px; }
.suggest li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.suggest li + li { margin-top: 8px; }
.suggest li:hover { border-color: var(--blue); }
.suggest .s-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--card-2); color: var(--muted); display: grid; place-items: center; flex: none; }
.suggest .s-ico svg { width: 16px; height: 16px; }
.suggest .s-sub { color: var(--muted); font-size: 13px; margin-inline-start: auto; }

/* ---------- Настройки ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.radio-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.radio-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; }
.radio-item .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.radio-item .radio svg { width: 13px; height: 13px; opacity: 0; }
.radio-item.active .radio svg { opacity: 1; }
.radio-item.active { background: var(--blue-soft); color: var(--blue-text); }
.radio-item.active .radio { background: var(--blue); border-color: var(--blue); }
.switch { width: 50px; height: 28px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(22px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row b { font-size: 15.5px; display: block; }
.setting-row span.desc { color: var(--muted); font-size: 13.5px; }
.danger-zone { background: var(--red-soft); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; color: var(--red-text); font-weight: 700; cursor: pointer; margin-top: 16px; }

/* ---------- Закрытые уровни и реклама ---------- */
.pill.locked { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pill.locked svg { width: 14px; height: 14px; }
.pill.locked.active { color: #fff; }
.topics-grid.dimmed .topic-card { opacity: .55; filter: grayscale(.4); pointer-events: none; }
.topic-card .lock-badge { position: absolute; inset-inline-end: 24px; top: 24px; width: 58px; height: 58px; border-radius: 50%; background: rgba(15,26,61,.55); color: #fff; display: grid; place-items: center; }
.topic-card .lock-badge svg { width: 24px; height: 24px; }
.lock-card { border-color: var(--orange); }
.lock-head { display: flex; gap: 14px; align-items: center; }
.lock-head h3 { font-size: 20px; }
.lock-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--orange-soft); color: var(--orange-text); display: grid; place-items: center; flex: none; }
.lock-ico svg { width: 24px; height: 24px; }
.lock-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.lock-opt { background: var(--card-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lock-opt b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.lock-opt b svg { width: 18px; height: 18px; color: var(--blue-text); }
.lock-opt p { color: var(--muted); font-size: 14px; flex: 1; }
.lock-opt .btn { align-self: flex-start; }
.level-list a.lvl.locked .name { color: var(--muted); }
.level-list a.lvl svg { width: 16px; height: 16px; color: var(--muted); margin-inline-start: auto; }
.grammar-item.locked { opacity: .6; }
.ad-modal { max-width: 460px; padding: 0; overflow: hidden; }
.ad-label { background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; }
.ad-screen { background: linear-gradient(160deg, #1E2B4D, #0F1523); color: #fff; padding: 40px 24px; text-align: center; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ad-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 26px; margin-bottom: 6px; }
.ad-title { font-size: 18px; font-weight: 700; }
.ad-sub { font-size: 13px; opacity: .7; max-width: 320px; }
.ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--card); }
.ad-timer { color: var(--muted); font-weight: 600; font-size: 14px; }
@media (max-width: 600px) { .lock-options { grid-template-columns: 1fr; } .lock-opt .btn { width: 100%; } }
/* ---------- Озвучка ---------- */
.say-btn { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); transition: transform .12s, background .15s; vertical-align: middle; }
.say-btn svg { width: 18px; height: 18px; }
.say-btn:hover { background: var(--blue-soft); }
.say-btn.lg { width: 48px; height: 48px; }
.say-btn.lg svg { width: 24px; height: 24px; }
.say-btn.sm { width: 30px; height: 30px; }
.say-btn.sm svg { width: 16px; height: 16px; }
.say-btn.xs { width: 26px; height: 26px; }
.say-btn.xs svg { width: 14px; height: 14px; }
.say-btn.speaking, [data-say].speaking { transform: scale(1.12); background: var(--blue-soft); }
.fc-word-row { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 100%; flex-wrap: wrap; }
.ex-line { display: flex; align-items: flex-start; gap: 8px; }
.ex-line > span { min-width: 0; }
.wd-head { display: flex; align-items: center; gap: 12px; padding-inline-end: 44px; }
.example-box .e-ico { cursor: pointer; }
/* ---------- Модалка, тост ---------- */
.modal-root { position: fixed; inset: 0; background: rgba(10,18,40,.45); display: grid; place-items: center; z-index: 100; padding: 20px; backdrop-filter: blur(3px); }
.modal { background: var(--card); border-radius: 22px; padding: 26px; width: min(520px, 100%); box-shadow: var(--shadow-2); max-height: 90vh; overflow: auto; }
.modal h3 { font-size: 20px; }
.modal .m-text { color: var(--text-2); margin-top: 10px; line-height: 1.55; }
.modal .m-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.modal .m-close { float: right; color: var(--muted); }
.toast-root { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-2); animation: toast-in .25s ease; display: flex; gap: 8px; align-items: center; }
.toast.xp { background: linear-gradient(180deg, #4383FF, #2A64F0); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .big { font-size: 44px; margin-bottom: 10px; }
.kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--border-strong); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.word-detail .wd-de { font-size: 30px; font-weight: 800; }
.word-detail .wd-ru { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.word-detail dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 16px 0 0; font-size: 14.5px; }
.word-detail dt { color: var(--muted); }
.word-detail dd { margin: 0; font-weight: 600; }
.bottom-nav { display: none; }

/* ---------- Ноутбук (MacBook 13–14"): чуть плотнее ---------- */
@media (max-width: 1366px) {
  .main-wrap { padding: 22px 26px 36px; }
  .topbar h1 { font-size: 27px; }
  .rule-card { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 1200px) {
  .rule-card { grid-template-columns: 1fr; }
}
@media (max-width: 1320px) {
  .home-grid { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr 220px; }
}
@media (max-height: 760px) {
  .sidebar { padding-top: 14px; }
  .logo { padding-bottom: 12px; }
  .nav a { padding: 8px 14px; font-size: 14px; }
  .sidebar-art { height: 110px; }
}
@media (max-height: 640px) {
  .sidebar-art { display: none; }
}
/* ---------- Большие экраны (iMac 24"/27", внешние мониторы) ---------- */
@media (min-width: 1700px) {
  :root { --sidebar-w: 272px; }
  body { font-size: 16px; }
  .main-wrap { max-width: 1480px; padding: 34px 48px 48px; }
  .topbar h1 { font-size: 34px; }
  .topics-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .grammar-list { grid-template-columns: repeat(3, 1fr); }
  .stats-tiles.four { grid-template-columns: repeat(4, 1fr); }
  .nav a { font-size: 15.5px; padding: 11px 16px; }
  .flashcard { min-height: 400px; }
  .flashcard .fc-word { font-size: 52px; }
  .ex-card .prompt { font-size: 32px; }
}
@media (min-width: 2200px) {
  body { font-size: 17px; }
  .main-wrap { max-width: 1680px; }
  .topics-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ---------- Мобильная версия ---------- */
@media (max-width: 1100px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
  .options { grid-template-columns: repeat(2, 1fr); }
  .stats-tiles.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main-wrap { padding: 16px 16px calc(58px + 24px + env(safe-area-inset-bottom)); }
  .topbar h1 { font-size: 24px; }
  .topbar .subtitle { font-size: 14px; }
  .user-chip b, .user-chip span { display: none; }
  .icon-btn { width: 38px; height: 38px; }
  .avatar { width: 38px; height: 38px; font-size: 15px; }
  .home-grid, .two-col, .stats-top, .settings-grid, .rule-card, .grammar-list { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr 112px; grid-template-areas: "text art" "btn btn"; gap: 10px 14px; padding: 18px; }
  .continue-card .tile-art { min-height: 112px; font-size: 52px; border-radius: 14px; align-self: start; }
  .continue-card > .btn { justify-self: stretch; width: 100%; margin-top: 6px; }
  .continue-card h2 { font-size: 24px; }
  .goal-card .label { font-size: 15px; }
  .goal-card .goal-min { font-size: 22px; }
  .goal-grid { gap: 12px; }
  .goal-grid .ring { width: 104px; height: 104px; }
  .goal-grid .ring .txt b { font-size: 16px; }
  .goal-list li { font-size: 13.5px; }
  .goal-list .dot { width: 24px; height: 24px; }
  .stats-top .card > .row { align-items: center; }
  .topics-grid { grid-template-columns: 1fr; gap: 14px; }
  .topic-head { flex-direction: column; align-items: stretch; }
  .topic-head .bar-row, .session-head .bar-row { width: 100%; }
  .session-head { flex-wrap: wrap; }
  .session-head > .row { width: 100%; }
  .session-head .count { white-space: nowrap; }
  .tabs { overflow-x: auto; }
  .tab { padding: 10px 12px; font-size: 14px; }
  .word-row { grid-template-columns: 44px 1fr 32px; grid-template-areas: "ico main more" "ico chips more" "ico ex more"; gap: 6px 12px; }
  .word-row .w-ico { grid-area: ico; } .word-row .w-main { grid-area: main; } .word-row .w-chips-wrap { grid-area: chips; } .word-row .w-ex-wrap { grid-area: ex; } .word-row .more { grid-area: more; }
  .section-grid { grid-template-columns: 1fr; }
  .fc-wrap { grid-template-columns: 1fr; }
  .fc-arrow { display: none; }
  .flashcard { min-height: 300px; padding: 52px 20px 28px; }
  .flashcard .fc-word { font-size: 34px; }
  .flashcard .fc-word.long { font-size: 27px; }
  .flashcard .fc-word.xlong { font-size: 22px; }
  .flashcard .fc-ru { font-size: 21px; }
  .row.between { flex-wrap: wrap; }
  .chip { white-space: normal; }
  .topic-actions { width: 100%; }
  .topic-actions .btn { flex: 1; }
  .main-wrap { padding-top: calc(14px + env(safe-area-inset-top)); }
  .topbar-actions { gap: 8px; }
  .card { padding: 18px; }
  .tile { padding: 14px 16px; }
  .tile .val { font-size: 21px; }
  .rule-card h2 { font-size: 23px; }
  .exercise-card .q { font-size: 18px; }
  .gtable { font-size: 13.5px; }
  .gtable th, .gtable td { padding: 8px 9px; }
  .modal { width: 100%; }
  .rate-row { gap: 10px; }
  .rate-btn { padding: 14px 8px; font-size: 14px; }
  .ex-card { padding: 22px 18px; }
  .ex-card .prompt { font-size: 24px; margin: 30px 0 20px; }
  .options { grid-template-columns: 1fr; gap: 10px; }
  .action-row { flex-direction: column; }
  .action-row .btn { width: 100%; }
  .summary-grid { grid-template-columns: 1fr; }
  .stats-tiles.four { grid-template-columns: repeat(2, 1fr); }
  .topic-progress li { grid-template-columns: 30px 1fr 48px; }
  .topic-progress li .bar-row, .topic-progress li > .bar { display: none; }
  .word-detail dl { grid-template-columns: 1fr; gap: 4px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; height: calc(58px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); z-index: 50; padding: 2px 0 calc(env(safe-area-inset-bottom) * 0.62); box-shadow: 0 -4px 16px rgba(23, 51, 105, 0.05); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; height: 100%; }
  .bottom-nav a svg { width: 27px; height: 27px; }
  .bottom-nav a.active { color: var(--blue-text); font-weight: 600; }
  .modal { padding: 20px; border-radius: 18px; }
}
@media (max-width: 600px) {
  .tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; overflow: visible; }
  .tab { padding: 10px 8px; }
  .options.three, .options.two { grid-template-columns: 1fr; }
  .rate-row { gap: 8px; }
  .rate-btn { padding: 12px 6px; font-size: 13.5px; }
  .rate-btn svg { width: 26px; height: 26px; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .summary-grid .tile { padding: 10px 6px; }
  .summary-grid .tile .val { font-size: 17px; }
  .stats-tiles { gap: 10px; }
  .stats-tiles.four { grid-template-columns: repeat(2, 1fr); }
  .chart { height: 110px; gap: 6px; }
  .level-list .lvl { grid-template-columns: 44px 1fr 44px; }
  .fc-wrap { margin-top: 16px; }
  .flashcard { min-height: 280px; padding: 52px 16px 24px; }
  .ex-card { padding: 20px 14px; }
  .ex-card .fc-tag, .ex-card .ex-type { position: static; margin: 0; margin-inline-end: 6px; margin-bottom: 6px; }
  .ex-card .prompt { font-size: 22px; margin: 12px 0 16px; }
  .flashcard .fc-tag { max-width: calc(100% - 100px); }
  .ex-card .prompt.md { font-size: 20px; }
  .wchip { padding: 9px 13px; font-size: 15px; }
  .word-row { padding: 13px 0; }
  .topic-card .emoji-tile { width: 64px; height: 64px; font-size: 34px; }
  .topic-card h3 { padding-inline-end: 78px; }
  .topic-card .ru { padding-inline-end: 78px; }
  .qa .qa-icon { width: 40px; height: 40px; }
  .section-card .btn { width: 100%; }
}
@media (max-width: 480px) {
  .pill { padding: 8px 14px; font-size: 13.5px; }
  .qa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qa { padding: 14px; min-height: 0; }
  .topbar h1 { font-size: 22px; }
}
@media print { .sidebar, .topbar-actions, .bottom-nav { display: none !important; } }

/* подсказки про клавиатуру не нужны на сенсорных экранах без клавиатуры */
@media (hover: none) and (pointer: coarse) { .kbd-hint { display: none; } }

/* ===== Письмо справа налево (арабский) =====
   Раскладка зеркалится через логические свойства (inline-start/end) и dir="rtl" на <html>.
   Немецкий текст внутри выводится в <bdi lang="de" dir="ltr"> и остаётся слева направо. */
[dir="rtl"] .ico-dir { transform: scaleX(-1); }
[dir="rtl"] .switch.on::after { transform: translateX(-22px); }
[dir="rtl"] .modal .m-close { float: left; }
[dir="rtl"] .bar > i { background: linear-gradient(270deg, var(--green-2), #62D3A8); }
[dir="rtl"] .bar.blue > i { background: linear-gradient(270deg, var(--blue-2), #6CA0FF); }
[dir="rtl"] .bar.orange > i { background: linear-gradient(270deg, var(--orange), #FFB066); }
/* арабское письмо связное: межбуквенный интервал разрывает соединения букв */
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: normal !important; }
html[lang="ar"] body { line-height: 1.55; }
/* поля для немецкого ответа всегда слева направо */
input[lang="de"], textarea[lang="de"] { direction: ltr; text-align: left; }
/* иконка в поле немецкого ответа: поле всегда слева направо, значит иконка — справа */
.input-wrap .input[lang="de"] + .input-ico { left: auto; right: 16px; }

/* iPhone с вырезом/Dynamic Island: под статус-баром (часы, батарея) — полоса цвета фона,
   чтобы при прокрутке текст уходил под неё, а не налезал на часы. На компьютерах высота 0. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 60; pointer-events: none; }