/* ndze · пиксельная тема админки и панели серверов — поверх ui.css/app.css.
   Та же палитра, что у сайта и профиля: крем #E8E8C6, серый #474744, тёмный #252525, неоновые розовый и зелёный, стекло. */
@import url('../fonts/fonts.css?v=2');

:root {
  --bg: #101010;
  --bg-2: rgba(16, 16, 16, .55);
  --side: rgba(12, 12, 12, .72);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .065);
  --surface-3: rgba(232, 232, 198, .1);
  --line: rgba(232, 232, 198, .1);
  --line-2: rgba(232, 232, 198, .2);
  --text: #e8e8c6;
  --cream: #e8e8c6;
  --muted: #a3a38f;
  --dim: #6f6f64;
  --grey: #474744;
  --mid: #252525;
  --pink: #ff2e88;
  --accent-rgb: 60, 255, 90;
  --blue: #9fb7ff;
  --green: #3cff5a;
  --amber: #ffc94a;
  --red: #ff2e88;
  --radius: 16px;
  --radius-sm: 9px;
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --px: 'Handjet', 'JetBrains Mono', monospace;
  --label: 'Press Start 2P', 'JetBrains Mono', monospace;
  --glass: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .045));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 20px 50px -26px rgba(0, 0, 0, .9);
}
body[data-accent="admin"] { --accent-rgb: 60, 255, 90; }
body { font: 400 14px/1.6 var(--font); letter-spacing: -.01em; background: var(--bg); }
::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 2px dashed var(--green); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: #34342f; border-radius: 0; border: 2px solid var(--bg); }

/* фон: пиксельная сетка + неоновые пятна (как на сайте) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 12% 8%, rgba(255, 46, 136, .10), transparent 60%),
    radial-gradient(42vmax 42vmax at 92% 40%, rgba(60, 255, 90, .055), transparent 60%),
    radial-gradient(40vmax 40vmax at 50% 105%, rgba(232, 232, 198, .05), transparent 60%),
    linear-gradient(rgba(232, 232, 198, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 232, 198, .03) 1px, transparent 1px);
  background-size: auto, auto, auto, 28px 28px, 28px 28px;
}
.space { display: none; }

/* ---------- стекло ---------- */
.glass, .panel-box, .modal, .menu, .gs-res, .toast {
  background: var(--glass), rgba(20, 20, 19, .55);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(232, 232, 198, .13); box-shadow: var(--glass-shadow);
}
.modal, .menu, .gs-res, .toast { background: var(--glass), rgba(22, 22, 21, .92); }
.card-title { font-family: var(--px); font-size: 24px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; text-transform: uppercase; }
.card-title .sub { font-family: var(--font); text-transform: none; }

