:root {
    --pix-bg: #0b0f1a;
    --pix-surface: #131929;
    --pix-surface-alt: #1a2236;
    --pix-border: #2a3450;
    --pix-accent: #4f6ef7;
    --pix-accent-hover: #3b5bf0;
    --pix-text: #e4e9f5;
    --pix-text-muted: #7b8ab0;
    --pix-error: #e05c6a;
    --pix-success: #3ecf8e;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--pix-bg);
    color: var(--pix-text);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
}

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

.auth-card {
    background: var(--pix-surface);
    border: 1px solid var(--pix-border);
    border-radius: 1rem;
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}

.auth-brand-icon {
    width: 38px;
    height: 38px;
    background: var(--pix-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.auth-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pix-text);
    letter-spacing: -.01em;
}

.auth-heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pix-text);
    margin-bottom: .25rem;
}

.auth-subheading {
    font-size: .9rem;
    color: var(--pix-text-muted);
    margin-bottom: 1.75rem;
}

.auth-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--pix-text-muted);
    margin-bottom: .4rem;
    display: block;
}

.auth-input {
    background-color: var(--pix-bg) !important;
    border: 1px solid var(--pix-border) !important;
    color: var(--pix-text) !important;
    border-radius: .5rem !important;
    padding: .65rem .9rem !important;
    font-size: .9rem !important;
    width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-input::placeholder {
    color: var(--pix-text-muted) !important;
    opacity: .7;
}

.auth-input:focus {
    border-color: var(--pix-accent) !important;
    box-shadow: 0 0 0 3px rgba(79, 110, 247, .18) !important;
    outline: none !important;
}

.auth-input.is-invalid {
    border-color: var(--pix-error) !important;
}

.input-group .auth-input {
    border-right: none !important;
    border-radius: .5rem 0 0 .5rem !important;
}

.input-group-text.auth-addon {
    background-color: var(--pix-bg);
    border: 1px solid var(--pix-border);
    border-left: none;
    color: var(--pix-text-muted);
    cursor: pointer;
    border-radius: 0 .5rem .5rem 0 !important;
    padding: 0 .75rem;
    transition: color .15s ease;
}

.input-group-text.auth-addon:hover {
    color: var(--pix-text);
}

.auth-field-error {
    color: var(--pix-error);
    font-size: .8rem;
    margin-top: .35rem;
}

.auth-alert {
    background: rgba(224, 92, 106, .12);
    border: 1px solid rgba(224, 92, 106, .35);
    border-radius: .5rem;
    color: #f4a7ae;
    font-size: .875rem;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.auth-alert-success {
    background: rgba(62, 207, 142, .12);
    border-color: rgba(62, 207, 142, .35);
    color: #7eeabf;
}

.btn-auth {
    background: var(--pix-accent);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    padding: .7rem 1rem;
    border-radius: .5rem;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.btn-auth:hover {
    background: var(--pix-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-auth:active {
    transform: translateY(0);
}

.auth-divider {
    border-color: var(--pix-border);
    margin: 1.5rem 0;
}

.auth-footer-text {
    font-size: .875rem;
    color: var(--pix-text-muted);
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.auth-footer-text a {
    color: var(--pix-accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-footer-text a:hover {
    text-decoration: underline;
}

.auth-link {
    font-size: .8rem;
    color: var(--pix-text-muted);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--pix-accent);
}

.auth-check .form-check-input {
    background-color: var(--pix-bg);
    border-color: var(--pix-border);
}

.auth-check .form-check-input:checked {
    background-color: var(--pix-accent);
    border-color: var(--pix-accent);
}

.auth-check .form-check-label {
    font-size: .875rem;
    color: var(--pix-text-muted);
}

.dashboard-navbar {
    background: var(--pix-surface);
    border-bottom: 1px solid var(--pix-border);
}

.dashboard-navbar .navbar-brand {
    font-weight: 700;
    color: var(--pix-text) !important;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.dashboard-nav-link {
    color: var(--pix-text-muted) !important;
    font-size: .9rem;
    transition: color .15s ease;
    text-decoration: none;
}

.dashboard-nav-link:hover, .dashboard-nav-link.active {
    color: var(--pix-text) !important;
}

.dashboard-card {
    background: var(--pix-surface);
    border: 1px solid var(--pix-border);
    border-radius: .75rem;
    padding: 1.5rem;
}

.dropdown-menu-dark-custom {
    background: var(--pix-surface);
    border: 1px solid var(--pix-border);
    border-radius: .5rem;
    padding: .35rem;
}

.dropdown-menu-dark-custom .dropdown-item {
    color: var(--pix-text-muted);
    font-size: .875rem;
    border-radius: .35rem;
    padding: .45rem .75rem;
}

.dropdown-menu-dark-custom .dropdown-item:hover {
    background: var(--pix-surface-alt);
    color: var(--pix-text);
}

.badge-verified {
    background: rgba(62, 207, 142, .15);
    color: var(--pix-success);
    border: 1px solid rgba(62, 207, 142, .3);
    font-size: .75rem;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.badge-unverified {
    background: rgba(224, 92, 106, .12);
    color: #f4a7ae;
    border: 1px solid rgba(224, 92, 106, .3);
    font-size: .75rem;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-blue {
    background: rgba(79, 110, 247, .15);
    color: var(--pix-accent);
}

.stat-icon-green {
    background: rgba(62, 207, 142, .12);
    color: var(--pix-success);
}

.text-pix-muted {
    color: var(--pix-text-muted) !important;
}

.text-pix {
    color: var(--pix-text) !important;
}

.border-pix {
    border-color: var(--pix-border) !important;
}

.bg-pix-surface {
    background-color: var(--pix-surface) !important;
}

.bg-pix-alt {
    background-color: var(--pix-surface-alt) !important;
}
/* ── Settings tabs ────────────────────────────────────────── */
.settings-tab {
    color: var(--pix-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    transition: color .15s ease, border-color .15s ease;
    margin-bottom: -1px;
}
.settings-tab:hover {
    color: var(--pix-text);
    border-bottom-color: var(--pix-border);
}
.settings-tab.active {
    color: var(--pix-accent) !important;
    background: transparent !important;
    border-bottom-color: var(--pix-accent) !important;
}