@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0a0c12; --bg-soft:#0d1017;
  --panel:#12151d; --panel2:#171b25; --panel-hover:#1b202c;
  --border:#232838; --border-soft:#1a1e29;
  --text:#eef0f5; --muted:#8992a6; --muted-soft:#5f677c;
  --accent:#6366f1; --accent2:#818cf8; --accent-glow:rgba(99,102,241,.35);
  --grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#d946ef 100%);
  --green:#22c55e; --green-bg:rgba(34,197,94,.12);
  --red:#f43f5e; --red-bg:rgba(244,63,94,.12);
  --yellow:#f59e0b; --yellow-bg:rgba(245,158,11,.12);
  --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 500px at 100% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(217,70,239,.08), transparent 60%),
    var(--bg);
  color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2); text-decoration:none}
code, .mono{font-family:'JetBrains Mono',monospace}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ==== Auth pages ==== */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
}
.auth-wrap::before{
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background:var(--grad); opacity:.12; filter:blur(90px); top:-200px; left:-150px;
}
.auth-wrap::after{
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:var(--grad); opacity:.10; filter:blur(90px); bottom:-200px; right:-150px;
}
.auth-card{
  position:relative; z-index:1;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border); border-radius:20px;
  padding:40px; width:100%; max-width:410px; box-shadow:var(--shadow);
}
.auth-logo{
  width:52px; height:52px; border-radius:14px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px;
  margin-bottom:18px; box-shadow:0 8px 24px -6px var(--accent-glow);
}
.auth-card h1{margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-.02em}
.auth-card .brand{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.auth-card p.sub{color:var(--muted); margin-top:0; margin-bottom:28px; font-size:14px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.03em}
.field input, .field textarea, .field select{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.field .small{margin-top:6px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12.5px; border-radius:10px; border:none;
  background:var(--grad); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
  text-align:center; transition:transform .12s, box-shadow .12s; box-shadow:0 6px 18px -6px var(--accent-glow);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -6px var(--accent-glow)}
.btn:active{transform:translateY(0)}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text); box-shadow:none}
.btn-outline:hover{border-color:var(--accent2); transform:none; box-shadow:none}
.btn-ghost{background:var(--panel2); border:1px solid var(--border); color:var(--text); box-shadow:none}
.btn-ghost:hover{background:var(--panel-hover); transform:none; box-shadow:none}
.btn-danger{background:var(--red); box-shadow:0 6px 18px -6px rgba(244,63,94,.4)}
.btn-danger.btn-outline{background:transparent; color:var(--red); border-color:rgba(244,63,94,.35); box-shadow:none}
.btn-sm{width:auto; padding:8px 14px; font-size:13px; border-radius:8px}
.btn-icon{width:auto; padding:8px 10px}
.divider{display:flex; align-items:center; gap:10px; color:var(--muted-soft); font-size:12px; margin:20px 0}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--border)}
.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--panel2);
  color:var(--text); font-size:14px; cursor:pointer; transition:border-color .15s;
}
.google-btn:hover{border-color:var(--accent2)}
.alert{padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px}
.alert-error{background:var(--red-bg); color:#ff9aa8; border:1px solid rgba(244,63,94,.25)}
.alert-success{background:var(--green-bg); color:#8ff0b0; border:1px solid rgba(34,197,94,.25)}
.foot-link{text-align:center; margin-top:20px; font-size:13px; color:var(--muted)}

/* ==== App shell: sidebar layout ==== */
.app-shell{display:flex; min-height:100vh}
.sidebar{
  width:250px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.sidebar .logo{display:flex; align-items:center; gap:10px; padding:6px 8px 22px}
.sidebar .logo .mark{width:34px; height:34px; border-radius:10px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0}
.sidebar .logo .txt{font-weight:800; font-size:17px; letter-spacing:-.02em}
.sidebar .logo .txt span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-section{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-soft); font-weight:700; margin:14px 8px 8px}
.nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:var(--muted); font-size:14px; font-weight:500; margin-bottom:2px; transition:background .12s, color .12s;
}
.nav-link i{font-size:16px; width:18px; text-align:center}
.nav-link:hover{background:var(--panel-hover); color:var(--text)}
.nav-link.active{background:linear-gradient(90deg, var(--accent-glow), transparent); color:var(--text); font-weight:600}
.sidebar-foot{margin-top:auto; border-top:1px solid var(--border-soft); padding-top:14px}
.side-user{display:flex; align-items:center; gap:10px; padding:6px 8px 12px}
.side-user img, .side-user .avatar-fallback{width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0}
.side-user .name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-user .email{font-size:11.5px; color:var(--muted-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.main{flex:1; min-width:0}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 28px; border-bottom:1px solid var(--border-soft); position:sticky; top:0;
  background:rgba(10,12,18,.75); backdrop-filter:blur(10px); z-index:5;
}
.topbar h1{font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
.topbar .actions{display:flex; gap:8px; flex-wrap:wrap}
.container{max-width:1180px; margin:0 auto; padding:26px 28px 60px}

/* ==== Stat cards ==== */
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px}
.stat-card{
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden;
}
.stat-card .icon{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:12px}
.stat-card .icon.i-indigo{background:rgba(99,102,241,.15); color:var(--accent2)}
.stat-card .icon.i-green{background:var(--green-bg); color:var(--green)}
.stat-card .icon.i-pink{background:rgba(217,70,239,.15); color:#e879f9}
.stat-card .icon.i-amber{background:var(--yellow-bg); color:var(--yellow)}
.stat-card .val{font-size:26px; font-weight:800; letter-spacing:-.02em}
.stat-card .lbl{color:var(--muted); font-size:12.5px; margin-top:2px}

/* ==== Bot grid ==== */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:16px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:#2c3245; transform:translateY(-2px)}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.card-avatar{width:42px; height:42px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; object-fit:cover}
.card h3{margin:0; font-size:15.5px}
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-running{background:var(--green-bg); color:var(--green)}
.badge-stopped{background:rgba(139,147,163,.13); color:var(--muted)}
.badge-error{background:var(--red-bg); color:var(--red)}
.card .meta{color:var(--muted); font-size:12.5px; margin:2px 0 16px; display:flex; gap:14px; flex-wrap:wrap}
.card .meta span{display:flex; align-items:center; gap:5px}
.card-actions{display:flex; gap:8px; flex-wrap:wrap}

.empty-state{
  text-align:center; padding:70px 20px; color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius);
}
.empty-state i{font-size:34px; color:var(--muted-soft); margin-bottom:12px; display:block}

.panel{background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.panel h2{margin:0; font-size:16px; font-weight:700}
.panel .hint{color:var(--muted); font-size:12.5px; margin:-8px 0 16px}

.tabs{display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--border-soft); overflow-x:auto}
.tab{padding:11px 16px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; font-size:13.5px; font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:7px}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text); border-color:var(--accent)}
.tab-content{display:none}
.tab-content.active{display:block; animation:fadein .2s ease}
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

