:root { color-scheme: dark; --background:#050607; --surface:#0b0d10; --surface-soft:#111419; --border:#262c33; --text:#f7f7f5; --muted:#9ba2aa; --orange:#ff4b0b; --orange-soft:rgba(255,75,11,.12); --green:#68db92; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; background:radial-gradient(circle at 78% 10%,rgba(255,75,11,.11),transparent 28rem),var(--background); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.page-shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { width:min(1440px,calc(100% - 3rem)); min-height:104px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:inline-flex; align-items:center; gap:.9rem; }
.brand-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:#170803; font-size:1.35rem; font-weight:900; box-shadow:0 0 28px rgba(255,75,11,.23); }
.brand > span:last-child { display:grid; gap:.25rem; }
.brand strong { font-size:.95rem; letter-spacing:.28rem; }
.brand small { color:var(--muted); font-size:.56rem; letter-spacing:.18rem; }
.topnav { display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); }
.topnav a { color:#c6cbd0; font-size:.75rem; font-weight:700; letter-spacing:.11rem; text-transform:uppercase; }
.topnav a:hover,.topnav a.active { color:var(--orange); }
.topnav .account-link { max-width:180px; padding:.8rem 1rem; overflow:hidden; border:1px solid var(--border); border-radius:999px; color:var(--text); text-overflow:ellipsis; white-space:nowrap; }
main { width:min(1240px,calc(100% - 3rem)); margin:0 auto; flex:1; }
.breadcrumb { padding:2rem 0; display:flex; gap:.65rem; color:var(--muted); font-size:.8rem; }
.breadcrumb a { color:var(--orange); font-weight:800; }
.breadcrumb span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.job-hero { min-height:340px; padding:clamp(2rem,5vw,4rem); position:relative; display:grid; grid-template-columns:120px minmax(0,1fr) minmax(190px,auto); align-items:center; gap:clamp(1.5rem,4vw,3.5rem); overflow:hidden; background:linear-gradient(130deg,#12151a,#08090b); border:1px solid var(--border); border-radius:30px; }
.job-hero::before { content:""; position:absolute; inset:0; opacity:.4; background:repeating-linear-gradient(120deg,transparent 0 30px,rgba(255,255,255,.035) 31px 32px),radial-gradient(circle at 80% 50%,rgba(255,75,11,.25),transparent 25rem); }
.company-mark,.hero-copy,.hero-actions { position:relative; z-index:1; }
.company-mark { width:120px; height:120px; display:grid; place-items:center; background:var(--orange-soft); border:1px solid rgba(255,75,11,.35); border-radius:26px; color:var(--orange); font-size:3.4rem; font-weight:900; }
.status-row { display:flex; align-items:center; gap:.75rem; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.07rem; }
.status { padding:.45rem .65rem; border-radius:999px; font-weight:900; }
.status.open { background:rgba(72,201,117,.11); color:var(--green); }
.status.closed { background:rgba(255,255,255,.06); color:var(--muted); }
.hero-copy h1 { max-width:780px; margin-top:1rem; font-size:clamp(2.5rem,5.5vw,5rem); line-height:.96; letter-spacing:-.045em; }
.company { margin-top:.8rem; color:#d8dbde; font-size:1.05rem; font-weight:700; }
.location { margin-top:.65rem; color:var(--orange); }
.hero-actions { display:flex; flex-direction:column; gap:.65rem; }
.hero-actions a { min-height:50px; padding:0 1.1rem; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:.82rem; font-weight:800; text-align:center; }
.hero-actions .primary { background:var(--orange); color:white; }
.hero-actions .secondary { background:rgba(0,0,0,.25); border:1px solid var(--border); color:#d9dcdf; }

.content-grid { margin-top:1.5rem; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:1rem; }
.description-panel,.info-panel,.safety-panel { background:linear-gradient(145deg,var(--surface-soft),var(--surface)); border:1px solid var(--border); border-radius:22px; }
.description-panel { min-height:420px; padding:clamp(1.5rem,4vw,3rem); }
.eyebrow { color:var(--orange); font-size:.68rem; font-weight:900; letter-spacing:.2rem; }
.description-panel h2,.info-panel h2,.safety-panel h2 { margin-top:.7rem; font-size:1.55rem; }
.job-description { margin-top:1.5rem; color:#c1c5c9; line-height:1.85; }
.application-note { margin-top:2rem; padding:1.1rem; background:rgba(255,183,77,.07); border:1px solid rgba(255,183,77,.2); border-radius:14px; }
.application-note strong { color:#f5c26b; }
.application-note p { margin-top:.4rem; color:var(--muted); font-size:.85rem; line-height:1.5; }
.job-sidebar { display:flex; flex-direction:column; gap:1rem; }
.info-panel,.safety-panel { padding:1.4rem; }
.info-panel h2,.safety-panel h2 { margin-top:0; font-size:1.1rem; }
.info-panel dl { margin-top:1rem; }
.info-panel dl div { padding:.85rem 0; display:grid; grid-template-columns:92px minmax(0,1fr); gap:1rem; border-top:1px solid rgba(255,255,255,.07); }
.info-panel dt { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.05rem; }
.info-panel dd { overflow-wrap:anywhere; color:#e4e6e8; font-size:.88rem; }
.safety-panel { border-color:rgba(72,201,117,.2); }
.safety-panel h2 { color:var(--green); }
.safety-panel p { margin-top:.7rem; color:var(--muted); font-size:.85rem; line-height:1.6; }

.similar-section { padding:clamp(3rem,7vw,6rem) 0; }
.similar-section > header { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.similar-section h2 { margin-top:.65rem; font-size:clamp(1.8rem,4vw,2.8rem); }
.similar-section header > a { color:var(--orange); font-weight:800; }
.similar-grid { margin-top:1.5rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.similar-card { min-height:145px; padding:1rem; display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:17px; transition:border-color 180ms ease,transform 180ms ease; }
.similar-card:hover { transform:translateY(-2px); border-color:rgba(255,75,11,.5); }
.mini-mark { width:56px; height:56px; display:grid; place-items:center; background:var(--orange-soft); border-radius:13px; color:var(--orange); font-size:1.3rem; font-weight:900; }
.similar-card h3 { font-size:1rem; line-height:1.25; }
.similar-card p { margin-top:.35rem; color:#d6d9dc; font-size:.78rem; }
.similar-card div span { margin-top:.4rem; display:block; color:var(--muted); font-size:.7rem; }
.similar-card > b { color:var(--orange); }

.empty-state { min-height:420px; margin:4rem 0; padding:2rem; display:grid; place-items:center; align-content:center; gap:.8rem; text-align:center; background:var(--surface); border:1px dashed var(--border); border-radius:24px; }
.empty-state > span { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--orange-soft); color:var(--orange); font-size:1.5rem; }
.empty-state p { color:var(--muted); }
.empty-state a { color:var(--orange); font-weight:800; }
.footer { width:min(1240px,calc(100% - 3rem)); margin:auto auto 0; padding:2rem 0 3rem; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); border-top:1px solid var(--border); font-size:.75rem; letter-spacing:.08rem; }
.footer strong { color:var(--text); letter-spacing:.18rem; }

@media (max-width:900px) {
  .topbar { min-height:88px; }
  .topnav > a:not(.active):not(.account-link) { display:none; }
  .job-hero { grid-template-columns:90px minmax(0,1fr); }
  .company-mark { width:90px; height:90px; border-radius:20px; font-size:2.5rem; }
  .hero-actions { grid-column:1 / -1; flex-direction:row; }
  .hero-actions a { flex:1; }
  .content-grid { grid-template-columns:1fr; }
  .similar-grid { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .topbar,main,.footer { width:min(100% - 2rem,1240px); }
  .brand small { display:none; }
  .brand strong { font-size:.78rem; letter-spacing:.16rem; }
  .topnav .active { display:none; }
  .topnav .account-link { max-width:120px; }
  .job-hero { padding:1.3rem; grid-template-columns:64px minmax(0,1fr); border-radius:22px; }
  .company-mark { width:64px; height:64px; border-radius:16px; font-size:1.8rem; }
  .hero-copy h1 { font-size:clamp(2rem,10vw,3.2rem); }
  .status-row > span:last-child { display:none; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .similar-section > header { align-items:start; flex-direction:column; gap:1rem; }
  .footer { flex-direction:column; }
}