/* ============================================================================
   theme-pro.css — 专业化视觉主题（UI v2）
   在各页 <style> / mobile.css / tokens.css 之后加载，纯覆盖层：
   只重定义色彩 / 圆角 / 阴影 / 边框 / 排版质感，不改布局尺寸与交互结构。
   回滚方式：移除本文件的 <link> 引用，或 git checkout ui-v1-backup。
   设计定位：金融数据产品（参考 Linear / Stripe / The Block）——
   深色 Hero、中性底色、细边框弱阴影、克制圆角、等宽数字。
   ========================================================================== */

:root{
  /* 主色：亮紫 → 沉稳靛紫；大面积渐变收敛为深色 */
  --accent:#5753e0;
  --accent-1:#5753e0;
  --accent-soft:#eeeefc;
  --accent-border:#d6d5f5;
  /* 中性体系 */
  --bg:#f7f7f8;
  --surface-2:#f7f7f8;
  --line:#e9e9ee;
  --border-1:#e9e9ee;
  --muted:#6e7180;
  --text-3:#989ba8;
  /* Hero：深色金融风（全站 .hero 均引用 --grad，一处重定义全站生效） */
  --grad:linear-gradient(160deg,#12152a 0%,#1b2140 55%,#232a52 100%);
  /* 阴影：默认几乎不可见，层级靠边框 */
  --shadow:0 1px 2px rgba(16,18,35,.04);
  --shadow-lg:0 8px 28px rgba(16,18,35,.10);
}
html[data-theme="dark"]{
  --accent:#7c79ec; --accent-1:#7c79ec;
  --accent-soft:#26244d; --accent-border:#3d3a78;
  --bg:#0d0f1a; --surface-2:#0d0f1a;
  --line:#23263a; --border-1:#23263a;
  --grad:linear-gradient(160deg,#0d0f1a 0%,#151936 60%,#1c2148 100%);
}

/* ---------- 全局质感 ---------- */
body{background:var(--bg)}
b,strong,.n,.pct,.salary,.jm-sal,.js{font-variant-numeric:tabular-nums}

/* ---------- 导航：白底细线，去玻璃拟态 ---------- */
.nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
html[data-theme="dark"] .nav{background:rgba(13,15,26,.92)}
.nav-links a{border-radius:7px}
.nav-links a.active{background:var(--accent-soft);color:var(--accent)}
.langbtn{border-radius:7px}

/* ---------- Hero：深色版适配（文案/输入/胶囊在深底上的对比度） ---------- */
.hero{background:var(--grad)}
.hero h1{letter-spacing:-.02em}
.hero p{opacity:.78}
.hero .kicker{color:#8f95c9;opacity:1}
.searchbar{background:#fff;border-radius:11px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.searchbar button{color:var(--accent)}
.hotkws .hklb{color:#767ca8}
.hotkws button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#c9cde8}
.hotkws button:hover{background:rgba(255,255,255,.15);color:#fff}
.course-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#c9cde8;box-shadow:none}
.course-pill:hover{background:rgba(255,255,255,.16);color:#fff}
.hero input{border-radius:11px}
.hero .audience span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}

/* ---------- 卡片族：细边框，去大阴影，克制圆角 ---------- */
.job,.panel,.co,.site,.card,.tablecard,.kpi,.gate-card{
  border-radius:10px;box-shadow:var(--shadow);border-color:var(--line)}
.job:hover,.co:hover,.site:hover{box-shadow:var(--shadow-lg);border-color:#d8d8e4;transform:none}
html[data-theme="dark"] .job:hover,html[data-theme="dark"] .co:hover,html[data-theme="dark"] .site:hover{border-color:#343858}
.jobs.compact{border-radius:10px}
.avatar{border-radius:9px}

/* ---------- 筛选条：白底细边工具栏 ---------- */
.filterbar{background:#fff;border:1px solid var(--line);border-radius:11px}
html[data-theme="dark"] .filterbar{background:var(--card)}
.fbtn{border-radius:8px;background:transparent;border-color:transparent;color:#4b4e5c}
.fbtn:hover,.fdrop:hover .fbtn{background:var(--accent-soft);border-color:transparent}
.fbtn.has{background:var(--accent-soft);border-color:var(--accent-border)}
.fchip{border-radius:8px}
.fchip.active{background:var(--accent-soft)}
.fpop{border-radius:10px;box-shadow:var(--shadow-lg)}
.fsep{background:var(--line)}
html[data-theme="dark"] .fbtn{color:#a9adc2}

/* ---------- 标签/徽章：更小更淡，方角化 ---------- */
.tag,.kw,.duty{border-radius:5px !important}
.tag{background:#f2f2f5;color:#5a5e6e}
html[data-theme="dark"] .tag{background:#20233a;color:#b6bad0}
.kw{border-radius:5px}
.new{border-radius:4px}
.hc-links a,.cats a,.issues a{border-radius:7px}

/* ---------- 按钮体系：主按钮深色实底，去渐变 ---------- */
.apply,.btn.primary,.gate-btn,.searchbar button{border-radius:9px}
.btn.primary{background:#14162b;border-color:#14162b}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.gate-btn{background:#14162b}
.gate-btn:hover{background:var(--accent);filter:none}
.more{border-radius:9px !important}
.cnh-fab{background:#14162b;box-shadow:0 8px 24px rgba(16,18,35,.35)}
.cnh-fab:hover{background:var(--accent);filter:none}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .gate-btn,html[data-theme="dark"] .cnh-fab{background:var(--accent)}

/* ---------- 弹层 ---------- */
.jm{border-radius:14px}
.jm-apply{border-radius:9px}
.jm-copy{border-radius:8px}

/* ---------- 表格 ---------- */
thead th{background:#fafafb;letter-spacing:.02em}
html[data-theme="dark"] thead th{background:#191c30}

/* ---------- 页脚 ---------- */
.cnh-footer{background:#fff}
html[data-theme="dark"] .cnh-footer{background:#101322}

/* ---------- 骨架屏 ---------- */
.skel{border-radius:10px}

/* ---------- KPI/数据数字 ---------- */
.kpi .n,.rrow .pct,.stack-legend b{font-variant-numeric:tabular-nums}

/* ---------- 主题切换按钮：emoji → 线性 SVG 图标（mask 实现，随主题切换月/日） ---------- */
.themebtn{position:relative;width:32px;height:27px}
.themebtn::before{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.themebtn:hover::before{background:var(--accent)}
html[data-theme="dark"] .themebtn::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat}