:root{
  color-scheme: light;
  --paper:#F9F6EE;
  --surface:#FFFFFF;
  --ink:#141B3C;
  --ink-2:#4A4F6B;
  --ink-muted:#8B8A82;
  --gold:#D9A441;
  --gold-deep:#B37E24;
  --border: rgba(20,27,60,.10);
  --border-strong: rgba(20,27,60,.16);
  --good:#0ca30c;
  --warning:#fab219;
  --critical:#d03b3b;
  --s1:#2a78d6;
  --s2:#eb6834;
  --grid:#e7e3d8;
  --shadow-sm: 0 1px 2px rgba(20,27,60,.06);
  --shadow-lg: 0 8px 24px rgba(20,27,60,.07);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(249,246,238,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:.5px; cursor:pointer;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);}
.navlinks{display:flex; gap:26px; font-size:14px; color:var(--ink-2);}
.navlinks a{color:inherit; text-decoration:none; cursor:pointer;}
.navlinks a:hover{color:var(--ink);}
.navlinks a:focus-visible, .brand:focus-visible, button:focus-visible, input:focus-visible, .chip:focus-visible, .list-row:focus-visible{
  outline:2px solid var(--gold-deep); outline-offset:2px;
}

section{padding:56px 0;}
section.tight{padding:32px 0;}
h1,h2,h3{margin:0; font-weight:700;}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:1.5px; color:var(--gold-deep);
  text-transform:uppercase; margin-bottom:10px;
}
.section-title{font-size:24px; margin-bottom:6px; text-wrap:balance;}
.section-sub{font-size:14px; color:var(--ink-2); max-width:680px; line-height:1.7; margin-bottom:28px;}

/* query hero */
.query-hero{padding:72px 0 40px; text-align:center;}
.query-hero h1{font-size:38px; line-height:1.35; max-width:720px; margin:0 auto 12px; text-wrap:balance;}
.query-hero p{font-size:15.5px; color:var(--ink-2); max-width:520px; margin:0 auto 30px; line-height:1.7;}
.search-box{max-width:560px; margin:0 auto; position:relative;}
.search-box input{
  width:100%; font-size:17px; padding:16px 20px 16px 48px; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm), var(--shadow-lg); outline:none; font-family:inherit;
}
.search-box input:focus{border-color:var(--gold-deep);}
.search-icon{position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-size:17px; pointer-events:none;}
.suggest-list{
  position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--surface);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
  z-index:40; text-align:left; display:none; max-height:320px; overflow-y:auto;
}
.suggest-list.open{display:block;}
.suggest-item{padding:12px 20px; font-size:14.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.suggest-item:hover, .suggest-item.active{background:var(--paper);}
.suggest-item .lvl{font-size:11.5px; padding:3px 9px; border-radius:999px;}
.suggest-empty{padding:16px 20px; font-size:13.5px; color:var(--ink-muted);}
.chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.chip{
  font-size:13px; padding:8px 16px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); color:var(--ink-2); cursor:pointer; transition:all .15s ease;
}
.chip:hover{border-color:var(--gold-deep); color:var(--ink);}
.chip.active{background:var(--ink); color:var(--gold); border-color:var(--ink);}

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:32px; box-shadow:var(--shadow-sm), var(--shadow-lg);
}
.loading{color:var(--ink-muted); font-size:14px; padding:20px 0;}
.chart-title{font-size:15.5px; font-weight:700; margin-bottom:2px;}
.chart-src{font-size:11.5px; color:var(--ink-muted); margin-bottom:16px;}
.legend{display:flex; gap:16px; font-size:12.5px; color:var(--ink-2); margin-bottom:12px; flex-wrap:wrap;}
.legend .item{display:flex; align-items:center; gap:6px;}
.legend .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;}

#tt{
  position:fixed; pointer-events:none; z-index:999; background:var(--ink); color:#fff;
  font-size:12.5px; line-height:1.6; padding:10px 12px; border-radius:8px; box-shadow:var(--shadow-lg);
  max-width:260px; opacity:0; transform:translate(-9999px,-9999px); transition:opacity .1s ease;
}
#tt b{color:var(--gold);}

