/* ============================================================
   Qorvi web platform — design system
   BLACK IS THE ENVIRONMENT. PURPLE IS THE ENERGY.
   ============================================================ */

:root {
  --bg: #050507;
  --bg-2: #0a0a13;
  --bg-3: #10101c;
  --purple: #9d63ff;          /* light tint of the logo violet */
  --violet: #5b21b6;          /* logo core violet */
  --accent: #7c3aed;          /* logo bright violet */
  --purple-rgb: 157, 99, 255;
  --violet-rgb: 91, 33, 182;
  --accent-rgb: 124, 58, 237;
  --glow: rgba(var(--purple-rgb), 0.35);
  --text: #f5f3fa;
  --muted: #a8a2bb;
  --faint: #8f89a3;
  --border: rgba(var(--purple-rgb), 0.16);
  --border-strong: rgba(var(--purple-rgb), 0.32);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --success: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1160px;
  --font: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient backdrop: near-black with purple atmosphere. The canvas
   (particles.js) paints behind content; the orbs are pure CSS. */
#qorvi-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(var(--violet-rgb), 0.10), transparent 60%),
    radial-gradient(1000px 600px at 8% 110%, rgba(var(--purple-rgb), 0.08), transparent 60%),
    var(--bg);
}
#qorvi-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 500px at 50% 20%, #000 0%, transparent 75%);
  opacity: 0.5;
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { to { background-position: 56px 56px; } }

#qorvi-particles {
  position: fixed;
  inset: 0;
  /* inset:0 alone does NOT size a canvas. A canvas is a replaced element with
     intrinsic dimensions (300x150), so `width/height: auto` resolves to those
     instead of filling the box -- the field was rendering in a 300x150 block in
     the top-left corner (right behind the logo) and stopping dead there.
     The percentages resolve against the viewport, which for a fixed element is
     the initial containing block. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#mouse-light {
  position: fixed;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--purple-rgb), 0.10), transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

section { padding: 88px 0; }
.section-title { font-size: clamp(26px, 4vw, 40px); margin-bottom: 0.35em; }
.section-sub { color: var(--muted); max-width: 640px; margin: 0 auto 48px; text-align: center; }

/* ---------- gradient text ---------- */
.gradient {
  background: linear-gradient(100deg, #fff 10%, var(--purple) 55%, var(--violet) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  font: 600 15px var(--font);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--border-strong); }
.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

.btn-primary {
  background: linear-gradient(120deg, var(--violet), var(--accent));
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.25), 0 8px 30px -6px var(--glow);
  font-weight: 650;
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(var(--purple-rgb), 0.45), 0 10px 40px -4px var(--glow); }
.btn-ghost { background: transparent; }

.btn-sm { padding: 8px 16px; font-size: 13.5px; }

/* ---------- glass cards ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card {
  padding: 26px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 50px -18px var(--glow);
}
.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.16), rgba(var(--violet-rgb), 0.10));
  border: 1px solid var(--border);
  color: var(--purple);
  margin-bottom: 16px;
  font-size: 22px;
}

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.badge.good .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.badge.warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.badge.danger .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ---------- navbar ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--text); }
.nav-logo:hover { text-decoration: none; }
.nav-logo img { width: 34px; height: 34px; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 550; padding: 8px 12px; border-radius: 8px; }
.nav-links a:hover { color: var(--text); text-decoration: none; background: var(--glass-2); }
/* On phones the secondary CTA collapses into the drawer (see the 620px block)
   instead of competing with the burger for a 375px-wide header. Hidden here so
   it never appears as an extra row on desktop. */
.nav-drawer-link { display: none; }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-burger { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 18px; cursor: pointer; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 90px 0 70px; }
.hero-logo-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto 34px; }
.hero-logo {
  position: absolute; inset: 30px;
  border-radius: 28px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--purple-rgb), 0.22), rgba(5, 5, 7, 0.4));
  border: 1px solid var(--border);
  box-shadow: 0 0 60px -10px var(--glow), inset 0 0 40px -18px var(--glow);
}
.hero-logo img { width: 96%; height: 96%; object-fit: contain; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(var(--purple-rgb), 0.22); border-radius: 50%; }
.orbit::before {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 12px var(--purple);
}
.orbit.o1 { animation: spin 14s linear infinite; }
.orbit.o2 { inset: 18px; border-color: rgba(var(--purple-rgb), 0.14); animation: spin 22s linear infinite reverse; }
.hero h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: -0.02em; }
.hero .sub { font-size: clamp(16px, 2.2vw, 21px); color: var(--muted); max-width: 640px; margin: 14px auto 30px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.float-cap { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--purple); opacity: 0.75; }
.float-cap.c1 { top: 8px; left: 4px; animation: floaty 5s ease-in-out infinite; }
.float-cap.c2 { top: 44px; right: -14px; animation: floaty 6s ease-in-out 0.6s infinite; }
.float-cap.c3 { bottom: 20px; right: -8px; animation: floaty 5.5s ease-in-out 1.1s infinite; }
.float-cap.c4 { bottom: -12px; left: 6px; animation: floaty 6.5s ease-in-out 0.3s infinite; }

