.jobs-page{ position:relative; min-height:calc(100vh - 64px); padding:32px 24px 96px;
    background:var(--bg); overflow:hidden;
  }
  .jobs-wrap{ max-width:1200px; margin:0 auto; position:relative; }

  .jobs-hero{
    position:relative; padding:54px 32px; border-radius:28px; overflow:hidden;
    background:
      radial-gradient(900px 400px at 20% 0%, rgba(231,69,122,.18), transparent 55%),
      radial-gradient(700px 400px at 90% 100%, rgba(255,179,70,.18), transparent 55%),
      linear-gradient(135deg, #1a0008 0%, #0B0F1A 100%);
    color:#fff; margin-bottom:24px;
  }
  .jobs-hero h1{ color:#fff; font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:8px; }
  .jobs-hero p{ color:#C5CAD7; margin-bottom:22px; }
  .jobs-search{
    display:flex; gap:8px; background:#fff; padding:8px;
    border-radius:14px; box-shadow:var(--shadow-md);
  }
  .jobs-search input{
    flex:1; border:0; padding:12px 16px; font-size:1rem; outline:none;
    background:transparent; color:var(--ink-1);
  }
  .jobs-search button{
    padding:12px 22px; border-radius:10px; font-weight:700; font-size:.95rem;
    background:var(--gradient-brand); color:#fff;
    box-shadow:0 10px 20px rgba(176,26,46,.3);
    cursor:pointer; border:0;
  }
  .jobs-search-extras{
    display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;
  }
  .jobs-search-extras button{
    padding:8px 14px; border-radius:999px;
    background:rgba(255,255,255,.08); color:#E6E8EE;
    border:1px solid rgba(255,255,255,.15);
    font-size:.85rem; font-weight:600; cursor:pointer;
  }
  .jobs-search-extras button:hover{ background:rgba(255,255,255,.15); }
  .jobs-search-extras button.is-active{
    background:var(--gradient-brand); border-color:transparent;
  }

  .jobs-layout{
    display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start;
  }
  @media (max-width:980px){
    .jobs-layout{ grid-template-columns:1fr; }
    .jobs-filters{ position:static !important; }
  }

  .jobs-filters{
    position:sticky; top:92px;
    background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:22px;
    max-height:calc(100vh - 110px); overflow-y:auto;
    scrollbar-width:none;
  }
  .jobs-filters::-webkit-scrollbar{ width:0; height:0; display:none; }
  .jobs-filters h3{ font-size:1rem; margin:0 0 14px; }
  .filter-group{ margin-bottom:22px; }
  .filter-group h4{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-4); margin-bottom:10px; }
  .filter-group label{
    display:flex; align-items:center; gap:8px; padding:6px 0;
    font-size:.9rem; color:var(--ink-2); cursor:pointer;
  }
  .filter-group label input{ accent-color:var(--brand-1); }
  .filter-range{ width:100%; accent-color:var(--brand-1); }
  .filter-range-meta{ display:flex; justify-content:space-between; color:var(--ink-4); font-size:.8rem; margin-top:6px; }

  .dual-range{
    position:relative;
    height:38px;
    margin:14px 8px 4px;
  }
  .dual-range__track{
    position:absolute; left:0; right:0; top:50%;
    height:5px; transform:translateY(-50%);
    background:var(--surface-2); border:1px solid var(--line);
    border-radius:99px;
  }
  .dual-range__fill{
    position:absolute; top:50%; left:0%; right:0%;
    height:5px; transform:translateY(-50%);
    background:linear-gradient(90deg, var(--brand-1), var(--gold));
    border-radius:99px;
    pointer-events:none;
  }
  .dual-range__input{
    position:absolute; left:0; right:0; top:0;
    width:100%; height:38px;
    background:transparent;
    appearance:none; -webkit-appearance:none;
    pointer-events:none;
    margin:0;
  }
  .dual-range__input::-webkit-slider-thumb{
    appearance:none; -webkit-appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--brand-1);
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(176,26,46,.35);
    cursor:grab; pointer-events:auto;
    margin-top:-7px;
  }
  .dual-range__input::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.15); }
  .dual-range__input::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--brand-1); border:2px solid #fff;
    box-shadow:0 2px 8px rgba(176,26,46,.35);
    cursor:grab; pointer-events:auto;
  }
  .dual-range__input::-webkit-slider-runnable-track{
    height:5px; background:transparent; border:none;
  }
  .dual-range__input::-moz-range-track{
    height:5px; background:transparent; border:none;
  }
  .dual-range__input--min{ z-index:2; }
  .dual-range__input--max{ z-index:3; }
  .dual-range__input:focus-visible::-webkit-slider-thumb{
    outline:3px solid var(--gold); outline-offset:2px;
  }
  .dual-range__input:focus-visible::-moz-range-thumb{
    outline:3px solid var(--gold); outline-offset:2px;
  }
  .dual-range__readout{
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; margin-top:8px;
  }
  .dual-range__readout span{
    display:flex; flex-direction:column; gap:2px;
    font-size:.78rem; color:var(--ink-4);
  }
  .dual-range__readout small{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-4); font-weight:600;
  }
  .dual-range__readout b{ color:var(--ink-1); font-size:.92rem; font-weight:700; }
  .dual-range__sep{ color:var(--ink-4); font-size:1rem; }
  [data-theme="dark"] .dual-range__input::-webkit-slider-thumb,
  [data-theme="dark"] .dual-range__input::-moz-range-thumb{
    border-color:var(--surface);
  }
  @media (pointer:coarse){
    .dual-range__input::-webkit-slider-thumb{
      width:24px; height:24px; margin-top:-10px;
    }
    .dual-range__input::-moz-range-thumb{
      width:24px; height:24px;
    }
  }
  .jobs-bar{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:14px 18px; margin-bottom:18px; flex-wrap:wrap;
  }
  .jobs-bar__count{ font-size:.92rem; color:var(--ink-3); }
  .jobs-bar__count b{ color:var(--ink-1); font-weight:700; }
  .jobs-bar__right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .jobs-sort{ padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-1); font-size:.88rem; }

  .view-toggle{ display:inline-flex; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }
  .view-toggle button{
    padding:8px 12px; border-radius:8px;
    color:var(--ink-4); cursor:pointer;
    min-width:40px; min-height:40px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .view-toggle button.is-active{ background:var(--surface); color:var(--brand-1); box-shadow:var(--shadow-sm); }
  .view-toggle button svg{ width:18px; height:18px; }

  .jobs-list{ display:grid; gap:14px; }
  .jobs-list.is-grid{ grid-template-columns:repeat(2,1fr); }
  @media (max-width:760px){ .jobs-list.is-grid{ grid-template-columns:1fr; } }

  .job{
    position:relative; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:22px; transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease);
  }
  .job:hover{ transform:translateY(-3px); border-color:var(--brand-1); box-shadow:var(--shadow-md); }

  .jobs-list.is-list{ gap:10px; }
  .jobs-list.is-list .job{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    grid-template-rows:auto auto;
    gap:4px 18px;
    padding:18px 22px;
    align-items:center;
  }
  .jobs-list.is-list .job__logo  { grid-row:1 / span 2; grid-column:1; width:48px; height:48px; }
  .jobs-list.is-list .job__top   { grid-row:1; grid-column:2; margin:0; }
  .jobs-list.is-list .job__meta  { grid-row:2; grid-column:2; margin:0; }
  .jobs-list.is-list .job__tags  { display:none; }
  .jobs-list.is-list .job__salary{ grid-row:1 / span 2; grid-column:3; margin:0; align-self:center; text-align:right; min-width:140px; }
  .jobs-list.is-list .job__actions{ grid-row:1 / span 2; grid-column:4; margin:0; align-self:center; flex-wrap:nowrap; }
  .jobs-list.is-list .job__actions .job__save{ padding:8px 10px; }
  .jobs-list.is-list .job__actions .job__save span,
  .jobs-list.is-list .job__actions .job__save{ font-size:0; }
  .jobs-list.is-list .job__actions .job__save svg{ width:18px; height:18px; }

  @media (max-width:900px){
    .jobs-list.is-list .job{
      grid-template-columns:auto 1fr;
      grid-template-rows:auto auto auto;
    }
    .jobs-list.is-list .job__salary{
      grid-row:3; grid-column:1 / span 2; text-align:left; min-width:0;
      padding-top:8px; border-top:1px dashed var(--line);
    }
    .jobs-list.is-list .job__actions{
      grid-row:3; grid-column:2; justify-self:end; padding-top:8px; border-top:1px dashed var(--line);
    }
  }
  @media (max-width:640px){
    .jobs-list.is-list .job{ grid-template-columns:1fr; grid-template-rows:auto; gap:10px; }
    .jobs-list.is-list .job__logo,
    .jobs-list.is-list .job__top,
    .jobs-list.is-list .job__meta,
    .jobs-list.is-list .job__salary,
    .jobs-list.is-list .job__actions{ grid-column:1; grid-row:auto; }
    .jobs-list.is-list .job__salary,
    .jobs-list.is-list .job__actions{ border-top:0; padding-top:0; justify-self:start; text-align:left; }
  }

  .job__logo{
    width:54px; height:54px; border-radius:14px;
    display:grid; place-items:center;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#fff;
    flex-shrink:0;
  }
  .job__top{ display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
  .jobs-list.is-list .job__top{ margin-bottom:0; }
  .job__head{ flex:1; min-width:0; }
  .job__head h3{
    font-size:1.1rem; margin:0 0 4px; line-height:1.3;
    display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .job__company{ font-size:.88rem; color:var(--ink-4); }
  .job__company b{ color:var(--ink-2); font-weight:700; }

  .job__meta{
    display:flex; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; font-size:.82rem; color:var(--ink-3);
  }
  .job__meta span{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:8px; background:var(--surface-2);
  }
  .job__meta svg{ width:14px; height:14px; color:var(--ink-4); }

  .job__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .job__tag{
    padding:3px 10px; border-radius:999px;
    background:var(--chip-bg); color:var(--brand-1);
    font-size:.72rem; font-weight:700; letter-spacing:.04em;
  }
  .job__salary{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--ink-1); font-size:1.02rem; margin-bottom:14px; }
  .job__salary small{ font-weight:500; color:var(--ink-4); font-size:.78rem; }
  .job__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .job__actions .btn{ padding:8px 14px; font-size:.85rem; }
  .job__save{
    background:transparent; border:1px solid var(--line); border-radius:10px;
    padding:8px 12px; color:var(--ink-3); cursor:pointer; font-size:.85rem;
    display:inline-flex; align-items:center; gap:6px;
  }
  .job__save:hover{ color:var(--brand-1); border-color:var(--brand-1); }
  .job__save.is-saved{ color:var(--brand-1); border-color:var(--brand-1); background:var(--chip-bg); }
  .job__save svg{ width:14px; height:14px; }

  .job__new, .job__urgent, .job__closed, .job__active {
    display:inline-block; vertical-align:middle;
    padding:2px 9px; border-radius:999px;
    font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    line-height:1.4; color:#fff; flex:none;
  }
  .job__new    { background:linear-gradient(135deg,#1EA97C,#4FC997); }
  .job__urgent { background:linear-gradient(135deg,#FFB946,#E7457A); }
  .job__closed { background:linear-gradient(135deg,#6B7280,#374151); }
  .job__active { background:linear-gradient(135deg,#1E5FD6,#5FA8FF); }

  .job.is-hidden,
  .job.is-page-hidden{ display:none !important; }

  .jobs-pager-row{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    flex-wrap:wrap;
    margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  }
  .jobs-pager{
    display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center;
  }
  .jobs-pager[hidden]{ display:none; }
  .pager__btn{
    min-width:42px; height:42px; padding:0 14px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    color:var(--ink-2); font-size:.9rem; font-weight:600; font-family:inherit;
    cursor:pointer; transition:all .18s var(--ease);
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .pager__btn:hover:not(:disabled):not(.is-active){
    border-color:var(--brand-1); color:var(--brand-1);
    transform:translateY(-1px);
  }
  .pager__btn:disabled{
    opacity:.45; cursor:not-allowed; color:var(--ink-4);
  }
  .pager__btn.is-active{
    background:var(--gradient-brand); color:#fff; border-color:transparent;
    box-shadow:0 6px 16px rgba(176,26,46,.22);
    cursor:default;
  }
  .pager__ellipsis{
    min-width:24px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink-4); font-weight:700; letter-spacing:.05em;
  }
  .pager__summary{
    margin-right:auto; font-size:.85rem; color:var(--ink-3);
  }
  .pager__summary b{ color:var(--ink-1); font-weight:700; }
  @media (max-width: 640px){
    .jobs-pager-row{ flex-direction:column; align-items:stretch; }
    .jobs-pager{ justify-content:center; }
    .pager__summary{ text-align:center; margin-right:0; }
  }

  .jobs-empty{
    text-align:center; padding:60px 20px;
    background:var(--surface); border:1px dashed var(--line); border-radius:18px;
    color:var(--ink-4);
  }
  .jobs-empty h3{ font-size:1.2rem; margin:14px 0 6px; color:var(--ink-1); }

  @keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
  }
  .jobs-skeleton{ display:contents; }
  .skeleton-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:22px; height:200px;
    background-image: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
    background-size:1200px 100%;
    animation: shimmer 1.4s infinite linear;
  }