/* ============================================================
   界面示意图组件 · 纯 CSS/SVG 绘制，无外链图片、无额外请求
   由 assets/shares-render.js 按声明式 blocks 生成结构
   列表页 shares.html 与详情页 share.html 共用
   ============================================================ */
.shot{
  margin:-28px -28px 20px;border:0;border-bottom:1px solid var(--line2);
  border-radius:0;overflow:hidden;background:var(--paper2);
}
.shot-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line2)}
.shot-bar i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line)}
.shot-bar i:nth-child(1){background:#ff5f57}
.shot-bar i:nth-child(2){background:#febc2e}
.shot-bar i:nth-child(3){background:#28c840}
.shot-bar span{margin-left:7px;font-size:10.5px;font-weight:650;color:var(--mut);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-body{height:136px;padding:12px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(180deg,#fff,var(--paper2))}

/* KPI 小块 */
.sh-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:none}
.sh-kpis.k2{grid-template-columns:repeat(2,1fr)}
.sh-kpi{background:#fff;border:1px solid var(--line2);border-radius:7px;padding:6px 8px;min-width:0}
.sh-kpi b{display:block;font-size:12.5px;font-weight:800;color:var(--tx);letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-kpi span{display:block;font-size:8.5px;color:var(--mut2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-kpi.acc b{color:var(--acc)}

/* 柱状 */
.sh-bars{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:40px}
.sh-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--acc);opacity:.24}
.sh-bars i.on{opacity:1}

/* 环形 + 图例 */
.sh-split{display:flex;align-items:center;gap:12px;flex:1;min-height:0}
.sh-ring{
  width:56px;height:56px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--acc) var(--p,68%),var(--line2) 0);
}
.sh-ring::after{
  content:attr(data-v);position:absolute;inset:7px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--tx);
}
.sh-legend{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.sh-lg{display:flex;align-items:center;gap:6px;font-size:8.5px;color:var(--mut);line-height:1.3;min-width:0}
.sh-lg i{width:5px;height:5px;border-radius:2px;background:var(--acc);flex:none}
.sh-lg i.dim{opacity:.32}
.sh-lg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 进度条 */
.sh-progs{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center;min-height:0}
.sh-prog{display:flex;align-items:center;gap:7px}
.sh-prog span{font-size:9px;color:var(--mut);width:46px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-prog u{flex:1;height:6px;border-radius:4px;background:var(--line2);position:relative;text-decoration:none;overflow:hidden}
.sh-prog u::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,50%);border-radius:4px;background:var(--acc)}
.sh-prog b{font-size:9px;font-weight:700;color:var(--tx2);width:28px;text-align:right;flex:none}

/* 看板列 */
.sh-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1;min-height:0}
.sh-col{background:#fff;border:1px solid var(--line2);border-radius:7px;padding:6px;display:flex;flex-direction:column;gap:4px}
.sh-col em{font-style:normal;font-size:8px;font-weight:700;color:var(--mut2);letter-spacing:.02em}
.sh-col u{height:13px;border-radius:4px;background:var(--paper);text-decoration:none;display:block;flex:none}
.sh-col u.a{background:var(--accbg);box-shadow:inset 2px 0 0 var(--acc)}

/* 列表行 */
.sh-rows{display:flex;flex-direction:column;gap:6px;flex:none}
.sh-row{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line2);border-radius:6px;padding:6px 8px}
.sh-row em{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;font-style:normal}
.sh-row u{flex:1;height:5px;border-radius:3px;background:var(--line2);text-decoration:none}
.sh-row u.s{flex:0 0 52%}
.sh-row b{font-size:8.5px;font-weight:700;color:var(--acc);background:var(--accbg);padding:2px 6px;border-radius:99px;flex:none;line-height:1.4}

/* 打卡点阵：28 点严格两行 14 列 */
.sh-dots{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-height:0;align-content:center}
.sh-dots i{flex:0 0 calc((100% - 13 * 3px) / 14);aspect-ratio:1;border-radius:2px;background:var(--line2)}
.sh-dots i.a{background:var(--acc)}
.sh-dots i.b{background:var(--acc);opacity:.42}

/* 模板宫格 */
.sh-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;flex:1;min-height:0;align-content:center}
.sh-tiles i{aspect-ratio:1;border-radius:5px;background:#fff;border:1px solid var(--line2)}
.sh-tiles i.a{background:var(--accbg);border-color:transparent}

/* 折线 */
.sh-spark{display:block;width:100%;flex:1;min-height:0}

/* 暗色界面变体 */
.shot.dk .shot-bar{background:var(--ink2);border-bottom-color:rgba(255,255,255,.09)}
.shot.dk .shot-bar i{background:rgba(255,255,255,.2)}
.shot.dk .shot-bar i:nth-child(1){background:#ff5f57}
.shot.dk .shot-bar i:nth-child(2){background:#febc2e}
.shot.dk .shot-bar i:nth-child(3){background:#28c840}
.shot.dk .shot-bar span{color:var(--onink3)}
.shot.dk .shot-body{background:linear-gradient(180deg,var(--ink2),var(--ink))}
.shot.dk .sh-kpi{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.shot.dk .sh-kpi b{color:#fff}
.shot.dk .sh-kpi span{color:var(--onink3)}
.shot.dk .sh-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.shot.dk .sh-row u{background:rgba(255,255,255,.14)}
.shot.dk .sh-prog u{background:rgba(255,255,255,.14)}
.shot.dk .sh-prog span,.shot.dk .sh-prog b{color:var(--onink2)}
.shot.dk .sh-ring::after{background:var(--ink2);color:#fff}
.shot.dk .sh-col{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.shot.dk .sh-col u{background:rgba(255,255,255,.1)}
.shot.dk .sh-tiles i{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.shot.dk .sh-dots i{background:rgba(255,255,255,.14)}

/* ============ 详情页大图变体 ============ */
.shot.shot-lg{
  margin:0;border:1px solid var(--line2);border-radius:var(--r-l);
  box-shadow:0 14px 40px rgba(15,23,42,.08);
}
.shot.shot-lg .shot-bar{padding:11px 16px;gap:6px}
.shot.shot-lg .shot-bar i{width:9px;height:9px}
.shot.shot-lg .shot-bar span{font-size:12.5px;margin-left:9px}
.shot.shot-lg .shot-body{height:248px;padding:20px;gap:14px}
.shot.shot-lg .sh-kpis{gap:12px}
.shot.shot-lg .sh-kpi{padding:11px 14px;border-radius:10px}
.shot.shot-lg .sh-kpi b{font-size:21px}
.shot.shot-lg .sh-kpi span{font-size:11.5px;margin-top:4px}
.shot.shot-lg .sh-bars{gap:9px;min-height:70px}
.shot.shot-lg .sh-bars i{border-radius:5px 5px 0 0}
.shot.shot-lg .sh-ring{width:104px;height:104px}
.shot.shot-lg .sh-ring::after{inset:13px;font-size:19px}
.shot.shot-lg .sh-split{gap:22px}
.shot.shot-lg .sh-legend{gap:11px}
.shot.shot-lg .sh-lg{font-size:13px;gap:9px}
.shot.shot-lg .sh-lg i{width:8px;height:8px;border-radius:3px}
.shot.shot-lg .sh-progs{gap:15px}
.shot.shot-lg .sh-prog{gap:12px}
.shot.shot-lg .sh-prog span{font-size:12.5px;width:76px}
.shot.shot-lg .sh-prog u{height:9px}
.shot.shot-lg .sh-prog b{font-size:12.5px;width:40px}
.shot.shot-lg .sh-kan{gap:12px}
.shot.shot-lg .sh-col{padding:11px;gap:7px;border-radius:10px}
.shot.shot-lg .sh-col em{font-size:11px}
.shot.shot-lg .sh-col u{height:22px;border-radius:6px}
.shot.shot-lg .sh-rows{gap:10px}
.shot.shot-lg .sh-row{padding:11px 14px;gap:11px;border-radius:9px}
.shot.shot-lg .sh-row em{width:9px;height:9px}
.shot.shot-lg .sh-row u{height:8px}
.shot.shot-lg .sh-row b{font-size:12px;padding:4px 11px}
.shot.shot-lg .sh-dots{gap:6px}
.shot.shot-lg .sh-dots i{flex:0 0 calc((100% - 13 * 6px) / 14);border-radius:4px}
.shot.shot-lg .sh-tiles{gap:11px}
.shot.shot-lg .sh-tiles i{border-radius:9px}

@media(max-width:720px){
  .shot.shot-lg .shot-body{height:210px;padding:15px;gap:11px}
  .shot.shot-lg .sh-kpi b{font-size:17px}
  .shot.shot-lg .sh-ring{width:86px;height:86px}
  .shot.shot-lg .sh-ring::after{inset:11px;font-size:16px}
}