:root{
  --bg:#070b12;
  --panel:#101827;
  --panel2:#141e31;
  --line:#26334a;
  --text:#eef4ff;
  --muted:#8ea0bd;
  --accent:#7659ff;
  --accent2:#4287ff;
  --danger:#e45464;
  --ok:#36d399;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% -10%,#1c2957 0,transparent 34%),
    radial-gradient(circle at 90% 5%,#221b4d 0,transparent 28%),
    var(--bg);
  color:var(--text);
  font:15px/1.5 Inter,Segoe UI,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.nav{
  height:72px;
  display:flex;
  align-items:center;
  gap:26px;
  padding:0 5vw;
  border-bottom:1px solid var(--line);
  background:#090f1acc;
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:10;
}
.brand{font-weight:900;font-size:20px;letter-spacing:.3px}
.brand span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:7px 9px;border-radius:9px;margin-right:4px
}
.navlinks{display:flex;gap:8px;flex:1}
.navlinks a{padding:10px 12px;border-radius:9px;color:var(--muted)}
.navlinks a:hover{background:#ffffff08;color:var(--text)}
.wrap{width:min(1320px,92vw);margin:38px auto}
.hero{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.hero h1,h1{font-size:36px;margin:4px 0 8px}
.hero p,.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:#a594ff}
.status{
  padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  display:flex;align-items:center;gap:8px;background:#0d1524
}
.status span{width:9px;height:9px;border-radius:50%;background:var(--danger)}
.status.online span{background:var(--ok);box-shadow:0 0 14px var(--ok)}
.grid{display:grid;gap:18px}
.stats{grid-template-columns:repeat(5,1fr);margin-bottom:18px}
.card,.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 15px 45px #0003
}
.card{padding:22px}
.card b{display:block;font-size:28px}
.card span{color:var(--muted)}
.two{grid-template-columns:1fr 1fr}
.panel{padding:24px;margin:18px 0}
.panel h2{margin-top:0}
button,.button{
  border:0;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;font-weight:700;padding:11px 16px;cursor:pointer;display:inline-block
}
button:hover,.button:hover{filter:brightness(1.08)}
.secondary,.ghost{background:#1b2940}
.danger{background:var(--danger)}
.small{padding:7px 10px;font-size:12px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions form{margin:0}
input,textarea,select{
  width:100%;background:#0b1322;border:1px solid var(--line);
  border-radius:9px;padding:11px 12px;color:var(--text);outline:none
}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:#6d72ff}
.formgrid{display:grid;grid-template-columns:1fr 2fr 120px 150px auto;gap:10px;align-items:center}
.timergrid{grid-template-columns:1fr 2fr 140px auto}
.moderationgrid{grid-template-columns:1fr auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
.pill{background:#243650;padding:5px 8px;border-radius:999px;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:#1c2940;border:1px solid var(--line);padding:7px 10px;border-radius:999px}
.winner{padding:18px 22px;border:1px solid #5d50bb;background:#241d55;border-radius:14px;font-size:20px}
.featuregrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.featuregrid span{padding:12px;background:#0c1422;border:1px solid var(--line);border-radius:10px;color:#b8c6db}
.loginbody{display:grid;place-items:center}
.loginbox{
  width:min(420px,90vw);padding:34px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;box-shadow:0 25px 70px #0006
}
.loginbox h1{font-size:27px}
.loginbox input{margin:7px 0 14px}
.logo{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:900
}
.alert{background:#4e1820;border:1px solid #8f3441;padding:10px;border-radius:8px;margin:12px 0}
@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .featuregrid{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .formgrid,.timergrid,.moderationgrid{grid-template-columns:1fr}
  .navlinks{display:none}
  .tablewrap{overflow:auto}
  table{min-width:720px}
}
/* v0.3 connections */
.connection-grid { align-items: stretch; }
.connection-card { border: 1px solid #30364a; border-radius: 16px; padding: 20px; background: rgba(255,255,255,.018); }
.connection-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.connection-title h3 { margin:5px 0 0; font-size:1.25rem; }
.pill { display:inline-flex; padding:7px 10px; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap; }
.pill.ok { background:rgba(46,204,113,.12); color:#7ce7a8; border:1px solid rgba(46,204,113,.3); }
.pill.bad { background:rgba(231,76,60,.1); color:#ff9c91; border:1px solid rgba(231,76,60,.25); }
.warning { border-left:3px solid #f5b942; padding:8px 10px; background:rgba(245,185,66,.08); border-radius:6px; }
.muted { opacity:.72; }
.topgap { margin-top:18px; }
button.danger { background:transparent; border:1px solid rgba(231,76,60,.45); color:#ff9c91; }
.sectionhead { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }


/* ============================================================
   v0.5 - EventSub Control Center + Activity Feed
   ============================================================ */
.dashboard-top-grid{align-items:stretch}
.dashboard-top-grid>.panel{margin-top:0}
.eventsub-status-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px
}
.mini-stat{
  background:#0b1322;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px
}
.mini-stat span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:5px
}
.mini-stat strong{font-size:16px}
.event-chip{
  background:#152238!important;
  border:1px solid #2a3b59!important;
}
.event-chip.ok{
  color:#8beeb4!important;
  border-color:rgba(54,211,153,.32)!important;
  background:rgba(54,211,153,.08)!important;
}
.activity-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px
}
.activity-list.compact{margin-top:20px}
.activity-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background:#0b1322;
  border:1px solid var(--line);
  border-radius:13px;
  transition:.15s ease
}
.activity-item:hover{
  border-color:#394a68;
  transform:translateY(-1px)
}
.activity-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#251d55,#17315d);
  border:1px solid #3b4670;
  font-weight:900;
  font-size:12px
}
.activity-main{min-width:0;flex:1}
.activity-main strong{display:block;font-size:15px}
.activity-main>span,.activity-main>time{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:3px
}
.activity-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.activity-empty{
  text-align:center;
  color:var(--muted);
  padding:34px 18px;
  border:1px dashed var(--line);
  border-radius:13px
}
.pill.subtle{
  background:#18243a;
  color:#aebbd0;
  border:1px solid var(--line)
}
.activity-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap
}
.activity-filter-row{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.filter-button{
  background:#18243a;
  border:1px solid var(--line);
  color:#b8c6db;
  padding:8px 11px
}
.filter-button.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;
  color:white
}
.activity-toolbar-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap
}
.searchbox{min-width:260px}
.searchbox span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px
}
.activity-summary{
  grid-template-columns:repeat(4,1fr);
  margin-bottom:18px
}
.category-follow .activity-icon{box-shadow:inset 0 0 0 1px rgba(54,211,153,.16)}
.category-system .activity-icon{box-shadow:inset 0 0 0 1px rgba(228,84,100,.18)}
@media(max-width:1000px){
  .eventsub-status-grid{grid-template-columns:1fr}
  .activity-summary{grid-template-columns:repeat(2,1fr)}
  .activity-toolbar{align-items:stretch}
  .activity-toolbar-actions{width:100%}
  .searchbox{min-width:0;flex:1 1 220px}
}
@media(max-width:620px){
  .activity-summary{grid-template-columns:1fr}
  .activity-title-row{align-items:flex-start;flex-direction:column}
}



/* ============================================================
   v0.6 EXTREME - Alerts & Automations
   ============================================================ */
.wrap.wide{max-width:1540px}
.alert-summary{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.alerts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.alert-rule{margin:0}
.alert-rule label>span,.form-grid label>span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.form-grid{display:grid;gap:12px;margin:12px 0}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.switchline{display:flex!important;align-items:center;gap:8px;color:#dce7f8!important;font-size:13px!important}
.switchline span{margin:0!important;color:#dce7f8!important}
.switchline input{width:auto}
.copy-row{display:flex;gap:10px;align-items:center}
.copy-row input{flex:1;font-family:Consolas,monospace}
.test-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.test-grid form,.test-grid button{width:100%}
.placeholder-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.small{font-size:12px}
@media(max-width:1150px){
  .alerts-grid{grid-template-columns:1fr}
  .test-grid{grid-template-columns:repeat(3,1fr)}
  .placeholder-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .alert-summary{grid-template-columns:repeat(2,1fr)}
  .form-grid.two{grid-template-columns:1fr}
  .test-grid{grid-template-columns:repeat(2,1fr)}
  .copy-row{flex-direction:column;align-items:stretch}
}



/* ============================================================
   v0.7 EXTREME - Multi-user Access Control
   ============================================================ */
.access-summary{grid-template-columns:repeat(4,1fr);margin-bottom:18px}
.access-layout{align-items:start}
.access-flow{display:flex;flex-direction:column;gap:10px}
.access-flow>div{display:flex;align-items:center;gap:12px;background:#0b1322;border:1px solid var(--line);border-radius:12px;padding:12px}
.access-flow b{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}
.access-flow span{color:#d9e4f5;font-size:13px}
.notice{padding:12px 14px;border:1px solid #345071;background:#102036;border-radius:12px;color:#cfe3ff;margin:12px 0}
.dangerbox{border-color:#7e3341;background:#2b141b;color:#ffd9df}
.user-table-wrap{overflow:auto}
.user-table{width:100%;border-collapse:collapse;min-width:1100px}
.user-table th,.user-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.user-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px}
.user-table td>span:not(.pill){display:block;color:var(--muted);font-size:12px;margin-top:3px}
.table-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.table-actions form{display:flex;gap:6px;align-items:center;margin:0}
.table-actions input{max-width:160px;padding:8px}
.nav-user{display:flex;align-items:center;gap:10px}
.nav-user-badge{font-size:11px;color:#c9d7ea;background:#142238;border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.login-card.mega{max-width:560px}
.login-tabs{display:flex;gap:8px;margin:18px 0}
.login-tab.hidden{display:none}
@media(max-width:850px){
  .access-summary{grid-template-columns:repeat(2,1fr)}
  .nav-user-badge{display:none}
}



/* ============================================================
   v0.7.3 UI FIX - based on the user's actual v0.7.2 installation
   ============================================================ */

/* Top navigation */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--line);
  background:rgba(9,15,26,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 35px rgba(0,0,0,.18);
}
.topbar .nav{
  position:relative;
  top:auto;
  z-index:auto;
  height:74px;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
.wrap-nav{
  width:min(1540px,94vw);
  margin:0 auto;
  padding:0;
}
.topbar .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  white-space:nowrap;
}
.topbar .brand span{
  display:inline-grid;
  place-items:center;
  min-width:48px;
  height:38px;
  padding:0 10px;
  margin-right:8px;
  box-shadow:0 8px 24px rgba(90,83,255,.22);
}
.topbar .brand strong{
  font-size:19px;
  color:var(--text);
}
.topbar .navlinks{
  min-width:0;
  display:flex;
  align-items:center;
  gap:3px;
  overflow-x:auto;
  scrollbar-width:none;
}
.topbar .navlinks::-webkit-scrollbar{display:none}
.topbar .navlinks a{
  flex:0 0 auto;
  padding:9px 10px;
  font-size:13px;
  border:1px solid transparent;
}
.topbar .navlinks a:hover{
  background:#121d30;
  border-color:#263852;
}
.nav-user{
  margin-left:auto;
  flex:0 0 auto;
}
.nav-user form{margin:0}
.nav-user-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-user-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 10px rgba(54,211,153,.75);
}
.nav-logout{
  padding:9px 11px;
  font-size:12px;
  border:1px solid #2b3a52;
}
.mobile-nav-toggle{
  display:none;
  width:42px;
  height:38px;
  padding:0;
  background:#18243a;
  border:1px solid var(--line);
  font-size:20px;
}

/* Give wide desktop screens more useful room without changing cards. */
.wrap{
  width:min(1480px,94vw);
}

/* Login - restore original v0.2/v0.6 visual language */
.loginbody{
  min-height:100vh;
  padding:32px 16px;
  display:grid;
  place-items:center;
}
.loginbox-v073{
  width:min(500px,94vw);
  padding:32px;
}
.login-logo-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}
.login-logo-row .logo{
  flex:0 0 58px;
}
.login-logo-row h1{
  margin:2px 0 0;
  font-size:27px;
}
.login-intro{
  margin:0 0 18px;
  color:var(--muted);
}
.login-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:18px 0;
  padding:5px;
  background:#0b1322;
  border:1px solid var(--line);
  border-radius:12px;
}
.login-tabs .filter-button{
  width:100%;
}
.login-tab.hidden{display:none}
.field-label{
  display:block;
  color:#c7d3e5;
  font-size:13px;
  font-weight:700;
  margin:13px 0 5px;
}
.loginbox-v073 input{
  margin:0 0 4px;
}
.login-submit{
  width:100%;
  margin-top:18px;
  padding:12px 16px;
}
.login-hint{
  margin-top:14px;
  padding:11px 12px;
  border:1px solid #293952;
  border-radius:10px;
  background:#0c1525;
  color:var(--muted);
  font-size:12px;
}

/* Users page */
.access-layout{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.user-table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
}
.user-table th{
  background:#0c1422;
}
.user-table tbody tr:hover{
  background:rgba(255,255,255,.015);
}

/* Responsive navigation */
@media(max-width:1180px){
  .topbar .nav{
    gap:12px;
  }
  .mobile-nav-toggle{
    display:inline-grid;
    place-items:center;
    order:2;
  }
  .topbar .navlinks{
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    padding:10px;
    background:#0b1322;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 18px 45px rgba(0,0,0,.4);
    flex-wrap:wrap;
  }
  .topbar .navlinks.open{
    display:flex;
  }
  .nav-user{
    margin-left:auto;
    order:3;
  }
}
@media(max-width:700px){
  .wrap-nav{width:94vw}
  .topbar .brand strong{display:none}
  .nav-user-badge{display:none}
  .nav-logout{padding:8px 9px}
  .access-layout{grid-template-columns:1fr}
  .loginbox-v073{padding:24px 20px}
}



/* ================= v0.8.0 EXTREME ================= */
.v08-page{padding-bottom:70px}.v08-hero{align-items:flex-end}.hero-actions{display:flex;gap:8px}
.v08-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 16px}.v08-kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.v08-kpi{padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#121d31,#0d1626);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.v08-kpi span{display:block;color:var(--muted);font-size:12px}.v08-kpi b{display:block;font-size:30px;margin:5px 0}.v08-kpi small{color:#7890ae}
.v08-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:14px;margin-bottom:14px}.v08-activity-panel{min-height:290px}
.v08-connection-mini{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.v08-connection-mini:last-of-type{border-bottom:0}.v08-connection-mini div{display:flex;flex-direction:column;gap:3px}.v08-connection-mini small{color:var(--muted)}
.v08-system-list{display:grid;gap:0}.v08-system-list div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.v08-system-list span{color:var(--muted)}
.role-cards{display:grid;gap:9px}.role-cards>div{padding:13px;border:1px solid var(--line);border-radius:11px;background:#0c1525}.role-cards b,.role-cards span{display:block}.role-cards span{color:var(--muted);font-size:12px;margin-top:4px}
.user-editor{border:1px solid var(--line);border-radius:13px;background:#0c1525;margin-top:10px;overflow:hidden}.user-editor summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 17px;list-style:none}.user-editor summary::-webkit-details-marker{display:none}.user-editor summary>div:first-child{display:flex;flex-direction:column}.user-editor summary span{color:var(--muted);font-size:12px}.user-summary-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.user-editor-body{border-top:1px solid var(--line);padding:17px}
.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.permission-item{display:flex!important;align-items:center;gap:9px;padding:10px!important;margin:0!important;border:1px solid var(--line);border-radius:10px;background:#0a1321}.permission-item input{width:auto!important;margin:0!important}.permission-item span,.permission-item b,.permission-item small{display:block}.permission-item small{color:var(--muted);font-size:10px;margin-top:2px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.user-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px}.danger-zone{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed #34445d}.danger-zone form{display:flex;gap:6px;margin:0}.danger-zone input{width:180px;margin:0}
.audit-toolbar{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:14px}.audit-list{display:grid;gap:7px}.audit-row{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#0b1423}.audit-type{flex:0 0 100px;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.08em;color:#9caeff}.audit-row div{display:flex;flex-direction:column;gap:4px}.audit-row small{color:var(--muted)}
@media(max-width:1050px){.v08-kpis,.v08-kpis.four{grid-template-columns:repeat(2,1fr)}.v08-main-grid{grid-template-columns:1fr}.permission-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.v08-kpis,.v08-kpis.four{grid-template-columns:1fr 1fr}.permission-grid,.form-grid.three,.audit-toolbar{grid-template-columns:1fr}.user-editor summary{align-items:flex-start;flex-direction:column}.danger-zone,.danger-zone form{align-items:stretch;flex-direction:column}.danger-zone input{width:100%}}