@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:ital,wght@0,400;0,600;0,800;1,800&family=Roboto+Mono:wght@700&display=swap');

:root {
    /* 🔥 ЕДИНСТВЕННЫЙ АКЦЕНТ */
    --primary: #FFC107; 
    --primary-hover: #ffcf33; 
    --primary-light: rgba(255, 193, 7, 0.15);

    /* СВЕТЛАЯ ТЕМА */
    --bg-body: #ffffff; 
    --bg-sidebar: #f4f4f5; 
    --bg-surface: #ffffff; 
    --bg-surface-hover: #e4e4e7;
    --text-main: #09090b; 
    --text-muted: #71717a; 
    --border: #e4e4e7;

    --msg-mine: #f4f4f5; 
    --msg-mine-text: #09090b;
    --msg-theirs: #ffffff; 
    --msg-theirs-text: #09090b;

    /* 🔥 Убиваем радугу, превращаем статусы в монохром */
    --danger: #09090b; 
    --danger-light: rgba(0, 0, 0, 0.05);
    --success: #09090b; 
    --info: #09090b;
    --warning: #09090b;

    --radius-lg: 20px; 
    --radius-md: 12px; 
    --radius-sm: 8px;
    --nav-height: 65px;
}

[data-theme="dark"] {
    /* 🎨 МЯГКИЙ БЛАГОРОДНЫЙ ГРАФИТ */
    --bg-body: #1e1f24;          /* Основной фон чата (вместо #121212) */
    --bg-sidebar: #24262c;       /* Фон левой колонки (сайдбара) */
    --bg-surface: #2a2c34;       /* Фон карточек гонок, модалок и поиска */
    --bg-surface-hover: #353842; /* Цвет при наведении и активные карточки */
    --text-main: #f4f4f5;        /* Основной текст (светло-серый) */
    --text-muted: #9ba1ad;       /* Второстепенный текст и даты */
    --border: #333640;           /* Графитовые разделители и рамки */

    /* Сообщения в чате */
    --msg-mine: #353842;         /* Мои сообщения */
    --msg-mine-text: #ffffff;
    --msg-theirs: #2a2c34;       /* Чужие сообщения */
    --msg-theirs-text: #ffffff;

    /* Статусы */
    --danger: #ffffff; 
    --danger-light: rgba(255, 255, 255, 0.1);
    --success: #ffffff; 
    --info: #ffffff;
    --warning: #ffffff;
}

/* БАЗОВЫЕ СТИЛИ */
html, body { 
    margin: 0; padding: 0; width: 100vw; 
    height: var(--app-height, 100vh) !important;
    overflow: hidden; background: var(--bg-body); font-family: 'Manrope', sans-serif; color: var(--text-main); transition: background-color 0.3s ease, color 0.3s ease; overscroll-behavior-y: none; overscroll-behavior-x: none; 
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: 'Unbounded', sans-serif; margin: 0; text-transform: uppercase; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(138, 141, 155, 0.3); border-radius: 10px; }

/* МЕССЕНДЖЕР И ЛЕЙАУТ */
.messenger-layout { 
    display: flex; width: 100vw; max-width: 1400px; margin: 0 auto; 
    height: var(--app-height, 100vh) !important;
    background: var(--bg-surface); border-left: 1px solid var(--border); border-right: 1px solid var(--border); position: relative; overflow: hidden; 
}
.sidebar { width: 380px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-sidebar); flex-shrink: 0; z-index: 10; position: relative; height: 100%; }
.sidebar-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-sidebar); z-index: 2; }

.app-brand { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; font-style: normal; color: var(--text-main); letter-spacing: -0.5px; }
.app-brand span { color: var(--text-main); }

.btn-circle { background: var(--bg-surface-hover); border: 1px solid var(--border); color: var(--text-main); border-radius: 50%; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.btn-circle:hover { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }

.tab-content { 
    flex: 1 1 0% !important; 
    min-height: 0 !important; 
    height: auto !important; 
    display: none; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative; 
    padding-bottom: 0 !important; 
}
.tab-content.active { display: flex !important; }

.bottom-nav { 
    position: relative !important;
    width: 100% !important; 
    height: var(--nav-height, 56px) !important; 
    background: transparent !important; 
    border: none !important; 
    display: flex !important; 
    justify-content: space-around !important; 
    align-items: center !important; 
    padding: 0 !important;
    z-index: 1 !important; 
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); cursor: pointer; transition: 0.2s; height: 100%; font-size: 10px; font-weight: 600; font-family: 'Manrope'; }
.nav-item:hover { color: var(--text-main); background: var(--bg-surface-hover); }
.nav-item.active { color: var(--text-main); font-weight: 800; }

.search-box { padding: 15px; border-bottom: 1px solid var(--border); }
.search-input { width: 100%; background: var(--bg-surface-hover); border: 1px solid var(--border); color: var(--text-main); padding: 12px 20px; border-radius: 50px; font-family: 'Manrope'; outline: none; transition: 0.2s; font-size: 13px; }
.search-input:focus { border-color: var(--text-muted); }

/* СПИСКИ И ЧАТЫ */
.chat-list { 
    flex: 1 1 0% !important; 
    min-height: 0 !important; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    padding: 10px !important; 
    overflow-y: auto !important; 
    scroll-behavior: smooth; 
}
.chat-item { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 12px; cursor: pointer; transition: 0.2s; position: relative; }
.contact-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 300px; }
.contact-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 15px; border-radius: 12px; cursor: pointer; transition: 0.2s; background: transparent; border: 1px solid transparent; }
.contact-item:hover { background: var(--bg-surface-hover); border-color: var(--border); }
.chat-item:hover { background: var(--bg-surface-hover); }
.chat-item.active { background: var(--bg-surface-hover); border-left: 3px solid var(--text-main); }

.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-surface-hover); border: 1px solid var(--border); display: flex; justify-content: center; align-items: center; font-family: 'Unbounded'; font-weight: 800; color: var(--text-main); flex-shrink: 0; font-size:18px; text-transform:uppercase; transition: 0.2s; }
.avatar.clickable:hover { border-color: var(--text-main); cursor: pointer; }

.chat-info { flex: 1; overflow: hidden; pointer-events: none; }
.chat-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.chat-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; display: flex; align-items: center; gap: 4px; }

/* ОКНО ЧАТА */
.chat-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-body); position: relative; min-width: 0; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; }
.chat-header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 15px; background: var(--bg-surface); position: relative; z-index: 1001; }

.header-status-badge { font-size: 9px; font-family: 'Unbounded'; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; border: 1px solid var(--border); background: transparent; cursor: default; }
.role-super { color: var(--text-main); border-color: var(--text-main); }
.role-admin { color: var(--text-main); }
.role-judge { color: var(--text-main); }
.role-cap { color: var(--text-main); }
.role-rider { color: var(--text-muted); }

/* ВОЗВРАЩАЕМ ВОЛНЫ НА ФОН ЧАТА */
.messages-container-wrapper { 
    flex: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; 
    background-color: transparent !important; 
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q 15 0, 30 15 T 60 15' stroke='%23ffffff' fill='none' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E"); 
    background-repeat: repeat; background-size: 60px 40px; 
}

[data-theme="light"] .messages-container-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q 15 0, 30 15 T 60 15' stroke='%23000000' fill='none' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
}

.messages-container { flex: 1; overflow-y: auto; padding: 25px 20px; display: flex; flex-direction: column; gap: 15px; }
.scroll-bottom-btn { position: absolute; right: 20px; bottom: 20px; width: 45px; height: 45px; border-radius: 50%; background: var(--bg-surface-hover); border: 1px solid var(--border); color: var(--text-main); display: none; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 20; transition: 0.2s; }
.scroll-bottom-btn:hover { background: var(--text-main); color: var(--bg-body); }

.message-row { display: flex; flex-direction: column; max-width: 85%; position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; }
.message-row.mine { align-self: flex-end; align-items: flex-end; }
.message-row.theirs { align-self: flex-start; align-items: flex-start; }

.msg-sender-name { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; margin-left: 4px; display: flex; gap: 6px; align-items: center; transition: 0.2s; }
.msg-sender-name.clickable:hover { color: var(--text-main); }

.message-bubble { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.4; position: relative; word-wrap: break-word; min-width: 100px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 1px solid var(--border); }
.message-row.mine .message-bubble { background: var(--msg-mine); color: var(--msg-mine-text); border-bottom-right-radius: 4px; }
.message-row.theirs .message-bubble { background: var(--msg-theirs); color: var(--msg-theirs-text); border-bottom-left-radius: 4px; }
.msg-meta-row { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 4px; font-size: 10px; opacity: 0.5; font-weight: 600; }
.msg-edited { font-style: italic; }

/* =======================================================
   🧊 СИСТЕМНЫЕ КАРТОЧКИ VILKA (FROSTED GLASS WIDGET)
   ======================================================= */
.message-row.system-bot {
    align-self: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 12px auto;
    cursor: default;
    box-sizing: border-box;
    padding: 0 10px;
}

.bot-bubble {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .bot-bubble {
    background: rgba(36, 38, 44, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.bot-bubble::before {
    display: none !important; /* Убираем тяжелую черную полосу слева */
}

.bot-header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bot-name {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
}

.bot-badge {
    background: var(--bg-surface-hover) !important;
    color: var(--text-muted) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 8px !important;
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    border: 1px solid var(--border) !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bot-text {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--text-main) !important;
    font-family: 'Manrope', sans-serif !important;
    margin-bottom: 8px;
}

.bot-action-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bot-time {
    font-size: 9.5px !important;
    font-family: 'Roboto Mono', monospace !important;
    color: var(--text-muted) !important;
    text-align: right;
    margin-top: 6px !important;
    opacity: 0.6;
}

.reactions-box { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-tag { 
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; 
    background: var(--bg-surface-hover); border: 1px solid var(--border); border-radius: 16px; transition: 0.2s; cursor: pointer;
}
.reaction-tag.voted { background: var(--text-main); border-color: var(--text-main); color: var(--bg-body); }
.reaction-tag .react-count { font-size: 13px; font-weight: 800; font-family: 'Unbounded', sans-serif; color: var(--text-muted); }
.reaction-tag.voted .react-count { color: var(--bg-body); }

/* МЕНЮ ДЕЙСТВИЙ И ПОЛЯ ВВОДА */
.ctx-menu-overlay { display: none; position: fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; background: rgba(0,0,0,0.5); z-index: 999999; backdrop-filter: blur(2px); flex-direction: column; justify-content: flex-end; align-items: center; }
.ctx-menu-box { background: var(--bg-surface); width: 100%; max-width: 400px; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: 20px; box-shadow: 0 -10px 40px rgba(0,0,0,0.3); border-top: 1px solid var(--border); animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ctx-reactions-row { display: flex; justify-content: space-between; padding: 10px 20px; background: var(--bg-body); border-radius: 50px; margin-bottom: 20px; border: 1px solid var(--border); }
.ctx-react-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; background: transparent; }
.ctx-react-btn:hover { transform: scale(1.2); background: var(--bg-surface-hover); }

.ctx-action-list { display: flex; flex-direction: column; gap: 4px; }
.ctx-action-item { display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 12px; cursor: pointer; color: var(--text-main); font-weight: 600; font-size: 15px; transition: 0.2s; }
.ctx-action-item:hover { background: var(--bg-surface-hover); }
.ctx-action-item.danger { color: var(--text-main); opacity: 0.8; }
.ctx-action-item.danger:hover { color: var(--danger); opacity: 1; }

.input-wrapper { display:flex; flex-direction:column; background: var(--bg-surface); border-top: 1px solid var(--border); position: relative; z-index: 10; padding-bottom: env(safe-area-inset-bottom, 0px); }   
.reply-edit-bar { display: none; padding: 10px 20px; background: var(--bg-body); border-bottom: 1px solid var(--border); align-items: center; justify-content: space-between; font-size: 13px; border-left: 4px solid var(--text-main); }
.input-area { padding: 12px 20px; display: flex; gap: 10px; align-items: flex-end; position: relative; }

#filePreviewBox { display:none; position:absolute; bottom:calc(100% + 10px); left:20px; background:var(--bg-body); padding:10px 15px; border:1px solid var(--border); border-radius:12px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); align-items:center; gap:10px; z-index:20; max-width: calc(100% - 40px); }

.attach-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; border-radius: 50%; background: transparent; border: none; color: var(--text-main); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; flex-shrink: 0 !important; }
.attach-btn:hover { background: var(--bg-surface-hover); }

.chat-input { flex: 1 1 auto; min-width: 0; background: var(--bg-body); border: 1px solid var(--border); color: var(--text-main); padding: 12px 20px; border-radius: 24px; font-family: 'Manrope'; font-size: 15px; resize: none; outline: none; height: 46px; min-height: 46px; max-height: 120px; overflow-y: auto; line-height: 1.4; box-sizing: border-box; }
.chat-input:focus { border-color: var(--text-muted); }

/* 🔥 СВЕТЛАЯ КНОПКА ОТПРАВКИ С ПАТТЕРНОМ ВОЛН */
.send-btn { 
    width: 44px !important; 
    height: 44px !important; 
    min-width: 44px !important; 
    min-height: 44px !important; 
    border-radius: 50%; 
    background-color: var(--bg-surface-hover) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.5 Q 7.5 0, 15 7.5 T 30 7.5' stroke='%23000000' fill='none' stroke-width='1' opacity='0.09'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 30px 15px !important;
    border: 1px solid var(--border) !important; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); 
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .send-btn {
    background-color: var(--bg-surface-hover) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7.5 Q 7.5 0, 15 7.5 T 30 7.5' stroke='%23ffffff' fill='none' stroke-width='1' opacity='0.09'/%3E%3C/svg%3E") !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.send-btn:hover { 
    border-color: var(--primary) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.3);
}

.send-btn:active { 
    transform: scale(0.94); 
}
@keyframes v-fly { 0% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-15px); } 80% { transform: rotate(180deg) translateY(0); } 100% { transform: rotate(0deg) translateY(0); } }
.v-fly { animation: v-fly 0.8s ease-in-out; }

/* МОДАЛЬНЫЕ ОКНА И КНОПКИ */
.modal-overlay { display: none; position: fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; background: rgba(0,0,0,0.8); z-index: 99999; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.modal-box { background: var(--bg-surface); padding: 30px; border-radius: var(--radius-lg); width: 480px; max-width: 90%; max-height: 85vh; display: flex; flex-direction: column; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.modal-select, .modal-input { width: 100%; padding: 14px 16px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--bg-body); font-family: 'Manrope', sans-serif; outline: none; transition: 0.2s; color: var(--text-main); }
.modal-select:focus, .modal-input:focus { border-color: var(--text-muted); }
.btn-black { background: var(--text-main); color: var(--bg-body); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; font-family: 'Unbounded', sans-serif; text-transform: uppercase; font-size: 13px; transition: all 0.2s; padding: 16px; width: 100%; }
.btn-black:hover { opacity: 0.9; transform: translateY(-2px); }

/* 🔥 ЖЕЛЕЗОБЕТОННО СКРЫВАЕМ СТАРЫЙ ЧЕРНЫЙ КРУГ FAB */
.main-fab,
.floating-add-btn,
.fab-add-event {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.empty-chat { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; margin: auto; color: var(--text-muted); font-family: 'Unbounded'; font-size: 14px; opacity: 0.5; text-align: center; }

/* ПРОФИЛЬ И ДАШБОРДЫ */
.dash-container { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.dash-license-card { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05); min-height: 160px; }
.dash-license-card::before { content:''; position:absolute; top:0; right:0; width: 150px; height: 100%; background: var(--bg-surface-hover); transform: skewX(-25deg) translateX(50px); opacity: 0.5; }
.dash-rider-info { display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.dash-rider-name { font-size: 24px; font-weight: 800; color: var(--text-main); letter-spacing: -1px; line-height: 1.1; }
.dash-rider-meta { font-size: 12px; color: var(--text-muted); font-weight: 500; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.dash-cluster { text-align: right; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.dash-cluster-letter { font-size: 54px; font-family: 'Unbounded'; font-weight: 800; color: var(--text-main); line-height: 1; }
.dash-cluster-label { font-size: 10px; color: var(--text-muted); font-weight: 700; letter-spacing: 2px; margin-bottom: -2px; }

.dash-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dash-stat-card { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; display: flex; flex-direction: column; gap: 5px; }
.dash-stat-val { font-family: 'Roboto Mono', monospace; font-size: 20px; font-weight: 700; color: var(--text-main); }
.dash-stat-lbl { font-size: 10px; font-family: 'Unbounded'; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.dash-chart-container { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; height: 220px; }

.dash-section-title { font-size: 16px; color: var(--text-main); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-family: 'Unbounded'; font-weight:700; }
.dash-table-wrapper { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; width: 100%; }
.dash-table { width: 100%; border-collapse: collapse; min-width: 400px; }
.dash-table th { text-align: left; padding: 12px 15px; font-family: 'Unbounded'; font-size: 10px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.dash-table td { padding: 12px 15px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--text-main); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-status { font-size:9px; font-family:'Unbounded'; font-weight:800; padding:4px 8px; border-radius:4px; display:inline-block; text-transform:uppercase; }

.role-block { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 20px; margin-top: 10px; background: var(--bg-body); }
.role-block-title { display:flex; align-items:center; gap:8px; font-family:'Unbounded'; font-size:14px; margin-bottom:15px; font-weight:700; }

/* 🏛️ АРХИТЕКТУРА SUPER APP (ВИЛКА + ПЕЛОТОН) */
body.peloton-mode #mainChatArea { display: none !important; }
body.peloton-mode #pelotonWorkspace { display: flex !important; }

#pelotonWorkspace {
    display: none; flex: 1; flex-direction: column;
    background: var(--bg-body); height: 100vh; height: 100dvh;
    overflow: hidden; position: relative; z-index: 10;
}

.crm-top-nav {
    display: flex; gap: 12px; padding: 20px 40px;
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.crm-top-nav::-webkit-scrollbar { display: none; }
.crm-tab-btn {
    background: var(--bg-body); border: 1px solid var(--border);
    padding: 12px 24px; font-family: 'Unbounded', sans-serif; font-size: 11px;
    font-weight: 800; color: var(--text-muted); text-transform: uppercase;
    border-radius: 50px; cursor: pointer; transition: 0.3s; white-space: nowrap;
    display: flex; align-items: center; gap: 8px;
}
.crm-tab-btn:hover { color: var(--text-main); border-color: var(--text-muted); }
.crm-tab-btn.active {
    background: var(--text-main); color: var(--bg-body); border-color: var(--text-main);
}
.crm-content { flex: 1; padding: 20px 40px; overflow-y: auto; position: relative; }
.crm-mobile-back { 
    display: none; align-items: center; gap: 8px; padding: 15px 20px; 
    background: var(--bg-surface); border-bottom: 1px solid var(--border); 
    color: var(--text-main); font-family: 'Unbounded'; font-size: 11px; 
    font-weight: 800; cursor: pointer; transition: 0.2s;
}
.crm-mobile-back:active { background: var(--bg-body); }

/* 📊 СТИЛИ КОНТЕНТА ПЕЛОТОНА */
.peloton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 20px; }
.peloton-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.peloton-card:hover { border-color: var(--text-muted); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.peloton-card.active { border-color: var(--text-main); background: var(--bg-surface-hover); }
.peloton-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-body); display: flex; justify-content: center; align-items: center; color: var(--text-main); border: 1px solid var(--border); }

.p-team-dashboard { display: none; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.p-team-dashboard.active { display: flex; }
.p-stat-card { flex: 1; min-width: 150px; background: var(--bg-surface); border: 1px solid var(--border); padding: 16px 20px; border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.p-stat-title { font-size: 10px; color: var(--text-muted); font-family: 'Unbounded', sans-serif; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; }
.p-stat-value { font-size: 24px; color: var(--text-main); font-family: 'Roboto Mono', monospace; font-weight: bold; }

.chat-link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-body); color: var(--text-main); padding: 0 20px; height: 100%; min-height: 48px; border-radius: var(--radius-sm); font-family: 'Unbounded'; font-size: 11px; font-weight: 800; text-decoration: none; transition: 0.2s; border: 1px solid var(--border); cursor: pointer; width: 100%; }
.chat-link-btn:hover { background: var(--text-main); color: var(--bg-body); }

.p-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding-bottom: 20px; }
.p-race-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; }
.p-race-card:hover { transform: translateY(-4px); border-color: var(--text-muted); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.p-race-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; background: var(--bg-surface-hover); }
.p-race-date { display: flex; flex-direction: column; align-items: center; background: var(--bg-body); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); min-width: 60px; }
.p-race-day { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; color: var(--text-main); line-height: 1; }
.p-race-month { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-top: 4px; text-align: center; }
.p-race-tags { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.p-race-tag { font-size: 9px; font-family: 'Unbounded', sans-serif; font-weight: 800; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--border); }

.p-race-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.p-race-title { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 8px 0; line-height: 1.3; }
.p-race-org { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.p-race-meta { display: flex; gap: 16px; margin-bottom: 20px; background: var(--bg-body); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.p-meta-item { display: flex; flex-direction: column; gap: 4px; }
.p-meta-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.p-meta-value { font-family: 'Roboto Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text-main); }
.p-race-footer { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-surface-hover); display: flex; gap: 10px; flex-wrap: wrap; }

.p-btn { flex: 1; padding: 12px; border-radius: var(--radius-sm); font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase; border: none; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; }
.p-btn-black { background: var(--text-main); color: var(--bg-body); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; font-family: 'Unbounded'; text-transform: uppercase; font-size: 11px; transition: all 0.2s; padding: 12px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; }
.p-btn-black:hover { opacity: 0.9; transform: translateY(-2px); }
.p-btn-reg { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border); }
.p-btn-reg:hover { border-color: var(--text-main); }
.p-btn-live { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border); }
.p-btn-live:hover { background: var(--text-main); color: var(--bg-body); }

.p-table-container { background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow-x: auto; margin-bottom: 20px; }
.p-roster-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.p-roster-table th { text-align: left; color: var(--text-muted); padding: 16px; font-size: 10px; text-transform: uppercase; font-family: 'Unbounded'; font-weight: 800; border-bottom: 1px solid var(--border); }
.p-roster-table td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; color: var(--text-main); white-space: nowrap; }
.p-roster-table tr:hover { background: var(--bg-surface-hover); }

.tab-btn { background: transparent; color: var(--text-muted); font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; border: none; padding: 8px 16px; border-radius: 50px; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
.tab-btn.active { background: var(--text-main); color: var(--bg-body); }

@keyframes dot-pulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }
.live-group-header td { padding: 10px 8px; background: var(--bg-surface-hover); color: var(--text-main); font-family: 'Unbounded'; font-weight: 800; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--border); }

