/* ===== ১. গ্লোবাল এবং প্লাগিন র‍্যাপার স্টাইল (আপডেট করা) ===== */
#dps-plugin-wrapper {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding-top: 1px; /* মার্জিন কলাপ্স এড়ানোর জন্য */
    padding-bottom: 1px;
}

/* ===== ২. Tailwind ইউটিলিটি ক্লাস (HTML এ ব্যবহৃত) ===== */

/* --- লেআউট ও বক্স মডেল --- */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50 { z-index: 50; }

.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-12 { width: 3rem; }
.h-4 { height: 1rem; }
.h-12 { height: 3rem; }
.h-\[480px\] { height: 480px; }
.max-w-\[1200px\] { max-width: 1200px; }
.min-h-screen { min-height: 100vh; }

.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.pt-2 { padding-top: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-2 { margin-left: 0.5rem; }

/* গ্যাপ এবং স্পেস */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }

/* গ্রিড */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- টাইপোগ্রাফি --- */
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-md { font-size: 1rem; line-height: 1.5rem; } /* Custom */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

/* --- কালার --- */
.text-white { color: #ffffff; }
.text-gray-300 { color: #D1D5DB; }
.text-gray-400 { color: #9CA3AF; }
.text-purple-400 { color: #C084FC; }
.text-red-400 { color: #F87171; }
.text-yellow-400 { color: #FACC15; }
.text-blue-400 { color: #60A5FA; }
.text-cyan-400 { color: #22D3EE; }
.text-pink-400 { color: #F472B6; }

/* --- ব্যাকগ্রাউন্ড কালার (বাটন বাদে) --- */
.bg-white { background-color: #ffffff; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1F2937; }
.bg-opacity-75 { background-color: rgba(31, 41, 55, 0.75); }

.bg-sky-50 { background-color: #f0f9ff; }
.bg-sky-200 { background-color: #bae6fd; }
.bg-sky-400 { background-color: #38bdf8; }
.bg-sky-500 { background-color: #0ea5e9; }
.bg-sky-700 { background-color: #0369a1; }

/* গ্রেডিয়েন্ট */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-red-500 { --tw-gradient-from: #ef4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
.via-yellow-500 { --tw-gradient-stops: var(--tw-gradient-from), #eab308, var(--tw-gradient-to, rgba(234, 179, 8, 0)); }
.to-blue-500 { --tw-gradient-to: #3b82f6; }


/* --- বর্ডার --- */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }

.border-gray-400 { border-color: #9CA3AF; }
.border-gray-500 { border-color: #6B7280; }
.border-gray-600 { border-color: #4B5563; }
.border-gray-700 { border-color: #374151; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* --- অন্যান্য --- */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.overflow-hidden { overflow: hidden; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #4B5563; border-radius: 5px; outline: none; opacity: 0.7; transition: opacity 0.2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #ffffff; border-radius: 50%; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #ffffff; border-radius: 50%; cursor: pointer; }

/* --- রেসপন্সিভ (lg: 1024px) --- */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
}


/* ===== ৩. বাটন স্টাইল (আপডেট করা) ===== */

/* --- বাটন: প্রাইমারি (Blue) --- */
.bg-blue-600 { background-color: #2563EB; }
.hover\:bg-blue-700:hover { background-color: #3B82F6; } /* আপটেড: উজ্জ্বল হোভার */

/* --- বাটন: সাকসেস (Green) --- */
.bg-green-600 { background-color: #16A34A; }
.hover\:bg-green-700:hover { background-color: #22C55E; } /* আপটেড: উজ্জ্বল হোভার */

/* --- বাটন: টুল এবং রিসেট (Gray) --- */
.hover\:bg-gray-600:hover { background-color: #4B5563; }
.hover\:bg-red-600:hover { background-color: #DC2626; } /* Remove BG button */

/* --- বাটন: টেক্সট কালার --- */
#btnUpload, #btnUploadCanvas, #btnDownload {
  color: #ffffff;
}
.tool-btn, #btnReset {
  color: #D1D5DB; /* আপটেড: হালকা টেক্সট */
}
.tool-btn:hover, #btnReset:hover {
  color: #ffffff; /* আপটেড: হোভারে উজ্জ্বল টেক্সট */
}

/* --- বাটন: ট্রানজিশন (মসৃণ ইফেক্ট) --- */
#btnUpload, #btnUploadCanvas, #btnDownload, #btnReset, .tool-btn {
  transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}

/* ===== ৪. কাস্টম সিএসএস (আগের কোড) ===== */

.color-box { cursor: pointer; transition: transform 0.2s; }
.color-box:hover { transform: scale(1.1); }
.tool-btn:hover { transform: translateY(-1px); }
.artboard {
  background-image:
    linear-gradient(45deg, #374151 25%, transparent 25%),
    linear-gradient(-45deg, #374151 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #374151 75%),
    linear-gradient(-45deg, transparent 75%, #374151 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}
.artboard canvas, .artboard #placeholder { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.artboard canvas.hidden { display: none; }
.artboard #placeholder { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #9CA3AF; text-align: center; }
.artboard .hidden { display: none !important; }

/* --- Canvas loading spinner --- */
.btn-spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: white; animation: spin 0.8s linear infinite; display:inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.canvas-spinner {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: white;
  animation: spin 0.8s linear infinite;
}

/* --- Toast --- */
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display:flex; flex-direction:column; gap:0.5rem; }
.toast { min-width: 200px; max-width: 320px; padding: .6rem .9rem; border-radius: .5rem; box-shadow: 0 6px 18px rgba(0,0,0,0.45); display:flex; gap: .6rem; align-items: center; font-size: .9rem; color: #fff; }
.toast.success { background: linear-gradient(90deg,#059669,#10b981); }
.toast.fail { background: linear-gradient(90deg,#b91c1c,#ef4444); }
.toast .msg { flex:1; }

#status { font-size: .75rem; color:#9CA3AF; }
.progress { height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(96,165,250,1), rgba(59,130,246,1)); transition: width 220ms linear; }

/* ---------- crop UI styles (overlay version) ---------- */
#cropLayer { position:absolute; inset:0; display:none; z-index:40; pointer-events:auto; }
.crop-overlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#cropStage { position:relative; touch-action:none; user-select:none; }
.mask { position:absolute; inset:0; pointer-events:none; }
.mask > div { position:absolute; background:rgba(0,0,0,0.55); }

.crop-box {
  position:absolute;
  border:2px solid rgba(255,255,255,0.95);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  touch-action:none;
}
.crop-grid { position:absolute; inset:0; pointer-events:none; display:grid; grid-template-rows:1fr 1fr 1fr; grid-template-columns:1fr 1fr 1fr; gap:0; }
.crop-grid > div { border: 0.5px solid rgba(255,255,255,0.12); }
.handle { position:absolute; width:12px; height:12px; background:white; border-radius:2px; transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,0.6); touch-action:none; }
.handle.nw{ left:0; top:0; cursor:nwse-resize;}
.handle.ne{ left:100%; top:0; cursor:nesw-resize;}
.handle.sw{ left:0; top:100%; cursor:nesw-resize;}
.handle.se{ left:100%; top:100%; cursor:nwse-resize;}
.handle.n{ left:50%; top:0; cursor:ns-resize;}
.handle.s{ left:50%; top:100%; cursor:ns-resize;}
.handle.w{ left:0; top:50%; cursor:ew-resize;}
.handle.e{ left:100%; top:50%; cursor:ew-resize;}

#cropControls { position:absolute; left:50%; transform:translateX(-50%); bottom: 12px; display:flex; gap:8px; z-index:60; align-items:center; }
.crop-toggle { padding:.35rem .6rem; border-radius:6px; background:rgba(255,255,255,0.06); color:white; display:flex; gap:6px; align-items:center; }
#cropHint { position:absolute; left:12px; top:12px; font-size:12px; color:#d1d5db; z-index:60;}

/* --- বাটন: ক্রপ (আপডেট করা) --- */
.crop-btn { 
  padding:.45rem .7rem; 
  border-radius:6px; 
  background:rgba(0,0,0,0.55); 
  color: #E5E7EB; /* আপটেড: হালকা টেক্সট */
  border: 1px solid rgba(255,255,255,0.1); 
  cursor: pointer; 
  transition: all 0.2s ease-out;
  backdrop-filter: blur(4px); /* আপটেড: গ্লাস ইফেক্ট */
  -webkit-backdrop-filter: blur(4px);
}
.crop-btn:hover {
  background: rgba(0,0,0,0.75);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.3);
}