/* Removed broken Minecraft font CDN (was 404 and could break UI init).
   Previews use a reliable local monospace stack instead. */
   /* assets/styles.css */
:root{
  --bg:#1c1f26;
  --bg2:#171a20;
  --panel:#2a2f3a;
  --panel2:#242a33;
  --card:#2d3340;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --text:#e7eaf2;
  --muted:#aeb6c6;
  --muted2:#94a0b8;

  --border: rgba(255,255,255,0.10);
  --hover: rgba(255,255,255,0.07);

  --accent:#b2d235;
  --accent2:#22c55e;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  --r10:10px;
  --r12:12px;
  --r16:16px;

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 28px rgba(0,0,0,.28);
  --shadow3: 0 6px 18px rgba(0,0,0,.22);
  --focus: 0 0 0 3px rgba(178,210,53,.22);

  --topbar-bg: linear-gradient(180deg, rgba(36,42,51,.92), rgba(28,31,38,.88));
  --sidebar-bg: linear-gradient(180deg, rgba(24,26,32,.98), rgba(20,22,28,.98));
  --sidebar-brand-bg: rgba(255,255,255,.04);
  --nav-bg: rgba(255,255,255,.03);
  --nav-hover-bg: rgba(255,255,255,.06);
  --side-footer-bg: rgba(255,255,255,.03);
}

.light {
  --bg: #f5f5f5;
  --bg2: #e0e2e8;
  --panel: #d4d6de;
  --text: #111111;
  --muted: #555;
  --border: rgba(0,0,0,0.12);
  --hover: rgba(0,0,0,0.06);
  --topbar-bg: rgba(255, 255, 255, 0.95);
  --line: rgba(0, 0, 0, 0.10);
  --sidebar-bg: linear-gradient(180deg, #e8eaf0, #f0f2f5);
  --sidebar-brand-bg: rgba(0,0,0,.04);
  --nav-bg: rgba(0, 0, 0, 0.03);
  --nav-hover-bg: rgba(0,0,0,0.06);
  --side-footer-bg: rgba(0,0,0,0.03);
  --panel2: #c8cad2;
--card: #ffffff;
--line2: rgba(0,0,0,0.16);
--muted2: #777;

--accent: #7aaa10;
--accent2: #16a34a;
--good: #16a34a;
--warn: #d97706;
--bad: #dc2626;

--shadow: 0 18px 60px rgba(0,0,0,.12);
--shadow2: 0 10px 28px rgba(0,0,0,.08);
--shadow3: 0 6px 18px rgba(0,0,0,.06);
--focus: 0 0 0 3px rgba(120,170,10,.22);

--r10: 10px;
--r12: 12px;
--r16: 16px;

--nav-bg: rgba(0,0,0,0.03);
--side-footer-bg: rgba(0,0,0,0.03);
--sidebar-brand-bg: rgba(0,0,0,.04);
}

*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0;
 background: var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  /* overflow:hidden; */
  font-size:18px;
  line-height:1.5;
  transition: background 0.2s, color 0.2s;
}

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; color:inherit; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.app{
  height:100%;
  display:grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 72px 1fr;
  grid-template-areas:
    "side top"
    "side main";
}


.topbar{
  grid-area: top;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background: var(--topbar-bg);
  color: var(--text);
  backdrop-filter: blur(14px);
  position:sticky; top:0; z-index:80;
}
.crumb{ display:flex; align-items:center; gap:10px; min-width:0; }
.crumb b{ font-weight:950; white-space:nowrap; }
.crumb span{ color:var(--text);  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px;
}
.dot{ width:10px; height:10px; border-radius:999px; background:var(--good); box-shadow:0 0 14px rgba(34,197,94,.35); }

.btn{
  cursor:pointer;
  border:1px solid var(--line);
  background: rgba(255,255,255,.07);
  padding:9px 12px;
  border-radius: 12px;
  font-size:13px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  box-shadow: var(--shadow3);
}
.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.btn:active{ transform: translateY(1px); }
.btn.good{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.35); }
.btn.good:hover{ background: rgba(34,197,94,.22); }
.btn.primary{ background: rgba(96,165,250,.18); border-color: rgba(96,165,250,.35); }
.btn.primary:hover{ background: rgba(96,165,250,.26); }
.btn.bad{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.34); }
.btn.bad:hover{ background: rgba(239,68,68,.20); }

.sidebar{
  grid-area: side;
  border-right:1px solid var(--line);
  background: var(--sidebar-bg);
  padding:16px;
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:0; height:100vh;
  transition: padding .26s ease, gap .26s ease;
}

.app{
  transition: grid-template-columns .28s cubic-bezier(.2,.75,.2,1);
}

/* Sidebar collapse (arrow tab button) */
.sidebarToggle{
  position:absolute;
  top:8px;
  right:-16px;
  width:32px; height:48px;
  border-radius:10px;
  border: 1px solid var(--line);
  background: var(--bg2, rgba(16,20,28,.88));
  color: var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  z-index: 120;
  font-size:16px;
  line-height:1;
  font-weight:900;
  padding:0;
}
.sidebarToggle:hover{
   border-color: var(--border);
  background: var(--panel, rgba(22,28,38,.92));
}

.topbar .sidebarToggle.inTopbar{
  position: static;
  top: auto;
  right: auto;
  width:34px;
  height:34px;
  margin-left:0;
  margin-right:10px;
  border-radius:10px;
  z-index: auto;
  flex: 0 0 auto;
}

/* body.sidebar-collapsed .app{ grid-template-columns: 140px 1fr; } */
body.sidebar-collapsed .app{ grid-template-columns: 0px 1fr; }
/* body.sidebar-collapsed .sidebar{ padding:14px 10px; } */
body.sidebar-collapsed .brand{ padding:10px 8px; justify-content:center; gap:0; }
body.sidebar-collapsed .nav{ padding:8px 6px; }
body.sidebar-collapsed .nav a{ justify-content:center; gap:0; }
body.sidebar-collapsed .nav a .left{ justify-content:center; gap:0; }
body.sidebar-collapsed .homeButton{ justify-content:center; gap:0; margin: 10px 0 14px; }
body.sidebar-collapsed .brand .t,
body.sidebar-collapsed .brand .s,
body.sidebar-collapsed .nav a .label,
body.sidebar-collapsed .nav a .badge,
body.sidebar-collapsed .homeButton .label,
body.sidebar-collapsed .homeButton .badge{
  display:none;
}
body.sidebar-collapsed .side-footer{
  opacity:0;
  max-height:0;
  margin-top:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
  overflow:hidden;
  pointer-events:none;
}

/* ---------------------------------CSS FIXES----------------------------------------------- */

