:root {
    --bg: #FAF3EA;
    --bg-soft: #F1E7D8;
    --bg-card: #FFFDF9;
    --fg: #1A1410;
    --fg-soft: #7A6E60;
    --accent: #F4511E;
    --border: rgba(26, 20, 16, 0.12);
    /* инвертированная панель (баланс кошелька в кабинете) — тёмная карточка
       на светлом фоне, вместо ещё одного оттенка var(--bg-*) */
    --surface-inverse: #17100E;
    --surface-inverse-fg: #FFFFFF;
    /* предупреждение (например «email не подтверждён») — отдельная
       семантика, не про акцент и не про фон карточек */
    --warn-bg: #FFF4E5;
    --warn-border: #FFE1B8;
    --warn-fg: #8A5A00;
}

html.dark {
    --bg: #15110C;
    --bg-soft: #1E1811;
    --bg-card: #1E1811;
    --fg: #F5EFE6;
    --fg-soft: #A79C8E;
    --accent: #FF6A33;
    --border: rgba(245, 239, 230, 0.12);
    --surface-inverse: #000000;
    --surface-inverse-fg: #F5EFE6;
    --warn-bg: rgba(255, 193, 7, 0.12);
    --warn-border: rgba(255, 193, 7, 0.35);
    --warn-fg: #FFCB6B;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--fg);
    transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, .font-display {
    font-family: 'Space Grotesk', sans-serif;
}

.bg-pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        60deg,
        var(--accent) 0px,
        var(--accent) 1px,
        transparent 1px,
        transparent 64px
    ),
    repeating-linear-gradient(
        -60deg,
        var(--accent) 0px,
        var(--accent) 1px,
        transparent 1px,
        transparent 64px
    );
    opacity: 0.05;
    pointer-events: none;
}

.logo-mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.logo-mark-wrap {
    aspect-ratio: 1 / 1;
}

@keyframes spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.logo-spin {
    animation: spin-once 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    justify-content: center;
}
.eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
}

.btn-filled {
    background: var(--accent);
    color: #fff;
}
.btn-filled:hover {
    filter: brightness(1.08);
}
.btn-outline {
    border: 1px solid var(--border);
    color: var(--fg);
}
.btn-outline:hover {
    border-color: var(--accent);
}

.logo-header {
    width: 64px;
    height: 64px;
}

.logo-hero {
    width: 170px;
    height: 170px;
}

@media (min-width: 640px) {
    .logo-hero {
        width: 220px;
        height: 220px;
    }
}

@media (min-width: 768px) {
    .logo-hero {
        width: 280px;
        height: 280px;
    }
}


.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}
.input-field:focus {
    outline: none;
    border-color: var(--accent);
}
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--fg-soft);
}
.form-error {
    color: #e11d48;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.form-help {
    color: var(--fg-soft);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-top: 0.4rem;
}
.form-help ul {
    list-style: disc;
    padding-left: 1.1rem;
}
.form-help li {
    margin-bottom: 0.15rem;
}

.panel-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-soft);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.panel-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.panel-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.panel-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
}
.btn-small {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
    transition: all 0.15s ease;
}
.btn-small:hover {
    border-color: var(--accent);
}

.task-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.status-draft { background: rgba(122,110,96,0.15); color: var(--fg-soft); }
.status-published { background: rgba(244,81,30,0.15); color: var(--accent); }
.status-in_progress { background: rgba(59,130,246,0.15); color: #3b82f6; }
.status-on_review { background: rgba(234,179,8,0.15); color: #ca8a04; }
.status-completed { background: rgba(34,197,94,0.15); color: #16a34a; }
.status-disputed { background: rgba(225,29,72,0.15); color: #e11d48; }
.status-cancelled { background: rgba(122,110,96,0.15); color: var(--fg-soft); }

.task-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}

.task-number-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.task-number-badge .label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fg-soft);
    text-transform: uppercase;
}

.chat-window {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.chat-window::-webkit-scrollbar {
    width: 6px;
}
.chat-window::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

.chat-bubble-moderator {
    border-left: 3px solid #16a34a !important;
}
.chat-bubble-admin {
    border-left: 3px solid #e11d48 !important;
}

.wallet-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.75rem;
}
.tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}
.tx-row:last-child { border-bottom: none; }
.tx-amount-positive { color: #16a34a; font-weight: 700; }
.tx-amount-negative { color: #e11d48; font-weight: 700; }
.chat-bubble-superadmin {
    border-left: 3px solid #7f1d1d !important;
}

.giveaway-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    overflow: hidden;
}
.giveaway-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.rating-stars {
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 1px;
}
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
}

.rating-stars-lg {
    color: var(--accent);
    font-size: 1.75rem;
    letter-spacing: 2px;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    font-weight: 600;
}
.faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.2s ease;
}
.faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background: var(--accent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; transition: opacity 0.2s ease; }
.faq-item.open .faq-icon::after { opacity: 0; }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.faq-answer-inner {
    padding-bottom: 1.1rem;
    font-size: 0.9rem;
    color: var(--fg-soft);
}

.doc-toc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    color: var(--fg-soft);
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}
.doc-toc-link:hover {
    color: var(--fg);
    background: var(--bg-soft);
}
.doc-section-number {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.doc-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}
.doc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}
.feature-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.75rem;
}
.testimonial-stars {
    color: var(--accent);
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}
.country-flag {
    font-size: 1.1rem;
}

.money-flow-bar {
    display: flex;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    max-width: 480px;
    margin: 0 auto;
}
.money-flow-executor {
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.money-flow-platform {
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.feature-row {
    display: flex;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border);
}
.feature-row:last-child {
    border-bottom: none;
}
.feature-index {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
    flex-shrink: 0;
    width: 2.5rem;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
}
.compare-table th, .compare-table td {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.compare-table td:first-child, .compare-table th:first-child {
    text-align: left;
    color: var(--fg-soft);
}
.compare-table thead th {
    font-weight: 700;
    color: var(--fg-soft);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.compare-table thead th.izi-col {
    color: var(--accent);
}
.compare-yes { color: #16a34a; font-weight: 700; }
.compare-no { color: var(--fg-soft); }

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 1.25rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.cookie-banner.hidden { display: none; }


.giveaway-card {
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%);
    border: 2px solid var(--accent);
    border-radius: 1.75rem;
    overflow: hidden;
}
.giveaway-image-wrap {
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.giveaway-image-wrap img {
    max-width: 100%;
    filter: drop-shadow(0 25px 30px rgba(0,0,0,0.18));
}

/* BENTO GRID */
.bento-card {
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: transform 0.2s ease;
}
.bento-card:hover { transform: translateY(-3px); }
.bento-dark {
    background: var(--fg);
    color: var(--bg);
    border: none;
}
.bento-dark p { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.bento-dark .bento-title { color: var(--bg); }
.bento-accent {
    background: var(--accent);
    color: #fff;
    border: none;
}
.bento-accent p { color: rgba(255,255,255,0.85); }
.bento-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.bento-icon {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    display: block;
}

/* HOW IT WORKS */
.step-block {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border);
}
.step-block:last-child { border-bottom: none; }
.step-ghost-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
    flex-shrink: 0;
    width: 5rem;
}

/* SPLIT PANELS */
.split-panel {
    border-radius: 1.75rem;
    padding: 2.5rem;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}
.split-panel-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%);
    filter: blur(10px);
}

/* PRICING */
.price-card-lg {
    border-radius: 1.75rem;
    padding: 2.5rem;
}

/* SECTION LABEL */
.section-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--accent);
}

.cta-panel {
    border-radius: 2rem;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
    background: var(--fg);
    color: var(--bg);
    text-align: center;
}
.cta-glow-1 {
    position: absolute;
    top: -30%;
    left: -10%;
    width: 50%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 70%);
    filter: blur(20px);
}
.cta-glow-2 {
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 50%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent) 0%, transparent 70%);
    filter: blur(20px);
}

.page-hero-visual {
    border-radius: 2rem;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%), var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    font-size: 7rem;
}
.stage-flow {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.stage-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    text-align: center;
    flex: 1;
    min-width: 180px;
}
.stage-arrow {
    font-size: 1.5rem;
    color: var(--accent);
    flex-shrink: 0;
}
body {
    background-color: var(--bg);
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 900px 700px at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse 800px 600px at 85% 25%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 1000px 800px at 50% 90%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 65%);
    animation: bg-drift 45s ease-in-out infinite alternate;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes bg-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-2%, 2%) scale(1.03); }
    100% { transform: translate(2%, -1%) scale(1.02); }
}

/* SPLIT HERO */
.hero-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .hero-split {
        grid-template-columns: 1.15fr 1fr;
    }
}

/* HORIZONTAL STEPPER */
.h-steps {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .h-steps {
        flex-direction: row;
        gap: 0;
    }
}
.h-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}
.h-step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 2;
}
.h-step-line {
    display: none;
}
@media (min-width: 768px) {
    .h-step-line {
        display: block;
        position: absolute;
        top: 32px;
        left: calc(50% + 32px);
        width: calc(100% - 64px);
        height: 2px;
        background: var(--border);
        z-index: 1;
    }
    .h-step:last-child .h-step-line { display: none; }
}

