/* Movie Ratings neon/silver client theme */
:root {
    --mr-bg: #05070d;
    --mr-bg-soft: #0a0f1a;
    --mr-surface: rgba(13, 17, 28, 0.88);
    --mr-surface-strong: rgba(18, 23, 36, 0.96);
    --mr-surface-soft: rgba(255, 255, 255, 0.045);
    --mr-line: rgba(187, 202, 232, 0.16);
    --mr-line-strong: rgba(255, 255, 255, 0.22);
    --mr-text: #f7f9ff;
    --mr-muted: #a5b1c8;
    --mr-muted-strong: #cad2e2;
    --mr-cyan: #25d5f2;
    --mr-violet: #8b5cf6;
    --mr-gold: #ffd166;
    --mr-gold-strong: #ffb84d;
    --mr-silver: #d9e3f2;
    --mr-success: #5ee4a7;
    --mr-warning: #f5b84b;
    --mr-danger: #ff6f86;
    --mr-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    --mr-glow-cyan: 0 0 28px rgba(37, 213, 242, 0.28);
    --mr-glow-gold: 0 0 30px rgba(255, 209, 102, 0.28);

    --surface: var(--mr-surface);
    --surface-soft: var(--mr-surface-soft);
    --line: var(--mr-line);
    --line-strong: var(--mr-line-strong);
    --text: var(--mr-text);
    --muted: var(--mr-muted);
    --accent: var(--mr-cyan);
    --accent-alt: var(--mr-gold);
    --success: var(--mr-success);
    --danger: var(--mr-danger);
    --danger-bg: rgba(255, 111, 134, 0.14);
    --primary: var(--mr-cyan);
    --primary-dark: #16a8c4;
    --gray-50: var(--mr-bg);
    --gray-100: rgba(255, 255, 255, 0.07);
    --gray-200: rgba(255, 255, 255, 0.12);
    --gray-300: rgba(255, 255, 255, 0.2);
    --gray-600: var(--mr-muted);
    --gray-700: var(--mr-muted-strong);
    --gray-900: var(--mr-text);
    --shadow: var(--mr-shadow);
    --shadow-lg: var(--mr-shadow);
}

html {
    background: var(--mr-bg);
}