/* ---------- feature grid ---------- */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- workflow ---------- */
.flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; justify-content: center; }
.flow-step {
  flex: 1; min-width: 150px; max-width: 200px;
  padding: 20px 16px; text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease;
}
.flow-step.in { opacity: 1; transform: none; }
.flow-step .num { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--faint); }
.flow-step .cap { font-weight: 650; margin-top: 4px; }
.flow-arrow { align-self: center; color: var(--purple); opacity: 0.7; font-size: 20px; }

/* ---------- security / status rows ---------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.status-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.status-item .stat-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--glass-2); border: 1px solid var(--border); font-size: 19px; }
.status-item .stat-name { font-weight: 600; font-size: 14.5px; }
.status-item .stat-desc { font-size: 12.5px; color: var(--faint); }

/* ---------- chat ---------- */
.chat-shell { max-width: 760px; margin: 0 auto; }
.chat-window {
  display: flex; flex-direction: column;
  height: min(620px, 72vh);
  border-radius: 20px;
  overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.chat-head img { width: 40px; height: 40px; border-radius: 12px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 84%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: linear-gradient(120deg, var(--violet), var(--accent)); border-end-end-radius: 4px; }
.msg.qorvi { align-self: flex-start; background: var(--glass); border: 1px solid var(--border); border-end-start-radius: 4px; }
.msg.qorvi b { color: var(--purple); }
.msg .chip-list { list-style: none; padding-left: 0.4em; margin: 0.5em 0; }
.msg .chip-list li::before { content: "• "; color: var(--purple); }
.typing { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.typing .tp { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: bounce 1.2s ease-in-out infinite; }
.typing .tp:nth-child(2) { animation-delay: 0.15s; }
.typing .tp:nth-child(3) { animation-delay: 0.3s; }
.chat-input-row { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); }
.chat-input {
  flex: 1; padding: 13px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass);
  color: var(--text); font: 15px var(--font);
  outline: none;
}
.chat-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12); }
.suggest { flex-wrap: wrap; }
.suggest .badge { cursor: pointer; }
.suggest .badge:hover { border-color: var(--border-strong); color: var(--text); }

/* floating chat button */
#qorvi-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 32% 30%, rgba(var(--purple-rgb),0.5), rgba(90,40,180,0.85));
  box-shadow: 0 10px 40px -6px var(--glow);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