/* ⚙️ ПАНЕЛЬ УПРАВЛЕНИЯ И РЕДАКТОР СОСТАВА */
.admin-bar { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-main); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; }
.admin-bar-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.admin-bar-header h3 { color: var(--text-main) !important; font-size: 13px; margin: 0; display: flex; align-items: center; gap: 10px; font-family:'Unbounded'; }
.admin-bar-content { margin-top: 20px; display: none; }
.admin-bar.open .admin-bar-content { display: flex; }
.admin-controls-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
.admin-select { flex:1; min-width: 200px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); font-family: 'Manrope'; outline: none; }
.admin-select:focus { border-color: var(--text-muted); }
.admin-btn { padding: 12px 20px; border-radius: var(--radius-sm); border: none; font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; transition: 0.2s; white-space: nowrap; display:flex; align-items:center; justify-content:center; }
.admin-btn-primary { background: var(--text-main); color: var(--bg-body); }
.admin-btn-secondary { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border); }
.admin-btn-danger { background: transparent; color: var(--text-main); border: 1px solid var(--border); }

.inline-add-row { background-color: var(--bg-surface-hover) !important; }
.inline-add-row td { padding: 12px 16px !important; border-bottom: 1px solid var(--border) !important; }
.inline-form-grid { display: grid; grid-template-columns: 120px minmax(150px, 1fr) 80px 140px 80px; gap: 10px; align-items: center; width: 100%; }  
.inline-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: 'Manrope'; font-size: 13px; outline: none; background: var(--bg-body); color: var(--text-main); box-sizing: border-box; }
.inline-input:focus { border-color: var(--text-muted); }
.btn-edit { color: var(--text-main); border: 1px solid var(--border); background: var(--bg-body); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; transition: 0.2s; }
.btn-edit:hover { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }
.btn-del { color: var(--text-main); border: 1px solid var(--border); background: var(--bg-body); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; transition: 0.2s; }
.btn-del:hover { background: var(--text-main); color: var(--bg-body); }

/* ЗАГЛУШКА VILKA SPLASH */
.vilka-splash {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; 
    background-color: var(--primary);
    display: flex; justify-content: center; align-items: center; 
    z-index: 999999; margin: 0; padding: 0; opacity: 1; 
    transition: opacity 0.5s ease-out, visibility 0.5s; visibility: visible;
}
.vilka-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.vilka-splash-content { text-align: center; }
.vilka-splash-logo { max-width: 200px; height: auto; animation: vilka-heartbeat 1.5s ease-in-out infinite; }
@keyframes vilka-heartbeat { 0% { transform: scale(1); } 15% { transform: scale(1.05); } 30% { transform: scale(1); } 45% { transform: scale(1.10); } 60% { transform: scale(1); } 100% { transform: scale(1); } }

#splashGreeting {
    color: #000000 !important;
}

/* =======================================================
   🏆 СОВРЕМЕННОЕ ТАБЛО СТАРТ-ЛИСТА И РЕЗУЛЬТАТОВ (VILKA STYLE)
   ======================================================= */
#liveBoardModal {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#liveBoardModal .modal-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

@media (max-width: 600px) {
    .live-start-meta-group {
        gap: 3px;
    }
    .live-bib-badge, .live-inline-input.bib {
        min-width: 30px;
        width: 32px;
        font-size: 11px;
        padding: 2px;
    }
    .live-time-badge, .live-inline-input.time {
        min-width: 38px;
        width: 44px;
        font-size: 10px;
        padding: 2px;
    }
    .live-rider-name {
        font-size: 11px;
    }
    .live-rider-card {
        padding: 7px 10px;
        gap: 8px;
    }
}

#liveBoardModal .modal-header { 
    padding: 20px; 
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border); 
}

#liveBoardTableContainer { 
    flex: 1; 
    overflow: auto; 
    padding: 0 !important; 
    background: var(--bg-body); 
}

.pdf-download-btn { 
    transition: all 0.2s ease; 
    background: var(--bg-body) !important;
    border: 1px solid var(--border) !important; 
    color: var(--text-main) !important; 
}
.pdf-download-btn:hover { 
    background: var(--text-main) !important;
    color: var(--bg-body) !important; 
    transform: translateY(-1px); 
}

@media (max-width: 768px) {
    #liveBoardModal .modal-header { padding: 15px; }
    #liveBoardTitle span:first-child { font-size: 16px !important; }
}

/* 🔥 МЕДИАЗАПРОСЫ (МОБИЛКИ) */
@media (max-width: 768px) {
    .bottom-nav-container { position: fixed !important; bottom: 0; left: 0; }
    .sidebar { width: 100%; position: absolute; height: 100%; z-index: 10; }
    .chat-area { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; transform: translateX(100%); }        
    .chat-area.mobile-open { transform: translateX(0); }
    .back-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; color: var(--text-main); cursor: pointer; margin-right: 5px; }
    .dash-license-card { flex-direction: column; align-items: flex-start; gap: 20px; padding:20px;}
    .dash-cluster { align-items: flex-start; }
    .ctx-menu-box { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

    #pelotonWorkspace { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 200; padding-bottom: 80px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    #pelotonWorkspace.mobile-open { transform: translateX(0); }
    .crm-top-nav { padding: 15px 20px; overflow-x: auto; flex-wrap: nowrap; }
    .crm-content { padding: 15px 20px; }
    .crm-mobile-back { display: flex !important; }
    body.peloton-mode .app-sidebar { z-index: 201; }

    input#pelotonSearchInput { max-width: 100% !important; }
    .inline-add-row td { position: sticky !important; left: 0 !important; padding: 15px !important; background: var(--bg-surface) !important; border-left: 4px solid var(--text-main) !important; z-index: 5; }
    .inline-form-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; width: calc(100vw - 70px) !important; box-sizing: border-box; }
    .inline-form-grid > div:nth-child(5) { display: none !important; }
    .inline-input { height: 44px !important; font-size: 14px !important; }
    .admin-controls-row { flex-direction: column; align-items: stretch; }
}

/* Анимация и стили шторки */
#curtainContainer {
    position: relative;
    z-index: 10;
}
.chat-curtain {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--bg-surface);
}
.chat-curtain.open {
    max-height: 600px;
    overflow-y: auto;
}
.curtain-toggle-bar {
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px; 
    cursor: pointer;
    color: var(--text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 800;
    transition: 0.2s;
    text-transform: uppercase;
    position: relative;
    z-index: 100; 
}
.curtain-toggle-bar:hover {
    background: var(--bg-surface);
}
.curtain-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border); 
    transition: background-color 0.3s, transform 0.3s;
}
.curtain-toggle-bar span {
    font-family: 'Unbounded', sans-serif;
    font-size: 9px; font-weight: 800; letter-spacing: 4px; 
    color: var(--text-muted); 
    text-transform: uppercase; transition: color 0.2s;
}
.curtain-toggle-bar:hover span, 
.curtain-toggle-bar.open span {
    color: var(--text-main);
}
.curtain-toggle-bar:hover .curtain-handle,
.curtain-toggle-bar.open .curtain-handle {
    background: var(--text-main);
}

.curtain-content { padding: 15px; font-size: 13px; color: var(--text-main); line-height: 1.5; }
.curtain-image { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--border); }
.curtain-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.curtain-btn { flex: 1 1 calc(50% - 8px); min-width: 120px; padding: 8px; text-align: center; background: var(--bg-body); border: 1px solid var(--border); color: var(--text-main) !important; border-radius: 6px; text-decoration: none; font-family: 'Unbounded', sans-serif; font-size: 10px; font-weight: 800; transition: 0.2s; }
.curtain-btn:hover { background: var(--text-main); color: var(--bg-body) !important; }

@media (max-width: 768px) {
    .p-roster-table { min-width: 100% !important; }
    .p-roster-table th, .p-roster-table td { padding: 12px 8px !important; white-space: normal !important; }
    .p-roster-table td b { font-size: 13px !important; }
}

/* Скрываем виджеты Тильды */
#tilda-personal-cabinet-widget,
.tilda-personal-cabinet,
.t-personal-cabinet__icon-wrapper,
.t-personal-cabinet-widget,
.t-login-widget,
.t-member-widget,
[id^="tilda-personal-cabinet-"],
[class^="tilda-personal-cabinet-"],
.tbase-widget-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -99999 !important;
}

/* СТИЛИ ДЛЯ ЦИТАТ (ОТВЕТОВ) В ЧАТЕ */
.reply-quote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px 6px 12px;
    margin-bottom: 8px;
    background: var(--bg-surface-hover);
    border-left: 3px solid var(--text-main); 
    border-radius: 4px 8px 8px 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.reply-quote:hover { background: var(--border); }
.reply-quote-name {
    font-size: 11px;
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    color: var(--text-main); 
    opacity: 0.9;
}
.reply-quote-text {
    font-size: 12px;
    color: var(--text-main);
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-row.mine .reply-quote {
    border-left: 3px solid var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}
.message-row.mine .reply-quote-name,
.message-row.mine .reply-quote-text {
    color: var(--msg-mine-text); 
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ ПОЛЯ ВВОДА */
@media (max-width: 768px) {
    .input-area {
        flex-wrap: wrap !important;
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    #messageInput {
        order: -1 !important; 
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 2px !important;
    }
    #sendBtnIcon { margin-left: auto !important; }
    #emojiPickerContainer { bottom: 125px !important; }
}

/* КОМПАКТНЫЙ EMOJI-MART */
em-emoji-picker {
    height: 35vh !important; 
    max-height: 420px !important; 
    min-height: 350px !important;
}
@media (max-width: 768px) {
    em-emoji-picker { width: 280px !important; max-height: 280px !important; }
}

.btn-circle-share {
    -webkit-appearance: none; 
    appearance: none;
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
    padding: 0; 
    border-radius: 50%;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    margin-left: 10px;
    flex-shrink: 0;
}
.btn-circle-share:hover { background: var(--text-main); color: var(--bg-body); }

.avatar-simple {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.story-ring-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text-main); 
    border-radius: 50%;
    padding: 2px; 
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
}
.story-ring-wrapper:active { transform: scale(0.95); }
.story-ring-inner {
    width: 100%; height: 100%;
    background: var(--bg-body);
    color: var(--text-main);
    border: 2px solid var(--bg-body); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    box-sizing: border-box;
}

/* ВЫПАДАЮЩЕЕ МЕНЮ ШАПКИ ЧАТА (ТРИ ТОЧКИ) */
.chat-dropdown { 
    display: none; position: absolute; right: 0; top: 40px; 
    background: var(--bg-surface); box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    border-radius: 12px; overflow: hidden; 
    z-index: 10000; 
    min-width: 200px; border: 1px solid var(--border); flex-direction: column; 
}
.chat-dropdown.show { display: flex; animation: saFadeIn 0.2s ease; }
.chat-dropdown button { 
    background: none; border: none; text-align: left; padding: 14px 16px; 
    font-size: 14px; font-weight: 600; color: var(--text-main); cursor: pointer; 
    border-bottom: 1px solid var(--border); transition: 0.2s; display: flex; 
    gap: 10px; align-items: center; font-family: 'Manrope', sans-serif;
}
.chat-dropdown button:last-child { border-bottom: none; }
.chat-dropdown button:hover { background: var(--bg-surface-hover); }

/* УМНАЯ ИНФО-ПЛАШКА */
.smart-info-banner { 
    background: var(--bg-surface-hover); 
    border-left: 4px solid var(--text-main); 
    padding: 14px 18px; margin: 15px; border-radius: 0 12px 12px 0; 
    font-size: 13px; color: var(--text-main); display: flex; 
    align-items: flex-start; gap: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    line-height: 1.5; font-family: 'Manrope', sans-serif; 
}
.smart-info-banner .info-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }

.time-capsule {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; 
    border-radius: 50px; font-family: 'Roboto Mono', monospace; font-size: 11px; 
    font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.time-personal { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--text-main); }
.time-general { background: var(--bg-surface-hover); color: var(--text-main); border: 1px solid var(--border); }
.time-icon { font-size: 14px; }

/* 🔥 ЗАКРЕПЛЕННОЕ СООБЩЕНИЕ (ПО УМОЛЧАНИЮ СКРЫТО) */
#pinnedMessageBar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-main);
    z-index: 10;
}

/* =======================================================
   🧊 КНОПКИ ДЕЙСТВИЯ И СИНХРОНИЗАЦИИ (МАТОВОЕ СТЕКЛО)
   ======================================================= */
