/* ==========================================================================
   Redirstats.com - Custom Stylesheet (Tabler Dark Theme Companion)
   Complements Tabler UI - only overrides where needed
   ========================================================================== */

/* --------------------------------------------------------------------------
   Table of Contents
   --------------------------------------------------------------------------
   1.  Tabler CSS Variable Overrides
   2.  Custom Properties (app-specific)
   3.  Custom Scrollbar
   4.  Landing Page - Hero Section
   5.  Landing Page - Feature Cards & Sections
   6.  Auth Pages (Glass-morphism)
   7.  Dashboard Enhancements (Sidebar, Stat Cards)
   8.  Redirect URL Display & Copy Button
   9.  Blog Enhancements
   10. DNS Instructions Box
   11. Language Rules Form
   12. Status Dot Animations
   13. Loading Spinner
   14. 404 Page
   15. Scroll Reveal Animations
   16. Utility Classes
   17. Responsive Overrides
   18. Print Styles
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Tabler CSS Variable Overrides
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    --tblr-primary: #6c5ce7;
    --tblr-primary-rgb: 108, 92, 231;
    --tblr-link-color: #a29bfe;
    --tblr-link-color-rgb: 162, 155, 254;
    --tblr-link-hover-color: #00cec9;
    --tblr-link-hover-color-rgb: 0, 206, 201;
    --tblr-code-color: #fd79a8;
    --tblr-border-color: rgba(255, 255, 255, 0.08);
    --tblr-border-color-translucent: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   2. Custom Properties (app-specific tokens)
   ========================================================================== */

:root {
    /* Brand accent palette */
    --rs-primary: #6c5ce7;
    --rs-primary-light: #a29bfe;
    --rs-teal: #00cec9;
    --rs-pink: #fd79a8;

    /* Gradients */
    --rs-gradient-primary: linear-gradient(135deg, #6c5ce7, #a29bfe);
    --rs-gradient-teal: linear-gradient(135deg, #00cec9, #81ecec);
    --rs-gradient-pink: linear-gradient(135deg, #fd79a8, #fab1c4);
    --rs-gradient-hero: linear-gradient(135deg, #1a0a2e 0%, #0a1628 50%, #0d1b2a 100%);

    /* Shadows (supplement Tabler's) */
    --rs-glow-primary: 0 0 20px rgba(108, 92, 231, 0.3);
    --rs-glow-teal: 0 0 20px rgba(0, 206, 201, 0.3);

    /* Transitions */
    --rs-transition: 0.3s ease;
}

/* ==========================================================================
   3. Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rs-primary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ==========================================================================
   4. Landing Page - Hero Section
   ========================================================================== */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--rs-gradient-hero);
    padding: 6rem 1.5rem 4rem;
}

/* Animated gradient overlay */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(108, 92, 231, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0, 206, 201, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(253, 121, 168, 0.06) 0%, transparent 50%);
    animation: heroShift 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes heroShift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(2%, -1%) scale(1.02); }
    66% { transform: translate(-1%, 1%) scale(0.98); }
}

/* Floating background shapes */
.hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.05;
    animation: shapeFloat 15s ease-in-out infinite;
}

.hero-shape:nth-child(1) {
    width: 400px;
    height: 400px;
    background: var(--rs-primary);
    top: 10%;
    left: -5%;
}

.hero-shape:nth-child(2) {
    width: 300px;
    height: 300px;
    background: var(--rs-teal);
    top: 60%;
    right: -5%;
    animation-delay: -5s;
}

.hero-shape:nth-child(3) {
    width: 200px;
    height: 200px;
    background: var(--rs-pink);
    bottom: 10%;
    left: 30%;
    animation-delay: -10s;
}

@keyframes shapeFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.15;
}

