:root{
    /* Peakboard-like default palette (you can adjust these) */
    --primary: #5c2daf; /* deep purple */
    --accent:  #00aeef; /* cyan accent */
    --bg:      #0b0b0b;
    --card:    #111214;
    --muted:   #ffffff;
}

/* Page base */
body{
    background-color: var(--bg);
    color: #eef2f5;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card{
    background-color: var(--card);
    border: 1px solid rgba(255,255,255,0.03);
}

.btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus{
    background-color: color-mix(in srgb, var(--primary) 75%, black);
    border-color: color-mix(in srgb, var(--primary) 75%, black);
}

/* Subtle form inputs styling */
.form-control, .form-select{
    background-color: #0f1315;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.04);
}

.form-label{ color: var(--muted); }

/* Small responsive tweaks */
@media (max-width: 576px){
    .card{ padding: 1rem; }
}

/* Helper to customize colors quickly */
.brand-accent{ color: var(--accent); }

/* Placeholder color: make it lighter so it's easier to read */
.form-control::placeholder,
.form-select::placeholder,
.form-control textarea::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.65);
    opacity: 1; /* ensure consistent appearance across browsers */
}

/* Vendor-prefixed rules for broader compatibility */
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.65); }
.form-control:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: rgba(255,255,255,0.65); }
.form-control::-ms-input-placeholder,
textarea::-ms-input-placeholder { color: rgba(255,255,255,0.65); }