:root{--bg:#f5f7fb;--panel:#fff;--panel-strong:#eef2f7;--text:#1f2937;--muted:#6b7280;--line:#d7dde7;--accent:#0f766e;--accent-dark:#0b5f59;--danger:#b91c1c;--shadow:0 18px 50px #1f29371f;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--text);background:var(--bg);font:16px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{border:0}button:disabled,input:disabled{cursor:not-allowed;opacity:.48}#app{min-height:100vh}.cropper-shell{min-height:100vh;padding:28px}.workspace{grid-template-columns:minmax(0,1fr) 380px;gap:20px;max-width:1180px;min-height:calc(100vh - 56px);margin:0 auto;display:grid}.preview-panel,.controls{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.preview-panel{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-width:0;padding:28px;display:flex}.preview-toolbar{justify-content:space-between;align-items:flex-start;gap:16px;width:100%;display:flex}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:800}h1{color:#111827;letter-spacing:0;margin:0;font-size:30px;font-weight:800;line-height:1.1}.crop-preview{max-width:min(100%,520px);max-height:min(100vh - 190px,520px);color:var(--muted);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-color:#f8fafc;background-image:linear-gradient(45deg,#dfe5ee 25%,#0000 25%),linear-gradient(-45deg,#dfe5ee 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#dfe5ee 75%),linear-gradient(-45deg,#0000 75%,#dfe5ee 75%),none;background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border:0 solid #111827;place-items:center;padding:0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #1118271f,0 14px 32px #0f172a1f}.crop-preview:active{cursor:grabbing}.crop-preview.empty{box-shadow:none;cursor:pointer;border:1px dashed #9aa4b2}.crop-preview img{transform-origin:0 0;-webkit-user-select:none;user-select:none;pointer-events:none;max-width:none;position:absolute;top:0;left:0}.crop-preview span{text-align:center;max-width:220px;padding:0 18px}.file-input,.export-canvas{display:none}.controls{flex-direction:column;gap:18px;padding:22px;display:flex}.control-group,.control-row,.color-control,.format-control{gap:8px;display:grid}.file-summary{background:var(--panel-strong);border:1px solid var(--line);border-radius:8px;padding:14px}.file-summary span,.control-row span,.color-control span,.format-control span{color:var(--muted);font-size:13px;font-weight:700}.file-summary strong{overflow-wrap:anywhere;color:#111827;font-size:16px}.file-summary small{color:var(--muted)}.control-row{grid-template-columns:1fr auto;align-items:center}.control-row input{grid-column:1/-1}.control-row output{color:#111827;font-size:13px;font-weight:800}.control-row.compact{grid-template-columns:1fr auto}.position-grid,.border-grid{gap:14px;display:grid}input[type=range]{width:100%;accent-color:var(--accent)}.color-control{grid-template-columns:1fr auto;align-items:center}input[type=color]{border:1px solid var(--line);background:#fff;border-radius:6px;width:46px;height:36px;padding:3px}.format-control select{color:#111827;border:1px solid var(--line);background:#fff;border-radius:6px;width:100%;min-height:40px;padding:8px 10px}.button-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;display:grid}.button-row .primary-button{grid-column:1/-1}.primary-button,.secondary-button{border-radius:6px;min-height:42px;padding:10px 14px;font-weight:800;line-height:1.2;transition:background-color .18s,color .18s,box-shadow .18s}.primary-button{color:#fff;background:var(--accent)}.primary-button:hover:not(:disabled){background:var(--accent-dark);box-shadow:0 8px 20px #0f766e40}.secondary-button{color:#111827;background:#e8edf4}.secondary-button:hover:not(:disabled){background:#dce4ee}.primary-button:focus-visible,.secondary-button:focus-visible,.crop-preview:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #0f766e47}@media (width<=900px){.cropper-shell{padding:14px}.workspace{grid-template-columns:1fr;min-height:auto}.preview-panel,.controls{padding:18px}.preview-toolbar{flex-direction:column;align-items:stretch}.preview-toolbar .secondary-button{width:100%}}@media (width<=520px){.crop-preview{max-height:calc(100vw - 64px)}h1{font-size:25px}.button-row{grid-template-columns:1fr}.button-row .primary-button{grid-column:auto}}.project-picker{border:1px solid var(--line);background:#fbfcfe;border-radius:8px;gap:10px;padding:14px;display:grid}.picker-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.picker-head span{color:var(--muted);font-size:13px;font-weight:700}.picker-head small,.empty-note{color:var(--muted);font-size:13px}.project-picker select{color:#111827;border:1px solid var(--line);background:#fff;border-radius:6px;width:100%;min-height:40px;padding:8px 10px}.empty-note{margin:0}.thumb-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;max-height:184px;padding-right:2px;display:grid;overflow:auto}.thumb-grid button{aspect-ratio:1;cursor:pointer;background:#e8edf4;border:2px solid #0000;border-radius:6px;padding:0;position:relative;overflow:hidden}.thumb-grid button:hover,.thumb-grid button.active-thumb{border-color:var(--accent)}.thumb-grid img{object-fit:cover;width:100%;height:100%;display:block}.shadow-settings{border:1px solid var(--line);background:#fbfcfe;border-radius:8px;gap:14px;padding:14px;display:grid}.preset-settings{border:1px solid var(--line);background:#fbfcfe;border-radius:8px;gap:12px;padding:14px;display:grid}.text-control{gap:8px;display:grid}.text-control span{color:var(--muted);font-size:13px;font-weight:700}.text-control input{color:#111827;border:1px solid var(--line);background:#fff;border-radius:6px;width:100%;min-height:40px;padding:8px 10px}.preset-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.status-note{color:var(--muted);margin:0;font-size:13px}