/* ======================================================================
   DESIGN SYSTEM 2026 — Glassmorphic
   Color Palette : Deep Indigo #1A1A2E + Vibrant Cyan + Slate grays
   Typography    : Inter (Dynamic Type)
   Style         : Glassmorphism + Bento Grid + Skeuomorphic depth
   ====================================================================== */

/* ── Design Tokens ── */
:root {
  /* Core palette */
  --ds-bg-base        : #0e0e1a;
  --ds-bg-deep        : #1A1A2E;
  --ds-bg-mid         : #16213E;
  --ds-bg-surface     : #0F3460;

  /* Accent spectrum */
  --ds-cyan           : #00D4FF;
  --ds-cyan-glow      : rgba(0,212,255,0.35);
  --ds-cyan-dim       : rgba(0,212,255,0.12);
  --ds-violet         : #7C3AED;
  --ds-violet-dim     : rgba(124,58,237,0.18);
  --ds-indigo         : #4F46E5;
  --ds-pink           : #EC4899;
  --ds-emerald        : #10B981;
  --ds-amber          : #F59E0B;

  /* Glass surfaces */
  --ds-glass-1        : rgba(255,255,255,0.05);
  --ds-glass-2        : rgba(255,255,255,0.09);
  --ds-glass-3        : rgba(255,255,255,0.14);
  --ds-glass-border   : rgba(255,255,255,0.12);
  --ds-glass-border-hi: rgba(0,212,255,0.30);

  /* Text scale */
  --ds-text-primary   : #F0F4FF;
  --ds-text-secondary : #94A3B8;
  --ds-text-muted     : #475569;
  --ds-text-accent    : #00D4FF;

  /* Radius */
  --ds-r-xs  : 8px;
  --ds-r-sm  : 12px;
  --ds-r-md  : 16px;
  --ds-r-lg  : 24px;
  --ds-r-xl  : 32px;
  --ds-r-full: 9999px;

  /* Spacing (8-pt grid) */
  --ds-sp-1  : 4px;
  --ds-sp-2  : 8px;
  --ds-sp-3  : 12px;
  --ds-sp-4  : 16px;
  --ds-sp-5  : 20px;
  --ds-sp-6  : 24px;
  --ds-sp-8  : 32px;
  --ds-sp-10 : 40px;
  --ds-sp-12 : 48px;

  /* Typography – Dynamic Type */
  --ds-font   : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-t-xs   : clamp(10px, 1.8vw, 11px);
  --ds-t-sm   : clamp(12px, 2vw, 13px);
  --ds-t-base : clamp(13px, 2.2vw, 15px);
  --ds-t-md   : clamp(15px, 2.6vw, 17px);
  --ds-t-lg   : clamp(18px, 3vw, 22px);
  --ds-t-xl   : clamp(24px, 4vw, 32px);
  --ds-t-2xl  : clamp(32px, 6vw, 48px);

  /* Shadows – Skeuomorphic depth */
  --ds-shadow-sm  : 0 2px 8px rgba(0,0,0,.35);
  --ds-shadow-md  : 0 8px 32px rgba(0,0,0,.45),
                    inset 0 1px 0 rgba(255,255,255,.08);
  --ds-shadow-lg  : 0 20px 60px rgba(0,0,0,.55),
                    inset 0 1px 0 rgba(255,255,255,.10);
  --ds-shadow-glow: 0 0 32px var(--ds-cyan-glow),
                    0 8px 24px rgba(0,0,0,.4);
  --ds-shadow-btn : 0 4px 16px rgba(0,0,0,.4),
                    inset 0 1px 0 rgba(255,255,255,.15),
                    inset 0 -1px 0 rgba(0,0,0,.2);

  /* Blur */
  --ds-blur-sm : blur(8px);
  --ds-blur-md : blur(16px);
  --ds-blur-lg : blur(28px);

  /* Transitions */
  --ds-ease : cubic-bezier(0.4, 0, 0.2, 1);
  --ds-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-fast  : 150ms;
  --ds-dur-base  : 250ms;
  --ds-dur-slow  : 400ms;
}

