/* ── VARS ──────────────────────────────────── */
:root {
  --bg: #f0f4f8;
  --surface: #fff;
  --surface2: #e8edf2;
  --border: #c8d4e0;
  --border2: #b0c0d0;
  --blue: #1a5fa8;
  --blue-mid: #2d7dd2;
  --blue-light: #d3e6f7;
  --blue-pale: #eef5fc;
  --blue-dark: #0d3d6e;
  --green: #1a9e5c;
  --green-bg: #eaf7f0;
  --red: #d63b3b;
  --red-bg: #fef0f0;
  --text: #1a2535;
  --muted: #6b82a0;
  --muted2: #9ab0c8;
  --mono: 'Share Tech Mono', monospace;
  --display: 'Oswald', sans-serif;
  --shadow: 0 1px 4px rgba(26,95,168,.07), 0 2px 10px rgba(26,95,168,.05);
  --shadow-md: 0 4px 20px rgba(26,95,168,.14);
  --radius: 0px;
}
[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2330;
  --border: #2a3444;
  --border2: #334155;
  --blue: #4d9de0;
  --blue-mid: #60aff5;
  --blue-light: #1e3a5f;
  --blue-pale: #111d2e;
  --blue-dark: #93c5fd;
  --green: #34d27a;
  --green-bg: #0d2a1a;
  --red: #f87171;
  --red-bg: #2a1010;
  --text: #e2e8f0;
  --muted: #7a93b0;
  --muted2: #4a6075;
  --shadow: 0 1px 4px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 4px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] body::before { background-image: linear-gradient(rgba(77,157,224,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(77,157,224,.05) 1px,transparent 1px); }
[data-theme="dark"] header { box-shadow: 0 2px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); }
[data-theme="dark"] .end-day-section { box-shadow: 0 -4px 20px rgba(0,0,0,.35); }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);min-height:100vh;overflow-x:hidden;transition:background .25s,color .25s;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(26,95,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,95,168,.04) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0;}