/* ---------- каркас ---------- */
.side { border-right: 1px solid var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.side-head .brand { font-family: var(--px); font-size: 26px; font-weight: 700; letter-spacing: .02em; }
.side-head .brand img { width: 28px; height: 28px; }
.side-head .brand small { font-family: var(--label); font-size: 7.5px; color: var(--pink); letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; vertical-align: 4px; }
.grp-h { font-family: var(--label); font-size: 7.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.nav-item { border-radius: 8px; font-size: 13px; }
.nav-item:hover { background: rgba(232, 232, 198, .05); }
.nav-item.on { color: #141414; background: var(--cream); border-color: var(--cream); font-weight: 700;
  box-shadow: 0 0 0 1px var(--cream), 0 10px 26px -14px rgba(232, 232, 198, .6); }
.nav-item.on svg { color: #141414; }
.nav-item.on .count { background: #141414; color: var(--cream); }
.nav-link { border-radius: 8px; font-size: 13px; }
.nav-link i::after { border-radius: 0; background: var(--pink); width: 4px; height: 4px; }
.topbar { background: rgba(12, 12, 12, .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.gsearch, .balance-chip, .user-btn { border-radius: 10px; background: rgba(255, 255, 255, .04); }
.gsearch kbd { font-family: var(--mono); border-radius: 4px; }
.top-links a { font-size: 13px; }
.top-links a:hover { color: var(--green); }
.crumbbar { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.crumbbar span:last-child { color: var(--green); }
.page-head { border-bottom: 1.5px dashed var(--line-2); }
.page-head h1 { font-family: var(--px); font-size: 44px; font-weight: 700; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.ph-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--cream); border: 0; color: #141414;
  box-shadow: 0 -2px 0 0 var(--cream), 0 2px 0 0 var(--cream), -2px 0 0 0 var(--cream), 2px 0 0 0 var(--cream); margin: 2px; }
.ph-ico svg { width: 20px; height: 20px; }
.app-foot { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- кнопки ---------- */
.btn { border-radius: 9px; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .04); font-weight: 600; font-size: 13px; }
.btn:hover { background: rgba(232, 232, 198, .1); border-color: rgba(232, 232, 198, .45); }
.btn.primary, .btn.white { background: var(--cream); color: #141414; border-color: var(--cream); font-weight: 700; border-radius: 0;
  box-shadow: 0 -3px 0 0 var(--cream), 0 3px 0 0 var(--cream), -3px 0 0 0 var(--cream), 3px 0 0 0 var(--cream), 0 6px 0 3px rgba(0, 0, 0, .35); margin: 3px; }
.btn.primary:hover, .btn.white:hover { background: #fffbe0; border-color: #fffbe0;
  box-shadow: 0 -3px 0 0 #fffbe0, 0 3px 0 0 #fffbe0, -3px 0 0 0 #fffbe0, 3px 0 0 0 #fffbe0, 0 6px 0 3px rgba(0, 0, 0, .35); }
.btn.primary:active { transform: translateY(2px); }
.btn.accent { background: var(--green); color: #0b2310; border-color: var(--green); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(232, 232, 198, .07); color: var(--text); }
.btn.danger { color: var(--pink); border-color: rgba(255, 46, 136, .45); background: rgba(255, 46, 136, .07); }
.btn.danger:hover { border-color: var(--pink); background: rgba(255, 46, 136, .15); }

/* ---------- формы ---------- */
.field > label, .label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.input, select.input, textarea.input { border-radius: 8px; border: 1.5px solid var(--line-2); background: rgba(10, 10, 10, .5); }
.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(60, 255, 90, .14); }
select.input option { background: #1a1a19; }
.check, .type-pick label, .plan-pick label, details.more { border-radius: 10px; background: rgba(10, 10, 10, .35); }
.check .box { border-radius: 0; border-color: var(--line-2); }
.check .box svg { color: #0b2310; }
.check input:checked ~ .box { background: var(--green); border-color: var(--green); }
.check:has(input:checked) { border-color: rgba(60, 255, 90, .45); }
.seg { border-radius: 10px; background: rgba(10, 10, 10, .4); }
.seg button { border-radius: 6px; }
.seg button.on { background: var(--cream); color: #141414; font-weight: 700; }
.hint code, .card code { color: var(--green); }

/* ---------- метки, таблицы, табы ---------- */
.tag { border-radius: 0; height: 21px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-width: 1.5px; background: transparent; }
.tag.green { color: var(--green); border-color: rgba(60, 255, 90, .55); background: rgba(60, 255, 90, .06); }
.tag.red { color: var(--pink); border-color: rgba(255, 46, 136, .55); background: rgba(255, 46, 136, .06); }
.tag.amber { color: var(--amber); border-color: rgba(255, 201, 74, .5); background: rgba(255, 201, 74, .05); }
.tag.blue, .tag.accent { color: var(--cream); border-color: rgba(232, 232, 198, .5); background: rgba(232, 232, 198, .07); }
.cc { border-radius: 0; }
.dot { border-radius: 0; }
.count { border-radius: 0; }
.count.hot { background: var(--pink); border-color: var(--pink); color: #fff; }
.table th { font-family: var(--label); font-size: 7.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-top: 12px; padding-bottom: 12px; }
.table td { border-bottom: 1px dashed var(--line); }
.table tbody tr:hover { background: rgba(232, 232, 198, .03); }
.tabs { border-bottom: 1.5px dashed var(--line-2); gap: 6px; }
.tabs button { height: 38px; padding: 0 14px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.tabs button.on { color: #141414; background: var(--cream); }
.tabs button.on::after { display: none; }
.pills button { border-radius: 8px; }
.pills button.on { background: var(--cream); color: #141414; border-color: var(--cream); font-weight: 700; }
.scard { border-radius: 14px; background: rgba(10, 10, 10, .35); }
.scard:hover { border-color: rgba(232, 232, 198, .4); }
.scard .ip { color: var(--green); }

/* ---------- карточки-статистики ---------- */
.stat .sh { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .si2 { color: var(--pink); }
.stat .val { font-family: var(--px); font-size: 46px; font-weight: 700; line-height: .9; letter-spacing: .01em; }
.stat .val small { font-family: var(--font); font-size: 13px; }
.stat .foot a { color: var(--green); }
.ico-box, .srv-ico { border-radius: 9px; background: rgba(232, 232, 198, .07); }
.srv-hero h2 { font-family: var(--px); font-size: 34px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.gauge .gh b { font-family: var(--px); font-size: 34px; }

/* ---------- окна (модалки) ---------- */
.modal-bg { background: rgba(6, 6, 6, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal { border-radius: 16px; padding-top: 56px; }
.modal::before { content: "ndze.exe"; position: absolute; left: 0; right: 0; top: 0; height: 36px; padding: 0 16px; display: flex; align-items: center;
  font-family: var(--label); font-size: 8px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
  border-bottom: 1px solid rgba(232, 232, 198, .12); background: rgba(232, 232, 198, .04); }
.modal::after { content: "×"; position: absolute; right: 12px; top: 7px; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1.5px solid var(--pink); color: var(--pink); font: 700 14px/1 var(--mono); pointer-events: none; }
.modal h3 { font-family: var(--px); font-size: 32px; font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 10px; }
.toast { border-radius: 10px; }
.toast.ok svg { color: var(--green); }

/* ---------- пусто, лог, шаги, шкалы ---------- */
.empty .empty-ico { border-radius: 0; background: var(--cream); border: 0; }
.empty .empty-ico svg { color: #141414; }
.empty h4 { font-family: var(--px); font-size: 28px; text-transform: uppercase; }
.log, .xterm-box { background: rgba(6, 6, 6, .78); border-color: rgba(232, 232, 198, .12); border-radius: 12px; }
.log { color: #d6d6bd; }
.log .hd { color: var(--cream); }
.step { border-radius: 8px; }
.step .si { border-radius: 0; }
.step.running { background: rgba(232, 232, 198, .08); }
.meter { border-radius: 0; height: 8px; background: rgba(232, 232, 198, .08); }
.meter > i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--green) 0 7px, transparent 7px 9px); }
.meter.warn > i { background: repeating-linear-gradient(90deg, var(--amber) 0 7px, transparent 7px 9px); }
.meter.bad > i { background: repeating-linear-gradient(90deg, var(--pink) 0 7px, transparent 7px 9px); }
.usage-row .meter { height: 6px; }
.msg .bubble { border-radius: 10px; }
.msg.staff .bubble { background: rgba(60, 255, 90, .06); border-color: rgba(60, 255, 90, .28); }
.link, .meta-strip [data-copy]:hover { color: var(--green); }

@media (max-width: 860px) {
  .page-head h1 { font-size: 34px; }
  .stat .val { font-size: 38px; }
}