/* ============================================================
   Remotix — refined design language
   Warm, comfortable, accessible. Layered on the brand tokens.
   Tokens that tweaks control (accent, density, radius, dark)
   are written to :root from JS; everything else lives here.
   ============================================================ */

:root {
  /* surfaces — warm paper, not stark white */
  --rx-bg:         #fbfaf7;
  --rx-surface:    #ffffff;
  --rx-surface-2:  #f5f3ee;
  --rx-surface-3:  #efece4;
  --rx-text:       #16181d;
  --rx-text-2:     #3d424b;
  --rx-muted:      #6a6f78;
  --rx-faint:      #9499a2;
  --rx-border:     #e7e2d8;
  --rx-border-2:   #ded8cc;

  /* accent — only --rx-accent is set by the tweak; rest derive from it */
  --rx-accent:      #0072b1;
  --rx-accent-700:  color-mix(in srgb, var(--rx-accent) 82%, #000);
  --rx-accent-ink:  #ffffff;
  --rx-accent-soft: color-mix(in srgb, var(--rx-accent) 12%, var(--rx-surface));
  --rx-accent-line: color-mix(in srgb, var(--rx-accent) 34%, var(--rx-surface));

  --rx-green:  #14854a;
  --rx-green-soft: #e3f3ea;
  --rx-amber:  #b3650a;
  --rx-amber-soft: #f8eddb;
  --rx-rose:   #c5295a;
  --rx-rose-soft: #fbe7ee;

  /* shape (radius overwritten by tweak) */
  --rx-r:    14px;
  --rx-r-sm: 10px;
  --rx-r-lg: 22px;
  --rx-lg: var(--rx-r-lg); /* alias: card containers reference --rx-lg */
  --rx-r-pill: 999px;

  /* density (row-pad + scale overwritten by tweak) */
  --rx-pad:   18px;
  --rx-scale: 1;

  --rx-shadow:    0 1px 2px rgba(20,22,28,.05), 0 1px 3px rgba(20,22,28,.04);
  --rx-shadow-md: 0 4px 14px rgba(20,22,28,.07), 0 1px 3px rgba(20,22,28,.05);
  --rx-shadow-lg: 0 24px 60px rgba(20,22,28,.13), 0 6px 18px rgba(20,22,28,.07);
  --rx-ring: 0 0 0 3px color-mix(in srgb, var(--rx-accent) 38%, transparent);

  --rx-ease: cubic-bezier(.32,.72,.32,1);
  --rx-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html.dark {
  --rx-bg:         #0c0e12;
  --rx-surface:    #15181e;
  --rx-surface-2:  #1b1f26;
  --rx-surface-3:  #232832;
  --rx-text:       #f1f2f4;
  --rx-text-2:     #c5c9d0;
  --rx-muted:      #949aa4;
  --rx-border:     #272d36;
  --rx-border-2:   #323844;
  --rx-accent-ink: #ffffff;
  --rx-accent-soft:color-mix(in srgb, var(--rx-accent) 20%, var(--rx-surface));
  --rx-accent-line:color-mix(in srgb, var(--rx-accent) 36%, var(--rx-surface));
  --rx-green-soft: #122a1d;
  --rx-amber-soft: #2c2010;
  --rx-rose-soft:  #2c121d;
  --rx-shadow:    0 1px 2px rgba(0,0,0,.4);
  --rx-shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --rx-shadow-lg: 0 26px 64px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--rx-bg);
  color: var(--rx-text);
  font-family: var(--rx-font);
  font-size: calc(15px * var(--rx-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--rx-accent) 22%, transparent); }

/* universal accessible focus */
:focus-visible {
  outline: none;
  box-shadow: var(--rx-ring);
  border-radius: var(--rx-r-sm);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--rx-r);
  border: 1px solid var(--rx-border-2);
  background: var(--rx-surface);
  color: var(--rx-text);
  font-weight: 700; font-size: calc(14.5px * var(--rx-scale));
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:hover { border-color: var(--rx-accent); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--rx-accent); color: var(--rx-accent-ink);
  border-color: transparent; box-shadow: var(--rx-shadow-md);
}
.btn-primary:hover { background: var(--rx-accent-700); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--rx-surface-2); border-color: transparent; }
.btn-soft { background: var(--rx-accent-soft); color: var(--rx-accent-700); border-color: transparent; }
html.dark .btn-soft { color: color-mix(in srgb, var(--rx-accent) 78%, #fff); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: calc(16px * var(--rx-scale)); border-radius: var(--rx-r); }
.btn-icon { padding: 0; width: 44px; min-height: 44px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- pills / chips / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--rx-r-pill);
  background: var(--rx-surface-2); border: 1px solid var(--rx-border);
  color: var(--rx-muted); font-weight: 700; font-size: calc(12.5px * var(--rx-scale));
}
.tag {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--rx-r-pill);
  background: var(--rx-surface-2); border: 1px solid var(--rx-border);
  color: var(--rx-text-2); font-weight: 600; font-size: calc(12.5px * var(--rx-scale));
  cursor: pointer; transition: border-color .14s, color .14s, background .14s;
}
.tag:hover { border-color: var(--rx-accent); color: var(--rx-text); }
.tag.is-on { background: var(--rx-accent); color: var(--rx-accent-ink); border-color: transparent; }
.badge-new {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(10.5px * var(--rx-scale)); font-weight: 800; letter-spacing: .04em;
  color: var(--rx-green); background: var(--rx-green-soft);
  border-radius: var(--rx-r-pill); padding: 2px 8px; text-transform: uppercase;
}
.badge-feat {
  color: var(--rx-amber); background: var(--rx-amber-soft);
  font-size: calc(10.5px * var(--rx-scale)); font-weight: 800; letter-spacing: .04em;
  border-radius: var(--rx-r-pill); padding: 2px 8px; text-transform: uppercase;
}

