/*
=========================================================
  GLOBAL — Qckr Design System Tokens
=========================================================
*/

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --qckr-purple:       #7D00FF;
  --qckr-purple-hover: #9B3DFF;
  --qckr-purple-deep:  #5200B8;
  --qckr-cyan:         #00D9FF;
  --qckr-cyan-soft:    rgba(0, 217, 255, 0.14);
  --qckr-gold:         #FFD84D;
  --qckr-online:       #00F5B4;
  --qckr-success:      #00D68F;
  --qckr-warning:      #FFB84D;
  --qckr-danger:       #FF4D6D;

  /* ── Dark UI Foundation ─────────────────────────────── */
  --bg-app:     #0D0F14;
  --bg-sidebar: #131722;
  --bg-chat:    #1A1F2E;
  --bg-surface: #23293A;
  --bg-input:   #2A3042;

  /* ── Text ───────────────────────────────────────────── */
  --text-primary:   #F3F5FF;
  --text-secondary: #B7BED3;
  --text-muted:     #7F8799;

  /* ── Borders ────────────────────────────────────────── */
  --border-primary: #343B4F;
  --border-soft:    rgba(255, 255, 255, 0.06);

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:        0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md:        0 8px 20px rgba(0, 0, 0, 0.32);
  --shadow-lg:        0 18px 48px rgba(0, 0, 0, 0.42);
  --shadow-purple-sm: 0 2px 10px rgba(125, 0, 255, 0.12);
  --shadow-purple-md: 0 8px 24px rgba(125, 0, 255, 0.16);
  --shadow-purple-lg: 0 18px 50px rgba(125, 0, 255, 0.22);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ── Spacing ────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ── Typography ─────────────────────────────────────── */
  --font-brand:   "Fredoka", "Sora", sans-serif;
  --font-ui:      "Inter", "Readex Pro", sans-serif;
  --font-display: "Sora", "Inter", sans-serif;
  --tracking-ui:      -0.01em;
  --tracking-display: -0.02em;

  /* ── Transitions ────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-normal: 180ms ease;
  --transition-slow:   240ms ease;

  /* ── Glow ───────────────────────────────────────────── */
  --glow-purple: 0 0 20px rgba(125, 0, 255, 0.28);
  --glow-cyan:   0 0 20px rgba(0, 217, 255, 0.22);

  /* ── Glass ──────────────────────────────────────────── */
  --glass-bg: rgba(35, 41, 58, 0.78);
}

/* Customizes focus only when a user is tabbing. */
:focus-visible {
  outline: 3px solid var(--qckr-cyan); /* High contrast color. */
  outline-offset: 2px; /* Adds space between element and outline. */
}

/*
  Hides the default :focus for mouse users ONLY,
  if you have a custom :focus-visible style defined.
*/
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Light theme overrides ───────────────────────────── */
body.light-theme {
  --bg-app:         rgb(241, 243, 248);
  --bg-sidebar:     #E7EAF3;
  --bg-chat:        #FFFFFF;
  --bg-surface:     #F7F9FD;
  --bg-input:       #EEF2F8;
  --text-primary:   #1A1D29;
  --text-secondary: #5E6475;
  --text-muted:     #8A91A3;
  --border-primary: #D6DBE7;
  --border-soft:    rgba(20, 25, 40, 0.08);
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --shadow-sm:      0 2px 6px rgba(22, 34, 66, 0.08);
  --shadow-md:      0 6px 18px rgba(22, 34, 66, 0.10);
  --shadow-lg:      0 14px 40px rgba(22, 34, 66, 0.14);
}

/* ── Body ────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-ui);
  color: var(--text-primary);
  background:
    radial-gradient(circle at top left,    rgba(125,0,255,0.12), transparent 30%),
    radial-gradient(circle at top right,   rgba(0,217,255,0.06), transparent 24%),
    var(--bg-app);
  overflow: hidden;
}

/* ── Scrollbars ──────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: #3B4359; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--qckr-purple); }

/* ── Typography helpers ──────────────────────────────── */
.sora           { font-family: var(--font-display); }
.display-title  { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); }
.ui-title       { font-family: var(--font-ui);      font-weight: 700; }
.heading-xl     { font-size: 40px; line-height: 1;   }
.heading-lg     { font-size: 32px; line-height: 1.1; }
.heading-md     { font-size: 24px; line-height: 1.2; }
.heading-sm     { font-size: 20px; line-height: 1.3; }
.text-md        { font-size: 16px; line-height: 1.5; }
.text-sm        { font-size: 14px; line-height: 1.5; }
.text-xs        { font-size: 12px; line-height: 1.4; }
.text-muted     { color: var(--text-muted); }

