/* ============================================================
   QUESTIX UI — единая дизайн-система
   Две темы: light / dark (автоопределение + ручной override
   через [data-theme="..."] на <html>).
   Все токены и компоненты — префикс .q-*
   ============================================================ */

/* ------------------------------------------------------------
   1. БРЕНДОВЫЕ ТОКЕНЫ (не меняются между темами)
   ------------------------------------------------------------ */
:root {
    /* Brand palette (из лэндинга) */
    --q-yellow:       #FFB800;
    --q-yellow-soft:  #FFD152;
    --q-orange:       #FF6B00;
    --q-orange-light: #FF8C2E;
    --q-orange-deep:  #E55A00;
    --q-purple:       #7B4EAB;
    --q-purple-deep:  #5A2D82;
    --q-purple-glow:  rgba(123,78,171,.45);
    --q-blue:         #4FC3F7;
    --q-blue-dark:    #0277BD;
    --q-red:          #FF4757;
    --q-green:        #43C97A;
    --q-pink:         #FF6AC1;

    /* Gradients */
    --q-grad-hero:    linear-gradient(135deg, var(--q-yellow) 0%, var(--q-orange) 100%);
    --q-grad-purple:  linear-gradient(135deg, var(--q-purple) 0%, var(--q-purple-deep) 100%);
    --q-grad-sky:     linear-gradient(135deg, var(--q-blue) 0%, var(--q-purple) 100%);
    --q-grad-success: linear-gradient(135deg, #43C97A 0%, #2EAF5E 100%);
    --q-grad-danger:  linear-gradient(135deg, #FF4757 0%, #C9184A 100%);

    /* Fonts */
    --q-font-display: 'Dela Gothic One', 'Comfortaa', cursive;
    --q-font-heading: 'Comfortaa', cursive;
    --q-font-body:    'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
    --q-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Radii */
    --q-r-pill: 100px;
    --q-r-card: 28px;
    --q-r-lg:   22px;
    --q-r-md:   16px;
    --q-r-sm:   12px;
    --q-r-xs:   8px;

    /* Motion */
    --q-ease:       cubic-bezier(.34,1.56,.64,1);
    --q-ease-out:   cubic-bezier(.22,.61,.36,1);
    --q-d-fast:     .18s;
    --q-d:          .28s;
    --q-d-slow:     .5s;

    /* Layout */
    --q-sidebar-w:  256px;
    --q-appbar-h:   68px;
    --q-bottomnav-h:74px;

    /* Z-index */
    --q-z-nav:       50;
    --q-z-sticky:    80;
    --q-z-drawer:    90;
    --q-z-overlay:   100;
    --q-z-modal:     120;
    --q-z-toast:     140;
    --q-z-tooltip:   160;
}

/* ------------------------------------------------------------
   2. СВЕТЛАЯ ТЕМА (default)
   ------------------------------------------------------------ */
:root {
    color-scheme: light;

    --q-bg:           #F6F3EB;       /* тёпло-кремовый */
    --q-bg-alt:       #EDE7DC;
    --q-surface:      #FFFFFF;
    --q-surface-alt:  #FBF8F1;
    --q-surface-hov:  #FAF5E8;

    --q-text:         #0D0D2B;
    --q-text-sub:     rgba(13,13,43,.72);
    --q-text-mute:    #6B6E8E;
    --q-text-on-brand:#0D0D2B;        /* текст на жёлтой кнопке */

    --q-border:       rgba(13,13,43,.10);
    --q-border-strong:rgba(13,13,43,.22);

    --q-brand:        var(--q-orange);          /* основной акцент в светлой */
    /* Тот же бренд, но пригодный для мелкого текста: #FF6B00 на светлой
       поверхности даёт 2.9:1 и проваливает AA на 12–14px */
    --q-brand-ink:    #B24A00;
    --q-brand-soft:   rgba(255,107,0,.12);
    --q-brand-glow:   rgba(255,107,0,.35);

    --q-accent:       var(--q-purple);
    --q-accent-soft:  rgba(123,78,171,.12);

    --q-success:      #2EAF5E;
    --q-success-soft: rgba(46,175,94,.14);
    --q-warning:      #E89A00;
    --q-warning-soft: rgba(232,154,0,.16);
    --q-danger:       #D62828;
    --q-danger-soft:  rgba(214,40,40,.12);
    --q-info:         #0277BD;
    --q-info-soft:    rgba(2,119,189,.12);

    /* Shadows (hard-shadow в светлой — пурпурная, а не чёрная) */
    --q-sh-hard:      4px 4px 0 rgba(90,45,130,.18);
    --q-sh-hard-lg:   6px 6px 0 rgba(90,45,130,.22);
    --q-sh-card:      0 2px 8px rgba(13,13,43,.06), 0 18px 40px -20px rgba(13,13,43,.18);
    --q-sh-card-hov:  0 4px 14px rgba(13,13,43,.08), 0 28px 60px -20px rgba(123,78,171,.28);
    --q-sh-pop:       0 24px 80px -20px rgba(13,13,43,.35), 0 4px 14px rgba(13,13,43,.10);
    --q-sh-inset:     inset 0 1px 0 rgba(255,255,255,.6);

    --q-glow-brand:   0 0 0 4px rgba(255,107,0,.18), 0 0 40px rgba(255,107,0,.28);
    --q-glow-accent:  0 0 0 4px rgba(123,78,171,.18), 0 0 40px rgba(123,78,171,.28);

    /* Grain overlay */
    --q-grain-opacity: .035;
}

/* ------------------------------------------------------------
   3. ТЁМНАЯ ТЕМА — через @media и [data-theme="dark"]
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --q-bg:           #0D0D2B;
        --q-bg-alt:       #101030;
        --q-surface:      #17173F;
        --q-surface-alt:  #1C1C4A;
        --q-surface-hov:  #23236B;

        --q-text:         #F0F2FF;
        --q-text-sub:     rgba(240,242,255,.78);
        --q-text-mute:    #A0A3C4;
        --q-text-on-brand:#0D0D2B;

        --q-border:       rgba(255,255,255,.08);
        --q-border-strong:rgba(255,255,255,.20);

        --q-brand:        var(--q-yellow);        /* жёлтый ярче на тёмном */
        --q-brand-ink:    var(--q-yellow);        /* на тёмном яркий жёлтый уже даёт AA */
        --q-brand-soft:   rgba(255,184,0,.14);
        --q-brand-glow:   rgba(255,184,0,.45);

        --q-accent:       #A880E0;
        --q-accent-soft:  rgba(168,128,224,.16);

        --q-success:      #43C97A;
        --q-success-soft: rgba(67,201,122,.16);
        --q-warning:      #FFB800;
        --q-warning-soft: rgba(255,184,0,.14);
        --q-danger:       #FF4757;
        --q-danger-soft:  rgba(255,71,87,.16);
        --q-info:         #4FC3F7;
        --q-info-soft:    rgba(79,195,247,.14);

        --q-sh-hard:      4px 4px 0 rgba(0,0,0,.35);
        --q-sh-hard-lg:   6px 6px 0 rgba(0,0,0,.4);
        --q-sh-card:      0 2px 8px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.6);
        --q-sh-card-hov:  0 4px 14px rgba(0,0,0,.5), 0 28px 60px -20px rgba(255,184,0,.22);
        --q-sh-pop:       0 24px 80px -20px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.4);
        --q-sh-inset:     inset 0 1px 0 rgba(255,255,255,.05);

        --q-glow-brand:   0 0 0 4px rgba(255,184,0,.18), 0 0 60px rgba(255,184,0,.35);
        --q-glow-accent:  0 0 0 4px rgba(168,128,224,.18), 0 0 60px rgba(168,128,224,.35);

        --q-grain-opacity: .05;
    }
}

/* Ручной override через [data-theme="dark"] */
:root[data-theme="dark"] {
    color-scheme: dark;

    --q-bg:           #0D0D2B;
    --q-bg-alt:       #101030;
    --q-surface:      #17173F;
    --q-surface-alt:  #1C1C4A;
    --q-surface-hov:  #23236B;

    --q-text:         #F0F2FF;
    --q-text-sub:     rgba(240,242,255,.78);
    --q-text-mute:    #A0A3C4;
    --q-text-on-brand:#0D0D2B;

    --q-border:       rgba(255,255,255,.08);
    --q-border-strong:rgba(255,255,255,.20);

    --q-brand:        var(--q-yellow);
    --q-brand-ink:    var(--q-yellow);
    --q-brand-soft:   rgba(255,184,0,.14);
    --q-brand-glow:   rgba(255,184,0,.45);

    --q-accent:       #A880E0;
    --q-accent-soft:  rgba(168,128,224,.16);

    --q-success:      #43C97A;
    --q-success-soft: rgba(67,201,122,.16);
    --q-warning:      #FFB800;
    --q-warning-soft: rgba(255,184,0,.14);
    --q-danger:       #FF4757;
    --q-danger-soft:  rgba(255,71,87,.16);
    --q-info:         #4FC3F7;
    --q-info-soft:    rgba(79,195,247,.14);

    --q-sh-hard:      4px 4px 0 rgba(0,0,0,.35);
    --q-sh-hard-lg:   6px 6px 0 rgba(0,0,0,.4);
    --q-sh-card:      0 2px 8px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.6);
    --q-sh-card-hov:  0 4px 14px rgba(0,0,0,.5), 0 28px 60px -20px rgba(255,184,0,.22);
    --q-sh-pop:       0 24px 80px -20px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.4);
    --q-sh-inset:     inset 0 1px 0 rgba(255,255,255,.05);

    --q-glow-brand:   0 0 0 4px rgba(255,184,0,.18), 0 0 60px rgba(255,184,0,.35);
    --q-glow-accent:  0 0 0 4px rgba(168,128,224,.18), 0 0 60px rgba(168,128,224,.35);

    --q-grain-opacity: .05;
}

