*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}body{margin:0;padding:0}ul,ol{list-style:none}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button{border:none;background:none;font-family:inherit;font-size:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}:root{--bg: #fafbfc;--bg-secondary: #f5f5f5;--bg-tertiary: #f9fafb;--surface: #ffffff;--surface-hover: #f3f4f6;--border: #e2e8e7;--border-focus: #166534;--border-light: #f0f0f0;--text: #1a2a25;--text-secondary: #5e7068;--text-muted: #95a59e;--text-inverse: #ffffff;--accent: #166534;--accent-hover: #14532d;--accent-light: #dcfce7;--accent-lighter: #bbf7d0;--accent-soft: rgba(22, 101, 52, .1);--danger: #dc2626;--danger-hover: #b91c1c;--danger-light: #fef2f2;--danger-lighter: #fecaca;--warning: #d97706;--warning-light: #fffbeb;--warning-lighter: #fde68a;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--spacing-2xl: 20px;--spacing-3xl: 28px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .06);--font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;--font-size-xs: 10px;--font-size-sm: 11px;--font-size-base: 12px;--font-size-md: 13px;--font-size-lg: 14px;--font-size-xl: 15px;--font-size-2xl: 16px;--font-size-3xl: 18px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}html,body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}#app{width:100%;height:100vh;overflow:hidden}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:7px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);font-family:var(--font-family);line-height:1.4;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;white-space:nowrap}.button:hover{background:var(--surface-hover);border-color:#d1d5db}.button:active{transform:scale(.98)}.button.primary{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.button.ghost{border-color:transparent;background:transparent;color:var(--text-secondary)}.button.ghost:hover{background:var(--surface-hover);color:var(--text)}.button.secondary{background:var(--accent-light);color:var(--accent);border-color:var(--accent-lighter)}.button.secondary:hover{background:var(--accent-lighter)}.button.danger{background:var(--danger-light);color:var(--danger);border-color:var(--danger-lighter)}.button.danger:hover{background:var(--danger-lighter)}.button.small{padding:4px 10px;font-size:var(--font-size-base)}.button.full{width:100%}.button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.icon-button{width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-md);color:var(--text-secondary);transition:all var(--transition-fast);flex-shrink:0}.icon-button:hover{background:var(--surface-hover);color:var(--text)}.icon-button:active{transform:scale(.95)}.icon-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.icon-button.danger:hover{background:var(--danger-light);color:var(--danger);border-color:var(--danger-lighter)}.icon-button.primary{background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}.icon-button.primary:hover{background:var(--accent-hover)}label{display:flex;flex-direction:column;gap:var(--spacing-xs);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--text-secondary)}label span{font-weight:var(--font-weight-normal);color:var(--text-muted);font-size:var(--font-size-sm)}.config-input{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);font-family:var(--font-family);background:var(--surface);color:var(--text);transition:all var(--transition-fast);line-height:1.4}.config-input:hover{border-color:#d1d5db}.config-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.config-input:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.config-input::placeholder{color:var(--text-muted)}.config-slider{width:100%;accent-color:var(--accent);margin:2px 0;cursor:pointer}.config-slider::-webkit-slider-thumb{transition:transform var(--transition-fast)}.config-slider:hover::-webkit-slider-thumb{transform:scale(1.1)}.config-slider:disabled{opacity:.5;cursor:not-allowed}select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-md);font-family:var(--font-family);background:var(--surface);color:var(--text);cursor:pointer;transition:all var(--transition-fast);line-height:1.4}select:hover{border-color:#d1d5db}select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}select:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.switch-row{display:flex;gap:var(--spacing-xl)}.switch-row label{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-md);font-weight:var(--font-weight-normal);color:var(--text);cursor:pointer}.switch-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}.field-grid{display:grid;gap:var(--spacing-md)}.field-grid.two-columns{grid-template-columns:1fr 1fr}.field-grid label{font-size:var(--font-size-base);color:var(--text-secondary)}.field-note{font-size:var(--font-size-sm);color:var(--text-muted);line-height:1.5}.file-info{font-size:var(--font-size-base);color:var(--text-secondary);padding:4px 0}.file-info.empty{color:var(--text-muted)}.app-shell{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px var(--spacing-2xl);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;box-shadow:var(--shadow-xs);z-index:10}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border-radius:9px;background:#12231c;color:#86efac;font-size:18px;font-weight:var(--font-weight-bold);display:flex;align-items:center;justify-content:center}.brand h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text);line-height:1.3}.brand p{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.topbar-actions{display:flex;align-items:center;gap:var(--spacing-md)}.workspace{display:flex;flex:1;overflow:hidden;min-height:0}.controls-panel{width:300px;flex-shrink:0;overflow-y:auto;padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-lg);border-right:1px solid var(--border);background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--border) transparent}.controls-panel::-webkit-scrollbar{width:6px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.controls-panel::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.panel-heading{margin-bottom:4px}.panel-heading>div{display:flex;align-items:center;gap:10px}.panel-heading span{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);letter-spacing:.04em}.panel-heading h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text)}.panel-heading p{font-size:var(--font-size-base);color:var(--text-muted);margin-top:4px;line-height:1.5}.section-rule{display:flex;align-items:center;gap:10px;margin:4px 0}.section-rule:after{content:"";flex:1;height:1px;background:var(--border)}.section-rule span{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.save-row{display:flex;gap:var(--spacing-sm);align-items:center}.save-row input,.save-row select{flex:1;min-width:0}.preview-column{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px var(--spacing-xl);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:var(--spacing-lg)}.preview-toolbar strong{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.preview-toolbar .preview-toolbar-center{display:flex;gap:var(--spacing-sm);flex:1;justify-content:center}.preview-toolbar span{font-size:var(--font-size-base);color:var(--text-muted);margin-left:10px}.preview-pair{flex:1;display:flex;gap:1px;background:var(--border);overflow:hidden;min-height:0}.preview-pair.preview-stack{flex-direction:column}.preview-pair.preview-stack .preview-pane{flex:1 1 50%;min-height:200px}.preview-pane{flex:1;display:flex;flex-direction:column;background:var(--surface);min-width:0;min-height:0}.pane-label{padding:8px 12px;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)}.preview-box{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px;background:#fafafa;min-height:0}.preview-box canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:var(--shadow-sm);border-radius:var(--radius-xs)}.preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-xs);box-shadow:var(--shadow-sm)}.empty-msg{color:var(--text-muted);font-size:var(--font-size-lg)}.preview-footer{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface)}.preview-footer.footer-centered{display:flex;justify-content:center;align-items:center;padding:10px;font-size:var(--font-size-xs);color:var(--text-muted)}.canvas-viewport{-webkit-user-select:none;user-select:none}.canvas-viewport canvas{transform-origin:center center;will-change:transform}.plt-preview{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--surface)}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;cursor:pointer;transition:all var(--transition-fast);background:var(--bg-tertiary)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light)}.drop-zone.drag-over{transform:scale(1.01)}.drop-icon{font-size:28px;font-weight:300;color:var(--text-muted);margin-bottom:6px;transition:color var(--transition-fast)}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{color:var(--accent)}.drop-zone p{font-size:var(--font-size-md);color:var(--text-secondary);margin:2px 0}.drop-hint{font-size:var(--font-size-sm);color:var(--text-muted)}.drop-zone .button{margin-top:10px}.privacy-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);background:var(--accent-light);color:var(--accent);font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.privacy-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}.map-state{display:flex;align-items:center;gap:6px;font-size:var(--font-size-base);color:var(--text-secondary);padding:4px 10px;border-radius:12px;background:#f3f4f6;flex-shrink:0}.map-state i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 2s infinite}.map-state.error i{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-center{text-align:center}.flex-center{display:flex;align-items:center;justify-content:center}.scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hidden::-webkit-scrollbar{display:none}.no-select{user-select:none;-webkit-user-select:none}