:root,[data-theme=dark]{--purple: #6C3FC5;--purple-dark: #2D1B69;--purple-light: #F3EEFF;--yellow: #FFD93D;--coral: #FF6B6B;--teal: #4ECDC4;--green: #51CF66;--bg-main: #1a1030;--bg-card: #251845;--bg-card-hover: #2f2055;--bg-input: #251845;--text: #f0e6ff;--text-dim: #a090c0;--text-bright: #ffffff;--border: rgba(108, 63, 197, .2);--border-active: rgba(108, 63, 197, .5);--shadow: 0 8px 32px rgba(0,0,0,.3);--overlay: rgba(0,0,0,.7);--font-display: "Fredoka", sans-serif;--font-body: "Quicksand", sans-serif;--radius: 16px;--radius-sm: 10px;--gradient-bg: radial-gradient(circle at 20% 20%, rgba(108,63,197,.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,107,107,.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(78,205,196,.05) 0%, transparent 70%);--logo-gradient: linear-gradient(135deg, var(--purple), var(--coral))}[data-theme=light]{--purple: #7C4DFF;--purple-dark: #5C35CC;--purple-light: #EDE7F6;--yellow: #FFC107;--coral: #FF5252;--teal: #26A69A;--green: #66BB6A;--bg-main: #F5F0FF;--bg-card: #FFFFFF;--bg-card-hover: #F8F4FF;--bg-input: #F0EAFF;--text: #37274A;--text-dim: #8B7DA0;--text-bright: #1A0D2E;--border: rgba(124,77,255,.15);--border-active: rgba(124,77,255,.4);--shadow: 0 4px 24px rgba(124,77,255,.1);--overlay: rgba(245,240,255,.85);--font-display: "Poppins", sans-serif;--font-body: "Nunito", sans-serif;--gradient-bg: radial-gradient(circle at 20% 20%, rgba(124,77,255,.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,82,82,.04) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(38,166,154,.03) 0%, transparent 70%);--logo-gradient: linear-gradient(135deg, #7C4DFF, #FF5252)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--bg-main);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .4s ease,color .4s ease}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:var(--gradient-bg);pointer-events:none;z-index:0;transition:background .4s ease}#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none;transition:all .2s ease}button:active{transform:scale(.96)}input,textarea,select{font-family:var(--font-body);outline:none}.logo-text{font-family:var(--font-display);background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.btn{padding:14px 32px;border-radius:var(--radius);font-size:16px;font-weight:700;font-family:var(--font-body);letter-spacing:.3px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .25s ease}.btn-primary{background:linear-gradient(135deg,var(--purple),#8B5CF6);color:#fff;box-shadow:0 4px 15px #6c3fc566}.btn-primary:hover{box-shadow:0 6px 25px #6c3fc599;transform:translateY(-2px)}.btn-accent{background:linear-gradient(135deg,var(--coral),#ff8787);color:#fff;box-shadow:0 4px 15px #ff6b6b66}.btn-accent:hover{box-shadow:0 6px 25px #ff6b6b99;transform:translateY(-2px)}.btn-secondary{background:var(--bg-card);color:var(--text);border:2px solid var(--border)}.btn-secondary:hover{border-color:var(--purple);background:var(--bg-card-hover)}.btn-ghost{background:transparent;color:var(--text-dim);padding:10px 20px}.btn-ghost:hover{color:var(--text)}.btn-sm{padding:8px 16px;font-size:14px;border-radius:var(--radius-sm)}.btn-lg{padding:18px 48px;font-size:20px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.input{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;font-size:16px;color:var(--text-bright);width:100%;transition:border-color .2s,background .4s}.input:focus{border-color:var(--purple)}.input::placeholder{color:var(--text-dim)}.card{background:var(--bg-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--border);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}.container{max-width:900px;margin:0 auto;padding:20px;width:100%}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;text-transform:uppercase;flex-shrink:0;font-family:var(--font-display)}.avatar-sm{width:36px;height:36px;font-size:14px}.avatar-lg{width:64px;height:64px;font-size:24px}.color-red{background:#ff6b6b}.color-blue{background:#4dabf7}.color-green{background:#51cf66}.color-yellow{background:#ffd93d}.color-purple{background:#9775fa}.color-orange{background:#ff922b}.color-pink{background:#f06595}.color-teal{background:#4ecdc4}.timer{font-family:var(--font-display);font-size:48px;color:var(--yellow);text-shadow:0 0 20px rgba(255,217,61,.3);font-weight:700}.timer.urgent{color:var(--coral);text-shadow:0 0 20px rgba(255,107,107,.5);animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#6c3fc54d;border-radius:3px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.animate-fadeIn{animation:fadeIn .5s ease forwards}.animate-slideUp{animation:slideUp .6s ease forwards}.animate-bounceIn{animation:bounceIn .5s ease forwards}.theme-toggle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:none;background:var(--bg-card);color:var(--text);box-shadow:0 2px 10px #00000026;transition:all .3s ease}.theme-toggle:hover{transform:scale(1.1) rotate(15deg)}.sound-toggle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border:none;background:var(--bg-card);color:var(--text);box-shadow:0 2px 10px #00000026;transition:all .3s ease}.sound-toggle:hover{transform:scale(1.1)}.stat-bar{height:10px;border-radius:5px;background:#00000026;overflow:hidden}.stat-bar-fill{height:100%;border-radius:5px;transition:width 1s ease-out}@media (max-width: 640px){.container{padding:12px}.card{padding:16px}.btn{padding:12px 24px;font-size:14px}.btn-lg{padding:14px 32px;font-size:16px}.timer{font-size:36px}}