:root{--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Space Grotesk", sans-serif;--color-bg-base:#f8fafc;--color-bg-surface:#fff;--color-bg-elevated:#f1f5f9;--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-primary:#0f172a;--color-primary-hover:#1e293b;--color-primary-accent:#2563eb;--color-text-main:#0f172a;--color-text-muted:#475569;--color-text-dim:#94a3b8;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--shadow-sm:0 1px 3px #0f172a0f;--shadow-card:0 10px 30px #0f172a14;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--color-bg-base);color:var(--color-text-main);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}.app-main-layout{background:radial-gradient(at top,#fff 0%,#f8fafc 70%,#f1f5f9 100%);flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:40;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);background:#ffffffe6;padding:14px 24px;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;gap:16px;max-width:1300px;margin:0 auto;display:flex}.brand-logo{align-items:center;gap:12px;display:flex}.logo-icon-wrapper{border-radius:var(--radius-md);color:#fff;width:40px;height:40px;box-shadow:var(--shadow-sm);background:#0f172a;justify-content:center;align-items:center;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:-.02em;color:#0f172a;font-size:1.25rem;font-weight:700;line-height:1.1}.title-info-row{align-items:center;gap:6px;display:flex}.info-icon-btn{border:1px solid var(--color-border);background:var(--color-bg-elevated);width:24px;height:24px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.info-icon-btn:hover{color:var(--color-text-main);border-color:var(--color-border-hover);background:var(--color-bg-surface);transform:scale(1.08)}.brand-highlight{color:#2563eb}.brand-tagline{color:var(--color-text-muted);font-size:.75rem}.header-actions{align-items:center;gap:10px;display:flex}.card-counter{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:9999px;align-items:baseline;gap:4px;padding:6px 14px;font-size:.85rem;display:flex}.count-number{color:var(--color-primary-accent);font-weight:700}.count-label{color:var(--color-text-muted);font-size:.75rem}.action-btn{border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;border:1px solid var(--color-border);background:var(--color-bg-surface);color:var(--color-text-main);transition:all var(--transition-fast);align-items:center;gap:8px;padding:8px 16px;font-size:.875rem;font-weight:600;display:inline-flex}.action-btn:hover{background:var(--color-bg-elevated);border-color:var(--color-border-hover);transform:translateY(-1px)}.action-btn.active{color:#2563eb;background:#eff6ff;border-color:#2563eb}.action-btn.secondary-btn{background:var(--color-bg-surface)}.action-btn.primary-btn{color:#fff;background:#0f172a;border:none;font-weight:600;box-shadow:0 4px 12px #0f172a26}.action-btn.primary-btn:hover{background:#1e293b;box-shadow:0 6px 16px #0f172a40}.action-btn.icon-only-btn{padding:8px}.action-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:auto;box-shadow:none!important;transform:none!important}.main-content-viewport{flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:24px;display:flex}.layout-split{justify-content:center;align-items:flex-start;gap:24px;width:100%;display:flex}.showcase-center-stage{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.showcase-outer-container{width:100%;max-width:860px}.showcase-card-grid-wrapper{border-radius:var(--radius-xl);border:1px solid var(--card-border,#0f172a1f);box-shadow:var(--shadow-card);transition:background var(--transition-normal);box-sizing:border-box;flex-direction:column;gap:clamp(12px,3cqw,24px);width:100%;padding:clamp(16px,4cqw,32px);display:flex;container-type:inline-size}.showcase-header{text-align:center;flex-direction:column;gap:4px;display:flex}.showcase-title{font-family:var(--font-display);letter-spacing:-.02em;color:inherit;font-size:clamp(1.1rem,3.5cqw,1.6rem);font-weight:700}.showcase-subtitle{color:var(--subtext-color,#64748b);font-size:clamp(.75rem,2cqw,.9rem);font-weight:500}.grid-3x3{grid-template-columns:repeat(3,1fr);width:100%;display:grid}.card-slot-wrapper{aspect-ratio:2.5/3.5;background:var(--card-bg,#fff);border:1px dashed var(--card-border,#0f172a26);transition:all var(--transition-fast);position:relative;overflow:hidden}.card-slot-wrapper.filled{border-style:solid;box-shadow:0 6px 16px #0f172a14}.card-slot-wrapper:hover{border-color:var(--accent-color,#2563eb)}.card-slot-wrapper.dragging{opacity:.4;transform:scale(.95)}.card-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.card-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal);display:block}.card-slot-wrapper.filled:hover .card-image{transform:scale(1.03)}.holo-foil-overlay{pointer-events:none;opacity:0;mix-blend-mode:color-dodge;background:linear-gradient(115deg,#0000 0%,#ffffff4d 25%,#ff009633 45%,#0ff3 55%,#ffffff4d 75%,#0000 100%) 0 0/250% 250%;transition:opacity .3s;position:absolute;inset:0}.card-slot-wrapper.filled:hover .holo-foil-overlay{opacity:.85;animation:3s linear infinite foilShimmer}@keyframes foilShimmer{0%{background-position:0 0}to{background-position:100% 100%}}.slot-actions-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--transition-fast);z-index:10;background:#0f172abf;flex-direction:column;justify-content:space-between;padding:10px;display:flex;position:absolute;inset:0}.card-slot-wrapper.filled:hover .slot-actions-overlay{opacity:1}.drag-handle{color:#fff;border-radius:var(--radius-sm);cursor:grab;background:#ffffff40;align-self:flex-end;padding:6px}.action-button-group{gap:6px;width:100%;display:flex}.slot-action-btn{border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--transition-fast);border:none;justify-content:center;align-items:center;gap:4px;padding:6px 10px;font-size:.75rem;font-weight:600;display:flex}.slot-action-btn.replace-btn{color:#0f172a;background:#fff;flex:1}.slot-action-btn.delete-btn{color:#fff;background:#ef4444e6}.slot-action-btn:hover{transform:scale(1.05)}.card-set-badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:var(--radius-sm);color:#fff;pointer-events:none;z-index:5;background:#0f172ad9;border:1px solid #fff3;padding:2px 6px;font-size:.65rem;font-weight:600;position:absolute;bottom:8px;left:8px}.card-name-footer{inset-x:0;text-align:center;z-index:4;background:linear-gradient(#0000,#0f172ae6);padding:12px 8px 6px;position:absolute;bottom:0}.card-title-text{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;font-weight:700;display:block;overflow:hidden}.empty-slot-btn{width:100%;height:100%;color:var(--subtext-color,var(--color-text-muted));cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;display:flex}.empty-icon-circle{border:1px solid var(--color-border);width:40px;height:40px;transition:all var(--transition-fast);background:#0f172a0a;border-radius:50%;justify-content:center;align-items:center;display:flex}.empty-slot-btn:hover .empty-icon-circle{background:var(--accent-color,#0f172a);color:#fff;transform:scale(1.08)}.empty-slot-label{font-size:.8rem;font-weight:600}.showcase-footer{color:var(--subtext-color,#94a3b8);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-sizing:border-box;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(3px,1.2cqw,8px);width:100%;max-width:100%;font-size:clamp(.48rem,1.65cqw,.75rem);font-weight:600;display:flex;overflow:hidden}.showcase-footer span{white-space:nowrap;flex-shrink:0}.watermark-brand{color:var(--accent-color,#0f172a)}.watermark-handle{color:var(--accent-color,#0f172a);font-weight:700}.customizer-panel-drawer{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:320px;max-height:82vh;box-shadow:var(--shadow-card);flex-direction:column;display:flex;overflow:hidden}.panel-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.panel-title{color:var(--color-text-main);align-items:center;gap:8px;font-size:.95rem;font-weight:700;display:flex}.close-panel-btn{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;padding:4px}.panel-scroll-content{flex-direction:column;gap:20px;padding:20px;display:flex;overflow-y:auto}.panel-section{flex-direction:column;gap:12px;display:flex}.section-heading{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);align-items:center;gap:6px;font-size:.8rem;font-weight:700;display:flex}.input-field-group{flex-direction:column;gap:4px;display:flex}.field-label{color:var(--color-text-muted);font-size:.75rem}.panel-text-input{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text-main);font-family:var(--font-sans);padding:8px 12px;font-size:.85rem}.panel-text-input:focus{border-color:var(--color-primary-accent);outline:none}.themes-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.theme-card-option{border-radius:var(--radius-md);background:var(--color-bg-surface);border:1px solid var(--color-border);cursor:pointer;text-align:left;transition:all var(--transition-fast);align-items:center;gap:8px;padding:6px;display:flex}.theme-card-option:hover{border-color:var(--color-border-hover)}.theme-card-option.active{background:#eff6ff;border-color:#2563eb}.theme-color-preview{color:#0f172a;border:1px solid #0f172a1a;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.theme-name{color:var(--color-text-main);font-size:.75rem;font-weight:600}.toggle-option-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.toggle-title{font-size:.85rem;font-weight:600;display:block}.toggle-description{color:var(--color-text-muted);font-size:.7rem;display:block}.custom-checkbox{accent-color:#2563eb;cursor:pointer;width:18px;height:18px}.slider-group{flex-direction:column;gap:6px;display:flex}.slider-label-row{color:var(--color-text-muted);justify-content:space-between;font-size:.8rem;display:flex}.slider-value{color:var(--color-text-main);font-weight:700}.panel-range-slider{accent-color:#2563eb;cursor:pointer}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a66;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.search-modal-container{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:760px;max-height:85vh;box-shadow:var(--shadow-card);flex-direction:column;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:flex-start;padding:20px 24px;display:flex}.modal-title{font-family:var(--font-display);color:var(--color-text-main);align-items:center;gap:10px;font-size:1.15rem;font-weight:700;display:flex}.target-slot-badge{color:#2563eb;font-size:.75rem;font-family:var(--font-sans);background:#eff6ff;border-radius:9999px;padding:2px 8px}.modal-subtitle{color:var(--color-text-muted);margin-top:2px;font-size:.8rem}.modal-close-btn{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;padding:4px}.search-input-wrapper{padding:16px 24px 8px;position:relative}.search-icon{color:var(--color-text-dim);position:absolute;top:28px;left:38px}.search-input{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;color:var(--color-text-main);font-family:var(--font-sans);padding:12px 16px 12px 46px;font-size:.95rem}.search-input:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1a}.clear-search-btn{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;position:absolute;top:28px;right:36px}.quick-search-section{align-items:center;gap:8px;padding:0 24px 8px;display:flex}.section-label{color:var(--color-text-dim);white-space:nowrap;font-size:.75rem}.quick-chips-list{gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.quick-chip{background:var(--color-bg-elevated);border:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);border-radius:9999px;padding:3px 10px;font-size:.75rem}.quick-chip:hover,.quick-chip.active{color:#fff;background:#0f172a;font-weight:600}.type-filter-bar{align-items:center;gap:8px;padding:0 24px 12px;display:flex}.filter-label-icon{color:var(--color-text-dim)}.type-tabs-scroll{gap:6px;display:flex;overflow-x:auto}.type-tab{color:var(--color-text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:4px 10px;font-size:.8rem}.type-tab.active{background:var(--color-bg-elevated);color:var(--color-text-main);font-weight:700}.modal-body-results{flex:1;min-height:280px;padding:16px 24px;overflow-y:auto}.loading-state,.error-state,.empty-results-state{height:240px;color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.spinner-icon{color:var(--color-primary-accent);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cards-results-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;display:grid}.card-result-item{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);flex-direction:column;align-items:center;gap:6px;padding:6px;display:flex}.card-result-item:hover{border-color:#2563eb;transform:translateY(-2px);box-shadow:0 6px 15px #2563eb1f}.scroll-sentinel{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:60px;padding:24px 0 16px;display:flex}.bottom-loading-wrapper{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.skeleton-bottom-grid{opacity:.6;width:100%}.loading-more-pill{background:var(--color-bg-elevated);border:1px solid var(--color-border);color:var(--color-text-muted);box-shadow:var(--shadow-sm);border-radius:9999px;align-items:center;gap:8px;padding:6px 16px;font-size:.8rem;font-weight:600;display:inline-flex}.end-of-results-badge{background:var(--color-bg-elevated);border:1px solid var(--color-border);color:var(--color-text-dim);border-radius:9999px;align-items:center;gap:6px;padding:6px 14px;font-size:.775rem;font-weight:600;display:inline-flex}.card-skeleton-item{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);aspect-ratio:2.5/3.7;flex-direction:column;gap:8px;padding:6px;display:flex}.card-skeleton-item.mini{aspect-ratio:2.5/3.2}.skeleton-img-placeholder{border-radius:var(--radius-sm);background:var(--color-bg-elevated);flex:1;width:100%}.skeleton-line{background:var(--color-bg-elevated);border-radius:4px;width:75%;height:10px;margin:0 auto}.skeleton-line-sub{background:var(--color-bg-elevated);border-radius:4px;width:45%;height:8px;margin:0 auto}.shimmer-effect{background:linear-gradient(90deg, var(--color-bg-elevated) 0%, #fffc 50%, var(--color-bg-elevated) 100%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.about-modal-container{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:440px;box-shadow:var(--shadow-card);flex-direction:column;display:flex;overflow:hidden}.about-title-group{flex-direction:column;display:flex}.about-modal-body{flex-direction:column;gap:20px;padding:24px;display:flex}.creator-info-card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:8px;padding:16px;display:flex}.creator-text{color:var(--color-text-main);align-items:center;gap:4px;font-size:.95rem;display:flex}.heart-icon{color:#ef4444;fill:#ef4444}.creator-desc{color:var(--color-text-muted);font-size:.8rem;line-height:1.45}.about-links-group{flex-direction:column;gap:10px;display:flex}.links-group-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dim);font-size:.75rem;font-weight:700}.about-link-item{border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-bg-surface);color:var(--color-text-main);transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:12px 16px;text-decoration:none;display:flex}.about-link-item:hover{border-color:var(--color-primary-accent);background:var(--color-bg-elevated);transform:translateY(-1px)}.link-left{align-items:center;gap:12px;display:flex}.x-logo-icon{text-align:center;width:22px;font-size:1.1rem;font-weight:700}.globe-icon{color:#2563eb}.tcgdex-icon{color:#059669}.link-text-stack{flex-direction:column;display:flex}.link-title{font-size:.875rem;font-weight:600}.link-handle{color:var(--color-text-muted);font-size:.725rem}.external-icon{color:var(--color-text-dim)}.about-disclaimer-box{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px 12px}.disclaimer-text{color:var(--color-text-dim);text-align:left;font-size:.68rem;line-height:1.45}.result-img-wrapper img{object-fit:cover;width:100%;height:100%}.result-card-info{text-align:center;width:100%}.result-card-name{color:var(--color-text-main);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;font-weight:700;display:block;overflow:hidden}.result-card-set{color:var(--color-text-dim);font-size:.65rem;display:block}.export-modal-container{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);width:100%;max-width:480px;box-shadow:var(--shadow-card);flex-direction:column;gap:20px;padding:24px;display:flex}.export-actions-grid{flex-direction:column;gap:12px;display:flex}.export-card-btn{border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-bg-surface);color:var(--color-text-main);cursor:pointer;text-align:left;transition:all var(--transition-fast);align-items:center;gap:14px;padding:14px 18px;display:flex}.export-card-btn:hover{border-color:var(--color-border-hover);background:var(--color-bg-elevated)}.export-card-btn.primary{color:#fff;background:#0f172a;border:none}.export-card-btn.primary:hover{background:#1e293b}.btn-label-group{flex-direction:column;display:flex}.main-label{font-size:.9rem;font-weight:700}.sub-label{opacity:.75;font-size:.72rem}.export-error-notice{color:#dc2626;text-align:center;font-size:.8rem}@media (width<=900px){.layout-split{flex-direction:column}.customizer-panel-drawer{width:100%;max-height:none}.header-actions .btn-text{display:none}}