/* ============================================================
   ¡Vamos! — оболочка приложения
   Палитра тёмно-фиолетовая с оранжевым акцентом. Переменные курса
   переопределяются здесь же, поэтому содержимое уроков подхватывает
   новые цвета само, без единой правки в app.css.
   ============================================================ */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  /* --- собственные цвета оболочки --- */
  --v-bg:#150E2B;
  --v-bg-2:#1E1440;
  --v-card:#251A4A;
  --v-card-2:#2E2159;
  --v-line:#3A2B6B;
  --v-ink:#FFFFFF;
  --v-muted:#A99CD0;
  --v-naranja:#FF7A1A;
  --v-naranja-2:#FF9F45;
  --v-rosa:#FF4D6D;
  --v-verde:#3ECF8E;
  --v-oro:#FFC83D;
  --v-violeta:#8B5CF6;

  /* --- те же цвета, но под именами курса: так весь урок перекрашивается --- */
  --bg:var(--v-bg); --surface:var(--v-card); --surface-2:var(--v-card-2);
  --ink:var(--v-ink); --muted:var(--v-muted);
  --line:var(--v-line); --line-strong:#4A3980;
  --accent:var(--v-naranja); --accent-ink:#1A1030; --accent-text:var(--v-naranja-2);
  --accent-soft:rgba(255,122,26,.14); --accent-line:rgba(255,122,26,.34);
  --tierra:var(--v-oro); --tierra-text:#FFD873; --tierra-soft:rgba(255,200,61,.18);
  --azafran:var(--v-oro); --azafran-soft:rgba(255,200,61,.26);
  --good:var(--v-verde); --good-soft:rgba(62,207,142,.16);
  --bad:var(--v-rosa); --bad-soft:rgba(255,77,109,.16);
  --flag-grad:linear-gradient(90deg, var(--v-naranja), var(--v-rosa));
  --shadow:0 2px 4px rgba(0,0,0,.30), 0 16px 38px -22px rgba(0,0,0,.9);
  --shadow-lift:0 4px 10px rgba(0,0,0,.36), 0 24px 48px -24px rgba(0,0,0,.95);
}

body {
  background:
    radial-gradient(120% 70% at 50% -10%, #2B1A5C 0%, transparent 60%),
    var(--v-bg);
  min-height:100dvh;
}
/* фоновые флаги из курса на этом экране лишние */
body::before, body::after, :root::after { display:none !important; }

/* ---------- каркас ---------- */
.app { max-width:560px; margin:0 auto; padding:0 16px 108px; position:relative; z-index:1; }

.app-top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:14px 16px 12px; max-width:560px; margin:0 auto;
  background:linear-gradient(to bottom, var(--v-bg) 70%, transparent); }
.app-top .at-x { background:none; border:none; color:var(--v-muted); font-size:1.5rem;
  cursor:pointer; line-height:1; padding:4px 6px; }
.app-top .at-bar { flex:1; height:10px; border-radius:99px; background:var(--v-card);
  overflow:hidden; border:1px solid var(--v-line); }
.app-top .at-bar i { display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--v-naranja), var(--v-rosa));
  transition:width .4s cubic-bezier(.2,.7,.2,1); }
.app-top .at-cnt { font-size:.84rem; font-weight:800; color:var(--v-muted); white-space:nowrap; }

/* ---------- значки сверху ---------- */
.v-chips { display:flex; gap:10px; padding:6px 0 18px; }
.v-chip { display:flex; align-items:center; gap:7px; background:var(--v-card);
  border:1px solid var(--v-line); border-radius:999px; padding:8px 14px;
  font-weight:800; font-size:.95rem; }
.v-chip b { font-family:var(--round); font-size:1.05rem; }
.v-chip.fuego b { color:var(--v-naranja-2); }
.v-chip.oro b { color:var(--v-oro); }

/* ---------- карточки экранов ---------- */
.v-card { background:var(--v-card); border:1px solid var(--v-line);
  border-radius:22px; padding:20px; box-shadow:var(--shadow); }
.v-card + .v-card { margin-top:14px; }

.v-hero { text-align:center; padding:8px 0 4px; }
.v-hero h1 { font-family:var(--round); font-size:2rem; line-height:1.15; margin:0 0 10px; }
.v-hero h1 em { font-style:normal; color:var(--v-naranja-2); }
.v-hero p { color:var(--v-muted); margin:0; }

.v-btn { display:block; width:100%; border:none; cursor:pointer; text-align:center;
  font-family:var(--sans); font-weight:800; font-size:1.05rem; color:#231338;
  background:linear-gradient(90deg, var(--v-naranja), var(--v-naranja-2));
  border-radius:999px; padding:16px 22px; text-decoration:none;
  box-shadow:0 8px 24px -10px var(--v-naranja); transition:.15s; }
.v-btn:hover { transform:translateY(-2px); }
.v-btn.fantasma { background:none; border:2px solid var(--v-line); color:var(--v-ink);
  box-shadow:none; }

/* ---------- нижнее меню ---------- */
.v-nav { position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-around; align-items:stretch;
  background:color-mix(in srgb, var(--v-bg-2) 92%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--v-line);
  padding-bottom:env(safe-area-inset-bottom, 0px); }
.v-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px 8px; text-decoration:none; color:var(--v-muted);
  font-size:.72rem; font-weight:800; }
.v-nav a svg { width:24px; height:24px; fill:currentColor; }
.v-nav a.on { color:var(--v-naranja-2); }

/* ---------- карта пути ---------- */
.v-bloque { margin:26px 0 8px; display:flex; align-items:center; gap:10px; }
.v-bloque b { font-family:var(--round); font-size:1.1rem; }
.v-bloque span { margin-left:auto; font-size:.82rem; color:var(--v-muted); font-weight:800; }
.v-ruta { display:flex; flex-direction:column; gap:6px; padding:6px 0 10px; }
.v-nodo { display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--v-card); border:1px solid var(--v-line); border-radius:20px;
  padding:14px 16px; color:var(--v-ink); transition:.15s; }
.v-nodo:hover { transform:translateY(-2px); border-color:var(--v-naranja); }
.v-nodo .nd-ic { width:46px; height:46px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:var(--v-card-2); border:2px solid var(--v-line); }
.v-nodo .nd-t { font-weight:800; }
.v-nodo .nd-s { font-size:.8rem; color:var(--v-muted); }
.v-nodo.hecho .nd-ic { background:var(--v-verde); border-color:var(--v-verde); color:#10281E; }
.v-nodo.ahora { border-color:var(--v-naranja); box-shadow:0 0 0 3px rgba(255,122,26,.16); }
.v-nodo.ahora .nd-ic { background:linear-gradient(135deg, var(--v-naranja), var(--v-rosa));
  border-color:transparent; color:#fff; }
.v-nodo.tarea .nd-ic { background:var(--v-violeta); border-color:var(--v-violeta); color:#fff; }
.v-nodo.cerrado { opacity:.5; pointer-events:none; }
/* смещение «змейкой» */
.v-ruta .v-nodo:nth-child(odd) { margin-right:26px; }
.v-ruta .v-nodo:nth-child(even) { margin-left:26px; }

/* ---------- титул урока ---------- */
.v-lec-tag { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--v-naranja-2); font-weight:800; margin:0 0 8px; }
.v-lec-h { font-family:var(--round); font-size:1.9rem; line-height:1.15; margin:0 0 12px; }
.v-lec-s { color:var(--v-muted); margin:0 0 20px; }
.v-lista { list-style:none; padding:0; margin:0 0 20px; }
.v-lista li { display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--v-line); }
.v-lista li:last-child { border-bottom:none; }
.v-lista .li-ic { width:26px; height:26px; flex:none; border-radius:50%;
  border:2px solid var(--v-line); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--v-muted); }
