/*
 * v0-theme.css — дизайн-система createlink.link.
 *
 * Джерело: макет від v0 (createlink-homepage.zip, 25.08.2026) + DESIGN_GUIDELINES.md
 * із того ж архіву. Макет написаний на Tailwind; тут ті самі рішення перекладені
 * у звичайний CSS, бо в нас Jinja + Bootstrap, а не React.
 *
 * Підключається з base.html ПІСЛЯ hex-theme.css — частина правил перебиває
 * старий фіолетовий вигляд шапки й підвалу, тож порядок має значення.
 *
 * КОЛЬОРОВА ЛОГІКА (гайд v0 обмежує палітру трьома шарами — не додавати нові):
 *   бірюза (primary) — акцент: дії, іконки, цифри, обідки
 *   медовий (honey)  — другий акцент: тільки «хіт» тарифу й криптоплатежі
 *   темне скло       — матеріал: картки, шапка, підвал
 * Фіолетового #667eea тут навмисно немає: у макеті v0 палітра зведена до
 * бірюзи + меду, і фіолетовий у ній читався б як четвертий, зайвий акцент.
 * Зелений лишається тільки там, де він означає «безкоштовно/успіх».
 *
 * Фон НЕ чіпаємо: соти малює hex-bg.js, шви в них — rgb(79,232,255). Саме тому
 * акцент тут бірюзовий: картка й фон світяться одним кольором.
 */

.hex-theme {
    /* Акценти. --v0-primary трохи глибший за шви сот (--v0-glow), щоб текст
       кнопки не «дзвенів», а свічення довкола картки збігалося з фоном. */
    --v0-primary: #3ce0ec;
    --v0-glow: 79, 232, 255;      /* rgb-компоненти швів: для rgba(...) у тінях */
    --v0-on-primary: #06131a;     /* темний текст на бірюзовій заливці */
    --v0-honey: #f2b13c;
    --v0-honey-rgb: 242, 177, 60;
    --v0-on-honey: #1b1204;

    /* Текст */
    --v0-fg: #f1f5f9;
    --v0-muted: #9fb2c4;          /* другорядний текст; контраст на склі ~7:1 */
    --v0-faint: #7c8fa3;

    /* Матеріал */
    --v0-card: rgba(16, 30, 43, 0.55);
    --v0-card-hi: rgba(20, 38, 54, 0.72);
    --v0-popover: rgba(12, 24, 35, 0.94);
    --v0-border: rgba(94, 230, 240, 0.18);
    --v0-border-hi: rgba(94, 230, 240, 0.38);
    --v0-accent: rgba(60, 224, 236, 0.13);
    --v0-danger: #ff6b5e;
    --v0-ok: #5ddba4;

    /* Радіуси — шкала v0 (--radius 0.625rem × 1 / 1.4 / 1.8) */
    --v0-r-lg: 10px;
    --v0-r-xl: 14px;
    --v0-r-2xl: 18px;

    /* Другий шрифт. Гайд v0 дозволяє рівно два: основний і моноширинний.
       Свій моношрифт не вантажимо — зайвий запит заради логотипа й цифр не
       вартий того; системний стек виглядає однаково на всіх платформах. */
    --v0-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
               Menlo, Consolas, monospace;
}

/* ============================================================
   1. Свічення — головний прийом макета
   ============================================================
   У v0 це утиліта .glow-border: тонка лінія + м'який ореол назовні +
   ледь помітне підсвічування зсередини. Робиться однією тінню в три шари,
   тому не займає border і його можна класти поверх будь-якої картки. */

.hex-theme .glow-border {
    box-shadow:
        0 0 0 1px rgba(var(--v0-glow), 0.22),
        0 0 22px -6px rgba(var(--v0-glow), 0.55),
        inset 0 0 20px -14px rgba(var(--v0-glow), 0.75);
}

.hex-theme .glow-border-honey {
    box-shadow:
        0 0 0 1px rgba(var(--v0-honey-rgb), 0.34),
        0 0 28px -6px rgba(var(--v0-honey-rgb), 0.55),
        inset 0 0 22px -14px rgba(var(--v0-honey-rgb), 0.75);
}

.hex-theme .text-glow {
    text-shadow: 0 0 24px rgba(var(--v0-glow), 0.5);
}

/* ============================================================
   2. Скляна картка
   ============================================================
   Головний матеріал сайту. Свідомо НЕ .glass-card: у base.html на той клас
   навішано з десяток правил color:...!important, які перефарбовують геть
   увесь текст усередині. Нова картка починає з чистого аркуша. */

.hex-theme .v0-card {
    position: relative;
    background: var(--v0-card);
    border: 1px solid var(--v0-border);
    border-radius: var(--v0-r-2xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--v0-fg);
}

/* Наведення підіймає прозорість, а не додає рух: картки стоять у сітці,
   і зсув сусіда по вертикалі виглядав би як смикання. */
.hex-theme .v0-card-hover {
    transition: background 0.25s ease, border-color 0.25s ease;
}

.hex-theme .v0-card-hover:hover {
    background: var(--v0-card-hi);
    border-color: var(--v0-border-hi);
}

/* Вкладена картка — на тон світліша за материнську, без власного свічення,
   інакше два ореоли накладаються й контур розмивається. */
.hex-theme .v0-inset {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--v0-r-xl);
}

.hex-theme .v0-inset-accent {
    background: var(--v0-accent);
    border-color: rgba(var(--v0-glow), 0.28);
}

.hex-theme .v0-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
    border: 0;
    margin: 0;
}

/* ============================================================
   3. Типографіка
   ============================================================ */

.hex-theme .v0-mono { font-family: var(--v0-mono); }
.hex-theme .v0-muted { color: var(--v0-muted); }
.hex-theme .v0-faint { color: var(--v0-faint); }
.hex-theme .v0-accent { color: var(--v0-primary); }
.hex-theme .v0-honey-tx { color: var(--v0-honey); }

/* Надзаголовок секції: моноширинний, розрідженими великими літерами.
   У макеті це єдине, що відрізняє секцію від секції, — заголовки однакові. */
.hex-theme .v0-eyebrow {
    font-family: var(--v0-mono);
    font-size: 0.72rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--v0-primary);
    margin-bottom: 0.75rem;
}

.hex-theme .v0-h1 {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--v0-fg);
    text-wrap: balance;
}

.hex-theme .v0-h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--v0-fg);
    text-wrap: balance;
}

.hex-theme .v0-h3 {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--v0-fg);
}

.hex-theme .v0-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--v0-muted);
    text-wrap: pretty;
}

.hex-theme .v0-body {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--v0-muted);
    text-wrap: pretty;
}

/* Логотип-словознак: моноширинний, «link» — бірюзовий. */
.hex-theme .v0-wordmark {
    font-family: var(--v0-mono);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v0-fg);
    text-decoration: none;
}
.hex-theme .v0-wordmark b {
    color: var(--v0-primary);
    font-weight: 600;
}

