:root{
  --two-dos-gap: clamp(12px, 2vw, 20px);
  --two-dos-radius: 12px;
  --column-w: 280px; /* base column width */
  --radius: 12px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(17,24,39,.06);
  --shadow-2: 0 4px 10px rgba(17,24,39,.08);
  --shadow-3: 0 6px 16px rgba(17,24,39,.10);
  --accent: #fd4a1b;
  --notice: #3b82f6; /* blue for notice state */
  --muted: #e5e7eb;
  --text-900:#111827; --text-700:#374151; --text-500:#6b7280; --text-300:#9ca3af;
  --twodos-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Surfaces */
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  /* Chips / pills */
  --chip-bg: #f3f4f6;
  --chip-hover: #e5e7eb;
  /* Semantic states */
  --success-bg:#dcfce7; --success-text:#15803d;
  --info-bg:#e0f2fe; --info-text:#0369a1;
  --warn-bg:#ffedd5; --warn-text:#c2410c;
  --danger-bg:#fee2e2; --danger-text:#b91c1c;
  /* Progress gradients */
  --track-grad: linear-gradient(90deg,#f3f4f6,#f9fafb);
  --fill-grad: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
  /* DnD highlight */
  --dragover-grad: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.06));
  /* Sticky bars / fades */
  --sticky-tags-bg: linear-gradient(to bottom, rgba(249,250,251,1), rgba(249,250,251,.9));
  --group-fade-top: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0));
  --group-fade-bottom: linear-gradient(to top, rgba(0,0,0,.06), rgba(0,0,0,0));
  --tag-scroll-fade-left: linear-gradient(to left, rgba(255,255,255,0), #fff);
  --tag-scroll-fade-right: linear-gradient(to right, rgba(255,255,255,0), #fff);
  /* Generic overlay (glass) */
  --overlay-bg: rgba(255,255,255,.45);
  /* Hover border color slightly darker than muted */
  --muted-hover: #d5dae5;
}

/* Typography */
.twodos-app,
.twodos-app :where(button, input, optgroup, select, textarea),
.twodos-analytics-user,
.twodos-analytics-site,
.twodos-analytics-grid,
.twodos-analytics-card{
  font-family: var(--twodos-font-family);
}

/* ===================== Theme Variants ===================== */
/* Scope themes to the app wrapper; also support early-apply on :root */
:root[data-theme="accent-light"],
.twodos-app[data-theme="accent-light"], :root[data-theme="accent-light"] .twodos-app{
  --accent:#fd4a1b; --notice:#3b82f6;
  --surface:#ffffff; --surface-soft:#f9fafb; --muted:#e5e7eb;
  --text-900:#111827; --text-700:#374151; --text-500:#6b7280; --text-300:#9ca3af;
  --chip-bg:#f3f4f6; --chip-hover:#e5e7eb;
  /* Accent alphas */
  --accent-subtle: rgba(253,74,27,.08);
  --accent-ring: rgba(253,74,27,.35);
  --accent-ring-strong: rgba(253,74,27,.45);
  --accent-shadow: rgba(253,74,27,.18);
  --track-grad: linear-gradient(90deg,#f3f4f6,#f9fafb);
  --fill-grad: linear-gradient(90deg,#fdba74,#fb923c,#f97316);
}
:root[data-theme="accent-dark"],
.twodos-app[data-theme="accent-dark"], :root[data-theme="accent-dark"] .twodos-app{
  /* Match orange accent to light theme */
  --accent:#fd4a1b; --notice:#60a5fa;
  --surface:#0b1220; --surface-soft:#0f172a; --muted:#203047; --muted-hover:#31435f;
  --text-900:#e5e7eb; --text-700:#cbd5e1; --text-500:#94a3b8; --text-300:#64748b;
  --chip-bg:#111827; --chip-hover:#1f2937;
  /* Use the same accent alphas as light variant for consistency */
  --accent-subtle: rgba(253,74,27,.12);
  --accent-ring: rgba(253,74,27,.45);
  --accent-ring-strong: rgba(253,74,27,.55);
  --accent-shadow: rgba(253,74,27,.28);
  --track-grad: linear-gradient(90deg,#111827,#0f172a);
  --fill-grad: linear-gradient(90deg,#fdba74,#fb923c,#f97316);
  --sticky-tags-bg: linear-gradient(to bottom, rgba(15,23,42,1), rgba(15,23,42,.9));
  --group-fade-top: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  --group-fade-bottom: linear-gradient(to top, rgba(255,255,255,.08), rgba(255,255,255,0));
  --tag-scroll-fade-left: linear-gradient(to left, rgba(15,23,42,0), #0f172a);
  --tag-scroll-fade-right: linear-gradient(to right, rgba(15,23,42,0), #0f172a);
  --overlay-bg: rgba(2,6,23,.45);
}
:root[data-theme="accent-contrast"],
.twodos-app[data-theme="accent-contrast"], :root[data-theme="accent-contrast"] .twodos-app{
  --accent:#c2410c; --notice:#1d4ed8;
  --surface:#ffffff; --surface-soft:#f8fafc; --muted:#0f172a; --muted-hover:#1e293b;
  --text-900:#0f172a; --text-700:#0f172a; --text-500:#0f172a; --text-300:#334155;
  --chip-bg:#e2e8f0; --chip-hover:#cbd5e1;
  --accent-subtle: rgba(194,65,12,.10);
  --accent-ring: rgba(194,65,12,.50);
  --accent-ring-strong: rgba(194,65,12,.60);
  --accent-shadow: rgba(194,65,12,.28);
  --track-grad: linear-gradient(90deg,#e2e8f0,#f1f5f9);
  --fill-grad: linear-gradient(90deg,#ea580c,#c2410c,#7c2d12);
}

:root[data-theme="blue-light"],
.twodos-app[data-theme="blue-light"], :root[data-theme="blue-light"] .twodos-app{
  --accent:#3b82f6; --notice:#22c55e;
  --surface:#ffffff; --surface-soft:#f9fafb; --muted:#e5e7eb;
  --text-900:#111827; --text-700:#374151; --text-500:#6b7280; --text-300:#9ca3af;
  --chip-bg:#f3f4f6; --chip-hover:#e5e7eb;
  --accent-subtle: rgba(59,130,246,.10);
  --accent-ring: rgba(59,130,246,.45);
  --accent-ring-strong: rgba(59,130,246,.55);
  --accent-shadow: rgba(59,130,246,.25);
  --track-grad: linear-gradient(90deg,#f3f4f6,#f9fafb);
  --fill-grad: linear-gradient(90deg,#93c5fd,#60a5fa,#3b82f6);
}
:root[data-theme="blue-dark"],
.twodos-app[data-theme="blue-dark"], :root[data-theme="blue-dark"] .twodos-app{
  --accent:#60a5fa; --notice:#34d399;
  --surface:#0b1220; --surface-soft:#0f172a; --muted:#203047; --muted-hover:#31435f;
  --text-900:#e5e7eb; --text-700:#cbd5e1; --text-500:#94a3b8; --text-300:#64748b;
  --chip-bg:#111827; --chip-hover:#1f2937;
  --accent-subtle: rgba(96,165,250,.14);
  --accent-ring: rgba(96,165,250,.50);
  --accent-ring-strong: rgba(96,165,250,.60);
  --accent-shadow: rgba(96,165,250,.30);
  --track-grad: linear-gradient(90deg,#111827,#0f172a);
  --fill-grad: linear-gradient(90deg,#93c5fd,#60a5fa,#3b82f6);
  --sticky-tags-bg: linear-gradient(to bottom, rgba(15,23,42,1), rgba(15,23,42,.9));
  --group-fade-top: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  --group-fade-bottom: linear-gradient(to top, rgba(255,255,255,.08), rgba(255,255,255,0));
  --tag-scroll-fade-left: linear-gradient(to left, rgba(15,23,42,0), #0f172a);
  --tag-scroll-fade-right: linear-gradient(to right, rgba(15,23,42,0), #0f172a);
  --overlay-bg: rgba(2,6,23,.45);
}
:root[data-theme="blue-contrast"],
.twodos-app[data-theme="blue-contrast"], :root[data-theme="blue-contrast"] .twodos-app{
  --accent:#1d4ed8; --notice:#166534;
  --surface:#ffffff; --surface-soft:#f8fafc; --muted:#0f172a; --muted-hover:#1e293b;
  --text-900:#0f172a; --text-700:#0f172a; --text-500:#0f172a; --text-300:#334155;
  --chip-bg:#e2e8f0; --chip-hover:#cbd5e1;
  --accent-subtle: rgba(29,78,216,.12);
  --accent-ring: rgba(29,78,216,.55);
  --accent-ring-strong: rgba(29,78,216,.65);
  --accent-shadow: rgba(29,78,216,.32);
  --track-grad: linear-gradient(90deg,#e2e8f0,#f1f5f9);
  --fill-grad: linear-gradient(90deg,#1d4ed8,#1e40af,#172554);
}

:root[data-theme="green-light"],
.twodos-app[data-theme="green-light"], :root[data-theme="green-light"] .twodos-app{
  --accent:#10b981; --notice:#3b82f6;
  --surface:#ffffff; --surface-soft:#f9fafb; --muted:#e5e7eb;
  --text-900:#111827; --text-700:#374151; --text-500:#6b7280; --text-300:#9ca3af;
  --chip-bg:#f3f4f6; --chip-hover:#e5e7eb;
  --accent-subtle: rgba(16,185,129,.10);
  --accent-ring: rgba(16,185,129,.45);
  --accent-ring-strong: rgba(16,185,129,.55);
  --accent-shadow: rgba(16,185,129,.25);
  --track-grad: linear-gradient(90deg,#f3f4f6,#f9fafb);
  --fill-grad: linear-gradient(90deg,#6ee7b7,#34d399,#10b981);
}
:root[data-theme="green-dark"],
.twodos-app[data-theme="green-dark"], :root[data-theme="green-dark"] .twodos-app{
  --accent:#34d399; --notice:#60a5fa;
  --surface:#0b1220; --surface-soft:#0f172a; --muted:#203047; --muted-hover:#31435f;
  --text-900:#e5e7eb; --text-700:#cbd5e1; --text-500:#94a3b8; --text-300:#64748b;
  --chip-bg:#111827; --chip-hover:#1f2937;
  --accent-subtle: rgba(52,211,153,.14);
  --accent-ring: rgba(52,211,153,.50);
  --accent-ring-strong: rgba(52,211,153,.60);
  --accent-shadow: rgba(52,211,153,.30);
  --track-grad: linear-gradient(90deg,#111827,#0f172a);
  --fill-grad: linear-gradient(90deg,#6ee7b7,#34d399,#10b981);
  --sticky-tags-bg: linear-gradient(to bottom, rgba(15,23,42,1), rgba(15,23,42,.9));
  --group-fade-top: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  --group-fade-bottom: linear-gradient(to top, rgba(255,255,255,.08), rgba(255,255,255,0));
  --tag-scroll-fade-left: linear-gradient(to left, rgba(15,23,42,0), #0f172a);
  --tag-scroll-fade-right: linear-gradient(to right, rgba(15,23,42,0), #0f172a);
  --overlay-bg: rgba(2,6,23,.45);
}
:root[data-theme="green-contrast"],
.twodos-app[data-theme="green-contrast"], :root[data-theme="green-contrast"] .twodos-app{
  --accent:#047857; --notice:#1d4ed8;
  --surface:#ffffff; --surface-soft:#f8fafc; --muted:#0f172a; --muted-hover:#1e293b;
  --text-900:#0f172a; --text-700:#0f172a; --text-500:#0f172a; --text-300:#334155;
  --chip-bg:#e2e8f0; --chip-hover:#cbd5e1;
  --accent-subtle: rgba(4,120,87,.12);
  --accent-ring: rgba(4,120,87,.55);
  --accent-ring-strong: rgba(4,120,87,.65);
  --accent-shadow: rgba(4,120,87,.32);
  --track-grad: linear-gradient(90deg,#e2e8f0,#f1f5f9);
  --fill-grad: linear-gradient(90deg,#047857,#065f46,#064e3b);
}

/* ===================== Theme bridge overrides ===================== */
/* Normalize legacy hard-coded surfaces/chips to tokens so themes apply immediately. */
.twodos-app[data-theme] .card,
.twodos-app[data-theme] .tabs .tab,
.twodos-app[data-theme] .tag,
.twodos-app[data-theme] .tags .tag,
.twodos-app[data-theme] .folder,
.twodos-app[data-theme] .folder__btn,
.twodos-app[data-theme] .tab__btn,
.twodos-app[data-theme] .tag__btn,
.twodos-app[data-theme] .addMenu,
.twodos-app[data-theme] .addMenu.addMenuPanel,
.twodos-app[data-theme] .column-scroll-top-btn,
.twodos-app[data-theme] .taskcard,
.twodos-app[data-theme] .taskrepeat__editor,
.twodos-app[data-theme] .taskdue__editor,
.twodos-app[data-theme] .taskadd-card,
.twodos-app[data-theme] .tasksboard__fallback,
.twodos-app[data-theme] .viewtoggle__btn,
.twodos-app[data-theme] .tasksboard__viewtoggle .viewtoggle__btn,
.twodos-app[data-theme] .tasksboard__col-btn,
.twodos-app[data-theme] .tasksboard__col-edit,
.twodos-app[data-theme] .subtasks__btn,
.twodos-app[data-theme] .theme-picker__select,
.twodos-app[data-theme] .folder__icon-pop,
.twodos-app[data-theme] .folder__icon-search,
.twodos-app[data-theme] .folder__icon-option{ background: var(--surface) !important; color: var(--text-700); }

/* List view rows */
.twodos-app[data-theme] .taskslist__row{ background: var(--surface) !important; border-color: var(--muted) !important; }

.twodos-app[data-theme] .tag,
.twodos-app[data-theme] .tags .tag,
.twodos-app[data-theme] .taskcard__tag,
.twodos-app[data-theme] .taskcard__due,
.twodos-app[data-theme] .taskcard__repeat,
.twodos-app[data-theme] .subcount,
.twodos-app[data-theme] .tab,
.twodos-app[data-theme] .taskcard__priority{ background: var(--chip-bg) !important; }

.twodos-app[data-theme] .tag:hover,
.twodos-app[data-theme] .tags .tag:hover,
.twodos-app[data-theme] .taskcard__tag:hover{ background: var(--chip-hover) !important; }

.twodos-app[data-theme] .tabs,
.twodos-app[data-theme] .tags,
.twodos-app[data-theme] .taskadd-card,
.twodos-app[data-theme] .tasksboard__fallback,
.twodos-app[data-theme] .card,
.twodos-app[data-theme] .taskcard,
.twodos-app[data-theme] .folder,
.twodos-app[data-theme] .tag,
.twodos-app[data-theme] .viewtoggle__btn,
.twodos-app[data-theme] .tab__btn,
.twodos-app[data-theme] .tag__btn,
.twodos-app[data-theme] .folder__btn,
.twodos-app[data-theme] .tasksboard__col-btn{ border-color: var(--muted) !important; }

/* Duplicate key bridges for early theme on :root */
:root[data-theme] .twodos-app .card,
:root[data-theme] .twodos-app .tabs .tab,
:root[data-theme] .twodos-app .tag,
:root[data-theme] .twodos-app .tags .tag,
:root[data-theme] .twodos-app .folder,
:root[data-theme] .twodos-app .folder__btn,
:root[data-theme] .twodos-app .tab__btn,
:root[data-theme] .twodos-app .tag__btn,
:root[data-theme] .twodos-app .addMenu,
:root[data-theme] .twodos-app .addMenu.addMenuPanel,
:root[data-theme] .twodos-app .column-scroll-top-btn,
:root[data-theme] .twodos-app .taskcard,
:root[data-theme] .twodos-app .taskrepeat__editor,
:root[data-theme] .twodos-app .taskdue__editor,
:root[data-theme] .twodos-app .taskadd-card,
:root[data-theme] .twodos-app .tasksboard__fallback,
:root[data-theme] .twodos-app .viewtoggle__btn,
:root[data-theme] .twodos-app .tasksboard__viewtoggle .viewtoggle__btn,
:root[data-theme] .twodos-app .tasksboard__col-btn,
:root[data-theme] .twodos-app .tasksboard__col-edit,
:root[data-theme] .twodos-app .subtasks__btn,
:root[data-theme] .twodos-app .theme-picker__select,
:root[data-theme] .twodos-app .folder__icon-pop,
:root[data-theme] .twodos-app .folder__icon-search,
:root[data-theme] .twodos-app .folder__icon-option{ background: var(--surface) !important; color: var(--text-700); }

:root[data-theme] .twodos-app .taskslist__row{ background: var(--surface) !important; border-color: var(--muted) !important; }

:root[data-theme] .twodos-app .tag,
:root[data-theme] .twodos-app .tags .tag,
:root[data-theme] .twodos-app .taskcard__tag,
:root[data-theme] .twodos-app .taskcard__due,
:root[data-theme] .twodos-app .taskcard__repeat,
:root[data-theme] .twodos-app .subcount,
:root[data-theme] .twodos-app .tab,
:root[data-theme] .twodos-app .taskcard__priority{ background: var(--chip-bg) !important; }

:root[data-theme] .twodos-app .tabs,
:root[data-theme] .twodos-app .tags,
:root[data-theme] .twodos-app .taskadd-card,
:root[data-theme] .twodos-app .tasksboard__fallback,
:root[data-theme] .twodos-app .card,
:root[data-theme] .twodos-app .taskcard,
:root[data-theme] .twodos-app .folder,
:root[data-theme] .twodos-app .tag,
:root[data-theme] .twodos-app .viewtoggle__btn,
:root[data-theme] .twodos-app .tab__btn,
:root[data-theme] .twodos-app .tag__btn,
:root[data-theme] .twodos-app .folder__btn,
:root[data-theme] .twodos-app .tasksboard__col-btn{ border-color: var(--muted) !important; }

/* Board sticky group header surface */
.twodos-app[data-theme] .group-name{ background: var(--surface-soft) !important; }

/* App wrapper background follows theme for immediate visual feedback */
.twodos-app[data-theme]{ background: var(--surface-soft); }
:root[data-theme] .twodos-app{ background: var(--surface-soft); }

/* Ensure all primary containers inherit themed background (avoid host theme white) */
.twodos-app[data-theme] .twodos-app__sidebar,
.twodos-app[data-theme] .twodos-app__main,
.twodos-app[data-theme] .bde-section,
.twodos-app[data-theme] .bde-row,
.twodos-app[data-theme] .sidebar,
.twodos-app[data-theme] .board,
.twodos-app[data-theme] .tasks,
.twodos-app[data-theme] .tasksboard,
.twodos-app[data-theme] .taskslist,
.twodos-app[data-theme] .tasksboard__columns,
.twodos-app[data-theme] .viewtoggle{ background: var(--surface-soft) !important; }

/* If theme is active, ensure the page canvas matches the theme to avoid white showing through */
/* Apply to html and body; keep it constrained by the html[data-theme] attribute set by prefs early-apply. */
:root[data-theme],
:root[data-theme] body{ background-color: var(--surface-soft) !important; background: var(--surface-soft) !important; }
/* Narrower rule for safety on hosts with :has() support (also covered by above): */
:root[data-theme] body:has(.twodos-app){ background-color: var(--surface-soft) !important; }

/* Global layout primitives */
html{scroll-behavior:smooth}
html,body{height:100%}
body{overflow:auto}
/* Themed checkboxes */
input[type="checkbox"].twodos-checkbox,
.tasksboard input[type="checkbox"],
.taskslist input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border:1px solid var(--muted);
  border-radius:4px;
  background: var(--surface);
  cursor: pointer;
  display:inline-block;
  position:relative;
}
input[type="checkbox"].twodos-checkbox:hover,
.tasksboard input[type="checkbox"]:hover,
.taskslist input[type="checkbox"]:hover{ border-color: var(--muted-hover); }
input[type="checkbox"].twodos-checkbox:focus-visible,
.tasksboard input[type="checkbox"]:focus-visible,
.taskslist input[type="checkbox"]:focus-visible{ outline:2px solid var(--accent-ring); outline-offset:2px; }
input[type="checkbox"].twodos-checkbox:checked,
.tasksboard input[type="checkbox"]:checked,
.taskslist input[type="checkbox"]:checked{
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"].twodos-checkbox:checked::after,
.tasksboard input[type="checkbox"]:checked::after,
.taskslist input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:10px; border:2px solid #fff; border-left:0; border-top:0; transform:translate(-55%, -62%) rotate(45deg);
}
/* When the tasks UI is present, prevent document-level side scroll.
  Board/list containers inside the app own scrolling behavior. */
html:has(.twodos-app){ overflow-x:hidden; overflow-y:hidden; }
body:has(.twodos-app){ overflow-x:hidden; overflow-y:hidden; height:100%; }

/* ================= Subtle Animation Utilities ================= */
@keyframes fadeInScale { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes fadeOutScale { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.98); } }
.anim-enter{animation:fadeInScale .28s cubic-bezier(.4,0,.2,1);} 
.anim-exit{animation:fadeOutScale .18s ease forwards;}

/* Apply default transition polish to interactive pills */
.tab, .tag, .folder, .folder__add-btn, .tab--add, .tag--add, .profile, .addMenu, .tab__btn, .tag__btn, .folder__btn{
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .18s ease, opacity .25s ease;
}

/* Focus ring soften */
.tab:focus-visible, .tag:focus-visible, .folder:focus-visible, .folder__add-btn:focus-visible, .tab--add:focus-visible, .tag--add:focus-visible{
  outline:2px solid var(--accent-ring); outline-offset:2px; border-color:var(--accent);
}

.active{font-weight:600}

.task-name{ font-weight:500; }

/* Normalize left alignment across app UI (avoid theme/builder centering) */
.twodos-app, .twodos-app *{
  text-align: left;
}
/* Preserve deliberate centered cases */
.tasksboard__empty-archived, .tasksboard__fallback-msg{ text-align:center; }

/* Misc small resets/overrides */
.profile, .addMenu, .folders, .tasks, .tabs, .tags, .new button{ border-radius:var(--radius) !important; width:100%; box-sizing:border-box; }
.sidebar, .board, .avatar{ border-radius:var(--radius); }
.details{ font-size: .75rem; }

/* Temporary visual reset:
   remove all box shadows across plugin surfaces so styling can be rebuilt cleanly. */
.twodos-app,
.twodos-app *,
.twodos-app *::before,
.twodos-app *::after,
.twodos-admin-cards,
.twodos-admin-cards *,
.twodos-card,
.twodos-card *,
[class^="twodos"],
[class*=" twodos"],
[class^="twodos"] *,
[class*=" twodos"] *,
[class^="twodos"] *::before,
[class^="twodos"] *::after,
[class*=" twodos"] *::before,
[class*=" twodos"] *::after{
  box-shadow:none !important;
}

/* iOS Safari focus-zoom guard:
   keep text-entry controls at >=16px on coarse-touch devices so focusing
   inputs/editors does not zoom the viewport. */
@supports (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse){
    .twodos-app input:not([type]),
    .twodos-app input[type="text"],
    .twodos-app input[type="search"],
    .twodos-app input[type="email"],
    .twodos-app input[type="url"],
    .twodos-app input[type="tel"],
    .twodos-app input[type="password"],
    .twodos-app input[type="number"],
    .twodos-app input[type="date"],
    .twodos-app input[type="time"],
    .twodos-app textarea,
    .twodos-app select{
      font-size:16px !important;
    }
  }
}