/* ------------------------------------------------------------
   4. БАЗА / RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--q-font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--q-text);
    background: var(--q-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--q-font-heading);
    font-weight: 700;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
    color: var(--q-text);
}
h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
a  { color: var(--q-brand); text-decoration: none; transition: color var(--q-d-fast); }
a:hover { color: var(--q-orange); }
hr { border: none; border-top: 1px solid var(--q-border); margin: 20px 0; }
code, kbd { font-family: var(--q-font-mono); font-size: .92em; }
input, select, textarea, button { font: inherit; color: inherit; }
::selection { background: var(--q-brand); color: var(--q-text-on-brand); }

/* Скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--q-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--q-border-strong);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--q-brand); background-clip: padding-box; border: 2px solid transparent; }

/* Grain overlay для атмосферы */
body.q-grain::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: var(--q-grain-opacity);
    mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   5. УТИЛИТЫ
   ------------------------------------------------------------ */
.q-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.q-container-sm { max-width: 720px; }
.q-container-md { max-width: 960px; }
.q-flex { display: flex; }
.q-grid { display: grid; }
.q-gap-1 { gap: 8px; } .q-gap-2 { gap: 12px; } .q-gap-3 { gap: 16px; } .q-gap-4 { gap: 24px; } .q-gap-5 { gap: 32px; }
.q-center { display: flex; align-items: center; justify-content: center; }
.q-between { display: flex; align-items: center; justify-content: space-between; }
.q-row { display: flex; align-items: center; }
.q-col { display: flex; flex-direction: column; }
.q-mute { color: var(--q-text-mute); }
.q-sub { color: var(--q-text-sub); }
.q-mono { font-family: var(--q-font-mono); }
.q-display { font-family: var(--q-font-display); letter-spacing: .01em; }
.q-heading { font-family: var(--q-font-heading); }
.q-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.q-kbd { font: 500 .8em var(--q-font-mono); padding: 2px 7px; border-radius: 6px; background: var(--q-surface-alt); border: 1px solid var(--q-border); box-shadow: 0 1px 0 var(--q-border); color: var(--q-text-sub); }

.q-divider { height: 1px; background: var(--q-border); margin: 20px 0; border-radius: 1px; }
.q-divider--dash { background: none; border-top: 1px dashed var(--q-border); }

/* ------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------ */
.q-btn {
    --q-btn-bg: var(--q-surface);
    --q-btn-color: var(--q-text);
    --q-btn-border: var(--q-border-strong);
    --q-btn-shadow: none;
    --q-btn-pad-y: 10px;
    --q-btn-pad-x: 20px;
    --q-btn-fs: .95rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--q-btn-pad-y) var(--q-btn-pad-x);
    font-family: var(--q-font-heading);
    font-weight: 700;
    font-size: var(--q-btn-fs);
    line-height: 1.2;
    color: var(--q-btn-color);
    background: var(--q-btn-bg);
    border: 1.5px solid var(--q-btn-border);
    border-radius: var(--q-r-pill);
    box-shadow: var(--q-btn-shadow);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform var(--q-d) var(--q-ease),
                box-shadow var(--q-d) var(--q-ease-out),
                background-color var(--q-d-fast),
                color var(--q-d-fast),
                border-color var(--q-d-fast);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.q-btn i { font-size: 1.05em; line-height: 1; }
.q-btn:hover { transform: translateY(-2px); box-shadow: var(--q-sh-hard); }
.q-btn:active { transform: translateY(0); box-shadow: none; transition-duration: 60ms; }
.q-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-brand-soft), var(--q-sh-hard); }
.q-btn:disabled, .q-btn[aria-disabled="true"] {
    opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

.q-btn--sm { --q-btn-pad-y: 6px; --q-btn-pad-x: 14px; --q-btn-fs: .82rem; }
.q-btn--lg { --q-btn-pad-y: 14px; --q-btn-pad-x: 28px; --q-btn-fs: 1.05rem; }
.q-btn--xl {
    --q-btn-pad-y: 20px; --q-btn-pad-x: 44px;
    font-family: var(--q-font-display);
    font-size: 1.3rem;
    letter-spacing: .02em;
}
.q-btn--icon { --q-btn-pad-x: 10px; --q-btn-pad-y: 10px; border-radius: 50%; aspect-ratio: 1; }
.q-btn--block { width: 100%; }

/* Primary — брендовый жёлто-оранж градиент */
.q-btn--primary {
    --q-btn-bg: var(--q-grad-hero);
    --q-btn-color: var(--q-text-on-brand);
    --q-btn-border: transparent;
    --q-btn-shadow: var(--q-sh-hard);
    background: var(--q-grad-hero);
}
.q-btn--primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-110%);
    transition: transform .7s var(--q-ease-out);
    pointer-events: none;
}
.q-btn--primary:hover::before { transform: translateX(110%); }
.q-btn--primary:hover { box-shadow: var(--q-sh-hard-lg), var(--q-glow-brand); }

/* Accent — пурпурный */
.q-btn--accent {
    --q-btn-bg: var(--q-grad-purple);
    --q-btn-color: #fff;
    --q-btn-border: transparent;
    --q-btn-shadow: var(--q-sh-hard);
    background: var(--q-grad-purple);
}
.q-btn--accent:hover { box-shadow: var(--q-sh-hard-lg), var(--q-glow-accent); }

/* Ghost — прозрачный с обводкой */
.q-btn--ghost {
    --q-btn-bg: transparent;
    --q-btn-color: var(--q-text);
    --q-btn-border: var(--q-border-strong);
}
.q-btn--ghost:hover { --q-btn-bg: var(--q-surface-alt); --q-btn-border: var(--q-brand); }

/* Soft — мягкий с брендовым оттенком */
.q-btn--soft {
    --q-btn-bg: var(--q-brand-soft);
    --q-btn-color: var(--q-brand);
    --q-btn-border: transparent;
}
.q-btn--soft:hover { --q-btn-bg: var(--q-brand); --q-btn-color: var(--q-text-on-brand); }

/* Danger */
.q-btn--danger {
    --q-btn-bg: var(--q-grad-danger);
    --q-btn-color: #fff;
    --q-btn-border: transparent;
    --q-btn-shadow: var(--q-sh-hard);
    background: var(--q-grad-danger);
}
.q-btn--danger-ghost {
    --q-btn-bg: transparent;
    --q-btn-color: var(--q-danger);
    --q-btn-border: var(--q-danger);
}
.q-btn--danger-ghost:hover { --q-btn-bg: var(--q-danger-soft); }

/* Success */
.q-btn--success {
    --q-btn-bg: var(--q-grad-success);
    --q-btn-color: #fff;
    --q-btn-border: transparent;
    --q-btn-shadow: var(--q-sh-hard);
    background: var(--q-grad-success);
}

/* Link-style */
.q-btn--link {
    --q-btn-bg: transparent;
    --q-btn-color: var(--q-brand);
    --q-btn-border: transparent;
    padding: 0;
    box-shadow: none !important;
}
.q-btn--link:hover { transform: none; text-decoration: underline; }

/* Loading state */
.q-btn.is-loading { pointer-events: none; color: transparent !important; }
.q-btn.is-loading::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--q-btn-color, #fff);
    animation: q-spin .7s linear infinite;
}
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   7. FORMS / INPUTS
   ------------------------------------------------------------ */
.q-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.q-field-label {
    font-family: var(--q-font-heading);
    font-size: .85rem;
    font-weight: 600;
    color: var(--q-text-sub);
    letter-spacing: .01em;
}
.q-field-hint { font-size: .82rem; color: var(--q-text-mute); }
.q-field-error { font-size: .82rem; color: var(--q-danger); display: flex; align-items: center; gap: 4px; }

.q-input, .q-select, .q-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--q-font-body);
    /* На мобиле не меньше 16px: iOS зумит страницу при фокусе на поле с
       меньшим кеглем, и вёрстка «прыгает» посреди ввода */
    font-size: max(16px, 1rem);
    color: var(--q-text);
    background: var(--q-surface);
    border: 1.5px solid var(--q-border);
    border-radius: var(--q-r-md);
    outline: none;
    transition: border-color var(--q-d-fast), box-shadow var(--q-d-fast), background-color var(--q-d-fast);
}
.q-input::placeholder, .q-textarea::placeholder { color: var(--q-text-mute); }
.q-input:hover, .q-select:hover, .q-textarea:hover { border-color: var(--q-border-strong); }
.q-input:focus, .q-select:focus, .q-textarea:focus {
    border-color: var(--q-brand);
    box-shadow: 0 0 0 4px var(--q-brand-soft);
    background: var(--q-surface);
}
.q-input:disabled, .q-textarea:disabled, .q-select:disabled { opacity: .6; cursor: not-allowed; }
.q-input.is-error, .q-select.is-error, .q-textarea.is-error {
    border-color: var(--q-danger);
    box-shadow: 0 0 0 4px var(--q-danger-soft);
}
.q-textarea { resize: vertical; min-height: 100px; }

