* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/*body {

    font-family: Arial, sans-serif;

    background-color: #c10000;

    color: white;

}



.container {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    padding: 20px;

    background-color: #800101;

    border-radius: 5px;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}*/



header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.logo {

    width: 30%;

}



.buttons {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.btn {

    padding: 15px 40px;

    border: none;

    border-radius: 30px;

    cursor: pointer;

    font-size: 1em;

    transition: all 0.3s ease;

    text-align: center;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

    animation: wave-effect 1.5s infinite linear;

}



@keyframes wave-effect {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: 400% 0;

    }

}



.btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -75%;

    width: 50%;

    height: 100%;

    background: rgba(255, 255, 255, 0.2);

    transform: skewX(-25deg);

    transition: all 0.5s ease;

}



.btn:hover::before {

    left: 150%;

}



/*.btn-primary {

    background: linear-gradient(to right, #ae0821, #fab114, #ae0821);

    color: white;

    background-size: 200% 100%;

}*/



.btn-primary:hover {

    background: linear-gradient(to right, #fd1d1d, #833ab4, #fcb045);

}



.btn-secondary {

    background: linear-gradient(to right, #0da533, #3af754, #0da533);

    color: white;

    background-size: 200% 100%;

}



.btn-secondary:hover {

    background: linear-gradient(to right, #56ccf2, #2f80ed);

}



.btn-main {

    display: block;

    width: 100%;

    background-color: #ff6f00;

    color: white;

    margin: 20px 0;

    font-size: 1.2em;

}



.btn h3 {

    margin: 0;

    font-size: 1em;

}



.promotion {

    text-align: center;

    margin-bottom: 20px;

}



.promo-img {

    width: 100%;

    border-radius: 10px;

}



.offers {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.offer-img {

    width: 100%;

    border-radius: 10px;

}



@media (max-width: 600px) {

    .container {

        padding: 10px;

    }

    .btn {

        padding: 10px 20px;

        font-size: 0.9em;

    }

    .logo {

        width: 50%;

    }

}



.image-container {

    width: 100%; /* ปรับขนาดตามต้องการ */

    height: auto; /* อย่าล็อกความสูงทั้งหน้า */

    overflow: visible; /* อนุญาตให้หน้าเว็บเลื่อนตามความสูงจริง */

    position: relative;

}



.contact {

    width: 100px;

    margin-top: 50px;

    display: block;

    text-align: start;

    color: #61f9c7;

    text-decoration: none;

}

.contact:hover {

    color: #f8f8f8;

}



@media (max-width: 1024px) {

    /* Hide on screens 1024px and below (tablets and phones) */

    .contact {

        display: none;

    }

}

.blur-image {

    /* width: 100%; */

    height: auto;

    filter: blur(8px); /* ปรับค่าความเบลอได้ตามต้องการ เช่น 5px, 10px เป็นต้น */

}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.review-container {
    max-width: 600px;
    /* height: 400px; */
    background: #081108;
    border-radius: 15px;
    padding: 20px;
    margin: 50px auto;
    box-shadow: 0 0 15px #00ff99; 
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-item {
    border: 1px solid #10b981;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(13, 26, 13, 0.8);
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.review-item * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.review-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.profile-image {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #10b981;
    flex-shrink: 0;
}

.review-details {
    flex: 1;
}

.customer-name {
    font-weight: bold;
    font-size: 14px;
    color: #10b981;
    margin-bottom: 0.25rem;
}

.star-rating {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.star {
    color: #fbbf24;
    font-size: 13px;
}

.review-text {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.4;
}

/* Animation classes */
.animate-fade-up {
    animation: fadeUp 0.5s ease-in;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* ========== 10 Themes Support ========== */

html,
body {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    overflow-y: auto;
    color: var(--theme-text);
    background-color: var(--theme-bg-base);
    background-image: var(--theme-bg-gradient);
}

body::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, var(--theme-bg-glow-a) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, var(--theme-bg-glow-b) 0%, transparent 45%);
}

body::after {
    background: radial-gradient(
        ellipse 90% 100% at 50% 50%,
        var(--theme-mask-strong) 0%,
        var(--theme-mask-mid) 35%,
        var(--theme-mask-soft) 55%,
        transparent 70%
    );
}

body.theme-emerald_green {
    --theme-bg-base: #0d0d0d;
    --theme-bg-gradient: linear-gradient(180deg, rgba(10, 15, 12, 0.96) 0%, rgba(13, 22, 16, 0.94) 30%, rgba(10, 18, 13, 0.96) 60%, rgba(5, 10, 6, 0.97) 100%);
    --theme-bg-glow-a: rgba(34, 197, 94, 0.08);
    --theme-bg-glow-b: rgba(22, 163, 74, 0.05);
    --theme-grid-line: rgba(34, 197, 94, 0.25);
    --theme-grid-line-strong: rgba(74, 222, 128, 0.4);
    --theme-mask-strong: rgba(10, 15, 12, 0.92);
    --theme-mask-mid: rgba(10, 18, 13, 0.6);
    --theme-mask-soft: rgba(10, 18, 13, 0.2);
    --theme-text: #e2e8f0;
    --theme-soft-text: #dcfce7;
    --theme-muted: #a7f3d0;
    --theme-primary: #22c55e;
    --theme-secondary: #166534;
    --theme-accent: #86efac;
    --theme-highlight: #00ff66;
    --theme-deep: #050a06;
    --theme-panel: rgba(10, 22, 14, 0.98);
    --theme-panel-solid: #071508;
    --theme-panel-strong: #0a1f14;
    --theme-border: rgba(74, 222, 128, 0.42);
    --theme-border-soft: rgba(34, 197, 94, 0.25);
    --theme-glow: rgba(34, 197, 94, 0.35);
    --theme-glow-soft: rgba(34, 197, 94, 0.14);
    --theme-glow-strong: rgba(74, 222, 128, 0.7);
    --theme-card-gradient: linear-gradient(180deg, rgba(15, 46, 26, 0.95) 0%, rgba(6, 28, 16, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
    --theme-button-gradient: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #15803d 0%, #4ade80 100%);
    --theme-progress-gradient: linear-gradient(90deg, #15803d 0%, #16a34a 25%, #22c55e 50%, #4ade80 75%, #86efac 100%);
}

body.theme-gold_luxury {
    --theme-bg-base: #0c0903;
    --theme-bg-gradient: linear-gradient(180deg, rgba(18, 13, 3, 0.97) 0%, rgba(28, 18, 4, 0.95) 34%, rgba(18, 12, 4, 0.97) 66%, rgba(6, 5, 2, 0.98) 100%);
    --theme-bg-glow-a: rgba(251, 191, 36, 0.1);
    --theme-bg-glow-b: rgba(245, 158, 11, 0.08);
    --theme-grid-line: rgba(251, 191, 36, 0.22);
    --theme-grid-line-strong: rgba(253, 230, 138, 0.38);
    --theme-mask-strong: rgba(13, 9, 3, 0.93);
    --theme-mask-mid: rgba(22, 14, 4, 0.62);
    --theme-mask-soft: rgba(22, 14, 4, 0.22);
    --theme-text: #fff7db;
    --theme-soft-text: #fff3bf;
    --theme-muted: #f8d56a;
    --theme-primary: #fbbf24;
    --theme-secondary: #b45309;
    --theme-accent: #fde68a;
    --theme-highlight: #ffd966;
    --theme-deep: #080501;
    --theme-panel: rgba(24, 16, 4, 0.98);
    --theme-panel-solid: #120c03;
    --theme-panel-strong: #231604;
    --theme-border: rgba(251, 191, 36, 0.45);
    --theme-border-soft: rgba(251, 191, 36, 0.22);
    --theme-glow: rgba(251, 191, 36, 0.38);
    --theme-glow-soft: rgba(251, 191, 36, 0.15);
    --theme-glow-strong: rgba(253, 230, 138, 0.75);
    --theme-card-gradient: linear-gradient(180deg, rgba(44, 28, 5, 0.95) 0%, rgba(16, 10, 2, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #5f370e 0%, #b45309 48%, #fbbf24 100%);
    --theme-button-gradient: linear-gradient(135deg, #92400e 0%, #f59e0b 55%, #facc15 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #b45309 0%, #fbbf24 100%);
    --theme-progress-gradient: linear-gradient(90deg, #92400e 0%, #d97706 25%, #f59e0b 50%, #facc15 75%, #fde68a 100%);
}

body.theme-red_premium {
    --theme-bg-base: #100203;
    --theme-bg-gradient: linear-gradient(180deg, rgba(24, 4, 6, 0.97) 0%, rgba(45, 6, 8, 0.95) 35%, rgba(22, 3, 5, 0.97) 70%, rgba(8, 2, 2, 0.98) 100%);
    --theme-bg-glow-a: rgba(239, 68, 68, 0.11);
    --theme-bg-glow-b: rgba(245, 158, 11, 0.08);
    --theme-grid-line: rgba(239, 68, 68, 0.24);
    --theme-grid-line-strong: rgba(251, 191, 36, 0.34);
    --theme-mask-strong: rgba(18, 3, 5, 0.94);
    --theme-mask-mid: rgba(35, 5, 7, 0.62);
    --theme-mask-soft: rgba(35, 5, 7, 0.22);
    --theme-text: #fff1f2;
    --theme-soft-text: #ffe4b8;
    --theme-muted: #fecaca;
    --theme-primary: #ef4444;
    --theme-secondary: #b91c1c;
    --theme-accent: #fbbf24;
    --theme-highlight: #ffd166;
    --theme-deep: #090102;
    --theme-panel: rgba(28, 4, 6, 0.98);
    --theme-panel-solid: #160305;
    --theme-panel-strong: #310609;
    --theme-border: rgba(248, 113, 113, 0.46);
    --theme-border-soft: rgba(239, 68, 68, 0.24);
    --theme-glow: rgba(239, 68, 68, 0.38);
    --theme-glow-soft: rgba(239, 68, 68, 0.15);
    --theme-glow-strong: rgba(251, 191, 36, 0.7);
    --theme-card-gradient: linear-gradient(180deg, rgba(54, 8, 11, 0.95) 0%, rgba(18, 3, 4, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #7f1d1d 0%, #dc2626 52%, #f59e0b 100%);
    --theme-button-gradient: linear-gradient(135deg, #991b1b 0%, #ef4444 56%, #f59e0b 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    --theme-progress-gradient: linear-gradient(90deg, #991b1b 0%, #dc2626 35%, #ef4444 60%, #f59e0b 100%);
}

body.theme-blue_cyber {
    --theme-bg-base: #020812;
    --theme-bg-gradient: linear-gradient(180deg, rgba(3, 12, 28, 0.97) 0%, rgba(4, 22, 48, 0.95) 35%, rgba(3, 14, 30, 0.97) 70%, rgba(1, 5, 12, 0.98) 100%);
    --theme-bg-glow-a: rgba(56, 189, 248, 0.1);
    --theme-bg-glow-b: rgba(37, 99, 235, 0.08);
    --theme-grid-line: rgba(56, 189, 248, 0.22);
    --theme-grid-line-strong: rgba(103, 232, 249, 0.36);
    --theme-mask-strong: rgba(3, 11, 25, 0.94);
    --theme-mask-mid: rgba(4, 19, 43, 0.62);
    --theme-mask-soft: rgba(4, 19, 43, 0.22);
    --theme-text: #e0f2fe;
    --theme-soft-text: #cffafe;
    --theme-muted: #7dd3fc;
    --theme-primary: #38bdf8;
    --theme-secondary: #2563eb;
    --theme-accent: #67e8f9;
    --theme-highlight: #22d3ee;
    --theme-deep: #010713;
    --theme-panel: rgba(5, 18, 38, 0.98);
    --theme-panel-solid: #041225;
    --theme-panel-strong: #06264a;
    --theme-border: rgba(56, 189, 248, 0.45);
    --theme-border-soft: rgba(56, 189, 248, 0.24);
    --theme-glow: rgba(56, 189, 248, 0.36);
    --theme-glow-soft: rgba(56, 189, 248, 0.14);
    --theme-glow-strong: rgba(103, 232, 249, 0.72);
    --theme-card-gradient: linear-gradient(180deg, rgba(8, 36, 68, 0.95) 0%, rgba(2, 11, 25, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #075985 0%, #2563eb 52%, #38bdf8 100%);
    --theme-button-gradient: linear-gradient(135deg, #1d4ed8 0%, #0284c7 55%, #38bdf8 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
    --theme-progress-gradient: linear-gradient(90deg, #1d4ed8 0%, #2563eb 28%, #0ea5e9 55%, #22d3ee 100%);
}

body.theme-purple_royal {
    --theme-bg-base: #0b0614;
    --theme-bg-gradient: linear-gradient(180deg, rgba(17, 8, 33, 0.97) 0%, rgba(35, 13, 67, 0.95) 35%, rgba(18, 8, 36, 0.97) 70%, rgba(6, 3, 12, 0.98) 100%);
    --theme-bg-glow-a: rgba(192, 132, 252, 0.11);
    --theme-bg-glow-b: rgba(236, 72, 153, 0.08);
    --theme-grid-line: rgba(168, 85, 247, 0.23);
    --theme-grid-line-strong: rgba(240, 171, 252, 0.36);
    --theme-mask-strong: rgba(13, 6, 25, 0.94);
    --theme-mask-mid: rgba(27, 10, 52, 0.62);
    --theme-mask-soft: rgba(27, 10, 52, 0.22);
    --theme-text: #f5f3ff;
    --theme-soft-text: #fae8ff;
    --theme-muted: #d8b4fe;
    --theme-primary: #c084fc;
    --theme-secondary: #7c3aed;
    --theme-accent: #f0abfc;
    --theme-highlight: #e879f9;
    --theme-deep: #06020d;
    --theme-panel: rgba(21, 10, 40, 0.98);
    --theme-panel-solid: #10081f;
    --theme-panel-strong: #241044;
    --theme-border: rgba(192, 132, 252, 0.45);
    --theme-border-soft: rgba(168, 85, 247, 0.24);
    --theme-glow: rgba(192, 132, 252, 0.38);
    --theme-glow-soft: rgba(192, 132, 252, 0.15);
    --theme-glow-strong: rgba(240, 171, 252, 0.72);
    --theme-card-gradient: linear-gradient(180deg, rgba(39, 18, 72, 0.95) 0%, rgba(13, 6, 25, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #581c87 0%, #7c3aed 52%, #ec4899 100%);
    --theme-button-gradient: linear-gradient(135deg, #6d28d9 0%, #a855f7 55%, #ec4899 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #7c3aed 0%, #f0abfc 100%);
    --theme-progress-gradient: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 30%, #c084fc 62%, #f0abfc 100%);
}

body.theme-orange_flame {
    --theme-bg-base: #110603;
    --theme-bg-gradient: linear-gradient(180deg, rgba(28, 11, 5, 0.97) 0%, rgba(58, 21, 8, 0.95) 34%, rgba(32, 12, 5, 0.97) 68%, rgba(10, 4, 2, 0.98) 100%);
    --theme-bg-glow-a: rgba(251, 146, 60, 0.11);
    --theme-bg-glow-b: rgba(239, 68, 68, 0.08);
    --theme-grid-line: rgba(251, 146, 60, 0.23);
    --theme-grid-line-strong: rgba(253, 186, 116, 0.37);
    --theme-mask-strong: rgba(20, 8, 4, 0.94);
    --theme-mask-mid: rgba(45, 17, 7, 0.62);
    --theme-mask-soft: rgba(45, 17, 7, 0.22);
    --theme-text: #fff7ed;
    --theme-soft-text: #ffedd5;
    --theme-muted: #fdba74;
    --theme-primary: #fb923c;
    --theme-secondary: #c2410c;
    --theme-accent: #fed7aa;
    --theme-highlight: #ff7a18;
    --theme-deep: #090302;
    --theme-panel: rgba(30, 12, 6, 0.98);
    --theme-panel-solid: #160904;
    --theme-panel-strong: #351307;
    --theme-border: rgba(251, 146, 60, 0.45);
    --theme-border-soft: rgba(249, 115, 22, 0.24);
    --theme-glow: rgba(251, 146, 60, 0.38);
    --theme-glow-soft: rgba(251, 146, 60, 0.15);
    --theme-glow-strong: rgba(253, 186, 116, 0.72);
    --theme-card-gradient: linear-gradient(180deg, rgba(62, 24, 9, 0.95) 0%, rgba(18, 7, 3, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #9a3412 0%, #ea580c 52%, #fb923c 100%);
    --theme-button-gradient: linear-gradient(135deg, #c2410c 0%, #f97316 56%, #fdba74 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #ea580c 0%, #fdba74 100%);
    --theme-progress-gradient: linear-gradient(90deg, #c2410c 0%, #ea580c 30%, #f97316 58%, #fdba74 100%);
}

body.theme-navy_blue {
    --theme-bg-base: #03100f;
    --theme-bg-gradient: linear-gradient(180deg, rgba(4, 18, 17, 0.97) 0%, rgba(7, 38, 36, 0.95) 34%, rgba(4, 22, 21, 0.97) 68%, rgba(2, 8, 8, 0.98) 100%);
    --theme-bg-glow-a: rgba(45, 212, 191, 0.11);
    --theme-bg-glow-b: rgba(34, 211, 238, 0.08);
    --theme-grid-line: rgba(45, 212, 191, 0.22);
    --theme-grid-line-strong: rgba(153, 246, 228, 0.38);
    --theme-mask-strong: rgba(4, 17, 16, 0.94);
    --theme-mask-mid: rgba(6, 32, 30, 0.62);
    --theme-mask-soft: rgba(6, 32, 30, 0.22);
    --theme-text: #ecfeff;
    --theme-soft-text: #ccfbf1;
    --theme-muted: #99f6e4;
    --theme-primary: #2dd4bf;
    --theme-secondary: #0f766e;
    --theme-accent: #5eead4;
    --theme-highlight: #67e8f9;
    --theme-deep: #020807;
    --theme-panel: rgba(5, 26, 24, 0.98);
    --theme-panel-solid: #061413;
    --theme-panel-strong: #0c302d;
    --theme-border: rgba(45, 212, 191, 0.45);
    --theme-border-soft: rgba(45, 212, 191, 0.23);
    --theme-glow: rgba(45, 212, 191, 0.36);
    --theme-glow-soft: rgba(45, 212, 191, 0.14);
    --theme-glow-strong: rgba(153, 246, 228, 0.72);
    --theme-card-gradient: linear-gradient(180deg, rgba(10, 50, 47, 0.95) 0%, rgba(3, 16, 15, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #115e59 0%, #0f766e 46%, #14b8a6 100%);
    --theme-button-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #5eead4 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #14b8a6 0%, #99f6e4 100%);
    --theme-progress-gradient: linear-gradient(90deg, #0f766e 0%, #0d9488 28%, #14b8a6 56%, #5eead4 100%);
}

body.theme-copper_night {
    --theme-bg-base: #12060c;
    --theme-bg-gradient: linear-gradient(180deg, rgba(26, 9, 18, 0.97) 0%, rgba(54, 14, 34, 0.95) 34%, rgba(29, 9, 20, 0.97) 68%, rgba(10, 4, 7, 0.98) 100%);
    --theme-bg-glow-a: rgba(251, 113, 133, 0.11);
    --theme-bg-glow-b: rgba(244, 114, 182, 0.08);
    --theme-grid-line: rgba(251, 113, 133, 0.23);
    --theme-grid-line-strong: rgba(249, 168, 212, 0.37);
    --theme-mask-strong: rgba(20, 7, 14, 0.94);
    --theme-mask-mid: rgba(42, 11, 27, 0.62);
    --theme-mask-soft: rgba(42, 11, 27, 0.22);
    --theme-text: #fff1f6;
    --theme-soft-text: #ffe4ef;
    --theme-muted: #f9a8d4;
    --theme-primary: #fb7185;
    --theme-secondary: #be185d;
    --theme-accent: #fbcfe8;
    --theme-highlight: #f472b6;
    --theme-deep: #0a0306;
    --theme-panel: rgba(27, 9, 18, 0.98);
    --theme-panel-solid: #15070e;
    --theme-panel-strong: #341024;
    --theme-border: rgba(251, 113, 133, 0.45);
    --theme-border-soft: rgba(244, 114, 182, 0.23);
    --theme-glow: rgba(251, 113, 133, 0.36);
    --theme-glow-soft: rgba(251, 113, 133, 0.14);
    --theme-glow-strong: rgba(249, 168, 212, 0.72);
    --theme-card-gradient: linear-gradient(180deg, rgba(60, 16, 39, 0.95) 0%, rgba(16, 5, 11, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #9d174d 0%, #e11d48 50%, #f472b6 100%);
    --theme-button-gradient: linear-gradient(135deg, #be185d 0%, #ec4899 55%, #f9a8d4 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #e11d48 0%, #fbcfe8 100%);
    --theme-progress-gradient: linear-gradient(90deg, #be185d 0%, #db2777 28%, #ec4899 58%, #f9a8d4 100%);
}

body.theme-silver_frost {
    --theme-bg-base: #050913;
    --theme-bg-gradient: linear-gradient(180deg, rgba(9, 14, 28, 0.97) 0%, rgba(18, 28, 48, 0.95) 34%, rgba(11, 16, 31, 0.97) 68%, rgba(3, 6, 12, 0.98) 100%);
    --theme-bg-glow-a: rgba(226, 232, 240, 0.1);
    --theme-bg-glow-b: rgba(147, 197, 253, 0.08);
    --theme-grid-line: rgba(203, 213, 225, 0.2);
    --theme-grid-line-strong: rgba(191, 219, 254, 0.34);
    --theme-mask-strong: rgba(8, 12, 24, 0.94);
    --theme-mask-mid: rgba(14, 21, 39, 0.62);
    --theme-mask-soft: rgba(14, 21, 39, 0.22);
    --theme-text: #f8fafc;
    --theme-soft-text: #e2e8f0;
    --theme-muted: #cbd5e1;
    --theme-primary: #cbd5e1;
    --theme-secondary: #64748b;
    --theme-accent: #bfdbfe;
    --theme-highlight: #93c5fd;
    --theme-deep: #020611;
    --theme-panel: rgba(12, 18, 34, 0.98);
    --theme-panel-solid: #0b1120;
    --theme-panel-strong: #1b2840;
    --theme-border: rgba(203, 213, 225, 0.38);
    --theme-border-soft: rgba(148, 163, 184, 0.22);
    --theme-glow: rgba(148, 163, 184, 0.32);
    --theme-glow-soft: rgba(148, 163, 184, 0.13);
    --theme-glow-strong: rgba(191, 219, 254, 0.62);
    --theme-card-gradient: linear-gradient(180deg, rgba(23, 34, 55, 0.95) 0%, rgba(8, 12, 23, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #334155 0%, #64748b 48%, #cbd5e1 100%);
    --theme-button-gradient: linear-gradient(135deg, #475569 0%, #94a3b8 55%, #dbeafe 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #64748b 0%, #bfdbfe 100%);
    --theme-progress-gradient: linear-gradient(90deg, #334155 0%, #64748b 28%, #94a3b8 58%, #dbeafe 100%);
}

body.theme-copper_night {
    --theme-bg-base: #110806;
    --theme-bg-gradient: linear-gradient(180deg, rgba(23, 12, 8, 0.97) 0%, rgba(44, 20, 12, 0.95) 34%, rgba(24, 11, 8, 0.97) 68%, rgba(9, 5, 3, 0.98) 100%);
    --theme-bg-glow-a: rgba(249, 115, 22, 0.1);
    --theme-bg-glow-b: rgba(217, 119, 6, 0.08);
    --theme-grid-line: rgba(249, 115, 22, 0.22);
    --theme-grid-line-strong: rgba(254, 215, 170, 0.34);
    --theme-mask-strong: rgba(18, 9, 6, 0.94);
    --theme-mask-mid: rgba(35, 17, 10, 0.62);
    --theme-mask-soft: rgba(35, 17, 10, 0.22);
    --theme-text: #fff7ed;
    --theme-soft-text: #ffedd5;
    --theme-muted: #fdba74;
    --theme-primary: #ea580c;
    --theme-secondary: #9a3412;
    --theme-accent: #fed7aa;
    --theme-highlight: #f59e0b;
    --theme-deep: #080402;
    --theme-panel: rgba(27, 13, 8, 0.98);
    --theme-panel-solid: #140904;
    --theme-panel-strong: #2f160c;
    --theme-border: rgba(249, 115, 22, 0.42);
    --theme-border-soft: rgba(234, 88, 12, 0.22);
    --theme-glow: rgba(249, 115, 22, 0.34);
    --theme-glow-soft: rgba(249, 115, 22, 0.14);
    --theme-glow-strong: rgba(254, 215, 170, 0.64);
    --theme-card-gradient: linear-gradient(180deg, rgba(55, 24, 12, 0.95) 0%, rgba(16, 8, 4, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #7c2d12 0%, #c2410c 48%, #f59e0b 100%);
    --theme-button-gradient: linear-gradient(135deg, #9a3412 0%, #ea580c 55%, #fdba74 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #c2410c 0%, #fed7aa 100%);
    --theme-progress-gradient: linear-gradient(90deg, #9a3412 0%, #c2410c 30%, #ea580c 58%, #fdba74 100%);
}

/* ========== Original Theme (Default) ========== */

body.theme-original,
[data-theme="original"] {
    --theme-bg-base: #0d0d0d;
    --theme-bg-gradient: linear-gradient(180deg, rgba(10, 15, 12, 0.96) 0%, rgba(13, 22, 16, 0.94) 30%, rgba(10, 18, 13, 0.96) 60%, rgba(5, 10, 6, 0.97) 100%);
    --theme-bg-glow-a: rgba(34, 197, 94, 0.08);
    --theme-bg-glow-b: rgba(22, 163, 74, 0.05);
    --theme-grid-line: rgba(34, 197, 94, 0.25);
    --theme-grid-line-strong: rgba(74, 222, 128, 0.4);
    --theme-mask-strong: rgba(10, 15, 12, 0.92);
    --theme-mask-mid: rgba(10, 18, 13, 0.6);
    --theme-mask-soft: rgba(10, 18, 13, 0.2);
    --theme-text: #e2e8f0;
    --theme-soft-text: #dcfce7;
    --theme-muted: #a7f3d0;
    --theme-primary: #22c55e;
    --theme-secondary: #166534;
    --theme-accent: #86efac;
    --theme-highlight: #00ff66;
    --theme-deep: #050a06;
    --theme-panel: rgba(10, 22, 14, 0.98);
    --theme-panel-solid: #071508;
    --theme-panel-strong: #0a1f14;
    --theme-border: rgba(74, 222, 128, 0.42);
    --theme-border-soft: rgba(34, 197, 94, 0.25);
    --theme-glow: rgba(34, 197, 94, 0.35);
    --theme-glow-soft: rgba(34, 197, 94, 0.14);
    --theme-glow-strong: rgba(74, 222, 128, 0.7);
    --theme-card-gradient: linear-gradient(180deg, rgba(15, 46, 26, 0.95) 0%, rgba(6, 28, 16, 0.98) 100%);
    --theme-header-gradient: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
    --theme-button-gradient: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    --theme-button-hover-gradient: linear-gradient(135deg, #15803d 0%, #4ade80 100%);
    --theme-progress-gradient: linear-gradient(90deg, #15803d 0%, #16a34a 25%, #22c55e 50%, #4ade80 75%, #86efac 100%);
}