/* ── Light mode overrides ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ds-bg-base        : #EEF2FF;
    --ds-bg-deep        : #E0E7FF;
    --ds-bg-mid         : #C7D2FE;
    --ds-glass-1        : rgba(255,255,255,0.60);
    --ds-glass-2        : rgba(255,255,255,0.75);
    --ds-glass-3        : rgba(255,255,255,0.90);
    --ds-glass-border   : rgba(99,102,241,0.20);
    --ds-glass-border-hi: rgba(0,150,199,0.40);
    --ds-text-primary   : #0F172A;
    --ds-text-secondary : #475569;
    --ds-text-muted     : #94A3B8;
    --ds-shadow-sm  : 0 2px 8px rgba(15,23,42,.10);
    --ds-shadow-md  : 0 8px 32px rgba(15,23,42,.12),
                      inset 0 1px 0 rgba(255,255,255,.8);
    --ds-shadow-lg  : 0 20px 60px rgba(15,23,42,.15),
                      inset 0 1px 0 rgba(255,255,255,.9);
  }
}

[data-theme="light"] {
  --ds-bg-base        : #EEF2FF;
  --ds-bg-deep        : #E0E7FF;
  --ds-bg-mid         : #C7D2FE;
  --ds-glass-1        : rgba(255,255,255,0.60);
  --ds-glass-2        : rgba(255,255,255,0.75);
  --ds-glass-3        : rgba(255,255,255,0.90);
  --ds-glass-border   : rgba(99,102,241,0.20);
  --ds-glass-border-hi: rgba(0,150,199,0.40);
  --ds-text-primary   : #0F172A;
  --ds-text-secondary : #475569;
  --ds-text-muted     : #94A3B8;
  --ds-shadow-sm  : 0 2px 8px rgba(15,23,42,.10);
  --ds-shadow-md  : 0 8px 32px rgba(15,23,42,.12),
                    inset 0 1px 0 rgba(255,255,255,.8);
  --ds-shadow-lg  : 0 20px 60px rgba(15,23,42,.15),
                    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ds-font);
  background:var(--ds-bg-base);
  color:var(--ds-text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ── Mesh Gradient Background ── */
.ds-mesh-bg {
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background: var(--ds-bg-base);
}
.ds-mesh-bg::before {
  content:'';
  position:absolute;inset:-50%;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(0,212,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(124,58,237,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(79,70,229,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(16,185,129,0.10) 0%, transparent 50%);
  animation: ds-mesh-drift 20s ease-in-out infinite alternate;
  will-change:transform;
}
.ds-mesh-bg::after {
  content:'';
  position:absolute;inset:-50%;
  background:
    radial-gradient(ellipse 50% 60% at 70% 10%, rgba(236,72,153,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 30% 90%, rgba(0,212,255,0.12) 0%, transparent 55%);
  animation: ds-mesh-drift2 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes ds-mesh-drift {
  0%  { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(3%,2%) rotate(3deg); }
  100%{ transform: translate(-2%,4%) rotate(-2deg); }
}
@keyframes ds-mesh-drift2 {
  0%  { transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(-4%,-3%) rotate(4deg); }
}
[data-theme="light"] .ds-mesh-bg::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(0,150,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(99,102,241,0.08) 0%, transparent 60%);
}

/* ── Glass Card ── */
.ds-card {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-r-lg);
  backdrop-filter: var(--ds-blur-md);
  -webkit-backdrop-filter: var(--ds-blur-md);
  box-shadow: var(--ds-shadow-md);
  transition: transform var(--ds-dur-base) var(--ds-ease),
              box-shadow var(--ds-dur-base) var(--ds-ease),
              border-color var(--ds-dur-base) var(--ds-ease);
  position: relative;
  overflow: hidden;
}
.ds-card::before {
  /* Inner top-edge highlight for skeuomorphic depth */
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0;
}
.ds-card:hover {
  transform: translateY(-3px);
  border-color: var(--ds-glass-border-hi);
  box-shadow: var(--ds-shadow-glow);
}
.ds-card:active { transform: translateY(-1px); }

/* Card entry animation */
.ds-card-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
}
.ds-card-enter.ds-animate-in {
  animation: ds-card-in var(--ds-dur-slow) var(--ds-spring) forwards;
}
@keyframes ds-card-in {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Staggered entry delays */
.ds-card-enter:nth-child(1)  { animation-delay: 0ms; }
.ds-card-enter:nth-child(2)  { animation-delay: 60ms; }
.ds-card-enter:nth-child(3)  { animation-delay: 120ms; }
.ds-card-enter:nth-child(4)  { animation-delay: 180ms; }
.ds-card-enter:nth-child(5)  { animation-delay: 240ms; }
.ds-card-enter:nth-child(6)  { animation-delay: 300ms; }
.ds-card-enter:nth-child(7)  { animation-delay: 360ms; }
.ds-card-enter:nth-child(8)  { animation-delay: 420ms; }

/* ── Bento Grid ── */
.ds-bento {
  display: grid;
  gap: var(--ds-sp-4);
  grid-template-columns: repeat(2, 1fr);
}
.ds-bento-span2 { grid-column: span 2; }
.ds-bento-tall  { grid-row: span 2; }

@media (max-width: 480px) {
  .ds-bento { grid-template-columns: 1fr; gap: var(--ds-sp-3); }
  .ds-bento-span2 { grid-column: span 1; }
}

/* ── Gradient Button (Haptic-ready) ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  min-height: 48px;   /* Material 3 / HIG 48dp touch target */
  padding: 12px 24px;
  border-radius: var(--ds-r-sm);
  border: none;
  font-family: var(--ds-font);
  font-size: var(--ds-t-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ds-dur-fast) var(--ds-ease);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ds-btn::after {
  content:'';
  position:absolute;inset:0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity:0;
  transition: opacity var(--ds-dur-fast);
}
.ds-btn:active::after { opacity:1; }
.ds-btn:active { transform:scale(0.97); }

/* Primary – gradient fill */
.ds-btn-primary {
  background: linear-gradient(135deg, var(--ds-indigo), var(--ds-violet));
  color: #fff;
  box-shadow: var(--ds-shadow-btn);
}
.ds-btn-primary:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 24px rgba(124,58,237,.45),
              inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}

/* Cyan accent button */
.ds-btn-cyan {
  background: linear-gradient(135deg, #0891b2, var(--ds-cyan));
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,212,255,.35),
              inset 0 1px 0 rgba(255,255,255,.18);
}
.ds-btn-cyan:hover {
  box-shadow: 0 6px 28px rgba(0,212,255,.50),
              inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}

/* Ghost / Glass button */
.ds-btn-ghost {
  background: var(--ds-glass-1);
  backdrop-filter: var(--ds-blur-sm);
  -webkit-backdrop-filter: var(--ds-blur-sm);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow-sm);
}
.ds-btn-ghost:hover {
  background: var(--ds-glass-2);
  border-color: var(--ds-glass-border-hi);
}

