/* Оформление админки. Палитра и переменные — те же, что в «Great stat»:
   тёмная тема на oklch, скруглённые карточки, мятный акцент. Взято ради
   единообразия двух соседних проектов, а не потому, что здесь нужен весь
   тот дашборд. */

:root{
  --bg: oklch(0.1450 0 0);
  --fg: oklch(0.9850 0 0);
  --card: oklch(0.2050 0 0);
  --accent: oklch(0.8675 0.1805 161.4219);
  --accent-fg: oklch(0.1776 0 0);
  --muted: oklch(0.2690 0 0);
  --muted-fg: oklch(0.7080 0 0);
  --border: oklch(0.2750 0 0);
  --input: oklch(0.3250 0 0);
  --destructive: oklch(0.7040 0.1910 22.2160);
  --warning: oklch(0.8000 0.1400 85);
  --radius: 0.625rem;
  --shadow: 0 1px 3px 0 rgba(0,0,0,.30), 0 1px 2px -1px rgba(0,0,0,.30);
}

*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--fg); margin:0; line-height:1.5;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
h1,h2,h3{margin:0;}

/* ---------- каркас ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:220px; flex-shrink:0; border-right:1px solid var(--border);
  padding:20px 14px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh;
}
.brand{font-size:15px; font-weight:600; padding:4px 8px;}
.nav{display:flex; flex-direction:column; gap:1px;}
.nav-item{
  display:flex; align-items:center; gap:10px; color:var(--muted-fg);
  padding:8px 10px; border-radius:calc(var(--radius) - 2px);
  font-size:13px; text-decoration:none; white-space:nowrap;
}
.nav-item.active{background:var(--muted); color:var(--fg); font-weight:600;}
.nav-item:hover:not(.active){background:var(--muted); opacity:.7;}
.nav-ic{flex-shrink:0;}

.account{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px;
}
.account-name{font-size:13px; font-weight:600;}
.account-role{font-size:11px; color:var(--muted-fg);}
.logout{font-size:12px; color:var(--muted-fg); text-decoration:none; margin-top:6px;}
.logout:hover{color:var(--fg); text-decoration:underline;}

.main{flex:1; min-width:0;}
.topbar{padding:22px 30px 14px; border-bottom:1px solid var(--border);}
.topbar h1{font-size:20px;}
.content{padding:22px 30px 40px; display:flex; flex-direction:column; gap:18px;}

/* ---------- карточки и плитки ---------- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
}
.card h2{font-size:15px; margin-bottom:10px;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.card-head h2{margin-bottom:0;}
.muted{color:var(--muted-fg); font-size:13px;}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
.tile{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
}
.tile-value{font-size:26px; font-weight:600; line-height:1.2;}
.tile-label{color:var(--muted-fg); font-size:12px; margin-top:2px;}

/* ---------- кнопки, формы ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; background:var(--accent);
  color:var(--accent-fg); border:none; border-radius:calc(var(--radius) - 2px);
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  text-decoration:none; font-family:inherit;
}
.btn:disabled{opacity:.55; cursor:default;}
.btn-ghost{background:transparent; color:var(--muted-fg); border:1px solid var(--border);}
.btn-ghost:hover{color:var(--fg); border-color:var(--input);}

input,textarea,select{
  background:var(--bg); color:var(--fg); border:1px solid var(--input);
  border-radius:calc(var(--radius) - 2px); padding:9px 11px; font-size:14px;
  font-family:inherit; width:100%;
}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent);}

/* ---------- состояние в диагностике ---------- */
.status-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px 20px; font-size:13px; color:var(--fg);
}
.status-row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--border); padding-bottom:5px;}
.status-key{color:var(--muted-fg);}
.status-val{text-align:right; word-break:break-all;}

.badge{
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid var(--border);
}
.badge.ok{color:var(--accent); border-color:color-mix(in oklch, var(--accent) 40%, transparent);}
.badge.warn{color:var(--warning); border-color:color-mix(in oklch, var(--warning) 40%, transparent);}
.badge.bad{color:var(--destructive); border-color:color-mix(in oklch, var(--destructive) 40%, transparent);}

/* ---------- события вебхука ---------- */
.event{border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); margin-top:10px;}
.event-head{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  cursor:pointer; font-size:13px; user-select:none;
}
.event-head:hover{background:var(--muted);}
.event-time{color:var(--muted-fg); font-variant-numeric:tabular-nums;}
.event-kind{font-weight:600;}
.event-note{color:var(--muted-fg); font-size:12px; margin-left:auto; text-align:right;}
.event pre{
  margin:0; padding:12px; border-top:1px solid var(--border);
  background:var(--bg); font-size:12px; line-height:1.45;
  overflow-x:auto; white-space:pre; border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
}
.empty{color:var(--muted-fg); font-size:13px; padding:14px 0;}

/* ---------- страница входа ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; width:100%; max-width:340px; box-shadow:var(--shadow);
}
.login-card h1{font-size:18px; margin-bottom:4px;}
.login-card p{color:var(--muted-fg); font-size:13px; margin:0 0 20px;}
.login-card label{display:block; font-size:12px; color:var(--muted-fg); margin:0 0 6px;}
.login-card input{margin-bottom:14px;}
.login-card button{width:100%; justify-content:center; background:var(--accent);
  color:var(--accent-fg); border:none; border-radius:calc(var(--radius) - 2px);
  padding:10px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;}
.login-err{color:var(--destructive); font-size:13px; margin:0 0 14px;}