/* ---------- logo squares (company placeholders) ---------- */
.logo-sq {
  flex: none; display: grid; place-items: center;
  border-radius: var(--rx-r-sm); color: #fff; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* ---------- save heart ---------- */
.save {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--rx-r-pill);
  border: 0; background: transparent; cursor: pointer;
  color: var(--rx-muted); transition: color .15s, background .15s, transform .12s;
}
.save:hover { color: var(--rx-rose); background: var(--rx-rose-soft); }
.save svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.save.is-saved { color: var(--rx-rose); }
.save.is-saved svg { fill: currentColor; }
.save.pop { animation: heartpop .32s var(--rx-ease); }
@keyframes heartpop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* scrollbars (subtle) */
.rx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.rx-scroll::-webkit-scrollbar-thumb { background: var(--rx-border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.rx-scroll::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- multi-select (chips dropdown) — shared by Post & Profile edit ---------- */
.rxp-ms { position: relative; }
.rxp-ms-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px;
  padding: 7px 10px; border: 1px solid var(--rx-border-2); border-radius: var(--rx-r); background: var(--rx-bg);
  cursor: text; transition: border-color .15s, box-shadow .15s; }
.rxp-ms-control.is-open { border-color: var(--rx-accent); box-shadow: var(--rx-ring); }
.rxp-ms-control input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: calc(15px * var(--rx-scale)); color: var(--rx-text); padding: 4px 2px; }
.rxp-ms-control input::placeholder { color: var(--rx-faint); }
.rxp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px 5px 11px; border-radius: var(--rx-r-pill);
  background: var(--rx-accent-soft); color: var(--rx-accent-700); font-weight: 700; font-size: calc(13px * var(--rx-scale)); }
html.dark .rxp-chip { color: color-mix(in srgb, var(--rx-accent) 84%, #fff); }
.rxp-chip-x { display: grid; place-items: center; width: 19px; height: 19px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--rx-accent) 22%, transparent); color: inherit; cursor: pointer; }
.rxp-chip-x:hover { background: var(--rx-accent); color: var(--rx-accent-ink); }
.rxp-ms-menu { position: absolute; z-index: 9500; top: calc(100% + 6px); left: 0; right: 0; max-height: 240px; overflow-y: auto;
  background: var(--rx-surface); border: 1px solid var(--rx-border-2); border-radius: var(--rx-r); box-shadow: var(--rx-shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rxp-ms-menu[hidden] { display: none; }
.rxp-ms-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 10px 12px; border-radius: var(--rx-r-sm); font-family: inherit; font-weight: 600; font-size: calc(14px * var(--rx-scale));
  color: var(--rx-text); cursor: pointer; }
.rxp-ms-opt:hover { background: var(--rx-surface-2); }
.rxp-ms-create { color: var(--rx-accent); font-weight: 800; }
.rxp-ms-create svg { color: var(--rx-accent); }
.rxp-select-wrap { position: relative; }
.rxp-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 38px; }
.rxp-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--rx-muted); pointer-events: none; }