body {
    color: var(--mr-text);
    background:
        linear-gradient(135deg, rgba(37, 213, 242, 0.13) 0%, transparent 25%),
        linear-gradient(225deg, rgba(139, 92, 246, 0.15) 0%, transparent 30%),
        linear-gradient(180deg, #05070d 0%, #0a1020 44%, #05070d 100%) !important;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

a {
    color: var(--mr-silver);
}

a:hover {
    color: var(--mr-cyan);
}

.page-shell,
.container {
    position: relative;
}

.brand {
    letter-spacing: 0.05em !important;
}

.brand-mark {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
        url("/assets/movie-ratings-logo-neon.png") center / cover no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--mr-glow-cyan), 0 18px 40px rgba(0, 0, 0, 0.34) !important;
    color: transparent !important;
    font-size: 0 !important;
}

.header,
.section-header {
    color: var(--mr-text);
}

.header::before {
    content: "";
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 26px;
    background: url("/assets/movie-ratings-logo-neon.png") center / cover no-repeat;
    box-shadow: var(--mr-glow-cyan), 0 18px 46px rgba(0, 0, 0, 0.42);
}

.header h1,
.section-header h2,
.hero h1,
h1,
h2,
h3 {
    color: var(--mr-text) !important;
    letter-spacing: 0 !important;
}

.subtitle,
.section-subtitle,
.checkout-note,
.field-note,
.footer,
.footer a,
.content p,
.content li,
.device-info,
.device-footer,
.toast-message,
.modal p {
    color: var(--mr-muted) !important;
}

.eyebrow,
.plan-badge {
    color: var(--mr-gold) !important;
    border: 1px solid rgba(255, 209, 102, 0.18);
    background: rgba(255, 209, 102, 0.08) !important;
}

.section,
.hero-panel,
.plans-shell,
.platform-selector,
.checkout-shell,
.demo-card,
.trust-card,
.selected-plan-summary,
.support-card,
.quota-card,
.device-card,
.blacklist-card,
.success-card,
.container,
.modal,
.toast,
.instructions,
.email-info,
.highlight-box {
    border: 1px solid var(--mr-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--mr-surface) !important;
    color: var(--mr-text) !important;
    box-shadow: var(--mr-shadow) !important;
}

.section,
.hero-panel,
.plans-shell,
.platform-selector,
.checkout-shell,
.demo-card,
.trust-card,
.selected-plan-summary,
.support-card,
.quota-card,
.device-card,
.blacklist-card,
.success-card,
.modal,
.instructions,
.email-info,
.highlight-box {
    border-radius: 18px !important;
}

.hero-copy {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.container {
    padding: 34px;
    border-radius: 22px;
}

.page-shell > .container,
body > .container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(8, 12, 22, 0.74) !important;
}

.video-frame,
.quota-bar,
.platform-option,
.plan-card,
.form-group input,
.search-input,
.filter-select,
.addon-key,
.addon-key-section,
.subscription-info,
.activation-status {
    border: 1px solid var(--mr-line) !important;
    background: rgba(5, 8, 15, 0.66) !important;
    color: var(--mr-text) !important;
}

.form-group input,
.search-input,
.filter-select,
.addon-key,
.addon-key-section {
    border-radius: 12px !important;
}

.form-group input:focus,
.search-input:focus,
.filter-select:focus,
.addon-key:focus {
    border-color: rgba(37, 213, 242, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(37, 213, 242, 0.12) !important;
    outline: none;
}

.platform-option.selected,
.plan-card.selected,
.selected-plan-summary {
    border-color: rgba(255, 209, 102, 0.52) !important;
    background: rgba(255, 209, 102, 0.08) !important;
    box-shadow: var(--mr-glow-gold) !important;
}

.platform-icon,
.step-number,
.pill,
.poster-badge,
.badge {
    background: rgba(37, 213, 242, 0.12) !important;
    border: 1px solid rgba(37, 213, 242, 0.22);
    color: var(--mr-cyan) !important;
}

.badge-inactive,
.btn:disabled,
.pagination button:disabled {
    background: rgba(217, 227, 242, 0.09) !important;
    border-color: rgba(217, 227, 242, 0.14) !important;
    color: rgba(217, 227, 242, 0.58) !important;
    box-shadow: none !important;
}

.btn,
.cta-button,
.copy-btn,
.activate-btn,
.subscribe-btn,
.billing-toggle button.active {
    border: 0 !important;
    background: linear-gradient(135deg, var(--mr-cyan) 0%, #75e8ff 45%, var(--mr-violet) 100%) !important;
    color: #05070d !important;
    font-weight: 800 !important;
    box-shadow: var(--mr-glow-cyan), 0 16px 34px rgba(0, 0, 0, 0.36) !important;
}

.btn:hover:not(:disabled),
.cta-button:hover,
.copy-btn:hover,
.activate-btn:hover,
.subscribe-btn:hover {
    transform: translateY(-2px);
}

.btn-secondary,
.btn-outline,
.cta-button-secondary,
.extension-link,
.header-link,
.billing-toggle button,
.pagination button {
    border: 1px solid var(--mr-line) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: var(--mr-silver) !important;
    box-shadow: none !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ff6f86 0%, #ff9a62 100%) !important;
    color: #19050a !important;
}

.quota-fill {
    background: linear-gradient(90deg, var(--mr-cyan), var(--mr-violet)) !important;
    box-shadow: var(--mr-glow-cyan);
}

.quota-fill.warning {
    background: linear-gradient(90deg, var(--mr-warning), var(--mr-gold)) !important;
}

.quota-fill.danger {
    background: linear-gradient(90deg, var(--mr-danger), #ff9a62) !important;
}

.spinner {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: var(--mr-cyan) !important;
    box-shadow: var(--mr-glow-cyan);
}

.success-icon,
.empty-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: url("/assets/movie-ratings-logo-silver.png") center / cover no-repeat;
    color: transparent !important;
    font-size: 0 !important;
    opacity: 1 !important;
    box-shadow: 0 0 24px rgba(217, 227, 242, 0.18);
}

.success-icon {
    background-image: url("/assets/movie-ratings-logo-neon.png");
    box-shadow: var(--mr-glow-cyan), var(--mr-glow-gold);
}

.addon-key {
    color: var(--mr-gold) !important;
    overflow-wrap: anywhere;
}

.addon-key-label,
.trial-summary-title,
.quota-info h3,
.blacklist-title h3,
.device-name h3,
.content strong,
.support-card h3,
.selected-plan-summary h3 {
    color: var(--mr-text) !important;
}

.activation-status.success {
    border-color: rgba(94, 228, 167, 0.38) !important;
    background: rgba(94, 228, 167, 0.12) !important;
    color: #baf8d8 !important;
}

.activation-status.pending {
    border-color: rgba(255, 209, 102, 0.38) !important;
    background: rgba(255, 209, 102, 0.12) !important;
    color: #ffe5a3 !important;
}

.activation-status.manual,
.email-info {
    border-color: rgba(37, 213, 242, 0.32) !important;
    background: rgba(37, 213, 242, 0.09) !important;
    color: var(--mr-silver) !important;
}

.content h2,
.content h3 {
    color: var(--mr-cyan) !important;
}

.highlight-box {
    border-left: 3px solid var(--mr-cyan) !important;
}

.footer {
    border-top-color: var(--mr-line) !important;
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.74) !important;
    backdrop-filter: blur(10px);
}

.toast-success {
    border-left-color: var(--mr-success) !important;
}

.toast-error {
    border-left-color: var(--mr-danger) !important;
}

.toast-warning {
    border-left-color: var(--mr-warning) !important;
}

.toast-info {
    border-left-color: var(--mr-cyan) !important;
}

@media (max-width: 768px) {
    .container {
        padding: 22px 16px;
    }

    .success-card {
        padding: 28px 18px !important;
    }

    .extension-links,
    .modal-actions {
        flex-direction: column;
    }
}