/* ============================================================
   4. Плитка з іконкою
   ============================================================
   У макеті кожна картка починається з квадрата 44×44 з обідком і бірюзовою
   іконкою. Замість <lucide> у нас Font Awesome — розмір задаємо тут, щоб
   у розмітці не було інлайнових font-size. */

.hex-theme .v0-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--v0-r-xl);
    background: var(--v0-accent);
    border: 1px solid var(--v0-border);
    color: var(--v0-primary);
    font-size: 1.05rem;
}

.hex-theme .v0-tile-lg {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 1.5rem;
    border-radius: var(--v0-r-2xl);
}

.hex-theme .v0-tile-honey {
    background: rgba(var(--v0-honey-rgb), 0.13);
    border-color: rgba(var(--v0-honey-rgb), 0.30);
    color: var(--v0-honey);
}

.hex-theme .v0-card-hover:hover .v0-tile {
    color: var(--v0-primary);
    text-shadow: 0 0 18px rgba(var(--v0-glow), 0.6);
}

/* Великий напівпрозорий номер кроку у правому куті картки. */
.hex-theme .v0-step-num {
    font-family: var(--v0-mono);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(159, 178, 196, 0.22);
    transition: color 0.25s ease;
}

.hex-theme .v0-card-hover:hover .v0-step-num {
    color: rgba(var(--v0-glow), 0.30);
}

/* ============================================================
   5. Кнопки
   ============================================================
   .v0-btn свідомо не успадковує .btn Bootstrap-а: у нього своя система
   станів із !important, і кожен hover довелося б перебивати двічі. */

.hex-theme .v0-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.62rem 1.15rem;
    border-radius: var(--v0-r-xl);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, box-shadow 0.22s ease;
}

.hex-theme .v0-btn:focus-visible {
    outline: 2px solid rgba(var(--v0-glow), 0.7);
    outline-offset: 2px;
}

.hex-theme .v0-btn-lg {
    padding: 0.85rem 1.7rem;
    font-size: 1rem;
    border-radius: 999px;
}

.hex-theme .v0-btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: var(--v0-r-lg);
}

.hex-theme .v0-btn-pill { border-radius: 999px; }
.hex-theme .v0-btn-block { width: 100%; }

/* Головна дія. Заливка на 90% прозорості — крізь неї видно соти, як у макеті.
   ⛔ НЕ додавати сюди backdrop-filter. У макеті v0 він тут є, але в нас кнопка
   лежить усередині .v0-card, у якої backdrop-filter уже свій. Вкладений
   backdrop-filter Chromium малює ПОВЕРХ власного тексту кнопки: у тарифах
   вийшли п'ять порожніх бірюзових прямокутників без напису й без заокруглень
   (спіймано на скріні 01.09.2026). На 90% непрозорості розмиття все одно
   не видно — втрати нульові. */
.hex-theme .v0-btn-primary {
    background: rgba(60, 224, 236, 0.9);
    color: var(--v0-on-primary);
}

.hex-theme .v0-btn-primary:hover,
.hex-theme .v0-btn-primary:focus {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
}

/* Медова — тільки «хіт» тарифу. Більше ніде: другий акцент, ужитий двічі,
   перестає бути акцентом. */
.hex-theme .v0-btn-honey {
    background: rgba(var(--v0-honey-rgb), 0.9);
    color: var(--v0-on-honey);
}

.hex-theme .v0-btn-honey:hover,
.hex-theme .v0-btn-honey:focus {
    background: var(--v0-honey);
    color: var(--v0-on-honey);
}

/* Другорядна — скло з обідком. */
.hex-theme .v0-btn-outline {
    background: rgba(16, 30, 43, 0.45);
    border-color: var(--v0-border);
    color: var(--v0-fg);
    /* backdrop-filter тут теж заборонений — див. коментар до .v0-btn-primary:
       ця кнопка стоїть у картці профілю й у панелі білінгу. */
}

.hex-theme .v0-btn-outline:hover,
.hex-theme .v0-btn-outline:focus {
    background: var(--v0-accent);
    border-color: var(--v0-border-hi);
    color: var(--v0-fg);
}

.hex-theme .v0-btn-ghost {
    background: transparent;
    color: var(--v0-muted);
}

.hex-theme .v0-btn-ghost:hover,
.hex-theme .v0-btn-ghost:focus {
    background: var(--v0-accent);
    color: var(--v0-fg);
}

/* Руйнівна дія лишається червоною — колір тут несе попередження. */
.hex-theme .v0-btn-danger {
    background: rgba(255, 107, 94, 0.12);
    border-color: rgba(255, 107, 94, 0.32);
    color: var(--v0-danger);
}

.hex-theme .v0-btn-danger:hover,
.hex-theme .v0-btn-danger:focus {
    background: rgba(255, 107, 94, 0.22);
    border-color: rgba(255, 107, 94, 0.55);
    color: #fff;
}

/* Квадратна кнопка-іконка (олівець, кошик). */
.hex-theme .v0-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 32px;
    border-radius: var(--v0-r-lg);
    font-size: 0.8rem;
}

/* ============================================================
   6. Чипи й бейджі
   ============================================================ */

.hex-theme .v0-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(16, 30, 43, 0.5);
    border: 1px solid var(--v0-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--v0-muted);
    text-decoration: none;
}

.hex-theme .v0-pill i { color: var(--v0-primary); }
.hex-theme .v0-pill-honey i { color: var(--v0-honey); }

.hex-theme .v0-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--v0-r-lg);
    background: var(--v0-accent);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v0-primary);
}

.hex-theme .v0-badge-soft {
    background: rgba(255, 255, 255, 0.07);
    color: var(--v0-muted);
}

/* «Хіт» над карткою тарифу. */
.hex-theme .v0-badge-top {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background: var(--v0-honey);
    color: var(--v0-on-honey);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Другий бейдж над карткою — бірюзовий (VIP: «найдешевше посилання»). Медовий
   лишається рівно одному «хіту», інакше два акценти сперечаються за увагу. */
.hex-theme .v0-badge-top-alt {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
}

/* Плашка над логотипом губилась на фоні сот — вона перший рядок, який читає
   відвідувач, тож трохи щільніший напис. Тільки в героя: та сама `.v0-pill`
   стоїть у чипах тарифів, де жирність не потрібна. */
.hex-theme .v0-hero .v0-pill {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Пульсуюча крапка «онлайн» у чипі героя. */
.hex-theme .v0-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
}
.hex-theme .v0-dot::before,
.hex-theme .v0-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--v0-primary);
}
.hex-theme .v0-dot::before {
    animation: v0-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}

@keyframes v0-ping {
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hex-theme .v0-dot::before { animation: none; }
}

/* ============================================================
   7. Смуга прогресу
   ============================================================ */

