/* ---------------------------
   THEME (Blue accent)
---------------------------- */
:root{
  --bg0: #070a10;
  --bg1: #0b0f18;
  --bgGlow1: rgba(59,130,246,.14);
  --bgGlow2: rgba(32,201,151,.08);
  --bgGlow3: rgba(255,255,255,.03);
  --panel: rgba(255,255,255,.03);
  --panel2: rgba(0,0,0,.22);
  --border: rgba(255,255,255,.08);
  --text: #e7eaf0;
  --muted: #9aa4b2;
  --muted2:#7f8896;

  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --shadowSoft: 0 10px 22px rgba(0,0,0,.35);
  --radius: 18px;

  /* BLUE ACCENT */
  --accent: #3B82F6;
  --accentSoft: rgba(59,130,246,.16);
  --accentGlow: rgba(59,130,246,.35);

  --good: #20c997;
  --bad: #ff4d4d;
  --warn: #ffc107;
}
:root {
  color-scheme: dark;
}

body[data-theme="light"]{
  --bg0: #6a2a00;
  --bg1: #b64b00;
  --bgGlow1: rgba(255,166,66,.46);
  --bgGlow2: rgba(255,220,140,.28);
  --bgGlow3: rgba(255,255,255,.08);
  --panel: rgba(255,255,255,.05);
  --panel2: rgba(255,255,255,.04);
  --border: rgba(255,200,128,.30);
  --accent: #ffbe5a;
  --accentSoft: rgba(255,190,90,.30);
  --accentGlow: rgba(255,190,90,.50);
}

html, body {
  color-scheme: dark;
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 15% 12%, var(--bgGlow1), transparent 60%),
    radial-gradient(800px 520px at 80% 30%, var(--bgGlow2), transparent 60%),
    radial-gradient(900px 600px at 55% 85%, var(--bgGlow3), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

body[data-density="compact"] .navItem{ padding: 8px 10px; border-radius: 12px; }
body[data-density="compact"] .serverCard,
body[data-density="compact"] .userCard{ padding: 10px; }
body[data-density="compact"] .panelCard,
body[data-density="compact"] .pluginCard,
body[data-density="compact"] .rCard{ padding: 12px; border-radius: 14px; }
body[data-density="compact"] .metricCard{ padding: 10px 12px; }
body[data-density="compact"] .miniRow{ padding: 8px 10px; }
body[data-density="compact"] .textInput,
body[data-density="compact"] .selectInput,
body[data-density="compact"] .ghostBtn{ min-height: 34px; }

body[data-surface-style="solid"] .serverCard,
body[data-surface-style="solid"] .userCard,
body[data-surface-style="solid"] .panelCard,
body[data-surface-style="solid"] .pluginCard,
body[data-surface-style="solid"] .rCard,
body[data-surface-style="solid"] .miniTable,
body[data-surface-style="solid"] .inputShell{
  background: rgba(8, 12, 18, 0.85);
  backdrop-filter: none;
}

/* layout */
.app{
  height:100%;
  display:grid;
  grid-template-columns: 72px 320px 1fr;
}

/* ---------------------------
   LEFT MICRO RAIL
---------------------------- */
.rail{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 14px 10px;
}

.railTop,.railBottom{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.railBtn{
  height:52px;
  width:52px;
  border-radius: 16px;
  border:1px solid transparent;
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: var(--shadowSoft);
  transition: .18s ease;
}

.railBtn:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}

.railBtn.active{
  background: var(--accentSoft);
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 0 0 2px rgba(59,130,246,.18), var(--shadowSoft);
}

.railIcon{
  font-size: 18px;
  opacity: .92;
}

/* ---------------------------
   SIDEBAR
---------------------------- */
.sidebar{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.015);
  padding: 16px 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  overflow:auto;
}

.serverCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
}

.serverAvatar{
  width:46px;height:46px;
  border-radius: 16px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.9), rgba(59,130,246,.15));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.serverMeta{ flex:1; min-width:0; }

.serverNameRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.serverName{
  font-weight: 800;
  font-size: 14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.serverChevron{
  border:none;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  font-size: 14px;
}

.serverSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.navGroup{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.navLabel{
  color: var(--muted2);
  font-size: 11px;
  letter-spacing: .12em;
  margin: 6px 10px 2px;
}

.navItem{
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--text);
  border: 1px solid transparent;
  background: transparent;
  transition: .18s ease;
}

.navItem:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

.navItem.active{
  background: var(--accentSoft);
  border-color: rgba(59,130,246,.22);
}

.navItem.active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accentGlow);
}

.navIcon{
  width: 20px;
  display:inline-grid;
  place-items:center;
  opacity: 1;
  color: var(--text);
  font-size: 14px;
}
.navIcon svg{
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}
.navIcon svg *{
  stroke: currentColor !important;
  fill: none !important;
}

.navText{
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

.pill{
  margin-left:auto;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,193,7,.16);
  border: 1px solid rgba(255,193,7,.22);
}

.navDivider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 6px 8px;
}

.sidebarFooter{
  margin-top:auto;
  padding-top: 12px;
}

.userCard{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-radius: var(--radius);
  border:1px solid rgba(59,130,246,.20);
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(0,0,0,.16));
  box-shadow: var(--shadowSoft);
}

.userAvatar{
  width:38px;height:38px;
  border-radius: 14px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.25));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border:1px solid rgba(255,255,255,.08);
}

.userMeta{ flex:1; min-width:0; }
.userName{ font-weight: 900; font-size: 13px; }
.userSub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.logoutBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  text-decoration: none;
}
.themeToggleBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
}
.themeToggleBtn:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
body[data-theme="light"] .userCard{
  border-color: rgba(255,183,120,.36);
  background: linear-gradient(90deg, rgba(255,151,47,.26), rgba(35,18,9,.45));
}
body[data-theme="light"] .themeToggleBtn{
  border-color: rgba(255,183,120,.36);
  background: rgba(255,151,47,.18);
  color: rgba(255,242,224,.96);
}
body[data-theme="light"] .themeToggleBtn:hover{
  border-color: rgba(255,211,166,.55);
  background: rgba(255,151,47,.30);
}

/* ---------------------------
   CONTENT AREA
---------------------------- */
.content{
  overflow:auto;
  padding: 18px 18px 28px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  padding: 8px 4px 12px;
}

.topbarRight{
  display:flex;
  align-items:center;
  gap: 10px;
}

.topPill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
}

.topPillText{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Legacy right-rail header pills are deprecated. */
.rightRail .topPill{
  display: none !important;
}
.rightRail .topbarRight{
  display: none !important;
}

.flag{ font-size: 14px; }
.chev{ color: var(--muted); }

.circleBtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.circleInner{
  width: 24px; height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(59,130,246,.18));
}

