/* Ghost Ticket Dashboard — global styles
   Extracted from the original inline <style> block in web_dashboard.py.
   Linked from templates/base.html via url_for('static', filename='style.css').
*/

:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: rgba(16, 24, 42, 0.82);
  --panel-strong: rgba(19, 31, 55, 0.96);
  --line: rgba(124, 240, 255, 0.22);
  --text: #eef6ff;
  --muted: #8ea3bd;
  --cyan: #36e7ff;
  --pink: #ff4fd8;
  --green: #6bffbd;
  --danger: #ff5874;
}

html { overflow-x: hidden; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(54, 231, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(255, 79, 216, 0.13), transparent 26rem),
    linear-gradient(135deg, #05070d 0%, #0b1020 52%, #090b14 100%);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(124, 240, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 240, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

body:after {
  content: "";
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 42%,
      rgba(54, 231, 255, 0.08) 47%,
      rgba(255, 79, 216, 0.07) 50%,
      transparent 56%,
      transparent 100%);
  opacity: 0.55;
  mix-blend-mode: screen;
}

a { color: inherit; text-decoration: none; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; position: relative; z-index: 1; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.brand {
  display: inline-flex;
  align-items: center;
  width: min(218px, 46vw);
  min-height: 44px;
}
.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-logo-light { display: none; }
html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="light"] .brand-logo-light { display: block; }
.nav-right { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }

.app-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.sidebar {
  position: sticky;
  top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 15, 28, 0.88);
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.24);
  overflow: hidden;
  transition: border-color .24s ease, box-shadow .24s ease;
}
.sidebar-title { display: block; color: var(--text); font-weight: 850; margin-bottom: 14px; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 4px 0; }
.sidebar a, .sidebar .side-link {
  display: block;
  border-radius: 6px;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 14px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidebar a:hover { color: var(--text); background: rgba(54, 231, 255, 0.08); transform: translateX(3px); }
.side-head { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; align-items: center; }
.sidebar .side-link { color: var(--cyan); font-weight: 800; }
.side-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
}
.side-section[data-open="true"] .side-toggle { transform: rotate(90deg); }
.sidebar .nested {
  display: none;
  margin-left: 12px;
  border-left: 1px solid rgba(124, 240, 255, 0.18);
  padding-left: 8px;
}
.side-section[data-open="true"] .nested { display: block; }
.content-area { min-width: 0; }

.hero { padding: 64px 0 36px; max-width: 820px; }
h1 { margin: 0; font-size: clamp(38px, 6vw, 76px); line-height: 0.95; letter-spacing: 0; }
h2 { margin: 0 0 16px; font-size: 22px; letter-spacing: 0; }
p { color: var(--muted); line-height: 1.7; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.btn, button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(54, 231, 255, 0.16), rgba(255, 79, 216, 0.14)),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 120% 0;
  color: var(--text);
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(54, 231, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.btn.secondary {
  background:
    rgba(255,255,255,0.04),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, 120% 0;
}

.status-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 128px;
}
.status-pill,
.transcript-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.status-pill.open { color: var(--cyan); background: rgba(54, 231, 255, 0.09); }
.status-pill.closed { color: var(--text); background: rgba(255,255,255,0.04); }
.transcript-link { color: var(--green); background: rgba(107,255,189,0.08); }
.transcript-link.disabled {
  color: var(--muted);
  border-color: rgba(124, 240, 255, 0.12);
  background: rgba(255,255,255,0.025);
  cursor: not-allowed;
}

.grid { display: grid; gap: 16px; }
.servers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel, .card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.panel { padding: 20px; margin-bottom: 16px; }
.card { padding: 18px; transition: transform .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); border-color: rgba(54, 231, 255, 0.62); }
.server-card { min-height: 166px; }
.server-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.server-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(124, 240, 255, 0.24);
  background: rgba(54, 231, 255, 0.09);
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-weight: 850;
  overflow: hidden;
  flex: 0 0 auto;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-card { display: block; min-height: 150px; }
.metric { color: var(--muted); font-size: 13px; text-transform: uppercase; }
.metric-value { font-size: clamp(28px, 5vw, 44px); font-weight: 850; margin-top: 8px; }
.accent { color: var(--cyan); }
.green { color: var(--green); }
.pink { color: var(--pink); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid rgba(124, 240, 255, 0.13); text-align: left; font-size: 14px; }
th { color: var(--muted); font-weight: 700; }

input {
  width: 100%;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.76);
  color: var(--text);
  padding: 12px 13px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
