/* ===================================================================
 * 页面专属样式（自原页面 <style> 块抽取，§10.1）
 * 源文件：mgt-sys/standard/index.html
 * 说明：本文件仅承载该页面的版式细节；通用组件请写入 components.css。
 *       V3：骨架统一走 components.css §2.0（.app-top/.app-body/.app-side/.app-main）。
 * =================================================================== */

/* 控制台全屏工作区：顶栏 + 设置条固定，内容栏内部滚动 */
html, body { height: 100%; }
body.app-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ===== 设置条（与顶栏/主体同 1880 轨道） =====
   V3：条带**铺满视口**，内层用 .app-shell 承载 1880 轨道并自带 gutter；
   这样字段区左右缘与顶栏、内容栏严格对齐（旧写法用 max-width:var(--shell)
   + 自身 padding 会与 .app-shell 的 gutter 叠加，导致右缘错位 ~16px）。 */
.setbar {
  background: var(--c-card); border-bottom: 1px solid var(--c-line); flex-shrink: 0;
  display: block;
}
.setbar.collapsed { display: none; }
.setbar > .app-shell {
  display: grid; grid-template-columns: 1.05fr 1.15fr 1.2fr .8fr .75fr 1.15fr;
  gap: var(--sp-2); padding-top: var(--sp-2); padding-bottom: var(--sp-2);
}
.setbar .field > label { font-size: var(--fs-13); }
.bar-btn {
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .38); color: var(--c-card);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-xs); cursor: pointer;
  font-size: var(--fs-14); transition: var(--dur-fast); white-space: nowrap;
}
.bar-btn:hover { background: rgba(255, 255, 255, .34); }
.bar-btn.on { background: var(--c-card); color: var(--c-brand); border-color: var(--c-card); font-weight: 700; }

/* ===== 主体：左侧条款导航 + 内容栏（骨架由 components.css 提供） =====
   V3.3：骨架容器高度由 flex 决定（顶栏 + 切片栏 + 设置条 之外的剩余空间），
   不再写死 100vh - 顶栏高；overflow:hidden 由骨架提供，内部由 .app-main 滚动。 */
.app-body { flex: 1; min-height: 0; height: auto; }
.app-side { padding: var(--sp-1) 0 var(--sp-7); }
.chap{cursor:pointer;user-select:none;}
.chap>.ct{display:flex;align-items:center;gap: var(--sp-1);padding: var(--sp-2) 12px;font-weight:600;font-size:var(--fs-14);
  border-bottom:1px solid var(--c-gray-tint);transition:.15s;}
.chap>.ct:hover{background:var(--c-info-tint);}
.chap .arw{font-size: var(--fs-13);transition:transform .2s;color:var(--muted);}
.chap .arw.open{transform:rotate(90deg);}
.chap .cs{margin-left:auto;font-size:var(--fs-14);color:var(--muted);white-space:nowrap;}
.chap .cs .got{color:var(--ok);font-weight:700;}
.sub{display:none;padding: 8px;}
.sub.on{display:block;}
.ni{padding: 8px var(--sp-2) 8px 16px;cursor:pointer;font-size:var(--fs-14);border-bottom:1px solid var(--c-gray-tint);
  display:flex;justify-content:space-between;gap: var(--sp-2);align-items:center;min-height:34px;transition:.14s;}
.ni:hover{background:var(--c-info-tint);}
.ni.on{background:var(--c-info-tint);border-left:3px solid var(--accent);font-weight:600;}
.ni.grp{font-weight:600;}
.ni .sc{color:var(--muted);font-size:var(--fs-14);white-space:nowrap;}
.ni .sc .g{color:var(--ok);}
.ni .sc .b{color:var(--danger);font-weight:700;}
.ni .nm{flex:1;min-width:0;}
.done-dot{width:6px;height:6px;border-radius: 50%;background:var(--ok);flex-shrink:0;}
.done-dot.na{background:var(--danger);}