.gear{ opacity:.9; }

/* page */
.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 6px 0;
}

.pageHead{
  text-align:center;
  margin: 26px 0 18px;
}

.pageHead h1{
  margin:0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.pageHead p{
  margin: 8px auto 0;
  max-width: 640px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.section{
  margin-top: 18px;
}

.sectionTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  margin: 18px 0 12px;
  color: var(--text);
}

.sectionIcon{
  width: 22px;
  display:inline-grid;
  place-items:center;
  opacity: .9;
}

/* stats row */
.statsRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.statCard{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
  min-height: 138px;
  position:relative;
}

.statTop{
  padding: 14px 14px 6px;
}
.statTitle{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.statValue{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: .02em;
}

.statDelta{
  padding: 0 14px 10px;
  display:flex;
  align-items:center;
  gap: 8px;
}

.deltaBadge{
  font-size: 11px;
  font-weight: 950;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}
.deltaBadge.good{ border-color: rgba(32,201,151,.30); background: rgba(32,201,151,.14); }
.deltaBadge.bad{ border-color: rgba(255,77,77,.30); background: rgba(255,77,77,.14); }
.deltaBadge.neutral{ border-color: rgba(255,255,255,.14); background: rgba(0,0,0,.12); }

.deltaText{
  font-size: 11px;
  color: rgba(255,255,255,.75);
}

.spark{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: 44px;
  background: rgba(0,0,0,.12);
}

.sparkLine{
  position:absolute;
  left: -10%;
  right: -10%;
  bottom: 10px;
  height: 2px;
  opacity: .9;
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  transform: rotate(-3deg);
}

/* stat color variants (like screenshot cards) */
.statGreen{
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(18, 170, 90, .95), rgba(18, 170, 90, .55));
}
.statRed{
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(190, 40, 40, .95), rgba(190, 40, 40, .55));
}
.statBlue{
  /* BLUE ACCENT here */
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg, rgba(59,130,246,.95), rgba(59,130,246,.55));
}
.statDeepBlue{
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, rgba(35, 75, 170, .95), rgba(35, 75, 170, .55));
}

/* plugin sections */
.subLabel{
  margin: 18px 0 10px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

.pluginGrid{
  display:grid;
  gap: 12px;
}
.pluginGrid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pluginGrid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.emojiCreatorGrid{
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.pluginCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 520px at 90% 90%, rgba(59,130,246,.18), transparent 55%),
    rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
  padding: 16px;
  min-height: 160px;
  position:relative;
  overflow:hidden;
  transition: .18s ease;
}

.pluginCard:hover{
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.22);
  background:
    radial-gradient(900px 520px at 90% 90%, rgba(59,130,246,.26), transparent 55%),
    rgba(0,0,0,.20);
}

.pluginIconWrap{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}

.pluginIcon{
  font-size: 18px;
  color: var(--text);
}
.pluginIcon svg{
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}
.pluginIcon svg *{
  stroke: currentColor !important;
  fill: none !important;
}

.pluginTitle{
  margin-top: 12px;
  font-weight: 950;
  font-size: 14px;
}

.pluginDesc{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.linkBtn{
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(231,234,240,.92);
  cursor:pointer;
  font-weight: 850;
  font-size: 12px;
}

.linkBtn:hover{
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.14);
}

/* premium crown overlay like screenshot */
.pluginCard.crown{
  background:
    radial-gradient(900px 520px at 90% 90%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(650px 420px at 10% 10%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.18);
}

.crownMark{
  position:absolute;
  top: 12px;
  right: 12px;
  opacity: .9;
}

/* footer */
.pageFooter{
  margin: 20px 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-align:center;
}

/* responsive */
@media (max-width: 1200px){
  .app{ grid-template-columns: 72px 300px 1fr; }
  .statsRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pluginGrid.three{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .app{ grid-template-columns: 72px 1fr; }
  .sidebar{ display:none; }
  .page{ padding: 10px 2px 0; }
  .pluginGrid.two, .pluginGrid.three{ grid-template-columns: 1fr; }
  .statsRow{ grid-template-columns: 1fr; }
}
/* ---------------------------
   Custom Scrollbars (dark + blue accent)
   Works in: Chrome/Edge/Opera + Firefox
---------------------------- */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(59,130,246,.35) rgba(255,255,255,.04);
}

/* WebKit (Chrome/Edge/Opera/Safari) */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track{
  background: rgba(255,255,255,.03);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(0,0,0,.25); /* creates padding around thumb */
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover{
  background: rgba(59,130,246,.28);
}

::-webkit-scrollbar-thumb:active{
  background: rgba(59,130,246,.40);
}

::-webkit-scrollbar-corner{
  background: transparent;
}
/* ---------------------------
   Form + Table helpers
---------------------------- */
.formRow{ margin-top: 12px; }
.fLabel{
  display:block;
  font-size: 11px;
  letter-spacing:.08em;
  color: rgba(154,164,178,.9);
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* ---------------------------
   Checkbox + Toggle controls
---------------------------- */
input[type="checkbox"]{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  accent-color: #3B82F6;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
  vertical-align: middle;
}

input[type="checkbox"]:hover{
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.12);
}

input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.28),
    inset 0 0 0 1px rgba(0,0,0,.16);
}

input[type="checkbox"]:checked{
  border-color: rgba(59,130,246,.95);
  background-color: #3B82F6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M3.3 8.4l2.9 2.9 6.5-6.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

input[type="checkbox"]:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Slider-style toggles */
.switch{
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}

.switch > input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.switch .slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.switch .slider::before{
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,244,255,.95);
  box-shadow: 0 2px 7px rgba(0,0,0,.32);
  transition: transform .18s ease;
}

.switch > input[type="checkbox"]:checked + .slider{
  border-color: rgba(59,130,246,.42);
  background:
    radial-gradient(200px 80px at 85% 85%, rgba(59,130,246,.34), transparent 65%),
    rgba(59,130,246,.34);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18) inset;
}

.switch > input[type="checkbox"]:checked + .slider::before{
  transform: translateX(20px);
}

.switch > input[type="checkbox"]:focus-visible + .slider{
  box-shadow: 0 0 0 3px rgba(59,130,246,.28);
}

.switch > input[type="checkbox"]:disabled + .slider{
  opacity: .45;
  cursor: not-allowed;
}

.fakeInput{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(231,234,240,.92);
}

.ghostText{
  color: rgba(154,164,178,.85);
  font-size: 12px;
}

.toggleRow{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
}