form { display: grid; grid-template-columns: 1fr 160px 1fr auto; gap: 10px; align-items: end; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.flash { border: 1px solid rgba(107,255,189,.32); color: var(--green); padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; background: rgba(107,255,189,.08); }
.badge { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; color: var(--muted); font-size: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.chart-box { height: 320px; max-height: 45vh; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
.warn { color: var(--danger); }

@media (max-width: 820px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .stats, form { grid-template-columns: 1fr; }
  .hero { padding-top: 32px; }
  table { display: block; overflow-x: auto; }
}

/* ========================================================================
   ANIMATIONS — added to make the dashboard feel alive without distracting
   ======================================================================== */

/* Smooth scrolling for sidebar link clicks */
html { scroll-behavior: smooth; }

@keyframes ghost-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

@keyframes ghost-scan {
  0% { transform: translateX(-18%) translateY(-6%) rotate(0.001deg); opacity: 0.18; }
  45%, 55% { opacity: 0.48; }
  100% { transform: translateX(18%) translateY(6%) rotate(0.001deg); opacity: 0.24; }
}

body:before {
  animation: ghost-grid-drift 24s linear infinite;
}

body:after {
  animation: ghost-scan 8s cubic-bezier(.2,.7,.3,1) infinite alternate;
}

/* Page-load fade-in: applied to .shell so the whole page fades in once */
@keyframes ghost-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.shell { animation: ghost-fade-in 0.35s ease-out; }

/* Staggered fade-in for cards / panels / rows so they don't all pop at once */
@keyframes ghost-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel, .card, .overview-card, .server-card {
  animation: ghost-rise 0.4s ease-out backwards;
}
/* Stagger: each subsequent card animates 80ms later (max ~6 cards visible) */
.panel:nth-child(1), .card:nth-child(1), .overview-card:nth-child(1) { animation-delay: 0.05s; }
.panel:nth-child(2), .card:nth-child(2), .overview-card:nth-child(2) { animation-delay: 0.13s; }
.panel:nth-child(3), .card:nth-child(3), .overview-card:nth-child(3) { animation-delay: 0.21s; }
.panel:nth-child(4), .card:nth-child(4), .overview-card:nth-child(4) { animation-delay: 0.29s; }
.panel:nth-child(5), .card:nth-child(5), .overview-card:nth-child(5) { animation-delay: 0.37s; }
.panel:nth-child(6), .card:nth-child(6), .overview-card:nth-child(6) { animation-delay: 0.45s; }

/* Table rows fade in from the top */
@keyframes ghost-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
tbody tr {
  animation: ghost-row-in 0.25s ease-out backwards;
}
tbody tr:nth-child(1) { animation-delay: 0.05s; }
tbody tr:nth-child(2) { animation-delay: 0.09s; }
tbody tr:nth-child(3) { animation-delay: 0.13s; }
tbody tr:nth-child(4) { animation-delay: 0.17s; }
tbody tr:nth-child(5) { animation-delay: 0.21s; }
tbody tr:nth-child(6) { animation-delay: 0.25s; }
tbody tr:nth-child(7) { animation-delay: 0.29s; }
tbody tr:nth-child(8) { animation-delay: 0.33s; }

/* Scroll reveal: JS adds .motion-reveal and flips .is-visible on entry */
.motion-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity .58s cubic-bezier(.2,.7,.3,1),
    transform .58s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover lift on cards (enhanced from existing) */
.panel,
.card {
  transition:
    transform .22s cubic-bezier(.2,.7,.3,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.panel::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%),
      rgba(54, 231, 255, 0.18),
      rgba(255, 79, 216, 0.08) 22%,
      transparent 46%);
  transition: opacity .22s ease;
}
.panel::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.11), transparent 58%);
  transform: translateX(-130%);
}
.panel > *,
.card > * {
  position: relative;
  z-index: 1;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(54, 231, 255, 0.62);
  box-shadow: 0 30px 90px rgba(0,0,0,0.42), 0 0 24px rgba(54, 231, 255, 0.18);
}
.panel:hover {
  transform: translateY(-2px);
  border-color: rgba(54, 231, 255, 0.42);
  box-shadow: 0 28px 86px rgba(0,0,0,0.36), 0 0 22px rgba(54, 231, 255, 0.12);
}
.panel:hover::before,
.card:hover::before {
  opacity: 1;
}
.panel:hover::after,
.card:hover::after {
  animation: ghost-sheen .9s cubic-bezier(.2,.7,.3,1);
}

@keyframes ghost-sheen {
  0% { opacity: 0; transform: translateX(-130%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(130%); }
}

/* Button press feedback — scales down slightly while active */
.btn, button {
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover, button:hover {
  background-position: 0 0, -60% 0;
  border-color: rgba(54, 231, 255, 0.52);
  box-shadow: 0 0 30px rgba(54, 231, 255, 0.18);
  transform: translateY(-1px);
}
.btn:active, button:active {
  transform: scale(0.96);
}

/* Flash message slides in from top */
@keyframes ghost-flash-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flash { animation: ghost-flash-in 0.3s ease-out; }

/* Give small labels a quiet breathing glow */
@keyframes ghost-badge-breathe {
  0%, 100% { border-color: rgba(124, 240, 255, 0.22); box-shadow: 0 0 0 rgba(54, 231, 255, 0); }
  50% { border-color: rgba(54, 231, 255, 0.42); box-shadow: 0 0 16px rgba(54, 231, 255, 0.10); }
}
.badge {
  animation: ghost-badge-breathe 4.2s ease-in-out infinite;
}

/* Sidebar nested links slide open instead of instantly appearing */
.sidebar .nested {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .28s ease-out, opacity .2s ease, transform .28s ease, padding .25s ease-out, margin .25s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}
.side-section[data-open="true"] .nested {
  max-height: 320px; /* enough for up to ~6 nested links */
  opacity: 1;
  transform: translateY(0);
  padding-top: 0;
  padding-bottom: 0;
}
.side-section[data-open="true"] .nested li {
  animation: ghost-row-in .24s ease-out backwards;
}
.side-section[data-open="true"] .nested li:nth-child(1) { animation-delay: .03s; }
.side-section[data-open="true"] .nested li:nth-child(2) { animation-delay: .06s; }
.side-section[data-open="true"] .nested li:nth-child(3) { animation-delay: .09s; }
.side-section[data-open="true"] .nested li:nth-child(4) { animation-delay: .12s; }

/* Refresh banner — for "new activity" notification on ticket_logs page */
.refresh-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(54, 231, 255, 0.45);
  border-radius: 8px;
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
  font-weight: 700;
  animation: ghost-flash-in 0.3s ease-out;
}
.refresh-banner.visible { display: flex; }
.refresh-banner .refresh-btn {
  background: rgba(54, 231, 255, 0.18);
  border: 1px solid rgba(54, 231, 255, 0.45);
  color: var(--cyan);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.refresh-banner .refresh-btn:hover {
  background: rgba(54, 231, 255, 0.28);
}

/* Pulse animation for the refresh banner to grab attention */
@keyframes ghost-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(54, 231, 255, 0.30), 0 0 12px rgba(54, 231, 255, 0.10);
    border-color: rgba(54, 231, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(54, 231, 255, 0), 0 0 20px rgba(54, 231, 255, 0.25);
    border-color: rgba(54, 231, 255, 0.65);
  }
}
.refresh-banner.visible {
  animation: ghost-flash-in 0.3s ease-out, ghost-pulse 2s ease-in-out infinite 0.3s;
}

/* Subtle text shimmer on the refresh banner to make it feel alive */
@keyframes ghost-text-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(54, 231, 255, 0.20); }
  50%      { text-shadow: 0 0 10px rgba(54, 231, 255, 0.45); }
}
.refresh-banner.visible .refresh-text {
  animation: ghost-text-glow 2s ease-in-out infinite;
}
.brand span {
  animation: ghost-text-glow 3s ease-in-out infinite;
}

