:root{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.5;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;background:var(--bg)}#root{min-height:100vh}:root{--bg: #f6f7f9;--text: #111418;--muted: #5e6b74;--panel: rgba(255,255,255,.85);--panel-border: rgba(0,0,0,.08);--ring: rgba(0,0,0,.7)}[data-theme=dark]{--bg: #0b0b0b;--text: #f3f3f3;--muted: #b9b9b9;--panel: rgba(0,0,0,.35);--panel-border: rgba(255,255,255,.1);--ring: rgba(255,255,255,.6)}.app{min-height:100vh;color:var(--text);background:var(--bg);transition:background-color .12s ease,color .12s ease}.header{max-width:1200px;margin:0 auto;padding:24px 20px 8px}.header .row{display:flex;align-items:center;justify-content:space-between;gap:12px}.header h1{margin:0 0 4px;font-size:22px}.header .tag{margin:0;color:var(--muted);font-size:13px}.center{max-width:900px;margin:40px auto;padding:0 20px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1200px;margin:0 auto;padding:20px}@media (max-width: 900px){.workspace{grid-template-columns:1fr}}.pane{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pane h2{margin:0 0 12px;font-size:16px;color:var(--text)}.pane-head h2{margin:0;line-height:1.25}.pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.pane,.dropzone{transition:background-color .12s ease,border-color .12s ease,color .12s ease}.dropzone{border:1.5px dashed var(--ring);border-radius:16px;padding:48px 24px;text-align:center;background:var(--panel);cursor:pointer}.dropzone.over{border-color:var(--ring);box-shadow:0 0 0 4px #0000000f inset}.dropzone .hint{color:var(--muted);margin:8px 0 0;font-size:13px}.cropper{position:relative;width:100%;background:#111;border-radius:12px;overflow:hidden;-webkit-user-select:none;user-select:none}.cropper img{display:block;pointer-events:none}.crop-rect{position:absolute;border:2px solid #ffffff;box-shadow:0 0 0 1px #000000e6;cursor:move}.crop-rect .handle{position:absolute;width:14px;height:14px;background:#fff;border:1px solid rgba(0,0,0,.85);border-radius:50%;box-shadow:0 1px 2px #0006}.crop-rect .handle.n{top:-7px;left:50%;transform:translate(-50%);cursor:ns-resize}.crop-rect .handle.s{bottom:-7px;left:50%;transform:translate(-50%);cursor:ns-resize}.crop-rect .handle.e{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-rect .handle.w{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-rect .handle.nw{left:-7px;top:-7px;cursor:nwse-resize}.crop-rect .handle.ne{right:-7px;top:-7px;cursor:nesw-resize}.crop-rect .handle.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.crop-rect .handle.se{right:-7px;bottom:-7px;cursor:nwse-resize}.shade{position:absolute;inset:0;background:#00000059;pointer-events:none}.preview{width:100%;height:auto;display:block;border-radius:4px}.actions{margin-top:12px;display:flex;gap:8px}.primary{background:#fff;color:#111;border:none;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer}.primary:hover{filter:brightness(.95)}.ghost{background:transparent;color:var(--text);border:1px solid var(--panel-border);padding:6px 12px;border-radius:10px;cursor:pointer;line-height:1}.ghost:hover{background:#0000000f}[data-theme=dark] .ghost:hover{background:#ffffff14}.footer{color:var(--muted);text-align:center;font-size:12px;padding:24px 0 40px;display:flex;flex-direction:column;gap:6px}.footer .credit a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}.footer .credit a:hover{border-bottom-color:currentColor}.theme-fader{position:fixed;inset:0;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .12s ease}.theme-fader.show{opacity:1}