#qorvi-fab:hover { transform: translateY(-3px) scale(1.04); }
#qorvi-fab img { width: 38px; height: 38px; border-radius: 10px; }
#qorvi-fab.pulse { animation: fabPulse 1.4s ease-in-out; }

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: 248px 1fr; gap: 24px; max-width: var(--maxw); margin: 0 auto; padding: 32px 22px; }
.dash-side { align-self: start; position: sticky; top: 84px; padding: 14px; }
.dash-side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 550; }
.dash-side a:hover { background: var(--glass-2); color: var(--text); text-decoration: none; }
.dash-side a.active { background: linear-gradient(120deg, rgba(var(--violet-rgb),0.22), rgba(var(--accent-rgb),0.12)); color: var(--text); border: 1px solid var(--border); }
.dash-side a .soon { margin-left: auto; font-size: 10px; color: var(--faint); letter-spacing: 0.08em; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.dash-stat { padding: 18px; }
.dash-stat .k { font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.dash-stat .v { font-size: 26px; font-weight: 700; margin-top: 6px; }
.guild-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.guild-card img { width: 52px; height: 52px; border-radius: 14px; }
.guild-card .g-name { font-weight: 650; }
.guild-card .g-sub { font-size: 12.5px; color: var(--faint); }

/* platform announcement banners (dashboard) */
#dashAnnounce { display: grid; gap: 12px; margin-bottom: 18px; }
#dashAnnounce[hidden] { display: none; }
.announce-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.announce-banner .a-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--border); color: var(--purple); }
.announce-banner .a-body { flex: 1; min-width: 0; }
.announce-banner .a-body p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.announce-banner .a-meta { font-size: 12px; color: var(--faint); margin-top: 8px; }
.announce-banner .badge.announce-maintenance { border-color: rgba(251,146,60,0.45); color: #fcd9b8; }
.announce-banner .badge.announce-update { border-color: var(--border-strong); color: var(--purple); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--border); padding: 46px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.foot-grid h3, .foot-grid h4 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.foot-grid a { display: block; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.foot-grid a:hover { color: var(--text); }
.foot-bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }

/* ---------- reveal + motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
[data-tilt] { transition: transform 0.18s ease-out; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
  .flow-step { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; background: rgba(5,5,7,0.96); padding: 14px; border-bottom: 1px solid var(--border); }
  .nav-links.open .nav-drawer-link { display: block; }
  .nav-burger { display: block; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  #mouse-light { display: none; }
}

/* Phones. The header has to fit exactly four things -- logo, language, the
   primary CTA and the burger -- or the burger gets clipped by
   body { overflow-x: hidden } and the whole menu becomes unreachable. The
   secondary button steps into the drawer (.nav-drawer-link) and the gaps
   tighten. :has() scopes this to headers that actually have a burger, so the
   drawer-less dashboard header is untouched. */
@media (max-width: 620px) {
  .nav-inner { gap: 10px; padding-inline: 14px; }
  .nav-actions { gap: 8px; }
  .nav-inner:has(.nav-burger) .nav-actions .btn:not(.btn-primary) { display: none; }
  .nav-actions .btn-sm { padding-inline: 12px; }
  .nav-burger { padding: 10px 12px; font-size: 19px; }
}

/* Very small phones (320px, iPhone SE 1st gen). Even with the secondary CTA in
   the drawer the brand name is the last thing that can go, and the logo mark
   alone still identifies the site. Without this the burger is clipped again. */
@media (max-width: 400px) {
  .nav-logo .wordmark { display: none; }
}

/* ---------- intro overlay ---------- */
#qorvi-intro {
  position: fixed; inset: 0; z-index: 100;
  background: #030304;
  display: grid; place-items: center;
  transition: opacity 0.5s ease;
}
#qorvi-intro.done { opacity: 0; pointer-events: none; }
.intro-core { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.intro-point {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  opacity: 0;
  animation: introPoint 1.1s ease forwards;
}
.intro-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  opacity: 0;
  animation: introRing 1.4s ease forwards;
}
.intro-ring.r2 { inset: 26px; border-color: rgba(var(--purple-rgb),0.14); animation-delay: 0.25s; }
.intro-p { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px var(--purple); animation: introP 2.4s ease forwards; }
.intro-logo {
  opacity: 0;
  animation: introLogo 1s ease forwards;
  animation-delay: 0.55s;
}
.intro-logo img { width: 104px; height: 104px; border-radius: 22px; box-shadow: 0 0 44px -8px var(--glow); }
#qorvi-intro .intro-tag { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); opacity: 0; animation: introLogo 0.8s ease forwards; animation-delay: 1.05s; }
@keyframes introPoint { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes introRing { 0% { transform: scale(0.55); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes introP { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } to { transform: translate(var(--px), var(--py)); opacity: 0; } }
@keyframes introLogo { from { opacity: 0; transform: scale(0.86) translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes fabPulse { 0% { box-shadow: 0 0 0 0 var(--glow); } 100% { box-shadow: 0 0 0 26px transparent; } }

/* ============================================================
   Qorvi icon system (purple, stroke-based, no emojis)
   ============================================================ */
.qicon {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
}
.qicon-lg { width: 1.55em; height: 1.55em; }
.qicon-2x { width: 2em; height: 2em; }
.qicon.purple { color: var(--purple); }
.card-icon .qicon { color: var(--purple); }
.status-item .qicon { color: var(--purple); opacity: 0.95; }
.dash-side a .qicon { color: var(--faint); }
.dash-side a:hover .qicon { color: var(--purple); }
.dash-side a.active .qicon { color: var(--purple); }
.stat-ic { color: var(--purple); }

/* Icon inside the hero CTA / nav buttons */
.btn .qicon { font-size: 15px; }

/* ---------- language switcher ---------- */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  padding-block: 7px;
  padding-inline: 12px 30px; /* the arrow sits in the inline-end padding */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239d63ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  font: 600 13px var(--font);
  cursor: pointer;
  outline: none;
}
.lang-select:hover { border-color: var(--border-strong); }
.lang-select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.lang-select option { background: #0b0b14; color: var(--text); }
/* The arrow is a background image, which has no logical-position form, so it
   needs an explicit mirror. */
[dir="rtl"] .lang-select { background-position: left 12px center; }

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .flow-arrow { transform: scaleX(-1); }
[dir="rtl"] .nav-links { direction: rtl; }
[dir="rtl"] .foot-bottom { direction: rtl; }
[dir="rtl"] .msg { text-align: right; }

/* ---------- chat inbox (sign-in + server picker) ---------- */
.inbox-gate {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 30px;
}
.inbox-gate .gate-ic {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.18), rgba(var(--violet-rgb), 0.10));
  border: 1px solid var(--border);
  color: var(--purple);
  font-size: 26px;
}
.inbox-gate h2 { font-size: 21px; }
.inbox-gate p { max-width: 430px; margin: 8px auto 20px; }
.inbox-gate .btn { margin: 4px; }

.server-pick { max-width: 760px; margin: 0 auto; }
.server-pick h2 { font-size: 22px; }
.picker-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.picker-card:hover { transform: translateY(-2px); }
.picker-card img { width: 46px; height: 46px; border-radius: 13px; flex: none; }
.picker-card .p-name { font-weight: 650; }
.picker-card .p-sub { font-size: 12.5px; color: var(--faint); }
.picker-card .qicon { color: var(--muted); font-size: 18px; }

/* ---------- premium "coming soon" ---------- */
.premium-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
  color: var(--warn);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

/* ---------- footer wordmark ---------- */
.foot-logo { display: flex; align-items: center; gap: 12px; font-weight: 750; font-size: 30px; color: var(--text); }
.foot-logo:hover { text-decoration: none; }
.foot-logo img { width: 40px; height: 40px; }

/* ============================================================
   Dashboard v2 — guild hero, tiles, skeletons, timeline, pickers
   (appended; the tokens and rules above are unchanged)
   ============================================================ */

/* guild hero header */
.guild-hero { position: relative; overflow: hidden; padding: 22px 24px; margin-bottom: 22px; }
.guild-hero-glow {
  position: absolute; top: -40%; inset-inline-end: -10%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--violet-rgb), 0.28), transparent 65%);
  pointer-events: none;
}
.guild-hero-main { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.guild-hero-ic { width: 58px; height: 58px; border-radius: 16px; border: 1px solid var(--border); object-fit: cover; flex: none; box-shadow: 0 10px 30px -14px var(--glow); }
.guild-hero-ic.fallback {
  display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--purple);
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.22), rgba(var(--violet-rgb), 0.10));
}
.guild-hero-info { flex: 1; min-width: 200px; }
.guild-hero-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple); }
.guild-hero-name { font-size: 25px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.guild-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.guild-hero-meta .dot-sep { color: var(--faint); }
.badge.premium { border-color: var(--border-strong); color: var(--purple); }
.badge.premium .dot { background: var(--purple); box-shadow: 0 0 8px var(--purple); }
.guild-hero-stats {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat .k { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.hero-stat .v { font-size: 18px; font-weight: 700; }
.guild-hero-sub { position: relative; margin: 14px 0 0; font-size: 13.5px; }

/* stat tiles */
.dash-stat { position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.dash-stat::after { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(var(--purple), var(--violet)); opacity: 0.55; }
.dash-stat:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 18px 50px -18px var(--glow); }
.dash-stat .v { background: linear-gradient(100deg, var(--text) 35%, var(--purple) 135%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-stat .stat-ic { display: inline-block; margin-bottom: 8px; font-size: 18px; }
.dash-stat-btn { display: flex; flex-direction: column; align-items: flex-start; font: inherit; }

/* loading skeletons */
.skeleton-hero, .skeleton-tile, .skeleton-card { position: relative; overflow: hidden; }
.skeleton-hero { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.skeleton-tile { padding: 18px; }
.skeleton-card { height: 160px; margin-top: 16px; }
.sk-ic { width: 58px; height: 58px; border-radius: 16px; flex: none; }
.sk-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.sk-line.xl { height: 26px; width: 40%; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w35 { width: 35%; } .sk-line.w25 { width: 25%; }
.sk-ic, .sk-line { background: linear-gradient(100deg, var(--glass-2) 30%, rgba(var(--purple-rgb), 0.16) 50%, var(--glass-2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* empty states */
.empty-state { text-align: center; padding: 40px 26px; }
.empty-state .es-ic { width: 62px; height: 62px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--border); color: var(--purple); font-size: 26px; }

/* pickers + inline status */
.field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.dash-select {
  appearance: none; -webkit-appearance: none; flex: 1; min-width: 200px;
  padding: 11px 34px 11px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--glass) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239d63ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text); font: 600 14px var(--font); cursor: pointer; outline: none;
}
[dir="rtl"] .dash-select { padding: 11px 14px 11px 34px; background-position: left 12px center; }
.dash-select:hover { border-color: var(--border-strong); }
.dash-select:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12); }
.dash-select option { background: #0b0b14; color: var(--text); }
.inline-msg { margin: 10px 0 0; font-size: 13px; }
.inline-msg[hidden] { display: none; }
.inline-msg.ok { color: var(--success); }
.inline-msg.err { color: var(--danger); }
.inline-msg:not(.ok):not(.err) { color: var(--muted); }

/* security status tiles */
.status-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.status-tile { padding: 18px; }
.status-tile .st-head { display: flex; align-items: center; gap: 10px; }
.status-tile .st-head .qicon { color: var(--purple); }
.status-tile .st-title { font-weight: 650; font-size: 14.5px; }
.status-tile .st-state { margin-top: 10px; font-size: 20px; font-weight: 750; }
.status-tile .st-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.status-tile.good { border-color: rgba(74, 222, 128, 0.35); }
.status-tile.warn { border-color: rgba(251, 191, 36, 0.35); }
.status-tile.danger { border-color: rgba(248, 113, 113, 0.4); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 5px; width: 1px; background: var(--border); }
.tl-item { position: relative; display: flex; gap: 14px; padding: 9px 0; }
.tl-dot { position: relative; z-index: 1; flex: none; width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px var(--bg); }
.tl-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--bg), 0 0 10px var(--danger); }
.tl-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--bg), 0 0 10px var(--warn); }
.tl-dot.good { background: var(--success); box-shadow: 0 0 0 3px var(--bg), 0 0 10px var(--success); }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-weight: 650; font-size: 14px; }

/* read-only detail rows */
.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--border); }
.detail-row .dk { color: var(--muted); }
.detail-row .dv { font-weight: 650; text-align: end; overflow-wrap: anywhere; }
.mb6 { margin-bottom: 6px; }

