/* =============================================================
   PROJEK — Main Stylesheet
   style.css
   Sections:
     1. CSS Variables & Theming
     2. Reset & Base
     3. Navigation
     4. Buttons
     5. Layout — Home / Filter Panel
     6. Hero Section
     7. Hero Shortcut Cards (hs-*)
     8. Browse / Job Grid (jc-*)
     9. Right Panel & Auth Forms
    10. Cards & Modals
    11. Messages & Chat
    12. Notification Badge & Toast
    13. Dashboard & Stats
    14. Utility (empty, support btn, footer)
    15. Responsive
   ============================================================= */

/* ─── 1. CSS Variables & Theming ─────────────────────────── */
:root {
  --bg:#f0f2f5; --bg2:#f7f8fa; --bg3:#eceef2; --bg4:#e0e3ea;
  --text:#0f172a; --text2:#3d4f66; --text3:#7e95b0;
  --border:#d4d9e2; --border2:#b8c0ce;
  --accent:#2563eb; --accent-h:#1d4ed8; --accent-light:#e8effe; --accent-text:#1d4ed8;
  --accent-rgb:37,99,235;
  --nav-bg:rgba(240,242,245,.94);
  --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.09);
  --shadow-sm:0 1px 2px rgba(0,0,0,.07);
  --shadow-lg:0 8px 32px rgba(0,0,0,.13);
  --glow:0 0 0 3px rgba(37,99,235,.15);
  --input-bg:#ffffff; --panel-bg:#f7f8fa;
  --filter-w:280px; --side-w:380px; --nav-h:64px;
  --radius:12px; --radius-sm:8px; --radius-lg:16px; --radius-xl:20px;
  /* Semantic status colors — override in dark mode below */
  --color-danger-bg:#fef2f2; --color-danger-text:#dc2626; --color-danger-border:#fecaca;
  --color-success-bg:#f0fdf4; --color-success-text:#166534; --color-success-border:#bbf7d0;
  --color-warn-bg:#fffbeb; --color-warn-text:#92400e; --color-warn-border:#fde68a;
  --color-info-bg:var(--accent-light); --color-info-text:var(--accent-text); --color-info-border:rgba(var(--accent-rgb),.2);
}

[data-theme="dark"] {
  --bg:#1a1f2e; --bg2:#222840; --bg3:#263050; --bg4:#2e3a5c;
  --text:#f1f5f9; --text2:#a8bcd4; --text3:#6b82a0;
  --border:#2e3a55; --border2:#3d4f6e;
  --accent:#4f8ef7; --accent-h:#3b7ef5; --accent-light:#1a2d55; --accent-text:#7cb3ff;
  --accent-rgb:79,142,247;
  --nav-bg:rgba(26,31,46,.93);
  --shadow:0 1px 3px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --glow:0 0 0 3px rgba(79,142,247,.25);
  --input-bg:#222840; --panel-bg:#1e2438;
  /* Dark mode semantic overrides */
  --color-danger-bg:rgba(239,68,68,.12); --color-danger-text:#f87171; --color-danger-border:rgba(239,68,68,.3);
  --color-success-bg:rgba(34,197,94,.1); --color-success-text:#4ade80; --color-success-border:rgba(34,197,94,.25);
  --color-warn-bg:rgba(245,158,11,.1); --color-warn-text:#fbbf24; --color-warn-border:rgba(245,158,11,.25);
  --color-info-bg:rgba(79,142,247,.12); --color-info-text:#7cb3ff; --color-info-border:rgba(79,142,247,.25);
}

/* ─── 2. Reset & Base ─────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  transition:background .25s,color .25s;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
.hide { display:none !important; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:10px; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }
@keyframes typingBounce { 0%,80%,100%{transform:scale(.55);opacity:.35} 40%{transform:scale(1);opacity:1} }

/* ─── 3. Navigation ───────────────────────────────────────── */
nav {
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:background .25s;
}
.nav-inner {
  max-width:100%; margin:0 auto;
  display:flex; align-items:center;
  height:var(--nav-h); padding:0 20px; gap:16px;
  /* Reserve space on the right for the fixed nav-right so
     the search bar never slides underneath it */
  padding-right:calc(min(var(--side-w), 100vw) + 8px);
}
.nav-spacer { flex:1; }
.nav-logo {
  display:flex; align-items:center; gap:10px;
  cursor:pointer; flex-shrink:0; user-select:none;
}
.nav-logo .logo-mark {
  width:32px; height:32px; border-radius:9px;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 2px 8px rgba(var(--accent-rgb),.35);
  transition:transform .15s;
}
.nav-logo:hover .logo-mark { transform:scale(1.05); }
.nav-logo .wordmark {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px; font-weight:800; letter-spacing:-.4px; color:var(--text);
}
.nav-search {
  flex:1; max-width:460px;
  display:flex; align-items:center;
  background:var(--bg3); border:1.5px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color .2s,box-shadow .2s,background .2s;
}
.nav-search:focus-within { border-color:var(--accent); box-shadow:var(--glow); background:var(--input-bg); }
.nav-search input {
  flex:1; padding:9px 14px; border:none; outline:none;
  font-size:13.5px; font-family:'Inter',sans-serif;
  background:transparent; color:var(--text); min-width:0;
}
.nav-search input::placeholder { color:var(--text3); }
.nav-search-btn {
  width:36px; height:36px; margin:2px; border-radius:7px; border:none;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; font-size:14px; transition:background .15s;
}
.nav-search-btn:hover { background:var(--accent-h); }
.nav-right {
  /* Fixed to the top-right, exactly above the sliding panel.
     Both share right:0 and the same width, so they're always aligned. */
  position:fixed;
  top:0; right:0;
  height:var(--nav-h);
  width:min(var(--side-w), 100vw);
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px;
  padding-right:20px;
  z-index:101; /* one above nav's z-index:100 */
  /* Match the nav background so it blends in seamlessly */
  background:var(--nav-bg);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-icon-btn {
  width:36px; height:36px; border-radius:9px;
  border:1.5px solid var(--border); background:var(--bg2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all .15s; color:var(--text2);
}
.nav-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.nav-user-chip {
  display:flex; align-items:center; gap:8px;
  padding:5px 12px 5px 6px;
  border:1.5px solid var(--border); border-radius:10px;
  background:var(--bg2); cursor:pointer;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .15s;
}
.nav-user-chip:hover { border-color:var(--accent); color:var(--text); }
.nav-user-chip.panel-open { border-color:var(--accent); background:var(--accent-light); color:var(--accent-text); }
.nav-user-chip .avatar {
  width:24px; height:24px; border-radius:6px;
  background:var(--accent-light);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--accent);
}

/* ─── 4. Buttons ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:8px 16px;
  border-radius:var(--radius-sm); border:1.5px solid transparent;
  font-size:13.5px; font-weight:600; font-family:'Inter',sans-serif;
  cursor:pointer; transition:all .15s; white-space:nowrap; line-height:1.3;
  user-select:none;
}
.btn:active { transform:scale(.97); opacity:.9; }
.btn-primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.btn-primary:hover { opacity:.85; }
.btn-blue { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 1px 3px rgba(var(--accent-rgb),.3); }
.btn-blue:hover { background:var(--accent-h); }
.btn-blue:active { box-shadow:none; }
.btn-accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-h); }
.btn-outline { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-outline:hover { color:var(--text); border-color:var(--text); background:var(--bg3); }
.btn-ghost { background:transparent; color:var(--text2); border-color:transparent; }
.btn-ghost:hover { background:var(--bg3); color:var(--text); }
.btn-danger { background:transparent; color:var(--color-danger-text); border-color:var(--color-danger-border); }
.btn-danger:hover { background:var(--color-danger-bg); border-color:var(--color-danger-text); }
.btn-sm { padding:5px 11px; font-size:12px; border-radius:6px; }
.btn-lg { padding:12px 24px; font-size:15px; border-radius:10px; }
.btn-full { width:100%; justify-content:center; padding:11px; font-size:14px; }
/* Focus visible ring for keyboard accessibility */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }

/* ─── 5. Layout — Home / Filter Panel ────────────────────── */
.home-layout {
  display:grid;
  grid-template-columns:var(--filter-w) 1fr;
  width:100%; min-height:calc(100vh - var(--nav-h));
  align-items:start;
}
.filter-panel {
  position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow-y:auto;
  border-right:1px solid var(--border);
  background:var(--bg2);
  padding:24px 20px;
  display:flex; flex-direction:column;
}
.filter-panel::-webkit-scrollbar { width:3px; }
.fp-section { margin-bottom:0; }

/* ── Filter panel header ── */
.fp-title {
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--text3); margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 0;
}
.fp-title-left { display:flex; align-items:center; gap:6px; }
.fp-collapse-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text3); padding:3px 5px; border-radius:5px;
  line-height:1; transition:all .15s;
  display:flex; align-items:center;
}
.fp-collapse-btn:hover { background:var(--bg3); color:var(--text2); }
.fp-collapse-arrow { display:inline-block; transition:transform .22s; font-size:8px; }
.fp-collapse-arrow.fp-arr-collapsed { transform:rotate(180deg); }

