/* ── YM-Shop · Pure dark theme (matches webapp) ────────────────────────────── */

:root {
    --bg: #0a0a0d;
    --surface: #15151b;
    --surface-2: #1c1c24;
    --border: #2a241f;
    --border-soft: #221d18;

    --text: #f5f5f7;
    --text-2: #c8c8d0;
    --hint: #8e8e96;

    --accent: #ff7a1a;
    --accent-soft: rgba(255, 122, 26, 0.16);
    --accent-strong: rgba(255, 122, 26, 0.28);
    --accent-glow: rgba(255, 110, 30, 0.45);
    --accent-hover: #ff9347;
    --accent-deep: #e85f00;

    --danger: #ff453a;
    --danger-soft: rgba(255, 69, 58, 0.14);

    --green: #30d158;
    --green-soft: rgba(48, 209, 88, 0.14);
    --amber: #ffb627;
    --amber-soft: rgba(255, 182, 39, 0.16);
    /* "popular" badge — амбер-золотой, контраст к основному оранжевому */
    --purple: #ffb627;
    --purple-soft: rgba(255, 182, 39, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    font-size: 14.5px;
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.2px;
}

/* Inputs наследуют Unbounded явно (некоторые WebKit-сборки игнорят inherit) */
input, button, select, textarea {
    font-family: inherit;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Header ──────────────────────────────────────────────────────────────────── */

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        calc(max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)) + 11px)
        calc(18px + var(--tg-content-safe-area-inset-right, 0px))
        10px
        calc(18px + var(--tg-content-safe-area-inset-left, 0px));
    background: rgba(10, 10, 13, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease, background 0.2s ease;
}
.app-header.scrolled {
    border-bottom-color: var(--border-soft);
    background: rgba(10, 10, 13, 0.92);
}

.app-brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(255, 122, 26, 0.22);
}
.app-brand-accent { color: #ff7a1a; }

.app-title { display: none; }

.large-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 4px 6px;
}
.back-to-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px 8px 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.back-to-shop-btn svg {
    width: 18px;
    height: 18px;
}
.back-to-shop-btn:active { transform: scale(0.96); }
.back-to-shop-btn[hidden] { display: none; }
.app-title-large { display: none; }

#content {
    flex: 1;
    padding:
        14px
        calc(14px + var(--tg-content-safe-area-inset-right, 0px))
        calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 120px)
        calc(14px + var(--tg-content-safe-area-inset-left, 0px));
}
body.admin-mode #content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 116px);
}

.subtitle {
    color: var(--hint);
    font-size: 14px;
    margin: 0 4px 18px;
    line-height: 1.4;
}

/* ── URL input ───────────────────────────────────────────────────────────────── */

.url-section { margin-bottom: 20px; }

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s;
}
input::placeholder { color: var(--hint); }
input:focus, select:focus { border-color: var(--accent); }
select { appearance: none; -webkit-appearance: none; }

.track-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    animation: fade-in 0.2s ease;
}
.track-preview[hidden] { display: none; }
.track-preview .preview-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    word-break: break-word;
}
.track-preview .preview-meta { font-size: 12px; color: var(--hint); }
.track-preview .preview-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    background: var(--green-soft);
    margin-top: 6px;
}

.track-error {
    background: rgba(255, 69, 58, 0.14);
    border: 1px solid rgba(255, 69, 58, 0.32);
    color: #ff8a85;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    animation: fade-in 0.2s ease;
}
.track-error[hidden] { display: none; }

/* ── Section titles ──────────────────────────────────────────────────────────── */

.section-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
}

/* ── Plans grid ──────────────────────────────────────────────────────────────── */

.plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.plan-card {
    --card-accent: var(--accent);
    --card-accent-soft: rgba(255, 122, 26, 0.10);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px 16px 16px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, transform 0.1s, box-shadow 0.2s, background 0.2s;
    overflow: hidden;
}
/* Если у карточки есть бейдж — поджимаем сверху, чтобы не наезжал на eyebrow */
.plan-card:has(.plan-badge) { padding-top: 36px; }
.plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--card-accent-soft), transparent 65%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.plan-card:active { transform: scale(0.97); }

.plan-card.selected {
    border-color: var(--card-accent);
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%), var(--surface);
    box-shadow: 0 0 0 1px var(--card-accent), 0 8px 28px -8px var(--card-accent-soft);
}
.plan-card.selected::before { opacity: 1; }

.plan-card.popular {
    --card-accent: var(--purple);
    --card-accent-soft: rgba(255, 182, 39, 0.16);
}

.plan-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}
.plan-badge.hit {
    background: rgba(255, 182, 39, 0.18);
    color: var(--purple);
    border: 1px solid rgba(255, 182, 39, 0.32);
}
.plan-badge.save {
    background: rgba(48, 209, 88, 0.18);
    color: var(--green);
    border: 1px solid rgba(48, 209, 88, 0.32);
}

