.markcraft-root{--bg:#f3f4f6;--bg-panel:#ffffff;--bg-elevated:#ffffff;--bg-input:#eef0f3;--bg-hover:#e8eaee;--bg-active:#e0e3e9;--border:#e2e5eb;--border-strong:#c8cdd6;--border-focus:#238f82;--ink:#14161c;--ink-secondary:#525866;--ink-muted:#8a919e;--ink-inverse:#ffffff;--accent:#1f8a7d;--accent-hover:#1a7a6e;--accent-pressed:#16695f;--accent-muted:rgba(31,138,125,0.1);--accent-ring:rgba(31,138,125,0.28);--accent-soft:#1f8a7d;--danger:#c94f4f;--danger-muted:rgba(201,79,79,0.1);--success:#2f9a64;--success-muted:rgba(47,154,100,0.1);--canvas-void:#e8eaee;--checker-a:#dfe2e8;--checker-b:#eef0f3;--shadow-sm:0 1px 2px rgba(20,22,28,0.06);--shadow-md:0 8px 24px rgba(20,22,28,0.08);--shadow-canvas:0 16px 40px rgba(20,22,28,0.12);--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--ease-out:cubic-bezier(0.23,1,0.32,1);--duration-fast:140ms;--duration:180ms;--font-ui:"IBM Plex Sans","Noto Sans TC",system-ui,-apple-system,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;--header-h:56px;--panel-rail-w:64px;--panel-main-w:300px;--panel-w:calc(var(--panel-rail-w) + var(--panel-main-w));--toolbar-h:48px;--footer-h:auto;--mobile-rail-h:60px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--bg-dark:var(--bg);--bg-card:var(--bg-panel);--bg-card-solid:var(--bg-elevated);--border-color:var(--border);--text-main:var(--ink);--text-muted:var(--ink-secondary);--text-dim:var(--ink-muted);--accent-primary:var(--accent);--accent-secondary:var(--accent);--accent-cyan:var(--accent-soft);--accent-pink:var(--danger);--accent-gold:#d4a24c;--shadow-glow:none;--glass-backdrop:none}.markcraft-root[data-theme=dark]{--bg:#0b0c0f;--bg-panel:#101218;--bg-elevated:#161920;--bg-input:#1a1d26;--bg-hover:#1e222c;--bg-active:#242834;--border:#262a34;--border-strong:#363b48;--border-focus:#2a9d8f;--ink:#eceef2;--ink-secondary:#a0a6b2;--ink-muted:#6b7180;--ink-inverse:#0b0c0f;--accent:#2a9d8f;--accent-hover:#34b3a3;--accent-pressed:#238f82;--accent-muted:rgba(42,157,143,0.14);--accent-ring:rgba(42,157,143,0.35);--accent-soft:#5ecfbf;--danger:#e07a7a;--danger-muted:rgba(224,122,122,0.12);--success:#5cb88a;--success-muted:rgba(92,184,138,0.14);--canvas-void:#08090c;--checker-a:#1a1d24;--checker-b:#12141a;--shadow-sm:0 1px 2px rgba(0,0,0,0.35);--shadow-md:0 8px 24px rgba(0,0,0,0.4);--shadow-canvas:0 16px 48px rgba(0,0,0,0.55)}.markcraft-root *,.markcraft-root :after,.markcraft-root :before{box-sizing:border-box}.markcraft-root{font-family:var(--font-ui);font-size:14px;font-weight:400;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100dvh;color-scheme:light}.markcraft-root[data-theme=dark]{color-scheme:dark}.markcraft-root button,.markcraft-root input,.markcraft-root select,.markcraft-root textarea{font:inherit;color:inherit}.markcraft-root button{cursor:pointer;border:none;background:none}.markcraft-root button:disabled{opacity:.5;cursor:not-allowed}.markcraft-root img{display:block;max-width:100%}.markcraft-root :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.markcraft-root button:focus:not(:focus-visible),.markcraft-root input:focus:not(:focus-visible),.markcraft-root select:focus:not(:focus-visible){outline:none}.markcraft-root ::-webkit-scrollbar{width:8px;height:8px}.markcraft-root ::-webkit-scrollbar-track{background:transparent}.markcraft-root ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:padding-box}.markcraft-root ::-webkit-scrollbar-thumb:hover{background:var(--ink-muted);border:2px solid transparent;background-clip:padding-box}.app-container{display:flex;flex-direction:column;min-height:100dvh;height:100dvh;max-height:100dvh;background:var(--bg);overflow:hidden;padding-top:var(--safe-top)}.app-header{height:var(--header-h);min-height:var(--header-h);border-bottom:1px solid var(--border);background:var(--bg-panel);justify-content:space-between;gap:var(--space-4);padding:0 var(--space-5);position:sticky;top:0;z-index:40;flex-shrink:0}.app-header,.logo-group{display:flex;align-items:center}.logo-group{gap:var(--space-3);min-width:0;flex-shrink:1}.logo-mark{width:32px;height:32px;border-radius:var(--radius-md);background:var(--accent-muted);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);display:flex;align-items:center;justify-content:center;color:var(--accent-soft);flex-shrink:0}.logo-mark svg{width:16px;height:16px}.brand-stack{display:flex;flex-direction:column;gap:0;min-width:0}.brand-title{font-size:.9375rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2;white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--ink-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.brand-tag{display:inline-flex;align-items:center;font-size:.625rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:var(--radius-sm);background:var(--accent-muted);color:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);margin-left:6px;vertical-align:middle}.header-center{flex:1;display:flex;justify-content:center;min-width:0}.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.seg-control{padding:3px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);gap:2px}.seg-btn,.seg-control{display:inline-flex;align-items:center}.seg-btn{justify-content:center;gap:6px;padding:6px 12px;font-size:.8125rem;font-weight:500;color:var(--ink-muted);border-radius:calc(var(--radius-md) - 2px);border:none;background:transparent;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);white-space:nowrap}.seg-btn svg{width:14px;height:14px;flex-shrink:0;opacity:.85}.seg-btn:hover{color:var(--ink-secondary);background:var(--bg-hover)}.seg-btn.active{color:var(--ink);background:var(--bg-elevated);box-shadow:var(--shadow-sm);border:1px solid var(--border)}.seg-btn.active svg{color:var(--accent-soft);opacity:1}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-md);color:var(--ink-secondary);background:transparent;border:1px solid transparent;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.btn-icon:hover{color:var(--ink);background:var(--bg-hover);border-color:var(--border)}.btn-icon:active{transform:scale(.97)}.btn-icon svg{width:16px;height:16px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;height:34px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;font-size:.8125rem;box-shadow:none;transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:active:not(:disabled){background:var(--accent-pressed);transform:scale(.98)}.btn-primary svg{width:15px;height:15px}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;height:34px;background:var(--bg-input);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-md);font-weight:500;font-size:.8125rem;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}.btn-secondary:active:not(:disabled){transform:scale(.98)}.btn-secondary.is-selected{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:var(--accent-muted);color:var(--ink)}.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:34px;color:var(--ink-secondary);font-size:.8125rem;font-weight:500;border-radius:var(--radius-md);transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.btn-ghost:hover{color:var(--ink);background:var(--bg-hover)}.btn-danger-text{color:var(--danger);font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border-radius:var(--radius-sm)}.btn-danger-text:hover{background:var(--danger-muted)}.btn-sm{height:30px;padding:0 10px;font-size:.75rem}.btn-lg{height:40px;padding:0 18px;font-size:.875rem}.btn-block{width:100%}.workspace-grid{display:grid;grid-template-columns:var(--panel-w) 1fr;flex:1;min-height:0;height:calc(100dvh - var(--header-h) - var(--safe-top));overflow:hidden}.sheet-close-btn,.sheet-handle{display:none}.controls-panel{flex-direction:row;height:100%;min-height:0;overflow:hidden}.controls-panel,.panel-rail{background:var(--bg-panel);border-right:1px solid var(--border);display:flex}.panel-rail{width:var(--panel-rail-w);flex-shrink:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px 6px;overflow-y:auto;scrollbar-width:none}.panel-rail::-webkit-scrollbar{display:none}.rail-tab{flex-direction:column;gap:4px;min-height:56px;padding:8px 4px;border:none;border-radius:10px;background:transparent;color:var(--ink-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.rail-tab,.rail-tab-icon{display:flex;align-items:center;justify-content:center}.rail-tab-icon{width:28px;height:28px;border-radius:8px;transition:background var(--duration-fast) var(--ease-out)}.rail-tab-icon svg{width:18px;height:18px}.rail-tab-label{font-size:.625rem;font-weight:600;line-height:1.15;text-align:center;letter-spacing:.01em}.rail-tab:hover{color:var(--ink);background:var(--bg-hover)}.rail-tab.active{color:var(--accent);background:var(--accent-muted)}.rail-tab.active .rail-tab-icon{background:color-mix(in srgb,var(--accent) 14%,transparent)}.panel-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);min-height:0}.panel-main-header{flex-shrink:0;height:44px;padding:0 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);background:var(--bg-panel);position:relative}.panel-main-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);flex:1;min-width:0}.tab-body{flex:1;overflow-y:auto;scrollbar-width:thin}.panel-block,.tab-body{padding:12px;display:flex;flex-direction:column;gap:10px}.panel-block{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}.panel-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}.panel-block-title{margin:0;font-size:.75rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}.panel-hint{margin:0;line-height:1.4}.field{display:flex;flex-direction:column;gap:6px}.field-row{gap:var(--space-3)}.field-label,.field-row{display:flex;align-items:center;justify-content:space-between}.field-label{font-size:.75rem;font-weight:600;color:var(--ink-secondary);gap:var(--space-2)}.field-label-row{display:flex;align-items:center;gap:6px}.field-hint{font-size:.6875rem;font-weight:400;color:var(--ink-muted)}.field-section{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}.field-section:first-child{padding-top:0;border-top:none}.section-title{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}.prop-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "control control";align-items:center;column-gap:8px;row-gap:6px}.prop-label{grid-area:label;display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--ink-secondary);min-width:0}.prop-row .slider-val{grid-area:value}.prop-control{grid-area:control;width:100%}.prop-row-toggle{grid-template-columns:1fr auto;grid-template-areas:"label value";min-height:28px}.prop-row-toggle .toggle-switch{grid-area:value}.select-input,.text-input{width:100%;height:36px;padding:0 11px;background:var(--bg-input);border:1px solid transparent;border-radius:8px;color:var(--ink);font-size:.8125rem;outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.text-input.text-area,textarea.text-input{height:auto;min-height:72px;padding:8px 11px;line-height:1.45;resize:vertical;font-family:inherit;field-sizing:content}.text-input::placeholder{color:var(--ink-muted)}.select-input:hover,.text-input:hover{border-color:var(--border);background:var(--bg-hover)}.select-input:focus,.text-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-ring);background:var(--bg-elevated)}.select-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}.slider-row{display:flex;align-items:center;gap:10px}.range-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--radius-pill);background:var(--bg-active);outline:none;cursor:pointer}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 3px rgba(20,22,28,.18);cursor:grab;transition:transform var(--duration-fast) var(--ease-out)}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.12)}.range-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}.range-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 3px rgba(20,22,28,.18);cursor:grab}.slider-val{min-width:40px;text-align:right;font-size:.6875rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-secondary);background:var(--bg-input);padding:3px 7px;border-radius:6px;border:none}.presets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.preset-card{border:1px solid transparent;background:var(--bg-input);border-radius:10px;padding:8px 4px 7px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;min-width:0;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.preset-card:hover{background:var(--bg-hover);box-shadow:var(--shadow-sm)}.preset-card:active{transform:scale(.97)}.preset-card.active{border-color:var(--accent);background:var(--accent-muted);box-shadow:0 0 0 1px var(--accent)}.preset-icon{font-size:.9375rem;line-height:1;opacity:.92}.preset-title{font-size:.5625rem;font-weight:600;color:var(--ink-secondary);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pos-btn{height:32px;font-size:.6875rem;font-weight:600;color:var(--ink-secondary);background:var(--bg-input);border:1px solid transparent;border-radius:8px;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.pos-btn:hover{color:var(--ink);background:var(--bg-hover)}.pos-btn:active{transform:scale(.98)}.pos-btn.active{color:var(--accent);background:var(--accent-muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}.color-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.swatch-btn{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.swatch-btn:hover{transform:scale(1.1)}.swatch-btn:active{transform:scale(.96)}.swatch-btn.active{box-shadow:0 0 0 2px var(--bg-panel),0 0 0 4px var(--accent)}.color-picker{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);background:transparent;cursor:pointer;padding:2px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.gradient-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gradient-preset-btn{height:28px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.gradient-preset-btn:hover{transform:scale(1.05)}.gradient-preset-btn:active{transform:scale(.97)}.gradient-preset-btn.active{box-shadow:0 0 0 2px var(--bg-panel),0 0 0 4px var(--accent)}.hex-label{font-size:.75rem;font-family:var(--font-mono);color:var(--ink-muted)}.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg-active);transition:background var(--duration) var(--ease-out);border-radius:var(--radius-pill);border:1px solid var(--border)}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;top:2px;background:var(--ink-secondary);transition:transform var(--duration) var(--ease-out),background var(--duration) var(--ease-out);border-radius:50%}input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}input:checked+.toggle-slider:before{transform:translateX(18px);background:#fff}input:focus-visible+.toggle-slider{outline:2px solid var(--border-focus);outline-offset:2px}.logo-row{display:flex;align-items:flex-start;gap:10px}.logo-preview{width:48px;height:48px;border-radius:10px;border:1px dashed var(--border-strong);background:var(--bg-input);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.logo-preview:hover{border-color:var(--accent);border-style:solid;background:var(--accent-muted)}.logo-preview img{width:100%;height:100%;object-fit:contain;padding:4px}.logo-preview svg{width:18px;height:18px;color:var(--ink-muted)}.logo-actions{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.sample-logos{gap:6px;flex-wrap:wrap}.sample-logo-btn,.sample-logos{display:flex;align-items:center}.sample-logo-btn{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border);justify-content:center;transition:border-color var(--duration-fast) var(--ease-out)}.sample-logo-btn:hover{border-color:var(--border-strong)}.sample-logo-btn.active{border-color:var(--accent);background:var(--accent-muted)}.sample-logo-btn img{width:16px;height:16px}.chip-row{display:grid;grid-template-columns:1fr 1fr;gap:4px}.chip-row-3{grid-template-columns:1fr 1fr 1fr}.seg-control-fill{padding:3px;background:var(--bg-input);border-radius:10px;gap:2px}.seg-control-fill .chip-btn{height:30px;border:none;background:transparent;border-radius:8px;box-shadow:none}.seg-control-fill .chip-btn:hover{background:color-mix(in srgb,var(--bg-hover) 80%,transparent)}.seg-control-fill .chip-btn.active{background:var(--bg-panel);color:var(--ink);box-shadow:var(--shadow-sm);border:none}.chip-btn{height:34px;font-size:.75rem;font-weight:600;color:var(--ink-secondary);background:var(--bg-input);border:1px solid transparent;border-radius:8px;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.chip-btn:hover{color:var(--ink);background:var(--bg-hover)}.chip-btn:active{transform:scale(.98)}.chip-btn.active{color:var(--accent)}.effect-row{margin-top:2px;margin-bottom:4px}.chip-btn.active{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 50%,var(--border));background:var(--accent-muted)}.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.font-preview{margin-top:4px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-input);display:flex;flex-direction:column;gap:6px;min-height:64px}.font-preview-text{font-size:1.25rem;font-weight:600;line-height:1.35;color:var(--ink);word-break:break-word;letter-spacing:.01em}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.stage-panel{display:flex;flex-direction:column;background:var(--canvas-void);position:relative;overflow:hidden;min-height:0}.stage-toolbar{height:var(--toolbar-h);min-height:var(--toolbar-h);border-bottom:1px solid var(--border);background:var(--bg-panel);justify-content:space-between;padding:0 var(--space-4)}.stage-meta,.stage-toolbar{display:flex;align-items:center;gap:var(--space-3)}.stage-meta{min-width:0}.stage-title{font-size:.8125rem;font-weight:500;color:var(--ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-sm);font-size:.6875rem;font-weight:500;font-family:var(--font-mono);font-variant-numeric:tabular-nums;background:var(--bg-input);border:1px solid var(--border)}.drag-hint,.meta-pill{color:var(--ink-muted);white-space:nowrap}.drag-hint{font-size:.6875rem}.stage-tools{gap:8px;flex-shrink:0}.stage-tools,.zoom-control{display:flex;align-items:center}.zoom-control{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);height:30px;overflow:hidden}.zoom-control button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;color:var(--ink-muted);transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.zoom-control button:hover{color:var(--ink);background:var(--bg-hover)}.zoom-control button svg{width:14px;height:14px}.zoom-value{font-size:.6875rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;width:40px;text-align:center;color:var(--ink-secondary);border-left:1px solid var(--border);border-right:1px solid var(--border);line-height:28px}.canvas-viewport{flex:1;justify-content:center;padding:var(--space-6);position:relative;overflow:auto;min-height:0;background-color:var(--canvas-void);background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 0);background-size:20px 20px}.canvas-viewport,.coords-badge{display:flex;align-items:center}.coords-badge{position:absolute;top:16px;left:16px;z-index:20;gap:8px;padding:6px 12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--bg-elevated) 92%,transparent);border:1px solid var(--border);font-family:var(--font-mono);font-size:.75rem;color:var(--accent-soft);pointer-events:none;box-shadow:var(--shadow-sm)}.coords-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.canvas-wrapper{position:relative;box-shadow:var(--shadow-canvas);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease-out);transform-origin:center center}.canvas-checkerboard{background-color:var(--checker-b);background-image:linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.canvas-solid{background:#0f1116}.markcraft-root[data-theme=light] .canvas-solid{background:#1a1d24}.markcraft-root canvas{display:block;max-width:100%;height:auto;object-fit:contain}.overlay-bar{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);background:var(--bg-panel);flex-wrap:wrap;gap:var(--space-4)}.dropzone,.overlay-bar{display:flex;align-items:center}.dropzone{flex:1;min-width:200px;border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:10px 14px;cursor:pointer;background:var(--bg-input);gap:12px;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}.dropzone.active,.dropzone:hover{border-color:var(--accent);border-style:solid;background:var(--accent-muted)}.dropzone-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent-muted);color:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}.dropzone-icon svg{width:16px;height:16px}.dropzone-text{min-width:0}.dropzone-title{font-size:.8125rem;font-weight:500;color:var(--ink);line-height:1.3}.dropzone-sub{font-size:.6875rem;color:var(--ink-muted);margin-top:1px}.stock-picker{display:flex;flex-direction:column;gap:6px}.stock-label{font-size:.6875rem;font-weight:500;color:var(--ink-muted)}.stock-row{display:flex;gap:6px}.stock-thumb{width:52px;height:36px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);cursor:pointer;padding:0;background:var(--bg-input);transition:border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.stock-thumb:hover{border-color:var(--border-strong);transform:scale(1.04)}.stock-thumb.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.stock-thumb img{width:100%;height:100%;object-fit:cover}.stock-thumb.in-queue{border-color:var(--accent);opacity:.85}.dropzone-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.meta-pill-count{font-variant-numeric:tabular-nums}.overlay-gallery{flex:1 1 100%;display:flex;flex-direction:column;gap:8px;min-width:0}.overlay-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.overlay-gallery-label{font-size:.6875rem;font-weight:500;color:var(--ink-muted);font-variant-numeric:tabular-nums}.overlay-clear-btn{font-size:.6875rem;padding:2px 8px;gap:4px;color:var(--ink-muted)}.overlay-clear-btn:hover{color:var(--danger)}.overlay-gallery-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.overlay-thumb-wrap{position:relative;flex-shrink:0}.overlay-thumb{width:64px;height:48px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);cursor:pointer;padding:0;background:var(--bg-input);display:block;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.overlay-thumb img{width:100%;height:100%;object-fit:cover;display:block}.overlay-thumb-wrap.active .overlay-thumb{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.overlay-thumb-index{position:absolute;left:3px;bottom:3px;font-size:.5625rem;font-weight:600;font-family:var(--font-mono);line-height:1;padding:2px 4px;border-radius:3px;background:rgba(20,22,28,.72);color:#fff;pointer-events:none}.overlay-thumb-remove{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:999px;border:1px solid var(--border);background:var(--bg-panel);color:var(--ink-secondary);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.overlay-thumb-wrap.active .overlay-thumb-remove,.overlay-thumb-wrap:focus-within .overlay-thumb-remove,.overlay-thumb-wrap:hover .overlay-thumb-remove{opacity:1}.overlay-thumb-remove:hover{background:var(--danger-muted);color:var(--danger);border-color:var(--danger)}.export-progress{font-size:.75rem;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}.stage-footer{padding:12px var(--space-5);border-top:1px solid var(--border);background:var(--bg-panel);justify-content:space-between;gap:var(--space-3)}.footer-left,.footer-right,.stage-footer{display:flex;align-items:center;flex-wrap:wrap}.footer-left,.footer-right{gap:8px}.tag-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-sm);font-size:.6875rem;font-weight:500;font-family:var(--font-mono);background:var(--bg-input);color:var(--ink-muted);border:1px solid var(--border)}@media (prefers-reduced-motion:reduce){.markcraft-root *,.markcraft-root :after,.markcraft-root :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width:900px){.markcraft-root{--header-h:48px;--toolbar-h:40px}.app-header{padding:0 10px;gap:8px}.brand-subtitle,.brand-tag,.logo-mark{display:none}.brand-title{font-size:.875rem}.header-center{flex:1;min-width:0;justify-content:center}.header-center .seg-control{width:100%;max-width:220px}.header-center .seg-btn{flex:1;padding:0 8px;height:32px;font-size:.6875rem;gap:4px}.header-center .seg-btn span{display:none}.header-center .seg-btn svg{width:16px;height:16px}.header-actions{gap:2px}.header-actions .btn-ghost span,.header-actions .btn-primary span{display:none}.header-actions .btn-ghost{padding:0 8px;min-width:36px}.header-actions .btn-primary{padding:0 10px;min-width:36px;height:34px}.workspace-grid{display:flex;flex-direction:column;height:calc(100dvh - var(--header-h) - var(--safe-top));max-height:calc(100dvh - var(--header-h) - var(--safe-top));overflow:hidden}.stage-panel{order:1;flex:1 1 auto;min-height:0;min-width:0}.controls-panel{order:2;flex:0 0 auto;flex-direction:column-reverse;border-right:none;border-top:1px solid var(--border);background:var(--bg-panel);box-shadow:0 -8px 28px rgba(20,22,28,.1);z-index:30;max-height:min(58dvh,480px)}.controls-panel.sheet-collapsed{max-height:none}.controls-panel.sheet-collapsed .panel-main{display:none}.panel-rail{width:100%;height:calc(var(--mobile-rail-h) + var(--safe-bottom));min-height:calc(var(--mobile-rail-h) + var(--safe-bottom));flex-direction:row;align-items:stretch;justify-content:space-around;gap:0;padding:4px 6px calc(4px + var(--safe-bottom));border-right:none;border-top:1px solid var(--border);background:var(--bg-panel);overflow:visible}.rail-tab{flex:1 1 0;min-width:0;min-height:52px;border-radius:10px;gap:2px;padding:6px 2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.rail-tab-icon{width:32px;height:32px}.rail-tab-icon svg{width:20px;height:20px}.rail-tab-label{font-size:.625rem;font-weight:600}.rail-tab.active.sheet-active{color:var(--accent);background:var(--accent-muted)}.panel-main{width:100%;max-height:min(42dvh,360px);border-radius:16px 16px 0 0;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--border);animation:markcraft-sheet-up .18s var(--ease-out)}@keyframes markcraft-sheet-up{0%{opacity:.6;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.panel-main-header{height:auto;min-height:40px;flex-wrap:wrap;padding:6px 12px 8px;justify-content:center;background:var(--bg-panel)}.sheet-handle{display:flex;align-items:center;justify-content:center;width:100%;height:18px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;order:-1}.sheet-handle-bar{display:block;width:36px;height:4px;border-radius:99px;background:var(--border-strong)}.panel-main-title{text-align:left;font-size:.8125rem}.sheet-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:var(--bg-input);color:var(--ink-secondary);cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}.sheet-close-btn svg{width:18px;height:18px}.sheet-close-btn:active{background:var(--bg-hover)}.tab-body{padding:10px 12px calc(12px + var(--safe-bottom) * 0);max-height:min(36dvh,300px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.panel-block{padding:10px;border-radius:12px;gap:8px}.select-input,.text-input{height:40px;font-size:16px}.text-input.text-area,textarea.text-input{min-height:80px;font-size:16px}.chip-btn,.pos-btn{min-height:36px}.btn-primary,.btn-secondary,.chip-btn,.overlay-thumb,.pos-btn,.preset-card,.rail-tab,.stock-thumb{touch-action:manipulation}.stage-toolbar{padding:0 10px;gap:8px}.stage-title{font-size:.75rem;max-width:42vw}.drag-hint{display:none!important}.stage-tools .btn-secondary span{display:none}.canvas-viewport{padding:8px}.overlay-bar{padding:8px 10px;gap:10px;flex-direction:column;align-items:stretch}.dropzone{min-width:0;padding:10px 12px}.stock-picker{width:100%}.stock-row{overflow-x:auto;padding-bottom:2px}.overlay-gallery-row,.stock-row{-webkit-overflow-scrolling:touch}.stage-footer{padding:8px 10px calc(8px + var(--safe-bottom) * 0);gap:8px}.footer-left,.footer-right{gap:6px}.stage-footer .btn-primary,.stage-footer .btn-secondary{height:36px;padding:0 10px;font-size:.75rem}.stage-footer .btn-lg{height:36px}}@media (max-width:480px){.footer-left,.header-action-secondary,.meta-pill-count{display:none}.stage-footer{justify-content:stretch}.footer-right{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}.footer-right .btn-primary,.footer-right .btn-secondary{width:100%;justify-content:center}.footer-right:has(>:nth-child(3)){grid-template-columns:1fr 1fr}}