:root {
  color-scheme:light dark;
  --page:#fff;
  --sidebar:#f2f2f7;
  --card:#fff;
  --text:#1c1c1e;
  --secondary:#8e8e93;
  --muted:#636366;
  --line:#e5e5ea;
  --blue:#007aff;
  --orange:#ff9500;
  --red:#ff3b30;
  --green:#34c759;
  --control:#e8e8ed;
  --selection:#e5f0ff;
  --hover:#f6f6f8;
  --shadow:0 24px 100px #0003;
  --accent:var(--blue);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  color:var(--text);
  background:var(--page);
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit;
  color:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  border:0;
  background:none;
  cursor:pointer;
  padding:0
}
button:disabled {
  cursor:default;
  opacity:.45
}
input,textarea,select {
  min-width:0
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid color-mix(in srgb,var(--blue),transparent 30%);
  outline-offset:3px
}
a {
  color:var(--blue)
}
button svg {
  pointer-events:none
}
.icon {
  width:20px;
  height:20px;
  vertical-align:middle;
  flex:none;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.app {
  display:grid;
  grid-template-columns:284px minmax(0,1fr);
  height:100dvh;
  min-height:320px
}
#sidebar {
  background:var(--sidebar);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
  padding:max(20px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
  position:relative
}
.sidebar-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:28px;
  margin:0 0 14px;
  padding:0 1px
}
.brand {
  font-size:13px;
  font-weight:600;
  color:var(--muted)
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  border-radius:8px;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--control)
}
.search {
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:8px;
  background:color-mix(in srgb,var(--secondary),transparent 87%);
  padding:7px 10px;
  margin:0 0 20px;
  color:var(--secondary)
}
.search .icon {
  width:16px;
  height:16px
}
.search input {
  width:100%;
  padding:0;
  border:0;
  outline:none;
  background:none;
  font-size:14px;
  line-height:20px
}
.search input::placeholder {
  color:var(--secondary)
}
.search:focus-within {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue),transparent 70%)
}
.smart-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:25px
}
.smart-tile {
  display:flex;
  flex-direction:column;
  text-align:left;
  border-radius:10px;
  background:var(--card);
  padding:10px 11px;
  min-height:83px
}
.smart-tile.selected {
  background:var(--tile-color);
  color:#fff
}
.tile-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px
}
.tile-icon {
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tile-color);
  color:#fff
}
.tile-icon .icon {
  width:18px;
  height:18px
}
.smart-tile.selected .tile-icon {
  background:#fff;
  color:var(--tile-color)
}
.tile-count {
  font-size:25px;
  line-height:28px;
  font-weight:700;
  letter-spacing:-1px
}
.tile-label {
  font-weight:600;
  color:var(--muted);
  font-size:13px
}
.smart-tile.selected .tile-label {
  color:#fff
}
.section-label {
  font-size:12px;
  font-weight:600;
  color:var(--secondary);
  margin:0 9px 8px
}
.list-nav {
  display:flex;
  flex-direction:column;
  gap:2px
}
.list-link {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:7px;
  min-height:42px
}
.list-link:hover {
  background:var(--control)
}
.list-link.selected {
  background:color-mix(in srgb,var(--secondary),transparent 80%)
}
.list-emblem {
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--list-color);
  color:#fff;
  flex:none
}
.list-emblem .icon {
  width:17px;
  height:17px
}
.list-name {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px
}
.list-count {
  font-size:13px;
  color:var(--muted)
}
.list-chevron {
  display:none
}
.sidebar-space {
  min-height:24px;
  flex:1
}
.sidebar-footer {
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.add-list {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:13px;
  min-height:32px
}
.add-list .icon {
  width:17px;
  height:17px
}
.sync-status {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--secondary);
  font-size:11px;
  text-align:right;
  max-width:145px
}
.sync-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  flex:none
}
.sync-dot.warning {
  background:var(--orange)
}
.sync-dot.error {
  background:var(--red)
}
#main {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:var(--page);
  outline:none
}
.main-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:max(13px,env(safe-area-inset-top)) 20px 6px;
  min-height:54px;
  gap:12px
}
.toolbar-left,.toolbar-right {
  display:flex;
  align-items:center;
  gap:9px
}
.toolbar-right {
  margin-left:auto
}
.back-button {
  display:none;
  color:var(--blue);
  align-items:center;
  gap:2px;
  min-height:40px
}
.toolbar-caption {
  font-size:12px;
  color:var(--secondary)
}
.main-title {
  padding:9px 30px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.main-title h1 {
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.9px;
  color:var(--accent);
  margin:0;
  font-weight:700;
  overflow-wrap:anywhere
}
.main-title .total {
  font-size:34px;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums
}
.task-scroll {
  overflow:auto;
  overscroll-behavior:contain;
  padding:0 30px 30px;
  flex:1;
  scrollbar-gutter:stable
}
.completed-summary {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--secondary);
  font-size:12px;
  min-height:36px;
  border-bottom:1px solid var(--line);
  margin-bottom:0
}
.completed-summary button {
  color:var(--blue);
  font-size:12px;
  padding:8px 0
}
.reminders {
  list-style:none;
  padding:0;
  margin:0
}
.task-row {
  display:flex;
  position:relative;
  align-items:flex-start;
  min-height:49px;
  gap:11px;
  padding:12px 0 10px calc(var(--depth,0)*24px);
  isolation:isolate
}
.task-row::after {
  content:"";
  height:1px;
  background:var(--line);
  position:absolute;
  left:calc(var(--depth,0)*24px + 33px);
  bottom:0;
  right:0
}
.task-row.active {
  background:var(--hover);
  border-radius:5px
}
.completion {
  border:1.5px solid #c7c7cc;
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:50%;
  margin:1px 0 0;
  display:grid;
  place-items:center;
  color:#fff;
  position:relative
}
.completion::before {
  content:"";
  position:absolute;
  inset:-9px
}
.completion:hover {
  border-color:var(--accent)
}
.completion[aria-checked=true] {
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--page)
}
.completion .icon {
  width:12px;
  height:12px;
  stroke-width:2.8
}
.task-content {
  flex:1;
  min-width:0
}
.task-title {
  width:100%;
  background:none;
  border:0;
  resize:none;
  padding:0;
  line-height:22px;
  min-height:22px;
  height:22px;
  overflow:hidden;
  display:block;
  font-size:15px;
  outline-offset:1px!important;
  overflow-wrap:anywhere
}
.task-title:focus {
  outline:none
}
.task-content:focus-within {
  border-radius:2px
}
.task-row.completed .task-title {
  color:var(--secondary)
}
.task-note,.task-meta {
  font-size:12px;
  line-height:18px;
  color:var(--secondary);
  overflow-wrap:anywhere
}
.task-note {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.task-meta {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center
}
.overdue {
  color:var(--red)
}
.task-meta .icon {
  width:12px;
  height:12px
}
.task-tags {
  color:var(--blue)
}
.priority {
  color:var(--accent);
  font-weight:700;
  margin-right:3px
}
.row-actions {
  display:flex;
  align-items:center;
  gap:3px;
  flex:none
}
.row-actions .icon-button {
  width:25px;
  min-width:25px;
  min-height:25px;
  color:var(--accent)
}
.row-actions .details-button {
  opacity:0
}
.task-row:hover .details-button,.task-row:focus-within .details-button {
  opacity:1
}
.task-flag {
  color:var(--orange);
  width:15px
}
.task-flag .icon {
  width:15px;
  fill:currentColor;
  stroke-width:1
}
.collapse-button {
  display:flex;
  align-items:center;
  gap:3px;
  font-size:12px;
  color:var(--secondary);
  padding:1px 2px;
  min-height:22px
}
.collapse-button .icon {
  width:12px;
  height:12px;
  transition:transform .1s
}
.collapse-button[aria-expanded=true] .icon {
  transform:rotate(90deg)
}
.mark-chip {
  border-radius:5px;
  padding:0 5px;
  background:color-mix(in srgb,var(--blue),transparent 92%);
  color:var(--blue);
  font-size:11px;
  display:inline-flex;
  gap:3px;
  align-items:center;
  line-height:18px
}
.mark-chip .icon {
  width:11px;
  height:11px
}
.mark-chip.blocked {
  background:color-mix(in srgb,var(--orange),transparent 89%);
  color:#a95b00
}
.empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:260px;
  text-align:center;
  color:var(--secondary);
  padding:35px
}
.empty-state .icon {
  width:42px;
  height:42px;
  stroke-width:1.2;
  opacity:.6
}
.empty-state h2 {
  font-size:21px;
  color:var(--muted);
  margin:7px 0 0;
  letter-spacing:-.4px
}
.empty-state p {
  font-size:14px;
  margin:0;
  max-width:310px;
  line-height:1.5
}
.new-task {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--secondary);
  width:100%;
  padding:15px 0;
  text-align:left;
  font-size:14px
}
.new-task .icon {
  width:20px;
  height:20px
}
.main-footer {
  display:none
}
.welcome {
  margin:auto;
  max-width:470px;
  padding:32px;
  text-align:center
}
.welcome h1 {
  font-size:30px;
  letter-spacing:-.8px;
  margin:15px 0 10px
}
.welcome p {
  color:var(--muted);
  line-height:1.6
}
.welcome .app-symbol {
  width:72px;
  height:72px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin:auto;
  background:var(--sidebar)
}
.welcome .app-symbol .icon {
  width:42px;
  height:42px;
  color:var(--blue)
}
.primary-button,.secondary-button,.danger-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:9px;
  min-height:40px;
  padding:9px 16px;
  font-weight:600;
  font-size:14px;
  text-decoration:none
}
.primary-button {
  background:var(--blue);
  color:#fff
}
.secondary-button {
  background:var(--control);
  color:var(--text)
}
.danger-button {
  background:color-mix(in srgb,var(--red),transparent 92%);
  color:var(--red)
}
.text-button {
  color:var(--blue);
  padding:8px;
  min-height:36px
}
.notice {
  position:fixed;
  bottom:max(18px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  max-width:min(520px,calc(100% - 32px));
  padding:12px 17px;
  border-radius:12px;
  background:#2c2c2e;
  color:white;
  box-shadow:0 4px 25px #0002;
  z-index:100;
  font-size:13px;
  line-height:1.4
}
.notice[hidden] {
  display:none
}
.notice a {
  color:#8ec6ff
}
dialog {
  border:1px solid color-mix(in srgb,var(--line),transparent 30%);
  border-radius:14px;
  padding:0;
  max-width:min(460px,calc(100vw - 32px));
  width:460px;
  max-height:90dvh;
  background:var(--sidebar);
  color:var(--text);
  box-shadow:var(--shadow)
}
dialog::backdrop {
  background:#0003;
  backdrop-filter:blur(2px)
}
.dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  position:sticky;
  top:0;
  background:var(--sidebar);
  z-index:2;
  gap:12px
}
.dialog-header h2 {
  font-size:15px;
  font-weight:600;
  margin:0
}
.dialog-header button {
  font-size:14px;
  color:var(--blue);
  padding:7px 0;
  min-width:48px;
  text-align:right
}
.dialog-header button:first-child {
  text-align:left
}
.dialog-content {
  padding:0 16px 18px
}
.form-group {
  background:var(--card);
  border-radius:10px;
  margin-bottom:16px;
  overflow:hidden
}
.form-group>.form-row+.form-row {
  border-top:1px solid var(--line)
}
.form-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  min-height:46px
}
.form-row label,.form-row>.label {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:9px
}
.form-row label .icon {
  width:18px;
  height:18px;
  color:var(--muted)
}
.form-row input[type=text],.form-row input[type=url],.form-row textarea {
  width:100%;
  background:none;
  border:0;
  padding:0;
  line-height:1.4;
  outline-offset:4px
}
.form-row textarea {
  min-height:64px;
  resize:vertical;
  font-size:14px
}
.form-row .title-field {
  font-weight:500;
  font-size:17px!important
}
.form-row select,.form-row input[type=date],.form-row input[type=time] {
  max-width:60%;
  background:none;
  border:0;
  color:var(--blue);
  font-size:14px;
  text-align:right;
  padding:3px 0
}
.form-row input[type=date] {
  min-width:140px
}
.form-row input[type=checkbox] {
  accent-color:var(--green);
  width:34px;
  height:22px;
  margin:0;
  cursor:pointer
}
.form-row.vertical {
  flex-direction:column;
  align-items:stretch;
  gap:6px
}
.form-row.vertical label {
  font-size:12px;
  color:var(--secondary)
}
.field-help {
  font-size:12px;
  line-height:1.5;
  color:var(--secondary);
  margin:0 4px 14px
}
.form-section-label {
  margin:18px 4px 7px;
  color:var(--secondary);
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase
}
.segmented {
  display:flex;
  gap:2px;
  background:var(--control);
  border-radius:7px;
  padding:2px
}
.segmented button {
  padding:5px 13px;
  font-size:13px;
  border-radius:5px;
  min-width:60px
}
.segmented button[aria-pressed=true] {
  background:var(--card);
  box-shadow:0 1px 3px #0002;
  font-weight:600
}
.agent-status {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px
}
.agent-status .icon {
  color:var(--blue)
}
.agent-status small {
  color:var(--secondary);
  margin-left:auto;
  font-size:11px
}
.agent-result {
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
  background:var(--card);
  border-radius:9px;
  padding:13px;
  max-height:240px;
  overflow:auto
}
.agent-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 0
}
.agent-events {
  padding:0 0 0 18px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.6
}
.agent-empty {
  padding:12px;
  color:var(--secondary);
  font-size:13px;
  line-height:1.5
}
.colours {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding:20px 14px
}
.colour-choice {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--colour);
  border:3px solid transparent;
  background-clip:padding-box;
  outline:2px solid transparent
}
.colour-choice[aria-checked=true] {
  outline-color:var(--colour);
  border-color:var(--card)
}
.list-preview {
  display:flex;
  justify-content:center;
  padding:22px 0 6px
}
.list-preview .list-emblem {
  width:70px;
  height:70px
}
.list-preview .icon {
  width:40px;
  height:40px
}
.list-name-field {
  text-align:center;
  font-size:22px!important;
  font-weight:700;
  color:var(--list-color)
}
.full-width {
  width:100%
}
.connection-banner {
  border-radius:10px;
  background:color-mix(in srgb,var(--orange),transparent 90%);
  padding:12px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  margin-bottom:16px
}
.connection-banner a,.connection-banner button {
  font-weight:600;
  color:var(--blue)
}
.settings-copy {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0 3px 14px
}
.settings-copy strong {
  color:var(--text)
}
.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px;
  font-size:14px
}
.settings-row+.settings-row {
  border-top:1px solid var(--line)
}
.settings-row span {
  color:var(--secondary);
  font-size:12px;
  text-align:right
}
.settings-row button {
  color:var(--blue)
}
.google-account span {
  flex:1;
  min-width:0;
  text-align:left;
  overflow-wrap:anywhere
}
.google-account>:last-child {
  flex-shrink:0
}
.error-text {
  font-size:13px;
  color:var(--red);
  line-height:1.5;
  margin:0 4px 12px
}
.conflict-card {
  background:var(--card);
  border-radius:9px;
  padding:13px;
  margin-bottom:12px;
  font-size:13px;
  line-height:1.5
}
.conflict-card p {
  margin:6px 0
}
.conflict-buttons {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px
}
.conflict-card pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:150px;
  overflow:auto;
  font:12px/1.4 monospace
}
.offline-label {
  font-size:11px;
  color:var(--orange)
}
.noscript {
  padding:30px
}
.schedule-heading {
  font-size:19px;
  margin:28px 0 6px;
  font-weight:700
}
.schedule-heading:first-child {
  margin-top:18px
}
.shortcut-table {
  width:100%;
  font-size:12px;
  border-collapse:collapse;
  color:var(--muted)
}
.shortcut-table td {
  padding:7px 3px;
  border-bottom:1px solid var(--line)
}
.shortcut-table td:last-child {
  text-align:right
}
kbd {
  font:11px -apple-system,BlinkMacSystemFont,sans-serif;
  border:1px solid var(--line);
  background:var(--card);
  padding:2px 4px;
  border-radius:4px
}
.context-menu {
  position:absolute;
  right:21px;
  top:49px;
  z-index:5;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 8px 30px #0002;
  border-radius:9px;
  padding:5px;
  min-width:190px
}
.context-menu button {
  display:flex;
  gap:9px;
  align-items:center;
  width:100%;
  text-align:left;
  padding:8px;
  border-radius:5px;
  font-size:13px
}
.context-menu button:hover {
  background:var(--selection)
}
@media(prefers-color-scheme:dark) {
  :root {
    --page:#1c1c1e;
    --sidebar:#252527;
    --card:#343436;
    --text:#f5f5f7;
    --secondary:#98989f;
    --muted:#aeaeb2;
    --line:#38383a;
    --control:#3a3a3c;
    --blue:#0a84ff;
    --orange:#ff9f0a;
    --red:#ff453a;
    --green:#30d158;
    --selection:#173655;
    --hover:#242426
  }
  .completion {
    border-color:#636366
  }
  .list-link.selected {
    background:#ffffff1c
  }
  .mark-chip.blocked {
    color:#ffd28a
  }
  .smart-tile {
    background:#3a3a3c
  }
  dialog::backdrop {
    background:#0005
  }
}
@media(min-width:1200px) {
  .app {
    grid-template-columns:278px minmax(0,1fr)
  }
  .task-row {
    min-height:43px;
    padding-top:10px;
    padding-bottom:9px
  }
  .task-title {
    font-size:14px
  }
  .main-title {
    padding-top:6px
  }
  .main-title h1,.main-title .total {
    font-size:32px
  }
  .main-toolbar {
    padding-top:12px;
    min-height:48px
  }
  .task-note,.task-meta {
    font-size:11px
  }
  .completion {
    width:18px;
    height:18px;
    min-width:18px;
    margin-top:2px
  }
  .task-row::after {
    left:calc(var(--depth,0)*24px + 30px)
  }
}
@media(min-width:700px) and (max-width:1023px) {
  .app {
    grid-template-columns:290px minmax(0,1fr)
  }
  #sidebar {
    padding-top:max(24px,env(safe-area-inset-top))
  }
  .main-title {
    padding-left:24px;
    padding-right:24px
  }
  .task-scroll {
    padding-left:24px;
    padding-right:24px
  }
  .task-row {
    min-height:55px
  }
  .completion {
    width:22px;
    height:22px;
    min-width:22px
  }
  .task-title {
    font-size:16px
  }
  .main-toolbar {
    min-height:61px
  }
  .icon-button {
    min-width:40px;
    min-height:40px
  }
  .row-actions .icon-button {
    min-width:32px;
    min-height:30px
  }
  .smart-tile {
    min-height:87px
  }
  .tile-label {
    font-size:14px
  }
}
@media(max-width:699px) {
  :root {
    font-size:17px;
    --page:#fff;
    --sidebar:#f2f2f7
  }
  .app {
    display:block
  }
  #sidebar {
    height:100dvh;
    border:0;
    padding:max(12px,env(safe-area-inset-top)) 16px max(90px,calc(74px + env(safe-area-inset-bottom)));
    overflow:auto
  }
  #main {
    height:100dvh;
    display:none
  }
  .app.list-open #sidebar {
    display:none
  }
  .app.list-open #main {
    display:flex
  }
  .sidebar-toolbar {
    height:40px;
    margin-bottom:9px;
    padding:0 1px
  }
  .brand {
    font-size:28px;
    font-weight:700;
    letter-spacing:-.6px;
    color:var(--text)
  }
  .icon-button {
    min-width:44px;
    min-height:44px
  }
  .sidebar-toolbar .icon-button {
    color:var(--blue)
  }
  .search {
    padding:9px 9px;
    margin-bottom:21px;
    border-radius:10px;
    gap:7px
  }
  .search input {
    font-size:17px;
    line-height:21px
  }
  .search .icon {
    width:18px;
    height:18px
  }
  .smart-grid {
    gap:12px;
    margin-bottom:27px
  }
  .smart-tile {
    min-height:91px;
    border-radius:12px;
    padding:11px 13px
  }
  .tile-icon {
    width:31px;
    height:31px
  }
  .tile-icon .icon {
    width:20px;
    height:20px
  }
  .tile-count {
    font-size:29px;
    line-height:32px
  }
  .tile-label {
    font-size:16px
  }
  .tile-top {
    margin-bottom:8px
  }
  .section-label {
    font-size:21px;
    font-weight:700;
    color:var(--text);
    margin:0 5px 9px;
    letter-spacing:-.3px
  }
  .list-nav {
    background:var(--card);
    border-radius:11px;
    gap:0;
    overflow:hidden
  }
  .list-link {
    border-radius:0;
    padding:11px 15px;
    min-height:51px;
    position:relative;
    gap:12px
  }
  .list-link+.list-link::after {
    content:"";
    position:absolute;
    top:0;
    left:57px;
    right:0;
    height:1px;
    background:var(--line)
  }
  .list-link.selected {
    background:var(--card)
  }
  .list-emblem {
    width:29px;
    height:29px
  }
  .list-emblem .icon {
    width:19px;
    height:19px
  }
  .list-name {
    font-size:17px
  }
  .list-count {
    font-size:17px;
    color:var(--secondary)
  }
  .list-chevron {
    display:block;
    width:12px;
    height:12px;
    color:#c7c7cc;
    margin-left:0
  }
  .sidebar-footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(transparent,var(--sidebar) 20%);
    border:0;
    padding:22px 19px max(19px,env(safe-area-inset-bottom));
    z-index:3;
    gap:20px
  }
  .add-list {
    font-size:17px;
    color:var(--blue);
    min-height:34px
  }
  .sync-status {
    font-size:11px;
    max-width:180px
  }
  .sidebar-space {
    display:none
  }
  .back-button {
    display:inline-flex;
    font-size:17px
  }
  .back-button .icon {
    width:20px;
    height:20px
  }
  .main-toolbar {
    padding:max(9px,env(safe-area-inset-top)) 12px 0;
    min-height:55px
  }
  .toolbar-right {
    gap:4px
  }
  .toolbar-right .icon-button {
    color:var(--blue)
  }
  .toolbar-caption {
    display:none
  }
  .desktop-new {
    display:none!important
  }
  .main-title {
    padding:8px 20px 11px
  }
  .main-title h1 {
    font-size:34px
  }
  .main-title .total {
    display:none
  }
  .task-scroll {
    padding:0 20px 90px;
    scrollbar-gutter:auto
  }
  .task-row {
    min-height:53px;
    padding:12px 0 11px calc(var(--depth,0)*22px);
    gap:12px
  }
  .completion {
    width:23px;
    height:23px;
    min-width:23px;
    margin-top:0
  }
  .task-title {
    font-size:17px;
    line-height:23px;
    min-height:23px;
    height:23px
  }
  .task-note,.task-meta {
    font-size:13px;
    line-height:19px
  }
  .row-actions .details-button {
    opacity:1;
    color:var(--secondary)
  }
  .row-actions .icon-button {
    min-width:30px;
    min-height:30px
  }
  .row-actions .icon {
    width:19px;
    height:19px
  }
  .completed-summary {
    font-size:13px;
    min-height:36px
  }
  .completed-summary button {
    font-size:13px
  }
  .task-row::after {
    left:calc(var(--depth,0)*22px + 35px)
  }
  .new-task {
    font-size:17px;
    min-height:50px
  }
  .main-footer {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:18px 20px max(17px,env(safe-area-inset-bottom));
    background:linear-gradient(transparent,var(--page) 25%);
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:3
  }
  .main-footer button {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--accent);
    font-weight:600;
    font-size:17px;
    min-height:35px
  }
  .main-footer .icon {
    width:23px;
    height:23px
  }
  .main-footer small {
    color:var(--secondary);
    font-size:11px
  }
  .empty-state {
    min-height:290px
  }
  .empty-state h2 {
    font-size:22px
  }
  dialog {
    width:100%;
    max-width:100%;
    max-height:94dvh;
    bottom:0;
    top:auto;
    margin:0;
    border-radius:14px 14px 0 0;
    border:0;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .dialog-header {
    padding:13px 16px 10px;
    min-height:57px
  }
  .dialog-header h2 {
    font-size:17px
  }
  .dialog-header button {
    font-size:17px;
    min-height:33px
  }
  .dialog-content {
    padding:0 16px 20px
  }
  .form-row {
    min-height:49px;
    padding:12px 15px
  }
  .form-row label,.form-row>.label {
    font-size:17px
  }
  .form-row select,.form-row input[type=date],.form-row input[type=time] {
    font-size:16px
  }
  .form-row input[type=text],.form-row input[type=url],.form-row textarea {
    font-size:17px
  }
  .form-row .title-field {
    font-size:19px!important
  }
  .segmented button {
    font-size:15px;
    min-height:30px
  }
  .field-help {
    font-size:13px
  }
  .agent-result {
    font-size:14px
  }
  .primary-button,.secondary-button,.danger-button {
    min-height:44px;
    font-size:15px
  }
  .settings-row {
    min-height:52px;
    font-size:16px
  }
  .settings-copy {
    font-size:14px
  }
  .notice {
    bottom:max(78px,calc(60px + env(safe-area-inset-bottom)));
    font-size:14px
  }
  .context-menu {
    top:53px;
    right:14px;
    min-width:220px
  }
  .context-menu button {
    font-size:16px;
    min-height:44px
  }
  .welcome {
    padding:28px 20px
  }
  .welcome h1 {
    font-size:29px
  }
  .welcome p {
    font-size:16px
  }
  .schedule-heading {
    font-size:21px
  }
}
@media(max-width:699px) and (prefers-color-scheme:dark) {
  :root {
    --page:#000;
    --sidebar:#000;
    --card:#1c1c1e
  }
  .smart-tile {
    background:var(--card)
  }
  .smart-tile.selected {
    background:var(--tile-color)
  }
  .list-link.selected {
    background:var(--card)
  }
  dialog {
    background:#1c1c1e
  }
  .dialog-header {
    background:#1c1c1e
  }
  .form-group,.agent-result {
    background:#2c2c2e
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:699px) {
  .app.search-open {
    display:flex;
    flex-direction:column
  }
  .app.search-open #sidebar {
    display:block;
    height:auto;
    flex:none;
    padding-bottom:0
  }
  .app.search-open #sidebar .sidebar-toolbar,.app.search-open #sidebar .smart-grid,.app.search-open #sidebar .section-label,.app.search-open #sidebar .list-nav,.app.search-open #sidebar .sidebar-space,.app.search-open #sidebar .sidebar-footer {
    display:none
  }
  .app.search-open #sidebar .search {
    margin:0
  }
  .app.search-open #main {
    display:flex;
    flex:1;
    height:auto;
    min-height:0
  }
  .app.search-open .main-footer {
    display:none
  }
}

