:root{color-scheme:light;--bg: #f5f7f8;--surface: #ffffff;--surface-strong: #fdfaf5;--ink: #172026;--muted: #64727d;--line: #d9e0e4;--line-strong: #bdc8ce;--orange: #f6821f;--orange-dark: #b95008;--teal: #0f8b8d;--green: #2f855a;--red: #c24135;--shadow: 0 20px 60px rgba(23, 32, 38, .1);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(15,139,141,.06) 1px,transparent 1px),linear-gradient(0deg,rgba(246,130,31,.05) 1px,transparent 1px),var(--bg);background-size:36px 36px;color:var(--ink)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1180px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:28px 0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.topbar-actions{display:flex;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border:1px solid rgba(246,130,31,.4);border-radius:8px;background:#fff4e7;color:var(--orange-dark)}.brand h1,.preview-header h2,.upload-copy h2,.section-heading h2,.gallery-header h2{margin:0;letter-spacing:0}.brand h1{font-size:clamp(1.4rem,1.2rem + 1vw,2.1rem);line-height:1.08}.eyebrow{margin:0 0 5px;color:var(--teal);font-size:.75rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.status-pill{display:inline-flex;min-height:38px;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.92rem;font-weight:700;white-space:nowrap}.status-ready{border-color:#2f855a59;color:var(--green)}.status-error{border-color:#c241354d;color:var(--red)}.gallery-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.85rem;font-weight:700;cursor:pointer;transition:border-color .16s ease,color .16s ease}.gallery-toggle:hover{border-color:var(--teal)}.gallery-toggle.is-active{border-color:#0f8b8d8c;background:#e9f6f6;color:var(--teal)}.gallery-panel{margin-bottom:22px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#ffffffeb;box-shadow:var(--shadow)}.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.gallery-header h2{font-size:1.05rem}.gallery-empty{display:grid;gap:8px;place-items:center;padding:32px 16px;color:var(--muted);font-weight:700;text-align:center}.gallery-empty small{font-weight:400;font-size:.85rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.gallery-card{display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease}.gallery-card:hover{border-color:var(--line-strong)}.gallery-card.is-selected{border-color:#f6821fbf;box-shadow:inset 0 0 0 1px #f6821f33}.gallery-thumb{display:grid;height:120px;place-items:center;background:linear-gradient(45deg,#eff3f5 25%,transparent 25%),linear-gradient(-45deg,#eff3f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eff3f5 75%),linear-gradient(-45deg,transparent 75%,#eff3f5 75%),#fff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;cursor:pointer;overflow:hidden}.gallery-thumb img{max-width:100%;max-height:100%;object-fit:contain}.gallery-info{display:grid;gap:3px;padding:10px 12px 6px;min-width:0}.gallery-name{overflow:hidden;font-size:.85rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.gallery-meta{color:var(--muted);font-size:.78rem}.gallery-settings{color:var(--teal);font-size:.75rem;font-weight:700}.gallery-actions{display:flex;gap:6px;padding:6px 12px 10px}.icon-button-sm{min-height:30px!important;padding:4px 8px!important;font-size:.8rem}.icon-button-danger:hover{border-color:var(--red)!important;color:var(--red)}.workspace{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:22px;align-items:stretch}.tool-panel,.preview-panel{border:1px solid var(--line);border-radius:8px;background:#ffffffeb;box-shadow:var(--shadow)}.tool-panel{display:flex;flex-direction:column;gap:18px;padding:18px}.upload-zone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;min-height:148px;padding:18px;border:1px dashed var(--line-strong);border-radius:8px;background:linear-gradient(45deg,rgba(23,32,38,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(23,32,38,.035) 25%,transparent 25%),var(--surface-strong);background-size:18px 18px;transition:border-color .16s ease,background-color .16s ease,transform .16s ease}.upload-zone.is-dragging{border-color:var(--orange);background-color:#fff8f0;transform:translateY(-1px)}.upload-zone.has-file,.upload-zone.has-stored{border-style:solid}.file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.upload-icon{display:grid;width:58px;height:58px;place-items:center;border-radius:8px;background:#e9f6f6;color:var(--teal)}.upload-copy{min-width:0}.upload-copy h2{overflow:hidden;font-size:1.05rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.upload-copy p{margin:7px 0 0;color:var(--muted);font-size:.92rem;line-height:1.35}.secondary-button{grid-column:1 / -1;display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font-weight:800}.secondary-button:hover,.icon-button:hover,.download-button:hover{border-color:var(--orange)}.stored-image-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid rgba(15,139,141,.3);border-radius:8px;background:#edf8f8;color:var(--teal);font-size:.88rem;font-weight:700}.settings-section{display:grid;gap:12px}.section-heading,.quality-row{display:flex;align-items:center;gap:8px}.section-heading{color:var(--teal)}.section-heading h2{color:var(--ink);font-size:.98rem}.quality-row{justify-content:space-between}.quality-row strong{color:var(--orange-dark)}.format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.format-option{display:grid;gap:4px;min-height:78px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:left}.format-option span{font-size:.98rem;font-weight:850}.format-option small{color:var(--muted);font-size:.8rem;line-height:1.25}.format-option.is-selected{border-color:#f6821fbf;background:#fff6eb;box-shadow:inset 0 0 0 1px #f6821f33}.quality-slider{width:100%;accent-color:var(--orange)}.quality-slider:disabled{opacity:.45}.action-row{display:grid;grid-template-columns:1fr 44px;gap:10px}.primary-button,.download-button,.icon-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-radius:8px;cursor:pointer;font-weight:850;text-decoration:none}.primary-button{border:1px solid var(--orange-dark);background:var(--orange);color:#fff}.primary-button:disabled,.icon-button:disabled{cursor:not-allowed;opacity:.5}.icon-button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}.download-button{padding:0 14px;border:1px solid rgba(15,139,141,.45);background:#e9f6f6;color:#075f60}.progress-track{height:9px;overflow:hidden;border-radius:999px;background:#e8eef1}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--teal);transition:width .16s ease}.feedback,.security-note{display:flex;align-items:flex-start;gap:9px;border-radius:8px;font-size:.9rem;line-height:1.45}.feedback{padding:11px}.feedback-error{border:1px solid rgba(194,65,53,.25);background:#fff1ef;color:var(--red)}.feedback-warning{border:1px solid rgba(246,130,31,.3);background:#fff6eb;color:var(--orange-dark)}.security-note{padding:12px;border:1px solid rgba(15,139,141,.25);background:#edf8f8;color:#075f60}.preview-panel{display:grid;grid-template-rows:auto minmax(360px,1fr) auto;min-width:0;overflow:hidden}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid var(--line)}.preview-header h2{font-size:1.18rem}.image-stage{display:grid;min-height:420px;place-items:center;padding:18px;background:linear-gradient(45deg,#eff3f5 25%,transparent 25%),linear-gradient(-45deg,#eff3f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eff3f5 75%),linear-gradient(-45deg,transparent 75%,#eff3f5 75%),#fff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.image-stage img{display:block;max-width:100%;max-height:62vh;border-radius:8px;box-shadow:0 16px 42px #1720262e;object-fit:contain}.empty-preview{display:grid;gap:10px;place-items:center;color:var(--muted);font-weight:800}.meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}.meta-item{display:grid;gap:5px;min-width:0;padding:14px 16px;border-right:1px solid var(--line)}.meta-item:last-child{border-right:0}.meta-item span{color:var(--muted);font-size:.76rem;font-weight:800}.meta-item strong{overflow:hidden;color:var(--ink);font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.spin{animation:spin .95s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:920px){.workspace{grid-template-columns:1fr}.preview-panel{grid-template-rows:auto minmax(300px,auto) auto}.image-stage{min-height:320px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}@media(max-width:640px){.app-shell{width:min(100% - 22px,1180px);padding:16px 0}.topbar,.preview-header{align-items:flex-start;flex-direction:column}.topbar-actions{width:100%;justify-content:space-between}.status-pill{width:100%;justify-content:center}.tool-panel,.preview-header{padding:14px}.upload-zone{grid-template-columns:1fr;justify-items:start}.secondary-button,.primary-button,.download-button{width:100%}.format-grid,.meta-grid{grid-template-columns:1fr}.meta-item{border-right:0;border-bottom:1px solid var(--line)}.meta-item:last-child{border-bottom:0}.image-stage{min-height:260px;padding:12px}.image-stage img{max-height:52vh}.gallery-grid{grid-template-columns:1fr}}