/* DESIGN: современный вид раздела «Игры» (обе вкладки) и читаемость светлой темы во всём приложении.
   Загружается последним; использует переменные темы (--panel, --text, --muted, --line, --accent). */

/* ============================================================ ИГРЫ: общий каркас */
.games-view { --g-card: var(--panel, #151c19); --g-card-2: var(--panel-2, #1a221f); --g-line: var(--line-2, rgba(255,255,255,.09));
  --g-text: var(--text, #e9efec); --g-muted: var(--muted, #8a9690); --g-shadow: 0 6px 22px rgba(0,0,0,.22); --g-r: 18px; }
html.mux-light .games-view { --g-shadow: 0 6px 20px rgba(15,23,42,.08); }
.games-view .mv-head { gap: 12px; }
.games-view .gm-h { letter-spacing: -.01em; }

/* сегментированный переключатель вкладок */
.games-view .gm-tabs { display: flex; gap: 4px; margin: 12px 20px 0; padding: 4px; border-radius: 14px; background: var(--g-card-2); border: 1px solid var(--g-line); max-width: 420px; }
.games-view .gm-tabs button { flex: 1; max-width: none; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--g-muted);
  font: 600 14px/1.1 var(--font, inherit); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.games-view .gm-tabs button:hover { color: var(--g-text); }
.games-view .gm-tabs button.on { background: linear-gradient(100deg, #f59e0b, #ec4899); color: #fff; box-shadow: 0 4px 14px rgba(236,72,153,.3); }

/* карточки миниигр */
.games-view .gm-cards { gap: 12px; }
.games-view .gm-card { background: var(--g-card); border: 1px solid var(--g-line); border-radius: var(--g-r); box-shadow: var(--g-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.games-view .gm-card:hover { transform: translateY(-2px); background: var(--g-card); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.games-view .gm-card.on { border-color: transparent; background: linear-gradient(var(--g-card), var(--g-card)) padding-box, linear-gradient(120deg, #f59e0b, #ec4899) border-box;
  border: 2px solid transparent; box-shadow: 0 10px 30px rgba(236,72,153,.18); }
.games-view .gm-c-emo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 24px; flex: none;
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(236,72,153,.18)); }
.games-view .gm-c-wheel .gm-c-emo { background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(14,165,233,.2)); }
.games-view .gm-c-scratch .gm-c-emo { background: linear-gradient(135deg, rgba(168,85,247,.25), rgba(236,72,153,.2)); }
.games-view .gm-c-coin .gm-c-emo { background: linear-gradient(135deg, rgba(14,165,233,.25), rgba(99,102,241,.22)); }
.games-view .gm-c-quests .gm-c-emo { background: linear-gradient(135deg, rgba(34,197,94,.25), rgba(132,204,22,.2)); }
.games-view .gm-c-top .gm-c-emo { background: linear-gradient(135deg, rgba(245,158,11,.3), rgba(234,179,8,.2)); }
.games-view .gm-c-m small { color: var(--g-muted); }
.games-view .gm-dot { background: linear-gradient(135deg, #f43f5e, #ec4899); color: #fff; }
.games-view .gm-panel, .games-view .gm-game { background: var(--g-card); border: 1px solid var(--g-line); border-radius: var(--g-r); box-shadow: var(--g-shadow); }
.games-view .gm-q { background: var(--g-card-2); }
.games-view .gm-fine { color: var(--g-muted); }
.games-view .gm-bal { color: #b45309; background: rgba(245,158,11,.14); }
html:not(.mux-light) .games-view .gm-bal { color: #fcd34d; }
.games-view .gm-top-tabs button { border-radius: 10px; }

/* ============================================================ КАРТОЧНЫЕ ИГРЫ */
.games-view .gm-cardgames { padding: 0 4px; animation: mv-in .22s ease; }
.cg { gap: 14px; }
.cg-head { padding: 14px 16px; border-radius: var(--g-r, 18px); background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); box-shadow: var(--g-shadow); }
.cg-head small { color: var(--g-muted, var(--muted)); opacity: 1; }
.cg-bal { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px 8px 12px; font-size: 18px;
  background: linear-gradient(100deg, #f59e0b, #f97316); color: #fff; box-shadow: 0 4px 14px rgba(249,115,22,.35); }
.cg-bal b { font-weight: 800; }
.cg-create { gap: 12px; padding: 16px; border-radius: var(--g-r, 18px); background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); box-shadow: var(--g-shadow); }
.cg-create label { color: var(--g-muted, var(--muted)); opacity: 1; font-weight: 600; }
.cg-create select, .cg-create input { background: var(--input, rgba(127,127,127,.08)); color: var(--g-text, var(--text)); border: 1px solid var(--g-line, var(--line-2)); border-radius: 10px; padding: 9px 10px; font: inherit; }
.cg-create option { color: initial; }
.cg-btn { border-radius: 12px; padding: 10px 18px; transition: transform .12s, filter .15s, background .15s; border-color: var(--g-line, var(--line-2)); }
.cg-btn:hover { filter: brightness(1.08); } .cg-btn:active { transform: scale(.97); }
.cg-btn.pri { background: linear-gradient(100deg, #2563eb, #1e88ff); border-color: transparent; box-shadow: 0 4px 14px rgba(30,136,255,.3); }
.cg-btn.warn { background: linear-gradient(100deg, #dc2626, #ef4444); border-color: transparent; }
.cg-lh { font-size: 15px; color: var(--g-text, var(--text)); }
.cg-li { gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); box-shadow: var(--g-shadow); transition: transform .15s; }
.cg-li:hover { transform: translateY(-1px); }
.cg-li small { color: var(--g-muted, var(--muted)); opacity: 1; }
.cg-gico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 22px; flex: none; color: #fff; }
.cg-gico.durak { background: linear-gradient(135deg, #16a34a, #0f766e); } .cg-gico.bj21 { background: linear-gradient(135deg, #1e293b, #475569); } .cg-gico.dice { background: linear-gradient(135deg, #7c3aed, #db2777); }
.cg-avs { display: inline-flex; margin-top: 4px; } .cg-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-left: -6px; font-size: 11px; font-weight: 700; color: #fff; border: 2px solid var(--g-card, var(--panel)); }
.cg-av:first-child { margin-left: 0; }
.cg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(127,127,127,.14); color: var(--g-text, var(--text)); }
.cg-stake { padding: 5px 11px; border-radius: 999px; background: rgba(245,158,11,.16); color: #b45309; font-weight: 800; white-space: nowrap; }
html:not(.mux-light) .cg-stake { color: #fcd34d; }
.cg-m, .cg-fine, .cg-log { color: var(--g-muted, var(--muted)); opacity: 1; }
.cg-lhd { padding: 12px 14px; border-radius: 16px; background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); }
.cg-pot { background: rgba(245,158,11,.16); color: #b45309; } html:not(.mux-light) .cg-pot { color: #fcd34d; }
/* таймер-кольцо */
.cg-t { --p: 1; position: relative; display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 50%; color: var(--g-text, var(--text)); font-size: 12px;
  background: radial-gradient(closest-side, var(--g-card, var(--panel)) 78%, transparent 80% 100%), conic-gradient(#f97316 calc(var(--p) * 360deg), rgba(127,127,127,.2) 0); }
.cg-t:empty { display: none; } .cg-t.low { color: #ef4444; }
/* места в лобби */
.cg-seats { gap: 10px; } .cg-seat { align-items: center; gap: 6px; min-width: 120px; padding: 14px; border-radius: 16px; background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); transition: background .2s, border-color .2s; }
.cg-seat .cg-av { width: 40px; height: 40px; font-size: 16px; margin: 0; border: 0; }
.cg-seat.rd { background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(16,185,129,.1)); border-color: rgba(34,197,94,.5); }
.cg-seat.rd small { color: #16a34a; opacity: 1; font-weight: 700; }
.cg-seat.empty { background: transparent; border: 2px dashed var(--g-line, rgba(127,127,127,.4)); color: var(--g-muted, var(--muted)); justify-content: center; }
/* стол «Дурака» — зелёное сукно */
.cg-mid { position: relative; min-height: 150px; padding: 16px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 50% 40%, #1f8a55 0%, #146c40 55%, #0d4f2e 100%); box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), inset 0 10px 40px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.2); }
.cg-mid .cg-m { color: rgba(255,255,255,.75); }
.cg-deck small, .cg-disc { color: rgba(255,255,255,.9); }
.cg-deck { gap: 4px; }
.cg-opps { gap: 12px; }
.cg-opp { padding: 8px 12px; border-radius: 16px; background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); transition: box-shadow .2s, border-color .2s; }
.cg-opp small { color: var(--g-muted, var(--muted)); opacity: 1; }
.cg-opp.act { background: var(--g-card, var(--panel)); border-color: #1e88ff; box-shadow: 0 0 0 3px rgba(30,136,255,.25); }
/* карты */
.cg-card { border-radius: 9px; background: linear-gradient(180deg, #ffffff, #f4f4f2); color: #1f2937; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.cg-card.red { color: #c81e1e; }
.cg-card.back { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 18%, transparent 19%), repeating-linear-gradient(45deg, #3730a3 0 5px, #4f46e5 5px 10px); border: 3px solid #fff; }
.cg-hand { gap: 0; padding: 18px 8px 6px; min-height: 110px; }
.cg-hand .cg-card { margin-left: -14px; transform-origin: 50% 120%; transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px)); }
.cg-hand .cg-card:first-child { margin-left: 0; }
.cg-hand .cg-card.legal { --lift: -8px; box-shadow: 0 0 0 3px #22c55e, 0 6px 14px rgba(34,197,94,.45); transform: rotate(var(--rot, 0deg)) translateY(var(--lift)); }
.cg-hand .cg-card.legal:hover { --lift: -16px; z-index: 2; }
.cg-hand .cg-card.sel { --lift: -22px; box-shadow: 0 0 0 3px #1e88ff, 0 8px 18px rgba(30,136,255,.5); transform: rotate(var(--rot, 0deg)) translateY(var(--lift)); z-index: 3; }
.cg-hand .cg-card.dim { opacity: .6; filter: saturate(.7); }
.cg-pair .cg-card { animation: cg-deal .25s ease; }
@keyframes cg-deal { from { transform: translateY(-14px) scale(.92); opacity: 0; } }
.cg-pair .cg-card.def { animation: cg-def .25s ease; }
@keyframes cg-def { from { transform: translate(10px, -10px) rotate(0deg); opacity: 0; } to { transform: rotate(8deg); } }
.cg-pair.tgt .cg-card:first-child { box-shadow: 0 0 0 3px #facc15, 0 0 16px rgba(250,204,21,.6); }
.cg-role { font-size: 15px; color: var(--g-text, var(--text)); }
.cg-fin { border-radius: 16px; padding: 14px; font-size: 16px; background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); }
.cg-fin.win { background: linear-gradient(100deg, #22c55e, #16a34a); color: #fff; border: 0; box-shadow: 0 8px 24px rgba(34,197,94,.35); }
.cg-bjrow { background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); border-radius: 16px; padding: 10px 12px; }
.cg-bjrow.act { border-color: #1e88ff; box-shadow: 0 0 0 3px rgba(30,136,255,.2); background: var(--g-card, var(--panel)); }
.cg-bjrow.won, .cg-drow.won { border-color: rgba(34,197,94,.6); background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(16,185,129,.08)); }
.cg-drow { background: var(--g-card, var(--panel)); border: 1px solid var(--g-line, var(--line-2)); border-radius: 16px; }
.cg-dround small { color: var(--g-muted, var(--muted)); }
/* 3D-кубики */
.cg-die { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(145deg, #ffffff, #e5e7eb); box-shadow: inset -3px -3px 6px rgba(0,0,0,.12), inset 3px 3px 6px rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.25); }
.cg-die i { background: radial-gradient(circle at 35% 35%, #4b5563, #111827); }
.cg-dice { perspective: 600px; }
.cg-dice.roll .cg-die { animation: cg-roll3d 1s cubic-bezier(.2,.8,.3,1) both; }
.cg-dice.roll .cg-drow:nth-child(3) .cg-die { animation-delay: .08s; } .cg-dice.roll .cg-drow:nth-child(4) .cg-die { animation-delay: .16s; }
@keyframes cg-roll3d { 0% { transform: translateY(-40px) rotateX(0) rotateY(0) scale(.5); opacity: 0; } 50% { opacity: 1; } 70% { transform: translateY(4px) rotateX(540deg) rotateY(360deg) scale(1.05); } 100% { transform: translateY(0) rotateX(720deg) rotateY(720deg) scale(1); } }
@media (max-width: 600px) {
  .games-view .gm-tabs { margin: 10px 12px 0; }
  .cg { padding: 10px 10px 20px; }
  .cg-hand .cg-card { margin-left: -18px; }
  .cg-li { flex-wrap: wrap; } .cg-li .cg-btn { margin-left: auto; }
  .cg-seat { min-width: 96px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cg-dice.roll .cg-die, .cg-pair .cg-card { animation: none !important; } }

/* ============================================================ СВЕТЛАЯ ТЕМА: читаемость (html.mux-light) */
html.mux-light { --on-panel-muted: #4b5563; }
/* вторичный текст, захардкоженный светлым */
html.mux-light .rail-storage small, html.mux-light .fv-quota-text, html.mux-light #auth-form label.remember,
html.mux-light .cs-snip, html.mux-light .reply-q span, html.mux-light .fv-text, html.mux-light .fv-m-actions a.icon-btn,
html.mux-light .head-actions .icon-btn, html.mux-light .rd-cl-txt, html.mux-light .rd-cl-top svg:last-child, html.mux-light .rd-cl-leg,
html.mux-light .ia-ad-desc, html.mux-light .win-promo p, html.mux-light .adv-bgs button { color: var(--on-panel-muted) !important; }
html.mux-light .e2e-text strong, html.mux-light .e2e-text b { color: #14532d !important; }
html.mux-light #e2e.is-secret .e2e-text strong { color: #5b21b6 !important; }
html.mux-light .e2e { background: #e8f5ee !important; }
html.mux-light #e2e.is-secret { background: #f1eaff !important; }
/* исходящие сообщения: текст на светло-голубом пузыре */
html.mux-light .msg.me .foot, html.mux-light .msg.me .ticks { color: rgba(11,27,51,.6) !important; }
html.mux-light .msg.me .reply-q b, html.mux-light .msg.me .fwd-from { color: #1d4ed8 !important; }
html.mux-light .msg.me .reply-q span { color: rgba(11,27,51,.75) !important; }
html.mux-light .bubble.media img.photo + .foot .ticks { color: #fff !important; }
/* тёмные панели, меню, тосты, модалки */
html.mux-light .toast, html.mux-light .adv-toast, html.mux-light .ia-toast { background: #1f2937 !important; color: #fff !important; }
html.mux-light .pin-menu, html.mux-light .sheet, html.mux-light .cb-card, html.mux-light .emoji-panel, html.mux-light .mp-menu,
html.mux-light .adv-2fa form, html.mux-light .auth-card, html.mux-light .win-promo, html.mux-light .prv-modal, html.mux-light .dc-modal {
  background: #ffffff !important; color: var(--text) !important; border-color: var(--line) !important; box-shadow: 0 12px 36px rgba(15,23,42,.18) !important; }
html.mux-light .pin-menu button, html.mux-light .mp-menu button, html.mux-light .sheet button { color: var(--text); }
html.mux-light .pin-menu button:hover, html.mux-light .mp-menu button:hover { background: var(--hover); }
html.mux-light .chat-head, html.mux-light .dock, html.mux-light .pinbar:not([hidden]), html.mux-light .csearch:not([hidden]), html.mux-light .edit-head, html.mux-light .rd .rail {
  background: rgba(255,255,255,.96) !important; color: var(--text); border-color: var(--line) !important; }
html.mux-light .composer-field, html.mux-light .rec-bar, html.mux-light .adv-2fa input, html.mux-light .meter, html.mux-light .fv-up-bar, html.mux-light .cu-bar { background: var(--input) !important; color: var(--text); }
html.mux-light .profile { background: var(--bg) !important; color: var(--text); }
html.mux-light .chat-empty { background: rgba(255,255,255,.85) !important; color: var(--muted); }
html.mux-light .day, html.mux-light .sys-msg span { background: rgba(255,255,255,.92) !important; color: #374151 !important; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
html.mux-light .ikb-btn { background: #eef2f7 !important; color: #1f2937 !important; }
html.mux-light .fv-thumb, html.mux-light .mp-card-cov, html.mux-light .mp-row-play { background: #e5e9f0 !important; }
html.mux-light .fv-m-body { background: #f8fafc !important; color: var(--text); }
html.mux-light .rd .m-logo.rd-me, html.mux-light .rd-me, html.mux-light .rd .m-round { background: #eef2f7 !important; color: var(--text); }
html.mux-light .rd .so-skel .so-ring, html.mux-light .rd .so-skel small { background: #e3e8ef !important; }
html.mux-light .ptr-ind, html.mux-light .ptr-pill { background: #ffffff !important; color: var(--text) !important; box-shadow: 0 2px 10px rgba(15,23,42,.15); }
html.mux-light .ia-panel-body, html.mux-light .mv-body, html.mux-light .mv-frame { background: var(--bg) !important; color: var(--text); }
html.mux-light .ia-music-nav .ia-eq { background: #eef2f7 !important; }
html.mux-light .mp-opts select option, html.mux-light select option { background: #fff; color: #111827; }
html.mux-light .gm-t-area { background: #eef2f7 !important; } html.mux-light .gm-t-head small { color: #6d28d9 !important; }
html.mux-light .gm-f.back { background: #334155 !important; }
/* поля ввода и плейсхолдеры */
html.mux-light input::placeholder, html.mux-light textarea::placeholder { color: #6b7280 !important; opacity: 1; }
html.mux-light .so-reply input, html.mux-light .so-tprev textarea { color: var(--text); }
html.mux-light .so-tprev textarea::placeholder { color: rgba(17,24,39,.55) !important; }
/* приглушённый текст с низким контрастом */
html.mux-light { --muted: #4b5563; --muted-2: #6b7280; }
/* красные/оранжевые акценты — темнее для контраста на белом */
html.mux-light .adv-err, html.mux-light .adv-2fa .e, html.mux-light .cg-err, html.mux-light .upd-err, html.mux-light .mp-btn.danger,
html.mux-light .fv-up.err .fv-up-st, html.mux-light .cu-msg, html.mux-light .prv-list .danger { color: #b91c1c !important; }
html.mux-light .ia-wheel.can .ia-wheel-text small, html.mux-light .mp-star { color: #b45309 !important; }
html.mux-light .cg-tsuit.red { color: #fecaca; }
/* иконки-кнопки, которые были белыми на тёмном */
html.mux-light .icon-btn:not(.light) { color: #374151; }
html.mux-light #chats .mux-acts button { color: #fff; }
.games-view .gm-cardgames, .cg, .cg * { box-sizing: border-box; }
.games-view .gm-cardgames { max-width: 100%; overflow-x: hidden; }
.cg-head > div:first-child, .cg-li > div { min-width: 0; }
@media (max-width: 600px) { .cg-head { flex-wrap: nowrap; } .cg-head small { display: none; } .cg-bal { font-size: 16px; padding: 6px 12px 6px 10px; } .cg-lhd { gap: 8px; } }

/* ============================================================ СВЕТЛАЯ ТЕМА НА ВСЕХ ШИРИНАХ (копия правил mobile-ux.css вне @media) */
  html.mux-light {
    color-scheme: light;
    --bg: #f3f5f9; --rail: #ffffff; --sidebar: #ffffff; --panel: #ffffff; --panel-2: #eef1f6;
    --line: rgba(15,23,42,.08); --line-2: rgba(15,23,42,.13);
    --bubble-in: #ffffff; --bubble-out: #d7e8ff;
    --text: #111827; --muted: #5b6474; --muted-2: #7b8494;
    --input: #eef1f6; --hover: #f1f4f8; --selected: #e6eefb;
  }
  html.mux-light body, html.mux-light .shell, html.mux-light .sidebar, html.mux-light .pane, html.mux-light .stage, html.mux-light .thread { background: var(--bg); color: var(--text); }
  html.mux-light #chats-pane, html.mux-light #chats, html.mux-light #chats .row, html.mux-light .pane-head { background: var(--sidebar) !important; color: var(--text); }
  html.mux-light .rail { background: rgba(255,255,255,.97) !important; border-color: var(--line) !important; }
  html.mux-light .rail .rail-item { color: #5b6474; }
  html.mux-light .rail .rail-item.on, html.mux-light .rail .rail-item.on svg { color: var(--accent); }
  html.mux-light #thread header, html.mux-light .thread > header, html.mux-light .composer { background: #ffffff !important; border-color: var(--line) !important; color: var(--text); }
  html.mux-light .log { background-color: #e9eef5; }
  html.mux-light .bubble { color: #111827; box-shadow: 0 1px 1px rgba(15,23,42,.06); }
  html.mux-light .msg.me .bubble { background: var(--bubble-out) !important; color: #0b1b33; }
  html.mux-light .msg.them .bubble { background: var(--bubble-in) !important; }
  html.mux-light .preview, html.mux-light #chats time { color: var(--muted); }
  html.mux-light input, html.mux-light textarea, html.mux-light select { background: var(--input); color: var(--text); border-color: var(--line-2); }
  html.mux-light .adv-ov, html.mux-light .adv-card, html.mux-light .pin-menu, html.mux-light .modal, html.mux-light .sheet, html.mux-light [role="dialog"] { background: #ffffff !important; color: var(--text) !important; border-color: var(--line) !important; }
  html.mux-light .adv-ov { background: var(--bg) !important; }
  html.mux-light .p5-backdrop { background: rgba(15,23,42,.35); }
  html.mux-light .so-skel .so-ring, html.mux-light .so-skel small, html.mux-light .rd-skel-block { background: #e3e8ef !important; }
  html.mux-light .so-stories small, html.mux-light .so-stories span { color: #374151 !important; }
  html.mux-light #mux-mini, html.mux-light #mux-down { box-shadow: 0 4px 14px rgba(15,23,42,.15); }
  html.mux-light .list-empty, html.mux-light .cl-empty, html.mux-light .fv-empty { color: var(--muted); }

  /* переключатель темы в «Чаты и оформление» */
  .mux-seg { display: flex; gap: 6px; margin-top: 8px; }
  .mux-seg button { flex: 1; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: 500 14px var(--font); }
  .mux-seg button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }


/* компьютерная раскладка в светлой теме */
html.mux-light .rail, html.mux-light .rd .rail { background: #ffffff !important; border-right: 1px solid var(--line) !important; color: var(--text); }
html.mux-light .rail-item, html.mux-light .rail-label { color: #4b5563; }
html.mux-light .rail-item:hover { background: var(--hover); color: var(--text); }
html.mux-light .rail-item.on, html.mux-light .rail-item.on .rail-label { color: var(--accent-d, #15803d); background: var(--selected); }
html.mux-light .sidebar, html.mux-light #chats-pane, html.mux-light .side-head, html.mux-light .pane, html.mux-light .menu-list { background: var(--sidebar) !important; color: var(--text); border-color: var(--line) !important; }
html.mux-light #chats .row:hover { background: var(--hover) !important; }
html.mux-light #chats .row.on, html.mux-light #chats .row.active { background: var(--selected) !important; }
html.mux-light #chats .row strong, html.mux-light .row .name { color: var(--text); }
html.mux-light .search, html.mux-light .side-search input, html.mux-light #search { background: var(--input) !important; color: var(--text) !important; }
html.mux-light .stage, html.mux-light .thread, html.mux-light .log { background-color: #e9eef5 !important; }
html.mux-light .profile, html.mux-light .side-panel, html.mux-light .right-panel, html.mux-light .edit-pane, html.mux-light #profile { background: #ffffff !important; color: var(--text); border-color: var(--line) !important; }
html.mux-light .prow, html.mux-light .menu-item { color: var(--text); }
html.mux-light .prow:hover, html.mux-light .menu-item:hover { background: var(--hover); }
html.mux-light .menu-item.danger { color: #b91c1c; }
html.mux-light .menu-hero { color: #fff; }
html.mux-light .music-view, html.mux-light .games-view, html.mux-light .ia-panel, html.mux-light .mv-head { background: var(--bg) !important; color: var(--text); }
html.mux-light .mv-head { background: #ffffff !important; border-bottom: 1px solid var(--line); }
html.mux-light .mv-title small { color: var(--muted); }
html.mux-light .adv-ov, html.mux-light .adv-body { background: var(--bg) !important; color: var(--text) !important; }
html.mux-light .adv-sec { background: #ffffff; color: var(--text); border-color: var(--line); }
html.mux-light .adv-sec small { color: var(--muted); }
html.mux-light .ctx, html.mux-light .ctx-menu, html.mux-light .context-menu, html.mux-light .msg-menu, html.mux-light .dropdown { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15,23,42,.18); }
html.mux-light .ctx button, html.mux-light .msg-menu button, html.mux-light .dropdown button { color: var(--text); }
html.mux-light .p5-backdrop, html.mux-light .prv-backdrop, html.mux-light .cb-modal, html.mux-light .wa-modal, html.mux-light .ia-modal { background: rgba(15,23,42,.35) !important; }
html.mux-light .lightbox { background: rgba(3,6,5,.92) !important; }
html.mux-light hr, html.mux-light .sep { border-color: var(--line) !important; }