body {
    background-color: #f8fafc;
    font-family: 'Manrope', sans-serif;
    color: #334155;
    -webkit-font-smoothing: antialiased;
    zoom: 0.9;
}

/* ============================================================
   РЕЖИМ РАЗБОРА «Как тут всё устроено?» (discover.js)
   ============================================================ */
body.dv-mode { overflow-x: hidden; }
#dv-layer { position: fixed; inset: 0; z-index: 9100; pointer-events: none; }
#dv-dim {
    position: fixed; inset: 0; z-index: 9000; pointer-events: auto;
    background: rgba(15,23,42,0.58);
    backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
    animation: dvFade .3s ease both;
}
@keyframes dvFade { from { opacity: 0; } to { opacity: 1; } }

/* Подсвеченные блоки — поверх затемнения, кликабельны */
/* Над блоками/под-секциями — курсор-палец (видно, что можно кликнуть) */
body.dv-mode .dv-target, body.dv-mode .dv-target *,
body.dv-mode .dv-sub, body.dv-mode .dv-sub * { cursor: pointer !important; }

.dv-mode .dv-target {
    position: relative; z-index: 9001;
    border-radius: 22px;
    transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
    box-shadow: 0 0 0 2px var(--dv-accent, #6366f1), 0 0 0 6px color-mix(in srgb, var(--dv-accent,#6366f1) 14%, transparent), 0 20px 50px -16px rgba(15,23,42,.55);
}
.dv-mode .dv-target.dv-hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 0 0 3.5px var(--dv-accent, #6366f1), 0 0 0 9px color-mix(in srgb, var(--dv-accent,#6366f1) 24%, transparent), 0 34px 70px -18px rgba(15,23,42,.62);
}
/* Ярлык над выделенной категорией ТОЛЬКО при наведении (display:none по умолчанию — нет «невидимой плашки») */
.dv-mode .dv-target::after { content: none; display: none; }
.dv-mode .dv-target.dv-hover::after {
    content: 'Разобрать данную категорию →';
    display: block; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--dv-accent, #6366f1); color: #fff; z-index: 9003;
    font-size: 11px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
    box-shadow: 0 10px 24px -6px rgba(15,23,42,.5);
}
/* Сохранить/Загрузить/Сбросить — кнопка маленькая, ярлык покороче.
   Пилюля имеет overflow:hidden и обрезала ярлык — на наведении разрешаем ему выходить наружу.
   Чтобы не вылезали белые квадратные углы внутренних кнопок — скругляем их под форму пилюли. */
.dv-mode .dv-target[data-dv-key="saveload"] { border-radius: 14px !important; }
.dv-mode .dv-target[data-dv-key="saveload"].dv-hover::after { content: 'Разобрать →'; }
.dv-mode .dv-target[data-dv-key="saveload"].dv-hover { overflow: visible !important; }
.dv-mode .dv-target[data-dv-key="saveload"].dv-hover > .reset-rail { border-radius: 14px 0 0 14px !important; }
.dv-mode .dv-target[data-dv-key="saveload"].dv-hover > [data-tour="saveload"] { border-radius: 0 14px 14px 0 !important; overflow: hidden !important; }
.dv-mode .dv-target[data-dv-key="saveload"].dv-hover > .reset-overlay { border-radius: 14px !important; }

/* В фокусе — выделен только выбранный блок, остальные уходят под затемнение */
.dv-focused .dv-target:not(.dv-spot) { z-index: auto; box-shadow: none; cursor: default; pointer-events: none; }
.dv-focused .dv-target:not(.dv-spot)::after { display: none; }
.dv-mode .dv-spot {
    position: relative; z-index: 9001; cursor: default;
    border-radius: 22px;
    box-shadow: 0 0 0 2.5px var(--dv-accent, #6366f1), 0 30px 80px -20px rgba(15,23,42,.6);
    animation: dvSpotIn .4s cubic-bezier(.16,1,.3,1) both;
}
.dv-mode .dv-spot::after { display: none; }
@keyframes dvSpotIn { from { box-shadow: 0 0 0 2px var(--dv-accent,#6366f1), 0 0 0 transparent; } }

/* Подсветка якоря внутри блока при наведении на чип */
.dv-anchor-hot {
    outline: 2px solid var(--dv-accent, #6366f1) !important; outline-offset: 3px;
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(99,102,241,.18) !important;
    transition: outline .15s ease, box-shadow .15s ease;
}

/* Баннер сверху */
#dv-banner {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-16px);
    z-index: 9004; pointer-events: none; opacity: 0;
    transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
#dv-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dv-banner-inner {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff;
    padding: 11px 20px; border-radius: 999px; font-size: 13px; font-weight: 700;
    box-shadow: 0 16px 40px -12px rgba(67,56,202,.7); max-width: 92vw;
}
.dv-banner-inner b { font-weight: 900; }
.dv-banner-spark { font-size: 16px; animation: dvSpark 1.8s ease-in-out infinite; }
@keyframes dvSpark { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(12deg); } }

/* Скрываем верхнюю чёрную плашку, пока идёт режим разбора */
body.dv-mode #stickySummaryBar { display: none !important; }

/* Линии и точки-якоря — белые бегущие пунктиры */
#dv-lines { position: fixed; inset: 0; z-index: 9002; pointer-events: none; width: 100%; height: 100%; }
.dv-line {
    fill: none; stroke: #ffffff; stroke-width: 2.5; opacity: .95;
    stroke-dasharray: 6 6; animation: dvDash 12s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
    transition: stroke-width .15s ease;
}
.dv-line.hot { stroke-width: 3; }
@keyframes dvDash { to { stroke-dashoffset: -240; } }
.dv-dot { opacity: .7; transition: r .15s ease, opacity .15s ease; }
.dv-dot.hot { opacity: 1; r: 7; filter: drop-shadow(0 0 6px currentColor); }

/* Чипы-подсказки */
/* Под-секции внутри блока: мягкая подсветка (без неона), заметнее при наведении */
.dv-mode .dv-sub {
    position: relative; border-radius: 12px;
    transition: box-shadow .18s ease, transform .18s ease;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dv-accent,#6366f1) 30%, transparent);
}
/* при наведении/выборе кольцо чёткое, но без большого ореола — чтобы соседние под-секции не «сливались».
   :hover нужен, чтобы под-секция под курсором подсвечивалась СРАЗУ после выбора блока (без увода мышки) */
.dv-mode .dv-sub-hover,
.dv-mode .dv-sub:hover:not(.dv-sub-active) {
    transform: translateY(-1px); z-index: 2;
    box-shadow: 0 0 0 2.5px var(--dv-accent,#6366f1), 0 0 0 5px color-mix(in srgb, var(--dv-accent,#6366f1) 13%, transparent), 0 14px 30px -14px rgba(15,23,42,.3);
}
.dv-mode .dv-sub-active {
    z-index: 3; position: relative;
    /* выбранный подраздел — ПОЛНОСТЬЮ выделен: чёткая рамка + заливка-оверлей акцентом (см. ::before) */
    box-shadow: 0 0 0 3px var(--dv-accent,#6366f1), 0 0 0 6px color-mix(in srgb, var(--dv-accent,#6366f1) 22%, transparent), 0 16px 34px -16px rgba(15,23,42,.32) !important;
    border-radius: 14px !important;
}
/* полупрозрачная заливка поверх всего раздела — работает и на светлых, и на тёмных блоках, не ломая их фон */
.dv-mode .dv-sub-active::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
    background: color-mix(in srgb, var(--dv-accent,#6366f1) 16%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dv-accent,#6366f1) 45%, transparent);
}
.dv-mode .dv-extra-spot {
    position: relative; z-index: 9001; border-radius: 18px;
    box-shadow: 0 0 0 3px var(--dv-accent,#6366f1), 0 18px 46px -14px rgba(15,23,42,.45) !important;
}

/* ===== ВСПЛЫВАШКА РЯДОМ С БЛОКОМ — светлая, читаемая ===== */
#dv-pop {
    position: fixed; z-index: 9004; display: none; flex-direction: column; pointer-events: auto;
    background: #ffffff; border: 1px solid #e5e9f0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 34px 74px -20px rgba(15,23,42,.45);
}
#dv-pop.show { display: flex; animation: dvPopIn .24s cubic-bezier(.16,1,.3,1); }
@keyframes dvPopIn { from { transform: scale(.96); } to { transform: scale(1); } }

.dv-pop-head { position: relative; display: flex; align-items: center; gap: 11px; padding: 15px 18px 14px; border-bottom: 1px solid #eef1f6; background: linear-gradient(180deg, color-mix(in srgb, var(--dv-accent,#6366f1) 10%, #ffffff), #ffffff); }
.dv-pop-head::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--dv-accent,#6366f1); }
.dv-pop-num { flex-shrink: 0; font-size: 10px; font-weight: 900; color: #fff; background: var(--dv-accent,#6366f1); padding: 3px 9px; border-radius: 999px; }
.dv-pop-ic { font-size: 22px; }
.dv-pop-title { font-size: 15.5px; font-weight: 900; color: #1e293b; line-height: 1.2; }
.dv-pop-body { padding: 16px 18px; max-height: 54vh; overflow-y: auto; }
.dv-pop-body::-webkit-scrollbar { width: 6px; }
.dv-pop-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.dv-chip-live {
    display: flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 10px 13px; border-radius: 11px;
    background: color-mix(in srgb, var(--dv-accent,#6366f1) 11%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--dv-accent,#6366f1) 26%, #ffffff);
    color: color-mix(in srgb, var(--dv-accent,#6366f1) 82%, #1e293b); font-size: 12.5px; font-weight: 800;
}
.dv-chip-live::before { content: '📍'; font-size: 13px; }
.dv-sec { position: relative; display: block; margin-top: 15px; padding-left: 13px; }
.dv-sec:first-child { margin-top: 0; }
.dv-sec::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--dv-accent,#6366f1) 45%, #e2e8f0); }
.dv-sec-lab { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--dv-accent,#6366f1) 72%, #475569); margin-bottom: 4px; }
.dv-sec-val { display: block; font-size: 13px; line-height: 1.65; color: #334155; }
.dv-sec-val b { color: #0f172a; font-weight: 800; }
.dv-tip { margin-top: 16px; padding: 12px 14px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; font-size: 12px; line-height: 1.6; color: #047857; }
.dv-tip b { color: #065f46; }

.dv-pop-foot { display: flex; align-items: center; justify-content: center; padding: 12px 14px; border-top: 1px solid #eef1f6; background: #f8fafc; }
.dv-pop-ok {
    width: 100%; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; cursor: pointer;
    font-size: 13.5px; font-weight: 900; letter-spacing: .02em; padding: 12px 28px; border-radius: 12px;
    box-shadow: 0 12px 24px -8px rgba(16,185,129,.65); transition: filter .15s ease, transform .12s ease;
}
.dv-pop-ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
.dv-pop-ok:active { transform: translateY(0); }
.dv-pop-ok::before { content: '✓ '; font-weight: 900; }
.dv-pop-dots { display: flex; gap: 5px; }
.dv-pop-dots i { width: 7px; height: 7px; border-radius: 999px; background: #cbd5e1; }
.dv-pop-dots i.on { background: var(--dv-accent,#6366f1); }
@keyframes dvPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* В режиме разбора прячем кнопку «Открыть график платежей» (открываем из «Итого в копилку») */
body.dv-mode [data-tour="calendar-toggle"] { display: none !important; }

/* «Начало деятельности» не участвует в разборе — приглушаем и делаем некликабельным */
body.dv-mode #bizDateBtn { opacity: .4 !important; pointer-events: none !important; filter: grayscale(1) !important; transition: none !important; }

/* Карточки «Расходы сети» и «Общие налоги» полупрозрачны (сквозь затемнение кажутся серыми) —
   в режиме разбора делаем им стандартный белый фон */
body.dv-mode [data-tour="expenses"] > * { background-color: #ffffff !important; }

/* Соседние карточки внутри поднятой колонки (например «Календарь») не должны светиться,
   когда сфокусирован другой блок — приглушаем их вместе с фоном */
body.dv-mode .dv-sib-dim { opacity: .05 !important; pointer-events: none !important; transition: none !important; filter: grayscale(.5); }

/* Плашка-вход в гипотезы (свёрнутый раздел под «Общими расходами ИП») */
#dv-hypo-placard {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 80rem; margin: 14px auto 0; box-sizing: border-box;
    padding: 15px 22px; border-radius: 22px;
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border: 1.5px dashed #c084fc;
}
#dv-hypo-placard .dv-hp-ic { font-size: 26px; line-height: 1; }
#dv-hypo-placard .dv-hp-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#dv-hypo-placard .dv-hp-main b { font-size: 15px; font-weight: 900; color: #6b21a8; }
#dv-hypo-placard .dv-hp-sub { font-size: 12px; font-weight: 600; color: #9333ea; }
#dv-hypo-placard .dv-hp-cta { font-size: 12.5px; font-weight: 900; color: #fff; background: #a855f7; padding: 9px 17px; border-radius: 999px; white-space: nowrap; }

/* Отдельный «экран» гипотез */
body.dv-hypo-mode #dv-dim { background: rgba(15, 23, 42, 0.93); }
body.dv-hypo-mode #sandboxesMasterContainer .sandbox-intro { display: none !important; }
/* встроенные кнопки песочницы в режиме разбора не нужны: свернуть, развернуть, прокрутка */
body.dv-hypo-mode #hypHeaderBar, body.dv-hypo-mode #hypExpandBar,
body.dv-hypo-mode .hyp-nav, body.dv-hypo-mode .hyp-nav-up, body.dv-hypo-mode .hyp-nav-down { display: none !important; }
/* Песочница: панель пояснений + 3 карточки — в одну линию, НЕ переносить, вся группа по центру кольца */
body.dv-hypo-mode #sandboxesMasterContainer {
    flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important;
    justify-content: center !important; padding: 64px 20px 24px !important; gap: 18px;
    overflow: visible !important;   /* НЕ auto — иначе ломается sticky у панели */
}
body.dv-hypo-mode #sandboxWrapper-rose, body.dv-hypo-mode #sandboxWrapper-emerald { width: auto !important; flex: 0 0 auto !important; }
body.dv-hypo-mode #compareCards-rose, body.dv-hypo-mode #compareCards-emerald { flex-wrap: nowrap !important; }

/* ===== ИНФОГРАФИК ГИПОТЕЗ: баннер сверху + панель ВНУТРИ песочницы (слева от карточек) ===== */
#dv-hypo-notes { position: fixed; inset: 0; z-index: 9050; pointer-events: none; }
/* баннер — закреплён вверху, текст в ОДНУ строку, по центру, поле ниже */
.dv-hn-banner {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 7px 22px; pointer-events: auto; white-space: nowrap; overflow: hidden;
    background: linear-gradient(135deg, #7e22ce, #a855f7); color: #fff;
    box-shadow: 0 10px 30px -10px rgba(126, 34, 206, .7);
}
.dv-hn-b-ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
.dv-hn-b-txt { font-size: 13px; line-height: 1.3; color: #f3e8ff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-hn-b-txt b { font-weight: 900; color: #fff; }

/* панель пояснений — ВНУТРИ песочницы (флекс-элемент слева), «прилипает» при скролле */
.dv-hn-panel {
    flex: 0 0 290px; width: 290px; align-self: flex-start;
    position: sticky; top: 56px; max-height: calc(100vh - 76px); pointer-events: auto; overflow-y: auto;
    display: flex; flex-direction: column;
}
/* кнопка «Свернуть гипотезы» — ВНУТРИ белой карточки, сверху */
.dv-hn-collapse {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    background: #f3e8ff; color: #6b21a8; border: none; cursor: pointer; font-size: 12.5px; font-weight: 900;
    padding: 8px 14px; border-radius: 999px; margin-bottom: 4px;
}
.dv-hn-collapse span { font-size: 14px; }
.dv-hn-collapse span { font-size: 14px; }
.dv-hn-card {
    background: #fff; border-radius: 18px; padding: 15px 16px;
    box-shadow: 0 22px 54px -18px rgba(15, 23, 42, .6); display: flex; flex-direction: column; gap: 13px;
}
.dv-hn-block { border-left: 4px solid var(--hn-c, #a855f7); padding-left: 11px; }
.dv-hn-rose { --hn-c: #f43f5e; margin-top: 12px; }   /* раздел сравнения режимов — чуть ниже */
.dv-hn-em { --hn-c: #10b981; }
.dv-hn-h { font-size: 13px; font-weight: 900; color: #1e293b; line-height: 1.25; display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.dv-hn-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.dv-hn-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.dv-hn-block li { font-size: 11.5px; line-height: 1.45; color: #334155; padding-left: 14px; position: relative; }
.dv-hn-block li::before { content: '•'; position: absolute; left: 2px; color: var(--hn-c); font-weight: 900; }
.dv-hn-block li b { color: #0f172a; font-weight: 800; }
.dv-hn-why { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid #eef1f6; padding-top: 12px; }
.dv-hn-why-h { font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #7c3aed; }
.dv-hn-chip { background: #faf5ff; border: 1px solid #e9d5ff; color: #475569; font-size: 11.5px; font-weight: 600; line-height: 1.4; padding: 9px 12px; border-radius: 11px; }
.dv-hn-chip b { color: #6b21a8; font-weight: 900; }
.dv-hn-chip u { color: #7c3aed; text-decoration-color: #c4b5fd; }
.dv-hn-done { width: 100% !important; padding: 11px 22px !important; }

/* Подсказка «обучающий раздел» при попытке редактировать песочницу */
#dv-hypo-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
    z-index: 9060; pointer-events: none; opacity: 0;
    background: #1e293b; color: #fff; font-size: 13px; font-weight: 700;
    padding: 13px 22px; border-radius: 14px; box-shadow: 0 20px 50px -14px rgba(15,23,42,.7);
    transition: opacity .2s ease, transform .2s ease; max-width: 90vw;
}
#dv-hypo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#dv-hypo-toast b { color: #fcd34d; font-weight: 900; }

/* Панель Сброс/Загрузить/Сохранить — это один цельный блок. В режиме разбора отключаем
   собственный hover её кнопок (подсветку и раскрытие «Сбросить всё»), чтобы блок нажимался целиком */
body.dv-mode [data-tour="reset"],
body.dv-mode [data-tour="saveload"],
body.dv-mode [data-tour="saveload"] * { pointer-events: none !important; }
body.dv-mode [data-tour="reset"]:hover, body.dv-mode [data-tour="saveload"] button:hover { background-color: #ffffff !important; }

/* Док снизу слева */
#dv-dock { position: fixed; left: 18px; bottom: 18px; z-index: 9004; display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; max-width: 92vw; }
.dv-dock-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; color: #334155; border: 1px solid #e2e8f0;
    padding: 9px 14px; border-radius: 12px; font-size: 12px; font-weight: 800;
    cursor: pointer; box-shadow: 0 12px 28px -10px rgba(15,23,42,.4);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.dv-dock-btn:hover { transform: translateY(-2px); border-color: #c7d2fe; color: #4338ca; }
.dv-dock-btn span { font-size: 13px; }
.dv-dock-guide:hover { color: #4338ca; }
.dv-dock-exit:hover { color: #e11d48; border-color: #fecaca; }

/* Живая цифра в чипе */
.dv-chip-live {
    margin-top: 6px; padding: 4px 8px; border-radius: 7px;
    background: color-mix(in srgb, var(--dv-accent,#6366f1) 12%, #fff);
    color: var(--dv-accent,#6366f1); font-size: 10px; font-weight: 800;
    display: inline-block; line-height: 1.3;
}

/* Счётчик «Изучено N/M» в баннере */
.dv-banner-count {
    margin-left: 4px; padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,.2); font-size: 11px; font-weight: 900; white-space: nowrap;
}

/* ✓ на изученном блоке */
.dv-mode .dv-target.dv-explored::before {
    content: '✓ Изучено'; position: absolute; top: -13px; right: 14px; z-index: 2;
    background: #10b981; color: #fff; font-size: 10px; font-weight: 900;
    padding: 3px 9px; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(16,185,129,.6);
}

/* Текущий чип в режиме-истории */
.dv-chip.dv-current {
    border-color: var(--dv-accent,#6366f1);
    box-shadow: 0 0 0 2px var(--dv-accent,#6366f1), 0 20px 44px -12px rgba(15,23,42,.5);
    transform: translateX(-4px) scale(1.02);
}

/* Док: кнопка истории */
.dv-dock-story { background: linear-gradient(135deg,#6366f1,#4338ca); color: #fff; border-color: transparent; }
.dv-dock-story:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(67,56,202,.7); }

/* Панель «Провести по порядку» */
#dv-story {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px);
    z-index: 9005; pointer-events: auto; opacity: 0;
    display: flex; align-items: center; gap: 14px;
    background: #0f172a; color: #fff; padding: 9px 12px; border-radius: 14px;
    border: 1px solid rgba(148,163,184,.25); box-shadow: 0 24px 50px -14px rgba(0,0,0,.6);
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
#dv-story.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dv-story-btn {
    background: rgba(255,255,255,.1); color: #fff; border: none; cursor: pointer;
    font-size: 12px; font-weight: 800; padding: 8px 14px; border-radius: 10px; transition: background .15s ease;
}
.dv-story-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.dv-story-btn:disabled { opacity: .35; cursor: default; }
.dv-story-next { background: #6366f1; }
.dv-story-next:hover { background: #4f46e5; }
.dv-story-prog { font-size: 12px; font-weight: 700; color: #cbd5e1; text-align: center; }
.dv-story-prog b { color: #fff; font-size: 14px; }
.dv-story-dots { display: flex; gap: 4px; margin-top: 4px; justify-content: center; }
.dv-story-dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(148,163,184,.4); transition: background .2s ease; }
.dv-story-dots span.on { background: #818cf8; }

/* Конфетти + тост */
.dv-confetti { position: fixed; inset: 0; z-index: 9006; pointer-events: none; overflow: hidden; }
.dv-confetti i {
    position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
    animation: dvConfetti linear forwards;
}
@keyframes dvConfetti { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
.dv-toast {
    position: fixed; left: 50%; top: 28%; transform: translateX(-50%) scale(.9);
    z-index: 9007; pointer-events: none; text-align: center;
    background: linear-gradient(135deg,#10b981,#059669); color: #fff;
    padding: 18px 28px; border-radius: 18px; font-size: 15px; line-height: 1.5;
    box-shadow: 0 30px 70px -18px rgba(16,185,129,.7);
    animation: dvToastIn .45s cubic-bezier(.16,1,.3,1) both;
}
.dv-toast b { font-size: 17px; font-weight: 900; }
.dv-toast.hide { opacity: 0; transition: opacity .4s ease; }
@keyframes dvToastIn { from { opacity: 0; transform: translateX(-50%) scale(.85) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .dv-line { animation: none; }
    .dv-essence, .dv-chip, #dv-dim, .dv-confetti i { animation: none; }
}

.glass-card {
    background: white;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.1);
}

/* #7 — Сворачивание режима гипотез.
   В свёрнутом состоянии прячем доски, навигацию и кнопку «Свернуть», показываем тонкую полосу. */
#sandboxesMasterContainer.hyp-is-collapsed > [id^="sandboxWrapper-"],
#sandboxesMasterContainer.hyp-is-collapsed > .hyp-nav,
#sandboxesMasterContainer.hyp-is-collapsed > #hypHeaderBar { display: none !important; }
#sandboxesMasterContainer.hyp-is-collapsed > #hypExpandBar { display: flex !important; height: auto !important; }
/* свёрнутая полоса — текст строго ПО ЦЕНТРУ по вертикали (симметричные отступы + выравнивание) */
#sandboxesMasterContainer.hyp-is-collapsed {
    min-height: 0 !important; padding-top: 16px !important; padding-bottom: 16px !important;
    align-items: center !important; justify-content: center !important; cursor: pointer;
}
#sandboxesMasterContainer.hyp-is-collapsed * { cursor: pointer; }

.input-box { 
    position: relative; 
    background: #f1f5f9; 
    border: 2px solid transparent; 
    border-radius: 16px; 
    padding: 12px; 
    transition: all 0.2s; 
}

.input-box:focus-within {
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

/* ===================================================
   КАСТОМНЫЙ СЕЛЕКТОР НАЛОГОВОЙ СИСТЕМЫ (.tax-select-*)
   Плавное открытие + читаемые стильные пункты
   =================================================== */
.tax-select-wrap { width: 100%; }
.tax-select-trigger {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 10px 14px; font-size: 14px; font-weight: 800; color: #4338ca;
    cursor: pointer; text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tax-select-trigger:hover { border-color: #c7d2fe; }
.tax-select-trigger.open { border-color: #6366f1; box-shadow: 0 4px 14px rgba(99,102,241,0.14); }
.tax-trigger-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,0.03); }
.tax-select-label { flex: 1; min-width: 0; }
.tax-select-chevron { width: 18px; height: 18px; color: #94a3b8; flex-shrink: 0; transition: transform .25s cubic-bezier(.16,1,.3,1), color .2s ease; }
.tax-select-trigger.open .tax-select-chevron { transform: rotate(180deg); color: #6366f1; }

.tax-select-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px;
    box-shadow: 0 24px 50px -14px rgba(30,41,59,0.32);
    padding: 6px;
    display: none;                 /* без анимации — список появляется сразу */
}
.tax-select-panel.open { display: block; }

.tax-opt {
    width: 100%; display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 11px; cursor: pointer; background: transparent;
    text-align: left; transition: background .12s ease;
}
.tax-opt:hover { background: #f1f5f9; }
.tax-opt.selected { background: #eef2ff; }
.tax-opt-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,0.03); }
.tax-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.tax-opt-label { font-size: 13px; font-weight: 800; color: #1e293b; }
.tax-opt.selected .tax-opt-label { color: #4338ca; }
.tax-opt-hint { font-size: 10px; font-weight: 600; color: #94a3b8; margin-top: 2px; }
.tax-opt-check { width: 16px; height: 16px; color: #6366f1; flex-shrink: 0; opacity: 0; transition: opacity .12s ease; }
.tax-opt.selected .tax-opt-check { opacity: 1; }


label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

/* display:block только для меток внутри input-боксов, не ломает чекбоксы/инлайн-метки */
.input-box label,
header label,
.header-col label {
    display: block;
}

/* Единый размер подписей полей (ПВГД / Стоимость патента / Аренда / Доп. расходы):
   чуть меньше базового, в одну строку — длинная «Доход по патенту (ПВГД за год)» всегда умещается,
   не увеличивая поле. Все четыре подписи одного размера. */
.field-lbl {
    font-size: 10px;
    white-space: nowrap;
}

/* Галочка «в вычет» у общих расходов ИП — видна только когда в сети есть точка УСН Д−Р */
.office-deduct-cb { display: none; padding: 0; cursor: pointer; }
body.net-has-dr .office-deduct-cb { display: inline-flex; }
/* Шапка-подпись «УСН Д−Р» над колонкой галочек — тоже только при наличии Д−Р-точки */
#officeDrHeader { display: none; }
body.net-has-dr #officeDrHeader { display: flex; }
/* В режиме Д−Р галочка-облочко заменяет иконку 🏢 (убираем сдвоенные квадраты слева) */
body.net-has-dr .global-expense-row .office-icon { display: none; }

.input-box input, header input, header select, .val-name { 
    width: 100%; 
    background: transparent; 
    font-weight: 800; 
    font-size: 1.25rem; 
    outline: none; 
    color: #1e293b; 
}

header select {
    cursor: pointer;
    color: #4338ca;
    appearance: none;
}

/* Цикл работы: уменьшенный шрифт для длинных вариантов (12м Без отпускных / Без работников) */
#globalCycle.cycle-compact {
    font-size: 0.78rem !important;
    line-height: 1.15;
}
@media (min-width: 640px) {
    #globalCycle.cycle-compact { font-size: 0.82rem !important; }
}
@media (min-width: 768px) {
    #globalCycle.cycle-compact { font-size: 0.9rem !important; }
}

/* Дисплей выбранного цикла (вместо select) — повторяет размеры значений в шапке */
.cycle-display {
    font-size: 0.9rem;
    line-height: 1.15;
    transition: color .15s ease;
}
.cycle-display:hover { color: #4338ca; }
@media (min-width: 640px) { .cycle-display { font-size: 1.1rem; } }
@media (min-width: 768px) { .cycle-display { font-size: 1.25rem; } }
.cycle-display.cycle-compact { font-size: 0.78rem !important; }
@media (min-width: 640px) { .cycle-display.cycle-compact { font-size: 0.92rem !important; } }
@media (min-width: 768px) { .cycle-display.cycle-compact { font-size: 1.02rem !important; } }

/* Опции в попапе выбора цикла */
.cycle-opt { cursor: pointer; }
.cycle-opt-active .cycle-opt-check { opacity: 1; }
.cycle-opt-active .cycle-opt-badge { color: #fff; }

/* Тематическая подсветка выбранного режима (тёмная тема) */
.cycle-opt[data-cycle="11"].cycle-opt-active       { border-color: #34d399 !important; background: rgba(16,185,129,.16) !important; box-shadow: 0 0 0 1px rgba(52,211,153,.5); }
.cycle-opt[data-cycle="11"].cycle-opt-active .cycle-opt-badge { background: #10b981; color: #fff; }
.cycle-opt[data-cycle="11"].cycle-opt-active .cycle-opt-check { color: #6ee7b7; }
.cycle-opt[data-cycle="12"].cycle-opt-active       { border-color: #a78bfa !important; background: rgba(139,92,246,.16) !important; box-shadow: 0 0 0 1px rgba(167,139,250,.5); }
.cycle-opt[data-cycle="12"].cycle-opt-active .cycle-opt-badge { background: #8b5cf6; color: #fff; }
.cycle-opt[data-cycle="12"].cycle-opt-active .cycle-opt-check { color: #c4b5fd; }
.cycle-opt[data-cycle="12_0"].cycle-opt-active     { border-color: #fbbf24 !important; background: rgba(245,158,11,.16) !important; box-shadow: 0 0 0 1px rgba(251,191,36,.5); }
.cycle-opt[data-cycle="12_0"].cycle-opt-active .cycle-opt-badge { background: #f59e0b; color: #fff; }
.cycle-opt[data-cycle="12_0"].cycle-opt-active .cycle-opt-check { color: #fcd34d; }
.cycle-opt[data-cycle="no_staff"].cycle-opt-active { border-color: #94a3b8 !important; background: rgba(100,116,139,.24) !important; box-shadow: 0 0 0 1px rgba(148,163,184,.45); }
.cycle-opt[data-cycle="no_staff"].cycle-opt-active .cycle-opt-badge { background: #94a3b8; color: #1e293b; }
.cycle-opt[data-cycle="no_staff"].cycle-opt-active .cycle-opt-check { color: #cbd5e1; }

/* Дисплей выбранного МСП в шапке — те же размеры, что у инпутов/цикла */
#mspDisplay { font-size: 0.9rem; line-height: 1.15; transition: color .15s ease; }
#mspDisplay:hover { color: #4338ca; }
@media (min-width: 640px) { #mspDisplay { font-size: 1.1rem; } }
@media (min-width: 768px) { #mspDisplay { font-size: 1.25rem; } }

/* Опции выбора МСП в попапе (как cycle-opt) */
.msp-opt { cursor: pointer; }
.msp-opt .msp-opt-check { opacity: 0; transition: opacity .15s; }
.msp-opt.msp-opt-active .msp-opt-check { opacity: 1; }
.msp-opt[data-msp="1.5"].msp-opt-active { border-color: #34d399 !important; background: rgba(16,185,129,.16) !important; box-shadow: 0 0 0 1px rgba(52,211,153,.5); }
.msp-opt[data-msp="1.5"].msp-opt-active .msp-opt-badge { background: #10b981; color: #fff; }
.msp-opt[data-msp="1.5"].msp-opt-active .msp-opt-check { color: #6ee7b7; }
.msp-opt[data-msp="0"].msp-opt-active { border-color: #94a3b8 !important; background: rgba(100,116,139,.24) !important; box-shadow: 0 0 0 1px rgba(148,163,184,.45); }
.msp-opt[data-msp="0"].msp-opt-active .msp-opt-badge { background: #94a3b8; color: #1e293b; }
.msp-opt[data-msp="0"].msp-opt-active .msp-opt-check { color: #cbd5e1; }

/* Дисплей ОКВЭД в шапке — два числа: [код · %]. Шрифт % — как у остальных колонок. */
#okvedDisplay { gap: 3px; white-space: nowrap; font-size: 0.9rem; }
@media (min-width: 640px) { #okvedDisplay { font-size: 1.1rem; } }
@media (min-width: 768px) { #okvedDisplay { font-size: 1.25rem; } }
.okved-disp-code { font-size: 0.56em; font-weight: 800; color: #94a3b8; transition: color .15s; }
.okved-disp-sep { font-size: 0.5em; color: #cbd5e1; font-weight: 700; }
.okved-disp-pct { font-weight: 900; color: #4338ca; }
#okvedDisplay:hover .okved-disp-code { color: #64748b; }

/* Список ОКВЭД в попапе */
.okved-list { max-height: 224px; overflow-y: auto; }
.okved-list::-webkit-scrollbar { width: 7px; }
.okved-list::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.okved-list::-webkit-scrollbar-track { background: transparent; }
.okved-item {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    text-align: left;
    padding: 7px 9px; margin-bottom: 4px;
    border: 1px solid #334155; border-radius: 12px;
    background: rgba(30,41,59,.5);
    transition: border-color .15s, background .15s; cursor: pointer;
}
.okved-item:hover { border-color: rgba(99,102,241,.6); background: rgba(51,65,85,.65); }
.okved-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.okved-item-code { font-size: 12px; font-weight: 900; color: #e2e8f0; line-height: 1.2; }
.okved-item-name { font-size: 10px; color: #94a3b8; line-height: 1.25; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okved-item-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.okved-item-class { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; background: rgba(148,163,184,.14); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.okved-item-pct { font-size: 12px; font-weight: 900; color: #a5b4fc; }
.okved-item-active { border-color: #6366f1 !important; background: rgba(99,102,241,.18) !important; box-shadow: 0 0 0 1px rgba(99,102,241,.4); }
.okved-item-active .okved-item-pct { color: #c7d2fe; }

/* Мягкая пульсация-свечение вокруг кнопки «Цикл работы» (без движения — окно статично) */
.header-col.cycle-pulse {
    animation: cycleColPulse 2.1s ease-in-out;
    border-radius: 14px;
}
@keyframes cycleColPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
    28%      { box-shadow: 0 0 16px 3px rgba(99,102,241,.26); }
    50%      { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
    78%      { box-shadow: 0 0 16px 3px rgba(99,102,241,.26); }
}

/* Плавное появление попапа */
#cyclePopover:not(.hidden) { animation: cyclePopIn .22s cubic-bezier(.2,.85,.3,1.12); transform-origin: top center; }
@keyframes cyclePopIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.math-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 0; 
    border-bottom: 1px dashed #cbd5e1; 
    font-size: 0.9rem; 
}

.math-row:last-child { 
    border-bottom: none; 
}

.math-label { 
    font-weight: 700; 
    color: #475569; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.math-val-year { 
    font-weight: 800; 
    color: #1e293b; 
    text-align: right; 
}

.math-val-month { 
    font-size: 0.75rem; 
    color: #64748b; 
    font-weight: 700; 
}

.info-badge { 
    font-size: 10px; 
    padding: 2px 6px; 
    border-radius: 6px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.bg-indigo-soft { 
    background-color: #e0e7ff; 
    color: #4338ca; 
}

.calendar-item { 
    border-left: 4px solid #e2e8f0; 
    padding-left: 16px; 
    position: relative; 
}

.calendar-item::before { 
    content: ''; 
    position: absolute; 
    left: -7px; 
    top: 0; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #cbd5e1; 
}

.active-deadline { border-left-color: #6366f1; } 
.active-deadline::before { background: #6366f1; }

.custom-exp-row input { 
    font-weight: 700; 
    outline: none; 
    transition: border-color 0.2s; 
}

.custom-exp-row input:focus { 
    border-color: #6366f1; 
}

.clickable-val { 
    cursor: pointer; 
    transition: all 0.2s; 
    position: relative; 
}

.clickable-val:hover {
    opacity: 0.7;
}

/* Фикс: если внутри кликабельного значения раскрыта всплывашка (как у треугольника-предупреждения
   об отпуске), hover-затемнение родителя гасило и саму всплывашку (opacity каскадит на потомков).
   Когда вложенная всплывашка открыта — держим полную непрозрачность. */
.clickable-val:has(.calc-details:not(.hidden)):hover {
    opacity: 1;
}

/* ===================================================
   ЕДИНЫЙ СТИЛЬ ВСЕХ ВСПЛЫВАШЕК (.calc-details)
   Базовый класс — единственный источник истины.
   !important на визуальных свойствах перебивает старые
   inline-классы (bg-[#0f172a], rounded-2xl, p-4, text-white…),
   чтобы ВСЕ тултипы выглядели идентично.
   =================================================== */
.calc-details {
    position: absolute;
    z-index: 999999;
    width: max-content;
    max-width: 340px;
    font-size: 0.75rem;
    /* Единый глубокий фон с лёгким градиентом — премиальная подача */
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%) !important;
    color: #e2e8f0 !important;       /* спокойный базовый текст; цветные акценты внутри сохраняются */
    padding: 13px 16px !important;
    border-radius: 14px !important;
    margin-top: 8px;
    text-align: left;
    /* Всплывашки — всегда нормальным регистром, даже если родитель uppercase.
       Явные заголовки с классом .uppercase внутри останутся капсом (переопределяют локально). */
    text-transform: none;
    box-shadow: 0 18px 42px -12px rgba(0,0,0,0.7) !important;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .1px;
    white-space: normal;
    word-wrap: break-word;
    /* Текст-перенос: не оставляем «висячее» одно слово на последней строке прозы */
    text-wrap: pretty;
    hyphens: none;
    animation: fadeIn 0.15s ease-out;
    pointer-events: auto;
    box-sizing: border-box;
    border: 1px solid rgba(148,163,184,0.18) !important;
}

.calc-details::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #1e293b transparent;
}

.calc-details.top-tooltip {
    margin-top: 0;
    bottom: calc(100% + 8px);
}

.calc-details.top-tooltip::before {
    bottom: auto;
    top: 100%;
    left: var(--arrow-left, 50%);
    border-color: #0f172a transparent transparent transparent;
}

/* Жирные акценты-цифры внутри тултипов — единый индиго-акцент */
.calc-details b {
    color: #a5b4fc;
    font-weight: 800;
}

/* Заголовки внутри тултипов (если заданы .uppercase) — единый приглушённый стиль */
.calc-details .uppercase {
    letter-spacing: .08em;
}

/* ===================================================
   ЕДИНАЯ ШАПКА ВСПЛЫВАШКИ (.tip-head)
   Градиентная плашка с заголовком сверху — как в попапе «Цикл работы».
   Вставляется автоматически в toggleDetails(); тянется во всю ширину
   тултипа (отрицательные поля гасят его padding) и скругляется по верху.
   =================================================== */
.calc-details .tip-head {
    display: flex;                            /* заголовок слева, кнопки-действия справа */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -13px -16px 11px;                 /* гасим padding бокса → плашка во всю ширину */
    padding: 9px 15px;
    background: linear-gradient(90deg, rgba(99,102,241,0.34) 0%, rgba(99,102,241,0.06) 65%, rgba(99,102,241,0) 100%);
    border-bottom: 1px solid rgba(148,163,184,0.20);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
}
/* Внутри плашки не наследуем индиго-акцент от .calc-details b */
.calc-details .tip-head b { color: #fff; }
/* Блок кнопок-действий в шапке (копирование и т.п.) */
.calc-details .tip-head-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin: -2px -4px -2px 0;                  /* прижимаем кнопки к правому краю плашки */
}

/* ===================================================
   СВЕТЛАЯ ТЕМА тултипов «Графика платежей по месяцам» (.cal-tip)
   Холодный слейт: светло-серый фон + белые карточки-облачка.
   Только для календаря — остальные тултипы остаются тёмными.
   =================================================== */
.calc-details.cal-tip {
    background: linear-gradient(155deg, #f5f8fc 0%, #eef2f7 100%) !important;
    color: #475569 !important;
    border: 1px solid #d7dee8 !important;
    box-shadow: 0 22px 52px -16px rgba(15,23,42,0.30), 0 2px 8px -2px rgba(15,23,42,0.12) !important;
}
.calc-details.cal-tip::before { border-color: transparent transparent #f5f8fc transparent; }
.calc-details.cal-tip.top-tooltip::before { border-color: #eef2f7 transparent transparent transparent; }
/* Все жирные акценты в светлом тултипе — тёмные (перебиваем inline color:#fff из шаблонов) */
.calc-details.cal-tip b { color: #0f172a !important; }
/* Заголовок-плашка на светлом */
.calc-details.cal-tip .tip-head {
    margin: -13px -16px 11px;
    background: linear-gradient(90deg, rgba(79,70,229,0.13) 0%, rgba(79,70,229,0.035) 65%, rgba(79,70,229,0) 100%);
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    color: #1e293b;
}
.calc-details.cal-tip .tip-head b { color: #1e293b !important; }

/* ===================================================
   ЗОНА СРАВНЕНИЯ ГИПОТЕЗ
   Деликатный фон во всю ширину экрана, чтобы визуально отделить
   песочницу гипотез от главной рабочей зоны.
   Полоса тянется чуть выше первой карточки и до низа последней.
   =================================================== */
#sandboxesMasterContainer.hyp-zone {
    position: relative;
    background: linear-gradient(180deg, #eceff5 0%, #f2f4f8 100%);
    padding-top: 1.2rem;                         /* «воздух» сверху над первой карточкой (сокращён ~на 25px) */
    padding-bottom: 2.75rem;                     /* и снизу под последней */
    box-shadow: inset 0 1px 0 rgba(148,163,184,0.30),
                inset 0 -1px 0 rgba(148,163,184,0.30);
}

/* Навигация по зоне гипотез: значок слева сверху (вниз) и слева снизу (вверх).
   left задаётся из JS (positionHypNav) — вплотную к крайней доске.
   z-index выше зоны «НАВЕРХ» (#scrollToTopZone, z-90), чтобы кнопки были поверх неё. */
.hyp-nav {
    position: absolute;
    left: 16px;                  /* запасное значение; реальное ставит JS */
    z-index: 95;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(79,70,229,0.28);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hyp-nav:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: scale(1.1);
    box-shadow: 0 12px 26px -6px rgba(79,70,229,0.5);
}
.hyp-nav svg { width: 22px; height: 22px; display: block; }   /* block — убирает inline-сдвиг внутри flex, иконка строго по центру */
.hyp-nav-down { top: 2.4rem; }       /* у верхней границы зоны, слева от первой гипотезы */
.hyp-nav-up   { bottom: 2.4rem; }    /* у нижней границы зоны, слева от гипотезы */
/* Прячем кнопки, когда зона гипотез скрыта (на всякий случай) */
#sandboxesMasterContainer.hidden .hyp-nav { display: none; }
@media (max-width: 720px) {
    .hyp-nav { left: 8px; width: 36px; height: 36px; }
    .hyp-nav svg { width: 19px; height: 19px; }
}

/* Только прозрачность — НЕ анимируем transform, иначе он конфликтует с
   центрирующим translateX(-50%) у тултипов и вызывает «дёрганье» при открытии */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.header-settings-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: flex-start;   /* заголовки колонок выровнены по верху (Цикл больше не «проседает») */
    justify-content: space-between;
}

.header-col {
    flex: 1 1 auto;          /* ширина по содержимому + равномерно делим остаток (без пустот у узких колонок) */
    min-width: 0;
    text-align: center;
    padding: 0 9px;          /* единый зазор между всеми колонками */
}

/* ── Мобилка: 6 колонок не влезают в один ряд → раскладываем сеткой 3×2,
      иначе заголовки наезжают друг на друга («МРОТМСПРАЙОН…»). ── */
@media (max-width: 639px) {
    .header-settings-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 0;
    }
    .header-settings-row .header-col { padding: 0 5px; }
    /* В сетке 4-я колонка (ОКВЭД) встаёт в начало 2-го ряда — убираем её левую границу */
    .header-settings-row .header-col:nth-child(4) { border-left: none !important; }

    /* Попапы колонок в сетке привязаны к краю экрана и вылазят за вьюпорт.
       На мобилке показываем их как центрированное окно — без обрезки и горизонтального скролла. */
    #mspPopover, #okvedPopover, #rkPopover, #cyclePopover, #opsLimitPopover {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        max-width: 360px !important;
        max-height: 82vh !important;
        overflow-y: auto !important;
        z-index: 100000 !important;
    }
}
/* Гасим «врождённую» 20-символьную ширину текстовых инпутов, иначе flex:auto раздувает их колонки.
   ВАЖНО: только ПРЯМЫЕ инпуты-значения колонки (> input), не инпуты внутри попапов (поиск/свой %). */
.header-col > input { width: 3.9em; max-width: 100%; }

.header-col label {
    font-size: 8px;
    margin-bottom: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    min-height: 16px;          /* одинаковая высота заголовков */
}

.header-col > input, .header-col > select {
    font-size: 0.9rem !important;
    text-align: center;
    padding: 0;
}

/* Единая вертикаль для ВСЕХ значений-«цифр» (фикс. высота-бокс) → они стоят в один ряд */
.header-col > input, .header-col > select,
#mspDisplay, #cycleDisplay, #okvedDisplay {
    height: 1.55rem;
    line-height: 1.55rem;
}
#mspDisplay, #cycleDisplay, #okvedDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .header-col label { font-size: 10px; }
    .header-col > input, .header-col > select { font-size: 1.1rem !important; }
    .header-col > input, .header-col > select,
    #mspDisplay, #cycleDisplay, #okvedDisplay { height: 1.8rem; line-height: 1.8rem; }
}

@media (min-width: 768px) {
    .header-col label { font-size: 11px; }
    .header-col > input, .header-col > select { font-size: 1.25rem !important; }
    .header-col > input, .header-col > select,
    #mspDisplay, #cycleDisplay, #okvedDisplay { height: 1.95rem; line-height: 1.95rem; }
}

/* ── «Сбросить всё»: наведение на кружок-стрелки проявляет кнопку на весь блок ── */
.reset-rail { cursor: pointer; transition: background-color .2s, color .2s; }
.reset-rail:hover { background: #fff1f2; color: #e11d48; }      /* лёгкий намёк до проявления */
.reset-overlay {
    opacity: 0;
    transform: scale(1.035);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;   /* скрытие — мягкое */
}
.reset-overlay svg { transition: transform .7s ease; }
/* показываем оверлей при наведении на кружок ИЛИ на сам оверлей (чтобы можно было дотянуться и кликнуть) */
.reset-rail:hover ~ .reset-overlay,
.reset-overlay:hover {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    /* появление — плавное, с лёгкой задержкой, чтобы не «выстреливало» при касании */
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1) .12s,
                transform .5s cubic-bezier(.22, 1, .36, 1) .12s;
}
.reset-rail:hover ~ .reset-overlay svg,
.reset-overlay:hover svg { transform: rotate(-360deg); }

.pulse-alert {
    animation: pulseBg 2s infinite;
}

@keyframes pulseBg { 
    0% { background-color: #fee2e2; } 
    50% { background-color: #fca5a5; } 
    100% { background-color: #fee2e2; } 
}

/* Эффект для скрытия цифр */
.privacy-hidden {
    filter: blur(5px) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Изменение цвета глазика при активации */
.eye-active {
    color: #6366f1 !important;
}

/* Поля, заблокированные источниками дохода */
.rs-locked {
    background: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
}

/* Убираем стрелку у тултипов с классом no-triangle */
.no-triangle::before, .no-triangle::after { display: none !important; }

/* ===================================================
   КНОПКА И ПОПАП ДАТЫ НАЧАЛА ДЕЯТЕЛЬНОСТИ
   =================================================== */

/* --- КНОПКА В ШАПКЕ --- */

#bizDateBtn.biz-date-active {
    background: #eef2ff;
    border-color: #c7d2fe !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
#bizDateBtn.biz-date-active .biz-date-btn-icon {
    background: linear-gradient(135deg,#e0e7ff,#ede9fe);
    border-color: #c7d2fe;
}
#bizDateBtn.biz-date-active .biz-date-btn-icon svg {
    color: #6366f1;
}
#bizDateBtn.biz-date-active #bizDateBtnLabel {
    color: #4338ca;
}

/* --- ПОПАП --- */

.biz-cal-popup {
    position: fixed;
    z-index: 999999;
    filter: drop-shadow(0 18px 50px rgba(79,70,229,0.22));
    animation: bizCalIn 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
.biz-cal-popup.hidden { display: none; }

@keyframes bizCalIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.biz-cal-popup { padding-top: 7px; }
.biz-cal-inner {
    position: relative;
    width: 290px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

/* Стрелка-указатель сверху (на попапе, чтобы не обрезалась overflow) */
.biz-cal-popup::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: linear-gradient(135deg,#eef2ff,#eef2ff);
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    border-radius: 3px 0 0 0;
    z-index: 1;
}

/* Шапка-подсказка */
.biz-cal-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg,#eef2ff,#faf5ff);
}
.biz-cal-top-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.biz-cal-top-title {
    font-size: 10px;
    font-weight: 900;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}
.biz-cal-top-hint {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.4;
}

/* Навигация: пред/след месяц */
.biz-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 4px;
}
.biz-cal-nav-btn {
    width: 30px; height: 30px;
    border-radius: 10px;
    background: #f1f5f9;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
    transition: all 0.15s;
}
.biz-cal-nav-btn:hover:not(:disabled) {
    background: #e0e7ff;
    color: #4f46e5;
}
.biz-cal-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.biz-cal-month-label {
    font-size: 14px;
    font-weight: 900;
    color: #1e293b;
    letter-spacing: -0.01em;
}

/* Заголовки дней недели */
.biz-cal-daynames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 4px 12px 2px;
    gap: 2px;
}
.biz-cal-daynames > div {
    text-align: center;
    font-size: 9px;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    padding: 3px 0;
    letter-spacing: 0.04em;
}
.biz-cal-daynames > div.weekend { color: #cbd5e1; }

/* Сетка дней */
.biz-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 10px 10px;
    gap: 2px;
}
.biz-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    border: 1px solid transparent;
    user-select: none;
}
.biz-cal-day:hover:not(.empty):not(.selected) {
    background: #eef2ff;
    color: #4f46e5;
}
.biz-cal-day.today {
    border-color: #c7d2fe;
    color: #4f46e5;
    font-weight: 900;
}
.biz-cal-day.selected {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: white;
    font-weight: 900;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(99,102,241,0.45);
}
.biz-cal-day.weekend:not(.selected):not(.today) { color: #cbd5e1; }
.biz-cal-day.empty { cursor: default; pointer-events: none; }

/* Футер — вертикальный: строка с датой, ниже кнопки (чтобы дата не наезжала на кнопки) */
.biz-cal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.biz-cal-preview-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.biz-cal-preview-lbl {
    font-size: 8px;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
    flex-shrink: 0;
}
.biz-cal-preview-val {
    font-size: 13px;
    font-weight: 900;
    color: #94a3b8;
    transition: color 0.15s;
    white-space: nowrap;
}
.biz-cal-preview-val.has-date { color: #4f46e5; }
.biz-cal-footer-btns { justify-content: flex-end; }

.biz-cal-footer-btns { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.biz-cal-btn-reset {
    padding: 6px 11px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 9px; font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.biz-cal-btn-reset:hover { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }

.biz-cal-btn-apply {
    padding: 7px 15px;
    border-radius: 10px;
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    border: none;
    color: white;
    font-size: 9px; font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.biz-cal-btn-apply:hover  { transform: scale(1.03); box-shadow: 0 6px 18px rgba(99,102,241,0.5); }
.biz-cal-btn-apply:active { transform: scale(0.97); }

/* Кнопка подтверждения названия точки — видна только при редактировании (focus) */
.name-confirm-btn {
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.name-edit-group:focus-within .name-confirm-btn,
.name-edit-group.name-editing .name-confirm-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Режим "Без работников" — приглушаем поле МСП (льгота только для штата) */
#mspHeaderCol.msp-disabled label,
#mspHeaderCol.msp-disabled #mspDisplay {
    opacity: 0.4;
    filter: grayscale(0.8);
    pointer-events: none;
}

/* Режим "Без работников" — приглушаем секцию штата */
.no-staff-disabled {
    opacity: 0.45;
    filter: grayscale(0.7);
    pointer-events: none;
    position: relative;
}
.no-staff-disabled::after {
    content: "Режим «Без работников» — штат не учитывается";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fcd34d;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

/* Бейдж "неполный год" в компактном календаре */
.partial-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 2px 8px;
    animation: fadeIn 0.2s ease-out;
}

/* Валидация: красная рамка при нечисловом вводе */
.\\!border-rose-400 {
    border-color: #fb7185 !important;
}

/* Подсказка об ошибке ввода */
.input-err-hint {
    font-size: 10px;
    color: #f43f5e;
    font-weight: 700;
    position: absolute;
    left: 0;
    bottom: -16px;
    white-space: nowrap;
    pointer-events: none;
    animation: fadeIn 0.15s ease-out;
}

/* Блок-инпут выручки полностью скрыт когда активны источники */
.rs-field-hidden {
    display: none !important;
}

/* ==========================================================
   ОНБОРДИНГ-ТУР (интерактивная инструкция со спотлайтом)
   ========================================================== */

/* Во время тура прячем верхнюю закреплённую панель — чтобы не наезжала на окно шага */
body.tour-running #stickySummaryBar {
    transform: translateY(-100%) !important;
    pointer-events: none !important;
}

#tourBackdrop {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    pointer-events: auto;
    background: transparent;
    opacity: 0;
    transition: opacity .35s ease, background .35s ease;
}
#tourBackdrop.tour-visible { opacity: 1; }
#tourBackdrop.tour-dark { background: rgba(15, 23, 42, .86); }

#tourSpotlight {
    position: fixed;
    z-index: 2000001;
    pointer-events: none;
    border-radius: 18px;
    opacity: 0;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .82),
                0 0 0 3px rgba(129, 140, 248, .95),
                0 0 32px 6px rgba(99, 102, 241, .55);
    transition: top .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1),
                width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1),
                opacity .22s ease;
}
#tourSpotlight.tour-visible { opacity: 1; }
@keyframes tourPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(15,23,42,.82), 0 0 0 3px rgba(129,140,248,.9),  0 0 24px 3px rgba(99,102,241,.45); }
    50%      { box-shadow: 0 0 0 9999px rgba(15,23,42,.82), 0 0 0 4px rgba(165,180,252,1),   0 0 38px 9px rgba(99,102,241,.8); }
}
#tourSpotlight.tour-pulse { animation: tourPulse 2.4s ease-in-out infinite; }

#tourCard {
    position: fixed;
    z-index: 2000010;
    width: 408px;
    max-width: calc(100vw - 28px);
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 30px 70px -12px rgba(2, 6, 23, .62);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.56,.64,1), top .28s ease, left .28s ease;
    pointer-events: auto;
    text-transform: none;
}
#tourCard.tour-visible { opacity: 1; transform: translateY(0) scale(1); }

#tourCard .tour-arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #4f46e5;
    transform: rotate(45deg);
    z-index: -1;
}

/* ── Текст шага: аккуратные абзацы, списки и акценты ───────────────── */
.tour-text {
    font-size: 14px;
    line-height: 1.62;
    color: #475569;
    font-weight: 500;
}
.tour-text p { margin: 0 0 11px; }
.tour-text p:last-child { margin-bottom: 0; }
.tour-text b, .tour-text strong { color: #1e293b; font-weight: 800; }
.tour-text ul {
    list-style: none;
    margin: 10px 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tour-text li {
    position: relative;
    padding-left: 22px;
}
.tour-text li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #6366f1;
    transform: translateY(-50%) rotate(45deg);
}
/* Призыв к действию («нажми кнопку прямо сейчас») */
.tour-text .tour-cta {
    display: block;
    margin: 13px 0 0;
    padding: 11px 14px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.22);
    border-radius: 14px;
    color: #4338ca;
    font-weight: 700;
    line-height: 1.5;
}
.tour-text .tour-cta b { color: #4338ca; }

/* Плавающая кнопка повторного запуска тура — свёрнута в значок «i», раскрывается на ховере */
#tourReplayBtn {
    position: fixed;
    z-index: 1000;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 0;                       /* свёрнуто: только иконка, без зазора */
    padding: 10px;                /* компактный кружок вокруг «i» */
    background: #4f46e5;
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 12px 30px -6px rgba(79, 70, 229, .6);
    cursor: pointer;
    border: none;
    opacity: 0.3;                 /* свёрнут — полупрозрачный */
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .25s ease, gap .25s ease, padding .25s ease,
                transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#tourReplayBtn svg { flex-shrink: 0; }
/* Текст по умолчанию свёрнут (видна только иконка «i») */
#tourReplayBtn span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s ease, opacity .25s ease;
}
/* При наведении — раскрываемся: 100% непрозрачности + полный текст */
#tourReplayBtn:hover {
    opacity: 1;
    gap: 8px;
    padding: 10px 16px;
    transform: translateY(-2px);
    background: #4338ca;
    box-shadow: 0 16px 36px -6px rgba(79, 70, 229, .7);
}
#tourReplayBtn:hover span { max-width: 260px; opacity: 1; }

/* Пульсация самого подсвеченного элемента (напр. кнопка гипотез) */
@keyframes tourElPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(99,102,241,0)); }
    50%      { transform: scale(1.28); filter: drop-shadow(0 0 8px rgba(99,102,241,.85)); }
}
.tour-el-pulse {
    animation: tourElPulse 1.1s ease-in-out infinite;
    color: #6366f1 !important;
    position: relative;
    z-index: 2000002;
}

/* Фейерверк-канвас */
#tourFwCanvas {
    position: fixed;
    inset: 0;
    z-index: 2000005;
    pointer-events: none;
}

/* Финальный экран */
#tourFinale {
    position: fixed;
    inset: 0;
    z-index: 2000010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 24px;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .6s ease;
    text-transform: none;
    /* фон почти невидимый: лёгкое радиальное свечение по центру — только чтобы текст читался */
    background: radial-gradient(ellipse 60% 50% at center, rgba(10,12,26,.5) 0%, rgba(10,12,26,.22) 42%, rgba(10,12,26,0) 72%);
}
#tourFinale.tour-visible { opacity: 1; }

/* Ползунок гипотезы: заливка от центра (0%) до бегунка показывает прирост/спад */
.mini-slider-styled {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    outline: none;
    /* фон-заливку задаёт JS (updateMiniSliderFill); дефолт — серый трек */
    background: #e2e8f0;
}
.mini-slider-styled::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #4f46e5;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 5px rgba(79, 70, 229, .55);
    cursor: pointer;
    transition: transform .12s;
}
.mini-slider-styled::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mini-slider-styled::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #4f46e5;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 5px rgba(79, 70, 229, .55);
    cursor: pointer;
}

/* Рукописная подсказка у первой точки (во время фейерверка и после) */
#tourFirstHint {
    position: fixed;
    z-index: 2000050;
    pointer-events: none;
    width: 230px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(.95);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.85,.3,1.3);
}
#tourFirstHint.tfh-in  { opacity: 1; transform: translateY(0) scale(1); }
#tourFirstHint.tfh-out { opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .5s ease, transform .5s ease; }
#tourFirstHint .tfh-text {
    font-family: 'Caveat', 'Manrope', cursive;
    font-weight: 700;
    font-size: 31px;
    line-height: 1.04;
    color: #4f46e5;
    transform: rotate(-4deg);
    text-shadow: 0 2px 12px rgba(255,255,255,.95), 0 1px 3px rgba(99,102,241,.35);
}
#tourFirstHint .tfh-arrow {
    display: block;
    width: 108px;
    height: 64px;
    margin: 4px auto 0;
    color: #fb7185;
    filter: drop-shadow(0 2px 5px rgba(251,113,133,.3));
    animation: tfhArrowFloat 2.4s ease-in-out infinite;
}
@keyframes tfhArrowFloat {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50%      { transform: translate(3px, 2px) rotate(1.5deg); }
}

.tour-handwriting {
    font-family: 'Caveat', 'Manrope', cursive;
    font-weight: 700;
    font-size: clamp(38px, 7vw, 74px);
    line-height: 1.1;
    text-align: center;
    color: #ffffff;
    white-space: pre-line;
    max-width: 18ch;
    transform-origin: center;
    text-shadow: 0 4px 34px rgba(99, 102, 241, .75), 0 2px 12px rgba(0, 0, 0, .6), 0 0 70px rgba(255, 255, 255, .22);
    animation: tourTextIn 1.05s cubic-bezier(.2,.85,.3,1.25) both;
}
/* текст уже сформирован и красиво «вылетает» из центра, чуть по диагонали */
@keyframes tourTextIn {
    0%   { opacity: 0; transform: scale(.38) rotate(-13deg); filter: blur(7px); }
    62%  { opacity: 1; transform: scale(1.05) rotate(-1.5deg); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(-3.5deg); }
}
.tour-handwriting .tour-heart {
    color: #fb7185;
    display: inline-block;
    animation: tourHeart 1s ease-in-out infinite;
    text-shadow: 0 2px 16px rgba(251, 113, 133, .85);
}
@keyframes tourHeart {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.28); }
}

/* Стрелка-подсказка «Нажмите на кнопку» у кнопки Гипотезы (шаг 11) */
#tourHypArrow {
    position: fixed;
    z-index: 2000050;
    pointer-events: none;
    width: 172px;
    text-align: right;
    opacity: 0;
    transform: translateY(8px) scale(.95);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.85,.3,1.3);
}
#tourHypArrow.tha-in  { opacity: 1; transform: translateY(0) scale(1); }
#tourHypArrow.tha-out { opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .2s ease, transform .2s ease; }
#tourHypArrow .tha-text {
    font-family: 'Caveat', 'Manrope', cursive;
    font-weight: 700;
    font-size: 27px;
    line-height: 1.04;
    color: #ffffff;
    transform: translateX(7px) rotate(-3deg);
    text-shadow: 0 1px 3px rgba(219,39,119,.3);
    padding-right: 6px;
}
#tourHypArrow .tha-arrow {
    display: block;
    width: 112px;
    height: 70px;
    margin: 2px auto 0;
    color: #db2777;
    filter: drop-shadow(0 2px 5px rgba(219,39,119,.3));
    animation: tfhArrowFloat 2.4s ease-in-out infinite;
}

/* Палец-подсказка в интерактивных шагах */
.tour-hint-finger { display: inline-block; animation: tourFinger .9s ease-in-out infinite; font-size: 17px; }
@keyframes tourFinger {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

#tourFinaleBtn {
    font-family: 'Manrope', sans-serif;
    background: #ffffff;
    color: #4338ca;
    font-weight: 800;
    font-size: 16px;
    padding: 14px 32px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .5);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: tourBtnIn .6s .9s both;
}
#tourFinaleBtn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 50px -8px rgba(0, 0, 0, .6); }
@keyframes tourBtnIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}