.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.media-card{min-width:0;border:1px solid #e1ddd3;background:#faf9f6;padding:12px}
.media-card>img{display:block;width:100%;height:170px;object-fit:contain;background:#17201c}
.media-card h3{font-size:15px;margin:12px 0}
.media-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.media-card button,.media-rotation button,.media-dialog-footer button,.media-preview-link{min-height:44px;padding:8px 13px;border:1px solid #c9c1b1;background:#fff;color:#23342a;font-size:12px}
.media-card-actions button:first-child,.media-dialog-footer .primary{background:#1b3025;color:#fff;border-color:#1b3025}
button:disabled{opacity:.5;cursor:default}
.media-dialog{width:min(1120px,calc(100% - 24px));max-width:none;max-height:94vh;max-height:94svh;box-sizing:border-box;overflow-y:auto;padding:24px;border:1px solid #ccc6b9;border-radius:8px;background:#f7f5f0;color:#1b251e}
.media-dialog::backdrop{background:#06120cbb;backdrop-filter:blur(4px)}
.media-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #dfdacd;padding-bottom:16px;margin-bottom:20px}
.media-dialog-heading h2{font-size:23px;margin:4px 0}.media-dialog-heading small{font-size:12px;color:#7c6b4d}
.media-icon{width:44px;height:44px;flex-shrink:0;border:1px solid #cbc6bb;background:white;font-size:28px;color:#263a2d}
.media-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:24px}
.media-preview{min-width:0;background:#e7e4dc;padding:12px;border-radius:4px;text-align:center}
.media-preview canvas{display:block;width:auto;max-width:100%;margin-inline:auto;height:auto;max-height:62vh;max-height:62svh;object-fit:contain;touch-action:none;cursor:grab;background-color:#d4d4d4;background-image:conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0);background-size:20px 20px}
.media-preview canvas:active{cursor:grabbing}.media-preview p,.media-help{font-size:12px;color:#6d736c;line-height:1.9;margin:10px 0}
.media-controls label{display:block;font-size:13px;font-weight:600;margin-bottom:18px}
.media-controls select{display:block;width:100%;margin-top:8px;min-height:44px;border:1px solid #ccc6b8;background:white;padding:7px;font:inherit}
.media-controls input[type=range]{display:block;width:100%;min-height:34px;margin-top:6px;accent-color:#896c3f}
.media-controls output{float:left;font-size:12px;color:#807150;direction:ltr}
.media-controls .media-upload{padding:12px;background:#e3d3b4;border:1px solid #bc9b65;margin-bottom:0;cursor:pointer}
.media-upload input{display:block;width:100%;font-size:11px;margin-top:10px}.media-upload input::file-selector-button{padding:7px;border:1px solid #c2ac84;background:#fff;font:inherit;cursor:pointer}
.media-rotation{display:flex;gap:8px;margin-bottom:20px}.media-rotation button{flex:1}
.media-dialog-footer{display:flex;gap:10px;border-top:1px solid #dfdacd;padding-top:16px;margin-top:16px}.media-dialog-footer .primary{margin-top:0;min-width:145px}
.media-error{font-size:13px;color:#a32f25;line-height:1.8}#mediaLoading{font-size:13px;color:#5b604f}
.media-dialog a:focus-visible,.media-dialog button:focus-visible,.media-dialog input:focus-visible,.media-dialog select:focus-visible{outline:2px solid #9b7d48;outline-offset:3px}
@media(max-width:900px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-workspace{grid-template-columns:minmax(0,1fr) 220px;gap:16px}}
@media(max-width:650px){.media-grid{grid-template-columns:1fr;gap:16px}.media-card>img{height:210px}.media-dialog{padding:16px;width:calc(100% - 16px);max-height:96svh}.media-workspace{grid-template-columns:1fr;gap:18px}.media-dialog-heading h2{font-size:20px}.media-preview canvas{max-height:45svh}.media-dialog-footer{position:sticky;bottom:-16px;background:#f7f5f0;padding-bottom:16px;margin-bottom:-16px;z-index:1}.media-dialog-footer button{flex:1}.media-controls select,.login input{font-size:16px}.media-controls .media-upload input{font-size:13px}.tabs{gap:0}.tabs button{padding-inline:13px;min-height:46px}}
/* Direct freeform crop: the selected region always matches the saved pixels. */
.media-card .media-image-button{position:relative;display:block;padding:0;border:0;width:100%;background:#17201c;overflow:hidden;cursor:pointer}
.media-image-button img{display:block;width:100%;height:170px;object-fit:contain}
.media-image-button>span{position:absolute;bottom:0;right:0;left:0;padding:7px;background:#07120acc;color:#fff;font-size:12px;text-align:center}
.media-image-button:hover>span,.media-image-button:focus-visible>span{background:#244434}
.crop-stage{--crop-height:58svh;position:relative;width:min(100%,calc(var(--crop-height) * var(--image-ratio,1.7778)));margin-inline:auto;overflow:hidden;touch-action:none;direction:ltr;background-color:#ddd;background-image:conic-gradient(#f6f6f6 25%,transparent 0 50%,#f6f6f6 0 75%,transparent 0);background-size:20px 20px}
.media-preview .crop-stage canvas{width:100%;height:auto;max-width:none;max-height:none;background:none;cursor:crosshair;touch-action:none}
.crop-selection{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #020b0a99;cursor:move;touch-action:none;min-width:0;min-height:0}
.crop-selection[hidden]{display:none}.crop-selection:focus-visible{outline:3px solid #d3ac65;outline-offset:-5px}
.crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff66 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff66 66.666%,transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff66 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff66 66.666%,transparent calc(66.666% + .5px))}
.crop-handle{position:absolute;display:block;width:28px;height:28px;padding:0;border:0;background:transparent;touch-action:none;z-index:2}
.crop-handle::after{content:'';position:absolute;inset:6px;border:2px solid #86612e;background:#fff;border-radius:3px;box-shadow:0 1px 4px #0004}
.crop-handle-nw{left:-2px;top:-2px;cursor:nwse-resize}.crop-handle-ne{right:-2px;top:-2px;cursor:nesw-resize}.crop-handle-sw{left:-2px;bottom:-2px;cursor:nesw-resize}.crop-handle-se{right:-2px;bottom:-2px;cursor:nwse-resize}
.crop-handle-n{top:-2px;left:50%;transform:translateX(-50%);cursor:ns-resize}.crop-handle-s{bottom:-2px;left:50%;transform:translateX(-50%);cursor:ns-resize}.crop-handle-w{left:-2px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-handle-e{right:-2px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.crop-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#59604f;padding-block:8px;border-top:1px solid #d1ccc1;margin-top:14px}
#cropResult{display:block;width:auto;max-width:100%;max-height:160px;margin:8px auto;cursor:default;touch-action:auto}
.media-reset{width:100%;margin-bottom:20px;min-height:44px;background:white;border:1px solid #ccc6b8;color:#23342a;font:inherit;font-size:13px}
@media(max-width:650px){.media-image-button img{height:210px}.crop-stage{--crop-height:45svh}.media-workspace{gap:16px}.media-dialog-heading{margin-bottom:14px}.crop-result-row{font-size:11px}}