/* ============================================
   ИгроРум Web — Global Styles
   ============================================ */

:root {
    --primary: #2E7D32;
    --primary-light: #4CAF50;
    --primary-dark: #1B5E20;
    --primary-container: #C8E6C9;
    --secondary: #FF8F00;
    --surface: #FAFAFA;
    --surface-variant: #F5F5F5;
    --surface-card: #FFFFFF;
    --background: #F8F9FA;
    --on-surface: #1C1B1F;
    --on-surface-variant: #6B6B6B;
    --error: #D32F2F;
    --success: #2E7D32;
    --available: #4CAF50;
    --booked: #E57373;
    --pending: #FFB74D;
    --active: #42A5F5;
    --mine: #7C4DFF;
    --buffer: #FF9800;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    /* Soft, slightly green-tinted layered shadows to match the chat cloud */
    --shadow-sm: 0 6px 18px -10px rgba(24,50,30,0.14), 0 1px 3px rgba(24,50,30,0.05);
    --shadow-md: 0 10px 30px -12px rgba(24,50,30,0.18), 0 2px 8px -4px rgba(24,50,30,0.10);
    --shadow-lg: 0 24px 60px -20px rgba(24,50,30,0.22), 0 8px 24px -12px rgba(24,50,30,0.14);
    --card-border: 1px solid rgba(46,125,50,0.08);
    --transition: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(900px 500px at 50% -120px, rgba(46,125,50,0.10), transparent 65%),
        linear-gradient(180deg, #fafcfa 0%, #f0f5f1 100%);
    background-attachment: fixed;
    color: var(--on-surface);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: transparent;
    position: relative;
    overflow-x: hidden;
}

/* ============================================
   Typography
   ============================================ */
.display-lg { font-size: 32px; font-weight: 700; line-height: 1.2; }
.headline-md { font-size: 24px; font-weight: 600; line-height: 1.3; }
.headline-sm { font-size: 20px; font-weight: 600; line-height: 1.3; }
.title-lg { font-size: 18px; font-weight: 600; }
.title-md { font-size: 16px; font-weight: 500; }
.body-lg { font-size: 16px; font-weight: 400; }
.body-md { font-size: 14px; font-weight: 400; }
.body-sm { font-size: 12px; font-weight: 400; }
.label-lg { font-size: 14px; font-weight: 500; }
.label-md { font-size: 12px; font-weight: 500; }

.text-primary { color: var(--primary); }
.text-muted { color: var(--on-surface-variant); }
.text-error { color: var(--error); }
.text-center { text-align: center; }

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/MaterialIconsRound.woff2') format('woff2');
}

/* ============================================
   Material Icons
   ============================================ */
.mi {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ============================================
   Cards
   ============================================ */
.card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: var(--card-border);
    padding: 20px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-flat { box-shadow: none; border: 1px solid #E0E0E0; }

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    box-shadow: 0 4px 12px rgba(46,125,50,0.3);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(46,125,50,0.4); }
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-outline:hover { background: rgba(46,125,50,0.05); }

.btn-text {
    background: transparent;
    color: var(--primary);
    padding: 8px 16px;
}
.btn-text:hover { background: rgba(46,125,50,0.05); }

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-full { width: 100%; }

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.btn-icon:hover { box-shadow: var(--shadow-md); }

/* ============================================
   Inputs
   ============================================ */
.input-group {
    position: relative;
    margin-bottom: 16px;
}
.input-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface-variant);
    margin-bottom: 6px;
}
.input-field {
    width: 100%;
    padding: 14px 16px;
    padding-left: 44px;
    border: 2px solid #E0E0E0;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    background: var(--surface-card);
    transition: border-color var(--transition);
    outline: none;
}
.input-field:focus { border-color: var(--primary); }
.input-field::placeholder { color: #BDBDBD; }

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 20px;
    pointer-events: none;
}
.input-group.has-label .input-icon { top: calc(50% + 10px); }

.input-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}
.input-group.has-label .input-toggle { top: calc(50% + 10px); }

/* ============================================
   Chips / Tabs
   ============================================ */
.chip-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.chip {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-lg);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface-variant);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
}
.chip.active {
    background: var(--primary-container);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.status-chip.paid { background: #E8F5E9; color: var(--primary); }
.status-chip.active { background: #E3F2FD; color: #1976D2; }
.status-chip.pending { background: #FFF3E0; color: #E65100; }
.status-chip.cancelled { background: #FFEBEE; color: var(--error); }
.status-chip.completed { background: var(--surface-variant); color: var(--on-surface-variant); }

/* ============================================
   Screen Layout
   ============================================ */
.screen {
    min-height: 100vh;
    padding: 24px;
    padding-bottom: 90px;
    animation: screenIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes screenIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.screen-auth {
    background: linear-gradient(to bottom, var(--primary-container), var(--background), var(--background));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.screen-auth.auth-split {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    min-height: 100svh;
    background:
        radial-gradient(720px 380px at 50% -120px, rgba(76,175,80,0.20), transparent 70%),
        linear-gradient(180deg, #f7fbf7 0%, #edf5ef 100%);
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-visual {
    display: none;
}

.auth-panel {
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
}

.auth-panel-inner {
    width: 100%;
    max-width: 430px;
}

.auth-logo {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 18px 42px rgba(46,125,50,0.24);
}

.auth-logo .mi {
    font-size: 44px;
    color: white;
}

.auth-title,
.auth-subtitle {
    text-align: center;
}

.auth-title {
    margin-bottom: 4px;
}

.auth-subtitle {
    margin-bottom: 40px;
}

.auth-card,
.auth-test-card {
    width: 100%;
}

.auth-register {
    margin-top: 24px;
    text-align: center;
}

.auth-register a {
    font-weight: 600;
    text-decoration: none;
}

.auth-test-card {
    margin-top: 24px;
}

@media (min-width: 768px) {
    .screen-auth.auth-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
        min-height: 100svh;
        padding: 0;
        background: #0e1a12;
        overflow: hidden;
    }

    .auth-visual {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 100svh;
        padding: 56px;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(8,20,13,0.10) 0%, rgba(8,20,13,0.82) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
    }

    .auth-visual::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(700px 420px at 18% 12%, rgba(var(--neo-accent-rgb),0.20), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.18), transparent 45%);
        pointer-events: none;
    }

    .auth-visual-content {
        position: relative;
        z-index: 1;
        max-width: 540px;
        color: white;
    }

    .auth-eyebrow {
        margin-bottom: 18px;
        color: rgba(255,255,255,0.70);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.28em;
        text-transform: uppercase;
    }

    .auth-visual-content h1 {
        font-size: clamp(38px, 5vw, 68px);
        line-height: 0.98;
        letter-spacing: -0.06em;
        margin-bottom: 18px;
    }

    .auth-visual-content p:last-child {
        max-width: 420px;
        color: rgba(255,255,255,0.78);
        font-size: 18px;
        line-height: 1.55;
    }

    .auth-panel {
        min-height: 100svh;
        padding: 48px;
        background:
            radial-gradient(580px 320px at 50% 0%, rgba(76,175,80,0.18), transparent 70%),
            linear-gradient(180deg, #fbfdfb 0%, #eef5ef 100%);
    }
}

.screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.screen-header .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface-card);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   Bottom Navigation
   ============================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--surface-card);
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-around;
    padding: 8px 16px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    transition: color var(--transition);
    border-radius: 12px;
}
.nav-item.active {
    color: var(--primary);
}
.nav-item .mi { font-size: 26px; }

/* ============================================
   Home Screen
   ============================================ */
.home-hero {
    background-image:
        linear-gradient(135deg, rgba(76,175,80,0.92), rgba(27,94,32,0.95)),
        var(--hero-img, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    padding: 24px;
    min-height: 220px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
/* На тёмных темах — overlay цвета акцента темы, не захардкоженный зелёный. */
html[data-igro-theme] .home-hero {
    background-image:
        linear-gradient(135deg,
            rgba(var(--neo-accent-rgb), 0.85),
            rgba(var(--neo-accent-2-rgb), 0.95)),
        var(--hero-img, none);
    color: var(--neo-button-text);
}
html[data-igro-theme] .home-hero .hero-btn {
    background: rgba(0,0,0,0.18);
    border-color: rgba(0,0,0,0.28);
    color: var(--neo-button-text);
}
html[data-igro-theme] .home-hero .hero-btn:hover {
    background: rgba(0,0,0,0.28);
}
html[data-igro-theme] .home-hero .price-badge {
    background: rgba(0,0,0,0.22) !important;
    color: var(--neo-button-text) !important;
}
.home-hero > * {
    position: relative;
    z-index: 1;
}
.home-hero::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.home-hero .hero-title { font-size: 20px; font-weight: 700; }
.home-hero .hero-sub { font-size: 14px; opacity: 0.9; margin-top: 4px; }
.home-hero .hero-price {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 700;
}
.home-hero .hero-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.home-hero .hero-btn:hover { background: rgba(255,255,255,0.3); }

.home-greeting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.home-greeting h1 { font-size: 26px; font-weight: 700; }

.access-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.access-card.active-access {
    background: #E8F5E9;
    border: 1px solid var(--primary-light);
}
.access-card.inactive-access {
    background: #FFF3E0;
    border: 1px solid var(--pending);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    font-family: inherit;
}
.quick-action:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quick-action .mi { font-size: 32px; color: var(--primary); }
.quick-action span { font-size: 13px; font-weight: 500; color: var(--on-surface); }

/* ============================================
   Booking / Calendar
   ============================================ */
.calendar {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.calendar-header h3 { font-size: 16px; font-weight: 600; }
.calendar-nav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    color: var(--on-surface);
}
.calendar-nav:hover { background: var(--surface-variant); }

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-surface-variant);
    padding: 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    background: none;
    color: var(--on-surface);
    transition: all var(--transition);
    font-family: inherit;
}
.calendar-day:hover:not(.disabled):not(.empty) { background: var(--primary-container); }
.calendar-day.today { border: 2px solid var(--primary); }
.calendar-day.selected { background: var(--primary); color: white; }
.calendar-day.disabled { color: #CCC; cursor: default; }
.calendar-day.empty { cursor: default; }

.slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}
.slot {
    padding: 8px 4px;
    text-align: center;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}
.slot.available { background: #E8F5E9; color: var(--primary-dark); }
.slot.available:hover { background: var(--primary-light); color: white; }
.slot.booked { background: #FFCDD2; color: #B71C1C; cursor: not-allowed; }
.slot.mine { background: #EDE7F6; color: #4A148C; }
.slot.selected { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(46,125,50,0.3); }
.slot.past { background: #EEEEEE; color: #BDBDBD; cursor: not-allowed; }
.slot.buffer { background: #FFF3E0; color: #E65100; cursor: not-allowed; }

.slot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.slot-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--on-surface-variant);
}
.slot-legend-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

/* ============================================ */
/* Timeline & Time Picker (dynamic scheduling)  */
/* ============================================ */
.time-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--on-surface-variant);
    margin-bottom: 20px;
}

.time-picker-section {
    margin-bottom: 20px;
}
.time-picker-section label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.time-picker-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.time-option {
    padding: 8px 14px;
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    color: var(--on-surface);
}
.time-option:hover {
    border-color: var(--primary);
    background: #E8F5E9;
}
.time-option.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}

.duration-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.duration-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 18px;
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    min-width: 80px;
}
.duration-option:hover {
    border-color: var(--primary);
    background: #E8F5E9;
}
.duration-option.selected {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}
.duration-option .duration-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
}
.duration-option .duration-price {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 2px;
}
.duration-option.selected .duration-label,
.duration-option.selected .duration-price {
    color: white;
}

/* Picker Container — Position context for sliding panels */
.picker-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    min-height: 250px;
}

/* Time and Duration Picker Panels — Slide Animation */
.time-picker-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.time-picker-panel.hidden {
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.duration-picker-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.duration-picker-panel.visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.duration-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0;
}

.duration-back-btn {
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    color: var(--on-surface);
}
.duration-back-btn:hover {
    background: var(--surface-variant);
}
.duration-back-btn:active {
    background: #E0E0E0;
}

/* ============================================
   Booking Progress Bar
   ============================================ */
.booking-progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.progress-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all var(--transition);
}

.progress-step.active .progress-number {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}

.progress-step.done .progress-number {
    background: var(--primary);
    color: white;
}

.progress-label {
    font-size: 12px;
    color: var(--on-surface-variant);
    text-align: center;
    max-width: 60px;
}

.progress-line {
    flex: 0.5;
    height: 2px;
    background: var(--surface-variant);
    transition: all var(--transition);
}

.progress-line.done {
    background: var(--primary);
}

/* ============================================
   Booking Steps Container & Steps
   ============================================ */
.booking-steps-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    min-height: 400px;
}

.booking-step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%); /* All hidden steps off-screen right */
}

.booking-step.visible {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0); /* Visible step in center */
}

.booking-step.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%); /* Hidden steps always right */
}

.step-content {
    padding: 20px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.step-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--on-surface);
}

.step-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.step-back-btn:hover {
    background: var(--primary-container);
}

.booking-summary-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}



.booking-summary {
    background: var(--surface-card);
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}
.booking-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.booking-summary-row .label { color: var(--on-surface-variant); font-size: 14px; }
.booking-summary-row .value { font-weight: 600; font-size: 14px; }
.booking-summary .total {
    border-top: 1px solid #E0E0E0;
    margin-top: 8px;
    padding-top: 12px;
}
.booking-summary .total .value { font-size: 20px; color: var(--primary); }

/* ============================================
   Payment
   ============================================ */
.card-preview {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    border-radius: var(--radius-md);
    padding: 24px;
    color: white;
    margin: 0 auto 20px;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.card-preview .card-chip {
    width: 40px;
    height: 28px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 6px;
    margin-bottom: 20px;
}
.card-number { font-size: 20px; letter-spacing: 3px; font-weight: 500; margin-bottom: 16px; }
.card-bottom { display: flex; justify-content: space-between; }
.card-bottom .card-label { font-size: 10px; opacity: 0.6; text-transform: uppercase; }
.card-bottom .card-value { font-size: 14px; font-weight: 500; }

/* ============================================
   History / Bookings list
   ============================================ */
.booking-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
    cursor: pointer;
    transition: all var(--transition);
}
.booking-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.booking-card .booking-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking-card .booking-icon .mi { color: var(--primary); }
.booking-card .booking-info { flex: 1; }
.booking-card .booking-info .date { font-weight: 600; font-size: 15px; }
.booking-card .booking-info .time { font-size: 13px; color: var(--on-surface-variant); }
.booking-card .booking-price { font-weight: 700; color: var(--primary); }

/* ============================================
   Door / Lock
   ============================================ */
