:root{--c-primary: #302B27;--c-accent: #C4956A;--c-accent-dark: #A67B52;--c-accent-light:#E8D5C0;--c-cta: #E06B3C;--c-cta-hover: #CC5A2E;--c-cta-light: #FFF0EB;--c-cta-glow: rgba(224, 107, 60, .25);--c-bg: #F7F3EE;--c-bg-warm: #F2ECE4;--c-bg-canvas: #EDE7DD;--c-bg-card: #FFFFFF;--c-bg-card-alt: #FDFBF8;--c-bg-elevated: #FFFFFF;--c-bg-sunken: #EDE8E0;--c-text: #302B27;--c-text-secondary: #6B6259;--c-text-muted: #9C9389;--c-text-light: #B8AFA5;--c-text-inverse:#FFFFFF;--c-border: #DDD6CC;--c-border-light:#EBE6DE;--c-border-focus: var(--c-cta);--c-ai-redraw: #3D8B7A;--c-ai-redraw-light: #E8F5F1;--c-ai-create: #B86E3C;--c-ai-create-light: #FDF0E6;--c-danger: #DC3545;--c-danger-light:#FFF1F2;--c-danger-border:#FECDD3;--c-success: #16A34A;--c-success-light:#F0FDF4;--c-success-border:#BBF7D0;--c-warning-light:#FFF7ED;--c-warning-border:#FED7AA;--c-shadow: rgba(30, 27, 24, .06);--c-shadow-md: rgba(30, 27, 24, .1);--c-shadow-lg: rgba(30, 27, 24, .14);--c-highlight: rgba(224, 107, 60, .08);--ff-display: "Outfit", "Noto Sans SC", "Inter", system-ui, sans-serif;--ff-body: "DM Sans", "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--ff-mono: "JetBrains Mono", "Fira Code", monospace;--ff-brand: "Amatic SC", cursive;--fs-2xs: .6875rem;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base:1rem;--fs-md: 1.125rem;--fs-lg: 1.25rem;--fs-xl: 1.5rem;--fs-2xl: 1.875rem;--fs-3xl: 2.25rem;--fs-brand: 2.5rem;--fw-regular: 400;--fw-medium: 500;--fw-semi: 600;--fw-bold: 700;--lh-heading: 1.15;--lh-tight: 1.3;--lh-snug: 1.45;--lh-normal: 1.6;--sp-0: 0;--sp-px: 1px;--sp-0\.5: .125rem;--sp-1: .25rem;--sp-1\.5: .375rem;--sp-2: .5rem;--sp-2\.5: .625rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--sp-12: 3rem;--sp-16: 4rem;--sp-20: 5rem;--sp-24: 6rem;--r-xs: 4px;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-xl: 20px;--r-2xl: 24px;--r-full: 9999px;--shadow-xs: 0 1px 2px var(--c-shadow);--shadow-sm: 0 1px 3px var(--c-shadow), 0 1px 2px var(--c-shadow);--shadow-md: 0 4px 12px var(--c-shadow-md), 0 2px 4px var(--c-shadow);--shadow-lg: 0 8px 24px var(--c-shadow-lg), 0 4px 8px var(--c-shadow);--shadow-xl: 0 16px 48px var(--c-shadow-lg), 0 8px 16px var(--c-shadow-md);--shadow-inner: inset 0 1px 3px rgba(0,0,0,.06);--shadow-glow: 0 0 0 3px var(--c-cta-glow);--c-topbar-bg: rgba(247, 243, 238, .85);--c-overlay-heavy: rgba(30, 27, 24, .85);--c-overlay-medium: rgba(30, 27, 24, .55);--c-overlay-light: rgba(30, 27, 24, .5);--c-close-bg: rgba(30, 27, 24, .6);--c-white-90: rgba(255, 255, 255, .9);--c-white-60: rgba(255, 255, 255, .6);--c-white-50: rgba(255, 255, 255, .5);--c-white-10: rgba(255, 255, 255, .1);--c-cta-15: rgba(224, 107, 60, .15);--c-swatch-border: rgba(0, 0, 0, .08);--tr-fast: .12s ease;--tr-normal: .2s ease;--tr-smooth: .3s cubic-bezier(.4, 0, .2, 1);--tr-bounce: .4s cubic-bezier(.16, 1, .3, 1);--tr-spring: .5s cubic-bezier(.16, 1, .3, 1);--topbar-h: 64px;--max-w: 1280px;--sidebar-w: 340px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}svg:not(:root){display:block;flex-shrink:0;margin-top:-1px}button,select,input,textarea,[role=button]{font:inherit;color:inherit;border:none;background:none;cursor:pointer}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px;border-radius:var(--r-md)}input[type=range],select{cursor:pointer}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{font-family:var(--ff-body);font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-normal);font-kerning:normal;color:var(--c-text);background-color:var(--c-bg);min-height:100dvh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size:256px 256px}body:after{content:"";position:fixed;top:0;left:0;right:0;height:300px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(224,107,60,.04) 0%,rgba(196,149,106,.02) 40%,transparent 100%)}img{display:block;max-width:100%}a{color:var(--c-cta);text-decoration:none}::selection{background:var(--c-cta-light);color:var(--c-cta-hover)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--r-full)}::-webkit-scrollbar-thumb:hover{background:var(--c-text-muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.ai-loading:not([hidden]),.settings-modal:not([hidden]),.modal-overlay:not([hidden]){display:flex!important}.preview-modal:not([hidden]){display:flex!important;flex-direction:column}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.topbar{position:sticky;top:0;z-index:100;height:var(--topbar-h);background:var(--c-topbar-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--c-border-light)}.topbar__inner{max-width:var(--max-w);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-6)}.topbar__brand{display:flex;align-items:center;gap:var(--sp-3)}.topbar__logo{display:flex;align-items:center;transition:transform var(--tr-bounce)}.topbar__logo:hover{transform:rotate(-6deg) scale(1.05)}.topbar__title{font-family:var(--ff-brand);font-size:var(--fs-brand);font-weight:var(--fw-bold);color:var(--c-primary);line-height:var(--lh-heading);letter-spacing:2px}.topbar__subtitle{font-family:var(--ff-display);font-size:var(--fs-2xs);color:var(--c-accent-dark);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:4px;margin-top:3px}.topbar__nav{display:flex;align-items:center;gap:var(--sp-2)}.topbar__nav-btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1;color:var(--c-text-secondary);min-height:44px;transition:background var(--tr-normal),color var(--tr-normal);border:none;background:none}.topbar__nav-btn svg{flex-shrink:0;display:block}.topbar__nav-btn:hover{background:var(--c-bg-warm);color:var(--c-cta)}.mode-capsule{display:inline-flex;align-items:center;gap:var(--sp-1\.5);padding:var(--sp-1\.5) var(--sp-3);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1;color:var(--c-text-secondary);background:var(--c-bg-warm);border:1px solid var(--c-border-light);min-height:36px;transition:background var(--tr-normal),border-color var(--tr-normal),color var(--tr-normal);cursor:pointer}.mode-capsule:hover{background:var(--c-bg-canvas);border-color:var(--c-border);color:var(--c-text)}.mode-capsule__icon{display:inline-flex;align-items:center;flex-shrink:0}.mode-capsule__icon svg{display:block}.mode-capsule__count{opacity:.7}.user-menu{position:relative}.user-menu__trigger{display:inline-flex;align-items:center;gap:var(--sp-2);border:none;background:none}.user-avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--c-bg-canvas);display:flex;align-items:center;justify-content:center;color:var(--c-text-muted);border:1.5px solid var(--c-border)}.credits-badge{font-size:var(--fs-2xs);font-weight:var(--fw-semi);background:var(--c-accent-dark);color:#fff;padding:2px 7px;border-radius:var(--r-full);min-width:18px;text-align:center;font-variant-numeric:tabular-nums}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--sp-2);z-index:200;will-change:opacity,transform;animation:dropdownIn .2s cubic-bezier(.16,1,.3,1)}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.user-dropdown__credits{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3);margin-bottom:var(--sp-1);background:var(--c-cta-light);border-radius:var(--r-md)}.user-dropdown__credits-label{font-size:var(--fs-xs);color:var(--c-text-secondary)}.user-dropdown__credits-value{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-cta);font-family:var(--ff-mono)}.user-dropdown__item{display:flex;align-items:center;gap:var(--sp-2\.5);width:100%;padding:var(--sp-2\.5) var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--c-text-secondary);line-height:1;transition:background var(--tr-fast),color var(--tr-fast);min-height:40px}.user-dropdown__item:hover{background:var(--c-bg-warm);color:var(--c-text)}.user-dropdown__item--danger:hover{background:var(--c-danger-light);color:var(--c-danger)}.user-dropdown__divider{height:1px;background:var(--c-border-light);margin:var(--sp-1) var(--sp-2)}.main{max-width:var(--max-w);margin:0 auto;padding:var(--sp-8) var(--sp-6) var(--sp-16);min-height:calc(100dvh - var(--topbar-h))}.app-view{animation:fadeUp .4s cubic-bezier(.16,1,.3,1)}.step-section{margin-bottom:var(--sp-6)}.step-section__label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-accent-dark);margin-bottom:var(--sp-3);letter-spacing:.3px}.step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-full);background:var(--c-cta);color:#fff;font-size:var(--fs-2xs);font-weight:var(--fw-bold);flex-shrink:0}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);padding:var(--sp-12) var(--sp-8);border:1.5px dashed var(--c-border);border-radius:var(--r-2xl);background:var(--c-bg-card);cursor:pointer;transition:border-color var(--tr-smooth),background var(--tr-smooth),box-shadow var(--tr-smooth);position:relative;overflow:hidden}.upload-zone:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--c-cta-light) 0%,transparent 70%);opacity:0;transition:opacity var(--tr-smooth)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--c-cta);box-shadow:var(--shadow-md)}.upload-zone:hover:before,.upload-zone.drag-over:before{opacity:.4}.upload-zone__icon{position:relative;z-index:1;width:68px;height:68px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xl);background:var(--c-bg-warm);color:var(--c-accent-dark);transition:background var(--tr-normal),color var(--tr-normal)}.upload-zone:hover .upload-zone__icon{background:var(--c-cta-light);color:var(--c-cta)}.upload-zone__text-group{position:relative;z-index:1;text-align:center}.upload-zone__text{font-size:var(--fs-md);color:var(--c-text-secondary);font-weight:var(--fw-medium)}.upload-zone__link{color:var(--c-cta);font-weight:var(--fw-semi);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--tr-fast)}.upload-zone:hover .upload-zone__link{text-decoration-color:var(--c-cta)}.upload-zone__hint{font-size:var(--fs-xs);color:var(--c-text-muted)}.source-card{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--c-bg-card);box-shadow:var(--shadow-md);max-width:480px;margin:0 auto;animation:scaleIn .3s cubic-bezier(.16,1,.3,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.source-card__img-wrap{max-height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--c-bg-sunken)}.source-card__img-wrap img{width:100%;height:100%;object-fit:contain}.source-card__close{position:absolute;top:var(--sp-2);right:var(--sp-2);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:#ffffffeb;color:var(--c-text-secondary);border:1px solid var(--c-border-light);cursor:pointer;box-shadow:0 2px 8px #0000001f;transition:background var(--tr-fast),color var(--tr-fast),transform var(--tr-fast);z-index:2}.source-card__close:hover{background:var(--c-danger);color:#fff;border-color:var(--c-danger);transform:scale(1.08)}.controls-stack{display:flex;flex-direction:column;gap:var(--sp-4)}.ctrl-card{background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--r-xl);overflow:hidden;transition:box-shadow var(--tr-normal)}.ctrl-card:hover{box-shadow:var(--shadow-sm)}.ctrl-card__interior{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6)}.ctrl-card__header-row{display:flex;align-items:center;gap:var(--sp-2\.5)}.ctrl-card__title-group{display:flex;align-items:center;gap:var(--sp-2\.5);line-height:1}.ctrl-card__title-group svg,.ctrl-card__header-row>svg{color:var(--c-accent-dark);flex-shrink:0;width:18px;height:18px}.ctrl-card__title{font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-text);letter-spacing:.2px}.ctrl-card__divider{border:none;height:1px;background:var(--c-border);opacity:.5}.presets-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}.size-preset-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-2) 0;min-width:46px;min-height:40px;border-radius:var(--r-md);border:1.5px solid var(--c-border-light);background:var(--c-bg-warm);font-size:var(--fs-sm);font-weight:var(--fw-semi);font-family:var(--ff-mono);color:var(--c-text-secondary);text-align:center;transition:all var(--tr-normal)}.size-preset-btn:hover{background:var(--c-bg-card);border-color:var(--c-accent);color:var(--c-text);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.size-preset-btn.active{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-text-inverse);box-shadow:0 2px 10px var(--c-cta-glow);transform:translateY(-1px)}.slider-row{display:flex;align-items:center;gap:var(--sp-3)}.pixel-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--r-full);background:linear-gradient(to right,var(--c-accent-light) 0%,var(--c-accent-light) var(--slider-pct, 30%),var(--c-border) var(--slider-pct, 30%),var(--c-border) 100%);transition:background var(--tr-fast)}.pixel-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:var(--r-full);background:var(--c-cta);border:3px solid var(--c-bg-card);box-shadow:0 1px 4px var(--c-shadow-md),0 0 0 1px var(--c-cta-glow);cursor:pointer;transition:transform var(--tr-normal),box-shadow var(--tr-normal)}.pixel-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px var(--c-shadow-md),0 0 0 4px var(--c-cta-glow)}.pixel-slider::-moz-range-thumb{width:22px;height:22px;border-radius:var(--r-full);background:var(--c-cta);border:3px solid var(--c-bg-card);box-shadow:0 2px 6px var(--c-shadow-md);cursor:pointer}.pixel-slider__value{font-family:var(--ff-mono);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--c-cta);min-width:40px;text-align:right;flex-shrink:0}.brand-row{display:flex;align-items:center;gap:var(--sp-2\.5)}.brand-row__label{font-family:var(--ff-display);font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--c-text-muted);white-space:nowrap;letter-spacing:.3px}.brand-select{padding:var(--sp-1\.5) var(--sp-2\.5);border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-bg-card);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text);cursor:pointer;transition:border-color var(--tr-fast)}.brand-select:hover{border-color:var(--c-accent)}.brand-select:focus{border-color:var(--c-cta);box-shadow:var(--shadow-glow);outline:none}.brand-select:disabled{opacity:.45;cursor:not-allowed}.mode-toggle{display:inline-flex;gap:2px;padding:3px;margin-left:auto;background:var(--c-bg-sunken, #F0EDE8);border-radius:var(--r-lg)}.mode-toggle__btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:calc(var(--r-lg) - 2px);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-muted);white-space:nowrap;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.mode-toggle__btn:hover{color:var(--c-text-secondary)}.mode-toggle__btn.active{background:var(--c-bg-card);color:var(--c-ai-redraw);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f}.mode-toggle__btn[data-mode=create].active{color:var(--c-ai-create)}.mode-hint{margin:0;font-size:var(--fs-sm);color:var(--c-text-muted);line-height:var(--lh-normal);padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);border-left:2px solid var(--c-ai-redraw);transition:color .2s ease,border-color .2s ease}.mode-hint--create{border-left-color:var(--c-ai-create);color:var(--c-text-secondary)}.mode-options{display:flex;gap:var(--sp-3);margin-top:var(--sp-2)}.option-card{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:var(--sp-4) var(--sp-4) var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--c-border-light);background:var(--c-bg-card);text-align:left;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.option-card:hover{border-color:var(--c-border);background:var(--c-bg-warm);box-shadow:0 1px 3px #0000000a}.option-card.active{border-color:var(--c-cta);background:var(--c-cta-light)}.option-card__check{position:absolute;top:var(--sp-2);right:var(--sp-2);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:var(--c-cta);color:var(--c-text-inverse);font-size:11px;font-weight:var(--fw-bold);opacity:0;transform:scale(.5);transition:all .18s ease}.option-card.active .option-card__check{opacity:1;transform:scale(1)}.option-card__title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-text);line-height:1;display:flex;align-items:center;gap:6px}.option-card__title svg{color:var(--c-text-secondary)}.option-card__desc{font-size:var(--fs-xs);color:var(--c-text-secondary);line-height:var(--lh-snug)}.style-ref{display:flex;flex-direction:column;gap:var(--sp-2)}.style-ref__label{font-family:var(--ff-display);font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--c-text-muted);letter-spacing:.3px}.style-ref__dropzone{border:1.5px dashed var(--c-border);border-radius:var(--r-md);padding:var(--sp-5);text-align:center;cursor:pointer;transition:all var(--tr-normal);min-height:96px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--c-bg-warm)}.style-ref__dropzone:hover{border-color:var(--c-ai-create);background:var(--c-ai-create-light)}.style-ref__placeholder{font-size:var(--fs-sm);color:var(--c-text-muted)}.style-ref__preview{position:relative;display:inline-flex}.style-ref__thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:2px solid var(--c-border-light)}.style-ref__remove{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:var(--r-full);background:var(--c-danger);color:var(--c-text-inverse);font-size:var(--fs-xs);display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;border:none;transition:transform var(--tr-fast)}.style-ref__remove:hover{transform:scale(1.15)}.generate-bar{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:0}.dims-info{font-size:var(--fs-xs);color:var(--c-text-muted);font-family:var(--ff-mono);text-align:center}.dims-info strong{color:var(--c-text);font-weight:var(--fw-semi)}.btn--generate{width:100%;justify-content:center;padding:var(--sp-4) var(--sp-8);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.5px;border-radius:var(--r-xl);min-height:56px;background:linear-gradient(135deg,var(--c-cta) 0%,var(--c-cta-hover) 100%);color:#fff;box-shadow:0 2px 8px var(--c-cta-glow),0 1px 3px #0000000f;transition:box-shadow .2s ease,filter .2s ease}.btn--generate:hover{box-shadow:0 3px 12px var(--c-cta-glow);filter:brightness(1.03)}.btn--generate:active{box-shadow:0 1px 4px var(--c-cta-glow);filter:brightness(.97)}.btn--generate:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-2\.5) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-semi);min-height:44px;transition:all var(--tr-normal);white-space:nowrap}.btn--primary{background:var(--c-cta);color:#fff;box-shadow:0 2px 8px var(--c-cta-glow)}.btn--primary:hover{background:var(--c-cta-hover);box-shadow:0 4px 16px var(--c-cta-glow);transform:translateY(-1px)}.btn--primary:active{transform:translateY(0);box-shadow:0 1px 4px var(--c-cta-glow)}.btn--primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn--outline{background:var(--c-bg-card);color:var(--c-text-secondary);border:1px solid var(--c-border)}.btn--outline:hover{background:var(--c-bg-warm);border-color:var(--c-accent);color:var(--c-text)}.btn--ghost{color:var(--c-text-secondary);padding:var(--sp-2) var(--sp-3)}.btn--ghost:hover{background:var(--c-bg-warm);color:var(--c-text)}.btn--danger{color:var(--c-danger)}.btn--danger:hover{background:var(--c-danger-light)}.btn--sm{padding:var(--sp-1\.5) var(--sp-2\.5);font-size:var(--fs-xs);min-height:32px}.btn--lg{padding:var(--sp-3) var(--sp-6);font-size:var(--fs-md);min-height:48px}.workspace{animation:fadeUp .4s cubic-bezier(.16,1,.3,1)}.workspace__inner{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--sp-4)}.canvas-area{display:flex;flex-direction:column;background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--r-xl);overflow:hidden;height:calc(100vh - 240px);min-height:300px}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2\.5) var(--sp-4);border-bottom:1px solid var(--c-border-light);background:var(--c-bg-card-alt);flex-wrap:wrap;gap:var(--sp-2);flex-shrink:0}.canvas-toolbar__right{display:flex;align-items:center;gap:var(--sp-3)}.view-toggle{display:flex;gap:var(--sp-1);padding:3px;background:var(--c-bg-warm);border-radius:var(--r-sm)}.view-btn{display:inline-flex;align-items:center;gap:var(--sp-1\.5);padding:var(--sp-1\.5) var(--sp-3);border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-muted);transition:background var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast);min-height:44px}.view-btn:hover{color:var(--c-text-secondary)}.view-btn.active{background:var(--c-bg-card);color:var(--c-cta);box-shadow:var(--shadow-xs)}.zoom-controls{display:flex;align-items:center;gap:var(--sp-1)}.zoom-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--c-text-muted);transition:all var(--tr-fast)}.zoom-btn:hover{background:var(--c-bg-warm);color:var(--c-text)}.zoom-btn--highlight{color:var(--c-cta)}.zoom-btn--highlight:hover{background:var(--c-cta-light)}.zoom-level{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--c-text-muted);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.grid-block-selector{display:flex;align-items:center;gap:var(--sp-1\.5);color:var(--c-text-muted)}.grid-block-select{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);border:1px solid var(--c-border);background:var(--c-bg-card);font-size:var(--fs-xs);font-family:var(--ff-mono);color:var(--c-text);cursor:pointer}.canvas-container{flex:1;min-height:0;overflow:auto;background:#fff;cursor:grab;border-radius:0 0 var(--r-xl) var(--r-xl);scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}.canvas-container::-webkit-scrollbar{width:6px;height:6px}.canvas-container::-webkit-scrollbar-track{background:transparent}.canvas-container::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}.canvas-container::-webkit-scrollbar-thumb:hover{background:#0000004d}.canvas-container::-webkit-scrollbar-corner{background:transparent}.canvas-container:active{cursor:grabbing}.canvas-container canvas{display:block;margin:auto;image-rendering:pixelated;image-rendering:crisp-edges}.bom-panel{display:flex;flex-direction:column;background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--r-xl);overflow:hidden;max-height:calc(100vh - 240px)}.bom-panel__header{padding:var(--sp-4);border-bottom:1px solid var(--c-border-light);display:flex;align-items:center;justify-content:space-between;background:var(--c-bg-card-alt)}.bom-panel__title{font-family:var(--ff-display);font-size:var(--fs-md);font-weight:var(--fw-semi)}.bom-panel__sort{display:flex;gap:var(--sp-1)}.sort-btn{padding:var(--sp-1) var(--sp-2\.5);border-radius:var(--r-xs);font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--c-text-muted);transition:all var(--tr-fast)}.sort-btn:hover{color:var(--c-text-secondary)}.sort-btn.active{background:var(--c-bg-warm);color:var(--c-text)}.bom-list{flex:1;overflow-y:auto;padding:var(--sp-2);min-height:0}.bom-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2\.5);border-radius:var(--r-sm);transition:background var(--tr-fast),border-color var(--tr-fast);cursor:default;border-left:3px solid transparent}.bom-item:hover,.bom-item.highlighted{background:var(--c-highlight);border-left-color:var(--c-accent)}.bom-item__swatch{width:28px;height:28px;border-radius:var(--r-sm);flex-shrink:0;border:1px solid var(--c-swatch-border);box-shadow:var(--shadow-xs)}.bom-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.bom-item__name{font-family:var(--ff-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text)}.bom-item__code{font-family:var(--ff-mono);font-size:var(--fs-2xs);color:var(--c-text-muted);text-transform:uppercase}.bom-item__count{font-family:var(--ff-mono);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-accent-dark);flex-shrink:0;font-variant-numeric:tabular-nums}.bom-panel__footer{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border-light);display:flex;justify-content:space-between;background:var(--c-bg-card-alt)}.bom-total{display:flex;flex-direction:column;gap:2px}.bom-total__label{font-size:var(--fs-2xs);color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.5px}.bom-total__count{font-family:var(--ff-mono);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--c-cta);font-variant-numeric:tabular-nums}.export-bar{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) 0;flex-wrap:wrap}.ai-loading{position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;background:var(--c-overlay-heavy);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ai-loading__content{text-align:center;color:#fff;max-width:400px;padding:var(--sp-8)}.ai-loading__spinner{position:relative;width:80px;height:80px;margin:0 auto var(--sp-6)}.ai-loading__ring{position:absolute;inset:0;border:3px solid var(--c-white-10);border-top-color:var(--c-cta);border-radius:50%;animation:spin 1s linear infinite}.ai-loading__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--c-cta)}.ai-loading__title{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:var(--fw-semi);line-height:var(--lh-heading);margin-bottom:var(--sp-2)}.ai-loading__sub{font-size:var(--fs-sm);color:var(--c-white-60);margin-bottom:var(--sp-6)}.ai-loading__progress{height:3px;background:var(--c-white-10);border-radius:var(--r-full);overflow:hidden}.ai-loading__bar{height:100%;width:40%;background:var(--c-cta);border-radius:var(--r-full);animation:loadingBar 2s ease-in-out infinite}@keyframes loadingBar{0%{transform:translate(-100%)}50%{transform:translate(150%)}to{transform:translate(-100%)}}.viewer{animation:fadeUp .4s cubic-bezier(.16,1,.3,1)}.viewer__topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);gap:var(--sp-4)}.viewer__title{flex:1;min-width:0}.viewer__title h3{font-family:var(--ff-display);font-size:var(--fs-lg);font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer__meta{font-size:var(--fs-xs);color:var(--c-text-muted)}.preview-modal{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;background:var(--c-bg);animation:fadeUp .25s ease}.preview-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--c-border-light);background:var(--c-bg-card)}.preview-modal__title{font-family:var(--ff-display);font-size:var(--fs-md);font-weight:var(--fw-semi)}.preview-modal__controls{display:flex;align-items:center;gap:var(--sp-4)}.preview-modal__canvas{flex:1;min-height:0;overflow:auto;background:#fff;cursor:grab;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}.preview-modal__canvas::-webkit-scrollbar{width:6px;height:6px}.preview-modal__canvas::-webkit-scrollbar-track{background:transparent}.preview-modal__canvas::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}.preview-modal__canvas::-webkit-scrollbar-thumb:hover{background:#0000004d}.preview-modal__canvas::-webkit-scrollbar-corner{background:transparent}.preview-modal__canvas:active{cursor:grabbing}.preview-modal__canvas canvas{display:block;margin:auto;image-rendering:pixelated;image-rendering:crisp-edges}.settings-modal{position:fixed;inset:0;z-index:400;align-items:flex-start;justify-content:center;padding-top:min(12vh,80px)}.settings-modal__backdrop{position:absolute;inset:0;background:var(--c-overlay-light);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-modal__content{position:relative;width:90%;max-width:480px;background:var(--c-bg-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);animation:modalIn .3s cubic-bezier(.16,1,.3,1)}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.settings-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--c-border-light)}.settings-modal__header h3{font-family:var(--ff-display);font-size:var(--fs-lg);font-weight:var(--fw-semi)}.settings-modal__close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--c-text-muted);transition:all var(--tr-fast);cursor:pointer;background:none;border:none}.settings-modal__close:hover{background:var(--c-bg-warm);color:var(--c-text)}.settings-modal__body{padding:var(--sp-6)}.settings-modal__footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--c-border-light);display:flex;justify-content:flex-end}.settings-field{margin-bottom:var(--sp-5)}.settings-field__label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-text);margin-bottom:var(--sp-1)}.settings-field__hint{font-size:var(--fs-xs);color:var(--c-text-muted);margin-bottom:var(--sp-3);line-height:var(--lh-snug)}.settings-field__input-group{display:flex;gap:var(--sp-2)}.settings-field__input{flex:1;padding:var(--sp-2\.5) var(--sp-3);border:1px solid var(--c-border);border-radius:var(--r-md);font-size:var(--fs-sm);background:var(--c-bg-card);color:var(--c-text);transition:border-color var(--tr-fast)}.settings-field__input:focus-visible{border-color:var(--c-cta);box-shadow:var(--shadow-glow)}.settings-field__input::placeholder{color:var(--c-text-light)}.api-mode-toggle{display:flex;gap:var(--sp-2)}.api-mode-toggle__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);border:1.5px solid var(--c-border);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-muted);background:var(--c-bg-card);transition:border-color var(--tr-normal),background var(--tr-normal),color var(--tr-normal);cursor:pointer;min-height:48px}.api-mode-toggle__btn:hover{border-color:var(--c-accent);color:var(--c-text-secondary)}.api-mode-toggle__btn--active{border-color:var(--c-cta);background:var(--c-cta-light);color:var(--c-cta)}.settings-mode-panel{margin-top:var(--sp-4)}.credits-info-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:linear-gradient(135deg,var(--c-cta-light) 0%,var(--c-bg-warm) 100%);border-radius:var(--r-lg);border:1px solid rgba(224,107,60,.15)}.credits-info-card__icon{color:var(--c-cta);display:flex;align-items:center}.credits-info-card__text{flex:1;display:flex;flex-direction:column;gap:2px}.credits-info-card__label{font-size:var(--fs-xs);color:var(--c-text-secondary)}.credits-info-card__value{font-family:var(--ff-mono);font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--c-cta)}.credits-info-card__unit{font-size:var(--fs-sm);color:var(--c-text-muted)}.modal-overlay{position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;background:var(--c-overlay-medium);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.auth-modal{width:90%;max-width:420px;background:var(--c-bg-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);animation:modalIn .3s cubic-bezier(.16,1,.3,1);overflow:hidden}.auth-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--c-border-light)}.auth-modal__title{font-family:var(--ff-display);font-size:var(--fs-lg);font-weight:var(--fw-semi)}.auth-modal__body{padding:var(--sp-6)}.auth-modal__footer{padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--c-border-light);text-align:center;font-size:var(--fs-2xs);color:var(--c-text-muted)}.auth-modal__error{padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-danger-light);border:1px solid var(--c-danger-border);color:var(--c-danger);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}.auth-modal__success{padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-success-light);border:1px solid var(--c-success-border);color:var(--c-success);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}.auth-modal__submit{width:100%;margin-top:var(--sp-3)}.auth-modal__toggle{display:block;width:100%;text-align:center;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--c-cta);cursor:pointer;background:none;border:none}.auth-modal__toggle:hover{text-decoration:underline}.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-bg-card);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text);transition:background var(--tr-normal),box-shadow var(--tr-normal);min-height:48px;cursor:pointer}.auth-google-btn:hover{background:var(--c-bg-warm);box-shadow:var(--shadow-sm)}.auth-divider{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-5) 0;color:var(--c-text-muted);font-size:var(--fs-xs)}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--c-border-light)}.auth-field{margin-bottom:var(--sp-3)}.auth-field__label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--c-text-secondary);margin-bottom:var(--sp-1\.5)}.auth-field__input{width:100%;padding:var(--sp-3);border:1.5px solid var(--c-border);border-radius:var(--r-md);font-size:var(--fs-base);background:var(--c-bg-card);color:var(--c-text);transition:border-color var(--tr-fast);min-height:48px}.auth-field__input:focus-visible{border-color:var(--c-cta);box-shadow:var(--shadow-glow)}.auth-field__input::placeholder{color:var(--c-text-light)}.auth-field__input--otp{font-family:var(--ff-mono);font-size:var(--fs-xl);letter-spacing:8px;text-align:center}.auth-otp-hint{font-size:var(--fs-sm);color:var(--c-text-secondary);margin-bottom:var(--sp-4);text-align:center}.auth-guest-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;padding:var(--sp-3);border-radius:var(--r-md);background:var(--c-bg-warm);border:1px solid var(--c-border-light);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-secondary);transition:background var(--tr-normal),color var(--tr-normal),border-color var(--tr-normal);min-height:48px;cursor:pointer}.auth-guest-btn:hover{background:var(--c-bg-canvas);color:var(--c-text)}.redeem-card{width:90%;max-width:400px;background:var(--c-bg-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xl),0 0 0 1px #0000000a;animation:modalIn .3s cubic-bezier(.16,1,.3,1);overflow:hidden}.redeem-card__header{position:relative;padding:var(--sp-6) var(--sp-6) var(--sp-5);background:linear-gradient(135deg,var(--c-cta) 0%,var(--c-ai-create) 50%,var(--c-accent) 100%);color:#fff;overflow:hidden}.redeem-card__header-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.12) 0%,transparent 50%),radial-gradient(circle at 85% 20%,rgba(255,255,255,.08) 0%,transparent 40%);pointer-events:none}.redeem-card__header-content{position:relative;z-index:1}.redeem-card__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#fff3;border-radius:var(--r-lg);margin-bottom:var(--sp-3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.redeem-card__title{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:var(--fw-bold);margin-bottom:4px;letter-spacing:.01em}.redeem-card__subtitle{font-size:var(--fs-sm);opacity:.85;line-height:var(--lh-snug)}.redeem-card__close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:#ffffffb3;background:#ffffff1a;border:none;cursor:pointer;transition:all var(--tr-fast);z-index:2}.redeem-card__close:hover{background:#ffffff40;color:#fff}.redeem-card__divider{position:relative;display:flex;align-items:center;height:24px;margin:0 -1px}.redeem-card__notch{width:24px;height:24px;border-radius:50%;background:var(--c-overlay-medium);flex-shrink:0;position:relative;z-index:1}.redeem-card__notch--left{margin-left:-12px}.redeem-card__notch--right{margin-right:-12px}.redeem-card__dash{flex:1;border-top:2px dashed var(--c-border-light);margin:0 var(--sp-2)}.redeem-card__body{padding:var(--sp-5) var(--sp-6) var(--sp-6)}.redeem-card__label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--c-text-secondary);margin-bottom:var(--sp-2);text-transform:uppercase;letter-spacing:.08em}.redeem-card__input-wrap{position:relative;margin-bottom:var(--sp-4)}.redeem-card__input{width:100%;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--c-border);border-radius:var(--r-md);font-family:var(--ff-mono);font-size:var(--fs-lg);letter-spacing:3px;text-transform:uppercase;text-align:center;color:var(--c-text);background:var(--c-bg-card-alt);transition:border-color var(--tr-fast),box-shadow var(--tr-fast);min-height:52px}.redeem-card__input:focus-visible{outline:none;border-color:var(--c-cta);box-shadow:var(--shadow-glow),0 0 0 3px var(--c-cta-glow)}.redeem-card__input::placeholder{color:var(--c-text-light);letter-spacing:3px}.redeem-card__submit{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);min-height:48px;border:none;border-radius:var(--r-md);background:linear-gradient(135deg,var(--c-cta) 0%,var(--c-cta-hover) 100%);color:#fff;font-family:var(--ff-body);font-size:var(--fs-base);font-weight:var(--fw-semi);letter-spacing:.02em;cursor:pointer;transition:transform var(--tr-fast),box-shadow var(--tr-fast),opacity var(--tr-fast);box-shadow:0 2px 8px #e06b3c4d}.redeem-card__submit:hover{transform:translateY(-1px);box-shadow:0 4px 16px #e06b3c66}.redeem-card__submit:active{transform:translateY(0);box-shadow:0 1px 4px #e06b3c33}.redeem-card__submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.redeem-card__msg{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:var(--lh-snug);margin-bottom:var(--sp-4);animation:fadeUp .2s ease}.redeem-card__msg svg{flex-shrink:0;margin-top:1px}.redeem-card__msg--error{background:var(--c-danger-light);border:1px solid var(--c-danger-border);color:var(--c-danger)}.redeem-card__msg--success{background:var(--c-success-light);border:1px solid var(--c-success-border);color:var(--c-success)}.toast{position:fixed;bottom:var(--sp-8);left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-full);background:var(--c-primary);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-medium);box-shadow:var(--shadow-lg);z-index:2000;animation:toastIn .3s cubic-bezier(.16,1,.3,1)}.toast svg{flex-shrink:0;color:var(--c-success)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(12px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.footer{text-align:center;padding:var(--sp-8) var(--sp-6);font-size:var(--fs-xs);color:var(--c-text-muted);border-top:1px solid var(--c-border-light);margin-top:var(--sp-8)}.footer a{color:var(--c-accent-dark);font-weight:var(--fw-medium)}.footer a:hover{color:var(--c-cta)}.portfolio-view{animation:fadeUp .4s cubic-bezier(.16,1,.3,1)}.portfolio-view__header{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}.portfolio-view__header h2{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:var(--fw-semi);line-height:var(--lh-heading)}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}.portfolio-card{background:var(--c-bg-card);border:1px solid var(--c-border-light);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:box-shadow var(--tr-normal),transform var(--tr-normal);position:relative;animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both}.portfolio-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.portfolio-card__thumb{width:100%;aspect-ratio:1;background:var(--c-bg-sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}.portfolio-card__thumb img{width:100%;height:100%;object-fit:cover}.portfolio-card__info{padding:var(--sp-3) var(--sp-4)}.portfolio-card__title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portfolio-card__meta{font-size:var(--fs-2xs);color:var(--c-text-muted);margin-top:2px;display:block}.portfolio-card__actions{position:absolute;top:var(--sp-2);right:var(--sp-2);opacity:0;transition:opacity var(--tr-fast);z-index:2}.portfolio-card:hover .portfolio-card__actions{opacity:1}.portfolio-card__delete{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:var(--c-white-90);color:var(--c-text-muted);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--c-border-light);transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast);cursor:pointer}.portfolio-card__delete svg{pointer-events:none}.portfolio-card__delete:hover{background:var(--c-danger-light);color:var(--c-danger);border-color:var(--c-danger-border)}.portfolio-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}.portfolio-skeleton__card{background:var(--c-bg-card);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border-light)}.portfolio-skeleton__thumb{aspect-ratio:1;background:linear-gradient(110deg,var(--c-bg-sunken) 30%,var(--c-bg-warm) 50%,var(--c-bg-sunken) 70%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.portfolio-skeleton__line{height:12px;margin:var(--sp-3) var(--sp-4);border-radius:var(--r-xs);background:var(--c-bg-sunken);animation:shimmer 1.5s ease-in-out infinite}.portfolio-skeleton__line--short{width:60%;margin-top:var(--sp-1);margin-bottom:var(--sp-4)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.portfolio-empty{text-align:center;padding:var(--sp-16) var(--sp-8);color:var(--c-text-muted);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}.portfolio-empty__icon{color:var(--c-cta);margin-bottom:var(--sp-2);display:flex;align-items:center;justify-content:center}.portfolio-empty p:first-of-type{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--c-text-secondary)}.portfolio-empty p:last-of-type{font-size:var(--fs-xs);color:var(--c-text-muted);max-width:280px}.portfolio-pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-6) 0 var(--sp-2)}.pagination-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-secondary);background:var(--c-bg-card);border:1px solid var(--c-border);transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);min-height:40px;cursor:pointer}.pagination-btn:hover:not(:disabled){background:var(--c-bg-warm);border-color:var(--c-cta);color:var(--c-cta)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-info{font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--c-text-muted);min-width:60px;text-align:center}@media(max-width:900px){.workspace__inner{grid-template-columns:1fr}.bom-panel{max-height:60vh}.bom-list{min-height:0}}@media(max-width:768px){.controls-stack{gap:var(--sp-3)}.upload-zone{padding:var(--sp-8) var(--sp-4)}.ctrl-card__interior{padding:var(--sp-4) var(--sp-5)}.mode-toggle{flex-wrap:wrap}.presets-row{gap:var(--sp-1)}}@media(max-width:640px){:root{--topbar-h: 56px;--sp-6: 1rem}.topbar__subtitle{display:none}.topbar__title{font-size:1.8rem}.main{padding:var(--sp-4) var(--sp-4) var(--sp-12)}.upload-zone{padding:var(--sp-6) var(--sp-4)}.btn--generate{width:100%;justify-content:center}.export-bar{justify-content:center}.canvas-container{min-height:280px}.preview-modal__header{padding:var(--sp-2) var(--sp-3)}.preview-modal__controls{gap:var(--sp-2)}.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.viewer__topbar{flex-wrap:wrap}}