/* ===== Browse page (from rx-browse-style.jsx) ===== */
  .rx-browse { max-width: 1280px; margin: 0 auto; padding: 28px 36px 90px; }

  /* ---- header + search ---- */
  .rx-browse-head h1 { margin: 0; font-size: calc(31px * var(--rx-scale)); font-weight: 800;
    letter-spacing: -.028em; line-height: 1.08; }
  .rx-browse-head p { margin: 7px 0 0; color: var(--rx-muted); font-size: calc(15.5px * var(--rx-scale)); }

  .rx-searchbar {
    display: flex; align-items: center; gap: 6px; margin-top: 22px;
    background: var(--rx-surface); border: 1px solid var(--rx-border-2);
    border-radius: var(--rx-r); padding: 6px 6px 6px 16px; box-shadow: var(--rx-shadow);
    transition: border-color .15s, box-shadow .15s;
  }
  .rx-searchbar:focus-within { border-color: var(--rx-accent); box-shadow: var(--rx-ring); }
  .rx-search-ic { color: var(--rx-muted); flex: none; }
  .rx-searchbar input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: calc(16px * var(--rx-scale)); color: var(--rx-text);
    height: 44px; font-weight: 600;
  }
  .rx-searchbar input::placeholder { color: var(--rx-faint); font-weight: 500; }
  .rx-search-clear {
    width: 38px; height: 38px; border: 0; background: transparent; border-radius: 999px;
    color: var(--rx-muted); cursor: pointer; display: grid; place-items: center; flex: none;
  }
  .rx-search-clear:hover { background: var(--rx-surface-2); color: var(--rx-text); }
  .rx-filter-toggle {
    display: none; align-items: center; gap: 7px; height: 44px; padding: 0 16px; flex: none;
    border: 1px solid var(--rx-border-2); border-radius: var(--rx-r); background: var(--rx-surface-2);
    color: var(--rx-text); font-weight: 700; font-size: calc(14.5px * var(--rx-scale)); cursor: pointer;
  }
  .rx-fcount { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--rx-accent); color: var(--rx-accent-ink); font-size: 12px; font-weight: 800; }

  /* ---- body grid: filters + results ---- */
  .rx-browse-body { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 26px; margin-top: 26px; align-items: start; }
  .rx-browse-body.no-filters { grid-template-columns: minmax(0,1fr); }

  .rx-filters {
    position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--rx-surface); border: 1px solid var(--rx-border);
    border-radius: var(--rx-lg); padding: 20px; box-shadow: var(--rx-shadow);
  }
  .rx-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .rx-filters-head h2 { margin: 0; font-size: calc(17px * var(--rx-scale)); font-weight: 800; }
  .rx-clear { border: 0; background: transparent; color: var(--rx-accent); font-weight: 700;
    font-size: calc(13px * var(--rx-scale)); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
  .rx-clear:hover { background: var(--rx-accent-soft); }

  .rx-fgroup { padding: 16px 0; border-top: 1px solid var(--rx-border); }
  .rx-fgroup:first-of-type { border-top: 0; padding-top: 8px; }
  .rx-fgroup-label { font-size: calc(12px * var(--rx-scale)); font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--rx-muted); margin-bottom: 11px; }
  .rx-chipwrap { display: flex; flex-wrap: wrap; gap: 7px; }

  .rx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rx-seg button {
    min-height: 38px; border: 1px solid var(--rx-border); border-radius: var(--rx-r-sm);
    background: var(--rx-surface); color: var(--rx-text-2); font-weight: 700;
    font-size: calc(13.5px * var(--rx-scale)); cursor: pointer; transition: all .14s;
  }
  .rx-seg button:hover { border-color: var(--rx-accent); }
  .rx-seg button.is-on { background: var(--rx-accent); color: var(--rx-accent-ink); border-color: transparent; }

  .rx-salary input[type=range] { width: 100%; accent-color: var(--rx-accent); height: 28px; }
  .rx-salary-val { font-weight: 800; font-size: calc(15px * var(--rx-scale)); color: var(--rx-accent-700); }
  html.dark .rx-salary-val { color: color-mix(in srgb, var(--rx-accent) 80%, #fff); }

  .rx-newonly { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 0 4px; border-top: 1px solid var(--rx-border); cursor: pointer; }
  .rx-newonly span { display: flex; flex-direction: column; }
  .rx-newonly b { font-size: calc(14px * var(--rx-scale)); font-weight: 700; }
  .rx-newonly i { font-style: normal; font-size: calc(12.5px * var(--rx-scale)); color: var(--rx-muted); }
  .rx-switch { flex: none; width: 46px; height: 28px; border: 0; border-radius: 999px;
    background: var(--rx-border-2); cursor: pointer; position: relative; transition: background .16s; }
  .rx-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .16s; }
  .rx-switch.is-on { background: var(--rx-accent); }
  .rx-switch.is-on i { transform: translateX(18px); }

  /* ---- results bar ---- */
  .rx-results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .rx-results-count { color: var(--rx-muted); font-size: calc(14.5px * var(--rx-scale)); }
  .rx-results-count b { color: var(--rx-text); font-weight: 800; }
  .rx-sort { display: flex; align-items: center; gap: 8px; color: var(--rx-muted);
    font-size: calc(13.5px * var(--rx-scale)); font-weight: 700; }
  .rx-sort select {
    font-family: inherit; font-weight: 700; font-size: calc(14px * var(--rx-scale));
    color: var(--rx-text); background: var(--rx-surface); border: 1px solid var(--rx-border-2);
    border-radius: var(--rx-r-sm); padding: 9px 12px; cursor: pointer;
  }

  /* ---- rows ---- */
  .rx-rows { display: flex; flex-direction: column; gap: 12px; }
  .rx-row {
    display: flex; gap: 16px; align-items: flex-start;
    padding: var(--rx-pad); background: var(--rx-surface);
    border: 1px solid var(--rx-border); border-radius: var(--rx-lg);
    cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; box-shadow: var(--rx-shadow);
  }
  .rx-row:hover { border-color: var(--rx-accent-line); box-shadow: var(--rx-shadow-md); transform: translateY(-1px); }
  .rx-row.is-feat { border-color: var(--rx-accent-line); background:
    linear-gradient(0deg, var(--rx-surface), var(--rx-surface)) padding-box,
    linear-gradient(var(--rx-accent-soft), var(--rx-surface)) border-box; }
  .rx-row-main { flex: 1; min-width: 0; }
  .rx-row-titleline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .rx-row-titleline h3 { margin: 0; font-size: calc(18px * var(--rx-scale)); font-weight: 800;
    letter-spacing: -.01em; line-height: 1.2; }
  .rx-row-company { margin-top: 3px; color: var(--rx-text-2); font-weight: 600; font-size: calc(14.5px * var(--rx-scale)); }
  .rx-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; }
  .rx-meta-i { display: inline-flex; align-items: center; gap: 6px; color: var(--rx-muted);
    font-size: calc(13.5px * var(--rx-scale)); font-weight: 600; }
  .rx-meta-i svg { color: var(--rx-faint); }
  .rx-sal-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--rx-accent);
    font-weight: 700; text-decoration: none; cursor: pointer; }
  .rx-sal-lock:hover { text-decoration: underline; }
  .rx-row-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
  .rx-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; min-width: 92px; }
  .rx-posted { color: var(--rx-muted); font-size: calc(13px * var(--rx-scale)); font-weight: 600; }
  .rx-applicants { color: var(--rx-faint); font-size: calc(12.5px * var(--rx-scale)); }
  .rx-applied { display: inline-flex; align-items: center; gap: 5px; color: var(--rx-green);
    background: var(--rx-green-soft); font-weight: 800; font-size: calc(12.5px * var(--rx-scale));
    padding: 4px 10px; border-radius: 999px; }

  /* ---- grid cards ---- */
  .rx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .rx-card { display: flex; flex-direction: column; padding: var(--rx-pad); background: var(--rx-surface);
    border: 1px solid var(--rx-border); border-radius: var(--rx-lg); cursor: pointer; box-shadow: var(--rx-shadow);
    transition: border-color .15s, box-shadow .15s, transform .1s; }
  .rx-card:hover { border-color: var(--rx-accent-line); box-shadow: var(--rx-shadow-md); transform: translateY(-2px); }
  .rx-card.is-feat { border-color: var(--rx-accent-line); }
  .rx-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .rx-card-titleline { display: flex; gap: 7px; margin-top: 14px; min-height: 17px; }
  .rx-card h3 { margin: 7px 0 0; font-size: calc(17.5px * var(--rx-scale)); font-weight: 800; letter-spacing: -.01em; }
  .rx-card-company { margin-top: 3px; color: var(--rx-text-2); font-weight: 600; font-size: calc(14px * var(--rx-scale)); }
  .rx-card-summary { margin: 11px 0 0; color: var(--rx-muted); font-size: calc(14px * var(--rx-scale)); line-height: 1.5;
    text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rx-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
  .rx-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 15px;
    padding-top: 14px; border-top: 1px solid var(--rx-border); }
  .rx-card-salary { font-weight: 800; font-size: calc(15px * var(--rx-scale)); }

  /* ---- split view ---- */
  .rx-split { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 16px;
    height: calc(100vh - 230px); min-height: 520px; }
  .rx-split-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 6px; }
  .rx-crow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 11px 12px; border: 1px solid transparent; border-radius: var(--rx-r); background: var(--rx-surface);
    cursor: pointer; transition: all .13s; }
  .rx-crow:hover { background: var(--rx-surface-2); }
  .rx-crow.is-active { background: var(--rx-accent-soft); border-color: var(--rx-accent-line); }
  .rx-crow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rx-crow-title { display: flex; align-items: center; gap: 7px; font-weight: 800;
    font-size: calc(14.5px * var(--rx-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rx-crow-sub { color: var(--rx-muted); font-size: calc(13px * var(--rx-scale)); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rx-dot-new { width: 8px; height: 8px; border-radius: 50%; background: var(--rx-green); flex: none; }

  .rx-split-preview { background: var(--rx-surface); border: 1px solid var(--rx-border);
    border-radius: var(--rx-lg); overflow-y: auto; box-shadow: var(--rx-shadow); }
  .rx-prev { padding: 28px; }
  .rx-prev-head { display: flex; gap: 15px; align-items: flex-start; }
  .rx-prev-titles { flex: 1; min-width: 0; }
  .rx-prev-titles h2 { margin: 0; font-size: calc(23px * var(--rx-scale)); font-weight: 800; letter-spacing: -.02em; }
  .rx-prev-company { margin-top: 4px; color: var(--rx-text-2); font-weight: 600; font-size: calc(15px * var(--rx-scale)); }
  .rx-prev .rx-meta { margin-top: 18px; }
  .rx-prev-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .rx-prev-summary { margin: 18px 0 0; color: var(--rx-text-2); line-height: 1.62; font-size: calc(15px * var(--rx-scale)); text-wrap: pretty; }
  .rx-prev-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .rx-prev-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--rx-text-2); font-size: calc(14.5px * var(--rx-scale)); line-height: 1.5; }
  .rx-prev-list svg { color: var(--rx-accent); margin-top: 3px; flex: none; }
  .rx-prev-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

  /* ---- table ---- */
  .rx-table-wrap { background: var(--rx-surface); border: 1px solid var(--rx-border);
    border-radius: var(--rx-lg); overflow: hidden; box-shadow: var(--rx-shadow); }
  .rx-table { width: 100%; border-collapse: collapse; }
  .rx-table thead th { text-align: left; padding: 13px 18px; font-size: calc(12px * var(--rx-scale));
    font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--rx-muted);
    background: var(--rx-surface-2); border-bottom: 1px solid var(--rx-border); }
  .rx-table tbody tr { border-bottom: 1px solid var(--rx-border); cursor: pointer; transition: background .12s; }
  .rx-table tbody tr:last-child { border-bottom: 0; }
  .rx-table tbody tr:hover { background: var(--rx-surface-2); }
  .rx-table td { padding: 12px 18px; font-size: calc(14px * var(--rx-scale)); color: var(--rx-text-2); vertical-align: middle; }
  .rx-tcell { display: flex; align-items: center; gap: 12px; }
  .rx-tcell-txt { display: flex; flex-direction: column; }
  .rx-tcell-txt b { font-size: calc(14.5px * var(--rx-scale)); font-weight: 800; color: var(--rx-text);
    display: flex; align-items: center; gap: 7px; }
  .rx-tcell-txt i { font-style: normal; font-size: calc(12.5px * var(--rx-scale)); color: var(--rx-muted); }
  .rx-tnum { font-weight: 800; color: var(--rx-text); font-variant-numeric: tabular-nums; }
  .rx-tmuted { color: var(--rx-muted); }

  /* ---- empty state ---- */
  .rx-empty { text-align: center; padding: 70px 20px; }
  .rx-empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--rx-surface-2);
    color: var(--rx-muted); display: grid; place-items: center; margin: 0 auto 18px; }
  .rx-empty h3 { margin: 0 0 6px; font-size: calc(19px * var(--rx-scale)); font-weight: 800; }
  .rx-empty p { margin: 0 auto 18px; max-width: 380px; color: var(--rx-muted); font-size: calc(14.5px * var(--rx-scale)); line-height: 1.5; }

  @media (max-width: 1080px) {
    .rx-browse { padding: 24px 24px 80px; }
    .rx-filter-toggle { display: flex; }
    .rx-browse-body { grid-template-columns: minmax(0,1fr); }
    .rx-filters { position: static; max-height: none; }
    .rx-split { grid-template-columns: minmax(0,1fr); height: auto; }
    .rx-split-preview { display: none; }
  }