.hero-content p {
    font-size: 1.25rem;
    opacity: 0.7;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   5. Landing Page - Feature Cards & Sections
   ========================================================================== */

.feature-card {
    padding: 2rem;
    text-align: center;
    transition: transform var(--rs-transition), box-shadow var(--rs-transition);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.feature-card .feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: #fff;
}

.feature-icon.icon-primary { background: var(--rs-gradient-primary); }
.feature-icon.icon-teal { background: var(--rs-gradient-teal); }
.feature-icon.icon-pink { background: var(--rs-gradient-pink); }

/* Stats counter on landing page */
.stats-counter {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

/* Testimonial cards */
.testimonial-card {
    position: relative;
    padding-top: 2.5rem;
}

.testimonial-card .quote-icon {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 2rem;
    opacity: 0.1;
    color: var(--rs-primary);
}

/* Section spacing & headings */
.section-padding {
    padding: 5rem 0;
}

.section-heading {
    text-align: center;
    margin-bottom: 3rem;
}

.divider {
    width: 60px;
    height: 3px;
    background: var(--rs-gradient-primary);
    border-radius: 2px;
    margin: 1rem auto;
}

/* ==========================================================================
   6. Auth Pages (Glass-morphism)
   ========================================================================== */

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

.auth-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(108, 92, 231, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: rgba(30, 41, 59, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.auth-card .auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-card .auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    font-size: 0.8rem;
    opacity: 0.5;
}

.auth-card .auth-divider::before,
.auth-card .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-card .auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ==========================================================================
   7. Dashboard Enhancements (Sidebar, Stat Cards)
   ========================================================================== */

/* Sidebar active item accent line */
.navbar-vertical .nav-link.active {
    position: relative;
}

.navbar-vertical .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    background: var(--rs-gradient-primary);
    border-radius: 0 2px 2px 0;
}

/* Stat cards with gradient top border */
.stats-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--rs-transition), box-shadow var(--rs-transition);
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stats-card.stats-primary::before { background: var(--rs-gradient-primary); }
.stats-card.stats-teal::before { background: var(--rs-gradient-teal); }
.stats-card.stats-pink::before { background: var(--rs-gradient-pink); }
.stats-card.stats-success::before { background: linear-gradient(135deg, #00b894, #55efc4); }

.stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.stats-card .stats-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.stats-card .stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.stats-card .stats-icon.icon-primary {
    background: rgba(108, 92, 231, 0.15);
    color: var(--rs-primary-light);
}

.stats-card .stats-icon.icon-teal {
    background: rgba(0, 206, 201, 0.15);
    color: var(--rs-teal);
}

.stats-card .stats-icon.icon-pink {
    background: rgba(253, 121, 168, 0.15);
    color: var(--rs-pink);
}

/* Page header in dashboard */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================================================
   8. Redirect URL Display & Copy Button
   ========================================================================== */

.redirect-url {
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--rs-teal);
    word-break: break-all;
}

.copy-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-copy {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all var(--rs-transition);
    cursor: pointer;
}

.btn-copy.copied {
    border-color: var(--tblr-success) !important;
    color: var(--tblr-success) !important;
    background: rgba(0, 184, 148, 0.1);
}

.copy-input-group {
    display: flex;
    align-items: stretch;
}

.copy-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.copy-input-group .btn-copy {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* API key display */
.api-key-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--rs-teal);
}

/* ==========================================================================
   9. Blog Enhancements
   ========================================================================== */

/* Featured image aspect ratio */
.blog-card .blog-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.blog-card .blog-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 201, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.5;
}