/* EARNINGS CARD */
.earnings-card {
    border-radius: 1.75rem;
    padding: 3rem;
    background: var(--fg);
    color: var(--bg);
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .earnings-card {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
.earnings-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    line-height: 1;
    color: var(--accent);
}

.logo-float-box {
    position: relative;
    overflow: hidden;
}
.logo-float {
    position: absolute;
    opacity: 0.16;
    filter: grayscale(30%);
    animation: logo-drift linear infinite;
}
.logo-float img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.logo-float-center {
    position: relative;
    z-index: 2;
    opacity: 1;
    filter: none;
    animation: none;
}

@keyframes logo-drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(18px, -14px) rotate(90deg); }
    50%  { transform: translate(-10px, 16px) rotate(180deg); }
    75%  { transform: translate(-18px, -10px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

.site-logo-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    height: 100%;
    min-height: 100vh;
}
.site-logo-bg .logo-float {
    position: absolute;
    opacity: 0.08;
    filter: grayscale(30%);
    animation: logo-drift linear infinite;
}
html.dark .site-logo-bg .logo-float {
    opacity: 0.12;
}

/* PRICING SPOTLIGHT */
.price-spotlight-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .price-spotlight-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 2.5rem;
    }
}
.price-card-muted {
    border-radius: 1.75rem;
    padding: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.price-card-spotlight {
    border-radius: 2rem;
    padding: 3rem;
    background: var(--fg);
    color: var(--bg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
}
@media (min-width: 768px) {
    .price-card-spotlight {
        transform: scale(1.05);
    }
}
.price-card-spotlight .cta-glow-1,
.price-card-spotlight .cta-glow-2 {
    opacity: 0.7;
}

/* FEATURE CHECK GRID */
.feature-check-grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    overflow: hidden;
}
@media (min-width: 640px) {
    .feature-check-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.feature-check-item {
    background: var(--bg-card);
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
.feature-check-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* DONUT CHART */
.donut-chart {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(#16a34a 0% 80%, var(--accent) 80% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    flex-shrink: 0;
}
.donut-center {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* SHARED PULL QUOTE (used by for_executors.html) */
.pull-quote {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.4;
    border-left: 3px solid var(--accent);
    padding-left: 2rem;
}

/* ============================================================
   ABOUT — "хартия платформы": имя, разложенное на роли сделки
   (Influence/Zone/Impact = заказчик/платформа/исполнитель),
   принципы как нумерованные статьи документа, а не таймлайн.
   Не переиспользует композиционные классы остальных страниц —
   собственный, более сдержанный визуальный язык (ab-*).
   ============================================================ */

/* HERO — триада имени */
.ab-triad-grid {
    display: grid;
    gap: 2.25rem;
    margin-top: 3rem;
}
@media (min-width: 768px) {
    .ab-triad-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}
.ab-triad-item {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.ab-triad-word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: 0.6rem;
}
.ab-triad-role {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
    margin-bottom: 0.85rem;
}
.ab-triad-desc {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--fg-soft);
    max-width: 26rem;
}

/* CHARTER — принципы как статьи (тёмная инверсия, как в 01-секции home.html) */
.ab-charter-list {
    margin-top: 2.5rem;
}
.ab-charter-item {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1.1rem;
    padding: 2rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
}
@media (min-width: 640px) {
    .ab-charter-item {
        grid-template-columns: 3.75rem 1fr;
        gap: 1.75rem;
        padding: 2.5rem 0;
    }
}
.ab-charter-item:first-child { padding-top: 0; }
.ab-charter-item:last-child { border-bottom: none; padding-bottom: 0; }
.ab-charter-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--accent);
}
.ab-charter-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.3;
}
.ab-charter-rule {
    display: block;
    width: 2.25rem;
    height: 2px;
    background: var(--accent);
    margin: 0.9rem 0 1.05rem;
    transform: scaleX(0);
    transform-origin: left center;
}
.ab-charter-text {
    font-size: 0.94rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--bg) 68%, transparent);
    max-width: 38rem;
}

/* FIGURES — тихое приложение к хартии, без анимированных счётчиков */
.ab-figures-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 768px) {
    .ab-figures-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}
.ab-figure {
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}
.ab-figure-value {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.85rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.ab-figure-label {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--fg-soft);
}
.ab-figures-note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    max-width: 42rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--fg-soft);
}

/* LEGAL — список документов в виде формальных ссылок-цитат */
.ab-legal-note {
    max-width: 40rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--fg-soft);
}
.ab-legal-note strong { color: var(--fg); }
.ab-doc-list {
    display: flex;
    flex-direction: column;
    margin-top: 2.25rem;
}
.ab-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--fg);
    transition: color 0.15s ease;
}
.ab-doc-row:last-child { border-bottom: none; }
.ab-doc-row:hover { color: var(--accent); }
.ab-doc-row:hover .ab-doc-arrow { transform: translateX(4px); }
.ab-doc-left {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    min-width: 0;
}
.ab-doc-index {
    flex-shrink: 0;
    width: 1.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--fg-soft);
}
.ab-doc-name {
    font-weight: 600;
    font-size: 1.02rem;
}
.ab-doc-arrow {
    flex-shrink: 0;
    color: var(--accent);
    transition: transform 0.15s ease;
}
.ab-doc-arrow svg { width: 18px; height: 18px; }

/* MEMBERSHIP CARD */
.membership-card {
    position: relative;
    border-radius: 1.75rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--fg) 0%, #2a2118 100%);
    color: var(--bg);
    overflow: hidden;
    aspect-ratio: 1.7 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 40px 70px -25px rgba(0,0,0,0.4);
}
.membership-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent) 25%, transparent) 48%, transparent 56%);
}
.membership-chip {
    width: 44px;
    height: 34px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e8c766, #b8933f);
}
.membership-number {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.15em;
    font-size: 1.1rem;
    opacity: 0.5;
}

/* PLAIN SEQUENTIAL LIST (no icons, no numbers) */
.plain-list-item {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .plain-list-item {
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
    }
}
.plain-list-item:last-child { border-bottom: none; }

/* WIDE STAT STRIP */
.wide-stat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .wide-stat-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}
.wide-stat-strip > div {
    padding: 2rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
    .wide-stat-strip > div:nth-child(4) { border-right: none; }
}
.wide-stat-strip > div:nth-child(even) {
    border-right: none;
}
@media (min-width: 768px) {
    .wide-stat-strip > div:nth-child(even) { border-right: 1px solid var(--border); }
}

#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#page-loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    animation: loader-spin 1.6s linear infinite;
}
@keyframes loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.loader-dots {
    display: flex;
    gap: 8px;
}
.loader-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    animation: loader-dot-bounce 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.loader-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loader-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-8px); opacity: 1; }
}

.captcha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.captcha img {
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: #fff;
}

/* STAR RATING PICKER */
.star-picker {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0.5rem;
}
.star-picker input {
    display: none;
}
.star-picker label {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--border);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}
.star-picker label:hover,
.star-picker label:hover ~ label {
    color: var(--accent);
    transform: scale(1.1);
}
.star-picker input:checked ~ label {
    color: var(--accent);
}

/* PROFILE HERO */
.profile-avatar-lg {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    flex-shrink: 0;
}
.profile-rating-block {
    border-radius: 1.75rem;
    padding: 2.5rem;
    background: var(--fg);
    color: var(--bg);
    text-align: center;
}
.profile-rating-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    line-height: 1;
}
.review-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
}
.review-stars-static {
    color: var(--accent);
    font-size: 0.95rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Крупный логотип-акцент в боковых полях (виден только на широких экранах) */
.side-logo-accent {
    display: none;
    position: absolute;
    top: 50%;
    width: 130px;
    opacity: 0.16;
    pointer-events: none;
}
.side-logo-accent img {
    width: 100%;
    height: auto;
    display: block;
}
@media (min-width: 1600px) {
    .side-logo-accent { display: block; }
}
.side-logo-accent-left {
    left: 4%;
    transform: translateY(-50%) rotate(-8deg);
}
.side-logo-accent-right {
    right: 4%;
    transform: translateY(-50%) rotate(10deg);
}
html.dark .side-logo-accent {
    opacity: 0.2;
}

.city-checkbox-list {
    display: block;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-card);
}
.city-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}
.city-checkbox-item:hover {
    background: var(--bg-soft);
}
.city-checkbox-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

#id_target_cities {
    display: none;
}

.slot-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
}
.slot-status {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.slot-status-open { background: rgba(122,110,96,0.15); color: var(--fg-soft); }
.slot-status-assigned { background: rgba(59,130,246,0.15); color: #3b82f6; }
.slot-status-on_review { background: rgba(234,179,8,0.15); color: #ca8a04; }
.slot-status-completed { background: rgba(34,197,94,0.15); color: #16a34a; }
.slot-status-disputed { background: rgba(225,29,72,0.15); color: #e11d48; }
.slot-status-cancelled { background: rgba(122,110,96,0.15); color: var(--fg-soft); }

.task-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .task-detail-grid {
        grid-template-columns: 1fr 320px;
    }
}
.task-sidebar {
    align-self: start;
}
@media (min-width: 1024px) {
    .task-sidebar {
        position: sticky;
        top: 100px;
    }
}
.sidebar-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}
.sidebar-stat-row:last-child {
    border-bottom: none;
}
.slot-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.slot-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.slot-comment {
    font-size: 0.9rem;
    color: var(--fg);
    background: var(--bg-soft);
    border-radius: 0.65rem;
    padding: 0.6rem 0.8rem;
    margin-top: 0.5rem;
}
.mass-progress-card {
    background: var(--fg);
    color: var(--bg);
    border-radius: 1.5rem;
    padding: 1.5rem;
}
.mass-progress-card .giveaway-progress-track {
    background: color-mix(in srgb, var(--bg) 20%, transparent);
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}
.slot-chip {
    border-radius: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    overflow: hidden;
}
.slot-chip[open] {
    grid-column: 1 / -1;
}
.slot-chip.chip-completed { border-color: rgba(34,197,94,0.4); }
.slot-chip.chip-on_review { border-color: rgba(234,179,8,0.4); }
.slot-chip.chip-disputed { border-color: rgba(225,29,72,0.4); }
.slot-chip.chip-assigned { border-color: rgba(59,130,246,0.4); }

.slot-chip summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}
.slot-chip summary::-webkit-details-marker { display: none; }
.slot-chip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}
.slot-chip-number {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fg-soft);
}
.slot-chip-body {
    padding: 0 1rem 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.kanban-column {
    min-width: 0;
}
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.75rem;
    border-bottom: 3px solid var(--column-color, var(--border));
    margin-bottom: 0.75rem;
}
.kanban-column-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-soft);
}
.kanban-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--bg-soft);
    color: var(--fg);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 40px;
}
.kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--column-color, var(--border));
    border-radius: 0.85rem;
    padding: 0.85rem;
}
.kanban-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.kanban-card summary::-webkit-details-marker { display: none; }
.kanban-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.kanban-card-main {
    min-width: 0;
    flex: 1;
}
.kanban-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-card-sub {
    font-size: 0.7rem;
    color: var(--fg-soft);
}
.kanban-card[open] {
    padding-bottom: 0.25rem;
}
.kanban-card-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.kanban-card-body img,
.kanban-card-body video {
    max-height: 220px !important;
}
.kanban-card summary {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.kanban-card-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
    padding: 0.4rem;
    border-radius: 0.7rem;
    transition: background 0.15s ease;
}
.kanban-card-link:hover {
    background: var(--bg-soft);
}
.kanban-card-expand {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 56px;
    border-radius: 0.7rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--fg-soft);
    font-size: 0.65rem;
    font-weight: 700;
    transition: background 0.15s ease, transform 0.15s ease;
}
.kanban-card-expand:hover {
    background: var(--border);
}
.kanban-card-expand-icon {
    font-size: 1rem;
    transition: transform 0.15s ease;
}
.kanban-card[open] .kanban-card-expand {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.kanban-card[open] .kanban-card-expand-icon {
    transform: rotate(180deg);
}
.kanban-card-link:hover .kanban-card-name {
    color: var(--accent);
}
.kanban-empty {
    font-size: 0.75rem;
    color: var(--fg-soft);
    text-align: center;
    padding: 1.5rem 0;
    border: 1px dashed var(--border);
    border-radius: 0.85rem;
}

/* ===== task_detail.html: visual zones ===== */
.task-zone {
    margin-bottom: 2.75rem;
}
.task-zone:last-child {
    margin-bottom: 0;
}
.task-zone-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}
.task-zone-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.75rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.task-zone-icon svg {
    width: 18px;
    height: 18px;
}
.task-zone-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}
.task-zone-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.task-zone-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.task-subcard-title {
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
}