.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700;}
.badge.good{background:#e5f6e5; color:#0a7a0a;}
.badge.warning{background:#fef1d9; color:#8a5b06;}
.badge.critical{background:#fbe4e4; color:#a12a2a;}
.badge.pen{background:#fbf1de; color:var(--gold-deep);}

.toggle{display:inline-flex; background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:4px; gap:2px;}
.toggle button{
  font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:999px;
  border:none; background:transparent; color:var(--ink-2); cursor:pointer; transition:all .15s ease;
}
.toggle button.active{background:var(--ink); color:var(--gold);}

#resultWrap{scroll-margin-top:80px;}
.occ-name{font-size:22px; font-weight:700;}
.hero-row{display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; margin:22px 0 8px;}
.hero-num-label{font-size:12.5px; color:var(--ink-muted); margin-bottom:4px;}
.hero-num{font-size:52px; font-weight:700; line-height:1;}
.hero-num.small{font-size:34px;}
.split-pair{display:flex; gap:36px; align-items:flex-end;}
.delta-note{font-size:12.5px; color:var(--gold-deep); background:#fbf1de; padding:8px 14px; border-radius:10px; max-width:280px; line-height:1.6;}
.foot-src{font-size:11.5px; color:var(--ink-muted); margin-top:4px;}
.divider{height:1px; background:var(--border); margin:26px 0;}

.tasklist{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px;}
.tasklist .col{border-left:3px solid; padding-left:16px;}
.tasklist .col.danger{border-color:var(--critical);}
.tasklist .col.safe{border-color:var(--good);}
.tasklist h4{margin:0 0 10px; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px;}
.tasklist .col.danger h4{color:var(--critical);}
.tasklist .col.safe h4{color:var(--good);}
.tasklist ol{margin:0; padding-left:18px; font-size:13.5px; line-height:1.9; color:var(--ink-2);}

.cards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.job-card{background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:18px;}
.job-card .name{font-size:13.5px; font-weight:700; margin-bottom:12px; min-height:36px;}
.job-card .num{font-size:23px; font-weight:700; color:var(--gold-deep);}
.job-card .num-label{font-size:10.5px; color:var(--ink-muted); margin-bottom:10px;}
.job-card .salary{font-size:12px; color:var(--ink-2); border-top:1px solid var(--border); padding-top:8px;}

.list-scroll{
  max-height:480px; overflow-y:auto; border:1px solid var(--border); border-radius:12px;
  background:var(--paper);
}
.list-row{
  display:flex; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border);
  border-left:3px solid transparent; cursor:pointer; font-size:13.5px; gap:12px; background:var(--surface);
}
.list-row:last-child{border-bottom:none;}
.list-row:hover{background:#fbf9f2;}
.list-row .rank{width:22px; color:var(--ink-muted); font-size:12px; font-variant-numeric:tabular-nums;}
.list-row .nm{flex:1;}
.list-row .bar-wrap{
  display:block; width:220px; height:8px; background:var(--paper); border-radius:4px; overflow:hidden; flex-shrink:0;
}
/* .bar-fill 必须显式 display:block —— 它是个 <span>，inline 元素的 width/height
   会被浏览器直接忽略（不是覆盖为0，是压根不参与布局），之前色块看起来"空的"
   就是这个默认 display:inline 导致的，不是颜色值本身的问题。 */
.list-row .bar-fill{display:block; height:100%; border-radius:4px; min-width:3px;}
.list-row .val{width:56px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0;}

details.about{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:4px 28px;}
details.about summary{
  cursor:pointer; padding:18px 0; font-weight:700; font-size:15px; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
details.about summary::-webkit-details-marker{display:none;}
details.about summary .chev{transition:transform .15s ease; color:var(--ink-muted);}
details.about[open] summary .chev{transform:rotate(90deg);}
.about-body{padding-bottom:24px; font-size:13.5px; color:var(--ink-2); line-height:1.9;}
.about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:16px 0;}
.about-stat{background:var(--paper); border-radius:10px; padding:14px;}
.about-stat .v{font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.about-stat .l{font-size:11.5px; color:var(--ink-muted); margin-top:2px;}

footer{padding:40px 0 56px; text-align:center;}
footer .foot-note{font-size:12px; color:var(--ink-muted); max-width:640px; margin:0 auto; line-height:1.8;}

svg{display:block; max-width:100%;}
svg text{font-family:inherit; fill:var(--ink-2);}
svg .val-label{fill:var(--ink); font-weight:600;}
.bar-row{cursor:pointer;}
.bar-row:hover rect.bar{filter:brightness(0.92);}

.chart-scroll{overflow-x:auto;}

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

@media (max-width: 760px){
  .cards-grid{grid-template-columns:repeat(2,1fr);}
  .about-stats{grid-template-columns:repeat(2,1fr);}
  .tasklist{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .query-hero h1{font-size:29px;}
  .hero-num{font-size:40px;}
  .list-row .bar-wrap{width:80px;}
  .panel{padding:22px;}
}
@media (max-width: 480px){
  .list-row .bar-wrap{display:none;}
}