*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--background: #0a0a0a;--foreground: #fafafa;--card: #171717;--card-foreground: #fafafa;--popover: #171717;--popover-foreground: #fafafa;--primary: #ffffff;--primary-foreground: #1a1a1a;--secondary: #262626;--secondary-foreground: #fafafa;--muted: #262626;--muted-foreground: #a3a3a3;--accent: #2a2a2a;--accent-foreground: #fafafa;--destructive: #dc2626;--border: rgba(255, 255, 255, .08);--input: rgba(255, 255, 255, .12);--ring: #ffffff;--radius: .5rem}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;font-weight:400;background:var(--background);color:var(--foreground);overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;gap:16px}.toolbar-left{flex-shrink:0}.toolbar-center{display:flex;align-items:center;gap:4px}.toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.logo{display:flex;align-items:center}.logo-lockup{height:20px;width:auto}.frame-counter{color:var(--muted-foreground);min-width:64px;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;margin-left:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--secondary);color:var(--secondary-foreground);border:1px solid var(--border);border-radius:var(--radius);padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;line-height:1}.btn:hover{background:var(--accent);border-color:#ffffff26}.btn:active{background:#ffffff1a}.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.btn-icon{width:34px;height:34px;padding:0;border-radius:var(--radius)}.btn-secondary{background:var(--secondary);border-color:var(--border);color:var(--secondary-foreground)}.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);font-weight:600}.btn-primary:hover{background:#e0e0e0;border-color:#e0e0e0}.btn-primary:active{background:#ccc;border-color:#ccc}.btn-primary:disabled,.btn-primary[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}#btn-export{background:#a3e635;border-color:#a3e635;color:#1a1a1a}#btn-export:hover{background:#b5ea5c;border-color:#b5ea5c}#btn-export:active{background:#8fcc2a;border-color:#8fcc2a}.progress-fill{background:#a3e635}.pro-badge,.export-tier-tag.pro-tag{background:#a3e635;color:#1a1a1a}.btn-ghost{background:transparent;border-color:transparent;color:var(--muted-foreground)}.btn-ghost:hover{background:var(--accent);border-color:transparent;color:var(--foreground)}.btn-ghost:active{background:#ffffff14}.icon{width:16px;height:16px;fill:currentColor;flex-shrink:0}.icon-chevron{width:14px;height:14px;margin-left:-2px}.export-dropdown{position:relative}.export-dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);padding:4px;z-index:100;box-shadow:0 8px 30px #0006}.export-dropdown.open .export-dropdown-menu{display:block}.export-dropdown-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:calc(var(--radius) - 2px);color:var(--popover-foreground);font-family:inherit;font-size:13px;font-weight:400;cursor:pointer;transition:background .1s;text-align:left}.export-dropdown-item:hover{background:var(--accent)}.export-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.export-hint{font-size:11px;color:var(--muted-foreground)}.export-progress{padding:8px 12px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);margin-top:4px}.progress-bar{flex:1;height:4px;background:var(--secondary);border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--primary);border-radius:2px;transition:width .1s}#progress-text{color:var(--muted-foreground);font-variant-numeric:tabular-nums;font-size:11px;min-width:32px;text-align:right}.workspace{display:flex;flex:1;overflow:hidden}.canvas-viewport{flex:1;display:flex;align-items:center;justify-content:center;background:var(--background);padding:24px;position:relative}.canvas-placeholder{position:absolute;align-items:center;justify-content:center;z-index:1;display:none;cursor:pointer}.canvas-placeholder:not([hidden]){display:flex}.canvas-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:12px}.canvas-placeholder-icon{width:48px;height:48px;image-rendering:pixelated}.canvas-placeholder-title{font-size:13px;font-weight:500;color:var(--muted-foreground);margin:0}.canvas-placeholder-sub{font-size:12px;font-weight:400;color:#666;margin:0}#display-canvas{border:1px solid var(--border);border-radius:var(--radius);background:#fff;image-rendering:pixelated;max-width:100%;max-height:100%}#display-canvas.transparent-bg{background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#222}.source-toggle{display:flex;background:var(--secondary);border-radius:var(--radius);padding:3px;margin-bottom:16px;gap:3px}.source-toggle-btn{flex:1;padding:6px 0;font-family:inherit;font-size:12px;font-weight:500;color:var(--muted-foreground);background:transparent;border:none;border-radius:calc(var(--radius) - 2px);cursor:pointer;transition:background .15s,color .15s}.source-toggle-btn:hover{color:var(--foreground)}.source-toggle-btn.active{background:var(--primary);color:var(--primary-foreground)}#photo-upload-area{margin-bottom:16px}.btn-block{width:100%}.photo-preview-wrap{position:relative;margin-bottom:12px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}.photo-preview{display:block;width:100%;max-height:140px;object-fit:cover}.photo-remove-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:#000000b3;color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.photo-remove-btn:hover{background:#000000e6}.controls-panel{width:300px;flex-shrink:0;background:var(--card);border-left:1px solid var(--border);overflow-y:auto;padding:16px}.control-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}.control-section:last-child{border-bottom:none;margin-bottom:0}.control-section h2{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:12px}.control-section label{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:13px;font-weight:400;color:var(--foreground);gap:12px}.control-section select{background:var(--secondary);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-family:inherit;font-size:13px;width:140px;cursor:pointer;transition:border-color .15s;appearance:auto}.control-section select:hover{border-color:#fff3}.control-section select:focus{outline:2px solid var(--ring);outline-offset:1px}.range-with-value{display:flex;align-items:center;gap:8px;width:168px}.range-with-value input[type=range]{flex:1;min-width:0;accent-color:var(--primary);height:20px;cursor:pointer}.range-value-input{width:48px;flex-shrink:0;background:var(--secondary);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);padding:4px 6px;font-family:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;transition:border-color .15s}.range-value-input::-webkit-inner-spin-button,.range-value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.range-value-input:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:transparent}.range-value-input:hover{border-color:#fff3}.control-section input[type=color]{width:40px;height:32px;padding:3px;background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s}.control-section input[type=color]:hover{border-color:#fff3}.control-section .checkbox-label{cursor:pointer;flex-direction:row-reverse;justify-content:flex-end;gap:8px}.control-section .checkbox-label input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;cursor:pointer;border-radius:4px}.library-panel{width:240px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease}.library-panel.collapsed{width:40px}.library-panel.collapsed .library-header{padding:12px 3px 0;justify-content:center}.library-panel.collapsed .library-header h2,.library-panel.collapsed .library-actions,.library-panel.collapsed .library-save-bar,.library-panel.collapsed .library-list{display:none}.library-header{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0;gap:6px}.library-header h2{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-foreground);flex:1;min-width:0}.library-actions{display:flex;gap:4px}.library-save-bar{padding:10px 12px}.save-name-input{width:100%;background:var(--secondary);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius);padding:7px 10px;font-family:inherit;font-size:13px;outline:none;transition:border-color .15s}.save-name-input:focus{border-color:var(--ring);box-shadow:0 0 0 2px #ffffff26}.save-name-input::placeholder{color:var(--muted-foreground);opacity:.6}.library-list{flex:1;overflow-y:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:1px}.library-empty{color:var(--muted-foreground);font-size:12px;text-align:center;padding:20px 8px;line-height:1.5}.library-folder{border-radius:var(--radius);transition:border-color .15s;border:1px solid transparent}.library-folder.drag-over{border-color:var(--primary);background:#ffffff0d}.library-folder-header{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:var(--radius);cursor:default;-webkit-user-select:none;user-select:none;transition:background .1s}.library-folder-header:hover{background:var(--accent)}.library-folder-toggle{background:none;border:none;color:var(--muted-foreground);font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;border-radius:3px;transition:color .1s,background .1s}.library-folder-toggle:hover{color:var(--foreground);background:#ffffff0f}.library-folder-icon{width:14px;height:14px;fill:var(--muted-foreground);flex-shrink:0}.library-folder-name{flex:1;font-size:13px;font-weight:500;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.library-folder-count{font-size:11px;color:var(--muted-foreground);flex-shrink:0;margin-left:auto;padding:0 4px}.library-folder-children{padding-left:16px;display:flex;flex-direction:column;gap:1px}.library-folder.collapsed .library-folder-children{display:none}.library-item,.library-folder{position:relative}.library-folder.dragging{opacity:.4}.drop-before:before{content:"";position:absolute;top:-2px;left:6px;right:6px;height:2px;background:var(--primary);border-radius:1px;z-index:10;pointer-events:none}.drop-after:after{content:"";position:absolute;bottom:-2px;left:6px;right:6px;height:2px;background:var(--primary);border-radius:1px;z-index:10;pointer-events:none}.library-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;transition:background .1s,border-color .1s}.library-item:hover{background:var(--accent)}.library-item:active{background:#ffffff14}.library-item.dragging{opacity:.4}.library-item-icon{width:14px;height:14px;fill:var(--muted-foreground);flex-shrink:0}.library-item-name{flex:1;font-size:13px;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.library-list.drag-over{background:#ffffff08}.library-rename-input{flex:1;min-width:0;background:var(--secondary);color:var(--foreground);border:1px solid var(--ring);border-radius:calc(var(--radius) - 2px);padding:2px 6px;font-family:inherit;font-size:13px;font-weight:400;outline:none;box-shadow:0 0 0 2px #ffffff26}.context-menu{position:fixed;z-index:200;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);padding:4px;min-width:160px;box-shadow:0 8px 30px #00000080}.context-menu-item{display:block;width:100%;padding:6px 10px;background:transparent;border:none;border-radius:calc(var(--radius) - 2px);color:var(--popover-foreground);font-family:inherit;font-size:13px;font-weight:400;cursor:pointer;text-align:left;transition:background .1s}.context-menu-item:hover{background:var(--accent)}.context-menu-item.danger{color:var(--destructive)}.context-menu-item.danger:hover{background:#dc26261a}.context-menu-separator{height:1px;background:var(--border);margin:4px 0}.controls-panel::-webkit-scrollbar,.library-list::-webkit-scrollbar,.library-panel::-webkit-scrollbar{width:6px}.controls-panel::-webkit-scrollbar-track,.library-list::-webkit-scrollbar-track,.library-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb,.library-list::-webkit-scrollbar-thumb,.library-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.controls-panel::-webkit-scrollbar-thumb:hover,.library-list::-webkit-scrollbar-thumb:hover,.library-panel::-webkit-scrollbar-thumb:hover{background:#ffffff2e}.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);opacity:0;pointer-events:none;transition:background .25s ease,backdrop-filter .25s ease,opacity .25s ease}.modal-backdrop.open{background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:1;pointer-events:auto}.modal-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:28px 32px 24px;min-width:340px;box-shadow:0 0 0 1px #ffffff0f,0 24px 48px #00000080,0 8px 16px #0000004d;transform:translateY(12px) scale(.97);transition:transform .25s cubic-bezier(.22,1,.36,1)}.modal-backdrop.open .modal-card{transform:translateY(0) scale(1)}.modal-title{font-size:15px;font-weight:600;color:var(--foreground);margin:0 0 4px;letter-spacing:.01em}.modal-subtitle{font-size:12px;color:var(--muted-foreground);margin:0 0 24px}.modal-fields{display:flex;align-items:flex-end;gap:12px;margin-bottom:24px}.modal-field{display:flex;flex-direction:column;gap:6px;flex:1}.modal-field-label{font-size:11px;font-weight:500;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}.modal-input-wrap{position:relative;display:flex;align-items:center}.modal-input{width:100%;padding:10px 36px 10px 12px;background:var(--secondary);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);color:var(--foreground);font-size:15px;font-family:inherit;font-weight:500;outline:none;transition:border-color .15s ease,box-shadow .15s ease;-moz-appearance:textfield}.modal-input::-webkit-inner-spin-button,.modal-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.modal-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #ffffff26}.modal-input-unit{position:absolute;right:12px;font-size:12px;color:var(--muted-foreground);pointer-events:none;font-weight:500}.modal-times{font-size:18px;color:var(--muted-foreground);padding-bottom:8px;-webkit-user-select:none;user-select:none}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-actions .btn{padding:8px 20px;font-size:13px}.user-button-slot{display:flex;align-items:center}.user-avatar{width:30px;height:30px;border-radius:50%;background:#3a3a3a;border:1.5px solid #555;color:#fff;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;letter-spacing:0;padding:0}.user-avatar:hover{background:#4a4a4a;border-color:#888}.user-avatar-menu{position:fixed;z-index:1000;background:#1e1e1e;border:1px solid #333;border-radius:8px;min-width:180px;box-shadow:0 8px 24px #0006;overflow:hidden}.user-avatar-menu-email{padding:10px 14px;font-size:12px;color:#888;border-bottom:1px solid #2a2a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-avatar-menu-item{display:block;width:100%;padding:10px 14px;text-align:left;background:none;border:none;color:#e5e5e5;font-size:13px;cursor:pointer;transition:background .1s}.user-avatar-menu-item:hover{background:#2a2a2a}.pro-badge[hidden]{display:none}.pro-badge{display:inline-flex;align-items:center;padding:2px 7px;background:#a3e635;color:#1a1a1a;font-size:10px;font-weight:700;border-radius:4px;letter-spacing:.07em;text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.export-tier-tag{display:inline-flex;align-items:center;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:5px}.export-tier-tag.pro-tag{background:#a3e635;color:#1a1a1a}.export-tier-tag.free-tag{background:transparent;color:var(--muted-foreground);border:1px solid var(--border)}.library-signin-prompt{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 16px}.library-signin-prompt p{font-size:12px;color:var(--muted-foreground);line-height:1.5}.btn-sm{padding:6px 14px;font-size:12px}.library-limit-bar{padding:7px 12px;font-size:11px;color:var(--muted-foreground);border-top:1px solid var(--border);text-align:center}.library-limit-bar.at-limit{color:var(--primary)}.bar-upgrade-link{background:none;border:none;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;font-family:inherit}.bar-upgrade-link:hover{opacity:.8}.upgrade-card{display:flex;flex-direction:column;gap:16px;min-width:320px;max-width:400px}.upgrade-icon-wrap{display:flex;justify-content:center}.upgrade-icon{font-size:28px;color:var(--primary);line-height:1}.upgrade-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.upgrade-features li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--foreground)}.upgrade-check{color:var(--primary);font-weight:700;font-size:14px;flex-shrink:0}.upgrade-price{font-size:28px;font-weight:700;color:var(--foreground);text-align:center;padding:4px 0}.upgrade-price-note{font-size:12px;font-weight:400;color:var(--muted-foreground)}.upgrade-waiting{font-size:11px;color:var(--muted-foreground);text-align:center;margin:0;padding-top:4px}