button[class*="sync-btn-"],
.live-action-glass-btn {
    background: rgba(24, 24, 27, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 10px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

button[class*="sync-btn-"]:hover,
.live-action-glass-btn:hover {
    background: rgba(24, 24, 27, 0.09) !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-1px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

button[class*="sync-btn-"]:active,
.live-action-glass-btn:active {
    transform: scale(0.98) !important;
    background: rgba(24, 24, 27, 0.12) !important;
}

/* Тёмная тема */
[data-theme="dark"] button[class*="sync-btn-"],
[data-theme="dark"] .live-action-glass-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] button[class*="sync-btn-"]:hover,
[data-theme="dark"] .live-action-glass-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Пассивные состояния (Закрыто, Мест нет, Анонс) */
button[class*="sync-btn-"][disabled],
button[class*="sync-btn-"]:disabled,
.live-action-glass-btn:disabled,
.live-action-glass-btn.status-disabled {
    background: var(--bg-surface-hover) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Статус «В старт-листе» и «Оплачено» */
.live-action-glass-btn.status-passive {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Завершенные гонки (Результаты) — ВСЕГДА кликабельны */
.live-action-glass-btn.status-finished {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.live-action-glass-btn.status-finished:hover {
    background: var(--bg-body) !important;
    border-color: var(--text-main) !important;
    transform: translateY(-1px) !important;
}

/* =======================================================
   🔥 ПОЛНОЭКРАННАЯ СЕТКА КАЛЕНДАРЯ (DESKTOP + MOBILE)
   ======================================================= */
#monthCalendarViewContainer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000 !important;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* ШАПКА КАЛЕНДАРЯ */
.month-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
    box-sizing: border-box;
}

.month-cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.month-cal-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    min-width: 140px;
}

.month-cal-btn-arrow {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.month-cal-btn-today {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.month-cal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.month-cal-btn-create {
    background: var(--primary);
    color: #000000;
    border: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.month-cal-btn-close {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* ДНИ НЕДЕЛИ */
.month-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    padding: 8px 0;
    flex-shrink: 0;
}

/* СЕТКА ДНЕЙ */
.month-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(85px, 1fr);
    flex: 1;
    overflow-y: auto;
    background: var(--border);
    gap: 1px;
    width: 100%;
    box-sizing: border-box;
}

.month-cal-day {
    background: var(--bg-body);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 80px;
    min-width: 0 !important;
    overflow: hidden !important; /* 🔥 Блокируем вылет за пределы ячейки */
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.15s;
}
/* Контейнер списка событий внутри дня */
.month-cal-day > div {
    overflow-x: hidden !important; /* 🔥 Запрещаем горизонтальный скролл */
}

.month-cal-day:hover {
    background: var(--bg-surface-hover);
}

.month-cal-day.other-month {
    opacity: 0.3;
    background: var(--bg-surface);
}

.month-cal-day.today {
    background: rgba(255, 193, 7, 0.05);
}

.month-cal-day-num {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.month-cal-day.today .month-cal-day-num {
    background: var(--primary);
    color: #000000;
}

/* 🔥 ПЛАШКИ СОБЫТИЙ С УТОЧКОЙ И БЕЛЫМ HOVER-ЭФФЕКТОМ (ДЕСКТОП) */
.cal-event-pill {
    padding: 5px 7px;
    border-radius: 7px;
    font-size: 9px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    margin-bottom: 3px;
}

/* Иконка уточки внутри десктопной плашки */
.cal-pill-duck {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* Подзаголовок (ШОССЕ • КОМАНДА) */
.cal-pill-subtext {
    font-size: 8px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 17px;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

/* 1. ОФИЦИАЛЬНЫЕ ГОНКИ (ЖЕЛТЫЕ) */
.cal-pill-race { 
    background: rgba(255, 193, 7, 0.2); 
    color: #18181b; 
    border: 1px solid rgba(255, 193, 7, 0.5); 
}
.cal-pill-race:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) scale(1.02);
    z-index: 10;
}
.cal-pill-race:hover .cal-pill-subtext {
    color: #b47a00 !important;
}

/* 2. ТРЕНИРОВКИ (СИНИЕ) */
.cal-pill-training { 
    background: rgba(59, 130, 246, 0.15); 
    color: #1e40af; 
    border: 1px solid rgba(59, 130, 246, 0.4); 
}
.cal-pill-training:hover {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) scale(1.02);
    z-index: 10;
}
.cal-pill-training:hover .cal-pill-subtext {
    color: #2563eb !important;
}

/* 3. LIVE-СТАРТЫ (КРАСНЫЕ) */
.cal-pill-live { 
    background: rgba(239, 68, 68, 0.15); 
    color: #b91c1c; 
    border: 1px solid rgba(239, 68, 68, 0.4); 
}
.cal-pill-live:hover {
    background: #ffffff !important;
    color: #dc2626 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) scale(1.02);
    z-index: 10;
}

/* 4. ЗАВЕРШЕННЫЕ ГОНКИ (СЕРЫЕ) */
.cal-pill-finished { 
    background: var(--bg-surface-hover); 
    color: var(--text-muted); 
    border: 1px solid var(--border); 
}
.cal-pill-finished:hover {
    background: #ffffff !important;
    color: var(--text-main) !important;
    border-color: var(--text-muted) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) scale(1.02);
    z-index: 10;
}

/* 🔥 АДАПТАЦИЯ ДЛЯ ТЕМНОЙ ТЕМЫ */
[data-theme="dark"] .cal-pill-race {
    color: #f4f4f5;
}
[data-theme="dark"] .cal-pill-race:hover,
[data-theme="dark"] .cal-pill-training:hover,
[data-theme="dark"] .cal-pill-live:hover,
[data-theme="dark"] .cal-pill-finished:hover {
    background: #27272a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

/* 🔥 МОБИЛЬНЫЕ УТОЧКИ С ЦВЕТНОЙ ТОЧКОЙ */
.cal-mobile-dots {
    display: none;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.cal-duck-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cal-duck-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.9;
}

/* Цветной микро-диод статуса на уточке */
.cal-duck-dot {
    position: absolute;
    bottom: -1px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--bg-body);
    box-sizing: border-box;
}

.cal-duck-dot.race { background: var(--primary); box-shadow: 0 0 4px rgba(255, 193, 7, 0.8); }
.cal-duck-dot.training { background: #3b82f6; }
.cal-duck-dot.live { background: #ef4444; animation: dot-pulse 1s infinite; }
.cal-duck-dot.finished { background: var(--text-muted); opacity: 0.7; }

/* 🔥 АДАПТАЦИЯ ДЛЯ СМАРТФОНОВ (< 600px) */
@media (max-width: 600px) {
    .month-cal-header {
        padding: 8px 10px;
    }

    .month-cal-title {
        font-size: 12px;
        min-width: 105px;
    }

    .month-cal-btn-arrow {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .month-cal-btn-today {
        padding: 4px 6px;
        font-size: 8px;
    }

    .month-cal-btn-create {
        width: 28px;
        height: 28px;
        padding: 0;
        justify-content: center;
        border-radius: 8px;
    }
    .month-cal-btn-create span.create-text {
        display: none !important;
    }

    .month-cal-btn-close {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .month-cal-grid {
        grid-auto-rows: minmax(55px, 1fr);
    }

    .month-cal-day {
        min-height: 50px;
        padding: 3px 2px;
        align-items: center;
    }

    .month-cal-day-num {
        font-size: 10px;
        width: 18px;
        height: 18px;
    }

    /* На телефоне скрываем длинные плашки */
    .cal-event-pill {
        display: none !important;
    }

    /* Показываем фирменных уточек с цветными точками */
    .cal-mobile-dots {
        display: flex !important;
    }
}

/* =======================================================
   🔥 АНИМАЦИИ ПЕРЕЛИСТЫВАНИЯ МЕСЯЦЕВ (СВАЙП / GOOGLE CALENDAR)
   ======================================================= */
@keyframes calSlideInRight {
    0% {
        transform: translateX(45px);
        opacity: 0.3;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes calSlideInLeft {
    0% {
        transform: translateX(-45px);
        opacity: 0.3;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.month-cal-grid.slide-next {
    animation: calSlideInRight 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.month-cal-grid.slide-prev {
    animation: calSlideInLeft 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 1. Ограничиваем общую высоту модального окна на смартфонах */
@media (max-width: 768px) {
    .board-container {
        display: flex;
        flex-direction: column;
        max-height: 92dvh !important; /* Не дает модалке уходить за край экрана */
        overflow: hidden !important;
        position: relative;
    }

    /* 2. Скроллится только список контента внутри */
    .right-content-area {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 70px !important; /* Запас места, чтобы плашка не перекрывала последнюю гонку */
    }

    /* 3. Нижняя плашка со статами и кнопкой жестко фиксируется внизу */
    .bottom-action-pill {
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 50 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding: 10px 16px env(safe-area-inset-bottom, 10px) !important;
        margin-top: auto !important;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.05);
    }

    .btn-enter-peloton {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Контейнер модалки на весь экран */
#welcomeDashboardModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 17, 23, 0.80);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Одиночная уточка с мягким покачиванием */
.bg-floating-duck {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    animation: duckFloatAnim 6s ease-in-out infinite alternate;
}

@keyframes duckFloatAnim {
    0% {
        transform: translateY(0px) rotate(var(--rot)) scale(1);
    }
    100% {
        transform: translateY(-14px) rotate(calc(var(--rot) + 6deg)) scale(1.03);
    }
}

/* Карточка всегда выше фоновых уточек */
.board-container {
    position: relative;
    z-index: 10 !important;
}

/* Контейнер рабочей зоны чата */
#mainChatArea {
    position: relative !important;
    overflow: hidden !important;
    background: var(--bg-body);
}

/* Слой кастомного паттерна (контейнер для плавающих иконок) */
#chatPatternOverlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Сами плавающие уточки с мягким покачиванием */
.chat-floating-pattern-item {
    position: absolute !important;
    pointer-events: none !important;
    user-select: none !important;
    animation: chatDuckFloat 6s ease-in-out infinite alternate;
}

@keyframes chatDuckFloat {
    0% {
        transform: translateY(0px) rotate(var(--rot)) scale(1);
    }
    100% {
        transform: translateY(-12px) rotate(calc(var(--rot) + 6deg)) scale(1.03);
    }
}

/* Сообщения, шапка и поле ввода ВСЕГДА поверх плавающих уточек */
.messages-container,
.message-row, 
.message-bubble, 
#chatHeader, 
#inputWrapper, 
#curtainContainer,
#pinnedMessageBar {
    position: relative;
    z-index: 5 !important;
}

/* КАРТОЧКА ПОСЛЕДНЕЙ НОВОСТИ В САЙДБАРЕ */
.radio-news-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}
.radio-news-card:hover {
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

/* КНОПКА "ВСЕ НОВОСТИ" */
.btn-all-news {
    width: 100%;
    padding: 12px;
    background: var(--bg-surface-hover);
    border: 1px dashed var(--border);
    border-radius: 12px;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    margin-top: 6px;
    margin-bottom: 90px;
}
.btn-all-news:hover {
    background: var(--text-main);
    color: var(--bg-body);
    border-style: solid;
}

/* БЕЙДЖ ОЧКОВ ТОП-3 В КАРТОЧКЕ КОМАНДЫ */
.team-top3-points-badge {
    background: rgba(255, 193, 7, 0.12);
    color: var(--primary);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 3px 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* Относительный контейнер для поля ввода и кнопки */
.search-box-rel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Отступ справа, чтобы текст не заезжал под кнопку */
.search-input-pad {
    padding-right: 38px !important;
}

/* Кнопка быстрой очистки */
.search-clear-cross {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-surface-hover, #2a2a30);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    color: var(--text-muted, #a1a1aa);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}

/* Эффект при наведении и нажатии */
.search-clear-cross:hover {
    background: var(--primary, #ffc107);
    color: #000000;
    border-color: var(--primary, #ffc107);
    transform: translateY(-50%) rotate(90deg) scale(1.12);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.search-clear-cross:active {
    transform: translateY(-50%) rotate(90deg) scale(0.92);
}

/* =======================================================
   📰 КАРТОЧКА НОВОСТИ В СТИЛЕ HERO OVERLAY (ЧИСТОЕ ФОТО БЕЗ БЛЮРА)
   ======================================================= */
.vk-card-media {
    position: relative;
    width: calc(100% + 40px) !important;
    margin: -16px -20px 16px -20px !important;
    height: 380px;
    max-height: 55vh;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    cursor: pointer;
}

.vk-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.vk-card-media:hover .vk-card-image {
    transform: scale(1.02);
}

.vk-card-media-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 40px 20px 16px 20px !important;
    box-sizing: border-box !important;
    /* 🔥 Затемнение лежит строго внизу под текстом, оставляя всё фото чистым */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 50%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    z-index: 2 !important;
}

.vk-card-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary, #ffc107);
    color: #000000;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.vk-card-channel:hover {
    transform: scale(1.05);
}

.vk-card-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(15px, 3.5vw, 18px);
    font-weight: 900;
    color: #ffffff !important;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* =======================================================
   💬 СИСТЕМА УПОМИНАНИЙ (@MENTIONS)
   ======================================================= */

/* 1. Всплывающее меню автокомплита над полем ввода */
#mentionSuggestionsBox {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 16px;
    right: 16px;
    max-width: 360px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
    z-index: 100000;
    padding: 6px;
    box-sizing: border-box;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.mention-item:hover,
.mention-item.selected {
    background: var(--bg-surface-hover);
}

.mention-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-body);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.mention-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mention-item-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-item-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Бейдж упоминания внутри текста сообщения */
.mention-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 193, 7, 0.15);
    color: var(--text-main);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 6px;
    padding: 1px 6px;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: baseline;
    text-decoration: none !important;
}

.mention-pill:hover {
    background: var(--primary, #ffc107) !important;
    color: #000000 !important;
    border-color: var(--primary, #ffc107) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.35);
}

.mention-pill.team-pill {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}
.mention-pill.team-pill:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

/* =======================================================
   ⭐ ЛЕНТА ПОДПИСОК НАД СПИСКОМ ГОНОК (КАЛЕНДАРЕМ)
   ======================================================= */
.subscriptions-header-bar {
    padding: 6px 12px 10px 12px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border);
    box-sizing: border-box;
}

.subscriptions-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.subscriptions-scroll-row {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.subscriptions-scroll-row::-webkit-scrollbar {
    display: none;
}

.sub-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 46px;
    transition: transform 0.15s ease;
}

.sub-avatar-item:active {
    transform: scale(0.92);
}

.sub-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary, #ffc107);
    padding: 2px;
    box-sizing: border-box;
    background: var(--bg-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sub-avatar-item:hover .sub-avatar-wrap {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.45);
}

.sub-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.sub-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-surface-hover);
    color: var(--primary);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-avatar-name {
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    margin-top: 4px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =======================================================
   ⭐ СТЕК ПОДПИСОК В СТРОКЕ ПОИСКА
   ======================================================= */
.search-box-rel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-box-rel .search-input {
    padding-right: 75px !important;
}

.search-subs-stack {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 6;
    background: var(--bg-surface-hover);
    padding: 2px 6px 2px 2px;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    user-select: none;
}

.search-subs-stack:hover {
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.04);
}

.search-subs-stack:active {
    transform: translateY(-50%) scale(0.95);
}

.search-subs-stack-avatars {
    display: flex;
    align-items: center;
}

.search-subs-mini-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-surface);
    margin-left: -7px;
    object-fit: cover;
    object-position: center;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    color: #000;
    font-size: 8px;
    line-height: 1;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-subs-mini-avatar:first-child {
    margin-left: 0;
}

.search-subs-count-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main);
    margin-left: 4px;
}

.search-input-pad {
    padding-left: 86px !important;
    padding-right: 75px !important;
}

/* 🔒 ПОЗИЦИОНИРОВАНИЕ ВКЛАДОК И ПОИСКА */
.tab-content {
    position: relative !important;
    display: none;
    flex-direction: column;
    height: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

.tab-content.active {
    display: flex !important;
}

.tab-content:not(.active) {
    display: none !important;
}

.sidebar-header {
    position: relative !important;
    z-index: 30 !important;
    background: var(--bg-sidebar) !important;
}

.search-box {
    position: relative !important;
    z-index: 25 !important;
    flex-shrink: 0 !important;
    background: var(--bg-surface) !important;
}

.chat-list {
    min-height: 0 !important;
    flex: 1 1 0% !important;
}

/* =======================================================
   🏆 ШТОРКА ПОДПИСОК (СТРОГО ОТ ШАПКИ ДО СТРОКИ ПОИСКА)
   ======================================================= */

/* Строка поиска зафиксирована внизу под шторкой */
.search-box {
    position: relative !important;
    z-index: 50 !important;
    background: var(--bg-surface) !important;
    flex-shrink: 0 !important;
}

/* 1. Каркас шторки: строго между линией шапки и поиском */
.search-subs-drawer {
    position: absolute !important;
    top: 4px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 52px !important; /* 🔥 Стыкуется вплотную к строке поиска */
    background: var(--bg-surface) !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    box-shadow: 0 -14px 35px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(105%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.search-subs-drawer.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 2. Жёлтая шапка шторки на всю ширину со скруглением сверху */
.subs-drawer-handle-bar {
    width: 100%;
    background: var(--primary, #ffc107);
    padding: 10px 16px 12px 16px;
    border-radius: 17px 17px 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.35);
    user-select: none;
    box-sizing: border-box;
}

.subs-drawer-handle-bar:active {
    filter: brightness(0.95);
}

.subs-drawer-line {
    width: 36px;
    height: 3.5px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 2px;
}

.subs-drawer-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #000000;
    text-transform: uppercase;
    line-height: 1;
}

/* 3. Тело шторки: плотная компоновка контента сверху вниз */
.search-subs-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* 🔥 Прижим блоков со значками к нижнему краю шторки */
.search-subs-body > div:first-child,
.subs-group-wrap:first-child {
    margin-top: auto !important;
}

.subs-group-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subs-group-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    padding-left: 2px;
}

/* 4. Стена кружков (Сетка) */
.subs-circles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 12px 6px;
    justify-items: center;
}

.search-sub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 62px;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.search-sub-avatar-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-hover);
    border: 1.5px solid var(--border);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 🖼️ Жёсткая фиксация аватарок в кружке */
.search-sub-avatar-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: transparent !important;
}

.search-sub-avatar-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--text-muted) !important;
    background: var(--bg-surface-hover) !important;
}

/* 🎯 Фокусировка: активный фильтр светится, остальные притухают */
.search-subs-drawer.has-active-filter .search-sub-item:not(.active) {
    opacity: 0.3;
    filter: grayscale(80%);
}

.search-subs-drawer.has-active-filter .search-sub-item:not(.active):hover {
    opacity: 0.85;
    filter: grayscale(0%);
}

.search-sub-item.active .search-sub-avatar-wrap {
    border-color: var(--primary) !important;
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.6) !important;
    transform: scale(1.06);
}

.search-sub-name {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-main);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 4px;
}

/* 🟡 Круглая галочка из карточки гонки */
.search-sub-remove-btn {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-surface, #ffffff);
    border: none;
    color: var(--primary, #ffc107);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.search-sub-remove-btn .check-icon { display: block; }
.search-sub-remove-btn .cross-icon { display: none; }

.search-sub-remove-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.15);
}

.search-sub-remove-btn:hover .check-icon { display: none; }
.search-sub-remove-btn:hover .cross-icon { display: block; }

/* =======================================================
   💎 МОРФИНГ-АККОРДЕОН НАВИГАЦИИ (DYNAMIC ISLAND)
   ======================================================= */

.search-left-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

/* Очищенный инпут без желтой таблетки слева */
.search-input-pad {
    padding-left: 36px !important;
    padding-right: 65px !important;
}

/* Контейнер навигации встроен в поток сайдбара */
.bottom-nav-container {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 30 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Выдвижная капсула подразделов */
.subnav-morph-pod {
    width: calc(100% - 16px) !important;
    max-height: 0;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    background: var(--bg-surface-hover);
    border: 1px solid transparent;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin: 0;
    padding: 0 4px;
    box-sizing: border-box;
    transition: 
        max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        margin 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.2s ease;
    pointer-events: none;
}

.subnav-morph-pod.expanded {
    max-height: 44px !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    border-color: var(--border) !important;
    margin: 8px 0 2px 0 !important;
    padding: 3px 6px !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.subnav-items-track {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav-items-track::-webkit-scrollbar { display: none; }

/* Кнопки-чипсы подразделов */
.subnav-chip {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: all 0.15s ease;
}
.subnav-chip:hover {
    color: var(--text-main);
}
.subnav-chip.active {
    background: var(--primary, #ffc107);
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.35);
}

.subnav-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

.subnav-add-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--primary, #ffc107);
    color: #000000;
    border: none;
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.subnav-add-btn:hover {
    transform: rotate(90deg) scale(1.08);
}

/* Основная нижняя полоса */
.bottom-nav {
    position: relative !important;
    width: 100% !important;
    height: var(--nav-height, 56px) !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    height: 100%;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Unbounded', sans-serif;
    user-select: none;
}
.nav-item:hover { color: var(--text-main); background: transparent; }
.nav-item.active { color: var(--text-main); font-weight: 800; }

.nav-icon-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 🌟 НЕОНОВЫЙ МИКРО-ИНДИКАТОР ВМЕСТО СТРЕЛКИ */
.nav-state-indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    margin-top: 2px;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: scale(0.5);
}

.nav-item.active .nav-state-indicator {
    background: var(--primary, #ffc107);
    opacity: 0.6;
    transform: scale(1);
}

.nav-item.sub-open .nav-state-indicator {
    width: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--primary, #ffc107);
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
    transform: scale(1);
}

/* Жестко глушим старые плавающие пульты */
#eventsFloatingDock,
#radioFloatingDock,
.search-category-pill {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =======================================================
   🏆 СТИЛИ КАРТОЧЕК ГОНОК (КАК В ТЕСТОВОМ МАКЕТЕ)
   ======================================================= */
.chat-item.race-card-item {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
    flex-wrap: wrap !important;
    user-select: none !important;
}

/* 🌿 МЯГКИЙ БЛЕДНО-ЖЁЛТЫЙ HOVER ВСЕЙ КАРТОЧКИ */
.chat-item.race-card-item:hover {
    /* Фолбэк + современный микс 8% фирменного жёлтого с белым фоном */
    background: #FFF9E6 !important;
    background: color-mix(in srgb, var(--primary, #ffc107) 8%, var(--bg-surface, #ffffff)) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Подсветка заголовка при наведении на карточку */
.chat-item.race-card-item:hover .race-title-text {
    color: #b45309 !important; /* Насыщенный читаемый янтарь для светлой темы */
}

/* 🌙 Адаптация для тёмной темы */
[data-theme="dark"] .chat-item.race-card-item:hover {
    background: #232018 !important;
    background: color-mix(in srgb, var(--primary, #ffc107) 10%, var(--bg-surface, #18181b)) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 193, 7, 0.1) !important;
}

[data-theme="dark"] .chat-item.race-card-item:hover .race-title-text {
    color: var(--primary, #ffc107) !important;
}

[data-theme="dark"] .chat-item.race-card-item:hover {
    border-color: #4b5563 !important;
}

.chat-item.race-card-item.active {
    border-color: var(--text-main) !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.12) !important;
    border-left: 1px solid var(--text-main) !important;
}

/* 🌿 ЧИСТЫЙ ЗАГОЛОВОК + КНОПКА В ОДНУ СТРОКУ (БЕЗ ПЛАШКИ) */
.chat-item .race-header-clickable,
.chat-item:hover .race-header-clickable,
.chat-item.active .race-header-clickable,
.chat-item.race-card-item .race-header-clickable,
.chat-item.race-card-item:hover .race-header-clickable,
.chat-item.race-card-item.active .race-header-clickable {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0 4px 0 !important;
    box-sizing: border-box !important;
}

/* Строго монохромный заголовок: чёрный в светлой теме (без коричневого) */
.chat-item.race-card-item .race-title-text,
.chat-item.race-card-item:hover .race-title-text,
.chat-item.race-card-item.active .race-title-text {
    color: #000000 !important;
}

/* Парение карточки над лентой и мягкая бледно-жёлтая подсветка */
.chat-item.race-card-item {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}

.chat-item.race-card-item:hover {
    background: #FFFDF5 !important;
    background: color-mix(in srgb, var(--primary, #ffc107) 6%, var(--bg-surface, #ffffff)) !important;
    border-color: rgba(255, 193, 7, 0.45) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(255, 193, 7, 0.12) !important;
}

/* Кнопка перехода в радио */
.plate-radio-mini-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-body) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.plate-radio-mini-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    transform: scale(1.08);
}

/* 🌙 Тёмная тема */
[data-theme="dark"] .chat-item.race-card-item .race-title-text,
[data-theme="dark"] .chat-item.race-card-item:hover .race-title-text,
[data-theme="dark"] .chat-item.race-card-item.active .race-title-text {
    color: #ffffff !important;
}

[data-theme="dark"] .chat-item.race-card-item:hover {
    background: #222329 !important;
    background: color-mix(in srgb, var(--primary, #ffc107) 8%, var(--bg-surface, #1e1f24)) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(255, 193, 7, 0.08) !important;
}

[data-theme="dark"] .plate-radio-mini-btn:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

.chat-item.race-card-item.active .race-header-clickable .race-title-text {
    color: var(--text-main) !important;
}

.chat-item.race-card-item.active .race-header-clickable .plate-radio-btn {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
}

.chat-item.race-card-item.active .race-header-clickable .plate-radio-btn:hover {
    background: var(--primary) !important;
    color: #000000 !important;
    border-color: var(--primary) !important;
}

/* =======================================================
   📱 АДАПТАЦИЯ ЭЛЕМЕНТОВ ШТОРКИ ДЛЯ СМАРТФОНОВ
   ======================================================= */
.curtain-creator-badge {
    position: absolute;
    left: 10px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    padding: 3px 8px 3px 3px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    transition: all 0.2s ease;
    text-transform: uppercase;
    max-width: 110px;
}

.curtain-creator-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.curtain-riders-badge {
    position: absolute;
    right: 10px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 5px 9px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    transition: all 0.2s ease;
}

/* На экранах смартфонов (< 420px) ужимаем элементы и шрифты */
@media (max-width: 420px) {
    #curtainToggleBar {
        padding: 24px 10px 8px 10px !important;
    }

    #curtainToggleText {
        font-size: 9.5px !important;
        letter-spacing: 0.3px !important;
    }

    .curtain-creator-badge {
        left: 6px !important;
        max-width: 85px !important;
        padding: 2px 6px 2px 2px !important;
        font-size: 8px !important;
    }

    .curtain-creator-name {
        max-width: 50px !important;
    }

    .curtain-riders-badge {
        right: 6px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }
}

/* На сверхмалых экранах (< 360px, iPhone SE) скрываем текст имени, оставляя только круглый аватар */
@media (max-width: 360px) {
    .curtain-creator-badge {
        padding: 2px !important;
        border-radius: 50% !important;
        max-width: 26px !important;
    }

    .curtain-creator-name {
        display: none !important;
    }
}

/* =======================================================
   🏁 АДАПТИВНЫЙ СТАРТ-ЛИСТ (MOBILE-FIRST + DESKTOP)
   ======================================================= */
#liveBoardTable {
    width: 100% !important;
    min-width: 0 !important;
}

.live-modal-header-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-surface-hover);
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
}
.live-modal-header-toolbar::-webkit-scrollbar { display: none; }

.live-action-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: 0.15s;
}
.live-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.live-dist-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    margin-bottom: 10px;
}
.live-dist-scroll::-webkit-scrollbar { display: none; }

.live-dist-btn {
    border: 1px solid var(--border);
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.live-dist-btn.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}

.live-cards-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.live-group-banner {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    background: var(--bg-surface-hover);
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 3px solid var(--primary);
    margin-top: 10px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 📱 КАРТОЧКА СПОРТСМЕНА В СТАРТ-ЛИСТЕ */
.live-rider-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.live-rider-card:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
}
.live-rider-card.is-me {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.4);
    border-left: 4px solid var(--primary);
}
.live-rider-card.unregistered-row {
    opacity: 0.75;
    background: var(--bg-body);
}

.live-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.live-bib-badge {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 6px;
    border-radius: 8px;
    min-width: 38px;
    text-align: center;
    flex-shrink: 0;
}

.live-inline-input {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    border-radius: 6px;
    padding: 4px 6px;
    text-align: center;
    outline: none;
    box-sizing: border-box;
}
.live-inline-input.bib {
    width: 44px;
    font-size: 12px;
    color: var(--primary);
    flex-shrink: 0;
}
.live-inline-input.time {
    width: 64px;
    font-size: 11px;
}
.live-inline-input.cat {
    width: 72px;
    font-size: 10px;
    padding: 2px 4px;
}
.live-inline-input:focus {
    border-color: var(--primary);
}

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

.live-rider-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-me-label {
    color: var(--primary);
    font-size: 9px;
    margin-left: 2px;
}

.live-rider-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-cat-badge {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
}

.live-squad-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    margin-top: 3px;
}

.live-squad-join-btn {
    background: #000;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Unbounded', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    cursor: pointer;
}

.live-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.live-card-right-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-card-right-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-start-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
}

.live-points-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
}

.live-pay-chip {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 5px;
    user-select: none;
    white-space: nowrap;
}
.live-pay-chip.paid {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.live-pay-chip.unpaid {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.live-revoke-btn {
    background: rgba(255, 51, 102, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 51, 102, 0.3);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.live-register-btn {
    background: var(--primary);
    color: #000;
    border: none;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.live-empty-state {
    text-align: center;
    padding: 40px 15px;
    color: var(--text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
}

/* =======================================================
   🏆 АДАПТИВНОЕ ТАБЛО СТАРТ-ЛИСТА (DESKTOP + MOBILE)
   ======================================================= */
#liveBoardModal {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#liveBoardModal .modal-box {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Компактная шапка на одну строку */
.live-modal-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.live-top-title-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.live-top-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.live-top-race-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-top-date-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.live-top-dist-badge {
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    background: var(--primary-light, rgba(255, 193, 7, 0.15));
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.live-top-csv-btn {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.live-top-csv-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 📱 КАРТОЧКА УЧАСТНИКА */
.live-cards-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.live-rider-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    width: 100%;
}
.live-rider-card:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
}
.live-rider-card.is-me {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.4);
    border-left: 3.5px solid var(--primary);
}
.live-rider-card.unregistered-row {
    opacity: 0.7;
    background: transparent;
    border-style: dashed;
}

.live-card-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.live-start-meta-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.live-bib-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 34px;
    text-align: center;
}

.live-time-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 44px;
    text-align: center;
}

.live-inline-input {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 4px;
    text-align: center;
    outline: none;
}
.live-inline-input.bib { width: 38px; font-size: 11px; color: var(--primary); }
.live-inline-input.time { width: 54px; font-size: 11px; }
.live-inline-input.cat { width: 62px; font-size: 9.5px; }

.live-card-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.live-squad-top-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    cursor: pointer;
    width: fit-content;
    margin-bottom: 2px;
}
.live-squad-val { color: var(--text-main); font-weight: 900; }
.live-squad-count { color: var(--primary); font-family: 'Roboto Mono', monospace; }
.live-squad-edit-ico { opacity: 0.5; font-size: 7.5px; }

.live-squad-join-btn {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'Unbounded', sans-serif;
    font-size: 7px;
    font-weight: 800;
    cursor: pointer;
    margin-left: 4px;
}

.live-rider-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.live-me-label { color: var(--primary); font-size: 9px; margin-left: 2px; }

.live-rider-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

.live-meta-dot { opacity: 0.35; font-size: 8px; }

.live-cat-badge {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0 4px;
    border-radius: 4px;
    font-size: 9px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
}

.live-card-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.live-pay-chip {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 5px;
    user-select: none;
    white-space: nowrap;
}
.live-pay-chip.paid {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.live-pay-chip.unpaid {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.live-revoke-btn {
    background: rgba(255, 51, 102, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 51, 102, 0.3);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.live-register-btn {
    background: var(--primary);
    color: #000;
    border: none;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

/* =======================================================
   📲 АДАПТАЦИЯ ДЛЯ СМАРТФОНОВ (< 600px) — BENTO 2-ROW КАРТОЧКА
   ======================================================= */
@media (max-width: 600px) {
    .live-rider-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 9px 10px !important;
    }

    /* Верхний ряд: [BIB 1] [10:00] <-------> [₽ НЕ ОПЛ] [ОТОЗВАТЬ] */
    .live-card-top-row {
        width: 100% !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 5px;
    }

    /* Нижний блок занимает 100% ширины: имя и экипаж больше не обрезаются */
    .live-card-info {
        width: 100% !important;
    }

    .live-rider-name {
        font-size: 13px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .live-squad-top-tag {
        font-size: 8.5px !important;
    }

    .live-rider-sub {
        font-size: 10.5px !important;
    }
}

/* 🔥 ВСПЛЫВАЮЩИЕ СУДЕЙСКИЕ ОКНА ВСЕГДА ПОВЕРХ ЛАЙВ-БОРДА */
#waveStartModal,
#squadManageModal,
#qrModal,
#massStartModal {
    z-index: 10000050 !important;
}

/* =======================================================
   📱 СТИЛИ АККОРДЕОНА СТАРТ-ЛИСТА (BENTO COMPACT)
   ======================================================= */
.live-cards-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.live-rider-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    user-select: none;
}
.live-rider-card:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
}
.live-rider-card.is-me {
    background: rgba(255, 193, 7, 0.05);
    border-color: rgba(255, 193, 7, 0.4);
    border-left: 3.5px solid var(--primary);
}
.live-rider-card.unregistered-row {
    opacity: 0.7;
    background: transparent;
    border-style: dashed;
}
.live-rider-card.expanded {
    background: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 1. Всегда видимая компактная строка */
.live-card-compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.live-compact-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.live-start-meta-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.live-bib-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 32px;
    text-align: center;
}

.live-time-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 42px;
    text-align: center;
}

.live-compact-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.live-rider-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.live-compact-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.live-team-link {
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.live-team-link:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

.live-team-text {
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
}
.live-squad-inline-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.live-squad-inline-tag:hover {
    color: var(--primary);
}

.live-squad-inline-tag .live-squad-lbl {
    opacity: 0.6;
}

.live-squad-inline-tag .live-squad-val {
    color: var(--text-main);
    font-weight: 900;
}

.live-squad-inline-tag .live-squad-count {
    color: var(--primary);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
}

.live-squad-inline-tag .live-squad-edit-ico {
    opacity: 0.5;
    font-size: 7.5px;
}

.live-compact-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Мини-точка оплаты в свернутом виде */
.live-pay-mini-dot {
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.live-pay-mini-dot.paid {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.live-pay-mini-dot.unpaid {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.live-accordion-arrow {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Выдвижная шторка (Drawer) */
.live-card-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--bg-surface-hover);
    border-top: 1px solid transparent;
}
.live-rider-card.expanded .live-card-drawer {
    border-top-color: var(--border);
}

.live-drawer-content {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: default;
}

.live-drawer-meta-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-body);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.live-drawer-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}
.live-drawer-lbl {
    color: var(--text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
}
.live-drawer-val {
    color: var(--text-main);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
}

.live-drawer-profile-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.15s;
}
.live-drawer-profile-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.live-drawer-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.live-pay-chip {
    flex: 1;
    text-align: center;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 8px;
    user-select: none;
}
.live-pay-chip.paid {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.live-pay-chip.unpaid {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.live-revoke-btn {
    flex: 1;
    background: rgba(255, 51, 102, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 51, 102, 0.3);
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

.live-register-btn {
    flex: 1;
    background: var(--primary);
    color: #000;
    border: none;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

/* ⏱️ 1. Исправление ширины времени старта (секунды больше не обрезаются) */
.live-time-badge {
    min-width: 52px !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
}

.live-inline-input.time {
    width: 68px !important;
    font-size: 11px !important;
    padding: 3px 4px !important;
}

/* 📐 2. Адаптивное распределение шторки аккордеона на ПК и смартфонах */
.live-drawer-content {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.live-drawer-meta-grid {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--bg-body) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
}

.live-drawer-actions-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* 📱 3. Мобильная адаптация (< 600px) */
@media (max-width: 600px) {
    /* На смартфоне шторка растягивается на 100% ширины */
    .live-drawer-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .live-drawer-meta-grid {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    .live-drawer-actions-row {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Название гонки не зажимается кнопкой CSV */
    .live-top-race-name {
        max-width: 140px !important;
        font-size: 13px !important;
    }

    .live-top-csv-btn {
        padding: 6px 8px !important;
    }

    .live-top-csv-btn span {
        display: none !important; /* На смартфонах оставляем только иконку */
    }
}

/* =======================================================
   👥 ПОЛНОРАЗМЕРНЫЙ РОСТЕР КОМАНДЫ (СТИЛЬ ЛАЙВ-БОРДА)
   ======================================================= */
#participantsModal .modal-content {
    max-width: 820px !important;
    width: 95% !important;
    max-height: 88vh !important;
    padding: 24px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
}

.team-roster-stat-badge {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.team-roster-stat-val {
    font-family: 'Roboto Mono', monospace;
    font-weight: 900;
    font-size: 13px;
    color: var(--primary);
}
.team-roster-stat-lbl {
    font-family: 'Unbounded', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ➕ КНОПКА «+» В ТОЧНОСТИ КАК В GEMINI */
.plus-attach-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, #71717a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Ховер в стиле Google / Gemini: мягкий серый круг */
.plus-attach-btn:hover {
    background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-main, #18181b) !important;
}

[data-theme="dark"] .plus-attach-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Активное состояние (открыто меню): поворот плюса */
.plus-attach-btn.open {
    background: var(--bg-surface-hover, rgba(255, 255, 255, 0.12)) !important;
    color: var(--text-main, #ffffff) !important;
    transform: rotate(45deg);
}

/* 📋 ВЫПАДАЮЩЕЕ МЕНЮ В СТИЛЕ КАРТОЧЕК GEMINI */
.attach-menu-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 8px;
    width: 240px;
    background: var(--bg-surface, #1e1e24);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: geminiPopupFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.attach-menu-item:hover {
    background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
}

.attach-item-icon {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-body, rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
}

[data-theme="dark"] .attach-item-icon {
    background: rgba(255, 255, 255, 0.08);
}

.attach-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attach-item-title {
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main, #18181b);
    line-height: 1.2;
}

[data-theme="dark"] .attach-item-title {
    color: #ffffff;
}

.attach-item-sub {
    font-size: 10px;
    color: var(--text-muted, #71717a);
    margin-top: 2px;
}

/* ========================================================
   💬 ПАРЯЩИЙ ИНТЕРФЕЙС ЧАТА (ШАПКА, ШТОРКА, GEMINI-ОСТРОВОК)
   ======================================================== */

#mainChatArea {
    position: relative !important;
}

/* Отступы для ленты сообщений (чтобы не перекрывались шапкой и островком) */
/* Лента на всю ширину БЕЗ полосы прокрутки */
#messagesContainer {
    padding-top: 130px !important;
    padding-bottom: 240px !important; /* Обеспечивает свободный скролл над полем ввода */
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

#messagesContainer::-webkit-scrollbar {
    display: none !important; /* Убирает полосу в Chrome / Edge / Safari */
}

/* Сами сообщения центрируются аккуратным блоком 760px ровно под шапкой */
.message-row,
.system-bot,
.smart-info-banner {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* 1. ПАРЯЩАЯ ШАПКА */
#chatHeader {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 760px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 16px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    z-index: 103 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

[data-theme="dark"] #chatHeader {
    background: rgba(39, 39, 42, 0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

#chatHeader .chat-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#chatHeader .chat-header-actions {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
}

#chatHeader .chat-header-actions > button:not(.compact-action-btn) {
    margin: 0 !important;
    padding: 0 5px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. ЗАКРЕПЛЕННОЕ СООБЩЕНИЕ */
#pinnedMessageBar {
    position: absolute !important;
    top: 75px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 750px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    z-index: 101 !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] #pinnedMessageBar {
    background: rgba(39, 39, 42, 0.85) !important;
}

/* 3. ПАРЯЩАЯ ШТОРКА «ПОДРОБНОСТИ» */
#curtainContainer {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 760px !important;
    z-index: 102 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: none !important;
}

/* 🔥 ЖЕЛЕЗНО СКРЫВАЕМ ШТОРКУ, КОГДА ОНА ПУСТАЯ ИЛИ СКРЫТА */
#curtainContainer:empty,
#curtainContainer[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
}

#chatCurtainPanel {
    pointer-events: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    background: var(--bg-surface) !important;
    position: relative;
    z-index: 2;
}

#chatCurtainPanel .curtain-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    opacity: 0;
}

#chatCurtainPanel.open .curtain-content {
    max-height: 55vh;
    padding-top: 20px;
    padding-bottom: 5px;
    overflow-y: auto;
    opacity: 1;
}

#curtainToggleWrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

.curtain-toggle-bar {
    padding: 16px 20px 8px 20px !important;
}

.curtain-toggle-bar.open {
    padding: 8px 20px 8px 20px !important;
}

#curtainContainer:not(:empty) ~ #pinnedMessageBar {
    top: 110px !important;
}

@keyframes curtainBounce {
    0% { transform: translateY(-40px); opacity: 0; }
    40% { transform: translateY(10px); opacity: 1; }
    70% { transform: translateY(-2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.curtain-pill-anim {
    animation: curtainBounce 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

/* ========================================================
   💬 АВТО-РАСШИРЯЕМЫЙ ОСТРОВОК ВВОДА (ВВЕРХ ДО 160px)
   ======================================================== */
#inputWrapper {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 740px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 26px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 5px 6px 5px 8px !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    min-height: 48px !important;
    max-height: 220px !important;
    display: flex;
    flex-direction: column !important;
    justify-content: flex-end !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] #inputWrapper {
    background: rgba(36, 38, 44, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
/* Аккуратная капсула для гостевого режима */
#readOnlyNotice {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 740px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 26px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 6px 12px 6px 18px !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    min-height: 48px !important;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

[data-theme="dark"] #readOnlyNotice {
    background: rgba(36, 38, 44, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 600px) {
    #readOnlyNotice {
        bottom: 8px !important;
        padding: 5px 8px 5px 14px !important;
        border-radius: 24px !important;
        width: calc(100% - 16px) !important;
        min-height: 44px !important;
    }
}

#inputWrapper:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2) !important;
}

/* Строка с элементами — кнопки прижаты к низу при многострочном тексте */
.input-area {
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 4px !important;
    position: relative !important;
    width: 100% !important;
}

/* Кнопка добавления вложения (+) */
.plus-attach-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 0 1px 0 !important;
    flex-shrink: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease !important;
}

.plus-attach-btn:hover {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
}

/* Поле ввода: без жесткого height !important для работы JS scrollHeight */
#messageInput.chat-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-main) !important;
    padding: 7px 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    min-height: 34px !important;
    max-height: 160px !important;
    resize: none !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#messageInput::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.75;
}

/* Кнопка отправки (чистая уточка без кружка и фона) */
.send-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 0 1px 0 !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, filter 0.15s ease !important;
}

[data-theme="dark"] .send-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.send-btn:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 8px rgba(255, 193, 7, 0.45));
}

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

@media (max-width: 600px) {
    #inputWrapper {
        bottom: 8px !important;
        padding: 4px 5px 4px 6px !important;
        border-radius: 24px !important;
        width: calc(100% - 16px) !important;
        min-height: 44px !important;
    }
}

/* Контейнер кнопки-иконки слева */
.search-icon-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
    pointer-events: none;
    color: var(--text-muted);
    z-index: 4;
    transition: color 0.2s ease;
}

/* Режим крестика при наличии текста */
.search-icon-btn.has-text {
    cursor: pointer;
    pointer-events: auto;
    color: var(--text-main);
}

.search-icon-btn.has-text:hover {
    color: var(--primary, #ffc107);
}

/* Базовые стили для SVG внутри кнопки */
.search-icon-btn svg {
    position: absolute;
    width: 16px;
    height: 16px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Состояние 1: Лупа (видна, когда текста нет) */
.search-icon-btn .icon-search {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}
.search-icon-btn.has-text .icon-search {
    transform: rotate(90deg) scale(0.3);
    opacity: 0;
}

/* Состояние 2: Крестик (виден, когда есть текст) */
.search-icon-btn .icon-cross {
    transform: rotate(-90deg) scale(0.3);
    opacity: 0;
}
.search-icon-btn.has-text .icon-cross {
    transform: rotate(0deg) scale(1);
    opacity: 1;
}
.search-icon-btn.has-text:hover .icon-cross {
    transform: rotate(90deg) scale(1.15);
}

/* 🔗 Кликабельная ссылка на канал команды */
.live-team-link {
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.live-team-link:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

/* 📱 Матовая выдвижная панель телеметрии */
.live-rider-card .live-card-drawer {
    background: transparent;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

/* =======================================================
   🖤 МОНОХРОМНЫЙ СТИЛЬ ПРОТОКОЛА VILKA (B&W MINIMALISM)
   ======================================================= */
.live-rider-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.live-rider-card:hover {
    border-color: var(--text-muted) !important;
}
.live-rider-card.is-me {
    border: 1.5px solid var(--text-main) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.live-card-compact-row {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Монохромные бейджи мест и номеров */
.live-mono-rank {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 26px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.live-mono-rank.rank-1 {
    background: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
}
.live-mono-bib {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}

/* Типографика */
.live-squad-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    line-height: 1.3;
}
.live-member-link {
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(120, 120, 120, 0.3);
    transition: color 0.15s;
}
.live-member-link:hover {
    color: var(--text-main);
    text-decoration-color: var(--text-main);
}
.live-mono-slash {
    opacity: 0.3;
    margin: 0 3px;
}
.live-cat-text {
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    color: var(--text-main);
}
.live-total-time {
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    font-size: 14px;
}
.live-total-speed {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Раскрытая шторка (100% ширина на ПК и смартфонах) */
.live-rider-card .live-card-drawer {
    width: 100% !important;
    background: var(--bg-body) !important;
    border-top: 1px solid var(--border) !important;
    box-sizing: border-box !important;
}
.live-drawer-content {
    width: 100% !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

/* Телеметрия 3 в ряд */
.live-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
}
.live-telemetry-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}
.live-tel-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 7px;
    font-weight: 800;
    color: var(--text-muted);
}
.live-tel-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
}

/* Сетка сплитов */
.live-laps-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.live-laps-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-laps-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px 2px;
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch; /* Плавный свайп на iOS */
}
.live-laps-grid::-webkit-scrollbar {
    display: none; /* Скрываем полосу прокрутки в Chrome/Safari */
}
.live-lap-card {
    flex: 0 0 108px; /* Не сжимается и не растягивается */
    min-width: 108px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.15s ease;
}
.live-lap-card.is-leader {
    border-color: var(--text-main);
    background: var(--bg-surface-hover);
}
.live-lap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 8.5px;
    font-weight: 800;
    color: var(--text-muted);
}
.live-lap-gap {
    font-family: 'Roboto Mono', monospace;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
}

.live-lap-card.is-leader .live-lap-gap {
    color: var(--text-main);
    background: var(--bg-body);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.live-lap-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.live-lap-accum {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    color: var(--text-muted);
}

/* Подвал шторки */
.live-drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    width: 100%;
}
.live-mono-pts {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
}
.live-btn-accent {
    background: var(--primary);
    color: #000000;
    border: none;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.1s;
}
.live-btn-accent:active {
    transform: scale(0.98);
}

.live-nav-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    flex-shrink: 0;
}

.live-nav-capsule {
    display: flex;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 3px;
    gap: 2px;
    flex: 1;
    max-width: calc(50% - 4px);
    box-sizing: border-box;
}

.live-nav-btn {
    flex: 1;
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 7px 10px;
    border-radius: 50px;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.live-nav-btn .live-nav-ico {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.live-nav-btn.active {
    background: var(--text-main) !important;
    color: var(--bg-body) !important;
}

.live-btn-txt-short {
    display: none;
}

@media (max-width: 600px) {
    .live-nav-header-row {
        padding: 8px 10px;
        gap: 6px;
    }
    .live-nav-capsule {
        padding: 2px;
    }
    .live-nav-btn {
        padding: 6px 4px;
        font-size: 8.5px;
        gap: 4px;
    }
    .live-nav-btn .live-nav-ico {
        width: 12px;
        height: 12px;
    }
    .live-btn-txt-full {
        display: none;
    }
    .live-btn-txt-short {
        display: inline;
    }
}

/* =======================================================
   🖤 МОНОХРОМНАЯ ШАПКА И АНИМИРОВАННЫЙ КРЕСТИК
   ======================================================= */
.live-modal-top-bar {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    gap: 12px;
    flex-shrink: 0;
}

.live-top-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
}

.live-top-meta-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.live-top-race-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Монохромные бейджи даты и дистанции */
.live-top-mono-badge {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Монохромная кнопка CSV */
.live-top-csv-btn {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 5px 10px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.live-top-csv-btn:hover {
    background: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
}

/* 🔥 АНИМИРОВАННЫЙ КРЕСТИК ЗАКРЫТИЯ */
.live-modal-close-btn {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.live-modal-close-btn svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease;
}
.live-modal-close-btn:hover {
    color: var(--text-main);
    border-color: var(--text-main);
    background: var(--bg-surface-hover);
    transform: scale(1.08);
}
.live-modal-close-btn:hover svg {
    transform: rotate(90deg);
}
.live-modal-close-btn:active {
    transform: scale(0.92);
}

@media (max-width: 600px) {
    .live-modal-top-bar {
        padding: 10px 12px;
    }
    .live-top-race-name {
        font-size: 11px;
    }
    .live-top-mono-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    .live-csv-label {
        display: none;
    }
}

/* =======================================================
   🖤 МОНОХРОМНЫЕ ПЛАШКИ КАТЕГОРИЙ (БЕЗ ЖЁЛТОГО И "КАТЕГОРИЯ:")
   ======================================================= */
.live-group-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-hover);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-main);
    border-radius: 8px;
    padding: 9px 14px;
    margin: 16px 0 8px 0;
    box-sizing: border-box;
    width: 100%;
}

.live-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-main);
}

