:root{color-scheme:dark;--bg: #050a1f;--bg-alt: rgba(12, 18, 46, .8);--accent: #59f8ff;--accent-strong: #ff69db;--text: #f4f6ff;--muted: #98a1c7;--border: rgba(255, 255, 255, .1);font-size:18px}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Space Grotesk,system-ui,sans-serif;background:radial-gradient(circle at top,#15245a,#050a1f 55%);color:var(--text);display:flex;justify-content:center}#app{width:100%}.app-shell{display:flex;flex-direction:column;height:100vh;max-height:100vh}header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);background:#050a1fcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}header h1{margin:0;font-size:1.5rem;background:linear-gradient(120deg,var(--accent),var(--accent-strong));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.editor-layout{flex:1 1 auto;display:grid;grid-template-columns:1fr 380px;gap:0;overflow:hidden;min-height:0}.stage-area{display:flex;flex-direction:column;overflow:hidden;background:#000}.side-panel{background:var(--bg-alt);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.panel-section{padding:1.5rem;border-bottom:1px solid var(--border)}.panel-section h2{margin:0 0 1rem;font-size:1.1rem;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.upload-zone{border:1px dashed var(--border);border-radius:.5rem;padding:.5rem 1rem;transition:border-color .2s ease,background .2s ease;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;touch-action:manipulation;-webkit-tap-highlight-color:rgba(89,248,255,.1);background:#59f8ff0d}.upload-zone:hover{border-color:var(--accent);background:#59f8ff1a}.upload-zone.highlight{border-color:var(--accent);background:#59f8ff26}.upload-zone input{display:none}.upload-zone strong{font-size:.9rem;font-weight:500}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.controls-grid label{display:flex;flex-direction:column;font-weight:500;gap:.3rem}.hint{color:var(--muted);font-size:.9rem;line-height:1.4;opacity:.85}input[type=range]{accent-color:var(--accent);min-height:44px;cursor:pointer;touch-action:pan-x}input[type=range]::-webkit-slider-thumb{width:24px;height:24px;cursor:grab}input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}input[type=range]::-moz-range-thumb{width:24px;height:24px;cursor:grab}input[type=range]:active::-moz-range-thumb{cursor:grabbing}.filters-grid{display:grid;grid-template-columns:1fr;gap:.75rem;overscroll-behavior-x:contain}.filter-card{border:1px solid var(--border);border-radius:.6rem;padding:.85rem;background:#050a1f80;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease;position:relative;min-height:70px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(89,248,255,.15)}.filter-card:hover{background:#050a1fcc}.filter-card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#59f8ff33,#ff69db26);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease}@media(hover:hover){.filter-card:hover{transform:translateY(-2px)}}.filter-card:active{transform:scale(.98)}.filter-card.active{border-color:var(--accent)}.filter-card.active:after{opacity:1}.filter-card h3{margin:0 0 .3rem;font-size:.95rem;font-weight:600}.filter-card small{color:var(--muted);font-size:.85rem;line-height:1.3}.stage{flex:1 1 auto;position:relative;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;min-height:0}.bottom-actions{flex:0 0 auto;display:flex;gap:1rem;padding:1rem 1.5rem;background:#050a1fe6;border-top:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.bottom-actions button{flex:1}.stage canvas,.stage img{max-width:100%;max-height:100%;display:block;object-fit:contain}.stage:before{content:"Upload an image to start editing";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);letter-spacing:.04em;opacity:.4;pointer-events:none;font-size:1.1rem}.stage.has-image:before{display:none}button{border:none;border-radius:999px;padding:.85rem 1.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(89,248,255,.2)}button:active{transform:scale(.97)}button.primary{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#050a1f;box-shadow:0 10px 35px #ff69db59}button.secondary{background:#ffffff0d;color:var(--text);border:1px solid var(--border)}button.secondary:hover{background:#ffffff1a;border-color:var(--accent)}.side-panel::-webkit-scrollbar{width:10px}.side-panel::-webkit-scrollbar-track{background:#0003}.side-panel::-webkit-scrollbar-thumb{background:#59f8ff4d;border-radius:5px}.side-panel::-webkit-scrollbar-thumb:hover{background:#59f8ff80}.advanced-section h3{margin:0 0 .75rem;font-size:.95rem;color:var(--accent);opacity:.9}.control-section{margin-bottom:1.5rem;padding:1rem;background:#ffffff05;border-radius:.6rem;border:1px solid rgba(255,255,255,.05)}.control-section:last-child{margin-bottom:0}.control-section h4{margin:0 0 1rem;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.control-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}.control-row label{flex:0 0 110px;font-size:.9rem;font-weight:500}.control-row input[type=range]{flex:1;margin:0}.control-row .value{flex:0 0 50px;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9rem;font-weight:600}.advanced-actions{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}.advanced-actions button{width:100%;min-height:44px}button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}@media(max-width:1024px){.editor-layout{grid-template-columns:1fr;grid-template-rows:1fr auto}.side-panel{border-left:none;border-top:1px solid var(--border);max-height:50vh}header{flex-direction:column;gap:.75rem;align-items:stretch}.upload-zone{padding:.75rem}}@media(max-width:768px){:root{font-size:16px}body{padding:0}header h1{font-size:1.3rem}.panel-section{padding:1rem}.filters-grid{grid-template-columns:1fr;gap:.65rem}.filter-card{padding:.75rem;min-height:65px}.filter-card h3{font-size:.9rem}.controls-grid{grid-template-columns:1fr;gap:.75rem}.bottom-actions{padding:.75rem 1rem;gap:.75rem}.control-row{flex-direction:column;align-items:stretch;gap:.4rem}.control-row label{flex:none}.control-row .value{text-align:left}button{padding:.85rem 1.25rem;font-size:.95rem}.upload-zone{padding:.5rem .75rem}.upload-zone strong{font-size:.85rem}}@media(max-width:480px){:root{font-size:15px}header h1{font-size:1.2rem}.panel-section{padding:.75rem}.side-panel{max-height:40vh}.control-section{padding:.75rem;margin-bottom:1rem}}