/* a card that contains a real action (form / decision buttons) gets a
   quiet accent rail so it never gets lost among read-only status cards */
.task-action-card {
    border-left: 3px solid var(--accent) !important;
    padding-left: calc(1.5rem - 2px);
}

.task-info-note {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fg-soft);
}

.task-sidebar-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-soft);
    margin-bottom: 0.75rem;
}

/* dual-layer progress: how much has been opened in waves vs. actually filled */
.wave-meter {
    position: relative;
    overflow: hidden;
}
.wave-meter .wave-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
}
.wave-meter .wave-layer-opened {
    background: color-mix(in srgb, var(--bg) 45%, transparent);
}
.wave-meter .wave-layer-filled {
    background: var(--accent);
    transition: width 0.4s ease;
}

.task-fade-in {
    animation: taskFadeIn 0.5s ease both;
}
@keyframes taskFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .task-fade-in {
        animation: none;
    }
}

/* ===== task_detail.html: mobile-focused responsiveness =====
   The sidebar ("Условия") is placed first in the DOM (see template)
   so budget/deadline read before the long description on phones and
   tablets, where the grid is a single stacked column anyway. On
   desktop we pin it back into the right-hand column explicitly, so
   visual position no longer depends on source order. */
@media (min-width: 1024px) {
    .task-detail-page .task-detail-grid > .task-sidebar {
        grid-column: 2;
        grid-row: 1;
    }
    .task-detail-page .task-detail-grid > .min-w-0 {
        grid-column: 1;
        grid-row: 1;
    }
}

/* kanban board: the desktop 4-across grid used auto-fit with a fixed
   240px floor, which forced a horizontal scrollbar around ~320-374px
   viewports. Below 1024px we switch to explicit, flexible tracks
   (minmax(0, 1fr) never forces overflow) — 2 columns on tablets, a
   single vertical stack on phones. A stack (not a swipe carousel)
   was chosen deliberately: horizontal swipe on primary content risks
   colliding with the browser's own back/forward gesture and isn't
   discoverable without a visible hint. */
@media (max-width: 1023px) {
    .task-detail-page .kanban-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 639px) {
    .task-detail-page .kanban-board {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

/* quick-jump chips above the stacked kanban board (mobile only) —
   plain anchor links, no JS, so a customer can reach "Спор" or
   "Выполнено" without scrolling past every card in between */
.kanban-jump {
    display: none;
}
@media (max-width: 639px) {
    .kanban-jump {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .kanban-jump-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 38px;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--column-color, var(--border));
        background: var(--bg-card);
        color: var(--fg);
        font-size: 0.78rem;
        font-weight: 600;
        text-decoration: none;
    }
    .kanban-jump-chip span {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--fg-soft);
        background: var(--bg-soft);
        border-radius: 999px;
        padding: 0.05rem 0.45rem;
    }
}

/* touch targets: every small action button on this page grows to the
   44px minimum on phones. Scoped to .task-detail-page so the compact
   .btn-small used on other pages (lists, panels) is untouched. */
@media (max-width: 640px) {
    .task-detail-page .btn-small {
        min-height: 44px;
        padding: 0.6rem 1.1rem;
        font-size: 0.85rem;
    }
    .task-detail-page .btn-filled,
    .task-detail-page .btn-outline {
        min-height: 44px;
    }
    .task-detail-page .kanban-card-expand {
        min-height: 44px;
        width: 64px;
    }
    .task-detail-page .kanban-card-link {
        min-height: 44px;
    }
    /* the lone submit button of a form is that card's primary action —
       make it a full-width, easy-to-hit target instead of a text-sized
       pill floating on the left */
    .task-detail-page .btn-filled[type="submit"] {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* rows holding 2+ action buttons side by side (accept/reject,
   confirm/dispute, confirm/cancel…) — stay as a row while there is
   room, stack full-width once the screen is too narrow for both
   labels to sit comfortably next to each other */
.task-detail-page .task-actions-row {
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .task-detail-page .task-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    .task-detail-page .task-actions-row > form,
    .task-detail-page .task-actions-row > a {
        width: 100%;
    }
    .task-detail-page .task-actions-row > form > button {
        width: 100%;
    }
    /* a name/comment block sitting next to an actions row: stack
       instead of squeezing both onto one line */
    .task-detail-page .task-slot-line {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .task-detail-page .task-slot-line > .task-actions-row,
    .task-detail-page .task-slot-line > form {
        width: 100%;
    }
}

/* visual separation between two unrelated actions stacked in one card
   (e.g. "decline the task" vs. "submit the proof") so they read as
   two decisions, not one continuous form */
.task-detail-page .task-form-divider {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
}

/* ===== task_detail.html: "Обзор" — always-visible status chips (not
   the mobile-only .kanban-jump nav; this is a separate, always-on
   summary row that doubles as navigation into the kanban columns) ===== */
.overview-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.overview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.overview-chip:hover {
    border-color: var(--column-color, var(--accent));
    transform: translateY(-1px);
}
.overview-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--column-color, var(--fg-soft));
    flex-shrink: 0;
}
.overview-chip-label {
    font-size: 0.8rem;
    font-weight: 600;
}
.overview-chip-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fg-soft);
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* ===== task_detail.html: "Требует твоего внимания" — the one zone
   this redesign spends its visual weight on. A quiet accent wash
   (not a loud alert color) keeps it readable next to money/dispute
   actions, while still reading as "look here first". */
.attention-panel {
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.attention-intro {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--fg-soft);
    margin-top: -0.25rem;
}
/* subsections build their card list from a status filter (e.g. "on
   review", "completed but not yet reviewed") that can legitimately
   match nothing on any given visit — the matching template loops are
   wrapped in {% spaceless %} so a truly empty result leaves no
   whitespace node behind, and :has() below then hides the whole
   subsection (heading included) instead of leaving a header floating
   over blank space */
.attention-block:has(> .space-y-3:empty) {
    display: none;
}
.attention-block + .attention-block {
    padding-top: 1.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
}
.attention-subhead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.85rem;
}
.attention-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.attention-row-media {
    align-items: stretch;
}
.task-zone-icon-alert {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-soft));
}

@media (max-width: 640px) {
    .attention-panel {
        padding: 1.1rem;
        border-radius: 1rem;
    }
    .overview-chip {
        flex: 1 1 calc(50% - 0.6rem);
        justify-content: center;
    }
}

.nav-balance {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.nav-balance:hover {
    opacity: 0.75;
}
.nav-balance-plus {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.tier-badge-1 {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--border);
}
.tier-badge-2 {
    background: var(--fg);
    color: var(--bg);
}
.tier-badge-3 {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   FOR CUSTOMERS — narrative page (Offer → Doubt → Solution →
   How it works → Scale/Geo → Who can publish → CTA)
   ============================================================ */

/* OFFER — hero mega figure */
.offer-mega {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .offer-mega {
        align-items: flex-start;
        text-align: left;
    }
}
.offer-mega-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-soft);
}
.offer-mega-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(5.5rem, 15vw, 9.5rem);
    line-height: 0.9;
    color: var(--accent);
    letter-spacing: -0.02em;
}
.offer-mega-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fg-soft);
    max-width: 20rem;
    line-height: 1.55;
}

/* DOUBT — quiet transitional beat */
.doubt-block {
    max-width: 46rem;
}
.doubt-line {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 2.15rem);
    line-height: 1.4;
    color: var(--fg);
}
.doubt-bridge {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--fg-soft);
    border-left: 2px solid var(--accent);
    padding-left: 1.25rem;
}

/* SOLUTION — ink chapter panel (reuses fg/bg swap already used by
   .cta-panel / .earnings-card, kept consistent site-wide) */
.section-ink {
    background: var(--fg);
    color: var(--bg);
}
.section-ink .section-num {
    color: var(--accent);
}
.section-ink .ink-soft {
    color: color-mix(in srgb, var(--bg) 65%, transparent);
}

.freeze-flow {
    display: grid;
    gap: 2.25rem;
    margin-top: 3rem;
}
@media (min-width: 768px) {
    .freeze-flow {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}
.freeze-step {
    position: relative;
    padding-top: 3rem;
}
.freeze-step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
@media (min-width: 768px) {
    .freeze-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 1.25rem;
        left: 3.25rem;
        width: calc(100% - 1rem);
        height: 1px;
        background: color-mix(in srgb, var(--bg) 25%, transparent);
    }
}
.freeze-step-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.dispute-note {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bg) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* SCALE — mass task wave visualization + geo panel */
.wave-scale-grid {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .wave-scale-grid {
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
        align-items: start;
    }
}
.wave-panel,
.geo-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem;
}
.wave-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.wave-row:last-child { border-bottom: none; }
.wave-row-label {
    width: 5.5rem;
    flex-shrink: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
}
.wave-dots {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex: 1;
}
.wave-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}
.wave-dot.is-filled { background: var(--accent); border-color: var(--accent); }
.wave-dot.is-locked { background: var(--border); border-color: var(--border); opacity: 0.6; }
.wave-row-status {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fg-soft);
    text-align: right;
    width: 7.5rem;
}
.wave-row.is-locked .wave-row-label,
.wave-row.is-locked .wave-row-status { opacity: 0.65; }
.wave-caption {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--fg-soft);
    line-height: 1.6;
}
@media (max-width: 480px) {
    .wave-row {
        flex-wrap: wrap;
    }
    .wave-row-status {
        width: auto;
        text-align: left;
        margin-left: calc(5.5rem + 1rem);
    }
}