.plan-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--hint);
    margin-bottom: 6px;
}
.plan-number {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.plan-sublabel {
    font-size: 11px;
    color: var(--hint);
    margin-top: 4px;
    font-weight: 500;
}
.plan-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0 12px;
    opacity: 0.6;
}
.plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.plan-price {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
}
.plan-old-price {
    font-size: 12px;
    color: var(--hint);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.plan-price-per {
    font-size: 11px;
    color: var(--hint);
    margin-top: 3px;
}

/* ── Options ─────────────────────────────────────────────────────────────────── */

.options-section { margin-bottom: 20px; }

.option-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.option-row > input,
.option-row > select {
    margin-bottom: 0;
}

.option-info { flex: 1; min-width: 120px; }

.option-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.option-hint {
    display: block;
    font-size: 12px;
    color: var(--hint);
}

.option-select {
    width: auto !important;
    min-width: 140px;
    max-width: 180px;
    flex-shrink: 0;
    margin: 0;
    padding: 8px 28px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238e8e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
    border-radius: 10px;
    color: var(--text);
    border: 1px solid var(--border);
}

.option-input {
    width: 90px !important;
    min-width: 90px;
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* ── Checkout bar ────────────────────────────────────────────────────────────── */

.checkout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding:
        14px
        calc(14px + var(--tg-content-safe-area-inset-right, 0px))
        calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 14px)
        calc(14px + var(--tg-content-safe-area-inset-left, 0px));
    background: rgba(21, 21, 27, 0.85);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: slide-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.checkout-bar[hidden] { display: none; }

@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.checkout-info { flex: 1; min-width: 0; }
.checkout-plan {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkout-price {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--accent);
}

.checkout-btn {
    flex-shrink: 0;
    width: auto;
    min-width: 130px;
    padding: 14px 24px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    transition: transform 0.1s, opacity 0.2s;
}
.btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    aspect-ratio: 1;
    z-index: -2;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(120, 200, 255, 0)    0deg,
        rgba(120, 200, 255, 0.95) 40deg,
        rgba(120, 200, 255, 0)    110deg,
        rgba(120, 200, 255, 0)    210deg,
        rgba(180, 120, 255, 0.95) 250deg,
        rgba(180, 120, 255, 0)    320deg,
        rgba(120, 200, 255, 0)    360deg
    );
    animation: btn-spin 3.5s linear infinite;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 10px;
    background: var(--accent);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-primary::after { background: var(--accent); }

@keyframes btn-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Toast ───────────────────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 82px);
    z-index: 90;
    padding: 12px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    line-height: 1.35;
}

/* Тост всегда внизу — даже когда открыта модалка (z-index выше модалки) */

/* ── Modal ───────────────────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fade-in 0.18s ease;
}
.modal-backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    animation: scale-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
@keyframes scale-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal-sheet h2 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: -0.2px;
}
.modal-text {
    text-align: center;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* ── Order modal ─────────────────────────────────────────────────────────────── */

.modal-order {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal-order .url-section {
    margin-bottom: 14px;
}
.modal-order .option-card {
    margin-bottom: 8px;
}
.modal-order .option-card:last-of-type {
    margin-bottom: 0;
}
.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.modal-header-row h2 {
    text-align: left;
    margin-bottom: 0;
    flex: 1;
}
.modal-close-x {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--surface-2);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--hint);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.modal-close-x:active { background: var(--border); }

.order-modal-badge {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.order-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.summary-label {
    font-size: 13px;
    color: var(--text-2);
}
.summary-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}
.summary-total .summary-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.summary-total .summary-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--accent);
}

.order-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
}

.modal-topup {
    max-width: 380px;
}
.topup-field {
    display: block;
    margin-bottom: 10px;
}
.topup-field span {
    display: block;
    color: var(--hint);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}
.topup-field input {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}
.topup-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.topup-quick-grid button {
    min-height: 42px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.topup-quick-grid button:active {
    transform: scale(0.97);
}
.topup-fee-preview {
    min-height: 34px;
    margin: -2px 0 12px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 212, 41, 0.12);
    border: 1px solid rgba(255, 212, 41, 0.24);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}
.topup-fee-preview:empty {
    display: none;
}
.topup-status {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.topup-status[hidden] {
    display: none;
}
.topup-check-btn {
    width: 100%;
    margin-top: 10px;
}
.topup-check-btn[hidden] {
    display: none;
}
#topup-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 54px;
    color: #fff;
    font-weight: 850;
    letter-spacing: 0;
    background: transparent;
    border: none;
    box-shadow: 0 14px 30px rgba(48, 168, 255, 0.22);
}
#topup-submit::after {
    inset: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #149dff 0%, #2d7bff 48%, #6557ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
#topup-submit:active {
    transform: scale(0.97);
    box-shadow: 0 8px 18px rgba(48, 168, 255, 0.18);
}
#topup-submit .sbp-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}
#topup-submit span {
    min-width: 0;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.26);
}

.modal-success { text-align: center; }
.success-emoji-wrap {
    width: 64px;
    height: 64px;
    margin: 4px auto 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    animation: wrap-in 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.4);
}
@keyframes wrap-in {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.success-emoji {
    font-size: 34px;
    line-height: 1;
    display: inline-block;
    animation: confetti-bounce 0.65s cubic-bezier(0.2, 0.9, 0.2, 1.45);
}
@keyframes confetti-bounce {
    0%   { transform: scale(0) rotate(-140deg); opacity: 0; }
    55%  { transform: scale(1.3) rotate(18deg); opacity: 1; }
    78%  { transform: scale(0.94) rotate(-6deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── Custom plan (full-width) ────────────────────────────────────────────────── */

.plan-card.custom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}
.plan-card.custom .plan-custom-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 12px;
    color: var(--accent);
    transition: background 0.2s, color 0.2s;
}
.plan-card.custom .plan-custom-icon svg { width: 20px; height: 20px; }
.plan-card.custom.selected .plan-custom-icon {
    background: var(--card-accent);
    color: #fff;
}
.plan-card.custom .plan-custom-text { flex: 1; min-width: 0; }
.plan-card.custom .plan-custom-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: -0.1px;
}
.plan-card.custom .plan-sublabel { margin-top: 0; }
.plan-card.custom .custom-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.plan-card.custom .custom-input {
    width: 90px;
    margin: 0;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
}
.plan-card.custom .custom-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--hint);
    min-width: 60px;
    text-align: right;
}

/* ── Filter chips ────────────────────────────────────────────────────────────── */

.filter-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--hint);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.chip:active { transform: scale(0.96); }
.chip.active {
    background: var(--surface-2);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text);
}
.chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
}
.chip.active .chip-count {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text);
}

