/* Автор: Codex. Одна панель, адаптация по ширине рабочего окна. */
[hidden] { display: none !important; }
.view-tools { display:flex; flex-direction:column; align-items:stretch; gap:8px; color:var(--muted); font-size:12px; }
.view-picker { min-width:0; }
.header-button { min-height:50px; border:1px solid var(--border); border-radius:999px; padding:0 20px; color:var(--soft); font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
#panel-view { width:100%; display:flex; align-items:center; justify-content:center; gap:12px; }
#panel-view[aria-expanded="true"] { color:var(--accent); border-color:var(--accent); }
#view-menu { position:static; margin-top:8px; width:100%; box-sizing:border-box; padding:6px; border:1px solid var(--border); border-radius:20px; background:#24202e; box-shadow:0 16px 40px #0008; }
#view-menu button { display:block; width:100%; text-align:left; padding:12px 16px; background:none; border:0; border-radius:14px; color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
#view-menu button[aria-checked="true"] { color:var(--accent); background:var(--accent-soft); }
#view-menu button:hover { background:rgba(255,255,255,.08); }
#view-hint { text-align:center; }
#workspace { min-width:0; }
.column-title { font-size:18px; margin:0 0 4px; display:flex; justify-content:space-between; gap:8px; }
.column-title span { color:var(--muted); font-size:14px; }
#pane-mod > .column-title { display:none; }
#moderation-list, #now-controls, #now-desktop { display:flex; flex-direction:column; gap:12px; min-width:0; }
.queue-tools { display:flex; flex-direction:column; gap:10px; }
#queue-search { width:100%; min-width:0; font-size:14px; }
.queue-filters { display:flex; gap:6px; flex-wrap:wrap; padding:3px 2px 7px; }
.queue-filters button { flex:none; white-space:nowrap; }
.queue-filters button { border:1px solid var(--border); background:rgba(255,255,255,.05); border-radius:999px; color:var(--soft); padding:9px 10px; font:inherit; font-size:12px; cursor:pointer; }
.queue-filters button[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:rgba(200,245,59,.4); }
.queue-filters #btn-history { border-color:#ab94ed; color:#d8c8ff; margin-left:auto; }
.queue-comment { font-size:13px; line-height:1.35; color:var(--soft); margin-top:5px; overflow-wrap:anywhere; }
.song-kind { align-self:flex-start; max-width:100%; margin-top:5px; padding:4px 7px; border-radius:8px; background:#24202e; border:1px solid var(--border); color:var(--muted); font:inherit; font-size:11px; }
.song-kind[data-kind="slow"] { color:#cdb5ff; }
.song-kind[data-kind="dance"] { color:var(--accent); }
#app:not(.is-wide) #queue .queue-card { flex-wrap:wrap; }
#app:not(.is-wide) #queue .queue-card .info { flex-basis:calc(100% - 70px); }
#app:not(.is-wide) #queue .reset-likes-btn { margin-left:auto; }
#queue-result { color:var(--muted); font-size:12px; min-height:16px; }
.queue-section { display:flex; flex-direction:column; gap:10px; }
.queue-section h3 { margin:5px 4px 0; font-size:12px; letter-spacing:.07em; color:var(--muted); }
#queue-top h3 { color:var(--accent); }
.queue-rows { display:flex; flex-direction:column; gap:10px; }
#queue-top .queue-rows { border-left:3px solid var(--accent); padding-left:8px; }
.queue-card .photo { display:block; }
#playing-comment { font-size:14px; line-height:1.4; overflow-wrap:anywhere; margin-top:8px; opacity:.85; }
.mod-card .info, .playing-card .info { overflow-wrap:anywhere; }
.preview-card { border-radius:24px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.preview-card h3 { margin:0; font-size:14px; }
.preview-card .btn { font-size:13px; min-height:44px; }
#screen-preview { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#050507; }
#screen-preview iframe { border:0; width:100%; height:100%; position:absolute; inset:0; pointer-events:none; }
#pane-now .set-note { padding:0 6px; }
#app.is-wide { max-width:1920px; padding:0 18px; }
.is-wide .head { padding:18px 12px; display:grid; grid-template-columns:minmax(160px,1fr) auto 38px; align-items:center; gap:16px; }
.is-wide .head-row, .is-wide .head-event { display:contents !important; }
.is-wide .head .logo { font-size:28px !important; grid-column:1; grid-row:1; }
.is-wide .tabs { grid-column:2; grid-row:1; grid-template-columns:1fr; }
.is-wide #tab-mod, .is-wide #tab-dj { display:none; }
.is-wide #tab-set { min-width:130px; padding:0 16px; }
.is-wide #logout { grid-column:3; grid-row:1; }
.is-wide #workspace { display:grid; grid-template-columns:minmax(270px, .9fr) minmax(400px,1.5fr) minmax(250px,.85fr); gap:18px; align-items:start; }
.is-wide #workspace > .list { min-width:0; padding:18px; background:rgba(20,17,29,.65); border:1px solid var(--border); border-radius:28px; }
.is-wide #pane-mod > .column-title { display:flex; }
.is-wide #pane-mod, .is-wide #pane-dj { max-height:calc(100dvh - var(--panel-head-height,84px) - 18px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#665471 transparent; }
.is-wide #pane-now { max-height:calc(100dvh - var(--panel-head-height,84px) - 18px); overflow-y:auto; }
.is-wide #pending-total.unread { color:var(--accent); border-radius:8px; padding:2px 6px; animation:tabPing 1.4s ease-in-out infinite; }
.is-wide #pane-set { max-width:820px; margin:0 auto; }
.is-wide #now-desktop .playing-card { flex-direction:column; align-items:stretch; padding:16px; }
.is-wide #now-desktop .playing-card .photo { width:100%; height:auto; aspect-ratio:1.35; border-radius:18px; }
.is-wide #now-desktop .playing-card .track { font-size:23px; margin-top:8px; }
.is-wide #now-desktop .playing-card .meta { margin-top:4px; }
.is-wide .mod-card { padding:12px; border-radius:22px; }
.is-wide .mod-card .photo { width:64px !important; height:64px !important; }
.is-wide .mod-card .track { font-size:16px; }
.is-wide .stop-flag { font-size:12px; }
.is-wide .queue-card, .is-wide .mod-card { -webkit-backdrop-filter:none; backdrop-filter:none; }
.is-wide .danger-zone { flex-wrap:wrap; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
button:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:380px) { .queue-card { flex-wrap:wrap; } .queue-card .info { flex-basis:calc(100% - 70px); } .queue-card .reset-likes-btn { margin-left:auto; } }
@media (prefers-reduced-motion:reduce) { .tab-btn.ping, .is-wide #pending-total.unread { animation:none; box-shadow:0 0 0 2px var(--accent); } .p-eq span { animation:none; } }

.is-wide .mod-actions .btn { font-size:14px; padding:0 10px; }
.is-wide #rejected-wrap .queue-card { flex-wrap:wrap; }
.is-wide #rejected-wrap .queue-card .info { flex-basis:calc(100% - 70px); }
.is-wide #rejected-wrap .play-btn { margin-left:auto; }

/* Codex, 27.10: действия вечера в настройках — столбец на телефоне, 2×2 на компьютере. */
.settings-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; width:100%; }
.settings-actions .screen-btn { margin:0; width:100%; min-width:0; min-height:56px; text-align:center; justify-content:center; }
.is-wide .settings-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.consents-download { align-self:center; background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:6px; }
.queue-filters #btn-history[aria-pressed="true"] { background:rgba(139,92,255,.24); border-color:#bba5ff; color:#eee4ff; }
.played-card .play-btn { flex-shrink:0; }
.played-badge { color:var(--accent); font-size:11px; font-weight:700; margin-top:5px; }

.column-title #queue-heading { color:inherit; font-size:inherit; }

/* Claude, 08.11.2026 (решение Никиты): мобильный пульт — фильтры одной строкой, вкладки по тексту, «Снова» в строке, база 16 px */
/* Б. Фильтры одной строкой с прокруткой вбок, «Сыграно» не уходит на отдельную строку */
#app:not(.is-wide) .queue-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:3px 16px 7px; }
#app:not(.is-wide) .queue-filters::-webkit-scrollbar { display:none; }
#app:not(.is-wide) .queue-filters #btn-history { margin-left:0; }
/* В. Вкладки: ширина по тексту, чтобы «Модерация · 0» не налезала на соседнюю */
#app:not(.is-wide) .tabs { grid-template-columns:auto auto auto; }
#app:not(.is-wide) .tab-btn { padding:0 12px; }
/* Г. Сыгранная песня: «Снова» справа в той же строке, без пустой строки */
#app:not(.is-wide) #queue .played-card { flex-wrap:nowrap; align-items:center; }
#app:not(.is-wide) #queue .played-card .info { flex-basis:auto; }
/* Д. Счётчик рядом с заголовком по одной линии */
#app:not(.is-wide) .column-title { display:flex; align-items:baseline; justify-content:space-between; }
/* Е. Мобильная база 16 px для мелких надписей пульта */
#app:not(.is-wide) .tab-btn, #app:not(.is-wide) .queue-filters button, #app:not(.is-wide) .queue-card .meta,
#app:not(.is-wide) .played-badge, #app:not(.is-wide) .queue-card .meta *, #app:not(.is-wide) .play-btn,
#app:not(.is-wide) .like-add-btn, #app:not(.is-wide) #queue-total, #app:not(.is-wide) #queue-result { font-size:16px; }
#app:not(.is-wide) .meta { font-size:16px; }
/* узкие экраны (iPhone SE): вкладки помещаются целиком */
@media (max-width:360px) { #app:not(.is-wide) .tab-btn { font-size:14px; padding:0 8px; } }