@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #0d0e10;
  --bg-2: #131518;
  --panel: #181a1e;
  --panel-2: #1f2227;
  --line: #2a2e35;
  --text: #e9e6df;
  --muted: #8d9099;
  --accent: #ff6b2c;
  --accent-2: #ffb347;
  --ok: #4ade80;
  --bad: #f05252;
  --warn: #f5b942;
  --radius: 14px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --head: 'Unbounded', 'Manrope', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 'Manrope', system-ui, sans-serif; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); padding: .6em 1.1em; border-radius: 10px; display: inline-flex; align-items: center; gap: .5em;
  transition: background .15s, border-color .15s, transform .05s; text-decoration: none;
}
button:hover, .btn:hover { border-color: #3a3f48; background: #262a30; text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #140a04; }
.btn-accent:hover { background: #ff7f47; border-color: #ff7f47; }
.btn-sm { padding: .35em .75em; font-size: .85em; border-radius: 8px; }
.btn-danger { color: var(--bad); }
input[type=text], input[type=search], textarea, select {
  font: inherit; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: .6em .8em; width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* ---------- лендинг ---------- */
.landing { min-height: 100vh; background:
  radial-gradient(900px 500px at 85% -10%, rgba(255,107,44,.18), transparent 60%),
  radial-gradient(700px 400px at -10% 30%, rgba(255,179,71,.08), transparent 60%), var(--bg); }
.nav { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.logo { font-family: var(--head); font-size: 20px; display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #140a04; font-size: 15px; }
.hero { max-width: 1180px; margin: 0 auto; padding: 70px 24px 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lead { color: var(--muted); font-size: 18px; max-width: 34em; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fake-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); margin-bottom: 10px; border: 1px solid var(--line); }
.fake-alert b { display: block; }
.fake-alert small { color: var(--muted); }
.fake-alert .ico { font-size: 20px; }
.features { max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.feature .ico { font-size: 26px; margin-bottom: 8px; }
.feature h3 { font-size: 17px; }
.feature p { color: var(--muted); margin: 0; }
.steps { max-width: 1180px; margin: 0 auto; padding: 0 24px 90px; }
.steps ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; color: var(--muted); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); color: var(--accent); display: block; font-size: 22px; margin-bottom: 6px; }
.steps li b { color: var(--text); display: block; }
footer { text-align: center; color: var(--muted); padding: 30px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; }
  .features, .steps ol { grid-template-columns: 1fr; }
}

/* ---------- панель ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--bg-2); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.sidebar .logo { padding: 0 8px 18px; }
.tab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted); cursor: pointer; font-weight: 600; border: 1px solid transparent; }
.tab:hover { color: var(--text); background: var(--panel); }
.tab.active { color: var(--text); background: var(--panel); border-color: var(--line); }
.tab .badge { margin-left: auto; }
.sidebar .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); }
.sidebar .me img:not([src]) { display: none; }
.sidebar .me img { width: 34px; height: 34px; border-radius: 8px; background: var(--panel-2); }
.sidebar .me .n { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.main { padding: 26px 30px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.topbar h2 { margin: 0; font-size: 22px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.bad { background: var(--bad); }
.dot.warn { background: var(--warn); }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; min-width: 0; }
.card h3 { font-size: 13px; color: var(--muted); font-family: inherit; text-transform: uppercase; letter-spacing: .06em; }
.stat { font-family: var(--head); font-size: 28px; }
.stat small { font-size: 14px; color: var(--muted); font-family: 'Manrope', system-ui, sans-serif; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.item .grow { flex: 1; min-width: 0; }
.item .t { font-weight: 700; }
.item .s { color: var(--muted); font-size: 13px; }
.pill { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); }
.pill.ok { color: var(--ok); border-color: rgba(74,222,128,.3); }
.pill.bad { color: var(--bad); border-color: rgba(240,82,82,.3); }
.pill.warn { color: var(--warn); border-color: rgba(245,185,66,.3); }
.toggle { position: relative; width: 46px; height: 26px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; background: #2b2f36; border-radius: 999px; cursor: pointer; transition: .2s; }
.toggle span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #c7c9ce; border-radius: 50%; transition: .2s; }
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::before { transform: translateX(20px); background: #fff; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty .ico { font-size: 34px; }
.steps-inline { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.steps-inline li { counter-increment: s; display: flex; gap: 12px; }
.steps-inline li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.steps-inline li.done::before { content: '✓'; color: var(--ok); }
.events { max-height: 520px; overflow: auto; }
.ev { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ev time { color: var(--muted); font-family: var(--mono); font-size: 12px; flex: none; padding-top: 2px; }
.ev.alarm, .ev.decay { color: #ffb4a6; }
.chat { display: flex; flex-direction: column; height: 360px; }
.chat .msgs { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 6px; }
.chat .msg b { color: var(--accent-2); }
.chat form { display: flex; gap: 8px; margin-top: 10px; }
.items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.items .pill { color: var(--text); }
.toast-wrap { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 50; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: 10px; max-width: 360px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tin .2s ease-out; }
.toast.priority { border-left-color: var(--bad); background: #2a1715; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
.hidden { display: none !important; }
.section { display: none; }
.section.active { display: block; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting .s { color: var(--muted); font-size: 13px; }
.server-card { display: flex; gap: 14px; align-items: center; }
.server-card img { width: 86px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--panel-2); }

/* ---------- карта ---------- */
.map-wrap { position: relative; height: calc(100vh - 120px); min-height: 480px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #0a1520; }
.map-wrap canvas { display: block; }
.map-ui { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.map-ui button.on { border-color: var(--accent); color: var(--accent); }
.map-side { position: absolute; top: 14px; right: 14px; width: 230px; max-height: calc(100% - 28px); overflow: auto; background: rgba(19,21,24,.88); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; padding: 12px; z-index: 2; }
.map-side .p { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.map-side .p:hover { background: var(--panel-2); }
.map-label { position: absolute; transform: translate(-50%, -100%); pointer-events: none; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(10,10,12,.78); white-space: nowrap; border: 1px solid rgba(255,255,255,.08); }
.map-label.mon { font-weight: 500; color: #d9d4c7; background: rgba(10,10,12,.55); font-size: 11px; }
.map-label.ev { color: var(--accent-2); }
.map-label.dead { color: var(--bad); }
.map-label.off { color: var(--muted); }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 10px; }
  .sidebar .logo, .sidebar .me { display: none; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .main { padding: 18px; }
  .map-side { display: none; }
}

/* ---------- вход через сервер ---------- */
.rl-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 60; display: grid; place-items: center; padding: 10px; }
.rl-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; width: min(420px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.rl-status { font-size: 13px; color: var(--accent-2); min-height: 18px; }
.rl-screen { position: relative; width: 100%; aspect-ratio: 393 / 760; max-height: 62vh; background: #000; border-radius: 10px; overflow: hidden; margin: 0 auto; touch-action: none; }
.rl-screen img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.rl-url { position: absolute; left: 6px; bottom: 6px; font-size: 10px; color: #aaa; background: rgba(0,0,0,.6); padding: 1px 6px; border-radius: 6px; max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-keys button { flex: 1 0 auto; justify-content: center; }