/* ── Order items ─────────────────────────────────────────────────────────────── */

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.order-main { flex: 1; min-width: 0; }
.order-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-meta { font-size: 12px; color: var(--hint); margin-bottom: 6px; }
.order-id { color: var(--hint); margin-right: 4px; }

.order-progress-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.progress {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 3px;
    height: 14px;
    width: 100%;
    min-width: 0;
    flex: 1;
}
.progress-fill {
    height: 10px;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 4px 16px -4px #fff;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-fill.done { background: var(--green); box-shadow: 0 4px 16px -4px var(--green); }
.progress-label {
    min-width: 70px;
    max-width: 145px;
    color: var(--hint);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.badge-pending   { color: var(--amber);  background: rgba(255, 159, 10, 0.14); }
.badge-paid      { color: var(--accent); background: var(--accent-soft); }
.badge-completed { color: var(--green);  background: var(--green-soft); }
.badge-failed    { color: var(--danger); background: var(--danger-soft); }
.badge-cancelled { color: var(--hint);   background: rgba(150, 150, 160, 0.14); }

.empty { text-align: center; color: var(--hint); padding: 32px 16px; font-size: 14px; }

/* ── Category selector ─────────────────────────────────────────────────────── */

/* ── Category dropdown ────────────────────────────────────────────────────── */

.category-dropdown {
    position: relative;
    margin-bottom: 20px;
}

.category-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.category-dropdown-trigger:hover { background: var(--surface-2); }
.category-dropdown-trigger.open {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-strong);
}

.category-dropdown-trigger .category-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 9px;
}
.category-dropdown-trigger .category-dropdown-icon svg { width: 18px; height: 18px; }

.category-dropdown-trigger .category-dropdown-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-dropdown-chevron {
    width: 18px;
    height: 18px;
    color: var(--hint);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.category-dropdown-trigger.open .category-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.category-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 38px -10px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: cat-menu-in 0.16s ease;
}
.category-dropdown-menu[hidden] { display: none; }

@keyframes cat-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    width: 100%;
}
.category-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.category-dropdown-item.active {
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

.category-dropdown-item .category-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--text-2);
}
.category-dropdown-item .category-dropdown-icon svg { width: 18px; height: 18px; }
.category-dropdown-item.active .category-dropdown-icon { color: var(--accent); }

.category-dropdown-item .category-dropdown-label {
    flex: 1;
    min-width: 0;
}

.category-dropdown-check {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.category-dropdown-item.active .category-dropdown-check { opacity: 1; }

.cat-panel[hidden] { display: none; }

.like-submit-btn {
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    font-size: 15px;
}

/* ── Balance card ─────────────────────────────────────────────────────────── */

.balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.12) 0%, rgba(255, 182, 39, 0.10) 100%);
    border: 1px solid rgba(255, 122, 26, 0.22);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}
.balance-left { flex: 1; min-width: 0; }
.balance-label {
    font-size: 11px;
    color: var(--hint);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.balance-amount {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(135deg, #fff 30%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.balance-topup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(255, 122, 26, 0.35);
}
.balance-topup-btn:active { transform: scale(0.96); }
.balance-topup-btn svg { width: 18px; height: 18px; }

/* shimmer effect */
.balance-topup-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
    animation: shimmer-btn 2.5s ease-in-out infinite;
}
@keyframes shimmer-btn {
    0%, 100% { left: -60%; }
    50%      { left: 120%; }
}

/* ── Profile ─────────────────────────────────────────────────────────────────── */

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 20px;
    margin-bottom: 14px;
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18), 0 6px 20px -6px var(--accent-glow);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Когда подгрузилось фото из TG — убираем placeholder-цвет */
.profile-avatar.has-photo {
    background-color: var(--surface-2);
    color: transparent;
}
.profile-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.profile-username {
    font-size: 14px;
    color: var(--hint);
    margin-top: 2px;
}

.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
    align-items: stretch;
}
.stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 78px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
}
.stat-num {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-label {
    font-size: 10px;
    color: var(--hint);
    margin-top: 4px;
    line-height: 1.25;
    letter-spacing: 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}
.card h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.card-text {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.5;
}

/* ── Admin panel ───────────────────────────────────────────────────────────── */

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 4px 14px;
}
.admin-kicker {
    font-size: 12px;
    color: var(--hint);
    font-weight: 600;
}
.admin-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
}
.icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(0.96); }

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-metric-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}
.admin-metric-strip > div {
    min-width: 0;
}
.admin-metric-label {
    display: block;
    font-size: 11px;
    color: var(--hint);
    margin-bottom: 4px;
}
.admin-metric-strip strong {
    display: block;
    font-size: 18px;
    letter-spacing: -0.2px;
    overflow-wrap: anywhere;
}
.admin-subpanel[hidden] { display: none; }

.admin-plan-form {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.admin-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.admin-field span,
.admin-toggle span {
    font-size: 12px;
    color: var(--hint);
    font-weight: 600;
}
.admin-field input,
.admin-field select {
    margin-bottom: 0;
}
.admin-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 0 0;
}
.admin-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.admin-save-btn {
    flex: 1;
}
.plain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.plain-btn.danger {
    color: #ff8a85;
    background: var(--danger-soft);
    border-color: rgba(255, 69, 58, 0.25);
}
.plain-btn:active { transform: scale(0.96); }