@media (max-width: 560px) {
  .guild-hero { padding: 18px; }
  .guild-hero-name { font-size: 21px; }
  .dash-stat::after { display: none; }
}

/* ============================================================
   Round 4 — brand wordmark, left rail, Server Builder, motion
   ============================================================ */

/* brand: the wordmark, not just the mark */
.nav-logo { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.wordmark {
  background: linear-gradient(100deg, #ffffff 4%, var(--purple) 58%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(var(--purple-rgb), 0.32));
}
.foot-logo .wordmark { font-weight: 800; }

/* Buttons do not inherit the page colour, which is exactly why server names
   came out black. Pin the card text explicitly. */
.guild-card, .preset-card { color: var(--text); font: inherit; overflow: hidden; }

/* The dashboard rail stays on the LEFT in every language, Arabic included.
   The content beside it still reads right-to-left. */
.dash { direction: ltr; }
[dir="rtl"] .dash main { direction: rtl; }

/* rail: hover glide + an accent bar that grows into place */
.dash-side a { position: relative; transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease; }
.dash-side a::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: linear-gradient(var(--purple), var(--violet));
  opacity: 0; transform: scaleY(0.35); transition: opacity 0.25s ease, transform 0.25s ease;
}
.dash-side a.active::before, .dash-side a:hover::before { opacity: 1; transform: none; }
.dash-side a:hover { transform: translateX(2px); }

/* greeting + role context */
.guild-hero-welcome { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 14px; font-weight: 650; color: var(--purple); }
.selector-hello { font-size: 14px; font-weight: 700; color: var(--purple); margin: 0 0 6px; }
.section-lead { font-size: 13.5px; margin: 0 0 14px; }

/* deliberately dangerous actions */
.btn-danger { border-color: rgba(248, 113, 113, 0.42); color: #ffdcdc; }
.btn-danger:hover { border-color: rgba(248, 113, 113, 0.8); box-shadow: 0 10px 32px -14px rgba(248, 113, 113, 0.65); }
.btn-danger.is-armed { background: linear-gradient(120deg, #b91c1c, #ef4444); border-color: transparent; color: #fff; animation: armedPulse 1s ease-in-out infinite; }
@keyframes armedPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }

/* Server Builder */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; margin: 4px 0 20px; }
.preset-card { display: flex; align-items: center; gap: 14px; text-align: start; width: 100%; cursor: pointer; padding: 16px 18px; overflow: hidden; }
.preset-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 18px 50px -18px var(--glow); }
.preset-card.active { border-color: var(--border-strong); background: linear-gradient(120deg, rgba(var(--violet-rgb), 0.16), rgba(var(--accent-rgb), 0.06)); }
.preset-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.18), rgba(var(--violet-rgb), 0.08)); border: 1px solid var(--border); font-size: 20px; }
.preset-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.preset-name { font-weight: 700; font-size: 15.5px; }
.preset-desc { font-size: 12.8px; line-height: 1.45; }
.preset-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.preset-counts .badge { padding: 3px 9px; font-size: 11.5px; }
.preset-open { flex: none; }
.preset-preview-slot:empty { display: none; }
.preset-preview { margin-bottom: 8px; }
.preset-preview .card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.preset-preview .card-title { margin: 0 0 2px; font-size: 18px; }
.bw-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bw-cat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--glass); }
.bw-cat.bw-loose { border-style: dashed; }
.bw-cat-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13.5px; margin-bottom: 9px; }
.bw-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bw-channel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bw-channel .qicon { color: var(--faint); }
.bw-channel span { overflow-wrap: anywhere; }
.bw-empty { font-size: 12.5px; }
.bw-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bw-roles .badge { padding: 5px 11px; }
.build-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.build-note { font-size: 12px; margin: 10px 0 0; }

