/* ============================================================
   variant.css — Бланк ЕГЭ (интерактивный)
   Используется на /variant, /variant/{id}/play, /variant/{id}/result
   ============================================================ */

:root{
  --v-bg:        #f6f4ee;
  --v-paper:     #fff;
  --v-ink:       #1a1a1a;
  --v-muted:     #5b6470;
  --v-border:    #d9d4c5;
  --v-accent:    #3b6ea8;
  --v-accent-soft:#eaf1f9;
  --v-done:      #2f8a3e;
  --v-done-soft: #e6f5e9;
  --v-warn:      #c54141;
  --v-essay:     #9c4a96;
}
*{box-sizing:border-box}
.v-body{
  margin:0;padding:0;
  background:var(--v-bg);color:var(--v-ink);
  font-family:'PT Serif', Georgia, 'Times New Roman', serif;
  font-size:16px;line-height:1.55;min-height:100vh;
}

/* ── Шапка ──────────────────────────────────────────────── */
.v-head{
  position:sticky;top:0;z-index:50;
  background:#fff;border-bottom:2px solid var(--v-accent);
}
.v-head-row{
  max-width:1280px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:'Inter',-apple-system,sans-serif;
}
.v-head-logo{
  display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;
  flex-shrink:0;
}
.v-head-logo svg{width:26px;height:26px}
.v-head-logo b{font-weight:700;font-size:15px;color:#1e293b}
.v-head-title{
  font-weight:700;font-size:14px;line-height:1.2;flex:1;min-width:0;
}
.v-head-title small{
  display:block;font-weight:400;color:var(--v-muted);font-size:12px;margin-top:2px;
}
.v-timer{
  display:flex;align-items:center;gap:8px;
  font-variant-numeric:tabular-nums;
  font-weight:600;font-size:18px;color:var(--v-accent);
  background:var(--v-accent-soft);padding:6px 14px;border-radius:8px;
  cursor:default;user-select:none;
}
.v-timer.warn{background:#fdebec;color:var(--v-warn)}
.v-progress{
  font-size:12px;color:var(--v-muted);
  display:flex;align-items:center;gap:6px;
}
.v-progress strong{color:var(--v-ink);font-size:14px}
.v-finish,.v-btn{
  background:var(--v-accent);color:#fff;border:0;border-radius:8px;
  padding:9px 20px;font-weight:600;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s;
}
.v-finish:hover,.v-btn:hover{background:#2e5a8e}
.v-btn-outline{
  background:#fff;color:var(--v-accent);border:1px solid var(--v-accent);
}
.v-btn-outline:hover{background:var(--v-accent-soft)}

/* ── Лейаут ─────────────────────────────────────────────── */
.v-page{
  max-width:1280px;margin:0 auto;padding:24px;
  display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;
}
@media(max-width:980px){
  .v-page{grid-template-columns:1fr;padding:16px}
  .v-blank{display:none}
}
.v-page-narrow{max-width:880px;margin:0 auto;padding:24px}

/* ── «Бумага» варианта ──────────────────────────────────── */
.v-paper{
  background:var(--v-paper);
  border:1px solid var(--v-border);border-radius:4px;
  padding:32px 40px;box-shadow:0 1px 0 rgba(0,0,0,.04);
}
@media(max-width:600px){.v-paper{padding:18px}}
.v-paper h1{margin:0 0 4px;font-size:22px;font-weight:700;text-align:center}
.v-paper-sub{
  text-align:center;color:var(--v-muted);font-size:13px;margin-bottom:24px;
}
.v-paper-meta{
  border-top:1px solid var(--v-border);
  border-bottom:1px solid var(--v-border);
  padding:12px 0;margin-bottom:28px;font-size:14px;color:var(--v-muted);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}

/* Текст-стимул */
.v-stimulus{
  background:#fafaf5;border-left:3px solid var(--v-accent);
  padding:18px 22px;margin:24px 0 32px;font-style:italic;
  border-radius:0 4px 4px 0;
}
.v-stimulus-head{
  font-style:normal;font-weight:700;color:var(--v-accent);
  font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}
.v-stimulus p{margin:0 0 10px}
.v-stimulus .author{
  text-align:right;font-style:normal;color:var(--v-muted);font-size:13px;margin-top:8px;
}

/* ── Карточка задания ───────────────────────────────────── */
.v-task{
  margin:0 -8px 28px;padding:24px 8px 8px;
  display:grid;grid-template-columns:48px 1fr;gap:18px;
  scroll-margin-top:80px;
}
.v-task > div:first-child{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.v-task-num{
  width:40px;height:40px;border-radius:50%;
  background:var(--v-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;font-family:'Inter',sans-serif;
  flex-shrink:0;
}
.v-task-num--essay{background:var(--v-essay)}
.v-task.is-answered .v-task-num{background:var(--v-done)}
.v-task-body{min-width:0}

/* «📚 Теория» — иконка-ссылка под номером */
.v-task-theory{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:8px;
  font-family:'Inter',sans-serif;font-size:10px;color:var(--v-accent);
  text-decoration:none;text-align:center;line-height:1;
}
.v-task-theory:hover{color:#2e5a8e}
.v-task-theory svg{width:18px;height:18px;display:block}
.v-task-stem{margin:0 0 14px;line-height:1.55}
.v-task-stem b{font-weight:600}
.v-task-source{
  font-family:'Inter',sans-serif;font-size:11px;color:#aaa;margin-top:6px;
}

/* Варианты — чекбоксы/радио ФИПИ-стиль */
.v-opts{margin:14px 0 6px;display:flex;flex-direction:column;gap:6px}
.v-opt{
  display:flex;align-items:flex-start;gap:12px;
  padding:8px 12px;border:1px solid transparent;border-radius:6px;
  cursor:pointer;user-select:none;
  transition:background .15s,border-color .15s;
}
.v-opt:hover{background:#fafaf5}
.v-opt input{
  margin:5px 0 0;flex-shrink:0;
  accent-color:var(--v-accent);width:18px;height:18px;cursor:pointer;
}
.v-opt-label{flex:1;line-height:1.45}
.v-opt:has(input:checked){background:var(--v-accent-soft);border-color:#bcd1ec}
.v-opt:has(input:checked) .v-opt-label{font-weight:600}

/* text_input */
.v-input-row{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-family:'Inter',sans-serif;font-size:14px;flex-wrap:wrap;
}
.v-input-row label{color:var(--v-muted)}
.v-input{
  font-family:'Inter',sans-serif;font-size:16px;
  padding:8px 14px;border:1px solid var(--v-border);border-radius:6px;
  min-width:240px;background:#fafaf5;color:var(--v-ink);
}
.v-input:focus{outline:0;border-color:var(--v-accent);background:#fff}
.v-input-hint{color:var(--v-muted);font-size:12px}

/* matching */
.v-match-table{
  width:100%;border-collapse:collapse;margin-top:14px;
  font-size:14px;font-family:'Inter',sans-serif;
}
.v-match-table th,.v-match-table td{
  padding:10px 12px;border:1px solid var(--v-border);text-align:left;vertical-align:top;
}
.v-match-table th{
  background:#fafaf5;font-weight:600;color:var(--v-muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.3px;
}
.v-match-letter{
  font-weight:700;color:var(--v-accent);width:36px;text-align:center;
}
.v-match-select{
  width:100%;padding:6px 10px;border:1px solid var(--v-border);border-radius:6px;
  background:#fff;font-family:'Inter',sans-serif;font-size:14px;cursor:pointer;
}
.v-match-select:focus{outline:0;border-color:var(--v-accent)}

/* №27 — сочинение */
.v-essay-area{
  width:100%;min-height:380px;
  font-family:'PT Serif', Georgia, serif;font-size:16px;line-height:1.7;
  padding:18px 22px;border:1px solid var(--v-border);border-radius:6px;
  background:#fafaf5;resize:vertical;color:var(--v-ink);
}
.v-essay-area:focus{outline:0;border-color:var(--v-essay);background:#fff}
.v-essay-stats{
  display:flex;gap:24px;margin-top:10px;font-size:13px;color:var(--v-muted);
  font-family:'Inter',sans-serif;flex-wrap:wrap;
}
.v-essay-stats strong{color:var(--v-ink);font-weight:600}
.v-essay-stats .ok{color:var(--v-done);font-weight:600}
.v-essay-stats .warn{color:var(--v-warn);font-weight:600}

/* ── Бланк ответов № 1 ──────────────────────────────────── */
.v-blank{
  position:sticky;top:80px;
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:6px;
  padding:16px 18px;
}
.v-blank-h{
  font-size:13px;font-weight:700;color:var(--v-muted);
  text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;
  font-family:'Inter',sans-serif;
}
.v-blank-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  font-family:'Inter',sans-serif;
}
.v-blank-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--v-border);border-radius:5px;
  background:#fafaf5;font-size:13px;font-weight:600;color:var(--v-muted);
  cursor:pointer;text-decoration:none;transition:all .15s;
}
.v-blank-cell:hover{border-color:var(--v-accent);color:var(--v-accent)}
.v-blank-cell.done{background:var(--v-done-soft);border-color:#a8d4af;color:var(--v-done)}
.v-blank-cell.absent{opacity:.35;pointer-events:none}
.v-blank-27{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--v-border);
  display:flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:13px;
}
.v-blank-27 a{
  flex:1;padding:8px 12px;border:1px solid var(--v-border);border-radius:5px;
  background:#fafaf5;text-decoration:none;color:var(--v-muted);text-align:center;
}
.v-blank-27 a.done{background:#f5e9f3;border-color:#d3a8d0;color:var(--v-essay)}
.v-blank-summary{
  margin-top:14px;font-size:12px;color:var(--v-muted);line-height:1.5;
  font-family:'Inter',sans-serif;
}
.v-blank-summary strong{color:var(--v-ink)}

/* ── /variant (build) — экран генератора ─────────────────── */
.v-build-card{
  max-width:780px;margin:32px auto;
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:6px;
  padding:32px 36px;
}
.v-build-h1{margin:0 0 8px;font-size:28px;font-weight:700}
.v-build-lead{color:var(--v-muted);margin:0 0 28px;font-size:15px;line-height:1.6}
.v-build-modes{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;
}
@media(max-width:600px){.v-build-modes{grid-template-columns:1fr}}
.v-mode-card{
  border:2px solid var(--v-border);border-radius:8px;padding:20px;cursor:pointer;
  transition:border-color .15s, background .15s;
  font-family:'Inter',sans-serif;
}
.v-mode-card input{display:none}
.v-mode-card:has(input:checked){border-color:var(--v-accent);background:var(--v-accent-soft)}
.v-mode-card h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--v-ink)}
.v-mode-card p{margin:0;font-size:13px;color:var(--v-muted);line-height:1.45}
.v-lines-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;
  margin-top:16px;font-family:'Inter',sans-serif;
}
.v-line-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1px solid var(--v-border);border-radius:6px;
  cursor:pointer;background:#fafaf5;font-size:13px;
}
.v-line-row:has(input:checked){background:var(--v-accent-soft);border-color:#bcd1ec}
.v-line-row input{margin-top:3px;accent-color:var(--v-accent)}
.v-line-num{font-weight:700;color:var(--v-accent);min-width:24px}
.v-line-info{flex:1;line-height:1.35}
.v-line-info b{display:block;color:var(--v-ink)}
.v-line-info small{color:var(--v-muted);font-size:11px}
.v-build-actions{
  margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;
}
.v-build-actions .v-finish{font-size:16px;padding:12px 28px}

/* ── /variant/{id}/result ───────────────────────────────── */
.v-result-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;
}
@media(max-width:680px){.v-result-summary{grid-template-columns:repeat(2,1fr)}}
.v-stat{
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:6px;
  padding:16px;text-align:center;font-family:'Inter',sans-serif;
}
.v-stat-value{font-size:28px;font-weight:800;color:var(--v-accent);line-height:1}
.v-stat-value.ok{color:var(--v-done)}
.v-stat-value.warn{color:var(--v-warn)}
.v-stat-label{font-size:12px;color:var(--v-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:6px}

.v-result-table{
  width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:14px;
  background:var(--v-paper);border:1px solid var(--v-border);
}
.v-result-table th,.v-result-table td{
  padding:10px 14px;border-bottom:1px solid var(--v-border);text-align:left;
}
.v-result-table th{background:#fafaf5;font-weight:600;font-size:12px;text-transform:uppercase;color:var(--v-muted);letter-spacing:.3px}
.v-result-table tr:last-child td{border-bottom:0}
.v-result-icon{font-size:18px;width:24px;display:inline-block;text-align:center}
.v-result-icon.ok{color:var(--v-done)}
.v-result-icon.bad{color:var(--v-warn)}

/* ── /variant — галерея стандартных вариантов ─────────────── */
.v-gallery-wrap{max-width:1080px;margin:24px auto;padding:0 24px;font-family:'Inter',sans-serif}
.v-gallery-hero{
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:8px;
  padding:28px 32px;margin-bottom:24px;
}
.v-gallery-hero h1{margin:0 0 8px;font-size:26px;font-weight:700;color:var(--v-ink)}
.v-gallery-hero p{margin:0;color:var(--v-muted);font-size:14px;line-height:1.6}
.v-gallery-section{margin:28px 0 16px}
.v-gallery-section h2{
  margin:0 0 14px;font-size:16px;font-weight:700;color:var(--v-ink);
  text-transform:uppercase;letter-spacing:.5px;
}
.v-gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.v-card{
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:8px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.v-card:hover{border-color:var(--v-accent);box-shadow:0 4px 14px rgba(59,110,168,.12)}
.v-card-badge{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:4px 10px;border-radius:14px;background:var(--v-accent-soft);
  color:var(--v-accent);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
}
.v-card-badge.done{background:var(--v-done-soft);color:var(--v-done)}
.v-card-badge.progress{background:#fff5e1;color:#b07514}
.v-card-badge.fresh{background:#f3e8ff;color:#7b3ec3}
.v-card--fresh{border-style:dashed;border-color:#c4a8e0}
.v-card--fresh:hover{border-style:solid;border-color:#7b3ec3;box-shadow:0 4px 14px rgba(123,62,195,.14)}
.v-card--fresh .v-finish{background:#7b3ec3}
.v-card--fresh .v-finish:hover{background:#642a9f}
.v-card-badge.custom{background:#e6f5e9;color:#2f8a3e}
.v-card--custom{border-style:dashed;border-color:#a8d0b0}
.v-card--custom:hover{border-style:solid;border-color:#2f8a3e;box-shadow:0 4px 14px rgba(47,138,62,.14)}
.v-card--custom .v-finish{background:#2f8a3e}
.v-card--custom .v-finish:hover{background:#23682f}

/* ── Баннер-ряд: тренажёры + теория ───────────────────────── */
.v-banner-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;
}
@media(max-width:760px){.v-banner-row{grid-template-columns:1fr}}
.v-banner{
  display:flex;align-items:center;gap:18px;
  background:var(--v-paper);border:1px solid var(--v-border);border-radius:10px;
  padding:22px 24px;text-decoration:none;color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.v-banner:hover{border-color:var(--v-accent);box-shadow:0 4px 16px rgba(59,110,168,.12);transform:translateY(-1px)}
.v-banner-icon{
  flex-shrink:0;width:54px;height:54px;border-radius:12px;
  background:var(--v-accent-soft);color:var(--v-accent);
  display:flex;align-items:center;justify-content:center;
}
.v-banner-icon svg{width:28px;height:28px}
.v-banner-text{flex:1;min-width:0}
.v-banner-text h3{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--v-ink);line-height:1.3}
.v-banner-text p{margin:0;font-size:13px;color:var(--v-muted);line-height:1.5}
.v-banner-arrow{
  font-size:24px;color:var(--v-accent);font-weight:600;flex-shrink:0;
  transition:transform .15s;
}
.v-banner:hover .v-banner-arrow{transform:translateX(4px)}

.v-banner--theory .v-banner-icon{background:#f3e8ff;color:#7b3ec3}
.v-banner--theory:hover{border-color:#7b3ec3;box-shadow:0 4px 16px rgba(123,62,195,.12)}
.v-banner--theory .v-banner-arrow{color:#7b3ec3}
.v-card h3{margin:0;font-size:17px;font-weight:700;color:var(--v-ink);line-height:1.3}
.v-card p{margin:0;font-size:13px;color:var(--v-muted);line-height:1.5;flex:1}
.v-card-meta{
  display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;color:var(--v-muted);
  padding-top:8px;border-top:1px dashed var(--v-border);
}
.v-card-meta b{color:var(--v-ink);font-weight:600}
.v-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.v-card-actions form{flex:1;margin:0}
.v-card-actions .v-btn,
.v-card-actions .v-finish{
  width:100%;justify-content:center;padding:10px 16px;font-size:14px;
  border:0;cursor:pointer;
}
.v-build-cta{
  background:var(--v-paper);border:1px dashed var(--v-accent);border-radius:8px;
  padding:24px 28px;margin-top:28px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.v-build-cta .v-build-cta-text{flex:1;min-width:240px}
.v-build-cta h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--v-ink)}
.v-build-cta p{margin:0;font-size:13px;color:var(--v-muted);line-height:1.5}
.v-empty{
  padding:18px;background:#fafaf5;border:1px dashed var(--v-border);border-radius:6px;
  font-size:13px;color:var(--v-muted);text-align:center;
}

/* ── Footer ─────────────────────────────────────────────── */
.v-footer{
  background:#fff;border-top:1px solid var(--v-border);margin-top:48px;
  font-family:'Inter',sans-serif;
}
.v-footer-inner{
  max-width:1280px;margin:0 auto;padding:36px 24px 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
}
@media(max-width:760px){.v-footer-inner{grid-template-columns:1fr;gap:24px}}
.v-footer-brand-block p{margin:8px 0 0;font-size:13px;color:var(--v-muted);line-height:1.6;max-width:420px}
.v-footer-logo{display:inline-flex;align-items:center;gap:6px}
.v-footer-logo span{font-weight:700;font-size:24px;letter-spacing:-1.5px;line-height:1}
.v-footer-links{display:flex;flex-direction:column;gap:6px;font-size:13px}
.v-footer-links b{font-weight:700;font-size:12px;color:var(--v-ink);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.v-footer-links a{color:var(--v-muted);text-decoration:none;transition:color .15s}
.v-footer-links a:hover{color:var(--v-accent)}
.v-footer-bottom{
  max-width:1280px;margin:0 auto;padding:16px 24px 24px;
  border-top:1px solid var(--v-border);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:12px;color:var(--v-muted);
}
.v-footer-bottom a{color:var(--v-muted);text-decoration:none}
.v-footer-bottom a:hover{color:var(--v-accent)}
.v-footer-counters{display:inline-flex;gap:8px;align-items:center;margin-left:auto}
.v-footer-counters img{display:block}