:root { /* UI_14B_V1 */ /* UI_TOKENS_V1 */
    /* Фон — почти чёрный, с оттенком */
    --bg: #07090D;
    --bg-pattern: #151515;
    --secondary-bg: #0D1118;
    --card-bg: #12151C;
    --card-border: rgba(255, 255, 255, 0.06);
    --card-hover: #171B24;

    /* Текст */
    --text: #f5f5f5;
    --hint: #888888;
    --link: #4DA3FF;

    /* Акцент — оранжевый */
    --accent: #1683FF;
    --accent-solid: #247BFF;
    --accent-light: #4DA3FF;
    --accent-dark: #006FFF;
    --accent-glow: rgba(22,131,255,0.4);
    /* UI_TOKENS_V1 */
    --accent-soft: #27A8FF;
    --bg-grid: rgba(255, 255, 255, 0.025);
    --bg-glow: rgba(20, 120, 255, 0.08);

    --button: #247BFF;
    --button-text: #ffffff;

    /* Дополнительные */
    --green: #22c55e;
    --red: #ef4444;
    --orange: #ff6a00;
    --yellow: #fbbf24;
    --purple: #a78bfa;
    --pink: #ec4899;

    --radius: 20px;
    --radius-sm: 14px;
    --border: rgba(255, 255, 255, 0.04);

    /* === ДИЗАЙН-ТОКЕНЫ (v2) === */

    /* Отступы — сетка 4px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Радиусы — дополняем */
    --radius-xs: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Тени — 3 уровня */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 4px 16px var(--accent-glow);

    /* Шкала шрифтов */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 22px;
    --text-2xl: 28px;

    /* Анимации */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 100px;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    position: relative;
    letter-spacing: -0.01em;
}


/* UI_FIX_V1: old body::before removed */

/* Тонкие концентрические круги поверх */


/* ============ HEADER ============ */


/* ============ CONTENT ============ */

.content {
    padding: 0 16px 16px;
    position: relative;
    z-index: 1;
    padding-bottom: 120px;
    min-height: 100vh;
    /* Шапка sticky — не нужен доп padding */
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    gap: 16px;
    font-size: 0;  /* скрываем текст внутри */
    min-height: 120px;
}

.loader::before {
    content: '';
    width: 64px;
    height: 64px;
    background-image: url('/static/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    animation: loaderPulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 6px 24px rgba(99,102,241,0.55));
    flex-shrink: 0;
}

@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

.empty {
    text-align: center;
    padding: 50px 24px;
    color: var(--hint);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    animation: emptyFadeIn 0.35s ease-out;
}

.empty-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.85;
    animation: emptyFloat 3s ease-in-out infinite;
}

.empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.empty-text {
    font-size: 14px;
    color: var(--hint);
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.empty-action {
    display: inline-block;
    padding: 11px 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px var(--accent-glow, rgba(255, 106, 0, 0.25));
    -webkit-tap-highlight-color: transparent;
}
.empty-action:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px var(--accent-glow, rgba(255, 106, 0, 0.2));
}

@keyframes emptyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .empty-icon { animation: none; }
    .empty { animation: none; }
}

/* ============================================================
   TABBAR — 6 вкладок, стеклянный минимализм
   ============================================================ */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: rgba(10, 10, 10, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    pointer-events: auto;
}

.tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--hint);
    padding: 8px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: color .25s ease;
    position: relative;
    overflow: visible;
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    opacity: 0.7;
    background: transparent;
    border-radius: 0;
    color: var(--hint);
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .25s, color .2s;
}

.tab-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    fill: none;
    transition: stroke .2s;
}

.tab:active 


.tab.active .tab-icon svg {
    stroke: var(--accent-solid, var(--accent));
}

.tab-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
}

.tab-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    opacity: 0.55;
    transition: opacity .25s;
}

.tab:active 

.tab.active {
    color: var(--accent-solid, var(--accent));
}

.tab.active 

.tab.active .tab-icon svg {
    stroke: var(--accent-solid, var(--accent));
}

.tab.active .tab-label {
    opacity: 1;
    color: var(--accent-solid, var(--accent));
}

.tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--hint);
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: color .25s ease;
    position: relative;
    overflow: hidden;
}


.tab-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.1px;
    white-space: nowrap;
    opacity: 0.55;
    transition: opacity .25s;
}

.tab-indicator { display: none; }

.tab:active 

.tab.active {
    color: var(--accent-solid, var(--accent));
}

.tab.active 

.tab.active .tab-label {
    opacity: 1;
    color: var(--accent-light);
}

.tab.active .tab-indicator {
    transform: translateX(-50%) scaleX(1);
}

.tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--hint);
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-family: inherit;
    transition: color .25s ease;
    position: relative;
    overflow: hidden;
}


.tab-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.1px;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity .25s;
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 2.5px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    box-shadow: 0 0 10px var(--accent-glow);
}

.tab:active 

.tab.active {
    color: var(--accent-solid, var(--accent));
}

.tab.active 

.tab.active .tab-label {
    opacity: 1;
}

.tab.active .tab-indicator {
    transform: translateX(-50%) scaleX(1);
}

/* ============ БЕНТО-СЕТКА ============ */

.greeting {
    padding: 0 4px 16px;
}