/* motion: staggered rise, a press, a hover sheen, a breathing backdrop */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.guild-card, .preset-card, .status-tile, .dash-stat { animation: riseIn 0.5s ease both; }
.guild-card:nth-child(2) { animation-delay: 0.05s; }
.guild-card:nth-child(3) { animation-delay: 0.1s; }
.guild-card:nth-child(4) { animation-delay: 0.15s; }
.guild-card:nth-child(5) { animation-delay: 0.2s; }
.guild-card:nth-child(6) { animation-delay: 0.25s; }
.btn:active { transform: translateY(0) scale(0.985); }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.guild-card, .preset-card { position: relative; }
.guild-card::after, .preset-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -45%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-16deg); opacity: 0; pointer-events: none;
}
.guild-card:hover::after, .preset-card:hover::after { animation: sheen 0.85s ease; }
@keyframes sheen { 0% { inset-inline-start: -45%; opacity: 0; } 25% { opacity: 1; } 100% { inset-inline-start: 130%; opacity: 0; } }
#qorvi-backdrop { animation: breathe 14s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }

@media (max-width: 560px) {
  .preset-grid { grid-template-columns: 1fr; }
  .dash-side a:hover { transform: none; }
}

/* ---- Round 5: server directory + change requests ---- */
.srv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.srv-head h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0; }
.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.srv-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-decoration: none; color: var(--text); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
a.srv-card:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.srv-top { display: flex; align-items: center; gap: 12px; }
.srv-badge { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--purple), #5b21b6); flex: none; }
.srv-titles { display: flex; flex-direction: column; min-width: 0; }
.srv-name { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.srv-members { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.srv-desc { font-size: 13.5px; margin: 0; flex: 1; }
.srv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.srv-visit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--purple); }
.srv-state { text-align: center; color: var(--muted); padding: 40px 0; }