.tTitle{ font-weight: 900; font-size: 13px; }
.tSub{ margin-top: 4px; color: rgba(154,164,178,.92); font-size: 12px; }

.filtersGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .filtersGrid{ grid-template-columns: 1fr; }
}

.logTable{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.14);
}

.logHead, .logRow2{
  display:grid;
  grid-template-columns: 110px 90px 120px 1fr;
  gap: 12px;
  padding: 10px 12px;
}
.logHead{
  background: rgba(255,255,255,.03);
  color: rgba(154,164,178,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.06em;
}
.logRow2{
  border-top: 1px solid rgba(255,255,255,.05);
  color: rgba(231,234,240,.92);
  font-size: 13px;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(231,234,240,.85);
}

.lvl{
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  font-weight: 950;
  font-size: 11px;
}
.lvl.info{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.26); }
.lvl.warn{ background: rgba(255,193,7,.14); border-color: rgba(255,193,7,.24); }
.lvl.err{ background: rgba(255,77,77,.14); border-color: rgba(255,77,77,.24); }

@media (max-width: 900px){
  .logHead, .logRow2{
    grid-template-columns: 90px 80px 1fr;
  }
  .logHead div:nth-child(4),
  .logRow2 div:nth-child(4){
    grid-column: 1 / -1;
    padding-top: 6px;
    color: rgba(154,164,178,.95);
  }
}
/* ---------------------------
   Layout Stabilization Pack
   Prevent shrinking/growing between pages
---------------------------- */

html, body {
  height: 100%;
  margin: 0;
}

/* Prevent scrollbar width changes shifting layout */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Lock dashboard shell */
.app {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Lock columns to viewport */
.rail, .sidebar, .content {
  height: 100vh;
}

/* Scroll should only happen inside sidebar/content */
.sidebar {
  overflow: auto;
}

.content {
  overflow: auto;
}
/* ---------------------------
   Statistics page (Statbot-ish)
---------------------------- */

.statsToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  margin-top: 8px;
}
.statsToolbarLeft, .statsToolbarRight{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.toolbarLabel{
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(154,164,178,.92);
  margin-right: 4px;
}
.chipBtn{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(231,234,240,.92);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 850;
  font-size: 12px;
  cursor: pointer;
}
.chipBtn:hover{
  border-color: rgba(59,130,246,.20);
  background: rgba(59,130,246,.10);
}
.chipBtn.active{
  border-color: rgba(59,130,246,.28);
  background:
    radial-gradient(500px 220px at 90% 90%, rgba(59,130,246,.18), transparent 60%),
    rgba(59,130,246,.14);
  box-shadow: 0 0 0 1px rgba(59,130,246,.10) inset;
}
.chipKey{ color: rgba(154,164,178,.95); font-weight: 900; }
.chipAdd{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.22); }

.ghostBtn{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(231,234,240,.90);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}
.ghostBtn:hover{ border-color: rgba(59,130,246,.20); background: rgba(59,130,246,.08); }
.ghostBtn.small{ padding: 6px 10px; border-radius: 999px; }

.statsTopRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.metricCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  padding: 12px;
  box-shadow: var(--shadowSoft);
}
.metricCard.activeMetric{
  border-color: rgba(59,130,246,.22);
  background:
    radial-gradient(700px 340px at 90% 90%, rgba(59,130,246,.18), transparent 55%),
    rgba(0,0,0,.18);
}
.metricLabel{
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(154,164,178,.92);
}
.metricValue{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing:.02em;
}

.chartCard{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
  padding: 12px;
}
.chartHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chartTitle{ font-weight: 1000; font-size: 14px; letter-spacing:.02em; }
.chartSub{ margin-top:4px; font-size: 12px; color: rgba(154,164,178,.92); }
.chartActions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.fakeChartWrap{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: stretch;
}
.fakeChartAxisY{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 6px 0;
  color: rgba(154,164,178,.75);
  font-size: 11px;
}
.fakeChart{
  position:relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  overflow:hidden;
  min-height: 240px;
}
.gridLines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 25%;
  opacity:.55;
  pointer-events:none;
}
.avgLine{
  position:absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 2px;
  background: rgba(59,130,246,.55);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
  transform: skewX(-12deg);
  opacity:.8;
}
.bars{
  position:absolute;
  inset: 10px 10px 12px 10px;
  display:flex;
  gap: 4px;
  align-items:flex-end;
}
.bars span{
  flex: 1 1 auto;
  border-radius: 6px 6px 2px 2px;
  background: rgba(71, 203, 123, .65); /* green-ish like Statbot bars */
  box-shadow: 0 0 14px rgba(71,203,123,.08);
  border: 1px solid rgba(255,255,255,.04);
}
.chartFooter{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  color: rgba(154,164,178,.92);
  font-size: 12px;
}
.statsHeatmap{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  padding: 12px;
}
.heatmapWrap{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.heatmapDays{
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 4px;
  color: rgba(154,164,178,.9);
  font-size: 10px;
}
.heatmapDays div{
  height: 12px;
  line-height: 12px;
}
.heatmapGrid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  grid-template-rows: repeat(7, 14px);
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow-x: auto;
}
.hmCell{
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(148,163,184,.20);
}
.hmCell.lv0{ background: rgba(148,163,184,.20); }
.hmCell.lv1{ background: rgba(59,130,246,.22); }
.hmCell.lv2{ background: rgba(59,130,246,.40); }
.hmCell.lv3{ background: rgba(59,130,246,.62); }
.hmCell.lv4{ background: rgba(59,130,246,.85); }
.heatmapLegend{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: rgba(154,164,178,.9);
  font-size: 11px;
}
.heatmapLegend .hmCell{
  display: inline-block;
}
.miniLegend{ display:flex; align-items:center; gap:8px; }
.legendDot{
  width: 10px; height:10px; border-radius:999px;
  background: rgba(71,203,123,.75);
}
.legendLine{
  width: 22px; height:2px; border-radius:999px;
  background: rgba(59,130,246,.6);
  box-shadow: 0 0 12px rgba(59,130,246,.2);
}

.statsBottomGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.panelCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
  padding: 12px;
}
.panelHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.panelTitle{ font-weight: 1000; font-size: 14px; }
.panelSub{ margin-top:4px; font-size: 12px; color: rgba(154,164,178,.92); }

