/* BARLIVE Кабинет — design system.
   Brand from barlive.ru: Manrope, primary #6e84f7, danger #c93348. Swiss-minimal,
   light, high-contrast, 8px rhythm. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --brand:#6e84f7; --brand-600:#5a70e8; --brand-50:#eef1fe;
  --danger:#c93348; --danger-50:#fdecef;
  --ok:#1f9d6b; --ok-50:#e8f7f0;
  --warn:#c98a1e;
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#fbfcfe;
  --text:#161b29; --muted:#6b7384; --faint:#9aa1b1;
  --border:#e6e9f1; --border-strong:#d4d9e6;
  --ring:#6e84f7;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(22,27,41,.05), 0 4px 16px rgba(22,27,41,.06);
  --shadow-lg:0 8px 40px rgba(22,27,41,.16);
  --sidebar:248px;
  --font:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'Fira Code','SF Mono',ui-monospace,Menlo,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
h1 { font-size:24px; } h2 { font-size:19px; } h3 { font-size:16px; }
.muted { color:var(--muted); } .faint { color:var(--faint); }
.mono { font-family:var(--mono); }
svg.ico { width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ── App shell ─────────────────────────────────────────── */
.app { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100dvh; }
.sidebar { background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px; padding:18px 12px; position:sticky; top:0; height:100dvh; }
.brand { display:flex; align-items:center; gap:10px; padding:6px 10px 16px; font-weight:800; font-size:16px; }
.brand .logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--brand),#9aa9fb);
  display:grid; place-items:center; color:#fff; font-weight:800; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm);
  color:var(--text); font-weight:500; transition:background .15s,color .15s; }
.nav a:hover { background:var(--brand-50); text-decoration:none; }
.nav a.active { background:var(--brand-50); color:var(--brand-600); font-weight:600; }
.nav a .badge { margin-left:auto; }
.nav .sect { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  padding:14px 11px 4px; font-weight:700; }
.sidebar .foot { margin-top:auto; border-top:1px solid var(--border); padding-top:12px; }
.sidebar .who { font-size:13px; padding:0 10px 8px; }
.main { min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:14px; padding:16px 28px; border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:20; }
.topbar .crumbs { font-size:14px; color:var(--muted); } .topbar .crumbs b { color:var(--text); }
.topbar .spacer { flex:1; }
.content { padding:24px 28px 56px; max-width:1180px; width:100%; }

/* ── Cards / tiles ─────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; margin-bottom:18px; }
.card.flush { padding:0; overflow:hidden; }
.grid { display:grid; gap:16px; }
.grid.cols { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat .n { font-size:30px; font-weight:800; letter-spacing:-.02em; }
.stat .l { color:var(--muted); font-size:13px; }
.tile { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); transition:transform .15s,box-shadow .15s,border-color .15s; color:var(--text); }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); text-decoration:none; }
.tile .top { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-weight:700; }
.tile .ic { width:36px; height:36px; border-radius:9px; background:var(--brand-50); color:var(--brand-600);
  display:grid; place-items:center; } .tile .ic svg { width:20px; height:20px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit;
  font-weight:600; font-size:14px; cursor:pointer; transition:background .15s,border-color .15s,transform .05s;
  min-height:40px; }
.btn:hover { background:var(--surface-2); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid color-mix(in srgb,var(--ring) 35%,transparent); outline-offset:1px; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-600); }
.btn-danger { background:var(--surface); border-color:#eccfd4; color:var(--danger); }
.btn-danger:hover { background:var(--danger-50); }
.btn-ghost { border-color:transparent; background:transparent; }
.btn-ghost:hover { background:var(--brand-50); }
.btn-sm { min-height:32px; padding:5px 11px; font-size:13px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ── Tables ────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { text-align:left; padding:11px 16px; color:var(--muted); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); background:var(--surface-2); }
tbody td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-2); }
.row-actions { display:flex; gap:6px; justify-content:flex-end; }

/* ── Forms ─────────────────────────────────────────────── */
.field { margin-bottom:16px; }
.field > label { display:block; font-weight:600; font-size:13px; margin-bottom:5px; }
.field .req { color:var(--danger); }
.field .help { color:var(--muted); font-size:12.5px; margin:5px 0 0; }
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea {
  width:100%; padding:10px 12px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); color:var(--text); font:inherit; font-size:14px; transition:border-color .15s,box-shadow .15s; }
textarea { resize:vertical; min-height:88px; line-height:1.5; }
textarea.mono { font-family:var(--mono); font-size:13px; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 22%,transparent); }
.field .count { float:right; color:var(--faint); font-size:11.5px; font-weight:500; }
.err { color:var(--danger); font-size:13px; margin-top:8px; }
.savebar { position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--border);
  padding:14px 0 4px; display:flex; gap:10px; align-items:center; margin-top:8px; }

/* ── Badges / flash / banners ──────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--muted); color:#fff; }
.badge.brand { background:var(--brand-50); color:var(--brand-600); }
.badge.new { background:var(--danger); } .badge.ok { background:var(--ok-50); color:var(--ok); }
.banner { border-radius:var(--radius); padding:13px 16px; margin-bottom:18px; font-size:14px;
  border:1px solid var(--border); background:var(--surface); display:flex; gap:10px; align-items:flex-start; }
.banner.ok { background:var(--ok-50); border-color:#bfe6d4; color:#136b48; }
.banner.info { background:var(--brand-50); border-color:#cdd6fb; color:#3a4aa8; }
.banner.warn { background:#fdf4e3; border-color:#f0dcb0; color:#8a6314; }
.empty { text-align:center; color:var(--muted); padding:40px 20px; }
.empty svg { width:40px; height:40px; opacity:.4; margin-bottom:10px; }

/* ── Detail drawer (graph / inspect) ───────────────────── */
.drawer-scrim { position:fixed; inset:0; background:rgba(22,27,41,.45); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:60; }
.drawer-scrim.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100dvh; width:min(440px,92vw); background:var(--surface);
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .22s ease-out; z-index:61;
  display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer .dh { display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer .db { padding:18px 20px; overflow:auto; flex:1; }
.drawer .db pre { white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:12.5px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; }
.kv { margin-bottom:12px; } .kv .k { color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* ── Auth (centered) ───────────────────────────────────── */
.auth-wrap { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.auth { width:100%; max-width:400px; }
.auth .brand { justify-content:center; padding-bottom:8px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:860px){
  .app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%); transition:transform .2s;
    width:264px; box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:translateX(0); }
  .menu-btn { display:inline-flex; } .content { padding:18px 16px 48px; }
}
.menu-btn { display:none; }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; animation:none !important; } }

/* UX Cleanup U7 — wide tables never break layout; filters stack on narrow */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:860px){
  table{ font-size:13px; }
  .filters{ flex-direction:column; align-items:stretch; }
  .filters select, .filters input{ width:100%; }
}