/* ── HEADER ─────────────────────────────────── */
header{border-bottom:2px solid var(--border);padding:12px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:100;box-shadow:var(--shadow);gap:12px;}
.logo{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:4px;text-transform:uppercase;color:var(--blue);white-space:nowrap;display:flex;align-items:center;gap:8px;}
.logo-name span{color:var(--blue-mid);}
.header-right{display:flex;flex-direction:row;align-items:center;gap:10px;flex-shrink:0;}
.header-datetime{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.header-date{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.header-clock{font-size:15px;color:var(--blue);letter-spacing:3px;font-variant-numeric:tabular-nums;}
.theme-toggle{background:transparent;border:1.5px solid var(--border);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .2s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--blue);background:var(--blue-pale);}

/* ── MAIN ────────────────────────────────────── */
main{max-width:900px;margin:0 auto;padding:28px 20px 120px;position:relative;z-index:1;}

/* ── ADD TASK ────────────────────────────────── */
.add-task-section{margin-bottom:24px;}
.section-label{font-family:var(--display);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.add-task-form{display:flex;border:1.5px solid var(--border);background:var(--surface);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s;}
.add-task-form:focus-within{border-color:var(--blue-mid);box-shadow:0 0 0 3px rgba(45,125,210,.12),var(--shadow);}
.task-input{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:13px 16px;font-family:var(--mono);font-size:14px;color:var(--text);}
.task-input::placeholder{color:var(--muted2);}
.add-btn{background:var(--blue);border:none;padding:13px 22px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#fff;cursor:pointer;transition:background .15s;white-space:nowrap;flex-shrink:0;}
.add-btn:hover{background:var(--blue-mid);}

/* ── STATS ───────────────────────────────────── */
.stats-bar{display:flex;flex-wrap:wrap;border:1.5px solid var(--border);margin-bottom:24px;background:var(--surface);box-shadow:var(--shadow);}
.stat-item{flex:1;min-width:80px;padding:10px 14px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;}
.stat-item:last-child{border-right:none;}
.stat-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.stat-value{font-family:var(--display);font-size:20px;font-weight:600;color:var(--blue);letter-spacing:2px;}
.stat-sub{font-size:9px;color:var(--muted2);}

/* ── TASK LIST ───────────────────────────────── */
.tasks-list{display:flex;flex-direction:column;gap:2px;}

/* ── GROUP HEADER ────────────────────────────── */
.group-header{display:flex;align-items:center;gap:8px;padding:8px 14px 6px;border-left:4px solid var(--blue-mid);background:var(--blue-pale);border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:10px;}
.group-header:first-child{margin-top:0;}
.group-header--default{border-left-color:var(--muted2);background:var(--surface2);opacity:.85;}
.group-name{font-family:var(--display);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);flex:1;}
.group-header--default .group-name{color:var(--muted);}
.group-rename-btn{background:transparent;border:none;cursor:pointer;font-size:13px;color:var(--muted);padding:2px 6px;transition:color .15s;}
.group-rename-btn:hover{color:var(--blue-mid);}
.group-rename-input{flex:1;background:var(--surface);border:1.5px solid var(--blue-mid);outline:none;padding:4px 8px;font-family:var(--display);font-size:11px;letter-spacing:2px;color:var(--text);}
.group-rename-save,.group-rename-cancel{background:transparent;border:none;border-left:1px solid var(--border);padding:0 8px;height:28px;cursor:pointer;font-size:13px;color:var(--muted);transition:all .15s;flex-shrink:0;}
.group-rename-save:hover{color:var(--green);background:var(--green-bg);}
.group-rename-cancel:hover{color:var(--red);background:var(--red-bg);}

/* ── DONE DIVIDER ────────────────────────────── */
.done-section-divider{display:flex;align-items:center;gap:10px;margin-top:14px;margin-bottom:4px;padding:0 2px;}
.done-section-divider span{font-family:var(--display);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted2);white-space:nowrap;}
.done-section-divider::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── TASK ITEM ───────────────────────────────── */
.task-item{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border2);display:flex;align-items:stretch;transition:all .2s;animation:slideIn .2s ease;box-shadow:var(--shadow);}
/* Arrow column on the left */
.task-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border);background:var(--blue-pale);flex-shrink:0;width:30px;}
.task-arrows--done{background:transparent;border-right:1px solid var(--border);}
.arrow-btn{background:transparent;border:none;cursor:pointer;font-size:14px;color:var(--blue-mid);width:30px;flex:1;display:flex;align-items:center;justify-content:center;transition:all .15s;font-weight:bold;}
.arrow-btn:hover{background:var(--blue-light);color:var(--blue);}
.arrow-btn:disabled{opacity:.22;cursor:not-allowed;color:var(--muted2);}
.arrow-btn:disabled:hover{background:transparent;color:var(--muted2);}
.arrow-btn.up{border-bottom:1px solid var(--border);}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.task-item[data-status="running"]{border-left-color:var(--green);background:var(--green-bg);}
.task-item[data-status="paused"]{border-left-color:var(--blue-mid);background:var(--blue-pale);}
.task-item[data-status="done"]{border-left-color:var(--muted2);background:var(--surface2);opacity:.6;}
.task-main{padding:12px 14px;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;}
.task-title{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.task-item[data-status="done"] .task-title{text-decoration:line-through;color:var(--muted);}
.task-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.task-status-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;}
.task-item[data-status="idle"] .task-status-label{color:var(--muted2);}
.task-item[data-status="running"] .task-status-label{color:var(--green);}
.task-item[data-status="paused"] .task-status-label{color:var(--blue-mid);}
.task-item[data-status="done"] .task-status-label{color:var(--muted2);}

/* ── TIMER ROW (timer + edit icon) ───────────── */
.task-timer-row{display:flex;align-items:center;gap:5px;}
.task-timer{font-size:16px;letter-spacing:3px;color:var(--blue);font-variant-numeric:tabular-nums;}
.task-item[data-status="done"] .task-timer{color:var(--muted);font-size:13px;}
.task-item[data-status="idle"] .task-timer{color:var(--muted2);}
.task-item[data-status="running"] .task-timer{color:var(--green);animation:timerPulse 1s steps(1) infinite;}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── TIMER EDIT BUTTON ───────────────────────── */
.timer-edit-btn{
  background: transparent;
  border: 1px solid transparent;
  padding: 1px 4px;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1;
  transition: all .15s;
  opacity: 0;          /* hidden by default, shown on hover of parent */
  flex-shrink: 0;
}
.task-item:hover .timer-edit-btn,
.task-item[data-status="done"] .timer-edit-btn {
  opacity: 1;
}
.timer-edit-btn:hover{
  color: var(--blue-mid);
  border-color: var(--border);
  background: var(--surface);
}
.task-item[data-status="done"] .timer-edit-btn{
  color: var(--muted2);
  font-size: 10px;
}