/* ── Collapsible wrapper ── */
.fp-cat-list-wrap {
  overflow:hidden;
  max-height:2000px;
  transition:max-height .3s ease;
}
.fp-cat-list-wrap.fp-cat-collapsed { max-height:0; }

/* ── Category search ── */
.fp-search-wrap {
  position:relative; margin:0 12px 10px;
}
.fp-search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--text3); font-size:13px; pointer-events:none;
}
.fp-search-input {
  width:100%; box-sizing:border-box;
  padding:7px 10px 7px 30px;
  border:1.5px solid var(--border); border-radius:8px;
  background:var(--input-bg); color:var(--text);
  font-size:12.5px; outline:none; transition:border-color .15s;
}
.fp-search-input:focus { border-color:var(--accent); }
.fp-search-input::placeholder { color:var(--text3); }

/* ── Category list ── */
.fp-cat-list { display:flex; flex-direction:column; padding:0 8px; }

/* ── Parent row ── */
.fp-parent {
  display:flex; align-items:center; gap:10px;
  padding:8px 8px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .15s; background:transparent; user-select:none;
  border:none;
}
.fp-parent:hover { background:var(--bg3); color:var(--text); }
.fp-parent.active { color:var(--accent-text); background:var(--accent-light); }

/* ── Custom checkbox ── */
.fp-check {
  width:16px; height:16px; border-radius:4px; flex-shrink:0;
  border:1.5px solid var(--border2); background:var(--input-bg);
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.fp-parent.active .fp-check,
.fp-sub.active .fp-check {
  background:var(--accent); border-color:var(--accent);
}
.fp-check-tick {
  display:none; color:#fff; font-size:10px; line-height:1; font-weight:700;
}
.fp-parent.active .fp-check-tick,
.fp-sub.active .fp-check-tick { display:block; }

/* ── Icon + label ── */
.fp-parent-left { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.fp-cat-svg { width:18px; height:18px; flex-shrink:0; opacity:.6; transition:opacity .15s; }
.fp-parent:hover .fp-cat-svg, .fp-parent.active .fp-cat-svg { opacity:1; }
[data-theme="dark"] .fp-cat-svg { filter:invert(1) brightness(.85); }
.fp-cat-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-chevron { font-size:8px; color:var(--text3); transition:transform .2s; flex-shrink:0; margin-left:auto; }
.fp-chevron.open { transform:rotate(90deg); }

/* ── Sub rows ── */
.fp-subs { overflow:hidden; max-height:0; transition:max-height .25s ease; padding-left:8px; }
.fp-subs.open { max-height:600px; }
.fp-sub {
  display:flex; align-items:center; gap:10px;
  padding:6px 8px; border-radius:7px;
  cursor:pointer; font-size:12.5px; font-weight:400; color:var(--text3);
  transition:all .15s; background:transparent;
}
.fp-sub:hover { background:var(--bg3); color:var(--text2); }
.fp-sub.active { color:var(--accent-text); }
.fp-sub .fp-check {
  width:14px; height:14px; border-radius:3px;
}

/* ── Job card subcategory row ── */
.jc-tags { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.jc-subcat-row {
  flex-basis:100%;
  font-size:11px; color:var(--text3);
  line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jc-subcat-tag { font-size:11px; color:var(--text3); }
.jc-subcat-more { font-size:11px; color:var(--text3); }
.fp-sub-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; border-radius:9px;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; padding:0 5px;
  margin-left:4px; flex-shrink:0;
}

/* ── Subcategory checkbox grid (post/edit job forms) ── */
.sub-check-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:8px; padding:10px 0 4px;
}
.sub-check-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px;
  cursor:pointer; font-size:13px; color:var(--text2);
  border:1.5px solid var(--border); background:var(--bg2);
  transition:all .15s; user-select:none;
}
.sub-check-item:hover { border-color:var(--accent); background:var(--accent-light); color:var(--accent-text); }
.sub-check-item:has(.sub-check-box:checked) {
  border-color:var(--accent); background:var(--accent-light); color:var(--accent-text); font-weight:600;
}
.sub-check-box {
  width:15px; height:15px; accent-color:var(--accent);
  flex-shrink:0; cursor:pointer;
}
.fp-show-more {
  display:block; width:100%; text-align:left;
  padding:7px 16px; margin:2px 0;
  background:none; border:none; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--accent);
  letter-spacing:.4px; text-transform:uppercase;
  transition:color .15s;
}
.fp-show-more:hover { color:var(--accent-h); }

/* ── Divider ── */
.fp-divider { height:1px; background:var(--border); margin:8px 0; }

/* ── Clear ── */
.fp-clear { font-size:11px; font-weight:600; color:var(--accent); cursor:pointer; text-transform:none; letter-spacing:0; }
.fp-clear:hover { text-decoration:underline; }
.home-center {
  padding:0 0 60px;
  min-height:calc(100vh - var(--nav-h));
  border-right:1px solid var(--border);
}
.section { max-width:1000px; margin:0 auto; padding:32px 24px; }
.sec-hd { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:8px; }
.sec-hd h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; letter-spacing:-.4px; }
.sec-hd p { font-size:13px; color:var(--text3); }
.back-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--text3);
  cursor:pointer; padding:7px 13px; margin-bottom:20px;
  background:var(--bg3); border:1.5px solid var(--border); border-radius:8px;
  font-family:'Inter',sans-serif; transition:all .15s;
}
.back-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-light); }

