@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;
  --transition-fast:150ms cubic-bezier(.4,0,.2,1);
  --transition-base:250ms cubic-bezier(.4,0,.2,1);
  --transition-slow:400ms cubic-bezier(.4,0,.2,1);
  --transition-spring:500ms cubic-bezier(.175,.885,.32,1.275);
  --z-modal:200;--z-toast:300;
  --priority-high:#FF6B6B;--priority-medium:#FDCB6E;--priority-low:#00CEC9;
  --success:#00B894;--danger:#FF6B6B;--info:#74B9FF;
}

/* ===== DARK THEME ===== */
[data-theme="dark"]{
  --bg-body:#07071A;
  --bg-app:#0C0C24;
  --bg-card:rgba(18,18,50,.65);
  --bg-card-hover:rgba(24,24,60,.8);
  --bg-input:rgba(20,20,52,.8);
  --bg-input-focus:rgba(26,26,62,1);
  --bg-elevated:rgba(30,30,70,.7);
  --primary:#A29BFE;--primary-hover:#B8B3FF;--primary-glow:rgba(162,155,254,.22);
  --accent:#55EFC4;--accent-glow:rgba(85,239,196,.15);
  --text-1:#F0F0F8;--text-2:#9B9BB8;--text-3:#5E5E80;
  --border:rgba(255,255,255,.06);--border-hover:rgba(255,255,255,.12);
  --shadow-card:0 4px 24px rgba(0,0,0,.3);
  --orb-1:rgba(108,92,231,.12);--orb-2:rgba(85,239,196,.08);--orb-3:rgba(255,107,107,.06);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"]{
  --bg-body:#F0F2FF;
  --bg-app:#F6F7FF;
  --bg-card:rgba(255,255,255,.75);
  --bg-card-hover:rgba(255,255,255,.9);
  --bg-input:rgba(240,242,255,.9);
  --bg-input-focus:#fff;
  --bg-elevated:rgba(255,255,255,.85);
  --primary:#6C5CE7;--primary-hover:#5A4BD6;--primary-glow:rgba(108,92,231,.15);
  --accent:#00B894;--accent-glow:rgba(0,184,148,.12);
  --text-1:#1A1A2E;--text-2:#5A5A7A;--text-3:#9898B0;
  --border:rgba(0,0,0,.06);--border-hover:rgba(0,0,0,.1);
  --shadow-card:0 4px 24px rgba(0,0,0,.06);
  --orb-1:rgba(108,92,231,.08);--orb-2:rgba(85,239,196,.06);--orb-3:rgba(255,107,107,.04);
}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font);color:var(--text-1);background:var(--bg-body);
  min-height:100vh;line-height:1.6;transition:background .4s,color .25s;overflow-x:hidden;
  font-size:.9375rem;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-full);opacity:.4}
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
::selection{background:var(--primary-glow);color:var(--text-1)}

/* ===== BG DECORATION ===== */
.bg-decoration{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 12s ease-in-out infinite}
.bg-orb--1{width:400px;height:400px;background:var(--orb-1);top:-10%;left:-5%;animation-delay:0s}
.bg-orb--2{width:350px;height:350px;background:var(--orb-2);bottom:10%;right:-8%;animation-delay:-4s}
.bg-orb--3{width:300px;height:300px;background:var(--orb-3);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-8s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,30px) scale(.95)}
}

/* ===== APP CONTAINER ===== */
.app-container{position:relative;z-index:1;width:100%;max-width:640px;margin:0 auto;padding:1.5rem 1rem;min-height:100vh}
@media(min-width:768px){.app-container{padding:2rem 1.5rem}}

/* ===== GLASS CARD ===== */
.glass-card{
  background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);transition:all var(--transition-base);
}
.glass-card:hover{border-color:var(--border-hover)}