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

        body {
            background: #0a1628;
            color: #d0d8e8;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            line-height: 1.7;
        }

        /* ── Nav ── */
        nav {
          display: flex; align-items: center; gap: 10px;
          padding: 14px 24px; border-bottom: 1px solid #1a1a1a; font-size: 0.82rem;
          position: sticky; top: 0; background: rgba(10,10,10,0.95);
          backdrop-filter: blur(8px); z-index: 50;
        }
        nav a { color: #555; text-decoration: none; transition: color 0.2s; }
        nav a:hover { color: #f0f0f0; }
        nav .sep { color: #333; }
        nav .current { color: #e0e0e0; }
        nav .spacer { flex: 1; }
        .nav-updated { font-size: 0.72rem; color: #2a2a2a; }
    /* ── Nav auth button ── */
    #nav-auth { position: relative; }
    #nav-auth-btn {
      background: none; border: 1px solid #252525; border-radius: 6px;
      color: #444; font-size: 0.75rem; padding: 4px 10px; cursor: pointer;
      font-family: inherit; transition: color 0.2s, border-color 0.2s;
      text-decoration: none; display: inline-block; line-height: 1.6;
    }
    #nav-auth-btn:hover { color: #888; border-color: #333; }
    #nav-auth-btn.authed { color: #4ade80; border-color: rgba(74,222,128,0.25); }
    #nav-auth-dropdown {
      display: none; position: absolute; right: 0; top: calc(100% + 6px);
      background: #0e0e0e; border: 1px solid #1e1e1e; border-radius: 8px;
      min-width: 160px; z-index: 200; overflow: hidden;
    }
    #nav-auth-dropdown.open { display: block; }
    .nav-dd-item {
      display: block; padding: 9px 14px; font-size: 0.8rem; color: #888;
      text-decoration: none; cursor: pointer; background: none; border: none;
      font-family: inherit; width: 100%; text-align: left; transition: background .15s, color .15s;
    }
    .nav-dd-item:hover { background: #161616; color: #ccc; }
    .nav-dd-item.danger:hover { color: #f87171; }

        /* ── Hero ── */
        .hero {
            max-width: 900px;
            margin: 48px auto 0;
            padding: 0 28px 48px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .hero-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #4ade80;
            margin-bottom: 20px;
        }
        .hero-label-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #4ade80;
        }
        .hero h1 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 20px;
        }
        .hero h1 em {
            color: #4ade80;
            font-style: normal;
        }
        .hero-intro {
            font-size: 1.05rem;
            color: #8a9ab5;
            max-width: 600px;
        }
        .hero-links { margin-top: 18px; }
        .hero-link {
            font-size: 0.85rem; color: #4ade80; text-decoration: none;
            border: 1px solid rgba(74,222,128,0.2); border-radius: 6px;
            padding: 5px 12px; display: inline-block; transition: all 0.2s;
        }
        .hero-link:hover { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.4); }

        /* ── Content ── */
        .content {
            max-width: 900px;
            margin: 0 auto;
            padding: 28px 28px 60px;
        }

        /* ── Sections ── */
        .section {
            padding: 40px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .section:last-child { border-bottom: none; }

        .section-label {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #3a5070;
            margin-bottom: 8px;
        }
        .section h2 {
            font-size: 1.3rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 18px;
        }
        .section p {
            color: #8a9ab5;
            margin-bottom: 14px;
        }
        .section p:last-child { margin-bottom: 0; }

        strong { color: #c8d8f0; font-weight: 600; }
        a { color: #4ade80; text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* ── Tech stack chips ── */
        .stack-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
            margin-top: 24px;
        }
        .stack-card {
            background: #0f1f35;
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 10px;
            padding: 16px 18px;
        }
        .stack-card-title {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #3a5070;
            margin-bottom: 6px;
        }
        .stack-card-name {
            font-size: 0.95rem;
            font-weight: 600;
            color: #c8d8f0;
            margin-bottom: 4px;
        }
        .stack-card-desc {
            font-size: 0.78rem;
            color: #5a7090;
            line-height: 1.5;
        }

        /* ── Feature list ── */
        .feature-list {
            list-style: none;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .feature-list li {
            display: block;
            position: relative;
            padding-left: 18px;
            font-size: 0.9rem;
            color: #8a9ab5;
            line-height: 1.65;
        }
        .feature-list li::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4ade80;
            position: absolute;
            left: 0;
            top: 8px;
        }
        .feature-list li strong { color: #c8d8f0; }

        /* ── Process steps ── */
        .steps {
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .step {
            display: flex;
            gap: 18px;
            padding-bottom: 28px;
            position: relative;
        }
        .step:last-child { padding-bottom: 0; }
        .step-line {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
        }
        .step-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #0f1f35;
            border: 1px solid rgba(74,222,128,0.3);
            color: #4ade80;
            font-size: 0.72rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .step-connector {
            width: 1px;
            flex: 1;
            background: rgba(255,255,255,0.06);
            margin-top: 6px;
        }
        .step:last-child .step-connector { display: none; }
        .step-body { padding-top: 4px; }
        .step-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: #c8d8f0;
            margin-bottom: 4px;
        }
        .step-desc {
            font-size: 0.85rem;
            color: #5a7090;
            line-height: 1.6;
        }

        /* ── AWS infra block ── */
        .infra-block {
            background: #0f1f35;
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 10px;
            padding: 20px 22px;
            margin-top: 20px;
            font-size: 0.85rem;
        }
        .infra-row {
            display: flex;
            gap: 12px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            align-items: flex-start;
        }
        .infra-row:last-child { border-bottom: none; padding-bottom: 0; }
        .infra-row:first-child { padding-top: 0; }
        .infra-key {
            width: 160px;
            flex-shrink: 0;
            color: #3a5070;
            font-size: 0.78rem;
            padding-top: 1px;
        }
        .infra-val { color: #8a9ab5; }
        .infra-val strong { color: #c8d8f0; }

        /* ── Claude Code usage widget ── */
        .cc-usage {
            background: #0d1b2e; border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px; padding: 24px 28px; margin-bottom: 40px;
        }
        .cc-usage-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
        .cc-usage-title  { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .12em; color: #3a5070; }
        .cc-usage-range  { font-size: 0.7rem; color: #2a4060; }
        .cc-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
        .cc-stat { background: #0a1520; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 12px 14px; }
        .cc-stat-val { font-size: 1.2rem; font-weight: 600; color: #e0eaf8; line-height: 1; margin-bottom: 4px; }
        .cc-stat-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .1em; color: #2a4060; }
        .cc-chart-wrap { margin-top: 4px; }
        .cc-chart-title { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .1em; color: #2a4060; margin-bottom: 8px; }
        .cc-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 0.72rem; }
        .cc-bar-date  { color: #3a5070; width: 60px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
        .cc-bar-track { flex: 1; background: #0a1520; border-radius: 3px; height: 10px; overflow: hidden; }
        .cc-bar-fill  { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4ade80, #22c55e); transition: width .5s ease; }
        .cc-bar-cost  { color: #3a6050; width: 44px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
        .cc-loading   { font-size: 0.75rem; color: #2a4060; }
        @media (max-width: 640px) {
          .cc-stat-row { grid-template-columns: repeat(2, 1fr); }
        }

        /* ── Claude.ai plan usage widget ── */
        .cai-usage {
            background: #0d1b2e; border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px; padding: 24px 28px; margin-bottom: 24px;
        }
        .cai-usage-header { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; }
        .cai-usage-title  { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .12em; color: #3a5070; }
        .cai-usage-ts     { font-size: 0.7rem; color: #2a4060; flex: 1; }
        .cai-refresh-btn  {
          padding: 3px 10px; border-radius: 5px; font-size: 0.7rem; font-weight: 600;
          border: 1px solid #1a3050; background: none; color: #3a6090; cursor: pointer;
          font-family: inherit; transition: color 0.15s, border-color 0.15s;
        }
        .cai-refresh-btn:hover:not(:disabled) { color: #7ab4e8; border-color: #3a6090; }
        .cai-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .cai-meter-row    { display: flex; flex-direction: column; gap: 12px; }
        .cai-meter        { display: flex; flex-direction: column; gap: 4px; }
        .cai-meter-hdr    { display: flex; justify-content: space-between; align-items: baseline; }
        .cai-meter-label  { font-size: 0.72rem; color: #3a5070; }
        .cai-meter-pct    { font-size: 0.78rem; font-weight: 600; color: #c8d8f0; font-variant-numeric: tabular-nums; }
        .cai-meter-sub    { font-size: 0.65rem; color: #2a4060; }
        .cai-track        { height: 8px; background: #0a1520; border-radius: 4px; overflow: hidden; }
        .cai-fill         { height: 100%; border-radius: 4px; transition: width .6s ease; }
        .cai-fill-5h      { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
        .cai-fill-7d      { background: linear-gradient(90deg, #818cf8, #6366f1); }
        .cai-fill-ex      { background: linear-gradient(90deg, #fb923c, #f97316); }
        .cai-fill-warn    { background: linear-gradient(90deg, #f87171, #ef4444); }
        .cai-stale        { font-size: 0.72rem; color: #f87171; margin-top: 12px; }
        .cai-sk-row       { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
        .cai-sk-input     { flex: 1; background: #0a1520; border: 1px solid #1a2a3a; border-radius: 6px;
                            color: #8a9ab5; font-size: 0.75rem; font-family: monospace; padding: 7px 10px;
                            outline: none; min-width: 0; }
        .cai-sk-input:focus { border-color: #2a4060; }
        .cai-sk-input::placeholder { color: #2a4060; }
        .cai-sk-btn       { background: #0f1f35; border: 1px solid rgba(74,222,128,0.2); border-radius: 6px;
                            color: #4ade80; font-size: 0.72rem; padding: 7px 12px; cursor: pointer;
                            font-family: inherit; white-space: nowrap; transition: border-color .2s, color .2s; }
        .cai-sk-btn:hover { border-color: rgba(74,222,128,0.4); color: #6aeea0; }
        .cai-sk-msg       { font-size: 0.7rem; margin-top: 6px; min-height: 1em; }
        .cai-sk-msg.ok    { color: #4ade80; }
        .cai-sk-msg.err   { color: #f87171; }
        .cai-ext-link-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid #1a1a1a; }
        .cai-ext-link { font-size: 0.78rem; color: #4ade80; text-decoration: none; }
        .cai-ext-link:hover { text-decoration: underline; }
        @media (max-width: 640px) { .cai-usage { padding: 16px; } }

        .usage-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 32px;
        }
        .usage-col {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .usage-col-title {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #3a5070;
            margin-bottom: -8px;
        }
        .usage-note {
            font-size: 0.78rem;
            color: #5a7090;
            line-height: 1.7;
        }
        @media (max-width: 640px) {
            .usage-grid { grid-template-columns: 1fr; }
        }

        /* ── Callout ── */
        .callout {
            background: rgba(74,222,128,0.05);
            border: 1px solid rgba(74,222,128,0.15);
            border-left: 3px solid #4ade80;
            border-radius: 0 8px 8px 0;
            padding: 14px 18px;
            margin-top: 20px;
            font-size: 0.88rem;
            color: #8aad9a;
        }
        .callout strong { color: #4ade80; }

        /* ── Responsive ── */
        @media (max-width: 640px) {
            nav {
                padding: 12px 16px;
                gap: 12px;
            }

            .hero {
                margin-top: 28px;
                padding: 0 16px 32px;
            }
            .hero-intro {
                font-size: 0.95rem;
            }

            .content {
                padding: 0 16px 40px;
            }

            .section {
                padding: 28px 0;
            }
            .section h2 {
                font-size: 1.15rem;
            }

            /* Stack grid already wraps, just tighten the min */
            .stack-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            /* Infra table: stack key above value on narrow screens */
            .infra-block {
                padding: 16px;
            }
            .infra-row {
                flex-direction: column;
                gap: 4px;
                padding: 12px 0;
            }
            .infra-key {
                width: auto;
                font-size: 0.7rem;
                letter-spacing: 0.06em;
                text-transform: uppercase;
            }

            /* Feature list slightly tighter */
            .feature-list li {
                font-size: 0.86rem;
            }

            /* Steps: reduce step gap and font */
            .step {
                gap: 14px;
                padding-bottom: 22px;
            }
            .step-title {
                font-size: 0.88rem;
            }
            .step-desc {
                font-size: 0.82rem;
            }

            .callout {
                font-size: 0.84rem;
            }

            /* Usage grid single col on mobile */
            .usage-grid { grid-template-columns: 1fr; }

            /* Time spent grid: 2 col on mobile */
            .ts-grid { grid-template-columns: 1fr 1fr; }
        }

        /* Tablet: tighten padding, keep 2-col usage grid */
        @media (max-width: 900px) and (min-width: 641px) {
            .hero    { margin-top: 36px; padding: 0 20px 40px; }
            .content { padding: 0 20px 48px; }
            .section { padding: 32px 0; }
        }

    /* ── Tab bar ── */
    .vc-tab-bar {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 28px;
        display: flex;
        gap: 2px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .vc-tab {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: #3a5070;
        font-size: 0.82rem;
        font-family: inherit;
        padding: 12px 14px;
        cursor: pointer;
        margin-bottom: -1px;
        transition: color .15s, border-color .15s;
    }
    .vc-tab:hover { color: #8a9ab5; }
    .vc-tab.active { color: #4ade80; border-bottom-color: #4ade80; }

    /* ── Search overlay ── */
    #search-overlay {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
      align-items: flex-start; justify-content: center; padding-top: 80px;
    }
    #search-overlay.open { display: flex; }
    #search-box {
      background: #111; border: 1px solid #2a2a2a; border-radius: 10px;
      width: 100%; max-width: 580px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    #search-input {
      width: 100%; padding: 16px 20px; background: none; border: none; outline: none;
      color: #e0e0e0; font-size: 1rem; font-family: inherit; box-sizing: border-box;
    }
    #search-input::placeholder { color: #444; }
    #search-divider { height: 1px; background: #1e1e1e; }
    #search-results { max-height: 400px; overflow-y: auto; }
    .search-result {
      display: block; padding: 12px 20px; text-decoration: none; color: inherit;
      border-bottom: 1px solid #151515; transition: background 0.15s;
    }
    .search-result:hover, .search-result.active { background: #161616; }
    .search-result-title { color: #e0e0e0; font-size: 0.9rem; margin-bottom: 3px; }
    .search-result-snippet { color: #555; font-size: 0.78rem; line-height: 1.4; }
    .search-result-snippet mark { background: none; color: #4ade80; font-style: normal; }
    #search-empty { padding: 20px; text-align: center; color: #333; font-size: 0.85rem; }
    #search-hint {
      padding: 8px 20px; color: #2a2a2a; font-size: 0.72rem;
      border-top: 1px solid #151515; display: flex; gap: 16px;
    }
#delegation-viz { width:100%; }
            #delegation-viz svg { width:100%; height:auto; display:block; overflow:visible; }
            .dviz-legend {
              display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px;
              font-size:0.75rem; color:#5a7090;
            }
            .dviz-legend-dot {
              display:inline-block; width:8px; height:8px;
              border-radius:50%; margin-right:5px; vertical-align:middle;
            }
            .dviz-cost-bar {
              display:flex; align-items:center; gap:20px; flex-wrap:wrap;
              margin-top:16px; padding:11px 16px;
              background:rgba(167,139,250,0.05); border:1px solid rgba(167,139,250,0.15);
              border-radius:8px; font-size:0.8rem; color:#8a9ab5;
            }
            .dviz-cost-bar strong { font-weight:700; }
            /* Mobile: show a simple stacked description instead */
            .dviz-mobile-fallback { display:none; }
            @media (max-width:520px) {
              #delegation-viz svg { display:none; }
              .dviz-mobile-fallback { display:block; font-size:0.82rem; color:#5a7090; line-height:1.8; }
            }

/* Phase 4 – extracted inline styles */
._p4-3cda48 {
  font-size: 0.7rem;
  color: #2a4060;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

._p4-a01463 {
  font-size: 0.85em;
  background: rgba(255,255,255,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  color: #8a9ab5;
}

._p4-f633af {
  margin-top: 10px;
  font-size: 0.72rem;
  color: #3a5070;
  line-height: 1.7;
  margin-bottom: 10px;
}

        /* ── Time spent widget ── */
        .time-spent-wrap {
            background: #0d1117;
            border: 1px solid #1e2a3a;
            border-radius: 10px;
            padding: 18px 22px;
            margin-bottom: 28px;
        }
        .ts-header {
            display: flex;
            align-items: baseline;
            gap: 14px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .ts-title {
            font-size: 0.88rem;
            font-weight: 600;
            color: #adc8e8;
        }
        .ts-updated {
            font-size: 0.72rem;
            color: #2a4060;
            margin-left: auto;
        }
        .ts-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .ts-cell {
            background: #111820;
            border: 1px solid #1e2a3a;
            border-radius: 8px;
            padding: 12px 14px;
        }
        .ts-cell.ts-total {
            border-color: rgba(74,222,128,0.2);
            background: rgba(74,222,128,0.04);
        }
        .ts-val {
            font-size: 1.4rem;
            font-weight: 700;
            color: #e0e8f0;
            line-height: 1.2;
        }
        .ts-cell.ts-total .ts-val { color: #4ade80; }
        .ts-lbl {
            font-size: 0.72rem;
            color: #3a5070;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 4px;
        }
        .ts-sub {
            font-size: 0.72rem;
            color: #2a4060;
            margin-top: 3px;
        }
        /* ── Time spent: explanation dropdown ── */
        .ts-explain {
            margin-top: 14px;
            border-top: 1px solid #1a2535;
            padding-top: 12px;
        }
        .ts-explain-toggle {
            font-size: 0.75rem;
            color: #3a5878;
            cursor: pointer;
            user-select: none;
            list-style: none;
            outline: none;
            transition: color 0.15s;
        }
        .ts-explain-toggle:hover { color: #6a90b8; }
        .ts-explain[open] .ts-explain-toggle { color: #6a90b8; }
        .ts-explain-body {
            margin-top: 12px;
            font-size: 0.78rem;
            color: #4a6880;
            line-height: 1.75;
        }
        .ts-explain-body p { margin-bottom: 8px; }
        .ts-explain-body p strong { color: #6a90b8; }
        .ts-explain-body ul {
            padding-left: 18px;
            margin-bottom: 8px;
        }
        .ts-explain-body li { margin-bottom: 4px; }
        .ts-explain-body li strong { color: #7aa8c8; }
        .ts-explain-body code {
            font-size: 0.75rem;
            background: rgba(255,255,255,0.05);
            padding: 1px 5px;
            border-radius: 3px;
            color: #8ab8d8;
        }
        @media (max-width: 640px) {
            .ts-grid { grid-template-columns: 1fr 1fr; }
        }

/* ── Attribution visualisation ───────────────────────────────────────────── */
.attr-intro { color: #666; font-size: 0.85rem; margin-bottom: 20px; line-height: 1.6; }
.attr-intro code { background: #1a1a1a; padding: 1px 5px; border-radius: 3px; color: #a78bfa; font-size: 0.8rem; }

.attr-summary {
  display: flex; align-items: center; gap: 24px;
  background: #111; border: 1px solid #1e1e1e; border-radius: 10px;
  padding: 16px 20px; margin-bottom: 28px;
}
.attr-sum-left {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px; min-width: 72px;
}
.attr-sum-total { font-size: 1.9rem; font-weight: 700; color: #e0e0e0; line-height: 1; }
.attr-sum-lbl   { font-size: 0.62rem; color: #555; text-transform: uppercase; letter-spacing: 0.1em; }
.attr-sum-right { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.attr-legend { display: flex; gap: 20px; }
.attr-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #888; }
.attr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.attr-dot-claude  { background: #7c3aed; }
.attr-dot-codex   { background: #0d9488; }
.attr-dot-gemini  { background: #2563eb; }
.attr-pct { font-weight: 600; color: #bbb; margin-left: 2px; }

.attr-bar-wrap { width: 100%; }
.attr-bar-track {
  height: 8px; border-radius: 4px; background: #1a1a1a;
  overflow: hidden; display: flex;
}
.attr-bar-claude {
  height: 100%; background: #7c3aed;
  border-radius: 4px 0 0 4px; transition: width 0.7s ease;
}
.attr-bar-codex  { height: 100%; background: #0d9488; transition: width 0.7s ease; }
.attr-bar-gemini { height: 100%; background: #2563eb; transition: width 0.7s ease; }

/* Card grid */
.attr-cards { display: flex; flex-direction: column; gap: 20px; }

.attr-group-title {
  font-size: 0.63rem; font-weight: 600; color: #333;
  text-transform: uppercase; letter-spacing: 0.13em;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
}
.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.attr-card {
  background: #111; border: 1px solid #1e1e1e; border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
  transition: border-color 0.15s;
}
.attr-card:hover { border-color: #2c2c2c; }
.attr-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 6px;
}
.attr-card-title { font-size: 0.73rem; color: #ccc; font-weight: 500; line-height: 1.3; flex: 1; }
.attr-card-badge {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}
.attr-card-badge.badge-claude  { background: #7c3aed; }
.attr-card-badge.badge-codex   { background: #0d9488; }
.attr-card-badge.badge-gemini  { background: #2563eb; }
.attr-card-badge.badge-both    { background: linear-gradient(135deg, #7c3aed 50%, #0d9488 50%); }
.attr-card-badge.badge-none    { background: #222; border: 1px solid #2a2a2a; }

.attr-card-bar {
  height: 3px; border-radius: 2px; background: #1a1a1a;
  overflow: hidden; display: flex;
}
.attr-card-bar-claude { height: 100%; background: #7c3aed; transition: width 0.5s ease; }
.attr-card-bar-codex  { height: 100%; background: #0d9488; transition: width 0.5s ease; }

.attr-card-meta { font-size: 0.64rem; color: #444; }

.attr-loading { color: #444; font-size: 0.82rem; padding: 16px 0; display: block; }
.attr-error   { color: #ef4444; font-size: 0.82rem; padding: 16px 0; display: block; }

/* ── Feature area grid (Overview tab) ── */
.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}
.feat-group {
    background: #0f1f35;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 18px 20px;
}
.feat-group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3a5070;
    margin-bottom: 5px;
}
.feat-group-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #c8d8f0;
    margin-bottom: 12px;
}
.feat-group .feature-list { margin-top: 0; }
.feat-group .feature-list li { font-size: 0.83rem; }
@media (max-width: 640px) {
    .feat-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Changelog epoch labels ── */
.cl-epoch {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #3a5070;
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cl-epoch:first-child { margin-top: 0; }

/* ── Stat hover hints ── */
#vc-total-tokens,
#vc-total-commits {
    cursor: help;
    border-bottom: 1px dashed rgba(168,192,216,0.35);
}

/* ── Token tooltip ── */
.vc-tok-tooltip {
    position: fixed;
    z-index: 9999;
    width: 280px;
    background: #0a1628;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 16px 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    font-size: 0.82rem;
    color: #a8c0d8;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.vc-tok-tooltip.visible { opacity: 1; }
.vc-tok-tip-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3a5070;
    margin-bottom: 10px;
}
.vc-tok-tip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.vc-tok-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vc-tok-tip-label {
    width: 82px;
    flex-shrink: 0;
    color: #c8d8f0;
    font-size: 0.8rem;
}
.vc-tok-tip-bar-wrap {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.vc-tok-tip-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.vc-tok-tip-note {
    flex: 1;
    font-size: 0.72rem;
    color: #3a5070;
    font-style: italic;
}
.vc-tok-tip-val {
    width: 36px;
    text-align: right;
    flex-shrink: 0;
    color: #c8d8f0;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}
.vc-tok-tip-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 10px 0 8px;
}
.vc-tok-tip-chart-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3a5070;
    margin-bottom: 7px;
}
.vc-tok-tip-chart-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.63rem;
    color: #3a5070;
    margin-top: 4px;
}