.miniTable{ margin-top: 10px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.06); }
.miniTableHead, .miniRow{
  display:grid;
  grid-template-columns: 70px 1fr 120px;
  gap: 10px;
  padding: 10px 12px;
}
.miniTableHead{
  background: rgba(255,255,255,.03);
  color: rgba(154,164,178,.92);
  font-weight: 1000;
  font-size: 12px;
  letter-spacing:.06em;
}
.miniRow{
  border-top: 1px solid rgba(255,255,255,.05);
  color: var(--text);
  font-size: 13px;
}
.miniRow.isSelected{
  border-color: rgba(59,130,246,.22);
  background:
    radial-gradient(700px 340px at 90% 90%, rgba(59,130,246,.16), transparent 55%),
    rgba(0,0,0,.18);
}
.right{ text-align:right; }
.rowFlex{ display:flex; align-items:center; gap:10px; min-width:0; }
.pfpDot{
  width: 18px; height: 18px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(8px 8px at 30% 30%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.9), rgba(59,130,246,.18));
}
.hash{ opacity:.7; color: rgba(154,164,178,.95); }

.donutWrap{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items:center;
}
.donut{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    conic-gradient(
      rgba(71,203,123,.85) 0 32%,
      rgba(155,110,255,.85) 32% 52%,
      rgba(95,165,255,.85) 52% 64%,
      rgba(255,140,90,.85) 64% 73%,
      rgba(255,255,255,.10) 73% 100%
    );
  position:relative;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 0 24px rgba(0,0,0,.25);
}
.donut::after{
  content:"";
  position:absolute;
  inset: 28%;
  border-radius: 50%;
  background: rgba(18, 20, 26, .92);
  border: 1px solid rgba(255,255,255,.06);
}
.donut2{
  background:
    conic-gradient(
      rgba(71,203,123,.85) 0 48%,
      rgba(155,110,255,.85) 48% 72%,
      rgba(95,165,255,.85) 72% 80%,
      rgba(255,140,90,.85) 80% 86%,
      rgba(255,255,255,.10) 86% 100%
    );
}

.donutLegend{ display:flex; flex-direction:column; gap: 8px; }
.legendRow{ display:flex; align-items:center; gap:10px; color: rgba(231,234,240,.92); font-size: 12px; }
.lg{ width: 10px; height: 10px; border-radius: 3px; }
.sw1{ background: rgba(71,203,123,.85); }
.sw2{ background: rgba(155,110,255,.85); }
.sw3{ background: rgba(95,165,255,.85); }
.sw4{ background: rgba(255,140,90,.85); }
.sw5{ background: rgba(255,255,255,.12); }

@media (max-width: 1200px){
  .statsTopRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statsBottomGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .fakeChartWrap{ grid-template-columns: 1fr; }
  .fakeChartAxisY{ display:none; }
  .donutWrap{ grid-template-columns: 1fr; }
  .donut{ margin: 0 auto; }
}
/* ---------------------------
   Plugins hub extras
---------------------------- */
.pluginsToolbar{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.searchWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  min-width: 260px;
  flex: 1 1 320px;
}
.searchIcon{
  display: inline-grid;
  place-items: center;
  opacity: 1;
  color: var(--text);
  font-weight: 900;
}
.searchIcon svg{
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}
.searchIcon svg *{
  stroke: currentColor !important;
  fill: none !important;
}
.searchInput{
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  width: 100%;
  font-size: 13px;
}
.searchInput::placeholder{
  color: var(--muted);
}

.pillRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pluginsToolbarRight{
  display:flex;
  gap:8px;
  align-items:center;
}

.pluginHub .hubTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.hubBadges{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.statusChip{
  font-size: 11px;
  font-weight: 1000;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(231,234,240,.92);
}
.statusChip.on{
  border-color: rgba(71,203,123,.22);
  background: rgba(71,203,123,.12);
}
.statusChip.off{
  border-color: rgba(154,164,178,.18);
  background: rgba(154,164,178,.08);
  color: rgba(154,164,178,.95);
}
.statusChip.update{
  border-color: rgba(59,130,246,.24);
  background: rgba(59,130,246,.14);
}

.hubActions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
}
/* ---------------------------
   Module header (plugin pages)
---------------------------- */
.moduleHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(800px 360px at 90% 90%, rgba(59,130,246,.18), transparent 55%),
    rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
}
.moduleLeft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.moduleIconWrap{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}
.moduleIcon{
  font-size: 20px;
}
.moduleTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing:.03em;
}
.moduleSub{
  margin: 6px 0 0 0;
  color: rgba(154,164,178,.92);
  font-size: 12px;
}
.moduleRight{
  display:flex;
  align-items:center;
  gap: 10px;
}
.statusPill{
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.statusPill.on{
  border-color: rgba(71,203,123,.22);
  background: rgba(71,203,123,.12);
}
/* ---------------------------
   Bot Profile (updated, form-first)
---------------------------- */

.profilePanel{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowSoft);
  padding: 14px;
  max-width: 980px;   /* matches the centered panel feel */
}

.profilePanelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.panelTitle{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing:.02em;
}

.panelCrown{
  font-size: 18px;
  opacity: .95;
}

.panelDivider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 12px 0;
}

.profileGrid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  align-items:start;
}

.uploadBlock{ min-width:0; }
.uploadLabel{
  color: rgba(154,164,178,.88);
  font-size: 12px;
  margin-bottom: 8px;
}

.uploadTile{
  height: 150px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.bannerTile{
  height: 150px;
  position:relative;
}
.bannerInner{
  width: 86%;
  height: 70%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(600px 260px at 80% 80%, rgba(59,130,246,.16), transparent 55%),
    rgba(255,255,255,.03);
}

.avatarCircle{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.65), rgba(59,130,246,.12));
  display:flex;
  align-items:center;
  justify-content:center;
}

.avatarMark{
  opacity: .75;
  font-weight: 1000;
  font-size: 18px;
  color: rgba(231,234,240,.92);
}

.formStack{
  margin-top: 14px;
}

.fieldLabelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 8px;
}

.fieldLabel{
  font-size: 12px;
  color: rgba(154,164,178,.88);
}

.fieldHint{
  font-size: 12px;
  color: rgba(154,164,178,.70);
}

.inputShell{
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
}

.textInput{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(231,234,240,.92);
  font-size: 13px;
}

.textInput::placeholder{
  color: rgba(154,164,178,.55);
}

.selectShell{
  margin-top: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: rgba(231,234,240,.92);
  font-size: 13px;
}

.selectLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}

.statusDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(71,203,123,.9);
  box-shadow: 0 0 14px rgba(71,203,123,.25);
}

.activityIcon{
  opacity: .75;
}

.panelActions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