.admin-plan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}
.admin-plan-main {
    flex: 1;
    min-width: 0;
}
.admin-plan-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.admin-plan-meta {
    font-size: 12px;
    color: var(--hint);
}
.admin-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.admin-plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
}
.admin-plan-badge.hit {
    background: var(--purple-soft);
    color: var(--purple);
}
.admin-plan-badge.save {
    background: var(--green-soft);
    color: var(--green);
}
.admin-plan-badge.muted {
    background: rgba(150, 150, 160, 0.14);
    color: var(--hint);
}
.admin-order-item .badge {
    flex-shrink: 0;
}
.admin-user-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.admin-user-row:active { transform: scale(0.98); }
.admin-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}
.admin-user-avatar.large {
    width: 52px;
    height: 52px;
    font-size: 21px;
}
.admin-user-main {
    flex: 1;
    min-width: 0;
}
.admin-user-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-meta {
    font-size: 12px;
    color: var(--hint);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-balance {
    min-width: 72px;
    text-align: right;
    flex-shrink: 0;
}
.admin-user-balance strong {
    display: block;
    font-size: 14px;
    color: var(--text);
}
.admin-user-balance span {
    display: block;
    font-size: 11px;
    color: var(--hint);
}
.admin-user-detail[hidden] { display: none; }
.admin-back-list-btn {
    margin-bottom: 12px;
}
.admin-user-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}
.admin-user-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.admin-user-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.admin-user-card-stats div {
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
}
.admin-user-card-stats span {
    display: block;
    color: var(--hint);
    font-size: 11px;
    margin-bottom: 4px;
}
.admin-user-card-stats strong {
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.admin-balance-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}
.admin-balance-field {
    margin-bottom: 0;
}
.admin-balance-btn {
    min-height: 44px;
    padding: 0 16px;
}
.plans-grid > .empty {
    grid-column: 1 / -1;
}
.admin-tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 14px);
    transform: translateX(-50%);
    z-index: 36;
    display: flex;
    gap: 4px;
    padding: 8px 18px;
    background: rgba(21, 21, 27, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.55);
}
.admin-tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
    transform: translate(var(--admin-indicator-x, 0px), var(--admin-indicator-y, 57px));
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.admin-nav-btn {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 22px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: color 0.28s ease, transform 0.1s;
}
.admin-nav-btn svg {
    width: 21px;
    height: 21px;
}
.admin-nav-btn.active {
    color: var(--text);
}
.admin-nav-btn::after {
    display: none;
}
.admin-nav-btn:active { transform: scale(0.96); }
body.admin-mode .tabbar {
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
}

/* ── Bottom tab bar (floating pill — YM webapp style) ────────────────────────── */

.tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 14px);
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 4px;
    padding: 8px 18px;
    background: rgba(21, 21, 27, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.55);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
.tabbar.hide {
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
}

.tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    transform: translate(var(--indicator-x, 0px), var(--indicator-y, 57px));
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.tabbar.admin-visible {
    gap: 2px;
    padding: 8px 12px;
}
.tabbar.admin-visible .tab {
    width: 54px;
}

.tab {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    transition: color 0.28s ease, transform 0.1s;
}
.tab svg { width: 22px; height: 22px; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tab::after {
    display: none;
}
.tab-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1;
    white-space: nowrap;
}
.tab:active { transform: scale(0.92); }
.tab.active {
    color: var(--accent);
}
.tab.active svg {
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

.tab-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(255, 69, 58, 0.5);
    z-index: 2;
}
.tab-badge[hidden] { display: none; }

/* ── Desktop (sidebar layout, ≥ 720px) ──────────────────────────────────────── */

@media (min-width: 720px) {
    #app {
        display: grid;
        grid-template-columns: 84px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar content";
        min-height: 100vh;
    }
    body.admin-mode #app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content";
    }
    .app-header { grid-area: header; padding: calc(env(safe-area-inset-top, 0px) + 18px) 28px 18px; }
    .app-title { font-size: 19px; }

    #content {
        grid-area: content;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
        padding: 22px 28px calc(env(safe-area-inset-bottom, 0px) + 28px);
    }
    body.admin-mode #content {
        max-width: 720px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
    }

    .tabbar {
        grid-area: sidebar;
        position: sticky;
        top: 0;
        left: auto;
        bottom: auto;
        transform: none;
        height: 100vh;
        width: 84px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 18px 6px;
        border-radius: 0;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
        background: rgba(21, 21, 27, 0.55);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        backdrop-filter: blur(28px) saturate(180%);
    }
    .tabbar.hide { transform: none; opacity: 1; pointer-events: auto; }
    body.admin-mode .tabbar,
    body.admin-mode .tabbar.hide {
        display: none;
    }

    .tabbar.admin-visible {
        gap: 4px;
        padding: 18px 6px;
    }
    .tabbar.admin-visible .tab {
        width: 60px;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .admin-tabbar {
        width: auto;
    }

    .plans-grid { grid-template-columns: 1fr 1fr 1fr; }
    .plan-card.custom { grid-column: 1 / -1; }

    .checkout-bar {
        max-width: 600px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-radius: 18px 18px 0 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;
    }

    .order-item:hover { border-color: var(--border); }
    .tab:hover { color: var(--text-2); }
}

/* ── Home tab ────────────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, 0.22), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(255, 182, 39, 0.10), transparent 60%),
        linear-gradient(160deg, #1a1109 0%, #15110d 100%);
    border: 1px solid rgba(255, 122, 26, 0.22);
    border-radius: 22px;
    padding: 22px 20px 24px;
    margin-bottom: 16px;
}
.home-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.home-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--text);
}
.home-subtitle {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-2);
    margin: 0 0 18px;
    max-width: 460px;
}
.home-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 6px 20px -6px var(--accent-glow);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.home-cta svg { width: 18px; height: 18px; }
.home-cta:active { transform: scale(0.97); }
.home-cta:hover { box-shadow: 0 8px 24px -6px var(--accent-glow); }

.home-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.home-stat {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 14px 16px;
    text-align: center;
}
.home-stat-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.home-stat-label {
    font-size: 11px;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
    font-weight: 600;
}

.home-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.home-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.home-action:active { transform: scale(0.985); }
.home-action:hover { background: var(--surface-2); border-color: var(--border); }
.home-action-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 11px;
    color: var(--accent);
}
.home-action-icon svg { width: 18px; height: 18px; }
.home-action-text { flex: 1; min-width: 0; }
.home-action-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.1px;
}
.home-action-hint {
    font-size: 12px;
    color: var(--hint);
    margin-top: 2px;
}
.home-action-chevron {
    width: 18px;
    height: 18px;
    color: var(--hint);
    flex-shrink: 0;
}

/* ── Home: Социальные сети ──────────────────────────────────────────────────── */