.live-group-name {
    color: var(--text-main) !important;
}

@media (max-width: 600px) {
    .live-group-banner {
        padding: 8px 10px;
        margin: 12px 0 6px 0;
    }
    .live-group-title {
        font-size: 9.5px;
    }
}

/* =======================================================
   🖤 МОНОХРОМНЫЕ ЭЛЕМЕНТЫ СТАРТ-ЛИСТА (VILKA MINIMAL)
   ======================================================= */
.live-mono-time {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    min-width: 44px;
    text-align: center;
}

.live-mono-input {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 5px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
.live-mono-input.bib { width: 38px; font-size: 12px; }
.live-mono-input.time { width: 56px; font-size: 11px; }
.live-mono-input:focus { border-color: var(--text-main); }

/* Монохромные бейджи оплаты */
.live-mono-chip {
    font-family: 'Roboto Mono', monospace;
    font-size: 9.5px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-main);
    white-space: nowrap;
}
.live-mono-chip.paid {
    border-color: var(--text-main);
    background: var(--text-main);
    color: var(--bg-body);
}
.live-mono-chip.unpaid {
    color: var(--text-muted);
    border-style: dashed;
}
.live-mono-chip.partly-paid {
    border-color: var(--text-main);
}

/* Строки участников внутри выдвижной шторки */
.live-drawer-members-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.live-drawer-member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    gap: 8px;
}
.live-dm-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.live-dm-name {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}
.live-dm-meta {
    font-family: 'Roboto Mono', monospace;
    font-size: 9.5px;
    color: var(--text-muted);
}
.live-dm-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.live-dm-btn {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.15s;
}
.live-dm-btn:hover {
    border-color: var(--text-main);
}
.live-dm-btn.danger {
    color: var(--danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.3);
}
.live-dm-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ⏱ Вертикальный блок BIB + ВРЕМЯ */
.live-start-meta-group.vertical {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
    min-width: 66px;
}

