/* Shared Styles - Base, Background, Navigation & Footer */


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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 15, 18, 0.3) transparent;
}

/* Global Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(165, 15, 18, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 15, 18, 0.5);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 15, 18, 0.3) transparent;
}

html, body {
    overflow-x: hidden;
}

/* Prevent any element from exceeding viewport width */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

input, textarea, select, button {
    max-width: 100%;
}

/* Global Select/Dropdown Styling Fix - Prevents white backgrounds */
select,
.form-group select,
.input-group select,
.setting-group select,
.option-group select,
.preview-options select,
.preview-header select {
    background-color: rgba(21, 24, 29, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 30px !important;
    color-scheme: dark;
}

select option,
.form-group select option,
.input-group select option,
.preview-options select option,
.preview-header select option {
    background-color: #0e1013 !important;
    color: #ffffff !important;
    padding: 10px;
}

select option:hover,
select option:focus,
select option:checked,
select option:active {
    background-color: #a50f12 !important;
    background: linear-gradient(#a50f12, #a50f12) !important;
    color: #ffffff !important;
}

select:focus {
    outline: none;
    border-color: #a50f12 !important;
}

/* Fix for date/time inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ==================== GLOBAL INPUT STYLES ==================== */
/* Applies sensible dark-theme defaults to any page that uses bare inputs */
input[type="text"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="number"]:not([class]),
input[type="search"]:not([class]),
textarea:not([class]) {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    padding: 9px 13px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
    outline: none;
}

input[type="text"]:not([class]):focus,
input[type="email"]:not([class]):focus,
input[type="password"]:not([class]):focus,
input[type="number"]:not([class]):focus,
input[type="search"]:not([class]):focus,
textarea:not([class]):focus {
    border-color: rgba(165, 15, 18, 0.6);
    box-shadow: 0 0 0 3px rgba(165, 15, 18, 0.12);
}

pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

:root {
    /* Primary Colors */
    --primary-color: #a50f12;
    --primary: #a50f12;
    --primary-dark: #a50f12;
    --secondary-color: #a50f12;
    --secondary: #a50f12;
    --accent-color: #3f9e63;

    /* Background Colors */
    --bg-dark: #08090b;
    --dark-bg: #08090b;
    --bg-primary: #08090b;
    --bg-secondary: #0e1013;
    --background-color: #08090b;
    --surface-color: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.07);

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-light: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-muted: rgba(255, 255, 255, 0.4);

    /* Border */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.18);

    /* Input / surface background */
    --card-bg: rgba(255, 255, 255, 0.04);

    /* Status Colors */
    --success: #3f9e63;
    --error: #d10a10;
    --warning: #b98b2e;
    --info: #d10a10;
    --danger: #d10a10;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #08090b;
    color: #ffffff;
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
}

/* Global width constraints to prevent overflow */
main,
.main-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* body is display:flex site-wide, which makes every direct child a flex
   item. Flex items default to min-width:auto, meaning they refuse to
   shrink below their own content's intrinsic width — so a page whose
   top-level wrapper doesn't go through .main-container (which already
   escapes this via its own max-width:100vw) can silently balloon past
   the viewport on narrow screens (found on radio.html, developer.html,
   random-picker.html, cleanme-browse.html — this covers those and any
   future page with the same structure). max-width:100% above doesn't fix
   this on its own: it caps growth, but doesn't override the flex minimum
   size floor that pushes the element wider than that cap in the first
   place. Harmless on pages already using .main-container. */
body > * {
    min-width: 0;
}

/* Ensure grids don't overflow on mobile */
@media (max-width: 480px) {
    [class*="-grid"],
    [class*="_grid"] {
        gap: 0.75rem !important;
    }
}

/* Cosmic Background Effect */
/* The cosmic gradient that used to sit here is gone. Nothing replaces it:
   a fixed full-viewport sheet at z-index 0, under content at z-index 2, is
   a layer between the background and the page for no benefit. The body's
   own background colour is the background. */

/* The nebula that used to live here is gone, and so is the vignette that
   briefly replaced it: at 200% of the viewport it read as a flat grey sheet
   between the background and the page. The homepage draws its own vignette
   with .atmos; nothing else needs one. */

/* body > * { position: relative; z-index: 2 } removed with the layers it
   existed to sit above — it was forcing a stacking context on every
   top-level element, which is what made z-index fights so hard to reason
   about on these pages. */

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

