/* ---------- search bar (compact, integrated into Handpicked header) ---------- */
  .search-bar {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.1);
    border-radius: 18px;
    padding: 4px 6px 4px 12px;
    box-shadow: 0 1px 2px rgba(14,14,16,0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease;
    min-width: 320px;
    max-width: 100%;
  }
  .search-bar:focus-within {
    border-color: rgba(10,135,247,0.4);
    box-shadow: 0 0 0 3px rgba(10,135,247,0.1);
  }
  .search-input {
    flex: 1 1 80px;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: #0e0e10;
    padding: 6px 0;
    min-width: 80px;
  }
  .search-input::placeholder { color: #94949c; }
  /* Committed search chips inside the search input (multi-keyword AND search). */
  .search-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(10,135,247,0.1);
    color: #0969da;
    border-radius: 999px;
    padding: 2px 4px 2px 9px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .search-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    color: rgba(29,78,216,0.7);
    transition: background 120ms ease, color 120ms ease;
  }
  .search-chip-x:hover {
    background: rgba(10,135,247,0.18);
    color: #0969da;
  }
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.1);
    border-radius: 999px;
    padding: 7px 12px;
    font-family: 'Geist', sans-serif;
    font-size: 12.5px;
    color: #38383d;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    white-space: nowrap;
  }
  .filter-chip:hover { border-color: rgba(14,14,16,0.3); color: #0e0e10; }
  .filter-chip.is-active { background: #0e0e10; color: #ffffff; border-color: #0e0e10; }
  /* Inline × inside a filter chip — clears the filter without opening the menu. */
  .filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 999px;
    opacity: 0.7;
    transition: opacity 120ms ease, background 120ms ease;
  }
  .filter-chip-x:hover { opacity: 1; background: rgba(255,255,255,0.18); }
  /* Custom popover anchored under a filter chip — replaces the old native
     <select> dropdown so we can style options, show a check mark, and let
     the chip itself act as the trigger. */
  .filter-pop { position: relative; display: inline-flex; }
  .filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(14,14,16,0.1);
    padding: 4px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
  }
  .filter-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    color: #38383d;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
  }
  .filter-menu-item:hover { background: rgba(14,14,16,0.04); color: #0e0e10; }
  .filter-menu-item.is-selected { color: #0969da; font-weight: 500; }
  .filter-menu-item.is-selected::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0969da;
    margin-right: 8px;
  }
  .filter-menu-item:not(.is-selected)::before {
    content: "";
    display: inline-block;
    width: 6px;
    margin-right: 8px;
  }

  /* ---------- section header ---------- */
  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 135, 247, 0.08);
    color: #0969da;
    border-radius: 999px;
    padding: 4px 10px;
    font-family: 'Geist', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .section-title {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -1.4px;
    color: #0e0e10;
    line-height: 1.05;
    font-feature-settings: "ss01", "cv11";
  }

  /* ---------- 岛上精选 (curated showcase) ----------
     Premium, editorial card row that sits above the regular feed. Larger,
     ringed, gold-star accented cards so the hand-picked set reads as a cut
     above the masonry feed below. */
  /* Top rhythm lives here, not in utility classes: the intended Tailwind
     spacing utilities aren't part of the trimmed build. Match the gap below the
     showcase — its 8px pb plus the feed's 32px pt (pt-8) — so the dark-zone →
     showcase → feed rhythm reads evenly at ~40px. */
  #spotlight {
    margin-top: 40px;
    padding-bottom: 8px;
  }
  .spotlight-head { margin-bottom: 22px; }
  .spotlight-sub {
    margin-top: 8px;
    font-size: 14px;
    color: #5a5a62;
    line-height: 1.6;
  }
  .spotlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 640px)  { .spotlight-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .spotlight-grid { grid-template-columns: repeat(3, 1fr); } }

  .spotlight-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(245,179,1,0.06), transparent 60%),
      linear-gradient(135deg, #ffffff 0%, #fdfcff 100%);
    border: 1px solid rgba(10,135,247,0.18);
    box-shadow: 0 1px 2px rgba(14,14,16,0.04), 0 10px 30px -18px rgba(10,135,247,0.30);
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .spotlight-card:hover {
    transform: translateY(-3px);
    border-color: rgba(10,135,247,0.40);
    box-shadow: 0 6px 14px -6px rgba(14,14,16,0.10), 0 22px 44px -22px rgba(10,135,247,0.42);
  }
  .spotlight-card-ribbon {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: #8a5a00;
    background: linear-gradient(135deg, rgba(245,179,1,0.20), rgba(232,137,12,0.16));
    border: 1px solid rgba(232,137,12,0.34);
  }
  /* Laurel sprigs flanking the label — the "official selection" frame reads
     more premium than a flat star. Drawn with currentColor so they inherit the
     ribbon's gold; the right sprig is the left one mirrored. */
  .spotlight-card-ribbon .ribbon-laurel {
    flex: 0 0 auto;
    width: 9px; height: 13px;
    opacity: .85;
  }
  .spotlight-card-ribbon .ribbon-laurel.is-right { transform: scaleX(-1); }
  .spotlight-card-ribbon .ribbon-label { line-height: 1; }
  .spotlight-card-top { display: flex; align-items: center; gap: 13px; padding-right: 64px; }
  .spotlight-card-logo {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(14,14,16,0.08);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .spotlight-card-logo img { width: 100%; height: 100%; object-fit: contain; }
  .spotlight-card-logo-fallback { width: 30px; height: 30px; color: #0969da; }
  .spotlight-card-logo-fallback svg { width: 100%; height: 100%; }
  .spotlight-card-heads { min-width: 0; }
  .spotlight-card-org {
    font-size: 13px; font-weight: 600; color: #5a5a62;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .spotlight-card-role {
    margin-top: 2px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 17px; font-weight: 600; color: #0e0e10;
    letter-spacing: -0.3px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .spotlight-card-intro {
    font-size: 13px; color: #5a5a62; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .spotlight-card-foot {
    margin-top: auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px;
  }
  .spotlight-card-tag {
    padding: 2px 9px; border-radius: 999px; font-weight: 600;
    background: rgba(10,135,247,0.10); color: #0969da;
  }
  .spotlight-card-loc { color: #94949c; }
  .spotlight-card-cta { margin-left: auto; color: #0a87f7; font-weight: 600; }
  /* Editorial dateline — mono, uppercase, wide-tracked. Magazine signal:
     "ISSUE NO. 20 · MAY 19, 2026". Sits above the section title to give the
     feed a periodical / weekly issue feel. */
  .dateline {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #94949c;
    text-transform: uppercase;
    line-height: 1.4;
  }
  /* ---------- Editor's letter (anti AI-generic flourish) ----------
     Magazine-style signed editor's note. Sits between the Brief and the
     Feed as a single-column human voice. Italic serif body + name +
     small initial avatar. The blue highlight under the key role is the
     "marker pen" trick — physical-feeling, hard for AI to fabricate. */
  .editor-letter {
    max-width: 720px;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(14,14,16,0.12);
    border-bottom: 1px solid rgba(14,14,16,0.12);
  }
  .editor-letter-eyebrow {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: #94949c;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .editor-letter-body {
    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.55;
    color: #1a1a1d;
    letter-spacing: -0.3px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }
  .editor-letter-body mark {
    background: linear-gradient(180deg, transparent 65%, rgba(10,135,247,0.22) 65%);
    color: inherit;
    padding: 0 2px;
  }
  .editor-letter-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
  }
  .editor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a87f7 0%, #0969da 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
  }
  .editor-letter-name {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: #0e0e10;
    font-weight: 600;
  }
  .editor-letter-role {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-weight: 400;
    color: #7a7a82;
    font-size: 12.5px;
    margin-top: 2px;
  }
  /* Compact editor signature used inline inside the Editor's pick card —
     smaller variant of the byline above. Visually marks one card as
     "personally vouched for" without rebuilding the whole layout. */
  .editor-card-sig {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(14,14,16,0.16);
    margin-top: 4px;
  }
  .editor-card-sig .editor-avatar {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .editor-card-sig-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: #38383d;
    font-variation-settings: "opsz" 144;
    line-height: 1.3;
  }
  .editor-card-sig-text strong {
    color: #0e0e10;
    font-weight: 500;
  }
  /* Editorial label — italic Fraunces, small caps feel. Used to mark
     "Featured" stories on the asymmetric feed. Fraunces is reserved for
     these editorial moments only; main headlines stay sober Geist sans. */
  .editorial-label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: #0a87f7;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    line-height: 1;
  }
  /* Pull-quote — the magazine signature. Italic serif at display weight,
     pulled out from the body copy with a left rule and slight indent. */
  .pull-quote {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    color: #1a1a1d;
    letter-spacing: -0.3px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    border-left: 2px solid #0a87f7;
    padding-left: 14px;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Featured story card — spans 2 columns on desktop, larger title in
     italic serif. Creates magazine-style asymmetric rhythm:
       row 1: [ F (2-col) ][ N ]
       row 2: [ N ][ N ][ N ]
       row 3: [ F (2-col) ][ N ]
       … */
  .job-card.is-featured {
    min-height: 360px;
    padding: 24px;
  }
  .job-card.is-featured .job-card-title {
    font-family: 'Fraunces', 'Geist', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    /* Featured cards earn a two-line title — the regular feed cards
       hard-clamp to one line, but the editorial serif treatment on
       featured rolls only feels right when long titles can breathe. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: clip;
  }
  .job-card.is-featured .job-card-body {
    font-size: 13.5px;
    -webkit-line-clamp: 4;
  }
  .job-card.is-featured .job-card-org {
    font-size: 13px;
  }
  /* Section title accent — same Geist family, one notch lighter weight
     (500 vs 600), color shift to blue. Mirrors the hero accent treatment. */
  .section-title-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    letter-spacing: inherit;
    color: #0a87f7;
  }
  .role-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #5a5a62;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
  }
  .role-tab:hover { color: #0e0e10; background: rgba(14,14,16,0.04); }
  .role-tab.is-active {
    background: #0e0e10;
    color: #ffffff;
    border-color: #0e0e10;
  }

  /* ---------- Safari-style browser frame around the feed ----------
     Wraps the filter bar + card grid + pagination so the whole feed
     reads as a "site" being viewed inside a browser window. Inspired by
     hero shots on Linear, Vercel, and other modern landing pages — the
     chrome (traffic lights + tab) sits above the content area, giving
     the feed an editorial frame instead of floating on the page bg. */
  .feed-browser-frame {
    background: #fdfdfc;
    border-radius: 18px;
    border: 1px solid rgba(14,14,16,0.07);
    box-shadow:
      0 40px 80px -36px rgba(14,14,16,0.22),
      0 6px 20px -6px rgba(14,14,16,0.06);
    overflow: hidden;
  }
  .feed-browser-chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    padding: 0 16px;
    background: linear-gradient(180deg, #f4f5f7 0%, #ecedef 100%);
    border-bottom: 1px solid rgba(14,14,16,0.07);
  }
  .feed-browser-traffic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .feed-browser-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .feed-browser-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(14,14,16,0.08);
    background: rgba(255,255,255,0.42);
    color: #6f7078;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12px;
    font-weight: 520;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  .feed-browser-tab:hover {
    background: rgba(255,255,255,0.72);
    color: #242428;
    border-color: rgba(14,14,16,0.14);
  }
  .feed-browser-tab.is-active {
    background: #ffffff;
    color: #0e0e10;
    border-color: rgba(14,14,16,0.12);
    box-shadow: 0 1px 2px rgba(14,14,16,0.06);
  }
  .feed-browser-light {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
    /* Subtle inset edge so the colored discs read as real macOS controls
       at the 12px size, not flat circles. */
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.10);
  }
  .feed-browser-light.is-red    { background: #ff5f57; }
  .feed-browser-light.is-yellow { background: #febc2e; }
  .feed-browser-light.is-green  { background: #28c840; }
  .feed-browser-body {
    padding: 22px 24px 28px;
  }
  .feed-company-empty {
    min-height: 420px;
  }
  /* Masonry feed — CSS multi-column packs cards of varying height tightly
     (no per-row gap like CSS grid leaves under shorter cards). Cards flow
     top-to-bottom within each column; vertical spacing is the card's own
     margin-bottom (see .company-card--feed), horizontal is column-gap.
     break-inside:avoid keeps a single card from splitting across columns.
     Reading order becomes column-major (col 1 top→bottom, then col 2) — an
     accepted trade for the tight pack. */
  .company-card-grid {
    column-count: 1;
    column-gap: 20px;
  }
  @media (min-width: 640px) {
    .company-card-grid { column-count: 2; }
  }
  @media (min-width: 1024px) {
    .company-card-grid { column-count: 3; }
  }
  .company-card {
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.08);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
    box-shadow: 0 1px 2px rgba(14,14,16,0.03);
  }
  .company-card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .company-card-logo {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.08);
    padding: 6px;
    flex: 0 0 auto;
    box-shadow: 0 4px 10px -6px rgba(14,14,16,0.18);
  }
  .company-card-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #0969da;
  }
  .company-card-title-wrap {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .company-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .company-card-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0e0e10;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.3px;
  }
  .company-card-website {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    color: #0969da;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  .company-card-website:hover { text-decoration: underline; text-underline-offset: 3px; }
  .company-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .company-card-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 999px;
    background: #f3f3f1;
    color: #38383d;
    padding: 4px 9px;
    font-family: 'Geist', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }
  .company-card-section {
    border-top: 1px solid rgba(14,14,16,0.06);
    padding-top: 12px;
  }
  .company-card-section-label {
    color: #3a3a42;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    margin-bottom: 6px;
  }
	  .company-card-text {
	    margin: 0;
	    color: #4a4a52;
	    font-size: 13px;
	    line-height: 1.65;
	    white-space: pre-line;
	  }
	  .company-card-person-list {
	    display: flex;
	    flex-direction: column;
	    gap: 10px;
	  }
	  .company-card-person {
	    display: flex;
	    flex-direction: column;
	    gap: 7px;
	    min-width: 0;
	  }
	  .company-card-person-head {
	    display: flex;
	    align-items: baseline;
	    flex-wrap: wrap;
	    gap: 6px;
	    min-width: 0;
	  }
	  .company-card-person-name {
	    color: #26262b;
	    font-size: 13px;
	    font-weight: 650;
	    line-height: 1.4;
	  }
	  .company-card-person-title {
	    color: #62626b;
	    font-size: 12.5px;
	    line-height: 1.45;
	  }
	  .company-card-links,
	  .company-card-link-list,
	  .company-card-position-list {
	    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .company-card-text + .company-card-links { margin-top: 8px; }
  .company-card-links a,
  .company-card-link-list a,
  .company-card-position-list a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(10,135,247,0.08);
    color: #0969da;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 560;
    text-decoration: none;
  }
	  .company-card-link-list a span,
	  .company-card-position-list a span {
	    min-width: 0;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  }
	  .company-card-link-list a small {
	    color: rgba(9,105,218,0.72);
	    font-size: 11px;
	    font-weight: 500;
	    min-width: 0;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	  }
  .company-card-links a:hover,
  .company-card-link-list a:hover,
  .company-card-position-list a:hover {
    background: rgba(10,135,247,0.13);
  }
  .company-card-position-list a small {
    color: rgba(9,105,218,0.72);
    font-size: 11px;
    font-weight: 500;
  }
  @media (max-width: 640px) {
    .feed-browser-chrome { height: 40px; padding: 0 12px; gap: 10px; }
    .feed-browser-light { width: 11px; height: 11px; }
    .feed-browser-traffic { gap: 6px; }
    .feed-browser-tabs { gap: 5px; }
    .feed-browser-tab {
      min-width: 66px;
      height: 26px;
      padding: 0 10px;
      font-size: 11.5px;
    }
    .feed-browser-body { padding: 16px 14px 22px; }
    .feed-company-empty { min-height: 320px; }
    .company-card-grid { column-count: 1; }
    .company-card--feed { margin-bottom: 12px; }
    .company-card { padding: 15px; border-radius: 14px; }
    .company-card-logo { width: 44px; height: 44px; border-radius: 10px; }
  }

  /* ---------- company feed card ----------
     Preview cards intentionally mirror the job-card cover/body rhythm, but
     only expose company scan anchors: logo, name, tags, location, latest news,
     and open roles. Everything else lives in the detail page. */
  .company-card--feed {
    padding: 0;
    gap: 0;
    /* Masonry item: size to content (heights may differ) and never split
       across columns. margin-bottom is the column layout's vertical gap. */
    min-height: 0;
    margin-bottom: 20px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  .company-card--feed:hover {
    border-color: rgba(14,14,16,0.18);
    box-shadow: 0 14px 32px -16px rgba(14,14,16,0.18);
    transform: translateY(-2px);
  }
  .company-card--feed:hover .job-card-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .company-card--feed:focus-visible {
    outline: 2px solid rgba(10,135,247,0.72);
    outline-offset: 3px;
  }
  .company-card-cover {
    position: relative;
    height: 76px;
    flex-shrink: 0;
  }
  .company-card-cover.tone-pink {
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #fde4ef 0%, #f5cee0 50%, #e8c7e4 100%);
  }
  .company-card-cover.tone-violet {
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #e1edfa 0%, #c8def4 50%, #b3d4f0 100%);
  }
  .company-card-cover.tone-amber {
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #fdf6e5 0%, #f7e7c9 50%, #eed8b2 100%);
  }
  .company-card-cover-badges {
    position: absolute;
    top: 10px;
    right: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: calc(100% - 92px);
    overflow: hidden;
  }
  .company-card-cover-logo {
    position: absolute;
    left: 16px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.06);
    object-fit: contain;
    padding: 5px;
    box-shadow:
      0 4px 10px -2px rgba(14,14,16,0.14),
      0 1px 2px rgba(14,14,16,0.06);
    z-index: 2;
  }
  .company-card-cover-logo.company-card-logo-fallback {
    color: #0e0e10;
    padding: 7px;
  }
  .company-card-cover-logo svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .company-card-main-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: -18px -20px 0;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(14,14,16,0.07);
  }
  .company-card-main-row.tone-pink {
    background:
      radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.62), transparent 64%),
      linear-gradient(135deg, #fde4ef 0%, #f5cee0 52%, #e8c7e4 100%);
  }
  .company-card-main-row.tone-violet {
    background:
      radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.62), transparent 64%),
      linear-gradient(135deg, #e1edfa 0%, #c8def4 52%, #b3d4f0 100%);
  }
  .company-card-main-row.tone-amber {
    background:
      radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.62), transparent 64%),
      linear-gradient(135deg, #fdf6e5 0%, #f7e7c9 52%, #eed8b2 100%);
  }
  .company-card-inline-logo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.06);
    object-fit: contain;
    padding: 5px;
    flex: 0 0 auto;
    box-shadow:
      0 4px 10px -2px rgba(14,14,16,0.12),
      0 1px 2px rgba(14,14,16,0.05);
  }
  .company-card-inline-logo.company-card-logo-fallback {
    color: #0e0e10;
    padding: 7px;
  }
  .company-card-inline-logo svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .company-card-body-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px 20px 42px;
    min-height: 0;
  }
  .company-card--feed .company-card-title-wrap {
    gap: 7px;
  }
  .company-card--feed .company-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.3px;
  }
  .company-card--feed .company-card-pills {
    max-height: 50px;
    overflow: hidden;
  }
  .company-card-pill--location {
    gap: 4px;
    color: #374151;
  }
  .company-card-preview-section {
    border-top: 1px solid rgba(14,14,16,0.07);
    padding-top: 11px;
    min-width: 0;
  }
  .company-card-preview-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
  }
  .company-card-preview-list a {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #4a4a52;
    text-decoration: none;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .company-card-preview-list a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #0a87f7;
    grid-column: 1;
    justify-self: start;
  }
  .company-card-preview-list a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2;
  }
  .company-card-preview-list a small {
    min-width: 0;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8a8a94;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    grid-column: 3;
  }
  .company-card-preview-list a:hover span {
    color: #0a87f7;
  }

  /* ---------- interview-guide feed card（面经攻略）----------
     Short link "notes" in a uniform grid; each card is one external link
     (mostly 小红书). Mirrors the job-card recipe: a white card whose
     tone wash is confined to the full-bleed head band that holds the
     company logo + name — the title and pill row below sit on plain
     white. Unlike job cards the band is ONE quiet brand-blue wash, not
     the hashed violet/pink/amber trio: guide cards are much shorter, so
     the band is ~half the card and random tones read as a patchwork
     against the already-colorful company logos. Cards with no company
     keep the text-only white silhouette. */
  /* Masonry via CSS multi-columns, same recipe as .company-card-grid:
     cards size to their content so heights differ per card instead of
     stretching to the tallest in the row. Vertical gap is each card's
     margin-bottom, horizontal is column-gap; break-inside keeps one
     card from splitting across columns. Reading order becomes
     column-major — same accepted trade as the company tab. */
  .guide-card-grid {
    column-count: 1;
    column-gap: 14px;
  }
  @media (min-width: 640px) {
    .guide-card-grid { column-count: 2; }
  }
  @media (min-width: 1024px) {
    .guide-card-grid { column-count: 3; }
  }
  .guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 108px;
    margin-bottom: 14px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #ffffff;
    /* No outer padding — the head band bleeds to the rounded edge (same
       trick as .job-card / .job-card-cover); body rows pad themselves. */
    padding: 0;
    border: 1px solid rgba(14,14,16,0.08);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(14,14,16,0.03);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  .guide-card:hover {
    border-color: rgba(14,14,16,0.18);
    box-shadow: 0 14px 32px -16px rgba(14,14,16,0.18);
    transform: translateY(-2px);
  }
  .guide-card:hover .guide-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
  }
  .guide-card:focus-visible {
    outline: 2px solid rgba(10,135,247,0.72);
    outline-offset: 3px;
  }
  /* Company head band — the card's only toned surface. Full-bleed strip
     (logo in a white rounded square + org line) mirroring the job-card
     cover; rendered whenever the guide has a company. */
  .guide-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 18px;
    /* One quiet brand-blue wash — a lightened cousin of the job-card
       tone-violet ramp with the same white radial highlight. */
    background:
      radial-gradient(ellipse 80% 110% at 22% 0%, rgba(255,255,255,0.62), transparent 64%),
      linear-gradient(135deg, #e8f1fa 0%, #d9e8f6 52%, #cce1f3 100%);
  }
  .guide-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.06);
    object-fit: contain;
    padding: 5px;
    flex: 0 0 auto;
    box-shadow:
      0 4px 10px -2px rgba(14,14,16,0.14),
      0 1px 2px rgba(14,14,16,0.06);
  }
  /* Initial-letter fallback when the company has no matched logo — same
     black-square treatment as .job-card-cover-logo-fallback. */
  .guide-card-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e10;
    color: #ffffff;
    border: none;
    padding: 0;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
  }
  .guide-card-company {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #38383d;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .guide-card-title {
    color: #0e0e10;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Text-only variant (no head band) supplies its own top inset since
       the card itself has no padding. */
    padding: 17px 18px 0;
  }
  .guide-card-head + .guide-card-title {
    padding-top: 0;
    /* With a head band the flex gap (12px) already separates them —
       tighten slightly so title reads as the band's caption. */
    margin-top: -2px;
  }
  /* 简介 — same magazine left-rule recipe as .job-card-bullets (the blue
     2px rule + inset copy on job cards); rendered only when the admin
     filled one in. The card has no outer padding so the block insets
     itself via side margins, keeping the rule off the card edge. */
  .guide-card-summary {
    color: #4a4a52;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    border-left: 2px solid #93c5fd;
    /* Admin-typed line breaks are meaningful (bullet-ish copy) — keep
       them; other whitespace still collapses. No clamp: the masonry
       grid lets each card grow to show the full summary. */
    white-space: pre-line;
    word-break: break-word;
    padding: 0 0 0 12px;
    margin: -6px 18px 0;
  }
  .guide-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    margin-top: auto; /* pin to card bottom for both text-only and logo variants */
    padding: 0 18px 13px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    white-space: nowrap;
  }
  /* Pills（来源 / 岗位方向 / 岗位类型）— quiet neutral chips that read
     on the white body (the glassy white recipe only worked on the old
     full-card pastel wash). */
  .guide-card-source {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    background: rgba(14,14,16,0.05);
    box-shadow: inset 0 0 0 1px rgba(14,14,16,0.05);
    padding: 3px 10px;
    color: #38383d;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }
  /* 日期角标（选填）— same mono treatment as .job-card-cover-date. Rides
     the right edge of the company head band when there is one, else the
     right end of the meta row (both are flex rows, so margin-left:auto
     does the pinning in either home). */
  .guide-card-date {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(14,14,16,0.55);
    letter-spacing: 0.08em;
    white-space: nowrap;
    line-height: 1;
  }
  .guide-card-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    color: rgba(14,14,16,0.4);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 160ms ease, transform 160ms ease;
  }
  /* When the date sits in the meta row it takes over the auto push; the
     arrow keeps just the row gap so the pair reads as one right cluster. */
  .guide-card-date + .guide-card-arrow { margin-left: 0; }
  @media (max-width: 640px) {
    .guide-card { min-height: 96px; border-radius: 16px; }
    .guide-card-head { padding: 10px 16px; }
    .guide-card-title { padding: 15px 16px 0; }
    .guide-card-head + .guide-card-title { padding-top: 0; }
    .guide-card-summary { margin: -6px 16px 0; }
    .guide-card-meta { padding: 0 16px 12px; }
    /* Touch has no hover — keep the external-link arrow always visible. */
    .guide-card-arrow { opacity: 1; transform: translate(0, 0); }
  }

  /* ---------- company detail page ---------- */
  .company-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow-y: auto;
    background: #f7f7f5;
    padding: 42px max(24px, calc((100vw - 1280px) / 2)) 72px;
  }
  .company-detail-page {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 0 24px;
  }
  .company-detail-close {
    position: fixed;
    top: 22px;
    right: max(22px, calc((100vw - 1280px) / 2));
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(14,14,16,0.10);
    background: rgba(255,255,255,0.92);
    color: #2b2b31;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px -18px rgba(14,14,16,0.42);
    cursor: pointer;
    z-index: 82;
  }
  .company-detail-close:hover {
    background: #ffffff;
    border-color: rgba(14,14,16,0.18);
  }
  .company-detail-hero {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    min-height: 300px;
    border-radius: 18px;
    border: 1px solid rgba(14,14,16,0.08);
    background: #ffffff;
    padding: 48px 48px;
    box-shadow:
      0 34px 70px -44px rgba(14,14,16,0.30),
      0 4px 14px -8px rgba(14,14,16,0.08);
  }
  .company-detail-logo-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .company-detail-logo {
    width: 116px;
    height: 116px;
    border-radius: 26px;
    border: 1px solid rgba(14,14,16,0.08);
    background: #ffffff;
    object-fit: contain;
    padding: 10px;
    box-shadow: 0 20px 42px -30px rgba(14,14,16,0.40);
  }
  .company-detail-logo.company-card-logo-fallback {
    color: #0e0e10;
    padding: 20px;
  }
  .company-detail-logo svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .company-detail-hero-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .company-detail-title {
    margin: 0;
    color: #202126;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 680;
    line-height: 1.06;
    letter-spacing: 0;
  }
  .company-detail-subtitle {
    margin: 0;
    max-width: 920px;
    color: #42434a;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: clamp(18px, 2.3vw, 26px);
    line-height: 1.42;
    letter-spacing: 0;
  }
  .company-detail-actions,
  .company-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .company-detail-action,
  .company-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(14,14,16,0.08);
    background: #f3f3f1;
    color: #23242a;
    padding: 7px 14px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 580;
    line-height: 1;
    text-decoration: none;
  }
  .company-detail-action {
    background: rgba(10,135,247,0.08);
    color: #0969da;
  }
  .company-detail-action:hover {
    background: rgba(10,135,247,0.13);
  }
  .company-detail-pill.is-strong {
    color: #1f2937;
    background: #ffffff;
    border-color: rgba(14,14,16,0.12);
  }
  .company-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 32px;
  }
  .company-detail-panel {
    border-radius: 18px;
    border: 1px solid rgba(14,14,16,0.06);
    background: #ffffff;
    padding: 34px 36px;
    min-height: 210px;
    box-shadow:
      0 30px 60px -44px rgba(14,14,16,0.28),
      0 3px 10px -8px rgba(14,14,16,0.10);
  }
  .company-detail-panel--wide {
    grid-column: 1 / -1;
  }
  .company-detail-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    color: #202126;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 22px;
    font-weight: 620;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .company-detail-panel-title::before {
    content: none;
  }
  .company-detail-intro-panel {
    min-height: 0;
  }
  .company-detail-intro-text {
    margin: 0;
    color: #4f515a;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    font-weight: 420;
    line-height: 1.72;
    letter-spacing: 0;
    white-space: pre-line;
  }
  .company-detail-team-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .company-detail-member {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-width: 0;
  }
  .company-detail-member-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #eef5ff;
    color: #0969da;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 18px;
    font-weight: 680;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .company-detail-member-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .company-detail-member-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .company-detail-member-main,
  .company-detail-member-head {
    min-width: 0;
  }
  .company-detail-member-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .company-detail-member-name {
    color: #202126;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 18px;
    font-weight: 610;
    line-height: 1.35;
  }
  .company-detail-member-title {
    margin-top: 3px;
    color: #777983;
    font-size: 15px;
    line-height: 1.45;
  }
  .company-detail-socials {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
  .company-detail-socials a {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #0e0e10;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
  }
  .company-detail-socials a:nth-child(2n) {
    background: #0a66c2;
  }
  .company-detail-socials a.has-brand-logo {
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.08);
    color: inherit;
    padding: 4px;
    box-shadow: 0 4px 10px -7px rgba(14,14,16,0.28);
  }
  .company-detail-socials a.has-brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
  }
  .company-detail-link-rows,
  .company-detail-job-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .company-detail-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
  }
  .company-detail-product-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 5px 0;
    color: #202126;
    text-decoration: none;
  }
  .company-detail-product-pill span:not(.company-detail-chevron) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2a2b31;
    font-size: 14px;
    font-weight: 570;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(14,14,16,0.24);
    text-underline-offset: 5px;
  }
  .company-detail-product-pill:hover {
    background: transparent;
  }
  .company-detail-product-pill:hover span:not(.company-detail-chevron) {
    color: #0a87f7;
    text-decoration-color: rgba(10,135,247,0.48);
  }
  .company-detail-news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .company-detail-news-row {
    display: grid;
    grid-template-columns: 10px minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(14,14,16,0.06);
  }
  .company-detail-news-row:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .company-detail-news-row:last-child {
    padding-bottom: 0;
  }
  .company-detail-news-index {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #b8bbc3;
    display: block;
    justify-self: center;
  }
  .company-detail-news-date {
    min-width: 0;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #202126;
    font-size: 13.5px;
    font-weight: 560;
  }
  .company-detail-news-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
    color: #8b8d97;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 560;
    line-height: 1.45;
  }
  .company-detail-news-title span:not(.company-detail-chevron) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .company-detail-chevron {
    flex: 0 0 auto;
    width: 8px;
    min-width: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: #a0a2aa;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    margin-left: auto;
    transform: scaleX(0.72);
    transform-origin: right center;
  }
  .company-detail-news-title:hover {
    color: #0a87f7;
  }
  .company-detail-funding-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .company-detail-funding-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 0 0 18px;
  }
  .company-detail-funding-item:last-child {
    padding-bottom: 0;
  }
  .company-detail-funding-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 1px;
    background: rgba(14,14,16,0.10);
  }
  .company-detail-funding-item:last-child::before {
    display: none;
  }
  .company-detail-funding-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 3px solid #ffffff;
    background: #0a87f7;
    box-shadow: 0 0 0 1px rgba(10,135,247,0.25);
    margin-top: 3px;
  }
  .company-detail-funding-main {
    min-width: 0;
  }
  .company-detail-funding-round {
    color: #202126;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
  }
  .company-detail-funding-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
  }
  .company-detail-funding-meta span {
    flex: 0 0 auto;
    color: #8b8d97;
    font-weight: 560;
  }
  .company-detail-funding-meta strong {
    min-width: 0;
    color: #3c3d44;
    font-weight: 520;
    overflow-wrap: anywhere;
  }
  .company-detail-expand-btn {
    margin-top: 14px;
    border: 1px solid rgba(14,14,16,0.08);
    border-radius: 999px;
    background: rgba(246,247,249,0.88);
    color: #3f424b;
    min-height: 30px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .company-detail-expand-btn:hover {
    border-color: rgba(10,135,247,0.20);
    color: #0a87f7;
  }
  .company-detail-link-row,
  .company-detail-job-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(14,14,16,0.06);
    color: #202126;
    text-decoration: none;
  }
  .company-detail-link-row:first-child,
  .company-detail-job-row:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .company-detail-row-kicker {
    min-width: 0;
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b8d97;
    font-size: 13px;
    font-weight: 560;
  }
  .company-detail-row-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2a2b31;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
  }
  .company-detail-row-title--full {
    grid-column: 1 / 3;
  }
  .company-detail-link-row:hover .company-detail-row-title,
  .company-detail-job-row:hover strong {
    color: #0a87f7;
  }
  .company-detail-link-row .company-detail-chevron,
  .company-detail-job-row .company-detail-chevron,
  .company-detail-product-pill .company-detail-chevron {
    color: #a0a2aa;
  }
  .company-detail-job-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 0;
  }
  .company-detail-job-row strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #202126;
    font-size: 18px;
    font-weight: 560;
    line-height: 1.35;
  }
  .company-detail-job-row small {
    display: block;
    margin-top: 6px;
    color: #858792;
    font-size: 14px;
    line-height: 1.3;
  }
  .company-detail-bottom-actions {
    display: flex;
    justify-content: center;
    padding: 2px 0 0;
  }
  .company-detail-share-pill {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(10,135,247,0.18);
    background: rgba(10,135,247,0.08);
    color: #0a6ed1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
  }
  .company-detail-share-pill:hover {
    background: rgba(10,135,247,0.13);
  }
  @media (max-width: 860px) {
    .company-detail-backdrop {
      padding: 22px 14px 48px;
    }
    .company-detail-close {
      top: 14px;
      right: 14px;
    }
    .company-detail-hero {
      grid-template-columns: 1fr;
      gap: 22px;
      min-height: 0;
      padding: 34px 24px 30px;
    }
    .company-detail-logo-wrap {
      justify-content: flex-start;
    }
    .company-detail-logo {
      width: 94px;
      height: 94px;
      border-radius: 22px;
    }
    .company-detail-grid {
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 20px;
    }
    .company-detail-panel {
      padding: 26px 22px;
      min-height: 0;
    }
    .company-detail-member-head {
      flex-direction: column;
      gap: 12px;
    }
    .company-detail-socials {
      justify-content: flex-start;
    }
    .company-detail-link-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }
    .company-detail-row-kicker {
      grid-column: 1 / -1;
      max-width: none;
    }
    .company-detail-row-title {
      font-size: 15px;
    }
  }
  @media (max-width: 640px) {
    .company-card--feed { min-height: 0; }
    .company-card--feed .company-card-body-wrap {
      padding: 18px 16px 40px;
    }
    .company-card-main-row {
      margin: -18px -16px 0;
      padding: 18px 16px 16px;
    }
    .company-card-preview-list a {
      grid-template-columns: 7px minmax(0, 1fr);
      gap: 2px;
    }
    .company-card-preview-list a small {
      grid-column: 2;
      max-width: 100%;
    }
    .company-detail-title {
      font-size: 30px;
    }
    .company-detail-subtitle {
      font-size: 18px;
    }
    .company-detail-panel-title {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .company-detail-member {
      grid-template-columns: minmax(0, 1fr);
      gap: 13px;
    }
    .company-detail-member-avatar {
      width: 44px;
      height: 44px;
      font-size: 16px;
    }
  }

  /* Company details opened from the feed use a modal sheet. The standalone
     /c/:id link is server-rendered separately and keeps the /j/:id page shell. */
  .company-detail-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(14,14,16,0.42);
    padding: 24px;
  }
  .company-detail-page {
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    margin: 0;
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(14,14,16,0.08);
    background: #ffffff;
    box-shadow: 0 30px 60px -20px rgba(14,14,16,0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .company-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    box-shadow: none;
    z-index: 3;
  }
  .company-detail-hero {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid rgba(14,14,16,0.06);
    border-radius: 0;
    padding: 20px 56px 18px 22px;
    box-shadow: none;
    flex: 0 0 auto;
    background:
      radial-gradient(140% 110% at 100% 0%, rgba(56,182,248,0.10), transparent 62%),
      linear-gradient(135deg, rgba(10,135,247,0.035) 0%, rgba(255,255,255,0) 70%);
  }
  .company-detail-logo-wrap {
    justify-content: flex-start;
  }
  .company-detail-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    padding: 7px;
    box-shadow:
      0 8px 22px -10px rgba(14,14,16,0.22),
      0 2px 6px -2px rgba(14,14,16,0.08);
  }
  .company-detail-logo.company-card-logo-fallback {
    padding: 9px;
  }
  .company-detail-hero-main {
    gap: 9px;
  }
  .company-detail-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.3px;
  }
  .company-detail-subtitle {
    max-width: none;
    font-size: 13px;
    line-height: 1.55;
    color: #5a5a62;
  }
  .company-detail-actions,
  .company-detail-pills {
    gap: 7px;
  }
  .company-detail-action,
  .company-detail-pill {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }
  .company-detail-pill {
    color: #1f2937;
    background: #ffffff;
    border-color: rgba(14,14,16,0.12);
  }
  button.company-detail-action {
    cursor: pointer;
  }
  .company-detail-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 16px;
    flex: 1 1 auto;
    margin: 0;
    padding: 18px 22px 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 34px;
    min-height: 0;
  }
  .company-detail-panel,
  .company-detail-panel--wide {
    grid-column: auto;
  }
  .company-detail-panel {
    flex: 0 0 auto;
    min-height: 0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: none;
    background: rgba(255,255,255,0.72);
  }
  .company-detail-panel-title {
    margin-bottom: 12px;
    color: #3a3a42;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .company-detail-team-list {
    gap: 16px;
  }
  .company-detail-member {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }
  .company-detail-member-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
  .company-detail-member-head {
    gap: 10px;
  }
  .company-detail-member-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .company-detail-member-title {
    font-size: 12.5px;
    line-height: 1.5;
  }
  .company-detail-socials a {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
  }
  .company-detail-socials a.has-brand-logo {
    padding: 4px;
  }
  .company-detail-product-grid {
    gap: 8px 18px;
  }
  .company-detail-product-pill {
    min-height: 32px;
    border-radius: 0;
    padding: 4px 0;
  }
  .company-detail-product-pill span:not(.company-detail-chevron) {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
  }
  .company-detail-news-row {
    padding: 11px 0;
    gap: 8px;
  }
  .company-detail-news-index {
    width: 5px;
    height: 5px;
  }
  .company-detail-news-date {
    max-width: 88px;
    color: #202126;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
  }
  .company-detail-news-title {
    font-size: 12.5px;
    color: #8b8d97;
    font-weight: 400;
    line-height: 1.5;
  }
  .company-detail-chevron {
    width: 8px;
    min-width: 8px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
  }
  .company-detail-funding-item {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 16px;
  }
  .company-detail-funding-round {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
  }
  .company-detail-funding-meta {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
  }
  .company-detail-row-kicker {
    max-width: 112px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
  }
  .company-detail-row-title {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
  }
  .company-detail-job-row {
    padding: 13px 0;
  }
  .company-detail-job-row strong {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
  }
  .company-detail-job-row small {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .company-detail-expand-btn,
  .company-detail-share-pill {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
  }
  @media (max-width: 640px) {
    .company-detail-backdrop {
      align-items: flex-end;
      padding: 0;
    }
    .company-detail-page {
      max-height: 92vh;
      border-radius: 22px 22px 0 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
    }
    .company-detail-hero {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      padding: 18px 52px 16px 18px;
    }
    .company-detail-logo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
    }
    .company-detail-title {
      font-size: 17px;
    }
    .company-detail-grid {
      padding: 16px 16px 30px;
      gap: 14px;
    }
    .company-detail-product-grid {
      grid-template-columns: 1fr;
    }
    .company-detail-news-row {
      grid-template-columns: 10px minmax(0, 1fr);
    }
    .company-detail-news-date {
      grid-column: 2;
      max-width: none;
    }
    .company-detail-news-title {
      grid-column: 2;
    }
    .company-detail-panel {
      padding: 16px;
    }
    .company-detail-member-head {
      flex-direction: column;
    }
    .company-detail-link-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }
    .company-detail-row-kicker {
      grid-column: 1 / -1;
      max-width: none;
    }
  }

  /* ---------- job card ---------- */
  .job-card {
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.08);
    border-radius: 18px;
    /* No outer padding — .job-card-cover bleeds to the rounded edge, and
       .job-card-body-wrap below carries its own padding. */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 280px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    box-shadow: 0 1px 2px rgba(14,14,16,0.03);
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .job-card:hover {
    border-color: rgba(14,14,16,0.18);
    box-shadow: 0 14px 32px -16px rgba(14,14,16,0.18);
    transform: translateY(-2px);
  }
  .job-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #0e0e10;
    color: #ffffff;
    border-radius: 999px;
    padding: 3px 10px;
    font-family: 'Geist', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    width: fit-content;
  }
  /* Muted pastel pills — low-alpha tinted background + deep colored text so
     each tag still reads as a color cue but doesn't punch through the warm
     off-white canvas. Same hue family as before, just dialed back. */
  .job-card-badge.tone-amber  { background: rgba(249,115,22,0.12); color: #b45309; }  /* 国内大厂 — orange */
  .job-card-badge.tone-rose   { background: rgba(244,63,94,0.12);  color: #be123c; }  /* 知名外企 — rose */
  .job-card-badge.tone-purple { background: rgba(59,130,246,0.12); color: #0969da; }  /* 独角兽 — violet */
  .job-card-badge.tone-emerald{ background: rgba(16,185,129,0.12); color: #047857; }  /* 知名初创 — green */
  .job-card-badge.tone-blue   { background: rgba(59,130,246,0.12); color: #1d4ed8; }  /* 明星团队 — blue */
  .job-card-badge.tone-slate  { background: rgba(71,85,105,0.10);  color: #475569; }  /* 发布类型 — slate */
  .job-card-org {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    /* Eyebrow above the role title — kept lighter than the title (17px/600)
       but bumped to 14px + a deeper ink so the company, a primary scan
       anchor on a hiring feed, doesn't read as too quiet. */
    font-size: 14px;
    font-weight: 500;
    color: #3a3a42;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  /* Logo avatar shown next to the org name on each feed card. Matches the
     same BRAND_CATALOG used by the marquee, so a posting like "字节跳动 / AI
     Lab" shows the ByteDance mark. Unmatched orgs render an initial-letter
     fallback (LinkedIn-style) so the row keeps a consistent block shape. */
  .job-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.08);
    padding: 4px;
    flex-shrink: 0;
  }
  .job-card-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e10;
    color: #ffffff;
    border: none;
    padding: 0;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
  }
  .job-card-title {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #0e0e10;
    line-height: 1.3;
    letter-spacing: -0.3px;
    /* Long aggregated role strings like "C 端 AI 产品经理 / AI Agent 工程师 /
       机器学习算法" otherwise wrap and push every other element down,
       breaking the grid rhythm. Hard-clamp the title to a single line
       with an ellipsis so all cards on the feed share the same title
       height — featured cards override below to keep their two-line
       editorial serif treatment. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .job-card-body {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: #4a4a52;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
  }
  .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f3f1;
    color: #38383d;
    border-radius: 999px;
    padding: 4px 9px;
    font-family: 'Geist', sans-serif;
    font-size: 11px;
    font-weight: 500;
  }
  .meta-pill.tone-purple { background: rgba(67,56,202,0.1); color: #4338ca; }
  .meta-pill.tone-blue   { background: rgba(37,99,235,0.1); color: #3b82f6; }
  .meta-pill.tone-emerald{ background: rgba(5,150,105,0.1); color: #047857; }
  .meta-pill.tone-amber  { background: rgba(180,83,9,0.1); color: #92400e; }

  /* ---------- Feed card cover (brand-tinted banner) ----------
     56px gradient band at the top. Logo sits in the lower-left and
     overhangs into the body by ~20px (LinkedIn / 小红书 avatar-over-
     banner). Three tone palettes (pink / violet / amber) picked from
     cardTone(p) — same hash family as hero card tones. */
  .job-card-cover {
    position: relative;
    height: 76px;
    flex-shrink: 0;
    /* The card's outer .job-card clips to its 18px border-radius so the
       cover's gradient still respects the rounded corners — no
       overflow:hidden needed here. */
  }
  .job-card-cover.tone-pink {
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #fde4ef 0%, #f5cee0 50%, #e8c7e4 100%);
  }
  .job-card-cover.tone-violet {
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #e1edfa 0%, #c8def4 50%, #b3d4f0 100%);
  }
  .job-card-cover.tone-amber {
    /* One saturation notch below the old #fde2b3/#f9cf95 ramp so the warm
       covers accent the cool page instead of competing with it. */
    background:
      radial-gradient(ellipse 80% 100% at 30% 0%, rgba(255,255,255,0.55), transparent 60%),
      linear-gradient(135deg, #fdf6e5 0%, #f7e7c9 50%, #eed8b2 100%);
  }
  .job-card-cover-logo {
    position: absolute;
    left: 16px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid rgba(14,14,16,0.06);
    object-fit: contain;
    padding: 5px;
    box-shadow:
      0 4px 10px -2px rgba(14,14,16,0.14),
      0 1px 2px rgba(14,14,16,0.06);
    z-index: 2;
  }
  .job-card-cover-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e10;
    color: #ffffff;
    border: none;
    padding: 0;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
  }
  /* Wrapper for the cover badges (company_tag, poster_type, …). Sits in
     the top-right of the cover so multiple pills can render side-by-side
     without each one needing its own absolute offset. */
  .job-card-cover-badges {
    position: absolute;
    top: 10px;
    right: 14px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }
  .job-card-cover-badge {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 3px 10px;
    color: #0e0e10;
    white-space: nowrap;
    line-height: 1;
    box-shadow: 0 2px 5px -1px rgba(14,14,16,0.12);
    letter-spacing: 0.02em;
  }
  .job-card-cover-badge.tone-amber  { color: #b45309; }
  .job-card-cover-badge.tone-rose   { color: #be123c; }
  .job-card-cover-badge.tone-purple { color: #0969da; }
  .job-card-cover-badge.tone-emerald{ color: #047857; }
  .job-card-cover-badge.tone-blue   { color: #1d4ed8; }
  .job-card-cover-badge.tone-slate  { color: #475569; }
  .job-card-cover-date {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(14,14,16,0.55);
    letter-spacing: 0.08em;
    white-space: nowrap;
    line-height: 1;
  }

  /* Body wrapper — owns the padding that .job-card used to have.
     Logo now sits entirely inside the cover, so the body's top padding
     is just normal breathing room (no overhang to accommodate). */
  .job-card-body-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px 18px;
    min-height: 0;
  }

  /* Hover affordance — a violet arrow that fades in + slides right at
     the bottom-right of the card. Mirrors the "Read →" micro-interaction
     on the hero floating cards, telling the user the whole card is a
     clickable handle into the detail sheet. */
  .job-card-arrow {
    position: absolute;
    bottom: 16px;
    right: 18px;
    color: #0a87f7;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1;
  }
  .job-card:hover .job-card-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* 浏览数（👁 N）— 常驻卡片右下角的低调小标，和上面的 hover 箭头共用同一个
     角落坐标。hover 时浏览数淡出、箭头淡入，二者永不同时出现 → 不会重叠。
     pointer-events:none：纯展示，点击穿透到整张卡片（卡片本身是打开详情的句柄）。 */
  .job-card-views {
    position: absolute;
    bottom: 16px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: rgba(14,14,16,0.42);
    opacity: 1;
    transition: opacity 180ms ease;
    pointer-events: none;
    z-index: 1;
  }
  .job-card-views svg { opacity: 0.8; }
  .job-card:hover .job-card-views { opacity: 0; }

  /* Magazine-style left-rule bullets — replaces the previous wall of
     raw description text. Filled from cardBullets(p) which extracts
     numbered list items or sentence splits. */
  .job-card-bullets {
    margin: 4px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid #93c5fd;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .job-card-bullets li {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 12.5px;
    color: #4a4a52;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Expanded card visual emphasis — slight border darken + softer shadow,
     marking it as the "focused read" in the grid. */
  .job-card.is-expanded {
    border-color: rgba(14,14,16,0.18);
    box-shadow:
      0 8px 24px -8px rgba(14,14,16,0.12),
      0 2px 4px rgba(14,14,16,0.04);
    z-index: 2;
  }
  /* Inline expand panel — sits at the bottom of an expanded card.
     Mono section labels match the editorial dateline / story-no DNA. */
  .card-expand {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed rgba(14,14,16,0.14);
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: default;
  }
  .card-section { display: flex; flex-direction: column; gap: 6px; }
  .card-section-label {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #94949c;
    text-transform: uppercase;
  }
  .card-section-body {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: #38383d;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .card-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .card-contact-code {
    flex: 1;
    min-width: 0;
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: #0e0e10;
    background: #f3f3f1;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    user-select: all;
  }
  /* Matches the hero floating card's "Read" CTA — flat inline-flex blue
     text + icon, gap-on-hover micro-animation; reads as a quiet action
     hint rather than a heavy pill button. */
  .card-copy-btn {
    font-family: 'Geist', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    background: none;
    color: #0a87f7;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: gap 160ms ease, color 160ms ease;
    flex-shrink: 0;
  }
  .card-copy-btn:hover { color: #0969da; gap: 7px; }
  .card-expand-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
  }
  .card-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Geist', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #5a5a62;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 140ms ease, background 140ms ease;
  }
  .card-collapse-btn:hover {
    color: #0e0e10;
    background: rgba(14,14,16,0.04);
  }