/* Metric value subtle shimmer while loading (added via JS class) */
@keyframes ghost-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.metric-value.loading {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: ghost-shimmer 1.4s ease-in-out infinite;
  color: transparent;
  border-radius: 4px;
}

/* Chart canvas fade-in once Chart.js finishes initializing */
.chart-box canvas {
  animation: ghost-fade-in 0.5s ease-out;
}

/* Sidebar toggle arrow rotation now transitions smoothly */
.side-toggle { transition: transform .22s ease; }
.side-toggle:hover { transform: translateY(-1px); }
.side-section[data-open="true"] .side-toggle:hover { transform: rotate(90deg) translateX(1px); }

/* Status pills get a subtle hover state */
.status-pill { transition: border-color .18s ease, background .18s ease; }
.status-pill:hover { border-color: rgba(54, 231, 255, 0.45); }

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(54, 231, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(54, 231, 255, 0.12), 0 0 22px rgba(54, 231, 255, 0.08);
  background: rgba(5, 12, 24, 0.9);
}

tbody tr {
  transition: background .18s ease, transform .18s ease;
}
tbody tr:hover {
  background: rgba(54, 231, 255, 0.055);
  transform: translateX(3px);
}

.server-icon,
.user-profile-avatar,
.bot-profile-avatar {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.card:hover .server-icon,
.user-profile-card:hover .user-profile-avatar,
.bot-profile-panel:hover .bot-profile-avatar {
  transform: scale(1.06) rotate(-2deg);
  border-color: rgba(54, 231, 255, 0.52);
  box-shadow: 0 0 24px rgba(54, 231, 255, 0.18);
}

/* "View Transcript" / "View Ticket" links get a hover state */
.transcript-link { transition: border-color .18s ease, background .18s ease, transform .12s ease; }
.transcript-link:hover {
  transform: translateY(-1px);
  border-color: rgba(107, 255, 189, 0.45);
  background: rgba(107, 255, 189, 0.16);
}

/* Respect users who prefer reduced motion — disable all animations */
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) *,
  body:not([data-motion="full"]) *::before,
  body:not([data-motion="full"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
   SERVER CONFIG FORM — used by /server/<id>/config
   ======================================================================== */

.config-form {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.config-field {
  display: block;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid rgba(124, 240, 255, 0.13);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.4);
  transition: border-color .18s ease, background .18s ease;
}
.config-field:hover {
  border-color: rgba(124, 240, 255, 0.28);
}

.config-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 14px;
}

.config-label {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}

.config-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}
.config-hint code {
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

.config-field input[type="text"],
.config-field input[type="number"],
.config-field input[type="file"],
.config-field textarea {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
}

.config-field textarea {
  min-height: 108px;
  resize: vertical;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.76);
  color: var(--text);
  padding: 12px 13px;
  outline: none;
  line-height: 1.5;
}

.config-field textarea:focus {
  border-color: rgba(54, 231, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(54, 231, 255, 0.12);
}

.config-field input[type="file"] {
  border: 1px dashed rgba(124, 240, 255, 0.28);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.58);
  color: var(--muted);
  padding: 12px 13px;
}

/* Inline field (for the compact mode toggle) — label on left, toggle on right */
.config-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.config-field-inline label {
  flex: 1 1 320px;
  margin-bottom: 0;
}

/* Toggle switch (replaces a bare checkbox for Compact Mode) */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 24px;
  transition: background .22s ease, border-color .22s ease;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s ease;
}
.toggle input:checked + .toggle-slider {
  background: rgba(54, 231, 255, 0.22);
  border-color: rgba(54, 231, 255, 0.55);
}
.toggle input:checked + .toggle-slider:before {
  transform: translateX(22px);
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(54, 231, 255, 0.55);
}
.toggle-label {
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
  min-width: 70px;
}
.toggle input:checked ~ .toggle-label {
  color: var(--cyan);
}

.config-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(124, 240, 255, 0.13);
}

/* The "Current Values" table at the bottom — slightly compact */
.config-field + .config-field { margin-top: 0; }

/* Make the config form's <code> tags readable in the summary table */
td code {
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
}

/* Bot server profile preview */
.bot-profile-preview {
  display: flex;
  align-items: center;
  gap: 18px;
}
.bot-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 1px solid rgba(124, 240, 255, 0.28);
  background: rgba(54, 231, 255, 0.10);
  display: grid;
  place-items: center;
  color: var(--cyan);
  font-size: 32px;
  font-weight: 850;
  overflow: hidden;
  flex: 0 0 auto;
}
.bot-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bot-profile-copy {
  min-width: 0;
}
.bot-profile-copy h2 {
  margin-bottom: 6px;
}
.bot-profile-copy p {
  margin: 0 0 12px;
  max-width: 680px;
  overflow-wrap: anywhere;
}
.profile-remove-avatar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0 !important;
  color: var(--muted) !important;
}
.profile-remove-avatar input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ========================================================================
   CONFIG DROPDOWNS + REFRESH BUTTONS
   ======================================================================== */

.config-field-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.config-field-header label {
  flex: 1 1 280px;
  margin-bottom: 0;
}

/* The role/channel <select> dropdowns */
.config-field select.role-select,
.config-field select.channel-select {
  width: 100%;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.76);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s ease;
  /* For multi-select: show several rows */
  min-height: 48px;
}
.config-field select.role-select {
  /* Multi-select: taller so several roles are visible */
  min-height: 180px;
  /* Some browsers show checkboxes next to multi-select options */
}
.config-field select.role-select:focus,
.config-field select.channel-select:focus {
  border-color: rgba(54, 231, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(54, 231, 255, 0.12);
}
.config-field select.role-select option,
.config-field select.channel-select option {
  padding: 6px 8px;
  background: rgba(4, 8, 16, 0.95);
  color: var(--text);
}
.config-field select.role-select option:checked,
.config-field select.channel-select option:checked {
  background: rgba(54, 231, 255, 0.22);
  color: var(--cyan);
  font-weight: 700;
}
.config-field select.role-select option:disabled,
.config-field select.channel-select option:disabled {
  color: var(--danger);
  font-style: italic;
}

/* Hint text below dropdowns */
.select-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.selected-count {
  color: var(--cyan);
  font-weight: 700;
  font-style: normal;
}

/* Refresh button — small, secondary style */
.refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
  flex-shrink: 0;
}
.refresh-btn:hover {
  border-color: rgba(54, 231, 255, 0.55);
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
}
.refresh-btn:active {
  transform: scale(0.95);
}
.refresh-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.refresh-btn .refresh-label {
  font-size: 12px;
}