.door-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 32px auto;
    transition: all 0.3s ease;
    position: relative;
}
.door-circle.idle {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 8px 32px rgba(46,125,50,0.4);
    animation: pulse-door 2s infinite;
}
.door-circle.opening {
    background: linear-gradient(135deg, var(--secondary), #F57C00);
    box-shadow: 0 8px 32px rgba(255,143,0,0.4);
}
.door-circle.opened {
    background: linear-gradient(135deg, var(--active), #1976D2);
    box-shadow: 0 8px 32px rgba(66,165,245,0.4);
}
.door-circle.error {
    background: linear-gradient(135deg, #EF5350, #C62828);
    box-shadow: 0 8px 32px rgba(211,47,47,0.4);
}
.door-circle.disabled {
    background: linear-gradient(135deg, #9E9E9E, #757575);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    cursor: not-allowed;
}
.door-circle .mi { font-size: 64px; color: white; }

@keyframes pulse-door {
    0%, 100% { box-shadow: 0 8px 32px rgba(46,125,50,0.4); }
    50% { box-shadow: 0 8px 48px rgba(46,125,50,0.6); }
}

/* Countdown timer */
.countdown-timer {
    margin: 0 auto 24px;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    text-align: center;
    max-width: 240px;
}
.countdown-timer.active {
    background: linear-gradient(135deg, rgba(46,125,50,0.1), rgba(76,175,80,0.1));
    border: 1px solid rgba(46,125,50,0.2);
}
.countdown-timer.before {
    background: linear-gradient(135deg, rgba(255,143,0,0.1), rgba(255,167,38,0.1));
    border: 1px solid rgba(255,143,0,0.2);
}
.countdown-timer.waiting {
    background: linear-gradient(135deg, rgba(66,165,245,0.1), rgba(33,150,243,0.1));
    border: 1px solid rgba(66,165,245,0.2);
}
.countdown-value {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
}
.countdown-timer.active .countdown-value { color: var(--primary); }
.countdown-timer.before .countdown-value { color: var(--secondary); }
.countdown-timer.waiting .countdown-value { color: var(--active); }
.countdown-label {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-top: 4px;
}

.lock-password-card {
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.lock-password-card .password-display {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--primary-dark);
    margin: 12px 0;
}

/* На тёмных темах (data-igro-theme) светло-зелёный фон + захардкоженный
   цвет --primary-dark = очень тёмный текст → сливается с акцентом темы.
   Делаем фон акцентным мягким (под тему), текст — ярким акцентом, границу — акцентной. */
html[data-igro-theme] .lock-password-card {
    background: var(--neo-accent-soft);
    border-color: var(--neo-border-accent);
    color: var(--neo-text);
}
html[data-igro-theme] .lock-password-card .password-display {
    color: var(--neo-accent);
    text-shadow: 0 0 22px var(--neo-accent-glow);
}

/* SBP screen (выбор банка / QR-код / нижний notice) */
.sbp-card {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}
.sbp-bank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8e2f0;
    border-radius: 14px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sbp-bank-row:hover { background: #f5f9ff; }
.sbp-bank-row img {
    border-radius: 10px;
    background: #ffffff;
}
.sbp-bank-row .sbp-bank-name {
    flex: 1;
    font-weight: 600;
    color: var(--on-surface);
}
.sbp-notice {
    background: linear-gradient(135deg, #E8F5E9, #F7FFF8);
    border: 1px solid #C8E6C9;
    color: var(--on-surface);
}

/* На тёмных темах (data-igro-theme) — белые карточки и кнопки сливаются с
   тёмным фоном/текстом. Делаем стекло под акцент темы. Логотипы банков
   оставляем на белой подложке, иначе их собственные цвета теряются. */
html[data-igro-theme] .sbp-card {
    background: linear-gradient(180deg, var(--neo-panel) 0%, var(--neo-panel-strong) 100%);
    border: 1px solid var(--neo-border);
    color: var(--neo-text);
}
html[data-igro-theme] .sbp-bank-row {
    background: var(--neo-panel-strong);
    border-color: var(--neo-border-accent);
    color: var(--neo-text);
}
html[data-igro-theme] .sbp-bank-row:hover {
    background: var(--neo-accent-soft);
}
html[data-igro-theme] .sbp-bank-row img {
    background: #ffffff;          /* банк-логотипы остаются на белом */
    padding: 2px;
}
html[data-igro-theme] .sbp-bank-row .sbp-bank-name {
    color: var(--neo-text);
}
html[data-igro-theme] .sbp-notice {
    background: var(--neo-accent-soft);
    border-color: var(--neo-border-accent);
    color: var(--neo-text);
}

/* ============================================
   Profile
   ============================================ */
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.profile-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F0F0F0;
}
.profile-stat:last-child { border-bottom: none; }
.profile-stat .mi { color: var(--primary); }
.profile-stat .stat-label { font-size: 13px; color: var(--on-surface-variant); }
.profile-stat .stat-value { font-weight: 600; }

.profile-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--on-surface);
    text-align: left;
}
.profile-action:hover { background: var(--surface-variant); }
.profile-action .mi { color: var(--on-surface-variant); }
.profile-action:disabled { cursor: not-allowed; }
.support-badge {
    background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
}
.push-switch {
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-variant, #e5e7eb);
    position: relative;
    transition: background 180ms ease;
    display: inline-block;
}
.push-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.push-switch.on {
    background: var(--primary, #22c55e);
}
.push-switch.on .push-switch-thumb {
    transform: translateX(18px);
}

/* ============================================
   Chat
   ============================================ */

/* Main chat container */
.chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Messages container - oldest at top, newest at bottom */
.chat-messages {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat-messages::before {
    content: "";
    margin-top: auto;
}

/* Mobile: input at bottom, messages above */
@media (max-width: 767px) {
    .screen:has(.chat-container) {
        display: flex;
        flex-direction: column;
        height: 100vh;
        padding-bottom: 0 !important;
    }

    .screen:has(.chat-container) .chat-container {
        overflow: hidden;
    }

    .screen:has(.chat-container) .screen-header {
        flex-shrink: 0;
    }

    .chat-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface);
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px;
        padding-bottom: 140px;
    }

    .chat-input-bar {
        position: fixed;
        bottom: 4px;
        left: 0;
        right: 0;
        background: var(--surface);
        border-top: 1px solid #E5E7EB;
        padding: 6px 12px;
        display: flex;
        gap: 8px;
        align-items: flex-end;
        width: 100%;
        box-sizing: border-box;
        z-index: 1000;
    }
}

/* Tablet & Desktop: card styling */
@media (min-width: 768px) {
    #app {
        max-width: none;
        width: 100%;
    }

    .chat-container {
        background: var(--surface-card);
        border: 1px solid var(--border, #E5E7EB);
        box-shadow: var(--shadow-md);
        border-radius: 20px;
        padding: 20px;
        margin: 20px auto;
        max-width: none;
        width: 98%;
        height: 60vh;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 12px 0;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .chat-input-bar {
        display: flex;
        gap: 8px;
        padding: 12px 0;
        align-items: flex-end;
        width: 100%;
        margin: 0;
    }
}

.chat-date-separator {
    text-align: center;
    margin: 16px 0 8px;
    font-size: 12px;
    color: var(--on-surface-variant);
    position: relative;
}

.chat-date-separator span {
    background: var(--surface);
    padding: 2px 12px;
    border-radius: 12px;
    background: var(--surface-variant);
    font-weight: 500;
}

.chat-bubble {
    max-width: min(80%, 480px);
    padding: 12px 16px;
    border-radius: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-bubble.client {
    background: var(--primary);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.chat-bubble.admin {
    background: var(--surface-card);
    border: 1px solid #E0E0E0;
    color: var(--on-surface);
    border-bottom-left-radius: 4px;
}

.chat-bubble .time {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
}

.chat-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 6px;
    cursor: pointer;
    object-fit: cover;
}

.chat-image-preview {
    position: relative;
    padding: 8px;
    background: var(--surface-variant);
    border-radius: 12px 12px 0 0;
}

.chat-image-preview img {
    max-height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

.chat-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-icon-outline {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #E0E0E0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--on-surface-variant);
    transition: var(--transition);
}

.btn-icon-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.chat-input-bar textarea {
    flex: 1;
    height: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 2px solid #E0E0E0;
    border-radius: 20px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    max-height: 120px;
    outline: none;
    line-height: 1.4;
    overflow-y: hidden;
}

.chat-input-bar textarea:focus {
    border-color: var(--primary);
}

/* ============================================
   Notifications
   ============================================ */
.notification-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.notification-card.unread { border-left: 3px solid var(--primary); }
.notification-card .notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notification-card.unread .notif-icon { background: var(--primary-container); color: var(--primary); }
.notification-card:not(.unread) .notif-icon { background: var(--surface-variant); color: var(--on-surface-variant); }

/* ============================================
   Dialogs
   ============================================ */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: fadeOverlay 0.2s ease;
    padding: 24px;
}
@keyframes fadeOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
.dialog {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    animation: slideUp 0.25s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ============================================
   Loading Spinner — organic blobby (2026-05-14)
   На основе прототипов #18 wobble + #01 breathing.
   Морфящийся блоб через асимметричный border-radius shorthand
   плюс мягкое вращение и scale-пульс. Один элемент, без SVG.
   Тема-агностично через var(--primary).
   ============================================ */
.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 24px auto;
    animation: spin-morph 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
    will-change: border-radius, transform;
}
@keyframes spin-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0)      scale(1);   }
    25%      { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(90deg)  scale(.9);  }
    50%      { border-radius: 70% 30% 50% 50% / 50% 50% 30% 70%; transform: rotate(180deg) scale(1.06); }
    75%      { border-radius: 40% 60% 70% 30% / 70% 50% 30% 50%; transform: rotate(270deg) scale(.92); }
}

/* Legacy alias — старая анимация на случай если где-то ещё используется */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner-small {
    width: 22px;
    height: 22px;
    margin: 8px auto;
    /* унаследует тот же морф из .spinner */
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--on-surface-variant);
}
.empty-state .mi { font-size: 56px; opacity: 0.3; display: block; margin-bottom: 16px; }

/* ============================================
   Success Animation
   ============================================ */
.success-check {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: bounceIn 0.5s ease;
}
.success-check .mi { font-size: 56px; color: white; }
@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============================================
   Toast
   ============================================ */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--on-surface);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    z-index: 300;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s;
    pointer-events: none;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CCC; border-radius: 4px; }

/* ============================================
   Responsive
   ============================================ */
/* ============================================
   App Shell (Preact)
   ============================================ */
.app-shell {
    min-height: 100vh;
    position: relative;
}
.screen-container {
    min-height: 100vh;
}

/* ============================================
   Auth Screens
   ============================================ */
.auth-logo {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
}
.auth-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.auth-logo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(46, 125, 50, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Glass Card
   ============================================ */
.glass-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px 24px;
    width: 100%;
}

/* ============================================
   Step Bar (Register)
   ============================================ */
.step-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.step-bar .step-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #E0E0E0;
    transition: background var(--transition);
}
.step-bar .step-dot.active {
    background: var(--primary);
}

/* ============================================
   Waiting Call Card
   ============================================ */
.waiting-call-card {
    text-align: center;
    padding: 32px 16px;
}

/* ============================================
   Active Booking Card
   ============================================ */
.active-booking-card {
    border: 2px solid var(--primary-light);
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    margin-bottom: 20px;
}
.scheduled-booking-card {
    border: 2px solid #BDBDBD;
    background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
    margin-bottom: 20px;
}

/* ============================================
   Checkbox Row
   ============================================ */
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* ============================================
   Slide Up Animation
   ============================================ */
.slide-up {
    animation: slideUpIn 0.3s ease;
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Spin Animation (door opening)
   ============================================ */
.spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 480px) {
    #app { max-width: 100%; }
}

/* ============================================
   Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
    #app {
        max-width: none;
    }

    .screen {
        padding: 32px;
        padding-bottom: 100px;
    }

    .screen-auth {
        padding-top: 80px;
        justify-content: center;
    }

    .glass-card {
        max-width: 440px;
        padding: 40px 32px;
    }

    .slots-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-hero {
        padding: 32px;
    }

    .home-hero .hero-title { font-size: 24px; }
    .home-hero .hero-price { font-size: 28px; }

    .bottom-nav {
        max-width: 700px;
    }

    .dialog {
        max-width: 480px;
    }

    .door-circle {
        width: 220px;
        height: 220px;
    }

    .door-circle .mi { font-size: 80px; }

    .chat-bubble { max-width: 65%; }
}

/* ============================================
   Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    #app {
        max-width: 100%;
        display: flex;
        flex-direction: row;
    }

    /* Side navigation for desktop */
    .app-shell {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    /* Remove width limit for chat screen */
    .app-shell:has(.chat-container) {
        max-width: none;
    }

    .bottom-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px;
        max-width: 220px;
        height: 100vh;
        flex-direction: column;
        justify-content: flex-start;
        padding: 32px 12px;
        gap: 4px;
        border-top: none;
        border-right: 1px solid #E0E0E0;
        transform: none;
        z-index: 100;
    }

    .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 12px;
        width: 100%;
    }

    .nav-item.active {
        background: var(--primary-container);
    }

    .nav-item .mi { font-size: 24px; }

    .screen-container {
        flex: 1;
        margin-left: 220px;
        min-height: 100vh;
        max-width: 900px;
    }

    /* Remove width limit for chat screen */
    .screen-container:has(.chat-container) {
        max-width: none;
    }

    .screen {
        padding: 28px 40px;
        padding-bottom: 28px;
        min-height: 100vh;
    }

    /* Remove padding for chat screen */
    .screen:has(.chat-container) {
        padding: 0;
    }

    .screen-auth {
        margin-left: 0;
        padding-top: 60px;
    }

    /* Auth screens should be centered, no sidebar offset */
    .app-shell:not(:has(.bottom-nav)) .screen-container {
        margin-left: 0;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .glass-card {
        max-width: 480px;
        padding: 48px 36px;
    }

    /* Booking page: two-column layout on desktop */
    .booking-desktop-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
    }

    .booking-desktop-layout .calendar {
        margin-bottom: 0;
        padding: 14px;
    }

    .booking-desktop-layout .calendar-day {
        aspect-ratio: unset;
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .booking-desktop-layout .calendar-header {
        margin-bottom: 8px;
    }

    .booking-desktop-layout .calendar-header h3 {
        font-size: 15px;
    }

    .booking-desktop-layout .calendar-weekdays {
        margin-bottom: 4px;
    }

    .booking-desktop-layout .calendar-weekdays span {
        font-size: 11px;
        padding: 2px;
    }

    .booking-desktop-right {
        display: flex;
        flex-direction: column;
    }

    .slots-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 6px;
    }

    .slot {
        padding: 8px 4px;
        font-size: 12px;
    }

    .screen-header {
        margin-bottom: 16px;
    }

    .slot-legend {
        margin-bottom: 10px;
    }

    .booking-summary {
        width: 100%;
        padding: 16px;
        margin-bottom: 12px;
    }

    .booking-summary-row {
        padding: 4px 0;
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .quick-action {
        padding: 24px 16px;
    }

    .home-hero {
        padding: 36px;
    }

    .home-hero .hero-title { font-size: 26px; }
    .home-hero .hero-price { font-size: 32px; }

    .home-greeting h1 { font-size: 30px; }

    .booking-card {
        padding: 20px;
    }

    .booking-card .booking-info .date { font-size: 16px; }

    .calendar {
        padding: 20px;
    }

    .chat-container {
        height: calc(100vh - 80px);
    }

    .chat-bubble { max-width: 50%; }

    .profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 44px;
    }

    .toast {
        bottom: 40px;
    }

    .door-circle {
        width: 240px;
        height: 240px;
    }

    .door-circle .mi { font-size: 88px; }

    .card-preview {
        max-width: 400px;
        margin: 0 auto 20px;
    }

    .empty-state {
        padding: 64px 32px;
    }
}

/* ============================================
   Wide Desktop (1440px+)
   ============================================ */
@media (min-width: 1440px) {
    .app-shell {
        max-width: 1400px;
    }

    .bottom-nav {
        width: 260px;
        max-width: 260px;
        padding: 40px 16px;
    }

    .nav-item {
        padding: 14px 20px;
        font-size: 15px;
    }

    .screen-container {
        margin-left: 260px;
        max-width: 1000px;
    }

    .screen {
        padding: 48px 64px;
    }

    .slots-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .booking-desktop-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 20px;
    }

    .booking-desktop-layout .calendar-day {
        width: 40px;
        height: 40px;
    }
}

/* Extend booking */
.btn-extend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    justify-content: center;
}
.btn-extend:hover {
    background: var(--primary-container, rgba(76,175,80,0.08));
}

.extend-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.extend-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1.5px solid var(--outline, #ddd);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}
.extend-option:hover {
    border-color: var(--primary);
}
.extend-option.selected {
    border-color: var(--primary);
    background: var(--primary-container, rgba(76,175,80,0.08));
    font-weight: 600;
}
.extend-label {
    color: var(--on-surface, #333);
}
.extend-price {
    color: var(--secondary, #666);
    font-size: 13px;
}

.toast-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}
.toast-inline.toast-success {
    background: var(--primary-container, rgba(76,175,80,0.1));
    color: var(--primary, #2E7D32);
}

/* ============================================
   Page Transitions
   ============================================ */
.screen-container {
    animation: screenContainerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Dynamic Pricing Badge
   ============================================ */
.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.price-badge.peak {
    background: #FFF3E0;
    color: #E65100;
}
.price-badge.offpeak {
    background: #E8F5E9;
    color: var(--primary-dark);
}
.price-badge.discount {
    background: #E3F2FD;
    color: #1565C0;
}

/* ============================================
   Booking Flow Steps
   ============================================ */
.booking-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
    padding: 16px 12px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}
.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 64px;
}
.flow-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.flow-step-icon.done {
    background: var(--primary);
    color: white;
}
.flow-step-icon.current {
    background: var(--secondary);
    color: white;
    box-shadow: 0 0 0 4px rgba(255,143,0,0.2);
    animation: flowPulse 2s infinite;
}
.flow-step-icon.upcoming {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}
@keyframes flowPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,143,0,0.2); }
    50% { box-shadow: 0 0 0 8px rgba(255,143,0,0.1); }
}
.flow-step-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--on-surface-variant);
    text-align: center;
    line-height: 1.2;
}
.flow-arrow {
    color: #CCC;
    font-size: 16px;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ============================================
   Waitlist & Nearby Slots
   ============================================ */
.waitlist-card {
    background: linear-gradient(135deg, #FFF8E1, #FFF3E0);
    border: 1px solid var(--pending);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.nearby-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.nearby-slot {
    padding: 8px 14px;
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--primary);
    font-family: inherit;
}
.nearby-slot:hover {
    background: var(--primary);
    color: white;
}

/* ============================================
   Reschedule Bonus
   ============================================ */
.reschedule-bonus {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-md);
    margin-top: 12px;
    font-size: 13px;
    color: var(--primary-dark);
    cursor: pointer;
    transition: all var(--transition);
}
.reschedule-bonus:hover {
    box-shadow: var(--shadow-sm);
}

/* ============================================
   Security: CSP banner
   ============================================ */
.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #E8F5E9;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 500;
}

/* ============================================
   Access Code Masking
   ============================================ */
.password-masked {
    position: relative;
    cursor: pointer;
}
.password-masked .mask-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    gap: 6px;
    transition: opacity 0.3s;
}

/* ============================================
   Legal screen Requisites
   ============================================ */
.requisites-grid {
    display: grid;
    gap: 12px;
}
.requisite-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
    gap: 12px;
}
.requisite-row:last-child { border-bottom: none; }
.requisite-label {
    font-size: 13px;
    color: var(--on-surface-variant);
    flex-shrink: 0;
    min-width: 80px;
}
.requisite-value {
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* ============================================
   Slots searching animation
   ============================================ */
.slots-searching-anim {
    display: flex;
    gap: 8px;
    align-items: center;
}
.slots-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary, #2e7d32);
    animation: slots-bounce 1.2s ease-in-out infinite;
}
.slots-dot:nth-child(2) { animation-delay: 0.2s; }
.slots-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes slots-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================
   Chat screen — robust layout without :has()
   ============================================ */
.chat-screen {
    display: flex !important;
    flex-direction: column !important;
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    animation: none !important;
}
@media (max-width: 767px) {
    .chat-screen {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: 100svh !important;
        z-index: 1000;
    }
    .chat-screen .chat-input-bar {
        position: relative !important;
        bottom: auto !important;
    }
    html.chat-open { overflow: hidden !important; height: 100% !important; }
    body.chat-open { overflow: hidden !important; position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; }
}
.chat-screen .screen-header {
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--surface);
}
.chat-screen .chat-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.chat-screen .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 12px;
}
.chat-screen .chat-input-bar {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid #E5E7EB;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    z-index: 10;
}

