/* =============================================================
   车身广告全链路平台 · 角色门户 / 角色工作台 共享组件
   依赖：assets/style.css（变量与基础组件全部复用）
   角色主色由各页 <style> 通过 --c-role / --c-role-lt / --c-role-50 注入
   ============================================================= */
:root{
  --c-role:var(--primary);
  --c-role-lt:#60a5fa;
  --c-role-50:var(--primary-50);
  --rp-w:1200px;
}

/* ---------- 通用容器 ---------- */
.wide{max-width:var(--rp-w);margin:0 auto;padding:0 24px}
.rp-foot{
  margin-top:40px;padding:26px 0 34px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-3);line-height:1.9;
}
.rp-foot .fl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:8px}
.rp-foot a{color:var(--text-2)}
.rp-foot a:hover{color:var(--c-role)}
/* 页脚导航链接：触控区 ≥36px */
.rp-foot .fl a{display:inline-flex;align-items:center;min-height:36px}

/* ---------- 顶部身份条（每个角色页必带） ---------- */
.idbar{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.idbar .ib{
  max-width:var(--rp-w);margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.idbar .ib-k{font-size:12.5px;color:var(--text-3);margin-right:-2px}
.rb{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;
  background:var(--c-role-50);color:var(--c-role);font-size:13.5px;font-weight:600;white-space:nowrap;
}
.rb .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 纯 HTML 下拉（details/summary，零 JS） */
.sw{position:relative;display:inline-block}
.sw>summary{
  list-style:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px;color:var(--text);cursor:pointer;
}
.sw>summary::-webkit-details-marker{display:none}
.sw>summary:hover{border-color:#c7d2fe;color:var(--c-role)}
.sw>summary .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw[open]>summary{border-color:var(--c-role);color:var(--c-role)}
.sw .menu{
  position:absolute;top:40px;left:0;min-width:236px;z-index:70;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;
}
.sw .menu .mh{font-size:11.5px;color:var(--text-3);padding:6px 10px 4px}
.sw .menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px}
.sw .menu a:hover{background:var(--page)}
.sw .menu a.cur{background:var(--c-role-50);color:var(--c-role);font-weight:600}
.sw .menu a .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.sw .menu a .ic{width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw .menu a.cur .ic{stroke:var(--c-role)}
.sw .menu .msep{height:1px;background:var(--border-light);margin:4px 6px}

/* 城市选择器（全国 / 省 / 市 三级，静态选项） */
.city-pick{display:inline-flex;align-items:center;gap:6px}
.city-pick .cp-k{font-size:12.5px;color:var(--text-3)}
.city-pick select{
  height:34px;padding:0 26px 0 10px;border:1px solid var(--border);border-radius:8px;background:#fff;
  font-size:13px;color:var(--text);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:13px;
}
.city-pick select:focus{outline:none;border-color:var(--c-role)}

.idbar .ib-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.idbar .ib-right .vlink{font-size:12.5px;color:var(--text-2);display:inline-flex;align-items:center;gap:5px}
.idbar .ib-right .vlink:hover{color:var(--c-role)}
.idbar .ib-right .vlink .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- 角色页 Hero ---------- */
.rp-hero{
  background:linear-gradient(135deg,var(--c-role) 0%,var(--c-role-lt) 100%);
  color:#fff;padding:34px 0 30px;
}
.rp-hero .h-in{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rp-hero h1{font-size:27px;font-weight:700;letter-spacing:.3px;line-height:1.35}
.rp-hero .lead{font-size:14.5px;color:rgba(255,255,255,.92);margin-top:8px;max-width:760px;line-height:1.75}
.rp-hero .h-act{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.rp-hero .btn-w{background:#fff;color:var(--c-role);border-color:#fff;font-weight:600}
.rp-hero .btn-w:hover{background:rgba(255,255,255,.9);color:var(--c-role)}
.rp-hero .btn-o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.rp-hero .btn-o:hover{background:rgba(255,255,255,.24);color:#fff}
.rp-hero .h-tip{
  margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  padding:6px 12px;border-radius:999px;
}
.rp-hero .h-tip .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- 区块标题（大白话） ---------- */
.sec{margin-top:26px}
.sec-h{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-h .bar{width:4px;height:19px;border-radius:3px;background:var(--c-role);flex:0 0 4px;align-self:center}
.sec-h h2{font-size:19px;font-weight:700;letter-spacing:.2px}
.sec-h .d{font-size:13px;color:var(--text-2);margin-left:2px}
.sec-h .more{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* KPI 跟随角色主色 */
.kpi .k-val{color:var(--c-role)}
.kpi .k-ic{background:linear-gradient(135deg,var(--c-role),var(--c-role-lt))}

/* ---------- 卡片网格 ---------- */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}

.acard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s;
}
.acard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.acard .ph{height:104px;border-radius:0;flex:0 0 104px}
.acard .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.acard .tt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acard .tt b{font-size:15px;font-weight:600}
.acard .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.acard .meta .m{min-width:0}
.acard .meta .m .k{font-size:11.5px;color:var(--text-3)}
.acard .meta .m .v{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .ft{margin-top:auto;padding-top:10px;border-top:1px solid var(--border-light);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acard .ft .price{font-size:17px;font-weight:700;color:var(--c-role)}
.acard .ft .btn{margin-left:auto}
.plate{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;
  background:#f1f5f9;border:1px solid var(--border);font-size:12.5px;font-weight:600;letter-spacing:.5px;
}

/* ---------- 提示条扩展：角色色 ---------- */
.alert.role{background:var(--c-role-50);border-color:var(--c-role);color:var(--c-role)}

/* ---------- 上传区 ---------- */
.up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.up-slot{border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden}
.up-slot .ph{height:100px;border-radius:0}
.up-slot .ub{padding:10px 12px;font-size:12.5px;color:var(--text-2)}
.up-slot .ub b{display:block;font-size:13px;color:var(--text);margin-bottom:2px}

/* ---------- 门户：顶部条 + Hero + 角色卡 ---------- */
.ptop{background:#fff;border-bottom:1px solid var(--border)}
.ptop .pt-in{max-width:var(--rp-w);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ptop .lg{display:flex;align-items:center;gap:11px}
.ptop .lg .mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;overflow:hidden;
  background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
}
.ptop .lg .mark img{width:100%;height:100%;object-fit:cover;display:block}
.ptop .lg b{display:block;font-size:15px;font-weight:700;letter-spacing:.3px}
.ptop .lg span{display:block;font-size:11.5px;color:var(--text-2)}
.ptop .pt-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ptop .pt-r .muted{font-size:12.5px;color:var(--text-2)}
/* 门户头部按钮触控区 ≥36px（WorkBuddy 生产就绪度 20261020：34px → 38px） */
.ptop .pt-r .btn{height:38px;padding:0 16px}

/* logo 图片缺失时的文字兜底 */
.lg-fb{display:none}
.lg.noimg img{display:none}
.lg.noimg .lg-fb{display:block}

.phero{
  background:linear-gradient(150deg,#0f172a 0%,#1e3a8a 55%,#2563eb 100%);
  color:#fff;padding:52px 0 44px;position:relative;overflow:hidden;
}
.phero::after{
  content:"";position:absolute;right:-140px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(56,189,248,.32),transparent 66%);
}
.phero::before{
  content:"";position:absolute;left:-160px;bottom:-180px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.42),transparent 66%);
}
.phero .pw{position:relative;z-index:2;max-width:var(--rp-w);margin:0 auto;padding:0 24px}
.phero .hi{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center}
.phero .hlogo{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.phero .hlogo .box{
  min-width:64px;height:64px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.phero .hlogo .box img{width:100%;height:100%;object-fit:contain;display:block}
.phero .hlogo .fb{font-size:20px;font-weight:800;letter-spacing:2px;color:#fff;display:none}
.phero .hlogo.noimg img{display:none}
.phero .hlogo.noimg .fb{display:block}
.phero .hlogo .tx b{display:block;font-size:15px;font-weight:600;letter-spacing:1px}
.phero .hlogo .tx span{display:block;font-size:12px;color:#b6ccf2}
.phero h1{font-size:34px;font-weight:800;line-height:1.35;letter-spacing:.5px}
.phero .lead{font-size:15.5px;color:#c7dbfb;margin-top:12px;max-width:660px;line-height:1.8}
.phero .stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.phero .st{
  min-width:130px;padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
}
.phero .st b{display:block;font-size:20px;font-weight:700}
.phero .st span{display:block;font-size:12px;color:#b6ccf2;margin-top:2px}
.phero .hbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.phero .btn-w{background:#fff;color:#1d4ed8;border-color:#fff;font-weight:600}
.phero .btn-w:hover{background:#f4f7ff;color:#1d4ed8}
.phero .btn-o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.phero .btn-o:hover{background:rgba(255,255,255,.24);color:#fff}
.phero .note{margin-top:16px;font-size:12.5px;color:#9fc0f0;line-height:1.8}

/* 右侧四步示意 */
.flow-card{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:16px;padding:20px 20px 18px;backdrop-filter:blur(2px);
}
.flow-card h4{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.flow-card h4 .ic{width:16px;height:16px;stroke:#93c5fd;fill:none;stroke-width:1.9;stroke-linecap:round}
.flow-card .fi{display:flex;align-items:flex-start;gap:12px;padding:9px 0}
.flow-card .fi .no{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;
}
.flow-card .fi b{display:block;font-size:13.5px;font-weight:600}
.flow-card .fi span{display:block;font-size:12px;color:#b6ccf2;margin-top:1px}

/* ---------- 四张角色卡 ---------- */
.roles{padding:34px 0 8px}
.roles .rh{text-align:center;margin-bottom:22px}
.roles .rh h2{font-size:24px;font-weight:700;letter-spacing:.3px}
.roles .rh p{font-size:14px;color:var(--text-2);margin-top:8px}
.role-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .18s,transform .18s;border-top:4px solid var(--rc);
}
.role-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.role-card .ric{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--rc-50);color:var(--rc);
}
.role-card .ric .ic{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.role-card h3{font-size:19px;font-weight:700;color:var(--rc)}
.role-card .who{font-size:14px;color:var(--text);line-height:1.7;min-height:48px}
.role-card ul{display:flex;flex-direction:column;gap:8px}
.role-card ul li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-2);line-height:1.6}
.role-card ul li .ic{width:15px;height:15px;flex:0 0 15px;margin-top:3px;stroke:var(--rc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.role-card .go{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;
  height:44px;border-radius:10px;background:var(--rc);color:#fff;font-size:14.5px;font-weight:600;
}
.role-card .go:hover{filter:brightness(.94);color:#fff}
.role-card .go .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 平台价值三栏 ---------- */
.value3{padding:30px 0 6px}
.value3 .v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.value3 .vc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.value3 .vc .vi{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.value3 .vc .vi .ic{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.value3 .vc h4{font-size:16px;font-weight:700;margin-bottom:8px}
.value3 .vc p{font-size:13.5px;color:var(--text-2);line-height:1.8}

/* ---------- 底部登录 / 全国覆盖 ---------- */
.join{padding:8px 0 4px}
.join .jb{
  background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:var(--radius-lg);
  padding:28px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.join .jb .jt h3{font-size:20px;font-weight:700}
.join .jb .jt p{font-size:13.5px;color:#b6ccf2;margin-top:6px;line-height:1.8;max-width:640px}
.join .jb .ja{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.join .jb .btn-w{background:#fff;color:#1d4ed8;border-color:#fff;font-weight:600}
.join .jb .btn-o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.join .ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.join .wy{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;
  background:#fff;border:1px solid var(--border);font-size:13px;color:var(--text-2);
}
.join .wy .ic{width:15px;height:15px;stroke:var(--text-2);fill:none;stroke-width:1.9;stroke-linecap:round}
.join .wy .so{font-size:11.5px;color:var(--text-3)}
.join .cover{margin-top:14px;font-size:12.5px;color:var(--text-2);line-height:1.9}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phero .hi{grid-template-columns:minmax(0,1fr);gap:28px}
  .value3 .v3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .cards.c3,.cards.c2,.cards.c4{grid-template-columns:minmax(0,1fr)}
  .wide,.ptop .pt-in,.phero .pw{padding:0 16px}
  .idbar .ib{padding:10px 16px}
  .phero h1{font-size:26px}
  .rp-hero h1{font-size:22px}
}

/* ---------- 页脚法务链接区（全站统一） ---------- */
.rp-legal{
  display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;
  padding:10px 0;margin:10px 0 12px;
  border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);
}
.rp-legal__k{font-size:12px;color:var(--text-3);margin-right:2px}
.rp-legal a{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;
  font-size:12.5px;color:var(--text-2);text-decoration:none;
}
.rp-legal a:hover{color:var(--c-role)}
.rp-legal a .ic{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .rp-legal{gap:0 8px}
  .rp-legal__k{width:100%;margin-bottom:2px}
}