.hex-theme .v0-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.hex-theme .v0-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--v0-primary);
    box-shadow: 0 0 16px -2px rgba(var(--v0-glow), 0.9);
    transition: width 0.5s ease;
}

.hex-theme .v0-fill-low {
    background: var(--v0-honey);
    box-shadow: 0 0 16px -2px rgba(var(--v0-honey-rgb), 0.9);
}

.hex-theme .v0-fill-off {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

/* ============================================================
   8. Секції сторінки
   ============================================================ */

.hex-theme .v0-section {
    max-width: 1120px;
    margin-inline: auto;
    padding: 4.5rem 1rem;
}

.hex-theme .v0-section-head {
    text-align: center;
    margin-bottom: 3rem;
}

@media (max-width: 767.98px) {
    .hex-theme .v0-section { padding: 3rem 1rem; }
    .hex-theme .v0-section-head { margin-bottom: 2rem; }
}

/* ============================================================
   9. Шапка й підвал — перефарбування старої розмітки base.html
   ============================================================
   Розмітку шапки не переписуємо: до неї прив'язані мобільне меню, випадайки
   мови й користувача. Міняємо тільки шкіру — і тільки те, що було фіолетовим
   або білим-напівпрозорим. */

/* Фіолетова плитка логотипа → бірюзове скло. */
.hex-theme .brand-icon-container {
    background: var(--v0-accent);
    border: 1px solid var(--v0-border);
    color: var(--v0-primary);
    box-shadow: 0 0 18px -6px rgba(var(--v0-glow), 0.6);
    border-radius: var(--v0-r-lg);
}

.hex-theme .modern-brand:hover .brand-icon-container {
    transform: none;   /* поворот на 5° лишився від старої теми — прибираємо */
    background: rgba(60, 224, 236, 0.2);
    box-shadow: 0 0 22px -4px rgba(var(--v0-glow), 0.8);
}

.hex-theme .modern-brand,
.hex-theme .modern-brand:hover {
    color: var(--v0-fg) !important;
    transform: none;
}

.hex-theme .brand-name {
    font-family: var(--v0-mono);
    font-weight: 600;
}

.hex-theme .brand-tld {
    color: var(--v0-primary);
    opacity: 1;
}

.hex-theme .brand-tagline {
    font-family: var(--v0-mono);
    letter-spacing: 0.2em;
    color: var(--v0-faint);
    opacity: 1;
}

/* Кнопки навігації: прибираємо фіолетовий hover і «пробіг» світла. */
.hex-theme .modern-nav-item::before { display: none; }

.hex-theme .modern-nav-item {
    border-radius: var(--v0-r-lg);
    background: transparent;
    border: 1px solid transparent;
    color: var(--v0-muted) !important;
}

.hex-theme .modern-nav-item:hover,
.hex-theme .modern-nav-item:focus {
    background: var(--v0-accent);
    border-color: var(--v0-border);
    color: var(--v0-fg) !important;
    transform: none;
    box-shadow: none;
}

.hex-theme .modern-nav-item.active {
    background: var(--v0-accent);
    border-color: var(--v0-border-hi);
    color: var(--v0-fg) !important;
}

.hex-theme .modern-nav-item .nav-text { color: inherit !important; }

/* Плитка іконки в пункті меню була фіолетовим градієнтом. */
.hex-theme .nav-icon-container,
.hex-theme .modern-nav-item:hover .nav-icon-container {
    background: transparent;
    color: var(--v0-primary);
    transform: none;
}

/* Випадайки мови й користувача. */
.hex-theme .glass-dropdown-custom {
    background: var(--v0-popover) !important;
    border: 1px solid var(--v0-border) !important;
    border-radius: var(--v0-r-xl) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hex-theme .dropdown-item-custom {
    color: var(--v0-muted) !important;
    border-radius: var(--v0-r-lg);
}

.hex-theme .dropdown-item-custom:hover,
.hex-theme .dropdown-item-custom:focus {
    background: var(--v0-accent) !important;
    color: var(--v0-fg) !important;
}

/* Підвал. */
.hex-theme .glass-footer {
    background: rgba(16, 30, 43, 0.5) !important;
    border-top: 1px solid var(--v0-border);
}

.hex-theme .footer-brand {
    font-family: var(--v0-mono);
    font-weight: 600;
    color: var(--v0-fg);
}

.hex-theme .footer-brand .opacity-75 {
    color: var(--v0-primary);
    opacity: 1 !important;
}

.hex-theme .footer-nav a {
    color: var(--v0-muted);
}

.hex-theme .footer-nav a:hover,
.hex-theme .footer-nav a:focus {
    color: var(--v0-primary);
}

.hex-theme .glass-footer .footer-rights {
    color: var(--v0-faint);
}

/* Кнопки «Вхід / Реєстрація» на головній (панель поверх героя). */
.hex-theme .auth-btn {
    background: rgba(16, 30, 43, 0.5);
    border: 1px solid var(--v0-border);
    border-radius: 999px;
    color: var(--v0-muted);
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hex-theme .auth-btn:hover,
.hex-theme .auth-btn:focus {
    background: var(--v0-accent);
    border-color: var(--v0-border-hi);
    color: var(--v0-fg);
}

/* Головна дія в шапці була зеленою. Зелений на сайті лишається значенням
   «безкоштовно», а не «головна кнопка», — тож тут бірюза. */
.hex-theme .auth-btn-primary {
    background: rgba(60, 224, 236, 0.9);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--v0-on-primary);
    font-weight: 600;
    box-shadow: 0 0 22px -6px rgba(var(--v0-glow), 0.75);
}

.hex-theme .auth-btn-primary:hover,
.hex-theme .auth-btn-primary:focus {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
    transform: none;
    box-shadow: 0 0 28px -4px rgba(var(--v0-glow), 0.9);
}

/* Меню мови на головній (окрема розмітка з інлайновими стилями). */
.hex-theme #customLanguageMenu {
    background: var(--v0-popover) !important;
    border: 1px solid var(--v0-border) !important;
    border-radius: var(--v0-r-xl) !important;
}

.hex-theme #customLanguageMenu .custom-lang-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--v0-muted) !important;
}

.hex-theme #customLanguageMenu .custom-lang-item:hover {
    background: var(--v0-accent) !important;
    border-color: var(--v0-border) !important;
    color: var(--v0-fg) !important;
}

/* ============================================================
   10. Сітка
   ============================================================
   Bootstrap-ові row/col тут не годяться: у бенто-сітці картка має займати
   дві колонки з трьох і при цьому тягнутись на всю висоту ряду. Це рівно те,
   для чого існує grid, — а гайд v0 дозволяє grid саме для 2D-розкладок. */

.hex-theme .v0-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .hex-theme .v0-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .hex-theme .v0-grid-5 { grid-template-columns: repeat(2, 1fr); }
    .hex-theme .v0-span-2 { grid-column: span 2; }
}