/* Desktop: centered card (cloud) over soft backdrop */
@media (min-width: 768px) {
    .chat-screen {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: 100svh !important;
        z-index: 1000;
        padding: 32px !important;
        background: radial-gradient(1200px 600px at 50% -10%, rgba(46,125,50,0.12), transparent 60%),
                    linear-gradient(180deg, #f3f6f4 0%, #eaf1ec 100%) !important;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
    .chat-screen .screen-header {
        width: min(770px, 100%);
        margin: 0 auto;
        background: transparent;
        padding: 4px 8px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .chat-screen .chat-container {
        width: min(770px, 100%) !important;
        max-width: min(770px, 100%) !important;
        margin: 0 auto !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        box-shadow: 0 24px 60px -20px rgba(24, 50, 30, 0.25),
                    0 8px 24px -12px rgba(24, 50, 30, 0.15) !important;
        border: 1px solid rgba(46, 125, 50, 0.08) !important;
        overflow: hidden !important;
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
    }
    .chat-screen .chat-messages {
        padding: 24px 32px;
        background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    }
    .chat-screen .chat-input-bar {
        padding: 12px 20px;
        border-top: 1px solid #eef2ef;
        background: #ffffff;
    }
    .chat-bubble { max-width: 70% !important; }
}

/* ============================================
   Smooth entrance animations — fast, subtle
   ============================================ */
@keyframes cardPop {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-pop {
    animation: cardPop 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    will-change: transform, opacity;
}
.fade-slide {
    animation: fadeSlide 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Auto-apply to the critical attention-grabbing cards so they slide in,
   not pop. Kept snappy (~220ms) to avoid feeling sluggish. */
.active-booking-card,
.pending-payment-card,
.waitlist-card {
    animation: cardPop 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .card-pop, .fade-slide,
    .active-booking-card, .pending-payment-card, .waitlist-card {
        animation: none !important;
    }
}


/* === Cookie consent banner === */
#igro-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: cookieSlideUp 360ms cubic-bezier(.2,.8,.2,1);
}
#igro-cookie-banner.cookie-banner-hide {
    animation: cookieSlideDown 240ms ease-in forwards;
}
.cookie-banner-card {
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid rgba(46, 125, 50, 0.18);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 16px 18px;
    max-width: 540px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cookie-banner-text {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.55;
}
.cookie-banner-link { background: transparent; border: none; cursor: pointer; padding: 0; font: inherit; 
    color: #2E7D32;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}
.cookie-banner-link:hover { text-decoration: underline; }
.cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cookie-banner-btn {
    flex: 1 1 140px;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s;
    font-family: inherit;
}
.cookie-banner-btn:active { transform: translateY(1px); }
.cookie-banner-accept {
    background: #2E7D32;
    color: #fff;
    box-shadow: 0 4px 12px rgba(46,125,50,.28);
}
.cookie-banner-accept:hover { background: #1B5E20; box-shadow: 0 6px 18px rgba(46,125,50,.36); }
.cookie-banner-reject {
    background: #f1f5f9;
    color: #334155;
}
.cookie-banner-reject:hover { background: #e2e8f0; color: #0f172a; }

@keyframes cookieSlideUp {
    from { transform: translateY(140%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cookieSlideDown {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(120%); opacity: 0; }
}
@media (max-width: 480px) {
    #igro-cookie-banner { left: 8px; right: 8px; bottom: 8px; }
    .cookie-banner-card { padding: 14px 14px; border-radius: 14px; }
    .cookie-banner-text { font-size: 13px; }
}

/* ============================================ */
/* NEOGLASS LOGIN — new.igrorum.ru               */
/* ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.screen-neoglass-login {
    position: fixed; inset: 0; overflow: hidden;
    background: #0e1a12; color: #fff;
    font-family: 'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing: antialiased;
}
.screen-neoglass-login button {
    font-family: inherit; cursor: pointer; border: 0; color: inherit; background: transparent;
}
.screen-neoglass-login input {
    font-family: inherit; outline: none; color: inherit; border: 0;
}

.screen-neoglass-login .ng-bg {
    position: absolute; inset: 0; overflow: hidden; background: #0e1a12;
}
.screen-neoglass-login .ng-blob {
    position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.screen-neoglass-login .ng-b1 { width: 280px; height: 280px; background: var(--neo-accent-2); top: -100px; left: -80px; opacity: .5; }
.screen-neoglass-login .ng-b2 { width: 220px; height: 220px; background: #a3e635; bottom: 200px; right: -60px; opacity: .35; }
.screen-neoglass-login .ng-b3 { width: 300px; height: 300px; background: #16a34a; bottom: -120px; left: 20%; opacity: .45; }
.screen-neoglass-login .ng-grain {
    position: absolute; inset: 0; opacity: .15; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.screen-neoglass-login .lg-visual {
    display: none;
}

.screen-neoglass-login .lg-content {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: 0 auto;
    max-width: 420px;
    padding: max(40px, env(safe-area-inset-top, 0px) + 12px) 22px max(20px, env(safe-area-inset-bottom, 0px) + 8px);
    display: flex; flex-direction: column;
    z-index: 5;
    overflow: hidden;   /* без внутреннего скролла — на iOS он триггерит коллапс адресной строки и блобы прыгают */
    box-sizing: border-box;
}

/* Короткие экраны (типичный мобильный портрет с открытой адресной строкой ~600-720px высоты)
   — компрессуем вертикали, чтобы вся форма вошла без скролла */
@media (max-height: 740px) {
    .screen-neoglass-login .lg-content {
        padding-top: max(28px, env(safe-area-inset-top, 0px) + 8px);
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px) + 4px);
    }
    .screen-neoglass-login .lg-greet {
        font-size: 26px !important;
        margin-bottom: 4px;
    }
    .screen-neoglass-login .lg-sub {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .screen-neoglass-login .lg-stack-cell .lg-social-stack { gap: 8px; }
    .screen-neoglass-login .lg-bottom { margin-top: 10px; font-size: 12px; }
    .screen-neoglass-login .lg-legal { margin-top: 6px; font-size: 11px; }
    .screen-neoglass-login .lg-tagline { margin-top: 2px; font-size: 12px; }
}
@media (max-height: 640px) {
    .screen-neoglass-login .lg-greet { font-size: 22px !important; line-height: 1.05; }
    .screen-neoglass-login .lg-brand { font-size: 10px; }
    .screen-neoglass-login .lg-tagline { display: none; }
}
.screen-neoglass-login .lg-brand {
    font-size: 11px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase;
    color: rgba(255,255,255,.6); text-align: center;
}
.screen-neoglass-login .lg-tagline {
    margin-top: 6px;
    font-size: 13px; font-weight: 600; letter-spacing: 1.6px;
    color: rgba(255,255,255,.78); text-align: center;
}
.screen-neoglass-login .lg-game-orbit {
    display: none;
}
.screen-neoglass-login .lg-greet {
    margin-top: auto;
    color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.05;
    margin-bottom: 6px;
}
.screen-neoglass-login .lg-greet b {
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.screen-neoglass-login .lg-sub {
    color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 22px;
}
.screen-neoglass-login .lg-glass {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    padding: 22px 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.screen-neoglass-login .lg-tabs {
    display: flex; background: rgba(0,0,0,.3); border-radius: 12px; padding: 4px;
    margin-bottom: 14px;
}
.screen-neoglass-login .lg-tabs button {
    flex: 1; padding: 10px; border-radius: 9px; font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,.55); transition: background 150ms, color 150ms;
}
.screen-neoglass-login .lg-tabs button.active {
    background: rgba(255,255,255,.13); color: #fff;
}
.screen-neoglass-login .lg-input {
    width: 100%; background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px; padding: 14px 16px;
    color: #fff; font-size: 15px; margin-bottom: 8px;
    box-sizing: border-box;
}
.screen-neoglass-login .lg-input::placeholder { color: rgba(255,255,255,.4); }
.screen-neoglass-login .lg-input:focus { border-color: rgba(var(--neo-accent-rgb),.5); }
.screen-neoglass-login .lg-error {
    color: #ff7a7a; font-size: 13px; padding: 6px 4px 0; font-weight: 600;
}
.screen-neoglass-login .lg-cta {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    color: #0e1a12; border-radius: 13px;
    font-size: 15px; font-weight: 800; letter-spacing: -.2px;
    margin-top: 6px;
    box-shadow: 0 10px 28px rgba(var(--neo-accent-rgb),.3);
    transition: transform 80ms, box-shadow 150ms;
}
.screen-neoglass-login .lg-cta:active { transform: scale(.98); }
.screen-neoglass-login .lg-cta:disabled { opacity: .6; cursor: wait; }
.screen-neoglass-login .lg-forgot {
    display: block; width: 100%; text-align: center;
    margin-top: 12px; padding: 6px;
    color: rgba(255,255,255,.55); font-size: 13px;
}
.screen-neoglass-login .lg-forgot:hover { color: var(--neo-accent); }
.screen-neoglass-login .lg-bottom {
    text-align: center; margin-top: 16px;
    color: rgba(255,255,255,.7); font-size: 13px;
}
.screen-neoglass-login .lg-bottom a {
    color: var(--neo-accent); font-weight: 800; text-decoration: none; margin-left: 4px; cursor: pointer;
}
.screen-neoglass-login .lg-legal {
    text-align: center; margin-top: auto; padding-top: 18px;
    color: rgba(255,255,255,.4); font-size: 11px;
}
.screen-neoglass-login .lg-legal a {
    color: rgba(255,255,255,.55);
    text-decoration: underline; text-underline-offset: 2px;
    margin: 0 6px; cursor: pointer;
}

/* Социальные кнопки — компактный ряд иконок над glass-карточкой */
.screen-neoglass-login .lg-social {
    display: flex; gap: 12px; justify-content: center;
    margin-bottom: 16px;
}
.screen-neoglass-login .lg-social-btn {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
    transition: transform 100ms ease, background 150ms, border-color 150ms;
    padding: 0;
}
.screen-neoglass-login .lg-social-btn:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(var(--neo-accent-rgb),.3);
}
.screen-neoglass-login .lg-social-btn:active { transform: scale(.94); }
.screen-neoglass-login .lg-social-btn:disabled { opacity: .4; cursor: wait; }
.screen-neoglass-login .lg-social-btn img {
    width: 28px; height: 28px; pointer-events: none;
}
.screen-neoglass-login .lg-divider {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    color: rgba(255,255,255,.4); font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
}
.screen-neoglass-login .lg-divider::before,
.screen-neoglass-login .lg-divider::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,.12);
}

/* Grid-stack — две карточки в одной ячейке, видим одну за раз */
.screen-neoglass-login .lg-stack {
    display: grid;
    grid-template-areas: 'stack';
    align-items: start;
}
.screen-neoglass-login .lg-stack-cell {
    grid-area: stack;
    width: 100%; min-width: 0; box-sizing: border-box;
    transition: opacity 200ms ease, visibility 200ms;
}
.screen-neoglass-login .lg-toggle {
    text-align: center;
    margin: 16px 0 4px;
}
.screen-neoglass-login .lg-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(var(--neo-accent-rgb),.06);
    border: 1px solid rgba(var(--neo-accent-rgb),.4);
    border-radius: 50px;
    color: var(--neo-accent);
    font-size: 13px; font-weight: 700; letter-spacing: -.1px;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, transform 100ms;
    font-family: inherit;
}
.screen-neoglass-login .lg-toggle-btn:hover {
    background: rgba(var(--neo-accent-rgb),.13);
    border-color: rgba(var(--neo-accent-rgb),.65);
}
.screen-neoglass-login .lg-toggle-btn:active { transform: scale(.98); }
.screen-neoglass-login .lg-toggle-arrow {
    font-size: 16px; line-height: 1; opacity: .85;
}

/* Стек официальных соц-виджетов (Yandex SDK / Google / VK OneTap) */
.screen-neoglass-login .lg-social-stack {
    display: flex; flex-direction: column; gap: 10px;
}
.screen-neoglass-login .lg-yandex-shell {
    position: relative;
    width: 100%;
    min-height: 48px;
}
.screen-neoglass-login .lg-yandex-shell > * {
    transition: opacity 180ms ease;
}
.screen-neoglass-login .lg-yandex-shell .lg-social-yandex {
    position: absolute;
    inset: 0;
}
.screen-neoglass-login .lg-yandex-widget {
    position: relative;
    z-index: 1;
}
/* Контейнер для SDK-виджетов — прозрачный, виджет рисует себя сам */
.screen-neoglass-login .lg-social-widget {
    width: 100%;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
/* Google — официальная брендированная кнопка по бренд-гайду Google Identity */
.screen-neoglass-login .lg-social-google {
    width: 100%;
    height: 48px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 14px;
    color: #3c4043;
    font-family: 'Roboto', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .25px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background 150ms, box-shadow 150ms, transform 100ms;
    box-sizing: border-box;
}
.screen-neoglass-login .lg-social-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.screen-neoglass-login .lg-social-google:active { transform: scale(.99); }
.screen-neoglass-login .lg-social-google:disabled { opacity: .5; cursor: wait; }
.screen-neoglass-login .lg-social-google img {
    width: 20px; height: 20px; flex: 0 0 20px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .screen-neoglass-login {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
        overflow: hidden;
    }

    .screen-neoglass-login .ng-bg {
        display: none;
    }

    .screen-neoglass-login .lg-visual {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 100svh;
        padding: 56px;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(8,20,13,0.04) 0%, rgba(8,20,13,0.82) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
    }

    .screen-neoglass-login .lg-visual::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(var(--neo-accent-rgb),0.22), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
        pointer-events: none;
    }

    .screen-neoglass-login .lg-visual::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(26vw, 280px);
        z-index: 2;
        background: linear-gradient(90deg, rgba(14,26,18,0) 0%, rgba(14,26,18,0.30) 58%, #0e1a12 100%);
        pointer-events: none;
    }

    .screen-neoglass-login .lg-visual-copy {
        position: relative;
        z-index: 3;
        max-width: 560px;
        color: #fff;
    }

    .screen-neoglass-login .lg-visual-kicker {
        margin-bottom: 18px;
        color: rgba(255,255,255,0.70);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.28em;
        text-transform: uppercase;
    }

    .screen-neoglass-login .lg-visual-copy h1 {
        margin: 0 0 18px;
        color: #fff;
        font-size: clamp(40px, 5vw, 70px);
        font-weight: 800;
        line-height: 0.98;
        letter-spacing: -0.06em;
    }

    .screen-neoglass-login .lg-visual-copy p {
        max-width: 430px;
        margin: 0;
        color: rgba(255,255,255,0.78);
        font-size: 18px;
        line-height: 1.55;
    }

    .screen-neoglass-login .lg-content {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        min-height: 100svh;
        margin: 0;
        padding: 64px 56px 34px;
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(var(--neo-accent-2-rgb),0.18), transparent 70%),
            linear-gradient(180deg, #0e1a12 0%, #07110b 100%);
    }

    .screen-neoglass-login .lg-content > div[style*="flex:1"] {
        display: none !important;
    }

    .screen-neoglass-login .lg-brand {
        margin-bottom: 22px;
    }

    .screen-neoglass-login .lg-game-orbit {
        position: relative;
        display: block;
        width: min(100%, 520px);
        margin: 14px auto 28px;
        aspect-ratio: 520 / 210;
        min-height: 154px;
        max-height: 230px;
        border-radius: 30px;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(circle at 22% 34%, rgba(var(--neo-accent-rgb),0.16), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(56,189,248,0.10), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border: 1px solid rgba(var(--neo-accent-rgb),0.13);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.08),
            inset 0 -70px 120px rgba(0,0,0,0.24),
            0 26px 70px rgba(0,0,0,0.20);
    }

    .screen-neoglass-login .lg-game-orbit::before,
    .screen-neoglass-login .lg-game-orbit::after,
    .screen-neoglass-login .lg-game-plasma {
        content: '';
        position: absolute;
        inset: -34%;
        pointer-events: none;
        z-index: 0;
    }

    .screen-neoglass-login .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(var(--neo-accent-rgb),0),
                rgba(var(--neo-accent-rgb),0.20),
                rgba(var(--neo-accent-2-rgb),0.05),
                rgba(56,189,248,0.16),
                rgba(var(--neo-accent-rgb),0));
        filter: blur(26px);
        opacity: .74;
        animation: lg-plasma-turn 11s linear infinite;
    }

    .screen-neoglass-login .lg-game-orbit::after {
        inset: 0;
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(7,17,11,0.70), transparent 18%, transparent 82%, rgba(7,17,11,0.70));
        opacity: .7;
        z-index: 1;
    }

    .screen-neoglass-login .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(132,204,22,0.22), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(34,197,94,0.18), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(59,130,246,0.12), transparent 34%);
        filter: blur(24px) saturate(140%);
        opacity: .86;
        animation: lg-plasma-drift 7.5s ease-in-out infinite alternate;
    }

    .screen-neoglass-login .lg-game-svg {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .screen-neoglass-login .lg-game-path {
        fill: none;
        stroke: url(#lg-tennis-line);
        stroke-width: 3.4;
        stroke-linecap: round;
        filter: url(#lg-tennis-glow);
    }

    .screen-neoglass-login .lg-game-path-ghost {
        stroke: rgba(255,255,255,0.42);
        stroke-width: 1.2;
        stroke-dasharray: 8 18;
        filter: none;
        opacity: .36;
        animation: lg-orbit-dash 8s linear infinite;
    }

    .screen-neoglass-login .lg-game-racket {
        fill: rgba(255,255,255,0.06);
        stroke: rgba(var(--neo-accent-rgb),0.52);
        stroke-width: 3;
        stroke-linecap: round;
        filter: drop-shadow(0 0 12px rgba(var(--neo-accent-rgb),0.24));
    }

    .screen-neoglass-login .lg-game-racket-left {
        transform-origin: 82px 136px;
        animation: lg-racket-left 4.8s ease-in-out infinite;
    }

    .screen-neoglass-login .lg-game-racket-right {
        transform-origin: 438px 132px;
        animation: lg-racket-right 4.8s ease-in-out infinite;
    }

    .screen-neoglass-login .lg-game-ball-halo {
        fill: rgba(var(--neo-accent-rgb),0.22);
        filter: blur(5px);
    }

    .screen-neoglass-login .lg-game-ball {
        fill: url(#lg-tennis-ball);
        stroke: rgba(255,255,255,0.82);
        stroke-width: 1.5;
        filter: drop-shadow(0 0 10px rgba(var(--neo-accent-rgb),0.95));
    }

    .screen-neoglass-login .lg-greet {
        margin-top: auto;
    }

    .screen-neoglass-login .lg-brand,
    .screen-neoglass-login .lg-greet,
    .screen-neoglass-login .lg-sub,
    .screen-neoglass-login .lg-stack,
    .screen-neoglass-login .lg-toggle,
    .screen-neoglass-login .lg-bottom {
        width: min(100%, 420px);
        margin-left: auto;
        margin-right: auto;
    }

    .screen-neoglass-login .lg-legal {
        margin-top: auto;
    }
}

@keyframes lg-plasma-turn {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.04); }
}

@keyframes lg-plasma-drift {
    from { transform: translate3d(-3%, 2%, 0) scale(1); }
    to { transform: translate3d(4%, -3%, 0) scale(1.08); }
}

@keyframes lg-orbit-dash {
    to { stroke-dashoffset: -104; }
}

@keyframes lg-racket-left {
    0%, 100% { transform: rotate(8deg) translateY(-2px); }
    6%, 48%, 92% { transform: rotate(-10deg); }
}

@keyframes lg-racket-right {
    0%, 44%, 56%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(-8deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .screen-neoglass-login .lg-game-orbit::before,
    .screen-neoglass-login .lg-game-plasma,
    .screen-neoglass-login .lg-game-path-ghost,
    .screen-neoglass-login .lg-game-racket-left,
    .screen-neoglass-login .lg-game-racket-right {
        animation: none;
    }
}

/* ============================================ */
/* Register / Recovery / общие auth-блоки         */
/* ============================================ */

.screen-neoglass-login .lg-top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
}
.screen-neoglass-login .lg-icon-btn {
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer;
    transition: background 150ms;
}
.screen-neoglass-login .lg-icon-btn:hover { background: rgba(255,255,255,.14); }
.screen-neoglass-login .lg-top-title {
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85);
}

.screen-neoglass-login .lg-step-bar {
    display: flex; gap: 6px; margin: 6px 0 18px;
}
.screen-neoglass-login .lg-step-bar i {
    flex: 1; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.1);
    transition: background 250ms;
}
.screen-neoglass-login .lg-step-bar i.done { background: var(--neo-accent); }
.screen-neoglass-login .lg-step-bar i.active { background: linear-gradient(90deg, var(--neo-accent), var(--neo-accent-2)); }

.screen-neoglass-login .lg-h1 {
    font-size: 24px; font-weight: 800; letter-spacing: -.6px;
    line-height: 1.1; margin-bottom: 4px; color: #fff;
}
.screen-neoglass-login .lg-step-sub {
    font-size: 13px; color: rgba(255,255,255,.6);
    margin-bottom: 18px;
}

.screen-neoglass-login .lg-field {
    margin-bottom: 10px;
    padding: 12px 14px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    transition: border-color 150ms;
}
.screen-neoglass-login .lg-field:focus-within { border-color: rgba(var(--neo-accent-rgb),.5); }
.screen-neoglass-login .lg-field .lbl {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: rgba(255,255,255,.5);
    margin-bottom: 4px;
}
.screen-neoglass-login .lg-field input,
.screen-neoglass-login .lg-field textarea {
    width: 100%; background: transparent; color: #fff;
    font-size: 15px; font-weight: 600; padding: 0;
}
.screen-neoglass-login .lg-field input::placeholder { color: rgba(255,255,255,.3); }

.screen-neoglass-login .lg-disclaimer {
    font-size: 12px; color: rgba(255,255,255,.5);
    line-height: 1.5; padding: 14px 4px 0;
}
.screen-neoglass-login .lg-disclaimer a {
    color: var(--neo-accent); font-weight: 700; text-decoration: none;
}

.screen-neoglass-login .lg-cta-row { margin-top: 18px; }