.req-list { display: grid; gap: 14px; margin-top: 6px; }
.req-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.req-prompt { margin: 0; font-weight: 700; }
.req-steps { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; color: var(--muted); }
.req-steps code { color: var(--purple); }
.req-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.req-result { font-size: 12.5px; margin: 8px 0 0; }

/* ============================================================
   Round 6 — dashboard surfaces, calmer & cleaner
   The marketing pages keep the animated grid and particles; the
   dashboard pages drop that chrome, quiet the ambient bloom and
   give the shell more air so the cards read clean, not busy. Only
   a visual pass — every section and endpoint stays exactly as is.
   ============================================================ */

/* 1) No grid lines, no dead particles canvas on app pages */
body[data-qorvi-page="dashboard"] #qorvi-backdrop::after,
body[data-qorvi-page="staff"] #qorvi-backdrop::after { display: none; }
body[data-qorvi-page="dashboard"] #qorvi-particles,
body[data-qorvi-page="staff"] #qorvi-particles { display: none; }

/* 2) Still a violet atmosphere, but static and tighter */
body[data-qorvi-page="dashboard"] #qorvi-backdrop,
body[data-qorvi-page="staff"] #qorvi-backdrop {
  animation: none;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(var(--violet-rgb), 0.12), transparent 58%),
    radial-gradient(880px 520px at 2% 108%, rgba(var(--purple-rgb), 0.06), transparent 60%),
    var(--bg);
}