.q-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6E8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}

/* Input group с иконкой */
.q-input-group { position: relative; }
.q-input-group .q-input { padding-left: 46px; }
.q-input-group .q-input-icon {
    position: absolute;
    left: 16px;
    top: 50%; transform: translateY(-50%);
    color: var(--q-text-mute);
    font-size: 1.1rem;
    pointer-events: none;
}
.q-input-group--trailing .q-input { padding-left: 16px; padding-right: 46px; }
.q-input-group--trailing .q-input-icon { left: auto; right: 16px; }

/* Checkbox / Radio / Switch */
.q-check, .q-radio, .q-switch {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font-size: .95rem;
    color: var(--q-text);
}
.q-check input, .q-radio input, .q-switch input { position: absolute; opacity: 0; pointer-events: none; }
.q-check-box, .q-radio-dot {
    width: 22px; height: 22px;
    border: 1.5px solid var(--q-border-strong);
    background: var(--q-surface);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--q-d-fast);
    flex-shrink: 0;
}
.q-check-box { border-radius: 6px; }
.q-radio-dot { border-radius: 50%; }
.q-check-box::after {
    content: ''; width: 10px; height: 10px; border-radius: 2px;
    background: var(--q-text-on-brand);
    transform: scale(0);
    transition: transform var(--q-d-fast) var(--q-ease);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.3 3.3L4.6 9l-2.9-2.9 1.4-1.4L4.6 6.2l4.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M10.3 3.3L4.6 9l-2.9-2.9 1.4-1.4L4.6 6.2l4.3-4.3z'/%3E%3C/svg%3E") center/contain no-repeat;
    width: 14px; height: 14px;
}
.q-radio-dot::after {
    content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--q-text-on-brand); transform: scale(0);
    transition: transform var(--q-d-fast) var(--q-ease);
}
.q-check input:checked + .q-check-box,
.q-radio input:checked + .q-radio-dot {
    background: var(--q-brand);
    border-color: var(--q-brand);
}
.q-check input:checked + .q-check-box::after,
.q-radio input:checked + .q-radio-dot::after { transform: scale(1); }
.q-check input:focus-visible + .q-check-box,
.q-radio input:focus-visible + .q-radio-dot { box-shadow: 0 0 0 4px var(--q-brand-soft); }

.q-switch-track {
    width: 42px; height: 24px;
    border-radius: 100px;
    background: var(--q-border-strong);
    position: relative;
    transition: background-color var(--q-d-fast);
    flex-shrink: 0;
}
.q-switch-track::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform var(--q-d) var(--q-ease);
}
.q-switch input:checked + .q-switch-track { background: var(--q-brand); }
.q-switch input:checked + .q-switch-track::after { transform: translateX(18px); }

/* ------------------------------------------------------------
   8. CARDS
   ------------------------------------------------------------ */
.q-card {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-card);
    padding: 28px;
    position: relative;
    transition: transform var(--q-d), box-shadow var(--q-d);
}
.q-card--flat { box-shadow: none; }
.q-card--alt { background: var(--q-surface-alt); }
.q-card--pad-sm { padding: 18px; }
.q-card--pad-lg { padding: 40px; }

.q-card--interactive { cursor: pointer; }
.q-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--q-sh-card-hov); border-color: var(--q-border-strong); }

.q-card--highlight {
    border-color: var(--q-brand);
    box-shadow: var(--q-sh-card), 0 0 0 2px var(--q-brand-soft);
}
.q-card--highlight::before {
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
    background: var(--q-grad-hero);
    border-radius: 0 0 3px 3px;
}

.q-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.q-card-head h2, .q-card-head h3 { margin: 0; }

.q-card-sub {
    color: var(--q-text-mute);
    font-size: .95rem;
    margin: -8px 0 18px;
}

/* Статистические карточки */
.q-stat {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    padding: 24px;
    box-shadow: var(--q-sh-card);
    position: relative;
    overflow: hidden;
    transition: transform var(--q-d), box-shadow var(--q-d);
}
.q-stat:hover { transform: translateY(-3px); box-shadow: var(--q-sh-card-hov); }
.q-stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--q-r-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    background: var(--q-brand-soft);
    color: var(--q-brand);
    margin-bottom: 14px;
}
.q-stat-value {
    font-family: var(--q-font-display);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    color: var(--q-text);
    line-height: 1.1;
    margin-bottom: 6px;
    /* Значение бывает не числом, а словом («премиум») или датой:
       переносим по границам слов, но не рвём число пополам */
    overflow-wrap: break-word;
    word-break: normal;
}
.q-stat-value--sm { font-size: clamp(1.15rem, 1.5vw, 1.45rem); letter-spacing: .01em; }
.q-stat-label { color: var(--q-text-mute); font-size: .92rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.q-stat--brand { border-color: var(--q-brand); background: linear-gradient(160deg, var(--q-brand-soft) 0%, transparent 70%), var(--q-surface); }
.q-stat--success .q-stat-icon { background: var(--q-success-soft); color: var(--q-success); }
.q-stat--warning .q-stat-icon { background: var(--q-warning-soft); color: var(--q-warning); }
.q-stat--danger .q-stat-icon { background: var(--q-danger-soft); color: var(--q-danger); }
.q-stat--info .q-stat-icon { background: var(--q-info-soft); color: var(--q-info); }
/* Композитные модификаторы иконки */
.q-stat-icon--brand   { background: var(--q-brand-soft);   color: var(--q-brand); }
.q-stat-icon--accent  { background: var(--q-accent-soft);  color: var(--q-accent); }
.q-stat-icon--success { background: var(--q-success-soft); color: var(--q-success); }
.q-stat-icon--warning { background: var(--q-warning-soft); color: var(--q-warning); }
.q-stat-icon--danger  { background: var(--q-danger-soft);  color: var(--q-danger); }
.q-stat-icon--info    { background: var(--q-info-soft);    color: var(--q-info); }
/* Доп. элементы стата */
.q-stat-body { display: flex; flex-direction: column; }
.q-stat-sub  { color: var(--q-text-mute); font-size: .85rem; margin-top: 4px; font-weight: 500; }
.q-stat-value-sub {
    font-size: .55em;
    color: var(--q-text-mute);
    font-family: var(--q-font-heading);
    font-weight: 600;
    margin-left: 4px;
}

/* Сетка статов */
.q-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}
/* На телефоне четыре стата в столбик занимали три экрана прокрутки —
   переводим в сетку 2×2 и ужимаем карточку */
@media (max-width: 680px) {
    .q-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .q-stat { padding: 16px 14px; }
    .q-stat-icon { width: 36px; height: 36px; font-size: 1.1rem; margin-bottom: 10px; border-radius: var(--q-r-sm); }
    .q-stat-label { font-size: .74rem; letter-spacing: .01em; }
    .q-stat-value { font-size: 1.4rem; }
    .q-stat-sub { font-size: .78rem; }
}
@media (max-width: 330px) {
    .q-stats { grid-template-columns: 1fr; }
}

/* Прогресс-бар (тонкий) */
.q-progress {
    display: block;
    width: 100%;
    height: 6px;
    background: var(--q-surface-alt);
    border-radius: 100px;
    overflow: hidden;
}
.q-progress > span {
    display: block;
    height: 100%;
    background: var(--q-grad-hero);
    border-radius: 100px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------------------------------------
   9. BADGES / CHIPS / TAGS
   ------------------------------------------------------------ */
.q-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 700;
    font-family: var(--q-font-heading);
    border-radius: 100px;
    background: var(--q-surface-alt);
    color: var(--q-text-sub);
    border: 1px solid var(--q-border);
    line-height: 1.4;
}
.q-badge--dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.q-badge--brand   { background: var(--q-brand-soft); color: var(--q-brand); border-color: transparent; }
.q-badge--accent  { background: var(--q-accent-soft); color: var(--q-accent); border-color: transparent; }
.q-badge--success { background: var(--q-success-soft); color: var(--q-success); border-color: transparent; }
.q-badge--warning { background: var(--q-warning-soft); color: var(--q-warning); border-color: transparent; }
.q-badge--danger  { background: var(--q-danger-soft); color: var(--q-danger); border-color: transparent; }
.q-badge--info    { background: var(--q-info-soft); color: var(--q-info); border-color: transparent; }
.q-badge--solid-brand { background: var(--q-grad-hero); color: var(--q-text-on-brand); border: none; }
/* Внутри бейджа .q-mute давал 1.7:1 на подложке-акценте — приглушаем
   прозрачностью от цвета самого бейджа, а не серым токеном */
.q-badge .q-mute { color: inherit; opacity: .75; }

/* Chip — крупнее badge */
.q-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    font-size: .9rem;
    font-weight: 600;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 100px;
    color: var(--q-text);
    cursor: pointer;
    transition: all var(--q-d-fast);
}
.q-chip:hover { border-color: var(--q-brand); color: var(--q-brand); }
.q-chip.is-active { background: var(--q-brand); color: var(--q-text-on-brand); border-color: transparent; }

/* ------------------------------------------------------------
   10. ALERTS
   ------------------------------------------------------------ */
