/* ============================================================
   静态方案展示 · 附加样式（仅静态版加载）
   ============================================================ */

/* 右上角醒目静态标识 */
.static-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,61,113,.28), rgba(255,171,0,.28));
  border: 1.5px solid #ff3d71;
  box-shadow: 0 0 16px rgba(255,61,113,.35);
  padding: 7px 14px; border-radius: 999px;
  cursor: help; white-space: nowrap;
}
.static-badge i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3d71; box-shadow: 0 0 8px #ff3d71;
  animation: staticPulse 1.4s ease-in-out infinite;
}
@keyframes staticPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

/* 导航下的醒目提示条 */
.static-strip {
  background: linear-gradient(90deg, rgba(255,61,113,.16), rgba(255,171,0,.14));
  border-bottom: 1px solid rgba(255,171,0,.35);
  color: #ffe0e6;
  font-size: 13.5px; line-height: 1.7;
  padding: 10px 24px; text-align: center;
}
.static-strip b { color: #fff; }

/* 静态版不显示 DEMO 角标（由静态徽标替代） */
.demo-badge { display: none !important; }

/* 被禁用点击的元素：短暂红框反馈 */
@keyframes blockFlash {
  0% { box-shadow: 0 0 0 2px rgba(255,61,113,.9); }
  100% { box-shadow: 0 0 0 2px rgba(255,61,113,0); }
}
.blocked-flash { animation: blockFlash .45s ease-out; }

/* 静态版页脚补充说明 */
.app-footer { font-size: 12.5px; }

/* ============ 演示导览（仅静态展示版） ============ */
#demoTourBtn{
  position:fixed;right:24px;bottom:24px;z-index:9000;
  display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:linear-gradient(100deg,#0b2030,#0a1724);color:#bff3ff;
  border:1px solid rgba(54,224,255,.45);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 24px rgba(54,224,255,.12);
  font:600 13.5px/1 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;transition:.2s;
}
#demoTourBtn:hover{transform:translateY(-2px);border-color:rgba(54,224,255,.8);box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 30px rgba(54,224,255,.2)}
#demoTourBtn.active{background:linear-gradient(100deg,#0f3346,#0b2233);color:#fff}
#demoTourBtn .dt-spark{color:#36e0ff;font-size:15px;text-shadow:0 0 12px rgba(54,224,255,.8)}
#demoTour{
  position:fixed;right:24px;bottom:88px;z-index:9001;width:392px;max-width:calc(100vw - 32px);
  max-height:56vh;overflow:auto;display:none;
  background:linear-gradient(180deg,rgba(13,22,40,.98),rgba(8,14,26,.98));
  border:1px solid rgba(148,170,210,.22);border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  color:#e9eefb;backdrop-filter:blur(14px);
}
#demoTour.open{display:block;animation:dtIn .22s ease-out}
@keyframes dtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 12px;border-bottom:1px solid rgba(148,170,210,.12)}
.dt-head b{display:block;font-size:15.5px;letter-spacing:.02em}
.dt-head span{display:block;margin-top:5px;font-size:11.5px;color:#8fa2c3;line-height:1.6}
.dt-x{border:none;background:transparent;color:#8fa2c3;font-size:15px;cursor:pointer;padding:2px 6px;border-radius:6px}
.dt-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.dt-list{padding:6px 8px 2px}
.dt-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;transition:.18s}
.dt-item:hover{background:rgba(54,224,255,.055)}
.dt-no{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:700 10.5px Consolas,monospace;color:#7fe9ff;background:rgba(54,224,255,.09);border:1px solid rgba(54,224,255,.22);margin-top:2px}
.dt-body{flex:1;min-width:0}
.dt-body b{display:block;font-size:13.5px;margin-bottom:3px}
.dt-body p{font-size:11.5px;color:#8fa2c3;line-height:1.65}
.dt-act{flex:none;align-self:center;border:1px solid rgba(54,224,255,.35);background:rgba(54,224,255,.08);color:#9beeff;font:600 11.5px/1 inherit;padding:7px 11px;border-radius:8px;cursor:pointer;transition:.18s}
.dt-act:hover{background:rgba(54,224,255,.16);border-color:rgba(54,224,255,.6);color:#fff}
.dt-act.wide{display:block;width:100%;margin-top:8px;padding:10px;font-size:12.5px}
.dt-foot{position:sticky;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px 14px;border-top:1px solid rgba(148,170,210,.12);margin-top:6px;background:linear-gradient(180deg,rgba(10,17,32,.88),rgba(8,14,26,.99));backdrop-filter:blur(8px)}
.dt-foot span{font-size:10.5px;color:#66769a}
.dt-auto{border:1px solid rgba(148,170,210,.28);background:rgba(255,255,255,.03);color:#c7d4ea;font:600 11.5px/1 inherit;padding:8px 12px;border-radius:8px;cursor:pointer}
.dt-auto:hover{border-color:rgba(54,224,255,.5);color:#fff}
.dt-auto.on{background:rgba(255,93,126,.12);border-color:rgba(255,93,126,.45);color:#ffb0c2}
.dt-empty{padding:14px 18px 20px}
.dt-empty p{font-size:12px;color:#8fa2c3;margin-bottom:4px}
@media (max-width:560px){
  #demoTourBtn{right:14px;bottom:14px;padding:10px 15px;font-size:12.5px}
  #demoTour{right:0;left:0;bottom:0;width:auto;max-width:none;max-height:78vh;border-radius:16px 16px 0 0}
}