:root {
    --page-bg: #f2f4f8;
    --win-header-bg: #F92B52;
    --win-header-text: #ffffff;
    --win-body-bg: #ffffff;
    --win-accent: #6c63ff;
    --win-border: #1e2a3a;

    --swatch-1: #6c63ff;
    --swatch-2: #ff6584;
    --swatch-3: #43c6ac;
    --swatch-4: #f7b733;
    --swatch-5: #4f9deb;
    --swatch-6: #ff9472;
    --swatch-7: #2ec4b6;
    --swatch-8: #e63946;
}

.border-bottem{
    border-bottom: solid 2px #ccc;
}
/* ظاهر خود پنجره winbox */
.winbox {
    z-index: 9999!important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    /* border: 1px solid var(--win-border); */
    direction: rtl;
}
.winbox .wb-header {
    background: var(--win-header-bg);
    color: var(--win-header-text);
}
.winbox .wb-body {
    background: var(--win-body-bg);
}

/* عنوان راست، دکمه‌های کنترل چپ */
.winbox .wb-control {
    float: left !important;
    direction: rtl;
}
.winbox .wb-drag {
    padding-left: 0 !important;
    padding-right: 14px !important;
}
.winbox .wb-title {
    text-align: right;
    direction: rtl;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-weight: 500;
}
.winbox .wb-control * {
    opacity: 0.75;
    filter: brightness(3);
}
.winbox .wb-control *:hover {
    opacity: 1;
}

/* محتوای داخل پنجره */
.win-content {
    font-family: "Vazirmatn", Tahoma, sans-serif;
    padding: 20px;
}
.section-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 12px;
    text-align: right;
    color: #1e2a3a;
}
.swatch {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.demo-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s;
}
.demo-card:hover {
    transform: translateY(-4px);
}
.demo-card .card-body {
    padding: 14px;
}