.greeting-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.greeting-sub {
    color: var(--hint);
    font-size: 13px;
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.greeting-sub svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.bento-card {
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(74, 163, 255, 0.18);  /* UI_BG_ORANGE_V1 */
}

.bento-card:active { transform: scale(0.97); border-color: var(--accent-solid, var(--accent)); }

.bento-card.wide { grid-column: span 2; }

.bento-card.accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-color: transparent; color: #fff; }
.bento-card.accent .bento-hint { color: rgba(255,255,255,0.72); }

.bento-card.green { background: linear-gradient(135deg, #30d158, #26a848); border-color: transparent; color: #fff; }
.bento-card.green .bento-hint { color: rgba(255,255,255,0.78); }

.bento-card.orange { background: linear-gradient(135deg, #1A2540, #12151C); border-color: rgba(74, 163, 255, 0.14); color: var(--text); }  /* UI_BG_ORANGE_V1 */
.bento-card.orange .bento-hint { color: var(--hint); opacity: 0.85; }  /* UI_BG_ORANGE_V1 */

.bento-card.purple { background: linear-gradient(135deg, #bf5af2, #8e2de2); border-color: transparent; color: #fff; }
.bento-card.purple .bento-hint { color: rgba(255,255,255,0.78); }

.bento-card.pink { background: linear-gradient(135deg, #ff375f, #d70040); border-color: transparent; color: #fff; }
.bento-card.pink .bento-hint { color: rgba(255,255,255,0.78); }

.bento-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.72;
    margin-bottom: 2px;
}

.bento-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.2;
}

.bento-hint {
    font-size: 12px;
    color: var(--hint);
    margin-top: 4px;
    letter-spacing: 0.1px;
}

.bento-hint strong { color: var(--text); font-weight: 600; }

/* ============ БЫСТРЫЕ ДЕЙСТВИЯ ============ */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-3) var(--space-1);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition), border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
    min-height: 68px;
}
.quick-btn svg {
    width: 22px;
    height: 22px;
    color: var(--accent-solid, var(--accent));
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.quick-btn span {
    color: var(--text);
    letter-spacing: -0.2px;
}
.quick-btn:hover {
    background: var(--card-hover);
}
.quick-btn:active {
    transform: scale(0.94);
    background: rgba(255, 106, 0, 0.08);
    border-color: rgba(255, 106, 0, 0.3);
}
.quick-btn:active svg {
    transform: scale(0.9);
}

.quick-btn .icon {
    font-size: 20px;
    line-height: 1;
}

/* ============ РЕДАКТОР БЫСТРЫХ КНОПОК (в настройках) ============ */

.quick-actions-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.quick-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
}

.quick-order-label {
    flex: 1;
    min-width: 0;
}

.quick-order-controls {
    display: flex;
    gap: 6px;
}

.order-btn {
    background: var(--bg);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s, background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-btn:active { transform: scale(0.92); background: rgba(59, 130, 246, 0.15); }
.order-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ============ КАРТОЧКИ ============ */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.card-sub {
    color: var(--hint);
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

.pair-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.pair-number {
    font-weight: 700;
    color: var(--accent-light);
    font-size: 14px;
    letter-spacing: -0.2px;
}

.pair-time {
    color: var(--hint);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.14);
    color: var(--accent-light);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-right: 4px;
}

.badge.sg1 { background: rgba(255,159,10,0.16); color: var(--orange); }
.badge.sg2 { background: rgba(48,209,88,0.16); color: var(--green); }
/* BADGE_SG34_V1 */
.badge.sg3 { background: rgba(0,122,255,0.16); color: #0a84ff; }
.badge.sg4 { background: rgba(191,90,242,0.16); color: #bf5af2; }

/* ============ КНОПКИ ============ */

.btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--button-text);
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    font-family: inherit;
    letter-spacing: -0.1px;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 4px 16px var(--accent-glow);
}

.btn:active { 
    transform: scale(0.97); 
    box-shadow: 0 2px 8px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--accent-solid, var(--accent));
    color: var(--accent-light);
    box-shadow: none;
}

.btn:active { transform: scale(0.98); opacity: 0.9; }

.btn-outline {
    background: transparent;
    border: 1px solid var(--accent-solid, var(--accent));
    color: var(--accent-light);
}

.btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-row .btn { margin-top: 0; }

/* ============ СТАТУСЫ ЯВКИ ============ */

.status-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.status-btn {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.1px;
    transition: all .15s;
}

.status-btn:active { transform: scale(0.95); }

.status-btn.active-will { background: var(--green); border-color: var(--green); color: #000; font-weight: 700; }
.status-btn.active-absent { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.status-btn.active-sick { background: var(--orange); border-color: var(--orange); color: #000; font-weight: 700; }
.status-btn.active-late { background: var(--accent); border-color: var(--accent-solid, var(--accent)); color: #fff; font-weight: 700; }

/* ============ XP БАР ============ */

.xp-bar {
    background: var(--bg);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    margin: 8px 0;
}

.xp-fill {
    background: linear-gradient(90deg, var(--accent), var(--green));
    height: 100%;
    transition: width .4s;
    border-radius: 6px;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ============ РЕЙТИНГ ============ */

.rating-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.rating-item:last-child { border-bottom: none; }

.rating-rank {
    font-weight: 700;
    color: var(--hint);
    font-size: 14px;
    min-width: 32px;
    text-align: center;
}

.rating-name { flex: 1; font-size: 14px; }
.rating-xp { color: var(--accent-light); font-weight: 700; font-size: 13px; letter-spacing: -0.1px; }

/* ============ СЕЛЕКТОР ДНЯ ============ */

.day-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar { display: none; }

.day-tab {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--hint);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
}

.day-tab.active {
    background: var(--accent);
    border-color: var(--accent-solid, var(--accent));
    color: #fff;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ============ СЕКЦИИ ============ */

.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--hint);
    margin: 24px 4px 12px;
    padding-left: 0;
    line-height: 1;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.menu-item:last-child {
    margin-bottom: 0;
}

.menu-item:active {
    background: var(--card-hover);
    transform: scale(0.99);
}

.menu-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 106, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--accent-light);
    flex-shrink: 0;
}

.menu-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.menu-body {
    flex: 1;
    min-width: 0;
}

.menu-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 2px;
    color: var(--text);
}

.menu-sub {
    font-size: 12px;
    color: var(--hint);
    letter-spacing: 0;
    line-height: 1.3;
}

.menu-arrow {
    color: var(--hint);
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0.5;
    font-weight: 300;
}

.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: rgba(59, 130, 246, 0.08); }

.menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.menu-body {
    flex: 1;
    min-width: 0;
}

.menu-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    margin-bottom: 2px;
}

.menu-sub {
    font-size: 12px;
    color: var(--hint);
    letter-spacing: 0.1px;
    line-height: 1.3;
}

.menu-arrow {
    color: var(--hint);
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* ============ КАРТОЧКА ПРИГЛАШЕНИЙ ============ */

.menu-list .menu-item {
    background: var(--card-bg);
}

.invite-card {
    margin-bottom: 16px;
    clear: both;
}

.invite-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.invite-sub {
    font-size: 12px;
    color: var(--hint);
    margin-bottom: 12px;
}

.invite-days {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-light);
    letter-spacing: -1px;
    margin-bottom: 2px;
}

.invite-days-label {
    font-size: 12px;
    color: var(--hint);
    margin-bottom: 12px;
}

.invite-progress {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.invite-progress-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    height: 100%;
    border-radius: 6px;
    transition: width .4s;
    box-shadow: 0 0 8px var(--accent-glow);
}

.invite-count {
    font-size: 12px;
    color: var(--hint);
    margin-bottom: 12px;
}

.invite-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.invite-btn {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.3);
    color: var(--accent-light);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform .15s, background .2s;
}

.invite-btn:active { transform: scale(0.96); background: rgba(59,130,246,0.25); }

/* ============ МОДАЛЬНОЕ ОКНО ============ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal.hidden { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    background: var(--card-bg);
    border-top: 1px solid var(--card-border);
    border-radius: 22px 22px 0 0;
    padding: 22px 20px;
    overflow-y: auto;
    animation: slideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background .15s;
}

.modal-close:active { background: rgba(255,255,255,0.15); }

.modal-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-right: 40px;
    letter-spacing: -0.4px;
}

.modal-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.modal-input:focus { border-color: var(--accent-solid, var(--accent)); box-shadow: 0 0 0 3px var(--accent-glow); }

.modal-textarea {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 12px;
    outline: none;
    min-height: 96px;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}

.modal-textarea:focus { border-color: var(--accent-solid, var(--accent)); box-shadow: 0 0 0 3px var(--accent-glow); }

.modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-list-item {
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.modal-list-item:active { background: rgba(59,130,246,0.08); border-color: var(--accent-solid, var(--accent)); }

.modal-list-item-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: -0.1px;
}

.modal-list-item-sub {
    color: var(--hint);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

/* ============ АНИМАЦИИ ============ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.bento-card, .card, .quick-btn, .menu-list, .invite-card {
    animation: fadeInUp 0.28s ease backwards;
}

.bento-card:nth-child(1) { animation-delay: 0.02s; }
.bento-card:nth-child(2) { animation-delay: 0.04s; }
.bento-card:nth-child(3) { animation-delay: 0.06s; }
.bento-card:nth-child(4) { animation-delay: 0.08s; }
.bento-card:nth-child(5) { animation-delay: 0.1s; }
.bento-card:nth-child(6) { animation-delay: 0.12s; }
.bento-card:nth-child(7) { animation-delay: 0.14s; }

/* ============================================================
   УЛУЧШЕНИЯ: АВАТАРКА, SKELETON, PULL-TO-REFRESH, АНИМАЦИИ
   ============================================================ */

/* ---------- АВАТАРКА В ПРОФИЛЕ ---------- */

.profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0 12px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-sub {
    font-size: 13px;
    color: var(--hint);
    line-height: 1.4;
}

.profile-role {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---------- SKELETON ---------- */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--card-bg) 0%,
        rgba(59, 130, 246, 0.08) 50%,
        var(--card-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius);
    margin-bottom: 10px;
}

.skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 6px;
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-card {
    height: 106px;
    margin-bottom: 10px;
}

.skeleton-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.skeleton-bento .skeleton {
    height: 106px;
    margin-bottom: 0;
}

.skeleton-bento .skeleton.wide {
    grid-column: span 2;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- PULL-TO-REFRESH ---------- */

.pull-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    transform: translateY(-100%);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 99;
    pointer-events: none;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}

.pull-indicator.visible {
    transform: translateY(0);
}

.pull-indicator.refreshing {
    transform: translateY(0);
}

.pull-spinner {
    width: 24px;
    height: 24px;
    border: 2.5px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.pull-indicator:not(.refreshing) .pull-spinner {
    animation: none;
    transform: rotate(-90deg);
    transition: transform 0.2s;
}

.pull-indicator.ready:not(.refreshing) .pull-spinner {
    transform: rotate(0deg);
}

.pull-text {
    font-size: 12px;
    color: var(--hint);
    font-weight: 500;
    letter-spacing: 0.2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- АНИМАЦИЯ ПЕРЕХОДА МЕЖДУ ВКЛАДКАМИ ---------- */

.content {
    animation: fadeInTab 0.24s ease-out;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content.tab-changing {
    animation: tabSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tabSlide {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   СВЕТЛАЯ ТЕМА
   ============================================================ */

body.light-theme {
    --bg: #f2f4f7;
    --bg-pattern: #e8ebf0;
    --secondary-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.06);
    --text: #1a1d21;
    --hint: #6b7280;
    --link: #2563eb;
    --button: #3b82f6;
    --button-text: #ffffff;
    --border: rgba(0, 0, 0, 0.06);
}

body.light-theme::before {
    opacity: 0.3;
}

body.light-theme .tabbar {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .modal-content {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .modal-input,
body.light-theme .modal-textarea {
    background: #f7f8fa;
    border-color: rgba(0, 0, 0, 0.08);
    color: #1a1d21;
}

body.light-theme .menu-list,
body.light-theme .card,
body.light-theme .bento-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ============================================================ */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.theme-toggle:active {
    background: rgba(59, 130, 246, 0.08);
}

.theme-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
}

.theme-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.theme-toggle-switch {
    width: 44px;
    height: 26px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 13px;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}

.theme-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle-switch.active {
    background: var(--accent);
}

.theme-toggle-switch.active::after {
    transform: translateX(18px);
}
/* ============================================================
   ОБЩИЙ ЧАТ ГРУППЫ
   ============================================================ */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    margin-bottom: 16px;
}

.chat-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.chat-group svg {
    stroke: var(--accent-solid, var(--accent));
    width: 16px;
    height: 16px;
}

.chat-count {
    font-size: 12px;
    color: var(--hint);
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 140px;
    height: calc(100vh - 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.chat-date-sep {
    text-align: center;
    font-size: 11px;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 0 8px;
    font-weight: 600;
}

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 2px 0;
    max-width: 100%;
}

.chat-msg.mine {
    flex-direction: row-reverse;
}

.chat-msg.same-user {
    padding-top: 0;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-avatar-mine {
    background: var(--accent-light);
}

.chat-avatar-mine svg {
    stroke: #fff;
    width: 16px;
    height: 16px;
}

.chat-avatar-spacer {
    width: 32px;
    flex-shrink: 0;
}

.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.chat-msg.mine .chat-bubble-wrap {
    align-items: flex-end;
}

.chat-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    margin: 8px 0 2px 4px;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-bubble:active {
    background: var(--card-hover);
}

.chat-msg.mine .chat-bubble {
    background: var(--accent);
    border-color: var(--accent-solid, var(--accent));
    color: #fff;
    border-bottom-right-radius: 6px;
}

.chat-msg:not(.mine) .chat-bubble {
    border-bottom-left-radius: 6px;
}

.chat-time {
    font-size: 10px;
    color: var(--hint);
    margin: 2px 4px 0;
}

.chat-input-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.98);
    border-top: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 60;
    transition: bottom 0.15s ease;
    /* JS будет менять bottom при открытии клавиатуры */
}

.chat-input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    padding: 10px 16px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.chat-input:focus {
    border-color: var(--accent-solid, var(--accent));
}

.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.chat-send-btn:active {
    transform: scale(0.92);
}

.chat-send-btn svg {
    stroke: #fff;
    width: 20px;
    height: 20px;
}

body.light-theme .chat-input-wrap {
    background: rgba(255, 255, 255, 0.95);
}

body.light-theme .chat-bubble {
    background: #f0f0f0;
}

/* ============================================================
   ДОСТИЖЕНИЯ — ПРОГРЕСС
   ============================================================ */

.ach-header {
    text-align: center;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 20px;
}

.ach-header-count {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent-solid, var(--accent));
    letter-spacing: -1px;
    line-height: 1;
}

.ach-header-label {
    font-size: 11px;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
    font-weight: 600;
}

.ach-header-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 16px;
}

.ach-header-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px var(--accent-glow);
}

.ach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    margin-bottom: 8px;
}

.ach-unlocked {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
}

.ach-emoji {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 106, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ach-emoji.ach-locked {
    background: rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    filter: grayscale(0.7);
}

.ach-body {
    flex: 1;
    min-width: 0;
}

.ach-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.ach-desc {
    font-size: 11px;
    color: var(--hint);
    line-height: 1.3;
}

.ach-xp {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-solid, var(--accent));
    flex-shrink: 0;
    padding: 4px 8px;
    background: rgba(255, 106, 0, 0.1);
    border-radius: 8px;
}

.ach-xp-locked {
    color: var(--hint);
    background: rgba(255, 255, 255, 0.04);
}

.ach-progress {
    margin-top: 8px;
}

.ach-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.ach-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.ach-progress-text {
    font-size: 10px;
    color: var(--hint);
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================================
   WRAPPED-КАРТОЧКА
   ============================================================ */

.wrapped-preview {
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

.wrapped-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.wrapped-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.wrapped-stat {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.wrapped-stat-label {
    font-size: 10px;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}

.wrapped-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-solid, var(--accent));
    letter-spacing: -0.5px;
}

.wrapped-actions {
    display: flex;
    gap: 8px;
}

.wrapped-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.wrapped-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* ============================================================
   TOGGLE (переключатели в настройках)
   ============================================================ */


/* ============================================================
   TOGGLE — с анимацией
   ============================================================ */











/* Пульсация при нажатии */
@keyframes toggle-pulse {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow, rgba(255, 106, 0, 0.5)); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}


/* ============================================================
   TOGGLE (чистая версия)
   ============================================================ */

.toggle {
    width: 52px;
    height: 30px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
}

.toggle:active {
    transform: scale(0.95);
}

.toggle.on {
    background: var(--accent);
    border-color: var(--accent-solid, var(--accent));
    box-shadow: 0 0 0 4px var(--accent-glow, rgba(255, 106, 0, 0.15)),
                0 4px 12px var(--accent-glow, rgba(255, 106, 0, 0.3));
}

.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    will-change: transform;
}