/* ===== 「不适用」标记：红色胶囊 ===== */
.na-pill{display:inline-flex;align-items:center;gap: var(--sp-1);background:var(--danger);color:var(--c-card);
  font-size:var(--fs-14);font-weight:700;line-height:1.7;padding: 0 var(--sp-2);border-radius: var(--r-pill);
  letter-spacing:.5px;white-space:nowrap;vertical-align:middle;}
table.spt .na-pill{font-size: var(--fs-13);padding: 0 8px;line-height:1.6;}

/* ===== 内容区（骨架 .app-main 已提供 flex/内边距；此处仅补滚动与卡片） ===== */
.app-main { padding: var(--sp-4); }
.dcard{background:var(--c-card);border-radius: 10px;box-shadow:var(--shadow);padding: var(--sp-4) 20px;margin: var(--sp-3);}
.dcard>h3{font-size: var(--fs-15);color:var(--brand);padding: var(--sp-2);margin: var(--sp-3);
  border-bottom:2px solid var(--brand3);display:flex;align-items:baseline;gap: 8px;flex-wrap:wrap;}
.dcard>h3 .std{margin-left:auto;font-size: var(--fs-14);color:var(--muted);font-weight:400;}
.ibox{background:var(--c-info-tint);border-left:3px solid var(--brand3);border-radius: var(--r-xs);padding: var(--sp-3) var(--sp-3);margin: var(--sp-2);}
.ibox.warn{border-left-color:var(--warn);background:var(--c-warn-tint);}
.ibox.ok{border-left-color:var(--ok);background:var(--c-ok-tint);}
.ibox .lb{font-size:var(--fs-14);font-weight:700;color:var(--muted);margin: var(--sp-1);letter-spacing:.3px;}
.ibox .vl{font-size:var(--fs-14);line-height:1.85;}
.val-line{line-height: var(--lh-body);}
.val-item{padding-left:1.1em;text-indent:-1.1em;margin:0 0 4px;}
.score-row{display:flex;align-items:center;gap: var(--sp-2);flex-wrap:wrap;margin: 12px;}
.score-row input{width:104px;font-size: var(--fs-17);font-weight:700;text-align:center;padding: 8px;color:var(--brand);}
.score-row .mx{font-size:var(--fs-14);color:var(--muted);}
.diff{font-size:var(--fs-14);font-weight:700;padding: 2px var(--sp-2);border-radius: var(--r-pill);}
.diff.ok{background:var(--c-ok-tint);color:var(--ok);}
.diff.bad{background:var(--c-danger-tint);color:var(--danger);}
textarea.rec{width:100%;min-height:96px;font-size:var(--fs-14);line-height:1.7;}
.imgs{margin: 12px;}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap: var(--sp-2);margin: var(--sp-2);}
.thumb{position:relative;padding-top:75%;border-radius: var(--r-xs);overflow:hidden;border:1px solid var(--line);background:var(--c-info-tint);}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:var(--c-card);border:none;
  border-radius: 50%;width:19px;height:19px;font-size:var(--fs-14);cursor:pointer;line-height:1;}
.acts{display:flex;gap: 8px;flex-wrap:wrap;margin: var(--sp-3);padding: var(--sp-3);border-top:1px dashed var(--line);}
.welcome{text-align:center;padding: 64px 20px;color:var(--muted);}
.welcome h2{font-size: var(--fs-20);color:var(--brand);margin: var(--sp-2);}
.welcome .kpi{display:flex;gap: var(--sp-5);justify-content:center;flex-wrap:wrap;margin: 20px 0;}
.welcome .kpi b{display:block;font-size:var(--fs-22);color:var(--brand2);}
.welcome .kpi span{font-size: var(--fs-14);}
.ind-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap: var(--sp-3);max-width:750px;margin:var(--sp-5) auto 0;}
.ind-card{border:1.5px solid var(--line);border-radius: 10px;padding: var(--sp-4) 12px;background:var(--c-card);
  cursor:pointer;transition:.16s;text-align:center;}
.ind-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(15,61,36,.12);}
.ind-card.on{border-color:var(--accent);background:var(--c-warn-tint);}
.ind-card.no{opacity:.6;background:var(--c-gray-tint);cursor:not-allowed;}
.ind-card.no:hover{transform:none;box-shadow:none;}
.ind-card .ic{font-size: var(--fs-26);}
.ind-card .nm{font-weight:600;margin: var(--sp-1) 0 2px;font-size:var(--fs-14);}
.ind-card .st{font-size:var(--fs-14);color:var(--muted);}

