:root{
  --ink:#26302a;--ink-soft:#5f6b62;--line:#e3e8e3;--paper:#f9fbf9;--card:#fff;
  --accent:#4f6b55;--accent-soft:#eef4ef;--accent-dark:#3c5442;--warn:#c2492f;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select{font-family:inherit;color:inherit}
#app{height:100dvh;display:flex;flex-direction:column;max-width:1280px;margin:0 auto}

.top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font-size:19px;letter-spacing:.02em}
.brand span{font-size:13.5px;color:var(--ink-soft)}
.btn-share{border:1.5px solid var(--accent);background:#fff;color:var(--accent);border-radius:999px;padding:7px 16px;font-size:15px;font-weight:700}
.btn-share:active{background:var(--accent-soft)}

.rooms{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 10px;scrollbar-width:none;flex:none}
.rooms::-webkit-scrollbar{display:none}
.rooms button{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.rooms button em{font-style:normal;font-size:12.5px;background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.rooms button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rooms button.on em{background:rgba(255,255,255,.25);color:#fff}
.rooms .add{color:var(--accent);border-style:dashed;padding:7px 13px}

.main{flex:1;min-height:0;display:flex;flex-direction:column}
.stage{position:relative;height:44dvh;min-height:250px;flex:none;background:#eef0ec;overflow:hidden;touch-action:none}
#cv{width:100%;height:100%;display:block;touch-action:none}
.seg{position:absolute;left:10px;top:10px;display:flex;background:rgba(255,255,255,.92);border-radius:999px;padding:3px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 13px;font-size:14.5px;font-weight:700;color:var(--ink-soft)}
.seg button.on{background:var(--accent);color:#fff}
.sw{position:absolute;left:10px;top:52px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 12px 5px 6px;font-size:14px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.12);user-select:none}
.sw input{display:none}
.sw i{width:34px;height:20px;border-radius:999px;background:#c9d0ca;position:relative;transition:.15s}
.sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.sw input:checked+i{background:var(--accent)}
.sw input:checked+i::after{left:16px}
.reset{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:20px;box-shadow:0 2px 10px rgba(0,0,0,.12);color:var(--ink-soft)}
.labels{position:absolute;inset:0;pointer-events:none}
.labels div{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#26302a;background:rgba(255,255,255,.82);border-radius:6px;padding:1px 6px;white-space:nowrap}
.labels div.sel{background:var(--accent);color:#fff}
.toast{position:absolute;left:50%;bottom:70px;transform:translate(-50%,10px);background:rgba(38,48,42,.88);color:#fff;border-radius:999px;padding:8px 16px;font-size:14.5px;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
.hint{position:absolute;right:12px;bottom:26px;max-width:calc(100% - 24px);text-align:right;font-size:12.5px;color:#fff;background:rgba(38,48,42,.55);border-radius:8px;padding:4px 9px;pointer-events:none}
.hint:empty{display:none}

.panel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -4px 16px rgba(30,40,34,.07);margin-top:-14px;position:relative;z-index:2}
.ptabs{display:flex;gap:6px;padding:10px 12px 6px;flex:none}
.ptabs button{flex:1;border:0;background:var(--paper);border-radius:11px;padding:9px 6px;font-size:15.5px;font-weight:700;color:var(--ink-soft)}
.ptabs button.on{background:var(--accent-soft);color:var(--accent-dark);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ptabs em{font-style:normal;font-size:12.5px;background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;margin-left:3px}
.pbody{flex:1;min-height:0;overflow-y:auto;padding:6px 12px calc(18px + var(--safe-b));-webkit-overflow-scrolling:touch}

.chips{display:flex;gap:7px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.chips button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.sect{font-size:15px;font-weight:800;margin:4px 0 9px;display:flex;justify-content:space-between;align-items:center}
.sect small{font-weight:500;color:var(--ink-soft);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.card{border:1.5px solid var(--line);border-radius:13px;background:#fff;padding:6px 6px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.card:active{background:var(--accent-soft);border-color:var(--accent)}
.card img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:8px;background:#f2f4f1}
.card b{font-size:14px;line-height:1.3;word-break:keep-all}
.card span{font-size:12.5px;color:var(--ink-soft)}
.card .price{color:var(--accent-dark);font-weight:700}

.empty{text-align:center;color:var(--ink-soft);padding:26px 10px;line-height:1.8;font-size:15px}
.row-item{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:13px;padding:7px 9px;margin-bottom:8px;background:#fff}
.row-item.sel{border-color:var(--accent);background:var(--accent-soft)}
.row-item img{width:62px;height:46px;object-fit:contain;border-radius:7px;background:#f2f4f1;flex:none}
.row-item .t{flex:1;min-width:0}
.row-item .t b{font-size:15px;display:block}
.row-item .t span{font-size:13px;color:var(--ink-soft)}
.row-item .x{border:0;background:transparent;font-size:20px;color:#9aa69d;padding:6px 10px}
.warn{color:var(--warn);font-weight:700}
.total{display:flex;justify-content:space-between;font-weight:800;font-size:16px;padding:10px 4px}
.note{background:var(--accent-soft);border-radius:12px;padding:11px 13px;font-size:14px;color:#3c5442;line-height:1.65;margin:6px 0 10px}
.btn{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 14px;font-size:15.5px;font-weight:700}
.btn.main{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--warn);border-color:#efc9bf}
.btns{display:flex;gap:8px;margin:8px 0}
.btns .btn{flex:1}

/* 編輯器 */
.ed-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px}
.ed-head b{font-size:17px}
.ed-done{border:0;background:var(--accent);color:#fff;border-radius:999px;padding:7px 18px;font-size:15px;font-weight:700}
.lbl{font-size:13px;color:var(--ink-soft);margin:10px 0 5px;font-weight:600}
.f3{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:end}
.f4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld span{font-size:12.5px;color:var(--ink-soft);text-align:center}
.fld input,.sel-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 4px;font-size:16px;text-align:center;background:#fff;-moz-appearance:textfield;appearance:textfield}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld input:focus,.sel-in:focus{outline:none;border-color:var(--accent)}
.unit{font-size:13px;color:var(--ink-soft);padding-bottom:12px}
.dist{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:5px}
.pad button{border:1.5px solid var(--line);background:#fff;border-radius:10px;font-size:19px;font-weight:700;color:var(--accent-dark)}
.pad button:active{background:var(--accent-soft)}
.pad .u{grid-column:2;grid-row:1}.pad .l{grid-column:1;grid-row:2}.pad .d{grid-column:2;grid-row:2}.pad .r{grid-column:3;grid-row:2}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.acts .btn{padding:11px 4px}
details.more{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
details.more summary{font-weight:800;font-size:15px;padding:6px 0;cursor:pointer}
.sw-row{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 6px}
.dot{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #cfd6d0;padding:0}
.dot.on{box-shadow:0 0 0 2.5px var(--accent)}
.opt-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.opt-row button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:14.5px;font-weight:600}
.opt-row button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.op-card{border:1.5px solid var(--line);border-radius:13px;padding:9px 10px;margin-bottom:8px}
.op-card .h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;margin-bottom:6px}
.op-card .x{border:0;background:transparent;color:var(--warn);font-size:14px;font-weight:700}
.name-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px}

/* 房間分頁上的刪除 */
.rooms .rm{margin-left:2px;font-size:12px;line-height:1;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.28);display:inline-flex;align-items:center;justify-content:center}
.name-row{display:flex;gap:8px;align-items:stretch}
.name-row .name-in{flex:1;min-width:0}
.name-row .btn{flex:none;padding:0 14px;font-size:15px}
.labels div.room{background:rgba(38,48,42,.78);color:#fff;font-size:13.5px;padding:3px 10px;border-radius:8px}
.row-item[data-goroom]{cursor:pointer}
.row-item .btn{padding:8px 12px;font-size:14.5px}

.tpl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tpl-row button{border:1.5px solid var(--accent);background:#fff;border-radius:12px;padding:9px 4px;display:flex;flex-direction:column;gap:2px;align-items:center;line-height:1.3}
.tpl-row button b{font-size:14.5px;color:var(--accent-dark)}
.tpl-row button span{font-size:12.5px;color:var(--ink-soft)}
.tpl-row button:active{background:var(--accent-soft)}

.op-card.bad{border-color:#e3a39a;background:#fdf4f2}
.chk{display:flex;align-items:center;gap:9px;margin:10px 0 2px;font-size:14.5px;font-weight:600;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--accent)}

.optools{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(255,255,255,.96);border-radius:16px;padding:7px 9px 8px;box-shadow:0 3px 14px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3;max-width:calc(100% - 16px)}
.optools[hidden]{display:none}
.optools #otLabel{font-size:13px;font-weight:700;color:var(--ink-soft)}
.optools .otb{display:flex;gap:5px}
.optools .otb button{min-width:42px;height:38px;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-size:17px;font-weight:700;color:var(--accent-dark);padding:0 8px}
.optools .otb button:active{background:var(--accent-soft)}
.optools .otb button.ok{background:var(--accent);border-color:var(--accent);color:#fff;font-size:14.5px;white-space:nowrap;min-width:58px}

.zoomb{position:absolute;right:10px;top:56px;display:flex;flex-direction:column;gap:6px;z-index:2}
.zoomb[hidden]{display:none}
.zoomb button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.94);font-size:20px;font-weight:700;color:var(--accent-dark);box-shadow:0 2px 10px rgba(0,0,0,.14);padding:0}
.trace{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.trace .cdot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#f2b705;border:3px solid #fff;box-shadow:0 0 0 2px #26302a}
.trace .cline{position:absolute;height:3px;margin-top:-1.5px;background:#f2b705;transform-origin:0 50%}
.trace .rubber{position:absolute;border:2.5px dashed var(--accent);background:rgba(79,107,85,.18)}
.tool-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool-steps button{border:1.5px solid var(--accent);background:#fff;border-radius:12px;padding:9px 6px;display:flex;flex-direction:column;gap:2px;align-items:center;line-height:1.3}
.tool-steps button b{font-size:15px;color:var(--accent-dark)}
.tool-steps button span{font-size:12.5px;color:var(--ink-soft)}
.tool-steps button.on{background:var(--accent);color:#fff}
.tool-steps button.on b,.tool-steps button.on span{color:#fff}
.in-row{display:flex;gap:10px;margin:0 0 12px}
.in-f{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.in-f small{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.in-r{display:flex;align-items:center;gap:6px}
.in-r .name-in{flex:1;min-width:0;font-size:17px;text-align:center;padding:9px 6px}
.in-r em{font-style:normal;font-weight:700;color:var(--ink-soft);font-size:13px}
.trace .dimlbl{position:absolute;transform:translate(-50%,-50%);background:rgba(38,48,42,.88);color:#fff;border-radius:7px;padding:2px 8px;font-size:12.5px;font-weight:700;white-space:nowrap}

/* 登入閘門／案件存檔 */
.top-r{display:flex;align-items:center;gap:8px;min-width:0}
.btn-proj{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:14.5px;font-weight:700;color:var(--ink);max-width:150px;min-width:0}
.btn-proj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projDot{width:9px;height:9px;border-radius:50%;background:#c9d0ca;flex:none}
#projDot.ok{background:#3aa76d}#projDot.busy{background:#e0a21a}#projDot.dirty{background:#d9534f}
.gate{position:fixed;inset:0;background:var(--paper);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.gate[hidden]{display:none}
.gate-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:26px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 6px 24px rgba(30,50,40,.08)}
.gate-card h2{font-size:19px;margin-bottom:8px}
.gate-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.75;margin-bottom:14px}
.gate-card .btn{width:100%;margin-top:8px}
.psheet{max-width:560px}
.proj-cur{background:var(--accent-soft);border-radius:12px;padding:10px 13px;font-size:14.5px;line-height:1.6}
.proj-list{max-height:34dvh;overflow-y:auto;margin:0 -2px;padding:0 2px}
.proj-row{border:1.5px solid var(--line);border-radius:13px;padding:9px 11px;margin-bottom:8px}
.proj-row.cur{border-color:var(--accent);background:var(--accent-soft)}
.proj-row b{font-size:15.5px;display:block;word-break:break-all}
.proj-row span.m{font-size:12.5px;color:var(--ink-soft)}
.proj-row .pr-b{display:flex;gap:6px;margin-top:7px}
.proj-row .pr-b button{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font-size:14px;font-weight:700}
.proj-row .pr-b .go{background:var(--accent);border-color:var(--accent);color:#fff}
.proj-row .pr-b .rm{color:var(--warn);margin-left:auto}
.proj-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:13.5px;color:var(--ink-soft)}
.proj-foot .btn{padding:7px 14px;font-size:14px}

/* 分享 */
.modal{position:fixed;inset:0;background:rgba(20,28,23,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal[hidden]{display:none}
.sheet{max-height:88dvh;overflow-y:auto;background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + var(--safe-b))}
.sheet h3{margin:0 0 6px;font-size:18px}
.muted{color:var(--ink-soft);font-size:14px;line-height:1.65;margin:0 0 12px}
.sheet-btns{display:grid;gap:9px}
.sheet-btns button{border:1.5px solid var(--accent);background:#fff;color:var(--accent-dark);border-radius:12px;padding:13px;font-size:16px;font-weight:700}
.sheet-btns button:first-child:not([hidden]){background:var(--accent);color:#fff}
.sheet-btns button[hidden]{display:none}
.sheet-btns button.danger,.sheet-btns button.danger:first-child:not([hidden]){background:#c2492f;border-color:#c2492f;color:#fff}
#dlgB button,#dlgB button:first-child:not([hidden]){background:#fff;color:var(--accent-dark);border:1.5px solid var(--accent)}
#dlgB button.danger,#dlgB button.danger:first-child:not([hidden]){background:var(--warn);border-color:var(--warn);color:#fff}
.sheet .close{margin-top:10px;width:100%;border:0;background:var(--paper);border-radius:12px;padding:12px;font-size:15px;color:var(--ink-soft);font-weight:600}

@media (min-width:900px){
  .main{flex-direction:row}
  .stage{flex:1;height:auto;min-height:0;border-radius:16px;margin:0 0 14px 14px}
  .panel{flex:none;width:440px;margin:0 14px 14px;border-radius:16px;box-shadow:0 2px 16px rgba(30,40,34,.1)}
  .grid{grid-template-columns:repeat(3,1fr)}
}