@media (min-width: 992px) {
    /* П'ять пакетів в один ряд — щоб уся шкала цін читалась одним поглядом. */
    .hex-theme .v0-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 0.9rem; }
}

/* ============================================================
   11. Головна: герой
   ============================================================ */

.hex-theme .v0-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-height: 78vh;
    padding: 5rem 1rem 3rem;
    text-align: center;
}

.hex-theme .v0-hero > * { margin: 0; }

.hex-theme .v0-hero .v0-h1 {
    font-family: var(--v0-mono);
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    letter-spacing: -0.03em;
}

/* «.link» приглушений: у словознаку головне — сама назва. */
.hex-theme .v0-tld {
    color: var(--v0-faint);
    font-weight: 600;
}

/* Прихований вхід в адмінку. Виглядає як звичайний ®, тому й не підсвічуємо. */
.hex-theme .v0-reg {
    font-size: 0.34em;
    vertical-align: super;
    color: var(--v0-faint);
    cursor: pointer;
    user-select: none;
}

.hex-theme .v0-hero-promise {
    max-width: 56ch;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.hex-theme .v0-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.hex-theme .v0-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--v0-muted);
}

.hex-theme .v0-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hex-theme .v0-hero-trust i { color: var(--v0-primary); }
.hex-theme .v0-hero-trust .v0-pill-honey i { color: var(--v0-honey); }

/* Стрілка їде вправо разом із наведенням на кнопку. */
.hex-theme .v0-arrow { transition: transform 0.2s ease; }
.hex-theme .v0-arrow-host:hover .v0-arrow { transform: translateX(3px); }

/* На /about шапка сайту лишається в потоці й уже дає відступ згори — герою
   стільки повітря не треба. На «/» (.v0-page-bare) шапка схована, а панель
   входу висить fixed, тож відступ мусить дати саме герой. */
.hex-theme .v0-page:not(.v0-page-bare) .v0-hero {
    min-height: 62vh;
    padding-top: 1rem;
}

@media (max-width: 575.98px) {
    .hex-theme .v0-hero { min-height: 0; padding-top: 6.5rem; }
    .hex-theme .v0-page:not(.v0-page-bare) .v0-hero { padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hex-theme .v0-arrow { transition: none; }
}

/* ============================================================
   12. Головна: секції
   ============================================================ */

.hex-theme .v0-section-sub {
    max-width: 60ch;
    margin: 0.75rem auto 0;
    font-size: 0.95rem;
}

.hex-theme .v0-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.hex-theme .v0-chip-row-end { margin-top: 2rem; }

.hex-theme .v0-crypto-brand {
    color: var(--v0-fg);
    font-weight: 600;
}

/* Крок і можливість — однакова анатомія картки. */
.hex-theme .v0-step,
.hex-theme .v0-feature {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
}

/* «Детальніше» в картці кроку. margin-top:auto тримає кнопки всіх шести карток
   на одній лінії (картка — flex-колонка), align-self не дає їй розтягтись. */
.hex-theme .v0-step-more {
    margin-top: auto;
    align-self: flex-start;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.1rem;
    gap: 0.4rem;
}

.hex-theme .v0-step-more i { font-size: 0.72rem; }

.hex-theme .v0-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.hex-theme .v0-feature .v0-tile { margin-bottom: 1.25rem; }

.hex-theme .v0-step .v0-h3,
.hex-theme .v0-feature .v0-h3 { margin-bottom: 0.5rem; }

.hex-theme .v0-step .v0-body,
.hex-theme .v0-feature .v0-body {
    margin: 0;
    max-width: 46ch;
}

/* ============================================================
   13. Головна: картка тарифу
   ============================================================ */

.hex-theme .v0-plan {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

/* «Хіт» підіймається над рядом — єдина картка, якій дозволено вирізнятись. */
@media (min-width: 992px) {
    .hex-theme .v0-plan-hit { transform: translateY(-12px); }
}

.hex-theme .v0-plan-hit { background: var(--v0-card-hi); }

.hex-theme .v0-plan-name {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v0-muted);
    margin: 0;
}

.hex-theme .v0-plan-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--v0-fg);
    margin-top: 0.85rem;
}

.hex-theme .v0-plan-quota {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--v0-fg);
    margin-top: 0.35rem;
}

.hex-theme .v0-plan-rate {
    min-height: 1.2rem;
    margin-top: 0.4rem;
    font-size: 0.74rem;
    color: var(--v0-primary);
}

.hex-theme .v0-plan-who {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;   /* мінімальний просвіт до кнопки, коли картка коротка */
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--v0-faint);
}

/* margin-top:auto — кнопки в усіх п'яти картках стають на одну лінію, хоч
   тексти різної довжини. Працює тільки тому, що .v0-plan — flex-колонка. */
.hex-theme .v0-plan-cta {
    margin-top: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* «Входить у кожен пакет» — один список під картками. Бірюзові іконки, дві-три
   колонки залежно від ширини; на вузькому сама складається в одну. */
.hex-theme .v0-incl {
    margin-top: 2rem;
    padding: 1.5rem;
}

.hex-theme .v0-incl .v0-h3 {
    margin-bottom: 1rem;
    text-align: center;
}

.hex-theme .v0-incl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hex-theme .v0-incl-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--v0-fg);
}

/* Іконка не має стискатись і мусить стояти на висоті першого рядка тексту. */
.hex-theme .v0-incl-grid li i {
    flex: 0 0 1rem;
    margin-top: 0.22rem;
    font-size: 0.85rem;
    text-align: center;
}

/* Не `--v0-faint`: цей рядок несе факт «один одержувач, до 3 переходів», тобто
   він не службовий підпис, а частина оферу — має читатись. */
.hex-theme .v0-incl-note {
    margin: 1.25rem auto 0;
    max-width: 78ch;
    text-align: center;
    font-size: 0.79rem;
    line-height: 1.6;
    color: var(--v0-muted);
}

.hex-theme .v0-price-note {
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
}

.hex-theme .v0-price-note .v0-h3 { margin-bottom: 0.6rem; }
.hex-theme .v0-price-note .v0-body { margin: 0 auto; max-width: 78ch; }

/* ============================================================
   14. Головна: фінальний заклик
   ============================================================ */

.hex-theme .v0-section-cta { padding-bottom: 2rem; }

.hex-theme .v0-cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.hex-theme .v0-cta-card .v0-tile-lg { margin-bottom: 1rem; }
.hex-theme .v0-cta-card .v0-eyebrow { margin-bottom: 0.35rem; }
.hex-theme .v0-cta-sub { max-width: 58ch; margin: 0.5rem 0 1.5rem; }
.hex-theme .v0-cta-note { margin: 1rem 0 0; font-size: 0.8rem; }

/* ============================================================
   15. Кабінет
   ============================================================
   Дві колонки: вузька з профілем і широка з панелями. Профіль липкий —
   панель білінгу довга, і без sticky профіль зникає з екрана вже на середині
   прокрутки, а саме там лежить кнопка «Вийти». */