/* ── CONTROLS ────────────────────────────────── */
.task-controls{display:flex;align-items:stretch;border-left:1px solid var(--border);flex-shrink:0;}
.ctrl-btn{background:transparent;border:none;border-left:1px solid var(--border);padding:0 12px;cursor:pointer;font-size:14px;color:var(--muted);transition:all .15s;min-height:58px;min-width:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ctrl-btn:first-child{border-left:none;}
.ctrl-btn:hover{background:var(--surface2);}
.ctrl-btn.group-btn:hover{color:var(--blue-mid);background:var(--blue-pale);}
.ctrl-btn.up:hover,.ctrl-btn.down:hover{color:var(--blue);background:var(--blue-pale);}
.ctrl-btn.edit:hover{color:var(--blue-mid);background:var(--blue-pale);}
.ctrl-btn.start:hover{color:var(--green);background:var(--green-bg);}
.ctrl-btn.pause:hover{color:var(--blue-mid);background:var(--blue-pale);}
.ctrl-btn.finish:hover{color:var(--blue-dark);background:var(--blue-light);}
.ctrl-btn.restore:hover{color:var(--blue-mid);background:var(--blue-pale);}
.ctrl-btn.delete:hover{color:var(--red);background:var(--red-bg);}
.ctrl-btn:disabled{opacity:.18;cursor:not-allowed;}
.ctrl-btn:disabled:hover{background:transparent;color:var(--muted);}

/* ── EDIT INLINE ─────────────────────────────── */
.task-edit-form{display:flex;align-items:center;border:1.5px solid var(--blue-mid);background:var(--surface);box-shadow:0 0 0 3px rgba(45,125,210,.1);animation:editIn .15s ease;}
@keyframes editIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.task-edit-input{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:6px 10px;font-family:var(--display);font-size:14px;letter-spacing:1px;color:var(--text);}
.task-edit-save,.task-edit-cancel{background:transparent;border:none;border-left:1px solid var(--border);padding:0 10px;height:32px;cursor:pointer;font-size:13px;color:var(--muted);transition:all .15s;flex-shrink:0;}
.task-edit-save:hover{color:var(--green);background:var(--green-bg);}
.task-edit-cancel:hover{color:var(--red);background:var(--red-bg);}

/* ── EMPTY ───────────────────────────────────── */
.empty-state{text-align:center;padding:56px 20px;color:var(--muted2);}
.empty-icon{font-size:30px;margin-bottom:12px;opacity:.3;}
.empty-state p{font-family:var(--display);font-size:11px;letter-spacing:3px;text-transform:uppercase;}

/* ── BOTTOM BAR ──────────────────────────────── */
.end-day-section{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:2px solid var(--border);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:100;box-shadow:0 -4px 20px rgba(26,95,168,.08);}
.end-day-info{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.end-day-label{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);}
.end-day-total{font-size:17px;letter-spacing:3px;color:var(--blue);font-variant-numeric:tabular-nums;}
.end-day-btn{background:var(--blue);border:none;padding:10px 22px;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px rgba(26,95,168,.25);white-space:nowrap;flex-shrink:0;}
.end-day-btn:hover{background:var(--blue-mid);transform:translateY(-1px);}
.footer-links{display:flex;align-items:center;flex-shrink:0;}
.footer-link-btn{background:transparent;border:none;font-family:var(--mono);font-size:9px;color:var(--muted2);letter-spacing:1px;cursor:pointer;padding:4px 10px;transition:color .15s;border-right:1px solid var(--border);white-space:nowrap;}
.footer-link-btn:last-child{border-right:none;}
.footer-link-btn:hover{color:var(--blue);}

/* ── LANG TOGGLE ─────────────────────────────── */
.lang-toggle{position:fixed;bottom:78px;left:18px;z-index:200;background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--shadow-md);display:flex;overflow:hidden;}
.lang-btn{background:transparent;border:none;padding:7px 11px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .15s;border-right:1px solid var(--border);}
.lang-btn:last-child{border-right:none;}
.lang-btn.active{background:var(--blue);color:#fff;}
.lang-btn:hover:not(.active){background:var(--blue-pale);color:var(--blue);}

/* ── MODALS ──────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,30,60,.45);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:16px;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1.5px solid var(--border);border-top:4px solid var(--blue);width:100%;max-width:540px;padding:28px 32px;box-shadow:var(--shadow-md);transform:translateY(14px);transition:transform .3s;max-height:90vh;overflow-y:auto;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-title{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:4px;text-transform:uppercase;margin-bottom:4px;color:var(--blue);}
.modal-subtitle{font-size:10px;color:var(--muted);letter-spacing:2px;margin-bottom:20px;text-transform:uppercase;}
.modal-body{font-size:13px;color:var(--muted);line-height:1.9;margin-bottom:18px;}
.modal-body h3{font-family:var(--display);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin:18px 0 7px;font-weight:600;}
.modal-body h3:first-child{margin-top:0;}
.modal-body p{margin-bottom:10px;}
.modal-body ul{padding-left:16px;margin-bottom:10px;}
.modal-body ul li{margin-bottom:4px;}
.modal-body a{color:var(--blue-mid);text-decoration:none;}
.modal-body a:hover{text-decoration:underline;}
.modal-body code{font-family:var(--mono);font-size:11px;background:var(--border);padding:1px 5px;}
.modal-body .support-cta{display:inline-block;margin:6px 0 12px;padding:7px 12px;border:1px solid var(--blue);background:var(--blue-pale);color:var(--blue-dark);font-family:var(--display);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:all .2s;}
.modal-body .support-cta:hover{background:var(--blue);color:#fff;text-decoration:none;}
.modal-body .cookie-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
.modal-body .cookie-tag{font-family:var(--mono);font-size:11px;background:var(--blue-pale);border:1px solid var(--blue-mid);color:var(--blue);padding:3px 9px;border-left:3px solid var(--blue-mid);letter-spacing:.5px;}
[data-theme="dark"] .modal-body .cookie-tag{background:var(--blue-pale);border-color:var(--blue-mid);color:var(--blue-mid);}
.modal-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.modal-btn{flex:1;min-width:100px;background:transparent;border:1.5px solid var(--border);padding:10px 12px;font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text);cursor:pointer;transition:all .2s;}
.modal-btn:hover{border-color:var(--blue);color:var(--blue);}
.modal-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.modal-btn.primary:hover{background:var(--blue-mid);}
.modal-btn.danger{border-color:var(--red);color:var(--red);}
.modal-btn.danger:hover{background:var(--red-bg);}
.confirm-modal{max-width:400px;text-align:center;}
.confirm-modal .confirm-icon{font-size:34px;margin-bottom:10px;display:block;}
.confirm-modal .modal-body{text-align:left;}
/* Wide variant for clear-day (needs more space for the body text) */
.confirm-modal--wide{max-width:480px;}
.newday-modal{text-align:center;}
.newday-modal .day-icon{font-size:38px;margin-bottom:12px;display:block;}
.modal-summary-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px;gap:10px;}
.modal-summary-item:last-of-type{border-bottom:none;}
.modal-task-name{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal-task-status{font-size:8px;letter-spacing:2px;color:var(--muted2);text-transform:uppercase;flex-shrink:0;}
.modal-task-time{color:var(--blue);letter-spacing:2px;flex-shrink:0;font-size:12px;}

/* ── GROUP MODAL ─────────────────────────────── */
.group-modal{max-width:440px;}
.group-existing-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;min-height:32px;max-height:160px;overflow-y:auto;}
.group-pick-btn{background:var(--surface2);border:1.5px solid var(--border);padding:6px 14px;font-family:var(--display);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text);cursor:pointer;transition:all .15s;}
.group-pick-btn:hover{border-color:var(--blue-mid);color:var(--blue-mid);}
.group-pick-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.group-empty-hint{font-size:11px;color:var(--muted2);letter-spacing:1px;padding:4px 0;}
.group-new-row{display:flex;gap:0;border:1.5px solid var(--border);margin-bottom:14px;}
.group-input{flex:1;background:transparent;border:none;outline:none;padding:10px 12px;font-family:var(--mono);font-size:13px;color:var(--text);}
.group-input::placeholder{color:var(--muted2);}

