:root {
    --flasher-bg: #070a08;
    --flasher-surface: #101512;
    --flasher-surface-light: #151c17;
    --flasher-border: #263329;
    --flasher-green: #37b24d;
    --flasher-text-muted: #92a097;
}

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

body {
    margin: 0;
    background: var(--flasher-bg);
    color: #fff;
}

.flasher-header {
    background: linear-gradient(115deg, #0c4818 0%, #092d11 35%, #090d0a 100%);
    border-top: 1px solid #1d7a2c;
    border-bottom: 1px solid #18321e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.header-content,
.flasher-main {
    width: min(1480px, 100%);
    margin-inline: auto;
}

.brand-kicker {
    color: #9ddba8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.account-label {
    color: #b6c2b9;
}

.flasher-muted {
    color: var(--flasher-text-muted);
}

.flasher-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.flasher-surface-card {
    background: linear-gradient(145deg, var(--flasher-surface-light), var(--flasher-surface));
    border: 1px solid var(--flasher-border);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
}

.flasher-control {
    min-height: 48px;
    background-color: #0a0f0c;
    color: #fff;
    border-color: #334638;
}

.flasher-control:focus {
    background-color: #0a0f0c;
    color: #fff;
    border-color: var(--flasher-green);
    box-shadow: 0 0 0 0.2rem rgba(55, 178, 77, 0.14);
}

.flasher-control::placeholder {
    color: #667169;
}

@media (max-width: 575.98px) {
    .flasher-header-actions {
        width: 100%;
    }

    .flasher-header-actions form {
        flex: 1 1 auto;
    }

    .flasher-header-actions .btn {
        width: 100%;
    }
}