/* ============================================================
 * 10-device-pages.css — W3 壳集成：设备三节（功能展示 / 功能菜单 / 功能验收）
 * 统一深色主题层，全部选择器带 .dev-page 前缀（背景层用 body:has(.dev-page)），
 * 与壳内浅色管理模块 / 数据大屏零冲突；keyframes 加 dev 前缀防撞。
 * 来源：原 admin/static/device-{showcase,menu,acceptance}.html 内联样式（原值照抄，
 * 仅选择器前缀化 + 统一响应式修复：grid min() 化、翼线断点 1600px、触屏目标 ≥40px）。
 * ============================================================ */

/* ---------- 背景三层：径向渐变 + 40px 网格 + 四角光斑（对齐 index.html #screen 配方） ---------- */
body:has(.dev-page) { background: radial-gradient(ellipse at 50% -10%, #12294d 0%, #0a1628 55%, #060d1a 100%); }
body:has(.dev-page)::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px) 0 0/40px 100%; }
body:has(.dev-page)::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,229,255,.14), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(124,92,255,.11), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(63,169,245,.11), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(0,229,255,.09), transparent 28%); }

/* ---------- 公共主题层 ---------- */
.dev-page { font-family: "Microsoft YaHei", sans-serif; color: #cfe8ff; min-height: 100vh; padding-bottom: 40px; }
.dev-page .wrap { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 22px 26px; }

.dev-page .hd { position: relative; height: 84px; text-align: center; margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(20,60,110,.5), rgba(20,60,110,0)); }
.dev-page .hd h1 { font-size: 34px; font-weight: 700; letter-spacing: 4px; color: #e8f6ff; padding-top: 16px;
  text-shadow: 0 0 18px rgba(0,229,255,.75), 0 0 46px rgba(0,229,255,.35); }
.dev-page .hd .sub { font-size: 13px; color: #7fb3e8; letter-spacing: 2px; margin-top: 8px; }
.dev-page .hd::before, .dev-page .hd::after { content: ''; position: absolute; top: 26px; height: 2px; width: 300px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.75)); box-shadow: 0 0 10px rgba(0,229,255,.5); }
.dev-page .hd::before { right: calc(50% + 340px); } .dev-page .hd::after { left: calc(50% + 340px); transform: scaleX(-1); }
.dev-page .baseline { position: relative; height: 2px; margin: 12px 0 18px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.9) 50%, transparent);
  box-shadow: 0 0 14px rgba(0,229,255,.55); }
.dev-page .baseline::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: devScan 3s linear infinite; }
@keyframes devScan { from { transform: translateX(-120%); } to { transform: translateX(480%); } }

.dev-page .panel { position: relative; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid rgba(63,169,245,.35); background: rgba(10,30,60,.45);
  box-shadow: inset 0 0 24px rgba(63,169,245,.08), 0 0 12px rgba(63,169,245,.06);
  transition: box-shadow .25s, border-color .25s; }
.dev-page .panel:hover { border-color: rgba(0,229,255,.65);
  box-shadow: inset 0 0 28px rgba(0,229,255,.13), 0 0 20px rgba(0,229,255,.16); }
.dev-page .panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: 10px;
  background:
    linear-gradient(#00e5ff,#00e5ff) left 0 top 0/16px 2px, linear-gradient(#00e5ff,#00e5ff) left 0 top 0/2px 16px,
    linear-gradient(#00e5ff,#00e5ff) right 0 top 0/16px 2px, linear-gradient(#00e5ff,#00e5ff) right 0 top 0/2px 16px,
    linear-gradient(#00e5ff,#00e5ff) left 0 bottom 0/16px 2px, linear-gradient(#00e5ff,#00e5ff) left 0 bottom 0/2px 16px,
    linear-gradient(#00e5ff,#00e5ff) right 0 bottom 0/16px 2px, linear-gradient(#00e5ff,#00e5ff) right 0 bottom 0/2px 16px;
  background-repeat: no-repeat; opacity: .9; filter: drop-shadow(0 0 4px rgba(0,229,255,.8)); }
.dev-page .panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.75), transparent);
  background-size: 32% 100%; background-repeat: no-repeat; animation: devPscan 4.5s linear infinite; }
@keyframes devPscan { from { background-position: -32% 0; } to { background-position: 132% 0; } }
.dev-page .p-title { display: flex; align-items: center; font-size: 19px; font-weight: 700; color: #cfe8ff;
  letter-spacing: 2px; padding: 2px 0 10px 12px; border-left: 4px solid #00e5ff;
  border-bottom: 1px solid rgba(0,229,255,.18); text-shadow: 0 0 10px rgba(0,229,255,.4); margin-bottom: 12px; }