/* Full-width variant */
.ds-btn-full { width:100%; }

/* Pill */
.ds-btn-pill { border-radius: var(--ds-r-full); }

/* ── Floating Label Input ── */
.ds-field {
  position: relative;
  margin-bottom: var(--ds-sp-5);
}
.ds-field input,
.ds-field select,
.ds-field textarea {
  width: 100%;
  min-height: 56px;              /* 48dp+ touch target incl. padding */
  padding: 22px 16px 8px;
  background: var(--ds-glass-1);
  backdrop-filter: var(--ds-blur-sm);
  -webkit-backdrop-filter: var(--ds-blur-sm);
  border: 1.5px solid var(--ds-glass-border);
  border-radius: var(--ds-r-sm);
  color: var(--ds-text-primary);
  font-family: var(--ds-font);
  font-size: var(--ds-t-base);
  transition: all var(--ds-dur-base) var(--ds-ease);
  -webkit-appearance: none;
  appearance: none;
}
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus {
  outline: none;
  border-color: var(--ds-cyan);
  background: var(--ds-glass-2);
  box-shadow: 0 0 0 3px var(--ds-cyan-dim),
              inset 0 1px 0 rgba(255,255,255,.08);
}
.ds-field input::placeholder,
.ds-field textarea::placeholder { color: transparent; }

/* Floating label */
.ds-field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ds-t-base);
  color: var(--ds-text-secondary);
  pointer-events: none;
  transition: all var(--ds-dur-base) var(--ds-ease);
  background: transparent;
  padding: 0 2px;
}
/* Float label up when focused or filled */
.ds-field input:focus ~ label,
.ds-field input:not(:placeholder-shown) ~ label,
.ds-field select:focus ~ label,
.ds-field select:valid ~ label,
.ds-field textarea:focus ~ label,
.ds-field textarea:not(:placeholder-shown) ~ label {
  top: 12px;
  transform: none;
  font-size: var(--ds-t-xs);
  font-weight: 600;
  color: var(--ds-cyan);
  letter-spacing: 0.3px;
}
/* For select: always float */
.ds-field select { padding-top: 22px; }
.ds-field select label { top: 12px; transform: none; font-size:var(--ds-t-xs); }

