.tool-layout{max-width:1100px;margin:0 auto;padding:var(--space-16) var(--space-24) var(--space-48);display:grid;grid-template-columns:1fr 340px;gap:var(--space-28);align-items:start}.tool-page{min-width:0}@media(max-width:900px){.tool-layout{grid-template-columns:1fr;gap:var(--space-16)}}.page-header{margin-bottom:var(--space-24)}.page-header h1{font-family:var(--font-display, "Syne Variable", sans-serif);font-size:var(--text-32);font-weight:700;color:var(--color-text);margin:0 0 var(--space-4)}.subtitle{color:var(--color-text-muted);font-size:var(--text-14);margin:0 0 var(--space-12)}.mode-toggle{display:flex;gap:0;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:10px;padding:3px;width:fit-content;margin-bottom:var(--space-16)}.mode-pill{padding:7px var(--space-18);border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text-muted);font-size:var(--text-13);font-weight:600;cursor:pointer;transition:background var(--dur-150),color var(--dur-150);font-family:var(--font-body, "Satoshi", sans-serif)}.mode-pill:hover:not(.mode-active){color:var(--color-text-muted)}.mode-active{background:var(--color-text);color:var(--color-bg-secondary)}.pro-lock{display:inline-block;font-size:var(--text-9);font-weight:700;color:var(--color-primary);background:rgb(var(--color-primary-rgb) / .1);border:1px solid rgb(var(--color-primary-rgb) / .25);border-radius:4px;padding:1px 5px;margin-left:var(--space-6);letter-spacing:.05em;vertical-align:middle}.gpu-offline-banner{display:flex;align-items:center;gap:var(--space-10);padding:var(--space-12) var(--space-16);background:#fbbf2414;border:1px solid rgba(251,191,36,.2);border-radius:12px;color:#fbbf24;font-size:var(--text-13);margin-bottom:var(--space-16)}.refresh-btn{margin-left:auto;padding:var(--space-4) var(--space-12);border-radius:var(--radius-sm);background:#fbbf2426;border:1px solid rgba(251,191,36,.3);color:#fbbf24;font-size:var(--text-12);font-weight:600;cursor:pointer;transition:background var(--dur-150)}.refresh-btn:hover{background:#fbbf2440}.progress-bar{margin-bottom:var(--space-20)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}.progress-label{font-size:var(--text-14);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-8)}.progress-right{display:flex;align-items:center;gap:var(--space-10)}.time-estimate{font-size:var(--text-13);color:var(--color-text-subtle);font-variant-numeric:tabular-nums}.progress-count{font-size:var(--text-14);color:var(--color-text-muted);font-variant-numeric:tabular-nums}.progress-track{width:100%;height:4px;background:var(--color-bg-tertiary);border-radius:2px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-primary);border-radius:2px;transition:width .4s var(--ease-default);position:relative;z-index:1}.progress-shimmer{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgb(var(--color-primary-rgb) / .15) 50%,transparent 100%);animation:shimmer 1.5s ease-in-out infinite}.mini-spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:ezc-spin .6s linear infinite}.comparison-strip{display:flex;align-items:center;justify-content:center;gap:var(--space-16);max-width:400px;margin:0 auto var(--space-24);padding:var(--space-16);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:12px}.comparison-img-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);flex:1;min-width:0}.comparison-img{width:100%;max-width:150px;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border)}.comparison-label{font-size:var(--text-11);color:var(--color-text-muted);letter-spacing:.02em}.comparison-arrow{color:var(--color-primary);flex-shrink:0}.result-card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-secondary);transition:transform var(--dur-200) var(--ease-default),box-shadow var(--dur-200) var(--ease-default)}.result-card:not(.skeleton-card):hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px #0000001f}.result-img-button{width:100%;display:block;padding:0;border:0;background:transparent;cursor:pointer}.result-img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.result-label{display:block;text-align:center;font-size:var(--text-11);color:var(--color-text-muted);padding:var(--space-4) 0 var(--space-6);letter-spacing:.02em}.result-download{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:#0000008c;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-150)}.result-card:hover .result-download{opacity:1}.result-download:hover{background:#000000d1;color:#fafafa}.skeleton-card{pointer-events:none}.skeleton-img{width:100%;aspect-ratio:1;background:var(--color-bg-tertiary);position:relative;overflow:hidden}.skeleton-img:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,var(--color-surface-hover) 50%,transparent 100%);animation:shimmer 1.5s ease-in-out infinite}.skeleton-label{color:var(--color-text-subtle)}.complete-banner{display:flex;align-items:center;justify-content:center;gap:var(--space-8);padding:var(--space-10) var(--space-16);margin-bottom:var(--space-12);border-radius:var(--radius-md);background:rgb(var(--color-primary-rgb) / .08);border:1px solid rgb(var(--color-primary-rgb) / .2);color:var(--color-primary);font-size:var(--text-14);font-weight:600}.results-actions{display:flex;justify-content:center;gap:var(--space-12);margin-top:var(--space-8);flex-wrap:wrap}.error-msg{text-align:center;color:var(--color-danger);font-size:var(--text-14);padding:var(--space-16)}.page-footer{text-align:center;padding-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-12)}.footer-cta{font-size:var(--text-14);color:var(--color-text-subtle)}.footer-cta a{color:var(--color-primary);text-decoration:none;font-weight:500}.footer-cta a:hover{text-decoration:underline}.footer-cta-sep{margin:0 var(--space-6);color:var(--color-text-subtle)}.footer-links{display:flex;justify-content:center;align-items:center;gap:var(--space-8);font-size:var(--text-13)}.footer-links a{color:var(--color-text-subtle);text-decoration:none;transition:color var(--dur-150)}.footer-links a:hover{color:var(--color-text-muted)}.footer-sep{color:var(--color-text-subtle)}.lightbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#000000e0;display:flex;align-items:center;justify-content:center;padding:var(--space-16)}.lightbox-content{position:relative;display:flex;flex-direction:row;width:min(calc(94vw / var(--ezc-zoom, 1)),1360px);height:min(calc(92vh / var(--ezc-zoom, 1)),980px);height:min(calc(92dvh / var(--ezc-zoom, 1)),980px);max-width:calc(94vw / var(--ezc-zoom, 1));max-height:calc(92vh / var(--ezc-zoom, 1));max-height:calc(92dvh / var(--ezc-zoom, 1));background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 70px -20px #000000b3}.lightbox-image-pane{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;padding:var(--space-24);background:var(--color-bg);overflow:hidden}.lightbox-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--radius-md);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;display:block}.lightbox-rail{overscroll-behavior:contain;flex:0 0 340px;width:340px;display:flex;flex-direction:column;gap:var(--space-14);padding:var(--space-20) var(--space-18) var(--space-24);overflow-y:auto;border-left:1px solid var(--color-border);background:var(--color-bg-secondary)}.lightbox-rail-header{display:flex;flex-direction:column;gap:var(--space-4);padding-right:34px}.lightbox-label{font-size:var(--text-14);color:var(--color-text-muted);font-weight:500;word-break:break-word}.lightbox-counter{font-size:var(--text-12);color:var(--color-text-subtle);font-variant-numeric:tabular-nums}.lightbox-dim{font-size:var(--text-11);color:var(--color-text-subtle);font-variant-numeric:tabular-nums;letter-spacing:.02em}.lightbox-info{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-8)}.lightbox-rail-footer{padding-top:var(--space-12);border-top:1px solid var(--color-border)}.lightbox-download{display:inline-flex;align-items:center;gap:var(--space-6);width:100%;padding:var(--space-8) var(--space-14);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:var(--text-13);cursor:pointer;transition:border-color var(--dur-150),color var(--dur-150)}.lightbox-download:hover{border-color:var(--color-text-subtle);color:var(--color-text)}.lightbox-removebg{display:inline-flex;align-items:center;gap:var(--space-6);width:100%;padding:var(--space-8) var(--space-14);border:1px solid rgb(var(--color-primary-rgb) / .25);border-radius:var(--radius-sm);background:rgb(var(--color-primary-rgb) / .08);color:var(--color-primary);font-size:var(--text-13);cursor:pointer;transition:border-color var(--dur-150),background var(--dur-150),color var(--dur-150)}.lightbox-removebg:hover:not(:disabled){border-color:rgb(var(--color-primary-rgb) / .55);background:rgb(var(--color-primary-rgb) / .14);color:var(--color-on-primary, var(--color-text))}.lightbox-removebg:disabled{opacity:.6;cursor:progress}.lightbox-fav.faved{color:#f472b6;border-color:#f472b673;background:#f472b61a}.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--color-surface-hover);background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#000c;font-size:var(--text-24);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-150),color var(--dur-150),background var(--dur-150);line-height:1;z-index:1}.lightbox-prev{left:12px}.lightbox-next{right:12px}.lightbox-prev:hover,.lightbox-next:hover{border-color:#0000001a;color:var(--color-text);background:#000000bf}@media(max-width:900px){.lightbox-content{flex-direction:column;width:min(calc(96vw / var(--ezc-zoom, 1)),640px);height:min(calc(94vh / var(--ezc-zoom, 1)),920px);height:min(calc(94dvh / var(--ezc-zoom, 1)),920px);max-width:calc(96vw / var(--ezc-zoom, 1));max-height:calc(94vh / var(--ezc-zoom, 1));max-height:calc(94dvh / var(--ezc-zoom, 1))}.lightbox-image-pane{flex:0 1 calc(60vh / var(--ezc-zoom, 1));flex:0 1 calc(60dvh / var(--ezc-zoom, 1));max-height:calc(60vh / var(--ezc-zoom, 1));max-height:calc(60dvh / var(--ezc-zoom, 1));padding:var(--space-16)}.lightbox-rail{flex:1 1 auto;width:100%;border-left:none;border-top:1px solid var(--color-border)}.lightbox-prev,.lightbox-next{width:36px;height:36px;font-size:var(--text-20)}.lightbox-prev{left:8px}.lightbox-next{right:8px}}.action-btn{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-10) var(--space-20);border-radius:var(--radius-md);font-size:var(--text-14);cursor:pointer;transition:border-color var(--dur-150),color var(--dur-150),background var(--dur-150),transform var(--dur-100);font-family:var(--font-body, "Satoshi", sans-serif)}.action-btn-primary{background:var(--color-primary);color:var(--color-bg-secondary);border:1px solid var(--color-primary);font-weight:600}.action-btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px)}.action-btn-primary:active{transform:translateY(0)}.action-btn-secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)}.action-btn-secondary:hover{border-color:var(--color-text-subtle);color:var(--color-text)}.action-btn-accent{border-color:var(--color-primary);color:var(--color-primary);background:transparent}.action-btn-accent:hover:not(:disabled){background:rgb(var(--color-primary-rgb) / .08);border-color:var(--color-primary);color:var(--color-primary)}.action-btn-accent:disabled{opacity:.6;cursor:wait}.zip-spinner{width:14px;height:14px;border:2px solid rgb(var(--color-primary-rgb) / .3);border-top-color:var(--color-primary);border-radius:50%;animation:ezc-spin .6s linear infinite;flex-shrink:0}.style-section{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-24)}.style-label{font-size:var(--text-14);color:var(--color-text-muted);font-weight:500}.style-options{display:flex;gap:var(--space-8);flex-wrap:nowrap}.style-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-10) var(--space-16);border-radius:10px;border:1.5px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--dur-150),color var(--dur-150),background var(--dur-150),transform var(--dur-100);min-width:0}.style-card input[type=radio]{display:none}.style-card-label{font-size:var(--text-13);font-weight:600;color:inherit}.style-card-desc{font-size:var(--text-10);color:var(--color-text-subtle);transition:color var(--dur-150)}.style-active{border-color:var(--color-primary);color:var(--color-text);background:rgb(var(--color-primary-rgb) / .08);box-shadow:0 0 0 1px rgb(var(--color-primary-rgb) / .25)}.style-active .style-card-desc{color:var(--color-text-muted)}.style-card:hover:not(.style-active){border-color:var(--color-border);color:var(--color-text-muted);transform:translateY(-1px)}@media(max-width:640px){.tool-layout{padding:var(--space-20) var(--space-16) var(--space-48)}.page-header h1{font-size:var(--text-24)}.upload-area{padding:var(--space-32) var(--space-16)}.results-actions{flex-direction:column;align-items:stretch}.results-actions button,.results-actions .action-btn{justify-content:center}.style-options{width:100%}.style-card{padding:var(--space-8) var(--space-10);min-width:0;flex:1}.result-download{opacity:1}.footer-cta{display:flex;flex-direction:column;gap:var(--space-4)}.footer-cta-sep{display:none}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}
