.crop-topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.crop-topbar a { color: var(--mint); text-decoration: none; font-weight: 800; }
.crop-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: clamp(28px,5vw,68px) 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(24px,5vw,70px); }
.crop-shell h1 { font-size: clamp(2.6rem,6vw,5.3rem); }
.crop-shell > section:first-child > p:last-child { line-height: 1.7; }
.crop-panel { min-width: 0; }
.crop-toolbar { display: flex; flex-wrap: wrap; gap: 9px; }
.canvas-wrap { position: relative; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #030706; cursor: crosshair; user-select: none; touch-action: none; }
#sourceCanvas { display: block; width: 100%; height: auto; }
.selection { position: absolute; border: 2px solid var(--mint); background: rgba(80,239,181,.12); box-shadow: 0 0 0 9999px rgba(0,0,0,.42); pointer-events: none; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.preview-grid > div { min-height: 130px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #091310; }
.preview-grid span, .privacy-note strong { color: var(--mint); font-size: .73rem; font-weight: 900; letter-spacing: .08em; }
#previewCanvas { display: block; max-width: 100%; max-height: 180px; margin-top: 9px; }
.privacy-note p { color: var(--muted); font-size: .76rem; line-height: 1.6; }
@media (max-width: 760px) {
  .crop-shell { grid-template-columns: 1fr; }
  .crop-shell h1 { font-size: 3rem; }
  .preview-grid { grid-template-columns: 1fr; }
}