*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #151920;
      --surface: #1b2029;
      --surface2: #232a35;
      --surface-sidebar: rgba(24, 29, 37, 0.94);
      --surface-sidebar-soft: rgba(29, 35, 44, 0.9);
      --surface-main-chrome: rgba(23, 28, 35, 0.84);
      --surface-toolbar: rgba(29, 34, 42, 0.8);
      --surface-card: rgba(29, 34, 43, 0.92);
      --surface-card-hover: rgba(35, 41, 51, 0.96);
      --surface-input: rgba(255, 255, 255, 0.045);
      --surface-muted: rgba(255, 255, 255, 0.038);
      --surface-muted-hover: rgba(255, 255, 255, 0.08);
      --surface-selection: rgba(78, 120, 192, 0.16);
      --surface-selection-strong: rgba(78, 120, 192, 0.22);
      --surface-log: #131821;
      --log-bg: var(--surface-log);
      --border: rgba(148, 163, 184, 0.17);
      --border-strong: rgba(148, 163, 184, 0.32);
      --text: #edf2f7;
      --text-muted: #b8c2cf;
      --text-dim: #768293;
      --green: #22c55e;
      --blue: #4f8df7;
      --amber: #eab308;
      --red: #f87171;
      --purple: #c084fc;
      --cyan: #22d3ee;
      --sidebar-hover: rgba(255, 255, 255, 0.05);
      --sidebar-selected: rgba(78, 120, 192, 0.16);
      --sidebar-running-accent: rgba(34, 197, 94, 0.72);
      --badge-bg: rgba(255, 255, 255, 0.05);
      --badge-border: rgba(148, 163, 184, 0.16);
      --btn-bg: rgba(255, 255, 255, 0.05);
      --btn-border: rgba(148, 163, 184, 0.28);
      --btn-hover-bg: rgba(255, 255, 255, 0.1);
      --btn-hover-border: rgba(148, 163, 184, 0.4);
      --btn-active-bg: rgba(79, 141, 247, 0.16);
      --btn-active-border: rgba(79, 141, 247, 0.34);
      --btn-danger-bg: rgba(248, 113, 113, 0.08);
      --btn-danger-border: rgba(248, 113, 113, 0.26);
      --progress-track-bg: rgba(255, 255, 255, 0.08);
      --progress-track-border: rgba(148, 163, 184, 0.16);
      --progress-running: #eab308;
      --progress-pending: #4f8df7;
      --progress-completed: #22c55e;
      --progress-failed: #f87171;
      --progress-fill-shadow: rgba(15, 23, 42, 0.18);
      --grid-line: rgba(255, 255, 255, 0.016);
      --grid-glow-a: rgba(34, 197, 94, 0.08);
      --grid-glow-b: rgba(79, 141, 247, 0.08);
      --overlay-bg: rgba(4, 8, 16, 0.48);
      --shadow-soft: 0 18px 40px rgba(3, 7, 18, 0.14);
      --shadow-panel: 0 24px 60px rgba(3, 7, 18, 0.22);
      --sidebar-w: 280px;
      --sidebar-c: 52px;
      --mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
      --transition: 0.2s ease;
    }

    html[data-theme="light"] {
      --bg: #ebe7de;
      --surface: #f2eee7;
      --surface2: #e7e1d6;
      --surface-sidebar: rgba(244, 241, 235, 0.96);
      --surface-sidebar-soft: rgba(236, 231, 222, 0.92);
      --surface-main-chrome: rgba(245, 242, 237, 0.84);
      --surface-toolbar: rgba(240, 235, 228, 0.84);
      --surface-card: rgba(249, 246, 240, 0.95);
      --surface-card-hover: rgba(252, 249, 243, 0.98);
      --surface-input: rgba(255, 255, 255, 0.66);
      --surface-muted: rgba(99, 110, 123, 0.07);
      --surface-muted-hover: rgba(99, 110, 123, 0.12);
      --surface-selection: rgba(78, 120, 192, 0.1);
      --surface-selection-strong: rgba(78, 120, 192, 0.16);
      --surface-log: #f5f1ea;
      --border: rgba(99, 110, 123, 0.18);
      --border-strong: rgba(99, 110, 123, 0.32);
      --text: #1f2937;
      --text-muted: #4b5563;
      --text-dim: #8a919b;
      --sidebar-hover: rgba(99, 110, 123, 0.08);
      --sidebar-selected: rgba(78, 120, 192, 0.12);
      --sidebar-running-accent: rgba(34, 197, 94, 0.62);
      --badge-bg: rgba(99, 110, 123, 0.08);
      --badge-border: rgba(99, 110, 123, 0.16);
      --btn-bg: rgba(99, 110, 123, 0.07);
      --btn-border: rgba(99, 110, 123, 0.24);
      --btn-hover-bg: rgba(99, 110, 123, 0.12);
      --btn-hover-border: rgba(99, 110, 123, 0.36);
      --btn-active-bg: rgba(79, 141, 247, 0.12);
      --btn-active-border: rgba(79, 141, 247, 0.26);
      --btn-danger-bg: rgba(248, 113, 113, 0.08);
      --btn-danger-border: rgba(248, 113, 113, 0.24);
      --progress-track-bg: rgba(99, 110, 123, 0.14);
      --progress-track-border: rgba(99, 110, 123, 0.22);
      --progress-running: #c97700;
      --progress-pending: #2563eb;
      --progress-completed: #15803d;
      --progress-failed: #dc2626;
      --progress-fill-shadow: rgba(31, 41, 55, 0.12);
      --grid-line: rgba(111, 119, 129, 0.035);
      --grid-glow-a: rgba(56, 189, 248, 0.08);
      --grid-glow-b: rgba(248, 113, 113, 0.07);
      --overlay-bg: rgba(32, 38, 48, 0.22);
      --shadow-soft: 0 16px 36px rgba(111, 119, 129, 0.1);
      --shadow-panel: 0 22px 48px rgba(111, 119, 129, 0.14);
    }

    /* Hidden scrollbars */
    * { scrollbar-width: none; }
    *::-webkit-scrollbar { display: none; }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.5;
      display: flex;
      background-image:
        radial-gradient(circle at top left, var(--grid-glow-a), transparent 30%),
        radial-gradient(circle at top right, var(--grid-glow-b), transparent 28%),
        linear-gradient(180deg, var(--bg), var(--bg));
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 22%),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(0deg, var(--grid-line) 1px, transparent 1px);
      background-size: auto, 32px 32px, 32px 32px;
      opacity: 0.18;
    }

    #mobile-overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition);
      z-index: 18;
    }

    body.mobile-sidebar-open #mobile-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    /* ================================================================
       SIDEBAR
    ================================================================ */
    #sidebar {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
      min-height: 0;
      background: linear-gradient(180deg, var(--surface-sidebar), var(--surface-sidebar-soft));
      border-right: 1px solid var(--border);
      position: relative;
      display: flex;
      flex-direction: column;
      transition: width var(--transition), min-width var(--transition);
      overflow: hidden;
      flex-shrink: 0;
      height: 100vh;
      box-shadow: var(--shadow-soft);
    }

    #sidebar.resizing {
      transition: none;
    }

    #sidebar.collapsed {
      width: var(--sidebar-c);
      min-width: var(--sidebar-c);
    }

    #sidebar-resize-handle {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 4px;
      cursor: col-resize;
      z-index: 3;
      transition: opacity var(--transition);
    }

    #sidebar-resize-handle::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--surface-muted-hover);
      opacity: 0;
      transition: opacity var(--transition), background-color var(--transition), box-shadow var(--transition);
    }

    #sidebar-resize-handle:hover::before,
    #sidebar.resizing #sidebar-resize-handle::before {
      opacity: 1;
      background: rgba(79, 141, 247, 0.34);
      box-shadow: 0 0 10px rgba(79, 141, 247, 0.24);
    }

    #sidebar.collapsed #sidebar-resize-handle,
    #sidebar-resize-handle.disabled {
      opacity: 0;
      pointer-events: none;
    }

    body.sidebar-resizing,
    body.sidebar-resizing * {
      cursor: col-resize !important;
      user-select: none;
    }

    #sidebar.collapsed .sidebar-text,
    #sidebar.collapsed .queue-bar-wrap,
    #sidebar.collapsed .task-item-text,
    #sidebar.collapsed .sidebar-footer-text,
    #sidebar.collapsed .sidebar-links,
    #sidebar.collapsed .section-header-text,
    #sidebar.collapsed .task-item-elapsed {
      display: none;
    }

    #sidebar.collapsed .sidebar-topbar {
      justify-content: center;
      padding: 14px 0;
    }

    #sidebar.collapsed .sidebar-logo {
      justify-content: center;
      padding: 0;
    }

    #sidebar.collapsed .task-item {
      justify-content: center;
      padding: 10px 0;
    }

    /* Logo */
    .sidebar-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      min-width: 0;
      flex: 1;
    }

    .sidebar-logo:hover { background: rgba(255,255,255,0.02); }

    .sidebar-logo img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .sidebar-logo-text {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
    }

    /* Queue stats bar */
    .queue-bar-wrap {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .sidebar-scroll-area {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) transparent;
    }

    .sidebar-scroll-area::-webkit-scrollbar {
      display: block;
      width: 8px;
    }

    .sidebar-scroll-area::-webkit-scrollbar-track {
      background: transparent;
    }

    .sidebar-scroll-area::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: var(--border);
    }

    .sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
      background: var(--border-strong);
    }

    .queue-bar-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      margin-bottom: 6px;
    }

    .queue-bar {
      display: flex;
      height: 6px;
      border-radius: 3px;
      overflow: visible;
      background: var(--progress-track-bg);
      box-shadow: inset 0 0 0 1px var(--progress-track-border);
      position: relative;
    }

    .queue-bar .seg {
      height: 100%;
      transition: width 0.4s ease;
      position: relative;
      cursor: pointer;
    }

    .queue-bar .seg-running,
    .queue-bar .seg-pending,
    .queue-bar .seg-completed,
    .queue-bar .seg-failed {
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 1px 2px var(--progress-fill-shadow);
    }

    .queue-bar .seg-running   { background: var(--progress-running); }
    .queue-bar .seg-pending   { background: var(--progress-pending); }
    .queue-bar .seg-completed { background: var(--progress-completed); }
    .queue-bar .seg-failed    { background: var(--progress-failed); }

    /* Tooltip for queue bar segments — use fixed positioning to escape overflow clipping */
    .seg-tooltip {
      position: fixed;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: 200;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      display: none;
    }

    .queue-bar-counts {
      display: flex;
      gap: 12px;
      margin-top: 6px;
      font-size: 10px;
      font-family: var(--mono);
    }

    .queue-bar-counts span { display: flex; align-items: center; gap: 4px; }

    .qb-dot {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .sidebar-toolbar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 14px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .sidebar-search-wrap {
      position: relative;
    }

    .sidebar-search {
      width: 100%;
      background: var(--surface-input);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 14px 10px 36px;
      color: var(--text);
      font-size: 12px;
      outline: none;
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }

    .sidebar-search:focus,
    .sidebar-select:focus {
      border-color: var(--btn-active-border);
      box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.12);
    }

    .sidebar-search::placeholder {
      color: var(--text-dim);
    }

    .tabler-icon {
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      flex-shrink: 0;
    }

    .tabler-icon-link {
      width: 20px;
      height: 20px;
    }

    .tabler-icon-button {
      width: 18px;
      height: 18px;
    }

    .sidebar-search-icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-dim);
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .sidebar-filter-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sidebar-filter-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .sidebar-select {
      appearance: none;
      width: 100%;
      border: 1px solid var(--btn-border);
      background-color: var(--btn-bg);
      color: var(--text);
      border-radius: 12px;
      padding: 9px 14px;
      padding-right: 34px;
      font-size: 12px;
      font-family: var(--sans);
      outline: none;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
      background-image:
        linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
        linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
      background-position:
        calc(100% - 16px) calc(50% - 2px),
        calc(100% - 11px) calc(50% - 2px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    .sidebar-select:hover {
      background-color: var(--btn-hover-bg);
      border-color: var(--btn-hover-border);
    }

    .sidebar-toolbar-summary {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      line-height: 1.5;
      white-space: normal;
    }

    /* Task list sections */
    .task-sections {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 6px 10px 14px;
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px 6px;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }

    .section-header:hover { background: rgba(255,255,255,0.02); }

    .section-header.no-collapse { cursor: default; }
    .section-header.no-collapse:hover { background: transparent; }

    .section-toggle {
      font-size: 9px;
      color: var(--text-dim);
      width: 12px;
      text-align: center;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .section-header-text {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      flex: 1;
    }

    .section-header-text .section-count {
      color: var(--text-muted);
      font-weight: 700;
    }

    .section-header .pulsing-indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amber);
      animation: pulse 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }

    .section-body {
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .section-body.collapsed {
      max-height: 0 !important;
    }

    .project-group-label {
      padding: 6px 16px 2px 28px;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
      opacity: 0.7;
    }

    .task-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background var(--transition);
      overflow: hidden;
      user-select: none;
    }

    .task-item:hover { background: rgba(255,255,255,0.04); }
    .task-item.selected { background: rgba(255,255,255,0.08); }

    /* Running tasks stand out with left green border */
    .task-item.task-running {
      border-left: 2px solid var(--green);
      padding-left: 14px;
    }

    .task-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dot-running   { background: #22c55e; animation: pulse 1.4s ease-in-out infinite; }
    .dot-pending   { background: #3b82f6; }
    .dot-drafting  { background: #a78bfa; }
    .dot-active    { background: #eab308; }
    .dot-paused    { background: #71717a; }
    .dot-cancelled { background: #71717a; opacity: 0.5; }
    .dot-completed { background: #22d3ee; }
    .dot-failed    { background: #f87171; }
    .dot-cancelled { background: var(--text-dim); }

    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

    .task-item-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .task-item-project {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-item-desc {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-item-meta {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 1px;
    }

    .task-item-elapsed {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      flex-shrink: 0;
    }

    .priority-badge {
      display: inline-block;
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 1px 4px;
      border-radius: 4px;
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
      margin-left: 4px;
      vertical-align: middle;
    }

    .priority-badge.p-high { color: var(--amber); background: rgba(234,179,8,0.1); }
    .priority-badge.p-urgent { color: var(--red); background: rgba(248,113,113,0.1); }

    .cost-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 600;
      font-family: var(--mono);
      padding: 1px 5px;
      border-radius: 4px;
      background: rgba(34,197,94,0.1);
      color: var(--green);
      vertical-align: middle;
    }

    /* Sidebar footer */
    .sidebar-footer {
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
    }

    .sidebar-links {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .sidebar-link {
      width: 34px;
      height: 34px;
      color: var(--text-dim);
      text-decoration: none;
      transition: color var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
    }

    .sidebar-link:hover {
      color: var(--text);
      background: var(--sidebar-hover);
      border-color: var(--border);
    }

    .sidebar-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sidebar-footer-text {
      padding: 10px 16px;
      font-size: 10px;
      color: var(--text-dim);
      font-family: var(--mono);
      display: flex;
      gap: 10px;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      cursor: pointer;
      color: var(--text-dim);
      font-size: 14px;
      flex-shrink: 0;
      transition: color var(--transition), background var(--transition);
      user-select: none;
    }

    .sidebar-toggle-icon {
      width: 16px;
      height: 16px;
    }

    .sidebar-toggle:hover { color: var(--text-muted); background: rgba(255,255,255,0.04); }

    /* ================================================================
       MAIN AREA
    ================================================================ */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    #main-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 24px 14px;
      border-bottom: 1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
        rgba(10,10,10,0.82);
      backdrop-filter: blur(12px);
      flex-shrink: 0;
    }

    .main-header-title-group {
      min-width: 0;
      flex: 1;
    }

    .main-header-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 4px;
    }

    .main-header-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.01em;
    }

    .main-header-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .header-btn {
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.2);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .header-btn:hover {
      background: rgba(255,255,255,0.15);
      color: var(--text);
      border-color: rgba(255,255,255,0.28);
    }

    .header-btn.hidden {
      display: none;
    }

    .sidebar-open-btn {
      display: none;
      min-width: 38px;
      padding: 0;
      width: 38px;
      height: 38px;
      font-size: 15px;
      align-items: center;
      justify-content: center;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      border: none;
      background: rgba(255,255,255,0.055);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
      font-family: var(--mono);
      white-space: nowrap;
    }

    .status-pill::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text-dim);
      opacity: 0.9;
    }

    .status-pill.ok::before { background: var(--green); }
    .status-pill.warn::before { background: var(--amber); }
    .status-pill.error::before { background: var(--red); }
    .status-pill.info::before { background: var(--blue); }

    #status-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 24px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      font-size: 12px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    #status-banner.visible {
      display: flex;
    }

    #status-banner[data-tone="error"] {
      background: rgba(248,113,113,0.08);
      color: #fecaca;
      border-bottom-color: rgba(248,113,113,0.2);
    }

    #status-banner[data-tone="warn"] {
      background: rgba(234,179,8,0.08);
      color: #fde68a;
      border-bottom-color: rgba(234,179,8,0.18);
    }

    #status-banner[data-tone="success"] {
      background: rgba(34,197,94,0.08);
      color: #bbf7d0;
      border-bottom-color: rgba(34,197,94,0.18);
    }

    /* -- Overview (no task selected) -- */
    #overview {
      flex: 1;
      overflow-y: auto;
      padding: 32px;
      display: none;
    }

    #overview.visible { display: block; animation: view-fade-in 0.2s ease; }

    /* Command Center */
    .overview-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      margin-bottom: 14px;
    }

    .live-jobs-section {
      margin-bottom: 32px;
    }

    .operations-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 32px;
    }

    .ops-card {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 16px;
      min-height: 120px;
      background:
        linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
        rgba(17,17,17,0.9);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ops-card[data-tone="warn"] {
      border-color: rgba(234,179,8,0.18);
      box-shadow: inset 0 0 0 1px rgba(234,179,8,0.08);
    }

    .ops-card[data-tone="danger"] {
      border-color: rgba(248,113,113,0.22);
      box-shadow: inset 0 0 0 1px rgba(248,113,113,0.08);
    }

    .ops-card-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .ops-card-value {
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
      font-family: var(--mono);
      color: var(--text);
    }

    .ops-card-value.green { color: var(--green); }
    .ops-card-value.amber { color: var(--amber); }
    .ops-card-value.blue { color: var(--blue); }
    .ops-card-value.red { color: var(--red); }

    .ops-card-meta {
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.55;
      margin-top: auto;
    }

    .live-jobs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }

    .live-job-card {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        rgba(17,17,17,0.9);
      padding: 16px;
      min-height: 164px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .live-job-card.attention {
      border-color: rgba(234,179,8,0.18);
      box-shadow: inset 0 0 0 1px rgba(234,179,8,0.08);
    }

    .live-job-card::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, var(--amber), rgba(234,179,8,0.2));
    }

    .live-job-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .live-job-project {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text);
    }

    .live-job-runtime {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--amber);
      white-space: nowrap;
    }

    .live-job-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .live-job-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .live-job-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.045);
      border: none;
      color: var(--text-dim);
      font-size: 10px;
      font-family: var(--mono);
    }

    .live-job-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
      flex-wrap: wrap;
    }

    .live-job-note {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--amber);
    }

    .live-job-btn {
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.09);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .live-job-btn:hover {
      background: rgba(255,255,255,0.15);
      color: var(--text);
      border-color: rgba(255,255,255,0.28);
    }

    .live-job-btn.danger {
      color: var(--red);
      border-color: rgba(248,113,113,0.22);
    }

    .live-job-btn.danger:hover {
      background: rgba(248,113,113,0.1);
    }

    .live-jobs-empty {
      border: 1px dashed rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 22px 18px;
      color: var(--text-dim);
      font-size: 12px;
      background: rgba(255,255,255,0.015);
    }

    .project-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 32px;
    }

    .project-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 18px;
      min-width: 220px;
      flex: 1;
      max-width: 360px;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition), transform var(--transition);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008)),
        rgba(17,17,17,0.92);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .project-card:hover {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.12);
      transform: translateY(-1px);
    }

    .project-card.active-filter {
      border-color: rgba(59,130,246,0.25);
      background:
        linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.01)),
        rgba(17,17,17,0.92);
      box-shadow: inset 0 0 0 1px rgba(59,130,246,0.08);
    }

    .project-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .project-card-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .project-card-sub {
      color: var(--text-dim);
      font-size: 11px;
      line-height: 1.5;
      margin-top: 6px;
    }

    .project-card-pill {
      border: none;
      border-radius: 4px;
      padding: 5px 9px;
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      white-space: nowrap;
      background: rgba(255,255,255,0.045);
    }

    .project-card-name .pulsing-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 1.4s ease-in-out infinite;
    }

    .project-card-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .project-card-stat {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-family: var(--mono);
    }

    .project-card-stat .stat-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .project-card-stat .stat-val {
      font-weight: 700;
      color: var(--text);
    }

    .project-card-stat .stat-label {
      color: var(--text-dim);
      font-size: 10px;
    }

    .project-card-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    .project-card-btn {
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.09);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 11px;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .project-card-btn:hover {
      background: rgba(255,255,255,0.15);
      color: var(--text);
      border-color: rgba(255,255,255,0.28);
    }

    .project-card-btn.primary {
      background: rgba(59,130,246,0.18);
      border-color: rgba(59,130,246,0.3);
      color: #bfdbfe;
    }

    .project-card-btn.warn {
      color: var(--red);
      border-color: rgba(248,113,113,0.22);
    }

    .project-card-btn.warn:hover {
      background: rgba(248,113,113,0.1);
    }

    /* Stats section */
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 32px;
    }

    .stat-card {
      background: var(--surface);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stat-card-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
    }

    .stat-card-value {
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      font-family: var(--mono);
      color: var(--text);
    }

    .stat-card-value.green  { color: var(--green); }
    .stat-card-value.amber  { color: var(--amber); }
    .stat-card-value.blue   { color: var(--blue); }
    .stat-card-value.red    { color: var(--red); }

    /* Cost breakdown */
    .cost-by-project {
      margin-top: 12px;
      margin-bottom: 16px;
    }

    .cost-project-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      font-family: var(--mono);
    }

    .cost-project-table th {
      text-align: left;
      padding: 6px 10px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
    }

    .cost-project-table td {
      padding: 5px 10px;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
    }

    .cost-project-table tr:hover td {
      background: rgba(255,255,255,0.02);
    }

    .cost-project-name {
      color: var(--text) !important;
      font-weight: 600;
    }

    .cost-subscription-note {
      font-size: 12px;
      color: var(--text-dim);
      padding: 8px 12px;
      margin-bottom: 24px;
      border-radius: 6px;
      background: rgba(34,197,94,0.06);
      border: 1px solid rgba(34,197,94,0.15);
    }

    .cost-subscription-note strong {
      color: var(--green);
    }

    .sub-note-icon {
      margin-right: 4px;
    }

    /* Activity feed */
    /* -- Batches Section -- */
    .batches-section { margin-bottom: 32px; }

    .batch-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 10px;
      background: var(--surface2);
      cursor: pointer;
      transition: border-color var(--transition);
    }
    .batch-card:hover { border-color: rgba(255,255,255,0.15); }

    .batch-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .batch-card-id {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--purple);
      font-weight: 600;
    }
    .batch-card-counts {
      font-size: 11px;
      color: var(--text-muted);
    }
    .batch-progress-bar {
      height: 6px;
      border-radius: 3px;
      background: var(--progress-track-bg);
      box-shadow: inset 0 0 0 1px var(--progress-track-border);
      overflow: hidden;
      display: flex;
    }
    .batch-progress-ok {
      background: var(--progress-completed);
      height: 100%;
      transition: width 0.3s ease;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 1px 2px var(--progress-fill-shadow);
    }
    .batch-progress-fail {
      background: var(--progress-failed);
      height: 100%;
      transition: width 0.3s ease;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 1px 2px var(--progress-fill-shadow);
    }
    .batch-progress-running {
      background: var(--progress-running);
      height: 100%;
      transition: width 0.3s ease;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 1px 2px var(--progress-fill-shadow);
    }
    .batch-tasks-detail {
      display: none;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .batch-card.expanded .batch-tasks-detail { display: block; }
    .batch-task-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      font-size: 12px;
      color: var(--text-muted);
    }
    .batch-task-row .status-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .activity-section {
      margin-top: 8px;
      margin-bottom: 32px;
    }

    .activity-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      cursor: pointer;
      transition: background var(--transition);
    }

    .activity-item:hover { background: rgba(255,255,255,0.02); }
    .activity-item:last-child { border-bottom: none; }

    .activity-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .activity-project-tag {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255,255,255,0.045);
      color: var(--text-dim);
      flex-shrink: 0;
      font-family: var(--mono);
    }

    .activity-text {
      flex: 1;
      color: var(--text-muted);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .activity-text strong { color: var(--text); font-weight: 500; }

    .activity-time {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      flex-shrink: 0;
    }

    .no-activity {
      color: var(--text-dim);
      font-size: 12px;
      padding: 24px 0;
    }

    /* -- Scheduled section -- */
    .scheduled-section {
      margin-top: 8px;
      margin-bottom: 24px;
    }

    .scheduled-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      cursor: pointer;
      transition: background var(--transition);
    }

    .scheduled-item:hover { background: rgba(255,255,255,0.02); }
    .scheduled-item:last-child { border-bottom: none; }

    .scheduled-icon {
      font-size: 13px;
      flex-shrink: 0;
      width: 18px;
      text-align: center;
    }

    .scheduled-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .scheduled-title {
      flex: 1;
      color: var(--text-muted);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .scheduled-sched {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255,255,255,0.045);
      flex-shrink: 0;
    }

    .scheduled-next {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      flex-shrink: 0;
      min-width: 60px;
      text-align: right;
    }

    /* -- Task detail view -- */
    #detail {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    #detail.visible { display: flex; animation: view-fade-in 0.2s ease; }

    @keyframes view-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Top bar */
    .detail-topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .detail-back {
      font-size: 16px;
      cursor: pointer;
      color: var(--text-dim);
      transition: color var(--transition);
      user-select: none;
      flex-shrink: 0;
    }

    .detail-back:hover { color: var(--text); }

    .detail-id {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-muted);
    }

    .detail-project {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .detail-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--mono);
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.045);
    }

    .detail-badge::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .detail-badge-running   { color: var(--amber); }
    .detail-badge-running::before   { background: var(--amber); animation: pulse 1.4s ease-in-out infinite; }
    .detail-badge-pending   { color: var(--blue); }
    .detail-badge-pending::before   { background: var(--blue); }
    .detail-badge-drafting  { color: var(--blue); }
    .detail-badge-drafting::before  { background: var(--blue); opacity: 0.6; }
    .detail-badge-active    { color: var(--blue); }
    .detail-badge-active::before    { background: var(--blue); opacity: 0.7; }
    .detail-badge-completed { color: var(--green); }
    .detail-badge-completed::before { background: var(--green); }
    .detail-badge-failed    { color: var(--red); }
    .detail-badge-failed::before    { background: var(--red); }
    .detail-badge-cancelled { color: var(--text-muted); }
    .detail-badge-cancelled::before { background: var(--text-dim); }

    .detail-elapsed {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-dim);
    }

    .detail-spacer { flex: 1; }

    .detail-btn {
      font-size: 11px;
      font-family: var(--sans);
      padding: 4px 12px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      color: var(--text);
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .detail-btn:hover { background: rgba(255,255,255,0.15); color: var(--text); border-color: rgba(255,255,255,0.28); }
    .detail-btn.danger { border-color: rgba(248,113,113,0.3); color: var(--red); }
    .detail-btn.danger:hover { background: rgba(248,113,113,0.1); }

    /* Live Activity Panel */
    #live-activity-panel {
      display: none;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(234,179,8,0.04), transparent);
      flex-shrink: 0;
      overflow: hidden;
    }

    #live-activity-panel.visible { display: block; }

    .live-activity-inner {
      padding: 14px 24px;
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .la-section {
      min-width: 0;
    }

    .la-section-title {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
      margin-bottom: 6px;
    }

    .la-current-action {
      font-size: 12px;
      font-family: var(--mono);
      color: var(--amber);
      line-height: 1.5;
      max-width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .la-files-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      max-height: 48px;
      overflow: hidden;
    }

    .la-file-chip {
      font-size: 10px;
      font-family: var(--mono);
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255,255,255,0.045);
      border: none;
      color: var(--text-dim);
      white-space: nowrap;
    }

    .la-tool-bars {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 160px;
    }

    .la-tool-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-family: var(--mono);
    }

    .la-tool-name {
      width: 60px;
      color: var(--text-muted);
      text-align: right;
      flex-shrink: 0;
    }

    .la-tool-bar {
      height: 8px;
      border-radius: 2px;
      background: var(--progress-pending);
      transition: width 0.3s ease;
      min-width: 2px;
      box-shadow: 0 1px 2px var(--progress-fill-shadow), inset 0 -1px 0 rgba(255,255,255,0.14);
    }

    .la-tool-count {
      color: var(--text-dim);
      width: 24px;
      flex-shrink: 0;
    }

    /* Tabs */
    .detail-tabs {
      display: flex;
      gap: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .detail-tab {
      font-size: 12px;
      color: var(--text-dim);
      padding: 8px 20px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      user-select: none;
      transition: color var(--transition), border-color var(--transition);
    }

    .detail-tab:hover { color: var(--text-muted); }

    .detail-tab.active {
      color: var(--text);
      border-bottom-color: var(--text);
    }

    /* Tab panels */
    .tab-panel {
      flex: 1;
      display: none;
      overflow: hidden;
    }

    .tab-panel.active {
      display: flex;
      flex-direction: column;
    }

    /* ================================================================
       LOG VIEWER (Dozzle style)
    ================================================================ */
    .log-toolbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 6px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .log-search {
      flex: 1;
      max-width: 320px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 4px 10px;
      font-size: 12px;
      font-family: var(--mono);
      color: var(--text);
      outline: none;
      transition: border-color var(--transition);
    }

    .log-search::placeholder { color: var(--text-dim); }
    .log-search:focus { border-color: rgba(255,255,255,0.2); }

    .log-match-count {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
    }

    .log-viewer {
      flex: 1;
      background: var(--log-bg);
      overflow-y: auto;
      position: relative;
      font-family: var(--mono);
      font-size: 12px;
      line-height: 1.6;
    }

    .log-line {
      display: flex;
      align-items: flex-start;
      padding: 0 16px;
      min-height: 20px;
    }

    .log-line:nth-child(odd) { background: rgba(255,255,255,0.015); }

    .log-line.match { background: rgba(234,179,8,0.08); }

    .log-line-num {
      color: var(--text-dim);
      user-select: none;
      text-align: right;
      min-width: 44px;
      padding-right: 16px;
      padding-top: 4px;
      flex-shrink: 0;
      font-size: 11px;
    }

    .log-line-text {
      color: var(--text);
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
      min-width: 0;
      padding: 4px 0;
    }

    .log-content {
      min-width: 0;
      position: relative;
    }

    .log-rich-block {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .log-rich-line {
      min-width: 0;
    }

    .log-content.collapsed {
      overflow: hidden;
      max-height: 3.8em;
    }

    .log-content.is-json.collapsed {
      max-height: 8.2em;
    }

    .log-content.collapsed::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.8em;
      background: linear-gradient(180deg, rgba(13,13,13,0), var(--log-bg));
      pointer-events: none;
    }

    .log-plain {
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--text);
    }

    .log-json {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: var(--mono);
      color: var(--text);
      line-height: 1.55;
    }

    .log-expand-btn {
      align-self: flex-start;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.09);
      color: var(--text);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 10px;
      font-family: var(--sans);
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .log-expand-btn:hover {
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.28);
      color: var(--text);
    }

    .ansi-bold { font-weight: 700; }
    .ansi-fg-30, .ansi-fg-90 { color: #9ca3af; }
    .ansi-fg-31, .ansi-fg-91 { color: var(--red); }
    .ansi-fg-32, .ansi-fg-92 { color: var(--green); }
    .ansi-fg-33, .ansi-fg-93 { color: var(--amber); }
    .ansi-fg-34, .ansi-fg-94 { color: #60a5fa; }
    .ansi-fg-35, .ansi-fg-95 { color: var(--purple); }
    .ansi-fg-36, .ansi-fg-96 { color: var(--cyan); }
    .ansi-fg-37, .ansi-fg-97 { color: #e5e7eb; }

    .json-key { color: #93c5fd; }
    .json-string { color: #86efac; }
    .json-number { color: #fca5a5; }
    .json-boolean { color: #c4b5fd; }
    .json-null { color: #fcd34d; }

    .log-empty {
      padding: 32px;
      color: var(--text-dim);
      text-align: center;
      font-size: 12px;
    }

    /* Scroll to bottom button */
    .scroll-bottom-btn {
      position: absolute;
      bottom: 16px;
      right: 24px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 11px;
      font-family: var(--sans);
      color: var(--text);
      cursor: pointer;
      display: none;
      z-index: 5;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .scroll-bottom-btn:hover { background: rgba(255,255,255,0.16); color: var(--text); border-color: rgba(255,255,255,0.28); }
    .scroll-bottom-btn.visible { display: block; }

    #log-sentinel { height: 1px; }

    /* ================================================================
       LOG VIEW TOGGLE
    ================================================================ */
    .log-view-toggle {
      display: flex;
      gap: 4px;
      padding: 3px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 999px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .log-view-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid transparent;
      color: var(--text-muted);
      border-radius: 999px;
      font-size: 11px;
      font-family: var(--sans);
      padding: 4px 12px;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .log-view-btn:hover {
      color: var(--text);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.24);
    }

    .log-view-btn.active {
      color: var(--text);
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.26);
    }

    /* ================================================================
       STRUCTURED LOG EVENTS
    ================================================================ */
    .log-event {
      display: flex;
      align-items: flex-start;
      padding: 8px 16px;
      gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      transition: background var(--transition);
    }

    .log-event:hover {
      background: rgba(255,255,255,0.02);
    }

    .log-event.ev-match {
      background: rgba(234,179,8,0.08);
    }

    /* Event icons */
    .ev-icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--mono);
      margin-top: 1px;
    }

    .ev-icon-message {
      color: #60a5fa;
      background: rgba(96,165,250,0.12);
    }

    .ev-icon-thinking {
      color: var(--purple);
      background: rgba(192,132,252,0.12);
    }

    .ev-icon-command {
      color: var(--green);
      background: rgba(34,197,94,0.12);
    }

    .ev-icon-error {
      color: var(--red);
      background: rgba(248,113,113,0.15);
    }

    .ev-icon-info {
      color: var(--text-muted);
      background: rgba(255,255,255,0.06);
    }

    .ev-icon-system {
      color: var(--text-dim);
      background: rgba(255,255,255,0.04);
    }

    .ev-icon-result {
      color: var(--green);
      background: rgba(34,197,94,0.12);
    }

    /* Event body */
    .ev-body {
      flex: 1;
      min-width: 0;
    }

    .ev-content {
      font-size: 12px;
      line-height: 1.6;
      color: var(--text);
      word-break: break-word;
    }

    .ev-rich-content {
      min-width: 0;
    }

    .ev-rich-content .log-plain,
    .ev-rich-content .log-json {
      font-size: inherit;
      line-height: inherit;
      color: inherit;
    }

    .ev-rich-content .log-expand-btn {
      margin-top: 2px;
    }

    /* Message events */
    .log-event-message .ev-content {
      background: rgba(96,165,250,0.06);
      border-left: 2px solid rgba(96,165,250,0.3);
      padding: 6px 12px;
      border-radius: 0 6px 6px 0;
    }

    /* Thinking events */
    .log-event-thinking {
      opacity: 0.7;
    }

    .ev-thinking-text {
      color: var(--text-muted);
      font-style: italic;
      font-size: 11px;
    }

    /* Command events */
    .ev-header {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px 0;
      user-select: none;
    }

    .ev-header.ev-no-toggle {
      cursor: default;
    }

    .ev-title {
      font-size: 12px;
      color: var(--text);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ev-cmd-text {
      font-family: var(--mono);
      color: var(--green);
    }

    .ev-preview {
      font-size: 11px;
      color: var(--text-dim);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ev-chevron {
      color: var(--text-dim);
      font-size: 10px;
      flex-shrink: 0;
      width: 12px;
      text-align: center;
      transition: color var(--transition);
    }

    .ev-header:hover .ev-chevron {
      color: var(--text-muted);
    }

    .ev-badge {
      font-size: 9px;
      font-family: var(--mono);
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 3px;
      flex-shrink: 0;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .ev-badge-ok {
      color: var(--green);
      background: rgba(34,197,94,0.12);
    }

    .ev-badge-err {
      color: var(--red);
      background: rgba(248,113,113,0.12);
    }

    .ev-badge-running {
      color: var(--amber);
      background: rgba(234,179,8,0.12);
    }

    .ev-collapsible {
      padding-top: 6px;
    }

    .ev-output {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.5;
      color: var(--text-muted);
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 4px;
      padding: 8px 12px;
      max-height: 300px;
      overflow-y: auto;
      word-break: break-word;
    }

    .ev-output .log-rich-block {
      gap: 8px;
    }

    .ev-output .log-plain,
    .ev-output .log-json {
      font-size: 11px;
      line-height: 1.5;
      color: inherit;
    }

    .ev-output .log-content.collapsed::after {
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.78));
    }

    /* Error events */
    .log-event-error .ev-content {
      color: var(--red);
      background: rgba(248,113,113,0.08);
      border-left: 2px solid rgba(248,113,113,0.4);
      padding: 6px 12px;
      border-radius: 0 4px 4px 0;
    }

    /* Info events */
    .log-event-info .ev-content {
      font-size: 11px;
      color: var(--text-muted);
      font-family: var(--mono);
    }

    /* System events */
    .log-event-system .ev-content {
      font-size: 11px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Result events */
    .log-event-result .ev-content {
      background: rgba(34,197,94,0.06);
      border-left: 2px solid rgba(34,197,94,0.3);
      padding: 6px 12px;
      border-radius: 0 6px 6px 0;
      font-family: var(--mono);
      font-size: 11px;
    }

    /* ================================================================
       DETAILS TAB
    ================================================================ */
    .details-panel {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    .details-section {
      margin-bottom: 24px;
    }

    .details-section-title {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
      margin-bottom: 10px;
    }

    .kv-grid {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 4px 16px;
      font-size: 12px;
    }

    .kv-key {
      color: var(--text-dim);
      font-size: 11px;
    }

    .kv-val {
      color: var(--text-muted);
      font-family: var(--mono);
      font-size: 11px;
      word-break: break-all;
    }

    .artifact-block {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 10px 12px;
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-muted);
      white-space: pre-wrap;
      word-break: break-all;
      max-height: 200px;
      overflow-y: auto;
      margin-top: 6px;
    }

    /* ================================================================
       TIMELINE TAB
    ================================================================ */
    .timeline-panel {
      flex: 1;
      overflow-y: auto;
      padding: 24px 32px;
    }

    .timeline {
      position: relative;
      padding-left: 24px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 5px;
      top: 4px;
      bottom: 4px;
      width: 1px;
      background: var(--border);
    }

    .timeline-point {
      position: relative;
      padding: 0 0 24px 20px;
    }

    .timeline-point:last-child { padding-bottom: 0; }

    .timeline-dot {
      position: absolute;
      left: -20px;
      top: 3px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid var(--surface);
    }

    .timeline-dot.green  { background: var(--green); }
    .timeline-dot.amber  { background: var(--amber); }
    .timeline-dot.blue   { background: var(--blue); }
    .timeline-dot.red    { background: var(--red); }
    .timeline-dot.dim    { background: var(--text-dim); }
    .timeline-dot.purple { background: #a78bfa; }
    .timeline-dot.cyan   { background: #22d3ee; }
    .timeline-dot.small  { width: 8px; height: 8px; left: -18px; top: 5px; }

    .timeline-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }

    .timeline-label.event-label {
      font-weight: 500;
      font-size: 11px;
      color: var(--text-muted);
    }

    .timeline-time {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-muted);
      margin-top: 2px;
    }

    .timeline-duration {
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
      margin-top: 2px;
    }

    /* ================================================================
       PROJECT-FIRST REFRESH
    ================================================================ */
    .sidebar-topbar {
      padding: 16px 16px 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    }

    .sidebar-logo {
      gap: 12px;
      padding: 0;
    }

    .sidebar-logo:hover {
      background: var(--sidebar-hover);
    }

    .sidebar-logo img {
      width: 40px;
      height: 40px;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
    }

    .sidebar-logo-text {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .queue-bar-wrap {
      margin: 10px 14px 8px;
      padding: 13px 14px 12px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface-muted);
    }

    .queue-bar-label {
      margin-bottom: 8px;
      color: var(--text-dim);
    }

    .queue-bar {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--badge-bg);
    }

    .queue-bar-counts {
      margin-top: 8px;
      color: var(--text-muted);
    }

    .queue-bar-counts span {
      color: var(--text-muted);
    }

    .task-sections {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 6px 10px 14px;
    }

    .task-list-empty {
      padding: 18px 14px;
      color: var(--text-dim);
      font-size: 12px;
      text-align: center;
    }

    .project-cluster {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface-muted);
      overflow: hidden;
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }

    .project-cluster.expanded {
      background: var(--surface-muted-hover);
    }

    .project-cluster.has-selection {
      border-color: var(--btn-active-border);
      box-shadow: inset 0 0 0 1px rgba(79, 141, 247, 0.12);
    }

    .project-cluster-header {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      color: inherit;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      cursor: pointer;
      text-align: left;
      transition: background var(--transition);
    }

    .project-cluster-header:hover {
      background: var(--sidebar-hover);
    }

    .project-cluster-leading,
    .project-cluster-trailing {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .project-cluster-leading {
      flex: 1;
    }

    .project-cluster-copy {
      min-width: 0;
    }

    .project-cluster-title-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .project-cluster-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .project-git-link {
      flex-shrink: 0;
      color: var(--text-dim);
      text-decoration: none;
      opacity: 0.4;
      transition: opacity 0.15s, color 0.15s;
      display: flex;
      align-items: center;
    }
    .project-git-link:hover { opacity: 1; color: var(--text); }

    .project-cluster-last {
      margin-top: 2px;
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-dim);
    }

    .project-cluster-icon {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      color: var(--text-dim);
      flex-shrink: 0;
      transition: border-color var(--transition), background var(--transition), transform var(--transition);
    }

    .project-cluster-icon .tabler-icon {
      width: 15px;
      height: 15px;
    }

    .project-cluster-icon.project-icon-generic {
      border-radius: 8px;
    }

    .project-cluster-icon.project-icon-spare {
      border-radius: 999px;
      background:
        radial-gradient(circle at center, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 24%, transparent 24%, transparent 60%),
        var(--badge-bg);
    }

    .project-cluster-icon.project-icon-spare .tabler-icon {
      width: 16px;
      height: 16px;
    }

    .project-cluster-icon.project-icon-egao {
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
        var(--badge-bg);
    }

    .project-cluster-icon.project-icon-vibelens {
      border-radius: 999px;
      background:
        radial-gradient(circle at center, transparent 0, transparent 32%, rgba(255,255,255,0.08) 32%, rgba(255,255,255,0.08) 38%, transparent 38%),
        var(--badge-bg);
    }

    .project-cluster-icon.project-icon-vibelens .tabler-icon {
      width: 16px;
      height: 16px;
    }

    .project-cluster-icon.project-icon-verbalized-sampling {
      border-radius: 7px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--badge-bg);
    }

    .project-cluster-icon.project-icon-verbalized-sampling .tabler-icon {
      width: 14px;
      height: 14px;
    }

    .project-cluster-icon.project-icon-dobby {
      border-radius: 10px;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)),
        var(--badge-bg);
    }

    .project-cluster-icon.project-icon-dobby .tabler-icon {
      width: 16px;
      height: 16px;
    }

    .project-cluster.expanded .project-cluster-icon,
    .project-cluster.has-selection .project-cluster-icon {
      border-color: var(--btn-active-border);
      box-shadow: inset 0 0 0 1px rgba(79, 141, 247, 0.12);
      color: var(--text);
      transform: translateY(-1px);
    }

    .project-cluster-pills {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .project-cluster-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      color: var(--text-muted);
      font-size: 9px;
      font-family: var(--mono);
      white-space: nowrap;
    }

    .project-cluster-pill strong {
      color: var(--text);
      font-weight: 700;
    }

    .project-cluster-pill.running strong { color: var(--amber); }
    .project-cluster-pill.done strong { color: var(--green); }
    .project-cluster-pill.issues strong { color: var(--red); }

    .project-cluster-chevron {
      width: 14px;
      color: var(--text-dim);
      text-align: center;
      font-size: 11px;
      flex-shrink: 0;
    }

    .project-cluster-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 0 8px 8px;
    }

    .project-cluster-body.collapsed {
      display: none;
    }

    .project-cluster-empty {
      padding: 10px 8px 8px 28px;
      color: var(--text-dim);
      font-size: 11px;
    }

    .task-item {
      appearance: none;
      position: relative;
      width: 100%;
      border: 1px solid transparent;
      border-radius: 12px;
      background: transparent;
      padding: 9px 10px;
      align-items: flex-start;
      text-align: left;
      gap: 10px;
    }

    .task-item:hover {
      background: var(--sidebar-hover);
    }

    .task-item.selected {
      background: var(--sidebar-selected);
      border-color: var(--btn-active-border);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .task-item.task-running {
      border-left: none;
      padding-left: 14px;
    }

    .task-item.task-running::before {
      content: '';
      position: absolute;
      left: 6px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      border-radius: 999px;
      background: var(--sidebar-running-accent);
    }

    .task-status-dot {
      width: 8px;
      height: 8px;
      margin-top: 6px;
    }

    .task-item-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .task-item-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-item-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 0;
      font-size: 10px;
      color: var(--text-muted);
    }

    .task-meta-sep {
      color: var(--text-dim);
      font-size: 9px;
    }

    .task-status-badge,
    .detail-badge,
    .live-job-pill,
    .project-card-pill,
    .activity-project-tag,
    .la-file-chip {
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      color: var(--text-muted);
    }

    .task-status-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 9px;
      font-family: var(--mono);
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .task-status-badge.s-running {
      color: var(--amber);
      border-color: rgba(234, 179, 8, 0.24);
      background: rgba(234, 179, 8, 0.1);
    }

    .task-status-badge.s-pending,
    .task-status-badge.s-active,
    .task-status-badge.s-drafting {
      color: var(--blue);
      border-color: rgba(79, 141, 247, 0.22);
      background: rgba(79, 141, 247, 0.1);
    }

    .task-status-badge.s-completed {
      color: var(--green);
      border-color: rgba(34, 197, 94, 0.22);
      background: rgba(34, 197, 94, 0.1);
    }

    .task-status-badge.s-failed,
    .task-status-badge.s-cancelled {
      color: var(--red);
      border-color: rgba(248, 113, 113, 0.22);
      background: rgba(248, 113, 113, 0.1);
    }

    .priority-badge {
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      color: var(--text-muted);
      margin-left: 0;
    }

    .project-cluster-more,
    .header-btn,
    .toolbar-chip,
    .live-job-btn,
    .project-card-btn,
    .detail-btn,
    .log-view-btn,
    .log-expand-btn,
    .scroll-bottom-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid var(--btn-border);
      background: var(--btn-bg);
      color: var(--text);
      border-radius: 11px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-transform: none;
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    }

    .project-cluster-more:hover,
    .header-btn:hover,
    .toolbar-chip:hover,
    .live-job-btn:hover,
    .project-card-btn:hover,
    .detail-btn:hover,
    .log-view-btn:hover,
    .log-expand-btn:hover,
    .scroll-bottom-btn:hover {
      background: var(--btn-hover-bg);
      border-color: var(--btn-hover-border);
      color: var(--text);
    }

    .header-btn,
    .toolbar-chip,
    .live-job-btn,
    .project-card-btn,
    .detail-btn {
      padding: 7px 12px;
    }

    .icon-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 12px;
    }

    .icon-btn-glyph {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .project-cluster-more,
    .log-expand-btn {
      align-self: flex-start;
      margin-top: 3px;
      margin-left: 28px;
      padding: 5px 10px;
    }

    .sidebar-toggle {
      border-left: 1px solid var(--border);
    }

    .sidebar-toggle:hover {
      color: var(--text);
      background: var(--sidebar-hover);
    }

    .toolbar-chip.active,
    .log-view-btn.active,
    .project-card-btn.primary {
      background: var(--btn-active-bg);
      border-color: var(--btn-active-border);
      color: var(--text);
    }

    .live-job-btn.danger,
    .project-card-btn.warn,
    .detail-btn.danger {
      color: var(--red);
      border-color: var(--btn-danger-border);
    }

    .live-job-btn.danger:hover,
    .project-card-btn.warn:hover,
    .detail-btn.danger:hover {
      background: var(--btn-danger-bg);
      border-color: var(--btn-danger-border);
    }

    #main-header {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        var(--surface-main-chrome);
      backdrop-filter: blur(16px);
    }

    #global-toolbar,
    .detail-topbar,
    .detail-tabs,
    .log-toolbar {
      background: var(--surface-toolbar);
      backdrop-filter: blur(14px);
    }

    .main-header-eyebrow,
    .overview-section-title,
    .ops-card-label,
    .stat-card-label,
    .details-section-title,
    .la-section-title,
    .queue-bar-label {
      color: var(--text-dim);
    }

    .status-pill {
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      color: var(--text-muted);
      border-radius: 999px;
    }

    #status-banner {
      background: var(--surface-muted);
      color: var(--text-muted);
    }

    .toolbar-search {
      background: var(--surface-input);
      border-color: var(--border);
      border-radius: 14px;
      color: var(--text);
    }

    .toolbar-search:focus,
    .log-search:focus {
      border-color: var(--btn-active-border);
      box-shadow: 0 0 0 3px rgba(79, 141, 247, 0.12);
    }

    .toolbar-search::placeholder,
    .log-search::placeholder {
      color: var(--text-dim);
    }

    .toolbar-summary,
    .detail-elapsed,
    .timeline-duration,
    .timeline-time,
    .log-match-count {
      color: var(--text-dim);
    }

    .ops-card,
    .live-job-card,
    .project-card,
    .usage-section,
    .batch-card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        var(--surface-card);
      border-color: var(--border);
      box-shadow: var(--shadow-soft);
    }

    .ops-card:hover,
    .live-job-card:hover,
    .project-card:hover,
    .batch-card:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
        var(--surface-card-hover);
      border-color: var(--border-strong);
    }

    .project-card.active-filter {
      background:
        linear-gradient(180deg, rgba(79, 141, 247, 0.08), rgba(255, 255, 255, 0)),
        var(--surface-card);
      border-color: var(--btn-active-border);
      box-shadow: inset 0 0 0 1px rgba(79, 141, 247, 0.1);
    }

    .live-job-card::before {
      width: 2px;
      opacity: 0.9;
    }

    .live-jobs-empty,
    .artifact-block {
      background: var(--surface-input);
      border-color: var(--border);
    }

    .stat-cards {
      border-radius: 14px;
      border-color: var(--border);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    .stat-card {
      background: var(--surface-card);
    }

    .activity-item {
      border-bottom-color: var(--border);
      padding: 10px 4px;
    }

    .activity-item:hover {
      background: var(--surface-muted);
    }

    .scheduled-item {
      border-bottom-color: var(--border);
      padding: 9px 4px;
    }

    .scheduled-item:hover {
      background: var(--surface-muted);
    }

    .scheduled-sched {
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
    }

    #live-activity-panel {
      background: linear-gradient(180deg, rgba(234, 179, 8, 0.05), transparent);
    }

    .detail-tab {
      border-bottom-width: 2px;
      color: var(--text-dim);
    }

    .detail-tab.active {
      color: var(--text);
      border-bottom-color: var(--btn-active-border);
    }

    .log-search {
      background: var(--surface-input);
      border-color: var(--border);
      color: var(--text);
      border-radius: 11px;
      padding: 6px 10px;
    }

    .log-view-toggle {
      background: var(--surface-input);
      border-color: var(--border);
      border-radius: 13px;
      padding: 4px;
    }

    .log-viewer {
      background: var(--log-bg);
    }

    .log-line:nth-child(odd) {
      background: var(--surface-muted);
    }

    .log-line.match,
    .log-event.ev-match {
      background: rgba(234, 179, 8, 0.12);
    }

    .ev-output {
      background: var(--surface-input);
      border-color: var(--border);
    }

    #sidebar.collapsed .project-cluster {
      border: none;
      background: transparent;
      box-shadow: none;
    }

    #sidebar.collapsed .project-cluster-header {
      justify-content: center;
      padding: 10px 0;
    }

    #sidebar.collapsed .project-cluster-copy,
    #sidebar.collapsed .project-cluster-pills,
    #sidebar.collapsed .project-cluster-chevron {
      display: none;
    }

    #sidebar.collapsed .project-cluster-body {
      display: none !important;
    }

    html[data-theme="light"] .ansi-fg-30,
    html[data-theme="light"] .ansi-fg-90 { color: #6b7280; }

    html[data-theme="light"] .ansi-fg-37,
    html[data-theme="light"] .ansi-fg-97 { color: #111827; }

    html[data-theme="light"] .json-key { color: #2563eb; }
    html[data-theme="light"] .json-string { color: #15803d; }
    html[data-theme="light"] .json-number { color: #b91c1c; }
    html[data-theme="light"] .json-boolean { color: #7c3aed; }
    html[data-theme="light"] .json-null { color: #b45309; }

    /* ================================================================
       RESPONSIVE
    ================================================================ */
    @media (max-width: 900px) {
      #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(86vw, 340px);
        min-width: min(86vw, 340px);
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 20;
        box-shadow: 24px 0 48px rgba(0,0,0,0.28);
      }

      #sidebar-resize-handle {
        display: none;
      }

      body.mobile-sidebar-open #sidebar {
        transform: translateX(0);
      }

      #sidebar.collapsed {
        width: min(86vw, 340px);
        min-width: min(86vw, 340px);
      }

      #sidebar.collapsed .sidebar-text,
      #sidebar.collapsed .queue-bar-wrap,
      #sidebar.collapsed .task-item-text,
      #sidebar.collapsed .sidebar-footer-text,
      #sidebar.collapsed .sidebar-links,
      #sidebar.collapsed .section-header-text,
      #sidebar.collapsed .task-item-elapsed {
        display: initial;
      }

      #sidebar.collapsed .project-cluster {
        border: 1px solid var(--border);
        background: var(--surface-muted);
      }

      #sidebar.collapsed .project-cluster-copy,
      #sidebar.collapsed .project-cluster-chevron {
        display: block;
      }

      #sidebar.collapsed .project-cluster-pills {
        display: flex;
      }

      #sidebar.collapsed .project-cluster-copy {
        display: block;
      }

      #sidebar.collapsed .project-cluster-body {
        display: flex !important;
      }

      #sidebar.collapsed .sidebar-topbar {
        justify-content: space-between;
        padding: 14px 16px;
      }

      #sidebar.collapsed .sidebar-logo {
        justify-content: flex-start;
        padding: 0;
      }

      #sidebar.collapsed .task-item {
        justify-content: flex-start;
        padding: 8px 16px;
      }

      #sidebar.collapsed .project-cluster-header {
        justify-content: space-between;
        padding: 11px 12px;
      }

      .sidebar-open-btn {
        display: inline-flex;
      }

      #main-header {
        padding: 16px 18px 12px;
        gap: 12px;
      }

      .main-header-title {
        font-size: 14px;
      }

      #status-banner {
        padding: 10px 18px;
      }

      #global-toolbar {
        padding: 12px 18px;
      }

      #overview {
        padding: 20px 18px 28px;
      }

      .detail-topbar {
        padding: 12px 18px;
        flex-wrap: wrap;
        gap: 10px 12px;
      }

      .detail-tabs {
        overflow-x: auto;
      }

      .details-panel,
      .timeline-panel {
        padding: 18px;
      }
    }

    @media (max-width: 700px) {
      .main-header-meta {
        justify-content: flex-start;
      }

      .toolbar-summary {
        width: 100%;
        margin-left: 0;
      }

      .project-cards {
        flex-direction: column;
      }

      .project-card {
        max-width: none;
      }

      .stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .kv-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .kv-key {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
    }

    /* ================================================================
       USAGE
    ================================================================ */
    .usage-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .usage-toggle {
      appearance: none;
      width: 100%;
      border: none;
      background: transparent;
      color: inherit;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      text-align: left;
      cursor: pointer;
      transition: background var(--transition);
    }

    .usage-toggle:hover {
      background: var(--surface-muted);
    }

    .usage-toggle-copy {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .usage-toggle-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }

    .usage-toggle-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .usage-summary-pill,
    .usage-provider-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      border: 1px solid var(--badge-border);
      background: var(--badge-bg);
      padding: 4px 9px;
      font-size: 10px;
      font-family: var(--mono);
      color: var(--text-muted);
      white-space: nowrap;
    }

    .usage-summary-pill.ok {
      color: var(--green);
      border-color: rgba(34, 197, 94, 0.2);
      background: rgba(34, 197, 94, 0.1);
    }

    .usage-summary-pill.warn {
      color: var(--amber);
      border-color: rgba(234, 179, 8, 0.24);
      background: rgba(234, 179, 8, 0.1);
    }

    .usage-summary-pill.info {
      color: var(--blue);
      border-color: rgba(79, 141, 247, 0.22);
      background: rgba(79, 141, 247, 0.1);
    }

    .usage-summary-pill.muted {
      color: var(--text-dim);
    }

    .usage-toggle-chevron {
      color: var(--text-dim);
      font-size: 12px;
      flex-shrink: 0;
    }

    .usage-body {
      display: grid;
      gap: 14px;
      padding: 0 18px 18px;
    }

    .usage-provider-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface-card);
      padding: 14px;
      box-shadow: var(--shadow-soft);
    }

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

    .usage-provider-title {
      font-size: 14px;
      font-weight: 650;
      color: var(--text);
    }

    .usage-provider-subtitle {
      margin-top: 3px;
      font-size: 11px;
      color: var(--text-dim);
    }

    .usage-provider-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .usage-note {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-input);
      padding: 10px 12px;
      font-size: 12px;
      line-height: 1.55;
      color: var(--text-muted);
    }

    .usage-note.warn {
      color: var(--amber);
      border-color: rgba(234, 179, 8, 0.24);
      background: rgba(234, 179, 8, 0.08);
    }

    .usage-note.subtle {
      color: var(--text-dim);
    }

    .usage-metric-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .usage-metric {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-input);
      padding: 10px 12px;
    }

    .usage-metric-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
    }

    .usage-metric-value {
      margin-top: 6px;
      font-size: 18px;
      font-weight: 650;
      color: var(--text);
    }

    .usage-metric-value.muted {
      color: var(--text-muted);
    }

    .usage-metric-sub {
      margin-top: 7px;
      font-size: 11px;
      line-height: 1.5;
      color: var(--text-dim);
    }

    .usage-list-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .usage-list-block {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-input);
      padding: 11px 12px;
    }

    .usage-list-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      margin-bottom: 8px;
    }

    .usage-list-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 0;
      border-top: 1px solid var(--border);
    }

    .usage-list-row:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .usage-list-label {
      min-width: 0;
      font-size: 12px;
      color: var(--text);
      word-break: break-word;
    }

    .usage-list-value {
      flex-shrink: 0;
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-muted);
      text-align: right;
    }

    .usage-list-value-muted {
      max-width: 220px;
      white-space: normal;
      text-align: right;
      color: var(--text-dim);
    }

    .usage-plan-block {
      margin-bottom: 12px;
    }

    .usage-secondary-block {
      margin-bottom: 12px;
    }

    .usage-provider-caption {
      font-size: 11px;
      line-height: 1.55;
      color: var(--text-dim);
    }

    .utilization-bars {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .util-bar-item {
      flex: 1;
      min-width: 180px;
    }

    .util-bar-label-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 5px;
    }

    .util-bar-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
    }

    .util-bar-pct {
      font-size: 12px;
      font-weight: 600;
      font-family: var(--mono);
    }

    .util-bar-track {
      height: 8px;
      background: var(--progress-track-bg);
      box-shadow: inset 0 0 0 1px var(--progress-track-border);
      border-radius: 4px;
      overflow: hidden;
    }

    .util-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.5s ease, background 0.3s ease;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 1px 2px var(--progress-fill-shadow);
    }

    .util-bar-fill.green { background: var(--progress-completed); }
    .util-bar-fill.yellow { background: var(--progress-running); }
    .util-bar-fill.red { background: var(--progress-failed); }

    .util-bar-reset {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 3px;
    }