/* 3) Airier shell: wider content, more gap, snugger sticky rail */
body[data-qorvi-page="dashboard"] .dash,
body[data-qorvi-page="staff"] .dash {
  max-width: 1280px;
  gap: 30px;
  padding-top: 40px;
}
body[data-qorvi-page="dashboard"] .dash-side,
body[data-qorvi-page="staff"] .dash-side { top: 26px; }
body[data-qorvi-page="dashboard"] .dash main,
body[data-qorvi-page="staff"] .dash main { min-width: 0; }

/* 4) Calmer surfaces: neutral hairline borders instead of purple-tinted ones */
body[data-qorvi-page="dashboard"] .glass,
body[data-qorvi-page="staff"] .glass { border-color: rgba(255, 255, 255, 0.07); }

/* 5) No bounce-on-hover inside the app; a soft shadow instead */
body[data-qorvi-page="dashboard"] .glass.card:hover,
body[data-qorvi-page="staff"] .glass.card:hover {
  transform: none;
  box-shadow: 0 12px 36px -20px rgba(var(--purple-rgb), 0.30);
}
.req-list .empty-state { margin-top: 4px; }

/* ============================================================
   Round 7 — sidebar identity: logo, profile chip, customization
   The rail now carries the Qorvi logo, a profile chip (Discord avatar,
   name, and the user's real Qorvi Coins) and a small accent-colour
   picker. Every value shown is live; the picker only re-points the
   accent CSS variables the whole site already reads, so one choice
   recolours everything without a separate theme layer.
   ============================================================ */

