/* Custom Scrollbar for textareas and containers */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #0f172a;
    /* slate-900 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    /* slate-700 */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
    /* slate-600 */
}

/* Background Grid Pattern */
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(51, 65, 85, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(51, 65, 85, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* SVG Rendering Styles */
.path-original {
    fill: none;
    stroke: #64748b;
    /* slate-500 */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.5;
}

.poly-result {
    fill: rgba(56, 189, 248, 0.1);
    /* accent with opacity */
    stroke: #38bdf8;
    /* accent */
    stroke-width: 1.5;
    stroke-linejoin: bevel;
}

.point-marker {
    fill: #38bdf8;
    transition: r 0.1s;
}

.point-marker:hover {
    r: 4;
    fill: #fff;
    cursor: pointer;
}

input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #38bdf8;
    cursor: pointer;
    margin-top: -6px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #334155;
    border-radius: 2px;
}