/* Card hover shadow lift */
.blog-card {
    transition: transform var(--rs-transition), box-shadow var(--rs-transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Single blog post */
.blog-post-content {
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1.05rem;
}

.blog-post-content blockquote {
    border-left: 3px solid var(--rs-primary);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    opacity: 0.8;
    font-style: italic;
}

/* ==========================================================================
   10. DNS Instructions Box
   ========================================================================== */

.dns-instructions {
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-left: 4px solid var(--rs-primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(108, 92, 231, 0.04);
}

.dns-instructions .dns-record {
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.dns-instructions .dns-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    font-weight: 600;
}

.dns-instructions .dns-field-value {
    color: var(--rs-teal);
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    word-break: break-all;
}

.dns-instructions .dns-note {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(253, 203, 110, 0.05);
    border: 1px solid rgba(253, 203, 110, 0.15);
    border-radius: 6px;
}

/* ==========================================================================
   11. Language Rules Form
   ========================================================================== */

.language-rule-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    animation: fadeIn 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.language-rule-row .form-select,
.language-rule-row .form-control {
    flex: 1;
}

.language-rule-row .btn-remove-rule {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    color: var(--tblr-danger);
    transition: all 0.2s ease;
    cursor: pointer;
}

.language-rule-row .btn-remove-rule:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: var(--tblr-danger);
}

.btn-add-rule {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-add-rule:hover {
    border-color: var(--rs-primary);
    color: var(--rs-primary-light);
    background: rgba(108, 92, 231, 0.05);
}

/* ==========================================================================
   12. Status Dot Animations
   ========================================================================== */

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background: var(--tblr-success);
    box-shadow: 0 0 6px rgba(0, 184, 148, 0.5);
}

.status-dot.pending {
    background: var(--tblr-warning);
    box-shadow: 0 0 6px rgba(253, 203, 110, 0.5);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.inactive {
    background: var(--tblr-danger);
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}

.status-dot.verifying {
    background: var(--tblr-info);
    box-shadow: 0 0 6px rgba(116, 185, 255, 0.5);
    animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==========================================================================
   13. Loading Spinner
   ========================================================================== */

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--rs-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

.spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Full-page loader */
.page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    z-index: 9999;
}

/* Loading overlay for sections */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
}

/* ==========================================================================
   14. 404 Page
   ========================================================================== */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.error-page .error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    background: var(--rs-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.error-page .error-message {
    opacity: 0.7;
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto 2rem;
}

/* ==========================================================================
   15. Scroll Reveal Animations
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scroll reveal classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Hover lift */
.hover-lift {
    transition: transform var(--rs-transition), box-shadow var(--rs-transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hover-glow-primary:hover {
    box-shadow: var(--rs-glow-primary);
}

.hover-glow-teal:hover {
    box-shadow: var(--rs-glow-teal);
}

/* ==========================================================================
   16. Utility Classes
   ========================================================================== */

.text-gradient {
    background: var(--rs-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-teal {
    background: var(--rs-gradient-teal);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.monospace {
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flash message container (positioned over Tabler layout) */
.flash-container {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 1050;
    max-width: 400px;
    width: 100%;
}

.flash-container .alert {
    margin-bottom: 0.5rem;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Confirm delete modal extras */
.modal-confirm-delete .modal-body {
    text-align: center;
    padding: 2rem 1.5rem;
}

.modal-confirm-delete .delete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
    color: var(--tblr-danger);
}

/* Selection color */
::selection {
    background: rgba(108, 92, 231, 0.4);
}

/* ==========================================================================
   17. Responsive Overrides (only where Tabler needs help)
   ========================================================================== */

@media (max-width: 991.98px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .section-padding {
        padding: 3rem 0;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .language-rule-row {
        flex-wrap: wrap;
    }

    .dns-instructions .dns-record {
        flex-direction: column;
        align-items: flex-start;
    }

    .error-page .error-code {
        font-size: 5rem;
    }

    .auth-card {
        padding: 1.75rem;
    }

    .flash-container {
        left: 1rem;
        right: 1rem;
        max-width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in-up,
    .fade-in-left,
    .fade-in-right {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   18. Print Styles
   ========================================================================== */

@media print {
    /* Hide interactive / nav elements */
    .navbar,
    .navbar-vertical,
    .hero-shapes,
    .flash-container,
    .btn-copy,
    .btn-add-rule,
    .btn-remove-rule,
    .page-loader,
    .loading-overlay,
    footer {
        display: none !important;
    }

    /* Reset backgrounds for ink saving */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .card,
    .stats-card,
    .dns-instructions,
    .auth-card {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        color: #000 !important;
    }

    .stats-card::before {
        display: none;
    }

    .text-gradient,
    .text-gradient-teal,
    .error-page .error-code {
        -webkit-text-fill-color: #000;
        background: none;
        color: #000;
    }

    /* Ensure links print their URL */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Clean up page */
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
        background: none !important;
    }

    .hero-section::before,
    .hero-section::after {
        display: none;
    }

    .redirect-url,
    .dns-field-value,
    .api-key-display {
        color: #000 !important;
    }
}