@keyframes rotateNebula {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Link Colors */
a {
    color: #ffffff;
    text-decoration: none;
}

a:visited {
    color: #ffffff;
}

a:hover {
    color: var(--primary-color);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Main Container - for pages using Jinja includes */
.main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==================== BETA BANNER ==================== */
.beta-banner {
    background: linear-gradient(90deg, #3a3f8f, #7a0b0e);
    color: #ffffff;
    padding: 0.5rem 1rem;
    position: relative;
    z-index: 1001;
}

.beta-banner-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.beta-banner .beta-icon {
    flex-shrink: 0;
    color: #c7d0ff;
}

.beta-banner p {
    margin: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.beta-banner strong {
    color: #ffffff;
}

.beta-banner a {
    color: #c7d0ff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.beta-banner a:hover {
    color: #ffffff;
}

.beta-banner-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.beta-banner-close:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .beta-banner {
        padding: 0.6rem 2.5rem 0.6rem 1rem;
        position: relative;
    }

    .beta-banner-content {
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .beta-banner p {
        font-size: 0.75rem;
        white-space: normal;
        line-height: 1.4;
    }

    .beta-banner .beta-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .beta-banner-close {
        position: absolute;
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        margin-left: 0;
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .beta-banner p {
        font-size: 0.7rem;
    }

    .beta-banner .beta-icon {
        display: none;
    }
}

/* ==================== NAVIGATION HEADER ==================== */
.site-header {
    padding: 12px 0;
    background: rgba(8, 9, 11, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
}

/* Mobile menu button positioning */
.header-container .mobile-menu-btn,
.header-top .mobile-menu-btn {
    position: absolute;
    right: 30px;
}

.site-header .logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0;
}

.site-header .logo .logo-text {
    display: flex;
    align-items: center;
}

.site-header .logo .cub {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    text-shadow:
        0 0 12px rgba(194, 58, 61, 0.95),
        0 0 32px rgba(165, 15, 18, 0.60),
        0 0 60px rgba(165, 15, 18, 0.25);
}

.site-header .logo .software {
    font-weight: 700;
    color: rgba(199, 208, 255, 0.92);
    text-shadow:
        0 0 10px rgba(165, 15, 18, 0.50),
        0 0 24px rgba(165, 15, 18, 0.20);
}

.site-header .logo:hover .cub {
    text-shadow:
        0 0 16px rgba(160, 170, 255, 1.0),
        0 0 40px rgba(165, 15, 18, 0.80),
        0 0 80px rgba(165, 15, 18, 0.35);
}

.site-header .logo:hover .software {
    color: rgba(220, 228, 255, 1.0);
    text-shadow:
        0 0 14px rgba(165, 15, 18, 0.70),
        0 0 32px rgba(165, 15, 18, 0.30);
}

.site-header .logo {
    transition: filter 0.2s ease;
}

/* Brand Group (CUBSOFTWARE / SubBrand) */
.brand-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2rem;
    font-weight: 300;
}

.sub-brand {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sub-brand:hover {
    opacity: 0.8;
    color: var(--primary-color);
}

.site-nav {
    display: flex;
    gap: 5px;
    align-items: center;
}

.site-nav a,
.site-nav .nav-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav .nav-link:hover {
    color: #ffffff;
}

.site-nav a.active,
.site-nav .nav-link.active {
    color: var(--primary-color);
}

.nav-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Dropdown Navigation */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-dropdown .dropdown-toggle:hover {
    color: #ffffff;
}

.nav-dropdown .dropdown-toggle svg {
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-toggle svg,
.nav-dropdown.open .dropdown-toggle svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: rgba(21, 24, 29, 0.98);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.dropdown-menu a:hover {
    background: rgba(165, 15, 18, 0.15);
    color: #ffffff;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    gap: 5px;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ==================== NAV AUTH WIDGET ====================
   Lives inline inside .site-nav (after a .nav-divider), styled as a plain
   nav-link like every other nav item — matches the CUB Studio subdomain nav. */
.nav-auth {
    display: flex;
    align-items: center;
}

.nav-login-btn {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-login-btn:hover {
    color: #ffffff;
}

/* Account dropdown trigger — plain nav-link, just like Home/Tools/etc. */
.nav-auth .nav-link.dropdown-toggle {
    white-space: nowrap;
}

.nav-auth .dropdown-menu {
    border-radius: 12px;
    border-color: rgba(165, 15, 18, 0.25);
}

.nav-auth .dropdown-menu a:hover {
    background: rgba(165, 15, 18, 0.15);
    color: #e9d5ff;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 5px 10px 5px 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
    color: var(--text-light, #fff);
}

.nav-user-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}

.nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-avatar-main {
    margin-right: -6px;
    position: relative;
    z-index: 1;
}

.nav-provider-icons {
    display: flex;
    align-items: center;
    position: relative;
}

.nav-provider-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nav-provider-badge svg {
    width: 10px;
    height: 10px;
}

.nav-badge-discord {
    background: #a50f12;
    margin-left: 2px;
}

.nav-badge-twitch {
    background: #9146ff;
    margin-left: 2px;
}

.nav-badge-linked {
    background: rgba(255,255,255,0.15);
    margin-left: 3px;
}

.nav-badge-linked svg {
    width: 9px;
    height: 9px;
    stroke: rgba(255,255,255,0.7);
}

.nav-username {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-light, #fff);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-username-sep {
    color: rgba(255,255,255,0.35);
    margin: 0 2px;
}

.nav-chevron {
    opacity: 0.5;
    transition: transform 0.2s;
}

.nav-user-widget.open .nav-chevron {
    transform: rotate(180deg);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
    min-width: 170px;
}

.nav-user-widget .dropdown-menu {
    display: none;
}

.nav-user-widget.open .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color, rgba(255,255,255,0.08));
    margin: 4px 0;
}

.dropdown-section-label {
    display: block;
    padding: 4px 14px 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.35));
    pointer-events: none;
}

.dropdown-danger {
    color: #c23a3d !important;
}

.dropdown-danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

/* ==================== GLOBAL BUTTON SYSTEM ==================== */

/* Base button reset — all <button> tags get reasonable defaults */
button {
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Primary button — gradient purple/indigo */
.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
    background: linear-gradient(135deg, #a50f12 0%, #a50f12 100%);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(165, 15, 18, 0.3);
    white-space: nowrap;
}

.btn:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(165, 15, 18, 0.45);
    color: #ffffff;
}

.btn:active,
.btn-primary:active {
    transform: translateY(0);
}

/* Secondary / outline button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Danger button */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    background: rgba(239, 68, 68, 0.12);
    color: #c23a3d;
    border: 1px solid rgba(239, 68, 68, 0.3);
    white-space: nowrap;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    transform: translateY(-1px);
}

/* Success button */
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #3f9e63 0%, #2f7a4b 100%);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
    white-space: nowrap;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
    color: #ffffff;
}

/* Small size modifier */
.btn-sm,
.btn.btn-sm,
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-danger.btn-sm {
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* Large size modifier */
.btn-lg,
.btn.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: 12px;
}

/* Full-width modifier */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* Disabled state */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

/* ==================== FOOTER ==================== */
.footer {
    margin-top: auto;
    border-top: 1px solid rgba(165, 15, 18, 0.22);
    padding: 2.5rem 2rem;
    text-align: center;
    background: rgba(8, 9, 11, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(165, 15, 18, 0.12);
}

.footer-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Legacy wrapper - keep for pages still using old markup */
.footer-content {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-text {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.footer-link {
    color: #a50f12;
    font-weight: 600;
    text-decoration: none;
}

.footer-link:hover {
    color: #7c8af2;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Legacy link styles - keep for any remaining old markup */
.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal-link {
    color: rgba(255, 255, 255, 0.52) !important;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}

.footer-legal-link:hover {
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-separator {
    display: none;
}

/* ==================== COOKIE CONSENT ==================== */

/* --- Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: rgba(8, 9, 11, 0.97);
    border-top: 1px solid rgba(165, 15, 18, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 1.25rem 2rem;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner-text { flex: 1; min-width: 200px; }
.cookie-banner-text p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin: 0 0 0.25rem 0;
}
.cookie-banner-text p:last-child { margin-bottom: 0; }
.cookie-banner-text a { color: #d10a10; text-decoration: none; }
.cookie-banner-text a:hover { text-decoration: underline; }
.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Shared button base --- */
.cookie-btn-accept,
.cookie-btn-manage,
.cookie-btn-decline {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.cookie-btn-accept {
    background: linear-gradient(135deg, #a50f12, #a50f12);
    border: none;
    color: #fff;
}
.cookie-btn-accept:hover { opacity: 0.9; transform: translateY(-1px); }
.cookie-btn-manage {
    background: transparent;
    border: 1px solid rgba(165, 15, 18, 0.5);
    color: rgba(194, 58, 61, 0.9);
}
.cookie-btn-manage:hover { border-color: #a50f12; color: #fff; }
.cookie-btn-decline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}
.cookie-btn-decline:hover { border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.75); }

/* --- Declined notice bar --- */
.cookie-declined-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8900;
    background: rgba(8, 9, 11, 0.97);
    border-top: 1px solid rgba(245, 158, 11, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.6rem 2rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-declined-bar.visible { transform: translateY(0); }
.cookie-declined-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cookie-declined-bar-text {
    font-size: 0.82rem;
    color: rgba(245, 158, 11, 0.85);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cookie-declined-bar-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cookie-declined-bar-actions button {
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cookie-declined-bar-actions .btn-reaccept {
    background: linear-gradient(135deg, #a50f12, #a50f12);
    border: none;
    color: #fff;
}
.cookie-declined-bar-actions .btn-reaccept:hover { opacity: 0.85; }
.cookie-declined-bar-actions .btn-manage-small {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
}
.cookie-declined-bar-actions .btn-manage-small:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); }
.cookie-declined-bar-actions .btn-dismiss-bar {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
.cookie-declined-bar-actions .btn-dismiss-bar:hover { color: rgba(255, 255, 255, 0.7); }

/* --- Floating settings button --- */
.cookie-float-btn {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 8800;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(14, 16, 19, 0.92);
    border: 1px solid rgba(165, 15, 18, 0.35);
    color: rgba(194, 58, 61, 0.8);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cookie-float-btn.visible { display: flex; }
.cookie-float-btn:hover {
    border-color: #a50f12;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(165, 15, 18, 0.35);
}
.cookie-float-btn { font-size: 1.25rem; line-height: 1; }

/* --- Modal overlay --- */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.cookie-modal-overlay.visible { opacity: 1; pointer-events: all; }

/* --- Modal card --- */
.cookie-modal {
    background: rgba(14, 16, 19, 0.98);
    border: 1px solid rgba(165, 15, 18, 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    transform: translateY(16px);
    transition: transform 0.25s;
}
.cookie-modal-overlay.visible .cookie-modal { transform: translateY(0); }
.cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cookie-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}
.cookie-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}
.cookie-modal-close:hover { color: rgba(255,255,255,0.85); }
.cookie-modal-body { padding: 1.25rem 1.5rem; }
.cookie-modal-desc {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* --- Toggle rows --- */
.cookie-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cookie-toggle-row:last-child { border-bottom: none; }
.cookie-toggle-info { flex: 1; }
.cookie-toggle-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    margin-bottom: 0.2rem;
}
.cookie-toggle-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}
.cookie-always-on {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3f9e63;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Toggle switch */
.cookie-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-switch-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.25s;
}
.cookie-switch-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    transition: transform 0.25s, background 0.25s;
}
.cookie-switch input:checked + .cookie-switch-slider { background: #a50f12; }
.cookie-switch input:checked + .cookie-switch-slider::before { transform: translateX(20px); background: #fff; }

/* Modal footer */
.cookie-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .cookie-banner { padding: 1rem 1.25rem; }
    .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .cookie-banner-actions { width: 100%; flex-wrap: wrap; }
    .cookie-btn-accept, .cookie-btn-manage, .cookie-btn-decline { flex: 1; text-align: center; justify-content: center; }
    .cookie-modal-footer { flex-direction: column-reverse; }
    .cookie-float-btn { bottom: 4rem; }
}

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
    .site-header {
        padding: 0;
    }

    /* 2-column grid: logo | hamburger — nav (incl. account) lives in the collapsible panel */
    .header-container {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        max-width: 100%;
    }

    .header-top {
        flex-wrap: wrap;
    }

    .site-header .logo {
        font-size: 1.3rem;
    }

    /* Hamburger: in-flow in the grid (no longer absolute) */
    .header-container .mobile-menu-btn,
    .header-top .mobile-menu-btn {
        position: static;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Mobile nav: full-width panel below the header */
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(14, 16, 19, 0.98);
        border-top: 1px solid var(--border-color);
        padding: 15px;
        gap: 5px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        z-index: 999;
    }

    .site-nav.active {
        display: flex;
    }

    .site-nav a,
    .site-nav .nav-link {
        font-size: 0.95rem;
        padding: 12px 16px;
        border-radius: 8px;
        text-align: center;
    }

    .site-nav a:hover,
    .site-nav .nav-link:hover {
        background: rgba(165, 15, 18, 0.15);
    }

    .nav-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
    }

    /* Mobile nav: accordion-style dropdowns (scoped to .site-nav only) */
    .site-nav .nav-dropdown {
        width: 100%;
        text-align: center;
    }

    .site-nav .nav-dropdown .dropdown-toggle {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
        padding: 12px 16px;
        text-align: center;
    }

    .site-nav .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none;
        background: rgba(30, 34, 40, 0.5);
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .site-nav .nav-dropdown.active .dropdown-menu,
    .site-nav .nav-dropdown.open .dropdown-menu {
        visibility: visible;
        max-height: 1000px;
        overflow-y: auto;
        padding: 8px 0;
    }

    .site-nav .nav-dropdown:hover .dropdown-menu {
        visibility: hidden;
        max-height: 0;
        padding: 0;
    }

    .site-nav .nav-dropdown.active:hover .dropdown-menu,
    .site-nav .nav-dropdown.open:hover .dropdown-menu {
        visibility: visible;
        max-height: 1000px;
        overflow-y: auto;
        padding: 8px 0;
    }

    .site-nav .dropdown-menu a {
        padding: 10px 24px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .site-header .logo {
        font-size: 1.1rem;
    }

    .site-nav a,
    .site-nav .nav-link {
        font-size: 0.9rem;
        padding: 10px 14px;
    }

    .footer-separator {
        margin: 0 5px;
    }
}

/* ==================== GLOBAL TABLET & MOBILE FIXES ==================== */

/* Tablet (≤900px) */
@media (max-width: 900px) {
    .main-container, .container, .page-container, .content-wrapper {
        padding: 1.25rem;
    }

    /* Header inside a padded container should still be full-width */
    .main-container > .site-header {
        margin-top: -1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        width: calc(100% + 2.5rem);
    }

    /* Common grid patterns → 2 columns */
    .tools-grid, .apps-grid, .features-grid, .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Section headings */
    h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); }
    h2 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
    h3 { font-size: clamp(1rem, 2.5vw, 1.4rem); }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    /* Prevent horizontal overflow on any page */
    body { overflow-x: hidden; }

    .main-container, .container, .page-container,
    .content-wrapper, .tool-container, .page-content {
        padding: 1rem;
        max-width: 100%;
    }

    /* Header inside a padded container should still be full-width */
    .main-container > .site-header {
        margin-top: -1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }

    /* All grids → single column */
    .tools-grid, .apps-grid, .features-grid, .cards-grid,
    .grid-2, .grid-3, .grid-4, .two-col, .three-col {
        grid-template-columns: 1fr !important;
    }

    /* Flex rows → stack */
    .flex-row, .row, .form-row, .button-row, .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* Full-width buttons and inputs */
    .btn, .button, button.primary, button.secondary,
    input[type="submit"], input[type="button"] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* Cards */
    .card, .tool-card, .feature-card, .info-card {
        width: 100%;
        box-sizing: border-box;
    }

    /* Tables → horizontal scroll */
    table { display: block; overflow-x: auto; width: 100%; }

    /* Hero/banner sections */
    .hero, .hero-section, .page-hero, .banner {
        padding: 2rem 1rem;
        text-align: center;
    }

    /* Section headings */
    h1 { font-size: clamp(1.3rem, 5vw, 2rem); }
    h2 { font-size: clamp(1.1rem, 4vw, 1.6rem); }
    h3 { font-size: clamp(1rem, 3.5vw, 1.3rem); }

    /* Form elements full width */
    .form-group, .input-group {
        width: 100%;
    }
    .form-group input, .form-group select,
    .form-group textarea, .input-group input {
        width: 100%;
        box-sizing: border-box;
    }

    /* Sidebar layouts → stack */
    .sidebar-layout, .two-panel, .split-layout {
        flex-direction: column;
    }
    .sidebar, .side-panel, .left-panel, .right-panel {
        width: 100% !important;
        max-width: 100%;
    }

    /* Modals full width */
    .modal-content, .dialog, .popup-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 1rem auto;
    }

    /* Tab bars → scrollable */
    .tabs, .tab-bar, .tab-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tab, .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Footer */
    .footer-content, .footer-links, .footer-grid {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    /* Mobile footer — hide non-essential links */
    .footer-mobile-hide {
        display: none;
    }

    .footer-links {
        gap: 1rem;
    }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
    .main-container, .container, .page-container,
    .content-wrapper, .tool-container, .page-content {
        padding: 0.75rem;
    }

    /* Header inside a padded container should still be full-width */
    .main-container > .site-header {
        margin-top: -0.75rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        width: calc(100% + 1.5rem);
    }

    h1 { font-size: clamp(1.2rem, 6vw, 1.6rem); }
    h2 { font-size: clamp(1rem, 5vw, 1.3rem); }

    .btn, .button, button.primary, button.secondary,
    input[type="submit"], input[type="button"] {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
}

/* ==================== LOGIN PAGE (inline styles) ==================== */
@media (max-width: 480px) {
    .login-card {
        padding: 2rem 1.25rem;
        border-radius: 16px;
    }

    .login-title {
        font-size: 1.35rem;
    }

    .login-btn {
        font-size: 0.93rem;
        padding: 0.85rem 1rem;
    }
}

/* ==================== ACCOUNT PAGE (inline styles) ==================== */
@media (max-width: 480px) {
    .account-card {
        padding: 1.5rem 1rem;
    }

    .account-linked-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-unlink {
        width: 100%;
        text-align: center;
    }

    .account-actions {
        flex-direction: column;
    }

    .btn-logout,
    .btn-link-discord,
    .btn-link-twitch {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== VANITY PROFILE PAGE (inline styles) ==================== */
@media (max-width: 768px) {
    .profile-wrap {
        padding: 1.5rem 1rem;
    }

    .profile-header {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.25rem;
    }

    .profile-cta {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .bots-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-cta .btn {
        width: 100%;
        display: block;
        text-align: center;
    }

    .bots-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM
   All reusable components — apply the same to every page of the site.
   ══════════════════════════════════════════════════════════════════════════════ */


/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
@keyframes pulse-warn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease both;
}


/* ==================== GLASS CARD ==================== */
/* Generic card used everywhere — the atomic building block */
.glass-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.glass-card:hover {
    border-color: rgba(165, 15, 18, 0.35);
    box-shadow: 0 8px 32px rgba(165, 15, 18, 0.12);
}

.glass-card-lift:hover {
    transform: translateY(-4px);
}


/* ==================== PAGE HEADER ==================== */
/* Used on content/info pages: privacy, terms, contact, roadmap, etc. */
.page-header {
    padding: 56px 24px 48px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-header-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a50f12;
    margin-bottom: 0.85rem;
}

.page-header-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    text-shadow: 0 0 20px rgba(194, 58, 61,0.88), 0 0 55px rgba(165, 15, 18,0.50), 0 0 110px rgba(165, 15, 18,0.22), 0 3px 8px rgba(0,0,0,0.70);
}

.page-header-description {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto;
}


/* ==================== TOOL PAGE LAYOUT ==================== */
/* Consistent layout for every /apps/* tool page */

.tool-page-hero {
    padding: 48px 24px 32px;
    text-align: center;
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tool-page-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(165, 15, 18, 0.15), rgba(165, 15, 18, 0.15));
    border: 1px solid rgba(165, 15, 18, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.6rem;
}

.tool-page-icon svg {
    width: 28px;
    height: 28px;
    color: #d10a10;
}

.tool-page-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    text-shadow: 0 0 18px rgba(194, 58, 61,0.88), 0 0 48px rgba(165, 15, 18,0.50), 0 0 90px rgba(165, 15, 18,0.22), 0 2px 6px rgba(0,0,0,0.65);
}

.tool-page-subtitle {
    color: rgba(255, 255, 255, 0.70);
    font-size: clamp(0.88rem, 2vw, 1rem);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
}

/* The main container wrapping the tool UI */
.tool-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    max-width: 980px;
    margin: 0 auto 3rem;
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tool-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Tab bar inside tool cards */
.tool-tab-bar {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.tool-tab {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tool-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
}

.tool-tab.active {
    background: linear-gradient(135deg, #a50f12, #a50f12);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(165, 15, 18, 0.35);
}

/* Two-column tool layout (editor + preview) */
.tool-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .tool-split { grid-template-columns: 1fr; }
    .tool-card { padding: 1.25rem; }
    .tool-page-hero { padding: 32px 16px 24px; }
}

@media (max-width: 480px) {
    .tool-card { padding: 1rem; border-radius: 16px; }
    .tool-tab { padding: 7px 13px; font-size: 0.8rem; }
}


/* ==================== CONTENT CONTAINER ==================== */
/* Prose layout for privacy, terms, roadmap, press, etc. */
.content-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 4rem;
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.content-container h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 2.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.content-container h3 {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 1.5rem 0 0.5rem;
}

.content-container p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.content-container ul,
.content-container ol {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    font-size: 0.95rem;
}

.content-container li {
    margin-bottom: 0.35rem;
}

.content-container a {
    color: #d10a10;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-container a:hover { color: #c23a3d; }

/* Summary highlight card at top of content pages */
.content-summary-card {
    background: rgba(165, 15, 18, 0.07);
    border: 1px solid rgba(165, 15, 18, 0.2);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
}

.content-summary-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 0;
}


/* ==================== BADGE SYSTEM ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge-green {
    background: rgba(34, 197, 94, 0.12);
    color: #3f9e63;
    border-color: rgba(34, 197, 94, 0.25);
}

.badge-red {
    background: rgba(239, 68, 68, 0.12);
    color: #c23a3d;
    border-color: rgba(239, 68, 68, 0.25);
}

.badge-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #b98b2e;
    border-color: rgba(245, 158, 11, 0.25);
}

.badge-blue {
    background: rgba(209, 10, 16, 0.12);
    color: #d10a10;
    border-color: rgba(209, 10, 16, 0.25);
}

.badge-purple {
    background: rgba(165, 15, 18, 0.12);
    color: #c23a3d;
    border-color: rgba(165, 15, 18, 0.25);
}

.badge-indigo {
    background: rgba(165, 15, 18, 0.12);
    color: #d10a10;
    border-color: rgba(165, 15, 18, 0.25);
}

.badge-grey {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}


/* ==================== STATUS DOT ==================== */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-online {
    background: #3f9e63;
    animation: pulse-online 2s ease-in-out infinite;
}

.status-dot-offline {
    background: #d10a10;
}

.status-dot-warn {
    background: #b98b2e;
    animation: pulse-warn 2s ease-in-out infinite;
}

.status-dot-unknown {
    background: rgba(255, 255, 255, 0.25);
}


/* ==================== FORM COMPONENTS ==================== */
/* Unified dark form styles — apply to any form across all pages */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

.form-input,
.form-textarea,
.form-select {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: rgba(165, 15, 18, 0.6);
    box-shadow: 0 0 0 3px rgba(165, 15, 18, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
}

.form-error {
    font-size: 0.78rem;
    color: #c23a3d;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Row of form fields side by side */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

/* Inline search input */
.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.search-input-wrap input {
    padding-left: 38px;
}


/* ==================== DATA TABLE ==================== */
/* Dark themed table used in dashboards, admin pages, history pages */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.data-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
}

.data-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr {
    transition: background 0.15s ease;
}

.data-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

/* Table wrapper for horizontal scroll on mobile */
.table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.table-wrap .data-table th:first-child { border-radius: 16px 0 0 0; }
.table-wrap .data-table th:last-child  { border-radius: 0 16px 0 0; }


/* ==================== METRIC CARD ==================== */
/* Stat/number cards in dashboards and overview pages */

.metric-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    border-color: rgba(165, 15, 18, 0.3);
    box-shadow: 0 6px 24px rgba(165, 15, 18, 0.1);
    transform: translateY(-2px);
}

.metric-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.metric-card-icon-indigo {
    background: rgba(165, 15, 18, 0.15);
    border: 1px solid rgba(165, 15, 18, 0.25);
    color: #d10a10;
}

.metric-card-icon-purple {
    background: rgba(165, 15, 18, 0.15);
    border: 1px solid rgba(165, 15, 18, 0.25);
    color: #c23a3d;
}

.metric-card-icon-green {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #3f9e63;
}

.metric-card-icon-amber {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #b98b2e;
}

.metric-card-icon-red {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #c23a3d;
}

.metric-card-number {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.metric-card-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.metric-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 480px) {
    .metric-cards-grid { grid-template-columns: 1fr 1fr; }
    .metric-card { padding: 1.1rem; }
    .metric-card-number { font-size: 1.4rem; }
}


/* ==================== EMPTY STATE ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    gap: 0.75rem;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-state-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.empty-state-description {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    max-width: 320px;
    line-height: 1.6;
}


/* ==================== SECTION UTILITIES ==================== */

.page-section {
    padding: 60px 24px;
    width: 100%;
}

.section-divider {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    border: none;
}

/* Eyebrow label + gradient title + description — consistent across all sections */
.section-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #a50f12;
    margin-bottom: 0.75rem;
}

.section-heading {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    text-shadow: 0 0 16px rgba(194, 58, 61,0.80), 0 0 40px rgba(165, 15, 18,0.42), 0 2px 6px rgba(0,0,0,0.60);
}

.section-subtext {
    text-align: center;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    max-width: 580px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .page-section { padding: 40px 16px; }
}

@media (max-width: 480px) {
    .page-section { padding: 32px 12px; }
}


/* ==================== FLOATING BUYMEACOFFEE BUTTON ==================== */
.bmac-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: rgba(8, 9, 11, 0.85);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    animation: fadeIn 0.5s ease 3s both;
}

.bmac-float:hover {
    border-color: rgba(255, 193, 7, 0.6);
    box-shadow: 0 6px 24px rgba(255, 193, 7, 0.15);
    color: #ffffff;
    transform: translateY(-2px);
    background: rgba(21, 24, 29, 0.9);
}

.bmac-float-emoji {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .bmac-float {
        bottom: 1rem;
        right: 1rem;
        padding: 9px 13px;
    }
    .bmac-float-label {
        display: none;
    }
}


/* ==================== AUTH / LOGIN CARD LAYOUT ==================== */
/* Centered glass card for login, auth, error pages */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: rgba(8, 9, 11, 0.7);
    border: 1px solid rgba(165, 15, 18, 0.25);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 60px rgba(165, 15, 18, 0.12), 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    text-align: center;
}

.auth-card-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    text-shadow: 0 0 14px rgba(194, 58, 61,0.85), 0 0 36px rgba(165, 15, 18,0.45), 0 2px 5px rgba(0,0,0,0.60);
}

.auth-card-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.auth-badge-admin {
    background: rgba(239, 68, 68, 0.15);
    color: #c23a3d;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.auth-badge-affiliate {
    background: rgba(245, 158, 11, 0.15);
    color: #b98b2e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 2rem 1.25rem;
        border-radius: 18px;
    }
}


/* ==================== PROGRESS BAR ==================== */
.progress-bar-wrap {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a50f12, #a50f12);
    transition: width 0.3s ease;
}

.progress-bar-fill-green {
    background: linear-gradient(90deg, #3f9e63, #2f7a4b);
}

.progress-bar-fill-amber {
    background: linear-gradient(90deg, #b98b2e, #d97706);
}


/* ==================== COPY BUTTON PATTERN ==================== */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.copy-btn:hover {
    background: rgba(165, 15, 18, 0.12);
    border-color: rgba(165, 15, 18, 0.3);
    color: #ffffff;
}

.copy-btn.copied {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #3f9e63;
}


/* ==================== CODE BLOCK ==================== */
.code-block {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow-x: auto;
    line-height: 1.65;
    position: relative;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.code-block-lang {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Poppins', sans-serif;
}


/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL PAGE HEADER HARMONIZATION
   Targets the page-specific header divs used by every tool/content page so
   they all share the same Orbitron gradient heading + muted description style
   without needing HTML changes on each page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* All tool page headers — the h1 inside any *-header div */
.formatter-header h1, .audio-header h1, .pdf-header h1, .picker-header h1,
.audio-container .audio-header h1, .text-container h1, .code-header h1,
.encoder-header h1, .diff-header h1, .regex-header h1, .webhook-header h1,
.embed-header h1, .timestamp-header h1, .perm-header h1, .timer-header h1,
.qr-header h1, .url-header h1, .password-header h1, .word-header h1,
.image-header h1, .video-header h1, .file-header h1, .resume-header h1,
.invoice-header h1, .calc-header h1, .currency-header h1, .unit-header h1,
.clock-header h1, .countdown-header h1, .picker-header h1,
.sticky-header h1, .random-header h1, .wheel-header h1, .md-header h1,
.note-header h1, .diff-checker-header h1, .json-formatter-header h1,
.rm-hero h1, .cleanme-hero h1, .cubreactive-hero h1,
.cleanme-header h1, .page-title h1,
/* catch-all: any direct h1 inside a *-header class */
[class$="-header"] > h1, [class*="-header "] h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 0 18px rgba(194, 58, 61,0.88), 0 0 48px rgba(165, 15, 18,0.50), 0 0 90px rgba(165, 15, 18,0.22), 0 2px 6px rgba(0,0,0,0.65) !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
}

/* Descriptions / subtitles inside page headers */
.formatter-header p, .audio-header p, .pdf-header p, .picker-header p,
.text-container > p, .code-header p, .encoder-header p, .diff-header p,
.regex-header p, .webhook-header p, .embed-header p, .timestamp-header p,
.perm-header p, .timer-header p, .qr-header p, .url-header p,
.password-header p, .word-header p, .image-header p, .video-header p,
.file-header p, .resume-header p, .invoice-header p, .calc-header p,
.currency-header p, .unit-header p, .clock-header p, .countdown-header p,
.sticky-header p, .random-header p, .wheel-header p, .md-header p,
.note-header p, .rm-hero > p, .cleanme-hero > p, .cubreactive-hero > p,
[class$="-header"] > p {
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: clamp(0.88rem, 2vw, 1rem) !important;
    line-height: 1.7 !important;
    text-align: center !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}

/* Consistent padding on all page header sections */
.formatter-header, .audio-header, .pdf-header, .picker-header,
.code-header, .encoder-header, .diff-header, .regex-header,
.webhook-header, .embed-header, .timestamp-header, .perm-header,
.timer-header, .qr-header, .url-header, .password-header,
.word-header, .image-header, .video-header, .file-header,
.resume-header, .invoice-header, .calc-header, .currency-header,
.unit-header, .clock-header, .countdown-header, .sticky-header,
.random-header, .wheel-header, .md-header, .note-header,
.rm-hero, .cleanme-hero, .cubreactive-hero {
    padding: 48px 24px 32px !important;
    text-align: center !important;
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Main tool containers — glass card treatment */
.formatter-container, .audio-container, .pdf-container, .picker-container,
.text-container, .encoder-container, .diff-container, .regex-container,
.webhook-container, .embed-container, .timestamp-container, .perm-container,
.timer-container, .qr-container, .url-container, .password-container,
.word-container, .video-container, .file-container, .resume-container,
.invoice-container, .calc-container, .currency-container, .unit-container,
.clock-container, .countdown-container, .sticky-container, .random-container,
.wheel-container, .md-container, .note-container, .json-container {
    animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

/* ==================== ACCOUNT MENU (grouped) ====================
   nav_auth.html groups its links; on the older header they sit in two
   columns on desktop and one inside the mobile accordion. */
.nav-auth .acct-avatar {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    margin-right: 6px; flex: 0 0 auto;
}
.nav-auth .acct-avatar-letter {
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,0.08); color: #fff; font-size: 0.7rem;
}
.nav-auth .dropdown-menu.acct-menu {
    width: min(30rem, calc(100vw - 2rem));
    padding: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}
.nav-auth .acct-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.nav-auth .acct-who { min-width: 0; }
.nav-auth .acct-who strong {
    display: block; color: #fff; font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-auth .acct-provider { display: block; font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.45)); }
.nav-auth .dropdown-menu .acct-head a.acct-primary {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 6px;
    border: 1px solid rgba(165, 15, 18, 0.45); color: #fff;
}
.nav-auth .acct-grid { columns: 2; column-gap: 0; padding: 6px 0; }
.nav-auth .acct-group { break-inside: avoid; }
.nav-auth .acct-foot { border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); padding: 4px 0; }

@media (max-width: 768px) {
    .site-nav .dropdown-menu.acct-menu { width: auto; max-height: 0; }
    .site-nav .nav-dropdown.open .dropdown-menu.acct-menu,
    .site-nav .nav-dropdown.active .dropdown-menu.acct-menu { max-height: 2000px; }
    .site-nav .acct-grid { columns: 1; }
    .site-nav .acct-head { flex-direction: column; text-align: center; }
    .site-nav .dropdown-menu a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ==================== PHONES: NOTHING WIDER THAN THE PAGE ====================
   .main-container is a column flexbox that hides horizontal overflow. A child
   with `max-width: 800px; margin: 0 auto` stops stretching and sizes to its
   content — up to its max-width — so on a phone it came out 800px wide and was
   silently clipped on both sides: calculator, colour picker, password generator
   and a dozen other tools lost their right-hand controls. Nothing flagged it,
   because hidden overflow never makes the page scroll. Capping the direct
   children at the container's width puts them back inside the screen. The old
   header keeps its deliberate full-bleed width. */
@media (max-width: 768px) {
    .main-container > *:not(.site-header) {
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }
    /* A long URL or id in running text breaks instead of pushing past the edge. */
    p, li, dd, dt, td, th, blockquote, figcaption, label, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@media (max-width: 768px) {
    body:not([data-cub-native]) .cookie-float-btn.visible { display: none; }
}

/* The cookie banner and declined bar, compacted for phones. cub-theme.css
   carries the same rules for themed pages; hosts that only load this file
   (radio, monitor) showed the banner over a third of the screen with
   25–31px buttons. */
@media (max-width: 600px) {
    .cookie-banner {
        padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    }
    .cookie-banner-inner { gap: .55rem; }
    .cookie-banner-text { min-width: 0; }
    .cookie-banner-text p { font-size: .76rem; line-height: 1.45; }
    .cookie-banner-actions {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem; width: 100%;
    }
    .cookie-banner-actions > * {
        min-height: 44px; padding: .35rem .3rem;
        font-size: .72rem; line-height: 1.2;
        white-space: normal;
    }
    .cookie-declined-bar {
        padding: .45rem .85rem calc(.45rem + env(safe-area-inset-bottom, 0px));
    }
    .cookie-declined-bar-actions button { min-height: 44px; }
    .cookie-declined-bar-actions .btn-dismiss-bar { min-width: 44px; }
    .cookie-modal-close { min-width: 40px; min-height: 40px; }
}