/* ─── 6. Hero Section ─────────────────────────────────────── */
.hero {
  padding:60px 40px 44px;
  background:linear-gradient(135deg,var(--bg) 0%,var(--bg3) 100%);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
[data-theme="dark"] .hero { background:linear-gradient(135deg,var(--bg) 0%,#0d1525 100%); }
.hero::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.07) 0%,transparent 70%);
  pointer-events:none;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-light); color:var(--accent-text);
  border:1px solid rgba(var(--accent-rgb),.2); border-radius:20px;
  padding:4px 12px; font-size:12px; font-weight:600; margin-bottom:18px;
}
.hero-badge .dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); animation:pulse 2s infinite;
}
.hero h1 {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(32px,3.5vw,54px);
  font-weight:800; letter-spacing:-1.5px; line-height:1.12; margin-bottom:12px;
}
.hero h1 span { color:var(--accent); }
.hero .sub { font-size:16px; color:var(--text2); max-width:540px; line-height:1.7; margin-bottom:28px; }
.hero-search {
  display:flex; align-items:center; max-width:680px;
  background:var(--input-bg); border:1.5px solid var(--border2);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.hero-search:focus-within { border-color:var(--accent); box-shadow:var(--glow),var(--shadow); }
.hero-search input {
  flex:1; padding:16px 20px; border:none; outline:none;
  font-size:15px; font-family:'Inter',sans-serif;
  background:transparent; color:var(--text); min-width:0;
}
.hero-search input::placeholder { color:var(--text3); }
.hero-search .btn { margin:5px; flex-shrink:0; }
.hero-loc-sep { width:1px; background:var(--border2); align-self:stretch; margin:10px 0; flex-shrink:0; }
.hero-loc-sel {
  padding:0 12px; border:none; outline:none;
  font-size:13px; font-family:'Inter',sans-serif;
  background:transparent; color:var(--text2);
  cursor:pointer; max-width:120px; flex-shrink:0; align-self:center;
}
.hero-loc-sel:focus { color:var(--text); }
.hero-loc-sel option { background:var(--bg2); color:var(--text); }

/* ─── 7. Hero Shortcut Cards ──────────────────────────────── */
.hs-outer { padding:30px 40px 8px; }
.hs-block { margin-bottom:24px; }
.hs-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.hs-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:20px; font-size:11px; font-weight:700; }
.hs-badge.new-badge { background:rgba(34,197,94,.12); color:#16a34a; border:1px solid rgba(34,197,94,.25); }
.hs-badge.top-badge { background:rgba(245,158,11,.12); color:#d97706; border:1px solid rgba(245,158,11,.25); }
.hs-badge .hs-dot { width:6px; height:6px; border-radius:50%; animation:pulse 2s infinite; }
.new-badge .hs-dot { background:#22c55e; }
.top-badge .hs-dot { background:#f59e0b; }
.hs-sub { font-size:11.5px; color:var(--text3); font-weight:500; }
.hs-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:9px; }
.hs-card {
  background:var(--bg2); border:1.5px solid var(--border); border-radius:11px;
  padding:12px 14px; cursor:pointer; transition:all .18s;
  display:flex; flex-direction:column; gap:5px;
  position:relative; overflow:hidden;
}
.hs-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; border-radius:2px 0 0 2px; opacity:0; transition:opacity .2s;
}
.hs-card.new-card::before { background:linear-gradient(180deg,#22c55e,#16a34a); }
.hs-card.top-card::before { background:linear-gradient(180deg,#f59e0b,#d97706); }
.hs-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.hs-card:hover::before { opacity:1; }
.hs-card:hover.new-card { border-color:rgba(34,197,94,.3); }
.hs-card:hover.top-card { border-color:rgba(245,158,11,.3); }
.hs-card-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:var(--text); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-card-meta { font-size:11.5px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.hs-card-price { font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:800; color:var(--accent); }
.hs-card-age { font-size:10.5px; color:#16a34a; font-weight:600; margin-top:1px; }

/* ─── 8. Browse / Job Grid ────────────────────────────────── */
.browse-area { padding:28px 40px; }
.browse-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.browse-header h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.3px; }
.result-count { font-size:12.5px; color:var(--text3); font-weight:500; }
.active-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.af-chip {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:20px; font-size:11.5px; font-weight:600;
  background:var(--accent-light); color:var(--accent-text);
  border:1px solid rgba(var(--accent-rgb),.2); cursor:pointer;
}
.af-chip:hover { background:rgba(var(--accent-rgb),.2); }
.af-chip .x { font-size:12px; font-weight:700; opacity:.7; }
.jobs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.job-card {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:20px;
  cursor:pointer; transition:all .2s;
  position:relative; overflow:hidden;
}
.job-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),#818cf8);
  opacity:0; transition:opacity .2s;
}
.job-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(var(--accent-rgb),.3); }
.job-card:hover::before { opacity:1; }
.jc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:11px; }
.jc-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; letter-spacing:-.2px; line-height:1.35; margin-bottom:5px; color:var(--text); }
.jc-company { display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text3); font-weight:500; }
.jc-price { text-align:right; flex-shrink:0; padding-left:8px; }
.jc-price .amount { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; color:var(--accent); letter-spacing:-.3px; }
.jc-price .label { font-size:10px; color:var(--text3); margin-top:1px; text-align:right; }
.jc-divider { height:1px; background:var(--border); margin:11px 0; }
.jc-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.jc-tags { display:flex; gap:5px; flex-wrap:wrap; }
.tag { font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--bg3); color:var(--text2); text-transform:uppercase; border:1px solid var(--border); transition:background .15s,border-color .15s; }
.tag.urgent { background:var(--color-danger-bg); color:var(--color-danger-text); border-color:var(--color-danger-border); }
.tag.verified { background:var(--accent-light); color:var(--accent-text); border-color:rgba(var(--accent-rgb),.2); }
.tag.new { background:var(--color-success-bg); color:var(--color-success-text); border-color:var(--color-success-border); }
.jc-rating { display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text3); flex-shrink:0; }
.stars { color:#f59e0b; font-size:12px; letter-spacing:.5px; }
.jc-actions { display:flex; align-items:center; gap:6px; padding-top:2px; }
.jc-like-btn, .jc-bkm-btn {
  display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
  border-radius:7px; border:1.5px solid var(--border); background:var(--bg3);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
  color:var(--text3); font-family:'Inter',sans-serif; line-height:1;
}
.jc-like-btn:hover { border-color:var(--color-danger-text); color:var(--color-danger-text); background:var(--color-danger-bg); }
.jc-like-btn.liked { border-color:var(--color-danger-text); color:var(--color-danger-text); background:var(--color-danger-bg); }
.jc-bkm-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.jc-bkm-btn.bookmarked { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.jc-like-count { font-size:11px; font-weight:700; }
.jc-pin-btn {
  display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
  border-radius:7px; border:1.5px solid var(--border); background:var(--bg3);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
  color:var(--text3); font-family:'Inter',sans-serif; line-height:1; margin-left:auto;
}
.jc-pin-btn:hover { border-color:#f59e0b; color:#d97706; background:#fffbeb; }
.jc-pin-btn.pinned { border-color:#f59e0b; color:#d97706; background:#fffbeb; }
.job-card.pinned-card { border-color:#f59e0b; box-shadow:0 0 0 1.5px rgba(245,158,11,.25),var(--shadow); }
.job-card.pinned-card::before { opacity:1; background:linear-gradient(90deg,#f59e0b,#fbbf24); }
/* Job detail layout */
.job-detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start; }
.detail-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:16px; }
.detail-stat .label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); margin-bottom:4px; }
.detail-stat .value { font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:700; letter-spacing:-.2px; color:var(--text); }

/* ─── 9. Right Panel & Auth Forms ─────────────────────────── */
.rp-wrapper {
  position:fixed; top:var(--nav-h); right:0;
  width:min(var(--side-w), 100vw); height:50vh;
  z-index:90; display:flex; flex-direction:column; pointer-events:none;
}
.rp-clip { flex:1; overflow:hidden; pointer-events:all; }
.home-right {
  height:100%; overflow-y:auto; overflow-x:hidden;
  background:var(--panel-bg);
  border-left:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:22px 18px; display:flex; flex-direction:column; gap:14px;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 4px 20px rgba(0,0,0,.1);
  border-radius:0 0 0 12px;
}
.rp-wrapper.rp-collapsed .home-right { transform:translateY(-100%); }
.rp-wrapper.rp-collapsed .rp-clip { pointer-events:none; }
.home-right::-webkit-scrollbar { width:3px; }
.panel-brand { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.panel-brand .mark {
  width:28px; height:28px; border-radius:8px;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
}
.panel-brand .name { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text); }
.panel-tagline { font-size:12px; color:var(--text3); margin-bottom:18px; }
.auth-tabs { display:flex; background:var(--bg3); border-radius:10px; padding:3px; gap:3px; margin-bottom:18px; }
.auth-tab {
  flex:1; padding:8px 6px; border-radius:8px; border:none;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:all .2s; background:transparent; color:var(--text3);
}
.auth-tab.active { background:var(--bg2); color:var(--accent); box-shadow:var(--shadow-sm); border:1px solid rgba(var(--accent-rgb),.15); }
.auth-panels { position:relative; }
.auth-panel { transition:opacity .22s,transform .22s; }
.auth-panel.hidden { opacity:0; pointer-events:none; position:absolute; top:0; left:0; width:100%; transform:translateY(10px); }
.auth-panel.visible { opacity:1; pointer-events:all; position:relative; transform:translateY(0); }
.panel-divider {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.7px; color:var(--text3); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.panel-divider::before, .panel-divider::after { content:''; flex:1; height:1px; background:var(--border); }
/* Panel form inputs */
.pf-group { margin-bottom:11px; }
.pf-label { display:block; font-size:11px; font-weight:600; color:var(--text2); letter-spacing:.3px; margin-bottom:5px; }
.pf-input {
  width:100%; padding:9px 12px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); font-size:13px; font-family:'Inter',sans-serif;
  outline:none; background:var(--input-bg); color:var(--text);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.pf-input:hover:not(:focus) { border-color:var(--border2); }
.pf-input:focus { border-color:var(--accent); box-shadow:var(--glow); }
select.pf-input { cursor:pointer; }
textarea.pf-input { resize:vertical; min-height:60px; }
.pf-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pf-err { color:var(--color-danger-text); font-size:11.5px; margin-bottom:8px; display:none; font-weight:500; padding:6px 10px; background:var(--color-danger-bg); border-radius:6px; border:1px solid var(--color-danger-border); }
.pf-err.show { display:block; }
.pf-link { font-size:11.5px; color:var(--text3); margin-top:10px; text-align:center; }
.pf-link a { color:var(--accent); font-weight:600; cursor:pointer; }
.pf-link a:hover { text-decoration:underline; }
/* Profile panel (logged-in user) */
.profile-hero {
  background:linear-gradient(135deg,var(--accent-light),var(--bg3));
  border:1.5px solid rgba(var(--accent-rgb),.15);
  border-radius:var(--radius); padding:16px; margin-bottom:4px;
}
.profile-avatar {
  width:46px; height:46px; border-radius:12px;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:10px;
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.3);
}
.profile-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; letter-spacing:-.3px; margin-bottom:2px; }
.profile-action {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg2);
  cursor:pointer; transition:all .15s;
  font-size:13px; font-weight:500; width:100%; text-align:left;
  font-family:'Inter',sans-serif; color:var(--text); margin-bottom:8px;
}
.profile-action:hover { border-color:var(--accent); background:var(--accent-light); color:var(--accent-text); }
.profile-action .pa-icon { width:30px; height:30px; border-radius:8px; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.pa-arrow { margin-left:auto; font-size:11px; color:var(--text3); }

/* ─── 10. Cards & Modals ──────────────────────────────────── */
.card { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--radius); padding:22px; margin-bottom:14px; }
.card h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; letter-spacing:-.2px; margin-bottom:14px; }
.card-tight { padding:16px; }
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:200; padding:20px; backdrop-filter:blur(8px);
  animation:fadeIn .2s ease;
}
.modal {
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); width:100%; max-width:490px;
  max-height:90vh; overflow-y:auto; padding:28px;
  position:relative; box-shadow:var(--shadow-lg);
  animation:slideUp .2s ease;
}
.modal-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; letter-spacing:-.4px; margin-bottom:4px; }
.modal-sub { font-size:13px; color:var(--text3); margin-bottom:22px; }
.modal-close {
  position:absolute; top:18px; right:18px;
  width:30px; height:30px; border-radius:8px;
  background:var(--bg3); border:none; font-size:16px;
  cursor:pointer; color:var(--text3);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.modal-close:hover { background:var(--bg4); color:var(--text); }
/* Modal / form shared inputs */
.fg { margin-bottom:14px; }
.fl { display:block; font-size:11px; font-weight:600; color:var(--text2); letter-spacing:.3px; margin-bottom:5px; }
.fi {
  width:100%; padding:10px 13px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); font-size:13px; font-family:'Inter',sans-serif;
  outline:none; background:var(--input-bg); color:var(--text);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.fi:hover:not(:focus) { border-color:var(--border2); }
.fi:focus { border-color:var(--accent); box-shadow:var(--glow); }
select.fi { cursor:pointer; }
textarea.fi { resize:vertical; min-height:72px; }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.err { color:var(--color-danger-text); font-size:12px; margin-bottom:10px; display:none; font-weight:500; padding:8px 12px; background:var(--color-danger-bg); border-radius:7px; border:1px solid var(--color-danger-border); }
.err.show { display:block; }
.msg-success { background:var(--color-success-bg); border:1px solid var(--color-success-border); color:var(--color-success-text); padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500; margin-bottom:12px; }
.msg-warn { background:var(--color-warn-bg); border:1px solid var(--color-warn-border); color:var(--color-warn-text); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.msg-info { background:var(--color-info-bg); border:1px solid var(--color-info-border); color:var(--color-info-text); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.review-card { background:var(--bg2); border:1.5px solid var(--border); border-radius:12px; padding:16px; margin-bottom:10px; }
.review-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.review-card-left { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:0; }
.review-card-avatar { width:36px; height:36px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; flex-shrink:0; }
.review-card-meta { flex:1; min-width:0; }
.review-card-name { font-weight:700; font-size:14px; color:var(--text); line-height:1.3; }
.review-card-date { font-size:11.5px; color:var(--text3); margin-top:2px; }
.review-card-stars { flex-shrink:0; }
.review-card-job { font-size:12px; color:var(--text3); margin-bottom:8px; display:flex; align-items:center; gap:4px; }
.review-card-title { font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:5px; line-height:1.4; }
.review-card-body { font-size:13.5px; color:var(--text2); line-height:1.65; word-break:break-word; }

/* ─── 11. Messages & Chat ─────────────────────────────────── */

/* ── Conversation List Page ───────────────────────────────── */
.msg-list-page {
  max-width:680px; margin:0 auto; padding:32px 24px 60px;
}
.msg-list-header {
  margin-bottom:22px;
}
.msg-list-header h2 {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:24px; font-weight:800; letter-spacing:-.4px; margin-bottom:4px;
}
.msg-list-header p { font-size:13px; color:var(--text3); }

/* Search bar */
.msg-list-search-wrap {
  position:relative; margin-bottom:20px;
}
.msg-list-search-icon {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:14px; pointer-events:none; opacity:.55;
}
.msg-list-search {
  width:100%; padding:10px 14px 10px 38px;
  border:1.5px solid var(--border); border-radius:10px;
  background:var(--bg2); color:var(--text);
  font-size:13.5px; font-family:'Inter',sans-serif;
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.msg-list-search:focus { border-color:var(--accent); box-shadow:var(--glow); }
.msg-list-search::placeholder { color:var(--text3); }

/* Conversation card list */
.conv-list { display:flex; flex-direction:column; gap:8px; }

.conv-card {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 16px;
  cursor:pointer; transition:all .18s;
  position:relative; overflow:hidden;
}
.conv-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent); opacity:0; transition:opacity .18s;
}
.conv-card:hover {
  border-color:rgba(var(--accent-rgb),.4);
  background:var(--accent-light);
  transform:translateX(2px);
  box-shadow:var(--shadow);
}
.conv-card:hover::before { opacity:1; }
.conv-card-unread {
  border-color:rgba(var(--accent-rgb),.35);
  background:var(--bg2);
}
.conv-card-unread::before { opacity:1; }

/* Avatar */
.conv-avatar-wrap {
  position:relative; flex-shrink:0;
}
.conv-avatar {
  width:48px; height:48px; border-radius:14px;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:.5px; user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.conv-online-dot {
  position:absolute; bottom:-1px; right:-1px;
  width:13px; height:13px; border-radius:50%;
  background:var(--text3); border:2.5px solid var(--bg2);
  transition:background .3s;
}
.conv-online-dot.online { background:#22c55e; }

/* Body */
.conv-body { flex:1; min-width:0; }
.conv-top {
  display:flex; align-items:baseline;
  justify-content:space-between; gap:8px; margin-bottom:4px;
}
.conv-name {
  font-size:14px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.conv-name-unread {
  font-weight:700; color:var(--text);
}
.conv-time {
  font-size:11px; color:var(--text3); flex-shrink:0; white-space:nowrap;
}
.conv-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.conv-preview {
  font-size:12.5px; color:var(--text3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
.conv-preview-unread { color:var(--text2); font-weight:500; }
.conv-badge {
  flex-shrink:0;
  min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:700; font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center;
  animation:badgePop .2s cubic-bezier(.34,1.56,.64,1);
}

/* Empty state */
.conv-empty-state {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:60px 20px;
}
.conv-empty-icon { font-size:48px; margin-bottom:16px; opacity:.7; }
.conv-empty-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px; font-weight:700; color:var(--text); margin-bottom:8px;
}
.conv-empty-sub { font-size:13.5px; color:var(--text3); line-height:1.6; }

/* ── Chat Bubbles ─────────────────────────────────────── */
.msg-bubble {
  padding:10px 14px; border-radius:12px; max-width:78%;
  font-size:13.5px; line-height:1.55; margin-bottom:2px; word-wrap:break-word;
}
.msg-bubble.sent { background:var(--accent); color:#fff; margin-left:auto; border-bottom-right-radius:3px; box-shadow:0 1px 4px rgba(var(--accent-rgb),.3); }
.msg-bubble.received { background:var(--bg3); color:var(--text); border-bottom-left-radius:3px; border:1px solid var(--border); }
.msg-meta { font-size:10.5px; color:var(--text3); margin-top:4px; display:flex; align-items:center; gap:4px; }
.msg-ticks { font-size:12px; font-weight:700; letter-spacing:-1px; margin-left:2px; vertical-align:middle; transition:color .3s; }
.msg-ticks.sent { color:rgba(255,255,255,.6); }
.msg-ticks.read { color:#34d399; }
.msg-status { display:inline-flex; align-items:center; vertical-align:middle; }
.typing-dot { width:7px; height:7px; border-radius:50%; background:var(--text3); animation:typingBounce 1.2s infinite ease-in-out; display:inline-block; }
.typing-dot:nth-child(1) { animation-delay:0s; }
.typing-dot:nth-child(2) { animation-delay:.2s; margin:0 3px; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
/* Sliding message notifications */
.msg-notif-panel { position:fixed; right:0; bottom:80px; z-index:250; display:flex; flex-direction:column; gap:0; pointer-events:none; }
.msg-notif-item {
  display:flex; align-items:stretch; pointer-events:all;
  transform:translateX(calc(100% - 10px));
  transition:transform .35s cubic-bezier(.34,1.2,.64,1);
  will-change:transform; margin-bottom:10px;
}
.msg-notif-item.visible { transform:translateX(0); }
.msg-notif-tab { width:10px; background:var(--accent); border-radius:8px 0 0 8px; flex-shrink:0; cursor:pointer; transition:width .2s,background .15s; }
.msg-notif-item:hover .msg-notif-tab { width:14px; background:var(--accent-h); }
.msg-notif-body {
  background:var(--bg2); border:1.5px solid var(--border); border-right:none;
  border-radius:12px 0 0 12px; padding:13px 16px;
  min-width:260px; max-width:300px;
  cursor:pointer; box-shadow:-4px 4px 20px rgba(0,0,0,.15); transition:background .15s;
}
.msg-notif-item:hover .msg-notif-body { background:var(--accent-light); }
.msg-notif-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.msg-notif-from { display:flex; align-items:center; gap:8px; }
.msg-notif-avatar { width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; flex-shrink:0; }
.msg-notif-name { font-size:13px; font-weight:700; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; }
.msg-notif-close { width:20px; height:20px; border-radius:5px; border:none; background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .15s; flex-shrink:0; padding:0; }
.msg-notif-close:hover { background:var(--bg4); color:var(--text); }
.msg-notif-preview { font-size:12px; color:var(--text3); line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.msg-notif-time { font-size:10.5px; color:var(--text3); margin-top:5px; }

/* ─── 12. Notification Badge & Toast ─────────────────────── */
.notif-btn { position:relative; }
.notif-badge {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid var(--bg);
  font-family:'Inter',sans-serif; line-height:1; pointer-events:none;
  animation:badgePop .2s cubic-bezier(.34,1.56,.64,1);
}
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:11px 22px; border-radius:10px;
  background:var(--text); color:var(--bg);
  font-size:13.5px; font-weight:600; z-index:300;
  opacity:0; transition:opacity .25s,transform .25s;
  pointer-events:none; box-shadow:var(--shadow-lg);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── 13. Dashboard & Stats ───────────────────────────────── */
.stat-row { display:flex; gap:28px; flex-wrap:wrap; }
.dash-stat .val { font-family:'Plus Jakarta Sans',sans-serif; font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--accent); }
.dash-stat .lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* ─── 13b. Dark mode status message overrides ───────────────── */
/* The variables above handle most cases, but inline-style overrides in app.js
   use hardcoded hex colors. These selectors catch common patterns. */
[data-theme="dark"] .hide { display:none !important; }

/* ─── 14. Utility ─────────────────────────────────────────── */
.empty { text-align:center; padding:60px 20px; color:var(--text3); grid-column:1/-1; }
.empty .icon { font-size:42px; margin-bottom:14px; opacity:.6; }
.empty p { font-size:14px; }
/* Support btn hidden — chat widget replaces it */
.support-btn { display: none !important; }
footer {
  display:none; /* hidden on all pages except home — toggled by page-home body class */
  border-top:1px solid var(--border); padding:24px; background:var(--bg2);
}
body.page-home footer { display:block; }
.footer-inner { max-width:100%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { display:flex; align-items:center; gap:9px; }
.footer-logo .mark { width:26px; height:26px; border-radius:7px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; }
.footer-logo .wordmark { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; }
.footer-copy { font-size:12px; color:var(--text3); }

/* ─── 15. Company Sub-Nav & Manage Jobs ─────────────────────── */

/* Company section tab bar */
.co-subnav {
  display:flex; gap:4px; flex-wrap:wrap;
  padding:10px 0 18px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
  overflow-x:auto;
}
.co-subnav-btn {
  padding:7px 14px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--bg3);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  color:var(--text2); cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.co-subnav-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.co-subnav-btn.active {
  background:var(--accent); color:#fff;
  border-color:var(--accent);
  box-shadow:0 1px 4px rgba(var(--accent-rgb),.35);
}

/* Manage Jobs row */
.job-manage-row {
  display:flex; align-items:center;
  justify-content:space-between; gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.job-manage-row:last-child { border-bottom:none; }
.job-manage-row:hover { background:var(--bg3); }
.job-manage-info {
  flex:1; min-width:0; cursor:pointer;
}
.job-manage-title {
  font-weight:600; font-size:14px; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:5px;
}
.job-manage-meta {
  display:flex; flex-wrap:wrap; gap:8px;
  font-size:11.5px; color:var(--text3); align-items:center;
}
.job-manage-meta .tag { font-size:10.5px; }
.job-manage-actions {
  display:flex; gap:6px; align-items:center; flex-shrink:0;
}

/* ─── 16. User Profile ───────────────────────────────────────── */

/* Avatar upload area (own profile) */
.prof-avatar-section { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.prof-avatar-wrap {
  position:relative; cursor:pointer; flex-shrink:0;
  width:90px; height:90px; border-radius:50%;
}
.prof-avatar-wrap:hover .prof-avatar-overlay { opacity:1; }
.prof-avatar-img {
  width:90px; height:90px; border-radius:50%;
  object-fit:cover; display:block;
  border:2.5px solid var(--border);
}
.prof-avatar-placeholder {
  width:90px; height:90px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
  border:2.5px solid var(--border); flex-shrink:0;
  user-select:none;
}
.prof-avatar-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; opacity:0; transition:opacity .18s;
}

/* Static avatar (public profile view) */
.prof-avatar-wrap-static { flex-shrink:0; }

/* Public profile header */
.prof-header { display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.prof-header-info { min-width:0; }
.prof-display-name {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px; font-weight:800; letter-spacing:-.4px; color:var(--text);
}
.prof-meta { font-size:12.5px; color:var(--text3); margin-top:4px; }
.prof-bio {
  font-size:14px; color:var(--text2); line-height:1.7;
  padding-top:14px; border-top:1px solid var(--border);
  margin-top:8px; white-space:pre-wrap; word-break:break-word;
}

/* Responsive: stack avatar on small screens */
@media (max-width:480px) {
  .prof-avatar-section { flex-direction:column; align-items:flex-start; }
  .prof-header { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ─── 17. Responsive ──────────────────────────────────────────── */

/* ── Mobile category pill bar (hidden on desktop) ─────────── */
.mobile-cat-bar { display:none; }

/* ── Mobile filter bottom sheet (hidden on desktop) ─────── */
.mfs-bg { display:none; }

/* ── Global overflow guard ───────────────────────────────── */
html, body { overflow-x:hidden; }
.home-center { overflow-x:hidden; }

/* ── Prevent iOS auto-zoom on input focus (requires font-size≥16px) */
@supports (-webkit-touch-callout: none) {
  .fi, .pf-input, .nav-search input, .hero-search input {
    font-size:16px !important;
  }
}

/* ── iOS safe area insets (notch / home bar) ───────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .rp-wrapper { padding-bottom: env(safe-area-inset-bottom); }
  .support-btn { bottom: max(16px, calc(8px + env(safe-area-inset-bottom))); }
  .toast       { bottom: max(28px, calc(16px + env(safe-area-inset-bottom))); }
}

/* ── 1600px+: cap inner content width on ultra-wide screens ─ */
@media (min-width:1600px) {
  .nav-inner { max-width:1800px; margin:0 auto; }
  .hero        { padding:60px clamp(40px,6vw,120px) 44px; }
  .hs-outer    { padding:30px clamp(40px,6vw,120px) 8px; }
  .browse-area { padding:28px clamp(40px,6vw,120px); }
}

/* ── 1200px: shrink side panel on medium desktops ────────── */
@media (max-width:1200px) {
  :root { --side-w:320px; }
}

/* ── 1024px: laptop / large tablet landscape ─────────────── */
@media (max-width:1024px) {
  :root { --filter-w:230px; --side-w:290px; }
  .hero        { padding:44px 28px 32px; }
  .hs-outer    { padding:24px 28px 8px; }
  .browse-area { padding:20px 28px; }
  .nav-search  { max-width:340px; }
}

/* ── 900px: small laptop / tablet landscape ──────────────── */
@media (max-width:900px) {
  :root { --filter-w:200px; --side-w:270px; }
  .hero        { padding:36px 24px 28px; }
  .hs-outer    { padding:22px 24px 8px; }
  .browse-area { padding:18px 24px; }
  .nav-search  { max-width:280px; }
}

/* ── 768px: tablet portrait — panel becomes bottom sheet ─── */
@media (max-width:768px) {
  /* Right panel: full-width bottom sheet */
  .rp-wrapper {
    top:auto; bottom:0; left:0; right:0;
    width:100%; max-height:78vh; height:auto;
    pointer-events:none;
  }
  .rp-wrapper:not(.rp-collapsed) { pointer-events:all; }
  .rp-clip { height:auto; max-height:78vh; overflow:hidden; }
  .home-right {
    height:auto; max-height:78vh;
    border-radius:20px 20px 0 0;
    border-left:none; border-right:none;
    border-top:1px solid var(--border); border-bottom:none;
    box-shadow:0 -8px 40px rgba(0,0,0,.18);
    /* Slide up from bottom when shown */
    transform:translateY(0);
  }
  /* Collapsed = slide down out of view */
  .rp-wrapper.rp-collapsed .home-right { transform:translateY(100%) !important; }
  /* Expanded = fully visible */
  .rp-wrapper:not(.rp-collapsed) .home-right { transform:translateY(0) !important; }

  /* Dim backdrop when panel is open */
  .rp-backdrop {
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:-1;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
  }
  .rp-wrapper:not(.rp-collapsed) .rp-backdrop {
    opacity:1; pointer-events:all;
  }

  /* Layout */
  .home-layout { grid-template-columns:1fr; }
  .filter-panel { display:none; }
  .home-center { border-right:none; }

  /* ── Mobile category pill bar ──────────────────────── */
  .mobile-cat-bar {
    display:block;
    position:sticky; top:var(--nav-h); z-index:80;
    background:var(--bg2);
    border-bottom:1px solid var(--border);
  }
  .mcb-pills {
    display:flex; gap:7px;
    overflow-x:auto; padding:10px 14px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mcb-pills::-webkit-scrollbar { display:none; }
  .mcb-pill {
    flex-shrink:0; padding:7px 14px; border-radius:20px;
    border:1.5px solid var(--border); background:var(--bg3);
    font-size:13px; font-weight:600; color:var(--text2);
    cursor:pointer; white-space:nowrap; font-family:'Inter',sans-serif;
    transition:background .15s,border-color .15s,color .15s;
    -webkit-tap-highlight-color:transparent;
    display:inline-flex; align-items:center; gap:6px;
  }
  .mcb-pill-icon {
    width:16px; height:16px; flex-shrink:0;
    /* SVGs use stroke=currentColor — invert to match pill text colour */
    filter:invert(40%) sepia(10%) saturate(500%) hue-rotate(180deg);
    transition:filter .15s;
  }
  [data-theme="dark"] .mcb-pill-icon {
    filter:invert(70%) sepia(10%) saturate(300%) hue-rotate(180deg);
  }
  .mcb-pill-active .mcb-pill-icon {
    filter:brightness(0) invert(1); /* white on blue active pill */
  }
  .mcb-pill:active { transform:scale(.95); }
  .mcb-pill-active {
    background:var(--accent); color:#fff; border-color:var(--accent);
  }
  .mcb-pill-more {
    border-style:dashed; color:var(--text3);
  }

  /* ── Mobile filter bottom sheet ─────────────────────── */
  .mfs-bg {
    display:block;
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    z-index:196;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
  }
  .mfs-bg.mfs-open { opacity:1; pointer-events:all; }
  .mfs {
    position:absolute; bottom:0; left:0; right:0;
    background:var(--bg2);
    border-radius:22px 22px 0 0;
    max-height:82vh;
    display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .mfs-bg.mfs-open .mfs { transform:translateY(0); }
  .mfs-handle {
    width:36px; height:4px; border-radius:2px;
    background:var(--border2); margin:12px auto 0; flex-shrink:0;
  }
  .mfs-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px 12px; flex-shrink:0;
    font-size:15px; font-weight:700;
    font-family:'Plus Jakarta Sans',sans-serif;
    border-bottom:1px solid var(--border);
  }
  .mfs-close {
    width:28px; height:28px; border-radius:8px;
    border:none; background:var(--bg3); color:var(--text3);
    cursor:pointer; font-size:14px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .mfs-body {
    flex:1; overflow-y:auto; padding:14px 16px;
    -webkit-overflow-scrolling:touch;
  }
  /* Make filter rows easier to tap on touch screens */
  .mfs-body .fp-parent,
  .mfs-body .fp-sub { min-height:44px; }
  .mfs-footer {
    padding:12px 16px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    border-top:1px solid var(--border); flex-shrink:0;
  }

  /* Nav: hide desktop search, keep it accessible */
  .nav-search { display:none; }
  /* Reset desktop alignment — panel is a bottom sheet, not a sidebar */
  .nav-right { margin-right:0; padding-right:0; }

  /* Hero */
  .hero { padding:28px 16px 22px; }
  .hero .sub { font-size:14px; margin-bottom:22px; }
  /* Hide the hero search bar on mobile — top header search icon handles it */
  .hero-search { display:none; }

  /* Shortcut cards and browse */
  .hs-outer    { padding:20px 16px 8px; }
  .browse-area { padding:16px; }

  /* Job grid: 2 columns on tablet */
  .jobs-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }

  /* Manage Jobs: stack actions below info on tablet */
  .job-manage-row { flex-direction:column; align-items:flex-start; gap:10px; }
  .job-manage-actions { width:100%; justify-content:flex-end; }

  /* Modals: bottom sheet on tablet too */
  .modal-bg { padding:0; align-items:flex-end; }
  .modal { border-radius:20px 20px 0 0; max-height:92vh; padding:24px 20px; }

  /* Message notifications: don't overflow screen */
  .msg-notif-body { max-width:min(300px, calc(100vw - 30px)); }
}

/* ── 600px: large mobile ──────────────────────────────────── */
@media (max-width:600px) {
  /* Nav tighten */
  .nav-inner  { padding:0 12px; gap:10px; }
  .nav-right  { gap:5px; }
  .nav-icon-btn { width:32px; height:32px; font-size:13px; }
  /* Hide user name in chip — keep avatar icon */
  .nav-user-chip span:not(.avatar) { display:none; }
  .nav-user-chip { padding:4px 6px; }
  /* Shrink wordmark on small screens */
  .nav-logo .wordmark { font-size:16px; letter-spacing:-.2px; }

  /* Hero */
  .hero { padding:24px 14px 18px; }
  .hero h1 { font-size:clamp(26px,7vw,38px); letter-spacing:-.8px; }
  .hero .sub { font-size:13px; margin-bottom:18px; }
  /* Location dropdowns hidden on mobile — hero search stays clean */
  .hero-loc-sep, .hero-loc-sel { display:none; }
  .hero-search input { padding:12px 14px; font-size:14px; }
  .hero-search .btn { font-size:13px; padding:8px 14px; }

  /* Cards */
  .card { padding:16px; }
  .jobs-grid { grid-template-columns:1fr; }
  .job-detail-grid { grid-template-columns:1fr; }

  /* Forms */
  .fr { grid-template-columns:1fr; }
  .pf-row { grid-template-columns:1fr; }
  .section { padding:20px 14px; }
  .sec-hd { flex-direction:column; align-items:flex-start; gap:10px; }
  .sec-hd > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }

  /* Shortcut cards */
  .hs-outer { padding:16px 14px 8px; }
  .hs-row { grid-template-columns:1fr 1fr; gap:7px; }

  /* Dashboard stat row */
  .stat-row { gap:16px; }
  .dash-stat .val { font-size:22px; }

  /* Support button */
  .support-btn { bottom:16px; right:14px; padding:8px 12px; font-size:12px; }

  /* Toast */
  .toast { max-width:calc(100vw - 24px); font-size:12.5px; padding:10px 16px; }

  /* Message notifications: narrower */
  .msg-notif-body { min-width:200px; max-width:calc(100vw - 30px); padding:10px 12px; }
  .msg-notif-panel { bottom:60px; }
}

/* ── 480px: small mobile ──────────────────────────────────── */
@media (max-width:480px) {
  .nav-inner { padding:0 10px; gap:8px; }
  /* Wordmark hidden — logo mark only */
  .nav-logo .wordmark { display:none; }
  /* Sign in / For Business buttons slim down */
  .nav-right .btn-ghost.btn-sm { padding:5px 8px; font-size:12px; }
  .nav-right .btn-blue.btn-sm  { padding:5px 10px; font-size:12px; }

  /* Hero full-bleed */
  .hero { padding:20px 12px 16px; }
  .hero-search { border-radius:10px; }

  /* Sections */
  .section    { padding:16px 12px; }
  .hs-outer   { padding:14px 12px 6px; }
  .browse-area { padding:12px; }

  /* Shortcut cards: 1 column on very small screens */
  .hs-row { grid-template-columns:1fr; }

  /* Job card actions: allow wrapping */
  .jc-actions { flex-wrap:wrap; }
  .jc-pin-btn { margin-left:0; }

  /* Job detail stats: 2 per row */
  .detail-stat-grid { grid-template-columns:1fr 1fr; }

  /* Modals edge-to-edge */
  .modal-bg { padding:0; }
  .modal { border-radius:16px 16px 0 0; max-height:96vh; padding:18px 14px; }

  /* Right panel */
  .rp-wrapper { max-height:85vh; }
  .rp-clip, .home-right { max-height:85vh; }
}

/* ═══ 18. Mobile App Shell (≤768px only) ══════════════════════════ */

/* Hidden on desktop by default */
.mob-header,
.mob-bottom-nav,
.mob-drawer-bg,
.mob-drawer,
.mob-search-overlay { display:none; }

/* Ensure mob-bottom-nav is NEVER affected by the global nav{top:0} rule */
.mob-bottom-nav { top:auto !important; }

@media (max-width:768px) {

  /* ── Override desktop nav ──────────────────────────── */
  nav:not(.mob-bottom-nav) { display:none !important; }
  .nav-right { display:none !important; }

  /* Body: pad top for mob-header, bottom for mob-bottom-nav */
  body {
    padding-top: var(--nav-h);
    /* Fallback chain: plain → constant (iOS 11.0-11.2) → env (iOS 11.2+) */
    padding-bottom: 60px;
    padding-bottom: calc(60px + constant(safe-area-inset-bottom));
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* ── Mobile Header ─────────────────────────────── */
  .mob-header {
    display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0;
    height:var(--nav-h); z-index:100;
    padding:0 16px;
    background:var(--nav-bg);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
  }
  .mob-header-left {
    display:flex; align-items:center; gap:10px; cursor:pointer;
  }
  .mob-logo-mark {
    width:32px; height:32px; border-radius:9px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:900;
    font-family:'Plus Jakarta Sans',sans-serif;
    box-shadow:0 2px 8px rgba(var(--accent-rgb),.35);
    cursor:pointer; flex-shrink:0;
  }
  .mob-logo-text {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:18px; font-weight:800; letter-spacing:-.4px;
    color:var(--text); cursor:pointer;
  }
  .mob-header-right {
    display:flex; align-items:center; gap:4px;
  }
  .mob-icon-btn {
    width:40px; height:40px; border-radius:10px;
    border:none; background:transparent;
    display:flex; align-items:center; justify-content:center;
    color:var(--text2); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    transition:background .15s, color .15s;
  }
  .mob-icon-btn:active { background:var(--bg3); color:var(--accent); }
  .mob-icon-btn .notif-badge {
    top:-4px; right:-4px;
    min-width:16px; height:16px; font-size:9px;
  }

  /* ── Custom SVG icon images (bottom nav + header) ─────── */
  /* Inactive tab icons: muted grey */
  .mob-tab-svg {
    display:block;
    filter: invert(55%) sepia(8%) saturate(350%) hue-rotate(185deg) brightness(.95);
    transition: filter .15s;
  }
  [data-theme="dark"] .mob-tab-svg {
    filter: invert(60%) sepia(10%) saturate(250%) hue-rotate(185deg) brightness(.9);
  }
  /* Active tab icons: accent blue */
  .mob-tab-active .mob-tab-svg {
    filter: invert(32%) sepia(90%) saturate(700%) hue-rotate(210deg) brightness(1.05);
  }
  [data-theme="dark"] .mob-tab-active .mob-tab-svg {
    filter: invert(55%) sepia(70%) saturate(500%) hue-rotate(195deg) brightness(1.15);
  }
  /* Header chat icon: match header text colour */
  .mob-hdr-icon {
    display:block;
    filter: invert(40%) sepia(8%) saturate(400%) hue-rotate(185deg);
    transition: filter .15s;
  }
  [data-theme="dark"] .mob-hdr-icon {
    filter: invert(65%) sepia(12%) saturate(300%) hue-rotate(185deg);
  }
  /* Drawer custom-icon imgs */
  .mob-drawer-img {
    width:18px; height:18px; flex-shrink:0;
    filter: invert(45%) sepia(8%) saturate(350%) hue-rotate(185deg);
    transition: filter .15s;
  }
  [data-theme="dark"] .mob-drawer-img {
    filter: invert(62%) sepia(12%) saturate(250%) hue-rotate(185deg);
  }
  .mob-drawer-item:hover .mob-drawer-img,
  .mob-drawer-item:active .mob-drawer-img {
    filter: invert(32%) sepia(90%) saturate(700%) hue-rotate(210deg) brightness(1.05);
  }
  /* Danger item icon stays red */
  .mob-drawer-danger .mob-drawer-img {
    filter: invert(30%) sepia(80%) saturate(800%) hue-rotate(330deg) brightness(1);
  }
  .mob-bottom-nav {
    display:flex;
    position:fixed;
    /* CRITICAL: reset top:0 inherited from the global nav{} rule */
    top: auto !important;
    bottom: 0; left: 0; right: 0;
    /* Base height + safe-area for home indicator — three-step fallback */
    height: 60px;
    height: calc(60px + constant(safe-area-inset-bottom));
    height: calc(60px + env(safe-area-inset-bottom));
    /* Push tab icons above the home indicator line */
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background:var(--bg2);
    border-top:1px solid var(--border);
    z-index:110;
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    -webkit-transform: translateZ(0);
  }
  .mob-tab {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px; border:none; background:transparent;
    color:var(--text3); cursor:pointer;
    font-family:'Inter',sans-serif; font-size:10px; font-weight:600;
    padding:6px 4px 4px;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s;
    position:relative;
  }
  .mob-tab span { line-height:1; }
  .mob-tab svg { transition:transform .15s; }
  .mob-tab:active svg { transform:scale(.88); }
  .mob-tab-active {
    color:var(--accent);
  }
  .mob-tab-active svg { stroke:var(--accent); }
  /* Active indicator dot above the icon */
  .mob-tab-active::before {
    content:'';
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:24px; height:2px; border-radius:0 0 2px 2px;
    background:var(--accent);
  }
  /* Badge on messages tab */
  .mob-tab-icon-wrap {
    position:relative; display:inline-flex;
  }
  .mob-tab-badge {
    position:absolute; top:-5px; right:-8px;
    min-width:16px; height:16px; border-radius:8px;
    background:#ef4444; color:#fff;
    font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    padding:0 3px; border:2px solid var(--bg2);
    font-family:'Inter',sans-serif; line-height:1;
  }

  /* ── Side Drawer ───────────────────────────────── */
  .mob-drawer-bg {
    display:block;
    position:fixed; inset:0; z-index:120;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; pointer-events:none;
    transition:opacity .28s;
  }
  .mob-drawer-bg.mob-open { opacity:1; pointer-events:all; }

  .mob-drawer {
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; bottom:0;
    width:min(300px, 85vw); z-index:121;
    background:var(--bg2);
    box-shadow:-8px 0 40px rgba(0,0,0,.25);
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
  }
  .mob-drawer.mob-open { transform:translateX(0); }

  .mob-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,var(--accent-light),var(--bg3));
    padding-top:calc(16px + env(safe-area-inset-top, 0px));
  }
  .mob-drawer-brand {
    display:flex; align-items:center; gap:10px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:17px; font-weight:800; color:var(--text);
  }
  .mob-drawer-close {
    width:32px; height:32px; border-radius:8px;
    border:none; background:var(--bg3); color:var(--text3);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }

  .mob-drawer-body {
    flex:1; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 0 env(safe-area-inset-bottom, 16px);
  }

  /* Drawer user hero */
  .mob-drawer-user {
    display:flex; align-items:center; gap:13px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
  }
  .mob-drawer-avatar {
    width:46px; height:46px; border-radius:13px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:700;
    font-family:'Plus Jakarta Sans',sans-serif;
    flex-shrink:0;
  }
  .mob-drawer-avatar-biz { background:var(--bg4); }
  .mob-drawer-uname {
    font-size:14px; font-weight:700; color:var(--text);
    font-family:'Plus Jakarta Sans',sans-serif;
  }
  .mob-drawer-urole {
    font-size:11.5px; color:var(--text3); margin-top:2px;
  }

  .mob-drawer-section { padding:6px 0; }
  .mob-drawer-divider {
    height:1px; background:var(--border); margin:4px 16px;
  }

  .mob-drawer-item {
    width:100%; display:flex; align-items:center; gap:13px;
    padding:13px 18px;
    border:none; background:transparent;
    font-family:'Inter',sans-serif; font-size:14px;
    font-weight:500; color:var(--text2);
    cursor:pointer; text-align:left;
    -webkit-tap-highlight-color:transparent;
    transition:background .12s, color .12s;
  }
  .mob-drawer-item:active,
  .mob-drawer-item:hover { background:var(--bg3); color:var(--text); }
  .mob-drawer-item svg { flex-shrink:0; color:var(--text3); }
  .mob-drawer-item:hover svg,
  .mob-drawer-item:active svg { color:var(--accent); }
  /* Custom SVG <img> icons in drawer */
  .mob-drawer-svg {
    width:18px; height:18px; flex-shrink:0;
    filter: invert(45%) sepia(8%) saturate(350%) hue-rotate(185deg);
    transition: filter .15s;
  }
  [data-theme="dark"] .mob-drawer-svg {
    filter: invert(62%) sepia(12%) saturate(250%) hue-rotate(185deg);
  }
  .mob-drawer-item:hover .mob-drawer-svg,
  .mob-drawer-item:active .mob-drawer-svg { filter: invert(32%) sepia(90%) saturate(700%) hue-rotate(210deg) brightness(1.05); }
  /* Theme icons keep their own colours */
  .mob-drawer-svg-theme { filter:none !important; }
  /* Danger (sign-out) icon */
  .mob-drawer-svg-danger,
  .mob-drawer-danger .mob-drawer-svg {
    filter: invert(30%) sepia(80%) saturate(800%) hue-rotate(330deg);
  }
  .mob-drawer-danger svg { color:var(--color-danger-text); }
  .mob-drawer-danger:hover { background:var(--color-danger-bg); color:var(--color-danger-text); }

  /* ── Search Overlay ────────────────────────────── */
  .mob-search-overlay {
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:130;
    background:var(--bg2);
    transform:translateY(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    padding-top:env(safe-area-inset-top, 0px);
  }
  .mob-search-overlay.mob-open { transform:translateY(0); }

  .mob-search-bar {
    display:flex; align-items:center; gap:10px;
    padding:14px 14px;
    border-bottom:1px solid var(--border);
  }
  .mob-search-back {
    flex-shrink:0; width:36px; height:36px; border-radius:9px;
    border:none; background:var(--bg3); color:var(--text2);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .mob-search-input {
    flex:1; height:40px; padding:0 12px;
    border:1.5px solid var(--border); border-radius:10px;
    background:var(--bg3); color:var(--text);
    font-size:16px; font-family:'Inter',sans-serif;
    outline:none;
  }
  .mob-search-input:focus { border-color:var(--accent); box-shadow:var(--glow); }
  .mob-search-go {
    flex-shrink:0; width:40px; height:40px; border-radius:10px;
    border:none; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .mob-search-hint {
    padding:16px 20px;
    font-size:13px; color:var(--text3);
  }

  /* ── rp-wrapper adjustments on mobile ────────────────── */
  /* Push rp bottom sheet above the bottom nav */
  .rp-wrapper {
    bottom: 60px;
    bottom: calc(60px + constant(safe-area-inset-bottom));
    bottom: calc(60px + env(safe-area-inset-bottom));
  }
  /* Toast above bottom nav */
  .toast {
    bottom: 72px !important;
    bottom: calc(72px + constant(safe-area-inset-bottom)) !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* Support chat launcher above bottom nav, below sheets/drawer */
  #sc-launcher {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    z-index: 115; /* above bottom nav (110) but below drawer (121) + filter sheet (196) */
  }
  /* Chat panel full-screen on mobile */
  #sc-panel {
    z-index: 116;
  }
  /* Support btn above bottom nav */
  .support-btn {
    bottom: 72px !important;
    bottom: calc(72px + constant(safe-area-inset-bottom)) !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* Message notif panel above bottom nav */
  .msg-notif-panel {
    bottom: 70px;
    bottom: calc(70px + constant(safe-area-inset-bottom));
    bottom: calc(70px + env(safe-area-inset-bottom));
  }

  /* ── Mobile Browse Page ──────────────────────── */
  .mbp-page { padding:0 0 24px; }
  .mbp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 16px 10px;
  }
  .mbp-title {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:22px; font-weight:800; letter-spacing:-.4px;
  }
  .mbp-clear {
    font-size:13px; font-weight:600; color:var(--accent);
    border:none; background:transparent; cursor:pointer;
    padding:6px 10px; border-radius:8px;
    -webkit-tap-highlight-color:transparent;
  }
  .mbp-clear:active { background:var(--accent-light); }

  /* 3-column category tiles */
  .mbp-cat-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; padding:0 16px 8px;
  }
  .mbp-cat-tile {
    display:flex; flex-direction:column; align-items:center;
    gap:7px; padding:14px 8px 12px;
    border-radius:14px; border:1.5px solid var(--border);
    background:var(--bg2); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,border-color .15s;
  }
  .mbp-cat-tile:active { transform:scale(.96); }
  .mbp-cat-active { background:var(--accent-light); border-color:rgba(var(--accent-rgb),.4); }
  .mbp-cat-icon {
    width:44px; height:44px; border-radius:12px;
    background:var(--bg3);
    display:flex; align-items:center; justify-content:center;
  }
  .mbp-cat-active .mbp-cat-icon { background:rgba(var(--accent-rgb),.12); }
  .mbp-cat-icon img {
    width:28px; height:28px;
    filter:invert(35%) sepia(10%) saturate(500%) hue-rotate(180deg);
    transition:filter .15s;
  }
  [data-theme="dark"] .mbp-cat-icon img {
    filter:invert(70%) sepia(10%) saturate(300%) hue-rotate(180deg);
  }
  .mbp-cat-active .mbp-cat-icon img {
    filter:invert(30%) sepia(80%) saturate(700%) hue-rotate(210deg) brightness(1.05);
  }
  [data-theme="dark"] .mbp-cat-active .mbp-cat-icon img {
    filter:invert(60%) sepia(60%) saturate(400%) hue-rotate(190deg);
  }
  .mbp-cat-label {
    font-size:11px; font-weight:600; color:var(--text2);
    text-align:center; line-height:1.3; font-family:'Inter',sans-serif;
  }
  .mbp-cat-active .mbp-cat-label { color:var(--accent-text); }

  /* Subcategory chips */
  .mbp-sub-row {
    display:flex; gap:7px; flex-wrap:wrap;
    padding:4px 16px 12px;
  }
  .mbp-sub-chip {
    padding:6px 13px; border-radius:20px;
    border:1.5px solid var(--border); background:var(--bg3);
    font-size:12.5px; font-weight:600; color:var(--text2);
    cursor:pointer; font-family:'Inter',sans-serif;
    -webkit-tap-highlight-color:transparent;
    transition:background .12s,border-color .12s,color .12s;
  }
  .mbp-sub-chip:active,.mbp-sub-active {
    background:var(--accent); color:#fff; border-color:var(--accent);
  }

  /* Count + jobs */
  .mbp-count { padding:0 16px 10px; font-size:12px; color:var(--text3); font-weight:500; }
  .mbp-jobs { padding:0 12px; display:flex; flex-direction:column; gap:12px; }
  .mbp-jobs .job-card { margin-bottom:0; }

  /* ── Custom SVG icon filters ──────────────────────── */

  /* Bottom nav tab icons (stroke=currentColor, renders black as img) */
  .mob-tab-svg {
    width:22px; height:22px; display:block;
    /* grey: matches var(--text3) approx */
    filter: invert(58%) sepia(14%) saturate(400%) hue-rotate(180deg);
    transition: filter .15s;
  }
  .mob-tab-active .mob-tab-svg {
    /* blue: matches var(--accent) */
    filter: invert(26%) sepia(90%) saturate(800%) hue-rotate(210deg) brightness(1.05);
  }
  [data-theme="dark"] .mob-tab-svg {
    filter: invert(65%) sepia(14%) saturate(350%) hue-rotate(180deg);
  }
  [data-theme="dark"] .mob-tab-active .mob-tab-svg {
    filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(190deg) brightness(1.2);
  }

  /* Header chat icon (fill=currentColor — same filter approach) */
  .mob-hdr-icon {
    width:20px; height:20px; display:block;
    filter: invert(40%) sepia(12%) saturate(450%) hue-rotate(180deg);
    transition: filter .15s;
  }
  .mob-icon-btn:active .mob-hdr-icon {
    filter: invert(26%) sepia(90%) saturate(800%) hue-rotate(210deg) brightness(1.05);
  }
  [data-theme="dark"] .mob-hdr-icon {
    filter: invert(65%) sepia(12%) saturate(300%) hue-rotate(180deg);
  }

  /* Drawer icons */
  .mob-drawer-svg {
    width:18px; height:18px; display:block; flex-shrink:0;
    filter: invert(48%) sepia(12%) saturate(450%) hue-rotate(180deg);
    transition: filter .15s;
  }
  .mob-drawer-item:hover .mob-drawer-svg,
  .mob-drawer-item:active .mob-drawer-svg {
    filter: invert(26%) sepia(90%) saturate(800%) hue-rotate(210deg) brightness(1.05);
  }
  [data-theme="dark"] .mob-drawer-svg {
    filter: invert(65%) sepia(12%) saturate(350%) hue-rotate(180deg);
  }
  [data-theme="dark"] .mob-drawer-item:hover .mob-drawer-svg,
  [data-theme="dark"] .mob-drawer-item:active .mob-drawer-svg {
    filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(190deg) brightness(1.2);
  }
  /* Sign out: red */
  .mob-drawer-svg-danger {
    filter: invert(35%) sepia(80%) saturate(900%) hue-rotate(330deg) brightness(0.95);
  }
  .mob-drawer-item:hover .mob-drawer-svg-danger,
  .mob-drawer-item:active .mob-drawer-svg-danger {
    filter: invert(35%) sepia(80%) saturate(900%) hue-rotate(330deg) brightness(0.95);
  }
  /* Theme icons have their own hardcoded colours — no filter needed */
  .mob-drawer-svg-theme { filter: none !important; }

  /* ── Mobile Quick Filter Pills ───────────────────────── */
  .mob-qf-row {
    display: flex;
    gap: 8px;
    padding: 10px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mob-qf-row::-webkit-scrollbar { display: none; }
  .mob-qf-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 15px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--bg2);
    color: var(--text1);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
  }
  .mob-qf-pill:active { opacity: .8; }
  .mob-qf-pill.mob-qf-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .mob-qf-icon { font-size: 13px; line-height: 1; }

  /* ── Mobile Filter Sheet: Section Labels ───────── */
  .mfs-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding-bottom: 8px;
  }
}

/* ── Company Filter (desktop filter panel + mobile sheet) ────── */
.fp-co-section { margin-top: 18px; }
.fp-co-search-wrap { padding: 8px 0 6px; }
.fp-co-search {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.fp-co-search:focus { border-color: var(--accent); }
.fp-co-list {
  max-height: 188px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  scrollbar-width: thin;
}
.fp-co-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s, color .1s;
}
.fp-co-item:last-child { border-bottom: none; }
.fp-co-item:hover { background: var(--bg3); color: var(--text1); }
.fp-co-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.fp-co-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text3);
}

/* ── Companies-in-category strip ─────────────────────────── */
.co-strip {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  animation: fadeIn .2s ease;
}
.co-strip-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.co-strip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.co-strip-label strong {
  color: var(--text2);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.co-strip-clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.co-strip-clear:hover { background: var(--accent-light); }
.co-strip-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.co-strip-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.co-strip-chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-text);
}
.co-strip-chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.co-strip-chip-active:hover {
  background: var(--accent-h);
  border-color: var(--accent-h);
  color: #fff;
}
.co-strip-name {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}
.co-strip-ct {
  font-size: 11px;
  font-weight: 500;
  opacity: .7;
  color: inherit;
}
/* Mobile: horizontal scroll */
@media (max-width: 768px) {
  .co-strip {
    margin: 0 12px 12px;
    padding: 12px 14px;
  }
  .co-strip-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .co-strip-chips::-webkit-scrollbar { display: none; }
}