.home-socials-section { margin-top: 20px; }
.home-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--hint);
    margin: 0 4px 10px;
}

.home-socials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.home-social {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 14px 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.home-social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--social-glow, transparent), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
}
.home-social:active { transform: scale(0.97); }
.home-social:hover { background: var(--surface-2); border-color: var(--border); }

.home-social-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.home-social-icon svg { width: 20px; height: 20px; }

/* Telegram brand */
.home-social-icon-tg {
    background: linear-gradient(135deg, #4cc8f9 0%, #2aabee 100%);
    box-shadow: 0 4px 14px -4px rgba(42, 171, 238, 0.55);
}
.home-social:has(.home-social-icon-tg) { --social-glow: rgba(42, 171, 238, 0.12); }

/* VK brand */
.home-social-icon-vk {
    background: linear-gradient(135deg, #2787f5 0%, #0077ff 100%);
    box-shadow: 0 4px 14px -4px rgba(0, 119, 255, 0.55);
}
.home-social:has(.home-social-icon-vk) { --social-glow: rgba(0, 119, 255, 0.12); }

.home-social-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.1px;
    position: relative;
    z-index: 1;
}
.home-social-hint {
    font-size: 11.5px;
    color: var(--hint);
    position: relative;
    z-index: 1;
}

/* ── Profile: Кнопка Админ-панели ──────────────────────────────────────────── */

.profile-admin-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.10), rgba(255, 182, 39, 0.06));
    border: 1px solid var(--accent-strong);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.2s ease;
}
.profile-admin-btn:active { transform: scale(0.985); }
.profile-admin-btn:hover {
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.16), rgba(255, 182, 39, 0.10));
    box-shadow: 0 6px 18px -8px var(--accent-glow);
}
.profile-admin-btn[hidden] { display: none; }

.profile-admin-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    border-radius: 11px;
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--accent-glow);
}
.profile-admin-icon svg { width: 18px; height: 18px; }
.profile-admin-text { flex: 1; min-width: 0; }
.profile-admin-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.1px;
}
.profile-admin-hint {
    font-size: 12px;
    color: var(--hint);
    margin-top: 2px;
}

/* ── Home: статус-пилюли (сервер онлайн + база) ────────────────────────────── */

.home-status-row {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}

.home-status-value { color: var(--text); font-variant-numeric: tabular-nums; }
.home-status-icon { width: 13px; height: 13px; color: var(--accent); }

/* Зелёный онлайн-индикатор с пульсацией */
.home-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
    box-shadow: 0 0 8px rgba(48, 209, 88, 0.6);
}
.home-status-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.5;
    animation: status-pulse 1.6s ease-out infinite;
}
@keyframes status-pulse {
    0%   { transform: scale(0.6); opacity: 0.55; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(0.6); opacity: 0; }
}

/* Оффлайн-состояние */
.home-status-pill-online.offline .home-status-dot {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(255, 69, 58, 0.6);
}
.home-status-pill-online.offline .home-status-dot::before {
    background: var(--danger);
    animation: none;
    opacity: 0;
}
.home-status-pill-online.offline .home-status-value { color: var(--danger); }

/* ── Home action icons: тонкие постоянные анимации ──────────────────────────── */

.home-action-icon {
    position: relative;
    overflow: visible;
    animation: home-icon-glow 3.6s ease-in-out infinite;
}
.home-action:nth-child(2) .home-action-icon { animation-delay: 1.2s; }
.home-action:nth-child(3) .home-action-icon { animation-delay: 2.4s; }

@keyframes home-icon-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 122, 26, 0); }
    50%      { box-shadow: 0 0 18px rgba(255, 122, 26, 0.45); }
}

.home-action-icon svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* «Мои заказы»: галочки появляются по очереди */
.home-action-icon[data-anim="orders"] .check-1 {
    stroke-dasharray: 14;
    animation: order-check 2.4s ease-in-out infinite;
}
.home-action-icon[data-anim="orders"] .check-2 {
    stroke-dasharray: 14;
    animation: order-check 2.4s ease-in-out infinite;
    animation-delay: 0.6s;
}
@keyframes order-check {
    0%   { stroke-dashoffset: 14; opacity: 0; }
    25%  { stroke-dashoffset: 0;  opacity: 1; }
    75%  { stroke-dashoffset: 0;  opacity: 1; }
    100% { stroke-dashoffset: 14; opacity: 0; }
}

/* «Профиль»: лёгкое покачивание */
.home-action-icon[data-anim="profile"] svg {
    animation: profile-bob 3s ease-in-out infinite;
}
@keyframes profile-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* «История»: стрелка часов крутится */
.home-action-icon[data-anim="history"] .clock-hand {
    transform-origin: 12px 12px;
    transform-box: fill-box;
    animation: clock-rotate 4s linear infinite;
}
@keyframes clock-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Усиление на hover/active */
.home-action:hover .home-action-icon { animation-duration: 1.8s; }
.home-action:hover .home-action-icon svg { transform: scale(1.12); }
.home-action:active .home-action-icon svg { transform: scale(0.94); }
.home-action:hover .home-action-chevron { transform: translateX(3px); color: var(--accent); }
.home-action-chevron { transition: transform 0.2s ease, color 0.2s ease; }

