/* ── 版面：方向 A（左表單＋右即時預覽），Annie 2026-10-28 選定 ── */
.shell{position:fixed;inset:12px;display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:52px minmax(0,1fr);gap:12px}
.top{grid-column:1/-1;position:relative;z-index:20;border-radius:var(--r-card);display:flex;align-items:center;padding:0 8px 0 20px;gap:8px}
.brand{display:flex;align-items:center;gap:12px;margin-right:8px}
.brand img{height:14px}
.brand span{font-size:12px;color:var(--muted);padding-left:12px;border-left:1px solid var(--hair2);white-space:nowrap}
.sp{flex:1}
.top .btn{white-space:nowrap}
/* 類型選單：一顆按鈕＋3×3 選單（類型多了頂列也不會擠成兩行） */
.typesel{position:relative}
#b-type .lbl{color:var(--muted);font-weight:400;margin-right:2px}
#b-type .ic{color:var(--muted)}
.typemenu{position:absolute;top:44px;left:0;z-index:30;border-radius:var(--r-card);padding:8px;display:grid;grid-template-columns:repeat(3,152px);gap:4px;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s;background:rgba(250,251,253,.97)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.typemenu{background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px)}}
.typemenu{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 40px rgba(15,35,60,.16)}
.typemenu.open{opacity:1;transform:none;pointer-events:auto}
.typemenu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:0;border-radius:var(--r-in);background:none;font:inherit;color:var(--ink);cursor:pointer;text-align:left;transition:background .2s}
.typemenu button:hover{background:var(--sel)}
.typemenu button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.typemenu button b{font-weight:500}
.typemenu button span{font-size:12px;color:var(--muted)}