.toggle.on .toggle-knob {
    transform: translateX(22px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                0 0 12px rgba(255, 255, 255, 0.4);
}

@keyframes toggle-pulse {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow, rgba(255, 106, 0, 0.5)); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

.toggle.pulse {
    animation: toggle-pulse 0.6s ease-out;
}


/* Блокировка скролла при открытой модалке */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    /* top задаётся через JS, чтобы сохранить позицию скролла */
}


/* Блокировка скролла при открытом sidebar */
body.sidebar-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Плавное сохранение скролла при открытии модалки */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    /* top устанавливается через JS */
}

/* ============================================================
   BADGE — непрочитанные сообщения
   ============================================================ */

.sidebar-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    margin-right: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    animation: badgePulse 0.4s ease;
}

@keyframes badgePulse {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   ЧАТ — титул и значок автора
   ============================================================ */

.chat-title-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 106, 0, 0.15);
    color: var(--accent-solid, var(--accent));
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 2px;
}

.chat-svg-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 2px;
    opacity: 0.8;
}

.chat-svg-badge svg {
    width: 12px;
    height: 12px;
}


/* ============================================================
   КЛАВИАТУРА — панель ввода поднимается над клавиатурой
   ============================================================ */

body.keyboard-open .chat-input-wrap {
    bottom: var(--keyboard-height, 0px) !important;
}

body.keyboard-open .chat-list {
    height: calc(100vh - 320px - var(--keyboard-height, 0px));
}


/* ============================================================
   ИКОНКИ В ПОДПИСЯХ — inline с текстом
   ============================================================ */

