.login-page{align-items:center;justify-content:center;background:var(--bg)}.login-main{width:100%;max-width:400px;padding:1.5rem}.login-card{display:flex;flex-direction:column;gap:1.25rem}.login-title{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--accent);text-align:center}.login-subtitle{color:var(--text-muted);text-align:center;font-size:.9rem;margin-top:-.75rem}.login-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.login-tab{flex:1;padding:.5rem;background:transparent;border:none;color:var(--text-muted);font-size:.875rem;font-weight:500;transition:background .15s,color .15s}.login-tab.active{background:var(--surface-raised);color:var(--text)}.login-form{display:flex;flex-direction:column;gap:.75rem}.login-label{font-size:.85rem;color:var(--text-muted);font-weight:500}.login-error{font-size:.85rem;color:var(--danger);padding:.5rem .75rem;background:color-mix(in srgb,var(--danger) 10%,transparent);border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}.login-submit{width:100%;padding:.65rem;margin-top:.25rem}.login-dev-badge{align-self:center;padding:.2rem .6rem;background:color-mix(in srgb,var(--warning, #f59e0b) 15%,transparent);color:var(--warning, #f59e0b);border:1px solid color-mix(in srgb,var(--warning, #f59e0b) 40%,transparent);border-radius:var(--radius-sm);font-size:.7rem;font-weight:700;letter-spacing:.08em}.projects-page{background:var(--bg)}.projects-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.projects-logo{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)}.projects-header-actions{display:flex;gap:.75rem}.projects-main{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem}.projects-heading{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}.project-create-card{display:flex;flex-direction:column;gap:1rem;max-width:520px}.project-create-label{font-size:.8rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.project-create-actions{display:flex;gap:.5rem;margin-top:.25rem}.project-option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.project-option-grid--ratios{grid-template-columns:repeat(4,1fr)}.project-option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.75rem .5rem;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;min-height:64px}.project-option-btn:hover{border-color:var(--text-muted)}.project-option-btn.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised))}.project-option-title{font-size:.9rem;font-weight:600}.project-option-sub{font-size:.75rem;color:var(--text-muted)}.ratio-preview{display:block;background:var(--accent);border-radius:2px;opacity:.5}.project-option-btn.selected .ratio-preview{opacity:1}.projects-error{font-size:.875rem;color:var(--danger)}.projects-empty{color:var(--text-muted)}.projects-empty-state{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:4rem 0;color:var(--text-muted)}.projects-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.project-card{display:flex;flex-direction:column;gap:.75rem;text-decoration:none;transition:border-color .15s,transform .15s;padding:0;overflow:hidden}.project-card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none}.project-card-thumb{aspect-ratio:1;background:var(--surface-raised);overflow:hidden}.project-card-thumb img{width:100%;height:100%;object-fit:cover}.project-card-thumb-empty{width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--surface-raised),var(--surface-raised) 10px,var(--surface) 10px,var(--surface) 20px)}.project-card-info{display:flex;flex-direction:column;gap:.25rem;padding:0 1rem 1rem}.project-card-name{font-size:.95rem;font-weight:600;color:var(--text)}.project-card-meta{font-size:.8rem;color:var(--text-muted)}.canvas-toolbar{display:flex;align-items:center;gap:.25rem;padding:0 .75rem;background:var(--surface);border-bottom:1px solid var(--border);height:42px;flex-shrink:0}.ctb-group{display:flex;align-items:center;gap:.125rem}.ctb-sep{width:1px;height:18px;background:var(--border);margin:0 .5rem}.ctb-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:.78rem;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}.ctb-btn:hover{background:var(--surface-raised);color:var(--text)}.ctb-btn.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.ctb-icon{font-size:.95rem;line-height:1}.ctb-label{font-size:.76rem}.ctb-zoom-group{gap:.2rem}.ctb-zoom-val{font-size:.76rem;color:var(--text-muted);min-width:2.8rem;text-align:center;font-variant-numeric:tabular-nums}.canvas-page{background:var(--bg);overflow:hidden}.canvas-status{padding:2rem;color:var(--text-muted)}.canvas-status--error{color:var(--danger)}.canvas-header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.canvas-back{padding:.375rem .75rem;font-size:.85rem}.canvas-project-name{font-weight:600;font-size:.95rem;color:var(--text)}.canvas-meta{font-size:.8rem;color:var(--text-muted);margin-left:auto}.canvas-workspace{display:flex;flex:1;height:calc(100dvh - 94px);overflow:hidden}.canvas-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;padding:1.5rem}.canvas-viewport-wrap{position:relative;display:inline-flex;line-height:0;transform-origin:center center}.canvas-el{max-width:100%;max-height:calc(100dvh - 94px - 3rem);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-lg);display:block;-webkit-user-select:none;user-select:none}.canvas-cursor--view{cursor:default}.canvas-cursor--select{cursor:crosshair}.canvas-cursor--pan{cursor:grab}.canvas-cursor--pan:active{cursor:grabbing}.canvas-cursor--zoom{cursor:zoom-in}.canvas-sel-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;border-radius:var(--radius)}.canvas-generating-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--text-muted);font-size:.9rem;z-index:10;border-radius:var(--radius)}.canvas-spinner{display:inline-block;width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.canvas-spinner--sm{width:14px;height:14px}@keyframes spin{to{transform:rotate(360deg)}}.canvas-sidebar{width:300px;min-width:260px;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:0;overflow-y:auto}.canvas-gen-form{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}.canvas-label{font-size:.8rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.canvas-prompt{resize:vertical;min-height:80px}.canvas-gen-error{font-size:.85rem;color:var(--danger)}.canvas-gen-btn{width:100%}.canvas-sel-panel{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-bottom-color:color-mix(in srgb,var(--accent) 30%,var(--border))}.canvas-feather-row{display:flex;flex-direction:column;gap:.35rem}.canvas-feather-label{font-size:.78rem;color:var(--text-muted)}.canvas-feather-slider{width:100%;accent-color:var(--accent);cursor:pointer}.canvas-export-section{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}.canvas-export-heading{font-size:.8rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.canvas-export-format-row{display:flex;align-items:center;gap:.75rem}.canvas-export-format-label{font-size:.78rem;color:var(--text-muted);flex-shrink:0}.canvas-export-format-btns{display:flex;gap:.35rem}.canvas-export-fmt-btn{padding:.2rem .55rem;font-size:.72rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.canvas-export-fmt-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.canvas-export-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}.canvas-history-section{display:flex;flex-direction:column;flex:1;padding:1rem 1.25rem;gap:.75rem}.canvas-history-heading{font-size:.8rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.canvas-history-empty{font-size:.85rem;color:var(--text-subtle)}.canvas-history-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.canvas-history-item{display:flex;gap:.75rem;align-items:flex-start;opacity:1;transition:opacity .2s}.canvas-history-item.pending{opacity:.6}.canvas-history-thumb{width:56px;height:56px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background:var(--surface-raised)}.canvas-history-thumb img{width:100%;height:100%;object-fit:cover;display:block}.canvas-history-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--danger);font-size:1rem}.canvas-history-info{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.canvas-history-prompt{font-size:.8rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-history-meta{font-size:.72rem;color:var(--text-muted);text-transform:capitalize}.canvas-history-revert{font-size:.75rem;padding:.2rem .6rem;align-self:flex-start;margin-top:.15rem}.canvas-history-current{font-size:.72rem;color:var(--accent);font-weight:500;margin-top:.15rem}:root{--bg: #0a0a0a;--surface: #141414;--surface-raised: #1e1e1e;--border: #2a2a2a;--accent: #6366f1;--accent-hover: #4f52d3;--text: #f0f0f0;--text-muted: #888;--text-subtle: #555;--danger: #ef4444;--success: #22c55e;--radius-sm: 4px;--radius: 8px;--radius-lg: 12px;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .6);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{background-color:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6;min-height:100dvh}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}img{max-width:100%;display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.25rem;border-radius:var(--radius);border:none;font-size:.9rem;font-weight:500;transition:background .15s,opacity .15s;white-space:nowrap}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}.input{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.5rem .75rem;font-size:.9rem;outline:none;transition:border-color .15s;width:100%}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text-subtle)}.page{min-height:100dvh;display:flex;flex-direction:column}