/* ============================================================
   VERDO Dashboard — visual system
   Deep emerald and gold — a gem-cut palette built around the
   bot's faceted-emerald emblem.
   ============================================================ */


:root {
  --bg: #050f0c;
  --bg-soft: #081611;
  --card: rgba(255,255,255,0.055);
  --card-hover: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.07);
  --accent: #17b673;
  --accent-2: #d4af37;
  --accent-bright: #4fe3a5;
  --accent-dim: #0d5c3a;
  --gold-light: #f3dfa0;
  --text: #f5f7fb;
  --muted: #9aa4b8;
  --muted-soft: #6b7488;
  --success: #34d399;
  --success-bg: rgba(52,211,153,0.12);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,0.12);
  --rail-bg: #050f0c;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 30px -14px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(212,175,55,0.3), 0 8px 30px -8px rgba(23,182,115,0.45);
  --glow-1: rgba(23,182,115,0.20);
  --glow-2: rgba(212,175,55,0.10);
  --glow-3: rgba(23,182,115,0.10);
}

/* ---------------- Theme presets ---------------- */
/* Royal Blue & Gold — the bot's previous default, kept as an opt-in theme */
[data-theme="royal"] {
  --bg: #060b16;
  --bg-soft: #0a1425;
  --accent: #2f6fed;
  --accent-bright: #6fa2ff;
  --accent-dim: #163a80;
  --rail-bg: #050a14;
  --shadow-glow: 0 0 0 1px rgba(212,175,55,0.3), 0 8px 30px -8px rgba(47,111,237,0.45);
  --glow-1: rgba(47,111,237,0.20);
  --glow-3: rgba(47,111,237,0.10);
}

/* Crimson & Gold — regal red base */
[data-theme="crimson"] {
  --accent: #d8443c;
  --accent-bright: #f08279;
  --accent-dim: #6e1d18;
  --rail-bg: #140505;
  --shadow-glow: 0 0 0 1px rgba(212,175,55,0.3), 0 8px 30px -8px rgba(216,68,60,0.45);
  --glow-1: rgba(216,68,60,0.20);
  --glow-3: rgba(216,68,60,0.10);
}

/* Midnight Violet & Gold — the original purple, kept as an opt-in theme */
[data-theme="violet"] {
  --accent: #7c5cff;
  --accent-bright: #a48cff;
  --accent-dim: #3d2f8f;
  --rail-bg: #0a0714;
  --shadow-glow: 0 0 0 1px rgba(212,175,55,0.3), 0 8px 30px -8px rgba(124,92,255,0.45);
  --glow-1: rgba(124,92,255,0.20);
  --glow-3: rgba(124,92,255,0.10);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 90% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--glow-2), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, var(--glow-3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Tajawal', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Section titles/headings lean on a bold geometric weight for presence */
h1, .brand-name, .profile-main-header h1 {
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 800;
}

/* ---------------- Ambient particle field (js/particles.js) ---------------- */
#particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.shell, body.no-sidebar > header, body.no-sidebar > main {
  position: relative;
  z-index: 1;
}

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

a { color: var(--accent-bright); }

/* ---------------- Signature: "speed-line" eyebrow ----------------
   Echoes the three fading motion-lines in the VERDO logo. Used
   before section titles as a recurring brand mark. */
.speedmark {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 20px;
  margin-inline-end: 10px;
}
.speedmark span {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-2), transparent 90%);
}
.speedmark span:nth-child(1) { width: 100%; opacity: 1; }
.speedmark span:nth-child(2) { width: 68%; opacity: .7; }
.speedmark span:nth-child(3) { width: 38%; opacity: .4; }

/* ---------------- App shell ---------------- */
.shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ---------------- Server switcher rail ---------------- */
.server-rail {
  width: 76px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--rail-bg), #0b1730);
  border-inline-start: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail-brand img {
  width: 44px; height: 44px; border-radius: 14px;
  box-shadow: var(--shadow-glow);
  background: #fff;
}
.rail-divider {
  width: 32px; height: 2px;
  border-radius: 2px;
  background: rgba(212,175,55,0.35);
  margin-bottom: 2px;
}
.rail-servers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  padding: 2px 0;
}
.rail-servers::-webkit-scrollbar { width: 0; }
.rail-server {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-dim));
  color: #fbf3da;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: border-radius .15s ease, border-color .15s ease, transform .1s ease;
  flex-shrink: 0;
}
.rail-server img { width: 100%; height: 100%; object-fit: cover; }
.rail-server:hover { border-radius: 13px; transform: translateY(-1px); }
.rail-server.active {
  border-color: var(--accent-2);
  border-radius: 13px;
  box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 4px rgba(212,175,55,0.45);
}
.rail-server .rail-tooltip {
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: var(--accent);
  border: 1px solid rgba(212,175,55,0.35);
  color: #fdf6e3;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 20;
}
.rail-server:hover .rail-tooltip { opacity: 1; }
.rail-skel {
  width: 46px; height: 46px; border-radius: 15px;
  background: rgba(255,255,255,0.14);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.rail-add {
  width: 46px; height: 46px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1.5px dashed rgba(255,255,255,0.25);
  color: #6fe3a8;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, border-radius .15s ease;
  flex-shrink: 0;
}
.rail-add:hover { background: rgba(111,227,168,0.16); border-color: #6fe3a8; border-radius: 13px; }
.rail-add svg { width: 20px; height: 20px; }

/* Sidebar (settings categories — sits to the right of the rail in RTL flow) */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: rgba(10,20,37,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-inline-start: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 20px;
}
.brand .brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, var(--text), var(--accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.brand .brand-sub {
  font-size: 11px;
  color: var(--muted-soft);
  margin-top: 1px;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: none;
  flex: 1;
  overflow-y: auto;
}

/* ---- Category groups ---- */
.nav-category { margin-bottom: 4px; }
.nav-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--muted-soft);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 10px 6px;
  cursor: pointer;
}
.nav-category-header svg {
  width: 13px; height: 13px;
  transition: transform .15s ease;
  opacity: 0.7;
}
.nav-category.collapsed .nav-category-header svg { transform: rotate(-90deg); }
.nav-category.collapsed .nav-items { display: none; }
.nav-items { display: flex; flex-direction: column; gap: 2px; }

nav button.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  text-align: right;
  width: 100%;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
nav button.nav-item:hover { background: var(--card); color: var(--text); }
nav button.nav-item.active {
  background: linear-gradient(135deg, rgba(47,111,237,0.16), rgba(212,175,55,0.14));
  border-color: rgba(47,111,237,0.35);
  color: var(--text);
}
nav button.nav-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
nav button.nav-item svg.item-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
nav button.nav-item .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav button.nav-item .status-dot {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
nav button.nav-item .status-dot svg { width: 16px; height: 16px; }
nav button.nav-item .status-dot.on { color: var(--success); }
nav button.nav-item .status-dot.off {
  width: 7px; height: 7px;
  margin: 4.5px;
  background: var(--border);
  border-radius: 50%;
}
nav button.nav-item .badge-new {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.sidebar-footer .muted { font-size: 12px; }
.sidebar-footer a.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--accent-bright);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.sidebar-footer a.back-link:hover { background: var(--card); }

/* Main column */
.main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

header.topbar {
  padding: 16px 32px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(6,11,22,0.72);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}
header.topbar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: live-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
header.topbar .topbar-left,
header.topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
header.topbar .topbar-actions { justify-content: flex-end; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--card); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------------- Theme switcher ---------------- */
#themeSwitcher { position: relative; }
.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--card); color: var(--text); }
.theme-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 170px;
  background: rgba(10,20,37,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-card);
  z-index: 30;
}
.theme-menu.open { display: flex; }
.theme-option {
  display: flex; align-items: center; gap: 9px;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.theme-option:hover { background: var(--card); color: var(--text); }
.theme-option.active { color: var(--text); background: var(--card); font-weight: 700; }

.topbar-avatar {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--muted);
  padding: 3px;
  border-radius: 50px;
  border: 1px solid transparent;
  transition: border-color .15s ease;
}
.topbar-avatar:hover { border-color: var(--border); }
.topbar-avatar img {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card);
  object-fit: cover;
}
.topbar-avatar svg { width: 13px; height: 13px; }

.lang-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 13px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lang-btn:hover { background: var(--card); }
.lang-btn .flag { font-size: 14px; }

/* Standalone header (used on profile.html — no sidebar) */
body.no-sidebar header {
  padding: 18px 32px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6,11,22,0.72);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}
body.no-sidebar header h1 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); }

main { padding: 28px 32px 60px; max-width: 980px; margin: 0 auto; width: 100%; }
body.no-sidebar main { max-width: 860px; }

/* ---------------- Cards ---------------- */
.card {
  background: linear-gradient(180deg, var(--card), var(--card-hover) 140%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease;
}
.card h2 {
  margin: 0 0 14px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
}
.card p { line-height: 1.9; color: var(--text); }
.card b { color: var(--accent-bright); font-weight: 700; }

/* ---------------- Tables ---------------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--border-soft); }
th {
  color: var(--muted-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:hover { background: rgba(15,33,88,0.06); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------- Forms ---------------- */
label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
input, select, textarea {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,33,88,0.2);
}
input::placeholder, textarea::placeholder { color: var(--muted-soft); }

button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #fdf6e3;
  border: 1px solid var(--accent-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px -4px rgba(15,33,88,0.4), 0 0 0 1px rgba(201,162,39,0.15);
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
button.primary:hover { filter: brightness(1.15); box-shadow: 0 6px 22px -4px rgba(15,33,88,0.5), 0 0 0 1px rgba(201,162,39,0.35); }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }

/* Plain/ghost buttons — table row actions etc. (any <button> without .primary) */
button:not(.primary) {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 600;
  margin-inline-end: 6px;
  transition: background .15s ease, border-color .15s ease;
}
button:not(.primary):hover { background: var(--card-hover); border-color: var(--accent-dim); }
button:not(.primary):last-child { margin-inline-end: 0; }

/* ---------------- Pills / badges ---------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill.on { background: var(--success-bg); color: var(--success); }
.pill.off { background: var(--danger-bg); color: var(--danger); }

/* ---------------- Misc ---------------- */
.preview-box {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 12px;
  background: var(--bg-soft);
}
.muted { color: var(--muted); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

code {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--accent-bright);
}

/* ---------------- Nav icons (inline SVG via mask) ---------------- */
nav button svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }

/* ---------------- Overview 2-column layout ---------------- */
.overview-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
.overview-side h2 { margin: 0 0 14px; font-size: 15px; }
.overview-econ-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--muted);
}
.overview-econ-row:last-child { border-bottom: none; }
.overview-econ-row b { color: var(--accent-2); font-size: 14.5px; }
@media (max-width: 900px) {
  .overview-layout { grid-template-columns: 1fr; }
}

/* ---------------- Stat cards (overview) ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat-card {
  background: linear-gradient(180deg, var(--card), var(--card-hover) 140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.stat-card-alert { border-color: rgba(248,113,113,0.35); }
.stat-card-alert .stat-value { color: var(--danger); }
.stat-card .stat-label { color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--text); }
.stat-card svg.stat-spark { width: 100%; height: 46px; margin-top: 10px; display: block; }

/* ---------------- Role chip list (Auto Rules — member/bot role pickers) ---------------- */
.role-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; min-height: 20px; }
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 12px;
  border-radius: 20px;
  background: rgba(15,33,88,0.14);
  border: 1px solid rgba(15,33,88,0.35);
  color: var(--accent-bright);
  font-size: 12.5px;
  font-weight: 600;
}
.role-chip button {
  all: unset;
  cursor: pointer;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,33,88,0.25);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.role-chip button:hover { background: var(--accent); }
.role-picker-row { display: flex; gap: 8px; align-items: center; }
.role-picker-row select { margin-bottom: 0; flex: 1; }

/* ---------------- Auto Responder rule cards ---------------- */
.ar-rule { border: 1px solid rgba(15,33,88,0.25); }
.ar-response-del {
  all: unset;
  cursor: pointer;
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(237,66,69,0.14);
  border: 1px solid rgba(237,66,69,0.35);
  color: var(--danger);
  font-size: 15px;
}
.ar-response-del:hover { background: rgba(237,66,69,0.28); }
.ar-response-add { margin-top: 4px; }
.ar-del-rule {
  background: rgba(237,66,69,0.14);
  border: 1px solid rgba(237,66,69,0.35);
  color: var(--danger);
}
.ar-del-rule:hover { background: rgba(237,66,69,0.28); }

/* ---------------- Color picker ---------------- */
.swatch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s ease, border-color .15s ease;
  flex-shrink: 0;
}
.swatch:hover { transform: scale(1.08); }
.swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(201,162,39,0.4); }
.hex-row { display: flex; align-items: center; gap: 10px; }
.hex-row input { margin-bottom: 0; }
.hex-preview { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; }

/* ---------------- Profile page shell + sidebar ---------------- */
.profile-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}
.profile-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  border-inline-start: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 26px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.profile-id-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 6px 22px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 16px;
}
.profile-id-card .avatar-wrap {
  position: relative;
  width: 78px;
  height: 78px;
  margin-bottom: 12px;
  cursor: pointer;
}
.profile-id-card .avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--border);
  transition: border-color .15s ease, transform .15s ease;
}
.profile-id-card .avatar-wrap:hover img {
  border-color: var(--accent-2);
  transform: scale(1.03);
}
.profile-id-card .avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), transparent 70%);
  z-index: -1;
  opacity: 0.55;
  filter: blur(1px);
}
.profile-id-card .p-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-id-card .p-id {
  font-size: 11.5px;
  color: var(--muted-soft);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 3px;
}
.profile-wallet-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(212,175,55,0.12);
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid rgba(212,175,55,0.25);
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.profile-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  text-align: right;
  width: 100%;
  margin: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.profile-nav button svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
.profile-nav button:hover { background: var(--card); color: var(--text); }
.profile-nav button.active {
  background: linear-gradient(135deg, rgba(47,111,237,0.16), rgba(212,175,55,0.14));
  border-color: rgba(47,111,237,0.35);
  color: var(--accent);
}

.profile-sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.profile-sidebar-footer a.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.profile-sidebar-footer a.back-link:hover { background: var(--danger-bg); }

.profile-main {
  flex: 1;
  min-width: 0;
  padding: 30px 34px 60px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.profile-main-header { margin-bottom: 18px; }
.profile-main-header h1 { margin: 0; font-size: 20px; font-weight: 800; }
.profile-section { display: none; }
.profile-section.active { display: block; animation: sectionIn .18s ease; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .server-rail {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    border-inline-start: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 14px;
    overflow-x: auto;
  }
  .rail-divider { display: none; }
  .rail-servers { flex-direction: row; overflow-x: auto; overflow-y: visible; }
  .rail-server .rail-tooltip { display: none; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-inline-start: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 14px 8px;
  }
  nav { flex-direction: column; }
  .nav-items { flex-direction: row; flex-wrap: wrap; }
  nav button.nav-item { flex: 0 0 auto; padding: 8px 11px; font-size: 13px; }
  .sidebar-footer { display: none; }
  main, header.topbar, body.no-sidebar header { padding-left: 16px; padding-right: 16px; }
  .grid-2 { grid-template-columns: 1fr; }

  .profile-shell { flex-direction: column; }
  .profile-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-inline-start: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 18px 16px;
  }
  .profile-id-card { padding-bottom: 16px; margin-bottom: 12px; }
  .profile-nav { flex-direction: row; flex-wrap: wrap; }
  .profile-nav button { flex: 0 0 auto; padding: 8px 11px; font-size: 13px; }
  .profile-sidebar-footer { border-top: none; padding-top: 8px; }
  .profile-main { padding: 20px 16px 40px; }
}

/* ---------------- Ticket Panel (Legendary) ---------------- */
.ticket-hero {
  position: relative;
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  margin-bottom: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 15% -20%, rgba(15,33,88,0.10), transparent 55%),
    radial-gradient(120% 160% at 100% 120%, rgba(201,162,39,0.16), transparent 55%),
    linear-gradient(180deg, var(--card), var(--card-hover) 140%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glow);
}
.ticket-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.ticket-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; position: relative; }
.ticket-hero-title { display: flex; align-items: center; gap: 12px; }
.ticket-hero-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px -4px rgba(15,33,88,0.75);
  font-size: 22px;
}
.ticket-hero-title h1 { font-size: 20px; margin: 0 0 3px; font-weight: 800; letter-spacing: 0.01em; }
.ticket-hero-title p { margin: 0; color: var(--muted); font-size: 13px; }
.ticket-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.ticket-hero-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-align: center;
  min-width: 84px;
}
.ticket-hero-stat b { display: block; font-size: 18px; font-weight: 800; color: var(--accent-bright); }
.ticket-hero-stat span { font-size: 11px; color: var(--muted); }

.legend-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  color: var(--gold-light);
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(243,223,160,0.35);
}

.ticket-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--accent-bright);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.ticket-section-label::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

