/* ============================================================
   皮肤 04 · 藏青商务（2026-09-04 用户指定）

   **skin-02 的原样复制，只换了颜色值** —— 排版、圆角、间距、
   选择器、类名一个字没动。用户原话：「样式、排版之类的全部都不要动，
   只是配色按照那个静态页面改」。要改版式请改 skin-02 那套结构，别在这里加规则。

   配色抄自 F:\dzkjdxhb\家庭仓\官网\index.html：
     藏青 #0f2a44 / #163b5e   正文 #1c2430   次要 #5b6674   细线 #e3e8ee
     浅灰底 #f4f7fa           橙 #e8712c / #c95d1c        绿 #1d8a4b
   对照表在 scratchpad/make_skin04.py，要再调色改那张表重生成，别手改本文件。
   ============================================================ */
:root{
  --ink:#1c2430; --ink2:#5b6674; --ink3:#8a94a3;
  --line:#e3e8ee; --line2:#e3e8ee;
  --metal:#ffffff; --metal-soft:#f4f7fa;
  --graphite:linear-gradient(150deg,#0f2a44 0%,#163b5e 55%,#1f4d78 100%);
  --orange:linear-gradient(145deg,#e8712c,#c95d1c);
  --o:#e8712c; --o2:#c95d1c;
  --green:#1d8a4b; --red:#c0392b; --blue:#163b5e;
  --edge:none; --shadow:0 14px 34px rgba(15,42,68,.10); --shadow-h:0 20px 44px rgba(15,42,68,.14);
  --page:#f4f7fa; --hd:#ffffff;
  --chrome:#f4f7fa; --chrome-soft:#f4f7fa; --chip-on:#163b5e;
  --note-bg:#f4f7fa; --field:#ffffff;
  --rd-purple:linear-gradient(150deg,#0f2a44 0%,#163b5e 55%,#1f4d78 100%);
  --rd-violet:#163b5e;
  --violet-grad:linear-gradient(145deg,#1f4d78,#0f2a44);
  /* 频道图标底座：从 05 大字橱窗搬过来的三块渐变，按顺序循环（2026-09-03 用户点名要这个） */
  --bt-cover:radial-gradient(90% 70% at 70% 36%,#22496e 0%,#163b5e 60%,#0f2a44 100%);
  --bt-sand:radial-gradient(80% 120% at 30% 0%,#ffd9bf 0%,#f0996a 60%,#c95d1c 100%);
  --bt-ocean:radial-gradient(85% 110% at 70% 10%,#dbe6f0 0%,#8fa8bd 55%,#5b6674 100%);
}
html[data-theme="dark"]{
  --ink:#e6ecf2; --ink2:#93a2b2; --ink3:#7b8998;
  --line:#20344a; --line2:#27405a;
  --metal:#12283d; --metal-soft:#17334b;
  --page:#0b1f33; --hd:#12283d; --note-bg:#17334b; --field:#12283d;
  --chrome:#17334b; --chrome-soft:#17334b;
  --shadow:0 14px 34px rgba(0,0,0,.42); --shadow-h:0 20px 44px rgba(0,0,0,.55);
  --o:#f08a4f; --green:#3fc98a; --red:#e07a68;
}

body{background:var(--page);font-size:14.5px}

/* ── 顶栏：纯白 + 细线 ── */
.header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--hd);border-bottom:1px solid var(--line)}
.header .wrap{height:64px}
.logo .mark{border-radius:12px;background:var(--rd-violet);color:#fff;box-shadow:none;width:36px;height:36px}
.logo .name{font-size:20px;font-weight:800}
.logo .name b{color:var(--rd-violet)}
.hnav a{border-radius:10px;font-weight:600;padding:8px 13px}
.hnav a.on{background:var(--rd-purple);color:#fff;box-shadow:0 6px 14px rgba(15,42,68,.24)}
.hnav a:hover{background:var(--metal-soft)}
.btn-post{border-radius:999px;font-weight:700;height:40px;padding:0 20px;
  background:var(--orange);box-shadow:0 8px 18px rgba(201,93,28,.30)}
.city-pick,.theme-tgl{border-radius:999px;background:#fff;border:1px solid var(--line2);box-shadow:none}
.hsearch{border-radius:14px;background:var(--metal-soft);border:1px solid var(--line);box-shadow:none}

/* ── Hero：整块紫蓝面板，原皮的招牌 ── */
.hero{padding:24px 0 34px !important}
/* 紫框左右边要跟下面的内容卡对齐（2026-09-04 用户提）。
   .wrap 平时靠 padding:0 28px 把内容顶进来 28px，可这里 padding 被紫框自己吃掉了，
   于是紫框比下面每一张卡各宽出 28px，将来两边放广告就对不齐。
   减掉这 56px，紫框外沿就正好落在内容卡的外沿上。 */
.hero .wrap{background:var(--rd-purple);border-radius:32px;padding:44px 48px 40px;
  max-width:calc(var(--wrapw) - 56px);
  box-shadow:0 24px 60px rgba(15,42,68,.28);position:relative;overflow:hidden}
.hero .wrap::after{content:"";position:absolute;right:-140px;top:-160px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(circle,rgba(22,59,94,.5),transparent 65%);pointer-events:none}
.hero .wrap>*{position:relative;z-index:1}
.hero h1{font-size:44px !important;font-weight:900 !important;letter-spacing:-.02em !important;
  color:#fff !important;margin-top:18px !important;line-height:1.14 !important}
.hero h1 span{background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;color:#e8712c !important}
.hero p{color:rgba(255,255,255,.72) !important;font-size:15px !important;margin-top:14px !important}
.hero p b{color:#fff !important}
.pill{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.86);
  box-shadow:none;border-radius:999px;font-size:12.5px}
.pill .dot{background:#e8712c}
.searchbox{border-radius:999px;background:#fff;border:none;box-shadow:0 10px 26px rgba(11,31,51,.28);padding:7px}
.searchbox:focus-within{box-shadow:0 10px 30px rgba(11,31,51,.4)}
.searchbox button{border-radius:999px;height:48px;padding:0 30px;font-weight:700;
  background:var(--orange);box-shadow:0 8px 18px rgba(201,93,28,.34)}
.js-hot{border-radius:999px !important;background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;color:rgba(255,255,255,.86) !important;box-shadow:none !important}
.hero+.wrap .factcard,.hero~.wrap .factcard{margin-top:22px}

/* ── 面板 / 卡片：白底大圆角 + 柔阴影 ── */
.panel,.filters,.factcard,.fcard,.dmain,.bizc,.userbar{border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-theme="dark"] .panel,html[data-theme="dark"] .filters,html[data-theme="dark"] .factcard,
html[data-theme="dark"] .dmain,html[data-theme="dark"] .fcard{background:var(--metal)}
/* ══ GEO 事实卡：重排 ══
   原来的毛病有三个：
   ① auto-fit 网格在宽屏下把 8 个字段排成 7 + 1，最后一格孤零零，右边一大片空网格；
   ② w01 靠 gap:1px 让底色透出来当分隔线，我把卡片底色改成白之后线就没了，字段全散着；
   ③ 标签在上、值在下，而这张卡一多半是数字（6601 条 / 231 条 / 11 个），
      数字被压在第二行，最该被看见的东西反而最弱。

   重排后：
   · 值提到上面、放大到 20px 用 Archivo 数字体，标签缩到 11px 垫在下面 —— 变成一条统计条；
   · flex 换行代替网格，最后一行自动撑满，字段数变了也不会留空位
     （首页 8 个、列表页 5 个、详情页 6~7 个都成立）；
   · 分隔线用 box-shadow 画，不占布局，最外圈被容器 overflow 裁掉，不会和边框叠成双线；
   · 备注独占一行做页脚。
   （2026-09-03 用户要求重新排版） */
/* 生成器给每格标了 .num / .txt（值是否以数字开头）。
   数字：第一行，等宽统计格，大号数字在上、小标签在下；
   文字：第二行，一行属性「标签 值」并排，小字，不撑高；
   备注：第三行页脚。三种内容三种排法，再也不会出现域名被拦腰截断、
   「全美 50 州…」占三行、「费用」孤零零一格这些事。 */
.factcard{display:flex;flex-wrap:wrap;gap:0;overflow:hidden;padding:0;align-items:stretch}
.fc-i{background:transparent;box-shadow:none}
.fc-i.num{order:1;flex:1 1 20%;padding:16px 20px 14px;gap:2px;justify-content:flex-start;
  box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.fc-i.num b{order:1;font-family:var(--disp);font-size:24px;font-weight:800;line-height:1.2;
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.fc-i.num span{order:2;font-size:11.5px;color:var(--ink3);font-weight:500}
.fc-i.txt{order:2;flex:0 1 auto;flex-direction:row;align-items:baseline;gap:8px;
  padding:11px 20px;box-shadow:0 1px 0 var(--line);white-space:nowrap}
.fc-i.txt span{font-size:12px;color:var(--ink3)}
.fc-i.txt span::after{content:"："}
.fc-i.txt b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:normal}
.fc-i.txt+.fc-i.txt{position:relative}
.fc-i.txt+.fc-i.txt::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
.fc-n{order:3;flex:1 1 100%;background:var(--metal-soft);padding:9px 20px;font-size:11.5px;
  color:var(--ink3);box-shadow:none}
html[data-theme="dark"] .fc-i{background:transparent}
@media(max-width:640px){
  .fc-i.num{flex:1 1 50%;padding:13px 14px}
  .fc-i.num b{font-size:20px}
  .fc-i.txt{flex:1 1 100%;padding:9px 14px}
  .fc-i.txt+.fc-i.txt::before{display:none}
}
.phead h3{font-size:16px;font-weight:800}
.pitem{border-radius:12px}
.pitem:hover{background:var(--metal-soft)}
.pitem .p{color:var(--o2)}
.fopt{border-radius:8px;background:var(--metal-soft);color:var(--ink2);font-weight:600;margin:3px 0}
.fopt.on{background:var(--rd-purple);color:#fff;box-shadow:0 6px 14px rgba(15,42,68,.22)}
.fopt:hover{background:rgba(22,59,94,.10);color:var(--rd-violet)}

/* ── 区块头 ── */
.sec-head{padding-bottom:0;margin-bottom:16px;border:none}
.sec-head::after{display:none}
.sec-head h2{font-size:22px;font-weight:900;letter-spacing:-.01em}
.sec-head .more{border-bottom:none;color:var(--rd-violet);font-weight:700}

/* ── 列表行：白卡 + 紫色序号方块 ── */
.list{gap:6px}
.card{border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(15,42,68,.06);
  padding:9px 14px;gap:12px}
html[data-theme="dark"] .card{background:var(--metal)}
.card:hover{box-shadow:var(--shadow-h);border-color:var(--line2)}
.card.feature{border-color:rgba(232,113,44,.35)}
.cidx{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--violet-grad);color:#fff;font-weight:800;font-size:12px;
  box-shadow:0 3px 8px rgba(15,42,68,.22)}
.card.feature .cidx{background:var(--orange);box-shadow:0 3px 8px rgba(201,93,28,.26)}
.ctitle{font-size:15px;font-weight:800}
.cmeta{margin-top:2px;font-size:12px}
.cpay{background:var(--orange) !important;border:none !important;border-radius:999px;
  box-shadow:0 3px 8px rgba(201,93,28,.22);font-size:13px;padding:5px 12px}
.cpay.muted{background:var(--metal-soft) !important;color:var(--ink) !important;box-shadow:none}
.cfav{width:30px;height:30px;border-width:1px;border-radius:9px}
.badge{border-radius:8px;font-weight:800}
.badge.top{background:var(--orange);box-shadow:none}
.badge.hot{background:rgba(22,59,94,.10);color:var(--rd-violet);border-color:transparent}

/* ── 频道 / 类目 ── */
.channels{gap:14px}
.ch,.cat{border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:20px 14px}
html[data-theme="dark"] .ch,html[data-theme="dark"] .cat{background:var(--metal)}
.ch:hover,.cat:hover{box-shadow:var(--shadow-h);border-color:rgba(22,59,94,.35)}
/* 频道 / 类目图标：用 05 那套渐变底座，三块循环（深灰 → 沙金 → 海蓝）。
   这条只管底色；两种尺寸各自的大小在下面分别写死。 */
.ch .ico,.cat .ico{background:var(--bt-cover);border:none;box-shadow:none;border-radius:16px;
  width:48px;height:48px;font-size:24px}
.ch:nth-child(3n+2) .ico,.cat:nth-child(3n+2) .ico{background:var(--bt-sand)}
.ch:nth-child(3n) .ico,.cat:nth-child(3n) .ico{background:var(--bt-ocean)}
.ch .t{font-size:16px;font-weight:800;margin-top:10px}
.cat .t{font-size:15.5px;font-weight:800}
.cats{gap:14px}
/* 「找什么工作」那一排是 .cat.sm，改成横躺的紧凑卡：图标在左、文字在右。
   原来是竖着排（图标在上、标题在下），5 列宽度下右边全是空的，卡片白白高一倍。
   改横排后高度从 ~100px 掉到 ~56px，宽度也用满了。

   两个坑：
   1. w01 里 .cat.sm 的选择器权重比 .cat 高，只改 .cat 对这排完全不生效，必须显式写 .cat.sm。
   2. 结构是 ico / t / n 三个平级 div，所以用 grid 让图标跨两行，标题和数量各占右边一行。
   （2026-09-03 用户要求：卡片做小一点） */
.cat.sm{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:11px;align-items:center;padding:11px 14px;border-radius:16px}
.cat.sm .ico{grid-column:1;grid-row:1 / span 2;width:36px;height:36px;font-size:18px;border-radius:11px}
.cat.sm .t{grid-column:2;grid-row:1;align-self:end;margin-top:0;font-size:14.5px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat.sm .n{grid-column:2;grid-row:2;align-self:start;font-size:12px;margin-top:1px}
.cat .cnt{border-radius:999px;background:var(--metal-soft);box-shadow:none;border:none}
.cat[data-hot]::after{border-radius:0 24px 0 12px;background:var(--orange)}

/* ── 详情页 ── */
.page-head h1,.d-title{font-size:clamp(24px,3vw,34px) !important;font-weight:900 !important;
  letter-spacing:-.02em !important}
.page-head .meta b{color:var(--o2)}
.pay-card{border-radius:24px;background:var(--orange);border:none;
  box-shadow:0 14px 30px rgba(201,93,28,.30);padding:24px 26px}
.btn-ink{border-radius:16px;background:var(--rd-purple);box-shadow:0 10px 22px rgba(15,42,68,.28);
  font-weight:800;padding:15px 0}
.btn-line{border-radius:16px;background:#fff;border:1px solid var(--line2);box-shadow:none;font-weight:700}
.d-tag{border-radius:10px;background:var(--metal-soft)}
.d-tag.hl{background:rgba(22,59,94,.10);color:var(--rd-violet)}
.risk-strip{border-radius:12px;background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.2)}
.warn-strip{border-radius:12px}
.sim .n,.pitem .n{border-radius:12px}

/* ── 分页 ── */
.pager a,.pager span{border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:none;font-weight:700}
.pager .cur{background:var(--rd-purple);border-color:transparent;box-shadow:0 6px 14px rgba(15,42,68,.22)}

/* ── 底部大 CTA：紫蓝面板 + 橙按钮 ── */
.bigcta{border-radius:32px;background:var(--rd-purple);border:none;
  box-shadow:0 24px 54px rgba(15,42,68,.26);margin-top:44px}
.bigcta::after{display:none}
.bigcta .in{padding:40px 30px}
.bigcta h2{font-size:28px !important;font-weight:900;color:#fff}
.bigcta p{color:#93a2b2}
.bigcta .btn{border-radius:14px;background:var(--orange);padding:13px 34px;font-weight:800;
  box-shadow:0 10px 24px rgba(201,93,28,.40)}

/* ── 页脚 ── */
footer{margin-top:44px;background:#fff;border-top:1px solid var(--line)}
html[data-theme="dark"] footer{background:var(--metal)}
.inp,.sel,.txa{border-radius:14px}
.crumb a:hover{color:var(--rd-violet)}
@media(max-width:860px){
  /* 窄屏没有留白可让，紫框贴边，跟原来一样 */
  .hero .wrap{border-radius:24px;padding:32px 24px;max-width:100%}
  .hero h1{font-size:32px !important}
}