:root{
  --bg:#f5f6f8; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --dark:#0f172a; --accent:#1d4ed8; --ok:#15803d; --okbg:#ecfdf5;
  --warnbg:#fef3c7; --warnink:#92400e; --errbg:#fee2e2; --errink:#991b1b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.top{background:var(--dark);color:#fff}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:58px;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;letter-spacing:.3px}
.brand:hover{text-decoration:none;opacity:.85}
.nav{display:flex;gap:16px;margin-right:auto}
.nav a{color:#cbd5e1;font-size:14px}
.nav a:hover{color:#fff;text-decoration:none}
.me{display:flex;align-items:center;gap:10px;font-size:13px;color:#cbd5e1}
.me .who{color:#fff}
.me .role{background:#1e293b;border-radius:999px;padding:2px 10px}
.me .exit{color:#fca5a5}

main.wrap{padding-top:22px;padding-bottom:40px}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 18px;font-size:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.kpi .lbl{color:var(--muted);font-size:13px;margin-bottom:6px}
.kpi .val{font-size:24px;font-weight:700;letter-spacing:-.5px}
.kpi .unit{font-size:13px;color:var(--muted);font-weight:500;margin-left:4px}
.kpi.hi{background:#fffbeb;border-color:#fde68a}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:#f8fafc;color:#334155;font-weight:600;font-size:13px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even){background:#fafafa}
.scroll{overflow-x:auto}

form.auth{max-width:400px;margin:40px auto}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=tel],select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fff}
input:focus,select:focus{outline:2px solid #bfdbfe;border-color:var(--accent)}
button,.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;
  font-size:15px;cursor:pointer;display:inline-block}
button:hover{opacity:.92}
button.sm{padding:6px 10px;font-size:13px}
button.gray{background:#475569}
button.red{background:#b91c1c}
.hint{color:var(--muted);font-size:13px;margin-top:14px}

.msg{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px}
.msg.ok{background:var(--okbg);color:var(--ok)}
.msg.err{background:var(--errbg);color:var(--errink)}
.msg.info{background:#eff6ff;color:#1e40af}
.warn{background:var(--warnbg);color:var(--warnink);padding:9px 14px;border-radius:8px;
  font-size:13px;margin-bottom:16px}
.tag{border-radius:999px;padding:2px 9px;font-size:12px;display:inline-block}
.tag.pending{background:var(--warnbg);color:var(--warnink)}
.tag.active{background:var(--okbg);color:var(--ok)}
.tag.blocked{background:var(--errbg);color:var(--errink)}
.empty{color:var(--muted);padding:22px;text-align:center}
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:16px 0;background:#fff}



/* --- раскрытие строки на месте --- */
tr.node{cursor:pointer}
tr.node:hover{background:#eff6ff}
tr.node .caret{display:inline-block;width:14px;color:var(--muted);transition:transform .15s}
tr.node.open .caret{transform:rotate(90deg)}
tr.kids > td{background:#fbfcfe;padding:0 0 0 18px;border-bottom:1px solid var(--line)}
.kids table{font-size:13px}
.kids th{background:#f1f5f9}
.loading{padding:12px;color:var(--muted);font-size:13px}
.srclink{font-size:12px;color:var(--muted)}
.srclink a{color:var(--accent)}




/* --- шапка и меню-бургер (на всех экранах) --- */
.top .wrap{display:flex;align-items:center;gap:14px;min-height:56px}
.brand{margin-right:auto;font-weight:700}
.who-top{color:#cbd5e1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw}
.burger{background:none;border:0;padding:8px;cursor:pointer;flex:0 0 auto}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;
  transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{display:none;background:#0b1220;border-top:1px solid #1e293b}
.menu.open{display:block}
.menu .wrap{display:flex;flex-direction:column;padding-top:4px;padding-bottom:10px}
.menu a{color:#e2e8f0;padding:12px 2px;border-bottom:1px solid #1e293b;font-size:15px}
.menu a:hover{color:#fff;text-decoration:none;background:#111a2e}
.menu a.act{color:#93c5fd}
.menu-foot{color:#94a3b8;font-size:13px;padding-top:12px}
.menu-foot a{display:inline;border:0;padding:0;color:#fca5a5}

@media (max-width:700px){
  table{font-size:13px}
  th,td{padding:7px 6px}
  .kpi .val{font-size:20px}
  h1{font-size:19px}
}