:root{--font-sans: "Inter", "SF Pro Text", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-bg: #0b111b;--color-surface: #151d2a;--color-surface-muted: #1b2536;--color-surface-elevated: #1f2a3d;--color-panel: #0f1623;--color-border: #263144;--color-border-strong: #33425a;--color-border-soft: #1a2332;--color-shadow: rgba(4, 7, 14, .45);--color-shadow-strong: rgba(0, 0, 0, .62);--color-text-primary: #eef3ff;--color-text-secondary: #bec6d6;--color-text-tertiary: #8e97ab;--color-text-inverse: #ffffff;--color-accent: #4c6fff;--color-accent-strong: #c3cffd;--color-accent-muted: rgba(76, 111, 255, .22);--color-success: #39d3b0;--color-success-muted: rgba(57, 211, 176, .22);--color-warning: #f5c05f;--color-warning-muted: rgba(245, 192, 95, .24);--color-danger: #ff6b8f;--color-danger-muted: rgba(255, 107, 143, .24);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(20, 30, 46, .5);--shadow-md: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);--space-0: 0;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--transition-fast: .12s ease;--transition-medium: .18s ease;--transition-slow: .26s ease}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text-primary);line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}a{color:var(--color-accent)}a:hover{color:var(--color-accent-strong)}button,input,select,textarea{font-family:inherit;color:inherit}.hidden{display:none!important}.app-container{display:flex;height:100vh;max-height:100vh;background:linear-gradient(180deg,#10182a,#0b111b 40%,#10182a);overflow:hidden}.canvas-panel{flex:1;display:flex;flex-direction:column;background:var(--color-panel);border-right:1px solid var(--color-border);box-shadow:inset -1px 0 #04070e99;position:relative}.canvas-header{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) var(--space-6);background:linear-gradient(135deg,#172031eb,#101723f2);border-bottom:1px solid var(--color-border-soft);box-shadow:0 1px #0000008c}.canvas-header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.canvas-title{display:flex;align-items:center;gap:var(--space-3)}.canvas-title-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:#4c6fff47;color:var(--color-text-inverse);font-size:1.25rem;box-shadow:inset 0 0 0 1px #4c6fff80}.canvas-title-meta h1{font-size:1.15rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.canvas-title-meta p{margin-top:var(--space-1);font-size:.8rem;font-weight:500;color:var(--color-text-tertiary);letter-spacing:.04em;text-transform:uppercase}.canvas-header h2{font-size:1.4rem;font-weight:600;color:var(--color-text-primary)}.guide-button{margin-left:auto;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font-weight:600;letter-spacing:.01em;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer;box-shadow:var(--shadow-sm)}.guide-button:hover,.guide-button:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);box-shadow:0 8px 20px #4c6fff59;outline:none}.canvas-ids{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3);align-items:stretch}.canvas-ids-group{display:flex}.canvas-ids-accordion{width:100%;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-sm)}.canvas-ids-accordion[open]{border-color:var(--color-accent);box-shadow:0 12px 24px #4c6fff47}.canvas-ids-accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);cursor:pointer;font-size:.85rem;color:var(--color-text-secondary);font-weight:600;-webkit-user-select:none;user-select:none}.canvas-ids-accordion summary::-webkit-details-marker{display:none}.canvas-ids-accordion summary:after{content:"▼";font-size:.8rem;color:var(--color-text-tertiary);transition:transform var(--transition-fast)}.canvas-ids-accordion[open] summary:after{transform:rotate(-180deg)}.canvas-ids-label{color:var(--color-text-primary);font-weight:600;letter-spacing:.01em}.canvas-ids-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:0 var(--space-2);border-radius:999px;background:var(--color-accent-muted);color:var(--color-accent-strong);font-size:.75rem;font-weight:700;font-family:var(--font-mono)}.canvas-ids-count.is-empty{background:var(--color-surface-muted);color:var(--color-text-tertiary)}.canvas-ids-list{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2);max-height:140px;overflow-y:auto;padding-right:var(--space-1)}.canvas-ids-empty{color:var(--color-text-tertiary);font-size:.75rem}.canvas-id-badge{background:var(--color-surface-muted);border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--space-1) var(--space-3);border-radius:999px;font-size:.75rem;font-weight:600;font-family:var(--font-mono);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.canvas-id-badge:hover{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent-strong);transform:translateY(-1px)}.canvas-id-badge.selected{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse)}.canvas-controls{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-1)}.canvas-controls button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);min-width:112px}.canvas-controls button:hover,.canvas-controls button:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);box-shadow:0 10px 20px #4c6fff4d;outline:none}.canvas-controls button.active{background:var(--color-accent-muted);border-color:var(--color-accent);color:var(--color-accent-strong);box-shadow:var(--shadow-sm)}.canvas-controls button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.canvas-controls button:disabled:hover,.canvas-controls button:disabled:focus-visible{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-tertiary)}.canvas-area{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at 0 0,rgba(76,111,255,.18),transparent 55%),linear-gradient(0deg,rgba(42,56,78,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(42,56,78,.65) 1px,transparent 1px);background-color:#0d131f;background-size:18px 18px}.canvas-area,#canvas,.canvas-image,.canvas-video,.canvas-note,.canvas-placeholder{-webkit-user-select:none;user-select:none}#canvas{position:absolute;cursor:grab}#canvas:active{cursor:grabbing}.canvas-area.selecting,.canvas-area.selecting #canvas{cursor:crosshair}.canvas-area.panning,.canvas-area.panning #canvas,.canvas-area.pan-mode,.canvas-area.pan-mode #canvas{cursor:grab}.selection-marquee{position:absolute;border:1px solid rgba(76,111,255,.6);background:#4c6fff33;border-radius:var(--radius-sm);pointer-events:none;z-index:20;box-shadow:0 0 0 1px #4c6fff59}.canvas-stats{position:absolute;bottom:var(--space-3);left:var(--space-3);background:#141c2aeb;color:var(--color-text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:.75rem;font-family:var(--font-mono);box-shadow:var(--shadow-sm)}.save-indicator{position:absolute;bottom:var(--space-3);right:var(--space-3);background:#141c2aeb;color:var(--color-text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:.75rem;font-family:var(--font-mono);box-shadow:var(--shadow-sm);transition:opacity var(--transition-medium),transform var(--transition-medium)}.save-indicator.show{opacity:1;transform:translateY(0)}.save-indicator.error{background:var(--color-danger-muted);color:var(--color-danger)}.chat-panel{width:clamp(360px,32vw,420px);background:var(--color-surface);display:flex;flex-direction:column;border-left:1px solid var(--color-border);box-shadow:-12px 0 32px #0006}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--color-border-soft);background:linear-gradient(180deg,#182131eb,#121a27f0)}.chat-header h2{font-size:1.2rem;font-weight:600;color:var(--color-text-primary)}.chat-header-actions{display:flex;align-items:center;gap:var(--space-2)}.settings-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);font-size:1.2rem}.settings-button:hover,.settings-button:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);box-shadow:0 10px 20px #4c6fff52;outline:none}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);background:linear-gradient(180deg,#111926e6,#0d141ff5)}.chat-messages::-webkit-scrollbar{width:10px}.chat-messages::-webkit-scrollbar-thumb{background:#4c6fff40;border-radius:999px}.chat-message{padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-text-secondary);font-size:.95rem;line-height:1.6;max-width:100%;word-break:break-word}.chat-message strong{color:var(--color-text-primary)}.chat-message a{color:var(--color-accent);text-decoration:none}.chat-message a:hover{text-decoration:underline}.chat-message ul,.chat-message ol{margin:var(--space-3) 0;padding-left:var(--space-5)}.chat-message li+li{margin-top:var(--space-1)}.chat-message code,.chat-message pre{font-family:var(--font-mono);font-size:.85rem;background:var(--color-surface-muted);border-radius:var(--radius-sm)}.chat-message pre{padding:var(--space-3);overflow-x:auto}.chat-message.user{margin-left:auto;background:linear-gradient(135deg,#2f49d0,#4c6fff);color:var(--color-text-inverse);border-color:transparent;box-shadow:0 12px 28px #4c6fff59}.chat-message.assistant{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-secondary)}.chat-message.system{background:var(--color-warning-muted);border-color:#f5c05f73;color:var(--color-warning);font-size:.9rem;text-align:center;box-shadow:none}.chat-input-section{padding:var(--space-5) var(--space-6);border-top:1px solid var(--color-border);background:linear-gradient(180deg,#141d2bf2,#0f1725fa);display:grid;gap:var(--space-3)}.error{display:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-danger-muted);color:var(--color-danger);font-size:.85rem;border:1px solid rgba(255,107,143,.45)}.error.show{display:block}.action-buttons{display:flex;gap:var(--space-2)}.action-buttons button{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid rgba(255,107,143,.45);background:var(--color-danger-muted);color:var(--color-danger);font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.action-buttons button:hover,.action-buttons button:focus-visible{background:var(--color-danger);color:var(--color-text-inverse);border-color:var(--color-danger);transform:translateY(-1px);outline:none}.chat-input-section textarea{width:100%;min-height:110px;padding:var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-primary);font-size:.95rem;resize:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.chat-input-section textarea::placeholder{color:var(--color-text-tertiary)}.chat-input-section textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff26;outline:none}.chat-input-section button{justify-self:end;min-width:160px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);border:none;background:linear-gradient(135deg,#2f49d0,#4c6fff);color:var(--color-text-inverse);font-weight:600;font-size:1rem;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 14px 30px #4c6fff59}.chat-input-section button:hover:not(:disabled),.chat-input-section button:focus-visible{transform:translateY(-1px);box-shadow:0 18px 36px #4c6fff6b;outline:none}.chat-input-section button:disabled{cursor:not-allowed;opacity:.6;box-shadow:none}.canvas-image{position:absolute;border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:move;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-md);background:var(--color-surface-elevated)}.canvas-image.selected{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff59}.canvas-image img{width:100%;height:100%;display:block;border-radius:calc(var(--radius-lg) - 2px);pointer-events:none}.canvas-image.with-header img{height:calc(100% - 32px);margin-top:32px;border-top-left-radius:0;border-top-right-radius:0}.image-download-btn,.image-regenerate-btn{position:absolute;top:-10px;background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast);z-index:12}.image-regenerate-btn{right:32px}.image-download-btn{right:-10px}.image-download-btn:hover,.image-regenerate-btn:hover,.image-download-btn:focus-visible,.image-regenerate-btn:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);outline:none}.image-id-label{position:absolute;top:-10px;left:-10px;background:linear-gradient(135deg,#2f49d0,#4c6fff);color:var(--color-text-inverse);padding:var(--space-1) var(--space-3);border-radius:999px;font-size:.75rem;font-weight:700;font-family:var(--font-mono);box-shadow:var(--shadow-sm);pointer-events:none}.image-tooltip{position:absolute;background:var(--color-surface);color:var(--color-text-secondary);padding:var(--space-4);border-radius:var(--radius-lg);font-size:.85rem;max-width:320px;z-index:1000;pointer-events:none;opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transform:translateY(6px)}.image-tooltip.show{opacity:1;transform:translateY(0)}.image-tooltip .tooltip-title{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2);font-size:.95rem}.image-tooltip .tooltip-prompt{margin-bottom:var(--space-2)}.image-tooltip .tooltip-references{background:var(--color-accent-muted);border:1px solid var(--color-accent);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0;font-size:.75rem;color:var(--color-accent-strong);font-family:var(--font-mono);display:inline-flex;align-items:center;gap:var(--space-2)}.image-tooltip .tooltip-references:before{content:"🔗"}.image-tooltip .tooltip-meta{font-size:.7rem;color:var(--color-text-tertiary);font-family:var(--font-mono);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border-soft)}.canvas-video{position:absolute;border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:move;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);background:var(--color-surface);box-shadow:var(--shadow-md)}.canvas-video:hover{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff40}.canvas-video.selected{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff66}.canvas-video video,.canvas-video iframe{width:100%;height:calc(100% - 32px);display:block;background:#000;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);margin-top:32px}.canvas-video video:only-child,.canvas-video iframe:only-child{height:100%;margin-top:0;border-radius:calc(var(--radius-lg) - 2px)}.video-error{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-4);color:var(--color-danger);background:var(--color-danger-muted);font-size:.9rem;border-radius:calc(var(--radius-lg) - 2px)}.video-id-label{position:absolute;top:var(--space-2);left:var(--space-2);background:#4c6fff29;color:var(--color-accent-strong);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;pointer-events:none;font-family:var(--font-mono)}.video-controls{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;gap:var(--space-2);z-index:10}.video-download-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--space-1) var(--space-3);border-radius:999px;cursor:pointer;font-size:.85rem;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-sm)}.video-download-btn:hover,.video-download-btn:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);outline:none}.canvas-note{position:absolute;background:#f5c05f29;border:1px solid rgba(245,192,95,.45);border-radius:var(--radius-lg);cursor:default;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-md);display:flex;flex-direction:column}.canvas-note:hover{border-color:#f5c05fa6}.canvas-note.selected{border-color:#f5c05fbf;box-shadow:0 0 0 3px #f5c05f47}.canvas-note.resizing{cursor:nwse-resize}.note-header{padding:var(--space-2) var(--space-3);background:#f5c05f2e;font-weight:600;color:var(--color-warning)}.note-content{flex:1;padding:var(--space-4);padding-top:calc(var(--space-4) + var(--space-4));color:var(--color-text-primary);font-size:.95rem;line-height:1.6;overflow-y:auto;cursor:text;outline:none;white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text}.note-content:focus{background:#f5c05f1f}.note-content:empty:before{content:"Start typing your notes...";color:#f5c05f99;font-style:italic}.note-resize-handle{position:absolute;width:16px;height:16px;bottom:var(--space-2);right:var(--space-2);border-radius:var(--radius-xs);background:linear-gradient(135deg,#f5c05fb3,#f5c05f26);border:1px solid rgba(245,192,95,.5);cursor:nwse-resize;opacity:0;transition:opacity var(--transition-fast);pointer-events:all}.canvas-note:hover .note-resize-handle,.canvas-note.resizing .note-resize-handle{opacity:1}.canvas-placeholder{position:absolute;background:var(--color-surface);border:2px dashed rgba(76,111,255,.45);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-shadow:var(--shadow-md);transition:border-color var(--transition-fast);padding-top:var(--space-6);overflow:hidden}.canvas-placeholder.error{border-color:#ff6b8f99;background:var(--color-danger-muted)}.placeholder-body{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4);gap:var(--space-2)}.placeholder-spinner{width:40px;height:40px;border:4px solid rgba(76,111,255,.2);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-3)}@keyframes spin{to{transform:rotate(360deg)}}.placeholder-text{color:var(--color-accent-strong);font-size:.85rem;font-weight:600;text-align:center}.placeholder-progress{color:var(--color-text-tertiary);font-size:.75rem;font-family:var(--font-mono)}.placeholder-prompt{color:var(--color-text-tertiary);font-size:.75rem;max-width:80%;text-align:center;margin-top:var(--space-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder-error-icon{font-size:2.2rem;margin-bottom:var(--space-2)}.placeholder-error-text{color:var(--color-danger);font-size:.9rem;text-align:center}.placeholder-error-actions{display:flex;gap:var(--space-2)}.placeholder-error-actions button{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font-size:.8rem;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.placeholder-error-actions button:hover,.placeholder-error-actions button:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);outline:none}.media-header{position:absolute;top:0;left:0;right:0;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-3);background:#0f1725e6;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);border-bottom:1px solid var(--color-border);gap:var(--space-2)}.media-header-title{display:inline-flex;align-items:center;gap:var(--space-1);font-size:.8rem;color:var(--color-text-secondary);font-weight:600}.media-header-btn{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;padding:0 var(--space-2);height:24px;display:inline-flex;align-items:center;gap:var(--space-1);font-size:.75rem;color:var(--color-text-secondary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.media-header-btn:hover,.media-header-btn:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);outline:none}.onboarding-modal,.template-modal,.template-preview-modal,.settings-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1000}.onboarding-backdrop,.template-modal-backdrop,.template-preview-backdrop,.settings-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#050912ad;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.onboarding-content,.template-modal-content,.template-preview-content,.settings-modal-content{position:relative;background:var(--color-surface);color:var(--color-text-secondary);padding:var(--space-6);border-radius:20px;width:min(560px,90vw);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--color-border);display:grid;gap:var(--space-4)}.onboarding-content h2,.template-modal-content h2,.template-preview-content h2,.settings-modal-content h2{color:var(--color-text-primary);font-size:1.5rem;font-weight:600}.onboarding-close,.template-modal-close,.template-preview-close,.settings-modal-close{position:absolute;top:var(--space-4);right:var(--space-4);background:transparent;border:none;color:var(--color-text-tertiary);font-size:1.6rem;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.onboarding-close:hover,.template-modal-close:hover,.template-preview-close:hover,.settings-modal-close:hover,.onboarding-close:focus-visible,.template-modal-close:focus-visible,.template-preview-close:focus-visible,.settings-modal-close:focus-visible{color:var(--color-text-primary);transform:translateY(-1px);outline:none}.onboarding-steps{display:grid;gap:var(--space-2);margin-bottom:var(--space-4);padding-left:var(--space-5)}.onboarding-intro{font-size:.95rem;line-height:1.6;color:var(--color-text-secondary)}.onboarding-definition-list{margin:0;padding:0}.onboarding-definition-list dt{color:var(--color-text-primary);font-weight:600;margin-top:var(--space-3)}.onboarding-definition-list dt:first-of-type{margin-top:0}.onboarding-definition-list dd{margin:var(--space-1) 0 0 var(--space-4);line-height:1.6}.onboarding-definition-list code{font-size:.9rem}.onboarding-section+.onboarding-section{margin-top:var(--space-4)}.onboarding-section h3{color:var(--color-text-primary);font-size:1rem;font-weight:600}.onboarding-section ul{list-style:disc;padding-left:var(--space-5);display:grid;gap:var(--space-2);font-size:.95rem}.at-reference{font-family:var(--font-mono);background:var(--color-accent-muted);border-radius:var(--radius-xs);padding:0 var(--space-1);color:var(--color-accent-strong)}.template-form{display:grid;gap:var(--space-3)}.template-form label{font-weight:600;color:var(--color-text-primary)}.template-form input,.template-form textarea{width:100%;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--space-3);border-radius:var(--radius-md);font-size:.95rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.template-form textarea{resize:vertical;min-height:140px}.template-form input:focus,.template-form textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff26;outline:none}.template-field-hint{font-size:.8rem;color:var(--color-text-tertiary)}.template-form-actions{display:flex;justify-content:flex-end}.template-form-actions button{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,#2f49d0,#4c6fff);color:var(--color-text-inverse);font-weight:600;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 12px 24px #4c6fff59}.template-form-actions button:hover,.template-form-actions button:focus-visible{transform:translateY(-1px);box-shadow:0 16px 32px #4c6fff7a;outline:none}.template-form-message{font-size:.85rem;min-height:1.4em;color:var(--color-text-tertiary)}.template-form-message.success{color:var(--color-success)}.template-form-message.error{color:var(--color-danger)}.template-list-container{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}.template-list{display:grid;gap:var(--space-3)}.template-list-item{padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);display:grid;gap:var(--space-2)}.template-list-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.template-command{font-weight:600;font-size:.95rem;color:var(--color-text-primary);word-break:break-word}.template-list-actions{display:flex;gap:var(--space-2)}.template-list-button{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;font-size:.85rem;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.template-view-button{border-color:#4c6fff59;color:var(--color-accent-strong)}.template-view-button:hover,.template-view-button:focus-visible{background:var(--color-accent-muted);border-color:var(--color-accent);outline:none}.template-delete-button{border-color:#ff6b8f73;color:var(--color-danger)}.template-delete-button:hover,.template-delete-button:focus-visible{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-text-inverse);outline:none}.template-preview-body{display:grid;gap:var(--space-3)}.template-preview-command{font-weight:600;font-size:.95rem;color:var(--color-text-primary);word-break:break-word}.template-preview-prompt{font-size:.9rem;line-height:1.6;color:var(--color-text-secondary);background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);white-space:pre-wrap;margin:0}.settings-section{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface-muted);border:1px solid var(--color-border)}.settings-section+.settings-section{margin-top:var(--space-3)}.settings-section-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.settings-label{font-weight:600;font-size:.9rem;color:var(--color-text-primary)}.api-key-help{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--color-surface);border:1px solid var(--color-border);text-decoration:none;font-weight:700;color:var(--color-text-secondary);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.api-key-help:hover,.api-key-help:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);outline:none}.api-key-input-wrapper{position:relative;display:flex;align-items:center}.api-key-section input,.settings-section input,.settings-section select,.model-select{width:100%;padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.9rem;font-family:var(--font-mono);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.api-key-section select,.settings-section select,.model-select{cursor:pointer;font-family:var(--font-sans)}.api-key-section input:focus,.settings-section input:focus,.settings-section select:focus,.model-select:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #4c6fff26;outline:none}.api-key-toggle{position:absolute;right:var(--space-2);background:transparent;border:none;color:var(--color-text-tertiary);cursor:pointer;font-size:1.1rem;padding:var(--space-1) var(--space-2);display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast),transform var(--transition-fast);border-radius:var(--radius-sm)}.api-key-toggle:hover,.api-key-toggle:focus-visible{color:var(--color-accent-strong);background:var(--color-accent-muted);outline:none}.api-key-toggle:active{transform:scale(.96)}.api-key-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.api-key-actions button,.settings-inline-actions button,.settings-link-button{flex:1;min-width:160px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font-size:.85rem;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.api-key-actions button:hover,.settings-inline-actions button:hover,.settings-link-button:hover,.api-key-actions button:focus-visible,.settings-inline-actions button:focus-visible,.settings-link-button:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px);outline:none}.api-key-feedback{font-size:.85rem;color:var(--color-text-tertiary);min-height:1.2em}.api-key-feedback[data-tone=success]{color:var(--color-success)}.api-key-feedback[data-tone=error]{color:var(--color-danger)}.api-key-feedback[data-tone=info]{color:var(--color-accent-strong)}.api-key-hint{color:var(--color-text-tertiary);font-size:.8rem}.api-key-details{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}.api-key-details summary{cursor:pointer;font-weight:600;margin-bottom:var(--space-2)}.api-key-details pre{background:var(--color-surface);padding:var(--space-3);border-radius:var(--radius-sm);overflow-x:auto;font-size:.8rem;margin:var(--space-2) 0;border:1px solid var(--color-border);font-family:var(--font-mono)}.api-key-warning{color:var(--color-warning);font-size:.85rem}.settings-inline-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.settings-optional{font-weight:500;color:var(--color-text-tertiary);font-size:.85rem}.template-preview-body pre{font-family:var(--font-mono);font-size:.85rem;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4)}.template-preview-body code{font-family:inherit}.extraction-result{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-3) 0;box-shadow:var(--shadow-sm)}.extraction-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.extraction-result-header strong{font-size:1rem;color:var(--color-accent-strong)}.copy-extract-btn{background:var(--color-accent);color:var(--color-text-inverse);border:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;font-size:.8rem;font-weight:600;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 10px 20px #4c6fff57}.copy-extract-btn:hover,.copy-extract-btn:focus-visible{transform:translateY(-1px);box-shadow:0 14px 28px #4c6fff7a;outline:none}.extraction-result-meta{margin:var(--space-2) 0;font-size:.85rem;color:var(--color-text-tertiary)}.extraction-result-meta strong{color:var(--color-text-secondary);margin-right:var(--space-1)}.extraction-result-meta a{color:var(--color-accent);text-decoration:none}.extraction-result-meta a:hover{text-decoration:underline}.extraction-result-data{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-3);overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.6;max-height:400px}.extraction-result-data::-webkit-scrollbar{width:8px;height:8px}.extraction-result-data::-webkit-scrollbar-track{background:transparent}.extraction-result-data::-webkit-scrollbar-thumb{background:#4c6fff4d;border-radius:999px}.copy-template-btn,.delete-template-btn,.insert-template-btn,.template-list-button{font-family:var(--font-sans)}kbd{display:inline-block;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-surface-muted);border:1px solid var(--color-border);font-size:.75rem;font-family:var(--font-mono)}@media (max-width: 1080px){.app-container{flex-direction:column}.canvas-panel{border-right:none;border-bottom:1px solid var(--color-border);height:60vh}.chat-panel{width:100%;box-shadow:none;height:40vh}}@media (max-width: 720px){.canvas-header{grid-template-columns:1fr}.canvas-controls{justify-content:flex-start}}