.q-alert {
    display: flex; gap: 14px;
    padding: 16px 18px;
    border-radius: var(--q-r-md);
    background: var(--q-surface-alt);
    border: 1px solid var(--q-border);
    border-left: 4px solid var(--q-brand);
    color: var(--q-text);
    align-items: flex-start;
}
.q-alert-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; color: var(--q-brand); }
.q-alert-body { flex: 1; min-width: 0; }
.q-alert-title { font-weight: 700; font-family: var(--q-font-heading); margin-bottom: 2px; }
.q-alert-msg { color: var(--q-text-sub); font-size: .95rem; }
.q-alert-close {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--q-text-mute); font-size: 1.1rem;
    border-radius: 6px;
    transition: all var(--q-d-fast);
}
.q-alert-close:hover { background: var(--q-border); color: var(--q-text); }

.q-alert--success { border-left-color: var(--q-success); background: var(--q-success-soft); }
.q-alert--success .q-alert-icon { color: var(--q-success); }
.q-alert--warning { border-left-color: var(--q-warning); background: var(--q-warning-soft); }
.q-alert--warning .q-alert-icon { color: var(--q-warning); }
.q-alert--danger  { border-left-color: var(--q-danger); background: var(--q-danger-soft); }
.q-alert--danger .q-alert-icon { color: var(--q-danger); }
.q-alert--info    { border-left-color: var(--q-info); background: var(--q-info-soft); }
.q-alert--info .q-alert-icon { color: var(--q-info); }
.q-alert--brand   { border-left-color: var(--q-brand); background: var(--q-brand-soft); }
.q-alert--brand .q-alert-icon { color: var(--q-brand); }

/* ------------------------------------------------------------
   11. TOAST
   ------------------------------------------------------------ */
.q-toast-host {
    position: fixed;
    top: 20px; right: 20px;
    display: flex; flex-direction: column;
    gap: 10px;
    z-index: var(--q-z-toast);
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 40px);
}
.q-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-left: 4px solid var(--q-brand);
    border-radius: var(--q-r-md);
    box-shadow: var(--q-sh-pop);
    color: var(--q-text);
    animation: q-toast-in .35s var(--q-ease) both;
    font-size: .92rem;
}
.q-toast.is-leaving { animation: q-toast-out .25s var(--q-ease-out) both; }
.q-toast-icon { font-size: 1.3rem; color: var(--q-brand); flex-shrink: 0; }
.q-toast-body { flex: 1; min-width: 0; }
.q-toast-title { font-weight: 700; font-family: var(--q-font-heading); }
.q-toast-msg { color: var(--q-text-sub); }
.q-toast--success { border-left-color: var(--q-success); } .q-toast--success .q-toast-icon { color: var(--q-success); }
.q-toast--warning { border-left-color: var(--q-warning); } .q-toast--warning .q-toast-icon { color: var(--q-warning); }
.q-toast--danger  { border-left-color: var(--q-danger);  } .q-toast--danger  .q-toast-icon { color: var(--q-danger); }
.q-toast--info    { border-left-color: var(--q-info);    } .q-toast--info    .q-toast-icon { color: var(--q-info); }
@keyframes q-toast-in  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes q-toast-out { to   { opacity: 0; transform: translateX(30px); } }

/* ------------------------------------------------------------
   12. MODAL (наша — не Bootstrap)
   ------------------------------------------------------------ */
.q-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(13,13,43,.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--q-z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--q-d) var(--q-ease-out);
}
.q-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.q-modal {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-pop);
    max-width: 560px;
    width: 100%;
    max-height: min(calc(100vh - 48px), 90dvh);
    /* CSS Grid — чётко фиксирует head/body/foot, футер всегда виден */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    transform: translateY(24px) scale(.96);
    opacity: 0;
    transition: opacity var(--q-d) var(--q-ease-out),
                transform var(--q-d) var(--q-ease);
    overflow: hidden;
}
.q-modal-backdrop.is-open .q-modal { transform: none; opacity: 1; }
.q-modal--lg { max-width: 720px; }
.q-modal--sm { max-width: 440px; }

/* Если внутри модалки есть <form>-обёртка — делаем её прозрачной для грида,
   чтобы head/body/foot попали прямо в ячейки .q-modal */
.q-modal > form { display: contents; }

.q-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px;
    gap: 16px;
    border-bottom: 1px solid var(--q-border);
    position: relative;
}
.q-modal-head::after {
    content: ''; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px;
    background: var(--q-grad-hero); opacity: .5;
    border-radius: 2px;
}
.q-modal-title {
    font-family: var(--q-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.q-modal-close {
    background: var(--q-surface-alt);
    border: 1px solid var(--q-border);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--q-text);
    font-size: 1rem;
    transition: all var(--q-d-fast);
}
.q-modal-close:hover { background: var(--q-danger-soft); color: var(--q-danger); border-color: transparent; transform: rotate(90deg); }
.q-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* критично для flex-скролла, иначе footer уплывает за экран */
}
.q-modal-foot {
    display: flex; justify-content: flex-end; gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--q-border);
    background: var(--q-surface-alt);
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   13. TABS
   ------------------------------------------------------------ */
.q-tabs {
    display: flex; gap: 4px;
    padding: 6px;
    background: var(--q-surface-alt);
    border-radius: var(--q-r-pill);
    border: 1px solid var(--q-border);
    width: fit-content;
}
.q-tab {
    padding: 9px 20px;
    font-family: var(--q-font-heading);
    font-weight: 600;
    font-size: .9rem;
    color: var(--q-text-sub);
    background: none;
    border: none;
    border-radius: var(--q-r-pill);
    cursor: pointer;
    transition: all var(--q-d-fast);
    display: inline-flex; align-items: center; gap: 6px;
}
.q-tab:hover { color: var(--q-text); }
.q-tab.is-active {
    background: var(--q-surface);
    color: var(--q-text);
    box-shadow: var(--q-sh-card);
}

/* ------------------------------------------------------------
   14. TABLE
   ------------------------------------------------------------ */
.q-table-wrap {
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    background: var(--q-surface);
    /* overflow:hidden просто обрезал последнюю колонку («Действия»)
       — теперь широкая таблица честно прокручивается */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.q-table th, .q-table td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: middle;
}
.q-table thead th {
    font-family: var(--q-font-heading);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--q-text-mute);
    font-weight: 700;
    background: var(--q-surface-alt);
    border-bottom: 1px solid var(--q-border);
    white-space: nowrap;
}
.q-table tbody tr { border-top: 1px solid var(--q-border); transition: background-color var(--q-d-fast); }
.q-table tbody tr:first-child { border-top: none; }
.q-table tbody tr:hover { background: var(--q-surface-hov); }

/* ------------------------------------------------------------
   15. SKELETON
   ------------------------------------------------------------ */
.q-skeleton {
    display: block;
    background: linear-gradient(90deg,
        var(--q-surface-alt) 0%,
        var(--q-surface-hov) 50%,
        var(--q-surface-alt) 100%);
    background-size: 200% 100%;
    border-radius: var(--q-r-sm);
    animation: q-shimmer 1.4s linear infinite;
    min-height: 16px;
}
.q-skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes q-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Скелет-карточка (для children-list / подобных сеток) */
.q-skeleton-card {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    padding: 24px;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--q-sh-card);
}
.q-skeleton-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--q-surface-hov) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: q-shimmer 1.4s linear infinite;
}
/* Скелет-строка (для списков/таблиц) */
.q-skeleton-row {
    height: 62px;
    border-bottom: 1px solid var(--q-border);
    position: relative;
    overflow: hidden;
    background: var(--q-surface);
}
.q-skeleton-row:last-child { border-bottom: none; }
.q-skeleton-row::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--q-surface-hov) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: q-shimmer 1.4s linear infinite;
}

/* ------------------------------------------------------------
   16. EMPTY STATE
   ------------------------------------------------------------ */
.q-empty {
    padding: 56px 24px;
    text-align: center;
    background: var(--q-surface);
    border: 1.5px dashed var(--q-border-strong);
    border-radius: var(--q-r-card);
    color: var(--q-text-sub);
}
.q-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 14px;
    opacity: .55;
    display: inline-block;
    animation: q-empty-float 4s ease-in-out infinite;
}
.q-empty h3 { color: var(--q-text); margin-bottom: 6px; }
.q-empty p  { color: var(--q-text-mute); margin-bottom: 18px; }
.q-empty-title {
    font-family: var(--q-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--q-text);
    margin-bottom: 4px;
}
.q-empty-sub {
    color: var(--q-text-mute);
    font-size: .9rem;
}
@keyframes q-empty-float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}

/* ------------------------------------------------------------
   16.1 ICON BUTTON — компактное круглое действие в строке
   ------------------------------------------------------------ */
