:root {
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-2: #f6f6f6;
      --text: #111111;
      --muted: #686868;
      --border: #d9d9d9;
      --border-strong: #a9a9a9;
      --hover: #eeeeee;
      --active: #111111;
      --active-text: #ffffff;
      --danger: #b42318;
      --focus: #1f67d2;
      --link: #1565c0;
      --shadow: 0 16px 50px rgba(0, 0, 0, 0.14);
      --font-scale: 1;
    }

    body.dark {
      --bg: #0d0e10;
      --surface: #15171a;
      --surface-2: #1d2024;
      --text: #f3f3f3;
      --muted: #a8aaad;
      --border: #363a40;
      --border-strong: #646a73;
      --hover: #25292e;
      --active: #f3f3f3;
      --active-text: #111111;
      --danger: #ff6b63;
      --focus: #77a9ff;
      --link: #8ab4f8;
      --shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
    }

    * { box-sizing: border-box; }

    html {
      min-height: 100%;
      background: var(--bg);
    }

    body {
      min-height: 100vh;
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      transition: background 140ms ease, color 140ms ease;
    }

    button,
    input,
    textarea { font: inherit; }

    button { color: inherit; }

    .app {
      width: calc(100vw - 28px);
      max-width: 1560px;
      margin: 0 auto;
      padding: 14px 0 28px;
    }

    .topbar {
      min-height: 52px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px 14px;
      padding: 4px 2px 12px;
      border-bottom: 1px solid var(--border);
    }

    .site-subheader {
      grid-column: 1 / -1;
      margin: 0;
      max-width: 1100px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .brand-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    h1 {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: -0.035em;
      font-weight: 720;
      white-space: nowrap;
    }

    .title-clock {
      width: 23px;
      height: 23px;
      flex: 0 0 auto;
      stroke: currentColor;
      stroke-width: 1.85;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .title-icon-separator {
      color: var(--muted);
      font-size: 15px;
      line-height: 1;
      font-weight: 400;
      transform: translateY(-1px);
    }

    .title-help {
      width: 23px;
      height: 23px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--border-strong);
      border-radius: 50%;
      background: var(--surface);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
    }

    .title-help:hover { background: var(--hover); }

    .save-status-pill {
      min-height: 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 9px;
      border: 1px solid rgba(31, 122, 67, 0.42);
      border-radius: 999px;
      color: #145c32;
      background: rgba(70, 184, 111, 0.22);
      font-size: 10px;
      line-height: 1.2;
      font-weight: 750;
      white-space: nowrap;
      cursor: pointer;
      transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    .save-status-pill.warning {
      border-color: rgba(179, 126, 0, 0.48);
      color: #735100;
      background: rgba(245, 190, 45, 0.26);
    }

    body.dark .save-status-pill {
      color: #a9edbf;
      border-color: rgba(93, 204, 132, 0.45);
      background: rgba(48, 151, 85, 0.24);
    }

    body.dark .save-status-pill.warning {
      color: #ffe29a;
      border-color: rgba(255, 204, 77, 0.5);
      background: rgba(193, 138, 0, 0.28);
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface);
      cursor: pointer;
      transition: background 100ms ease, border-color 100ms ease, transform 70ms ease, opacity 100ms ease;
    }

    .icon-btn:hover:not(:disabled) {
      background: var(--hover);
      border-color: var(--border-strong);
    }

    .icon-btn:active:not(:disabled) { transform: translateY(1px); }

    .icon-btn:disabled {
      opacity: 0.34;
      cursor: default;
    }

    .icon-btn svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .font-btn {
      width: auto;
      min-width: 38px;
      padding: 0 9px;
      font-size: 13px;
      font-weight: 700;
    }

    .entry-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      gap: 8px;
      margin: 14px 0 13px;
    }

    .entry-row input,
    .modal-input,
    .inline-subtask-input {
      width: 100%;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      outline: none;
    }

    .entry-row input {
      min-height: 44px;
      padding: 9px 12px;
    }

    .entry-row input:focus,
    .modal-input:focus,
    .inline-subtask-input:focus {
      border-color: var(--focus);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
    }

    .entry-row input::placeholder,
    .modal-input::placeholder,
    .inline-subtask-input::placeholder { color: var(--muted); }

    .entry-add {
      width: 44px;
      height: 44px;
      background: var(--active);
      color: var(--active-text);
      border-color: var(--active);
    }

    .section { width: 100%; }

    .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 2px 8px;
    }

    .section-heading h2 {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 750;
    }

    .section-controls {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    .section-control-btn {
      width: 31px;
      height: 31px;
      border-radius: 8px;
    }

    .section-control-btn.active {
      color: var(--active-text);
      background: var(--active);
      border-color: var(--active);
    }

    .sort-status-pill {
      min-height: 27px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface-2);
      font-size: 10.5px;
      line-height: 1.2;
      white-space: normal;
    }

    .sort-status-pill.dirty {
      border-color: rgba(194, 150, 0, 0.48);
    }

    .sort-warning-text {
      padding: 2px 5px;
      border-radius: 999px;
      color: #725500;
      background: rgba(236, 190, 38, 0.24);
    }

    body.dark .sort-warning-text {
      color: #ffe89a;
      background: rgba(236, 190, 38, 0.18);
    }

    .section-title-icon {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: var(--text);
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .count {
      min-width: 26px;
      padding: 4px 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      background: var(--surface-2);
      font-size: 11px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .count.active {
      color: var(--active-text);
      background: var(--active);
      border-color: var(--active);
    }

    .task-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-height: 34px;
    }

    .center-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 17px 0;
      color: var(--muted);
    }

    .center-divider::before,
    .center-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--border-strong);
    }

    .center-divider span {
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .task-node { width: 100%; }

    .card {
      width: 100%;
      min-height: 56px;
      padding: 5px 8px 5px 6px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--task-card-bg, var(--surface));
      color: var(--task-font-color, var(--text));
      transition: border-color 100ms ease, background 100ms ease, opacity 100ms ease, transform 100ms ease;
    }

    .card.running { border-color: var(--border-strong); }
    .card.dragging { opacity: 0.32; }

    @keyframes finishedBlink {
      0%, 39.999% {
        border-color: rgba(210, 45, 45, 0.98);
        box-shadow: 0 0 0 4px rgba(210, 45, 45, 0.34), inset 0 0 0 1px rgba(210, 45, 45, 0.52);
      }
      40%, 100% {
        border-color: var(--border);
        box-shadow: none;
      }
    }

    .card.finished.finished-unacknowledged {
      animation: finishedBlink 5s steps(1, end) infinite;
    }

    

    

    

    .card.mirror-ghost {
      border: 2px solid rgba(64, 154, 112, 0.58);
      background: rgba(145, 220, 184, 0.27) !important;
      box-shadow: inset 0 0 0 1px rgba(102, 193, 150, 0.18);
      opacity: 0.82;
    }



    .mirror-prefix {
      font-weight: 780;
      letter-spacing: 0.01em;
    }

    .card.bulk-selected {
      outline: 2px solid color-mix(in srgb, var(--focus) 78%, transparent);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 14%, transparent);
    }

    .card.bulk-selected .grip {
      opacity: 1;
      cursor: grab;
    }

    .card-row {
      min-height: 44px;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
    }

    .grip {
      width: 22px;
      height: 32px;
      display: grid;
      place-items: center;
      color: var(--muted);
      cursor: grab;
      user-select: none;
      touch-action: none;
      font-size: 18px;
      letter-spacing: -3px;
    }

    .grip:active { cursor: grabbing; }

    .card-main {
      min-width: 0;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
    }

    .card-title {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: calc(15px * var(--card-font-scale, var(--font-scale)));
      line-height: 1.22;
      font-weight: 650;
    }

    .task-link,
    .task-link:visited {
      color: var(--link);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 1px;
    }

    .task-link:hover { text-decoration-thickness: 2px; }

    .card-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 16px;
    }

    .card-time {
      color: color-mix(in srgb, currentColor 72%, transparent);
      font-size: 18px;
      line-height: 1;
      font-weight: 720;
      letter-spacing: -0.025em;
      font-variant-numeric: tabular-nums;
    }

    .card.finished > .card-row .card-time { color: var(--danger); }

    .subtask-indicator {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: color-mix(in srgb, currentColor 68%, transparent);
      font-size: 11px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      user-select: none;
    }

    .subtask-indicator svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .card-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px;
    }

    .card-actions .icon-btn {
      width: 31px;
      height: 31px;
      border-radius: 8px;
      background: var(--surface-2);
    }

    .card-actions .icon-btn svg {
      width: 17px;
      height: 17px;
    }

    .card-actions .icon-btn:hover { background: var(--hover); }

    .card-actions .icon-btn.primary-state {
      background: var(--active);
      border-color: var(--active);
      color: var(--active-text);
    }

    .card-actions .delete-action {
      color: var(--danger);
      border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
      background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    }

    .card-actions .delete-action:hover {
      color: var(--danger);
      border-color: var(--danger);
      background: color-mix(in srgb, var(--danger) 13%, var(--surface));
    }

    .card-actions .priority-flag.p1 { color: #bf2424; }
    .card-actions .priority-flag.p2 { color: #9b7300; }
    .card-actions .priority-flag.p3 { color: #2869c7; }

    .priority-modal .modal-card {
      width: min(420px, 100%);
    }

    .priority-menu-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .priority-choice {
      min-height: 52px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
      transition: transform 70ms ease, border-color 100ms ease, filter 100ms ease;
    }

    .priority-choice:hover {
      border-color: var(--text);
      filter: brightness(0.98);
    }

    .priority-choice:active { transform: translateY(1px); }
    .priority-choice.p1 { background: rgba(220, 64, 64, 0.28); }
    .priority-choice.p2 { background: rgba(236, 190, 38, 0.30); }
    .priority-choice.p3 { background: rgba(64, 132, 232, 0.27); }
    .priority-choice.p4 { background: var(--surface-2); }

    .priority-menu-hint {
      margin: 10px 1px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .filter-modal .modal-card {
      width: min(480px, 100%);
    }

    .filter-priority-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
    }

    .filter-priority-choice {
      min-height: 40px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface-2);
      cursor: pointer;
      font-weight: 750;
    }

    .filter-priority-choice:hover {
      background: var(--hover);
      border-color: var(--border-strong);
    }

    .filter-priority-choice.active {
      color: var(--active-text);
      background: var(--active);
      border-color: var(--active);
    }

    body.dark .card-actions .icon-btn {
      color: #ffffff;
    }

    body.dark .card-actions .icon-btn.primary-state {
      color: #ffffff;
      background: var(--surface-2);
      border-color: var(--border-strong);
    }

    body.dark .card-actions .delete-action,
    body.dark .card-actions .delete-action:hover {
      color: #ffffff;
    }

    body.dark .card-actions .priority-flag.p1 { color: #ff7e7e; }
    body.dark .card-actions .priority-flag.p2 { color: #ffe070; }
    body.dark .card-actions .priority-flag.p3 { color: #85b7ff; }

    .card-actions .stop-icon svg rect {
      fill: currentColor;
      stroke: none;
    }

    .level-icon svg {
      width: 19px !important;
      height: 19px !important;
    }

    .children-list {
      margin: 6px 0 1px 27px;
      padding: 1px 0 0 8px;
      border-left: 1px solid var(--border);
      gap: 6px;
    }

    .inline-subtask-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px 34px;
      gap: 5px;
      padding: 2px 0 1px;
    }

    .inline-subtask-input {
      min-height: 36px;
      padding: 7px 10px;
      font-size: 13px;
    }

    .inline-subtask-row .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
    }

    .empty {
      width: 100%;
      padding: 13px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      color: var(--muted);
      background: var(--surface-2);
      text-align: center;
      font-size: 12px;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, 0.42);
    }

    .modal-overlay.show { display: grid; }

    .modal-card {
      width: min(520px, 100%);
      max-height: min(86vh, 720px);
      overflow: auto;
      padding: 15px;
      border: 1px solid var(--border-strong);
      border-radius: 13px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .modal-head h3 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.025em;
    }

    .modal-fields {
      display: grid;
      gap: 11px;
    }

    .modal-field {
      display: grid;
      gap: 5px;
    }

    .modal-field[hidden] { display: none; }

    .modal-label {
      margin-left: 1px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .modal-input {
      min-height: 42px;
      padding: 9px 11px;
      line-height: 1.3;
    }

    .modal-hint {
      min-height: 18px;
      margin: 7px 1px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .modal-hint.error { color: var(--danger); }

    .modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 13px;
    }

    .modal-actions-right {
      display: flex;
      gap: 7px;
      margin-left: auto;
    }

    .text-btn {
      min-height: 38px;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface-2);
      cursor: pointer;
    }

    .text-btn:hover {
      background: var(--hover);
      border-color: var(--border-strong);
    }

    .text-btn.save {
      color: var(--active-text);
      background: var(--active);
      border-color: var(--active);
    }

    .text-btn.mirror-timer-choice {
      color: #174d36;
      background: rgba(126, 210, 169, 0.28);
      border-color: rgba(66, 151, 108, 0.62);
      font-weight: 750;
    }

    .text-btn.mirror-timer-choice:hover {
      background: rgba(126, 210, 169, 0.42);
      border-color: rgba(49, 133, 91, 0.8);
    }

    body.dark .text-btn.mirror-timer-choice {
      color: #d9ffec;
      background: rgba(76, 171, 124, 0.24);
      border-color: rgba(111, 211, 160, 0.55);
    }

    .text-btn.delete {
      color: var(--danger);
      background: transparent;
    }

    .text-btn.reset-site,
    .text-btn.reset-site:hover {
      color: #ffffff;
      background: #b42318;
      border-color: #b42318;
      font-weight: 800;
      letter-spacing: 0.03em;
    }

    body.dark .text-btn.reset-site,
    body.dark .text-btn.reset-site:hover {
      color: #ffffff;
      background: #c92a21;
      border-color: #c92a21;
    }

    .reset-backup-wrap {
      margin-top: 13px;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-2);
    }

    .reset-backup-wrap p {
      margin: 0 0 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .confirm-copy {
      margin: 0;
      color: var(--text);
      line-height: 1.45;
    }

    .confirm-note {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .confirm-snooze {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 11px;
      color: var(--muted);
      font-size: 12px;
      cursor: pointer;
      user-select: none;
    }

    .confirm-snooze input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--danger);
    }

    .confirm-icon-btn {
      width: 46px;
      height: 42px;
    }

    .confirm-icon-btn svg {
      width: 22px;
      height: 22px;
    }

    .confirm-icon-btn.danger {
      color: var(--danger);
      border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
      background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    }

    .help-copy {
      display: grid;
      gap: 12px;
      color: var(--text);
      font-size: 13px;
      line-height: 1.45;
    }

    .help-copy p { margin: 0; }

    .help-grid {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: 7px 12px;
      align-items: baseline;
    }

    .help-grid dt {
      color: var(--text);
      font-weight: 750;
    }

    .help-grid dd {
      margin: 0;
      color: var(--muted);
    }

    .io-modal .modal-card { width: min(560px, 100%); }

    .io-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .io-button {
      min-height: 108px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-2);
      cursor: pointer;
    }

    .io-button:hover {
      background: var(--hover);
      border-color: var(--border-strong);
    }

    .io-button svg {
      width: 34px;
      height: 34px;
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .io-divider {
      height: 1px;
      margin: 14px 0;
      background: var(--border);
    }

    .backup-grid {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .backup-card {
      width: 100%;
      min-height: 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 5px 8px 5px 12px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--task-card-bg, var(--surface));
      color: var(--task-font-color, var(--text));
      cursor: pointer;
      overflow-wrap: anywhere;
      transition: border-color 100ms ease, background 100ms ease, transform 70ms ease;
    }

    .backup-card:hover {
      background: color-mix(in srgb, var(--task-card-bg, var(--surface)) 88%, var(--hover));
      border-color: var(--border-strong);
    }

    .backup-card:active { transform: translateY(1px); }

    .backup-card-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .backup-card strong {
      min-width: 0;
      font-size: calc(15px * var(--font-scale));
      line-height: 1.22;
      font-weight: 650;
      overflow-wrap: anywhere;
    }

    .backup-card span {
      color: color-mix(in srgb, currentColor 68%, transparent);
      font-size: 11px;
      line-height: 1.2;
    }

    .backup-card-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .backup-card-actions .icon-btn {
      width: 31px;
      height: 31px;
      border-radius: 8px;
      background: var(--surface-2);
    }

    .backup-card-actions .icon-btn svg {
      width: 17px;
      height: 17px;
    }

    .backup-empty {
      min-height: 56px;
      display: grid;
      place-items: center;
      padding: 10px 12px;
      border: 1px dashed var(--border);
      border-radius: 11px;
      color: var(--muted);
      background: var(--surface-2);
      font-size: 12px;
      text-align: center;
    }

    .backup-save-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
    }

    .backup-save-row .text-btn { min-width: 112px; }

    .theme-modal .modal-card { width: min(980px, 100%); }

    .theme-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .theme-divider { background: var(--border); }

    .theme-pane { min-width: 0; }

    .theme-pane h4 {
      margin: 0 0 10px;
      font-size: 13px;
      letter-spacing: 0.04em;
    }

    .picker-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      gap: 9px;
      align-items: stretch;
    }

    .color-picker { min-width: 0; }

    .sv-picker {
      position: relative;
      height: 156px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      cursor: crosshair;
      touch-action: none;
      overflow: hidden;
      background-color: #ff0000;
      background-image:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, rgba(255,255,255,0));
    }

    .picker-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.72);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .hue-slider {
      width: 100%;
      margin: 9px 0 0;
      accent-color: currentColor;
    }

    .opacity-slider {
      width: 24px;
      height: 156px;
      margin: 0;
      writing-mode: vertical-lr;
      direction: rtl;
      accent-color: currentColor;
    }

    .theme-values {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
    }

    .theme-preview-wrap {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .theme-preview-label {
      margin: 0 0 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .theme-preview-card {
      min-height: 64px;
      display: flex;
      align-items: center;
      padding: 11px 13px;
      border: 1px solid var(--border);
      border-radius: 11px;
      font-size: calc(15px * var(--font-scale));
      font-weight: 650;
    }

    .theme-reset { margin-right: auto; }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 20px;
      z-index: 2000;
      max-width: min(92vw, 680px);
      padding: 9px 13px;
      border-radius: 9px;
      color: var(--active-text);
      background: var(--active);
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: opacity 140ms ease, transform 140ms ease;
      text-align: center;
      font-size: 13px;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .toast.error {
      color: #ffffff;
      background: #b42318;
    }



    .history-button {
      min-height: 34px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--surface-2);
      font-size: 11px;
      font-weight: 760;
      white-space: nowrap;
      cursor: pointer;
    }

    .history-button:hover { background: var(--hover); border-color: var(--border-strong); }

    .expiration-inline {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: color-mix(in srgb, currentColor 70%, transparent);
      font-size: 12px;
      line-height: 1.2;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }

    .expiration-toggle {
      width: 25px;
      height: 25px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--surface-2);
      cursor: pointer;
    }

    .expiration-toggle:hover { background: var(--hover); }
    .expiration-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    @keyframes dynamicAdjustFlash {
      0%, 74.999% { background: rgba(232, 184, 28, 0.28); box-shadow: none; }
      75%, 100% { background: rgba(255, 214, 46, 0.62); box-shadow: 0 0 0 3px rgba(255, 210, 24, 0.22); }
    }

    .dynamic-adjust-btn {
      min-height: 28px;
      max-width: 100%;
      padding: 4px 8px;
      border: 1px solid rgba(181, 129, 0, 0.68);
      border-radius: 8px;
      color: #654800;
      background: rgba(232, 184, 28, 0.28);
      font-size: 10px;
      line-height: 1.2;
      font-weight: 800;
      cursor: pointer;
      animation: dynamicAdjustFlash 4s steps(1, end) infinite;
    }

    body.dark .dynamic-adjust-btn { color: #fff0a3; border-color: rgba(255, 211, 74, 0.66); }

    .backup-mode-row {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0 0 10px;
    }

    .freeze-mode-toggle {
      flex: 1 1 auto;
      min-height: 38px;
      padding: 7px 11px;
      border: 1px solid transparent;
      border-radius: 9px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: filter 100ms ease, transform 70ms ease;
    }

    .freeze-mode-toggle:hover { filter: brightness(1.05); }
    .freeze-mode-toggle:active { transform: translateY(1px); }
    .freeze-mode-toggle.dynamic { background: #7b4bb7; border-color: #6a3ea2; }
    .freeze-mode-toggle.on { background: #2f8a55; border-color: #267448; }
    .freeze-mode-toggle.off { background: #b83a34; border-color: #9f302b; }

    .backup-mode-help {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-weight: 850;
    }

    .history-modal .modal-card { width: min(1120px, calc(100vw - 36px)); max-height: calc(100vh - 36px); }
    .history-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, .75fr)); gap: 8px; align-items: end; }
    .history-type-wrap { margin-top: 10px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
    .history-type-title { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
    .history-type-list { display: flex; flex-wrap: wrap; gap: 6px 10px; }
    .history-type-option { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; }
    .history-type-option input { margin: 0; accent-color: var(--active); }
    .history-results-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 7px; }
    .history-results-count { color: var(--muted); font-size: 11px; font-weight: 700; }
    .history-log-list { display: grid; gap: 5px; max-height: 52vh; overflow: auto; padding-right: 3px; }
    .history-entry { display: grid; grid-template-columns: 190px 150px minmax(0,1fr); gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 11px; line-height: 1.3; }
    .history-entry-time { color: var(--muted); font-variant-numeric: tabular-nums; }
    .history-entry-type { font-weight: 800; }
    .history-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 9px; color: var(--muted); text-align: center; font-size: 12px; }

    .dynamic-restore-modal .modal-card { width: min(720px, calc(100vw - 36px)); }
    .dynamic-restore-modal .confirm-copy { white-space: pre-line; }
    .dynamic-restore-emphasis { margin-top: 13px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface-2); font-weight: 850; text-decoration: underline; line-height: 1.5; }
    .dynamic-understand-btn[disabled] { opacity: .55; cursor: not-allowed; }

    .help-context-download {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      margin: 8px 0 10px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }
    .help-resource-card {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-2);
    }
    .help-context-download .icon-btn {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      color: var(--text);
      text-decoration: none;
    }
    .help-context-download .chatgpt-helper-btn {
      padding: 5px;
      overflow: hidden;
      background: #ffffff;
      border-color: var(--border-strong);
    }
    .help-context-download .chatgpt-helper-btn:hover {
      background: #ffffff;
      border-color: var(--text);
    }
    .chatgpt-official-logo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .help-context-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .help-context-copy strong { color: var(--text); }
    @media (max-width: 700px) {
      .help-context-download { grid-template-columns: 1fr; }
    }

    .mobile-blocker {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: grid;
      place-items: center;
      padding: 24px;
      background: var(--bg);
      color: var(--text);
    }
    .mobile-blocker[hidden] { display: none; }
    .mobile-blocker-card { width: min(620px, 100%); padding: 24px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
    .mobile-blocker-card h2 { margin: 0 0 12px; font-size: 22px; }
    .mobile-blocker-card p { margin: 0; color: var(--muted); line-height: 1.55; white-space: pre-line; }

    @media (max-width: 900px) {
      .history-filters { grid-template-columns: 1fr 1fr; }
      .history-entry { grid-template-columns: 1fr; }
    }
    @media (max-width: 820px) {
      .app {
        width: calc(100vw - 18px);
        padding-top: 8px;
      }

      .topbar {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .site-subheader { grid-column: 1; }

      .brand-wrap { flex-wrap: wrap; }
      .save-status-pill { white-space: normal; text-align: center; }

      .section-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .section-controls {
        width: 100%;
        justify-content: flex-start;
      }

      .toolbar {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .card-row {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 7px;
      }

      .grip { width: 18px; }

      .card-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 2px;
      }

      .card-actions .icon-btn {
        width: 35px;
        height: 34px;
      }

      .children-list {
        margin-left: 17px;
        padding-left: 6px;
      }

      .help-grid { grid-template-columns: 1fr; }
      .help-grid dd { margin-bottom: 4px; }
      .theme-layout { grid-template-columns: 1fr; }
      .theme-divider { height: 1px; }
    }


    /* v9: sticky workspace, layout toggle, clipboard staging */
    :root { --sticky-shell-height: 0px; }

    .sticky-shell {
      position: sticky;
      top: 0;
      z-index: 120;
      background: var(--bg);
      padding-top: 2px;
      padding-bottom: 8px;
      box-shadow: 0 8px 16px color-mix(in srgb, var(--bg) 88%, transparent);
    }

    .sections-wrap { width: 100%; min-width: 0; }
    .sections-wrap .section { min-width: 0; }

    body.layout-side-by-side .sections-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    body.layout-side-by-side .sections-wrap > .section {
      align-self: stretch;
      min-height: 100%;
    }

    body.layout-side-by-side .center-divider { display: none; }

    body.layout-side-by-side .section-heading {
      position: sticky;
      top: var(--sticky-shell-height);
      z-index: 95;
      background: var(--bg);
      padding-top: 10px;
      padding-bottom: 8px;
      box-shadow: 0 7px 12px color-mix(in srgb, var(--bg) 90%, transparent);
    }

    .toolbar-text-btn {
      width: auto;
      min-width: 38px;
      padding: 0 10px;
      font-size: 11px;
      font-weight: 750;
      white-space: nowrap;
    }

    #moveSectionBtn[hidden] { display: none !important; }

    #scrollTopBtn {
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    }

    #scrollTopBtn.scrolled {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
    }

    .card {
      user-select: none;
      -webkit-user-select: none;
    }

    .card input, .card textarea, .card [contenteditable="true"] {
      user-select: text;
      -webkit-user-select: text;
    }

    .move-section-copy-actions {
      margin-top: 8px;
    }


    .card.clipboard-staged {
      outline: 3px dashed rgba(35, 113, 220, 0.9);
      outline-offset: 2px;
      box-shadow: 0 0 0 5px rgba(35, 113, 220, 0.14), var(--card-shadow, none);
    }

    body.dark .card.clipboard-staged {
      outline-color: rgba(115, 174, 255, 0.95);
      box-shadow: 0 0 0 5px rgba(70, 140, 235, 0.18), var(--card-shadow, none);
    }

    .move-section-warning {
      margin: 2px 0 8px;
      font-size: 13px;
      font-weight: 750;
      text-align: center;
    }

    .move-section-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }

    @media (max-width: 1050px) {
      body.layout-side-by-side .sections-wrap { gap: 10px; }
      .toolbar-text-btn { padding: 0 7px; }
    }