/* 足弓与脊柱 AI 测量系统 —— 深色阅片界面 */
:root{
  --bg:#0d1117; --bg2:#141b24; --card:#182029; --line:#2a3441;
  --fg:#e6edf3; --muted:#8b98a5; --accent:#2f81f7; --accent2:#00c2a8;
  --warn:#e3b341; --bad:#f85149; --ok:#3fb950;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg); font:14px/1.5 "Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
header{
  display:flex; align-items:center; gap:18px; padding:10px 16px;
  background:var(--bg2); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{font-size:16px; font-weight:700; letter-spacing:.5px}
.brand .ver{font-size:11px; color:var(--muted); font-weight:400; margin-left:6px}
.tabs{display:flex; gap:1px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px}
.tab{
  background:transparent; color:var(--muted); border:0; padding:7px 18px; border-radius:6px;
  font:inherit; cursor:pointer;
}
.tab.active{background:var(--accent); color:#fff; font-weight:600}
.status{margin-left:auto; font-size:12px; color:var(--muted)}
.status b{color:var(--ok)}

main{flex:1 1 auto; display:flex; min-height:0}
.viewer{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line)}
.tools{
  display:flex; align-items:center; gap:8px; padding:8px 12px; flex-wrap:wrap;
  background:var(--bg2); border-bottom:1px solid var(--line);
}
.tools .sep{width:1px; height:20px; background:var(--line)}
.tools .hint{color:var(--muted); font-size:12px; margin-left:6px}
label.chk{display:flex; align-items:center; gap:6px; color:#c9d4e0; font-size:12px; cursor:pointer; user-select:none}
label.chk input{width:auto; margin:0}
button{
  background:#222c37; color:var(--fg); border:1px solid var(--line); border-radius:7px;
  padding:7px 12px; font:inherit; cursor:pointer; transition:.12s;
}
button:hover{background:#2c3844; border-color:#3d4a58}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.primary:hover{background:#3d90ff}
button.wide{width:100%; margin:4px 0}
button:disabled{opacity:.5; cursor:not-allowed}

.canvas-wrap{position:relative; flex:1 1 auto; min-height:0; background:#05080c}
canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); pointer-events:none;
}
.empty .big{font-size:20px; color:#5b6875}
.empty .small{font-size:13px}

.panel{flex:0 0 380px; overflow-y:auto; background:var(--bg2); padding:12px}
.panel-body.hidden{display:none}
h3{margin:4px 0 12px; font-size:15px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.block{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:11px}
.block-title{font-weight:600; margin-bottom:8px; font-size:13px; color:#c9d4e0}
.row{display:flex; gap:8px}
.row>button{flex:1}
.out{
  margin:8px 0 2px; padding:9px 10px; border-radius:8px; background:#0f1620; border:1px solid var(--line);
  font-size:13px; white-space:pre-wrap; word-break:break-all;
}
.out.muted{color:var(--muted)}
.out.ok{border-color:#1d5c33; background:#0d1c14}
.out.bad{border-color:#6b2320; background:#1c0f0e}
.big-num{font-size:26px; font-weight:700; color:var(--accent2)}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; margin-left:6px}
.tag.ok{background:#12301f; color:var(--ok); border:1px solid #1d5c33}
.tag.bad{background:#2a1414; color:var(--bad); border:1px solid #6b2320}
.tag.warn{background:#2a2413; color:var(--warn); border:1px solid #6b5a20}
.bar{height:9px; border-radius:6px; background:#0f1620; border:1px solid var(--line); overflow:hidden; margin:8px 0 4px}
.bar>i{display:block; height:100%; background:linear-gradient(90deg,#3fb950,#e3b341,#f85149)}
label.inline{display:block; margin:6px 0; color:#c9d4e0}
input[type=number], textarea{
  background:#0f1620; color:var(--fg); border:1px solid var(--line); border-radius:7px;
  padding:6px 8px; font:inherit; width:88px;
}
textarea{width:100%; resize:vertical; margin-top:8px}
.muted{color:var(--muted)}
.small{font-size:12px}
.warnbox{
  background:#20180c; border:1px solid #6b5a20; color:#f0d99a; border-radius:8px;
  padding:8px 10px; font-size:12px; margin-top:8px;
}
.pointlist{font-size:12px; color:#b9c4d0; margin-top:6px}
.pointlist b{color:var(--accent2)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#2a3441; border-radius:6px}

/* ---------- 反馈层：横幅 / 浮层 / 按钮态（v2 新增） ---------- */
.cap-banner{
  position:absolute; left:12px; right:12px; top:12px; z-index:5;
  display:none; padding:10px 14px; border-radius:10px;
  background:rgba(47,129,247,.16); border:1px solid var(--accent); color:#dce9ff;
  font-size:14px; backdrop-filter:blur(3px); pointer-events:none;
}
.cap-banner.show{display:block}
.cap-banner b{color:#fff}
.cap-banner .keys{display:block; margin-top:4px; color:#9db6d6; font-size:12px}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:99;
  max-width:min(760px,88vw); padding:12px 18px; border-radius:10px;
  background:#16202c; border:1px solid var(--accent); color:var(--fg);
  box-shadow:0 10px 28px rgba(0,0,0,.5); font-size:14px;
  opacity:0; pointer-events:none; transition:.18s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.err{background:#2a1414; border-color:var(--bad); color:#ffd9d6}

button.active{
  background:var(--accent) !important; border-color:var(--accent) !important;
  color:#fff !important; font-weight:600;
  box-shadow:0 0 0 3px rgba(47,129,247,.25);
}
@keyframes blinkpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(227,179,65,0); border-color:var(--line)}
  50%{box-shadow:0 0 0 5px rgba(227,179,65,.35); border-color:var(--warn)}
}
button.blink{animation:blinkpulse .8s ease-in-out 3}

/* AI 参考值：方法说明列表 */
.method{margin-top:8px; font-size:12px; color:#b9c4d0; line-height:1.55}
.method.hidden{display:none}
.method ol{margin:6px 0 0 16px; padding:0}
.method li{margin-bottom:4px}
.method b{color:var(--accent2)}
.auto-tag{display:inline-block; padding:1px 6px; border-radius:999px; font-size:11px;
  background:#12314a; color:#7fc4ff; border:1px solid #1d5c8a; margin-left:6px}

/* 报告来源选择按钮 */
.srcbtn{flex:1; padding:7px 6px; font-size:12.5px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--muted-foreground); cursor:pointer}
.srcbtn:hover{border-color:var(--accent)}
.srcbtn.on{background:#12314a; color:#7fc4ff; border-color:#1d5c8a; font-weight:700}
.srcbtn:disabled{opacity:.4; cursor:not-allowed}