.screen-neoglass-login .lg-checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 4px;
    cursor: pointer;
}
.screen-neoglass-login .lg-checkbox-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 6px;
    background: rgba(0,0,0,.25);
    cursor: pointer;
    flex: 0 0 20px; margin-top: 2px;
    transition: background 150ms, border-color 150ms;
    position: relative;
}
.screen-neoglass-login .lg-checkbox-row input[type="checkbox"]:checked {
    background: var(--neo-accent); border-color: var(--neo-accent);
}
.screen-neoglass-login .lg-checkbox-row input[type="checkbox"]:checked::after {
    content: '✓'; position: absolute; inset: 0;
    color: #0e1a12; font-weight: 800; font-size: 14px; line-height: 17px;
    text-align: center;
}
.screen-neoglass-login .lg-checkbox-row span {
    font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.45;
}
.screen-neoglass-login .lg-checkbox-row a {
    color: var(--neo-accent); text-decoration: underline; cursor: pointer;
}

.screen-neoglass-login .lg-info-card {
    margin-top: 12px; padding: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    text-align: center;
}
.screen-neoglass-login .lg-info-card .spinner {
    width: 34px; height: 34px;
    background: var(--neo-accent);
    border: 0;
    margin: 0 auto 12px;
    animation: spin-morph 2.0s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }
.screen-neoglass-login .lg-info-card .t {
    font-size: 15px; font-weight: 700; margin-bottom: 4px;
}
.screen-neoglass-login .lg-info-card .big {
    font-size: 22px; font-weight: 800; color: var(--neo-accent);
    margin: 8px 0; display: block; text-decoration: none;
    letter-spacing: -.5px;
}
.screen-neoglass-login .lg-info-card .s {
    font-size: 13px; color: rgba(255,255,255,.6);
}
.screen-neoglass-login .lg-info-card .accent {
    color: var(--neo-accent); font-weight: 700; margin-top: 8px;
}

.screen-neoglass-login .lg-back-link {
    text-align: center; margin-top: 16px;
}
.screen-neoglass-login .lg-back-link a {
    color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}

/* Recovery — иконка-замок и success-check */
.screen-neoglass-login .lg-recv-icon {
    width: 84px; height: 84px; border-radius: 24px;
    margin: 14px auto 16px;
    background: rgba(var(--neo-accent-rgb),.12);
    border: 1px solid rgba(var(--neo-accent-rgb),.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--neo-accent);
    font-size: 40px;
}
.screen-neoglass-login .lg-success-check {
    width: 84px; height: 84px; border-radius: 50%;
    margin: 20px auto 16px;
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    font-size: 44px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 40px rgba(var(--neo-accent-rgb),.4);
}

/* Tabs/chips для выбора метода */
.screen-neoglass-login .lg-chip-group {
    display: flex; gap: 8px; margin-bottom: 12px;
}
.screen-neoglass-login .lg-chip {
    flex: 1; padding: 10px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: rgba(255,255,255,.65);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
}
.screen-neoglass-login .lg-chip.active {
    background: rgba(var(--neo-accent-rgb),.15);
    border-color: rgba(var(--neo-accent-rgb),.5);
    color: var(--neo-accent);
}

/* ============================================ */
/* NEOGLASS APP SCREENS (Home, Booking, etc.)    */
/* ============================================ */

.screen-neoglass-app {
    position: fixed; inset: 0;
    background: #0e1a12; color: #fff;
    overflow-y: auto; overflow-x: hidden;
    font-family: 'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing: antialiased;
}
.screen-neoglass-app .ng-bg-fixed {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.screen-neoglass-app .ng-bg-fixed .ng-blob {
    position: absolute; border-radius: 50%; filter: blur(50px);
}
.screen-neoglass-app .ng-bg-fixed .ng-b1 { width: 280px; height: 280px; background: var(--neo-accent-2); top: -100px; left: -80px; opacity: .35; }
.screen-neoglass-app .ng-bg-fixed .ng-b2 { width: 220px; height: 220px; background: var(--neo-accent); top: 40%; right: -60px; opacity: .25; }
.screen-neoglass-app .ng-bg-fixed .ng-b3 { width: 300px; height: 300px; background: var(--neo-accent-2); bottom: -120px; left: 20%; opacity: .3; }
.screen-neoglass-app button {
    font-family: inherit; cursor: pointer; border: 0; color: inherit; background: transparent;
}
.screen-neoglass-app .page {
    position: relative; z-index: 5;
    padding: 16px 16px 110px;
    max-width: 480px; margin: 0 auto;
    box-sizing: border-box;
}

body:has(.screen-neoglass-app) .bottom-nav {
    background:
        linear-gradient(180deg, rgba(18, 36, 24, .92), rgba(8, 17, 11, .96)),
        radial-gradient(180px 180px at 20% 10%, rgba(190, 242, 100, .18), transparent 72%);
    border-color: rgba(190, 242, 100, .16);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .38);
    backdrop-filter: blur(22px);
}
body:has(.screen-neoglass-app) .nav-item {
    color: rgba(255, 255, 255, .58);
    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}
body:has(.screen-neoglass-app) .nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
body:has(.screen-neoglass-app) .nav-item.active {
    color: var(--neo-accent);
    background:
        linear-gradient(135deg, rgba(190, 242, 100, .18), rgba(74, 222, 128, .08));
    box-shadow: inset 0 0 0 1px rgba(190, 242, 100, .28);
}

@media (min-width: 1024px) {
    body:has(.screen-neoglass-app) .bottom-nav {
        padding: 34px 14px;
        border-right-color: rgba(190, 242, 100, .16);
        box-shadow: 18px 0 70px rgba(0, 0, 0, .34);
    }
    body:has(.screen-neoglass-app) .bottom-nav::before {
        content: "ИГРОРУМ";
        display: block;
        margin: 0 10px 26px;
        color: rgba(255, 255, 255, .55);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 4px;
        text-transform: uppercase;
    }
    body:has(.screen-neoglass-app) .nav-item {
        min-height: 48px;
        border: 1px solid transparent;
    }
    body:has(.screen-neoglass-app) .nav-item:hover {
        transform: translateX(2px);
        border-color: rgba(255, 255, 255, .08);
    }
    body:has(.screen-neoglass-app) .nav-item.active {
        border-color: rgba(190, 242, 100, .22);
    }
    body:has(.screen-neoglass-app) .nav-item .mi {
        color: currentColor;
    }
}

/* Home — приветствие */
.screen-neoglass-app .ng-greet {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 4px 10px;
}
.screen-neoglass-app .ng-greet h1 {
    font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 0;
}
.screen-neoglass-app .ng-icon-btn {
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; position: relative;
}
.screen-neoglass-app .ng-badge {
    position: absolute; top: -3px; right: -3px;
    background: #ef4444; color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 2px 5px; border-radius: 50px;
    border: 2px solid #0e1a12;
}

/* Hero-card — баннер «Забронировать» */
.screen-neoglass-app .ng-hero-card {
    margin-top: 12px; padding: 20px;
    border-radius: 24px; position: relative; overflow: hidden;
    background:
        linear-gradient(135deg, rgba(var(--neo-accent-rgb),.18), rgba(var(--neo-accent-2-rgb),.05)),
        radial-gradient(circle at 80% 0%, rgba(var(--neo-accent-rgb),.3), transparent 50%);
    border: 1px solid rgba(var(--neo-accent-rgb),.3);
    cursor: pointer;
}
.screen-neoglass-app .ng-hero-pill {
    display: inline-block;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 50px;
    background: rgba(var(--neo-accent-rgb),.2); color: var(--neo-accent);
    margin-bottom: 8px;
}
.screen-neoglass-app .ng-hero-h {
    font-size: 24px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1;
}
.screen-neoglass-app .ng-hero-s {
    font-size: 13px; color: rgba(255,255,255,.65); margin-top: 6px;
}
.screen-neoglass-app .ng-hero-prices {
    display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap;
}
.screen-neoglass-app .ng-hero-prices .p {
    font-size: 11px; font-weight: 700;
    padding: 5px 10px; border-radius: 50px;
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
}
.screen-neoglass-app .ng-hero-prices .p b { color: var(--neo-accent); }
.screen-neoglass-app .ng-hero-cta {
    margin-top: 14px; width: 100%; padding: 13px;
    background: #0e1a12; color: var(--neo-accent);
    border: 1px solid rgba(var(--neo-accent-rgb),.4);
    border-radius: 14px; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Pending payment card */
.screen-neoglass-app .ng-pending-card {
    margin-top: 12px; padding: 16px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 18px;
    position: relative;
}
.screen-neoglass-app .ng-pending-card .ng-pending-close {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.screen-neoglass-app .ng-pending-card .ng-pending-label {
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: #f59e0b; margin-bottom: 6px;
}
.screen-neoglass-app .ng-pending-card .ng-pending-detail {
    font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 10px;
}
.screen-neoglass-app .ng-pending-card .ng-pending-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.screen-neoglass-app .ng-pending-card .ng-pending-timer {
    font-size: 13px; color: rgba(255,255,255,.7);
}
.screen-neoglass-app .ng-pending-card .ng-pending-timer.urgent { color: #f87171; }
.screen-neoglass-app .ng-pending-card .ng-pay-btn {
    padding: 10px 16px; border-radius: 12px;
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    color: #0e1a12; font-weight: 800; font-size: 13px;
}

/* Subscription promo */
.screen-neoglass-app .ng-sub-promo {
    margin-top: 12px; padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
}
.screen-neoglass-app .ng-sub-promo .lbl {
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.screen-neoglass-app .ng-sub-promo .lbl::before {
    content: '★'; color: var(--neo-accent); font-size: 14px;
}
.screen-neoglass-app .ng-sub-promo .row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.screen-neoglass-app .ng-sub-promo .t { font-size: 14px; font-weight: 700; }
.screen-neoglass-app .ng-sub-promo .s {
    font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.4;
}
.screen-neoglass-app .ng-sub-promo .price {
    font-size: 22px; font-weight: 800; color: var(--neo-accent); line-height: 1;
}
.screen-neoglass-app .ng-sub-promo .perh {
    font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; text-align: right;
}
.screen-neoglass-app .ng-sub-promo .cta {
    margin-top: 12px; width: 100%; padding: 11px;
    background: rgba(var(--neo-accent-rgb),.12); color: var(--neo-accent);
    border: 1px solid rgba(var(--neo-accent-rgb),.25); border-radius: 12px;
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Active booking */
.screen-neoglass-app .ng-active-bk {
    margin-top: 12px; padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--neo-accent-rgb),.15), rgba(var(--neo-accent-2-rgb),.04));
    border: 1px solid rgba(var(--neo-accent-rgb),.25);
}
.screen-neoglass-app .ng-active-bk .pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 50px;
    background: rgba(var(--neo-accent-rgb),.2); color: var(--neo-accent);
    margin-bottom: 8px;
}
.screen-neoglass-app .ng-active-bk .pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--neo-accent); animation: ng-pulse 1.5s infinite;
}
@keyframes ng-pulse { 50% { opacity: .3; } }
.screen-neoglass-app .ng-active-bk .when {
    font-size: 18px; font-weight: 800; letter-spacing: -.3px;
}
.screen-neoglass-app .ng-active-bk .meta {
    font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px;
}
.screen-neoglass-app .ng-active-bk .actions {
    display: flex; gap: 8px; margin-top: 14px;
}
.screen-neoglass-app .ng-active-bk .door-btn {
    flex: 1; padding: 12px;
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    color: #0e1a12; font-weight: 800; font-size: 13px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.screen-neoglass-app .ng-active-bk .ext-btn {
    padding: 12px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-weight: 700; font-size: 13px;
    border-radius: 12px;
    display: flex; align-items: center; gap: 6px;
}

/* Quick actions grid */
.screen-neoglass-app .ng-qa-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.screen-neoglass-app .ng-qa {
    padding: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.screen-neoglass-app .ng-qa .ico {
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(var(--neo-accent-rgb),.15); color: var(--neo-accent);
    display: flex; align-items: center; justify-content: center;
}
.screen-neoglass-app .ng-qa .lbl { font-size: 13px; font-weight: 700; }

/* Section heading */
.screen-neoglass-app .ng-section-h {
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin: 18px 4px 8px;
}

/* Upcoming bookings list */
.screen-neoglass-app .ng-up-card {
    margin-top: 8px; padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
}
.screen-neoglass-app .ng-up-card .ico {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(var(--neo-accent-rgb),.15); color: var(--neo-accent);
    display: flex; align-items: center; justify-content: center;
}
.screen-neoglass-app .ng-up-card .body { flex: 1; }
.screen-neoglass-app .ng-up-card .body .t { font-size: 14px; font-weight: 700; }
.screen-neoglass-app .ng-up-card .body .s {
    font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px;
}
.screen-neoglass-app .ng-up-card .price {
    font-size: 14px; font-weight: 800; color: var(--neo-accent);
}

/* Extend dialog (overlay) */
.screen-neoglass-app .ng-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.screen-neoglass-app .ng-dialog {
    background: rgba(20,30,22,.95);
    border: 1px solid rgba(var(--neo-accent-rgb),.25);
    border-radius: 22px; padding: 22px;
    max-width: 420px; width: 100%;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.screen-neoglass-app .ng-dialog h3 {
    font-size: 18px; font-weight: 800; margin-bottom: 8px;
}
.screen-neoglass-app .ng-dialog .sub {
    font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 14px;
}
.screen-neoglass-app .ng-extend-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.screen-neoglass-app .ng-extend-opt {
    padding: 12px; border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.screen-neoglass-app .ng-extend-opt.on {
    background: rgba(var(--neo-accent-rgb),.15);
    border-color: rgba(var(--neo-accent-rgb),.5);
}
.screen-neoglass-app .ng-extend-opt .ll { font-size: 14px; font-weight: 700; }
.screen-neoglass-app .ng-extend-opt .pp { font-size: 12px; color: var(--neo-accent); }
.screen-neoglass-app .ng-dialog-actions {
    display: flex; gap: 10px; margin-top: 12px;
}
.screen-neoglass-app .ng-dialog-cancel {
    flex: 1; padding: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff; font-weight: 700; font-size: 13px;
    border-radius: 12px;
}
.screen-neoglass-app .ng-dialog-pay {
    flex: 1; padding: 12px;
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    color: #0e1a12; font-weight: 800; font-size: 13px;
    border-radius: 12px;
}

/* Booking — top bar + steps bar */
.screen-neoglass-app .ng-screen-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 4px 12px;
}
.screen-neoglass-app .ng-screen-title {
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85);
}
.screen-neoglass-app .ng-steps-bar {
    display: flex; gap: 6px; margin: 4px 0 6px;
}
.screen-neoglass-app .ng-steps-bar i {
    flex: 1; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.1);
    transition: background 250ms;
}
.screen-neoglass-app .ng-steps-bar i.done { background: var(--neo-accent); }
.screen-neoglass-app .ng-steps-bar i.active {
    background: linear-gradient(90deg, var(--neo-accent), var(--neo-accent-2));
}
.screen-neoglass-app .ng-step-labels {
    display: flex; justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 14px;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .8px;
}
.screen-neoglass-app .ng-step-labels span {
    flex: 1; text-align: center;
}
.screen-neoglass-app .ng-step-labels span.on { color: var(--neo-accent); }

/* Booking content — полная адаптация internal компонентов под neoglass dark */
.screen-neoglass-app .ng-booking-content { background: transparent; }

.screen-neoglass-app .step-back-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    cursor: pointer;
}
.screen-neoglass-app .step-back-btn:hover { background: rgba(255,255,255,.12); }
.screen-neoglass-app .step-title {
    font-size: 22px; font-weight: 800; letter-spacing: -.5px;
    color: #fff; margin-bottom: 14px;
}

/* Step-content внутри booking — прозрачный (был var(--surface-card) = white) */
.screen-neoglass-app .step-content,
.screen .step-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
}
.screen-neoglass-app .booking-step,
.screen .booking-step {
    background: transparent !important;
}

/* Calendar — neoglass dark */
.screen-neoglass-app .calendar,
.screen .calendar {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.screen-neoglass-app .calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; color: #fff;
}
.screen-neoglass-app .calendar-header h3 {
    font-size: 16px; font-weight: 700; color: #fff; margin: 0;
}
.screen-neoglass-app .calendar-nav {
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.screen-neoglass-app .calendar-nav:hover { background: rgba(255,255,255,.15); }
.screen-neoglass-app .calendar-weekdays {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 4px;
    margin-bottom: 6px;
}
.screen-neoglass-app .calendar-weekdays span {
    text-align: center;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.45);
    text-transform: uppercase; letter-spacing: .8px;
    padding: 4px 0;
}
.screen-neoglass-app .calendar-days {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 4px;
}
.screen-neoglass-app .calendar-day,
.screen .calendar-day {
    aspect-ratio: 1 !important;
    border: 0 !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center; justify-content: center;
    transition: background 150ms, transform 100ms;
}
.screen-neoglass-app .calendar-day:hover:not(.disabled):not(.empty),
.screen .calendar-day:hover:not(.disabled):not(.empty) {
    background: rgba(var(--neo-accent-rgb),.22) !important;
    color: #fff !important;
}
.screen-neoglass-app .calendar-day.today,
.screen .calendar-day.today {
    border: 2px solid rgba(var(--neo-accent-rgb),.6) !important;
    background: rgba(var(--neo-accent-rgb),.12) !important;
    color: var(--neo-accent) !important;
}
.screen-neoglass-app .calendar-day.selected,
.screen .calendar-day.selected {
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2)) !important;
    color: #0e1a12 !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 20px rgba(var(--neo-accent-rgb),.4);
    border: 0 !important;
}
.screen-neoglass-app .calendar-day.disabled,
.screen .calendar-day.disabled {
    color: rgba(255,255,255,.35) !important;
    cursor: default;
    background: rgba(255,255,255,.02) !important;
}
.screen-neoglass-app .calendar-day.empty,
.screen .calendar-day.empty {
    background: transparent !important;
    cursor: default;
}

/* Time picker — neoglass dark — компактная сетка без скролла (2026-05-13, fix 2026-05-14) */
.screen-neoglass-app .time-picker-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
    margin-top: 10px;
    /* перебиваем legacy max-height:200px + overflow-y:auto из базового правила */
    max-height: none;
    overflow: visible;
}
.screen-neoglass-app .time-option {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    padding: 10px 4px;
    border-radius: 10px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    min-width: 0;
    text-align: center;
    transition: background 150ms, border-color 150ms;
}
.screen-neoglass-app .time-option:hover {
    background: rgba(var(--neo-accent-rgb),.15);
    border-color: rgba(var(--neo-accent-rgb),.4);
}
.screen-neoglass-app .time-option.selected {
    background: linear-gradient(135deg,var(--neo-accent),var(--neo-accent-2));
    color: #0e1a12; border-color: var(--neo-accent);
    box-shadow: 0 6px 20px rgba(var(--neo-accent-rgb),.4);
}

/* Duration options — neoglass dur-grid */
.screen-neoglass-app .duration-options {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 8px;
    margin-top: 8px;
}
.screen-neoglass-app .duration-option {
    padding: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    transition: background 200ms, border-color 200ms;
}
.screen-neoglass-app .duration-option:hover {
    background: rgba(var(--neo-accent-rgb),.10);
    border-color: rgba(var(--neo-accent-rgb),.3);
}
.screen-neoglass-app .duration-option.selected {
    background: rgba(var(--neo-accent-rgb),.18);
    border-color: rgba(var(--neo-accent-rgb),.5);
}
.screen-neoglass-app .duration-option .duration-label {
    font-size: 16px; font-weight: 800; color: #fff;
}
.screen-neoglass-app .duration-option .duration-price {
    font-size: 13px; font-weight: 700; color: var(--neo-accent);
}
.screen-neoglass-app .duration-option.selected .duration-label,
.screen-neoglass-app .duration-option.selected .duration-price {
    color: #fff;
}
.screen-neoglass-app .duration-option.selected .duration-price { color: var(--neo-accent); }

