/* ─── Design tokens ─────────────────────────────────────────── */
      :root {
        --bg:           #0d1117;
        --surface:      #161b22;
        --surface-2:    #1c2129;
        --border:       #30363d;
        --text:         #e6edf3;
        --text-muted:   #8b949e;
        --link:         #58a6ff;
        --link-hover:   #79c0ff;
        --green:        #238636;
        --green-bright: #3fb950;
        --blue:         #1f6feb;
        --orange:       #d29922;
        --orange-bright:#e3b341;
        --purple:       #8957e5;
        --purple-bright:#bc8cff;
        --red:          #f85149;
        --red-bright:   #ff7b72;
        --accent:       #58a6ff;
        --radius:       8px;
      }

      /* ─── Reset ─────────────────────────────────────────────────── */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        line-height: 1.6;
        min-height: 100vh;
      }
      a { color: var(--link); text-decoration: none; }
      a:hover { color: var(--link-hover); text-decoration: underline; }
      strong { font-weight: 700; }
      code {
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 1px 6px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 0.84em;
        word-break: break-all;
      }

      /* ─── Nav ───────────────────────────────────────────────────── */
      .top-bar {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 100;
      }
      .top-bar-inner {
        max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
        height: 56px; display: flex; align-items: center;
        justify-content: space-between;
      }
      .top-bar-logo {
        font-size: 1.1rem; font-weight: 700; color: var(--text);
        display: flex; align-items: center; gap: 8px;
      }
      .top-bar-logo:hover { color: var(--accent); text-decoration: none; }
      .top-bar-links { display: flex; gap: 1.5rem; align-items: center; }
      .top-bar-links a { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; }
      .top-bar-links a:hover,
      .top-bar-links a.active { color: var(--text); text-decoration: none; }
      .btn-github {
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 6px; padding: 6px 14px;
        display: flex; align-items: center; gap: 6px;
        font-size: 0.85rem !important; color: var(--text) !important;
      }
      .btn-github:hover { background: var(--border); }

      /* ─── Breadcrumb ─────────────────────────────────────────────── */
      .breadcrumb {
        max-width: 1200px; margin: 0 auto; padding: 0.7rem 1.5rem;
        font-size: 0.83rem; color: var(--text-muted);
        display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
      }
      .breadcrumb a { color: var(--text-muted); }
      .breadcrumb a:hover { color: var(--link); }
      .bc-sep { color: var(--border); font-size: 1rem; }

      /* ─── Hero ───────────────────────────────────────────────────── */
      .hero {
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 2.5rem 1.5rem 2rem;
      }
      .hero-inner { max-width: 1200px; margin: 0 auto; }
      .domain-eyebrow {
        display: inline-block; font-size: 0.73rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-muted); margin-bottom: 0.5rem;
      }
      .hero h1 {
        font-size: clamp(1.5rem, 4vw, 2.1rem);
        font-weight: 800; line-height: 1.15; margin-bottom: 0.85rem;
      }
      .hero h1 .hl { color: var(--accent); }
      .hero-desc {
        color: var(--text-muted); font-size: 1rem;
        max-width: 680px; margin-bottom: 1.25rem;
      }
      .badge-strip { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
      .badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 11px; border-radius: 20px;
        font-size: 0.78rem; font-weight: 600; border: 1px solid transparent;
        white-space: nowrap;
      }
      .bg-green  { background:rgba(35,134,54,.15);  border-color:rgba(35,134,54,.4);  color:var(--green-bright); }
      .bg-blue   { background:rgba(31,111,235,.15); border-color:rgba(31,111,235,.4); color:#79c0ff; }
      .bg-orange { background:rgba(210,153,34,.15); border-color:rgba(210,153,34,.4); color:var(--orange-bright); }
      .bg-purple { background:rgba(137,87,229,.15); border-color:rgba(137,87,229,.4); color:var(--purple-bright); }
      .bg-red    { background:rgba(248,81,73,.15);  border-color:rgba(248,81,73,.4);  color:var(--red-bright); }
      .bg-gray   { background:rgba(139,148,158,.1); border-color:rgba(139,148,158,.3);color:var(--text-muted); }
      .hero-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }
      .btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 9px 20px; border-radius: 6px;
        font-size: 0.88rem; font-weight: 600;
        text-decoration: none !important; transition: background 0.15s, color 0.15s;
        white-space: nowrap;
      }
      .btn-primary  { background: var(--accent); color: #0d1117; }
      .btn-primary:hover  { background: var(--link-hover); color: #0d1117; }
      .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
      .btn-secondary:hover { background: var(--surface-2); }

      /* ─── Stats strip ────────────────────────────────────────────── */
      .stats-strip {
        background: var(--surface-2); border-bottom: 1px solid var(--border);
        padding: 1.1rem 1.5rem;
      }
      .stats-grid {
        max-width: 1200px; margin: 0 auto;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem; text-align: center;
      }
      .stat-num {
        font-size: 1.65rem; font-weight: 800;
        color: var(--accent); display: block; line-height: 1.1;
      }
      .stat-lbl {
        font-size: 0.72rem; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
      }

      /* ─── Page layout ────────────────────────────────────────────── */
      .page-wrap {
        max-width: 1200px; margin: 0 auto;
        padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.75rem;
      }

      /* ─── Section cards ──────────────────────────────────────────── */
      .section {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); overflow: hidden;
      }
      .section-header {
        padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border);
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 0.75rem;
      }
      .section-header h2 {
        font-size: 1.05rem; font-weight: 700;
        display: flex; align-items: center; gap: 8px;
      }
      .section-meta { font-size: 0.8rem; color: var(--text-muted); }
      .section-body { padding: 1.5rem; }

      /* ─── Info grid (contact info) ───────────────────────────────── */
      .info-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.85rem; margin-bottom: 1.5rem;
      }
      .info-card {
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 6px; padding: 0.9rem;
      }
      .info-label {
        font-size: 0.7rem; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.3rem;
      }
      .info-value { font-size: 0.875rem; color: var(--text); word-break: break-all; }

      /* ─── Tables ─────────────────────────────────────────────────── */
      .table-wrap { overflow-x: auto; border-radius: 4px; }
      table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
      th {
        background: var(--surface-2); color: var(--text-muted);
        font-size: 0.72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        padding: 9px 14px; text-align: left;
        border-bottom: 1px solid var(--border); white-space: nowrap;
      }
      td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
      tr:last-child td { border-bottom: none; }
      tr:hover td { background: rgba(255,255,255,.02); }

      /* ─── Relationship / type badges ─────────────────────────────── */
      .rel, .stype {
        display: inline-block; padding: 2px 9px; border-radius: 20px;
        font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
      }
      .rel-direct      { background:rgba(35,134,54,.2);  color:var(--green-bright); }
      .rel-reseller    { background:rgba(31,111,235,.2); color:#79c0ff; }
      .rel-unknown     { background:rgba(139,148,158,.15);color:var(--text-muted); }
      .stype-publisher    { background:rgba(35,134,54,.2);  color:var(--green-bright); }
      .stype-intermediary { background:rgba(137,87,229,.2); color:var(--purple-bright); }
      .stype-both         { background:rgba(210,153,34,.2); color:var(--orange-bright); }
      .stype-unknown      { background:rgba(139,148,158,.15);color:var(--text-muted); }
      .conf-badge {
        display:inline-block; padding:1px 7px; border-radius:10px;
        font-size:0.68rem; font-weight:700;
        background:rgba(248,81,73,.15); color:var(--red-bright); margin-left:5px;
      }
      .no-val { color: var(--text-muted); }

      /* ─── Network bars ───────────────────────────────────────────── */
      .top-networks { margin-bottom: 1.5rem; }
      .top-networks h3 {
        font-size: 0.88rem; font-weight: 700;
        color: var(--text-muted); margin-bottom: 0.85rem;
        text-transform: uppercase; letter-spacing: 0.05em;
      }
      .net-bars { display: flex; flex-direction: column; gap: 0.55rem; }
      .net-row {
        display: grid; grid-template-columns: 200px 1fr 45px;
        align-items: center; gap: 0.8rem; font-size: 0.82rem;
      }
      .net-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bar-track {
        background: var(--surface-2); border-radius: 4px;
        height: 7px; overflow: hidden;
      }
      .bar-fill {
        background: var(--accent); height: 100%;
        border-radius: 4px; transition: width 0.4s ease;
      }
      .net-cnt { text-align: right; color: var(--text-muted); font-size: 0.78rem; }

      /* ─── Seller type summary cards ──────────────────────────────── */
      .type-summary {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.75rem; margin-bottom: 1.5rem;
      }
      .type-card {
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 6px; padding: 0.85rem; text-align: center;
      }
      .type-card-num {
        font-size: 1.5rem; font-weight: 800;
        color: var(--accent); display: block;
      }
      .type-card-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

      /* ─── Truncation notice ──────────────────────────────────────── */
      .truncation-note {
        margin-top: 0.85rem; font-size: 0.8rem;
        color: var(--text-muted); padding: 0.75rem 1rem;
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 6px;
      }

      /* ─── CTA box ────────────────────────────────────────────────── */
      .cta-box {
        background: linear-gradient(135deg,
          rgba(31,111,235,.12), rgba(137,87,229,.12));
        border: 1px solid rgba(88,166,255,.25);
        border-radius: var(--radius); padding: 2.25rem 2rem; text-align: center;
      }
      .cta-box h2 { font-size: 1.35rem; margin-bottom: 0.5rem; }
      .cta-box p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.4rem; max-width: 560px; margin-left:auto; margin-right:auto; }
      .cta-actions { display: flex; justify-content: center; gap: 0.65rem; flex-wrap: wrap; }

      /* ─── Footer ─────────────────────────────────────────────────── */
      footer {
        background: var(--surface); border-top: 1px solid var(--border);
        padding: 2rem 1.5rem; margin-top: 2rem;
      }
      .footer-inner {
        max-width: 1200px; margin: 0 auto;
        display: flex; justify-content: space-between;
        align-items: center; flex-wrap: wrap; gap: 1rem;
      }
      .footer-brand { font-weight: 700; color: var(--text); }
      .footer-brand span { color: var(--text-muted); font-weight: 400; font-size: 0.88rem; }
      .footer-tagline { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }
      .footer-links { display: flex; gap: 1.5rem; font-size: 0.84rem; flex-wrap: wrap; }
      .footer-links a { color: var(--text-muted); }
      .footer-links a:hover { color: var(--link); text-decoration: none; }
      .footer-bottom {
        max-width: 1200px; margin: 1rem auto 0;
        padding-top: 1rem; border-top: 1px solid var(--border);
        font-size: 0.78rem; color: var(--text-muted); text-align: center;
      }

      /* ─── Responsive ─────────────────────────────────────────────── */
      @media (max-width: 768px) {
        .top-bar-links a:not(.btn-github) { display: none; }
        .hero { padding: 1.75rem 1rem 1.5rem; }
        .section-body { padding: 1rem; }
        .stats-grid { grid-template-columns: repeat(3, 1fr); }
        .net-row { grid-template-columns: 110px 1fr 36px; }
        .page-wrap { padding: 1rem; }
        .cta-box { padding: 1.5rem 1rem; }
      }
      @media (max-width: 480px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); }
      }

      /* ─── Index page styles ──────────────────────────────────────── */
      .index-hero {
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 2.5rem 1.5rem 2rem;
      }
      .index-hero-inner { max-width: 1200px; margin: 0 auto; }
      .index-hero h1 {
        font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800;
        margin-bottom: 0.75rem;
      }
      .index-hero h1 .hl { color: var(--accent); }
      .index-hero p { color: var(--text-muted); font-size: 1rem; max-width: 640px; }

      .search-bar-wrap {
        max-width: 1200px; margin: 1.5rem auto 0; padding: 0 1.5rem;
      }
      #domain-search {
        width: 100%; padding: 12px 18px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); color: var(--text);
        font-size: 1rem; outline: none; transition: border-color 0.15s;
      }
      #domain-search:focus { border-color: var(--accent); }
      #domain-search::placeholder { color: var(--text-muted); }

      .letter-nav {
        max-width: 1200px; margin: 1.5rem auto 0; padding: 0 1.5rem;
        display: flex; flex-wrap: wrap; gap: 0.4rem;
      }
      .letter-link {
        display: inline-block; padding: 4px 10px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 4px; font-size: 0.85rem; font-weight: 700;
        color: var(--text-muted); text-decoration: none !important;
        transition: background 0.12s, color 0.12s;
      }
      .letter-link:hover { background: var(--accent); color: #0d1117; border-color: var(--accent); }

      .index-body {
        max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem 3rem;
      }
      .letter-section { margin-bottom: 2.5rem; }
      .letter-heading {
        font-size: 1.4rem; font-weight: 800; color: var(--accent);
        border-bottom: 2px solid var(--border); padding-bottom: 0.5rem;
        margin-bottom: 1rem;
      }
      .domain-list {
        list-style: none; padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.35rem;
      }
      .domain-list li a {
        display: block; padding: 6px 10px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 5px; font-size: 0.84rem; color: var(--text-muted);
        text-decoration: none !important; transition: border-color 0.12s, color 0.12s;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .domain-list li a:hover { color: var(--link); border-color: var(--accent); }
      .domain-list li.hidden { display: none; }

      @media (max-width: 768px) {
        .domain-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
      }