:root {
  color-scheme: dark;
  --bg: #0a0f1f;
  --sidebar-bg: #10172a;
  --surface: #121a2e;
  --surface-raised: #18223a;
  --surface-hover: #1d2946;
  --line: #2a3654;
  --line-soft: rgba(180, 193, 232, .09);
  --line-row: rgba(180, 193, 232, .14);
  --text: #edf0ff;
  --muted: #96a1c4;
  --quiet: #657196;
  --emerald: #15965f;
  --emerald-bright: #55d99b;
  --emerald-deep: #036338;
  --emerald-ink: #090d1c;
  --danger: #ff8c9d;
  --warning: #f3ba6f;
  --doing: #49c6e5;
  --doing-bright: #79def4;
  --priority-high: #f07474;
  --priority-medium: #f3ba6f;
  --priority-low: #72a7f5;
  --sidebar: 250px;
  --radius: 8px;
  --app-scale: 1.18;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button, input, textarea, select { font: inherit; }
button, summary { color: inherit; }
button, select, summary { cursor: pointer; }

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

::selection { background: rgba(37, 184, 120, .3); color: var(--text); }

.app-body {
  min-height: 100vh;
  overflow-x: hidden;
  zoom: var(--app-scale);
  background: radial-gradient(circle at 72% -15%, rgba(3, 99, 56, .16), transparent 38%), var(--bg);
  color: var(--text);
}

.workspace { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 14px;
  border-right: 1px solid var(--line-soft);
  background: var(--sidebar-bg);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
}

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 8px 14px; padding: 3px; border: 1px solid #283553; border-radius: 8px; background: #0c1325; }
.mode-tab { min-height: 28px; display: grid; place-items: center; border-radius: 5px; color: #727e9f; font-size: 10.5px; font-weight: 750; text-decoration: none; }
.mode-tab:hover { color: #cbd2e8; background: rgba(255, 255, 255, .035); }
.mode-tab.active { background: rgba(37, 184, 120, .14); color: #b8f3d6; }
.sidebar-mode-content { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.sidebar-mode-content[hidden] { display: none; }

.brand-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #55d99b, #036338);
  color: var(--emerald-ink);
  box-shadow: 0 8px 24px rgba(130, 106, 246, .2);
}
.brand-mark .icon { width: 16px; height: 16px; }
.brand-name { font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.brand-name small { margin-left: 3px; color: var(--quiet); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.sidebar-search {
  height: 34px;
  display: grid;
  grid-template-columns: 17px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
  color: var(--quiet);
}
.sidebar-search:focus-within { border-color: rgba(37, 184, 120, .5); color: var(--muted); }
.sidebar-search .icon { width: 15px; height: 15px; }
.sidebar-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px; }
.sidebar-search input::placeholder { color: #697496; }
.sidebar-search kbd { padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; color: var(--quiet); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }

.primary-nav { display: grid; gap: 1px; }
.nav-row {
  width: 100%;
  min-height: 35px;
  display: grid;
  grid-template-columns: 19px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: #a4acc8;
  text-align: left;
  font-size: 13px;
}
.nav-row:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.nav-row.active {
  color: #eeeaff;
  background: rgba(37, 184, 120, .13);
  box-shadow: inset 2px 0 0 var(--emerald);
}
.nav-row.active > .icon { color: var(--emerald-bright); }
.nav-row > .icon { width: 17px; height: 17px; color: #7681a4; }
.nav-count { color: var(--quiet); font-size: 11px; font-variant-numeric: tabular-nums; }

.lists-heading {
  padding: 20px 10px 8px;
  color: #697496;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.list-nav { min-height: 45px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #34415f transparent; }
.list-nav .nav-row { grid-template-columns: 19px 1fr auto 22px; }
.list-nav .nav-row > .icon { color: var(--list-color); }
.list-nav .nav-row.active { color: var(--list-color); background: color-mix(in srgb, var(--list-color) 16%, transparent); box-shadow: inset 3px 0 0 var(--list-color); }
.list-nav .nav-row.active .nav-count { color: var(--list-color); }
.list-link { min-width: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.edit-list { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: transparent; background: transparent; }
.edit-list .icon { width: 15px; height: 15px; }
.nav-row:hover .edit-list, .nav-row.active .edit-list { color: var(--quiet); }
.edit-list:hover { color: var(--text) !important; background: rgba(255, 255, 255, .07); }
.new-list-button {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--quiet);
  font-size: 12.5px;
}
.new-list-button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.new-list-button .icon { width: 16px; height: 16px; }
.notes-folders-heading { display: flex; align-items: center; justify-content: space-between; }
.tiny-icon-button { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #7480a2; }
.tiny-icon-button:hover { color: var(--text); background: rgba(255, 255, 255, .055); }
.tiny-icon-button .icon { width: 13px; height: 13px; }
.folder-tree { min-height: 45px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #34415f transparent; }
.folder-row { min-height: 33px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 7px; }
.folder-row.depth-2 { margin-left: 18px; }
.folder-row:hover { background: rgba(255, 255, 255, .035); }
.folder-row.active { background: rgba(37, 184, 120, .12); box-shadow: inset 2px 0 0 var(--emerald); }
.folder-link { min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 8px; border: 0; background: transparent; color: #a7b0cd; text-align: left; }
.folder-link .icon { width: 15px; height: 15px; color: var(--emerald); }
.folder-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { color: #657196; font-size: 10px; }
.folder-actions { display: flex; padding-right: 4px; opacity: 0; }
.folder-row:hover .folder-actions, .folder-row.active .folder-actions { opacity: 1; }
.folder-action { width: 21px; height: 21px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #7480a2; }
.folder-action:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.folder-action.danger:hover { color: var(--danger); }
.folder-action .icon { width: 12px; height: 12px; }

.icon-button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); }
.icon-button:hover { color: var(--text); background: rgba(255, 255, 255, .055); }
.icon-button .icon { width: 17px; height: 17px; }
.mobile-close, .menu-button, .sidebar-scrim { display: none; }

.task-main {
  grid-column: 2;
  width: min(1060px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 28px 72px;
  transition: width .22s ease;
}
.notes-main { grid-column: 2; width: 100%; min-height: 100vh; padding: 20px 28px 28px; }
.notes-main[hidden], .task-main[hidden] { display: none; }
.notes-account-menu { margin-left: auto; }
.notes-layout { height: calc(100vh - 76px); min-height: 520px; display: grid; grid-template-columns: 300px minmax(0, 1fr); margin-top: 16px; overflow: hidden; border: 1px solid #283553; border-radius: 12px; background: #0e1629; box-shadow: 0 20px 70px rgba(0, 0, 0, .2); }
.note-index-panel { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #283553; background: #10192d; }
.note-index-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.note-index-heading h2 { margin: 0; font-size: 16px; font-weight: 630; }
.note-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #435071 transparent; }
.note-list-item { width: 100%; display: block; padding: 11px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.note-list-item:hover { background: rgba(255, 255, 255, .035); }
.note-list-item.active { border-color: #226b50; background: rgba(37, 184, 120, .11); }
.note-list-item strong { display: block; overflow: hidden; color: #dfe4f6; font-size: 12.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.note-list-item p { min-height: 15px; margin: 4px 0 6px; overflow: hidden; color: #7e89aa; font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.note-list-item time { color: #5f6b8d; font-size: 9.5px; }
.note-list-empty { padding: 40px 16px; color: #657196; font-size: 11px; text-align: center; }
.note-editor-panel { min-width: 0; min-height: 0; background: #0c1426; }
.note-editor-empty { height: 100%; display: grid; align-content: center; justify-items: center; padding: 30px; color: #697496; text-align: center; }
.note-editor-empty > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #34415f; border-radius: 11px; color: var(--emerald); }
.note-editor-empty .icon { width: 20px; height: 20px; }
.note-editor-empty h2 { margin: 14px 0 4px; color: #cfd5e9; font-size: 17px; }
.note-editor-empty p { margin: 0; font-size: 11px; }
.note-editor-shell { height: 100%; display: flex; flex-direction: column; }
.note-editor-shell[hidden], .note-editor-empty[hidden] { display: none; }
.note-editor-header { min-height: 72px; display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.note-editor-header > input { min-width: 0; flex: 1 1 auto; padding: 5px 0; border: 0; outline: 0; background: transparent; color: #edf0ff; font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.note-editor-header > input::placeholder { color: #626d8e; }
.note-editor-actions { display: flex; align-items: center; gap: 6px; }
.note-location-wrap { position: relative; }
.note-location-button { min-height: 31px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #2e3a59; border-radius: 7px; background: #101a30; color: #9ba6c7; font-size: 10.5px; }
.note-location-button:hover { border-color: #4d597a; color: #d8dded; }
.note-location-button > .icon { width: 14px; height: 14px; color: var(--emerald); }
.note-location-button .caret { width: 11px; height: 11px; color: #687493; }
.note-location-menu { position: absolute; z-index: 12; top: 37px; right: 0; width: 220px; max-height: 280px; overflow-y: auto; padding: 5px; border: 1px solid #34415f; border-radius: 8px; background: #17213a; box-shadow: 0 18px 45px rgba(0, 0, 0, .42); }
.note-location-menu[hidden] { display: none; }
.note-location-choice { width: 100%; min-height: 31px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #aeb7d3; font-size: 11px; text-align: left; }
.note-location-choice.depth-2 { padding-left: 26px; }
.note-location-choice:hover, .note-location-choice.active { background: rgba(37, 184, 120, .11); color: #d6f6e7; }
.note-location-choice .icon { width: 14px; height: 14px; }
.note-delete:hover { color: var(--danger); }
.note-toolbar { min-height: 43px; display: flex; align-items: center; gap: 4px; padding: 6px 20px; border-bottom: 1px solid var(--line-soft); background: #0f182b; }
.note-toolbar button { min-width: 29px; height: 29px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: #8792b2; font-size: 10.5px; }
.note-toolbar button:hover { background: rgba(255, 255, 255, .055); color: #e0e4f3; }
.toolbar-divider { width: 1px; height: 18px; margin: 0 4px; background: #2c3856; }
.note-editor { flex: 1 1 auto; overflow-y: auto; padding: 34px clamp(28px, 8vw, 110px) 80px; outline: 0; color: #dfe4f3; font-size: 15px; line-height: 1.72; scrollbar-width: thin; scrollbar-color: #435071 transparent; }
.note-editor:empty::before { content: attr(data-placeholder); color: #606b8c; pointer-events: none; }
.note-editor h1, .note-editor h2, .note-editor h3 { color: #f0f2fb; line-height: 1.25; }
.note-editor h2 { margin-top: 1.7em; font-size: 24px; }
.note-editor blockquote { margin: 1.2em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--emerald); color: #aeb7d0; }
.note-editor pre { overflow-x: auto; padding: 14px; border: 1px solid #283653; border-radius: 7px; background: #08101e; }
.note-editor code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.note-editor a { color: #72a7f5; }
.note-editor-footer { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; border-top: 1px solid var(--line-soft); background: #0f182b; }
.encrypted-note-label { display: flex; align-items: center; gap: 6px; color: #627092; font-size: 9.5px; }
.encrypted-note-label .icon { width: 12px; height: 12px; color: #5dd6b8; }
.note-back { display: none; }

.topbar { display: flex; align-items: center; gap: 13px; min-height: 36px; }
.view-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.view-heading h1 { margin: 0; overflow: hidden; color: var(--text); font-size: 20px; font-weight: 620; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.open-total { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .055); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sort-control { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--quiet); font-size: 12px; }
.sort-control[hidden] { display: none; }
.sort-control select { padding: 4px 20px 4px 3px; border: 0; outline: 0; background: var(--bg); color: #aeb6d3; }
.sort-control[hidden] + .account-menu { margin-left: auto; }

.account-menu { position: relative; }
.account-menu summary { display: grid; place-items: center; list-style: none; border-radius: 50%; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.account-avatar.fallback { display: grid; place-items: center; background: linear-gradient(135deg, #55d99b, #036338); color: var(--emerald-ink); font-size: 11px; font-weight: 800; }
.account-popover { position: absolute; z-index: 25; top: 39px; right: 0; width: 220px; display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); box-shadow: 0 22px 60px rgba(0, 0, 0, .42); }
.account-popover strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.account-popover > span { overflow: hidden; color: var(--quiet); font-size: 10.5px; text-overflow: ellipsis; }
.account-popover form { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.account-popover button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px; border: 0; border-radius: 6px; background: transparent; color: #aeb6d3; font-size: 12px; text-align: left; }
.account-popover button:hover { background: rgba(255, 255, 255, .045); color: var(--text); }
.account-popover .icon { width: 15px; height: 15px; }

.quick-section { padding: 16px 0 6px; }
.quick-form {
  position: relative;
  min-height: 50px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 0 8px 0 15px;
  border: 1px solid #2b3857;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .14);
}
.quick-form:focus-within { border-color: rgba(37, 184, 120, .72); box-shadow: 0 0 0 3px rgba(37, 184, 120, .1); }
.quick-form.list-context { border-color: color-mix(in srgb, var(--context-color) 48%, #2b3857); box-shadow: 0 8px 30px rgba(0, 0, 0, .14), inset 3px 0 0 var(--context-color); }
.quick-form.list-context:focus-within { border-color: var(--context-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--context-color) 14%, transparent); }
.quick-form.list-context .quick-plus { color: var(--context-color); }
.quick-plus { width: 18px; height: 18px; color: var(--emerald); }
.quick-form input { min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.quick-form input::placeholder { color: #697496; }
.quick-form > button { width: 36px; min-width: 36px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(37, 184, 120, .58); border-radius: 6px; background: rgba(37, 184, 120, .07); color: var(--emerald-bright); }
.quick-form > button:hover { background: rgba(37, 184, 120, .14); }
.enter-glyph { display: block; font: 16px/1 ui-monospace, SFMono-Regular, Consolas, monospace; transform: translateY(-1px); }
.quick-help { margin: 7px 3px 0; color: #5f6a8e; font: 10.5px ui-monospace, SFMono-Regular, Consolas, monospace; }
.quick-help kbd { color: #8994b8; font: inherit; }
.quick-help .pin-help { margin-left: 16px; }
.pinned-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 3px 0; }
.pinned-rules[hidden] { display: none; }
.pinned-rules::before { margin-right: 2px; content: "Pinned"; color: #9ca7c8; font-size: 10.5px; font-weight: 750; }
.pinned-rules.pin-animate { animation: pin-area-in .24s ease-out both; }
.pinned-rules.pin-animate .pinned-rule { animation: pin-rule-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.pinned-rules.pin-animate .pinned-rule:nth-of-type(2) { animation-delay: 45ms; }
.pinned-rules.pin-animate .pinned-rule:nth-of-type(3) { animation-delay: 90ms; }
.pinned-rule { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 5px; border: 1px solid currentColor; border-radius: 8px; font-size: 10.5px; font-weight: 650; }
.pinned-rule > .icon { width: 20px; height: 20px; padding: 3px; border-radius: 5px; background: color-mix(in srgb, currentColor 16%, transparent); }
.pinned-rule button { width: 19px; height: 19px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #717da0; }
.pinned-rule button:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.pinned-rule button .icon { width: 10px; height: 10px; }
.pinned-list { border-color: color-mix(in srgb, var(--pin-color) 58%, transparent); background: color-mix(in srgb, var(--pin-color) 18%, transparent); color: var(--pin-color); }
.pinned-list > .icon { background: color-mix(in srgb, var(--pin-color) 22%, transparent); }
.pinned-priority.priority-1 { border-color: rgba(240, 116, 116, .58); background: rgba(240, 116, 116, .15); color: var(--priority-high); }
.pinned-priority.priority-2 { border-color: rgba(243, 186, 111, .58); background: rgba(243, 186, 111, .15); color: var(--priority-medium); }
.pinned-priority.priority-3 { border-color: rgba(114, 167, 245, .58); background: rgba(114, 167, 245, .15); color: var(--priority-low); }
.pinned-due.due-today { border-color: rgba(85, 203, 232, .58); background: rgba(85, 203, 232, .15); color: #55cbe8; }
.pinned-due.due-tomorrow { border-color: rgba(93, 214, 184, .58); background: rgba(93, 214, 184, .15); color: #5dd6b8; }
.pinned-due.due-soon { border-color: rgba(119, 196, 255, .58); background: rgba(119, 196, 255, .15); color: #77c4ff; }
.pinned-due.overdue { border-color: rgba(240, 116, 116, .58); background: rgba(240, 116, 116, .15); color: #f07474; }
.pinned-due.due-future { border-color: rgba(114, 167, 245, .58); background: rgba(114, 167, 245, .15); color: #72a7f5; }
.pinned-time { border-color: rgba(85, 203, 232, .5); background: rgba(85, 203, 232, .12); color: #6edcf3; }
@keyframes pin-area-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pin-rule-in { from { opacity: 0; transform: translateY(-5px) scale(.94); } to { opacity: 1; transform: none; } }
.quick-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px 3px 0; color: var(--muted); font-size: 11px; }
.quick-preview::before { content: "Adds:"; color: #7883a8; }
.preview-chip { display: inline-flex; align-items: center; gap: 5px; }
.preview-chip + .preview-chip::before { margin-right: 2px; content: "·"; color: #465271; }
.preview-priority.priority-1 { color: var(--priority-high); }
.preview-priority.priority-2 { color: var(--priority-medium); }
.preview-priority.priority-3 { color: var(--priority-low); }
.list-suggestions { position: absolute; z-index: 15; top: 55px; left: 35px; width: min(290px, calc(100% - 44px)); max-height: 245px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); box-shadow: 0 22px 55px rgba(0, 0, 0, .42); scrollbar-width: thin; scrollbar-color: #435071 transparent; }
.suggestion { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #ccd2e8; text-align: left; }
.suggestion:hover, .suggestion.selected { background: var(--surface-hover); color: var(--text); }
.suggestion .icon { width: 16px; height: 16px; color: var(--list-color, var(--emerald)); }

.task-content { margin-top: 5px; border-top: 1px solid var(--line-soft); }
.loading-row { padding: 26px 1px; color: var(--quiet); font-size: 12px; }
.task-list { display: grid; }
.task-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 19px 2px 7px 12px;
  color: #697496;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.task-group-heading:first-child { padding-top: 7px; }
.task-group-heading span {
  color: #58627f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.task-group-heading.group-overdue { color: #f08a8a; }
.task-group-heading.group-today { color: #6edcf3; }
.task-group-heading.group-list { color: #8994b5; }
.task-group-heading.group-list .icon { width: 13px; height: 13px; }
.task-group-heading.group-list strong { overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.task-group-heading.group-done { color: #8be5ce; }
.task-group-heading.group-canceled { color: #d8899a; }
.task-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(180px, 1fr) 94px 108px 78px 136px 96px 25px;
  align-items: center;
  gap: 8px;
  padding: 5px 2px 5px 9px;
  border-bottom: 1px solid var(--line-row);
  border-left: 3px solid var(--list-color, transparent);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .14s ease;
}
.task-row:hover { background: rgba(255, 255, 255, .025); }
.task-row.doing { background: linear-gradient(90deg, rgba(73, 198, 229, .1), rgba(73, 198, 229, 0) 48%); }
.task-row.doing:hover { background: linear-gradient(90deg, rgba(73, 198, 229, .15), rgba(255, 255, 255, .025) 58%); }
.task-row.done > :not(.task-status-menu) { opacity: .52; }
.task-row.canceled > :not(.task-status-menu) { opacity: .48; }
.task-row.starts-later:not(.done):not(.canceled) > :not(.task-status-menu) { opacity: .62; }
.task-row.starts-later:not(.done):not(.canceled) .task-title { color: #aeb6cf; }
.task-row.done .task-title { text-decoration: line-through; text-decoration-color: #697496; }
.task-row.canceled .task-title { text-decoration: line-through; text-decoration-color: #aa6776; }
.task-check { width: 19px; height: 19px; display: grid; place-items: center; padding: 0; border: 1.5px solid #5d698c; border-radius: 50%; background: transparent; color: transparent; }
.task-check:hover { border-color: var(--emerald); }
.task-check:disabled { border-color: #46516c; opacity: .52; cursor: not-allowed; }
.task-row.priority-high .task-check { border-color: var(--priority-high); }
.task-row.priority-medium .task-check { border-color: var(--priority-medium); }
.task-row.doing .task-check { border-color: var(--doing); box-shadow: 0 0 0 3px rgba(73, 198, 229, .09); }
.task-row.done .task-check { border-color: var(--emerald); background: var(--emerald); color: var(--emerald-ink); }
.task-check .icon { width: 11px; height: 11px; }
.task-primary { min-width: 0; }
.task-title-line { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.task-title { min-width: 0; margin: 0; overflow: hidden; color: #e1e5f5; font-size: 13px; font-weight: 530; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.task-row.doing .task-title { color: #e9fbff; }
.task-note { flex: 0 0 auto; display: inline-flex; color: #707b9f; }
.task-note .icon { width: 12px; height: 12px; }
.task-start-indicator { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: #7885a8; font-size: 10px; white-space: nowrap; }
.task-start-indicator .icon { width: 12px; height: 12px; }
.task-list-meta, .task-priority, .task-due, .task-progress { min-width: 0; display: flex; align-items: center; gap: 5px; color: #808bad; font-size: 11px; white-space: nowrap; }
.task-list-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-dot { width: 8px; height: 8px; display: block; flex: 0 0 auto; }
.task-priority .icon, .task-due .icon { width: 13px; height: 13px; }
.task-priority.priority-1 { color: var(--priority-high); }
.task-priority.priority-2 { color: var(--priority-medium); }
.task-priority.priority-3 { color: var(--priority-low); }
.task-due { overflow: hidden; color: #82a9e8; text-overflow: ellipsis; }
.task-due.due-today { padding: 3px 7px; border: 1px solid rgba(85, 203, 232, .38); border-radius: 6px; background: rgba(85, 203, 232, .09); color: #6edcf3; }
.task-due.due-tomorrow { color: #69d8bb; }
.task-due.due-soon { color: #77c4ff; }
.task-due.overdue { padding: 3px 7px; border: 1px solid rgba(240, 116, 116, .36); border-radius: 6px; background: rgba(240, 116, 116, .08); color: #f08a8a; }
.task-progress { justify-content: flex-end; gap: 7px; font-variant-numeric: tabular-nums; }
.progress-track { width: 58px; height: 5px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: #293552; }
.progress-track::-webkit-progress-bar { border-radius: 999px; background: #293552; }
.progress-track::-webkit-progress-value { border-radius: 999px; background: var(--emerald); }
.progress-track::-moz-progress-bar { border-radius: 999px; background: var(--emerald); }
.task-progress-label { width: 31px; text-align: right; }
.task-status-menu { position: relative; left: -6px; width: 78px; min-width: 0; justify-self: start; margin-right: 14px; }
.task-status-menu[open] { z-index: 18; }
.task-status-menu.locked { opacity: .52; cursor: not-allowed; }
.task-status-menu.locked .task-status-summary { grid-template-columns: 11px minmax(0, 1fr); cursor: not-allowed; }
.task-status-menu.locked .task-status-summary:hover { filter: none; }
.task-status-summary { min-height: 24px; display: grid; grid-template-columns: 11px minmax(0, 1fr) 9px; align-items: center; gap: 4px; padding: 2px 5px; border: 1px solid #39445f; border-radius: 5px; background: #151d30; color: #8d97b4; font-size: 9.5px; font-weight: 700; list-style: none; cursor: pointer; }
.task-status-summary::-webkit-details-marker { display: none; }
.task-status-summary::marker { content: ""; }
.task-status-summary > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-status-summary > .icon { width: 9px; height: 9px; color: currentColor; transition: transform .15s ease; }
.task-status-menu[open] .task-status-summary > .icon { transform: rotate(180deg); }
.status-todo .task-status-summary { border-color: #3a455f; background: #151c2c; color: #858fa9; }
.status-doing .task-status-summary { border-color: rgba(73, 198, 229, .5); background: rgba(73, 198, 229, .13); color: var(--doing-bright); }
.status-done .task-status-summary { border-color: rgba(93, 214, 184, .42); background: rgba(93, 214, 184, .1); color: #79ddc4; }
.status-canceled .task-status-summary { border-color: rgba(255, 140, 157, .4); background: rgba(255, 140, 157, .09); color: #e795a3; }
.task-status-summary:hover { filter: brightness(1.16); }
.task-status-options { position: absolute; top: calc(100% + 4px); left: 0; width: 116px; display: grid; gap: 1px; padding: 4px; border: 1px solid #3a4665; border-radius: 7px; background: #18223a; box-shadow: 0 16px 38px rgba(0, 0, 0, .44); transform-origin: top; }
.task-status-menu[open] .task-status-options { animation: status-menu-reveal .17s cubic-bezier(.2, .78, .25, 1); }
@keyframes status-menu-reveal {
  from { opacity: 0; transform: translateY(-5px) scaleY(.82); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}
.task-status-option { min-height: 27px; display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 6px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: #a5afca; font-size: 10px; text-align: left; }
.task-status-option:hover { background: rgba(255, 255, 255, .055); color: #edf0ff; }
.task-status-option.option-todo.selected { background: rgba(125, 136, 167, .12); color: #b6bfd7; }
.task-status-option.option-doing.selected { background: rgba(73, 198, 229, .12); color: var(--doing-bright); }
.task-status-option.option-done.selected { background: rgba(93, 214, 184, .11); color: #8be5ce; }
.task-status-option.option-canceled.selected { background: rgba(223, 130, 147, .11); color: #efa0ae; }
.status-icon { width: 12px; height: 12px; display: grid; place-items: center; color: #7d88a7; }
.status-icon .icon { width: 11px; height: 11px; }
.status-icon.doing { color: var(--doing-bright); }
.status-icon.done { color: #5dd6b8; }
.status-icon.canceled { color: #df8293; }
.task-open { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #596587; }
.task-open:hover { color: var(--text); background: rgba(255, 255, 255, .055); }
.task-open .icon { width: 14px; height: 14px; }
.empty-state { padding: 74px 20px; text-align: center; }
.empty-check { width: 39px; height: 39px; display: grid; place-items: center; margin: auto; border: 1px solid #245f49; border-radius: 11px; color: var(--emerald); }
.empty-check .icon { width: 18px; height: 18px; }
.empty-state h2 { margin: 15px 0 5px; font-size: 18px; font-weight: 620; }
.empty-state p { margin: 0; color: var(--quiet); font-size: 11.5px; }

.modal { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid #34415f; border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, .65); }
.modal::backdrop { background: rgba(4, 7, 18, .8); backdrop-filter: blur(4px); }
.modal form { padding: 22px; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.list-modal .modal-heading { align-items: center; margin-bottom: 10px; }
.list-modal .section-label { margin: 0; font-size: 10px; }
.section-label { margin: 0 0 4px; color: var(--emerald); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.modal-heading h2 { margin: 0; font-size: 20px; font-weight: 620; letter-spacing: -.025em; }
.modal label, .modal legend { display: block; margin: 14px 0 6px; color: #9aa5c8; font-size: 10.5px; font-weight: 700; }
.modal input:not([type="range"]), .modal textarea, .modal select { width: 100%; padding: 10px 11px; border: 1px solid #2c3958; border-radius: 7px; outline: 0; background: #0c1224; color: var(--text); }
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: rgba(37, 184, 120, .68); box-shadow: 0 0 0 3px rgba(37, 184, 120, .08); }
.modal textarea { resize: vertical; line-height: 1.5; }
.modal fieldset { margin: 17px 0 0; padding: 0; border: 0; }
.icon-picker { max-height: 250px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #435071 transparent; }
.icon-choice { aspect-ratio: 1; min-height: 42px; display: grid; place-items: center; border: 1px solid #293653; border-radius: 8px; background: #0d1427; color: #8994b7; }
.icon-choice:hover { border-color: #5e568d; color: #e0dcff; }
.icon-choice.selected { border-color: var(--emerald); background: rgba(37, 184, 120, .1); color: var(--emerald-bright); }
.icon-choice .icon { width: 19px; height: 19px; }
.color-custom { display: grid; grid-template-columns: 52px 1fr; align-items: start; gap: 10px; }
.modal .color-custom input[type="color"] { width: 52px; height: 42px; padding: 3px; cursor: pointer; }
.modal .color-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.modal .color-custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.color-custom > div { min-width: 0; }

.drawer-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(5, 8, 20, .28); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.task-drawer { position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(430px, 100vw); border-left: 1px solid #33415f; background: #10182b; color: var(--text); box-shadow: -24px 0 70px rgba(0, 0, 0, .28); transform: translateX(102%); transition: transform .22s ease; }
.task-drawer.open { transform: none; }
.task-drawer:focus { outline: none; }
.task-drawer form { height: 100%; display: flex; flex-direction: column; }
.task-drawer-titlebar { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 8px 22px; }
.task-title-editor { min-width: 0; flex: 1 1 auto; }
.task-title-editor label { display: block; margin: 0 0 6px; color: #9aa5c8; font-size: 10.5px; font-weight: 720; }
.task-title-editor input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #2c3958; border-radius: 8px; outline: 0; background: #0c1224; color: var(--text); font-size: 12px; font-weight: 540; line-height: 1.35; }
.task-title-editor input:focus { border-color: rgba(37, 184, 120, .7); color: #fff; box-shadow: 0 0 0 3px rgba(37, 184, 120, .08); }
.task-title-editor p { margin: 4px 0 0; color: #717c9d; font-size: 10px; font-variant-numeric: tabular-nums; }
.task-drawer-titlebar > .icon-button { flex: 0 0 auto; margin-top: -2px; }
.drawer-fields { flex: 1 1 auto; overflow-y: auto; padding: 0 22px 24px; scrollbar-width: thin; scrollbar-color: #435071 transparent; }
.drawer-fields legend, .date-grid label, .task-description-field label { display: block; margin: 13px 0 6px; color: #9aa5c8; font-size: 10.5px; font-weight: 720; }
.drawer-fields textarea, .date-grid input { width: 100%; border: 1px solid #2c3958; border-radius: 8px; outline: 0; background: #0c1224; color: var(--text); }
.drawer-fields textarea:focus, .date-grid input:focus { border-color: rgba(37, 184, 120, .7); box-shadow: 0 0 0 3px rgba(37, 184, 120, .08); }
.drawer-fields textarea { padding: 11px 12px; resize: vertical; line-height: 1.5; }
.task-description-field textarea::placeholder { color: #657196; font-size: 10.5px; }
.date-grid input { min-height: 34px; padding: 7px 9px; border-radius: 7px; font-size: 11px; }
.task-description-field { margin-top: 17px; }
.task-description-field label { margin-top: 0; }
.drawer-fieldset { margin: 0; padding: 0; border: 0; }
.task-list-select { position: relative; }
.task-list-dropdown { position: relative; }
.task-list-dropdown[open] { z-index: 20; }
.task-list-dropdown > summary { min-height: 36px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 12px; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid #2a3754; border-radius: 8px; background: #0d1427; color: #b5bdd5; font-size: 11px; list-style: none; }
.task-list-dropdown > summary::-webkit-details-marker { display: none; }
.task-list-dropdown > summary::marker { content: ""; }
.task-list-dropdown > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list-dropdown > summary > .icon { width: 12px; height: 12px; color: #697596; transition: transform .15s ease; }
.task-list-dropdown[open] > summary > .icon { transform: rotate(180deg); }
.task-list-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; display: grid; gap: 2px; padding: 5px; border: 1px solid #35415f; border-radius: 8px; background: #17213a; box-shadow: 0 18px 42px rgba(0, 0, 0, .44); }
.task-list-option { min-height: 31px; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 9px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #aab3cc; font-size: 10.5px; text-align: left; }
.task-list-option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list-option:hover { background: rgba(255, 255, 255, .05); color: #edf0ff; }
.task-list-option.selected { background: color-mix(in srgb, var(--option-color) 14%, transparent); color: var(--option-color); }
.segmented-control { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.segmented-control button { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 7px; border: 1px solid #2a3754; border-radius: 7px; background: #0d1427; color: #8994b7; font-size: 10.5px; }
.segmented-control button:hover { border-color: #4b5879; color: var(--text); }
.segmented-control button.selected { border-color: var(--emerald); background: rgba(37, 184, 120, .1); color: #e8fff4; }
.segmented-control [data-status="todo"].selected { border-color: #5f6b89; background: rgba(125, 136, 167, .1); color: #c5ccdf; }
.segmented-control [data-status="doing"].selected { border-color: var(--doing); background: rgba(73, 198, 229, .12); color: #dffaff; }
.segmented-control [data-status="done"].selected { border-color: #5dd6b8; background: rgba(93, 214, 184, .1); color: #a0ecd9; }
.segmented-control [data-status="canceled"].selected { border-color: #df8293; background: rgba(223, 130, 147, .1); color: #f0a7b4; }
.task-schedule { margin-top: 0; }
.task-schedule .date-grid > div:first-child > label { margin-top: 10px; }
.all-day-control { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: #aab3cf; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.all-day-control input { width: 18px; height: 18px; margin: 0; accent-color: var(--emerald); cursor: pointer; }
.all-day-control input:focus-visible { outline: 2px solid var(--emerald-bright); outline-offset: 2px; }
.date-grid { display: grid; grid-template-columns: 1fr; gap: 3px; }
.date-time-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 7px; }
.task-schedule.all-day .date-time-inputs { grid-template-columns: 1fr; }
.priority-control { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.priority-control button { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid #2a3754; border-radius: 7px; background: #0d1427; color: #8994b7; font-size: 10.5px; }
.priority-control button:hover { border-color: #4b5879; color: var(--text); }
.priority-control button.selected { border-color: var(--emerald); background: rgba(37, 184, 120, .1); color: #e8fff4; }
.priority-control [data-priority=""].selected { border-color: #3d4964; background: rgba(125, 136, 167, .055); color: #a4adc5; box-shadow: none; }
.priority-control [data-priority=""].selected:focus-visible { outline: 1px solid #5b6680; outline-offset: 1px; }
.priority-control [data-priority="1"].selected { border-color: var(--priority-high); background: rgba(240, 116, 116, .12); color: #ffc0c0; }
.priority-control [data-priority="2"].selected { border-color: var(--priority-medium); background: rgba(243, 186, 111, .12); color: #ffe0ad; }
.priority-control [data-priority="3"].selected { border-color: var(--priority-low); background: rgba(114, 167, 245, .12); color: #bed7ff; }
.priority-control .icon { width: 12px; height: 12px; }
.priority-control [data-priority="1"] .icon { color: var(--priority-high); }
.priority-control [data-priority="2"] .icon { color: var(--priority-medium); }
.priority-control [data-priority="3"] .icon { color: var(--priority-low); }
.progress-field { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 7px 10px; }
.progress-field > label { grid-column: 1 / -1; margin: 0; color: #aab3cf; font-size: 10.5px; font-weight: 720; }
.progress-field > output { min-width: 42px; padding: 3px 6px; border-radius: 6px; background: rgba(37, 184, 120, .12); color: var(--emerald-bright); font-size: 10px; font-weight: 720; text-align: center; font-variant-numeric: tabular-nums; }
.progress-field input[type="range"] { width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; }
.progress-field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #2a3754; }
.progress-field input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; appearance: none; border: 3px solid #11192c; border-radius: 50%; background: var(--emerald-bright); box-shadow: 0 0 0 1px var(--emerald), 0 0 14px rgba(37, 184, 120, .34); }
.progress-field input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #2a3754; }
.progress-field input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #11192c; border-radius: 50%; background: var(--emerald-bright); box-shadow: 0 0 0 1px var(--emerald); }
.drawer-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--line-soft); background: #10182b; }
.drawer-actions > div { display: flex; gap: 8px; }
.drawer-save-actions { align-items: center; }
.save-status { min-width: 54px; color: #7984a5; font-size: 10.5px; text-align: right; }
.save-status.error { color: var(--danger); }
.task-drawer .form-error { margin: 0; padding: 0 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.modal-actions.split { justify-content: space-between; }
.modal-actions > div { display: flex; gap: 8px; }
.caldav-modal { width: min(610px, calc(100vw - 28px)); }
.caldav-dialog-body { padding: 22px; }
.caldav-dialog-body .section-label { margin: 0 0 5px; }
.caldav-intro { margin: -7px 0 17px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.caldav-server-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #2c3958; border-radius: 8px; background: #0c1224; }
.caldav-server-row > div { min-width: 0; flex: 1; display: grid; gap: 4px; }
.caldav-server-row span, .caldav-secret-row > span { color: var(--quiet); font-size: 9.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.caldav-server-row code, .caldav-secret-row code { min-width: 0; overflow: hidden; color: #cbd4ec; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.caldav-server-row .button { flex: 0 0 auto; padding: 7px 10px; }
.caldav-created { margin-top: 12px; padding: 12px; border: 1px solid rgba(37, 184, 120, .45); border-radius: 8px; background: rgba(3, 99, 56, .16); }
.caldav-created > strong { color: #a9efd0; font-size: 12px; }
.caldav-created > p { margin: 3px 0 10px; color: #7fae99; font-size: 10.5px; }
.caldav-secret-row { min-height: 31px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(180, 193, 232, .09); }
.caldav-secret-row button { padding: 3px 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .06); color: #b8c1d9; font-size: 9.5px; }
.caldav-key-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 7px; }
.caldav-key-heading > div { display: grid; gap: 2px; }
.caldav-key-heading strong { font-size: 11.5px; }
.caldav-key-heading span { color: var(--quiet); font-size: 10px; }
.caldav-key-list { display: grid; border: 1px solid #293653; border-radius: 8px; overflow: hidden; }
.caldav-key-empty { padding: 13px; color: var(--quiet); font-size: 11px; text-align: center; }
.caldav-key-row { min-height: 47px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); background: #0e1628; }
.caldav-key-row:last-child { border-bottom: 0; }
.caldav-key-row > div { min-width: 0; display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 2px 9px; align-items: baseline; }
.caldav-key-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.caldav-key-row code { color: #7f8baa; font: 9.5px ui-monospace, SFMono-Regular, Consolas, monospace; }
.caldav-key-row span { grid-column: 1 / -1; color: #5f6d90; font-size: 9.5px; }
.caldav-key-row button { padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: #d58a99; font-size: 10px; }
.caldav-key-row button:hover { background: rgba(255, 140, 157, .08); color: #ffadba; }
.modal .caldav-create-form { margin-top: 12px; padding: 0; }
.caldav-create-form label { margin-top: 0; }
.caldav-create-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.caldav-create-form .button { white-space: nowrap; }
.button { min-height: 37px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 11.5px; font-weight: 720; }
.button.primary { border-color: var(--emerald); color: var(--emerald-bright); }
.button.primary:hover { background: rgba(37, 184, 120, .1); }
.button.ghost { background: rgba(255, 255, 255, .045); color: #b3bbd6; }
.button.danger { color: var(--danger); }
.list-delete[hidden] { display: none; }
.button .icon { width: 14px; height: 14px; }
.hold-delete { position: relative; overflow: hidden; isolation: isolate; user-select: none; touch-action: none; }
.hold-delete > :not(.hold-delete-fill) { position: relative; z-index: 1; }
.hold-delete-fill { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 0; background: rgba(255, 140, 157, .22); pointer-events: none; }
.hold-delete.holding .hold-delete-fill { animation: delete-hold-fill 1s linear forwards; }
.hold-delete.deleting .hold-delete-fill { width: 100%; }
@keyframes delete-hold-fill {
  from { width: 0; }
  to { width: 100%; }
}
.form-error { min-height: 16px; margin: 11px 0 0; color: var(--danger); font-size: 11px; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 44px)); padding: 10px 13px; border: 1px solid #267558; border-radius: 8px; background: #10271f; color: #d9f7e8; font-size: 11.5px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: none; }
.toast.error { border-color: #704040; background: #2b1717; color: #ffd4d4; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.login-body { min-height: 100vh; display: grid; place-items: center; margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.login-state { display: grid; justify-items: center; padding: 30px; text-align: center; }
.login-brand { margin-top: 13px; color: var(--emerald); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.login-state h1 { margin: 20px 0 5px; font-size: 22px; letter-spacing: -.03em; }
.login-state p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.login-state a { color: var(--emerald); font-size: 12px; text-decoration: none; }
.login-state .login-button { padding: 9px 14px; border: 1px solid var(--emerald); border-radius: 7px; color: var(--emerald-bright); font-weight: 750; }
.login-state .brand-mark { width: 38px; height: 38px; }
.error-mark { background: #3a2020; color: var(--danger); }

@media (min-width: 1260px) {
  .drawer-scrim { display: none; }
  .app-body.drawer-open .task-main { width: min(1060px, calc(100% - 430px)); margin: 0; }
  .app-body.drawer-open .task-row { grid-template-columns: 22px minmax(110px, 1fr) 82px minmax(66px, 84px) 64px 124px 72px 25px; gap: 6px; }
  .app-body.drawer-open .task-status-menu { margin-right: 4px; }
  .app-body.drawer-open .task-list-meta,
  .app-body.drawer-open .task-priority,
  .app-body.drawer-open .task-due { display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-body.drawer-open .task-progress { display: flex; gap: 5px; }
  .app-body.drawer-open .progress-track { width: 38px; }
}

@media (max-width: 1120px) {
  .task-row { grid-template-columns: 22px minmax(160px, 1fr) 94px 72px 132px 86px 25px; }
  .task-list-meta { display: none; }
}

@media (max-width: 900px) {
  .task-row { grid-template-columns: 22px minmax(130px, 1fr) 94px 132px 84px 25px; }
  .task-priority { display: none; }
  .notes-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .note-editor { padding-inline: 34px; }
}

@media (max-width: 760px) {
  :root { --sidebar: 270px; }
  .workspace { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: none; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 15; display: block; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .mobile-close { display: grid; margin-left: auto; }
  .menu-button { display: grid; flex: 0 0 auto; }
  .task-main { width: 100%; padding: 16px 16px 60px; }
  .notes-main { width: 100%; padding: 16px; }
  .notes-layout { height: calc(100vh - 68px); min-height: 480px; display: block; margin-top: 10px; }
  .note-index-panel, .note-editor-panel { height: 100%; border: 0; }
  .notes-layout:not(.editor-open) .note-editor-panel { display: none; }
  .notes-layout.editor-open .note-index-panel { display: none; }
  .note-back { display: grid; flex: 0 0 auto; }
  .note-back .icon { transform: rotate(180deg); }
  .note-editor-header { padding-inline: 12px; }
  .note-editor-header > input { font-size: 18px; }
  .note-location-button > span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-toolbar { overflow-x: auto; padding-inline: 12px; }
  .note-editor { padding: 24px 20px 70px; }
  .view-heading { gap: 7px; }
  .view-heading h1 { font-size: 18px; }
  .sort-control { display: none; }
  .account-menu { margin-left: auto; }
  .quick-section { padding-top: 14px; }
  .quick-form { padding-left: 12px; }
  .quick-form > button { min-width: 34px; width: 34px; }
  .quick-help { display: none; }
  .task-content { margin-top: 10px; }
  .task-row { grid-template-columns: 22px minmax(0, 1fr) 88px 78px 25px; gap: 7px; padding: 7px 2px 7px 9px; }
  .task-status-menu { margin-right: 6px; }
  .task-list-meta, .task-priority, .task-due { display: none; }
  .task-group-heading { padding: 15px 2px 6px 12px; }
  .task-progress { gap: 5px; }
  .progress-track { width: 38px; }
  .task-title { white-space: nowrap; }
  .icon-picker { grid-template-columns: repeat(6, 1fr); }
  .task-drawer { width: 100%; }
  .date-time-inputs { grid-template-columns: minmax(0, 1fr) 104px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}