:root{--bg:#f6f3ee;--card:#fff;--ink:#2a2622;--sub:#8a8178;--line:#e4ddd2;--soft:#efe9e0;--brand:#8a6a4f;--brand-d:#6d5038;--warn:#c98a2b;--ok:#3f7d5c;--bad:#c0473a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:14px}
button{font:inherit;color:inherit;touch-action:manipulation}a,label,summary,input,select,textarea{touch-action:manipulation}
.top{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.top h1{font-size:18px;margin:0;flex:1}.top h1 .ver{font-size:11px;font-weight:400;color:var(--sub);margin-left:4px}
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--bad)}
.wrap{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:16px 20px;max-width:1440px;margin:0 auto}
.side,.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.side h3{margin:0 0 8px;font-size:14px}.side input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-bottom:8px}
.rec{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 6px;border-bottom:1px solid var(--soft);cursor:pointer;border-radius:6px}
.rec:hover,.rec.on{background:var(--soft)}.rec small{display:block;color:var(--sub);font-size:12px}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--sub)}
.fields input,.fields textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;color:var(--ink);background:#fff}
.fields .full{grid-column:1/-1}
.card+.card{margin-top:14px}.card h2{font-size:15px;margin:0 0 10px}
.sub{color:var(--sub);font-size:13px}
.empty{color:var(--sub);font-size:13px;padding:10px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:99px;z-index:50}
/* 體態圖（跟見美系統同一套） */
.seg2{display:inline-flex;gap:6px}
.seg2 button{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:13px;cursor:pointer}
.seg2 button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pav{margin-bottom:10px}.pav b{background:var(--warn);color:#fff;border-radius:99px;padding:0 6px;font-size:11px;margin-left:2px}
.pawrap{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;align-items:start}
.pafig{position:relative;background:#fbfaf7;border:1px solid var(--soft);border-radius:12px;padding:10px 16px;display:flex;justify-content:center;--ph:min(66vh,600px)}
.pimg{position:relative;height:var(--ph);flex:none;align-self:center}.pimg img{width:100%;height:100%;display:block;user-select:none;pointer-events:none}
.palr{position:absolute;top:4px;font-size:11px;color:var(--sub)}.palr.l{left:-6px}.palr.r{right:-6px}
.pah{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:#cdbfae;box-shadow:0 0 0 1px #b9aa96;cursor:pointer;padding:0;opacity:.85;z-index:2}
.pah span{display:none;position:absolute;left:50%;top:-22px;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;background:var(--ink);color:#fff;padding:1px 7px;border-radius:6px}
.pah.on span{display:block}.pah.on{opacity:1}@media (hover:hover){.pah:hover span{display:block}.pah:hover{opacity:1}}
.pah.has{background:#d9a873;box-shadow:0 0 0 1px #b07a3e}.pah.on{background:var(--ink)}
.pimg .pasvg{position:absolute;top:0;height:100%;overflow:visible;pointer-events:none;z-index:3}
.pasvg .padrag{pointer-events:auto;cursor:grab;touch-action:none;stroke:#fff;stroke-width:2}
.papan{min-width:0}
.papt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}.papt b{font-size:16px}.papt small{color:var(--sub);flex:1}
.lnk{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer}
.pao{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--soft);font-size:14px}.pao>span{flex:1;min-width:0}
.pab,.pat{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer;min-width:52px}
.pab.lv1{background:#fbf3e3;border-color:#e8cf9c}.pab.lv2{background:#f7e3cf;border-color:#d9a873}.pab.lv3{background:#f3d3cf;border-color:#c97d72;font-weight:600}
.pat{min-width:0;color:var(--sub)}.pat.t{background:#e6eef4;border-color:#a9c0d3;color:#2f5470}
.trv{font-style:normal;font-size:12.5px;padding:3px 9px;border-radius:99px;background:#f5f2ec}
.trv.lv1{background:#fbf3e3}.trv.lv2{background:#f7e3cf}.trv.lv3{background:#f3d3cf}.trv b{font-weight:600;margin-left:2px}
.pasum{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}.pasum h6{width:100%;margin:0;font-size:12.5px;color:var(--sub);font-weight:500}.pasum .trv{cursor:pointer}
.pasum.diff{flex-direction:column;gap:3px;font-size:13px;background:#fff6e6;border-radius:10px;padding:10px 12px}
.sec2{font-weight:700;font-size:14px;margin:18px 0 6px;padding-top:10px;border-top:1px solid var(--soft);color:var(--brand-d)}.sec2 small{font-weight:400;color:var(--sub);margin-left:6px}
details.musg{border-bottom:1px solid var(--soft)}details.musg summary{padding:9px 2px;font-size:14px;cursor:pointer}details.musg summary b{background:var(--soft);border-radius:99px;padding:0 7px;font-size:12px;margin-left:4px}
details.musg .pao{padding-left:10px}
.palg{display:flex;gap:6px;margin:6px 0 8px}
.palg button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 12px;font-size:13px;cursor:pointer;color:var(--sub)}
.palg button i{width:18px;border-top:3px solid;display:inline-block}.palg button.on{color:var(--ink);border-color:var(--ink)}.palg button:not(.on) i{opacity:.3}
.pafigs{display:flex;gap:28px;justify-content:center;margin-top:8px;--ph:440px;background:#fbfaf7;border:1px solid var(--soft);border-radius:12px;padding:12px 8px;overflow-x:auto}
.pafv{display:flex;flex-direction:column;align-items:center;gap:4px}.pafv small{color:var(--sub);font-size:12px}.pafv .pimg{height:var(--ph)}
.rep h3{font-size:14px;margin:14px 0 6px}.rep .trvs{display:flex;flex-wrap:wrap;gap:5px}
.cmp{margin-top:10px}.cmp summary{cursor:pointer;color:var(--brand-d);font-size:13px}
/* 實務／培訓切換 */
.seg2.mode button{height:32px}
/* 動作測試 */
.tneed{display:flex;flex-wrap:wrap;gap:6px;background:#fff6e6;border-radius:10px;padding:10px 12px;margin-bottom:10px}.tneed h6{width:100%;margin:0;font-size:12.5px;color:var(--sub);font-weight:500}.tneed small{color:var(--sub)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.tcard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}.tcard.sug{border-color:#d9a873;box-shadow:0 0 0 2px #f7e3cf}
.thd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.thd b{font-size:14.5px}.thd .std{color:var(--sub);font-size:12px}
.tag{font-style:normal;font-size:11px;background:#d9a873;color:#fff;border-radius:99px;padding:1px 7px}
.tst{margin-left:auto;font-size:12px;border-radius:99px;padding:2px 9px;background:var(--soft);color:var(--sub)}.tst.p{background:#e3f0e8;color:var(--ok)}.tst.f{background:#f6dcd8;color:var(--bad);font-weight:600}
.how{display:block;color:var(--sub);font-size:12px;margin:4px 0 6px;line-height:1.5}.how .ref{color:var(--brand-d)}
.tbtns{display:flex;gap:6px;margin-bottom:2px}.lnk.ok{color:var(--ok);border-color:#b7d3c2}
.pab.bad{background:#f3d3cf;border-color:#c97d72;font-weight:600}
.pab.p{background:#e3f0e8;border-color:#b7d3c2;color:var(--ok)}.pab.f{background:#f3d3cf;border-color:#c97d72;color:var(--bad);font-weight:600}
.pab.ro{cursor:default;display:inline-block}.pab.sm{min-width:0;padding:3px 8px;font-size:12px}
.tsides{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.tin{display:inline-flex;align-items:center;gap:5px;font-size:13px}.tin input{width:72px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}.tin em{font-style:normal;color:var(--sub);font-size:12px}
.tx{font-style:normal;font-size:12px;min-width:3em}.tx.p{color:var(--ok)}.tx.f{color:var(--bad);font-weight:600}
details.tmore{margin-top:12px}details.tmore>summary{cursor:pointer;color:var(--brand-d);font-size:13.5px;padding:6px 0;margin-bottom:6px}
/* 報告：測試 */
.tcf{display:flex;flex-direction:column;gap:6px}.cf{background:#fbf3f1;border-left:3px solid var(--bad);border-radius:6px;padding:6px 10px}.cf b{margin-right:6px}
.cf .m{font-size:11.5px;color:var(--brand-d)}.cf .m.n{color:var(--bad)}.cf .sub{font-size:12.5px;margin-top:2px}
.trv.ok{background:#e3f0e8;color:var(--ok)}
.ttab{border-collapse:collapse;font-size:13px;width:100%}.ttab td{padding:4px 8px;border-bottom:1px solid var(--soft)}.ttab td:first-child{width:38%;color:var(--sub)}.ttab tr.bad td:last-child{color:var(--bad);font-weight:600}
.cmpt{margin:8px 0;line-height:1.7}.cmpt .up{color:var(--ok)}
.rep h3 small{font-weight:400}
/* v3 雲端版 */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:380px;text-align:center;padding:28px 26px}.login.wide{max-width:520px}.login h1{font-size:20px;margin:6px 0 16px}
.lgicon{width:72px;height:72px;border-radius:18px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.login form{display:flex;flex-direction:column;gap:8px}.login input,.login select,.modal input,.modal select,.modal textarea,#rvw{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;background:#fff;color:var(--ink);width:100%}
.login .row,.modal .row{flex-direction:row;display:flex;gap:8px}.row input{flex:1}.row select{width:auto}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;font-weight:600}
.or{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:12px;margin:14px 0 10px}.or:before,.or:after{content:"";flex:1;border-top:1px solid var(--line)}
.lnks{margin:12px 0 4px}.lnks a,.tiny a{color:var(--brand-d)}.tiny{font-size:11.5px;line-height:1.6;margin-top:14px}
.msg{background:#fbecea;color:var(--bad);border-radius:8px;padding:8px 10px;font-size:13px}
.login hr{border:0;border-top:1px solid var(--line);margin:18px 0 10px}
.btn.sel{padding:7px 10px;max-width:240px}
details.more{position:relative}details.more>summary{list-style:none}details.more>summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:190px;padding:6px;z-index:30;display:flex;flex-direction:column}
details.more .menu>*{display:block;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px}details.more .menu>*:hover{background:var(--soft)}.menu .danger{color:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(40,34,28,.35);z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.mbox{background:#fff;border-radius:16px;padding:20px 22px;width:100%;max-width:640px;position:relative}.mbox h2{font-size:17px;margin:0 0 10px;padding-right:30px}.mbox h3{font-size:14px;margin:18px 0 8px;color:var(--brand-d)}
.mx{position:absolute;right:14px;top:12px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--sub)}
.orow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--soft);font-size:14px}.orow .lnk{margin-left:6px}.lnk.danger{color:var(--bad)}
.code{font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;font-size:15px}
.chk{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:13px;color:var(--ink)!important}.chk input{width:auto!important}
.note{background:#fff6e6;border-radius:8px;padding:7px 10px;font-size:13px;margin:0 0 10px}
.edit.ro .fields,.edit.ro #paW,.edit.ro #tsW{opacity:.75}
.review{background:#eef4ee;border-left:3px solid var(--ok);border-radius:6px;padding:8px 12px}
.ttab.adm td{vertical-align:middle}.ttab.adm td:first-child{width:auto}
.shv{max-width:1100px;margin:0 auto}.shv .card{margin:16px}
/* v3.1 分頁 */
.tabs{display:flex;gap:4px;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:2px -4px -6px;padding:0 4px}.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;border:0;background:none;padding:9px 14px;border-bottom:3px solid transparent;font-size:14px;color:var(--sub);cursor:pointer;white-space:nowrap}
.tab.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}.tab b{background:var(--soft);color:var(--brand-d);border-radius:99px;padding:0 6px;font-size:11px;margin-left:4px}
.tab.only-n{display:none}.menu .mo{display:none!important}
.wrap:not([data-tab=info]) .edit .fields,.wrap:not([data-tab=info]) .edit .note{display:none}
.wrap:not([data-tab=pa]) .posw{display:none}
.wrap:not([data-tab=mus]) .musw{display:none}.musw .sec2{margin-top:0;border-top:0;padding-top:0}
.wrap:not([data-tab=test]) #tsW{display:none}#tsW .sec2{margin-top:0;border-top:0;padding-top:0}
.wrap:not([data-tab=rep]) .repc{display:none}.wrap[data-tab=rep] .edit{display:none}
.stepnav{display:flex;justify-content:space-between;gap:10px;margin:14px 0 30px}.stepnav .btn{padding:11px 18px}
@media (max-width:860px){
  .tab{flex:1 1 0;padding:9px 2px;font-size:13.5px}.tab b{margin-left:2px;padding:0 5px}.tab.only-n{display:block}.top .sec{display:none}.menu .mo{display:block!important}.top h1 .ver{display:none}.top h1{flex:0 0 auto}.top .btn.sel{flex:1;max-width:none}
  .wrap:not([data-tab=list])>aside.side{display:none}.wrap[data-tab=list]>main{display:none}
  .top{padding:8px 12px 0;gap:6px}.top h1{font-size:16px;flex:1 1 auto}.top .btn{padding:7px 10px;font-size:13px}.top .seg2.mode button{height:30px;padding:0 10px}
  .btn.sel{max-width:150px}.wrap{padding:10px 10px}.card{padding:12px}
}
.prt{display:none}
@media (max-width:860px){.tgrid{grid-template-columns:1fr}.wrap{grid-template-columns:1fr}.fields{grid-template-columns:1fr 1fr}.pawrap{grid-template-columns:1fr}.pafig{--ph:52vh}.pafigs{--ph:300px;justify-content:flex-start;gap:10px}}
@media print{
  .tabs,.stepnav{display:none!important}.wrap .repc{display:block!important}
  .modal,.more{display:none!important}.shv .top{display:none}
  .cf,.tcf,.ttab{page-break-inside:avoid}
  .top,.side,.edit,.palg,.noprint{display:none!important}.wrap{display:block;padding:0}.card{border:0;padding:0}
  body{background:#fff}.prt{display:block}.pafigs{--ph:520px;border:0;background:none;page-break-inside:avoid}
}