/* ── Icon Badge ── */
.ds-icon-badge {
  width: 48px; height: 48px;
  border-radius: var(--ds-r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 19px;
  color: #fff;
  box-shadow: var(--ds-shadow-sm);
}
.ds-icon-badge-lg {
  width: 56px; height: 56px;
  border-radius: var(--ds-r-md);
  font-size: 22px;
}

/* Gradient presets for badges */
.ds-grad-blue   { background: linear-gradient(135deg, #3B82F6, #6366F1); }
.ds-grad-green  { background: linear-gradient(135deg, #10B981, #059669); }
.ds-grad-amber  { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.ds-grad-violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
.ds-grad-cyan   { background: linear-gradient(135deg, #0891B2, #00D4FF); }
.ds-grad-slate  { background: linear-gradient(135deg, #64748B, #374151); }
.ds-grad-indigo { background: linear-gradient(135deg, #4338CA, #7C3AED); }
.ds-grad-rose   { background: linear-gradient(135deg, #F43F5E, #EC4899); }

/* ── Chip / Pill ── */
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-r-full);
  padding: 5px 12px;
  font-size: var(--ds-t-xs);
  font-weight: 600;
  color: var(--ds-text-secondary);
  backdrop-filter: var(--ds-blur-sm);
}
.ds-chip-cyan {
  background: var(--ds-cyan-dim);
  border-color: rgba(0,212,255,.25);
  color: var(--ds-cyan);
}
.ds-chip-violet {
  background: var(--ds-violet-dim);
  border-color: rgba(124,58,237,.25);
  color: #A78BFA;
}

/* ── Progress Bar ── */
.ds-progress-track {
  height: 6px;
  background: var(--ds-glass-1);
  border-radius: var(--ds-r-full);
  overflow: hidden;
}
.ds-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-indigo), var(--ds-cyan));
  border-radius: var(--ds-r-full);
  transition: width 0.8s var(--ds-ease);
  box-shadow: 0 0 8px var(--ds-cyan-glow);
}

/* ── Section Label ── */
.ds-section-label {
  font-size: var(--ds-t-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-sp-3);
}

/* ── Divider ── */
.ds-divider {
  height: 1px;
  background: var(--ds-glass-border);
  margin: var(--ds-sp-5) 0;
}

/* ── Flash / Alert ── */
.ds-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--ds-r-sm);
  font-size: var(--ds-t-sm);
  font-weight: 500;
  border: 1px solid;
  backdrop-filter: var(--ds-blur-sm);
  animation: ds-card-in 0.3s var(--ds-ease) forwards;
}
.ds-flash.success { background:rgba(16,185,129,.12); color:#4ade80; border-color:rgba(16,185,129,.3); }
.ds-flash.error   { background:rgba(239,68,68,.12);  color:#f87171; border-color:rgba(239,68,68,.3); }
.ds-flash.warning { background:rgba(245,158,11,.12); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.ds-flash.info    { background:rgba(99,102,241,.12); color:#a5b4fc; border-color:rgba(99,102,241,.3); }

/* ── Topbar / Nav ── */
.ds-topbar {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--ds-sp-5);
  position: sticky; top:0; z-index:100;
  background: rgba(14,14,26,0.75);
  backdrop-filter: var(--ds-blur-lg);
  -webkit-backdrop-filter: var(--ds-blur-lg);
  border-bottom: 1px solid var(--ds-glass-border);
}
[data-theme="light"] .ds-topbar {
  background: rgba(224,231,255,0.80);
}
.ds-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.ds-brand-dot {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: var(--ds-r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  box-shadow: 0 0 12px rgba(124,58,237,.4);
}
.ds-topbar-title {
  font-size: var(--ds-t-sm);
  font-weight: 700;
  color: var(--ds-text-primary);
}

/* ── Icon Button ── */
.ds-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass-1);
  color: var(--ds-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--ds-dur-fast) var(--ds-ease);
  -webkit-tap-highlight-color: transparent;
}
.ds-icon-btn:hover {
  background: var(--ds-glass-2);
  border-color: var(--ds-glass-border-hi);
  color: var(--ds-text-primary);
}

/* ── Avatar Btn ── */
.ds-avatar-btn {
  width: 36px; height: 36px;
  border-radius: var(--ds-r-full);
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border: 2px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ds-avatar-btn:hover { box-shadow: 0 0 0 3px var(--ds-cyan-dim); }

/* ── Modal ── */
.ds-modal-overlay {
  display: none; position:fixed; inset:0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: var(--ds-blur-md);
  -webkit-backdrop-filter: var(--ds-blur-md);
  z-index: 200;
  align-items: center; justify-content: center;
  padding: var(--ds-sp-4);
}
.ds-modal-overlay.active { display:flex; }
.ds-modal {
  background: var(--ds-bg-mid);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-r-xl);
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y:auto;
  box-shadow: var(--ds-shadow-lg);
  animation: ds-modal-in 0.25s var(--ds-spring) forwards;
}
@keyframes ds-modal-in {
  from { opacity:0; transform:scale(.93) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.ds-modal-hdr {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ds-glass-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ds-modal-hdr h3 {
  font-size: var(--ds-t-md); font-weight: 700;
  color: var(--ds-text-primary);
  display: flex; align-items: center; gap: 8px;
}
.ds-modal-hdr h3 i { color: var(--ds-cyan); }
.ds-modal-close {
  width:32px;height:32px;border-radius:var(--ds-r-xs);
  border:1px solid var(--ds-glass-border);
  background:var(--ds-glass-1); color:var(--ds-text-secondary);
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ds-modal-close:hover { background:var(--ds-glass-2); color:var(--ds-text-primary); }
.ds-modal-bdy { padding: 20px 24px; }
.ds-modal-ftr {
  padding: 16px 24px;
  border-top: 1px solid var(--ds-glass-border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ── Form message ── */
.ds-form-msg {
  padding: 10px 14px;
  border-radius: var(--ds-r-xs);
  font-size: var(--ds-t-sm);
  margin-bottom: var(--ds-sp-4);
  display: none;
}
.ds-form-msg.success { display:block; background:rgba(16,185,129,.12); color:#4ade80; }
.ds-form-msg.error   { display:block; background:rgba(239,68,68,.12);  color:#f87171; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-glass-border); border-radius: 4px; }

/* ── Utility ── */
.ds-sr-only {
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.ds-flex    { display:flex; align-items:center; }
.ds-gap-2   { gap: var(--ds-sp-2); }
.ds-gap-3   { gap: var(--ds-sp-3); }
.ds-gap-4   { gap: var(--ds-sp-4); }
.ds-mt-4    { margin-top: var(--ds-sp-4); }
.ds-mt-6    { margin-top: var(--ds-sp-6); }
.ds-mb-4    { margin-bottom: var(--ds-sp-4); }
.ds-mb-6    { margin-bottom: var(--ds-sp-6); }
.ds-text-sm { font-size: var(--ds-t-sm); }
.ds-text-xs { font-size: var(--ds-t-xs); }
.ds-muted   { color: var(--ds-text-secondary); }
.ds-accent  { color: var(--ds-cyan); }

/* ── Cookie Banner ── */
.ds-cookie-banner {
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background: rgba(14,14,26,0.92);
  backdrop-filter: var(--ds-blur-lg);
  -webkit-backdrop-filter: var(--ds-blur-lg);
  border-top: 1px solid var(--ds-glass-border);
  padding: 14px 20px;
  color: var(--ds-text-secondary);
  font-size: var(--ds-t-sm);
  display: flex; align-items:center; justify-content:center;
  gap: 16px; flex-wrap:wrap;
  box-shadow: 0 -8px 32px rgba(0,0,0,.3);
}
.ds-cookie-banner.hidden { display:none !important; }

/* ── Page shell ── */
.ds-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.ds-page-body {
  padding: var(--ds-sp-5) var(--ds-sp-5) var(--ds-sp-12);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 540px) {
  .ds-page-body { padding: var(--ds-sp-4) var(--ds-sp-4) var(--ds-sp-10); }
}

/* ── Footer ── */
.ds-footer {
  padding: var(--ds-sp-4) var(--ds-sp-5);
  border-top: 1px solid var(--ds-glass-border);
  text-align: center;
  background: rgba(14,14,26,0.5);
}
.ds-footer-links {
  display: flex; justify-content: center; gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-2); flex-wrap: wrap;
}
.ds-footer-links a {
  font-size: var(--ds-t-sm);
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: color var(--ds-dur-fast);
}
.ds-footer-links a:hover { color: var(--ds-cyan); }
.ds-footer-links a.danger:hover { color: #f87171; }
.ds-footer-copy { font-size: var(--ds-t-xs); color: var(--ds-text-muted); }

/* ── Glow Pulse (for avatar / AI speaking indicator) ── */
@keyframes ds-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--ds-cyan-glow); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}
.ds-glow-pulse { animation: ds-glow-pulse 2s ease-in-out infinite; }

/* ── Skeleton / Loading ── */
@keyframes ds-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ds-skeleton {
  background: linear-gradient(90deg,
    var(--ds-glass-1) 25%,
    var(--ds-glass-2) 50%,
    var(--ds-glass-1) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.6s linear infinite;
  border-radius: var(--ds-r-xs);
}

/* ── Theme Toggle ── */
.ds-theme-toggle {
  width: 40px; height: 40px;
  border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-glass-border);
  background: var(--ds-glass-1);
  color: var(--ds-text-secondary);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  font-size: 15px;
  transition: all var(--ds-dur-fast) var(--ds-ease);
}
.ds-theme-toggle:hover {
  background: var(--ds-glass-2);
  color: var(--ds-cyan);
  border-color: var(--ds-glass-border-hi);
}