/* 表單 */
.form{border-radius:var(--r-card);overflow:auto;padding:4px 20px 32px;scroll-behavior:smooth}
.sec{padding:16px 0 20px;border-bottom:1px solid var(--hair)}
.sec:last-child{border:0}
.sec>h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin-bottom:12px}
.sec>h3 .n{width:20px;height:20px;border-radius:999px;background:var(--sel);color:var(--navy);font-size:11px;display:grid;place-items:center}
.sec>h3 small{margin-left:auto;font-size:12px;color:var(--faint);font-weight:400}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:12px}
.stack{display:grid;gap:12px}
.fld textarea{min-height:56px;border:1px solid var(--hair);border-radius:var(--r-btn);padding:8px 12px;font:inherit;color:var(--ink);background:var(--field);resize:vertical;line-height:1.6;transition:border-color .2s,background .2s}
.fld textarea:focus{background:#fff;border-color:rgba(10,132,255,.6)}
.fld select{height:36px;border:1px solid var(--hair);border-radius:var(--r-btn);padding:0 8px;font:inherit;color:var(--ink);background:var(--field)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{height:26px;padding:0 10px;border-radius:var(--r-tag);background:var(--sel);color:var(--navy);display:inline-flex;align-items:center;font-size:12px}
.sub-h{font-size:12px;color:var(--muted);margin:16px 0 8px;display:flex;align-items:center;justify-content:space-between}

/* 可增減的列 */
.rowx{display:grid;grid-template-columns:20px 92px minmax(0,1fr) 28px;gap:8px;align-items:start;padding:6px 0}
.rowx input,.rowx textarea{height:32px;border:1px solid var(--hair);border-radius:var(--r-btn);padding:0 10px;font:inherit;color:var(--ink);background:var(--field);width:100%;min-width:0}
.rowx textarea{height:auto;min-height:32px;padding:6px 10px;resize:vertical;line-height:1.5}
.rowx input:focus,.rowx textarea:focus{background:#fff;border-color:rgba(10,132,255,.6)}
.rowx.off input,.rowx.off textarea{color:var(--faint)}
.tick{width:20px;height:20px;margin-top:6px;border-radius:999px;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.rowx.off .tick{background:none;border:1.5px solid var(--hair2)}
.del{width:28px;height:32px;border:0;background:none;color:var(--faint);border-radius:var(--r-btn);cursor:pointer;display:grid;place-items:center;transition:.2s}
.del:hover{background:rgba(255,59,48,.08);color:#d70015}
.add{height:32px;border:1px dashed var(--hair2);background:none;border-radius:var(--r-btn);width:100%;color:var(--muted);font:inherit;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;margin-top:6px;transition:.2s}
.add:hover{border-color:var(--navy);color:var(--navy);background:var(--sel)}
.rowx.note{grid-template-columns:20px minmax(0,1fr) 28px}
.rowx.x4{grid-template-columns:20px 84px minmax(0,1fr) 28px 28px}
.rowx.x3{grid-template-columns:20px minmax(0,1fr) 28px 28px}
.rowx.vrow{grid-template-columns:84px minmax(0,1fr) 80px 28px;padding:3px 0}
.rowx.vrow input.num{text-align:right}
.opt{width:28px;height:32px;border:0;background:none;color:var(--faint);border-radius:var(--r-btn);cursor:pointer;display:grid;place-items:center;transition:.2s}
.opt:hover{background:var(--sel);color:var(--ink)}
.opt.on{background:var(--sel);color:var(--navy)}

/* 一次性製作的項目卡 */
.line{border:1px solid var(--hair);border-radius:var(--r-in);padding:12px;margin-bottom:8px;background:rgba(255,255,255,.4);display:grid;gap:8px}
.line .hd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.line .hd .del{margin-left:auto;height:24px}

/* 預算 */
.calc{margin-top:12px;border-radius:var(--r-in);background:rgba(255,255,255,.55);border:1px solid var(--hair);padding:12px 14px;display:grid;gap:6px}
.calc div{display:flex;justify-content:space-between;color:var(--muted)}
.calc div b{color:var(--ink);font-weight:500}
.calc .tot{border-top:1px solid var(--hair);padding-top:8px;margin-top:2px;color:var(--ink);font-weight:500}
.calc .tot b{color:var(--navy);font-size:17px}
.calc .adj{color:#b25000;font-size:12px}
.rev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:12px}
.mon{display:grid;gap:8px;margin-top:4px}
.mon .mh{display:grid;grid-template-columns:72px repeat(var(--cols),minmax(0,1fr));gap:8px;font-size:12px;color:var(--muted);align-items:center}
.mon input{height:32px;border:1px solid var(--hair);border-radius:var(--r-btn);padding:0 8px;font:inherit;background:var(--field);text-align:right;min-width:0;width:100%}
.mon input:focus{background:#fff;border-color:rgba(10,132,255,.6)}
.switch{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.switch i{width:30px;height:18px;border-radius:999px;background:var(--hair2);position:relative;transition:.2s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.2s}
.switch.on i{background:var(--navy)}
.switch.on i::after{left:14px}
.payopt{display:grid;gap:4px}
.radio{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:var(--r-btn);cursor:pointer;transition:background .2s}
.radio:hover{background:var(--sel)}
.radio i{width:16px;height:16px;border-radius:999px;border:1.5px solid var(--hair2);flex:none}
.radio.on i{border:5px solid var(--navy)}

/* 桌面 */
.desk{position:relative;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:4px 0 24px}
.deskbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:12px;color:var(--muted);flex-wrap:wrap;justify-content:center}
.tag{height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.tag.ok .ic{color:#248a3d}
.tag.warn{color:#b25000}
.tag.bad{color:#d70015}
.scaler{flex:none}

/* 過去的單 */
.drawer{position:fixed;top:76px;right:12px;bottom:12px;width:400px;border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:12px;
  transform:translateX(calc(100% + 24px));transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:10;background:rgba(250,251,253,.96)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.drawer{background:rgba(255,255,255,.78)}}
.drawer.open{transform:none}
.drawer .hd{display:flex;align-items:center;justify-content:space-between}
.drawer h3{font-size:15px;font-weight:500}
.drawer .search{position:relative}
.drawer .search .ic{position:absolute;left:10px;top:10px;color:var(--faint)}
.drawer .search input{width:100%;padding-left:32px}
.list{overflow:auto;display:grid;gap:4px;align-content:start;flex:1;margin:0 -8px;padding:0 8px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-radius:var(--r-in);cursor:pointer;transition:background .2s;border:0;background:none;text-align:left;font:inherit;color:inherit}
.item:hover{background:#fff}
.item b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item span{font-size:12px;color:var(--muted)}
.item em{font-style:normal;font-weight:500;text-align:right}
.empty{color:var(--muted);font-size:13px;line-height:1.8;padding:24px 4px;text-align:center}
.drawer .foot{font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--hair);padding-top:12px}
.drawer .foot b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;pointer-events:none;height:40px;padding:0 16px;border-radius:999px;display:flex;align-items:center;gap:8px;transition:.3s;z-index:20;font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ic{color:#248a3d}

/* ── 紙：原公版骨架，字型字級照原 xlsx ── */
.paper{width:794px;height:1123px;background:#fff;padding:48px 52px 32px;display:flex;flex-direction:column;line-height:1.75;transform-origin:top left;overflow:hidden;position:relative}
.p-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.p-head img{height:30px;margin-top:6px}
.p-title{text-align:right;line-height:1.4}
.p-title .zh{font-size:var(--pt20);font-weight:500;letter-spacing:.42em;margin-right:-.42em}
.p-title .en{font-size:var(--pt16);font-weight:500;letter-spacing:.5em;margin-right:-.5em}
.h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--pt14);font-weight:500;padding-bottom:6px;border-bottom:1px solid #262626}
.h small{font-size:var(--pt12);font-weight:300}
.client{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);font-size:var(--pt14);padding:10px 0 20px}
.client div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt{width:100%;border-collapse:collapse}
.qt th{font-weight:300;text-align:left;padding:4px 0;border-bottom:1px solid #d9d9d9;color:#595959}
.qt td{padding:8px 0;vertical-align:top;border-bottom:1px solid #eee}
.qt td.g{font-weight:500;width:64px}
.qt td.k{width:84px}
.qt .r{text-align:right}
.qt .sub{color:#7f7f7f}
.qt tr:last-child td{border-bottom:0}
.mcells{display:flex}
.mcells>div{flex:none}
.blue{color:var(--q-blue)}
.money{display:grid;grid-template-columns:64px minmax(0,1fr);border-top:1px solid #d9d9d9;padding-top:8px}
.ledger{display:grid;color:var(--q-num)}
.ledger span{color:var(--q-text)}
.ledger b{text-align:left;font-weight:300}
.ledger .b,.money .g2,.notes .g2{font-weight:500}
.money .g2 span{font-weight:300}
.ledger .m,.ledger .m b{color:var(--accent);font-weight:500}
.acc{color:var(--accent)}
.gap{display:inline-block;width:64px}
.pair{display:flex;flex-wrap:wrap;column-gap:12px}
.pair span{word-break:keep-all}
.mcells>div{padding-right:6px;overflow-wrap:anywhere;min-width:0}
.notes{border-top:1px solid #d9d9d9;margin-top:12px;padding-top:8px;display:grid;grid-template-columns:148px minmax(0,1fr)}
.notes ol{list-style:none}
.notes li.acc{color:var(--accent);font-weight:500}
.notes li{padding-left:2.1em;text-indent:-2.1em}
.notes .cont{padding-left:0;text-indent:0}
.notes.nolabel{border-top:0;margin-top:4px;grid-template-columns:64px minmax(0,1fr)}
.payrow{margin-top:auto}
.payrow .in{display:flex;justify-content:space-between;align-items:flex-start;padding-top:10px}
.bank{font-size:var(--pt14);font-weight:400;color:var(--q-blue);line-height:1.7}
.tot{text-align:right;color:var(--q-blue);font-size:var(--pt16);font-weight:500;display:flex;gap:28px;align-items:baseline}
.tot small{display:block;font-size:var(--pt12);font-weight:300;color:var(--q-text)}
.sumx{display:grid;grid-template-columns:auto 20px 96px;gap:2px 8px;text-align:right;align-items:baseline}
.sumx .t{color:var(--q-blue);font-size:var(--pt16);font-weight:500}
.sumx .deal{color:#C00000;font-size:var(--pt16);font-weight:700}
.sumx small{font-size:var(--pt12)}
.sumx s{color:#a6a6a6}
.sign{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;margin-top:28px}
.co{display:flex;justify-content:space-between;font-size:var(--pt14);padding-top:10px;line-height:1.7;white-space:nowrap}
.stamps{display:flex;align-items:flex-end;gap:4px;padding-top:8px;mix-blend-mode:multiply}
.stamps img:first-child{width:84px}.stamps img:last-child{width:46px}
.sigbox{height:120px}
.copy{text-align:right;color:var(--q-gray);margin-top:12px}
.paper .ph{color:#c8c8c8}
/* 591／樂居：版位表（欄位照原單） */
.qt.sh td{padding:6px 0;vertical-align:top;border-bottom:0;line-height:1.7}
.qt.sh td.g{font-weight:500;line-height:1.4}
.qt.sh tr.gend td{padding-bottom:14px;border-bottom:1px solid #d9d9d9}
.qt.sh+.notes{border-top:0;margin-top:4px}
.qt.md th{white-space:nowrap}
.qt.md th,.qt.md td{padding-left:4px;padding-right:4px}
.qt.md th.c,.qt.md td.c{text-align:center}
.qt.md th.r,.qt.md td.r{text-align:right}
.qt.md td{padding-top:4px;padding-bottom:4px;line-height:1.5}
.mfoot{padding:6px 4px 0 64px;color:var(--q-text)}
.qt.vo tr.gap2 td{padding:4px 0}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mgrid .wide{grid-column:1/-1}
.mgrid textarea{min-height:32px}
/* 聲量工程：每個平台一組，組與組之間細線（照惠田天玥聲量工程1015） */
.qt.vo td{padding:1px 0}
.qt.vo td.g{font-weight:500}
.qt.vo tr.bend td{padding-bottom:10px}
.qt.vo tr.bud td{color:var(--q-num)}
.qt.vo tr.bud td.g{color:var(--q-text)}
.qt.vo tr.bud.first td{padding-top:10px;border-top:1px solid #eee}
.qt.vo tr.bud td.acc{color:var(--accent);font-weight:500}
.notes.wide{grid-template-columns:64px minmax(0,1fr)}
.qt.vo tr.bud.last td{padding-bottom:12px;border-bottom:1px solid #d9d9d9}
.qt.vo tr.bend td,.qt.vo tr:not(.bud) td{border-bottom:0}
/* ── 列印＝匯出 PDF：只印紙，A4 一頁 ── */
@media print{
  @page{size:A4;margin:0}
  html,body{height:auto;overflow:visible;background:#fff}
  body::before,.top,.form,.deskbar,.drawer,.toast{display:none!important}
  .shell{position:static;display:block}
  .desk{padding:0;overflow:visible;display:block}
  .scaler{width:auto!important;height:auto!important}
  .paper{transform:none!important;box-shadow:none!important;width:210mm;height:296.8mm}
  .paper .ph{color:transparent}
}