:root {
  --bg0: #111214;
  --bg1: #1e1f22;
  --bg2: #2b2d31;
  --bg3: #313338;
  --bg4: #383a40;
  --hover: #3a3c42;
  --text: #dbdee1;
  --text-dim: #949ba4;
  --accent: #5865f2;
  --accent-h: #4752c4;
  --green: #23a55a;
  --red: #f23f43;
  --yellow: #f0b232;
  --mod: #3ba7f2;
  --radius: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg1); color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden; user-select: none; }
.hidden { display: none !important; }
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.center { text-align: center; }
svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

input, select, textarea { font: inherit; color: var(--text); background: var(--bg0); border: 1px solid transparent;
  border-radius: 6px; padding: 9px 11px; outline: none; width: 100%; user-select: text; }
textarea { resize: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=range] { padding: 0; accent-color: var(--accent); background: none; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=color] { width: 40px; height: 32px; padding: 2px; }
label { display: block; color: var(--text-dim); font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; margin: 12px 0 0; }
label > input, label > select { margin-top: 6px; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 14px; }

button { font: inherit; cursor: pointer; border: 0; border-radius: 6px; padding: 9px 16px; color: #fff;
  transition: background .12s, color .12s; }
button.primary { background: var(--accent); font-weight: 600; }
button.primary:hover { background: var(--accent-h); }
button.secondary { background: var(--bg4); color: var(--text); }
button.secondary:hover { background: #45474e; }
button.danger { background: var(--red); }
button.link { background: none; color: var(--text-dim); padding: 4px 6px; }
button.link:hover { color: var(--text); text-decoration: underline; }
button.small { padding: 6px 12px; font-size: 13px; }
button.wide { width: 100%; margin-top: 18px; padding: 11px; }
button:disabled { opacity: .5; cursor: default; }
button.active { background: var(--green); color: #fff; }
.icon-btn { background: none; color: var(--text-dim); padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.off { color: var(--red); }

.screen { position: fixed; inset: 0; }

/* ---------- Вход ---------- */
#login { display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #2b2f5e 0%, var(--bg0) 60%); }
.login-card { width: 380px; background: var(--bg3); border-radius: 12px; padding: 28px 30px 24px; box-shadow: 0 10px 40px #0008; }
.logo { display: flex; justify-content: center; }
.logo svg { width: 64px; height: 64px; }
.login-card h1 { text-align: center; margin: 8px 0 0; font-size: 24px; }
.login-card p { margin: 2px 0 6px; }
.avatar-pick { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.avatar-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.error { color: var(--red); margin-top: 10px; min-height: 18px; text-align: center; }

/* ---------- Аватары и теги ---------- */
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bg4);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 13px;
  box-shadow: 0 0 0 2px transparent; }
.avatar.big { width: 64px; height: 64px; font-size: 26px; }
.avatar.mid { width: 36px; height: 36px; font-size: 15px; }
.speaking .avatar { box-shadow: 0 0 0 2px var(--green); }
.tag { font-size: 10px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 4px; line-height: 15px;
  white-space: nowrap; flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Главный экран ---------- */
#main { display: flex; }
#sidebar { width: 280px; background: var(--bg2); display: flex; flex-direction: column; flex: none; }
.mode-head { height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--bg0); flex: none; }
.mode-tabs { flex: 1; display: flex; background: var(--bg0); border-radius: 8px; padding: 3px; gap: 3px; }
.mode-tabs button { flex: 1; padding: 7px 4px; background: none; color: var(--text-dim); font-weight: 600; font-size: 13px; }
.mode-tabs button:hover { color: var(--text); }
.mode-tabs button.on[data-mode=game] { background: #2d7d46; color: #fff; }
.mode-tabs button.on[data-mode=study] { background: var(--accent); color: #fff; }
#tree { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.channel { margin-bottom: 2px; }
.ch-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; color: var(--text-dim); cursor: pointer; }
.ch-row:hover { background: var(--hover); color: var(--text); }
.channel.current > .ch-row { background: var(--bg4); color: #fff; }
.ch-row svg { width: 18px; height: 18px; }
.ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ch-row .lock svg { width: 14px; height: 14px; }
.ch-count { font-size: 11px; color: var(--text-dim); }
.ch-users { padding-left: 22px; }
.user { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: default; }
.user:hover { background: var(--hover); }
.user .nick { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.user .spacer { flex: 1; }
.user.self .nick { color: var(--text); font-weight: 600; }
.user .icons { display: flex; gap: 2px; color: var(--text-dim); flex: none; }
.user .icons svg { width: 16px; height: 16px; }
.user .icons .red { color: var(--red); }
.user .icons .orange { color: var(--yellow); }
.user .icons .live { color: #fff; background: var(--red); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 0 4px; line-height: 16px; }
.badge-admin { color: var(--yellow); display: inline-flex; }
.badge-mod { color: var(--mod); display: inline-flex; }
.badge-admin svg, .badge-mod svg { width: 14px; height: 14px; }

#me-panel { background: #232428; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; flex: none; }
#me-info { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px; }
.me-text { min-width: 0; }
#me-nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me-status.tx { color: var(--green); }
#me-status.bad { color: var(--red); }
.me-buttons { display: flex; flex: none; }

#content { flex: 1; display: flex; flex-direction: column; background: var(--bg3); min-width: 0; }
#ch-header { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--bg0); }
#ch-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; flex: 1; }
#ch-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ch-title svg { color: var(--text-dim); }
.pane-tabs { display: flex; gap: 2px; background: var(--bg0); padding: 3px; border-radius: 8px; }
.pane-tabs button { background: none; color: var(--text-dim); padding: 6px 14px; font-size: 13px; font-weight: 600; position: relative; }
.pane-tabs button:hover { color: var(--text); }
.pane-tabs button.on { background: var(--accent); color: #fff; }
.pane-tabs .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.header-buttons { display: flex; gap: 8px; }
.header-buttons button { display: inline-flex; align-items: center; gap: 6px; }
.header-buttons svg { width: 16px; height: 16px; }
body.game .study-only { display: none !important; }
body:not(.game) .game-only { display: none !important; }
.faceit-btn { background: #ff5500; color: #fff; font-weight: 800; letter-spacing: 0.04em; padding: 6px 14px; font-size: 13px; }
.faceit-btn:hover { background: #e64d00; }
/* Уровень FACEIT у ника */
.fc-badge { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.fc-badge b { font-size: 10px; font-weight: 700; color: var(--text-dim); }
.fc-lvl { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 9px; font-weight: 800; color: #111; border: 2px solid currentColor; box-sizing: border-box; background: #1b1b1b; }
.fc-l1 { color: #eeeeee; } .fc-l2, .fc-l3 { color: #1ce400; }
.fc-l4, .fc-l5, .fc-l6, .fc-l7 { color: #ffc800; } .fc-l8, .fc-l9 { color: #ff6309; } .fc-l10 { color: #fe1f00; }
.fc-lvl { -webkit-text-fill-color: currentColor; }

/* ---------- Видео ---------- */
#videos { flex: none; height: 50%; min-height: 120px; display: grid; gap: 6px; padding: 6px; background: var(--bg0); overflow: hidden; }
.vtile { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; min-width: 0; min-height: 0; }
.vtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vtile.mirror video { transform: scaleX(-1); }
.vtile .vlabel { position: absolute; left: 8px; bottom: 8px; background: #000a; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.vtile .vbtns { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.vtile:hover .vbtns, .vtile:fullscreen .vbtns { opacity: 1; }
.vtile .vbtns button { background: #000b; padding: 5px 10px; font-size: 12px; }
.vtile .vbtns button:hover { background: var(--accent); }
.vtile .vwait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.vtile:fullscreen { border-radius: 0; }
#splitter { flex: none; height: 6px; cursor: row-resize; background: var(--bg0); border-top: 1px solid #000; }
#splitter:hover { background: var(--accent); }

/* ---------- Панели ---------- */
#panes { flex: 1; min-height: 0; position: relative; display: flex; }
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* ---------- Чат ---------- */
#messages { flex: 1; overflow-y: auto; padding: 12px 16px; user-select: text; background-size: cover; background-position: center; }
.msg { display: flex; gap: 10px; padding: 4px 0; }
.msg .avatar { margin-top: 2px; }
.msg-body { min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 6px; }
.msg-nick { font-weight: 600; }
.msg-nick.admin { color: var(--yellow); }
.msg-nick.mod { color: var(--mod); }
.msg-time { font-size: 11px; color: var(--text-dim); }
.msg-text { white-space: pre-wrap; word-wrap: break-word; }
.msg-text a { color: #00a8fc; }
.msg.cont { padding-top: 0; }
.msg.cont .msg-head { display: none; }
.msg.cont .avatar { visibility: hidden; height: 0; }
.chat-img { display: block; max-width: min(360px, 100%); max-height: 260px; border-radius: 8px; margin-top: 4px; cursor: zoom-in; background: var(--bg0); }
.chat-file { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--bg4); border-radius: 8px;
  padding: 10px 12px; margin-top: 4px; max-width: 360px; }
.chat-file .fi { font-size: 22px; }
.chat-file .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file a { color: #00a8fc; font-size: 13px; text-decoration: none; }
.sysmsg { color: var(--text-dim); font-size: 13px; font-style: italic; padding: 4px 0 4px 46px; }
.empty-chat { color: var(--text-dim); text-align: center; margin-top: 30px; }
/* Фон на всё окно: панели становятся полупрозрачными */
#main { background-size: cover; background-position: center; }
body.has-bg #sidebar { background: rgba(30, 31, 34, 0.72); }
body.has-bg .mode-head, body.has-bg #ch-header { background: rgba(17, 18, 20, 0.35); }
body.has-bg #me-panel { background: rgba(17, 18, 20, 0.7); }
body.has-bg #content { background: rgba(40, 41, 46, 0.45); }
body.has-bg #ai-pane { background: rgba(30, 31, 34, 0.55); }
body.has-bg .msg, body.has-bg .sysmsg, body.has-bg .user .nick, body.has-bg .ch-name { text-shadow: 0 1px 3px #000c; }
body.has-bg #chat-form { background: rgba(56, 58, 64, 0.85); }
#chat-form { padding: 0 16px 16px; flex: none; display: flex; align-items: center; gap: 6px; background: var(--bg4);
  margin: 0 16px 16px; border-radius: 8px; padding: 2px 6px; }
#chat-input { background: none; padding: 10px 6px; border: 0; }
#upload-status { margin: 0 16px 6px; font-size: 12px; color: var(--text-dim); }
#drop-hint { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: #5865f222;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; pointer-events: none; }
.lightbox { position: fixed; inset: 0; background: #000e; z-index: 90; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 6px; }

/* ---------- Доска ---------- */
.sep { width: 1px; height: 22px; background: var(--bg4); margin: 0 4px; flex: none; }
.tool { background: none; color: var(--text-dim); padding: 5px 9px; font-size: 14px; }
.tool:hover { background: var(--hover); color: var(--text); }
.tool.on { background: var(--accent); color: #fff; }
.swatch { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 2px solid #0002; flex: none; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.bd-top { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--bg0); }
.bd-top select { width: auto; padding: 5px 8px; font-size: 13px; }
.bd-grow { flex: 1; }
.bd-zoom { min-width: 46px; text-align: center; font-size: 12px; color: var(--text-dim); }
.bd-pages { display: flex; gap: 4px; overflow-x: auto; max-width: 45%; }
.bd-page { background: var(--bg4); color: var(--text-dim); padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.bd-page.on { background: var(--accent); color: #fff; }
.bd-page.add { padding: 5px 9px; }
.bd-main { flex: 1; min-height: 0; display: flex; }
.bd-tools { flex: none; width: 46px; display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; background: var(--bg2); overflow-y: auto; }
.bd-tool { background: none; padding: 6px 0; font-size: 17px; color: var(--text); border-radius: 6px; }
.bd-tool:hover { background: var(--hover); }
.bd-tool.on { background: var(--accent); }
.bd-wrap { flex: 1; min-width: 0; position: relative; overflow: hidden; background: #fff; }
.bd-wrap canvas { position: absolute; inset: 0; touch-action: none; }
.bd-props { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px;
  background: var(--bg2); border-radius: 10px; padding: 7px 12px; box-shadow: 0 4px 18px #0005; }
.bd-props input[type=range] { width: 90px; }
.bd-fill { margin: 0; text-transform: none; font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 5px; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.bd-edit { position: absolute; z-index: 5; border: 2px dashed var(--accent); border-radius: 4px; padding: 0 2px; line-height: 1.25;
  font-family: "Segoe UI", sans-serif; outline: none; resize: none; overflow: hidden; }
.bd-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #667; background: #ffffffd9;
  padding: 3px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.bd-erase { display: flex; align-items: center; gap: 2px; }
.bd-erase .tool { font-size: 12px; padding: 4px 8px; }
.bd-people { position: absolute; top: 34px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; max-width: 60%; }
.bd-people .muted { color: #667; background: #ffffffd9; padding: 2px 6px; border-radius: 5px; }
.bd-person { background: #fff; color: #222; border: 1px solid #d5dae1; box-shadow: 0 2px 6px #0002; padding: 3px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.bd-person:hover { background: #eef1ff; border-color: var(--accent); }
.bd-person i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bd-map { position: absolute; right: 10px; bottom: 64px; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 14px #0004; border: 1px solid #cfd5dd; background: #f4f6f9; }
.bd-map canvas { display: block; cursor: pointer; position: static; }
.bd-map-x { position: absolute; top: 2px; right: 2px; background: #fffc; color: #333; padding: 0 7px; font-size: 14px; line-height: 18px; }
.bd-map-show { position: absolute; right: 10px; bottom: 64px; background: #fff; border: 1px solid #cfd5dd; box-shadow: 0 3px 10px #0003; padding: 6px 9px; font-size: 16px; }
.fx-snips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.fx-snips button { padding: 4px 9px; }
.fx-prev { min-height: 70px; margin-top: 10px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; }

/* ---------- Музыка ---------- */
#music-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: linear-gradient(90deg, #ff550022, var(--bg2));
  border-bottom: 1px solid var(--bg0); }
.m-icon { font-size: 18px; }
.m-info { min-width: 0; flex: 0 1 260px; }
.m-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-progress { flex: 1; min-width: 60px; height: 6px; background: var(--bg0); border-radius: 3px; cursor: pointer; position: relative; overflow: hidden; }
.m-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #ff5500; width: 0; }
.m-time { min-width: 76px; text-align: right; }
#music-bar input[type=range] { width: 80px; }
#music-bar .icon-btn { font-size: 15px; }
.m-frame { position: fixed; left: -10000px; top: 0; width: 300px; height: 160px; border: 0; }
#music-bar.yt { background: linear-gradient(90deg, #ff000022, var(--bg2)); }
#music-bar.yt .m-fill { background: #ff3b3b; }
.sc-play.yt { background: #e62117; }
.yt-results { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 520px; }
.yt-pick { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--bg4); border-radius: 8px; padding: 6px; cursor: pointer; }
.yt-pick:hover { border-color: #e62117; background: var(--bg4); }
.yt-pick img, .yt-noimg { width: 72px; height: 54px; object-fit: cover; border-radius: 5px; flex: none; background: #000; display: flex; align-items: center; justify-content: center; }
.yt-meta { flex: 1; min-width: 0; }
.yt-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-pick .sc-play { margin: 0; background: #e62117; flex: none; }
.m-src { display: flex; gap: 6px; margin-top: 12px; }
.m-src button { flex: 1; background: var(--bg4); color: var(--text); font-weight: 600; }
.m-src button.on[data-s=yt] { background: #e62117; color: #fff; }
.m-src button.on[data-s=sc] { background: #ff5500; color: #fff; }
.sc-play { display: inline-block; margin-top: 6px; background: #ff5500; color: #fff; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.sc-play:hover { background: #e64d00; }

/* ---------- Нейросеть ---------- */
.ai-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--bg0); }
.ai-status { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ai-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.ai-status.on i { background: var(--green); }
.ai-list { flex: 1; overflow-y: auto; padding: 12px 16px; user-select: text; }
.ai-item { margin-bottom: 18px; }
.ai-q { display: flex; gap: 8px; align-items: baseline; }
.ai-q b { color: var(--accent); flex: none; }
.ai-q span { white-space: pre-wrap; word-wrap: break-word; }
.ai-a { margin-top: 6px; background: var(--bg2); border-radius: 10px; padding: 10px 14px; word-wrap: break-word; line-height: 1.5; }
.ai-a p { margin: 0 0 8px; } .ai-a p:last-child { margin-bottom: 0; }
.ai-a pre { background: var(--bg0); padding: 10px; border-radius: 6px; overflow-x: auto; white-space: pre; }
.ai-a code { background: var(--bg0); padding: 1px 5px; border-radius: 4px; font-family: Consolas, monospace; font-size: 13px; }
.ai-a pre code { background: none; padding: 0; }
.ai-a h3, .ai-a h4 { margin: 8px 0 4px; }
.ai-a ul, .ai-a ol { margin: 4px 0 8px; padding-left: 22px; }
.ai-a.err { color: var(--red); background: #f23f4315; }
.ai-a.wait { color: var(--text-dim); font-style: italic; }
.ai-form { flex: none; display: flex; gap: 8px; padding: 0 16px 16px; align-items: flex-end; }
.ai-form textarea { background: var(--bg4); min-height: 44px; max-height: 160px; }

/* ---------- Контекстное меню ---------- */
#ctxmenu { position: fixed; z-index: 50; min-width: 220px; background: var(--bg0); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px #000a; }
.cm-title { padding: 6px 8px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item { padding: 7px 8px; border-radius: 4px; cursor: pointer; color: var(--text); }
.cm-item:hover { background: var(--accent); color: #fff; }
.cm-item.danger { color: var(--red); }
.cm-item.danger:hover { background: var(--red); color: #fff; }
.cm-sep { height: 1px; background: var(--bg4); margin: 4px 2px; }
.cm-vol { padding: 6px 8px; display: grid; grid-template-columns: 1fr 44px; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--text-dim); }
.cm-vol span:first-child { grid-column: 1 / -1; }
.cm-vol span:last-child { text-align: right; color: var(--text); }

/* ---------- Окна ---------- */
.modal-back { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal { background: var(--bg3); border-radius: 10px; width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px);
  overflow-y: auto; padding: 20px 22px; box-shadow: 0 10px 40px #000a; }
.modal.wide { width: 680px; }
.modal h2 { margin: 0 0 4px; font-size: 18px; }
.modal h3 { margin: 22px 0 4px; font-size: 13px; text-transform: uppercase; color: var(--text-dim); letter-spacing: .03em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.row > input:not([type=checkbox]):not([type=radio]):not([type=color]) { flex: 1; width: auto; min-width: 140px; }
.row label { margin: 0; text-transform: none; font-size: 14px; color: var(--text); font-weight: 400; letter-spacing: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.meter { position: relative; height: 10px; background: var(--bg0); border-radius: 5px; overflow: hidden; margin-top: 8px; }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text-dim); width: 0; }
.meter-fill.on { background: var(--green); }
.meter-th { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--yellow); }
.kbd { display: inline-block; min-width: 120px; text-align: center; background: var(--bg0); border-radius: 6px; padding: 6px 12px; font-weight: 600; font-size: 13px; }
.hk-row { display: grid; grid-template-columns: 1fr 170px auto auto; gap: 8px; align-items: center; margin-top: 8px; }
.ban-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bg4); }
.ban-row div { flex: 1; min-width: 0; }
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.source { background: var(--bg2); border-radius: 8px; padding: 6px; cursor: pointer; border: 2px solid transparent; }
.source:hover { border-color: var(--accent); }
.source img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; border-radius: 4px; display: block; }
.source div { font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chan-list button { text-align: left; }
.palette { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bg-choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bg-choice { width: 64px; height: 40px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-dim); background-color: var(--bg0); }
.bg-choice.on { border-color: var(--accent); }

/* ---------- Уведомления ---------- */
#toasts { position: fixed; top: 12px; right: 12px; z-index: 95; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--bg0); border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 6px; max-width: 340px; box-shadow: 0 6px 20px #0009; }
.toast.bad { border-color: var(--red); }

#reconnect { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); background: var(--red); color: #fff; padding: 8px 16px;
  border-radius: 8px; z-index: 80; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.spinner { width: 14px; height: 14px; border: 2px solid #fff6; border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Тёплая тёмная тема (в стиле тёмной темы Claude): тёплые серые тона,
   светлый «бумажный» текст, терракотовый акцент, мягкие скругления,
   заголовки шрифтом с засечками.
   ===================================================================== */
body.theme-warm {
  --bg0: #181715;
  --bg1: #1f1e1c;
  --bg2: #262522;
  --bg3: #2c2b28;
  --bg4: #3a3934;
  --hover: #34332f;
  --text: #ece9e1;
  --text-dim: #a19e95;
  --accent: #d97757;
  --accent-h: #c2603f;
  --green: #7fa86a;
  --red: #e0675f;
  --yellow: #e2b65c;
  --mod: #8fb3d9;
  --line: rgba(236, 233, 225, 0.08);
  --radius: 12px;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
body.theme-warm .serif, body.theme-warm .login-card h1, body.theme-warm .modal h2,
body.theme-warm #ch-title, body.theme-warm .cm-title {
  font-family: "Georgia", "Cambria", "Times New Roman", serif; font-weight: 500; letter-spacing: -0.01em;
}
body.theme-warm .login-card h1 { font-size: 30px; }
body.theme-warm .modal h2 { font-size: 21px; }
body.theme-warm #ch-title { font-size: 17px; }

/* Кнопки и поля: мягче и круглее */
body.theme-warm button { border-radius: 9px; }
body.theme-warm button.primary { background: var(--accent); color: #fffaf5; }
body.theme-warm button.primary:hover { background: var(--accent-h); }
body.theme-warm button.secondary { background: var(--bg4); border: 1px solid var(--line); }
body.theme-warm button.secondary:hover { background: #45443e; }
body.theme-warm input, body.theme-warm select, body.theme-warm textarea {
  background: #22211f; border: 1px solid var(--line); border-radius: 10px;
}
body.theme-warm input:focus, body.theme-warm select:focus, body.theme-warm textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #d9775722; }
body.theme-warm input[type=range] { border: 0; box-shadow: none; background: none; }
body.theme-warm .icon-btn { border-radius: 8px; }

/* Вход */
body.theme-warm #login { background: radial-gradient(ellipse at 50% 0%, #3a2a22 0%, var(--bg1) 55%); }
body.theme-warm .login-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px #0008; }
body.theme-warm .logo rect { fill: var(--accent); }

/* Боковая панель и шапка */
body.theme-warm #sidebar { background: var(--bg1); border-right: 1px solid var(--line); }
body.theme-warm .mode-head, body.theme-warm #ch-header { border-bottom: 1px solid var(--line); }
body.theme-warm .mode-tabs, body.theme-warm .pane-tabs { background: var(--bg0); border: 1px solid var(--line); border-radius: 11px; }
body.theme-warm .mode-tabs button, body.theme-warm .pane-tabs button { border-radius: 8px; }
body.theme-warm .mode-tabs button.on[data-mode=game] { background: #4f6b45; }
body.theme-warm .mode-tabs button.on[data-mode=study], body.theme-warm .pane-tabs button.on { background: var(--bg4); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
body.theme-warm .pane-tabs button.on { color: #fff; }
body.theme-warm .ch-row { border-radius: 9px; }
body.theme-warm .channel.current > .ch-row { background: var(--bg3); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
body.theme-warm .user { border-radius: 9px; }
body.theme-warm #me-panel { background: var(--bg0); border-top: 1px solid var(--line); }
body.theme-warm #content { background: var(--bg2); }
body.theme-warm .badge-admin { color: var(--yellow); }
body.theme-warm div.avatar { filter: saturate(0.55) brightness(1.05); }

/* Чат */
body.theme-warm #messages { padding: 16px 22px; }
body.theme-warm .msg-text { line-height: 1.55; }
body.theme-warm .msg-text a, body.theme-warm .chat-file a { color: #e8a184; }
body.theme-warm #chat-form { background: var(--bg3); border: 1px solid var(--line); border-radius: 16px; padding: 4px 8px; box-shadow: 0 4px 18px #0003; }
body.theme-warm #chat-form:focus-within { border-color: #d9775766; }
body.theme-warm #chat-input { border: 0; box-shadow: none; background: none; }
body.theme-warm .chat-file, body.theme-warm .yt-pick { border-radius: 12px; border-color: var(--line); }
body.theme-warm .sysmsg { font-style: normal; }

/* Нейросеть — ответы как карточки */
body.theme-warm .ai-a { background: var(--bg3); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-family: "Georgia", "Cambria", serif; font-size: 15px; line-height: 1.6; }
body.theme-warm .ai-a code, body.theme-warm .ai-a pre { font-family: Consolas, monospace; font-size: 13px; }
body.theme-warm .ai-a pre, body.theme-warm .ai-a code { background: var(--bg0); }
body.theme-warm .ai-q b { color: var(--accent); }
body.theme-warm .ai-form textarea { border-radius: 16px; background: var(--bg3); }
body.theme-warm .ai-status.on i { background: var(--accent); }

/* Окна, меню, уведомления */
body.theme-warm .modal-back { background: #0d0c0bcc; }
body.theme-warm .modal { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
body.theme-warm .modal h3 { color: var(--text-dim); }
body.theme-warm #ctxmenu { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
body.theme-warm .cm-item { border-radius: 8px; }
body.theme-warm .cm-item:hover { background: var(--bg4); color: var(--text); }
body.theme-warm .toast { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; }
body.theme-warm .kbd { background: var(--bg0); border: 1px solid var(--line); }
body.theme-warm .bg-choice { border-radius: 10px; }

/* Доска: панели в тон */
body.theme-warm .bd-tools { background: var(--bg1); border-right: 1px solid var(--line); }
body.theme-warm .bd-tool.on, body.theme-warm .tool.on, body.theme-warm .bd-page.on { background: var(--accent); }
body.theme-warm .bd-props { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
body.theme-warm .bd-top { border-bottom: 1px solid var(--line); }

/* Музыка и видео */
body.theme-warm #music-bar { border-bottom: 1px solid var(--line); }
body.theme-warm .vtile { border-radius: 14px; }
body.theme-warm #videos, body.theme-warm #splitter { background: var(--bg0); }
body.theme-warm ::-webkit-scrollbar-thumb { background: #3a3934; }

/* Автообновление */
.upd-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 14px; overflow: hidden; }
.upd-bar > div { height: 100%; width: 0; background: var(--accent, #5865f2); transition: width .2s; }


/* =====================================================================
   Светлая тема (в стиле светлой темы Claude): тёплый «бумажный» фон,
   тёмный текст, тот же терракотовый акцент. Включается вместе с theme-warm.
   ===================================================================== */
body.theme-light {
  --bg0: #efece3;
  --bg1: #f5f4ee;
  --bg2: #faf9f5;
  --bg3: #ffffff;
  --bg4: #e8e5da;
  --hover: #ebe8de;
  --text: #1f1e1c;
  --text-dim: #6e6c64;
  --accent: #c96442;
  --accent-h: #b3532f;
  --green: #4f7f3c;
  --red: #c4473d;
  --yellow: #a07514;
  --mod: #2f6fa8;
  --line: rgba(31, 30, 28, 0.12);
  color-scheme: light;
}
body.theme-light button.secondary:hover { background: #ddd9cc; }
body.theme-light input, body.theme-light select, body.theme-light textarea { background: #fff; color: var(--text); }
body.theme-light #login { background: radial-gradient(ellipse at 50% 0%, #f6e3d6 0%, var(--bg1) 55%); }
body.theme-light .login-card { box-shadow: 0 18px 50px #5a43301f; }
body.theme-light .channel.current > .ch-row { color: var(--text); }
body.theme-light .pane-tabs button.on { color: var(--text); background: var(--bg3); }
body.theme-light .mode-tabs button.on[data-mode=game] { background: #5f8a4f; color: #fff; }
body.theme-light .cm-title { color: var(--text); }
body.theme-light .modal-back { background: #2b241c55; }
body.theme-light .modal, body.theme-light #ctxmenu, body.theme-light .toast { box-shadow: 0 14px 40px #5a43302a; }
body.theme-light .toast { background: var(--bg3); }
body.theme-light ::-webkit-scrollbar-thumb { background: #d2cdbf; }
body.theme-light .msg-text a, body.theme-light .chat-file a { color: #b3532f; }
body.theme-light #chat-form { box-shadow: 0 4px 18px #5a43301a; }
body.theme-light div.avatar { filter: none; }
body.theme-light .ai-a pre, body.theme-light .ai-a code { background: var(--bg0); }
body.theme-light .upd-bar { background: rgba(0, 0, 0, .08); }
body.theme-light #splitter { border-top-color: var(--line); }
body.theme-light .bd-tools { background: var(--bg1); }
/* Свой фон на окне: светлые полупрозрачные панели вместо тёмных */
body.theme-light.has-bg #sidebar { background: rgba(245, 244, 238, 0.8); }
body.theme-light.has-bg .mode-head, body.theme-light.has-bg #ch-header { background: rgba(250, 249, 245, 0.55); }
body.theme-light.has-bg #me-panel { background: rgba(239, 236, 227, 0.85); }
body.theme-light.has-bg #content { background: rgba(250, 249, 245, 0.6); }
body.theme-light.has-bg #ai-pane { background: rgba(250, 249, 245, 0.7); }
body.theme-light.has-bg #chat-form { background: rgba(255, 255, 255, 0.92); }
body.theme-light.has-bg .msg, body.theme-light.has-bg .sysmsg, body.theme-light.has-bg .user .nick, body.theme-light.has-bg .ch-name { text-shadow: 0 1px 2px #fff9; }

/* Кнопки музыкального плеера: значки цветом темы */
#music-bar .m-btns { display: flex; align-items: center; gap: 2px; flex: none; }
#music-bar .m-btn { background: none; color: var(--text-dim); width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s, transform .08s; }
#music-bar .m-btn svg { width: 19px; height: 19px; }
#music-bar .m-btn:hover { background: var(--hover); color: var(--text); }
#music-bar .m-btn:active { transform: scale(.92); }
#music-bar .m-btn.m-main { background: var(--accent); color: #fff; width: 34px; height: 34px; margin-right: 4px; }
#music-bar .m-btn.m-main:hover { background: var(--accent-h); }
#music-bar .m-btn.m-stop:hover { color: var(--red); }
#music-bar .m-btn.off { color: var(--red); }
#music-bar .m-icon { display: inline-flex; }
#music-bar .m-icon svg { width: 22px; height: 22px; }
#music-bar .m-icon.sc { color: #ff5500; }
#music-bar .m-icon.yt { color: #e62117; }
#music-bar .m-fill { background: var(--accent); }
#music-bar input[type=range] { accent-color: var(--accent); width: 84px; }

/* Окно «Что нового» */
.wn-list { max-height: 60vh; overflow-y: auto; margin-top: 10px; user-select: text; }
.wn-ver + .wn-ver { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #ffffff14); }
.wn-head { font-weight: 700; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.wn-sec { margin-top: 6px; }
.wn-sec ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.wn-sec li + li { margin-top: 3px; }
.wn-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; }
.wn-tag.add { background: var(--green); }
.wn-tag.fix { background: var(--accent); }

/* Настройки: плашки-разделы */
.settings-modal { width: 620px; }
.s-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.s-tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 14px; border-radius: 12px;
  background: var(--bg2); color: var(--text); border: 1px solid var(--line, #ffffff12); transition: background .12s, border-color .12s, transform .08s; }
.s-tile:hover { background: var(--hover); border-color: var(--accent); }
.s-tile:active { transform: scale(.98); }
.s-tile-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; }
.s-tile-ic svg { width: 22px; height: 22px; }
.s-tile-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s-tile-txt b { font-size: 15px; font-weight: 600; }
.s-tile-go { font-size: 22px; color: var(--text-dim); line-height: 1; }
.s-sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.s-sec-head .s-back { padding: 2px 0; margin-left: -2px; }
.s-sec-head h2 { margin: 2px 0 0; }
.s-sec > h3:first-of-type { margin-top: 14px; }
@media (max-width: 640px) { .s-tiles { grid-template-columns: 1fr; } }

/* Своя шапка окна (только в программе) */
:root { --titlebar: #1e1f22; }
body.theme-warm { --titlebar: #181715; }
body.theme-light { --titlebar: #efece3; }
#titlebar { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 0 150px 0 12px; background: var(--titlebar); color: var(--text-dim); font-size: 12.5px; font-weight: 600;
  -webkit-app-region: drag; border-bottom: 1px solid var(--line, #0000); }
#titlebar img { width: 16px; height: 16px; }
body.framed .screen { top: 34px; }
body.framed #toasts, body.framed #reconnect { top: 46px; }
/* Выбор значка программы */
.icon-choices { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.icon-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 8px; border-radius: 12px;
  background: var(--bg2); color: var(--text); border: 2px solid transparent; font-size: 12px; font-weight: 600; }
.icon-choice img { width: 48px; height: 48px; }
.icon-choice:hover { background: var(--hover); }
.icon-choice.on { border-color: var(--accent); }

/* Доска: плашка с фигурами и заливкой */
.bd-main { position: relative; }
.bd-shapes { position: absolute; left: 50px; z-index: 8; display: flex; align-items: center; gap: 2px; padding: 4px 8px 4px 4px;
  background: var(--bg2); border: 1px solid var(--line, #ffffff14); border-radius: 12px; box-shadow: 0 8px 24px #0005; }
.bd-shapes .bd-tool { width: 36px; height: 34px; padding: 0; }
.bd-shapes .sep { width: 1px; height: 22px; background: var(--line, #ffffff22); margin: 0 6px; }
/* Ввод формул и графиков (как в Photomath) */
.pm-display { min-height: 110px; margin-top: 12px; border-radius: 14px; background: var(--bg0); border: 1px solid var(--line, #ffffff12);
  display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; }
.pm-input { margin-top: 10px; font-family: Consolas, monospace; font-size: 14px; }
.pm-graph { width: 100%; height: 220px; margin-top: 12px; border-radius: 12px; background: #fff; display: block; }
.mk { margin-top: 10px; background: var(--bg0); border-radius: 14px; padding: 8px; border: 1px solid var(--line, #ffffff12); }
.mk-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.mk-tab { background: none; color: var(--text-dim); padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 8px; }
.mk-tab.on { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line, #ffffff14); }
.mk-grow { flex: 1; }
.mk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mk-key { background: var(--bg3); color: var(--text); padding: 0; height: 42px; font-size: 17px; font-family: "Cambria Math", "Cambria", "Segoe UI", serif;
  border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line, #ffffff10); }
.mk-key:hover { background: var(--hover); }
.mk-key:active { transform: scale(.96); }
.mk-key.mk-nav { width: 40px; height: 32px; font-size: 15px; font-family: "Segoe UI", sans-serif; }
.mk-key sup, .mk-key sub { font-size: 11px; }
.mk-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: .95; font-size: 12px; }
.mk-frac i { font-style: normal; }
.mk-frac i:first-child { border-bottom: 1.5px solid currentColor; padding: 0 2px; }
.g-fns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.g-fn { display: flex; align-items: center; gap: 8px; }
.g-fn .pm-input { margin-top: 8px; }
.g-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 8px; }
.g-fn .muted { margin-top: 8px; }
.g-fn .muted { white-space: nowrap; }
.g-num { width: 78px !important; flex: none; }
.pm-graph { height: 200px; }

.pm-tips { margin-top: 6px; line-height: 1.6; }
.pm-tips b { font-family: Consolas, monospace; font-weight: 600; color: var(--text); background: var(--bg0); padding: 0 4px; border-radius: 4px; }

/* Браузерная версия: античит FACEIT есть только для Windows */
body.web #btn-faceit-ac { display: none !important; }

/* ---------- Расписание ---------- */
.rs-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line, var(--bg0)); flex-wrap: wrap; }
.rs-group { font-weight: 700; }
.rs-weeknav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; }
.rs-weeknav .icon-btn { font-size: 22px; line-height: 1; width: 34px; height: 34px; }
.rs-weekl { display: flex; flex-direction: column; align-items: center; min-width: 190px; }
.rs-weekl b { font-size: 14px; }
.rs-headr { display: flex; gap: 6px; }
.rs-err { margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--text); font-size: 13px; }
.rs-list { flex: 1; overflow-y: auto; padding: 12px 16px 20px; position: relative; user-select: text; }
.rs-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 10px; color: var(--text-dim); text-align: center; }
.rs-next { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size: 14px; }
.rs-day { margin-bottom: 16px; }
.rs-dayhead { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.rs-dayhead b { font-size: 15px; }
.rs-dayhead span { color: var(--text-dim); font-size: 13px; }
.rs-dayhead i { font-style: normal; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 10px; }
.rs-dayhead .rs-count { margin-left: auto; }
.rs-day.free .rs-dayhead { margin-bottom: 4px; opacity: .75; }
.rs-free { color: var(--text-dim); font-size: 13px; padding: 2px 2px 0; }
.rs-lesson { display: flex; gap: 0; background: var(--bg2); border-radius: 10px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line, transparent); }
.rs-lesson.past { opacity: .5; }
.rs-lesson.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rs-time { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--c); color: #fff; padding: 10px 0; }
.rs-time b { font-size: 15px; }
.rs-time span { font-size: 13px; opacity: .9; border-top: 1px solid #ffffff66; padding-top: 4px; }
.rs-body { flex: 1; min-width: 0; padding: 9px 14px; }
.rs-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.rs-type, .rs-tag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--bg4); color: var(--text); }
.rs-type.t-лек { background: color-mix(in srgb, var(--mod) 25%, transparent); }
.rs-type.t-пр { background: color-mix(in srgb, var(--green) 28%, transparent); }
.rs-type.t-лаб { background: color-mix(in srgb, var(--yellow) 28%, transparent); }
.rs-type.t-экз, .rs-type.t-зач, .rs-tag.warn { background: color-mix(in srgb, var(--red) 28%, transparent); }
.rs-num { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.rs-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.rs-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.rs-note { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.rs-pick { flex: 1; overflow-y: auto; padding: 18px 20px; }
.rs-pick h3 { margin: 0 0 4px; }
.rs-filters { display: flex; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }
.rs-filters input { flex: 1; min-width: 200px; }
.rs-filters select { width: auto; }
.rs-kurs { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chip { background: var(--bg2); color: var(--text); border: 1px solid var(--line, var(--bg4)); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.rs-chip:hover { background: var(--hover); }
.rs-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
body.has-bg #rasp-pane { background: rgba(30, 31, 34, 0.55); }