.hex-theme .v0-dash {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 0 3rem;
}

.hex-theme .v0-dash-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.hex-theme .v0-dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 992px) {
    .hex-theme .v0-dash-grid {
        grid-template-columns: minmax(280px, 340px) 1fr;
    }
    .hex-theme .v0-dash-side {
        position: sticky;
        top: 1.5rem;
    }
}

.hex-theme .v0-dash-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- картка профілю --- */

.hex-theme .v0-profile { padding: 1.5rem; }

.hex-theme .v0-profile-del,
.hex-theme .v0-profile-flag {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.hex-theme .v0-profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hex-theme .v0-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: var(--v0-accent);
    color: var(--v0-primary);
    font-size: 2rem;
    object-fit: cover;
}

.hex-theme .v0-profile-name { margin: 1rem 0 0.25rem; }
.hex-theme .v0-profile-login { margin: 0; font-size: 0.9rem; }
.hex-theme .v0-profile-since { margin: 0.25rem 0 0; font-size: 0.75rem; }

.hex-theme .v0-profile .v0-divider { margin: 1.25rem 0; }

/* Поля профілю: підпис зверху дрібним, значення під ним. */
.hex-theme .v0-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hex-theme .v0-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hex-theme .v0-field-wide { grid-column: 1 / -1; }

.hex-theme .v0-field-k {
    font-size: 0.72rem;
    color: var(--v0-muted);
}

.hex-theme .v0-field-v {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--v0-fg);
    word-break: break-word;
}

.hex-theme .v0-field-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hex-theme .v0-field-edit {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 0.7rem;
}

/* --- вітальна плашка --- */

.hex-theme .v0-welcome {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .hex-theme .v0-welcome {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    .hex-theme .v0-welcome-badges { align-items: flex-end; }
}

.hex-theme .v0-welcome .v0-h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.hex-theme .v0-welcome-sub { margin: 0.35rem 0 0; }

.hex-theme .v0-welcome-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* --- панель білінгу --- */

.hex-theme .v0-billing { padding: 1.5rem; }

.hex-theme .v0-billing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.hex-theme .v0-billing-head .v0-h3 { margin: 0; }
.hex-theme .v0-billing-asof { font-size: 0.72rem; }

.hex-theme .v0-billing .v0-divider { margin: 1.25rem 0; }

.hex-theme .v0-pkg-name {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--v0-fg);
    margin-top: 0.25rem;
}

.hex-theme .v0-pkg-price { font-size: 1rem; font-weight: 600; margin-left: 0.4rem; }
.hex-theme .v0-pkg-sub { font-size: 0.8rem; margin-top: 0.15rem; }

.hex-theme .v0-billing-left {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.hex-theme .v0-billing-nums {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--v0-fg);
    white-space: nowrap;
}

.hex-theme .v0-billing-nums small { color: var(--v0-faint); font-size: 0.8rem; }

.hex-theme .v0-chip-off {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Плашки-попередження. Пунктир = «режим спостереження», суцільна — реальне
   обмеження: різна рамка, щоб не читати текст заради різниці. */
.hex-theme .v0-note {
    border-radius: var(--v0-r-lg);
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    background: var(--v0-accent);
    border: 1px solid rgba(var(--v0-glow), 0.3);
    color: var(--v0-fg);
}

.hex-theme .v0-note i { margin-right: 0.4rem; color: var(--v0-primary); }
.hex-theme .v0-note-dashed { border-style: dashed; }

.hex-theme .v0-note-warn {
    background: rgba(255, 107, 94, 0.12);
    border-color: rgba(255, 107, 94, 0.35);
}

.hex-theme .v0-note-warn i { color: var(--v0-danger); }
.hex-theme .v0-note-hd { font-weight: 700; margin-bottom: 0.15rem; }
.hex-theme .v0-note-tx { color: var(--v0-muted); font-size: 0.78rem; }

.hex-theme .v0-money {
    padding: 0.75rem 0.9rem;
    margin-top: 1rem;
}

.hex-theme .v0-money-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.hex-theme .v0-money-eur { font-size: 1.2rem; font-weight: 700; }

.hex-theme .v0-money-conv {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--v0-muted);
    margin-top: 0.15rem;
}

.hex-theme .v0-money-conv b { color: var(--v0-fg); }

.hex-theme .v0-mini-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.hex-theme .v0-mini { padding: 0.65rem 0.8rem; }
.hex-theme .v0-mini-v { font-size: 0.92rem; font-weight: 600; color: var(--v0-fg); margin-top: 0.15rem; }
.hex-theme .v0-mini-v i { color: var(--v0-primary); }

/* Список пакетів під кнопкою «Поповнити». */
.hex-theme .v0-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.hex-theme .v0-plan-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-radius: var(--v0-r-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--v0-fg);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hex-theme .v0-plan-opt:hover {
    background: var(--v0-accent);
    border-color: var(--v0-border-hi);
}

.hex-theme .v0-plan-opt-current { border-color: rgba(var(--v0-glow), 0.45); }
.hex-theme .v0-plan-opt-name { font-weight: 700; }
.hex-theme .v0-plan-opt-meta { font-size: 0.78rem; color: var(--v0-muted); text-align: right; }
.hex-theme .v0-plan-opt-meta b { color: var(--v0-fg); }
.hex-theme .v0-plan-note { font-size: 0.8rem; color: var(--v0-danger); padding: 0.35rem 0.15rem 0; }

.hex-theme .v0-billing-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    font-size: 0.75rem;
}

.hex-theme .v0-billing-foot-split { justify-content: space-between; }
.hex-theme .v0-billing-pay { display: inline-flex; align-items: center; gap: 0.4rem; }
.hex-theme .v0-billing-noexp { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Підказка «?» біля залишку пакета. */
.hex-theme .cl-hint-wrap { position: relative; display: inline-block; }

.hex-theme .cl-hint-icon {
    color: var(--v0-faint);
    cursor: pointer;
    font-size: 0.85rem;
    margin-left: 0.15rem;
    vertical-align: middle;
    transition: color 0.2s ease;
}

.hex-theme .cl-hint-icon:hover,
.hex-theme .cl-hint-icon:focus { color: var(--v0-primary); outline: none; }

.hex-theme .cl-hint-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: 300px;
    max-width: 74vw;
    padding: 0.65rem 0.8rem;
    border-radius: var(--v0-r-lg);
    text-align: left;
    background: var(--v0-popover);
    border: 1px solid var(--v0-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--v0-fg);
    font-size: 0.78rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
}

.hex-theme .cl-hint-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: var(--v0-popover);
}

@media (max-width: 575.98px) {
    .hex-theme .v0-mini-row { grid-template-columns: 1fr; }
    .hex-theme .v0-billing,
    .hex-theme .v0-profile,
    .hex-theme .v0-welcome { padding: 1.15rem; }
}