.saveBtn{
  border: 1px solid rgba(71,203,123,.22);
  background: rgba(71,203,123,.14);
  color: rgba(231,234,240,.92);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 1000;
  font-size: 13px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.saveBtn.disabled{
  opacity: .45;
  border-color: rgba(71,203,123,.14);
  background: rgba(71,203,123,.08);
  cursor: not-allowed;
}

.saveIcon{ opacity: .9; }

/* little green "enabled" dot at end of nav items */
.navCheck{
  margin-left:auto;
  opacity: .8;
  color: rgba(71,203,123,.85);
}

/* responsive */
@media (max-width: 980px){
  .profilePanel{ max-width: none; }
  .profileGrid{ grid-template-columns: 1fr; }
  .uploadTile{ height: 140px; }
}
/* ---------------------------
   Server Rail (mini-rail)
---------------------------- */
.rail{
  width: 72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding: 12px 10px;
  background: rgba(0,0,0,.35);
  border-right: 1px solid rgba(255,255,255,.06);
}

.railTop, .railBottom{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}

.railServers{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  overflow:auto;
  padding: 6px 0;
}

/* keep your existing .railBtn look if you like; this makes it consistent */
.railBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(231,234,240,.92);
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadowSoft);
  transition: .16s ease;
}
.railBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.20);
  background: rgba(59,130,246,.10);
}
.railBtn.active{
  border-color: rgba(59,130,246,.26);
  background:
    radial-gradient(600px 240px at 80% 80%, rgba(59,130,246,.20), transparent 55%),
    rgba(0,0,0,.25);
}

/* server icons */
.railServer{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.22);
  position:relative;
  transition: .16s ease;
  overflow:hidden;
}
.railServer:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.20);
  background: rgba(59,130,246,.10);
}

/* active indicator like Discord (small pill on left) */
.railServer.active::before{
  content:"";
  position:absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 22px;
  border-radius: 999px;
  background: rgba(59,130,246,.95);
  box-shadow: 0 0 18px rgba(59,130,246,.35);
}

.srvBadge{
  font-weight: 1000;
  font-size: 12px;
  color: rgba(231,234,240,.92);
  letter-spacing:.02em;
  opacity:.92;
}

/* nicer rail scrollbar (optional) */
.railServers::-webkit-scrollbar{ width: 10px; }
.railServers::-webkit-scrollbar-track{ background: transparent; }
.railServers::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.railServers::-webkit-scrollbar-thumb:hover{
  background: rgba(59,130,246,.18);
  border: 3px solid transparent;
  background-clip: content-box;
}
/* ---------------------------
   Server Rail (no home button)
---------------------------- */
.rail{
  width: 72px;
  padding: 12px 10px;
  background: rgba(0,0,0,.35);
  border-right: 1px solid rgba(255,255,255,.06);
  height: 100vh;
  overflow: hidden;
  display:flex;
}

.railServers{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
  overflow:auto;
  padding: 0;              /* <-- starts at top */
  margin: 0;
}

/* server icons */
.railServer{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.22);
  position:relative;
  transition: .16s ease;
  overflow:hidden;
  color: rgba(231,234,240,.92);
}
.railServer:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.20);
  background: rgba(59,130,246,.10);
}

/* active indicator pill */
.railServer.active::before{
  content:"";
  position:absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 22px;
  border-radius: 999px;
  background: rgba(59,130,246,.95);
  box-shadow: 0 0 18px rgba(59,130,246,.35);
}

.srvBadge{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing:.02em;
  opacity:.92;
}

/* spacer pushes Add button to bottom */
.railSpacer{
  flex: 1 1 auto;
}

/* Add server button slightly different */
.railAdd{
  border-style: dashed;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.railAdd:hover{
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.10);
}

/* nicer rail scrollbar (optional) */
.railServers::-webkit-scrollbar{ width: 10px; }
.railServers::-webkit-scrollbar-track{ background: transparent; }
.railServers::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.railServers::-webkit-scrollbar-thumb:hover{
  background: rgba(59,130,246,.18);
  border: 3px solid transparent;
  background-clip: content-box;
}
/* Auto-active sidebar item via body[data-page] + [data-nav] */
body[data-page="overview"] .navItem[data-nav="overview"],
body[data-page="index"] .navItem[data-nav="index"],
body[data-page="bot-profile"] .navItem[data-nav="bot-profile"],
body[data-page="settings"] .navItem[data-nav="settings"],
body[data-page="embed-messages"] .navItem[data-nav="embed-messages"],
body[data-page="statistics"] .navItem[data-nav="statistics"],
body[data-page="plugins"] .navItem[data-nav="plugins"],
body[data-page="utility"] .navItem[data-nav="utility"],
body[data-page="levels"] .navItem[data-nav="levels"],
body[data-page="moderator"] .navItem[data-nav="moderator"],
body[data-page="report-system"] .navItem[data-nav="report-system"],
body[data-page="welcome-goodbye"] .navItem[data-nav="welcome-goodbye"],
body[data-page="auto-responder"] .navItem[data-nav="auto-responder"],
body[data-page="temporary-channels"] .navItem[data-nav="temporary-channels"],
body[data-page="fun"] .navItem[data-nav="fun"],
body[data-page="music"] .navItem[data-nav="music"],
body[data-page="giveaways"] .navItem[data-nav="giveaways"],
body[data-page="reaction-roles"] .navItem[data-nav="reaction-roles"],
body[data-page="logs"] .navItem[data-nav="logs"]{
  border-color: rgba(59,130,246,.22);
  background:
    radial-gradient(800px 420px at 90% 90%, rgba(59,130,246,.18), transparent 55%),
    rgba(0,0,0,.18);
}
/* Welcome/Goodbye preview mock */
.previewShell{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 12px;
}

.previewHeader{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}
.previewAvatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.65), rgba(59,130,246,.14));
  border: 1px solid rgba(255,255,255,.08);
}
.previewMeta{ min-width:0; }
.previewName{
  font-weight: 1000;
  font-size: 13px;
  color: rgba(231,234,240,.92);
}
.previewSub{
  font-size: 12px;
  color: rgba(154,164,178,.75);
  margin-top: 2px;
}