/* Уважаем reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-action-icon,
    .home-action-icon[data-anim] svg,
    .home-action-icon[data-anim] .clock-hand,
    .home-action-icon[data-anim] .check-1,
    .home-action-icon[data-anim] .check-2 {
        animation: none !important;
    }
}

/* ── Soc icons: внутренние анимации (фон статичен, логотип движется) ───────── */

.home-social-icon { overflow: hidden; }
.home-social-icon svg {
    transform-origin: center;
    will-change: transform;
}

/* Telegram — самолётик улетает, возвращается, пауза, снова улетает */
.home-social-icon-tg svg {
    animation: tg-fly-away 4.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes tg-fly-away {
    /* 0-12%: сидит на месте */
    0%, 12%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    /* 12-28%: разгон вправо-вверх (по направлению самолётика) */
    20%       { transform: translate(6px, -5px) rotate(-10deg); opacity: 1; }
    28%       { transform: translate(28px, -22px) rotate(-22deg); opacity: 0; }
    /* Невидимый телепорт в левый-нижний угол (для влёта обратно) */
    28.01%    { transform: translate(-28px, 20px) rotate(-12deg); opacity: 0; }
    /* 28-50%: влетает обратно из левого-нижнего угла в центр */
    40%       { transform: translate(-14px, 10px) rotate(-18deg); opacity: 1; }
    50%       { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    /* 50-100%: задержка в покое перед следующим вылетом */
    100%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* VK — лого слегка покачивается + пульсирует (как живой логотип) */
.home-social-icon-vk svg {
    animation: vk-wave 2.6s ease-in-out infinite;
}
@keyframes vk-wave {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.06) rotate(-3deg); }
    50%      { transform: scale(1.08) rotate(0deg); }
    75%      { transform: scale(1.06) rotate(3deg); }
}

/* На hover — ускорение и сильнее эффект */
.home-social:hover .home-social-icon-tg svg { animation-duration: 1.6s; }
.home-social:hover .home-social-icon-vk svg { animation-duration: 1.3s; }

/* Reduced motion — отключить */
@media (prefers-reduced-motion: reduce) {
    .home-social-icon svg { animation: none !important; }
}

/* ── Tabbar: тактильная отдача при нажатии ────────────────────────────────── */

/* Bounce-анимация иконки таба при клике */
.tab svg.tab-tap {
    animation: tab-tap-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tab-tap-bounce {
    0%   { transform: scale(1)    translateY(0); }
    25%  { transform: scale(0.82) translateY(2px); }
    55%  { transform: scale(1.18) translateY(-4px); }
    80%  { transform: scale(0.96) translateY(0); }
    100% { transform: scale(1)    translateY(0); }
}

/* Сама вкладка чуть «приседает» при клике (мобильный фидбек) */
.tab:active {
    transform: scale(0.88);
    transition: transform 0.08s ease-out;
}


/* ── Order action buttons ──────────────────────────────────────────────────── */

.order-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.order-action-btn {
    flex: 1;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}
.order-action-btn:active { transform: scale(0.97); }
.order-action-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.order-cancel-btn {
    color: var(--amber);
    border-color: rgba(255, 182, 39, 0.30);
    background: rgba(255, 182, 39, 0.08);
}
.order-cancel-btn:hover:not(:disabled) {
    background: rgba(255, 182, 39, 0.16);
    border-color: rgba(255, 182, 39, 0.45);
}

.order-delete-btn {
    color: var(--danger);
    border-color: rgba(255, 69, 58, 0.30);
    background: rgba(255, 69, 58, 0.08);
}
.order-delete-btn:hover:not(:disabled) {
    background: rgba(255, 69, 58, 0.16);
    border-color: rgba(255, 69, 58, 0.45);
}

/* ── Per-tab уникальные анимации по нажатию ──────────────────────────────── */

/* Главная (домик) — подпрыгивает с лёгкой инерцией крыши */
.tab[data-tab="home"] svg.tab-tap {
    animation: tap-home 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tap-home {
    0%   { transform: scale(1) translateY(0); }
    30%  { transform: scale(0.86) translateY(3px); }
    60%  { transform: scale(1.18) translateY(-4px); }
    100% { transform: scale(1) translateY(0); }
}

/* Заказы (чек-лист) — короткая встряска, как пометил пункт */
.tab[data-tab="orders"] svg.tab-tap {
    animation: tap-orders 0.5s ease-out;
}
@keyframes tap-orders {
    0%   { transform: scale(1) translateX(0); }
    20%  { transform: scale(1.15) translateX(-2px); }
    40%  { transform: scale(1.05) translateX(2px) rotate(-3deg); }
    60%  { transform: scale(1.15) translateX(-1px) rotate(2deg); }
    100% { transform: scale(1) translateX(0) rotate(0); }
}

/* Создать (плюс в круге) — крутится на 180° и обратно */
.tab[data-tab="order"] svg.tab-tap {
    animation: tap-plus 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tap-plus {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.25); }
    100% { transform: rotate(360deg) scale(1); }
}

/* История (часы со стрелкой) — стрелка делает быстрый полный круг */
.tab[data-tab="history"] svg.tab-tap {
    animation: tap-clock 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tap-clock {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Профиль (человек) — голова кивает (подпрыгивает) */
.tab[data-tab="profile"] svg.tab-tap {
    animation: tap-head 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tap-head {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-4px) scale(1.18); }
    65%  { transform: translateY(2px) scale(0.94); }
    100% { transform: translateY(0) scale(1); }
}

/* Reduced motion — все per-tap анимации выключены */
@media (prefers-reduced-motion: reduce) {
    .tab[data-tab] svg.tab-tap { animation: none !important; }
}


/* ── Reviews section ──────────────────────────────────────────────────────── */

.home-reviews-section { margin-top: 20px; }

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px 12px;
}
.home-section-header .home-section-title { margin: 0; display: flex; align-items: center; gap: 6px; }

.reviews-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.reviews-sep { color: var(--hint); font-weight: 500; }
.reviews-rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--amber);
}
.reviews-rating-inline svg { filter: drop-shadow(0 0 3px rgba(255, 182, 39, 0.5)); }

