.crop-page{max-width:980px}.crop-intro{max-width:720px;margin:0 auto 1.5rem;text-align:center;color:var(--text-subtle)}.crop-workspace{margin-top:1rem;padding:clamp(18px,3vw,26px);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}.source-strip{display:grid;grid-template-columns:140px 1fr;gap:1rem;align-items:center;padding:1rem;background:var(--surface-strong);border:1px solid var(--border);border-radius:14px}.source-strip img{display:block;width:140px;height:110px;object-fit:contain;border-radius:10px;background:#fff}.preview-kicker{margin:0 0 .25rem;color:var(--success);font-weight:700}.preview-name{margin:.1rem 0;font-weight:700;overflow-wrap:anywhere}.file-details{margin:.25rem 0;color:var(--text-subtle)}.ratio-picker{border:0;padding:0;margin:1.25rem 0 0}.ratio-picker legend{margin-bottom:.8rem;font-weight:800}.ratio-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}.ratio-card{min-height:100px;padding:.7rem .45rem;background:var(--surface-strong);color:var(--text);border:1px solid var(--border);border-radius:13px;cursor:pointer;text-align:center}.ratio-card span,.ratio-card strong,.ratio-card small{display:block}.ratio-card span{font-size:1.35rem}.ratio-card strong{margin:.3rem 0 .1rem}.ratio-card small{color:var(--text-subtle)}.ratio-card:hover,.ratio-card:focus-visible{border-color:var(--brand);box-shadow:var(--outline)}.ratio-card.is-selected{border-color:var(--success);background:color-mix(in srgb,var(--success) 13%,var(--surface-strong));box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 24%,transparent)}.crop-stage-wrap{margin-top:1.25rem}.crop-instruction{margin:.2rem 0 .65rem;text-align:center;color:var(--text-subtle)}.crop-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px;padding:12px;background:#080e20;border:1px solid var(--border);border-radius:14px;overflow:hidden;touch-action:none}.crop-stage canvas{display:block;max-width:100%;cursor:crosshair;touch-action:none}.crop-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}.crop-summary div{padding:.85rem;background:var(--surface-strong);border:1px solid var(--border);border-radius:12px;text-align:center}.crop-summary span,.crop-summary strong{display:block}.crop-summary span{font-size:.85rem;color:var(--text-subtle)}.crop-summary strong{margin-top:.2rem}.crop-result-card{margin-top:1rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}.crop-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.crop-result-stats div{padding:.8rem;background:var(--surface-strong);border-radius:12px}.crop-result-stats span,.crop-result-stats strong{display:block}.crop-result-stats span{color:var(--text-subtle);font-size:.85rem}.crop-result-preview{display:block;width:100%;max-height:520px;object-fit:contain;margin:1rem auto;border-radius:14px;background:#fff}.privacy-badge{margin:1rem auto 0;text-align:center;color:var(--success);font-weight:700}@media(max-width:820px){.ratio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.crop-workspace{display:flex;flex-direction:column;padding:14px}.source-strip{order:1;grid-template-columns:92px minmax(0,1fr);gap:.75rem;padding:.75rem;text-align:left}.source-strip img{width:92px;height:92px}.source-strip .preview-kicker{font-size:.95rem}.source-strip .preview-name,.source-strip .file-details{font-size:.82rem}.crop-stage-wrap{order:2;margin-top:1rem}.crop-instruction{margin:0 0 .55rem;font-size:.92rem;line-height:1.35}.crop-stage{min-height:220px;padding:6px}.ratio-picker{order:3;margin:.9rem 0 0}.ratio-picker legend{margin-bottom:.5rem;font-size:.95rem}.ratio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.ratio-card{min-height:70px;padding:.45rem .25rem;border-radius:11px}.ratio-card span{font-size:1rem;line-height:1.1}.ratio-card strong{margin:.2rem 0 0;font-size:.78rem;line-height:1.15}.ratio-card small{font-size:.7rem;line-height:1.15}.crop-summary{order:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.9rem}.crop-summary div{padding:.6rem .25rem}.crop-summary span{font-size:.7rem}.crop-summary strong{font-size:.78rem;overflow-wrap:anywhere}.crop-workspace>.actions{order:5;display:grid;grid-template-columns:1fr;gap:.55rem;margin-top:.8rem}.crop-workspace>.actions .btn.secondary{background:#eef2f8;color:#172033;border:2px solid #aeb9ca;font-weight:700}.crop-workspace>.actions .btn.secondary:not(:disabled):hover,.crop-workspace>.actions .btn.secondary:not(:disabled):focus-visible{background:#e4eaf3;border-color:#6f7d93}.crop-workspace>.actions .btn.secondary:disabled{opacity:1;background:#e3e8f0;color:#6c7789;border:2px solid #b7c0cf;filter:none}.crop-result-stats{grid-template-columns:1fr}}@media (prefers-color-scheme:light) and (max-width:600px){.ratio-picker legend{color:#172033;-webkit-text-fill-color:#172033}.ratio-card{background:#eef2f8!important;color:#172033!important;border:2px solid #aeb9ca!important;opacity:1!important;-webkit-text-fill-color:#172033}.ratio-card strong{color:#172033!important;-webkit-text-fill-color:#172033}.ratio-card small{color:#526075!important;-webkit-text-fill-color:#526075}.ratio-card.is-selected{background:#d8f4ed!important;border-color:#18a98a!important;box-shadow:0 0 0 2px rgba(24,169,138,.2)!important}.crop-summary div{background:#eef2f8!important;border:2px solid #aeb9ca!important}.crop-summary span{color:#526075!important;-webkit-text-fill-color:#526075}.crop-summary strong{color:#172033!important;-webkit-text-fill-color:#172033}.crop-workspace>.actions .btn.secondary{background:#e6ebf2!important;color:#172033!important;border:2px solid #98a6ba!important;-webkit-text-fill-color:#172033!important;opacity:1!important}.crop-workspace>.actions .btn.secondary:disabled{background:#e6ebf2!important;color:#172033!important;border-color:#98a6ba!important;-webkit-text-fill-color:#172033!important;opacity:1!important;filter:none!important}}