.live-mono-input.bib {
    width: 44px;
    height: 22px;
    font-size: 11px;
}

.live-mono-input.time {
    width: 66px;
    height: 22px;
    font-size: 10px;
    padding: 2px 3px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.live-mono-time {
    min-width: 66px;
    font-size: 10px;
    padding: 2px 4px;
    text-align: center;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.live-mono-chip.partly-paid {
    border-color: var(--text-muted);
    color: var(--text-main);
    background: var(--bg-surface-hover);
}

.live-mono-chip.paid-sm,
.live-mono-chip.unpaid-sm {
    font-size: 8.5px;
    padding: 2px 6px;
    transition: 0.15s ease;
}

.live-mono-chip:active {
    transform: scale(0.95);
}

/* =======================================================
   🖤 МОНОХРОМНЫЕ КНОПКИ ДЕЙСТВИЙ (ВСТУПИТЬ / ЗАЯВИТЬ)
   ======================================================= */
.live-action-mono-btn {
    background: var(--text-main);
    color: var(--bg-body);
    border: 1px solid var(--text-main);
    padding: 5px 9px;
    border-radius: 6px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.live-action-mono-btn:hover {
    opacity: 0.88;
}

.live-action-mono-btn:active {
    transform: scale(0.97);
}

@media (max-width: 600px) {
    .live-action-mono-btn {
        padding: 4px 7px;
        font-size: 8px;
    }
}

/* =======================================================
   🖤 МОБИЛЬНАЯ МНОГОСТРОЧНАЯ КАРТОЧКА (STACK LAYOUT)
   ======================================================= */
.live-card-compact-row.stack-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
}

/* Ряд 1: Верхние мета-данные */
.live-card-top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 24px;
}

.live-meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ряд 2: Основная информация */
.live-card-middle-line {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.live-card-middle-line .live-rider-name {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    word-break: break-word;
}

.live-card-middle-line .live-squad-sub {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Ряд 3: Футер с категорией и кнопкой */
.live-card-bottom-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-top: 2px;
}

.live-card-bottom-line .live-compact-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.live-card-action-wrap {
    flex-shrink: 0;
}

/* Бейджи и инпуты хронометража */
.live-mono-bib {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    min-width: 32px;
    text-align: center;
}

.live-mono-time {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    min-width: 60px;
    text-align: center;
}

.live-mono-input.bib {
    width: 38px;
    height: 22px;
    font-size: 11px;
}

.live-mono-input.time {
    width: 68px;
    height: 22px;
    font-size: 10.5px;
}

/* Адаптив для узких экранов (iPhone SE / 375px) */
@media (max-width: 480px) {
    .live-card-compact-row.stack-layout {
        padding: 9px 12px;
        gap: 6px;
    }
    .live-card-middle-line .live-rider-name {
        font-size: 13px;
    }
    .live-card-middle-line .live-squad-sub {
        font-size: 10.5px;
    }
}

/* =======================================================
   🧊 СТРОГИЕ РАЗМЕРЫ КНОПКИ В ШАПКЕ ЧАТА (НЕ ПРЫГАЕТ)
   ======================================================= */
.live-action-glass-btn.compact-action-btn,
button.compact-action-btn {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    font-size: 9px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.live-action-glass-btn.compact-action-btn span,
button.compact-action-btn span {
    font-size: 9px !important;
    margin-left: 2px !important;
    white-space: nowrap !important;
}

/* =======================================================
   🤍 СВЕТЛОЕ ТАБЛО VILKA + ПОЛНОЭКРАННЫЕ СТОРИС-КАРТОЧКИ
   ======================================================= */

/* Базовый оверлей */
.modern-welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #eef0f5;
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 60px 16px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.35s ease;
    -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .modern-welcome-overlay {
    background: #0d0f14;
}

/* Фоновый паттерн уточек */
.bg-floating-ducks-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.bg-floating-duck {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
    animation: duckFloatAnim 6s ease-in-out infinite alternate;
}

@keyframes duckFloatAnim {
    0% { transform: translateY(0px) rotate(var(--rot)) scale(1); }
    100% { transform: translateY(-14px) rotate(calc(var(--rot) + 6deg)) scale(1.03); }
}

/* Десктоп-контейнер */
.vk-dash-container-desk {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: auto;
}

/* Верхняя карточка табло (ПК) */
.board-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 36px;
    padding: 24px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.07);
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 24px;
    position: relative;
    box-sizing: border-box;
}

[data-theme="dark"] .board-container {
    background: #181a20;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* Левая карточка атлета */
.hero-mono-card {
    background: linear-gradient(145deg, #1e2026 0%, #111216 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 470px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.hero-photo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    z-index: 1;
    pointer-events: none;
}

.hero-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
}

.hero-photo-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
    z-index: 2;
}

.hero-content-top {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
}

.hero-duck-floating {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.hero-duck-floating:hover {
    transform: scale(1.06);
}

.hero-title-group {
    position: relative;
    z-index: 3;
    margin-top: auto;
    margin-bottom: 18px;
}

.hero-greeting {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.hero-rider-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.hero-badges-row {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-pill-badge {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 14px;
    border-radius: 50px;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Правая панель */
.right-content-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
    box-sizing: border-box;
}

.right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.right-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    text-transform: uppercase;
}

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

.race-row-item {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
.race-row-item:hover {
    background: var(--bg-surface-hover);
    border-color: var(--text-main);
    transform: translateY(-1px);
}

.race-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.race-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    flex-shrink: 0;
}

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

.race-row-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.race-row-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.race-status-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.race-status-tag.registered {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.race-status-tag.finished {
    background: var(--bg-surface);
    color: var(--text-main);
    border: 1px solid var(--border);
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
}
.race-status-tag.suggest {
    background: var(--text-main);
    color: var(--bg-body);
    font-weight: 900;
}

/* =======================================================
   📰 ЦЕНТРИРОВАННЫЙ ЗАГОЛОВОК С ИКОНКОЙ УТОЧКИ (ПК)
   ======================================================= */
.vk-dash-feed-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.vk-dash-feed-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 4px !important;
}

.vk-dash-feed-title-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

/* 1-й уровень: желтый с уточкой */
.vk-dash-feed-main-title {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: var(--primary, #ffc107) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.vk-dash-feed-duck-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 2-й уровень: серый */
.vk-dash-feed-sub-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #8e929f) !important;
    text-align: center !important;
}

/* Кнопка «ВСЕ ПУБЛИКАЦИИ» под карточками */
.vk-dash-all-bottom-btn {
    background: var(--bg-surface, #181a20) !important;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
    color: var(--text-main, #ffffff) !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.vk-dash-all-bottom-btn:hover {
    border-color: var(--primary, #ffc107) !important;
    color: var(--primary, #ffc107) !important;
    background: rgba(255, 193, 7, 0.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.25) !important;
}

/* =======================================================
   📰 ДЕСКТОПНЫЕ ПОСТЕРЫ НОВОСТЕЙ (ФОТО НА ВЕСЬ ФОН + БЛЮР)
   ======================================================= */
.vk-dash-news-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vk-dash-news-card {
    position: relative !important;
    height: 450px !important; /* 🔥 Сделали карточки выше (было 380px) */
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
    background: #0d0f14 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.vk-dash-news-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Фоновая картинка на 100% высоты карточки */
.vk-dash-news-card .vk-dash-news-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
    transition: transform 0.4s ease !important;
}

.vk-dash-news-card:hover .vk-dash-news-bg {
    transform: scale(1.05) !important;
}

/* Градиентное затемнение под текстом */
.vk-dash-news-card .vk-dash-news-gradient {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.95) 0%,
        rgba(10, 12, 16, 0.5) 45%,
        transparent 75%
    ) !important;
    pointer-events: none !important;
}

/* 🔥 Нижняя плашка: строго фиксированная высота для всех карточек */
.vk-dash-news-card .vk-dash-news-body {
    position: relative !important;
    z-index: 3 !important;
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
    padding: 16px 18px 14px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    background: linear-gradient(
        to top,
        rgba(12, 14, 20, 0.92) 0%,
        rgba(12, 14, 20, 0.7) 80%,
        transparent 100%
    ) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 24px 24px !important;
    box-sizing: border-box !important;
}

.vk-dash-news-card .vk-dash-news-team-tag {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    margin-bottom: 4px !important;
    backdrop-filter: blur(8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* Заголовок с минимальной высотой (чтобы 1 и 2 строки стояли ровно) */
.vk-dash-news-card .vk-dash-news-headline {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 4px 0 !important;
    min-height: 34px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.vk-dash-news-card .vk-dash-news-snippet {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.4 !important;
    font-family: 'Manrope', sans-serif !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.vk-dash-news-card .vk-dash-news-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 8px !important;
    margin-top: 6px !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
}

/* =======================================================
   🏷️ АККУРАТНЫЙ БЕЙДЖ КОМАНДЫ В КАРТОЧКАХ (ПК + МОБИЛКА)
   ======================================================= */
.vk-dash-news-team-tag,
.vk-dash-news-card .vk-dash-news-team-tag,
.vk-dash-mobile-news-card .vk-dash-news-team-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    box-sizing: border-box !important;
    user-select: none !important;
}
/* =======================================================
   📱 СМАРТФОН: ЧИСТЫЙ СТОРИС-СЛАЙДЕР С БЛЮРОМ ВНИЗУ
   ======================================================= */
.vk-dash-snap-container {
    display: none;
}

@media (max-width: 820px) {
    .modern-welcome-overlay {
        padding: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .vk-dash-container-desk {
        display: none;
    }

    /* 1. Полное скрытие системной полосы скролла */
    .vk-dash-snap-container {
        display: block;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 10;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .vk-dash-snap-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .vk-dash-slide {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Слайд 1: Профиль и старты */
    .vk-dash-mobile-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 28px;
        padding: 14px;
        height: 100%;
        max-height: calc(100dvh - 24px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }
    [data-theme="dark"] .vk-dash-mobile-card {
        background: #181a20;
        border-color: rgba(255, 255, 255, 0.1);
    }

/* Карточка профиля атлета (увеличена высота) */
    .vk-dash-mobile-hero {
        background: linear-gradient(145deg, #1d1f27 0%, #111318 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 22px !important;
        padding: 16px !important;
        position: relative !important;
        overflow: hidden !important;
        min-height: 230px !important; /* Увеличено со 170px до 230px */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        margin-bottom: 12px !important;
        flex-shrink: 0 !important;
    }

    /* Фото атлета: центрирование по лицу и повышенная четкость */
    .vk-dash-mobile-hero-photo {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 12% !important; /* Фокус поднят к лицу */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%) !important;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%) !important;
        opacity: 0.88 !important; /* Фото стало контрастным и ярким */
        filter: contrast(105%) !important;
    }

    .vk-dash-mobile-hero-name {
        font-family: 'Unbounded', sans-serif !important;
        font-size: 21px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        margin: 0 0 6px 0 !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1.1 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
    }
    /* Слайды 2..N: Полноэкранные карточки с фото на весь экран */
    .vk-dash-mobile-news-card {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 28px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
        background: #0d0f14;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
    }

    /* Фоновое фото на 100% карточки */
    .vk-dash-mobile-news-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
    }

    /* Мягкий градиент в нижней трети */
    .vk-dash-mobile-news-gradient {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 35%, transparent 65%);
        pointer-events: none;
    }

    /* Блок текста со стеклянным размытием только снизу */
    .vk-dash-mobile-news-body {
        position: relative;
        z-index: 3;
        padding: 20px 18px 18px 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: linear-gradient(to top, rgba(12, 14, 20, 0.88) 0%, rgba(12, 14, 20, 0.6) 80%, transparent 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0 0 28px 28px;
        box-sizing: border-box;
    }

    .vk-dash-news-headline-mob {
        font-family: 'Unbounded', sans-serif;
        font-size: 14px;
        font-weight: 800;
        color: #ffffff;
        line-height: 1.3;
        text-transform: uppercase;
        margin: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .vk-dash-news-snippet-mob {
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.45;
        font-family: 'Manrope', sans-serif;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }

    /* 2. Правый блок: вертикальная надпись + желтые полоски */
    .vk-dash-pagination {
        position: fixed !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .vk-dash-pagination-label {
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        font-family: 'Unbounded', sans-serif !important;
        font-size: 7px !important;
        font-weight: 800 !important;
        color: rgba(255, 193, 7, 0.75) !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
        margin-bottom: 2px !important;
    }

    .vk-dash-dots-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .vk-dash-dot {
        width: 3.5px !important;
        height: 14px !important;
        border-radius: 4px !important;
        background: rgba(255, 193, 7, 0.28) !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .vk-dash-dot.active {
        background: var(--primary, #ffc107) !important;
        height: 26px !important;
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.8) !important;
    }
}

/* =======================================================
   ⚡ АНИМАЦИЯ БЕГУЩЕЙ ПОЛОСКИ «ГОТОВЬ ВАТТЫ»
   ======================================================= */
@keyframes fillProgressDash {
    0% { width: 0%; }
    20% { width: 25%; }
    50% { width: 65%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

@keyframes textProgressDash {
    0% { content: "0%"; }
    10% { content: "12%"; }
    20% { content: "25%"; }
    30% { content: "38%"; }
    40% { content: "51%"; }
    50% { content: "65%"; }
    60% { content: "78%"; }
    70% { content: "86%"; }
    80% { content: "90%"; }
    90% { content: "97%"; }
    100% { content: "100%"; }
}

.dash-progress-text::after {
    content: "100%";
    animation: textProgressDash 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =======================================================
   🔘 НИЖНЯЯ ПАНЕЛЬ: КНОПКА ПОД ДАННЫМИ О ВАТТАХ И РЕЙТИНГЕ
   ======================================================= */
.bottom-action-pill,
.vk-bottom-pill {
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 14px 16px 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.pill-stats-group,
.vk-stat-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
}

.pill-stat-item,
.vk-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.pill-stat-lbl,
.vk-stat-lbl {
    font-size: 8.5px !important;
    font-family: 'Unbounded', sans-serif !important;
    color: var(--text-muted) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
}

.pill-stat-val,
.vk-stat-val {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
}

.btn-enter-peloton,
.vk-btn-enter {
    width: 100% !important;
    background: var(--text-main) !important;
    color: var(--bg-body) !important;
    border: none !important;
    padding: 13px !important;
    border-radius: 12px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.btn-enter-peloton:hover,
.vk-btn-enter:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* =======================================================
   📊 АНАЛИТИКА И СТАТИСТИКА ГОНКИ (BENTO DASHBOARD)
   ======================================================= */
.live-analytics-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 4px 0 20px 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 1. Карточки KPI */
.live-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.live-kpi-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    box-sizing: border-box;
}

.live-kpi-lbl {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-kpi-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
}

.live-kpi-sub {
    font-size: 9.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Сетка графиков */
.live-chart-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.live-chart-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    min-width: 0;
}

.live-chart-card.full-width {
    grid-column: 1 / -1;
}

.live-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.live-chart-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-chart-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
}

.live-canvas-wrap {
    position: relative;
    width: 100%;
    height: 240px;
}

/* 📱 МОБИЛЬНАЯ ВЕРСТКА: ВСЁ В СТРОГИЙ СТОЛБИК (1 КОЛОНКА) */
@media (max-width: 768px) {
    .live-kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .live-chart-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .live-chart-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }
    .live-canvas-wrap {
        height: 200px !important;
    }
}

/* =======================================================
   🏁 ИСПРАВЛЕННАЯ ШАПКА ЧАТА ГОНКИ (БЕЗ НАЕЗДОВ)
   ======================================================= */
.chat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    min-height: 56px !important;
    height: auto !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    gap: 8px !important;
}

/* Блок заголовка и мета-информации по центру */
.chat-header-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 !important;
    gap: 2px !important;
}

.chat-race-title-text {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--text-main) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.chat-race-subtitle-text {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
}

/* Компактная кнопка действия справа */
.chat-race-action-btn {
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* Шторка подробностей */
#curtainToggleWrapper {
    position: relative !important;
    width: 100% !important;
    z-index: 9 !important;
}

.curtain-toggle-bar-clean {
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 193, 7, 0.95) !important;
    border: 1px solid var(--primary) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    user-select: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

@media (max-width: 400px) {
    .chat-race-title-text { font-size: 11.5px !important; }
    .chat-race-subtitle-text { font-size: 8.5px !important; }
    .chat-race-action-btn { font-size: 8px !important; padding: 0 8px !important; }
}
/* =======================================================
   ⬅️ КОМПАКТНАЯ СТРЕЛКА "НАЗАД" В ШАПКЕ ЧАТА НА СМАРТФОНЕ
   ======================================================= */
@media (max-width: 768px) {
    /* 1. Прижимаем всё содержимое к левому краю капсулы */
    .chat-header {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 2. Компактные границы кнопки стрелки */
    .chat-header .back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;        /* Было 26px — уменьшили пустоты */
        height: 20px !important;
        min-width: 20px !important;
        padding: 0 !important;
        margin: 0 !important;          /* Обнулили внешние поля */
        background: transparent !important;
        border: none !important;
        color: var(--text-main) !important;
        flex-shrink: 0 !important;
    }

    /* 3. Размер SVG-иконки */
    .chat-header .back-btn svg {
        width: 18px !important;
        height: 18px !important;
        stroke-width: 2.5 !important;
    }

    /* 4. Убираем пустой аватар */
    .chat-header #activeChatAvatarContainer:empty {
        display: none !important;
    }

    /* 5. Прижимаем название гонки вплотную к стрелке */
    .chat-header > div:nth-child(3),
    .chat-header .chat-info {
        margin-left: 2px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
}

/* =======================================================
   👤 ВКЛЮЧЕНИЕ СКРОЛЛА ВО ВКЛАДКЕ ПРОФИЛЯ СЛЕВА
   ======================================================= */
#tab-profile {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#tab-profile #profileTabContent,
#tab-profile .dash-container {
    padding-bottom: 110px !important; /* Отступ снизу, чтобы нижняя панель навигации не перекрывала историю гонок */
    box-sizing: border-box !important;
}

/* =======================================================
   🌫️ МОНОХРОМНАЯ ШТОРКА "МАТОВОЕ СТЕКЛО" (GLASSMORPHISM)
   ======================================================= */
.curtain-toggle-bar.glass-monochrome {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .curtain-toggle-bar.glass-monochrome {
    background: rgba(30, 30, 35, 0.75) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Текст «ПОДРОБНОСТИ» */
.curtain-toggle-bar.glass-monochrome #curtainToggleText {
    color: var(--text-main) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
}

/* Центральный язычок-хэндл */
.curtain-toggle-bar.glass-monochrome .curtain-handle {
    background: var(--border) !important;
    opacity: 0.8 !important;
}

/* Чип организатора слева */
.curtain-toggle-bar.glass-monochrome .curtain-creator-chip {
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
.curtain-toggle-bar.glass-monochrome .curtain-creator-chip:hover {
    border-color: var(--text-main) !important;
}

/* Кнопка участников справа */
.curtain-toggle-bar.glass-monochrome .curtain-badge-btn {
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}
.curtain-toggle-bar.glass-monochrome .curtain-badge-btn:hover {
    border-color: var(--text-main) !important;
}

/* =======================================================
   📱 ПОЛНОЭКРАННЫЙ LIVE-BOARD НА СМАРТФОНАХ (БЕЗ ПОЛЕЙ)
   ======================================================= */
@media (max-width: 768px) {
    #liveBoardModal {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    #liveBoardModal .modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* 1. Шапка: учитываем челку / Dynamic Island и боковые вырезы */
    #liveBoardModal .modal-header,
    #liveBoardModal .live-modal-top-header,
    #liveBoardModal .live-modal-top-bar {
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
        padding-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Название не выталкивает крестик за экран */
    #liveBoardModal #liveBoardTitle {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* 3. Кнопка закрытия (крестик): гарантированный размер по стандарту Apple (44x44px) */
    #liveBoardModal .live-close-btn,
    #liveBoardModal .modal-close-btn,
    #liveBoardModal .live-modal-close-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 100 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Увеличиваем размер самой иконки внутри кнопки */
    #liveBoardModal .live-close-btn svg,
    #liveBoardModal .modal-close-btn svg,
    #liveBoardModal .live-modal-close-btn svg {
        width: 20px !important;
        height: 20px !important;
        pointer-events: none !important;
    }

    /* 4. Нижний отступ под полоску "Home" (Home Bar) iPhone */
    #liveBoardModal .modal-box > div:last-child {
        padding: 10px 12px max(18px, env(safe-area-inset-bottom)) 12px !important;
    }
}

/* =======================================================
   🏁 АДАПТИВНАЯ КАРТОЧКА РЕЗУЛЬТАТОВ (ПК vs СМАРТФОН)
   ======================================================= */

/* 1. ДЕСКТОП: Строго горизонтальный ряд в 3 колонки (только для результатов) */
.live-card-compact-row:not(.stack-layout) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.live-card-rank-col {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.live-card-info-col {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.live-card-info-col .live-rider-name {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.live-card-time-col {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
}

.live-card-time-col .live-time-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 1px !important;
}

/* 2. СМАРТФОНЫ (< 650px): Превращение в 2-этажный стек ТОЛЬКО ДЛЯ РЕЗУЛЬТАТОВ */
@media (max-width: 650px) {
    .live-card-compact-row:not(.stack-layout) {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas: 
            "rank time"
            "info info" !important;
        gap: 6px 8px !important;
        padding: 9px 10px !important;
    }

    /* Ранг уходит в верхний левый угол */
    .live-card-rank-col {
        grid-area: rank !important;
    }

    /* Время, скорость и стрелка уходят в верхний правый угол */
    .live-card-time-col {
        grid-area: time !important;
    }

    .live-card-time-col .live-time-group {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 6px !important;
    }

    /* Название команды и напарники получают 100% ширины снизу */
    .live-card-info-col {
        grid-area: info !important;
        width: 100% !important;
        margin-top: 2px !important;
    }

    .live-card-info-col .live-rider-name {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
    }

    /* 🔥 ЖЕЛЕЗНАЯ ЗАЩИТА СТАРТ-ЛИСТА (STACK LAYOUT НА 100% ШИРИНЫ) */
    .live-card-compact-row.stack-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .live-card-compact-row.stack-layout .live-card-top-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .live-card-compact-row.stack-layout .live-card-middle-line {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 2px !important;
    }

    .live-card-compact-row.stack-layout .live-card-middle-line .live-rider-name {
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 13px !important;
    }

    .live-card-compact-row.stack-layout .live-card-middle-line .live-squad-sub {
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .live-card-compact-row.stack-layout .live-card-bottom-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 2px !important;
    }
}

/* 📱 Мобильный горизонтальный календарь-стрип над лентой */
.vk-strip-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 12px 12px;
  margin: 10px 12px 14px;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .vk-strip-widget {
    display: none; /* На ПК не дублируем большую сетку календаря */
  }
}

.vk-strip-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 10px;
}

.vk-strip-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vk-strip-badge {
  background: var(--primary);
  color: #000;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: 'Roboto Mono', monospace;
}

.vk-strip-nav {
  display: flex;
  gap: 4px;
}

.vk-strip-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
  padding: 0;
}

.vk-strip-nav-btn:active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

.vk-strip-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scroll-snap-type: x mandatory;
}

.vk-strip-track::-webkit-scrollbar {
  display: none;
}

.vk-strip-day {
  flex: 0 0 50px;
  height: 68px;
  background: var(--bg-body);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0 6px;
  box-sizing: border-box;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.15s, border-color 0.15s;
  user-select: none;
}

.vk-strip-day:active {
  transform: scale(0.95);
}

.vk-strip-day.is-active {
  border-color: var(--text-main);
  background: var(--bg-surface-hover);
}

.vk-strip-day.has-race {
  border-color: var(--primary);
  background: rgba(255, 193, 7, 0.08);
}

.vk-strip-day.has-race.is-active {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.25);
}

.vk-strip-dow {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
}

.vk-strip-num {
  font-family: 'Unbounded', sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-main);
}

.vk-strip-duck-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
  animation: vkDuckBob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(255, 193, 7, 0.35));
}
@keyframes vkDuckBob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2.5px) rotate(-6deg);
  }
  50% {
    transform: translateY(0.5px) rotate(0deg);
  }
  75% {
    transform: translateY(-1.5px) rotate(5deg);
  }
}

.vk-strip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
}

