:root {
  color-scheme:dark;
  --ink:#e3e3e3;
  --muted:#b8b8b8;
  --accent:#a8c7fa;
  --accent-soft:#283549;
  --paper:#1b1b1b;
  --line:#5f6368;
  --surface:#131314;
  --hover:#28292a;
  --focus:#a8c7fa;
  --danger:#f2b8b5;
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--paper)
}
* { box-sizing:border-box }
body { margin:0 }
button,input,textarea { font:inherit }
button,a,input,textarea { -webkit-tap-highlight-color:transparent }
button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  border:0;
  color:inherit;
  background:none;
  touch-action:manipulation;
  transition:background 140ms,box-shadow 140ms,color 140ms
}
button:disabled { cursor:default; opacity:.4 }
svg { width:20px; height:20px; flex-shrink:0 }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:3px
}
button:disabled:focus { outline:none }
a { color:var(--accent); text-underline-offset:3px; text-decoration:none }
a:hover { text-decoration:underline }
.sr-only,.icon-button>span {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}
.skip-link { position:fixed; top:-100px; left:16px; background:var(--surface); padding:12px; z-index:1000 }
.skip-link:focus { top:12px }
.signin-page { min-height:100dvh; display:grid; place-items:center; padding:24px; overflow:auto }
.signin-card { width:min(100%,380px); padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--surface) }
.signin-card h1 { margin:0 0 24px; font-size:26px; font-weight:400 }
.signin-error:not(:empty) { margin-top:14px; line-height:1.5 }
.icon-button { width:40px; min-width:40px; height:40px; border-radius:50%; color:var(--muted) }
.icon-button:hover { background:#3c4043; color:var(--ink) }
#app { height:100dvh }
main { height:100%; min-width:0; display:flex; flex-direction:column; overflow:hidden; outline:none }
.topbar {
  min-height:68px; flex-shrink:0; padding:0 24px;
  display:flex; align-items:center; gap:32px
}
.category-navigation { flex:1; min-width:0; display:flex; align-self:stretch; align-items:center; gap:8px }
.category-tabs {
  position:relative; display:flex; flex:1; align-self:stretch; align-items:stretch; gap:8px; min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#5f6368 transparent
}
.category-tab {
  flex-shrink:0; min-width:44px; max-width:240px; min-height:48px;
  padding:0 2px; color:var(--muted); font-size:14px; white-space:nowrap; cursor:pointer
}
.category-tab-content {
  position:relative; display:flex; align-items:center; min-width:0; padding:9px 14px;
  border-radius:8px; transition:background 140ms
}
.category-tab:hover { color:var(--ink) }
.category-tab:hover .category-tab-content { background:var(--hover) }
.category-tab[aria-selected="true"] { color:var(--accent) }
.category-underline {
  position:absolute; inset-inline:10px; inset-block-end:2px; z-index:1;
  border-block-end:2px solid var(--accent); border-radius:2px;
  transform-origin:left center; pointer-events:none
}
.category-tab:focus-visible { outline:none }
.category-tab:focus-visible .category-tab-content { outline:2px solid var(--focus) }
.tab-drop-placeholder .category-tab-content { outline:1px dashed var(--focus); outline-offset:-1px }
.tab-drop-placeholder .category-tab-content>* { visibility:hidden }
.category-tab.drag-ghost { min-height:0; padding:0; border-radius:8px; background:var(--hover) }
.category-name { overflow:hidden; text-overflow:ellipsis }
.category-panel { display:flex; flex:1; flex-direction:column; min-height:0; min-width:0 }
.primary-button {
  min-height:40px; border-radius:20px; background:var(--accent); color:#062e6f;
  padding:10px 20px; font-size:14px; font-weight:500; white-space:nowrap
}
.primary-button:hover { background:#c2d7fb; box-shadow:0 2px 6px #0003 }
.primary-button svg { width:18px; height:18px }
.secondary-button {
  min-height:40px; border:1px solid var(--line); border-radius:20px;
  padding:9px 20px; background:transparent; color:var(--accent); font-size:14px
}
.secondary-button:hover { background:#a8c7fa14 }
.board {
  display:flex; align-items:flex-start; gap:8px; overflow:auto; padding:0 18px 18px;
  flex:1; min-height:0; scroll-padding:18px; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:#5f6368 transparent
}
.column {
  flex:0 0 316px; width:316px; position:relative; background:var(--surface);
  border-radius:16px; padding:0 16px 20px; border:1px solid transparent
}
.column-head { display:flex; align-items:center; min-height:54px; padding:6px 0; gap:2px; cursor:grab; touch-action:none }
.column-title-drag {
  display:flex; width:100%; min-height:40px; padding:4px 0; justify-content:flex-start;
  text-align:left; font:inherit; overflow-wrap:anywhere; cursor:grab; touch-action:none; user-select:none
}
.column-head h2 { font-size:18px; line-height:1.4; font-weight:400; flex:1; min-width:0; margin:0; overflow-wrap:anywhere }
.column-head>.icon-button { height:36px; width:36px; min-width:36px; color:#9aa0a6 }
.column-head>.icon-button svg { width:20px; height:20px }
.column-head>[data-action="task.add"] { color:var(--accent) }
.column-head>[data-action="column.menu"] { margin-right:-8px }
.column-head [data-action="column.menu"] svg { transform:rotate(90deg) }
.task-list,.completed-task-list { display:flex; flex-direction:column }
.completed-section:not(:has(.completed-task-list>[data-task])) { display:none }
.completed-section { margin-top:6px }
.completed-toggle {
  display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:8px;
  min-height:40px; padding:6px 1px; border-radius:8px; list-style:none;
  color:#c4c7c5; font-size:15px; cursor:pointer
}
.completed-toggle::-webkit-details-marker { display:none }
.completed-toggle::before {
  content:''; justify-self:center; width:0; height:0;
  border-block:4px solid transparent; border-left:5px solid #9aa0a6
}
.completed-section[open]>.completed-toggle::before { transform:rotate(90deg) }
.completed-toggle:hover { background:var(--hover) }
.task {
  position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:8px;
  padding:7px 0; border:1px solid transparent; border-radius:8px; background:transparent;
  transition:background 140ms,border-color 140ms; overflow-wrap:anywhere; cursor:grab
}
.task:hover { background:#ffffff04 }
.task a { cursor:pointer }
.task-drop-target { outline:2px solid var(--focus); outline-offset:-2px }
.task.task-drop-placeholder { border:2px dashed var(--focus); background:#a8c7fa12; box-shadow:none }
.task-drop-placeholder>* { visibility:hidden }
.task-drag-ghost { opacity:.97; background:var(--surface) }
.task-check { width:28px; height:32px; margin-top:-5px; display:grid; place-items:center; cursor:pointer; position:relative }
.task-check input { position:absolute; width:100%; height:100%; opacity:0; cursor:pointer; margin:0 }
.task-check>span {
  border:1.8px solid #c4c7c5; width:18px; height:18px; border-radius:50%; display:grid;
  place-items:center; pointer-events:none; transition:background 150ms,border-color 150ms
}
.task-check svg { width:14px; height:14px; stroke-width:2.2; opacity:0 }
.task-check input:focus-visible+span { outline:2px solid var(--focus); outline-offset:4px }
.task-check input:checked+span { border-color:transparent; color:var(--accent) }
.task-check input:checked+span svg { width:20px; height:20px; opacity:1 }
.task-text { min-width:0 }
.task-field { position:relative }
.task-field-edit { position:absolute; inset:0; width:100%; padding:0; border-radius:3px; cursor:text }
.task-field-edit:hover { background:#ffffff05 }
.task-field a { position:relative; z-index:1 }
.task-field textarea.task-inline-input {
  display:block; width:100%; min-height:0; max-height:none; margin:0; padding:0; border:0;
  border-radius:2px; background:transparent; color:inherit; font:inherit; line-height:inherit;
  resize:none; overflow:hidden; outline:2px solid var(--focus); outline-offset:3px; cursor:text
}
.task-field textarea.task-inline-input.no-outline { outline:none }
.task-field.is-editing { text-decoration:none }
.inline-edit-error { display:block; margin-top:7px; color:var(--danger); font-size:12px; line-height:1.5 }
.task h3 { font-size:15px; line-height:1.4; font-weight:400; color:#c4c7c5; margin:0; white-space:pre-wrap }
.task p { font-size:13px; color:var(--muted); line-height:1.4; white-space:pre-wrap; margin:2px 0 0 }
.completed h3 { text-decoration:line-through; text-decoration-color:#9aa0a6; color:var(--muted) }
.completed .task-text>p { color:#9aa0a6 }
.add-column-tile {
  flex:0 0 160px; min-height:54px; justify-content:flex-start; padding:0 18px;
  border-radius:16px; font-size:14px; color:var(--accent); background:var(--surface)
}
.add-column-tile svg { width:18px; height:18px }
.add-column-tile:hover { background:var(--hover) }
.board-empty { align-items:center; justify-content:center; padding-bottom:50px }
.empty-board { max-width:380px; text-align:center; padding:25px 10px }
.empty-symbol { width:72px; height:72px; background:#28292a; display:grid; place-items:center; border-radius:24px; margin:0 auto 20px; color:var(--accent) }
.empty-symbol svg { width:35px; height:35px }
.empty-board h2 { font-weight:400; font-size:26px; letter-spacing:-.5px }
.empty-board p { color:var(--muted); line-height:1.6; font-size:14px; margin-bottom:23px }
.popover-menu {
  position:fixed; z-index:45; width:240px; padding:8px 0; background:#36373a;
  box-shadow:0 6px 16px #0005; border:1px solid transparent; border-radius:8px; animation:pop 120ms var(--ease)
}
.popover-menu button { width:100%; justify-content:flex-start; padding:11px 24px; min-height:40px; font-size:14px; gap:16px }
.popover-menu button:hover:not(:disabled),.popover-menu button:focus-visible { background:#48494c; outline-offset:-3px }
.menu-divider { height:1px; background:var(--line); margin:6px 0 }
.danger-text { color:var(--danger) }
dialog {
  border:1px solid #444746; border-radius:24px; padding:24px; width:min(480px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px); overflow:auto; background:#282a2c; color:var(--ink); box-shadow:0 20px 100px #0006
}
dialog[open] { animation:dialog-in 180ms var(--ease) }
dialog::backdrop { background:#0008 }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px }
.compact-name-form .dialog-heading { justify-content:flex-end; margin-bottom:0 }
.compact-name-form .field-label { margin-top:0 }
.dialog-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#37465c; color:var(--accent) }
.dialog-icon.warning { background:#633b3b; color:var(--danger) }
.dialog-heading>.icon-button { margin-right:-7px }
.dialog-heading+.dialog-description { margin-top:0 }
dialog h2 { font-weight:400; font-size:26px; letter-spacing:-.3px; margin:8px 0 25px; line-height:1.25; overflow-wrap:anywhere }
.field-label { display:flex; gap:8px; font-size:14px; font-weight:500; margin:20px 0 9px }
input:not([type="checkbox"]),textarea { width:100%; border:1px solid #8e918f; border-radius:4px; padding:12px; color:var(--ink); background:transparent; line-height:1.6; font-size:14px }
input::placeholder,textarea::placeholder { color:#9aa0a6 }
textarea { resize:vertical; min-height:66px; max-height:40dvh }
.dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:27px }
.dialog-description { font-size:14px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere }
#category-manager-title { margin:0; outline:none }
#category-manager[open] { animation-name:category-manager-in }
.managed-categories {
  position:relative; margin:0; padding:0; list-style:none; max-height:min(420px,55dvh);
  overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin
}
.managed-categories li,.category-drag-ghost {
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:6px 0; border-top:1px solid var(--line)
}
.managed-category-name { flex:1; min-width:0; overflow-wrap:anywhere }
.managed-category-actions { display:flex; flex-shrink:0 }
.managed-categories button:focus-visible { outline-offset:-2px }
.category-drag-handle { cursor:grab; touch-action:none; user-select:none }
.category-drag-handle:disabled { background:none }
.category-drop-placeholder { background:var(--accent-soft); outline:1px dashed var(--focus); outline-offset:-1px; border-radius:8px }
.category-drop-placeholder>* { opacity:0 }
.category-drag-ghost { background:var(--hover); border-radius:8px }
.managed-category-actions [data-action="category.delete"] { color:var(--danger) }
#category-manager-warning { border-radius:8px; margin:12px 0 }
.danger-button { min-height:40px; padding:10px 20px; background:var(--danger); color:#601410; border-radius:20px; font-size:14px }
.danger-button:hover { background:#f8d5d3 }
.preference { display:flex; align-items:flex-start; gap:20px; border-block:1px solid var(--line); padding:20px 0 }
.preference>span { flex:1 }
.preference strong { font-size:14px; font-weight:500 }
.preference small { font-size:12px; line-height:1.6; color:var(--muted); display:block; margin-top:8px }
.preference input { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; flex-shrink:0 }
.settings-motion { font-size:12px; color:var(--muted); line-height:1.6 }
.settings-local { background:#1f2022; padding:17px; border-radius:12px; margin-top:24px }
.settings-local strong { font-size:14px; font-weight:500 }
.settings-local p { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:0 }
.discard-prompt { background:#3e3030; padding:16px; border:1px solid #8c6564; border-radius:12px; margin-top:18px }
.discard-prompt strong { font-size:14px }
.discard-prompt p { font-size:13px; color:var(--muted) }
.discard-prompt>div { display:flex; justify-content:flex-end; gap:8px }
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:40;
  background:#e3e3e3; color:#303030; border:1px solid transparent; border-radius:8px;
  padding:8px 9px 8px 16px; display:flex; align-items:center; gap:15px; box-shadow:0 6px 24px #0004;
  max-width:min(560px,calc(100vw - 32px)); animation:toast-in 180ms var(--ease)
}
.toast[hidden] { display:none }
.toast>span { font-size:13px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.toast .icon-button { color:#444746; width:32px; min-width:32px; height:36px }
.toast .icon-button:hover { background:#c4c7c5 }
.toast-undo { color:#0b57d0; font-size:14px; font-weight:500; padding:7px 9px; border-radius:6px; min-height:36px }
.toast-undo:hover { background:#0b57d014 }
.toast-undo svg { width:16px; height:16px }
#storage-warning,#category-manager-warning { background:#493b23; color:#ffdfa6; font-size:13px; line-height:1.6; padding:12px 24px; flex-shrink:0 }
#storage-warning .text-button,#category-manager-warning .text-button { font-weight:600; text-decoration:underline; margin-left:10px }
.drop-placeholder { border:2px dashed var(--focus); background:#a8c7fa12; min-height:190px }
.drop-placeholder>* { visibility:hidden }
.drag-ghost {
  position:fixed!important; z-index:100; pointer-events:none; box-shadow:0 16px 35px #0006;
  border:1px solid var(--focus); max-height:calc(100dvh - 50px); overflow:hidden; will-change:transform; margin:0!important
}
.is-dragging,.is-dragging * { cursor:grabbing!important; user-select:none }
.drag-active { scroll-behavior:auto }
.drag-active .column { flex-shrink:0 }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px) scale(.985) } to { opacity:1; transform:none } }
@keyframes category-manager-in { from { opacity:0 } to { opacity:1 } }
@keyframes pop { from { opacity:0; translate:0 -3px } to { opacity:1; translate:0 0 } }
@keyframes toast-in { from { opacity:0; translate:0 8px } to { opacity:1; translate:0 0 } }
@media(hover:none) {
  .task { min-height:44px }
  .column-head>.icon-button { width:40px; min-width:40px; height:44px }
  .task-check { min-width:32px; height:40px; margin-top:-9px }
  .completed-toggle { min-height:44px }
}
@media(max-width:1100px) { .topbar { padding-inline:18px; gap:20px } }
@media(max-width:720px) {
  .topbar { min-height:0; padding:0 18px; flex-wrap:wrap; gap:0 12px }
  .category-navigation { order:3; flex-basis:100%; min-height:52px; margin-bottom:12px }
  .category-tab { max-width:210px }
  .board { padding:0 12px 20px; gap:8px; scroll-padding:12px }
  .column { flex-basis:min(316px,calc(100vw - 40px)); width:min(316px,calc(100vw - 40px)); padding-inline:14px }
  .column-head h2 { font-size:18px }
  .task h3 { font-size:15px }
  .task p { font-size:13px }
  .toast { gap:7px; width:max-content }
  .toast>span { max-width:160px }
  .toast .icon-button { width:36px; min-width:36px; height:40px }
  .toast-undo { min-height:40px }
  dialog { padding:20px; max-height:calc(100dvh - 24px) }
  dialog h2 { font-size:24px }
  input:not([type="checkbox"]),textarea { font-size:16px }
  .dialog-actions { margin-top:20px }
  .board-empty { padding:0 20px 20px }
  .empty-board h2 { font-size:24px }
  .empty-board { padding:10px }
  .empty-symbol { width:60px; height:60px }
  #storage-warning { padding:10px 18px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
  .drag-ghost { will-change:auto }
}
@media(forced-colors:active) {
  button,.column,.popover-menu,dialog,.toast { border:1px solid ButtonText }
  .task-check>span { border-color:ButtonText }
  .task-check input:checked+span { forced-color-adjust:none; color:Highlight; border-color:transparent }
  .completed-toggle::before { border-left-color:ButtonText }
  .category-tab[aria-selected="true"] .category-tab-content { outline:2px solid Highlight; outline-offset:-2px }
  .drop-placeholder,.task-drop-placeholder,.task-drop-target,.tab-drop-placeholder .category-tab-content { outline:3px dashed Highlight }
}