.q-icon-btn {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--q-surface-alt);
    border: 1px solid var(--q-border);
    color: var(--q-text-sub);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--q-d-fast);
    text-decoration: none;
    font-size: 1rem;
}
.q-icon-btn:hover         { transform: translateY(-1px); border-color: var(--q-brand); color: var(--q-brand); }
.q-icon-btn--success      { color: var(--q-success); border-color: transparent; background: var(--q-success-soft); }
.q-icon-btn--success:hover{ background: var(--q-success); color: #fff; }
.q-icon-btn--danger       { color: var(--q-danger); border-color: transparent; background: var(--q-danger-soft); }
.q-icon-btn--danger:hover { background: var(--q-danger); color: #fff; }
.q-icon-btn--brand        { color: var(--q-brand); border-color: transparent; background: var(--q-brand-soft); }
.q-icon-btn--brand:hover  { background: var(--q-brand); color: var(--q-text-on-brand); }
.q-icon-btn--ghost:hover  { color: var(--q-danger); border-color: transparent; background: var(--q-danger-soft); }

.q-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   16.2 TABLE CELL — main + sub двухстрочная ячейка
   ------------------------------------------------------------ */
.q-table-cell-main {
    font-weight: 700;
    color: var(--q-text);
    font-family: var(--q-font-heading);
}
.q-table-cell-sub {
    color: var(--q-text-mute);
    font-size: .85rem;
    margin-top: 2px;
}

/* ------------------------------------------------------------
   17. APPBAR / SIDEBAR / BOTTOM NAV
   ------------------------------------------------------------ */
.q-shell {
    display: grid;
    grid-template-columns: var(--q-sidebar-w) 1fr;
    grid-template-rows: var(--q-appbar-h) 1fr;
    grid-template-areas: "sidebar appbar" "sidebar main";
    min-height: 100vh;
}
.q-shell--no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "appbar" "main";
}

.q-appbar {
    grid-area: appbar;
    display: flex; align-items: center; gap: 16px;
    padding: 0 28px;
    background: color-mix(in srgb, var(--q-bg) 85%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--q-border);
    position: sticky; top: 0;
    z-index: var(--q-z-sticky);
}
.q-appbar-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--q-font-display);
    font-size: 1.1rem;
    color: var(--q-text);
    letter-spacing: .02em;
}
.q-appbar-brand img { height: 30px; }
.q-appbar-spacer { flex: 1; }
.q-appbar-actions { display: flex; align-items: center; gap: 10px; }
.q-appbar-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.q-appbar-h1 {
    font-family: var(--q-font-display);
    font-size: 1.3rem;
    margin: 0;
    color: var(--q-text);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    .q-appbar-h1 { font-size: 1.1rem; }
}
.q-hide-sm { display: inline-flex; }
@media (max-width: 640px) {
    .q-hide-sm { display: none !important; }
}

.q-sidebar {
    grid-area: sidebar;
    background: var(--q-surface);
    border-right: 1px solid var(--q-border);
    padding: 22px 18px;
    display: flex; flex-direction: column;
    gap: 4px;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: var(--q-z-drawer);
}
.q-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--q-font-display);
    font-size: 1.15rem;
    padding: 8px 10px 22px;
    color: var(--q-text);
    letter-spacing: .02em;
    border-bottom: 1px solid var(--q-border);
    margin-bottom: 12px;
    text-decoration: none;
}
.q-sidebar-brand img { height: 32px; }
.q-sidebar-section {
    font-family: var(--q-font-heading);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--q-text-mute);
    padding: 16px 14px 8px;
}
.q-sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--q-r-md);
    color: var(--q-text-sub);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    position: relative;
    transition: all var(--q-d-fast);
    font-family: var(--q-font-heading);
}
.q-sidebar-link i { font-size: 1.15rem; flex-shrink: 0; width: 20px; text-align: center; }
.q-sidebar-link:hover { background: var(--q-surface-alt); color: var(--q-text); }
.q-sidebar-link.is-active {
    background: var(--q-brand-soft);
    color: var(--q-brand);
}
.q-sidebar-link.is-active::before {
    content: ''; position: absolute; left: -18px;
    top: 8px; bottom: 8px; width: 3px;
    background: var(--q-brand);
    border-radius: 0 3px 3px 0;
}

.q-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--q-border); }

.q-main {
    grid-area: main;
    padding: 32px 40px;
    min-width: 0;
    min-height: calc(100vh - var(--q-appbar-h));
    background: var(--q-bg);
    position: relative;
}

/* User menu в appbar */
.q-user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--q-surface-alt);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-pill);
    cursor: pointer;
    transition: all var(--q-d-fast);
    color: var(--q-text);
    font-family: var(--q-font-heading);
    font-weight: 600;
}
.q-user:hover { border-color: var(--q-brand); }
.q-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--q-grad-hero);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--q-font-display);
    color: var(--q-text-on-brand);
    font-size: .9rem;
    flex-shrink: 0;
}
.q-user i.bi-chevron-down { font-size: .8rem; color: var(--q-text-mute); margin-right: 4px; transition: transform var(--q-d-fast); }
.q-user.is-open i.bi-chevron-down { transform: rotate(180deg); }

/* Universal dropdown menu */
.q-menu-wrap { position: relative; display: inline-block; }
.q-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 8px;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-card-hov, 0 12px 40px rgba(0,0,0,.16));
    z-index: var(--q-z-dropdown, 900);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity var(--q-d-fast), transform var(--q-d-fast);
}
.q-menu.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.q-menu--left { right: auto; left: 0; }
.q-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--q-r-md);
    color: var(--q-text);
    font-family: var(--q-font-heading);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--q-d-fast), color var(--q-d-fast);
    width: 100%;
    border: none;
    background: none;
    text-align: left;
}
.q-menu-item i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--q-text-mute); }
.q-menu-item:hover { background: var(--q-surface-alt); color: var(--q-text); }
.q-menu-item:hover i { color: var(--q-brand); }
.q-menu-item--danger { color: var(--q-danger); }
.q-menu-item--danger i { color: var(--q-danger); }
.q-menu-item--danger:hover { background: var(--q-danger-soft); color: var(--q-danger); }
.q-menu-sep { height: 1px; background: var(--q-border); margin: 6px 0; }
.q-menu-head {
    padding: 8px 12px 10px;
    font-size: .75rem;
    color: var(--q-text-mute);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

/* Bottom nav — для детской PWA */
.q-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--q-z-sticky);
    display: flex;
    justify-content: space-around;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--q-surface) 90%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--q-border);
    height: var(--q-bottomnav-h);
}
.q-bottomnav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: none;
    background: none;
    color: var(--q-text-mute);
    font-family: var(--q-font-heading);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--q-d-fast), transform var(--q-d);
    letter-spacing: .02em;
}
.q-bottomnav-item i { font-size: 1.5rem; }
.q-bottomnav-item.is-active { color: var(--q-brand); }
.q-bottomnav-item:hover:not(.is-active) { color: var(--q-text); }
.q-bottomnav-fab {
    position: relative;
    transform: translateY(-16px);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--q-grad-hero);
    box-shadow: var(--q-sh-hard), var(--q-glow-brand);
    color: var(--q-text-on-brand) !important;
    font-size: 1.6rem;
    font-family: inherit;
    padding: 0;
    transition: transform var(--q-d) var(--q-ease), box-shadow var(--q-d);
    align-self: center;
}
.q-bottomnav-fab i { font-size: 1.9rem !important; }
.q-bottomnav-fab:hover { transform: translateY(-22px) scale(1.05); }

/* ------------------------------------------------------------
   18. АВТОРИЗАЦИЯ (auth-страницы)
   ------------------------------------------------------------ */
.q-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}
.q-auth::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(900px 500px at 10% 0%, var(--q-brand-soft), transparent 60%),
        radial-gradient(700px 400px at 90% 100%, var(--q-accent-soft), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.q-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-pop);
    padding: 40px 36px;
    animation: q-auth-in .55s var(--q-ease) both;
}
@keyframes q-auth-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.q-auth-logo {
    text-align: center;
    margin-bottom: 28px;
}
.q-auth-logo img { height: 54px; margin: 0 auto 12px; }
.q-auth-logo h1 {
    font-family: var(--q-font-display);
    font-size: 1.8rem;
    margin: 0;
    background: var(--q-grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: .02em;
}
.q-auth-logo p { color: var(--q-text-mute); font-size: .95rem; margin: 8px 0 0; }
.q-auth-switch {
    text-align: center;
    margin-top: 22px;
    color: var(--q-text-sub);
    font-size: .92rem;
}
.q-auth-switch a { color: var(--q-brand); font-weight: 700; }

/* ---- Детский вход: кард, привет-блок, PIN-дотсы и клавиатура ---- */

.q-auth-card--kid {
    position: relative;
    padding-top: 92px;
}

.q-kid-hello {
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--q-grad-hero);
    box-shadow: var(--q-sh-hard);
    border: 2px solid var(--q-text);
    display: grid;
    place-items: center;
    z-index: 1;
}
.q-kid-hello__emoji {
    font-size: 3.6rem;
    line-height: 1;
}
.q-kid-hello__spark {
    position: absolute;
    font-family: var(--q-font-display);
    color: var(--q-text);
    pointer-events: none;
}
.q-kid-hello__spark--a { top: -10px; right: -8px; font-size: 1.4rem; animation: q-pulse 2.2s infinite; }
.q-kid-hello__spark--b { bottom: -6px; left: -12px; font-size: 1rem; animation: q-pulse 2.8s infinite .4s; }
.q-kid-hello__spark--c { top: 12px; left: -20px; font-size: 1.2rem; animation: q-pulse 3.1s infinite .8s; }

.q-auth-logo--kid h1 {
    font-size: 2.2rem;
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--q-text);
}
.q-auth-logo--kid p { font-size: 1.05rem; color: var(--q-text-sub); }

