.crop-guides{display:none!important;transform:none!important}.crop-guides.is-visible{display:block!important}.crop-handle{position:absolute;width:11px;height:11px;background:#fff;border:1px solid #009eaa;border-radius:2px;z-index:3}.handle-nw{left:-6px;top:-6px;cursor:nwse-resize}.handle-n{left:50%;top:-6px;transform:translateX(-50%);cursor:ns-resize}.handle-ne{right:-6px;top:-6px;cursor:nesw-resize}.handle-e{right:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}.handle-se{right:-6px;bottom:-6px;cursor:nwse-resize}.handle-s{left:50%;bottom:-6px;transform:translateX(-50%);cursor:ns-resize}.handle-sw{left:-6px;bottom:-6px;cursor:nesw-resize}.handle-w{left:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-guides .crop-grid{pointer-events:none}.canvas-frame{touch-action:none!important}.canvas-frame #frame-canvas{position:absolute;inset:0;z-index:1;display:none;pointer-events:none}.canvas-frame #image-canvas{position:relative;z-index:0;display:block}.template-guides{display:none;position:absolute;z-index:3;border:1px solid rgba(0,158,170,.95);box-shadow:0 0 0 1px rgba(255,255,255,.72),0 8px 20px rgba(16,44,49,.12);pointer-events:auto;transform-origin:center;cursor:move;touch-action:none;box-sizing:border-box}.template-guides.is-visible{display:block}.template-guides.is-interacting{border-color:#007f89;box-shadow:0 0 0 2px rgba(0,158,170,.2),0 10px 24px rgba(16,44,49,.18)}.template-handle{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border:0;background:transparent;border-radius:50%;box-shadow:none;z-index:5;touch-action:none}.template-handle::after{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;border:2px solid #fff;background:#009eaa;border-radius:50%;box-shadow:0 1px 4px rgba(16,44,49,.3);box-sizing:border-box}.template-resize-nw{left:0;top:0;cursor:nwse-resize}.template-resize-n{left:50%;top:0;cursor:ns-resize}.template-resize-ne{left:100%;top:0;cursor:nesw-resize}.template-resize-e{left:100%;top:50%;cursor:ew-resize}.template-resize-se{left:100%;top:100%;cursor:nwse-resize}.template-resize-s{left:50%;top:100%;cursor:ns-resize}.template-resize-sw{left:0;top:100%;cursor:nesw-resize}.template-resize-w{left:0;top:50%;cursor:ew-resize}@media (max-width:700px){.template-handle{width:32px;height:32px;margin:-16px 0 0 -16px}.template-handle::after{left:9px;top:9px;width:14px;height:14px}.template-guides{box-shadow:0 0 0 1px rgba(255,255,255,.82),0 5px 14px rgba(16,44,49,.12)}}
.filter-presets{padding:13px 0 7px}.filter-presets-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;font-weight:800;color:#26383a}.filter-presets-heading small{font-size:9px;font-weight:500;color:#7b898b}.filter-preset-grid{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#9bd5d0 transparent}.filter-preset{flex:0 0 82px;border:1px solid #d2e0e0;border-radius:8px;background:#fff;padding:0 0 5px;overflow:hidden;text-align:left;scroll-snap-align:start;transition:border-color .2s,box-shadow .2s,transform .2s}.filter-preset:hover{border-color:#009eaa;transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,158,170,.12)}.filter-preset.active{border:2px solid #009eaa;box-shadow:0 0 0 2px #d7f3f0}.filter-preset strong{display:block;padding:5px 6px 0;font-size:9px;line-height:1.15;color:#27383a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-thumb{display:block;position:relative;aspect-ratio:1.72;background:#edf5f5;overflow:hidden}.filter-thumb canvas{display:block;width:100%;height:100%;object-fit:cover}.adjustments-toggle{width:100%;display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:10px 11px;border:1px solid #cbdcdd;border-radius:8px;background:#fff;color:#294246;font-size:11px;font-weight:800;text-align:left;transition:border-color .2s,background .2s}.adjustments-toggle:hover,.adjustments-toggle.active{border-color:#009eaa;background:#e8f8f8;color:#007f89}.adjustments-toggle .adjustments-chevron{margin-left:auto;width:14px;height:14px;transition:transform .2s}.adjustments-toggle.active .adjustments-chevron{transform:rotate(180deg)}.filter-adjustments{display:none}.filter-adjustments.open{display:block}.filter-adjustments .control-group{padding:12px 0}.filter-adjustments .control-group:first-child{padding-top:14px}
.effects-presets .filter-preset-grid{gap:9px}.effects-presets .filter-preset{flex-basis:98px}.effects-presets .filter-thumb{aspect-ratio:1.8}.effects-card .card-icon{background:#f1eaff!important;color:#7c3aed!important}.effects-card{border-color:#7c3aed!important}.effects-card:hover{border-color:#5b21b6!important}.effect-preset strong{white-space:normal;min-height:22px}.effect-preset.active{border-color:#7c3aed!important;box-shadow:0 0 0 2px #eee7ff!important}
.template-card .card-icon{background:#fff4dc!important;color:#a8792e!important}.template-card{border-color:#c89d4c!important}.template-card:hover{border-color:#a8792e!important}.template-presets .filter-preset-grid{gap:9px}.template-presets .filter-preset{flex-basis:110px}.template-presets .filter-thumb{aspect-ratio:1.63;background:#f4f1ea}.template-preset strong{white-space:normal;min-height:22px}.template-preset .template-id{display:block;padding:3px 6px 0;color:#8a7448;font:9px "DM Mono",monospace;letter-spacing:.04em}.template-preset.active{border-color:#a8792e!important;box-shadow:0 0 0 2px #f5e7c7!important}.template-note{margin:8px 0 0;color:#6b7a7d;font-size:10px;line-height:1.5}.template-reset{width:100%;margin-top:7px}
html,body{max-width:100%;overflow-x:hidden}.workbench,.workbench>*{min-width:0!important;max-width:100%!important}.work-area,.controls{width:100%!important;overflow-x:hidden!important}.canvas-frame,.preview-wrap{max-width:100%!important;min-width:0!important}.canvas-frame canvas{max-width:100%!important;height:auto!important}.filter-preset-grid{max-width:100%!important;min-width:0!important}.filter-preset{min-width:0}.control-group,.filter-presets,.filter-adjustments{min-width:0;max-width:100%}

/* Template Library — Photoshop-style rotation cursor/zone */
.template-guides.cursor-rotate,
.canvas-frame.cursor-rotate {
  cursor: url(assets/rotate-cursor.png) 16 16, grab !important;
}
.template-guides.is-interacting.cursor-rotate,
.canvas-frame.cursor-rotate:active {
  cursor: url(assets/rotate-cursor.png) 16 16, grabbing !important;
}
/* Keep the visible resize dots as resize controls; the rotation gesture lives
   immediately outside their hit area. */
.template-handle { cursor: inherit; }