/* Tradexp — worker-first blue-collar job board */
:root {
  --bg: #0e1620;
  --bg-2: #101c28;
  --surface: #16222f;
  --surface-2: #1c2b3a;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef3f8;
  --muted: #93a3b4;
  --amber: #ffb400;
  --amber-600: #e6a000;
  --amber-ink: #1a1200;
  --green: #36c26b;
  --green-soft: rgba(54, 194, 107, 0.14);
  --blue: #4aa3ff;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --maxw: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #14222f 0%, var(--bg) 55%) no-repeat, var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; font-size: 16px; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 64px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px 16px;
  background: rgba(14, 22, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand__mark { display: block; border-radius: 8px; }
.brand__word { font-weight: 800; letter-spacing: 0.5px; font-size: 19px; }
.brand__xp { color: var(--amber); }
.saved-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-weight: 600;
}
.saved-btn:active { transform: scale(0.97); }
.saved-count {
  background: var(--amber); color: var(--amber-ink);
  border-radius: 999px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; padding: 0 5px;
}

/* ---------- Hero / search ---------- */
.hero { padding: 26px 2px 14px; }
.hero__title { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.5px; }
.hero__sub { margin: 0 0 20px; color: var(--muted); font-size: 16px; }

.search { display: flex; flex-direction: column; gap: 10px; }
.field {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0 14px;
  transition: border-color 0.15s;
}
.field:focus-within { border-color: var(--amber); }
.field__icon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.field input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text);
  padding: 15px 0; outline: none;
}
.field input::placeholder { color: #6f8095; }
.near-btn {
  flex: none; background: var(--surface-2); color: var(--amber);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.near-btn:active { transform: scale(0.96); }

.btn {
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; padding: 14px 18px; transition: transform 0.06s, background 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--amber); color: var(--amber-ink); font-size: 17px; }
.btn--primary:hover { background: var(--amber-600); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 9px 14px; }

/* ---------- Trade chips ---------- */
.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px; padding: 9px 15px;
  white-space: nowrap; cursor: pointer; font-weight: 600; font-size: 14px;
}
.chip:active { transform: scale(0.96); }
.chip.is-active { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.chip__icon { font-size: 15px; line-height: 1; }

/* ---------- Results header ---------- */
.results-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 2px 6px; gap: 12px;
}
.results-count { color: var(--muted); font-size: 14px; font-weight: 600; }
.controls { display: flex; align-items: center; gap: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; cursor: pointer; }
.toggle input { width: 17px; height: 17px; accent-color: var(--amber); }
.sort {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; cursor: pointer;
}

/* ---------- Banner ---------- */
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(90deg, rgba(255,180,0,0.14), rgba(255,180,0,0.06));
  border: 1px solid rgba(255, 180, 0, 0.35);
  color: #ffdf9b; border-radius: 12px; padding: 11px 14px;
  margin: 12px 2px 4px; font-size: 14px;
}
.banner button { background: none; border: none; color: #ffdf9b; font-size: 20px; cursor: pointer; line-height: 1; }

/* ---------- Result cards ---------- */
.results { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; position: relative;
  box-shadow: var(--shadow);
}
.card__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card__title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.25; padding-right: 4px; }
.card__company { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.card__company b { color: var(--text); font-weight: 600; }

.savebtn {
  flex: none; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); width: 38px; height: 38px; border-radius: 10px;
  cursor: pointer; display: grid; place-items: center;
}
.savebtn.is-saved { color: var(--amber); border-color: var(--amber); background: rgba(255,180,0,0.1); }
.savebtn:active { transform: scale(0.94); }

