/* ============================================================
 *  P站生态方案书 —— 视觉严格按 PLAZA 官网规范
 *  规范来源：直播聚合站/PLAZA设计规范.md（从 plazat4.com 实采）
 *  底 #F7F7F7 / 卡片白 / 主色 #FA324C / PingFang SC / 14px 主导
 *  手机优先：默认样式即手机版，桌面用 min-width 覆盖
 * ============================================================ */

:root{
  --bg:#F7F7F7; --card:#FFFFFF;
  --brand:#FA324C; --brand-deep:#F40002; --brand-soft:#FFE9EA;
  --ink:#000000; --ink-2:#121212; --ink-3:#333333;
  --gray:#666666; --gray-2:#888888; --gray-3:#999999;
  --line:#EDEDED; --line-2:#BFBFBF;
  /* 状态三档只用「绿 + 两级灰」。原来跑通绿、雏形橙、待建灰是三种色相，
     加上主红和商户站深蓝，整页五种颜色在打架 —— 领导反馈"颜色种类太多"就是这个。
     绿留着（"已跑通"是强正向信号，值得一个颜色），其余退回灰阶靠深浅区分。 */
  --ok:#12A45B; --warn:#5B646E; --todo:#9AA3AD;
  --r-pill:999px; --r-lg:12px; --r-md:9px; --r-sm:8px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-up:0 6px 24px rgba(0,0,0,.10);
  --ease:cubic-bezier(.2,.9,.25,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 14px/1.7 "PingFang SC",Roboto,HelveticaNeue,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:820px;margin:0 auto;padding:0 16px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:10px;height:52px}
.logo{font-size:19px;font-weight:800;letter-spacing:.5px;color:var(--brand)}
.logo em{font-style:normal;color:var(--ink-2);font-weight:700;font-size:14px;margin-left:8px}
.topbar .meta{margin-left:auto;font-size:12px;color:var(--gray-3)}

/* ---------- 封面 ---------- */
.hero{padding:34px 0 26px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.hero h1{margin:0 0 12px;font-size:24px;line-height:1.4;font-weight:800;letter-spacing:-.3px}
.hero h1 b{color:var(--brand)}
.hero .lead{margin:0 0 20px;font-size:14px;color:var(--gray);line-height:1.85}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fact{background:var(--card);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow)}
.fact .n{font-size:22px;font-weight:800;color:var(--brand);line-height:1.2}
.fact .n small{font-size:12px;font-weight:600;margin-left:2px}
.fact .t{font-size:12px;color:var(--gray);margin-top:4px}

/* ---------- 区块与标题 ---------- */
section{padding:30px 0}
.sec-title{
  display:flex;align-items:center;gap:9px;
  margin:0 0 6px;font-size:17px;font-weight:800;letter-spacing:-.2px;
}
.sec-title::before{
  content:"";width:4px;height:18px;border-radius:0 4px 4px 0;
  background:var(--brand);flex:none;
}
.sec-sub{margin:0 0 18px;font-size:13px;color:var(--gray-3);line-height:1.7}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.card + .card{margin-top:12px}

/* ---------- 状态标记 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  line-height:1.6;white-space:nowrap;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);background:rgba(18,164,91,.10)}
.badge.warn{color:var(--warn);background:rgba(91,100,110,.10)}
.badge.todo{color:var(--todo);background:rgba(154,163,173,.14)}

/* ---------- 链路图 ---------- */
.flow{display:flex;flex-direction:column;gap:0}
.node{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;display:flex;align-items:flex-start;gap:10px;
}
.node.hub{border-color:var(--brand);background:linear-gradient(180deg,#fff,#FFF7F8)}
.node.ext{border-style:dashed;background:#FBFBFB}
.node .nb{flex:1;min-width:0}
.node .nt{font-size:14px;font-weight:700;line-height:1.5}
.node .nd{font-size:12px;color:var(--gray);margin-top:3px;line-height:1.6}
.arrow{height:20px;display:flex;align-items:center;justify-content:center;color:#D0D0D0;font-size:13px}
.branch{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:600px){ .branch{grid-template-columns:repeat(3,1fr)} .branch.two{grid-template-columns:repeat(2,1fr)} }
.stage{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  font-size:12px;font-weight:700;color:var(--brand);
}
.stage i{
  font-style:normal;background:var(--brand);color:#fff;
  border-radius:var(--r-sm);padding:1px 7px;font-size:11px;
}

/* ---------- 截图标注 ---------- */
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-up);background:#000}
.shot img{width:100%}
.shot-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:600px){ .shot-grid{grid-template-columns:1fr 1fr} }
.shot-cap{font-size:12px;color:var(--gray);margin-top:8px;line-height:1.7}
.shot-cap b{color:var(--ink-2)}
.pin{
  position:absolute;z-index:2;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);
  box-shadow:0 2px 10px rgba(250,50,76,.4);white-space:nowrap;
}
.pin::after{
  content:"";position:absolute;left:-14px;top:50%;width:14px;height:1.5px;
  background:var(--brand);transform:translateY(-50%);
}
.pin.l::after{left:auto;right:-14px}

/* ---------- 封面角标体系 ---------- */
.tag-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){ .tag-demo{grid-template-columns:repeat(3,1fr)} }
.tag-item{border-radius:var(--r-md);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.tag-thumb{position:relative;aspect-ratio:16/10;background:#E9EAEC;overflow:hidden}
.tag-thumb img{width:100%;height:100%;object-fit:cover}
.tag-thumb .corner{
  position:absolute;left:6px;top:6px;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:var(--r-sm);color:#fff;
  background:rgba(0,0,0,.58);backdrop-filter:blur(4px);
}
/* 只有「官方」用主色，商户角标一律中性——五个商户各给一个颜色就成了调色盘 */
.tag-thumb .corner.official{background:var(--brand)}
.tag-item .tl{padding:8px 10px 10px;font-size:12px;color:var(--gray)}
.tag-item .tl b{display:block;color:var(--ink-2);font-size:13px;margin-bottom:2px}

/* ---------- KOL 双边市场 ---------- */
.two-side{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){ .two-side{grid-template-columns:1fr 1fr} }
.side-h{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.side-tag{
  font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand);
}
.two-side .task{margin-bottom:10px}
.gig{
  background:var(--card);border-radius:var(--r-md);padding:12px 14px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.gig-ava{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:#F2F3F5;object-fit:cover;
}
.gig-b{flex:1;min-width:0}
.gig-b .tt{font-size:13px;font-weight:700;line-height:1.5}
.gig-b .tm{margin-top:6px}

/* ---------- 弹幕同步演示 ---------- */
.demo{background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.demo-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.btn{
  border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  padding:9px 16px;border-radius:var(--r-pill);background:var(--brand);color:#fff;
  transition:transform .15s var(--ease),opacity .15s;
}
.btn:active{transform:scale(.96)}
.btn.ghost{background:#fff;color:var(--gray);border:1px solid var(--line-2)}
.btn[disabled]{opacity:.45;cursor:default}
.stage-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.phone{
  border:2px solid #E3E3E3;border-radius:14px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;height:280px;
}
.phone.dark{border-color:#2E3540;background:#161B22}
.ph-head{
  font-size:11px;font-weight:700;padding:7px 10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:5px;
}
.phone.dark .ph-head{color:#D8DEE6;border-bottom-color:#252C36;background:#11161C}
.ph-head .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
.phone.dark .ph-head .dot{background:#8A94A0}
.ph-video{height:64px;flex:none;background:linear-gradient(135deg,#3a4a63,#1d2634);position:relative}
.ph-video::after{
  content:"同一路 AI体育源";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:rgba(255,255,255,.45);
  font-size:10px;letter-spacing:.5px;
}
.ph-body{flex:1;overflow:hidden;padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.dm{
  font-size:11px;line-height:1.5;padding:4px 7px;border-radius:var(--r-sm);
  background:#F4F5F7;color:var(--ink-3);
  animation:dmIn .38s var(--ease) both;
}
.phone.dark .dm{background:#222932;color:#C7CED6}
.dm b{color:var(--brand);font-weight:700}
.phone.dark .dm b{color:#9AA6B4}
.dm.hot{background:var(--brand-soft);color:var(--brand-deep)}
.phone.dark .dm.hot{background:#33232A;color:#FF9AAB}
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pipe{margin:12px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.pipe .line{width:1.5px;height:14px;background:#DDD}
.room,.console{
  width:100%;border-radius:var(--r-md);padding:11px 13px;text-align:center;
  border:1px solid var(--line);background:#fff;transition:.3s var(--ease);
}
.room.on{border-color:var(--brand);background:#FFF7F8;box-shadow:0 0 0 3px rgba(250,50,76,.10)}
.console.on{border-color:var(--brand);background:#FFF7F8;box-shadow:0 0 0 3px rgba(250,50,76,.10)}
.room .rt,.console .rt{font-size:13px;font-weight:700}
.room .rd,.console .rd{font-size:11.5px;color:var(--gray-3);margin-top:2px}
.console-log{
  margin-top:8px;font-size:11px;color:var(--gray);text-align:left;
  max-height:74px;overflow:hidden;
}
.console-log div{padding:2px 0;animation:dmIn .3s var(--ease) both}
.console-log .k{color:var(--brand);font-weight:700}

/* ---------- 商业模式 ---------- */
.biz{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){ .biz{grid-template-columns:1fr 1fr} }
.biz-card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);border-top:3px solid var(--brand)}
.biz-card h3{margin:0 0 4px;font-size:15px;font-weight:800}
.biz-card .who{font-size:12px;color:var(--brand);font-weight:700;margin-bottom:10px}
.biz-step{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.65}
.biz-step:first-of-type{border-top:0}
.biz-step i{
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand);font-style:normal;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}

/* ---------- 任务卡（KOL 接单） ---------- */
.tasks{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){ .tasks{grid-template-columns:1fr 1fr} }
.task{background:var(--card);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow)}
.task .tt{font-size:13.5px;font-weight:700;line-height:1.5}
.task .tm{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip{font-size:11px;color:var(--gray);background:#F2F3F5;border-radius:var(--r-sm);padding:2px 8px}
.task .price{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--brand)}

/* ---------- 对照表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:#FAFAFA;font-weight:700;font-size:12px;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 页脚 ---------- */
footer{padding:26px 0 40px;border-top:1px solid var(--line);margin-top:20px}
footer .fl{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--gray)}
footer .cp{margin-top:14px;font-size:11.5px;color:var(--gray-3);line-height:1.8}

/* ---------- 打印（导出 PDF）---------- */
@media print{
  body{background:#fff}
  .topbar{position:static}
  .demo-ctl{display:none}
  section{padding:16px 0;break-inside:avoid}
  .card,.biz-card,.task,.shot{box-shadow:none;border:1px solid #E5E5E5}
  .print-only{display:block!important}
  .phone{height:auto;min-height:200px}
}
.print-only{display:none}