/* ========================================================================
   BOTTOM-LEFT USER PROFILE CARD + GEAR DROPDOWN
   ======================================================================== */

.user-profile-card {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9, 15, 28, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  max-width: 260px;
  animation: ghost-rise 0.4s ease-out;
}

.user-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(54, 231, 255, 0.3), rgba(255, 79, 216, 0.3));
  border: 1px solid rgba(124, 240, 255, 0.3);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  flex-shrink: 0;
  overflow: hidden;  /* clip the avatar image to the circle */
}
.user-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-profile-avatar.avatar-fallback {
  /* When the avatar image fails to load, the JS adds this class and writes
     the first letter as text content. This style ensures the letter looks
     the same as the no-avatar fallback. */
  background: linear-gradient(135deg, rgba(54, 231, 255, 0.3), rgba(255, 79, 216, 0.3));
}
.avatar-letter {
  /* The letter shown when no avatar is available */
  pointer-events: none;
}

.user-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.user-profile-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-profile-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-menu-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  flex-shrink: 0;
  padding: 0;
  align-self: center;
  box-sizing: border-box;
}
.user-profile-menu-button > span {
  display: block;
  line-height: 1;
  transform: translateY(-2px);
}
.user-profile-menu-button:hover {
  border-color: rgba(54, 231, 255, 0.55);
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
}
.user-profile-menu-button[aria-expanded="true"] {
  border-color: var(--cyan);
  background: rgba(54, 231, 255, 0.18);
  color: var(--cyan);
}

/* Dropdown menu — hidden by default, slides up when .open */
.user-profile-dropdown {
  position: fixed;
  z-index: 1300;
  top: 0;
  left: 0;
  width: min(220px, calc(100vw - 24px));
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(9, 15, 28, 0.98);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.user-profile-dropdown[hidden] {
  display: none;
}
.user-profile-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.dropdown-item:hover {
  background: rgba(54, 231, 255, 0.10);
  color: var(--cyan);
}
.dropdown-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}
.dropdown-danger {
  color: var(--danger);
}
.dropdown-danger:hover {
  background: rgba(255, 88, 116, 0.10);
  color: var(--danger);
}
.dropdown-divider {
  height: 1px;
  background: rgba(124, 240, 255, 0.13);
  margin: 6px 4px;
}

/* Bug report form */
.report-bug-header h1 {
  margin: 12px 0 8px;
  font-size: clamp(30px, 4vw, 46px);
}
.report-bug-panel {
  display: flex;
  justify-content: center;
}
.report-bug-form {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}
.report-file-status {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.report-bug-form input[readonly] {
  cursor: default;
  color: var(--text);
  background: rgba(124, 240, 255, 0.06);
}
.report-storage-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--cyan);
  background: rgba(54, 231, 255, 0.07);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Keep the profile controls in document flow on mobile so they never cover forms. */
@media (max-width: 600px) {
  .user-profile-card {
    position: relative;
    bottom: auto;
    left: auto;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 18px 16px 0;
  }
  .user-profile-info { max-width: 120px; }
}

/* ========================================================================
   SITE FOOTER
   ======================================================================== */

.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 28px;
  text-align: center;
  border-top: 1px solid rgba(124, 240, 255, 0.10);
  margin-top: 32px;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}

.footer-links a:hover {
  color: var(--cyan);
}

.footer-sep {
  color: rgba(124, 240, 255, 0.20);
  font-size: 11px;
  user-select: none;
}

.footer-copy {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(142, 163, 189, 0.5);
  letter-spacing: 0.3px;
}

/* ========================================================================
   SETTINGS PAGE LAYOUT
   ======================================================================== */

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 15, 28, 0.88);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.24);
}
.settings-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.settings-nav-category {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 10px 6px;
  border-top: 1px solid rgba(124, 240, 255, 0.08);
  margin-top: 6px;
}
.settings-nav-category:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}
.settings-nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.settings-nav-item:hover {
  background: rgba(54, 231, 255, 0.08);
  color: var(--text);
}
.settings-nav-item.active {
  background: rgba(54, 231, 255, 0.16);
  color: var(--cyan);
}

.settings-content {
  min-width: 0;
}
.settings-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px;
  margin-bottom: 16px;
  animation: ghost-fade-in 0.3s ease-out;
}
.settings-section h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.settings-section > p {
  margin-bottom: 18px;
}

/* Placeholder for stubbed sections (billing pages) */
.settings-placeholder {
  text-align: center;
  padding: 36px 20px;
}
.placeholder-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}
.settings-placeholder h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.settings-placeholder p {
  max-width: 380px;
  margin: 0 auto 18px;
  color: var(--muted);
}

/* Sessions table — reuse existing table styles, add current-session highlight */
.sessions-table .session-current {
  background: rgba(54, 231, 255, 0.06);
}
.sessions-table .session-current td:first-child {
  border-left: 3px solid var(--cyan);
}

/* Responsive: stack settings nav above content on narrow screens */
@media (max-width: 700px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
  }
  .settings-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .settings-nav-category {
    width: 100%;
    border-top: 1px solid rgba(124, 240, 255, 0.08);
    padding: 10px 6px 4px;
  }
  .settings-nav-item {
    font-size: 13px;
    padding: 6px 8px;
  }
}

/* ========================================================================
   FEATURES SECTION — scroll-animated landing modules (home page)
   Appended block. Reuses the existing :root variables; does NOT redefine.
   Sections: hero scroll-cue → stats band → features grid → how-it-works → CTA.
   Class prefix: .feat-*
   ======================================================================== */