.card-sub,
.menu-sub,
.bento-label,
.section-label,
.info-line {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.card-sub svg,
.menu-sub svg,
.bento-label svg,
.section-label svg,
.info-line svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Для иконок в заголовках (16-20px) */
.section-label svg {
    width: 14px;
    height: 14px;
}


/* ============================================================
   ШАПКА — фиксирована сверху при скролле
   ============================================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 -16px 16px -16px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-theme .header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-menu-btn,
.header-back-btn,
.header-channel-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.header-menu-btn:active,
.header-back-btn:active,
.header-channel-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.95);
}

.header-channel-btn {
    color: var(--accent-solid, var(--accent));
    border-color: rgba(255, 106, 0, 0.3);
    background: rgba(255, 106, 0, 0.08);
    margin-left: auto;
}

.header-channel-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.header-title-wrap {
    flex: 1;
    min-width: 0;
}

.header-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    font-size: 12px;
    color: var(--hint);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ Свободные аудитории (details) ============ */
.room-group {
    background: var(--card-bg, #1c1c1e);
    border: 1px solid var(--card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.room-group-summary {
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.room-group-summary::-webkit-details-marker { display: none; }
.room-group-summary::after {
    content: '▸';
    font-size: 14px;
    color: var(--hint, #8e8e93);
    transition: transform 0.15s;
}
.room-group[open] .room-group-summary::after {
    transform: rotate(90deg);
}
.room-group-title {
    font-size: 14px;
    color: var(--text, #fff);
}
.room-group-body {
    padding: 8px 16px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.room-item {
    display: inline-block;
    padding: 4px 10px;
    background: var(--secondary-bg, #2c2c2e);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text, #fff);
}

/* Текущая и прошедшая пара */
.room-group-current {
    border-color: rgba(52, 199, 89, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.2);
}
.room-group-current .room-group-title {
    color: #34c759;
}
.room-group-past {
    opacity: 0.55;
}
.room-group-past .room-group-title {
    color: var(--hint, #8e8e93);
}

/* ============ РЕГИСТРАЦИЯ v2 ============ */

body.registering .tabbar {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.tabbar {
    transition: transform 0.3s, opacity 0.3s;
}

.reg-progress {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 16px 0 8px;
}
.reg-progress-step {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--card-border, rgba(255,255,255,0.1));
    transition: background 0.3s, transform 0.3s;
}
.reg-progress-step.active {
    background: #3b82f6;
}
.reg-progress-step.current {
    transform: scaleY(1.6);
    background: #3b82f6;
    box-shadow: 0 0 8px rgba(59,130,246,0.5);
}
.reg-progress-label {
    text-align: center;
    font-size: 13px;
    color: var(--hint, #8e8e93);
    margin-bottom: 16px;
}

.reg-choice .reg-check {
    opacity: 0;
    color: #3b82f6;
    font-weight: 700;
    transition: opacity 0.2s;
}
.reg-choice.selected .reg-check {
    opacity: 1;
}

.reg-welcome, #facultyCard, #groupCard, #nameCard, .reg-submit {
    animation: regFadeIn 0.3s ease-out;
}
@keyframes regFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.reg-submit {
    margin-top: 16px;
    transition: opacity 0.2s, transform 0.1s;
}
.reg-submit.reg-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.reg-submit:not(.reg-disabled):active {
    transform: scale(0.98);
}

.reg-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    animation: regFadeIn 0.4s ease-out;
}
.reg-success-icon {
    font-size: 64px;
    animation: regPulse 0.6s ease-out;
}
.reg-success-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 16px;
    color: #3b82f6;
}
.reg-success-sub {
    font-size: 15px;
    color: var(--hint, #8e8e93);
    margin-top: 8px;
}
@keyframes regPulse {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* Анимация SVG-галочки в успехе регистрации */
.reg-success-circle svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: regDraw 0.5s 0.2s ease-out forwards;
}
@keyframes regDraw {
    to { stroke-dashoffset: 0; }
}

/* ============ РЕГИСТРАЦИЯ: карточки выбора (v2) ============ */

.reg-choice {
    position: relative;
    background: linear-gradient(135deg,
        rgba(99,102,241,0.06) 0%,
        rgba(139,92,246,0.06) 100%);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 16px;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.reg-choice::before {
    content: '';
    position: absolute;
    left: 1px; top: 1px; bottom: 1px;
    width: 3px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 15px 0 0 15px;
}

.reg-choice:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.22),
        0 0 0 1px rgba(99,102,241,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.reg-choice:active {
    transform: scale(0.98);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.reg-choice.selected {
    background: linear-gradient(135deg,
        rgba(99,102,241,0.16) 0%,
        rgba(139,92,246,0.16) 100%) !important;
    border-color: rgba(99,102,241,0.5) !important;
    box-shadow:
        0 4px 16px rgba(99,102,241,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.reg-choice.selected::before {
    opacity: 1;
}

.reg-choice.selected .menu-icon {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
    transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}

/* Выравнивание SVG-галочки в кнопке регистрации */
.reg-submit svg {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -2px;
    display: inline-block;
}

/* ============ СПЛЭШ ============ */
/* === SPLASH_RESTORE_V1 === */
.splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, #1a1f4a 0%, #0e1230 45%, #07091c 100%);
    animation: splashFadeIn 0.2s ease-out;
}
.splash::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22700%22 viewBox=%220 0 400 700%22%3E%3Cg fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.6%22 opacity=%220.07%22%3E%3Crect x=%2240%22 y=%2280%22 width=%2244%22 height=%2256%22 rx=%224%22/%3E%3Cpath d=%22M50 92h24M50 102h24M50 112h18%22/%3E%3Ccircle cx=%22200%22 cy=%22120%22 r=%2228%22/%3E%3Cpath d=%22M188 120l8 8 18-18%22 stroke-width=%222%22/%3E%3Cpath d=%22M320 70l40 20-40 20-40-20z%22/%3E%3Cpath d=%22M300 100v20c0 8 20 14 40 0V100%22/%3E%3Crect x=%2240%22 y=%22310%22 width=%2252%22 height=%2252%22 rx=%226%22/%3E%3Cpath d=%22M40 328h52M54 300v14M78 300v14%22/%3E%3Cpath d=%22M320 300h40v14c0 14-10 24-20 24s-20-10-20-24z%22/%3E%3Cpath d=%22M328 338h24M332 348h16%22/%3E%3Ccircle cx=%2270%22 cy=%22540%22 r=%2226%22/%3E%3Cpath d=%22M70 524v18l12 8%22/%3E%3Ccircle cx=%22330%22 cy=%22540%22 r=%2214%22/%3E%3Cpath d=%22M304 590c0-16 12-26 26-26s26 10 26 26%22/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    pointer-events: none;
    animation: splashIconsFloat 6s ease-in-out infinite alternate;
}
.splash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(99,102,241,0.10) 0%, transparent 60%);
    pointer-events: none;
}
.splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-out, visibility 0.3s;
}

.splash-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    animation: splashFadeIn 0.15s ease-out;
    padding: 24px;
}

/* Логотип — оригинальный, с glow */
.splash-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 30px rgba(99,102,241,0.6))
        drop-shadow(0 12px 32px rgba(0,0,0,0.5));
    
    border-radius: 50%;
}

.splash-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-top: 28px;
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #a5b4fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(165,180,252,0.4);
}

.splash-sub {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    margin-top: 14px;
    letter-spacing: 0.3px;
    animation: splashDots 0.8s ease-in-out infinite;
}

@keyframes splashFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes splashPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes splashDots {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
    50% { opacity: 1; }
}
    50% { opacity: 1; }
}

/* ============ НАСТРОЙКИ: тумблер ============ */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    gap: 12px;
}
.settings-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}
.settings-hint {
    font-size: 12px;
    color: var(--hint, #8e8e93);
    margin-top: 2px;
}
.switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--card-border, rgba(255,255,255,0.15));
    border-radius: 28px;
    cursor: pointer;
    transition: background 0.25s;
}
.switch .slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.switch input:checked + .slider {
    background: #3b82f6;
}
.switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* ============ ПЛАВНЫЕ ПЕРЕХОДЫ ============ */
.content.page-enter {
    animation: pageFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Если у пользователя "уменьшить анимацию" в системе — отключаем */
@media (prefers-reduced-motion: reduce) {
    .content.page-enter {
        animation: none;
    }
}

/* ============ АНИМАЦИЯ XP ============ */
.xp-float {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #3b82f6;
    text-shadow:
        0 0 20px rgba(59,130,246,0.9),
        0 0 40px rgba(59,130,246,0.5),
        0 2px 12px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%);
    animation: xpFloat 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    user-select: none;
    white-space: nowrap;
    will-change: transform, opacity;
}

.xp-float.negative {
    color: #ef4444;
    text-shadow:
        0 0 20px rgba(239,68,68,0.9),
        0 0 40px rgba(239,68,68,0.5),
        0 2px 12px rgba(0,0,0,0.5);
}

@keyframes xpFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    8% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25);
    }
    15% {
        transform: translate(-50%, -60%) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-100vh + 40px)) scale(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xp-float {
        animation-duration: 0.8s;
    }
}

/* ============ РЕДКИЕ ДОСТИЖЕНИЯ ============ */
.ach-card {
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ach-card.rare {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.12);
}

.ach-card.legendary {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.55);
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.25),
        0 0 48px rgba(168, 85, 247, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ach-card.rare::after,
.ach-card.legendary::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: achShine 3.5s ease-in-out infinite;
}

@keyframes achShine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-card.rare::after,
    .ach-card.legendary::after {
        animation: none;
    }
}

/* ============ АВАТАРЫ С ИНИЦИАЛАМИ ============ */
.avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.avatar-wrap.size-sm {
    width: 36px;
    height: 36px;
    font-size: 13px;
}
.avatar-wrap.size-lg {
    width: 48px;
    height: 48px;
    font-size: 17px;
}
.avatar-initials {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.avatar-wrap.size-sm .avatar-initials { font-size: 13px; }
.avatar-wrap.size-lg .avatar-initials { font-size: 17px; }


/* SVG в редакторе быстрых кнопок */
.quick-order-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quick-order-label svg {
    width: 20px;
    height: 20px;
    color: var(--accent-solid, var(--accent));
    flex-shrink: 0;
}

/* ============ LEVEL UP ============ */
.levelup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: levelupFadeIn 0.4s ease-out;
    overflow: hidden;
    cursor: pointer;
}
.levelup-overlay.hidden {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.levelup-content {
    text-align: center;
    padding: 32px 24px;
    max-width: 320px;
    animation: levelupScaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}
.levelup-icon {
    font-size: 96px;
    line-height: 1;
    animation: levelupPulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.8));
}
.levelup-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-top: 16px;
    letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}
