/*
 * Site-wide modern theme layer.
 * This normalizes older pages to the AI console style used on the homepage
 * without requiring a build step or rewriting every static page.
 */
:root {
    --modern-bg: #f7fbff;
    --modern-bg-soft: #edf7f2;
    --modern-text: #111827;
    --modern-muted: #5f6f82;
    --modern-subtle: #66758a;
    --modern-line: rgba(23, 32, 51, 0.1);
    --modern-panel: rgba(255, 255, 255, 0.88);
    --modern-panel-strong: rgba(255, 255, 255, 0.96);
    --modern-dark: #111827;
    --modern-accent: #10b981;
    --modern-accent-2: #2563eb;
    --modern-warn: #f97316;
    --modern-shadow: 0 18px 50px rgba(42, 54, 84, 0.1);
    --modern-shadow-strong: 0 24px 60px rgba(17, 24, 39, 0.14);
}

html {
    background: var(--modern-bg) !important;
}

body {
    background:
        linear-gradient(rgba(23, 32, 51, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 32, 51, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, var(--modern-bg) 0%, var(--modern-bg-soft) 52%, #fff8f1 100%) !important;
    background-size: 36px 36px, 36px 36px, auto !important;
    color: var(--modern-text) !important;
}

body::before {
    opacity: 0.82 !important;
}

.container,
.dashboard-container,
.leaderboard-container,
.resume-layout,
.about-container,
.profile-container,
.admin-container,
.reward-management,
.payment-container,
.settings-container,
.logs-container,
.email-config-container,
.management-container {
    position: relative !important;
    z-index: 1 !important;
}

header,
.ai-header {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--modern-shadow) !important;
    color: var(--modern-text) !important;
}

header h1,
.ai-brand-text {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--modern-text) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

nav,
.ai-nav {
    gap: 6px !important;
}

nav a,
.ai-nav a {
    border-radius: 999px !important;
    color: #516071 !important;
    background: transparent !important;
    font-weight: 700 !important;
}

nav a::before {
    display: none !important;
}

nav a:hover,
.ai-nav a:hover {
    background: rgba(17, 24, 39, 0.08) !important;
    color: var(--modern-text) !important;
}

nav a.active,
.ai-nav a.active {
    background: var(--modern-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.2) !important;
}

.page-header,
.leaderboard-header,
.dashboard-header,
.profile-header,
.admin-header,
.section-header {
    color: var(--modern-text) !important;
}

.page-title,
.leaderboard-header h2,
.dashboard-title,
.profile-title,
.admin-title,
.section-title,
.reward-management h2,
.email-config-container h2,
.management-container h2 {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--modern-text) !important;
    letter-spacing: 0 !important;
}

.page-subtitle,
.leaderboard-header p,
.dashboard-subtitle,
.menu-desc,
.resume-card-description,
.about-section p,
.empty-state-description,
.card-meta,
.stat-title,
.score-label,
.contact-label {
    color: var(--modern-muted) !important;
}

.section-title {
    border-bottom-color: rgba(23, 32, 51, 0.09) !important;
}

.section-title::before {
    background: var(--modern-accent) !important;
}

.card,
.stats-card,
.stat-card,
.menu-card,
.top-card,
.leaderboard-list,
.leaderboard-item,
.resume-card,
.about-section,
.feature-card,
.stat-item,
.qr-code-section,
.profile-section,
.admin-section,
.form-container,
.result-container,
.filters,
.table-container,
.notice,
.notice-box,
.vip-card,
.payment-card,
.settings-card,
.log-card,
.reward-list,
.upload-section,
.email-card,
.modal-content,
.reward-modal-content {
    background: var(--modern-panel) !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--modern-shadow) !important;
    color: var(--modern-text) !important;
}

.stat-card::before,
.menu-card::before,
.top-card::before,
.resume-card::before,
.profile-section::before,
.admin-section::before,
.vip-card::before {
    background: linear-gradient(90deg, var(--modern-dark), var(--modern-accent)) !important;
}

