:root {
    --ux-surface: rgba(255, 255, 255, 0.78);
    --ux-surface-strong: rgba(255, 255, 255, 0.92);
    --ux-border: rgba(52, 76, 183, 0.12);
    --ux-shadow: 0 24px 70px rgba(20, 33, 61, 0.12);
    --ux-shadow-soft: 0 12px 30px rgba(20, 33, 61, 0.08);
    --ux-primary: #344cb7;
    --ux-accent: #ff6b00;
    --ux-success: #1f9d68;
    --ux-text: #20304a;
    --ux-muted: #6c7893;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ux-text);
    background:
        radial-gradient(circle at top left, rgba(255, 107, 0, 0.12), transparent 32%),
        radial-gradient(circle at top right, rgba(52, 76, 183, 0.14), transparent 28%),
        linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
}

.navbar-custom,
.contact-card,
.forgot-card,
.login-card,
.mv-card,
.policy-card,
.terms-card,
.status-card,
.card,
.wallet-box,
.wallet-header {
    border: 1px solid var(--ux-border) !important;
    box-shadow: var(--ux-shadow-soft) !important;
    backdrop-filter: blur(14px);
}

.page-header,
.dashboard-header,
.balance-card {
    position: relative;
    overflow: hidden;
}

.page-header::after,
.dashboard-header::after,
.balance-card::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    filter: blur(6px);
}

.btn,
.btn-submit,
.btn-orange,
.btn-outline-green,
.wallet-btn,
.submit-btn {
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.btn:hover,
.btn-submit:hover,
.btn-orange:hover,
.btn-outline-green:hover,
.wallet-btn:hover,
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(52, 76, 183, 0.18);
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    border-radius: 14px !important;
    border: 1px solid rgba(52, 76, 183, 0.14) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(52, 76, 183, 0.34) !important;
    box-shadow: 0 0 0 4px rgba(52, 76, 183, 0.1) !important;
}

.table,
.table-responsive {
    border-radius: 18px;
    overflow: hidden;
}

.table thead th {
    border-bottom: 0 !important;
}

.quick-btn,
.type-badge,
.status-badge {
    box-shadow: 0 8px 18px rgba(52, 76, 183, 0.1);
}

.support-link,
.service-box,
.hand .card,
.wallet-box,
.contact-card,
.forgot-card,
.login-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.support-link:hover,
.service-box:hover,
.hand .card:hover,
.wallet-box:hover,
.contact-card:hover,
.forgot-card:hover,
.login-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ux-shadow) !important;
}

.sidebar-wrapper {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(32, 48, 74, 0.96)),
        radial-gradient(circle at top, rgba(255, 107, 0, 0.14), transparent 35%);
}

.topbar {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(52, 76, 183, 0.08);
}

.wallet-header,
.wallet-box,
.contact-card,
.forgot-card,
.login-card,
.policy-card,
.terms-card,
.status-card {
    background: var(--ux-surface-strong) !important;
}

.footer {
    background:
        linear-gradient(135deg, #172032 0%, #202d45 100%) !important;
}

.ux-loader,
.ux-loader-bar {
    pointer-events: none;
}

@media (max-width: 768px) {
    .page-header h1,
    .login-header h1,
    .status-header h1 {
        font-size: 28px !important;
    }

    .contact-card,
    .forgot-card,
    .login-card,
    .policy-card,
    .terms-card,
    .status-card {
        padding: 24px !important;
    }
}