*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f13;--surface:#1a1a24;--border:#2a2a3a;--accent:#6366f1;--text:#e2e2f0;--muted:#888;--radius:14px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:system-ui,-apple-system,sans-serif}.auth-screen{justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:380px;padding:2.5rem 2rem}.logo{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.4rem;font-size:1.7rem;font-weight:700}.auth-sub{color:var(--muted);margin-bottom:1.5rem;font-size:.9rem}.auth-tabs{gap:.5rem;margin-bottom:1.25rem;display:flex}.tab{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;flex:1;padding:.5rem;font-size:.9rem;transition:all .15s}.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.auth-box form{flex-direction:column;gap:.7rem;display:flex}.auth-box input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:9px;outline:none;padding:.65rem .85rem;font-size:.95rem;transition:border-color .15s}.auth-box input:focus{border-color:var(--accent)}.auth-error{color:#f87171;font-size:.85rem}.auth-box button[type=submit]{border-radius:9px;margin-top:.3rem;padding:.7rem;font-size:.95rem}#app{padding:2rem}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2.5rem;display:flex}header h1{background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:700}header p{color:var(--muted);margin-top:.3rem;font-size:.9rem}.user-badge{background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;gap:.8rem;padding:.4rem .4rem .4rem 1rem;display:flex}.user-email{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:.85rem;overflow:hidden}.logout-btn{background:var(--border);color:var(--text);cursor:pointer;border:none;border-radius:999px;padding:.35rem .9rem;font-size:.82rem;transition:background .15s}.logout-btn:hover{color:#fff;background:#f87171}.card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin-bottom:1.25rem;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.card.wide{text-align:center}.card h2{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.2rem;font-size:.85rem;font-weight:600}.count{text-align:center;margin-bottom:1rem;font-size:4rem;font-weight:700;transition:color .2s}.btn-row{justify-content:center;gap:.5rem;display:flex}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:1rem;transition:opacity .15s}button:hover{opacity:.85}button:disabled{opacity:.5;cursor:default}.sliders{flex-direction:column;gap:.6rem;margin-bottom:1rem;display:flex}.sliders label{color:var(--muted);align-items:center;gap:.6rem;font-size:.85rem;display:flex}.sliders input[type=range]{accent-color:var(--accent);flex:1}.color-preview{border-radius:8px;height:60px;margin-bottom:.5rem;transition:background .1s}.hex-label{text-align:center;color:var(--muted);font-family:monospace;font-size:1.1rem}form{gap:.4rem;margin-bottom:.8rem;display:flex}form input[type=text]{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;flex:1;padding:.45rem .7rem;font-size:.95rem}form input[type=text]:focus{border-color:var(--accent)}form button{padding:.45rem .9rem;font-size:.9rem}ul{flex-direction:column;gap:.4rem;list-style:none;display:flex}li{background:var(--bg);cursor:pointer;border-radius:7px;align-items:center;gap:.6rem;padding:.4rem .6rem;font-size:.9rem;display:flex}li.done{opacity:.4;text-decoration:line-through}li:before{content:"";border:2px solid var(--accent);border-radius:4px;flex-shrink:0;width:14px;height:14px}li.done:before{background:var(--accent)}.clock{letter-spacing:.05em;font-variant-numeric:tabular-nums;color:var(--accent);margin-top:.5rem;font-size:3.5rem;font-weight:300}