/* ═══ THEMES ═══ */
/* Liquid Glass with slider-based dark↔light blend */

/* Theme slider */
.theme-slider-wrap{display:flex;align-items:center;gap:6px;padding:0 16px 6px}
.theme-slider-wrap .ic{width:14px;height:14px;opacity:.4}
.theme-slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,#1a1a2e,#e8e8f0);outline:none;cursor:pointer}
.theme-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.25);border:2px solid rgba(0,0,0,.08)}
.theme-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.25);border:2px solid rgba(0,0,0,.08);cursor:pointer}

[data-theme="dark"] {
  --bg: #08080c;
  --bg-gradient: radial-gradient(ellipse 800px 600px at 20% 40%, rgba(100,140,255,.06), transparent),
                 radial-gradient(ellipse 600px 500px at 80% 20%, rgba(180,130,255,.04), transparent),
                 radial-gradient(ellipse 500px 400px at 50% 90%, rgba(80,220,180,.03), transparent);
  --glass-bg: rgba(255,255,255,.03);
  --glass-bg2: rgba(255,255,255,.06);
  --glass-bg3: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.08);
  --glass-border-hi: rgba(255,255,255,.15);
  --glass-shine: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 40%);
  --glass-shadow: 0 4px 24px rgba(0,0,0,.2);
  --blur: 50px;
  --text: #e8e8f0;
  --text2: rgba(255,255,255,.5);
  --text3: rgba(255,255,255,.2);
  --accent: #5b9aff;
  --accent-bg: rgba(91,154,255,.12);
  --accent-border: rgba(91,154,255,.18);
  --green: #4ade80;
  --red: #f87171;
  --orange: #fbbf24;
  --purple: #c084fc;
  --msg-out-bg: rgba(91,154,255,.10);
  --msg-out-border: rgba(91,154,255,.12);
  --msg-in-bg: rgba(255,255,255,.03);
  --msg-in-border: rgba(255,255,255,.06);
  --wp-in-bg: rgba(30,30,40,.95);
  --wp-in-border: rgba(255,255,255,.15);
  --wp-out-bg: rgba(45,90,200,.95);
  --wp-out-border: rgba(91,154,255,.35);
  --input-bg: rgba(255,255,255,.04);
  --overlay: rgba(0,0,0,.3);
  --sheet-bg: rgba(14,14,20,.75);
}

[data-theme="light"] {
  --bg: #f0f0f5;
  --bg-gradient: radial-gradient(ellipse 800px 600px at 20% 40%, rgba(100,140,255,.08), transparent),
                 radial-gradient(ellipse 600px 500px at 80% 20%, rgba(200,160,255,.06), transparent),
                 radial-gradient(ellipse 500px 400px at 50% 90%, rgba(80,220,180,.05), transparent);
  --glass-bg: rgba(255,255,255,.45);
  --glass-bg2: rgba(255,255,255,.60);
  --glass-bg3: rgba(255,255,255,.75);
  --glass-border: rgba(255,255,255,.50);
  --glass-border-hi: rgba(255,255,255,.70);
  --glass-shine: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 40%);
  --glass-shadow: 0 4px 24px rgba(0,0,0,.06);
  --blur: 50px;
  --text: #1a1a2e;
  --text2: rgba(0,0,0,.45);
  --text3: rgba(0,0,0,.18);
  --accent: #3478f6;
  --accent-bg: rgba(52,120,246,.08);
  --accent-border: rgba(52,120,246,.15);
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f59e0b;
  --purple: #a855f7;
  --msg-out-bg: rgba(52,120,246,.08);
  --msg-out-border: rgba(52,120,246,.10);
  --msg-in-bg: rgba(255,255,255,.50);
  --msg-in-border: rgba(255,255,255,.60);
  --wp-in-bg: rgba(245,245,250,.95);
  --wp-in-border: rgba(0,0,0,.1);
  --wp-out-bg: rgba(52,120,246,.95);
  --wp-out-border: rgba(52,120,246,.4);
  --input-bg: rgba(255,255,255,.50);
  --overlay: rgba(0,0,0,.15);
  --sheet-bg: rgba(240,240,245,.80);
}