/* ============================================================
   16. Спільні дрібниці, які лишились фіолетовими
   ============================================================
   Ці правила живуть у hex-theme.css і діють на ВСЬОМУ сайті, зокрема на
   сторінках, які ще не переведені на макет v0. Перефарбовуємо тут, щоб
   в одному вікні не сусідили фіолетовий і бірюзовий акценти. */

/* Спливаючі вікна. Були темно-синім плоским #1b2233 без обідка теми. */
.hex-theme .modal-content {
    background: var(--v0-popover);
    border: 1px solid var(--v0-border);
    border-radius: var(--v0-r-2xl);
    color: var(--v0-fg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 30px -10px rgba(var(--v0-glow), 0.35);
}

.hex-theme .modal-header,
.hex-theme .modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Нутрощі модалок. `.modal-content` перефарбували ще 01.09, але заголовок,
   хрестик і кнопки лишались зі старої шкіри — вікно виходило бірюзовим
   зовні й фіолетовим усередині. Інлайнові `style="border-…: rgba(255,255,255,0.2)"`
   на `.modal-header/.modal-footer` у base.html перебиваємо тут же. */
.hex-theme .modal-title { color: var(--v0-fg); font-weight: 600; }
.hex-theme .modal-body { color: var(--v0-muted); }

/* Затемнення позаду вікна. Було чорне без розмиття, тоді як власне вікно
   підтвердження (ui_flash.js) затемнює темно-синім і з розмиттям — два
   різні «модальні» відчуття в одному інтерфейсі. Зводимо до одного. */
.hex-theme .modal-backdrop,
.hex-theme .modal-backdrop.show {
    background-color: rgba(3, 10, 16, 0.72);
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Поля всередині вікна. `.glass-input` — шкіра старої теми: молочне
   `rgba(255,255,255,0.1)`, на якому білий текст ледь читається. У вікні
   підводимо його до тих самих полів, що на переведених сторінках. */
.hex-theme .modal .glass-input,
.hex-theme .modal .glass-input-enhanced {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--v0-border) !important;
    border-radius: var(--v0-r-lg) !important;
    color: var(--v0-fg) !important;
}

.hex-theme .modal .glass-input:focus,
.hex-theme .modal .glass-input-enhanced:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--v0-border-hi) !important;
    box-shadow: 0 0 0 3px rgba(var(--v0-glow), 0.15) !important;
}

.hex-theme .modal .form-label { color: var(--v0-muted) !important; }

.hex-theme .modal-header[style],
.hex-theme .modal-footer[style] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Хрестик Bootstrap-а — чорна SVG у background; `btn-close-white` інвертує
   її у білу. Приглушуємо до кольору другорядного тексту, щоб він не важив
   більше за заголовок. */
.hex-theme .btn-close {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.hex-theme .btn-close:hover { opacity: 1; }

.hex-theme .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(var(--v0-glow), 0.25);
}

/* Кнопки старого набору всередині модалок: були індиго-фіолетовим
   градієнтом rgba(99,102,241)→rgba(139,92,246). */
.hex-theme .glass-btn {
    background: rgba(60, 224, 236, 0.9) !important;
    border: 1px solid transparent !important;
    color: var(--v0-on-primary) !important;
    border-radius: var(--v0-r-xl) !important;
}

.hex-theme .glass-btn:hover,
.hex-theme .glass-btn:focus {
    background: var(--v0-primary) !important;
    color: var(--v0-on-primary) !important;
    transform: none;
    box-shadow: 0 0 22px -6px rgba(var(--v0-glow), 0.8) !important;
}

.hex-theme .glass-btn-outline {
    background: rgba(16, 30, 43, 0.55) !important;
    border: 1px solid var(--v0-border) !important;
    color: var(--v0-fg) !important;
    border-radius: var(--v0-r-xl) !important;
    text-shadow: none;
    box-shadow: none !important;
}

.hex-theme .glass-btn-outline:hover,
.hex-theme .glass-btn-outline:focus {
    background: var(--v0-accent) !important;
    border-color: var(--v0-border-hi) !important;
    color: var(--v0-fg) !important;
}

/* Біжучий відблиск по кнопці — прийом старої теми; на бірюзі він читається
   як дефект рендеру, а не як анімація. */
.hex-theme .glass-btn-outline::before { display: none; }

/* Bootstrap-ів `text-primary`. У темі bootstrap-agent-dark-theme це
   фіолетово-індиговий — тобто рівно той колір, який прибрали з палітри
   01.09.2026. Трапляється на сторінках, які ще не переведені, і в адмінці
   (іконки лічильників, підписи). Зводимо до акценту теми. */
.hex-theme .text-primary { color: var(--v0-primary) !important; }

/* Решта «primary» з Bootstrap. У темі bootstrap-agent-dark-theme змінна
   --bs-primary фіолетово-індигова, тому кожен bg-primary / btn-primary
   лишався плямою прибраної палітри: бейдж «50 всього» в тікетах, кнопки
   «Переглянути», підписи в адмінці. Зводимо до акценту теми — з темним
   текстом, бо на бірюзі білий не читається. */
.hex-theme .bg-primary {
    background-color: var(--v0-primary) !important;
    color: var(--v0-on-primary) !important;
}

.hex-theme .btn-primary {
    background-color: rgba(60, 224, 236, 0.9);
    border-color: transparent;
    color: var(--v0-on-primary);
}

.hex-theme .btn-primary:hover,
.hex-theme .btn-primary:focus,
.hex-theme .btn-primary:active {
    background-color: var(--v0-primary);
    border-color: transparent;
    color: var(--v0-on-primary);
}

.hex-theme .btn-outline-primary {
    border-color: var(--v0-border-hi);
    color: var(--v0-primary);
}

.hex-theme .btn-outline-primary:hover,
.hex-theme .btn-outline-primary:focus {
    background-color: var(--v0-accent);
    border-color: var(--v0-border-hi);
    color: var(--v0-primary);
}

.hex-theme .border-primary { border-color: var(--v0-border-hi) !important; }

/* Бейдж: колір був старим блакитним #4fc3f7 із молочним тлом. */
.hex-theme .glass-badge {
    color: var(--v0-primary) !important;
    background: var(--v0-accent) !important;
    border: 1px solid var(--v0-border);
}

/* Прапорець. Той самий #4fc3f7 — лишався на сторінках поза .v0-form. */
.hex-theme .form-check-input:checked {
    background-color: var(--v0-primary) !important;
    border-color: var(--v0-primary) !important;
}

.hex-theme .form-check-input:focus {
    border-color: var(--v0-border-hi) !important;
    box-shadow: 0 0 0 3px rgba(var(--v0-glow), 0.15) !important;
}

/* Поверхня випадайки нативного select була темно-фіолетовою #241f3d /
   #2d3748. Сам select не чіпаємо — тільки колір списку. */