.levelup-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 6px;
    font-weight: 500;
}
.levelup-progress {
    margin-top: 24px;
}
.levelup-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
.levelup-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #fbbf24);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
    animation: levelupFill 1s ease-out;
    transition: width 0.5s;
}
.levelup-progress-label {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.confetti {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: confettiFall 2.5s linear infinite;
    pointer-events: none;
}

@keyframes levelupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes levelupScaleIn {
    0% { opacity: 0; transform: scale(0.5); }
    60% { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes levelupPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes levelupFill {
    from { width: 0; }
}
@keyframes confettiFall {
    0% {
        top: -20px;
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        top: 110vh;
        transform: rotate(720deg);
        opacity: 0.3;
    }
}

/* ============ КНОПКА ТОПА (ТРОФЕЙ) ============ */
.top-trophy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--transition-fast), background var(--transition);
    z-index: 2;
}
.top-trophy-btn:active {
    transform: scale(0.9);
    background: rgba(255, 215, 0, 0.3);
}

/* ============ БАЛЛЫ В ТОПЕ ============ */
.top-score {
    margin-left: auto;
    padding-left: 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-solid, var(--accent));
    white-space: nowrap;
    letter-spacing: -0.3px;
}



/* Новая плитка (появление) */
.tile-2048-appear {
    animation: tile2048Appear 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes tile2048Appear {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
    60%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* Слияние (пульсация) */
.tile-2048-merge {
    animation: tile2048Merge 0.26s ease-out;
}
@keyframes tile2048Merge {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); box-shadow: 0 0 20px rgba(255,215,0,0.6); }
    100% { transform: scale(1); }
}
    50%  { transform: scale(1.18); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
    100% { transform: scale(1); }
}

/* Плавное появление всего поля при старте */
#grid2048 {
    animation: grid2048Fade 0.3s ease-out;
}
@keyframes grid2048Fade {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Пружинистые кнопки направления */
#grid2048 ~ div .btn {
    transition: transform 0.12s ease-out, background 0.15s;
}
#grid2048 ~ div .btn:active {
    transform: scale(0.9);
}

/* ============ СТРЕЛКИ 2048 ============ */
.arrows-2048 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
}
.arrows-2048 .arrow-btn {
    padding: 14px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-solid, var(--accent));
    transition: transform 0.12s ease-out, background 0.15s;
}
.arrows-2048 .arrow-btn:active {
    transform: scale(0.9);
    background: rgba(255, 106, 0, 0.12);
}
.arrows-2048 .arrow-btn svg {
    width: 24px;
    height: 24px;
}

/* ============ САПЁР: клетки ============ */
.mine-cell {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s, transform 0.1s;
}
.mine-cell:active:not(.revealed) {
    transform: scale(0.92);
}

/* ============ 2048: absolute-плитки с анимацией ============ */
.grid-2048-wrap {
    position: relative;
    aspect-ratio: 1;
    margin: 16px 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.grid-2048-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2%;
}
.grid-2048-bg > div {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.tile-2048 {
    position: absolute;
    left: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    will-change: transform, opacity;
    transition:
        transform 0.16s cubic-bezier(0.4, 0.0, 0.2, 1),
        background 0.15s ease-out,
        color 0.15s ease-out;
}

/* Появление новой плитки */
.tile-2048-appear {
    animation: tile2048Appear 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes tile2048Appear {
    0%   { opacity: 0; transform: scale(0.3) translate(var(--tx, 0), var(--ty, 0)); }
    60%  { opacity: 1; transform: scale(1.12) translate(var(--tx, 0), var(--ty, 0)); }
    100% { opacity: 1; transform: scale(1) translate(var(--tx, 0), var(--ty, 0)); }
}

/* Пульсация при слиянии */
.tile-2048-merge {
    animation: tile2048Merge 0.28s ease-out;
}
@keyframes tile2048Merge {
    0%   { transform: scale(1) translate(var(--tx, 0), var(--ty, 0)); }
    50%  { transform: scale(1.18) translate(var(--tx, 0), var(--ty, 0));
           box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
    100% { transform: scale(1) translate(var(--tx, 0), var(--ty, 0)); }
}

@media (prefers-reduced-motion: reduce) {
    .tile-2048 { transition: none; }
    .tile-2048-appear, .tile-2048-merge { animation: none; }
}


/* ============ BENTO GRID V2 ============ */
.bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.bento-card.wide {
    grid-column: span 2;
}

.bento-card.tall {
    grid-row: span 2;
}

.bento-card.small {
    padding: var(--space-3);
}

.bento-card.accent {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.15), rgba(255, 106, 0, 0.05));
    border-color: rgba(255, 106, 0, 0.3);
}

.bento-card.green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.3);
}

.bento-card.purple {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.05));
    border-color: rgba(167, 139, 250, 0.3);
}

.bento-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--hint);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bento-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-1);
}

.bento-hint {
    font-size: 12px;
    color: var(--hint);
}


/* ============ ANIMATIONS ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.bento-card {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.bento-card:nth-child(1) { animation-delay: 0.05s; }
.bento-card:nth-child(2) { animation-delay: 0.1s; }
.bento-card:nth-child(3) { animation-delay: 0.15s; }
.bento-card:nth-child(4) { animation-delay: 0.2s; }
.bento-card:nth-child(5) { animation-delay: 0.25s; }
.bento-card:nth-child(6) { animation-delay: 0.3s; }

.modal {
    animation: bounceIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab.active .tab-icon {
    animation: pulse 2s ease-in-out infinite;
}

/* ============ TOAST ============ */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(22, 22, 22, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    max-width: 90%;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-success { border-color: rgba(34, 197, 94, 0.4); }
.toast-error { border-color: rgba(239, 68, 68, 0.4); }
.toast-warning { border-color: rgba(251, 191, 36, 0.4); }
.toast-info { border-color: rgba(255, 106, 0, 0.4); }

.toast-icon { font-size: 18px; }

/* ============ SCHEDULE CARDS ============ */
.schedule-card {
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: all 0.2s ease;
}

.schedule-card:hover {
    transform: translateX(4px);
    border-left-color: var(--accent-light);
}

.schedule-card .pair-number {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-solid, var(--accent));
    margin-bottom: var(--space-1);
}

.schedule-card .pair-subject {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.schedule-card .pair-time {
    font-size: 12px;
    color: var(--hint);
    float: right;
}

.schedule-card .pair-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(167, 139, 250, 0.2);
    color: var(--purple);
    margin-bottom: var(--space-2);
}

/* ============================================================ */
/* ACCENT OVERRIDE — фикс для SVG-иконок и таббара              */
/* ============================================================ */

/* Таббар: активная иконка — accent-solid */
.tabbar .tab.active .tab-icon svg,
.tabbar .tab.active .tab-icon {
    stroke: var(--accent-solid, var(--accent)) !important;
    color: var(--accent-solid, var(--accent)) !important;
}
.tabbar .tab.active .tab-label {
    color: var(--accent-solid, var(--accent)) !important;
}

/* Таббар: ВСЕ иконки наследуют accent-solid (на случай, если active не сработал) */
.tabbar .tab .tab-icon svg {
    stroke: var(--accent-solid, var(--accent)) !important;
}

/* Сайдбар: иконки — accent-solid */
.sidebar .sidebar-item-icon,
.sidebar .sidebar-item-icon svg {
    stroke: var(--accent-solid, var(--accent)) !important;
    color: var(--accent-solid, var(--accent)) !important;
}

/* Меню-иконки (в карточках, профиле) — accent-solid */
.menu-icon,
.menu-icon svg {
    stroke: var(--accent-solid, var(--accent)) !important;
    color: var(--accent-solid, var(--accent)) !important;
}

/* svg внутри .svg-badge, .tab-icon */
.svg-badge svg {
    stroke: var(--accent-solid, var(--accent)) !important;
}


/* ============================================================
   АНИМИРОВАННЫЕ РАМКИ АВАТАРА (Premium) — v3 frame-box
   ============================================================ */
.frame-box {
    display: inline-block;
    padding: 3px;
    border-radius: 50%;
    position: relative;
    line-height: 0;
}

.frame-box.frame-aurora {
    background: conic-gradient(from 0deg,
        #a855f7, #ec4899, #f59e0b, #22c55e, #06b6d4, #a855f7);
    animation: frameSpin 4s linear infinite;
}

.frame-box.frame-pulse {
    background: var(--accent-solid, var(--accent));
    animation: framePulse 1.8s ease-in-out infinite;
}

.frame-box.frame-holo {
    background: conic-gradient(from 0deg,
        #ff0080, #ff8c00, #ffee00, #00ff88, #00b4ff, #a020f0, #ff0080);
    animation: frameSpin 2.5s linear infinite;
}

.frame-box > .avatar-wrap {
    background-clip: padding-box;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

@keyframes frameSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes framePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--accent-glow, rgba(255,106,0,0.5)); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 6px transparent; }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}

