@import url('https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/font-face.css');

body {
    font-family: 'Sahel', sans-serif;
    background-color: #09090b; /* Dark Zinc */
    color: #f4f4f5;
    margin: 0;
    height: 100vh; 
    height: 100dvh;
    overflow: hidden; 
    overscroll-behavior: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

input[type=range] {
    -webkit-appearance: none; width: 100%; background: transparent; margin: 0; touch-action: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%; background: #ffffff;
    cursor: pointer; margin-top: -11px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); border: 4px solid #18181b;
    transition: transform 0.1s, background 0.1s;
}
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); background: #3b82f6; border-color: #ffffff; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #3f3f46; border-radius: 3px; }
input[type=range]:focus { outline: none; }

input[type=range].mini-slider::-webkit-slider-thumb { height: 20px; width: 20px; margin-top: -7px; border-width: 2px; }

.hidden-element { display: none !important; }

#canvas-wrapper { cursor: pointer; touch-action: none; }

.loader {
    border: 3px solid rgba(255,255,255,0.1); border-left-color: #3b82f6; border-radius: 50%;
    width: 16px; height: 16px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.bg-checkered {
    background-color: #09090b;
    background-image: linear-gradient(45deg, #121214 25%, transparent 25%), linear-gradient(-45deg, #121214 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #121214 75%), linear-gradient(-45deg, transparent 75%, #121214 75%);
    background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.tool-btn.active { color: #3b82f6; }
.tool-btn.active .icon-wrapper { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }

/* استایل‌های مربوط به کادر برش */
#crop-overlay { position: absolute; overflow: hidden; pointer-events: none; }
#crop-box {
    position: absolute; border: 2px solid #3b82f6; pointer-events: auto;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.65);
}
.crop-handle {
    position: absolute; width: 20px; height: 20px; background: #ffffff;
    border: 3px solid #3b82f6; border-radius: 50%; pointer-events: auto; z-index: 10;
}
.crop-handle.nw { top: -10px; left: -10px; cursor: nwse-resize; }
.crop-handle.ne { top: -10px; right: -10px; cursor: nesw-resize; }
.crop-handle.sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.crop-handle.se { bottom: -10px; right: -10px; cursor: nwse-resize; }

/* استایل‌های ورودی تغییر ابعاد و نام */
.custom-input {
    background: #18181b; border: 1px solid #3f3f46; color: #fff;
    border-radius: 8px; outline: none; transition: border-color 0.2s;
}
.custom-input:focus { border-color: #3b82f6; }
.resize-input { text-align: center; padding: 6px; width: 100%; font-family: monospace; }
.filename-input { padding: 6px 8px; width: 100%; font-size: 12px; }
@media (min-width: 640px) { .filename-input { width: 130px; font-size: 13px; } }