/* ===========================
   Light mode — Profile sidebar css
=========================== */

 .sidebarProfile {
          padding: 8px;
          border-bottom: 1px solid rgba(255,255,255,0.07);
          margin-bottom: 4px;
          white-space: nowrap;
        }
        .light .sidebarProfile {
          border-bottom-color: rgba(0,0,0,0.08);
        }
        .sidebarProfileBtn {
          display: flex;
          align-items: center;
          gap: 10px;
          width: 100%;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 10px;
          padding: 8px 10px;
          cursor: pointer;
          color: var(--text);
          transition: background 0.12s, border-color 0.12s;
          text-align: left;
        }
        .sidebarProfileBtn:hover,
        .sidebarProfileBtn.open {
          background: rgba(255,255,255,0.09);
          border-color: rgba(255,255,255,0.10);
        }

         .sidebarProfileBtn,
        .sidebarProfileBtn.open {
          background: rgba(255,255,255,0.06);
          border-color: rgba(255,255,255,0.09);
        }

        .light .sidebarProfileBtn:hover,
        .light .sidebarProfileBtn.open {
          background: rgba(0,0,0,0.07);
          border-color: rgba(0,0,0,0.12);
        }

        .light .sidebarProfileBtn,
        .light .sidebarProfileBtn.open {
          background: rgba(0,0,0,0.05);
          border-color: rgba(0,0,0,0.10);
        }

        .sidebarProfileAvatar {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          border: 2px solid rgba(255,255,255,0.12);
          flex-shrink: 0;
          object-fit: cover;
        }
        .light .sidebarProfileAvatar {
          border-color: rgba(0,0,0,0.12);
        }
        .sidebarProfileInfo {
          flex: 1;
          min-width: 0;
          overflow: hidden;
        }
        .sidebarProfileName {
          font-size: 13px;
          font-weight: 700;
          color: var(--text);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .sidebarProfileSub {
          font-size: 10px;
          color: var(--muted);
          margin-top: 1px;
        }
        .sidebarProfileChevron {
          font-size: 10px;
          color: var(--muted);
          flex-shrink: 0;
        }

        /* Dropdown menu */
        .sidebarProfileMenu {
          position: absolute;
          top: calc(100% + 4px);
          left: 8px;
          right: 8px;
          background: var(--card, #1a1f2e);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 12px;
          overflow: hidden;
          z-index: 999;
          box-shadow: 0 12px 40px rgba(0,0,0,0.35);
          animation: profileMenuIn 0.12s ease;
        }
        .light .sidebarProfileMenu {
          background: #fff;
          border-color: rgba(0,0,0,0.10);
          box-shadow: 0 8px 30px rgba(0,0,0,0.14);
        }
        @keyframes profileMenuIn {
          from { opacity: 0; transform: translateY(-4px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .sidebarProfileMenuItem {
          display: flex;
          align-items: center;
          gap: 9px;
          width: 100%;
          padding: 10px 14px;
          font-size: 13px;
          font-weight: 600;
          color: var(--text);
          text-decoration: none;
          background: transparent;
          border: none;
          cursor: pointer;
          transition: background 0.1s;
        }
        .sidebarProfileMenuItem:hover {
          background: rgba(255,255,255,0.06);
        }
        .light .sidebarProfileMenuItem:hover {
          background: rgba(0,0,0,0.05);
        }
        .sidebarProfileMenuItem--danger {
          color: #ff6b6b;
        }
        .sidebarProfileMenuItem--danger:hover {
          background: rgba(255,107,107,0.08);
        }
        .sidebarProfileDivider {
          height: 1px;
          background: rgba(255,255,255,0.07);
          margin: 2px 0;
        }
        .light .sidebarProfileDivider {
          background: rgba(0,0,0,0.08);
        }

        /* Collapsed: center the avatar button */
        .sidebar-collapsed .sidebarProfileBtn {
          justify-content: center;
          padding: 8px;
        }
        .sidebar-collapsed .sidebarProfile {
          padding: 8px 6px;
        }

        @keyframes spin { to { transform: rotate(360deg); } }


/* ===========================
   Light mode — card global fix
=========================== */
.light .card {
  background: #ffffff;
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.light .card .head {
  background: #f5f7fa;
  border-bottom-color: rgba(0,0,0,.08);
}
.light .card .head .t { color: #111111; }
.light .card .head .d { color: #555555; }
.light .card .body   { color: #111111; }

/* Muted text inside cards in light mode */
.light .card .body .mono { color: #555555; }



/* ===========================
   Light mode — sidebar fixes
=========================== */

/* Nav container */
.light .nav {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
}

/* Each nav link item */
.light .nav a {
  border-color: rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
}
.light .nav a:hover {
  background: rgba(0,0,0,.06);
  border-color: rgba(178,210,53,.40);
}
.light .nav a.active,
.light .nav a[aria-current="page"] {
  background: rgba(178,210,53,.18);
  border-color: rgba(178,210,53,.45);
}

/* Home button */
.light .homeButton {
  background: linear-gradient(180deg, rgba(178,210,53,.18), rgba(178,210,53,.08));
  border-color: rgba(178,210,53,.45);
}
.light .homeButton:hover {
  background: linear-gradient(180deg, rgba(178,210,53,.26), rgba(178,210,53,.12));
  border-color: rgba(178,210,53,.60);
}

/* Brand box */
.light .brand {
  background: rgba(255,255,255,.80);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Side footer */
.light .side-footer {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}

/* Icon color in light mode */
.light .nav a .icon {
  color: #555;
}
.light .nav a.active .icon,
.light .nav a[aria-current="page"] .icon {
  color: #333;
}

/* Badge in nav */
.light .nav a .badge {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
  color: #555;
}


/* ===========================
   Home page — full theme fix
=========================== */

/* Page header text */
.homePageHeader h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 950;
  color: var(--text);
}
.homePageHeader p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.homeOptionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .homeOptionGrid { grid-template-columns: 1fr; }
}

/* Main option cards */
.homeMainCard {
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
}
.homeMainCard--mc {
  border-color: rgba(120,200,80,.30);
  background: linear-gradient(180deg, rgba(80,160,40,.14), rgba(40,80,20,.08));
}
.homeMainCard--dc {
  border-color: rgba(88,101,242,.35);
  background: linear-gradient(180deg, rgba(88,101,242,.14), rgba(55,65,180,.08));
}
.homeMainCard__icon {
  font-size: 48px;
  line-height: 1;
}
.homeMainCard__title {
  font-size: 22px;
  font-weight: 950;
  margin-bottom: 6px;
  color: var(--text) !important;
}
.homeMainCard__desc {
  margin: 0;
  color: var(--muted) !important;
  font-size: 14px;
  line-height: 1.5;
}
.homeMainCard__btn {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  margin-top: auto;
  text-decoration: none;
}
.homeMainCard__btn--mc {
  border: 1px solid rgba(120,200,80,.40);
  background: rgba(120,200,80,.18);
  color: #d4f7a0 !important;
}
.homeMainCard__btn--mc:hover { background: rgba(120,200,80,.28); }
.homeMainCard__btn--dc {
  border: 1px solid rgba(88,101,242,.45);
  background: rgba(88,101,242,.20);
  color: #c5caff !important;
}
.homeMainCard__btn--dc:hover { background: rgba(88,101,242,.30); }

/* Light mode — card title/desc override */
.light .homeMainCard__title { color: var(--text) !important; }
.light .homeMainCard__desc  { color: var(--muted) !important; }
.light .homeMainCard--mc { background: linear-gradient(180deg, rgba(100,180,40,.12), rgba(60,120,20,.06)); }
.light .homeMainCard--dc { background: linear-gradient(180deg, rgba(88,101,242,.10), rgba(55,65,180,.05)); }
.light .homeMainCard__btn--mc { color: #2a6600 !important; background: rgba(100,180,40,.18); }
.light .homeMainCard__btn--dc { color: #2e35a8 !important; background: rgba(88,101,242,.16); }

/* ---- Plugin Quick Access card ---- */

/* Override the global dark card bg — make it theme-aware */
.homePluginCard {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.homePluginCard .head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.homePluginCard .head .t {
  font-weight: 950;
  font-size: 13px;
  margin: 0;
  color: var(--text);
}
.homePluginCard .head .d {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.homePluginCard .body { padding: 14px; }

.light .homePluginCard {
  background: rgba(255,255,255,.90);
  border-color: rgba(0,0,0,.10);
}
.light .homePluginCard .head {
  background: rgba(0,0,0,.03);
  border-bottom-color: rgba(0,0,0,.08);
}
.light .homePluginCard .head .t { color: #111; }
.light .homePluginCard .head .d { color: #555; }

/* Plugin grid */
.pluginGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .pluginGrid { grid-template-columns: 1fr; }
}

.pluginCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pluginCard:hover {
  border-color: rgba(178,210,53,.30);
  box-shadow: var(--focus);
}
.pluginCard__logoWrap {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  flex-shrink: 0;
}
.pluginCard__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pluginCard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pluginCard__name {
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  color: var(--text);
}
.pluginCard__desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.pluginCard__meta {
  font-size: 11px;
  color: var(--muted);
  opacity: .75;
}
.pluginCard__btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
  color: var(--text) !important;
}

/* Light mode plugin cards */

.light .main { background: #eef0f5; }

.light .pluginCard {
  background: rgba(255,255,255,.80);
  border-color: rgba(0,0,0,.10);
}
.light .pluginCard:hover { border-color: rgba(100,160,20,.40); }
.light .pluginCard__logoWrap {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
}
.light .pluginCard__name  { color: #111; }
.light .pluginCard__desc  { color: #555; }
.light .pluginCard__meta  { color: #777; }
.light .pluginCard__btn   { color: #1a3a8f !important; background: rgba(60,100,255,.10); border-color: rgba(60,100,255,.25); }
.light .pluginCard__btn:hover { background: rgba(60,100,255,.18); }

/* ----------------------------------------------------------------------------------------------------------- */

.brand{
  /* display:flex; align-items:center; gap:12px; */
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 10px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--sidebar-brand-bg);
  box-shadow: var(--shadow2);
}
.logo{
  width:80px; height:80px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:1000;
  color: transparent;
  font-size: 0;
  background-color: transparent;
  background-image: url("logos/hgn-core.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border:none;
}

.brandText{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}

/* .brand .t{ font-weight:950; font-size:14px; line-height:1.05; }
.brand .s{ font-size:12px; color:var(--muted); margin-top:2px; } */
.brand .t{ font-weight:950; font-size:14px; line-height:1.05; white-space: nowrap;   }
.brand .s{ font-size:12px; color:var(--muted); margin-top:2px; white-space: nowrap; display:block; }
.brand .t,
.brand .s,
.nav a .label,
.nav a .badge,
.homeButton .label,
.homeButton .badge{
  opacity:1;
  max-width:220px;
  transition: opacity .18s ease, max-width .26s ease, margin .26s ease;
}

.nav{
  padding:8px;
  border-radius: 18px;
  border:1px solid var(--line);
  background: var(--nav-bg);
  display:flex; flex-direction:column; gap:8px;
  box-shadow: var(--shadow3);
}

/* Home button (separate from sidebar tab list) */
.homeButton{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(178,210,53,.30);
  background: linear-gradient(180deg, rgba(178,210,53,.14), rgba(178,210,53,.06));
  margin: 10px 0 16px;
}
.homeButton:hover{
  background: linear-gradient(180deg, rgba(178,210,53,.18), rgba(178,210,53,.08));
  border-color: rgba(178,210,53,.45);
}
.homeButton .label{ font-size:16px; font-weight:800; letter-spacing:.2px; }
.homeButton .icon{ width:68px; height:68px; font-size:36px; border-radius:24px; display:flex; align-items:center; justify-content:center; }

.nav a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  font-size:13px;
}
.nav a:hover{ background: var(--nav-hover-bg); border-color: rgba(255,255,255,.08); }
.nav a.active{ background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.30); }
.left{ display:flex; align-items:center; gap:10px; min-width:0; }
.icon{
  width:30px; height:30px;
  border-radius: 12px;
  display:grid; place-items:center;
  /* background: rgba(255,255,255,.05); */
  /* border:1px solid rgba(255,255,255,.08); */
  color: var(--muted);
  flex:0 0 auto;
}
.label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:650; }
.badge{
  font-size:12px; color:var(--muted);
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  flex:0 0 auto;
}

.side-footer{
  margin-top:auto;
  padding:12px 10px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--side-footer-bg);
  color:var(--text);
  font-size:7px;
  line-height:1.5;
  white-space: nowrap;   /* no wrapping */
  overflow: hidden;
  box-shadow: var(--shadow3);
  max-height:220px;
  opacity:1;
  transition: opacity .18s ease, max-height .26s ease, padding .26s ease, margin .26s ease, border-width .26s ease;
}

.main{
  grid-area: main;
  padding:16px;
  overflow:auto;
}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.page-head h1{ margin:0; font-size:18px; font-weight:950; }
.page-head p{ margin:6px 0 0; font-size:12px; color:var(--muted); line-height:1.45; max-width:1100px; }
.page-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--r20);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.card .head{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.03);
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.card .head .t{ font-weight:950; font-size:13px; margin:0; color: var(--text); }
.card .head .d{ margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.card .body{ padding:14px; color: var(--text); }

.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.field label{ font-size:12px; color:var(--muted); }
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  outline:none;
  font-size:14px;
  line-height:1.45;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
textarea{ min-height: 170px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  border-color: rgba(96,165,250,.45);
  background: rgba(255,255,255,.05);
  box-shadow: var(--focus);
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1; }
.hr{ height:1px; background: var(--line); margin:12px 0; }

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.10);
}
th,td{ font-size:12px; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
th{ color:var(--muted); background: rgba(255,255,255,.04); font-weight:950; }
tr:last-child td{ border-bottom:none; }
.rightCell{ text-align:right; white-space:nowrap; }

/* Sticky "inside page" bar for placeholders + tabs */
.pageSticky{
  position:sticky;
  top:12px;
  z-index:70;
  background: linear-gradient(180deg, rgba(11,16,32,.96), rgba(11,16,32,.70));
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border:1px solid var(--line);
  box-shadow: var(--shadow3);
  padding:10px;
  margin-bottom:12px;
}

/* Placeholders strip */
.placeholdersStrip{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  box-shadow: var(--shadow3);
  padding:10px 12px;
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.placeholdersStrip .title{
  font-weight:950;
  min-width:120px;
  color:var(--text);
  font-size:13px;
}
.phInline{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.phChip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  white-space:nowrap;
}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:8px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow3);
}
.tab{
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size:13px;
  cursor:pointer;
  user-select:none;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.tab:hover{ background: rgba(255,255,255,.05); }
.tab:active{ transform: translateY(1px); }
.tab.active{ background: rgba(96,165,250,.16); border-color: rgba(96,165,250,.30); color: var(--text); }
.tab.hidden{ display:none; }

.togglePill{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
  box-shadow: var(--shadow3);
  user-select:none;
}
.togglePill input{ width:18px; height:18px; }

.chatGrid{ display:grid; grid-template-columns: 1fr; gap:14px; }
.block{
  border:1px solid var(--line);
  background: rgba(0,0,0,.10);
  border-radius: 16px;
  padding:12px;
  box-shadow: var(--shadow3);
}
.typeHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.typeHeader .t{ font-weight:950; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.chip.copied{border-color: rgba(87,242,135,.65); color:#fff; background: rgba(87,242,135,.12);}

.previewRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.previewBox{
  border:1px solid var(--line);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.14);
}
.previewTitle{
  font-size:12px; color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.previewBody{
  padding:12px;
  min-height:140px;
}

/* Minecraft preview scene */
.mcScene{
  border-radius: 6px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
}
.mcPrev{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:18px;
  line-height:1.6;
  white-space:pre-wrap;
  text-shadow: 1px 1px 0 rgba(0,0,0,.75);
}

/* Discord preview scene */
.dcScene{
  border-radius: 12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.dcPrev{
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
  color:#e6e7ea;
}
.dcMsg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.dcAvatar{
  width:34px; height:34px; border-radius:999px;
  background: linear-gradient(180deg, rgba(96,165,250,.45), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.dcContent{ flex:1; min-width:0; }
.dcHeader{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:4px;
}
.dcName{ font-weight:800; color:#ffffff; }
.dcTime{ font-size:12px; color:#b8c0ca; }
.dcBubble{
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.embed{
  border-left:4px solid rgba(96,165,250,.70);
  padding-left:10px;
}
.embed .author{ font-size:12px; color:#cfd6df; margin-bottom:6px; }
.embed .title{ font-weight:950; margin-bottom:6px; font-size:14px; }
.embed .desc{ color:#d7dbe0; margin-bottom:10px; white-space:pre-wrap; font-size:13px; line-height:1.5; }
.embed .fields{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.embed .field{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding:8px;
}
.embed .field .k{ font-weight:950; font-size:12px; margin-bottom:4px; }
.embed .footer{ margin-top:10px; color:#b8c0ca; font-size:12px; }

.warnBox{
  border:1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  border-radius: 14px;
  padding:10px 12px;
  color:#ffe8c2;
  font-size:12px;
  line-height:1.45;
}

.toast{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  width:min(520px, calc(100vw - 32px));
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(18,26,51,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:12px 12px;
  display:none;
}
.toast.show{ display:block; }
.toast .t{ margin:0; font-weight:950; font-size:13px; }
.toast .d{ margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }

.errorbar{
  display:none;
  margin-bottom:12px;
  border-radius: 16px;
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  padding:10px 12px;
  color:#ffd1d1;
  font-size:12px;
  white-space:pre-wrap;
}

@media (max-width: 1300px){
  .app{ grid-template-columns: 96px 1fr; }
  .brand .t,.brand .s,.label{ display:none; }
}
@media (max-width: 1050px){
  .previewRow{ grid-template-columns: 1fr; }
}



.compactSticky .tabs{
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.compactSticky .tab{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.compactSticky .tab.active{
  border-color: rgba(96,165,250,.35);
  background: rgba(96,165,250,.16);
}

/* Image-based preview backgrounds (no scaling, only crop) */
.mcScene,.dcScene{ position:relative; overflow:hidden; }
.mcBgImg,.dcBgImg{
  position:absolute;
  left:0; top:0;
  width:1400px;
  height:220px;
  object-fit:none; /* no scaling */
  image-rendering:auto;
  z-index:0;
}
.mcOverlay,.dcOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.58));
  z-index:1;
}
.mcPrev,.dcPrev{ position:relative; z-index:2; }

.mcInlinePrev, .dcInlinePrev{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.mcInlineLabel, .dcInlineLabel{
  opacity:.75;
  min-width:62px;
}
.mcInlineText{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space:pre-wrap;
  line-height:1.35;
}
.dcInlineText{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  white-space:pre-wrap;
  line-height:1.35;
}

.mcInlinePrev{background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));}

.rowBetween{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chk{display:flex; align-items:center; gap:8px; font-size:12px; opacity:.9}
.chk input{transform:translateY(1px);}

/* ============================
   Message blocks (Minecraft + Discord)
   Make each item clearly separated, with its own panel.
============================ */
.msgBlock{
  margin:18px 0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:
    0 18px 50px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.msgBlock > textarea{
  margin-top:8px;
}
.msgBlock .mcSceneSmall,
.msgBlock .dcSceneSmall{
  margin-top:12px;
}
.msgBlock .rowBetween > label{
  font-weight:800;
}

.mcSceneSmall, .dcSceneSmall{
  position:relative;
  width:100%;
  /* Discord embeds can be tall; let the preview grow */
  height:auto;
  min-height:140px;
  /* Keep previews clean + readable (avoid huge rounded card look) */
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  margin-top:10px;
}
.mcSceneSmall .bg, .dcSceneSmall .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; /* crop, don't resize */
  transform: scale(1.02);
}
.mcSceneSmall .shade, .dcSceneSmall .shade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.45));
}
.mcChatBar{
  position:absolute; left:12px; right:12px; bottom:10px;
  padding:10px 12px;
  border-radius:10px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
  max-height: calc(100% - 24px);
  overflow:auto;
}
.mcChatLine{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:14px;
  line-height:1.25;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mcChatLine + .mcChatLine{ margin-top:4px; }

.dcMsg{
  position:absolute; left:12px; right:12px; bottom:10px;
  display:flex; gap:10px; align-items:flex-start;
}
.dcMsg .avatar{
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='rgba(255,255,255,0.45)' d='M12 12a4.2 4.2 0 1 0-4.2-4.2A4.2 4.2 0 0 0 12 12Zm0 2c-4.2 0-7.6 2.1-7.6 4.6V20h15.2v-1.4c0-2.5-3.4-4.6-7.6-4.6Z'/></svg>");
}
.dcMsg .content{flex:1; min-width:0;}
.dcMsg .meta{display:flex; gap:10px; align-items:baseline;}
.dcMsg .name{font-weight:700; font-size:13px;}
.dcMsg .bot{
  font-size:10px;
  font-weight:900;
  padding:2px 6px;
  border-radius:4px;
  background:#5865F2;
  color:#fff;
  line-height:1;
  transform: translateY(-1px);
}
.dcMsg .time{opacity:.65; font-size:11px;}
.dcMsg .text{font-size:13px; line-height:1.25; margin-top:2px; white-space:pre-wrap; overflow:visible; opacity:.95;}

/* Make the Discord preview look like real Discord (no background image, message not pinned to bottom) */
.dcSceneSmall{
  background:#313338;
  border:none;
  border-radius:8px;
  overflow:visible;
}
.dcSceneSmall .bg{display:none;}
.dcSceneSmall .shade{display:none;}
.dcSceneSmall .dcMsg{
  position:relative;
  left:auto; right:auto; bottom:auto;
  margin:12px;
}

.dcSceneSmall .dcStream{
  padding:6px 0;
}

.dcSceneSmall .dcStream .dcMsg{
  margin:0;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dcSceneSmall .dcStream .dcMsg:last-child{
  border-bottom:none;
}

.dcMsg .embed{
  margin-top:8px;
  display:block;
}
/* Old bar/box elements are kept in HTML for compatibility, but hidden in the new card renderer */
.dcMsg .embed .bar{display:none;}
.dcMsg .embed .box{display:none;}

/* ============================
   Discord embed preview (based on embed.dan.onl / YAGPDB style)
============================ */
.dcEmbedCard{
  background:#2f3136;
  border-left:4px solid #00b0f4;
  border-radius:4px;
  display:grid;
  width:fit-content;
  max-width:520px;
  box-sizing:border-box;
}
.dcEmbedInner{
  overflow:hidden;
  padding:.5rem 1rem 1rem .75rem;
  display:inline-grid;
  grid-template-columns:auto;
  grid-template-rows:auto;
}
.dcEmbedAuthorRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.dcEmbedAuthorIcon{
  width:26px;
  height:26px;
  border-radius:50%;
  object-fit:cover;
}
.dcEmbedAuthorName{
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}
.dcEmbedAuthorName:hover{text-decoration:underline;}

.dcEmbedTitle{
  margin-top:8px;
  min-width:0;
  font-weight:700;
}
.dcEmbedTitle a{
  color:#00b0f4;
  text-decoration:none;
  font-weight:700;
}
.dcEmbedTitle a:hover{text-decoration:underline;}

.dcEmbedDesc{
  margin-top:8px;
  min-width:0;
  color:#dbdee1;
  font-size:14px;
  line-height:1.375rem;
  white-space:pre-line;
}

.dcEmbedTop{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:start;
}
.dcEmbedThumb{
  width:80px;
  height:80px;
  border-radius:3px;
  object-fit:contain;
  justify-self:end;
  margin-top:8px;
}

.dcEmbedFields{
  margin-top:8px;
  display:grid;
  gap:8px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.dcEmbedField{
  min-width:0;
  font-size:14px;
  line-height:1.125rem;
  font-weight:400;
}
.dcEmbedFieldName{
  color:#fff;
  font-weight:700;
  margin-bottom:.125rem;
}
.dcEmbedFieldValue{color:#dbdee1; white-space:pre-line;}

.dcEmbedImage{
  margin-top:16px;
  max-width:400px;
  max-height:300px;
  border-radius:4px;
  overflow:hidden;
}
.dcEmbedImage img{max-width:100%; max-height:100%; object-fit:contain; display:block;}

.dcEmbedFooter{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#b5bac1;
  font-size:12px;
  font-weight:500;
}
.dcEmbedFooterIcon{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:contain;
}

/* Larger icons in the inline embed renderer too */
.dcMsg .embed .eAuthorIcon{width:26px; height:26px;}
.dcMsg .embed .eFooterIcon{width:18px; height:18px;}

/* Markdown bits inside embed, aligned with the example */
.dcEmbedCard .dcMdCodeBlock{
  display:block;
  max-width:100%;
  background:#202225;
  border-radius:6px;
  margin-top:6px;
  padding:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  line-height:1.125rem;
  white-space:pre-wrap;
}
.dcEmbedCard .dcMdCode{
  padding:.2em;
  border-radius:3px;
  background:#202225;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}
.dcEmbedCard .dcMdLink{color:#00b0f4; text-decoration:none;}
.dcEmbedCard .dcMdLink:hover{text-decoration:underline;}
.dcEmbedCard .dcMdMention{
  background: rgba(95,100,242,.30);
  color:#dee0fc;
  border-radius:3px;
  padding:0 2px;
}
.dcMsg .embed .et{font-weight:800; font-size:12px; margin-bottom:4px;}
.dcMsg .embed .ed{font-size:12px; opacity:.9; white-space:pre-wrap; line-height:1.35;}
.dcMsg .embed .ea{display:flex; align-items:center; gap:8px; margin-bottom:6px; opacity:.95;}
.dcMsg .embed .ea .eai{width:18px; height:18px; border-radius:50%; object-fit:cover; display:none;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.10);}
.dcMsg .embed .ea .ean{color:#dfe6ff; font-weight:800; font-size:11px; text-decoration:none;}
.dcMsg .embed .ea .ean:hover{text-decoration:underline;}
.dcMsg .embed .eTop{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:start;}
.dcMsg .embed .ethumb{width:44px; height:44px; border-radius:8px; object-fit:cover; display:none;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.08);}
.dcMsg .embed .etLink{color:#dfe6ff; text-decoration:none;}
.dcMsg .embed .etLink:hover{text-decoration:underline;}
.dcMsg .embed .eimg{margin-top:8px; width:100%; max-height:120px; object-fit:cover; border-radius:10px; display:none;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);}
.dcMsg .embed .ef{display:flex; align-items:center; gap:8px; margin-top:8px; opacity:.85; font-size:11px;}
.dcMsg .embed .ef .efi{width:16px; height:16px; border-radius:4px; object-fit:cover; display:none;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.08);}
.dcMsg .embed .ef .eft{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}

/* New embed renderer (YAGPDB-like) */
.dcMsg .embed .eTop{display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:start;}
.dcMsg .embed .eMain{min-width:0;}
.dcMsg .embed .eAuthor{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.dcMsg .embed .eAuthorIcon{width:20px; height:20px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.08);}
.dcMsg .embed .eAuthorName{font-size:12px; font-weight:700; color:#f2f3f5; text-decoration:none;}
.dcMsg .embed a.eAuthorName:hover{text-decoration:underline;}

.dcMsg .embed .eTitle{font-size:13px; font-weight:800; margin-bottom:6px;}
.dcMsg .embed .eTitleLink{color:#00a8fc; text-decoration:none;}
.dcMsg .embed .eTitleLink:hover{text-decoration:underline;}

.dcMsg .embed .eDesc{font-size:12.5px; line-height:1.35; color:#dbdee1; white-space:pre-wrap;}

.dcMsg .embed .eFields{margin-top:10px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.dcMsg .embed .eField{min-width:0;}
.dcMsg .embed .eFieldName{font-size:12px; font-weight:800; margin-bottom:2px; color:#f2f3f5;}
.dcMsg .embed .eFieldValue{font-size:12px; line-height:1.3; color:#dbdee1; white-space:pre-wrap;}

.dcMsg .embed .eThumb{width:84px; height:84px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);}
.dcMsg .embed .eImage{margin-top:10px; width:100%; max-height:220px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);}

.dcMsg .embed .eFooter{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11px; color:#b5bac1;}
.dcMsg .embed .eFooterIcon{width:16px; height:16px; border-radius:4px; object-fit:cover; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.08);}
.dcMsg .embed .eFooterText{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}

/* New embed layout (YAGPDB-like) */
.dcMsg .embed .eTop{display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:start;}
.dcMsg .embed .eMain{min-width:0;}
.dcMsg .embed .eAuthor{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px;}
.dcMsg .embed .eAuthorIcon{width:20px; height:20px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08);}
.dcMsg .embed .eAuthorName{font-weight:800; color:#f2f3f5; text-decoration:none;}
.dcMsg .embed .eAuthorName:hover{text-decoration:underline;}
.dcMsg .embed .eTitle{font-weight:900; font-size:13px; margin-bottom:6px; line-height:1.2;}
.dcMsg .embed .eTitleLink{color:#00a8fc; text-decoration:none;}
.dcMsg .embed .eTitleLink:hover{text-decoration:underline;}
.dcMsg .embed .eDesc{font-size:12.5px; line-height:1.35; opacity:.95; white-space:pre-wrap;}
.dcMsg .embed .eFields{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px 14px; margin-top:10px;}
.dcMsg .embed .eField{min-width:0;}
.dcMsg .embed .eFieldName{font-weight:900; font-size:12px; margin-bottom:3px; color:#f2f3f5;}
.dcMsg .embed .eFieldValue{font-size:12.5px; line-height:1.35; opacity:.95; white-space:pre-wrap;}
.dcMsg .embed .eThumb{width:90px; height:90px; border-radius:8px; object-fit:cover; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08);}
.dcMsg .embed .eImage{margin-top:10px; width:100%; max-height:220px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);}
.dcMsg .embed .eFooter{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11.5px; opacity:.85;}
.dcMsg .embed .eFooterIcon{width:18px; height:18px; border-radius:4px; object-fit:cover; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08);}
.dcMsg .embed .eFooterText{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}

/* markdown inside embeds */
.dcMsg .embed .dcMdBold{font-weight:800;}
.dcMsg .embed .dcMdItalic{font-style:italic;}
.dcMsg .embed .dcMdUnderline{text-decoration:underline;}
.dcMsg .embed .dcMdStrike{text-decoration:line-through; opacity:.9;}
.dcMsg .embed .dcMdCode{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); padding:1px 4px; border-radius:6px; font-size:11px;}
.dcMsg .embed .dcMdCodeBlock{display:block; white-space:pre-wrap; margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); padding:8px 10px; border-radius:10px; font-size:11px;}
.dcMsg .embed .dcMdLink{color: #8AB4F8; text-decoration:underline;}
.dcMsg .embed .dcMdMention{background: rgba(88,101,242,.25); padding:0 4px; border-radius:4px;}


.dcMsg .text .dcMdBold{font-weight:800;}
.dcMsg .text .dcMdItalic{font-style:italic;}
.dcMsg .text .dcMdUnderline{text-decoration:underline;}
.dcMsg .text .dcMdStrike{text-decoration:line-through; opacity:.9;}
.dcMsg .text .dcMdCode{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10); padding:1px 4px; border-radius:6px; font-size:12px;}
.dcMsg .text .dcMdCodeBlock{display:block; white-space:pre-wrap; margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); padding:8px 10px; border-radius:10px; font-size:12px;}
.dcMsg .text .dcMdLink{color: #8AB4F8; text-decoration:underline;}
.dcMsg .text .dcMdMention{background: rgba(88,101,242,.25); padding:0 4px; border-radius:4px;}

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

/* Simple grids used by the Discord embed editor */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px;}

/* Make the embed editor look compact like the reference image */
#tab-discord .embedFields{padding:10px; border-radius:12px;}
#tab-discord .embedFields .field{margin:0;}
#tab-discord .embedFields label{font-size:12px; opacity:.9;}

/* Match the compact Discord-like embed editor layout from the reference image */
#tab-discord .embedFields{background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10);}
#tab-discord .embedFields .field input,
#tab-discord .embedFields .field textarea{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.10);
}

/* Hide embed color row (not part of the target UI) */
#tab-discord .field:has(> input[id^="dc_color_"]){
  display:none;
}

.consolePrev{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  white-space:pre-wrap;
  line-height:1.3;
  opacity:.95;
}

.btn.mini{padding:6px 10px; font-size:12px; border-radius:10px}
.fieldsList{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.fieldRow{
  display:grid;
  grid-template-columns: 1.2fr 2fr 90px 34px;
  gap:8px;
  align-items:start;
}
.fieldRow input, .fieldRow textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color:#fff;
  padding:8px 10px;
  font-family: inherit;
  font-size:12px;
}
.fieldRow textarea{min-height:46px; resize:vertical;}
.fieldRow .inlineChk{
  display:flex; align-items:center; gap:8px;
  font-size:12px; opacity:.9; padding-top:6px;
  white-space:nowrap;
}
.fieldRow .delBtn{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,0,0,.14);
  cursor:pointer;
  user-select:none;
}
.dcMsg .embed .fields{
  margin-top:8px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.dcMsg .embed .f{
  border-radius:8px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 8px;
  min-width:0;
}
.dcMsg .embed .fn{font-weight:800; font-size:11px; margin-bottom:2px;}
.dcMsg .embed .fv{font-size:11px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.dcMsg .embed .fields.inline{grid-template-columns:1fr 1fr;}
.dcMsg .embed .fields.stack{grid-template-columns:1fr;}

/* embed builder style */
#tab-discord .card, #tab-discord .field input, #tab-discord .field textarea{
  background: rgba(255,255,255,.04);
}


/* Grey-out blocks when disabled */
.msgBlock.isDisabled{
  opacity:.45;
  filter: grayscale(.35);
}
.msgBlock.isDisabled textarea,
.msgBlock.isDisabled input[type="text"],
.msgBlock.isDisabled input[type="url"],
.msgBlock.isDisabled input[type="number"]{
  opacity:.85;
}

/* When Discord Embed is enabled, the normal chat textarea is intentionally disabled */
.msgBlock.embedMode textarea{
  opacity:.35;
  filter: grayscale(.25) saturate(.7);
  cursor: not-allowed;
}
.tab.tabDisabled{
  opacity:.45;
  filter: grayscale(.35);
  cursor:not-allowed;
}
.sectionDisabled{
  opacity:.45;
  filter: grayscale(.35);
}


/* Quick Tests (Logs) */
.quickTests{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.quickTestRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.20); }
.quickTestRow .label{ font-weight:700; }
.quickTestRow .meta{ opacity:.75; font-size:12px; }

/* Logs: live feed */
.liveLogFeed{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  border-radius: 12px;
  overflow:auto;
  max-height: 260px;
  padding: 10px;
}
.consoleShell{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow3);
}
.consoleHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  /* border-bottom:1px solid rgba(255,255,255,.08); */
  margin-bottom:12px;
}
.consoleComposer{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,.22);
  margin-bottom:14px;
}
.consoleRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:10px;
}
.consoleRow:last-child{ margin-bottom:0; }
.consoleRowMessage{
  grid-template-columns: 1fr auto;
  align-items:end;
}
.consoleComposer textarea{
  min-height:80px;
  resize:vertical;
}
@media (max-width: 980px){
  .consoleRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consoleRowMessage{ grid-template-columns: 1fr; }
  .consoleRowMessage .btn{ width:100%; }
}
.consoleBody{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:14px;
}
.consoleBody.single{ grid-template-columns: 1fr; }
.consoleSection{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.consoleFeed{
  min-height:280px;
  max-height:420px;
  overflow:auto;
  padding:12px;
}
.consoleFeed .mcText,
.consoleFeed .dcContent,
.consoleFeed .dcMsg{ margin-bottom:8px; }
.consoleFeed .mcSceneSmall,
.consoleFeed .dcSceneSmall{ margin-bottom:12px; }
.consoleFeed .dcMsg:last-child,
.consoleFeed .mcText:last-child,
.consoleFeed .dcContent:last-child,
.consoleFeed .mcSceneSmall:last-child,
.consoleFeed .dcSceneSmall:last-child{ margin-bottom:0; }
@media (max-width: 980px){
  .consoleBody{ grid-template-columns: 1fr; }
}
.liveLogRow{
  display:flex;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  margin-bottom:8px;
}
.liveLogRow:last-child{ margin-bottom:0; }
.liveLogTag{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  opacity:.85;
  white-space:nowrap;
  height:fit-content;
}
.liveLogBody{ flex:1; min-width:0; }
.liveLogBody .mcText{ white-space:pre-wrap; }
.liveLogBody .dcText{ white-space:pre-wrap; }


/* Logs segmented buttons */
.seg{display:flex; gap:0; border:1px solid rgba(255,255,255,.10); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.22);}
.segBtn{padding:8px 12px; background:transparent; border:0; color:rgba(255,255,255,.78); cursor:pointer; font-weight:600;}
.segBtn[data-active="1"]{background:rgba(88,101,242,.22); color:#fff;}
.segBtn:hover{background:rgba(255,255,255,.06);}


/* ---- LuckPerms-like sizing + components ---- */
.nav a{ padding:12px 12px; border-radius:14px; }
.nav a .icon{ font-size:36px; width:68px; height:68px; border-radius:24px; }
.nav a .label{ font-size:15.5px; letter-spacing:.2px; }
.badge{ font-size:13px; padding:4px 10px; border-radius:999px; }
.side-footer{ font-size:7px; opacity:.9; }

.main{ padding:18px 18px 22px; }
.page{ max-width: 18000px; }

.card, .panel, .box{
  background: rgba(22,28,43,.85);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow3);
}
input[type="text"], input[type="search"], select, textarea{
  font-size:15.5px;
  padding:10px 12px;
  border-radius:14px;
}
button{
  font-size:15px;
  padding:10px 12px;
  border-radius:14px;
}
h1{ font-size:28px; letter-spacing:.2px; }
h2{ font-size:20px; }
.muted{ color: var(--muted); }

/* Permissions editor layout */
.lp-wrap{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:16px;
  align-items:start;
}
.lp-side, .lp-main{
  background: rgba(22,28,43,.85);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow3);
  overflow:hidden;
}
.lp-side .hd, .lp-main .hd{
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: rgba(17,21,37,.65);
}
.lp-side .bd{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.lp-list{ display:flex; flex-direction:column; gap:8px; }
.lp-item{
  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(11,13,17,.35);
  cursor:pointer;
}
.lp-item:hover{ border-color: rgba(139,92,246,.35); box-shadow: 0 0 0 4px rgba(139,92,246,.10); }
.lp-item.active{ border-color: rgba(139,92,246,.55); box-shadow: 0 0 0 4px rgba(139,92,246,.14); }
.lp-item .name{ font-weight:750; }
.lp-item .tag{ font-size:12px; color: var(--muted); }

.lp-main .bd{ padding:14px; display:flex; flex-direction:column; gap:12px; }

.lp-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.lp-toolbar .left, .lp-toolbar .right{ display:flex; gap:10px; align-items:center; }

.lp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
}
.lp-table th, .lp-table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14.5px;
}
.lp-table th{
  text-align:left;
  background: rgba(17,21,37,.65);
  color: var(--muted);
  font-weight:800;
}
.lp-table tr:last-child td{ border-bottom:none; }
.pill{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,13,17,.35);
  color: var(--muted);
}
.pill.allow{ border-color: rgba(34,197,94,.35); color: #bdf7cf; }
.pill.deny{ border-color: rgba(239,68,68,.35); color: #ffc2c2; }
.btn-primary{
  background: linear-gradient(180deg, rgba(139,92,246,.95), rgba(124,58,237,.92));
  border:1px solid rgba(139,92,246,.55);
}
.btn-primary:hover{ box-shadow: 0 0 0 4px rgba(139,92,246,.18); }
.btn-ghost{
  background: rgba(11,13,17,.35);
  border:1px solid rgba(255,255,255,.10);
}
@media (max-width: 1100px){
  .app{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "top" "main"; }
  .sidebar{ display:none; }
  .lp-wrap{ grid-template-columns: 1fr; }
}

/* === LuckPerms-ish layout tweaks === */
.topbar{
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  height: 64px;
  color: var(--text);
}
.sidebar{
  background: var(--sidebar-bg);  /* was hardcoded gradient */
  border-right: 1px solid var(--line);
  color: var(--text);
}
.nav a{ padding:10px 10px; border-radius: 12px; }
.nav a:hover{ box-shadow: var(--focus); border-color: rgba(178,210,53,.28); }
.nav a.active, .nav a[aria-current="page"]{
  background: rgba(178,210,53,.12);
  border: 1px solid rgba(178,210,53,.28);
}
.badge{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}
.btn-primary{
  background: linear-gradient(180deg, rgba(178,210,53,.95), rgba(140,170,34,.92));
  border:1px solid rgba(178,210,53,.50);
  color:#0b0d11;
  font-weight:800;
}
.btn-primary:hover{ box-shadow: var(--focus); }
.btn-ghost{ background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10); }
.card{
  background: rgba(45,51,64,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}
.lpShell{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.12);
}
.lpNav{
  background: rgba(0,0,0,.22);
  border-right:1px solid rgba(255,255,255,.10);
  padding: 10px;
}
.lpNav .sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--muted);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  margin: 8px 6px;
}
.lpNav .list{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
.lpRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 9px 10px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.lpRow:hover{ box-shadow: var(--focus); border-color: rgba(178,210,53,.28); }
.lpRow.active{ background: rgba(178,210,53,.14); border-color: rgba(178,210,53,.35); }
.lpRow .name{ font-weight:900; }
.lpRow .sub{ font-size:12px; color: var(--muted); margin-top:2px; }
.lpMain{
  padding: 12px;
  background: linear-gradient(180deg, rgba(45,51,64,.55), rgba(28,31,38,.55));
}
.lpHeader{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.lpHeader .title{ font-size:20px; font-weight:950; }
.lpHeader .meta{ color: var(--muted); font-size:13px; margin-top:4px; }
.lpHeader .kv{ display:flex; gap:16px; color: var(--muted); font-size:13px; align-items:center; flex-wrap:wrap; }
.kv b{ color: var(--text); }
.lpTable{
  width: 100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.lpTable th, .lpTable td{
  padding: 10px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size: 15.5px;
}
.lpTable th{
  color: var(--muted);
  font-weight:900;
  background: rgba(0,0,0,.22);
}
.lpTable tr:last-child td{ border-bottom:none; }
.valPill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 54px; padding: 3px 10px;
  border-radius: 8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  font-weight:900; font-size: 12px;
}
.valPill.true{ border-color: rgba(34,197,94,.40); color: #bdf7cf; }
.valPill.false{ border-color: rgba(239,68,68,.40); color: #ffc2c2; }
.lpBottomBar{
  display:grid;
  grid-template-columns: .9fr .7fr 1.6fr .7fr .7fr .9fr 60px;
  gap:10px;
  align-items:center;
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.lpBottomBar input, .lpBottomBar select{ width:100%; }

/* === Themed modal + toast (site-wide utility) === */
.hgnOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.62);
  display:none; align-items:center; justify-content:center;
  padding: 18px; z-index: 9999;
}
.hgnModal{
  width: min(760px, 100%);
  border-radius: 14px;
  background: rgba(45,51,64,.98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hgnModal .hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.24);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hgnModal .hd .t{ font-weight:950; font-size:18px; }
.hgnModal .bd{ padding: 14px; display:flex; flex-direction:column; gap:12px; }
.hgnModal .ft{
  display:flex; justify-content:flex-end; gap:10px;
  padding: 12px 14px;
  background: rgba(0,0,0,.20);
  border-top: 1px solid rgba(255,255,255,.10);
}
.hgnToastWrap{
  position:fixed; right:16px; bottom:16px; z-index: 10000;
  display:flex; flex-direction:column; gap:10px;
}
.hgnToast{
  min-width: 280px;
  max-width: 420px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(45,51,64,.98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow3);
}
.hgnToast .t{ font-weight:950; margin-bottom:4px; }
.hgnToast.ok{ border-color: rgba(34,197,94,.35); }
.hgnToast.warn{ border-color: rgba(245,158,11,.35); }
.hgnToast.bad{ border-color: rgba(239,68,68,.35); }

/* better inputs */
input[type="text"], input[type="search"], select, textarea{
  background: rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
}
input::placeholder, textarea::placeholder{ color: rgba(174,182,198,.72); }
input:focus, select:focus, textarea:focus{
  outline:none; box-shadow: var(--focus); border-color: rgba(178,210,53,.35);
}

/* Plugin filter UI */
.lpPermsBar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
}
.lpPermsBar .left{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width: 320px;
}
.lpPluginList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lpPluginChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  font-size: 13px;
  color: var(--text);
}
.lpPluginChip .count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  font-weight:900;
  font-size: 12px;
}
.lpPluginChip.active{
  background: rgba(178,210,53,.14);
  border-color: rgba(178,210,53,.35);
  box-shadow: var(--focus);
}
.lpBottomBar{
  grid-template-columns: .6fr 1.4fr .6fr .7fr 60px;
}

/* Permission browser modal */
.permBrowserGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.permBrowserRow{
  display:grid;
  grid-template-columns: 1.3fr .6fr .8fr .9fr 52px;
  gap:10px;
  align-items:center;
  padding: 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.permBrowserRow .node{ font-weight:950; }
.permBrowserRow .muted{ font-size:13px; }
.ctxBtnSmall{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-weight:900;
}
.ctxBtnSmall:hover{ box-shadow: var(--focus); border-color: rgba(178,210,53,.28); }

/* Server selection screen (no popup) */
#serverSelectScreen{
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.78));
  display:none;
  align-items:stretch;
  justify-content:center;
  padding: 18px;
  z-index: 9998;
}
#serverSelectScreen .modal{
  width: min(980px, 100%);
  height: min(760px, 100%);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(45,51,64,.98);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
#serverSelectScreen .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px 14px;
  background: rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.10);
}
#serverSelectScreen .modal-body{ padding: 14px; overflow:auto; }
.serverHeadRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 12px;
}

/* v7 spacing */
/* :root{
  --text: rgba(240,245,255,.96);
} */
body{ font-size: 15.5px; }
.card{ border-radius: 18px; }
.lpHeader{ padding: 18px; }
.lpKeyBar{ padding: 14px 16px; }
.lpPermsBar{ padding: 14px 16px; gap: 14px; }
.lpPluginChip{ padding: 10px 12px; border-radius: 16px; font-size: 14px; }
.lpPluginChip .count{ min-width: 22px; height: 22px; border-radius: 11px; }
input, select, button{ font-size: 15px; }
input, select{ padding: 12px 12px; border-radius: 14px; }
table.lpTable td, table.lpTable th{ padding: 16px 12px; font-size: 15px; }
.valPill{ padding: 8px 12px; border-radius: 12px; font-size: 14px; }
.btn-primary, .btn-ghost{ padding: 12px 14px; border-radius: 14px; }


.placeholdersStrip {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.placeholdersStrip .title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted2);
  margin-bottom: 8px;
}

.phInline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phInline .chip {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.phInline .chip:hover {
  border-color: rgba(96,165,250,0.4);
  background: rgba(96,165,250,0.10);
  color: #60a5fa;
  transform: translateY(-1px);
}

.phInline .chip.copied {
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.10);
  color: #22c55e;
}


/* ---------------------------------MEMBERS TAB----------------------------------- */

        .mbPage { max-width:1400px; padding:0; animation: hgnFadeUp 0.38s ease both; }

        /* Top stats */
        .mbTopBar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; animation:hgnFadeUp 0.35s ease both; }
        .mbTopStat { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel); flex:1; min-width:140px; transition:border-color 0.18s,transform 0.18s; }
        .mbTopStat:hover { border-color:rgba(96,165,250,0.3); transform:translateY(-1px); }
        .mbTopStatIcon { font-size:20px; }
        .mbTopStatVal  { font-size:20px; font-weight:900; color:var(--text); line-height:1; }
        .mbTopStatLabel{ font-size:11px; color:var(--muted2); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }

        /* Server selector */
        .mbServerSelectorWrap { margin-bottom:12px; }
        .mbServerSelectorLabel { font-size:11px; font-weight:800; color:var(--muted2); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
        .mbServerSelector { display:flex; gap:4px; flex-wrap:wrap; }
        .mbServerBtn { padding:7px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; transition:all 0.13s; white-space:nowrap; }
        .mbServerBtn:hover { background:var(--nav-hover-bg); color:var(--text); }
        .mbServerBtn.active { background:rgba(96,165,250,0.16); border-color:rgba(96,165,250,0.35); color:#2563eb; }

        /* Controls */
        .mbControls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
        .mbSearchWrap { position:relative; flex:1; min-width:180px; }
        .mbSearchIcon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none; }
        .mbSearch { width:100%; padding:9px 12px 9px 32px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:13px; outline:none; transition:border-color 0.15s; }
        .mbSearch:focus { border-color:rgba(96,165,250,0.45); }
        .mbSearch::placeholder { color:var(--muted2); }
        .mbFilterGroup { display:flex; gap:4px; }
        .mbFilterBtn { padding:8px 13px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; transition:all 0.13s; white-space:nowrap; }
        .mbFilterBtn:hover { background:var(--nav-hover-bg); color:var(--text); }
        .mbFilterBtn.active { background:rgba(96,165,250,0.16); border-color:rgba(96,165,250,0.35); color:#2563eb; }
        .mbFilterBtn.online.active  { background:rgba(34,197,94,0.14); border-color:rgba(34,197,94,0.35); color:#16a34a; }
        .mbFilterBtn.offline.active { background:rgba(156,163,175,0.14); border-color:rgba(156,163,175,0.35); color:var(--muted); }
        .mbSortSelect { padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; outline:none; transition:border-color 0.15s; color-scheme:dark; }
        .mbSortSelect:focus { border-color:rgba(96,165,250,0.45); }
        .mbSortSelect option { background:var(--panel); color:var(--text); }
        .light .mbSortSelect { color-scheme:light; }

        /* List */
        .mbList { border-radius:14px; border:1px solid var(--line); background:var(--panel); overflow:hidden; animation:hgnScaleIn 0.32s ease both; }
        .mbListHead { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
        .mbListTitle { font-size:13px; font-weight:900; color:var(--text); display:flex; align-items:center; gap:7px; }
        .mbListTitle::before { content:''; display:inline-block; width:3px; height:13px; border-radius:2px; background:rgba(96,165,250,0.7); }
        .mbListScroll { overflow-y:auto; max-height:72vh; }
        .mbListSectionLabel { font-size:10px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted2); padding:8px 14px 6px; border-bottom:1px solid var(--line); background:var(--panel2); }

        /* Member row */
        .mbRow { display:flex; align-items:center; gap:12px; padding:5px 14px; cursor:pointer; border-bottom:1px solid var(--line); transition:background 0.13s; animation:hgnFadeUp 0.28s ease both; }
        .mbRow:last-child { border-bottom:none; }
        .mbRow:hover { background:var(--nav-hover-bg); }
        .mbRow.selected { background:rgba(96,165,250,0.10); border-left:3px solid rgba(96,165,250,0.6); }
        .mbRowSkin { width:36px; height:36px; border-radius:8px; border:1px solid var(--line); flex-shrink:0; background:var(--panel2); overflow:hidden; }
        .mbRowSkin img { width:100%; height:100%; display:block; }
        .mbRowInfo  { flex:1; min-width:0; }
        .mbRowName  { font-size:13px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mbRowMeta  { font-size:11px; color:var(--muted2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mbRowRight { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
        .mbRowRank  { font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; border:1px solid; }
        .mbRowStatus { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--muted2); }
        .mbRowDot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

        /* Full overlay */
         .mbFullOverlay {
          position: fixed !important;
          inset: 0 !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          z-index: 9999 !important;
          background: var(--bg);
          display: flex;
          align-items: stretch;
          justify-content: center;
          padding: 0;
          animation: hgnFadeIn 0.2s ease both;
        }
        .mbFullPanel {
            width:100%; max-width:100%; height:100vh;
            border-radius:0; border:none;
            background:var(--panel); overflow:hidden;
            display:flex; flex-direction:column;
            animation:hgnScaleIn 0.25s ease both;
            box-shadow:none;
          }

        /* Detail hero */
        .mbDetailHero { position:relative; padding:0; overflow:hidden; }
        .mbDetailHeroBg { position:absolute; inset:0; background: radial-gradient(800px 300px at 80% -10%,rgba(59,130,246,0.20),transparent 60%), radial-gradient(500px 200px at 5% 110%,rgba(16,185,129,0.14),transparent 60%), var(--panel2); z-index:0; }
        .mbDetailClose { position:absolute; top:12px; right:12px; z-index:10; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:12px; cursor:pointer; display:grid; place-items:center; transition:background 0.13s,color 0.13s; padding:0; }
        .mbDetailClose:hover { background:rgba(239,68,68,0.15); color:#ef4444; border-color:rgba(239,68,68,0.3); }
        .mbDetailHeroContent { position:relative; z-index:1; display:flex; align-items:flex-start; gap:16px; padding:20px 18px 14px; }
        .mbDetailSkinWrap { position:relative; flex-shrink:0; }
        .mbDetailSkin { width:64px; height:64px; border-radius:12px; border:2px solid var(--line); image-rendering:pixelated; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
        .mbDetailOnlineDot { position:absolute; bottom:-3px; right:-3px; width:14px; height:14px; border-radius:50%; border:2px solid var(--panel2); }
        .mbDetailOnlineDot.online  { background:#22c55e; }
        .mbDetailOnlineDot.offline { background:#9ca3af; }
        .mbDetailHeroInfo { flex:1; min-width:0; }
        .mbDetailName { font-size:20px; font-weight:950; color:var(--text); letter-spacing:0.2px; }
        .mbDetailUUID { font-size:10px; color:var(--muted2); font-family:ui-monospace,monospace; margin-top:2px; word-break:break-all; }
        .mbDetailBadges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
        .mbRankBadge { font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; border:1px solid; }
        .mbStatusPill { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }
        .mbStatusPill.online  { background:rgba(34,197,94,0.12);  border:1px solid rgba(34,197,94,0.3);  color:#16a34a; }
        .mbStatusPill.offline { background:rgba(156,163,175,0.12);border:1px solid rgba(156,163,175,0.3);color:var(--muted); }
        .mbPingPill { font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--nav-bg); border:1px solid var(--line); }
        .mbAfkPill { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); color:#d97706; }
        .mbServerFilterPill { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(96,165,250,0.12); border:1px solid rgba(96,165,250,0.3); color:#60a5fa; }

        /* Detail tabs */
        .mbDetailTabs { display:flex; gap:2px; flex-wrap:wrap; padding:0 14px 0; border-top:1px solid var(--line); background:var(--panel2); position:relative; z-index:1; }
        .mbDetailTab { padding:10px 13px; border-radius:0; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--muted2); font-size:12px; font-weight:700; cursor:pointer; transition:all 0.13s; white-space:nowrap; }
        .mbDetailTab:hover  { color:var(--text); }
        .mbDetailTab.active { color:#2563eb; border-bottom-color:#2563eb; }

        /* Detail body */
        .mbDetailBody { padding:16px; overflow-y:auto; flex:1; min-height:0; }
        .mbDetailGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
        @media (max-width:600px) { .mbDetailGrid { grid-template-columns:1fr; } }

        /* Sections */
        .mbSection { border-radius:10px; border:1px solid var(--line); background:var(--panel2); padding:12px 14px; }
        .mbSectionCustom { border-color:rgba(96,165,250,0.3); background:rgba(96,165,250,0.05); }
        .mbSectionTitle { font-size:10px; font-weight:900; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line); }

        /* Info rows */
        .mbInfoRow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; }
        .mbInfoRow:last-child { border-bottom:none; }
        .mbInfoKey { color:var(--muted); font-weight:600; flex-shrink:0; }
        .mbInfoVal { color:var(--text); font-weight:700; text-align:right; word-break:break-all; }
        .mbInfoVal.mono { font-family:ui-monospace,monospace; font-size:10px; }

        /* Rank rows */
        .mbRankRow { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); font-size:13px; }
        .mbRankServer { color:var(--muted); font-weight:700; }

        /* Punishments */
        .mbPunishRow { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); flex-wrap:wrap; }
        .mbPunishType    { font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; border:1px solid; }
        .mbPunishReason  { font-size:12px; color:var(--text); font-weight:600; flex:1; }
        .mbPunishMeta    { font-size:11px; color:var(--muted2); }
        .mbPunishExpired { font-size:10px; color:var(--muted2); background:var(--nav-bg); border:1px solid var(--line); padding:1px 6px; border-radius:999px; }

        /* Discord */
        .mbDiscordRankRow { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--text); }
        .mbDiscordRankRow:last-child { border-bottom:none; }
        .mbDiscordRankDot { width:6px; height:6px; border-radius:50%; background:#5865F2; flex-shrink:0; }

        /* Not linked */
        .mbNotLinked { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:48px 24px; text-align:center; }
        .mbNotLinkedIcon  { font-size:40px; opacity:0.4; }
        .mbNotLinkedTitle { font-size:16px; font-weight:800; color:var(--muted); }
        .mbNotLinkedSub   { font-size:13px; color:var(--muted2); }

        /* Donations */
        .mbDonateTotal { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:12px; border:1px solid rgba(34,197,94,0.25); background:rgba(34,197,94,0.08); margin-bottom:6px; }
        .mbDonateTotalLabel { font-size:12px; font-weight:700; color:var(--muted); }
        .mbDonateTotalValue { font-size:22px; font-weight:950; color:#16a34a; }
        .mbDonateRow { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); }
        .mbDonateDate   { font-size:11px; color:var(--muted2); font-family:ui-monospace,monospace; flex-shrink:0; }
        .mbDonateItem   { font-size:13px; color:var(--text); font-weight:700; flex:1; }
        .mbDonateAmount { font-size:13px; font-weight:900; color:#16a34a; }

        /* Tooltip */
        .mbTooltip {
          position:absolute; bottom:calc(100% + 6px); left:50%;
          transform:translateX(-50%);
          background:var(--panel2); border:1px solid var(--line);
          color:var(--text); font-size:11px; font-weight:600;
          padding:5px 9px; border-radius:8px; white-space:nowrap;
          box-shadow:0 4px 16px rgba(0,0,0,0.25); z-index:9999; pointer-events:none;
        }
        .mbTooltip::after {
          content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
          border:5px solid transparent; border-top-color:var(--line);
        }

        /* Misc */
        .mbMuted { font-size:13px; color:var(--muted2); padding:12px 4px; }
        .mbEmpty { display:flex; flex-direction:column; align-items:center; padding:48px 24px; gap:10px; text-align:center; }
        .mbEmptyIcon { font-size:36px; opacity:0.3; }
        .mbEmptyText { font-size:14px; color:var(--muted2); font-weight:600; }

        /* Light mode */
        .light .mbDetailTab.active { color:#1d4ed8; border-bottom-color:#1d4ed8; }
        .light .mbFilterBtn.active { color:#1d4ed8; }
        .light .mbFilterBtn.online.active  { color:#15803d; }
        .light .mbFilterBtn.offline.active { color:#555; }
        .light .mbServerBtn.active { color:#1d4ed8; }
        .light .mbDonateTotalValue { color:#15803d; }
        .light .mbDonateAmount     { color:#15803d; }
        .light .mbStatusPill.online { color:#15803d; }
        .light .mbFullOverlay { background:rgba(0,0,0,0.35); }


        /* ════════════════════════════════════════
           SERVER PAGE — full dark + light styles
        ════════════════════════════════════════ */

        .srvPage {
          max-width: 1400px;
          padding: 0;
          animation: hgnFadeUp 0.38s ease both;
        }

        /* ── Hero ── */
        .srvHero {
          position: relative;
          border-radius: 18px;
          overflow: visible;
          padding: 28px 28px 24px;
          margin-bottom: 20px;
          border: 1px solid rgba(255,255,255,0.08);
          background:
            radial-gradient(900px 400px at 80% -20%, rgba(59,130,246,0.18), transparent 60%),
            radial-gradient(600px 300px at 10% 110%, rgba(16,185,129,0.12), transparent 60%),
            linear-gradient(180deg, rgba(22,28,43,0.95), rgba(14,18,28,0.98));
          animation: hgnFadeUp 0.42s ease both;
        }
        .srvHero::before {
          content: '';
          position: absolute;
          inset: 0;
          background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
          pointer-events: none;
        }
        .srvHeroTop {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16px;
          flex-wrap: wrap;
          position: relative;
          z-index: 1;
        }
        .srvHeroLeft  { display: flex; align-items: center; gap: 16px; }
        .srvServerIcon {
          width: 56px; height: 56px;
          border-radius: 14px;
          background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(16,185,129,0.2));
          border: 1px solid rgba(255,255,255,0.12);
          display: grid; place-items: center;
          font-size: 26px;
          box-shadow: 0 8px 24px rgba(0,0,0,0.3);
          flex-shrink: 0;
        }
        .srvHeroName {
          font-size: 22px; font-weight: 950;
          letter-spacing: 0.2px;
          color: #fff; margin: 0;
        }
        .srvHeroMeta {
          display: flex; flex-wrap: wrap;
          gap: 8px; margin-top: 6px; align-items: center;
        }
        .srvStatusBadge {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 4px 10px; border-radius: 999px;
          font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
        }
        .srvStatusBadge.online  { background: rgba(34,197,94,0.14);  border: 1px solid rgba(34,197,94,0.35);  color: #16a34a; }
        .srvStatusBadge.offline { background: rgba(239,68,68,0.14);  border: 1px solid rgba(239,68,68,0.35);  color: #dc2626; }
        .srvStatusDot {
          width: 7px; height: 7px; border-radius: 50%;
          background: currentColor;
          animation: srvPulse 2s ease infinite;
        }
        @keyframes srvPulse {
          0%,100% { opacity:1; }
          50%      { opacity:0.6; }
        }
        .srvMetaPill {
          display: inline-flex; align-items: center; gap: 4px;
          padding: 3px 9px; border-radius: 999px;
          border: 1px solid var(--line); background: var(--nav-bg);
          font-size: 11px; color: var(--muted); font-weight: 600;
        }
        .srvHeroRight {
          display: flex; flex-direction: column;
          align-items: flex-end; gap: 8px;
        }
        .srvPlayerCount {
          font-size: 28px; font-weight: 1000;
          color: var(--text); line-height: 1;
        }
        .srvPlayerCount span {
          font-size: 14px; font-weight: 600;
          color: var(--muted); margin-left: 4px;
        }
        .srvHeroIPRow {
          display: flex; flex-wrap: wrap; gap: 10px;
          margin-top: 14px; padding-top: 14px;
          border-top: 1px solid rgba(255,255,255,0.07);
          position: relative; z-index: 50;
          align-items: flex-end;
        }
        .srvIPGroup { display: flex; flex-direction: column; gap: 4px; }
        .srvIPLabel {
          font-size: 10px; font-weight: 800;
          letter-spacing: 0.4px; text-transform: uppercase;
          color: rgba(255,255,255,0.4);
        }
        .srvIPChip {
          display: flex; align-items: center; gap: 8px;
          padding: 7px 12px; border-radius: 10px;
          border: 1px solid rgba(255,255,255,0.1);
          background: rgba(0,0,0,0.22);
          font-size: 12px; font-family: ui-monospace,monospace;
          color: rgba(255,255,255,0.8);
          cursor: pointer;
          transition: border-color 0.15s, background 0.15s;
        }
        .srvIPChip:hover {
          border-color: rgba(96,165,250,0.4);
          background: rgba(96,165,250,0.08);
          color: #fff;
        }
        .srvWorldsGroup { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

        /* ── TPS badge ── */
        .srvTpsBadge {
          display: inline-flex; align-items: center; gap: 4px;
          padding: 3px 9px; border-radius: 999px;
          font-size: 12px; font-weight: 900;
        }
        .srvTpsBadge.good { background:rgba(34,197,94,0.14);   border:1px solid rgba(34,197,94,0.3);  color:#16a34a; }
        .srvTpsBadge.warn { background:rgba(245,158,11,0.14);  border:1px solid rgba(245,158,11,0.3); color:#d97706; }
        .srvTpsBadge.bad  { background:rgba(239,68,68,0.14);   border:1px solid rgba(239,68,68,0.3);  color:#dc2626; }

        /* ── Tabs ── */
        .srvTabs {
          position: relative;
          z-index: -1;
          display: flex; gap: 6px; flex-wrap: wrap;
          margin-bottom: 18px; padding: 6px;
          border-radius: 14px;
          border: 1px solid var(--line);
          background: var(--nav-bg);
          animation: hgnFadeIn 0.35s ease both;
          animation-delay: 0.1s;
        }
        .srvTab {
          padding: 8px 16px; border-radius: 10px;
          border: 1px solid transparent; background: transparent;
          color: var(--muted); font-size: 13px; font-weight: 700;
          cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
        }
        .srvTab:hover { background: var(--nav-hover-bg); color: var(--text); }
        .srvTab.active {
          background: rgba(96,165,250,0.16);
          border-color: rgba(96,165,250,0.35);
          color: #2563eb;
        }

        /* ── Grids ── */
        .srvGrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .srvGrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
        .srvGrid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
        @media (max-width:1100px) { .srvGrid4 { grid-template-columns: repeat(2,1fr); } }
        @media (max-width:800px)  { .srvGrid2,.srvGrid3,.srvGrid4 { grid-template-columns: 1fr; } }

        /* ── Panel ── */
        .srvPanel {
          border-radius: 14px;
          border: 1px solid var(--line);
          background: var(--panel);
          overflow: hidden;
          animation: hgnScaleIn 0.32s ease both;
        }
        .srvPanelHead {
          display: flex; align-items: center;
          justify-content: space-between; gap: 10px;
          padding: 12px 14px;
          border-bottom: 1px solid var(--line);
          background: var(--panel2);
        }
        .srvPanelTitle {
          font-size: 13px; font-weight: 900;
          color: var(--text);
          display: flex; align-items: center; gap: 7px;
        }
        .srvPanelTitle::before {
          content: ''; display: inline-block;
          width: 3px; height: 13px; border-radius: 2px;
          background: rgba(96,165,250,0.7);
        }
        .srvPanelBody { padding: 14px; }

        /* ── Stat cards ── */
        .srvStatCard {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 14px; border-radius: 12px;
          border: 1px solid var(--line);
          background: var(--panel);
          animation: hgnFadeUp 0.32s ease both;
          transition: border-color 0.18s, background 0.18s, transform 0.18s;
          z-index: -1;
        }
        .srvStatCard:hover {
          border-color: rgba(96,165,250,0.3);
          background: var(--panel2);
          transform: translateY(-1px);
        }
        .srvStatIcon {
          width: 38px; height: 38px; border-radius: 10px;
          display: grid; place-items: center;
          font-size: 18px; flex-shrink: 0;
        }
        .srvStatBody  { min-width: 0; }
        .srvStatLabel {
          font-size: 11px; font-weight: 700;
          letter-spacing: 0.4px; text-transform: uppercase;
          color: var(--muted2); margin-bottom: 2px;
        }
        .srvStatValue { font-size: 16px; font-weight: 900; line-height: 1.2; }
        .srvStatSub   { font-size: 11px; color: var(--muted2); margin-top: 2px; }

        /* ── Info rows ── */
        .srvInfoRow {
          display: flex; align-items: center;
          justify-content: space-between; gap: 10px;
          padding: 9px 0;
          border-bottom: 1px solid var(--line);
          font-size: 13px;
        }
        .srvInfoRow:last-child { border-bottom: none; }
        .srvInfoKey { color: var(--muted); font-weight: 600; flex-shrink: 0; }
        .srvInfoVal { color: var(--text); font-weight: 700; text-align: right; word-break: break-all; }

        /* ── Player rows ── */
        .srvPlayerRow {
          display: flex; align-items: center; gap: 10px;
          padding: 9px 10px; border-radius: 10px;
          cursor: pointer; transition: background 0.14s; font-size: 13px;
        }
        .srvPlayerRow:hover { background: var(--nav-hover-bg); }
        .srvPlayerAvatar {
          width: 30px; height: 30px; border-radius: 8px;
          background: linear-gradient(135deg,rgba(96,165,250,0.2),rgba(16,185,129,0.15));
          border: 1px solid var(--line);
          display: grid; place-items: center;
          font-size: 14px; flex-shrink: 0;
        }
        .srvPlayerName { font-weight: 800; flex: 1; color: var(--text); }
        .srvOnlineDot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .srvRankBadge  {
          font-size: 10px; font-weight: 800;
          padding: 2px 8px; border-radius: 999px; border: 1px solid; opacity: 0.9;
        }

        /* ── Plugin rows ── */
        .srvPluginRow {
          display: flex; align-items: center; gap: 10px;
          padding: 9px 10px; border-radius: 10px;
          cursor: pointer; border: 1px solid transparent;
          transition: background 0.14s, border-color 0.14s; font-size: 13px;
        }
        .srvPluginRow:hover { background: var(--nav-hover-bg); border-color: var(--line); }
        .srvPluginIcon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
        .srvPluginName    { font-weight: 800; flex: 1; color: var(--text); }
        .srvPluginVersion { font-size:11px; color:var(--muted2); font-family:ui-monospace,monospace; }
        .srvHgnBadge {
          font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px;
          background:rgba(178,210,53,0.14); border:1px solid rgba(178,210,53,0.3); color:#4d7c0f;
        }

        /* ── Chart panel ── */
        .srvChartPanel {
          border-radius: 12px; border: 1px solid var(--line);
          background: var(--panel); padding: 12px 14px;
          animation: hgnScaleIn 0.32s ease both;
        }
        .srvChartHead {
          display: flex; align-items: center;
          justify-content: space-between; gap: 8px;
          flex-wrap: wrap; margin-bottom: 4px;
        }
        .srvChartTitle {
          font-size: 12px; font-weight: 900; color: var(--muted);
          letter-spacing: 0.3px; text-transform: uppercase;
        }
        .srvChartFilters { display: flex; gap: 3px; }
        .srvChartFilter {
          padding: 3px 7px; border-radius: 6px;
          border: 1px solid transparent; background: transparent;
          color: var(--muted2); font-size: 10px; font-weight: 700;
          cursor: pointer; transition: all 0.12s;
        }
        .srvChartFilter:hover { background: var(--nav-hover-bg); color: var(--text); }
        .srvChartFilter.active {
          background: rgba(96,165,250,0.16);
          border-color: rgba(96,165,250,0.3);
          color: #2563eb;
        }
        .srvChartFooter { display: flex; justify-content: space-between; margin-top: 6px; }
        .srvChartStat   { font-size: 11px; color: var(--muted2); }

        /* ── Radial gauge ── */
        .srvGaugeWrap {
          display: flex; flex-direction: column;
          align-items: center; gap: 6px;
        }
        .srvGaugeVal  { fill: var(--text); }
        .srvGaugeSub  { fill: var(--muted); }
        .srvGaugeLabel {
          font-size: 11px; color: var(--muted); font-weight: 700;
          letter-spacing: 0.4px; text-transform: uppercase;
        }
        .srvGaugesRow {
          display: flex; gap: 14px; flex-wrap: wrap;
          justify-content: space-around; padding: 10px 0;
        }

        /* ── World chips ── */
        .srvWorldChip {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 5px 10px; border-radius: 8px;
          border: 1px solid var(--line); background: var(--nav-bg);
          font-size: 12px; font-family: ui-monospace,monospace;
          color: var(--muted); margin: 3px;
        }

        /* ── Uptime ── */
        .srvUptimeFilters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
        .srvUptimeFilter {
          padding: 4px 9px; border-radius: 7px;
          border: 1px solid var(--line); background: var(--nav-bg);
          color: var(--muted2); font-size: 11px; font-weight: 700;
          cursor: pointer; transition: all 0.12s;
        }
        .srvUptimeFilter:hover { background: var(--nav-hover-bg); color: var(--text); }
        .srvUptimeFilter.active {
          background: rgba(34,197,94,0.14);
          border-color: rgba(34,197,94,0.35);
          color: #16a34a;
        }
        .srvUptimeLegend { display:flex; justify-content:space-between; margin-top:8px; }
        .srvUptimeLegendLabel { font-size:11px; color:var(--muted2); }

        /* ── Search ── */
        .srvSearch {
          width: 100%; padding: 8px 12px; border-radius: 9px;
          border: 1px solid var(--line);
          background: var(--panel2);
          color: var(--text); font-size: 13px;
          margin-bottom: 10px; outline: none;
          transition: border-color 0.15s;
        }
        .srvSearch:focus { border-color: rgba(96,165,250,0.45); }
        .srvSearch::placeholder { color: var(--muted2); }

        /* ── Section label ── */
        .srvSectionTitle {
          font-size:11px; font-weight:800; letter-spacing:0.5px;
          text-transform:uppercase; color:var(--muted2); padding:6px 10px 8px;
        }

        .srvHero::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 18px;
          background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
          pointer-events: none;
        }

        /* ── Muted text ── */
        .srvMuted { font-size:13px; color:var(--muted); padding:12px; }

        /* ── Light mode hero override ── */
        .light .srvHero {
          background:
            radial-gradient(900px 400px at 80% -20%, rgba(59,130,246,0.10), transparent 60%),
            radial-gradient(600px 300px at 10% 110%, rgba(16,185,129,0.07), transparent 60%),
            linear-gradient(180deg, #e8edf8, #f0f4fa);
          border-color: rgba(0,0,0,0.10);
        }
        .light .srvHeroName { color: #111; }
        .light .srvIPLabel  { color: #888; }
        .light .srvIPChip {
          background: rgba(255,255,255,0.7);
          border-color: rgba(0,0,0,0.12);
          color: #333;
        }
        .light .srvIPChip:hover {
          background: rgba(59,130,246,0.08);
          border-color: rgba(59,130,246,0.3);
          color: #111;
        }
        .light .srvHeroIPRow { border-color: rgba(0,0,0,0.08); }
        .light .srvTab.active { color: #1d4ed8; }
        .light .srvChartFilter.active { color: #1d4ed8; }
        .light .srvHgnBadge { color: #3a6e00; }
        .light .srvStatusBadge.online  { color: #15803d; }
        .light .srvStatusBadge.offline { color: #b91c1c; }
        .light .srvTpsBadge.good { color: #15803d; }
        .light .srvTpsBadge.warn { color: #b45309; }
        .light .srvTpsBadge.bad  { color: #b91c1c; }
        .light .srvUptimeFilter.active { color: #15803d; }

        /* ── Worlds Dropdown ── */
.srvWorldsToggle { cursor: pointer; user-select: none; gap: 4px; }
.srvWorldsToggle:hover { border-color: rgba(96,165,250,0.4); }

.srvWorldsDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
  z-index: 999;
  overflow: hidden;
  animation: hgnScaleIn 0.15s ease both;
}
.srvWorldsDropdownItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
  cursor: default;
}
.srvWorldsDropdownItem:last-child { border-bottom: none; }
.srvWorldsDropdownItem:hover { background: var(--nav-hover-bg); }
.srvWorldDot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e88;
  flex-shrink: 0;
}

/* ── Server Selector ── */

.srvServerSelectorDot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Light mode overrides */

.light .srvWorldsDropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 768px) {
  .srvHeroIPRow { flex-direction: column; align-items: flex-start; }
  .srvServerSelectorRow { flex-wrap: wrap; }
  .srvIPGroup { width: 100%; }
   .srvWorldsDropdown { 
    min-width: 140px;
    left: 0 !important;
    right: auto !important;
  }
}

/*-------------------------hgn-recipediscovery Server Grid---------------------------------- */
.serverGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.serverCard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.serverCard__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.serverCard__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.serverCard__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 32px;
}

.serverCard__value {
  font-size: 13px;
  background: var(--input-bg);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text);
}