/* ---- Section shell ---- */
.feat-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 0;
}
.feat-section + .feat-section { padding-top: 14px; }
.feat-section-head { max-width: 720px; margin-bottom: 44px; }
.feat-section-head .badge { margin-bottom: 18px; }
.feat-title {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.04;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.feat-lede {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}

/* ---- Scroll-reveal base states (variants driven by data-reveal value) ---- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}
[data-reveal="up"]    { transform: translateY(42px); }
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Scroll cue (bouncing chevron dot at bottom of hero) ---- */
.scroll-cue {
  margin-top: 52px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.scroll-cue span {
  position: relative;
  display: block;
  width: 26px;
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(54, 231, 255, 0.8);
  animation: ghost-scroll-dot 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ghost-scroll-dot {
  0%   { transform: translateY(0);   opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 0; }
}

/* ---- Stats band ---- */
.feat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feat-stat { text-align: center; }
.feat-stat-num {
  font-size: clamp(44px, 7.6vw, 92px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(54, 231, 255, 0.25));
}
.feat-stat-label {
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Features grid ---- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.feat-card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(16, 24, 42, 0.72), rgba(11, 16, 30, 0.72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
/* sheen sweep on hover */
.feat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, transparent 30%, rgba(124, 240, 255, 0.12) 48%, rgba(255, 79, 216, 0.10) 52%, transparent 70%);
  background-size: 280% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: opacity 0.4s ease, background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* corner glow on hover */
.feat-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 140%;
  z-index: 0;
  background: radial-gradient(circle, rgba(54, 231, 255, 0.10), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.feat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(54, 231, 255, 0.55);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(54, 231, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.feat-card:hover::before { opacity: 1; background-position: -130% 0; }
.feat-card:hover::after  { opacity: 1; }
.feat-card > * { position: relative; z-index: 2; }

.feat-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(54, 231, 255, 0.10), rgba(255, 79, 216, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 30px;
  margin-bottom: 18px;
}
.feat-card-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.feat-card-text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ---- How it works ---- */
.feat-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
/* horizontal connector line through the number-circle centers (desktop) */
.feat-steps::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 16.67%;
  right: 16.67%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.feat-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.feat-step-num {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 850;
  color: var(--text);
  background: radial-gradient(circle at 30% 25%, rgba(54, 231, 255, 0.22), rgba(11, 16, 30, 0.95));
  border: 1px solid rgba(54, 231, 255, 0.45);
  box-shadow: 0 0 30px rgba(54, 231, 255, 0.35), inset 0 0 18px rgba(54, 231, 255, 0.18);
}
.feat-step-body { max-width: 32ch; }
.feat-step-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.feat-step-text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ---- Big CTA ---- */
.feat-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(40px, 6vw, 76px) clamp(28px, 5vw, 64px);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(54, 231, 255, 0.12), rgba(255, 79, 216, 0.10)),
    var(--panel-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
}
/* slowly shifting radial gradient field */
.feat-cta::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(54, 231, 255, 0.30), transparent 60%),
    radial-gradient(45% 55% at 80% 70%, rgba(255, 79, 216, 0.26), transparent 60%),
    radial-gradient(35% 45% at 50% 50%, rgba(107, 255, 189, 0.12), transparent 60%);
  background-size: 200% 200%;
  filter: blur(6px);
  animation: ghost-cta-shift 14s ease-in-out infinite;
}
@keyframes ghost-cta-shift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.feat-cta-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(124, 240, 255, 0.06), transparent);
  background-size: 250% 100%;
  animation: ghost-cta-sweep 7s linear infinite;
}
@keyframes ghost-cta-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}
.feat-cta-title {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.feat-cta-text {
  margin: 0 auto 32px;
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
}
.feat-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.feat-cta-btn {
  font-size: 16px;
  padding: 14px 28px;
  animation: ghost-cta-pulse 2.6s ease-in-out infinite;
}
@keyframes ghost-cta-pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(54, 231, 255, 0.18), 0 0 0 0 rgba(54, 231, 255, 0.30); }
  50%      { box-shadow: 0 0 38px rgba(54, 231, 255, 0.35), 0 0 0 8px rgba(54, 231, 255, 0); }
}
.feat-cta-link {
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.feat-cta-link:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* ---- Responsive (≤ 768px): collapse grids, stack steps vertically ---- */
@media (max-width: 768px) {
  .feat-section { padding: 52px 0; }
  .feat-section-head { margin-bottom: 32px; }
  .feat-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; padding: 44px 0; }
  .feat-grid { grid-template-columns: 1fr; gap: 16px; }
  .feat-steps { grid-template-columns: 1fr; gap: 22px; }
  /* vertical connector line through the number-circle centers */
  .feat-steps::before {
    top: 0; bottom: 0; left: 30px; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  }
  .feat-step { flex-direction: row; align-items: center; text-align: left; }
  .feat-step-body { max-width: none; }
  .feat-cta-actions { flex-direction: column; gap: 14px; }
  .feat-cta-btn { width: 100%; max-width: 320px; }
}

/* ---- Reduced motion: kill transforms, animations, and smooth scroll ---- */
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  body:not([data-motion="full"]) .scroll-cue span::after,
  body:not([data-motion="full"]) .feat-cta::before,
  body:not([data-motion="full"]) .feat-cta-glow,
  body:not([data-motion="full"]) .feat-cta-btn { animation: none !important; }
  body:not([data-motion="full"]) .feat-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
  html:not([data-motion="full"]) { scroll-behavior: auto; }
}

/* ========================================================================
   SCROLL-DRIVEN MOTION UPGRADE
   Adds: scroll-progress bar, hero parallax, section-title clip-path reveal,
   stat-number parallax drift, sticky/pinned feature cards, smooth scroll.
   Driven by JS that sets --scroll-y (px) and --scroll-progress (0..1)
   CSS variables on :root via requestAnimationFrame.

   IMPORTANT: All scroll-driven styles are gated behind `body.js-loaded`
   so that if JS fails to load, content stays visible (no opacity:0 trap).
   ======================================================================== */

html {
  scroll-behavior: smooth;
}

/* ---- Scroll progress bar (top of viewport) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.scroll-progress::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 14px rgba(54, 231, 255, 0.7);
  transition: width 0.08s linear;
}

/* ---- Animated aurora ribbon that responds to scroll ---- */
.aurora-ribbon {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(40% 60% at calc(20% + var(--scroll-progress, 0) * 60%) calc(30% + var(--scroll-progress, 0) * 40%), rgba(54, 231, 255, 0.22), transparent 65%),
    radial-gradient(45% 65% at calc(80% - var(--scroll-progress, 0) * 50%) calc(70% - var(--scroll-progress, 0) * 30%), rgba(255, 79, 216, 0.18), transparent 65%);
  transition: opacity 0.8s ease;
}
body.js-loaded .aurora-ribbon { opacity: 0.35; }