.geo-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.25rem 0;
}
.geo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-soft);
}
.geo-chip svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
    flex-shrink: 0;
}
.tier-note {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--fg-soft);
    line-height: 1.6;
}
.tier-note a { color: var(--accent); font-weight: 600; }
.tier-note strong { color: var(--fg); }

/* WHO CAN PUBLISH — eligibility split */
.eligibility-grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    overflow: hidden;
}
@media (min-width: 768px) {
    .eligibility-grid { grid-template-columns: 1fr 1fr; }
}
.eligibility-col {
    background: var(--bg-card);
    padding: 2rem;
}
.eligibility-col-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}
.eligibility-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eligibility-icon svg { width: 16px; height: 16px; }
.eligibility-icon.is-yes { background: rgba(34,197,94,0.15); color: #16a34a; }
.eligibility-icon.is-no { background: rgba(122,110,96,0.15); color: var(--fg-soft); }
.eligibility-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--fg-soft);
}

/* ============================================================
   FOR EXECUTORS — narrative page (Hero → Процесс → Массовые
   задания → Подписка → Рейтинг → Кто может → CTA).

   Deliberately does NOT reuse for_customers.html's compositional
   classes (offer-mega, section-ink, freeze-flow, wave-panel,
   eligibility-grid, tier-strip-grid, tier-note, doubt-block,
   earnings-card) — those encode the CUSTOMER's anchor (control /
   oversight of a transaction they don't trust yet). This page
   encodes the EXECUTOR's anchor (possession / speed / a personal
   stake among other people), so every metaphor below is new:
   a torn payout ticket instead of a stat plaque, a seat you can
   point to instead of a wave you watch fill, a reach ladder instead
   of three equal cards, a speed rail instead of numbered boxes.
   Only --tokens, type system, .btn-*, .section-num and .cta-panel
   (already shared site-wide, not customer-specific) carry over.
   ============================================================ */

/* ---------- HERO: payout ticket ---------- */
.xw-hero-grid {
    display: grid;
    gap: 3rem;
}
@media (min-width: 900px) {
    .xw-hero-grid {
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
        gap: 2rem;
    }
}
.xw-ticket-wrap {
    display: flex;
    justify-content: center;
}
@media (min-width: 900px) {
    .xw-ticket-wrap { justify-content: flex-end; }
}
.xw-ticket {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 25px 50px -25px rgba(0,0,0,0.35);
    transform: rotate(-2.5deg);
}
@media (min-width: 900px) {
    .xw-ticket { transform: rotate(-3deg) translateY(-0.5rem); }
}
.xw-ticket-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.xw-ticket-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-soft);
}
.xw-ticket-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
}
.xw-ticket-divider {
    position: relative;
    margin: 1.1rem -1.75rem;
    border-top: 2px dashed var(--border);
}
.xw-ticket-divider::before,
.xw-ticket-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    transform: translateY(-50%);
}
.xw-ticket-divider::before { left: -11px; }
.xw-ticket-divider::after { right: -11px; }
.xw-ticket-value.is-credited { color: var(--accent); font-size: 2.1rem; }
.xw-ticket-caption {
    font-size: 0.78rem;
    color: var(--fg-soft);
    margin-top: 0.6rem;
    line-height: 1.5;
}
.xw-ticket-stamp {
    position: absolute;
    top: -14px;
    right: -10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    transform: rotate(7deg);
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---------- PROCESS: speed rail ---------- */
.xw-rail {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}
@media (min-width: 900px) {
    .xw-rail {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        position: relative;
        padding-top: 0.5rem;
    }
    .xw-rail::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 4.5%;
        right: 4.5%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--border) 0%, var(--border) 30%, var(--accent) 100%);
    }
}
.xw-node {
    flex: 1;
    position: relative;
    padding-left: 1.9rem;
}
@media (min-width: 900px) {
    .xw-node {
        padding-left: 0;
        text-align: center;
        padding: 0 0.75rem;
    }
}
.xw-node-dot {
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--border);
}
@media (min-width: 900px) {
    .xw-node-dot {
        position: static;
        margin: 0 auto 1.1rem;
    }
}
.xw-node-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.xw-node-text {
    font-size: 0.88rem;
    color: var(--fg-soft);
    line-height: 1.5;
}
.xw-node.is-payoff .xw-node-dot {
    width: 24px;
    height: 24px;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}
@media (min-width: 900px) {
    .xw-node.is-payoff .xw-node-dot { margin-top: -3px; }
}
.xw-node.is-payoff .xw-node-title { color: var(--accent); }
.xw-rail-note {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--fg-soft);
}
.xw-rail-note strong { color: var(--fg); }

/* ---------- MASS TASKS: seat strip ---------- */
.xw-seats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.xw-seat {
    width: 40px;
    height: 40px;
    border-radius: 0.7rem;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fg-soft);
    flex-shrink: 0;
}
.xw-seat.is-taken {
    background: var(--bg-soft);
    color: var(--fg-soft);
    border-style: dashed;
}
.xw-seat.is-you {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: scale(1.12);
}
.xw-seat-pointer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-left: 0.25rem;
}
.xw-claim-paths {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
    .xw-claim-paths { flex-direction: row; gap: 2.5rem; }
}
.xw-claim-path {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}
.xw-claim-path svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.xw-claim-path-title {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}
.xw-claim-path-text {
    font-size: 0.85rem;
    color: var(--fg-soft);
    line-height: 1.5;
}
.xw-seats-foot {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--fg-soft);
    line-height: 1.6;
}

/* ---------- SUBSCRIPTION: reach ladder ---------- */
.xw-reach {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: 2.5rem;
}
.xw-reach-row {
    display: grid;
    gap: 0.6rem 1.5rem;
    position: relative;
}
@media (min-width: 768px) {
    .xw-reach-row {
        grid-template-columns: 13rem 1fr;
        align-items: center;
    }
}
.xw-reach-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
@media (min-width: 768px) {
    .xw-reach-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}
.xw-reach-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}
.xw-reach-price {
    font-size: 0.82rem;
    color: var(--fg-soft);
}
.xw-bar-track {
    height: 2.75rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.xw-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.1rem;
}
.xw-reach-row.is-recommended .xw-bar-fill {
    background: var(--accent);
}
.xw-bar-fill span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
}
.xw-reach-row.is-recommended .xw-bar-fill span { color: #fff; }
.xw-reach-flag {
    position: absolute;
    top: -1.35rem;
    left: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}
@media (min-width: 768px) {
    .xw-reach-flag { left: 13rem; margin-left: 1.5rem; }
}
.xw-reach-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
@media (min-width: 768px) {
    .xw-reach-tags { grid-column: 2; margin-left: 0; }
}
.xw-reach-tag {
    font-size: 0.76rem;
    color: var(--fg-soft);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

/* ---------- ACCESS: who can start ---------- */
.xw-access {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .xw-access { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.xw-access-col {
    border-left: 3px solid var(--border);
    padding-left: 1.5rem;
}
.xw-access-col.is-open { border-left-color: var(--accent); }
.xw-access-col-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
}
.xw-access-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--fg-soft);
    line-height: 1.55;
}
.xw-callout {
    margin-top: 2.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent);
    font-size: 0.92rem;
    color: var(--fg-soft);
    line-height: 1.6;
    max-width: 42rem;
}
.xw-callout a { color: var(--accent); font-weight: 600; }

/* RATING SPLIT — mega-number bookend echoing .offer-mega, paired
   with a plain marker list (no icons/cards — deliberately quieter
   than the rest of the page since this is a closing reassurance beat) */
.rating-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .rating-split {
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
    }
}
.rating-marks {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.rating-mark {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-size: 0.98rem;
    color: var(--fg-soft);
}
.rating-mark::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    transform: translateY(-3px);
}

/* WHO CAN PUBLISH — tier teaser strip */
.tier-strip-grid {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .tier-strip-grid { grid-template-columns: repeat(3, 1fr); }
}
.tier-strip-cell {
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
}
.tier-strip-cell.is-featured {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.tier-strip-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.tier-strip-price {
    font-size: 0.82rem;
    color: var(--fg-soft);
    margin-bottom: 1rem;
}
.tier-strip-cell ul {
    font-size: 0.82rem;
    color: var(--fg-soft);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ============================================================
   PRICING — display-case showcase (a "vitrina", not a table)

   This page's job is direct comparison + a purchase decision,
   not a narrative walk-through — so it deliberately does NOT
   reuse for_customers'/for_executors' compositional classes
   (offer-mega, freeze-flow, wave-panel, eligibility-grid,
   xw-*, tier-strip-grid, rating-split, doubt-block). Only the
   shared site-wide tokens/components carry over: --bg/--accent/
   etc., the type scale, .btn-filled/.btn-outline, .eyebrow,
   .section-num, .cta-panel, .faq-item, .feature-check-grid,
   .task-card, .input-field.

   New metaphor: three pedestals stand in a lit display case.
   A track-lighting rail spans the top of the case; the
   recommended tier sits under the brightest, pulsing fixture
   and wears a rotated price tag — literally the "spotlighted
   exhibit" in the window. The calculator is framed as a small
   register readout (struck-through 0 ₽ vs. a counted-up amount)
   rather than a single floating number.
   ============================================================ */

/* Hero — ascending price ladder (decorative preview of the 3 tiers) */
.pc-ladder {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2.25rem;
    margin: 3rem auto 0;
}
.pc-ladder-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.pc-ladder-bar {
    width: 16px;
    border-radius: 999px 999px 4px 4px;
    background: var(--border);
}
.pc-ladder-step:nth-child(1) .pc-ladder-bar { height: 30px; }
.pc-ladder-step:nth-child(2) .pc-ladder-bar { height: 58px; background: var(--accent); }
.pc-ladder-step:nth-child(3) .pc-ladder-bar { height: 88px; background: color-mix(in srgb, var(--fg) 78%, var(--accent) 22%); }
html.dark .pc-ladder-step:nth-child(3) .pc-ladder-bar { background: color-mix(in srgb, var(--fg) 65%, var(--accent) 35%); }
.pc-ladder-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}
.pc-ladder-price {
    font-size: 0.72rem;
    color: var(--fg-soft);
}

/* Tier stage — fixture rail (row 1, md+ only) + pedestal cards (row 2) */
.tier-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 768px) {
    .tier-stage {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0;
        column-gap: 1.75rem;
    }
}
.tier-fixture-cell {
    display: none;
}
@media (min-width: 768px) {
    .tier-fixture-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 48px;
        position: relative;
    }
}
.tier-fixture-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.tier-fixture-cell:nth-child(1)::after,
.tier-fixture-cell:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: calc(100% + 1.75rem);
    height: 2px;
    background: var(--border);
}
.tier-fixture-cell.is-recommended .tier-fixture-dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent);
    animation: tier-pulse 2.4s ease-in-out infinite;
}
@keyframes tier-pulse {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
    50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .tier-fixture-cell.is-recommended .tier-fixture-dot { animation: none; }
}