/* PIN dots */
.q-pin-dots {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 10px 0 22px;
}
.q-pin-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--q-surface-alt);
    border: 2px solid var(--q-border);
    transition: all var(--q-d);
}
.q-pin-dot.is-filled {
    background: var(--q-brand);
    border-color: var(--q-text);
    transform: scale(1.15);
    box-shadow: 0 0 0 5px var(--q-brand-soft);
}
.q-pin-dot.is-active {
    border-color: var(--q-brand);
    animation: qPulseSoft 1.2s infinite;
}
@keyframes qPulseSoft {
    0%, 100% { box-shadow: 0 0 0 0 var(--q-brand-soft); }
    50%      { box-shadow: 0 0 0 6px var(--q-brand-soft); }
}

/* Keypad */
.q-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 6px;
}
.q-key {
    appearance: none;
    border: 2px solid var(--q-text);
    background: var(--q-surface);
    color: var(--q-text);
    font-family: var(--q-font-display);
    font-size: 1.8rem;
    height: 68px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: var(--q-sh-hard);
    transition: transform var(--q-d), box-shadow var(--q-d), background var(--q-d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.q-key:hover  { background: var(--q-surface-hov); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--q-text); }
.q-key:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--q-text); }
.q-key--ghost {
    background: var(--q-surface-alt);
    font-size: 1.3rem;
    color: var(--q-text-sub);
}
.q-key--ghost:hover { color: var(--q-text); }

/* На маленьких экранах — компактнее */
@media (max-width: 420px) {
    .q-keypad { gap: 10px; }
    .q-key    { height: 60px; font-size: 1.5rem; border-radius: 16px; }
    .q-kid-hello { width: 104px; height: 104px; top: -48px; }
    .q-kid-hello__emoji { font-size: 3rem; }
    .q-auth-card--kid { padding-top: 78px; }
}

/* ------------------------------------------------------------
   19. THEME TOGGLE
   ------------------------------------------------------------ */
.q-theme-toggle {
    width: 42px; height: 42px;
    border: 1px solid var(--q-border);
    background: var(--q-surface);
    color: var(--q-text);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: all var(--q-d);
    position: relative;
    overflow: hidden;
}
.q-theme-toggle:hover {
    border-color: var(--q-brand);
    color: var(--q-brand);
    transform: rotate(15deg);
}
.q-theme-toggle .bi-sun-fill { display: none; }
:root[data-theme="dark"] .q-theme-toggle .bi-sun-fill { display: inline; }
:root[data-theme="dark"] .q-theme-toggle .bi-moon-stars-fill { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .q-theme-toggle .bi-sun-fill { display: inline; }
    :root:not([data-theme="light"]) .q-theme-toggle .bi-moon-stars-fill { display: none; }
}

/* ------------------------------------------------------------
   20. ЭФФЕКТЫ / АНИМАЦИИ
   ------------------------------------------------------------ */
.q-glow-brand  { box-shadow: var(--q-glow-brand); }
.q-glow-accent { box-shadow: var(--q-glow-accent); }

.q-float { animation: q-float 3.5s ease-in-out infinite; }
@keyframes q-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.q-pulse { animation: q-pulse 2s ease-in-out infinite; }
@keyframes q-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.q-wiggle { animation: q-wiggle 2.8s ease-in-out infinite; }
@keyframes q-wiggle {
    0%,100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Particle background (опционально — лёгкие звёздочки) */
.q-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.q-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--q-brand);
    border-radius: 50%;
    opacity: .25;
    animation: q-drift 18s linear infinite;
}
@keyframes q-drift {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: .35; }
    90%  { opacity: .35; }
    100% { transform: translateY(-120vh) scale(.4); opacity: 0; }
}

/* ------------------------------------------------------------
   21. ADAPTIVE / MOBILE
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    :root { --q-sidebar-w: 76px; }
    .q-sidebar { padding: 18px 10px; }
    .q-sidebar-brand span, .q-sidebar-link span, .q-sidebar-section { display: none; }
    .q-sidebar-link { justify-content: center; padding: 12px 0; }
    .q-sidebar-link.is-active::before { left: -10px; }
    .q-main { padding: 24px 20px; }
}
@media (max-width: 680px) {
    :root { --q-sidebar-w: 0px; --q-appbar-h: 60px; }
    .q-shell { grid-template-columns: 1fr; grid-template-areas: "appbar" "main"; }
    .q-sidebar { display: none; }
    .q-main { padding: 18px 14px; }
    .q-appbar { padding: 0 14px; }
    .q-modal-head, .q-modal-body, .q-modal-foot { padding-left: 20px; padding-right: 20px; }
    .q-auth-card { padding: 28px 20px; }
    .q-toast-host { top: auto; bottom: 20px; right: 20px; left: 20px; max-width: none; }
}

/* ------------------------------------------------------------
   22. HELPERS spacing (мини-tailwind для быстроты)
   ------------------------------------------------------------ */
.q-mt-0 { margin-top: 0; } .q-mt-1 { margin-top: 8px; } .q-mt-2 { margin-top: 16px; } .q-mt-3 { margin-top: 24px; } .q-mt-4 { margin-top: 32px; } .q-mt-5 { margin-top: 48px; }
.q-mb-0 { margin-bottom: 0; } .q-mb-1 { margin-bottom: 8px; } .q-mb-2 { margin-bottom: 16px; } .q-mb-3 { margin-bottom: 24px; } .q-mb-4 { margin-bottom: 32px; } .q-mb-5 { margin-bottom: 48px; }
.q-m-1  { margin: 8px; } .q-m-2 { margin: 16px; } .q-m-3 { margin: 24px; }
.q-p-0 { padding: 0; }
.q-p-1 { padding: 8px; } .q-p-2 { padding: 16px; } .q-p-3 { padding: 24px; } .q-p-4 { padding: 32px; }
.q-justify-end   { justify-content: flex-end; }
.q-justify-start { justify-content: flex-start; }
.q-between       { justify-content: space-between; }
.q-text-center  { text-align: center; }
.q-text-right   { text-align: right; }
.q-text-danger  { color: var(--q-danger); }
.q-text-success { color: var(--q-success); }
.q-text-warning { color: var(--q-warning); }
.q-text-muted   { color: var(--q-text-mute); }
.q-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.q-grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.q-grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
    .q-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .q-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .q-grid-cols-4, .q-grid-cols-3, .q-grid-cols-2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   23. HERO / SECTION HEADS / CARD GRIDS
   ------------------------------------------------------------ */
.q-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 32px 36px;
    background: linear-gradient(135deg, var(--q-brand-soft) 0%, transparent 55%), var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    position: relative;
    overflow: hidden;
}
.q-hero::before {
    content: '';
    position: absolute;
    inset: auto -40px -60px auto;
    width: 240px; height: 240px;
    background: radial-gradient(circle, var(--q-accent-soft) 0%, transparent 70%);
    pointer-events: none;
}
.q-hero-eyebrow {
    color: var(--q-brand-ink);
    font-family: var(--q-font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.q-hero-title {
    font-family: var(--q-font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    color: var(--q-text);
    margin: 0 0 10px;
    line-height: 1.1;
}
.q-hero-sub {
    color: var(--q-text-sub);
    font-size: 1.02rem;
    margin: 0;
    max-width: 56ch;
}
.q-hero-illustration {
    position: relative;
    width: 140px; height: 140px;
    display: flex; align-items: center; justify-content: center;
}
.q-hero-bubble {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--q-grad-hero);
    box-shadow: var(--q-sh-hard);
    border: 2px solid var(--q-text);
    display: grid;
    place-items: center;
    font-size: 3.4rem;
}
@media (max-width: 720px) {
    .q-hero { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
    .q-hero-illustration { display: none; }
}

.q-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.q-section-title {
    font-family: var(--q-font-display);
    font-size: 1.55rem;
    margin: 0;
    color: var(--q-text);
    display: flex; align-items: center; gap: 10px;
}
.q-section-title i { color: var(--q-brand); font-size: 1.35rem; }
.q-section-sub {
    color: var(--q-text-mute);
    font-size: .95rem;
    margin: 4px 0 0;
}

.q-grid--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

/* ------------------------------------------------------------
   24. FORM EXTRAS: required mark, radio-pills, uploader, spinner
   ------------------------------------------------------------ */
.q-req { color: var(--q-danger); font-weight: 700; margin-left: 2px; }
.q-spin { animation: q-spin 1s linear infinite; display: inline-block; }

/* Pill-style radios (для выбора пола, категории и т.п.) */
.q-radio-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.q-radio-pill {
    flex: 1 1 160px;
    cursor: pointer;
    position: relative;
}
.q-radio-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.q-radio-pill-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--q-surface-alt);
    border: 2px solid var(--q-border);
    border-radius: var(--q-r-card);
    font-family: var(--q-font-heading);
    font-weight: 700;
    color: var(--q-text);
    transition: all var(--q-d-fast);
}
.q-radio-pill-emoji { font-size: 1.8rem; line-height: 1; }
.q-radio-pill:hover .q-radio-pill-box { border-color: var(--q-brand); background: var(--q-surface); }
.q-radio-pill input:checked + .q-radio-pill-box {
    border-color: var(--q-brand);
    background: var(--q-brand-soft);
    color: var(--q-brand);
    box-shadow: 0 0 0 3px var(--q-brand-soft);
}
.q-radio-pill input:focus-visible + .q-radio-pill-box {
    outline: 2px solid var(--q-brand);
    outline-offset: 2px;
}

/* Сетка персонажей */
.q-characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    background: var(--q-surface-alt);
    border-radius: var(--q-r-card);
}
.q-char-loader {
    grid-column: 1 / -1;
    padding: 36px;
    text-align: center;
    color: var(--q-text-mute);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.q-char-loader i { font-size: 2rem; color: var(--q-brand); }

.q-character-option { cursor: pointer; display: block; position: relative; }
.q-character-option input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.q-character-card {
    --char-color: var(--q-brand);
    border: 2px solid var(--q-border);
    border-radius: 16px;
    padding: 10px 8px;
    text-align: center;
    transition: all var(--q-d-fast);
    background: var(--q-surface);
}
.q-character-card:hover {
    transform: translateY(-3px);
    border-color: var(--char-color);
    box-shadow: var(--q-sh-card-hov);
}
.q-character-option input:checked + .q-character-card {
    border-color: var(--char-color);
    background: color-mix(in srgb, var(--char-color) 8%, var(--q-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--char-color) 30%, transparent);
    transform: translateY(-3px);
}
.q-character-card img {
    width: 70px; height: 70px;
    object-fit: contain;
    margin: 0 auto 6px;
    display: block;
}
.q-character-card .q-char-name {
    font-size: .78rem;
    font-weight: 700;
    color: var(--q-text);
    line-height: 1.2;
}

/* Uploader (drag&drop зона) */
.q-uploader {
    border: 2px dashed var(--q-border-strong);
    border-radius: var(--q-r-card);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--q-d-fast);
    background: var(--q-surface-alt);
    position: relative;
}
.q-uploader:hover, .q-uploader.is-dragover {
    border-color: var(--q-brand);
    background: var(--q-brand-soft);
}
.q-uploader-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.q-uploader-empty > i { font-size: 2.2rem; color: var(--q-brand); }
.q-uploader-text { font-weight: 700; color: var(--q-text); }
.q-uploader-hint { font-size: .85rem; color: var(--q-text-mute); }