.card:hover,
.stats-card:hover,
.stat-card:hover,
.menu-card:hover,
.top-card:hover,
.leaderboard-item:hover,
.resume-card:hover,
.about-section:hover,
.feature-card:hover,
.profile-section:hover,
.admin-section:hover,
.vip-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--modern-shadow-strong) !important;
    border-color: rgba(16, 185, 129, 0.24) !important;
}

.stat-value,
.user-score,
.stat-number,
.price,
.vip-price {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--modern-text) !important;
}

.menu-icon,
.card-icon,
.empty-state-icon,
.contact-icon {
    background: var(--modern-dark) !important;
    color: #6ee7b7 !important;
    border-radius: 16px !important;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-visit,
.action-btn,
.btn-purchase,
.btn-login,
.btn-register,
.submit-btn,
.search-btn,
.save-btn,
.upload-btn {
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease !important;
}

.btn-primary,
.btn-visit,
.action-btn,
.btn-purchase,
.btn-login,
.submit-btn,
.save-btn,
.upload-btn,
button[type="submit"] {
    background: var(--modern-dark) !important;
    border-color: var(--modern-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.18) !important;
}

.btn-secondary,
.btn-register,
.reset-btn,
button[type="button"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(23, 32, 51, 0.14) !important;
    color: var(--modern-text) !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-visit:hover,
.action-btn:hover,
.btn-purchase:hover {
    transform: translateY(-1px) !important;
}

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(23, 32, 51, 0.13) !important;
    border-radius: 14px !important;
    color: var(--modern-text) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--modern-accent) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14) !important;
    outline: none !important;
}

table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead th,
table th {
    background: var(--modern-dark) !important;
    color: #f8fafc !important;
    border-bottom: none !important;
}

tbody tr,
table td {
    background: transparent !important;
    color: var(--modern-text) !important;
    border-bottom: 1px solid rgba(23, 32, 51, 0.08) !important;
}

tbody tr:hover {
    background: rgba(16, 185, 129, 0.07) !important;
}

.badge,
.top-badge,
.status,
.reward-status,
.vip-badge,
.tag {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.badge-gold,
.badge-silver,
.badge-bronze,
.reward-status.active,
.status.active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
}

.empty-state {
    color: var(--modern-muted) !important;
}

.empty-state-title {
    color: var(--modern-text) !important;
}

.page-header {
    border-bottom: 1px solid rgba(23, 32, 51, 0.09) !important;
}

.profile-layout,
.admin-container,
.leaderboard-container,
.resume-layout,
.email-config-container {
    animation: ui-page-rise 420ms ease both;
}

.profile-sidebar,
.profile-content,
.toolbar,
.email-config-table,
.current-email-card,
.pagination,
.order-item,
.vip-info-box,
.view-item,
.resume-cards > p,
.leaderboard-list > .empty-state,
.empty-state {
    background: var(--modern-panel) !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--modern-shadow) !important;
    color: var(--modern-text) !important;
}

.profile-sidebar,
.profile-content,
.toolbar,
.email-config-table,
.current-email-card,
.pagination {
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.toolbar {
    flex-wrap: wrap !important;
}

.table-container,
.email-config-table {
    overflow-x: auto !important;
}

.current-email-card {
    position: relative !important;
    overflow: hidden !important;
}

.current-email-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 5px !important;
    background: linear-gradient(180deg, var(--modern-dark), var(--modern-accent)) !important;
}

.current-email-header,
.current-email-item .label,
.current-email-item .value {
    color: var(--modern-text) !important;
}

.current-email-info {
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 32, 51, 0.08) !important;
    border-radius: 14px !important;
}

.current-email-item {
    border-bottom-color: rgba(23, 32, 51, 0.08) !important;
}

.sidebar-menu-item {
    color: #516071 !important;
    border-left-color: transparent !important;
}

.sidebar-menu-item:hover,
.sidebar-menu-item.active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border-left-color: var(--modern-accent) !important;
}

.profile-avatar,
.user-avatar-small {
    background: var(--modern-dark) !important;
    color: #6ee7b7 !important;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.2) !important;
}

.profile-role,
.status-badge,
.status-enabled,
.status-paid,
.status-success,
.order-status.success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.24) !important;
}