.tier-pedestal {
    position: relative;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2.25rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.tier-pedestal:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 55px -28px rgba(0,0,0,0.28);
}
@media (min-width: 768px) {
    .tier-pedestal.is-recommended { margin-top: -1.25rem; }
}
.tier-pedestal.is-recommended {
    border-color: var(--accent);
    background: var(--fg);
    color: var(--bg);
    box-shadow: 0 30px 60px -22px rgba(0,0,0,0.35);
}
.tier-pedestal.is-recommended:hover {
    box-shadow: 0 38px 70px -24px rgba(0,0,0,0.4);
}

.tier-tag {
    position: absolute;
    top: -14px;
    right: 24px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.42rem 0.85rem 0.42rem 1.05rem;
    border-radius: 0.4rem;
    transform: rotate(-6deg);
    box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--accent) 65%, transparent);
    animation: tier-tag-breathe 2.4s ease-in-out infinite;
}
.tier-tag::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
@keyframes tier-tag-breathe {
    0%, 100% { transform: rotate(-6deg) scale(1); }
    50% { transform: rotate(-6deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .tier-tag { animation: none; }
}

.tier-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}
.tier-tagline {
    font-size: 0.88rem;
    color: var(--fg-soft);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    min-height: 2.7em;
}
.tier-pedestal.is-recommended .tier-tagline {
    color: color-mix(in srgb, var(--bg) 70%, transparent);
}
.tier-price {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1.75rem;
}
.tier-price-unit {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-soft);
}
.tier-pedestal.is-recommended .tier-price-unit {
    color: color-mix(in srgb, var(--bg) 65%, transparent);
}

.tier-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    margin-bottom: 2rem;
}
.tier-pedestal.is-recommended .tier-rows {
    border-top-color: color-mix(in srgb, var(--bg) 18%, transparent);
}
.tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.tier-pedestal.is-recommended .tier-row {
    border-bottom-color: color-mix(in srgb, var(--bg) 14%, transparent);
}
.tier-row-label {
    color: var(--fg-soft);
    font-size: 0.78rem;
    line-height: 1.35;
    flex: 1 1 9rem;
    min-width: 0;
}
.tier-pedestal.is-recommended .tier-row-label {
    color: color-mix(in srgb, var(--bg) 65%, transparent);
}
.tier-row-value {
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
}
.tier-row-value.is-off {
    font-weight: 500;
    color: var(--fg-soft);
    opacity: 0.5;
}
.tier-pedestal.is-recommended .tier-row-value.is-off {
    color: color-mix(in srgb, var(--bg) 45%, transparent);
}
.tier-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    flex-shrink: 0;
}
.tier-check svg { width: 13px; height: 13px; }

.tier-cta {
    margin-top: auto;
}

/* Calculator — register readout (platform vs. executor) */
.pc-meter {
    padding: 2.5rem;
    max-width: 30rem;
    margin: 0 auto;
}
.pc-meter-result {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pc-meter-cell {
    border-radius: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
}
.pc-meter-cell.is-platform {
    background: var(--bg-soft);
}
.pc-meter-cell.is-executor {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.pc-meter-cell-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-soft);
    margin-bottom: 0.6rem;
}
.pc-meter-cell-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    line-height: 1;
}
.pc-meter-cell.is-platform .pc-meter-cell-value {
    font-size: 1.35rem;
    color: var(--fg-soft);
    text-decoration: line-through;
    opacity: 0.6;
}
.pc-meter-cell.is-executor .pc-meter-cell-value {
    font-size: 2rem;
    color: var(--accent);
}
.pc-meter-track {
    height: 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    overflow: hidden;
    margin-top: 1.5rem;
}
.pc-meter-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: #16a34a;
    transform: scaleX(1);
    transform-origin: left center;
}
.pc-meter-caption {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--fg-soft);
    text-align: center;
}
/* ЖИВОЙ ЧЕК ПРОЗРАЧНОСТИ */
.pc-proof {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2.5rem;
    text-align: left;
}
.pc-proof-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0;
    border-bottom: 1px dashed var(--border);
}
.pc-proof-label {
    font-size: 0.9rem;
    color: var(--fg-soft);
}
.pc-proof-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
}
.pc-proof-zero {
    position: relative;
    display: inline-flex;
    color: var(--fg-soft);
}
.pc-proof-slash {
    position: absolute;
    inset: -4px -8px;
    width: calc(100% + 16px);
    height: calc(100% + 8px);
    color: #e11d48;
    overflow: visible;
}
.pc-proof-slash path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-origin: left center;
    transform: scaleX(0);
}
.pc-proof-arrow {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    color: var(--accent);
}
.pc-proof-arrow svg { width: 22px; height: 22px; }
.pc-proof-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
}
.pc-proof-total-label {
    font-weight: 600;
    font-size: 0.95rem;
}
.pc-proof-total-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--accent);
}
.pc-proof-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-soft);
    overflow: hidden;
    margin-top: 1.5rem;
}
.pc-proof-fill {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: #16a34a;
    transform: scaleX(0);
    transform-origin: left center;
}

/* СВЕТОВАЯ СТЕНА */
.pc-wall {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .pc-wall { grid-template-columns: repeat(4, 1fr); }
}
.pc-wall-cell {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    overflow: hidden;
}
.pc-wall-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    width: 140%;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.pc-wall-num {
    position: relative;
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 2.75rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.9rem;
}
.pc-wall-icon {
    font-size: 2rem;
}
.pc-wall-text {
    position: relative;
    font-size: 0.82rem;
    color: var(--fg-soft);
    line-height: 1.5;
}

/* ============================================================
   HOME — overview showcase for BOTH audiences at once.

   Deliberately does NOT reuse for_customers'/for_executors'/
   pricing's compositional classes (offer-mega, freeze-flow,
   wave-panel, xw-*, tier-pedestal/tier-stage, eligibility-grid,
   rating-split, pc-*) — those are each page's own signature.
   Home gets its own namespace (hm-*) and its own metaphors:
   a real feed task-card as the hero proof object (reusing the
   actual product classes .task-card/.task-status/.task-number-
   badge, not an invented look-alike), a moving escrow rail with
   a scroll-filled connecting line, and a segmented "capacity
   meter" for mass-task waves (continuous bar, not dots or seats).
   Only shared site-wide tokens/components carry over: --bg/
   --accent/etc., the type scale, .btn-*, .eyebrow, .section-num,
   .cta-panel, .tier-badge, .task-card family.
   ============================================================ */

/* ---------- HERO ---------- */
.hm-hero-grid {
    display: grid;
    gap: 2.75rem;
    align-items: center;
}
@media (min-width: 900px) {
    .hm-hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 3rem;
    }
}
.hm-hero-live {
    display: flex;
    justify-content: center;
}
@media (min-width: 900px) {
    .hm-hero-live { justify-content: flex-end; }
}

.hm-fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin: 0 0 2.25rem;
}
.hm-fact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-soft);
}
.hm-fact-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.hm-live-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: 340px;
}
.hm-live-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fg-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hm-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
    animation: hm-pulse 2s ease-in-out infinite;
}
@keyframes hm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); }
    50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) {
    .hm-live-dot { animation: none; }
}
.hm-live-card {
    width: 100%;
    box-shadow: 0 30px 50px -32px rgba(0,0,0,0.35);
}

/* ---------- 01 · MONEY FLOW RAIL ---------- */
.hm-flow-track {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}
@media (min-width: 860px) {
    .hm-flow-track {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        padding-top: 2.5rem;
    }
}
.hm-flow-line {
    display: none;
}
@media (min-width: 860px) {
    .hm-flow-line {
        display: block;
        position: absolute;
        top: 2.25rem;
        left: 7%;
        right: 7%;
        height: 3px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--bg) 18%, transparent);
        overflow: hidden;
    }
}
.hm-flow-line-fill {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
}
.hm-flow-node {
    flex: 1;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    position: relative;
}
.hm-flow-node-body {
    min-width: 0;
    flex: 1;
}
@media (min-width: 860px) {
    .hm-flow-node {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 1rem;
    }
}
.hm-flow-node-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--bg) 24%, transparent);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.hm-flow-node-icon svg { width: 20px; height: 20px; }
.hm-flow-node.is-payout .hm-flow-node-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.hm-flow-node-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.hm-flow-node.is-payout .hm-flow-node-title { color: var(--accent); }
.hm-flow-node-text {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--bg) 65%, transparent);
    line-height: 1.5;
}
.hm-flow-note {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bg) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
    font-size: 0.9rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--bg) 82%, transparent);
}

/* ---------- 02 · WAVE CAPACITY METER ---------- */
.hm-wave-track {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
@media (min-width: 640px) {
    .hm-wave-track {
        flex-direction: row;
        align-items: stretch;
        height: 3.25rem;
        gap: 0.6rem;
    }
}
.hm-wave-seg {
    position: relative;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
}
@media (min-width: 640px) {
    .hm-wave-seg {
        height: auto;
        flex: var(--seg-grow, 1) 0 0%;
    }
}
.hm-wave-seg-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
}
.hm-wave-seg.is-full .hm-wave-seg-fill { transform: scaleX(1); }
.hm-wave-seg.is-open .hm-wave-seg-fill { width: 56%; }
.hm-wave-seg.is-locked {
    background: repeating-linear-gradient(135deg, var(--bg-soft), var(--bg-soft) 6px, var(--border) 6px, var(--border) 7px);
    border-style: dashed;
    opacity: 0.75;
}
.hm-wave-captions {
    display: grid;
    gap: 0.6rem 1rem;
    margin-top: 1.1rem;
}
@media (min-width: 640px) {
    .hm-wave-captions { grid-template-columns: repeat(3, 1fr); }
}
.hm-wave-cap-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
}
.hm-wave-cap-sub {
    font-size: 0.78rem;
    color: var(--fg-soft);
}

