.editor-panel{flex:1;min-width:0;min-height:300px;border:1px solid var(--color-hairline);border-radius:var(--rounded-lg);background:var(--color-surface);overflow:hidden}.preview-panel{flex:1;min-width:0;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--color-hairline);border-radius:var(--rounded-lg);background:var(--color-surface);padding:var(--spacing-md);position:relative}.preview-image{max-width:100%;max-height:100%;object-fit:contain}.preview-loading{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);font-size:var(--typography-caption-size);color:var(--color-ink-muted)}.preview-error{position:absolute;top:0;left:0;right:0;padding:var(--spacing-sm) var(--spacing-md);background:#fde8e8;color:#793400;font-size:var(--typography-caption-size);border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}.preview-empty{color:var(--color-ink-faint);font-size:var(--typography-body-sm-size)}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--color-canvas);border-bottom:1px solid var(--color-hairline)}.toolbar-title{margin:0;font-size:var(--typography-heading-1-size);font-weight:700;letter-spacing:-1px}.button-primary{background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:var(--rounded-full);padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--typography-button-size);font-weight:500}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-primary:active:not(:disabled){background:var(--color-primary-active);transform:scale(.97)}.export-dialog-overlay{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:100}.export-dialog{background:var(--color-surface);border-radius:var(--rounded-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-soft);min-width:320px}.export-dialog-title{margin:0 0 var(--spacing-md);font-size:22px;font-weight:700}.export-field{display:flex;flex-direction:column;gap:var(--spacing-xxs);margin-bottom:var(--spacing-md);font-size:var(--typography-body-sm-size)}.text-input{border:1px solid rgb(221,221,221);border-radius:var(--rounded-xs);padding:6px;font-size:var(--typography-body-sm-size)}.export-error{color:#793400;font-size:var(--typography-caption-size)}.export-checkbox{display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);font-size:var(--typography-body-sm-size)}.export-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.button-utility{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:4px 14px;font-size:var(--typography-button-size);font-weight:500}.app{display:flex;flex-direction:column;height:100vh;background:var(--color-canvas-soft)}.app-main{display:flex;flex:1;gap:var(--spacing-md);padding:var(--spacing-md);min-height:0}:root{--color-canvas-soft: #f6f5f4;--color-canvas: #ffffff;--color-surface: #ffffff;--color-primary: #0075de;--color-primary-active: #005bab;--color-secondary: #213183;--color-hairline: #e6e6e6;--color-ink: rgba(0, 0, 0, .95);--color-ink-secondary: #31302e;--color-ink-muted: #615d59;--color-ink-faint: #a39e98;--color-on-primary: #ffffff;--color-error: #dd5b00;--color-error-bg: #fff4ed;--spacing-xxs: 4px;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 28px;--spacing-xxl: 32px;--rounded-xs: 4px;--rounded-md: 8px;--rounded-lg: 12px;--rounded-full: 9999px;--font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;--shadow-soft: rgba(0, 0, 0, .01) 0 .175px 1.041px, rgba(0, 0, 0, .02) 0 .8px 2.925px, rgba(0, 0, 0, .027) 0 2.025px 7.847px, rgba(0, 0, 0, .04) 0 4px 18px;--breakpoint-tablet: 768px;--breakpoint-mobile: 600px}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-family);font-size:16px;line-height:1.5;color:var(--color-ink);background:var(--color-canvas-soft);-webkit-font-smoothing:antialiased}button,input{font:inherit}.app-shell{display:flex;flex-direction:column;height:100%;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--color-canvas);border-bottom:1px solid var(--color-hairline)}.app-title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.125px}.app-main{display:flex;flex:1;min-height:0;gap:var(--spacing-md);padding:var(--spacing-md)}.app-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-hairline);border-radius:var(--rounded-lg);overflow:hidden}.app-panel__header{padding:var(--spacing-sm) var(--spacing-md);font-size:14px;font-weight:600;color:var(--color-ink-muted);border-bottom:1px solid var(--color-hairline)}.app-panel__body{flex:1;min-height:0;position:relative}@media(max-width:768px){.app-main{flex-direction:column}}.btn-primary{background:var(--color-primary);color:var(--color-on-primary);border:none;border-radius:var(--rounded-full);padding:8px 20px;font-weight:500;cursor:pointer}.btn-primary:hover:not(:disabled){background:var(--color-primary-active)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-utility{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);padding:4px 14px;font-weight:500;cursor:pointer}.btn-utility:hover:not(:disabled){box-shadow:var(--shadow-soft)}.btn-utility:disabled{opacity:.5;cursor:not-allowed}.text-input{width:100%;padding:6px;border:1px solid rgb(221,221,221);border-radius:var(--rounded-xs);font-size:15px;color:var(--color-ink);background:var(--color-surface)}.text-input:focus{outline:none;box-shadow:var(--shadow-soft)}.error-banner{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-error-bg);color:var(--color-error);font-size:14px;border-bottom:1px solid var(--color-hairline)}.loading-indicator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;font-size:14px;color:var(--color-ink-muted)}.modal-backdrop{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--spacing-md)}.modal-card{background:var(--color-surface);border-radius:var(--rounded-lg);padding:var(--spacing-lg);width:min(100%,420px);box-shadow:var(--shadow-soft)}.modal-card h2{margin:0 0 var(--spacing-md);font-size:22px;font-weight:700}.form-field{margin-bottom:var(--spacing-md)}.form-field label{display:block;margin-bottom:var(--spacing-xxs);font-size:14px;color:var(--color-ink-secondary)}.form-error{margin-top:var(--spacing-xxs);font-size:13px;color:var(--color-error)}.modal-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end;margin-top:var(--spacing-lg)}.checkbox-row{display:flex;align-items:center;gap:var(--spacing-xs);font-size:14px;color:var(--color-ink-secondary)}