*,:before,:after{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#3a3f54;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#4a506b}.form-scroll::-webkit-scrollbar{width:6px}.preview-scroll::-webkit-scrollbar{width:6px}.form-scroll::-webkit-scrollbar-track{background:0 0}.preview-scroll::-webkit-scrollbar-track{background:0 0}.form-scroll::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}.preview-scroll::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}:root{--bg-primary:#0f1117;--bg-secondary:#1a1d27;--bg-tertiary:#252836;--bg-hover:#2d3142;--bg-active:#353a50;--border-color:#2d3142;--border-light:#3a3f55;--text-primary:#e8eaf0;--text-secondary:#9ea3b5;--text-muted:#6b7085;--accent:#5b7fff;--accent-hover:#7094ff;--accent-subtle:#5b7fff1f;--danger:#ff5b6a;--success:#4ade80;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--transition:.2s cubic-bezier(.4, 0, .2, 1);--font-sans:"Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif}html{font-size:100%}body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-primary);max-width:100vw;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.app-container{flex-direction:column;height:100vh;display:flex}.main-content{flex:1;display:flex;overflow:hidden}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;height:72px;padding:0 24px;display:flex}.header-left{align-items:center;gap:16px;display:flex}.logo-icon{border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.app-header h1{letter-spacing:.02em;color:var(--text-primary);white-space:nowrap;font-size:1.25rem;font-weight:700;line-height:1.2}.header-subtitle{color:var(--text-muted);font-size:.85rem;font-weight:400}.header-actions{gap:12px;display:flex}.btn{border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;align-items:center;gap:8px;padding:10px 24px;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent), #7c5bff);color:#fff;box-shadow:0 2px 10px #5b7fff4d}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-hover), #8e6fff);transform:translateY(-2px);box-shadow:0 4px 16px #5b7fff73}.btn-outline{color:var(--text-secondary);border:1px solid var(--border-light);background:0 0}.btn-outline:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.btn-sm{padding:8px 16px;font-size:.9rem}.btn-ghost{color:var(--accent);border:1px dashed var(--border-light);background:0 0;justify-content:center;width:100%}.btn-ghost:hover{background:var(--accent-subtle);border-color:var(--accent)}.preview-panel{background:var(--bg-primary);flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-toolbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:center;align-items:center;padding:12px 24px;display:flex}.preview-scroll{background-color:var(--bg-primary);background-image:radial-gradient(circle at 2px 2px, var(--border-color) 1px, transparent 0);background-size:24px 24px;flex:1;position:relative;overflow:auto}.preview-zoom-stage{justify-content:center;align-items:flex-start;min-height:100%;padding:24px;display:flex}.drawer-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:199;opacity:0;cursor:pointer;background:0 0;transition:opacity .3s;display:none;position:fixed;inset:0}.drawer-overlay.visible{opacity:1;display:block}.drawer-handle-area{cursor:pointer;background:var(--bg-secondary);border-bottom:1px solid var(--border-light);border-radius:24px 24px 0 0;padding-bottom:0;display:block}.drawer-handle-area .tab-container{border-bottom:none;margin-bottom:0;padding-bottom:0}.drawer-indicator{display:none}@keyframes generating-spin{to{transform:rotate(360deg)}}.generating-overlay{-webkit-backdrop-filter:blur(4px);z-index:999;background:#0f1117d9;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:fixed;inset:0}.generating-spinner{border:3px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;animation:.9s linear infinite generating-spin}.generating-label{color:var(--text-secondary);letter-spacing:.04em;font-size:.95rem;font-weight:500}.zoom-controls{align-items:center;gap:12px;display:flex}.zoom-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;padding:4px;display:flex}.zoom-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}.zoom-label{text-align:center;min-width:56px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:.875rem}.preview-scale-wrapper{transform-origin:top;transition:transform .18s ease-out}.logo-icon img{display:block}.form-panel{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;width:550px;min-width:550px;display:flex;overflow:hidden}.tab-container{flex-shrink:0;gap:8px;margin-bottom:6px;padding:10px 20px 0;display:flex}.tab{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 14px 12px;font-size:.95rem;font-weight:600;line-height:1;display:flex;position:relative}.tab svg{flex-shrink:0;display:block}.tab-label{align-items:center;line-height:1;display:inline-flex}.tab:hover{color:var(--text-secondary);background:var(--bg-hover)}.tab.active{color:var(--accent);background:var(--accent-subtle)}.tab.active:after{content:"";background:var(--accent);border-radius:0;height:2px;position:absolute;bottom:0;left:0;right:0}.form-scroll{flex-direction:column;flex:1;gap:20px;padding:24px 20px;display:flex;overflow-y:auto}.form-group{flex-direction:column;gap:8px;display:flex}.form-group>label{color:var(--text-secondary);font-size:.9rem;font-weight:500}input[type=text],input[type=number]{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;height:48px;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition);padding:0 16px;font-size:1rem}input[type=number]{appearance:textfield}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}select{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ea3b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;padding:12px 16px;font-size:1rem}input:focus,select:focus,.custom-select-container.open .custom-select-display{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-subtle);outline:none}.custom-select-container{width:100%;position:relative}.custom-select-display{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition);cursor:pointer;justify-content:space-between;align-items:center;min-height:48px;padding:12px 16px;font-size:1rem;display:flex}.custom-select-arrow{width:16px;height:16px;transition:transform var(--transition);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ea3b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.custom-select-container.open .custom-select-arrow{transform:translateY(-50%)rotate(180deg)}.custom-select-options{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);z-index:1000;max-height:250px;box-shadow:var(--shadow-lg);padding:4px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.custom-select-option{border-radius:var(--radius-xs);cursor:pointer;transition:background var(--transition);color:var(--text-primary);padding:10px 12px}.custom-select-option:hover{background:var(--bg-tertiary)}.custom-select-option.selected{background:var(--accent-subtle);color:var(--accent)}.segmented-control{background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border-color);gap:4px;padding:4px;display:flex}.segmented-control button{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;border-radius:calc(var(--radius-sm) - 2px);transition:all var(--transition);background:0 0;border:none;flex:1;padding:10px;font-size:.9rem;font-weight:600}.segmented-control button:hover{color:var(--text-secondary);background:var(--bg-hover)}.segmented-control button.active{background:linear-gradient(135deg, var(--accent), #7c5bff);color:#fff;box-shadow:0 2px 8px #5b7fff4d}.custom-number-input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;height:48px;display:flex;overflow:hidden}.custom-number-input input{text-align:center;width:0;color:var(--text-primary);flex:1;font-weight:600;height:100%!important;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.num-btn{background:var(--bg-hover);width:36px;height:100%;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border:none;justify-content:center;align-items:center;font-size:1.3rem;font-weight:600;line-height:1;display:flex}.custom-number-input .num-btn:first-child{border-right:1px solid var(--border-color)}.custom-number-input .num-btn:last-child{border-left:1px solid var(--border-color)}.num-btn:hover{background:var(--bg-active);color:var(--text-primary)}.num-btn:active{background:var(--accent-subtle);color:var(--accent)}.form-fieldset{border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;gap:12px;width:100%;min-width:0;padding:16px;display:flex}.form-fieldset legend{color:var(--accent);padding:0 8px;font-size:.95rem;font-weight:600}.form-row{gap:12px;width:100%;display:flex}.form-row .form-group{flex:1}.date-inputs{gap:10px;width:100%;min-width:0;display:flex}.date-field{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.date-field>span{flex-shrink:0}.date-field .custom-number-input{flex:1;width:auto;min-width:0}.date-field .custom-number-input input{font-variant-numeric:tabular-nums;min-width:2.4em}.product-row{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;flex-direction:column;gap:12px;margin-bottom:16px;padding:16px;display:flex}.product-row-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.btn-remove-row{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;margin-left:auto;padding:4px;transition:background .2s;display:flex}.btn-remove-row:hover:not(:disabled){background:#ff5b6a1a}.product-fields-vertical{flex-direction:column;gap:12px;display:flex}.document-page{color:#1e293b;background:#fff;flex-direction:column;width:794px;height:1122px;margin:0 auto;font-family:Noto Sans TC,sans-serif;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000026}.doc-inner{z-index:5;flex-direction:column;flex:1;min-height:0;padding:18mm 28mm 15mm;font-size:12pt;line-height:1.55;display:flex;overflow:hidden}.doc-watermark{color:#1a365d0a;pointer-events:none;z-index:1;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:Inter,sans-serif;font-size:100pt;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-35deg)}.doc-header-shared{border-bottom:2pt solid #1a365d;flex-direction:column;margin-bottom:4mm;padding-bottom:2mm;display:flex}.header-company-info{flex-direction:column;align-items:flex-start;margin-bottom:1mm;display:flex}.company-name-zh{color:#1a365d;letter-spacing:2px;font-size:20pt;font-weight:800}.company-name-en{color:#64748b;margin-top:-2px;font-family:Inter,sans-serif;font-size:11pt;font-weight:600}.header-contact-info{color:#475569;justify-content:flex-start;gap:15px;margin-top:2mm;font-size:8.5pt;display:flex}.doc-title{text-align:center;color:#1a365d;letter-spacing:.3em;border-bottom:4pt double #1a365d;width:fit-content;margin:3mm auto 6mm;padding-left:.3em;font-family:Noto Serif TC,serif;font-size:28pt;font-weight:900;line-height:1.2;display:block}.doc-content-body{color:#334155;flex-direction:column;gap:2mm;display:flex}.info-row{align-items:baseline;gap:0;display:flex}.info-label{color:#1a365d;vertical-align:top;justify-content:space-between;width:82px;height:1.5em;font-weight:700;display:inline-flex;overflow:hidden}.info-label:after{display:none}.info-colon{color:#1a365d;margin-right:12px;font-weight:700}.info-value{flex:1}.info-value strong{color:#0f172a}.doc-table{border-collapse:collapse;border:1.5pt solid #1a365d;width:100%;margin:1mm 0}.doc-table th{color:#1a365d;background:#f8fafc;border:1pt solid #1a365d;padding:6px 8px;font-size:11pt;font-weight:800}.doc-table td{text-align:center;border:1pt solid #cbd5e0;padding:6px 8px}.doc-table tr:nth-child(2n){background:#fdfdfd}.warranty-item{gap:8px;margin-bottom:1mm;display:flex}.warranty-item-num{color:#1a365d;flex-shrink:0;width:8mm;font-weight:800}.warranty-item-content{flex:1}.warranty-nested-row{grid-template-columns:42mm 32mm 32mm 25mm;align-items:baseline;gap:1mm;margin-top:2mm;font-size:11pt;display:grid}.nested-item{white-space:nowrap}.doc-footer-area{justify-content:space-between;align-items:flex-end;margin-top:6mm;padding:0 5mm;display:flex}.signature-box{flex-direction:column;gap:10mm;display:flex}.signature-line{color:#1a365d;border-top:1pt solid #1a365d;width:60mm;padding-top:1.5mm;font-size:10pt;font-weight:600}.stamp-placeholder{color:#cbd5e0;text-align:center;border:1.5pt dashed #cbd5e0;border-radius:50%;justify-content:center;align-items:center;width:32mm;height:32mm;margin-bottom:3mm;padding:3mm;font-size:9pt;display:flex;transform:rotate(-10deg)}.doc-spacer{flex:1}.doc-footer{text-align:center;color:#94a3b8;border-top:1px solid #f1f5f9;margin-top:auto;padding:2mm 0 5mm;font-size:9pt}@media (width<=1200px){.form-panel{width:420px;min-width:420px}}@media (width<=1024px){html,body,#root{height:100%;overflow:hidden}.drawer-indicator{background:#fff3;border-radius:2px;width:40px;height:4px;margin:8px auto 2px;display:block}body{overflow:hidden}.app-container{height:100dvh;min-height:100dvh;max-height:100dvh;position:fixed;inset:0;overflow:hidden}.form-panel{--drawer-peek-height:70px;z-index:250;width:100%;min-width:0;max-width:100vw;height:65dvh;transform:translateY(calc(100% - var(--drawer-peek-height)));background:var(--bg-secondary);border:1px solid var(--border-light);border-bottom:none;border-radius:24px 24px 0 0;transition:transform .4s cubic-bezier(.4,0,.2,1);position:fixed;bottom:0;left:0;right:0;overflow-x:hidden;box-shadow:0 -10px 40px #00000080}.form-scroll{overflow-x:hidden}.form-panel.drawer-open{transform:translateY(0)}.drawer-handle-area{touch-action:none;padding-bottom:0}.drawer-handle-area .tab-container{margin-bottom:6px;padding-bottom:0}.preview-panel{flex:1;overflow:hidden}.preview-scroll{-webkit-overflow-scrolling:touch;overflow:auto}}@media (width<=768px){.app-header{height:66px;padding:0 14px}.header-left{gap:10px;min-width:0}.logo-icon{border-radius:11px;width:40px;height:40px}.app-header h1{letter-spacing:.01em;font-size:1.05rem}.header-actions{gap:8px}.header-actions .btn{justify-content:center;min-width:46px;padding:9px 12px}.custom-number-input{height:46px}.num-btn{width:40px;font-size:1.35rem}.date-inputs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.date-field{gap:4px;min-width:0}.date-field .custom-number-input input{min-width:2.8em}.date-field .num-btn{width:34px}.header-actions .btn span{display:none}.form-panel{height:65dvh}}@media (width<=480px){.app-header{height:62px;padding:0 10px}.logo-icon{border-radius:10px;width:36px;height:36px}.app-header h1{font-size:.98rem}.date-inputs{gap:6px}.date-field{gap:3px;min-width:0}.date-field .custom-number-input input{min-width:2.6em}.date-field .num-btn{width:32px}.form-panel{height:70dvh}.form-scroll{padding:12px}}@media print{@page{size:A4 portrait;margin:0}.app-header,.form-panel,.drawer-overlay,.drawer-handle-area,.preview-toolbar,.no-print,.preview-zoom-stage>div>:not(.document-page){display:none!important}html,body,#root,.app-container,.main-content,.preview-panel,.preview-scroll,.preview-zoom-stage,.tp-wrapper,.tp-content{width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;box-shadow:none!important;background:#fff!important;margin:0!important;padding:0!important;display:block!important;position:static!important;overflow:visible!important;transform:none!important}.preview-zoom-stage>div{width:100%!important;transform:none!important}.document-page{page-break-after:always;break-after:page;box-shadow:none!important;width:100%!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;color:inherit!important;background:#fff!important;border:none!important;flex-direction:column!important;margin:0!important;padding:0!important;display:flex!important;overflow:hidden!important}.doc-inner,.doc-content-body,.doc-header-shared,.doc-footer{overflow:visible!important;transform:none!important}}