/* ── Glass panel ─────────────────────────────────────── */
.glass-panel {
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--shadow-purple-sm);
  background: var(--glass-bg);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-family: var(--font-ui);
  user-select: none;
  transition:
    transform    var(--transition-fast),
    background   var(--transition-normal),
    box-shadow   var(--transition-normal),
    opacity      var(--transition-fast);
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: scale(0.98);      }

.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--qckr-purple), var(--qckr-purple-hover));
  box-shadow: var(--shadow-md), var(--shadow-purple-sm);
}
.btn-primary:hover {
  box-shadow: var(--shadow-lg), var(--shadow-purple-md), var(--glow-purple);
}

.btn-cyan {
  color: #061018;
  font-weight: 700;
  background: linear-gradient(135deg, var(--qckr-cyan), #5BE7FF);
  box-shadow: 0 8px 24px rgba(0,217,255,0.18);
}

.btn-ghost {
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.04);
}
.btn-ghost:hover {
  color: white;
  background: rgba(255,255,255,0.07);
}

.btn-full {
  width: 100%;
  height: 48px;
  font-size: 15px;
}

/* ── Text Areas & Inputs ───────────────────────────────────────────── */
.textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02);
  outline: 1px solid transparent;
  outline-offset: 0;
  color: var(--text-primary);
  background: var(--bg-input);
  transition:
    outline      var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow   var(--transition-normal),
    background   var(--transition-normal);
}

.textarea::placeholder { color: var(--text-muted); }
.textarea:focus {
  box-shadow:
    0 0 0 4px rgba(125,0,255,0.18),
    var(--shadow-purple-sm);
  border-color: rgba(125,0,255,0.8);
  outline-color: rgb(125,0,255);
  outline-offset: 0;
  background: #30374A;
}

.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02);
  outline: 1px solid transparent;
  outline-offset: 0;
  color: var(--text-primary);
  background: var(--bg-input);
  transition:
    outline      var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow   var(--transition-normal),
    background   var(--transition-normal);
}

.input::placeholder { color: var(--text-muted); }
.input:focus {
  box-shadow:
    0 0 0 4px rgba(125,0,255,0.18),
    var(--shadow-purple-sm);
  border-color: rgba(125,0,255,0.8);
  outline-color: rgb(125,0,255);
  outline-offset: 0;
  background: #30374A;
}

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-live   { color: #FF7F96;          background: rgba(255,77,109,0.16);  }
.badge-online { color: var(--qckr-online); background: rgba(0,245,180,0.14); }
.badge-quiz   { color: var(--qckr-cyan);   background: var(--qckr-cyan-soft); }
.badge-poll   { color: #00b478;            background: rgba(0,180,120,0.14);  }

/* ── Status dot ──────────────────────────────────────── */
.status-online {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qckr-online);
  box-shadow: 0 0 12px rgba(0,245,180,0.8);
  flex-shrink: 0;
}

/* ── Hover lift ──────────────────────────────────────── */
.hover-lift { transition: transform var(--transition-fast), box-shadow var(--transition-normal); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ── Cyber outline ───────────────────────────────────── */
.cyber-outline { position: relative; }
.cyber-outline::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(125,0,255,0.8), rgba(0,217,255,0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Animations ──────────────────────────────────────── */
@keyframes qckrFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes qckrPulse {
  0%   { box-shadow: 0 0 0 0   rgba(125,0,255,0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(125,0,255,0);  }
  100% { box-shadow: 0 0 0 0   rgba(125,0,255,0);   }
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%       { transform: translateY(-30px) scale(1.04); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-in { animation: qckrFade 280ms ease both; }
.pulse   { animation: qckrPulse 2s infinite;    }