.q-uploader-preview {
    position: relative;
    display: inline-block;
}
.q-uploader-preview img {
    max-width: 160px;
    max-height: 160px;
    border-radius: var(--q-r-md);
    object-fit: cover;
    border: 1px solid var(--q-border);
}
.q-uploader-remove {
    position: absolute;
    top: -10px; right: -10px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--q-danger);
    color: #fff;
    border: 2px solid var(--q-surface);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: transform var(--q-d-fast);
}
.q-uploader-remove:hover { transform: scale(1.1); }

/* ------------------------------------------------------------
   25. MERCH VISUAL — мокап товара «силуэт + арт персонажа»
   Настоящих фото товара до запуска нет; вместо битой картинки
   собираем узнаваемый силуэт и печатаем на нём арт героя.
   Как только по пути rewards.image_url появится файл — PHP
   отдаст <img class="q-merch-photo"> и мокап не отрисуется.
   ------------------------------------------------------------ */
.q-merch {
    --merch-color: var(--q-brand);
    position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    max-width: 100%;
    margin-inline: auto;
    display: grid;
    place-items: center;
    padding: 9%;
    box-sizing: border-box;
}
.q-merch-photo { width: 100%; height: 100%; object-fit: cover; }

.q-merch-shape {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background:
        linear-gradient(158deg,
            color-mix(in oklab, var(--merch-color) 78%, white) 0%,
            var(--merch-color) 48%,
            color-mix(in oklab, var(--merch-color) 72%, black) 100%);
    filter: drop-shadow(0 8px 14px color-mix(in oklab, var(--merch-color) 35%, transparent));
}

/* Арт персонажа: «печать» на изделии */
.q-merch-art {
    width: 46%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px color-mix(in oklab, white 82%, var(--merch-color));
}

/* --- Плоские формы (арт занимает всё изделие) --- */
.q-merch--badge  .q-merch-shape { border-radius: 50%; box-shadow: inset 0 0 0 5% color-mix(in oklab, white 75%, var(--merch-color)); }
.q-merch--magnet .q-merch-shape { border-radius: 16%; }
.q-merch--poster .q-merch-shape { aspect-ratio: 5 / 7; width: 68%; border-radius: 3px; padding: 7%; background: #fff; filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)); }

.q-merch--badge  .q-merch-art,
.q-merch--magnet .q-merch-art,
.q-merch--poster .q-merch-art {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    box-shadow: none;
}
.q-merch--badge  .q-merch-art { border-radius: 50%; width: 84%; height: 84%; }
.q-merch--magnet .q-merch-art { border-radius: 11%; width: 88%; height: 88%; }
.q-merch--poster .q-merch-art { border-radius: 2px; }

/* --- Формы по маске --- */
.q-merch--mug .q-merch-shape,
.q-merch--plush .q-merch-shape,
.q-merch--tshirt .q-merch-shape,
.q-merch--hoodie .q-merch-shape,
.q-merch--backpack .q-merch-shape,
.q-merch--set .q-merch-shape {
    -webkit-mask: var(--merch-mask) center / contain no-repeat;
    mask: var(--merch-mask) center / contain no-repeat;
}

.q-merch--mug   { --merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 24h50a4 4 0 0 1 4 4v44a12 12 0 0 1-12 12H22a12 12 0 0 1-12-12V28a4 4 0 0 1 4-4Z'/%3E%3Cpath d='M70 34a16 16 0 0 1 0 32v-9a7 7 0 0 0 0-14Z'/%3E%3C/svg%3E"); }
.q-merch--plush { --merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='24' cy='22' r='11'/%3E%3Ccircle cx='76' cy='22' r='11'/%3E%3Ccircle cx='50' cy='36' r='28'/%3E%3Cellipse cx='50' cy='74' rx='24' ry='22'/%3E%3C/svg%3E"); }
.q-merch--tshirt{ --merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M34 10 16 18 6 38l14 9 6-8v53h48V39l6 8 14-9-10-20-18-8c-3 8-10 12-16 12s-13-4-16-12Z'/%3E%3C/svg%3E"); }
.q-merch--hoodie{ --merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 20 12 28 2 50l15 9 7-10v45h52V49l7 10 15-9-10-22-20-8Z'/%3E%3Cpath d='M50 2c14 0 24 9 24 20 0 6-4 9-9 9H35c-5 0-9-3-9-9C26 11 36 2 50 2Z'/%3E%3Crect x='34' y='68' width='32' height='18' rx='6'/%3E%3C/svg%3E"); }
.q-merch--backpack{--merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 24a20 20 0 0 1 40 0v5c8 3 13 10 13 19v34a12 12 0 0 1-12 12H29a12 12 0 0 1-12-12V48c0-9 5-16 13-19Z'/%3E%3C/svg%3E"); }
.q-merch--set   { --merch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='34' width='80' height='58' rx='7'/%3E%3Crect x='4' y='18' width='92' height='20' rx='5'/%3E%3C/svg%3E"); }

/* Печать чуть выше центра там, где силуэт «высокий» */
.q-merch--tshirt .q-merch-art,
.q-merch--hoodie .q-merch-art { width: 40%; transform: translateY(8%); }
.q-merch--backpack .q-merch-art { width: 40%; transform: translateY(10%); }
.q-merch--mug .q-merch-art { width: 36%; transform: translate(-9%, 6%); }
.q-merch--plush .q-merch-art { width: 34%; transform: translateY(-14%); }
.q-merch--set .q-merch-art { width: 34%; transform: translateY(12%); }

/* Компактный вариант — модалка, список целей */
.q-merch--sm { padding: 6%; }
.q-merch--sm .q-merch-art { box-shadow: 0 0 0 2px color-mix(in oklab, white 82%, var(--merch-color)); }

@media (prefers-reduced-motion: no-preference) {
    .q-product:hover .q-merch-shape { transform: translateY(-2px) scale(1.02); transition: transform var(--q-d) var(--q-ease-out); }
}

/* ------------------------------------------------------------
   26. КАТЕГОРИИ ЗАДАНИЙ + ЖЕТОН
   Единая палитра на 12 категорий из task_templates.
   ------------------------------------------------------------ */
:root {
    --q-cat-brand:  #FF6B00;
    --q-cat-violet: #7B4EAB;
    --q-cat-blue:   #3B82F6;
    --q-cat-red:    #EF4444;
    --q-cat-green:  #16A34A;
    --q-cat-orange: #EA7100;
    --q-cat-cyan:   #0891B2;
    --q-cat-teal:   #0D9488;
    --q-cat-indigo: #4F46E5;
    --q-cat-amber:  #B45309;
    --q-cat-pink:   #DB2777;
    --q-cat-lime:   #4D7C0F;
}
[data-theme="dark"] {
    --q-cat-brand:  #FF8C2E;
    --q-cat-violet: #B98CE0;
    --q-cat-blue:   #7DB3FF;
    --q-cat-red:    #FF8080;
    --q-cat-green:  #5FD68C;
    --q-cat-orange: #FFA451;
    --q-cat-cyan:   #4CC9E8;
    --q-cat-teal:   #4FD1C5;
    --q-cat-indigo: #9DA5FF;
    --q-cat-amber:  #F0B65C;
    --q-cat-pink:   #FF8FC4;
    --q-cat-lime:   #A3D45C;
}

.q-cat-chip {
    --cat-color: var(--q-cat-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--q-r-pill);
    background: color-mix(in oklab, var(--cat-color) 14%, transparent);
    color: var(--cat-color);
    font-family: var(--q-font-heading);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.3;
    white-space: nowrap;
}
.q-cat-chip i { font-size: .95em; }

/* Жетон */
.q-coin { flex-shrink: 0; vertical-align: -.14em; }
.q-coin-val { display: inline-flex; align-items: center; gap: 5px; }

/* ------------------------------------------------------------
   27. МОБИЛЬНАЯ НАВИГАЦИЯ КАБИНЕТА
   До 680px сайдбар был просто display:none — родитель с телефона
   не мог попасть ни в «Жетоны», ни в «Магазин», ни к детям.
   Теперь это выдвижная панель.
   ------------------------------------------------------------ */
.q-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-left: -6px;
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-md);
    background: var(--q-surface-alt);
    color: var(--q-text);
    font-size: 1.35rem;
    cursor: pointer;
    transition: background var(--q-d-fast), border-color var(--q-d-fast);
}
.q-nav-toggle:hover { border-color: var(--q-brand); color: var(--q-brand); }

.q-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--q-z-drawer) - 1);
    background: rgba(8, 8, 24, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--q-d) var(--q-ease-out);
}
.q-sidebar-scrim.is-open { opacity: 1; }

@media (max-width: 680px) {
    .q-nav-toggle { display: inline-flex; }

    .q-sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(84vw, 288px);
        transform: translateX(-100%);
        transition: transform var(--q-d) var(--q-ease-out);
        box-shadow: var(--q-sh-pop);
    }
    .q-sidebar.is-open { transform: translateX(0); }
    /* На мобиле подписи пунктов нужны — это не иконочный рельс */
    .q-sidebar-brand span,
    .q-sidebar-link span,
    .q-sidebar-section { display: block; }
    .q-sidebar-link { justify-content: flex-start; padding: 13px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .q-sidebar, .q-sidebar-scrim { transition: none; }
}

/* ------------------------------------------------------------
   28. СПИСОК ЗАДАНИЙ КАБИНЕТА
   Была <table> с автоматической раскладкой: имя героя переносилось
   в четыре строки, заголовок задания — в три, а на телефоне таблица
   уезжала в горизонтальный скролл. Теперь это грид-строки, которые
   на узком экране складываются в карточку.
   ------------------------------------------------------------ */
.q-task-list {
    display: flex;
    flex-direction: column;
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-card);
    overflow: hidden;
}

.q-task-list-head,
.q-task-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)   /* ребёнок */
        minmax(0, 2.2fr)   /* задание */
        minmax(0, 1fr)     /* категория */
        minmax(0, 1.1fr)   /* статус */
        60px               /* награда */
        88px               /* дата */
        minmax(96px, auto);/* действия */
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
}