.reviews-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.reviews-add-btn svg { width: 14px; height: 14px; }
.reviews-add-btn:active { transform: scale(0.96); }
.reviews-add-btn:hover { background: rgba(255, 122, 26, 0.22); }

.reviews-scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 4px 8px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reviews-scroller::-webkit-scrollbar { display: none; }

.review-card {
    flex: 0 0 78%;
    max-width: 320px;
    min-height: 130px;
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-head { display: flex; align-items: center; gap: 10px; }
.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.review-avatar-letter {
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.review-meta { flex: 1; min-width: 0; }
.review-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.review-source {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.review-source-kwork {
    color: #00aef0;
    background: rgba(0, 174, 240, 0.14);
    border: 1px solid rgba(0, 174, 240, 0.3);
}

.review-stars-row {
    display: inline-flex;
    gap: 1px;
    margin-top: 2px;
}
.rating-star { color: var(--border); }
.rating-star.star-full { color: var(--amber); filter: drop-shadow(0 0 3px rgba(255, 182, 39, 0.5)); }
.rating-star.star-half { color: var(--amber); opacity: 0.7; }

.review-text {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* Модалка отзыва */
.review-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 16px;
}
.review-star {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: var(--border);
    cursor: pointer;
    transition: transform 0.12s, color 0.12s;
    padding: 0;
}
.review-star.active {
    color: var(--amber);
    filter: drop-shadow(0 0 8px rgba(255, 182, 39, 0.55));
}
.review-star:active { transform: scale(0.85); }

.review-textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 14px;
    resize: none;
    min-height: 100px;
    outline: none;
    transition: border-color 0.15s;
}
.review-textarea:focus { border-color: var(--accent); }
.review-hint {
    font-size: 11px;
    color: var(--hint);
    text-align: right;
    margin: 6px 0 14px;
}

/* ── Soc: Kwork (фирменный зелёный) ───────────────────────────────────────── */

.home-socials-single { grid-template-columns: 1fr; }

.home-social-icon-kwork {
    background: linear-gradient(135deg, #2dd17d 0%, #00a85a 100%);
    box-shadow: 0 4px 14px -4px rgba(0, 168, 90, 0.55);
    width: 48px;            /* шире чтобы вместить wordmark */
    overflow: hidden;
}
.home-social:has(.home-social-icon-kwork) { --social-glow: rgba(45, 209, 125, 0.14); }

/* Брендовый wordmark "kwork" — фирменный стиль (без засечек, жирный) */
.kwork-wordmark {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: -0.5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    animation: kwork-pulse 2.8s ease-in-out infinite;
}
@keyframes kwork-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.home-social:hover .kwork-wordmark { animation-duration: 1.4s; }

/* ── Full-page (страница отзывов и т.д.) ──────────────────────────────────── */

.full-page { display: none; }
body.page-reviews .tab-panel { display: none !important; }
body.page-reviews .full-page[data-page="reviews"] { display: block; }
body.page-reviews .large-title-row { display: none; }

.full-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 4px 18px;
}
.full-page-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, transform 0.1s;
}
.full-page-back svg { width: 20px; height: 20px; }
.full-page-back:active { transform: scale(0.92); }
.full-page-back:hover { background: var(--surface-2); color: var(--accent); }
.full-page-title {
    flex: 1;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
}

.home-section-title-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.home-section-title-link .home-section-chevron {
    width: 14px;
    height: 14px;
    color: var(--hint);
    transition: transform 0.15s ease, color 0.15s ease;
}
.home-section-title-link:hover .home-section-chevron {
    color: var(--accent);
    transform: translateX(2px);
}

/* Сводка рейтинга на странице */
.reviews-page-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(255, 182, 39, 0.10) 0%, rgba(255, 122, 26, 0.08) 100%);
    border: 1px solid rgba(255, 182, 39, 0.22);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.reviews-summary-stars { display: inline-flex; gap: 2px; }
.reviews-summary-text { display: flex; flex-direction: column; }
.reviews-summary-avg {
    font-size: 22px;
    font-weight: 800;
    color: var(--amber);
    letter-spacing: -0.4px;
}
.reviews-summary-count { font-size: 11px; color: var(--hint); }

/* Список карточек на полной странице — вертикальный (vs scroller на главной) */
.reviews-page-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.review-card-full {
    flex: none;
    max-width: none;
    min-height: auto;
    scroll-snap-align: none;
}

.review-date {
    font-size: 11px;
    color: var(--hint);
    flex-shrink: 0;
    margin-left: auto;
}

/* Ответ магазина */
.review-reply {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
}
.review-reply-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-bottom: 4px;
}
.review-reply-head svg { width: 12px; height: 12px; }
.review-reply-text {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text);
}

