*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f13;--surface:#1a1a24;--surface2:#22222f;--border:#2e2e3e;--text:#e8e8f0;--text-muted:#889;--accent:#e94560;--accent-hover:#f57;--green:#4caf7d;--font:"Inter", system-ui, sans-serif}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh}.app{max-width:680px;margin:0 auto;padding:24px 16px 64px}.app-header{text-align:center;margin-bottom:32px}.app-header h1{letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-size:1.5rem}.app-main{flex-direction:column;gap:32px;display:flex}.timer{background:var(--surface);text-align:center;border:1px solid var(--border);border-radius:16px;padding:32px 24px}.timer__task-name{color:var(--text-muted);min-height:1.5em;margin-bottom:8px;font-size:1rem}.timer__clock{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--text);margin:8px 0 16px;font-size:5rem;font-weight:700}.timer__clock--running{color:var(--accent)}.timer__clock--break{color:var(--green)}.timer__meta{color:var(--text-muted);justify-content:center;gap:16px;margin-bottom:20px;font-size:.85rem;display:flex}.timer__status--running{color:var(--accent)}.timer__status--break{color:var(--green)}.timer__controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 18px;font-size:.9rem;font-weight:500;transition:background .15s,opacity .15s;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-muted)}.btn-active{background:var(--green);color:#fff}.btn-danger{color:#e05555;background:0 0;border:1px solid #0000;padding:8px 12px}.btn-danger:hover:not(:disabled){background:#e055551a;border-color:#e05555}.task-list{flex-direction:column;gap:12px;display:flex}.task-list__header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.task-list__header h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:1rem}.task-list__empty{color:var(--text-muted);text-align:center;padding:32px 0;font-size:.9rem}.task-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:16px;transition:border-color .15s;display:flex}.task-card--active{border-color:var(--accent)}.task-card--done{opacity:.55}.task-card__info{flex:1;min-width:0}.task-card__title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-weight:600;overflow:hidden}.task-card__desc{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:.8rem;overflow:hidden}.task-card__meta{align-items:center;gap:10px;font-size:.8rem;display:flex}.task-card__progress{color:var(--text-muted)}.task-card__badge{text-transform:capitalize;border-radius:99px;padding:2px 8px;font-size:.75rem;font-weight:500}.task-card__badge--pending{color:var(--text-muted);background:#e8e8f01a}.task-card__badge--done{color:var(--green);background:#4caf7d26}.task-card__actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:440px;padding:32px 28px}.modal h2{margin-bottom:8px;font-size:1.2rem}.modal p{color:var(--text-muted);margin-bottom:24px;font-size:.95rem}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.task-form{flex-direction:column;gap:16px;display:flex}.task-form label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:.85rem;font-weight:500;display:flex}.task-form input,.task-form textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);resize:vertical;border-radius:8px;outline:none;padding:10px 12px;font-size:.95rem;transition:border-color .15s}.task-form input:focus,.task-form textarea:focus{border-color:var(--accent)}.form-row{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}