.q-task-list-head {
    padding-block: 12px;
    background: var(--q-surface-alt);
    border-bottom: 1px solid var(--q-border);
    color: var(--q-text-mute);
    font-family: var(--q-font-heading);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.q-task-row + .q-task-row,
.q-task-list-head + .q-task-row { border-top: 1px solid var(--q-border); }
.q-task-row:hover { background: var(--q-surface-hov); }

/* Требует действия родителя — единственная подсветка в списке */
.q-task-row.is-review { background: color-mix(in oklab, var(--q-warning) 7%, transparent); }
.q-task-row.is-review:hover { background: color-mix(in oklab, var(--q-warning) 11%, transparent); }

.q-task-row-kid { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-task-row-kid img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.q-task-row-kid > div { min-width: 0; }
.q-task-row-kid .q-table-cell-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.q-task-row-cat, .q-task-row-status, .q-task-row-reward { min-width: 0; }
/* Бейдж статуса длиннее колонки — переносим строку внутри бейджа,
   иначе он наезжал на соседнюю колонку с наградой */
.q-task-row-status .q-badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.2;
}
.q-task-row-cat .q-cat-chip { max-width: 100%; overflow: hidden; }
.q-task-row-cat .q-cat-chip span { overflow: hidden; text-overflow: ellipsis; }
.q-task-row-title { min-width: 0; }
.q-task-row-title .q-table-cell-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.q-task-row-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.q-task-row .q-icon-btn { min-width: 40px; min-height: 40px; }

/* Планшет: прячем то, что можно восстановить из контекста */
@media (max-width: 1180px) {
    .q-task-list-head,
    .q-task-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.1fr) 56px minmax(96px, auto);
    }
    .q-task-list-head > :nth-child(3),
    .q-task-row-cat,
    .q-task-list-head > :nth-child(6),
    .q-task-row-date { display: none; }
}

/* Телефон: строка превращается в карточку */
@media (max-width: 720px) {
    .q-task-list-head { display: none; }
    .q-task-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "kid    reward"
            "title  title"
            "status status"
            "actions actions";
        gap: 10px;
        padding: 16px;
    }
    .q-task-row-kid     { grid-area: kid; }
    .q-task-row-reward  { grid-area: reward; justify-self: end; }
    .q-task-row-title   { grid-area: title; }
    .q-task-row-status  { grid-area: status; }
    .q-task-row-cat     { display: none; }
    .q-task-row-date    { display: none; }
    .q-task-row-actions { grid-area: actions; }
    .q-task-row-btns    { justify-content: flex-start; }
    .q-task-row .q-btn--sm { min-height: 44px; padding-inline: 16px; }
    .q-task-row .q-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------
   Партии физических жетонов (dashboard/tokens.php)
   ------------------------------------------------------------ */
.q-batch-list { display: flex; flex-direction: column; gap: 16px; }

.q-batch {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-card);
    box-shadow: var(--q-sh-card);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.q-batch-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.q-batch-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.q-batch-title { min-width: 0; flex: 1; }
.q-batch-title h3 {
    margin: 0;
    font-family: var(--q-font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--q-text);
}
.q-batch-sub {
    margin: 4px 0 0;
    font-size: .88rem;
    color: var(--q-text-sub);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.q-batch-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--q-border-strong);
}
.q-batch-status { flex-shrink: 0; }

.q-batch-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .9rem;
    color: var(--q-text-sub);
    margin-bottom: 8px;
}
.q-batch-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--q-border);
}
.q-batch-track {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--q-text-sub);
}
.q-batch-track code {
    font-family: var(--q-font-mono);
    background: var(--q-surface-alt);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-xs);
    padding: 2px 8px;
    color: var(--q-text);
}
@media (max-width: 560px) {
    .q-batch-foot { flex-direction: column; align-items: stretch; }
    .q-batch-foot .q-btn { justify-content: center; }
}

/* Ссылка «назад» над заголовком раздела */
.q-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 10px;
    color: var(--q-text-sub);
    font-weight: 600;
    text-decoration: none;
}
.q-back-link:hover { color: var(--q-brand); }

.q-hero--compact { padding: 24px 28px; }

/* Сетка жетонов партии */
.q-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.q-token {
    background: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: var(--q-r-lg);
    box-shadow: var(--q-sh-card);
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.q-token.is-used { opacity: .55; }
.q-token-img {
    aspect-ratio: 1;
    border-radius: var(--q-r-md);
    background: #fff;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.q-token-img img { width: 100%; height: 100%; object-fit: contain; }
.q-token-img.is-missing::after {
    content: "\f4a5";
    font-family: "bootstrap-icons";
    font-size: 2rem;
    color: #b8bcc8;
}
.q-token-code {
    font-family: var(--q-font-mono);
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--q-text-sub);
    word-break: break-all;
}
.q-token-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--q-success);
}
.q-token-dl { justify-content: center; }

/* ------------------------------------------------------------
   Кнопки в узкой мобильной вёрстке
   ------------------------------------------------------------
   .q-btn задан white-space:nowrap + overflow:hidden, а .q-row —
   нерастягивающийся flex. На экранах ~375px пара кнопок
   («Выбрать тариф» + «Попробовать бесплатно») сжималась и текст
   обрезался. Разрешаем ряду переноситься, а на совсем узких
   экранах ставим кнопки в столбец на всю ширину.
   ------------------------------------------------------------ */
.q-row { flex-wrap: wrap; }

@media (max-width: 560px) {
    .q-row > .q-btn { flex: 1 1 100%; }
    .q-btn { --q-btn-pad-x: 16px; }
}

/* ------------------------------------------------------------
   Онбординг пустого кабинета
   Показывается, пока у родителя нет ни одного ребёнка: вместо
   россыпи пустых секций — два понятных шага до первого задания.
   ------------------------------------------------------------ */
.q-onboard-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.q-onboard-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.q-onboard-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--q-font-display);
    font-size: 1rem;
    color: var(--q-text);
    background: var(--q-surface);
    border: 1.5px solid var(--q-border-strong);
}
.q-onboard-step.is-done .q-onboard-num {
    color: #fff;
    background: var(--q-success);
    border-color: transparent;
}
.q-onboard-body { min-width: 0; }
.q-onboard-body b {
    display: block;
    font-family: var(--q-font-heading);
    font-size: 1.02rem;
    margin-bottom: 2px;
}

/* Выпадающий год в календаре даты рождения (см. child-manager.js) */
.flatpickr-current-month .q-fp-year {
    margin-left: 6px;
    padding: 2px 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
}
.flatpickr-current-month .q-fp-year:focus-visible { outline: 2px solid var(--q-brand); border-radius: 4px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700; }