.home-new { display: none; }
@media (max-width: 699px) {
  .sidebar-footer { flex-wrap: wrap; row-gap: 2px; }
  .sidebar-footer .home-new { display: flex; align-items: center; gap: 6px; color: var(--blue); font-size: 17px; font-weight: 600; min-height: 36px; flex: 1; }
  .sidebar-footer .home-new .icon { width: 23px; height: 23px; }
  .sidebar-footer .add-list { margin-left: auto; }
  .sidebar-footer .sync-status { width: 100%; max-width: none; justify-content: center; font-size: 10px; min-height: 14px; }
}

.lists-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.lists-heading .section-label { margin-bottom:0; }
.lists-heading .icon-button { min-width:25px; min-height:25px; }
.lists-heading .icon { width:16px; height:16px; }
.group-heading { display:flex; align-items:center; margin-top:9px; }
.group-heading > button:first-child { display:flex; flex:1; min-width:0; align-items:center; gap:7px; text-align:left; font-weight:600; font-size:13px; padding:6px 0; }
.group-heading > button:first-child > .icon:first-child { width:11px; height:11px; transition:transform .12s; }
.group-heading [aria-expanded=true] > .icon:first-child { transform:rotate(90deg); }
.group-heading .icon { width:18px; height:18px; color:var(--secondary); }
.group-heading span { overflow:hidden; text-overflow:ellipsis; }
.group-lists { padding-left:17px; }
.group-empty { color:var(--secondary); font-size:11px; line-height:1.4; margin:4px 10px 10px; }
.section-heading { display:flex; align-items:center; padding-top:13px; border-bottom:1px solid var(--line); color:var(--accent); }
.section-collapse { display:flex; align-items:center; gap:7px; flex:1; text-align:left; min-width:0; }
.section-collapse > .icon { width:12px; height:12px; }
.section-collapse[aria-expanded=true] > .icon { transform:rotate(90deg); }
.section-collapse h2 { font-size:16px; line-height:24px; margin:0; overflow-wrap:anywhere; }
.section-collapse span { color:var(--secondary); font-size:12px; margin-left:3px; }
.section-heading .icon-button { min-height:30px; min-width:28px; }
.section-heading .icon-button .icon { width:17px; height:17px; }
.move-controls { display:flex; opacity:0; align-items:center; }
.task-row:focus-within .move-controls,.task-row:hover .move-controls { opacity:1; }
.move-controls .icon-button { min-width:20px; width:20px; min-height:22px; }
.move-controls .icon { width:13px; height:13px; }
.drag-grip { color:var(--secondary); cursor:grab; padding:3px; }
.task-row.dragging { opacity:.4; }
.task-row.drop-before { box-shadow:0 -2px 0 var(--blue); }
.task-row.drop-after { box-shadow:0 2px 0 var(--blue); }
.inline-editor { display:none; padding:3px 0 5px; }
.task-row:focus-within .inline-editor { display:block; }
.task-row:focus-within .task-note { display:none; }
.inline-editor > textarea { display:block; width:100%; border:0; resize:vertical; background:none; font-size:12px; color:var(--muted); min-height:20px; padding:0; }
.inline-controls { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:7px; font-size:11px; color:var(--secondary); }
.inline-controls label { display:flex; align-items:center; gap:4px; min-width:0; }
.inline-controls .icon { width:13px; height:13px; }
.inline-controls input { border:0; background:none; font-size:11px; color:var(--secondary); max-width:130px; padding:2px; }
.inline-controls .inline-tag input { width:90px; }
.inline-controls button { padding:3px; }
.inline-controls button[aria-pressed=true] { color:var(--orange); }
.inline-controls button[aria-pressed=true] .icon { fill:currentColor; }
.repeat-interval { display:flex; align-items:center; gap:9px; color:var(--blue); }
.form-row input[type=number] { width:70px; text-align:right; background:none; border:0; color:var(--blue); padding:3px; }
.form-row[hidden] { display:none; }
.date-suggestions { display:flex; gap:7px; flex-wrap:wrap; font-size:12px; padding:7px 0 2px; }
.date-suggestions button { padding:5px 9px; border-radius:6px; color:var(--blue); background:var(--selection); display:flex; align-items:center; gap:4px; }
.date-suggestions .icon { width:14px; height:14px; }
.date-suggestions p { margin:0; width:100%; color:var(--secondary); line-height:1.4; }
.date-suggestions .accepted-date { color:var(--blue); }
@media(min-width:700px) {
  .app.sidebar-hidden { grid-template-columns:minmax(0,1fr); }
  .app.sidebar-hidden #sidebar { display:none; }
}
@media(min-width:700px) and (pointer:fine) {
  .main-toolbar { padding:9px 16px 4px; min-height:47px; }
  .main-title { padding:6px 16px 7px; }
  .main-title h1,.main-title .total { font-size:32px; line-height:37px; }
  .task-scroll { padding:0 16px 30px; }
  .completed-summary { font-size:13px; min-height:30px; }
  .completed-summary button { margin-left:auto; font-size:13px; }
  .task-row { min-height:33px; padding-top:7px; padding-bottom:6px; gap:8px; }
  .task-title { font-size:13px; font-weight:500; line-height:19px; min-height:19px; height:19px; }
  .completion { width:16px; height:16px; min-width:16px; margin-top:2px; }
  .task-row::after { left:calc(var(--depth,0)*24px + 24px); }
  .task-row.active { background:none; }
  .task-note,.task-meta { font-size:11px; line-height:16px; }
  .row-actions .icon-button { min-height:19px; }
  .row-actions > .icon-button .icon { width:16px; height:16px; }
  .task-row:focus-within .inline-editor { padding-bottom:7px; }
}
@media(min-width:700px) and (prefers-color-scheme:dark) { :root { --page:#1e1e1e; } }
@media(max-width:699px) {
  .sidebar-toggle { display:none; }
  .app.search-open #sidebar .lists-heading { display:none; }
  .group-heading > button:first-child { font-size:17px; padding:12px 2px; }
  .group-heading .icon-button { min-width:44px; min-height:44px; }
  .group-lists { padding-left:12px; }
  .move-controls { opacity:1; }
  .drag-grip { display:none; }
  .row-actions { flex-wrap:wrap; justify-content:flex-end; max-width:72px; }
  .move-controls .icon-button { min-height:28px; width:28px; min-width:28px; }
  .section-heading .icon-button { min-height:44px; min-width:36px; }
  .section-collapse { min-height:44px; }
  .inline-editor > textarea,.inline-controls input { font-size:16px; }
  .inline-controls { gap:10px; }
  .inline-controls .inline-tag input { width:115px; }
  .inline-controls input { max-width:160px; }
  .inline-controls button { padding:8px; }
  .section-collapse h2 { font-size:19px; }
}
.weekday-choices { display:flex; justify-content:space-between; gap:5px; }
.weekday-choices label { position:relative; cursor:pointer; }
.weekday-choices input { position:absolute; opacity:0; width:1px!important; height:1px!important; }
.weekday-choices span { display:grid; place-items:center; width:38px; min-height:38px; border-radius:50%; color:var(--secondary); background:var(--control); font-size:11px; }
.weekday-choices input:checked+span { color:#fff; background:var(--blue); }
.weekday-choices input:focus-visible+span { outline:3px solid var(--blue); outline-offset:2px; }
@media(max-width:400px) { .weekday-choices span { width:33px; min-height:33px; } }

/* Native reference: Mac sidebar at 228px; current iPhone circular controls. */
@media(min-width:700px) and (pointer:fine) {
  .app { grid-template-columns:228px minmax(0,1fr); }
  .app.sidebar-hidden { grid-template-columns:minmax(0,1fr); }
  #sidebar { padding-left:12px; padding-right:12px; }
  .smart-grid { gap:8px; }
  .smart-tile { padding:9px; }
  .tile-count { font-size:23px; }
  .sidebar-footer { flex-wrap:wrap; }
  .sidebar-footer .sync-status { font-size:10px; }
}
@media(max-width:699px) {
  .main-toolbar { padding-left:19px; padding-right:19px; padding-bottom:5px; min-height:62px; }
  .back-button,.toolbar-right > .icon-button:not(.desktop-new) { width:44px; height:44px; min-width:44px; min-height:44px; justify-content:center; border-radius:50%; background:color-mix(in srgb,var(--card),transparent 12%); border:1px solid color-mix(in srgb,var(--line),transparent 25%); box-shadow:0 2px 8px #00000009; color:var(--text); }
  .back-button .back-label,.toolbar-right .main-settings.has-list-menu { display:none; }
  .back-button .icon { width:22px; height:22px; }
  .main-title h1 { font-size:32px; }
  .main-footer { pointer-events:none; align-items:flex-end; background:none; padding:12px 22px max(22px,env(safe-area-inset-bottom)); }
  .main-footer .mobile-add { pointer-events:auto; display:grid; place-items:center; width:58px; height:58px; min-height:58px; border-radius:50%; margin-left:auto; background:var(--blue); color:#fff; box-shadow:0 3px 12px #0002; }
  .main-footer .mobile-add .icon { width:29px; height:29px; stroke-width:2.1; }
  .main-footer small { padding:7px 9px; background:color-mix(in srgb,var(--page),transparent 8%); border-radius:12px; }
  .new-task { display:none; }
}

.backup-preview {padding:16px}
.backup-preview h3 {font-size:15px;overflow-wrap:anywhere;margin:0 0 12px}
.backup-preview dl {display:grid;grid-template-columns:1fr auto;gap:8px;font-size:14px;margin:0}
.backup-preview dd {margin:0;text-align:right;color:var(--secondary)}
.backup-confirm {display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;margin:16px 0}
.backup-confirm input {margin-top:4px;flex:none}
#backup-file {max-width:65%;font-size:12px}

.api-key-permissions {border:0;padding:0;margin:16px 0;display:grid;gap:12px}
.api-key-permissions legend {font-weight:600;margin-bottom:12px}
.api-key-permissions label {display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4}
.api-key-permissions input {flex:none;margin-top:3px}
.api-key-permissions small {display:block;color:var(--secondary);font-size:12px;overflow-wrap:anywhere}
.api-created-key,.api-key-record {padding:16px}
.api-created-key p,.api-key-record p {font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.api-created-key h3 {margin:0;font-size:16px}
#api-key-secret {width:100%;box-sizing:border-box;font:12px ui-monospace,monospace;margin:8px 0;min-width:0}
.api-key-record + .api-key-record {border-top:1px solid var(--line)}
.api-key-record dl {display:grid;grid-template-columns:auto 1fr;gap:6px;font-size:12px;color:var(--secondary)}
.api-key-record dd {margin:0;text-align:right;overflow-wrap:anywhere}
#api-key-name {min-width:0;max-width:65%}
#api-key-expiry {width:70px;min-width:0;text-align:right}

.alert-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 13px
}
.alert-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:14px;
  background:var(--fill, rgba(120,120,128,.16));
  font-size:13px;
  cursor:pointer
}
.alert-chip input {
  margin:0;
  accent-color:var(--blue)
}