:root{
  --bg:#050b16;
  --panel:#0b1424;
  --panel2:#0f1b2f;
  --line:#1b2d48;
  --text:#f7fbff;
  --muted:#98abc8;
  --blue:#3b82f6;
  --cyan:#67e8f9;
  --violet:#7c3aed;
  --green:#20d69b;
  --red:#fb7185;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 72% 10%, rgba(80,55,190,.28), transparent 34%),
    radial-gradient(circle at 35% 0%, rgba(29,78,216,.18), transparent 32%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr}
.sidebar{
  position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,#071120,#091425);
  border-right:1px solid var(--line);
  padding:26px 16px;
  display:flex;flex-direction:column;gap:24px;
}
.brand{
  height:54px;
  display:flex;align-items:center;gap:14px;
  padding:0 14px;
  font-weight:900;font-size:30px;letter-spacing:-.04em;
}
.brand img{width:46px;height:46px;border-radius:14px;box-shadow:0 18px 40px rgba(124,58,237,.28)}
.user-card{
  display:flex;align-items:center;gap:14px;
  background:rgba(15,27,47,.76);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.user-logo{
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
  background:#ffffff;
  border:2px solid #4f7cff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.user-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  border-radius:50%;
  background:#ffffff;
}
.user-card strong{display:block;font-size:14px}
.user-card small{
  display:inline-flex;margin-top:6px;
  background:rgba(124,58,237,.28);
  color:#d7c6ff;border:1px solid rgba(124,58,237,.35);
  padding:4px 10px;border-radius:999px;font-size:12px
}
.nav{display:flex;flex-direction:column;gap:8px}
.nav a{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:15px;
  color:#c7d4e9;font-weight:700;
}
.nav a span{width:18px;text-align:center;color:#bdd0ee}
.nav a:hover,.nav a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 16px 42px rgba(59,130,246,.24);
}
.side-note{
  margin-top:auto;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(42,35,102,.9),rgba(18,28,61,.9));
  border:1px solid rgba(124,58,237,.45);
}
.side-note strong{color:#d9c4ff}
.side-note p{margin:10px 0 0;color:#aebcda;line-height:1.55}
.main{min-width:0}
.topbar{
  height:84px;
  border-bottom:1px solid var(--line);
  background:rgba(5,11,22,.72);
  backdrop-filter: blur(14px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
}
.top-actions{display:flex;align-items:center;gap:12px}
.bell,.avatar-pill{
  background:rgba(15,27,47,.82);
  border:1px solid var(--line);
  border-radius:15px;
  padding:11px 15px;
}
.content{width:min(1160px,calc(100vw - 330px));margin:0 auto;padding:34px 0 70px}

.hero,.bot-hero{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  background:
    radial-gradient(circle at 72% 45%, rgba(103,232,249,.20), transparent 27%),
    linear-gradient(135deg,rgba(30,64,175,.72),rgba(45,31,108,.78));
  border:1px solid rgba(96,165,250,.35);
  border-radius:24px;
  padding:30px;
  box-shadow:var(--shadow);
}
.hero h1,.bot-hero h1{margin:8px 0 8px;font-size:34px;line-height:1.05;letter-spacing:-.04em}
.hero p,.bot-hero p{margin:0;color:#c8d6f1;line-height:1.55;max-width:760px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:900}
.hero-logo,.hero-bot,.console-orb,.bot-symbol,.hero-badge{
  width:92px;height:92px;border-radius:24px;
  background:url('/abot/abot_fav.png') center/cover no-repeat, linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 22px 70px rgba(124,58,237,.42);
  font-size:0 !important;
  flex:0 0 auto;
}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:22px 0}
.stat-card,.metric,.mini-card{
  background:rgba(15,27,47,.72);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  position:relative;overflow:hidden;
}
.stat-card:after{
  content:"";position:absolute;right:-10px;top:-12px;width:76px;height:76px;border-radius:0 0 0 28px;
  background:rgba(59,130,246,.32)
}
.stat-card:nth-child(2):after{background:rgba(124,58,237,.38)}
.stat-card:nth-child(3):after{background:rgba(32,214,155,.36)}
.stat-card:nth-child(4):after{background:rgba(251,113,133,.35)}
.stat-card h3,.metric small,.mini-card small{margin:0;color:var(--muted);font-size:13px;font-weight:600}
.stat-card strong,.metric strong,.mini-card strong{display:block;margin-top:12px;font-size:34px;letter-spacing:-.04em}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.panel,.card,.bot-card,.success-card{
  background:rgba(15,27,47,.78);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.panel h2,.card h2{margin:0 0 8px;font-size:24px}
.muted,.note,.hint{color:var(--muted);line-height:1.55}
.bot-row,.bot-list-row{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  background:rgba(6,13,26,.72);
  border:1px solid var(--line);
  border-radius:17px;
  padding:15px 16px;margin-top:18px;
}
.bot-avatar,.bot-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  background:#ffffff;
  flex:0 0 auto;
  font-size:0 !important;
  border:2px solid #4f7cff;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
}
.bot-avatar img,.bot-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  border-radius:50%;
  background:#ffffff;
}
.bot-main{display:flex;align-items:center;gap:14px;min-width:0}
.status-pill,.status.online{
  display:inline-flex;align-items:center;gap:6px;
  color:#9ff7d4;background:rgba(32,214,155,.16);
  border:1px solid rgba(32,214,155,.30);
  border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;
}
.status.offline{color:#ffc4cf;background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.3)}
.btn-primary,.btn-ghost,.btn-mini,.manage-btn,.action-btn,button{
  border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:white;font-weight:900;
  box-shadow:0 14px 36px rgba(59,130,246,.22);
}
.btn-ghost,.action-btn{
  background:rgba(15,27,47,.85);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn-mini,.manage-btn{padding:10px 16px;border-radius:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.action-danger{background:rgba(251,113,133,.13);border:1px solid rgba(251,113,133,.38);color:#ffc7d0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:13px;color:#bad0f5;font-weight:800}
input,select,textarea{
  width:100%;background:#081222;border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;color:white;outline:none;font:inherit;
}
input:focus,textarea:focus{border-color:#4f8cff;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.alert-error{
  border:1px solid rgba(251,113,133,.45);
  background:rgba(88,24,47,.42);
  color:#ffd5dd;
  padding:16px 18px;border-radius:18px;margin:22px 0;
}
.alert-success{
  border:1px solid rgba(32,214,155,.35);
  background:rgba(3,80,62,.30);
  color:#dffef3;
  padding:18px;border-radius:18px;margin:22px 0;
}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tab{background:rgba(15,27,47,.8);border:1px solid var(--line);border-radius:14px;padding:12px 16px;color:#cdddff}
.tab.active{background:linear-gradient(135deg,var(--blue),var(--violet));color:white}
.compact{padding:24px}
@media (max-width:1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .content{width:calc(100vw - 32px)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.form-grid{grid-template-columns:1fr}
  .hero,.bot-hero{align-items:flex-start}
}