:root{--bg-canvas:#f5f6fa;--bg-surface:#fff;--bg-surface-2:#fafbfc;--bg-elevated:#fff;--bg-muted:#f2f4f8;--bg-overlay:#0f172a8c;--ink-900:#0b1220;--ink-800:#14213d;--ink-700:#1f2a44;--ink-600:#3a4566;--ink-500:#5a6580;--ink-400:#828ca3;--ink-300:#a6aec2;--ink-200:#c7cddd;--ink-100:#e2e6f0;--ink-50:#f0f2f8;--brand-50:#eef1ff;--brand-100:#dce2ff;--brand-200:#b8c2ff;--brand-300:#8e9bff;--brand-400:#6470f0;--brand-500:#4f46e5;--brand-600:#4338ca;--brand-700:#3730a3;--accent-emerald:#059669;--accent-amber:#f59e0b;--accent-rose:#e11d48;--accent-sky:#0284c7;--shadow-xs:0 1px 2px #0f172a0a;--shadow-sm:0 2px 6px #0f172a0d, 0 1px 2px #0f172a0a;--shadow-md:0 8px 24px #0f172a14, 0 2px 6px #0f172a0a;--shadow-lg:0 24px 64px #0f172a1f, 0 8px 20px #0f172a0f;--shadow-glow:0 0 0 1px #4f46e52e, 0 8px 24px #4f46e52e;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--font-ui:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-display:"Fraunces", Georgia, serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--header-h:60px}*{box-sizing:border-box}body{background:var(--bg-canvas);color:var(--ink-800);font-family:var(--font-ui);font-feature-settings:"ss01", "cv11";font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;line-height:1.5}button{font-family:inherit}.app-header{background:var(--bg-surface);border-bottom:1px solid var(--ink-100);height:var(--header-h);justify-content:space-between;align-items:center;padding:0 20px;display:flex;position:relative}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand__mark{border-radius:8px;flex-shrink:0;width:30px;height:30px;display:block;box-shadow:0 4px 12px #4f46e559,inset 0 1px #fff6}.brand__text{flex-direction:column;min-width:0;line-height:1;display:flex}.brand__title{color:var(--ink-900);letter-spacing:-.005em;font-size:14px;font-weight:700}.brand__tag{color:var(--ink-400);letter-spacing:.02em;margin-top:3px;font-size:11px}.header-center{background:var(--bg-muted);border:1px solid var(--ink-100);border-radius:var(--radius-full);color:var(--ink-600);white-space:nowrap;align-items:center;gap:10px;padding:6px 12px 6px 8px;font-size:12.5px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header-center strong{color:var(--ink-800);font-weight:600}.header-center--demo{background:var(--ink-50)}.header-center--demo .status-pulse{background:var(--accent-amber);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-amber) 16%, transparent);animation:none}.header-center--user{background:var(--brand-50);border-color:var(--brand-100)}.status-pulse{background:var(--accent-emerald);border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:2s ease-in-out infinite pulse;box-shadow:0 0 0 4px #05966926}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.header-actions{align-items:center;gap:4px;display:flex}.avatar{background:linear-gradient(135deg, var(--brand-500), var(--brand-600));color:var(--bg-surface);height:30px;transition:transform .15s var(--ease-out);border-radius:50%;place-items:center;width:30px;margin-left:6px;padding:0;font-size:12px;font-weight:700;display:grid;box-shadow:0 2px 6px #4f46e54d}@media (width<=920px){.header-center,.brand__tag{display:none}}.btn{border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:var(--space-2);min-height:40px;transition:background .12s var(--ease-out), border-color .12s var(--ease-out), box-shadow .18s var(--ease-out), color .12s var(--ease-out), transform .18s var(--ease-out);border:1px solid #0000;justify-content:center;padding:11px 16px;font-size:13.5px;font-weight:600;line-height:1;display:inline-flex}.btn--primary{background:linear-gradient(135deg, var(--brand-500) 0%, #7c3aed 60%, #db2777 130%);box-shadow:var(--shadow-sm);color:var(--bg-surface)}.btn--primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn--ghost{color:var(--ink-500);background:0 0}.btn--ghost:hover{background:var(--bg-muted);color:var(--ink-800)}.btn:disabled{cursor:progress;filter:grayscale(.3);opacity:.55}.btn:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}.app-shell{min-height:calc(100vh - var(--header-h));grid-template-columns:332px 1fr;display:grid}.sidebar{background:var(--bg-surface-2);border-right:1px solid var(--ink-100);gap:var(--space-3);max-height:calc(100vh - var(--header-h));flex-direction:column;min-height:0;padding:18px 18px 16px;display:flex;overflow:auto}.sidebar__intro{gap:var(--space-2);display:grid}.sidebar h1{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:21px;font-weight:500;line-height:1}.sidebar h1 em{color:var(--brand-500);font-style:italic}.sidebar p{color:var(--ink-500);margin:0;font-size:13.5px;line-height:1.42}.uploader{background:var(--bg-muted);border:2px solid var(--ink-100);border-radius:var(--radius-lg);color:var(--ink-600);cursor:pointer;align-items:center;gap:var(--space-2);text-align:center;min-height:124px;transition:background .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);justify-items:center;padding:16px;display:grid}.uploader:hover{background:var(--bg-muted);border-color:var(--brand-300)}.uploader.is-dragging{background:var(--brand-50);border-color:var(--brand-500);transform:scale(1.01)}.uploader.is-loaded{background:var(--bg-muted);border:2px solid var(--ink-100)}.uploader__icon{background:color-mix(in srgb, var(--accent-emerald) 16%, white);border-radius:var(--radius-lg);color:var(--accent-emerald);place-items:center;width:42px;height:42px;display:grid}.uploader__icon svg{width:21px;height:21px}.uploader__title{color:var(--ink-800);font-size:15px;font-weight:700;line-height:1.1}.uploader__hint{color:var(--ink-400);overflow-wrap:anywhere;font-size:12px;line-height:1.4}.uploader:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}.stats-card{background:var(--bg-surface);border:1px solid var(--ink-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);gap:var(--space-2);grid-template-columns:repeat(3,1fr);min-height:58px;padding:10px;display:grid}.stat{text-align:center;flex-direction:column-reverse;justify-content:center;gap:2px;min-width:0;display:flex;position:relative}.stat+.stat:before{background:var(--ink-100);content:"";width:1px;height:34px;position:absolute;top:50%;left:-4px;transform:translateY(-50%)}.stat span{color:var(--ink-400);letter-spacing:.05em;text-transform:uppercase;font-size:10px;font-weight:700}.stat strong{color:var(--ink-900);font-family:var(--font-ui);font-size:18px;font-weight:800;line-height:1}.metadata-panel{background:var(--bg-surface);border:1px solid var(--ink-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);flex-direction:column;flex:auto;min-height:280px;max-height:clamp(280px,56vh,760px);display:flex;overflow:hidden}.metadata-panel__head{border-bottom:1px solid var(--ink-100);align-items:center;gap:var(--space-2);flex:none;min-height:44px;padding:0 18px;display:flex}.metadata-panel__icon{color:var(--ink-400);place-items:center;width:18px;height:18px;display:grid}.metadata-panel__icon svg{width:18px;height:18px}.metadata-panel h2{color:var(--ink-800);letter-spacing:.04em;text-transform:uppercase;flex:1;margin:0;font-size:14px;font-weight:800}.metadata-panel__badge{background:var(--brand-50);border-radius:var(--radius-full);color:var(--brand-600);font-family:var(--font-ui);text-align:center;min-width:26px;padding:2px 7px;font-size:12px;font-weight:800}.metadata-fields{min-height:0;padding:0 18px 18px;display:block;overflow:auto}.field{border-bottom:1px solid var(--ink-100);gap:var(--space-2);padding:9px 0 10px;display:grid}.field__label{color:var(--ink-400);letter-spacing:.05em;text-transform:uppercase;font-size:10px;font-weight:800}.field__value{align-items:center;gap:var(--space-4);background:0 0;border:0;min-width:0;padding:0;display:flex}.field__value:focus-within{box-shadow:none}.field input{color:var(--ink-800);font:inherit;background:0 0;border:0;outline:0;flex:1;min-width:0;min-height:24px;padding:0;font-size:13.5px;font-weight:500;line-height:1.25}.field__edit{color:var(--ink-300);opacity:1;transition:opacity .12s var(--ease-out), color .12s var(--ease-out);place-items:center;display:grid}.field:hover .field__edit,.field__value:focus-within .field__edit{opacity:1}.field__edit svg{width:15px;height:15px}.field__value:focus-within .field__edit{color:var(--brand-500)}.sidebar__footer{gap:var(--space-3);margin-top:auto;padding-top:40px;display:grid}.actions{gap:var(--space-2);display:grid}.app-version{border-top:1px solid var(--ink-100);color:var(--ink-400);font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;padding-top:var(--space-3);text-align:center;font-size:10.5px}.toast{animation:toast-enter .24s var(--ease-out);background:var(--ink-900);border-left:3px solid var(--accent-sky);border-radius:var(--radius-md);bottom:var(--space-6);box-shadow:var(--shadow-lg);color:var(--bg-surface);align-items:center;gap:var(--space-3);max-width:min(420px,100vw - 32px);right:var(--space-6);z-index:20;padding:12px 12px 12px 14px;font-size:13.5px;font-weight:600;display:flex;position:fixed}.toast--success{border-left-color:var(--accent-emerald)}.toast--error{border-left-color:var(--accent-rose)}.toast__icon{color:var(--accent-sky);font-family:var(--font-mono)}.toast--success .toast__icon{color:var(--accent-emerald)}.toast--error .toast__icon{color:var(--accent-rose)}.toast button{color:var(--ink-300);cursor:pointer;font:inherit;background:0 0;border:0;margin-left:auto;padding:2px 4px;font-size:16px;line-height:1}.toast button:hover{color:var(--bg-surface)}@keyframes toast-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.render-status{background:var(--bg-surface);border:1px solid var(--ink-100);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);color:var(--ink-600);align-items:center;gap:var(--space-2);width:max-content;margin:-2px auto 14px;padding:7px 12px;font-size:12.5px;font-weight:600;display:flex}.render-status__dot{background:var(--accent-sky);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-sky) 14%, transparent);border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite pulse}.render-status--warning{color:var(--ink-700)}.render-status--warning .render-status__dot{background:var(--accent-amber);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-amber) 16%, transparent);animation:none}.preview-wrap{height:calc(100vh - var(--header-h));padding:12px 32px 32px;position:relative;overflow:auto}.preview-toolbar{-webkit-backdrop-filter:saturate(180%)blur(20px);backdrop-filter:saturate(180%)blur(20px);border:1px solid var(--ink-100);box-shadow:var(--shadow-md);color:var(--ink-500);align-items:center;gap:var(--space-2);z-index:5;background:#fffffff0;border-radius:14px;width:max-content;max-width:max-content;margin:0 auto 18px;padding:7px 9px;font-size:12px;display:flex;position:sticky;top:8px}.preview-toolbar__label,.preview-toolbar__number,.preview-toolbar__total{color:var(--ink-800);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:center;font-size:13px;font-weight:700}.preview-toolbar__label{color:var(--ink-400);font-family:var(--font-ui);letter-spacing:.04em;font-size:12px;font-weight:800}.preview-toolbar__slash{color:var(--ink-300);text-align:center;min-width:8px;font-size:13px;font-weight:700}.preview-toolbar__divider{background:var(--ink-100);width:1px;height:26px}.preview-toolbar button{color:var(--ink-500);cursor:pointer;font:inherit;background:0 0;border:1px solid #0000;border-radius:8px;place-items:center;width:28px;height:28px;padding:0;font-size:13px;font-weight:700;display:grid}.preview-toolbar button svg{width:14px;height:14px}.preview-toolbar button:hover{background:var(--bg-muted);color:var(--ink-800)}.preview-toolbar button:focus-visible{border-color:var(--brand-300);outline:none}.preview-scale{transform-origin:top;width:max-content;margin:0 auto}@media (width<=920px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;max-height:none}.preview-wrap{height:auto;padding:64px 16px 16px}.paged-output{overflow-x:auto}}