:root{--bg:#0b0b0b;--surface:#131313;--surface2:#1a1a1a;--border:#252525;--accent:#d4a843;--accent-dim:#7a5f22;--text:#e0e0e0;--text-muted:#666;--text-dim:#3a3a3a;--rail-w:180px;--ctrl-w:272px;--header-h:44px;--footer-h:52px;--radius:6px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);grid-template-rows:var(--header-h) 1fr var(--footer-h);grid-template-columns:1fr;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:12px;display:grid}#header{border-bottom:1px solid var(--border);background:var(--surface);-webkit-user-select:none;user-select:none;z-index:10;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.logo{letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;font-size:14px;font-weight:700}.logo span{color:var(--accent)}.header-actions{align-items:center;gap:8px;display:flex}#app{grid-template-columns:var(--rail-w) 1fr var(--ctrl-w);grid-template-rows:1fr;min-height:0;display:grid;overflow:hidden}#preset-rail{background:var(--surface);border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:2px;padding:8px;display:flex;overflow:hidden auto}.preset-card{border-radius:var(--radius);cursor:pointer;border:1px solid #0000;flex-shrink:0;height:54px;transition:border-color .15s,transform .1s;position:relative;overflow:hidden}.preset-card:hover{border-color:var(--text-muted);transform:scale(1.02)}.preset-card.active{border-color:var(--accent)}.preset-label{letter-spacing:.05em;color:#fff;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#0000,#000000bf);padding:4px 8px;font-size:10px;font-weight:600;position:absolute;bottom:0;left:0;right:0;overflow:hidden}#preview-area{background:#000;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.drop-overlay{z-index:5;background:#000;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.drop-overlay.hidden{display:none}.drop-content{text-align:center;flex-direction:column;align-items:center;gap:10px;max-width:340px;padding:24px;display:flex}.drop-icon{color:var(--accent);opacity:.7;width:56px;height:56px;margin-bottom:4px}.drop-icon svg{width:100%;height:100%}.drop-content h1{letter-spacing:.06em;color:var(--text);font-size:22px;font-weight:800}.drop-sub{color:var(--text-muted);margin-top:-4px;font-size:11px}.drop-hint{color:var(--text);margin-top:8px;font-size:12px}.drop-formats{color:var(--text-dim);letter-spacing:.05em;font-size:10px}.frame-container{-webkit-user-select:none;user-select:none;cursor:crosshair;touch-action:none;background:#050505;border-radius:4px;transition:width .22s cubic-bezier(.2,0,.2,1),height .22s cubic-bezier(.2,0,.2,1);position:relative;overflow:hidden;box-shadow:0 0 0 1px #282828,0 16px 40px #000000d9}.frame-container.hidden{display:none!important}.frame-container.panning{cursor:grab;box-shadow:0 0 0 2px var(--accent), 0 16px 40px #000000e6}.frame-container.is-dragging{cursor:grabbing}#preview-canvas{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:auto;display:block;position:absolute}.crop-grid{pointer-events:none;z-index:4;position:absolute;inset:0}.crop-grid.hidden{display:none!important}.grid-line{background:#ffffff40;position:absolute;box-shadow:0 0 1px #000c}.grid-h1{height:1px;top:33.333%;left:0;right:0}.grid-h2{height:1px;top:66.666%;left:0;right:0}.grid-v1{width:1px;top:0;bottom:0;left:33.333%}.grid-v2{width:1px;top:0;bottom:0;left:66.666%}.compare-badge{border:1px solid var(--border);color:var(--text-muted);pointer-events:none;white-space:nowrap;z-index:8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f0f0fe0;border-radius:20px;padding:6px 16px;font-size:11px;transition:color .2s,border-color .2s,background .2s;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.compare-badge.hidden{display:none!important}.compare-badge.badge-active{color:var(--accent);border-color:var(--accent);background:#141414f2}.reframe-bar{z-index:12;-webkit-backdrop-filter:blur(16px);-webkit-user-select:none;user-select:none;box-sizing:border-box;background:#121214eb;border:1px solid #ffffff29;border-radius:30px;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:6px 14px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #000000bf,0 0 0 1px #0006}.reframe-bar.hidden{display:none!important}.reframe-group{align-items:center;gap:6px;display:flex}.reframe-btn{color:var(--text);cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;font-weight:600;line-height:1;transition:background .15s,transform .1s;display:flex}.reframe-btn:hover{color:#fff;background:#fff3}.reframe-btn:active{transform:scale(.92)}.reframe-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:100px;height:4px}.reframe-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 0 6px #0009}.reframe-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.reframe-slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.reframe-val{color:var(--text);text-align:center;font-variant-numeric:tabular-nums;min-width:32px;font-size:11px;font-weight:600}.reframe-divider{background:#ffffff26;width:1px;height:20px}.reframe-pill-btn{color:var(--text);cursor:pointer;white-space:nowrap;background:#ffffff14;border:1px solid #ffffff24;border-radius:14px;align-items:center;gap:4px;padding:5px 12px;font-size:11px;font-weight:600;transition:background .15s,color .15s;display:inline-flex}.reframe-pill-btn:hover{color:#fff;background:#ffffff2e}.reframe-pill-btn:active{transform:scale(.96)}.reframe-pill-btn.reframe-done{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}.reframe-pill-btn.reframe-done:hover{color:#000;background:#f0b74b}.processing{z-index:6;color:var(--text-muted);background:#000000b3;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:11px;display:flex;position:absolute;inset:0}.processing.hidden{display:none}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#controls-panel{background:var(--surface);border-left:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent;overflow:hidden auto}#controls-inner{padding:8px 0 24px}#controls-inner details{border-bottom:1px solid var(--border)}#controls-inner summary{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;padding:10px 14px;font-size:10px;font-weight:700;list-style:none;display:flex}#controls-inner summary::-webkit-details-marker{display:none}#controls-inner summary:after{content:"▾";margin-left:auto;transition:transform .2s}#controls-inner details[open] summary:after{transform:rotate(-180deg)}#controls-inner summary:hover{color:var(--text)}.ctrl-group-body{flex-direction:column;gap:10px;padding:4px 14px 12px;display:flex}.ctrl-header{justify-content:space-between;align-items:center;display:flex}.ctrl-label{color:var(--text-muted);font-size:11px}.ctrl-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:10px}.ctrl-slider{appearance:none;background:linear-gradient(to right, var(--accent) var(--pct,50%), var(--border) var(--pct,50%));cursor:pointer;border-radius:2px;outline:none;width:100%;height:3px}.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:13px;height:13px;transition:transform .1s}.ctrl-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.ctrl-slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:13px;height:13px}.ctrl-row .ctrl-label{cursor:default}.ctrl-row{flex-direction:column;gap:4px;display:flex}.ctrl-row:has(.color-swatch){flex-direction:row;justify-content:space-between;align-items:center}.color-swatch{border:1px solid var(--border);cursor:pointer;border-radius:4px;flex-shrink:0;width:36px;height:20px;position:relative;overflow:hidden}.color-picker{opacity:0;cursor:pointer;width:calc(100% + 8px);height:calc(100% + 8px);position:absolute;inset:-4px}#bottom-bar{border-top:1px solid var(--border);background:var(--surface);z-index:10;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;display:flex}.bottom-left,.bottom-right{align-items:center;gap:8px;display:flex}.bottom-center{align-items:center;gap:10px;display:flex}.format-selector{background:var(--surface2);border:1px solid var(--border);border-radius:5px;gap:2px;padding:2px;display:flex}.fmt-btn{color:var(--text-muted);cursor:pointer;letter-spacing:.03em;background:0 0;border:none;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:600;transition:background .12s,color .12s}.fmt-btn:hover{color:var(--text)}.fmt-btn.active{background:var(--accent);color:#000}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;text-decoration:none;transition:opacity .15s,background .15s;display:inline-flex}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover:not(:disabled){background:#e8bc50}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--text-muted)}.btn-sm{padding:5px 10px;font-size:11px}.btn-icon-only{display:none}.btn-label-text{display:inline}.hidden{display:none!important}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#333}@media (width<=768px){body{flex-direction:column;height:100vh;display:flex;overflow:hidden}#header{height:var(--header-h);flex-shrink:0;padding:0 10px}#header .logo{font-size:13px}#app{flex-direction:column;flex:1;min-height:0;padding-bottom:54px;display:flex;overflow:hidden}#preview-area{flex:1;height:auto;min-height:180px;padding:10px}#controls-panel{border-left:none;border-top:1px solid var(--border);-webkit-overflow-scrolling:touch;flex-shrink:0;height:38dvh;max-height:280px;overflow-y:auto}.ctrl-slider::-webkit-slider-thumb{width:18px;height:18px}.ctrl-slider::-moz-range-thumb{width:18px;height:18px}#preset-rail{border-right:none;border-top:1px solid var(--border);-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-direction:row;flex-shrink:0;height:64px;padding:6px;overflow:auto hidden}#preset-rail::-webkit-scrollbar{display:none}.preset-card{flex-shrink:0;min-width:80px;height:52px}#bottom-bar{border-top:1px solid var(--border);z-index:100;background:#111;justify-content:space-between;align-items:center;gap:4px;height:52px;padding:0 8px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:visible}.bottom-left,.bottom-center,.bottom-right{flex-shrink:0;align-items:center;gap:4px;display:flex}.bottom-left .btn,.bottom-center .btn{padding:6px 7px}.bottom-left .btn-label-text,#center-btn .btn-label-text{display:none}#center-btn .btn-icon-only{font-size:13px;display:inline}.format-selector{flex-shrink:0;gap:2px;padding:2px;display:flex}.fmt-btn{padding:5px 6px;font-size:10px}.bottom-right .btn{padding:6px 10px;font-size:11px}.reframe-bar{gap:6px;max-width:calc(100vw - 16px);padding:5px 8px;bottom:60px}.reframe-slider{width:65px}.reframe-pill-btn{padding:4px 8px;font-size:10px}.reframe-val{min-width:28px;font-size:10px}.compare-badge{bottom:60px}}