.hex-theme select.glass-input-enhanced option,
.hex-theme select.glass-input option {
    background-color: #14202c !important;
    color: var(--v0-fg) !important;
}

.hex-theme .tooltip {
    --bs-tooltip-bg: rgba(12, 24, 35, 0.97);
    --bs-tooltip-color: #f1f5f9;
}

/* Кнопка «скопіювати» біля адреси пікселя (сторінка статистики). */
.hex-theme .cl-copy-btn {
    background: rgba(60, 224, 236, 0.9);
    color: var(--v0-on-primary);
}

.hex-theme .cl-copy-btn:hover {
    background: var(--v0-primary);
}

.hex-theme .pb-url {
    color: var(--v0-primary);
    background: rgba(0, 0, 0, 0.3);
}

/* Головна кнопка зі старого набору. Живе в base.html і трапляється на
   сторінках, які ще не переведені (кабінет, домени, статистика) — щоб у
   межах одного вікна не було двох різних «головних» кольорів.
   Текст обов'язково темніє: на бірюзі білий не читається. */
.hex-theme .glass-btn-primary {
    background: rgba(60, 224, 236, 0.9);
    color: var(--v0-on-primary);
    box-shadow: 0 0 20px -6px rgba(var(--v0-glow), 0.7);
}

.hex-theme .glass-btn-primary:hover,
.hex-theme .glass-btn-primary:focus {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
}

/* ------------------------------------------------------------
   Випадайки шапки: вибір мови і меню користувача
   ------------------------------------------------------------
   Розмітка в base.html (#languageMenu / #userMenu), стара шкіра теж там —
   біле скло з фіолетовим наведенням `rgba(99,102,241)→rgba(139,92,246)`.
   Перебиваємо звідси: у base.html правила стоять в інлайновому <style>
   ПІСЛЯ цього файлу, тож бере не порядок, а специфічність — префікс
   `.hex-theme` додає її рівно стільки, скільки треба. */

.hex-theme .glass-dropdown-custom {
    background: var(--v0-popover) !important;
    border: 1px solid var(--v0-border) !important;
    border-radius: var(--v0-r-2xl) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 30px -10px rgba(var(--v0-glow), 0.35) !important;
    min-width: 200px !important;
    padding: 0.4rem !important;
}

.hex-theme .dropdown-item-custom {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin: 0.15rem !important;
    padding: 0.6rem 0.8rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--v0-r-lg) !important;
    background: transparent !important;
    color: var(--v0-fg) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

/* Наведення НЕ рухає пункт: у меню з трьох рядків зсув сусіда читається як
   смикання (той самий висновок, що й для карток у сітці). Стара шкіра
   піднімала пункт на 2px — прибрано. */