/* Timeline/Gantt */
/* Timeline Heatmap (GitHub-style) */
.timeline-section { margin-bottom: 16px; }
.timeline-row-layout { display: flex; gap: 16px; align-items: stretch; }
.timeline-row-layout .timeline-chart { flex: 1; min-width: 0; }

.util-chart-wrap {
  flex: 0 0 280px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; align-items: center;
}
.util-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; width: 100%; }
.util-chart-title { font-size: 13px; font-weight: 500; color: var(--text); }
.util-chart-toggles { display: flex; gap: 2px; }
.uc-toggle { font-size: 11px; padding: 2px 10px; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: var(--text-dim); transition: all 0.15s; }
.uc-toggle:hover { color: var(--text-muted); background: rgba(255,255,255,0.04); }
.uc-toggle.active { background: rgba(34,211,238,0.8); color: #fff; }
.uc-sep { color: var(--text-dim); font-size: 11px; margin: 0 4px; }
.util-chart-svg-wrap { width: 100%; }
.uc-svg { width: 100%; display: block; }
.uc-dot { pointer-events: none; transition: r 0.15s; }
.uc-overlay { cursor: crosshair; }
.uc-legend { font-size: 11px; margin-top: 6px; color: var(--text-muted); }
html[data-theme="light"] .util-chart-wrap { background: var(--surface); }
html[data-theme="light"] .uc-toggle:hover { background: rgba(0,0,0,0.04); }
/* Docs view (Changelog / Wishlist) */
#docs-view { padding: 0 24px 24px; overflow-y: auto; max-height: calc(100vh - 80px); }
.docs-tabs { display: flex; gap: 4px; margin-bottom: 16px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 5; }
.docs-tab { font-size: 12px; padding: 5px 14px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.docs-tab:hover { background: var(--surface2); color: var(--text); }
.docs-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.docs-content { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px 32px; }
.docs-rendered { font-size: 13px; color: var(--text); line-height: 1.7; }
.docs-rendered h1 { font-size: 22px; font-weight: 700; margin: 24px 0 12px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.docs-rendered h2 { font-size: 17px; font-weight: 600; margin: 20px 0 8px; color: var(--text); }
.docs-rendered h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; color: var(--text-muted); }
.docs-rendered ul { margin: 4px 0 8px 20px; }
.docs-rendered li { margin: 2px 0; }
.docs-rendered code { font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; }
.docs-rendered pre { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin: 8px 0; overflow-x: auto; }
.docs-rendered pre code { background: none; padding: 0; font-size: 12px; }
.docs-rendered hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.docs-rendered a { color: var(--blue); text-decoration: none; }
.docs-rendered a:hover { text-decoration: underline; }
.docs-rendered strong { color: var(--text); }
.docs-check { font-size: 12px; margin: 2px 0; }
.docs-check.done { color: var(--green); }
.docs-loading { color: var(--text-dim); padding: 20px; text-align: center; }
html[data-theme="light"] .docs-rendered code { background: rgba(0,0,0,0.06); }

/* Heatmap — GitHub-style contribution chart */
.heatmap-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow-x: auto; }
.heatmap-grid {
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
}
.heatmap-corner { font-size: 10px; color: var(--text-dim); }
.heatmap-date { font-size: 9px; color: var(--text-dim); text-align: center; min-width: 14px; }
.heatmap-date.today { color: var(--green); font-weight: 600; }
.heatmap-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.heatmap-cell { width: 12px; height: 12px; border-radius: 2px; cursor: default; transition: opacity 0.15s; }
.heatmap-cell:hover { opacity: 0.8; outline: 1px solid var(--text-muted); }
.heatmap-cell.level-0 { background: rgba(255,255,255,0.06); }
.heatmap-cell.level-1 { background: #0e4429; }
.heatmap-cell.level-2 { background: #006d32; }
.heatmap-cell.level-3 { background: #26a641; }
.heatmap-cell.level-4 { background: #39d353; }
html[data-theme="light"] .heatmap-cell.level-0 { background: rgba(0,0,0,0.06); }
html[data-theme="light"] .heatmap-cell.level-1 { background: #9be9a8; }
html[data-theme="light"] .heatmap-cell.level-2 { background: #40c463; }
html[data-theme="light"] .heatmap-cell.level-3 { background: #30a14e; }
html[data-theme="light"] .heatmap-cell.level-4 { background: #216e39; }
.heatmap-total { font-size: 10px; color: var(--text-dim); font-family: var(--mono); display: flex; align-items: center; justify-content: flex-end; padding-left: 6px; font-weight: 500; }
.heatmap-legend { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: 8px; padding-right: 4px; }
.heatmap-legend-label { font-size: 9px; color: var(--text-dim); margin: 0 3px; }
.heatmap-tooltip { position: fixed; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--text); z-index: 100; pointer-events: none; max-width: 200px; line-height: 1.4; text-align: center; }

    /* ================================================================
       FLOW VIEW (VibeLens-style turn-based timeline)
    ================================================================ */

    /* Turn layout: left rail (dot + line) + body */
    .fv-turn { display: flex; gap: 12px; position: relative; }
    .fv-turn:last-child .fv-line { display: none; }
    .fv-rail { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; padding-top: 5px; }
    .fv-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
    }
    .fv-dot-msg { background: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.12); }
    .fv-dot-tool { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.12); }
    .fv-dot-sys { background: var(--text-dim); box-shadow: 0 0 0 3px rgba(161,161,170,0.08); }
    .fv-line { width: 2px; flex: 1; background: rgba(113,113,122,0.18); min-height: 16px; margin-top: 4px; border-radius: 1px; margin-bottom: -14px; }
    .fv-body { flex: 1; min-width: 0; padding-bottom: 14px; }
    html[data-theme="light"] .fv-dot-msg { background: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,0.12); }
    html[data-theme="light"] .fv-dot-tool { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.12); }
    html[data-theme="light"] .fv-dot-sys { background: #9ca3af; box-shadow: 0 0 0 3px rgba(156,163,175,0.1); }
    html[data-theme="light"] .fv-line { background: rgba(0,0,0,0.1); }

    /* Time row */
    .fv-time { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; padding-top: 2px; }
    .fv-time-el { font-size: 11px; font-family: var(--mono); color: var(--text-muted); font-weight: 500; }
    .fv-time-gap { font-size: 10px; font-family: var(--mono); color: var(--text-dim); margin-left: auto; opacity: 0.7; }

    /* System/info event */
    .fv-sys { font-size: 11px; color: var(--text-dim); padding: 4px 0; font-style: italic; }

    /* Thinking block */
    .fv-thinking {
      border: 1px solid rgba(167,139,250,0.15);
      background: rgba(167,139,250,0.04);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      user-select: none;
    }
    .fv-thinking:hover { border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.08); }
    .fv-thinking-hd { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #c4b5fd; font-weight: 600; }
    .fv-thinking-ico { font-size: 13px; }
    .fv-chev { font-size: 10px; color: var(--text-dim); margin-left: auto; }
    .fv-thinking-pre { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
    .fv-thinking-body { font-size: 11px; color: var(--text-muted); margin-top: 6px; white-space: pre-wrap; line-height: 1.5; max-height: 400px; overflow-y: auto; animation: fv-fade-in 0.2s ease; }

    /* Agent message card */
    .fv-msg {
      display: flex; gap: 10px; align-items: flex-start;
      border: 1px solid rgba(34,211,238,0.15);
      background: rgba(34,211,238,0.04);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 8px;
      transition: border-color 0.15s;
    }
    .fv-msg:hover { border-color: rgba(34,211,238,0.3); }
    .fv-msg-ico { color: var(--cyan); font-size: 12px; margin-top: 2px; flex-shrink: 0; }
    .fv-msg-text { font-size: 12px; color: #cffafe; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

    /* Tool calls section */
    .fv-tools {
      border: 1px solid rgba(34,211,238,0.12);
      background: rgba(34,211,238,0.03);
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 8px;
    }
    .fv-tools-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
    .fv-tools-n { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
    .fv-tools-sep { color: rgba(113,113,122,0.4); font-size: 10px; }
    .fv-cat { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; }
    .fv-cat-dot { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; }

    /* Tool pill */
    .fv-tools-list { display: flex; flex-direction: column; gap: 4px; }
    .fv-pill {
      border-radius: 6px;
      border: 1px solid color-mix(in srgb, var(--pc) 20%, transparent);
      background: var(--pb);
      transition: border-color 0.15s;
    }
    .fv-pill:hover { border-color: color-mix(in srgb, var(--pc) 40%, transparent); }
    .fv-pill-hd {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px;
      cursor: pointer;
      user-select: none;
      transition: background 0.1s;
    }
    .fv-pill-hd:hover { background: rgba(255,255,255,0.04); border-radius: 5px; }
    html[data-theme="light"] .fv-pill-hd:hover { background: rgba(0,0,0,0.04); }
    .fv-pill-name {
      font-size: 11px; font-family: var(--mono); font-weight: 600;
      color: var(--pc);
      flex-shrink: 0;
    }
    .fv-pill-cmd {
      font-size: 11px; font-family: var(--mono);
      color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      flex: 1; min-width: 0;
    }
    .fv-pill-err {
      font-size: 9px; font-weight: 700;
      background: rgba(248,113,113,0.2); color: var(--red);
      padding: 1px 5px; border-radius: 3px;
    }
    .fv-pill-lines {
      font-size: 9px; color: var(--text-dim); font-family: var(--mono);
      margin-left: auto; flex-shrink: 0;
    }
    .fv-pill-out {
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 8px 10px;
      max-height: 300px; overflow: auto;
      animation: fv-fade-in 0.2s ease;
    }
    .fv-pill-out pre {
      font-size: 11px; font-family: var(--mono);
      color: var(--text-muted); white-space: pre-wrap; word-break: break-word; margin: 0;
    }

    /* Error pill tinting */
    .fv-pill.fv-pill-error {
      border-color: rgba(239,68,68,0.35) !important;
    }
    .fv-pill.fv-pill-error:hover {
      border-color: rgba(239,68,68,0.5) !important;
    }
    html[data-theme="light"] .fv-pill.fv-pill-error {
      border-color: rgba(220,38,38,0.35) !important;
    }

    /* Expand/Collapse all button */
    .fv-expand-all-btn {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 999px;
      font-size: 10px;
      font-family: var(--sans);
      padding: 3px 10px;
      cursor: pointer;
      transition: background var(--transition), color var(--transition);
      margin-left: auto;
    }
    .fv-expand-all-btn:hover {
      background: rgba(255,255,255,0.12);
      color: var(--text);
    }
    html[data-theme="light"] .fv-expand-all-btn {
      background: rgba(0,0,0,0.04);
    }
    html[data-theme="light"] .fv-expand-all-btn:hover {
      background: rgba(0,0,0,0.08);
    }

    /* Fade-in animation for expanded content */
    @keyframes fv-fade-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Markdown-like formatting in agent messages */
    .fv-msg-text code {
      background: rgba(255,255,255,0.08);
      padding: 1px 5px;
      border-radius: 3px;
      font-family: var(--mono);
      font-size: 11px;
    }
    .fv-msg-text strong { font-weight: 700; }
    html[data-theme="light"] .fv-msg-text code {
      background: rgba(0,0,0,0.06);
    }

    /* Flow view — light theme overrides */
    /* (light theme dot overrides moved to rail section above) */
    html[data-theme="light"] .fv-thinking { border-color: rgba(124,58,237,0.25); background: rgba(124,58,237,0.06); }
    html[data-theme="light"] .fv-thinking:hover { border-color: rgba(124,58,237,0.4); }
    html[data-theme="light"] .fv-thinking-hd { color: #7c3aed; }
    html[data-theme="light"] .fv-thinking-pre,
    html[data-theme="light"] .fv-thinking-body { color: #4b5563; }
    html[data-theme="light"] .fv-msg { border-color: rgba(8,145,178,0.25); background: rgba(8,145,178,0.06); }
    html[data-theme="light"] .fv-msg:hover { border-color: rgba(8,145,178,0.4); }
    html[data-theme="light"] .fv-msg-ico { color: #0891b2; }
    html[data-theme="light"] .fv-msg-text { color: #1f2937; }
    html[data-theme="light"] .fv-tools { border-color: rgba(8,145,178,0.2); background: rgba(8,145,178,0.04); }
    html[data-theme="light"] .fv-pill-name { color: var(--text); }
    html[data-theme="light"] .fv-pill-cmd { color: #4b5563; }
    html[data-theme="light"] .fv-pill-out { border-top-color: rgba(0,0,0,0.08); }
    html[data-theme="light"] .fv-pill-out pre { color: #4b5563; }

    /* ================================================================
       SIDEBAR SPOKES
    ================================================================ */

    .sidebar-spokes {
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
    }

    .sb-spokes-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sb-spokes-count {
      font-weight: 400;
      font-size: 10px;
      color: var(--text-dim);
      text-transform: none;
      letter-spacing: 0;
    }

    .sb-spoke {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 0;
      font-size: 11px;
    }

    .sb-spoke-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .sb-spoke-dot.on { background: var(--green); box-shadow: 0 0 5px var(--green); }
    .sb-spoke-dot.busy { background: var(--amber); box-shadow: 0 0 5px var(--amber); animation: net-pulse 2s ease-in-out infinite; }
    .sb-spoke-dot.off { background: var(--red); box-shadow: 0 0 4px var(--red); }

    .sb-spoke-id {
      color: var(--text);
      font-weight: 500;
    }

    .sb-spoke.off .sb-spoke-id { color: var(--text-dim); }

    .sb-spoke-cap {
      font-size: 9px;
      font-family: var(--mono);
      padding: 0 4px;
      border-radius: 3px;
      background: rgba(59, 130, 246, 0.1);
      color: var(--blue);
    }

    .sb-spoke-tasks {
      font-size: 9px;
      font-weight: 600;
      color: var(--amber);
      margin-left: auto;
    }

    .sb-project-spoke {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9px;
      font-weight: 500;
      color: var(--text-muted);
      margin-left: 6px;
      padding: 0 5px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      vertical-align: middle;
    }

    .sb-project-spoke-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .sb-project-spoke-dot.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
    .sb-project-spoke-dot.off { background: var(--red); box-shadow: 0 0 4px var(--red); }

    /* ================================================================
       AGENT NETWORK VISUALIZATION
    ================================================================ */

    .network-section { margin-bottom: 16px; }

    .net-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }

    /* Hub node */
    .net-hub {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 8px;
      position: relative;
    }

    .net-hub-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--surface2);
      border: 2px solid var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
    }

    .net-hub-gif {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 50%;
    }

    .net-hub-pulse {
      animation: net-hub-pulse-ring 2s ease-in-out infinite;
    }

    @keyframes net-hub-pulse-ring {
      0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.15); }
      50% { box-shadow: 0 0 24px rgba(234, 179, 8, 0.35), 0 0 40px rgba(234, 179, 8, 0.1); }
    }

    .net-dobby-busy {
      animation: net-dobby-bounce 0.6s ease-in-out infinite;
    }

    @keyframes net-dobby-bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .net-hub-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      margin-top: 6px;
    }

    .net-hub-status {
      font-size: 9px;
      font-weight: 500;
      margin-top: 2px;
    }
    .net-hub-status.online { color: var(--green); }
    .net-hub-status.offline { color: var(--text-dim); }

    /* Spokes row */
    .net-spokes-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .net-spoke-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 140px;
      max-width: 200px;
      flex: 1;
    }

    /* Connection line from hub to spoke */
    .net-connection {
      width: 2px;
      height: 32px;
      position: relative;
      display: flex;
      justify-content: center;
    }

    .net-line {
      width: 2px;
      height: 100%;
      background: var(--border);
      border-radius: 1px;
    }

    .net-connection.online .net-line { background: var(--green); opacity: 0.4; }
    .net-connection.busy .net-line { background: var(--amber); opacity: 0.6; }
    .net-connection.offline .net-line { background: var(--text-dim); opacity: 0.2; border-style: dashed; }

    /* Animated packet traveling on the line */
    .net-packet {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 8px var(--amber);
      left: 50%;
      transform: translateX(-50%);
    }

    .net-anim-to-spoke .net-packet {
      animation: net-packet-down 1.2s ease-in-out infinite;
    }
    .net-anim-to-hub .net-packet {
      animation: net-packet-up 1.2s ease-in-out infinite;
    }

    @keyframes net-packet-down {
      0% { top: 0; opacity: 1; }
      100% { top: 100%; opacity: 0.3; }
    }
    @keyframes net-packet-up {
      0% { top: 100%; opacity: 0.3; }
      100% { top: 0; opacity: 1; }
    }

    /* Spoke card */
    .net-spoke {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      transition: border-color 0.2s;
    }

    .net-spoke.online { border-color: rgba(34, 197, 94, 0.25); }
    .net-spoke.busy { border-color: rgba(234, 179, 8, 0.35); box-shadow: 0 0 12px rgba(234, 179, 8, 0.08); }
    .net-spoke.offline { border-color: var(--border); opacity: 0.5; }

    .net-spoke-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

    .net-spoke-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .net-spoke-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
    .net-spoke-dot.busy { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: net-pulse 2s ease-in-out infinite; }
    .net-spoke-dot.offline { background: var(--red); box-shadow: 0 0 4px var(--red); }

    @keyframes net-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .net-spoke-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }

    .net-spoke-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-bottom: 4px;
    }

    .net-spoke-caps {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .net-cap-badge {
      font-size: 9px;
      font-weight: 500;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(59, 130, 246, 0.12);
      color: var(--blue);
      font-family: var(--mono);
    }

    .net-spoke-idle {
      font-size: 9px;
      color: var(--text-dim);
      font-style: italic;
      margin-bottom: 2px;
    }

    .net-platform-ico {
      margin-right: 4px;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      opacity: 0.7;
    }
    .net-platform-ico svg { display: block; }

    .net-spoke-tasks {
      font-size: 10px;
      font-weight: 600;
      color: var(--amber);
      margin-bottom: 2px;
    }

    .net-spoke-task-item {
      font-size: 9px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 1px;
    }

    .net-spoke-heartbeat {
      font-size: 9px;
      color: var(--text-dim);
      margin-top: 4px;
    }

    .net-hub-projects,
    .net-spoke-projects {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 4px;
      margin-bottom: 2px;
    }

    .net-project-tag {
      font-size: 9px;
      font-weight: 500;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(34, 197, 94, 0.1);
      color: var(--green);
      border: 1px solid rgba(34, 197, 94, 0.15);
    }

    /* ================================================================
       USAGE GUIDE MODAL
    ================================================================ */

    .guide-overlay {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
    }
    .guide-overlay.open { opacity: 1; pointer-events: auto; }

    .guide-modal {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: min(640px, 90vw);
      max-height: 85vh;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      z-index: 1000;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      display: flex; flex-direction: column;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    }
    .guide-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

    .guide-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .guide-modal-title { font-size: 16px; font-weight: 700; color: var(--text); }

    .guide-dismiss {
      background: none; border: none;
      color: var(--text-dim); font-size: 20px;
      cursor: pointer; padding: 4px 8px; border-radius: 4px;
    }
    .guide-dismiss:hover { color: var(--text); background: var(--surface2); }

    .guide-modal-body {
      overflow-y: auto; padding: 16px 20px;
      flex: 1;
    }

    .guide-section { margin-bottom: 18px; }
    .guide-section-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
    .guide-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0 0 8px; }

    .guide-example { margin-bottom: 10px; }
    .guide-example-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
    .guide-example code {
      display: block;
      font-size: 11px; font-family: var(--mono);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-muted);
      padding: 6px 10px;
      border-radius: 6px;
      margin-bottom: 4px;
      line-height: 1.5;
      overflow-x: auto;
    }
    html[data-theme="light"] .guide-example code { background: rgba(0, 0, 0, 0.04); }