:root{--font-sans:'Inter',-apple-system,sans-serif;--radius:14px;--transition:0.3s ease}
[data-theme="dark"]{--bg:#0A0E1A;--bg-card:rgba(16,22,40,0.9);--border:rgba(99,102,241,0.1);--text:#E0E4F0;--text2:#8090B0;--primary:#6366F1;--gradient:linear-gradient(135deg,#6366F1,#A78BFA)}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}
.app{max-width:700px;margin:0 auto}.header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.header h1{font-size:1rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.timer-badge{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text2)}
.btn{font-family:var(--font-sans);font-size:.78rem;padding:6px 12px;border-radius:6px;border:none;cursor:pointer;transition:all var(--transition)}
.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover{background:rgba(99,102,241,0.08)}
.btn-sm{font-size:.72rem;padding:4px 8px}
.main{padding:24px}
.sounds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.sound-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center;cursor:pointer;transition:all var(--transition);user-select:none}
.sound-card:hover{transform:translateY(-2px);border-color:var(--primary)}
.sound-card.active{border-color:var(--primary);box-shadow:0 0 20px rgba(99,102,241,0.15)}
.sound-icon{font-size:2rem;margin-bottom:8px;display:block}
.sound-name{font-size:.82rem;font-weight:600;margin-bottom:6px}
.sound-slider{width:100%;height:4px;accent-color:var(--primary);opacity:.6;transition:opacity .2s}
.sound-card.active .sound-slider{opacity:1}
@media(max-width:400px){.sounds-grid{grid-template-columns:repeat(2,1fr)}}