/* Mica A — source-native implementation of the approved control center. */
.app-shell {min-width:0;z-index:auto}.main-content {min-width:0;padding-bottom:110px;max-width:1280px}.sidebar {position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;align-self:flex-start}.topbar-left {display:flex;align-items:center;gap:20px;min-width:0}.server-picker-btn {min-width:0}.server-picker-btn select {max-width:210px;min-width:0}.overview-breadcrumb {display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:12px;margin-bottom:18px}.overview-breadcrumb i {font-size:9px}.overview-breadcrumb button,.text-action {border:0;background:none;color:var(--accent-cyan,#38BDF8);font:inherit;cursor:pointer}.overview-breadcrumb button {color:var(--text-muted)}.guild-context {display:flex;align-items:center;gap:24px;padding:20px 24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);margin-bottom:12px}.guild-context>div {flex-shrink:0}.context-label {display:block;font-size:10px;letter-spacing:.7px;font-weight:700;color:var(--text-muted);margin-bottom:6px}.guild-context strong {font-size:13px}.guild-context p {font-size:12px;color:var(--text-secondary);line-height:1.6;margin-left:auto;max-width:300px}.guild-context code {padding:4px 8px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:6px;color:#38BDF8}.text-success {color:var(--success)}.overview-status {color:var(--text-muted);font-size:11px;margin:12px 0 22px}.overview-status.error {color:#FCA5A5}.overview-metrics {grid-template-columns:repeat(4,minmax(0,1fr))}.metric-note {display:block;color:var(--text-muted);font-size:10px;line-height:1.5;margin-top:6px}.overview-columns {display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}.overview-columns .card {margin-bottom:24px}.overview-side {min-width:0}.setup-progress {min-width:90px;text-align:right}.setup-progress strong {font-size:14px;color:var(--brand)}.setup-progress progress {display:block;margin-top:8px;width:90px;height:5px;accent-color:var(--brand);border:0;border-radius:8px;background:var(--bg-subtle)}.setup-progress progress::-webkit-progress-bar {background:var(--bg-subtle);border-radius:8px}.setup-progress progress::-webkit-progress-value {background:var(--brand);border-radius:8px}.setup-checklist {display:grid;gap:10px}.setup-row {display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:12px}.setup-icon {width:32px;height:32px;display:grid;place-items:center;border-radius:8px;flex-shrink:0;background:var(--danger-subtle);color:var(--danger)}.setup-row.ready .setup-icon {background:var(--success-subtle);color:var(--success)}.setup-row span {font-size:12px;line-height:1.5}.setup-row .text-action {margin-left:auto;font-size:12px;font-weight:700}.setup-row small {margin-left:auto;color:var(--text-muted);font-size:9px;font-weight:700;text-transform:uppercase}.activity-list {display:grid;gap:20px}.activity-entry {padding-left:18px;position:relative;overflow-wrap:anywhere}.activity-entry:before {content:'';position:absolute;top:6px;left:0;width:6px;height:6px;background:var(--brand);border-radius:50%}.activity-entry p {font-size:12px;line-height:1.6}.activity-entry time {font-size:10px;color:var(--text-muted);display:block;margin-top:5px}.unavailable-card p {color:var(--text-muted);font-size:12px;line-height:1.7}.feature-state {display:inline-flex;font-size:10px;text-transform:uppercase;color:var(--warning);background:var(--warning-subtle);border-radius:6px;padding:4px 7px;white-space:nowrap}.unavailable-chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.unavailable-chips span {font-size:11px;color:var(--text-muted);padding:8px;border:1px solid var(--border);border-radius:8px}.quick-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.quick-action {position:relative;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:20px;text-align:left;color:var(--text-primary);cursor:pointer;font:inherit;transition:var(--transition)}.quick-action>i:first-child {color:#38BDF8;font-size:16px;display:block;margin-bottom:16px}.quick-action>i:last-child {position:absolute;right:18px;top:22px;color:var(--text-muted);font-size:11px}.quick-action strong {display:block;font-size:12px;margin-bottom:7px}.quick-action span {font-size:11px;line-height:1.5;color:var(--text-muted)}.quick-action:hover {border-color:var(--brand-border);background:var(--bg-card-hover)}.catalog-summary {display:flex;gap:24px;border-top:1px solid var(--border);padding-top:18px;align-items:center}.catalog-summary strong {font-size:14px}.category-summary {display:flex;flex-wrap:wrap;gap:7px}.category-summary button,.command-filters button {font:inherit;cursor:pointer;border:1px solid var(--border);border-radius:6px;padding:6px 9px;background:rgba(255,255,255,.03);color:var(--text-secondary);font-size:11px}.command-filters button.active {color:#fff;background:var(--brand);border-color:var(--brand)}.command-search {display:flex;align-items:center;gap:12px;margin-bottom:18px}.command-search>i {color:var(--text-muted)}.command-search input {flex:1;min-width:0}.command-search>span {font-size:11px;color:var(--text-muted);white-space:nowrap}.command-filters {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.command-results {display:grid;gap:10px}.command-row {display:flex;align-items:center;gap:20px;border:1px solid var(--border);border-radius:10px;padding:16px}.command-row>div {flex:1;min-width:0}.command-row code {font:12px 'JetBrains Mono',monospace;color:#A5B4FC;overflow-wrap:anywhere}.command-row p {font-size:12px;color:var(--text-secondary);margin-top:8px;line-height:1.5}.empty-state {color:var(--text-muted);font-size:12px;line-height:1.7;padding:16px 0}.save-bar {position:fixed;z-index:80;bottom:24px;left:calc(50% + 130px);transform:translateX(-50%);display:flex;gap:24px;align-items:center;padding:14px 20px;background:var(--bg-sidebar);border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 12px 35px rgba(0,0,0,.45);max-width:calc(100% - 320px)}.save-bar[hidden] {display:none}.save-bar>span {font-size:12px;line-height:1.5}.save-bar>span i {color:var(--warning);font-size:7px;margin-right:7px}.save-bar>div {display:flex;align-items:center;gap:10px;flex-shrink:0}.btn:disabled {opacity:.5;cursor:not-allowed}.feature-unavailable {opacity:.6}.feature-unavailable input {cursor:not-allowed}.toast-item {min-width:0;max-width:min(380px,90vw);overflow-wrap:anywhere}.toast-item.info {border-left-color:var(--brand)}.mobile-menu-toggle {display:none}.sidebar-overlay {display:none}.field-error {border-color:var(--danger)!important}:focus-visible {outline:2px solid #38BDF8;outline-offset:3px}button,input,select,textarea {font-family:inherit}a.nav-link {user-select:none}.prefix-example {color:#A5B4FC}.terminal-preview-note {font-size:12px;line-height:1.7;color:var(--text-secondary);padding:14px;border:1px solid var(--border);border-radius:10px;margin-bottom:16px}.term-msg.embed {white-space:pre-wrap}.logs-toolbar {display:flex;gap:12px;margin-bottom:18px;align-items:center}.logs-toolbar input {flex:1}.logs-toolbar span {font-size:11px;color:var(--text-muted);white-space:nowrap}
@media(max-width:1200px){.guild-context{flex-wrap:wrap;gap:18px}.guild-context p {margin-left:0;max-width:none;width:100%}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-columns{gap:16px}.metric-card{padding:16px}.overview-metrics{gap:12px}}
@media(max-width:992px){.app-shell{flex-direction:row}.sidebar{position:fixed;top:64px;bottom:0;left:0;width:260px;height:calc(100dvh - 64px);z-index:100;transform:translateX(-100%);transition:transform .2s;visibility:hidden}.sidebar-open .sidebar{transform:translateX(0);visibility:visible}.sidebar-overlay{position:fixed;inset:64px 0 0;z-index:90;background:rgba(0,0,0,.65);border:0}.sidebar-open .sidebar-overlay{display:block}.authenticated .mobile-menu-toggle{display:inline-flex;width:34px;height:34px;padding:0;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:white;cursor:pointer;flex-shrink:0}.topbar{height:64px;flex-wrap:nowrap;padding:0 14px}.topbar-left{gap:10px!important}.topbar-right{gap:8px}.brand-badge{display:none}.save-bar{left:50%;max-width:calc(100% - 32px)}.overview-columns{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.main-content{max-width:none;padding:24px 20px 110px}}
@media(max-width:767px){.topbar-left{flex:1}.topbar-right #btn-invite-bot,.user-name-small,.user-logout-btn,.topbar-right #bot-status-badge{display:none}.brand-title{font-size:15px}.brand-logo-img{width:30px;height:30px}.server-picker-btn{padding:6px 9px;flex:1;max-width:160px}.server-picker-btn select{width:100%;max-width:125px;font-size:11px}.server-picker-btn>i{display:none}.topbar-right{flex-shrink:0}.user-badge{padding:4px 7px}.main-content{padding:20px 14px 120px;overflow:visible;width:100%;max-width:none}.page-header{align-items:flex-start}.page-header .btn{width:auto}.page-title{font-size:23px;line-height:1.3}.page-subtitle{font-size:12px}.overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-value{font-size:24px}.metric-label{font-size:11px}.overview-columns{grid-template-columns:1fr}.card{padding:18px}.guild-context{padding:18px;gap:18px}.guild-context>div:nth-child(2){flex-shrink:1}.guild-context strong{font-size:12px}.setup-row{padding:10px}.setup-row span{font-size:11px}.quick-actions{gap:10px}.quick-action{padding:17px}.quick-action strong{font-size:11px}.quick-action span{font-size:10px}.catalog-summary{flex-direction:column;align-items:flex-start;gap:14px}.save-bar{bottom:12px;gap:12px;padding:12px;width:calc(100% - 24px);max-width:none;justify-content:space-between}.save-bar>span{font-size:11px}.save-bar .btn{padding:8px 10px;font-size:11px}.command-search{flex-wrap:wrap}.command-search>span{width:100%;text-align:right}.command-row{padding:12px;gap:10px}.command-row code{font-size:11px}.command-row .btn{font-size:10px;padding:7px}.logs-toolbar{flex-wrap:wrap}.logs-toolbar span{width:100%}.features-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.toast-shelf{left:12px;right:12px;bottom:88px}.brand-title .brand-badge{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.unavailable-notice{padding:14px 18px;border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);font-size:12px;line-height:1.7;margin-bottom:24px}.guild-context strong{overflow-wrap:anywhere}.guild-context>.context-identity{min-width:0;flex-shrink:1}

.mobile-account-link{display:none}@media(max-width:992px){.mobile-account-link{display:flex;margin-top:auto}}@media(max-width:767px){.topbar-right .user-badge{background:none;border:0;padding:0}}

/* Lightweight CSS depth; no canvas, extra library or ready-made emoji. */
.server-picker-btn {
  position:relative;background:linear-gradient(150deg,#1c2030 0%,#11141f 48%,#0c0e16 100%);
  border:1px solid rgba(165,180,252,.22);border-bottom-color:rgba(99,102,241,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 0 #080a11,0 7px 18px rgba(0,0,0,.25);
  transform:perspective(800px) rotateX(3deg);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.server-picker-btn:focus-within {border-color:#818cf8;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 #080a11,0 0 0 3px rgba(99,102,241,.18),0 8px 24px rgba(99,102,241,.2);transform:perspective(800px) translateY(-1px)}
.server-picker-btn select {color:var(--text-primary);cursor:pointer}.server-picker-btn select option {background:#141722;color:#f8fafc}
.brand-logo-img {filter:drop-shadow(0 3px 8px rgba(99,102,241,.35));transform:perspective(350px) rotateY(-12deg);transition:transform .35s,filter .35s}
.guild-context {position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 98% 10%,rgba(99,102,241,.13),transparent 45%),linear-gradient(130deg,#171b27,#11141d 60%,#121526);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18)}
.guild-context>div:not(.context-art),.guild-context>p {position:relative;z-index:1}
.context-art {position:absolute;right:8px;top:3px;width:130px;height:130px;perspective:700px;pointer-events:none;opacity:.22;z-index:0}
.mica-crystal {position:absolute;left:36px;top:5px;width:58px;height:112px;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(25deg) rotateZ(-12deg);animation:mica-crystal-turn 18s ease-in-out infinite alternate}
.mica-crystal span {position:absolute;left:0;top:0;width:58px;height:60px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(145deg,rgba(165,180,252,.95),rgba(99,102,241,.42) 55%,rgba(56,189,248,.7));transform-origin:50% 100%;transform:rotateY(calc(var(--face)*60deg)) translateZ(30px) rotateX(28deg);backface-visibility:visible}
.mica-crystal span:nth-child(even) {background:linear-gradient(45deg,rgba(56,189,248,.75),rgba(129,140,248,.18))}
.mica-crystal span.lower {top:60px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateY(calc(var(--face)*60deg)) translateZ(30px) rotateX(-28deg);background:linear-gradient(170deg,rgba(129,140,248,.7),rgba(79,70,229,.22))}
.overview-metrics .metric-card,.overview-columns .card,.quick-action,.server-card {
  border-color:rgba(148,163,184,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 0 rgba(5,7,14,.6),0 12px 28px rgba(0,0,0,.16);
}
.overview-metrics .metric-card {position:relative;overflow:hidden;background:linear-gradient(145deg,#181c29,#11141d 65%)}
.overview-metrics .metric-card:after {content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(129,140,248,.45),transparent);pointer-events:none}
.quick-action,.server-card {background:linear-gradient(140deg,#191d2a,#11141c 65%);transition:transform .25s,border-color .25s,box-shadow .25s}
.server-icon-wrap {box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 0 rgba(5,7,14,.65),0 8px 18px rgba(0,0,0,.3)}
.command-filters button.active {box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 #373093,0 7px 15px rgba(99,102,241,.18)}
.btn-primary {box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 rgba(49,46,129,.7),0 6px 14px rgba(99,102,241,.15)}
@keyframes mica-crystal-turn {from{transform:rotateX(-12deg) rotateY(25deg) rotateZ(-12deg)}to{transform:rotateX(8deg) rotateY(85deg) rotateZ(-5deg)}}
@media(hover:hover) and (pointer:fine) {
  .server-picker-btn:hover {border-color:rgba(129,140,248,.5);transform:perspective(800px) rotateX(0deg) translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 0 #080a11,0 12px 24px rgba(99,102,241,.14)}
  .brand:hover .brand-logo-img {transform:perspective(350px) rotateY(14deg) translateY(-2px);filter:drop-shadow(0 5px 12px rgba(99,102,241,.6))}
  .quick-action:hover,.server-card:hover {transform:perspective(1000px) rotateX(2deg) translateY(-4px);border-color:rgba(129,140,248,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 0 rgba(5,7,14,.6),0 18px 30px rgba(0,0,0,.28)}
  .quick-action:active,.server-card:active {transform:translateY(-1px)}
}
@media(max-width:767px){.context-art{width:90px;height:110px;right:0;top:0;opacity:.15}.mica-crystal{scale:.8;left:16px;animation:none}.server-picker-btn{transform:none}}
@media(prefers-reduced-motion:reduce){.mica-crystal{animation:none}.server-picker-btn,.brand-logo-img,.quick-action:hover,.server-card:hover{transform:none}}

/* Premium UI Enhancements: Transcripts, Level Rewards & Cards */
.transcript-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.transcript-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38BDF8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
  color: #FFFFFF;
}
.level-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #C7D2FE;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}
.card {
  position: relative;
  background: linear-gradient(160deg, #131722, #0d1017 90%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  border-color: rgba(99, 102, 241, 0.28) !important;
}
.table-wrap table tbody tr {
  transition: background 0.15s ease;
}
.table-wrap table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* ============================================================
   NEXT-GEN PUBLIC LANDING PAGE STYLES & ANIMATIONS
   ============================================================ */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #38BDF8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.pulse-glow {
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.45);
  transition: all 0.25s ease;
}
.pulse-glow:hover {
  box-shadow: 0 0 35px rgba(88, 101, 242, 0.7);
  transform: translateY(-2px);
}

.public-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto 56px;
  text-align: left;
}
@media (max-width: 900px) {
  .public-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .public-stats-bar { grid-template-columns: 1fr; }
}

.pub-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(145deg, rgba(20, 24, 38, 0.8), rgba(12, 15, 24, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}
.pub-stat-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pub-stat-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  color: #818CF8;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.pub-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #FFF;
  line-height: 1.2;
}
.pub-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* SECTION HEADERS */
.landing-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}
.landing-section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #818CF8;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.landing-section-title {
  font-size: 32px;
  font-weight: 800;
  color: #FFF;
  letter-spacing: -0.8px;
  margin-bottom: 10px;
}
.landing-section-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* FEATURE SHOWCASE GRID (6 CARDS) */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto 64px;
  text-align: left;
}
@media (max-width: 992px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .showcase-grid { grid-template-columns: 1fr; }
}

.showcase-card {
  position: relative;
  background: linear-gradient(155deg, rgba(20, 24, 38, 0.85), rgba(13, 16, 26, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  overflow: hidden;
}
.showcase-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 189, 248, 0.12);
}
.showcase-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.showcase-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.showcase-icon.cyan { background: rgba(56, 189, 248, 0.12); color: #38BDF8; border: 1px solid rgba(56, 189, 248, 0.25); }
.showcase-icon.indigo { background: rgba(99, 102, 241, 0.12); color: #818CF8; border: 1px solid rgba(99, 102, 241, 0.25); }
.showcase-icon.emerald { background: rgba(16, 185, 129, 0.12); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.25); }
.showcase-icon.amber { background: rgba(245, 158, 11, 0.12); color: #FBBF24; border: 1px solid rgba(245, 158, 11, 0.25); }
.showcase-icon.purple { background: rgba(168, 85, 247, 0.12); color: #C084FC; border: 1px solid rgba(168, 85, 247, 0.25); }
.showcase-icon.rose { background: rgba(244, 63, 94, 0.12); color: #FB7185; border: 1px solid rgba(244, 63, 94, 0.25); }

.showcase-title {
  font-size: 17px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 8px;
}
.showcase-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}
.showcase-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}
.showcase-bullets li {
  font-size: 12px;
  color: #C7D2FE;
  display: flex;
  align-items: center;
  gap: 8px;
}
.showcase-bullets li i {
  font-size: 10px;
  color: #38BDF8;
}

/* PUBLIC INTERACTIVE COMMAND EXPLORER */
.public-commands-box {
  background: linear-gradient(160deg, #121624, #0b0e17 95%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 28px;
  max-width: 1040px;
  margin: 0 auto 64px;
  text-align: left;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}
.pub-cmd-topbar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pub-cmd-search {
  position: relative;
  flex: 1;
  min-width: 260px;
}
.pub-cmd-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.pub-cmd-search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border-radius: 10px;
  background: #0B0E17;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFF;
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}
.pub-cmd-search input:focus {
  border-color: #818CF8;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
}
.pub-cmd-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.pub-cat-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pub-cat-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #FFF;
  border-color: rgba(255, 255, 255, 0.16);
}
.pub-cat-btn.active {
  background: #5865F2;
  color: #FFF;
  border-color: #5865F2;
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.35);
}

.pub-cmd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}
@media (max-width: 768px) {
  .pub-cmd-grid { grid-template-columns: 1fr; }
}

.pub-cmd-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.18s ease;
}
.pub-cmd-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(99, 102, 241, 0.25);
  transform: translateX(2px);
}
.pub-cmd-info {
  flex: 1;
  min-width: 0;
}
.pub-cmd-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #A5B4FC;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 4px;
}
.pub-cmd-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pub-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pub-copy-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38BDF8;
  color: #38BDF8;
}
.pub-copy-btn.copied {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10B981;
  color: #10B981;
}

/* QUICKSTART 3-STEP GRID */
.quickstart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto 64px;
  text-align: left;
}
@media (max-width: 768px) {
  .quickstart-grid { grid-template-columns: 1fr; }
}
.quickstart-step {
  position: relative;
  background: linear-gradient(145deg, rgba(22, 26, 40, 0.7), rgba(14, 17, 27, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  transition: all 0.25s ease;
}
.quickstart-step:hover {
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}
.step-number {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(56, 189, 248, 0.2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.step-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 8px;
}
.step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* FAQ ACCORDION */
.faq-box {
  max-width: 860px;
  margin: 0 auto 64px;
  text-align: left;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.faq-item.active {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.04);
}
.faq-header {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.faq-question {
  font-size: 14px;
  font-weight: 700;
  color: #FFF;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq-question i {
  color: #38BDF8;
  font-size: 13px;
}
.faq-chevron {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.25s ease;
}
.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #818CF8;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 22px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}
.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 0 22px 18px 22px;
}

/* PUBLIC FOOTER */
.landing-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 40px 20px 20px;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted);
}
.landing-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #FFF;
}
.landing-footer-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.landing-footer-links {
  display: flex;
  gap: 18px;
}
.landing-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.landing-footer-links a:hover {
  color: #38BDF8;
}



/* Complete module directory; Studio supplements the existing management pages. */
.module-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.module-directory-group{margin:0!important;padding:22px!important;min-width:0}.module-directory-group[hidden]{display:none!important}.module-directory-group h2{font-size:13px;color:#c7d2fe;margin:0 0 16px}.module-directory-group>a{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--text-secondary);text-decoration:none;font-size:12px;line-height:1.5;border-bottom:1px solid var(--border)}.module-directory-group>a:last-child{border-bottom:0}.module-directory-group>a>i:first-child{width:17px;text-align:center;color:#818cf8}.module-directory-group>a>i:last-child{margin-left:auto;font-size:9px;color:var(--text-muted)}.module-directory-group>a:hover{color:#fff}.panel-studio-callout{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;border:1px solid var(--brand-border);border-radius:12px;background:var(--brand-subtle);margin-bottom:23px}.panel-studio-callout strong{display:block;font-size:13px;color:#c7d2fe}.panel-studio-callout span{display:block;color:var(--text-secondary);font-size:11px;line-height:1.7;margin-top:5px}.panel-studio-callout .btn{flex-shrink:0}.studio-entry-link{color:#c7d2fe!important}.nav-group-label{margin-top:6px}
@media(max-width:1200px){.module-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.module-directory{grid-template-columns:1fr;gap:12px}.module-directory-group{padding:19px!important}.panel-studio-callout{align-items:flex-start;flex-direction:column;padding:16px}.panel-studio-callout .btn{font-size:11px}.module-directory-group>a{font-size:12px;padding:12px 0}}
.groq-key-input{-webkit-text-security:disc}.groq-key-input[data-revealed="true"]{-webkit-text-security:none}.searchable-picker{margin-bottom:7px!important;font-size:12px!important}.picker-option-count{font-size:10px;color:var(--text-muted);margin:5px 0 0}
.picker-controls:has(.searchable-picker){flex-wrap:wrap}.picker-controls>.searchable-picker{flex:1 0 100%;width:100%}.picker-row:has(.searchable-picker){flex-wrap:wrap}.picker-row>.searchable-picker{flex:1 0 100%;width:100%}.picker-row>.channel-picker,.picker-row>.role-picker{flex:1 1 150px}
.panel-tool-frame{display:block;width:100%;min-height:480px;border:0;background:transparent;border-radius:12px}.banner-customize-details{border:1px solid var(--brand-border);border-radius:12px;margin-bottom:24px;background:var(--brand-subtle);overflow:hidden}.banner-customize-details summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;cursor:pointer;list-style:none}.banner-customize-details summary::-webkit-details-marker{display:none}.banner-customize-details summary strong{display:block;font-size:13px;color:#c7d2fe}.banner-customize-details summary small{display:block;margin-top:6px;font-size:11px;color:var(--text-secondary)}.banner-customize-details[open] summary>i{transform:rotate(180deg)}.banner-customize-details .panel-tool-frame{padding:16px;background:var(--bg-app)}.server-banner-preview{display:block;width:100%;height:auto;border-radius:14px}.server-banner-preview[hidden]{display:none}
.backup-structure-actions{display:flex;flex-wrap:wrap;gap:12px}.guild-restore-preview{padding:17px;border:1px solid var(--brand-border);border-radius:10px;background:var(--brand-subtle);margin-top:16px;font-size:12px;line-height:1.8}.guild-restore-preview p+p{margin-top:8px}.guild-restore-preview .restore-warning{color:#fbbf24}.guild-restore-preview[hidden],#guild-restore-apply[hidden]{display:none!important}

/* Readable server lobby cards, including narrow viewports. */
#tab-servers-hub .servers-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:stretch}#tab-servers-hub .server-card{min-width:0;padding:24px;min-height:222px;box-shadow:0 8px 24px rgba(0,0,0,.15)}#tab-servers-hub .server-card-top{gap:16px;margin-bottom:18px;align-items:center}#tab-servers-hub .server-name{font-size:17px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;margin:0 0 7px}#tab-servers-hub .server-status-tag{padding:4px 8px;font-size:10px}#tab-servers-hub .server-card-description{font-size:12px;color:var(--text-secondary);line-height:1.8;margin:0 0 22px;max-width:42ch}#tab-servers-hub .server-card-actions .btn{min-height:40px;font-size:12px}#tab-servers-hub .servers-search{width:min(100%,420px)}#tab-servers-hub .servers-hub-toolbar{margin-bottom:24px}@media(max-width:600px){#tab-servers-hub .server-card{padding:20px;min-height:208px}#tab-servers-hub .server-icon-wrap{width:48px;height:48px}#tab-servers-hub .server-name{font-size:16px}#tab-servers-hub .page-header{gap:16px;align-items:flex-start}}