* { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --primary:#1a56db; --primary-dark:#1e3a8a;
      --primary-soft:rgba(26,86,219,.08); --primary-line:rgba(26,86,219,.30);
      --bg:#e8dfd0; --bg-2:#ddd4c5; --border:#c4b7a4; --border-soft:#d4c8b8;
      --text:#111111; --text-muted:#64748b; --text-faint:#94a3b8;
      --warn-bg:#fffbeb; --warn-border:#d97706; --warn-text:#92400e;
      --danger:#dc2626; --danger-bg:#fef2f2;
      --note-bg:#eff6ff; --note-text:#1e40af;
      --green:#16a34a; --green-soft:rgba(22,163,74,.10);
      --bg-sidebar:#1a1c20; --bg-job:#14182a; --row-hover:rgba(255,255,255,.04);
    }
    body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; overflow:hidden; }

    /* ── App layout: sidebar + main column ── */
    .app-layout { display:flex; flex:1; height:100vh; overflow:hidden; }
    .app-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

    /* ── Sidebar ── */
    .sidebar { width:380px; background:var(--bg-sidebar); border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; transition:width 220ms cubic-bezier(.2,.7,.3,1); flex-shrink:0; overflow:hidden; }
    .sidebar.collapsed { width:64px; overflow:hidden; }
    .sidebar.collapsed .sb-job-sublist { display:none; }
    .sidebar.collapsed .sb-header { justify-content:center; padding:12px 8px 10px; }
    .sidebar.collapsed .sb-logo { display:none; }
    .sidebar.collapsed .sb-collapse-btn { margin-left:0; }
    .sb-header { display:flex; align-items:center; gap:10px; padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
    .sb-logo { width:28px; height:28px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-radius:6px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:12px; flex-shrink:0; }
    .sb-title { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; color:white; transition:opacity 150ms; }
    .sidebar.collapsed .sb-title { opacity:0; width:0; }
    .sb-collapse-btn { margin-left:auto; color:#6a8caa; cursor:pointer; font-size:14px; padding:4px 6px; border-radius:4px; transition:all 100ms; flex-shrink:0; }
    .sb-collapse-btn:hover { background:var(--row-hover); color:white; }
    /* Job block */
    .sb-job-block { margin:8px 10px 10px; padding:12px; background:var(--bg-job); border:1px solid var(--primary-line); border-radius:8px; flex-shrink:0; transition:all 220ms cubic-bezier(.2,.7,.3,1); }
    .sidebar.collapsed .sb-job-block { margin:8px auto; padding:6px 0; background:transparent; border:none; width:100%; text-align:center; }
    .sb-job-label { font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#6a8caa; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
    .sidebar.collapsed .sb-job-label { display:none; }
    .sb-job-info-icon { color:#4b5566; cursor:help; font-size:11px; border:1px solid #4b5566; border-radius:50%; width:13px; height:13px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
    .sb-job-info-icon:hover { color:#6a8caa; border-color:#6a8caa; }
    .sb-job-pill { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius:5px; cursor:pointer; font-weight:600; font-size:13.5px; color:white; transition:all 100ms; margin-bottom:8px; position:relative; }
    .sb-job-pill:hover { border-color:var(--primary-line); background:rgba(59,130,246,.06); }
    .sidebar.collapsed .sb-job-pill { margin:0 auto 0; padding:6px; width:36px; height:36px; justify-content:center; background:var(--bg-job); border-color:var(--primary-line); }
    .sidebar.collapsed .sb-job-pill .sb-pill-name, .sidebar.collapsed .sb-job-pill .sb-pill-rename, .sidebar.collapsed .sb-job-pill .job-caret { display:none; }
    .sidebar.collapsed .sb-job-pill .briefcase { font-size:16px; }
    .briefcase { font-size:14px; flex-shrink:0; }
    .sb-pill-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sb-pill-rename { color:#6a8caa; font-size:11px; padding:2px 4px; border-radius:3px; cursor:pointer; opacity:0; transition:opacity 100ms,background 100ms; }
    .sb-job-pill:hover .sb-pill-rename { opacity:1; }
    .sb-pill-rename:hover { background:rgba(255,255,255,.06); color:white; }
    .job-caret { color:#6a8caa; font-size:10px; flex-shrink:0; }
    .sb-job-meta { font-size:11.5px; color:#6a8caa; margin-bottom:10px; line-height:1.45; }
    .sidebar.collapsed .sb-job-meta { display:none; }
    .sb-job-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .sidebar.collapsed .sb-job-actions { display:none; }
    .sb-job-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 8px; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:4px; color:#6a8caa; font-size:11.5px; cursor:pointer; transition:background 100ms,color 100ms,border-color 100ms; }
    .sb-job-btn:hover { background:var(--row-hover); color:white; border-color:#6a8caa; }
    .sb-job-btn.locked { color:var(--primary); border-color:var(--primary-line); }
    /* Job menu dropdown */
    .sb-job-menu { position:absolute; top:100%; left:0; right:0; margin-top:4px; background:#0e0e10; border:1px solid rgba(255,255,255,.12); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.5); padding:4px 0; z-index:200; display:none; }
    .sb-job-menu.open { display:block; }
    .sb-job-menu-new { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; color:var(--primary); font-weight:500; font-size:13px; transition:background 80ms; }
    .sb-job-menu-new:hover { background:var(--row-hover); }
    .sb-job-menu-divider { height:1px; background:rgba(255,255,255,.06); margin:4px 0; }
    .sb-job-menu-item { display:flex; align-items:center; gap:10px; padding:7px 12px; cursor:pointer; transition:background 80ms; }
    .sb-job-menu-item:hover { background:var(--row-hover); }
    .sb-job-menu-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; }
    .sb-job-menu-dot.done { background:var(--green); }
    .sb-job-menu-info { flex:1; min-width:0; }
    .sb-job-menu-name { font-size:13px; font-weight:500; color:white; }
    .sb-job-menu-item.active-job .sb-job-menu-name { color:var(--primary); }
    .sb-job-menu-date { font-size:11px; color:#6a8caa; }
    .sb-job-menu-actions { display:flex; gap:4px; color:#4b5566; font-size:13px; }
    .sb-job-menu-actions span { padding:2px 6px; border-radius:3px; cursor:pointer; }
    .sb-job-menu-actions span:hover { background:var(--row-hover); color:white; }
    /* Search */
    .sb-search { margin:8px 10px; display:flex; align-items:center; gap:8px; padding:7px 10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:6px; font-size:12.5px; color:#6a8caa; cursor:text; flex-shrink:0; }
    .sb-search:hover { background:rgba(255,255,255,.06); }
    .sb-search-text { flex:1; white-space:nowrap; overflow:hidden; }
    .sb-search-input { flex:1; background:transparent; border:none; outline:none; color:#e2e8f0; font-size:12.5px; min-width:0; }
    .sb-search-input::placeholder { color:#6a8caa; }
    .sb-search-icon { flex-shrink:0; }
    .sidebar.collapsed .sb-search { margin:8px auto; padding:7px 0; width:44px; height:44px; justify-content:center; align-items:center; }
    .sidebar.collapsed .sb-search-text, .sidebar.collapsed .sb-search-input { display:none; }
    /* Divider */
    .sb-divider { height:1px; background:rgba(255,255,255,.06); margin:0 10px 6px; flex-shrink:0; }
    .sidebar.collapsed .sb-divider { margin:6px 0; }
    /* Checklist groups */
    .sb-checklist-groups { flex:1; overflow-y:auto; overflow-x:hidden; }
    .sb-checklist-groups::-webkit-scrollbar { width:4px; }
    .sb-checklist-groups::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:2px; }
    .sb-section { padding:2px 0; }
    .sb-section-header { display:flex; align-items:center; gap:8px; padding:6px 8px; color:var(--text); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; user-select:none; transition:color 100ms; }
    .sb-section-header:hover { color:white; }
    .sb-chevron { font-size:11px; transition:transform 150ms ease; width:12px; display:inline-flex; justify-content:center; flex-shrink:0; }
    .sb-section.expanded .sb-chevron { transform:rotate(90deg); }
    .sb-section-body { display:none; padding:2px 0; }
    .sb-section.expanded .sb-section-body { display:block; }
    .sidebar.collapsed .sb-section-header { justify-content:center; padding:4px 0; border-top:1px solid rgba(255,255,255,.06); }
    .sidebar.collapsed .sb-section-label, .sidebar.collapsed .sb-chevron { display:none; }
    .sidebar.collapsed .sb-section-body { display:block; }
    .sb-item { display:flex; align-items:center; gap:10px; padding:7px 14px 7px 24px; cursor:pointer; color:#e2e8f0; font-size:13px; border-left:2px solid transparent; transition:background 80ms,border-color 80ms; }
    .sb-item:hover { background:var(--row-hover); }
    .sb-item.active { background:linear-gradient(90deg,rgba(59,130,246,.22) 0%,rgba(59,130,246,.07) 100%); border-left-color:var(--primary); border-left-width:3px; }
    .sb-item.active .sb-item-name { color:rgba(255,255,255,1); font-weight:500; }
    .sidebar.collapsed .sb-item { padding:11px 0; justify-content:center; border-left:none; min-height:44px; }
    .sidebar.collapsed .sb-item.active { background:rgba(59,130,246,.22); }
    .sb-item-icon { width:18px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; color:#6a8caa; }
    .sidebar.collapsed .sb-item-icon { width:24px; height:24px; font-size:16px; }
    .sb-item.active .sb-item-icon { color:var(--primary); }
    .sb-item-content { flex:1; min-width:0; }
    .sidebar.collapsed .sb-item-content { display:none; }
    .sb-item-name { font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sb-item-meta { display:flex; align-items:center; gap:6px; margin-top:2px; }
    .sb-item-prog { flex:1; height:3px; background:rgba(255,255,255,.10); border-radius:2px; overflow:hidden; max-width:90px; }
    .sb-item-prog-fill { height:100%; background:var(--primary); transition:width .3s; }
    .sb-item.done .sb-item-prog-fill { background:var(--green); }
    .sb-item-prog-text { font-size:11px; color:rgba(255,255,255,0.4); font-variant-numeric:tabular-nums; }
    .sb-item.done .sb-item-prog-text { color:var(--green); }
    /* ⋯ more-actions button on checklist rows */
    .sb-item-more { flex-shrink:0; background:none; border:none; color:#6a8caa; font-size:16px; line-height:1; padding:2px 6px; border-radius:4px; cursor:pointer; opacity:0; transition:opacity .12s, background .1s; pointer-events:none; }
    .sb-item:hover .sb-item-more { opacity:1; pointer-events:auto; }
    .sb-item.active .sb-item-more { opacity:1; pointer-events:auto; }
    .sb-item-more:hover { background:rgba(255,255,255,.10); color:#fff; }
    .sidebar.collapsed .sb-item-more { display:none; }
    /* Job sub-rows under each checklist */
    .sb-job-sublist { padding:0 0 4px 0; }
    .sb-job-sub-item { display:flex; align-items:center; gap:7px; padding:4px 10px 4px 38px; font-size:12.5px; font-weight:400; cursor:pointer; border-radius:4px; transition:background 80ms; color:rgba(255,255,255,0.55); }
    .sb-job-sub-new { display:flex; align-items:center; gap:7px; padding:4px 10px 4px 38px; font-size:11.5px; font-weight:400; cursor:pointer; border-radius:4px; transition:background 80ms; color:rgba(59,130,246,0.5); }
    .sb-job-sub-item:hover { background:var(--row-hover); color:rgba(255,255,255,0.85); }
    .sb-job-sub-new:hover { background:var(--row-hover); color:rgba(59,130,246,0.8); }
    .sb-job-sub-item.active-job { color:rgba(255,255,255,0.7); font-weight:500; border-left:2px solid var(--primary); padding-left:36px; }
    .sb-job-sub-icon { font-size:11px; width:14px; text-align:center; flex-shrink:0; }
    .sb-job-sub-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sb-job-sub-prog { font-size:10.5px; color:#6a8caa; font-variant-numeric:tabular-nums; flex-shrink:0; }
    .sb-job-sub-more { opacity:0; font-size:13px; color:#6a8caa; padding:0 4px; border-radius:3px; transition:opacity 120ms, background 80ms; flex-shrink:0; }
    .sb-job-sub-item:hover .sb-job-sub-more, .sb-job-sub-item.active-job .sb-job-sub-more { opacity:1; }
    .sb-job-sub-more:hover { background:rgba(255,255,255,.10); color:#e2e8f0; }
    /* Job popover */
    .sb-job-popover { position:fixed; z-index:500; min-width:180px; background:#1e2a3a; border:1px solid rgba(255,255,255,.12); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:4px 0; display:none; }
    .sb-job-popover.open { display:block; }
    .sb-job-pop-item { padding:7px 14px; font-size:13px; color:#cbd5e1; cursor:pointer; transition:background 80ms; }
    .sb-job-pop-item:hover { background:rgba(59,130,246,.15); color:#e2e8f0; }
    .sb-job-pop-danger { color:#f87171; }
    .sb-job-pop-danger:hover { background:rgba(220,38,38,.12); color:#fca5a5; }
    .sb-job-pop-divider { height:1px; background:rgba(255,255,255,.07); margin:3px 0; }
    /* Footer */
    .sb-footer { margin-top:auto; padding:8px 10px; border-top:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .sb-footer-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; transition:all 100ms; border:1px solid transparent; background:none; }
    .sb-footer-new { background:rgba(59,130,246,.12); color:var(--primary); border-color:rgba(59,130,246,.25); }
    .sb-footer-new:hover { background:rgba(59,130,246,.22); border-color:var(--primary); }
    .sb-footer-edit { color:#6a8caa; border-color:rgba(255,255,255,.1); }
    .sb-footer-edit:hover { color:white; border-color:#6a8caa; }
    .sb-footer-edit.active { background:rgba(59,130,246,.12); color:var(--primary); border-color:rgba(59,130,246,.25); }
    .sidebar.collapsed .sb-footer { padding:10px 0; justify-content:center; }
    .sidebar.collapsed .sb-footer-text { display:none; }
    /* Checklist R/W lock button (topbar) */
    .cl-lock-btn { background:none; border:none; font-size:15px; cursor:pointer; opacity:.55; padding:3px 5px; border-radius:5px; transition:opacity 100ms, color 100ms; margin-left:4px; flex-shrink:0; }
    .cl-lock-btn:hover { opacity:1; }
    .cl-lock-btn.unlocked { opacity:1; color:var(--primary); }
    /* Edit mode banner */
    .sb-edit-banner { display:flex; align-items:center; gap:8px; padding:7px 14px; background:rgba(59,130,246,.1); border-bottom:1px solid rgba(59,130,246,.2); font-size:12px; color:var(--primary); flex-shrink:0; }
    /* Sidebar edit affordances */
    .sb-group-edit-actions { margin-left:auto; display:flex; align-items:center; gap:4px; opacity:0; transition:opacity 100ms; }
    .sb-section-header:hover .sb-group-edit-actions { opacity:1; }
    .sb-group-rename, .sb-group-delete { background:none; border:none; cursor:pointer; font-size:12px; padding:2px 5px; border-radius:4px; color:#6a8caa; transition:all 80ms; }
    .sb-group-rename:hover { color:var(--primary); background:rgba(59,130,246,.12); }
    .sb-group-delete:hover { color:var(--danger); background:rgba(220,38,38,.1); }
    .sb-section-header .rename-input { background:rgba(0,0,0,0.4); border:1px solid var(--primary); border-radius:3px; padding:2px 6px; color:white; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; outline:none; flex:1; min-width:0; box-shadow:0 0 0 3px rgba(59,130,246,0.15); font-family:inherit; }
    .sb-group-drag, .sb-drag-handle { cursor:grab; color:#6a8caa; font-size:12px; padding:0 3px; user-select:none; letter-spacing:-1px; }
    .sb-item[draggable="true"]:active { cursor:grabbing; }
    .sb-item.sb-dragging { opacity:.35; }
    .sb-item.sb-drag-over { border-top:2px solid var(--primary); margin-top:-1px; }
    .sb-item.sb-drag-over-after { border-bottom:2px solid var(--primary); margin-bottom:-1px; }
    .sb-section[draggable="true"] { cursor:default; }
    .sb-section.sb-dragging { opacity:.35; }
    .sb-section.sb-drag-over > .sb-section-header { border-top:2px solid var(--primary); }
    .sb-section.sb-drag-over-after > .sb-section-header { border-bottom:2px solid var(--primary); }
    .sb-add-category-btn { margin:6px 10px; padding:8px 12px; border:1.5px dashed rgba(59,130,246,.4); border-radius:7px; font-size:12px; color:var(--primary); cursor:pointer; text-align:center; transition:all 100ms; }
    .sb-add-category-btn:hover { border-color:var(--primary); background:rgba(59,130,246,.08); }
    /* New-checklist modal */
    @keyframes slideUp { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
    .ncl-modal { background:#1a1a1d; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:24px; width:460px; max-width:94vw; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.6); animation:slideUp 180ms ease; }
    .ncl-modal h2 { font-size:15px; font-weight:700; color:#e2e8f0; margin-bottom:18px; }
    .ncl-label { display:block; font-size:11px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
    .ncl-input { width:100%; box-sizing:border-box; background:#111; border:1.5px solid rgba(255,255,255,.12); border-radius:7px; padding:8px 11px; font-size:13px; color:#e2e8f0; font-family:inherit; outline:none; margin-bottom:14px; transition:border-color 120ms; }
    .ncl-input:focus { border-color:var(--primary); }
    .ncl-textarea { resize:vertical; min-height:52px; line-height:1.4; }
    .ncl-cat-wrap { position:relative; margin-bottom:14px; }
    .ncl-select { display:flex; align-items:center; justify-content:space-between; background:#111; border:1.5px solid rgba(255,255,255,.12); border-radius:7px; padding:8px 11px; font-size:13px; color:#e2e8f0; cursor:pointer; transition:border-color 120ms; user-select:none; }
    .ncl-select:hover { border-color:#6a8caa; }
    .ncl-select-arrow { color:#6a8caa; }
    .ncl-cat-dd { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#1a1a1d; border:1px solid rgba(255,255,255,.14); border-radius:7px; box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:300; display:none; overflow:hidden; }
    .ncl-cat-dd.open { display:block; }
    .ncl-cat-option { padding:8px 12px; font-size:13px; color:#e2e8f0; cursor:pointer; transition:background 80ms; }
    .ncl-cat-option:hover { background:rgba(255,255,255,.06); }
    .ncl-cat-divider { border-top:1px solid rgba(255,255,255,.08); margin:2px 0; }
    .ncl-cat-new-item { padding:8px 12px; font-size:13px; color:var(--primary); cursor:pointer; font-weight:500; transition:background 80ms; }
    .ncl-cat-new-item:hover { background:rgba(59,130,246,.1); }
    .ncl-newcat-wrap { margin-top:-8px; margin-bottom:14px; }
    .ncl-icon-grid { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
    .ncl-icon-btn { width:38px; height:38px; border-radius:8px; border:2px solid rgba(255,255,255,.1); background:#111; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 120ms; }
    .ncl-icon-btn:hover { border-color:#6a8caa; background:rgba(255,255,255,.06); }
    .ncl-icon-btn.selected { border-color:var(--primary); background:rgba(59,130,246,.15); }
    .ncl-footer { display:flex; gap:8px; justify-content:flex-end; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
    /* dark modal-cancel override for dark modal */
    .ncl-modal .modal-cancel-btn { background:#222; border-color:rgba(255,255,255,.15); color:#94a3b8; }
    .ncl-modal .modal-cancel-btn:hover { background:#333; }
    /* Body-level tooltip */
    .cotf-tooltip { position:fixed; background:#0e0e10; border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:9px 11px; font-size:11.5px; line-height:1.45; color:#e2e8f0; width:240px; z-index:10000; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.5); opacity:0; transition:opacity 100ms ease; white-space:normal; }
    .cotf-tooltip.show { opacity:1; }
    .cotf-tooltip::after { content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:rgba(255,255,255,.14); }
    .cotf-tooltip.right { width:auto; max-width:220px; }
    .cotf-tooltip.right::after { bottom:auto; top:50%; left:-7px; transform:translateY(-50%); border:6px solid transparent; border-right-color:rgba(255,255,255,.14); }
    /* Hide old nav elements now in sidebar */
    .job-selector-wrap, .tab-bar-row { display:none !important; }
    /* Topbar breadcrumb */
    .topbar-breadcrumb { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:8px; }

    /* Header */
    .header { background:#334155; color:white; display:flex; align-items:stretch; box-shadow:0 2px 10px rgba(0,0,0,.25); z-index:20; flex-shrink:0; }
    .header-left { display:flex; align-items:center; gap:14px; padding:12px 20px; flex:1; min-width:0; }
    .header-title { font-size:17px; font-weight:700; white-space:nowrap; }
    .search-wrap { flex:1; max-width:200px; position:relative; }
    .search-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.65; pointer-events:none; }
    .search-wrap input { width:100%; padding:8px 12px 8px 34px; border:none; border-radius:8px; background:rgba(255,255,255,.15); color:white; font-size:14px; outline:none; }
    .search-wrap input::placeholder { color:rgba(255,255,255,.55); }
    .search-wrap input:focus { background:rgba(255,255,255,.25); }
    .progress-badge { background:rgba(255,255,255,.15); border-radius:20px; padding:4px 13px; font-size:13px; font-weight:600; white-space:nowrap; }
    .collapse-btn { background:rgba(255,255,255,.15); border:none; border-radius:8px; color:white; font-size:12px; font-weight:600; padding:6px 11px; cursor:pointer; white-space:nowrap; opacity:.85; transition:background .15s; }
    .collapse-btn:hover { background:rgba(255,255,255,.28); opacity:1; }

    /* Tabs */
    .tab-bar-row { display:flex; align-items:stretch; flex-shrink:0; }
    .tab-bar { background:#e0d5c4; border-bottom:2px solid var(--border); display:flex; overflow-x:auto; padding:0 16px; flex:1; gap:2px; }
    .tab-bar::-webkit-scrollbar { display:none; }
    /* Content toolbar — Search + View, sits between tabs and checklist content */
    .content-toolbar { display:flex; align-items:stretch; background:#ede6da; border-bottom:1px solid var(--border); flex-shrink:0; }
    .ct-checklist-zone { flex:1; display:flex; align-items:center; gap:10px; padding:6px 14px; min-width:0; }
    .ct-search-wrap { position:relative; flex:1; max-width:280px; }
    .ct-search-wrap svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); opacity:.45; pointer-events:none; color:var(--text); }
    .ct-search-wrap input { width:100%; padding:6px 12px 6px 30px; border:1px solid var(--border); border-radius:7px; background:rgba(255,255,255,.6); color:var(--text); font-size:13px; outline:none; transition:background .15s, border-color .15s; }
    .ct-search-wrap input::placeholder { color:var(--text-muted); }
    .ct-search-wrap input:focus { background:white; border-color:var(--primary); }
    .ct-view-btn { background:none; border:none; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-muted); padding:5px 10px; border-radius:6px; white-space:nowrap; transition:background .15s, color .15s; }
    .ct-view-btn:hover { background:rgba(0,0,0,.07); color:var(--primary); }
    /* View dropdown: open to the right, compact width */
    #viewDD { left:0; right:auto; min-width:160px; }
    /* Sidebar search empty state */
    .sb-empty-state { padding:14px 16px; font-size:12px; color:var(--text-faint,#6a8caa); text-align:center; }
    .tab { padding:11px 14px 11px 18px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:all .15s; user-select:none; display:flex; align-items:center; gap:5px; }
    .tab:hover { color:var(--primary); }
    .tab.active { color:var(--primary); border-bottom-color:var(--primary); }
    .tab-label { flex:1; }
    .tab-close { font-size:11px; opacity:0; color:#94a3b8; padding:1px 4px; border-radius:3px; transition:all .12s; line-height:1; flex-shrink:0; }
    .tab:hover .tab-close { opacity:1; }
    .tab-close:hover { color:var(--danger)!important; background:var(--danger-bg); }
    .tab-rename-input { font-size:13px; font-weight:600; border:none; border-bottom:2px solid var(--primary); outline:none; background:transparent; color:var(--primary); width:140px; padding:0 2px; font-family:inherit; }
    .tab-add { padding:11px 14px; font-size:18px; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .15s; }
    .tab-add:hover { color:var(--primary); }

    /* Layout */
    .main { flex:1; display:flex; overflow:hidden; }
    .checklist-col { display:flex; flex-direction:column; flex:1; min-width:0; overflow:hidden; }
    .checklist-scroll { flex:1; overflow-y:auto; padding:10px 14px; min-width:0; }


    /* ── Slide-over detail panel ── */
    .so-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200; }
    .so-backdrop.open { display:block; }
    .slide-over { position:fixed; top:0; right:0; bottom:0; width:480px; max-width:92vw; background:#f0e9de; border-left:2px solid var(--border); display:flex; flex-direction:column; overflow:hidden; z-index:201; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); }
    .slide-over.open { transform:translateX(0); }
    .so-header { display:flex; align-items:center; gap:8px; padding:10px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0; background:#e8dfd0; }
    .so-title { flex:1; font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .so-header-actions { display:flex; align-items:center; gap:4px; }
    .so-close { margin-left:4px; }

    /* ── Inline detail expansion ── */
    .inline-detail { display:none; background:#ede6da; border-left:3px solid var(--primary); border-radius:0 6px 6px 0; margin:4px 14px 6px 52px; padding:10px 14px; font-size:13px; line-height:1.6; color:var(--text); }
    .inline-detail.open { display:block; }
    .inline-detail-body { }

    /* Section */
    .section { background:transparent; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; overflow:visible; }
    /* Content/Overview sections — no panel chrome, just a bottom separator */
    .section.content-type { border:none; border-bottom:1px solid var(--border); border-radius:0; margin-bottom:12px; padding-bottom:4px; }
    .section-hd { display:flex; align-items:center; padding:5px 10px; user-select:none; gap:8px; background:transparent; border-bottom:none; border-radius:6px; transition:background .12s; }
    .section-hd:hover { background:rgba(0,0,0,.05); }
    .section-title-text { cursor:pointer; font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-muted); flex:0 1 auto; min-width:0; }
    .sec-num { display:none; }
    .section-hd .chevron { cursor:pointer; }
    .section-title-text { font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; flex:0 1 auto; min-width:0; }
    .section-title-input { flex:999 1 0; min-width:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border:1px solid var(--primary); border-radius:4px; padding:2px 6px; outline:none; }
    .section-count { font-size:11px; color:var(--text-muted); font-weight:400; flex-shrink:0; }
    /* Section progress bar — inline in header */
    .sec-progress-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:8px; }
    .sec-prog-bar { width:90px; height:3px; background:rgba(0,0,0,.12); border-radius:2px; overflow:hidden; flex-shrink:0; }
    .sec-prog-fill { height:100%; background:var(--primary); border-radius:2px; transition:width .3s; }
    .sec-prog-fill.is-complete { background:var(--green); }
    .chevron { transition:transform .2s; color:var(--text-muted); flex-shrink:0; cursor:pointer; }
    .section.collapsed .chevron { transform:rotate(-90deg); }
    .section.collapsed .section-hd { background:transparent; border-radius:6px; }
    .section.collapsed .section-title-text { font-weight:400; }
    /* Completed section — green header */
    .section.section-complete .section-hd { background:rgba(22,163,74,.04); transition:background .3s; }
    .section.section-complete .section-hd:hover { background:rgba(22,163,74,.08); }
    .section.section-complete .section-title-text { color:#16a34a; }
    .section.section-complete .chevron { color:#16a34a; }
    .section.section-complete .section-count { color:#16a34a; }
    /* Collapsed + complete: subtle green tint overrides the transparent rule */
    .section.section-complete.collapsed .section-hd { background:rgba(22,163,74,.06); border-radius:6px; }
    .section.section-complete.collapsed .section-hd:hover { background:rgba(22,163,74,.12); }
    .section.section-complete.collapsed .section-title-text { color:#16a34a; font-weight:400; }
    .section-note { padding:4px 10px 4px 28px; font-size:11px; font-style:normal; color:var(--text-muted); background:transparent; display:flex; align-items:center; gap:6px; }
    .section-note-actions { display:inline-flex; gap:2px; opacity:0; transition:opacity 100ms; margin-left:4px; }
    .section-note:hover .section-note-actions { opacity:1; }
    .snote-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:12px; padding:1px 5px; border-radius:3px; line-height:1; }
    .snote-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }
    .snote-del:hover { color:#ef4444; }
    .section.collapsed .section-note,.section.collapsed .section-body,.section.collapsed .section-content-body,.section.collapsed .add-item-row { display:none; }
    .section.section-na { opacity:.4; }
    .section.section-na .section-body,.section.section-na .section-content-body,.section.section-na .add-item-row { display:none; }
    .section.section-na .section-hd { cursor:default; }
    .sec-rename-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.55); font-size:16px; padding:0 5px; line-height:1; transition:color .15s; flex-shrink:0; opacity:0; pointer-events:none; transition:opacity .12s, color .15s; }
    .sec-rename-btn:hover { color:#fff; }
    .section-hd:hover .sec-rename-btn { opacity:1; pointer-events:auto; }
    .sec-hd-spacer { flex:1; }
    .sec-cond-btn { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.2); cursor:pointer; transition:all .15s; background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); white-space:nowrap; opacity:0; pointer-events:none; }
    .sec-cond-btn.unset { background:rgba(255,255,255,.06); color:rgba(255,255,255,.35); border-color:rgba(255,255,255,.12); }
    .sec-cond-btn:hover { background:rgba(255,255,255,.2); color:rgba(255,255,255,.95); }
    .section-hd:hover .sec-cond-btn { opacity:1; pointer-events:auto; }
    .section-body { position:relative; padding:2px 0; }
    /* Connector line removed — hierarchy shown via sub-item left border only */
    .item-cb { z-index: 1; position: relative; }
    .item-cb.done { background: var(--green); }

    .section-actions { display:flex; align-items:center; gap:3px; opacity:0; pointer-events:none; transition:opacity .12s; }
    .section-hd:hover .section-actions { opacity:1; pointer-events:auto; }
    .sec-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:3px 5px; border-radius:4px; font-size:12px; line-height:1; transition:all .15s; }
    .sec-btn:hover { background:rgba(0,0,0,.08); color:var(--primary); }
    .sec-btn.del:hover { color:var(--danger); background:var(--danger-bg); }
    .sec-btn.link:hover { color:#0ea5e9; background:#e0f2fe; }
    /* ── Copy-link toast ── */
    #linkToast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(12px); background:#1e293b; color:#f1f5f9; font-size:12px; font-weight:600; padding:7px 18px; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; }
    #linkToast.show { opacity:1; transform:translateX(-50%) translateY(0); }
    .sec-divider { width:1px; height:14px; background:var(--border); margin:0 2px; }
    .badge-steps { font-size:10px; font-weight:500; padding:1px 6px; border-radius:5px; background:rgba(0,0,0,.06); color:var(--text-muted); }
    .badge-content { font-size:10px; font-weight:500; padding:1px 6px; border-radius:5px; background:rgba(0,0,0,.06); color:var(--text-muted); }

    /* Content section */
    .section-hd.content-hd { background:transparent; border-bottom-color:transparent; }
    .section-hd.content-hd:hover { background:rgba(0,0,0,.03); }
    .section-hd.content-hd .section-title-text { color:var(--text-muted); }
    .section-hd.content-hd .sec-btn { color:#94a3b8; }
    .section-hd.content-hd .sec-btn:hover { background:rgba(0,0,0,.06); color:#475569; }
    .section-hd.content-hd .sec-btn.del:hover { background:#fee2e2; color:#dc2626; }
    .section-hd.content-hd .chevron { color:#94a3b8; }
    .section-content-body { padding:2px 16px 16px 16px; font-size:14px; line-height:1.8; min-height:30px; font-style:italic; color:var(--text-muted); border:none; }
    .content-hover-actions { display:flex; gap:4px; padding:0 14px 6px; opacity:0; pointer-events:none; transition:opacity .15s; }
    .section:hover .content-hover-actions { opacity:1; pointer-events:auto; }
    .section-content-body[contenteditable="true"] { outline:none; background:#fafcff; border-top:2px solid var(--primary); cursor:text; }
    .section-content-body h3 { font-size:14px; font-weight:700; margin-bottom:8px; margin-top:12px; }
    .section-content-body p { margin-bottom:10px; }
    .section-content-body ul,.section-content-body ol { padding-left:20px; margin-bottom:10px; }
    .section-content-body li { margin-bottom:4px; }
    .section-content-body .c-warn { background:var(--warn-bg); border-left:3px solid var(--warn-border); padding:8px 12px; border-radius:4px; font-size:13px; color:var(--warn-text); font-weight:500; margin:8px 0; }
    .section-content-body .c-note { background:var(--note-bg); border-left:3px solid #3b82f6; padding:8px 12px; border-radius:4px; font-size:13px; color:var(--note-text); margin:8px 0; }
    .section-content-body .c-critical { background:var(--danger-bg); border-left:3px solid var(--danger); padding:8px 12px; border-radius:4px; font-size:13px; color:var(--danger); font-weight:700; margin:8px 0; }
    .section-content-toolbar { padding:8px 16px; border-bottom:1px solid var(--border); display:none; flex-wrap:wrap; gap:6px; background:#f0f7ff; }
    .section-content-toolbar.visible { display:flex; }
    .ct-btn { padding:3px 10px; background:white; border:1px solid var(--border); border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text); transition:all .15s; }
    .ct-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
    .content-edit-bar { display:flex; gap:6px; padding:8px 16px; border-top:1px solid var(--border); background:#f8fafc; }

    /* Item */
    .item { display:flex; flex-wrap:wrap; align-items:flex-start; padding:16px; column-gap:5px; row-gap:0; border-bottom:none; transition:background .12s; position:relative; min-height:76px; }
    .item + .item { margin-top:16px; }
    .item:last-child { border-bottom:none; }
    .item:hover { background:#dfd7c8; }
    .item.hidden { display:none!important; }
    .item.highlighted { background:#fefce8; }
    .search-hl { background:#fde047; color:#1a1a1a; border-radius:2px; padding:0 1px; font-weight:700; }
    /* ── Step checkbox: rounded square, three states ── */
    .item-cb { position:relative; width:28px; height:28px; border-radius:5px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; margin-top:1px; background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); font-size:14px; font-weight:500; line-height:1; box-shadow:none; }
    .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    .item-cb.done { background:var(--primary); border-color:var(--primary); color:white; }
    .item-cb.done:hover { transform:scale(1.05); }
    .cb-badge { position:absolute; top:-4px; right:-4px; background:var(--bg,#0f172a); color:rgba(255,255,255,0.7); font-size:10px; font-weight:500; line-height:1; padding:2px 4px; border-radius:8px; border:1px solid rgba(59,130,246,0.5); pointer-events:none; }
    .item-num { display:none; }
    .item-body { flex:1; min-width:0; }
    .item-tags { margin-bottom:4px; }
    .tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; margin-right:4px; }
    .tag-avid { background:rgba(0,0,0,.06); color:var(--text-muted); }
    .tag-non-avid,.tag-non-ad { background:rgba(0,0,0,.06); color:var(--text-muted); }
    .tag-wfh { background:rgba(0,0,0,.06); color:var(--text-muted); }
    .tag-dataio { background:rgba(0,0,0,.06); color:var(--text-muted); }
    .item-text-row { }
    .item-text { display:inline; font-size:14px; line-height:1.45; }
    .item.is-done .item-text { text-decoration:line-through; color:#94a3b8; }

    /* ── Step group: focus chrome wraps step + attached callouts as one unit ── */
    @keyframes stepReveal { from { border-color:transparent; transform:translateX(-5px); opacity:.5; } to { border-left-color:white; transform:translateX(0); opacity:1; } }
    .step-group { border-radius:6px; }
    .step-group + .step-group { margin-top:12px; }
    .step-group.is-active { border:1px solid rgba(255,255,255,0.7); border-left:3px solid white; background:rgba(255,255,255,0.05); box-shadow:0 0 0 3px rgba(255,255,255,0.12); border-radius:6px; animation:stepReveal .3s ease forwards; padding-bottom:4px; }
    .step-group.is-active .standalone-note { padding-top:0; }
    /* Active item internal styles (no outer chrome — handled by .step-group.is-active) */
    .item.is-active { padding-left:12px; column-gap:10px; }
    .item.is-active .item-text { font-weight:700; color:white; }
    .item.is-active .item-cb { background:transparent; border:2px solid white; color:#60a5fa; box-shadow:none; }

    /* ── Checkbox hover overrides (keep scale, bump border to full opacity) ── */
    .item.is-active .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    .item.is-future .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    body.dark .item.is-active .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    body.dark .item.is-future .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }

    /* ── Completed steps: dimmed, callouts hidden, hover to peek ── */
    .item.is-done { opacity:.55; transition:opacity .2s; }
    .item.is-done:hover { opacity:1; }
    .item.is-done .callout { display:none; }

    /* ── Future steps: preview only, no extras, hover to peek ── */
    .item.is-future { opacity:.65; transition:opacity .2s; }
    .item.is-future:hover { opacity:1; }
    .item.is-future .callout { display:none; }
    .item.is-future .detail-btn { display:none; }
    .item.is-future .inline-detail { display:none; }
    .item.is-future .item-cb { background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); box-shadow:none; }
    /* Conditional future steps: same hollow style, number still visible */
    .item.has-condition.is-future .item-cb { background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); box-shadow:none; }

    /* Dark mode overrides */
    body.dark .step-group.is-active { border-color:rgba(255,255,255,0.7); border-left-color:white; background:rgba(255,255,255,0.05); box-shadow:0 0 0 3px rgba(255,255,255,0.12); }
    body.dark .item.is-future .item-cb { background:var(--primary); border-color:transparent; color:white; box-shadow:none; }
    .item-critical { font-size:13px; font-weight:700; color:var(--danger); margin-top:4px; }
    .detail-btn { margin:0; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; background:var(--primary-soft,rgba(59,130,246,.10)); color:var(--primary); border:1px solid var(--primary-line,rgba(59,130,246,.35)); border-radius:5px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; width:auto; max-width:100%; text-align:left; }
    .detail-btn .prefix { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:0.06em; margin-right:2px; color:#ffffff; }
    .detail-btn .label { flex:1; }
    .detail-btn .arrow { font-size:20px; margin-left:4px; line-height:1; }
    .detail-btn.guide { background:rgba(163,113,247,.12); color:#a371f7; border-color:rgba(163,113,247,.35); }
    .sub-item-body .detail-btn { margin:0; padding:6px 12px; font-size:13px; width:auto; align-self:flex-start; }
    .detail-btn.guide:hover { background:#a371f7; color:white; border-color:#a371f7; }
    .detail-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
    .item-actions { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:2px; flex-basis:100%; order:99; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .15s, opacity .12s; padding-left:52px; margin-top:0; }
    .item:hover .item-actions { max-height:60px; opacity:1; pointer-events:auto; }
    .decision-item .item-actions { flex-direction:row; align-items:center; padding-bottom:4px; }
    .decision-item:hover .item-actions { max-height:60px; opacity:1; pointer-events:auto; }
    .decision-item .item-reorder { opacity:0; pointer-events:none; }
    .iact { background:none; border:none; cursor:pointer; padding:3px 6px; border-radius:4px; font-size:11px; font-weight:600; line-height:1.4; transition:all .15s; color:#94a3b8; white-space:nowrap; }
    .iact:hover { background:#e8edf4; color:#475569; }
    .iact.edit:hover { color:var(--primary); background:#eff6ff; }
    .iact.del:hover { color:var(--danger); background:var(--danger-bg); }
    .iact.add-callout:hover { background:#dcfce7; color:#15803d; }
    .iact.add-detail:hover  { background:#eff6ff; color:var(--primary); }
    .iact.nest:hover  { background:#ede9fe; color:#6d28d9; }
    .iact.add-sub:hover { background:#e0e7ff; color:#4338ca; }
    .iact.more { font-size:14px; letter-spacing:2px; padding:2px 7px; color:#64748b; border:1.5px solid #64748b; border-radius:5px; }
    .iact.more:hover { background:#e8edf4; color:#1e293b; border-color:#1e293b; }
    body.dark .iact.more { color:#94a3b8; border-color:#475569; }
    body.dark .iact.more:hover { background:#1a2538; color:#e2e8f0; border-color:#94a3b8; }
    .iact-menu { position:fixed; background:#f5f0e8; border:1.5px solid var(--border); border-radius:8px; padding:4px; display:flex; flex-direction:column; gap:1px; z-index:9999; box-shadow:0 4px 20px rgba(0,0,0,.22); white-space:nowrap; min-width:150px; }
    body.dark .iact-menu { background:#1a2440; border-color:#2d3a55; }
    .iact-menu-btn { display:block; width:100%; text-align:left; background:transparent; border:none; border-radius:5px; padding:6px 10px; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; transition:all .12s; }
    .iact-menu-btn:hover { background:var(--hover); color:var(--text); }
    .iact-menu-btn.note:hover { background:#dcfce7; color:#15803d; }
    .iact-menu-btn.sub:hover  { background:#e0e7ff; color:#4338ca; }
    .iact-menu-btn.nest:hover { background:#ede9fe; color:#6d28d9; }
    .iact-menu-btn.del  { color:#ef4444; }
    .iact-menu-btn.del:hover  { background:var(--danger-bg); color:var(--danger); }
    .iact-menu-sep { height:1px; background:var(--border); margin:3px 4px; }
    body.dark .iact-menu { box-shadow:0 4px 20px rgba(0,0,0,.45); }
    body.dark .iact-menu-btn.del { color:#f87171; }
    /* Vertical reorder column — far right of each step row */
    .item-reorder { position:absolute; right:4px; top:4px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; flex-shrink:0; opacity:0; pointer-events:none; transition:opacity .12s; padding:2px 2px 0; }
    .item:hover .item-reorder, .decision-item:hover .item-reorder { opacity:1; pointer-events:auto; }
    .ireorder { position:relative; background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:3px; font-size:15px; font-weight:700; color:#64748b; line-height:1; transition:all .12s; display:flex; align-items:center; justify-content:center; min-width:22px; }
    .ireorder.ireorder-jump { font-size:14px; }
    .ireorder svg { display:block; }
    .ireorder:hover { background:#e2e8f0; color:#1e293b; }
    /* Instant CSS tooltip — shown to the left of the button */
    .ireorder::after { content:attr(data-tip); position:absolute; right:calc(100% + 5px); top:50%; transform:translateY(-50%); background:#1e293b; color:#f1f5f9; font-size:11px; font-weight:500; padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .08s; }
    .ireorder:hover::after { opacity:1; }

    /* Sub-items */
    .sub-info { display:flex; gap:7px; padding:3px 6px 3px 38px; align-items:flex-start; font-size:12px; color:var(--text-muted); line-height:1.5; }
    .sub-info-dot { width:3px; height:3px; border-radius:50%; background:#94a3b8; flex-shrink:0; margin-top:6px; }
        .sub-item-list { border-left:2px solid var(--border); margin:2px 0 1px 10px; }
        .step-content .sub-item-list { padding-left:32px; margin-left:0; display:flex; flex-direction:column; }
    .sub-item { display:flex; align-items:flex-start; padding:12px 0 12px 28px; gap:7px; border-bottom:1px solid var(--border-soft); transition:background .12s; }
    .sub-item:last-child { border-bottom:none; }
    .sub-item:hover { background:var(--row-hover); }
    .sub-item.is-done { opacity:0.55; }
    .sub-item.is-done .sub-item-text { text-decoration:line-through; color:var(--text-muted); }
    .sub-item.is-done .sub-item-num { color:var(--primary); font-weight:700; font-size:16px; min-width:22px; line-height:22px; }
    .sub-item.is-current { background:rgba(59,130,246,0.16); padding-left:28px; border-radius:4px; position:relative; }
    .sub-item.is-current::before { content:"\25B6"; color:var(--primary); font-size:10px; position:absolute; left:9px; top:50%; transform:translateY(-50%); }
    .sub-item.is-current .sub-item-num { color:var(--primary); font-weight:700; }
    .sub-item.is-current .sub-item-cb { border-color:white; border-width:2px; line-height:22px; }
    .sub-item.is-current .sub-item-text { font-weight:500; }
    .sub-item.is-upcoming { opacity:0.70; }
    .sub-item.is-upcoming .sub-item-num { color:var(--text-muted); font-weight:500; }
    .sub-item-cb { position:relative; width:24px; height:24px; border-radius:4px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 120ms ease, border-color 120ms ease, background 120ms ease; margin-top:2px; background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); font-size:12px; font-weight:500; line-height:1; }
    .sub-item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    .sub-item-cb.done { background:var(--primary); border-color:var(--primary); color:white; }
    .sub-item-cb.done:hover { transform:scale(1.05); }
    .sub-item-num { display:none; }
    .sub-item-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
    .sub-item-text { font-size:14px; line-height:22px; color:var(--text); }
    .sub-item-actions { display:flex; align-items:center; gap:3px; flex-shrink:0; margin-top:1px; opacity:0; pointer-events:none; transition:opacity .12s; }
    .sub-item:hover .sub-item-actions { opacity:1; pointer-events:auto; }
    .sub-item-actions .iact { padding:3px 5px; }
    .add-sub-row { display:flex; align-items:center; gap:6px; padding:5px 8px 5px 10px; border-top:1px solid var(--border); }
    .add-sub-input { flex:1; font-size:12px; border:1.5px solid var(--border); border-radius:5px; padding:4px 8px; outline:none; font-family:inherit; color:var(--text); }
    .add-sub-input:focus { border-color:var(--primary); }
    .add-sub-btn { padding:4px 10px; background:var(--primary); color:white; border:none; border-radius:5px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; }
    .add-sub-btn:hover { background:var(--primary-dark); }

    /* Callout blocks (inline on items) */
    .callout { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; margin-top:14px; margin-left:40px; border-radius:0 6px 6px 0; font-size:14px; line-height:1.5; border:none; border-left:3px solid; position:relative; color:var(--text); }
    .callout-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; background:rgba(255,255,255,0.06); }
    .callout-body { flex:1; padding-top:6px; color:var(--text); }
    .callout.warn     { background:linear-gradient(to right,rgba(251,191,36,0.18) 0%,rgba(251,191,36,0.18) 25%,rgba(251,191,36,0) 70%); border-left-color:rgba(251,191,36,0.7); }
    .callout.warn .callout-icon { color:var(--warn-text); background:rgba(234,179,8,0.15); }
    .callout.info     { background:linear-gradient(to right,rgba(59,130,246,0.18) 0%,rgba(59,130,246,0.18) 25%,rgba(59,130,246,0) 70%); border-left-color:rgba(59,130,246,0.7); }
    .callout.info .callout-icon { color:var(--note-text,#93c5fd); }
    .callout.critical { background:linear-gradient(to right,rgba(239,68,68,0.18) 0%,rgba(239,68,68,0.18) 25%,rgba(239,68,68,0) 70%); border-left-color:rgba(239,68,68,0.7); }
    .callout.critical .callout-icon { color:var(--danger-text,var(--danger)); background:rgba(239,68,68,0.15); }
    /* Callout ⋯ trigger — inline-after-text, fades in on hover */
    .callout-more-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px; color:var(--text-muted); opacity:0; transition:opacity 120ms; vertical-align:middle; margin-left:4px; flex-shrink:0; line-height:1; }
    .callout:hover .callout-more-btn, .standalone-note:hover .callout-more-btn { opacity:1; }
    .callout-more-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }

    /* Callout edit / add form */
    .callout-form { margin-top:6px; border:1.5px solid var(--primary); border-radius:8px; overflow:hidden; }
    .callout-form-hd { display:flex; gap:0; background:#f0f7ff; border-bottom:1px solid #bfdbfe; }
    .ctype-btn { flex:1; padding:6px 4px; background:none; border:none; border-right:1px solid #bfdbfe; cursor:pointer; font-size:12px; font-weight:600; color:var(--text-muted); transition:all .12s; }
    .ctype-btn:last-child { border-right:none; }
    .ctype-btn.selected.warn  { background:var(--warn-bg); color:var(--warn-text); }
    .ctype-btn.selected.note  { background:var(--note-bg); color:var(--note-text); }
    .ctype-btn.selected.crit  { background:var(--danger-bg); color:var(--danger); }
    .ctype-btn:hover:not(.selected) { background:white; }
    .callout-form textarea { width:100%; padding:8px 10px; border:none; font-size:13px; outline:none; resize:vertical; min-height:56px; font-family:inherit; color:var(--text); }
    .callout-form-footer { display:flex; gap:6px; padding:6px 8px; background:#f8fafc; border-top:1px solid var(--border); }
    .cf-save   { padding:4px 14px; background:var(--primary); color:white; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
    .cf-save:hover { background:var(--primary-dark); }
    .cf-cancel { padding:4px 12px; background:white; color:var(--text-muted); border:1px solid var(--border); border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
    .cf-cancel:hover { background:var(--danger-bg); color:var(--danger); }

    /* Item edit */
    .item-edit-wrap { display:flex; flex-direction:column; gap:4px; flex:1; }
    .item-fmt-bar { display:flex; gap:4px; }
    .fmt-btn { padding:2px 9px; background:white; border:1px solid var(--border); border-radius:4px; font-size:13px; font-weight:700; cursor:pointer; color:var(--text); line-height:1.5; transition:all .12s; }
    .fmt-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
    .item-text-edit { font-size:13px; line-height:1.45; border:1.5px solid var(--primary); border-radius:6px; padding:6px 10px; outline:none; min-height:36px; background:white; font-family:inherit; color:var(--text); }
    .item-edit-row { display:flex; gap:6px; margin-top:2px; }
    .ie-save   { padding:4px 14px; background:var(--primary); color:white; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
    .ie-save:hover { background:var(--primary-dark); }
    .ie-cancel { padding:4px 12px; background:white; color:var(--text-muted); border:1px solid var(--border); border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
    .ie-cancel:hover { background:var(--danger-bg); color:var(--danger); }

    /* ── "Got it — start →" button (Overview sections on new Jobs) ── */
    .start-button-wrap { display:flex; justify-content:center; padding:22px 0 8px; }
    .start-button { background:rgba(34,197,94,0.1); color:#4ade80; border:1.5px solid #22c55e; padding:10.5px 26.5px; border-radius:6px; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:background 120ms,transform 120ms; font-family:inherit; }
    .start-button:hover  { background:rgba(34,197,94,0.18); transform:scale(1.02); }
    .start-button:active { transform:scale(0.98); }
    .start-button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(34,197,94,0.3); }
    .start-button-arrow { font-size:16px; line-height:1; }
    .section.collapsed .start-button-wrap { display:none; }

    /* Add item row */
    .add-item-row { display:flex; flex-direction:column; padding:6px 14px; gap:0; border-top:1px solid var(--border); background:transparent; opacity:0; pointer-events:none; transition:opacity .2s; }
    .section:hover .add-item-row, .add-item-row:focus-within { opacity:1; pointer-events:auto; }
    .add-plus-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; background:transparent; border:1.5px solid var(--border); border-radius:6px; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
    .add-plus-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(26,86,219,.05); }
    /* Add panel */
    .add-panel { margin-top:8px; padding:10px 12px; background:var(--bg); border:1.5px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:8px; }
    .add-type-row { display:flex; gap:6px; align-items:center; }
    .add-type-chip { padding:4px 12px; border-radius:20px; border:1.5px solid var(--border); background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
    .add-type-chip:hover:not(.active) { border-color:var(--text-muted); color:var(--text); }
    .add-type-chip.active { border-color:var(--primary); color:var(--primary); background:rgba(26,86,219,.08); }
    .add-panel-close { margin-left:auto; background:transparent; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; padding:0 2px; line-height:1; }
    .add-panel-close:hover { color:var(--text); }
    .add-panel-form { display:flex; flex-direction:column; gap:7px; }
    .add-panel-row { display:flex; gap:7px; align-items:center; }
    .add-panel-submit { padding:6px 18px; background:var(--primary); color:white; border:none; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap; }
    .add-panel-submit:hover { background:var(--primary-dark); }
    .add-sub-chip { padding:3px 11px; border-radius:20px; border:1.5px solid var(--border); background:transparent; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; color:var(--text-muted); }
    .add-sub-chip:hover { border-color:var(--text-muted); color:var(--text); }
    .add-sub-chip.warn.active  { border-color:#f59e0b; color:#b45309; background:#fffbeb; }
    .add-sub-chip.note.active  { border-color:#3b82f6; color:#1d4ed8; background:#eff6ff; }
    .add-sub-chip.crit.active  { border-color:#ef4444; color:#dc2626; background:#fef2f2; }
    .add-item-input { flex:1; font-size:13px; border:1.5px solid var(--border); border-radius:6px; padding:6px 10px; outline:none; font-family:inherit; color:var(--text); }
    .add-item-input:focus { border-color:var(--primary); }
    .add-item-btn { padding:6px 14px; background:var(--primary); color:white; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
    .add-item-btn:hover { background:var(--primary-dark); }
    .add-note-btn { padding:6px 14px; background:#f0f7ff; color:#1e40af; border:1.5px solid #bfdbfe; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; flex-shrink:0; }
    .add-note-btn:hover { background:#dbeafe; }
    /* Standalone note items */
    .standalone-note { position:relative; padding:3px 40px 5px 46px; margin-bottom:3px; min-height:32px; }
    /* Standalone callout items now use .callout layout — override margin only */
    .standalone-note .callout { margin:0; }
    .standalone-note .item-reorder { position:absolute; right:4px; top:4px; opacity:0; pointer-events:none; display:flex; flex-direction:column; gap:2px; }
    .standalone-note:hover .item-reorder { opacity:1; pointer-events:auto; }
    .standalone-note .item-actions { padding-left:12px; }
    .standalone-note:hover .item-actions { max-height:60px; opacity:1; pointer-events:auto; }
    /* Callout body as flex column so image + detail btn stack below text */
    .sn-callout-body { display:flex; flex-direction:column; gap:8px; min-width:0; }
    /* Inline image — callout-body has flex:1 so width:100% resolves correctly */
    /* Inline image — thumbnail, left-aligned, natural size up to 200×150 */
    .sn-img-wrap { display:inline-block; max-width:200px; }
    .step-img-wrap { margin-top:8px; }
    /* ── Inline code block ── */
    .inline-code-block { position:relative; margin-top:8px; background:rgba(15,23,42,0.85); border:1px solid rgba(59,130,246,0.30); border-radius:6px; overflow-x:auto; }
    .inline-code-block pre { margin:0; padding:12px 36px 12px 14px; font-family:'SF Mono',Menlo,Consolas,monospace; font-size:14px; color:#60a5fa; white-space:pre; line-height:1.5; }
    .code-copy-btn { position:absolute; top:6px; right:6px; width:24px; height:24px; background:none; border:none; border-radius:4px; cursor:pointer; color:rgba(148,163,184,0.5); font-size:13px; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 120ms,color 100ms; padding:0; }
    .inline-code-block:hover .code-copy-btn { opacity:1; }
    .code-copy-btn:hover { color:#60a5fa; }
    /* ── Code modal ── */
    #_codeModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9100; align-items:center; justify-content:center; }
    .code-modal-box { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; width:520px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,0.4); display:flex; flex-direction:column; gap:12px; }
    .code-modal-title { font-size:15px; font-weight:700; color:var(--text); }
    .code-modal-ta { font-family:'SF Mono',Menlo,Consolas,monospace; font-size:13px; color:#60a5fa; background:rgba(15,23,42,0.85); border:1px solid rgba(59,130,246,0.30); border-radius:6px; padding:10px 12px; resize:vertical; min-height:120px; width:100%; box-sizing:border-box; white-space:pre; }
    .code-modal-ta:focus { outline:none; border-color:rgba(59,130,246,0.7); }
    .code-modal-actions { display:flex; gap:8px; justify-content:flex-end; }
    .code-modal-btn { padding:7px 18px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--border); }
    .code-modal-btn.cancel { background:transparent; color:var(--text-muted); }
    .code-modal-btn.cancel:hover { background:rgba(255,255,255,0.06); }
    .code-modal-btn.confirm { background:var(--primary); color:white; border-color:var(--primary); }
    .code-modal-btn.confirm:hover { opacity:0.9; }
    .sn-inline-img { display:block; max-width:200px; max-height:150px; width:auto; height:auto; border-radius:4px; border:1px solid rgba(255,255,255,0.20); background:rgba(255,255,255,0.06); cursor:zoom-in; }
    /* Detail btn inside callout body */
    .sn-detail-btn { display:inline-flex !important; margin-top:10px !important; margin-left:0 !important; }
    /* Image lightbox */
    #imgLightbox { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; }
    #imgLightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,0.6); cursor:default; }
    .img-lightbox-close { position:fixed; top:16px; right:20px; background:rgba(255,255,255,0.15); color:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10000; }
    .img-lightbox-close:hover { background:rgba(255,255,255,0.30); }
    /* ── Multi-image inline set ── */
    .img-set { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .img-thumb-wrap { position:relative; display:inline-block; flex-shrink:0; }
    .img-set-sm .img-thumb { width:200px; height:150px; object-fit:cover; border-radius:4px; border:1px solid rgba(255,255,255,0.20); background:rgba(255,255,255,0.06); cursor:zoom-in; display:block; }
    .img-set-lg .img-thumb { width:145px; height:108px; object-fit:cover; border-radius:4px; border:1px solid rgba(255,255,255,0.20); background:rgba(255,255,255,0.06); cursor:zoom-in; display:block; }
    /* Badge: 24×24 circle, dark navy bg, 2px primary border, 14px white centered */
    .img-badge { position:absolute; top:-6px; left:-6px; width:24px; height:24px; border-radius:50%; background:var(--bg,#0f172a); color:#fff; font-size:14px; font-weight:700; line-height:1; border:2px solid var(--primary,#3b82f6); pointer-events:none; z-index:2; display:flex; align-items:center; justify-content:center; }
    /* Action cluster: top-right corner, 24×24 icon buttons, hover-only */
    .img-actions { position:absolute; top:4px; right:4px; display:flex; gap:3px; align-items:center; opacity:0; transition:opacity 120ms; pointer-events:none; z-index:3; }
    body:not(.readonly) .img-thumb-wrap:hover .img-actions { opacity:1; pointer-events:auto; }
    .img-action-btn { width:24px; height:24px; border-radius:50%; background:rgba(15,23,42,0.80); color:#fff; border:1px solid rgba(255,255,255,0.35); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
    .img-action-btn:hover { background:rgba(59,130,246,0.55); border-color:var(--primary,#3b82f6); }
    .img-action-rm:hover { background:rgba(239,68,68,0.55); border-color:#fca5a5; }
    /* Inline confirm pill for Remove */
    .img-action-rm-wrap { position:relative; display:flex; align-items:center; }
    .img-rm-pill { display:none; align-items:center; gap:3px; background:rgba(15,23,42,0.92); border:1px solid rgba(239,68,68,0.5); border-radius:10px; padding:2px 6px; white-space:nowrap; }
    .img-rm-pill span { font-size:10px; color:rgba(255,255,255,0.75); }
    .img-rm-pill button { background:none; border:none; color:#fff; font-size:13px; cursor:pointer; padding:0 2px; line-height:1; }
    .img-rm-pill button:first-of-type:hover { color:#4ade80; }
    .img-rm-pill button:last-of-type:hover  { color:#94a3b8; }
    .img-action-rm-wrap.confirming .img-action-rm { display:none; }
    .img-action-rm-wrap.confirming .img-rm-pill { display:flex; }
    /* ── Lightbox prev/next nav ── */
    .lb-nav-btn { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.15); color:#fff; border:none; border-radius:50%; width:44px; height:44px; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10000; transition:background 120ms; }
    .lb-nav-btn:hover:not(:disabled) { background:rgba(255,255,255,0.30); }
    .lb-nav-btn:disabled { opacity:0.25; cursor:default; }
    .lb-prev { left:16px; }
    .lb-next { right:66px; }
    .lb-counter { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.65); font-size:14px; z-index:10000; pointer-events:none; letter-spacing:.3px; }
    .add-pos-select { padding:5px 7px; border:1.5px solid var(--border); border-radius:6px; font-size:12px; font-weight:600; color:var(--text-muted); background:white; cursor:pointer; outline:none; flex-shrink:0; }
    .add-pos-select:focus { border-color:var(--primary); }
    .add-after-input { width:52px; padding:5px 7px; border:1.5px solid var(--border); border-radius:6px; font-size:12px; font-weight:600; color:var(--text); background:white; outline:none; flex-shrink:0; display:none; }
    .add-after-input.visible { display:block; }
    .add-after-input:focus { border-color:var(--primary); }

    /* Add section */
    .add-section-row { display:flex; justify-content:center; margin-bottom:14px; }
    .add-section-btn { padding:9px 22px; background:white; color:var(--primary); border:1.5px dashed #93c5fd; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:6px; }
    .add-section-btn:hover { border-color:var(--primary); background:#eff6ff; }

    /* Modal */
    .modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
    .modal-backdrop.open { opacity:1; pointer-events:all; }
    .modal { background:#f0e9de; border-radius:14px; padding:24px; width:420px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); transform:scale(.96); transition:transform .2s; }
    .modal-backdrop.open .modal { transform:scale(1); }
    .modal h2 { font-size:16px; font-weight:700; margin-bottom:18px; }
    .modal-label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
    .modal-input { width:100%; font-size:14px; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; outline:none; font-family:inherit; color:var(--text); margin-bottom:18px; }
    .modal-input:focus { border-color:var(--primary); }
    .type-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
    .type-card { border:2px solid var(--border); border-radius:10px; padding:14px 12px; cursor:pointer; transition:all .15s; text-align:center; }
    .type-card:hover { border-color:#93c5fd; background:#f8fbff; }
    .type-card.selected { border-color:var(--primary); background:#eff6ff; }
    .tc-icon { font-size:24px; margin-bottom:6px; }
    .tc-name { font-size:13px; font-weight:700; }
    .tc-desc { font-size:11px; color:var(--text-muted); margin-top:3px; }
    .pos-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
    .pos-btn { border:2px solid var(--border); border-radius:8px; padding:8px; cursor:pointer; font-size:12px; font-weight:600; text-align:center; background:white; transition:all .15s; color:var(--text); }
    .pos-btn:hover { border-color:#93c5fd; }
    .pos-btn.selected { border-color:var(--primary); background:#eff6ff; color:var(--primary); }
    .modal-footer { display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; padding-top:12px; border-top:1px solid var(--border); margin-top:4px; }
    .cond-choices { margin:4px 0 12px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; flex:1; padding-right:4px; }
    .cond-group-label { font-size:11px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
    .cond-group-btns { display:flex; flex-wrap:wrap; gap:8px; }
    .cond-choice-btn { padding:6px 14px; border-radius:7px; border:1.5px solid var(--border); background:white; color:var(--text); font-size:13px; font-weight:400; cursor:pointer; transition:all .15s; }
    .cond-choice-btn:hover { border-color:#818cf8; background:#ede9fe; color:#4338ca; }
    .cond-choice-btn.active { border-color:#6366f1; background:#ede9fe; color:#4338ca; font-weight:600; }
    .cond-remove-btn { padding:8px 16px; border-radius:8px; border:2px solid #fca5a5; background:#fef2f2; color:#dc2626; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
    .cond-remove-btn:hover { background:#fee2e2; }
    .modal-create { padding:8px 20px; background:var(--primary); color:white; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; }
    .modal-create:hover { background:var(--primary-dark); }
    .modal-cancel-btn { padding:8px 16px; background:white; color:var(--text-muted); border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }

    /* Detail panel */
    .detail-panel-topbar { display:flex; align-items:center; justify-content:flex-end; padding:6px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .detail-panel-placeholder { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#94a3b8; padding:24px; text-align:center; }
    .detail-panel-placeholder svg { opacity:.35; }
    .detail-panel-placeholder p { font-size:13px; line-height:1.5; max-width:200px; }
    .detail-panel-hd { padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; background:#e6ddd0; flex-shrink:0; }
    .detail-panel-title { flex:1; font-size:15px; font-weight:700; }
    .detail-panel-title-input { flex:1; font-size:15px; font-weight:700; border:1.5px solid var(--primary); border-radius:5px; padding:3px 8px; outline:none; font-family:inherit; }
    .hd-btn { padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid; transition:all .15s; white-space:nowrap; }
    .hd-btn.edit-btn { background:#eff6ff; color:var(--primary); border-color:#bfdbfe; }
    .hd-btn.edit-btn:hover { background:var(--primary); color:white; }
    .hd-btn.save-btn { background:var(--green); color:white; border-color:var(--green); }
    .close-btn { width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-muted); transition:all .15s; flex-shrink:0; }
    .close-btn:hover { background:var(--danger-bg); border-color:#fca5a5; color:var(--danger); }
    .detail-panel-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:20px; word-break:break-word; overflow-wrap:break-word; min-width:0; }
    .detail-panel-body.editable { outline:none; background:#f0e9de; border-top:2px solid var(--primary); }
    .detail-panel-body img, .detail-panel-body video, .detail-panel-body iframe { max-width:100% !important; height:auto !important; display:block; border-radius:6px; margin:8px 0; box-sizing:border-box; }
    .detail-panel-body:not(.editable) img { cursor:zoom-in; }

    /* ── Image resize toolbar ── */
    #imgResizeBar { position:fixed; background:#1e293b; color:white; border-radius:8px; padding:5px 8px; display:none; align-items:center; gap:6px; z-index:9000; box-shadow:0 4px 16px rgba(0,0,0,.45); font-size:12px; pointer-events:auto; }
    #imgResizeBar.visible { display:flex; }
    .imgrsz-label { font-size:11px; color:#94a3b8; font-weight:600; white-space:nowrap; }
    .imgrsz-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:5px; color:white; font-size:12px; font-weight:600; padding:3px 9px; cursor:pointer; transition:background .12s; }
    .imgrsz-btn:hover { background:rgba(255,255,255,.25); }
    .imgrsz-btn.active { background:#3b82f6; border-color:#3b82f6; }
    .imgrsz-div { width:1px; height:16px; background:rgba(255,255,255,.2); flex-shrink:0; }
    .imgrsz-input { width:44px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:5px; color:white; font-size:12px; padding:3px 6px; text-align:center; }
    .imgrsz-input:focus { outline:none; border-color:#3b82f6; }
    .imgrsz-pct { font-size:12px; color:#94a3b8; }
    .detail-panel-body table { max-width:100%; overflow-x:auto; display:block; }
    .detail-panel-body * { max-width:100%; box-sizing:border-box; }
    .edit-toolbar { padding:8px 16px; border-bottom:1px solid var(--border); display:none; flex-wrap:wrap; gap:6px; background:#e6ddd0; flex-shrink:0; }
    .edit-toolbar.visible { display:flex; }
    .edit-hint { display:none; padding:5px 16px; background:#fffbeb; border-bottom:1px solid #fde68a; font-size:11.5px; color:#92400e; flex-shrink:0; line-height:1.5; }
    .edit-hint.visible { display:block; }
    .edit-hint kbd { display:inline-block; background:#fff; border:1px solid #d1d5db; border-radius:3px; padding:0 4px; font-family:'SF Mono',Menlo,Consolas,monospace; font-size:10.5px; color:#374151; line-height:1.6; }
    .tb-btn { padding:4px 11px; background:white; border:1px solid var(--border); border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text); transition:all .15s; }
    .tb-btn:hover { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
    .d-step { display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; position:relative; }
    .d-step-del { position:absolute; top:0; right:0; padding:1px 5px; background:transparent; border:1px solid #ef444466; border-radius:4px; color:#ef4444; font-size:10px; cursor:pointer; opacity:0; transition:opacity .15s; line-height:1.6; }
    .d-step:hover .d-step-del { opacity:1; }
    .d-step-del:hover { background:#fef2f2; border-color:#ef4444; }
    body.dark .d-step-del { color:#f87171; border-color:#f8717166; }
    body.dark .d-step-del:hover { background:#3b0000; border-color:#f87171; }
    .d-num { width:22px; height:22px; min-width:22px; max-width:22px; background:var(--primary); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; overflow:hidden; white-space:nowrap; pointer-events:none; user-select:none; }
    .d-text { flex:1; font-size:14px; line-height:1.6; padding-top:2px; }
    .d-text>p:first-child { display:inline; margin:0; } /* prevent p wrapper from forcing a block break on the step title line */
    .d-sub { margin-top:8px; padding-left:14px; border-left:2px solid var(--border); font-size:13px; color:var(--text-muted); }
    .d-code { background:#111111; color:#e2e8f0; padding:12px 16px; border-radius:12px; font-family:'SF Mono','Menlo',monospace; font-size:12.5px; margin:10px 0; overflow-x:auto; line-height:1.7; white-space:pre; }
    .d-warn { background:var(--warn-bg); border-left:3px solid var(--warn-border); padding:10px 14px; border-radius:4px; font-size:13px; color:var(--warn-text); font-weight:600; margin:10px 0; }
    .d-critical { background:var(--danger-bg); border-left:3px solid var(--danger); padding:10px 14px; border-radius:4px; font-size:13px; color:var(--danger); font-weight:700; margin:10px 0; }
    .d-note { background:var(--note-bg); border-left:3px solid #3b82f6; padding:10px 14px; border-radius:4px; font-size:13px; color:var(--note-text); margin:10px 0; }
    /* Rich text elements inside detail panel */
    .detail-panel-body ul, .detail-panel-body ol { padding-left:22px; margin:8px 0 12px; font-size:14px; line-height:1.7; }
    .detail-panel-body ul { list-style-type:disc; }
    .detail-panel-body ol { list-style-type:decimal; }
    .detail-panel-body li { margin-bottom:4px; }
    .detail-panel-body li ul, .detail-panel-body li ol { margin:4px 0; }
    .detail-panel-body ol ol { list-style-type:lower-alpha; padding-left:1.4em; }
    .detail-panel-body p { font-size:14px; line-height:1.6; margin:0 0 10px; }
    .detail-panel-body h3 { font-size:15px; font-weight:700; margin:14px 0 6px; color:var(--text); }
    .detail-panel-body strong { font-weight:700; }
    .detail-panel-body em { font-style:italic; }
    /* Tame common paste-in elements */
    .detail-panel-body blockquote { border-left:3px solid #cbd5e1; margin:8px 0 8px 4px; padding:4px 12px; color:var(--text-muted); font-style:normal; }
    .detail-panel-body pre { background:#111111; color:#e2e8f0; padding:10px 14px; border-radius:7px; font-family:'SF Mono','Menlo',monospace; font-size:12.5px; margin:8px 0; overflow-x:auto; line-height:1.7; white-space:pre-wrap; }
    .detail-panel-body code { background:#111111; color:#e2e8f0; padding:2px 7px; border-radius:6px; font-family:'SF Mono','Menlo',monospace; font-size:12px; }
    .detail-panel-body pre code { background:none; padding:0; }
    /* Toolbar divider */
    .tb-divider { width:1px; background:var(--border); align-self:stretch; margin:0 2px; }

    /* ── Shared Library ─────────────────────────────────────────── */
    .lib-btn { padding:5px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; cursor:pointer; white-space:nowrap; transition:all .15s; }
    .lib-btn:hover { background:#4338ca; color:white; }

    /* Library overlay */
    .lib-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; align-items:center; justify-content:center; }
    .lib-overlay.open { display:flex; }
    .lib-modal { background:#f0e9de; border-radius:12px; width:min(680px,95vw); max-height:85vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
    .lib-hd { display:flex; align-items:center; padding:18px 20px 14px; border-bottom:1px solid var(--border); gap:10px; }
    .lib-hd h2 { flex:1; margin:0; font-size:16px; font-weight:700; color:var(--text); }
    .lib-new-btn { padding:7px 14px; background:var(--primary); color:white; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
    .lib-new-btn:hover { background:var(--primary-dark); }
    .lib-modal-hd { display:flex; align-items:center; gap:12px; padding:20px 24px 16px; border-bottom:1px solid var(--border); }
    .lib-modal-hd h2 { flex:1; margin:0; font-size:18px; }
    .lib-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); line-height:1; padding:2px 6px; border-radius:4px; flex-shrink:0; }
    .lib-close:hover { background:var(--border); }
    .lib-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
    .lib-empty { text-align:center; color:var(--text-muted); font-size:14px; padding:40px 0; }
    .lib-card { border:1px solid var(--border); border-radius:8px; padding:12px 14px; display:flex; align-items:flex-start; gap:12px; transition:border-color .15s; }
    .lib-card:hover { border-color:#a5b4fc; }
    .lib-card-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
    .lib-card-body { flex:1; min-width:0; }
    .lib-card-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:3px; }
    .lib-card-meta { font-size:12px; color:var(--text-muted); }
    .lib-card-actions { display:flex; gap:6px; flex-shrink:0; }
    .lib-edit-btn { padding:5px 10px; font-size:12px; font-weight:600; border-radius:5px; border:1px solid #bfdbfe; background:#eff6ff; color:var(--primary); cursor:pointer; }
    .lib-edit-btn:hover { background:var(--primary); color:white; }
    .lib-del-btn  { padding:5px 10px; font-size:12px; font-weight:600; border-radius:5px; border:1px solid #fca5a5; background:#fef2f2; color:#dc2626; cursor:pointer; }
    .lib-del-btn:hover  { background:#dc2626; color:white; }

    /* Link-to-shared picker */
    .link-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2100; align-items:center; justify-content:center; }
    .link-overlay.open { display:flex; }
    .link-modal { background:#f0e9de; border-radius:12px; width:min(520px,95vw); max-height:75vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
    .link-hd { padding:16px 20px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    .link-hd h3 { flex:1; margin:0; font-size:15px; font-weight:700; }
    .link-body { flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:8px; }
    .link-empty { color:var(--text-muted); font-size:13px; text-align:center; padding:30px 0; }
    .link-item { padding:10px 12px; border:1px solid var(--border); border-radius:7px; cursor:pointer; transition:all .15s; }
    .link-item:hover { border-color:var(--primary); background:#eff6ff; }
    .link-item-title { font-size:14px; font-weight:600; color:var(--text); }
    .link-item-meta  { font-size:11px; color:var(--text-muted); margin-top:2px; }
    .link-ft { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; }
    .link-cancel { padding:7px 14px; background:white; border:1px solid var(--border); border-radius:6px; font-size:13px; cursor:pointer; color:var(--text-muted); }

    /* Shared panel banner inside detail panel */
    .shared-badge { font-size:11px; font-weight:700; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:10px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
    .hd-overflow { position:relative; }
    .hd-more-btn { font-size:16px; letter-spacing:2px; padding:2px 6px; }
    .hd-overflow-menu { position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:220px; z-index:200; padding:4px; }
    .hd-overflow-menu button { display:block; width:100%; text-align:left; background:none; border:none; padding:8px 12px; font-size:13px; cursor:pointer; border-radius:6px; color:#1e293b; }
    .hd-overflow-menu button:hover { background:#f1f5f9; }
    .hd-overflow-menu .dd-desc { display:block; font-size:11px; color:#94a3b8; margin-top:2px; font-weight:400; }
    .shared-banner { display:none; }
    .shared-edit-lib-btn { padding:3px 9px; font-size:11px; font-weight:600; border-radius:5px; border:1px solid #a5b4fc; background:white; color:#4338ca; cursor:pointer; }
    .shared-edit-lib-btn:hover { background:#4338ca; color:white; }

    /* choice modal for "+ Detail" on a step */
    .choice-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2100; align-items:center; justify-content:center; }
    .choice-overlay.open { display:flex; }
    .choice-modal { background:#f0e9de; border-radius:12px; width:min(420px,95vw); padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
    .choice-modal h3 { margin:0 0 6px; font-size:15px; font-weight:700; color:var(--text); }
    .choice-modal p  { margin:0 0 18px; font-size:13px; color:var(--text-muted); }
    .choice-btns { display:flex; flex-direction:column; gap:10px; }
    .choice-opt { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; text-align:left; background:white; transition:all .15s; width:100%; }
    .choice-opt:hover { border-color:var(--primary); background:#eff6ff; }
    .choice-opt-icon { font-size:22px; flex-shrink:0; }
    .choice-opt-label { font-size:13px; font-weight:600; color:var(--text); }
    .choice-opt-desc  { font-size:12px; color:var(--text-muted); margin-top:2px; }
    .choice-cancel { margin-top:14px; width:100%; padding:7px; background:none; border:1px solid var(--border); border-radius:6px; font-size:13px; color:var(--text-muted); cursor:pointer; }

    /* Dark mode: shared library */
    body.dark .lib-btn { background:#0d1f3a; color:#a5b4fc; border-color:#3730a3; }
    body.dark .lib-btn:hover { background:#4338ca; color:white; }
    body.dark .lib-modal, body.dark .link-modal, body.dark .choice-modal { background:#111111; }
    body.dark .lib-hd, body.dark .link-hd, body.dark .lib-body, body.dark .link-body, body.dark .link-ft, body.dark .lib-ft { border-color:#2d2d2d; }
    body.dark .lib-hd h2, body.dark .link-hd h3, body.dark .choice-modal h3, body.dark .lib-card-title, body.dark .link-item-title { color:#f1f5f9; }
    body.dark .lib-card { background:#111111; border-color:#2d2d2d; }
    body.dark .lib-card:hover { border-color:#6366f1; }
    body.dark .lib-edit-btn { background:#0d1f3a; color:#93c5fd; border-color:#2563eb; }
    body.dark .lib-del-btn  { background:#3b0000; color:#f87171; border-color:#f87171; }
    body.dark .link-item { background:#111111; border-color:#2d2d2d; }
    body.dark .link-item:hover { border-color:#6366f1; background:#0d1f3a; }
    body.dark .link-cancel, body.dark .choice-cancel { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .choice-opt { background:#111111; border-color:#2d2d2d; }
    body.dark .choice-opt:hover { border-color:#6366f1; background:#0d1f3a; }
    body.dark .choice-modal p, body.dark .choice-opt-desc { color:#94a3b8; }
    body.dark .shared-badge { background:#0d1f3a; border-color:#3730a3; color:#a5b4fc; }
    body.dark .hd-overflow-menu { background:#1e1e1e; border-color:#2d2d2d; }
    body.dark .hd-overflow-menu button { color:#f1f5f9; }
    body.dark .hd-overflow-menu button:hover { background:#2d2d2d; }
    body.dark .hd-overflow-menu .dd-desc { color:#64748b; }
    body.dark .shared-edit-lib-btn { background:#111111; border-color:#4338ca; color:#a5b4fc; }

    /* Bottom bar */
    .bottom-bar { background:#e0d5c4; border-top:1px solid var(--border); padding:9px 20px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
    .progress-label { font-size:13px; color:var(--text-muted); white-space:nowrap; }
    .bar-wrap { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
    .bar-fill { height:100%; background:var(--green); border-radius:3px; transition:width .3s; }
    .reset-btn { padding:6px 14px; border:1px solid var(--border); border-radius:7px; background:white; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; }
    .reset-btn:hover { background:var(--danger-bg); color:var(--danger); border-color:#fca5a5; }
    .storage-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:10px; white-space:nowrap; background:#e0d5c4; color:var(--text-muted); border:1px solid var(--border); transition:all .3s; }
    .storage-badge.warn { background:#fffbeb; color:#b45309; border-color:#d97706; }
    .storage-badge.danger { background:var(--danger-bg); color:var(--danger); border-color:#fca5a5; }

    /* Job selector */
    .job-selector-wrap { position:relative; }
    .job-selector-btn { display:flex; align-items:center; gap:6px; padding:6px 14px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:8px; color:white; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; white-space:nowrap; min-width:180px; max-width:300px; }
    .job-selector-btn:hover { background:rgba(255,255,255,.25); }
    .job-selector-btn .job-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .job-selector-btn .job-chevron { font-size:10px; opacity:.75; flex-shrink:0; }
    /* ── No-job warning state ─────────────────────────────────── */
    @keyframes job-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.5); } 60%{ box-shadow:0 0 0 7px rgba(245,158,11,0); } }
    .job-selector-btn.no-job { background:rgba(245,158,11,.25); border-color:rgba(245,158,11,.8); color:#fde68a; animation:job-pulse 2s ease-in-out infinite; }
    .job-selector-btn.no-job:hover { background:rgba(245,158,11,.38); }
    body.dark .job-selector-btn.no-job { background:rgba(245,158,11,.18); }
    @keyframes job-tab-flash {
      0%   { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); box-shadow:none; }
      35%  { background:rgba(245,158,11,.9);  border-color:rgba(245,158,11,1);    box-shadow:0 0 12px rgba(245,158,11,.7); }
      70%  { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); box-shadow:none; }
      100% { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); box-shadow:none; }
    }
    .job-selector-btn.tab-flash { animation:job-tab-flash .65s ease-in-out 2; }
    .job-dropdown { position:absolute; top:calc(100% + 6px); left:0; min-width:260px; background:#f0e9de; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15); z-index:200; overflow:hidden; display:none; }
    .job-dropdown.open { display:block; }
    .job-drop-hd { padding:10px 14px 6px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
    .job-item { display:flex; align-items:center; padding:9px 14px; gap:8px; cursor:pointer; transition:background .12s; border-top:1px solid #f1f5f9; }
    .job-item:hover { background:#f8fafc; }
    .job-item.active-job { background:#eff6ff; }
    .job-item-info { flex:1; min-width:0; }
    .job-item-name { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .job-item.active-job .job-item-name { color:var(--primary); }
    .job-item-date { font-size:11px; color:var(--text-muted); margin-top:1px; }
    .job-item-actions { display:flex; gap:3px; flex-shrink:0; }
    .job-act { background:none; border:none; cursor:pointer; font-size:12px; padding:2px 5px; border-radius:4px; color:var(--text-muted); transition:all .12s; }
    .job-act:hover { background:#e2e8f0; }
    .job-act.done-act:hover { color:var(--green); background:#dcfce7; }
    .job-act.del-act:hover  { color:var(--danger); background:var(--danger-bg); }
    .job-dropdown-tip { padding:8px 14px; font-size:11px; color:var(--text-muted); border-top:1px solid var(--border); line-height:1.4; }
    .job-new-btn { display:flex; align-items:center; gap:6px; padding:10px 14px; font-size:13px; font-weight:600; color:var(--primary); cursor:pointer; transition:background .12s; border-bottom:1px solid var(--border); }
    .job-new-btn:hover { background:#eff6ff; }
    .job-done-divider { padding:6px 14px 4px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; background:#f8fafc; border-top:1px solid var(--border); }
    .job-item.done-job .job-item-name { color:var(--text-muted); text-decoration:line-through; }
    .job-dot { width:8px; height:8px; border-radius:50%; background:#94a3b8; flex-shrink:0; }
    .job-dot.has-progress { background:var(--primary); }
    .job-dot.is-done { background:var(--green); }

    /* Job name modal (reuses modal backdrop) */
    .job-modal { background:#f0e9de; border-radius:12px; padding:24px; max-width:360px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.25); }
    .job-modal h2 { font-size:16px; font-weight:700; margin-bottom:16px; }
    .job-modal input { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; outline:none; margin-bottom:14px; }
    .job-modal input:focus { border-color:var(--primary); }
    .job-modal-footer { display:flex; gap:8px; justify-content:flex-end; }

    /* Export button + header dropdowns */
    .export-btn { padding:5px 11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:7px; color:rgba(255,255,255,.85); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; }
    .export-btn:hover { background:rgba(255,255,255,.25); color:white; }

    /* ── Split topbar buttons (Export / Import / Backup) ── */
    .hdr-split-btn { padding:5px 11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:7px; color:rgba(255,255,255,.85); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; font-family:inherit; }
    .hdr-split-btn:hover { background:rgba(255,255,255,.25); color:white; }
    .hdr-dd-split { min-width:480px; max-width:560px; padding:6px; }
    .split-item { display:flex; flex-direction:column; gap:0; padding:20px 18px; width:100%; text-align:left; background:none; border:none; color:rgba(255,255,255,.85); font-family:inherit; cursor:pointer; transition:background .12s; }
    .split-item + .split-item { border-top:1px solid rgba(255,255,255,.1); }
    .split-item:hover { background:rgba(255,255,255,.04); }
    .split-header { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
    .split-icon { font-size:32px; line-height:1; flex-shrink:0; }
    .split-title { font-size:18px; font-weight:600; color:#fff; }
    .split-body { padding-left:48px; display:flex; flex-direction:column; gap:4px; }
    .split-best { display:block; font-size:14px; font-weight:600; color:#fcd34d; letter-spacing:.02em; }
    .split-desc { display:block; font-size:16px; color:rgba(255,255,255,.75); line-height:1.65; white-space:normal; }
    .split-item:hover .split-desc { color:rgba(255,255,255,.88); }

    /* ── Job popover warn tier (Reset Progress) ── */
    .sb-job-pop-warn { color:var(--warn-text); }
    .sb-job-pop-warn:hover { background:rgba(217,119,6,0.10); color:var(--warn-text); }

    /* ── Confirm dialog ── */
    .confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:20000; display:none; align-items:center; justify-content:center; }
    .confirm-overlay.open { display:flex; }
    .confirm-dialog { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:22px 24px; max-width:460px; width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.6); }
    .confirm-title { font-size:16px; font-weight:700; margin-bottom:12px; color:var(--text); }
    .confirm-body { color:var(--text-muted); font-size:13.5px; line-height:1.5; margin-bottom:20px; }
    .confirm-body strong { color:var(--text); }
    .confirm-actions { display:flex; gap:10px; justify-content:flex-end; }
    .confirm-btn { padding:7px 16px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .13s; }
    .confirm-cancel { background:transparent; border:1px solid var(--border); color:var(--text); }
    .confirm-cancel:hover { background:var(--bg-2); }
    .confirm-destructive { border:1px solid currentColor; }
    .confirm-dialog.warn  .confirm-destructive { color:var(--warn-text); background:rgba(217,119,6,.10); }
    .confirm-dialog.warn  .confirm-destructive:hover { background:rgba(217,119,6,.20); }
    .confirm-dialog.danger .confirm-destructive { color:var(--danger); background:rgba(248,113,113,.10); }
    .confirm-dialog.danger .confirm-destructive:hover { background:rgba(248,113,113,.20); }
    .hdr-dd { position:relative; display:inline-block; }
    .hdr-dd-menu { position:absolute; top:calc(100% + 6px); right:0; background:#1e2d42; border:1px solid rgba(255,255,255,.15); border-radius:9px; padding:5px; min-width:380px; box-shadow:0 6px 20px rgba(0,0,0,.45); z-index:9999; display:none; flex-direction:column; gap:1px; }
    .hdr-dd-menu.open { display:flex; }
    .hdr-dd-menu button { display:block; width:100%; text-align:left; padding:8px 12px; background:none; border:none; color:rgba(255,255,255,.85); font-size:12px; font-weight:600; cursor:pointer; border-radius:6px; transition:background .12s; white-space:normal; }
    .hdr-dd-menu button:hover { background:rgba(255,255,255,.12); color:white; }
    .hdr-dd-sep { height:1px; background:rgba(255,255,255,.1); margin:3px 0; }
    .dd-section-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.9px; color:rgba(255,255,255,.75); padding:10px 14px 4px; border-top:1px solid rgba(255,255,255,.12); margin-top:2px; }
    .dd-section-label:first-child { border-top:none; margin-top:0; padding-top:6px; }
    /* Inline description under each dropdown item */
    .dd-desc { display:block; font-size:13px; font-weight:400; color:rgba(255,255,255,.55); margin-top:4px; line-height:1.5; }
    .dd-desc strong { font-size:13px; font-weight:700; color:rgb(245,158,11); }
    .hdr-dd-menu button:hover .dd-desc { color:rgba(255,255,255,.8); }
    .hdr-dd-menu button:hover .dd-desc strong { color:rgb(251,191,36); }
    .dd-tip { display:block; font-size:13px; font-weight:400; color:rgba(255,255,255,.45); margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.1); line-height:1.5; }
    .hdr-dd-menu button:hover .dd-tip { color:rgba(255,255,255,.7); }
    .dd-two-col { display:flex; gap:0; }
    .dd-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
    .dd-col + .dd-col { border-left:1px solid rgba(255,255,255,.1); }
    .dd-col .dd-section-label { border-top:none; margin-top:0; padding-top:6px; }
    .dd-backup-section { border-top:1px solid rgba(255,255,255,.12); margin-top:2px; padding-top:2px; }
    .dd-backup-section .dd-two-col button { flex:1; }
    .dd-wide { min-width:560px; max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain; }
    /* Active-view button highlight in View dropdown */
    .hdr-dd-menu button.active-view { color:var(--primary); background:rgba(59,130,246,.12); }
    .hdr-dd-menu button.active-view:hover { background:rgba(59,130,246,.2); }
    /* Show All mode — lift focus treatment so all steps render at full opacity */
    body.show-all .item.is-future { opacity:1; }
    body.show-all .item.is-future .callout { display:revert; }
    body.show-all .item.is-future .detail-btn { display:revert; }
    body.show-all .item.is-future .inline-detail { display:revert; }
    body.show-all .item.is-future .item-cb { background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); box-shadow:none; }
    body.show-all .step-group.is-active { border:none; background:transparent; box-shadow:none; animation:none; }
    body.show-all .item.is-active { padding-left:14px; }
    body.show-all .item.is-active .item-text { font-weight:inherit; }
    body.show-all .item.is-active .item-cb { background:transparent; border:1.5px solid rgba(59,130,246,0.45); color:var(--text-muted); box-shadow:none; }
    /* Custom styled tooltips — replaces uncrashable native title= */
    .has-tip { position:relative; }
    .has-tip::after {
      content: attr(data-tip);
      position: absolute;
      top: calc(100% + 9px);
      right: 0;
      background: rgba(8,8,12,.97);
      color: #dce8f8;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.6;
      padding: 11px 15px;
      border-radius: 10px;
      width: max-content;
      max-width: 290px;
      white-space: normal;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s .3s;
      z-index: 99999;
      box-shadow: 0 8px 28px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.1);
    }
    .has-tip:hover::after { opacity: 1; }
    /* Left-anchored variant for buttons near the left edge */
    .has-tip-l::after { right:auto; left:0; }
    /* Hide tooltip when its own dropdown is open — prevents covering menu items */
    .hdr-dd:has(.hdr-dd-menu.open) .has-tip::after { opacity:0 !important; transition:none; }
    .job-selector-wrap:has(.job-dropdown.open) .has-tip::after { opacity:0 !important; transition:none; }
    /* Toolbar block dropdown */
    .tb-dd { position:relative; display:inline-block; }
    .tb-dd-menu { position:absolute; top:calc(100% + 4px); left:0; background:#1e2d42; border:1px solid rgba(255,255,255,.15); border-radius:9px; padding:5px; min-width:150px; box-shadow:0 6px 20px rgba(0,0,0,.45); z-index:9999; display:none; flex-direction:column; gap:1px; }
    .tb-dd-menu.open { display:flex; }
    .tb-dd-menu button { display:block; width:100%; text-align:left; padding:7px 12px; background:none; border:none; color:var(--text); font-size:12px; font-weight:600; cursor:pointer; border-radius:6px; transition:background .12s; white-space:nowrap; }
    .tb-dd-menu button:hover { background:rgba(59,130,246,.15); color:var(--primary); }
    .save-btn { padding:5px 11px; background:rgba(34,197,94,.22); border:1px solid rgba(134,239,172,.45); border-radius:7px; color:rgba(255,255,255,.95); font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; }
    .save-btn:hover { background:rgba(34,197,94,.38); color:white; }
    .save-btn:disabled { opacity:.7; cursor:default; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

    /* 🔗 Copy-link topbar button */
    .copy-link-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:5px 9px; font-size:15px; cursor:pointer; transition:all .15s; line-height:1; flex-shrink:0; }
    .copy-link-btn:hover { background:rgba(255,255,255,.25); }
    /* Sidebar checklist context menu */
    .sb-ctx-menu { position:fixed; z-index:9998; background:var(--bg,#fff); border:1px solid var(--border,#ddd); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.18); padding:4px; min-width:160px; opacity:0; transform:scale(.96); transition:opacity .12s, transform .12s; pointer-events:none; }
    .sb-ctx-menu.open { opacity:1; transform:scale(1); pointer-events:auto; }
    .ctx-item { display:block; width:100%; text-align:left; background:none; border:none; padding:7px 12px; font-size:13px; font-family:inherit; color:var(--text,#111); border-radius:5px; cursor:pointer; white-space:nowrap; }
    .ctx-item:hover { background:var(--primary-soft,rgba(26,86,219,.08)); }
    .ctx-danger { color:var(--danger,#dc2626); }
    .ctx-danger:hover { background:var(--danger-bg,#fef2f2); }
    .ctx-divider { height:1px; background:var(--border,#ddd); margin:4px 0; }
    /* Dark mode toggle button */
    .dark-toggle { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:5px 9px; font-size:15px; cursor:pointer; transition:all .15s; line-height:1; flex-shrink:0; }
    .dark-toggle:hover { background:rgba(255,255,255,.25); }
    .edit-lock-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:5px 9px; font-size:15px; cursor:pointer; transition:all .15s; line-height:1; flex-shrink:0; }
    .edit-lock-btn:hover { background:rgba(255,255,255,.25); }
    .edit-lock-btn.locked { background:rgba(239,68,68,.25); border-color:rgba(239,68,68,.6); }
    .edit-lock-btn.locked:hover { background:rgba(239,68,68,.4); }
    .audio-toggle { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:5px 9px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; line-height:1; flex-shrink:0; color:white; min-width:134px; text-align:left; white-space:nowrap; }
    .audio-toggle:hover { background:rgba(255,255,255,.25); }

    /* ── Read-only mode — hide all edit controls ─────────────────────────────── */
    body.readonly .sec-rename-btn    { display:none !important; }
    body.readonly .sec-btn:not(.link){ display:none !important; }
    body.readonly .sec-divider       { display:none !important; }
    body.readonly .add-item-row      { display:none !important; }
    body.readonly .add-section-row   { display:none !important; }
    body.readonly .tab-close         { display:none !important; }
    body.readonly .tab-add           { display:none !important; }
    body.readonly .iact              { display:none !important; }
    body.readonly .add-sub-row       { display:none !important; }
    body.readonly #saveBtn           { display:none !important; }
    body.readonly #unsavedBadge      { display:none !important; }
    body.readonly .iact-menu         { display:none !important; }
    body.readonly .ro-hide           { display:none !important; }

    /* ══════════════════════════════════════════════════════════
       DARK MODE
       ══════════════════════════════════════════════════════════ */
    body.dark {
      --primary:#3b82f6; --primary-dark:#2563eb;
      --primary-soft:rgba(59,130,246,.10); --primary-line:rgba(59,130,246,.35);
      --bg:#161618; --bg-2:#0e0e10; --border:#363640; --border-soft:#232328;
      --text:#e2e8f0; --text-muted:#6a8caa; --text-faint:#4b5566;
      --green:#4ade80; --green-soft:rgba(74,222,128,.12);
      --bg-sidebar:#111114; --bg-job:#14182a; --row-hover:rgba(255,255,255,.04);
      --warn-bg:#2d1a00; --warn-border:#d97706; --warn-text:#fcd34d;
      --danger:#f87171; --danger-bg:#3b0000;
      --note-bg:#0a1f3a; --note-text:#93c5fd;
      --green:#4ade80;
    }
    /* Layout */
    body.dark { background:var(--bg); color:var(--text); }
    body.dark .header { background:#1a2744; }
    body.dark .tab-bar { background:#0b1422; border-color:var(--border); }
    body.dark .content-toolbar { background:#0a1220; border-color:var(--border); }
    body.dark .ct-search-wrap input { background:rgba(255,255,255,.07); border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .ct-search-wrap input::placeholder { color:#64748b; }
    body.dark .ct-search-wrap input:focus { background:rgba(255,255,255,.12); border-color:#3b82f6; }
    body.dark .ct-view-btn { color:#94a3b8; }
    body.dark .ct-view-btn:hover { background:rgba(255,255,255,.08); color:#93c5fd; }
    body.dark .tab { color:#94a3b8; }
    body.dark .tab:hover { color:#3b82f6; }
    body.dark .tab.active { color:#3b82f6; border-bottom-color:#3b82f6; }
    body.dark .tab-close { color:#475569; }
    /* Sections */
    body.dark .section { background:#30302E; border-color:#3a3a38; box-shadow:none; }
    body.dark .section-hd { background:#1c2840; border-color:transparent; border-radius:6px 6px 0 0; }
    body.dark .section-hd:hover { background:#243252; }
    body.dark .section.collapsed .section-hd { background:#1c2840; border-radius:6px; }
    body.dark .section.section-complete .section-hd { background:rgba(74,222,128,.04); }
    body.dark .section.section-complete .section-hd:hover { background:rgba(74,222,128,.12); }
    body.dark .section.section-complete .section-title-text { color:#6ee7b7; }
    body.dark .section.section-complete .chevron { color:#34d399; }
    body.dark .section.section-complete .scount { color:#34d399; }
    body.dark .section.section-complete.collapsed .section-hd { background:rgba(74,222,128,.05); }
    body.dark .section.section-complete.collapsed .section-hd:hover { background:rgba(74,222,128,.1); }
    body.dark .section.section-complete.collapsed .section-title-text { color:#34d399; }
    body.dark .section-note { background:#0d1f3a; border-color:#1d4ed8; color:#93c5fd; }
    body.dark .slide-over { background:#0e1c33; border-left-color:var(--border); }
    body.dark .so-header { background:#0a1628; border-bottom-color:var(--border); }
    body.dark .so-title { color:#e2e8f0; }
    body.dark .inline-detail { background:#0d1a30; border-left-color:#3b82f6; color:#e2e8f0; }
    body.dark .section-title-text { color:#89B6EC; font-weight:700; }
    body.dark .section-title-input { background:#0a0a0a; color:#f1f5f9; border-color:#3b82f6; }
    body.dark .sec-btn { color:#94a3b8; }
    body.dark .sec-btn:hover { background:#162340; color:#3b82f6; }
    body.dark .sec-btn.del:hover { background:#3b0000; color:#f87171; }
    body.dark .section-count { color:#4a6a8a; background:none; }
    body.dark .sec-prog-bar { background:rgba(255,255,255,.12); }
    body.dark .sec-num { color:#4a6a8a; }
    body.dark .section.section-complete .section-count { color:#4ade80; background:none; }
    body.dark .chevron { color:#4a6a8a; }
    /* Items */
    body.dark .item { border-color:#363640; }
    body.dark .item:hover { background:#32323c; }
    body.dark .item.highlighted { background:#2d2500; }
    body.dark .search-hl { background:#854d0e; color:#fef9c3; }
    body.dark .item-cb { background:transparent; border-color:rgba(59,130,246,0.45); color:var(--text-muted); }
    body.dark .item-cb:hover { transform:scale(1.05); border-color:var(--primary); }
    body.dark .item-cb.done { background:var(--primary); border-color:var(--primary); color:white; }
    body.dark .item-cb.done:hover { transform:scale(1.05); }
    body.dark .item.is-active .item-cb { background:transparent; border:2px solid white; color:#60a5fa; box-shadow:none; }
    body.dark .item.is-future .item-cb { background:transparent; border-color:rgba(59,130,246,0.45); color:var(--text-muted); box-shadow:none; }
    body.dark .item-text { color:#f1f5f9; }
    body.dark .item.is-done .item-text { color:#475569; }

    /* ── Decision steps ── */
    .decision-item { background:transparent; border:none; border-radius:0; padding:7px 12px 7px 12px; margin-bottom:6px; display:flex; flex-direction:column; gap:6px; position:relative; min-height:76px; }
    .decision-item.is-current { border:1px solid rgba(255,255,255,0.7); border-left:3px solid white; background:rgba(255,255,255,0.05); box-shadow:0 0 0 3px rgba(255,255,255,0.12); border-radius:6px; padding:12px 14px; }
    .step-group.is-active .decision-item.is-current { border-left:none; border-bottom:none; }
    /* ── Step / Decision ⋯ trigger ── */
    .step-edit-trigger { color:var(--text-muted); padding:3px 8px; border-radius:4px; cursor:pointer; font-size:14px; border:1px solid transparent; background:none; line-height:1; flex-shrink:0; }
    .step-actions .step-edit-trigger:hover { background:rgba(255,255,255,0.08); color:var(--text); border-color:var(--border); }
    .step-actions .cond-trigger:hover { background:rgba(255,255,255,0.08); }
    
    .cond-trigger { color:var(--primary); padding:3px 8px; border-radius:4px; cursor:pointer; font-size:11px; font-weight:700; border:1px solid transparent; background:none; line-height:1; letter-spacing:0.04em; white-space:nowrap; flex-shrink:0; }
    
    
    /* ── Step edit popover ── */
    .step-row { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; }
    .step-content { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
    .step-content .detail-btn { align-self:flex-start; margin:0; }
    .step-content .callout { margin-top:0; margin-left:0; }
    .step-actions { display:inline-flex; align-items:center; gap:2px; opacity:0; transition:opacity 100ms; vertical-align:middle; margin-left:4px; }
    .item:hover .step-actions, .decision-item:hover .step-actions { opacity:1; }
    .popover .section-label {
  display: block;
  padding: 4px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
}
.step-edit-popover { position:fixed; background:var(--bg-2); border:1px solid var(--border); border-radius:6px; padding:4px 0; min-width:180px; box-shadow:0 6px 18px rgba(0,0,0,0.5); z-index:10000; }
    .step-edit-popover .popover-item { display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; color:var(--text); cursor:pointer; user-select:none; }
    .step-edit-popover .popover-item:hover { background:var(--row-hover); }
    .step-edit-popover .popover-item.danger { color:var(--danger); }
    .step-edit-popover .popover-item.danger:hover { background:rgba(248,113,113,0.10); }
    .step-edit-popover .divider { height:1px; background:var(--border-soft); margin:4px 0; }
    .decision-item .item-reorder { position:absolute; right:4px; top:8px; opacity:0; pointer-events:none; margin-left:0; align-self:auto; }
    .decision-question { font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:12px; background:none; border-radius:4px; padding:4px 0; }
    .decision-question svg { color:var(--primary); width:30px; height:30px; flex-shrink:0; }
    .dq-label { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#64748b; flex-shrink:0; }
    .decision-choices { display:flex; flex-wrap:wrap; gap:7px; padding-left:46px; }
    .dq-label { font-size:12px; font-weight:700; color:var(--text); letter-spacing:0.06em; text-transform:uppercase; flex-shrink:0; }
    .dq-text  { font-size:16px; font-weight:700; color:var(--text); }
    .choice-btn { padding:8px 22px; border-radius:6px; border:1.5px solid var(--primary); background:rgba(59,130,246,0.1); color:#60a5fa; font-size:14px; font-weight:500; cursor:pointer; transition:background 120ms,transform 120ms,border-color 120ms,color 120ms; font-family:inherit; }
    .decision-item:not(.is-current) .choice-btn { background:rgba(59,130,246,0.05); color:rgba(96,165,250,0.55); border-color:rgba(59,130,246,0.35); }
    .decision-item:not(.is-current) .decision-helper-text { color:rgba(255,255,255,0.35); }
    .dq-label, .dq-text, .decision-question svg { transition:color 120ms; }
    .decision-item:not(.is-current) .dq-label { color:rgba(255,255,255,0.55); }
    .decision-item:not(.is-current) .dq-text { color:rgba(255,255,255,0.55); }
    .decision-item:not(.is-current) .decision-question svg { color:rgba(59,130,246,0.5); }
    .choice-btn:hover { background:rgba(59,130,246,0.22); color:#60a5fa; border-color:var(--primary); transform:scale(1.02); }
    .choice-btn:active { transform:scale(0.98); }
    .choice-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,0.3); }
    .choice-btn.active { background:rgba(59,130,246,0.3); color:#93c5fd; border-color:#60a5fa; }
    .decision-helper-text { display:flex; align-items:center; gap:6px; margin-top:10px; padding-left:48px; color:rgba(255,255,255,0.55); font-size:12px; font-style:italic; font-weight:400; }
    .dht-icon { font-size:14px; font-style:normal; }
    .decision-clear { font-size:11px; color:#94a3b8; cursor:pointer; padding:2px 8px; border:1px solid #e2e8f0; border-radius:10px; background:none; transition:all .15s; }
    .decision-clear:hover { color:#64748b; border-color:#94a3b8; }

    .decision-answered-row { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 46px; font-size:12px; color:var(--text-muted); }
    .dq-answered-label { color:var(--text-muted); }
    .dq-answered-val { color:var(--primary); font-weight:500; }
    .dq-change { font-size:11px; color:var(--text-muted); background:none; border:none; text-decoration:underline; cursor:pointer; padding:0; }
    .dq-change:hover { color:var(--primary); }
    .decision-item-answered { padding:4px 12px !important; }
    .decision-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(100,116,139,.12); border:1px solid rgba(100,116,139,.2); border-radius:20px; padding:4px 10px 4px 8px; font-size:12px; max-width:100%; }
    .decision-chip svg { color:#64748b; flex-shrink:0; }
    .dq-chip-q { color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
    .dq-chip-sep { color:#94a3b8; flex-shrink:0; }
    .dq-chip-val { color:var(--primary); font-weight:600; white-space:nowrap; }
    .dq-chip-edit { background:none; border:none; cursor:pointer; color:#94a3b8; font-size:13px; padding:0 0 0 2px; line-height:1; flex-shrink:0; }
    .dq-chip-edit:hover { color:var(--primary); }
    /* Answered decision — inline row (spec 2026-05-06) */
    .decision-answered-inline { display:flex; align-items:center; gap:6px; padding:4px 10px 4px 12px; opacity:0.85; flex-wrap:wrap; }
    .da-check { color:var(--text-muted); flex-shrink:0; font-size:13px; }
    .da-label { font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-size:13px; flex-shrink:0; }
    .da-text { color:var(--text-muted); font-size:13px; }
    .da-sep { color:var(--text-muted); flex-shrink:0; }
    .da-val { color:var(--text); font-weight:500; font-size:13px; }
    .change-answer-btn { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; margin-left:12px; border:1px solid rgba(26,86,219,.30); background:rgba(26,86,219,.08); color:var(--primary); border-radius:4px; font-size:12px; font-weight:500; cursor:pointer; transition:background-color 120ms ease, border-color 120ms ease; }
    .change-answer-btn:hover { background:rgba(26,86,219,.16); border-color:var(--primary); }
    body.dark .change-answer-btn { border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.10); }
    body.dark .change-answer-btn:hover { background:rgba(59,130,246,.18); border-color:var(--primary); }
    .decision-item-answered .item-actions .iact.edit, .decision-item-answered .item-actions .iact.del { display:none; }
    body.dark .decision-item { background:transparent; }
    body.dark .decision-question { color:var(--text); background:none; }
    body.dark .decision-question svg { color:var(--primary); }
    body.dark .dq-label { color:white; }
    /* .choice-btn dark-mode overrides removed — outlined-blue style works in both modes */
    body.dark .decision-clear { color:#475569; border-color:#2d2d2d; }

    /* ── N/A state for steps and sub-steps ── */
    .item.is-na { opacity:.5; }
    .item.is-na .item-cb { border-color:rgba(196,183,164,0.5); background:transparent; cursor:default; pointer-events:none; color:#94a3b8; font-size:11px; }
    .item.is-na .item-text { color:#94a3b8; text-decoration:line-through; }
    .item.is-na .item-actions, .item.is-na .sub-item-list { opacity:.4; pointer-events:none; }
    .sub-item.is-na .sub-item-cb { border-color:rgba(196,183,164,0.5); background:transparent; cursor:default; pointer-events:none; color:#94a3b8; font-size:10px; }
    .sub-item.is-na .sub-item-text { color:#94a3b8; text-decoration:line-through; }
    body.dark .item.is-na .item-cb { background:#1a1a2e; border-color:#2d2d2d; }
    body.dark .item.is-na .item-text { color:#334155; }
    body.dark .sub-item.is-na .sub-item-text { color:#334155; }
    body.dark .detail-btn { background:rgba(96,165,250,.08); color:#60a5fa; border-color:rgba(96,165,250,.25); }
    body.dark .detail-btn.guide { background:rgba(167,139,250,.08); color:#a78bfa; border-color:rgba(167,139,250,.25); }
    body.dark .detail-btn.guide:hover { background:#7c3aed; color:white; border-color:#7c3aed; }
    body.dark .detail-btn:hover { background:#3b82f6; color:white; border-color:#3b82f6; }
    body.dark .iact { color:#475569; }
    body.dark .iact:hover { background:#1a2744; color:#94a3b8; }
    body.dark .ireorder { color:#94a3b8; }
    body.dark .ireorder:hover { background:#1e293b; color:#f1f5f9; }
    body.dark .ireorder::after { background:#f1f5f9; color:#0f172a; }
    body.dark .iact.del:hover { background:#3b0000; color:#f87171; }
    body.dark .iact.nest { color:#a78bfa; }
    body.dark .iact.nest:hover { background:#2e1065; color:#c4b5fd; }
    body.dark .iact.add-sub { color:#818cf8; }
    body.dark .iact.add-sub:hover { background:#1e1b4b; color:#a5b4fc; }
    /* Sub-items */
    body.dark .sub-item-list { border-color:#2d2d2d; }
    body.dark .sub-item { border-color:#111111; }
    body.dark .sub-item:hover { background:#1a2744; }
    body.dark .sub-item-text { color:#cbd5e1; }
    body.dark .sub-item.is-done .sub-item-text { color:#475569; }
    body.dark .sub-item-cb { border-color:#475569; }
    body.dark .sub-item-cb:hover { border-color:#3b82f6; background:#0d1f3a; }
    body.dark .sub-item-num { color:#475569; }
    body.dark .add-sub-row { border-color:#2d2d2d; }
    body.dark .add-sub-input { background:#0a0a0a; color:#f1f5f9; border-color:#2d2d2d; }
    body.dark .add-sub-input:focus { border-color:#3b82f6; }
    /* Add item row */
    body.dark .add-item-row { background:transparent; border-color:#2d2d2d; }
    body.dark .add-note-btn { background:#0f1f3a; color:#60a5fa; border-color:#1e3a5f; }
    body.dark .add-note-btn:hover { background:#162032; }
    body.dark .add-item-input { background:#111111; color:#f1f5f9; border-color:#2d2d2d; }
    body.dark .add-item-input:focus { border-color:#3b82f6; }
    body.dark .add-pos-select { background:#111111; color:#f1f5f9; border-color:#2d2d2d; }
    body.dark .add-after-input { background:#111111; color:#f1f5f9; border-color:#2d2d2d; }
    body.dark .add-plus-btn:hover { border-color:#3b82f6; color:#60a5fa; background:rgba(59,130,246,.08); }
    body.dark .add-panel { background:#0d1117; border-color:#2d2d2d; }
    body.dark .add-type-chip { color:#475569; border-color:#2d2d2d; }
    body.dark .add-type-chip.active { border-color:#3b82f6; color:#60a5fa; background:rgba(59,130,246,.1); }
    body.dark .add-sub-chip { color:#475569; border-color:#2d2d2d; }
    body.dark .add-sub-chip.warn.active { background:rgba(245,158,11,.1); color:#f59e0b; border-color:#f59e0b; }
    body.dark .add-sub-chip.note.active { background:rgba(59,130,246,.1); color:#60a5fa; border-color:#3b82f6; }
    body.dark .add-sub-chip.crit.active { background:rgba(239,68,68,.1); color:#f87171; border-color:#ef4444; }
    body.dark .add-section-btn { background:#111111; border-color:#2d2d2d; color:#3b82f6; }
    body.dark .add-section-btn:hover { background:#0d1f3a; border-color:#3b82f6; }
    /* Callouts */
    body.dark .callout-form { border-color:#3b82f6; }
    body.dark .callout-form-hd { background:#0a0a0a; border-color:#2d2d2d; }
    body.dark .callout-form textarea { background:#111111; color:#f1f5f9; }
    body.dark .callout-form-footer { background:#0a0a0a; border-color:#2d2d2d; }
    body.dark .cact { background:rgba(30,41,59,.85); border-color:#2d2d2d; color:#94a3b8; }
    /* Item edit */
    body.dark .item-text-edit { background:#111111; color:#f1f5f9; border-color:#3b82f6; }
    body.dark .fmt-btn { background:#111111; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .fmt-btn:hover { border-color:#3b82f6; color:#3b82f6; background:#0d1f3a; }
    body.dark .ie-cancel { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .ie-cancel:hover { background:#3b0000; color:#f87171; }
    /* Content section */
    body.dark .section-hd.content-hd { background:rgba(96,165,250,.06); border-bottom-color:transparent; }
    body.dark .section-hd.content-hd:hover { background:rgba(96,165,250,.1); }
    body.dark .section-hd.content-hd .section-title-text { color:#93c5fd; }
    body.dark .section-hd.content-hd .sec-btn { color:#60a5fa; }
    body.dark .section-hd.content-hd .sec-btn:hover { background:#1d3a6e; color:#bfdbfe; }
    body.dark .section-hd.content-hd .sec-btn.del:hover { background:#3b0000; color:#f87171; }
    body.dark .section-hd.content-hd .chevron { color:#60a5fa; }
    body.dark .section-content-body { color:#f1f5f9; }
    body.dark .section-content-body[contenteditable="true"] { background:#1a2744; }
    body.dark .section-content-toolbar { background:#0a0a0a; border-color:#2d2d2d; }
    body.dark .ct-btn { background:#111111; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .ct-btn:hover { border-color:#3b82f6; color:#3b82f6; background:#0d1f3a; }
    body.dark .content-edit-bar { background:#0a0a0a; border-color:#2d2d2d; }
    /* Bottom bar */
    body.dark .bottom-bar { background:#111111; border-color:#2d2d2d; }
    body.dark .bar-wrap { background:#2d2d2d; }
    body.dark .reset-btn { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .reset-btn:hover { background:#3b0000; color:#f87171; border-color:#f87171; }
    body.dark .storage-badge { background:#0a0a0a; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .storage-badge.warn { background:#2d1a00; color:#fcd34d; border-color:#d97706; }
    body.dark .storage-badge.danger { background:#3b0000; color:#f87171; border-color:#f87171; }
    /* Detail panel */
    body.dark .detail-panel-topbar { border-color:#2d2d2d; background:#161616; }
    body.dark .detail-panel-hd { background:#161616; border-color:#2d2d2d; }
    body.dark .detail-panel-title { color:#f1f5f9; }
    body.dark .detail-panel-title-input { background:#111111; color:#f1f5f9; border-color:#3b82f6; }
    body.dark .detail-panel-body { background:#1e1e1e; color:#f1f5f9; }
    body.dark .slide-over { background:#1e1e1e; border-color:#2d2d2d; }
    body.dark .so-header { background:#111111; border-color:#2d2d2d; }
    body.dark .so-backdrop { background:rgba(0,0,0,.55); }
    body.dark .inline-detail { background:#1a2233; border-color:#3b82f6; color:#e2e8f0; }
    body.dark .detail-panel-body.editable { background:#1a2030; border-color:#3b82f6; }
    body.dark .detail-panel-body h3 { color:#f1f5f9; }
    body.dark .detail-panel-body blockquote { border-color:#475569; color:#94a3b8; }
    body.dark .detail-panel-body a:link,
    body.dark .detail-panel-body a:visited,
    body.dark .detail-panel-body a:hover,
    body.dark .detail-panel-body a:active { color:#60c8ff; }
    body.dark .edit-toolbar { background:#0a0a0a; border-color:#2d2d2d; }
    body.dark .edit-hint { background:#1c1400; border-color:#78350f; color:#fbbf24; }
    body.dark .edit-hint kbd { background:#111; border-color:#374151; color:#d1d5db; }
    body.dark .tb-btn { background:#111111; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .tb-btn:hover { border-color:#3b82f6; color:#3b82f6; background:#0d1f3a; }
    body.dark .tb-divider { background:#2d2d2d; }
    body.dark .hd-btn.edit-btn { background:#0d1f3a; color:#93c5fd; border-color:#2563eb; }
    body.dark .hd-btn.edit-btn:hover { background:#3b82f6; color:white; }
    body.dark .hd-btn.save-btn { background:#16a34a; color:white; border-color:#16a34a; }
    body.dark .close-btn { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .close-btn:hover { background:#3b0000; border-color:#f87171; color:#f87171; }
    /* Code blocks: lighter than panel bg so they stand out at low brightness */
    body.dark .d-code { background:#2a3142; color:#e2e8f0; border:1px solid #3d4f6e; border-left:3px solid #4d9ef7; }
    body.dark .detail-panel-body pre { background:#2a3142; border:1px solid #3d4f6e; border-left:3px solid #4d9ef7; color:#e2e8f0; }
    body.dark .detail-panel-body code { background:#2a3142; border:1px solid #3d4f6e; color:#e2e8f0; }
    /* Tables and generic white-background elements inside detail panel */
    body.dark .detail-panel-body table { background:#1a2030; border:1px solid #2d3748; border-radius:6px; border-collapse:separate; border-spacing:0; }
    body.dark .detail-panel-body th { background:#243044; color:#e2e8f0; border-bottom:1px solid #2d3748; padding:6px 10px; }
    body.dark .detail-panel-body td { background:#1a2030; color:#f1f5f9; border-bottom:1px solid #212d40; padding:6px 10px; }
    body.dark .detail-panel-body tr:last-child td { border-bottom:none; }
    body.dark .detail-panel-body div[style*="background:white"],
    body.dark .detail-panel-body div[style*="background: white"],
    body.dark .detail-panel-body div[style*="background:#fff"],
    body.dark .detail-panel-body div[style*="background: #fff"] { background:#1a2030 !important; color:#f1f5f9 !important; }
    body.dark .detail-panel-body span[style*="background"] { background-color:transparent !important; color:inherit !important; }
    body.dark .detail-panel-body span[style*="color"] { color:inherit !important; }
    body.dark .detail-panel-body mark { background:transparent !important; color:inherit; }
    /* Modal */
    body.dark .modal-backdrop { background:rgba(0,0,0,.7); }
    body.dark .modal { background:#111111; }
    body.dark .modal h2 { color:#f1f5f9; }
    body.dark .modal-label { color:#94a3b8; }
    body.dark .modal-input { background:#0a0a0a; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .modal-input:focus { border-color:#3b82f6; }
    body.dark .type-card { background:#111111; border-color:#2d2d2d; }
    body.dark .type-card:hover { background:#0d1f3a; border-color:#93c5fd; }
    body.dark .type-card.selected { background:#0d1f3a; border-color:#3b82f6; }
    body.dark .tc-name { color:#f1f5f9; }
    body.dark .tc-desc { color:#94a3b8; }
    body.dark .pos-btn { background:#111111; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .pos-btn.selected { background:#0d1f3a; border-color:#3b82f6; color:#3b82f6; }
    body.dark .modal-cancel-btn { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .cond-group-label { border-color:#2d2d2d; }
    body.dark .cond-choice-btn { background:#1e1e1e; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .cond-choice-btn:hover { border-color:#818cf8; background:#1e1a3a; color:#a5b4fc; }
    body.dark .cond-choice-btn.active { border-color:#6366f1; background:#1e1a3a; color:#a5b4fc; font-weight:600; }
    body.dark .cond-remove-btn { background:#2d0000; border-color:#7f1d1d; color:#f87171; }
    /* Job modal */
    body.dark .job-modal { background:#111111; }
    body.dark .job-modal h2 { color:#f1f5f9; }
    body.dark .job-modal input { background:#0a0a0a; border-color:#2d2d2d; color:#f1f5f9; }
    body.dark .job-modal input:focus { border-color:#3b82f6; }
    body.dark .job-modal-footer .modal-cancel-btn { background:#111111; border-color:#2d2d2d; color:#94a3b8; }
    /* Job dropdown */
    body.dark .job-selector-btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
    body.dark .job-dropdown { background:#111111; border-color:#2d2d2d; box-shadow:0 8px 24px rgba(0,0,0,.4); }
    body.dark .job-drop-hd { color:#94a3b8; }
    body.dark .job-item { border-color:#2d2d2d; }
    body.dark .job-item:hover { background:#0a0a0a; }
    body.dark .job-item.active-job { background:#0d1f3a; }
    body.dark .job-item-name { color:#f1f5f9; }
    body.dark .job-item.active-job .job-item-name { color:#3b82f6; }
    body.dark .job-item-date { color:#94a3b8; }
    body.dark .job-item.done-job .job-item-name { color:#475569; }
    body.dark .job-done-divider { background:#0a0a0a; border-color:#2d2d2d; color:#94a3b8; }
    body.dark .job-new-btn { color:#3b82f6; border-color:#2d2d2d; }
    body.dark .job-new-btn:hover { background:#0d1f3a; }
    body.dark .job-act { color:#94a3b8; }
    body.dark .job-act:hover { background:#2d2d2d; }
    body.dark .job-act.done-act:hover { color:#4ade80; background:#052e16; }
    body.dark .job-act.del-act:hover { color:#f87171; background:#3b0000; }

    body.dark .tag { background:rgba(255,255,255,.07); color:#64748b; }




    /* ── MD Import Format Dialog ───────────────────────────────── */
    .md-import-modal {
      background: var(--surface, #1e293b);
      border: 1px solid var(--border, #334155);
      border-radius: 10px;
      padding: 24px;
      width: 380px;
      max-width: 90vw;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .md-import-hd {
      font-size: 16px;
      font-weight: 700;
      color: var(--text, #f1f5f9);
    }
    .md-import-dropzone {
      border: 2px dashed var(--border, #334155);
      border-radius: 8px;
      padding: 18px;
      text-align: center;
      cursor: pointer;
      transition: border-color 150ms, background 150ms;
      user-select: none;
    }
    .md-import-dropzone:hover,
    .md-import-dropzone.dragover {
      border-color: var(--primary, #3b82f6);
      background: rgba(59,130,246,0.06);
    }
    .md-import-dropzone.has-file {
      border-color: var(--primary, #3b82f6);
      background: rgba(59,130,246,0.08);
    }
    .md-import-drop-icon { font-size: 26px; pointer-events: none; }
    .md-import-drop-label {
      font-size: 13px;
      color: var(--muted, #94a3b8);
      margin-top: 4px;
      pointer-events: none;
    }
    .md-import-fmt-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted, #94a3b8);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-top: 4px;
    }
    .md-import-radio {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text, #f1f5f9);
      cursor: pointer;
      padding: 3px 0;
    }
    .md-import-radio input { accent-color: var(--primary, #3b82f6); cursor: pointer; }
    .md-fmt-hint { font-size: 12px; color: var(--muted, #94a3b8); }
    .md-import-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
    }
    .md-import-modal .modal-create:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* ── MD Import Summary Panel ───────────────────────────────── */
    .md-summary-modal {
      background: var(--surface, #1e293b);
      border: 1px solid var(--border, #334155);
      border-radius: 10px;
      padding: 24px;
      width: 420px;
      max-width: 90vw;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .md-summary-hd {
      font-size: 16px;
      font-weight: 700;
      color: var(--primary, #3b82f6);
    }
    .md-summary-body {
      font-size: 13px;
      color: var(--text, #f1f5f9);
      line-height: 1.7;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .sum-row { display: flex; gap: 10px; }
    .sum-label {
      color: var(--muted, #94a3b8);
      min-width: 100px;
      flex-shrink: 0;
    }
    .sum-row.sum-warn { color: #fbbf24; }
    .sum-row.sum-warn .sum-label { color: #fbbf24; opacity: .75; }

    body.dark .md-import-modal,
    body.dark .md-summary-modal {
      background: #111111;
      border-color: #2d2d2d;
    }
    body.dark .md-import-hd,
    body.dark .md-summary-hd { color: #f1f5f9; }
    body.dark .md-summary-hd { color: #3b82f6; }
    body.dark .md-import-dropzone { border-color: #2d2d2d; }
    body.dark .md-import-dropzone:hover,
    body.dark .md-import-dropzone.dragover { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
    body.dark .md-import-dropzone.has-file { border-color: #3b82f6; background: rgba(59,130,246,0.1); }


    /* ── MD Import category select ────────────────────────────── */
    #mdImportCatSelect {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid var(--border, #334155);
      border-radius: 6px;
      background: var(--bg, #0f172a);
      color: var(--text, #f1f5f9);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
    }
    #mdImportCatSelect:focus { border-color: var(--primary, #3b82f6); }
    .md-import-newcat-input {
      width: 100%;
      padding: 7px 10px;
      border: 1.5px dashed var(--primary, #3b82f6);
      border-radius: 6px;
      background: rgba(59,130,246,0.05);
      color: var(--text, #f1f5f9);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      box-sizing: border-box;
      margin-top: 6px;
    }
    .md-import-newcat-input::placeholder { color: var(--muted, #94a3b8); }
    .md-import-newcat-input:focus { border-style: solid; background: rgba(59,130,246,0.08); }

    /* ── Context menu additions ──────────────────────────────── */
    .ctx-back { color: var(--muted, #94a3b8); font-size: 12px; }
    .ctx-back:hover { color: var(--text, #f1f5f9); }
    .ctx-current { color: var(--primary, #3b82f6); font-weight: 600; cursor: default; }
    .ctx-current:hover { background: transparent; }
    .ctx-new-cat { color: var(--primary, #3b82f6); }

    /* ── Empty category placeholder ─────────────────────────── */
    .sb-empty-cat {
      font-size: 11px;
      color: var(--muted, #94a3b8);
      font-style: italic;
      padding: 6px 12px 8px 28px;
      opacity: 0.7;
    }

    /* ── App Toast ───────────────────────────────────────────── */
    .app-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: var(--surface, #1e293b);
      border: 1px solid var(--border, #334155);
      color: var(--text, #f1f5f9);
      font-size: 13px;
      padding: 9px 18px;
      border-radius: 8px;
      z-index: 99999;
      opacity: 0;
      transition: opacity 200ms, transform 200ms;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0,0,0,.35);
    }
    .app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    body.dark .app-toast { background: #1a1a1a; border-color: #2d2d2d; }


    /* ── Cross-category drag-and-drop drop target ────────────── */
    .sb-section-header.sb-drop-cat {
      background: rgba(59,130,246,0.15);
      border-radius: 6px;
      outline: 1.5px dashed var(--primary, #3b82f6);
      outline-offset: -2px;
    }
    body.dark .sb-section-header.sb-drop-cat {
      background: rgba(59,130,246,0.12);
    }


    /* ── Save button tooltip ─────────────────────────────────── */
    .save-tip {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 280px;
      background: #0a1322;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 8px;
      padding: 12px 14px;
      box-shadow: 0 6px 20px rgba(0,0,0,.5);
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 150ms, transform 150ms;
    }
    .save-tip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .save-tip-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 6px; }
    .save-tip-body { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5; }
    .save-tip-body b { color: rgba(255,255,255,.85); font-weight: 600; }
    #saveTip { position: fixed; }