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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0f;
      color: #e0e0e0;
      overflow: hidden;
    }

    #app {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    /* ============================================
       TOP SEARCH BAR
       ============================================ */
    #top-search-bar {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 0;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 12px;
      padding: 4px 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      min-width: 320px;
    }

    #top-search-bar .search-icon {
      color: #666;
      font-size: 14px;
      padding: 8px;
    }

    #top-search-bar input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: #e0e0e0;
      font-size: 14px;
      padding: 8px 4px;
      min-width: 200px;
    }

    #top-search-bar input::placeholder {
      color: #666;
    }

    #top-search-bar .search-clear-btn {
      background: transparent;
      border: none;
      color: #666;
      cursor: pointer;
      padding: 8px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #top-search-bar .search-clear-btn:hover {
      color: #e0e0e0;
    }

    #top-search-bar .search-settings-btn {
      background: transparent;
      border: none;
      color: #aaa;
      cursor: pointer;
      padding: 8px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #top-search-bar .search-settings-btn:hover {
      color: #d4b878;
    }

    /* Persona filter button in search bar */
    #top-search-bar .persona-filter-btn {
      background: transparent;
      border: none;
      color: #888;
      cursor: pointer;
      padding: 6px 10px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 4px;
      border-left: 1px solid #3a3a4a;
      margin-left: 2px;
      white-space: nowrap;
      transition: color 0.2s;
    }
    #top-search-bar .persona-filter-btn:hover {
      color: #e0e0e0;
    }
    #top-search-bar .persona-filter-btn.filtered {
      color: #4a9eff;
    }

    /* Hero dropdown panel */
    .persona-filter-dropdown {
      display: none;
      position: fixed;
      top: 60px;
      left: 10vw;
      width: 80vw;
      z-index: 200;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }
    .persona-filter-dropdown.open {
      display: block;
    }

    /* Header row: factor type chips + All/None */
    .persona-filter-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid #2a2a3a;
      flex-wrap: wrap;
    }
    .persona-filter-header-label {
      font-size: 11px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .persona-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      font-size: 12px;
      border-radius: 20px;
      border: 1px solid #3a3a4a;
      background: #252535;
      color: #888;
      cursor: pointer;
      transition: all 0.15s;
      user-select: none;
    }
    .persona-filter-chip.active {
      background: #1a3a5a;
      border-color: #4a9eff;
      color: #4a9eff;
    }
    .persona-filter-chip:hover {
      border-color: #5a5a6a;
    }
    .persona-filter-spacer {
      flex: 1;
    }
    .persona-filter-toggle {
      font-size: 11px;
      color: #4a9eff;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      background: transparent;
      border: none;
      transition: background 0.15s;
    }
    .persona-filter-toggle:hover {
      background: #2a2a3a;
    }

    /* Card grid */
    .persona-filter-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    /* Individual persona card */
    .persona-card {
      background: #252535;
      border: 1px solid #3a3a4a;
      border-radius: 10px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.15s;
      user-select: none;
      position: relative;
    }
    .persona-card:hover {
      border-color: #5a5a6a;
      background: #2a2a40;
    }
    .persona-card.selected {
      border-color: #4a9eff;
      background: #1a2a40;
      box-shadow: 0 0 12px rgba(74, 158, 255, 0.15);
    }
    .persona-card.deselected {
      opacity: 0.45;
    }
    .persona-card-name {
      font-size: 13px;
      font-weight: 600;
      color: #e0e0e0;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .persona-card-check {
      font-size: 11px;
      color: #4a9eff;
    }
    .persona-card.deselected .persona-card-check {
      visibility: hidden;
    }
    .persona-card-archetype {
      font-size: 11px;
      color: #777;
      margin-bottom: 1px;
      font-style: italic;
    }
    .persona-card-area {
      font-size: 10px;
      color: #555;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .persona-card-desc {
      font-size: 10px;
      color: #666;
      margin-bottom: 4px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .persona-card-factors {
      font-size: 10px;
      color: #888;
      display: flex;
      gap: 6px;
    }
    .persona-card-factors .rational {
      color: #5cb85c;
    }
    .persona-card-factors .emotional {
      color: #e8a04c;
    }

    /* ============================================
       IMPORTANCE VISUALIZATION
       ============================================ */
    .node-label.importance-none {
      fill: #555 !important;
      opacity: 0.5;
    }

    .matrix-selector-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid #2a2a3a;
      background: #15151f;
    }

    .matrix-selector-row label {
      font-size: 0.75rem;
      color: #999;
      white-space: nowrap;
    }

    .matrix-selector-row select {
      flex: 1;
      background: #1e1e2e;
      color: #e0e0e0;
      border: 1px solid #3a3a4a;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 0.72rem;
      cursor: pointer;
    }

    .matrix-selector-row select:hover {
      border-color: #5a5a6a;
    }

    .view-mode-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      color: #888;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .view-mode-btn:hover {
      border-color: #5a5a6a;
      color: #ccc;
    }
    .view-mode-btn.active {
      background: #2a3a2a;
      border-color: #4ade80;
      color: #4ade80;
    }

    .importance-toggle-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      color: #888;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .importance-toggle-btn:hover {
      border-color: #5a5a6a;
      color: #ccc;
    }

    .importance-toggle-btn.active {
      background: #2a3a4a;
      border-color: #4a8af4;
      color: #4a8af4;
    }

    .greyscale-toggle-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      color: #888;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .greyscale-toggle-btn:hover {
      border-color: #5a5a6a;
      color: #ccc;
    }
    .greyscale-toggle-btn.active {
      background: #2a2a3a;
      border-color: #e040fb;
      color: #e040fb;
    }

    .hide-base-toggle-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      color: #888;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .hide-base-toggle-btn:hover {
      border-color: #5a5a6a;
      color: #ccc;
    }
    .hide-base-toggle-btn.active {
      background: #2a2a3a;
      border-color: #ff6b35;
      color: #ff6b35;
    }

    .segment-toggle-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      color: #888;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .segment-toggle-btn:hover {
      border-color: #5a5a6a;
      color: #ccc;
    }
    .segment-toggle-btn.active {
      background: #2a2a3a;
      border-color: #4ade80;
      color: #4ade80;
    }

    .importance-legend {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 0.65rem;
      color: #666;
      border-top: 1px solid #2a2a3a;
    }

    .importance-legend svg {
      display: inline-block;
    }

    .importance-size-slider {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
    }



    /* ============================================
       BOTTOM SELECTION TOOLBAR
       ============================================ */
    #bottom-toolbar {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 12px;
      padding: 8px 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    #bottom-toolbar .toolbar-stats {
      color: #888;
      font-size: 12px;
      padding-right: 12px;
      border-right: 1px solid #3a3a4a;
      white-space: nowrap;
    }

    #bottom-toolbar .toolbar-selection {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 12px;
      border-right: 1px solid #3a3a4a;
    }

    #bottom-toolbar .toolbar-selection-count {
      color: #e0e0e0;
      font-size: 13px;
      font-weight: 500;
    }

    #bottom-toolbar .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #bottom-toolbar .toolbar-btn {
      background: #2a2a3a;
      border: 1px solid #3a3a4a;
      color: #e0e0e0;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }

    #bottom-toolbar .toolbar-btn:hover {
      background: #3a3a4a;
      border-color: #4a4a5a;
    }

    #bottom-toolbar .toolbar-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #bottom-toolbar .toolbar-btn.level-toggle.active {
      background: #4a4a6a;
      border-color: #6366f1;
      color: #fff;
    }

    #bottom-toolbar .toolbar-btn.primary {
      background: #3b82f6;
      border-color: #3b82f6;
    }

    #bottom-toolbar .toolbar-btn.primary:hover {
      background: #2563eb;
    }

    #bottom-toolbar .toolbar-btn.danger {
      background: #4a2a2a;
      border-color: #6a3a3a;
      color: #f5a0a0;
    }

    #bottom-toolbar .toolbar-btn.danger:hover {
      background: #5a3a3a;
    }

    #bottom-toolbar .toolbar-more {
      position: relative;
    }

    #bottom-toolbar .toolbar-more-menu {
      position: absolute;
      bottom: 100%;
      right: 0;
      margin-bottom: 8px;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      padding: 4px;
      display: none;
      min-width: 160px;
    }

    #bottom-toolbar .toolbar-more-menu.active {
      display: block;
    }

    #bottom-toolbar .toolbar-more-menu button {
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: #e0e0e0;
      padding: 8px 12px;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
    }

    #bottom-toolbar .toolbar-more-menu button:hover {
      background: #2a2a3a;
    }

    /* Hide old sidebar */
    #sidebar {
      display: none !important;
    }

    .legend {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
      padding: 15px;
      background: #1a1a24;
      border-radius: 8px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.85rem;
    }

    .legend-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }

    .legend-dot.grey { background: #6b7280; }
    .legend-dot.orange { background: #f59e0b; }
    .legend-dot.green { background: #10b981; }
    .legend-dot.blue { background: #3b82f6; }

    #node-info {
      flex: 1;
      padding: 15px;
      background: #1a1a24;
      border-radius: 8px;
      overflow-y: auto;
    }

    #node-info h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
      color: #fff;
    }

    #node-info .info-row {
      margin-bottom: 8px;
      font-size: 0.85rem;
    }

    #node-info .info-label {
      color: #888;
      display: block;
      margin-bottom: 2px;
    }

    #node-info .info-value {
      color: #e0e0e0;
    }

    .actions {
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn {
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .btn-primary {
      background: #3b82f6;
      color: white;
    }

    .btn-primary:hover {
      background: #2563eb;
    }

    .btn-secondary {
      background: #374151;
      color: white;
    }

    .btn-secondary:hover {
      background: #4b5563;
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #graph-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    #graph-3d-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    #graph-3d-container canvas {
      width: 100% !important;
      height: 100% !important;
    }

    #graph {
      width: 100%;
      height: 100%;
    }

    .node {
      cursor: pointer;
    }

    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    .node:hover circle {
      filter: brightness(1.3);
      stroke: #fff;
      stroke-width: 2px;
    }

    .node.collapsed circle {
      fill: lightsteelblue;
    }

    .node-label {
      font-size: 10px;
      fill: #e0e0e0;
      cursor: pointer;
    }

    .node-label.search-highlight {
      fill: #fbbf24;
      font-weight: bold;
    }

    .node-level {
      font-size: 9px;
      font-weight: bold;
      fill: #fff;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .link {
      /* stroke color and width set dynamically via JavaScript */
      stroke-opacity: 0.8;
      fill: none;
    }

    .link.highlighted-parent {
      stroke: #ef4444;
      stroke-opacity: 1;
      stroke-width: 3px;
    }

    .link.highlighted-children {
      stroke: #f59e0b;
      stroke-opacity: 1;
      stroke-width: 3px;
    }

    .link.search-dimmed {
      stroke-opacity: 0.3 !important;
    }

    /* Highlighted labels - font-size controlled by JS for zoom independence */
    .node-label.highlighted-parent {
      fill: #ef4444;
      font-weight: bold;
    }

    .node-label.highlighted-children {
      fill: #f59e0b;
      font-weight: bold;
    }

    .node-label.highlighted-selected {
      fill: #fff;
      font-weight: bold;
      stroke: #000;
      stroke-width: 3px;
      paint-order: stroke fill;
    }

    /* Multi-selection styles */
    .node.multi-selected circle {
      stroke: #3b82f6;
      stroke-width: 3px;
    }

    .node-label.multi-selected {
      fill: #3b82f6;
      font-weight: bold;
    }

    /* Quality indicator - weak quality nodes */
    .node.weak-quality circle {
      stroke: #ef4444;
      stroke-width: 3px;
      stroke-dasharray: 4 2;
    }

    /* Close button (shared by gap preview + unified fix modal) */
    .quality-panel-close {
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      font-size: 18px;
    }

    /* Gap Preview Panel (modal overlay) */
    .gap-preview-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 2000;
      display: none;
      justify-content: center;
      align-items: center;
    }

    .gap-preview-overlay.active {
      display: flex;
    }

    .gap-preview-modal {
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 10px;
      width: 80vw;
      max-width: 80vw;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .gap-preview-header {
      padding: 14px 18px;
      background: #2a2a3a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #3a3a4a;
      border-radius: 10px 10px 0 0;
    }

    .gap-preview-title {
      font-weight: 600;
      font-size: 15px;
    }

    .gap-preview-content {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }

    .gap-preview-summary {
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid #2a2a3a;
    }

    .gap-preview-total {
      font-size: 13px;
      color: #ccc;
      margin-bottom: 8px;
    }

    .gap-preview-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .gap-badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 10px;
      font-weight: 600;
    }

    .gap-badge.programmatic {
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .gap-badge.api-lookup {
      background: rgba(59, 130, 246, 0.15);
      color: #60a5fa;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .gap-badge.ai-generation {
      background: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .gap-cost-estimate {
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.25);
      border-radius: 6px;
      padding: 10px 14px;
      margin-bottom: 14px;
    }

    .gap-cost-title {
      font-size: 12px;
      font-weight: 600;
      color: #f59e0b;
      margin-bottom: 6px;
    }

    .gap-cost-model {
      font-size: 11px;
      color: #888;
      margin-bottom: 4px;
    }

    .gap-cost-breakdown {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 11px;
      color: #aaa;
    }

    .gap-cost-total {
      font-size: 13px;
      font-weight: 600;
      color: #f59e0b;
      margin-top: 6px;
    }

    .gap-cost-note {
      font-size: 10px;
      color: #666;
      margin-top: 4px;
      font-style: italic;
    }

    .gap-preview-migration-section {
      margin-bottom: 18px;
      padding: 12px 14px;
      background: #1e1e2e;
      border-radius: 8px;
      border-left: 3px solid #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .gap-preview-migration-section .gap-preview-total {
      color: #f59e0b;
    }

    .gap-strategy-group.migration .gap-strategy-cost {
      color: #f59e0b;
    }

    .gap-preview-node {
      margin-bottom: 14px;
      padding: 10px 12px;
      background: #22222e;
      border-radius: 6px;
      border-left: 3px solid #3a3a4a;
    }

    .gap-preview-node-name {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 8px;
      color: #ddd;
    }

    .gap-strategy-group {
      margin-bottom: 8px;
    }

    .gap-strategy-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .gap-strategy-cost {
      font-size: 11px;
      font-weight: 600;
    }

    .gap-strategy-group.programmatic .gap-strategy-cost {
      color: #10b981;
    }

    .gap-strategy-group.api-lookup .gap-strategy-cost {
      color: #60a5fa;
    }

    .gap-strategy-group.ai-generation .gap-strategy-cost {
      color: #f59e0b;
    }

    .gap-strategy-group ul {
      margin: 2px 0 0 16px;
      padding: 0;
      font-size: 11px;
      color: #999;
    }

    .gap-strategy-group li {
      margin: 2px 0;
    }

    .gap-strategy-group li code {
      color: #c4b5fd;
      font-size: 10px;
      background: rgba(196, 181, 253, 0.1);
      padding: 1px 4px;
      border-radius: 3px;
    }

    .gap-fix-desc {
      color: #777;
      font-size: 10px;
    }

    .gap-preview-actions {
      padding: 12px 18px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid #3a3a4a;
      background: #1a1a24;
      border-radius: 0 0 10px 10px;
    }

    .btn-cancel-preview {
      padding: 8px 16px;
      font-size: 12px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid #4a4a5a;
      background: transparent;
      color: #aaa;
    }

    .btn-cancel-preview:hover {
      background: #2a2a3a;
      color: #ddd;
    }

    .btn-proceed-preview {
      padding: 8px 20px;
      font-size: 12px;
      border-radius: 5px;
      cursor: pointer;
      border: none;
      background: #3b82f6;
      color: white;
      font-weight: 600;
    }

    .btn-proceed-preview:hover {
      background: #2563eb;
    }

    .btn-proceed-preview:disabled {
      background: #4a4a5a;
      cursor: not-allowed;
    }

    /* Unified fix modal — inline section selection */
    .ufix-section { margin-bottom: 16px; }
    .ufix-section-title { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; border-bottom: 1px solid #3a3a4a; padding-bottom: 4px; }
    .ufix-section-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; }
    .ufix-section-grid label { font-size: 12px; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
    .ufix-section-grid label:hover { color: #fff; }
    .ufix-section-grid input[type="checkbox"] { accent-color: #3b82f6; }
    .ufix-section-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 11px; }
    .ufix-section-actions a { color: #60a5fa; cursor: pointer; text-decoration: none; }
    .ufix-section-actions a:hover { text-decoration: underline; }
    .ufix-cost-box { background: #1e1e2e; border: 1px solid #f59e0b44; border-radius: 6px; padding: 10px 14px; margin-top: 8px; }
    .ufix-cost-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #ccc; }
    .ufix-cost-row strong { color: #f59e0b; }
    .ufix-cost-confidence { font-size: 11px; color: #888; margin-top: 4px; }
    .ufix-spinner { display: flex; align-items: center; gap: 8px; color: #888; padding: 16px 0; }
    .ufix-summary-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
    .ufix-summary-score { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ufix-summary-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
    .ufix-summary-tag.perfect { background: rgba(34,197,94,0.15); color: #22c55e; }
    .ufix-summary-tag.good { background: rgba(245,158,11,0.15); color: #f59e0b; }
    .ufix-summary-tag.bad { background: rgba(239,68,68,0.15); color: #ef4444; }

    .gap-preview-classifying {
      text-align: center;
      padding: 30px 20px;
      color: #888;
      font-size: 13px;
    }

    .gap-preview-classifying .spinner-small {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #3a3a4a;
      border-top-color: #60a5fa;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-right: 8px;
      vertical-align: middle;
    }

    /* ============================================
       LAYER SELECTOR
       ============================================ */
    .layer-selector-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      color: #aaa;
      cursor: pointer;
      padding: 6px 12px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
      position: relative;
    }
    .layer-selector-btn:hover { color: #e0e0e0; border-color: #555; }
    .layer-selector-btn.active { color: #e040fb; border-color: #e040fb; }
    .layer-selector-btn .layer-count-badge {
      background: #e040fb;
      color: #fff;
      font-size: 10px;
      border-radius: 8px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
    }
    /* Git push button */
    .git-push-btn {
      background: transparent;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      color: #aaa;
      cursor: pointer;
      padding: 6px 12px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .git-push-btn:hover { color: #e0e0e0; border-color: #555; }
    .git-push-btn.pushing {
      color: #fbbf24;
      border-color: #fbbf24;
      pointer-events: none;
      opacity: 0.7;
    }
    .git-push-badge {
      background: #ef4444;
      color: #fff;
      font-size: 10px;
      border-radius: 8px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
    }

    .layer-selector-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 200;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
      min-width: 360px;
      max-height: 500px;
      overflow-y: auto;
    }
    .layer-selector-dropdown.open { display: block; }
    .layer-selector-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #2a2a3a;
    }
    .layer-selector-header-label { color: #aaa; font-size: 13px; font-weight: 600; }
    .layer-selector-new-btn {
      background: #2a2a3a;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      color: #e040fb;
      cursor: pointer;
      padding: 4px 10px;
      font-size: 12px;
      transition: all 0.2s;
    }
    .layer-selector-new-btn:hover { background: #3a3a4a; }
    .layer-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      margin-bottom: 4px;
      transition: background 0.15s;
      cursor: pointer;
    }
    .layer-item:hover { background: #2a2a3a; }
    .layer-item.active-layer { background: rgba(224, 64, 251, 0.1); border: 1px solid rgba(224, 64, 251, 0.3); }
    .layer-item .layer-color-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .layer-item .layer-info { flex: 1; min-width: 0; }
    .layer-item .layer-name { color: #e0e0e0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .layer-item .layer-domain { color: #888; font-size: 11px; }
    .layer-item .layer-file-count { color: #666; font-size: 11px; min-width: 30px; text-align: right; }
    .layer-item .layer-visibility-toggle {
      width: 18px;
      height: 18px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.15s;
    }
    .layer-item .layer-visibility-toggle:hover { opacity: 1; }
    .layer-item .layer-active-btn {
      background: none;
      border: 1px solid #555;
      border-radius: 4px;
      color: #888;
      cursor: pointer;
      padding: 2px 6px;
      font-size: 10px;
      transition: all 0.15s;
    }
    .layer-item .layer-active-btn:hover { border-color: #e040fb; color: #e040fb; }
    .layer-item .layer-active-btn.is-active { background: #e040fb; border-color: #e040fb; color: #fff; }
    .layer-item .layer-settings-btn {
      background: none; border: 1px solid #444; color: #888; border-radius: 4px;
      padding: 2px 6px; font-size: 10px; cursor: pointer; transition: all 0.15s;
    }
    .layer-item .layer-settings-btn:hover { border-color: #ff9800; color: #ff9800; }

    /* Edit Layer Modal */
    .edit-layer-modal { width: 80vw; max-width: 80vw; height: 75vh; max-height: 75vh; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
    .elm-header { padding: 18px 24px 0; flex-shrink: 0; }
    .elm-header h3 { margin: 0; color: #e0e0e0; font-size: 18px; }
    .elm-header p { margin: 4px 0 0; color: #888; font-size: 12px; }
    .elm-tabs { display: flex; gap: 0; padding: 12px 24px 0; overflow-x: auto; border-bottom: 1px solid #2a2a3a; flex-shrink: 0; }
    .elm-tab { padding: 8px 16px; font-size: 12px; color: #777; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; user-select: none; }
    .elm-tab:hover { color: #ccc; }
    .elm-tab.active { color: #ff9800; border-bottom-color: #ff9800; }
    .elm-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
    .elm-tab-content { display: none; }
    .elm-tab-content.active { display: block; }
    .elm-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid #2a2a3a; flex-shrink: 0; }
    .elm-footer .elm-footer-left { display: flex; gap: 8px; }
    .elm-footer .elm-footer-right { display: flex; gap: 8px; }
    .elm-field { margin-bottom: 14px; }
    .elm-field label { display: block; color: #aaa; font-size: 12px; margin-bottom: 4px; }
    .elm-field input, .elm-field textarea { width: 100%; background: #1a1a2e; border: 1px solid #2a2a3a; color: #e0e0e0; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
    .elm-field textarea { min-height: 60px; resize: vertical; }
    .elm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .elm-persona-card { background: #16162a; border: 1px solid #2a2a3a; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
    .elm-persona-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; }
    .elm-persona-header:hover { background: rgba(255,255,255,0.03); }
    .elm-persona-title { color: #e0e0e0; font-size: 13px; font-weight: 500; }
    .elm-persona-actions { display: flex; gap: 6px; }
    .elm-persona-actions button { background: none; border: none; color: #888; cursor: pointer; font-size: 12px; padding: 2px 6px; }
    .elm-persona-actions button:hover { color: #e0e0e0; }
    .elm-persona-body { padding: 0 14px 14px; }
    .elm-persona-body.collapsed { display: none; }
    .elm-factor-row { display: grid; grid-template-columns: 1fr 120px 60px 30px; gap: 8px; align-items: center; margin-bottom: 6px; }
    .elm-factor-row input { background: #12121e; border: 1px solid #252535; color: #e0e0e0; padding: 5px 8px; border-radius: 4px; font-size: 12px; }
    .elm-factor-row select { background: #12121e; border: 1px solid #252535; color: #e0e0e0; padding: 5px 4px; border-radius: 4px; font-size: 11px; }
    .elm-factor-row button { background: none; border: none; color: #666; cursor: pointer; font-size: 14px; }
    .elm-factor-row button:hover { color: #ef4444; }
    .elm-layer-factor-row { display: flex; flex-direction: column; background: #16162a; border: 1px solid #252535; border-radius: 6px; padding: 10px; margin-bottom: 10px; }
    .elm-layer-factor-row input { flex: 1; min-width: 0; }
    .elm-factor-section { margin-bottom: 12px; }
    .elm-add-btn { background: none; border: 1px dashed #3a3a4a; color: #888; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; width: 100%; text-align: center; margin-top: 8px; }
    .elm-add-btn:hover { border-color: #ff9800; color: #ff9800; }
    .elm-factor-section-label { color: #aaa; font-size: 11px; font-weight: 600; text-transform: uppercase; margin: 10px 0 6px; letter-spacing: 0.5px; }
    .elm-delete-btn { background: none; border: 1px solid #ef4444; color: #ef4444; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
    .elm-delete-btn:hover { background: #ef4444; color: #fff; }
    .layer-active-indicator {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #2a2a3a;
      font-size: 12px;
      color: #888;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .layer-active-indicator .active-layer-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .layer-active-indicator .active-layer-name { color: #e0e0e0; font-weight: 500; }

    /* Layer modal */
    .layer-modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    .layer-modal-overlay.open { display: flex; }
    .layer-modal {
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 12px;
      padding: 24px;
      width: 80vw;
      max-width: 80vw;
      box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    }
    .layer-modal h3 { color: #e0e0e0; margin-bottom: 16px; font-size: 16px; }
    .layer-modal label { display: block; color: #aaa; font-size: 12px; margin-bottom: 4px; margin-top: 12px; }
    .layer-modal input, .layer-modal textarea {
      width: 100%;
      background: #14141e;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      color: #e0e0e0;
      padding: 8px 10px;
      font-size: 13px;
      font-family: inherit;
    }
    .layer-modal input:focus, .layer-modal textarea:focus { outline: none; border-color: #e040fb; }
    .layer-modal textarea { resize: vertical; min-height: 60px; }
    .layer-modal .color-picker-row { display: flex; align-items: center; gap: 8px; }
    .layer-modal .color-picker-row input[type="color"] {
      width: 40px; height: 32px; padding: 2px; border-radius: 6px; cursor: pointer;
    }
    .layer-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
    .layer-modal-actions button {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .layer-modal-actions .btn-cancel { background: #2a2a3a; border: 1px solid #3a3a4a; color: #aaa; }
    .layer-modal-actions .btn-cancel:hover { background: #3a3a4a; }
    .layer-modal-actions .btn-create { background: #e040fb; border: 1px solid #e040fb; color: #fff; }
    .layer-modal-actions .btn-create:hover { background: #c030d8; }

    /* ── Layer topic editor modal (tabbed) ── */
    .layer-extend-modal {
      width: 80vw;
      max-width: 80vw;
      height: 88vh;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
    }
    .layer-extend-modal .lem-header {
      padding: 18px 24px 0;
      flex-shrink: 0;
    }
    .layer-extend-modal .lem-header h3 { margin: 0 0 2px; font-size: 15px; color: #e0e0e0; }
    .layer-extend-modal .lem-header p { margin: 0; color: #777; font-size: 12px; }

    /* Tabs */
    .lem-tabs {
      display: flex;
      gap: 0;
      padding: 12px 24px 0;
      flex-shrink: 0;
      overflow-x: auto;
      border-bottom: 1px solid #2a2a3a;
    }
    .lem-tab {
      padding: 8px 16px;
      font-size: 12px;
      color: #777;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
      position: relative;
    }
    .lem-tab:hover { color: #bbb; }
    .lem-tab.active {
      color: #e040fb;
      border-bottom-color: #e040fb;
    }
    .lem-tab .tab-badge {
      display: inline-block;
      background: #e040fb;
      color: #fff;
      font-size: 9px;
      padding: 1px 5px;
      border-radius: 8px;
      margin-left: 5px;
      min-width: 14px;
      text-align: center;
    }

    /* Tab content area */
    .lem-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
    }
    .lem-tab-content { display: none; }
    .lem-tab-content.active { display: block; }

    /* General tab: two-column layout */
    .lem-general-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .lem-general-grid .lem-field { }
    .lem-general-grid .lem-field.full-width { grid-column: 1 / -1; }
    .lem-field label {
      display: block;
      color: #888;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 5px;
    }
    .lem-field input, .lem-field textarea, .lem-field select {
      width: 100%;
      background: #14141e;
      border: 1px solid #2a2a3a;
      border-radius: 6px;
      color: #e0e0e0;
      padding: 9px 12px;
      font-size: 13px;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    .lem-field input:focus, .lem-field textarea:focus { outline: none; border-color: #e040fb; }
    .lem-field textarea { resize: vertical; min-height: 70px; }

    /* Array tab: item cards */
    .lem-items-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .lem-items-header span { color: #888; font-size: 12px; }
    .lem-base-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed #2a2a3a; }
    .lem-base-section-label { color: #666; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .lem-base-item { background: #111120; border: 1px solid #1e1e30; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; opacity: 0.7; }
    .lem-base-item:hover { opacity: 0.9; }
    .lem-base-item .lem-base-name { color: #aaa; font-size: 13px; font-weight: 500; }
    .lem-base-item .lem-base-detail { color: #666; font-size: 11px; margin-top: 3px; }
    .lem-base-item .lem-base-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 6px; }
    .lem-base-item .lem-base-kv { font-size: 11px; }
    .lem-base-item .lem-base-kv .k { color: #555; }
    .lem-base-item .lem-base-kv .v { color: #888; }
    .lem-base-subarray { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #1e1e30; }
    .lem-base-subarray-label { color: #5a5a7a; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
    .lem-base-subitem { background: #0c0c18; border: 1px solid #181828; border-radius: 6px; padding: 7px 10px; margin-bottom: 5px; }
    .lem-base-subname { color: #8a8aaa; font-size: 12px; font-weight: 500; }
    .lem-base-subfields { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 4px; }
    .lem-base-subfields .lem-base-kv { font-size: 10px; }
    .lem-base-subfields .lem-base-kv .k { color: #4a4a60; }
    .lem-base-subfields .lem-base-kv .v { color: #7a7a90; word-break: break-word; }
    .lem-base-general { background: #111120; border: 1px solid #1e1e30; border-radius: 8px; padding: 14px; margin-bottom: 16px; opacity: 0.7; }
    .lem-base-general .lem-bg-label { color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
    .lem-base-general .lem-bg-value { color: #aaa; font-size: 13px; margin-bottom: 8px; }
    .lem-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #1a1a2e;
      border: 1px dashed #e040fb55;
      border-radius: 8px;
      color: #e040fb;
      cursor: pointer;
      padding: 7px 14px;
      font-size: 12px;
      transition: all 0.15s;
    }
    .lem-add-btn:hover { background: #22223a; border-color: #e040fb; }

    /* Item card */
    .lem-item-card {
      background: #16162a;
      border: 1px solid #2a2a3a;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color 0.15s;
    }
    .lem-item-card:hover { border-color: #3a3a5a; }
    .lem-item-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #1a1a30;
      border-bottom: 1px solid #2a2a3a;
      cursor: pointer;
      user-select: none;
    }
    .lem-item-card-header .card-title {
      font-size: 13px;
      color: #ccc;
      font-weight: 500;
    }
    .lem-item-card-header .card-actions {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .lem-item-card-header .card-toggle {
      color: #666;
      font-size: 11px;
      transition: transform 0.2s;
    }
    .lem-item-card-header .card-toggle.open { transform: rotate(90deg); }
    .lem-card-remove {
      background: none;
      border: none;
      color: #f5a0a0;
      cursor: pointer;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .lem-card-remove:hover { background: #3a1a1a; }
    .lem-item-card-body {
      padding: 14px;
    }
    .lem-item-card-body.collapsed { display: none; }

    /* Fields inside cards: natural flowing layout */
    .lem-card-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .lem-card-field { }
    .lem-card-field.wide { grid-column: 1 / -1; }
    .lem-card-field label {
      display: block;
      color: #666;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 3px;
    }
    .lem-card-field input, .lem-card-field textarea, .lem-card-field select {
      width: 100%;
      background: #12121e;
      border: 1px solid #252535;
      border-radius: 5px;
      color: #e0e0e0;
      padding: 7px 10px;
      font-size: 12px;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    .lem-card-field input:focus, .lem-card-field textarea:focus { outline: none; border-color: #e040fb; }
    .lem-card-field textarea { resize: vertical; min-height: 50px; }

    /* Sub-sections within cards (strategies, milestones, etc.) */
    .lem-sub-section {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid #252535;
    }
    .lem-sub-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .lem-sub-header span { color: #777; font-size: 11px; font-weight: 500; }
    .lem-sub-add-btn {
      background: none;
      border: 1px dashed #3a3a5a;
      border-radius: 6px;
      color: #888;
      cursor: pointer;
      padding: 3px 10px;
      font-size: 10px;
      transition: all 0.15s;
    }
    .lem-sub-add-btn:hover { border-color: #e040fb; color: #e040fb; }
    .lem-sub-item {
      background: #12121e;
      border: 1px solid #1e1e30;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 8px;
      position: relative;
    }
    .lem-sub-item .lem-card-fields {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .lem-sub-remove {
      position: absolute;
      top: 6px;
      right: 8px;
      background: none;
      border: none;
      color: #f5a0a0;
      cursor: pointer;
      font-size: 10px;
    }

    /* Footer */
    .lem-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 14px 24px;
      border-top: 1px solid #2a2a3a;
      flex-shrink: 0;
    }

    /* Context menu */
    .context-menu {
      position: fixed;
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      padding: 4px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      z-index: 1000;
      display: none;
    }

    .context-menu-item {
      padding: 8px 16px;
      cursor: pointer;
      font-size: 0.85rem;
      white-space: nowrap;
    }

    .context-menu-item:hover {
      background: #2a2a3a;
    }

    .context-menu-item.disabled {
      color: #666;
      cursor: not-allowed;
    }

    .context-menu-sub {
      position: relative;
    }

    .context-menu-sub > .context-menu-label {
      padding: 8px 16px;
      cursor: default;
      font-size: 0.85rem;
      white-space: nowrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .context-menu-sub > .context-menu-label::after {
      content: '▸';
      margin-left: 12px;
      font-size: 0.7rem;
      color: #888;
    }

    .context-menu-sub:hover > .context-menu-label {
      background: #2a2a3a;
    }

    .context-menu-sub > .context-submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -4px;
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      padding: 4px 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      z-index: 1001;
    }

    .context-menu-sub:hover > .context-submenu {
      display: block;
    }

    /* Loading overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      display: none;
    }

    .loading-content {
      background: #1a1a24;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid #3a3a4a;
      border-top-color: #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 15px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Toast notifications */
    .toast-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 3000;
    }

    .toast {
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      padding: 12px 20px;
      border-radius: 8px;
      margin-top: 10px;
      animation: slideIn 0.3s ease;
    }

    .toast.success {
      border-left: 3px solid #10b981;
    }

    .toast.error {
      border-left: 3px solid #ef4444;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Batch progress panel */
    .batch-progress {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 400px;
      min-width: 300px;
      max-width: 800px;
      height: 900px;
      min-height: 450px;
      max-height: 1800px;
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      z-index: 1500;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    .batch-progress.active {
      display: flex;
    }

    .batch-progress-header {
      padding: 12px 15px;
      background: #2a2a3a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #3a3a4a;
      cursor: move;
      user-select: none;
    }

    .batch-progress-title {
      font-weight: 600;
      font-size: 14px;
    }

    .batch-progress-buttons {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .batch-progress-stop {
      background: #ef4444;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 4px;
      font-weight: 500;
    }

    .batch-progress-stop:hover {
      background: #dc2626;
    }

    .batch-progress-stop:disabled {
      background: #4a4a5a;
      cursor: not-allowed;
    }

    .batch-progress-pause {
      background: #3b82f6;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 4px;
      margin-right: 6px;
    }

    .batch-progress-pause:hover {
      background: #2563eb;
    }

    .batch-progress-pause:disabled {
      background: #4a4a5a;
      cursor: not-allowed;
    }

    .batch-progress-pause.paused {
      background: #22c55e;
    }

    .batch-progress-pause.paused:hover {
      background: #16a34a;
    }

    .batch-progress-collapse {
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      font-size: 14px;
      padding: 2px 6px;
      transition: transform 0.2s;
    }

    .batch-progress-collapse:hover {
      color: #fff;
    }

    .batch-progress.collapsed {
      height: auto !important;
      min-height: unset;
    }

    .batch-progress.collapsed .batch-progress-collapse {
      transform: rotate(180deg);
    }

    .batch-progress.collapsed .batch-progress-body {
      display: none;
    }

    .batch-progress.collapsed .batch-progress-resize-corner {
      display: none;
    }

    .batch-progress-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .batch-progress-resize-corner {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      cursor: nwse-resize;
      background: linear-gradient(135deg, transparent 50%, #6366f1 50%);
      opacity: 0.5;
      z-index: 10;
    }

    .batch-progress-resize-corner:hover {
      opacity: 1;
    }

    .batch-progress-stats {
      flex-shrink: 0;
      padding: 10px 15px;
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #888;
      border-bottom: 1px solid #3a3a4a;
    }

    .batch-stat {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .batch-stat-value {
      color: #fff;
      font-weight: 600;
    }

    .batch-stat.completed .batch-stat-value { color: #10b981; }
    .batch-stat.pending .batch-stat-value { color: #f59e0b; }
    .batch-stat.failed .batch-stat-value { color: #ef4444; }
    .batch-stat.active .batch-stat-value { color: #3b82f6; }
    .batch-stat.api .batch-stat-value { color: #a78bfa; }
    .batch-stat.logged .batch-filter-icon { color: #6b7280; }

    .batch-filter-toggle { cursor: pointer; user-select: none; }
    .batch-filter-toggle:hover { opacity: 0.8; }
    .batch-filter-toggle.filtered { opacity: 0.5; }
    .batch-filter-toggle.filtered span:not(.batch-filter-icon) { text-decoration: line-through; }

    .batch-progress-bar {
      height: 4px;
      background: #3a3a4a;
    }

    .batch-progress-bar {
      flex-shrink: 0;
    }

    .batch-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #3b82f6);
      transition: width 0.3s ease;
    }

    .batch-progress-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }

    .batch-item {
      padding: 6px 15px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .batch-item-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .batch-item-status.pending { background: #f59e0b; }
    .batch-item-status.processing { background: #3b82f6; animation: pulse 1s infinite; }
    .batch-item-status.completed { background: #10b981; }
    .batch-item-status.failed { background: #ef4444; }
    .batch-item-status.skipped { background: #666; }

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

    .batch-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .batch-item-urgency {
      color: #f59e0b;
      font-size: 10px;
      font-weight: 600;
      background: rgba(245, 158, 11, 0.15);
      padding: 0 4px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    .batch-item-score {
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      background: rgba(255,255,255,0.08);
      padding: 1px 5px;
      border-radius: 3px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .batch-item-cycle {
      color: #a78bfa;
      font-size: 10px;
      font-weight: 600;
      background: rgba(167, 139, 250, 0.15);
      padding: 0 4px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .batch-item-log-btn {
      font-size: 12px;
      cursor: pointer;
      opacity: 0.5;
      flex-shrink: 0;
      padding: 0 2px;
    }
    .batch-item-log-btn:hover { opacity: 1; }

    /* ── Batch Item Log Modal ── */
    .batch-log-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 6000;
      display: flex; align-items: center; justify-content: center;
    }
    .batch-log-modal-content {
      background: #1a1a2e;
      border: 1px solid #333;
      border-radius: 8px;
      width: 95vw; max-width: 1200px;
      max-height: 85vh;
      display: flex; flex-direction: column;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .batch-log-modal-header {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid #333;
      flex-shrink: 0;
    }
    .batch-log-modal-title {
      font-size: 14px; font-weight: 600; color: #e2e8f0;
      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .batch-log-modal-totals {
      display: flex; gap: 12px; font-size: 11px; color: #94a3b8;
      font-variant-numeric: tabular-nums;
    }
    .batch-log-modal-totals span { white-space: nowrap; }
    .batch-log-modal-copy {
      background: rgba(255,255,255,0.08); border: 1px solid #444; color: #94a3b8;
      font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
    }
    .batch-log-modal-copy:hover { background: rgba(255,255,255,0.15); color: #e2e8f0; }
    .batch-log-modal-close {
      background: none; border: none; color: #888; font-size: 20px;
      cursor: pointer; padding: 0 4px; line-height: 1;
    }
    .batch-log-modal-close:hover { color: #fff; }
    .batch-log-modal-body {
      overflow: auto; flex: 1;
      padding: 0;
    }
    .batch-log-modal-empty {
      padding: 40px; text-align: center; color: #666; font-size: 13px;
    }
    #batch-log-modal-table {
      width: 100%; border-collapse: collapse;
      font-size: 11px; color: #cbd5e1;
    }
    #batch-log-modal-table thead {
      position: sticky; top: 0; z-index: 1;
      background: #16213e;
    }
    #batch-log-modal-table th {
      padding: 6px 8px; text-align: left;
      font-weight: 600; color: #94a3b8;
      border-bottom: 2px solid #333;
      white-space: nowrap; font-size: 10px; text-transform: uppercase;
    }
    #batch-log-modal-table td {
      padding: 4px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 250px;
    }
    #batch-log-modal-table td.num {
      text-align: right; font-variant-numeric: tabular-nums;
      font-family: monospace; font-size: 10px;
    }
    #batch-log-modal-table tr:hover { background: rgba(255,255,255,0.03); }
    #batch-log-modal-table tr.log-row-error { background: rgba(239,68,68,0.1); }
    #batch-log-modal-table tr.log-row-error td { color: #f87171; }
    #batch-log-modal-table tr.log-row-summary { background: rgba(34,197,94,0.08); }
    #batch-log-modal-table tr.log-row-summary td { color: #86efac; font-weight: 600; }

    .batch-item-action {
      color: #888;
      font-size: 11px;
    }

    .batch-item-duration {
      color: #68d391;
      font-size: 10px;
      font-family: monospace;
      min-width: 45px;
      text-align: right;
    }

    .batch-item-duration.slow {
      color: #f59e0b;
    }

    /* Draggable batch items */
    .batch-item.draggable {
      cursor: grab;
      transition: background 0.15s, transform 0.15s;
    }

    .batch-item.draggable:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .batch-item.draggable:active {
      cursor: grabbing;
    }

    .batch-item.dragging {
      opacity: 0.5;
      background: rgba(59, 130, 246, 0.2);
    }

    .batch-item.drag-over {
      border-top: 2px solid #3b82f6;
      margin-top: -2px;
    }

    .batch-item-drag-handle {
      color: #666;
      font-size: 10px;
      margin-right: 2px;
      cursor: grab;
    }

    .batch-item.draggable .batch-item-drag-handle:hover {
      color: #888;
    }

    .batch-item-remove {
      color: #666;
      font-size: 14px;
      cursor: pointer;
      padding: 0 4px;
      opacity: 0;
      transition: opacity 0.15s;
    }

    .batch-item.draggable:hover .batch-item-remove {
      opacity: 1;
    }

    .batch-item-remove:hover {
      color: #ef4444;
    }

    /* Batch action buttons */
    .batch-buttons {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .batch-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 12px;
      border: 1px solid #3a3a4a;
      background: #2a2a3a;
      color: #e0e0e0;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .batch-btn:hover:not(:disabled) {
      background: #3a3a4a;
      border-color: #4a4a5a;
    }

    .batch-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Server Batch Indicator (floating badge) */
    .server-batch-indicator {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #1e293b;
      border: 1px solid #3b82f6;
      border-radius: 20px;
      padding: 6px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      z-index: 1600;
      box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
      transition: all 0.2s;
      font-size: 12px;
      color: #e0e0e0;
    }

    .server-batch-indicator:hover {
      background: #2a3a5a;
      border-color: #60a5fa;
      box-shadow: 0 2px 16px rgba(59, 130, 246, 0.5);
    }

    .server-batch-icon {
      color: #3b82f6;
      font-size: 13px;
    }

    .server-batch-count {
      font-weight: 700;
      color: #60a5fa;
    }

    .server-batch-indicator.has-active {
      animation: server-batch-pulse 2s ease-in-out infinite;
    }

    @keyframes server-batch-pulse {
      0%, 100% { box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3); }
      50% { box-shadow: 0 2px 20px rgba(59, 130, 246, 0.6); }
    }

    /* Server Batch Panel */
    .server-batch-panel {
      position: fixed;
      bottom: 60px;
      right: 20px;
      width: 420px;
      max-height: 500px;
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      z-index: 1599;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    .server-batch-panel.active {
      display: flex;
    }

    .server-batch-panel-header {
      padding: 12px 15px;
      background: #2a2a3a;
      border-bottom: 1px solid #3a3a4a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 14px;
    }

    .server-batch-panel-header > div {
      display: flex;
      gap: 6px;
    }

    .server-batch-refresh,
    .server-batch-close {
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      font-size: 14px;
      padding: 2px 6px;
    }

    .server-batch-refresh:hover,
    .server-batch-close:hover {
      color: #fff;
    }

    .server-batch-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;
    }

    .server-batch-empty {
      padding: 20px;
      text-align: center;
      color: #666;
      font-size: 13px;
    }

    .server-batch-card {
      padding: 10px 15px;
      border-bottom: 1px solid #2a2a3a;
    }

    .server-batch-card:hover {
      background: rgba(255,255,255,0.03);
    }

    .server-batch-card.connected {
      border-left: 2px solid #4ade80;
      background: rgba(74, 222, 128, 0.05);
    }

    .server-batch-card:last-child {
      border-bottom: none;
    }

    .server-batch-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .server-batch-card-title {
      font-size: 13px;
      font-weight: 600;
      color: #e0e0e0;
    }

    .server-batch-card-status {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 500;
    }

    .server-batch-card-status.running { background: #1e3a5f; color: #60a5fa; }
    .server-batch-card-status.paused { background: #3a3020; color: #f59e0b; }
    .server-batch-card-status.pending { background: #2a2a3a; color: #888; }
    .server-batch-card-status.completed { background: #1a3a2a; color: #4ade80; }
    .server-batch-card-status.failed { background: #3a1a1a; color: #ef4444; }
    .server-batch-card-status.stopped { background: #2a2a3a; color: #888; }

    .server-batch-card-progress {
      height: 4px;
      background: #3a3a4a;
      border-radius: 2px;
      margin-bottom: 6px;
    }

    .server-batch-card-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #3b82f6, #10b981);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .server-batch-card-stats {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: #888;
    }

    .server-batch-card-stats span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .server-batch-card-stats .completed { color: #10b981; }
    .server-batch-card-stats .failed { color: #ef4444; }
    .server-batch-card-stats .pending { color: #f59e0b; }

    .server-batch-card-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .server-batch-card-actions button {
      padding: 3px 10px;
      font-size: 10px;
      border: 1px solid #3a3a4a;
      background: #2a2a3a;
      color: #ccc;
      border-radius: 3px;
      cursor: pointer;
    }

    .server-batch-card-actions button:hover {
      background: #3a3a4a;
      color: #fff;
    }

    .server-batch-card-actions button.danger:hover {
      background: #7f1d1d;
      border-color: #ef4444;
      color: #ef4444;
    }

    /* OpenAI Batch Jobs Panel */
    .batch-jobs-panel {
      position: fixed;
      top: 80px;
      right: 20px;
      width: 340px;
      background: #1e1e2e;
      border: 1px solid #3a3a4a;
      border-radius: 8px;
      z-index: 1500;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      display: none;
    }

    .batch-jobs-header {
      padding: 12px 15px;
      background: #2a2a3a;
      border-bottom: 1px solid #3a3a4a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px 8px 0 0;
      cursor: move;
      user-select: none;
    }

    .batch-jobs-header h4 {
      margin: 0;
      font-size: 13px;
      color: #e0e0e0;
    }

    #batch-jobs-list {
      padding: 10px 15px;
      max-height: 400px;
      overflow-y: auto;
    }

    .batch-job-item {
      margin: 8px 0;
      padding: 12px;
      background: #1a1a24;
      border-radius: 6px;
      border: 1px solid #2a2a3a;
    }

    .batch-job-item .job-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .batch-job-item .job-status {
      font-weight: 500;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
    }

    .batch-job-item .job-status.validating { background: #78350f; color: #fbbf24; }
    .batch-job-item .job-status.in_progress { background: #1e3a5f; color: #60a5fa; }
    .batch-job-item .job-status.completed { background: #14532d; color: #4ade80; }
    .batch-job-item .job-status.failed { background: #7f1d1d; color: #f87171; }

    .batch-job-item .job-progress {
      height: 4px;
      background: #3a3a4a;
      border-radius: 2px;
      margin: 8px 0;
      overflow: hidden;
    }

    .batch-job-item .job-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #3b82f6);
      transition: width 0.3s ease;
    }

    .batch-job-item .job-details {
      font-size: 11px;
      color: #888;
      display: flex;
      gap: 12px;
      margin-top: 6px;
    }

    .batch-job-item .job-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }

    .batch-job-item .job-actions button {
      flex: 1;
      padding: 6px 10px;
      font-size: 11px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }

    .batch-job-item .btn-download {
      background: #10b981;
      color: white;
    }

    .batch-job-item .btn-download:hover {
      background: #059669;
    }

    .batch-job-item .btn-cancel {
      background: #ef4444;
      color: white;
    }

    .batch-job-item .btn-cancel:hover {
      background: #dc2626;
    }

    .batch-job-item .btn-remove {
      background: #4a4a5a;
      color: #ccc;
    }

    .batch-job-item .btn-remove:hover {
      background: #5a5a6a;
    }

    #batch-jobs-list {
      padding: 10px 15px;
      max-height: 300px;
      overflow-y: auto;
    }

    .batch-btn.primary {
      background: #3b82f6;
      border-color: #3b82f6;
    }

    .batch-btn.primary:hover:not(:disabled) {
      background: #2563eb;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .controls input {
      flex: 1;
      padding: 8px 12px;
      background: #1a1a24;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      color: #e0e0e0;
      font-size: 0.85rem;
    }

    .controls input:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .stats {
      font-size: 0.8rem;
      color: #888;
      margin-bottom: 15px;
    }

    /* Provider selector */
    .provider-section {
      margin-bottom: 15px;
      padding: 12px;
      background: #1a1a24;
      border-radius: 8px;
    }

    .provider-section label {
      display: block;
      font-size: 0.8rem;
      color: #888;
      margin-bottom: 6px;
    }

    .provider-section select {
      width: 100%;
      padding: 8px 10px;
      background: #12121a;
      border: 1px solid #3a3a4a;
      border-radius: 6px;
      color: #e0e0e0;
      font-size: 0.85rem;
      cursor: pointer;
    }

    .provider-section select:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .provider-status {
      margin-top: 8px;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .provider-status .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .provider-status .status-dot.online { background: #10b981; }
    .provider-status .status-dot.offline { background: #ef4444; }
    .provider-status .status-dot.checking { background: #f59e0b; animation: pulse 1s infinite; }

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

    .btn-copy {
      background: #7c3aed;
      color: white;
    }

    .btn-copy:hover {
      background: #6d28d9;
    }

    /* Modal overlay for choice dialogs */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.85);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3000;
      animation: fadeIn 0.2s ease;
    }

    .modal-content {
      background: #1a1a24;
      border-radius: 12px;
      padding: 24px;
      width: 80vw;
      max-width: 80vw;
      border: 1px solid #3a3a4a;
      animation: slideUp 0.2s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .copy-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000;
    }

    .copy-modal.active {
      display: flex;
    }

    .copy-modal-content {
      background: #1a1a24;
      border-radius: 12px;
      padding: 24px;
      width: 80vw;
      max-width: 80vw;
      max-height: 80vh;
      overflow-y: auto;
      border: 1px solid #3a3a4a;
    }

    .copy-modal-content h3 {
      margin-bottom: 16px;
      color: #fff;
    }

    .copy-modal-content pre {
      background: #12121a;
      padding: 16px;
      border-radius: 8px;
      overflow-x: auto;
      font-size: 0.85rem;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .copy-modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      justify-content: flex-end;
    }

    /* Right sidebar for file content */
    #right-sidebar {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0;
      background: #12121a;
      border-left: 1px solid #2a2a3a;
      overflow-y: auto;
      transition: width 0.3s ease;
      display: flex;
      flex-direction: column;
      z-index: 50;
    }

    #right-sidebar.open {
      width: 400px;
    }

    .right-sidebar-header {
      padding: 16px;
      border-bottom: 1px solid #2a2a3a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1a1a24;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .right-sidebar-header h3 {
      font-size: 1rem;
      color: #fff;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .right-sidebar-close {
      background: none;
      border: none;
      color: #888;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0 8px;
    }

    .right-sidebar-close:hover {
      color: #fff;
    }

    /* Node info section in right sidebar */
    .right-sidebar-node-info {
      padding: 16px;
      border-bottom: 1px solid #2a2a3a;
    }

    .right-sidebar-node-info h3 {
      font-size: 1.1rem;
      margin-bottom: 12px;
      color: #fff;
    }

    .right-sidebar-node-info .info-row {
      margin-bottom: 10px;
      font-size: 0.85rem;
    }

    .right-sidebar-node-info .info-label {
      color: #888;
      display: block;
      margin-bottom: 2px;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .right-sidebar-node-info .info-value {
      color: #e0e0e0;
    }

    .right-sidebar-node-info .info-value.status-has-children {
      color: #f59e0b;
    }

    .right-sidebar-node-info .info-value.status-has-file {
      color: #10b981;
    }

    .right-sidebar-node-info .node-actions {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .right-sidebar-node-info .node-actions .btn {
      width: 100%;
    }

    /* Tabs for right sidebar */
    .right-sidebar-tabs {
      display: flex;
      border-bottom: 1px solid #2a2a3a;
      background: #16161e;
    }

    .right-sidebar-tab {
      flex: 1;
      padding: 12px 16px;
      background: transparent;
      border: none;
      color: #888;
      font-size: 13px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.2s;
    }

    .right-sidebar-tab:hover {
      color: #ccc;
      background: #1a1a24;
    }

    .right-sidebar-tab.active {
      color: #fff;
      border-bottom-color: #3b82f6;
    }

    .right-sidebar-tab-content {
      display: none;
      flex: 1;
      overflow-y: auto;
    }

    .right-sidebar-tab-content.active {
      display: block;
    }

    .streaming-indicator {
      color: #f59e0b;
      animation: pulse 1s infinite;
      margin-right: 6px;
    }

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

    .right-sidebar-content {
      padding: 12px;
      flex: 1;
      overflow-y: auto;
    }

    /* Tree view styles */
    .tree-node {
      margin-left: 0;
    }

    .tree-node .tree-node {
      margin-left: 16px;
    }

    .tree-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      padding: 4px 0;
      font-size: 0.8rem;
      line-height: 1.4;
    }

    .tree-toggle {
      cursor: pointer;
      color: #888;
      font-size: 0.7rem;
      width: 14px;
      flex-shrink: 0;
      user-select: none;
      padding-top: 2px;
    }

    .tree-toggle:hover {
      color: #fff;
    }

    .tree-toggle.empty {
      visibility: hidden;
    }

    .tree-key {
      color: #f59e0b;
      font-weight: 500;
      flex-shrink: 0;
    }

    .tree-value {
      color: #e0e0e0;
      word-break: break-word;
    }

    .tree-value.string {
      color: #10b981;
    }

    .tree-value.number {
      color: #3b82f6;
    }

    .tree-value.boolean {
      color: #ec4899;
    }

    .tree-value.null {
      color: #6b7280;
      font-style: italic;
    }

    .tree-array-badge {
      color: #888;
      font-size: 0.7rem;
      margin-left: 4px;
    }

    .tree-children {
      display: none;
    }

    .tree-children.expanded {
      display: block;
    }

    .tree-section {
      margin-bottom: 8px;
      border-bottom: 1px solid #2a2a3a;
      padding-bottom: 8px;
    }

    .tree-section:last-child {
      border-bottom: none;
    }

    .tree-section-header {
      font-size: 0.75rem;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      padding: 4px 0;
    }

    /* Quality issues in right sidebar */
    .quality-issues-section {
      margin-bottom: 16px;
      padding: 12px;
      background: #1a0a0a;
      border: 1px solid #ef4444;
      border-radius: 8px;
    }

    .quality-issues-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #ef4444;
      margin-bottom: 10px;
    }

    .quality-score-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .quality-score-badge.good {
      background: rgba(16, 185, 129, 0.2);
      color: #10b981;
    }

    .quality-score-badge.warning {
      background: rgba(245, 158, 11, 0.2);
      color: #f59e0b;
    }

    .quality-score-badge.bad {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    .quality-issues-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .quality-issues-list li {
      position: relative;
      padding: 6px 0 6px 16px;
      font-size: 0.8rem;
      color: #f5a0a0;
      border-bottom: 1px solid #2a1a1a;
    }

    .quality-issues-list li:last-child {
      border-bottom: none;
    }

    .quality-issues-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: #ef4444;
    }

    .quality-issues-list .issue-path {
      display: block;
      font-size: 0.7rem;
      color: #888;
      font-family: monospace;
      margin-top: 2px;
    }

    /* Missing field highlight in tree */
    .tree-key.missing {
      color: #ef4444;
      text-decoration: line-through;
    }

    .tree-value.missing {
      color: #ef4444;
      font-style: italic;
    }

/* Pulse animation for sync indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================
   BAR VISIBILITY TOGGLE WIDGET
   ============================================ */
#bar-toggle-widget {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 101;
  display: flex;
  gap: 4px;
  background: #1e1e2e;
  border: 1px solid #3a3a4a;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#bar-toggle-widget .bar-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #444;
  cursor: pointer;
  padding: 5px 7px;
  font-size: 12px;
  border-radius: 5px;
  transition: color 0.2s, background 0.2s;
}

#bar-toggle-widget .bar-toggle-btn:hover {
  background: #2a2a3a;
  color: #aaa;
}

#bar-toggle-widget .bar-toggle-btn.active {
  color: #888;
}

#bar-toggle-widget .bar-toggle-btn.active:hover {
  color: #e0e0e0;
}

/* Bar hide transitions */
#top-search-bar,
#bottom-toolbar,
#recognition-bar {
  transition: opacity 0.2s, transform 0.2s;
}

#top-search-bar.bar-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-20px);
}

#bottom-toolbar.bar-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

#recognition-bar.bar-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

/* ============================================
   RECOGNITION PROMPT BAR
   ============================================ */
#recognition-bar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e1e2e;
  border: 1px solid #3a3a4a;
  border-radius: 12px;
  padding: 6px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  min-width: 500px;
}

#recognition-bar .recognition-input-container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}

#recognition-bar .recognition-icon {
  color: #a855f7;
  font-size: 14px;
  padding: 8px;
}

#recognition-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e0e0e0;
  font-size: 14px;
  padding: 8px 4px;
  min-width: 300px;
}

#recognition-bar input::placeholder {
  color: #666;
}

#recognition-bar .recognition-clear-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#recognition-bar .recognition-clear-btn:hover {
  color: #e0e0e0;
}

.recognition-type-btn {
  background: transparent;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.recognition-type-btn:hover {
  border-color: #5a5a6a;
  color: #ccc;
}

.recognition-type-btn .recognition-type-count {
  background: #a855f7;
  color: #fff;
  font-size: 10px;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

.recognition-run-btn {
  background: #a855f7;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.recognition-run-btn:hover {
  background: #9333ea;
}

.recognition-run-btn:disabled {
  background: #4a4a5a;
  cursor: not-allowed;
}

/* Recognition Type Dropdown */
.recognition-type-dropdown {
  display: none;
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: #1e1e2e;
  border: 1px solid #3a3a4a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 280px;
}

.recognition-type-dropdown.open {
  display: block;
}

.recognition-type-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a3a;
}

.recognition-type-header-label {
  flex: 1;
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
}

.recognition-type-toggle {
  font-size: 11px;
  color: #a855f7;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  background: transparent;
  border: none;
  transition: background 0.15s;
}

.recognition-type-toggle:hover {
  background: #2a2a3a;
}

.recognition-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recognition-type-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.recognition-type-item:hover {
  background: #2a2a3a;
}

.recognition-type-item.selected {
  background: rgba(168, 85, 247, 0.15);
}

.recognition-type-item input[type="checkbox"] {
  accent-color: #a855f7;
}

.recognition-type-item label {
  flex: 1;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}

.recognition-type-item .type-description {
  color: #666;
  font-size: 11px;
}

/* Recognition highlight (purple - different from search gold) */
.node-label.recognition-highlight {
  fill: #a855f7 !important;
  font-weight: bold;
}

/* Recognition match section in sidebar */
.recognition-matches-section {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 6px;
}

.recognition-matches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #a855f7;
}

.recognition-match-item {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #1a1a2e;
  border-radius: 4px;
  font-size: 11px;
}

.recognition-match-type {
  color: #a855f7;
  font-weight: 500;
  margin-bottom: 2px;
}

.recognition-match-path {
  color: #888;
  font-size: 10px;
}

.recognition-match-text {
  color: #ccc;
  margin-top: 4px;
}

.recognition-match-highlight {
  background: rgba(168, 85, 247, 0.3);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Recognition Model Controls */
.recognition-model-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #3a3a4a;
}

.recognition-model-status {
  font-size: 10px;
  color: #888;
  white-space: nowrap;
}

.recognition-model-btn {
  background: transparent;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  padding: 6px 8px;
  font-size: 12px;
  transition: all 0.2s;
}

.recognition-model-btn:hover {
  border-color: #5a5a6a;
  color: #ccc;
}

/* Recognition Model Dropdown */
.recognition-model-dropdown {
  display: none;
  position: fixed;
  bottom: 140px;
  right: 20%;
  z-index: 200;
  background: #1e1e2e;
  border: 1px solid #3a3a4a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 320px;
  max-width: 400px;
}

.recognition-model-dropdown.open {
  display: block;
}

.recognition-model-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a3a;
  font-size: 13px;
  color: #aaa;
  font-weight: 500;
}

.recognition-model-reload-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.recognition-model-reload-btn:hover {
  background: #2a2a3a;
  color: #ccc;
}

.recognition-model-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.recognition-model-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #1a1a2e;
  border-radius: 6px;
  font-size: 12px;
}

.recognition-model-item .model-name {
  color: #e0e0e0;
  font-weight: 500;
}

.recognition-model-item .model-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.recognition-model-item .model-status.loaded {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.recognition-model-item .model-status.not-loaded {
  background: rgba(136, 136, 136, 0.2);
  color: #888;
}

.recognition-model-item .model-status.loading {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.recognition-model-item .model-count {
  font-size: 10px;
  color: #666;
  margin-left: 8px;
}

/* Recognition Results Button */
.recognition-results-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.recognition-results-btn:hover {
  filter: brightness(1.1);
}

#recognition-results-count {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.recognition-timing {
  padding: 4px 8px;
  font-family: monospace;
}

.recognition-status-text {
  padding: 4px 8px;
}

/* Recognition Results Dropdown */
.recognition-results-dropdown {
  display: none;
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: #1e1e2e;
  border: 1px solid #3a3a4a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 320px;
  max-width: 400px;
  max-height: 400px;
  overflow-y: auto;
}

.recognition-results-dropdown.open {
  display: block;
}

.recognition-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a3a;
  font-size: 13px;
  color: #aaa;
  font-weight: 500;
}

.recognition-results-close {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.2s;
}

.recognition-results-close:hover {
  background: #2a2a3a;
  color: #ccc;
}

.recognition-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recognition-prediction-card {
  padding: 10px 12px;
  background: #1a1a2e;
  border-radius: 8px;
  border: 1px solid #64b5f644;
}
.recognition-prediction-header {
  font-size: 11px;
  font-weight: 600;
  color: #64b5f6;
  margin-bottom: 8px;
}
.recognition-prediction-header i {
  margin-right: 4px;
}
.recognition-prediction-body {
  padding: 0;
}

.recognition-result-item {
  padding: 10px 12px;
  background: #1a1a2e;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.recognition-result-item:hover {
  background: #252538;
  border-color: #10b981;
}

.recognition-result-name {
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.recognition-result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.recognition-result-level {
  color: #a855f7;
  font-weight: 500;
}

.recognition-result-count {
  color: #888;
}

.recognition-result-confidence {
  font-weight: 600;
}

.recognition-model-actions {
  padding-top: 8px;
  border-top: 1px solid #2a2a3a;
}

.recognition-pipeline-btn {
  width: 100%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.recognition-pipeline-btn:hover {
  filter: brightness(1.1);
}

.recognition-pipeline-btn:disabled {
  background: #4a4a5a;
  cursor: not-allowed;
  filter: none;
}

.recognition-pipeline-section {
  padding-top: 12px;
  border-top: 1px solid #2a2a3a;
  margin-top: 8px;
}

.recognition-pipeline-header {
  font-size: 11px;
  font-weight: 600;
  color: #a855f7;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.recognition-pipeline-tier-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.recognition-pipeline-tier-select label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
  padding: 4px 0;
}

.recognition-pipeline-tier-select input[type="radio"] {
  accent-color: #a855f7;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.recognition-pipeline-type-select,
.recognition-pipeline-branch-select {
  margin-bottom: 10px;
}

.recognition-pipeline-type-select select,
.recognition-pipeline-branch-select select {
  width: 100%;
  background: #2a2a3a;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  color: #e0e0e0;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 5l3 3 3-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.recognition-pipeline-type-select select:hover,
.recognition-pipeline-branch-select select:hover {
  border-color: #a855f7;
}

.recognition-pipeline-type-select select:focus,
.recognition-pipeline-branch-select select:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* Pipeline stages progress display */
.recognition-pipeline-stages {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2a2a3a;
}

.recognition-pipeline-stages:empty {
  display: none;
}

.pipeline-stages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pipeline-stage {
  font-size: 11px;
  transition: all 0.2s ease;
}

.pipeline-stage.completed {
  color: #4ade80;
}

.pipeline-stage.running {
  color: #fbbf24;
}

.pipeline-stage.pending {
  color: #666;
  opacity: 0.6;
}

/* Quality level selector */
.recognition-quality-select {
  margin-bottom: 12px;
  padding: 10px;
  background: rgba(168, 85, 247, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.quality-level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quality-level-header span {
  font-size: 11px;
  font-weight: 600;
  color: #a855f7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quality-info-btn {
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 4px;
  color: #a855f7;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  transition: all 0.2s;
}

.quality-info-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: #a855f7;
}

.quality-level-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quality-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.quality-option:hover {
  background: rgba(168, 85, 247, 0.1);
}

.quality-option input[type="radio"] {
  accent-color: #a855f7;
  width: 14px;
  height: 14px;
  margin: 0;
}

.quality-label {
  font-size: 12px;
  font-weight: 500;
  color: #e0e0e0;
  min-width: 65px;
}

.quality-desc {
  font-size: 10px;
  color: #888;
}

/* Coverage statistics panel */
.quality-coverage-stats {
  margin-top: 10px;
  padding: 10px;
  background: #1e1e2e;
  border-radius: 6px;
  font-size: 11px;
}

.coverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a3a;
}

.coverage-header-title {
  font-weight: 600;
  color: #a855f7;
}

.coverage-close-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px;
}

.coverage-close-btn:hover {
  color: #e0e0e0;
}

.coverage-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.coverage-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  background: #2a2a3a;
  border-radius: 4px;
}

.coverage-stat-label {
  color: #888;
}

.coverage-stat-value {
  color: #e0e0e0;
  font-weight: 500;
}

.coverage-types {
  margin-top: 8px;
}

.coverage-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 10px;
}

.coverage-type-name {
  width: 90px;
  color: #ccc;
}

.coverage-type-bar {
  flex: 1;
  height: 6px;
  background: #2a2a3a;
  border-radius: 3px;
  overflow: hidden;
}

.coverage-type-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #a855f7);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.coverage-type-value {
  width: 50px;
  text-align: right;
  color: #888;
}

.coverage-cost-estimate {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #2a2a3a;
}

.coverage-cost-title {
  font-weight: 500;
  color: #fbbf24;
  margin-bottom: 6px;
}

.coverage-cost-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #888;
}

.coverage-cost-row span:last-child {
  color: #4ade80;
}

/* ── Analytics Dashboard ── */
.analytics-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.analytics-overlay.open { display: flex; }

.analytics-modal {
  background: #1e1e2e;
  border: none;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
}

.analytics-header {
  padding: 14px 20px;
  background: #2a2a3a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3a3a4a;
}
.analytics-header h3 { color: #e0e0e0; font-size: 15px; margin: 0; }
.analytics-header-controls { display: flex; align-items: center; gap: 12px; }
.analytics-stats { font-size: 11px; color: #888; }
.analytics-threshold-control {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #aaa;
}
.analytics-threshold-control input[type="range"] { width: 80px; cursor: pointer; }
.analytics-refresh-btn, .analytics-close-btn {
  background: none; border: none; color: #888;
  cursor: pointer; font-size: 16px; padding: 4px 8px;
}
.analytics-refresh-btn:hover, .analytics-close-btn:hover { color: #fff; }
.analytics-save-btn, .analytics-load-btn {
  background: none; border: 1px solid #3a3a4a; color: #aaa;
  cursor: pointer; font-size: 11px; padding: 4px 10px;
  border-radius: 4px; transition: all 0.15s;
}
.analytics-save-btn:hover { border-color: #10b981; color: #10b981; }
.analytics-load-btn:hover { border-color: #4a9eff; color: #4a9eff; }
#analytics-layer-select {
  background: #16161e; border: 1px solid #3a3a4a; color: #ccc;
  font-size: 11px; padding: 4px 8px; border-radius: 4px; cursor: pointer;
}
#analytics-layer-select:hover { border-color: #4a9eff; }

/* Tabs */
.analytics-tabs {
  display: flex;
  border-bottom: 1px solid #2a2a3a;
  background: #16161e;
}
.analytics-tab {
  flex: 1; padding: 10px 16px;
  background: transparent; border: none;
  color: #888; font-size: 12px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.analytics-tab:hover { color: #ccc; background: #1a1a24; }
.analytics-tab.active { color: #fff; border-bottom-color: #4a9eff; }
.analytics-tab-badge {
  background: #3a3a4a; color: #aaa;
  border-radius: 8px; padding: 1px 6px;
  font-size: 10px; margin-left: 4px;
}

/* Body */
.analytics-body { flex: 1; overflow-y: auto; padding: 0; }
.analytics-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 32px 40px; color: #888;
}
.analytics-loading-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: #ccc;
}
.analytics-progress-bar {
  width: 340px; height: 6px;
  background: #2a2a3a; border-radius: 3px; overflow: hidden;
}
.analytics-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a9eff, #60a5fa);
  border-radius: 3px; transition: width 0.15s ease; width: 0%;
}
.analytics-progress-stats {
  display: flex; justify-content: space-between; width: 340px;
  font-size: 12px; color: #aaa;
}
.analytics-progress-details {
  display: flex; justify-content: space-between; width: 340px;
  font-size: 11px; color: #666;
}
.analytics-progress-current {
  font-size: 10px; color: #555; max-width: 400px;
  text-align: center; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-height: 14px;
}
.analytics-progress-failures {
  font-size: 11px; color: #f59e0b;
}
.analytics-progress-failures i { margin-right: 4px; }
.analytics-cancel-btn {
  margin-top: 8px; padding: 6px 20px;
  background: transparent; border: 1px solid #3a3a4a;
  border-radius: 6px; color: #aaa; font-size: 12px;
  cursor: pointer; transition: all 0.15s;
}
.analytics-cancel-btn:hover {
  background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444;
}
.analytics-no-matrix {
  padding: 12px 20px; margin: 12px 20px;
  background: #1a1a28; border: 1px solid #3a3a4a;
  border-radius: 6px; color: #aaa; font-size: 12px;
}
.analytics-no-matrix i { color: #4a9eff; margin-right: 6px; }
.analytics-content { padding: 16px 20px; }

/* Chart container */
.analytics-chart-container {
  background: #14141e; border: 1px solid #2a2a3a;
  border-radius: 8px; padding: 12px; margin-bottom: 16px;
  min-height: 100px;
}

/* Cluster list */
.analytics-cluster-list { display: flex; flex-direction: column; gap: 8px; }
.analytics-cluster-card {
  background: #1a1a24; border: 1px solid #2a2a3a;
  border-radius: 8px; overflow: hidden;
}
.analytics-cluster-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background 0.15s;
}
.analytics-cluster-header:hover { background: #22222e; }
.analytics-cluster-toggle {
  color: #666; font-size: 10px;
  transition: transform 0.2s; min-width: 12px;
}
.analytics-cluster-card.expanded .analytics-cluster-toggle { transform: rotate(90deg); }
.analytics-cluster-name { font-weight: 600; font-size: 13px; color: #e0e0e0; flex: 1; }
.analytics-cluster-count {
  font-size: 11px; color: #888;
  background: #2a2a3a; padding: 2px 8px; border-radius: 4px;
}
.analytics-cluster-importance {
  font-size: 11px; color: #4a9eff; font-weight: 500;
  min-width: 50px; text-align: right;
}
.analytics-cluster-topics { display: flex; gap: 4px; flex-wrap: wrap; max-width: 300px; }
.analytics-cluster-topic-badge {
  font-size: 9px; padding: 1px 5px;
  border-radius: 3px; background: #2a2a3a; color: #aaa;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.analytics-cluster-body { padding: 0 14px 12px; display: none; }
.analytics-cluster-card.expanded .analytics-cluster-body { display: block; }

/* Template items */
.analytics-template-item {
  padding: 8px 10px; border-left: 3px solid #3a3a4a;
  margin-bottom: 6px; border-radius: 0 4px 4px 0; background: #16161e;
}
.analytics-template-item:hover { background: #1a1a28; }
.analytics-template-name { font-weight: 500; font-size: 12px; color: #e0e0e0; margin-bottom: 2px; }
.analytics-template-desc {
  font-size: 11px; color: #888; margin-bottom: 4px; line-height: 1.4;
  max-height: 2.8em; overflow: hidden;
}
.analytics-template-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; }
.analytics-meta-topic { color: #4a9eff; }
.analytics-meta-type { color: #e040fb; text-transform: uppercase; }
.analytics-meta-score { color: #10b981; font-weight: 500; }
.analytics-meta-badge {
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; text-transform: uppercase;
}
.analytics-meta-badge.critical { background: rgba(239,68,68,0.2); color: #ef4444; }
.analytics-meta-badge.high { background: rgba(245,158,11,0.2); color: #f59e0b; }
.analytics-meta-badge.medium { background: rgba(59,130,246,0.2); color: #3b82f6; }
.analytics-meta-badge.enhancement { background: rgba(16,185,129,0.2); color: #10b981; }
.analytics-meta-badge.public { background: rgba(16,185,129,0.2); color: #10b981; }
.analytics-meta-badge.restricted { background: rgba(245,158,11,0.2); color: #f59e0b; }
.analytics-meta-badge.paid { background: rgba(239,68,68,0.2); color: #ef4444; }
.analytics-meta-badge.mixed { background: rgba(139,92,246,0.2); color: #8b5cf6; }

/* Significance border colors */
.analytics-template-item[data-significance="critical"] { border-left-color: #ef4444; }
.analytics-template-item[data-significance="high"] { border-left-color: #f59e0b; }
.analytics-template-item[data-significance="medium"] { border-left-color: #3b82f6; }
.analytics-template-item[data-significance="enhancement"] { border-left-color: #10b981; }

/* Bubble highlight */
.analytics-cluster-card.flash { animation: analyticsFlash 0.6s ease; }
@keyframes analyticsFlash {
  0%, 100% { background: #1a1a24; }
  50% { background: #2a2a4a; }
}

/* Empty state */
.analytics-empty {
  text-align: center; padding: 40px; color: #666; font-size: 13px;
}
.analytics-empty i { font-size: 24px; display: block; margin-bottom: 8px; }

/* ============================================================
   Cost Statistics Dashboard
   ============================================================ */

.cost-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cost-stat-card {
  background: #2a2a3a;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cost-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #4ade80;
}
.cost-stat-value.neutral { color: #a5b4fc; }
.cost-stat-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cost-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid #334155;
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cost-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
}
.cost-table tr:hover td { background: #1e293b; }
.cost-table .cost-value { color: #4ade80; font-weight: 600; }
.cost-table .cost-duration { color: #60a5fa; }
.cost-table .cost-tokens { color: #a5b4fc; }
.cost-bar {
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.cost-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #60a5fa);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ============================================================
   Fullscreen Story Reader
   ============================================================ */

.story-reader-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5000;
  flex-direction: column;
  background: #faf9f6;
  color: #2c2c2c;
  font-family: Georgia, 'Times New Roman', serif;
}
.story-reader-overlay.open { display: flex; }

/* Toolbar */
.story-reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background: #f0efe8;
  border-bottom: 1px solid #ddd;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  flex-shrink: 0;
}
.story-reader-toolbar-left,
.story-reader-toolbar-center,
.story-reader-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.story-reader-toolbar-left { flex: 1; }
.story-reader-toolbar-right { flex: 1; justify-content: flex-end; }
.story-reader-toolbar-title {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-reader-toolbar button {
  background: transparent;
  border: none;
  color: #555;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.story-reader-toolbar button:hover { background: rgba(0,0,0,0.06); }

/* Search bar */
.story-reader-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f5f4ed;
  border-bottom: 1px solid #ddd;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  flex-shrink: 0;
}
.story-reader-search input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: #333;
  outline: none;
}
.story-reader-search input:focus { border-color: #3b82f6; }
.story-reader-search span {
  font-size: 12px;
  color: #888;
  min-width: 60px;
  text-align: center;
}
.story-reader-search button {
  background: transparent;
  border: none;
  color: #555;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.story-reader-search button:hover { background: rgba(0,0,0,0.06); }

/* Content area */
.story-reader-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}
.story-reader-content-inner {
  max-width: 80%;
  width: 100%;
}

/* Story header */
.story-reader-content-inner h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  line-height: 1.3;
}
.story-reader-abstract {
  font-style: italic;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.story-reader-meta {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  color: #999;
  margin-bottom: 24px;
}
.story-reader-hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 24px 0;
}

/* Section headings */
.story-reader-content-inner h2 {
  font-size: 20px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 28px 0 12px;
  line-height: 1.3;
}

/* Paragraphs (selectable) */
.story-reader-paragraph {
  font-size: 16px;
  line-height: 1.75;
  color: #2c2c2c;
  margin: 0 0 16px 0;
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.story-reader-paragraph:hover { background: rgba(59,130,246,0.04); }
.story-reader-paragraph.selected {
  background: rgba(59,130,246,0.08);
  border-left-color: #3b82f6;
}
.story-reader-paragraph.speaking {
  background: rgba(245,158,11,0.08);
  border-left-color: #f59e0b;
}

/* Font size presets */
.story-reader-size-s .story-reader-paragraph { font-size: 16px; line-height: 1.7; }
.story-reader-size-s h2 { font-size: 20px; }
.story-reader-size-s h1 { font-size: 28px; }
.story-reader-size-s .story-reader-abstract { font-size: 16px; }

.story-reader-size-m .story-reader-paragraph { font-size: 19px; line-height: 1.75; }
.story-reader-size-m h2 { font-size: 24px; }
.story-reader-size-m h1 { font-size: 32px; }
.story-reader-size-m .story-reader-abstract { font-size: 18px; }

.story-reader-size-l .story-reader-paragraph { font-size: 22px; line-height: 1.8; }
.story-reader-size-l h2 { font-size: 28px; }
.story-reader-size-l h1 { font-size: 36px; }
.story-reader-size-l .story-reader-abstract { font-size: 21px; }

.story-reader-size-xl .story-reader-paragraph { font-size: 26px; line-height: 1.85; }
.story-reader-size-xl h2 { font-size: 32px; }
.story-reader-size-xl h1 { font-size: 42px; }
.story-reader-size-xl .story-reader-abstract { font-size: 24px; }

.story-reader-size-2xl .story-reader-paragraph { font-size: 30px; line-height: 1.9; }
.story-reader-size-2xl h2 { font-size: 38px; }
.story-reader-size-2xl h1 { font-size: 48px; }
.story-reader-size-2xl .story-reader-abstract { font-size: 28px; }

.story-reader-size-3xl .story-reader-paragraph { font-size: 36px; line-height: 1.95; }
.story-reader-size-3xl h2 { font-size: 44px; }
.story-reader-size-3xl h1 { font-size: 56px; }
.story-reader-size-3xl .story-reader-abstract { font-size: 34px; }

/* Search highlights */
.story-reader-highlight {
  background: rgba(245,158,11,0.3);
  border-radius: 2px;
}
.story-reader-highlight.active {
  background: rgba(245,158,11,0.6);
}

/* Library panel */
.story-reader-library {
  position: absolute;
  top: 48px;
  left: 0;
  bottom: 0;
  width: 340px;
  background: #faf9f6;
  border-right: 1px solid #ddd;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 12px rgba(0,0,0,0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.story-reader-library-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  flex-shrink: 0;
}
.story-reader-library-header button {
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.story-reader-library-header button:hover { background: rgba(0,0,0,0.06); }
.story-reader-library-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.story-reader-library-item {
  padding: 12px;
  border: 1px solid #e8e8e0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.story-reader-library-item:hover { background: rgba(59,130,246,0.04); }
.story-reader-library-item-title {
  font-weight: 600;
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
  padding-right: 24px;
}
.story-reader-library-item-meta {
  font-size: 11px;
  color: #999;
}
.story-reader-library-item .story-reader-library-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.story-reader-library-item .story-reader-library-delete:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
}
.story-reader-library-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 13px;
}

/* Markdown elements inside paragraphs (light theme) */
.story-reader-paragraph strong { font-weight: 700; }
.story-reader-paragraph em { font-style: italic; }
.story-reader-paragraph blockquote {
  border-left: 2px solid #ccc;
  padding-left: 12px;
  color: #666;
  margin: 8px 0;
}
.story-reader-paragraph li {
  margin-left: 20px;
  margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   Reading Tool — Annotations, Bookmarks, Recognition, Audio
   ════════════════════════════════════════════════════════════════════════ */

/* Paragraph gutter (bookmark + comment icons) */
.story-reader-paragraph {
  position: relative;
  padding-left: 32px;
}
.reader-paragraph-gutter {
  position: absolute;
  left: 0;
  top: 4px;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.story-reader-paragraph:hover .reader-paragraph-gutter,
.story-reader-paragraph.bookmarked .reader-paragraph-gutter { opacity: 1; }
.reader-bookmark-btn, .reader-comment-indicator {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 11px;
  color: #bbb;
  line-height: 1;
}
.reader-bookmark-btn:hover { color: #3b82f6; }
.reader-bookmark-btn.active { color: #3b82f6; opacity: 1; }
.reader-comment-indicator { color: #f59e0b; font-size: 10px; }
.reader-comment-indicator:hover { color: #d97706; }

/* Bookmarked paragraphs */
.story-reader-paragraph.bookmarked {
  border-left-color: #3b82f6;
  background: rgba(59,130,246,0.03);
}

/* Section comment button (next to headings) */
.reader-section-comment-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ccc;
  font-size: 12px;
  margin-left: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.15s;
}
h2:hover .reader-section-comment-btn,
.story-reader-abstract:hover .reader-section-comment-btn,
.reader-section-comment-btn.has-comment { opacity: 1; }
.reader-section-comment-btn:hover { color: #f59e0b; background: rgba(245,158,11,0.08); }
.reader-section-comment-btn.has-comment { color: #f59e0b; }

/* Inline comment display */
.reader-comment-block {
  background: #fef9ef;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0 8px 32px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #92400e;
  position: relative;
}
.reader-comment-block .reader-comment-text { white-space: pre-wrap; line-height: 1.5; }
.reader-comment-block .reader-comment-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}
.reader-comment-block .reader-comment-actions button {
  background: transparent;
  border: none;
  font-size: 10px;
  cursor: pointer;
  color: #b45309;
  padding: 2px 6px;
  border-radius: 3px;
}
.reader-comment-block .reader-comment-actions button:hover { background: rgba(180,83,9,0.1); }

/* Comment input */
.reader-comment-input-area {
  margin: 4px 0 8px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reader-comment-input-area textarea {
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  resize: vertical;
  outline: none;
}
.reader-comment-input-area textarea:focus { border-color: #3b82f6; }
.reader-comment-input-area .reader-comment-input-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.reader-comment-input-area .reader-comment-input-actions button {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
}
.reader-comment-input-area .reader-comment-input-actions button.primary {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Text selection comment popover */
.reader-selection-popover {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 240px;
  max-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.reader-selection-popover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}
.reader-selection-popover textarea {
  width: 100%;
  min-height: 40px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  resize: vertical;
  outline: none;
}
.reader-selection-popover .popover-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  justify-content: flex-end;
}
.reader-selection-popover .popover-actions button {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
}
.reader-selection-popover .popover-actions button.primary {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Text selection highlight (persistent) */
.reader-selection-hl {
  background: rgba(251,191,36,0.15);
  border-bottom: 2px solid #fbbf24;
  border-radius: 1px;
  cursor: pointer;
  position: relative;
}
.reader-selection-hl:hover { background: rgba(251,191,36,0.25); }
.reader-selection-hl-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #555;
  white-space: pre-wrap;
  max-width: 280px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 15;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.reader-selection-hl:hover .reader-selection-hl-tooltip { display: block; }

/* Recognition highlighting — pastel backgrounds + inline chips */
.reader-rec-hl {
  border-radius: 2px;
  padding: 0 1px;
  cursor: help;
  position: relative;
}
.reader-rec-hl[data-rec-type="topic"] { background: rgba(74,222,128,0.15); }
.reader-rec-hl[data-rec-type="factor"] { background: rgba(251,191,36,0.15); }
.reader-rec-hl[data-rec-type="engagementType"] { background: rgba(96,165,250,0.15); }
.reader-rec-hl[data-rec-type="entityType"] { background: rgba(192,132,252,0.15); }
.reader-rec-hl[data-rec-type="milestone"] { background: rgba(244,114,182,0.15); }
.reader-rec-hl[data-rec-type="strategy"] { background: rgba(251,146,60,0.15); }
.reader-rec-hl[data-rec-type="story"] { background: rgba(52,211,153,0.15); }

.reader-rec-chip {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 1px;
  vertical-align: super;
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 0;
  transition: opacity 0.15s;
}
.reader-rec-hl:hover .reader-rec-chip { opacity: 1; }
.reader-recognition-active .reader-rec-chip { opacity: 0.7; }
.reader-rec-chip[data-rec-type="topic"] { background: rgba(74,222,128,0.22); color: #22c55e; }
.reader-rec-chip[data-rec-type="factor"] { background: rgba(251,191,36,0.22); color: #d97706; }
.reader-rec-chip[data-rec-type="engagementType"] { background: rgba(96,165,250,0.22); color: #3b82f6; }
.reader-rec-chip[data-rec-type="entityType"] { background: rgba(192,132,252,0.22); color: #a855f7; }
.reader-rec-chip[data-rec-type="milestone"] { background: rgba(244,114,182,0.22); color: #ec4899; }
.reader-rec-chip[data-rec-type="strategy"] { background: rgba(251,146,60,0.22); color: #ea580c; }
.reader-rec-chip[data-rec-type="story"] { background: rgba(52,211,153,0.22); color: #10b981; }

/* Recognition tooltip */
.reader-rec-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #1a1a2e;
  color: #e5e5e5;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  max-width: 260px;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 20;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.4;
  pointer-events: none;
}
.reader-rec-hl:hover .reader-rec-tooltip { display: block; }

/* Recognition legend bar */
.reader-recognition-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  background: #f5f5f0;
  border-bottom: 1px solid #e8e8e0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  flex-wrap: wrap;
  min-height: 28px;
}
.reader-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}
.reader-legend-chip.disabled { opacity: 0.35; text-decoration: line-through; }
.reader-legend-chip input[type="checkbox"] { width: 10px; height: 10px; margin: 0; }

/* Audio control bar */
.reader-audio-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  background: #f5f5f0;
  border-bottom: 1px solid #e8e8e0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  min-height: 32px;
}
.reader-audio-bar button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #555;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.reader-audio-bar button:hover { background: rgba(0,0,0,0.06); }
.reader-audio-bar input[type="range"] { flex: 1; height: 4px; }
.reader-audio-bar select {
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 11px;
  background: #fff;
  max-width: 140px;
}
#reader-audio-time { color: #888; white-space: nowrap; min-width: 70px; text-align: center; }

/* Reading tool modal overlay (import, TTS) */
.reader-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 5500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.reader-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.reader-modal-header button {
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.reader-modal-header button:hover { background: rgba(0,0,0,0.06); }
.reader-modal-body { padding: 16px; }

/* Import dropzone */
.reader-import-dropzone {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reader-import-dropzone:hover, .reader-import-dropzone.dragover {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.04);
}

/* ════════════════════════════════════════════════════════════════════════
   Reading Tool — Header Button
   ════════════════════════════════════════════════════════════════════════ */

.reading-tool-btn {
  background: transparent;
  border: 1px solid #3a3a4a;
  color: #888;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
.reading-tool-btn:hover {
  border-color: #60a5fa;
  color: #60a5fa;
}

/* ════════════════════════════════════════════════════════════════════════
   Day Companion — Left Sidebar
   ════════════════════════════════════════════════════════════════════════ */

.companion-toggle-btn {
  background: transparent;
  border: 1px solid #3a3a4a;
  color: #888;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
.companion-toggle-btn:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}
.companion-toggle-btn.active {
  background: #2a2a3a;
  border-color: #fbbf24;
  color: #fbbf24;
}

#companion-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: #12121a;
  border-right: 1px solid #2a2a3a;
  overflow: hidden;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
#companion-sidebar.open {
  width: var(--companion-width, 480px);
}
#companion-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 51;
  background: transparent;
}
#companion-resize-handle:hover,
#companion-sidebar.resizing #companion-resize-handle {
  background: rgba(99, 102, 241, 0.5);
}

.companion-header {
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a3a;
  display: flex;
  align-items: center;
  background: #1a1a24;
  flex-shrink: 0;
}
.companion-header h3 {
  font-size: 0.9rem;
  color: #fff;
  margin: 0;
  flex: 1;
}
.companion-cost {
  color: #4ade80;
  font-size: 11px;
  font-family: monospace;
  margin-right: 8px;
}
.companion-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
}
.companion-close:hover { color: #fff; }

/* Engagement Cards */
.companion-engagements {
  flex-shrink: 0;
  max-height: 240px;
  overflow-y: auto;
  border-bottom: 1px solid #2a2a3a;
  padding: 8px;
}
.companion-no-engagements {
  color: #555;
  font-size: 12px;
  text-align: center;
  padding: 12px 8px;
}
.companion-engagement-card {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  position: relative;
}
.engagement-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.engagement-topic {
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.engagement-dismiss {
  background: none;
  border: none;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.engagement-dismiss:hover { color: #f87171; }
.engagement-name {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Milestone Progress Bar */
.milestone-progress-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.milestone-segment {
  height: 100%;
  border-radius: 2px;
  transition: background 0.3s;
}
.milestone-segment.pending { background: #2a2a3a; }
.milestone-segment.active { background: #3b82f6; }
.milestone-segment.completed { background: #4ade80; }
.milestone-segment.skipped { background: #6b7280; opacity: 0.6; color: #fff; font-size: 8px; text-align: center; line-height: 8px; }
.milestone-segment.partial { background: #f59e0b; color: #000; font-size: 8px; text-align: center; line-height: 8px; }
.milestone-segment.completed { color: #fff; font-size: 8px; text-align: center; line-height: 8px; }

.current-milestone {
  color: #60a5fa;
  font-size: 11px;
}
.milestone-state-hints { color: #9ca3af; font-size: 10px; font-style: italic; }
.milestone-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; }
.milestone-badge.partial { background: #f59e0b33; color: #f59e0b; }

/* Focus Entity List */
.focus-entity-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.focus-entity-type { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.focus-entity-type-name { color: #94a3b8; min-width: 60px; }
.focus-entity-chips { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
.entity-chip-mini { background: #2a2a3a; color: #d1d5db; padding: 1px 6px; border-radius: 8px; font-size: 10px; }
.entity-chip-mini.generated { border: 1px solid #a855f733; }
.entity-compare-btn { background: none; border: 1px solid #f59e0b55; color: #f59e0b; border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 10px; }
.entity-compare-btn:hover { background: #f59e0b22; }

/* Engagement Card States */
.companion-engagement-card.focused {
  border-color: #fbbf24;
  background: #1a1a2e;
}
.companion-engagement-card.background {
  opacity: 0.7;
  cursor: pointer;
}
.companion-engagement-card.background:hover {
  opacity: 0.9;
  border-color: #3a3a5a;
}
.engagement-progress-pct {
  color: #4ade80;
  font-size: 11px;
  font-family: monospace;
}

/* Focus Engagement Area */
.companion-focus {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  border-bottom: 1px solid #2a2a3a;
}
.companion-focus-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.focus-engagement-name {
  color: #e0e0e0;
  font-size: 17px;
  font-weight: 600;
}
.focus-milestone-name {
  color: #60a5fa;
  font-size: 14px;
  font-weight: 500;
}
.focus-milestone-intention {
  color: #bbb;
  font-size: 14px;
  line-height: 1.5;
}
.focus-progress-pct {
  color: #4ade80;
  font-size: 12px;
  font-family: monospace;
}
.companion-focus-progress {
  margin-bottom: 10px;
}
.focus-progress-bar {
  height: 5px;
  background: #2a2a3a;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.focus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #4ade80);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.focus-progress-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
}
.focus-progress-stats i {
  margin-right: 4px;
}
.focus-complete {
  color: #4ade80;
}
.companion-framing-text {
  color: #aaa;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  min-height: 20px;
  padding: 8px 0;
}
.companion-no-engagements {
  color: #555;
  font-size: 13px;
  text-align: center;
  padding: 16px 8px;
}

/* Guidelet Container */
.companion-guidelet {
  flex-shrink: 0;
  padding: 8px 12px;
}
.companion-guidelet:empty {
  display: none;
}
.companion-guidelet-inner {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.guidelet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.guidelet-title {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 500;
}
.guidelet-close {
  background: none;
  border: none;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
}
.guidelet-close:hover { color: #fff; }

/* Opinion Guidelet */
.opinion-guidelet .opinion-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.opinion-label-neg {
  color: #f87171;
  font-size: 10px;
}
.opinion-label-bal {
  color: #fbbf24;
  font-size: 10px;
}
.opinion-label-pos {
  color: #4ade80;
  font-size: 10px;
}
.opinion-slider-row {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}
.opinion-slider-row button {
  flex: 1;
  background: #2a2a3a;
  border: 1px solid #3a3a4a;
  color: #888;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.opinion-slider-row button:hover {
  border-color: #fbbf24;
  color: #fbbf24;
  background: #2a2a4a;
}
.opinion-slider-row button.selected {
  background: #fbbf24;
  color: #000;
  border-color: #fbbf24;
  font-weight: 600;
}
.opinion-value {
  text-align: center;
  color: #555;
  font-size: 11px;
}

/* Entity Guidelet */
.entity-guidelet .entity-type-badge {
  display: inline-block;
  background: #1a2a3a;
  border: 1px solid #3b82f6;
  color: #60a5fa;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.entity-guidelet .entity-desc {
  color: #888;
  font-size: 11px;
  margin-bottom: 8px;
}
.entity-guidelet .entity-name-input {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 6px;
}
.entity-guidelet .entity-name-input:focus {
  border-color: #3b82f6;
}
.entity-guidelet .entity-submit-btn {
  background: #1a3a2e;
  border: 1px solid #4ade80;
  color: #4ade80;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  transition: all 0.2s;
}
.entity-guidelet .entity-submit-btn:hover {
  background: #4ade80;
  color: #000;
}

/* Entity Variable Guidelet */
.entity-var-guidelet .var-label {
  color: #ccc;
  font-size: 12px;
  margin-bottom: 6px;
}
.var-enum-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.var-enum-btn {
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #ccc;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.var-enum-btn:hover {
  border-color: #60a5fa;
  color: #60a5fa;
}
.var-enum-btn.selected {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}
.var-text-input {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.var-text-input:focus {
  border-color: #60a5fa;
}

/* Placeholder Guidelet */
.placeholder-guidelet .placeholder-desc {
  color: #888;
  font-size: 11px;
  margin-bottom: 8px;
}
.placeholder-enum-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.placeholder-enum-btn {
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #ccc;
  padding: 5px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.placeholder-enum-btn:hover {
  border-color: #a78bfa;
  color: #a78bfa;
}
.placeholder-text-input {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.placeholder-text-input:focus {
  border-color: #a78bfa;
}

/* Persistent Suggestion Box */
.companion-suggestions {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid #2a2a3a;
  background: #1a1a24;
  margin-top: auto;
}
.companion-suggestions:empty {
  display: none;
}
.suggestion-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.suggestion-card:hover {
  border-color: #fbbf24;
  background: #1e1e32;
}
.suggestion-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.suggestion-icon.entity { color: #60a5fa; }
.suggestion-icon.opinion { color: #fbbf24; }
.suggestion-icon.placeholder { color: #a78bfa; }
.suggestion-icon.insight { color: #34d399; }
.suggestion-icon.story { color: #818cf8; }
.suggestion-icon.advance { color: #4ade80; }
.suggestion-icon.variable { color: #38bdf8; }
.suggestion-text {
  flex: 1;
  min-width: 0;
}
.suggestion-title {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.suggestion-desc {
  color: #888;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
}
.suggestion-box-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 12px;
  padding: 10px;
}
.suggestion-box-empty i {
  font-size: 16px;
}

/* Companion Settings Panel */
.companion-settings-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.companion-settings-btn:hover { color: #fbbf24; }
.companion-settings-panel {
  background: #0e0e18;
  border-bottom: 1px solid #2a2a3a;
  padding: 8px 14px;
}
.companion-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #aaa;
}
.companion-setting-row:last-child { margin-bottom: 0; }
.companion-setting-row select {
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.companion-setting-row input[type="checkbox"] {
  accent-color: #fbbf24;
  margin-right: 4px;
}

/* Entity Generation Button */
.guidelet-generate-btn {
  background: none;
  border: 1px solid #a78bfa;
  color: #a78bfa;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  margin-left: auto;
  transition: all 0.15s;
}
.guidelet-generate-btn:hover {
  background: #a78bfa;
  color: #000;
}

/* Entity Chip List */
.guidelet-entity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #1a2a3a;
  border: 1px solid #3b82f6;
  color: #60a5fa;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.entity-chip.generated {
  border-color: #a78bfa;
  color: #a78bfa;
}
.entity-remove-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  opacity: 0.6;
}
.entity-remove-btn:hover { opacity: 1; }

/* Comparison Guidelet (Entity-Factor Matrix) */
.guidelet-comparison {
  max-height: 300px;
  overflow: auto;
}
.guidelet-close-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  margin-left: auto;
}
.guidelet-close-btn:hover { color: #fff; }
.comparison-matrix-container {
  overflow-x: auto;
  margin-top: 6px;
}
.comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.comparison-matrix th {
  background: #1a1a2e;
  color: #fbbf24;
  font-weight: 500;
  padding: 4px 6px;
  border-bottom: 1px solid #2a2a4a;
  text-align: center;
  white-space: nowrap;
}
.matrix-entity-name {
  color: #60a5fa;
  padding: 4px 6px;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.matrix-cell {
  padding: 2px;
  text-align: center;
}
.matrix-cell-input {
  width: 36px;
  background: #2a2a3a;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  text-align: center;
  padding: 3px 2px;
  border-radius: 4px;
  font-size: 11px;
}
.matrix-cell-input:focus {
  border-color: #fbbf24;
  outline: none;
}
.matrix-cell.filled .matrix-cell-input {
  border-color: #4ade80;
  color: #4ade80;
}
.suggestion-icon.entity-opinion-matrix { color: #f59e0b; }

/* ── Heatmap Guidelet ────────────────────────────────────── */
.guidelet-heatmap { max-height: 400px; }
.guidelet-heatmap .guidelet-header { display: flex; align-items: center; gap: 8px; }
.heatmap-gen-btn {
  background: #1a3a1a; border: 1px solid #4ade80; color: #4ade80;
  border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer; margin-left: auto;
}
.heatmap-gen-btn:hover { background: #2a4a2a; }

/* Factor header with vertical slider */
.heatmap-factor-header {
  position: relative; padding: 4px 2px 2px !important; min-width: 48px; vertical-align: bottom;
}
.heatmap-factor-name {
  display: block; font-size: 9px; color: #fbbf24; text-align: center; margin-bottom: 4px;
  writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg);
  max-height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heatmap-slider-container {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.heatmap-factor-slider {
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 16px; height: 60px;
  background: transparent; cursor: pointer;
}
.heatmap-factor-slider::-webkit-slider-runnable-track {
  width: 4px; background: linear-gradient(to top, #ef4444, #fbbf24, #4ade80); border-radius: 2px;
}
.heatmap-factor-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  background: #fbbf24; border-radius: 50%; border: 2px solid #111; cursor: grab;
  margin-left: -4px;
}
.heatmap-factor-slider::-moz-range-track {
  width: 4px; background: linear-gradient(to top, #ef4444, #fbbf24, #4ade80); border-radius: 2px;
}
.heatmap-factor-slider::-moz-range-thumb {
  width: 12px; height: 12px; background: #fbbf24; border-radius: 50%; border: 2px solid #111; cursor: grab;
}
.heatmap-slider-value {
  font-size: 9px; color: #888; text-align: center; min-width: 12px;
}

/* Heatmap cells */
.heatmap-cell {
  padding: 3px 2px; text-align: center; font-size: 10px; font-weight: 600;
  border: 1px solid #1a1a2e; cursor: default; min-width: 32px;
  transition: background 0.2s, color 0.2s;
}
.heatmap-cell-empty {
  background: #2a2a3a !important; color: #555 !important;
  border: 1px dashed #3a3a4a;
}
.heatmap-entity-name {
  color: #60a5fa; padding: 4px 6px; white-space: nowrap;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}

/* Entity weight icon + slider */
.heatmap-entity-weight-cell { padding: 2px 4px; text-align: center; }
.heatmap-entity-weight-btn {
  background: none; border: none; color: #666; font-size: 14px; cursor: pointer; padding: 2px;
}
.heatmap-entity-weight-btn:hover { color: #fbbf24; }
.heatmap-entity-slider-wrap {
  display: none; align-items: center; gap: 4px; margin-top: 2px;
}
.heatmap-entity-slider-wrap.visible { display: flex; }
.heatmap-entity-slider {
  width: 60px; height: 12px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.heatmap-entity-slider::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(to right, #ef4444, #fbbf24, #4ade80); border-radius: 2px;
}
.heatmap-entity-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px;
  background: #fbbf24; border-radius: 50%; border: 2px solid #111; margin-top: -3px; cursor: grab;
}
.heatmap-entity-slider::-moz-range-track {
  height: 4px; background: linear-gradient(to right, #ef4444, #fbbf24, #4ade80); border-radius: 2px;
}
.heatmap-entity-slider::-moz-range-thumb {
  width: 10px; height: 10px; background: #fbbf24; border-radius: 50%; border: 2px solid #111; cursor: grab;
}

/* ── Critical Factor Highlighting (milestone successFactors) ── */
.heatmap-critical {
  box-shadow: inset 0 0 0 2px #f59e0b;
}
th.heatmap-factor-header.heatmap-critical {
  background: #2a2210 !important;
  border-bottom: 2px solid #f59e0b;
}
th.heatmap-factor-header.heatmap-critical .heatmap-factor-name {
  color: #fbbf24;
  font-weight: 700;
}
td.heatmap-cell.heatmap-critical {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5);
}

/* ── Focus Display: Compact Inline Heatmap ────────────────── */
.focus-entity-heatmap { padding: 4px 0; }
.focus-entity-type-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.focus-heatmap-row {
  display: flex; align-items: center; gap: 4px; padding: 2px 4px;
  cursor: pointer; border-radius: 4px;
}
.focus-heatmap-row:hover { background: rgba(255,255,255,0.05); }
.focus-heatmap-name {
  font-size: 10px; color: #a0a0c0; min-width: 80px; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.focus-heatmap-cells { display: flex; gap: 1px; }
.focus-heatmap-sq {
  width: 8px; height: 8px; border-radius: 1px; display: inline-block;
}
.focus-heatmap-sq-empty { background: #2a2a3a; border: 1px dashed #3a3a4a; }
.focus-heatmap-sq-critical { outline: 1px solid #f59e0b; outline-offset: -1px; }
.focus-heatmap-score {
  font-size: 9px; color: #4ade80; font-weight: 600; margin-left: 4px; min-width: 20px;
}

/* Topic Placement Cards */
.topic-placement-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.topic-placement-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 1px solid #333;
  cursor: default;
}
.topic-placement-icon {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.topic-placement-content {
  flex: 1;
  min-width: 0;
}
.topic-placement-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 3px;
}
.topic-placement-branch {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  word-break: break-word;
}
.topic-placement-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
}
.topic-placement-level {
  color: #64b5f6;
  font-weight: 500;
}
.topic-placement-coverage {
  color: #999;
  font-style: italic;
}
.topic-placement-forecast {
  font-size: 11px;
  color: #64b5f6;
  margin-top: 4px;
  line-height: 1.3;
}
.topic-placement-section {
  margin-top: 8px;
  border-top: 1px solid #2a2a2a;
  padding-top: 6px;
}
.topic-placement-header {
  font-size: 11px;
  color: #777;
  margin-bottom: 6px;
  padding: 0 4px;
}
.topic-placement-header i {
  margin-right: 4px;
}

/* Input Area */
.companion-input-area {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  border-top: 1px solid #2a2a3a;
  background: #1a1a24;
}
.companion-input-container {
  display: flex;
  gap: 6px;
}
#companion-input {
  flex: 1;
  background: #1a1a2e;
  border: 1px solid #3a3a4a;
  color: #e0e0e0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
#companion-input:focus {
  border-color: #fbbf24;
}
#companion-input::placeholder {
  color: #555;
}
.companion-send-btn {
  background: #fbbf24;
  border: none;
  color: #000;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
}
.companion-send-btn:hover { background: #f59e0b; }
.companion-send-btn:disabled { background: #3a3a4a; color: #666; cursor: not-allowed; }

.companion-status {
  margin-top: 4px;
  font-size: 11px;
  color: #888;
}

/* ─── api.mutual.ai gateway: browse-only mode ────────────────────────── */
/* When body has class wtm-browse-only (no valid api.mutual.ai key), edit
   affordances are dimmed. Buttons that mutate state can also opt into
   class .wtm-edit-only to be hidden entirely. The fetch wrapper enforces
   the actual write-blocking; this layer is just visual. */
body.wtm-browse-only #wtm-mode-banner ~ * { padding-top: 0 !important; }
body.wtm-browse-only .wtm-edit-only { display: none !important; }
body.wtm-browse-only [data-wtm-edit] { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
body.wtm-browse-only button.btn-primary[onclick*="generate"],
body.wtm-browse-only button.btn-primary[onclick*="save"],
body.wtm-browse-only button.btn-primary[onclick*="commit"],
body.wtm-browse-only button[onclick*="delete"] {
  opacity: 0.45; pointer-events: none; cursor: not-allowed;
}
#wtm-mode-banner { transition: background 0.3s ease; }
#wtm-mode-banner:hover { filter: brightness(1.06); }

/* When the banner is visible, push the rest of the UI down so the
   top-search-bar stays clickable. */
body.wtm-browse-only #top-search-bar { margin-top: 32px; }