/* ===== Job detail + apply (from rx-detail-style.jsx) ===== */
  .rx-scrim { position: fixed; inset: 0; z-index: 9000; background: rgba(16,18,24,.42);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; justify-content: flex-end; animation: rxfade .2s ease; }
  @keyframes rxfade { from { opacity: 0; } }
  .rx-drawer { width: min(620px, 100%); height: 100%; background: var(--rx-bg);
    overflow-y: auto; overflow-x: hidden; box-shadow: var(--rx-shadow-lg); animation: rxslide .32s var(--rx-ease);
    display: flex; flex-direction: column; }
  @keyframes rxslide { from { transform: translateX(40px); opacity: .5; } }

  .rx-dt-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
    justify-content: space-between; padding: 14px 18px; background: color-mix(in srgb, var(--rx-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rx-border); }
  .rx-dt-back { padding: 0 12px; min-height: 40px; color: var(--rx-text-2); }

  .rx-dt-hero { display: flex; gap: 16px; align-items: flex-start; padding: 26px 30px 0; }
  .rx-dt-hero-main { flex: 1; min-width: 0; }
  .rx-dt-badges { display: flex; gap: 7px; min-height: 18px; }
  .rx-dt-hero h1 { margin: 9px 0 0; font-size: calc(27px * var(--rx-scale)); font-weight: 800;
    letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
  .rx-dt-company { margin-top: 5px; color: var(--rx-text-2); font-weight: 600; font-size: calc(15.5px * var(--rx-scale)); }

  .rx-dt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 24px 30px 0; }
  .rx-fact { display: flex; align-items: center; gap: 12px; padding: 13px 15px;
    background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: var(--rx-r); }
  .rx-fact-ic { width: 38px; height: 38px; border-radius: var(--rx-r-sm); display: grid; place-items: center;
    background: var(--rx-accent-soft); color: var(--rx-accent); flex: none; }
  html.dark .rx-fact-ic { color: color-mix(in srgb, var(--rx-accent) 80%, #fff); }
  .rx-fact-txt { display: flex; flex-direction: column; min-width: 0; }
  .rx-fact-txt i { font-style: normal; font-size: calc(12px * var(--rx-scale)); color: var(--rx-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; }
  .rx-fact-txt b { font-size: calc(15px * var(--rx-scale)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .rx-dt-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 22px 30px 0; }
  .rx-dt-section { padding: 26px 30px 0; }
  .rx-dt-section h2 { margin: 0 0 11px; font-size: calc(17px * var(--rx-scale)); font-weight: 800; letter-spacing: -.01em; }
  .rx-dt-section p { margin: 0; color: var(--rx-text-2); line-height: 1.65; font-size: calc(15.5px * var(--rx-scale)); text-wrap: pretty; overflow-wrap: anywhere; }
  .rx-dt-section { min-width: 0; }
  .rx-dt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .rx-dt-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--rx-text-2);
    font-size: calc(15px * var(--rx-scale)); line-height: 1.55; }
  .rx-dt-list svg { color: var(--rx-accent); margin-top: 2px; flex: none; }
  .rx-dt-perks { display: flex; flex-wrap: wrap; gap: 9px; }
  .rx-perk { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--rx-r-pill);
    background: var(--rx-surface-2); border: 1px solid var(--rx-border); font-weight: 700; font-size: calc(13.5px * var(--rx-scale)); }
  .rx-perk svg { color: var(--rx-accent); }

  .rx-dt-spacer { flex: 1; min-height: 30px; }
  .rx-dt-actions { position: sticky; bottom: 0; margin-top: 18px; padding: 16px 30px 20px;
    background: color-mix(in srgb, var(--rx-bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rx-border); }
  .rx-dt-actions-info { display: flex; align-items: center; gap: 9px; color: var(--rx-muted);
    font-size: calc(13px * var(--rx-scale)); font-weight: 600; margin-bottom: 12px; }
  .rx-dt-actions-info svg { color: var(--rx-green); flex: none; }
  .rx-dt-actions-btns { display: flex; gap: 11px; }
  .rx-dt-actions-btns .btn-primary,
  .rx-dt-actions-btns .rx-applied-btn { flex: 1; }
  /* already-applied: full-size button, green + non-clickable (matches Apply now size) */
  .rx-applied-btn { background: var(--rx-green); color: #fff; border-color: transparent;
    cursor: default; pointer-events: none; justify-content: center; }
  .rx-applied-btn svg { color: #fff; }
  .rx-save-lbl svg { fill: none; }                /* empty heart when not saved (CSS overrides the rendered fill attr) */
  .rx-save-lbl.is-on { color: var(--rx-rose); border-color: var(--rx-rose); }
  .rx-save-lbl.is-on svg { fill: currentColor; }  /* fill the heart when saved (not just a red border) */

  /* ---- apply ---- */
  .rx-apply-head { padding: 18px 30px 0; }
  .rx-apply-head h1 { margin: 0; font-size: calc(23px * var(--rx-scale)); font-weight: 800; letter-spacing: -.02em; }
  .rx-apply-co { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--rx-text-2);
    font-weight: 700; font-size: calc(14.5px * var(--rx-scale)); }

  .rx-stepper { display: flex; align-items: center; gap: 0; list-style: none; margin: 22px 0 0; padding: 0; }
  .rx-stepper li { display: flex; align-items: center; gap: 9px; color: var(--rx-muted); font-weight: 700;
    font-size: calc(13.5px * var(--rx-scale)); }
  .rx-stepper li:not(:last-child)::after { content: ''; width: 38px; height: 2px; margin: 0 12px;
    background: var(--rx-border-2); border-radius: 2px; }
  .rx-step-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--rx-surface-2); border: 1px solid var(--rx-border-2); font-size: 13px; font-weight: 800; }
  .rx-stepper li.active { color: var(--rx-text); }
  .rx-stepper li.active .rx-step-dot { background: var(--rx-accent); color: var(--rx-accent-ink); border-color: transparent; }
  .rx-stepper li.done { color: var(--rx-green); }
  .rx-stepper li.done .rx-step-dot { background: var(--rx-green); color: #fff; border-color: transparent; }

  .rx-apply-body { padding: 24px 30px 30px; flex: 1; display: flex; flex-direction: column; }
  .rx-apply-intro { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px;
    background: var(--rx-accent-soft); border-radius: var(--rx-r); margin-bottom: 20px; }
  .rx-apply-intro svg { color: var(--rx-accent); flex: none; margin-top: 1px; }
  .rx-apply-intro p { margin: 0; font-size: calc(14.5px * var(--rx-scale)); color: var(--rx-text-2); line-height: 1.5; font-weight: 600; }

  .rx-review-card { border: 1px solid var(--rx-border); border-radius: var(--rx-lg); background: var(--rx-surface); overflow: hidden; }
  .rx-review-row { display: flex; align-items: center; gap: 13px; padding: 18px; border-bottom: 1px solid var(--rx-border); }
  .rx-review-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rx-review-id b { font-size: calc(16px * var(--rx-scale)); font-weight: 800; }
  .rx-review-id i { font-style: normal; color: var(--rx-muted); font-size: calc(13.5px * var(--rx-scale)); }
  .rx-review-edit { border: 1px solid var(--rx-border-2); background: var(--rx-surface); border-radius: var(--rx-r-pill);
    padding: 8px 16px; font-weight: 700; font-size: calc(13px * var(--rx-scale)); color: var(--rx-text); cursor: pointer; }
  .rx-review-edit:hover { border-color: var(--rx-accent); color: var(--rx-accent); }
  .rx-review-fields { margin: 0; padding: 8px 18px 16px; }
  .rx-review-fields > div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rx-border); }
  .rx-review-fields > div:last-child { border-bottom: 0; }
  .rx-review-fields dt { width: 88px; flex: none; color: var(--rx-muted); font-weight: 700; font-size: calc(13.5px * var(--rx-scale)); }
  .rx-review-fields dd { margin: 0; font-weight: 600; font-size: calc(14px * var(--rx-scale)); color: var(--rx-text); }
  .rx-review-fields dd.rx-faint { color: var(--rx-faint); font-weight: 500; }
  .rx-review-attach { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--rx-green);
    font-weight: 700; font-size: calc(13.5px * var(--rx-scale)); }

  /* resume attach */
  .rx-attach-label { display: block; margin: 22px 0 9px; font-weight: 800; font-size: calc(14px * var(--rx-scale)); color: var(--rx-text); }
  .rx-resume { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--rx-border-2);
    border-radius: var(--rx-r); background: var(--rx-surface); cursor: pointer; transition: border-color .15s, background .15s; }
  .rx-resume:hover { border-color: var(--rx-accent); }
  .rx-resume.is-set { border-style: solid; }
  .rx-resume:not(.is-set) { border-style: dashed; }
  .rx-resume-ext { flex: none; width: 40px; height: 48px; border-radius: 7px; display: grid; place-items: center; color: #fff;
    font-weight: 900; font-size: calc(11px * var(--rx-scale)); background: var(--rx-muted); }
  .rx-resume-ext.ext-pdf { background: #dc2626; } .rx-resume-ext.ext-doc, .rx-resume-ext.ext-docx { background: #2563eb; }
  .rx-resume-ext.empty { background: var(--rx-surface-3); color: var(--rx-muted); }
  .rx-resume-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rx-resume-txt b { font-size: calc(14.5px * var(--rx-scale)); font-weight: 800; word-break: break-word; }
  .rx-resume-txt i { font-style: normal; color: var(--rx-muted); font-size: calc(12.5px * var(--rx-scale)); }
  .rx-resume-act { flex: none; padding: 8px 15px; border-radius: var(--rx-r-pill); background: var(--rx-accent-soft);
    color: var(--rx-accent-700); font-weight: 800; font-size: calc(13px * var(--rx-scale)); }
  html.dark .rx-resume-act { color: color-mix(in srgb, var(--rx-accent) 84%, #fff); }

  .rx-apply-foot { margin-top: auto; padding-top: 26px; }
  .rx-apply-foot .btn-primary { width: 100%; }
  .rx-apply-foot-note { display: block; text-align: center; margin-top: 11px; color: var(--rx-muted); font-size: calc(13px * var(--rx-scale)); }

  /* ---- form ---- */
  .rx-form { display: flex; flex-direction: column; gap: 16px; }
  .rx-field { display: flex; flex-direction: column; gap: 7px; }
  .rx-field-label { font-weight: 700; font-size: calc(14px * var(--rx-scale)); color: var(--rx-text); }
  .rx-field input, .rx-field textarea, .rx-input {
    font-family: inherit; font-size: calc(15px * var(--rx-scale)); color: var(--rx-text);
    background: var(--rx-surface); border: 1px solid var(--rx-border-2); border-radius: var(--rx-r);
    padding: 13px 15px; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; resize: vertical;
  }
  .rx-field input:focus, .rx-field textarea:focus { border-color: var(--rx-accent); box-shadow: var(--rx-ring); }
  .rx-field-hint { color: var(--rx-muted); font-size: calc(12.5px * var(--rx-scale)); }

  /* ---- done ---- */
  .rx-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 40px 60px; }
  .rx-done-check { width: 84px; height: 84px; border-radius: 50%; background: var(--rx-green); color: #fff;
    display: grid; place-items: center; margin-bottom: 24px; box-shadow: 0 10px 30px color-mix(in srgb, var(--rx-green) 40%, transparent);
    animation: rxpop .45s var(--rx-ease); }
  @keyframes rxpop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .rx-done h1 { margin: 0 0 12px; font-size: calc(27px * var(--rx-scale)); font-weight: 800; letter-spacing: -.02em; }
  .rx-done p { margin: 0; max-width: 380px; color: var(--rx-text-2); line-height: 1.6; font-size: calc(15.5px * var(--rx-scale)); }
  .rx-done-actions { display: flex; gap: 11px; margin-top: 30px; }

  @media (max-width: 560px) {
    .rx-dt-facts { grid-template-columns: 1fr; }
    .rx-dt-hero, .rx-dt-facts, .rx-dt-tags, .rx-dt-section, .rx-apply-head, .rx-apply-body { padding-left: 20px; padding-right: 20px; }
  }

/* detail rendered as a centered page (not a drawer) */
.rx-detailpage{max-width:720px;margin:26px auto 90px;background:var(--rx-surface);border:1px solid var(--rx-border);border-radius:var(--rx-lg);box-shadow:var(--rx-shadow-md);overflow:hidden}
.rx-detailpage .rx-dt-actions{position:static}
.rx-dt-desc{color:var(--rx-text-2);line-height:1.65;font-size:calc(15.5px * var(--rx-scale));overflow-wrap:anywhere;word-break:break-word;min-width:0}
.rx-dt-desc p{margin:0 0 12px;overflow-wrap:anywhere}

/* ===== compatibility aliases: old theme var names -> new design tokens =====
   Lets existing Go-rendered pages (profile, saved, messages, tab bar, …) adopt
   the new palette without rewriting their inline styles. */
:root {
  --rx-panel:        var(--rx-surface);
  --rx-line:         var(--rx-border);
  --rx-input-bg:     var(--rx-surface);
  --rx-input-border: var(--rx-border-2);
  --rx-accent-2:     var(--rx-accent);
  --rx-danger:       var(--rx-rose);
  --rx-card-shadow:  var(--rx-shadow);
  --rx-on-accent:    var(--rx-accent-ink);
  --rx-link:         var(--rx-accent);
}

/* ---- Messages (two-pane chat — from the design's rx-pages-style.jsx) ---- */
.rx-msg-wrap { padding: 0; }
.rx-msg { display: grid; grid-template-columns: 340px minmax(0,1fr); height: 100vh; }
.rx-threads { border-right: 1px solid var(--rx-border); overflow-y: auto; background: var(--rx-surface); }
.rx-threads-head { padding: 24px 22px 12px; position: sticky; top: 0; background: var(--rx-surface); z-index: 2; }
.rx-threads-head h1 { margin: 0; font-size: calc(24px * var(--rx-scale)); font-weight: 800; letter-spacing: -.02em; }
.rx-thread { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; text-decoration: none;
  padding: 14px 18px; border: 0; border-left: 3px solid transparent; background: transparent; cursor: pointer; transition: background .12s; }
.rx-thread:hover { background: var(--rx-surface-2); }
.rx-thread.is-active { background: var(--rx-accent-soft); border-left-color: var(--rx-accent); }
.rx-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rx-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rx-thread-top b { font-size: calc(14.5px * var(--rx-scale)); font-weight: 800; color: var(--rx-text); }
.rx-thread-top time { color: var(--rx-faint); font-size: calc(12px * var(--rx-scale)); flex: none; }
.rx-thread-role { color: var(--rx-accent); font-weight: 700; font-size: calc(12.5px * var(--rx-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .rx-thread-role { color: color-mix(in srgb, var(--rx-accent) 80%, #fff); }
.rx-thread-prev { color: var(--rx-muted); font-size: calc(13.5px * var(--rx-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-thread-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rx-accent);
  color: var(--rx-accent-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; align-self: center; }
.rx-convo { display: flex; flex-direction: column; height: 100vh; background: var(--rx-bg); }
.rx-convo-head { display: flex; align-items: center; gap: 13px; padding: 16px 26px; border-bottom: 1px solid var(--rx-border); background: var(--rx-surface); }
.rx-convo-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-convo-id b { font-size: calc(16px * var(--rx-scale)); font-weight: 800; }
.rx-convo-id i { font-style: normal; color: var(--rx-muted); font-size: calc(13px * var(--rx-scale)); }
.rx-convo-body { flex: 1; overflow-y: auto; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.rx-convo-day { text-align: center; color: var(--rx-faint); font-size: calc(12.5px * var(--rx-scale)); font-weight: 700; margin-bottom: 6px; }
.rx-bubble-row { display: flex; gap: 9px; align-items: flex-end; max-width: 76%; }
.rx-bubble-row.them { align-self: flex-start; }
.rx-bubble-row.me { align-self: flex-end; flex-direction: row-reverse; }
.rx-bubble { padding: 11px 15px; border-radius: 18px; font-size: calc(14.5px * var(--rx-scale)); line-height: 1.5; position: relative;
  white-space: pre-wrap; word-break: break-word; }
.rx-bubble-row.them .rx-bubble { background: var(--rx-surface); border: 1px solid var(--rx-border); color: var(--rx-text); border-bottom-left-radius: 5px; }
.rx-bubble-row.me .rx-bubble { background: var(--rx-accent); color: var(--rx-accent-ink); border-bottom-right-radius: 5px; }
.rx-bubble-time { display: block; margin-top: 4px; font-size: calc(10.5px * var(--rx-scale)); opacity: .6; font-weight: 600; }
.rx-composer { display: flex; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--rx-border); background: var(--rx-surface); }
.rx-composer input { flex: 1; font-family: inherit; font-size: calc(15px * var(--rx-scale)); color: var(--rx-text); background: var(--rx-bg);
  border: 1px solid var(--rx-border-2); border-radius: var(--rx-r-pill); padding: 13px 20px; outline: none; transition: border-color .15s, box-shadow .15s; }
.rx-composer input:focus { border-color: var(--rx-accent); box-shadow: var(--rx-ring); }
.rx-convo-empty { flex: 1; display: grid; place-items: center; color: var(--rx-muted); text-align: center; padding: 40px; }
@media (max-width: 1080px) { .rx-msg { grid-template-columns: minmax(0,1fr); } .rx-msg.has-active .rx-threads { display: none; } .rx-msg:not(.has-active) .rx-convo { display: none; } }