/* ---- All scroll-driven transforms gated behind js-loaded ---- */

/* Hero parallax: drifts up + fades as user scrolls */
body.js-loaded .hero {
  will-change: transform, opacity;
  transform: translate3d(0, calc(var(--hero-parallax, 0) * -0.35px), 0);
  opacity: calc(1 - var(--hero-parallax, 0) * 0.85);
  transition: opacity 0.15s linear;
}
body.js-loaded[data-scrolled="true"] .scroll-cue { opacity: 0; transition: opacity 0.4s ease; }

/* Section title clip-path reveal (scroll-driven) */
body.js-loaded .feat-section-head .feat-title {
  clip-path: inset(0 0 calc((1 - var(--title-reveal, 1)) * 100%) 0);
  transform: translateY(calc((1 - var(--title-reveal, 1)) * 18px));
  will-change: transform, clip-path;
}
body.js-loaded .feat-section-head .feat-lede {
  opacity: var(--title-reveal, 1);
  transform: translateY(calc((1 - var(--title-reveal, 1)) * 12px));
  will-change: transform, opacity;
}

/* Stat numbers: continuous parallax drift on scroll */
body.js-loaded .feat-stat-num {
  will-change: transform;
  transform: translate3d(0, calc(var(--stat-drift, 0) * -24px), 0)
             scale(calc(1 + var(--stat-drift, 0) * 0.05));
  transition: transform 0.1s linear;
}
body.js-loaded .feat-stat-label {
  opacity: calc(0.5 + var(--stat-drift, 0) * 0.5);
  transition: opacity 0.1s linear;
}

/* Feature cards: 3D tilt-in on scroll
   Hover still wins because :hover has higher specificity than base. */
body.js-loaded .feat-card {
  transform: translate3d(0, calc(var(--card-parallax, 0) * -12px), 0)
             rotateX(calc((1 - var(--card-reveal, 1)) * 6deg))
             rotateY(calc((1 - var(--card-reveal, 1)) * -3deg));
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.15s linear, border-color 0.4s ease, box-shadow 0.4s ease;
}
body.js-loaded .feat-card:hover {
  transform: translate3d(0, -6px, 0)
             rotateX(calc((1 - var(--card-reveal, 1)) * 6deg))
             rotateY(calc((1 - var(--card-reveal, 1)) * -3deg));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

/* CTA glow intensifies as it enters viewport */
body.js-loaded .feat-cta {
  transform: scale(calc(0.97 + var(--cta-reveal, 1) * 0.03));
  opacity: var(--cta-reveal, 1);
  transition: transform 0.15s linear, opacity 0.15s linear;
}
body.js-loaded .feat-cta-glow { opacity: calc(var(--cta-reveal, 1) * 0.9); }

/* Steps: subtle horizontal drift based on scroll */
body.js-loaded .feat-step {
  transform: translateX(calc(var(--step-drift, 0) * 14px));
  will-change: transform;
  transition: transform 0.1s linear;
}
body.js-loaded .feat-step:nth-child(2) { transform: translateX(calc(var(--step-drift, 0) * -7px)); }
body.js-loaded .feat-step:nth-child(3) { transform: translateX(calc(var(--step-drift, 0) * -14px)); }

/* ---- Reduced motion: kill all scroll-driven transforms ---- */
@media (prefers-reduced-motion: reduce) {
  body.js-loaded:not([data-motion="full"]) .hero { transform: none !important; opacity: 1 !important; }
  body.js-loaded:not([data-motion="full"]) .feat-section-head .feat-title { clip-path: none !important; transform: none !important; }
  body.js-loaded:not([data-motion="full"]) .feat-section-head .feat-lede { opacity: 1 !important; transform: none !important; }
  body.js-loaded:not([data-motion="full"]) .feat-stat-num { transform: none !important; }
  body.js-loaded:not([data-motion="full"]) .feat-stat-label { opacity: 1 !important; }
  body.js-loaded:not([data-motion="full"]) .feat-card,
  body.js-loaded:not([data-motion="full"]) .feat-card:hover { transform: none !important; }
  body.js-loaded:not([data-motion="full"]) .feat-cta { transform: none !important; opacity: 1 !important; }
  body.js-loaded:not([data-motion="full"]) .feat-cta-glow { opacity: 1 !important; }
  body.js-loaded:not([data-motion="full"]) .feat-step,
  body.js-loaded:not([data-motion="full"]) .feat-step:nth-child(2),
  body.js-loaded:not([data-motion="full"]) .feat-step:nth-child(3) { transform: none !important; }
  body:not([data-motion="full"]) .scroll-progress::before { width: 0 !important; }
  body:not([data-motion="full"]) .aurora-ribbon { display: none; }
}

/* ========================================================================
   EDITORIAL MOTION SYSTEM
   Slow, staggered reveals and page transitions inspired by cinematic
   portfolio pacing. The shared script adds the state classes at runtime.
   ======================================================================== */

:root {
  --motion-ease: cubic-bezier(.38, .005, .215, 1);
  --motion-duration: .9s;
  --motion-stagger: 90ms;
}

/* Replace the previous busy loops with one very slow ambient movement. */
body::before {
  animation: ghost-grid-drift 64s linear infinite;
  opacity: .72;
}

body::after {
  animation: ghost-editorial-wash 24s var(--motion-ease) infinite alternate;
  opacity: .24;
}

@keyframes ghost-editorial-wash {
  from { transform: translate3d(-4%, -2%, 0); }
  to { transform: translate3d(4%, 2%, 0); }
}

/* Route curtain: enters from the top before a same-origin navigation. */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: #090d17;
  transform: translate3d(0, -102%, 0);
  will-change: transform;
}

.page-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text);
}

.page-loading strong { font-size: 15px; letter-spacing: 0; }
.page-loading small { color: var(--muted); font-size: 11px; }

.page-loading-mark {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border: 1px solid rgba(124, 240, 255, .2);
  border-radius: 50%;
  background: rgba(54, 231, 255, .06);
  box-shadow: 0 0 34px rgba(54, 231, 255, .12);
}

.page-loading-mark::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-right-color: rgba(255, 79, 216, .72);
  border-radius: 50%;
  animation: page-loader-spin .85s linear infinite;
}

