*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,Segoe UI,sans-serif;background:#0a0118;color:#e0e7ff;height:100vh;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100%}header{background:#16082f;padding:.4rem 1rem;text-align:center;border-bottom:1px solid #a855f744;flex-shrink:0}header h1{font-size:1.1rem;font-weight:800;margin:0;background:linear-gradient(90deg,#d946ef,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:600px){header h1{font-size:.9rem}}.main-content{display:flex;flex:1;overflow:hidden}.toolbar-area{width:280px;background:#16082f;border-right:1px solid #a855f744;display:flex;flex-direction:column;justify-content:center;padding:.8rem;gap:1rem;flex-shrink:0;overflow-y:auto}.tool-group h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#22d3ee;margin-bottom:8px;border-bottom:1px solid #22d3ee44;padding-bottom:4px}.file-upload-btn,.action-btn{display:block;width:100%;padding:10px;text-align:center;border-radius:8px;cursor:pointer;font-size:.9rem;border:1px solid #a855f744;color:#fff;font-weight:600;margin-bottom:8px;transition:all .3s ease;background:#a855f71a}.file-upload-btn:hover,.action-btn:hover{background:#a855f740;border-color:#a855f7;box-shadow:0 0 15px #a855f74d}.file-upload-btn input[type=file]{display:none}#resetBtn{background:#e74c3c1a;border-color:#e74c3c4d}#resetBtn:hover{background:#e74c3c4d;border-color:#e74c3c}.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.filter-btn{background:#0a0118;border:1px solid #a855f722;color:#cbd5e1;padding:10px 4px;font-size:.8rem;border-radius:6px;cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:#d946ef;color:#fff}.filter-btn.active{background:linear-gradient(135deg,#a855f7,#d946ef);border-color:#fff;color:#fff;font-weight:700;box-shadow:0 0 15px #a855f780}.zoom-indicator{position:absolute;top:20px;right:30px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:4px;font-size:.9rem;font-family:monospace;pointer-events:none;z-index:10;border:1px solid rgba(168,85,247,.3)}.preview-area{flex:1;background:#05010d;position:relative;overflow:hidden;min-height:0;min-width:0}.canvas-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto}.preview-canvas{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;pointer-events:auto;box-shadow:0 0 50px #000c,0 0 20px #a855f733;border-radius:4px;background:#000}#cropCanvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.controls-area{width:280px;background:#16082f;border-left:1px solid #a855f744;display:flex;flex-direction:column;height:100%;overflow:hidden}.histogram-container{padding:10px;background:#0a011880;border-bottom:1px solid #a855f744}.histogram-container h3{font-size:.7rem;color:#22d3ee;margin-bottom:8px}#histogramCanvas{width:100%;height:75px;background:#0a0118;border:1px solid #a855f722}.tabs{display:flex;background:#0a0118;padding:4px;gap:4px}.tab-btn{flex:1;background:transparent;border:none;color:#94a3b8;padding:10px 4px;cursor:pointer;border-radius:6px;font-size:1.3rem;transition:all .2s;display:flex;align-items:center;justify-content:center}.tab-btn.active{background:#16082f;color:#a855f7;box-shadow:0 0 10px #a855f733}.tab-content{display:none}.tab-content.active{display:block}.scrollable-controls{flex:1;overflow-y:auto;padding:12px 12px 20px;min-height:0}.tab-content{display:none;margin-top:10px}.control-group{margin-bottom:12px}.control-group label{display:flex;justify-content:space-between;color:#94a3b8;margin-bottom:4px;font-size:.85rem;font-family:JetBrains Mono,monospace}.control-group label span{color:#22d3ee}input[type=range]{width:100%;height:6px;background:#0a0118;border-radius:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;touch-action:pan-y;pointer-events:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#a855f7;border:3px solid #16082f;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #a855f780;pointer-events:auto}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;width:18px;height:18px;background:#a855f7;border:3px solid #16082f;border-radius:50%;cursor:pointer;box-shadow:0 0 10px #a855f780;pointer-events:auto}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0a0118}::-webkit-scrollbar-thumb{background:#a855f744;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a855f7}.sidebar-footer{text-align:center;color:#94a3b8;font-size:.7rem;margin-top:30px;padding-top:20px;padding-bottom:20px;border-top:1px solid #a855f722}.sidebar-footer p{margin:0}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0118d9;backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;flex-direction:column}.loading-content{background:#16082fe6;padding:40px;border-radius:16px;border:1px solid #a855f744;text-align:center;box-shadow:0 0 50px #a855f733;width:400px;max-width:90%}.loading-content h2{color:#e0e7ff;margin-bottom:20px;font-size:1.2rem}.progress-bar-container{width:100%;height:10px;background:#0a0118;border-radius:5px;overflow:hidden;margin-bottom:10px;border:1px solid #a855f722}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#a855f7,#d946ef);width:0%;transition:width .2s ease;box-shadow:0 0 10px #a855f780}#aiLoadingText{color:#94a3b8;font-family:monospace;font-size:.9rem}@media(max-width:900px){.app-container{display:flex;flex-direction:column}.main-content{flex-direction:column;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.preview-area{position:sticky;top:0;z-index:100;height:45vh;min-height:300px;background:#05010d;border-bottom:2px solid #a855f7;flex-shrink:0;order:1}.toolbar-area,.controls-area{width:100%;border:none;overflow:visible;background:#16082f}.toolbar-area{border-bottom:1px solid #a855f722;padding-top:10px;order:2}.controls-area{order:3}.canvas-wrapper{inset:10px}input[type=range]{height:12px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.filter-grid{grid-template-columns:repeat(3,1fr)}header h1{font-size:1.1rem}.scrollable-controls{max-height:none;overflow:visible;padding-bottom:120px}}