/* Мини-приложение микромагнита. Токены — из design/tokens.css (Finvora Core 2.0). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-400-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --vt-forest: #044C3A; --vt-forest-deep: #023428; --vt-forest-soft: #0A6B52;
  --vt-mint: #D9F7E9; --vt-mint-light: #E0FDF6;
  --vt-white: #FFFFFF; --vt-off-white: #F8FAF9;
  --vt-gray-100: #F3F4F6; --vt-gray-200: #E5E7EB; --vt-gray-400: #9CA3AF; --vt-gray-500: #6B7280;
  --vt-gray-700: #374151; --vt-gray-800: #1F2937; --vt-gray-900: #111827;
  --vt-gold: #F9A826; --vt-teal: #39D2C0; --vt-error: #EF4444; --vt-error-bg: #FEECEC; --vt-warning-bg: #FEF6E7;
  --vt-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r-card: 16px; --r-btn: 30px; --r-input: 8px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--vt-white); color: var(--vt-gray-700); font: 400 16px/24px var(--vt-font);
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }

h1 { color: var(--vt-gray-900); font-size: 26px; line-height: 32px; font-weight: 700; margin: 16px 0 8px; text-wrap: balance; }
h2 { color: var(--vt-gray-800); font-size: 20px; line-height: 28px; font-weight: 600; margin: 24px 0 8px; text-wrap: balance; }
h3 { color: var(--vt-forest); font-size: 18px; line-height: 26px; font-weight: 600; margin: 20px 0 6px; }
p { margin: 0 0 12px; }
.lead { font-size: 17px; line-height: 26px; }
.muted { color: var(--vt-gray-500); font-size: 14px; line-height: 20px; }
.error { color: #B91C1C; background: var(--vt-error-bg); padding: 12px 16px; border-radius: var(--r-input); }
.ok { color: var(--vt-forest-soft); font-weight: 600; }
.bad { color: #B91C1C; font-weight: 600; }
.badge { display: inline-block; background: var(--vt-warning-bg); color: #7A4B00; font-size: 13px; line-height: 18px;
  padding: 4px 10px; border-radius: var(--r-btn); margin: 0 0 8px; }
.disclaimer { color: var(--vt-gray-500); font-size: 12px; line-height: 17px; margin-top: 32px; }
a { color: var(--vt-forest-soft); }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-btn); border: 1px solid transparent; font: 600 16px/20px var(--vt-font); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s; }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .option:focus-visible, .card-link:focus-visible {
  outline: 3px solid var(--vt-teal); outline-offset: 2px; }
.btn-primary { background: var(--vt-forest); color: #fff; }
.btn-primary:hover { background: var(--vt-forest-deep); }
.btn-primary:disabled { background: var(--vt-gray-200); color: var(--vt-gray-500); cursor: not-allowed; }
.btn-ghost { background: var(--vt-white); color: var(--vt-forest); border-color: var(--vt-gray-200); }
.btn-ghost:hover { border-color: var(--vt-forest-soft); }
.btn-link { background: none; color: var(--vt-forest-soft); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; }
.btn-wide { width: 100%; }

/* Шапка и карточки главной */
.brand { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.brand div { display: flex; flex-direction: column; }
.brand strong { color: var(--vt-gray-900); font-size: 15px; line-height: 20px; }
.brand span { color: var(--vt-gray-500); font-size: 13px; line-height: 18px; }
.cards { display: grid; gap: 12px; margin-top: 20px; }
.card { background: var(--vt-white); border: 1px solid var(--vt-gray-200); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-sm); }
.card-link { display: grid; grid-template-columns: 1fr auto; text-align: left; font: inherit; color: inherit; cursor: pointer; gap: 4px 12px; width: 100%; }
.card-link strong { color: var(--vt-gray-900); font-size: 18px; line-height: 24px; }
.card-link span:not(.arrow) { grid-column: 1; color: var(--vt-gray-500); font-size: 14px; line-height: 20px; }
.card-link .arrow { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--vt-forest); font-size: 22px; }
.card-link:hover { border-color: var(--vt-forest-soft); }

