/* Nest · панель управления. Чёрная основа, «жидкое стекло», рыжие акценты. */
:root {
  --bg: #050505;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.075);
  --glass-hi: rgba(255, 255, 255, 0.12);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-hi: rgba(255, 255, 255, 0.18);
  --text: #f4f1ee;
  --muted: #9a938d;
  --brand: #ff8a1f;
  --brand-2: #ffb066;
  --brand-ink: #1b0d02;
  --ok: #4ade80;
  --bad: #f87171;
  --warn: #fbbf24;
  --info: #93a5ff;
  --radius: 18px;
  --blur: blur(22px) saturate(160%);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { color: #ffd3a6; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }
h2 { font-size: 15px; }
small, .muted { color: var(--muted); }
code { background: rgba(255, 138, 31, .12); color: var(--brand-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 138, 31, .35); }

/* Фон: рыжие абстракции под стеклом */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 600px at 110% -10%, rgba(255, 120, 20, .12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(255, 90, 0, .10), transparent 60%), var(--bg); }
.bg .orb { position: absolute; border-radius: 50%; filter: blur(2px);
  background: radial-gradient(circle at 32% 28%, #fff1e2 0%, #ffad5c 12%, #ff7a12 36%, #8a2c05 70%, #1a0700 100%);
  box-shadow: 0 0 120px rgba(255, 122, 18, .35), inset -20px -26px 50px rgba(0, 0, 0, .5); opacity: .55; }
.bg .o1 { width: 340px; height: 340px; right: -90px; top: 120px; }
.bg .o2 { width: 160px; height: 160px; left: 30%; bottom: -60px; opacity: .35; }
.bg .o3 { width: 70px; height: 70px; left: 260px; top: 70px; opacity: .45; }
.bg .shapes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .3s; }
.bg .ring { position: absolute; width: 760px; height: 760px; right: -300px; top: -420px; border-radius: 50%; border: 1.5px solid rgba(255, 138, 31, .22); box-shadow: 0 0 60px rgba(255, 138, 31, .12), inset 0 0 60px rgba(255, 138, 31, .08); }

/* Стеклянные поверхности */
.glass, .card, .stat, .side, .login-card, dialog, .toast {
  background: linear-gradient(145deg, var(--glass-2), var(--glass));
  border: 1px solid var(--stroke);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .45);
}

/* Вход */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; border-radius: 26px; padding: 36px 32px; text-align: center; }
.login-card h1 { font-size: 22px; margin: 18px 0 6px; }
.logo-img { width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 0 50px rgba(255, 122, 18, .45); }
.error { color: var(--bad); }

/* Каркас */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { display: flex; flex-direction: column; position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border-radius: 24px; }
.brand { display: flex; gap: 12px; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--stroke); }
.brand img { width: 36px; height: 36px; border-radius: 10px; background: var(--glass-2); box-shadow: 0 0 24px rgba(255, 122, 18, .35); }
.brand b { font-size: 15px; }
.brand small { display: block; font-size: 11px; }
nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
nav a { color: var(--text); padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; }
nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
nav a.active { background: linear-gradient(90deg, rgba(255, 138, 31, .22), rgba(255, 138, 31, .04)); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .28); }
.nav-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 16px 12px 4px; }
.me { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--stroke); }
.me img { width: 32px; height: 32px; border-radius: 50%; background: var(--glass-2); }
.me div { flex: 1; min-width: 0; }
.me b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { font-size: 11px; }
main { min-width: 0; }
.top { display: flex; align-items: center; gap: 12px; padding: 22px 28px 10px; position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(5, 5, 5, .85), rgba(5, 5, 5, 0)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.top h1 { font-size: 24px; flex: 1; }
.menu { display: none; }
#view { padding: 14px 28px 40px; max-width: 1320px; }

/* Кнопки и поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--stroke-hi); background: rgba(255, 255, 255, .06); color: var(--text); font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; transition: .15s; }
.btn:hover { background: rgba(255, 255, 255, .11); color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #ff9b3d, #f07508); border-color: rgba(255, 190, 120, .55); color: var(--brand-ink); box-shadow: 0 8px 24px rgba(255, 122, 18, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ok { background: rgba(74, 222, 128, .16); border-color: rgba(74, 222, 128, .45); color: var(--ok); }
.btn.danger { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .45); color: var(--bad); }
.btn.small { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; height: 44px; margin-top: 8px; }
.icon-btn { background: none; border: 0; color: var(--muted); font-size: 17px; cursor: pointer; padding: 4px 7px; border-radius: 8px; }
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.link-btn:hover { color: var(--text); }
.danger-text:hover { color: var(--bad); }
input, select, textarea { width: 100%; background: rgba(0, 0, 0, .35); color: var(--text); border: 1px solid var(--stroke-hi); border-radius: 12px; padding: 9px 12px; font: inherit; transition: border-color .15s, box-shadow .15s; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
select option { background: #151515; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255, 138, 31, .7); box-shadow: 0 0 0 4px rgba(255, 138, 31, .15); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); }
input[type="color"] { height: 40px; padding: 4px; cursor: pointer; }
label.field { display: flex; flex-direction: column; gap: 6px; }
label.field > span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
label.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hint { font-size: 12.5px; color: var(--muted); }
.help { margin: 2px 0 0; font-size: 12.5px; color: #b9b1a9; line-height: 1.5; padding-left: 10px; border-left: 2px solid rgba(255, 138, 31, .35); }

/* Раскладка */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > .card + .card, .grid > div > .card + .card { margin-top: 0; }
.grid > div > .card + .card { margin-top: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; width: 90px; height: 90px; right: -30px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 138, 31, .35), transparent 70%); }
.stat small { display: block; font-size: 12px; }
.stat b { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat b.stat-sm { font-size: 16px; display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card { border-radius: var(--radius); }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--stroke); }
.card > .body { padding: 18px; }
.card + .card { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer, .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 14px; }
.nowrap { white-space: nowrap; }

