:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#303930;background:#fbfbf8;font-synthesis:none;--muted:#81877e;--line:#e7e8e0;--accent:#c95736;--green:#376047}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #cd8b5f;outline-offset:3px}input:focus,select:focus{outline:2px solid #b8c6b3;outline-offset:1px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.workspace{display:grid;grid-template-columns:252px 1fr;min-height:100vh}.sidebar{padding:32px 20px;background:#f1f2ec;border-right:1px solid #e5e7dd;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:750;letter-spacing:-.5px;flex-wrap:wrap}.beta{font-size:8px;letter-spacing:1.2px;background:#e5e8dd;border:1px solid #d9ddce;padding:4px;border-radius:4px;margin-left:40px;margin-top:-6px;color:#75816d}.add-shortcut{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--accent);font-weight:600;margin:24px 0 18px;text-align:left;padding:0 10px}.add-shortcut>span{font-size:24px}kbd{font-size:10px;background:#e6e8df;padding:3px 6px;color:#898e81;border-radius:3px;margin-left:auto}.nav-label{font-size:10px;font-weight:650;letter-spacing:1.7px;color:#969d8c;margin:0 12px 8px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;text-align:left;color:#69715f;padding:6px 10px;min-height:34px;margin-bottom:2px;border-radius:8px;font-size:13px}.nav-item:hover{background:#e9ece2}.nav-item.active{background:#e1e7d9;color:#35492e;font-weight:650}.nav-icon{font-size:19px;font-weight:400;width:20px;text-align:center}.count{margin-left:auto;font-size:11px;color:#8b9581}.sidebar-bottom{margin-top:auto;padding:25px 10px 0;display:flex;flex-wrap:wrap;gap:12px 16px}.local-note{width:100%;font-size:10px;color:#939b88;margin-bottom:10px}.online-dot{display:inline-block;width:6px;height:6px;background:#80a66e;border-radius:50%;margin-right:6px}.subtle{font-size:11px;border:0;background:transparent;color:#7f8877;padding:0}.subtle:hover{color:var(--accent)}main{min-width:0}.content{max-width:980px;margin:auto;padding:54px 58px 30px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#939c86;margin:0 0 13px}h1{font-size:36px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 12px;font-weight:650}.muted{color:var(--muted);font-size:13px;line-height:1.7;margin:0}.composer{background:white;border:1px solid #d9dfd0;border-radius:11px;box-shadow:0 3px 12px #34412605;overflow:hidden}.composer:focus-within{border-color:#91a57e;box-shadow:0 0 0 3px #adbf9d16}.composer-input{display:flex;align-items:center;padding:17px 15px;gap:10px}.plus{font-size:25px;color:#a5ae99}.composer input{min-width:0;flex:1;border:0;background:transparent;font-size:13px;padding:8px 2px;color:#303930;outline:none}.composer input::placeholder{color:#999f94}.primary{display:flex;justify-content:center;align-items:center;gap:17px;border:0;border-radius:6px;background:var(--accent);color:white;padding:11px 17px;font-size:12px;font-weight:550;white-space:nowrap}.primary:hover{background:#b24b2e}.primary span{opacity:.65}.preview{border-top:1px solid #eef0e8;padding:11px 18px;background:#fafbf6;color:#929c83;font-size:10px;line-height:1.7;min-height:39px}.preview.ready{color:#426449}.preview.error{color:#a74f32}.spark{color:#9cae83;font-size:14px;margin-right:6px}.examples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:9px;margin:13px 0 34px;color:#a4aa9c}.examples button{font-size:9px;color:#859075;background:#f3f5ed;border:1px solid #e6eadf;border-radius:4px;padding:5px 8px}.examples button:hover{border-color:#a5b28d}.list-toolbar{display:flex;align-items:center;justify-content:space-between;margin:15px 0;color:#8c9484;font-size:11px}.search{display:flex;align-items:center;gap:5px}.search>span{font-size:20px}.search input{border:0;background:transparent;width:128px;font-size:11px;padding:6px;color:#6b7662}.search input::placeholder{color:#a2a99a}.group-heading{font-size:11px;color:#69765e;font-weight:600;margin:25px 0 8px;display:flex;align-items:center;gap:10px}.group-heading::after{content:"";height:1px;background:var(--line);flex:1}.task{display:flex;align-items:flex-start;gap:13px;padding:19px 2px;border-bottom:1px solid var(--line)}.task-check{border:1.5px solid #cbd2c2;border-radius:50%;background:transparent;width:20px;height:20px;margin-top:1px;flex-shrink:0;color:#789268;display:grid;place-items:center;font-size:11px;padding:0}.task-check:hover{background:#e5eddf;border-color:#7d976b}.task.done .task-check{background:#e4ebde;border-color:#c5d4b9}.task-main{flex:1;min-width:0}.task-title{font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.done .task-title{text-decoration:line-through;color:#929a88}.task-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px;font-size:10px;color:#96a08c}.date-pill{color:#778c62}.date-pill.overdue{color:#c05f43}.recurrence-pill{background:#f0f3e9;padding:2px 6px;border-radius:3px;color:#7c8c6c}.deadline-pill{color:#b18b54}.task-actions{display:flex;gap:2px}.icon-button{border:0;background:transparent;font-size:17px;color:#a2aa97;width:27px;height:27px;border-radius:4px;padding:0}.icon-button:hover{background:#edf0e5;color:#4e6242}.task-actions .delete:hover{color:#ba5337}.empty{text-align:center;padding:60px 20px 75px;color:#9aa58e}.empty-icon{width:58px;height:58px;margin:0 auto 20px;display:grid;place-items:center;background:#f0f3e9;border:1px dashed #ccd8bd;border-radius:18px;font-size:25px;color:#9aaf86;transform:rotate(-7deg)}.empty h2{font-size:17px;font-weight:500;color:#707e63}.empty p{font-size:12px;line-height:1.9}.page-footer{margin-top:45px;text-align:center;font-size:10px;color:#a2ab95}.error{font-size:12px;line-height:1.6;color:#ad4a33}.error:empty{display:none}.login-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 20% 0%,#e9eddf,transparent 60%),#f8f8f3;padding:24px}.login-card{max-width:410px;width:100%;background:#fffefb;padding:42px;border:1px solid #e1e5d7;border-radius:18px;box-shadow:0 20px 70px #3b4c2910}.login-card>img{margin-bottom:28px}.login-card h1{font-size:30px}.login-card .primary{width:100%;margin-top:16px}.login-card small{display:block;margin-top:30px;color:#a0a78f;font-size:10px}label:not(.search):not(.sr-only):not(.checkbox-label){display:block;font-size:12px;color:#6f7c62;margin:22px 0 8px}.login-card input,dialog input:not([type=checkbox]),dialog select{width:100%;padding:12px;border:1px solid #d9dfd0;border-radius:6px;background:#fffefb;color:#35432c}dialog{border:1px solid #dce2d1;background:#fffefb;border-radius:14px;padding:28px;width:min(460px,calc(100% - 32px));color:#35432c}dialog::backdrop{background:#26322166;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{margin:0;font-size:20px;letter-spacing:-.5px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.secondary{border:1px solid #d9dfd0;border-radius:6px;background:transparent;padding:10px 17px;color:#7c886f;font-size:12px}.checkbox-label{display:flex;gap:8px;align-items:center;font-size:12px;margin-top:18px;color:#7c886f}.small{font-size:11px;line-height:1.7;margin-top:8px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border-radius:8px;background:#344b34;color:#fff;padding:15px 20px;box-shadow:0 8px 25px #26322122;font-size:12px;display:flex;align-items:center;gap:20px;max-width:90vw;z-index:10}.toast button{border:0;background:none;color:#d4e6af;text-decoration:underline;font-size:12px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:1500px){.content{padding-top:75px}}@media(max-width:1000px){.workspace{grid-template-columns:210px 1fr}.sidebar{padding:26px 14px}.content{padding:40px 30px}.composer-input{flex-wrap:wrap}.composer input{font-size:12px}}@media(max-width:700px){.workspace{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:18px 18px 12px}.brand{font-size:17px}.beta{margin:0 0 0 auto}.add-shortcut,.nav-label{display:none}.sidebar nav{display:flex;gap:5px;overflow-x:auto;margin-top:20px}.nav-item{width:auto;white-space:nowrap;font-size:11px;padding:9px}.nav-icon{font-size:15px;width:auto}.count{font-size:9px}.sidebar-bottom{padding:8px 7px 0;justify-content:flex-end;gap:16px}.local-note{display:none}.content{padding:27px 20px}h1{font-size:30px}.muted{font-size:12px}.composer-input{padding:12px;gap:6px}.composer input{flex-basis:80%;font-size:12px}.composer .primary{margin-left:auto;padding:8px 13px}.preview{font-size:10px;padding:10px 13px}.examples{gap:5px;margin-bottom:25px}.task{gap:10px}.task-title{font-size:13px}.task-actions{gap:0}.page-footer{font-size:9px}.login-card{padding:30px}}