.status-disabled,
.status-pending,
.status-vip,
.vip-info-box .vip-title,
.vip-info-box .vip-days span {
    color: #c2410c !important;
}

.status-disabled,
.status-pending,
.status-vip {
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.24) !important;
}

.status-inactive,
.status-failed,
.status-cancelled {
    background: rgba(239, 68, 68, 0.09) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

.btn-add,
.btn-submit,
.btn-save,
.btn-edit,
.btn-toggle,
.btn-test,
.pagination button:hover:not(:disabled) {
    background: var(--modern-dark) !important;
    color: #ffffff !important;
    border-color: var(--modern-dark) !important;
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.18) !important;
}

.btn-delete,
.btn-logout {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 12px 26px rgba(220, 38, 38, 0.18) !important;
}

.btn-reset,
.reward-btn {
    background: linear-gradient(135deg, var(--modern-warn), #f59e0b) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.btn-cancel,
.pagination button,
.btn-secondary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--modern-text) !important;
    border: 1px solid rgba(23, 32, 51, 0.14) !important;
}

.modal {
    background: rgba(17, 24, 39, 0.52) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-title,
.profile-header h2,
.resume-card-title,
.order-info h4,
.company-name,
.job-title,
.view-company,
.form-group label,
.form-item label {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--modern-text) !important;
}

.position-name,
.view-position,
.email-cell {
    color: var(--modern-accent-2) !important;
}

.stat-label,
.view-time,
.order-id,
.order-info p,
.vip-info-box .vip-days,
.pagination-info,
.pagination span,
.form-tip,
.input-tip,
.copy-hint {
    color: var(--modern-muted) !important;
}

.top-three-card,
.resume-cards,
.stats-cards,
.vip-cards {
    align-items: stretch !important;
}

.top-card,
.resume-card,
.stat-card,
.vip-card,
.order-item {
    min-width: 0 !important;
}

.vip-card,
.vip-card.current {
    background: var(--modern-dark) !important;
    color: #ffffff !important;
}

.vip-card .btn-purchase {
    background: #ffffff !important;
    color: var(--modern-dark) !important;
}

.vip-card-title,
.vip-card-price,
.vip-card-features li {
    color: inherit !important;
}

.vip-card-features li {
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

.vip-card::before {
    background:
        linear-gradient(120deg, rgba(110, 231, 183, 0.2), transparent 38%),
        linear-gradient(90deg, var(--modern-accent), var(--modern-accent-2)) !important;
}

.leaderboard-item {
    min-width: 0 !important;
}

.job-title,
.job-company,
.job-location,
.job-type {
    min-width: 0 !important;
}

.leaderboard-list,
.email-config-table,
.table-container {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(17, 24, 39, 0.28) transparent !important;
}

.login-container,
.register-container,
.forgot-password-container,
.return-container {
    background: var(--modern-panel-strong) !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--modern-shadow) !important;
}

.login-title,
.register-title,
.forgot-title,
.return-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--modern-text) !important;
}

.reward-btn {
    background: linear-gradient(135deg, var(--modern-warn), #f59e0b) !important;
    color: #ffffff !important;
}

a {
    color: var(--modern-accent-2);
}

@keyframes ui-page-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    header {
        border-radius: 16px !important;
    }

    nav {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .card,
    .stat-card,
    .menu-card,
    .resume-card,
    .about-section,
    .profile-section,
    .admin-section,
    .form-container,
    .table-container {
        border-radius: 16px !important;
    }

    .page-header,
    .toolbar,
    .order-header,
    .order-body,
    .profile-layout {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .top-three-card,
    .resume-cards,
    .stats-cards,
    .vip-cards {
        grid-template-columns: 1fr !important;
    }

    .leaderboard-item {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 8px 12px !important;
        padding: 18px !important;
    }

    .leaderboard-item .job-title,
    .leaderboard-item .job-company,
    .leaderboard-item .job-location,
    .leaderboard-item .job-type,
    .leaderboard-item .job-score {
        width: auto !important;
    }

    .leaderboard-item .job-score {
        grid-column: 2 !important;
        text-align: left !important;
    }
}