/* ==========================================================================
   Rust++ — оформление панели и админки.
   Тёмная база, ржавый акцент, всё на системных шрифтах: внешние ресурсы
   запрещены политикой безопасности страницы.
   ========================================================================== */

:root {
    --bg: #0f1216;
    --panel: #171b21;
    --panel-2: #1e232b;
    --panel-3: #262c35;
    --line: #272d37;
    --line-soft: #1f242c;
    --text: #e8ebef;
    --muted: #8d96a3;
    --faint: #626b78;

    --accent: #ce422b;
    --accent-2: #f0803c;
    --green: #46b06a;
    --red: #e0574b;
    --yellow: #dfae42;
    --blue: #4b90e0;
    --purple: #a06be0;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px #00000045;
    --ring: 0 0 0 2px #f0803c66;

    /* Вид карты — значения приходят из настроек пользователя. */
    --grid-color: #ffffff33;
    --grid-width: 0.1;
    --grid-width-edge: 0.16;
    --label-color: #ffffff73;
    --dot-player: 3.3px;
    --dot-note: 3.3px;
    --dot-event: 13px;
    --dot-monument: 6px;
    --tag-size: 10px;
    --tag-bg: rgba(11, 14, 18, .8);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background:
        radial-gradient(900px 520px at 12% -8%, #1b2430 0%, transparent 62%),
        radial-gradient(760px 460px at 96% 2%, #2a1d1a 0%, transparent 58%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font: 14px/1.5 "Segoe UI", Roboto, -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

a { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- общие атомы ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    background: #ffffff08;
    border: 1px solid var(--line);
    white-space: nowrap;
}
.pill.ok { color: #79d79a; background: #46b06a1f; border-color: #46b06a45; }
.pill.warn { color: #f0cd7e; background: #dfae421f; border-color: #dfae4245; }
.pill.bad { color: #ff9d94; background: #e0574b1f; border-color: #e0574b4d; }

.ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    transition: background .14s, border-color .14s, color .14s;
}
.ghost:hover { background: var(--panel-3); border-color: #38404c; color: var(--text); }
.ghost:active { transform: translateY(1px); }

.ghost.accent {
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border-color: #e2694f;
    color: #fff;
    font-weight: 600;
}
.ghost.accent:hover { filter: brightness(1.1); background: linear-gradient(180deg, #d9583f, var(--accent)); }

/* Второстепенная кнопка вне оверлеев (например «карта» в таблице серверов). */
button.secondary {
    padding: 6px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: background .14s, border-color .14s, color .14s;
}
button.secondary:hover { background: var(--panel-3); border-color: #38404c; color: var(--text); }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sub { color: var(--muted); font-size: 12px; }
.empty { padding: 18px 14px; color: var(--faint); text-align: center; font-size: 13px; }
.counter { color: var(--text); font-weight: 500; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c333d; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #39424e; background-clip: content-box; }

/* ---------- экраны входа, ключа, гида ---------- */

.overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: radial-gradient(circle at 50% 24%, #1c222b 0%, #0b0e12 72%);
    z-index: 50;
    overflow: auto;
}

.box {
    width: 360px;
    max-width: 100%;
    padding: 30px 28px;
    background: linear-gradient(180deg, #1b2027 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 1px 0 #ffffff0a inset;
    text-align: center;
}
.box.wide { width: min(580px, 100%); text-align: left; }

.box h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.6px; }
#login .box { width: 404px; }
#login .box h1 { font-size: 34px; }
#login .fineprint { text-align: center; }
.box h1 span { color: var(--accent); }
.box p { color: var(--muted); margin: 8px 0 20px; }

.box textarea {
    width: 100%;
    padding: 12px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: 12px/1.6 ui-monospace, Consolas, monospace;
    resize: vertical;
    outline: none;
    transition: border-color .14s;
}
.box textarea:focus { border-color: var(--accent); box-shadow: none; }

.box button {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
    transition: filter .14s, transform .05s;
}
.box button:hover { filter: brightness(1.12); }
.box button:active { transform: translateY(1px); }
.box button:disabled { filter: grayscale(.6) brightness(.75); cursor: not-allowed; }
.box button.secondary {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--muted);
}
.box button.secondary:hover { background: var(--panel-3); color: var(--text); filter: none; }

/* Базовое правило выше растягивает кнопки формы входа; кнопки внутри содержимого
   оверлеев (гид, карта, карточка юзера) должны быть по размеру текста. */
.box .card-head button,
.box .step-btn,
.box .player-tools button,
.box .user-server button,
.box .row-actions button,
.box .device-remove { width: auto; margin: 0; }
.box .toggle { width: 46px; margin: 0; }

/* Переключатель периода — чип, а не главная кнопка формы. */
.box .act-period {
    width: auto;
    margin: 0;
    padding: 5px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 400;
}
.box .act-period:hover { background: var(--panel-3); color: var(--text); filter: none; }
.box .act-period.on { background: #ce422b26; border-color: #ce422b80; color: #ffb4a6; }

/* Кнопка шага гида — обычная кнопка, а не главная кнопка формы. */
.box .step-btn {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 400;
}
.box .step-btn:hover { background: var(--panel-3); border-color: #38404c; filter: none; }
.box .step-btn.primary {
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border-color: #e2694f;
    color: #fff;
    font-weight: 600;
}
.box .step-btn.primary:hover { filter: brightness(1.12); }

.box code {
    padding: 1px 6px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 12px ui-monospace, Consolas, monospace;
    color: var(--accent-2);
    white-space: nowrap;
}

/* Короткий список возможностей на экране входа: человек должен понимать, куда попал. */
.perks { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
.perks li {
    position: relative;
    padding: 5px 0 5px 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.perks li::before {
    content: '';
    position: absolute;
    left: 4px; top: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.steam-btn {
    display: block;
    padding: 13px;
    background: linear-gradient(180deg, #24344a, #1b2838);
    border: 1px solid #33506e;
    border-radius: var(--radius-sm);
    color: #cfdcea;
    font-weight: 600;
    text-decoration: none;
    transition: filter .14s;
}
.steam-btn:hover { filter: brightness(1.15); color: #fff; }

.wide-btn {
    display: block;
    margin-bottom: 14px;
    padding: 12px;
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: filter .14s;
}
.wide-btn:hover { filter: brightness(1.12); }

.key-buttons { display: flex; gap: 8px; }
.key-buttons .wide-btn { flex: 1; }

.key-steps {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.75;
}
.key-steps li { margin-bottom: 2px; }
.key-steps b { color: var(--text); }

.fineprint { color: var(--faint); font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.form-error { min-height: 20px; margin-top: 10px; color: #ff9d94; font-size: 13px; }
.form-note { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.form-note.ok { color: #79d79a; }
.form-note.warn { color: #f0cd7e; }
.form-note.bad { color: #ff9d94; }
.hint { margin-top: 14px; color: var(--faint); font-size: 12px; line-height: 1.6; }

/* гид «как подключить» */

.help-box { width: min(780px, 100%); max-height: 88vh; overflow: auto; padding: 0; text-align: left; }
.help-box .card-head { position: sticky; top: 0; z-index: 2; background: #1a1f26; padding: 14px 20px; }
.help-box .card-head h2 { font-size: 16px; color: var(--text); text-transform: none; letter-spacing: 0; }
.help-box .card-head button { width: auto; margin: 0 0 0 auto; padding: 6px 11px; background: var(--panel-2); }
.help-box .hint { padding: 0 20px 20px; margin: 0; }

#help-steps { padding: 6px 20px 4px; }

.step { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.step:last-child { border-bottom: 0; }

.step-num {
    flex: none;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}
.step.done .step-num { background: #46b06a24; border-color: #46b06a5c; color: #79d79a; }

.step-body { flex: 1; min-width: 0; }
.step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.step-head b { font-size: 15px; }
.step-text { color: var(--muted); line-height: 1.65; }
.step-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.step-btn {
    padding: 8px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    width: auto;
    margin: 0;
    transition: border-color .14s, background .14s;
}
.step-btn:hover { border-color: #38404c; background: var(--panel-3); }
.step-btn.primary {
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border-color: #e2694f;
    color: #fff;
    font-weight: 600;
}
.step-btn.primary:hover { filter: brightness(1.12); }

/* ---------- шапка ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #141820e6;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.brand { font-size: 19px; font-weight: 700; letter-spacing: -0.4px; }
.brand span { color: var(--accent); }

.server-pick { display: flex; align-items: center; gap: 4px; }
.server-pick .ghost.icon { padding: 7px 9px; font-size: 13px; color: var(--faint); }
.server-pick .ghost.icon:hover { color: #ff9d94; border-color: #e0574b66; }

.server-pick select {
    max-width: 260px;
    padding: 7px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .14s;
}
.server-pick select:hover { border-color: #38404c; }

.stats, .status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stats { flex: 1; min-width: 180px; gap: 6px; }

.stat {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: #ffffff06;
    border: 1px solid var(--line-soft);
}
.stat b { font-size: 14px; font-weight: 600; }
.stat span { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }

.actions { display: flex; gap: 6px; margin-left: auto; }
.ghost.icon { padding: 7px 10px; font-size: 15px; line-height: 1; }

.clock { text-align: right; line-height: 1.2; min-width: 132px; }
.clock .t { font-size: 21px; font-weight: 600; letter-spacing: -0.5px; }
.clock .sub { font-size: 11px; color: var(--muted); }
.clock .bar {
    height: 4px;
    margin-top: 5px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,
        #26314a 0 var(--sunrise, 25%),
        #d9a441 var(--sunrise, 25%) var(--sunset, 80%),
        #26314a var(--sunset, 80%) 100%);
}
.clock .bar i {
    position: absolute;
    top: -1px;
    width: 2px;
    height: 6px;
    background: #fff;
    border-radius: 1px;
    left: var(--now, 50%);
    box-shadow: 0 0 6px #fff9;
}

/* На телефоне шапка занимала пол-экрана: раскладываем её по строкам,
   длинные ряды чипов прокручиваем вбок вместо переноса. */
/* Между планшетом и телефоном подписи не влезают — оставляем иконки. */
@media (max-width: 900px) and (min-width: 681px) {
    .nav-btn { padding: 7px 10px; }
    .nav-btn span:not(.nav-icon) { display: none; }
    .nav-icon { font-size: 16px; }
}

@media (max-width: 680px) {
    .topbar { gap: 8px; padding: 8px 10px; }
    /* На телефоне разделы — во всю ширину и с подписями: это главные экраны. */
    .brand { order: 1; }
    .actions { order: 2; }
    .server-pick { order: 3; flex: 1 1 100%; }
    .nav { order: 4; flex: 1 1 100%; }
    .nav-btn { flex: 1; justify-content: center; padding: 9px 6px; }
    .stats { order: 5; }
    .clock { order: 6; }
    .status { order: 7; }
    .brand { font-size: 17px; }
    .actions { margin-left: auto; }
    .actions .ghost.accent { padding: 7px 11px; font-size: 13px; }

    .server-pick { flex: 1 1 100%; }
    .server-pick select { width: 100%; max-width: none; }

    .stats { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
    .stats::-webkit-scrollbar { height: 0; }
    .stat { flex: none; }

    .clock { flex: none; text-align: right; min-width: 0; }
    .clock .t { font-size: 18px; }

    /* Вложенная прокрутка внутри страницы на телефоне неудобна — пусть карточки растут. */
    .devices { max-height: none; }
    .events { max-height: 460px; }

    .status { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
    .status::-webkit-scrollbar { height: 0; }
    .status .pill { flex: none; }
}

/* Разделы панели. Это не «дополнительные функции», поэтому они выглядят как
   настоящая навигация, а не как ещё три серые кнопки среди служебных иконок. */
.nav {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: #0f1319;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    transition: background .14s, color .14s;
}
.nav-btn:hover { background: var(--panel-2); color: var(--text); }
.nav-btn.on { background: #ce422b2e; color: #ffb4a6; }
.nav-icon { font-size: 14px; line-height: 1; }

/* ---------- сетка страницы ---------- */

.layout {
    display: grid;
    grid-template-columns: minmax(380px, 1.4fr) minmax(300px, 1fr) minmax(280px, .8fr);
    gap: 14px;
    padding: 14px;
    align-items: start;
}

.side { display: grid; gap: 14px; }

/* Ноутбучные 1440 тоже держат три колонки: команда и чат нужны на виду, а не под картой. */
@media (max-width: 1340px) {
    .layout { grid-template-columns: 1.3fr 1fr; }
    .side { grid-column: span 2; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
    .layout { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
    .side { grid-column: span 1; grid-template-columns: 1fr; }
    .topbar { gap: 10px; padding: 10px 12px; }
    .clock { min-width: 0; text-align: left; }
}

.card {
    background: linear-gradient(180deg, #1a1f26 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 #ffffff08 inset, var(--shadow);
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}
.card-head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.card-head input[type="search"], .card-head select {
    margin-left: auto;
    padding: 6px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--text);
    transition: border-color .14s;
}
.card-head input[type="search"]:focus, .card-head select:focus { border-color: var(--accent); box-shadow: none; }

/* ---------- карта ---------- */

.layers { display: flex; gap: 10px 14px; flex-wrap: wrap; }
.card-head .layers { margin-left: auto; }
/* Главный блок панели: вкладки вместо заголовка. */
.work .map-toolbar { padding: 10px 14px; }
.work .map-toolbar .menu { margin-left: auto; }

.tabs { gap: 2px; padding: 6px 8px; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: none;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .14s, color .14s;
}
.tab:hover { background: #ffffff08; color: var(--text); }
.tab.on { background: #ce422b2e; color: #ffb4a6; }

/* Все вкладки живут в колонке карты, поэтому содержимое подстраивается под ширину
   самого блока, а не окна: на широком экране колонка узкая, и медиазапросы тут врут. */
.tab-body { container-type: inline-size; }

/* Свёрнутый блок превращается в полоску вкладок во всю ширину, остальное поднимается. */
.work.folded .tab-body { display: none; }
.work.folded { grid-column: 1 / -1; }
.layout.folded { grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr); }

.fold { margin-left: auto; font-size: 12px; line-height: 1; }

.tab-head { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; }
.tab-body { min-height: 200px; }
#tab-camera, #tab-activity, #tab-commands, #tab-scenarios { max-height: 78vh; overflow: auto; }

/* На телефоне подписи важнее: одни иконки не читаются. Строка вкладок при нехватке
   места просто прокручивается вбок. */
@media (max-width: 560px) {
    .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0; padding: 6px; }
    .tabs::-webkit-scrollbar { height: 0; }
    .tab { flex: none; gap: 5px; padding: 8px 9px; font-size: 12px; }
}
.layers label {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.layers label:hover { color: var(--text); }
.layers input { accent-color: var(--accent); width: 14px; height: 14px; }

.zoom { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.zoom .ghost { padding: 5px 9px; }

.menu { position: relative; }
.menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 320px;
    max-height: 72vh;
    overflow: auto;
    padding: 14px;
    background: #1b2028;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 30;
}
.menu-title {
    color: var(--faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 6px;
}
.menu-panel button.secondary {
    width: 100%;
    margin-top: 12px;
    padding: 9px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
}
.menu-panel button.secondary:hover { background: var(--panel-3); color: var(--text); }
.menu-panel .setting-row { padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.menu-panel .setting-row:last-child { border-bottom: 0; }

/* У ползунков подпись длинная — уводим её на строку выше, иначе она рвётся на куски. */
.menu-panel .setting-row:has(input[type="range"]) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
}
.menu-panel .setting-row:has(input[type="range"]) > span:first-child {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
}
.menu-panel .setting-row input[type="range"] { max-width: none; width: 100%; }
.menu-panel .setting-row input[type="color"] { margin-left: auto; }

.map-wrap {
    position: relative;
    overflow: hidden;
    background: #0b1620;
    aspect-ratio: 1 / 1;
    cursor: grab;
}
.map-wrap.dragging { cursor: grabbing; }
.map-inner { position: absolute; inset: 0; transform-origin: 0 0; }
.map-inner img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

svg.grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
svg.grid line { stroke: var(--grid-color); stroke-width: var(--grid-width); }
svg.grid line.edge { stroke-width: var(--grid-width-edge); }
svg.grid text { fill: var(--label-color); font-size: 0.8px; font-family: "Segoe UI", system-ui, sans-serif; }
svg.grid rect.cell { fill: #ce422b1f; stroke: #ce422baa; stroke-width: 0.12; }

.markers { position: absolute; inset: 0; }

/* Якорь нулевого размера ровно в координате: размер подписи не должен двигать точку. */
.marker { position: absolute; width: 0; height: 0; pointer-events: auto; }
.marker .dot {
    position: absolute;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1.5px solid #000000a6;
    box-shadow: 0 0 6px #00000073;
}
.marker .tag {
    position: absolute;
    left: 8px;
    top: 0;
    transform: translateY(-50%);
    font-size: var(--tag-size);
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--tag-bg);
    border: 1px solid var(--line);
    white-space: nowrap;
}

/* Отступ подписи считаем от радиуса своей точки, чтобы она не наезжала на неё. */
.marker.m-team .tag, .marker.m-player .tag, .marker.m-dead .tag { left: calc(var(--dot-player) / 2 + 4px); }
.marker.m-note .tag { left: calc(var(--dot-note) / 2 + 4px); }
.marker.m-mon .tag { left: calc(var(--dot-monument) / 2 + 4px); }
.marker.m-cargo .tag, .marker.m-heli .tag, .marker.m-ch47 .tag,
.marker.m-crate .tag, .marker.m-explosion .tag, .marker.m-vending .tag { left: calc(var(--dot-event) / 2 + 4px); }

.marker.m-mon .dot { width: var(--dot-monument); height: var(--dot-monument); background: #cfd6e0; opacity: .8; }
.marker.m-mon .tag { opacity: .72; }

.marker.m-team .dot, .marker.m-player .dot, .marker.m-dead .dot {
    width: var(--dot-player); height: var(--dot-player);
    border-width: .5px;
    box-shadow: 0 0 3px #000000b3;
}
.marker.m-note .dot {
    width: var(--dot-note); height: var(--dot-note);
    border-width: .5px;
    box-shadow: 0 0 3px #000000b3;
}
.marker.m-team .dot { background: var(--green); }
.marker.m-player .dot { background: #ffffff; }
.marker.m-dead .dot { background: #5a626d; }
.marker.m-cargo .dot { background: var(--blue); width: var(--dot-event); height: var(--dot-event); }
.marker.m-heli .dot { background: var(--red); width: var(--dot-event); height: var(--dot-event); }
.marker.m-ch47 .dot { background: var(--purple); width: calc(var(--dot-event) * .92); height: calc(var(--dot-event) * .92); }
.marker.m-crate .dot { background: var(--yellow); width: calc(var(--dot-event) * .78); height: calc(var(--dot-event) * .78); }
.marker.m-explosion .dot { background: var(--accent-2); width: calc(var(--dot-event) * .92); height: calc(var(--dot-event) * .92); }
.marker.m-vending .dot { background: #35b3a1; width: calc(var(--dot-event) * .55); height: calc(var(--dot-event) * .55); }
.marker.m-radius .dot { background: #ffffff2e; border-color: #ffffff66; width: calc(var(--dot-event) * 1.4); height: calc(var(--dot-event) * 1.4); }
.marker.m-note .dot { background: #ff6ec7; }
.marker.m-note.m-death .dot { background: #cfd6e0; }
.marker.m-note.m-leader .dot { box-shadow: 0 0 0 1px #ff6ec788; }

.map-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12px;
}

/* ---------- устройства ---------- */

.devices {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 10px;
    max-height: 74vh;
    overflow: auto;
}

.group-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 2px;
}
.group-head .bulk { margin-left: auto; display: flex; gap: 6px; }
.group-head button {
    padding: 4px 9px;
    font-size: 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    transition: color .14s, border-color .14s;
}
.group-head button:hover { color: var(--text); border-color: var(--accent); }

.device {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    transition: border-color .14s, background .14s;
}
.device:hover { border-color: #333b46; }
.device.alarm-on {
    border-color: #e0574b80;
    background: linear-gradient(180deg, #2a1c1b, var(--panel-2));
    animation: alarm 1.8s ease-in-out infinite;
}
@keyframes alarm {
    0%, 100% { box-shadow: 0 0 0 0 #e0574b00; }
    50% { box-shadow: 0 0 0 3px #e0574b26; }
}
.device.broken { opacity: .62; }

.device-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Имя забирает свободное место: иначе тумблер и крестик сплющивали его в столбик. */
.device-name { flex: 1 1 auto; min-width: 0; font-weight: 600; cursor: text; }
.device-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.device-id { flex: none; color: var(--faint); font-size: 11px; font-family: ui-monospace, Consolas, monospace; }
.device-meta { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }

.device-remove {
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--faint);
    font-size: 15px;
    line-height: 1;
    width: auto;
    margin: 0;
    transition: color .14s;
}
.device-remove:hover { color: var(--red); }

.device-error { margin-top: 7px; color: #ff9d94; font-size: 12px; line-height: 1.5; }

.toggle {
    width: 46px; height: 25px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: #2a303a;
    position: relative;
    transition: background .16s, border-color .16s;
    flex: none;
}
.toggle i {
    position: absolute;
    top: 2px; left: 2px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: #8d96a3;
    transition: transform .16s, background .16s;
}
.toggle.on { background: #46b06a3d; border-color: #46b06a80; }
.toggle.on i { transform: translateX(21px); background: var(--green); }
.toggle:disabled { opacity: .5; cursor: not-allowed; }

.bar { height: 6px; border-radius: 4px; background: #2a303a; overflow: hidden; margin-top: 9px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.items {
    margin-top: 9px;
    display: grid;
    gap: 3px 10px;
    max-height: 180px;
    overflow: auto;
    font-size: 12px;
}
.items div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 2px; border-bottom: 1px dotted #2a303a; }
.items b { color: var(--accent-2); font-weight: 600; }

/* ---------- команда, чат, события ---------- */

.team { padding: 8px 14px 14px; display: grid; gap: 2px; }

.member {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: background .14s;
}
.member:hover { background: #ffffff06; }
.member .who { font-weight: 600; cursor: text; }
.member .who:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.member .grid {
    position: static;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: #ffffff08;
    color: var(--muted);
    font: 12px ui-monospace, Consolas, monospace;
}

.dot-status { width: 9px; height: 9px; border-radius: 50%; background: #4a525d; flex: none; }
.dot-status.online { background: var(--green); box-shadow: 0 0 8px #46b06a70; }
.dot-status.dead { background: var(--red); }

.chat {
    padding: 12px 14px;
    height: 280px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.chat .msg { display: flex; gap: 7px; align-items: baseline; }
.chat .t { color: var(--faint); font-size: 11px; font-family: ui-monospace, Consolas, monospace; flex: none; }
.chat .n { font-weight: 600; flex: none; }
.chat .m { word-break: break-word; color: #dfe4ea; }
.chat .msg.local { opacity: .72; font-style: italic; }

.chat-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.chat-form input {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .14s;
}
.chat-form input:focus { border-color: var(--accent); box-shadow: none; }
.chat-form button {
    padding: 9px 16px;
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
    transition: filter .14s;
}
.chat-form button:hover { filter: brightness(1.12); }

.events {
    padding: 10px 14px 14px;
    max-height: 340px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.event {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 5px 8px 5px 10px;
    margin: 0 -8px;
    border-left: 2px solid var(--line);
    border-radius: 0 8px 8px 0;
    transition: background .14s;
}
.event:hover { background: #ffffff06; }
.event .t { color: var(--faint); font-size: 11px; font-family: ui-monospace, Consolas, monospace; flex: none; }
.event b { font-weight: 600; }
.event.alarm { border-color: var(--red); }
.event.death { border-color: #8a4b4b; }
.event.login { border-color: var(--green); }
.event.switch { border-color: var(--blue); }
.event.pairing { border-color: var(--accent-2); }
.event.system { border-color: #4a525d; }
.event.error { border-color: var(--yellow); }

/* ---------- камеры ---------- */

#tab-camera .hint { padding: 0 20px 18px; margin: 12px 0 0; }

.cam-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px 0; }
.cam-form .cmd-field { flex: 1; min-width: 160px; }
.cam-form .cmd-field input { width: 100%; font-family: inherit; }
.cam-form button {
    padding: 8px 16px;
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
}
.cam-form button:hover { filter: brightness(1.1); }
.cam-form button.secondary {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 400;
}
.cam-form button.secondary:hover { background: var(--panel-3); color: var(--text); filter: none; }

.cam-toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.cam-toggle input { width: 15px; height: 15px; accent-color: var(--accent); }
.cam-toggle:hover { color: var(--text); }

.cam-recent { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0; }
.cam-chip {
    width: auto;
    margin: 0;
    padding: 4px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font: 12px ui-monospace, Consolas, monospace;
}
.box .cam-chip:hover { background: var(--panel-3); color: var(--text); filter: none; }

/* Кадр приходит маленьким (обычно 640×480) — растягиваем по ширине без сглаживания. */
.cam-stage {
    position: relative;
    margin: 14px 20px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #0c0e12;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.cam-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}
.cam-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    color: var(--faint);
    font-size: 13px;
    background: #0c0e12;
}

.cam-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 20px 0; }

@container (max-width: 520px) {
    .cam-form, .cam-recent, .cam-controls, .cam-entities { padding-left: 14px; padding-right: 14px; }
    .cam-stage { margin-left: 14px; margin-right: 14px; }
    .cam-key { min-width: 34px; padding: 7px 9px; }
}
.cam-controls .sub { margin-right: 4px; }
.cam-key {
    width: auto;
    margin: 0;
    min-width: 40px;
    padding: 7px 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 400;
}
.cam-key:hover { background: var(--panel-3); border-color: #38404c; }
.cam-key:active { background: #ce422b26; border-color: #ce422b80; }

.cam-entities { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0; min-height: 26px; }

/* ---------- активность команды ---------- */

#tab-activity .hint { padding: 0 20px 18px; margin: 0; }

#activity-body { padding: 6px 20px 4px; }

.act-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.act-head .menu-title { margin: 0; }

.act-periods { display: flex; gap: 6px; flex-wrap: wrap; }

/* Выбор сервера: у каждого своя команда, свои часы и свои смерти. */
.act-server {
    margin-left: auto;
    max-width: 260px;
    padding: 6px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    outline: none;
}
.act-server:hover { border-color: #38404c; }
.act-period {
    padding: 5px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 12px;
    transition: background .14s, border-color .14s, color .14s;
}
.act-period:hover { color: var(--text); border-color: #38404c; }
.act-period.on { background: #ce422b26; border-color: #ce422b80; color: #ffb4a6; }

.act-table { display: grid; }

.act-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.6fr) minmax(110px, 1fr) 90px 90px 74px;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: background .14s;
}
.act-row:hover { background: #ffffff06; }
.act-row.act-header {
    cursor: default;
    color: var(--faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 8px;
}
.act-row.act-header:hover { background: none; }
.act-row.act-online b { color: #9fe0b4; }

.act-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.act-who .dot-status { align-self: center; }
.act-num { font-variant-numeric: tabular-nums; }
.act-afk { color: var(--muted); }

/* Доля активного времени: зелёное — двигался, серое — стоял. */
.act-bar { height: 4px; margin-top: 5px; border-radius: 3px; background: #39414d; overflow: hidden; }
.act-bar i { display: block; height: 100%; background: var(--green); }

.act-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    padding: 12px 10px 16px;
    margin: 0 -8px 6px;
    background: #ffffff05;
    border-radius: var(--radius-sm);
}
.act-detail-col .menu-title { margin: 0 0 6px; }
.act-line { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; }
.act-line .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-line b { margin-left: auto; flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }

.act-holder { margin-top: 4px; }
.act-holder .act-row { grid-template-columns: minmax(120px, 1.4fr) minmax(96px, 1fr) 80px 80px 64px; }

/* Узкая колонка: таблица складывается в карточки с подписями вместо шапки. */
@container (max-width: 700px) {
    .act-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 8px; }
    .act-row.act-header { display: none; }
    .act-who { grid-column: 1 / -1; }
    .act-num[data-label]::before {
        content: attr(data-label) ': ';
        color: var(--faint);
        font-size: 12px;
    }
    .act-bar { max-width: 120px; }
}

@container (max-width: 380px) {
    .act-row { grid-template-columns: 1fr; }
    .act-details { grid-template-columns: 1fr; }
}

/* ---------- команды в игровом чате ---------- */



#commands-body { padding: 4px 20px 22px; }

.cmd-lead { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 14px 0 4px; }
#commands-body .menu-title {
    margin: 20px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-weight: 600;
}

/* Поле слова: знак вызова нарисован рядом, чтобы его не вводили руками. */
.cmd-field {
    display: inline-flex;
    align-items: center;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px 0 10px;
    transition: border-color .14s;
}
.cmd-field:focus-within { border-color: var(--accent); }
.cmd-bang { color: var(--accent-2); font-weight: 600; font-family: ui-monospace, Consolas, monospace; }
.cmd-field input {
    width: 108px;
    padding: 6px 2px;
    background: none;
    border: 0;
    outline: none;
    color: var(--text);
    font-family: ui-monospace, Consolas, monospace;
}

.cmd-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.cmd-row:last-child { border-bottom: 0; }

/* В узкой колонке слово команды уезжает под описание, иначе текст сжимается в столбик. */
@container (max-width: 560px) {
    .cmd-row { grid-template-columns: auto 1fr; gap: 8px 10px; }
    .cmd-row .cmd-text { grid-column: 1 / -1; }
    .cmd-switch { align-items: flex-start; }
    .cmd-switch-name { min-width: 0; flex: 1 1 100%; }
}
.cmd-row.off { opacity: .5; }
.cmd-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.cmd-text { min-width: 0; }
.cmd-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmd-args { color: var(--faint); font-size: 12px; font-family: ui-monospace, Consolas, monospace; }
.cmd-text .sub { line-height: 1.5; margin-top: 2px; }

.cmd-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
.cmd-switch:last-child { border-bottom: 0; }
.cmd-switch-name { flex: 1; min-width: 160px; display: flex; align-items: baseline; gap: 8px; }

.cmd-timer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
}
.cmd-timer:last-child { border-bottom: 0; }

/* Строка команды прямо в карточке переключателя. */
.device-cmd { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.device-cmd .cmd-field { flex: 1; min-width: 0; }
.device-cmd .cmd-field input { width: 100%; }
.device-cmd select {
    padding: 6px 8px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    outline: none;
    transition: border-color .14s, color .14s;
}
.device-cmd select:hover { color: var(--text); border-color: #38404c; }

.box .cmd-field input, .box .device-cmd select { width: auto; margin: 0; }
.box .device-cmd .cmd-field input { width: 100%; }

/* Строка своего сообщения у сигнализации: знак тревоги показывает, как оно начнётся. */
.alarm-cmd .cmd-field input { font-family: inherit; }
.alarm-cmd .cmd-bang { font-family: inherit; }
.box .cmd-hint, .cmd-hint {
    padding: 6px 8px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .14s, color .14s;
}
.box .cmd-hint:hover, .cmd-hint:hover { color: var(--accent-2); border-color: #38404c; }

/* Звонок по сигнализации: подпись слева, переключатель справа, как у свитчей. */
.alarm-options .device-cmd { margin-top: 9px; }
.alarm-call {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 7px 10px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.alarm-call-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.alarm-call-label .sub { font-size: 11px; }
.alarm-call-label .warn-text { color: var(--amber, #e0a040); }
.box .alarm-call .toggle { flex: none; }

/* ---------- настройки ---------- */

.setting-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.setting-row span:first-child { flex: 1; }
.setting-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.setting-row input[type="range"] { flex: 1; max-width: 190px; accent-color: var(--accent); }
.setting-row input[type="text"] {
    width: 92px;
    padding: 6px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    outline: none;
}
.setting-row input[type="color"] {
    width: 34px; height: 26px; padding: 0;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 7px;
}
.setting-row .value { width: 44px; text-align: right; color: var(--muted); font-size: 12px; }
.setting-block { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.setting-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.setting-buttons button { margin-top: 8px; width: auto; flex: 1; min-width: 130px; }

.code {
    margin-top: 12px;
    padding: 12px;
    background: #0d1014;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font: 13px/1.6 ui-monospace, Consolas, monospace;
    text-align: center;
    color: var(--accent-2);
    word-break: break-all;
    white-space: pre-line;
}
.code a { display: inline-block; margin-top: 6px; }

/* ---------- всплывашка ---------- */

.toast {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    max-width: min(560px, 92vw);
    padding: 11px 18px;
    background: #232933;
    border: 1px solid var(--line);
    border-radius: 99px;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity .18s, transform .18s;
    pointer-events: none;
    z-index: 60;
    text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: #e0574b80; color: #ffb4ad; }
.toast.warn { border-radius: 14px; border-color: #dfae4280; color: #f3d79b; }

/* ==========================================================================
   Админка
   ========================================================================== */

.admin { min-height: 100%; }
.admin-layout { display: grid; gap: 14px; padding: 14px; }
.admin .topbar a.ghost { text-decoration: none; }

.hint-inline { margin-left: auto; color: var(--faint); font-size: 12px; }
.reg-toggle, .prefix-field { gap: 7px; color: var(--muted); font-size: 12px; padding: 0; }
.reg-toggle { margin-left: auto; }
.prefix-field { margin-left: auto; }
.prefix-field input { width: 74px; text-align: center; }
.reg-toggle + .prefix-field, .prefix-field + .reg-toggle { margin-left: 0; }

/* Места, коды и очередь. */
.seats { padding: 14px; }
.seat-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seat-row .setting-row { padding: 0; gap: 8px; }
.seat-row input[type="number"] {
    width: 90px;
    padding: 6px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    outline: none;
}
.seat-row button { padding: 6px 12px; }

.seat-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 16px;
}
.seat-col .menu-title { margin-bottom: 6px; }

.seat-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.seat-line:last-child { border-bottom: 0; }
.seat-line .sub { flex: 1; min-width: 120px; }
.seat-line b { cursor: pointer; }
.seat-line button {
    padding: 4px 9px;
    font-size: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
}
.seat-line button:hover { color: var(--text); border-color: #38404c; }
.seat-line button.danger:hover { border-color: var(--red); color: #ffb4ad; }

.hint-inline.warn { color: #f0cd7e; }

.table-wrap { overflow-x: auto; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--faint);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.blocked { opacity: .55; }
.admin-table tr.clickable, .admin-table td.clickable { cursor: pointer; }
.admin-table tr.clickable:hover { background: #ffffff08; }
.admin-table td.clickable:hover { color: var(--accent-2); }
.admin-table .sub { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions button {
    padding: 5px 10px;
    font-size: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    transition: color .14s, border-color .14s;
}
.row-actions button:hover { color: var(--text); border-color: #38404c; }
.row-actions button.danger:hover { border-color: var(--red); color: #ffb4ad; }

/* карта сервера в админке */

.map-box { width: min(1240px, 100%); text-align: left; padding: 0; overflow: hidden; }
.map-box .card-head { padding: 13px 18px; background: #1a1f26; }
.map-box .card-head h2 { font-size: 15px; color: var(--text); text-transform: none; letter-spacing: 0; }
.map-box .card-head button { width: auto; margin: 0 0 0 auto; padding: 6px 11px; background: var(--panel-2); }

.map-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line-soft);
    flex-wrap: wrap;
}
.map-toolbar .layers { margin-left: 0; }
.map-toolbar .zoom { margin-left: auto; }

.map-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(250px, .7fr);
    gap: 14px;
    padding: 14px 18px 18px;
}
@media (max-width: 980px) { .map-columns { grid-template-columns: 1fr; } }

.map-box .map-wrap { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.map-side { max-height: 70vh; overflow: auto; }
.map-side .menu-title { margin: 10px 0 6px; }
.map-side .menu-title:first-child { margin-top: 0; }

.player-tools { display: flex; gap: 6px; margin-bottom: 8px; }
.player-tools input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    outline: none;
}
.player-tools input:focus { border-color: var(--accent); box-shadow: none; }
.player-tools button {
    width: auto;
    margin: 0;
    padding: 7px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
}
.player-tools button:hover { color: var(--text); border-color: #38404c; }

.map-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    font-size: 13px;
    transition: background .14s;
}
.map-player:hover { background: #ffffff06; }
.map-player.off { opacity: .45; }
.map-player input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.map-player .who { font-weight: 600; }
.map-player .grid {
    position: static;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 6px;
    background: #ffffff08;
    color: var(--muted);
    font: 12px ui-monospace, Consolas, monospace;
}

/* карточка пользователя */

.user-box { max-height: 88vh; overflow: auto; padding: 0; width: min(680px, 100%); }
.user-box .card-head { position: sticky; top: 0; background: #1a1f26; z-index: 2; padding: 13px 18px; }
.user-box .card-head h2 {
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font: 15px ui-monospace, Consolas, monospace;
}
.user-box .card-head button { width: auto; margin: 0 0 0 auto; padding: 6px 11px; background: var(--panel-2); }
#user-body { padding: 4px 18px 20px; }

#user-body .menu-title {
    margin: 16px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-weight: 600;
}
#user-body > .menu-title:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }

.user-section { padding: 4px 0 8px; }
.user-line { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 13px; }
.user-label { min-width: 176px; color: var(--muted); }
.user-line .toggle { margin-left: 8px; }
.user-server { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.user-server:last-child { border-bottom: 0; }
.user-server .sub { margin-left: 8px; }
.user-server button {
    margin-top: 8px;
    padding: 5px 10px;
    font-size: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    width: auto;
}
.user-server button:hover { color: var(--text); border-color: #38404c; }
.user-devices { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* Чат и события пользователя: две колонки со своей прокруткой. */
.user-line select {
    flex: 1;
    min-width: 0;
    max-width: 340px;
    padding: 6px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    outline: none;
}
.user-line select:hover { border-color: #38404c; }

.log-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
@media (max-width: 720px) { .log-columns { grid-template-columns: 1fr; } }

.log-col {
    max-height: 300px;
    overflow: auto;
    padding: 10px 12px;
    background: #ffffff05;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}
.log-col .menu-title { position: sticky; top: -10px; background: #1b2027; margin: -10px -12px 6px; padding: 8px 12px; }

.log-line {
    display: flex;
    gap: 7px;
    align-items: baseline;
    padding: 3px 0 3px 7px;
    border-left: 2px solid transparent;
    font-size: 12px;
}
.log-line .sub { flex: none; font-family: ui-monospace, Consolas, monospace; }
.log-line b { flex: none; font-weight: 600; }
.log-text { color: var(--muted); word-break: break-word; }
.log-line.alarm { border-color: var(--red); }
.log-line.death { border-color: #8a4b4b; }
.log-line.login { border-color: var(--green); }
.log-line.logout { border-color: #4a525d; }
.log-line.switch { border-color: var(--blue); }
.log-line.pairing { border-color: var(--accent-2); }
.log-line.error { border-color: var(--yellow); }

/* ---------- группы переключателей ---------- */

/* Пунктир отличает группу от настоящего устройства с первого взгляда. */
.group-card { border-style: dashed; border-color: #3a4350; }
.group-card .device-name::before { content: '▦ '; color: var(--accent-2); }
.group-empty {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.group-members, .device-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 4px 3px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}
.chip.on { color: var(--text); border-color: #46b06a55; }
.chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.chip.on .chip-dot { background: var(--green); }
.box .chip-x, .chip-x {
    width: auto;
    margin: 0;
    padding: 0 5px;
    background: none;
    border: 0;
    color: var(--faint);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.chip-x:hover { color: var(--red); }
.box .chip-add, .chip-add {
    width: auto;
    margin: 0;
    padding: 3px 10px;
    background: none;
    border-style: dashed;
    color: var(--accent-2);
    cursor: pointer;
}
.chip-add:hover { border-color: var(--accent); }

.group-picker {
    display: grid;
    gap: 2px;
    max-height: 240px;
    overflow: auto;
    margin-top: 9px;
    padding: 6px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.group-pick { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.group-pick:hover { background: var(--panel-3); }
.group-pick input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.group-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.box .group-add, .group-add {
    width: auto;
    margin: 0;
    padding: 3px 8px;
    background: none;
    border: 1px dashed var(--line);
    border-radius: 99px;
    color: var(--accent-2);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.group-add:hover { border-color: var(--accent); }

/* ---------- сценарии ---------- */

#tab-scenarios .tab-head .sc-btn { margin-left: auto; }
#scenarios-body { padding: 4px 20px 22px; }

.sc-subtitle {
    margin: 20px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sc-editor > .sc-subtitle:first-child { border-top: 0; padding-top: 0; margin-top: 12px; }

.sc-btn {
    width: auto;
    margin: 0;
    padding: 6px 11px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .14s, border-color .14s, background .14s;
}
.sc-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.sc-btn:disabled { opacity: .5; cursor: not-allowed; }
.sc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sc-btn.primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

.sc-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sc-template {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: auto;
    margin: 0;
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px dashed #3a4350;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.sc-template:hover { border-color: var(--accent); background: #ce422b14; }
.sc-template small { color: var(--muted); font-size: 11px; }

.sc-card {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.sc-card.off { opacity: .62; }
.sc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sc-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.5; }
.sc-tag {
    flex: none;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #ce422b2e;
    color: #ffb4a6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}
.sc-tag.then { background: #46b06a26; color: #8fdca8; }
.sc-problems { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sc-meta { margin-top: 8px; color: var(--faint); font-size: 12px; line-height: 1.5; }

.sc-editor { display: grid; gap: 10px; }
.sc-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
.sc-label { color: var(--muted); font-size: 13px; }
.sc-when { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-when > * { flex: 1 1 170px; }
.sc-editor input, .sc-editor select {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 7px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.sc-editor input:focus, .sc-editor select:focus { border-color: var(--accent); }
.sc-inline { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.sc-inline input { width: 80px; flex: none; }

.sc-actions { display: grid; gap: 6px; }
.sc-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}
.sc-step {
    flex: none;
    width: 20px; height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--panel-3);
    color: var(--muted);
    font-size: 11px;
}
.sc-action-kind { flex: none; min-width: 96px; color: var(--muted); font-size: 12px; }
.sc-action > input, .sc-action > select { flex: 1 1 150px; width: auto; }
.sc-grow { flex: 1 1 150px; }
.sc-add { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@container (max-width: 520px) {
    .sc-row { grid-template-columns: 1fr; gap: 4px; }
    .sc-action-kind { min-width: 0; }
}

/* ---------- охранник камер ---------- */

.guard {
    margin: 4px 20px 20px;
    padding: 14px 16px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.guard-head { display: flex; align-items: center; gap: 10px; }
.guard-head b { flex: 1; }
.box .guard-head .toggle, .guard-head .toggle { flex: none; }
.guard-lead { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.guard-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.guard-add input {
    flex: 1 1 150px;
    min-width: 0;
    margin: 0;
    padding: 7px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.guard-add input:focus { border-color: var(--accent); }
.guard-note { margin-top: 12px; color: var(--muted); font-size: 12px; }
.guard-cam { margin-top: 8px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 8px; }
.guard-cam.now { border-color: #46b06a80; }
.guard-cam.broken { border-color: #e0574b66; }
.guard-cam-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guard-cam-head b { flex: 1 1 auto; min-width: 0; }
.guard-event { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.guard-frame { display: block; width: 100%; margin-top: 8px; border-radius: 6px; image-rendering: pixelated; }

/* ---------- онлайн на сервере и слежка ---------- */

#tab-online .tab-head .toggle { margin-left: auto; flex: none; }
.ow { padding: 12px 20px 20px; }
.ow-settings { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.ow-label { width: 84px; color: var(--muted); font-size: 12px; }
.ow-radio, .ow-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; cursor: pointer; }
.ow-radio.off { color: var(--faint); cursor: not-allowed; }
.ow-radio input, .ow-check input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.ow-line select, .ow-check input[type="text"], .ow-filter input {
    padding: 5px 8px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.ow-check input[type="text"] { width: 76px; }
.ow-line select:focus, .ow-check input[type="text"]:focus, .ow-filter input:focus { border-color: var(--accent); }
.ow-server { margin-top: 12px; }
.ow-server-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ow-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ow-stat { padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; }
.ow-stat b { display: block; font-size: 20px; font-weight: 650; }
.ow-stat span { color: var(--muted); font-size: 12px; }
.ow-note { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ow-note.warn { color: #ff9d94; }
.ow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; margin-top: 8px; }
/* Папки Discord — отдельным блоком под колонками, карточками в несколько столбцов. */
.ow-dc-block { margin-top: 14px; }
.ow-dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.ow-dc-folder { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.ow-dc-head {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; background: var(--panel-2); font-size: 13px;
}
.ow-dc-head b { overflow-wrap: anywhere; }
.ow-dc-head .counter { margin-left: auto; }
.ow-dc-list { max-height: 320px; overflow: auto; }
.ow-dc-folder .ow-watch { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; margin: 0; }
.ow-add { margin-top: 4px; }
.ow-watch { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.ow-watch b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-watch .sub { flex: 1; text-align: right; }
.ow-watch.on { border-color: #46b06a66; }
.ow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-3); flex: none; }
.ow-watch.on .ow-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.ow-events-title { display: flex; align-items: center; gap: 10px; }
.ow-events-title .ow-check { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.ow-events { max-height: 360px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.ow-event { display: flex; gap: 8px; align-items: baseline; padding: 5px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ow-event:last-child { border-bottom: 0; }
.ow-event.watched { background: #4b90e014; }
.ow-time { color: var(--faint); font: 12px ui-monospace, Consolas, monospace; flex: none; }
.ow-sign { width: 14px; flex: none; text-align: center; font-weight: 700; }
.ow-event.join .ow-sign { color: var(--green); }
.ow-event.leave .ow-sign { color: var(--red); }
.ow-event.rejoin .ow-sign { color: var(--yellow); }
.ow-text { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.ow-text b { color: var(--text); font-weight: 600; }
.ow-filter { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.ow-filter input { flex: 1; min-width: 0; }
.ow-table { max-height: 560px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; }
.ow-player { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ow-player:last-child { border-bottom: 0; }
.ow-player .ow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-player.ghost { opacity: .5; }
.ow-player.watched .ow-name { color: var(--blue); font-weight: 600; }
.ow-star { padding: 0 2px; background: none; border: 0; color: var(--faint); font-size: 14px; cursor: pointer; }
.ow-star:hover:not(:disabled), .ow-star.on { color: var(--blue); }
.ow-star:disabled { opacity: .2; cursor: default; }

@container (max-width: 640px) {
    .ow-grid { grid-template-columns: 1fr; }
    .ow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Подписки и тиммейты
   ========================================================================== */

/* Замок: содержимое блока прячется, остаётся объяснение. */
.locked:not(.tab) > :not(.lock-note) { display: none !important; }
.lock-note {
    margin: 16px 20px;
    padding: 14px 16px;
    border: 1px dashed #38404c;
    border-radius: var(--radius-sm);
    background: #0d1014;
    color: var(--text);
    line-height: 1.6;
}
.lock-note .sub { margin-top: 2px; }
.devices .lock-note, .chat-card .lock-note, .setting-block .lock-note, .guard .lock-note { margin: 10px 0; }
.chat-card .lock-note { margin: 10px 14px 14px; }

.tab.tab-locked { opacity: .55; }
.tab.tab-locked::after { content: '🔒'; font-size: 10px; margin-left: -2px; }

.plan-btn { font-size: 12px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.plan-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.plan-feature { color: var(--faint); font-size: 12px; }
.plan-feature.on { color: var(--text); }

.acc-code {
    margin-top: 6px;
    padding: 12px;
    background: #0d1014;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font: 600 24px/1.2 ui-monospace, Consolas, monospace;
    letter-spacing: 3px;
    text-align: center;
    color: var(--accent-2);
    user-select: all;
}
.acc-add { margin: 10px 0 4px; }
.acc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}
.acc-row > .sub { flex-basis: 100%; }
.acc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
.acc-who b { overflow-wrap: anywhere; }
.acc-flags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.box .acc-row .sc-btn, .box .acc-row .chip-x { width: auto; margin: 0; }
.warn-text { color: #f0cd7e; }
.setting-buttons .step-btn { margin-top: 8px; flex: 1; min-width: 130px; text-align: center; text-decoration: none; }

/* Админка: подписки */
.plans { display: grid; gap: 12px; padding: 0 16px 16px; }
.plan-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12161b; }
.plan-card.default { border-color: #46b06a66; }
.plan-card.dirty { border-color: #dfae4280; }
.bm-field { flex: 1 1 320px; padding: 0; }
.bm-field input {
    flex: 1;
    min-width: 0;
    padding: 6px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font: 13px ui-monospace, Consolas, monospace;
}
.plan-actions button {
    padding: 5px 12px;
    font-size: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
}
.plan-actions button:hover { color: var(--text); border-color: #38404c; }
.plan-actions button.danger:hover { border-color: var(--red); color: #ffb4ad; }
.plan-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-card-head input[type="text"] {
    flex: 1 1 180px;
    min-width: 0;
    padding: 6px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
}
.plan-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.plan-group .menu-title { margin: 0 0 4px; }
.plan-check { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.plan-check input { accent-color: var(--accent); }
.plan-check.on { color: var(--text); }
.plan-limits { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.plan-limits label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.plan-limits input { width: 64px; padding: 4px 6px; background: #0d1014; border: 1px solid var(--line); border-radius: 6px; color: var(--text); }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.user-plan { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.user-plan select, .user-plan input {
    padding: 4px 6px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
}

@media (max-width: 680px) {
    .plan-btn { max-width: 44px; }
    .lock-note { margin: 12px; }
}
.box .acc-add .sc-btn { width: auto; margin: 0; }

/* Камеры через Rust+ помощника. */
.guard-via {
    padding: 6px 8px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    max-width: 100%;
}
.guard-via-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cam-via { margin: 10px 20px 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.cam-via-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cam-via-row select {
    padding: 5px 8px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font-size: 13px;
    max-width: 100%;
}
.cam-via-helper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cam-via .guard-add { margin-top: 8px; }
.cam-via > .sub { margin: 6px 0 0; line-height: 1.5; }

/* Слежка по SteamID: ник при добавлении, текущий и смены. */
.ow-steam-hint { margin: 2px 0 6px; }
.ow-steam-row { align-items: flex-start; }
.ow-steam-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ow-steam-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ow-steam-who .sub { overflow-wrap: anywhere; }
.ow-steam-who a.mono { color: var(--faint); text-decoration: none; font-size: 11px; }
.ow-steam-who a.mono:hover { color: var(--accent-2); }

/* Дозвоны по сигнализации: сколько раз подряд и пауза после. */
.alarm-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.alarm-plan-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.box .alarm-plan-field input, .alarm-plan-field input {
    width: 62px;
    margin: 0;
    padding: 4px 7px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
}
.alarm-plan-hint { flex-basis: 100%; }
.sc-check input { width: auto; }

/* Discord-трекер кланов */
.dc-servers { display: grid; gap: 2px; margin-top: 8px; }
.dc-server { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.dc-server.bad { color: #f0cd7e; }
.dc-create { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dc-create input { flex: 1 1 220px; min-width: 0; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.box .dc-create button { width: auto; margin: 0; }
.dc-folder { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #12161b; }
.dc-folder > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.dc-folder > summary::-webkit-details-marker { display: none; }
.dc-folder > summary b { flex: 1; overflow-wrap: anywhere; }
.dc-folder[open] > summary { border-bottom: 1px solid var(--line-soft); }
.dc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px 0; }
.dc-feed { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; font-size: 13px; }
.box .dc-tools .sc-btn { width: auto; margin: 0; }
.dc-add { display: grid; gap: 6px; padding: 8px 12px; }
.box .dc-add textarea { min-height: 64px; margin: 0; }
.box .dc-add button { margin: 0; }
.dc-player { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 12px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.dc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.dc-who b { overflow-wrap: anywhere; }
.dc-player:not(.on) .dc-who b { color: var(--muted); font-weight: 500; }
.dc-note { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--muted); }
.dc-id { font: 11px ui-monospace, Consolas, monospace; color: var(--faint); text-decoration: none; }
.dc-id:hover { color: var(--accent-2); }
.box .dc-player .chip-x { width: auto; margin: 0; }

/* Срок ключа Rust+: полоса над панелью и пояснение в окне ключа */
.key-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #dfae421f;
    border-bottom: 1px solid #dfae4259;
    color: #f0cd7e;
    font-size: 13px;
}
.key-banner.bad { background: #e0574b24; border-bottom-color: #e0574b66; color: #ffb4ad; }
.key-banner span { flex: 1 1 260px; }
.key-banner button {
    padding: 6px 14px;
    background: linear-gradient(180deg, #d9583f, var(--accent));
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
}
.key-banner button:hover { filter: brightness(1.1); }
.key-alert {
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid #dfae4266;
    border-radius: var(--radius-sm);
    background: #dfae421a;
    color: #f0cd7e;
    font-size: 13px;
    line-height: 1.55;
}
.key-alert.bad { border-color: #e0574b80; background: #e0574b1a; color: #ffb4ad; }

/* Пауза перед сообщением в чат (антиспам сервера) */
.cmd-delay { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 12.5px; cursor: help; }
.cmd-delay input {
    width: 54px;
    padding: 5px 7px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    text-align: center;
    font: inherit;
}
.cmd-delay input:focus { border-color: var(--accent); outline: none; }

/* ---------- рейд-калькулятор (отдельная страница /raid) ---------- */
.raid-page .raid-top { gap: 14px; }
.raid-page .brand { color: var(--text); text-decoration: none; }
.raid-title { font-weight: 600; color: var(--muted); }
.raid-nav { margin-left: 8px; }
.raid-main { max-width: 1400px; margin: 0 auto; padding: 14px; }
.raid-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.raid-col { display: grid; gap: 14px; min-width: 0; }
.raid-result { position: sticky; top: 76px; }
.raid-body { padding: 14px; }
.raid-label { margin: 14px 0 6px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.raid-label:first-child { margin-top: 0; }
.raid-hint { margin: 8px 0 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
.raid-hint.warn { color: #f0cd7e; }
.raid-hint.bad { color: #ff9d94; }
.raid-empty { padding: 14px 4px; color: var(--faint); font-size: 13px; }
.raid-page input[type="number"], .raid-page input[type="search"], .raid-page select {
    padding: 7px 9px;
    background: #0d1014;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    min-width: 0;
}
.raid-page input:focus, .raid-page select:focus { border-color: var(--accent); }
.raid-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.raid-add select { flex: 1 1 260px; }
.raid-field { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.raid-field input { width: 78px; }
.raid-btn {
    padding: 7px 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 13px;
    transition: color .14s, border-color .14s, background .14s;
}
.raid-btn:hover { color: var(--text); border-color: #38404c; }
.raid-btn.primary { background: linear-gradient(180deg, #d9583f, var(--accent)); border-color: transparent; color: #fff; font-weight: 600; }
.raid-btn.primary:hover { filter: brightness(1.1); }
.raid-btn.wide { width: 100%; margin-top: 14px; padding: 10px; }
.card-head .raid-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.raid-quick, .raid-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.raid-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ffffff06;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.raid-chip:hover { color: var(--text); border-color: #38404c; }
.raid-chip.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.raid-chip.on { color: var(--text); border-color: #ce422b80; background: #ce422b1a; }
.raid-targets { display: grid; gap: 6px; margin-top: 12px; }
.raid-targets > .raid-btn { justify-self: start; margin-top: 4px; }
.raid-target { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.raid-target-name { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.raid-target-fields { display: flex; gap: 10px; }
.raid-target-fields input { width: 72px; }
.raid-x { padding: 4px 8px; background: none; border: 0; color: var(--faint); }
.raid-x:hover { color: var(--red); }
.raid-seg { display: flex; gap: 2px; padding: 3px; background: #0f1319; border: 1px solid var(--line); border-radius: 11px; }
.raid-seg button { flex: 1; padding: 7px 8px; background: none; border: 0; border-radius: 8px; color: var(--muted); font-size: 13px; }
.raid-seg button:hover { color: var(--text); background: var(--panel-2); }
.raid-seg button.on { background: #ce422b2e; color: #ffb4a6; }
.raid-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.raid-row select { flex: 1 1 180px; }
.raid-allowed { margin-top: 12px; }
.raid-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.raid-total { display: flex; flex-direction: column; min-width: 96px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.raid-total b { font-size: 24px; line-height: 1.1; }
.raid-total span { color: var(--muted); font-size: 12px; }
.raid-sulfur { margin-top: 10px; font-size: 20px; font-weight: 700; color: #f0cd7e; }
.raid-lines { display: grid; gap: 6px; }
.raid-line { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.raid-line-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.raid-line-how { margin-top: 3px; font-size: 13px; }
.raid-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }
.raid-res-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--line); font-size: 13px; }
.raid-res-row span { color: var(--muted); }
.raid-res-row.main b { color: #f0cd7e; }
.raid-table-wrap { overflow-x: auto; margin-top: 10px; }
.raid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.raid-table th, .raid-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
.raid-table th { color: var(--faint); font-weight: 600; font-size: 11.5px; }
.raid-table .num { text-align: right; }
.raid-table td.num b { display: block; }
.raid-table td.num .sub { display: block; font-size: 11px; }
.raid-table tr.group th { padding-top: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.raid-table tr.short td { color: #ff9d94; }
.raid-table.small th, .raid-table.small td { padding: 5px 6px; }
.raid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.raid-num { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
.raid-num input { width: 96px; }
.raid-more { margin-top: 12px; }
.raid-more summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.raid-more .raid-grid { margin-top: 10px; }
.raid-verdict { padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; }
.raid-verdict.ok { background: #46b06a1f; color: #79d79a; border: 1px solid #46b06a45; }
.raid-verdict.bad { background: #e0574b1f; color: #ff9d94; border: 1px solid #e0574b4d; }
.raid-split { margin: 10px 0 0; padding: 10px 12px; background: #dfae4214; border: 1px solid #dfae4240; border-radius: var(--radius-sm); color: #f0cd7e; font-size: 13px; line-height: 1.55; }
.raid-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; }
.raid-warn { color: #ff9d94; font-size: 12px; }
.raid-big { display: flex; align-items: baseline; gap: 10px; }
.raid-big b { font-size: 40px; line-height: 1; }
.raid-big span { color: var(--muted); font-size: 16px; }
.raid-source { margin: 16px 2px 0; color: var(--faint); font-size: 11.5px; }
@media (max-width: 980px) {
    .raid-cols { grid-template-columns: 1fr; }
    .raid-result { position: static; }
}
@media (max-width: 680px) {
    .raid-title { display: none; }
    .raid-nav { order: 4; flex: 1 1 100%; margin-left: 0; }
    .raid-nav .nav-btn { flex: 1; justify-content: center; }
}
.raid-chip.special { border-style: dashed; }
.raid-table tr.special td { color: var(--muted); }
.raid-table td .sub { white-space: normal; }

/* ---------- помощник по РТ (отдельная страница /rt) ---------- */
.rt-page .raid-main { max-width: 1500px; }
.rt-noscroll { overflow: hidden; }
.rt-filters { margin-bottom: 14px; }
.rt-need { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-need-label { color: var(--muted); font-size: 13px; }
.rt-need .raid-chips { margin-top: 0; }
.rt-need-chip { padding: 5px 11px; font-size: 13px; }
.rt-need-chip .rt-ico { width: 20px; height: 20px; }
.rt-need-chip.green.on { border-color: #46b06a99; background: #46b06a24; }
.rt-need-chip.blue.on { border-color: #4b90e099; background: #4b90e024; }
.rt-need-chip.red.on { border-color: #e0574b99; background: #e0574b24; }
.rt-need-chip.diesel.on, .rt-need-chip.frag.on { border-color: #dfae4299; background: #dfae4222; }
.rt-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.rt-groups { flex: 1 1 520px; overflow-x: auto; }
.rt-groups button { white-space: nowrap; }
.rt-filter-row input[type="search"] { flex: 0 1 220px; }
#rt-where { margin-bottom: 14px; }
.rt-where-table td { vertical-align: middle; }
.rt-where-table tr.free td { background: #46b06a0c; }
.rt-where-name { min-width: 180px; }
.rt-free { color: #79d79a; font-weight: 600; }
.rt-link { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rt-link:hover span { text-decoration: underline; }
.rt-link.inline { display: inline; color: #ffb4a6; }
.rt-chain { padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.rt-sub { display: block; color: var(--faint); font-size: 11.5px; }
.raid-table td.rt-sub { display: table-cell; }

.rt-cols { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.rt-list { display: grid; gap: 4px; }
.rt-list-group { margin: 10px 4px 2px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.rt-list-group:first-child { margin-top: 0; }
.rt-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-align: left; cursor: pointer; transition: border-color .14s, background .14s; }
.rt-row:hover { border-color: #38404c; background: var(--panel-2); }
.rt-row.on { border-color: #ce422b90; background: #ce422b14; }
.rt-micon { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; background: #ffffff08; }
.rt-micon.small { width: 24px; height: 24px; border-radius: 6px; }
.rt-micon.big { width: 56px; height: 56px; border-radius: 12px; }
.rt-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rt-row-title { font-weight: 600; font-size: 14px; }
.rt-row-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; }
.rt-row-facts .diesel { color: #f0cd7e; }
.rt-row-cards { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rt-cards-need, .rt-cards-give { display: inline-flex; align-items: center; gap: 3px; }
.rt-arrow { color: var(--faint); font-size: 11px; margin-right: 1px; }
.rt-dot { display: inline-block; width: 10px; height: 14px; border-radius: 3px; border: 1px solid #00000055; }
.rt-dot.green { background: #46b06a; }
.rt-dot.blue { background: #4b90e0; }
.rt-dot.red { background: #e0574b; }
.rt-new { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: #ce422b30; color: #ffb4a6; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.rt-rad.lvl1 { color: #cbd48a; }
.rt-rad.lvl2 { color: #f0cd7e; }
.rt-rad.lvl3 { color: #ff9d94; }

.rt-detail { min-width: 0; position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; border-radius: var(--radius); scrollbar-width: thin; }
.rt-empty { padding: 40px 24px; text-align: center; color: var(--muted); }
.rt-empty-big { font-size: 46px; margin-bottom: 8px; }
.rt-head { display: flex; align-items: center; gap: 14px; padding: 14px 14px 0; }
.rt-head h2 { margin: 0; font-size: 20px; color: var(--text); text-transform: none; letter-spacing: 0; }
.rt-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 4px; color: var(--muted); font-size: 13px; }
.rt-sep { margin: 0 3px; }
.rt-back { display: none; }
.rt-about { margin: 0 0 12px; line-height: 1.55; }
.rt-gallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scroll-snap-type: x proximity; }
.rt-photo { position: relative; flex: 0 0 220px; height: 124px; padding: 0; overflow: hidden; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: zoom-in; scroll-snap-align: start; }
.rt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.rt-photo:hover img { transform: scale(1.04); }
.rt-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; background: linear-gradient(transparent, #000c); color: #e8ebef; font-size: 11.5px; line-height: 1.3; text-align: left; }
.rt-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-bottom: 4px; }
.rt-fact { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); font-size: 13px; }
.rt-fact .rt-k { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.rt-cam { margin: 2px 4px 0 0; padding: 2px 7px; background: #ffffff08; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: 12px ui-monospace, Consolas, monospace; cursor: copy; }
.rt-cam:hover { border-color: var(--accent); }
.rt-sec { margin-top: 18px; }
.rt-sec h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rt-puzzle { margin-top: 8px; padding: 12px 12px 10px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-sm); }
.rt-puzzle.card-green { border-left-color: #46b06a; }
.rt-puzzle.card-blue { border-left-color: #4b90e0; }
.rt-puzzle.card-red { border-left-color: #e0574b; }
.rt-puzzle-title { font-weight: 700; margin-bottom: 8px; }
.rt-puzzle-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 13px; }
.rt-puzzle-grid .rt-k { color: var(--faint); font-size: 12px; }
.rt-needs, .rt-items { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rt-item { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; background: #ffffff08; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; white-space: nowrap; }
.rt-item.bare { padding: 0; background: none; border: 0; font-size: 13px; white-space: normal; }
.rt-item.card-green { border-color: #46b06a88; }
.rt-item.card-blue { border-color: #4b90e088; }
.rt-item.card-red { border-color: #e0574b88; }
.rt-item.danger { padding-left: 8px; border-color: #e0574b55; color: #ff9d94; }
.rt-ico { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.rt-use { color: var(--muted); font-size: 12.5px; }
.rt-steps { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.5; }
.rt-note { margin: 8px 0 0; padding: 7px 10px; background: #dfae4214; border: 1px solid #dfae4233; border-radius: var(--radius-sm); color: #f0cd7e; font-size: 12.5px; line-height: 1.5; }
.rt-loot td, .rt-loot th { white-space: nowrap; }
.rt-loot tr.hl td { background: #dfae4212; }
.rt-loot .rt-ico { width: 20px; height: 20px; }
.rt-blk th .rt-ico { width: 22px; height: 22px; vertical-align: middle; }
.rt-tips { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.5; }

.rt-mech { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
.rt-toc .raid-chips { margin-top: 0; }
.rt-toc a { text-decoration: none; }
.rt-mech-card { scroll-margin-top: 76px; }
.rt-p { margin: 0 0 8px; line-height: 1.6; }
.rt-mech-table td.nowrap { white-space: nowrap; }
.rt-mech-table td.wrap { white-space: normal; min-width: 260px; }

.rt-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; background: #000000e6; }
.rt-lightbox figure { margin: 0; max-width: min(1200px, 92vw); }
.rt-lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 8px; }
.rt-lightbox figcaption { margin-top: 8px; color: #cfd5dc; font-size: 13px; text-align: center; }
.rt-lightbox figcaption a { color: #ffb4a6; }
.rt-lb-close { position: absolute; top: 12px; right: 14px; padding: 6px 10px; background: #ffffff14; border: 0; border-radius: 8px; color: #fff; font-size: 18px; cursor: pointer; }
.rt-lb-nav { flex: 0 0 auto; width: 42px; height: 64px; background: #ffffff12; border: 0; border-radius: 10px; color: #fff; font-size: 30px; cursor: pointer; }
.rt-lb-nav:hover, .rt-lb-close:hover { background: #ffffff26; }

@media (max-width: 900px) {
    .rt-cols { grid-template-columns: 1fr; }
    .rt-detail { position: static; max-height: none; overflow: visible; }
    .rt-cols.has-detail .rt-list { display: none; }
    .rt-cols:not(.has-detail) .rt-detail { display: none; }
    .rt-back { display: inline-block; }
    .rt-head { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .rt-photo { flex-basis: 170px; height: 100px; }
    .rt-lb-nav { position: absolute; bottom: 16px; }
    .rt-lb-nav.prev { left: 16px; }
    .rt-lb-nav.next { right: 16px; }
    .rt-puzzle-grid { grid-template-columns: 1fr; }
    .rt-filter-row input[type="search"] { flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .rt-where-table, .rt-where-table tbody, .rt-where-table tr, .rt-where-table td { display: block; }
    .rt-where-table tr:first-child { display: none; }
    .rt-where-table tr { position: relative; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
    .rt-where-table td { padding: 3px 0; border: 0; white-space: normal; text-align: left; }
    .rt-where-table td[data-label] { display: inline-block; margin-right: 14px; color: var(--muted); font-size: 12.5px; }
    .rt-where-table td[data-label]::before { content: attr(data-label) ": "; color: var(--faint); }
    .rt-where-table .rt-chain-cell { position: absolute; top: 8px; right: 0; padding: 0; }
    .rt-where-table .rt-chain-cell:empty { display: none; }
    .rt-where-name { min-width: 0; padding-right: 100px !important; }
}

/* карта РТ с маршрутом */
.rt-routes { margin: 8px 0 10px; }
.rt-route-chip.green.on { border-color: #46b06a99; background: #46b06a24; }
.rt-route-chip.blue.on { border-color: #4b90e099; background: #4b90e024; }
.rt-route-chip.red.on { border-color: #e0574b99; background: #e0574b24; }
.rt-map-wrap { position: relative; }
.rt-map { position: relative; width: 100%; background: #0e1014; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.rt-map > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rt-map-layer { position: absolute; inset: 0; }
.rt-map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.rt-map-wrap.full { position: fixed; inset: 0; z-index: 150; padding: 56px 16px 16px; background: #000000f0; overflow: auto; }
.rt-map-wrap.full .rt-map { width: auto; max-width: none; height: calc(100vh - 80px); margin: 0 auto; }
.rt-map-wrap.full .rt-map-tools { position: fixed; top: 10px; left: 16px; right: 16px; margin: 0; }
.rt-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid #fff; border-radius: 99px; background: #e67e22; color: #fff; font: 700 12px/1 system-ui, sans-serif; box-shadow: 0 1px 6px #000a; cursor: pointer; z-index: 2; }
.rt-pin:hover, .rt-pin.active { z-index: 3; transform: translate(-50%, -50%) scale(1.3); }
.rt-pin.active { box-shadow: 0 0 0 4px #ffffff55, 0 1px 8px #000; }
.rt-pin.extra { min-width: 0; width: 20px; height: 20px; padding: 0; border: 1px solid #ffffff80; background: #1b2028e6; font-size: 11px; cursor: help; z-index: 1; }
.rt-pin.extra.blocker { background: #5a2a22e6; }
.rt-pin.extra.recycler-red { background: #7a2a22e6; }
.rt-pin.switch, .rt-num.switch { background: #e67e22; }
.rt-pin.timer, .rt-num.timer { background: #c9982a; }
.rt-pin.fuse, .rt-num.fuse { background: #8e5ed6; }
.rt-pin.wheel, .rt-num.wheel { background: #6f8196; }
.rt-pin.button, .rt-num.button { background: #cd5c46; }
.rt-pin.card-green, .rt-num.card-green { background: #3f9e5f; }
.rt-pin.card-blue, .rt-num.card-blue { background: #3f7fcc; }
.rt-pin.card-red, .rt-num.card-red { background: #cc4a3f; }
.rt-num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px; color: #fff; font-weight: 700; font-size: 13px; }
.rt-route { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.rt-route-head { margin-top: 6px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.rt-route-head.green { color: #79d79a; }
.rt-route-head.blue { color: #8fbbf0; }
.rt-route-head.red { color: #ff9d94; }
.rt-step-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-align: left; cursor: pointer; }
.rt-step-btn:hover { border-color: #38404c; }
.rt-step.active .rt-step-btn { border-color: #ce422b90; background: #ce422b14; }
.rt-step.done .rt-step-btn { opacity: .6; }
.rt-step-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }
.rt-step-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; border: 1px solid var(--line); }
.rt-inset { margin-top: 10px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rt-inset-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rt-inset-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rt-inset-img { position: relative; padding: 0; background: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.rt-inset-img img { display: block; width: 260px; max-width: 100%; height: auto; }
.rt-inset-img span { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px; background: #000a; color: #fff; font-size: 11px; }
.rt-maplink { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.rt-maplink b { color: var(--text); }
@media (max-width: 600px) {
    .rt-pin { min-width: 18px; height: 18px; font-size: 10.5px; border-width: 1.5px; }
    .rt-pin.extra { width: 16px; height: 16px; font-size: 9px; }
    .rt-inset-img img { width: 100%; }
    .rt-step-thumb { width: 48px; height: 48px; }
}
.rt-layers { display: inline-flex; }
.rt-layers button { flex: 0 0 auto; padding: 5px 12px; }

/* ---------- схемы (/schemes): библиотека и редактор ---------- */
.sc-page { --sc-e: #f2c94c; --sc-f: #4b9fe0; --sc-i: #f0803c; --sc-s: #5fd0c8; --sc-a: #9aa3ae; }
.sc-lib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-lib-bar input[type="search"] { flex: 1 1 320px; }
.sc-lib-bar .raid-seg { flex: 0 1 auto; }
.sc-lib-bar .raid-seg button { flex: 0 0 auto; white-space: nowrap; }
#lib-tags:empty { display: none; }
.sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.sc-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.sc-card-parts { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.sc-card-part { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; background: #ffffff08; border: 1px solid var(--line); border-radius: 8px; }
.sc-card-part img { width: 28px; height: 28px; object-fit: contain; }
.sc-card-part small { color: var(--muted); font-size: 11px; }
.sc-card-title { font-weight: 700; font-size: 15px; }
.sc-card-meta { color: var(--muted); font-size: 12px; }
.sc-card-desc { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-card-tags .raid-chip { padding: 2px 8px; font-size: 11.5px; }
.sc-card-foot { display: flex; flex-wrap: wrap; gap: 10px; color: var(--faint); font-size: 12px; margin-top: auto; }
.sc-vis { color: var(--muted); }
.sc-vis.public { color: #79d79a; }
.sc-vis.hidden-by-admin { color: #ff9d94; }
.sc-card-actions { display: flex; gap: 8px; }
.sc-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0; }
.sc-empty { padding: 30px; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* редактор на весь экран под шапкой */
.sc-editing { overflow: hidden; }
.sc-editor { position: fixed; top: var(--sc-top, 60px); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.sc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.sc-toolbar input[type="text"] { flex: 1 1 200px; min-width: 120px; padding: 7px 9px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }
.sc-toolbar select { padding: 7px 8px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }
.sc-toolbar .raid-btn { padding: 6px 10px; }
.sc-toolbar .raid-btn.on { color: #fff; border-color: #46b06a99; background: #46b06a30; }
.sc-toolbar .raid-btn:disabled { opacity: .4; cursor: default; }
.sc-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.sc-only-narrow { display: none; }
.sc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 12px; background: #4b90e018; border-bottom: 1px solid #4b90e040; font-size: 13px; }
.sc-banner span { flex: 1 1 300px; }
.sc-banner .raid-btn.on { color: #ff9d94; }
.sc-work { flex: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; min-height: 0; }
.sc-palette, .sc-inspector { background: var(--panel); overflow-y: auto; scrollbar-width: thin; }
.sc-palette { border-right: 1px solid var(--line); padding: 8px; }
.sc-inspector { border-left: 1px solid var(--line); padding: 12px; font-size: 13px; }
.sc-palette input[type="search"] { width: 100%; padding: 7px 9px; margin-bottom: 6px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }
.sc-pal-group { margin-bottom: 4px; }
.sc-pal-group summary { padding: 6px 4px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.sc-pal-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 12.5px; text-align: left; cursor: grab; }
.sc-pal-item:hover { background: var(--panel-2); border-color: var(--line); }
.sc-pal-item img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.sc-pal-item span { flex: 1; min-width: 0; }
.sc-pal-item small { color: var(--faint); font-size: 11px; }
.sc-pal-emoji { width: 26px; text-align: center; flex: 0 0 26px !important; }
.sc-canvas-wrap { position: relative; min-width: 0; background: #0b0d11; }
.sc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; outline: none; cursor: grab; }
.sc-canvas:active { cursor: grabbing; }
.sc-bg { pointer-events: all; }
.sc-grid-line { stroke: #ffffff0a; stroke-width: 1; }
.sc-hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); max-width: 420px; padding: 16px 18px; background: #11151bcc; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 13.5px; line-height: 1.5; pointer-events: none; }
.sc-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; padding: 5px 9px; background: #11151bcc; border-radius: 8px; color: var(--muted); font-size: 11.5px; pointer-events: none; }
.sc-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 99px; vertical-align: 0; }
.sc-dot.E { background: var(--sc-e); } .sc-dot.F { background: var(--sc-f); } .sc-dot.I { background: var(--sc-i); } .sc-dot.S { background: var(--sc-s); } .sc-dot.A { background: var(--sc-a); }

/* узлы */
.sc-node { cursor: move; }
.sc-node-box { fill: #1a1f27; stroke: #2f3642; stroke-width: 1.2; }
.sc-node.sel .sc-node-box { stroke: #ce422b; stroke-width: 2.4; }
.sc-node.ok .sc-node-box { stroke: #46b06a; }
.sc-node.bad .sc-node-box { stroke: #e0574b; }
.sc-node.sel.ok .sc-node-box, .sc-node.sel.bad .sc-node-box { stroke-width: 2.6; }
.sc-node-head { fill: #222833; }
.sc-node.water .sc-node-head { fill: #1d2a38; }
.sc-node.industrial .sc-node-head { fill: #332619; }
.sc-node.box .sc-node-head { fill: #2b2a22; }
.sc-node.planter .sc-node-head { fill: #1e3022; }
.sc-node.note .sc-node-box { fill: #2c2a1c; stroke: #5a5330; }
.sc-note-text { color: #f0e6b8; font-size: 12px; line-height: 1.35; overflow: hidden; height: 100%; white-space: pre-wrap; }
.sc-node-title { fill: #e8ebef; font: 600 12.5px system-ui, sans-serif; }
.sc-node-sub { fill: #8d96a3; font: 10.5px system-ui, sans-serif; }
.sc-node-emoji { font-size: 15px; }
.sc-node-state { font: 11px system-ui, sans-serif; text-anchor: middle; }
.sc-node-state.ok { fill: #79d79a; } .sc-node-state.bad { fill: #ff9d94; }
.sc-lamp { fill: #3a4150; stroke: #000; }
.sc-lamp.on { fill: #79d79a; }
.sc-port-label { fill: #aab3bf; font: 11px system-ui, sans-serif; }
.sc-port-label.out { text-anchor: end; }
.sc-port { stroke: #0b0d11; stroke-width: 2; cursor: crosshair; }
.sc-port:hover { stroke: #fff; }
.sc-port.E { fill: var(--sc-e); } .sc-port.F { fill: var(--sc-f); } .sc-port.I { fill: var(--sc-i); } .sc-port.S { fill: var(--sc-s); } .sc-port.A { fill: var(--sc-a); }
.sc-port:not(.used) { fill-opacity: .45; }

/* провода */
.sc-wire { fill: none; stroke-width: 3; pointer-events: none; }
.sc-wire.E { stroke: var(--sc-e); } .sc-wire.F { stroke: var(--sc-f); stroke-width: 4; } .sc-wire.I { stroke: var(--sc-i); stroke-width: 5; }
.sc-wire.S { stroke: var(--sc-s); stroke-dasharray: 6 5; } .sc-wire.A { stroke: var(--sc-a); stroke-dasharray: 2 4; }
.sc-wire.sel { stroke-width: 5; filter: drop-shadow(0 0 4px #fff8); }
.sc-wire.off { opacity: .35; }
.sc-wire.temp { stroke-dasharray: 5 4; opacity: .9; }
.sc-wire-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.sc-flow { fill: #0b0d11; font: 700 11px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.sc-flow-bg { stroke: #0b0d11; stroke-width: 1; pointer-events: none; }
.sc-flow-bg.E { fill: var(--sc-e); } .sc-flow-bg.F { fill: var(--sc-f); }

/* панель свойств */
.sc-inspector h3 { margin: 0 0 8px; font-size: 14px; }
.sc-insp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sc-insp-head img { width: 40px; height: 40px; object-fit: contain; }
.sc-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; color: var(--muted); font-size: 12px; }
.sc-field input:not([type="checkbox"]), .sc-field textarea, .sc-field select { padding: 7px 9px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 13px; }
.sc-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.sc-ports { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; }
.sc-ports li { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.sc-ports small { margin-left: auto; color: var(--faint); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ports b { margin-left: 6px; color: #f0cd7e; }
.sc-state { margin: 8px 0; padding: 7px 9px; border-radius: 8px; font-weight: 600; }
.sc-state.ok { background: #46b06a1f; color: #79d79a; } .sc-state.bad { background: #e0574b1f; color: #ff9d94; }
.sc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.sc-sum-item { display: flex; flex-direction: column; padding: 7px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; }
.sc-sum-item b { font-size: 18px; }
.sc-sum-item span { color: var(--faint); font-size: 11px; }
.sc-sum-item.gen b { color: #79d79a; } .sc-sum-item.use b { color: #f0cd7e; } .sc-sum-item.bad b { color: #ff9d94; } .sc-sum-item.water b { color: #8fbbf0; }
.sc-warn { margin: 6px 0; color: #ff9d94; font-size: 12.5px; }
.sc-parts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.sc-parts li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sc-parts img { width: 22px; height: 22px; object-fit: contain; }
.sc-parts span { flex: 1; }
.sc-tips summary { color: var(--muted); cursor: pointer; margin-top: 10px; }
.sc-tips p { margin: 6px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* модалка */
.sc-modal { position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center; padding: 16px; background: #000000b0; }
.sc-modal-card { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; }
.sc-code { width: 100%; padding: 8px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: 12px ui-monospace, Consolas, monospace; word-break: break-all; }

@media (max-width: 900px) {
    .sc-work { grid-template-columns: 1fr; }
    .sc-only-narrow { display: inline-block; }
    .sc-palette, .sc-inspector { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(300px, 86vw); display: none; box-shadow: 0 0 30px #000a; }
    .sc-palette { left: 0; } .sc-inspector { right: 0; }
    .sc-palette.open, .sc-inspector.open { display: block; }
    .sc-work { position: relative; }
    .sc-toolbar { gap: 4px; padding: 6px 8px; }
    .sc-toolbar input[type="text"] { flex-basis: 100%; order: -1; }
    .sc-sep { display: none; }
    .sc-legend { display: none; }
}
.sc-toolbar input[type="text"] { width: auto; }
.sc-toolbar select { width: auto; flex: 0 0 auto; }

/* ---------- конструктор баз (/build) ---------- */
.bd-page { overflow: hidden; }
.bd-app { position: fixed; top: var(--sc-top, 60px); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.bd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bd-toolbar .raid-seg { flex: 0 0 auto; }
.bd-toolbar .raid-seg button { flex: 0 0 auto; padding: 6px 10px; white-space: nowrap; }
.bd-toolbar .raid-btn { padding: 6px 10px; }
.bd-toolbar .raid-btn:disabled { opacity: .4; }
.bd-grades button { position: relative; }
.bd-grades button::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; background: var(--g); vertical-align: 0; }
.bd-floors { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; }
.bd-floors select { padding: 5px 6px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); width: auto; }
.bd-work { flex: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; min-height: 0; }
.bd-palette, .bd-info { background: var(--panel); overflow-y: auto; scrollbar-width: thin; }
.bd-palette { border-right: 1px solid var(--line); padding: 8px; }
.bd-info { border-left: 1px solid var(--line); padding: 12px; font-size: 13px; }
.bd-info h3 { margin: 0 0 8px; font-size: 14px; }
.bd-pal-group { margin: 10px 4px 4px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.bd-pal-group:first-child { margin-top: 2px; }
.bd-pal-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.bd-pal-item:hover { background: var(--panel-2); border-color: var(--line); }
.bd-pal-item.on { background: #ce422b1f; border-color: #ce422b80; }
.bd-pal-icon { width: 20px; text-align: center; opacity: .85; }
.bd-view { position: relative; min-width: 0; background: #151a21; }
.bd-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.bd-tip { position: absolute; z-index: 5; max-width: 260px; padding: 6px 9px; background: #0f1319ee; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 12.5px; white-space: pre-line; pointer-events: none; }
.bd-tip.bad { border-color: #e0574b80; color: #ff9d94; }
.bd-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); max-width: 520px; padding: 10px 14px; background: #11151bdd; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; pointer-events: none; }
.bd-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: #151a21; }
.bd-only-narrow { display: none; }
@media (max-width: 900px) {
    .bd-work { grid-template-columns: 150px minmax(0, 1fr); position: relative; }
    .bd-info { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(300px, 86vw); display: none; box-shadow: 0 0 30px #000a; }
    .bd-info.open { display: block; }
    .bd-only-narrow { display: inline-block; }
    .bd-pal-item { font-size: 12px; padding: 5px; }
    .bd-toolbar { gap: 4px; padding: 6px 8px; }
    .bd-toolbar .sc-sep { display: none; }
}
@media (max-width: 560px) {
    .bd-work { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .bd-palette { display: flex; overflow-x: auto; gap: 4px; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; }
    .bd-pal-group { display: none; }
    .bd-pal-item { flex: 0 0 auto; width: auto; white-space: nowrap; }
}

/* ---------- фильтры конвейера ---------- */
.sc-modal.wide .sc-modal-card { width: min(820px, 100%); }
.sc-filter-btn { cursor: pointer; }
.sc-filter-btn rect { fill: #ffffff0a; stroke: #ffffff22; }
.sc-filter-btn:hover rect { fill: #ce422b26; stroke: #ce422b99; }
.sc-filter-btn text { fill: var(--text); font: 12px system-ui, sans-serif; }
.sc-flt-open { width: 100%; margin: 6px 0 2px; }
.sc-flt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-flt-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.sc-flt-pastebox { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sc-flt-pastebox textarea { width: 100%; padding: 8px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: 12px ui-monospace, Consolas, monospace; }
.sc-flt-list { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.sc-flt-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 76px 52px 34px; gap: 6px; align-items: center; }
.sc-flt-row.head { color: var(--muted); font-size: 11px; }
.sc-flt-row.head span[title] { cursor: help; text-decoration: underline dotted; }
.sc-flt-row input[type="number"] { width: 100%; padding: 5px 6px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 13px; }
.sc-flt-row input[type="checkbox"] { width: 18px; height: 18px; justify-self: center; accent-color: var(--accent); }
.sc-flt-row .raid-btn { padding: 4px 0; }
.sc-flt-what { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-flt-what img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.sc-flt-what i { width: 28px; text-align: center; font-style: normal; flex: none; }
.sc-flt-what b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-flt-what small { color: var(--muted); font-size: 11px; }
.sc-flt-q { width: 100%; margin: 6px 0; padding: 7px 9px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; }
.sc-flt-cats { margin: 4px 0 8px; }
.sc-flt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; margin-top: 8px; padding-right: 2px; }
.sc-flt-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: #ffffff06; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: 11px; line-height: 1.2; cursor: pointer; }
.sc-flt-item:hover { color: var(--text); border-color: #38404c; }
.sc-flt-item.on { color: var(--text); border-color: #ce422b99; background: #ce422b1f; }
.sc-flt-item img { width: 40px; height: 40px; object-fit: contain; }
.sc-flt-item span { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; }
@media (max-width: 640px) {
    .sc-flt-row { grid-template-columns: minmax(0, 1fr) 56px 56px 56px 30px 30px; gap: 4px; }
    .sc-flt-what img { width: 22px; height: 22px; }
}

/* ---------- проверка труб: предметы ---------- */
.sc-itembar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 10px; background: #11151bf0; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px #0008; font-size: 12.5px; }
.sc-itembar > b { color: var(--text); }
.sc-ib-n { color: var(--muted); min-width: 48px; }
.sc-ib-field { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.sc-ib-field input, .sc-inv-qty { width: 72px; padding: 4px 6px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; }
.sc-ib-hint { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
.sc-inv-strip { cursor: pointer; }
.sc-inv-strip rect { fill: #1a2029; stroke: #3a4452; }
.sc-inv-strip:hover rect { fill: #ce422b22; stroke: #ce422b99; }
.sc-inv-strip text { fill: var(--muted); font: 11.5px system-ui, sans-serif; }
.sc-inv-strip text.q { fill: var(--text); font-weight: 600; }
.sc-wire.moving { stroke-dasharray: 10 6; animation: sc-flow 0.7s linear infinite; }
@keyframes sc-flow { to { stroke-dashoffset: -16; } }
.sc-move-label rect { fill: #11151bf0; stroke: #d99a4e; }
.sc-move-label text { fill: #f3c58b; font: 600 12px system-ui, sans-serif; }
.sc-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 34px; gap: 6px; align-items: center; }
.sc-inv-row input { width: 100%; padding: 5px 6px; background: #0d1014; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font: inherit; }
.sc-inv-row .raid-btn { padding: 4px 0; }
.sc-flt-bar .sc-flt-q { flex: 1 1 200px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .sc-wire.moving { animation: none; } }
@media (max-width: 640px) { .sc-itembar { left: 8px; right: 8px; transform: none; max-width: none; } }
.sc-flt-bar .sc-flt-q + .sc-flt-count { margin-left: 0; }

/* ---------- адаптер хранилища на хранилище ---------- */
.sc-adp { cursor: grab; }
.sc-adp > rect { fill: #2a2118; stroke: #d99a4e66; }
.sc-adp:hover > rect { stroke: #d99a4e; }
.sc-adp.sel > rect { stroke: var(--accent); stroke-width: 2; }
.sc-adp-title { fill: #f3c58b; font: 600 11.5px system-ui, sans-serif; }
.sc-adp-state { fill: #79d79a; font: 10.5px system-ui, sans-serif; text-anchor: end; }
.sc-canvas-wrap.items-on .sc-legend { top: 10px; bottom: auto; }
@media (max-width: 640px) { .sc-ib-hint { display: none; } .sc-itembar { padding: 6px 8px; gap: 6px; font-size: 12px; bottom: 8px; } .sc-itembar .raid-btn { padding: 5px 8px; } .sc-ib-field input { width: 54px; } }
.sc-filter-btn rect.sc-flt-chip { fill: #d99a4e22; stroke: #d99a4e88; }
.sc-filter-btn text.sc-flt-chip-t { fill: #f3c58b; font: 600 11px system-ui, sans-serif; }
.sc-filter-btn text.sc-flt-more { fill: var(--muted); font: 600 11px system-ui, sans-serif; }
.sc-flt-mode { margin: 10px 0 2px; }
.sc-filter-btn.exclude > rect:first-child { stroke: #e5534b99; fill: #e5534b14; }

/* =================================================================
   Разгрузка интерфейса (2026-09-30): тот же стиль, меньше элементов на виду.
   ================================================================= */

/* ---------- шапка в одну строку ---------- */
.topbar { flex-wrap: nowrap; gap: 12px; padding: 8px 16px; }
.topbar .stats { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.topbar .stat { padding: 3px 9px; }
.topbar .clock { min-width: 0; }

/* Инструменты — одним блоком; у каждого свой цветной значок. */
.tools {
    display: flex; gap: 2px; margin-left: auto; padding: 3px;
    background: #ffffff05; border: 1px solid var(--line-soft); border-radius: 11px;
}
.tools a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 9px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s, color .14s;
}
.tools a:hover { background: var(--panel-3); color: var(--text); }
.tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tools .t-raid svg { color: #ef7a62; }
.tools .t-rt svg { color: #f0cd7e; }
.tools .t-build svg { color: #79d79a; }
.tools .t-schemes svg { color: #7fb2f0; }
.tools .t-rt svg circle { fill: currentColor; stroke: none; }
.tools a:hover svg { filter: brightness(1.15); }
.topbar .actions { margin-left: 4px; align-items: center; }

/* Часы и связь — такими же плашками, как «Игроки», «Карта», «Вайп». */
.topbar .clock, .topbar .status { margin-left: -6px; text-align: left; line-height: 1.25; }
.clock-chip b, .status-chip b { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.clock-chip .sun { font-style: normal; font-size: 13px; }
.clock-chip.day .sun { color: #f0cd7e; }
.clock-chip.night .sun { color: #9db4e8; }
.stat span { white-space: nowrap; }
.status-chip { cursor: default; }
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #46b06a26; }
.status-chip.warn { border-color: #dfae4245; background: #dfae4212; }
.status-chip.warn b { color: #f0cd7e; }
.status-chip.warn .dot { background: var(--yellow); box-shadow: 0 0 0 3px #dfae4226; }
.status-chip.bad { border-color: #e0574b4d; background: #e0574b14; }
.status-chip.bad b { color: #ff9d94; }
.status-chip.bad .dot { background: var(--red); box-shadow: 0 0 0 3px #e0574b2e; }

/* Меню аккаунта */
.account-menu .menu-panel { width: 250px; padding: 6px; }
.menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; background: none; border: 0; border-radius: 8px;
    color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--panel-3); }
.menu-item.danger { color: #ff9d94; }
.menu-item.plan-btn { color: #f0cd7e; font-weight: 600; }
.menu-item.plan-btn:empty { display: none; }
.menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* ---------- вкладки: одна строка ---------- */
.card-head.tabs { flex-wrap: nowrap; overflow-x: auto; }
.card-head.tabs::-webkit-scrollbar { height: 0; }
.tab { padding: 8px 11px; gap: 6px; }

/* ---------- карта: «Слои» и «Вид» — меню, масштаб — на самой карте ---------- */
.work .map-toolbar { display: flex; gap: 6px; padding: 8px 12px; }
.work .map-toolbar .menu { margin-left: 0; }
.work .map-toolbar .menu .menu-panel { left: 0; right: auto; }
.layers-panel { width: 220px; }
.layers-panel .layers { flex-direction: column; gap: 8px; }
.layers-panel .layers label { font-size: 13px; }
.map-stage { position: relative; }
.map-zoom {
    position: absolute; right: 12px; top: 12px; z-index: 5;
    flex-direction: column; gap: 4px;
}
.map-zoom .ghost { width: 34px; padding: 6px 0; background: #171b21e6; text-align: center; font-size: 15px; }
.map-zoom .zoom-level { font-size: 10.5px; color: var(--muted); }

/* ---------- пояснения — свёрнуты ---------- */
details.more { margin: 10px 20px; color: var(--muted); font-size: 12.5px; }
details.more > summary { cursor: pointer; color: var(--faint); font-size: 12px; list-style: none; user-select: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--text); }
details.more[open] > summary { margin-bottom: 6px; }
details.more > p { margin: 0; }

/* ---------- устройства ---------- */
.pill.alias { color: var(--muted); background: #ffffff08; font-family: ui-monospace, Consolas, monospace; }
.alarm-more { margin: 6px 0 0; }
.alarm-more > summary { font-size: 12px; }
.alarm-more .device-cmd { margin-top: 6px; }
.device .alarm-call { margin-top: 6px; }

@media (max-width: 900px) {
    .topbar { flex-wrap: wrap; }
    .tools { order: 10; width: 100%; margin-left: 0; overflow-x: auto; }
}
@media (max-width: 680px) {
    /* Телефон: 1) логотип и меню; 2) сервер; 3) цифры сервера и часы; 4) статус и инструменты. */
    .topbar { position: static; }
    .topbar .stats { flex: 1 1 0; min-width: 0; }
    .topbar .status { flex: none; order: 7; }
    .tools { order: 8; flex: 1 1 auto; width: auto; justify-content: flex-end; }
    .tools a { padding: 6px 8px; }
    .topbar .actions { margin-left: auto; }
}
/* Плашки в шапке не переносят текст; на средних экранах — меньше второстепенного. */
.topbar .stat b, .topbar .stat span { white-space: nowrap; }
@media (max-width: 1320px) and (min-width: 681px) {
    .topbar .stat-map { display: none; }
}
@media (max-width: 1120px) and (min-width: 901px) {
    .tools a span { display: none; }
    .tools a { padding: 6px 9px; }
    .server-pick select { max-width: 200px; }
}