.v-lista li.si .li-ic { background:var(--v-verde); border-color:var(--v-verde); color:#10281E; }
.v-lista .li-t { font-weight:700; }
.v-lista .li-s { font-size:.8rem; color:var(--v-muted); }

/* ---------- профиль ---------- */
.v-perfil { display:flex; align-items:center; gap:14px; }
.v-ava { width:60px; height:60px; border-radius:20px; flex:none;
  background:linear-gradient(135deg, var(--v-naranja), var(--v-rosa));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--round); font-size:1.7rem; font-weight:700; color:#fff; }
.v-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.v-num { background:var(--v-card-2); border:1px solid var(--v-line); border-radius:16px;
  padding:12px; text-align:center; }
.v-num b { display:block; font-family:var(--round); font-size:1.5rem; }
.v-num span { font-size:.74rem; color:var(--v-muted); font-weight:700; }
.v-semana { display:flex; align-items:flex-end; gap:8px; height:96px; margin-top:8px; }
.v-dia { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.v-dia i { display:block; width:100%; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, var(--v-naranja), var(--v-rosa)); margin-top:auto; }
.v-dia span { font-size:.7rem; color:var(--v-muted); font-weight:800; }

/* ---------- маскот ---------- */
.v-caracol { display:block; margin:0 auto; width:clamp(120px, 42vw, 190px); }
.v-caracol img, .v-caracol svg { width:100%; height:auto; display:block; }

/* ---------- мелочи ---------- */
.v-sec { margin:22px 0 8px; font-family:var(--round); font-size:1.15rem; }
.v-nota { color:var(--v-muted); font-size:.88rem; }
.app .wrap { max-width:none; padding:0; }
.app .topbar { display:none; }
.app .hero { padding:6px 0 10px; }
.app .footnav { display:none; }
.app .vocab-btn { display:none; }
body.pasos-on .v-nav { display:none; }

/* ============================================================
   ПЛОТНОСТЬ УРОКА В ПРИЛОЖЕНИИ
   На отдельной странице урок читается как статья, и там крупный
   кегль уместен. В приложении та же вёрстка выглядела грубо:
   отступы вкладывались втрое — экран шага, карточка раздела и
   карточка примера. Здесь ужимаем только внутри оболочки, файл
   app.css не трогаем, поэтому отдельные страницы уроков остались
   прежними.
   ============================================================ */
.app { font-size:16.5px; line-height:1.55; }
.app h1 { font-size:1.68rem; line-height:1.16; margin:0 0 10px; }
.app h2 { font-size:1.34rem; }
.app h3 { font-size:1.12rem; margin:18px 0 7px; }
.app .lede { font-size:1rem; margin-bottom:14px; }
.app .sec-note { font-size:.94rem; margin-bottom:12px; }
.app section { margin-top:26px; scroll-margin-top:60px; }
.app .sec-head { gap:9px; margin-bottom:7px; }
.app .sec-num { font-size:.82rem; padding:4px 11px; }
.app .pills { gap:7px; }
.app .pill { padding:6px 13px; font-size:.84rem; }

.app .box, .app .prog-card, .app .perfil, .app .recall, .app .q {
  padding:14px 14px; border-radius:16px; margin:12px 0; }
.app .tbl-wrap { padding:4px 2px; margin:12px 0; border-radius:16px; }
.app .key, .app .warn, .app .bridge { padding:12px 14px; margin:12px 0; border-radius:13px; }
.app .ex { padding:12px 14px; margin-bottom:12px; border-radius:14px; }
.app .es { font-size:1.34rem; line-height:1.3; }
.app .ru { font-size:.98rem; margin-top:5px; }
.app .en { font-size:.96rem; }
.app .say { font-size:.8rem; padding:6px 13px; }

.app table.t tr { padding:9px 4px; }
.app table.t td { padding:3px 8px; gap:8px; }
.app table.t td.f, .app table.t td.e { font-size:1.16rem; }
.app table.t td.r { font-size:.94rem; }
.app table.t td::before { font-size:.64rem; line-height:1.7; }

.app .conj header { padding:10px 13px; }
.app .conj li { padding:5px 13px; }
.app .conj li b { font-size:1.1rem; }
.app .conj li i { flex-basis:66px; font-size:.88rem; }
.app .conj3 { gap:10px; }

.app .q .qt { font-size:1.06rem; }
.app .opts button { font-size:1.06rem; padding:11px 16px; }
.app .drill-cta { padding:12px 14px; margin:12px 0 4px; }
.app .dc-t { font-size:.98rem; }
.app .dc-s { font-size:.82rem; }
.app .dc-go { padding:12px 18px; font-size:.94rem; }

/* экран шага: одна карточка вместо трёх вложенных */
body.pasos-on .app .paso.on { min-height:calc(100dvh - 210px); padding:8px 0 4px; }
body.pasos-on .app .paso-in { padding:14px 12px; border-radius:16px; }

/* последняя страховка от горизонтальной прокрутки: причины починены
   в app.css, это только на случай нового длинного слова */
html, body { overflow-x:hidden; }

/* ---------- карточка «продолжить» над списком ---------- */
.v-seguir { display:flex; align-items:center; gap:12px; text-decoration:none;
  color:var(--v-ink); border-color:var(--v-naranja);
  background:linear-gradient(120deg, var(--v-card) 60%, rgba(255,122,26,.16)); }
.v-seguir-txt { flex:1; min-width:0; }
.v-seguir-h { font-family:var(--round); font-size:1.25rem; margin:2px 0 4px; line-height:1.2; }
.v-seguir .v-caracol { width:74px; flex:none; margin:0; }

/* ---------- экран победы ---------- */
.v-fin { text-align:center; padding:18px 0 8px; }
.v-fin .v-caracol { width:clamp(110px,36vw,160px); }
.v-fin-tag { font-family:var(--round); font-size:1.5rem; color:var(--v-oro);
  margin:10px 0 4px; }
.v-fin h1 { font-family:var(--round); font-size:1.5rem; margin:0 0 10px; }
.v-fin-pts { display:inline-block; background:var(--v-card); border:1px solid var(--v-line);
  border-radius:999px; padding:8px 18px; font-weight:800; color:var(--v-oro);
  margin:0 0 16px; }
.v-fin .v-nums { margin-bottom:18px; }

/* ---------- плавучая кнопка «Выучить» ---------- */
.v-flota { position:fixed; left:50%; transform:translate(-50%, 140%); bottom:74px;
  z-index:35; display:flex; flex-direction:column; align-items:center; gap:2px;
  width:min(520px, calc(100vw - 32px)); border:none; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:1rem; color:#231338;
  background:linear-gradient(90deg, var(--v-naranja), var(--v-naranja-2));
  border-radius:999px; padding:12px 20px; box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.v-flota i { font-style:normal; font-size:.76rem; font-weight:700; opacity:.75; }
.v-flota.on { transform:translate(-50%, 0); }
.v-flota.on.sube { bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }

/* ---------- словарь: вкладки и список ---------- */
.v-tabs { display:flex; gap:8px; margin:14px 0 10px; }
.v-tab { flex:1; cursor:pointer; font-family:var(--sans); font-weight:800; font-size:.86rem;
  background:var(--v-card); border:1px solid var(--v-line); color:var(--v-muted);
  border-radius:999px; padding:9px 6px; }
.v-tab b { color:var(--v-ink); }
.v-tab.on { border-color:var(--v-naranja); color:var(--v-naranja-2); }
.v-lista-p { background:var(--v-card); border:1px solid var(--v-line);
  border-radius:18px; padding:6px 12px; }

/* ---------- строки настроек в профиле ---------- */
.v-fila { display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--v-line); }
.v-fila:last-child { border-bottom:none; }
.v-fila > span:first-child { flex:1; font-size:.94rem; }
.v-fila .btn-s { flex:none; }
.v-fila input[type=range] { flex:0 0 130px; accent-color:var(--v-naranja); }

/* конец урока: кнопка «Завершить» выделяется цветом */
.pn-next.pn-fin { background:linear-gradient(90deg, var(--v-verde), #2FBF71);
  border-color:transparent; color:#0F2A1E; }