/* Задание */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.tab { flex: 1 0 auto; min-height: 40px; padding: 8px 14px; border-radius: var(--r-btn); border: 1px solid var(--vt-gray-200);
  background: var(--vt-white); color: var(--vt-gray-700); font: 500 14px/20px var(--vt-font); cursor: pointer; }
.tab-on { background: var(--vt-mint); border-color: var(--vt-forest-soft); color: var(--vt-forest); }
.tab-done::after { content: ' ✓'; color: var(--vt-forest-soft); }
.task-head h1 { margin-top: 12px; }
.chips { display: flex; gap: 8px; margin: 8px 0; }
.chip { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--vt-gray-200); background: var(--vt-white);
  color: var(--vt-gray-500); font: 700 18px/1 var(--vt-font); cursor: pointer; }
.chip-set { border-color: var(--vt-forest-soft); color: var(--vt-forest); background: var(--vt-mint-light); }
.chip-on { border-color: var(--vt-forest); background: var(--vt-forest); color: #fff; }
.hint { background: var(--vt-off-white); border-left: 3px solid var(--vt-forest-soft); padding: 8px 12px; border-radius: 0 var(--r-input) var(--r-input) 0;
  font-size: 15px; line-height: 22px; min-height: 46px; }
.chart-box { width: 100%; margin: 8px 0 4px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.candle-info { color: var(--vt-gray-500); font-size: 13px; line-height: 18px; min-height: 18px; margin: 0 0 8px; }
.tools { display: flex; gap: 8px; margin-bottom: 12px; }
.tools .btn { min-width: 56px; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* График */
.chart-svg { display: block; width: 100%; height: auto; background: var(--vt-white); border: 1px solid var(--vt-gray-200); border-radius: var(--r-card); }
.chart-svg .grid line { stroke: var(--vt-gray-100); stroke-width: 1; }
.chart-svg .grid text { fill: var(--vt-gray-400); font: 500 11px var(--vt-font); }
.chart-svg .c-up line { stroke: var(--vt-forest-soft); stroke-width: 1.2; }
.chart-svg .c-up rect { fill: var(--vt-forest-soft); }
.chart-svg .c-down line { stroke: var(--vt-gray-700); stroke-width: 1.2; }
.chart-svg .c-down rect { fill: var(--vt-white); stroke: var(--vt-gray-700); stroke-width: 1; }
.chart-svg .cursor { fill: rgba(57,210,192,.16); }
.chart-svg .lines .flag { stroke: var(--vt-teal); stroke-width: 3; stroke-linecap: round; }
.chart-svg .lines .edge { stroke: var(--vt-forest); stroke-width: 2; }
.chart-svg .lines .par { stroke: var(--vt-teal); stroke-width: 1.5; stroke-dasharray: 6 5; }
.chart-svg .lvl { stroke: var(--vt-gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-svg .lvl-t { fill: #7A4B00; font: 600 11px var(--vt-font); }
.chart-svg .pt circle { fill: var(--vt-forest); stroke: #fff; stroke-width: 2; }
.chart-svg .pt text { fill: #fff; font: 700 12px var(--vt-font); }
.chart-svg .pt-active circle { fill: var(--vt-gold); }
.chart-svg .pt-active text { fill: var(--vt-gray-900); }
.chart-svg .etalon circle { fill: none; stroke: var(--vt-gold); stroke-width: 2; stroke-dasharray: 4 3; }

/* Результаты проверки */
.results h2 { margin-top: 20px; }
.rules { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.rule { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--vt-off-white); }
.rule p { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--vt-gray-700); }
.rule strong { color: var(--vt-gray-900); font-size: 15px; line-height: 21px; }
.rule .mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.rule.ok .mark { background: var(--vt-mint); color: var(--vt-forest); }
.rule.bad { background: var(--vt-error-bg); }
.rule.bad .mark { background: #fff; color: #B91C1C; }
.rule.info .mark { background: #fff; color: var(--vt-gray-500); border: 1px solid var(--vt-gray-200); }
.note { color: var(--vt-gray-500); font-size: 14px; line-height: 20px; }

/* Отправка */
.summary { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--vt-gray-200); border-radius: 12px; }
.send-choice { display: grid; gap: 8px; margin: 8px 0 16px; }
.fallback { margin: 16px 0; padding: 12px 16px; background: var(--vt-off-white); border-radius: 12px; }
.fallback summary { cursor: pointer; color: var(--vt-forest-soft); font-weight: 600; }
.code { display: block; margin: 8px 0; padding: 10px 12px; background: #fff; border: 1px dashed var(--vt-gray-400); border-radius: 8px;
  font: 600 14px/20px ui-monospace, Menlo, monospace; word-break: break-all; color: var(--vt-gray-900); }

/* Квиз */
.progress { height: 6px; background: var(--vt-gray-100); border-radius: 99px; overflow: hidden; margin: 8px 0 12px; }
.progress span { display: block; height: 100%; background: var(--vt-forest-soft); }
.options { display: grid; gap: 10px; margin: 16px 0; }
.option { text-align: left; padding: 14px 16px; min-height: 52px; border-radius: 14px; border: 1px solid var(--vt-gray-200); background: #fff;
  font: 500 16px/22px var(--vt-font); color: var(--vt-gray-800); cursor: pointer; }
.option:hover { border-color: var(--vt-forest-soft); }
.option-on { background: var(--vt-mint); border-color: var(--vt-forest); }

/* Гайд */
.toc { background: var(--vt-off-white); border-radius: var(--r-card); padding: 12px 16px; margin: 12px 0 8px; }
.toc .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-gray-500); margin: 0 0 4px; }
.toc ul { margin: 0; padding-left: 0; list-style: none; }
.toc li { margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; margin: 12px 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--vt-gray-200); padding: 8px; text-align: left; vertical-align: top; }
.prose th { background: var(--vt-off-white); color: var(--vt-gray-800); }
.prose blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--vt-teal); background: var(--vt-mint-light); border-radius: 0 8px 8px 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose .construct { border: 1px solid var(--vt-gray-200); border-radius: var(--r-card); padding: 4px 16px 12px; margin: 16px 0; box-shadow: var(--shadow-sm); }
.prose a[data-cta] { margin: 6px 8px 6px 0; }
.sticky-cta { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%); }
.sticky-cta .btn { max-width: 688px; margin: 0 auto; display: flex; }

/* Редактор и разбор */
.form { display: grid; gap: 10px; margin: 12px 0; }
.form label { display: grid; gap: 4px; font-size: 14px; color: var(--vt-gray-700); }
.form label.check { display: flex; align-items: center; gap: 8px; }
.input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--vt-gray-200); border-radius: var(--r-input);
  font: 400 16px/22px var(--vt-font); color: var(--vt-gray-900); background: #fff; }
.code-area { font: 12px/16px ui-monospace, Menlo, monospace; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.row .input { flex: 1 1 200px; }
.review-chart { margin-top: 24px; }
.level { background: var(--vt-mint-light); border-color: var(--vt-mint); margin-top: 16px; }

@media (min-width: 768px) {
  h1 { font-size: 32px; line-height: 40px; }
  .wrap { padding-top: 24px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .send-choice { grid-template-columns: repeat(3, 1fr); }
  .send-choice p { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Маршрут мини-курса */
.route { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.route-btn { width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; text-align: left;
  padding: 14px 16px; border: 1px solid var(--vt-gray-200); border-radius: var(--r-card); background: #fff; font: inherit; color: inherit; box-shadow: var(--shadow-sm); }
button.route-btn { cursor: pointer; }
button.route-btn:hover { border-color: var(--vt-forest-soft); }
button.route-btn:focus-visible { outline: 3px solid var(--vt-teal); outline-offset: 2px; }
.route-btn strong { display: block; color: var(--vt-gray-900); font-size: 16px; line-height: 22px; }
.route-btn span:not(.st) { display: block; color: var(--vt-gray-500); font-size: 14px; line-height: 20px; }
.route-btn .st { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-mint-light); color: var(--vt-forest); font-weight: 700; }
.route-step.done .st { background: var(--vt-forest); color: #fff; }
.route-step.locked .route-btn { background: var(--vt-off-white); box-shadow: none; }
.route-step.locked strong { color: var(--vt-gray-500); }

/* Курс: прогресс, верхняя панель, плеер, главы */
.meter { height: 8px; background: var(--vt-gray-100); border-radius: 99px; overflow: hidden; margin: 12px 0 4px; }
.meter span { display: block; height: 100%; background: var(--vt-forest-soft); border-radius: 99px; }
.route-step.current .route-btn { border-color: var(--vt-forest); box-shadow: 0 0 0 3px var(--vt-mint); }
.route-step.current .st { background: var(--vt-forest); color: #fff; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 4px; }
.topbar .btn-link { min-height: 40px; }
.player { margin: 12px 0 16px; }
.player-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b1512; border-radius: var(--r-card); overflow: hidden; }
.player-frame video, .player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b1512; }
.player-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 16px; border-radius: var(--r-card);
  background: var(--vt-mint-light); border: 1px dashed var(--vt-forest-soft); color: var(--vt-gray-700); }
.player-empty strong { color: var(--vt-gray-900); }
.player-empty span:not(.player-icon) { font-size: 14px; color: var(--vt-gray-500); }
.player-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--vt-forest); color: #fff; font-size: 20px; }
.chapters { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 6px; }
.chapter { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vt-gray-200); background: #fff; font: 500 15px/20px var(--vt-font); color: var(--vt-gray-800); }
button.chapter { cursor: pointer; }
button.chapter:hover { border-color: var(--vt-forest-soft); }
.ch-t { min-width: 44px; color: var(--vt-forest-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.step-next { position: sticky; bottom: 0; padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255,255,255,0), #fff 35%); margin-top: 16px; }
.plain { list-style: none; padding: 0; margin: 8px 0; }
.plain li { margin: 2px 0; }
.club-list li { padding-left: 24px; position: relative; margin: 8px 0; }
.club-list li::before { content: '✓'; position: absolute; left: 0; color: var(--vt-forest-soft); font-weight: 700; }
.cta-col { display: grid; gap: 10px; margin: 16px 0; }
.review-text { white-space: pre-wrap; background: #fff; border-radius: 12px; padding: 12px 14px; margin-top: 8px; }

/* Схемы фигур в методичке */
.scheme { margin: 12px 0 16px; padding: 8px; background: var(--vt-off-white); border-radius: var(--r-card); }
.scheme figcaption { font-size: 13px; line-height: 18px; color: var(--vt-gray-500); text-align: center; margin-top: 4px; }
.scheme-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.scheme-svg .s-fib { stroke: var(--vt-gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.scheme-svg .s-fib-t { fill: #7A4B00; }
.scheme-svg .s-lbl { font: 600 11px var(--vt-font); fill: var(--vt-gray-500); }
.scheme-svg .s-box { fill: none; stroke: var(--vt-gray-400); stroke-width: 1.2; stroke-dasharray: 4 4; }
.scheme-svg .s-edge { stroke: var(--vt-forest); stroke-width: 2; }
.scheme-svg .s-path { fill: none; stroke: var(--vt-gray-700); stroke-width: 2.5; stroke-linejoin: round; }
.scheme-svg .s-flag { stroke: var(--vt-teal); stroke-width: 3.5; stroke-linecap: round; }
.scheme-svg .s-exit { stroke: var(--vt-forest-soft); stroke-width: 2.5; stroke-dasharray: 6 4; }
.scheme-svg .s-arrow { fill: var(--vt-forest-soft); }
.scheme-svg .s-pt { fill: var(--vt-forest); stroke: #fff; stroke-width: 2; }
.scheme-svg .s-pt-t { fill: #fff; font: 700 11px var(--vt-font); text-anchor: middle; }

/* Цель курса и отдельная карточка «Все ловушки рынка на графиках» */
.goal { margin: 4px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--vt-mint-light); color: var(--vt-forest);
  font-weight: 600; font-size: 16px; line-height: 22px; }
.bonus { margin: 20px 0 8px; }
.bonus-btn { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; text-align: left;
  padding: 18px 16px; border-radius: 20px; font: inherit; border: 0; }
.bonus-btn strong { display: block; font-size: 18px; line-height: 24px; }
.bonus-btn span:not(.bonus-icon):not(.bonus-go) { display: block; font-size: 14px; line-height: 20px; margin-top: 2px; }
.bonus-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
.bonus-locked .bonus-btn { background: linear-gradient(135deg, var(--vt-forest-deep), var(--vt-forest)); color: #fff; }
.bonus-locked .bonus-btn span:not(.bonus-icon) { color: var(--vt-mint); }
.bonus-locked .bonus-icon { background: rgba(255,255,255,.12); }
.bonus-open .bonus-btn { background: linear-gradient(135deg, var(--vt-mint), var(--vt-mint-light)); color: var(--vt-gray-900);
  box-shadow: 0 0 0 2px var(--vt-forest-soft) inset; cursor: pointer; }
.bonus-open .bonus-btn span:not(.bonus-icon):not(.bonus-go) { color: var(--vt-gray-700); }
.bonus-open .bonus-icon { background: #fff; }
.bonus-go { color: var(--vt-forest); font-size: 22px; font-weight: 700; }
.bonus-open .bonus-btn:focus-visible { outline: 3px solid var(--vt-teal); outline-offset: 2px; }

/* Экран рисования ?s=draw */
.wrap-wide { max-width: 1200px; }
.draw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 4px; }
.draw-head strong { font-size: 20px; line-height: 28px; color: var(--vt-gray-900); }
.draw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 4px; }
.draw-bar .tabs { flex: 0 0 auto; }
.draw-bar .tab { flex: 0 0 auto; min-width: 72px; }
.draw-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool { min-height: 40px; padding: 8px 14px; border-radius: var(--r-btn); border: 1px solid var(--vt-gray-200); background: var(--vt-white);
  color: var(--vt-gray-800); font: 600 14px/20px var(--vt-font); cursor: pointer; }
.tool:hover:not(:disabled) { border-color: var(--vt-forest-soft); }
.tool[aria-pressed="true"] { background: var(--vt-forest); border-color: var(--vt-forest); color: #fff; }
.tool:disabled { color: var(--vt-gray-400); cursor: not-allowed; }
.tool-danger { color: var(--vt-error); }
.tool-confirm, .tool-confirm:hover:not(:disabled) { background: var(--vt-error); border-color: var(--vt-error); color: #fff; }
.tool:focus-visible { outline: 3px solid var(--vt-teal); outline-offset: 2px; }
.draw-box { width: 100%; height: min(62vh, 560px); min-height: 300px; border: 1px solid var(--vt-gray-200); border-radius: 12px;
  overflow: hidden; background: var(--vt-white); touch-action: none; user-select: none; -webkit-user-select: none; }
.draw-box svg { display: block; }
.chart-svg.drawing { cursor: crosshair; }
.chart-svg .vday { stroke: var(--vt-gray-100); }
.chart-svg.thin .c-down rect { fill: var(--vt-gray-700); stroke: none; }
.chart-svg .dl-hit { stroke: transparent; stroke-width: 18; }
.chart-svg .dl-line { stroke: #1D4ED8; stroke-width: 2; stroke-linecap: round; }
.chart-svg .dl-sel .dl-line { stroke: var(--vt-gold); stroke-width: 2.5; }
.chart-svg .dl-pending .dl-line { stroke: var(--vt-gold); stroke-dasharray: 6 4; }
.chart-svg .dl-end { fill: var(--vt-white); stroke: var(--vt-gold); stroke-width: 2; }
.draw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.draw-actions [hidden] { display: none; }
@media (max-width: 480px) { .draw-actions .btn { flex: 1 1 100%; } }