/* Компактная кнопка (для магазина) */
.btn.btn-sm {
    min-width: auto;
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ============ TOAST v2 (custom) ============ */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 2500; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); padding: 12px 16px 12px 14px; background: var(--card-bg, #1a1a1a); border: 1px solid var(--card-border, rgba(255,255,255,0.1)); border-left: 3px solid var(--toast-color, var(--accent-solid, #3b82f6)); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); will-change: transform, opacity; }
.toast.toast-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.toast-hide { opacity: 0; transform: translate(-50%, 20px); }
.toast-icon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.toast-text { flex: 1; font-size: 14px; line-height: 1.35; color: var(--text, #fff); font-weight: 500; letter-spacing: -0.1px; word-break: break-word; }

/* ============ CONFIRM ============ */
.confirm-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 2px; }
.confirm-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 50%; background: rgba(255,255,255,0.06); margin-bottom: 14px; }
.confirm-title { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 8px; color: var(--text, #fff); }
.confirm-text { font-size: 14.5px; line-height: 1.45; color: var(--text-secondary, #9ca3af); margin-bottom: 22px; white-space: pre-line; word-break: break-word; }
.confirm-actions { display: flex; gap: 10px; width: 100%; }
.confirm-btn { flex: 1; padding: 13px 16px; border-radius: 14px; border: none; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .12s, opacity .15s, background .15s; letter-spacing: -0.2px; }
.confirm-btn:active { transform: scale(0.97); }
.confirm-cancel { background: rgba(255,255,255,0.08); color: var(--text, #fff); }
.confirm-cancel:active { background: rgba(255,255,255,0.14); }
.confirm-ok { background: var(--accent-solid, var(--accent, #3b82f6)); color: #fff; box-shadow: 0 6px 20px var(--accent-glow, rgba(59,130,246,0.4)); }
.confirm-ok.danger { background: #ef4444; box-shadow: 0 6px 20px rgba(239,68,68,0.4); }

/* SVG_TOAST_CSS_V1 - inline SVG icon coloring */
.toast .toast-icon svg { width: 16px; height: 16px; display: block; }
.toast .toast-icon { color: var(--toast-color, var(--accent-solid, #3b82f6)); background: transparent; }
.toast.toast-success .toast-icon { color: #22c55e; }
.toast.toast-error .toast-icon { color: #ef4444; }
.toast.toast-warn .toast-icon { color: #f59e0b; }
.toast.toast-info .toast-icon { color: var(--accent-solid, #3b82f6); }

/* TOAST_IOS_FIX_V1 - iOS WebView backdrop-filter bug fix */
.toast .toast-icon,
.toast .toast-text { position: relative; z-index: 1; }
.toast { isolation: isolate; }
.toast .toast-icon svg { stroke: currentColor !important; }

/* TOAST_SYMBOL_CSS_V1 - unicode symbol styling */
.toast .toast-icon { font-weight: 800; font-size: 15px; line-height: 1; }
.toast.toast-success .toast-icon { color: #22c55e; }
.toast.toast-error   .toast-icon { color: #ef4444; }
.toast.toast-warn    .toast-icon { color: #f59e0b; }
.toast.toast-info    .toast-icon { color: var(--accent-solid, #3b82f6); }

/* HW_DELETE_V1 - trash button for starosta */
.card { position: relative; }
.hw-del {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    line-height: 1;
}
.hw-del:active { background: rgba(239,68,68,0.25); transform: scale(0.94); }



/* BENTO_READABILITY_V2 - белый текст + тень (читается на любом фоне) */
.bento-card .bento-label,
.bento-card .bento-hint,
.bento-card .bento-value,
.bento-card .bento-hint strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.4) !important;
    opacity: 1 !important;
}

/* Иконки внутри label/hint — тоже белые */
.bento-card .bento-label svg,
.bento-card .bento-hint svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ============ TG_AD_V1 - fullscreen ad ============ */
.tg-ad {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.tg-ad.tg-ad-show { opacity: 1; pointer-events: auto; }
.tg-ad-inner {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: linear-gradient(160deg, #1f2937 0%, #111827 60%, #0b1220 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 32px 24px 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    text-align: center;
    transform: scale(0.92) translateY(20px);
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.tg-ad.tg-ad-show .tg-ad-inner { transform: scale(1) translateY(0); }
.tg-ad-inner::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -20%;
    right: -20%;
    height: 80%;
    background: radial-gradient(circle, rgba(34,158,217,0.35) 0%, transparent 60%);
    pointer-events: none;
}
.tg-ad-hero { position: relative; z-index: 1; }
.tg-ad-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #229ED9, #1c7fb0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 12px 32px rgba(34,158,217,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.tg-ad-icon svg { width: 40px; height: 40px; }
.tg-ad-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.tg-ad-text {
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255,255,255,0.72);
    margin-bottom: 24px;
    letter-spacing: -0.1px;
}
.tg-ad-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tg-ad-btn {
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.2px;
    transition: transform .12s, opacity .15s;
}
.tg-ad-btn:active { transform: scale(0.97); }
.tg-ad-sub {
    background: linear-gradient(135deg, #229ED9, #1c7fb0);
    color: #fff;
    box-shadow: 0 8px 24px rgba(34,158,217,0.45);
}
.tg-ad-skip {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.72);
}
.tg-ad-skip:active { background: rgba(255,255,255,0.12); }
.tg-ad-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    transition: background .15s;
}
.tg-ad-close:active { background: rgba(255,255,255,0.18); }

/* ============ TG_AD_ADMIN_V1 ============ */
.ad-admin-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; }
.ad-admin-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.2px; }
.ad-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ad-admin-label { font-size: 13px; color: var(--hint); font-weight: 600; }
.ad-toggle { width: 52px; height: 30px; border-radius: 15px; background: rgba(255,255,255,0.08); position: relative; cursor: pointer; transition: background 0.25s; flex-shrink: 0; }
.ad-toggle.on { background: var(--accent-solid, var(--accent, #3b82f6)); }
.ad-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.25s; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.ad-toggle.on::after { transform: translateX(22px); }
.ad-preview { background: rgba(0,0,0,0.72); border-radius: 16px; padding: 20px 16px; margin-bottom: 12px; text-align: center; }
.ad-preview-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.ad-preview-text { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.4; }



/* === v9.1: стеклянный bento без backdrop-filter (iOS-safe) === */
.bento-card {
    background: rgba(30, 30, 50, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
}
.bento-card.accent {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.85), rgba(216, 85, 0, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.3) !important;
    color: #fff !important;
}
.bento-card.green {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.85), rgba(38, 168, 72, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(48, 209, 88, 0.3) !important;
    color: #fff !important;
}
.bento-card.orange {
    /* UI_FIX_V1 */
    background: linear-gradient(135deg, #1A2540, #12151C) !important;
    border-color: rgba(74, 163, 255, 0.14) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.bento-card.purple {
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.85), rgba(142, 45, 226, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(191, 90, 242, 0.3) !important;
    color: #fff !important;
}
.bento-card.pink {
    background: linear-gradient(135deg, rgba(255, 55, 95, 0.85), rgba(215, 0, 64, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(255, 55, 95, 0.3) !important;
    color: #fff !important;
}
.bento-card.wide {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* iOS-specific */
@supports (-webkit-touch-callout: none) {
    .bento-card {
        -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
        backdrop-filter: blur(20px) saturate(140%) !important;
    }
}

/* === v9.1: фикс корзины в расписании === */
.pair-row {
    position: relative !important;
}
.pair-delete-btn {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
}

/* Светлая тема */
body.light-theme .bento-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* === v9.2: стеклянный bento (iOS-safe) === */
.bento-card {
    background: rgba(30, 30, 50, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
}
.bento-card.accent {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.85), rgba(216, 85, 0, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.3) !important;
    color: #fff !important;
}
.bento-card.green {
    background: linear-gradient(135deg, rgba(48, 209, 88, 0.85), rgba(38, 168, 72, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(48, 209, 88, 0.3) !important;
    color: #fff !important;
}
.bento-card.orange {
    /* UI_FIX_V1 */
    background: linear-gradient(135deg, #1A2540, #12151C) !important;
    border-color: rgba(74, 163, 255, 0.14) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}
.bento-card.purple {
    background: linear-gradient(135deg, rgba(191, 90, 242, 0.85), rgba(142, 45, 226, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(191, 90, 242, 0.3) !important;
    color: #fff !important;
}
.bento-card.pink {
    background: linear-gradient(135deg, rgba(255, 55, 95, 0.85), rgba(215, 0, 64, 0.75)) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(255, 55, 95, 0.3) !important;
    color: #fff !important;
}
body.light-theme .bento-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* === v9.2: pair-row + pair-delete-btn === */
.pair-row {
    position: relative !important;
    padding-bottom: 44px !important;  /* место под корзину */
    min-height: 44px !important;
}
.pair-row .card-title {
    margin-bottom: 8px !important;
}
.pair-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.15s ease !important;
}
.pair-delete-btn:active {
    transform: scale(0.92) !important;
    background: rgba(239, 68, 68, 0.25) !important;
}
.pair-delete-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* === v9.3: pair-sub-row + корзина на уровне препода === */
.pair-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}
.pair-sub-info {
    flex: 1;
    min-width: 0;
}
.pair-delete-btn {
    flex-shrink: 0;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.15s ease !important;
}
.pair-delete-btn:active {
    transform: scale(0.92) !important;
    background: rgba(239, 68, 68, 0.25) !important;
}
.pair-delete-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
}
.pair-row {
    padding-bottom: 0 !important;  /* убираем старый padding */
}

/* === BETA_CARDS_V2 === */

/* ---- Inline-плашка бета-теста (главная) ---- */
.beta-inline-bar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    margin:0 0 14px 0;
    border-radius:14px;
    background:linear-gradient(90deg, rgba(255,167,38,0.12) 0%, rgba(255,167,38,0.05) 60%, rgba(255,167,38,0.02) 100%);
    border:1px solid rgba(255,167,38,0.25);
    position:relative;
    overflow:hidden;
}
.beta-inline-bar::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:#ffa726;
}
.beta-inline-bar-icon{
    flex:0 0 auto;
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    color:#ffb74d;
}
.beta-inline-bar-icon svg{ width:22px; height:22px; }
.beta-inline-bar-icon .emoji{
    font-size:18px;
    line-height:1;
}
.beta-inline-bar-body{ flex:1 1 auto; min-width:0; }
.beta-inline-bar-title{
    font-size:14px;
    font-weight:700;
    color:#ffb74d;
    line-height:1.2;
    margin-bottom:2px;
}
.beta-inline-bar-text{
    font-size:12px;
    color:#9aa0a6;
    line-height:1.35;
}
.beta-inline-bar-link{
    color:#4ea1ff;
    text-decoration:none;
    font-weight:600;
}
.beta-inline-bar-link:active{ opacity:0.7; }

/* ---- Модалка бета-теста ---- */
.beta-notice-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.75);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    z-index:9999;
    animation:betaFadeIn .18s ease-out;
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
}
@keyframes betaFadeIn{ from{opacity:0;} to{opacity:1;} }

.beta-notice-card{
    width:100%;
    max-width:340px;
    background:#22262e;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:22px;
    padding:28px 22px 20px;
    text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,0.55);
    animation:betaPop .22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes betaPop{
    from{ transform:scale(.94); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.beta-notice-icon{
    width:56px;
    height:56px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffc043;
}
.beta-notice-icon svg{
    width:56px;
    height:56px;
    display:block;
}
.beta-notice-icon .emoji{
    font-size:44px;
    line-height:1;
}

.beta-notice-title{
    font-size:21px;
    font-weight:800;
    color:#ffffff;
    margin:0 0 12px;
    letter-spacing:-0.2px;
}

.beta-notice-text{
    font-size:14.5px;
    line-height:1.55;
    color:#a8adb5;
    margin:0 0 22px;
}

.beta-notice-link{
    color:#4ea1ff;
    text-decoration:none;
    font-weight:600;
}

.beta-notice-btn{
    display:block;
    width:100%;
    height:52px;
    border:none;
    border-radius:12px;
    background:#ff7a00;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:transform .08s ease, opacity .15s ease;
    -webkit-tap-highlight-color:transparent;
}
.beta-notice-btn:active{ transform:scale(.98); }
.beta-notice-btn[disabled]{
    opacity:0.5;
    cursor:not-allowed;
    background:#4a4d54;
}


/* === BANNED_SCREEN_V1 === */

body.banned-mode .tabbar { display: none !important; }
body.banned-mode { background: #0a0a0a !important; overflow: hidden !important; }

.banned-screen {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0a0a0a;
}
.banned-card {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(180deg, #1a1315 0%, #140f11 100%);
    border: 1px solid rgba(255,59,59,0.35);
    border-radius: 20px;
    padding: 28px 22px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(255,59,59,0.15), 0 0 0 1px rgba(255,255,255,0.02) inset;
    animation: bannedPop 0.25s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes bannedPop {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.banned-icon {
    font-size: 64px;
    line-height: 1;
    margin: 0 0 14px;
    filter: drop-shadow(0 6px 16px rgba(255,59,59,0.4));
}
.banned-title {
    font-size: 26px;
    font-weight: 800;
    color: #ff3b3b;
    margin-bottom: 18px;
    letter-spacing: -0.3px;
}
.banned-reason-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}
.banned-reason {
    display: inline-block;
    min-width: 200px;
    max-width: 100%;
    padding: 14px 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    font-size: 15px;
    color: #e8e8e8;
    margin-bottom: 22px;
    word-break: break-word;
}
.banned-help {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}
.banned-btn {
    display: inline-block;
    padding: 12px 28px;
    background: rgba(255,59,59,0.12);
    border: 1px solid rgba(255,59,59,0.45);
    border-radius: 12px;
    color: #ff5f5f;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, background 0.15s;
    font-family: inherit;
}
.banned-btn:active {
    transform: scale(0.97);
    background: rgba(255,59,59,0.2);
}

/* ===== MAINTENANCE_CSS_V1 ===== */
body.maintenance-mode .tabbar { display: none !important; }
body.maintenance-mode { background: #0a0d14 !important; overflow: hidden !important; }

.maintenance-screen {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0a0d14;
}
.maintenance-card {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(180deg, #131a26 0%, #0f141d 100%);
    border: 1px solid rgba(90,140,255,0.32);
    border-radius: 20px;
    padding: 30px 22px 26px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(90,140,255,0.14), 0 0 0 1px rgba(255,255,255,0.02) inset;
    animation: maintPop 0.25s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes maintPop {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.maintenance-icon {
    font-size: 64px;
    line-height: 1;
    margin: 0 0 14px;
    filter: drop-shadow(0 6px 16px rgba(90,140,255,0.38));
}
.maintenance-title {
    font-size: 22px;
    font-weight: 800;
    color: #6ea0ff;
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}
.maintenance-text {
    display: inline-block;
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: #e8e8e8;
    word-break: break-word;
    white-space: pre-wrap;
}

/* .modal-sub — используется в модалке режима обслуживания */
.modal-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 6px 0 4px;
    line-height: 1.4;
}
/* ===== /MAINTENANCE_CSS_V1 ===== */


/* ===== UI_BG_ORANGE_V1: сетка + синий glow на фоне ===== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bg);  /* UI_FIX_V1 */
    background-image:
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

body::after {
    content: '';
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120vw;
    height: 60vh;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        var(--bg-glow) 0%,
        transparent 60%
    );
}
/* ===== /UI_BG_ORANGE_V1 ===== */


/* ===== UI_14B_V1 — стекло + glow активной иконки tabbar (только дополнения) ===== */

/* 1. Tabbar — стекло (только фон и blur, layout не трогаем) */
.tabbar {
    background: rgba(9, 11, 16, 0.72) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 2. Активная иконка tabbar — синий + glow */
.tabbar .tab.active .tab-icon svg,
.tabbar .tab.active .tab-icon {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 6px rgba(22, 131, 255, 0.55)) !important;
}
.tabbar .tab.active .tab-label {
    color: var(--accent) !important;
    font-weight: 600 !important;
}
.tabbar .tab:not(.active) {
    color: #5A6273 !important;
}

/* 3. Bento — стекло (только фон, blur, border) */
.bento-card {
    background: rgba(18, 21, 28, 0.55) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* 4. Bento.orange — стекло с синим оттенком */
.bento-card.orange {
    background: rgba(26, 37, 64, 0.5) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-color: rgba(74, 163, 255, 0.18) !important;
}

/* ===== /UI_14B_V1 ===== */


/* ===== UI_15_BOOST_V1 — усиление glow, сетки, стекла ===== */

/* 1. Переменные: сетка и glow ярче */
:root {
    --bg-grid: rgba(255, 255, 255, 0.045) !important;
    --bg-glow: rgba(20, 120, 255, 0.14) !important;
}

/* 2. Tabbar: чуть прозрачнее фон, чуть ярче blur */
.tabbar {
    background: rgba(9, 11, 16, 0.60) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* 3. Активная иконка tabbar: сильнее glow */
.tabbar .tab.active .tab-icon svg,
.tabbar .tab.active .tab-icon {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 10px rgba(22, 131, 255, 0.85)) !important;
}
.tabbar .tab.active .tab-label {
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(22, 131, 255, 0.55) !important;
}

/* 4. Bento: стекло заметнее (прозрачнее, blur сильнее) */
.bento-card {
    background: rgba(18, 21, 28, 0.42) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

/* 5. Bento.orange: тоже стекляннее */
.bento-card.orange {
    background: rgba(26, 37, 64, 0.42) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-color: rgba(74, 163, 255, 0.22) !important;
}

/* 6. Bento hover: легкий синий glow */
.bento-card:hover {
    border-color: rgba(74, 163, 255, 0.28) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(22, 131, 255, 0.10) !important;
}

/* ===== /UI_15_BOOST_V1 ===== */


/* ===== UI_GLASS_V2 — стекло для всех карточек, меню, модалок, кнопок ===== */

/* 1. Карточки расписания (.pair-row) */
.pair-row {
    background: rgba(18, 21, 28, 0.42) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--radius, 20px) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
}
.pair-row:hover {
    border-color: rgba(74, 163, 255, 0.28) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(22, 131, 255, 0.10) !important;
}

/* 2. Меню-items на главной и в админке */
.menu-item {
    background: rgba(18, 21, 28, 0.42) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.menu-item:active {
    background: rgba(22, 131, 255, 0.14) !important;
}

/* 3. Сайдбар — секции и заголовки */
.sidebar-section-title {
    color: var(--hint) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.75 !important;
    padding: 8px 4px 4px !important;
}
.sidebar-item-icon svg,
.sidebar .sidebar-item-icon {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 5px rgba(22, 131, 255, 0.4)) !important;
}
.sidebar-badge {
    background: rgba(22, 131, 255, 0.18) !important;
    border: 1px solid rgba(74, 163, 255, 0.35) !important;
    color: var(--accent-soft, #27A8FF) !important;
}

/* 4. Modal — контейнер и поля */
.modal-content {
    background: rgba(13, 17, 24, 0.85) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}
.modal-input,
.modal-textarea {
    background: rgba(18, 21, 28, 0.55) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
}
.modal-input:focus,
.modal-textarea:focus {
    background: rgba(18, 21, 28, 0.72) !important;
    border-color: var(--accent-solid, var(--accent)) !important;
    box-shadow: 0 0 0 3px rgba(22, 131, 255, 0.20) !important;
}

/* 5. Кнопки — стекло с акцентом */
.btn {
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    box-shadow: 0 4px 16px rgba(22, 131, 255, 0.22) !important;
}
.btn-outline {
    background: rgba(18, 21, 28, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--text) !important;
}
.btn-outline:active {
    background: rgba(22, 131, 255, 0.12) !important;
    border-color: rgba(74, 163, 255, 0.35) !important;
}

/* 6. Файлы ДЗ (hw-file-row) — лёгкое стекло */
.hw-file-row {
    background: rgba(18, 21, 28, 0.42) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
}

/* 7. Карточки schedule-card (на всякий случай, если используются) */
.schedule-card {
    background: rgba(18, 21, 28, 0.42) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
}

/* ===== /UI_GLASS_V2 ===== */


/* ===== UI_GLASS_IOS_V1 — iOS-safe glass (gradient + border + inset) ===== */
/* На iOS backdrop-filter не работает → используем градиент-имитацию.
   На Desktop/Android через @supports включаем настоящий blur. */

.card,
.pair-row,
.bento-card {
    background: linear-gradient(135deg,
        rgba(30, 40, 60, 0.55) 0%,
        rgba(18, 21, 28, 0.38) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius, 20px) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.card:hover,
.pair-row:hover {
    border-color: rgba(74, 163, 255, 0.28) !important;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(22, 131, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Реальный blur — только там, где поддерживается (Desktop/Android) */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .card,
    .pair-row,
    .bento-card {
        background: linear-gradient(135deg,
            rgba(30, 40, 60, 0.42) 0%,
            rgba(18, 21, 28, 0.28) 100%) !important;
        backdrop-filter: blur(24px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    }
}

/* Синие bento (.orange) — сохраняем синий оттенок */
.bento-card.orange {
    background: linear-gradient(135deg,
        rgba(26, 37, 64, 0.55) 0%,
        rgba(18, 21, 28, 0.38) 100%) !important;
    border-color: rgba(74, 163, 255, 0.22) !important;
}

/* Модалки */
.modal-content {
    background: linear-gradient(135deg,
        rgba(20, 26, 38, 0.85) 0%,
        rgba(13, 17, 24, 0.80) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .modal-content {
        backdrop-filter: blur(30px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
        background: linear-gradient(135deg,
            rgba(20, 26, 38, 0.72) 0%,
            rgba(13, 17, 24, 0.65) 100%) !important;
    }
}

/* Меню-items */
.menu-item {
    background: linear-gradient(135deg,
        rgba(30, 40, 60, 0.48) 0%,
        rgba(18, 21, 28, 0.32) 100%) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .menu-item {
        backdrop-filter: blur(16px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    }
}
/* ===== /UI_GLASS_IOS_V1 ===== */
/* ===== UI_PAIR_ROW_FLAT_V1 — убрать двойной контур на расписании ===== */
/* #schedulePairsBox > .card > .pair-row — .pair-row внутри .card.
   Делаем .pair-row полностью прозрачным — без фона, границы, тени. */
#schedulePairsBox .pair-row {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#schedulePairsBox .pair-row:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* ===== /UI_PAIR_ROW_FLAT_V1 ===== */

/* ===== STAROSTA_BAR_CSS_V1 ===== */
.starosta-inline-bar {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(94, 92, 230, 0.10), rgba(167, 139, 250, 0.08));
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 16px;
    align-items: flex-start;
}
.starosta-inline-bar-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(167, 139, 250, 0.12);
    border-radius: 10px;
}
.starosta-inline-bar-icon svg {
    width: 20px;
    height: 20px;
}
.starosta-inline-bar-body {
    flex: 1;
    min-width: 0;
}
.starosta-inline-bar-title {
    font-size: 14px;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.starosta-inline-bar-text {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.starosta-inline-bar-link {
    color: #a78bfa;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(167, 139, 250, 0.5);
}
/* ===== /STAROSTA_BAR_CSS_V1 ===== */

/* ===== SCHEDULE_LINK_CSS_V1 ===== */
.schedule-empty-link {
    color: var(--accent-soft, #27A8FF);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(39, 168, 255, 0.5);
    padding-bottom: 1px;
}
/* ===== /SCHEDULE_LINK_CSS_V1 ===== */

/* ===== FAQ_PAGE_CSS_V1 ===== */
.faq-item {
    transition: border-color 0.15s ease;
}
.faq-item:active {
    border-color: var(--accent-soft, #27A8FF);
}
.faq-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.faq-a {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
}
/* ===== /FAQ_PAGE_CSS_V1 ===== */



/* ============ RAFFLE_BAR_V1: плашка розыгрыша ============ */
.raffle-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,193,7,0.18), rgba(255,122,0,0.18));
    border: 1px solid rgba(255,193,7,0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.raffle-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,193,7,0.15), transparent 60%);
    pointer-events: none;
}
.raffle-bar:active {
    transform: scale(0.985);
    box-shadow: 0 4px 16px rgba(255,193,7,0.15);
}
.raffle-bar-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,193,7,0.35), rgba(255,122,0,0.35));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd60a;
    border: 1px solid rgba(255,193,7,0.4);
}
.raffle-bar-icon svg {
    width: 24px;
    height: 24px;
}
.raffle-bar-body {
    flex: 1;
    min-width: 0;
}
.raffle-bar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #f5f5f5);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.raffle-bar-text {
    font-size: 13px;
    color: var(--hint, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.raffle-bar-arrow {
    flex-shrink: 0;
    font-size: 22px;
    color: rgba(255,193,7,0.7);
    font-weight: 300;
}
.raffle-bar.finished {
    background: linear-gradient(135deg, rgba(67,160,71,0.18), rgba(46,125,50,0.18));
    border-color: rgba(67,160,71,0.45);
}
.raffle-bar.finished .raffle-bar-icon {
    background: linear-gradient(135deg, rgba(67,160,71,0.35), rgba(46,125,50,0.35));
    color: #66bb6a;
    border-color: rgba(67,160,71,0.4);
}
.raffle-bar.finished .raffle-bar-arrow {
    color: rgba(67,160,71,0.7);
}
/* ============ /RAFFLE_BAR_V1 ============ */