:root{
  --bg:#050b16;
  --bg2:#071224;
  --panel:#0a1629;
  --panel2:#0d1d35;
  --line:rgba(120,165,255,.13);
  --text:#f6f9ff;
  --muted:#92a4c7;
  --blue:#1677ff;
  --blue2:#00b7ff;
  --purple:#6d4aff;
  --green:#16dc6b;
  --orange:#ff8a16;
  --red:#ff3b62;
  --shadow:0 18px 60px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 75% 0%,rgba(0,117,255,.16),transparent 24%),
radial-gradient(circle at 0% 80%,rgba(20,75,175,.11),transparent 25%),var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.control-shell{display:grid;grid-template-columns:310px 1fr;min-height:100vh}
.main-sidebar{
  position:sticky;top:0;height:100vh;padding:25px 16px 18px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(5,12,25,.98),rgba(5,10,20,.98));
  overflow:auto
}
.brand-lockup{display:flex;align-items:center;gap:12px;padding:6px 10px 24px}
.brand-orbit,.hero-logo{
  position:relative;display:grid;place-items:center;font-weight:950;font-style:italic;
  background:linear-gradient(135deg,#036dff 10%,#18d8ff 40%,#77ef20 57%,#ffce16 70%,#ff3030 92%);
  color:#061124;box-shadow:0 0 28px rgba(0,135,255,.35)
}
.brand-orbit{width:58px;height:58px;border-radius:18px;transform:skew(-8deg);font-size:34px}
.brand-word{font-size:30px;font-weight:850;letter-spacing:-1.4px}.brand-word span{background:linear-gradient(90deg,#88ef22,#ffc313,#ff3f46);-webkit-background-clip:text;color:transparent}

.nav-stack{display:grid;gap:5px}
.nav-link{
  min-height:46px;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;
  border:0;border-radius:12px;padding:0 14px;color:#b8c6df;background:transparent;text-align:left
}
.nav-link b{font-size:20px;color:#d7e7ff;text-align:center}.nav-link i{font-style:normal;padding:5px 8px;border-radius:8px;background:#172846;color:#d7e7ff;font-size:11px}
.nav-link:hover{background:rgba(255,255,255,.045);color:white}
.nav-link.active{background:linear-gradient(90deg,#176dff,#0c80ff);color:white;box-shadow:0 12px 28px rgba(0,102,255,.23)}
.premium-card{margin-top:28px;padding:16px;border:1px solid rgba(255,164,0,.36);border-radius:13px;background:linear-gradient(135deg,rgba(255,154,0,.13),rgba(255,196,0,.04));display:flex;gap:12px}
.premium-card strong,.premium-card span{display:block}.premium-card strong{color:#ffc942;font-size:13px}.premium-card span{color:#a98e58;font-size:11px;margin-top:3px}.premium-crown{font-size:28px;color:#ffc52c}
.logout-link{width:100%;margin-top:16px;min-height:42px;border:1px solid var(--line);border-radius:11px;color:#cad7ee;background:#0b1424}

.workspace{min-width:0}
.topbar-modern{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:rgba(6,13,25,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}
.searchbox{width:min(720px,62vw);height:47px;display:flex;align-items:center;gap:10px;border:1px solid rgba(95,145,225,.22);border-radius:11px;background:#0b1830;padding:0 14px}
.searchbox span{font-size:25px;color:#a8c1ec}.searchbox input{flex:1;border:0;outline:0;background:transparent;color:#eaf2ff}.searchbox input::placeholder{color:#91a5c9}.searchbox kbd{padding:5px 8px;border:1px solid #21365b;border-radius:7px;background:#0c1c35;color:#8ca5cf}
.top-actions{display:flex;align-items:center;gap:13px}.icon-button{width:38px;height:38px;border:0;background:transparent;color:#c6d5ef;font-size:20px}
.profile-chip{display:flex;align-items:center;gap:10px;min-width:170px}.profile-chip img,.profile-fallback{width:44px;height:44px;border-radius:50%;object-fit:cover}.profile-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#0da1ff,#6e45ff)}.profile-chip strong,.profile-chip span{display:block}.profile-chip strong{font-size:13px}.profile-chip span{font-size:11px;color:var(--muted)}.profile-chip b{margin-left:auto;color:#8da4ca}

.content-modern{padding:18px 22px 40px;max-width:1600px;margin:0 auto}
.hero-banner{min-height:265px;border:1px solid rgba(0,127,255,.45);border-radius:18px;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;background:
linear-gradient(135deg,rgba(0,68,180,.9),rgba(3,20,54,.9) 48%,rgba(1,13,34,.9)),
radial-gradient(circle at 25% 50%,#0077ff,transparent 35%);box-shadow:var(--shadow)}
.hero-overlay{padding:35px 48px}.hero-brand{display:flex;align-items:center;gap:20px}.hero-logo{width:90px;height:90px;border-radius:24px;font-size:55px}.hero-brand h2{margin:0;font-size:56px;line-height:1;letter-spacing:-3px}.hero-brand h2 span{background:linear-gradient(90deg,#8af127,#ffc214,#ff4545);-webkit-background-clip:text;color:transparent}.hero-brand p{font-size:20px;margin:7px 0 0;color:#e4ecff}
.hero-tags{margin:20px 0;color:#acbce0}.hero-tags i{color:#5a7eae;margin:0 9px}
.hero-actions{display:flex;gap:12px}.primary-cta,.secondary-cta,.danger-cta{
  min-height:43px;border-radius:9px;padding:0 18px;font-weight:750
}
.primary-cta{border:0;color:white;background:linear-gradient(135deg,#1478ff,#0e92ff);box-shadow:0 10px 25px rgba(0,111,255,.25)}
.secondary-cta{border:1px solid #254873;color:#d9e8ff;background:#09182d}
.danger-cta{border:1px solid rgba(255,63,98,.4);color:#ffd8e0;background:rgba(255,63,98,.09)}
.primary-cta.full,.secondary-cta.full{width:100%;margin-top:10px}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;background:
radial-gradient(circle at 55% 48%,rgba(0,190,255,.2),transparent 30%),
linear-gradient(135deg,transparent 45%,rgba(0,102,255,.28),rgba(255,50,55,.25))}
.hero-orbit{width:160px;height:160px;display:grid;place-items:center;font-size:100px;font-weight:950;font-style:italic;border-radius:45px;transform:rotate(-6deg);background:linear-gradient(135deg,#0574ff,#00dcff 45%,#9af128 61%,#ffc319 75%,#ff4044);color:#061022;box-shadow:0 0 60px rgba(0,160,255,.35)}
.hero-slogan{position:absolute;right:38px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1.45;color:#d9e7ff}

.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.metric-modern{min-height:112px;padding:17px;display:grid;grid-template-columns:68px 1fr 60px;align-items:center;gap:12px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(180deg,#0b1830,#081427);box-shadow:var(--shadow)}
.metric-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:28px;font-weight:900}
.metric-icon.purple{background:linear-gradient(135deg,#5732ff,#753cff)}.metric-icon.blue{background:linear-gradient(135deg,#0aa7ff,#166cff)}.metric-icon.green{background:linear-gradient(135deg,#00c35d,#20e46f)}.metric-icon.orange{background:linear-gradient(135deg,#ff9a16,#ff4c26)}
.metric-modern span,.metric-modern strong,.metric-modern small{display:block}.metric-modern span{color:#b5c3dd;font-size:12px}.metric-modern strong{font-size:24px;margin-top:4px}.metric-modern small{font-size:11px;color:#36e678;margin-top:4px}.sparkline{font-size:45px;opacity:.8}.sparkline.blue{color:#168dff}.sparkline.green{color:#20db6b}.sparkline.orange{color:#ff5f41}.sparkline.purple{color:#7755ff}

.dashboard-grid{display:grid;grid-template-columns:1fr 1fr .72fr;gap:14px;margin-top:14px}
.panel-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0a172b,#081426);box-shadow:var(--shadow);padding:17px}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title strong{font-size:14px}.panel-title button{border:1px solid #244267;border-radius:8px;color:#cfe0ff;background:#0b1c34;padding:6px 10px}.uptime{font-size:11px;color:#63ec91}
.server-list{display:grid}.server-row{min-height:65px;display:grid;grid-template-columns:52px 1fr 10px auto 15px;align-items:center;gap:8px;border-top:1px solid rgba(120,165,255,.08)}.server-row:first-child{border-top:0}.server-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#12294b;font-weight:850}.server-avatar.large{width:60px;height:60px}.server-avatar img{width:100%;height:100%;object-fit:cover}.server-copy strong,.server-copy span{display:block}.server-copy strong{font-size:13px}.server-copy span{font-size:11px;color:var(--muted);margin-top:3px}.online-dot{width:8px;height:8px;border-radius:50%;background:#18df68}.online-dot.offline{background:#ff405f}.manage-btn{border:1px solid #25446c;border-radius:9px;background:#10213b;color:#dfeaff;padding:7px 13px}.arrow{color:#1490ff;font-size:25px}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.status-box{padding:12px;border:1px solid rgba(85,145,230,.12);border-radius:10px;background:#0b1b33;text-align:center}.status-box span,.status-box small,.status-box strong{display:block}.status-box span{font-size:20px;color:#2ca5ff}.status-box small{font-size:10px;color:#95a7c7;margin:4px}.status-box strong{font-size:13px}
.usage-fake{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.chart-title{display:flex;justify-content:space-between;font-size:11px}.chart-title span{color:var(--muted)}.fake-chart{height:110px;display:flex;align-items:flex-end;gap:8px;margin-top:8px;border-bottom:1px solid #203a5e}.fake-chart i{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#1b87ff,rgba(19,130,255,.08))}
.invite-card p{color:var(--muted);font-size:12px}

.page-headline{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px}.page-headline h1{font-size:28px;margin:0}.page-headline p{margin:5px 0 0;color:var(--muted)}
.server-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.server-big-card{display:grid;grid-template-columns:70px 1fr auto auto;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#09172a}
.status-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid var(--line)}.status-chip.on{color:#bfffd8;background:rgba(22,220,107,.09);border-color:rgba(22,220,107,.24)}.status-chip.off{color:#ffd4dc;background:rgba(255,59,98,.08);border-color:rgba(255,59,98,.22)}
.two-column,.builder-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.setting-line{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(120,165,255,.09)}.setting-line strong,.setting-line span{display:block}.setting-line strong{font-size:13px}.setting-line span{font-size:11px;color:var(--muted);margin-top:4px}
.switch{position:relative;width:44px;height:24px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#263753}.switch span:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:white;left:3px;top:3px;transition:.2s}.switch input:checked+span{background:linear-gradient(90deg,#176dff,#7757ff)}.switch input:checked+span:before{transform:translateX(20px)}
.field-modern{margin-top:13px}.field-modern label{display:block;margin-bottom:7px;color:#97a9c8;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.modern-input,.modern-textarea,.modern-select{width:100%;border:1px solid rgba(91,140,214,.2);border-radius:9px;background:#08172c;color:#eaf2ff;outline:0;padding:11px 12px}.modern-select{min-height:43px}.modern-textarea{min-height:125px;resize:vertical}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.panel-buttons{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.discord-preview-dark{padding:17px;border-radius:12px;background:#313338}.discord-embed{padding:12px 14px;border-left:4px solid #1677ff;background:#2b2d31;border-radius:3px}.discord-embed h3{margin:0 0 9px;font-size:15px}.discord-embed p{font-size:12px;line-height:1.55;color:#d6d9dc}.discord-embed small{color:#aeb3b9}.discord-blue,.discord-green{margin-top:9px;border:0;border-radius:4px;padding:9px 14px;color:white;font-weight:700}.discord-blue{background:#5865f2}.discord-green{background:#248046}.discord-select{margin-top:9px;padding:11px 12px;border-radius:4px;background:#1e1f22;color:#b5bac1;display:flex;justify-content:space-between}
.info-box{margin-top:13px;padding:13px;border:1px solid rgba(71,101,180,.25);border-radius:10px;background:rgba(86,68,200,.06)}.info-box strong,.info-box span{display:block}.info-box strong{font-size:12px}.info-box span{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.role-grid-modern{max-height:300px;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#061326}.role-pill{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid rgba(100,140,200,.15);border-radius:9px;background:#0a1930;color:#9eb0ce}.role-pill input{display:none}.role-pill i{width:9px;height:9px;border-radius:50%}.role-pill.selected{border-color:rgba(22,119,255,.55);color:white;background:rgba(22,119,255,.1)}.empty-message{color:var(--muted);font-size:12px;padding:10px}
.variable-list{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:10px}.variable-list code{color:#63b3ff}
.command-table>div{display:grid;grid-template-columns:160px 1fr 80px;gap:14px;padding:14px;border-top:1px solid var(--line)}.command-table>div:first-child{border-top:0}.command-table code{color:#56b5ff}.command-table span{color:#bac9e2}.command-table b{color:#6fe696;font-size:11px}
.muted-copy{color:var(--muted);line-height:1.6}

.toast{position:fixed;right:24px;bottom:24px;z-index:50;padding:12px 17px;border-radius:10px;color:#d8ffea;background:#0c3a27;border:1px solid rgba(22,220,107,.28);box-shadow:var(--shadow)}.toast.error{color:#ffe0e6;background:#441827;border-color:rgba(255,59,98,.3)}

@media(max-width:1200px){.control-shell{grid-template-columns:250px 1fr}.metric-row{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.invite-card{grid-column:span 2}.hero-brand h2{font-size:44px}}
@media(max-width:900px){.control-shell{grid-template-columns:1fr}.main-sidebar{height:auto;position:relative}.nav-stack{grid-template-columns:repeat(3,1fr)}.premium-card{display:none}.topbar-modern{position:relative}.hero-banner{grid-template-columns:1fr}.hero-art{min-height:180px}.dashboard-grid,.two-column,.builder-grid,.server-cards{grid-template-columns:1fr}.invite-card{grid-column:auto}}
@media(max-width:650px){.content-modern{padding:12px}.topbar-modern{padding:0 12px}.searchbox{width:100%}.top-actions{display:none}.metric-row{grid-template-columns:1fr}.nav-stack{grid-template-columns:repeat(2,1fr)}.field-grid,.role-grid-modern{grid-template-columns:1fr}.hero-overlay{padding:24px}.hero-brand h2{font-size:35px}.hero-logo{width:68px;height:68px;font-size:42px}.server-big-card{grid-template-columns:60px 1fr}.server-big-card .status-chip,.server-big-card .primary-cta{grid-column:span 2}.panel-buttons{flex-direction:column}.panel-buttons button{width:100%}}


/* v0.4 Community Suite additions */
.ticket-button-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.discord-gray{margin-top:0;border:0;border-radius:4px;padding:9px 12px;color:white;font-weight:700;background:#4e5058}
.ticket-button-preview .discord-blue,.ticket-button-preview .discord-green{margin-top:0}
.setup-feature-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.setup-feature-list>div{padding:14px;border:1px solid var(--line);border-radius:11px;background:#08182d;text-align:center}
.setup-feature-list b,.setup-feature-list span{display:block}.setup-feature-list b{font-size:24px;color:#50adff}.setup-feature-list span{margin-top:4px;font-size:10px;color:var(--muted)}
.setup-checklist{display:grid;gap:9px}.setup-checklist>div{padding:11px 12px;border:1px solid rgba(90,140,210,.12);border-radius:9px;background:#08172b;color:#bdcae1;font-size:12px}
@media(max-width:650px){.setup-feature-list{grid-template-columns:repeat(2,1fr)}}


/* WebApex v0.5 Security Suite */
.security-tabs{
  position:sticky;top:92px;z-index:5;display:flex;gap:8px;overflow:auto;
  padding:10px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(7,18,36,.94);backdrop-filter:blur(16px)
}
.security-tab{
  flex:0 0 auto;min-height:36px;border:1px solid #244366;border-radius:9px;
  padding:0 12px;color:#a9bad6;background:#09182c;font-weight:700;font-size:11px
}
.security-tab.active{color:white;border-color:#1677ff;background:linear-gradient(135deg,#145dff,#168cff)}
.security-section{scroll-margin-top:150px;margin-bottom:16px}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 2px 10px}
.section-title-row h2{margin:0;font-size:20px}.section-title-row p{margin:5px 0 0;color:var(--muted);font-size:12px}
.threshold-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.threshold-item{display:grid;grid-template-columns:1fr 72px;align-items:center;gap:10px;padding:9px;border:1px solid rgba(120,165,255,.09);border-radius:9px;background:#08172a}
.threshold-item label{font-size:11px;color:#b3c2dc}.threshold-item input{width:100%;border:1px solid #244267;border-radius:7px;background:#061326;color:white;padding:7px}
.muted-mini{font-size:10px;color:var(--muted)}
.compact-area{min-height:85px}
.sticky-save-bar{
  position:sticky;bottom:14px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding:13px 15px;border:1px solid rgba(22,119,255,.35);border-radius:12px;
  background:rgba(6,20,40,.96);box-shadow:0 18px 50px rgba(0,0,0,.38);backdrop-filter:blur(16px)
}
.sticky-save-bar strong,.sticky-save-bar span{display:block}.sticky-save-bar span{margin-top:2px;color:var(--muted);font-size:10px}
.security-event-list{display:grid;gap:8px;max-height:480px;overflow:auto}
.security-event{display:grid;grid-template-columns:5px 1fr auto;gap:10px;padding:10px;border:1px solid rgba(120,165,255,.1);border-radius:9px;background:#081629}
.event-severity{border-radius:999px;background:#1677ff}.security-event.warning .event-severity{background:#ffb020}.security-event.critical .event-severity{background:#ff3355}
.event-main strong,.event-main span,.event-main small{display:block}.event-main strong{font-size:11px}.event-main span{font-size:10px;color:#c3d0e7;margin-top:3px}.event-main small{font-size:9px;color:#7488a9;margin-top:4px}.event-meta{font-size:9px;color:#91baff}
.backup-list{display:grid;gap:8px}.backup-row{display:grid;grid-template-columns:1fr 160px auto;align-items:center;gap:12px;padding:12px;border:1px solid rgba(120,165,255,.1);border-radius:10px;background:#081629}
.backup-row strong,.backup-row span{display:block}.backup-row strong{font-size:12px}.backup-row span{font-size:10px;color:var(--muted);margin-top:3px}.backup-row code{color:#69afff;font-size:10px}
code{color:#70b8ff}

@media(max-width:760px){
  .threshold-grid{grid-template-columns:1fr}
  .sticky-save-bar{align-items:stretch;flex-direction:column}
  .sticky-save-bar button{width:100%}
  .backup-row{grid-template-columns:1fr}
}


/* WebApex v0.6 Full Security */
.security-command-bar{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  margin-bottom:12px;padding:14px 16px;border:1px solid rgba(22,119,255,.35);
  border-radius:13px;background:linear-gradient(135deg,rgba(22,119,255,.12),rgba(12,28,55,.94))
}
.security-command-bar strong,.security-command-bar span{display:block}
.security-command-bar span{margin-top:4px;color:var(--muted);font-size:11px}
.security-command-actions{display:flex;gap:8px;flex:0 0 auto}

.diagnostics-panel{margin-bottom:13px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#071426}
.diagnostic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.diagnostic-item{
  display:flex;align-items:center;gap:9px;padding:10px;border:1px solid rgba(120,165,255,.1);
  border-radius:10px;background:#09182c
}
.diagnostic-item>span{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900
}
.diagnostic-item.ok>span{color:#c9ffdc;background:rgba(22,220,107,.14)}
.diagnostic-item.bad>span{color:#ffd4dc;background:rgba(255,59,98,.13)}
.diagnostic-item strong,.diagnostic-item small{display:block}
.diagnostic-item strong{font-size:10px}.diagnostic-item small{margin-top:2px;color:var(--muted);font-size:9px}
.diagnostic-footer{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;color:#9bb0d0;font-size:10px}

.security-test-center{margin-bottom:14px}
.test-button-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.test-button-grid button{width:100%}

.emergency-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border-color:rgba(255,59,98,.25)}
.emergency-card strong,.emergency-card span{display:block}
.emergency-card strong{color:#ffe2e8}.emergency-card span{max-width:820px;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.55}
.emergency-actions{display:flex;gap:8px;flex:0 0 auto}

@media(max-width:1050px){
  .diagnostic-grid{grid-template-columns:repeat(3,1fr)}
  .test-button-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .security-command-bar,.emergency-card{align-items:stretch;flex-direction:column}
  .security-command-actions,.emergency-actions{display:grid;grid-template-columns:1fr}
  .diagnostic-grid{grid-template-columns:repeat(2,1fr)}
  .test-button-grid{grid-template-columns:1fr}
}


/* WebApex v0.7 Smart Setup Assistant */
.smart-setup-hero{
  min-height:190px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:14px;padding:28px 34px;border:1px solid rgba(22,119,255,.35);border-radius:16px;
  overflow:hidden;background:
    radial-gradient(circle at 85% 45%,rgba(0,201,255,.18),transparent 22%),
    linear-gradient(135deg,rgba(18,83,220,.27),rgba(7,20,42,.96) 55%,rgba(5,14,30,.98))
}
.smart-setup-hero h2{margin:8px 0 7px;font-size:32px;letter-spacing:-1px}
.smart-setup-hero p{max-width:780px;margin:0;color:#a8bbdc;line-height:1.6}
.ai-badge{
  display:inline-flex;padding:6px 9px;border:1px solid rgba(42,167,255,.35);border-radius:999px;
  color:#82caff;background:rgba(22,119,255,.08);font-size:10px;font-weight:900;letter-spacing:.12em
}
.ai-orb{
  width:120px;height:120px;flex:0 0 auto;display:grid;place-items:center;border-radius:35px;
  color:#051224;font-size:76px;font-weight:950;font-style:italic;transform:rotate(-5deg);
  background:linear-gradient(135deg,#087dff,#00d9ff 43%,#98f02e 60%,#ffd326 76%,#ff4350);
  box-shadow:0 0 65px rgba(0,162,255,.28)
}
.smart-prompt{min-height:170px;font-size:14px;line-height:1.65}
.smart-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
.smart-actions button:disabled{opacity:.45;cursor:not-allowed}
.smart-empty{min-height:300px;display:grid;place-items:center;text-align:center;line-height:1.7}
.smart-plan{display:grid;gap:12px}
.plan-category{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:12px;border:1px solid rgba(92,145,225,.16);border-radius:10px;background:#08182e
}
.plan-category span{font-size:10px;color:#88a1c7;text-transform:uppercase}.plan-category strong{font-size:13px}.plan-category em{font-style:normal;color:#6ddd9a;font-size:10px}
.plan-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plan-summary-grid>div{text-align:center;padding:10px;border:1px solid rgba(92,145,225,.12);border-radius:9px;background:#071426}
.plan-summary-grid strong,.plan-summary-grid span{display:block}.plan-summary-grid strong{font-size:20px}.plan-summary-grid span{margin-top:2px;color:#8fa4c7;font-size:9px}
.plan-list{display:grid;gap:7px;max-height:330px;overflow:auto}
.plan-channel{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:9px;padding:9px;border:1px solid rgba(92,145,225,.11);border-radius:9px;background:#081629}
.plan-channel>span{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:#10284b;color:#59b4ff;font-weight:900}
.plan-channel strong,.plan-channel small{display:block}.plan-channel strong{font-size:11px}.plan-channel small{margin-top:2px;color:#8399bb;font-size:9px}
.plan-channel em{font-style:normal;font-size:8px;font-weight:900;padding:5px 7px;border-radius:999px}
.plan-channel em.create{color:#bfffd8;background:rgba(22,220,107,.1)}.plan-channel em.reuse{color:#b7d8ff;background:rgba(22,119,255,.12)}
.smart-explainer{margin-top:14px}
.feature-grid-smart{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.feature-grid-smart>div{padding:13px;border:1px solid rgba(92,145,225,.1);border-radius:10px;background:#081629}
.feature-grid-smart b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#71bdff;background:rgba(22,119,255,.12)}
.feature-grid-smart strong,.feature-grid-smart span{display:block}.feature-grid-smart strong{margin-top:9px;font-size:12px}.feature-grid-smart span{margin-top:4px;color:#8ea3c5;font-size:10px;line-height:1.5}

@media(max-width:850px){
  .smart-setup-hero{align-items:flex-start}
  .ai-orb{width:80px;height:80px;border-radius:24px;font-size:50px}
  .feature-grid-smart{grid-template-columns:1fr 1fr}
  .plan-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .smart-setup-hero{padding:20px}.ai-orb{display:none}
  .feature-grid-smart{grid-template-columns:1fr}
  .smart-actions{flex-direction:column}.smart-actions button{width:100%}
}


/* WebApex v0.8 Real AI Builder */
.real-ai-hero .ai-orb{
  font-size:44px;letter-spacing:-4px
}
.ai-config-warning{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-bottom:14px;padding:13px 16px;border:1px solid rgba(255,176,32,.28);
  border-radius:12px;background:rgba(255,176,32,.07)
}
.ai-config-warning strong,.ai-config-warning span{display:block}
.ai-config-warning strong{color:#ffd27a}.ai-config-warning span{color:#b5a785;font-size:11px}
.ai-connected-line{
  display:flex;gap:20px;flex-wrap:wrap;margin:-2px 0 13px;padding:9px 12px;
  border:1px solid rgba(22,220,107,.15);border-radius:9px;background:rgba(22,220,107,.04);
  color:#93a9c9;font-size:10px
}
.ai-connected-line b{color:#9cf0bd}
.real-ai-prompt{min-height:235px;font-size:15px;line-height:1.65}
.ai-example-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
.ai-example{
  border:1px solid rgba(90,142,220,.14);border-radius:9px;padding:9px 10px;
  color:#96add0;background:#08172b;text-align:left;font-size:10px;line-height:1.45
}
.ai-example:hover{border-color:rgba(22,119,255,.5);color:white;background:rgba(22,119,255,.08)}
.ai-plan-card{min-height:620px}
.ai-thinking-empty{
  min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center
}
.ai-thinking-orb{
  width:64px;height:64px;display:grid;place-items:center;border-radius:20px;margin-bottom:14px;
  font-size:31px;color:#8ed0ff;background:linear-gradient(135deg,rgba(22,119,255,.22),rgba(111,68,255,.18));
  box-shadow:0 0 35px rgba(22,119,255,.15)
}
.ai-thinking-empty strong{font-size:14px}.ai-thinking-empty span{max-width:440px;margin-top:7px;color:#8198bc;font-size:11px;line-height:1.6}
.real-ai-plan{display:grid;gap:11px}
.ai-plan-summary{padding:13px;border:1px solid rgba(22,119,255,.2);border-radius:10px;background:rgba(22,119,255,.05)}
.ai-plan-summary strong{font-size:16px}.ai-plan-summary p{margin:5px 0 0;color:#9dafcc;font-size:11px;line-height:1.55}
.ai-plan-section{border:1px solid rgba(92,145,225,.1);border-radius:10px;overflow:hidden}
.ai-plan-section h4{margin:0;padding:9px 11px;border-bottom:1px solid rgba(92,145,225,.1);background:#07162a;font-size:10px;color:#81bfff;text-transform:uppercase;letter-spacing:.08em}
.ai-plan-list{max-height:175px;overflow:auto}
.ai-plan-row{display:grid;grid-template-columns:160px 1fr;gap:10px;padding:8px 10px;border-top:1px solid rgba(92,145,225,.07)}
.ai-plan-row:first-child{border-top:0}.ai-plan-row strong{font-size:10px}.ai-plan-row span{color:#8297b8;font-size:9px;line-height:1.45}
.ai-feature-chip{
  display:inline-flex;width:max-content;padding:6px 9px;border:1px solid rgba(22,220,107,.17);
  border-radius:999px;color:#8deab0;background:rgba(22,220,107,.05);font-size:9px;font-weight:750
}
.ai-build-actions{border-top:1px solid var(--line);padding-top:13px}
@media(max-width:700px){
  .ai-example-grid{grid-template-columns:1fr}
  .ai-plan-row{grid-template-columns:1fr}
}


.ticket-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-bottom:14px
}
.ticket-stats-grid>div{
  padding:13px;
  border:1px solid rgba(90,145,225,.12);
  border-radius:10px;
  background:#07172b
}
.ticket-stats-grid strong,.ticket-stats-grid span{display:block}
.ticket-stats-grid strong{font-size:22px}
.ticket-stats-grid span{margin-top:3px;color:#859abb;font-size:9px}
@media(max-width:760px){.ticket-stats-grid{grid-template-columns:1fr 1fr}}


/* ==========================================================
   WebApex One v1.0.1 Modern Stable UI
   Fixes the v1.0 video issues: missing music styles,
   squeezed moderation panel, leaderboard collisions,
   horizontal overflow, native-looking buttons and spacing.
   ========================================================== */

html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 78% -10%,rgba(22,119,255,.16),transparent 26%),
    radial-gradient(circle at 15% 100%,rgba(96,52,255,.08),transparent 24%),
    #050b16;
}

.workspace,
.content-modern,
#pageContent,
.panel-card,
.two-column>*,
.builder-grid>*,
.dashboard-grid>*{
  min-width:0;
}

.content-modern{
  width:100%;
  max-width:1700px;
  padding:22px 26px 54px;
}

.two-column,
.builder-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}

.panel-card{
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(11,27,51,.96),rgba(7,19,37,.98));
  border-color:rgba(108,159,240,.14);
  box-shadow:0 20px 55px rgba(0,0,0,.20);
}

.panel-card:hover{
  border-color:rgba(108,159,240,.20);
}

.page-headline{
  gap:20px;
  margin:10px 0 20px;
}

.page-headline>div:first-child{
  min-width:0;
}

.page-headline h1{
  font-size:30px;
  letter-spacing:-.6px;
}

.page-headline p{
  max-width:760px;
  line-height:1.55;
}

.page-headline .modern-select{
  min-width:min(560px,46vw);
}

.primary-cta,
.secondary-cta,
.danger-cta,
.panel-title button,
.manage-btn,
.logout-link,
.music-controls button,
.rule-card button,
.queue-row button{
  appearance:none;
  -webkit-appearance:none;
  outline:none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.primary-cta:hover,
.secondary-cta:hover,
.panel-title button:hover,
.manage-btn:hover{
  transform:translateY(-1px);
}

button:disabled{
  cursor:not-allowed!important;
  opacity:.52!important;
  transform:none!important;
}

.modern-input,
.modern-select,
.modern-textarea{
  width:100%;
  min-width:0;
  border:1px solid rgba(91,143,222,.24);
  border-radius:10px;
  outline:none;
  background:#081a32;
  color:#edf5ff;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.modern-input,
.modern-select{
  min-height:46px;
  padding:0 13px;
}

.modern-textarea{
  min-height:120px;
  padding:12px 13px;
  resize:vertical;
  line-height:1.55;
}

.modern-input:focus,
.modern-select:focus,
.modern-textarea:focus{
  border-color:rgba(37,137,255,.72);
  background:#091d38;
  box-shadow:0 0 0 3px rgba(22,119,255,.10);
}

.field-modern{
  min-width:0;
}

.field-modern label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px;
  color:#96abd0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.two-fields,
.three-fields,
.four-fields{
  display:grid;
  gap:11px;
  min-width:0;
}

.two-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.three-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.four-fields{grid-template-columns:repeat(4,minmax(0,1fr))}

.form-stack{
  display:grid;
  gap:13px;
}

.setting-line{
  min-width:0;
}

.setting-line>div{
  min-width:0;
}

.compact-line{
  padding:10px 0;
}

.sub-title{
  margin-top:9px;
  padding-top:14px;
  border-top:1px solid rgba(110,160,235,.10);
}

.variable-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding-top:4px;
}

.variable-tags code{
  padding:6px 9px;
  border:1px solid rgba(22,119,255,.20);
  border-radius:8px;
  background:#07172d;
  color:#7ec3ff;
  font-size:9px;
}

/* Sidebar refinement */
.main-sidebar{
  scrollbar-width:thin;
  scrollbar-color:#274976 transparent;
}

.nav-link{
  min-width:0;
  overflow:hidden;
}

.nav-link span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav-link.active{
  background:linear-gradient(100deg,#176cff,#148cff);
  box-shadow:0 12px 32px rgba(0,103,255,.22);
}

/* Music */
.music-hero-card{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
  padding:20px;
  border:1px solid rgba(66,147,255,.26);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 50%,rgba(43,122,255,.18),transparent 26%),
    radial-gradient(circle at 92% 20%,rgba(116,55,255,.12),transparent 24%),
    linear-gradient(135deg,#0a1b36,#071326);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.music-cover{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:21px;
  background:linear-gradient(145deg,#1677ff,#7047ff);
  color:white;
  font-size:39px;
  box-shadow:0 12px 34px rgba(53,103,255,.26);
}

.music-now{
  min-width:0;
}

.music-now>span{
  display:block;
  color:#73bfff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.music-now h2{
  margin:5px 0 4px;
  overflow:hidden;
  color:#fff;
  font-size:22px;
  letter-spacing:-.35px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.music-now p{
  margin:0;
  color:#8ca3c8;
  font-size:10px;
}

.music-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.music-controls button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(98,151,235,.19);
  border-radius:12px;
  background:#0c2443;
  color:#e9f3ff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 7px 18px rgba(0,0,0,.12);
}

.music-controls button:hover{
  border-color:rgba(22,136,255,.58);
  background:#12345d;
  transform:translateY(-1px);
}

.music-controls .danger-mini{
  color:#ff8ca2;
}

#musicVolume{
  width:100%;
  accent-color:#1687ff;
}

.music-queue{
  display:grid;
  gap:8px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}

.queue-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  align-items:center;
  gap:9px;
  padding:9px;
  border:1px solid rgba(91,145,229,.10);
  border-radius:10px;
  background:#07172c;
}

.queue-row>b{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#102d53;
  color:#7abfff;
  font-size:10px;
}

.queue-row>div{
  min-width:0;
}

.queue-row strong,
.queue-row span{
  display:block;
}

.queue-row strong{
  overflow:hidden;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.queue-row span{
  margin-top:3px;
  color:#8299bb;
  font-size:8px;
}

.queue-row button{
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#ff91a7;
  font-size:18px;
}

.queue-row button:hover{
  background:rgba(255,69,100,.08);
}

/* Moderation */
.feature-command-grid{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  max-width:100%;
}

.feature-command-grid code{
  max-width:100%;
  padding:7px 9px;
  border:1px solid rgba(22,119,255,.16);
  border-radius:8px;
  overflow-wrap:anywhere;
  background:#07172b;
  color:#86c7ff;
  font-size:10px;
}

.command-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

/* Auto responder */
.rule-list{
  display:grid;
  gap:8px;
}

.rule-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:11px;
  border:1px solid rgba(91,145,229,.11);
  border-radius:10px;
  background:#07172b;
}

.rule-card>div{
  min-width:0;
}

.rule-card strong,
.rule-card span{
  display:block;
}

.rule-card strong{
  overflow:hidden;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rule-card span{
  margin-top:3px;
  overflow:hidden;
  color:#8298b9;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rule-card button{
  flex:0 0 auto;
  border:1px solid rgba(255,80,110,.20);
  border-radius:8px;
  padding:7px 9px;
  background:rgba(255,70,100,.06);
  color:#ff9aae;
}

/* Leveling */
.leaderboard-list{
  display:grid;
  gap:8px;
  max-height:520px;
  overflow:auto;
}

.leader-row{
  display:grid;
  grid-template-columns:36px 42px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px;
  border:1px solid rgba(91,145,229,.10);
  border-radius:10px;
  background:#07172b;
}

.leader-row>b{
  color:#72bfff;
  text-align:center;
  font-size:11px;
}

.leader-row img,
.mini-avatar{
  width:38px;
  height:38px;
  border-radius:12px;
  object-fit:cover;
}

.mini-avatar{
  display:grid;
  place-items:center;
  background:#102b50;
}

.leader-row>div{
  min-width:0;
}

.leader-row strong,
.leader-row span{
  display:block;
}

.leader-row strong{
  overflow:hidden;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.leader-row span{
  margin-top:3px;
  color:#8499ba;
  font-size:9px;
}

/* Embed preview */
.discord-embed-preview{
  min-height:280px;
  padding:17px 18px;
  border:1px solid #2b2d31;
  border-left:4px solid #1677ff;
  border-radius:5px 12px 12px 5px;
  background:#1e1f22;
  color:#dbdee1;
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}

.discord-embed-preview strong{
  font-size:16px;
}

.discord-embed-preview p{
  min-height:110px;
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.58;
}

.discord-embed-preview small{
  color:#b5bac1;
}

/* Ticket stats */
.ticket-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.ticket-stats-grid>div{
  min-width:0;
  padding:14px;
  border:1px solid rgba(91,145,229,.12);
  border-radius:11px;
  background:linear-gradient(180deg,#091a31,#071528);
}

.ticket-stats-grid strong,
.ticket-stats-grid span{
  display:block;
}

.ticket-stats-grid strong{
  color:#f8fbff;
  font-size:23px;
}

.ticket-stats-grid span{
  margin-top:3px;
  color:#859abb;
  font-size:9px;
}

/* Better empty states */
.modern-empty{
  min-height:170px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:24px;
  text-align:center;
}

.modern-empty>b{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:5px;
  border-radius:13px;
  background:rgba(22,119,255,.10);
  color:#75bfff;
  font-size:19px;
}

.modern-empty strong{
  color:#dce9ff;
  font-size:11px;
}

.modern-empty span{
  color:#7f96b8;
  font-size:9px;
}

/* Security / AutoMod refinements */
.security-command-bar,
.diagnostics-panel,
.security-test-center,
.emergency-card{
  box-shadow:0 14px 38px rgba(0,0,0,.12);
}

.diagnostic-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.diagnostic-item{
  min-width:0;
}

.threshold-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Server builder */
.setup-checklist>div{
  line-height:1.45;
}

.setup-feature-list{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Search/top bar */
.searchbox{
  min-width:0;
}

.searchbox input{
  min-width:0;
}

.profile-chip{
  min-width:150px;
}

/* Scrollbars */
*{
  scrollbar-width:thin;
  scrollbar-color:#284c7e transparent;
}

*::-webkit-scrollbar{
  width:9px;
  height:9px;
}

*::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:#284c7e;
  background-clip:padding-box;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

/* Mobile and medium layouts */
@media(max-width:1200px){
  .two-column,
  .builder-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .page-headline{
    align-items:flex-start;
    flex-direction:column;
  }

  .page-headline .modern-select{
    width:100%;
    min-width:0;
  }

  .four-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .diagnostic-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .content-modern{
    padding:16px;
  }

  .music-hero-card{
    grid-template-columns:70px minmax(0,1fr);
  }

  .music-cover{
    width:64px;
    height:64px;
    border-radius:18px;
    font-size:32px;
  }

  .music-controls{
    grid-column:1/-1;
    justify-content:flex-start;
  }

  .three-fields,
  .command-groups{
    grid-template-columns:minmax(0,1fr);
  }

  .ticket-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .setup-feature-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .two-fields,
  .three-fields,
  .four-fields,
  .ticket-stats-grid,
  .diagnostic-grid,
  .threshold-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .content-modern{
    padding:12px 10px 38px;
  }

  .page-headline h1{
    font-size:25px;
  }

  .music-hero-card{
    padding:15px;
  }

  .music-now h2{
    font-size:18px;
  }

  .smart-actions{
    flex-direction:column;
  }

  .smart-actions button{
    width:100%;
  }
}


/* v1.0.2 Music URL / fallback engine */
.music-engine-note{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:-4px 0 4px;
}
.music-engine-note span{
  padding:5px 7px;
  border:1px solid rgba(73,145,255,.13);
  border-radius:7px;
  background:rgba(8,29,55,.76);
  color:#7f9ec9;
  font-size:8px;
}
.music-error-box{
  display:none;
  padding:10px 11px;
  border:1px solid rgba(255,86,116,.24);
  border-radius:9px;
  background:rgba(109,18,42,.20);
  color:#ffb2c0;
  font-size:10px;
  line-height:1.45;
}
.music-error-box.show{
  display:block;
}


/* =====================================================================
   WebApex One v1.2.0 — Premium Theme
   Visual-only redesign. Existing IDs, routes, APIs and module behavior
   are intentionally unchanged.
   ===================================================================== */

:root{
  --wa-bg:#050712;
  --wa-bg-2:#090D1A;
  --wa-sidebar:#070A13;
  --wa-card:#101525;
  --wa-card-hover:#151B30;
  --wa-input:#0C1120;
  --wa-border:rgba(255,255,255,.07);
  --wa-border-strong:rgba(255,255,255,.12);
  --wa-blue:#2563EB;
  --wa-blue-bright:#3B82F6;
  --wa-violet:#6366F1;
  --wa-purple:#7C3AED;
  --wa-cyan:#06B6D4;
  --wa-success:#22C55E;
  --wa-warning:#F59E0B;
  --wa-danger:#EF4444;
  --wa-text:#FFFFFF;
  --wa-text-2:#A7B0C0;
  --wa-muted:#667085;
  --wa-ease:cubic-bezier(.4,0,.2,1);
  --wa-shadow:0 18px 52px rgba(0,0,0,.32);
  --wa-shadow-soft:0 10px 30px rgba(0,0,0,.20);
  --wa-glow:0 0 0 1px rgba(99,102,241,.08),0 16px 46px rgba(37,99,235,.08);
  --bg:var(--wa-bg);
  --bg2:var(--wa-bg-2);
  --panel:var(--wa-card);
  --panel2:var(--wa-card-hover);
  --line:var(--wa-border);
  --text:var(--wa-text);
  --muted:var(--wa-text-2);
  --blue:var(--wa-blue);
  --blue2:var(--wa-blue-bright);
  --purple:var(--wa-purple);
  --green:var(--wa-success);
  --orange:var(--wa-warning);
  --red:var(--wa-danger);
  --shadow:var(--wa-shadow);
}

*{
  box-sizing:border-box;
}

html{
  color-scheme:dark;
  scroll-behavior:smooth;
  background:var(--wa-bg);
}

body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--wa-text);
  background:
    radial-gradient(900px 520px at -10% -5%,rgba(124,58,237,.16),transparent 62%),
    radial-gradient(900px 620px at 108% 18%,rgba(37,99,235,.16),transparent 60%),
    radial-gradient(720px 520px at 60% 105%,rgba(6,182,212,.06),transparent 65%),
    linear-gradient(180deg,var(--wa-bg) 0%,#060914 48%,#050711 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 78%);
}

button,
input,
select,
textarea{
  font:inherit;
}

button,
a,
input,
select,
textarea{
  transition:
    color .18s var(--wa-ease),
    background .18s var(--wa-ease),
    border-color .18s var(--wa-ease),
    box-shadow .18s var(--wa-ease),
    transform .18s var(--wa-ease),
    opacity .18s var(--wa-ease);
}

button{
  cursor:pointer;
}

button:disabled{
  cursor:not-allowed;
  opacity:.48;
  transform:none!important;
  box-shadow:none!important;
}

.hidden{
  display:none!important;
}

/* Scrollbars */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(99,102,241,.58) rgba(255,255,255,.02);
}

*::-webkit-scrollbar{
  width:9px;
  height:9px;
}

*::-webkit-scrollbar-track{
  background:rgba(255,255,255,.018);
}

*::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(var(--wa-blue),var(--wa-violet));
  background-clip:padding-box;
}

/* Main shell */
.control-shell{
  display:grid;
  grid-template-columns:286px minmax(0,1fr);
  min-height:100vh;
}

.main-sidebar{
  position:sticky;
  top:0;
  z-index:20;
  height:100vh;
  min-width:0;
  overflow-y:auto;
  padding:20px 14px 18px;
  border-right:1px solid var(--wa-border);
  background:
    radial-gradient(460px 360px at 10% -5%,rgba(99,102,241,.10),transparent 62%),
    linear-gradient(180deg,rgba(7,10,19,.98),rgba(6,8,16,.99));
  box-shadow:16px 0 48px rgba(0,0,0,.12);
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 18px;
}

.brand-logo-shell{
  width:48px;
  height:48px;
  flex:0 0 auto;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

.brand-logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
}

.brand-text-lockup{
  min-width:0;
}

.brand-word{
  color:#fff;
  font-size:23px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.045em;
}

.brand-word span{
  color:#70e64c!important;
  background:none!important;
  -webkit-background-clip:initial!important;
}

.brand-caption{
  margin-top:6px;
  color:var(--wa-muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.nav-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:4px;
}

.nav-stack::before{
  content:"WORKSPACE";
  padding:8px 12px 5px;
  color:#505a6e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
}

.nav-link{
  position:relative;
  min-width:0;
  min-height:44px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:0 12px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#909bb0;
  text-align:left;
}

.nav-link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:0;
  border-radius:999px;
  background:linear-gradient(180deg,var(--wa-blue-bright),var(--wa-violet));
  transform:translateY(-50%);
  transition:height .18s var(--wa-ease);
  box-shadow:0 0 14px rgba(99,102,241,.72);
}

.nav-link b{
  width:26px;
  color:#77849a;
  font-size:16px;
  text-align:center;
}

.nav-link span{
  min-width:0;
  overflow:hidden;
  font-size:13px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav-link i{
  min-width:24px;
  min-height:22px;
  display:grid;
  place-items:center;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#a9b4c6;
  font-size:9px;
  font-style:normal;
}

.nav-link:hover{
  border-color:rgba(255,255,255,.055);
  background:rgba(255,255,255,.032);
  color:#fff;
  transform:translateX(1px);
}

.nav-link:hover b{
  color:#b9c7de;
}

.nav-link.active{
  border-color:rgba(99,102,241,.20);
  background:
    linear-gradient(90deg,rgba(37,99,235,.18),rgba(124,58,237,.08));
  color:#fff;
  box-shadow:inset 0 0 28px rgba(37,99,235,.035);
}

.nav-link.active::before{
  height:24px;
}

.nav-link.active b{
  color:#7fb0ff;
}

.premium-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 2px 10px;
  padding:13px;
  border:1px solid rgba(124,58,237,.20);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(124,58,237,.09),rgba(37,99,235,.045));
  box-shadow:none;
}

.premium-card strong{
  display:block;
  color:#eeeaff;
  font-size:11px;
}

.premium-card span{
  display:block;
  margin-top:4px;
  color:#786f93;
  font-size:9px;
  line-height:1.45;
}

.premium-crown{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(124,58,237,.12);
  color:#9f7aea;
  font-size:15px;
}

.logout-link{
  width:100%;
  min-height:42px;
  margin-top:8px;
  border:1px solid var(--wa-border);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  color:#8d98aa;
  font-weight:600;
}

.logout-link:hover{
  border-color:rgba(239,68,68,.22);
  background:rgba(239,68,68,.06);
  color:#ffc6c6;
}

/* Workspace / navbar */
.workspace{
  min-width:0;
}

.topbar-modern{
  position:sticky;
  top:0;
  z-index:15;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 24px;
  border-bottom:1px solid var(--wa-border);
  background:rgba(5,7,18,.72);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.searchbox{
  width:min(760px,62vw);
  min-width:0;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 13px;
  border:1px solid var(--wa-border);
  border-radius:12px;
  background:rgba(12,17,32,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}

.searchbox:focus-within{
  border-color:rgba(99,102,241,.52);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}

.searchbox span{
  color:#73809a;
  font-size:19px;
}

.searchbox input{
  flex:1;
  min-width:0;
  padding:0;
  border:0!important;
  background:transparent!important;
  color:#fff;
  outline:0;
}

.searchbox input::placeholder{
  color:#5d687c;
}

.searchbox kbd{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid var(--wa-border);
  border-radius:8px;
  background:rgba(255,255,255,.026);
  color:#6d788c;
  font-size:10px;
  box-shadow:none;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.icon-button{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#7f8ba0;
  font-size:17px;
}

.icon-button:hover{
  border-color:var(--wa-border);
  background:rgba(255,255,255,.03);
  color:#fff;
}

.profile-chip{
  min-width:160px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 7px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
}

.profile-chip:hover{
  border-color:var(--wa-border);
  background:rgba(255,255,255,.025);
}

.profile-chip img,
.profile-fallback{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:10px;
  object-fit:cover;
}

.profile-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--wa-blue),var(--wa-violet));
}

.profile-chip strong,
.profile-chip span{
  display:block;
}

.profile-chip strong{
  color:#fff;
  font-size:11px;
}

.profile-chip span{
  color:#6e798c;
  font-size:9px;
}

.profile-chip b{
  margin-left:auto;
  color:#616d81;
}

.mini-loader{
  width:22px;
  height:22px;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--wa-blue-bright);
  border-radius:50%;
  animation:wa-spin .75s linear infinite;
}

/* Content */
.content-modern{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:26px 28px 52px;
}

#pageContent{
  animation:wa-page-in .35s var(--wa-ease) both;
}

.page-headline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:2px 0 22px;
}

.page-headline>div:first-child{
  min-width:0;
}

.page-headline h1{
  margin:0;
  color:#fff;
  font-size:31px;
  font-weight:750;
  line-height:1.15;
  letter-spacing:-.035em;
}

.page-headline p{
  max-width:760px;
  margin:7px 0 0;
  color:#7d889b;
  font-size:13px;
  line-height:1.65;
}

.page-headline>.modern-select{
  width:min(500px,42vw);
}

/* Card system */
.panel-card,
.metric-modern,
.server-big-card,
.diagnostics-panel,
.security-command-bar,
.security-test-center,
.emergency-card,
.smart-setup-hero,
.ai-config-warning,
.ai-plan-section,
.ai-plan-summary,
.plan-category,
.plan-summary-grid>div,
.feature-grid-smart>div,
.ticket-stats-grid>div,
.rule-card,
.queue-row,
.leader-row,
.info-box,
.backup-row,
.security-event,
.status-box,
.server-row,
.threshold-item,
.diagnostic-item,
.discord-preview-dark{
  border:1px solid var(--wa-border)!important;
  background:
    linear-gradient(180deg,rgba(16,21,37,.94),rgba(13,18,32,.96))!important;
  box-shadow:var(--wa-shadow-soft);
}

.panel-card,
.server-big-card,
.smart-setup-hero,
.security-command-bar,
.security-test-center,
.emergency-card,
.discord-preview-dark{
  border-radius:16px!important;
}

.panel-card{
  min-width:0;
  padding:18px;
}

.panel-card:hover,
.metric-modern:hover,
.server-big-card:hover{
  border-color:rgba(99,102,241,.22)!important;
  transform:translateY(-2px);
  box-shadow:var(--wa-glow);
}

.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}

.panel-title strong{
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}

.panel-title span{
  color:#707b90;
}

.panel-title button{
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--wa-border);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#98a4b7;
  font-weight:600;
}

.panel-title button:hover{
  border-color:rgba(99,102,241,.32);
  background:rgba(99,102,241,.08);
  color:#fff;
}

/* Dashboard hero */
.hero-banner{
  position:relative;
  min-height:260px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);
  overflow:hidden;
  border:1px solid rgba(99,102,241,.18)!important;
  border-radius:18px!important;
  background:
    radial-gradient(540px 340px at 10% 0%,rgba(124,58,237,.16),transparent 70%),
    radial-gradient(520px 360px at 88% 90%,rgba(37,99,235,.16),transparent 72%),
    linear-gradient(135deg,#0e1325 0%,#0b1121 48%,#0b1020 100%)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.32);
}

.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 45%,rgba(255,255,255,.018) 45.5%,transparent 46%);
}

.hero-overlay{
  position:relative;
  z-index:1;
  padding:32px 36px;
}

.hero-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.hero-logo{
  width:72px!important;
  height:72px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.28)!important;
  transform:none!important;
}

.logo-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
}

.hero-brand h2{
  margin:0;
  color:#fff;
  font-size:45px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.055em;
}

.hero-brand h2 span{
  color:#6ee149!important;
  background:none!important;
  -webkit-background-clip:initial!important;
}

.hero-brand p{
  margin:7px 0 0;
  color:#a3aec0;
  font-size:15px;
}

.hero-tags{
  margin:21px 0;
  color:#7c889c;
  font-size:12px;
}

.hero-tags i{
  margin:0 8px;
  color:#434c5d;
}

.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(37,99,235,.12),transparent 48%)!important;
}

.hero-art::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.12),transparent 68%);
  filter:blur(2px);
}

.hero-orbit{
  width:142px!important;
  height:142px!important;
  z-index:1;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px!important;
  background:#fff!important;
  color:transparent!important;
  box-shadow:0 18px 52px rgba(0,0,0,.30)!important;
  transform:rotate(-3deg)!important;
  animation:wa-float 5.5s ease-in-out infinite;
}

.logo-orbit-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
}

.hero-slogan{
  right:28px;
  z-index:2;
  color:#7e8ba0;
  font-size:16px;
  line-height:1.5;
}

/* Metrics */
.metric-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:13px;
}

.metric-modern{
  min-width:0;
  min-height:104px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 42px;
  align-items:center;
  gap:11px;
  padding:15px;
  border-radius:14px!important;
}

.metric-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:20px;
  box-shadow:none!important;
}

.metric-icon.purple{
  background:rgba(124,58,237,.12)!important;
  color:#9d7cf4;
}

.metric-icon.blue{
  background:rgba(59,130,246,.12)!important;
  color:#72a8fb;
}

.metric-icon.green{
  background:rgba(34,197,94,.12)!important;
  color:#6fdd91;
}

.metric-icon.orange{
  background:rgba(245,158,11,.12)!important;
  color:#f7bc5c;
}

.metric-modern span,
.metric-modern strong,
.metric-modern small{
  display:block;
}

.metric-modern span{
  color:#758095;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.metric-modern strong{
  margin-top:4px;
  color:#fff;
  font-size:23px;
  font-weight:750;
}

.metric-modern small{
  margin-top:4px;
  color:#667085!important;
  font-size:9px;
}

.sparkline{
  color:#47536a!important;
  font-size:31px;
  opacity:.65;
}

/* Grid layouts */
.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(240px,.68fr);
  gap:12px;
  margin-top:12px;
}

.two-column,
.builder-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  align-items:start;
}

.server-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.two-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.three-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}

.four-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}

/* Server rows */
.server-row{
  min-width:0;
  min-height:66px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 8px auto 12px;
  align-items:center;
  gap:9px;
  margin-top:7px;
  padding:9px 10px;
  border-radius:12px!important;
  box-shadow:none;
}

.server-row:first-child{
  margin-top:0;
}

.server-avatar{
  width:40px;
  height:40px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  background:#121828;
  color:#d7deea;
  font-size:13px;
  font-weight:750;
}

.server-avatar.large{
  width:54px;
  height:54px;
  border-radius:14px;
}

.server-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.server-copy{
  min-width:0;
}

.server-copy strong,
.server-copy span{
  display:block;
}

.server-copy strong{
  overflow:hidden;
  color:#eef2f7;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.server-copy span{
  margin-top:4px;
  color:#657085;
  font-size:9px;
}

.online-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--wa-success);
  box-shadow:0 0 0 3px rgba(34,197,94,.08);
}

.online-dot.offline{
  background:#6c7483;
  box-shadow:none;
}

.manage-btn{
  min-height:32px;
  padding:0 11px;
  border:1px solid var(--wa-border);
  border-radius:9px;
  background:rgba(255,255,255,.02);
  color:#9ba7ba;
  font-size:9px;
  font-weight:650;
}

.manage-btn:hover{
  border-color:rgba(59,130,246,.26);
  background:rgba(37,99,235,.07);
  color:#fff;
}

.arrow{
  color:#59657a;
}

/* Status */
.status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.status-box{
  padding:11px;
  border-radius:12px!important;
  text-align:left;
  box-shadow:none;
}

.status-box span,
.status-box small,
.status-box strong{
  display:block;
}

.status-box span{
  color:#729ef6;
  font-size:16px;
}

.status-box small{
  margin:5px 0 2px;
  color:#5e6a7f;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.status-box strong{
  color:#dce3ef;
  font-size:11px;
}

.uptime{
  color:#67d887!important;
  font-size:9px;
  font-weight:700;
}

.usage-fake{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--wa-border);
}

.chart-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#adb6c6;
  font-size:9px;
}

.chart-title span{
  color:#5b6578;
}

.fake-chart{
  height:104px;
  display:flex;
  align-items:flex-end;
  gap:7px;
  margin-top:10px;
  padding:0 2px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.fake-chart i{
  flex:1;
  min-width:5px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(59,130,246,.90),rgba(99,102,241,.16))!important;
}

/* Form system */
.field-modern{
  min-width:0;
}

.field-modern label{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px!important;
  color:#707b90!important;
  font-size:9px!important;
  font-weight:750!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

.modern-input,
.modern-select,
.modern-textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea{
  width:100%;
  min-width:0;
  border:1px solid var(--wa-border)!important;
  border-radius:11px!important;
  outline:0!important;
  background:var(--wa-input)!important;
  color:#f4f7fb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important;
}

.modern-input,
.modern-select,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
select{
  min-height:44px!important;
  padding:0 12px!important;
}

.modern-textarea,
textarea{
  min-height:118px;
  padding:11px 12px!important;
  resize:vertical;
  line-height:1.55;
}

input::placeholder,
textarea::placeholder{
  color:#4f596b!important;
}

.modern-input:focus,
.modern-select:focus,
.modern-textarea:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(99,102,241,.52)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.07)!important;
}

select{
  color-scheme:dark;
}

select option{
  background:#0b1020;
  color:#fff;
}

/* Buttons */
.primary-cta,
.secondary-cta,
.danger-cta,
.panel-buttons button,
.security-command-actions button,
.emergency-actions button,
.smart-actions button,
.test-button-grid button{
  min-height:42px!important;
  padding:0 15px!important;
  border-radius:11px!important;
  font-weight:650!important;
  font-size:11px!important;
}

.primary-cta{
  border:1px solid rgba(99,102,241,.35)!important;
  background:linear-gradient(135deg,var(--wa-blue),var(--wa-violet))!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(37,99,235,.16)!important;
}

.primary-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 13px 34px rgba(37,99,235,.22)!important;
}

.secondary-cta{
  border:1px solid var(--wa-border)!important;
  background:rgba(255,255,255,.026)!important;
  color:#c1c9d6!important;
  box-shadow:none!important;
}

.secondary-cta:hover{
  border-color:rgba(99,102,241,.25)!important;
  background:rgba(99,102,241,.06)!important;
  color:#fff!important;
  transform:translateY(-1px);
}

.danger-cta,
.danger-mini{
  border:1px solid rgba(239,68,68,.23)!important;
  background:rgba(239,68,68,.07)!important;
  color:#f8a7a7!important;
  box-shadow:none!important;
}

.danger-cta:hover,
.danger-mini:hover{
  border-color:rgba(239,68,68,.40)!important;
  background:rgba(239,68,68,.11)!important;
}

/* Toggles */
.switch{
  position:relative;
  width:42px;
  height:23px;
  flex:0 0 auto;
}

.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.switch span{
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:#202636;
  transition:.18s var(--wa-ease);
}

.switch span::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#8f99aa;
  box-shadow:0 2px 6px rgba(0,0,0,.30);
  transition:.18s var(--wa-ease);
}

.switch input:checked+span{
  border-color:rgba(99,102,241,.34);
  background:linear-gradient(90deg,var(--wa-blue),var(--wa-violet));
  box-shadow:0 0 14px rgba(99,102,241,.12);
}

.switch input:checked+span::after{
  left:22px;
  background:#fff;
}

/* Setting rows */
.setting-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-width:0;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.setting-line:last-child{
  border-bottom:0;
}

.setting-line>div{
  min-width:0;
}

.setting-line strong,
.setting-line span{
  display:block;
}

.setting-line strong{
  color:#dfe5ee;
  font-size:11px;
}

.setting-line span{
  margin-top:4px;
  color:#667085;
  font-size:9px;
  line-height:1.5;
}

/* Badges */
.status-chip,
.ai-badge,
.ai-feature-chip,
.event-severity{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px!important;
  border:1px solid rgba(59,130,246,.16)!important;
  border-radius:8px!important;
  background:rgba(59,130,246,.07)!important;
  color:#83adf5!important;
  font-size:8px!important;
  font-weight:750!important;
  letter-spacing:.04em;
}

.status-chip.on{
  border-color:rgba(34,197,94,.18)!important;
  background:rgba(34,197,94,.07)!important;
  color:#70d98f!important;
}

.status-chip.off{
  border-color:rgba(239,68,68,.16)!important;
  background:rgba(239,68,68,.06)!important;
  color:#e98a8a!important;
}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}

.command-table{
  overflow:auto;
}

table th{
  padding:10px 12px;
  border-bottom:1px solid var(--wa-border);
  color:#667085;
  font-size:9px;
  font-weight:750;
  letter-spacing:.08em;
  text-align:left;
  text-transform:uppercase;
}

table td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:#d7dde7;
  font-size:10px;
}

table tbody tr{
  transition:background .18s var(--wa-ease);
}

table tbody tr:hover{
  background:rgba(99,102,241,.035);
}

/* Security & AutoMod */
.security-command-bar,
.emergency-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 15px!important;
}

.security-command-bar strong,
.security-command-bar span,
.emergency-card strong,
.emergency-card span{
  display:block;
}

.security-command-bar strong,
.emergency-card strong{
  color:#e9edf4;
  font-size:11px;
}

.security-command-bar span,
.emergency-card span{
  margin-top:4px;
  color:#697489;
  font-size:9px;
  line-height:1.5;
}

.diagnostic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.diagnostic-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:11px!important;
  box-shadow:none;
}

.diagnostic-item>span{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:8px!important;
}

.diagnostic-item.ok>span{
  background:rgba(34,197,94,.08)!important;
  color:#6ed98f!important;
}

.diagnostic-item.bad>span{
  background:rgba(239,68,68,.07)!important;
  color:#ed8c8c!important;
}

.diagnostic-item strong,
.diagnostic-item small{
  display:block;
}

.diagnostic-item strong{
  color:#dfe5ee;
  font-size:9px;
}

.diagnostic-item small{
  margin-top:2px;
  color:#667085;
  font-size:8px;
}

.test-button-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.threshold-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.threshold-item{
  padding:11px;
  border-radius:11px!important;
  box-shadow:none;
}

/* AI / Server Builder */
.smart-setup-hero{
  position:relative;
  overflow:hidden;
  min-height:178px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:13px;
  padding:23px 25px!important;
  background:
    radial-gradient(360px 220px at 90% 20%,rgba(6,182,212,.06),transparent 65%),
    radial-gradient(440px 260px at 5% 10%,rgba(124,58,237,.10),transparent 68%),
    linear-gradient(180deg,rgba(16,21,37,.96),rgba(12,17,31,.96))!important;
}

.smart-setup-hero h2{
  margin:7px 0 6px;
  color:#fff;
  font-size:26px;
  font-weight:750;
  letter-spacing:-.035em;
}

.smart-setup-hero p{
  max-width:760px;
  margin:0;
  color:#7c879a;
  font-size:11px;
  line-height:1.65;
}

.ai-orb,
.ai-thinking-orb{
  color:#9db6ff!important;
  background:
    radial-gradient(circle at 30% 20%,rgba(59,130,246,.16),transparent 45%),
    rgba(99,102,241,.08)!important;
  border:1px solid rgba(99,102,241,.15);
  box-shadow:0 16px 38px rgba(0,0,0,.18)!important;
  animation:wa-float 5.8s ease-in-out infinite;
}

.ai-example{
  min-height:38px;
  border:1px solid var(--wa-border)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
  color:#7d899d!important;
}

.ai-example:hover{
  border-color:rgba(99,102,241,.22)!important;
  background:rgba(99,102,241,.055)!important;
  color:#dfe6f3!important;
}

.ai-config-warning{
  border-color:rgba(245,158,11,.16)!important;
  background:rgba(245,158,11,.045)!important;
}

.ai-config-warning strong{
  color:#e8b95f!important;
}

.ai-connected-line{
  border-color:rgba(34,197,94,.13)!important;
  background:rgba(34,197,94,.035)!important;
  color:#778397!important;
}

.ai-plan-section{
  overflow:hidden;
  border-radius:12px!important;
  box-shadow:none;
}

.ai-plan-section h4{
  margin:0;
  padding:9px 11px;
  border-bottom:1px solid var(--wa-border);
  background:rgba(255,255,255,.018)!important;
  color:#7897d1!important;
  font-size:8px;
  letter-spacing:.08em;
}

.ai-plan-row{
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.04)!important;
}

/* Music */
.music-hero-card{
  min-height:116px;
  display:grid;
  grid-template-columns:68px minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  margin-bottom:13px;
  padding:17px!important;
  border:1px solid rgba(99,102,241,.15)!important;
  border-radius:16px!important;
  background:
    radial-gradient(360px 180px at 0% 50%,rgba(37,99,235,.11),transparent 72%),
    linear-gradient(180deg,rgba(16,21,37,.96),rgba(12,17,31,.96))!important;
  box-shadow:var(--wa-shadow-soft)!important;
}

.music-cover{
  width:58px!important;
  height:58px!important;
  display:grid;
  place-items:center;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(37,99,235,.94),rgba(99,102,241,.94))!important;
  color:#fff!important;
  font-size:26px!important;
  box-shadow:0 12px 28px rgba(37,99,235,.16)!important;
}

.music-now{
  min-width:0;
}

.music-now span{
  color:#7290c8!important;
  font-size:8px!important;
  letter-spacing:.12em;
}

.music-now h2{
  margin:4px 0 3px!important;
  overflow:hidden;
  color:#fff;
  font-size:18px!important;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.music-now p{
  margin:0;
  color:#667085!important;
  font-size:9px!important;
}

.music-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
}

.music-controls button{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--wa-border)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.022)!important;
  color:#abb5c5!important;
  font-size:12px!important;
}

.music-controls button:hover{
  border-color:rgba(99,102,241,.24)!important;
  background:rgba(99,102,241,.07)!important;
  color:#fff!important;
}

.music-engine-note{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:-4px 0 6px;
}

.music-engine-note span{
  padding:4px 7px!important;
  border:1px solid var(--wa-border)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.018)!important;
  color:#667085!important;
  font-size:8px!important;
}

.music-queue,
.rule-list,
.leaderboard-list,
.security-event-list,
.backup-list{
  display:grid;
  gap:7px;
}

.queue-row,
.rule-card,
.leader-row,
.backup-row,
.security-event{
  border-radius:11px!important;
  box-shadow:none;
}

.queue-row:hover,
.rule-card:hover,
.leader-row:hover,
.backup-row:hover,
.security-event:hover{
  border-color:rgba(99,102,241,.18)!important;
  background:rgba(21,27,48,.92)!important;
}

.music-error-box{
  border:1px solid rgba(239,68,68,.16)!important;
  border-radius:10px!important;
  background:rgba(239,68,68,.045)!important;
  color:#df9595!important;
}

/* Leaderboard / rules */
.leader-row{
  display:grid;
  grid-template-columns:34px 38px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:8px 10px;
}

.leader-row img,
.mini-avatar{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
}

.rule-card{
  padding:10px 11px!important;
}

.rule-card button{
  min-height:32px;
  border:1px solid rgba(239,68,68,.15)!important;
  border-radius:9px!important;
  background:rgba(239,68,68,.045)!important;
  color:#d98d8d!important;
}

/* Ticket analytics */
.ticket-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:13px;
}

.ticket-stats-grid>div{
  padding:12px 13px!important;
  border-radius:12px!important;
  box-shadow:none;
}

.ticket-stats-grid strong{
  color:#fff;
  font-size:20px!important;
  font-weight:750;
}

.ticket-stats-grid span{
  margin-top:3px;
  color:#667085!important;
  font-size:8px!important;
}

/* Roles */
.role-grid-modern{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.role-pill{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--wa-border)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
  color:#909bad!important;
}

.role-pill.selected{
  border-color:rgba(99,102,241,.22)!important;
  background:rgba(99,102,241,.055)!important;
  color:#dce3ed!important;
}

/* Embed preview */
.discord-embed-preview{
  min-height:250px;
  padding:16px 17px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-left:3px solid var(--wa-blue)!important;
  border-radius:5px 12px 12px 5px!important;
  background:#17181c!important;
  color:#dbdee1!important;
  box-shadow:0 16px 40px rgba(0,0,0,.20)!important;
}

/* Empty states */
.empty-message,
.modern-empty,
.ai-thinking-empty,
.smart-empty{
  color:#667085!important;
}

.modern-empty{
  min-height:154px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:20px;
  text-align:center;
}

.modern-empty>b{
  width:38px!important;
  height:38px!important;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  border:1px solid rgba(99,102,241,.11);
  border-radius:11px!important;
  background:rgba(99,102,241,.055)!important;
  color:#809ee2!important;
  font-size:15px!important;
}

.modern-empty strong{
  color:#bec6d3!important;
  font-size:10px!important;
}

.modern-empty span{
  color:#606b7e!important;
  font-size:8px!important;
}

/* Toasts */
.toast{
  position:fixed!important;
  top:88px!important;
  right:20px!important;
  bottom:auto!important;
  z-index:100!important;
  width:min(360px,calc(100vw - 40px));
  padding:12px 13px 12px 15px!important;
  border:1px solid rgba(59,130,246,.18)!important;
  border-left:3px solid var(--wa-blue)!important;
  border-radius:12px!important;
  background:rgba(14,19,34,.94)!important;
  color:#dce4ef!important;
  box-shadow:0 18px 54px rgba(0,0,0,.38)!important;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  animation:wa-toast-in .22s var(--wa-ease) both;
}

.toast.error,
.toast.danger{
  border-color:rgba(239,68,68,.20)!important;
  border-left-color:var(--wa-danger)!important;
}

/* Utility text */
.muted-copy,
.muted-mini{
  color:#667085!important;
}

.info-box{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px!important;
  border-radius:11px!important;
  box-shadow:none;
}

.info-box strong{
  color:#cfd6e1;
  font-size:9px;
}

.info-box span{
  color:#667085!important;
  font-size:8px!important;
  line-height:1.55;
}

/* Landing / auth entry */
.landing-premium{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:0 24px 54px;
  background:
    radial-gradient(760px 520px at 8% 8%,rgba(124,58,237,.15),transparent 65%),
    radial-gradient(850px 620px at 98% 28%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(520px 420px at 58% 100%,rgba(6,182,212,.055),transparent 64%),
    linear-gradient(180deg,#050712,#070916 58%,#050712);
}

.landing-premium::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 76%);
}

.landing-nav{
  position:sticky;
  top:0;
  z-index:5;
  max-width:1240px;
  min-height:76px;
  display:flex;
  align-items:center;
  margin:0 auto;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:rgba(5,7,18,.42);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.landing-brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.landing-logo-shell{
  width:44px;
  height:44px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#fff;
}

.landing-logo-shell img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
}

.landing-brand-copy strong,
.landing-brand-copy span{
  display:block;
}

.landing-brand-copy strong{
  color:#fff;
  font-size:14px;
  font-weight:750;
}

.landing-brand-copy span{
  margin-top:3px;
  color:#667085;
  font-size:8px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.landing-hero{
  position:relative;
  z-index:1;
  max-width:1120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
  padding:74px 0 0;
  text-align:center;
}

.landing-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(99,102,241,.16);
  border-radius:8px;
  background:rgba(99,102,241,.045);
  color:#8c9ed1;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}

.landing-brand-mark{
  width:82px;
  height:82px;
  margin:23px 0 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.26);
  animation:wa-float 5.6s ease-in-out infinite;
}

.landing-brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
}

.landing-hero h1{
  max-width:860px;
  margin:0;
  color:#fff;
  font-size:56px;
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.055em;
}

.landing-hero>p{
  max-width:700px;
  margin:18px 0 0;
  color:#8590a4;
  font-size:15px;
  line-height:1.75;
}

.landing-hero .hero-actions{
  display:flex;
  gap:10px;
  margin-top:24px;
}

.landing-hero a{
  text-decoration:none;
}

.landing-product-frame{
  width:min(980px,100%);
  margin-top:54px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:#090d19;
  box-shadow:
    0 28px 90px rgba(0,0,0,.42),
    0 0 90px rgba(59,130,246,.055);
}

.landing-frame-top{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:#0b0f1b;
}

.landing-frame-top>span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#343b49;
}

.landing-frame-top>div{
  margin-left:7px;
  color:#535f72;
  font-size:8px;
}

.landing-frame-body{
  min-height:390px;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
}

.landing-frame-body aside{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 13px;
  border-right:1px solid rgba(255,255,255,.05);
  background:#070a13;
}

.skeleton-brand{
  width:108px;
  height:28px;
  margin-bottom:12px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(37,99,235,.18),rgba(124,58,237,.10));
}

.landing-frame-body aside i{
  width:100%;
  height:28px;
  border-radius:8px;
  background:rgba(255,255,255,.025);
}

.landing-frame-body aside i:first-of-type{
  background:rgba(37,99,235,.12);
}

.landing-frame-body section{
  padding:26px;
  background:
    radial-gradient(500px 260px at 100% 0%,rgba(37,99,235,.06),transparent 70%),
    #090d19;
}

.skeleton-title{
  width:38%;
  height:28px;
  border-radius:8px;
  background:rgba(255,255,255,.085);
}

.skeleton-subtitle{
  width:58%;
  height:10px;
  margin-top:10px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
}

.skeleton-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}

.skeleton-grid b,
.skeleton-panels b{
  display:block;
  border:1px solid rgba(255,255,255,.045);
  background:#101525;
}

.skeleton-grid b{
  height:86px;
  border-radius:12px;
}

.skeleton-panels{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  margin-top:10px;
}

.skeleton-panels b{
  height:180px;
  border-radius:14px;
}

/* generic modal/tooltip styles for existing or future frontend elements */
.modal,
.modal-card,
.dialog-panel{
  border:1px solid var(--wa-border)!important;
  border-radius:20px!important;
  background:rgba(16,21,37,.96)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48)!important;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  animation:wa-modal-in .22s var(--wa-ease) both;
}

.tooltip,
[data-tooltip]::after{
  border:1px solid var(--wa-border);
  border-radius:8px;
  background:#101525;
  color:#c4ccd8;
}

/* animation */
@keyframes wa-spin{
  to{transform:rotate(360deg)}
}

@keyframes wa-page-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes wa-toast-in{
  from{opacity:0;transform:translateY(-8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes wa-modal-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes wa-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Responsive */
@media(max-width:1220px){
  .control-shell{
    grid-template-columns:258px minmax(0,1fr);
  }

  .dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .invite-card{
    grid-column:1/-1;
  }

  .metric-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-banner{
    grid-template-columns:minmax(0,1fr);
  }

  .hero-art{
    min-height:150px;
  }

  .hero-slogan{
    display:none;
  }

  .four-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .diagnostic-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .test-button-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:940px){
  .control-shell{
    display:block;
  }

  .main-sidebar{
    position:sticky;
    top:0;
    z-index:40;
    width:100%;
    height:auto;
    max-height:none;
    overflow:visible;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--wa-border);
  }

  .brand-lockup{
    padding:2px 4px 8px;
  }

  .brand-logo-shell{
    width:38px;
    height:38px;
    border-radius:10px;
  }

  .brand-caption,
  .premium-card,
  .logout-link{
    display:none;
  }

  .nav-stack{
    display:flex;
    flex-direction:row;
    gap:5px;
    padding:0 0 4px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }

  .nav-stack::before{
    display:none;
  }

  .nav-link{
    flex:0 0 auto;
    min-height:38px;
    grid-template-columns:22px auto;
    padding:0 10px;
    border-radius:10px;
  }

  .nav-link i{
    display:none;
  }

  .nav-link::before{
    left:50%;
    top:auto;
    bottom:0;
    width:0;
    height:2px!important;
    transform:translateX(-50%);
    transition:width .18s var(--wa-ease);
  }

  .nav-link.active::before{
    width:22px;
  }

  .topbar-modern{
    top:101px;
    padding:10px 14px;
  }

  .searchbox{
    width:100%;
  }

  .content-modern{
    padding:20px 14px 40px;
  }

  .two-column,
  .builder-grid,
  .server-cards{
    grid-template-columns:minmax(0,1fr);
  }

  .page-headline{
    flex-direction:column;
  }

  .page-headline>.modern-select{
    width:100%;
  }

  .status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .landing-frame-body{
    grid-template-columns:130px minmax(0,1fr);
  }
}

@media(max-width:700px){
  .top-actions .icon-button{
    display:none;
  }

  .profile-chip{
    min-width:0;
  }

  .profile-chip strong,
  .profile-chip span,
  .profile-chip b{
    display:none;
  }

  .searchbox kbd{
    display:none;
  }

  .page-headline h1{
    font-size:27px;
  }

  .hero-overlay{
    padding:24px;
  }

  .hero-brand h2{
    font-size:36px;
  }

  .hero-art{
    display:none;
  }

  .metric-row,
  .ticket-stats-grid,
  .two-fields,
  .three-fields,
  .four-fields,
  .diagnostic-grid,
  .threshold-grid,
  .role-grid-modern{
    grid-template-columns:minmax(0,1fr);
  }

  .dashboard-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .test-button-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .security-command-bar,
  .emergency-card,
  .music-hero-card{
    grid-template-columns:minmax(0,1fr);
    align-items:flex-start;
  }

  .music-controls{
    justify-content:flex-start;
  }

  .setting-line{
    align-items:flex-start;
  }

  .landing-premium{
    padding:0 16px 36px;
  }

  .landing-nav{
    min-height:68px;
  }

  .landing-hero{
    padding-top:48px;
  }

  .landing-hero h1{
    font-size:40px;
  }

  .landing-hero>p{
    font-size:13px;
  }

  .landing-hero .hero-actions{
    width:100%;
    flex-direction:column;
  }

  .landing-hero .hero-actions a{
    width:100%;
  }

  .landing-product-frame{
    margin-top:38px;
  }

  .landing-frame-body{
    min-height:300px;
    grid-template-columns:1fr;
  }

  .landing-frame-body aside{
    display:none;
  }

  .skeleton-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .skeleton-panels{
    grid-template-columns:1fr;
  }
}

@media(max-width:460px){
  .topbar-modern{
    top:96px;
  }

  .content-modern{
    padding-inline:10px;
  }

  .page-headline h1{
    font-size:24px;
  }

  .hero-banner{
    border-radius:14px!important;
  }

  .hero-overlay{
    padding:20px;
  }

  .hero-logo{
    width:58px!important;
    height:58px!important;
  }

  .hero-brand h2{
    font-size:31px;
  }

  .metric-modern{
    grid-template-columns:46px minmax(0,1fr);
  }

  .sparkline{
    display:none;
  }

  .server-row{
    grid-template-columns:40px minmax(0,1fr) 8px auto;
  }

  .server-row .arrow{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}