* { box-sizing: border-box; }

  :root,
  html[data-theme="dark"] {
    --bg: #1e1e1e;
    --fg: #d4d4d4;
    --panel-bg: #252525;
    --panel-border: #3a3a3a;
    --sidebar-bg: #202020;
    --tab-bg: #2d2d2d;
    --tab-border: #4a4a4a;
    --tab-text: #aaa;
    --tab-hover: #383838;
    --tab-active-bg: #3a3a3a;
    --tab-active-text: #eaeaea;
    --accent: #6a9fd8;
    --danger: #e06c60;
    --success: #7fc97f;
    --line-hover: #272727;
    --zebra: rgba(255, 255, 255, 0.025);
    --muted: #5a5a5a;
    --muted-2: #666;
    --muted-3: #777;
    --muted-strong: #999;
    --title-text: #eaeaea;
    --done-text: #767676;
    --abandoned-text: #c97b76;
    --status-empty-border: #666;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #2d2d2d;
    --menu-border: #4a4a4a;
    --menu-hover: #3a3a3a;
    --menu-current: #fff;
    --font-size-base: 14px;
    --title-weight: bold;
    --sidebar-width: 220px;
  }

  /* Main-window redesign tokens (--tp-*), additive alongside the theme
     variables above. Expressed as formulas over the existing per-theme
     variables so every theme automatically gets a derived value with no
     per-theme repetition here - only `light` (below) and the new `teal`
     block get literal/independently-authored values, per the redesign
     spec's "only Light gets exact fidelity" decision. */
  :root {
    --tp-font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --tp-close-red: #D6453A;

    --tp-surface: var(--bg);
    --tp-surface-raised: var(--panel-bg);
    --tp-surface-sunken: var(--sidebar-bg);
    --tp-fill-subtle: var(--tab-bg);
    --tp-hover-fill: var(--tab-hover);
    --tp-hairline: var(--panel-border);
    --tp-hairline-faint: color-mix(in srgb, var(--panel-border) 55%, transparent);
    --tp-border: var(--tab-border);
    /* --fg, not --title-text: --title-text is the user's per-project
       "default title color" override (Settings), meant only for section
       titles inside the document - chrome ink must stay a stable neutral
       regardless of that setting. */
    --tp-ink: var(--fg);
    --tp-ink-secondary: var(--fg);
    --tp-muted: var(--muted-strong);
    --tp-muted-light: var(--muted);
    --tp-accent: var(--accent);
    --tp-accent-hover: color-mix(in srgb, var(--accent) 85%, black);
    --tp-accent-tint: color-mix(in srgb, var(--accent) 12%, var(--bg));
    --tp-accent-tint-strong: color-mix(in srgb, var(--accent) 20%, var(--bg));
    --tp-icon-accent: color-mix(in srgb, var(--accent) 35%, var(--bg));
    --tp-status-done: var(--status-done);
    --tp-status-review: var(--status-review);
    --tp-status-abandoned: color-mix(in srgb, var(--fg) 18%, var(--bg));
    --tp-status-open-ring: var(--status-empty-border);
    /* Quieter than --tp-ink-secondary but must still clear 4.5:1 on
       --tp-surface (the add-task row's resting state, and the delete-X's
       only state) - falling back to full ink is the safe choice for themes
       that don't get the redesign's exact-fidelity treatment (see light
       block below). */
    --tp-secondary-quiet: var(--tp-ink-secondary);
    --tp-danger-tint: color-mix(in srgb, var(--danger) 16%, var(--tp-surface));
  }

  html[data-theme="light"] {
    --bg: #f5f5f2;
    --fg: #2a2a2a;
    --panel-bg: #ececec;
    --panel-border: #d0d0d0;
    --sidebar-bg: #eeeeee;
    --tab-bg: #e2e2e2;
    --tab-border: #cfcfcf;
    --tab-text: #555;
    --tab-hover: #d5d5d5;
    --tab-active-bg: #ffffff;
    --tab-active-text: #111;
    --accent: #3a6fc4;
    --danger: #c0392b;
    --success: #2e8b57;
    --line-hover: #e9e9e9;
    --zebra: rgba(0, 0, 0, 0.035);
    --muted: #9a9a9a;
    --muted-2: #8a8a8a;
    --muted-3: #8a8a8a;
    --muted-strong: #555;
    --title-text: #111;
    --done-text: #9a9a9a;
    --abandoned-text: #b5453a;
    --status-empty-border: #999;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #d0d0d0;
    --menu-hover: #eeeeee;
    --menu-current: #000;

    /* Literal spec values - this is the redesign's one fully-specified
       palette, not derived from the formulas above. */
    --tp-surface: #FBFAF9;
    --tp-surface-raised: #FDFCFC;
    --tp-surface-sunken: #F5F3F1;
    --tp-fill-subtle: #F2EFEC;
    --tp-hover-fill: #EDEAE7;
    --tp-hairline: #EFEDEA;
    --tp-hairline-faint: #F4F1EE;
    --tp-border: #EAE7E3;
    --tp-ink: #3F3B37;
    --tp-ink-secondary: #4A4642;
    --tp-muted: #98938E;
    --tp-muted-light: #A9A49F;
    --tp-accent: #0E7C8B;
    --tp-accent-hover: #0B6875;
    --tp-accent-tint: #EAF3F5;
    --tp-accent-tint-strong: #F0F7F8;
    --tp-icon-accent: #B6DCE3;
    --tp-status-done: #4EC08A;
    --tp-status-review: #F0C05A;
    --tp-status-abandoned: #DDD9D4;
    --tp-status-open-ring: #C4BFB9;
    --tp-secondary-quiet: #6E6963;
    --tp-danger-tint: #F0E1DE;
  }

  html[data-theme="blue"] {
    --bg: #141b26;
    --fg: #cfe0f0;
    --panel-bg: #1a2433;
    --panel-border: #2c3d54;
    --sidebar-bg: #111925;
    --tab-bg: #1f2c3f;
    --tab-border: #33475f;
    --tab-text: #8fb0d1;
    --tab-hover: #26364c;
    --tab-active-bg: #2b3f5c;
    --tab-active-text: #eaf3ff;
    --accent: #4fa3ff;
    --danger: #e0776b;
    --success: #59c68d;
    --line-hover: #1c2738;
    --zebra: rgba(120, 170, 255, 0.045);
    --muted: #4f6a86;
    --muted-2: #5c7891;
    --muted-3: #6a86a3;
    --muted-strong: #9fc1e0;
    --title-text: #eaf3ff;
    --done-text: #5c7891;
    --abandoned-text: #e0857c;
    --status-empty-border: #4f6a86;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #1a2433;
    --menu-border: #33475f;
    --menu-hover: #26364c;
    --menu-current: #fff;
  }

  html[data-theme="orange"] {
    --bg: #221a12;
    --fg: #eaddc7;
    --panel-bg: #2a2015;
    --panel-border: #493823;
    --sidebar-bg: #1e170f;
    --tab-bg: #332612;
    --tab-border: #5a4526;
    --tab-text: #c9a876;
    --tab-hover: #3d2e18;
    --tab-active-bg: #463420;
    --tab-active-text: #fff2df;
    --accent: #e0983f;
    --danger: #e0705f;
    --success: #8fbf6d;
    --line-hover: #2b2116;
    --zebra: rgba(255, 170, 90, 0.045);
    --muted: #8a6a3f;
    --muted-2: #9a7a4a;
    --muted-3: #a88a5a;
    --muted-strong: #d0ab73;
    --title-text: #fff2df;
    --done-text: #8a7355;
    --abandoned-text: #e0857c;
    --status-empty-border: #8a6a3f;
    --status-done: #3fa76a;
    --status-review: #d9a930;
    --status-broken: #d9534f;
    --menu-bg: #2a2015;
    --menu-border: #5a4526;
    --menu-hover: #3d2e18;
    --menu-current: #fff;
  }

  html[data-theme="sepia"] {
    --bg: #f4ecdd;
    --fg: #4a3826;
    --panel-bg: #ede2cd;
    --panel-border: #d9c7a3;
    --sidebar-bg: #efe4d0;
    --tab-bg: #e6d7b8;
    --tab-border: #d1bb8d;
    --tab-text: #6b5a3e;
    --tab-hover: #ddc9a0;
    --tab-active-bg: #fffaf0;
    --tab-active-text: #3a2d1a;
    --accent: #b5772e;
    --danger: #b1432f;
    --success: #4c7a3f;
    --line-hover: #ece0c8;
    --zebra: rgba(120, 90, 40, 0.04);
    --muted: #b3a07d;
    --muted-2: #a08d6a;
    --muted-3: #8f7c5c;
    --muted-strong: #6b5a3e;
    --title-text: #2e2011;
    --done-text: #a99878;
    --abandoned-text: #a1503b;
    --status-empty-border: #b3a07d;
    --status-done: #4c8a4f;
    --status-review: #c99323;
    --status-broken: #b1432f;
    --menu-bg: #fffaf0;
    --menu-border: #d9c7a3;
    --menu-hover: #ede2cd;
    --menu-current: #2e2011;
  }

  html[data-theme="slate"] {
    --bg: #eef1f4;
    --fg: #2c333a;
    --panel-bg: #e3e8ed;
    --panel-border: #c7d0d9;
    --sidebar-bg: #e6ebef;
    --tab-bg: #dbe2e9;
    --tab-border: #c0cad4;
    --tab-text: #55626e;
    --tab-hover: #cfd8e0;
    --tab-active-bg: #ffffff;
    --tab-active-text: #1c2229;
    --accent: #4a72a3;
    --danger: #b0453a;
    --success: #3f7d5c;
    --line-hover: #e2e7ec;
    --zebra: rgba(40, 60, 80, 0.035);
    --muted: #9aa7b3;
    --muted-2: #8b98a5;
    --muted-3: #7c8a97;
    --muted-strong: #55626e;
    --title-text: #161b20;
    --done-text: #97a2ac;
    --abandoned-text: #a1554a;
    --status-empty-border: #9aa7b3;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #c7d0d9;
    --menu-hover: #e6ebef;
    --menu-current: #000000;
  }

  html[data-theme="teal"] {
    --bg: #E2F0F3;
    --fg: #1F3A3F;
    --panel-bg: #D0E6EB;
    --panel-border: #B4D6DF;
    --sidebar-bg: #D6E9EC;
    --tab-bg: #CBE3E8;
    --tab-border: #B4D6DF;
    --tab-text: #3D5C61;
    --tab-hover: #BFDEE4;
    --tab-active-bg: #FFFFFF;
    --tab-active-text: #123338;
    --accent: #0E7C8B;
    --danger: #C0392B;
    --success: #2E8B57;
    --line-hover: #D8ECEF;
    --zebra: rgba(14, 124, 139, 0.035);
    --muted: #7C9EA3;
    --muted-2: #6C9297;
    --muted-3: #6C9297;
    --muted-strong: #3D5C61;
    --title-text: #123338;
    --done-text: #7C9EA3;
    --abandoned-text: #6C9297;
    --status-empty-border: #8CA7AB;
    --status-done: #3fa76a;
    --status-review: #c99323;
    --status-broken: #c0392b;
    --menu-bg: #ffffff;
    --menu-border: #B4D6DF;
    --menu-hover: #D6E9EC;
    --menu-current: #123338;
  }

  html, body {
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--font-size-base);
    line-height: 1.5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 20px 50px -16px rgba(0, 0, 0, 0.30);
  }
  body.maximized {
    border-radius: 0;
    box-shadow: none;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--tp-border);
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--tp-muted-light);
  }

  #app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: var(--tp-font-ui);
    background: var(--tp-surface);
  }
  #windowBody {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  #titleBar {
    height: 32px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: var(--tp-surface-sunken);
    border-bottom: 1px solid var(--tp-hairline);
  }
  #titleBarLeft {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    flex: 1;
    min-width: 0;
  }
  #appGlyph { border-radius: 4px; flex: 0 0 auto; }
  #windowTitle {
    font-size: 12px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #saveIndicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--tp-muted);
    flex: 0 0 auto;
  }
  #saveIndicatorDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-status-done);
  }
  #saveIndicator.unsaved #saveIndicatorDot { background: #E8B04B; }
  #saveIndicator.saving #saveIndicatorDot { background: var(--tp-muted); }

  #titleBarCaptions {
    display: flex;
    flex: 0 0 auto;
    height: 32px;
  }
  #titleBarCaptions button {
    width: 46px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #minimizeBtn:hover, #maximizeBtn:hover { background: var(--tp-hover-fill); }
  #closeBtn:hover { background: var(--tp-close-red); color: white; }

  #sidebar {
    width: var(--sidebar-width);
    flex: none;
    background: var(--tp-surface);
    border-right: 1px solid var(--tp-hairline);
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: var(--tp-font-ui);
  }
  #sidebarResizeHandle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    touch-action: none;
  }
  #sidebarResizeHandle:hover,
  #sidebarResizeHandle.resizing {
    background: var(--accent);
    opacity: 0.5;
  }

  #sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
  }
  #sidebarExpandBtn {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 50;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    color: var(--fg);
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
  }
  #sidebarExpandBtn:hover {
    background: var(--tab-hover);
  }
  #sidebarExpandBtn[hidden] {
    display: none;
  }
  .sidebar-inline-btn {
    background: none;
    border: none;
    color: var(--muted-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-inline-btn:hover {
    color: var(--title-strong, var(--fg));
    background: var(--tp-hover-fill);
  }
  #sidebarCollapseBtn {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
  }
  #sidebarCollapseBtn[hidden] {
    display: none;
  }

  #sidebarProjects {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 10px;
    flex: none;
  }
  #sidebarProjectsHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--tp-muted);
    text-transform: uppercase;
  }

  #tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .tab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--tp-ink-secondary);
    width: 100%;
  }
  .tab:hover { background: var(--tp-fill-subtle); }
  .tab.active { background: var(--tp-fill-subtle); color: var(--tp-ink); font-weight: 500; }
  .tab-grip {
    flex: none;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    touch-action: none;
    transition: opacity 0.15s ease;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
  }
  .tab:hover .tab-grip {
    opacity: 1;
  }
  .tab-grip:active {
    cursor: grabbing;
  }
  .tab.dragging {
    opacity: 0.4;
  }
  .tab.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--tp-accent);
  }
  .tab.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--tp-accent);
  }
  .tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--tp-border);
  }
  .tab.active .tab-dot { background: var(--tp-accent); }
  .tab-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    font-variant-numeric: tabular-nums;
  }

  .tab-close {
    background: none;
    border: none;
    color: var(--tp-muted-light);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    flex: none;
    display: none;
  }
  .tab:hover .tab-close { display: block; }
  .tab-close:hover {
    color: var(--tp-close-red);
  }

  #sidebarOutline {
    display: flex;
    flex-direction: column;
    padding: 6px 14px 14px;
    gap: 2px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid var(--tp-hairline);
    margin: 0 14px;
    padding-left: 0;
    padding-right: 0;
  }
  #sidebarOutlineHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-muted);
    padding: 4px 2px 6px;
    margin-bottom: 0;
    flex: none;
  }
  .outline-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    flex: none;
    position: relative;
  }
  .outline-item:hover {
    background: var(--tp-fill-subtle);
  }
  .outline-item-bar {
    width: 3px;
    height: 13px;
    border-radius: 2px;
    flex: 0 0 auto;
    background: var(--tp-border);
  }
  .outline-item-bar.has-pending { background: var(--tp-accent); }
  .outline-item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .outline-item-label[contenteditable="true"] {
    outline: 1px solid var(--tp-accent);
    outline-offset: 1px;
    border-radius: 2px;
    cursor: text;
  }
  .outline-item-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    font-variant-numeric: tabular-nums;
  }
  .outline-item-delete {
    flex: none;
    background: none;
    border: none;
    color: var(--tp-muted-light);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    display: none;
  }
  .outline-item:hover .outline-item-delete {
    display: block;
  }
  .outline-item-delete:hover {
    color: var(--tp-close-red);
  }
  .outline-item-grip {
    flex: none;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    touch-action: none;
    transition: opacity 0.15s ease;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
    background-position: 0 0;
  }
  .outline-item:hover .outline-item-grip {
    opacity: 1;
  }
  .outline-item-grip:active {
    cursor: grabbing;
  }
  .outline-item.dragging {
    opacity: 0.4;
  }
  .outline-item.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--tp-accent);
  }
  .outline-item.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--tp-accent);
  }
  .outline-empty {
    font-size: 12px;
    color: var(--tp-muted-light);
    padding: 2px 6px;
    font-style: italic;
    flex: none;
  }

  /* ---------- Settings dialog (redesign) ---------- */

  .settings-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 660px;
    height: 520px;
    max-height: 90vh;
    background: var(--tp-surface);
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--tp-border), 0 30px 70px -20px rgba(83, 78, 73, .45);
    font-family: var(--tp-font-ui);
    color: var(--tp-ink);
    overflow: hidden;
  }
  .settings-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tp-hairline);
    color: var(--tp-ink-secondary);
  }
  .settings-header h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .settings-close-btn {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .settings-close-btn:hover {
    background: var(--tp-hover-fill);
  }
  .settings-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }
  .settings-tab-rail {
    flex: 0 0 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    background: var(--tp-surface-sunken);
    border-right: 1px solid var(--tp-hairline);
  }
  .settings-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tp-muted-light);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
  }
  .settings-tab-icon {
    flex: none;
    width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-muted-light);
  }
  .settings-tab-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tp-muted-light);
  }
  .settings-tab:hover {
    background: var(--tp-hover-fill);
  }
  .settings-tab[aria-selected="true"] {
    background: var(--tp-surface-raised);
    box-shadow: 0 0 0 1px var(--tp-hairline);
  }
  .settings-tab[aria-selected="true"]::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--tp-accent);
  }
  .settings-tab[aria-selected="true"] .settings-tab-icon,
  .settings-tab[aria-selected="true"] .settings-tab-label {
    color: var(--tp-ink-secondary);
  }
  .settings-tab[aria-selected="true"] .settings-tab-icon {
    color: var(--tp-accent);
  }
  .settings-pane-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
  }
  .settings-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
  }
  .settings-pane[hidden] {
    display: none;
  }
  .settings-pane-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .settings-pane-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .settings-pane-desc {
    font-size: 11.5px;
    color: var(--tp-muted-light);
  }
  .settings-group-card {
    display: flex;
    flex-direction: column;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-hairline);
  }
  .settings-group-card[hidden] {
    display: none;
  }
  .settings-group-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-muted);
    padding: 12px 15px 4px;
  }
  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--tp-hairline-faint);
    font-size: 12.5px;
  }
  .settings-group-card .settings-row:last-child {
    border-bottom: none;
  }
  .settings-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .settings-row-label {
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
  }
  .settings-row-desc {
    font-size: 11px;
    color: var(--tp-muted-light);
  }
  .settings-row-meta {
    padding: 10px 15px;
  }
  .settings-row-meta-value {
    font-size: 12px;
    color: var(--tp-muted);
    font-variant-numeric: tabular-nums;
  }

  .ghost-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--tp-border);
    border-radius: 7px;
    background: transparent;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
  }
  .ghost-btn[hidden] {
    display: none;
  }
  .ghost-btn:hover {
    background: var(--tp-hover-fill);
  }
  .ghost-btn-filled {
    background: var(--tp-accent);
    border-color: var(--tp-accent);
    color: #fff;
  }
  .ghost-btn-filled:hover {
    background: var(--tp-accent-hover);
  }
  .settings-link {
    background: none;
    border: none;
    color: var(--tp-accent);
    cursor: pointer;
    font-size: 11.5px;
    padding: 0;
    text-decoration: underline;
  }
  .settings-link:disabled {
    color: var(--tp-muted-light);
    cursor: default;
    text-decoration: none;
  }

  /* Theme dropdown */
  .theme-dropdown {
    position: relative;
    flex: none;
  }
  .theme-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 176px;
    height: 32px;
    padding: 0 10px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-border);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
  }
  .theme-swatch {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .theme-dropdown-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
  .theme-dropdown-chevron {
    flex: none;
    color: var(--tp-muted);
    transition: transform .16s;
  }
  .theme-dropdown-btn[aria-expanded="true"] .theme-dropdown-chevron {
    transform: rotate(180deg);
  }
  .theme-dropdown-menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 10;
    width: 200px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-border), 0 14px 34px -12px rgba(83, 78, 73, .35);
  }
  .theme-menu-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .theme-menu-row:hover,
  .theme-menu-row.active-option {
    background: var(--tp-hover-fill);
  }
  .theme-menu-row.selected {
    background: var(--tp-accent-tint-strong);
  }
  .theme-menu-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .theme-menu-check {
    flex: none;
    color: var(--tp-accent);
    opacity: 0;
  }
  .theme-menu-row.selected .theme-menu-check {
    opacity: 1;
  }
  .theme-menu-divider {
    height: 1px;
    margin: 4px 4px;
    background: var(--tp-hairline);
  }
  .theme-menu-row-actions {
    flex: none;
    display: none;
    align-items: center;
    gap: 2px;
  }
  .theme-menu-row-custom:hover .theme-menu-row-actions {
    display: flex;
  }
  .theme-menu-row-custom:hover .theme-menu-check {
    display: none;
  }
  .theme-menu-edit,
  .theme-menu-delete {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--tp-muted);
    cursor: pointer;
  }
  .theme-menu-edit:hover {
    background: var(--tp-border);
    color: var(--tp-ink-secondary);
  }
  .theme-menu-delete:hover {
    background: var(--tp-border);
    color: var(--tp-close-red);
  }

  /* Theme creator */
  .theme-creator {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0 15px 15px;
    padding: 14px 15px;
    background: var(--tp-accent-tint-strong);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
  }
  .theme-creator[hidden] {
    display: none;
  }
  .theme-creator-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-accent-hover);
  }
  #customThemeNameInput {
    height: 32px;
    padding: 0 11px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
  }
  .theme-creator-swatches {
    display: flex;
    gap: 8px;
  }
  .theme-creator-swatch-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
  }
  .theme-creator-swatch {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .theme-creator-actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .settings-swatch-btn {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--tp-border);
    cursor: pointer;
    padding: 0;
  }

  /* Toggle */
  .tp-toggle {
    position: relative;
    flex: none;
    display: inline-flex;
    width: 36px;
    height: 20px;
    cursor: pointer;
  }
  .tp-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .tp-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--tp-status-abandoned);
    transition: background .16s;
  }
  .tp-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tp-surface-raised);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .16s;
  }
  .tp-toggle input:checked ~ .tp-toggle-track {
    background: var(--tp-accent);
  }
  .tp-toggle input:checked ~ .tp-toggle-track .tp-toggle-knob {
    left: 18px;
  }
  .tp-toggle input:focus-visible ~ .tp-toggle-track {
    box-shadow: 0 0 0 2px var(--tp-surface), 0 0 0 4px var(--tp-accent);
  }

  /* Stepper */
  .tp-stepper {
    flex: none;
    display: flex;
    align-items: center;
    padding: 2px;
    background: var(--tp-fill-subtle);
    border-radius: 7px;
  }
  .tp-stepper-btn {
    flex: none;
    width: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--tp-ink-secondary);
    font-size: 14px;
    cursor: pointer;
  }
  .tp-stepper-btn:hover {
    background: var(--tp-surface-raised);
  }
  .tp-stepper-value {
    flex: none;
    width: 40px;
    text-align: center;
    font-size: 12px;
    color: var(--tp-ink-secondary);
    font-variant-numeric: tabular-nums;
  }

  /* Title colour swatches */
  .title-color-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .title-swatch {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--tp-border);
    cursor: pointer;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-muted-light);
  }
  .title-swatch.selected {
    box-shadow: 0 0 0 2px var(--tp-surface-raised), 0 0 0 4px var(--tp-accent);
  }

  /* Autosave */
  .autosave-interval-field {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #autosaveMinutesInput {
    width: 48px;
    height: 30px;
    background: var(--tp-fill-subtle);
    border: none;
    border-radius: 7px;
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12px;
    text-align: center;
  }
  .autosave-interval-field span {
    font-size: 11.5px;
    color: var(--tp-muted-light);
  }

  /* Sync */
  .sync-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 15px 15px;
    padding: 14px 15px;
    background: var(--tp-accent-tint-strong);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
  }
  .sync-panel-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--tp-muted-light);
  }
  .sync-field-input {
    height: 32px;
    padding: 0 11px;
    background: var(--tp-surface-raised);
    border: none;
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--tp-accent-tint);
    color: var(--tp-ink-secondary);
    font-family: inherit;
    font-size: 12.5px;
  }
  .sync-panel-actions {
    display: flex;
    justify-content: flex-end;
  }
  .conflict-backup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 15px;
    border-top: 1px solid var(--tp-hairline);
  }
  .conflict-backup-row-text {
    font-size: 12px;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    background: var(--tp-surface-sunken);
    border-top: 1px solid var(--tp-hairline);
  }
  .settings-footer-hint {
    flex: 1 1 auto;
    font-size: 11.5px;
    color: var(--tp-muted);
  }
  .settings-done-btn {
    flex: none;
    padding: 8px 20px;
    background: var(--tp-accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }
  .settings-done-btn:hover {
    background: var(--tp-accent-hover);
  }

  #main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  #iconRail {
    width: 54px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    border-right: 1px solid var(--tp-hairline);
    background: var(--tp-surface-sunken);
    font-family: var(--tp-font-ui);
  }
  #iconRail button {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--tp-ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #iconRail button:hover { background: var(--tp-hover-fill); }
  #iconRailDivider {
    width: 22px;
    height: 1px;
    background: var(--tp-hairline);
    margin: 8px 0;
  }
  #iconRailSpacer { flex: 1; }

  .toolbar-btn {
    font-family: inherit;
    font-size: 13px;
    padding: 4px 10px;
    background: var(--tab-bg);
    border: 1px solid var(--tab-border);
    border-radius: 3px;
    cursor: pointer;
    color: var(--fg);
    flex: none;
  }
  .toolbar-btn:hover {
    background: var(--tab-hover);
  }

  #editorHeader {
    flex: 0 0 auto;
    padding: 20px 28px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--tp-font-ui);
  }
  #editorHeaderText {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  #projectNameHeading {
    font-size: 20px;
    font-weight: 600;
    color: var(--tp-ink);
    letter-spacing: -0.01em;
  }
  #projectSummary {
    font-size: 12px;
    color: var(--tp-muted);
  }
  #editorHeaderActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  #hideDoneBtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--tp-border);
    background: transparent;
    color: var(--tp-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #hideDoneBtn:hover { background: var(--tp-fill-subtle); }
  #hideDoneBtn.active {
    border-color: var(--tp-accent-tint-strong);
    background: var(--tp-accent-tint);
    color: var(--tp-accent);
  }
  #copyPendingBtn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 8px;
    border: none;
    background: var(--tp-accent);
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
  }
  #copyPendingBtn:hover { background: var(--tp-accent-hover); }

  #legendStrip {
    flex: 0 0 auto;
    padding: 0 28px 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--tp-font-ui);
  }
  .legend-item { display: flex; align-items: center; gap: 6px; }
  .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .legend-dot-open { background: transparent; box-shadow: inset 0 0 0 1.6px var(--tp-status-open-ring); }
  .legend-dot-done { background: var(--tp-status-done); }
  .legend-dot-review { background: var(--tp-status-review); }
  .legend-dot-abandoned { background: var(--tp-status-abandoned); }
  .legend-label { font-size: 11px; color: var(--tp-ink-secondary); }
  .legend-count { font-size: 11px; color: var(--tp-muted-light); font-variant-numeric: tabular-nums; }
  #legendCopyConfirm {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #1E9E6A;
  }
  #legendCopyConfirm.error { color: var(--tp-close-red); }
  #legendCopyConfirm[hidden] { display: none; }

  #toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(8px);
    background: var(--tp-surface-raised);
    color: var(--tp-ink-secondary);
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tp-border);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
  }
  #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

  #editor {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px 60px 16px;
    outline: none;
  }

  .line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 8px 5px 4px;
    border-radius: 7px;
    border-bottom: 1px solid var(--tp-hairline);
    font-family: var(--tp-font-ui);
  }
  .line:hover {
    background: var(--tp-surface-raised);
  }

  .line-ghost {
    opacity: 0.55;
  }

  .line-number {
    flex: none;
    width: 26px;
    text-align: right;
    color: var(--tp-muted-light);
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: calc(var(--font-size-base) - 2px);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
    user-select: none;
    -webkit-user-select: none;
  }

  .line-status {
    flex: none;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    margin-top: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .line-text {
    flex: 1 1 auto;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.4em;
    font-size: var(--font-size-base);
    line-height: 1.5;
  }

  .line-title {
    border-bottom: none;
    padding: 6px 8px 6px 4px;
    margin-top: 14px;
  }
  .line-title:first-child {
    margin-top: 0;
  }
  .line-title:hover {
    background: var(--tp-surface-raised);
    border-radius: 7px;
  }
  .line-title .line-text {
    flex: 0 1 auto;
    font-weight: var(--title-weight);
    color: var(--tp-ink);
    font-size: 12.5px;
    user-select: none;
    -webkit-user-select: none;
  }
  .line-title-pill {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--tp-muted);
    background: var(--tp-fill-subtle);
    padding: 1px 7px;
    border-radius: 20px;
  }
  .line-title-pill.has-pending {
    color: var(--tp-accent);
    background: var(--tp-accent-tint);
  }
  .line-title-rule {
    flex: 1;
    height: 1px;
    background: var(--tp-hairline);
    margin-left: 2px;
  }
  .line-title-planning-badge {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--tp-muted);
    background: var(--tp-fill-subtle);
    border: 1px solid var(--tp-hairline);
    padding: 1px 6px;
    border-radius: 4px;
  }

  .line-task,
  .line-note {
    padding-left: 4px;
  }

  .line-note {
    padding-left: 26px;
  }

  .line-text.done {
    color: var(--tp-muted);
    text-decoration: line-through;
    text-decoration-color: var(--tp-border);
  }

  .line-text.abandoned {
    color: var(--tp-muted-light);
    text-decoration: line-through;
    text-decoration-color: var(--tp-border);
  }

  .line-grip {
    position: absolute;
    left: 4px;
    top: 7px;
    width: 8px;
    height: 14px;
    cursor: grab;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: opacity 0.15s ease;
    /* Drawn as a fixed-size dot grid instead of a Unicode glyph (e.g. braille
       dots) so its width can never vary with font/OS fallback rendering and
       drift into the number/checkbox column next to it. */
    background-image: radial-gradient(circle, var(--muted-2) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
    background-position: 0 0;
  }
  .line:hover .line-grip {
    opacity: 1;
  }
  .line-grip:active {
    cursor: grabbing;
  }
  .line.dragging {
    opacity: 0.4;
  }
  .line.drag-over-top {
    box-shadow: inset 0 2px 0 0 var(--accent);
  }
  .line.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }

  .line-collapse {
    flex: none;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    color: var(--tp-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line-collapse:hover {
    color: var(--tp-ink-secondary);
  }

  .line-section-copy {
    flex: none;
    background: none;
    border: none;
    color: var(--tp-muted);
    font-size: 13px;
    margin-top: 3px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .line:hover .line-section-copy {
    opacity: 1;
  }
  .line-section-copy:hover {
    color: var(--tp-ink-secondary);
  }

  .line-collapsed .line-text {
    opacity: 0.7;
  }

  .line-delete {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tp-secondary-quiet);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
  }
  .line-delete:hover,
  .line-delete:focus-visible {
    background: var(--tp-danger-tint);
    color: var(--danger);
  }

  /* Both values below line up with the task row's own layout (see .line,
     .line-number, .line-status) so the "+"/label read as a continuation of
     the list under the text column, not the status circles. */
  .line-add-task-empty-msg {
    padding: 6px 4px 2px calc(4px + 26px + 9px + 22px + 9px + 14px + 8px);
    font-size: 12px;
    color: var(--tp-secondary-quiet);
  }
  .line-add-task-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    padding: 6px 8px 6px calc(4px + 26px + 9px + 22px + 9px);
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: var(--tp-font-ui);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    color: var(--tp-secondary-quiet);
    -webkit-appearance: none;
    appearance: none;
  }
  .line-add-task-btn:hover,
  .line-add-task-btn:focus-visible {
    background: var(--tp-accent-tint-strong);
    color: var(--tp-accent);
  }
  .line-add-task-btn.empty {
    color: var(--tp-accent);
    font-weight: 500;
  }

  .context-menu {
    position: fixed;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 100;
    font-size: 13px;
  }
  .context-menu-item {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--fg);
    white-space: nowrap;
  }
  .context-menu-item:hover {
    background: var(--menu-hover);
  }
  .context-menu-item.current {
    color: var(--menu-current);
    font-weight: bold;
  }
  .context-menu-separator {
    height: 1px;
    background: var(--menu-border);
    margin: 4px 0;
  }
  .context-menu-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 8px;
    border: 1px solid var(--status-empty-border);
    vertical-align: middle;
  }
  .context-menu-dot.status-empty {
    background: transparent;
  }
  .context-menu-dot.status-done {
    background: var(--status-done);
    border-color: var(--status-done);
  }
  .context-menu-dot.status-review {
    background: var(--status-review);
    border-color: var(--status-review);
  }
  .context-menu-dot.status-broken {
    background: var(--status-broken);
    border-color: var(--status-broken);
  }

  /* ---------- Colour picker ---------- */

  .cp-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(95, 91, 87, .18);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cp-overlay[hidden] {
    display: none;
  }
  .cp-card {
    width: 236px;
    border-radius: 10px;
    background: var(--tp-surface-raised);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 20px 44px -14px rgba(83, 78, 73, .42);
    font-family: var(--tp-font-ui);
  }
  .cp-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px 10px;
  }
  .cp-preview-swatch {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .cp-channel-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--tp-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cp-hex-readout {
    flex: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10.5px;
    color: var(--tp-muted-light);
    text-transform: uppercase;
  }
  .cp-sv-area {
    position: relative;
    margin: 0 14px;
    height: 124px;
    border-radius: 7px;
    cursor: crosshair;
    box-shadow: 0 0 0 1px var(--tp-border);
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    touch-action: none;
  }
  .cp-hue-slider {
    position: relative;
    margin: 10px 14px 0;
    height: 12px;
    border-radius: 6px;
    cursor: crosshair;
    box-shadow: 0 0 0 1px var(--tp-border);
    background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    touch-action: none;
  }
  .cp-knob {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: -7px 0 0 -7px;
    pointer-events: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(83, 78, 73, .5);
  }
  .cp-sv-knob {
    background: transparent;
  }
  .cp-hex-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px 0;
  }
  .cp-hex-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: none;
    border-radius: 6px;
    background: var(--tp-fill-subtle);
    color: var(--tp-ink-secondary);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
  }
  .cp-eyedropper-btn {
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: var(--tp-fill-subtle);
    color: var(--tp-ink-secondary);
    cursor: pointer;
  }
  .cp-eyedropper-btn:hover {
    background: var(--tp-hover-fill);
  }
  .cp-eyedropper-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .cp-eyedropper-btn:disabled:hover {
    background: var(--tp-fill-subtle);
  }
  .cp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--tp-hairline-faint);
    background: var(--tp-surface-sunken);
  }
  .cp-cancel-btn {
    padding: 6px 12px;
    border: 1px solid var(--tp-border);
    border-radius: 6px;
    background: var(--tp-surface-raised);
    color: var(--tp-muted);
    font-family: var(--tp-font-ui);
    font-size: 11.5px;
    cursor: pointer;
  }
  .cp-cancel-btn:hover {
    background: var(--tp-hover-fill);
  }
  .cp-ok-btn {
    padding: 6px 15px;
    border: none;
    border-radius: 6px;
    background: var(--tp-accent);
    color: white;
    font-family: var(--tp-font-ui);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .cp-ok-btn:hover {
    background: var(--tp-accent-hover);
  }
  /* Applied to whichever swatch/channel button opened the picker, for as
     long as it's open - the trigger keeps showing the committed colour
     underneath, this ring is the only feedback that it's the active one. */
  .cp-trigger-active {
    box-shadow: 0 0 0 2px var(--tp-accent) !important;
  }

  .emoji-popover {
    position: fixed;
    z-index: 40;
    background: var(--tp-surface-raised);
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--tp-border);
    padding: 8px;
  }
  #emojiGrid {
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 2px;
  }
  #emojiGrid button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #emojiGrid button:hover {
    background: var(--tp-hover-fill);
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
  }
  .modal-overlay[hidden] {
    display: none;
  }

  /* ---------- Help drawer ---------- */

  .help-drawer {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    width: 390px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tp-surface-raised);
    border-left: 1px solid var(--tp-hairline);
    box-shadow: -24px 0 60px -24px rgba(83, 78, 73, .30);
    font-family: var(--tp-font-ui);
    color: var(--tp-ink);
    z-index: 150;
    transform: translateX(100%);
    transition: transform .18s ease-out;
  }
  .help-drawer.open {
    transform: translateX(0);
  }
  .help-drawer[hidden] {
    display: none;
  }
  .help-drawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 14px;
  }
  .help-drawer-header h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tp-ink);
  }
  .help-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .help-block h3 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-muted);
  }
  .help-block p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tp-ink-secondary);
  }
  .help-block code {
    font-family: Consolas, "Courier New", monospace;
  }
  .help-status-key {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 10px;
  }
  .help-status-key-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
  }
  .help-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .help-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--tp-ink-secondary);
  }
  .key-chip {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    color: var(--tp-ink-secondary);
    background: var(--tp-fill-subtle);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
  }

  /* ---------- Onboarding tour ---------- */

  .onboarding-overlay {
    background: rgba(95, 91, 87, 0.3);
  }
  .onboarding-card {
    width: 520px;
    max-width: 92vw;
    border-radius: 10px;
    background: var(--tp-surface-raised);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tp-border), 0 30px 70px -20px rgba(83, 78, 73, .45);
    font-family: var(--tp-font-ui);
    display: flex;
    flex-direction: column;
  }
  .onboarding-illustration {
    position: relative;
    height: 196px;
    flex: 0 0 auto;
    background: var(--tp-accent-tint-strong);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .onboarding-skip-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--tp-ink-secondary);
    font-size: 11.5px;
    font-family: var(--tp-font-ui);
    cursor: pointer;
  }
  .onboarding-skip-btn:hover {
    background: rgba(255, 255, 255, 0.85);
  }
  .onboarding-copy {
    flex: 0 0 auto;
    padding: 22px 26px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .onboarding-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tp-accent-hover);
  }
  .onboarding-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tp-ink);
  }
  .onboarding-body {
    margin: 0;
    min-height: 42px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tp-ink-secondary);
  }
  .onboarding-footer {
    flex: 0 0 auto;
    padding: 12px 26px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .onboarding-dots {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .onboarding-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    border: none;
    padding: 0;
    background: var(--tp-status-abandoned);
    cursor: pointer;
    transition: width .18s, background .18s;
  }
  .onboarding-dot.active {
    width: 20px;
    background: var(--tp-accent);
  }
  .onboarding-footer-buttons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .onboarding-back-btn[hidden] {
    display: none;
  }
  .onboarding-primary-btn {
    padding: 8px 17px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 7px;
  }
  @media (prefers-reduced-motion: reduce) {
    .help-drawer, .onboarding-dot { transition: none; }
  }

  /* Onboarding illustrations - flat UI mocks, not artwork */

  .ob-illus-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ob-illus-row-arrow {
    gap: 10px;
    color: var(--tp-accent);
  }
  .ob-mini-sidebar {
    width: 132px;
    padding: 10px 9px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ob-mini-sidebar-label {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tp-muted);
  }
  .ob-mini-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ob-mini-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tp-border);
    flex: none;
  }
  .ob-mini-row.active .ob-mini-dot {
    background: var(--tp-accent);
  }
  .ob-mini-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--tp-hairline);
  }
  .ob-mini-row.active .ob-mini-bar {
    background: var(--tp-fill-subtle);
  }
  .ob-mini-list {
    width: 180px;
    padding: 12px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ob-mini-list-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--tp-hairline);
  }
  .ob-mini-list-bar.indent {
    margin-left: 12px;
  }
  .onboarding-illustration-body .w40 { width: 40%; }
  .onboarding-illustration-body .w50 { width: 50%; }
  .onboarding-illustration-body .w60 { width: 60%; }
  .onboarding-illustration-body .w70 { width: 70%; }

  .ob-mono-card {
    width: 330px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ob-mono-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tp-ink-secondary);
  }
  .ob-mono-title {
    font-weight: 700;
    color: var(--tp-accent);
  }
  .ob-mono-note {
    padding-left: 14px;
    color: var(--tp-muted);
  }
  .ob-mini-ring {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1.6px var(--tp-status-open-ring);
  }
  .ob-tab-chip {
    font-size: 9.5px;
    color: var(--tp-accent);
    background: var(--tp-accent-tint);
    padding: 1px 5px;
    border-radius: 4px;
  }

  .ob-status-list {
    width: 330px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ob-status-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--tp-surface-raised);
    box-shadow: 0 2px 8px -4px rgba(83, 78, 73, .25);
    font-size: 11.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-status-row > span:nth-child(2) {
    flex: 1 1 auto;
  }
  .ob-status-name {
    color: var(--tp-muted);
    font-size: 10.5px;
  }
  .ob-status-done-text {
    text-decoration: line-through;
    color: var(--tp-muted);
  }
  .ob-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
  }
  .ob-status-dot.done { background: var(--tp-status-done); }
  .ob-status-dot.review { background: var(--tp-status-review); }
  .ob-status-dot.abandoned { background: var(--tp-status-abandoned); }

  .ob-mini-outline {
    width: 148px;
    padding: 8px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ob-mini-outline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border-radius: 5px;
  }
  .ob-mini-outline-row.active {
    background: var(--tp-accent-tint-strong);
  }
  .ob-mini-bar-accent {
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: var(--tp-border);
    flex: none;
  }
  .ob-mini-outline-row.active .ob-mini-bar-accent {
    background: var(--tp-accent);
  }
  .ob-mini-outline-row .ob-mini-list-bar {
    flex: 1 1 auto;
  }
  .ob-mini-count {
    font-size: 9px;
    color: var(--tp-accent);
    font-variant-numeric: tabular-nums;
  }
  .ob-mini-count.muted {
    color: var(--tp-muted-light);
  }
  .ob-arrow {
    flex: none;
  }
  .ob-mini-section {
    width: 150px;
    padding: 9px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .ob-mini-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tp-muted);
  }
  .ob-mini-section-header .ob-mini-list-bar {
    flex: 1 1 auto;
  }

  .ob-illus-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ob-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    background: var(--tp-accent);
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--tp-font-ui);
    cursor: default;
  }
  .ob-illus-copy .ob-mono-card {
    width: 290px;
  }
  .ob-theme-row {
    display: flex;
    gap: 8px;
  }
  .ob-theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--tp-border);
  }
  .ob-theme-swatch.active {
    box-shadow: 0 0 0 2px var(--tp-surface-raised), 0 0 0 4px var(--tp-accent);
  }
  .ob-toggle-on .tp-toggle-track {
    background: var(--tp-accent);
  }
  .ob-toggle-on .tp-toggle-knob {
    left: 18px;
  }
  .ob-save-icons {
    display: flex;
    gap: 10px;
  }
  .ob-save-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-ink-secondary);
  }
  .ob-autosave-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-mini-grip {
    width: 6px;
    height: 12px;
    flex: none;
    background-image: radial-gradient(circle, var(--tp-muted-light) 1px, transparent 1.3px);
    background-size: 4px 4px;
    background-repeat: repeat;
  }
  .ob-menu-mock {
    width: 160px;
    padding: 4px;
    border-radius: 8px;
    background: var(--tp-surface-raised);
    box-shadow: 0 4px 14px -6px rgba(83, 78, 73, .30);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ob-menu-row {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    color: var(--tp-ink-secondary);
  }
  .ob-menu-row.active {
    background: var(--tp-hover-fill);
  }

  .line-title.title-flash {
    background: var(--accent);
    transition: background-color 0.6s ease;
  }