/* ── REPORTS MODAL ───────────────────────────── */
.reports-modal{max-width:620px;}
.report-today-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.report-today-label{font-family:var(--display);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);font-weight:600;}
.report-today-date{font-size:10px;color:var(--muted);letter-spacing:1px;flex:1;}
.report-today-time{font-size:14px;color:var(--blue);letter-spacing:2px;font-variant-numeric:tabular-nums;}
/* Grouped action buttons for today row */
.report-today-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0;}
.report-month-divider{font-family:var(--display);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--blue-mid);padding:14px 0 6px;border-bottom:1px solid var(--border2);margin-bottom:4px;}
.report-day-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.report-day-row:last-of-type{border-bottom:none;}
.report-day-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.report-day-date{font-family:var(--display);font-size:12px;letter-spacing:2px;color:var(--text);}
.report-day-meta{font-size:10px;color:var(--muted);letter-spacing:1px;}
.report-day-actions{display:flex;gap:6px;flex-shrink:0;}
.report-action-btn{background:transparent;border:1.5px solid var(--border);padding:6px 12px;font-family:var(--display);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
.report-action-btn:hover{border-color:var(--blue-mid);color:var(--blue-mid);}
.report-action-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.report-action-btn.primary:hover{background:var(--blue-mid);}
.report-action-btn.danger{border-color:var(--red);color:var(--red);}
.report-action-btn.danger:hover{background:var(--red-bg);}
.report-no-history{font-size:11px;color:var(--muted2);letter-spacing:2px;text-transform:uppercase;padding:16px 0;text-align:center;}
.report-bottom-actions{display:flex;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}

/* ── EDIT TIME MODAL ─────────────────────────── */
.edit-time-modal{max-width:360px;}
.edit-time-form{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 6px;}
.edit-time-input{
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  outline: none;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 6px;
  color: var(--blue);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s;
}
.edit-time-input:focus{
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(45,125,210,.12);
}
.edit-time-error{
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--red);
  text-align: center;
  display: none;
}