.discord-msg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #1e1f24;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
}
.discord-msg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.discord-msg-author {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.discord-msg-bot-tag {
  background: var(--accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.5;
}
.discord-embed {
  background: #2b2d31;
  border-inline-start: 4px solid var(--accent);
  border-radius: 6px;
  overflow: hidden;
  max-width: 420px;
}
.discord-embed-body { padding: 12px 14px 6px; }
.discord-embed-title { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.discord-embed-desc { color: #dbdee1; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.discord-embed-img { width: 100%; display: block; }
.discord-embed-footer { color: #949ba4; font-size: 11.5px; padding: 0 14px 12px; }
.discord-embed-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 6px; padding-top: 12px; }
.discord-btn {
  border: none; border-radius: 4px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #fff;
  cursor: default; display: inline-flex; align-items: center; gap: 6px;
}
.discord-btn.style-primary { background: #5865f2; }
.discord-btn.style-secondary { background: #4e5058; }
.discord-btn.style-success { background: #248046; }
.discord-btn.style-danger { background: #da373c; }

.ticket-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 4px; }
.ticket-btn-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.ticket-btn-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.ticket-btn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-btn-card-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ticket-btn-card-meta { color: var(--muted); font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.ticket-btn-card .del-button {
  background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(248,113,113,0.3);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.ticket-btn-card .del-button:hover { filter: brightness(1.15); }
.ticket-empty-hint {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ============================================================
   VERDO — Custom Emoji Manager
   ============================================================ */
.emoji-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
  gap: 18px;
  margin-bottom: 18px;
}
.emoji-create-card, .emoji-preview-card, .emoji-list-card { overflow: hidden; }
.section-title { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.section-title > div { display:flex; flex-direction:column; gap:2px; }
.section-title b { font-size:16px; }
.section-title small { color:var(--muted-soft); font-size:11px; }
.section-icon {
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#fff; font-size:17px; box-shadow:0 8px 24px -10px var(--accent);
}
.emoji-upload-zone {
  min-height:175px; border:1.5px dashed rgba(255,255,255,.18); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:rgba(255,255,255,.025); cursor:pointer; transition:.18s ease; margin-bottom:18px;
}
.emoji-upload-zone:hover, .emoji-upload-zone.dragging { border-color:var(--accent-bright); background:rgba(23,182,115,.08); transform:translateY(-1px); }
.emoji-upload-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--card); color:var(--accent-bright); font-size:24px; }
.emoji-upload-zone b { font-size:14px; }
.emoji-upload-zone span, .emoji-upload-zone small { color:var(--muted); font-size:12px; }
.form-grid.two { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-grid.two label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; }
.form-grid.two input { width:100%; }
.emoji-create-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.emoji-create-actions .muted { font-size:12px; }
.notice.info { margin-top:16px; padding:11px 13px; border:1px solid rgba(47,111,237,.2); background:rgba(47,111,237,.08); color:var(--muted); border-radius:11px; font-size:11px; }
.emoji-big-preview { min-height:215px; border-radius:17px; border:1px solid var(--border-soft); background:radial-gradient(circle at 50% 35%, var(--glow-1), transparent 55%), rgba(0,0,0,.14); display:grid; place-items:center; }
.emoji-big-preview img { width:112px; height:112px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 14px 28px rgba(0,0,0,.35)); }
.emoji-big-preview span { font-size:64px; opacity:.55; }
.emoji-preview-name { text-align:center; font-weight:800; font-size:15px; margin-top:13px; }
.emoji-preview-meta { text-align:center; color:var(--muted-soft); font-size:11px; line-height:1.7; margin-top:5px; }
.emoji-list { display:flex; flex-direction:column; gap:8px; }
.emoji-item { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:13px; padding:11px; border:1px solid var(--border-soft); border-radius:13px; background:rgba(255,255,255,.025); transition:.15s ease; }
.emoji-item:hover { background:var(--card-hover); border-color:rgba(255,255,255,.14); }
.emoji-item-icon { width:52px; height:52px; border-radius:13px; display:grid; place-items:center; background:rgba(0,0,0,.16); }
.emoji-item-icon img { width:38px; height:38px; object-fit:contain; }
.emoji-item-main { min-width:0; display:flex; flex-direction:column; gap:5px; }
.emoji-item-main b { font-size:13px; }
.emoji-item-main code { color:var(--muted-soft); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right; }
.emoji-item-actions { display:flex; align-items:center; gap:7px; }
.btn.small { padding:7px 10px; font-size:11px; }
.btn.danger { color:#fecaca; border-color:rgba(248,113,113,.22); background:rgba(248,113,113,.07); }
.btn.danger:hover { background:rgba(248,113,113,.14); }
.empty-state, .loading { padding:28px; text-align:center; color:var(--muted-soft); font-size:12px; }

@media (max-width: 900px) {
  .emoji-manager-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .form-grid.two { grid-template-columns:1fr; }
  .emoji-item { grid-template-columns:46px minmax(0,1fr); }
  .emoji-item-actions { grid-column:1 / -1; justify-content:flex-end; }
}


/* ============================================================
   VERDO v16 — Internal dashboard refresh
   Clean white/blue control-center layout.
   ============================================================ */
:root {
  --bg: #f4f8ff;
  --bg-soft: #ffffff;
  --card: rgba(255,255,255,.92);
  --card-hover: #ffffff;
  --border: #dfe9f7;
  --border-soft: #e9eff8;
  --accent: #1769e8;
  --accent-2: #3b82f6;
  --accent-bright: #075bd7;
  --accent-dim: #dbeafe;
  --text: #10213f;
  --muted: #66758f;
  --muted-soft: #8795aa;
  --success: #16a34a;
  --success-bg: #eaf8ef;
  --danger: #dc3545;
  --danger-bg: #fff0f2;
  --rail-bg: #ffffff;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-card: 0 8px 28px rgba(32,78,137,.08);
  --shadow-glow: 0 8px 24px rgba(23,105,232,.18);
  --glow-1: rgba(59,130,246,.10);
  --glow-2: rgba(14,165,233,.06);
  --glow-3: rgba(37,99,235,.05);
}
html { color-scheme: light; }
body {
  background:
    radial-gradient(900px 450px at 88% -8%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
  color: var(--text);
}
.shell { min-height: 100vh; }
.server-rail {
  width: 72px;
  background: rgba(255,255,255,.94);
  border-inline-start: 1px solid #e4ebf5;
  box-shadow: 4px 0 22px rgba(30,70,120,.04);
  padding: 14px 0;
}
.rail-brand img { background:#fff; box-shadow: 0 6px 18px rgba(23,105,232,.16); }
.rail-divider { background:#dbe8fa; }
.rail-server { background:linear-gradient(135deg,#1769e8,#60a5fa); color:#fff; border:2px solid transparent; }
.rail-server.active { border-color:#1769e8; box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(23,105,232,.22); }
.rail-add { background:#f5f9ff; border-color:#b9d2f7; color:#1769e8; }
.sidebar {
  width: 246px;
  background: rgba(255,255,255,.88);
  border-inline-start: 1px solid #e2eaf5;
  box-shadow: 6px 0 28px rgba(30,70,120,.045);
  padding: 18px 13px;
}
.brand-name { color:#0e56c7 !important; letter-spacing:.02em; }
.brand-sub { color:#8190a8 !important; }
.nav-category { margin-bottom:10px; }
.nav-category-header {
  color:#8a97aa !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  padding:7px 10px !important;
}
.nav-items { gap:4px; }
.nav-item {
  border:1px solid transparent !important;
  color:#53647e !important;
  background:transparent !important;
  min-height:40px;
  border-radius:11px !important;
  padding:8px 11px !important;
  transition:all .16s ease;
}
.nav-item:hover { background:#f1f6fd !important; color:#1769e8 !important; }
.nav-item.active {
  background:linear-gradient(90deg,#e9f2ff,#f5f9ff) !important;
  color:#0d5fd8 !important;
  border-color:#d7e7fb !important;
  box-shadow:inset 3px 0 0 #1769e8;
}
.nav-item .item-icon { color:currentColor !important; }
.badge-new { background:#e7f0ff !important; color:#1769e8 !important; border:1px solid #cfe1fb; }
.sidebar-footer { border-top:1px solid #edf2f8 !important; }
header.topbar {
  background:rgba(255,255,255,.88);
  border-bottom:1px solid #e3ebf6;
  box-shadow:0 3px 18px rgba(30,70,120,.04);
  padding:14px 28px;
}
header.topbar h1 { color:#14294a; }
.icon-btn,.theme-toggle,.lang-btn { background:#fff; border-color:#dce7f5; color:#5e6f88; }
.icon-btn:hover,.theme-toggle:hover,.lang-btn:hover { background:#f3f8ff; color:#1769e8; }
.topbar-avatar img { background:#eef5ff; }
main { max-width:1220px; padding:26px 30px 64px; }
.card {
  background:rgba(255,255,255,.96);
  border:1px solid #dfe8f4;
  box-shadow:0 8px 28px rgba(30,72,125,.065);
  border-radius:16px;
}
.card:hover { border-color:#cbdcf2; }
.card h2,.card h3 { color:#172c4d; }
.card p { color:#5e6f88; }
.stat-card {
  background:linear-gradient(145deg,#fff,#f6faff) !important;
  border:1px solid #dce8f7 !important;
  box-shadow:0 8px 22px rgba(23,105,232,.06) !important;
}
.stat-card .stat-label { color:#74839a !important; }
.stat-card .stat-value { color:#14335e !important; }
.primary,button.primary {
  background:linear-gradient(135deg,#1769e8,#3182f6) !important;
  border-color:#1769e8 !important;
  box-shadow:0 7px 18px rgba(23,105,232,.18);
}
select,input,textarea {
  background:#fff !important;
  color:#172c4d !important;
  border-color:#d8e4f2 !important;
}
select:focus,input:focus,textarea:focus { border-color:#5c9af2 !important; box-shadow:0 0 0 3px rgba(59,130,246,.10) !important; }
.pill.on { background:#eaf8ef !important; color:#17843f !important; }
.pill.off { background:#fff0f2 !important; color:#c5303d !important; }
.table-wrap { border-color:#e1eaf5 !important; }
tbody tr:hover { background:#f6faff !important; }

/* Overview hierarchy */
.page-head { margin-bottom:18px; }
.page-head h2 { font-size:25px !important; letter-spacing:-.02em; }
.page-head p { margin-top:5px; color:#71819a !important; }
.overview-grid { gap:18px !important; }
.overview-main { min-width:0; }
.overview-side { position:sticky; top:86px; height:max-content; }
.stat-grid { gap:14px !important; }

/* Leaderboard cards */
.card-row {
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border:1px solid #edf2f8;
  border-radius:12px;
  margin-bottom:7px;
  background:#fbfdff;
}
.card-row:hover { background:#f2f7ff; border-color:#dbe8f8; }
.card-row strong { color:#1769e8; }
.stack { display:flex; flex-direction:column; }

@media (max-width: 1050px) {
  .sidebar { width:220px; }
  main { padding-inline:20px; }
}
@media (max-width: 820px) {
  .server-rail { display:none; }
  .sidebar { width:100%; height:auto; position:relative; border-inline-start:0; border-bottom:1px solid #e2eaf5; }
  .nav-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .main-wrap { width:100%; }
  .overview-side { position:static; }
}
@media (max-width: 560px) {
  header.topbar { padding:12px 15px; }
  main { padding:18px 14px 44px; }
  .nav-items { grid-template-columns:1fr; }
  .card-row { grid-template-columns:28px minmax(0,1fr); }
  .card-row span:nth-of-type(2), .card-row b { grid-column:2; }
}

/* ===== VERDO reference dashboard: exact structure, blue sci-fi visual language ===== */
:root{--vbg:#020b16;--vpanel:#031b34;--vpanel2:#04172b;--vline:#078ff1;--vblue:#0a8fff;--vcyan:#21c0ff;--vtext:#f5f9ff;--vmuted:#78a2c7;}
body{background:radial-gradient(900px 500px at 10% 5%,rgba(0,115,255,.12),transparent 60%),radial-gradient(800px 500px at 90% 20%,rgba(0,170,255,.08),transparent 60%),linear-gradient(135deg,#010711,#031426 50%,#010812)!important;color:var(--vtext)!important}
.server-rail{display:none!important}
.shell{display:flex!important;direction:ltr!important}.main-wrap{order:2;min-width:0;flex:1;direction:rtl!important}.sidebar{order:1;width:292px!important;flex:0 0 292px!important;direction:rtl!important;background:linear-gradient(180deg,rgba(2,15,31,.98),rgba(2,10,22,.98))!important;border:0!important;border-left:1px solid rgba(0,143,255,.18)!important;padding:18px 17px!important}
.brand{height:72px!important;padding:0 4px 14px!important;border:0!important;display:flex!important;align-items:center!important;gap:11px!important}.brand-logo{display:block!important;width:64px!important;height:58px!important}.brand-logo img{width:62px!important;height:62px!important;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,154,255,.55))}.brand-name{font-size:35px!important;line-height:.9!important;color:#fff!important}.brand-sub{font-size:11px!important;color:#22b8ff!important;margin-top:7px!important;white-space:nowrap}
.server-picker{position:relative;margin:4px 0 15px;z-index:50}.server-picker-btn{width:100%;height:67px;border:1px solid rgba(0,145,255,.5);border-radius:15px;background:linear-gradient(135deg,rgba(5,43,78,.92),rgba(3,23,44,.96));display:flex;align-items:center;gap:10px;padding:8px 10px;color:#fff;cursor:pointer;box-shadow:0 8px 28px rgba(0,80,180,.1)}.server-picker-icon{width:47px;height:47px;border-radius:13px;overflow:hidden;background:#063463;border:1px solid rgba(32,173,255,.45);display:grid;place-items:center;flex:none}.server-picker-icon img{width:100%;height:100%;object-fit:cover}.server-picker-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}.server-picker-copy b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}.server-picker-copy small{color:#6f9bc0;font-size:11px;margin-top:3px}.server-picker-chevron{font-size:22px;color:#61baff;transition:.2s}.server-picker.open .server-picker-chevron{transform:rotate(180deg)}.server-picker-menu{position:absolute;top:75px;right:0;left:0;display:none;padding:8px;border-radius:15px;background:#041a32;border:1px solid #078ff1;box-shadow:0 20px 50px rgba(0,0,0,.55);max-height:360px;overflow:auto}.server-picker.open .server-picker-menu{display:block}.server-option{display:flex;align-items:center;gap:10px;padding:9px;border-radius:11px;text-decoration:none;color:#d9edff;margin:2px 0}.server-option:hover,.server-option.active{background:linear-gradient(90deg,rgba(0,135,255,.22),rgba(0,87,170,.08));}.server-option-icon{width:40px;height:40px;border-radius:11px;background:#07365f;display:grid;place-items:center;overflow:hidden;font-weight:800;color:#fff}.server-option-icon img{width:100%;height:100%;object-fit:cover}.server-option-copy{display:flex;flex-direction:column;min-width:0;flex:1}.server-option-copy b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-option-copy small{font-size:10px;color:#6d98bc;margin-top:2px}.server-option-check{color:#20dca9;font-size:18px}.server-empty{padding:20px;text-align:center;color:#7094b5;font-size:12px}
.nav-category{margin:0!important}.nav-category-header{display:none!important}.nav-items{gap:2px!important}.nav-item{min-height:42px!important;border:1px solid transparent!important;border-radius:11px!important;color:#a8c5de!important;background:transparent!important;padding:8px 12px!important}.nav-item:hover{background:rgba(0,125,255,.08)!important;color:#fff!important}.nav-item.active{background:linear-gradient(90deg,#0a94ff,#075cc8)!important;border-color:#0ea6ff!important;color:#fff!important;box-shadow:0 0 25px rgba(0,142,255,.26)!important}.sidebar-footer{display:none!important}
.topbar{height:75px!important;background:rgba(1,10,21,.72)!important;border-bottom:1px solid rgba(0,136,255,.2)!important;padding:11px 28px!important}.topbar h1{display:none!important}.topbar-actions{margin-right:auto!important}.topbar-left{margin-right:0!important}.icon-btn,.lang-btn{border-color:rgba(0,143,255,.4)!important;background:rgba(3,26,49,.75)!important}
main{padding:14px 18px 34px!important}.verdo-dashboard{max-width:1260px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:18px}.verdo-main-column{min-width:0}.verdo-hero{height:208px;border:1px solid #078ff1;border-radius:17px;overflow:hidden;position:relative;padding:24px 28px;background:radial-gradient(circle at 88% 55%,rgba(0,181,255,.23),transparent 23%),linear-gradient(120deg,#04162c,#07335d 56%,#041326);box-shadow:inset 0 0 35px rgba(0,115,255,.12)}.hero-copy{position:relative;z-index:2}.hero-logo-row{display:flex;align-items:center;gap:12px;font-family:Cairo;font-size:50px;font-weight:900;line-height:1}.hero-logo-row img{width:100px;height:85px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,160,255,.55))}.hero-tagline{color:#16bbff;font-size:16px;margin-top:-3px;margin-right:111px}.hero-copy h2{font-size:19px;margin:20px 0 4px}.hero-copy p{font-size:12px;color:#9fc3e3}.hero-art{position:absolute;right:30px;top:5px;width:245px;height:190px;display:grid;place-items:center;opacity:.95}.hero-art img{width:210px;height:210px;object-fit:contain;filter:drop-shadow(0 0 25px rgba(0,154,255,.55))}
.verdo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:14px 0}.verdo-stat{min-height:102px;padding:13px 12px;border:1px solid rgba(0,145,255,.58);border-radius:14px;background:linear-gradient(180deg,rgba(4,33,62,.92),rgba(3,18,36,.93));display:flex;align-items:center;gap:10px}.verdo-stat>div:last-child{display:flex;flex-direction:column;min-width:0}.verdo-stat small{font-size:11px;color:#d4e8fa}.verdo-stat b{font-size:24px;line-height:1.2}.verdo-stat em{font-style:normal;color:#0de0a8;font-size:11px;margin-top:3px}.stat-icon{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#0b9cff,#0754bd);border:1px solid #20b7ff;display:grid;place-items:center;font-size:23px;box-shadow:0 0 18px rgba(0,141,255,.25);flex:none}
.verdo-section-card{border:1px solid rgba(0,145,255,.48);border-radius:15px;background:linear-gradient(180deg,rgba(4,28,53,.92),rgba(2,17,34,.91));padding:15px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.section-heading h2{font-size:20px;margin:0}.section-heading p{font-size:11px;color:#7199ba;margin:2px 0 0}.section-heading>span{color:#0aa5ff}.quick-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.quick-tool{min-height:67px;border:1px solid rgba(0,143,255,.5);border-radius:12px;background:linear-gradient(135deg,rgba(4,42,78,.9),rgba(2,22,42,.9));color:#fff;display:flex;align-items:center;gap:10px;text-align:right;padding:9px 10px;cursor:pointer}.quick-tool:hover{border-color:#17b6ff;transform:translateY(-1px)}.quick-tool-icon{width:43px;height:43px;border-radius:11px;background:linear-gradient(135deg,#0a9fff,#0755bf);display:grid;place-items:center;font-size:20px;flex:none}.quick-tool span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.quick-tool b{font-size:12px}.quick-tool small{font-size:9px;color:#8eb1cf;margin-top:3px}.quick-tool i{font-style:normal;color:#8bcfff;font-size:22px}
.verdo-bottom-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,.65fr);gap:14px;margin-top:14px}.metrics-card{min-height:205px}.range-pill{border:1px solid rgba(0,143,255,.5);border-radius:18px;padding:7px 13px;color:#9bd7ff;font-size:10px}.metric-bars{display:grid;gap:14px;margin-top:13px}.metric-bars>div{display:grid;grid-template-columns:125px 70px 1fr;align-items:center;gap:8px;font-size:11px}.metric-bars b{font-size:12px}.metric-bars i{height:9px;border-radius:20px;background:#071e38;overflow:hidden;border:1px solid rgba(0,143,255,.2)}.metric-bars u{display:block;height:100%;background:linear-gradient(90deg,#087cf0,#20c4ff);border-radius:20px;text-decoration:none;box-shadow:0 0 12px rgba(0,155,255,.45)}.verdo-mini-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.mini-logo{width:65px;height:65px}.mini-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 13px rgba(0,153,255,.5))}.verdo-mini-card h2{margin:2px 0;font-size:19px}.verdo-mini-card p{margin:0;color:#77a4c7;font-size:10px}.mini-values{display:flex;gap:7px;margin-top:14px}.mini-values span{min-width:65px;padding:7px;border:1px solid rgba(0,143,255,.38);border-radius:9px;background:rgba(0,110,220,.08)}.mini-values b{display:block;color:#12d9ff}.mini-values small{font-size:8px;color:#7ca2bf}
.verdo-right-column{display:flex;flex-direction:column;gap:13px}.server-summary-card,.status-card-ref,.activity-card-ref,.verdo-promo-ref{border:1px solid rgba(0,145,255,.45);border-radius:15px;background:linear-gradient(180deg,rgba(4,29,55,.92),rgba(2,17,34,.92));overflow:hidden}.server-cover{height:122px;background:radial-gradient(circle at 60% 30%,rgba(0,173,255,.4),transparent 35%),linear-gradient(135deg,#0a345a,#06172c)}.server-summary-body{display:flex;align-items:center;gap:10px;padding:12px}.server-summary-icon{width:55px;height:55px;border-radius:50%;background:#041a31;border:1px solid #079df6;display:grid;place-items:center;overflow:hidden;margin-top:-32px}.server-summary-icon img{width:100%;height:100%;object-fit:cover}.server-summary-body h2{font-size:17px;margin:0}.server-summary-body p{font-size:10px;color:#82a9c7;margin:3px 0}.online-dot{display:inline-block;width:7px;height:7px;background:#18e7ad;border-radius:50%;box-shadow:0 0 8px #18e7ad}.server-tags{display:flex;gap:5px;padding:0 12px 12px;flex-wrap:wrap}.server-tags span{font-size:9px;border:1px solid rgba(0,143,255,.4);padding:5px 8px;border-radius:14px;color:#b5d9f5}.status-card-ref,.activity-card-ref{padding:14px}.ref-card-title{display:flex;justify-content:space-between;align-items:center}.ref-card-title h2,.activity-card-ref h2{font-size:17px;margin:0}.ref-card-title span{color:#12dba8;font-size:11px}.status-card-ref p{font-size:10px;color:#7298b8}.primary-ref{width:100%;border:0;border-radius:10px;padding:11px;background:linear-gradient(90deg,#0a9aff,#075ecb);color:#fff;font-weight:800;cursor:pointer}.activity-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(0,120,220,.13)}.activity-row b{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#087edc,#0753ad);display:grid;place-items:center}.activity-row span{font-size:11px}.activity-row small{font-size:9px;color:#5e9dcc}.show-all{width:100%;margin-top:10px;border:1px solid rgba(0,143,255,.4);background:transparent;color:#8fc9ef;border-radius:9px;padding:7px;cursor:pointer}.verdo-promo-ref{display:flex;align-items:center;padding:13px;gap:9px}.verdo-promo-ref .mini-logo{width:48px;height:48px}.verdo-promo-ref div:nth-child(2){flex:1}.verdo-promo-ref b{font-size:16px}.verdo-promo-ref p{font-size:9px;color:#7ca6c4;margin:2px 0}.verdo-promo-ref>strong{font-size:35px;color:#9ad9ff}
@media(max-width:1100px){.verdo-dashboard{grid-template-columns:1fr}.verdo-right-column{display:grid;grid-template-columns:1fr 1fr}.verdo-promo-ref{grid-column:span 2}}@media(max-width:850px){.sidebar{width:230px!important;flex-basis:230px!important}.quick-tools{grid-template-columns:repeat(2,1fr)}.verdo-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.shell{display:block!important}.sidebar{width:100%!important;height:auto!important;position:relative!important}.main-wrap{width:100%!important}.verdo-stats,.quick-tools,.verdo-bottom-grid,.verdo-right-column{grid-template-columns:1fr}.verdo-promo-ref{grid-column:auto}.hero-art{opacity:.3;right:-50px}.hero-logo-row{font-size:36px}.hero-logo-row img{width:70px;height:60px}.hero-tagline{margin-right:82px}}

/* ============================================================
   VERDO CONTROL CENTER — clean post-login experience
   ============================================================ */
.profile-shell {
  background:
    radial-gradient(900px 500px at 82% -8%, rgba(47,111,237,.16), transparent 65%),
    radial-gradient(700px 420px at 10% 90%, rgba(23,182,115,.10), transparent 65%),
    #070c14;
}
.profile-sidebar {
  width: 286px;
  background: rgba(8,13,22,.88);
  backdrop-filter: blur(24px);
  border-inline-start: 1px solid rgba(255,255,255,.07);
  box-shadow: 12px 0 50px rgba(0,0,0,.22);
}
.profile-id-card { border-bottom-color: rgba(255,255,255,.08); }
.profile-id-card .avatar-wrap { width: 70px; height: 70px; }
.profile-nav { gap: 6px; }
.profile-nav button { padding: 12px 13px; border-radius: 12px; }
.profile-nav button.active {
  background: linear-gradient(135deg, rgba(47,111,237,.24), rgba(124,92,255,.12));
  border-color: rgba(111,162,255,.28);
  color: #9fc0ff;
  box-shadow: inset 0 0 24px rgba(47,111,237,.06);
}
.profile-main {
  max-width: none;
  padding: 38px clamp(20px,4vw,62px) 70px;
}
.profile-topbar {
  max-width: 1180px;
  margin: 0 auto 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.profile-kicker { color:#6fa2ff; font:700 10px/1 'JetBrains Mono',monospace; letter-spacing:2px; }
.profile-topbar h1 { margin:9px 0 5px; font-size:clamp(27px,3vw,40px); letter-spacing:-1px; }
.profile-topbar p { margin:0; color:#8997ad; font-size:13px; }
.profile-top-actions { display:flex; gap:9px; }
.profile-support,.profile-logout {
  padding:10px 15px; border-radius:11px; text-decoration:none; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); color:#cbd5e1;
}
.profile-support:hover { border-color:rgba(111,162,255,.35); color:#9fc0ff; }
.profile-logout:hover { color:#ff9292; border-color:rgba(248,113,113,.25); }
.loading-panel {
  max-width:1180px; margin:auto; min-height:180px; border:1px solid rgba(255,255,255,.08); border-radius:20px;
  background:rgba(255,255,255,.035); display:flex; align-items:center; justify-content:center; color:#8c9ab0; gap:10px;
}
.loading-dot { width:8px; height:8px; border-radius:50%; background:#6fa2ff; box-shadow:0 0 14px #6fa2ff; animation:pulse 1s infinite; }
#app { max-width:1180px; margin:0 auto; }
#app .profile-section { animation: sectionIn .2s ease; }
.profile-welcome {
  display:grid; grid-template-columns:1.25fr .75fr; gap:16px; margin-bottom:16px;
}
.profile-hero-card {
  position:relative; overflow:hidden; min-height:190px; padding:28px; border-radius:22px;
  background:linear-gradient(135deg,rgba(47,111,237,.22),rgba(124,92,255,.12) 48%,rgba(255,255,255,.035));
  border:1px solid rgba(111,162,255,.22); box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.profile-hero-card:after { content:""; position:absolute; width:260px;height:260px;border-radius:50%;right:-100px;top:-110px;background:radial-gradient(circle,rgba(111,162,255,.24),transparent 70%); }
.profile-hero-card h2 { position:relative;z-index:1;font-size:25px;margin:0 0 9px; }
.profile-hero-card p { position:relative;z-index:1;max-width:580px;color:#a6b2c5;line-height:1.9;margin:0; }
.profile-quick {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.profile-quick .quick-tile {
  border:1px solid rgba(255,255,255,.07); border-radius:17px; padding:18px; background:rgba(255,255,255,.035);
  text-decoration:none; color:inherit; transition:.18s; display:flex; flex-direction:column; justify-content:center;
}
.profile-quick .quick-tile:hover { transform:translateY(-2px); border-color:rgba(111,162,255,.28); background:rgba(255,255,255,.055); }
.quick-tile strong { font-size:20px; margin-bottom:5px; }
.quick-tile span { color:#8d9aae; font-size:11px; }
.server-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.server-toolbar h2 { margin:0; font-size:18px; }
.server-search { width:min(300px,100%); background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:11px!important; padding:10px 13px!important; color:#fff; }
.server-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
.server-modern-card {
  border:1px solid rgba(255,255,255,.075); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border-radius:18px; padding:16px; transition:.18s; box-shadow:0 12px 35px rgba(0,0,0,.12);
}
.server-modern-card:hover { transform:translateY(-2px); border-color:rgba(111,162,255,.26); }
.server-modern-top { display:flex; gap:12px; align-items:center; }
.server-modern-icon { width:48px;height:48px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,#1769e8,#7c5cff);display:grid;place-items:center;font-weight:900;font-size:18px; }
.server-modern-name { min-width:0; flex:1; }
.server-modern-name b { display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.server-modern-name small { color:#7f8ca1; display:block; margin-top:4px; }
.server-manage { width:100%; margin-top:13px; padding:10px; border-radius:11px; border:1px solid rgba(111,162,255,.25); background:rgba(47,111,237,.12); color:#a9c3ff; font-weight:800; cursor:pointer; }
.server-manage:hover { background:rgba(47,111,237,.22); }
.profile-section .card { border-color:rgba(255,255,255,.075); background:rgba(255,255,255,.035); }
@media(max-width:800px){
  .profile-topbar{flex-direction:column}.profile-top-actions{width:100%}.profile-support,.profile-logout{flex:1;text-align:center}
  .profile-welcome{grid-template-columns:1fr}.profile-quick{grid-template-columns:repeat(2,1fr)}
  .server-toolbar{align-items:stretch;flex-direction:column}.server-search{width:100%}
}

/* Fast command discovery */
.nav-search-wrap { padding: 0 2px 10px; }
.nav-search {
  width:100%; padding:10px 12px; border-radius:11px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045); color:var(--text); outline:none; font:500 12px/1.2 inherit;
}
.nav-search::placeholder { color:#68758a; }
.nav-search:focus { border-color:rgba(111,162,255,.38); box-shadow:0 0 0 3px rgba(47,111,237,.08); }
.nav-category:first-child { margin-bottom:8px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.055); }
.nav-category:first-child .nav-category-header { color:#8eb3ff; }

/* ============================================================
   VERDO COMMAND CENTER — professional command management UI
   ============================================================ */
.command-center { max-width: 1180px; margin: 0 auto; padding-bottom: 50px; }
.command-hero {
  position:relative; overflow:hidden; min-height:150px; border-radius:22px; padding:28px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:linear-gradient(135deg,rgba(10,143,255,.18),rgba(88,101,242,.12) 52%,rgba(255,255,255,.035));
  border:1px solid rgba(54,159,255,.24); box-shadow:0 22px 55px rgba(0,70,160,.13);
}
.command-hero:after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; inset-inline-start:-150px; top:-230px; background:radial-gradient(circle,rgba(21,180,255,.18),transparent 68%); }
.command-kicker { position:relative; z-index:1; font:800 10px/1 'JetBrains Mono',monospace; letter-spacing:2.2px; color:#62b8ff; margin-bottom:9px; }
.command-hero h2 { position:relative; z-index:1; margin:0; font-size:30px; color:#fff; letter-spacing:-.5px; }
.command-hero p { position:relative; z-index:1; margin:8px 0 0; color:#9eb3cb; font-size:13px; }
.command-hero-mark { position:relative; z-index:1; width:130px; display:flex; flex-direction:column; gap:7px; opacity:.9; }
.command-hero-mark span { display:block; height:4px; border-radius:99px; background:linear-gradient(90deg,#16b9ff,rgba(88,101,242,.05)); }
.command-hero-mark span:nth-child(1){width:100%}.command-hero-mark span:nth-child(2){width:72%;margin-inline-start:auto}.command-hero-mark span:nth-child(3){width:44%;margin-inline-start:auto}
.command-toolbar { margin:15px 0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(3,20,37,.76); display:flex; gap:10px; align-items:center; }
.command-search-box { flex:1; min-width:180px; height:43px; border:1px solid rgba(0,145,255,.22); background:rgba(255,255,255,.035); border-radius:11px; display:flex; align-items:center; padding:0 12px; gap:9px; }
.command-search-box span { color:#60b9ff; font-size:20px; line-height:1; }
.command-search-box input { border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; width:100%; color:#fff; padding:0!important; margin:0!important; }
.command-tabs { display:flex; gap:5px; background:rgba(0,0,0,.14); padding:4px; border-radius:10px; }
.command-tab { border:0; background:transparent; color:#7f9ab5; border-radius:8px; padding:9px 14px; font:700 12px inherit; cursor:pointer; }
.command-tab:hover { color:#cfe7ff; }
.command-tab.active { color:#fff; background:linear-gradient(135deg,#0a91f7,#315de9); box-shadow:0 7px 18px rgba(15,112,240,.22); }
.command-group { margin-top:22px; }
.command-group-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.command-group-head h3 { margin:0; color:#e8f4ff; font-size:16px; }
.command-group-head span { color:#6f91af; font-size:11px; }
.command-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.command-card { border:1px solid rgba(255,255,255,.075); background:linear-gradient(145deg,rgba(4,30,53,.92),rgba(3,19,35,.92)); border-radius:15px; padding:14px; transition:.16s ease; }
.command-card:hover { transform:translateY(-2px); border-color:rgba(42,155,255,.34); box-shadow:0 15px 32px rgba(0,50,120,.16); }
.command-card-top { display:flex; align-items:center; gap:11px; }
.command-icon { width:42px;height:42px; flex:0 0 42px; display:grid;place-items:center; border-radius:12px; color:#aee0ff; background:linear-gradient(145deg,rgba(10,145,247,.19),rgba(75,85,210,.13)); border:1px solid rgba(37,158,255,.18); font-size:18px; }
.command-main-copy { min-width:0; flex:1; }
.command-name-row { display:flex; align-items:center; gap:7px; min-width:0; }
.command-name-row code { color:#eaf6ff; font:800 13px 'JetBrains Mono',monospace; }
.command-category { color:#6ea7d2; font-size:9px; border:1px solid rgba(74,163,229,.18); padding:3px 6px; border-radius:999px; white-space:nowrap; }
.command-main-copy p { margin:5px 0 0; color:#7691a9; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.command-open { border:1px solid rgba(0,148,255,.27); background:rgba(0,129,240,.10); color:#8bcbff; padding:7px 10px; border-radius:9px; font:800 11px inherit; cursor:pointer; }
.command-open:hover { background:rgba(0,145,255,.2); color:#fff; }
.command-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.045); color:#6f8ba4; font-size:9px; }
.command-perm-state { margin-inline-start:auto; color:#7fcda8; }
.command-perm-state.restricted { color:#ffd27a; }
.command-loading,.command-empty { min-height:210px; border:1px dashed rgba(67,150,225,.2); border-radius:18px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#7c9ab5; background:rgba(255,255,255,.018); }
.command-empty b { color:#d9ebfb; font-size:14px; }.command-empty small{color:#708aa3}
.shortcut-panel { border:1px solid rgba(255,255,255,.075); background:linear-gradient(145deg,rgba(4,30,53,.92),rgba(3,19,35,.92)); border-radius:18px; padding:18px; }
.shortcut-panel-head { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }.shortcut-panel-head h3{margin:0;color:#eaf5ff;font-size:19px}.shortcut-panel-head p{margin:6px 0 0;color:#7894ad;font-size:11px}.shortcut-badge{border:1px solid rgba(27,163,255,.22);background:rgba(0,133,255,.09);color:#7fcaff;padding:7px 9px;border-radius:9px;font-size:10px;font-weight:800}
.shortcut-form { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin:18px 0; }.shortcut-form input,.permission-add select{height:42px!important;margin:0!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;color:#eaf5ff!important;border-radius:10px!important}.command-primary,.command-danger{border:0;border-radius:10px;padding:0 15px;min-height:42px;font:800 11px inherit;cursor:pointer;color:#fff;background:linear-gradient(135deg,#0a94ff,#315de9)}.command-danger{background:rgba(220,62,91,.14);border:1px solid rgba(240,92,117,.22);color:#ff9bad}.command-table-wrap{overflow:auto}.command-table-wrap table{width:100%;border-collapse:separate;border-spacing:0 5px}.command-table-wrap th{text-align:right;color:#64829d;font-size:9px;padding:6px 9px}.command-table-wrap td{padding:11px 9px;background:rgba(255,255,255,.025);border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.045);font-size:11px}.command-table-wrap td:first-child{border-radius:9px 0 0 9px}.command-table-wrap td:last-child{border-radius:0 9px 9px 0}.shortcut-key{display:inline-block;border:1px solid rgba(109,170,218,.18);background:rgba(255,255,255,.04);padding:4px 7px;border-radius:6px;color:#a8d7fa;font-family:'JetBrains Mono',monospace}.table-action{border:0;background:transparent;color:#82bdf0;cursor:pointer;font-size:10px}.table-action:hover{color:#fff}.default-shortcut-row{opacity:.8}
.command-drawer-backdrop{position:fixed;inset:0;background:rgba(0,8,18,.68);backdrop-filter:blur(7px);z-index:1000;display:flex;justify-content:flex-start;direction:ltr}.command-drawer{direction:rtl;width:min(510px,94vw);height:100%;background:linear-gradient(180deg,#071a2d,#04111f);border-inline-end:1px solid rgba(0,153,255,.25);box-shadow:22px 0 70px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:drawerIn .2s ease}.drawer-head{padding:25px 24px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:15px}.drawer-kicker{font:800 9px 'JetBrains Mono',monospace;letter-spacing:1.7px;color:#5bbaff}.drawer-head h2{margin:7px 0 4px;color:#fff;font:900 24px 'JetBrains Mono',monospace}.drawer-head p{margin:0;color:#7894ad;font-size:11px;line-height:1.7}.drawer-close{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#9eb5ca;font-size:22px;cursor:pointer}.drawer-close:hover{color:#fff;background:rgba(255,255,255,.08)}.drawer-body{padding:20px 24px;overflow:auto;flex:1}.drawer-section{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.055)}.drawer-section>label,.drawer-section-title label{display:block;color:#e7f4ff;font-weight:800;font-size:12px;margin-bottom:10px}.drawer-section-title{display:flex;justify-content:space-between;align-items:center}.drawer-section-title span{font-size:9px;color:#6d8da7}.option-chips,.shortcut-preview{display:flex;flex-wrap:wrap;gap:6px}.option-chip,.shortcut-preview span{padding:6px 8px;border-radius:7px;border:1px solid rgba(64,157,225,.16);background:rgba(255,255,255,.035);color:#9acff4;font-size:9px}.drawer-help{color:#6f8da7;font-size:10px;line-height:1.8;margin:-2px 0 11px}.permission-add{display:grid;grid-template-columns:1fr auto auto;gap:6px}.permission-add select{padding:0 9px!important}.permission-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}.permission-row{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);border-radius:9px}.permission-row>div{min-width:0;flex:1}.permission-row b{display:block;color:#dceeff;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.permission-row small{display:block;color:#66859f;font-size:8px;margin-top:3px}.permission-pill{padding:4px 7px;border-radius:6px;font-size:8px;font-weight:800}.permission-pill.allow{background:rgba(35,211,146,.10);color:#63e6ae}.permission-pill.deny{background:rgba(248,113,113,.10);color:#ff9292}.drawer-footer{padding:14px 24px;border-top:1px solid rgba(255,255,255,.06)}.drawer-footer .secondary{width:100%;height:42px;font-size:11px}.drawer-footer .secondary:hover{background:rgba(255,255,255,.08)}
@keyframes drawerIn{from{transform:translateX(-25px);opacity:.4}to{transform:translateX(0);opacity:1}}
@media(max-width:760px){.command-hero{min-height:130px;padding:22px}.command-hero-mark{display:none}.command-toolbar{flex-direction:column;align-items:stretch}.command-tabs{display:grid;grid-template-columns:1fr 1fr}.command-tab{width:100%}.command-grid{grid-template-columns:1fr}.shortcut-form{grid-template-columns:1fr}.command-open{padding:7px 8px}.command-main-copy p{font-size:10px}.command-card{padding:12px}.command-drawer{width:100%}}

/* VERDO Command Center v2 — collapsible controls inspired by the reference video */
.command-toolbar-v2{align-items:center}
.command-toolbar-actions{display:flex;gap:8px;align-items:center}
.command-options-toggle{height:42px;min-width:112px;padding:0 13px;border:1px solid rgba(85,159,225,.20);border-radius:11px;background:rgba(255,255,255,.035);color:#cce8fb;cursor:pointer;font:800 11px inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s ease}
.command-options-toggle b{font-size:12px;color:#6e9fc4;transition:transform .18s ease}
.command-options-toggle.active{border-color:rgba(64,164,255,.42);background:rgba(20,133,255,.10);color:#fff}
.command-options-toggle.active b{transform:rotate(180deg);color:#8bcfff}
.command-options-panel{margin:10px 0 16px;padding:12px;border:1px solid rgba(95,165,222,.13);background:linear-gradient(145deg,rgba(6,29,50,.86),rgba(3,17,30,.92));border-radius:15px;display:grid;grid-template-columns:auto 180px 180px 1fr;gap:10px;align-items:start}
.command-option-block{min-width:0}
.command-option-label{display:block;color:#6f91ab;font-size:9px;font-weight:900;margin:0 0 6px 2px}
.command-view-switch{display:flex;gap:5px}
.command-view-btn{height:36px;padding:0 11px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#86a4bb;border-radius:9px;font:800 10px inherit;cursor:pointer}
.command-view-btn.active{color:#fff;border-color:rgba(50,158,255,.34);background:rgba(27,137,239,.12)}
.command-filter-select{width:100%;height:36px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#071a2d;color:#d7edff;padding:0 9px;font:700 10px inherit;outline:none}
.shortcut-howto{border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.018);overflow:hidden}
.shortcut-howto-toggle{width:100%;height:36px;padding:0 11px;border:0;background:transparent;color:#b9d9ef;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:800 10px inherit}
.shortcut-howto-toggle b{color:#6d92ae}
.shortcut-howto-body{padding:0 11px 10px;color:#7796ae;font-size:9px;line-height:1.75}
.shortcut-howto-body p{margin:4px 0 7px}
.shortcut-howto-body code{color:#d9f0ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:2px 5px;border-radius:5px}
.shortcut-example{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#86a9c2}
.shortcut-example strong{color:#bce3ff;background:rgba(36,143,229,.08);border:1px solid rgba(64,157,225,.15);padding:4px 7px;border-radius:6px}

/* The command drawer behaves like the reference: controls are closed until tapped. */
.drawer-collapse{width:100%;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.025);color:#dceeff;border-radius:11px;min-height:52px;margin:0 0 7px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;text-align:right;cursor:pointer;transition:.18s ease}
.drawer-collapse:hover,.drawer-collapse.active{border-color:rgba(56,157,239,.25);background:rgba(28,137,229,.065)}
.drawer-collapse>span{display:flex;align-items:center;gap:8px;min-width:0}
.drawer-collapse>span b{font-size:11px}
.drawer-collapse>span small{font-size:8px;color:#6c8ba3;font-weight:700}
.drawer-collapse> b{font-size:13px;color:#74a8cd}
.drawer-collapse-body{display:none;padding:5px 2px 14px}
.drawer-collapse-body.open{display:block;animation:collapseIn .16s ease}
@keyframes collapseIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.alias-add{height:42px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid rgba(78,160,222,.18);border-radius:10px;background:rgba(255,255,255,.025);margin:8px 0}
.alias-add>span{color:#69b9f0;font:900 13px 'JetBrains Mono',monospace}
.alias-add input{height:100%;flex:1;border:0!important;outline:0!important;background:transparent!important;color:#e7f6ff!important;font:700 10px inherit!important;margin:0!important;padding:0!important}
.alias-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.alias-row{display:flex;align-items:center;gap:8px;min-height:37px;padding:0 9px;border:1px solid rgba(255,255,255,.05);border-radius:8px;background:rgba(255,255,255,.018)}
.alias-row .shortcut-key{margin-left:auto}
.alias-type,.alias-default{font-size:8px;color:#6d8da7}
.alias-type{color:#67d6a5}

@media(max-width:900px){
  .command-options-panel{grid-template-columns:1fr 1fr}
  .shortcut-howto{grid-column:1/-1}
}
@media(max-width:760px){
  .command-toolbar-v2{gap:8px}
  .command-toolbar-v2 .command-search-box{width:100%}
  .command-toolbar-actions{width:100%}
  .command-options-toggle{width:100%}
  .command-options-panel{grid-template-columns:1fr;padding:10px}
  .shortcut-howto{grid-column:auto}
  .command-view-switch{width:100%}
  .command-view-btn{flex:1}
  .drawer-collapse{min-height:50px}
}

/* VERDO Command Center v3 — compact command cards inspired by the reference video */
.command-center-v3{max-width:1160px}
.command-hero-v3{display:flex;align-items:center;justify-content:space-between;gap:18px}
.command-hero-tools{display:flex;align-items:center;gap:12px}
.command-language-toggle{height:38px;padding:0 13px;border-radius:10px;border:1px solid rgba(76,162,235,.2);background:rgba(255,255,255,.035);color:#cce8fb;font:800 10px inherit;cursor:pointer}
.command-language-toggle:hover{border-color:rgba(76,162,235,.45);background:rgba(28,137,229,.09)}
.command-options-panel-v3{grid-template-columns:180px 180px 180px 1fr}
.command-group-v3{margin-top:22px}
.command-group-v3 .command-group-head{margin-bottom:10px}
.command-group-v3 .command-group-head h3{font-size:16px}
.command-group-v3 .command-group-head span{font-size:9px}
.command-grid-v3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.command-card-v3{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:13px;border-radius:14px;border:1px solid rgba(87,156,208,.11);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));transition:.18s ease}
.command-card-v3:hover{transform:translateY(-1px);border-color:rgba(65,159,235,.28);box-shadow:0 12px 35px rgba(0,0,0,.15)}
.command-card-v3.is-disabled{opacity:.58}
.command-card-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(80,100,220,.18),rgba(18,127,224,.08));border:1px solid rgba(108,143,255,.13);font-size:20px;grid-row:1/3}
.command-card-v3 .command-main-copy{min-width:0}
.command-card-v3 .command-main-copy p{margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7895ac;font-size:10px}
.command-disabled-note{display:block;color:#ff9b9b;font-size:8px;margin-top:4px}
.command-card-v3 .command-name-row{display:flex;align-items:center;gap:7px;min-width:0}
.command-card-v3 .command-name-row code{font-size:13px;color:#edf8ff}
.command-card-v3 .command-category{font-size:8px;color:#76a4c4;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.035);white-space:nowrap}
.command-toggle{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.command-toggle input{position:absolute;opacity:0;pointer-events:none}
.command-toggle span{width:46px;height:25px;border-radius:999px;background:#182636;border:1px solid rgba(255,255,255,.08);position:relative;transition:.18s ease}
.command-toggle span:after{content:'';position:absolute;width:19px;height:19px;top:2px;left:3px;border-radius:50%;background:#93a5b6;transition:.18s ease;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.command-toggle input:checked+span{background:linear-gradient(135deg,#3868ee,#178edb);border-color:rgba(91,169,255,.35)}
.command-toggle input:checked+span:after{left:22px;background:#fff}
.command-edit-icon{width:35px;height:35px;border-radius:10px;border:1px solid rgba(94,129,255,.17);background:rgba(71,70,190,.11);color:#a9b7ff;cursor:pointer;font-size:17px;display:grid;place-items:center}
.command-edit-icon:hover{background:rgba(71,70,190,.22);color:#fff}
.command-meta-v3{grid-column:2/5;display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.command-meta-v3 span{font-size:8px;color:#68869f;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.018);border-radius:6px;padding:4px 6px}
.command-meta-v3 .command-perm-state.restricted{color:#ffd08a;border-color:rgba(255,183,77,.13);background:rgba(255,183,77,.06)}
.command-center-v3 .command-empty{min-height:220px;display:grid;place-content:center;text-align:center}
.command-center-v3 .shortcut-panel-v3{border-radius:16px}
.mini-toggle{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex}
.mini-toggle span{width:34px;height:19px;border-radius:999px;background:#253344;border:1px solid rgba(255,255,255,.08);position:relative;display:block}
.mini-toggle span:after{content:'';position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;background:#93a5b6;transition:.16s ease}
.mini-toggle.on span{background:#2766e7}.mini-toggle.on span:after{left:17px;background:#fff}
.drawer-command-state{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;margin-bottom:10px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.025);color:#8ca9bf;font-size:10px}
.command-drawer-v3 .alias-row{gap:9px}
.command-drawer-v3 .alias-row .shortcut-key{margin-left:0}
@media(max-width:900px){.command-grid-v3{grid-template-columns:1fr}.command-options-panel-v3{grid-template-columns:1fr 1fr}.command-hero-v3{align-items:flex-start}}
@media(max-width:760px){.command-hero-v3{flex-direction:column}.command-hero-tools{width:100%;justify-content:space-between}.command-options-panel-v3{grid-template-columns:1fr}.command-card-v3{grid-template-columns:44px minmax(0,1fr) auto auto;padding:11px}.command-card-icon{width:40px;height:40px;font-size:18px}.command-toggle span{width:42px}.command-toggle input:checked+span:after{left:20px}.command-meta-v3{grid-column:2/5}.command-edit-icon{width:32px;height:32px}}


/* v4 command taxonomy: admin / help / general are explicit sections. */
.command-category-summary{grid-column:1/-1}
.command-category-pills{display:flex;gap:6px;flex-wrap:wrap}
.command-category-pill{height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025);color:#8ca9bf;font:800 9px inherit;cursor:pointer;transition:.18s ease}
.command-category-pill:hover,.command-category-pill.active{border-color:rgba(65,161,242,.34);background:rgba(24,133,236,.12);color:#dff3ff}
.command-group-kicker{font-size:8px;letter-spacing:1.5px;color:#55748d;font-weight:900;margin-bottom:2px}
.command-group-admin .command-group-head h3{color:#dff3ff}
.command-group-help .command-group-head h3{color:#cceaff}
.command-group-general .command-group-head h3{color:#b9dbf2}
@media(max-width:980px){.command-options-panel{grid-template-columns:1fr 1fr}.command-category-summary{grid-column:1/-1}}
@media(max-width:620px){.command-options-panel{grid-template-columns:1fr}.command-category-summary{grid-column:auto}.command-category-pills{max-height:110px;overflow:auto}}


/* VERDO PROFILE — clean light-blue identity treatment */
.profile-id-card-pro{position:relative;overflow:hidden;padding-top:0!important;background:linear-gradient(180deg,rgba(76,166,255,.08),rgba(255,255,255,.015));border:1px solid rgba(111,162,255,.12);border-radius:18px;margin-bottom:18px}.profile-cover-mini{height:62px;margin:0 -6px 0;background:radial-gradient(circle at 50% 0%,rgba(88,184,255,.42),transparent 55%),linear-gradient(135deg,#0c2743,#0a1424)}.profile-id-card-pro .avatar-wrap{margin-top:-35px;z-index:2}.profile-id-card-pro .avatar-wrap img{border:3px solid #0b1523;box-shadow:0 8px 24px rgba(0,0,0,.28)}.profile-online-dot{position:absolute;right:2px;bottom:5px;width:13px;height:13px;border-radius:50%;background:#20dca9;border:3px solid #0b1523;box-shadow:0 0 10px rgba(32,220,169,.5)}.profile-badges{display:flex;gap:6px;justify-content:center;margin-top:8px}.profile-badges span{font-size:8px;font-weight:900;letter-spacing:.5px;color:#b9dcf5;border:1px solid rgba(111,190,255,.18);background:rgba(64,160,235,.08);border-radius:999px;padding:4px 7px}.profile-id-card-pro .profile-wallet-chip{background:rgba(80,174,255,.08);border-color:rgba(111,190,255,.2);color:#b8dcf5}.wallet-dot{width:7px;height:7px;border-radius:50%;background:#70c8ff;box-shadow:0 0 9px rgba(112,200,255,.6)}
.profile-user-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;margin-bottom:14px;border:1px solid rgba(111,162,255,.16);border-radius:20px;background:linear-gradient(135deg,rgba(74,163,255,.13),rgba(255,255,255,.035));box-shadow:0 18px 55px rgba(0,0,0,.16)}.profile-eyebrow{font:800 9px/1 'JetBrains Mono',monospace;letter-spacing:2px;color:#73bcf3}.profile-user-banner h2{margin:8px 0 4px;font-size:26px}.profile-user-banner p{margin:0;color:#8fa4bb;font-size:12px}.profile-user-mini{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.035);min-width:220px}.profile-user-mini img{width:42px;height:42px;border-radius:12px;object-fit:cover}.profile-user-mini b{display:block;font-size:12px}.profile-user-mini small{display:block;color:#71859b;font-size:8px;margin-top:3px}@media(max-width:700px){.profile-user-banner{align-items:flex-start;flex-direction:column}.profile-user-mini{width:100%;min-width:0}.profile-id-card-pro{border-radius:16px}}

/* Dashboard command taxonomy: Admin + General are the two primary columns. */
.command-primary-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.command-primary-section{border:1px solid rgba(111,190,255,.12);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(62,158,238,.035));padding:12px}.command-primary-section h3{margin:0 0 10px;font-size:13px;color:#dff3ff}.command-primary-section .command-grid-v3{margin:0}.command-primary-section.admin{border-color:rgba(79,153,255,.18)}.command-primary-section.general{border-color:rgba(111,190,255,.15)}@media(max-width:850px){.command-primary-sections{grid-template-columns:1fr}}

/* ============================================================
   VERDO v5 — clean light-blue SaaS dashboard skin
   Inspired by the supplied reference: white cards, soft blue
   accents, compact information hierarchy and mobile-first polish.
   ============================================================ */
:root {
  --bg: #f3f7fd;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --card-hover: #f9fbff;
  --border: #e3ebf7;
  --border-soft: #edf2f8;
  --accent: #2677f5;
  --accent-2: #3d8cff;
  --accent-bright: #1769e8;
  --accent-dim: #dbeaff;
  --text: #17213a;
  --muted: #71809b;
  --muted-soft: #94a1b6;
  --success: #20b47a;
  --success-bg: #e9faf3;
  --danger: #e85d67;
  --rail-bg: #ffffff;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 8px 28px rgba(44, 83, 135, .07);
  --shadow-glow: 0 7px 24px rgba(38,119,245,.16);
  --glow-1: rgba(78,146,255,.16);
  --glow-2: rgba(135,184,255,.12);
  --glow-3: rgba(38,119,245,.08);
}
html { color-scheme: light; }
body {
  background: radial-gradient(800px 420px at 88% -5%, rgba(89,153,255,.16), transparent 60%), radial-gradient(700px 380px at -5% 10%, rgba(145,195,255,.12), transparent 60%), #f3f7fd;
  color: var(--text);
}
.shell { direction: ltr; }
.sidebar, .main-wrap { direction: rtl; }
.sidebar {
  background: rgba(255,255,255,.94);
  border-inline-end: 1px solid #e7eef8;
  border-inline-start: 0;
  box-shadow: 8px 0 30px rgba(42,77,120,.04);
  width: 228px;
  padding: 20px 14px;
}
.brand { padding: 0 7px 18px; }
.brand-logo img { background:#fff; box-shadow:none; }
.brand-name { color:#15213b; }
.brand-sub { color:#8b99af; }
.server-picker-btn, .nav-search { background:#f7faff; border-color:#e1eaf6; color:#26334d; }
.server-picker { margin-bottom:12px; }
nav button.nav-item { color:#5f6f89; padding:10px 11px; }
nav button.nav-item:hover { background:#f1f6fd; color:#1c2b46; }
nav button.nav-item.active { background:#e6f0ff; border-color:#d2e3ff; color:#1769e8; }
nav button.nav-item.active::before { background:#2677f5; }
.nav-category-header { color:#9aa7ba; }
.sidebar-footer { border-color:#e7eef8; }
.main-wrap { background:transparent; }
header.topbar {
  min-height:72px; padding:13px 28px; background:rgba(255,255,255,.86); border-bottom:1px solid #e7eef8; box-shadow:0 2px 15px rgba(45,79,126,.04);
}
.topbar-search { width:min(520px,48vw); height:40px; border:1px solid #e0e9f5; background:#f8fbff; border-radius:10px; display:flex; align-items:center; gap:10px; padding:0 13px; color:#70819b; }
.topbar-search input { border:0; outline:0; background:transparent; flex:1; font:inherit; color:#26334d; min-width:0; }
.topbar-search kbd { font-size:10px; color:#8b98aa; border:1px solid #dce6f2; background:#fff; border-radius:5px; padding:3px 6px; white-space:nowrap; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-icon { width:38px;height:38px;border:1px solid #e3ebf6;background:#fff;border-radius:11px;color:#5d6e88;position:relative;cursor:pointer; }
.notification-btn i { position:absolute; top:-4px; right:-4px; min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ed5a63;color:#fff;font-size:9px;font-style:normal;display:grid;place-items:center; }
.profile-chip { display:flex;align-items:center;gap:9px;text-decoration:none;color:#17213a;padding:4px 5px 4px 8px;border:1px solid transparent;border-radius:12px; }
.profile-chip:hover { background:#f4f8fd;border-color:#e1eaf5; }
.profile-chip img { width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eef4fc; }
.profile-chip-copy { display:flex;flex-direction:column;line-height:1.1;min-width:70px; }
.profile-chip-copy b { font-size:12px; }
.profile-chip-copy small { color:#7b8ba5;font-size:10px;margin-top:4px; }
.profile-chevron { color:#8090a7; }
.lang-btn { background:#fff;border-color:#e2eaf5;color:#52627b; }
main { max-width:1400px; padding:24px 28px 48px; }

.modern-dashboard { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
.dashboard-main { min-width:0; }
.welcome-card { min-height:160px; border:1px solid #dce8f7; border-radius:16px; background:linear-gradient(105deg,#f7fbff 0%,#edf5ff 56%,#e7f0ff 100%); box-shadow:0 10px 30px rgba(45,101,177,.08); padding:22px 24px; display:flex; justify-content:space-between; align-items:center; overflow:hidden; position:relative; }
.welcome-card:after { content:"";position:absolute;width:270px;height:270px;border-radius:50%;right:-100px;top:-110px;background:radial-gradient(circle,rgba(49,124,245,.18),transparent 68%); }
.welcome-copy { position:relative;z-index:1; }
.welcome-user { display:flex;align-items:center;gap:12px; }
.welcome-user img { width:56px;height:56px;border-radius:17px;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 18px rgba(39,111,221,.18); }
.welcome-user span { display:block;color:#71819b;font-size:11px;margin-bottom:4px; }
.welcome-user strong { display:block;font-size:22px;color:#16233e; }
.welcome-copy p { margin:10px 0;color:#71809b;font-size:12px; }
.welcome-badges { display:flex;gap:7px;flex-wrap:wrap; }
.welcome-badges span { padding:5px 10px;border-radius:20px;background:#fff;border:1px solid #dce8f7;color:#52708f;font-size:10px;font-weight:700; }
.welcome-badges .badge-online { color:#16a673;background:#eafaf4;border-color:#ccefe1; }
.welcome-brand { position:relative;z-index:1;display:flex;align-items:center;gap:6px;color:#256edb;font-size:24px;font-weight:900;opacity:.95; }
.welcome-brand img { width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(39,118,239,.25)); }
.dashboard-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0; }
.stat-card { background:#fff;border:1px solid #e2ebf6;border-radius:13px;padding:15px;display:flex;align-items:center;gap:11px;min-width:0;box-shadow:var(--shadow-card); }
.stat-icon { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex-shrink:0; }
.soft-blue{background:#eaf3ff;color:#2677f5}.soft-indigo{background:#edf1ff;color:#4b68dc}.soft-purple{background:#f1ecff;color:#7b5ce1}.soft-green{background:#e9faf3;color:#18a975}
.stat-card small{display:block;color:#7b8aa0;font-size:10px;white-space:nowrap}.stat-card b{display:block;color:#14213b;font-size:21px;margin:3px 0}.stat-card em{font-style:normal;color:#24b47b;font-size:9px}.stat-card em.uptime{color:#8b98ab}
.dashboard-grid-2 { display:grid;grid-template-columns:1.12fr .88fr;gap:14px; }
.panel-card { background:#fff;border:1px solid #e1eaf5;border-radius:14px;box-shadow:var(--shadow-card);padding:16px; }
.panel-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px; }.panel-head h2{margin:0;color:#17233c;font-size:15px}.panel-head p{margin:4px 0 0;color:#8492a7;font-size:10px}.link-btn{border:0;background:transparent;color:#2677f5;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.range-pill{font-size:10px;color:#71819a;background:#f5f8fc;border:1px solid #e4ebf5;padding:6px 9px;border-radius:8px}
.quick-command-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:8px; }
.quick-command { border:1px solid #e4ebf5;background:#fbfdff;border-radius:10px;padding:10px;display:flex;align-items:center;gap:9px;text-align:right;cursor:pointer;font-family:inherit;color:#17233c;transition:.15s; }.quick-command:hover{border-color:#c8ddfb;background:#f3f8ff;transform:translateY(-1px)}.quick-command-icon{width:32px;height:32px;border-radius:9px;background:#edf5ff;color:#2677f5;display:grid;place-items:center;flex-shrink:0}.quick-command span:nth-child(2){flex:1;min-width:0}.quick-command b{display:block;font-size:11px}.quick-command small{display:block;color:#8491a5;font-size:9px;margin-top:2px}.quick-command i{font-style:normal;color:#9ba8bb}
.server-profile-card{background:#f7faff;border:1px solid #e6eef8;border-radius:11px;padding:12px;display:flex;align-items:center;gap:10px}.server-profile-card img{width:48px;height:48px;border-radius:14px;object-fit:cover}.server-profile-card strong{display:block;font-size:12px}.server-profile-card span{display:block;color:#8090a5;font-size:9px;margin-top:4px}.mini-tags{display:flex;gap:4px;margin-top:6px}.mini-tags b{font-size:8px;color:#2677f5;background:#eaf3ff;padding:3px 6px;border-radius:8px}.server-details{margin:11px 0}.server-details div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #edf2f7;font-size:10px}.server-details div:last-child{border-bottom:0}.server-details span{color:#7c8ba2}.server-details b{font-weight:700;color:#52627b;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.green-text{color:#19ad77!important}.primary-ref.full{width:100%;border:0}
.dashboard-grid-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.fake-chart{height:210px;position:relative;padding:8px 8px 28px 38px}.fake-chart svg{width:100%;height:180px;display:block}.chart-y{position:absolute;left:0;top:9px;bottom:30px;display:flex;flex-direction:column;justify-content:space-between;color:#9aa7ba;font-size:9px}.chart-x{position:absolute;left:40px;right:4px;bottom:2px;display:flex;justify-content:space-between;color:#9aa7ba;font-size:8px}.activity-list>div{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #edf2f7}.activity-list>div:last-child{border-bottom:0}.activity-list b{font-size:10px;color:#384861}.activity-list small{color:#99a5b7;font-size:8px}.activity-dot{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:11px}.activity-dot.green{background:#e8faf2;color:#18ad77}.activity-dot.purple{background:#f1edff;color:#7a5be0}.activity-dot.red{background:#fff0f1;color:#e05c69}.activity-dot.orange{background:#fff5e9;color:#e28b2d}.activity-dot.blue{background:#eaf3ff;color:#2677f5}
.dashboard-side{display:flex;flex-direction:column;gap:14px}.side-profile-card{background:#fff;border:1px solid #e1eaf5;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}.profile-cover{height:66px;background:linear-gradient(120deg,#dcecff,#f0f7ff 52%,#cfe4ff);position:relative}.profile-cover:after{content:"";position:absolute;inset:auto -20px -55px auto;width:160px;height:160px;border-radius:50%;background:rgba(53,126,241,.13)}.side-profile-body{padding:0 14px 10px;display:flex;align-items:end;gap:10px;position:relative}.side-profile-avatar{width:60px;height:60px;border-radius:17px;object-fit:cover;border:4px solid #fff;box-shadow:0 5px 16px rgba(44,101,174,.15);margin-top:-25px}.side-profile-body h2{font-size:13px;margin:0;color:#17233c}.side-profile-body p{font-size:9px;color:#8190a4;margin:3px 0 0}.profile-status{margin-inline-start:auto;color:#1bb27c;font-size:14px;margin-bottom:7px}.side-profile-tags{display:flex;gap:6px;padding:0 14px 14px}.side-profile-tags span{font-size:8px;color:#2874df;background:#edf5ff;border-radius:8px;padding:4px 7px}.top-commands .panel-head{margin-bottom:4px}.top-command-row{display:grid;grid-template-columns:28px 1fr 42px;gap:7px;align-items:center;padding:11px 0;border-bottom:1px solid #edf2f7}.top-command-row:last-child{border-bottom:0}.top-command-row>b{width:27px;height:27px;border-radius:8px;background:#eef5ff;color:#2878e8;display:grid;place-items:center;font-size:11px}.top-command-row span{font-size:10px;font-weight:800}.top-command-row span small{display:block;color:#8b99ad;font-weight:500;font-size:8px;margin-top:2px}.top-command-row strong{text-align:left;font-size:9px;color:#6e7e97}.top-command-row i{grid-column:2 / 4;height:5px;border-radius:5px;background:#edf2f8;overflow:hidden}.top-command-row u{display:block;height:100%;background:#4388ef;border-radius:5px;text-decoration:none}.premium-card{border:1px solid #dce8f7;border-radius:14px;background:linear-gradient(135deg,#edf5ff,#f8fbff);padding:16px;text-align:center;box-shadow:var(--shadow-card)}.premium-card img{width:56px;height:56px;object-fit:contain}.premium-card h3{margin:5px 0;font-size:12px}.premium-card p{font-size:9px;color:#8190a4;margin:0 0 10px}.premium-card .primary-ref{width:100%}
@media(max-width:1100px){.modern-dashboard{grid-template-columns:1fr}.dashboard-side{display:grid;grid-template-columns:1fr 1fr}.premium-card{grid-column:span 2}.dashboard-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){header.topbar{padding:12px 16px}.topbar-search{width:48vw}.sidebar{width:210px}.dashboard-grid-2,.dashboard-grid-bottom{grid-template-columns:1fr}.dashboard-side{grid-template-columns:1fr}.premium-card{grid-column:auto}}
@media(max-width:650px){.shell{display:block!important}.sidebar{width:100%!important;height:auto!important;position:relative!important}.main-wrap{width:100%!important}.topbar{position:relative!important;flex-wrap:wrap;gap:8px}.topbar-search{width:100%;order:2}.topbar-actions{width:100%;justify-content:flex-end}.profile-chip-copy{display:none}.welcome-card{min-height:185px;padding:18px}.welcome-brand{position:absolute;left:12px;bottom:8px;opacity:.22}.welcome-user strong{font-size:18px}.dashboard-stats{grid-template-columns:repeat(2,1fr)}.stat-card{padding:11px}.stat-card b{font-size:17px}.quick-command-grid{grid-template-columns:1fr}.dashboard-grid-2,.dashboard-grid-bottom{grid-template-columns:1fr}main{padding:14px 12px 34px}}


/* ============================================================
   VERDO v20 — Dashboard home, light-blue reference layout
   This block is intentionally scoped to the main dashboard shell.
   ============================================================ */
#particles-canvas{display:none!important}
html{color-scheme:light!important}
body{background:#f4f8ff!important;color:#10213f!important}
.shell{direction:ltr!important;background:linear-gradient(135deg,#f7fbff 0%,#eef5ff 55%,#f8fbff 100%);min-height:100vh}
.sidebar,.main-wrap{direction:rtl}
.sidebar{width:222px!important;flex:0 0 222px!important;background:rgba(255,255,255,.96)!important;border-right:1px solid #e4edf8!important;border-left:0!important;box-shadow:8px 0 28px rgba(35,82,140,.05)!important;padding:18px 14px!important}
.main-wrap{min-width:0!important;flex:1!important;background:transparent}
.brand{padding:4px 8px 16px!important}
.brand-logo{width:42px!important;height:42px!important;border-radius:13px!important;background:#fff!important;box-shadow:0 7px 18px rgba(37,112,229,.16)!important}
.brand-logo img{width:100%!important;height:100%!important;object-fit:contain!important}
.server-picker{margin-bottom:14px!important}
.server-picker-btn{background:#f8fbff!important;border:1px solid #dfeaf8!important;box-shadow:0 4px 12px rgba(35,82,140,.04)!important;color:#18355d!important;border-radius:13px!important}
.server-picker-btn:hover{border-color:#bfd7f5!important;background:#f3f8ff!important}
.nav-search-wrap{padding:0 2px 12px!important}
.nav-search{background:#f7faff!important;border-color:#e0eaf6!important;color:#17355c!important}
.nav-category-header{color:#91a0b5!important}
.nav-item{color:#526681!important}
.nav-item:hover{background:#f0f6ff!important;color:#1769e8!important}
.nav-item.active{background:linear-gradient(90deg,#e7f1ff,#f5f9ff)!important;color:#1264db!important;border-color:#d3e5fb!important;box-shadow:inset -3px 0 0 #1769e8!important}
.sidebar-footer{color:#8a99ad!important}
header.topbar{direction:rtl!important;min-height:68px!important;background:rgba(255,255,255,.92)!important;border-bottom:1px solid #e3ebf6!important;box-shadow:0 4px 20px rgba(35,82,140,.045)!important;padding:12px 28px!important}
.topbar-search{background:#f8fbff!important;border:1px solid #dce8f6!important;border-radius:12px!important;box-shadow:none!important;color:#6b7d96!important}
.topbar-search input{color:#19365e!important}
.topbar-search kbd{background:#fff!important;border-color:#e0e8f3!important;color:#7b8ca3!important}
.topbar-actions{gap:9px!important}
.notification-btn,.lang-btn,.profile-chip{background:#fff!important;border:1px solid #dce7f4!important;color:#50627d!important;box-shadow:0 4px 12px rgba(35,82,140,.035)!important}
.profile-chip{padding:5px 8px!important}
main{max-width:none!important;padding:22px 28px 54px!important}
.modern-dashboard{max-width:1220px!important;grid-template-columns:minmax(0,1fr) 286px!important;gap:16px!important;margin:0 auto!important}
.welcome-card{min-height:164px!important;border-radius:18px!important;background:linear-gradient(105deg,#ffffff 0%,#f3f8ff 57%,#e7f1ff 100%)!important;border-color:#d9e7f7!important;box-shadow:0 12px 30px rgba(39,95,161,.07)!important}
.welcome-user img{width:64px!important;height:64px!important;border-radius:50%!important;border:5px solid #fff!important;box-shadow:0 7px 20px rgba(37,112,229,.15)!important}
.welcome-user strong{color:#122d53!important}
.welcome-user span{color:#71829b!important}
.welcome-copy>p{color:#71829b!important}
.welcome-badges span{background:#fff!important;border-color:#dbe8f7!important;color:#41617f!important}
.welcome-badges .badge-online{background:#eaf9f2!important;color:#159a6b!important;border-color:#cceedd!important}
.welcome-brand{color:#1769e8!important}
.welcome-brand img{filter:drop-shadow(0 12px 22px rgba(37,112,229,.22))!important}
.dashboard-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:14px 0!important}
.stat-card{min-height:106px!important;background:rgba(255,255,255,.97)!important;border-color:#dce8f6!important;border-radius:15px!important;box-shadow:0 8px 22px rgba(31,83,145,.06)!important}
.stat-card b{color:#122d53!important}
.panel-card,.side-profile-card,.premium-card{background:rgba(255,255,255,.97)!important;border-color:#dfe9f5!important;box-shadow:0 8px 24px rgba(31,83,145,.055)!important;border-radius:15px!important}
.panel-head h2{color:#142e52!important}
.panel-head p{color:#8392a8!important}
.quick-command{background:#fbfdff!important;border-color:#e2ebf6!important}
.quick-command:hover{background:#f1f7ff!important;border-color:#c7dcf7!important}
.quick-command-icon{background:#eaf3ff!important;color:#2578e8!important}
.server-profile-card{background:#f7faff!important;border-color:#e2ebf5!important}
.server-details div{border-color:#edf2f7!important}
.dashboard-grid-2,.dashboard-grid-bottom{gap:14px!important}
.side-profile-card .profile-cover{height:74px!important;background:linear-gradient(120deg,#dcecff,#f1f7ff 52%,#cfe3ff)!important}
.side-profile-avatar{border-color:#fff!important}
.top-command-row{border-color:#edf2f7!important}
.premium-card{background:linear-gradient(135deg,#eef6ff,#fff)!important}

/* dashboard-only profile page visual: keep it separate from Discord /profile */
.profile-shell{direction:ltr;background:linear-gradient(135deg,#f7fbff 0%,#eef5ff 55%,#f9fcff 100%)!important;color:#10213f!important}
.profile-sidebar,.profile-main{direction:rtl}
.profile-sidebar{background:rgba(255,255,255,.95)!important;border-right:1px solid #e2ebf6!important;border-left:0!important;box-shadow:8px 0 28px rgba(35,82,140,.05)!important}
.profile-main{background:transparent!important}
.profile-id-card-pro,.profile-section .card,.profile-topbar .profile-support,.profile-topbar .profile-logout{background:#fff!important;color:#17355d!important;border-color:#dce8f5!important;box-shadow:0 8px 24px rgba(31,83,145,.05)!important}
.profile-topbar h1{color:#122d53!important}.profile-topbar p{color:#71829b!important}.profile-kicker{color:#1769e8!important}
.profile-nav button{color:#526681!important}.profile-nav button.active{background:linear-gradient(90deg,#e7f1ff,#f5f9ff)!important;color:#1264db!important;border-color:#d3e5fb!important}
.profile-hero-card{background:linear-gradient(135deg,#fff,#edf5ff)!important;border-color:#dbe8f6!important;color:#17355d!important;box-shadow:0 12px 30px rgba(39,95,161,.07)!important}
.profile-hero-card p{color:#71829b!important}
.profile-quick .quick-tile,.profile-section .card{background:#fff!important;border-color:#dfe9f5!important;color:#17355d!important}

@media(max-width:1050px){.modern-dashboard{grid-template-columns:1fr!important}.dashboard-side{display:grid!important;grid-template-columns:1fr 1fr!important}.premium-card{grid-column:span 2!important}}
@media(max-width:850px){.sidebar{width:210px!important;flex-basis:210px!important}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){.shell{display:block!important}.sidebar{width:100%!important;flex-basis:auto!important}.main-wrap{width:100%!important}main{padding:14px 12px 34px!important}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-side{grid-template-columns:1fr!important}.premium-card{grid-column:auto!important}}


/* ============================================================
   VERDO v21 — real mobile/off-canvas navigation
   Desktop stays unchanged; phones get a compact app shell with
   a hamburger menu, slide-out sidebar and touch-friendly cards.
   ============================================================ */
.mobile-menu-btn{display:none}
.mobile-sidebar-backdrop{display:none}
@media(max-width:650px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0!important}
  .shell{display:block!important;min-height:100vh!important}
  .sidebar{
    position:fixed!important;z-index:1000!important;top:0!important;right:0!important;bottom:0!important;
    width:min(86vw,320px)!important;height:100dvh!important;max-height:100dvh!important;
    flex:none!important;overflow-y:auto!important;overflow-x:hidden!important;
    transform:translateX(105%)!important;transition:transform .25s ease,box-shadow .25s ease!important;
    padding:16px 12px 22px!important;border-left:1px solid #dce8f6!important;border-right:0!important;
    box-shadow:-18px 0 45px rgba(24,70,130,.16)!important
  }
  body.mobile-sidebar-open .sidebar{transform:translateX(0)!important}
  .mobile-sidebar-backdrop{
    display:block;position:fixed;inset:0;z-index:999;background:rgba(15,37,68,.34);
    opacity:0;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(2px)
  }
  body.mobile-sidebar-open .mobile-sidebar-backdrop{opacity:1;pointer-events:auto}
  .main-wrap{width:100%!important;min-width:0!important}
  header.topbar{
    position:sticky!important;top:0;z-index:900!important;min-height:60px!important;
    display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;
    gap:8px!important;padding:9px 10px!important
  }
  .mobile-menu-btn{
    display:grid!important;place-items:center;width:42px;height:42px;border:1px solid #dce8f6;border-radius:12px;
    background:#fff;color:#1769e8;font-size:21px;line-height:1;box-shadow:0 5px 14px rgba(35,82,140,.06);cursor:pointer
  }
  .topbar-search{width:auto!important;min-width:0!important;height:42px!important;padding:0 10px!important}
  .topbar-search input{min-width:0!important;width:100%!important;font-size:11px!important}
  .topbar-search kbd{display:none!important}
  .topbar-actions{width:auto!important;gap:5px!important;display:flex!important}
  .lang-btn{display:none!important}
  .notification-btn{width:40px!important;height:40px!important}
  .profile-chip{width:40px!important;height:40px!important;padding:4px!important;display:grid!important;place-items:center!important;border-radius:12px!important}
  .profile-chip img{width:30px!important;height:30px!important}
  .profile-chip-copy,.profile-chevron{display:none!important}
  main{padding:12px 10px 30px!important}
  .modern-dashboard{width:100%!important;max-width:none!important;display:block!important}
  .welcome-card{min-height:150px!important;padding:16px!important;overflow:hidden!important}
  .welcome-user{gap:9px!important;max-width:78%!important}
  .welcome-user img{width:52px!important;height:52px!important}
  .welcome-user strong{font-size:16px!important}
  .welcome-copy>p{font-size:9px!important;line-height:1.6!important}
  .welcome-badges{gap:4px!important;flex-wrap:wrap!important}
  .welcome-badges span{font-size:8px!important;padding:4px 6px!important}
  .welcome-brand{opacity:.18!important;right:-18px!important;left:auto!important;bottom:0!important}
  .welcome-brand img{width:130px!important;height:130px!important}
  .dashboard-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0!important}
  .stat-card{min-height:88px!important;padding:10px!important;border-radius:13px!important}
  .stat-card b{font-size:16px!important}
  .stat-card p,.stat-card small{font-size:8px!important}
  .dashboard-grid-2,.dashboard-grid-bottom{display:block!important}
  .dashboard-grid-2>.panel-card,.dashboard-grid-bottom>.panel-card{margin-bottom:10px!important}
  .dashboard-side{display:block!important;margin-top:10px!important}
  .dashboard-side>*{margin-bottom:10px!important}
  .quick-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .quick-command{min-height:58px!important;padding:8px!important}
  .quick-command span{font-size:8px!important}
  .quick-command small{font-size:7px!important}
  .panel-card,.side-profile-card,.premium-card{border-radius:13px!important}
  .panel-head{gap:7px!important}
  .panel-head h2{font-size:12px!important}
  .panel-head p{font-size:8px!important}
  .fake-chart{height:180px!important}
  .server-profile-card{padding:10px!important}
  .top-command-row{grid-template-columns:28px minmax(0,1fr) 42px!important;padding:9px 0!important}
  .top-command-row span{font-size:9px!important}
  .top-command-row span small{font-size:7px!important}
  .premium-card{padding:13px!important}
  .sidebar .brand{padding-bottom:12px!important}
  .sidebar .nav-search-wrap{padding-bottom:10px!important}
  .sidebar-footer{padding-bottom:12px!important}
}
@media(max-width:390px){
  .dashboard-stats{grid-template-columns:1fr 1fr!important}
  .quick-command-grid{grid-template-columns:1fr 1fr!important}
  .welcome-user{max-width:100%!important}
  .welcome-copy>p{max-width:70%!important}
}

/* ============================================================
   VERDO — Exact Light Blue / White Reference UI
   Reference: 4523.png
   ============================================================ */
:root{
  --bg:#f4f8fe;
  --bg-soft:#f8fbff;
  --card:#ffffff;
  --card-hover:#fbfdff;
  --border:#dce8f6;
  --border-soft:#e8eff7;
  --accent:#2f7cf6;
  --accent-2:#2f7cf6;
  --accent-bright:#1769e8;
  --accent-dim:#2168d7;
  --gold-light:#ffe7a3;
  --text:#172b4d;
  --muted:#687b96;
  --muted-soft:#8a9ab0;
  --success:#18b981;
  --success-bg:#e7faf3;
  --danger:#ef5b6b;
  --danger-bg:#fff0f2;
  --rail-bg:#ffffff;
  --radius:16px;
  --radius-sm:11px;
  --shadow-card:0 8px 24px rgba(35,82,140,.055);
  --shadow-glow:0 8px 24px rgba(47,124,246,.12);
  --glow-1:rgba(91,157,255,.16);
  --glow-2:rgba(196,220,255,.24);
  --glow-3:rgba(91,157,255,.10);
}
html{color-scheme:light!important;background:#f4f8fe}
body{
  background:
    radial-gradient(900px 500px at 92% -8%,rgba(91,157,255,.18),transparent 62%),
    radial-gradient(800px 500px at -8% 16%,rgba(201,225,255,.30),transparent 60%),
    linear-gradient(180deg,#f7fbff 0%,#f2f7fd 100%)!important;
  color:#172b4d!important;
}
#particles-canvas{display:none!important}
.shell{background:transparent!important}
.sidebar{
  width:220px!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-inline-start:0!important;
  border-inline-end:1px solid #e1eaf5!important;
  box-shadow:4px 0 24px rgba(35,82,140,.035)!important;
  padding:18px 12px!important;
}
.brand{padding:4px 8px 18px!important;gap:10px!important}
.brand-logo img{width:44px!important;height:44px!important;object-fit:contain!important}
.brand .brand-name{font-size:17px!important;color:#172b4d!important;background:none!important;-webkit-text-fill-color:initial!important}
.brand .brand-sub{color:#8292a8!important}
.server-picker{margin-bottom:12px!important}
.server-picker-btn{background:#f8fbff!important;border:1px solid #dce8f6!important;border-radius:12px!important;color:#233b60!important;box-shadow:none!important}
.server-picker-menu{background:#fff!important;border-color:#dce8f6!important;box-shadow:0 12px 30px rgba(35,82,140,.12)!important}
.nav-search-wrap{padding:0 2px 10px!important}
.nav-search{background:#f8fbff!important;border:1px solid #e1eaf5!important;color:#29466c!important;border-radius:10px!important}
nav button.nav-item{color:#526681!important;border-radius:10px!important;padding:9px 10px!important}
nav button.nav-item:hover{background:#f3f8ff!important;color:#1769e8!important}
nav button.nav-item.active{
  background:linear-gradient(90deg,#e5f1ff,#f2f7ff)!important;
  border-color:#d5e7fb!important;
  color:#1769e8!important;
  box-shadow:none!important;
}
nav button.nav-item.active::before{background:#2f7cf6!important}
.nav-category-header{color:#91a0b4!important}
.sidebar-footer{border-top-color:#e7eef6!important}
.sidebar-footer a.back-link{color:#1769e8!important}
.main-wrap{background:transparent!important}
header.topbar{
  background:rgba(255,255,255,.90)!important;
  border-bottom:1px solid #e2ebf5!important;
  padding:12px 24px!important;
  box-shadow:0 3px 18px rgba(35,82,140,.025)!important;
  backdrop-filter:blur(18px)!important;
}
.topbar-search{background:#f8fbff!important;border:1px solid #dce8f6!important;border-radius:12px!important;color:#70819b!important}
.topbar-search input{color:#19365e!important}
.topbar-search kbd{background:#fff!important;border-color:#dce6f2!important;color:#8797aa!important}
.notification-btn,.lang-btn,.profile-chip{background:#fff!important;border:1px solid #dce7f4!important;color:#50627d!important;box-shadow:0 4px 12px rgba(35,82,140,.035)!important}
.profile-chip:hover{background:#f4f8fd!important;border-color:#d5e3f2!important}
main{max-width:1240px!important;padding:24px 24px 54px!important}
.modern-dashboard{max-width:1180px!important;grid-template-columns:minmax(0,1fr) 286px!important;gap:16px!important}
.welcome-card{
  min-height:164px!important;
  border:1px solid #d9e7f7!important;
  border-radius:17px!important;
  background:linear-gradient(105deg,#ffffff 0%,#f4f9ff 55%,#e5f0ff 100%)!important;
  box-shadow:0 12px 30px rgba(39,95,161,.07)!important;
}
.welcome-card:after{background:radial-gradient(circle,rgba(47,124,246,.16),transparent 68%)!important}
.welcome-user strong,.welcome-user span{color:#17355d!important}
.welcome-copy>p{color:#71829b!important}
.welcome-badges span{background:#eef6ff!important;color:#1769e8!important;border-color:#dceafa!important}
.welcome-badges .badge-online{background:#e7faf3!important;color:#12a875!important}
.welcome-brand{opacity:.22!important}
.welcome-brand img{filter:none!important}
.stat-card,.panel-card,.side-profile-card,.premium-card{
  background:rgba(255,255,255,.97)!important;
  border:1px solid #dfe9f5!important;
  box-shadow:0 8px 24px rgba(31,83,145,.055)!important;
  border-radius:15px!important;
}
.stat-card{min-height:106px!important}
.stat-card .stat-label,.stat-card small{color:#71829b!important}
.stat-card b{color:#142e52!important}
.stat-card em{color:#19ad7e!important}
.stat-icon{box-shadow:none!important}
.panel-head h2{color:#142e52!important}
.panel-head p{color:#8392a8!important}
.link-btn{color:#1769e8!important;background:transparent!important;border:0!important}
.quick-command{background:#fbfdff!important;border:1px solid #e2ebf6!important;color:#17355d!important;border-radius:11px!important}
.quick-command:hover{background:#f1f7ff!important;border-color:#c7dcf7!important}
.quick-command-icon{background:#eaf3ff!important;color:#2578e8!important}
.quick-command b{color:#244263!important}
.quick-command small{color:#8a9ab0!important}
.server-profile-card{background:#f7faff!important;border-color:#e2ebf5!important}
.server-profile-card strong{color:#17355d!important}
.server-profile-card span{color:#8090a5!important}
.mini-tags b{background:#eaf5ff!important;color:#1769e8!important}
.server-details div{border-color:#edf2f7!important}
.server-details span{color:#7e8ea5!important}
.server-details b{color:#284568!important}
.primary-ref,button.primary{background:linear-gradient(135deg,#2f7cf6,#1769e8)!important;border:0!important;color:#fff!important;box-shadow:0 8px 18px rgba(47,124,246,.20)!important}
.dashboard-grid-2,.dashboard-grid-bottom{gap:14px!important}
.fake-chart{background:#fff!important}
.range-pill{background:#f5f9ff!important;border-color:#dce8f6!important;color:#6f8097!important}
.top-command-row{border-color:#edf2f7!important}
.top-command-row span{color:#274665!important}
.top-command-row span small{color:#8998aa!important}
.top-command-row strong{color:#60738c!important}
.top-command-row i{background:#e9f1fa!important}
.top-command-row i u{background:#3d8cff!important}
.side-profile-card .profile-cover{height:76px!important;background:linear-gradient(120deg,#dcecff,#f1f7ff 52%,#cfe3ff)!important}
.side-profile-avatar{border-color:#fff!important;box-shadow:0 4px 14px rgba(39,95,161,.12)!important}
.side-profile-body h2{color:#17355d!important}
.side-profile-body p{color:#8292a8!important}
.side-profile-tags span{background:#eef6ff!important;color:#1769e8!important}
.premium-card{background:linear-gradient(135deg,#eef6ff,#fff)!important}
.premium-card h3{color:#17355d!important}
.premium-card p{color:#8292a8!important}
.activity-list>div{border-color:#edf2f7!important}
.activity-list b{color:#31506f!important}
.activity-list small{color:#8b9aab!important}

/* Forms / command center: same clean reference language */
.card,.app-panel-card,.settings-panel,.command-card{background:#fff!important;border-color:#dfe9f5!important;color:#17355d!important;box-shadow:0 8px 24px rgba(31,83,145,.05)!important}
input,select,textarea{background:#f8fbff!important;border-color:#dce8f6!important;color:#213c60!important}
input::placeholder,textarea::placeholder{color:#9aa8b9!important}
.pill.on{background:#e7faf3!important;color:#11a979!important}
.pill.off{background:#fff0f2!important;color:#df5264!important}
code{background:#f3f8ff!important;border-color:#dce8f6!important;color:#1769e8!important}

/* Desktop proportions from reference */
@media(min-width:1101px){
  .sidebar{width:220px!important}
  .modern-dashboard{grid-template-columns:minmax(0,1fr) 286px!important}
  .dashboard-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .dashboard-grid-2{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important}
  .dashboard-grid-bottom{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)!important}
}

/* Mobile: preserve the exact white/blue language while using the existing off-canvas menu */
@media(max-width:650px){
  body{background:linear-gradient(180deg,#f7fbff 0%,#f1f6fd 100%)!important}
  .sidebar{background:#fff!important;border-left:1px solid #dce8f6!important}
  header.topbar{background:rgba(255,255,255,.96)!important;border-bottom-color:#e2ebf5!important}
  .mobile-menu-btn{background:#fff!important;color:#1769e8!important;border-color:#dce8f6!important}
  .mobile-sidebar-backdrop{background:rgba(25,57,95,.20)!important}
  main{padding:12px 10px 30px!important}
  .modern-dashboard{display:block!important;max-width:none!important}
  .welcome-card{min-height:150px!important}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-grid-2,.dashboard-grid-bottom{display:block!important}
  .dashboard-grid-2>.panel-card,.dashboard-grid-bottom>.panel-card{margin-bottom:10px!important}
  .dashboard-side{display:block!important}
}


/* VERDO server picker — installed vs. not installed */
.server-option--uninstalled { opacity: .88; }
.server-option--uninstalled:hover { background: #f4f7fb !important; }
.server-option-icon--uninstalled {
  filter: grayscale(1);
  opacity: .62;
  background: #eef2f7 !important;
  color: #8794a7 !important;
  border: 1px solid #dce4ee;
}
.server-option-add {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; flex: none;
  background: #eef5ff; color: #2879e8;
  border: 1px solid #d7e7fb; font-size: 18px; font-weight: 700;
}
.server-option--uninstalled .server-option-copy small { color: #4b83cf !important; font-weight: 700; }
@media (max-width: 650px) {
  .server-picker-menu { max-height: 70vh; }
  .server-option { padding: 10px 9px; }
  .server-option-icon { width: 42px; height: 42px; }
}

/* ============================================================
   VERDO FINAL DASHBOARD FIX — reference white/blue + server picker
   ============================================================ */
.server-picker-btn{
  height:64px!important;
  background:linear-gradient(180deg,#ffffff,#f7fbff)!important;
  border:1px solid #dbe8f6!important;
  color:#17355d!important;
  box-shadow:0 6px 18px rgba(35,82,140,.045)!important;
}
.server-picker-icon{
  width:44px!important;height:44px!important;border-radius:12px!important;
  background:#edf5ff!important;border:1px solid #d8e7f7!important;
}
.server-picker-copy b{color:#17355d!important;font-size:12px!important;max-width:155px!important}
.server-picker-copy small{color:#8292a8!important;font-size:9px!important}
.server-picker-chevron{color:#6d86a5!important;font-size:18px!important}
.server-picker-menu{
  top:70px!important;
  background:#fff!important;
  border:1px solid #dbe7f4!important;
  box-shadow:0 18px 42px rgba(35,82,140,.14)!important;
  padding:7px!important;
}
.server-option{color:#294667!important;background:#fff!important}
.server-option:hover,.server-option.active{background:#f1f7ff!important;color:#1769e8!important}
.server-option-icon{background:#edf5ff!important;color:#1769e8!important;border:1px solid #dce8f6!important}
.server-option-copy b{color:#294667!important}
.server-option-copy small{color:#8493a7!important}
.server-option-check{color:#18b981!important}
.server-option--uninstalled{opacity:1!important}
.server-option--uninstalled .server-option-icon,
.server-option-icon--uninstalled{filter:grayscale(1)!important;opacity:.58!important;background:#eef2f6!important;color:#8997a8!important;border-color:#dce4ec!important}
.server-option--uninstalled .server-option-copy b{color:#5f7188!important}
.server-option--uninstalled .server-option-copy small{color:#3177d9!important;font-weight:800!important}
.server-option-add{background:#edf5ff!important;color:#2475e8!important;border:1px solid #d5e5f8!important}
.server-empty{color:#8190a5!important}

/* Keep the reference layout airy and avoid accidental dark inherited blocks. */
body,.shell,.main-wrap{color:#172b4d!important}
.sidebar{background:rgba(255,255,255,.96)!important}
.nav-item{color:#526681!important}
.nav-item.active{color:#1769e8!important;background:linear-gradient(90deg,#e6f1ff,#f7fbff)!important;border-color:#d5e7fb!important;box-shadow:inset -3px 0 0 #2f7cf6!important}

@media(max-width:650px){
  .server-picker-btn{height:58px!important}
  .server-picker-menu{top:64px!important;max-height:65dvh!important}
  .server-option{padding:10px!important}
  .server-option-icon{width:42px!important;height:42px!important}
  .server-option-copy b{font-size:11px!important}
  .server-option-copy small{font-size:8px!important}
}


/* ============================================================
   VERDO MOBILE CONTENT FIX — keep the reference dashboard visible
   The sidebar stays off-canvas; the actual dashboard content must
   always occupy the viewport and retain the white/blue palette.
   ============================================================ */
@media (max-width: 650px){
  html,body{min-height:100%;height:auto!important;background:#f4f8fe!important;color:#172b4d!important}
  body{overflow-x:hidden!important}
  .shell{display:block!important;width:100%!important;min-height:100dvh!important;background:linear-gradient(180deg,#f7fbff 0%,#eef5fd 100%)!important}
  .main-wrap{display:block!important;position:relative!important;width:100%!important;min-height:100dvh!important;margin:0!important;padding:0!important;background:transparent!important;z-index:1!important}
  header.topbar{display:grid!important;visibility:visible!important;opacity:1!important}
  main#app{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;min-height:calc(100dvh - 60px)!important;background:transparent!important;color:#172b4d!important}
  main#app > .modern-dashboard{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:none!important;margin:0!important}
  .dashboard-main,.dashboard-side,.dashboard-grid-2,.dashboard-grid-bottom{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:none!important}
  .dashboard-side{margin-top:10px!important}
  .welcome-card,.stat-card,.panel-card,.side-profile-card,.premium-card,.quick-command,.server-profile-card{visibility:visible!important;opacity:1!important}
  .welcome-card{display:block!important;background:linear-gradient(135deg,#fff 0%,#f6faff 58%,#e8f2ff 100%)!important;color:#17355d!important}
  .welcome-user,.welcome-copy,.welcome-badges{visibility:visible!important;opacity:1!important}
  .dashboard-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .stat-card{display:flex!important;min-width:0!important;background:#fff!important;color:#17355d!important}
  .dashboard-grid-2>.panel-card,.dashboard-grid-bottom>.panel-card{display:block!important;width:100%!important;margin:0 0 10px!important}
  .quick-command-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .quick-command{display:flex!important;min-width:0!important;color:#17355d!important;background:#fbfdff!important}
  .quick-command b,.quick-command small{visibility:visible!important;opacity:1!important}
  .panel-head h2,.panel-head p,.server-details span,.server-details b,.activity-list b,.activity-list small,.top-command-row span,.top-command-row strong{visibility:visible!important;opacity:1!important}
  .fake-chart{display:block!important;min-height:170px!important;background:#fff!important;overflow:hidden!important}
  .fake-chart svg{display:block!important;width:100%!important;height:150px!important}
  .dashboard-side>*{display:block!important;width:100%!important}
  .server-profile-card{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:9px!important}
  .top-command-row{display:grid!important;visibility:visible!important;opacity:1!important}
  .premium-card{text-align:center!important}
  /* Never let an inherited desktop rule make the mobile content transparent. */
  main#app *{text-shadow:none!important}
}

/* ============================================================
   VERDO AURA — final outer dashboard skin
   Soft white/sky-blue aura for desktop + mobile. Keeps the
   existing sidebar structure and real off-canvas mobile nav.
   ============================================================ */
:root{
  --bg:#f6faff!important;
  --bg-soft:#fbfdff!important;
  --card:#ffffff!important;
  --card-hover:#f8fbff!important;
  --border:#dbe9f8!important;
  --border-soft:#e8f0f8!important;
  --accent:#3b82f6!important;
  --accent-2:#60a5fa!important;
  --accent-bright:#1976e8!important;
  --accent-dim:#2563d9!important;
  --text:#183452!important;
  --muted:#6f839d!important;
  --muted-soft:#91a2b6!important;
  --rail-bg:#f8fbff!important;
  --glow-1:rgba(72,154,255,.18)!important;
  --glow-2:rgba(113,190,255,.13)!important;
  --glow-3:rgba(67,133,255,.10)!important;
  --shadow-card:0 10px 32px rgba(55,112,177,.08)!important;
  --shadow-glow:0 0 0 1px rgba(74,144,255,.16),0 12px 34px rgba(66,145,240,.16)!important;
}

html{color-scheme:light!important;background:#f6faff!important}
body{
  background:
    radial-gradient(760px 420px at 8% -8%,rgba(91,181,255,.22),transparent 62%),
    radial-gradient(900px 520px at 94% 4%,rgba(84,137,255,.16),transparent 64%),
    radial-gradient(760px 520px at 50% 108%,rgba(102,181,255,.13),transparent 64%),
    linear-gradient(180deg,#fafdff 0%,#f3f8fe 100%)!important;
  color:#183452!important;
}

/* A subtle aura layer behind the whole application, not neon. */
.shell{position:relative;isolation:isolate}
.shell:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(520px 280px at 34% 5%,rgba(74,163,255,.11),transparent 70%),
    radial-gradient(560px 330px at 78% 76%,rgba(91,143,255,.08),transparent 72%);
}

/* Sidebar / server rail retain their layout but join the light Aura skin. */
.server-rail{
  background:linear-gradient(180deg,#fafdff 0%,#eef6ff 100%)!important;
  border-inline-end:1px solid #dce9f7!important;
  box-shadow:inset -1px 0 rgba(72,145,232,.04),8px 0 32px rgba(48,112,180,.05)!important;
}
.rail-brand img{background:#fff!important;box-shadow:0 7px 22px rgba(49,126,220,.16)!important}
.rail-divider{background:linear-gradient(90deg,transparent,#8ec5ff,transparent)!important}
.rail-server{background:linear-gradient(135deg,#eef7ff,#dbeeff)!important;color:#2168c7!important;border-color:#d5e7fa!important;box-shadow:0 5px 16px rgba(51,126,214,.08)!important}
.rail-server.active{border-color:#6eafff!important;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(71,145,240,.25),0 7px 20px rgba(56,133,225,.15)!important}
.rail-add{background:#fff!important;border-color:#cfe2f6!important;color:#2879e8!important;box-shadow:0 5px 16px rgba(48,120,210,.06)!important}

.sidebar{
  background:rgba(255,255,255,.86)!important;
  border-inline-start:1px solid #dce9f7!important;
  box-shadow:8px 0 36px rgba(46,102,163,.045)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}

.topbar{
  background:rgba(255,255,255,.78)!important;
  border-bottom:1px solid rgba(215,229,243,.88)!important;
  box-shadow:0 8px 28px rgba(50,105,165,.045)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.topbar-search{background:rgba(248,252,255,.92)!important;border-color:#dce9f7!important;box-shadow:inset 0 1px rgba(255,255,255,.9),0 5px 18px rgba(46,111,180,.04)!important}
.topbar-search input{color:#294969!important}
.topbar-icon,.lang-btn,.profile-chip{background:rgba(255,255,255,.9)!important;border-color:#dce9f7!important;color:#315574!important;box-shadow:0 5px 18px rgba(46,111,180,.05)!important}

.brand-logo{background:linear-gradient(145deg,#ffffff,#eef7ff)!important;border-color:#dceafa!important;box-shadow:0 8px 24px rgba(55,130,219,.12)!important}
.brand-name{color:#17395d!important}
.brand-sub{color:#91a2b5!important}
.nav-search{background:#f8fbff!important;border-color:#dce9f7!important;color:#274968!important}
.nav-item{color:#58708b!important}
.nav-item:hover{background:#f0f7ff!important;color:#2474df!important}
.nav-item.active{background:linear-gradient(90deg,#e7f2ff,#f8fbff)!important;color:#1769e8!important;border-color:#d4e7fb!important;box-shadow:inset -3px 0 #3b82f6,0 6px 18px rgba(52,126,218,.06)!important}

/* Outer cards get a faint blue aura instead of a heavy shadow. */
.card,.panel-card,.app-panel-card,.settings-panel,.command-card,.stat-card,.quick-command,.welcome-card,.side-profile-card,.premium-card,.server-profile-card,.profile-user-banner{
  border-color:#dce9f7!important;
  box-shadow:0 10px 30px rgba(54,113,178,.065),0 0 0 1px rgba(255,255,255,.75) inset!important;
}
.card:hover,.panel-card:hover,.stat-card:hover,.quick-command:hover,.command-card:hover{box-shadow:0 14px 34px rgba(54,125,211,.10),0 0 0 1px rgba(117,184,255,.12)!important}
.welcome-card{
  background:
    radial-gradient(300px 180px at 92% 18%,rgba(79,159,255,.16),transparent 70%),
    linear-gradient(135deg,#fff 0%,#f8fbff 52%,#eaf4ff 100%)!important;
}
.stat-card{background:rgba(255,255,255,.94)!important}
.panel-card,.side-profile-card,.premium-card,.quick-command,.command-card{background:rgba(255,255,255,.94)!important}

button.primary,.primary-ref{
  background:linear-gradient(135deg,#4c97ff,#2877e8)!important;
  border-color:#6eafff!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(43,119,226,.20)!important;
}
button.primary:hover,.primary-ref:hover{filter:brightness(1.03)!important;box-shadow:0 11px 26px rgba(43,119,226,.24)!important}
button:not(.primary){background:#fff!important;color:#3c5874!important;border-color:#dce9f7!important}
button:not(.primary):hover{background:#f2f8ff!important;border-color:#bfdcf7!important}
input,select,textarea{background:#fbfdff!important;border-color:#dce9f7!important;color:#274765!important;box-shadow:0 3px 12px rgba(50,110,175,.025)!important}
input:focus,select:focus,textarea:focus{border-color:#72aff4!important;box-shadow:0 0 0 3px rgba(65,145,238,.12)!important}

/* Mobile: real app layout, no horizontal overflow, sidebar remains off-canvas. */
@media(max-width:650px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .shell{display:block!important;width:100%!important;min-height:100dvh!important}
  .main-wrap{width:100%!important;min-width:0!important}
  header.topbar{background:rgba(255,255,255,.9)!important;box-shadow:0 7px 22px rgba(50,110,175,.06)!important}
  .mobile-menu-btn{background:#fff!important;border-color:#d8e8f8!important;color:#2476e8!important;box-shadow:0 6px 18px rgba(48,120,205,.09)!important}
  main#app{width:100%!important;max-width:100%!important;overflow:hidden!important}
  main#app>.modern-dashboard{width:100%!important;max-width:none!important}
  .dashboard-stats{gap:9px!important}
  .stat-card{min-width:0!important;overflow:hidden!important}
  .welcome-card{overflow:hidden!important}
  .quick-command-grid{gap:9px!important}
  .quick-command{min-width:0!important;overflow:hidden!important}
  .dashboard-grid-2,.dashboard-grid-bottom{width:100%!important;max-width:100%!important}
  .dashboard-grid-2>.panel-card,.dashboard-grid-bottom>.panel-card{width:100%!important;min-width:0!important}
  .fake-chart{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .fake-chart svg{max-width:100%!important}
  .command-grid-v3{grid-template-columns:1fr!important}
  .command-card-v3{grid-template-columns:42px minmax(0,1fr) auto!important}
  .command-meta-v3{grid-column:2/4!important}
  .command-card-icon{width:40px!important;height:40px!important}
  .command-edit-icon{width:32px!important;height:32px!important}
  .command-options-panel-v3,.command-options-panel{grid-template-columns:1fr!important}
  .command-primary-sections{grid-template-columns:1fr!important}
}

@media(max-width:390px){
  main{padding-inline:8px!important}
  .dashboard-stats{gap:7px!important}
  .stat-card{padding:10px!important}
  .quick-command-grid{gap:7px!important}
  .welcome-card{padding:13px!important}
  .topbar{padding-inline:8px!important}
  .topbar-search{padding-inline:8px!important}
}


/* VERDO v21 dashboard runtime */
.v-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.v-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.v-card h2{margin:0 0 18px;font-size:22px}.v-card h3{margin:12px 0}
.v-card.inner{margin:0}.v-grid{display:grid;gap:14px}.v-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.v-grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.v-stat{padding:20px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.035)}.v-stat b{display:block;font-size:28px}.v-stat span{color:var(--muted)}
.v-field{display:flex;flex-direction:column;gap:7px}.v-field span{font-size:13px;color:var(--muted)}.v-field input,.v-field textarea,.v-field select,.v-row input,.v-log-row input{width:100%;background:rgba(0,0,0,.2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 12px;outline:none}.v-field textarea{min-height:100px;resize:vertical}.v-field input:focus,.v-field textarea:focus,.v-field select:focus{border-color:var(--accent)}
.v-check{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025)}.v-check input{accent-color:var(--accent)}
.v-btn{border:1px solid var(--border);border-radius:10px;padding:10px 15px;color:var(--text);background:rgba(255,255,255,.05);cursor:pointer;font:inherit}.v-btn:hover{transform:translateY(-1px);border-color:var(--accent)}.v-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.v-btn.danger{background:var(--danger-bg);color:var(--danger)}.v-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.v-list{display:flex;flex-direction:column;gap:9px}.v-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}.v-item,.v-log-row{display:flex;align-items:center;gap:14px;padding:13px;border:1px solid var(--border);border-radius:12px;margin:8px 0}.v-item span{flex:1;color:var(--muted)}.v-item small{color:var(--muted-soft)}.v-table>div{display:grid;grid-template-columns:60px 1fr 90px;padding:11px;border-bottom:1px solid var(--border);gap:10px}.v-table strong{direction:ltr}.v-log-row{display:grid;grid-template-columns:100px 1fr auto}
.v-loading{min-height:360px;display:grid;place-items:center;align-content:center;color:var(--muted)}.v-spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:vs 1s linear infinite}@keyframes vs{to{transform:rotate(360deg)}}
.v-empty{padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:14px}.v-error{color:var(--danger)}.ok{color:var(--success)}
.v-nav-cat{padding:8px 12px}.v-nav-cat small{display:block;color:var(--muted-soft);padding:8px 10px;font-size:11px}.v-nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:transparent;color:var(--muted);border-radius:10px;cursor:pointer;text-align:right;font:inherit}.v-nav-item:hover,.v-nav-item.active{background:rgba(255,255,255,.07);color:var(--text)}.v-nav-item i{font-style:normal;width:22px;text-align:center}
.v-server-option{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border:0;background:transparent;color:var(--text);cursor:pointer}.v-server-option img{width:32px;height:32px;border-radius:9px}.v-server-option span{flex:1;text-align:right}.v-server-option em{font-size:10px;color:var(--muted);font-style:normal}
#verdo-toast{position:fixed;z-index:9999;right:20px;bottom:20px;padding:13px 18px;background:#10231b;color:#fff;border:1px solid var(--accent);border-radius:12px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s}#verdo-toast.show{transform:none;opacity:1}#verdo-toast[data-bad="1"]{border-color:var(--danger);background:#2b1212}
@media(max-width:900px){.v-grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v-grid.two{grid-template-columns:1fr}.v-row{grid-template-columns:1fr}.v-log-row{grid-template-columns:1fr}.sidebar{position:fixed;z-index:20;inset-block:0;right:0;transform:translateX(110%);transition:.25s}.menu-open .sidebar{transform:none}.mobile-sidebar-backdrop{display:block}.menu-open .mobile-sidebar-backdrop{display:block}.main-wrap{width:100%}}

/* ---------------- Discord-style per-event log settings ---------------- */
.v-logs-page{max-width:980px;margin:0 auto;padding:6px 0 120px}
.v-logs-hero{text-align:center;padding:22px 12px 28px}
.v-logs-hero h1{font-size:42px;line-height:1.15;margin:0 0 12px;font-weight:900;letter-spacing:-.5px}
.v-logs-hero p{margin:0 auto;max-width:720px;color:var(--muted);font-size:17px;line-height:1.9}
.v-logs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v-log-card{position:relative;background:rgba(5,10,25,.72);border:1px solid rgba(255,255,255,.075);border-radius:22px;padding:22px 20px;min-height:250px;box-shadow:0 10px 35px rgba(0,0,0,.12);transition:border-color .18s,box-shadow .18s,transform .18s}
.v-log-card:hover{transform:translateY(-1px);border-color:rgba(124,92,255,.28)}
.v-log-card.is-enabled{border-color:rgba(124,92,255,.22)}
.v-log-card.is-disabled{opacity:.82}
.v-log-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}
.v-log-title{display:flex;align-items:center;gap:14px;flex-direction:row-reverse;font-size:21px;font-weight:800}
.v-log-title span{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(124,92,255,.18),rgba(212,175,55,.06));border:1px solid rgba(124,92,255,.25);font-size:26px}
.v-log-field{display:flex;flex-direction:column;gap:9px;margin-top:18px;color:var(--muted);font-size:14px;font-weight:700}
.v-log-field b{color:var(--muted-soft)}
.v-log-field select{height:52px;width:100%;appearance:none;background:linear-gradient(180deg,rgba(22,17,58,.78),rgba(10,9,31,.88));border:1px solid rgba(124,92,255,.22);border-radius:12px;color:var(--text);padding:0 15px;font:inherit;outline:none;cursor:pointer}
.v-log-field select:focus{border-color:var(--accent)}
.v-color-wrap{height:54px;border-radius:13px;background:var(--accent-dim);border:1px solid rgba(124,92,255,.24);padding:7px 10px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}
.v-color-wrap input[type=color]{width:100%;height:100%;min-width:0;border:0;padding:0;background:transparent;border-radius:9px;cursor:pointer}
.v-color-wrap span{position:absolute;inset-inline-end:14px;pointer-events:none;color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 4px #000}
.v-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;direction:ltr}
.v-switch input{position:absolute;opacity:0;pointer-events:none}
.v-switch-ui{width:78px;height:42px;border-radius:999px;background:#71809b;display:flex;align-items:center;padding:4px;transition:.18s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.v-switch-ui i{width:34px;height:34px;border-radius:50%;background:#fff;display:block;position:relative;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:.18s}
.v-switch-ui i:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#77839a;font-style:normal;font-weight:900;font-size:22px}
.v-switch input:checked + .v-switch-ui{background:linear-gradient(135deg,#6d77d9,#5865f2)}
.v-switch input:checked + .v-switch-ui i{transform:translateX(36px)}
.v-switch input:checked + .v-switch-ui i:after{content:'✓';color:#5865f2;font-size:19px}
.v-savebar{position:fixed;z-index:50;bottom:22px;left:50%;transform:translateX(-50%);width:min(660px,calc(100vw - 28px));display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(17,20,38,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 18px 55px rgba(0,0,0,.4)}
.v-savebar>div:first-child{flex:1;display:flex;flex-direction:column;gap:3px;text-align:right}.v-savebar b{font-size:16px}.v-savebar span{color:var(--muted);font-size:12px}.v-savebar.is-hidden{display:none}
.v-savebar .v-btn{min-width:104px}.v-savebar .v-btn.primary{background:linear-gradient(135deg,#d7b65a,#b89332);color:#16120a;border:0}
@media(max-width:900px){.v-logs-grid{grid-template-columns:1fr}.v-logs-hero h1{font-size:35px}.v-logs-hero p{font-size:15px}.v-log-card{min-height:0}.v-savebar{bottom:18px}}
@media(max-width:560px){.v-logs-page{padding-inline:2px}.v-log-card{padding:20px 18px;border-radius:20px}.v-log-title{font-size:19px}.v-log-title span{width:52px;height:52px}.v-switch-ui{width:72px;height:40px}.v-switch-ui i{width:32px;height:32px}.v-switch input:checked + .v-switch-ui i{transform:translateX(32px)}.v-savebar{gap:8px;padding:12px}.v-savebar .v-btn{min-width:76px;padding-inline:13px}}
\n\n/* VERDO v24 — mobile menu reliability patch */\n@media (max-width:650px){\n  .mobile-menu-btn{\n    position:relative!important;z-index:1201!important;pointer-events:auto!important;touch-action:manipulation!important;\n    display:grid!important;visibility:visible!important;opacity:1!important;\n  }\n  .mobile-sidebar-backdrop{\n    z-index:1100!important;\n  }\n  .sidebar{\n    z-index:1200!important;\n  }\n  body.menu-open .sidebar,\n  body.mobile-sidebar-open .sidebar{\n    transform:translateX(0)!important;\n    visibility:visible!important;\n    opacity:1!important;\n  }\n  body.menu-open .mobile-sidebar-backdrop,\n  body.mobile-sidebar-open .mobile-sidebar-backdrop{\n    opacity:1!important;pointer-events:auto!important;\n  }\n  body.menu-open{overflow:hidden!important;}\n  .sidebar .v-nav-item{\n    min-height:44px!important;touch-action:manipulation!important;pointer-events:auto!important;\n  }\n}\n
/* Discord custom emoji picker for ticket buttons */
.emoji-input-wrap{display:flex;gap:8px;align-items:stretch}.emoji-input-wrap input{flex:1;min-width:0}.emoji-picker-btn{width:46px;border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.10);border-radius:12px;font-size:21px;cursor:pointer;color:inherit}.emoji-picker-btn:hover{background:rgba(124,92,255,.18)}
.emoji-picker-popover{position:fixed;z-index:99999;width:min(360px,calc(100vw - 16px));max-height:min(430px,calc(100vh - 24px));overflow:hidden;background:#111522;border:1px solid rgba(124,92,255,.35);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45);direction:rtl;padding:10px}.emoji-picker-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 9px}.emoji-picker-head button{border:0;background:transparent;color:inherit;font-size:24px;cursor:pointer}.emoji-picker-search input{width:100%;box-sizing:border-box}.emoji-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding-top:9px;overflow:auto;max-height:320px}.emoji-choice{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;border:1px solid transparent;background:rgba(255,255,255,.04);color:inherit;border-radius:10px;padding:7px 4px;cursor:pointer}.emoji-choice:hover{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.12)}.emoji-choice img{width:34px;height:34px;object-fit:contain}.emoji-choice span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.emoji-picker-empty,.emoji-picker-loading{grid-column:1/-1;text-align:center;padding:25px 8px;opacity:.7}.ticket-emoji-section{margin-top:16px}.ticket-emoji-preview{font-size:20px;vertical-align:middle;margin-left:5px}

/* Image upload controls */
.v-upload-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.v-upload-row input[type="text"],.v-upload-row input:not([type]){flex:1;min-width:180px}
.image-upload-trigger{white-space:nowrap}
.upload-file-name{font-size:12px;opacity:.75;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-field>small{display:block;margin-top:5px}

/* ============================================================
   VERDO v34 — Light Blue Parallel World dashboard skin
   Rebuilds the dashboard visual language to match the approved
   reference: airy white cards, blue glass gradients, soft glow,
   spacious desktop layout and mobile-first navigation.
   ============================================================ */
:root{
  --bg:#f4f9ff; --bg-soft:#edf6ff; --card:rgba(255,255,255,.92);
  --card-hover:#fff; --border:rgba(48,112,196,.13); --border-soft:rgba(48,112,196,.08);
  --accent:#287df2; --accent-2:#5b8ff9; --accent-bright:#1f73e8; --accent-dim:#dbeafe;
  --text:#14254d; --muted:#6d7e9d; --muted-soft:#91a0b8; --rail-bg:#fff;
  --success:#20bf82; --success-bg:#e8fbf3; --danger:#ef5b6d; --danger-bg:#fff0f2;
  --radius:18px; --radius-sm:12px;
  --shadow-card:0 10px 30px rgba(45,105,180,.08),0 1px 0 rgba(255,255,255,.9) inset;
  --shadow-glow:0 12px 36px rgba(40,125,242,.18);
  --glow-1:rgba(80,157,255,.18); --glow-2:rgba(137,197,255,.13); --glow-3:rgba(83,149,255,.10);
}
html{color-scheme:light}
body{background:radial-gradient(900px 480px at 90% -10%,rgba(67,145,255,.18),transparent 65%),radial-gradient(700px 430px at 0 20%,rgba(181,222,255,.22),transparent 65%),linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(135deg,transparent 0 48%,rgba(78,151,242,.025) 48.2% 49%,transparent 49.2% 100%);background-size:320px 320px}
.shell{max-width:1540px;margin:22px auto;min-height:calc(100vh - 44px);background:rgba(255,255,255,.62);border:1px solid rgba(64,129,206,.12);border-radius:24px;box-shadow:0 24px 70px rgba(49,105,173,.12);overflow:hidden}
.sidebar{width:228px;background:rgba(255,255,255,.88)!important;border-left:1px solid rgba(52,115,190,.09)!important;box-shadow:none!important;padding:22px 14px!important}
.brand{padding:0 10px 18px!important}.brand-logo{width:44px!important;height:44px!important;border-radius:14px!important;background:linear-gradient(145deg,#eef7ff,#dcecff)!important;box-shadow:0 7px 20px rgba(45,117,216,.18)!important}.brand-name{color:#14295a!important;letter-spacing:.4px}.brand-sub{color:#7890b0!important}
.server-picker{margin:0 4px 16px!important}.server-picker-btn{background:linear-gradient(180deg,#fff,#f5f9ff)!important;border:1px solid #dce8f6!important;color:#19305e!important;box-shadow:0 5px 18px rgba(55,110,174,.06)!important}.server-picker-copy small{color:#8292ac!important}
.nav-search-wrap{padding:0 4px 10px!important}.nav-search{background:#f7fbff!important;border:1px solid #dce8f6!important;color:#213a68!important}.nav-search::placeholder{color:#99a8bd!important}
.sidebar nav{gap:5px!important}.sidebar nav a,.sidebar nav button,.v-nav-item{color:#425575!important;border-radius:11px!important}.sidebar nav a:hover,.sidebar nav button:hover,.v-nav-item:hover{background:#edf5ff!important;color:#1667dc!important}.sidebar nav .active,.sidebar nav a.active,.v-nav-item.active{background:linear-gradient(90deg,#d9ebff,#e9f4ff)!important;color:#176de0!important;box-shadow:inset 3px 0 0 #2b82ef!important}
.sidebar-footer{border-top:1px solid #e4edf8!important;color:#8a99ae!important}.back-link{color:#4e75a7!important}
.main-wrap{background:transparent!important}.topbar{height:74px!important;background:rgba(255,255,255,.76)!important;border-bottom:1px solid rgba(52,115,190,.09)!important;backdrop-filter:blur(18px);padding:0 20px!important}.topbar-search{background:#f7fbff!important;border:1px solid #dce8f6!important;box-shadow:none!important;color:#7f91ac!important}.topbar-search input{color:#233b67!important}.topbar-search kbd{background:#fff!important;border:1px solid #dbe7f4!important;color:#8393aa!important}.topbar-icon,.lang-btn{background:#fff!important;border:1px solid #dce8f6!important;color:#38527a!important;box-shadow:0 4px 12px rgba(50,100,170,.05)}.profile-chip{background:#fff!important;border:1px solid #dce8f6!important;color:#1c315b!important;box-shadow:0 4px 12px rgba(50,100,170,.05)}
#app{padding:24px 26px 30px!important}.dashboard-home{max-width:100%;margin:0 auto}.dash-hero{position:relative;min-height:170px;overflow:hidden;border:1px solid rgba(64,137,224,.18);border-radius:22px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#edf7ff 0%,#fff 48%,#dcecff 100%);box-shadow:0 16px 40px rgba(48,115,194,.10)}.dash-hero:after{content:"";position:absolute;width:420px;height:420px;left:-150px;top:-180px;border-radius:50%;background:rgba(75,145,244,.08);box-shadow:300px 150px 0 rgba(98,164,255,.05)}.dash-hero-copy{position:relative;z-index:2}.dash-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.3px;color:#2679e9;margin-bottom:9px}.status-dot{display:inline-block;width:8px;height:8px;background:#23c989;border-radius:50%;box-shadow:0 0 0 5px rgba(35,201,137,.11);margin-left:6px}.dash-hero h1{font-size:30px;margin:0 0 8px;color:#122653}.dash-hero p{margin:0;color:#647997;font-size:14px}.dash-badges{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.dash-badges span{padding:6px 11px;border-radius:999px;background:#fff;border:1px solid #dbe9f8;color:#3473be;font-size:12px;font-weight:800}.dash-badges span:first-child{color:#16a66f;background:#ecfbf5}.dash-hero-art{width:230px;height:150px;position:relative;display:grid;place-items:center}.hero-orb{width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6fb2ff,#2255c9 70%);box-shadow:0 18px 38px rgba(37,105,225,.28),inset 0 0 30px rgba(255,255,255,.25);display:grid;place-items:center;position:relative;z-index:2}.hero-orb img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(22,75,180,.24))}.hero-glow{position:absolute;width:210px;height:90px;border-radius:50%;background:rgba(69,143,245,.15);filter:blur(15px)}
.dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}.dash-stat{background:rgba(255,255,255,.9);border:1px solid #dce9f7;border-radius:18px;padding:18px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow-card);min-height:104px}.dash-stat-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px;background:#eaf4ff;color:#287df2}.dash-stat strong{display:block;font-size:24px;line-height:1.1;color:#122653;margin:4px 0}.dash-stat span,.dash-stat small{display:block;color:#7084a4;font-size:12px}.dash-stat small{color:#16ac78;font-weight:700}.dash-stat.cyan .dash-stat-icon{background:#e8fbff}.dash-stat.violet .dash-stat-icon{background:#f0ebff}.dash-stat.green .dash-stat-icon{background:#e8fbf3}
.dash-columns{display:grid;grid-template-columns:1.15fr 1fr .86fr;gap:16px;margin-top:16px}.dash-panel{background:rgba(255,255,255,.92);border:1px solid #dce9f7;border-radius:20px;padding:18px;box-shadow:var(--shadow-card)}.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.dash-panel-head h2{font-size:17px;margin:0;color:#172b55}.dash-link{border:0;background:none;color:#287df2;font-weight:800;cursor:pointer}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-tile{position:relative;text-align:right;border:1px solid #e0ebf7;background:linear-gradient(180deg,#fff,#f8fbff);border-radius:14px;padding:13px 12px 11px;cursor:pointer;min-height:78px;color:#243a65}.quick-tile>span{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#eaf4ff;font-size:18px;float:right;margin-left:9px}.quick-tile b{display:block;font-size:12px;padding-top:2px}.quick-tile small{display:block;color:#8a9ab1;margin-top:3px;font-size:10px}.quick-tile i{position:absolute;left:10px;bottom:10px;color:#4d8de1;font-style:normal}.quick-tile:hover{border-color:#a8cff9;box-shadow:0 8px 22px rgba(48,120,215,.08);transform:translateY(-1px)}
.server-summary{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #e2edf8;border-radius:15px;background:#f9fcff}.server-summary>img{width:52px;height:52px;border-radius:15px;object-fit:cover;box-shadow:0 5px 14px rgba(40,105,190,.15)}.server-summary strong{display:block;color:#172b55}.server-summary span{display:block;color:#7b8ca6;font-size:11px;margin-top:3px}.server-pills{display:flex;gap:5px;margin-top:6px}.server-pills em{font-style:normal;font-size:9px;padding:3px 7px;border-radius:99px;background:#e9fbf4;color:#16a874}.server-pills em+em{background:#edf3ff;color:#2874d6}.server-meta{margin:12px 0}.server-meta>div{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid #edf2f8;font-size:11px}.server-meta span{color:#7c8ea9}.server-meta b{color:#42628e;max-width:60%;overflow:hidden;text-overflow:ellipsis}.dash-primary{width:100%;border:0;border-radius:11px;padding:11px;background:linear-gradient(135deg,#287df2,#4d9bff);color:white;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(40,125,242,.2)}
.activity-list{display:flex;flex-direction:column;gap:4px}.activity-item{display:grid;grid-template-columns:36px 1fr auto 10px;align-items:center;gap:8px;padding:9px 7px;border-bottom:1px solid #edf2f8}.activity-item:last-child{border-bottom:0}.activity-item>span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f0f6ff}.activity-item b{display:block;font-size:11px;color:#294168}.activity-item small{display:block;font-size:10px;color:#8191a8;margin-top:2px}.activity-item time{font-size:9px;color:#9aa8ba}.activity-item>i{color:#8aa5c7;font-style:normal}
.dash-bottom{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:16px}.period-chip{font-size:10px;color:#6e83a2;background:#f2f7fc;border:1px solid #dfeaf5;border-radius:999px;padding:6px 9px}.metric-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric-bars>div{padding:13px;border-radius:14px;background:#f8fbff;border:1px solid #e5eef8}.metric-bars span{display:block;color:#788ba8;font-size:11px}.metric-bars b{display:block;color:#172b55;font-size:20px;margin:4px 0 10px}.metric-bars i{display:block;height:7px;border-radius:99px;background:#e8f1fa;overflow:hidden}.metric-bars em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#287df2,#6caeff)}.dash-premium{border-radius:20px;padding:20px;background:linear-gradient(135deg,#edf7ff,#e1efff 55%,#f8fbff);border:1px solid #d5e7fa;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.premium-mark{width:56px;height:56px;border-radius:17px;background:#fff;display:grid;place-items:center;box-shadow:0 9px 20px rgba(52,115,191,.12)}.premium-mark img{width:40px;height:40px;object-fit:contain}.dash-premium h3{margin:0;color:#18305b}.dash-premium p{margin:4px 0 0;color:#7487a4;font-size:11px}.dash-premium button{margin-right:auto;border:0;border-radius:10px;padding:10px 14px;background:#287df2;color:#fff;font-weight:800}
/* Keep existing settings/components readable in the same light system. */
.v-card,.panel-card,.app-panel-card,.settings-panel,.command-card,.stat-card,.quick-command,.welcome-card,.side-profile-card,.premium-card,.server-profile-card,.profile-user-banner{background:rgba(255,255,255,.94)!important;border-color:#dce9f7!important;color:var(--text)!important;box-shadow:var(--shadow-card)!important}.v-card h2,.v-card h3,.panel-card h2,.panel-card h3{color:#1a315d}.v-input,.v-select,.v-textarea,input,select,textarea{background:#fbfdff!important;border-color:#dce8f5!important;color:#1f355d!important}.v-btn.primary,.btn-primary{background:linear-gradient(135deg,#287df2,#4a98ff)!important;box-shadow:0 8px 20px rgba(40,125,242,.18)!important}.v-log-card{background:rgba(255,255,255,.94)!important;border-color:#dce9f7!important;color:#20365f!important;box-shadow:var(--shadow-card)!important}.v-log-card:hover{border-color:#a9cff8!important}.v-log-field select{background:#fbfdff!important;color:#38557e!important}
@media(max-width:1100px){.dash-columns{grid-template-columns:1fr 1fr}.activity-panel{grid-column:1/-1}.dash-bottom{grid-template-columns:1fr}.dash-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.shell{margin:0;border-radius:0;min-height:100vh}.sidebar{width:260px!important}.topbar{height:64px!important;padding:0 10px!important}.topbar-search{display:none}.topbar-actions .lang-btn{display:none}#app{padding:14px!important}.dash-hero{padding:20px;min-height:185px}.dash-hero h1{font-size:22px}.dash-hero-art{width:105px;height:105px}.hero-orb{width:84px;height:84px}.hero-orb img{width:57px;height:57px}.dash-stats{grid-template-columns:1fr 1fr;gap:9px}.dash-stat{padding:12px;min-height:92px}.dash-stat-icon{width:38px;height:38px;font-size:17px}.dash-stat strong{font-size:18px}.dash-columns{grid-template-columns:1fr;gap:12px}.dash-bottom{grid-template-columns:1fr}.metric-bars{grid-template-columns:1fr}.quick-grid{gap:8px}.quick-tile{min-height:72px}.dash-premium{padding:16px}.dash-premium button{width:100%;margin:4px 0 0}.profile-chip-copy{display:none}}
@media(max-width:430px){.dash-hero-art{display:none}.dash-stats{grid-template-columns:1fr 1fr}.dash-panel{padding:14px;border-radius:17px}.dash-panel-head h2{font-size:15px}.quick-tile{padding:10px}.quick-tile>span{width:31px;height:31px}.dash-stat{gap:8px}.dash-stat-icon{flex:0 0 34px}.dash-stat span,.dash-stat small{font-size:10px}}

/* ============================================================
   VERDO v36 — reference dashboard visual system
   Rebuilds the home page to match the supplied light-blue mockup.
   Functional pages keep their existing styling.
   ============================================================ */
.reference-dashboard{max-width:1240px;margin:0 auto;color:#152c52}
.ref-hero{min-height:156px;border:1px solid #d9e8f8;border-radius:18px;background:linear-gradient(105deg,#f9fcff 0%,#eef6ff 58%,#dcecff 100%);box-shadow:0 10px 30px rgba(43,103,177,.08);display:flex;align-items:center;justify-content:space-between;padding:20px 24px;position:relative;overflow:hidden}
.ref-hero:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-145px;background:radial-gradient(circle,rgba(64,137,244,.20),transparent 68%);pointer-events:none}
.ref-hero-copy,.ref-hero-art{position:relative;z-index:1}.ref-welcome-user{display:flex;align-items:center;gap:14px}.ref-welcome-user img{width:62px;height:62px;border-radius:18px;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 20px rgba(36,111,222,.18)}.ref-welcome-user span{font-size:11px;color:#70829d}.ref-welcome-user h1{font-size:23px;margin:3px 0 4px;color:#102b55}.ref-welcome-user p{margin:0;color:#70819b;font-size:11px}.ref-badges{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}.ref-badges span{font-size:10px;font-weight:800;padding:5px 10px;border-radius:20px;background:#fff;border:1px solid #d9e7f6;color:#4c6583}.ref-badges .online{color:#119c6c;background:#eafaf3;border-color:#c9eddd}.ref-hero-art{display:flex;align-items:center;gap:10px;color:#1769e8;margin-left:20px}.ref-hero-art img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(38,113,230,.22))}.ref-hero-art b{display:block;font-size:24px}.ref-hero-art small{display:block;color:#7085a3;font-size:10px;margin-top:2px}
.ref-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.ref-stat{background:rgba(255,255,255,.98);border:1px solid #dfeaf7;border-radius:15px;min-height:106px;padding:15px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px rgba(31,83,145,.055)}.ref-stat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#eaf3ff;color:#2479ea;font-size:18px}.ref-stat.cyan .ref-stat-icon{background:#eaf8ff;color:#2387e8}.ref-stat.purple .ref-stat-icon{background:#f0edff;color:#735de0}.ref-stat.green .ref-stat-icon{background:#e9faf3;color:#19aa75}.ref-stat-copy span{display:block;color:#75859c;font-size:10px}.ref-stat-copy strong{display:block;font-size:21px;color:#122d53;margin:3px 0}.ref-stat-copy small{color:#1eb47c;font-size:9px}
.ref-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) 300px;gap:14px;align-items:start}.ref-main-col,.ref-mid-col,.ref-side-col{display:flex;flex-direction:column;gap:14px}.ref-card{background:rgba(255,255,255,.98);border:1px solid #dfe9f5;border-radius:15px;box-shadow:0 8px 24px rgba(31,83,145,.055);padding:15px}.ref-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.ref-card-head h2{margin:0;color:#162f55;font-size:14px}.ref-card-head button{border:0;background:none;color:#2677ee;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.ref-select{font-size:10px;color:#73839b;background:#f5f8fc;border:1px solid #e2eaf4;padding:6px 8px;border-radius:8px}.ref-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ref-quick{border:1px solid #e2ebf6;background:#fbfdff;border-radius:11px;padding:11px;display:flex;align-items:center;gap:9px;text-align:right;cursor:pointer;font:inherit;color:#17345c;transition:.15s}.ref-quick:hover{background:#f1f7ff;border-color:#c7dcf7;transform:translateY(-1px)}.ref-q-icon{width:35px;height:35px;border-radius:10px;background:#edf5ff;display:grid;place-items:center;font-size:16px;flex:none}.ref-quick b{display:block;font-size:11px}.ref-quick small{display:block;color:#8a98ab;font-size:9px;margin-top:2px}.ref-chart{height:235px;position:relative;padding:12px 5px 25px}.ref-chart svg{position:absolute;inset:10px 5px 28px;width:calc(100% - 10px);height:190px}.chart-grid{position:absolute;inset:15px 8px 32px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,#edf2f8 38px);border-radius:8px}.chart-labels{position:absolute;left:6px;right:6px;bottom:2px;display:flex;justify-content:space-between;color:#93a0b2;font-size:8px}
.ref-server-profile{display:flex;align-items:center;gap:10px;background:#f7faff;border:1px solid #e3ecf6;border-radius:12px;padding:12px}.ref-server-profile img{width:50px;height:50px;border-radius:14px;object-fit:cover}.ref-server-profile b{display:block;font-size:12px}.ref-server-profile small{display:block;color:#8090a5;font-size:9px;margin-top:4px}.ref-server-profile em{display:inline-block;font-style:normal;font-size:8px;color:#2878e6;background:#eaf3ff;padding:3px 6px;border-radius:8px;margin:5px 3px 0 0}.ref-meta{margin:9px 0}.ref-meta div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #edf2f7;font-size:9px}.ref-meta div:last-child{border-bottom:0}.ref-meta span{color:#7d8da3}.ref-meta b{color:#50647f;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-primary{width:100%;border:0;border-radius:9px;padding:10px;background:#247af0;color:#fff;font:inherit;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 7px 18px rgba(36,122,240,.20)}.ref-command-list>div{display:grid;grid-template-columns:30px 1fr auto 76px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #edf2f7}.ref-command-list>div:last-child{border-bottom:0}.ref-command-list>div>span{width:28px;height:28px;border-radius:8px;background:#edf4ff;display:grid;place-items:center}.ref-command-list b{font-size:10px}.ref-command-list b small{display:block;color:#8b98aa;font-size:8px;font-weight:500;margin-top:2px}.ref-command-list strong{font-size:9px;color:#73849c}.ref-command-list i{height:6px;border-radius:10px;background:#e6eef8;overflow:hidden}.ref-command-list i em{display:block;height:100%;background:#287df3;border-radius:10px}.ref-activity>div{display:grid;grid-template-columns:30px 1fr 15px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #edf2f7}.ref-activity>div:last-child{border-bottom:0}.ref-act{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:11px}.ref-act.green{background:#e8faf2;color:#19ab76}.ref-act.purple{background:#f0edff;color:#755de0}.ref-act.red{background:#fff0f2;color:#df5c6a}.ref-act.orange{background:#fff4e8;color:#df8a2b}.ref-act.blue{background:#eaf3ff;color:#2677f5}.ref-activity b{display:block;font-size:9px;color:#40516b}.ref-activity small{display:block;color:#9aa6b7;font-size:8px;margin-top:2px}.ref-activity i{font-style:normal;color:#91a0b2}.ref-premium{text-align:center;background:linear-gradient(135deg,#eef6ff,#fff);padding:17px}.ref-premium img{width:54px;height:54px;object-fit:contain}.ref-premium h3{margin:5px 0;color:#1a4b88;font-size:14px}.ref-premium p{margin:0 0 12px;color:#7b8ba1;font-size:9px}.ref-premium button{width:100%;border:0;border-radius:9px;background:#287df3;color:#fff;padding:9px;font:inherit;font-size:10px;font-weight:800}.ref-server-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf2f7}.ref-server-row:last-child{border-bottom:0}.ref-server-row img{width:34px;height:34px;border-radius:10px;object-fit:cover}.ref-server-row b{display:block;font-size:9px;color:#40516b}.ref-server-row small{display:block;font-size:8px;color:#94a0b1;margin-top:2px}.ref-server-row button{border:1px solid #cfe0f4;background:#f5f9ff;color:#2877e8;border-radius:7px;padding:4px 7px;font:inherit;font-size:8px;cursor:pointer}.ref-empty{font-size:10px;color:#8b98ab;text-align:center;margin:12px 0}
@media(max-width:1120px){.ref-layout{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.ref-side-col{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr}.ref-premium{grid-column:auto}}
@media(max-width:850px){.ref-stats{grid-template-columns:repeat(2,1fr)}.ref-layout{grid-template-columns:1fr}.ref-side-col{grid-column:auto;display:flex}.ref-hero-art{opacity:.45}}
@media(max-width:650px){.reference-dashboard{width:100%}.ref-hero{min-height:150px;padding:15px}.ref-welcome-user h1{font-size:16px}.ref-welcome-user img{width:50px;height:50px}.ref-hero-art{position:absolute;left:-10px;bottom:-18px;opacity:.16}.ref-hero-art img{width:120px;height:120px}.ref-stats{gap:8px}.ref-stat{min-height:84px;padding:10px}.ref-stat-icon{width:34px;height:34px}.ref-stat-copy strong{font-size:17px}.ref-quick-grid{grid-template-columns:1fr 1fr}.ref-card{padding:12px}.ref-chart{height:210px}}
.emoji-create-box{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;margin-top:16px;padding:14px;border:1px solid var(--border-soft);border-radius:14px;background:rgba(255,255,255,.018)}
.emoji-create-box .devil-form{margin:0}.emoji-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}.emoji-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(255,255,255,.014)}.emoji-preview{display:flex;align-items:center;gap:11px}.emoji-preview img{width:42px;height:42px;object-fit:contain}.emoji-preview b{display:block;font-size:12px}.emoji-preview small{display:block;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:9px;margin-top:4px}@media(max-width:850px){.emoji-create-box{grid-template-columns:1fr}.emoji-item{align-items:flex-start}}