/* Админ-тулзы под отзывом */
.review-admin-tools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.review-admin-btn {
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.review-admin-btn:hover { background: rgba(255,255,255,0.04); }
.review-reply-btn { color: var(--accent); border-color: rgba(255, 122, 26, 0.30); background: rgba(255, 122, 26, 0.08); }
.review-delete-btn { color: var(--danger); border-color: rgba(255, 69, 58, 0.30); background: rgba(255, 69, 58, 0.08); }
.review-reply-clear-btn { color: var(--hint); }

.review-reply-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.review-reply-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    resize: none;
    min-height: 70px;
    outline: none;
}
.review-reply-input:focus { border-color: var(--accent); }
.review-reply-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.btn-sm {
    padding: 7px 14px;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-sm:active { transform: scale(0.96); }
.btn-sm-primary { background: var(--accent); color: #fff; }
.btn-sm-secondary { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

/* ── Reviews: категории в модалке ─────────────────────────────────────────── */

.review-cats-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 8px;
}
.review-cats-label span {
    color: var(--hint);
    font-weight: 500;
    font-size: 11px;
}

.review-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.review-cat {
    padding: 6px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.review-cat:active { transform: scale(0.96); }
.review-cat.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Теги категорий в карточке отзыва */
.review-cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.review-cat-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--accent-soft);
    border-radius: 6px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* ── Reviews: edit-режим модалки ──────────────────────────────────────────── */

.review-edit-hint {
    background: var(--accent-soft);
    border: 1px solid var(--accent-strong);
    color: var(--accent);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 14px;
    text-align: center;
}

.review-delete-link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.review-delete-link:hover { opacity: 0.7; }
.review-delete-link[hidden] { display: none; }

/* Кнопка "Оставить отзыв" в success-модалке */
#success-review {
    width: 100%;
    margin: 8px 0;
    padding: 12px 18px;
    background: var(--surface-2);
    border: 1px solid var(--accent-strong);
    color: var(--text);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, transform 0.1s;
}
#success-review:active { transform: scale(0.97); }
#success-review:hover { background: var(--accent-soft); }

/* ── Verified badge (как в Telegram) ──────────────────────────────────────── */

.verified-badge {
    --vb-size: 1.15em;
    width: var(--vb-size);
    height: var(--vb-size);
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #229ED9;
    clip-path: polygon(
        50% 0%, 60% 10%, 74% 6%, 82% 18%, 94% 26%,
        90% 40%, 100% 50%, 90% 60%, 94% 74%, 82% 82%,
        74% 94%, 60% 90%, 50% 100%, 40% 90%, 26% 94%,
        18% 82%, 6% 74%, 10% 60%, 0% 50%, 10% 40%,
        6% 26%, 18% 18%, 26% 6%, 40% 10%
    );
}
.verified-badge > span {
    width: calc(var(--vb-size) * 0.55);
    height: calc(var(--vb-size) * 0.28);
    border-left: calc(var(--vb-size) * 0.13) solid #fff;
    border-bottom: calc(var(--vb-size) * 0.13) solid #fff;
    transform: rotate(-45deg);
    border-radius: 2px;
    margin-top: -10%;
}
.review-reply-head { gap: 5px; align-items: center; }
.review-reply-head span { letter-spacing: 0.5px; }

/* ── Auth stub (прямой заход в браузере) ──────────────────────────────────── */

#auth-stub {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 122, 26, 0.18), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(255, 182, 39, 0.10), transparent 55%),
        var(--bg);
    overflow-y: auto;
}
#auth-stub[hidden] { display: none; }

.auth-stub-card {
    max-width: 380px;
    width: 100%;
    text-align: center;
    background: linear-gradient(160deg, #1a1109 0%, #15110d 100%);
    border: 1px solid rgba(255, 122, 26, 0.30);
    border-radius: 24px;
    padding: 32px 26px 28px;
    box-shadow: 0 20px 60px -10px rgba(255, 122, 26, 0.25);
}

.auth-stub-brand {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 22px;
    text-shadow: 0 0 18px rgba(255, 122, 26, 0.35);
}
.auth-stub-brand span { color: #ff7a1a; }

.auth-stub-emoji {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 14px;
}

.auth-stub-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 10px;
    color: var(--text);
}

.auth-stub-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0 0 22px;
}

.auth-stub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px -6px var(--accent-glow);
    transition: transform 0.1s, box-shadow 0.2s;
}
.auth-stub-btn:hover {
    box-shadow: 0 10px 28px -6px var(--accent-glow);
}
.auth-stub-btn:active {
    transform: scale(0.97);
}

.auth-stub-footer {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--hint);
}
.auth-stub-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-stub-footer a:hover { color: var(--accent-hover); }

/* ── Loading splash ───────────────────────────────────────────────────────── */

#loading-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}
#loading-splash.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Глоу-фон с анимацией */
.splash-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 122, 26, 0.25), transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(255, 182, 39, 0.10), transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 122, 26, 0.10), transparent 55%);
    animation: splash-bg-pulse 3.5s ease-in-out infinite;
}
@keyframes splash-bg-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

.splash-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: splash-fade-in 0.5s ease;
}
@keyframes splash-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.splash-brand {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--text);
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(255, 122, 26, 0.5);
    margin-bottom: 28px;
    animation: splash-brand-glow 2.4s ease-in-out infinite;
}
.splash-brand span { color: #ff7a1a; }
@keyframes splash-brand-glow {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 122, 26, 0.4); }
    50%      { text-shadow: 0 0 40px rgba(255, 122, 26, 0.8), 0 0 60px rgba(255, 122, 26, 0.3); }
}

/* Прогресс-бар */
.splash-progress {
    width: 220px;
    height: 5px;
    margin: 0 auto 22px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.splash-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 50%, var(--amber) 100%);
    border-radius: 100px;
    box-shadow: 0 0 14px rgba(255, 122, 26, 0.7);
    position: relative;
    animation: splash-progress-fill 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
/* Бегущий блик поверх заливки */
.splash-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: splash-progress-shimmer 1.1s linear infinite;
}
@keyframes splash-progress-fill {
    0%   { width: 0%; }
    20%  { width: 30%; }
    50%  { width: 60%; }
    80%  { width: 88%; }
    100% { width: 100%; }
}
@keyframes splash-progress-shimmer {
    to { transform: translateX(100%); }
}

.splash-tagline {
    font-size: 13px;
    color: var(--hint);
    letter-spacing: 0.3px;
    animation: splash-tagline-fade 1.8s ease-in-out infinite;
}
@keyframes splash-tagline-fade {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .splash-bg, .splash-brand, .splash-tagline, .splash-progress-fill::after {
        animation-duration: 0s !important;
    }
    .splash-progress-fill { width: 100%; animation: none; }
}