:root{
  --bg:#09090b; --panel:#111114; --line:#232329; --line-soft:#1c1c21;
  --fg:#e8e8ec; --muted:#8a8a95; --dim:#5c5c66;
  --slate:#94a3b8; --blue:#60a5fa; --emerald:#34d399;
  --amber:#fbbf24; --zinc:#71717a; --red:#f87171;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); min-height:100vh;
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
header{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
  background:rgba(9,9,11,.92); backdrop-filter:blur(8px);
}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:20px}
h1{font-size:15px;font-weight:600;line-height:1.2}
.sub{font-size:11px;color:var(--dim)}
.bar-right{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--muted)}
.bar-right a{color:var(--muted);text-decoration:none}
.bar-right a:hover{color:var(--fg)}
.live{display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);display:inline-block}
@keyframes softpulse{0%,100%{opacity:1}50%{opacity:.4}}
.pulse{animation:softpulse 1.6s ease-in-out infinite}

main{padding:24px 16px 48px;display:flex;flex-direction:column;gap:28px}
h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
   font-weight:600;margin-bottom:12px}
.muted{color:var(--dim);font-size:14px}
.pad{padding:16px}
.footnote{text-align:center;font-size:11px;color:#3f3f46;padding-top:8px}

/* Statistika */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.stat-v{font-size:22px;font-weight:600;letter-spacing:-.02em}
.stat-l{font-size:11px;color:var(--dim);margin-top:2px}

/* Agent kartochkalari */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--line)}
.card.off{opacity:.5}
.card-top{display:flex;align-items:flex-start;gap:10px}
.card-icon{font-size:22px;line-height:1}
.card-name{font-weight:600;font-size:14px}
.card-role{font-size:12px;color:var(--muted);line-height:1.45;min-height:2.6em}
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;
  padding:3px 9px;border-radius:999px;border:1px solid currentColor;
  align-self:flex-start;
}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor}
.b-slate{color:var(--slate)} .b-blue{color:var(--blue)} .b-emerald{color:var(--emerald)}
.b-amber{color:var(--amber)} .b-zinc{color:var(--zinc)} .b-red{color:var(--red)}
.task{font-size:12px;color:var(--muted);font-style:italic}
.tools{display:flex;flex-wrap:wrap;gap:4px}
.tool{
  font-size:10px;color:var(--dim);background:#18181c;
  border:1px solid var(--line-soft);border-radius:5px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.card-actions{display:flex;gap:6px;margin-top:2px}
button{
  font:inherit;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line);background:#18181c;color:var(--muted);
  transition:background .15s,color .15s;
}
button:hover{background:#212127;color:var(--fg)}

/* Lenta */
.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
#feed{max-height:26rem;overflow-y:auto}
.row{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:13px}
.row:last-child{border-bottom:none}
.row-time{color:var(--dim);font-size:11px;font-family:ui-monospace,Menlo,monospace;
          padding-top:2px;flex-shrink:0;width:46px}
.row-icon{flex-shrink:0}
.row-body{flex:1;min-width:0}
.row-title{color:var(--fg)}
.row-agent{font-size:11px;color:var(--dim)}
.row.warning .row-title{color:var(--amber)}
.row.error .row-title{color:var(--red)}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login{background:var(--panel);border:1px solid var(--line);border-radius:16px;
       padding:28px;width:100%;max-width:330px}
.login h1{font-size:17px;margin-bottom:4px}
.login .sub{margin-bottom:20px}
.login label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px}
.login input{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:#0d0d10;color:var(--fg);font:inherit;font-size:14px;
}
.login input:focus{outline:none;border-color:#3f3f46}
.login button{width:100%;margin-top:18px;padding:10px;background:#27272e;color:var(--fg)}
.err{color:var(--red);font-size:12px;margin-top:10px}

@media (max-width:520px){
  .agents{grid-template-columns:1fr}
  .row-time{width:40px}
}