.pay {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--green-soft); border: 1px solid rgba(54,194,107,0.3);
  color: #8df0b3; border-radius: 10px; padding: 8px 12px; margin: 12px 0 0;
}
.pay__big { font-size: 19px; font-weight: 800; color: #6ee79c; }
.pay__small { font-size: 13px; color: #8db8a0; }
.pay--dim { background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--muted); }
.pay--dim .pay__big { color: var(--muted); font-size: 15px; font-weight: 700; }
.pay__est { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #b9a06a; }

.meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.pill {
  font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.pill--ft { color: #bfe6cd; border-color: rgba(54,194,107,0.25); }
.pill--new { color: var(--amber); border-color: rgba(255,180,0,0.3); }

.card__desc { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

.card__actions { margin-top: 14px; }
.apply {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--amber); color: var(--amber-ink); font-weight: 800;
  padding: 13px; border-radius: var(--radius-sm); font-size: 16px;
}
.apply:hover { background: var(--amber-600); }
.apply:active { transform: scale(0.99); }
.apply--demo { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: default; }

/* ---------- States ---------- */
.skeleton { height: 150px; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; color: var(--muted); padding: 48px 20px; }
.empty__big { font-size: 40px; margin-bottom: 8px; }
.empty h3 { color: var(--text); margin: 0 0 6px; }

/* ---------- Saved view ---------- */
.subhead { display: flex; align-items: center; gap: 14px; padding: 20px 2px 8px; }
.subhead__title { margin: 0; font-size: 22px; }

/* ---------- Footer ---------- */
.footer { text-align: center; color: var(--muted); padding: 30px 16px 50px; border-top: 1px solid var(--border); margin-top: 30px; }
.footer__brand { font-weight: 800; letter-spacing: 0.5px; margin-bottom: 4px; }
.footer p { margin: 0; font-size: 14px; }

@media (min-width: 620px) {
  .search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
  .search .field--loc { grid-column: auto; }
  .btn--primary.btn--block { width: auto; white-space: nowrap; }
  .results { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ============ v2: nav, learn, community, comments ============ */
.topbar__tag { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .2px; }
main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.view { animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.loading { color: var(--muted); text-align: center; padding: 48px 0; }

/* bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; max-width: var(--maxw); margin: 0 auto;
  background: rgba(16, 24, 34, 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__btn {
  flex: 1; position: relative; background: none; border: none; cursor: pointer;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; font-size: 11px; font-weight: 600;
}
.tabbar__btn svg { width: 23px; height: 23px; }
.tabbar__btn.is-active { color: var(--amber); }
.tabbar__badge {
  position: absolute; top: 4px; left: 56%; background: var(--amber); color: var(--amber-ink);
  border-radius: 999px; min-width: 17px; height: 17px; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* learn + community hero */
.learn-hero { padding: 24px 2px 8px; }
.learn-hero__title { font-size: clamp(24px, 6.5vw, 32px); margin: 0 0 8px; font-weight: 800; letter-spacing: -.5px; }
.learn-hero__sub { color: var(--muted); margin: 0; font-size: 15px; }
.learn-hero__sub a { color: var(--amber); }

/* learn grid */
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.learn-card {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; color: var(--text); transition: border-color .15s, transform .06s;
}
.learn-card:active { transform: scale(.98); }
.learn-card:hover { border-color: var(--border-strong); }
.learn-card__icon { font-size: 26px; }
.learn-card__name { font-weight: 700; font-size: 16px; }
.learn-card__tag { color: var(--muted); font-size: 13px; line-height: 1.35; }

/* learn detail */
.ldetail { padding: 14px 0 8px; }
.backlink { display: inline-block; color: var(--muted); text-decoration: none; font-weight: 600; padding: 8px 0; }
.backlink:hover { color: var(--amber); }
.ldetail__head { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 4px; }
.ldetail__icon { font-size: 40px; line-height: 1; }
.ldetail__head h1 { font-size: clamp(24px, 6.5vw, 32px); margin: 0; letter-spacing: -.5px; }
.ldetail__tag { color: var(--amber); margin: 6px 0 0; font-weight: 600; font-size: 15px; }
.ldetail__aka { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.ldetail__cta { margin: 16px 0 4px; }

.lsec { border-top: 1px solid var(--border); padding: 18px 0 4px; margin-top: 14px; }
.lsec--cta { background: linear-gradient(180deg, rgba(255,180,0,.08), transparent); border: 1px solid rgba(255,180,0,.3); border-radius: var(--radius); padding: 16px; margin-top: 18px; }
.lsec__title { font-size: 19px; margin: 0 0 12px; font-weight: 800; }
.lsec__note { color: #c4d0dc; font-size: 15px; margin: 0 0 10px; line-height: 1.55; }
.lsec__note b { color: var(--text); }
.lsec__sub { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 6px; }
.lsec__flag { color: #ffdf9b; font-size: 14px; background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.3); border-radius: 10px; padding: 9px 12px; }
.lsec p { color: #c4d0dc; line-height: 1.6; }

.paygrid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.paycard { background: var(--green-soft); border: 1px solid rgba(54,194,107,.28); border-radius: 12px; padding: 13px 15px; }
.paycard__label { display: block; color: #6ee79c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.paycard__val { display: block; color: #cfe9da; font-weight: 500; font-size: 14px; line-height: 1.5; }

.pathgrid { display: flex; flex-direction: column; gap: 10px; }
.pathcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.pathcard__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pathcard__name { font-weight: 700; }
.pathcard__meta { color: var(--amber); font-size: 13px; font-weight: 600; }
.pathcard p { margin: 0; font-size: 14px; }

.certrow { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.certrow__name { font-weight: 700; }
.certrow__when { color: var(--muted); font-weight: 500; font-size: 12px; }
.certrow__by { color: var(--amber); font-size: 13px; margin: 2px 0; }
.certrow__desc { margin: 4px 0 0; font-size: 14px; }

.llist { margin: 0; padding-left: 20px; }
.llist li { color: #c4d0dc; margin-bottom: 7px; line-height: 1.5; }

.taglist { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 8px; }
.tagpill { background: var(--surface-2); border: 1px solid var(--border); color: #c4d0dc; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.tagpill--soft { background: rgba(74,163,255,.1); border-color: rgba(74,163,255,.25); color: #acd2ff; }
.tagpill--link { text-decoration: none; }
.tagpill--link:hover { border-color: var(--amber); color: var(--amber); }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proscons__col h3 { margin: 0 0 8px; font-size: 15px; }
.proscons__pros h3 { color: var(--green); }
.proscons__cons h3 { color: #ff8d6b; }
.proscons .llist { padding-left: 18px; }

.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ladder__step { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 14px; }
.ladder__arrow { color: var(--amber); font-weight: 800; }

.steps { margin: 0; padding-left: 22px; }
.steps li { color: var(--text); margin-bottom: 9px; line-height: 1.5; font-weight: 500; }

.specgrid { display: flex; flex-direction: column; gap: 10px; }
.specrow { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.specrow b { color: var(--amber); }
.specrow p { margin: 4px 0 0; font-size: 14px; }

.reslist { margin: 0; padding-left: 20px; }
.reslist li { margin-bottom: 9px; line-height: 1.5; }
.reslist a { color: var(--amber); font-weight: 600; }

.faq { border: 1px solid var(--border); border-radius: 10px; padding: 0; margin-bottom: 9px; background: var(--surface); }
.faq summary { cursor: pointer; padding: 13px 14px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--amber); font-weight: 800; }
.faq[open] summary::after { content: '–'; }
.faq__a { padding: 0 14px 12px; }
.faq__a p { margin: 0 0 8px; font-size: 14px; }

.ldetail__commenthead { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }

/* community boards */
.board-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.board-card { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text); }
.board-card:hover { border-color: var(--border-strong); }
.board-card:active { transform: scale(.99); }
.board-card__icon { font-size: 28px; }
.board-card__text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.board-card__name { font-weight: 700; font-size: 16px; }
.board-card__desc { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.board-card__arrow { color: var(--muted); font-size: 24px; }

/* comments widget */
.comments { margin-top: 8px; }
.comments__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.comments__title { font-size: 17px; margin: 0; }
.comments__count { color: var(--muted); font-weight: 600; }
.comments__mode { color: #ffdf9b; font-size: 12px; background: rgba(255,180,0,.1); border-radius: 6px; padding: 2px 8px; }
.comments__empty { color: var(--muted); padding: 14px 0; }

.cform { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.cform__name, .cform__body { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text); padding: 11px; outline: none; width: 100%; }
.cform__name:focus, .cform__body:focus { border-color: var(--amber); }
.cform__body { resize: vertical; min-height: 64px; font-family: inherit; }
.cform__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cform__hint { color: var(--muted); font-size: 13px; }
.cform__submit { padding: 10px 22px; }

.cmt { padding: 12px 0; border-top: 1px solid var(--border); }
.cmt--reply { border-top: none; margin-left: 16px; padding: 10px 0 4px; border-left: 2px solid var(--border); padding-left: 12px; }
.cmt__head { display: flex; align-items: baseline; gap: 8px; }
.cmt__name { font-weight: 700; font-size: 14px; }
.cmt__time { color: var(--muted); font-size: 12px; }
.cmt__body { margin: 5px 0 8px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cmt__actions { display: flex; align-items: center; gap: 14px; }
.cmt__vote { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-weight: 700; font-size: 13px; }
.cmt__vote.is-voted { color: var(--amber); border-color: var(--amber); }
.cmt__link { background: none; border: none; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.cmt__link:hover { color: var(--text); }
.cmt__report:hover { color: #ff8d6b; }
.cmt__replybox { margin-top: 8px; }
.cmt__replies { margin-top: 6px; }

@media (min-width: 620px) {
  .learn-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ v3: full-scale redesign (no emoji, SVG icons, desktop nav) ============ */
:root { --maxw: 1100px; }

/* base icon */
.ico { flex: none; vertical-align: middle; }
.inline-ico { width: 14px; height: 14px; vertical-align: -2px; }

/* shell width + footer clearance */
main { padding-bottom: 28px; }
.site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* desktop top nav (hidden on mobile) */
.topnav { display: none; align-items: center; gap: 2px; }
.topnav__link { position: relative; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; }
.topnav__link:hover { color: var(--text); background: var(--surface); }
.topnav__link.is-active { color: var(--amber); }
.topnav__badge { background: var(--amber); color: var(--amber-ink); border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

/* eyebrow + page hero */
.eyebrow { display: inline-block; color: var(--amber); font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 10px; }
.page-hero { padding: 28px 0 10px; }
.page-hero__title { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -0.6px; margin: 0 0 8px; line-height: 1.08; }
.page-hero__sub { color: var(--muted); font-size: 16px; margin: 0; max-width: 600px; line-height: 1.5; }
.page-hero__sub a { color: var(--amber); }
.hero__title { max-width: 640px; }
.hero__sub { max-width: 560px; }
.hero .search { max-width: 720px; }

/* chip icons */
.chip { gap: 8px; }
.chip__ico { width: 16px; height: 16px; }

/* job results: responsive grid */
.results { display: grid; grid-template-columns: 1fr; gap: 12px; }
.chips, .results-head, .banner, #sourceBanner { max-width: 100%; }
.empty__ico { width: 40px; height: 40px; color: var(--muted); display: block; margin: 0 auto 12px; }

/* learn hub cards */
.learn-grid { grid-template-columns: 1fr 1fr; }
.learn-card { gap: 8px; min-height: 150px; }
.learn-card__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.25); display: grid; place-items: center; color: var(--amber); font-size: 0; }
.learn-card__icon .ico { width: 23px; height: 23px; }
.learn-card__name { font-weight: 700; font-size: 16px; }
.learn-card__tag { color: var(--muted); font-size: 13px; line-height: 1.4; }
.learn-card__more { margin-top: auto; padding-top: 6px; color: var(--amber); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.learn-card:hover { transform: translateY(-2px); border-color: rgba(255,180,0,.35); }

/* learn/community detail: centered reading column + icon badge */
.ldetail { max-width: 820px; margin: 0 auto; }
.ldetail__icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.25); display: grid; place-items: center; color: var(--amber); flex: none; font-size: 0; }
.ldetail__icon .ico { width: 28px; height: 28px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; }
.ico-r { transform: rotate(180deg); }

/* section headers with icons */
.lsec__title { display: flex; align-items: center; gap: 10px; }
.lsec__ico { width: 20px; height: 20px; color: var(--amber); }

/* community board cards */
.board-list { max-width: 760px; margin-left: auto; margin-right: auto; }
.board-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--amber); flex: none; font-size: 0; }
.board-card__icon .ico { width: 24px; height: 24px; }
.board-card__arrow { color: var(--muted); }
.board-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.board-card { transition: transform .08s, border-color .15s; }

/* footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 44px; background: #0b131c; }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 38px 16px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand .brand__word { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.site-footer__brand p { color: var(--muted); font-size: 14px; margin: 10px 0 0; max-width: 300px; line-height: 1.5; }
.site-footer__col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 12px; }
.site-footer__col a { display: block; color: #c4d0dc; text-decoration: none; font-size: 14px; padding: 5px 0; }
.site-footer__col a:hover { color: var(--amber); }
.site-footer__bar { max-width: var(--maxw); margin: 0 auto; padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }

/* tablet+ */
@media (min-width: 680px) {
  .results { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .topnav { display: flex; }
  .tabbar { display: none; }
  main { padding-bottom: 40px; }
  .site-footer { padding-bottom: 0; }
  .learn-grid { grid-template-columns: repeat(4, 1fr); }
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer__brand { grid-column: auto; }
  .hero { padding-top: 40px; }
  .page-hero { padding-top: 40px; }
}
@media (min-width: 1040px) {
  .results { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============ v4: multi-page (breadcrumbs, job landings, anchor tweaks) ============ */
.btn { display: inline-block; text-decoration: none; text-align: center; }
a.chip { text-decoration: none; }
.field__ico { width: 20px; height: 20px; color: var(--muted); }
.savebtn__ico { width: 18px; height: 18px; }
.chip__ico { color: inherit; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 16px 0 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs span:last-child { color: #c4d0dc; }
.crumbs__sep { color: #3a4655; }

/* job landing pages */
.jobland { max-width: 900px; margin: 0 auto; }
.jobland__head { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 10px; }
.jobland__icon { width: 52px; height: 52px; border-radius: 13px; background: rgba(255,180,0,.1); border: 1px solid rgba(255,180,0,.25); display: grid; place-items: center; color: var(--amber); flex: none; font-size: 0; }
.jobland__icon .ico { width: 27px; height: 27px; }
.jobland__head h1 { font-size: clamp(24px, 5.5vw, 34px); margin: 0; letter-spacing: -0.5px; line-height: 1.12; }
.jobland__pay { color: var(--green); font-weight: 600; font-size: 14px; margin: 6px 0 0; }
.jobland__intro { margin: 4px 0 18px; }
.jobland__intro p { color: #c4d0dc; line-height: 1.6; margin: 0 0 12px; font-size: 15.5px; }
.jobland .results-head { border-top: 1px solid var(--border); padding-top: 16px; }
.jobland .lsec a { color: var(--amber); }

/* fix: hidden attribute must win over display rules (banners, count badges, results head) */
[hidden] { display: none !important; }

/* ============ v5: filters + salary pages ============ */
.results-head { flex-wrap: wrap; }
.controls { flex-wrap: wrap; gap: 8px; }
.fsel { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.fsel:focus, .sort:focus { border-color: var(--amber); outline: none; }

/* salary pages */
.salgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 8px; }
.salcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.salcard--hi { background: var(--green-soft); border-color: rgba(54,194,107,.28); }
.salcard__label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.salcard--hi .salcard__label { color: #6ee79c; }
.salcard__val { display: block; font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.15; }
.salcard--hi .salcard__val { color: #6ee79c; }
.explevel { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); }
.explevel:last-child { border-bottom: none; }
.explevel__level { font-weight: 700; }
.explevel__note { color: var(--muted); font-size: 13px; display: block; margin-top: 2px; font-weight: 400; }
.explevel__pay { color: var(--green); font-weight: 800; white-space: nowrap; font-size: 15px; }
.toppay { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.toppay b { color: var(--amber); }
.toppay p { margin: 4px 0 0; font-size: 14px; color: #c4d0dc; }
.livepay { display: inline-flex; align-items: baseline; gap: 8px; background: var(--green-soft); border: 1px solid rgba(54,194,107,.3); border-radius: 10px; padding: 10px 14px; }
.livepay__big { font-size: 22px; font-weight: 800; color: #6ee79c; }
.livepay__lbl { color: #8db8a0; font-size: 13px; }