:root{
  --bg: #f6f7f2;
  --surface: #ffffff;
  --surface-2: #eef1e9;
  --border: #dde2d5;
  --text: #1e281c;
  --muted: #6c7566;
  --primary: #2f5c2c;
  --primary-dim: #dce6d9;
  --primary-dark: #234321;
  --caution: #b9812c;
  --caution-dim: #f3e6d0;
  --danger: #b3452c;
  --danger-dim: #f5ded6;
  --radius: 16px;
  --radius-sm: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;}

h1,h2{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-0.01em;margin:0;}
h1{font-size:22px;}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;}

.muted{color:var(--muted);}
.small{font-size:12px;}
.hidden{display:none !important;}

.screen{min-height:100vh;}

/* Login */
#login-screen{display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;}
.login-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 20px rgba(30,40,28,.06);}
#login-form{display:flex;flex-direction:column;gap:12px;}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.brand h1{color:var(--text);}
.login-card input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;}
.error-text{color:var(--danger);font-size:13px;min-height:16px;margin:0;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-sm);padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .08s ease, opacity .15s ease, background .15s ease;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#ffffff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-danger{background:var(--danger);color:#ffffff;}
.btn-block{width:100%;}
.btn-lg{padding:16px;font-size:17px;}
.btn-sm{padding:7px 12px;font-size:13px;}
.icon-btn{background:transparent;border:none;color:var(--text);cursor:pointer;padding:8px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);}
.icon-btn:hover{background:var(--surface-2);}
[data-icon]{display:inline-flex;align-items:center;}
.icon{width:18px;height:18px;flex:none;display:block;}

/* Topbar / tabs */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;}
.topbar-title{font-family:'Space Grotesk',sans-serif;font-weight:600;}
.topbar-left{display:flex;align-items:center;gap:6px;}
.topbar-actions{display:flex;align-items:center;gap:2px;}
.conn-icon{display:inline-flex;color:var(--danger);}
.conn-icon.online{color:var(--primary);}
.conn-icon.syncing{color:var(--caution);}
.conn-icon.syncing .icon{animation:spin 1.1s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.tabbar{display:flex;gap:6px;padding:0 16px 10px;}
.tab-btn{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:10px;border-radius:var(--radius-sm);font-weight:600;font-size:14px;cursor:pointer;}
.tab-btn.active{background:var(--primary-dim);color:var(--primary-dark);border-color:var(--primary);}

.view{display:none;padding:4px 16px 100px;max-width:520px;margin:0 auto;}
.view.active{display:block;}

/* Ring */
.ring-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;align-items:center;margin-bottom:14px;box-shadow:0 4px 20px rgba(30,40,28,.06);}
.ring-wrap{position:relative;width:220px;height:220px;}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-worked{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:600;}
.warnings{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:14px;}
.warning-pill{background:var(--danger-dim);color:#8a3220;border:1px solid rgba(179,69,44,.3);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;display:flex;gap:8px;align-items:center;}
.warning-pill .icon{flex:none;}
.warning-pill.ok{background:var(--primary-dim);color:var(--primary-dark);border-color:rgba(47,92,44,.25);}

/* Timer card */
.timer-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;margin-bottom:14px;box-shadow:0 4px 20px rgba(30,40,28,.06);}
.current-activity{font-size:14px;margin-bottom:6px;min-height:18px;}
.timer-display{font-family:'JetBrains Mono',monospace;font-size:44px;font-weight:600;letter-spacing:.02em;margin-bottom:18px;}
.timer-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.timer-controls .btn{flex:1;min-width:120px;}
#switch-btn{margin-top:12px;}

/* Entries */
.entries-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 4px 20px rgba(30,40,28,.06);}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.entry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.entry-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;}
.entry-item .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none;}
.entry-main{flex:1;min-width:0;}
.entry-activity{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.entry-time{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}
.entry-actions{display:flex;gap:4px;}
.entry-actions button{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:5px;display:inline-flex;align-items:center;border-radius:6px;}
.entry-actions button:hover{color:var(--text);background:var(--surface);}
.entry-item.running .dot{background:var(--caution);animation:pulse 1.2s infinite;}

/* Export */
.export-card{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}

/* History */
.history-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 4px 20px rgba(30,40,28,.06);}
.history-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.history-day{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;}
.history-day-head{display:flex;justify-content:space-between;align-items:center;}
.history-day-date{font-weight:600;font-size:14px;}
.history-day-total{font-family:'JetBrains Mono',monospace;font-size:14px;display:flex;align-items:center;gap:6px;}
.history-day-total .chevron{display:inline-flex;color:var(--muted);transition:transform .15s ease;}
.history-day.open .history-day-total .chevron{transform:rotate(180deg);}
.history-day-flags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.flag{font-size:11px;padding:2px 7px;border-radius:20px;background:var(--danger-dim);color:#8a3220;border:1px solid rgba(179,69,44,.3);}
.history-day-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:none;}
.history-day.open .history-day-detail{display:block;}
.history-day-detail .entry-list{margin-bottom:10px;}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(30,40,28,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;padding:22px;width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow:auto;box-shadow:0 -8px 30px rgba(30,40,28,.12);}
@media (min-width:600px){.modal{align-items:center;}.modal-card{border-radius:var(--radius);}}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:20px;padding:7px 14px;font-size:13px;cursor:pointer;}
.chip:hover{border-color:var(--primary);color:var(--primary-dark);}
#activity-input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;}
.manual-time-fields{display:flex;gap:8px;flex-wrap:wrap;}
.field-label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);flex:1;min-width:100px;}
.field-label input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:9px 10px;font-size:14px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);border:1px solid var(--border);color:#fff;padding:10px 18px;border-radius:24px;font-size:13px;z-index:80;box-shadow:0 6px 24px rgba(30,40,28,.25);}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .conn-dot.syncing, .entry-item.running .dot{animation:none;}
}