.vk-strip-preview {
  margin-top: 8px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vk-strip-tag {
  font-family: 'Unbounded', sans-serif;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  color: #d97706;
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.vk-strip-tag.is-live {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
}

.vk-strip-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.vk-strip-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  margin-top: 2px;
}

.vk-strip-btn {
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 7px 11px;
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: 0.15s;
}

.vk-strip-btn:active {
  transform: scale(0.96);
}

.vk-strip-empty {
  margin-top: 8px;
  background: var(--bg-body);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: 'Unbounded', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Кнопка @ рядом с плюсиком */
.chat-action-svg-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted, #a1a1aa);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    padding: 0;
}

.chat-action-svg-btn:hover {
    color: var(--primary, #ffc107);
    background: rgba(255, 193, 7, 0.1);
    transform: scale(1.06);
}

.chat-action-svg-btn:active {
    transform: scale(0.95);
}

/* Карточка поповера над строкой ввода */
/* Всплывающее меню адресатов над инпутом */
.mention-popover-card {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 0;
    width: 330px;
    max-width: 92vw;
    background: var(--bg-surface, #ffffff);
    border: 1.5px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 193, 7, 0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mentionPopFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@keyframes mentionPopFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0); }
}

.mention-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px 16px;
}

.mention-popover-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main, #111111);
    letter-spacing: 0.5px;
}