/* ===== 汇总面板 ===== */
.sp{position:fixed;top:0;right:0;bottom:0;width:min(1000px,96vw);background:var(--c-card);z-index: var(--z-drawer);
  box-shadow:-6px 0 34px rgba(0,0,0,.2);transform:translateX(102%);transition:transform .3s;
  display:flex;flex-direction:column;}
.sp.on{transform:none;}
.sp-hd{padding: var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap: var(--sp-2);flex-shrink:0;}
.sp-hd h3{font-size: var(--fs-15);color:var(--brand);margin-right:auto;}
.sp-bd{flex:1;overflow-y:auto;padding: 16px var(--sp-4) 40px;}
.sp-meta{background:var(--c-gray-tint);border:1px solid var(--line);border-radius: 8px;padding: var(--sp-3) var(--sp-3);
  font-size:var(--fs-14);line-height:1.95;margin: var(--sp-3);}
.sp-sec{margin: var(--sp-4);}
.sp-sec h4{font-size: var(--fs-14);color:var(--brand);border-bottom:2px solid var(--brand3);
  padding: var(--sp-1);margin: var(--sp-2);}
table.spt{width:100%;border-collapse:collapse;font-size:var(--fs-14);}
table.spt th,table.spt td{border:1px solid var(--c-info);padding: 4px var(--sp-1);text-align:center;vertical-align:middle;}
table.spt th{background:var(--c-gray-tint);font-weight:600;}
table.spt td.l{text-align:left;}
table.spt tr.lv1 td{background:var(--c-info-tint);font-weight:600;}
table.spt tr.sum td{background:var(--c-gray-tint);font-weight:700;}
.nc{border:1px solid var(--c-danger-tint);background:var(--c-danger-tint);border-radius: var(--r-xs);padding: var(--sp-2) var(--sp-3);margin: 8px;font-size:var(--fs-14);}
.nc .t{font-weight:700;color:var(--c-danger);margin: var(--sp-1);}
.nc .d{white-space:pre-wrap;color:var(--c-info);line-height:1.75;}
.mask{position:fixed;inset:0;background:rgba(15,30,45,.4);z-index: var(--z-drawer);display:none;}
.mask.on{display:block;}
.pv{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index: var(--z-drawer);display:none;align-items:center;justify-content:center;padding: 20px;}
.pv.on{display:flex;}
.pv img{max-width:100%;max-height:100%;border-radius: 8px;}

@media(max-width:900px){
  /* V3：网格已移到 .setbar > .app-shell（条带铺满视口、内层承载 1880 轨道），
     故断点需作用在内层；手机端 1 列，避免 6 列挤压导致横向溢出。 */
  .setbar > .app-shell{grid-template-columns:1fr 1fr;gap:8px;}
  .setbar .field.wide{grid-column:1/-1;}
  .app-main{padding: var(--sp-3);}
  .dcard{padding: var(--sp-3);}
}
@media(max-width:560px){
  .setbar > .app-shell{grid-template-columns:1fr;}
}
/* 手机端顶栏紧凑化：统计一行显示，不再占用大面积 */
@media(max-width:900px){
  .vw-top{padding: var(--sp-2) var(--sp-2);gap: var(--sp-2);row-gap: var(--sp-1);}
  .vw-top .vw-title{font-size: var(--fs-14);gap: var(--sp-1);flex-wrap:wrap;}
  .vw-top .vw-stat{gap: var(--sp-2);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .vw-top .vw-stat-i{min-width:0;display:flex;align-items:baseline;gap: var(--sp-1);flex-shrink:0;}
  .vw-top .vw-stat-i b{font-size:var(--fs-14);display:inline;line-height:1.15;}
  .vw-top .vw-stat-i span{font-size: var(--fs-13);white-space:nowrap;}
  .bar-btn{padding: 4px var(--sp-2);font-size:var(--fs-14);flex-shrink:0;}
}