/* ── RESPONSIVE 768px (tablet) ───────────────── */
@media(max-width:768px){
  header{padding:10px 16px;}
  .logo{font-size:16px;letter-spacing:2px;}
  .header-clock{font-size:13px;letter-spacing:2px;}
  .header-date{font-size:9px;letter-spacing:1px;}
  main{padding:20px 12px 120px;}
  .ctrl-btn{padding:0 10px;min-height:52px;font-size:13px;}
  .end-day-section{padding:9px 16px;gap:10px;}
  .end-day-total{font-size:15px;}
  .end-day-btn{padding:9px 16px;font-size:10px;}
  /* Modals */
  .modal{padding:24px 20px;max-height:92vh;}
  .modal-overlay{padding:12px;}
  /* Reports */
  .report-day-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .report-day-actions{width:100%;justify-content:flex-end;}
  /* Group modal */
  .group-modal{max-width:100%;}
  .group-existing-list{max-height:120px;}
}

/* ── RESPONSIVE 480px (mobile) ───────────────── */
@media(max-width:480px){
  header{padding:9px 12px;}
  .logo{font-size:14px;letter-spacing:1px;}
  .header-date{display:none;}
  .header-clock{font-size:12px;letter-spacing:1px;}
  main{padding:12px 8px 120px;}

  /* Stats 2×2 grid */
  .stats-bar{display:grid;grid-template-columns:1fr 1fr;}
  .stat-item{border-right:1px solid var(--border) !important;border-bottom:1px solid var(--border);}
  .stat-item:nth-child(2){border-right:none !important;}
  .stat-item:nth-child(3){border-bottom:none;}
  .stat-item:nth-child(4){border-right:none !important;border-bottom:none;}

  /* Task card layout — arrows left, controls wrap below */
  .task-item{flex-direction:row;flex-wrap:wrap;align-items:stretch;}
  .task-arrows{width:28px;min-height:56px;flex-shrink:0;}
  .arrow-btn{font-size:13px;}
  .task-main{padding:10px 10px;min-width:0;flex:1;}
  .task-title{font-size:14px;white-space:normal;word-break:break-word;}
  .task-timer{font-size:13px;}
  .task-controls{border-left:none;border-top:1px solid var(--border);width:calc(100% - 28px);margin-left:28px;flex-wrap:wrap;}
  .ctrl-btn{flex:1;border-left:1px solid var(--border);min-height:42px;min-width:36px;padding:0;font-size:16px;}
  .ctrl-btn:first-child{border-left:none;}

  /* Group headers */
  .group-header{padding:7px 10px;margin-top:8px;}
  .group-name{font-size:10px;letter-spacing:2px;}

  /* Add task form stacks on mobile */
  .add-task-form{flex-direction:column;}
  .add-btn{padding:12px;font-size:11px;text-align:center;}

  /* Bottom bar compact */
  .end-day-section{padding:8px 10px;gap:6px;flex-wrap:wrap;}
  .end-day-info{flex-direction:row;align-items:center;gap:8px;}
  .end-day-total{font-size:14px;letter-spacing:2px;}
  .end-day-label{display:none;}
  .end-day-btn{padding:8px 14px;font-size:9px;letter-spacing:2px;white-space:nowrap;}
  .footer-links{order:-1;width:100%;border-bottom:1px solid var(--border);margin-bottom:4px;}
  .footer-link-btn{font-size:8px;padding:3px 8px;}

  /* All modals */
  .modal{padding:18px 14px;max-height:88vh;border-radius:0;}
  .modal-overlay{padding:8px;}
  .modal-title{font-size:15px;letter-spacing:2px;}
  .modal-subtitle{font-size:9px;margin-bottom:14px;}
  .modal-actions{flex-direction:column;gap:6px;}
  .modal-btn{min-width:100%;padding:11px 10px;font-size:10px;}

  /* Group assign modal */
  .group-modal{max-width:100%;}
  .group-existing-list{max-height:130px;gap:5px;}
  .group-pick-btn{padding:8px 12px;font-size:10px;flex:1 0 auto;}
  .group-new-row{gap:0;}
  .group-input{padding:10px;font-size:13px;}

  /* Reports modal */
  .reports-modal{max-width:100%;}
  .report-today-header{flex-wrap:wrap;gap:6px;}
  .report-today-date{font-size:9px;width:100%;order:1;}
  .report-today-time{font-size:13px;}
  .report-today-actions{margin-left:0;width:100%;justify-content:flex-end;}
  .report-month-divider{font-size:9px;letter-spacing:2px;}
  .report-day-row{flex-direction:column;align-items:flex-start;gap:6px;}
  .report-day-date{font-size:11px;letter-spacing:1px;}
  .report-day-actions{width:100%;display:flex;gap:6px;}
  .report-action-btn{flex:1;text-align:center;padding:7px 6px;font-size:8px;}
  .report-bottom-actions{flex-direction:column;gap:6px;}

  /* Privacy cookie tags */
  .modal-body .cookie-tag{font-size:10px;padding:2px 7px;}
  .modal-body .cookie-row{gap:5px;}

  /* Timer edit button always visible on touch */
  .timer-edit-btn{opacity:1;}

  .lang-toggle{bottom:72px;left:8px;}

  /* Edit time modal */
  .edit-time-input{font-size:20px;letter-spacing:4px;}
}

/* ── RESPONSIVE 360px (small phone) ─────────── */
@media(max-width:360px){
  .logo-name{display:none;}
  .header-clock{font-size:11px;letter-spacing:1px;}
  .ctrl-btn{min-width:30px;font-size:14px;}
  .end-day-btn{font-size:8px;padding:7px 10px;}
}