.hex-theme .dropdown-item-custom:hover,
.hex-theme .dropdown-item-custom:focus {
    background: var(--v0-accent) !important;
    border-color: var(--v0-border) !important;
    color: var(--v0-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

.hex-theme .dropdown-item-custom i { color: var(--v0-faint) !important; }

.hex-theme .dropdown-item-custom:hover i,
.hex-theme .dropdown-item-custom:focus i { color: var(--v0-primary) !important; }

.hex-theme .dropdown-divider-custom {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    margin: 0.4rem 0.15rem;
}

/* ------------------------------------------------------------
   Вікно підтвердження (ui_flash.js) — вихід з кабінету тощо
   ------------------------------------------------------------ */

.hex-theme .uiconfirm-overlay {
    background: rgba(3, 10, 16, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hex-theme .uiconfirm {
    background: var(--v0-popover);
    border: 1px solid var(--v0-border);
    border-radius: var(--v0-r-2xl);
    color: var(--v0-fg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
                0 0 34px -10px rgba(var(--v0-glow), 0.35);
}

.hex-theme .uiconfirm-msg { color: var(--v0-fg); }

.hex-theme .uiconfirm-btn {
    border-radius: var(--v0-r-xl);
    font-size: 0.9rem;
}

.hex-theme .uiconfirm-cancel {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--v0-border);
    color: var(--v0-muted);
}

/* Кнопка «ОК» у вікні підтвердження (ui_flash.js). Червоний варіант
   .uiconfirm-danger лишаємо як є: там колір несе попередження, а не бренд. */
.hex-theme .uiconfirm-ok {
    background: rgba(60, 224, 236, 0.9);
    color: var(--v0-on-primary);
}

/* ------------------------------------------------------------
   Тости
   ------------------------------------------------------------
   Плоский #1b2233 → те саме скло, що й у решти спливаючих вікон.
   Смужка ліворуч лишається: саме вона, а не фон, каже тип події. */

.hex-theme .flash-toast {
    background: var(--v0-popover);
    color: var(--v0-fg);
    border-radius: var(--v0-r-xl);
}

/* Інфо було фіолетово-барвінковим #8b9cf7 — єдине місце, де від старої
   палітри лишався акцент. Тепер бірюза, як решта «нейтральних» акцентів. */
.hex-theme .flash-toast-info {
    border: 1px solid rgba(var(--v0-glow), 0.45);
    border-left: 4px solid var(--v0-primary);
}

.hex-theme .flash-toast-info .flash-toast-content i { color: var(--v0-primary); }

.hex-theme .flash-toast-success { border-left-color: var(--v0-ok); }
.hex-theme .flash-toast-success .flash-toast-content i { color: var(--v0-ok); }
.hex-theme .flash-toast-error { border-left-color: var(--v0-danger); }
.hex-theme .flash-toast-error .flash-toast-content i { color: var(--v0-danger); }
.hex-theme .flash-toast-warning { border-left-color: var(--v0-honey); }
.hex-theme .flash-toast-warning .flash-toast-content i { color: var(--v0-honey); }

/* Підсвітка обраного пункту в нативному <select>. Сам select не чіпаємо —
   це давнє правило проєкту; тут міняється лише колір уже наявної підсвітки. */
.hex-theme select.glass-input-enhanced option:checked {
    background-color: #1d4a55;
    color: #ffffff;
}

/* ============================================================
   17. Читабельність тексту, що лежить прямо на сотах
   ============================================================
   У макеті v0 фон — ледь помітна дротяна сітка, і герой спокійно стоїть на
   ній без підкладки. Наші соти об'ємні й місцями майже білі: той самий герой
   на них тоне. Замість того щоб повертати текст у картку (і втратити весь
   сенс макета), даємо дві м'які підпори — темний ореол під самим текстом
   і радіальну тінь під героєм. */

.hex-theme .v0-hero .v0-h1,
.hex-theme .v0-hero .v0-lead,
.hex-theme .v0-hero-trust,
.hex-theme .v0-section-head .v0-h2,
.hex-theme .v0-section-head .v0-eyebrow,
.hex-theme .v0-section-head .v0-lead {
    text-shadow: 0 2px 16px rgba(4, 12, 20, 0.9),
                 0 0 40px rgba(4, 12, 20, 0.7);
}

/* Радіальна пляма під героєм. pointer-events:none — щоб не перехоплювала
   кліки по кнопках, які лежать вище за стосом. */
.hex-theme .v0-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1000px, 115%);
    height: min(620px, 105%);
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
                rgba(4, 12, 20, 0.72) 0%,
                rgba(4, 12, 20, 0.45) 45%,
                rgba(4, 12, 20, 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.hex-theme .v0-hero { position: relative; }
.hex-theme .v0-hero > * { position: relative; z-index: 1; }

/* ============================================================
   18. Списки карток ширші за колонку тексту
   ============================================================
   `.v0-list-wrap` — обгортка списку карток (посилання, домени). Вона свідомо
   виходить за межі .container: у картці посилання пʼять щільних рядків, і на
   ~640px вони починають ламатись у два. Вихід КЕРОВАНИЙ — не ширше 1600px і
   не ближче 2rem до краю вікна, тож горизонтальної прокрутки не буде.

   До 01.09.2026 список доменів робив те саме випадково: у domain_check.html
   було на чотири `</div>` більше, ніж `<div>`, вони закривали .container
   раніше часу, і список вилазив на 24px за межі сторінки. Зайві теги прибрані;
   ширина тепер задається тут, однаково для обох сторінок. */

/* Центруємо ВІДСТУПОМ, а не transform. Через `left:50% + translateX(-50%)`
   список поїхав праворуч і друга картка вилізла за екран: клас `.fade-in`
   на тій самій обгортці анімує `transform`, і на останньому кадрі ставить
   `transform: none` — анімація перебиває звичайне оголошення й затирає
   центрування. Відступ анімація не чіпає. */
.hex-theme .v0-list-wrap {
    width: min(1600px, calc(100vw - 4rem));
    margin-left: calc(50% - min(1600px, calc(100vw - 4rem)) / 2);
}

/* Дві другорядні дії в підвалі панелі білінгу («Історія платежів» і
   «Мої посилання»). На вузькому екрані вони переносяться, а не стискаються
   в нечитабельні кнопки. */
.hex-theme .v0-billing-acts {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================================
   19. Вікно «Історія платежів»
   ============================================================
   Живе ТУТ, а не у v0-admin.css: одне й те саме вікно відкривається і в
   кабінеті (кнопка в підвалі панелі білінгу), і в адмінці (квитанція в
   смужці переходів). Адмінський файл кабінет не підключає, тож у ньому
   стилі були б доступні лише половині місць.
   Розмітка — templates/partials/_payments_modal.html, скрипт —
   static/js/payments-history.js, дані — _payments_payload у routes.py. */

/* ============================================================
   Вікно «Історія платежів»
   ============================================================ */

.hex-theme .up-who {
    font-family: var(--v0-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--v0-primary);
    margin-left: 0.5rem;
}

.hex-theme .up-balance {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.hex-theme .up-b {
    padding: 0.35rem 0.7rem;
    border-radius: var(--v0-r-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.8rem;
    color: var(--v0-muted);
}

.hex-theme .up-b b { color: var(--v0-fg); font-family: var(--v0-mono); }

.hex-theme .up-b-plan { background: var(--v0-accent); border-color: var(--v0-border); color: var(--v0-primary); }

.hex-theme .up-tablewrap { overflow-x: auto; }

.hex-theme .up-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.hex-theme .up-table th {
    text-align: left;
    font-family: var(--v0-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--v0-faint);
    font-weight: 600;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
}

.hex-theme .up-table td {
    padding: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--v0-muted);
    vertical-align: top;
}

.hex-theme .up-table tr:last-child td { border-bottom: 0; }

.hex-theme .up-when { white-space: nowrap; font-family: var(--v0-mono); font-size: 0.78rem; }

.hex-theme .up-num { white-space: nowrap; font-family: var(--v0-mono); color: var(--v0-fg); text-align: right; }

.hex-theme .up-sub { font-size: 0.74rem; color: var(--v0-faint); margin-top: 0.2rem; }

.hex-theme .up-muted { color: var(--v0-muted); font-size: 0.88rem; }

/* Ручна правка — інша природа події, ніж платіж, тому рядок притишений. */
.hex-theme .up-row-adjust td { background: rgba(255, 255, 255, 0.02); }

.hex-theme .up-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.hex-theme .up-chip-ok { background: rgba(93, 219, 164, 0.15); border: 1px solid rgba(93, 219, 164, 0.35); color: var(--v0-ok); }

.hex-theme .up-chip-wait { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--v0-muted); }

.hex-theme .up-chip-warn { background: rgba(var(--v0-honey-rgb), 0.15); border: 1px solid rgba(var(--v0-honey-rgb), 0.38); color: var(--v0-honey); }

.hex-theme .up-chip-bad { background: rgba(255, 107, 94, 0.14); border: 1px solid rgba(255, 107, 94, 0.38); color: var(--v0-danger); }

.hex-theme .up-chip-hand { background: var(--v0-accent); border: 1px solid var(--v0-border); color: var(--v0-primary); }

.hex-theme .up-note {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--v0-faint);
}

.hex-theme .up-note b { color: var(--v0-muted); }

/* Сума неоплаченого рахунку — приглушена й перекреслена: інакше вона
   читається як платіж, якого не було. */
.hex-theme .up-unpaid { color: var(--v0-faint); text-decoration: line-through; }

/* ============================================================
   Головна: «Для кого це зроблено»
   ============================================================ */

.hex-theme .v0-aud-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.6rem;
}

.hex-theme .v0-aud-card .v0-h3 { margin-bottom: 0.45rem; }
.hex-theme .v0-aud-card .v0-body { margin: 0; }

/* Примітка притиснута донизу: у двох карток застереження стоять на одній
   лінії навіть при описах різної довжини. */
.hex-theme .v0-aud-note {
    margin-top: auto;
    padding-top: 1.1rem;
    margin-bottom: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}

/* ============================================================
   Головна: «Чому саме своя інфраструктура» (перед закликом)
   ============================================================ */

.hex-theme .v0-why {
    padding: 2.25rem;
    text-align: center;
}

.hex-theme .v0-why-head .v0-lead {
    margin: 0.75rem auto 0;
    max-width: 78ch;
}

/* Рівно дві колонки: при auto-fit на широкому екрані виходило три, і четвертий
   пункт лишався сам у другому рядку. Чотири пункти краще читаються як 2×2. */
.hex-theme .v0-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
    text-align: left;
}

@media (max-width: 767.98px) {
    .hex-theme .v0-why-grid { grid-template-columns: 1fr; }
    .hex-theme .v0-why { padding: 1.5rem; }
}

.hex-theme .v0-why-item-title {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--v0-fg);
}

.hex-theme .v0-why-item .v0-body { margin: 0; }