/* Booking summary — neoglass card */
.screen-neoglass-app .booking-summary-compact {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; padding: 16px;
    margin-top: 8px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.screen-neoglass-app .booking-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.screen-neoglass-app .booking-summary-row:last-child { border-bottom: 0; }
.screen-neoglass-app .booking-summary-row .label {
    color: rgba(255,255,255,.6); font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.screen-neoglass-app .booking-summary-row .value {
    color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; gap: 6px;
}
.screen-neoglass-app .booking-summary-row.total {
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.15); border-bottom: 0;
}
.screen-neoglass-app .booking-summary-row.total .label {
    color: #fff; font-weight: 700; font-size: 15px;
}
.screen-neoglass-app .booking-summary-row.total .value {
    color: var(--neo-accent); font-size: 22px; font-weight: 800;
}

/* .card внутри booking — заменяем на glass */
.screen-neoglass-app .ng-booking-content .card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 16px;
    box-shadow: none;
}
.screen-neoglass-app .ng-booking-content .card .body-sm,
.screen-neoglass-app .ng-booking-content .card .body-md {
    color: rgba(255,255,255,.7);
}
.screen-neoglass-app .ng-booking-content .text-muted { color: rgba(255,255,255,.55); }
.screen-neoglass-app .ng-booking-content .text-error { color: #f87171; }

/* Promo input */
.screen-neoglass-app .ng-booking-content .input-field,
.screen-neoglass-app .ng-booking-content input[type="text"] {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}
.screen-neoglass-app .ng-booking-content input[type="text"]::placeholder {
    color: rgba(255,255,255,.35);
}

.screen .ng-access-info-card,
.screen-neoglass-app .ng-access-info-card {
    background: rgba(var(--neo-accent-rgb),.08) !important;
    border: 1px solid rgba(var(--neo-accent-rgb),.28) !important;
    color: #fff !important;
}
.screen .ng-access-info-card .label-lg,
.screen-neoglass-app .ng-access-info-card .label-lg {
    color: var(--neo-accent) !important;
}
.screen .ng-access-info-card .body-sm,
.screen .ng-access-info-card li,
.screen-neoglass-app .ng-access-info-card .body-sm,
.screen-neoglass-app .ng-access-info-card li {
    color: rgba(255,255,255,.78) !important;
}
.screen .ng-access-info-card a,
.screen-neoglass-app .ng-access-info-card a {
    color: var(--neo-accent) !important;
}

/* Waitlist + nearby slots */
.screen-neoglass-app .waitlist-card {
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    color: #fff;
    border-radius: 14px;
    padding: 14px;
}
.screen-neoglass-app .nearby-slots {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.screen-neoglass-app .nearby-slot {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
}
.screen-neoglass-app .nearby-slot:hover {
    background: rgba(var(--neo-accent-rgb),.15);
    border-color: rgba(var(--neo-accent-rgb),.4);
}

/* Slots loading dots */
.screen-neoglass-app .slots-dot {
    background: var(--neo-accent) !important;
}

/* Price badge */
.screen-neoglass-app .price-badge {
    background: rgba(var(--neo-accent-rgb),.18) !important;
    color: var(--neo-accent) !important;
    border: 1px solid rgba(var(--neo-accent-rgb),.3);
}

/* ===== Общие text/cards overrides под dark theme ===== */
.screen-neoglass-app .headline-md,
.screen-neoglass-app .headline-sm,
.screen-neoglass-app .title-lg,
.screen-neoglass-app .title-md,
.screen-neoglass-app .label-lg,
.screen-neoglass-app .label-md,
.screen-neoglass-app h1,
.screen-neoglass-app h2,
.screen-neoglass-app h3 {
    color: #fff;
}
.screen-neoglass-app .body-md,
.screen-neoglass-app .body-sm,
.screen-neoglass-app p {
    color: rgba(255,255,255,.78);
}
.screen-neoglass-app .text-muted {
    color: rgba(255,255,255,.55) !important;
}
.screen-neoglass-app .text-primary {
    color: var(--neo-accent) !important;
}
.screen-neoglass-app .text-error,
.screen-neoglass-app .body-sm.text-error {
    color: #f87171 !important;
}

/* Generic card на dark */
.screen-neoglass-app .card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 16px;
    box-shadow: none;
}

/* ===== History screen ===== */
.screen-neoglass-app .ng-history-page {
    padding-bottom: 112px;
}
.screen-neoglass-app .ng-history-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #fff;
}
.screen-neoglass-app .ng-history-tabs {
    padding: 4px;
    margin: 10px 0 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
}
.screen-neoglass-app .ng-history-tabs .chip {
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: rgba(255,255,255,.56);
    font-weight: 800;
}
.screen-neoglass-app .ng-history-tabs .chip.active {
    background:
        linear-gradient(135deg, rgba(var(--neo-accent-rgb),.22), rgba(var(--neo-accent-2-rgb),.10));
    color: var(--neo-accent);
    box-shadow: inset 0 0 0 1px rgba(var(--neo-accent-rgb),.28);
}
.screen-neoglass-app .ng-history-clear {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 12px;
}
.screen-neoglass-app .ng-history-clear-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.screen-neoglass-app .ng-history-clear .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 11px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.68);
    font-size: 13px;
    font-weight: 800;
}
.screen-neoglass-app .ng-history-clear .btn-text.danger {
    background: rgba(248,113,113,.10);
    border-color: rgba(248,113,113,.34);
    color: #fca5a5;
}
.screen-neoglass-app .ng-history-card {
    align-items: center;
    gap: 14px;
    padding: 15px;
    margin-bottom: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: none;
    color: #fff;
}
.screen-neoglass-app .ng-history-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--neo-accent-rgb),.26);
    box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.screen-neoglass-app .ng-history-card .booking-icon {
    flex: 0 0 auto;
    background: rgba(var(--neo-accent-rgb),.13);
    border: 1px solid rgba(var(--neo-accent-rgb),.24);
    box-shadow: inset 0 0 20px rgba(var(--neo-accent-rgb),.06);
}
.screen-neoglass-app .ng-history-card .booking-icon .mi {
    color: var(--neo-accent);
}
.screen-neoglass-app .ng-history-card .booking-info .date {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.screen-neoglass-app .ng-history-card .booking-info .time {
    color: rgba(255,255,255,.56);
    margin-top: 3px;
}
.screen-neoglass-app .ng-history-card .booking-price {
    color: var(--neo-accent);
    font-size: 16px;
    font-weight: 900;
}
.screen-neoglass-app .ng-history-card-side {
    text-align: right;
}
.screen-neoglass-app .ng-history-card .status-chip {
    margin-top: 7px;
    border: 1px solid transparent;
}
.screen-neoglass-app .ng-history-card .status-chip.paid {
    background: rgba(var(--neo-accent-rgb),.14);
    border-color: rgba(var(--neo-accent-rgb),.28);
    color: var(--neo-accent);
}
.screen-neoglass-app .ng-history-card .status-chip.active {
    background: rgba(96,165,250,.14);
    border-color: rgba(96,165,250,.28);
    color: #93c5fd;
}
.screen-neoglass-app .ng-history-card .status-chip.pending {
    background: rgba(251,191,36,.14);
    border-color: rgba(251,191,36,.30);
    color: #fcd34d;
}
.screen-neoglass-app .ng-history-card .status-chip.cancelled {
    background: rgba(248,113,113,.13);
    border-color: rgba(248,113,113,.30);
    color: #fca5a5;
}
.screen-neoglass-app .ng-history-card .status-chip.completed {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.11);
    color: rgba(255,255,255,.68);
}
.screen-neoglass-app .ng-history-empty {
    margin-top: 56px;
    padding: 36px 24px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
}
.screen-neoglass-app .ng-history-empty .mi {
    color: rgba(var(--neo-accent-rgb),.35);
}

@media (max-width: 420px) {
    .screen-neoglass-app .ng-history-card {
        align-items: flex-start;
    }
    .screen-neoglass-app .ng-history-card-side {
        min-width: 82px;
    }
}

/* ===== Profile screen ===== */
.screen-neoglass-app .profile-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 32px;
    margin: 14px auto 8px;
    box-shadow: 0 10px 24px rgba(var(--neo-accent-rgb),.3);
}
.screen-neoglass-app .profile-actions {
    margin-top: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
}
.screen-neoglass-app .profile-action,
.screen-neoglass-app .profile-actions > button,
.screen-neoglass-app .profile-actions > a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; width: 100%;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 14px; font-weight: 600;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.screen-neoglass-app .profile-action + .profile-action,
.screen-neoglass-app .profile-actions > button + button,
.screen-neoglass-app .profile-actions > a + a {
    border-top: 1px solid rgba(255,255,255,.06);
}
.screen-neoglass-app .profile-action:hover,
.screen-neoglass-app .profile-actions > button:hover {
    background: rgba(255,255,255,.05);
}

/* Public ID copy chip */
.screen-neoglass-app [style*="surface-2"],
.screen-neoglass-app [style*="background:var(--surface-2"] {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

/* Toggle/switch styling в Profile (push notifications) */
.screen-neoglass-app .toggle-switch,
.screen-neoglass-app .switch {
    background: rgba(0,0,0,.25) !important;
    border-color: rgba(255,255,255,.1) !important;
}

/* Inputs внутри edit-режима Profile */
.screen-neoglass-app input[type="text"],
.screen-neoglass-app input[type="email"],
.screen-neoglass-app input[type="tel"],
.screen-neoglass-app input[type="password"],
.screen-neoglass-app textarea {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
}
.screen-neoglass-app input::placeholder,
.screen-neoglass-app textarea::placeholder {
    color: rgba(255,255,255,.35);
}

/* Buttons общие */
.screen-neoglass-app .btn,
.screen-neoglass-app .btn-primary {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    font-weight: 800;
    border-radius: 14px;
    border: 0;
    box-shadow: 0 10px 28px rgba(var(--neo-accent-rgb),.3);
}
.screen-neoglass-app .btn-outline {
    background: rgba(var(--neo-accent-rgb),.06);
    color: var(--neo-accent);
    border: 1px solid rgba(var(--neo-accent-rgb),.4);
}
.screen-neoglass-app .btn-text {
    background: transparent;
    color: var(--neo-accent);
}
.screen-neoglass-app .btn-icon {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: none !important;
    color: #fff;
}

/* Logout button (опасное действие — красным) */
.screen-neoglass-app .btn-danger,
.screen-neoglass-app .btn-logout,
.screen-neoglass-app button[onClick*="logout"] {
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.25);
    color: #fca5a5;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: none;
}

/* Surface variants */
.screen-neoglass-app [class*="surface"] {
    background: rgba(255,255,255,.05);
    color: #fff;
}

/* Overlay/dialog (delete account confirm) */
.screen-neoglass-app .overlay {
    background: rgba(0,0,0,.65);
}
.screen-neoglass-app .dialog {
    background: rgba(20,30,22,.95);
    border: 1px solid rgba(var(--neo-accent-rgb),.25);
    color: #fff;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.screen-neoglass-app .dialog h3 { color: #fff; }
.screen-neoglass-app .dialog .body-sm,
.screen-neoglass-app .dialog .body-md { color: rgba(255,255,255,.7); }

/* ===== Chat screen ===== */
.screen-neoglass-app.chat-screen {
    background: #0e1a12 !important;
    color: #fff;
}
.screen-neoglass-app.chat-screen .ng-bg-fixed {
    z-index: 0;
}
.screen-neoglass-app.chat-screen .ng-chat-header,
.screen-neoglass-app.chat-screen .chat-container {
    position: relative;
    z-index: 5;
}
.screen-neoglass-app.chat-screen .ng-chat-header {
    background: rgba(14,26,18,.78) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.screen-neoglass-app.chat-screen .ng-chat-header h2 {
    color: #fff;
}
.screen-neoglass-app.chat-screen .back-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    box-shadow: none;
}
.screen-neoglass-app.chat-screen .chat-container {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.screen-neoglass-app.chat-screen .chat-messages {
    background: transparent !important;
}
.screen-neoglass-app.chat-screen .chat-date-separator {
    color: rgba(255,255,255,.46);
}
.screen-neoglass-app.chat-screen .chat-date-separator span {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.62);
}
.screen-neoglass-app.chat-screen .chat-bubble.client {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    box-shadow: 0 10px 24px rgba(var(--neo-accent-2-rgb),.18);
}
.screen-neoglass-app.chat-screen .chat-bubble.admin {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
}
.screen-neoglass-app.chat-screen .chat-image-preview {
    background: rgba(255,255,255,.06);
    border-top: 1px solid rgba(255,255,255,.08);
}
.screen-neoglass-app.chat-screen .chat-input-bar {
    background: rgba(8,17,11,.92) !important;
    border-top: 1px solid rgba(var(--neo-accent-rgb),.15) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.screen-neoglass-app.chat-screen .chat-input-bar textarea {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
}
.screen-neoglass-app.chat-screen .chat-input-bar textarea:focus {
    border-color: rgba(var(--neo-accent-rgb),.58);
}
.screen-neoglass-app.chat-screen .chat-input-bar textarea::placeholder {
    color: rgba(255,255,255,.42);
}
.screen-neoglass-app.chat-screen .btn-icon-outline {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--neo-accent);
}
.screen-neoglass-app.chat-screen .btn-icon-outline:hover {
    border-color: rgba(var(--neo-accent-rgb),.45);
    background: rgba(var(--neo-accent-rgb),.12);
}
.screen-neoglass-app.chat-screen .btn-icon {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    box-shadow: 0 10px 28px rgba(var(--neo-accent-rgb),.28);
}
.screen-neoglass-app.chat-screen .empty-state {
    color: rgba(255,255,255,.68);
}
.screen-neoglass-app.chat-screen .empty-state .mi {
    color: rgba(var(--neo-accent-rgb),.36);
}

@media (min-width: 768px) {
    .screen-neoglass-app.chat-screen {
        background: #0e1a12 !important;
    }
    .screen-neoglass-app.chat-screen .ng-chat-header {
        width: min(770px, 100%);
    }
    .screen-neoglass-app.chat-screen .chat-container {
        width: min(770px, 100%) !important;
        max-width: min(770px, 100%) !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }
    .screen-neoglass-app.chat-screen .chat-messages {
        padding: 24px 32px;
    }
}

/* ============================================ */
/* ГЛОБАЛЬНАЯ NEOGLASS-АДАПТАЦИЯ для .screen     */
/* (применяется ко ВСЕМ post-login экранам:       */
/*  History, Door, Chat, Notifications, Legal,    */
/*  Subscription, Payment, Activity, About и т.д.)*/
/* ============================================ */

body { background: #0e1a12; }

.screen {
    background: #0e1a12;
    color: #fff;
    min-height: 100vh;
    position: relative;
    padding-bottom: 100px;
}
.screen::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle 280px at 0% 0%, rgba(var(--neo-accent-2-rgb),.35), transparent 60%),
        radial-gradient(circle 220px at 100% 50%, rgba(163,230,53,.22), transparent 60%),
        radial-gradient(circle 300px at 30% 100%, rgba(22,163,74,.28), transparent 60%);
    filter: blur(40px);
}
.screen > * { position: relative; z-index: 1; }

/* Текст — белый/светлый */
.screen .title-lg,
.screen .title-md,
.screen .headline-md,
.screen .headline-sm,
.screen .label-lg,
.screen .label-md,
.screen h1, .screen h2, .screen h3 {
    color: #fff;
}
.screen .body-md, .screen .body-sm, .screen p { color: rgba(255,255,255,.78); }
.screen .text-muted { color: rgba(255,255,255,.55) !important; }
.screen .text-primary { color: var(--neo-accent) !important; }
.screen .text-error { color: #f87171 !important; }

/* Card → glass */
.screen .card,
.screen .glass-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 16px;
    box-shadow: none;
}