.page-loading-mark span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(54, 231, 255, .72);
  animation: page-loader-pulse .7s ease-in-out infinite alternate;
}

@keyframes page-loader-spin { to { transform: rotate(360deg); } }
@keyframes page-loader-pulse { to { transform: scale(.62); opacity: .55; } }

.page-transition::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  box-shadow: 0 0 20px rgba(54, 231, 255, .32);
}

body.motion-entering .page-transition {
  animation: ghost-curtain-out .9s var(--motion-ease) .04s both;
}

body.motion-leaving .page-transition {
  animation: none;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: transform .46s var(--motion-ease);
}

body.motion-leaving .shell,
body.motion-leaving .site-footer,
body.motion-leaving .user-profile-card {
  opacity: .18;
  transform: translate3d(0, -10px, 0);
  transition: opacity .36s ease, transform .46s var(--motion-ease);
}

@keyframes ghost-curtain-out {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -102%, 0); }
}

/* Disable the old short load animations; JS now reveals elements on entry. */
.shell,
.panel,
.card,
.overview-card,
.server-card,
tbody tr,
.flash,
.chart-box canvas {
  animation: none;
}

body.motion-enabled .motion-reveal {
  --motion-index: 0;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--motion-index) * var(--motion-stagger));
  will-change: opacity, transform;
}

body.motion-enabled .motion-reveal.motion-reveal-left {
  transform: translate3d(-24px, 0, 0);
}

body.motion-enabled .motion-reveal.motion-reveal-line {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 72%, 0);
  transition:
    clip-path 1s var(--motion-ease),
    opacity 1s var(--motion-ease),
    transform 1s var(--motion-ease);
  transition-delay: calc(var(--motion-index) * 75ms);
}

body.motion-enabled .motion-reveal.motion-reveal-row {
  transform: translate3d(0, 18px, 0);
  transition-duration: .72s;
  transition-delay: calc(var(--motion-index) * 55ms);
}

body.motion-enabled .motion-reveal.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

/* Quieter portfolio-style interaction: motion comes from spacing and timing. */
.panel,
.card,
.feat-card,
.btn,
button,
.sidebar a,
.transcript-link {
  transition-timing-function: var(--motion-ease);
}

.panel:hover,
.card:hover {
  transform: translate3d(0, -4px, 0);
  transition-duration: .55s;
}

.panel:hover::after,
.card:hover::after {
  animation: none;
  opacity: 0;
}

.panel:hover::before,
.card:hover::before {
  opacity: .46;
  transition-duration: .55s;
}

.badge,
.brand span,
.feat-cta-btn {
  animation: none;
}

.refresh-banner.visible {
  animation: ghost-flash-in .65s var(--motion-ease);
}

.scroll-progress::before {
  background: var(--cyan);
  box-shadow: none;
}

.aurora-ribbon {
  display: none;
}