.feature-row{
  display:flex; align-items:center; justify-content:space-between; padding:13px 16px; gap:12px;
  background:var(--panel2); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; flex-wrap:wrap;
}
.feature-row .name{font-weight:600; display:flex; align-items:center; gap:8px; font-size:14px}
.feature-row .name code{color:var(--accent2); font-size:12.5px}
.feature-row .desc{color:var(--muted); font-size:12.5px; margin-top:3px}
.feature-row .cat-chip{
  display:inline-flex; align-items:center; gap:4px; background:rgba(99,102,241,.12); color:var(--accent2);
  padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.feature-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

/* toggle switch */
.switch{position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0}
.switch input{opacity:0; width:0; height:0}
.switch .slider{position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:22px; transition:.2s}
.switch .slider::before{content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(18px)}

textarea, select{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:14px; font-family:inherit;
}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238992a6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px}

#code-editor{width:100%; height:440px; border-radius:10px; border:1px solid var(--border); overflow:hidden}

.row{display:flex; gap:14px; flex-wrap:wrap}
.row .field{flex:1; min-width:180px}

.toggle{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}

.small{font-size:12px; color:var(--muted)}
.color-swatch{width:44px; height:44px; border-radius:10px; border:1px solid var(--border); padding:0; background:transparent; cursor:pointer}

/* category chip list */
.chip-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{
  display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--border);
  padding:7px 8px 7px 14px; border-radius:20px; font-size:13px;
}
.chip button{background:none; border:none; color:var(--muted-soft); cursor:pointer; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.chip button:hover{background:var(--red-bg); color:var(--red)}

/* discord embed preview */
.embed-preview{
  background:#2b2d31; border-radius:8px; padding:14px 16px; border-left:4px solid var(--accent);
  font-family:'gg sans',Inter,sans-serif; color:#dbdee1; max-width:440px;
}
.embed-preview .e-title{font-weight:700; font-size:15px; color:#fff; margin-bottom:6px}
.embed-preview .e-desc{font-size:13.5px; line-height:1.5; margin-bottom:10px; color:#dbdee1}
.embed-preview .e-field{margin-bottom:8px}
.embed-preview .e-field .fname{font-weight:700; font-size:12.5px; color:#fff; margin-bottom:2px}
.embed-preview .e-field .fval{font-size:12.5px; color:#dbdee1}
.embed-preview .e-foot{font-size:11px; color:#949ba4; margin-top:10px; display:flex; align-items:center; gap:6px}
.embed-preview img.e-thumb{width:56px; height:56px; border-radius:6px; float:right; object-fit:cover}

/* logs console */
.log-console{
  background:#08090c; border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  height:420px; overflow-y:auto; font-family:'JetBrains Mono',monospace; font-size:12.5px;
}
.log-line{padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03); display:flex; gap:10px; align-items:baseline}
.log-line .t{color:var(--muted-soft); flex-shrink:0}
.log-line .badge-log{flex-shrink:0; padding:1px 7px; border-radius:5px; font-size:10px; font-weight:700; text-transform:uppercase}
.log-line.command .badge-log{background:rgba(99,102,241,.18); color:var(--accent2)}
.log-line.system .badge-log{background:var(--green-bg); color:var(--green)}
.log-line.error .badge-log{background:var(--red-bg); color:var(--red)}
.log-line .msg{color:#d7dae2; word-break:break-word}
.log-empty{color:var(--muted-soft); text-align:center; padding:40px 0}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.chart-wrap{background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:16px; height:280px}

.mobile-topbar{display:none}
@media(max-width:880px){
  .sidebar{position:fixed; left:-260px; z-index:40; transition:left .2s; box-shadow:var(--shadow)}
  .sidebar.open{left:0}
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
    border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--panel); z-index:20;
  }
  .mobile-topbar .logo{display:flex; align-items:center; gap:8px; font-weight:800}
  .mobile-topbar .mark{width:30px; height:30px; border-radius:9px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px}
  .menu-btn{background:var(--panel2); border:1px solid var(--border); color:var(--text); width:38px; height:38px; border-radius:9px; font-size:16px}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:30}
  .sidebar-backdrop.show{display:block}
  .container{padding:20px 16px 50px}
  .topbar{padding:16px}
}