/* Screen header */
.screen .screen-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px 10px;
    border-bottom: 0;
}
.screen .screen-header h2 { color: #fff; }
.screen .back-btn {
    width: 38px; height: 38px; border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* Inputs */
.screen input[type="text"],
.screen input[type="email"],
.screen input[type="tel"],
.screen input[type="password"],
.screen input[type="number"],
.screen textarea,
.screen .input-field {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    border-radius: 12px;
}
.screen input::placeholder, .screen textarea::placeholder {
    color: rgba(255,255,255,.35);
}

/* Buttons */
.screen .btn,
.screen .btn-primary {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    font-weight: 800;
    border-radius: 14px;
    border: 0;
    box-shadow: 0 10px 28px rgba(var(--neo-accent-rgb),.3);
}
.screen .btn-outline {
    background: rgba(var(--neo-accent-rgb),.06);
    color: var(--neo-accent);
    border: 1px solid rgba(var(--neo-accent-rgb),.4);
}
.screen .btn-text {
    background: transparent;
    color: var(--neo-accent);
}
.screen .btn-icon,
.screen .btn-icon-only {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: none !important;
    color: #fff;
}

/* Surface variables → glass */
.screen [style*="--surface-card"],
.screen [style*="--surface-2"],
.screen [class*="surface"] {
    background-color: rgba(255,255,255,.06) !important;
    color: #fff;
}

/* Booking-card / list-card / common rows */
.screen .booking-card,
.screen .list-card,
.screen .row-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    border-radius: 14px;
}

/* Chip/Tab */
.screen .chip {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
}
.screen .chip.active {
    background: rgba(var(--neo-accent-rgb),.15);
    border-color: rgba(var(--neo-accent-rgb),.5);
    color: var(--neo-accent);
}

/* Booking block info — old light cards on the dark shell */
.screen .block-info-alert {
    background: rgba(248,113,113,.10) !important;
    border-color: rgba(248,113,113,.42) !important;
    color: #fff !important;
}
.screen .block-info-alert .body-sm,
.screen .block-info-alert p {
    color: rgba(255,255,255,.82) !important;
}
.screen .block-info-alert strong {
    color: #fff;
}
.screen .block-info-levels {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
}
.screen .block-info-levels [style*="border-bottom"] {
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.screen .block-info-note {
    background: rgba(var(--neo-accent-rgb),.08) !important;
    border: 1px solid rgba(var(--neo-accent-rgb),.24) !important;
    color: rgba(255,255,255,.78) !important;
}
.screen .block-info-note .text-muted,
.screen .block-info-note p {
    color: rgba(255,255,255,.78) !important;
}
.screen .block-info-note .mi {
    color: var(--neo-accent) !important;
}

/* Split login overrides: keep the right side clean despite the global dark screen skin. */
.screen-auth.auth-split {
    color: var(--on-surface);
}

.screen-auth.auth-split::before {
    display: none;
}

.screen-auth.auth-split .auth-panel {
    color: var(--on-surface);
}

.screen-auth.auth-split .auth-title,
.screen-auth.auth-split .text-primary {
    color: var(--primary) !important;
}

.screen-auth.auth-split .text-muted {
    color: var(--on-surface-variant) !important;
}

.screen-auth.auth-split .auth-card,
.screen-auth.auth-split .auth-test-card {
    background: var(--surface-card);
    border: var(--card-border);
    color: var(--on-surface);
    box-shadow: var(--shadow-md);
}

.screen-auth.auth-split .auth-card .headline-md,
.screen-auth.auth-split .auth-card label,
.screen-auth.auth-split .auth-test-card .label-lg {
    color: var(--on-surface) !important;
}

.screen-auth.auth-split .input-field {
    background: var(--surface-card);
    border: 2px solid #E0E0E0;
    color: var(--on-surface);
    border-radius: 14px;
}

.screen-auth.auth-split .input-field:focus {
    border-color: var(--primary);
}

.screen-auth.auth-split .input-field::placeholder {
    color: #BDBDBD;
}

.screen-auth.auth-split .input-icon,
.screen-auth.auth-split .input-toggle {
    color: var(--on-surface-variant);
}

.screen-auth.auth-split .chip {
    background: transparent;
    border: 2px solid #E0E0E0;
    color: var(--on-surface-variant);
}

.screen-auth.auth-split .chip.active {
    background: var(--primary-container);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.screen-auth.auth-split .btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    box-shadow: 0 4px 12px rgba(46,125,50,0.3);
}

.screen-auth.auth-split .btn-text {
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}

.screen-auth.auth-split .auth-visual-content h1,
.screen-auth.auth-split .auth-visual-content p {
    color: white !important;
}

.screen-auth.auth-split .auth-visual-content p:last-child {
    color: rgba(255,255,255,0.78) !important;
}

/* Profile avatar — реюз стиля */
.screen .profile-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    color: #0e1a12;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 32px;
    margin: 14px auto 8px;
    box-shadow: 0 10px 24px rgba(var(--neo-accent-rgb),.3);
}

/* Profile actions список */
.screen .profile-actions {
    margin-top: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px; overflow: hidden;
}
.screen .profile-action {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; width: 100%;
    background: transparent; border: 0;
    color: #fff; font-size: 14px; font-weight: 600;
    text-align: left; cursor: pointer;
}
.screen .profile-action + .profile-action { border-top: 1px solid rgba(255,255,255,.06); }
.screen .profile-action:hover { background: rgba(255,255,255,.05); }

/* Overlay/dialog */
.screen .overlay {
    background: rgba(0,0,0,.65);
}
.screen .dialog {
    background: rgba(20,30,22,.95);
    border: 1px solid rgba(var(--neo-accent-rgb),.25);
    color: #fff;
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border-radius: 18px;
}
.screen .dialog h3 { color: #fff; }

/* Tab bar (если рендерится поверх) */
body .app-shell .tab-bar,
body .tab-bar {
    background: rgba(20,30,22,.7);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    color: rgba(255,255,255,.5);
}
body .tab-bar .tab.active,
body .tab-bar .nav-item.active,
body .tab-bar [class*="active"] {
    color: var(--neo-accent);
}

/* Material Icons — наследуют цвет родителя по умолчанию (на dark светлый текст) */
.screen .mi { color: inherit; }
.screen .quick-action .mi,
.screen .booking-card .booking-icon .mi,
.screen .profile-action .mi,
.screen .profile-stat .mi {
    color: var(--neo-accent);
}

/* Notification cards — glass dark */
.screen .notification-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff;
    border-radius: 14px;
    box-shadow: none;
}
.screen .notification-card.unread {
    background: rgba(var(--neo-accent-rgb),.08) !important;
    border-left: 3px solid var(--neo-accent) !important;
}
.screen .notification-card .notif-icon {
    background: rgba(255,255,255,.08) !important;
    color: #fff;
}
.screen .notification-card.unread .notif-icon {
    background: rgba(var(--neo-accent-rgb),.18) !important;
    color: var(--neo-accent) !important;
}
.screen .notification-card .title-md { color: #fff; }
.screen .notification-card .body-sm { color: rgba(255,255,255,.7); }

/* Empty state */
.screen .empty-state .mi { color: rgba(255,255,255,.3); }
.screen .empty-state .body-md { color: rgba(255,255,255,.6); }
.screen-neoglass-login .lg-social-row {
    width: 100%; min-width: 0; padding: 13px 16px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.1px;
    line-height: 22px;
    transition: background 150ms, border-color 150ms, transform 100ms;
    box-sizing: border-box;
    white-space: nowrap;
}
.screen-neoglass-login .lg-social-row:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(var(--neo-accent-rgb),.3);
}
.screen-neoglass-login .lg-social-row:active { transform: scale(.99); }
.screen-neoglass-login .lg-social-row:disabled { opacity: .4; cursor: wait; }
.screen-neoglass-login .lg-social-row img {
    width: 22px; height: 22px; flex: 0 0 22px;
    pointer-events: none; display: block;
}
.screen-neoglass-login .lg-social-row span {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
}

/* ============================================ */
/* PING-PONG SPINNER CANVAS — физика на канвасе  */
/* ============================================ */
.screen-neoglass-login .lg-tennis-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 4;
    pointer-events: none;
}

/* На мобильных — открываем орбиту с видимой рамкой */
@media (max-width: 767px) {
    .screen-neoglass-login .lg-game-orbit {
        position: relative;
        display: block;
        width: 100%;
        max-width: 280px;
        /* 2026-05-29 iter12: было aspect-ratio:1 + max-height:240 — на iOS Safari
           (iPhone 12 mini) aspect-ratio конфликтовал с max-height, элемент схлопывался
           в горизонтальную полосу ~280×80. Задаём height напрямую — гарантированно квадрат. */
        height: 240px;
        margin: 6px auto 12px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.25);
    }
    .screen-neoglass-login .lg-game-plasma { display: none; }
}

