:root {
  --bg: #0f1420;
  --sidebar: #141b2d;
  --sidebar-hover: #1e2740;
  --panel: #ffffff;
  --content-bg: #eef1f6;
  --text: #1c2430;
  --text-dim: #6b7688;
  --line: #dde2ea;
  --accent: #2f8f6b;
  --accent-2: #3b82f6;
  --prod: #2f8f6b;
  --neutral: #d9a62e;
  --unprod: #d14b4b;
  --idle: #9aa3b2;
  --unknown: #b9c0cc;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20,30,50,.08), 0 4px 16px rgba(20,30,50,.06);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--content-bg); color: var(--text); font-size: 14px; }

/* ---------- Логин ---------- */
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh;
  background: radial-gradient(1200px 600px at 30% -10%, #1b2740, var(--bg)); }
.login-card { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow);
  width: 360px; padding: 32px; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .sub { color: var(--text-dim); margin: 0 0 24px; font-size: 13px; }
.brand-dot { width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #49b88a); display: inline-block;
  margin-bottom: 14px; position: relative; }
.brand-dot::after { content:""; position:absolute; inset:11px; border-radius:50%;
  border:3px solid #fff; }

/* ---------- Каркас ---------- */
.shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }
.sidebar { background: var(--sidebar); color: #c5cde0; display: flex; flex-direction: column; }
.sidebar .logo { padding: 18px 20px; font-weight: 700; color: #fff; font-size: 16px;
  display:flex; align-items:center; gap:10px; border-bottom:1px solid #1f2940; }
.sidebar .logo .dot { width:20px;height:20px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent),#49b88a); position:relative;}
.sidebar .logo .dot::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--sidebar);}
.nav { padding: 10px 0; overflow-y: auto; flex: 1; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  color: #aeb8cf; text-decoration: none; cursor: pointer; font-size: 13.5px; border-left: 3px solid transparent; }
.nav a:hover { background: var(--sidebar-hover); color: #fff; }
.nav a.active { background: var(--sidebar-hover); color: #fff; border-left-color: var(--accent); }
.nav .group { padding: 14px 20px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: #5f6c88; }
.sidebar .me { padding: 14px 20px; border-top: 1px solid #1f2940; font-size: 12.5px; color:#8c97b2; }
.sidebar .me b { color:#fff; display:block; font-size:13px; }
.sidebar .me a { color: var(--accent); cursor:pointer; }

.content { overflow-y: auto; padding: 24px 28px; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.page-head h2 { margin: 0; font-size: 19px; }

/* ---------- Элементы ---------- */
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 18px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > .card { flex: 1; min-width: 220px; margin-bottom: 0; }
label.fld { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
input, select, button, textarea { font: inherit; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); }
input:focus, select:focus { outline: 2px solid rgba(47,143,107,.25); border-color: var(--accent); }
.btn { display:inline-flex; align-items:center; gap:7px; padding: 9px 15px; border-radius: 8px;
  border: 1px solid transparent; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; }
.btn:hover { filter: brightness(1.05); }
.btn.secondary { background: #fff; color: var(--text); border-color: var(--line); }
.btn.danger { background: var(--unprod); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity:.5; cursor: default; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing:.03em; }
tbody tr:hover { background: #f7f9fc; }
.right { text-align: right; }
.muted { color: var(--text-dim); }

.badge { display:inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight:600; }
.badge.productive { background: #e3f3ec; color: var(--prod); }
.badge.neutral { background: #fbf2d9; color: #a97e12; }
.badge.unproductive { background: #fbe4e4; color: var(--unprod); }
.badge.idle, .badge.unknown { background: #eef0f4; color: var(--text-dim); }
.badge.high { background:#fbe4e4;color:var(--unprod);}
.badge.medium { background:#fbf2d9;color:#a97e12;}
.badge.low { background:#eef0f4;color:var(--text-dim);}
.dot-online { width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--idle);margin-right:6px;}
.dot-online.on { background: var(--prod); box-shadow:0 0 0 3px rgba(47,143,107,.15); }

.toolbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .fld-wrap { min-width: 150px; }
.toolbar .fld-wrap.sm { min-width: 120px; }

/* ---------- Онлайн-сетка ---------- */
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.tile { background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  cursor: pointer; border: 1px solid var(--line); }
.tile .shot { aspect-ratio: 16/10; background: #0c1018 center/cover no-repeat; position: relative; }
.tile .shot .cat { position:absolute; top:8px; right:8px; }
.tile .shot .off { position:absolute; inset:0; display:flex;align-items:center;justify-content:center;
  color:#6b7688; background:#11161f; font-size:13px; }
.tile .meta { padding: 10px 12px; }
.tile .meta .name { font-weight: 600; display:flex; align-items:center; }
.tile .meta .app { font-size: 12px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Модалка / просмотр ---------- */
.modal-bg { position: fixed; inset:0; background: rgba(10,15,25,.55); display:flex;
  align-items:center; justify-content:center; z-index: 50; }
.modal { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow);
  max-width: 92vw; max-height: 92vh; overflow:auto; padding: 20px; }
.modal h3 { margin: 0 0 14px; }
.modal img { max-width: 80vw; max-height: 68vh; border-radius: 8px; display:block; }
.close-x { float:right; cursor:pointer; color: var(--text-dim); font-size: 20px; line-height:1; }

.kpi { display:flex; gap:16px; flex-wrap:wrap; }
.kpi .box { flex:1; min-width: 130px; }
.kpi .box .v { font-size: 22px; font-weight: 700; }
.kpi .box .l { font-size: 12px; color: var(--text-dim); }

.err { background:#fbe4e4; color:var(--unprod); padding:9px 12px; border-radius:8px; margin-bottom:12px; font-size:13px;}
.ok-msg { background:#e3f3ec; color:var(--prod); padding:9px 12px; border-radius:8px; margin-bottom:12px; font-size:13px;}
.inline { display:flex; gap:8px; align-items:center; }
.timeline-bar { height: 22px; border-radius:4px; display:flex; overflow:hidden; background:#eef0f4; }
.timeline-bar > span { display:block; height:100%; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; margin-top:8px; }
.legend i { width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle;}
.keylog { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap;
  background:#0f1420; color:#cbd5e5; padding:12px; border-radius:8px; max-height: 260px; overflow:auto; }
canvas { max-width: 100%; }