:root{color-scheme:dark;--bg:#06131e;--panel:#0f2635;--panel2:#153344;--stroke:#2b5260;--sea:#8ae8d6;--cyan:#54d6d2;--txt:#edf9fd;--muted:#a5c1cb;--gold:#f5d39a;--red:#ffb0a8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 92% 1%,#164855 0,transparent 34%),linear-gradient(160deg,#06131e,#092233);color:var(--txt);font:15px/1.6 system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}a{color:var(--sea)}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9bfff0;outline-offset:3px}[hidden]{display:none!important}
.wrap{width:min(1240px,calc(100% - 40px));margin:auto}.top{position:sticky;top:0;z-index:8;background:#081b28ef;backdrop-filter:blur(18px);border-bottom:1px solid #315365}.top .wrap{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:68px}.brand{font-size:20px;font-weight:900;letter-spacing:1px;text-decoration:none;color:#effffb}.brand span{font-size:11px;display:block;letter-spacing:2px;color:#83bcbf;font-weight:600}.topright{display:flex;gap:10px;align-items:center}.topright a{font-size:12px;border:1px solid #386171;border-radius:999px;padding:7px 12px;text-decoration:none}.tag{font-size:11px;color:#084137;background:#9ff4d4;padding:5px 10px;border-radius:999px;font-weight:850}
.hero{padding:50px 0 24px}.eyebrow{font-size:11px;color:var(--sea);letter-spacing:2.5px;font-weight:800}.hero h1{font-size:clamp(34px,5.2vw,59px);line-height:1.15;margin:12px 0 14px;letter-spacing:-.055em}.hero h1 span{color:#86eadb}.hero p{max-width:800px;color:#b4cbd5;margin:0 0 16px;font-size:15px;line-height:1.85}.warning{background:#12333c;border:1px solid #33675e;border-radius:14px;padding:13px 17px;color:#c1f2e6;font-size:12px;line-height:1.85;margin:21px 0 0}.warning strong{color:#fff}.tablinks{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0 0}.tablinks a{padding:9px 15px;border-radius:10px;border:1px solid #315768;color:#cee1e7;text-decoration:none;font-size:12px}.tablinks a.current{background:#8be8d4;color:#04332d;border-color:#8be8d4;font-weight:800}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:20px 0 22px}.metric{padding:17px 19px;border:1px solid #315360;background:#10304088;border-radius:16px}.metric label{font-size:11px;color:#b3d2d8;display:block}.metric strong{font-size:30px;display:block;line-height:1.4;font-variant-numeric:tabular-nums}.metric:nth-child(2) strong{color:#80e8dc}.metric:nth-child(3) strong{color:var(--gold)}.metric:nth-child(4) strong{color:#a8c9ff}
.layout{display:grid;grid-template-columns:minmax(315px,390px) minmax(0,1fr);gap:18px;align-items:start}.box{border:1px solid #2d5162;border-radius:18px;background:#102738ea;overflow:hidden;box-shadow:0 14px 35px #0002}.boxtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 19px;border-bottom:1px solid #305163}.boxtop h2{font-size:18px;margin:0}.boxtop small{font-size:11px;color:#a4bec8}.formbody{padding:19px}.field{display:block;font-size:12px;color:#c6dce0;margin-bottom:13px;font-weight:650}.field input,.field select,.field textarea{display:block;width:100%;min-height:42px;background:#071c29;border:1px solid #3a5d6c;color:#f7ffff;border-radius:10px;padding:10px 11px;margin-top:6px;font-size:14px}.field textarea{resize:vertical;min-height:80px}.field input[type=checkbox]{display:inline-block;width:16px;min-height:0;accent-color:#72d9c9}.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.buttonbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.btn{border:1px solid #497486;background:#173a4c;color:#e7ffff;padding:9px 13px;border-radius:10px;min-height:42px;font-size:12px;font-weight:850;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:5px}.btn.primary{background:linear-gradient(115deg,#77e1c8,#60d6e5);border:0;color:#052c34}.btn.alert{border-color:#714954;color:#ffc5be}.btn:hover{filter:brightness(1.16)}.hint{font-size:11px;color:#adc7cf;line-height:1.8}.feedback{font-size:13px;color:#94efcd;margin:13px 0 0;min-height:19px;line-height:1.7}.feedback.error{color:#ffc7ae}.records-head{padding:18px;display:flex;flex-wrap:wrap;gap:9px;justify-content:space-between;align-items:center;border-bottom:1px solid #2c5160}.records-head h2{font-size:18px;margin:0}.toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:14px 17px}.toolbar input,.toolbar select{background:#071c29;color:white;border:1px solid #3a5d6c;border-radius:9px;min-height:40px;padding:7px 10px}.toolbar input{flex:1;min-width:125px}.toolbar select{width:120px}.records{display:grid;gap:12px;padding:4px 16px 18px}.record{background:#0b2232;border:1px solid #2a4e5c;border-radius:14px;padding:16px}.record-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.record-head h3{font-size:17px;line-height:1.5;margin:0 0 3px;overflow-wrap:anywhere}.record-head .code{font-size:10px;letter-spacing:.4px;color:#92acb8}.record-meta{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 13px;color:#adc2c8;font-size:11px}.record-meta span{padding:3px 9px;border:1px solid #345668;border-radius:8px;overflow-wrap:anywhere}.record-desc{font-size:12px;color:#c0d5df;line-height:1.8;overflow-wrap:anywhere}.badge{display:inline-flex;white-space:nowrap;border-radius:99px;background:#224654;color:#b5f0ed;padding:4px 9px;font-size:11px;font-weight:800}.badge.done{background:#205543;color:#b3f3cf}.badge.warn{background:#52442f;color:#ffe1aa}.badge.cancel{background:#553b44;color:#ffcad0}.record-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #294757;padding-top:11px}.record-actions button{border:1px solid #355669;background:#173649;border-radius:8px;color:#aef5e5;font-size:12px;padding:7px 10px}.record-actions select{border:1px solid #355669;background:#173649;border-radius:8px;color:#eff;min-height:35px;max-width:125px;font-size:12px}.empty{padding:42px 20px;text-align:center;color:#9fc0cd}.summarybox{border:1px solid #315261;border-radius:14px;background:#112f3d;margin:18px 0 55px;padding:22px}.summarybox h2{font-size:18px;margin:0 0 6px}.summarybox p{font-size:12px;color:#bad1d9;line-height:1.9;margin:0}.footer{padding:30px 0 55px;border-top:1px solid #294b5a;font-size:12px;color:#8daeba}.footer a{margin-left:10px}.lineitems{border:1px dashed #426574;border-radius:11px;padding:10px 10px 0;margin-bottom:12px}.lineitems h3{font-size:13px;margin:0 0 7px}.lineitem{display:grid;grid-template-columns:minmax(0,1.7fr) .75fr 1fr 29px;gap:6px;margin-bottom:8px;align-items:center}.lineitem input{min-width:0;width:100%;padding:9px 7px;border-radius:7px;border:1px solid #365765;background:#071b28;color:#fff;font-size:12px}.lineitem button{border:1px solid #6b494e;color:#ffb8b2;background:#342831;border-radius:7px;height:35px}.linehead{display:grid;grid-template-columns:minmax(0,1.7fr) .75fr 1fr 29px;gap:6px;font-size:10px;color:#a8c5c9;margin-bottom:6px}.totalbar{display:flex;justify-content:space-between;align-items:center;background:#183d49;padding:12px 14px;border-radius:9px;margin:12px 0 0;font-size:12px}.totalbar strong{font-size:23px;color:#91ecd7}.customers{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 0}.customers .customer{padding:12px 14px;background:#112f3c;border:1px solid #31515d;border-radius:12px;font-size:12px}.customers b{color:#92eedb}
#print-sheet{display:none}
@media(max-width:920px){.layout{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.wrap{width:min(800px,calc(100% - 30px))}}
@media(max-width:470px){.hero{padding:32px 0 13px}.wrap{width:calc(100% - 26px)}.top .wrap{min-height:61px}.brand{font-size:15px}.topright a{padding:6px 9px;font-size:10px}.tag{font-size:9px}.metric{padding:12px}.metric strong{font-size:23px}.metrics{gap:8px}.boxtop{padding:14px}.formbody{padding:14px}.row2{gap:7px}.toolbar{padding:12px}.record{padding:12px}.lineitem{grid-template-columns:minmax(0,1.4fr) 52px 70px 24px;gap:3px}.lineitem input{padding:7px 3px;font-size:11px}.lineitem button{height:33px}.linehead{grid-template-columns:minmax(0,1.4fr) 52px 70px 24px}}
@media print{body{background:#fff;color:#111}body>*:not(#print-sheet){display:none!important}#print-sheet{display:block!important;position:static;width:auto;color:#111;font:14px/1.75 'Microsoft JhengHei',sans-serif}#print-sheet h1{font-size:24px}#print-sheet .print-right{text-align:right}#print-sheet table{width:100%;border-collapse:collapse}#print-sheet td,#print-sheet th{border:1px solid #ddd;padding:8px;text-align:left}#print-sheet .print-total{text-align:right;font-weight:bold;font-size:19px}#print-sheet .print-note{white-space:pre-line} @page{size:A4;margin:18mm}}