/* Таблицы и списки */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: rgba(255, 138, 31, .06); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user img, .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--glass-2); flex: none; object-fit: cover; border: 1px solid var(--stroke); }
.user b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user small { display: block; font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--muted); border: 1px solid var(--stroke); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); }
.pill.bad { color: var(--bad); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .07); }
.pill.warn { color: var(--warn); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); }
.pill.brand { color: var(--brand-2); border-color: rgba(255, 138, 31, .4); background: rgba(255, 138, 31, .1); }
.pill.info { color: var(--info); border-color: rgba(147, 165, 255, .4); background: rgba(147, 165, 255, .08); }
.role-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--stroke); }
.tabs button { background: none; border: 0; color: var(--muted); padding: 7px 14px; cursor: pointer; font: inherit; border-radius: 10px; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--brand-ink); background: linear-gradient(180deg, #ffa24a, #f07a10); font-weight: 600; }
.tabs input, .tabs select { width: auto; }
.empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.timeline { display: flex; flex-direction: column; }
.timeline .item { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.timeline .item:last-child { border-bottom: 0; }
.timeline .item small { display: block; }
.qa dt { font-size: 12px; color: var(--muted); }
.qa dd { margin: 3px 0 14px; white-space: pre-wrap; word-break: break-word; }
.chat .msg { display: flex; gap: 10px; padding: 9px 0; }
.chat .msg p { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
.chat .msg.deleted p { text-decoration: line-through; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; }
.chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.chip button:hover { color: var(--bad); }

/* Комментарии */
.comment-new, .comment { display: flex; gap: 12px; }
.comment-new { padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--stroke); }
.comment { padding: 12px 0; }
.comment-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.comment-text { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; }
.comment .avatar, .comment-new .avatar { width: 38px; height: 38px; }

/* Аудит и система */
.audit-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.audit-row:last-child { border-bottom: 0; }
.audit-details { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--stroke); font-size: 13px; color: #cfc8c1; }
.audit-details div + div { margin-top: 3px; }
.action-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.action-row:last-child { border-bottom: 0; }
.action-row small { display: block; }

/* Конструктор анкет */
.guide { margin-bottom: 16px; padding: 14px 18px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(255, 138, 31, .14), rgba(255, 138, 31, .03)); border: 1px solid rgba(255, 138, 31, .3); }
.guide summary { cursor: pointer; font-weight: 600; }
.guide ol { margin: 10px 0 0; padding-left: 20px; }
.guide li + li { margin-top: 6px; }
.adv summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.adv[open] { width: 100%; }
.q-item { border: 1px solid var(--stroke); border-radius: 14px; padding: 14px; background: rgba(0, 0, 0, .25); }
.q-item header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.q-item header b { flex: 1; }
.preview { background: #313338; color: #dbdee1; border-radius: 12px; padding: 14px; font-size: 14px; margin-top: 6px; }
.preview .v2 { border-left: 4px solid var(--brand); background: #2b2d31; border-radius: 8px; padding: 12px 14px; }
.preview .v2-banner { width: 100%; border-radius: 6px; display: block; margin-bottom: 10px; }
.preview .v2-emoji { width: 18px; height: 18px; vertical-align: -3px; }
.preview .v2 h4 { font-size: 16px; margin-bottom: 8px; color: #f2f3f5; }
.preview .v2 p { margin: 0 0 12px; white-space: pre-wrap; }
.preview .v2 .foot { font-size: 12px; color: #949ba4; margin-top: 10px; }
.preview .dbtn { display: inline-flex; align-items: center; gap: 6px; background: #5865f2; color: #fff; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; }

/* Всплывающее */
.toast { position: fixed; bottom: 22px; right: 22px; border-left: 3px solid var(--brand); border-radius: 14px; padding: 12px 16px; max-width: 420px; z-index: 50; white-space: pre-line; }
.toast.bad { border-left-color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }
dialog { color: var(--text); border-radius: 22px; padding: 0; width: min(540px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog form { padding: 22px; }
dialog h2 { margin-bottom: 14px; font-size: 18px; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 8px auto 8px 8px; margin: 0; width: 270px; height: auto; z-index: 20; transform: translateX(-110%); transition: transform .2s; background: rgba(12, 12, 12, .92); }
  .side.open { transform: none; }
  .menu { display: inline-block; }
  #view { padding: 12px 16px 32px; }
  .top { padding: 14px 16px 8px; }
  .top h1 { font-size: 19px; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}
.access-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.access-row:last-child { border-bottom: 0; }
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sec { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(0,0,0,.25); cursor: pointer; }
.sec:has(input:checked) { border-color: rgba(255,138,31,.55); background: rgba(255,138,31,.08); }
.sec input { margin-top: 3px; }
.sec small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 960px) { .access-row { grid-template-columns: 1fr; } .sec-grid { grid-template-columns: 1fr; } }

/* Система: логи и консоль */
pre.log { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid var(--stroke); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; color: #ffd7b0; }
.console-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.console-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--stroke); }
.console-item .btn { align-self: flex-start; margin-top: 6px; }

/* Состав */
.card.squad { border-top: 3px solid var(--sq, var(--brand, #F28D28)); }
.roster-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.roster-row:last-child { border-bottom: 0; }
.roster-row .user { flex: 1; min-width: 0; }
.roster-row select { width: auto; max-width: 190px; padding: 6px 8px; }
.roster-row .capt { opacity: .3; filter: grayscale(1); }
.roster-row .capt.on { opacity: 1; filter: none; }
.slotbar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 10px; }
.slotbar i { display: block; height: 100%; background: var(--sq, #F28D28); border-radius: 6px; }
@media (max-width: 640px) { .roster-row { flex-wrap: wrap; } .roster-row select { max-width: 100%; flex: 1; } }
.bad-text { color: #ff6b6b; }
.brand-pick { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.brand-opt { display:grid; gap:8px; padding:8px; border-radius:14px; border:2px solid var(--stroke); background:var(--glass); color:var(--text); font:inherit; cursor:pointer; text-align:left; transition:border-color .2s, transform .15s; }
.brand-opt img { width:100%; border-radius:10px; display:block; }
.brand-opt:hover { transform:translateY(-2px); } .brand-opt.on { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,138,31,.15); cursor:default; }
@media (max-width:640px) { .brand-pick { grid-template-columns:1fr; } }

/* Подписка Hoodlume */
.lic-banner { display:flex; align-items:center; gap:14px; justify-content:space-between; margin:0 28px 14px; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(242,141,40,.14); }
.lic-banner.bad { background:rgba(237,66,69,.16); border-color:rgba(237,66,69,.45); }
.lic-banner.info { background:rgba(88,101,242,.16); border-color:rgba(88,101,242,.45); }
.lic-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.lic-head small { display:block; } .lic-plan { font-size:26px; }
.lic-mods { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.lic-mod { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); opacity:.5; }
.lic-mod.on { opacity:1; border-color:rgba(242,141,40,.4); } .lic-mod span { width:22px; text-align:center; font-weight:700; color:var(--brand, #F28D28); }
.stack { display:grid; gap:12px; }
@media (max-width:760px) { .lic-banner { margin:0 14px 12px; flex-wrap:wrap; } }