.previewEmbed{
  display:flex;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.embedBar{
  width: 5px;
  background: rgba(59,130,246,.90);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
}
.embedBody{
  padding: 12px;
  flex:1;
}
.embedTitle{
  font-weight: 1000;
  font-size: 14px;
  margin-bottom: 6px;
}
.embedText{
  color: rgba(231,234,240,.86);
  font-size: 13px;
  line-height: 1.5;
}
.embedFields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.embedField{
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
}
.efName{
  font-size: 11px;
  color: rgba(154,164,178,.82);
}
.efValue{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(231,234,240,.92);
}
.embedFooter{
  margin-top: 12px;
  font-size: 11px;
  color: rgba(154,164,178,.70);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
/* Reaction Roles preview buttons */
.mockButtons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.mockBtn{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  color: rgba(231,234,240,.92);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
/* Logs page helpers */
.detailBox{
  margin-top:12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.detailRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.detailRow:last-child{ border-bottom: 0; }
.dKey{
  font-size: 12px;
  color: rgba(154,164,178,.82);
  font-weight: 900;
  letter-spacing: .2px;
}
.dVal{
  font-size: 13px;
  color: rgba(231,234,240,.90);
  text-align: right;
  max-width: 70%;
}
.detailDivider{
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 12px 0;
}
.codeLike{
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(231,234,240,.90);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.20);
  padding: 10px;
}

/* Severity chips */
.lvlChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .4px;
  border: 1px solid rgba(255,255,255,.10);
}
.lvlChip.info{
  background: rgba(59,130,246,.14);
  color: rgba(180,205,255,.95);
}
.lvlChip.warn{
  background: rgba(245,158,11,.14);
  color: rgba(255,226,175,.95);
}
.lvlChip.err{
  background: rgba(239,68,68,.14);
  color: rgba(255,190,190,.95);
}
/* --- Center main page content (fix empty right space) --- */
.page{
  max-width: 1280px;     /* try 1200 / 1280 / 1400 */
  margin: 0 auto;        /* centers it */
  width: 100%;
}

/* If your .page already has padding, keep it.
   If not, this helps it breathe on small screens. */
.page{
  padding-left: 18px;
  padding-right: 18px;
}
/* =========================
   Right-side Insights Rail
   ========================= */

/* Wrap your page content + right rail */
.pageLayout{
  display: grid;
  grid-template-columns: 1fr 340px; /* main + right rail width */
  gap: 18px;
  align-items: start;
}

/* Make sure main content can shrink properly */
.pageMain{
  min-width: 0;
}

/* Right rail */
.pageAside{
  position: sticky;
  top: 86px;               /* below topbar; adjust if needed */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Small “card” containers in the right rail */
.sideCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 12px;
}

.sideTitle{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(231,234,240,.92);
  font-size: 13px;
  margin-bottom: 10px;
}

.sideSub{
  color: rgba(154,164,178,.82);
  font-size: 12px;
  line-height: 1.5;
}

/* Small stat rows */
.sideStat{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sideStat:first-of-type{ border-top: 0; padding-top: 0; }
.sideKey{
  color: rgba(154,164,178,.82);
  font-size: 12px;
  font-weight: 900;
}
.sideVal{
  color: rgba(231,234,240,.92);
  font-size: 12px;
  font-weight: 1000;
  text-align: right;
}

/* Alert/tip rows */
.sideItem{
  display:flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sideItem:first-of-type{ border-top: 0; padding-top: 0; }
.sideDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.55); /* your blue accent */
  margin-top: 4px;
  flex: 0 0 auto;
}
.sideItemTitle{
  font-size: 12px;
  font-weight: 1000;
  color: rgba(231,234,240,.92);
  margin-bottom: 2px;
}
.sideItemText{
  font-size: 12px;
  color: rgba(154,164,178,.82);
  line-height: 1.5;
}

/* Small action buttons area */
.sideActions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.sideBtn{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  color: rgba(231,234,240,.88);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.sideBtn:hover{
  background: rgba(0,0,0,.16);
}

/* Responsive: hide the rail on smaller widths */
@media (max-width: 1180px){
  .pageLayout{
    grid-template-columns: 1fr;
  }
  .pageAside{
    position: static;
  }
}
/* =========================
   RIGHT RAIL (global)
   ========================= */

.app{
  display: flex; /* you likely already have this, but safe */
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* Your existing layout is: rail + sidebar + content.
   We'll add rightRail as the last column. */

.rightRail{
  width: 340px;
  flex: 0 0 340px;
  border-left: 1px solid var(--border);
  background: var(--panel2);
  padding: 14px 12px;
  overflow-y: auto;
  min-height: 0;
}

.rightRailInner{
  position: sticky;
  top: 14px;   /* matches your .rightRail padding */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar,
.content{
  min-height: 0;
}

.sidebar{
  overflow-y: auto;
}

.content{
  overflow-y: auto;
}
/* Right rail cards */
.rCard{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel2);
  padding: 12px;
}

.rTitle{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 10px;
}

.rSub{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: -6px;
  margin-bottom: 10px;
}

.rRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rRow:first-of-type{ border-top: 0; padding-top: 0; }

.rKey{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.rVal{
  color: var(--text);
  font-size: 12px;
  font-weight: 1000;
  text-align: right;
}

.rItem{
  display:flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rItem:first-of-type{ border-top: 0; padding-top: 0; }

.rDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.55); /* blue accent */
  margin-top: 4px;
  flex: 0 0 auto;
}
.rItemTitle{
  font-size: 12px;
  font-weight: 1000;
  color: var(--text);
  margin-bottom: 2px;
}
.rItemText{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.rActions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.rBtn{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.rBtn:hover{
  background: rgba(0,0,0,.16);
}

/* Hide right rail on smaller screens */
@media (max-width: 1180px){
  .rightRail{ display:none; }
}
/* --- Fix phantom space to the right of the right rail --- */
html, body{
  width: 100%;
  margin: 0;
  overflow-x: hidden; /* kills any accidental horizontal overflow */
}

/* Make the main 4-column layout lock to the viewport */
.app{
  width: 100%;
  max-width: 100%;
}

/* IMPORTANT: avoid 100vw on any wrapper (100vw includes scrollbar width)
   If you have width:100vw anywhere, change it to width:100%. */

/* Ensure the right rail is the last thing and flush to the edge */
.rightRail{
  margin-right: 0 !important;
  padding-right: 12px;
}
/* === FIX: white space to the right of the right rail === */
html, body{
  height: 100%;
  margin: 0;
}

html{
  background: var(--bg0); /* fallback canvas behind body gradients */
}

body{
  background:
    radial-gradient(1100px 600px at 15% 12%, var(--bgGlow1), transparent 60%),
    radial-gradient(800px 520px at 80% 30%, var(--bgGlow2), transparent 60%),
    radial-gradient(900px 600px at 55% 85%, var(--bgGlow3), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Make the main layout always span the full viewport */
.app{
  display: flex;      /* rail | sidebar | content | rightRail */
  width: 100%;
  min-height: 100vh;
  max-width: none;    /* kills any accidental max-width */
}

/* Content must take ALL remaining space between sidebar and rightRail */
.content{
  flex: 1 1 auto;
  min-width: 0;       /* prevents overflow causing weird widths */
}

/* Right rail stays fixed width */
.rightRail{
  flex: 0 0 340px;    /* or whatever width you chose */
}
:root{
  --sw1:#5b8cff;
  --sw2:#8b5bff;
  --sw3:#34d399;
  --sw4:#f59e0b;
  --sw5:#64748b;
}
/* Fix dropdown menu looking "white/black" */
.selectMenu,
.ddMenu {
  background: #121826 !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  overflow: hidden;
}

.selectMenu .item,
.ddMenu .ddItem {
  padding: 10px 12px;
  cursor: pointer;
  color: rgba(255,255,255,.9) !important;
}

.selectMenu .item:hover,
.ddMenu .ddItem:hover {
  background: rgba(255,255,255,.06) !important;
}

.selectMenu .item.active,
.ddMenu .ddItem.active {
  background: rgba(120,170,255,.14) !important;
  outline: 1px solid rgba(120,170,255,.22) !important;
}
/* ===== Custom Dropdown (dark, cross-browser) ===== */
.dd { position: relative; width: 100%; }

.ddBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* match your input look */
  background: #0f1522;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.ddBtn:focus {
  outline: none;
  border-color: rgba(120,170,255,.45);
  box-shadow: 0 0 0 3px rgba(120,170,255,.12);
}

.ddChev { color: rgba(255,255,255,.60); }

/* menu */
.ddMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 999;

  background: #0b101a;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  padding: 6px;
  display: none;
}

.dd.open .ddMenu { display: block; }

.ddItem {
  width: 100%;
  text-align: left;

  background: transparent;
  color: rgba(255,255,255,.92);
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
}

.ddItem:hover,
.ddItem:focus {
  outline: none;
  background: rgba(255,255,255,.08);
}

.ddItem.active {
  background: rgba(120,170,255,.16);
}
/* Save feedback */
.saveNote {
  margin-left: 12px;
  font-size: 13px;
  opacity: 0.85;
}

.saveBtn.isSaving {
  opacity: 0.75;
  cursor: not-allowed;
}

.saveBtn.isOk {
  box-shadow: 0 0 0 3px rgba(80, 200, 140, 0.15);
}

.saveBtn.isErr {
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18);
}
/* ===== Save button visual feedback ===== */

.saveBtn {
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

/* Hover: subtle lift + glow */
.saveBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.12);
}

/* Click: pressed-in */
.saveBtn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.98);
}

/* Keyboard focus */
.saveBtn:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.65);
  outline-offset: 3px;
}

/* Disabled */
.saveBtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.2);
  transform: none;
  box-shadow: none;
}

/* Saving state */
.saveBtn.isSaving {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
}

/* shimmer sweep overlay while saving */
.saveBtn.isSaving::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 70%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  animation: saveSweep 1.1s linear infinite;
  pointer-events: none;
}

@keyframes saveSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Success flash */
.saveBtn.isOk {
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 14px 30px rgba(16, 185, 129, 0.14);
}

/* Error flash */
.saveBtn.isErr {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.22), 0 14px 30px rgba(239, 68, 68, 0.12);
}
/* Chip-style dropdowns for logs filters */
.chipSelect{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}

.chipSelect select{
  background:transparent;
  border:0;
  color:inherit;
  font:inherit;
  outline:none;
  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}

.chipSelect .chev{
  opacity:.7;
  pointer-events:none;
}
/* ===== Chip Select (Logs filters) ===== */
.chipSelect{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  line-height:1;
}

.chipSelect .chipKey{
  opacity:.8;
  font-weight:600;
}

.chipSelect select{
  /* kill native styling */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  /* remove the white box */
  background: transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  /* text */
  color: rgba(255,255,255,.92);
  font: inherit;
  font-weight:600;

  /* spacing */
  padding:0 18px 0 0;   /* leave room for your ▾ chevron */
  margin:0;
  line-height:1;
  cursor:pointer;
}

/* Firefox sometimes keeps a focus ring */
.chipSelect select:focus{
  outline: none;
}

/* Hide the old IE/Edge dropdown arrow if it ever shows */
.chipSelect select::-ms-expand{
  display:none;
}

/* Your chevron */
.chipSelect .chev{
  opacity:.75;
  pointer-events:none;
  margin-left:-18px;   /* sit over the right padding above */
}

/* Hover/active states */
.chipSelect:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}
.chipSelect:active{
  transform: translateY(1px);
}
/* Closed select face */
.chipSelect select {
  background-color: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

/* Opened dropdown list colors (browser support varies) */
.chipSelect select option {
  background-color: #0f1218;
  color: rgba(255,255,255,.92);
}
.embedPreviewWrap { display:flex; flex-direction:column; gap:10px; }

.embedMsgContent {
  min-height: 18px;
  white-space: pre-wrap;
  opacity: .9;
}

.embedPreview {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,12,18,.55);
  overflow: hidden;
}

.embedBar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--sw1, #5865F2);
  opacity: .9;
}

.embedBody { padding: 14px 14px 12px 18px; }

.embedTitle {
  font-weight: 700;
  margin-bottom: 6px;
  word-break: break-word;
}

.embedDesc {
  opacity: .9;
  white-space: pre-wrap;
  line-height: 1.35;
  word-break: break-word;
}

.embedThumb {
  display:none;
  width: 64px; height: 64px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  float: right;
  margin-left: 12px;
  margin-bottom: 8px;
}

.embedImage {
  display:none;
  margin-top: 10px;
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.08);
}

.embedFooter {
  margin-top: 10px;
  opacity: .75;
  font-size: 12px;
}
/* ===== Embed Compose "balloons" ===== */
.composeGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* If your layout has room, make it 2 columns on wider screens */
@media (min-width: 980px){
  .composeGrid{
    grid-template-columns: 1fr 1fr;
  }
  /* Make the big textarea sections span full width if desired */
  .composeGrid .bubbleCard:nth-child(1),
  .composeGrid .bubbleCard:nth-child(3){
    grid-column: 1 / -1;
  }
}