.dash-side a.dash-mast {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px 14px; margin-bottom: 6px;
  font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.dash-side a.dash-mast:hover { background: transparent; text-decoration: none; }
.dash-side a.dash-mast img { width: 26px; height: 26px; border-radius: 8px; display: block; }

.dash-profile {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--glass);
}
.dash-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border-strong); background: var(--glass-2); }
.dash-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-pinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-pname { font-weight: 650; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-pcoins { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.dash-pcoins .qicon { width: 14px; height: 14px; color: var(--purple); }

.dash-cust { position: relative; margin-top: 10px; }
.dash-cust-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer; text-align: start;
}
.dash-cust-btn:hover { background: var(--glass-2); color: var(--text); }
.dash-cust-btn .qicon { color: var(--faint); }
.dash-cust-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
  z-index: 30; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: #0b0b14; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
}
.dash-cust-label { margin: 0 0 8px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.dash-cust-pop .swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-cust-pop .swatch {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.dash-cust-pop .swatch:hover { transform: scale(1.08); }
.dash-cust-pop .swatch.on { border-color: var(--text); box-shadow: 0 0 0 3px var(--glow); }
.dash-cust-toggle {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--glass-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
}
.dash-cust-toggle:hover { border-color: var(--border-strong); }
.dash-cust-toggle .glow-off { display: none; }
.dash-cust-toggle[aria-pressed="false"] { color: var(--muted); }
.dash-cust-toggle[aria-pressed="false"] .glow-on { display: none; }
.dash-cust-toggle[aria-pressed="false"] .glow-off { display: inline; }
/* "Ambient glow" off: flatten the backdrop and stop the ambient motion for a
   calmer, flat-dark surface. Declared last so it wins over the page-specific
   backdrop rules above (equal specificity, later source order wins). */
html[data-glow="off"] #qorvi-backdrop { background: var(--bg); animation: none; }
html[data-glow="off"] #qorvi-backdrop::after { display: none; }
html[data-glow="off"] #qorvi-particles { display: none; }
html[data-glow="off"] #mouse-light { display: none; }

/* ---------- ticket setup editor ----------
   The dashboard's ticket builder. New classes only, so nothing here reaches the
   marketing pages or the landing design. Everything is built from the same
   tokens as the rest of the dashboard, and the RTL rules near the bottom mirror
   the one place a control is anchored to a physical side. */
.tk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-field > label { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.tk-input, .tk-textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
}
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--faint); }
.tk-input:focus, .tk-textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.12); outline: none; }
.tk-textarea { min-height: 82px; resize: vertical; line-height: 1.55; }
.tk-hint { font-size: 12px; color: var(--faint); line-height: 1.5; }
.tk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tk-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass-2); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.tk-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: background 0.15s ease, box-shadow 0.15s ease; }
.tk-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--border-strong); }
.tk-toggle[aria-pressed="true"] .dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.tk-toggle:hover { border-color: var(--border-strong); }
.tk-type { border: 1px solid var(--border); border-radius: 12px; padding: 13px; background: var(--glass-2); display: grid; gap: 11px; }
.tk-type-head { display: flex; align-items: center; gap: 9px; }
.tk-type-head .tk-input { max-width: 180px; }
.tk-style-row { display: flex; gap: 7px; flex-wrap: wrap; }
.tk-style-chip {
  border: 1px solid var(--border); border-inline-start: 5px solid var(--c, var(--border));
  border-radius: 8px; padding: 6px 11px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.tk-style-chip.on { color: #fff; background: var(--c, var(--purple)); border-color: var(--c, var(--purple)); }
.tk-style-chip:hover { color: var(--text); }
.tk-swatch {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.tk-swatch.on { border-color: var(--text); box-shadow: 0 0 0 3px var(--glow); }
.tk-list { display: grid; gap: 9px; }
.tk-link-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: center; }
.tk-icon-row { display: flex; align-items: center; gap: 10px; }
.tk-icon-row > .tk-input { max-width: 220px; }
.tk-icon-key { min-width: 96px; font-size: 13px; font-weight: 600; }
.tk-emoji { width: 18px; height: 18px; vertical-align: -3px; }
.tk-emoji-txt { font-size: 15px; line-height: 1; }
.tk-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.tk-bar .spacer { flex: 1; }

/* A Discord-ish mock so the editor shows what the bot will actually draw. Not a
   pixel copy of Discord -- just close enough that colour and wording reads right. */
.tk-preview { border: 1px solid var(--border); border-radius: 12px; background: #313338; padding: 15px; color: #dbdee1; }
.tk-preview .pv-accent { border-inline-start: 4px solid var(--purple); padding-inline-start: 12px; border-radius: 4px; }
.tk-preview .pv-author { font-size: 12.5px; color: #b5bac1; margin-bottom: 5px; }
.tk-preview .pv-title { font-size: 16px; font-weight: 700; color: #f2f3f5; }
.tk-preview .pv-desc { font-size: 13.5px; margin-top: 5px; white-space: pre-wrap; word-break: break-word; }
.tk-preview .pv-fields { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 11px; }
.tk-preview .pv-field .k { font-size: 12.5px; font-weight: 700; color: #f2f3f5; }
.tk-preview .pv-field .v { font-size: 13px; color: #dbdee1; }
.tk-preview .pv-foot { font-size: 11.5px; color: #b5bac1; margin-top: 11px; }
.tk-preview .pv-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.tk-pv-btn { border-radius: 6px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: #fff; }
.tk-pv-btn.primary { background: #5865f2; } .tk-pv-btn.secondary { background: #4e5058; }
.tk-pv-btn.success { background: #248046; } .tk-pv-btn.danger { background: #da373c; }
.tk-pv-menu { margin-top: 13px; border-radius: 8px; background: #383a40; padding: 11px 13px; font-size: 13px; color: #b5bac1; }
[dir="rtl"] .tk-link-row { grid-template-columns: 1fr 1.6fr auto; }