/* ---------- 03 · AUDIENCE SPLIT ---------- */
.hm-role-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 768px) {
    .hm-role-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.hm-role-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
}
.hm-role-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.hm-role-icon svg { width: 22px; height: 22px; color: var(--accent); }
.hm-role-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-soft);
    margin-bottom: 0.5rem;
}
.hm-role-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
}
.hm-role-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.88rem;
    color: var(--fg-soft);
    line-height: 1.5;
}
.hm-role-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}
.hm-role-list li svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.hm-role-cta {
    margin-top: auto;
    font-weight: 600;
    color: var(--accent);
}

/* ---------- 04 · COMPACT PLAN GRID ---------- */
.hm-plan-grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
@media (min-width: 768px) {
    .hm-plan-grid { grid-template-columns: repeat(3, 1fr); }
}
.hm-plan-cell {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 1.85rem;
}
.hm-plan-cell.is-mid {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}
.hm-plan-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.4rem;
}
.hm-plan-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    margin-bottom: 1.1rem;
}
.hm-plan-price span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fg-soft);
}
.hm-plan-facts {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.82rem;
    color: var(--fg-soft);
    line-height: 1.4;
}
.hm-plan-facts li {
    display: flex;
    gap: 0.55rem;
}
.hm-plan-facts li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.hm-ticker {
    width: 100%;
    max-width: 340px;
    height: 460px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.hm-ticker-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: hm-ticker-scroll 28s linear infinite;
}
.hm-ticker:hover .hm-ticker-track {
    animation-play-state: paused;
}
@keyframes hm-ticker-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hm-ticker-track { animation: none; }
}
.hm-live-card {
    flex-shrink: 0;
    box-shadow: 0 20px 40px -28px rgba(0,0,0,0.3);
}
.ab-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.ab-hero-logo {
    width: 90px;
    flex-shrink: 0;
    display: none;
}
@media (min-width: 640px) {
    .ab-hero-logo {
        display: block;
        width: 120px;
    }
}
@media (min-width: 900px) {
    .ab-hero-logo {
        width: 160px;
    }
}

/* ============================================================
   GLOBAL SITE CHROME — HEADER & FOOTER (base.html)
   Общая для всех страниц «рама» сайта: не привязана ни к одной
   странице и не использует их метафоры (torn-ticket у xw-*,
   живой чек у pc-*, wave у hm-*) — только общие --токены,
   тип-система, .btn-*, тонкие сплошные разделители и пилюли,
   уже принятые сайтом как нейтральный словарь.
   ============================================================ */

/* ---------- HEADER ---------- */
.site-header { transition: box-shadow 0.25s ease; }
.site-header .nav-row { transition: padding 0.25s ease; }
.site-header.is-compact {
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, 0.35);
}
.site-header.is-compact .nav-row {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .site-header .nav-row { transition: none; }
}

.nav-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--border);
    flex-shrink: 0;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    color: var(--fg-soft);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover {
    background: var(--bg-soft);
    color: var(--fg);
}
.nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    color: var(--fg);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-icon-btn:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
}
.nav-icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
#mobile-menu-toggle .icon-close { display: none; }
#mobile-menu-toggle.is-open .icon-menu { display: none; }
#mobile-menu-toggle.is-open .icon-close { display: block; }

.nav-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    flex-shrink: 0;
}
.nav-avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.95rem;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.9rem 0.4rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-user-btn:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
}
.nav-user-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.nav-chevron { transition: transform 0.2s ease; color: var(--fg-soft); }
#user-menu-toggle.is-open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    width: 16rem;
    z-index: 30;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    padding: 0.5rem;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
}
.nav-dropdown-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.6rem 0.75rem;
}
.nav-dropdown-name {
    font-size: 0.88rem;
    font-weight: 700;
}
.nav-dropdown-sub {
    font-size: 0.72rem;
    color: var(--fg-soft);
}
.nav-dropdown-group {
    padding: 0.35rem 0;
    border-top: 1px solid var(--border);
}
.nav-dropdown-group:first-of-type { border-top: none; }
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.6rem;
    border-radius: 0.7rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--fg);
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-dropdown-item:hover, .nav-dropdown-item:focus-visible {
    background: var(--bg-soft);
    border-left-color: var(--accent);
}
.nav-dropdown-item-danger { color: var(--accent); }
.nav-item-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--fg-soft);
}
.nav-dropdown-item:hover .nav-item-icon, .nav-dropdown-item-danger .nav-item-icon {
    color: currentColor;
}

@keyframes nav-pop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
#user-menu:not(.hidden) { animation: nav-pop-in 0.18s ease both; }
#mobile-menu:not(.hidden) { animation: nav-pop-in 0.2s ease both; }
@media (prefers-reduced-motion: reduce) {
    #user-menu:not(.hidden), #mobile-menu:not(.hidden) { animation: none; }
}

/* ---------- MOBILE MENU ---------- */
.nav-mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0.5rem 1.25rem 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
    padding: 0.6rem;
}
.nav-mobile-group {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}
.nav-mobile-group:first-child { border-top: none; }
.nav-mobile-item {
    padding: 0.85rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fg);
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-mobile-item:hover, .nav-mobile-item:focus-visible {
    background: var(--bg-soft);
    border-left-color: var(--accent);
}
.nav-mobile-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.4rem 0;
    padding: 0.85rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--bg-soft);
    font-size: 0.85rem;
    color: var(--fg-soft);
    font-weight: 500;
}
.nav-mobile-balance-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
}
.nav-mobile-cta { padding: 0.7rem 0.4rem 0.4rem; }

/* ---------- FOOTER ---------- */
.ftr-top {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding-bottom: 2.25rem;
}
@media (min-width: 768px) {
    .ftr-top {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }
}
.ftr-logo { width: 34px; height: 34px; }
.ftr-tagline {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-soft);
}
.ftr-links {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 0.88rem;
}
@media (min-width: 640px) {
    .ftr-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 0;
    }
}
.ftr-links a {
    color: var(--fg-soft);
    transition: color 0.15s ease;
}
.ftr-links a:hover, .ftr-links a:focus-visible {
    color: var(--fg);
}
@media (min-width: 640px) {
    .ftr-links a {
        position: relative;
        padding: 0 0.9rem;
    }
    .ftr-links a:first-child { padding-left: 0; }
    .ftr-links a:not(:first-child)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
        opacity: 0.6;
    }
}
/* ============================================================
   DASHBOARD (личный кабинет) — рабочий экран, а не сценарий
   продажи: баланс, лимит цикла и текущие задания в одном взгляде.
   Специально не использует композиционные классы продающих страниц.
   ============================================================ */

.dash-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.dash-head-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* аккаунтная сводка: баланс + (если есть) цикл подписки */
.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.dash-stat-grid.dash-stat-grid-solo {
    grid-template-columns: minmax(0, 320px);
}
@media (min-width: 640px) {
    .dash-stat-grid { gap: 1rem; }
}

.dash-stat-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color 0.15s ease;
}
a.dash-stat-tile:hover {
    border-color: var(--accent);
}

.dash-stat-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.7rem;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.dash-stat-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.dash-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-soft);
}

.dash-stat-value, .dash-limit-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.15;
}
.dash-stat-value { font-size: 1.4rem; }
.dash-stat-value.small { font-size: 1rem; }

/* остаток лимита — самая важная цифра сессии, акцентная и крупная */
.dash-limit-value {
    font-size: 1.85rem;
    color: var(--accent);
}
.dash-limit-value.is-unlimited { font-size: 1.3rem; }

/* персональный код — тихая строка, не конкурирует с деньгами */
.dash-code-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.dash-code-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 1rem;
}
.dash-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    background: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dash-code-copy:hover { border-color: var(--accent); color: var(--accent); }
.dash-code-copy svg { width: 0.85rem; height: 0.85rem; }

/* промо-блок для роли regular — компактный, не нарративный */
.dash-promo {
    background: var(--accent);
    color: #fff;
    border-radius: 1.25rem;
    padding: 1.75rem;
    text-align: center;
}

/* переключатель Заказчик/Исполнитель — сегмент-контрол */
.dash-tabs {
    display: inline-flex;
    padding: 0.3rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 0.2rem;
}
.dash-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-soft);
    transition: all 0.15s ease;
}
.dash-tab.is-active {
    background: var(--accent);
    color: #fff;
}
.dash-tab:not(.is-active):hover { color: var(--fg); }

/* блок действия сессии: остаток лимита + основная кнопка рядом */
.dash-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
}

/* список заданий — те же .task-card, просто в адаптивной сетке */
.dash-task-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 640px) {
    .dash-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* лёгкое появление при первой загрузке — коротко, без сценариев скролла */
@media (prefers-reduced-motion: no-preference) {
    .dash-enter {
        animation: dash-fade-up 0.45s ease both;
    }
    .dash-enter-2 { animation-delay: 0.06s; }
}
@keyframes dash-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   DASHBOARD v2 (личный кабинет — заказчик/исполнитель) — переключатель
   ролей с предзагруженными обеими панелями: сервер рендерит оба блока
   сразу, JS/CSS-атрибут [data-view] на #dash-root просто показывает
   нужный, без второго запроса за данными.
   ------------------------------------------------------------------ */

[data-dash-root] { display: flex; flex-direction: column; gap: 1.75rem; }
[data-dash-root][data-view="customer"] [data-panel="executor"] { display: none; }
[data-dash-root][data-view="executor"] [data-panel="customer"] { display: none; }

.dash-hero-row, .dash-mid-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.dash-hero-card {
    flex: 1 1 420px;
    min-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.6rem;
    padding: 1.85rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
    overflow: hidden;
}
.dash-hero-blob {
    position: absolute;
    right: -70px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(244, 81, 30, 0.14), rgba(244, 81, 30, 0));
    pointer-events: none;
}
.dash-hero-eyebrow { font-size: 0.8rem; color: var(--fg-soft); font-weight: 500; }
.dash-hero-title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.dash-hero-title span { color: var(--accent); }
.dash-hero-sub { font-size: 0.92rem; color: var(--fg-soft); max-width: 44ch; margin: 0; }

