/* Buffstreams colors for PageBoss Theme Switcher. */
:root {
    --bg-primary: #121212;
    --bg-secondary: #171c20;
    --bg-card: #1c2428;
    --bg-elevated: #242e33;
    --bg-input: #192125;
    --text-primary: #e4ecef;
    --text-secondary: #bbc9cf;
    --text-muted: #a2b3bb;
    --text-heading: #f4fafc;
    --accent: #0a93ae;
    --accent-hover: #087b91;
    --accent-light: rgba(10, 147, 174, 0.14);
    --accent-glow: rgba(10, 147, 174, 0.32);
    --success: #60cfaa;
    --warning: #f1c974;
    --danger: #ef9090;
    --info: #67c9ee;
    --border: #34434b;
    --border-light: #2a383f;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 22px var(--accent-glow);
}
.site-header { background: rgba(18, 18, 18, 0.97); border-bottom: 1px solid var(--border-light); }
.site-title-text { font-weight: 800; color: var(--text-heading); }
.site-logo:hover .site-title-text { color: #6dd6e7; }
.site-nav-desktop a, .site-nav-more-toggle { color: var(--text-primary); }
.site-nav-desktop a:hover, .site-nav-desktop .current-menu-item a, .site-nav-mobile a:hover { background: var(--accent-light); color: #77ddea; }
.hero, .hero-lg { background: radial-gradient(ellipse at 50% 0%, rgba(10,147,174,0.12), transparent 70%), var(--bg-primary); }
.hero h1, .hero-lg h1 { line-height: 1.12; }
.hero .lead, .hero-lg .lead { color: var(--text-secondary); max-width: 740px; margin-inline: auto; }
.text-gradient { background: linear-gradient(120deg, #f0fbfd, #53ccdd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow-sm); }
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.bg-secondary .card { background: var(--bg-primary); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #04171c; font-weight: 800; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #ffffff; }
.btn-outline { color: #77ddea; border-color: var(--accent); }
.btn-outline:hover { color: #04171c; background: #70d7e7; border-color: #70d7e7; }
.btn-secondary { color: var(--text-heading); background: var(--bg-elevated); border-color: var(--border); }
.text-accent, .link-underline { color: #77ddea; }
.link-underline:hover { color: #b0f0f7; }
.link-underline::after { background: #77ddea; }
.badge { background: var(--accent-light); color: #77ddea; }
table { width: 100%; border-collapse: collapse; background: var(--bg-card); }
table { table-layout: fixed; }
table th { background: var(--accent-light); color: var(--text-heading); text-align: start; }
table th, table td { border-bottom: 1px solid var(--border-light); vertical-align: top; overflow-wrap: anywhere; }
.list-check li::before { color: #77ddea; }
.fade-in { opacity: 1; transform: none; }
a:focus-visible { outline: 3px solid #77ddea; outline-offset: 4px; }
button.btn { cursor: pointer; font: inherit; font-weight: 800; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #77ddea; outline-offset: 3px; }
.card { min-width: 0; }
.card .link-underline { overflow-wrap: anywhere; }
.btn { max-width: 100%; white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .fade-in, .card, .btn, .link-underline::after { transition: none; } .btn:hover { transform: none; } }
@media (max-width: 768px) { .hero-lg h1 { font-size: 2rem; } table th, table td { padding: 12px 10px; font-size: 0.88rem; } }