/* ============================================ */
/* THEME TOGGLE — pill в углу логин-экрана       */
/* ============================================ */
.screen-neoglass-login .lg-theme-toggle {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 20;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px 7px 9px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: rgba(255,255,255,.85);
    font-size: 12px; font-weight: 700; letter-spacing: .2px;
    cursor: pointer;
    transition: background 150ms, border-color 150ms, transform 100ms;
    font-family: inherit;
}
.screen-neoglass-login .lg-theme-toggle:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.25);
}
.screen-neoglass-login .lg-theme-toggle:active { transform: scale(.96); }
.screen-neoglass-login .lg-theme-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2));
    box-shadow: 0 0 6px rgba(var(--neo-accent-rgb),.6);
}
.screen-neoglass-login.theme-amber .lg-theme-dot {
    background: linear-gradient(135deg, #FDB347, #FB923C);
    box-shadow: 0 0 6px rgba(253,179,71,.6);
}
.screen-neoglass-login.theme-noir .lg-theme-dot {
    background: linear-gradient(135deg, #ffffff, #a3a3a3);
    box-shadow: 0 0 6px rgba(255,255,255,.5);
}
.screen-neoglass-login.theme-grey .lg-theme-dot {
    background: linear-gradient(135deg, #d4d4d8, #71717a);
    box-shadow: 0 0 6px rgba(212,212,216,.5);
}
.screen-neoglass-login.theme-pink .lg-theme-dot {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 0 6px rgba(236,72,153,.6);
}
.screen-neoglass-login.theme-aqua .lg-theme-dot {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    box-shadow: 0 0 6px rgba(45,212,191,.6);
}

/* ============================================ */
/* THEME: AMBER (sunset) — альтернатива зелёной  */
/* ============================================ */
.screen-neoglass-login.theme-amber { background: #1a0f08; }
.screen-neoglass-login.theme-amber .ng-bg { background: #1a0f08; }
.screen-neoglass-login.theme-amber .ng-b1 { background: #FB923C; }
.screen-neoglass-login.theme-amber .ng-b2 { background: #FBBF24; }
.screen-neoglass-login.theme-amber .ng-b3 { background: #D97706; }

.screen-neoglass-login.theme-amber .lg-greet b {
    background: linear-gradient(135deg, #FDB347, #FB923C);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.screen-neoglass-login.theme-amber .lg-input:focus {
    border-color: rgba(253,179,71,.5);
}

.screen-neoglass-login.theme-amber .lg-cta {
    background: linear-gradient(135deg, #FDB347, #FB923C);
    color: #1a0f08;
    box-shadow: 0 10px 28px rgba(253,179,71,.32);
}

.screen-neoglass-login.theme-amber .lg-forgot:hover { color: #FDB347; }

.screen-neoglass-login.theme-amber .lg-bottom a { color: #FDB347; }

.screen-neoglass-login.theme-amber .lg-social-btn:hover {
    border-color: rgba(253,179,71,.32);
}

.screen-neoglass-login.theme-amber .lg-toggle-btn {
    background: rgba(253,179,71,.06);
    border-color: rgba(253,179,71,.4);
    color: #FDB347;
}
.screen-neoglass-login.theme-amber .lg-toggle-btn:hover {
    background: rgba(253,179,71,.13);
    border-color: rgba(253,179,71,.65);
}

.screen-neoglass-login.theme-amber .lg-social-row:hover {
    border-color: rgba(253,179,71,.3);
}

@media (min-width: 768px) {
    .screen-neoglass-login.theme-amber .lg-visual {
        background:
            linear-gradient(180deg, rgba(20,12,8,0.04) 0%, rgba(20,12,8,0.84) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
    }
    .screen-neoglass-login.theme-amber .lg-visual::before {
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(253,179,71,0.22), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
    }
    .screen-neoglass-login.theme-amber .lg-visual::after {
        background: linear-gradient(90deg, rgba(26,15,8,0) 0%, rgba(26,15,8,0.30) 58%, #1a0f08 100%);
    }
    .screen-neoglass-login.theme-amber .lg-content {
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(251,146,60,0.20), transparent 70%),
            linear-gradient(180deg, #1a0f08 0%, #110803 100%);
    }
    .screen-neoglass-login.theme-amber .lg-game-orbit {
        background:
            radial-gradient(circle at 22% 34%, rgba(253,179,71,0.18), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(251,146,60,0.12), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border-color: rgba(253,179,71,0.16);
    }
    .screen-neoglass-login.theme-amber .lg-game-racket {
        stroke: rgba(253,179,71,0.55);
        filter: drop-shadow(0 0 12px rgba(253,179,71,0.26));
    }
    .screen-neoglass-login.theme-amber .lg-game-ball-halo {
        fill: rgba(253,179,71,0.24);
    }
}

/* ============================================ */
/* THEME: NOIR — монохромный чёрный             */
/* ============================================ */
.screen-neoglass-login.theme-noir { background: #000; }
.screen-neoglass-login.theme-noir .ng-bg { background: #000; }
.screen-neoglass-login.theme-noir .ng-b1 { background: #3f3f46; opacity: .55; }
.screen-neoglass-login.theme-noir .ng-b2 { background: #52525b; opacity: .45; }
.screen-neoglass-login.theme-noir .ng-b3 { background: #27272a; opacity: .65; }

.screen-neoglass-login.theme-noir .lg-greet b {
    background: linear-gradient(135deg, #ffffff, #a3a3a3);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.screen-neoglass-login.theme-noir .lg-input:focus { border-color: rgba(255,255,255,.4); }

.screen-neoglass-login.theme-noir .lg-cta {
    background: linear-gradient(135deg, #fafafa, #d4d4d8);
    color: #0a0a0a;
    box-shadow: 0 10px 28px rgba(255,255,255,.18);
}
.screen-neoglass-login.theme-noir .lg-forgot:hover { color: #fff; }
.screen-neoglass-login.theme-noir .lg-bottom a { color: #fafafa; }
.screen-neoglass-login.theme-noir .lg-social-btn:hover { border-color: rgba(255,255,255,.32); }
.screen-neoglass-login.theme-noir .lg-toggle-btn {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.32);
    color: #fafafa;
}
.screen-neoglass-login.theme-noir .lg-toggle-btn:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.55);
}
.screen-neoglass-login.theme-noir .lg-social-row:hover { border-color: rgba(255,255,255,.3); }

@media (min-width: 768px) {
    .screen-neoglass-login.theme-noir .lg-visual {
        background:
            linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.86) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
        filter: grayscale(1) contrast(1.05);
    }
    .screen-neoglass-login.theme-noir .lg-visual::before {
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(255,255,255,0.18), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
    }
    .screen-neoglass-login.theme-noir .lg-visual::after {
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 58%, #000 100%);
    }
    .screen-neoglass-login.theme-noir .lg-content {
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(255,255,255,0.10), transparent 70%),
            linear-gradient(180deg, #000 0%, #000 100%);
    }
    .screen-neoglass-login.theme-noir .lg-game-orbit {
        background:
            radial-gradient(circle at 22% 34%, rgba(255,255,255,0.10), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(255,255,255,0.06), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border-color: rgba(255,255,255,0.14);
    }
    .screen-neoglass-login.theme-noir .lg-game-racket {
        stroke: rgba(255,255,255,0.7);
        filter: drop-shadow(0 0 12px rgba(255,255,255,0.32));
    }
    .screen-neoglass-login.theme-noir .lg-game-ball-halo {
        fill: rgba(255,255,255,0.28);
    }
}

/* ============================================ */
/* THEME: GREY — нейтральный графит (zinc)      */
/* ============================================ */
.screen-neoglass-login.theme-grey { background: #3f3f46; }
.screen-neoglass-login.theme-grey .ng-bg { background: #3f3f46; }
.screen-neoglass-login.theme-grey .ng-b1 { background: #a1a1aa; opacity: .35; }
.screen-neoglass-login.theme-grey .ng-b2 { background: #d4d4d8; opacity: .25; }
.screen-neoglass-login.theme-grey .ng-b3 { background: #71717a; opacity: .55; }

.screen-neoglass-login.theme-grey .lg-greet b {
    background: linear-gradient(135deg, #fafafa, #a1a1aa);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.screen-neoglass-login.theme-grey .lg-input:focus { border-color: rgba(255,255,255,.45); }

.screen-neoglass-login.theme-grey .lg-cta {
    background: linear-gradient(135deg, #fafafa, #a1a1aa);
    color: #18181b;
    box-shadow: 0 10px 28px rgba(255,255,255,.12);
}
.screen-neoglass-login.theme-grey .lg-forgot:hover { color: #fafafa; }
.screen-neoglass-login.theme-grey .lg-bottom a { color: #fafafa; }
.screen-neoglass-login.theme-grey .lg-social-btn:hover { border-color: rgba(255,255,255,.32); }
.screen-neoglass-login.theme-grey .lg-toggle-btn {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.32);
    color: #fafafa;
}
.screen-neoglass-login.theme-grey .lg-toggle-btn:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.55);
}
.screen-neoglass-login.theme-grey .lg-social-row:hover { border-color: rgba(255,255,255,.3); }

@media (min-width: 768px) {
    .screen-neoglass-login.theme-grey .lg-visual {
        background:
            linear-gradient(180deg, rgba(24,24,27,0.04) 0%, rgba(24,24,27,0.78) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
        filter: grayscale(.85);
    }
    .screen-neoglass-login.theme-grey .lg-visual::before {
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(212,212,216,0.20), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
    }
    .screen-neoglass-login.theme-grey .lg-visual::after {
        background: linear-gradient(90deg, rgba(63,63,70,0) 0%, rgba(63,63,70,0.30) 58%, #3f3f46 100%);
    }
    .screen-neoglass-login.theme-grey .lg-content {
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(212,212,216,0.16), transparent 70%),
            linear-gradient(180deg, #3f3f46 0%, #27272a 100%);
    }
    .screen-neoglass-login.theme-grey .lg-game-orbit {
        background:
            radial-gradient(circle at 22% 34%, rgba(212,212,216,0.16), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(161,161,170,0.10), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border-color: rgba(255,255,255,0.12);
    }
    .screen-neoglass-login.theme-grey .lg-game-racket {
        stroke: rgba(212,212,216,0.65);
        filter: drop-shadow(0 0 12px rgba(212,212,216,0.22));
    }
    .screen-neoglass-login.theme-grey .lg-game-ball-halo {
        fill: rgba(212,212,216,0.26);
    }
}

/* ============================================ */
/* THEME: PINK — чёрный + горячий розовый       */
/* ============================================ */
.screen-neoglass-login.theme-pink { background: #0a0a0a; }
.screen-neoglass-login.theme-pink .ng-bg { background: #0a0a0a; }
.screen-neoglass-login.theme-pink .ng-b1 { background: #ec4899; opacity: .42; }
.screen-neoglass-login.theme-pink .ng-b2 { background: #f472b6; opacity: .32; }
.screen-neoglass-login.theme-pink .ng-b3 { background: #be185d; opacity: .5; }

.screen-neoglass-login.theme-pink .lg-greet b {
    background: linear-gradient(135deg, #fbcfe8, #ec4899);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.screen-neoglass-login.theme-pink .lg-input:focus { border-color: rgba(244,114,182,.55); }

.screen-neoglass-login.theme-pink .lg-cta {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    color: #0a0a0a;
    box-shadow: 0 10px 28px rgba(236,72,153,.36);
}
.screen-neoglass-login.theme-pink .lg-forgot:hover { color: #f472b6; }
.screen-neoglass-login.theme-pink .lg-bottom a { color: #f472b6; }
.screen-neoglass-login.theme-pink .lg-social-btn:hover { border-color: rgba(244,114,182,.4); }
.screen-neoglass-login.theme-pink .lg-toggle-btn {
    background: rgba(244,114,182,.08);
    border-color: rgba(244,114,182,.45);
    color: #f472b6;
}
.screen-neoglass-login.theme-pink .lg-toggle-btn:hover {
    background: rgba(244,114,182,.16);
    border-color: rgba(244,114,182,.7);
}
.screen-neoglass-login.theme-pink .lg-social-row:hover { border-color: rgba(244,114,182,.35); }

@media (min-width: 768px) {
    .screen-neoglass-login.theme-pink .lg-visual {
        background:
            linear-gradient(180deg, rgba(10,10,10,0.04) 0%, rgba(10,10,10,0.86) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
    }
    .screen-neoglass-login.theme-pink .lg-visual::before {
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(236,72,153,0.28), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
    }
    .screen-neoglass-login.theme-pink .lg-visual::after {
        background: linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.30) 58%, #0a0a0a 100%);
    }
    .screen-neoglass-login.theme-pink .lg-content {
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(236,72,153,0.20), transparent 70%),
            linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    }
    .screen-neoglass-login.theme-pink .lg-game-orbit {
        background:
            radial-gradient(circle at 22% 34%, rgba(236,72,153,0.20), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(244,114,182,0.12), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border-color: rgba(244,114,182,0.18);
    }
    .screen-neoglass-login.theme-pink .lg-game-racket {
        stroke: rgba(244,114,182,0.62);
        filter: drop-shadow(0 0 12px rgba(244,114,182,0.30));
    }
    .screen-neoglass-login.theme-pink .lg-game-ball-halo {
        fill: rgba(244,114,182,0.28);
    }
}

/* ============================================ */
/* THEME: AQUA — бирюза на тёмно-зелёном         */
/* ============================================ */
.screen-neoglass-login.theme-aqua { background: #051f1c; }
.screen-neoglass-login.theme-aqua .ng-bg { background: #051f1c; }
.screen-neoglass-login.theme-aqua .ng-b1 { background: #2dd4bf; opacity: .42; }
.screen-neoglass-login.theme-aqua .ng-b2 { background: #67e8f9; opacity: .30; }
.screen-neoglass-login.theme-aqua .ng-b3 { background: #0d9488; opacity: .5; }

.screen-neoglass-login.theme-aqua .lg-greet b {
    background: linear-gradient(135deg, #99f6e4, #14b8a6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.screen-neoglass-login.theme-aqua .lg-input:focus { border-color: rgba(45,212,191,.55); }

.screen-neoglass-login.theme-aqua .lg-cta {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    color: #021412;
    box-shadow: 0 10px 28px rgba(20,184,166,.34);
}
.screen-neoglass-login.theme-aqua .lg-forgot:hover { color: #2dd4bf; }
.screen-neoglass-login.theme-aqua .lg-bottom a { color: #2dd4bf; }
.screen-neoglass-login.theme-aqua .lg-social-btn:hover { border-color: rgba(45,212,191,.4); }
.screen-neoglass-login.theme-aqua .lg-toggle-btn {
    background: rgba(45,212,191,.08);
    border-color: rgba(45,212,191,.45);
    color: #2dd4bf;
}
.screen-neoglass-login.theme-aqua .lg-toggle-btn:hover {
    background: rgba(45,212,191,.16);
    border-color: rgba(45,212,191,.7);
}
.screen-neoglass-login.theme-aqua .lg-social-row:hover { border-color: rgba(45,212,191,.35); }

@media (min-width: 768px) {
    .screen-neoglass-login.theme-aqua .lg-visual {
        background:
            linear-gradient(180deg, rgba(5,31,28,0.04) 0%, rgba(5,31,28,0.84) 100%),
            url('assets/hero-room-real-20260506.jpeg') center / cover no-repeat;
    }
    .screen-neoglass-login.theme-aqua .lg-visual::before {
        background:
            radial-gradient(720px 420px at 18% 10%, rgba(45,212,191,0.26), transparent 62%),
            linear-gradient(90deg, rgba(0,0,0,0.20), transparent 48%);
    }
    .screen-neoglass-login.theme-aqua .lg-visual::after {
        background: linear-gradient(90deg, rgba(5,31,28,0) 0%, rgba(5,31,28,0.30) 58%, #051f1c 100%);
    }
    .screen-neoglass-login.theme-aqua .lg-content {
        background:
            radial-gradient(680px 380px at 50% 0%, rgba(20,184,166,0.20), transparent 70%),
            linear-gradient(180deg, #051f1c 0%, #021412 100%);
    }
    .screen-neoglass-login.theme-aqua .lg-game-orbit {
        background:
            radial-gradient(circle at 22% 34%, rgba(45,212,191,0.18), transparent 34%),
            radial-gradient(circle at 76% 62%, rgba(20,184,166,0.12), transparent 32%),
            linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
        border-color: rgba(45,212,191,0.18);
    }
    .screen-neoglass-login.theme-aqua .lg-game-racket {
        stroke: rgba(45,212,191,0.62);
        filter: drop-shadow(0 0 12px rgba(45,212,191,0.30));
    }
    .screen-neoglass-login.theme-aqua .lg-game-ball-halo {
        fill: rgba(45,212,191,0.28);
    }
}

/* ============================================ */
/* ORBIT FRAME — тематика плазмы и виньетки      */
/* ============================================ */
@media (min-width: 768px) {
    /* AMBER: тёплая янтарно-оранжевая плазма */
    .screen-neoglass-login.theme-amber .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(253,179,71,0),
                rgba(253,179,71,0.22),
                rgba(217,119,6,0.06),
                rgba(245,158,11,0.18),
                rgba(253,179,71,0));
    }
    .screen-neoglass-login.theme-amber .lg-game-orbit::after {
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(20,12,8,0.72), transparent 18%, transparent 82%, rgba(20,12,8,0.72));
    }
    .screen-neoglass-login.theme-amber .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(251,146,60,0.22), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(217,119,6,0.18), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(245,158,11,0.12), transparent 34%);
    }

    /* NOIR: монохромная серебряная плазма */
    .screen-neoglass-login.theme-noir .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(255,255,255,0),
                rgba(255,255,255,0.18),
                rgba(212,212,216,0.05),
                rgba(161,161,170,0.14),
                rgba(255,255,255,0));
    }
    .screen-neoglass-login.theme-noir .lg-game-orbit::after {
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(0,0,0,0.78), transparent 18%, transparent 82%, rgba(0,0,0,0.78));
    }
    .screen-neoglass-login.theme-noir .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(212,212,216,0.18), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(161,161,170,0.14), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(113,113,122,0.10), transparent 34%);
    }

    /* GREY: нейтральные графитовые блобы */
    .screen-neoglass-login.theme-grey .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(212,212,216,0),
                rgba(212,212,216,0.20),
                rgba(161,161,170,0.06),
                rgba(113,113,122,0.16),
                rgba(212,212,216,0));
    }
    .screen-neoglass-login.theme-grey .lg-game-orbit::after {
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(24,24,27,0.7), transparent 18%, transparent 82%, rgba(24,24,27,0.7));
    }
    .screen-neoglass-login.theme-grey .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(212,212,216,0.20), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(161,161,170,0.16), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(113,113,122,0.10), transparent 34%);
    }

    /* PINK: горячая фуксия */
    .screen-neoglass-login.theme-pink .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(244,114,182,0),
                rgba(244,114,182,0.22),
                rgba(190,24,93,0.06),
                rgba(236,72,153,0.20),
                rgba(244,114,182,0));
    }
    .screen-neoglass-login.theme-pink .lg-game-orbit::after {
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(10,10,10,0.78), transparent 18%, transparent 82%, rgba(10,10,10,0.78));
    }
    .screen-neoglass-login.theme-pink .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(236,72,153,0.24), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(190,24,93,0.18), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(244,114,182,0.14), transparent 34%);
    }

    /* AQUA: бирюза + морская зелень */
    .screen-neoglass-login.theme-aqua .lg-game-orbit::before {
        background:
            conic-gradient(from 110deg at 50% 50%,
                rgba(45,212,191,0),
                rgba(45,212,191,0.22),
                rgba(13,148,136,0.06),
                rgba(20,184,166,0.20),
                rgba(45,212,191,0));
    }
    .screen-neoglass-login.theme-aqua .lg-game-orbit::after {
        background:
            radial-gradient(ellipse at center, rgba(255,255,255,0.08), transparent 52%),
            linear-gradient(90deg, rgba(5,31,28,0.78), transparent 18%, transparent 82%, rgba(5,31,28,0.78));
    }
    .screen-neoglass-login.theme-aqua .lg-game-plasma {
        background:
            radial-gradient(circle at 20% 70%, rgba(20,184,166,0.22), transparent 28%),
            radial-gradient(circle at 78% 24%, rgba(13,148,136,0.18), transparent 30%),
            radial-gradient(circle at 52% 50%, rgba(45,212,191,0.14), transparent 34%);
    }
}

/* ============================================ */
/* GLOBAL THEME BRIDGE — выбранная тема на всех  */
/* экранах, а не только на login/register.       */
/* ============================================ */

:root {
    --neo-bg: #0e1a12;
    --neo-bg-2: #07110b;
    --neo-panel: rgba(255,255,255,.055);
    --neo-panel-strong: rgba(255,255,255,.09);
    --neo-border: rgba(255,255,255,.105);
    --neo-border-accent: rgba(163,201,58,.30);
    /* Lime приглушён: было #bef264/#4ade80 (ядовитый neon) — стало мягкий sage/forest */
    --neo-accent: #a3c93a;
    --neo-accent-rgb: 163, 201, 58;
    --neo-accent-2: #5a9a67;
    --neo-accent-2-rgb: 90, 154, 103;
    --neo-accent-soft: rgba(163,201,58,.14);
    --neo-accent-glow: rgba(163,201,58,.28);
    --neo-text: #ffffff;
    --neo-muted: rgba(255,255,255,.62);
    --neo-faint: rgba(255,255,255,.38);
    --neo-danger: #f87171;
    --neo-warn: #f59e0b;
    --neo-button-text: #0e1a12;
}

html[data-igro-theme] {
    --primary: var(--neo-accent);
    --primary-light: var(--neo-accent-2);
    --primary-dark: var(--neo-button-text);
    --primary-container: var(--neo-accent-soft);
    --surface: var(--neo-bg);
    --surface-variant: var(--neo-panel);
    --surface-card: var(--neo-panel);
    --background: var(--neo-bg);
    --on-surface: var(--neo-text);
    --on-surface-variant: var(--neo-muted);
    --card-border: 1px solid var(--neo-border);
    --shadow-sm: 0 16px 34px rgba(0,0,0,.18);
    --shadow-md: 0 22px 54px rgba(0,0,0,.24);
    --shadow-lg: 0 34px 80px rgba(0,0,0,.34);
    /* На тёмных темах --error #D32F2F слишком тёмный, теряется. Ярче через --neo-danger. */
    --error: var(--neo-danger);
}

html[data-igro-theme="amber"] {
    --neo-bg: #1a0f08;
    --neo-bg-2: #110803;
    --neo-panel: rgba(255,210,150,.065);
    --neo-panel-strong: rgba(255,210,150,.115);
    --neo-border: rgba(253,179,71,.135);
    --neo-border-accent: rgba(253,179,71,.42);
    --neo-accent: #FDB347;
    --neo-accent-rgb: 253, 179, 71;
    --neo-accent-2: #FB923C;
    --neo-accent-2-rgb: 251, 146, 60;
    --neo-accent-soft: rgba(253,179,71,.15);
    --neo-accent-glow: rgba(253,179,71,.34);
    --neo-button-text: #1a0f08;
}

html[data-igro-theme="noir"] {
    --neo-bg: #000000;
    --neo-bg-2: #050505;
    --neo-panel: rgba(255,255,255,.052);
    --neo-panel-strong: rgba(255,255,255,.105);
    --neo-border: rgba(255,255,255,.12);
    --neo-border-accent: rgba(255,255,255,.34);
    --neo-accent: #f5f5f5;
    --neo-accent-rgb: 245, 245, 245;
    --neo-accent-2: #a3a3a3;
    --neo-accent-2-rgb: 163, 163, 163;
    --neo-accent-soft: rgba(255,255,255,.13);
    --neo-accent-glow: rgba(255,255,255,.20);
    --neo-button-text: #050505;
}

html[data-igro-theme="grey"] {
    --neo-bg: #3f3f46;
    --neo-bg-2: #27272a;
    --neo-panel: rgba(255,255,255,.06);
    --neo-panel-strong: rgba(255,255,255,.11);
    --neo-border: rgba(255,255,255,.12);
    --neo-border-accent: rgba(212,212,216,.34);
    --neo-accent: #fafafa;
    --neo-accent-rgb: 250, 250, 250;
    --neo-accent-2: #a1a1aa;
    --neo-accent-2-rgb: 161, 161, 170;
    --neo-accent-soft: rgba(212,212,216,.15);
    --neo-accent-glow: rgba(212,212,216,.18);
    --neo-button-text: #18181b;
}

html[data-igro-theme="pink"] {
    --neo-bg: #0a0a0a;
    --neo-bg-2: #050505;
    --neo-panel: rgba(244,114,182,.065);
    --neo-panel-strong: rgba(244,114,182,.12);
    --neo-border: rgba(244,114,182,.14);
    --neo-border-accent: rgba(244,114,182,.42);
    --neo-accent: #f472b6;
    --neo-accent-rgb: 244, 114, 182;
    --neo-accent-2: #ec4899;
    --neo-accent-2-rgb: 236, 72, 153;
    --neo-accent-soft: rgba(244,114,182,.16);
    --neo-accent-glow: rgba(236,72,153,.34);
    --neo-button-text: #0a0a0a;
}

html[data-igro-theme="aqua"] {
    --neo-bg: #051f1c;
    --neo-bg-2: #021412;
    --neo-panel: rgba(45,212,191,.07);
    --neo-panel-strong: rgba(45,212,191,.13);
    --neo-border: rgba(45,212,191,.16);
    --neo-border-accent: rgba(45,212,191,.42);
    --neo-accent: #2dd4bf;
    --neo-accent-rgb: 45, 212, 191;
    --neo-accent-2: #14b8a6;
    --neo-accent-2-rgb: 20, 184, 166;
    --neo-accent-soft: rgba(45,212,191,.16);
    --neo-accent-glow: rgba(20,184,166,.32);
    --neo-button-text: #021412;
}

html[data-igro-theme] body {
    background:
        radial-gradient(720px 420px at 12% -8%, var(--neo-accent-glow), transparent 62%),
        radial-gradient(520px 360px at 92% 38%, var(--neo-accent-soft), transparent 68%),
        linear-gradient(180deg, var(--neo-bg) 0%, var(--neo-bg-2) 100%);
    color: var(--neo-text);
}

/* 2026-05-29 iter8: для noir-темы — фон без подсветки.
   Убираем radial-gradient блики (на body и .screen::before), блобы тоже прячем. */
html[data-igro-theme="noir"] body {
    background: var(--neo-bg) !important;
}
html[data-igro-theme="noir"] .screen::before {
    background: none !important;
}
html[data-igro-theme="noir"] .screen-neoglass-app .ng-bg-fixed,
html[data-igro-theme="noir"] .screen-neoglass-login .ng-bg {
    background: var(--neo-bg) !important;
}
html[data-igro-theme="noir"] .screen-neoglass-app .ng-bg-fixed .ng-blob,
html[data-igro-theme="noir"] .screen-neoglass-login .ng-blob {
    display: none !important;
}

html[data-igro-theme] .screen,
html[data-igro-theme] .screen-neoglass-app {
    background: var(--neo-bg) !important;
    color: var(--neo-text);
}

html[data-igro-theme] .screen::before {
    background:
        radial-gradient(circle 300px at 0% 0%, var(--neo-accent-glow), transparent 62%),
        radial-gradient(circle 240px at 100% 48%, var(--neo-accent-soft), transparent 62%),
        radial-gradient(circle 320px at 30% 100%, var(--neo-accent-glow), transparent 64%);
}

html[data-igro-theme] .screen-neoglass-app .ng-bg-fixed .ng-b1,
html[data-igro-theme] .screen-neoglass-login .ng-b1 {
    background: var(--neo-accent);
}

html[data-igro-theme] .screen-neoglass-app .ng-bg-fixed .ng-b2,
html[data-igro-theme] .screen-neoglass-login .ng-b2 {
    background: var(--neo-accent-2);
}

html[data-igro-theme] .screen-neoglass-app .ng-bg-fixed .ng-b3,
html[data-igro-theme] .screen-neoglass-login .ng-b3 {
    background: var(--neo-accent);
}

html[data-igro-theme] body:has(.screen-neoglass-app) .bottom-nav,
html[data-igro-theme] .bottom-nav {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--neo-bg) 82%, transparent), color-mix(in srgb, var(--neo-bg-2) 92%, transparent)),
        radial-gradient(180px 180px at 20% 10%, var(--neo-accent-soft), transparent 72%) !important;
    border-color: var(--neo-border) !important;
}

html[data-igro-theme] body:has(.screen-neoglass-app) .nav-item.active,
html[data-igro-theme] .nav-item.active {
    color: var(--neo-accent) !important;
    background: linear-gradient(135deg, var(--neo-accent-soft), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 0 0 1px var(--neo-border-accent) !important;
}

html[data-igro-theme] .screen .card,
html[data-igro-theme] .screen .glass-card,
html[data-igro-theme] .screen-neoglass-app .card,
html[data-igro-theme] .screen-neoglass-app .ng-sub-promo,
html[data-igro-theme] .screen-neoglass-app .ng-up-card,
html[data-igro-theme] .screen-neoglass-app .ng-qa,
html[data-igro-theme] .screen-neoglass-app .ng-history-card,
html[data-igro-theme] .screen-neoglass-app.chat-screen .chat-container {
    background: linear-gradient(135deg, var(--neo-panel-strong), var(--neo-panel)) !important;
    border-color: var(--neo-border) !important;
    color: var(--neo-text) !important;
}

html[data-igro-theme] .screen .title-lg,
html[data-igro-theme] .screen .title-md,
html[data-igro-theme] .screen .headline-md,
html[data-igro-theme] .screen .headline-sm,
html[data-igro-theme] .screen .label-lg,
html[data-igro-theme] .screen .label-md,
html[data-igro-theme] .screen h1,
html[data-igro-theme] .screen h2,
html[data-igro-theme] .screen h3,
html[data-igro-theme] .screen-neoglass-app h1,
html[data-igro-theme] .screen-neoglass-app h2,
html[data-igro-theme] .screen-neoglass-app h3 {
    color: var(--neo-text) !important;
}

html[data-igro-theme] .screen .body-md,
html[data-igro-theme] .screen .body-sm,
html[data-igro-theme] .screen p,
html[data-igro-theme] .screen-neoglass-app .body-md,
html[data-igro-theme] .screen-neoglass-app .body-sm,
html[data-igro-theme] .screen-neoglass-app p {
    color: var(--neo-muted) !important;
}

html[data-igro-theme] .screen .text-primary,
html[data-igro-theme] .screen-neoglass-app .text-primary,
html[data-igro-theme] .screen a,
html[data-igro-theme] .screen-neoglass-app a {
    color: var(--neo-accent) !important;
}

html[data-igro-theme] .screen .text-muted,
html[data-igro-theme] .screen-neoglass-app .text-muted {
    color: var(--neo-muted) !important;
}

html[data-igro-theme] .screen .text-error,
html[data-igro-theme] .screen-neoglass-app .text-error {
    color: var(--neo-danger) !important;
}

html[data-igro-theme] .screen .btn,
html[data-igro-theme] .screen .btn-primary,
html[data-igro-theme] .screen-neoglass-app .btn,
html[data-igro-theme] .screen-neoglass-app .btn-primary,
html[data-igro-theme] .screen-neoglass-app .ng-hero-cta,
html[data-igro-theme] .screen-neoglass-app .ng-active-bk .door-btn,
html[data-igro-theme] .screen-neoglass-app.chat-screen .btn-icon {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2)) !important;
    color: var(--neo-button-text) !important;
    box-shadow: 0 14px 34px var(--neo-accent-glow) !important;
}

html[data-igro-theme] .screen .btn-outline,
html[data-igro-theme] .screen-neoglass-app .btn-outline,
html[data-igro-theme] .screen-neoglass-app .ng-dialog-cancel,
html[data-igro-theme] .screen-neoglass-app .ng-active-bk .ext-btn {
    background: var(--neo-accent-soft) !important;
    color: var(--neo-accent) !important;
    border-color: var(--neo-border-accent) !important;
    box-shadow: none !important;
}

html[data-igro-theme] .screen .btn-text,
html[data-igro-theme] .screen-neoglass-app .btn-text,
html[data-igro-theme] .screen .profile-action .mi,
html[data-igro-theme] .screen-neoglass-app .profile-action .mi,
html[data-igro-theme] .screen .quick-action .mi,
html[data-igro-theme] .screen .booking-card .booking-icon .mi,
html[data-igro-theme] .screen-neoglass-app .ng-up-card .price,
html[data-igro-theme] .screen-neoglass-app .ng-hero-prices .p b {
    color: var(--neo-accent) !important;
}

html[data-igro-theme] .screen input[type="text"],
html[data-igro-theme] .screen input[type="email"],
html[data-igro-theme] .screen input[type="tel"],
html[data-igro-theme] .screen input[type="password"],
html[data-igro-theme] .screen input[type="number"],
html[data-igro-theme] .screen textarea,
html[data-igro-theme] .screen .input-field,
html[data-igro-theme] .screen-neoglass-app input,
html[data-igro-theme] .screen-neoglass-app textarea {
    background: rgba(0,0,0,.26) !important;
    border-color: var(--neo-border) !important;
    color: var(--neo-text) !important;
}

html[data-igro-theme] .screen input:focus,
html[data-igro-theme] .screen textarea:focus,
html[data-igro-theme] .screen .input-field:focus,
html[data-igro-theme] .screen-neoglass-app input:focus,
html[data-igro-theme] .screen-neoglass-app textarea:focus {
    border-color: var(--neo-border-accent) !important;
}

html[data-igro-theme] .screen .chip.active,
html[data-igro-theme] .screen-neoglass-app .chip.active,
html[data-igro-theme] .screen-neoglass-app .ng-history-tabs .chip.active {
    background: var(--neo-accent-soft) !important;
    border-color: var(--neo-border-accent) !important;
    color: var(--neo-accent) !important;
}

html[data-igro-theme] .screen .calendar-day.today,
html[data-igro-theme] .screen-neoglass-app .calendar-day.today {
    border-color: var(--neo-border-accent) !important;
    background: var(--neo-accent-soft) !important;
    color: var(--neo-accent) !important;
}

html[data-igro-theme] .screen .calendar-day.selected,
html[data-igro-theme] .screen-neoglass-app .calendar-day.selected,
html[data-igro-theme] .screen-neoglass-app .time-option.selected,
html[data-igro-theme] .screen-neoglass-app .duration-option.selected {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2)) !important;
    color: var(--neo-button-text) !important;
    box-shadow: 0 10px 28px var(--neo-accent-glow) !important;
}

html[data-igro-theme] .screen .profile-avatar,
html[data-igro-theme] .screen-neoglass-app .profile-avatar,
html[data-igro-theme] .screen-neoglass-app .ng-qa .ico,
html[data-igro-theme] .screen-neoglass-app .ng-up-card .ico,
html[data-igro-theme] .screen-neoglass-app .notification-card.unread .notif-icon {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2)) !important;
    color: var(--neo-button-text) !important;
}

html[data-igro-theme] .screen-neoglass-app .ng-hero-card,
html[data-igro-theme] .screen-neoglass-app .ng-active-bk,
html[data-igro-theme] .screen .block-info-note,
html[data-igro-theme] .screen .ng-access-info-card {
    background:
        linear-gradient(135deg, var(--neo-accent-soft), rgba(255,255,255,.035)) !important;
    border-color: var(--neo-border-accent) !important;
}

html[data-igro-theme] .screen-neoglass-app.chat-screen .chat-bubble.client {
    background: linear-gradient(135deg, var(--neo-accent), var(--neo-accent-2)) !important;
    color: var(--neo-button-text) !important;
}

html[data-igro-theme] .screen-neoglass-app.chat-screen .chat-input-bar,
html[data-igro-theme] .screen-neoglass-app.chat-screen .ng-chat-header {
    background: color-mix(in srgb, var(--neo-bg) 88%, transparent) !important;
    border-color: var(--neo-border) !important;
}

html[data-igro-theme] .screen .dialog,
html[data-igro-theme] .screen-neoglass-app .dialog,
html[data-igro-theme] .screen div[style*="background:#fff"][style*="border-radius:16px"],
html[data-igro-theme] .screen div[style*="background: #fff"][style*="border-radius:16px"],
html[data-igro-theme] .screen div[style*="background:white"][style*="border-radius"] {
    background: color-mix(in srgb, var(--neo-bg) 92%, #ffffff 8%) !important;
    border: 1px solid var(--neo-border-accent) !important;
    color: var(--neo-text) !important;
}

html[data-igro-theme] .screen [style*="color:#111827"],
html[data-igro-theme] .screen [style*="color: #111827"],
html[data-igro-theme] .screen [style*="color:#334155"],
html[data-igro-theme] .screen [style*="color: #334155"],
html[data-igro-theme] .screen [style*="color:#374151"],
html[data-igro-theme] .screen [style*="color: #374151"] {
    color: var(--neo-text) !important;
}

html[data-igro-theme] .screen [style*="background:#fff"],
html[data-igro-theme] .screen [style*="background: #fff"],
html[data-igro-theme] .screen [style*="background:white"],
html[data-igro-theme] .screen [style*="background:#ffffff"],
html[data-igro-theme] .screen [style*="background: #ffffff"],
html[data-igro-theme] .screen [style*="background:var(--surface-2"],
html[data-igro-theme] .screen [style*="background:var(--surface-variant"] {
    background: var(--neo-panel) !important;
    color: var(--neo-text) !important;
    border-color: var(--neo-border) !important;
}

html[data-igro-theme] .screen [style*="background:linear-gradient(180deg,#f7fbff"],
html[data-igro-theme] .screen [style*="background:linear-gradient(180deg, #f7fbff"] {
    background: linear-gradient(135deg, var(--neo-panel-strong), var(--neo-panel)) !important;
    color: var(--neo-text) !important;
    border-color: var(--neo-border) !important;
}

html[data-igro-theme] .screen [style*="border-bottom:1px solid #eef0f2"],
html[data-igro-theme] .screen [style*="border:1px solid #d1d5db"],
html[data-igro-theme] .screen [style*="border:1px solid #e5e7eb"] {
    border-color: var(--neo-border) !important;
}

/* ============================================ */
/* GLOBAL THEME TOGGLE — pill в правом верхнем  */
/* углу, на всех экранах кроме login.            */
/* ============================================ */
#igro-theme-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 8px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: inherit;
    transition: background 150ms, border-color 150ms, transform 100ms;
    line-height: 1;
    user-select: none;
}
#igro-theme-toggle:hover {
    background: rgba(0,0,0,.6);
    border-color: rgba(255,255,255,.28);
}
#igro-theme-toggle:active { transform: scale(.96); }
#igro-theme-toggle .igro-th-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-accent, #a3c93a), var(--neo-accent-2, #5a9a67));
    box-shadow: 0 0 6px var(--neo-accent-glow, rgba(163,201,58,.4));
    flex-shrink: 0;
}

/* На login-экране есть собственный pill .lg-theme-toggle — прячем глобальный */
body:has(.screen-neoglass-login) #igro-theme-toggle {
    display: none;
}

/* Со 2026-05-26 переключатель темы теперь живёт в профиле (раздел «Цвет темы»),
   глобальный плавающий toggle прячем на всех экранах app-shell (если есть юзер).
   На login плавающий уже скрыт правилом выше через :has(.screen-neoglass-login). */
body:has(.screen-neoglass-app) #igro-theme-toggle {
    display: none;
}

/* ============================================
   THEME PICKER в Профиле (2026-05-26)
   ============================================ */
.theme-picker {
    margin: 20px 0 20px;
    padding: 16px;
}
.theme-picker-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--on-surface-variant, rgba(255,255,255,.6));
    margin-bottom: 12px;
}
.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}
.theme-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 6px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 150ms, background 150ms;
}
.theme-swatch:hover {
    background: rgba(var(--neo-accent-rgb, 255,255,255), .06);
}
.theme-swatch.active {
    border-color: var(--neo-accent);
    background: rgba(var(--neo-accent-rgb, 255,255,255), .10);
}
.theme-swatch-sample {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.theme-swatch-accent {
    width: 14px; height: 14px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}
.theme-swatch-label {
    font-size: 12px; font-weight: 600;
    color: var(--on-surface, #fff);
}
.theme-swatch.active .theme-swatch-label {
    color: var(--neo-accent);
}

/* На смартфоне (<=480px) тема — только цветная точка без текста, круглая 30×30.
   Это убирает наложение на notifications-иконку в правом верхнем углу Home. */
@media (max-width: 480px) {
    #igro-theme-toggle {
        /* Центр круга 30×30 при top:26 = y:41 — совпадает с центром notifications-иконки (38px)
           внутри .ng-greet (padding-top 6px) внутри .page (padding-top 16px). */
        top: 26px;
        right: 10px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }
    /* Когда сверху висит блок-баннер — двигаем тему вниз чтобы оставаться на одной
       линии с notifications (та смещается из-за padding-top:60px на .page) */
    body:has(.block-banner) #igro-theme-toggle { top: 70px; }
    #igro-theme-toggle .igro-th-label { display: none; }
    #igro-theme-toggle .igro-th-dot { width: 12px; height: 12px; }
    /* 2026-05-29: theme pill переехал в Profile (.theme-picker),
       глобальный #igro-theme-toggle скрыт через body:has(.screen-neoglass-app).
       Удалены мёртвые компенсации .ng-greet padding-right:44 и .block-banner padding-right:50. */

    /* 2026-05-29 iter3+iter7+iter9: колокольчик от правого края.
       iter3 -16px → 0px (вплотную), iter7 -8px → 8px (близко),
       iter9 margin:0 + padding:0 → 16px (естественный .page padding). */
    .screen-neoglass-app .ng-greet {
        margin-right: 0;
        padding-right: 0;
    }
}

/* ============================================ */
/* DELETE ACCOUNT / LOGOUT — кнопки с ярким      */
/* контрастом на тёмных темах                    */
/* ============================================ */
html[data-igro-theme] .screen-neoglass-app .btn-text[style*="var(--error)"],
html[data-igro-theme] .screen-neoglass-app button[style*="var(--error)"] {
    color: var(--neo-danger) !important;
    font-weight: 700 !important;
    background: rgba(248,113,113,.10) !important;
    border: 1px solid rgba(248,113,113,.28) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
}
html[data-igro-theme] .screen-neoglass-app .btn-outline[style*="var(--error)"] {
    color: var(--neo-danger) !important;
    background: rgba(248,113,113,.08) !important;
    border-color: rgba(248,113,113,.35) !important;
}

/* Confirmation dialog — текст внутри был text-muted (.62 opacity) и сливался */
html[data-igro-theme] .screen-neoglass-app .dialog .body-md.text-muted,
html[data-igro-theme] .screen-neoglass-app .dialog .body-md,
html[data-igro-theme] .screen-neoglass-app .ng-dialog .body-md.text-muted,
html[data-igro-theme] .screen-neoglass-app .ng-dialog .body-md {
    color: rgba(255,255,255,.84) !important;
}
html[data-igro-theme] .screen-neoglass-app .dialog .text-error,
html[data-igro-theme] .screen-neoglass-app .ng-dialog .text-error {
    color: var(--neo-danger) !important;
}

/* ============================================================
   ANIMATED BACKGROUND GLOWS — 2026-05-13
   Фоновые ng-blob'ы (огоньки) плавно дрейфуют и переливаются.
   3 разных трека дрифта + 3 разных шиммера blur/brightness.
   Negative-delay сдвигает фазу каждого, чтобы не было синка.
============================================================ */
@keyframes ng-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(38px, 24px) scale(1.08); }
    66%      { transform: translate(72px, -16px) scale(0.93); }
}
@keyframes ng-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(-30px, -22px) scale(1.07); }
    60%      { transform: translate(-52px, 36px) scale(0.94); }
    85%      { transform: translate(14px, 16px) scale(1.05); }
}
@keyframes ng-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20%      { transform: translate(34px, -28px) scale(1.04); }
    50%      { transform: translate(-26px, -52px) scale(1.13); }
    80%      { transform: translate(46px, 24px) scale(0.92); }
}

@keyframes ng-shimmer-a {
    0%, 100% { filter: blur(50px) brightness(1); }
    50%      { filter: blur(58px) brightness(1.22); }
}
@keyframes ng-shimmer-b {
    0%, 100% { filter: blur(50px) brightness(0.95); }
    50%      { filter: blur(62px) brightness(1.18); }
}
@keyframes ng-shimmer-c {
    0%, 100% { filter: blur(50px) brightness(1.10); }
    50%      { filter: blur(56px) brightness(0.88); }
}

.screen-neoglass-login .ng-blob,
.screen-neoglass-app .ng-bg-fixed .ng-blob {
    will-change: transform, filter;
}
.screen-neoglass-login .ng-b1,
.screen-neoglass-app .ng-bg-fixed .ng-b1 {
    animation: ng-drift-a 22s ease-in-out infinite, ng-shimmer-a 9s ease-in-out infinite;
}
.screen-neoglass-login .ng-b2,
.screen-neoglass-app .ng-bg-fixed .ng-b2 {
    animation: ng-drift-b 27s ease-in-out infinite -7s, ng-shimmer-b 11s ease-in-out infinite -3s;
}
.screen-neoglass-login .ng-b3,
.screen-neoglass-app .ng-bg-fixed .ng-b3 {
    animation: ng-drift-c 32s ease-in-out infinite -14s, ng-shimmer-c 13s ease-in-out infinite -5s;
}

@media (prefers-reduced-motion: reduce) {
    .screen-neoglass-login .ng-blob,
    .screen-neoglass-app .ng-bg-fixed .ng-blob {
        animation: none !important;
    }
}

/* ============================================================
   INTERACTIVE BACKGROUND — 2026-05-14
   Курсор-параллакс + halo + press-flash + клик-рипл.
   Управляется JS через CSS-переменные на :root:
     --ng-mx, --ng-my  [0..1] позиция курсора
     --ng-pressed      [0|1] зажата ли мышь
   Идея: «футуристичный OS wallpaper, с которым приятно ёрзать».
============================================================ */

/* (2) Курсор-halo: радиальный glow следует за мышкой. Login — внутри .ng-bg */
.screen-neoglass-login .ng-bg::after,
.screen-neoglass-app .ng-bg-fixed::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(
        420px circle at
        calc(var(--ng-mx, 0.5) * 100%)
        calc(var(--ng-my, 0.5) * 100%),
        rgba(var(--neo-accent-rgb, 132, 204, 22), 0.12) 0%,
        rgba(var(--neo-accent-rgb, 132, 204, 22), 0.05) 35%,
        transparent 70%
    );
    mix-blend-mode: screen;
    z-index: 1;
    transition: opacity 250ms ease-out;
}

/* (1) Магнитный параллакс — каждый блоб со своим вектором/инерцией.
   `translate` (longhand) складывается с `transform: translate(...)` из ng-drift-* keyframes. */
.screen-neoglass-login .ng-b1,
.screen-neoglass-app .ng-bg-fixed .ng-b1 {
    translate:
        calc((var(--ng-mx, 0.5) - 0.5) * 130px)
        calc((var(--ng-my, 0.5) - 0.5) * 95px);
    transition: translate 80ms linear;
}
.screen-neoglass-login .ng-b2,
.screen-neoglass-app .ng-bg-fixed .ng-b2 {
    translate:
        calc((var(--ng-mx, 0.5) - 0.5) * -85px)
        calc((var(--ng-my, 0.5) - 0.5) * 65px);
    transition: translate 120ms linear;
}
.screen-neoglass-login .ng-b3,
.screen-neoglass-app .ng-bg-fixed .ng-b3 {
    translate:
        calc((var(--ng-mx, 0.5) - 0.5) * 55px)
        calc((var(--ng-my, 0.5) - 0.5) * -50px);
    transition: translate 160ms linear;
}

/* (3) Press-flash — пока зажата мышь, ярче и насыщеннее */
.screen-neoglass-login .ng-bg,
.screen-neoglass-app .ng-bg-fixed {
    filter:
        brightness(calc(1 + var(--ng-pressed, 0) * 0.22))
        saturate(calc(1 + var(--ng-pressed, 0) * 0.18));
    transition: filter 220ms ease-out;
}

/* (4) Клик-рипл: световое кольцо расходится от точки клика */
.ng-ripple {
    position: fixed;
    left: 0; top: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(180, 230, 200, 0.55) 0%,
        rgba(180, 230, 200, 0.22) 32%,
        rgba(180, 230, 200, 0)    70%
    );
    mix-blend-mode: screen;
    animation: ng-ripple-pulse 1100ms cubic-bezier(.2,.65,.3,1) forwards;
    z-index: 9999;
    will-change: width, height, opacity;
}
@keyframes ng-ripple-pulse {
    0%   { width: 14px;  height: 14px;  opacity: 0.85; }
    55%  { opacity: 0.40; }
    100% { width: 820px; height: 820px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .screen-neoglass-login .ng-b1,
    .screen-neoglass-login .ng-b2,
    .screen-neoglass-login .ng-b3,
    .screen-neoglass-app .ng-bg-fixed .ng-b1,
    .screen-neoglass-app .ng-bg-fixed .ng-b2,
    .screen-neoglass-app .ng-bg-fixed .ng-b3 {
        translate: 0 0 !important;
        transition: none !important;
    }
    .screen-neoglass-login .ng-bg::after,
    .screen-neoglass-app .ng-bg-fixed::after { background: none !important; }
    .screen-neoglass-login .ng-bg,
    .screen-neoglass-app .ng-bg-fixed { filter: none !important; }
    .ng-ripple { display: none !important; }
}

/* ============================================================
   BLOCK BANNER + MODAL (2026-05-26)
   Верхняя плашка о пропусках/блокировке, видна на всех экранах
   кроме самой booking_block_info, плюс модалка-предупреждение
   при заходе на «Бронь» (раз в день).
============================================================ */
/* Когда banner присутствует в DOM — отодвигаем контент всех неогласс-экранов
   вниз, иначе .page с position:fixed inset:0 рисуется ПОД banner'ом и его верхние
   элементы (notifications-иконка на Home, back-кнопка на Profile/Booking/...) прячутся. */
body:has(.block-banner) .screen-neoglass-app .page {
    padding-top: 60px;
}

.block-banner {
    position: sticky; top: 0; z-index: 9000;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    color: #1a0f08;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    text-align: left;
    border: 0; width: 100%; box-sizing: border-box;
    font-family: inherit;
    animation: block-banner-in 280ms cubic-bezier(.2,.7,.3,1);
}
.block-banner.permanent {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: #fff;
}
.block-banner .mi { font-size: 22px; flex-shrink: 0; }
.block-banner-text { flex: 1; line-height: 1.3; }
.block-banner-text small {
    display: block; opacity: .82; font-weight: 500; font-size: 12px; margin-top: 2px;
}
.block-banner-chevron { font-size: 18px; opacity: .7; flex-shrink: 0; }
@keyframes block-banner-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
/* На неогласс-темах баннер всё равно остаётся ярким — он специально контрастный */

/* Модалка-предупреждение на Booking-экране */
.block-modal-overlay {
    position: fixed; inset: 0; z-index: 11000;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: block-modal-fade 220ms ease-out;
}
.block-modal {
    max-width: 420px; width: 100%;
    background: #fff; color: #18181b;
    border-radius: 18px; padding: 24px 22px 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: block-modal-pop 280ms cubic-bezier(.2,.7,.3,1);
}
.block-modal-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.block-modal-head .mi { font-size: 28px; color: #ef4444; }
.block-modal-head h3 { margin: 0; font-size: 19px; font-weight: 700; }
.block-modal-body {
    font-size: 14px; line-height: 1.45; color: #3f3f46;
    margin-bottom: 18px;
}
.block-modal-body b { color: #18181b; }
.block-modal-actions {
    display: flex; gap: 10px;
}
.block-modal-actions button {
    flex: 1; padding: 12px; border: 0; border-radius: 12px;
    cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit;
    transition: transform 120ms, background 120ms;
}
.block-modal-actions .btn-primary {
    background: #18181b; color: #fff;
}
.block-modal-actions .btn-primary:hover { background: #27272a; }
.block-modal-actions .btn-secondary {
    background: #f4f4f5; color: #3f3f46;
}
.block-modal-actions .btn-secondary:hover { background: #e4e4e7; }
.block-modal-actions button:active { transform: scale(.97); }
@keyframes block-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes block-modal-pop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}