.dev-page .p-title::after { content: ''; margin-left: auto; width: 64px; height: 8px;
  background: radial-gradient(circle, #00e5ff 1.8px, transparent 2.4px) 0 0/16px 8px repeat-x; opacity: .8; }
.dev-page .p-title small { font-size: 12px; color: #7fb3e8; letter-spacing: 1px; margin-left: 10px; font-weight: 400; }

/* 三档状态标签（.dev-page 前缀压过壳内浅色 .tag 胶囊） */
.dev-page .tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; letter-spacing: 1px;
  border: 1px solid transparent; white-space: nowrap; }
.dev-page .t-on  { color: #6ee7b7; border-color: rgba(52,211,153,.55); background: rgba(52,211,153,.10); }
.dev-page .t-sim { color: #00e5ff; border-color: rgba(0,229,255,.5);  background: rgba(0,229,255,.10); }
.dev-page .t-dev { color: #fbbf24; border-color: rgba(251,191,36,.5);  background: rgba(251,191,36,.10); }
.dev-page .sub-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; font-size: 11px; letter-spacing: 1px;
  border: 1px dashed currentColor; color: inherit; vertical-align: 1px; }
.dev-page .sub-p1 { color: #fcd34d; } .dev-page .sub-p2 { color: #fb923c; } .dev-page .sub-cap { color: #a78bfa; }

/* 卡片网格：三页 minmax 各不相同，按节限定 */
.dev-page .grid { display: grid; gap: 12px; }
.dev-page.showcase .grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.dev-page.menu .grid { grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); }
.dev-page.acceptance .grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
.dev-page .item { position: relative; border: 1px solid rgba(63,169,245,.25); border-radius: 8px;
  background: rgba(16,42,80,.5); padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.dev-page .item:hover { border-color: rgba(0,229,255,.65); box-shadow: inset 0 0 20px rgba(0,229,255,.10); }
.dev-page .item h4 { font-size: 15px; color: #e8f6ff; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-page .item p { font-size: 13px; color: #9fc6ef; line-height: 1.6; margin-bottom: 8px; }
.dev-page .item .note { font-size: 12px; color: #7fb3e8; border-top: 1px dashed rgba(63,169,245,.25); padding-top: 7px; line-height: 1.5; }
.dev-page .item .note::before { content: '⚠ '; color: #fbbf24; }
.dev-page.menu .item .note::before { content: '现状 '; color: #fbbf24; }

.dev-page .foot { margin-top: 8px; text-align: center; font-size: 12px; color: #5f7ea3; line-height: 2; }
.dev-page.menu .foot { color: #7fb3e8; margin-top: 26px; letter-spacing: 1px; }

.dev-page .hero { text-align: center; padding: 20px 30px 16px; }
.dev-page.menu .hero { padding: 18px 26px 14px; }
.dev-page .hero .slogan { font-size: 19px; color: #e8f6ff; line-height: 1.9; letter-spacing: 1px; }
.dev-page.menu .hero .slogan { line-height: 2; }
.dev-page .hero .slogan em { font-style: normal; color: #00e5ff; text-shadow: 0 0 12px rgba(0,229,255,.6); }

.dev-page .disclaimer { border: 1px solid rgba(251,191,36,.55); background: rgba(251,191,36,.08);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; color: #fde68a; line-height: 1.8; letter-spacing: 1px; }
.dev-page .disclaimer b { color: #fbbf24; }
.dev-page .cap-item { border-color: rgba(167,139,250,.4); }
.dev-page .cap-item h4 .no { color: #a78bfa; }

/* ---------- 展示页独有（KPI/图表/二级展开/定位横幅/卖点） ---------- */
.dev-page.showcase .item { cursor: pointer; }
.dev-page.showcase .item:focus { outline: 1px solid rgba(0,229,255,.5); outline-offset: 2px; }
.dev-page.showcase .item .arrow { display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
  width: 18px; height: 18px; border: 1px solid rgba(0,229,255,.4); border-radius: 4px;
  font-size: 10px; color: #7fb3e8; transition: transform .2s, border-color .2s, color .2s; }
.dev-page.showcase .item:hover .arrow { border-color: rgba(0,229,255,.8); color: #00e5ff; }
.dev-page.showcase .item.open .arrow { transform: rotate(90deg); color: #00e5ff; }
.dev-page.showcase .item .detail { display: none; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(63,169,245,.25); font-size: 12px; color: #9fc6ef; line-height: 1.7; }
.dev-page.showcase .item.open .detail { display: block; }
.dev-page.showcase .dt { margin-bottom: 5px; }
.dev-page.showcase .dt b { display: inline-block; min-width: 64px; margin-right: 2px; color: #7fd8f0; font-weight: 400; }
.dev-page.showcase .dt b::after { content: '：'; }
.dev-page.showcase .hero .not-gpt { display: inline-block; margin-top: 10px; font-size: 13px; color: #fbbf24; letter-spacing: 2px;
  border: 1px dashed rgba(251,191,36,.5); border-radius: 6px; padding: 4px 14px; }
.dev-page.showcase .offline-note { margin-top: 12px; font-size: 12px; color: #7fb3e8; text-align: left; line-height: 1.8;
  border: 1px solid rgba(63,169,245,.25); border-radius: 6px; padding: 8px 12px; background: rgba(0,40,80,.15); }
.dev-page.showcase .offline-note b { color: #7fd8f0; }
.dev-page.showcase .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.dev-page.showcase .kpi { border: 1px solid rgba(0,229,255,.35); border-radius: 10px; text-align: center; padding: 14px 10px;
  background: linear-gradient(180deg, rgba(0,80,140,.28), rgba(0,40,80,.12));
  box-shadow: inset 0 0 22px rgba(0,229,255,.10), 0 0 14px rgba(0,229,255,.08);
  transition: box-shadow .25s, border-color .25s; }
.dev-page.showcase .kpi:hover { border-color: rgba(0,229,255,.7);
  box-shadow: inset 0 0 26px rgba(0,229,255,.16), 0 0 22px rgba(0,229,255,.18); }
.dev-page.showcase .kpi .num { display: inline-block; transition: transform .25s; }
.dev-page.showcase .kpi:hover .num { transform: scale(1.05); }
.dev-page.showcase .kpi .num { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dev-page.showcase .kpi .lbl { font-size: 13px; color: #9fc6ef; letter-spacing: 1px; margin-top: 4px; }
.dev-page.showcase .kpi.on .num { color: #34d399; text-shadow: 0 0 16px rgba(52,211,153,.7); }
.dev-page.showcase .kpi.sim .num { color: #00e5ff; text-shadow: 0 0 16px rgba(0,229,255,.7); }
.dev-page.showcase .kpi.dev .num { color: #fbbf24; text-shadow: 0 0 16px rgba(251,191,36,.6); }
.dev-page.showcase .kpi.all .num { color: #a78bfa; text-shadow: 0 0 16px rgba(167,139,250,.6); }
.dev-page.showcase .chart-row { display: grid; grid-template-columns: 380px 1fr; gap: 12px; }
.dev-page.showcase #statusChart { width: 100%; height: 260px; }
.dev-page.showcase .legend-box { display: flex; flex-direction: column; justify-content: center; gap: 10px; font-size: 13px; color: #9fc6ef; }
.dev-page.showcase .legend-box .lg { display: flex; align-items: center; gap: 10px; line-height: 1.6; }
.dev-page.showcase .legend-box .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dev-page.showcase .legend-box b { color: #cfe8ff; }
.dev-page.showcase .sell .no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 6px; background: rgba(0,229,255,.15); border: 1px solid rgba(0,229,255,.5);
  color: #00e5ff; font-weight: 700; font-size: 13px; margin-right: 8px;
  box-shadow: 0 0 10px rgba(0,229,255,.35); vertical-align: -1px; }

/* ---------- 菜单页独有（触发方式徽标/操作步骤/示例话术/提醒横幅） ---------- */
.dev-page.menu .trg { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 11px; letter-spacing: 1px;
  margin-right: 6px; border: 1px solid; white-space: nowrap; }
.dev-page.menu .trg-v { color: #00e5ff; border-color: rgba(0,229,255,.5); }
.dev-page.menu .trg-k { color: #fbbf24; border-color: rgba(251,191,36,.5); }
.dev-page.menu .trg-a { color: #6ee7b7; border-color: rgba(52,211,153,.5); }
.dev-page.menu .trg-m { color: #a78bfa; border-color: rgba(167,139,250,.5); }
.dev-page.menu .item h4 .trg-row { margin-left: auto; }
.dev-page.menu .item p { margin-bottom: 6px; line-height: 1.7; }
.dev-page.menu .item .how { font-size: 13px; color: #cfe8ff; margin: 8px 0; }
.dev-page.menu .item .how b { color: #00e5ff; }
.dev-page.menu .item .how ol { margin: 4px 0 4px 22px; }
.dev-page.menu .item .how li { margin: 3px 0; line-height: 1.7; }
.dev-page.menu .item .say { display: block; font-size: 13px; color: #fde68a; background: rgba(251,191,36,.07);
  border-left: 3px solid #fbbf24; border-radius: 4px; padding: 6px 10px; margin: 6px 0; line-height: 1.7; }
.dev-page.menu .hero .warn { display: inline-block; margin-top: 10px; font-size: 13px; color: #fbbf24; letter-spacing: 1px;
  border: 1px dashed rgba(251,191,36,.5); border-radius: 6px; padding: 5px 14px; line-height: 1.8; text-align: left; }
.dev-page.menu .tier-line { font-size: 13px; color: #9fc6ef; line-height: 1.9; }
.dev-page.menu .tier-line b { color: #cfe8ff; }

/* ---------- 验收页独有（进度工具条/勾选框/验收判据/完成态） ---------- */
.dev-page.acceptance .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dev-page.acceptance .toolbar .prog-text { font-size: 15px; color: #e8f6ff; letter-spacing: 1px; white-space: nowrap; }
.dev-page.acceptance .toolbar .prog-text b { color: #00e5ff; font-size: 20px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(0,229,255,.6); }
.dev-page.acceptance .toolbar .grp-cnt { font-size: 12px; color: #7fb3e8; letter-spacing: 1px; }
.dev-page.acceptance .pbar { flex: 1; min-width: 220px; height: 14px; border-radius: 7px; overflow: hidden;
  border: 1px solid rgba(0,229,255,.35); background: rgba(0,40,80,.35); }
.dev-page.acceptance .pbar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #00b4d8, #00e5ff);
  box-shadow: 0 0 10px rgba(0,229,255,.7); transition: width .25s; }
.dev-page.acceptance .toolbar button { padding: 7px 16px; font-size: 13px; letter-spacing: 1px; cursor: pointer;
  color: #cfe8ff; background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.45); border-radius: 4px; }
.dev-page.acceptance .toolbar button:hover { background: rgba(0,229,255,.18); color: #00e5ff; }
.dev-page.acceptance .item h4 { align-items: flex-start; }
.dev-page.acceptance .item h4 .tt { flex: 1; min-width: 140px; }
.dev-page.acceptance .item .crit { font-size: 12.5px; color: #b8d8f0; line-height: 1.6; margin-bottom: 8px;
  border-left: 3px solid rgba(0,229,255,.45); padding-left: 9px; background: rgba(0,229,255,.05); border-radius: 0 4px 4px 0; }
.dev-page.acceptance .item .crit b { color: #00e5ff; font-weight: 600; }
.dev-page.acceptance .item .ck { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; cursor: pointer; accent-color: #00e5ff; }
.dev-page.acceptance .item.done { border-color: rgba(52,211,153,.55); background: rgba(16,58,52,.5);
  box-shadow: inset 0 0 16px rgba(52,211,153,.10); }
.dev-page.acceptance .item.done h4 .tt { color: #6ee7b7; text-decoration: none; }
.dev-page.acceptance .item.done::after { content: '已勾 ✓'; position: absolute; top: 10px; right: 12px; font-size: 11px;
  color: #34d399; letter-spacing: 1px; }
.dev-page.acceptance .calib { border: 1px solid rgba(63,169,245,.25); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: #9fc6ef; line-height: 1.9; background: rgba(0,40,80,.15); }
.dev-page.acceptance .calib b { color: #7fd8f0; }

/* ---------- 统一响应式修复（壳内内容区比独立页窄 200px 侧栏） ---------- */
/* 翼线几何：calc(50%+340px)+300px 宽，壳内溢出阈值 ≈1572px → 断点提到 1600px（规格 ④3/D） */
@media (max-width: 1600px) {
  .dev-page .hd::before, .dev-page .hd::after { display: none; }
}
@media (max-width: 900px) {
  .dev-page .hd { height: auto; padding: 4px 0; }
  .dev-page .hd h1 { font-size: 24px; letter-spacing: 2px; }
  .dev-page.showcase .kpis { grid-template-columns: repeat(2, 1fr); }
  .dev-page.showcase .chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dev-page .wrap { padding: 12px 10px; } /* 汉堡模式下与 #main padding 叠加后收紧 */
}
/* 触屏目标 ≥40px：验收页勾选框与工具条按钮（规格 ③3） */
@media (hover: none) and (pointer: coarse) {
  .dev-page.acceptance .ck { width: 40px; height: 40px; }
  .dev-page.acceptance .toolbar button { min-height: 40px; padding: 8px 16px; }
}