/* 與門市系統同一套設計變數（assets/css/app.css 的 :root），
   這樣「AI 圖紙助理」看起來就是同一個系統，不是外掛。 */
:root{
  --bg:#f1f4f2; --panel:#fff; --line:#e3e9e5; --line-2:#edf1ee;
  --text:#16211c; --text-2:#51655c; --text-3:#7c8e85;
  --brand:#1f5f4d; --brand-2:#2c7f66; --brand-soft:#e8f3ef;
  --warn:#b7791f; --warn-soft:#fdf3e2; --danger:#c0392b; --danger-soft:#fdeceb;
  --ok:#1f7a4d; --ok-soft:#e9f6ef;
  --radius:12px; --shadow:0 1px 2px rgba(16,32,26,.05),0 3px 10px rgba(16,32,26,.06);
  --fs-body:15px; --fs-sm:13px; --fs-xs:12.5px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text); font:var(--fs-body)/1.6
  -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
button{font:inherit}
.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  padding:8px 14px; border-radius:9px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{border-color:#cdd8d2; background:#fbfcfb}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px; font-size:var(--fs-sm)}
.btn.icon{padding:6px 10px; min-width:34px; justify-content:center}
.btn.block{width:100%; justify-content:center}
.btn:disabled{opacity:.5; cursor:not-allowed}
input[type=text],input[type=email],input[type=password],input[type=number]{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  background:#fff; font:inherit; color:var(--text);
}
input:focus{outline:2px solid var(--brand-soft); border-color:var(--brand-2)}

/* ---------- 登入 ---------- */
.login-mask{position:fixed; inset:0; background:linear-gradient(160deg,#eef3f0,#e3ece7); display:grid; place-items:center; z-index:50}
.login-card{width:min(420px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:28px}
.lg-brand{font:600 12px/1 var(--mono); letter-spacing:.16em; color:var(--brand-2); text-transform:uppercase}
.login-card h1{font-size:22px; margin:10px 0 4px}
.lg-sub{color:var(--text-2); font-size:var(--fs-sm); margin:0 0 18px}
.login-card label{display:block; font-size:var(--fs-sm); color:var(--text-2); margin-bottom:12px}
.login-card label input{margin-top:6px}
.lg-err{color:var(--danger); font-size:var(--fs-sm); min-height:20px; margin-bottom:6px}
.lg-note{margin-top:14px; font-size:var(--fs-xs); color:var(--text-3); text-align:center}

/* ---------- 版面 ---------- */
.app{display:flex; flex-direction:column; height:100%}
.top{height:56px; flex:0 0 56px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:relative; z-index:5}
.brand{display:flex; align-items:center; gap:10px; font-size:15px}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.tag-test{font:600 11px/1 var(--mono); letter-spacing:.06em; color:var(--warn);
  background:var(--warn-soft); border-radius:5px; padding:5px 7px}
.top-right{display:flex; align-items:center; gap:10px}
.who{font-size:var(--fs-sm); color:var(--text-2)}

.layout{flex:1; display:grid; grid-template-columns:290px minmax(0,1fr) 320px; gap:0; min-height:0}
@media(max-width:1200px){.layout{grid-template-columns:250px minmax(0,1fr)} .rail{display:none}}
@media(max-width:820px){.layout{grid-template-columns:1fr; grid-auto-rows:auto} .side{order:2} .main{order:1} .rail{display:block; order:3}}

.side{border-right:1px solid var(--line); background:var(--panel); padding:14px; overflow:auto}
.drop{border:1.5px dashed #cbd8d1; border-radius:12px; padding:18px 12px; text-align:center; background:#fafcfb}
.drop.hot{border-color:var(--brand-2); background:var(--brand-soft)}
.drop-ico{font-size:20px; color:var(--brand-2)}
.drop-t{font-weight:600; margin:6px 0 2px}
.drop-s{font-size:var(--fs-xs); color:var(--text-3); margin-bottom:10px}
.limit{font-size:var(--fs-xs); color:var(--text-3); margin:8px 0 14px; text-align:center}
.side-h{font:600 11px/1 var(--mono); letter-spacing:.1em; color:var(--text-3); text-transform:uppercase;
  margin:6px 0 8px; display:flex; justify-content:space-between}
.plans{display:flex; flex-direction:column; gap:6px}
.plan-item{border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; background:#fff}
.plan-item:hover{border-color:#cdd8d2}
.plan-item.on{border-color:var(--brand); background:var(--brand-soft)}
.plan-item .n{font-size:var(--fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plan-item .m{font-size:var(--fs-xs); color:var(--text-3); display:flex; gap:8px; margin-top:2px}
.empty-s{font-size:var(--fs-sm); color:var(--text-3); padding:8px 2px}

.main{display:flex; flex-direction:column; min-width:0; min-height:0}
.toolbar{height:50px; flex:0 0 50px; border-bottom:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; gap:10px; overflow-x:auto}
.tb-l,.tb-r{display:flex; align-items:center; gap:8px}
.plan-name{font-weight:600; font-size:var(--fs-sm); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip{font-size:var(--fs-xs); padding:3px 8px; border-radius:99px; background:var(--line-2); color:var(--text-2)}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.pager{display:flex; align-items:center; gap:4px; font-size:var(--fs-sm)}
.zoomLab{font:var(--fs-xs)/1 var(--mono); color:var(--text-3); min-width:42px; text-align:center}
.vr{width:1px; height:20px; background:var(--line)}

.layers{display:flex; gap:14px; padding:7px 14px; background:var(--panel); border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--text-2); flex-wrap:wrap}
.layers label{display:flex; align-items:center; gap:5px; cursor:pointer}

.stage{position:relative; flex:1; min-height:240px; overflow:hidden; background:
  repeating-conic-gradient(#eef1ef 0% 25%, #f7f9f8 0% 50%) 50%/22px 22px; cursor:grab}
.stage.drag{cursor:grabbing}
.wrap{position:absolute; left:50%; top:50%; transform-origin:center center; will-change:transform}
#pageImg{display:block; max-width:none; box-shadow:0 4px 18px rgba(16,32,26,.14); background:#fff;
  user-select:none; -webkit-user-drag:none}
.ovl{position:absolute; inset:0}
/* --k = 1/目前縮放。整張圖縮到 40% 時，框線與名稱也跟著縮成看不見，
   使用者就「看不到辨識結果」。用 --k 反向補償，讓標記在螢幕上維持固定大小。 */
.ovl .box{position:absolute; border:calc(1.5px * var(--k,1)) solid var(--brand-2); background:rgba(44,127,102,.09); border-radius:calc(2px * var(--k,1))}
.ovl .box.room{border-color:#2c7f66}
.ovl .box.cab{border-color:#b7791f; background:rgba(183,121,31,.10)}
.ovl .box.room.confirm{border-color:var(--ok); background:rgba(31,122,77,.13)}
.ovl .lbl{position:absolute; transform:translateY(-100%);
  font:600 calc(11px * var(--k,1))/1.4 var(--mono);
  background:var(--brand); color:#fff;
  padding:calc(2px * var(--k,1)) calc(5px * var(--k,1));
  border-radius:calc(3px * var(--k,1)); white-space:nowrap}
.stage-empty{position:absolute; inset:0; display:grid; place-items:center; color:var(--text-3); font-size:var(--fs-sm)}
.progress{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; font-size:var(--fs-sm)}
.bar{width:150px; height:6px; background:var(--line-2); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; width:8%; background:var(--brand-2); transition:width .3s}

.results{border-top:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column;
  max-height:42%; min-height:180px}
.tabs{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{background:none; border:none; border-bottom:2px solid transparent; padding:10px 12px; cursor:pointer;
  font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap}
.tab b{font:600 11px/1 var(--mono); background:var(--line-2); padding:2px 5px; border-radius:4px; margin-left:4px}
.tab.on{color:var(--brand); border-bottom-color:var(--brand)}
.tab.on b{background:var(--brand-soft); color:var(--brand)}
.tabbody{overflow:auto; padding:4px 0}

table.rt{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
table.rt th{position:sticky; top:0; background:#fafbfb; text-align:left; font:600 11px/1.6 var(--mono);
  letter-spacing:.06em; color:var(--text-3); text-transform:uppercase; padding:7px 10px; border-bottom:1px solid var(--line)}
table.rt td{padding:7px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.rt tr:hover td{background:#fcfdfc}
table.rt .hid{color:var(--text-3); font-family:var(--mono); font-size:11.5px}
.src{font:600 10.5px/1 var(--mono); padding:4px 6px; border-radius:5px; letter-spacing:.03em}
.src.dim{background:var(--ok-soft); color:var(--ok)}
.src.scale{background:#eef3fb; color:#2f5fa8}
.src.ai{background:var(--warn-soft); color:var(--warn)}
.src.manual{background:#f2eefb; color:#5b3fa8}
.src.drawing{background:var(--ok-soft); color:var(--ok)}
.src.unconfirmed{background:var(--line-2); color:var(--text-3)}
.conf{display:inline-flex; align-items:center; gap:5px; font:11.5px/1 var(--mono); color:var(--text-2)}
.conf i{display:block; width:38px; height:5px; border-radius:99px; background:var(--line-2); overflow:hidden}
.conf i s{display:block; height:100%; background:var(--brand-2)}
.conf.low i s{background:var(--warn)}
.okbtn{border:1px solid var(--line); background:#fff; border-radius:7px; padding:4px 9px; cursor:pointer; font-size:var(--fs-xs)}
.okbtn.on{background:var(--ok-soft); border-color:#bfe0cd; color:var(--ok); font-weight:600}
.inl{width:88px; padding:4px 7px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:var(--fs-sm)}

.rail{border-left:1px solid var(--line); background:var(--panel); padding:14px; overflow:auto}
.rail section{margin-bottom:18px}
.rail h3{font-size:var(--fs-sm); margin:0 0 8px; display:flex; align-items:center; gap:6px; color:var(--text)}
.pill{font:600 10.5px/1 var(--mono); background:var(--line-2); color:var(--text-2); padding:4px 6px; border-radius:99px}
.warns{display:flex; flex-direction:column; gap:6px}
.warn-item{font-size:var(--fs-xs); border-radius:8px; padding:7px 9px; line-height:1.5}
.warn-item.error{background:var(--danger-soft); color:#8d2f24}
.warn-item.warn{background:var(--warn-soft); color:#7a5210}
.warn-item.info{background:var(--line-2); color:var(--text-2)}
.runs{font-size:var(--fs-xs)}
.run{border-bottom:1px solid var(--line-2); padding:7px 0}
.run .r1{display:flex; justify-content:space-between; gap:6px}
.run .m{font-family:var(--mono); color:var(--text-2)}
.run .r2{color:var(--text-3); font-family:var(--mono); font-size:11px; margin-top:2px}
.revs{font-size:var(--fs-xs)}
.rev{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line-2)}
.rev a{color:var(--brand-2); cursor:pointer; text-decoration:none}
.rail-note{font-size:11.5px; color:var(--text-3); margin-top:8px; line-height:1.5}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:#16211c;
  color:#fff; padding:10px 16px; border-radius:10px; font-size:var(--fs-sm); opacity:0; pointer-events:none;
  transition:.22s; z-index:90; max-width:80vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:#8d2f24}