.dash-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    background: var(--bg-soft);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.dash-pill i { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); display: inline-block; }
.dash-pill-muted { color: var(--fg-soft); }
.dash-pill-muted i { background: var(--fg-soft); opacity: 0.5; }
.dash-pill-warn {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-fg);
    padding-right: 0.35rem;
}
.dash-pill-warn form { display: contents; }
.dash-pill-warn-btn {
    padding: 0.3rem 0.7rem;
    background: var(--fg);
    color: var(--bg);
    border: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.dash-balance-card {
    flex: 1 1 300px;
    min-width: 260px;
    background: var(--surface-inverse);
    color: var(--surface-inverse-fg);
    border-radius: 1.6rem;
    padding: 1.6rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
    overflow: hidden;
}
.dash-balance-blob {
    position: absolute;
    inset: auto -40px -60px auto;
    width: 200px;
    height: 200px;
    border-radius: 999px;
    filter: blur(6px);
    background: radial-gradient(circle, rgba(244, 81, 30, 0.5), rgba(244, 81, 30, 0));
    pointer-events: none;
}
.dash-balance-top { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; }
.dash-balance-top span:first-child { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.dash-balance-top span:last-child { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.dash-balance-amount {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1;
}
.dash-balance-delta { position: relative; display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.dash-balance-delta-value { padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; font-size: 0.75rem; background: rgba(244, 81, 30, 0.18); color: #FF7A4D; }

.dash-spark { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 44px; opacity: 0.9; }
.dash-spark-bar {
    flex: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.18);
    transform-origin: bottom;
    animation: dash-grow-y 0.5s ease both;
}
.dash-spark-bar.is-recent { background: var(--accent); }

.dash-balance-actions { position: relative; display: flex; gap: 0.6rem; margin-top: 0.15rem; }
.dash-balance-btn {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    border-radius: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}
.dash-balance-btn:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.dash-balance-btn-primary { background: var(--accent); border-color: transparent; }
.dash-balance-btn-primary:hover { filter: brightness(1.08); background: var(--accent); transform: translateY(-2px); }

.dash-cta-card {
    flex: 1 1 300px;
    min-width: 260px;
    text-align: left;
    border-radius: 1.6rem;
    padding: 1.6rem 1.75rem;
    background: linear-gradient(150deg, var(--accent), #D93E10);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    box-shadow: 0 14px 34px rgba(244, 81, 30, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-cta-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(244, 81, 30, 0.36); color: #fff; }
/* вариант для одиночного размещения (нет соседних .dash-limits-card/.dash-stats-col
   в ряду, как у role=regular) — не растягивается на всю ширину ряда */
.dash-cta-card.dash-cta-card-solo { flex: 0 1 480px; }
.dash-cta-card.dash-cta-card-muted {
    background: var(--bg-card);
    color: var(--fg);
    border: 1px solid var(--border);
    box-shadow: none;
}
.dash-cta-card.dash-cta-card-muted .dash-cta-top span:first-child {
    color: var(--fg);
}
.dash-cta-card.dash-cta-card-muted p {
    color: var(--fg-soft);
}
.dash-cta-card.dash-cta-card-muted:hover {
    color: var(--fg);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}
.dash-cta-card-muted .dash-cta-arrow {
    background: var(--accent);
    color: #fff;
}
.dash-cta-card-muted p {
    color: var(--fg-soft);
}
.dash-cta-top { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; }
.dash-cta-top span:first-child { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.02em; }
.dash-cta-arrow {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    animation: dash-float 3.2s ease-in-out infinite;
}
.dash-cta-card p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); max-width: 30ch; }

.dash-limits-card {
    flex: 1 1 300px;
    min-width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.6rem;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-limits-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; }
.dash-limits-head span:last-child { font-size: 0.72rem; font-weight: 500; color: var(--fg-soft); }
.dash-limit-row { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-limit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; color: var(--fg-soft); font-weight: 500; }
.dash-limit-top strong { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.dash-limit-bar { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.dash-limit-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #FF7A4D); transform-origin: left; animation: dash-grow-x 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dash-limits-link { font-size: 0.82rem; font-weight: 600; margin-top: auto; color: var(--accent); }

.dash-stats-col { flex: 1 1 200px; min-width: 200px; display: flex; flex-direction: column; gap: 0.85rem; }
.dash-stat-tile2 {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.35rem;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
    transition: border-color 0.2s ease;
}
.dash-stat-tile2:hover { border-color: var(--accent); }
.dash-stat-tile2 .value { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.dash-stat-tile2 .label { font-size: 0.78rem; color: var(--fg-soft); font-weight: 500; }

.dash-list-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.6rem;
    padding: 1.5rem 1.6rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.dash-list-head-title { font-size: 1.05rem; font-weight: 600; margin-right: auto; }
.dash-list-head a { font-size: 0.82rem; font-weight: 600; color: var(--accent); }

.dash-row-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: var(--bg);
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.dash-row:hover { background: var(--bg-card); border-color: var(--border); transform: translateX(3px); }
.dash-row-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.8rem;
    background: var(--bg-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}
.dash-row-body { flex: 1 1 200px; min-width: 160px; display: flex; flex-direction: column; gap: 0.15rem; }
.dash-row-title { font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.dash-row-meta { font-size: 0.78rem; color: var(--fg-soft); }
.dash-row-sum { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; min-width: 80px; text-align: right; color: var(--fg); }

.dash-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem;
    border-radius: 1.4rem;
    background: var(--bg);
    border: 1px dashed var(--border);
}
.dash-empty-icon {
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 4.5rem;
    border-radius: 1.4rem;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    animation: dash-float 3.6s ease-in-out infinite;
}
.dash-empty-body { flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.35rem; }
.dash-empty-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.dash-empty-sub { font-size: 0.85rem; color: var(--fg-soft); max-width: 52ch; margin: 0; }

@keyframes dash-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
@keyframes dash-grow-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes dash-grow-y {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Форма публикации задания (task_create.html) — секции, карточки выбора, условные блоки */

.form-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem;
}
@media (min-width: 640px) {
    .form-section {
        padding: 1.85rem 2rem;
    }
}

.form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}
.form-section-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--fg-soft);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}
.form-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
}
.form-section-hint {
    font-size: 0.82rem;
    color: var(--fg-soft);
    margin-top: 0.2rem;
    line-height: 1.45;
}

.req-mark {
    color: var(--accent);
    margin-left: 0.15rem;
}

/* карточки-варианты для радиокнопок: показывают, что откроется при выборе */
.choice-card {
    position: relative;
    display: block;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--bg-card);
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.choice-card:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.choice-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
}
.choice-card:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.choice-card input[type="radio"] {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}
.choice-card-body {
    display: block;
}
.choice-card-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}
.choice-card-desc {
    display: block;
    font-size: 0.76rem;
    color: var(--fg-soft);
    margin-top: 0.2rem;
    line-height: 1.4;
}

/* плавное раскрытие условных блоков (регион/города, массовый режим) */
.conditional-block {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.25s ease, visibility 0.25s step-end;
}
.conditional-block.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.25s ease, visibility 0s;
}
.conditional-block > .conditional-block-inner {
    overflow: hidden;
    min-height: 0;
    padding-top: 1.1rem;
    margin-top: 1.1rem;
    border-top: 1px dashed var(--border);
}
@media (prefers-reduced-motion: reduce) {
    .conditional-block {
        transition: none;
    }
}

/* строка с чекбоксом (18+, только проверенные) — увеличенная зона клика */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
}
.check-row:hover {
    background: var(--bg-soft);
}
.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.check-row label {
    font-size: 0.88rem;
    line-height: 1.45;
    cursor: pointer;
}

/* ============================================================
   PREMIUM (покупка) — консоль уровня доступа, не витрина

   Это транзакционная страница: тут реально списываются деньги,
   поэтому её первая задача — мгновенно ответить "что у меня уже
   есть", и только потом — "что можно выбрать". Она намеренно НЕ
   переиспользует метафору pricing.html (display-case пьедесталы
   tier-pedestal/tier-stage/pc-*, световая рейка-fixture, лесенка
   pc-ladder) — та страница сравнивает тарифы, эта — исполняет
   покупку. Из общей системы взяты только токены/компоненты:
   --bg/--accent и т.д., типографика, .btn-filled/.btn-outline,
   .eyebrow, .wide-stat-strip, .plain-list-item.

   Новая метафора: консоль допуска. Горизонтальная рейка с тремя
   отметками показывает, какой уровень уже открыт (заполненный
   трек до текущей отметки — как считанная карта доступа), и
   читается ещё ДО того, как взгляд доходит до карточек. Сами
   карточки пронумерованы («Уровень 01/02/03» — это реально
   ступени, повышать можно только вверх), а та, что совпадает с
   открытым уровнем, получает единственную акцентную подсветку
   страницы + бирку «Активен сейчас» — это единственное яркое
   пятно на странице, всё остальное сознательно нейтрально.
   ============================================================ */

.sub-status {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 1.5rem;
    padding: 1.75rem 1.75rem 2.1rem;
    margin-bottom: 3rem;
}
.sub-status-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.85rem;
}
.sub-status-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-soft);
    margin-bottom: 0.4rem;
}
.sub-status-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
}
.sub-status-value.is-empty {
    color: var(--fg-soft);
    font-weight: 600;
    font-size: 1.05rem;
}
.sub-balance {
    text-align: right;
}
@media (max-width: 480px) {
    .sub-balance { text-align: left; }
}
.sub-balance-label {
    font-size: 0.72rem;
    color: var(--fg-soft);
    margin-bottom: 0.25rem;
}
.sub-balance-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
.sub-balance-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
}
.sub-balance-link:hover { text-decoration: underline; }

/* rail — три отметки уровня, заполненная линия до текущей */
.sub-rail {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
}
.sub-rail-line {
    position: absolute;
    top: 19px;
    left: 15px;
    right: 15px;
    height: 3px;
    background: var(--border);
    border-radius: 999px;
    z-index: 0;
}
.sub-rail-fill {
    position: absolute;
    top: 19px;
    left: 15px;
    height: 3px;
    background: var(--accent);
    border-radius: 999px;
    z-index: 1;
    width: 0%;
    transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.sub-rail-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
}
.sub-rail-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--border);
    transition: background 0.3s ease, border-color 0.3s ease;
}
.sub-rail-node.is-passed .sub-rail-dot {
    background: var(--accent);
    border-color: var(--accent);
}
.sub-rail-node.is-current .sub-rail-dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent);
    animation: sub-pulse 2.2s ease-in-out infinite;
}
@keyframes sub-pulse {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .sub-rail-node.is-current .sub-rail-dot { animation: none; }
}
.sub-rail-name {
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}
.sub-rail-node:not(.is-current) .sub-rail-name {
    color: var(--fg-soft);
    font-weight: 600;
}

