:root {
  --so-bg: #0f0a1e;
  --so-bg2: #1a1145;
  --so-card: linear-gradient(135deg,#1e1035,#28204a);
  --so-card-border: rgba(139,92,246,.12);
  --so-border: rgba(139,92,246,.12);
  --so-text: #e8e4f0;
  --so-text2: #c4b8e0;
  --so-text3: rgba(255,255,255,.45);
  --so-accent: #7c3aed;
  --so-accent-light: rgba(124,58,237,.08);
  --so-accent-text: #c4b5fd;
  --so-accent-bg: rgba(124,58,237,.08);
  --so-accent2: #1d9e75;
  --so-accent2-light: rgba(29,158,117,.08);
  --so-accent2-text: #1d9e75;
  --so-green: #4ade80;
  --so-yellow: #fbbf24;
  --so-orange: #f97316;
  --so-red: #dc2626;
  --so-slider-track: rgba(139,92,246,.15);
  --so-slider-thumb: #7c3aed;
  --so-slider-thumb-border: #1e1035;
  --so-btn-bg: linear-gradient(135deg,#7c3aed,#6d28d9);
  --so-btn-text: #ffffff;
  --so-input-bg: rgba(15,10,30,.8);
  --so-input-border: rgba(255,255,255,.12);
}
@media(min-width:600px){body{display:flex;justify-content:center;min-height:100vh}#app{width:100%;max-width:480px;min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.3)}}
@media(min-width:900px){#app{max-width:520px}}
.theme-toggle,#themeBtn{position:fixed;bottom:80px;right:16px;top:auto;left:auto;z-index:998;width:48px;height:48px;border-radius:50%;background:rgba(30,16,53,.9);border:1px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:20px;color:#a78bfa;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.3)}