@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --rose:#E11D48;--green:#22C55E;--blue:#3B82F6;
  --bg:#FAF5F0;--surface:#FFFFFF;--surface2:#F5F0EB;
  --text:#2D2320;--text-dim:#8B7E74;--border:#E8DFD6;
  --radius:14px;--font:'Inter',system-ui,sans-serif;
}

html{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6}
body{min-height:100vh;display:flex;flex-direction:column}

.header{padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border)}
.header h1{font-size:1.05rem;font-weight:800;color:var(--rose)}
.header p{font-size:.72rem;color:var(--text-dim)}

.main{flex:1;max-width:720px;width:100%;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}

/* Timer */
.timer-section{display:flex;flex-direction:column;align-items:center;gap:1rem}
.timer-circle{position:relative;width:220px;height:220px}
.timer-circle svg{width:220px;height:220px;transform:rotate(-90deg)}
.timer-circle circle{fill:none;stroke-width:6;stroke-linecap:round}
.timer-circle .track{stroke:var(--border)}
.timer-circle .progress{stroke:var(--rose);transition:stroke-dashoffset .5s}
.timer-display{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-time{font-size:2.8rem;font-weight:800;font-variant-numeric:tabular-nums}
.timer-label{font-size:.72rem;color:var(--text-dim);font-weight:600;text-transform:uppercase}

.timer-modes{display:flex;gap:.3rem}
.mode-btn{padding:.35rem .7rem;border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-family:var(--font);transition:all .15s}
.mode-btn.active{background:var(--rose);color:#fff;border-color:var(--rose)}
.mode-btn[data-mode=break].active{background:var(--green);border-color:var(--green)}
.mode-btn[data-mode=long].active{background:var(--blue);border-color:var(--blue)}

.timer-controls{display:flex;gap:.5rem}
.ctrl-btn{padding:.45rem 1.2rem;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:all .15s}
.ctrl-btn.start{background:var(--rose);color:#fff}
.ctrl-btn.start:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(225,29,72,.25)}
.ctrl-btn.reset{background:transparent;border:1px solid var(--border);color:var(--text-dim)}

/* Project selector */
.project-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.project-select{padding:.4rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.82rem;font-family:var(--font);outline:none;min-width:150px}
.project-input{padding:.4rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.82rem;font-family:var(--font);outline:none}
.add-btn{padding:.4rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.82rem;font-family:var(--font);cursor:pointer}

/* Session notes */
.notes-input{width:100%;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.82rem;font-family:var(--font);outline:none;resize:none}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;text-align:center}
.stat-card .num{font-size:1.5rem;font-weight:800;color:var(--rose)}
.stat-card .label{font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}

/* Heatmap */
.heatmap-section h3{font-size:.78rem;font-weight:700;margin-bottom:.5rem}
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.heat-cell{aspect-ratio:1;border-radius:4px;background:var(--surface2);position:relative}
.heat-cell.level-1{background:rgba(225,29,72,.15)}
.heat-cell.level-2{background:rgba(225,29,72,.3)}
.heat-cell.level-3{background:rgba(225,29,72,.5)}
.heat-cell.level-4{background:rgba(225,29,72,.7)}
.heat-day{font-size:.55rem;color:var(--text-dim);text-align:center;font-weight:600}

/* Project list */
.project-list{display:flex;flex-direction:column;gap:.4rem}
.project-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;display:flex;justify-content:space-between;align-items:center}
.project-item .pname{font-weight:700;font-size:.82rem}
.project-item .ptime{font-size:.78rem;color:var(--text-dim)}
.progress-bar{height:4px;border-radius:2px;background:var(--surface2);margin-top:.3rem;overflow:hidden}
.progress-bar .fill{height:100%;border-radius:2px;background:var(--rose);transition:width .3s}

.toast{position:fixed;bottom:2rem;right:2rem;background:var(--surface);border:1px solid var(--rose);color:var(--rose);padding:.5rem 1rem;border-radius:var(--radius);font-size:.78rem;font-weight:500;z-index:200;transform:translateY(100px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}
@media(max-width:768px){.stats-row{grid-template-columns:1fr 1fr}.timer-circle{width:180px;height:180px}.timer-circle svg{width:180px;height:180px}.timer-time{font-size:2.2rem}}