:root{--navy:#13283f;--navy2:#24445f;--cyan:#00a8c6;--ink:#17212b;--muted:#667483;--line:#d5dfe6;--bg:#e9eef2;--warn:#fff1c6;--warnink:#775400;--shadow:0 16px 42px rgba(22,43,63,.12)}
*{box-sizing:border-box}html{font-family:"Microsoft JhengHei","PingFang TC",Arial,sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{position:sticky;top:0;z-index:20;min-height:68px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#fff;background:var(--navy);box-shadow:0 4px 18px #0002}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:2px solid #ffffffe0;border-radius:9px;color:var(--cyan);font-weight:900}.brand h1{margin:0;font-size:1.15rem;letter-spacing:.04em}.brand p{margin:2px 0 0;color:#bdcbd7;font-size:.78rem}.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.button{padding:9px 13px;border:1px solid transparent;border-radius:8px;font-weight:800;color:var(--navy);background:#fff}.button:hover{transform:translateY(-1px)}.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #00a8c659;outline-offset:1px}.primary{background:var(--cyan);color:#062d36}.ghost{color:#fff;background:transparent;border-color:#ffffff55}.soft{background:#e6edf2}.danger{color:#a63a3a;border-color:#e8caca}.workspace{display:grid;grid-template-columns:minmax(520px,46%) minmax(520px,54%);min-height:calc(100vh - 68px)}.editor{padding:22px;overflow:auto;border-right:1px solid var(--line)}.preview{padding:22px;overflow:auto;background:#dce4ea}.panel{margin-bottom:16px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(22,43,63,.05)}.panel-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:1rem}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:.78rem}.panel-body{padding:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:grid;gap:6px;color:var(--navy2);font-size:.84rem;font-weight:800}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #c8d3dc;border-radius:8px;color:var(--ink);background:#fff}textarea{resize:vertical;line-height:1.5}.helper{margin:10px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}.status-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.status{padding:6px 9px;border-radius:999px;font-size:.75rem;font-weight:900;background:#e7edf2;color:var(--navy2)}.status.ok{background:#def2e6;color:#246942}.status.warn{background:var(--warn);color:var(--warnink)}.items{display:grid;gap:12px}.item-card{display:grid;gap:11px;padding:14px;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:10px;background:#fbfcfd}.item-head{display:grid;grid-template-columns:auto minmax(150px,1fr) auto auto;gap:9px;align-items:center}.check{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.78rem}.check input{width:17px;height:17px;accent-color:var(--cyan)}.item-grid{display:grid;grid-template-columns:1.7fr .55fr .8fr .8fr;gap:9px}.item-card label span{font-size:.72rem;color:var(--muted)}.line-result{display:flex;justify-content:flex-end;gap:18px;color:var(--muted);font-size:.78rem}.line-result strong{color:var(--navy)}.mobile-tabs{display:none}.paper{width:min(100%,900px);min-height:1120px;margin:0 auto;padding:48px;background:#fff;box-shadow:var(--shadow)}.quote-header{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;padding-bottom:18px;border-bottom:3px solid var(--navy)}.quote-kicker{color:var(--cyan);font-size:.82rem;font-weight:900;letter-spacing:.1em}.quote-header h2{margin:5px 0 0;color:var(--navy);font-size:1.8rem;letter-spacing:.12em}.quote-meta{min-width:250px;border-collapse:collapse;font-size:.82rem}.quote-meta th,.quote-meta td{padding:4px 0 4px 12px;text-align:left;vertical-align:top}.quote-meta th{width:86px;color:var(--muted);font-weight:500}.customer{margin:20px 0 22px;padding:16px 18px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;background:#f1f6f8;border-left:4px solid var(--cyan)}.customer small{display:block;margin-bottom:5px;color:var(--muted)}.customer strong{color:var(--navy);font-size:1.04rem}.quote-section{margin-top:24px}.quote-section h3{margin:0 0 9px;padding-bottom:7px;color:var(--navy);border-bottom:1px solid var(--line);font-size:1rem}.quote-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.78rem}.quote-table th{padding:9px 7px;color:#fff;background:var(--navy2);border-right:1px solid #ffffff33;text-align:center}.quote-table td{padding:9px 7px;border-bottom:1px solid var(--line);vertical-align:top}.quote-table td:nth-child(1),.quote-table td:nth-child(4){text-align:center}.quote-table td:nth-child(n+5){text-align:right}.spec{margin-top:3px;color:var(--muted);line-height:1.45;white-space:pre-wrap}.option{display:inline-block;margin-top:5px;padding:2px 6px;border-radius:4px;color:#156175;background:#e6f7fa;font-size:.68rem;font-weight:900}.summary{width:min(100%,390px);margin:22px 0 0 auto;border-collapse:collapse;font-size:.86rem}.summary th,.summary td{padding:8px 10px;border-bottom:1px solid var(--line)}.summary th{text-align:left;font-weight:500;color:var(--muted)}.summary td{text-align:right;font-weight:900;color:var(--navy)}.summary .project td{color:#087d92}.summary .grand th,.summary .grand td{color:#fff;background:var(--navy);font-size:1rem}.pending{color:var(--warnink)!important}.empty{margin-top:24px;padding:20px;border:1px dashed #adbbc5;border-radius:10px;text-align:center;color:var(--muted)}.notes{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:#465665;font-size:.78rem;line-height:1.65}.notes h3{margin:0 0 6px;color:var(--navy);font-size:.86rem}.notes ol{margin:0;padding-left:1.35rem}.notes li{margin-bottom:5px;white-space:pre-wrap}.quote-footer{margin-top:42px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.72rem}
@media(max-width:1120px){.workspace{grid-template-columns:1fr}.mobile-tabs{position:sticky;top:68px;z-index:15;padding:10px 14px;display:flex;gap:8px;background:#fff;border-bottom:1px solid var(--line)}.mobile-tabs button{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;color:var(--navy);background:#fff;font-weight:900}.mobile-tabs button.active{color:#fff;background:var(--navy)}.editor,.preview{display:none;border:0}.editor.active,.preview.active{display:block}.paper{min-height:0}}
@media(max-width:720px){.topbar{align-items:flex-start;padding:12px 14px}.brand p,.actions .ghost{display:none}.editor,.preview{padding:12px}.form-grid,.form-grid.three,.item-grid{grid-template-columns:1fr}.item-head{grid-template-columns:auto 1fr auto}.item-head select{grid-column:1/-1}.paper{padding:28px 18px}.quote-header,.customer{grid-template-columns:1fr}.quote-meta{min-width:0}.quote-table{font-size:.72rem}.quote-table th:nth-child(2),.quote-table td:nth-child(2),.quote-table th:nth-child(5),.quote-table td:nth-child(5){display:none}}
@media print{body{background:#fff}.topbar,.mobile-tabs,.editor{display:none!important}.workspace{display:block}.preview{display:block!important;padding:0;background:#fff}.paper{width:100%;min-height:0;padding:24px;box-shadow:none}.quote-section{break-inside:avoid}}
.quote-logo{display:block;width:160px;max-width:100%;height:auto}.quote-header h2{margin-top:12px}