@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
  /* ERK-inspired design variables */
  :root {
    --bg: #f4f6fb; --panel: #ffffff; --ink: #1b2430; --soft: #637188;
    --line: #cfd7e6; --brand: #d33; --field: #fff; --field-b: #b9c4d6;
    --btn: #e9eef7; --btn-b: #9fb1cf; --accent: #2563eb;
  }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); }
  .mono { font-family: 'JetBrains Mono', monospace; }
  /* ERK-style panels */
  .erk-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(16,33,68,.06); }
  .erk-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .erk-section { padding: 14px; border-top: 1px solid var(--line); }
  /* ERK-style input rows */
  .erk-row { display: grid; grid-template-columns: 200px 1fr 80px; gap: 8px; align-items: center; margin: 6px 0; }
  .erk-row .erk-label { color: var(--soft); font-size: 13px; }
  .erk-row input, .erk-row select { width: 100%; padding: 6px 8px; background: var(--field); border: 1px solid var(--field-b); border-radius: 4px; font-size: 14px; box-sizing: border-box; }
  .erk-row input:focus, .erk-row select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
  .erk-row input[readonly] { background: #f6f8fc; color: #3a4962; }
  .erk-row .erk-unit { padding-left: 4px; color: #3a4962; font-size: 13px; }
  .erk-result input { background: #fffaf2; border-color: #eed8b0; font-weight: 600; }
  /* Sidebar navigation */
  .sb-group { margin-bottom: 4px; }
  .sb-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--soft); padding: 10px 14px 4px; }
  .sb-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 14px; font-size: 13px; color: var(--ink); background: none; border: none; cursor: pointer; text-align: left; border-radius: 0; transition: background 0.1s; }
  .sb-item:hover { background: #edf1f9; }
  .sb-item.sb-active { background: #e0e8f5; font-weight: 600; color: var(--accent); border-right: 3px solid var(--accent); }
  /* Mobile tabs (original horizontal style) */
  .mob-tab { color: var(--soft); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
  .mob-tab.mob-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  /* Sidebar project tree items */
  .sbt-group { cursor: pointer; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 4px; }
  .sbt-group:hover { background: #edf1f9; }
  .sbt-item { padding: 3px 10px 3px 24px; font-size: 12px; color: var(--soft); cursor: pointer; display: flex; align-items: center; gap: 5px; border-radius: 0; }
  .sbt-item:hover { background: #edf1f9; color: var(--ink); }
  .sbt-item.sbt-active { background: #e0e8f5; color: var(--accent); font-weight: 600; }
  .sbt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .sbt-dot.pass { background: #22c55e; } .sbt-dot.fail { background: #ef4444; }
  .sbt-dot.warn { background: #eab308; } .sbt-dot.none { background: #d1d5db; }
  /* AI chat formatted answers */
  .ai-msg p { margin: 4px 0; }
  .ai-msg ul, .ai-msg ol { margin: 4px 0 4px 16px; padding: 0; }
  .ai-msg li { margin: 2px 0; }
  .ai-msg strong { color: var(--ink); }
  .ai-msg code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
  .ai-msg h1,.ai-msg h2,.ai-msg h3,.ai-msg h4 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; color: var(--ink); }
  .ai-msg blockquote { border-left: 3px solid var(--line); padding-left: 8px; margin: 4px 0; color: var(--soft); }
  /* ═══ Desktop (≥900px): sidebar + content ═══ */
  @media (min-width: 900px) {
    #app-sidebar { display: flex !important; flex-direction: column; }
    #mobile-tabs { display: none !important; }
    .project-sidebar { display: none !important; }
    #project-detail-view > div { flex-direction: column !important; }
  }
  /* ═══ Mobile (<900px): original tab-based layout ═══ */
  @media (max-width: 899px) {
    #app-sidebar { display: none !important; }
    #mobile-tabs { display: flex !important; }
    /* Undo the flex layout on the erk-panel — stack vertically */
    .erk-panel { display: block !important; min-height: auto !important; }
    #content-area { overflow-y: visible !important; }
    /* Restore project sidebar on mobile */
    .project-sidebar { display: block !important; width: 100% !important; min-width: unset !important; max-width: 100% !important; }
    /* Standard mobile layout overrides */
    main { margin: 0 !important; padding: 0 4px !important; }
    .erk-panel { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
    header .erk-panel, header { border-radius: 0 !important; }
  }
  .tab-active { border-bottom: 2px solid #3b82f6; color: #1d4ed8; font-weight: 600; }
  .gauge-ring { transition: stroke-dashoffset 0.8s ease-in-out; }
  .input-group label { min-width: 180px; }
  .fade-in { animation: fadeIn 0.3s ease-in; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .step-card { border-left: 3px solid #3b82f6; }
  .step-card:hover { background: #f0f9ff; }
  select, input[type=number] { font-variant-numeric: tabular-nums; }
  /* Tree view */
  .tree-item { padding: 6px 10px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .tree-item:hover { background: #f0f4ff; }
  .tree-item.active { background: #dbeafe; font-weight: 600; }
  .tree-group { font-weight: 600; color: #374151; }
  .tree-children { padding-left: 20px; }
  .tree-children.collapsed { display: none; }
  .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .status-dot.pass { background: #22c55e; }
  .status-dot.fail { background: #ef4444; }
  .status-dot.warn { background: #eab308; }
  .status-dot.none { background: #d1d5db; }
  .project-sidebar { min-width: 280px; max-width: 340px; }
  @media (max-width: 1023px) { .project-sidebar { max-width: 100%; min-width: unset; } }
  /* Widescreen: wider sidebar */
  @media (min-width: 1280px) {
    .project-sidebar { min-width: 300px; max-width: 360px; }
  }
  @media (min-width: 1536px) {
    .project-sidebar { min-width: 340px; max-width: 400px; }
  }
  @media (min-width: 1920px) {
    .project-sidebar { min-width: 380px; max-width: 440px; }
  }
  /* Right panel for component form on xl+ */
  .project-right-panel { min-width: 300px; max-width: 340px; }
  @media (min-width: 1536px) {
    .project-right-panel { min-width: 320px; max-width: 380px; }
  }
  @media (min-width: 1920px) {
    .project-right-panel { min-width: 360px; max-width: 420px; }
  }
  /* Below xl: right panel appears full-width below sidebar */
  @media (max-width: 1279px) {
    .project-right-panel { max-width: 100%; min-width: unset; }
  }
  /* Mobile: scrollable tabs */
  .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-scroll::-webkit-scrollbar { display: none; }
  /* Mobile: stack label+input vertically */
  @media (max-width: 480px) {
    .input-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .input-row label { min-width: unset !important; }
    .input-row input, .input-row select { width: 100% !important; }
  }
  /* Touch-friendly targets */
  @media (max-width: 768px) {
    input[type=number], select { font-size: 16px !important; padding: 10px 12px !important; }
    button { min-height: 48px; }
  }
  /* Widescreen desktop: wider content area */
  @media (min-width: 1536px) {
    .max-w-7xl { max-width: 96rem !important; }
    .max-w-4xl { max-width: 72rem !important; }
    .max-w-2xl { max-width: 56rem !important; }
  }
  @media (min-width: 1920px) {
    .max-w-7xl { max-width: 110rem !important; }
    .max-w-4xl { max-width: 80rem !important; }
  }
  /* Widescreen: project cards 4 columns */
  @media (min-width: 1536px) {
    #project-cards { grid-template-columns: repeat(4, 1fr) !important; }
  }
  @media (min-width: 1920px) {
    #project-cards { grid-template-columns: repeat(5, 1fr) !important; }
  }
  /* Widescreen: project detail wider content area */
  @media (min-width: 1280px) {
    .project-detail-content { flex: 1; min-width: 0; }
  }
  /* Widescreen: comparison and sweep tables wider */
  @media (min-width: 1536px) {
    #cmp-results table { font-size: 0.95em; }
  }
  /* Dark mode */
  /* ══ Dark Mode — comprehensive overrides ══ */
  .dark body, .dark { background: #0f172a; color: #e2e8f0; }
  .dark .erk-panel, .dark .bg-white { background: #1e293b !important; }
  .dark .bg-gray-50, .dark .bg-gray-100 { background: #1e293b !important; }
  .dark .bg-gray-200 { background: #334155 !important; }
  /* Colored backgrounds — darker versions */
  .dark .bg-blue-50 { background: #1e3a5f !important; }
  .dark .bg-blue-100 { background: #1e3a5f !important; }
  .dark .bg-green-50 { background: #14332a !important; }
  .dark .bg-green-100 { background: #14332a !important; }
  .dark .bg-red-50 { background: #3b1c1c !important; }
  .dark .bg-red-100 { background: #3b1c1c !important; }
  .dark .bg-yellow-50 { background: #3b3514 !important; }
  .dark .bg-yellow-100 { background: #3b3514 !important; }
  .dark .bg-orange-50 { background: #3b2a14 !important; }
  .dark .bg-orange-100 { background: #3b2a14 !important; }
  .dark .bg-amber-50 { background: #3b3014 !important; }
  .dark .bg-purple-100 { background: #2d1f4e !important; }
  .dark .bg-sky-100 { background: #1a3347 !important; }
  .dark .bg-emerald-100 { background: #14332a !important; }
  /* Borders */
  .dark .border, .dark .border-gray-200, .dark .border-gray-300 { border-color: #334155 !important; }
  .dark .border-blue-200, .dark .border-blue-300 { border-color: #1e4a7a !important; }
  .dark .border-green-200, .dark .border-green-300 { border-color: #1a4a3a !important; }
  .dark .border-red-200, .dark .border-red-300 { border-color: #5a2020 !important; }
  .dark .border-yellow-300 { border-color: #5a4a14 !important; }
  .dark .border-dashed { border-color: #475569 !important; }
  /* Text */
  .dark .text-gray-800, .dark .text-gray-900 { color: #e2e8f0 !important; }
  .dark .text-gray-700 { color: #cbd5e1 !important; }
  .dark .text-gray-600, .dark .text-gray-500 { color: #94a3b8 !important; }
  .dark .text-gray-400, .dark .text-gray-300 { color: #64748b !important; }
  .dark .text-blue-700, .dark .text-blue-600 { color: #60a5fa !important; }
  .dark .text-green-600, .dark .text-green-700 { color: #4ade80 !important; }
  .dark .text-red-600, .dark .text-red-700 { color: #f87171 !important; }
  .dark .text-yellow-600, .dark .text-yellow-700 { color: #facc15 !important; }
  .dark .text-orange-700 { color: #fb923c !important; }
  /* Shadows */
  .dark .shadow-sm, .dark .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
  /* Form elements */
  .dark input, .dark select, .dark textarea { background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; }
  .dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; }
  .dark input:focus, .dark select:focus { border-color: #60a5fa !important; }
  /* Header + specific elements */
  .dark header, .dark .erk-head { background: #1e293b !important; border-color: #334155 !important; }
  .dark .tab-active { border-color: #60a5fa !important; color: #93c5fd !important; }
  .dark .step-card { border-color: #3b82f6; }
  .dark .step-card:hover, .dark .tree-item:hover { background: #1e3a5f !important; }
  .dark .tree-item.active { background: #1e3a5f !important; }
  .dark footer { border-color: #334155 !important; }
  /* Sidebar */
  .dark .sb-item:hover, .dark .sbt-item:hover, .dark .sbt-group:hover { background: #1e3a5f !important; }
  .dark .sb-item.sb-active, .dark .sbt-item.sbt-active { background: #1e3a5f !important; }
  /* Tables */
  .dark table, .dark th, .dark td { border-color: #334155 !important; }
  .dark th { background: #1e293b !important; }
  .dark tr:hover { background: #1e3a5f !important; }
  /* Rounded cards, panels, alerts */
  .dark [class*="rounded-xl"], .dark [class*="rounded-lg"] { border-color: #334155; }
  /* Hover states */
  .dark .hover\:bg-gray-50:hover, .dark .hover\:bg-gray-100:hover, .dark .hover\:bg-gray-200:hover { background: #334155 !important; }
  .dark .hover\:bg-blue-50:hover, .dark .hover\:bg-blue-100:hover { background: #1e3a5f !important; }