.crop-page { background: #f3f0e8; }
.crop-main { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 88px; }
.crop-main [hidden] { display: none !important; }
.crop-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: end; padding: 36px 0 44px; border-bottom: 1px solid #d8d2c7; }
.crop-hero .eyebrow { color: #b6452e; font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.crop-hero h1 { max-width: 820px; margin: 17px 0 18px; color: #211f1c; font: 500 clamp(50px, 7vw, 92px)/.92 Georgia, serif; letter-spacing: -.065em; }
.crop-hero h1 em { display: block; color: #c64b2d; font-weight: 400; }
.crop-hero p { max-width: 780px; margin: 0; color: #69645c; font-size: 17px; line-height: 1.75; }
.crop-privacy-note { align-self: center; padding: 22px; border: 1px solid #d6d0c5; background: rgba(255,255,255,.38); }
.crop-privacy-note span { display: flex; align-items: center; gap: 10px; color: #47705e; font: 800 12px/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.crop-privacy-note i { width: 9px; height: 9px; border-radius: 50%; background: #48a77c; box-shadow: 0 0 0 7px rgba(72,167,124,.12); }
.crop-privacy-note p { margin: 13px 0 0; font-size: 14px; line-height: 1.6; }

.crop-tool { margin-top: 34px; border: 1px solid #cfc8bc; background: rgba(255,255,255,.34); box-shadow: 0 24px 70px rgba(64,55,42,.08); }
.crop-tool-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 25px 28px; border-bottom: 1px solid #d9d2c6; }
.crop-tool-heading span { color: #c64b2d; font: 850 12px/1.3 ui-monospace, monospace; letter-spacing: .13em; }
.crop-tool-heading h2 { margin: 7px 0 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
.crop-tool-heading ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crop-tool-heading li { padding: 8px 12px; border: 1px solid #d4cdc1; border-radius: 999px; color: #5f5a52; font-size: 13px; font-weight: 750; }

.crop-drop { min-height: 430px; display: grid; place-items: center; padding: 40px; text-align: center; outline: 2px dashed transparent; outline-offset: -18px; transition: background .18s ease, outline-color .18s ease; }
.crop-drop.dragging { outline-color: #c64b2d; background: #fbf0e9; }
.crop-drop-art { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; color: #fff; background: #292722; box-shadow: 0 18px 34px rgba(36,33,29,.18); }
.crop-drop-art svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.crop-drop h3 { margin: 0 0 10px; font: 500 35px/1.1 Georgia, serif; }
.crop-drop p { margin: 0 0 22px; color: #777168; font-size: 15px; }
.crop-upload-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.crop-upload-actions button, .crop-secondary, .crop-primary, .crop-download { min-height: 48px; padding: 0 20px; border: 1px solid #c9c1b4; color: #282622; background: #fffdf9; font-size: 14px; font-weight: 800; cursor: pointer; }
.crop-upload-actions button:first-child, .crop-primary, .crop-download { border-color: #292722; color: #fff; background: #292722; }
.crop-drop small { display: block; margin-top: 18px; color: #8a847b; font-size: 13px; }

.crop-workspace { width: 100%; box-sizing: border-box; padding: 26px; text-align: left; }
.crop-source-bar { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 22px; padding: 14px 16px; border: 1px solid #d9d2c6; background: #f7f3ec; }
.crop-source-bar div { min-width: 0; }
.crop-source-bar strong, .crop-source-bar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crop-source-bar strong { font-size: 15px; }
.crop-source-bar span { margin-top: 4px; color: #777168; font-size: 13px; }
.crop-secondary { min-height: 40px; flex: 0 0 auto; padding: 0 15px; }
.crop-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.crop-preview-column { min-width: 0; }
.crop-panel-label { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.crop-panel-label span { color: #c64b2d; font: 900 17px/1 ui-monospace, monospace; }
.crop-panel-label h3 { margin: 0; font-size: 18px; }
.crop-stage-shell { overflow: auto; padding: 18px; border: 1px solid #cfc8bc; background-color: #e9e5de; background-image: linear-gradient(45deg,#ddd8cf 25%,transparent 25%),linear-gradient(-45deg,#ddd8cf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd8cf 75%),linear-gradient(-45deg,transparent 75%,#ddd8cf 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }
.crop-stage { position: relative; width: 100%; max-height: 72vh; margin: auto; overflow: hidden; background: #b9b3a9; box-shadow: 0 16px 38px rgba(42,38,33,.16); }
.crop-stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.crop-selection { position: absolute; z-index: 2; min-width: 10px; min-height: 10px; border: 2px solid #ff6548; box-shadow: 0 0 0 9999px rgba(20,18,16,.57), 0 0 0 1px rgba(255,255,255,.75) inset; cursor: move; touch-action: none; }
.crop-selection::before, .crop-selection::after { content: ""; position: absolute; pointer-events: none; }
.crop-selection::before { left: 33.333%; top: 0; bottom: 0; width: 33.333%; border-left: 1px solid rgba(255,255,255,.75); border-right: 1px solid rgba(255,255,255,.75); }
.crop-selection::after { left: 0; right: 0; top: 33.333%; height: 33.333%; border-top: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.75); }
.crop-handle { position: absolute; z-index: 3; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #ff6548; box-shadow: 0 2px 8px rgba(24,20,17,.35); }
.crop-handle[data-crop-handle="nw"] { left: 0; top: 0; transform: translate(-50%,-50%); cursor: nwse-resize; }
.crop-handle[data-crop-handle="n"] { left: 50%; top: 0; transform: translate(-50%,-50%); cursor: ns-resize; }
.crop-handle[data-crop-handle="ne"] { right: 0; top: 0; transform: translate(50%,-50%); cursor: nesw-resize; }
.crop-handle[data-crop-handle="e"] { right: 0; top: 50%; transform: translate(50%,-50%); cursor: ew-resize; }
.crop-handle[data-crop-handle="se"] { right: 0; bottom: 0; transform: translate(50%,50%); cursor: nwse-resize; }
.crop-handle[data-crop-handle="s"] { left: 50%; bottom: 0; transform: translate(-50%,50%); cursor: ns-resize; }
.crop-handle[data-crop-handle="sw"] { left: 0; bottom: 0; transform: translate(-50%,50%); cursor: nesw-resize; }
.crop-handle[data-crop-handle="w"] { left: 0; top: 50%; transform: translate(-50%,-50%); cursor: ew-resize; }
.crop-stage-help { margin: 12px 2px 0; color: #777168; font-size: 13px; line-height: 1.6; }

.crop-settings { border: 1px solid #292722; color: #f4f0e8; background: #292722; }
.crop-settings-section { padding: 20px; border-bottom: 1px solid #4a4741; }
.crop-settings-section:last-child { border-bottom: 0; }
.crop-settings legend, .crop-settings h3 { margin: 0 0 13px; color: #fff; font-size: 15px; font-weight: 850; }
.crop-settings fieldset { margin: 0; padding: 0; border: 0; }
.crop-aspects, .crop-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.crop-aspects button, .crop-formats label span { min-height: 41px; display: grid; place-items: center; padding: 6px; border: 1px solid #59554e; color: #d8d2c9; background: #34322e; font-size: 13px; font-weight: 800; cursor: pointer; }
.crop-aspects button.active, .crop-formats input:checked + span { border-color: #ff775d; color: #fff; background: #b8462e; }
.crop-formats input { position: absolute; opacity: 0; pointer-events: none; }
.crop-coordinates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.crop-coordinates label, .crop-quality { color: #bab4ab; font-size: 12px; font-weight: 750; }
.crop-coordinates input { width: 100%; min-height: 43px; box-sizing: border-box; margin-top: 6px; padding: 0 10px; border: 1px solid #5b574f; color: #fff; background: #34322e; font: 750 14px ui-monospace, monospace; }
.crop-setting-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.crop-setting-actions button { min-height: 40px; border: 1px solid #5b574f; color: #ddd7ce; background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.crop-quality { display: block; margin-top: 16px; }
.crop-quality div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.crop-quality input { width: 100%; accent-color: #ff775d; }
.crop-primary, .crop-download { width: 100%; min-height: 54px; border-color: #dc5a3d; background: #c64b2d; }
.crop-primary:disabled, .crop-download:disabled { opacity: .45; cursor: not-allowed; }
.crop-message { min-height: 44px; margin: 12px 0 0; color: #aaa49b; font-size: 13px; line-height: 1.55; }
.crop-message[data-state="ready"] { color: #8bd3ad; }
.crop-message[data-state="error"] { color: #ff9d88; }
.crop-message[data-state="processing"] { color: #f4c47c; }

.crop-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid #d8d2c7; }
.crop-result-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: center; }
.crop-result-preview { display: grid; place-items: center; min-height: 240px; max-height: 560px; overflow: auto; padding: 18px; border: 1px solid #d2cbc0; background: #e9e5de; }
.crop-result canvas { display: block; max-width: 100%; max-height: 520px; box-shadow: 0 14px 34px rgba(42,38,33,.14); }
.crop-result aside strong { display: block; margin-bottom: 6px; font-size: 18px; }
.crop-result aside span { display: block; margin-bottom: 18px; color: #6f6961; font-size: 14px; }

.crop-benefits { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 62px; border: 1px solid #d4cdc1; }
.crop-benefits article { min-height: 145px; padding: 23px; border-right: 1px solid #d4cdc1; }
.crop-benefits article:last-child { border-right: 0; }
.crop-benefits span { color: #c64b2d; font: 850 12px ui-monospace, monospace; }
.crop-benefits strong { display: block; margin: 13px 0 7px; font-size: 17px; }
.crop-benefits p { margin: 0; color: #706a62; font-size: 14px; line-height: 1.65; }

@media (max-width: 980px) {
  .crop-hero { grid-template-columns: 1fr; }
  .crop-privacy-note { max-width: 620px; }
  .crop-editor-grid { grid-template-columns: 1fr; }
  .crop-settings { display: grid; grid-template-columns: repeat(2, 1fr); }
  .crop-settings-section:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .crop-main { width: calc(100% - 24px); padding-top: 24px; }
  .crop-hero { gap: 24px; padding: 22px 0 30px; }
  .crop-hero h1 { font-size: clamp(46px, 16vw, 68px); }
  .crop-hero p { font-size: 15px; }
  .crop-tool-heading { display: block; padding: 20px; }
  .crop-tool-heading ul { justify-content: flex-start; margin-top: 16px; }
  .crop-drop { min-height: 360px; padding: 28px 18px; }
  .crop-workspace { padding: 14px; }
  .crop-source-bar { align-items: flex-start; }
  .crop-stage-shell { padding: 10px; overflow: visible; }
  .crop-stage { max-height: none; }
  .crop-handle { width: 22px; height: 22px; }
  .crop-settings { display: block; }
  .crop-result-grid { grid-template-columns: 1fr; }
  .crop-benefits { grid-template-columns: 1fr; }
  .crop-benefits article { border-right: 0; border-bottom: 1px solid #d4cdc1; }
  .crop-benefits article:last-child { border-bottom: 0; }
}