.bubbleCard{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.bubbleTitle{
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bubbleDesc{
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.75;
}

/* ===== Better selects (closed state) ===== */
/* Make select look like your inputs (closed state) */
select.textInput{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Try to improve dropdown menu colors where supported */
select.textInput option{
  background: #0f1118;
  color: #e9ecff;
}

/* Firefox uses this for dropdown list color scheme */
select.textInput{
  color-scheme: dark;
}

/* If your global .textInput background isn't being applied to selects,
   force it here (match your theme variables if you have them). */
select.textInput{
  background-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
}
/* ===== Stats filter dropdowns (chipDrop) ===== */
.chipDrop{
  position: relative;
  display: inline-flex;
}

/* hidden by default; JS toggles display:block */
.chipMenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  padding: 8px;
  display: none;
  z-index: 9999;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(12,14,18,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 50px rgba(0,0,0,.55);
}

/* stack the menu items vertically */
.chipMenu .chipItem{
  width: 100%;
  display: block;
  text-align: left;

  padding: 8px 10px;
  border-radius: 10px;

  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.88);
  cursor: pointer;
}

.chipMenu .chipItem:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* optional: keep label/value inline */
.chipBtn .chipVal{
  margin-left: 6px;
}

/* ---------------------------
   Auth pages
---------------------------- */
.authShell{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}
.authCard{
  width: min(420px, 100%);
  text-align: center;
  padding: 24px;
}
.authLogo{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 900;
}
.authTitle{
  margin-top: 10px;
  font-size: 24px;
  font-weight: 1000;
}
.authSub{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.authActions{
  margin-top: 4px;
  display: grid;
  gap: 10px;
}
.authBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  text-decoration: none;
}
.authBtnSecondary{
  width: 100%;
  text-decoration: none;
}
.authMeta{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.authError{
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 77, 77, .12);
  border: 1px solid rgba(255, 77, 77, .25);
  color: rgba(255, 198, 198, .95);
  font-size: 12px;
}
.authFooter{
  margin-top: 16px;
  color: var(--muted2);
  font-size: 12px;
}

/* ---------------------------
   Theme token overrides
   Keep common text/shell pieces tied to live Theme Studio values.
---------------------------- */
.sidebar,
.content,
.rightRail,
.page,
.panelCard,
.pluginCard,
.rCard{
  color: var(--text);
}

.sidebar .navText,
.sidebar .userName,
.sidebar .serverName,
.topPill,
.rTitle,
.rItemTitle,
.rVal,
.linkBtn,
.ghostBtn,
.textInput,
.searchInput,
.selectShell,
.fakeInput,
.statusChip{
  color: var(--text) !important;
}

.sidebar .serverSub,
.sidebar .userSub,
.sidebar .navLabel,
.pageHead p,
.moduleSub,
.panelSub,
.pluginDesc,
.subLabel,
.fLabel,
.fieldHint,
.ghostText,
.chartSub,
.metricLabel,
.hash,
.mono,
.rSub,
.rItemText,
.rKey{
  color: var(--muted) !important;
}

.navIcon,
.pluginIcon,
.searchIcon{
  color: var(--text) !important;
}
.navIcon svg,
.pluginIcon svg,
.searchIcon svg{
  stroke: currentColor !important;
  filter: none !important;
}
.navIcon svg *,
.pluginIcon svg *,
.searchIcon svg *{
  stroke: currentColor !important;
}

/* ---------------------------
   Music page polish
---------------------------- */
body[data-page="music"] .musicPage{
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 36px;
}

body[data-page="music"] .statsToolbar{
  border-radius: 18px;
  background:
    radial-gradient(900px 360px at 88% 88%, rgba(59,130,246,.18), transparent 56%),
    rgba(0,0,0,.20);
}

body[data-page="music"] .pluginGrid.two{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

body[data-page="music"] .pluginCard{
  min-height: 0;
  border-radius: 20px;
  padding: 18px;
  background:
    radial-gradient(820px 420px at 92% 92%, rgba(59,130,246,.22), transparent 58%),
    linear-gradient(180deg, rgba(12,16,25,.72), rgba(7,10,16,.72));
}

body[data-page="music"] .pluginTitle{
  margin-top: 0;
  font-size: 15px;
  letter-spacing: .01em;
}

body[data-page="music"] .textInput{
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  padding: 10px 12px;
  min-height: 38px;
}

body[data-page="music"] textarea.textInput{
  min-height: 120px;
  resize: vertical;
}

body[data-page="music"] .ghostBtn{
  border-radius: 12px;
  padding: 9px 12px;
}

body[data-page="music"] #musicHistoryList{
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(0,0,0,.14);
}

body[data-page="music"] #musicHistoryList .miniRow{
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}

body[data-page="music"] .musicLyricsPanel{
  max-height: 340px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.20);
}

body[data-page="music"] .musicLyricsHead{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 8px;
}

body[data-page="music"] .musicLyricsBody{
  white-space: normal;
  line-height: 1.45;
  font-size: 12px;
}

/* ---------------------------
   Dashboard-wide control polish
---------------------------- */
.page .textInput,
.page .textArea,
.page textarea,
.page input[type="text"],
.page input[type="number"],
.page input[type="url"],
.page input[type="search"],
.page input[type="email"],
.page input[type="password"],
.page select{
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.10)),
    rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.page .textInput,
.page .textArea,
.page input[type="text"],
.page input[type="number"],
.page input[type="url"],
.page input[type="search"],
.page input[type="email"],
.page input[type="password"],
.page select{
  min-height: 38px;
  padding: 9px 12px;
}

.page textarea,
.page .textArea{
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.42;
  resize: vertical;
}

.page .textInput::placeholder,
.page .textArea::placeholder,
.page textarea::placeholder,
.page input::placeholder{
  color: rgba(154,164,178,.72);
}

.page .textInput:focus,
.page .textInput:focus-visible,
.page .textArea:focus,
.page .textArea:focus-visible,
.page textarea:focus,
.page textarea:focus-visible,
.page input[type="text"]:focus,
.page input[type="number"]:focus,
.page input[type="url"]:focus,
.page input[type="search"]:focus,
.page input[type="email"]:focus,
.page input[type="password"]:focus,
.page select:focus,
.page select:focus-visible{
  border-color: rgba(59,130,246,.55);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.22),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Dropdown visuals */
.page select:not([multiple]){
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(231,234,240,.85) 50%),
    linear-gradient(135deg, rgba(231,234,240,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.page select[multiple]{
  min-height: 140px;
  padding-right: 12px;
  background-image: none;
}

.page select option{
  background: #0f1422;
  color: #e7eaf0;
}

/* Keep chip-style mini filters intentionally compact */
.page .chipSelect select{
  min-height: 0 !important;
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Stronger outline language for card/box sections */
.page .panelCard,
.page .pluginCard,
.page .rCard,
.page .miniTable,
.page .logTable,
.page .inputShell,
.page .selectShell,
.page .toggleRow{
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    var(--shadowSoft);
}

/* =========================
   Final shell scroll fixes
   ========================= */
html,
body{
  height: 100%;
}

.app{
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.rail,
.sidebar,
.content,
.rightRail{
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
}

.sidebar,
.content,
.rightRail{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Sticky wrapper blocks rail scrolling on some pages; keep rail content flow normal. */
.rightRail .rightRailInner{
  position: relative !important;
  top: auto !important;
}