/* ═══════════════════════════════════════════════════════════════════
   Guided Workflow Styles
   Separate module for workflow dashboard, flow canvas, stages, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Home Full-Width (hide sidebar + activity bar on home screen) ── */
.home-fullwidth .activityBar       { display: none !important; }
.home-fullwidth .sidebar,
.home-fullwidth .sidebarResizeHandle,
.home-fullwidth .sidebarCollapseBtn,
.home-fullwidth .sidebarExpandBtn  { display: none !important; }
.home-fullwidth .mainContent       { margin-left: 0 !important; }
.home-fullwidth.appContainer       { grid-template-columns: 1fr !important; }

/* ── Home Container Centering (#1 scaling) ── */
.homeContainer                 { max-width: 96vw; margin: 0 auto; padding: 0 clamp(12px, 2vw, 32px); overflow-x: hidden; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; }
.homeContainer::-webkit-scrollbar       { width: 8px; }
.homeContainer::-webkit-scrollbar-track { background: transparent; }
.homeContainer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.homeContainer::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.light-theme .homeContainer::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.light-theme .homeContainer::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
@media (min-width: 1600px) { .homeContainer { max-width: 1440px; } }

/* ── Home Title Row ── */
.homeTitleRow                  { display: flex; align-items: center; justify-content: center; position: relative; margin: -8px 0 4px; }
.homeTitle                     { text-align: center; font-size: 2.2rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.homeTitleControls             { position: absolute; right: 74px; display: flex; gap: 6px; align-items: center; }

/* ── Home Subtitle (#2 bigger) ── */
.homeSubtitle                  { text-align: center; font-size: 1.15rem; color: var(--text-secondary, #999); margin: 0 0 24px; font-weight: 400; line-height: 1.5; }
.homeSubtitleLink              { color: var(--accent, #3b82f6); text-decoration: none; font-weight: 500; }
.homeSubtitleLink:hover        { text-decoration: underline; }

/* ── Dashboard Headings ── */
.dashboardHeading              { font-size: 1.05rem; font-weight: 600; color: var(--text-primary, #e2e8f0); margin: 0 0 12px; }
.dashboardHeading--hero        { font-size: 1.2rem; color: var(--accent, #3b82f6); }
.dashboardHeadingIcon          { margin-right: 6px; }

/* ── Dashboard Sections (#3 no all-caps) ── */
.dashboardSection              { margin-bottom: 20px; }
.dashboardSectionHeader        { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dashboardSectionHeader h3     { font-size: 1rem; font-weight: 600; color: var(--text-secondary, #ccc); margin: 0; }
.dashboardSectionHeader h3.dashboardHeading { font-size: 1.05rem; color: var(--text-primary, #e2e8f0); }
.dashboardViewAll              { font-size: 0.8rem; color: var(--accent, #3b82f6); cursor: pointer; background: none; border: none; }
.dashboardEmpty                { font-size: 0.85rem; color: var(--text-secondary, #888); padding: 8px 0; }

/* ── Recommended Section (clickable bars, no separate button) ── */
.recommendedCard               { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #333); margin-bottom: 6px; cursor: pointer; transition: all 0.2s; text-decoration: none; color: inherit; }
.recommendedCard:hover         { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.06); }
.recommendedIcon               { font-size: 1.2rem; flex-shrink: 0; }
.recommendedText               { flex: 1; font-size: 0.9rem; }
.recommendedArrow              { flex-shrink: 0; font-size: 0.9rem; color: var(--text-secondary, #999); transition: transform 0.2s; }
.recommendedCard:hover .recommendedArrow { transform: translateX(3px); color: var(--accent, #3b82f6); }
.recommendedCard--highlight    { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); animation: recHighlightPulse 2s ease-in-out 2; }
.recommendedCard--highlight:hover { border-color: #22c55e; background: rgba(34,197,94,0.12); }
.recommendedCard--highlight .recommendedArrow { color: #22c55e; }
@keyframes recHighlightPulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 12px rgba(34,197,94,0.25); } }

/* ── Resume Banner ── */
.dashboardResumeBanner         { margin-bottom: 16px; }
.resumeBannerContent           { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--accent, #3b82f6); }
.resumeBannerText              { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.resumeBannerLabel             { font-size: 0.75rem; color: var(--text-secondary, #999); }
.resumeBannerTask              { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumeBannerBar               { width: 60px; height: 4px; background: var(--bg-tertiary, #2a2a3e); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.resumeBannerActions           { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

/* ── Pending Task Cards (compact single-row, max 3 visible) ── */
#dashboardPendingTasks         { max-height: 120px; overflow-y: auto; }
#dashboardPendingTasks::-webkit-scrollbar       { width: 4px; }
#dashboardPendingTasks::-webkit-scrollbar-track { background: transparent; }
#dashboardPendingTasks::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.pendingTaskCard               { background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #333); border-radius: 6px; padding: 7px 12px; margin-bottom: 4px; cursor: pointer; transition: border-color 0.2s; }
.pendingTaskCard:hover         { border-color: var(--accent, #3b82f6); }
.pendingTaskCard--orphan       { border-color: rgba(239,68,68,0.4); opacity: 0.7; cursor: default; }
.pendingTaskCard--orphan:hover { border-color: rgba(239,68,68,0.6); }
.taskCardRow                   { display: flex; align-items: center; gap: 8px; }
.taskStatusIcon                { font-size: 0.85rem; flex-shrink: 0; }
.taskName                      { font-weight: 600; font-size: 1.05rem; color: var(--text-primary, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.taskMeta                      { font-size: 0.88rem; color: var(--text-secondary, #bbb); white-space: nowrap; flex-shrink: 0; }
.taskStages                    { font-size: 0.82rem; color: var(--text-secondary, #999); white-space: nowrap; flex-shrink: 0; }
.taskBarInline                 { width: 50px; height: 3px; background: var(--bg-tertiary, #2a2a3e); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.taskBarFill                   { height: 100%; background: var(--accent, #3b82f6); border-radius: 2px; transition: width 0.3s; }
.taskCardActions               { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.btnXs                         { padding: 3px 8px; font-size: 0.75rem; }

/* ── Start Cards (Pillar Cards) — 3-col grid ── */
.dashboardStartCards           { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-width: 0; }
.startCard                     { background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #333); border-radius: 10px; padding: 16px; transition: all 0.2s; display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--border-color, #333); container-type: inline-size; }
.startCard:hover               { border-color: var(--accent, #3b82f6); }

/* ── Per-Pillar Accent Colors ── */
.startCard--analytics          { border-top-color: #3b82f6; }
.startCard--analytics .subTile { background: rgba(59,130,246,0.06); }
.startCard--build              { border-top-color: #f59e0b; }
.startCard--build .subTile     { background: rgba(245,158,11,0.06); }
.startCard--develop            { border-top-color: #8b5cf6; }
.startCard--develop .subTile   { background: rgba(139,92,246,0.06); }
.startCard--automate           { border-top-color: #10b981; }
.startCard--automate .subTile  { background: rgba(16,185,129,0.06); }
.startCard--segment            { border-top-color: #ec4899; }
.startCard--govern             { border-top-color: #6366f1; }
.startCard--govern .subTile    { background: rgba(99,102,241,0.06); }
.startCard--disabled           { opacity: 0.5; }
.startCardTop                  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.startCardIcon                 { font-size: 1.5rem; }
.startCardTitle                { font-weight: 700; font-size: 1.15rem; flex: 1; }
.startCardDesc                 { font-size: 0.88rem; color: var(--text-secondary, #bbb); margin-bottom: 8px; }
.startCardComingSoon           { font-size: 0.8rem; color: var(--text-secondary, #777); font-style: italic; text-align: center; padding: 8px 0; }

/* ── Pillar Help ── */
.pillarHelpBtn                 { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.3); background: none; color: #4ade80; font-size: 0.7rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.pillarHelpBtn:hover           { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.08); }
.pillarHelpTip                 { font-size: 0.9rem; color: #4ade80; padding: 10px 14px; margin-bottom: 8px; border-radius: 8px; background: #0f172a; border-left: 3px solid #4ade80; line-height: 1.5; font-weight: 500; }

/* ── Sub-Tiles — small square icon+label ── */
.subTileGrid                   { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: auto; padding-top: 6px; min-width: 0; }
.subTileGridWrap               { position: relative; margin-top: auto; padding-top: 6px; }
.subTileGrid--scroll           { display: flex; gap: 5px; overflow-x: hidden; scroll-behavior: smooth; padding: 0 2px; }
.subTileGrid--scroll .subTile  { flex: 0 0 calc(25% - 4px); }
.subTileArrow                  { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: background 0.15s; }
.subTileArrow--left            { left: -8px; }
.subTileArrow--right           { right: -8px; }
.subTileArrow:hover            { background: var(--accent, #3b82f6); }
.subTile                       { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; background: var(--bg-tertiary, #2a2a3e); position: relative; text-align: center; aspect-ratio: 1; min-width: 0; }
.subTile:hover                 { background: rgba(59,130,246,0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.subTile:hover .subTileIcon    { transform: scale(1.15); }
.subTile--wf                   { background: rgba(59,130,246,0.08); outline: 1px dashed rgba(59,130,246,0.35); outline-offset: -1px; }
.subTile--wf:hover             { background: rgba(59,130,246,0.18); outline-style: solid; outline-color: rgba(59,130,246,0.6); }
.subTileIcon                   { font-size: 2.2rem; flex-shrink: 0; transition: transform 0.2s ease; }
.subTileLabel                  { font-size: 0.75rem; font-weight: 500; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Sub-Tile Tooltip (CSS-only, replaces native title) ── */
.startCard                     { overflow: visible; }
.subTileGrid:not(.subTileGrid--scroll) { overflow: visible; }
.subTileGridWrap               { overflow: visible; }
.subTile::after                { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; background: #0f172a; color: #4ade80; font-size: 0.9rem; font-weight: 500; line-height: 1.5; padding: 10px 14px; border-radius: 8px; white-space: normal; width: max-content; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border: 1px solid rgba(74,222,128,0.2); z-index: 10000; transition: opacity 0.15s ease, transform 0.15s ease; }
.subTile::before               { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a; opacity: 0; pointer-events: none; z-index: 10000; transition: opacity 0.15s ease; }
.subTile:hover::after          { opacity: 1; transform: translateX(-50%) translateY(0); }
.subTile:hover::before         { opacity: 1; }
/* Edge-safe: tiles near left/right get shifted tooltips */
.subTile:first-child::after    { left: 0; transform: translateX(0) translateY(4px); }
.subTile:first-child:hover::after { transform: translateX(0) translateY(0); }
.subTile:first-child::before   { left: 16px; }
.subTile:last-child::after     { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.subTile:last-child:hover::after { transform: translateX(0) translateY(0); }
.subTile:last-child::before    { left: auto; right: 16px; }

/* ── Dashboard Tabs (Tasks / Recommended) ── */
.dashboardTabs                 { display: flex; gap: 2px; margin-bottom: 0; border-bottom: 1px solid var(--border-color, #333); }
.dashboardTab                  { padding: 8px 18px; font-size: 0.88rem; font-weight: 500; background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #333); border-bottom: none; border-radius: 8px 8px 0 0; color: var(--text-secondary, #999); cursor: pointer; transition: all 0.2s; position: relative; margin-bottom: -1px; }
.dashboardTab:hover            { color: var(--text-primary, #e2e8f0); background: var(--bg-secondary, #1e1e2e); }
.dashboardTab.active           { color: var(--accent, #3b82f6); background: var(--bg-primary, #121220); border-color: var(--border-color, #333); border-bottom: 1px solid var(--bg-primary, #121220); font-weight: 600; }
.dashboardTabBadge             { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent, #3b82f6); color: #fff; font-size: 0.7rem; font-weight: 700; margin-left: 6px; }
.dashboardTabPanel             { padding: 8px 0 4px; }

/* ── Pillar Cards Bottom Spacing ── */
#dashboardStartSection         { margin-bottom: 0; }

/* ── Bottom Section (Favorites + Search pushed to bottom) ── */
.homeBottomSection             { margin-top: auto; padding-top: 32px; }

/* ── Favorites Separator + inline title + pills ── */
#dashboardQuickJump            { border-top: 1px solid var(--border-color, #333); padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color, #333); margin-bottom: 20px; }
.favoritesRow                  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.favoritesRow .dashboardHeading { margin: 0; flex-shrink: 0; font-size: 1rem; }
.dashboardQuickJumpGrid        { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.quickJumpPill                 { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 16px; background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #333); font-size: 0.82rem; cursor: pointer; transition: all 0.2s; color: inherit; position: relative; }
.quickJumpPill:hover           { background: var(--accent, #3b82f6); color: white; border-color: var(--accent, #3b82f6); }
.quickJumpIcon                 { font-size: 0.95rem; }
/* Favorites pill tooltips */
.quickJumpPill::after          { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; background: #0f172a; color: #4ade80; font-size: 0.9rem; font-weight: 500; line-height: 1.5; padding: 10px 14px; border-radius: 8px; white-space: normal; width: max-content; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border: 1px solid rgba(74,222,128,0.2); z-index: 10000; transition: opacity 0.15s ease, transform 0.15s ease; }
.quickJumpPill::before         { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a; opacity: 0; pointer-events: none; z-index: 10000; transition: opacity 0.15s ease; }
.quickJumpPill:hover::after    { opacity: 1; transform: translateX(-50%) translateY(0); }
.quickJumpPill:hover::before   { opacity: 1; }

/* ── Compact Search (#5 — moved below tiles) ── */
.homeSearchCompact             { margin-bottom: 16px; position: relative; }
.homeSearchCompact .searchHelpPopover { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 1000; background: #0f172a; border: 1px solid rgba(74,222,128,0.2); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.homeSearchCompact .searchHelpHeader { border-bottom-color: rgba(74,222,128,0.15); color: #4ade80; }
.homeSearchCompact .searchHelpClose  { color: rgba(74,222,128,0.5); }
.homeSearchCompact .searchHelpClose:hover { color: #4ade80; }
.homeSearchCompact .searchHelpTitle  { color: #4ade80; }
.homeSearchCompact .searchHelpExample { color: #a7f3d0; }
.homeSearchCompact .searchHelpExample kbd { background: #1e293b; border-color: rgba(74,222,128,0.2); color: #4ade80; }
.homeSearchCompact .searchHelpList   { color: #a7f3d0; }
.homeSearchCompact .searchHelpList kbd { background: #1e293b; border-color: rgba(74,222,128,0.2); color: #4ade80; }
/* Search help button — match pillar help style */
.homeSearchCompact .searchHelpBtn    { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.3); color: #4ade80; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; }
.homeSearchCompact .searchHelpBtn:hover { border-color: #4ade80; background: rgba(74,222,128,0.08); }
.homeSearchCompact .searchHelpBtn svg { stroke: #4ade80; }
.searchCompactRow              { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #333); border-radius: 8px; padding: 6px 12px; }
.searchCompactIcon             { font-size: 1.15rem; opacity: 0.7; flex-shrink: 0; }
.searchCompactRow .searchInput { border: none !important; background: transparent !important; flex: 1; padding: 4px 0; outline: none; font-size: 0.9rem; box-shadow: none !important; }
.searchCompactRow .voiceBtn    { flex-shrink: 0; }
.searchCompactRow .searchHelpBtn { flex-shrink: 0; }
.homeSearchCompact .searchResults { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; }

/* ── Recent Tasks (inline) ── */
.recentTaskItem                { display: inline; font-size: 0.82rem; color: var(--text-secondary, #999); }
.recentTaskItem + .recentTaskItem::before { content: '  |  '; color: var(--border-color, #444); }

/* ── Workflow Container ── */
.workflowContainer             { max-width: 900px; margin: 0 auto; padding: 16px 24px; display: flex; flex-direction: column; height: 100%; }
.workflowBottomSection         { margin-top: auto; padding-top: 24px; }

/* ── Workflow Header ── */
.workflowHeader                { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color, #333); margin-bottom: 16px; }
.workflowTaskName              { font-size: 1.1rem; font-weight: 600; flex: 1; outline: none; min-width: 0; }
.workflowTaskName:focus        { border-bottom: 1px dashed var(--accent, #3b82f6); }
.workflowBackBtn               { flex-shrink: 0; }
.workflowControls              { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Flow Canvas ── */
.flowCanvas                    { margin-bottom: 20px; transition: opacity 0.2s; }
.flowCanvas--dimmed            { opacity: 0.35; pointer-events: none; }
.flowCanvasGrid                { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flowRow                       { display: flex; align-items: center; gap: 8px; }
.stageConnector                { color: var(--text-secondary, #888); font-size: 1.1rem; }
.flowRowDrop                   { font-size: 1.1rem; color: var(--text-secondary, #888); padding: 2px 0; align-self: flex-start; margin-left: 40px; }

/* ── Stage Boxes ── */
.stageBox                      { width: 150px; padding: 10px; border-radius: 8px; border: 2px solid var(--border-color, #444); text-align: center; transition: all 0.2s; flex-shrink: 0; }
.stageBox--completed           { border-color: #22c55e; background: rgba(34,197,94,0.08); cursor: pointer; }
.stageBox--completed:hover     { background: rgba(34,197,94,0.15); }
.stageBox--current             { border-color: var(--accent, #3b82f6); box-shadow: 0 0 14px rgba(59,130,246,0.5); background: rgba(59,130,246,0.15); animation: stageBoxPulse 2s ease-in-out infinite; position: relative; z-index: 10; }
@keyframes stageBoxPulse { 0%, 100% { box-shadow: 0 0 14px rgba(59,130,246,0.5); } 50% { box-shadow: 0 0 24px rgba(59,130,246,0.7); } }
.stageBox--pending             { opacity: 0.5; }
.stageBox--skipped             { opacity: 0.4; }
.stageBox--skipped .stageBoxTitle { text-decoration: line-through; }
.stageBoxIcon                  { font-size: 1.3rem; }
.stageBoxTitle                 { font-size: 0.82rem; font-weight: 600; margin-top: 3px; }
.stageBoxSummary               { font-size: 0.75rem; color: var(--text-secondary, #999); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Stage Content ── */
.stageContentArea              { padding: 24px; background: var(--bg-secondary, #1e1e2e); border-radius: 10px; border: 1px solid var(--border-color, #333); }
.stageContent                  { max-width: 600px; margin: 0 auto; text-align: center; }
.stageContent h3               { margin: 0 0 8px; font-size: 1.15rem; }
.stageWarning                  { padding: 12px; border-radius: 8px; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3); margin: 12px 0; font-size: 0.95rem; }
.stageComplete                 { margin-top: 12px; padding: 10px; border-radius: 8px; background: rgba(34,197,94,0.08); font-size: 0.95rem; }
.stageCompleteIcon             { margin-right: 4px; }
.stageComingSoon               { padding: 16px; border-radius: 8px; background: var(--bg-tertiary, #2a2a3e); margin-top: 12px; }
.stageComingSoon p             { margin: 0 0 12px; font-size: 0.95rem; color: var(--text-secondary, #999); }

/* ── Stage Options (clickable cards) ── */
.stageOptions                  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
.stageOption                   { background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #444); border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.2s; text-align: center; position: relative; }
.stageOption:hover             { border-color: var(--accent, #3b82f6); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.stageOptionIcon               { font-size: 1.5rem; margin-bottom: 6px; }
.stageOptionTitle              { font-weight: 600; font-size: 0.95rem; }
.stageOptionDesc               { font-size: 0.88rem; color: var(--text-secondary, #999); margin-top: 4px; }
/* Stage option tooltips */
.stageOption::after            { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; background: #0f172a; color: #4ade80; font-size: 0.85rem; font-weight: 500; line-height: 1.4; padding: 10px 14px; border-radius: 8px; white-space: normal; width: max-content; max-width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border: 1px solid rgba(74,222,128,0.2); z-index: 10000; transition: opacity 0.15s ease, transform 0.15s ease; }
.stageOption::before           { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a; opacity: 0; pointer-events: none; z-index: 10000; transition: opacity 0.15s ease; }
.stageOption:hover::after      { opacity: 1; transform: translateX(-50%) translateY(0); }
.stageOption:hover::before     { opacity: 1; }

/* ── Stage Form ── */
.stageForm                     { margin-top: 12px; }
.stageLabel                    { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary, #999); margin-bottom: 4px; }
.stageForm input[type="text"],
.stageForm textarea            { width: 100%; max-width: 420px; }

/* ── Stage Radio Cards ── */
.stageRadioCards               { display: flex; gap: 12px; margin-top: 8px; }
.stageRadioCard                { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; border: 2px solid var(--border-color, #444); border-radius: 8px; cursor: pointer; transition: all 0.2s; flex: 1; max-width: 200px; text-align: center; }
.stageRadioCard:hover          { border-color: var(--accent, #3b82f6); }
.stageRadioCard--selected      { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.08); }
.stageRadioCard input          { display: none; }
.stageRadioIcon                { font-size: 1.5rem; margin-bottom: 6px; }
.stageRadioTitle               { font-weight: 600; font-size: 0.95rem; }
.stageRadioDesc                { font-size: 0.85rem; color: var(--text-secondary, #999); margin-top: 4px; }

/* ── Stage Navigation ── */
.stageNavigation               { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin-top: 16px; }
.stageIndicator                { font-size: 0.9rem; color: var(--text-secondary, #999); }

/* ── Background Task Status Bar ── */
.wfStatusBar                   { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-top: 8px; border-radius: 8px; background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #333); font-size: 0.88rem; color: var(--text-secondary, #bbb); }
.wfStatusBar--done             { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.wfStatusLabel                 { flex: 1; }
.wfStatusAction                { font-size: 0.82rem; cursor: pointer; color: var(--accent, #3b82f6); background: none; border: none; padding: 0; text-decoration: underline; }

/* ── Upload/Register Wizard Overlay ── */
.uwWizardOverlay               { max-width: 640px; margin: 0 auto; padding: 24px; background: var(--bg-secondary, #1a1a2e); border: 1.5px solid var(--accent, #3b82f6); border-radius: 12px; box-shadow: 0 8px 32px rgba(59,130,246,0.12), 0 2px 8px rgba(0,0,0,0.3); text-align: center; }
.uwWizardOverlay--wide         { max-width: 900px; }
.uwWizardOverlay.uwWizardOverlay--batch { max-width: none; width: min(1060px, 92vw); resize: horizontal; overflow: auto; min-width: 640px; }
.uwWizardHeader                { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.uwStepDesc                    { font-size: 0.88rem; color: #86efac; margin: -4px auto 14px; padding: 6px 16px; border-radius: 20px; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.25); display: inline-block; font-weight: 500; }

/* ── Upload Wizard ── */
.uwDots                        { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin-bottom: 16px; }
.uwDotWrap                     { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uwDotLabel                    { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary, #999); letter-spacing: 0.02em; }
.uwDotLabel--active            { color: var(--accent, #3b82f6); font-weight: 600; }
.uwDotLabel--done              { color: #22c55e; font-weight: 600; }
.uwDot                         { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; border: 2.5px solid var(--border-color, #444); color: var(--text-secondary, #999); background: rgba(255,255,255,0.04); transition: all 0.25s ease; }
.uwDot--active                 { border-color: var(--accent, #3b82f6); color: #fff; background: var(--accent, #3b82f6); box-shadow: 0 0 12px rgba(59,130,246,0.45); }
.uwDot--done                   { border-color: #22c55e; color: #fff; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.uwDotConnector                { width: 24px; height: 2px; background: var(--border-color, #444); margin-top: 15px; flex-shrink: 0; }
.uwDotConnector--done          { background: #22c55e; }
.uwNav                         { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color, #333); }
.uwStepLabel                   { font-size: 0.88rem; color: var(--text-secondary, #999); }
.uwSection                     { text-align: left; }
.uwFileInfo                    { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-tertiary, #2a2a3e); border-radius: 8px; margin-top: 8px; font-size: 0.9rem; }
.uploadDropCompact             { border: 2px dashed var(--border-color, #444); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg-secondary, #1e1e2e); }
.uploadDropCompact:hover,
.uploadDropCompact.dragover    { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.05); }

/* ── Upload/Register Path Cards (step 1 two-choice layout) ── */
.uwPathCards                   { display: flex; gap: 12px; align-items: stretch; }
.uwPathCard                    { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px; border: 2px dashed var(--border-color, #444); border-radius: 10px; cursor: pointer; transition: all 0.2s; background: var(--bg-tertiary, #2a2a3e); text-align: center; min-height: 110px; }
.uwPathCard:hover              { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.06); transform: translateY(-1px); }
.uwPathCard--upload.dragover   { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.1); }
.uwPathIcon                    { font-size: 1.4rem; margin-bottom: 6px; }
.uwPathTitle                   { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.uwPathDesc                    { font-size: 0.82rem; color: var(--text-secondary, #999); line-height: 1.3; }
.uwPathDivider                 { display: flex; align-items: center; padding: 0 2px; }
.uwPathDivider span            { font-size: 0.82rem; color: var(--text-secondary, #666); font-weight: 500; }
.uwPreviewTable                { margin-top: 10px; border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: auto; max-height: 180px; }
.uwPreviewTable table          { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.uwPreviewTable th             { padding: 6px 10px; background: var(--bg-tertiary, #2a2a3e); font-weight: 600; text-align: left; position: sticky; top: 0; border-bottom: 1px solid var(--border-color, #333); white-space: nowrap; }
.uwPreviewTable td             { padding: 5px 10px; border-bottom: 1px solid var(--border-color, #222); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.uwProgressBox                 { padding: 16px; background: var(--bg-tertiary, #2a2a3e); border-radius: 8px; }
.uwProgressLabel               { font-size: 0.95rem; margin-bottom: 4px; }

/* ── Register Data Source Wizard ── */
.rsInputRow                    { display: flex; gap: 8px; align-items: center; }
.rsInputRow .formInput         { flex: 1; }
.rsBrowseBtn                   { flex-shrink: 0; padding: 8px 12px; font-size: 0.82rem; white-space: nowrap; }

/* ── Data Category Grid (wizard step 4) ── */
.uwCategoryGrid                { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.uwCategoryCard                { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--border-color, #555); border-radius: 8px; cursor: pointer; transition: all 0.15s; text-align: left; background: var(--bg-tertiary, #2a2a3e); }
.uwCategoryCard:hover          { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.1); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.uwCategoryCard--selected      { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.12); box-shadow: 0 0 0 1px var(--accent, #3b82f6); }
.uwCategoryIcon                { font-size: 1.2rem; }
.uwCategoryLabel               { font-weight: 600; font-size: 0.92rem; }
.uwCategoryDesc                { font-size: 0.82rem; color: var(--text-secondary, #999); line-height: 1.3; }

/* ── Review & Classify Stage ── */
.rcSummary                     { display: flex; gap: 14px; font-size: 0.9rem; color: var(--text-secondary, #bbb); margin-bottom: 10px; flex-wrap: wrap; }
.rcPiiFlag                     { color: #f59e0b; font-weight: 600; }
.rcTableWrap                   { border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: auto; max-height: 280px; }
.rcTable                       { width: 100%; border-collapse: collapse; font-size: 0.88rem; text-align: left; }
.rcTable thead                 { position: sticky; top: 0; z-index: 1; }
.rcTable th                    { padding: 6px 10px; background: var(--bg-tertiary, #2a2a3e); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--border-color, #333); }
.rcTable td                    { padding: 5px 10px; border-bottom: 1px solid var(--border-color, #222); white-space: nowrap; }
.rcColName code                { font-size: 0.84rem; background: rgba(59,130,246,0.08); padding: 1px 5px; border-radius: 3px; }
.rcColType                     { color: var(--text-secondary, #999); font-size: 0.84rem; }
.rcColDesc                     { max-width: 200px; overflow: hidden; text-overflow: ellipsis; font-size: 0.84rem; color: var(--text-secondary, #bbb); }
.rcBadge                       { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 0.8rem; font-weight: 600; }
.rcBadge--semantic             { background: rgba(59,130,246,0.12); color: #60a5fa; }
.rcBadge--pii, .rcBadge--phi, .rcBadge--pci { background: rgba(239,68,68,0.12); color: #f87171; }
.rcBadge--sensitive, .rcBadge--restricted   { background: rgba(245,158,11,0.12); color: #fbbf24; }
.rcBadge--confidential         { background: rgba(168,85,247,0.12); color: #c084fc; }
.rcBadge--internal             { background: rgba(34,197,94,0.12); color: #4ade80; }
.rcBadge--public               { background: rgba(100,116,139,0.12); color: #94a3b8; }
.rcSource                      { font-size: 0.7rem; color: var(--text-secondary, #666); margin-left: 3px; vertical-align: super; }

/* ── Inline Enrichment (workflow stages) ── */
.stageContentWide              { max-width: none; text-align: left; }
.wfEnrichConfig                { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #333); border-radius: 8px; margin-bottom: 12px; }
.wfEnrichConfig label          { font-size: 0.75rem; color: var(--text-secondary, #999); white-space: nowrap; }
.wfEnrichConfig select         { padding: 4px 6px; font-size: 0.8rem; border-radius: 4px; border: 1px solid var(--border-color, #444); background: var(--input-bg, #1a1a2e); color: var(--text-primary, #e2e8f0); }
.wfEnrichConfig .wfPiiBadge    { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); border-radius: 4px; font-size: 0.75rem; color: #22c55e; }
.wfEnrichProgress              { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #333); margin: 12px 0; font-size: 0.88rem; color: var(--text-secondary, #bbb); }
.wfEnrichProgress--detailed    { flex-direction: column; align-items: stretch; gap: 6px; }
.wfEnrichStatusRow             { display: flex; align-items: center; gap: 8px; }
.wfProgressRow                 { display: flex; align-items: center; gap: 8px; }
.wfProgressRow .wfProgressBar  { flex: 1; }
.wfProgressLabel               { font-size: 0.78rem; color: var(--text-secondary, #999); white-space: nowrap; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.wfEnrichProgress .wfProgressBar { flex: 1; height: 4px; background: var(--bg-secondary, #1e1e2e); border-radius: 2px; overflow: hidden; }
.wfEnrichProgress .wfProgressFill { height: 100%; background: var(--accent, #3b82f6); border-radius: 2px; transition: width 0.3s; }
.wfActivityLog                 { max-height: 110px; overflow-y: auto; font-size: 0.76rem; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; line-height: 1.55; border-top: 1px solid var(--border-color, #333); padding-top: 6px; margin-top: 2px; }
.wfActivityLog:empty           { display: none; }
.wfActivityLog::-webkit-scrollbar       { width: 4px; }
.wfActivityLog::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.wfActEntry                    { display: flex; align-items: center; gap: 6px; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e2e8f0; }
.wfActTime                     { color: #64748b; font-size: 0.72rem; min-width: 54px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wfActIcon                     { font-size: 0.82rem; min-width: 14px; text-align: center; flex-shrink: 0; }
.wfActIcon--info               { color: #64748b; }
.wfActIcon--tool               { color: var(--accent, #3b82f6); }
.wfActIcon--success            { color: #22c55e; }
.wfActIcon--error              { color: #f87171; }
.wfActIcon--text               { color: #64748b; }
.wfActText                     { overflow: hidden; text-overflow: ellipsis; }
.wfActEntry--tool .wfActText   { color: var(--accent, #3b82f6); }
.wfActEntry--success .wfActText { color: #4ade80; }
.wfActEntry--error .wfActText  { color: #f87171; }
.wfActEntry--text .wfActText   { color: var(--text-secondary, #777); font-style: italic; }
.wfTokenStats                  { font-size: 0.72rem; color: var(--text-secondary, #777); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wfCancelBtn                   { margin-left: auto; padding: 3px 12px; font-size: 0.78rem; font-weight: 600; border-radius: 5px; border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); color: #f87171; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.wfCancelBtn:hover             { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.6); }
.wfStageHeaderRow              { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wfBackBtn                     { flex-shrink: 0; }
.wfPiiBanner                   { padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 0.88rem; }
.wfPiiBanner--warn             { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }
.wfPiiEditLink                 { color: #60a5fa; text-decoration: underline; cursor: pointer; font-weight: 600; }
.wfPiiEditLink:hover           { color: #93bbfd; }
.wfPiiBanner--safe             { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.wfUploadEnrichSummary          { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary, #999); padding: 8px 12px; border-radius: 6px; background: var(--bg-tertiary, #2a2a3e); border: 1px solid var(--border-color, #444); }
.wfUploadPiiFlag               { color: #f87171; font-weight: 600; }
.wfReviewIntro                 { margin-bottom: 14px; }
.wfReviewSteps                 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }
.wfReviewStep                  { font-size: 0.82rem; color: #93c5fd; padding: 5px 14px; border-radius: 20px; background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.25); font-weight: 500; }
/* ── Inline Results Filter Bar ── */
.wfFilterBar                   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.wfSearchInput                 { flex: 1; min-width: 180px; max-width: 300px; padding: 5px 10px; font-size: 0.82rem; border-radius: 6px; border: 1px solid var(--border-color, #444); background: var(--bg-tertiary, #2a2a3e); color: var(--text-primary, #e2e8f0); outline: none; }
.wfSearchInput:focus           { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.wfSearchInput::placeholder    { color: var(--text-secondary, #888); }
.wfFilterPill                  { padding: 3px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; opacity: 0.7; }
.wfFilterPill:hover            { opacity: 1; }
.wfFilterPill--active          { opacity: 1; box-shadow: 0 0 6px rgba(0,0,0,0.2); }
.wfFilterPill--all             { background: rgba(148,163,184,0.15); color: var(--text-primary, #e2e8f0); border-color: var(--border-color, #555); }
.wfFilterPill--pii             { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.3); }
.wfFilterPill--sensitive       { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.3); }
.wfFilterPill--confidential    { background: rgba(168,85,247,0.12); color: #c084fc; border-color: rgba(168,85,247,0.3); }
.wfFilterPill--internal        { background: rgba(34,197,94,0.12); color: #86efac; border-color: rgba(34,197,94,0.3); }
.wfFilterPill--public          { background: rgba(148,163,184,0.12); color: #94a3b8; border-color: rgba(148,163,184,0.3); }

.wfInlineActions               { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.wfActionBtn                   { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; border-radius: 8px; border: 1.5px solid var(--border-color, #444); background: var(--bg-tertiary, #2a2a3e); color: var(--text-primary, #e2e8f0); cursor: pointer; transition: all 0.2s ease; }
.wfActionBtn:hover             { background: var(--bg-secondary, #1e1e2e); border-color: rgba(148,163,184,0.4); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.wfActionBtn--edit             { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.5); color: #60a5fa; }
.wfActionBtn--edit:hover       { background: rgba(59,130,246,0.25); border-color: #3b82f6; box-shadow: 0 2px 12px rgba(59,130,246,0.25); }
.wfContinueRow                 { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color, #333); }
.wfResultsWrap                 { resize: vertical; min-height: 120px; }
.wfResultsGrid                 { table-layout: fixed; width: 100%; }
.wfResultsGrid td, .wfResultsGrid th { border-right: 1px solid var(--border-color, #333); overflow: hidden; text-overflow: ellipsis; }
.wfResultsGrid td:last-child, .wfResultsGrid th:last-child { border-right: none; }
.wfColHdr                      { position: relative; user-select: none; }
.wfColHdr::after               { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 3px; cursor: col-resize; background: transparent; }
.wfColHdr:hover::after         { background: var(--accent, #3b82f6); border-radius: 1px; }

/* ── Inferred Partition Info ── */
.inferredInfo                  { font-size: 0.9rem; color: var(--text-secondary, #bbb); margin-top: 8px; padding: 8px 12px; background: var(--bg-tertiary, #2a2a3e); border-radius: 6px; border-left: 3px solid #22c55e; }

/* ── Profile Spinner ── */
.wfSpinner                     { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--accent, #3b82f6); border-radius: 50%; animation: wfSpin 0.8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes wfSpin              { to { transform: rotate(360deg); } }

/* ── Animated Timer Icon (status bar) ── */
.wfTimerIcon                   { position: relative; width: 18px; height: 18px; border: 2px solid var(--accent, #3b82f6); border-radius: 50%; flex-shrink: 0; }
.wfTimerIcon::before           { content: ''; position: absolute; top: 3px; left: 50%; width: 1.5px; height: 5px; background: var(--accent, #3b82f6); transform-origin: bottom center; transform: translateX(-50%); animation: wfTimerHand 2s linear infinite; border-radius: 1px; }
@keyframes wfTimerHand         { to { transform: translateX(-50%) rotate(360deg); } }
.wfStatusElapsed               { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; color: var(--accent, #3b82f6); flex-shrink: 0; min-width: 36px; text-align: right; }

/* ── Workflow Relations Container ── */
.wfRelationsContainer          { margin-top: 12px; max-height: 400px; overflow-y: auto; text-align: left; }

/* ── Workflow Table Selector ── */
.wfTableList                   { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-color, #333); border-radius: 8px; }
.wfTableItem                   { padding: 10px 14px; cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border-color, #222); }
.wfTableItem:last-child        { border-bottom: none; }
.wfTableItem:hover             { background: var(--bg-tertiary, #2a2a3e); }
.wfTableName                   { font-size: 0.9rem; }

/* ── Dashboard Help Button & Tips ── */
.dashboardHelpBtn              { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(74,222,128,0.3); background: none; color: #4ade80; font-size: 0.7rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.dashboardHelpBtn:hover        { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.08); }
.dashboardHelpTip              { font-size: 0.9rem; color: #4ade80; padding: 10px 14px; margin-bottom: 8px; border-radius: 8px; background: #0f172a; border-left: 3px solid #4ade80; line-height: 1.5; font-weight: 500; }
.dashboardHelpTip kbd          { background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #444); border-radius: 3px; padding: 1px 5px; font-size: 0.82rem; }

/* ── Flow Introduction Card ── */
.wfIntroduction                { margin: 0 0 8px; }
.wfIntroCard                   { background: var(--bg-secondary, #1e1e2e); border: 1px solid rgba(59,130,246,0.25); border-radius: 10px; padding: 10px 14px; }
.wfIntroHeader                 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wfIntroHeader strong          { font-size: 0.88rem; color: var(--text-primary, #e2e8f0); }
.wfIntroDismiss                { background: none; border: none; color: var(--text-secondary, #999); font-size: 1rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.wfIntroDismiss:hover          { color: var(--text-primary, #e2e8f0); }
.wfIntroSteps                  { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wfIntroStep                   { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: var(--bg-tertiary, #2a2a3e); border-radius: 6px; font-size: 0.8rem; cursor: default; }
.wfIntroStepIcon               { font-size: 0.9rem; }
.wfIntroStepLabel              { font-weight: 600; color: var(--text-primary, #e2e8f0); }
.wfIntroStepText               { color: var(--text-secondary, #999); }
.wfIntroArrow                  { color: var(--text-secondary, #666); font-size: 0.85rem; }

/* ── Workflow Help Modal ── */
.wfHelpOverlay                 { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.2s ease; }
.wfHelpOverlay.visible         { opacity: 1; }
.wfHelpModal                   { background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border-color, #444); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-width: 560px; width: 92vw; max-height: 75vh; display: flex; flex-direction: column; transform: translateY(12px); transition: transform 0.2s ease; }
.wfHelpOverlay.visible .wfHelpModal { transform: translateY(0); }
.wfHelpHeader                  { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-color, #333); }
.wfHelpHeader h3               { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary, #e2e8f0); }
.wfHelpClose                   { background: none; border: none; color: var(--text-secondary, #999); font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.wfHelpClose:hover             { color: var(--text-primary, #e2e8f0); }
.wfHelpBody                    { padding: 16px 20px; overflow-y: auto; flex: 1; }
.wfHelpIntro                   { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.5; color: var(--text-primary, #d0d0d0); }
.wfHelpIntro strong            { color: #fff; }
.wfHelpSteps                   { display: flex; flex-direction: column; gap: 10px; }
.wfHelpStep                    { display: flex; gap: 12px; padding: 12px 14px; background: var(--bg-tertiary, #2a2a3e); border-radius: 8px; border: 1px solid var(--border-color, #444); }
.wfHelpStepNum                 { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(59,130,246,0.2); color: #60a5fa; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.wfHelpStepBody                { flex: 1; min-width: 0; }
.wfHelpStepTitle               { font-size: 0.92rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.wfHelpOptional                { font-weight: 400; font-size: 0.8rem; color: var(--text-secondary, #aaa); }
.wfHelpStepDetail              { font-size: 0.88rem; line-height: 1.5; color: var(--text-primary, #d0d0d0); }
.wfHelpFooter                  { margin: 14px 0 0; font-size: 0.85rem; color: var(--text-secondary, #aaa); font-style: italic; }
.wfHelpActions                 { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border-color, #333); }
.wfHelpDontShow                { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary, #999); cursor: pointer; }
.wfHelpDontShow input          { margin: 0; cursor: pointer; }

/* Help button in workflow header */
.wfHelpBtn                     { background: none; border: 1px solid var(--border-color, #444); color: var(--text-secondary, #999); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.wfHelpBtn:hover               { border-color: #60a5fa; color: #60a5fa; background: rgba(59,130,246,0.08); }

/* ── Button Variants ── */
.btnSm                         { padding: 5px 12px; font-size: 0.82rem; }
.btnGhost                      { background: none; border: 1px solid var(--border-color, #444); color: var(--text-secondary, #999); border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.btnGhost:hover                { border-color: #ef4444; color: #ef4444; }
.btnDanger                     { background: none; border: 1px solid rgba(239,68,68,0.4); color: #ef4444; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.btnDanger:hover               { background: rgba(239,68,68,0.1); border-color: #ef4444; }

/* ── Responsive ── */
/* 2-col cards — sub-tiles stay 4-col, cqi+minmax handle sizing automatically */
@media (max-width: 1100px) {
  .dashboardStartCards         { grid-template-columns: repeat(2, 1fr); }
}
/* Narrow 2-col */
@media (max-width: 768px) {
  .dashboardStartCards         { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .startCard                   { padding: 14px 12px; }
  .homeTitle                   { font-size: 1.6rem; }
  .homeSubtitle                { font-size: 1rem; }
  .favoritesRow                { flex-direction: column; align-items: flex-start; gap: 8px; }
  .flowRow                     { flex-wrap: wrap; justify-content: center; }
  .stageBox                    { width: 120px; padding: 8px; }
}
/* Single-col cards */
@media (max-width: 520px) {
  .dashboardStartCards         { grid-template-columns: 1fr; }
  .startCard                   { padding: 12px 14px; }
  .homeTitle                   { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Light Theme Overrides
   ═══════════════════════════════════════════════════════════════════ */

/* ── Full-page bg so entire window is tinted, not just homeContainer box ── */
.light-theme .home-fullwidth .mainContent { background: #ececec; }
.light-theme .homeContainer    { background: transparent; }

/* ── Top Control Buttons (bright white like fav pills) ── */
.light-theme .homeTitleControls .btnSecondary { background: #fff; border-color: #94a3b8; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.light-theme .homeTitleControls .btnSecondary:hover { background: #f8fafc; border-color: #64748b; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }

/* ── Title & Subtitle ── */
.light-theme .homeTitle         { color: #0f172a; }
.light-theme .homeSubtitle      { color: #334155; }
.light-theme .homeSubtitleLink  { color: #2563eb; }

/* ── Dashboard Headings ── */
.light-theme .dashboardHeading  { color: #0f172a; }
.light-theme .dashboardHeading--hero { color: #2563eb; }
.light-theme .dashboardSectionHeader h3 { color: #0f172a; }
.light-theme .dashboardEmpty    { color: #475569; }

/* ── Tabs ── */
.light-theme .dashboardTabs    { border-bottom-color: #cbd5e1; }
.light-theme .dashboardTab     { color: #475569; background: #eef2f7; border-color: #cbd5e1; }
.light-theme .dashboardTab:hover { color: #0f172a; background: #fff; }
.light-theme .dashboardTab.active { color: #2563eb; background: #fff; border-color: #cbd5e1; border-bottom-color: #fff; font-weight: 700; }

/* ── Pending Task Cards ── */
.light-theme #dashboardPendingTasks::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.light-theme .pendingTaskCard  { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.light-theme .pendingTaskCard:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.light-theme .taskName         { color: #0f172a; }
.light-theme .taskMeta         { color: #334155; }
.light-theme .taskStages       { color: #475569; }
.light-theme .taskBarInline    { background: #cbd5e1; }

/* ── Resume Banner ── */
.light-theme .resumeBannerContent { background: #eff6ff; border-color: #2563eb; box-shadow: 0 1px 4px rgba(37,99,235,0.1); }
.light-theme .resumeBannerBar  { background: #cbd5e1; }
.light-theme .resumeBannerLabel { color: #475569; }
.light-theme .resumeBannerTask  { color: #0f172a; }

/* ── Recommended Cards ── */
.light-theme .recommendedCard  { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.light-theme .recommendedCard:hover { border-color: #2563eb; background: rgba(37,99,235,0.04); box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.light-theme .recommendedText  { color: #0f172a; }
.light-theme .recommendedArrow { color: #64748b; }
.light-theme .recommendedCard:hover .recommendedArrow { color: #2563eb; }
.light-theme .recommendedCard--highlight { border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.04); }
.light-theme .recommendedCard--highlight:hover { border-color: #16a34a; background: rgba(22,163,74,0.08); }
.light-theme .recommendedCard--highlight .recommendedArrow { color: #16a34a; }

/* ── Pillar / Start Cards ── */
.light-theme .startCard        { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border-top-width: 3px; border-top-style: solid; }
.light-theme .startCard:hover  { border-color: #93c5fd; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.light-theme .startCardTitle   { color: #0f172a; }
.light-theme .startCardDesc    { color: #334155; }
.light-theme .startCardComingSoon { color: #94a3b8; }
.light-theme .startCard--analytics { border-top-color: #3b82f6; }
.light-theme .startCard--build    { border-top-color: #f59e0b; }
.light-theme .startCard--develop  { border-top-color: #8b5cf6; }
.light-theme .startCard--automate { border-top-color: #10b981; }
.light-theme .startCard--segment  { border-top-color: #ec4899; }
.light-theme .startCard--govern   { border-top-color: #6366f1; }
.light-theme .startCard--analytics .subTile { background: rgba(59,130,246,0.08); }
.light-theme .startCard--build .subTile     { background: rgba(245,158,11,0.08); }
.light-theme .startCard--develop .subTile   { background: rgba(139,92,246,0.08); }
.light-theme .startCard--automate .subTile  { background: rgba(16,185,129,0.08); }
.light-theme .startCard--govern .subTile    { background: rgba(99,102,241,0.08); }

/* ── Sub-Tiles ── */
.light-theme .subTile          { background: #eef2f7; border: 1px solid #e2e8f0; }
.light-theme .subTile:hover    { background: rgba(37,99,235,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #93c5fd; }
.light-theme .subTileLabel     { color: #0f172a; }
.light-theme .subTile--wf      { background: rgba(59,130,246,0.08); outline-color: rgba(59,130,246,0.4); }
.light-theme .subTile--wf:hover { background: rgba(59,130,246,0.15); }
.light-theme .subTileArrow     { background: rgba(255,255,255,0.85); color: #334155; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.light-theme .subTileArrow:hover { background: #2563eb; color: #fff; border-color: #2563eb; }

/* ── Sub-Tile Tooltips (dark bg for contrast in light mode) ── */
.light-theme .subTile::after   { background: #1e293b; color: #4ade80; border-color: rgba(74,222,128,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.light-theme .subTile::before  { border-top-color: #1e293b; }

/* ── Pillar Help (bold green on white) ── */
.light-theme .pillarHelpBtn    { border-color: #16a34a; color: #16a34a; border-width: 1.5px; }
.light-theme .pillarHelpBtn:hover { border-color: #15803d; background: rgba(22,163,74,0.1); color: #15803d; }
.light-theme .pillarHelpTip    { background: #1e293b; color: #4ade80; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

/* ── Dashboard Help (bold green on white) ── */
.light-theme .dashboardHelpBtn { border-color: #16a34a; color: #16a34a; border-width: 1.5px; }
.light-theme .dashboardHelpBtn:hover { border-color: #15803d; background: rgba(22,163,74,0.1); color: #15803d; }
.light-theme .dashboardHelpTip { background: #1e293b; color: #4ade80; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.light-theme .dashboardHelpTip kbd { background: #334155; border-color: #475569; color: #4ade80; }

/* ── Favorites ── */
.light-theme #dashboardQuickJump { border-top-color: #cbd5e1; border-bottom-color: #cbd5e1; }
.light-theme .favoritesRow .dashboardHeading { color: #0f172a; }
.light-theme .quickJumpPill    { background: #fff; border: 1.5px solid #94a3b8; color: #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,0.1); font-weight: 500; }
.light-theme .quickJumpPill:hover { background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: 0 3px 10px rgba(37,99,235,0.25); }
.light-theme .quickJumpPill::after  { background: #1e293b; color: #4ade80; border-color: rgba(74,222,128,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.light-theme .quickJumpPill::before { border-top-color: #1e293b; }

/* ── Search Bar ── */
.light-theme .searchCompactRow { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.light-theme .searchCompactRow .searchInput { color: #0f172a; }
.light-theme .searchCompactRow .searchInput::placeholder { color: #94a3b8; }
.light-theme .searchCompactIcon { color: #475569; }

/* ── Search Help (dark popover for readability) ── */
.light-theme .homeSearchCompact .searchHelpBtn { border-color: #16a34a; color: #16a34a; border-width: 1.5px; }
.light-theme .homeSearchCompact .searchHelpBtn:hover { border-color: #15803d; background: rgba(22,163,74,0.1); }
.light-theme .homeSearchCompact .searchHelpBtn svg { stroke: #16a34a; }
.light-theme .homeSearchCompact .searchHelpPopover { background: #1e293b; border-color: rgba(74,222,128,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* ── Workflow Stage UI ── */
.light-theme .stageContentArea { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.light-theme .stageOption      { background: #f8fafc; border-color: #cbd5e1; }
.light-theme .stageOption:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,0.1); }
.light-theme .stageOption::after  { background: #1e293b; color: #e2e8f0; border-color: #475569; }
.light-theme .stageOption::before { border-top-color: #1e293b; }
.light-theme .stageOptionTitle { color: #0f172a; }
.light-theme .stageOptionDesc  { color: #64748b; }
.light-theme .stageRadioCard   { border-color: #cbd5e1; }
.light-theme .stageRadioCard:hover { border-color: #2563eb; }
.light-theme .stageRadioCard--selected { background: rgba(37,99,235,0.06); border-color: #2563eb; }
.light-theme .stageComingSoon  { background: #f8fafc; }
.light-theme .stageBox         { border-color: #94a3b8; }
.light-theme .stageBoxTitle    { color: #1e293b; }
.light-theme .stageBoxSummary  { color: #64748b; }
.light-theme .stageWarning     { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.5); }
.light-theme .stageLabel       { color: #475569; }
.light-theme .stageIndicator   { color: #64748b; }

/* ── Upload Wizard (light) ── */
.light-theme .uwWizardOverlay  { background: #fff; border-color: #2563eb; box-shadow: 0 8px 32px rgba(37,99,235,0.08), 0 2px 8px rgba(0,0,0,0.08); }
.light-theme .uwWizardHeader   { color: #0f172a; }
.light-theme .uwStepDesc       { color: #15803d; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); }
.light-theme .uwDot            { border-color: #cbd5e1; color: #64748b; background: #f1f5f9; }
.light-theme .uwDot--active    { border-color: #2563eb; color: #fff; background: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,0.25); }
.light-theme .uwDot--done      { border-color: #16a34a; color: #fff; background: #16a34a; box-shadow: 0 0 6px rgba(22,163,74,0.2); }
.light-theme .uwDotLabel       { color: #64748b; }
.light-theme .uwDotLabel--active { color: #2563eb; }
.light-theme .uwDotLabel--done { color: #16a34a; }
.light-theme .uwDotConnector   { background: #cbd5e1; }
.light-theme .uwDotConnector--done { background: #16a34a; }
.light-theme .uwNav            { border-top-color: #cbd5e1; }
.light-theme .uwFileInfo       { background: #eef2f7; }
.light-theme .uploadDropCompact { background: #f8fafc; border-color: #cbd5e1; }
.light-theme .uploadDropCompact:hover,
.light-theme .uploadDropCompact.dragover { border-color: #2563eb; background: rgba(37,99,235,0.04); }
.light-theme .uwPathCard       { background: #f8fafc; border-color: #cbd5e1; }
.light-theme .uwPathCard:hover { border-color: #2563eb; background: rgba(37,99,235,0.04); }
.light-theme .uwPathCard--upload.dragover { border-color: #2563eb; background: rgba(37,99,235,0.08); }
.light-theme .uwPathTitle      { color: #0f172a; }
.light-theme .uwPathDesc       { color: #64748b; }
.light-theme .uwPathDivider span { color: #94a3b8; }
.light-theme .uwPreviewTable   { border-color: #cbd5e1; }
.light-theme .uwPreviewTable th { background: #eef2f7; border-bottom-color: #cbd5e1; color: #0f172a; }
.light-theme .uwPreviewTable td { border-bottom-color: #e2e8f0; color: #334155; }
.light-theme .uwProgressBox    { background: #eef2f7; }
.light-theme .inferredInfo     { background: #f0fdf4; color: #334155; border-left-color: #16a34a; }
.light-theme .rcSummary        { color: #334155; }
.light-theme .rcPiiFlag        { color: #d97706; }
.light-theme .rcTableWrap      { border-color: #cbd5e1; }
.light-theme .rcTable th       { background: #eef2f7; border-bottom-color: #cbd5e1; color: #0f172a; }
.light-theme .rcTable td       { border-bottom-color: #e2e8f0; }
.light-theme .rcColName code   { background: rgba(37,99,235,0.08); color: #1e40af; }
.light-theme .rcColType        { color: #64748b; }
.light-theme .rcColDesc        { color: #475569; }
.light-theme .rcBadge--semantic { background: rgba(37,99,235,0.1); color: #2563eb; }
.light-theme .rcBadge--pii, .light-theme .rcBadge--phi, .light-theme .rcBadge--pci { background: rgba(220,38,38,0.1); color: #dc2626; }
.light-theme .rcBadge--sensitive, .light-theme .rcBadge--restricted { background: rgba(217,119,6,0.1); color: #d97706; }
.light-theme .rcBadge--confidential { background: rgba(147,51,234,0.1); color: #9333ea; }
.light-theme .rcBadge--internal { background: rgba(22,163,74,0.1); color: #16a34a; }
.light-theme .rcBadge--public  { background: rgba(100,116,139,0.1); color: #64748b; }

/* ── Inline Enrichment (light) ── */
.light-theme .wfEnrichConfig   { background: #eef2f7; border-color: #cbd5e1; }
.light-theme .wfEnrichConfig label { color: #475569; }
.light-theme .wfEnrichConfig select { background: #fff; border-color: #cbd5e1; color: #0f172a; }
.light-theme .wfEnrichProgress { background: #eef2f7; border-color: #cbd5e1; color: #334155; }
.light-theme .wfEnrichProgress .wfProgressBar { background: #cbd5e1; }
.light-theme .wfActivityLog   { border-top-color: #cbd5e1; }
.light-theme .wfActivityLog::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.light-theme .wfActEntry      { color: #1e293b; }
.light-theme .wfActTime       { color: #94a3b8; }
.light-theme .wfActIcon--info { color: #94a3b8; }
.light-theme .wfActIcon--tool { color: #2563eb; }
.light-theme .wfActIcon--success { color: #16a34a; }
.light-theme .wfActIcon--error { color: #dc2626; }
.light-theme .wfActIcon--text { color: #94a3b8; }
.light-theme .wfActEntry--tool .wfActText { color: #2563eb; }
.light-theme .wfActEntry--success .wfActText { color: #16a34a; }
.light-theme .wfActEntry--error .wfActText { color: #dc2626; }
.light-theme .wfActEntry--text .wfActText { color: #64748b; }
.light-theme .wfTokenStats    { color: #64748b; }
.light-theme .wfProgressLabel { color: #64748b; }
.light-theme .wfPiiBanner--warn { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.3); color: #dc2626; }
.light-theme .wfPiiEditLink    { color: #2563eb; }
.light-theme .wfPiiEditLink:hover { color: #1d4ed8; }
.light-theme .wfPiiBanner--safe { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.3); color: #16a34a; }
.light-theme .wfReviewStep     { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.2); color: #1d4ed8; }
.light-theme .wfSearchInput    { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.light-theme .wfFilterPill--all { background: rgba(100,116,139,0.1); color: #475569; border-color: #cbd5e1; }
.light-theme .wfFilterPill--pii { color: #dc2626; background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); }
.light-theme .wfFilterPill--sensitive { color: #d97706; background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.25); }
.light-theme .wfFilterPill--confidential { color: #7c3aed; background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); }
.light-theme .wfFilterPill--internal { color: #16a34a; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); }
.light-theme .wfFilterPill--public { color: #64748b; background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.25); }
.light-theme .wfUploadEnrichSummary { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.light-theme .wfUploadPiiFlag  { color: #dc2626; }
.light-theme .wfContinueRow    { border-top-color: #cbd5e1; }
.light-theme .wfActionBtn      { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }
.light-theme .wfActionBtn:hover { background: #e2e8f0; border-color: #94a3b8; }
.light-theme .wfActionBtn--edit { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.4); color: #2563eb; }
.light-theme .wfActionBtn--edit:hover { background: rgba(37,99,235,0.15); border-color: #2563eb; }
.light-theme .wfResultsGrid td, .light-theme .wfResultsGrid th { border-right-color: #e2e8f0; }

.light-theme .uwCategoryCard   { border-color: #94a3b8; background: #f1f5f9; }
.light-theme .uwCategoryCard:hover { border-color: #2563eb; background: rgba(37,99,235,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.light-theme .uwCategoryCard--selected { border-color: #2563eb; background: rgba(37,99,235,0.08); box-shadow: 0 0 0 1px #2563eb; }
.light-theme .uwCategoryLabel  { color: #0f172a; }
.light-theme .uwCategoryDesc   { color: #64748b; }

/* ── Table Selector ── */
.light-theme .wfTableList      { border-color: #cbd5e1; }
.light-theme .wfTableItem      { border-bottom-color: #e2e8f0; }
.light-theme .wfTableItem:hover { background: #eef2f7; }
.light-theme .wfTableName      { color: #1e293b; }

/* ── Buttons ── */
.light-theme .btnGhost         { border-color: #94a3b8; color: #475569; }
.light-theme .btnGhost:hover   { border-color: #ef4444; color: #ef4444; }
.light-theme .btnDanger        { background: #fef2f2; border: 1.5px solid #ef4444; color: #dc2626; }
.light-theme .btnDanger:hover  { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }

/* ── Recent Tasks ── */
.light-theme .recentTaskItem   { color: #475569; }
.light-theme .recentTaskItem + .recentTaskItem::before { color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════════════
   Batch Dataset Registration & Enrichment
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stepper (horizontal numbered circles with connectors) ── */
/* Batch stepper now reuses uwDot classes from Upload Wizard */

/* ── Modal Backdrop ── */
.batchModalBackdrop         { position: fixed; inset: 0; z-index: 7000; background: rgba(0,0,0,0.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 40px; overflow-y: auto; }
.batchModalBackdrop > .uwWizardOverlay,
.batchModalBackdrop > .uwWizardOverlay--wide,
.batchModalBackdrop > .uwWizardOverlay--batch { position: relative; z-index: 7001; margin-bottom: 40px; }
.batchModalClose            { position: absolute; top: 8px; right: 8px; z-index: 10; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: var(--text-secondary, #aaa); font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, width 0.2s, border-radius 0.2s; }
.batchModalClose:hover      { background: rgba(239,68,68,0.2); color: #ef4444; border-color: rgba(239,68,68,0.4); }
.batchModalClose--confirming { width: auto; min-width: 60px; border-radius: 6px; padding: 0 10px; font-size: 0.82rem; font-weight: 600; background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.4); }
.light-theme .batchModalClose { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); color: #666; }
.light-theme .batchModalClose:hover { background: rgba(239,68,68,0.12); color: #dc2626; border-color: rgba(239,68,68,0.3); }

/* ── File Selection ── */
.batchFileList              { display: flex; flex-direction: column; gap: 6px; }
.batchFileItem              { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 8px; transition: border-color 0.15s; }
.batchFileItem:hover        { border-color: rgba(255,255,255,0.15); }
.batchFileIcon              { font-size: 1.1rem; flex-shrink: 0; }
.batchFileName              { font-size: 0.88rem; font-weight: 600; min-width: 100px; }
.batchFilePath              { font-size: 0.82rem; color: var(--text-secondary, #888); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batchFileRemove            { background: none; border: none; color: var(--text-secondary, #888); cursor: pointer; font-size: 0.88rem; padding: 4px 8px; border-radius: 4px; transition: all 0.15s; }
.batchFileRemove:hover      { color: #ef4444; background: rgba(239,68,68,0.1); }
.batchFileTag               { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 0.76rem; font-weight: 600; flex-shrink: 0; }
.batchFileTag--upload       { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.batchFileTag--partitioned  { background: rgba(59,130,246,0.15); color: #3b82f6; }
.batchFileListHeader        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.88rem; font-weight: 600; }
.batchAddMoreBtn            { background: none; border: 1px solid var(--border-color, #444); color: var(--accent, #3b82f6); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.batchAddMoreBtn:hover      { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.06); }

/* ── Configure Stage ── */
.batchConfigSection         { margin-bottom: 12px; }
.batchFieldLabel            { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary, #aaa); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.batchFieldGroup            { display: flex; flex-direction: column; }
.batchConfigInput           { background: var(--bg-primary, #111827); border: 1px solid var(--border-color, #333); border-radius: 6px; padding: 7px 10px; font-size: 0.88rem; color: var(--text-primary, #e2e8f0); width: 100%; box-sizing: border-box; transition: border-color 0.15s; }
.batchConfigInput:focus     { border-color: var(--accent, #3b82f6); outline: none; }
.batchConfigSelect          { background: var(--bg-primary, #111827); border: 1px solid var(--border-color, #333); border-radius: 6px; padding: 7px 10px; font-size: 0.85rem; color: var(--text-primary, #e2e8f0); transition: border-color 0.15s; }
.batchConfigSelect:focus    { border-color: var(--accent, #3b82f6); outline: none; }
.batchConfigSelect--full    { width: 100%; }
.batchCheckLabel            { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; color: var(--text-primary, #e2e8f0); }

/* ── Dataset Config Cards (grid of per-dataset cards) ── */
.batchDsCardGrid            { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.batchDsCard                { background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.batchDsCard:hover          { border-color: rgba(255,255,255,0.15); }
.batchDsCard-header         { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-tertiary, #374151); border-bottom: 1px solid rgba(255,255,255,0.06); }
.batchDsCard-ext            { font-size: 0.75rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: rgba(59,130,246,0.15); color: var(--accent, #3b82f6); letter-spacing: 0.04em; flex-shrink: 0; }
.batchDsCard-source         { font-size: 0.82rem; color: var(--text-secondary, #999); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batchDsCard-body           { padding: 10px 12px; }
.batchDsCard-label          { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #aaa); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.batchDsCard--add           { display: flex; align-items: center; justify-content: center; border-style: dashed; cursor: pointer; min-height: 140px; }
.batchDsCard--add:hover     { border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.04); }
.batchDsCard-addInner       { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ── Enrichment Settings Section ── */
.batchEnrichSection         { margin-top: 16px; border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: hidden; }
.batchEnrichSection-title   { padding: 10px 16px; font-size: 0.9rem; font-weight: 600; background: var(--bg-tertiary, #374151); border-bottom: 1px solid rgba(255,255,255,0.06); }
.batchEnrichSection-body    { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }

/* ── Configure Actions ── */
.batchConfigActions         { margin-top: 16px; display: flex; justify-content: flex-end; gap: 12px; }

/* ── Registration Progress ── */
.batchRegList               { display: flex; flex-direction: column; gap: 6px; }
.batchRegItem               { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary, #1f2937); border-radius: 6px; border: 1px solid var(--border-color, #333); }
.batchRegItem--active       { border-color: var(--accent, #3b82f6); }
.batchRegItem--success      { border-color: #22c55e; }
.batchRegItem--error        { border-color: #ef4444; }
.batchRegIcon               { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.batchRegName               { font-size: 0.88rem; font-weight: 500; flex: 1; }
.batchRegError              { font-size: 0.82rem; color: #ef4444; }

/* ── View Toggle ── */
.batchViewToggle            { display: inline-flex; border: 1px solid var(--border-color, #444); border-radius: 6px; overflow: hidden; }
.batchViewBtn               { background: none; border: none; border-right: 1px solid var(--border-color, #444); color: var(--text-secondary, #888); padding: 5px 8px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.batchViewBtn:last-child    { border-right: none; }
.batchViewBtn:hover         { background: rgba(255,255,255,0.06); color: var(--text-primary, #e2e8f0); }
.batchViewBtn--active       { background: var(--accent, #3b82f6); color: #fff; }
.batchViewBtn svg           { display: block; }

/* ── Segmented Progress Bar ── */
.batchSegmentedBar          { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-tertiary, #374151); }
.batchSegment               { transition: width 0.3s ease; }
.batchSegment--complete     { background: #22c55e; }
.batchSegment--active       { background: #3b82f6; }
.batchSegment--review       { background: #f59e0b; }
.batchSegment--queued       { background: #6b7280; }
.batchSegment--error        { background: #ef4444; }

/* ── Card Grid ── */
.batchCardGrid              { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.batchCard                  { background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 8px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; border-left: 3px solid var(--border-color, #333); }
.batchCard:hover            { border-color: var(--accent, #3b82f6); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.batchCard.batchStatus--active  { border-left-color: #3b82f6; }
.batchCard.batchStatus--review  { border-left-color: #f59e0b; }
.batchCard.batchStatus--complete { border-left-color: #22c55e; }
.batchCard.batchStatus--error   { border-left-color: #ef4444; }
.batchCard.batchStatus--queued  { border-left-color: #6b7280; }

.batchCard-header           { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-tertiary, #374151); }
.batchCard-icon             { font-size: 1rem; flex-shrink: 0; }
.batchCard-name             { flex: 1; font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batchCard-arrow            { color: var(--text-secondary, #666); font-size: 1.1rem; font-weight: 300; flex-shrink: 0; }

.batchCard-stats            { padding: 4px 10px; font-size: 0.82rem; border-top: 1px solid rgba(255,255,255,0.06); min-height: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.batchCard-colCount         { color: var(--text-secondary, #999); }
.batchCard-pending          { color: var(--text-secondary, #666); font-style: italic; }
.batchCard-progress         { padding: 4px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.batchCard-progressRow      { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.batchCard-pct              { font-size: 0.82rem; color: var(--text-secondary, #888); min-width: 32px; text-align: right; font-weight: 600; flex-shrink: 0; }
.batchCard-action           { padding: 4px 10px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: flex-end; min-height: 28px; }

/* ── Row List ── */
.batchRowList               { display: flex; flex-direction: column; gap: 4px; }

.batchRow                   { display: flex; align-items: center; background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 6px; cursor: pointer; transition: background 0.15s; border-left: 3px solid var(--border-color, #333); min-height: 44px; }
.batchRow:hover             { background: var(--bg-tertiary, #374151); }
.batchRow.batchStatus--active  { border-left-color: #3b82f6; }
.batchRow.batchStatus--review  { border-left-color: #f59e0b; }
.batchRow.batchStatus--complete { border-left-color: #22c55e; }
.batchRow.batchStatus--error   { border-left-color: #ef4444; }
.batchRow.batchStatus--queued  { border-left-color: #6b7280; }

.batchRow-name              { flex: 0 0 240px; padding: 0 12px; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.batchRow-icon              { font-size: 0.85rem; flex-shrink: 0; display: inline-flex; align-items: center; }
.batchRow-stats             { flex: 0 0 130px; padding: 0 8px; font-size: 0.82rem; color: var(--text-secondary, #999); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.batchRow-progress          { flex: 1; padding: 0 12px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.batchRow-action            { flex: 0 0 80px; padding: 0 12px; text-align: right; }

/* ── Shared Progress Bar ── */
.batchProgressBar           { height: 6px; background: var(--bg-tertiary, #374151); border-radius: 3px; overflow: hidden; flex-shrink: 0; width: 100%; }
.batchProgressBar--sm       { height: 4px; max-width: 120px; }
.batchProgressFill          { height: 100%; background: var(--accent, #3b82f6); border-radius: 3px; transition: width 0.3s ease; }
.batchProgressFill--done    { background: #22c55e; }
.batchProgressFill--error   { background: #ef4444; }
.batchProgressText          { font-size: 0.82rem; color: var(--text-secondary, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }

/* ── Badges ── */
.batchBadge                 { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.batchBadge--pii            { background: rgba(239,68,68,0.15); color: #ef4444; }
.batchBadge--sens           { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* ── Action Buttons / Tags ── */
.batchActionBtn             { background: var(--bg-tertiary, #374151); border: 1px solid var(--border-color, #444); border-radius: 4px; padding: 4px 10px; font-size: 0.82rem; cursor: pointer; color: var(--text-primary, #e2e8f0); transition: all 0.15s; }
.batchActionBtn:hover       { border-color: var(--accent, #3b82f6); }
.batchActionBtn--review     { border-color: #f59e0b; color: #f59e0b; animation: batchPulseReview 2s ease-in-out infinite; }
.batchActionBtn--review:hover { background: rgba(245,158,11,0.1); }
.batchActionBtn--retry      { border-color: #ef4444; color: #ef4444; }
.batchActionBtn--retry:hover { background: rgba(239,68,68,0.1); }
@keyframes batchPulseReview { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 8px rgba(245,158,11,0.3); } }

.batchStatusTag             { font-size: 0.82rem; color: var(--text-secondary, #999); }
.batchCompleteTag           { font-size: 0.85rem; color: #22c55e; }

/* ── Detail Drawer ── */
.batchDrawer-overlay        { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 8000; }
.batchDrawer                { position: fixed; top: 40px; right: 24px; bottom: 40px; width: 600px; max-width: 85vw; background: var(--bg-primary, #111827); border: 1px solid var(--border-color, #333); border-radius: 12px; z-index: 8001; display: flex; flex-direction: column; transform: translateX(calc(100% + 24px)); transition: transform 0.3s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.batchDrawer--open          { transform: translateX(0); }

.batchDrawer-header         { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-color, #333); flex-shrink: 0; border-radius: 12px 12px 0 0; }
.batchDrawerNav             { background: none; border: 1px solid var(--border-color, #444); border-radius: 4px; padding: 4px 10px; cursor: pointer; color: var(--text-primary, #e2e8f0); font-size: 0.88rem; }
.batchDrawerNav:hover       { border-color: var(--accent, #3b82f6); }
.batchDrawerClose           { background: none; border: none; color: var(--text-secondary, #888); cursor: pointer; font-size: 1.1rem; padding: 4px 8px; margin-left: 8px; }
.batchDrawerClose:hover     { color: #ef4444; }

.batchDrawer-body           { flex: 1; overflow-y: auto; padding: 0; }
.batchDrawer-footer         { padding: 12px 16px; border-top: 1px solid var(--border-color, #333); flex-shrink: 0; border-radius: 0 0 12px 12px; }

/* ── Drawer Footer Buttons ── */
.batchDrawer-actions        { display: flex; gap: 10px; justify-content: flex-end; }
.batchDrawer-cancelBtn      { padding: 7px 18px; border-radius: 6px; border: 1px solid var(--border-color, #444); background: transparent; color: var(--text-secondary, #aaa); font-size: 0.85rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.batchDrawer-cancelBtn:hover { background: rgba(255,255,255,0.06); border-color: var(--text-secondary, #888); }
.batchDrawer-cancelBtn--full { width: 100%; text-align: center; }
.batchDrawer-primaryBtn     { padding: 7px 22px; border-radius: 6px; border: none; background: var(--accent, #3b82f6); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.batchDrawer-primaryBtn:hover { background: #2563eb; }

/* ── Drawer Log ── */
.batchDrawerLog             { max-height: 300px; overflow-y: auto; background: var(--bg-secondary, #1f2937); border-radius: 6px; padding: 8px 12px; margin-top: 12px; font-family: monospace; font-size: 0.8rem; }
.batchLogEntry              { padding: 2px 0; color: var(--text-secondary, #999); border-bottom: 1px solid rgba(255,255,255,0.03); }

/* ── Drawer Stats ── */
.batchDrawerStat            { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; background: var(--bg-secondary, #1f2937); border-radius: 8px; font-size: 0.82rem; color: var(--text-secondary, #999); }
.batchDrawerStatNum         { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #e2e8f0); }

/* ── Complete Stage ── */
.batchSummaryRow            { display: flex; gap: 12px; margin: 12px 0 16px; flex-wrap: wrap; }
.batchSummaryCard           { display: flex; flex-direction: column; align-items: center; padding: 16px 24px; background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 8px; min-width: 100px; }
.batchSummaryNum            { font-size: 1.8rem; font-weight: 700; color: var(--accent, #3b82f6); }
.batchSummaryLabel          { font-size: 0.85rem; color: var(--text-secondary, #999); margin-top: 4px; }
.batchSummaryCard--warn .batchSummaryNum { color: #f59e0b; }

/* ── Complete Stage Table ── */
.batchCompleteTable         { background: var(--bg-secondary, #1f2937); border: 1px solid var(--border-color, #333); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.batchCompleteTable table   { width: 100%; border-collapse: collapse; }
.batchCompleteTable th      { padding: 10px 12px; text-align: left; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary, #aaa); background: var(--bg-tertiary, #374151); border-bottom: 1px solid var(--border-color, #333); text-transform: uppercase; letter-spacing: 0.03em; }
.batchCompleteRow           { border-bottom: 1px solid rgba(255,255,255,0.04); }
.batchCompleteRow:last-child { border-bottom: none; }
.batchCompleteRow:hover     { background: rgba(255,255,255,0.02); }
.batchCompleteCell          { padding: 8px 12px; font-size: 0.88rem; }
.batchCompleteCell--muted   { color: var(--text-secondary, #999); }
.batchCompleteRow-icon      { margin-right: 6px; }
.batchCompleteStatus        { font-size: 0.82rem; color: var(--text-secondary, #999); }
.batchCompleteStatus--ok    { color: #22c55e; font-weight: 600; }
.batchCompleteStatus--err   { color: #ef4444; font-weight: 600; }
.batchCompleteActions       { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Light Theme Overrides ── */
/* batch stepper light-theme rules removed — now using uwDot classes */
.light-theme .batchModalBackdrop    { background: rgba(0,0,0,0.3); }
.light-theme .batchFileItem        { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .batchConfigInput     { background: #fff; border-color: #d1d5db; color: #1e293b; }
.light-theme .batchConfigSelect    { background: #fff; border-color: #d1d5db; color: #1e293b; }
.light-theme .batchConfigTableWrap { border-color: #e2e8f0; }
.light-theme .batchConfigGrid tbody tr:hover { background: rgba(0,0,0,0.02); }
.light-theme .batchRegItem         { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .batchEnrichToolbar   { background: #f1f5f9; }
.light-theme .batchCard            { background: #fff; border-color: #e2e8f0; }
.light-theme .batchCard:hover      { border-color: var(--accent, #3b82f6); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.light-theme .batchCard-header     { background: #f8fafc; }
.light-theme .batchRow             { background: #fff; border-color: #e2e8f0; }
.light-theme .batchRow:hover       { background: #f1f5f9; }
.light-theme .batchProgressBar     { background: #e5e7eb; }
.light-theme .batchSegmentedBar    { background: #e5e7eb; }
.light-theme .batchDrawer          { background: #fff; border-left-color: #e2e8f0; }
.light-theme .batchDrawer-header   { border-bottom-color: #e2e8f0; }
.light-theme .batchDrawer-footer   { border-top-color: #e2e8f0; }
.light-theme .batchDrawer-cancelBtn { border-color: #d1d5db; color: #64748b; }
.light-theme .batchDrawer-cancelBtn:hover { background: rgba(0,0,0,0.04); border-color: #94a3b8; }
.light-theme .batchDrawerLog       { background: #f8fafc; }
.light-theme .batchSummaryCard     { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .batchCompleteTable   { background: #fff; border-color: #e2e8f0; }
.light-theme .batchCompleteTable th { background: #f1f5f9; border-bottom-color: #e2e8f0; color: #64748b; }
.light-theme .batchCompleteRow     { border-bottom-color: #f1f5f9; }
.light-theme .batchCompleteRow:hover { background: #f8fafc; }
.light-theme .batchViewBtn         { color: #94a3b8; border-right-color: #e2e8f0; }
.light-theme .batchViewBtn:hover   { background: #f1f5f9; color: #334155; }
.light-theme .batchViewToggle      { border-color: #d1d5db; }
.light-theme .batchCard-stats      { border-top-color: #f1f5f9; }
.light-theme .batchCard-progress   { border-top-color: #f1f5f9; }
.light-theme .batchCard-action     { border-top-color: #f1f5f9; }
.light-theme .batchActionBtn       { background: #f8fafc; border-color: #d1d5db; color: #334155; }

/* ─────────────────────────────────────────────────────────────────
   Build Assistant — Chat + Draft Preview Split Layout
   ───────────────────────────────────────────────────────────────── */

.buildSplitLayout {
  display: flex;
  gap: 16px;
  min-height: 420px;
  max-height: calc(100vh - 280px);
}

.buildChatPanel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  background: var(--bg-secondary, #1a1a2e);
  overflow: hidden;
}

.buildChatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buildChatInput {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-tertiary, rgba(255,255,255,0.02));
}
.buildChatInput .inputThemed {
  flex: 1;
  font-size: 0.9rem;
  padding: 8px 12px;
}

/* Messages */
.buildMsg { max-width: 92%; }
.buildMsgUser {
  align-self: flex-end;
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 12px 12px 4px 12px;
  padding: 8px 12px;
  font-size: 0.9rem;
}
.buildMsgAssistant {
  align-self: flex-start;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, #333);
  border-radius: 12px 12px 12px 4px;
  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.buildMsgContent { word-break: break-word; }

/* Tool indicators */
.buildToolIndicators {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.buildToolChip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-color, #333);
  color: var(--text-secondary);
}

/* Typing dots */
.buildTypingDots { color: var(--text-secondary); animation: blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Code blocks */
.buildCodeBlock {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: pre;
  max-height: 400px;
  overflow-y: auto;
}
.buildInlineCode {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
}

/* Suggestion table */
.buildSuggestTable {
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 6px 0;
  width: 100%;
}
.buildSuggestTable td {
  padding: 4px 8px;
  border: 1px solid var(--border-color, #333);
}

/* ── Draft Preview Panel ────────────────────────────────────────── */

.buildPreviewPanel {
  width: 300px;
  min-width: 260px;
  flex-shrink: 0;
}

.draftPreview {
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  background: var(--bg-secondary, #1a1a2e);
  padding: 12px;
  position: sticky;
  top: 12px;
}

.draftPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #333);
}

.draftName {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.draftSummary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.draftSection {
  margin-bottom: 10px;
}
.draftSectionTitle {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--text-secondary);
}
.draftStat {
  font-size: 0.85rem;
  padding: 2px 0;
}

.draftError {
  font-size: 0.83rem;
  color: var(--error, #ef4444);
  padding: 2px 0;
}
.draftWarning {
  font-size: 0.83rem;
  color: #f59e0b;
  padding: 2px 0;
}

.draftBadge {
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 10px;
}
.draftValid { background: rgba(34,197,94,0.15); color: #22c55e; }
.draftInvalid { background: rgba(245,158,11,0.15); color: #f59e0b; }

.draftActions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #333);
}

.draftPreviewEmpty {
  padding: 20px 8px;
  text-align: center;
}

/* Deploy stage */
.draftCodePreview {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-secondary, #1a1a2e);
}
.draftDiagnostics {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-secondary, #1a1a2e);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .buildSplitLayout {
    flex-direction: column;
    max-height: none;
  }
  .buildPreviewPanel {
    width: 100%;
    min-width: 0;
  }
  .draftPreview {
    position: static;
  }
}

/* ── Light Theme ────────────────────────────────────────────────── */

.light-theme .buildChatPanel { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .buildChatInput { background: #fff; border-top-color: #e2e8f0; }
.light-theme .buildMsgUser { background: #2563eb; }
.light-theme .buildMsgAssistant { background: #fff; border-color: #e2e8f0; }
.light-theme .buildToolChip { background: #f1f5f9; border-color: #e2e8f0; }
.light-theme .buildCodeBlock { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.light-theme .buildInlineCode { background: #e2e8f0; }
.light-theme .buildSuggestTable td { border-color: #e2e8f0; }
.light-theme .draftPreview { background: #fff; border-color: #e2e8f0; }
.light-theme .draftPreviewHeader { border-bottom-color: #e2e8f0; }
.light-theme .draftActions { border-top-color: #e2e8f0; }
.light-theme .draftCodePreview { background: #f8fafc; border-color: #e2e8f0; }
.light-theme .draftDiagnostics { background: #f8fafc; border-color: #e2e8f0; }