:root {
    --bg: #090b10;
    --surface: #11141c;
    --surface-2: #171b25;
    --surface-3: #1e2330;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .13);
    --text: #e9ecf3;
    --muted: #8b93a7;
    --dim: #5d6579;

    --accent: #ff6b3d;
    --accent-2: #ff3d71;
    --accent-grad: linear-gradient(135deg, #ff7a45 0%, #ff3d71 100%);
    --ok: #3ddc97;
    --warn: #ffb84d;
    --bad: #ff5470;
    --idle: #6b7389;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.center { text-align: center; }
.bad-text { color: var(--bad); }
.icon { display: inline-flex; flex: none; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ---------- фоновые свечения ---------- */
.glow { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; opacity: .5; }
.glow.one { width: 520px; height: 520px; background: #ff5a3c33; top: -220px; left: -120px; }
.glow.two { width: 620px; height: 620px; background: #5b5bff24; bottom: -320px; right: -180px; }

/* ---------- кнопки ---------- */
button {
    font: inherit; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--surface-2);
    font-weight: 550; white-space: nowrap;
    transition: background .15s, border-color .15s, transform .08s, opacity .15s, box-shadow .15s;
}
button:hover:not(:disabled) { background: var(--surface-3); border-color: rgba(255, 255, 255, .2); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, input:focus-visible, .card:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

button.primary { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(255, 80, 70, .28); }
button.primary:hover:not(:disabled) { background: var(--accent-grad); filter: brightness(1.08); box-shadow: 0 8px 26px rgba(255, 80, 70, .4); }
button.danger { background: var(--bad); border-color: transparent; color: #fff; }
button.danger:hover:not(:disabled) { background: var(--bad); filter: brightness(1.1); }
button.ghost { background: transparent; }
button.danger-text { color: var(--bad); padding: 0 11px; }
button.square { width: 38px; padding: 0; }
button.block { width: 100%; height: 44px; }
button.busy { position: relative; color: transparent !important; }
button.busy::after {
    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite;
}
.spinning .icon { animation: spin .8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- поля ---------- */
input[type="text"], input[type="password"], input[type="number"] {
    width: 100%; height: 42px; padding: 0 14px;
    font: inherit; color: var(--text);
    background: #0c0f15; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--dim); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 61, .18); }
input[type="number"]::-webkit-inner-spin-button { display: none; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.form label > span { font-size: 12.5px; color: var(--muted); }
.form .row { display: flex; gap: 12px; }
.form details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; }
.form details[open] { padding-bottom: 14px; }
.form summary { cursor: pointer; padding: 11px 0; color: var(--muted); font-size: 13px; user-select: none; }
.form details > * + * { margin-top: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.form-error { color: var(--bad); font-size: 13px; min-height: 0; }
.form-error:empty { display: none; }
.hint { color: var(--muted); font-size: 12.5px; }
.hint.bad { color: var(--warn); }

/* ---------- вход ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; }
.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 380px;
    display: flex; flex-direction: column; gap: 14px;
    padding: 36px 32px 32px; border-radius: 22px;
    background: rgba(17, 20, 28, .82); border: 1px solid var(--line-strong);
    backdrop-filter: blur(18px); box-shadow: var(--shadow);
}
.login-card .muted { margin: -6px 0 10px; }

/* ---------- шапка ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand.big { justify-content: center; font-size: 22px; }
.brand-mark {
    width: 28px; height: 28px; border-radius: 8px; background: var(--accent-grad); flex: none;
    box-shadow: 0 6px 18px rgba(255, 80, 70, .4);
    -webkit-mask: linear-gradient(#000 0 0) 5px 6px / 18px 4px no-repeat, linear-gradient(#000 0 0) 5px 12px / 18px 4px no-repeat, linear-gradient(#000 0 0) 5px 18px / 11px 4px no-repeat;
    mask: linear-gradient(#000 0 0) 5px 6px / 18px 4px no-repeat, linear-gradient(#000 0 0) 5px 12px / 18px 4px no-repeat, linear-gradient(#000 0 0) 5px 18px / 11px 4px no-repeat;
}
.brand.big .brand-mark { width: 34px; height: 34px; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 22px;
    padding: 12px 28px;
    background: rgba(9, 11, 16, .78); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.stats { display: flex; gap: 10px; flex: 1; min-width: 0; }
.stat-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    color: var(--muted); font-size: 13px; white-space: nowrap;
}
.stat-chip b { color: var(--text); font-size: 14px; }
.stat-chip .icon { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.fresh-box { display: flex; align-items: center; gap: 10px; }
.fresh { color: var(--dim); font-size: 12.5px; white-space: nowrap; }

.user-box { position: relative; }
button.user { padding: 0 10px 0 5px; height: 38px; background: transparent; border-color: var(--line); }
.avatar {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--surface-3); font-weight: 700; font-size: 13px; color: var(--accent);
}
.menu {
    position: absolute; right: 0; top: 46px; min-width: 210px; padding: 6px; z-index: 30;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow);
    animation: pop .14s ease-out;
}
.menu button { width: 100%; justify-content: flex-start; border: 0; background: transparent; font-weight: 500; }
.menu button:hover { background: var(--surface-3); }

/* ---------- страница ---------- */
main { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 34px 28px 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.segmented { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.segmented button { height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-weight: 500; border-radius: 9px; }
.segmented button.active { background: var(--surface-3); color: var(--text); }
.segmented i { font-style: normal; font-size: 12px; color: var(--dim); }

.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 18px; font-size: 13.5px; }
.back:hover { color: var(--text); text-decoration: none; }

/* ---------- карточки лобби ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }

.card {
    position: relative; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 18px 16px; border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    transition: transform .16s, border-color .16s, box-shadow .16s;
}
.card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--tone, var(--idle)); opacity: .9;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.card.tone-ok { --tone: var(--ok); }
.card.tone-warn { --tone: var(--warn); }
.card.tone-bad { --tone: var(--bad); }
.card.tone-idle { --tone: var(--idle); }
.card.tone-idle .card-count b { color: var(--dim); }

.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; }
.card-title { font-size: 17px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-count { display: flex; align-items: baseline; gap: 6px; }
.card-count b { font-size: 38px; line-height: 1; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.card-count span { font-size: 18px; color: var(--muted); font-weight: 600; }
.card-count em { font-style: normal; color: var(--dim); font-size: 12.5px; margin-left: 4px; }
.card-foot { margin-top: auto; padding-top: 2px; } /* connect прижат к низу карточки */

.bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent-grad); transition: width .4s ease; }
.bar.indeterminate span { width: 35%; animation: slide 1.4s ease-in-out infinite; }

@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.badge {
    display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
    border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(255, 255, 255, .05); color: var(--muted);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); background: rgba(61, 220, 151, .1); }
.badge.ok .dot { box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
.badge.warn { color: var(--warn); background: rgba(255, 184, 77, .1); }
.badge.bad { color: var(--bad); background: rgba(255, 84, 112, .1); }
.badge.plain { font-weight: 500; }

@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

button.copy {
    width: 100%; height: 36px; justify-content: space-between; padding: 0 11px 0 12px;
    background: #0c0f15; border-color: var(--line); color: var(--muted);
}
button.copy code { font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
button.copy:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: #0c0f15; }
button.copy.copied { border-color: var(--ok); color: var(--ok); }
code.dim { font-family: var(--mono); font-size: 12px; }

.empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 70px 20px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.empty .icon { color: var(--dim); margin-bottom: 6px; }
.empty p { max-width: 420px; margin-bottom: 10px; }
.empty.small { padding: 46px 20px; border: 0; }

/* ---------- страница лобби ---------- */
.lobby-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.lobby-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 0; }
.lobby-title h1 { overflow-wrap: anywhere; }
.lobby-title .copy { width: auto; min-width: 280px; margin-top: 6px; align-self: flex-start; }
.lobby-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.lobby-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; margin-left: auto; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile { position: relative; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tile-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
.tile-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-note { color: var(--dim); font-size: 12.5px; min-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.tone-ok .tile-value { color: var(--ok); }
.tile.tone-warn .tile-value { color: var(--warn); }
.tile.tone-bad .tile-value, .tile.tone-bad .tile-note { color: var(--bad); }
.spark { position: absolute; right: 14px; bottom: 14px; width: 120px; height: 30px; opacity: .9; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

.panel { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tabs {
    display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
    flex: none; height: 40px; border: 0; background: transparent; color: var(--muted); font-weight: 550;
    border-radius: 10px 10px 0 0; box-shadow: inset 0 -2px 0 transparent;
}
.tabs button:hover:not(:disabled) { background: transparent; color: var(--text); }
.tabs button:active:not(:disabled) { transform: none; }
.tabs button.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tab-panels > * { padding: 18px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); padding: 0 14px 10px; white-space: nowrap; }
td { padding: 12px 14px; border-top: 1px solid var(--line); white-space: nowrap; }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }
td.nick { font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.tag { margin-left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pill.ok { color: var(--ok); background: rgba(61, 220, 151, .1); }
.pill.warn { color: var(--warn); background: rgba(255, 184, 77, .1); }
.pill.bad { color: var(--bad); background: rgba(255, 84, 112, .1); }
.pill.idle { color: var(--muted); background: rgba(255, 255, 255, .05); }

/* ---------- консоль и логи ---------- */
.log, .console-out {
    margin: 0; font: 12.5px/1.6 var(--mono); color: #c9d1e3;
    background: #07090d; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 14px 16px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    max-height: 420px; min-height: 120px;
}
.log.tall { height: 460px; max-height: 60vh; }
.console { display: flex; flex-direction: column; gap: 12px; }
.console-out { height: 420px; max-height: 55vh; }
.console-out pre { margin: 2px 0 14px; font: inherit; white-space: pre-wrap; }
.console-hint { color: var(--dim); margin-bottom: 12px; font-family: var(--sans); font-size: 12.5px; }
.console-cmd { color: var(--accent); font-weight: 600; }
.prompt { color: var(--accent); font-family: var(--mono); font-weight: 700; margin-right: 8px; }
.console-in { display: flex; align-items: center; gap: 10px; }
.console-in .prompt { margin: 0 -2px 0 4px; font-size: 16px; }
.console-in input { font-family: var(--mono); font-size: 13px; }

.quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { height: 28px; padding: 0 11px; border-radius: 999px; font: 12px var(--mono); background: transparent; border-color: var(--line); color: var(--muted); }
.chip:hover:not(:disabled) { color: var(--text); }
.right { margin-left: auto; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); }
.logtab { display: flex; flex-direction: column; gap: 12px; }
.job-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- модальные окна и тосты ---------- */
.backdrop {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
    background: rgba(4, 5, 8, .68); backdrop-filter: blur(6px); animation: fade .16s ease-out;
}
.backdrop.leaving { opacity: 0; transition: opacity .15s; }
.modal {
    width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow);
    animation: pop .18s ease-out;
}
.modal.wide { max-width: 860px; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px 24px; }
.modal-body { padding: 12px 24px 22px; overflow-y: auto; }
.modal footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; }

@keyframes fade { from { opacity: 0; } }

#toasts { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
    display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 12px 16px;
    border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
    animation: toast-in .22s ease-out; transition: opacity .3s, transform .3s;
}
.toast.ok .icon { color: var(--ok); }
.toast.error { border-color: rgba(255, 84, 112, .5); }
.toast.error .icon { color: var(--bad); }
.toast.leaving { opacity: 0; transform: translateX(16px); }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- узкие экраны ---------- */
@media (max-width: 860px) {
    .topbar { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
    .stats { order: 3; flex-basis: 100%; overflow-x: auto; }
    .topbar-right { margin-left: auto; }
    .fresh, .user-name { display: none; }
    main { padding: 22px 16px 60px; }
    h1 { font-size: 23px; }
    .lobby-actions { width: 100%; }
    .lobby-actions button { flex: 1; }
    .lobby-actions .danger-text { flex: 0; }
    .lobby-title .copy { min-width: 0; width: 100%; }
    .form .row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- ошибка в консоли ---------- */
.console-error {
    display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; padding: 10px 12px;
    border-radius: 8px; border: 1px solid rgba(255, 84, 112, .35); background: rgba(255, 84, 112, .07);
    font-family: var(--sans); font-size: 13px;
}
.console-error b { display: flex; align-items: center; gap: 7px; color: var(--bad); font-weight: 600; }
.console-error span { color: var(--muted); }
.console-in input:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- цветной лог и его фильтры ---------- */
.log.colored { white-space: normal; }
.log.colored > div { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 0 0 10px; border-left: 2px solid transparent; }

:root {
    --k-lua: #5aa9ff; --k-lua-error: #ff5470; --k-engine: #78c896; --k-state: #3fd8d0; --k-players: #d9a6ff;
    --k-gc: #5f8f78; --k-warn: #ffb84d; --k-crash: #ff5470; --k-plugin: #a88bff; --k-chat: #f2f4f9; --k-tool: #7b8398;
}
.l-lua { color: var(--k-lua); }
.l-lua-error { color: var(--k-lua-error); border-left-color: var(--k-lua-error) !important; background: rgba(255, 84, 112, .06); }
.l-engine { color: var(--k-engine); }
.l-state { color: var(--k-state); font-weight: 600; }
.l-players { color: var(--k-players); }
.l-gc { color: var(--k-gc); }
.l-warn { color: var(--k-warn); }
.l-crash { color: #fff; background: rgba(255, 84, 112, .28); border-left-color: var(--k-crash) !important; font-weight: 700; }
.l-plugin { color: var(--k-plugin); }
.l-chat { color: var(--k-chat); }
.l-tool { color: var(--k-tool); }

.hide-lua .l-lua, .hide-lua-error .l-lua-error, .hide-engine .l-engine, .hide-state .l-state,
.hide-players .l-players, .hide-gc .l-gc, .hide-warn .l-warn, .hide-crash .l-crash,
.hide-plugin .l-plugin, .hide-chat .l-chat, .hide-tool .l-tool { display: none; }

.legend-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legend-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.check.group { font-weight: 700; font-size: 11.5px; letter-spacing: .08em; color: var(--text); margin-right: 4px; }
button.legend {
    height: 26px; padding: 0 10px; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500;
    background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--text);
}
button.legend .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
button.legend.off { opacity: .38; text-decoration: line-through; }
.k-lua { --dot: var(--k-lua); } .k-lua-error { --dot: var(--k-lua-error); } .k-engine { --dot: var(--k-engine); }
.k-state { --dot: var(--k-state); } .k-players { --dot: var(--k-players); } .k-gc { --dot: var(--k-gc); }
.k-warn { --dot: var(--k-warn); } .k-crash { --dot: var(--k-crash); } .k-plugin { --dot: var(--k-plugin); }
.k-chat { --dot: var(--k-chat); } .k-tool { --dot: var(--k-tool); }

/* ---------- ник лобби ---------- */
.card-sub { min-height: 19px; margin-top: -8px; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.title-row h1 { min-width: 0; }
.lobby-sub { margin-top: -4px; color: var(--muted); font-size: 15px; font-weight: 550; }
button.small { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
button.small:hover:not(:disabled) { color: var(--text); }

/* ---------- мигание изменившейся карточки ---------- */
/* Карточки не «въезжают»: обновление дашборда бесшовное. Изменилось существенное
   (состояние лобби, стадия игры, число игроков) — карточка секунду светится. */
@keyframes flash {
    0%   { box-shadow: 0 0 0 0 transparent; }
    25%  { box-shadow: 0 0 0 1px var(--glow, var(--accent)), 0 0 28px 2px var(--glow, var(--accent)); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.flash { animation: flash 1.1s ease-out; }
.card.tone-ok { --glow: rgba(61, 220, 151, .55); }
.card.tone-warn { --glow: rgba(255, 184, 77, .55); }
.card.tone-bad { --glow: rgba(255, 84, 112, .6); }
.card.tone-idle { --glow: rgba(140, 150, 175, .5); }
.lobby-head.flash { animation: none; }
.lobby-head.flash .lobby-badges .badge { animation: flash 1.1s ease-out; --glow: rgba(255, 107, 61, .55); }

/* ---------- выпадающие списки и выбор карты ---------- */
select {
    width: 100%; height: 42px; padding: 0 38px 0 14px; font: inherit; color: var(--text); cursor: pointer;
    background: #0c0f15 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s; text-overflow: ellipsis;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 61, .18); }
select:disabled { opacity: .55; cursor: not-allowed; }
select option { background: var(--surface-2); color: var(--text); }

.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.head-row .copy { margin-top: 0; }
.map-pick {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0c0f15; color: var(--muted); font-size: 13px;
}
.map-pick select { width: auto; min-width: 190px; max-width: 320px; height: 34px; border: 0; background-color: transparent; box-shadow: none; font-weight: 550; }
.map-pick:focus-within { border-color: var(--accent); }
@media (max-width: 860px) { .map-pick, .map-pick select { width: 100%; max-width: none; } }

/* ---------- плагины ---------- */
.plugins { display: flex; flex-direction: column; gap: 14px; }
.plugin-list { display: flex; flex-direction: column; gap: 14px; }
.plugin {
    display: flex; flex-direction: column; gap: 12px; padding: 18px 20px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
    border-left: 3px solid var(--idle); transition: border-color .2s;
}
.plugin.on { border-left-color: var(--accent); }
.plugin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.plugin-head h3 { margin-bottom: 2px; }
.plugin-head .badge { max-width: 100%; height: auto; min-height: 24px; padding: 3px 10px; white-space: normal; text-align: left; }
.plugin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plugin-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plugin-fields label > span { font-size: 12.5px; color: var(--muted); }
.plugin-fields label.check { flex-direction: row; align-items: center; gap: 8px; align-self: end; min-height: 38px; }
.field-row { display: flex; align-items: center; gap: 6px; }
.field-row input { min-width: 0; }
.field-row .small { flex: none; width: 42px; height: 42px; }
.plugin-actions { display: flex; justify-content: flex-end; gap: 10px; }
.badge.idle { color: var(--muted); }

/* ---------- плагины: шапка, каталог, порядок, проверка ---------- */
.plugin-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plugin-bar .hint { flex: 1; min-width: 260px; }
.plugin-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plugin-side { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.arrows { display: flex; gap: 4px; }
.arrows .small { width: 30px; height: 30px; }
.grip { display: inline-flex; padding: 6px 2px; color: var(--dim); cursor: grab; border-radius: 6px; }
.grip:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.grip:active { cursor: grabbing; }
.plugin.dragging { opacity: .45; border-style: dashed; }

.catalog { display: flex; flex-direction: column; gap: 10px; }
.catalog-item {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.catalog-item h3 { display: inline; margin-right: 8px; }
.catalog-item p { margin-top: 6px; }
.catalog-item button { flex: none; }

.probe {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13px;
}
.probe b { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.probe span { color: var(--muted); }
.probe code { font-family: var(--mono); color: var(--text); overflow-wrap: anywhere; }
.probe.tone-ok { border-color: rgba(61, 220, 151, .4); background: rgba(61, 220, 151, .07); }
.probe.tone-ok b { color: var(--ok); }
.probe.tone-bad { border-color: rgba(255, 84, 112, .4); background: rgba(255, 84, 112, .07); }
.probe.tone-bad b { color: var(--bad); }
.probe.tone-warn b { color: var(--warn); }
.probe.tone-idle b { color: var(--muted); }

/* ---------- панель обновилась ---------- */
.update-bar {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px;
    border-radius: 14px; background: var(--surface-3); border: 1px solid var(--accent); box-shadow: var(--shadow);
    animation: toast-in .25s ease-out; font-size: 13.5px;
}
.update-bar .icon { color: var(--accent); }
.update-bar button { flex: none; height: 34px; }

/* ---------- отключённый плагин ---------- */
.plugin.paused { border-left-color: var(--idle); background: var(--surface); }
.plugin.paused .plugin-name h3, .plugin.paused > .muted, .plugin.paused .plugin-fields, .plugin.paused .probe { opacity: .5; }

/* ---------- ссылка из блока плагина ---------- */
.plugin-actions .grow { flex: 1; }
a.button-link {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-weight: 550; text-decoration: none;
    transition: background .15s, border-color .15s;
}
a.button-link:hover { background: var(--surface-3); border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---------- автоматика лобби ---------- */
.auto-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.auto-row .check { gap: 7px; }
.auto-row input.players { width: 62px; height: 30px; padding: 0 8px; text-align: center; font-variant-numeric: tabular-nums; }
.auto-note { color: var(--dim); font-size: 12.5px; }
.auto-note:empty { display: none; }

/* ---------- обновление кастомки ---------- */
button.update { height: 36px; }
button.update.has-update { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 0 rgba(255, 107, 61, .5); animation: pulse 2.2s infinite; }
button.update:disabled { opacity: .45; }

/* ---------- страница баланса: подписи ---------- */
.range-hint { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 6px; }
.hint.top { margin: -6px 0 2px; }
.param-name { margin-bottom: 8px; }
.param-head .param-name { margin-bottom: 0; }

/* ---------- одна страница: меню лобби слева, панель лобби, консоль справа ---------- */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.shell > main { max-width: 1320px; width: 100%; }
.shell > main.wide { max-width: none; padding-right: 18px; padding-bottom: 20px; }
.side-menu {
    position: sticky; top: 0; height: calc(100vh - 64px); overflow-y: auto; padding: 22px 10px 22px 16px;
    border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px;
}
.side-title { margin: 14px 8px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.side-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); border: 1px solid transparent; }
.side-item:hover { background: var(--surface-2); text-decoration: none; }
.side-item.active { background: var(--surface-2); border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--accent); }
.side-item .icon { color: var(--accent); flex: none; }
.side-text { display: flex; flex-direction: column; min-width: 0; }
.side-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-text small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--idle); margin: 0 3px; }
.side-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(61, 220, 151, .6); }
.side-dot.warn { background: var(--warn); }
.side-dot.bad { background: var(--bad); }
.side-empty { color: var(--dim); font-size: 13px; margin: 4px 10px; }
.side-launch { margin-top: 12px; justify-content: flex-start; }

.lobby-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.lobby-side { min-width: 0; }
.lobby-side .tab-panels { overflow-x: auto; }
.lobby-side table td, .lobby-side table th { white-space: nowrap; }

/* консоль открыта — управление уже: шапка в столбик */
.lobby-layout.console-open .lobby-head { flex-direction: column; align-items: stretch; gap: 14px; }
.lobby-layout.console-open .lobby-actions { margin-left: 0; }
.lobby-layout.console-open .lobby-title .copy { min-width: 0; }
.quick-sites { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.site-button {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.site-button:hover:not(:disabled) { background: var(--surface-3); text-decoration: none; }
.site-button .icon { color: var(--accent); }
.site-button.square { width: 36px; padding: 0; justify-content: center; }
.site-button.off, .site-button:disabled { opacity: .45; cursor: default; }

.lobby-console {
    /* по высоте окна: шапка 64 + отступ main 34 + низ 20 — сама консоль прокрутку страницы не добавляет */
    position: sticky; top: 80px; height: calc(100vh - 118px); min-height: 420px; width: min(44vw, 880px);
    display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: #2d2d2d;
}
.console-title {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; flex: none;
    background: #3c3c3c; color: #dcdcdc; font-size: 13px; font-weight: 600; border-bottom: 1px solid #1a1a1a;
}
.console-body { flex: 1; min-height: 0; }
iframe.vconsole { display: block; width: 100%; height: 100%; border: 0; }


.plugin-section { margin: 4px 0 8px; }
.auto-section { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.plugin-section + .hint { margin-bottom: 10px; }
.metamod-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.metamod-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.metamod-main { min-width: 0; }
.metamod-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.metamod-main p { margin-top: 4px; font-size: 12.5px; }
.metamod-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.auto-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); white-space: nowrap; }
.auto-mark input { accent-color: var(--ok); width: 14px; height: 14px; margin: 0; }
.plugin-side .auto-mark { margin-right: 4px; }

@media (max-width: 1180px) {
    .lobby-layout { grid-template-columns: minmax(0, 1fr); }
    .lobby-console { position: relative; top: 0; width: 100%; height: 70vh; }
    }

/* снятая галочка «Автоподключение» — плагин у лобби отключён */
.metamod-row.off { opacity: .6; }
.metamod-row.off:hover { opacity: .85; }
.auto-mark.off { color: var(--muted); }
.auto-mark input:not(:disabled) { cursor: pointer; }
.auto-mark:has(input:not(:disabled)) { cursor: pointer; }

/* ---------- откуда кастомка (Workshop / локальная) и большой мир ---------- */
.source-switch { align-self: flex-start; }
.source-switch button { display: inline-flex; align-items: center; gap: 6px; }
.source-box { display: flex; flex-direction: column; gap: 6px; }
.form label.check { flex-direction: row; flex: none; align-items: center; gap: 8px; }
.world-fields { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.world-fields > .check { color: var(--text); font-weight: 550; align-self: flex-start; }
.world-fields > .check .icon { color: var(--accent); }
.world-details { display: flex; flex-direction: column; gap: 8px; }
.world-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.world-row > label:first-child { flex: 1 1 200px; }
.world-row > .check { height: 42px; }
.world-memory b { font-weight: 600; color: var(--text); }
.world-memory.tone-warn b { color: var(--warn); }
.world-memory.tone-bad, .world-memory.tone-bad b { color: var(--bad); }

.badge.mark-local { color: #c3a6ff; background: rgba(150, 110, 255, .13); gap: 5px; }
.badge.mark-world { color: #7fb4ff; background: rgba(80, 140, 255, .13); gap: 5px; }

.world-panel { padding: 14px 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.world-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.world-head button { height: 34px; }
.world-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.world-title > .icon { color: var(--accent); }
.world-check-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.log.world-status { min-height: 0; max-height: 260px; padding: 10px 14px; }
.log.world-status.tone-ok { border-color: rgba(61, 220, 151, .35); }
.log.world-status.tone-bad { border-color: rgba(255, 84, 112, .5); background: #120a0d; }
.world-status .total { font-weight: 700; }
.world-status .ok { color: var(--ok); }
.world-status .bad { color: var(--bad); }

/* Реплеи */
.badge.mark-rec { color: #ff5470; background: rgba(255, 84, 112, .12); gap: 5px; }
.badge.mark-rec .icon { animation: pulse 2s infinite; border-radius: 50%; }
.game-part { display: flex; flex-direction: column; gap: 14px; }
.game-part[hidden] { display: none; }
.hint.bad .icon { vertical-align: -2px; }
button.warn-text { color: var(--warn); }
.replays-tab { display: flex; flex-direction: column; gap: 12px; }
.replay-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.replay-head .badge { gap: 5px; }
.replay-text { flex: 1 1 260px; font-size: 13px; color: var(--muted); }
.replay-head button { height: 34px; display: inline-flex; align-items: center; gap: 6px; }
table.replays td { vertical-align: middle; }
.replay-players { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.replay-actions a.button-link { height: 30px; padding: 0 10px; }
.replay-settings .row label { flex: 1 1 200px; }
.lua-plugins[hidden], .quick-sites[hidden], .world-panel[hidden], .auto-row label[hidden] { display: none; }
.replays-panel { padding: 16px 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px; }
.replays-panel h4 { margin: 0; }

/* ---------- плагины сервера: обновление доты и проверка плагинов Metamod ---------- */
.side-text small.warn-text { color: var(--warn); }
.side-text small.bad-text { color: var(--bad); }
p.warn-text, span.warn-text { color: var(--warn); }
.dota-banners { display: flex; flex-direction: column; gap: 10px; margin: -8px 0 22px; }
.dota-banners:empty { display: none; }
.dota-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.dota-banner.warn { border-color: rgba(255, 184, 77, .45); background: rgba(255, 184, 77, .07); }
.dota-banner.warn > .icon { color: var(--warn); }
.dota-banner.bad { border-color: rgba(255, 84, 112, .5); background: rgba(255, 84, 112, .08); }
.dota-banner.bad > .icon { color: var(--bad); }
.dota-banner-text { flex: 1 1 320px; font-size: 13.5px; }
.dota-banner-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dota-banner-actions button, .dota-banner-actions a.button-link { height: 32px; }
.dota-hint button.update { height: 30px; margin-left: 4px; vertical-align: middle; }
.check-panel { padding: 16px 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.check-panel h4 { margin: 0; }
.check-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.check-result { display: flex; flex-direction: column; gap: 10px; }
.check-result .metamod-list { margin: 6px 0 0; }
.check-row.tone-bad { border-color: rgba(255, 84, 112, .45); }
.check-row.tone-warn { border-color: rgba(255, 184, 77, .4); }
.check-row details { margin-top: 6px; }
.check-row summary { cursor: pointer; color: var(--muted); font-size: 12.5px; user-select: none; }
ul.check-lines-bad { margin: 6px 0 0; padding-left: 18px; font-family: var(--mono); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
ul.check-lines-bad li + li { margin-top: 3px; }
.log.check-pre { min-height: 0; max-height: 280px; padding: 8px 12px; margin-top: 6px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.metamod-main p.check-problem { font-family: var(--mono); font-size: 12px; color: var(--warn); overflow-wrap: anywhere; }
.job-outcome { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.job-outcome[hidden] { display: none; }
.job-outcome.tone-bad { border-color: rgba(255, 84, 112, .5); }
.job-outcome.tone-warn { border-color: rgba(255, 184, 77, .45); }
.job-outcome.tone-ok { border-color: rgba(61, 220, 151, .35); }
.job-outcome-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
ul.check-problems { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
ul.check-problems code { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }