:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e6ebf2;
  --blue: #2563eb;
  --blue-soft: #e9f0ff;
  --green-soft: #ecfdf3;
  --red-soft: #fff1f2;
  --amber-soft:#fff7e6;
  --purple-soft:#f4f1ff;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(15, 23, 42, .06);
  font-synthesis: style;
}

*{box-sizing: border-box;}
body{
  margin:0;
  font-family: "Noto Sans SC", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ========== Sidebar ========== */
.sidebar{
  width:260px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:18px 14px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.brand-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 6px;
}
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--blue);
  margin-top:2px;
}
.brand h2{
  font-size:20px;margin:0;font-weight:800;letter-spacing:.2px;
}
.brand p{
  margin:2px 0 0;color:var(--muted);font-size:12px;
}

.nav{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.nav-btn{
  appearance:none;border:1px solid transparent;background:transparent;
  padding:10px 12px;border-radius:12px;
  display:flex;align-items:center;gap:10px;
  font-size:15px;color:#1f2937;cursor:pointer;
  transition:.18s ease;
}
.nav-btn:hover{
  background:#f2f5fb;border-color:var(--line);
}
.nav-btn.active{
  background:var(--blue);
  color:#fff;border-color:var(--blue);
  box-shadow:0 6px 14px rgba(37,99,235,.25);
}
.nav-ico{font-size:18px;line-height:1;}

.sidebar-foot{
  margin-top:auto;padding:8px 6px 2px;
}
.mini-tip{
  background:#f4f7ff;border:1px dashed #c8d6ff;
  padding:10px;border-radius:12px;font-size:12px;color:#334155;
}

/* ========== Content ========== */
.content{
  flex:1;
  padding:26px 28px 48px;
  max-width:1200px;
}

.tab-content{display:none;}
.tab-content.active{display:block;}

.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:16px;
}
.page-head h1{
  margin:0;font-size:28px;font-weight:800;
}
.subtitle{
  margin-top:6px;color:var(--muted);font-size:14px;
}

.pill{
  background:var(--blue-soft);
  color:var(--blue);
  display:inline-block;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;
}

.btn{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;font-size:13px;cursor:pointer;
}
.btn:hover{border-color:#cbd5e1;}

/* ========== Cards / blocks ========== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}
.card.soft{
  background:#f8fafc;
  border-style:dashed;
  box-shadow:none;
}

.body-text{font-size:14px;line-height:1.7;color:#0f172a;}
.muted{color:var(--muted);font-size:13px;}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-9999px;}
  .content{padding:18px;}
}

/* list */
.list{padding-left:18px;margin:8px 0;}
.list li{margin:6px 0;}

/* callout */
.callout.amber{
  background:var(--amber-soft);
  border:1px solid #ffd58a;
}
.myth-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.myth-grid h4{margin:0 0 6px;font-size:14px;}
.myth,.reality{
  background:#fff;border:1px solid var(--line);padding:12px;border-radius:10px;
}

/* flow */
.flow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.flow-step{
  background:#eef2ff;border:1px solid #dbe2ff;
  padding:8px 10px;border-radius:10px;font-weight:700;font-size:13px;color:#1e3a8a;
}
.flow-arrow{color:#94a3b8;font-weight:800;}

/* term grid */
.term-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.term{
  background:#f8fafc;border:1px solid var(--line);
  padding:12px;border-radius:10px;
}
.term-title{font-weight:800;color:#0f172a;margin-bottom:4px;}
.term-desc{color:#475569;font-size:13px;line-height:1.6;}

/* dos grid */
.dos-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.do-card,.dont-card{
  background:#fff;border:1px solid var(--line);padding:12px;border-radius:10px;
}
.do-card h4{color:#15803d;margin:0 0 6px;}
.dont-card h4{color:#b91c1c;margin:0 0 6px;}

/* ========== Platform cards ========== */
.platform-stack{display:flex;flex-direction:column;gap:16px;}

.platform-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.platform-hero{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  color:#fff;
}
.platform-hero h2{margin:0;font-size:20px;font-weight:800;}
.hero-sub{opacity:.9;font-size:13px;margin-top:4px;}
.hero-icon{
  width:44px;height:44px;border-radius:999px;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-weight:900;font-size:18px;
}

/* hero background per platform */
.platform-card.facebook .platform-hero{
  background:linear-gradient(135deg,#1877F2,#0f5bd1);
}
.platform-card.x-twitter .platform-hero{
  background:linear-gradient(135deg,#000000,#3b3b3b);
}
.platform-card.reddit .platform-hero{
  background:linear-gradient(135deg,#ff4500,#ff7a3d);
}
.platform-card.quora .platform-hero{
  background:linear-gradient(135deg,#b92b27,#7f1d1d);
}

/* blocks inside platform */
.block{
  padding:14px 18px;
  border-top:1px solid var(--line);
}
.block h3{
  margin:0 0 8px;
  font-size:16px;font-weight:800;
  color:#0f172a;
}
.block.soft{
  background:#f8fafc;
}
.block-green{
  background:var(--green-soft);
  border-top:1px solid #b9f2d0;
}
.block-warn{
  background:var(--red-soft);
  border-top:1px solid #ffc1c7;
}

.block-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  background:#fff;
}
.block-pair .pair{
  border:1px solid var(--line);border-radius:12px;padding:12px;
}
.block-pair .pair.good{background:var(--green-soft);}
.block-pair .pair.bad{background:var(--red-soft);}
.block-pair h3{margin:0 0 6px;}

.block-igaming{
  background:var(--purple-soft);
  border-top:1px solid #d9d2ff;
}

/* ========== Playbook ========== */
.playbook-card .playbook-title{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.playbook-num{
  width:30px;height:30px;border-radius:8px;
  background:var(--blue);color:#fff;font-weight:800;
  display:grid;place-items:center;font-size:14px;
}
.tip-box{
  background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;
  padding:10px;border-radius:10px;margin-top:10px;
}

.diagnose-card{background:#f1f5f9;border-style:dashed;box-shadow:none;}
.compliance-card{background:#eef2ff;border-style:solid;}

/* appendix mini */
.platform-mini{
  border-left:4px solid transparent;
}
.platform-mini.x{border-left-color:#000;}
.platform-mini.reddit{border-left-color:#ff4500;}
.platform-mini.quora{border-left-color:#b92b27;}
.platform-mini.fb{border-left-color:#1877F2;}
.example-box{
  background:#fff;border:1px dashed var(--line);
  padding:12px;border-radius:10px;
  font-size:13px;line-height:1.7;
}

/* ========== Dashboard ========== */
.dashboard-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.chart-card.full{grid-column:1 / -1;}
.chart-card canvas{width:100%;height:280px;}
.chart-desc{color:var(--muted);font-size:12px;margin-top:8px;}
.radar-wrap{height:360px;}

/* ===== Playbook 诊断 / 排查 两种差异卡片 ===== */

/* 基础诊断卡通用微调（保留你原有 diagnose-card 也没问题） */
.diagnose-card{
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

/* 【怎么验证有没有被拒/限流？】——冷色诊断 */
.limit-card{
  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
  border: 1px solid #dbeafe;
  box-shadow: 0 6px 18px rgba(59,130,246,0.08);
}
.limit-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, #3b82f6 0%, #6366f1 100%);
}
.limit-card h3{
  color:#1d4ed8;
}

/* 【没信号怎么排查】——暖色排查 */
.troubleshoot-card{
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border: 1px solid #fed7aa;
  box-shadow: 0 6px 18px rgba(249,115,22,0.10);
}
.troubleshoot-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, #f97316 0%, #ef4444 100%);
}
.troubleshoot-card h3{
  color:#c2410c;
}