body{margin:0}#root{max-width:100%;min-height:100svh;margin:0 auto}:root{--bg:#fef9ff;--card:#fff5f9;--text:#5a4a6a;--text-light:#8a7a9a;--border:#f0dff5}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background:linear-gradient(135deg,#fce4ec 0%,#e8eaf6 50%,#e0f7fa 100%);min-height:100vh;font-family:Nunito,sans-serif;overflow-x:hidden}.app{text-align:center;max-width:600px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;position:relative}.stars{pointer-events:none;z-index:0;position:fixed;inset:0}.star{color:#d4a5e8;opacity:.3;font-weight:700;animation:3s ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.title{-webkit-text-fill-color:transparent;z-index:1;background:linear-gradient(90deg,#ff6b6b,#ffa94d,#ffd43b,#69db7c,#74c0fc,#9775fa,#da77f2);-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-family:Fredoka One,cursive;font-size:2.5rem;position:relative}.subtitle{color:var(--text-light);z-index:1;margin-bottom:2rem;font-size:1rem;position:relative}.button-area{z-index:1;margin:2rem 0;position:relative}.rainbow-button{cursor:pointer;color:#fff;text-shadow:0 2px 4px #00000026;border:none;border-radius:50%;outline:none;flex-direction:column;justify-content:center;align-items:center;width:220px;height:220px;margin:0 auto;font-family:Fredoka One,cursive;font-size:1.6rem;transition:transform .15s,box-shadow .15s,background-color .4s;display:flex;position:relative}.rainbow-button:hover{transform:translateY(-4px)scale(1.05)}.rainbow-button:active{transform:translateY(4px)scale(.95);box-shadow:0 2px,0 4px 10px #0000001a!important}.rainbow-button.bounce{animation:.3s bounceAnim}@keyframes bounceAnim{0%{transform:scale(1)}30%{transform:scale(.85)}60%{transform:scale(1.1)}to{transform:scale(1)}}.button-text{letter-spacing:2px;display:block}.stats-bar{z-index:1;justify-content:center;gap:2rem;margin:1.5rem 0;display:flex;position:relative}.stat{background:var(--card);border:2px solid var(--border);border-radius:16px;min-width:140px;padding:.75rem 1.5rem}.stat-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-light);margin-bottom:.25rem;font-size:.75rem;display:block}.stat-value{font-family:Fredoka One,cursive;font-size:1.5rem;transition:color .4s;display:block}.controls{z-index:1;justify-content:center;gap:.75rem;margin-bottom:1.5rem;display:flex;position:relative}.toggle-btn,.clear-btn{border:2px solid var(--border);cursor:pointer;border-radius:12px;padding:.6rem 1.2rem;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;transition:all .2s}.toggle-btn{background:var(--card);color:var(--text)}.toggle-btn:hover{background:#f0dff5}.clear-btn{color:#e57373;background:#fff0f0;border-color:#ffcdd2}.clear-btn:hover{background:#ffcdd2}.log-panel{background:var(--card);border:2px solid var(--border);z-index:1;border-radius:20px;padding:1.5rem;animation:.3s slideUp;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.log-panel h2{color:var(--text);margin-bottom:1rem;font-family:Fredoka One,cursive;font-size:1.3rem}.empty-log{color:var(--text-light);padding:1rem;font-style:italic}.log-table-wrapper{border-radius:12px;max-height:300px;overflow-y:auto}.log-table{border-collapse:collapse;width:100%;font-size:.9rem}.log-table th{text-align:left;text-transform:uppercase;letter-spacing:1px;color:var(--text-light);background:#f3e5f5;padding:.6rem .75rem;font-size:.7rem;font-weight:700;position:sticky;top:0}.log-table td{border-bottom:1px solid var(--border);padding:.5rem .75rem}.log-table tbody tr:hover{background:#fce4ec44}.color-chip{vertical-align:middle;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin-right:.5rem;display:inline-block;box-shadow:0 1px 3px #00000026}.log-table-wrapper::-webkit-scrollbar{width:6px}.log-table-wrapper::-webkit-scrollbar-track{background:0 0}.log-table-wrapper::-webkit-scrollbar-thumb{background:#d4a5e8;border-radius:3px}