:root {
    --bs-primary-rgb: 155, 89, 182;
    --bs-primary: #9b59b6;
    --dark-bg: #1e1e2f;
    --dark-surface: #2c2c3f;
    --light-text: #f0f0f0;
    --muted-text: #a0a0b0;
}

body {
    font-family: 'Sarabun', sans-serif;
    background-color: var(--dark-bg);
    color: var(--light-text);
    overflow-x: hidden;
}

body:has(main) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* --- Navbar & General Components --- */
.navbar.bg-dark { background-color: var(--dark-surface) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.navbar-nav .nav-link.active { font-weight: bold; color: var(--bs-primary) !important; }
.dropdown-menu { background-color: var(--dark-surface); border: 1px solid rgba(255, 255, 255, 0.1); }
.dropdown-item { color: var(--light-text); }
.dropdown-item:hover { background-color: var(--bs-primary); color: white; }
.card, .alert { border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--dark-surface); box-shadow: none; }
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); font-weight: bold; color: white; }
.btn-primary:hover { background-color: #8e44ad; border-color: #8e44ad; }
a { color: var(--bs-primary); }
a:hover { color: #b072c8; }
.form-control { background-color: var(--dark-bg); color: var(--light-text); border-color: rgba(255, 255, 255, 0.1); }
.form-control:focus { background-color: var(--dark-bg); color: var(--light-text); border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); }
.text-muted { color: var(--muted-text) !important; }

/* --- Home Page Specific --- */
.home-title { color: var(--light-text); font-weight: bold; letter-spacing: -0.5px; }
.home-alert { background-color: var(--dark-surface); border-left: 5px solid var(--bs-primary); color: var(--light-text); }
.card-title, .card-title-about {
    color: var(--light-text);
}

.card h3.card-title {
    color: #f0f0f0 !important; /* Ensure visibility on dark cards */
}

/* --- Starry Background --- */
#star-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; pointer-events: none; }
.star { position: absolute; background-color: white; border-radius: 50%; animation-name: sparkle; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes sparkle { 0%, 100% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* --- Aura Effect --- */
#aura-effect { display: none; position: fixed; top: 0; left: 0; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(155, 89, 182, 0.4) 0%, rgba(155, 89, 182, 0) 60%); filter: blur(50px); z-index: -1; pointer-events: none; transition: transform 0.1s ease-out; }

/* --- Custom Cursor --- */
#custom-cursor { display: none; position: fixed; width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; pointer-events: none; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 9999; transition: transform 0.1s ease-out; }
body.no-touch #custom-cursor { display: block; }
body.no-touch * { cursor: none !important; }