.mention-popover-close {
    background: none;
    border: none;
    color: var(--text-muted, #71717a);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.mention-popover-close:hover { color: var(--text-main, #000); }

.mention-search-wrap {
    padding: 0 12px 8px 12px;
    position: relative;
    display: flex;
    align-items: center;
}

.mention-search-wrap svg {
    position: absolute;
    left: 22px;
    color: var(--text-muted, #71717a);
    pointer-events: none;
}

.mention-search-wrap input {
    width: 100%;
    background: var(--bg-body, #f4f4f5);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 8px 12px 8px 34px;
    color: var(--text-main, #111111);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.mention-search-wrap input:focus {
    border-color: var(--primary, #ffc107);
}

.mention-scroll-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 0 8px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mention-scroll-list::-webkit-scrollbar { width: 4px; }
.mention-scroll-list::-webkit-scrollbar-thumb { background: var(--border, #d4d4d8); border-radius: 4px; }

.mention-section-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted, #8e8e93);
    text-transform: uppercase;
    padding: 6px 8px 2px 8px;
    letter-spacing: 0.4px;
}

.mention-row-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.mention-row-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Строка организатора / судьи */
.mention-row-item.is-judge {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
}
.mention-row-item.is-judge:hover {
    background: rgba(255, 193, 7, 0.22);
}

/* Строка "Всем в эфир" */
.mention-row-item.is-all {
    background: var(--bg-body, #f4f4f5);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.mention-row-item.is-all:hover {
    background: rgba(0, 0, 0, 0.08);
}

.mention-avatar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-body, #e4e4e7);
    color: var(--text-main, #111);
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.mention-row-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main, #111111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-row-sub {
    font-size: 9.5px;
    color: var(--text-muted, #71717a);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =======================================================
   🖤 VILKA NATIVE THREAD STREAM (CLEAN & MINIMAL)
   ======================================================= */

/* Отступы ленты: свободный зазор сверху под шапку и снизу под инпут */
#messagesContainer {
padding-top: 195px !important;
    padding-bottom: 280px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#messagesContainer::-webkit-scrollbar {
    display: none !important;
}

/* Контейнер потока сообщений */
.threads-stream-container {
    display: flex;
    flex-direction: column;
    gap: 24px !important;              /* Было 16px -> темы отделены друг от друга свободнее */
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    padding-bottom: 30px !important;   /* Дополнительный нижний воздушный буфер */
    box-sizing: border-box;
}

/* Белая карточка темы */
.thread-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .thread-card {
    background: #1c1c1f;
    border-color: #2e2e33;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.thread-card.is-private {
    border-left: 3.5px solid var(--primary, #ffc107);
}

/* Шапка автора темы */
.thread-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.thread-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.thread-author-link {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main, #18181b);
    cursor: pointer;
}

.thread-meta-dot {
    color: var(--text-muted, #a1a1aa);
    font-size: 10px;
    opacity: 0.4;
}

.thread-meta-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted, #71717a);
}

.thread-private-tag {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.thread-private-tag.is-for-me {
    color: #000;
    background: var(--primary, #ffc107);
}

.thread-dots-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #a1a1aa);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thread-dots-btn:hover {
    color: var(--text-main, #18181b);
}

/* Постер во всю ширину карточки */
.thread-card-poster {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border, #e4e4e7);
    background: var(--bg-body, #f4f4f5);
    cursor: pointer;
}

.thread-card-poster img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Заголовок (первая строка) */
.thread-headline {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: var(--text-main, #18181b) !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Основной текст со всеми абзацами и списками */
.thread-body-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--text-main, #18181b) !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Ветка ответов */
.thread-replies-stream {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--border, #e4e4e7);
}

.thread-reply-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-reply-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-reply-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-main, #18181b);
    cursor: pointer;
}

.thread-reply-content {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-main, #18181b);
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

/* Нижняя панель действий */
.thread-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border, #e4e4e7);
}

.thread-btn-reply {
    background: var(--bg-body, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    color: var(--text-main, #18181b);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}

.thread-btn-reply:hover {
    border-color: var(--text-main, #18181b);
}

.thread-replies-counter {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #71717a);
}

/* =======================================================
   💬 КЛАССИЧЕСКИЙ РЕЖИМ ДЛЯ ЛИЧНЫХ ЧАТОВ (DIRECT / SUPPORT)
   ======================================================= */
/* КЛАССИЧЕСКИЙ РЕЖИМ (ЛИЧКА И ПОДДЕРЖКА) */
#messagesContainer.classic-mode {
    padding-top: 105px !important;
    padding-bottom: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* РЕЖИМ ТРЕДОВ (ГОНКИ И КАНАЛЫ) — ДАЁМ МАКСИМУМ ВОЗДУХА */
#messagesContainer.thread-mode {
    padding-top: 215px !important;    /* 👈 +65px чистого воздуха: карточка больше не липнет к язычку БРИФИНГА */
    padding-bottom: 320px !important; /* 👈 Большой запас снизу: последнее сообщение свободно дышит над инпутом */
}

/* Компактные баблы переписки */
.classic-mode .message-row {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.classic-mode .message-row.mine {
    align-items: flex-end !important;
}

.classic-mode .message-row.theirs {
    align-items: flex-start !important;
}

.classic-mode .message-bubble {
    max-width: 78% !important;
    min-width: 60px !important;
    padding: 9px 14px !important;
    border-radius: 18px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Мои сообщения — акцентный фон */
.classic-mode .message-row.mine .message-bubble {
    background: var(--msg-mine, #f4f4f5) !important;
    color: var(--msg-mine-text, #09090b) !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    border-bottom-right-radius: 4px !important;
}

[data-theme="dark"] .classic-mode .message-row.mine .message-bubble {
    background: #2a2c34 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Чужие сообщения */
.classic-mode .message-row.theirs .message-bubble {
    background: var(--msg-theirs, #ffffff) !important;
    color: var(--msg-theirs-text, #09090b) !important;
    border: 1px solid var(--border, #e4e4e7) !important;
    border-bottom-left-radius: 4px !important;
}

[data-theme="dark"] .classic-mode .message-row.theirs .message-bubble {
    background: #1c1c1f !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #f4f4f5 !important;
}

.classic-mode .msg-sender-name {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-bottom: 4px !important;
    margin-left: 6px !important;
    letter-spacing: 0.2px;
}

.classic-mode .msg-sender-name:hover {
    color: var(--text-main) !important;
}

.chat-dropdown { 
    display: none; 
    position: absolute; 
    right: 12px; 
    top: 48px; 
    background: var(--bg-surface); 
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); 
    border-radius: 14px; 
    overflow: hidden; 
    z-index: 10000; 
    min-width: 195px; 
    border: 1px solid var(--border); 
    flex-direction: column; 
    padding: 5px;
    box-sizing: border-box;
}

.chat-dropdown.show { 
    display: flex; 
    animation: saFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); 
}

.chat-dropdown button { 
    background: transparent; 
    border: none; 
    text-align: left; 
    padding: 10px 12px; 
    font-size: 12.5px; 
    font-weight: 600; 
    color: var(--text-main); 
    cursor: pointer; 
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease; 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    font-family: 'Manrope', sans-serif;
}

.chat-dropdown button:hover { 
    background: var(--bg-surface-hover); 
}

.chat-dropdown button svg {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.chat-dropdown button:hover svg {
    color: var(--text-main);
}

.chat-dropdown button.text-danger svg {
    color: var(--danger, #ef4444);
}

/* =======================================================
   🔍 ПАРЯЩАЯ ПАНЕЛЬ ПОИСКА В ПЕРЕПИСКЕ (SPOTLIGHT CAPSULE)
   ======================================================= */
.in-chat-search-bar {
    position: absolute;
    top: 78px; /* Опускает капсулу чуть ниже границы шапки */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 32px);
    max-width: 440px;
    height: 42px;
    padding: 4px 8px 4px 14px;
    border-radius: 24px;
    background: var(--bg-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    display: none;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    animation: saFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* На экранах до 600px с учётом мобильного хедера */
@media (max-width: 600px) {
    .in-chat-search-bar {
        top: 74px;
        width: calc(100% - 20px);
    }
}

.in-chat-search-icon {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.in-chat-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.in-chat-search-input::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

.in-chat-search-count {
    font-family: 'Roboto Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    padding: 2px 6px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-shrink: 0;
}

.in-chat-search-arrows {
    display: flex;
    align-items: center;
    gap: 2px;
}

.in-chat-search-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s ease;
    padding: 0;
}

.in-chat-search-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.in-chat-search-btn.close-btn:hover {
    color: var(--danger, #ef4444);
}

/* Мягкая акцентная подсветка найденного сообщения */
.chat-search-active-target {
    outline: 2px solid var(--primary) !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.45) !important;
    transition: outline 0.2s ease, box-shadow 0.2s ease !important;
}

/* =======================================================
   📎 МОНОХРОМНОЕ ПАРЯЩЕЕ МЕНЮ ВЛОЖЕНИЙ (+)
   ======================================================= */
#attachMenuPopup {
    position: absolute;
    bottom: 58px;
    left: 12px;
    width: 230px;
    background: var(--bg-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
    box-sizing: border-box;
    animation: saFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

.attach-menu-item:hover {
    background: var(--bg-surface-hover);
}

/* Монохромный квадрат-контейнер иконки */
.attach-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.attach-menu-item:hover .attach-item-icon {
    border-color: var(--primary);
    color: var(--primary);
}

.attach-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attach-item-title {
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
}

.attach-item-sub {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 1px;
}

/* =======================================================
   🦆 ПАРЯЩИЙ МОНОХРОМНЫЙ ПИКЕР УТИНЫХ ЭМОДЗИ
   ======================================================= */
#emojiPickerContainer {
    position: absolute;
    bottom: 58px;
    right: 12px;
    width: 250px;
    background: var(--bg-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    box-sizing: border-box;
    animation: saFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.duck-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 6px 4px;
    border-bottom: 1px solid var(--border);
}

.duck-picker-header span {
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.duck-picker-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.duck-picker-close:hover {
    color: var(--text-main);
}

.duck-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 2px;
    box-sizing: border-box;
}

.duck-emoji-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    padding: 6px;
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.duck-emoji-btn svg {
    width: 26px;
    height: 26px;
    display: block;
}

.duck-emoji-btn:hover {
    border-color: var(--primary);
    background: var(--bg-surface-hover);
    transform: translateY(-2px);
}

.duck-emoji-btn:active {
    transform: scale(0.92);
}

/* 🦆 Встраивание уточки в строку сообщения */
.duck-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -4px;
    margin: 0 2px;
    width: 22px;
    height: 22px;
    color: var(--text-main);
}

.duck-inline-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =======================================================
   💬 МОНОХРОМНОЕ КОНТЕКСТНОЕ МЕНЮ
   ======================================================= */
.ctx-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999999;
    display: none;
    align-items: center; /* Центрирование по вертикали на смартфонах */
    justify-content: center; /* Центрирование по горизонтали на смартфонах */
    padding: 16px;
    box-sizing: border-box;
}

.ctx-card-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 8px;
    width: 240px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    user-select: none;
    /* Плавное масштабирование без смещения координат */
    animation: ctxScaleIn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ctxScaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Строка 5 быстрых реакций */
.ctx-react-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

.ctx-quick-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.ctx-quick-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.ctx-quick-btn:hover {
    background: var(--bg-surface-hover);
    transform: scale(1.15);
}

.ctx-quick-btn.ctx-plus-btn {
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    border-radius: 0 6px 6px 0;
    width: 28px;
}

.ctx-quick-btn.ctx-plus-btn:hover {
    color: var(--text-main);
}

/* Сетка всех 12 реакций */
.ctx-grid-panel {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
    animation: saFadeIn 0.14s ease-out;
}

.ctx-grid-btn {
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.ctx-grid-btn svg {
    width: 18px;
    height: 18px;
}

.ctx-grid-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border);
    transform: scale(1.15);
}

/* Действия */
.ctx-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ctx-row-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

.ctx-row-btn svg {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.ctx-row-btn:hover {
    background: var(--bg-surface-hover);
}

.ctx-row-btn:hover svg {
    color: var(--text-main);
}

.ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 3px 4px;
}

.ctx-row-btn.is-danger {
    color: var(--danger, #ef4444);
}

.ctx-row-btn.is-danger svg {
    color: var(--danger, #ef4444);
}

.ctx-row-btn.is-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* Нижняя плашка «Кто прочитал» */
.ctx-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 2px 10px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease;
}

.ctx-footer-bar:hover {
    color: var(--text-main);
}

/* =======================================================
   🏷️ ЛЁГКИЕ МИКРО-БЕЙДЖИ РОЛЕЙ БЕЗ СЕРОЙ ЗАЛИВКИ
   ======================================================= */
.thread-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: 5px;
    font-family: 'Roboto Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    user-select: none;
    vertical-align: middle;
}

/* Золотистый контур для организаторов */
.thread-role-badge.is-organizer {
    border-color: rgba(255, 193, 7, 0.45);
    color: var(--primary);
}

/* Контрастный синий контур для судей */
.thread-role-badge.is-referee {
    border-color: rgba(59, 130, 246, 0.45);
    color: #3b82f6;
}

/* Фирменный монохромный контур для капитанов */
.thread-role-badge.is-captain {
    border-color: var(--border);
    color: var(--text-main);
}

/* Микро-тег автора ветки (без рамки) */
.thread-role-badge.is-author {
    border: none;
    padding: 0 2px;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0.75;
}

/* =======================================================
   🦆 УТИНЫЕ ИСТОРИИ — РЕДАКЦИОННАЯ ЛЕНТА ПРАВОГО БЛОКА
   ======================================================= */
#messagesContainer.newsfeed-mode:not(.thread-mode):not(.classic-mode) {
    padding-top: 85px !important;
    padding-bottom: 60px !important;
}

.duck-stories-container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

/* 1. ВЕРХНЯЯ ПАНЕЛЬ КОМАНД */
.duck-stories-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 6px 0;
    position: relative !important;
    background: transparent !important;
    z-index: 5;
}

.duck-teams-track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.duck-teams-track::-webkit-scrollbar { 
    display: none; 
}

.duck-team-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 50px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.duck-team-chip:hover {
    color: var(--text-main);
    border-color: var(--text-main);
}
.duck-team-chip.active {
    background: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
}
.duck-chip-counter {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    opacity: 0.7;
}

/* 2. ГЛАВНАЯ НОВОСТЬ (+50% К БАЗОВОЙ ВЫСОТЕ) */
.duck-lead-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.duck-lead-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Базовая высота увеличена на 50% (было 280px -> стало 420px) */
.duck-hero-cover {
    position: relative;
    width: 100%;
    height: 420px;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* При наведении плавно раскрывается в вертикальный постер */
.duck-lead-card:hover .duck-hero-cover,
.duck-lead-card.is-expanded-poster .duck-hero-cover {
    height: 580px;
}

.duck-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.duck-lead-card:hover .duck-hero-img {
    transform: scale(1.02);
}

.duck-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.95) 0%,
        rgba(10, 12, 16, 0.4) 35%,
        transparent 70%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.duck-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.duck-badge-item {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}
.duck-badge-item.team {
    background: var(--text-main);
    color: var(--bg-body);
}
.duck-badge-item.tag {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.duck-hero-headline {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(17px, 3.2vw, 23px);
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Контент статьи */
.duck-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.duck-meta-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 10px;
}

.duck-lead-text {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
}

.duck-article-prose {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.duck-article-prose b, 
.duck-article-prose strong {
    color: var(--text-main);
}

/* Подвал статьи */
.duck-card-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    gap: 8px;
    flex-wrap: wrap;
}

.duck-reply-story-btn {
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
}
.duck-reply-story-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000000;
    transform: translateY(-1px);
}

.duck-share-story-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.duck-share-story-btn:hover {
    color: var(--text-main);
    border-color: var(--text-main);
}

/* 3. ВТОРОСТЕПЕННАЯ СЕТКА (+50% К БАЗОВОЙ ВЫСОТЕ) */
.duck-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.duck-sub-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.duck-sub-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Базовая высота увеличена на 50% (было 180px -> стало 270px) */
.duck-sub-thumb {
    position: relative;
    width: 100%;
    height: 270px;
    background: #000;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Раскрытие при наведении */
.duck-sub-card:hover .duck-sub-thumb,
.duck-sub-card.is-expanded-poster .duck-sub-thumb {
    height: 420px;
}

.duck-sub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.duck-sub-card:hover .duck-sub-thumb img {
    transform: scale(1.02);
}

.duck-sub-content {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.duck-sub-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    margin: 0;
    line-height: 1.35;
}

.duck-sub-snippet {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 650px) {
    .duck-hero-cover { 
        height: 360px; 
    }
    .duck-lead-card:hover .duck-hero-cover,
    .duck-lead-card.is-expanded-poster .duck-hero-cover { 
        height: 500px; 
    }
    .duck-card-body { 
        padding: 16px 14px; 
    }
    .duck-secondary-grid { 
        grid-template-columns: 1fr; 
    }
    .duck-sub-thumb { 
        height: 270px; 
    }
    .duck-sub-card:hover .duck-sub-thumb,
    .duck-sub-card.is-expanded-poster .duck-sub-thumb { 
        height: 400px; 
    }
}

/* ⚡ ЕДИНАЯ МОНОХРОМНАЯ СПЛИТ-КАПСУЛА (ШАПКА И КАРТОЧКА) */
/* ⚡ ЕДИНАЯ КАПСУЛА [ЗАЯВКА | БРИФИНГ] */
.vk-split-capsule {
    display: inline-flex !important;
    align-items: center !important;
    background: #f4f4f5 !important;
    border-radius: 10px !important;
    padding: 3px !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    user-select: none !important;
    gap: 2px !important;
    height: 38px !important;
}

/* Левая кнопка: фирменный желтый #ffc107 и мягкий радиус 8px */
.vk-split-capsule .vk-split-cta,
.vk-split-capsule .compact-action-btn {
    height: 30px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
    background: #ffc107 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Статус: в старт-листе / оплачено */
.vk-split-capsule .compact-action-btn.status-passive {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.vk-split-capsule .compact-action-btn.status-passive:hover {
    border-color: var(--text-muted) !important;
}

/* Статус: закрыто / анонс */
.vk-split-capsule .compact-action-btn.status-disabled,
.vk-split-capsule .compact-action-btn.status-finished {
    background: #e4e4e7 !important;
    color: #71717a !important;
    box-shadow: none !important;
}

/* Правая кнопка: Брифинг */
.vk-split-capsule .vk-split-info {
    height: 30px !important;
    padding: 6px 11px !important;
    border-radius: 8px !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    color: #18181b !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.vk-split-capsule .vk-split-info:hover {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.vk-split-capsule .vk-split-info svg {
    color: #71717a !important;
}
.vk-split-capsule .vk-split-info:hover svg {
    color: #000000 !important;
}

/* =======================================================
   🎯 ЧЕТКИЙ ФОКУС ВЫБРАННОЙ ГОНКИ И МИКРО-КНОПКА
   ======================================================= */
.chat-item.race-card-item.active {
    background: var(--bg-surface) !important;
    border-color: var(--text-main) !important;
    border-left: 4px solid var(--primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .chat-item.race-card-item.active {
    border-left: 4px solid var(--primary) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.chat-item.race-card-item .race-header-clickable,
.chat-item.race-card-item.active .race-header-clickable {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
    border-radius: 0 !important;
}

.plate-radio-mini-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-body) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.plate-radio-mini-btn:hover {
    background: var(--primary) !important;
    color: #000000 !important;
    border-color: var(--primary) !important;
    transform: scale(1.08);
}

/* =======================================================
   🏁 ШАПКА ГОНКИ: АДАПТИВ ПК + МОБАЙЛ
   ======================================================= */

/* Базовый контейнер-остров */
#chatHeader.race-header-mode {
    background: var(--bg-surface, #ffffff) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    z-index: 103 !important;
}

/* 🛡️ Маска сверху: чтобы сообщения не просвечивали в зазоре над шапкой при скролле */
#mainChatArea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--bg-body);
    z-index: 102;
    pointer-events: none;
}

/* 1. 🟡 ЖЁЛТЫЙ КРУГ ДАТЫ + ЧЁРНЫЕ ЦИФРЫ */
#activeChatAvatarContainer {
    overflow: visible !important;
}

.race-date-island-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: var(--primary, #ffc107) !important;
    border: 2px solid rgba(0, 0, 0, 0.12) !important;
    color: #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.25) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.race-date-island-circle:hover {
    transform: scale(1.05) !important;
}

.race-date-island-circle .circle-day {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
}

.race-date-island-circle .circle-month {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    opacity: 0.85 !important;
    margin-top: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

/* Состояние пина (добавлено в календарь) */
.race-date-island-circle.is-pinned {
    box-shadow: 0 0 0 2px #000000, 0 4px 12px rgba(255, 193, 7, 0.4) !important;
}

.race-date-island-circle .circle-pin-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    color: var(--primary, #ffc107) !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #ffffff !important;
    z-index: 10 !important;
}

.race-date-island-circle.is-pinned .circle-pin-badge {
    display: flex !important;
}

/* 2. 🪪 ЧЁРНАЯ ТРИО-КАПСУЛА IDUCK */
.iduck-trio-capsule {
    display: inline-flex !important;
    align-items: center !important;
    background: #000000 !important;
    border-radius: 14px !important;
    padding: 2px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
    gap: 2px !important;
    user-select: none !important;
    height: 34px !important;
    flex-shrink: 0 !important;
}

/* Базовые стили кнопок капсулы */
.iduck-trio-capsule button {
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
}

/* ⚡ Кнопка «ЗАЯВКА» на ПК: фиксированная высота 30px, отступы и цвет */
.iduck-trio-capsule .iduck-seg-cta,
.iduck-trio-capsule button.iduck-seg-cta,
#chatHeader.race-header-mode .iduck-trio-capsule button[class*="sync-btn-"] {
    height: 30px !important;
    max-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 12px 5px 5px 12px !important;
    border: none !important;
    background: var(--primary, #ffc107) !important;
    color: #000000 !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    gap: 4px !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* 🛡️ Защита ховера: при наведении мыши остаётся ярко-жёлтой, текст и иконка строго чёрные */
.iduck-trio-capsule .iduck-seg-cta:hover,
.iduck-trio-capsule button.iduck-seg-cta[class*="sync-btn-"]:hover,
#chatHeader.race-header-mode .iduck-trio-capsule button[class*="sync-btn-"]:hover {
    background: #ffd033 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.6) !important;
    transform: none !important;
}

.iduck-trio-capsule .iduck-seg-cta:hover *,
.iduck-trio-capsule .iduck-seg-cta:hover span,
.iduck-trio-capsule .iduck-seg-cta:hover svg,
.iduck-trio-capsule .iduck-seg-cta:hover polygon {
    color: #000000 !important;
    stroke: #000000 !important;
    fill: #000000 !important;
}

/* Статус: в старте / оплачено */
.iduck-trio-capsule .iduck-seg-cta.is-registered,
.iduck-trio-capsule .iduck-seg-cta.status-passive {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}
.iduck-trio-capsule .iduck-seg-cta.is-registered:hover,
.iduck-trio-capsule .iduck-seg-cta.status-passive:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

/* Кнопка Брифинг на ПК */
.iduck-trio-capsule .iduck-seg-briefing {
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    gap: 4px !important;
}
.iduck-trio-capsule .iduck-seg-briefing:hover,
.iduck-trio-capsule .iduck-seg-briefing.open {
    background: rgba(255, 255, 255, 0.18) !important;
    color: var(--primary, #ffc107) !important;
}

/* Счётчик участников на ПК */
.iduck-trio-capsule .iduck-seg-riders {
    height: 30px !important;
    padding: 0 10px 0 8px !important;
    border-radius: 5px 12px 12px 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    gap: 4px !important;
}
.iduck-trio-capsule .riders-count-num {
    color: var(--primary, #ffc107) !important;
    font-weight: 900 !important;
}

/* 3. 💻 ДЕСКТОП (> 768px): В ОДНУ ЛИНИЮ + ПРАВИЛЬНЫЙ ОТСТУП СООБЩЕНИЙ */
@media (min-width: 769px) {
    #chatHeader.race-header-mode {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 18px !important;
        gap: 12px !important;
    }

    #chatHeader.race-header-mode .back-btn {
        display: none !important;
    }

    #chatHeader.race-header-mode .chat-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 2px !important;
        height: auto !important;
        margin: 0 !important;
    }

    #chatHeader.race-header-mode .chat-race-title-text {
        font-family: 'Unbounded', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        color: var(--text-main) !important;
        text-transform: uppercase !important;
        letter-spacing: -0.2px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #chatHeader.race-header-mode .chat-race-subtitle-text {
        font-family: 'Roboto Mono', monospace !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #chatHeader.race-header-mode .chat-header-actions {
        order: unset !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        display: flex !important;
    }

    #chatHeader.race-header-mode .desktop-capsule-wrap {
        width: auto !important;
        display: flex !important;
    }

    #chatHeader.race-header-mode .iduck-trio-capsule {
        width: auto !important;
        height: 34px !important;
    }

    /* 🔥 Корректный отступ первого сообщения на ПК: оно начинается ровно под шапкой */
    #messagesContainer {
        padding-top: 94px !important;
    }
}

/* 4. 📱 СМАРТФОНЫ (<= 768px): КОМПАКТНЫЙ 2-ЯРУСНЫЙ ВИД */
@media (max-width: 768px) {
    #chatHeader.race-header-mode {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 8px 12px 10px 12px !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        gap: 0 !important;
    }

    /* Стрелка строго по высоте кружка даты (42px) */
    #chatHeader.race-header-mode .back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 42px !important;
        min-width: 24px !important;
        padding: 0 !important;
        margin: 0 4px 0 0 !important;
        border: none !important;
        background: transparent !important;
        color: var(--text-main) !important;
        align-self: center !important;
        order: 1 !important;
    }

    #chatHeader.race-header-mode #activeChatAvatarContainer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        height: 42px !important;
        margin-right: 8px !important;
        order: 2 !important;
    }

    /* Сброс жестких 60px: высота блока подстраивается ровно под текст */
    #chatHeader.race-header-mode > div:nth-child(3),
    #chatHeader.race-header-mode .chat-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        flex: 1 1 calc(100% - 85px) !important;
        height: auto !important;
        min-height: auto !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center !important;
        order: 3 !important;
    }

    #chatHeader.race-header-mode .chat-race-title-text,
    #chatHeader.race-header-mode #activeChatName {
        font-family: 'Unbounded', sans-serif !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        color: var(--text-main) !important;
        text-transform: uppercase !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    #chatHeader.race-header-mode .chat-race-subtitle-text,
    #chatHeader.race-header-mode #activeChatMeta {
        font-family: 'Roboto Mono', monospace !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* 🔥 МИНИМАЛЬНЫЙ ОТСТУП КНОПОК: поджаты на 4px к названию */
    #chatHeader.race-header-mode .chat-header-actions {
        order: 4 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 4px !important;
        display: flex !important;
        position: static !important;
    }

    #chatHeader.race-header-mode .chat-header-actions .desktop-capsule-wrap,
    #chatHeader.race-header-mode .chat-header-actions .iduck-trio-capsule {
        width: 100% !important;
        display: flex !important;
        height: 34px !important;
    }

    .iduck-trio-capsule .iduck-seg-cta {
        flex: 1.3 !important;
        height: 30px !important;
        font-size: 8.5px !important;
    }

    .iduck-trio-capsule .iduck-seg-briefing {
        flex: 1.1 !important;
        height: 30px !important;
        font-size: 8.5px !important;
    }
    .iduck-trio-capsule .iduck-seg-briefing .briefing-txt {
        display: inline !important;
    }

    .iduck-trio-capsule .iduck-seg-riders {
        flex: 0.8 !important;
        height: 30px !important;
        font-size: 11.5px !important;
    }

    #activeChatMeta .iduck-trio-capsule {
        display: none !important;
    }

    /* Отступ ленты под высоту двухэтажной мобильной шапки */
    #messagesContainer {
        padding-top: 118px !important;
    }
}

/* 5. 📋 ПОВЕДЕНИЕ ШТОРКИ */
#curtainToggleWrapper,
.curtain-toggle-bar {
    display: none !important;
}

#chatCurtainPanel.chat-curtain {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    border-bottom: 1px solid transparent;
}

#chatCurtainPanel.chat-curtain.open {
    max-height: 520px;
    opacity: 1;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}

/* =======================================================
   🏁 МОДНЫЙ МОНОХРОМНЫЙ BENTO-БРИФИНГ (НА ВЕСЬ ЭКРАН)
   ======================================================= */

/* 1. Каркас контейнера: строго от шапки до низа экрана */
#curtainContainer {
    position: absolute !important;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 102 !important;
    display: none !important;
    pointer-events: none !important;
    background: var(--bg-body, #ffffff) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#curtainContainer.open {
    display: flex !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    #curtainContainer {
        top: 106px !important; /* На мобилке начинается ровно под двухэтажной шапкой */
    }
}

/* 2. Полноэкранный скролл-вьюпорт */
#chatCurtainPanel.chat-curtain {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    background: var(--bg-body, #ffffff) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: none;
    box-sizing: border-box !important;
}

#chatCurtainPanel.chat-curtain.open {
    display: flex !important;
    flex-direction: column !important;
    animation: briefingBentoFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* 3. Центрированный дашборд до 1000px на ПК */
.briefing-bento-viewport {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 20px 80px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 600px) {
    .briefing-bento-viewport {
        padding: 12px 14px 70px 14px;
        gap: 12px;
    }
}

/* 4. Верхняя служебная панель */
.briefing-bento-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.briefing-bento-title-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.briefing-bento-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    color: var(--primary, #ffc107);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.briefing-bento-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.briefing-bento-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.briefing-btn-manage {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: 0.15s;
}
.briefing-btn-manage:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.briefing-btn-close {
    background: var(--text-main);
    color: var(--bg-body);
    border: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s;
}
.briefing-btn-close:hover {
    opacity: 0.88;
}

/* 10. Блок организатора и судей */
.briefing-officials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

@media (max-width: 600px) {
    .briefing-officials-grid {
        grid-template-columns: 1fr;
    }
}

.briefing-official-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.briefing-official-icon {
    font-size: 20px;
    line-height: 1;
}
.briefing-official-lbl {
    font-family: 'Unbounded', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.briefing-official-val {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
    margin-top: 1px;
}

/* 11. Подвал возврата */
.briefing-bento-footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.briefing-footer-back-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 12px 24px;
    border-radius: 50px;
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.briefing-footer-back-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--bg-surface-hover);
}

/* =======================================================
   🏁 ПОЛНОЭКРАННЫЙ BENTO-БРИФИНГ (100% ВЕСЬ ЭКРАН)
   ======================================================= */

/* Контейнер раскрывается на весь экран поверх всего интерфейса */
#curtainContainer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--bg-body, #ffffff) !important;
    z-index: 10000050 !important;
    display: none;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] #curtainContainer {
    background: var(--bg-body, #18181b) !important;
}

#curtainContainer.open {
    display: flex !important;
    animation: briefingFullscreenFade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes briefingFullscreenFade {
    from { opacity: 0; transform: scale(0.99); }
    to { opacity: 1; transform: scale(1); }
}

/* Центрированный контентный блок */
.briefing-bento-viewport {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 60px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 768px) {
    .briefing-bento-viewport {
        padding: max(16px, env(safe-area-inset-top)) 14px max(30px, env(safe-area-inset-bottom)) 14px;
        gap: 12px;
    }
}

/* Шапка дашборда */
.briefing-bento-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.briefing-bento-title-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.briefing-bento-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    color: var(--primary, #ffc107);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.briefing-bento-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.briefing-bento-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.briefing-btn-manage {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 7px 12px;
    border-radius: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: 0.15s;
}
.briefing-btn-manage:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ❌ ЧИСТЫЙ КРЕСТИК ЗАКРЫТИЯ */
.briefing-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.briefing-close-btn:hover {
    background: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
    transform: scale(1.05);
}
.briefing-close-btn:active {
    transform: scale(0.95);
}

/* Скрытие старых язычков и козырьков */
#curtainToggleWrapper,
.curtain-toggle-bar {
    display: none !important;
}

/* =======================================================
   🏆 МОНОХРОМНЫЙ СВОДНЫЙ ПРОТОКОЛ КУБКА (VILKA STYLE)
   ======================================================= */
.cup-standings-box {
    width: 100% !important;
    max-width: 780px !important;
    max-height: 86vh !important;
    height: auto !important;
    background: var(--bg-surface, #ffffff) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .cup-standings-box {
    background: #1e1f24 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Шапка протокола */
.cup-modal-header {
    padding: 16px 20px 14px 20px;
    background: var(--bg-surface-hover);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.cup-header-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cup-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    color: var(--primary, #ffc107);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cup-header-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cup-header-meta {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.cup-header-meta b {
    color: var(--text-main);
}

.cup-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Строка поиска */
.cup-search-bar {
    padding: 10px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cup-search-bar input {
    flex: 1;
    min-width: 0;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s ease;
}
.cup-search-bar input:focus {
    border-color: var(--primary);
}

/* Таблица и скролл-зона */
.cup-table-viewport {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.cup-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
}

.cup-standings-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-body);
    color: var(--text-muted);
    padding: 10px 14px;
    font-family: 'Unbounded', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    z-index: 2;
}

.cup-standing-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
    cursor: pointer;
}
.cup-standing-row:hover {
    background: var(--bg-surface-hover);
}
.cup-standing-row.is-me {
    background: rgba(255, 193, 7, 0.08);
}

.cup-standing-row td {
    padding: 11px 14px;
    vertical-align: middle;
}

/* Монохромные ранги */
.cup-mono-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 26px;
    height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-main);
    box-sizing: border-box;
}
.cup-mono-rank.rank-1 {
    background: var(--text-main);
    color: var(--bg-body);
    border-color: var(--text-main);
}
.cup-mono-rank.rank-2,
.cup-mono-rank.rank-3 {
    background: var(--bg-surface-hover);
    border-color: var(--border);
}

/* Ячейки */
.cup-rider-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cup-rider-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
}
.cup-me-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 900;
    background: var(--primary);
    color: #000;
    padding: 1px 4px;
    border-radius: 4px;
}
.cup-cluster-chip {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
}

.cup-team-cell {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.cup-stages-pill {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-body);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.cup-points-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 900;
    color: var(--primary);
}
.cup-points-unit {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
}

/* Мобильная адаптация (< 640px) */
@media (max-width: 640px) {
    .cup-standings-box {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .cup-modal-header {
        padding: 12px 14px;
    }
    .cup-header-title {
        font-size: 13.5px;
    }
    .cup-search-bar {
        padding: 8px 12px;
    }
    .cup-standing-row td {
        padding: 9px 8px;
    }
    .cup-team-cell {
        font-size: 10px;
        max-width: 95px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .cup-rider-name {
        font-size: 11.5px;
    }
}

#curtainContainer {
display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 17, 23, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 10000050 !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

#curtainContainer.open {
    display: flex !important;
}

/* 🖥 ДЕСКТОП: Просторное модальное окно (1200px, с полями и тенями) */
.briefing-modal-box {
    position: relative !important;
    z-index: 10 !important;
    background: var(--bg-surface, #ffffff) !important;
    width: 95vw !important;
    max-width: 1200px !important;
    height: 94vh !important;
    max-height: 94vh !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .briefing-modal-box {
    background: #1e1f24 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Внутренний скролл-контейнер */
.briefing-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 40px 24px;
    background: var(--bg-surface, #ffffff);
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

[data-theme="dark"] .briefing-modal-body {
    background: #1e1f24;
}

/* 📱 СМАРТФОН (< 768px): Полноэкранный вид без отступов и рамок (как #liveBoardModal) */
@media (max-width: 768px) {
    #curtainContainer {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .briefing-modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .briefing-modal-body {
        padding: 14px 14px 30px 14px;
    }
}

/* Сетка Bento-блоков внутри окна */
.briefing-bento-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/* 1. Телеметрия (4 окна в ряд) */
.briefing-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}

@media (max-width: 650px) {
    .briefing-telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.briefing-tile-mini {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.briefing-tile-mini.clickable {
    cursor: pointer;
}
.briefing-tile-mini.clickable:hover {
    border-color: var(--primary);
}

.briefing-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
}
.briefing-mini-lbl {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.briefing-mini-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.15;
}
.briefing-mini-val.accent-val {
    color: var(--primary, #ffc107);
}
.briefing-mini-sub {
    font-family: 'Roboto Mono', monospace;
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 700;
}
.briefing-mini-sub.action-sub {
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
}

/* 2. Hero-блок карты */
.briefing-hero-map-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.briefing-hero-img-wrap {
    position: relative;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
    cursor: pointer;
}
.briefing-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.briefing-hero-glass-bar,
.briefing-hero-standalone-bar {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
}

.briefing-hero-bar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.briefing-hero-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.briefing-hero-headline {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
}

.briefing-interactive-map-btn {
    background: #000000;
    color: var(--primary, #ffc107);
    border: 1px solid var(--primary, #ffc107);
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, background 0.15s;
    white-space: nowrap;
}
.briefing-interactive-map-btn:hover {
    background: var(--primary, #ffc107);
    color: #000000;
    transform: translateY(-1px);
}

/* 3. Карточки действий и документов */
.briefing-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    width: 100%;
}

.briefing-bento-link-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    user-select: none;
}
.briefing-bento-link-card:hover {
    border-color: var(--text-main);
    background: var(--bg-surface-hover);
    transform: translateY(-2px);
}

.briefing-link-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.briefing-bento-link-card:hover .briefing-link-icon-box {
    color: var(--primary, #ffc107);
    border-color: var(--primary, #ffc107);
}

.briefing-link-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}
.briefing-link-tag {
    font-family: 'Unbounded', sans-serif;
    font-size: 7.5px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.briefing-link-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px;
    font-weight: 900;
    color: var(--text-main);
    text-transform: uppercase;
    line-height: 1.25;
}
.briefing-link-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.briefing-link-arrow {
    color: var(--text-muted);
    transition: transform 0.2s, color 0.2s;
    flex-shrink: 0;
}
.briefing-bento-link-card:hover .briefing-link-arrow {
    color: var(--text-main);
    transform: translate(2px, -2px);
}

/* 4. Текст программы и расписания */
.briefing-text-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.briefing-text-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.briefing-text-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.briefing-text-body {
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
}
.briefing-text-body b, 
.briefing-text-body strong {
    color: var(--text-main);
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
}

/* Старые козырьки гарантированно глушим */
#curtainToggleWrapper,
.curtain-toggle-bar {
    display: none !important;
}

/* Просмотрщик фото и интерактивная карта ВСЕГДА поверх брифинга */
#globalImageViewer {
    z-index: 2147483647 !important;
}

#mapEmbedModal {
    z-index: 2147483640 !important;
}

/* Кнопка «Интерактивная карта» в углу схемы маршрута */
.briefing-hero-img-wrap {
    position: relative;
    width: 100%;
    max-height: 380px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 18px;
}

.briefing-map-float-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(18, 18, 24, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 193, 7, 0.45);
    color: var(--primary, #ffc107);
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.briefing-map-float-btn:hover {
    background: var(--primary, #ffc107);
    color: #000000;
    border-color: var(--primary, #ffc107);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.4);
}

/* Активная кликабельная плитка «ДИСТАНЦИЯ / КАРТА ➔» */
.briefing-tile-mini.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.briefing-tile-mini.clickable:hover {
    border-color: var(--primary, #ffc107);
    background: var(--bg-surface-hover);
    transform: translateY(-2px);
}

/* =======================================================
   🖼️ ЧИСТАЯ КАРТОЧКА СХЕМЫ БЕЗ КНОПОК ПОВЕРХ НЕЁ
   ======================================================= */
.briefing-hero-map-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.briefing-hero-img-wrap {
    position: relative;
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-body);
}

.briefing-hero-img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.briefing-hero-img-wrap:hover .briefing-hero-img {
    transform: scale(1.02);
}

/* Удаляем стили плавающей кнопки, которая перекрывала картинку */
.briefing-map-float-btn,
.briefing-hero-glass-bar,
.briefing-hero-standalone-bar {
    display: none !important;
}

/* =======================================================
   🔝 ОКНО РЕДАКТИРОВАНИЯ БРИФИНГА ВСЕГДА ПОВЕРХ ВСЕГО
   ======================================================= */
#chatCurtainEditModal {
    z-index: 2147483646 !important;
}

/* =======================================================
   🏁 ШАПКА ТАБЛО ПРОТОКОЛА: 2 СТРОКИ БЕЗ ЧИПСОВ
   ======================================================= */
.live-top-header-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Двухстрочная колонка слева */
.live-top-title-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 !important;
    gap: 2px !important;
}

/* Название гонки: крупное, жирное, на всю ширину */
.live-top-race-name {
    font-family: 'Unbounded', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: var(--text-main) !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
    white-space: normal !important;      /* 👈 Разрешаем перенос строк */
    word-break: break-word !important;  /* 👈 Переносим длинные слова */
    overflow: visible !important;
    text-overflow: clip !important;      /* 👈 Убираем троеточие */
}

/* Вторая строка: обычный текст через точки без чипсов */
.live-top-race-sub {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Адаптив для смартфонов (iPhone SE / 375px) */
@media (max-width: 600px) {
    .live-top-race-name {
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }
    .live-top-race-sub {
        font-size: 9px !important;
    }
    /* Скрываем текстовый лейбл кнопки СКАЧАТЬ на мобилке, оставляя аккуратную иконку */
    .live-top-csv-btn .live-csv-label {
        display: none !important;
    }
}

/* =======================================================
   🏁 АДАПТИВНЫЙ СТАРТ-ЛИСТ (ПК: 1 СТРОКА / МОБАЙЛ: 2 СТРОКИ)
   ======================================================= */
.compact-start-row {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 🖥 ДЕСКТОП (> 600px): строго монолитная строка высотой 46px */
@media (min-width: 601px) {
    .compact-start-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 7px 14px !important;
        gap: 12px !important;
        min-height: 46px !important;
    }
    .live-start-top-bar {
        display: contents !important; /* Разворачивает блоки в один ряд с именем */
    }
    .live-start-meta-group {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }
    .live-start-info-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
        flex: 1 !important;
        order: 2 !important;
    }
    .live-start-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }
}

/* 📱 СМАРТФОНЫ (<= 600px): 2 комфортные строки без сжатия имени */
@media (max-width: 600px) {
    .compact-start-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 8px 10px !important;
    }
    /* Строка 1: [ 1 ] [ 12:01:00 ] <-----------------> [W НЕ ОПЛ] [ОТОЗВАТЬ] [▼] */
    .live-start-top-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .live-start-meta-group {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .live-start-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    /* Строка 2: Имя и клуб получают 100% ширины экрана */
    .live-start-info-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        width: 100% !important;
    }
    .live-start-info-col .live-rider-name {
        font-size: 13px !important;
        white-space: normal !important;
        word-break: normal !important;
        line-height: 1.25 !important;
    }
    .live-start-info-col .live-compact-sub {
        font-size: 10.5px !important;
        white-space: normal !important;
    }
}

/* =======================================================
   🏁 АДАПТИВНАЯ КАРТОЧКА СТАРТ-ЛИСТА
   ======================================================= */

/* 📱 СМАРТФОНЫ (<= 650px): 2 комфортные строки */
@media (max-width: 650px) {
    .live-card-compact-row.stack-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    /* Ряд 1: Номера слева, кнопки справа */
    .live-card-compact-row.stack-layout .live-card-top-line {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .live-card-compact-row.stack-layout .live-meta-left {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .live-card-compact-row.stack-layout .live-meta-right {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* Ряд 2: Имя занимает 100% ширины карточки */
    .live-card-compact-row.stack-layout .live-card-middle-line {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        width: 100% !important;
    }

    .live-card-compact-row.stack-layout .live-rider-name {
        font-size: 13px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: normal !important;
        width: 100% !important;
    }

    .live-card-compact-row.stack-layout .live-compact-sub {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        width: 100% !important;
    }
}

/* 🖥 ДЕСКТОП (> 650px): вытягиваем в 1 аккуратную строку высотой 44px */
@media (min-width: 651px) {
    .live-card-compact-row.stack-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 14px !important;
        gap: 12px !important;
        min-height: 44px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .live-card-compact-row.stack-layout .live-card-top-line {
        display: contents !important;
    }

    .live-card-compact-row.stack-layout .live-meta-left {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .live-card-compact-row.stack-layout .live-card-middle-line {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .live-card-compact-row.stack-layout .live-rider-name {
        font-size: 12.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .live-card-compact-row.stack-layout .live-meta-right {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
}

/* ❌ Кнопка «ОТОЗВАТЬ» */
.live-revoke-btn {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}
.live-revoke-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}
.live-revoke-btn:active {
    transform: scale(0.95) !important;
}

/* 🌟 НЕОНОВОЕ ЗОЛОТОЕ СВЕЧЕНИЕ ДОБАВЛЕННОГО СПОРТСМЕНА */
@keyframes cardAddedGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.85);
        border-color: #ffc107 !important;
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 25px 6px rgba(255, 193, 7, 0.65);
        border-color: #ffc107 !important;
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
        border-color: var(--border) !important;
        transform: scale(1);
    }
}

.live-rider-card.just-added-highlight {
    border-color: #ffc107 !important;
    animation: cardAddedGlow 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    position: relative;
    z-index: 20 !important;
}

/* Подсветка инпута BIB, куда встал фокус */
.live-rider-card.just-added-highlight .live-mono-input.bib {
    border-color: #ffc107 !important;
    background: rgba(255, 193, 7, 0.18) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5) !important;
}

/* ==========================================================================
   DRAFT TREASURY HUB: СУПЕРАДМИН МОНОХРОМ
   ========================================================================== */
.treasury-modal-box {
  max-width: 580px !important;
  max-height: 90vh !important;
  height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
}

.treasury-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  flex-shrink: 0;
}

.treasury-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--text-main);
  color: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.treasury-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: 0.5px;
}

.treasury-subtitle {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: 'Manrope', sans-serif;
}

.treasury-btn-ghost {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.treasury-btn-ghost:hover {
  background: var(--text-main);
  color: var(--bg-surface);
}

.treasury-nav {
  display: flex;
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
  flex-shrink: 0;
}

.treasury-tab-btn {
  flex: 1;
  height: 32px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Unbounded', sans-serif;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.treasury-tab-btn:hover { color: var(--text-main); }
.treasury-tab-btn.active {
  background: var(--text-main) !important;
  color: #ffffff !important;
}

.treasury-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex-shrink: 0;
}

.treasury-kpi-card {
  background: var(--bg-body);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.treasury-kpi-label {
  font-family: 'Unbounded', sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.treasury-kpi-val {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-main);
}

.treasury-kpi-sub {
  font-size: 8.5px;
  color: var(--text-muted);
  font-family: 'Manrope', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.treasury-tab-content {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.treasury-list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.treasury-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.15s ease;
}
.treasury-card:hover { border-color: var(--text-main); }
.treasury-card.is-debt {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.35);
}

.treasury-card-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.treasury-card-meta {
  font-size: 9.5px;
  font-family: 'Roboto Mono', monospace;
  color: var(--text-muted);
}

.treasury-card-balance {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  text-align: right;
}

.treasury-card-subbalance {
  font-size: 8.5px;
  font-family: 'Roboto Mono', monospace;
  color: var(--text-muted);
  text-align: right;
}

.treasury-badge-action {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--bg-body);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: 'Unbounded', sans-serif;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.treasury-badge-action:hover {
  background: var(--text-main);
  color: var(--bg-surface);
  border-color: var(--text-main);
}

.treasury-notice-box {
  background: var(--bg-body);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.search-input-wrap svg {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-input-wrap .search-input {
  width: 100%;
  padding-left: 36px !important;
  height: 38px;
  box-sizing: border-box;
}

#mainChatArea {
    position: relative !important;
}

.cup-overlay-board {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: var(--bg-surface, #ffffff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInOverlay 0.2s ease-out;
}

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

.cup-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid var(--primary, #ffc107);
    background: var(--bg-surface, #ffffff);
    flex-shrink: 0;
}

.cup-overlay-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-body, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cup-overlay-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 13.5px;
    font-weight: 900;
    margin: 0;
    color: var(--text-main, #111827);
    text-transform: uppercase;
    letter-spacing: -0.2px;
}

.cup-overlay-meta {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #71717a);
    margin-top: 2px;
}

.cup-overlay-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border, #e4e4e7);
    background: var(--bg-body, #f4f4f5);
    color: var(--text-muted, #71717a);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

.cup-overlay-close-btn:hover {
    background: var(--text-main, #111827);
    color: var(--bg-surface, #ffffff);
    border-color: var(--text-main, #111827);
}

.cup-overlay-table-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px 40px 24px;
}

.cup-overlay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cup-overlay-table th {
    position: sticky;
    top: 0;
    background: var(--bg-surface, #ffffff);
    color: var(--text-muted, #71717a);
    font-family: 'Unbounded', sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px 10px;
    border-bottom: 1.5px solid var(--border, #e4e4e7);
    letter-spacing: 0.5px;
    z-index: 2;
}

.cup-overlay-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border, #f4f4f5);
    color: var(--text-main, #111827);
}

.cup-overlay-table tr:hover {
    background: var(--bg-surface-hover, rgba(0,0,0,0.02));
}

.cup-rank-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    min-width: 26px;
    height: 22px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--border, #e4e4e7);
    background: var(--bg-body, #f4f4f5);
    color: var(--text-muted, #71717a);
}

.cup-rank-box.rank-1 {
    background: var(--primary, #ffc107);
    border-color: var(--primary, #ffc107);
    color: #000000;
    font-weight: 900;
}

.cup-rank-box.rank-2 {
    background: transparent;
    border-color: var(--text-main, #111827);
    color: var(--text-main, #111827);
}

.cup-rank-box.rank-3 {
    background: transparent;
    border-color: var(--border, #e4e4e7);
    color: var(--text-main, #111827);
}

.cup-overlay-badge {
    background: var(--bg-body, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    font-family: 'Roboto Mono', monospace;
    color: var(--text-main, #111827);
}

/* =======================================================
   МОНОХРОМНЫЙ СЕЛЕКТОР РЕЖИМОВ ШТУРМАНА (БАЗА / ПРО)
   ======================================================= */
.shturman-model-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 6px 16px;
    background: transparent;
    user-select: none;
    animation: fadeIn 0.15s ease-out;
}

.shturman-model-selector {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface, #151619);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.model-pill-btn {
    border: none;
    background: transparent;
    color: var(--text-muted, #71717a);
    font-family: 'Unbounded', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.model-pill-btn:hover {
    color: var(--text-main, #ffffff);
}

/* Активное состояние — контрастный белый монохром */
.model-pill-btn.active {
    background: var(--text-main, #ffffff);
    color: var(--bg-body, #000000) !important;
}

.model-pill-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
}

/* Бейдж в неактивном состоянии */
.model-pill-btn:not(.active) .model-pill-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #71717a);
}

/* Бейдж в активном состоянии */
.model-pill-btn.active .model-pill-badge {
    background: rgba(0, 0, 0, 0.12);
    color: #000000;
}

/* Баланс Ватт справа */
.shturman-watts-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: var(--bg-surface, #151619);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.shturman-watts-widget:hover {
    border-color: var(--text-main, #ffffff);
}

.shturman-watts-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted, #71717a);
}

.shturman-watts-val {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main, #ffffff);
}

@media (max-width: 600px) {
    .live-edit-roster-btn {
        width: 24px !important;
        padding: 0 !important;
    }
    .live-edit-roster-btn .live-btn-txt-full {
        display: none !important;
    }
}

/* ==========================================================================
   🎨 SOTKA BOARD UNIFIED THEME FOR VILKA MESSENGER
   ========================================================================== */
:root {
    --bg-body: #ffffff;
    --bg-surface: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-surface-hover: #f4f4f5;
    --bg-subtle: #f4f4f5;
    --text-main: #111111;
    --text-muted: #71717a;
    --primary: #ffc107;
    --border: #e4e4e7;
    --border-light: #efefef;
}

[data-theme="dark"] {
    --bg-body: #09090b;
    --bg-surface: #121214;
    --bg-sidebar: #121214;
    --bg-surface-hover: #1c1c1f;
    --bg-subtle: #18181b;
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --primary: #ffc107;
    --border: #27272a;
    --border-light: #1f1f23;
}

/* Прячем старые плавающие острова и нижнюю навигацию */
#smartIslandNav,
.smart-island-wrap,
.bottom-nav,
.bottom-nav-container,
.subnav-morph-pod,
#sidebarHeader,
#monthCalendarViewContainer {
    display: none !important;
}

/* Полноэкранный лейаут: Рейл (72px) + Сайдбар чатов (360px) + Область чата (1fr) */
.messenger-layout {
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: none !important;
    background: var(--bg-surface) !important;
    overflow: hidden !important;
}

/* 1. Левый рейл в стиле Борда */
.vk-board-rail {
    width: 72px;
    height: 100%;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    flex-shrink: 0;
    z-index: 30;
    box-sizing: border-box;
}

.vk-rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vk-rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}

.vk-rail-btn:hover {
    background: var(--bg-surface-hover);
}

.vk-rail-btn.active {
    background: var(--text-main);
    color: var(--bg-surface);
    border-radius: 14px;
}

/* Верхний аватар пользователя остаётся круглым, как на Борде */
.vk-rail-btn.brand-duck {
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.3);
}

.vk-rail-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary, #ffc107);
    color: #000000;
    font-family: 'Roboto Mono', monospace;
    font-size: 9.5px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* 2. Сайдбар чатов в стиле Борда */
.sidebar {
    width: 360px !important;
    border-right: 1px solid var(--border-light) !important;
    background: var(--bg-sidebar) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

.vk-sidebar-top {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-surface);
}

.vk-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vk-sidebar-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

.vk-search-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.vk-search-pill input {
    width: 100%;
    height: 40px;
    border-radius: 999px;
    background: var(--bg-subtle);
    border: 1.5px solid transparent;
    padding: 0 36px 0 38px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
    transition: 0.15s ease;
    box-sizing: border-box;
}

.vk-search-pill input:focus {
    background: var(--bg-surface);
    border-color: var(--text-main);
}

.vk-filter-pills {
    display: flex;
    gap: 6px;
}

.vk-filter-pill {
    flex: 1;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-family: 'Unbounded', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.15s ease;
}

.vk-filter-pill:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}

.vk-filter-pill.active {
    background: var(--text-main);
    color: var(--bg-surface);
    border-color: var(--text-main);
}

/* 3. Компактные карточки чатов в списке (#chatList) */
#tab-chats {
    padding-bottom: 0 !important;
}

#chatList {
    padding: 8px 10px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vk-chat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid transparent;
    position: relative;
}

.vk-chat-row:hover {
    background: var(--bg-surface-hover);
}

.vk-chat-row.active {
    background: var(--bg-surface-hover);
    border-color: var(--border);
}

.vk-chat-row.is-shturman {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.14), rgba(255, 193, 7, 0.04));
    border: 1px solid rgba(255, 193, 7, 0.35);
    margin-bottom: 4px;
}

.vk-chat-row.is-shturman.active {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.15);
}

.vk-chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Unbounded', sans-serif;
    overflow: hidden;
}

.vk-chat-avatar.is-direct {
    border-radius: 50%;
}

.vk-chat-avatar.is-shturman {
    background: #111111;
    color: var(--primary);
    border-color: var(--primary);
}

.vk-chat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vk-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.vk-chat-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vk-chat-time {
    font-family: 'Roboto Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.vk-chat-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vk-chat-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vk-chat-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #000;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Адаптив для смартфонов: рейл превращается в нижний бар, как на Борде */
@media (max-width: 768px) {
    .vk-board-rail {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding: 0 12px env(safe-area-inset-bottom, 0px);
        flex-direction: row;
        justify-content: space-around;
        border-right: none;
        border-top: 1px solid var(--border-light);
        z-index: 9990;
    }
    .vk-rail-group {
        flex-direction: row;
        justify-content: space-around;
        width: auto;
        gap: 12px;
    }
    .sidebar {
        width: 100% !important;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    body.chat-open-mobile .vk-board-rail {
        display: none !important;
    }
}