/* Appearance: shared surface tokens keep every screen in the selected theme. */
:root {
  color-scheme: light;
  --background: #fbfbf8;
  --surface: #ffffff;
  --surface-soft: #f5f6f0;
  --sidebar: #f1f2ec;
  --text: #303930;
  --muted: #6d7767;
  --faint: #75806e;
  --line: #dfe4d8;
  --border: #c8d1bf;
  --success: #326543;
  --danger: #b14932;
  --deadline: #906016;
  --shadow: #26322116;
  --backdrop: #20291f66;
  --on-accent: #ffffff;
  --accent-ink: #a8452b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #191e1a;
  --surface: #222923;
  --surface-soft: #252d26;
  --sidebar: #202620;
  --text: #e7ece7;
  --muted: #b0b9ac;
  --faint: #9da996;
  --line: #394238;
  --border: #56624f;
  --success: #9cceaa;
  --danger: #f29b85;
  --deadline: #e3bd76;
  --shadow: #00000040;
  --backdrop: #070a09a6;
}
:root {
  color: var(--text);
  background: var(--background);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 55%, var(--border));
}
body { background: var(--background); }
button:focus-visible, a:focus-visible, input:focus, select:focus { outline-color: var(--accent-ink); }
.sidebar { background: var(--sidebar); border-color: var(--line); }
.beta, kbd { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
.nav-label, .count, .local-note, .subtle, .eyebrow,
.examples, .list-toolbar, .task-meta, .page-footer { color: var(--faint); }
.nav-item, .group-heading, .search input, .empty h2, .login-card small { color: var(--muted); }
.add-shortcut, .subtle:hover { color: var(--accent-ink); }
.nav-item:hover { background: var(--surface-soft); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav-item.active .count { color: inherit; }
.empty-icon { background: var(--accent-soft); border-color: var(--line); color: var(--accent-ink); }
.composer { background: var(--surface); border-color: var(--border); box-shadow: 0 3px 12px var(--shadow); }
.composer:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer input { color: var(--text); }
.composer input::placeholder, .search input::placeholder { color: var(--faint); }
.plus, .spark { color: var(--accent-ink); }
.primary { background: var(--accent); color: var(--on-accent); }
.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--on-accent)); }
.preview { background: var(--surface-soft); border-color: var(--line); color: var(--muted); }
.preview.ready, .date-pill { color: var(--success); }
.preview.error, .error, .date-pill.overdue, .task-actions .delete:hover { color: var(--danger); }
.examples button, .recurrence-pill { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--line); }
.examples button:hover { border-color: var(--accent-border); }
.task-check { border-color: var(--border); color: var(--accent-ink); }
.task-check:hover, .task.done .task-check { background: var(--accent-soft); border-color: var(--accent-border); }
.done .task-title { color: var(--muted); }
.deadline-pill { color: var(--deadline); }
.icon-button { color: var(--faint); }
.icon-button:hover { background: var(--surface-soft); color: var(--text); }
.empty { color: var(--muted); }
.login-screen { background: radial-gradient(ellipse at 20% 0%, var(--accent-soft), transparent 60%), var(--background); }
.login-card { background: var(--surface); border-color: var(--line); box-shadow: 0 20px 70px var(--shadow); }
label:not(.search):not(.sr-only):not(.checkbox-label), .checkbox-label { color: var(--muted); }
.login-card input, dialog input:not([type=checkbox]), dialog select { background: var(--surface); color: var(--text); border-color: var(--border); }
dialog { background: var(--surface); border-color: var(--line); color: var(--text); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: var(--backdrop); }
.secondary { border-color: var(--border); color: var(--muted); }
.secondary:hover { background: var(--surface-soft); }
.toast { background: var(--text); color: var(--background); box-shadow: 0 8px 25px var(--shadow); }
.toast button { color: inherit; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.brand-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; background: var(--accent); color: var(--on-accent); border-radius: 9px; font-size: 22px; font-weight: 500; }
.login-card > .brand-mark { width: 46px; height: 46px; border-radius: 14px; font-size: 32px; margin-bottom: 28px; }
#settings-dialog { width: min(520px, calc(100% - 32px)); }
.appearance-section { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.appearance-section legend { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#settings-dialog .theme-option { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 14px 6px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface); font-size: 12px; cursor: pointer; }
#settings-dialog input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
#settings-dialog .theme-option:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
#settings-dialog .theme-option:has(input:focus-visible) { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.theme-symbol { font-size: 24px; line-height: 1; }
.accent-options { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.color-swatch { width: 32px; height: 32px; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }
.color-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--text); }
.color-swatch[data-accent="#c95736"] { background: #c95736; }
.color-swatch[data-accent="#387a57"] { background: #387a57; }
.color-swatch[data-accent="#3478cb"] { background: #3478cb; }
.color-swatch[data-accent="#8059c2"] { background: #8059c2; }
.color-swatch[data-accent="#c3487b"] { background: #c3487b; }
.color-swatch[data-accent="#af7618"] { background: #af7618; }
#settings-dialog .custom-accent { display: flex; align-items: center; gap: 8px; margin: 0 0 0 3px; font-size: 11px; cursor: pointer; }
#settings-dialog input[type=color] { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; padding: 3px; cursor: pointer; }
.settings-divider { border-top: 1px solid var(--line); margin-top: 24px; }
@media(max-width:400px) { .theme-options { gap: 6px; } #settings-dialog { padding: 22px; } }

/* Notifications share the current theme and accent. */
#notifications-dialog, #reminders-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto; }
.settings-link { width: 100%; text-align: left; margin-bottom: 16px; }
.channel-section { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0; }
.channel-section summary { cursor: pointer; font-weight: 650; }
.channel-section summary span { margin-left: 8px; font-weight: 400; }
.channel-section h3 { margin: 0 0 16px; font-size: 16px; }
.channel-section .secondary { margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.form-grid.digest-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.form-grid > div { min-width: 0; }
.notification-channels { border: 0; padding: 0; margin: 20px 0 8px; display: flex; flex-wrap: wrap; gap: 18px; }
.notification-channels legend { margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.notification-channels .checkbox-label { margin: 8px 0; }
.reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.reminder-row .small { margin-top: 4px; }
.reminder-action svg { display: block; width: 16px; height: 16px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media(max-width: 480px) { .form-grid, .form-grid.digest-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .task-actions { flex-wrap: wrap; } }

.sidebar-search { margin: 2px 0 14px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface); }
.sidebar-search input { min-width: 0; width: 100%; font-size: 13px; color: var(--text); }
.sidebar-search:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.export-button { display: inline-block; text-decoration: none; margin: 6px 0; font-size: 13px; }
#settings-dialog #import-file { padding: 10px; max-width: 100%; font-size: 12px; }
#import-file::file-selector-button { border: 1px solid var(--border); border-radius: 5px; background: var(--surface-soft); color: var(--text); padding: 6px 8px; margin-right: 8px; cursor: pointer; }
.task-transfer summary { font-weight: 650; }
@media(max-width:700px) { .sidebar-search { margin: 12px 0; width: 100%; } }
.sidebar { overflow-y: auto; }
.projects-heading { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:1px; margin:16px 12px 4px; }
.project-row { display:flex; align-items:center; min-width:0; }
.project-row .nav-item { flex:1; min-width:0; }
.project-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-icon { width:22px; flex-shrink:0; font-size:18px; text-align:center; }
.section-row { padding-left:20px; }
.section-row .nav-item { font-size:12px; }
.composer-placement { display:flex; gap:10px; padding:0 18px 12px; }
.composer-placement select { min-width:0; max-width:50%; border:1px solid var(--border); border-radius:6px; padding:5px 8px; background:var(--surface); color:var(--muted); font:inherit; font-size:12px; }
#entity-dialog { max-height:calc(100dvh - 40px); overflow:auto; }
#entity-color { height:46px; padding:5px; }
.sidebar-search input:focus { outline:none; }
@media(max-width:700px) { #project-list { display:flex; flex-wrap:wrap; } .projects-heading { margin-top:12px; } .project-row { max-width:100%; } }
.emoji-picker { margin-top: 12px; }
.emoji-picker #emoji-search { margin-bottom: 10px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; max-height: 220px; overflow-y: auto; padding: 4px; }
.emoji-choice { display:flex; align-items:center; justify-content:center; min-height:42px; border:1px solid transparent; border-radius:8px; background:var(--surface-soft); color:var(--text); font-size:25px; padding:4px; cursor:pointer; }
.emoji-choice:hover, .emoji-choice[aria-pressed="true"] { border-color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 15%,var(--surface)); }
.emoji-choice:focus-visible { outline:2px solid var(--accent-ink); outline-offset:0; }
.emoji-selection { display:flex; align-items:center; gap:14px; margin-top:16px; }
#emoji-selected { font-size:32px; width:45px; flex-shrink:0; text-align:center; }
#entity-dialog .emoji-selection label { margin:0; flex:1; }
#entity-dialog .emoji-selection input { margin-top:7px; }
#emoji-more, #emoji-retry { margin-top:10px; }

.add-inline{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--muted);padding:14px 0;font-size:14px}.add-inline span{color:var(--accent-ink);font-size:24px}.add-inline:hover{color:var(--accent-ink)}
#add-form{margin-top:14px}#add-cancel{margin:10px 14px}.project-row .project-move{width:21px;flex-shrink:0;font-size:14px}.project-move:disabled{cursor:default;opacity:.2}

.task-input-wrap{position:relative;flex:1;min-width:0}.composer .task-input-wrap input{position:relative;width:100%;display:block;z-index:1;font-size:13px;line-height:20px;padding:8px 2px;letter-spacing:normal}
.task-highlight{position:absolute;inset:0;overflow:hidden;white-space:pre;pointer-events:none;font:inherit;font-size:13px;line-height:20px;padding:8px 2px;color:transparent;letter-spacing:normal}
.task-highlight mark{color:transparent;background:var(--accent-soft);outline:1px solid var(--accent-ink);border-radius:4px}
.project-suggestions{position:absolute;top:100%;left:0;min-width:220px;max-width:100%;max-height:240px;overflow:auto;z-index:20;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px #0003;padding:4px}
.project-option,.suggestion-empty{padding:10px 12px;font-size:13px;overflow-wrap:anywhere}.project-option{cursor:pointer;border-radius:5px}.project-option:hover,.project-option[aria-selected=true]{background:var(--accent-soft)}
@media(max-width:700px){.task-input-wrap{flex-basis:80%}.composer .task-input-wrap input,.task-highlight{font-size:12px}}

#add-form{overflow:visible}
/* Project layouts share task actions and theme variables with the list. */
.content.wide-view{max-width:1600px;padding-left:30px;padding-right:30px}
.project-view-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.project-view-controls label:not(.sr-only){margin:0;font-size:12px}.project-view-controls select,.calendar-toolbar input,.board-move{border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);padding:8px;font-size:12px}
.project-board{display:flex;gap:18px;overflow-x:auto;align-items:flex-start;padding:4px 2px 18px;min-height:240px}
.board-column{flex:0 0 285px;min-height:180px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);padding:12px}
.board-heading{font-size:14px;line-height:1.5;margin:0 0 14px;overflow-wrap:anywhere}.board-card.task{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:0 0 10px;padding:12px;cursor:grab}
.board-card .task-actions{grid-column:2;justify-content:flex-end;flex-wrap:wrap}.board-card .task-title{overflow-wrap:anywhere}.board-card .task-meta{display:flex;flex-wrap:wrap;gap:5px}.board-move{grid-column:1/-1;width:100%}.board-column .add-inline{font-size:12px}
.dragging{opacity:.45}.drop-target{outline:2px solid var(--accent-ink);outline-offset:-2px;background:var(--accent-soft)!important}
.calendar-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}.calendar-toolbar h2{font-size:18px;margin:0;min-width:180px;text-transform:capitalize}.calendar-toolbar .secondary{padding:8px 12px}
.calendar-scroll{overflow:auto;max-height:650px;border:1px solid var(--line);border-radius:10px;position:relative}
.calendar-grid{display:grid;background:var(--surface);gap:1px}.month-grid{grid-template-columns:repeat(7,minmax(0,1fr));min-width:770px}.time-grid{grid-template-columns:70px repeat(7,minmax(0,1fr));min-width:900px}.time-grid.three-days{grid-template-columns:70px repeat(3,minmax(0,1fr));min-width:520px}
.calendar-day-heading{position:sticky;top:0;z-index:2;background:var(--surface-soft);padding:12px 8px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;text-align:center}
.calendar-cell{min-width:0;min-height:90px;padding:5px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.month-grid .calendar-cell{min-height:125px}.calendar-cell.calendar-today{background:color-mix(in srgb,var(--accent-soft) 50%,var(--surface))}.other-month{background:var(--surface-soft)}
.calendar-add{border:0;background:transparent;color:var(--muted);padding:3px 7px;border-radius:5px;font-size:12px;display:block;margin:0 0 4px auto}.calendar-add:hover,.calendar-add:focus-visible{background:var(--accent-soft);color:var(--accent-ink)}.calendar-today>.calendar-add{background:var(--accent-ink);color:var(--surface)}
.calendar-card{display:flex;align-items:flex-start;gap:3px;min-width:0;background:var(--accent-soft);border:1px solid var(--line);border-left:3px solid var(--accent-ink);border-radius:5px;margin-bottom:5px;padding:4px;cursor:grab}
.calendar-task-title{flex:1;min-width:0;border:0;background:transparent;color:var(--text);text-align:left;font-size:11px;line-height:1.45;padding:2px;overflow-wrap:anywhere}.calendar-complete{border:0;background:transparent;color:var(--accent-ink);padding:0 2px;font-size:18px;line-height:22px}.calendar-hour{border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);padding:9px 5px;text-align:center;background:var(--surface-soft)}
.calendar-unscheduled{margin-top:18px;padding:14px;border:1px dashed var(--line);border-radius:8px;min-height:80px}.calendar-unscheduled .calendar-card{max-width:360px}.calendar-unscheduled .calendar-task-title{font-size:13px}
@media(max-width:700px){.content.wide-view{padding:24px 16px}.project-view-controls{justify-content:flex-start}.board-column{flex-basis:270px}.calendar-toolbar{gap:6px}.calendar-toolbar h2{font-size:15px;min-width:140px}.calendar-scroll{max-height:65vh}}

.board-card .task-main{user-select:none}.calendar-card .calendar-task-title{user-select:none}.time-grid .calendar-cell{min-height:72px}

.archive-links{display:flex;gap:10px;flex-wrap:wrap}.archive-links .count{margin-left:8px}.calendar-cell,.calendar-hour{position:relative}
.current-time-line{position:absolute;left:0;right:0;height:1px;background:#f16b65;z-index:1;pointer-events:none}.current-day-line{height:3px}.current-day-line::before{content:"";position:absolute;left:0;top:-3px;width:9px;height:9px;border-radius:50%;background:#f16b65}
.current-time-label{position:absolute;left:0;right:0;transform:translateY(-50%);color:#f16b65;font-weight:700;background:var(--surface-soft);font-size:12px;z-index:1;pointer-events:none}
.archive-links .secondary{display:flex;align-items:center;gap:8px}

.task-drag{border:0;background:transparent;color:var(--muted);cursor:grab;padding:4px;align-self:center;flex:none;font-size:18px;touch-action:none}.task-drag:focus-visible{outline:2px solid var(--accent-ink)}
.task-drop-before{box-shadow:0 -3px var(--accent-ink)}.task-drop-after{box-shadow:0 3px var(--accent-ink)}.task-drop-child{background:var(--accent-soft);outline:2px dashed var(--accent-ink)}.task-drop-child::after{content:'↳ Дочерняя задача';color:var(--accent-ink);font-size:11px;align-self:center}
.markdown{overflow-wrap:anywhere}.markdown a{color:var(--accent-ink)}.markdown code{background:var(--surface-soft);border:1px solid var(--line);border-radius:4px;padding:1px 4px;font-size:.9em}.markdown pre{white-space:pre-wrap}.markdown pre code{display:block;padding:10px}.markdown p{margin:4px 0}.markdown blockquote{border-left:3px solid var(--line);padding-left:12px;margin:8px 0;color:var(--muted)}.markdown ul,.markdown ol{padding-left:22px}.task-description{color:var(--muted);font-size:12px;max-height:64px;overflow:hidden;margin-top:5px}
#edit-description{width:100%;resize:vertical;min-height:110px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px;font:inherit}#description-preview,#title-preview{border:1px solid var(--line);padding:12px;margin-top:8px;border-radius:6px}#title-preview{font-weight:600}.attachment-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:8px 0}.attachment-row a{overflow-wrap:anywhere;color:var(--accent-ink)}#backup-status{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit}#backups-dialog{max-width:620px}
.task[data-task-id]{margin-left:calc(var(--task-depth,0)*24px)}
@media(max-width:700px){
  .task:not(.board-card){display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px 10px}
  .task[data-task-id]{grid-template-columns:16px 20px minmax(0,1fr);margin-left:min(calc(var(--task-depth,0)*20px),60px)}
  .task:not(.board-card) .task-actions{grid-column:-2/-1;flex-wrap:wrap;justify-content:flex-start}
  .task-drag{align-self:start;padding:0;font-size:18px}.task-drop-child::after{grid-column:-2/-1}
}

/* A non-interactive copy follows the pointer while the source keeps its place. */
.task.task-drag-preview{position:fixed;z-index:1000;margin:0;opacity:1;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:16px 12px;box-shadow:0 12px 32px #0005,0 2px 6px #0003;pointer-events:none;overflow:hidden}
.task-drag-preview *{pointer-events:none!important}.task-drag-preview .task-actions{visibility:hidden}.task-drag-preview .task-drag{opacity:0}
.task-drag-active,.task-drag-active *{cursor:grabbing!important;user-select:none!important}.task-drag-active .task.dragging{opacity:.2}

.backup-check-success{color:var(--accent-ink)}

.time-grid.one-day{grid-template-columns:70px minmax(0,1fr);min-width:0}

.one-day .calendar-day-heading{height:40px}
.one-day .calendar-all-day{position:sticky;top:40px;z-index:2;background:var(--surface-soft)}

.notes-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.notes-heading h2{margin:0;font-size:24px}.notes-list{display:grid;gap:8px}.note-card{width:100%;text-align:left;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);overflow-wrap:anywhere}.note-card:hover{background:var(--surface-soft)}
#note-dialog{width:min(900px,calc(100vw - 32px));max-width:900px;max-height:90dvh;overflow:auto}#note-body{width:100%;min-height:40vh;resize:vertical;font-family:ui-monospace,monospace;line-height:1.6}#note-preview{min-height:40vh;overflow-wrap:anywhere;padding:12px;border:1px solid var(--line);border-radius:6px}#note-preview pre{overflow:auto}#note-form .notes-heading{margin-top:16px}#note-form .notes-heading label{margin:0}

.note-heading-actions{display:flex;gap:8px;flex-shrink:0}#note-heading{overflow-wrap:anywhere;min-width:0}#note-preview-toggle svg{display:block;width:18px;height:18px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}#note-preview{border:0;padding:0;line-height:1.7}

/* Compact task layout switcher, shared by projects and built-in views. */
.view-switcher{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.view-switcher button{display:grid;place-items:center;width:32px;height:30px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--muted)}
.view-switcher button svg{width:18px;height:18px;pointer-events:none}
.view-switcher button:hover{background:var(--surface-soft);color:var(--text)}
.view-switcher button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.view-switcher button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}
.view-switcher:disabled button{opacity:.55;cursor:wait}

/* Desktop task editor: content on the left, placement and schedule on the right. */
@media(min-width:800px){
  #edit-dialog{width:min(940px,calc(100vw - 64px));padding:0;overflow:hidden}
  #edit-form{display:flex;flex-direction:column;max-height:calc(100dvh - 48px)}
  #edit-form>.dialog-heading{padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
  #edit-form .edit-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);grid-template-areas:"title placement" "description parent" "description schedule" "files schedule";gap:14px 24px;padding:18px 24px;overflow-y:auto;min-height:0}
  #edit-form .edit-fields>div{min-width:0}
  .edit-title-group{grid-area:title}.edit-placement-group{grid-area:placement}.edit-parent-group{grid-area:parent}.edit-description-group{grid-area:description}.edit-files-group{grid-area:files}.edit-schedule-group{grid-area:schedule}
  #edit-form label:not(.checkbox-label){margin:0 0 6px}
  #edit-form input:not([type=checkbox]),#edit-form select{padding:9px 10px;font-size:13px}
  #edit-form .form-grid{gap:10px}
  #edit-form .small{margin:6px 0;font-size:11px;line-height:1.45}
  #edit-form .checkbox-label{margin-top:12px}
  #edit-description{min-height:145px;height:170px;font-size:13px;line-height:1.5}
  #edit-form .channel-section{margin:0;padding:12px;border-radius:8px}
  #edit-form .channel-section summary{font-size:13px}
  #edit-form .channel-section label{margin-top:12px}
  #description-toggle{padding:7px 10px;font-size:11px}
  #edit-form>.dialog-actions{margin:0;padding:14px 24px;border-top:1px solid var(--line);background:var(--surface);flex-shrink:0}
  #edit-error:not(:empty){margin:0;padding:8px 24px;flex-shrink:0}
}