/* сетка карточек */
.sub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .sub-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

.sub-card {
    position: relative;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2.1rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.sub-card:hover {
    transform: translateY(-4px);
}
.sub-card.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
    box-shadow: 0 0 0 1px var(--accent), 0 26px 50px -30px color-mix(in srgb, var(--accent) 55%, transparent);
}
@media (min-width: 768px) {
    .sub-card.is-active { transform: translateY(-10px); }
    .sub-card.is-active:hover { transform: translateY(-14px); }
}

.sub-card-badge {
    position: absolute;
    top: -13px;
    left: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sub-card-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.sub-card-tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-soft);
    margin-bottom: 1rem;
}

.sub-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.sub-card-tagline {
    color: var(--fg-soft);
    font-size: 0.92rem;
    margin-bottom: 1.5rem;
}

.sub-card-price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    display: block;
    margin-bottom: 1.5rem;
}
.sub-card-price-unit {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--fg-soft);
}

.sub-card-feats {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--fg-soft);
    margin-bottom: 1.75rem;
    flex: 1;
}
.sub-card-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
}
.sub-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    color: var(--accent);
}
.sub-check svg { width: 100%; height: 100%; }

.sub-card-note {
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fg-soft);
    padding: 0.85rem 0.5rem 0.1rem;
    border-top: 1px dashed var(--border);
}

.ftr-bottom {
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--fg-soft);
}

/* ============================================================
   РЕФЕРАЛЬНАЯ ПРОГРАММА — личная страница приглашений (referrals.html)
   Ссылка и кнопка копирования — главный элемент первого экрана;
   список приглашённых и лента начислений разведены разной анатомией
   ряда (аватар+роль vs сумма), а не только заголовками.
   ============================================================ */

.ref-hero {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
    border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border));
    border-radius: 1.5rem;
    padding: 1.75rem 1.5rem;
}
.ref-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 72%);
    pointer-events: none;
}
.ref-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    position: relative;
}
.ref-hero-label svg { width: 15px; height: 15px; }

.ref-hero-link-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
}
@media (min-width: 640px) {
    .ref-hero-link-row { flex-direction: row; }
}

.ref-link-input {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 0.95rem 1.1rem;
    cursor: text;
}
.ref-link-input:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ref-copy-btn {
    position: relative;
    display: inline-grid;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.ref-copy-btn:active { transform: scale(0.97); }
.ref-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ref-copy-btn.is-copied {
    background: #16a34a;
    box-shadow: 0 8px 20px -8px rgba(22, 163, 74, 0.55);
}
.ref-copy-btn-state {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.ref-copy-btn-state svg { width: 16px; height: 16px; flex-shrink: 0; }
.ref-copy-btn-state--done {
    opacity: 0;
    transform: translateY(5px);
}
.ref-copy-btn.is-copied .ref-copy-btn-state--default { opacity: 0; transform: translateY(-5px); }
.ref-copy-btn.is-copied .ref-copy-btn-state--done { opacity: 1; transform: translateY(0); }

.ref-hero-hint {
    font-size: 0.76rem;
    color: var(--fg-soft);
    margin-top: 0.75rem;
    position: relative;
}

.ref-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    position: relative;
}
.ref-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--fg-soft);
}
.ref-fact-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.ref-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.ref-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    padding: 1.1rem 1.25rem;
}
.ref-stat--earned {
    background: color-mix(in srgb, #16a34a 8%, var(--bg-card));
    border-color: color-mix(in srgb, #16a34a 30%, var(--border));
}
.ref-stat-label {
    display: block;
    font-size: 0.76rem;
    color: var(--fg-soft);
    margin-bottom: 0.3rem;
}
.ref-stat-value {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
}
.ref-stat--earned .ref-stat-value { color: #16a34a; }

.ref-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ref-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    background: var(--bg-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.ref-icon-badge svg { width: 18px; height: 18px; }
.ref-icon-badge--money { color: #16a34a; }
.ref-section-sub {
    font-size: 0.8rem;
    color: var(--fg-soft);
    margin-top: 0.1rem;
}

.ref-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    padding: 0.25rem 1.25rem;
}
.ref-person-row,
.ref-ledger-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.ref-person-row:last-child,
.ref-ledger-row:last-child { border-bottom: none; }

.ref-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--fg);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.ref-person-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
}

.ref-ledger-row { justify-content: space-between; }
.ref-ledger-name {
    font-size: 0.9rem;
    font-weight: 600;
}
.ref-ledger-date {
    font-size: 0.76rem;
    color: var(--fg-soft);
    margin-top: 0.1rem;
}
.ref-amount {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.ref-empty {
    font-size: 0.85rem;
    color: var(--fg-soft);
    text-align: center;
    padding: 1.75rem 0.5rem;
    line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
    .ref-rise {
        animation: ref-rise-in 0.4s ease both;
        animation-delay: calc(var(--i, 0) * 45ms);
    }
}
@keyframes ref-rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hm-ref-panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2.5rem;
}
@media (min-width: 768px) {
    .hm-ref-panel {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 3rem;
    }
}
.hm-ref-panel-text {
    max-width: 32rem;
}
.hm-ref-panel-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.hm-ref-panel-value {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--accent);
}
/* Расширяем стандартные Tailwind max-w-* контейнеры на очень широких
   экранах (от ~1920px), чтобы контент не выглядел узкой лентой посреди
   пустого фона на больших мониторах. На обычных экранах (ноутбуки,
   мониторы до ~24") ничего не меняется — clamp() держит исходную
   ширину, пока viewport не станет достаточно широким. */
.max-w-md  { max-width: clamp(28rem, 23.3vw, 40rem)  !important; }
.max-w-lg  { max-width: clamp(32rem, 26.7vw, 46rem)  !important; }
.max-w-xl  { max-width: clamp(36rem, 30vw,   50rem)  !important; }
.max-w-2xl { max-width: clamp(42rem, 35vw,   58rem)  !important; }
.max-w-3xl { max-width: clamp(48rem, 40vw,   66rem)  !important; }
.max-w-4xl { max-width: clamp(56rem, 46.7vw, 76rem)  !important; }
.max-w-5xl { max-width: clamp(64rem, 53.3vw, 86rem)  !important; }
.max-w-6xl { max-width: clamp(72rem, 60vw,   96rem)  !important; }
.max-w-7xl { max-width: clamp(80rem, 66.7vw, 106rem) !important; }

.hm-free-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem 2.25rem;
}
@media (min-width: 768px) {
    .hm-free-panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

#id_email {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
#id_email:focus {
    outline: none;
    border-color: var(--accent);
}

#id_new_password1, #id_new_password2 {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}
#id_new_password1:focus, #id_new_password2:focus {
    outline: none;
    border-color: var(--accent);
}

.err404-stage {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.err404-signal {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
    perspective: 1200px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}

.err404-image {
    position: relative;
    z-index: 2;
    width: 320px;
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.24));
    transform-style: preserve-3d;
    animation: err404-float 4s ease-in-out infinite;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.25s ease-out;
}

.err404-shadow {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 220px;
    height: 32px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--fg) 35%, transparent) 0%, transparent 75%);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: err404-shadow-pulse 4s ease-in-out infinite;
}

.err404-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 2px dashed var(--accent);
    opacity: 0;
    animation: err404-pulse 3s ease-out infinite;
}
.err404-ring-1 { animation-delay: 0s; }
.err404-ring-2 { animation-delay: 1s; }
.err404-ring-3 { animation-delay: 2s; }

@keyframes err404-pulse {
    0%   { transform: scale(0.35); opacity: 0.6; }
    80%  { opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes err404-float {
    0%, 100% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) rotateZ(0deg); }
    50%      { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-14px) rotateZ(0deg); }
}

.err404-image {
    animation: err404-float 4s ease-in-out infinite, err404-spin 6s linear infinite;
}

@keyframes err404-shadow-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50%      { transform: translateX(-50%) scale(0.7); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .err404-ring { display: none; }
    .err404-image { animation: none; }
    .err404-shadow { animation: none; }
}
@keyframes err404-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.nav-avatar-img {
    padding: 0;
    overflow: hidden;
}
.nav-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.settings-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
}
.settings-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}
.settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.settings-avatar-fallback {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--fg-soft);
}
.settings-avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg);
    cursor: pointer;
    transition: filter 0.15s ease;
}
.settings-avatar-edit:hover {
    filter: brightness(1.08);
}
.settings-avatar-edit svg {
    width: 15px;
    height: 15px;
}
.settings-avatar-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
}
.settings-avatar-link-danger {
    color: #e11d48;
}

.nav-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nav-notif-panel {
    width: 320px;
    max-width: 90vw;
    right: 0;
}
.nav-notif-list {
    max-height: 340px;
    overflow-y: auto;
}
.nav-notif-item {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item.is-unread {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.nav-notif-text {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.25rem;
}
.nav-notif-date {
    font-size: 0.72rem;
    color: var(--fg-soft);
}
.nav-notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--fg-soft);
}
.nav-notif-all {
    display: block;
    text-align: center;
    padding: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .nav-notif-panel {
        position: fixed;
        top: 68px;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
    }
}


.news-content img,
.news-content video {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 1rem 0;
    display: block;
}
.news-content p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.news-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
    color: var(--fg-soft);
    margin: 1rem 0;
}
.news-content h2, .news-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}

.news-pinned-card {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}

.hm-video-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--fg);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4);
    cursor: pointer;
}
.hm-video-el {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    display: block;
}
.hm-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: transform 0.2s ease;
}
.hm-video-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}
.hm-video-wrap:hover .hm-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}
.hm-video-wrap.is-playing .hm-video-play {
    display: none;
}
.hm-video-wrap.is-playing controls-visible video::-webkit-media-controls {
    display: flex !important;
}
.avatar-img-fill { padding: 0; overflow: hidden; }
.avatar-img-fill img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.lightbox-trigger {
    cursor: zoom-in;
}
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}
.lightbox-overlay.hidden {
    display: none;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
}
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    border: none;
    cursor: pointer;
}
.lightbox-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lightbox-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.dash-cta-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}