:root{--font-main: "Inter", system-ui, -apple-system, sans-serif;--bg-app: #0f172a;--bg-panel: rgba(30, 41, 59, .7);--bg-panel-solid: #1e293b;--bg-card: rgba(255, 255, 255, .03);--bg-card-hover: rgba(255, 255, 255, .07);--accent: #3b82f6;--accent-hover: #2563eb;--accent-soft: rgba(59, 130, 246, .15);--text-main: #f8fafc;--text-dim: #94a3b8;--text-muted: #64748b;--border: rgba(255, 255, 255, .1);--border-focus: rgba(59, 130, 246, .5);--radius-lg: 16px;--radius-md: 10px;--radius-sm: 6px;--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .4);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--glass-blur: 12px;--layout-radial-from: #1e293b;--layout-radial-to: #0f172a;--header-bg: rgba(15, 23, 42, .8);--input-bg: rgba(0, 0, 0, .3);--input-bg-focus: rgba(0, 0, 0, .4);--tab-bg: rgba(0, 0, 0, .2);--scrollbar-thumb: rgba(255, 255, 255, .1);--scrollbar-thumb-hover: rgba(255, 255, 255, .2);--danger: #f87171;--success: #4ade80;--info: #60a5fa}:root[data-theme=light]{--bg-app: #f1f5f9;--bg-panel: rgba(255, 255, 255, .82);--bg-panel-solid: #ffffff;--bg-card: rgba(15, 23, 42, .04);--bg-card-hover: rgba(15, 23, 42, .08);--accent-soft: rgba(59, 130, 246, .12);--text-main: #0f172a;--text-dim: #334155;--text-muted: #64748b;--border: rgba(15, 23, 42, .15);--border-focus: rgba(59, 130, 246, .45);--shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, .25), 0 4px 8px -4px rgba(15, 23, 42, .2);--layout-radial-from: #e2e8f0;--layout-radial-to: #f8fafc;--header-bg: rgba(248, 250, 252, .88);--input-bg: rgba(148, 163, 184, .16);--input-bg-focus: rgba(148, 163, 184, .24);--tab-bg: rgba(148, 163, 184, .18);--scrollbar-thumb: rgba(15, 23, 42, .15);--scrollbar-thumb-hover: rgba(15, 23, 42, .25);--danger: #dc2626;--success: #16a34a;--info: #2563eb}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-app);color:var(--text-main);overflow:hidden;-webkit-font-smoothing:antialiased}.layout{position:relative;width:100vw;height:100vh;display:flex;background-image:radial-gradient(circle at 50% 50%,var(--layout-radial-from) 0%,var(--layout-radial-to) 100%)}.viewport{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.sidebar{position:absolute;top:80px;bottom:20px;left:20px;width:320px;z-index:20;background:var(--bg-panel);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);transition:all .3s cubic-bezier(.4,0,.2,1)}.sidebar--right{left:auto;right:20px}.sidebar-header{padding:16px 20px;border-bottom:1px solid var(--border)}.sidebar-header h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.sidebar-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.main-header{position:absolute;top:0;left:0;right:0;height:64px;background:var(--header-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:100;display:flex;align-items:center;padding:0 24px;justify-content:space-between}.header-logo{display:inline-flex;align-items:center;gap:10px}.header-logo-icon{width:22px;height:22px;border-radius:5px;flex:0 0 auto}.header-logo-stack{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;line-height:1}.header-logo-text{font-weight:800;font-size:18px;letter-spacing:-.025em;background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-logo-sub{font-size:9px;margin-top:2px;color:var(--text-muted);letter-spacing:.02em;text-transform:lowercase}.header-project-picker{display:flex;align-items:center;gap:8px}.header-project-input,.header-project-select{height:34px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:12px;padding:0 10px;outline:none}.header-project-input{width:170px}.header-project-select{width:220px}.header-project-input:focus,.header-project-select:focus{border-color:var(--accent);background:var(--input-bg-focus)}.credits-popover-wrap{position:relative}.credits-pill{min-height:34px;padding:6px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--success) 50%,var(--border) 50%);background:color-mix(in srgb,var(--success) 16%,transparent 84%);color:color-mix(in srgb,var(--success) 75%,var(--text-main) 25%)}.credits-pill-label{text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;font-weight:700}.credits-pill-value{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}.credits-pill-low-text{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.credits-pill.is-error,.credits-pill.is-low{border-color:color-mix(in srgb,var(--danger) 55%,var(--border) 45%);background:color-mix(in srgb,var(--danger) 14%,transparent 86%);color:var(--danger)}.credits-pill-skeleton{width:44px;height:12px;border-radius:6px;background:var(--scrollbar-thumb);animation:credits-pulse 1.2s ease-in-out infinite}.autosave-pill{min-height:34px;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;border:1px solid var(--border);font-size:.76rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-variant-numeric:tabular-nums}.autosave-pill--idle{color:var(--text-dim);background:var(--bg-card)}.autosave-pill--saving{color:color-mix(in srgb,var(--info) 75%,var(--text-main) 25%);border-color:color-mix(in srgb,var(--info) 55%,var(--border) 45%);background:color-mix(in srgb,var(--info) 15%,transparent 85%)}.autosave-pill--synced{color:color-mix(in srgb,var(--success) 75%,var(--text-main) 25%);border-color:color-mix(in srgb,var(--success) 50%,var(--border) 50%);background:color-mix(in srgb,var(--success) 16%,transparent 84%)}.autosave-pill--error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,var(--border) 45%);background:color-mix(in srgb,var(--danger) 14%,transparent 86%)}.credits-popover{position:absolute;top:calc(100% + 8px);right:0;min-width:360px;max-width:460px;max-height:280px;overflow:auto;padding:10px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-panel-solid);color:var(--text-main);display:none;z-index:140;box-shadow:var(--shadow-lg)}.credits-popover-wrap:hover .credits-popover{display:block}.credits-empty{margin-top:8px;color:var(--text-muted);font-size:12px}.credits-ops-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.credits-ops-list li{display:grid;grid-template-columns:54px 1fr auto;gap:8px;align-items:center;border-bottom:1px dashed var(--border);padding-bottom:6px}.credits-delta{font-weight:700;font-variant-numeric:tabular-nums}.credits-delta.negative{color:var(--danger)}.credits-delta.positive{color:var(--success)}.credits-reason{font-size:.82rem}.credits-time{font-size:.74rem;color:var(--text-muted);white-space:nowrap}.hud{position:absolute;z-index:30;pointer-events:auto}.hud-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:var(--radius-md);padding:6px;display:flex;gap:4px;box-shadow:var(--shadow-lg)}.hud--top-center{top:80px;left:50%;transform:translate(-50%)}.hud--bottom-center{bottom:32px;left:50%;transform:translate(-50%)}.hud--bottom-right{bottom:32px;right:360px}.hud--top-left{top:80px;left:360px}.canvas-control{position:absolute;z-index:10;pointer-events:auto}.canvas-control--top-right{top:80px;right:360px}button{cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text-main);padding:8px 12px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;transition:all .2s}button:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border)}button:active:not(:disabled){transform:scale(.98)}button.active{background:var(--accent);color:#fff}button:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-icon{width:36px;height:36px;padding:0;justify-content:center}.btn-ghost{color:var(--text-dim)}.btn-ghost:hover{color:var(--text-main)}.prop-group{background:var(--bg-card);border-radius:var(--radius-md);padding:16px;border:1px solid var(--border)}.prop-group-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;letter-spacing:.05em}.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.w-full{width:100%}.h-auto{height:auto}.w-auto{width:auto}.p-1{padding:4px}.props-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.props-grid--4{grid-template-columns:repeat(4,1fr)}.prop-field{display:flex;flex-direction:column;gap:6px;min-width:0}.prop-field label{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prop-field input,.prop-field select,.prop-field textarea{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);padding:8px 10px;font-size:13px;outline:none;transition:all .2s;width:100%;min-width:0;box-sizing:border-box}.prop-field input:focus,.prop-field select:focus,.prop-field textarea:focus{border-color:var(--accent);background:var(--input-bg-focus)}.prop-field input[type=file]{padding:6px 8px}.tab-container{display:flex;background:var(--tab-bg);border-radius:var(--radius-md);padding:4px;margin-bottom:8px}.tab-trigger{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-dim);border:none;background:transparent;transition:all .2s}.tab-trigger.active{background:var(--bg-panel-solid);color:var(--text-main);box-shadow:var(--shadow-sm)}.elements-list{display:flex;flex-direction:column;gap:4px}.element-item{display:flex;align-items:center;padding:8px 12px;background:var(--bg-card);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.element-item:hover{background:var(--bg-card-hover);border-color:var(--border)}.element-item.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.element-actions{display:flex;gap:4px;margin-left:auto;opacity:0;transition:opacity .2s}.element-item:hover .element-actions{opacity:1}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.library-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;cursor:pointer;transition:all .2s}.library-item:hover{background:var(--bg-card-hover);border-color:var(--border-focus);transform:translateY(-2px)}.library-item.active{border-color:var(--accent);background:var(--accent-soft)}.context-menu{position:absolute;z-index:1000;background:var(--bg-panel-solid);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;box-shadow:var(--shadow-lg);min-width:160px}.context-menu-item{width:100%;padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;text-align:left;display:flex;align-items:center;gap:10px;color:var(--text-main);background:transparent;border:none}.context-menu-item:hover{background:var(--accent);color:#fff}.text-danger{color:var(--danger)!important}.ai-dock{position:absolute;left:50%;transform:translate(-50%);width:60vw;min-width:760px;max-width:calc(100vw - 40px);bottom:20px;z-index:40;background:var(--bg-panel);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.ai-dock-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:none;border-bottom:1px solid transparent;font-size:13px;font-weight:600}.ai-dock--expanded .ai-dock-toggle{border-bottom-color:var(--border)}.ai-dock-content{padding:16px;max-height:min(45vh,360px);overflow-y:auto}.ai-dock--collapsed .ai-dock-content{display:none}.auth-modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#02061759;display:flex;align-items:center;justify-content:center}.auth-modal{width:min(460px,calc(100vw - 40px));background:var(--bg-panel-solid);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;display:flex;flex-direction:column;gap:14px}.auth-modal-title{font-size:18px;font-weight:700;color:var(--text-main)}.auth-modal-text{font-size:14px;color:var(--text-dim)}.auth-modal .header-project-input{width:100%}.ai-thinking-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#02061747;display:flex;align-items:center;justify-content:center}.ai-thinking-modal{width:min(360px,calc(100vw - 40px));background:var(--bg-panel-solid);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px 22px;display:flex;flex-direction:column;align-items:center;gap:10px}.ai-thinking-loader{width:52px;height:52px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:ai-spin 1s linear infinite;position:relative}.ai-thinking-loader:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:50%;border:2px solid transparent;border-top-color:color-mix(in srgb,var(--accent) 70%,#ffffff 30%);animation:ai-spin 1.4s linear infinite reverse}.ai-thinking-title{font-size:16px;font-weight:700;color:var(--text-main)}.ai-thinking-text{font-size:13px;color:var(--text-dim)}@keyframes ai-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes credits-pulse{0%,to{opacity:.42}50%{opacity:1}}.presentation-modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1150;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0206175c;display:flex;align-items:center;justify-content:center}.presentation-modal{width:min(80vw,1200px);max-height:calc(100vh - 80px);background:var(--bg-panel-solid);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;display:flex;flex-direction:column;gap:12px}.presentation-modal-image{width:100%;max-height:calc(100vh - 190px);object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-app)}.presentation-modal-actions{display:flex;justify-content:flex-end;gap:8px}