/* Hi! messenger — глобальный UI kit v2 (2026) Единые поверхности, глубина, акцент из темы; без «моковых» переопределений палитры. */ :root, body { --rd-font: "Inter", "Segoe UI", Roboto, Arial, sans-serif; --rd-radius-sm: 10px; --rd-radius-md: 12px; --rd-radius-lg: 16px; --rd-radius-xl: 18px; --rd-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); --rd-shadow-soft: 0 1px 4px rgba(15, 23, 42, 0.04); --rd-elev-surface: none; --rd-elev-pop: 0 8px 28px rgba(15, 23, 42, 0.1); /* Светлая тема: спокойные нейтрали, мягкий акцент */ --rd-page-bg: #eef0f4; --rd-bg-soft: #e8eaef; --rd-card: #ffffff; --rd-card-muted: #f4f5f8; --rd-border: #dfe3eb; --rd-text: #1a1d26; --rd-muted: #6b7280; --rd-accent: #2563eb; --rd-accent-strong: #1d4ed8; --rd-danger: #c74848; --rd-success: #2f9e74; --rd-nav: #f8f9fb; --rd-nav-active: #eceef2; --rd-input-bg: #f8f9fb; --rd-input-border: #d8dce4; --rd-bubble-in: #eef1f6; --rd-bubble-out: #2563eb; --rd-bubble-in-text: #1a1d26; --rd-bubble-out-text: #ffffff; --rd-btn-accent-bg: var(--rd-accent); --rd-btn-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 1px 1.5px rgba(255, 255, 255, 0.06); --rd-btn-bevel-accent: inset 0 1px 0 rgba(255, 255, 255, 0.22); --rd-tabbar-shadow: var(--rd-shadow-soft), var(--rd-btn-bevel); /* Профиль: единый размер баннера и аватара на всех экранах */ --hi-banner-height: clamp(180px, 42vw, 240px); --hi-banner-radius: 24px; --hi-profile-avatar-size: clamp(96px, 22vw, 120px); --hi-profile-avatar-overlap: 0.52; } body[data-theme="dark"], body[data-theme="midnight"], body[data-theme="graphite"] { --rd-page-bg: #0e1729; --rd-bg-soft: #121a2a; --rd-card: #151d2e; --rd-card-muted: #1a2436; --rd-border: #2a3548; --rd-text: #e8ecf1; --rd-muted: #8b95a8; --rd-accent: #5e88ff; --rd-accent-strong: #4d72d8; --rd-nav: #121a28; --rd-nav-active: #1e2838; --rd-input-bg: #1a2434; --rd-input-border: #2f3d52; --rd-bubble-in: #1c2636; --rd-bubble-out: #5e88ff; --rd-bubble-in-text: #e8ecf1; --rd-bubble-out-text: #ffffff; --rd-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); --rd-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.16); --rd-elev-surface: none; --rd-elev-pop: 0 12px 36px rgba(0, 0, 0, 0.32); --ui-icon-filter: brightness(0) invert(1); } body[data-theme="light"] { --ui-icon-filter: brightness(0) saturate(100%); } html { color-scheme: light dark; } body { margin: 0; background: var(--rd-page-bg) !important; color: var(--rd-text) !important; font-family: var(--rd-font) !important; -webkit-font-smoothing: antialiased; line-height: 1.45; } h1, h2, h3, h4 { margin-top: 0; color: var(--rd-text) !important; letter-spacing: -0.02em; } a { color: var(--rd-accent); text-decoration: none; } a:hover { color: var(--rd-accent-strong); } ::selection { background: color-mix(in srgb, var(--rd-accent) 26%, transparent); color: var(--rd-text); } /* Surfaces */ .sidebar, .chat, .desktop-panel, .settings-card, .auth-card, .profile-card, .tg-section-card, .modal-content, .market-item, .market-card, .market-hero, .gift-item, .gift-card, .gift-shop-card, .card, .side, .content, .admin-card, .call-card, .chat-welcome, .profile-stage, .tg-hero-card { background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; border-radius: var(--rd-radius-lg) !important; box-shadow: none !important; backdrop-filter: none !important; } .modal-content { box-shadow: var(--rd-elev-pop) !important; } .sidebar-header, .chat-header, .quick-menu, .search-results-drop, .search-container, .search-results, .stories-container { background: var(--rd-card) !important; border-color: var(--rd-border) !important; color: var(--rd-text) !important; box-shadow: none !important; } .app { gap: 12px !important; padding: 12px !important; } /* Text hierarchy */ .conv-title, .logo-small, .tg-nav-title, .tg-name-row, .profile-title-row { color: var(--rd-text) !important; font-weight: 700; } .conv-type, .conv-preview, .conv-time, .tg-meta, .tg-empty, .profile-stat-label, .profile-section-title, .auth-subtitle, .message-time, .message-sender { color: var(--rd-muted) !important; } /* Inputs */ input, textarea, select, #searchInput, #messageInput, .create-form-field input, .create-form-field textarea, .create-form-field select, .modal-content input, .modal-content textarea, .modal-content select, .tg-field input, .tg-field textarea, .field input, .field textarea, .field select { background: var(--rd-input-bg) !important; color: var(--rd-text) !important; border: 1px solid var(--rd-input-border) !important; border-radius: var(--rd-radius-md) !important; box-shadow: none !important; } input::placeholder, textarea::placeholder, #searchInput::placeholder, #messageInput::placeholder { color: var(--rd-muted) !important; } .field-icon { background: var(--rd-accent) !important; color: #fff !important; border-radius: 999px !important; } /* Buttons */ button:not(.upp-sec-handle):not(.upp-media-fab):not(.upp-banner-edit-fab):not(#meEditProfileBtn):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.nav-hub-btn):not(.conv-profile-hero__banner-btn):not(.conv-profile-hero__avatar-fab):not(.create-profile-hero__banner-btn):not(.create-profile-hero__avatar-fab):not(.story-ed-tool):not(.story-ed-swatch):not(.story-ed-rail__toggle):not(.story-ed-rail__chev):not(.story-ed-icon-btn):not(.story-ed-skip):not(.story-ed-flip):not(.story-ed-shutter):not(.story-ed-publish):not(.story-ed-back-capture):not(.story-ed-btn):not(.story-viewer-v2__tap):not(.story-viewer-v2__close):not(.gift-info-modal__menu-btn):not(.feed-menu__item):not(.upp-dropdown-item):not(.profile-menu-item):not(.gift-info-modal__menu-item):not(.report-chip):not(.report-linkish):not(.report-modal__back):not(.report-modal__close):not(.report-thumb-remove):not(.orbs-wallet-action__btn):not(.hi-pwa-install__close):not(.hi-ios-install__close):not(.icon-btn), .btn, .prm-linkbtn, .prm-primary, .upp-action:not(#meEditProfileBtn), .theme, .side-btn, .tg-quick-btn, .tg-pill, .tg-list-item, .profile-tag-button, .call-btn, .attach-btn, .emoji-btn, .create-type-btn, .create-user-item, .create-toggle { border-radius: 999px !important; border: 1px solid var(--rd-border) !important; box-shadow: var(--rd-btn-bevel) !important; transition: 0.2s ease; } button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.create-member-row):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.chat-channel-tab):not(.chat-media-viewer__nav):not(.chat-media-viewer__close):not(.chat-media-viewer__btn):not(.chat-back-mobile):not(.story-ed-tool):not(.story-ed-swatch):not(.story-ed-rail__toggle):not(.story-ed-rail__chev):not(.story-ed-icon-btn):not(.story-ed-skip):not(.story-ed-flip):not(.story-ed-shutter):not(.story-ed-publish):not(.story-ed-back-capture):not(.story-ed-btn):not(.story-viewer-v2__tap):not(.story-viewer-v2__close):not(.gift-info-modal__menu-btn):not(.feed-menu__item):not(.upp-dropdown-item):not(.profile-menu-item):not(.gift-info-modal__menu-item):not(.report-chip):not(.report-linkish):not(.report-modal__back):not(.report-modal__close):not(.report-thumb-remove):not(.orbs-wallet-action__btn), #sendBtn, .call-controls .accept, .auth-card button { background: var(--rd-accent) !important; color: #fff !important; border-color: transparent !important; } button.secondary, .secondary, .tg-quick-btn, .tg-pill, .tg-list-item, .call-btn, .attach-btn, .emoji-btn, .create-type-btn, .create-user-item, .create-toggle, #createMenuBtn { background: var(--rd-card-muted) !important; color: var(--rd-text) !important; } button:hover, .btn:hover { transform: none; filter: brightness(1.04); } /* Lists and states (результаты поиска с data-type — отдельно, капсула внизу файла) */ .conv-item, .dropdown-item { border-radius: var(--rd-radius-md) !important; border: 1px solid transparent !important; } .conv-item:hover, .conv-item.active, .dropdown-item:hover, .quick-menu .item:hover, .quick-menu .item.active, .market-tab.active, .tab.active, .side-btn.active, .theme-option.active { background: var(--rd-nav-active) !important; border-color: var(--rd-border) !important; } /* Chat bubbles */ .messages-container { background: var(--rd-bg-soft) !important; } .message-bubble { background: var(--rd-bubble-in) !important; color: var(--rd-bubble-in-text) !important; border: 1px solid color-mix(in srgb, var(--rd-border) 74%, transparent) !important; border-radius: 16px !important; } .message-own .message-bubble { background: var(--rd-bubble-out) !important; color: var(--rd-bubble-out-text) !important; border-color: transparent !important; } .message.message--circle .message-bubble, .message.message--circle.message-own .message-bubble, .message-bubble--circle { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px 2px 6px !important; border-radius: 0 !important; max-width: none !important; } .message-circle-caption { color: var(--rd-text) !important; } /* Decorative cleanup */ .market-hero, .gift-shop-card, .story-avatar.add-story, .voice-play, .profile-stage, .tg-hero-card, .auth-page, body.auth-page { background-image: none !important; } .create-error-box, .profile-error, .denied { background: color-mix(in srgb, var(--rd-danger) 18%, transparent) !important; border-color: color-mix(in srgb, var(--rd-danger) 48%, var(--rd-border)) !important; color: var(--rd-text) !important; } .icon-btn { background: var(--rd-card-muted) !important; border-color: var(--rd-border) !important; color: var(--rd-text) !important; } .floating-input { background: transparent !important; border-top: 1px solid var(--rd-border) !important; box-shadow: none !important; } /* Mobile bottom nav */ @media (max-width: 768px) { .app { padding: 0 !important; } .sidebar, .chat { border-radius: 0 !important; } nav.mobile-bottom-nav { position: fixed !important; left: 10px !important; right: 10px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: 560px !important; margin: 0 auto !important; padding: 6px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; border-radius: 999px !important; border: 1px solid var(--rd-border) !important; background: color-mix(in srgb, var(--rd-card) 76%, transparent) !important; box-shadow: var(--rd-tabbar-shadow) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; z-index: 60 !important; transform: none !important; opacity: 1 !important; } nav.mobile-bottom-nav button { min-height: 56px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--rd-muted) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; font-weight: 700 !important; transform: none !important; } nav.mobile-bottom-nav button.active { background: var(--rd-nav-active) !important; color: var(--rd-accent) !important; box-shadow: var(--rd-btn-bevel), inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 30%, transparent) !important; } nav.mobile-bottom-nav .mobile-bottom-nav__glide { box-shadow: var(--rd-btn-bevel) !important; } nav.mobile-bottom-nav button img { width: 20px !important; height: 20px !important; } } /* Focus ring and scrollbar */ :focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rd-border) 80%, var(--rd-muted)); border-radius: 999px; } /* Hi! messenger — «минеральный» глобальный редизайн Тёплые нейтрали, один яркий акцент (охра/терракота), плоские поверхности. Без фиолетово-синих градиентов, без стекломорфизма и «нейрошаблона». */ /* Типографика: системный гротеск + сериф только для крупных заголовков бренда */ body { font-family: var(--font-body, "Inter", "Segoe UI", Roboto, Arial, sans-serif) !important; -webkit-font-smoothing: antialiased; } .logo-small, .auth-card .brand-wrap h2, .auth-card h2, .tg-nav-title { font-family: var(--font-body, "Inter", "Segoe UI", Roboto, Arial, sans-serif) !important; letter-spacing: -0.02em !important; } /* ——— Токены: тёмные темы (общая база) ——— */ :root, body, body[data-theme="dark"], body[data-theme="midnight"], body[data-theme="graphite"] { --rd-page-bg: #0c1018; --rd-bg: #0c1018; --rd-bg-soft: #121820; --rd-card: #151c28; --rd-card-2: #121820; --rd-border: #2a323e; --rd-text: #e8ecf1; --rd-logo-text: #f1f4f8; --rd-muted: #8b95a8; --rd-accent: #5e88ff; --rd-accent-2: #4d72d8; --rd-pill: #1a2230; --rd-pill-soft: #222b3a; --rd-nav: #121820; --rd-nav-active: #1e2838; --bg-page: #0c1018; --bg-sidebar: #121820; --bg-card: #151c28; --bg-hover: #1e2838; --bg-active: #2a323e; --border: #2a323e; --accent: #5e88ff; --accent-hover: #7a9eff; --text-primary: #e8ecf1; --text-secondary: #c5ccd6; --text-muted: #8b95a8; --message-out-bg: #5e88ff; --message-in-bg: #1c2634; --message-out-text: #fffaf6; --message-in-text: #f7f2ea; --profile-bg: #151413; --profile-text: #f0ece6; --profile-muted: #9a958c; --profile-card-bg: #1f1e1c; --profile-card-border: #353330; --profile-card-shadow: none; --profile-subcard-bg: #191817; --profile-subcard-border: #353330; --profile-primary: #c4a574; --profile-primary-solid: #c4a574; --profile-secondary-bg: #252220; --profile-secondary-text: #e8e2da; --auth-link: #c4a574; } body[data-color-theme="blue"] { --rd-accent: #2563eb; --rd-accent-2: #1d4ed8; --accent: #2563eb; --accent-hover: #3b82f6; } body[data-color-theme="cyan"] { --rd-accent: #0ea5b7; --rd-accent-2: #0b7f8c; --accent: #0ea5b7; --accent-hover: #22c3d8; } body[data-color-theme="violet"] { --rd-accent: #7c5cff; --rd-accent-2: #6246d2; --accent: #7c5cff; --accent-hover: #9376ff; } body[data-color-theme="emerald"] { --rd-accent: #10b981; --rd-accent-2: #0f8f65; --accent: #10b981; --accent-hover: #21cf97; } body[data-theme="midnight"] { --rd-page-bg: #0c0b0a; --rd-bg: #0c0b0a; --rd-bg-soft: #131110; --rd-card: #161514; --rd-card-2: #10100f; --rd-border: #2c2926; --rd-text: #ebe8e2; --rd-muted: #8f8a82; --rd-accent: #b8966a; --rd-accent-2: #9a7d55; --rd-pill: #1f1d1b; --rd-pill-soft: #262422; --rd-nav: #141312; --rd-nav-active: #262320; --message-out-bg: #755c3d; --message-in-bg: #171514; } body[data-theme="graphite"] { --rd-page-bg: #121418; --rd-bg: #121418; --rd-bg-soft: #181c22; --rd-card: #1a1f26; --rd-card-2: #14181e; --rd-border: #343b45; --rd-text: #e8ecf2; --rd-muted: #8b95a5; --rd-accent: #9db4c4; --rd-accent-2: #7e96a9; --rd-pill: #232a33; --rd-pill-soft: #2a323c; --rd-nav: #181d24; --rd-nav-active: #2a313b; --accent: #9db4c4; --accent-hover: #b3c6d4; --message-out-bg: #4a5f72; --message-in-bg: #1b222a; --message-out-text: #f8fafc; --message-in-text: #eef2f7; } /* Светлая тема — те же спокойные нейтрали, что в шапке global_redesign */ body[data-theme="light"] { --rd-page-bg: #eef0f4; --rd-bg: #eef0f4; --rd-bg-soft: #e8eaef; --rd-card: #ffffff; --rd-card-2: #f4f5f8; --rd-border: #dfe3eb; --rd-text: #1a1d26; --rd-logo-text: #1a1d26; --rd-muted: #6b7280; --rd-accent: #2563eb; --rd-accent-2: #1d4ed8; --rd-pill: #f0f2f6; --rd-pill-soft: #e8ebf1; --rd-btn-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 1px 2px rgba(255, 255, 255, 0.42); --rd-btn-bevel-accent: inset 0 1px 0 rgba(255, 255, 255, 0.3); --rd-tabbar-shadow: var(--rd-shadow-soft), var(--rd-btn-bevel); --rd-nav: #f4f5f8; --rd-nav-active: #e8ebf1; --bg-page: #eef0f4; --bg-sidebar: #f4f5f8; --bg-card: #ffffff; --bg-hover: #e8ebf1; --bg-active: #dfe3eb; --border: #dfe3eb; --accent: #2563eb; --accent-hover: #3b82f6; --text-primary: #1a1d26; --text-secondary: #3d4451; --text-muted: #6b7280; --message-out-bg: #2563eb; --message-in-bg: #eef1f6; --message-out-text: #fffaf6; --message-in-text: #1a1d26; --profile-bg: #eef0f4; --profile-text: #1a1d26; --profile-muted: #6b7280; --profile-card-bg: #ffffff; --profile-card-border: #dfe3eb; --profile-subcard-bg: #f4f5f8; --profile-subcard-border: #dfe3eb; --profile-primary: #2563eb; --profile-primary-solid: #2563eb; --profile-secondary-bg: #e8ebf1; --profile-secondary-text: #1a1d26; --auth-link: #2563eb; } body { background: var(--rd-page-bg) !important; color: var(--rd-text) !important; } /* transform на body ломает position:fixed у потомков (таббар «уезжает» при скролле). */ body.profile-shell, body.feed-page, body.gifts-page, body.usernames-market-page, body.st-hub, body.user-public-profile, body.user-profile-page, body:has(#appRoot) { transform: none !important; } a { color: var(--rd-accent); } a:hover { color: var(--accent-hover, var(--rd-accent-2)); } .app { padding: 10px !important; gap: 10px !important; } .sidebar, .chat, .desktop-panel, .settings-card, .auth-card, .profile-card, .tg-section-card, .modal-content, .market-item, .market-card, .market-hero, .gift-item, .gift-card, .gift-shop-card, .card, .side, .content, .admin-card { background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; backdrop-filter: none !important; } .sidebar, .chat, .desktop-panel { border-radius: var(--rd-radius-lg) !important; } .modal-content { box-shadow: var(--rd-elev-pop) !important; } /* mobile-bottom-nav вынесен: у неё своя подложка в @media и в tabbar_shell / нижний блок */ .sidebar-header, .chat-header, .quick-menu, .search-results-drop { background: var(--rd-card) !important; border-color: var(--rd-border) !important; box-shadow: none !important; backdrop-filter: none !important; } .floating-input { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } .quick-menu { border-radius: 12px !important; } .quick-menu .item { color: var(--rd-text) !important; border-bottom-color: var(--rd-border) !important; } .quick-menu .item:hover, .conv-item:hover, .conv-item.active, .dropdown-item:hover { background: var(--rd-pill-soft) !important; } .logo-small { color: var(--rd-logo-text) !important; } #searchInput, #messageInput, .create-form-field input, .create-form-field textarea, .create-form-field select, .modal-content input, .modal-content textarea, .modal-content select, .tg-field input, .tg-field textarea, .field input, .field textarea, .field select { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; color: var(--rd-text) !important; box-shadow: none !important; border-radius: 10px !important; } #searchInput::placeholder, #messageInput::placeholder, input::placeholder, textarea::placeholder { color: var(--rd-muted) !important; } .conv-avatar, .chat-avatar, .user-avatar, .tg-avatar, .profile-avatar-big { background-color: var(--rd-pill-soft) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; } .message-bubble { background: var(--message-in-bg) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; color: var(--message-in-text) !important; } .message-own .message-bubble { background: var(--message-out-bg) !important; border-color: transparent !important; color: var(--message-out-text) !important; } .message-gift .message-bubble { background: var(--rd-pill) !important; border-color: var(--rd-border) !important; } /* Видео-кружок в чате: без «пузыря», только круг и подпись */ .message.message--circle .message-circle-shell, .message.message--circle .message-bubble, .message.message--circle.message-own .message-bubble, .message.message--circle .message-content, .message.message--circle .message-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; color: var(--rd-text) !important; } .message.message--circle.message-own .message-bubble { background: transparent !important; border: none !important; } .message.message--circle .message-sender { color: var(--rd-muted); font-size: 12px; margin-bottom: 4px; } .message.message--circle .message-time { color: var(--rd-muted); margin-top: 6px; } .message-circle-caption { margin-top: 8px; padding: 0 4px; font-size: 15px; line-height: 1.38; color: var(--rd-text); word-break: break-word; } .chat-welcome, .call-card { background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; backdrop-filter: none !important; } .call-overlay { background: rgba(12, 10, 8, 0.88) !important; backdrop-filter: none !important; } button, .btn, #sendBtn, .attach-btn, .emoji-btn, .call-btn, .create-type-btn, .create-user-item, .create-toggle, .profile-actions button, .tg-quick-btn, .tg-pill, .tg-list-item, .profile-tag-button { box-shadow: var(--rd-btn-bevel) !important; } #createMenuBtn { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; color: var(--rd-text) !important; } #createMenuBtn:hover { background: var(--rd-pill-soft) !important; } #createModal .modal-content { background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; } #createModal .create-member-pick-list { border: none !important; background: transparent !important; box-shadow: none !important; } #createModal button.create-member-row, #createModal .create-member-row { background: transparent !important; background-image: none !important; border: none !important; border-color: transparent !important; color: var(--rd-text) !important; box-shadow: none !important; border-radius: 0 !important; } #createModal button.create-member-row:hover, #createModal button.create-member-row:focus-visible, #createModal button.create-member-row:active, #createModal .create-member-row:hover, #createModal .create-member-row:focus-visible, #createModal .create-member-row:active, #createModal .create-member-row.is-selected { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--rd-text) !important; } #createModal .create-members-search-pill #createUserSearchInput { border-radius: 999px !important; border: none !important; background: var(--rd-pill) !important; box-shadow: none !important; } .create-type-btn { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; color: var(--rd-text) !important; } .create-type-btn strong { color: var(--rd-text) !important; } .create-type-btn span { color: var(--rd-muted) !important; } .create-type-btn.active { background: var(--rd-pill-soft) !important; border-color: var(--rd-accent) !important; } .create-user-search-list, .create-selected-list { background: var(--rd-bg-soft) !important; border-color: var(--rd-border) !important; } #sendBtn, .call-controls .accept, button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.create-member-row):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.chat-media-viewer__nav):not(.chat-media-viewer__close):not(.chat-media-viewer__btn):not(.chat-back-mobile):not(.story-ed-tool):not(.story-ed-swatch):not(.story-ed-rail__toggle):not(.story-ed-rail__chev):not(.story-ed-icon-btn):not(.story-ed-skip):not(.story-ed-flip):not(.story-ed-shutter):not(.story-ed-publish):not(.story-ed-back-capture):not(.story-ed-btn):not(.story-viewer-v2__tap):not(.story-viewer-v2__close):not(.gift-info-modal__menu-btn):not(.feed-menu__item):not(.upp-dropdown-item):not(.profile-menu-item):not(.gift-info-modal__menu-item):not(.report-chip):not(.report-linkish):not(.report-modal__back):not(.report-modal__close):not(.report-thumb-remove):not(.orbs-wallet-action__btn) { background: var(--rd-accent) !important; color: #fff !important; } button.secondary, .secondary, .call-btn, .attach-btn, .emoji-btn, .create-type-btn, .create-user-item, .create-toggle, .tg-quick-btn, .tg-pill, .tg-list-item { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; color: var(--rd-text) !important; } button:not(.nav-hub-btn):not(.upp-sec-handle):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.story-ed-tool):not(.story-ed-swatch):not(.story-ed-rail__toggle):not(.story-ed-rail__chev):not(.story-ed-icon-btn):not(.story-ed-skip):not(.story-ed-flip):not(.story-ed-shutter):not(.story-ed-publish):not(.story-ed-back-capture):not(.story-ed-btn):not(.story-viewer-v2__tap):not(.story-viewer-v2__close):not(.gift-info-modal__menu-btn):not(.feed-menu__item):not(.upp-dropdown-item):not(.profile-menu-item):not(.gift-info-modal__menu-item):not(.report-chip):not(.report-linkish):not(.report-modal__back):not(.report-modal__close):not(.report-thumb-remove):not(.orbs-wallet-action__btn):not(.hi-pwa-install__close):not(.hi-ios-install__close):not(.icon-btn), .btn, .prm-linkbtn, .prm-primary, .upp-action, .theme, .side-btn { border-radius: 12px !important; border: 1px solid var(--rd-border) !important; min-height: 40px; } .market-hero, .gift-shop-card, .story-avatar.add-story, .voice-play, .message-own .message-bubble, .profile-stage, .tg-hero-card, .auth-page, body.auth-page { background-image: none !important; } .side-btn.active, .market-tab.active, .tab.active, .theme-option.active { background: var(--rd-pill-soft) !important; border-color: var(--rd-border) !important; } .market-item, .gift-item, .gift-shop-card, .card { border-radius: 12px !important; } .create-error-box, .profile-error, .denied { background: #3a2220 !important; border-color: #6b3a32 !important; color: #f5ded8 !important; } body[data-theme="light"] .create-error-box, body[data-theme="light"] .profile-error, body[data-theme="light"] .denied { background: #fce8e6 !important; border-color: #e8b4ae !important; color: #5c2018 !important; } .profile-stage, .tg-hero-card, .profile-hero { background: var(--rd-card) !important; border: 1px solid var(--rd-border) !important; box-shadow: none !important; } .profile-stage::before, .profile-stage::after, .tg-hero-card::before, .tg-hero-card::after { display: none !important; } .tg-name-row, .profile-title-row, .tg-nav-title, .tg-handle, .tg-status, .profile-hero-tag { color: var(--rd-text) !important; } .profile-hero-tag { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; } .tg-nav-btn { background: var(--rd-pill) !important; border: 1px solid var(--rd-border) !important; color: var(--rd-text) !important; } .tg-section-card h3, .profile-section-title, .profile-stat-label, .tg-meta, .tg-empty, .create-type-btn span, .create-form-field label { color: var(--rd-muted) !important; } .auth-page, body.auth-page, body.profile-shell, .modern-profile.profile-shell { background: var(--rd-page-bg) !important; } .auth-card button, .profile-actions button:not(.secondary), .profile-row-actions button:not(.secondary) { background: var(--rd-accent) !important; color: #fff !important; } .modern-profile.profile-shell { color: var(--rd-text) !important; } /* Светлый профиль: profile_rework задаёт тёмно-синий текст на светлом — выравниваем под токены */ body[data-theme="light"].profile-shell.modern-profile { background: var(--rd-page-bg) !important; color: var(--rd-text) !important; } body[data-theme="light"] .modern-profile .profile-stage, body[data-theme="light"] .modern-profile .tg-hero-card { color: var(--rd-text) !important; } .icon-btn { border-color: var(--rd-border) !important; background: var(--rd-pill) !important; color: var(--rd-text) !important; } :focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } @media (max-width: 768px) { .app { padding: 0 !important; } .sidebar, .chat { border-radius: 0 !important; } } /* Крупные панели и модалки — радиус без привязки к монохрому */ .sidebar, .chat, .desktop-panel, .auth-card, .profile-card, .settings-card, .modal-content { border-radius: var(--rd-radius-xl, 28px) !important; } #searchInput, #messageInput, .auth-card input, .create-form-field input, .create-form-field textarea, .create-form-field select { background: var(--rd-input-bg, var(--rd-pill)) !important; color: var(--rd-text) !important; border: 1px solid var(--rd-input-border, var(--rd-border)) !important; border-radius: var(--rd-radius-md, 16px) !important; } #searchInput::placeholder, #messageInput::placeholder, .auth-card input::placeholder { color: var(--rd-muted) !important; } .field-icon { background: var(--rd-accent) !important; color: #fff !important; border-radius: 999px !important; } .auth-card button, #sendBtn, .composer-send, .primary, button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.create-member-row):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.chat-media-viewer__nav):not(.chat-media-viewer__close):not(.chat-media-viewer__btn):not(.chat-back-mobile):not(.story-ed-tool):not(.story-ed-swatch):not(.story-ed-rail__toggle):not(.story-ed-rail__chev):not(.story-ed-icon-btn):not(.story-ed-skip):not(.story-ed-flip):not(.story-ed-shutter):not(.story-ed-publish):not(.story-ed-back-capture):not(.story-ed-btn):not(.story-viewer-v2__tap):not(.story-viewer-v2__close):not(.gift-info-modal__menu-btn):not(.feed-menu__item):not(.upp-dropdown-item):not(.profile-menu-item):not(.gift-info-modal__menu-item):not(.report-chip):not(.report-linkish):not(.report-modal__back):not(.report-modal__close):not(.report-thumb-remove):not(.orbs-wallet-action__btn) { background: var(--rd-accent) !important; color: #fff !important; border-color: transparent !important; border-radius: 999px !important; } /* Таббар: одна подложка у