/* TTB Image Cropper styles */
.ttb-tool{max-width:980px;margin:24px auto;padding:20px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.05);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:#111827}
.ttb-header h2{margin:0 0 6px 0;font-size:1.5rem;font-weight:800}
.ttb-sub{margin:0 0 16px 0;color:#6b7280}
.ttb-card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;background:#fafafa;margin-bottom:14px}
.ttb-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ttb-meta{color:#374151;gap:18px}
.ttb-inputs label{display:flex;align-items:center;gap:6px}
.ttb-inputs input[type=number]{max-width:120px}
.ttb-inputs .lock{margin-left:auto}
.ttb-actions{gap:12px}
.ttb-error{margin-top:8px;padding:8px 12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:10px;font-size:.95rem}
.ttb-btn{appearance:none;border:1px solid #3b82f6;background:#3b82f6;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;box-shadow:0 6px 18px rgba(59,130,246,.25)}
.ttb-btn:hover{filter:brightness(1.05)} .ttb-btn:active{transform:translateY(1px)}
.ttb-btn.ghost{background:transparent;color:#374151;border-color:#d1d5db;box-shadow:none}

.ttb-icrop-stage{max-width:100%;overflow:hidden}
.ic-stage-inner{max-width:100%;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb}
.ic-viewport{position:relative;width:max-content;height:max-content}
.ic-layer{position:relative;display:inline-block;line-height:0}
#ic-img{display:none;max-width:none;height:auto}
.ic-sel{position:absolute;border:none;display:none}
.ic-sel::after{content:'';position:absolute;inset:0;border:2px solid #1f2937;pointer-events:none}
.ic-handle{position:absolute;width:12px;height:12px;background:#111827;border-radius:2px;outline:1px solid #fff}
.ic-h-nw{top:-6px;left:-6px;cursor:nwse-resize} .ic-h-n{top:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.ic-h-ne{top:-6px;right:-6px;cursor:nesw-resize} .ic-h-e{top:50%;right:-6px;transform:translateY(-50%);cursor:ew-resize}
.ic-h-se{bottom:-6px;right:-6px;cursor:nwse-resize} .ic-h-s{bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.ic-h-sw{bottom:-6px;left:-6px;cursor:nesw-resize} .ic-h-w{top:50%;left:-6px;transform:translateY(-50%);cursor:ew-resize}

#ic-file{display:block;width:100%;max-width:100%;padding:14px 16px;border:2px dashed #9ca3af;border-radius:10px;background:#f9fafb;color:#374151;box-sizing:border-box;overflow:hidden;white-space:nowrap}
#ic-file:hover,#ic-file:focus{border-color:#3b82f6;background:#f3f4f6;outline:none}
#ic-file::file-selector-button{background:#3b82f6;border:none;color:#fff;font-weight:600;padding:8px 12px;margin-right:12px;border-radius:6px;cursor:pointer}
#ic-file::file-selector-button:hover{background:#2563eb}

.ic-stage-inner{
  padding: 20px;      /* 20px on each side */
  overflow: hidden;     /* no horizontal scroll */
}
#ic-viewport{
  margin: 0 auto;       /* center the scaled image box */
}