/* Support performance analytics */
.analytics-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}
.analytics-heading h1,
.handled-header h1 {
  font-size: 38px;
  line-height: 1.08;
}
.analytics-heading p,
.handled-header p { margin-bottom: 0; }
.time-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 8, 16, .62);
}
.time-mode a {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.time-mode a.active {
  color: var(--text);
  background: rgba(54, 231, 255, .14);
}
.overview-card .metric-value {
  min-height: 42px;
  font-size: 30px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.handled-header {
  display: grid;
  grid-template-columns: minmax(190px, .75fr) minmax(420px, 1.25fr);
  align-items: end;
  gap: 24px;
}
.handled-filter {
  display: grid;
  grid-template-columns: minmax(80px, .65fr) minmax(110px, .85fr) minmax(130px, 1.15fr) auto;
  gap: 10px;
  align-items: end;
}
.handled-filter input:not([type="checkbox"]),
.handled-filter select,
.handled-filter > button { min-height: 44px; }
.handled-filter select {
  width: 100%;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.76);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  outline: none;
}
.handled-panel-picker {
  grid-column: 1 / -1;
  border: 1px solid rgba(124, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 8, 16, 0.76);
}
.handled-panel-picker summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}
.handled-panel-picker summary::-webkit-details-marker { display: none; }
.handled-panel-picker summary > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.handled-panel-picker summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handled-panel-picker summary svg {
  width: 18px;
  height: 18px;
  color: var(--cyan);
  transition: transform .18s ease;
}
.handled-panel-picker[open] summary svg { transform: rotate(180deg); }
.handled-panel-menu {
  padding: 12px;
  border-top: 1px solid rgba(124, 240, 255, 0.14);
}
.handled-panel-menu-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.handled-panel-menu-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.handled-panel-menu-head button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid rgba(124, 240, 255, 0.2);
  border-radius: 6px;
  background: rgba(54, 231, 255, 0.08);
  color: var(--cyan);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.handled-panel-options {
  max-height: 188px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  scrollbar-color: rgba(124, 240, 255, .28) transparent;
}
.handled-panel-option {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}
.handled-panel-option:has(input:checked) {
  border-color: rgba(107, 255, 189, 0.34);
  background: rgba(107, 255, 189, 0.07);
}
.handled-panel-option input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--green);
}
.handled-panel-option > span { min-width: 0; }
.handled-panel-option strong,
.handled-panel-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handled-panel-option strong { color: var(--text); font-size: 13px; }
.handled-panel-option small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.handled-panel-none {
  grid-column: 1 / -1;
  padding: 18px 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.handled-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.handled-summary .panel { min-height: 112px; }
.handled-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}
.handled-summary strong {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.handled-board-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.handled-board-heading h2 { margin: 10px 0 0; }
.handled-order {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.table-scroll { width: 100%; overflow-x: auto; }
.handled-table { min-width: 760px; }
.handled-table td { vertical-align: middle; }
.rank-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--cyan);
  font-weight: 850;
}
.supporter-name,
.supporter-id { display: block; }
.supporter-name {
  max-width: 230px;
  overflow-wrap: anywhere;
}
.supporter-id {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.handled-count { color: var(--green); font-size: 20px; }
.share-value { margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.share-track {
  width: 94px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(142, 163, 189, .18);
}
.share-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}
.handled-empty {
  padding: 54px 20px;
  border-top: 1px solid rgba(124, 240, 255, .13);
  text-align: center;
}
.handled-empty h3 { margin: 0; font-size: 18px; }
.handled-empty p { margin-bottom: 0; }

@media (max-width: 1040px) {
  .handled-header { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 680px) {
  .analytics-heading { align-items: flex-start; flex-direction: column; }
  .time-mode { width: 100%; }
  .handled-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handled-filter > button { width: 100%; }
  .handled-panel-options { grid-template-columns: 1fr; }
  .handled-summary { grid-template-columns: 1fr; }
  .handled-summary .panel { min-height: 94px; }
  .handled-board-heading { align-items: flex-start; flex-direction: column; }
}

/* Custom route error */
.error-page {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 20px 82px;
  text-align: center;
}

.error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(238, 246, 255, .92);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 210px;
  font-weight: 900;
  line-height: .78;
  letter-spacing: 0;
  user-select: none;
}

.error-code span:first-child { color: var(--cyan); text-shadow: 0 0 30px rgba(54, 231, 255, .18); }
.error-code span:last-child { color: var(--pink); text-shadow: 0 0 30px rgba(255, 79, 216, .15); }
.error-content { width: min(620px, 100%); margin-top: 34px; }
.error-kicker { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.error-content h1 { margin-top: 9px; font-size: 40px; line-height: 1.08; letter-spacing: 0; }
.error-content p { margin: 14px auto 0; font-size: 14px; }
.error-path {
  display: block;
  width: min(520px, 100%);
  margin: 24px auto 0;
  padding: 12px 4px;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.error-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.error-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.error-actions .btn svg { width: 17px; height: 17px; }

@media (max-width: 600px) {
  .error-page { min-height: calc(100vh - 150px); padding: 44px 10px 66px; }
  .error-code { font-size: 124px; }
  .error-content { margin-top: 28px; }
  .error-content h1 { font-size: 30px; }
  .error-actions { flex-direction: column; align-items: stretch; }
  .error-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) .page-transition { display: none !important; }
  body.motion-enabled:not([data-motion="full"]) .motion-reveal,
  body.motion-enabled:not([data-motion="full"]) .motion-reveal.motion-reveal-left,
  body.motion-enabled:not([data-motion="full"]) .motion-reveal.motion-reveal-line,
  body.motion-enabled:not([data-motion="full"]) .motion-reveal.motion-reveal-row {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  body.motion-leaving:not([data-motion="full"]) .shell,
  body.motion-leaving:not([data-motion="full"]) .site-footer,
body.motion-leaving:not([data-motion="full"]) .user-profile-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   LIGHT THEME
   ======================================================================== */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --line: rgba(20, 86, 112, 0.22);
  --text: #172033;
  --muted: #5d6b7f;
  --cyan: #087f9c;
  --pink: #a52d8f;
  --green: #087a55;
  --danger: #c73553;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(8, 127, 156, 0.12), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(165, 45, 143, 0.09), transparent 26rem),
    linear-gradient(135deg, #f8fbff 0%, #eef4fa 52%, #f7f4fb 100%);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(20, 86, 112, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 86, 112, 0.07) 1px, transparent 1px);
}

html[data-theme="light"] body::after {
  background: linear-gradient(115deg, transparent 42%, rgba(8, 127, 156, 0.06) 47%, rgba(165, 45, 143, 0.05) 50%, transparent 56%);
  mix-blend-mode: multiply;
  opacity: 0.45;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .settings-nav,
html[data-theme="light"] .user-profile-card,
html[data-theme="light"] .user-profile-dropdown {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(50, 74, 96, 0.14);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .feat-card {
  box-shadow: 0 18px 54px rgba(50, 74, 96, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .feat-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 252, 0.94));
}

html[data-theme="light"] .feat-card:hover {
  border-color: rgba(8, 127, 156, 0.46);
  box-shadow: 0 24px 64px rgba(50, 74, 96, 0.18), 0 0 0 1px rgba(8, 127, 156, 0.1);
}

html[data-theme="light"] .feat-card-icon {
  background: linear-gradient(135deg, rgba(8, 127, 156, 0.1), rgba(165, 45, 143, 0.08));
}

html[data-theme="light"] .feat-step-num {
  background: radial-gradient(circle at 30% 25%, rgba(8, 127, 156, 0.18), rgba(255, 255, 255, 0.98));
  border-color: rgba(8, 127, 156, 0.38);
  box-shadow: 0 12px 28px rgba(50, 74, 96, 0.16), inset 0 0 16px rgba(8, 127, 156, 0.08);
}

html[data-theme="light"] .feat-cta {
  box-shadow: 0 24px 72px rgba(50, 74, 96, 0.16);
}

html[data-theme="light"] .btn,
html[data-theme="light"] button {
  background:
    linear-gradient(135deg, rgba(8, 127, 156, 0.12), rgba(165, 45, 143, 0.09)),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  box-shadow: 0 4px 18px rgba(8, 127, 156, 0.08);
}

html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .side-toggle,
html[data-theme="light"] .user-profile-menu-button,
html[data-theme="light"] .status-pill.closed,
html[data-theme="light"] .handled-panel-option {
  background: rgba(23, 32, 51, 0.045);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .config-field textarea,
html[data-theme="light"] .config-field input[type="file"],
html[data-theme="light"] .config-field select.role-select,
html[data-theme="light"] .config-field select.channel-select,
html[data-theme="light"] .handled-filter select,
html[data-theme="light"] .handled-panel-picker,
html[data-theme="light"] .time-mode {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

html[data-theme="light"] .config-field select.role-select option,
html[data-theme="light"] .config-field select.channel-select option {
  background: #ffffff;
  color: var(--text);
}

html[data-theme="light"] .config-field,
html[data-theme="light"] .analytics-card,
html[data-theme="light"] .handled-panel-menu {
  background: rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] .page-transition {
  background: #f4f7fb;
}

html[data-theme="light"] .page-loading-mark {
  background: rgba(8, 127, 156, 0.08);
}

html[data-theme="light"] .metric-value,
html[data-theme="light"] .settings-placeholder h3,
html[data-theme="light"] .handled-panel-option strong {
  color: var(--text);
}

html[data-theme="light"] th,
html[data-theme="light"] td,
html[data-theme="light"] .dropdown-divider,
html[data-theme="light"] .config-actions {
  border-color: rgba(20, 86, 112, 0.14);
}