/* ============================================
   CSSKXX - Sistema de Design Minimalista
   ============================================ */

/* === RESET E BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === VARIÁVEL DE COR PRIMÁRIA === */
/* --primary é definida via Blade no layout: --primary: {{ $activeTheme->primary_color ?? '#2563eb' }}; */
:root {
    --primary: #2563eb; /* Fallback, será sobrescrito pelo Blade */
    --radius: 8px;
    --spacing-unit: 8px;
}

/* === TEMA ESCURO === */
[data-pc-theme="dark"] {
    --bg-main: #0a0a0a;
    --bg-surface: #111111;
    --bg-secondary: #151515;
    --bg-elevated: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-base: #262626;
    --border-soft: #404040;
}

/* === TEMA CLARO === */
:root,
[data-pc-theme="light"] {
    --bg-main: #ffffff;
    --bg-surface: #f8f9fa;
    --bg-secondary: #f1f5f9;
    --bg-elevated: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-base: #e2e8f0;
    --border-soft: #f1f5f9;
}

/* === TIPOGRAFIA === */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-main);
    min-height: 100vh;
}

/* === LAYOUT PRINCIPAL === */
.main-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

@media (max-width: 968px) {
    .main-container {
        flex-direction: column;
    }
}

/* === SEÇÃO DE AUTENTICAÇÃO === */
.auth-section {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--bg-main);
}

/* Seção de autenticação quando não há info-section (como forgotpassword) */
.main-container:not(:has(.info-section)) .auth-section {
    flex: 1 1 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 968px) {
    .auth-section {
        flex: 1 1 100%;
        width: 100%;
        min-height: auto;
        padding: calc(var(--spacing-unit) * 3);
        max-width: 100%;
    }
}

.auth-container {
    width: 100%;
    max-width: 400px;
}

.auth-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-header a {
    display: inline-block;
    margin: 0 auto;
}

.auth-logo {
    max-width: 160px;
    height: auto;
    margin: 0 auto calc(var(--spacing-unit) * 3);
    display: block;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    letter-spacing: -0.02em;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: calc(var(--spacing-unit) * 1);
    line-height: 1.5;
}

.auth-body {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

/* === FORMULÁRIOS === */
.form-group {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.form-row .form-group {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 3);
    }
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
}

.input-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.form-control {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Padding para inputs com ícone */
.input-wrapper .input-icon ~ .form-control {
    padding-left: calc(var(--spacing-unit) * 6);
}

/* Suporte moderno com :has() */
@supports selector(:has(*)) {
    .input-wrapper:has(.input-icon) .form-control {
        padding-left: calc(var(--spacing-unit) * 6);
    }
}

.form-control.with-icon {
    padding-left: calc(var(--spacing-unit) * 6);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.password-toggle {
    position: absolute;
    right: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    user-select: none;
    padding: calc(var(--spacing-unit) * 0.5);
    border-radius: calc(var(--radius) * 0.5);
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.password-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.password-toggle:hover {
    color: var(--primary);
    background-color: var(--bg-surface);
}

/* === BOTÕES === */
.btn-login {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: #ffffff;
    background-color: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: calc(var(--spacing-unit) * 2);
}

.btn-login:hover {
    filter: brightness(0.95);
}

.btn-login:active {
    transform: scale(0.98);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-text,
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.btn-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.btn-login:disabled .btn-text {
    display: none;
}

.btn-login:disabled .btn-loading {
    display: inline-flex;
}

.btn-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* === LINK DE CADASTRO === */
.register-link-wrapper {
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-align: left;
}

.register-link {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

.register-link:hover {
    color: var(--primary);
}

.register-link strong {
    color: var(--primary);
    font-weight: 600;
}

/* === FOOTER DO AUTH === */
.auth-footer {
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.forgot-password {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    filter: brightness(0.85);
    opacity: 0.9;
}

/* === ALERTAS === */
.alert-container {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.hidden-message {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.alert {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 2);
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
}

.alert-success {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.alert-info {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary);
}

.alert ul {
    margin: 0;
    padding-left: calc(var(--spacing-unit) * 3);
}

.alert-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

/* === VALIDAÇÃO DE CAMPOS === */
.form-group.error .form-control {
    border-color: #ef4444;
}

.form-group.error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group.success .form-control {
    border-color: var(--primary);
}

.field-error {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: calc(var(--spacing-unit) * 0.5);
}

/* === SEÇÃO DE INFORMAÇÕES === */
.info-section {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 6);
    background-color: var(--bg-surface);
}

@media (max-width: 968px) {
    .info-section {
        display: none;
    }
}

.info-header {
    margin-bottom: calc(var(--spacing-unit) * 6);
}

.info-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

@media (max-width: 968px) {
    .info-title {
        font-size: 2rem;
        text-align: center;
    }
}

.info-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 540px;
}

@media (max-width: 968px) {
    .info-subtitle {
        text-align: center;
        margin: 0 auto;
    }
}

.info-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 6);
}

@media (max-width: 768px) {
    .info-features {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    padding: calc(var(--spacing-unit) * 3);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    transition: border-color 0.2s ease;
}

.feature-card:hover {
    border-color: var(--primary);
}

.feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(37, 99, 235, 0.1);
    border-radius: calc(var(--radius) * 0.75);
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.feature-icon i,
.feature-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: var(--primary);
    display: block;
    flex-shrink: 0;
}

.feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.feature-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.action-buttons {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

@media (max-width: 968px) {
    .action-buttons {
        justify-content: center;
    }
}

.btn-primary,
.btn-secondary {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.btn-primary i,
.btn-secondary i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    filter: brightness(0.95);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.btn-secondary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--primary);
    color: var(--text-primary);
}

/* === MODAL 2FA - PÁGINA DE LOGIN === */
.login-2fa-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: calc(var(--spacing-unit) * 2);
    /* Fundo padrão - será sobrescrito pelo tema */
    background-color: rgba(0, 0, 0, 0.5);
}

/* Tema Dark - fundo mais escuro e opaco */
[data-pc-theme="dark"] .login-2fa-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tema Light - fundo mais claro e translúcido */
[data-pc-theme="light"] .login-2fa-modal-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.login-2fa-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Conteúdo do modal 2FA */
.login-2fa-modal-content {
    background-color: var(--bg-elevated);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 5);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-base);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Sombra adaptável ao tema para o modal 2FA */
[data-pc-theme="dark"] .login-2fa-modal-content {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

[data-pc-theme="light"] .login-2fa-modal-content {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Título e descrição do modal 2FA */
.login-2fa-modal-content .modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    text-align: center;
    letter-spacing: -0.02em;
}

.login-2fa-modal-content .modal-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
    line-height: 1.6;
}

.login-2fa-modal-content .form-group {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.login-2fa-modal-content .btn-login {
    margin-top: 0;
}

/* === INPUTS DE CÓDIGO 2FA === */
.verification-code-inputs {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.code-digit {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    background-color: var(--bg-elevated);
    border: 2px solid var(--border-base);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Inter', monospace;
    padding: 0;
}

.code-digit:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.code-digit::-webkit-outer-spin-button,
.code-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.code-digit[type="text"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (max-width: 576px) {
    .code-digit {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    
    .verification-code-inputs {
        gap: calc(var(--spacing-unit) * 1);
    }
}

/* === RECUPERAÇÃO DE SENHA === */
.recovery-instructions {
    background-color: var(--bg-surface);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.instruction-item:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 32px;
    height: 32px;
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 0.9375rem;
}

.step-description {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.recovery-info {
    margin-top: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    background-color: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
}

.info-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.info-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.back-to-login {
    text-align: center;
    color: var(--text-secondary);
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    font-size: 0.875rem;
}

.back-to-login a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-to-login a:hover {
    filter: brightness(0.85);
    opacity: 0.9;
}

.help-links {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
}

.help-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.help-link:hover {
    color: var(--primary);
}

@media (max-width: 576px) {
    .recovery-instructions {
        padding: calc(var(--spacing-unit) * 2);
    }

    .instruction-item {
        gap: calc(var(--spacing-unit) * 1.5);
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }

    .help-links {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .help-link {
        text-align: center;
    }
}

/* === TOAST NOTIFICATIONS === */
.toast-container {
    position: fixed;
    top: calc(var(--spacing-unit) * 3);
    right: calc(var(--spacing-unit) * 3);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
    pointer-events: none;
    max-width: 380px;
    width: auto;
}

@media (max-width: 576px) {
    .toast-container {
        top: calc(var(--spacing-unit) * 2);
        right: calc(var(--spacing-unit) * 2);
        left: calc(var(--spacing-unit) * 2);
        max-width: none;
    }
}

.toast {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    min-width: 300px;
    max-width: 380px;
}

@media (max-width: 576px) {
    .toast {
        min-width: auto;
        max-width: none;
        width: 100%;
        padding: calc(var(--spacing-unit) * 3);
    }
}

.toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--primary);
    border-radius: var(--radius) 0 0 var(--radius);
}

.toast-success::before {
    background-color: var(--primary);
}

.toast-error::before,
.toast-danger::before {
    background-color: #ef4444;
}

.toast-warning::before {
    background-color: #f59e0b;
}

.toast-info::before {
    background-color: var(--primary);
}

.toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.toast-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.toast-success .toast-icon {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.toast-error .toast-icon,
.toast-danger .toast-icon {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.toast-warning .toast-icon {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.toast-info .toast-icon {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.toast-message {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
}

.toast-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    border: none;
    background: none;
    padding: 0;
    border-radius: calc(var(--radius) * 0.5);
    margin-top: 2px;
    opacity: 0.6;
}

.toast-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
    opacity: 1;
}

.toast-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(calc(100% + var(--spacing-unit) * 4)) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(calc(100% + var(--spacing-unit) * 4)) scale(0.95);
    }
}

.toast.hiding {
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@media (max-width: 576px) {
    @keyframes toastSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes toastSlideOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
    }
}

/* === FOOTER GLOBAL === */
.footer {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 2);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    z-index: 100;
}

.footer a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--primary);
}

/* === WHATSAPP FLOAT === */
.whatsapp-float {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 3);
    right: calc(var(--spacing-unit) * 3);
    width: 56px;
    height: 56px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    color: #ffffff;
}

/* === RESPONSIVIDADE === */
@media (max-width: 576px) {
    .auth-section {
        padding: calc(var(--spacing-unit) * 2);
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .action-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .modal-content {
        padding: calc(var(--spacing-unit) * 4);
    }

    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        bottom: calc(var(--spacing-unit) * 2);
        right: calc(var(--spacing-unit) * 2);
    }
}

/* === RESET PASSWORD SPECIFIC === */
.reset-password-form .auth-container {
    max-width: 480px;
}

.token-info {
    background: var(--primary);
    color: #ffffff;
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.token-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    font-weight: 500;
}

.token-item i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    opacity: 0.9;
}

[data-pc-theme="dark"] .token-info {
    background: var(--primary);
}

/* === PASSWORD STRENGTH INDICATOR === */
.password-strength {
    margin-top: calc(var(--spacing-unit) * 1.5);
    height: 6px;
    border-radius: 3px;
    background: var(--border-base);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.password-strength::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0%;
}

.password-strength.weak::before {
    width: 33%;
    background: #ef4444;
}

.password-strength.medium::before {
    width: 66%;
    background: #f59e0b;
}

.password-strength.strong::before {
    width: 100%;
    background: #10b981;
}

/* === PASSWORD REQUIREMENTS === */
.password-requirements {
    margin-top: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
}

.requirement {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.requirement:last-child {
    margin-bottom: 0;
}

.requirement i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    color: #ef4444;
    transition: color 0.2s ease;
}

.requirement.valid i {
    color: #10b981;
}

.requirement.valid span {
    color: #10b981;
    font-weight: 500;
}

.requirement.valid {
    opacity: 0.9;
}

/* === FIELD ERROR === */
.field-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: calc(var(--spacing-unit) * 1);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.field-error i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* === LOADING ANIMATION === */
.btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.btn-loading i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    animation: spin 1s linear infinite;
}

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

/* === BACK TO LOGIN === */
.back-to-login {
    text-align: center;
    color: var(--text-secondary);
    margin: 0;
}

.back-to-login a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.back-to-login a:hover {
    opacity: 0.8;
}

.back-to-login a i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

/* === DARK THEME FOR RESET PASSWORD === */
[data-pc-theme="dark"] .password-requirements {
    background: var(--bg-elevated);
    border-color: var(--border-base);
}

/* === RESPONSIVE FOR RESET PASSWORD === */
@media (max-width: 968px) {
    .reset-password-form .auth-section {
        order: -1;
    }

    .info-section {
        order: 1;
    }
}

@media (max-width: 576px) {
    .reset-password-form .auth-container {
        max-width: 100%;
    }

    .token-info {
        padding: calc(var(--spacing-unit) * 2);
    }

    .password-requirements {
        padding: calc(var(--spacing-unit) * 1.5);
    }

    .requirement {
        font-size: 0.8rem;
    }
    
    .info-section {
        display: none;
    }
}

/* === REGISTER SPECIFIC === */
.register-form .auth-container {
    max-width: 500px;
}

.referral-info {
    background: var(--primary);
    color: #ffffff;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border-radius: var(--radius);
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.referral-info i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
    transition: all 0.2s ease;
}

.form-check:hover {
    border-color: var(--primary);
}

.form-check-input {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
    margin: 0;
}

.terms-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.terms-link:hover {
    opacity: 0.8;
}

.login-link {
    text-align: center;
    color: var(--text-secondary);
    margin: 0;
}

.login-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.login-link a:hover {
    opacity: 0.8;
}

.login-link a i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.field-success {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: calc(var(--spacing-unit) * 1);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.field-success i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* === DARK THEME FOR REGISTER === */
[data-pc-theme="dark"] .form-check {
    background: var(--bg-elevated);
    border-color: var(--border-base);
}

/* === RESPONSIVE FOR REGISTER === */
/* No desktop, info-section já vem primeiro no HTML, então fica à esquerda */
/* No mobile, o formulário deve aparecer primeiro */
@media (max-width: 968px) {
    .register-form .auth-section {
        order: -1;
    }

    .info-section {
        order: 1;
    }
}

@media (max-width: 576px) {
    .register-form .auth-container {
        max-width: 100%;
    }
}

/* === REGISTER LEVELS === */
.register-level {
    display: none;
    animation: fadeIn 0.3s ease;
}

.register-level.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.level-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.level-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.level-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.level-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.level-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

/* === INDICADOR DE PROGRESSO === */
.register-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 2);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    position: relative;
}

.step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 2px solid var(--border-base);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.progress-step.active .step-number {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.progress-step.completed .step-number {
    background-color: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.step-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
}

.progress-step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

.progress-line {
    flex: 1;
    height: 2px;
    background-color: var(--border-base);
    max-width: 80px;
    position: relative;
}

.progress-step.completed + .progress-line {
    background-color: #10b981;
}

/* === BOTÕES DE NAVEGAÇÃO === */
.btn-next,
.btn-back,
.btn-review {
    padding: calc(var(--spacing-unit) * 2.5);
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    color: #ffffff;
    background-color: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    flex: 1;
    justify-content: center;
}

.btn-next:hover,
.btn-review:hover {
    filter: brightness(0.95);
}

.btn-next:active,
.btn-review:active {
    transform: scale(0.98);
}

.btn-back {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
    flex: 0 0 auto;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
}

.btn-back:hover {
    background-color: var(--bg-elevated);
    border-color: var(--primary);
}

.btn-review {
    background-color: #10b981;
}

.btn-review:hover {
    background-color: #059669;
}

.btn-next i,
.btn-back i,
.btn-review i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* === MODAL DE REVISÃO === */
.review-modal {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 2);
    border-bottom: 1px solid var(--border-base);
}

.review-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: calc(var(--radius) * 0.5);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.review-body {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.review-section {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.review-section:last-child {
    margin-bottom: 0;
}

.review-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    padding-bottom: calc(var(--spacing-unit) * 1);
    border-bottom: 1px solid var(--border-base);
}

.review-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(var(--spacing-unit) * 1.5) 0;
    gap: calc(var(--spacing-unit) * 2);
}

.review-item:not(:last-child) {
    border-bottom: 1px solid var(--border-base);
}

.review-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.review-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 400;
    text-align: right;
    word-break: break-word;
}

.review-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.review-actions .btn-back {
    flex: 0 0 auto;
}

.review-actions .btn-login {
    flex: 1;
}

/* === RESPONSIVE PARA NÍVEIS === */
@media (max-width: 576px) {
    .register-progress {
        padding: calc(var(--spacing-unit) * 1);
        margin-bottom: calc(var(--spacing-unit) * 3);
    }
    
    .step-label {
        font-size: 0.7rem;
    }
    
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .progress-line {
        max-width: 40px;
    }
    
    .level-actions {
        flex-direction: column;
    }
    
    .btn-back {
        width: 100%;
        justify-content: center;
    }
    
    .review-modal {
        max-width: 100%;
        margin: calc(var(--spacing-unit) * 2);
    }
    
    .review-item {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 0.5);
    }
    
    .review-value {
        text-align: left;
    }
    
    .review-actions {
        flex-direction: column;
    }
}

/* === VERIFICATION DOCUMENTS PAGE === */
.verify-section {
    flex: 1;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4);
}

/* Desktop: info-section à esquerda, verify-section à direita */
@media (min-width: 969px) {
    .main-container:has(.verify-section) .info-section {
        order: 0;
    }
    .main-container:has(.verify-section) .verify-section {
        order: 1;
    }
}

/* Mobile: verify-section primeiro, info-section depois */
@media (max-width: 968px) {
    .verify-section {
        order: -1;
        max-width: 100%;
        padding: calc(var(--spacing-unit) * 3);
    }
    .main-container:has(.verify-section) .info-section {
        order: 1;
    }
}

.verify-container {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid var(--border-base);
    width: 100%;
}

.verify-header {
    background: var(--bg-surface);
    padding: calc(var(--spacing-unit) * 5);
    text-align: center;
    border-bottom: 1px solid var(--border-base);
}

.verify-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.verify-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.verify-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* === STATUS CARDS === */
.status-container {
    padding: calc(var(--spacing-unit) * 4);
}

.status-card {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4);
    border-radius: var(--radius);
    border: 2px solid;
    background: var(--bg-surface);
}

.status-pending {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.status-approved {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.status-rejected {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.status-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.status-icon i {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

.status-pending .status-icon {
    color: #f59e0b;
}

.status-approved .status-icon {
    color: #10b981;
}

.status-rejected .status-icon {
    color: #ef4444;
}

.status-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--text-primary);
}

.status-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.status-content small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* === VERIFICATION PROGRESS STEPS === */
.verification-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 6);
    padding: 0 calc(var(--spacing-unit) * 2);
    position: relative;
}

.verification-progress-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border-base);
    z-index: 1;
}

.verification-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    position: relative;
    z-index: 2;
}

.verification-step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.verification-step-circle i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.verification-step.active .verification-step-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.verification-step.completed .verification-step-circle {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.verification-step-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.verification-step.active .verification-step-label {
    color: var(--primary);
    font-weight: 600;
}

/* === VERIFICATION FORM CONTAINER === */
.verification-form-container {
    padding: calc(var(--spacing-unit) * 4);
}

.verification-step-content {
    display: none;
}

.verification-step-content.active {
    display: block;
    animation: fadeInUp 0.3s ease-out;
}

.verification-step-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.verification-step-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.verification-step-header p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* === VERIFICATION FORM GRID === */
.verification-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.verification-form-group.full-width {
    grid-column: 1 / -1;
}

/* === FILE UPLOAD AREA === */
.file-upload-area {
    border: 2px dashed var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.upload-content i {
    width: 40px;
    height: 40px;
    color: var(--primary);
    stroke-width: 2;
}

.upload-content p {
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    font-size: 0.9375rem;
}

.upload-content small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.upload-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}

.upload-preview.active {
    display: block;
}

.preview-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
}

.remove-file {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-file:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.remove-file i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* === DOCUMENT TIPS === */
.document-tips {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-top: calc(var(--spacing-unit) * 4);
}

.document-tips h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.document-tips h4 i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: #f59e0b;
}

.document-tips ul {
    margin: 0;
    padding-left: calc(var(--spacing-unit) * 2.5);
}

.document-tips li {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

/* === VERIFICATION REVIEW === */
.verification-review-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.verification-review-section {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.verification-review-section:last-child {
    margin-bottom: 0;
}

.verification-review-section h4 {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding-bottom: calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid var(--border-base);
}

.verification-review-section h4 i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.verification-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
}

.verification-review-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.verification-review-item.full-width {
    grid-column: 1 / -1;
}

.verification-review-item label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.verification-review-item span {
    font-weight: 500;
    color: var(--text-primary);
}

/* === VERIFICATION STEP ACTIONS === */
.verification-step-actions {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 4);
}

.btn-prev-verify,
.btn-next-verify,
.btn-submit-verify {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 1rem;
    font-family: inherit;
}

.btn-prev-verify {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    color: var(--text-secondary);
}

.btn-prev-verify:hover {
    background: var(--bg-elevated);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-prev-verify i,
.btn-next-verify i,
.btn-submit-verify i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.btn-next-verify,
.btn-submit-verify {
    background: var(--primary);
    color: #ffffff;
}

.btn-next-verify:hover,
.btn-submit-verify:hover {
    filter: brightness(0.95);
}

.btn-submit-verify:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-submit-verify .btn-loading {
    display: none;
}

.btn-submit-verify .btn-loading i {
    animation: spin 1s linear infinite;
}

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

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

/* === RESPONSIVE VERIFICATION === */
@media (max-width: 968px) {
    .verification-progress-steps {
        margin-bottom: calc(var(--spacing-unit) * 4);
    }
    
    .verification-step-label {
        font-size: 0.75rem;
    }
    
    .verification-form-grid {
        grid-template-columns: 1fr;
    }
    
    .verification-step-actions {
        flex-direction: column-reverse;
    }
    
    .btn-prev-verify,
    .btn-next-verify,
    .btn-submit-verify {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .verify-header {
        padding: calc(var(--spacing-unit) * 4);
    }
    
    .verify-title {
        font-size: 1.75rem;
    }
    
    .verification-form-container,
    .status-container {
        padding: calc(var(--spacing-unit) * 3);
    }
    
    .verification-step-circle {
        width: 40px;
        height: 40px;
    }
    
    .verification-step-circle i {
        width: 20px;
        height: 20px;
    }
    
    .file-upload-area {
        padding: calc(var(--spacing-unit) * 3);
        min-height: 120px;
    }
    
    .upload-content i {
        width: 32px;
        height: 32px;
    }
    
    .status-card {
        flex-direction: column;
        text-align: center;
        gap: calc(var(--spacing-unit) * 2);
    }
    
    .status-icon {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   ADMIN LAYOUT STYLES (app.blade.php)
   ============================================ */

/* === VARIÁVEIS ADICIONAIS === */
:root {
    --sidebar-width: 280px;
    --header-height: 70px;
}

/* === LOADER MODERNO === */
.modern-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loader-content {
    text-align: center;
    color: #ffffff;
}

.loader-logo {
    max-width: 180px;
    width: auto;
    height: auto;
    margin-bottom: calc(var(--spacing-unit) * 2);
    animation: float 3s ease-in-out infinite;
    filter: brightness(0) invert(1);
}

.loader-text {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: calc(var(--spacing-unit) * 2);
    opacity: 0.9;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* === SIDEBAR === */
.modern-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-base);
    z-index: 1050;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
}

.sidebar-brand {
    padding: calc(var(--spacing-unit) * 2);
    text-align: center;
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.sidebar-brand img {
    max-height: 36px;
    width: auto;
}

/* === USER PROFILE CARD === */
.user-profile-card {
    margin: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2.5);
    background: var(--primary);
    border-radius: var(--radius);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.user-profile-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    margin-bottom: calc(var(--spacing-unit) * 1);
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.user-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    position: relative;
    z-index: 1;
}

.user-email {
    font-size: 0.8rem;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.user-profile-card * {
    position: relative;
    z-index: 2;
}

/* === NAVEGAÇÃO === */
.nav-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(var(--spacing-unit) * 2) 0 calc(var(--spacing-unit) * 3) 0;
}

.nav-container::-webkit-scrollbar {
    width: 4px;
}

.nav-container::-webkit-scrollbar-track {
    background: transparent;
}

.nav-container::-webkit-scrollbar-thumb {
    background: var(--border-base);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-container:hover::-webkit-scrollbar-thumb {
    opacity: 1;
}

.nav-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.nav-menu {
    padding: 0;
}

.nav-item {
    margin: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 2);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

.nav-link:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    transform: translateX(2px);
}

.nav-link.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

.nav-icon {
    width: 20px;
    height: 20px;
    margin-right: calc(var(--spacing-unit) * 1.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.nav-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 1);
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* === SUBMENU === */
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-surface);
    margin: calc(var(--spacing-unit) * 0.5) 0;
    border-radius: var(--radius);
}

.nav-submenu.show {
    max-height: 500px;
}

.nav-submenu .nav-link {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 6);
    font-size: 0.85rem;
    background: transparent;
}

.nav-submenu .nav-link:hover {
    background: var(--bg-elevated);
}

.nav-toggle {
    margin-left: auto;
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-toggle svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.nav-toggle.rotated {
    transform: rotate(90deg);
}

/* === SIDEBAR OVERLAY === */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* === HEADER === */
.modern-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--spacing-unit) * 4);
    z-index: 999;
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left h5 {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.header-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-surface);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.header-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.header-btn:hover {
    background: var(--primary);
    color: #ffffff;
    transform: scale(1.05);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-elevated);
}

/* === MAIN CONTENT === */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: calc(var(--spacing-unit) * 4);
    min-height: calc(100vh - var(--header-height));
    background: var(--bg-surface);
}

/* === CARDS === */
.modern-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* === BANK CARD === */
.bank-card {
    background: var(--primary);
    border: none;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* === STATS CARDS === */
.stats-card {
    height: 140px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.stats-card:hover::before {
    transform: scaleX(1);
}

.stats-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 1);
    width: 100%;
}

.stats-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.stats-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.stats-content {
    flex: 1;
    text-align: center;
}

.stats-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.1;
}

.stats-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.1;
}

.stats-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* === PERIOD CARDS === */
/* Period cards now use the same structure as stats-cards */
/* The only difference is the icon color classes (today, week, month) */

/* === BOTTOM NAVIGATION === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-base);
    padding: calc(var(--spacing-unit) * 1.5) 0;
    display: none;
    z-index: 1000;
    backdrop-filter: blur(20px);
    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -4px rgba(0, 0, 0, 0.1);
}

.bottom-nav-item {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 1);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: var(--primary);
}

.bottom-nav-icon {
    font-size: 1.2rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.bottom-nav-text {
    font-size: 0.7rem;
    font-weight: 500;
}

/* === DROPDOWNS === */
.dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    padding: calc(var(--spacing-unit) * 1);
}

.dropdown-item {
    color: var(--text-primary);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.dropdown-item:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* === MODALS === */
.modal {
    --bs-modal-bg: var(--bg-elevated);
    --bs-modal-color: var(--text-primary);
    --bs-modal-border-color: var(--border-base);
    --bs-modal-header-border-color: var(--border-base);
    --bs-modal-footer-border-color: var(--border-base);
    --bs-modal-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.modal-content {
    background-color: var(--bs-modal-bg) !important;
    color: var(--bs-modal-color) !important;
}

.modal-header,
.modal-body,
.modal-footer {
    background: var(--bs-modal-bg) !important;
    color: var(--bs-modal-color) !important;
    border-color: var(--bs-modal-header-border-color) !important;
}

[data-pc-theme="dark"] .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

[data-pc-theme="dark"] .btn-close:hover {
    opacity: 1;
}

/* === DARK THEME: BOOTSTRAP CARDS === */
[data-pc-theme="dark"] .card {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-base) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

[data-pc-theme="dark"] .card .card-body {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

[data-pc-theme="dark"] .card-header {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-base) !important;
}

[data-pc-theme="dark"] .card-header[class*="bg-"] {
    color: #ffffff !important;
}

/* === DARK THEME: BOOTSTRAP TABLES === */
[data-pc-theme="dark"] .table {
    --bs-table-bg: var(--bg-elevated);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-base);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-accent-bg: transparent;
}

[data-pc-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

[data-pc-theme="dark"] .table thead th,
[data-pc-theme="dark"] .table thead,
[data-pc-theme="dark"] .table-dark {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-base) !important;
}

[data-pc-theme="dark"] .table-responsive {
    background: var(--bg-elevated);
}

[data-pc-theme="dark"] .modern-card .table {
    --bs-table-bg: var(--bg-elevated);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-base);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-accent-bg: transparent;
}

[data-pc-theme="dark"] .modern-card .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

[data-pc-theme="dark"] .modern-card .table thead th {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-base) !important;
}

[data-pc-theme="dark"] .modern-card .table-responsive {
    background: var(--bg-elevated);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    .modern-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .modern-sidebar.show {
        transform: translateX(0);
    }

    .modern-header {
        left: 0;
        padding: 0 calc(var(--spacing-unit) * 2);
    }

    .main-content {
        margin-left: 0;
        padding: calc(var(--spacing-unit) * 2);
        margin-bottom: 80px;
    }

    .stats-card {
        height: 120px;
        padding: calc(var(--spacing-unit) * 2);
    }

    .stats-value {
        font-size: 1.25rem;
    }

    .stats-icon {
        width: 40px;
        height: 40px;
    }

    .stats-icon svg {
        width: 20px;
        height: 20px;
    }

    .nav-container::-webkit-scrollbar {
        width: 2px;
    }

    .header-left h5 {
        font-size: 1.1rem;
    }

    .bottom-nav {
        display: flex;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

/* === Z-INDEX HIERARCHY === */
.modern-loader {
    z-index: 9999;
}

.sidebar-overlay {
    z-index: 1049;
}

.modern-sidebar {
    z-index: 1050;
}

.bottom-nav {
    z-index: 1000;
}

.whatsapp-float {
    z-index: 1000;
}

.modern-header {
    z-index: 999;
}

/* === UTILITIES === */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

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

.btn-modern {
    background: var(--primary);
    border: none;
    color: #ffffff;
    font-weight: 500;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    color: #ffffff;
    filter: brightness(0.95);
}

.btn-modern i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    margin-right: calc(var(--spacing-unit) * 1);
}

/* ============================================
   HOME PAGE SPECIFIC STYLES
   ============================================ */

/* === WELCOME HEADER === */
.welcome-header h1 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.welcome-header .emoji {
    font-size: 1.5rem;
}

.welcome-header p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* === VERIFICATION ALERT === */
.verification-alert-card {
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.verification-alert-icon {
    width: 48px;
    height: 48px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.verification-alert-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: #f59e0b;
}

.verification-alert-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1rem;
}

.verification-alert-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* === BANK CARD SPECIFIC === */
.bank-card-wallet-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.bank-card-wallet-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: #ffffff;
}

.bank-card-title {
    font-weight: 600;
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.bank-card-subtitle {
    opacity: 0.7;
    font-size: 0.85rem;
}

.bank-card-balance {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
}

.bank-card-toggle-btn {
    font-size: 1.25rem;
    opacity: 0.8;
    padding: 0;
    border: none;
    background: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.bank-card-toggle-btn:hover {
    opacity: 1;
}

.bank-card-toggle-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.bank-card-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: calc(var(--spacing-unit) * 1);
    flex-shrink: 0;
}

.bank-card-indicator.success {
    background: rgba(34, 197, 94, 1);
}

.bank-card-indicator.info {
    background: rgba(59, 130, 246, 1);
}

.bank-card-meta {
    font-size: 0.85rem;
    opacity: 0.9;
}

.bank-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 1);
}

.bank-card-btn {
    border-radius: 12px;
    padding: calc(var(--spacing-unit) * 1.5);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    transition: all 0.2s ease;
}

.bank-card-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.bank-card-btn.btn-light {
    background: #ffffff;
    color: var(--primary);
    border: none;
}

.bank-card-btn.btn-light:hover {
    filter: brightness(0.95);
}

.bank-card-btn.btn-outline-light {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bank-card-btn.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* === STATS ICONS WITH COLORS === */
.stats-icon.lock {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.stats-icon.deposit {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.stats-icon.withdraw {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.stats-icon.total {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.stats-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* === PERIOD ICONS WITH COLORS (now using stats-icon class) === */
.stats-icon.today {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.stats-icon.week {
    background: rgba(249, 115, 22, 0.1);
    color: #F97316;
}

.stats-icon.month {
    background: rgba(168, 85, 247, 0.1);
    color: #A855F7;
}

/* === CHART CONTAINER === */
.chart-container {
    position: relative;
    height: 320px;
}

.chart-header h5 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.chart-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.chart-dropdown-btn {
    border-radius: var(--radius);
    font-size: 0.85rem;
}

/* === TRANSACTION LIST === */
.transaction-list {
    max-height: 380px;
    overflow-y: auto;
}

.transaction-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    transition: all 0.2s ease;
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.transaction-item:hover {
    background: var(--bg-elevated);
    border-color: var(--primary);
    transform: translateX(2px);
}

.transaction-icon {
    width: 40px;
    height: 40px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: #22C55E;
}

.transaction-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.transaction-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.transaction-amount {
    color: #22C55E;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

.transaction-empty {
    text-align: center;
    padding: calc(var(--spacing-unit) * 5) 0;
    color: var(--text-muted);
}

.transaction-empty-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
}

.transaction-empty-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    opacity: 0.5;
}

.transaction-empty p {
    font-size: 0.9rem;
    margin: 0;
}

/* === LINK TO ALL === */
.link-to-all {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.link-to-all:hover {
    filter: brightness(0.85);
    color: var(--primary);
}

/* === MODAL TITLE === */
.modal-title {
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.modal-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* === FORM LABEL === */
.form-label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: calc(var(--spacing-unit) * 5) 0;
    color: var(--text-muted);
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
}

.empty-state-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* === NOTIFICATION MODAL === */
.notification-image {
    max-width: 200px;
    margin: 0 auto;
}

.notification-message {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.notification-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* === TRANSACTION ITEM CLICK EFFECT === */
.transaction-item.clicking {
    transform: scale(0.98);
}

/* === LOADING SPINNER === */
.btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.btn-loading i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    animation: spin 1s linear infinite;
}

/* === RESPONSIVE HOME === */
@media (max-width: 768px) {
    .welcome-header h1 {
        font-size: 1.5rem;
    }

    .bank-card-balance {
        font-size: 1.75rem;
    }

    .bank-card-wallet-icon {
        width: 48px;
        height: 48px;
    }

    .bank-card-wallet-icon i {
        width: 20px;
        height: 20px;
    }

    .chart-container {
        height: 280px;
    }
}

/* === DEPOSIT PAGE === */
.deposit-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.deposit-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.deposit-header-content {
    flex: 1;
}

.deposit-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.deposit-content-grid {
    max-width: 800px;
    margin: 0 auto;
}

.deposit-form-section {
    min-width: 0;
}

.deposit-card-header {
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.deposit-icon-wrapper {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--spacing-unit) * 2);
    flex-shrink: 0;
}

.deposit-icon-wrapper i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2.5;
}

.deposit-card-title-wrapper {
    flex: 1;
}

.deposit-card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.25rem;
}

.deposit-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.deposit-input-wrapper {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
}

.deposit-currency {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-base);
    color: var(--text-primary);
    font-weight: 600;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 1rem;
}

.deposit-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
}

.deposit-input:focus {
    background: var(--bg-elevated);
    color: var(--primary);
}

.deposit-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-input-wrapper:focus-within .deposit-currency {
    border-color: var(--primary);
    color: var(--primary);
}

.deposit-help {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: calc(var(--spacing-unit) * 0.75);
    display: block;
}

.deposit-amount-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 1);
}

@media (min-width: 768px) {
    .deposit-amount-buttons {
        grid-template-columns: repeat(4, 1fr);
    }
}

.amount-btn {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amount-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.amount-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(0.98);
}

.deposit-submit-wrapper {
    margin-top: calc(var(--spacing-unit) * 3);
}

.deposit-submit-wrapper .btn-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.deposit-submit-wrapper .btn-text {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.deposit-submit-wrapper .btn-text i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.deposit-info-section {
    min-width: 0;
}

.deposit-info-card {
    height: 100%;
}

.pix-info-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.pix-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
}

.pix-icon-wrapper i {
    width: 40px;
    height: 40px;
    color: white;
    stroke-width: 2;
}

.pix-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.25rem;
}

.pix-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.pix-steps {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.pix-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.pix-step:last-child {
    margin-bottom: 0;
}

.pix-step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: calc(var(--spacing-unit) * 2);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
}

.pix-step-check {
    background: var(--primary);
}

.pix-step-check i {
    width: 16px;
    height: 16px;
    color: white;
    stroke-width: 3;
}

.pix-step-content {
    flex: 1;
    padding-top: calc(var(--spacing-unit) * 0.25);
}

.pix-step-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.pix-step-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
}

.pix-features {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2.5);
    margin-top: calc(var(--spacing-unit) * 3);
}

.pix-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.pix-feature-row:last-child {
    margin-bottom: 0;
}

.pix-feature-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.pix-feature-item i {
    width: 16px;
    height: 16px;
    color: var(--primary);
    stroke-width: 2;
}

.deposit-stats-section {
    margin-top: calc(var(--spacing-unit) * 4);
}

.deposit-stats-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 1.25rem;
}

.deposit-stats-title i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    stroke-width: 2;
}

.deposit-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .deposit-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.deposit-stat-card {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.deposit-stat-card:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.deposit-stat-icon {
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-stat-icon i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    stroke-width: 2;
}

.deposit-stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.1rem;
}

.deposit-stat-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.is-invalid {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.hidden-message {
    display: none !important;
}

/* === RESPONSIVE DEPOSIT PAGE === */
@media (max-width: 768px) {
    .deposit-container {
        padding: calc(var(--spacing-unit) * 2);
    }

    .deposit-title {
        font-size: 1.5rem;
    }

    .deposit-content-grid {
        gap: calc(var(--spacing-unit) * 2);
    }

    .deposit-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === DEPOSIT SUCCESS PAGE === */
.deposit-success-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.deposit-success-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .deposit-success-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.deposit-success-header-content {
    flex: 1;
}

.deposit-success-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-success-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.deposit-success-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.deposit-success-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 992px) {
    .deposit-success-content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.deposit-success-left-card,
.deposit-success-right-card {
    min-width: 0;
}

.deposit-success-card,
.deposit-success-info-card {
    height: 100%;
}

.deposit-success-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.deposit-success-icon-wrapper {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--spacing-unit) * 2);
    flex-shrink: 0;
}

.deposit-success-icon-wrapper i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2.5;
}

.deposit-success-card-title-wrapper {
    text-align: left;
}

.deposit-success-card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.25rem;
}

.deposit-success-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.qr-code-section {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.qr-code-wrapper {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 2.5);
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.qr-code-wrapper:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-xl);
}

.qr-code-image {
    max-width: 250px;
    width: 100%;
    height: auto;
}

.alert-error {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
}

.alert-error i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    stroke-width: 2;
    flex-shrink: 0;
}

.pix-section {
    margin-top: calc(var(--spacing-unit) * 3);
}

.separator {
    display: flex;
    align-items: center;
    margin: calc(var(--spacing-unit) * 3) 0;
    text-align: center;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-base);
}

.separator-text {
    padding: 0 calc(var(--spacing-unit) * 2);
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--bg-card);
}

.pix-copy-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 1.1rem;
}

.pix-copy-title i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.pix-textarea-wrapper {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.pix-textarea {
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    resize: none;
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.pix-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-copy-button {
    width: 100%;
}

.pix-deposit-info {
    margin-top: calc(var(--spacing-unit) * 3);
}

.success-animation {
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-align: center;
}

.success-icon-circle {
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    animation: bounceIn 0.6s ease-out;
}

.success-icon-circle i {
    width: 48px;
    height: 48px;
    color: white;
    stroke-width: 2;
}

.success-title {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-align: center;
}

.payment-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
}

.payment-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.payment-summary-label {
    color: var(--text-primary);
    font-weight: 600;
}

.payment-summary-value {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.payment-summary-status {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: calc(var(--spacing-unit) * 1);
}

.payment-info {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
}

.payment-info p {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.loading-section {
    text-align: center;
    padding: calc(var(--spacing-unit) * 3) 0;
}

.loading-icon-circle {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    box-shadow: var(--shadow-lg);
    animation: pulse 2s infinite;
}

.loading-icon-circle i {
    width: 32px;
    height: 32px;
    color: white;
    stroke-width: 2;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    animation: spin 1s linear infinite;
}

.loading-text {
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0;
}

.deposit-info-section {
    margin-top: calc(var(--spacing-unit) * 3);
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.info-item {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    transition: all 0.2s ease;
}

.info-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.info-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-item-text {
    flex: 1;
}

.info-item-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.info-item-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
}

.info-item-icon {
    opacity: 0.7;
}

.info-item-icon i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    stroke-width: 2;
}

.completed-section {
    margin-top: calc(var(--spacing-unit) * 3);
}

.completed-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.completed-icon-circle {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    box-shadow: var(--shadow-xl);
}

.completed-icon-circle i {
    width: 32px;
    height: 32px;
    color: white;
    stroke-width: 2;
}

.completed-title {
    color: var(--primary);
    font-weight: 600;
    margin: calc(var(--spacing-unit) * 2) 0 0;
}

.receipt-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
}

.receipt-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.receipt-title i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.receipt-details {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.receipt-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(var(--spacing-unit) * 1.5);
    border-bottom: 1px solid var(--border-base);
}

.receipt-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.receipt-detail-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.receipt-detail-value {
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.deposit-success-back-button {
    margin-top: calc(var(--spacing-unit) * 3);
    text-align: center;
}

.hidden {
    display: none !important;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* === RESPONSIVE DEPOSIT SUCCESS === */
@media (max-width: 768px) {
    .deposit-success-container {
        padding: calc(var(--spacing-unit) * 2);
    }

    .deposit-success-title {
        font-size: 1.5rem;
    }

    .deposit-success-content-grid {
        gap: calc(var(--spacing-unit) * 2);
    }

    .qr-code-wrapper {
        padding: calc(var(--spacing-unit) * 1.5);
    }

    .qr-code-image {
        max-width: 200px;
    }
}

/* === DEPOSIT LIST PAGE === */
.deposit-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.deposit-list-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .deposit-list-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.deposit-list-header-content {
    flex: 1;
}

.deposit-list-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-list-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.deposit-list-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    flex-wrap: wrap;
}

.deposit-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .deposit-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.deposit-filters-card {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.deposit-filters-content {
    padding: calc(var(--spacing-unit) * 3);
}

.deposit-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 992px) {
    .deposit-filters-grid {
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--spacing-unit) * 3);
    }
}

.deposit-search-section {
    min-width: 0;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
}

.search-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    font-size: 0.9rem;
}

.search-button {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-button:hover {
    background: var(--primary);
    opacity: 0.9;
}

.search-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-filters-section {
    min-width: 0;
}

.filter-form {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    align-items: flex-end;
}

.filter-date-wrapper {
    flex: 1;
    min-width: 0;
}

.date-inputs-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.date-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}

.filter-status-wrapper {
    min-width: 140px;
}

.status-select {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

.filter-button {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.filter-button:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.filter-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-table-card {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.table-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.table-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
}

.table-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.25rem;
}

.table-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.table-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.table-wrapper {
    overflow-x: auto;
}

.deposit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.deposit-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.deposit-table th {
    color: var(--text-primary);
    font-weight: 600;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    text-align: left;
    border: none;
}

.deposit-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: all 0.2s ease;
}

.deposit-table tbody tr:hover {
    background: var(--bg-secondary);
}

.deposit-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: none;
}

.transaction-cell {
    min-width: 200px;
}

.transaction-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.transaction-id-wrapper,
.end-to-end-wrapper {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.transaction-id {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.end-to-end {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.copy-button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: var(--radius);
}

.copy-button:hover {
    color: var(--primary);
    background: var(--bg-secondary);
}

.copy-button i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.amount-cell,
.fee-cell {
    white-space: nowrap;
}

.amount-value,
.fee-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.amount-value {
    color: var(--text-primary);
}

.fee-value {
    color: var(--text-secondary);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.85rem;
}

.status-badge i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.status-completed {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.status-refunded {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.status-pending {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.status-failed {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.status-default {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.date-cell {
    white-space: nowrap;
}

.date-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.date-value {
    color: var(--text-primary);
    font-weight: 500;
}

.time-value {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.actions-cell {
    white-space: nowrap;
}

.action-button {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-button:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.action-button i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.empty-state {
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 3);
    text-align: center;
}

.empty-state-content {
    max-width: 400px;
    margin: 0 auto;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    opacity: 0.5;
}

.empty-state-icon i {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    stroke-width: 2;
}

.empty-state-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.empty-state-text {
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
}

.table-pagination {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === BOOTSTRAP PAGINATION OVERRIDE === */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: calc(var(--spacing-unit) * 0.5);
}

.page-item {
    list-style: none;
}

.page-link {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.page-link:hover {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

.page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
    border-color: var(--border-base);
    color: var(--text-muted);
}

.page-item.disabled .page-link:hover {
    background: var(--bg-secondary);
    border-color: var(--border-base);
    color: var(--text-muted);
}

/* === DEPOSIT MODAL === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: calc(var(--spacing-unit) * 2);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.deposit-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary);
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-title {
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    margin: 0;
}

.modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.modal-body {
    padding: calc(var(--spacing-unit) * 3);
    flex: 1;
    overflow-y: auto;
}

.deposit-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .deposit-modal-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.deposit-modal-section-full {
    grid-column: 1 / -1;
}

.deposit-modal-card {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
}

.deposit-modal-card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 1rem;
}

.deposit-modal-card-title i {
    width: 18px;
    height: 18px;
    color: var(--primary);
    stroke-width: 2;
}

.deposit-modal-item {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.deposit-modal-item:last-child {
    margin-bottom: 0;
}

.deposit-modal-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.deposit-modal-label i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    margin-right: calc(var(--spacing-unit) * 0.5);
}

.deposit-modal-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.deposit-amount-modal {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.deposit-modal-value-wrapper {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.deposit-modal-additional-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .deposit-modal-additional-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.modal-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 1.5);
}

.text-center {
    text-align: center;
}

/* === RESPONSIVE DEPOSIT LIST === */
@media (max-width: 768px) {
    .deposit-list-container {
        padding: calc(var(--spacing-unit) * 2);
    }

    .deposit-list-title {
        font-size: 1.5rem;
    }

    .deposit-stats-grid {
        grid-template-columns: 1fr;
    }

    .deposit-filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-status-wrapper {
        min-width: auto;
    }

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

    .table-wrapper {
        font-size: 0.8rem;
    }

    .deposit-table th,
    .deposit-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1);
    }

    .deposit-modal-grid {
        grid-template-columns: 1fr;
    }

    .deposit-modal-additional-grid {
        grid-template-columns: 1fr;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn-login,
    .modal-footer .btn-secondary {
        width: 100%;
    }
}

/* === WITHDRAW PAGE === */
.withdraw-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.withdraw-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.withdraw-header-content {
    flex: 1;
}

.withdraw-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.withdraw-balance-card {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.bank-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
}

.bank-card-info-wrapper {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex: 1;
}

.bank-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.bank-card-icon i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2.5;
}

.bank-card-info {
    flex: 1;
    min-width: 0;
}

.bank-card-label {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.bank-card-value {
    color: white;
    font-size: 1.75rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin: 0;
}

.bank-card-status {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: white;
    opacity: 0.9;
    flex-shrink: 0;
}

.status-indicator {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.9;
}

.status-text {
    font-size: 0.85rem;
}

.withdraw-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
    max-width: 800px;
    margin: 0 auto;
}

.withdraw-form-section {
    min-width: 0;
}

.withdraw-card-header {
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.withdraw-icon-wrapper {
    width: 56px;
    height: 56px;
    background: var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--spacing-unit) * 2);
    flex-shrink: 0;
}

.withdraw-icon-wrapper i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2.5;
}

.withdraw-card-title-wrapper {
    flex: 1;
}

.withdraw-card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1.25rem;
}

.withdraw-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.withdraw-input-wrapper {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
}

.withdraw-currency {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-base);
    color: var(--text-primary);
    font-weight: 600;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.withdraw-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.withdraw-input:focus {
    background: var(--bg-elevated);
    color: var(--primary);
}

.withdraw-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-input-wrapper:focus-within .withdraw-currency {
    border-color: var(--primary);
    color: var(--primary);
}

.withdraw-input-wrapper:focus-within .withdraw-input {
    color: var(--primary);
}

.withdraw-help {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: calc(var(--spacing-unit) * 0.75);
    display: block;
}

.withdraw-amount-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 1);
}

@media (min-width: 768px) {
    .withdraw-amount-buttons {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

.amount-btn {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amount-btn:hover {
    border-color: var(--primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.amount-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.amount-btn-all {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.amount-btn-all:hover {
    opacity: 0.9;
}

.withdraw-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    transition: all 0.3s ease;
}

.withdraw-summary.updated {
    animation: highlightSummary 0.6s ease;
}

@keyframes highlightSummary {
    0% { transform: scale(1); }
    50% { 
        transform: scale(1.01); 
        background: var(--bg-elevated);
    }
    100% { transform: scale(1); }
}

.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.summary-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.summary-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

.summary-icon i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.summary-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.summary-divider {
    height: 1px;
    background: var(--border-base);
    margin: calc(var(--spacing-unit) * 1) 0;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(var(--spacing-unit) * 0.5);
}

.summary-total-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.summary-total-value {
    color: var(--primary);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
}

.withdraw-submit-wrapper {
    margin-top: calc(var(--spacing-unit) * 3);
}

.withdraw-submit-wrapper .btn-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.withdraw-submit-wrapper .btn-text {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.withdraw-submit-wrapper .btn-text i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.withdraw-info-section {
    min-width: 0;
}

.withdraw-info-card {
    height: 100%;
}

.withdraw-info-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.withdraw-info-icon {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 2);
}

.withdraw-info-icon i {
    width: 32px;
    height: 32px;
    color: white;
    stroke-width: 2.5;
}

.withdraw-info-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.withdraw-info-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.withdraw-steps {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.withdraw-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 3);
    position: relative;
    padding-left: calc(var(--spacing-unit) * 1);
}

.withdraw-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--spacing-unit) * 2.5);
    top: calc(var(--spacing-unit) * 3.5);
    bottom: calc(var(--spacing-unit) * -1.5);
    width: 2px;
    background: var(--border-base);
    opacity: 0.3;
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: calc(var(--spacing-unit) * 2);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative;
    z-index: 1;
}

.step-number i {
    width: 16px;
    height: 16px;
    color: white;
    stroke-width: 3;
}

.step-content {
    flex: 1;
    padding-top: calc(var(--spacing-unit) * 0.25);
}

.step-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.step-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
}

.withdraw-features {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2.5);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.features-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 1.5);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.feature-item i {
    width: 18px;
    height: 18px;
    color: var(--primary);
    stroke-width: 2;
}

.withdraw-schedule {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.schedule-icon {
    flex-shrink: 0;
}

.schedule-icon i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.schedule-content {
    flex: 1;
}

.schedule-content strong {
    color: var(--text-primary);
    font-size: 0.85rem;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.schedule-content p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
}

.select-with-icon {
    padding-left: calc(var(--spacing-unit) * 2);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2) center;
    background-size: 12px;
}

[data-pc-theme="dark"] .select-with-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.is-valid {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

/* === RESPONSIVE WITHDRAW PAGE === */
@media (max-width: 768px) {
    .withdraw-container {
        padding: calc(var(--spacing-unit) * 2);
    }

    .withdraw-title {
        font-size: 1.5rem;
    }

    .withdraw-content-grid {
        gap: calc(var(--spacing-unit) * 2);
    }

    .bank-card-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .bank-card-status {
        width: 100%;
        justify-content: center;
        margin-top: calc(var(--spacing-unit) * 1);
    }

    .bank-card-info-wrapper {
        width: 100%;
        justify-content: center;
    }

    .withdraw-amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === WITHDRAW LIST PAGE === */
.withdraw-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.withdraw-list-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .withdraw-list-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.withdraw-list-header-content {
    flex: 1;
}

.withdraw-list-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-list-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.withdraw-list-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    flex-wrap: wrap;
}

.withdraw-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .withdraw-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.withdraw-filters-card {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.withdraw-filters-content {
    padding: calc(var(--spacing-unit) * 3);
}

.withdraw-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .withdraw-filters-grid {
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }
}

.withdraw-search-section {
    min-width: 0;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated);
}

.search-input {
    flex: 1;
    border: none;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: transparent;
    color: var(--text-primary);
    outline: none;
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-input:focus {
    color: var(--primary);
}

.search-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-button {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.search-button:hover {
    opacity: 0.9;
}

.search-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-filters-section {
    min-width: 0;
}

.filter-form {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    align-items: end;
}

.filter-date-wrapper {
    flex: 1;
    min-width: 0;
}

.date-inputs-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.date-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
}

.date-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.filter-status-wrapper {
    min-width: 140px;
}

.status-select {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

[data-pc-theme="dark"] .status-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.status-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.filter-button {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    height: fit-content;
}

.filter-button:hover {
    opacity: 0.9;
}

.filter-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-table-card {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.withdraw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.withdraw-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.withdraw-table th {
    color: var(--text-primary);
    font-weight: 600;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    text-align: left;
    border: none;
}

.withdraw-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: all 0.2s ease;
}

.withdraw-table tbody tr:hover {
    background: var(--bg-secondary);
}

.withdraw-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: none;
}

.withdraw-table-row {
    cursor: pointer;
}

.pix-key-wrapper {
    margin-top: calc(var(--spacing-unit) * 0.75);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.pix-key-text {
    color: var(--text-muted);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.pix-key-text i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

/* === WITHDRAW MODALS === */
.withdraw-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .withdraw-modal-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.withdraw-modal-section {
    min-width: 0;
}

.withdraw-modal-section-full {
    grid-column: 1 / -1;
}

.withdraw-modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 2);
}

.withdraw-modal-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.withdraw-modal-card-title i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.withdraw-modal-item {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.withdraw-modal-item:last-child {
    margin-bottom: 0;
}

.withdraw-modal-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.withdraw-modal-label i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    margin-right: calc(var(--spacing-unit) * 0.5);
}

.withdraw-modal-value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-modal-value-wrapper {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.withdraw-amount-modal {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.withdraw-net-amount {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

.withdraw-modal-additional-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .withdraw-modal-additional-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.withdraw-modal-additional-item {
    min-width: 0;
}

/* === WITHDRAW TIMELINE === */
.withdraw-timeline {
    position: relative;
    padding-left: calc(var(--spacing-unit) * 3);
}

.withdraw-timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-unit) * 1.5);
    top: calc(var(--spacing-unit) * 1.5);
    bottom: 0;
    width: 2px;
    background: var(--border-base);
    opacity: 0.3;
}

.withdraw-timeline-item {
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.withdraw-timeline-item:last-child {
    margin-bottom: 0;
}

.withdraw-timeline-dot {
    position: absolute;
    left: calc(var(--spacing-unit) * -2.5);
    top: calc(var(--spacing-unit) * 0.5);
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
    z-index: 1;
}

.withdraw-timeline-dot-error {
    background: var(--primary);
    opacity: 0.7;
}

.withdraw-timeline-content {
    padding-top: calc(var(--spacing-unit) * 0.25);
}

.withdraw-timeline-title {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.withdraw-timeline-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* === WITHDRAW SUCCESS PAGE === */
.withdraw-success-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 3);
}

.withdraw-success-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

@media (min-width: 768px) {
    .withdraw-success-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.withdraw-success-header-content {
    flex: 1;
}

.withdraw-success-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-success-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.withdraw-success-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
    max-width: 800px;
    margin: 0 auto;
}

.withdraw-success-left-card {
    min-width: 0;
}

.withdraw-success-card {
    height: 100%;
}

.withdraw-success-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.withdraw-success-actions {
    margin-top: calc(var(--spacing-unit) * 3);
    text-align: center;
}

.withdraw-success-actions .btn-login {
    width: 100%;
}

/* === RESPONSIVE WITHDRAW LIST === */
@media (max-width: 768px) {
    .withdraw-list-container {
        padding: calc(var(--spacing-unit) * 2);
    }

    .withdraw-list-title {
        font-size: 1.5rem;
    }

    .withdraw-stats-grid {
        grid-template-columns: 1fr;
    }

    .withdraw-filters-grid {
        grid-template-columns: 1fr;
    }

    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-status-wrapper {
        min-width: auto;
    }

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

    .table-wrapper {
        font-size: 0.8rem;
    }

    .withdraw-table th,
    .withdraw-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1);
    }

    .withdraw-modal-grid {
        grid-template-columns: 1fr;
    }

    .withdraw-modal-additional-grid {
        grid-template-columns: 1fr;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn-login,
    .modal-footer .btn-secondary {
        width: 100%;
    }
}

/* === PRODUCT MANAGER === */
.product-manager {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.product-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.product-manager-title-section {
    flex: 1;
}

.product-manager-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.product-manager-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.product-manager-action {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.product-manager-action:hover {
    opacity: 0.9;
}

.product-manager-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.product-manager-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.product-manager-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.product-manager-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.product-manager-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.product-manager-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.product-manager-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.product-item {
    display: flex;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.product-item:hover {
    border-color: var(--primary);
}

.product-item-thumb {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.product-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-item-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.product-item-thumb-empty i {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    stroke-width: 1.5;
    opacity: 0.4;
}

.product-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    gap: calc(var(--spacing-unit) * 2);
}

.product-item-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.4;
}

.product-item-type {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.product-item-type i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.product-item-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}

.product-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.product-item-price {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.product-item-price-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-item-price-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.35rem;
    font-family: 'JetBrains Mono', monospace;
}

.product-item-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.product-item-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.product-item-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.product-item-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === PRODUCT DELETE MODAL === */
.product-manager-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.product-manager-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.product-manager-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.product-manager-modal-overlay.active .product-manager-modal {
    transform: scale(1);
}

.product-manager-modal-header {
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.product-manager-modal-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    flex: 1;
}

.product-manager-modal-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.product-manager-modal-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.product-manager-modal-header-text {
    flex: 1;
}

.product-manager-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.product-manager-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.product-manager-modal-close {
    padding: calc(var(--spacing-unit) * 1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.product-manager-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.product-manager-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.product-manager-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.product-manager-modal-warning {
    display: flex;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
}

.product-manager-modal-warning-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.product-manager-modal-warning-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.product-manager-modal-warning-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.product-manager-modal-warning-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.product-manager-modal-warning-text strong {
    color: var(--primary);
    font-weight: 600;
}

.product-manager-modal-warning-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.product-manager-modal-footer {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.product-manager-modal-btn {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.product-manager-modal-btn.secondary {
    border: 1px solid var(--border-base);
    background: transparent;
    color: var(--text-primary);
}

.product-manager-modal-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.product-manager-modal-btn.danger {
    border: none;
    background: #ef4444;
    color: white;
}

.product-manager-modal-btn.danger:hover:not(:disabled) {
    opacity: 0.9;
}

.product-manager-modal-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.product-manager-modal-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.product-manager-modal-btn-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.product-manager-modal-btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.product-manager-modal-btn-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@media (max-width: 768px) {
    .product-manager-modal-footer {
        flex-direction: column;
    }

    .product-manager-modal-btn {
        width: 100%;
    }
}

/* === PRODUCT EDITOR === */
.product-editor {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.product-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.product-editor-title-section {
    flex: 1;
}

.product-editor-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.product-editor-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.product-editor-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.product-editor-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.product-editor-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.product-editor-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.product-editor-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.product-editor-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.product-editor-label-small {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.product-editor-input,
.product-editor-select,
.product-editor-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.product-editor-input:focus,
.product-editor-select:focus,
.product-editor-textarea:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.product-editor-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.product-editor-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2.5) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

[data-pc-theme="dark"] .product-editor-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.product-editor-price-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.product-editor-currency {
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-base);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.product-editor-price {
    border: none;
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.product-editor-price-group:focus-within {
    border-color: var(--primary);
}

.product-editor-price-group:focus-within .product-editor-currency {
    border-color: var(--primary);
    color: var(--primary);
}

.product-editor-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .product-editor-fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-editor-field {
    min-width: 0;
}

.product-editor-file {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.product-editor-file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.product-editor-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.product-editor-file-label:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.product-editor-file-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.product-editor-file-preview {
    margin-top: calc(var(--spacing-unit) * 1);
}

.product-editor-file-preview-item {
    position: relative;
    display: inline-block;
}

.product-editor-file-preview-item img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    object-fit: cover;
}

.product-editor-file-preview-remove {
    position: absolute;
    top: calc(var(--spacing-unit) * -0.5);
    right: calc(var(--spacing-unit) * -0.5);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-elevated);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.product-editor-file-preview-remove:hover {
    opacity: 0.9;
}

.product-editor-file-preview-remove i {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.product-editor-current-image {
    margin-top: calc(var(--spacing-unit) * 1);
}

.product-editor-current-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    object-fit: cover;
}

.product-editor-footer {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.product-editor-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.product-editor-submit:hover {
    opacity: 0.9;
}

.product-editor-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.product-editor-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.product-editor-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE PRODUCT MANAGER === */
@media (max-width: 768px) {
    .product-manager,
    .product-editor {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .product-manager-title,
    .product-editor-title {
        font-size: 1.5rem;
    }

    .product-manager-header,
    .product-editor-header {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .product-item {
        flex-direction: column;
    }

    .product-item-thumb {
        width: 100%;
        height: 200px;
    }

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

    .product-item-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 2);
    }

    .product-editor-fields {
        grid-template-columns: 1fr;
    }

    .product-editor-footer {
        flex-direction: column;
    }

    .product-editor-submit,
    .product-editor-cancel {
        width: 100%;
    }
}

/* === SHIPPING PANEL === */
.shipping-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.shipping-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.shipping-panel-head-main {
    flex: 1;
}

.shipping-panel-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.shipping-panel-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.shipping-panel-add {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.shipping-panel-add:hover {
    opacity: 0.9;
}

.shipping-panel-add i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.shipping-panel-vacant {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.shipping-panel-vacant-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.shipping-panel-vacant-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.shipping-panel-vacant-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.shipping-panel-vacant-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.shipping-panel-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 8px;
    overflow: hidden;
}

.shipping-panel-table {
    width: 100%;
    border-collapse: collapse;
}

.shipping-panel-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.shipping-panel-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shipping-panel-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.shipping-panel-table tbody tr:last-child {
    border-bottom: none;
}

.shipping-panel-table tbody tr:hover {
    background: var(--bg-secondary);
}

.shipping-panel-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.shipping-panel-table-name {
    font-weight: 600;
    color: var(--text-primary);
}

.shipping-panel-table-price {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    font-size: 1rem;
}

.shipping-panel-table-time {
    color: var(--text-secondary);
}

.shipping-panel-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.shipping-panel-table-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.shipping-panel-table-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.shipping-panel-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.shipping-panel-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === SHIPPING FORM PAGE === */
.shipping-form-page {
    max-width: 650px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.shipping-form-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.shipping-form-page-head-main {
    flex: 1;
}

.shipping-form-page-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.shipping-form-page-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.shipping-form-page-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.shipping-form-page-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.shipping-form-page-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.shipping-form-page-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.shipping-form-page-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.shipping-form-page-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.shipping-form-page-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.shipping-form-page-input:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.shipping-form-page-price-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.shipping-form-page-currency {
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-base);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.shipping-form-page-price {
    border: none;
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.shipping-form-page-price-group:focus-within {
    border-color: var(--primary);
}

.shipping-form-page-price-group:focus-within .shipping-form-page-currency {
    border-color: var(--primary);
    color: var(--primary);
}

.shipping-form-page-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.shipping-form-page-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.shipping-form-page-submit:hover {
    opacity: 0.9;
}

.shipping-form-page-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.shipping-form-page-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.shipping-form-page-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE SHIPPING === */
@media (max-width: 768px) {
    .shipping-panel,
    .shipping-form-page {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .shipping-panel-title,
    .shipping-form-page-title {
        font-size: 1.5rem;
    }

    .shipping-panel-head,
    .shipping-form-page-head {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .shipping-panel-table-wrapper {
        overflow-x: auto;
    }

    .shipping-panel-table {
        min-width: 600px;
    }

    .shipping-panel-table th,
    .shipping-panel-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .shipping-form-page-actions {
        flex-direction: column;
    }

    .shipping-form-page-submit,
    .shipping-form-page-cancel {
        width: 100%;
    }
}

/* === CHECKOUT DASHBOARD === */
.checkout-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.checkout-dashboard-header-main {
    flex: 1;
}

.checkout-dashboard-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.checkout-dashboard-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.checkout-dashboard-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.checkout-dashboard-create:hover {
    opacity: 0.9;
}

.checkout-dashboard-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.checkout-dashboard-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.checkout-dashboard-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.checkout-dashboard-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.checkout-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .checkout-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .checkout-dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.checkout-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.checkout-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.checkout-card-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.checkout-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.checkout-card-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--primary);
}

.checkout-card-type-badge {
    padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.checkout-card-body {
    padding: calc(var(--spacing-unit) * 3);
    flex: 1;
}

.checkout-card-info {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.checkout-card-info:last-child {
    margin-bottom: 0;
}

.checkout-card-info-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

.checkout-card-info-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.checkout-card-footer {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.checkout-card-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.checkout-card-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.checkout-card-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.checkout-card-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.checkout-card-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.checkout-card-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === CHECKOUT FORM WRAPPER === */
.checkout-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.checkout-form-wrapper-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.checkout-form-wrapper-header-main {
    flex: 1;
}

.checkout-form-wrapper-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.checkout-form-wrapper-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.checkout-form-wrapper-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.checkout-form-wrapper-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-form-wrapper-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.checkout-form-wrapper-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.checkout-form-wrapper-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.checkout-form-wrapper-field-hidden {
    display: none;
}

.checkout-form-wrapper-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.checkout-form-wrapper-label-small {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.checkout-form-wrapper-input,
.checkout-form-wrapper-select,
.checkout-form-wrapper-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.checkout-form-wrapper-input:focus,
.checkout-form-wrapper-select:focus,
.checkout-form-wrapper-textarea:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-form-wrapper-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.checkout-form-wrapper-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2.5) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

.checkout-form-wrapper-select-multiple {
    min-height: 120px;
    background-image: none;
    padding-right: calc(var(--spacing-unit) * 2.5);
}

[data-pc-theme="dark"] .checkout-form-wrapper-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.checkout-form-wrapper-tracking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.checkout-form-wrapper-field-small {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.75);
}

.checkout-form-wrapper-hint-small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: calc(var(--spacing-unit) * -0.5);
}

@media (max-width: 768px) {
    .checkout-form-wrapper-tracking-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 2);
    }
}

.checkout-form-wrapper-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: calc(var(--spacing-unit) * 0.25);
}

.checkout-form-wrapper-row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .checkout-form-wrapper-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.checkout-form-wrapper-col {
    min-width: 0;
}

.checkout-form-wrapper-color-picker {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.checkout-form-wrapper-color-display {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.checkout-form-wrapper-color-display:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}

.checkout-form-wrapper-color-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.checkout-form-wrapper-image-upload {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.checkout-form-wrapper-file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkout-form-wrapper-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-form-wrapper-file-label:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-form-wrapper-file-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.checkout-form-wrapper-image-preview {
    margin-top: calc(var(--spacing-unit) * 1);
}

.checkout-form-wrapper-image-preview-item {
    position: relative;
    display: inline-block;
}

.checkout-form-wrapper-image-preview-item {
    position: relative;
    display: inline-block;
}

.checkout-form-wrapper-image-preview-item img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    object-fit: cover;
}

.checkout-form-wrapper-image-preview-remove {
    position: absolute;
    top: calc(var(--spacing-unit) * -0.5);
    right: calc(var(--spacing-unit) * -0.5);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-elevated);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.checkout-form-wrapper-image-preview-remove:hover {
    opacity: 0.9;
}

.checkout-form-wrapper-image-preview-remove i {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.checkout-form-wrapper-current-image {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.checkout-form-wrapper-current-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    object-fit: cover;
}

.checkout-form-wrapper-customization {
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.checkout-form-wrapper-customization-hidden {
    display: none;
}

.checkout-form-wrapper-customization-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 3) 0;
}

.checkout-form-wrapper-banners {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .checkout-form-wrapper-banners {
        grid-template-columns: repeat(3, 1fr);
    }
}

.checkout-form-wrapper-banner-item {
    min-width: 0;
}

.checkout-form-wrapper-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.checkout-form-wrapper-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.checkout-form-wrapper-submit:hover:not(:disabled) {
    opacity: 0.9;
}

.checkout-form-wrapper-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-form-wrapper-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-form-wrapper-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.checkout-form-wrapper-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE CHECKOUT === */
@media (max-width: 768px) {
    .checkout-dashboard,
    .checkout-form-wrapper {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .checkout-dashboard-title,
    .checkout-form-wrapper-title {
        font-size: 1.5rem;
    }

    .checkout-dashboard-header,
    .checkout-form-wrapper-header {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .checkout-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .checkout-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-form-wrapper-row,
    .checkout-form-wrapper-banners {
        grid-template-columns: 1fr;
    }

    .checkout-form-wrapper-actions {
        flex-direction: column;
    }

    .checkout-form-wrapper-submit,
    .checkout-form-wrapper-cancel {
        width: 100%;
    }
}

/* === CHECKOUT DASHBOARD EXTENSIONS (Filters, Stats, Table, Modal) === */
.checkout-dashboard-selected-info {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: calc(var(--spacing-unit) * 0.5);
    font-weight: 400;
}

.checkout-dashboard-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    align-items: center;
}

.checkout-dashboard-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-dashboard-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-dashboard-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-dashboard-filters {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    flex-wrap: wrap;
}

.checkout-dashboard-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 400px;
}

.checkout-dashboard-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.checkout-dashboard-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.checkout-dashboard-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-dashboard-filters-dropdown {
    position: relative;
}

.checkout-dashboard-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.checkout-dashboard-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-dashboard-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-dashboard-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.2s;
}

.checkout-dashboard-filters-dropdown.active .checkout-dashboard-filters-chevron {
    transform: rotate(180deg);
}

.checkout-dashboard-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    min-width: 440px;
    max-width: 92vw;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: calc(var(--spacing-unit) * 3);
    z-index: 1000;
    display: none;
}

.checkout-dashboard-filters-dropdown.active .checkout-dashboard-filters-panel {
    display: block;
}

.checkout-dashboard-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.checkout-dashboard-filter-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.checkout-dashboard-filter-select {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-base);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.checkout-dashboard-filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-dashboard-filters-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    justify-content: flex-end;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.checkout-dashboard-filters-reset,
.checkout-dashboard-filters-apply {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.checkout-dashboard-filters-reset {
    background: var(--bg-base);
    border-color: var(--border-base);
    color: var(--text-primary);
}

.checkout-dashboard-filters-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-dashboard-filters-apply {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.checkout-dashboard-filters-apply:hover {
    opacity: 0.9;
}

.checkout-dashboard-filters-reset i,
.checkout-dashboard-filters-apply i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.checkout-dashboard-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.checkout-dashboard-stat-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.checkout-dashboard-stat-content {
    flex: 1;
}

.checkout-dashboard-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.checkout-dashboard-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.checkout-dashboard-stat-separator {
    color: var(--text-secondary);
}

.checkout-dashboard-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.checkout-dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.checkout-dashboard-table thead {
    background: var(--bg-secondary);
}

.checkout-dashboard-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-base);
}

.checkout-dashboard-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-base);
}

.checkout-dashboard-table tbody tr:hover {
    background: var(--bg-secondary);
}

.checkout-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

.checkout-dashboard-table-loading {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.checkout-dashboard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.checkout-dashboard-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.checkout-dashboard-table-empty,
.checkout-dashboard-table-error {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
    color: var(--text-secondary);
}

.checkout-dashboard-table-center {
    text-align: center;
}

.checkout-dashboard-table-actions-cell {
    text-align: center;
}

.checkout-dashboard-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
    justify-content: center;
}

.checkout-dashboard-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
}

.checkout-dashboard-table-action:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.checkout-dashboard-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.checkout-dashboard-table-action-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.checkout-dashboard-icon-active {
    color: var(--primary);
}

.checkout-dashboard-icon-muted {
    color: var(--text-secondary);
    opacity: 0.5;
}

.checkout-dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 1);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.checkout-dashboard-badge-standard {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.checkout-dashboard-badge-custom {
    background: var(--primary);
    color: white;
}

.checkout-dashboard-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.checkout-dashboard-pagination-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.checkout-dashboard-pagination-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.checkout-dashboard-pagination-select {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-dashboard-pagination-select:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-dashboard-pagination-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.checkout-dashboard-pagination-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
}

.checkout-dashboard-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-dashboard-pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-dashboard-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-dashboard-pagination-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.checkout-dashboard-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 2);
}

.checkout-dashboard-modal-overlay.active {
    display: flex;
}

.checkout-dashboard-modal {
    background: var(--bg-base);
    border-radius: 8px;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.checkout-dashboard-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.checkout-dashboard-modal-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
}

.checkout-dashboard-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.checkout-dashboard-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.checkout-dashboard-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.checkout-dashboard-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.checkout-dashboard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-form-column {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.checkout-dashboard-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.checkout-dashboard-form-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.checkout-dashboard-form-required {
    color: #ef4444;
}

.checkout-dashboard-form-input,
.checkout-dashboard-form-select,
.checkout-dashboard-form-textarea {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: inherit;
}

.checkout-dashboard-form-input:focus,
.checkout-dashboard-form-select:focus,
.checkout-dashboard-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-dashboard-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.checkout-dashboard-form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.checkout-dashboard-form-hint-warning {
    color: #f59e0b;
}

.checkout-dashboard-form-switch {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    cursor: pointer;
    position: relative;
}

.checkout-dashboard-form-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkout-dashboard-form-switch-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.checkout-dashboard-form-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.checkout-dashboard-form-checkbox:checked ~ .checkout-dashboard-form-switch-slider {
    background: var(--primary);
    border-color: var(--primary);
}

.checkout-dashboard-form-checkbox:checked ~ .checkout-dashboard-form-switch-slider::before {
    transform: translateX(20px);
}

.checkout-dashboard-form-switch-label {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

.checkout-dashboard-form-color {
    width: 100%;
    height: 40px;
    padding: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkout-dashboard-form-color:focus {
    outline: none;
    border-color: var(--primary);
}

.checkout-dashboard-form-banners {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.checkout-dashboard-form-banner-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.checkout-dashboard-form-preview {
    margin-top: calc(var(--spacing-unit) * 1);
}

.checkout-dashboard-form-preview-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
}

.checkout-dashboard-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

.checkout-dashboard-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.checkout-dashboard-modal-btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-base);
    color: var(--text-primary);
}

.checkout-dashboard-modal-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.checkout-dashboard-modal-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.checkout-dashboard-modal-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.checkout-dashboard-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.checkout-dashboard-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .checkout-dashboard-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-dashboard-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .checkout-dashboard-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .checkout-dashboard-filters-grid {
        grid-template-columns: 1fr;
    }

    .checkout-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .checkout-dashboard-table-wrapper {
        overflow-x: auto;
    }

    .checkout-dashboard-table {
        min-width: 900px;
    }

    .checkout-dashboard-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-dashboard-pagination-info {
        width: 100%;
        justify-content: space-between;
    }

    .checkout-dashboard-modal {
        max-height: 95vh;
        margin: 0;
    }

    .checkout-dashboard-form-grid {
        grid-template-columns: 1fr;
    }
}

/* === ORDERS VIEW === */
.orders-view {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.orders-view-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.orders-view-header-main {
    flex: 1;
}

.orders-view-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.orders-view-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.orders-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.orders-view-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.orders-view-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.orders-view-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.orders-view-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.orders-view-table-container {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.orders-view-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-view-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.orders-view-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.orders-view-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.orders-view-table tbody tr:last-child {
    border-bottom: none;
}

.orders-view-table tbody tr:hover {
    background: var(--bg-secondary);
}

.orders-view-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.orders-view-table-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.orders-view-table-product {
    font-weight: 500;
    color: var(--text-primary);
}

.orders-view-table-checkout {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.orders-view-table-amount {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    font-size: 1rem;
}

.orders-view-table-status {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.orders-view-table-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.orders-view-table-action {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.orders-view-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.orders-view-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === ORDER DETAIL VIEW === */
.order-detail-view {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.order-detail-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.order-detail-view-header-main {
    flex: 1;
}

.order-detail-view-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.order-detail-view-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.order-detail-view-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.order-detail-view-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.order-detail-view-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.order-detail-view-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.order-detail-view-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.order-detail-view-card-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.order-detail-view-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.order-detail-view-card-status {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.order-detail-view-card-body {
    padding: calc(var(--spacing-unit) * 3);
}

.order-detail-view-info-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
    .order-detail-view-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.order-detail-view-info-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.order-detail-view-info-item-full {
    grid-column: 1 / -1;
}

.order-detail-view-info-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-detail-view-info-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.order-detail-view-info-value-amount {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: var(--primary);
}

.order-detail-view-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.order-detail-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.order-detail-view-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.order-detail-view-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* === RESPONSIVE ORDERS === */
@media (max-width: 768px) {
    .orders-view,
    .order-detail-view {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .orders-view-title,
    .order-detail-view-title {
        font-size: 1.5rem;
    }

    .orders-view-table-container {
        overflow-x: auto;
    }

    .orders-view-table {
        min-width: 800px;
    }

    .orders-view-table th,
    .orders-view-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .order-detail-view-info-grid {
        grid-template-columns: 1fr;
    }

    .order-detail-view-actions {
        flex-direction: column;
    }

    .order-detail-view-button {
        width: 100%;
    }
}

/* === BUMP LIST === */
.bump-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.bump-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.bump-list-header-main {
    flex: 1;
}

.bump-list-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.bump-list-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.bump-list-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.bump-list-create:hover {
    opacity: 0.9;
}

.bump-list-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.bump-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.bump-list-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.bump-list-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.bump-list-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.bump-list-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.bump-list-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.bump-list-table {
    width: 100%;
    border-collapse: collapse;
}

.bump-list-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.bump-list-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bump-list-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.bump-list-table tbody tr:last-child {
    border-bottom: none;
}

.bump-list-table tbody tr:hover {
    background: var(--bg-secondary);
}

.bump-list-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.bump-list-table-checkout {
    font-weight: 500;
    color: var(--text-primary);
}

.bump-list-table-product {
    font-weight: 500;
    color: var(--text-primary);
}

.bump-list-table-headline {
    color: var(--text-secondary);
}

.bump-list-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.bump-list-table-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.bump-list-table-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.bump-list-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.bump-list-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === BUMP FORM === */
.bump-form {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.bump-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.bump-form-header-main {
    flex: 1;
}

.bump-form-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.bump-form-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.bump-form-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.bump-form-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.bump-form-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.bump-form-errors {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.bump-form-errors-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.bump-form-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.bump-form-errors-list li {
    color: var(--text-primary);
    font-size: 0.85rem;
    padding-left: calc(var(--spacing-unit) * 2);
    position: relative;
}

.bump-form-errors-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.bump-form-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.bump-form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.bump-form-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.bump-form-input,
.bump-form-select,
.bump-form-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.bump-form-input:focus,
.bump-form-select:focus,
.bump-form-textarea:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.bump-form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.bump-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2.5) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

[data-pc-theme="dark"] .bump-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.bump-form-footer {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.bump-form-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.bump-form-submit:hover {
    opacity: 0.9;
}

.bump-form-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.bump-form-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.bump-form-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE BUMP === */
@media (max-width: 768px) {
    .bump-list,
    .bump-form {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .bump-list-title,
    .bump-form-title {
        font-size: 1.5rem;
    }

    .bump-list-header,
    .bump-form-header {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .bump-list-table-wrapper {
        overflow-x: auto;
    }

    .bump-list-table {
        min-width: 600px;
    }

    .bump-list-table th,
    .bump-list-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .bump-form-footer {
        flex-direction: column;
    }

    .bump-form-submit,
    .bump-form-cancel {
        width: 100%;
    }
}

/* === UPSELL MANAGER === */
.upsell-manager {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.upsell-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.upsell-manager-header-main {
    flex: 1;
}

.upsell-manager-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.upsell-manager-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.upsell-manager-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.upsell-manager-create:hover {
    opacity: 0.9;
}

.upsell-manager-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.upsell-manager-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.upsell-manager-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.upsell-manager-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.upsell-manager-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.upsell-manager-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.upsell-manager-list-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.upsell-manager-list {
    width: 100%;
    border-collapse: collapse;
}

.upsell-manager-list thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.upsell-manager-list th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.upsell-manager-list tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.upsell-manager-list tbody tr:last-child {
    border-bottom: none;
}

.upsell-manager-list tbody tr:hover {
    background: var(--bg-secondary);
}

.upsell-manager-list td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.upsell-manager-list-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.upsell-manager-list-checkout {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.upsell-manager-list-product {
    font-weight: 500;
    color: var(--text-primary);
}

.upsell-manager-list-headline {
    color: var(--text-secondary);
}

.upsell-manager-list-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.upsell-manager-list-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.upsell-manager-list-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.upsell-manager-list-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.upsell-manager-list-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === UPSELL EDITOR === */
.upsell-editor {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.upsell-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.upsell-editor-header-main {
    flex: 1;
}

.upsell-editor-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.upsell-editor-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.upsell-editor-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.upsell-editor-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.upsell-editor-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.upsell-editor-errors {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.upsell-editor-errors-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.upsell-editor-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.upsell-editor-errors-list li {
    color: var(--text-primary);
    font-size: 0.85rem;
    padding-left: calc(var(--spacing-unit) * 2);
    position: relative;
}

.upsell-editor-errors-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.upsell-editor-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.upsell-editor-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.upsell-editor-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.upsell-editor-input,
.upsell-editor-select,
.upsell-editor-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.upsell-editor-input:focus,
.upsell-editor-select:focus,
.upsell-editor-textarea:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.upsell-editor-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.upsell-editor-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2.5) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

[data-pc-theme="dark"] .upsell-editor-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.upsell-editor-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.upsell-editor-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.upsell-editor-submit:hover {
    opacity: 0.9;
}

.upsell-editor-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.upsell-editor-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.upsell-editor-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE UPSELL === */
@media (max-width: 768px) {
    .upsell-manager,
    .upsell-editor {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .upsell-manager-title,
    .upsell-editor-title {
        font-size: 1.5rem;
    }

    .upsell-manager-header,
    .upsell-editor-header {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .upsell-manager-list-wrapper {
        overflow-x: auto;
    }

    .upsell-manager-list {
        min-width: 600px;
    }

    .upsell-manager-list th,
    .upsell-manager-list td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .upsell-editor-actions {
        flex-direction: column;
    }

    .upsell-editor-submit,
    .upsell-editor-cancel {
        width: 100%;
    }
}

/* === DOWNSELL PANEL === */
.downsell-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.downsell-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.downsell-panel-header-main {
    flex: 1;
}

.downsell-panel-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.downsell-panel-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.downsell-panel-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.downsell-panel-create:hover {
    opacity: 0.9;
}

.downsell-panel-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.downsell-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.downsell-panel-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.downsell-panel-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.downsell-panel-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.downsell-panel-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.downsell-panel-list-container {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.downsell-panel-list {
    width: 100%;
    border-collapse: collapse;
}

.downsell-panel-list thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.downsell-panel-list th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.downsell-panel-list tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.downsell-panel-list tbody tr:last-child {
    border-bottom: none;
}

.downsell-panel-list tbody tr:hover {
    background: var(--bg-secondary);
}

.downsell-panel-list td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.downsell-panel-list-checkout {
    font-weight: 500;
    color: var(--text-primary);
}

.downsell-panel-list-product {
    font-weight: 500;
    color: var(--text-primary);
}

.downsell-panel-list-headline {
    color: var(--text-secondary);
}

.downsell-panel-list-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.downsell-panel-list-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.downsell-panel-list-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.downsell-panel-list-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.downsell-panel-list-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === DOWNSELL FORM PAGE === */
.downsell-form-page {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.downsell-form-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.downsell-form-page-header-main {
    flex: 1;
}

.downsell-form-page-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.downsell-form-page-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.downsell-form-page-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.downsell-form-page-back:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.downsell-form-page-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.downsell-form-page-errors {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.downsell-form-page-errors-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.downsell-form-page-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.downsell-form-page-errors-list li {
    color: var(--text-primary);
    font-size: 0.85rem;
    padding-left: calc(var(--spacing-unit) * 2);
    position: relative;
}

.downsell-form-page-errors-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.downsell-form-page-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.downsell-form-page-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.downsell-form-page-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
}

.downsell-form-page-input,
.downsell-form-page-select,
.downsell-form-page-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.downsell-form-page-input:focus,
.downsell-form-page-select:focus,
.downsell-form-page-textarea:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.downsell-form-page-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.downsell-form-page-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing-unit) * 2.5) center;
    background-size: 12px;
    padding-right: calc(var(--spacing-unit) * 5);
}

[data-pc-theme="dark"] .downsell-form-page-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.downsell-form-page-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.downsell-form-page-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.downsell-form-page-submit:hover {
    opacity: 0.9;
}

.downsell-form-page-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.downsell-form-page-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.downsell-form-page-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE DOWNSELL === */
@media (max-width: 768px) {
    .downsell-panel,
    .downsell-form-page {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .downsell-panel-title,
    .downsell-form-page-title {
        font-size: 1.5rem;
    }

    .downsell-panel-header,
    .downsell-form-page-header {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .downsell-panel-list-container {
        overflow-x: auto;
    }

    .downsell-panel-list {
        min-width: 600px;
    }

    .downsell-panel-list th,
    .downsell-panel-list td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .downsell-form-page-actions {
        flex-direction: column;
    }

    .downsell-form-page-submit,
    .downsell-form-page-cancel {
        width: 100%;
    }
}

/* === ABANDONED CARTS === */
.abandoned-carts {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.abandoned-carts-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.abandoned-carts-header-main {
    flex: 1;
}

.abandoned-carts-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.abandoned-carts-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.abandoned-carts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.abandoned-carts-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.abandoned-carts-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.abandoned-carts-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.abandoned-carts-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

.abandoned-carts-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.abandoned-carts-table {
    width: 100%;
    border-collapse: collapse;
}

.abandoned-carts-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.abandoned-carts-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.abandoned-carts-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.abandoned-carts-table tbody tr:last-child {
    border-bottom: none;
}

.abandoned-carts-table tbody tr:hover {
    background: var(--bg-secondary);
}

.abandoned-carts-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.abandoned-carts-table-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.abandoned-carts-table-client {
    font-weight: 500;
    color: var(--text-primary);
}

.abandoned-carts-table-phone {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.abandoned-carts-table-amount {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    font-size: 1rem;
}

.abandoned-carts-table-status {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.abandoned-carts-table-status-abandoned {
    border-color: var(--primary);
    color: var(--primary);
}

.abandoned-carts-table-status-recovered {
    color: var(--text-secondary);
}

.abandoned-carts-table-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.abandoned-carts-table-action {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.abandoned-carts-table-action-recover {
    background: var(--primary);
    color: white;
}

.abandoned-carts-table-action-recover:hover {
    opacity: 0.9;
}

.abandoned-carts-table-action-disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.abandoned-carts-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* === RESPONSIVE ABANDONED CARTS === */
@media (max-width: 768px) {
    .abandoned-carts {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .abandoned-carts-title {
        font-size: 1.5rem;
    }

    .abandoned-carts-table-wrapper {
        overflow-x: auto;
    }

    .abandoned-carts-table {
        min-width: 800px;
    }

    .abandoned-carts-table th,
    .abandoned-carts-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .abandoned-carts-table-action {
        padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
        font-size: 0.8rem;
    }
}

/* === DOMAINS PAGE === */
.domains-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.domains-page-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.domains-page-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.domains-page-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.domains-page-tabs {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.domains-page-tab {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    bottom: -1px;
}

.domains-page-tab:hover {
    color: var(--text-primary);
}

.domains-page-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.domains-page-tab i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.domains-page-content {
    position: relative;
}

.domains-page-pane {
    display: none;
}

.domains-page-pane.active {
    display: block;
}

.domains-page-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.domains-page-pane-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
}

.domains-page-add {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.domains-page-add:hover {
    opacity: 0.9;
}

.domains-page-add i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.domains-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.domains-page-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--primary);
    border-radius: 50%;
}

.domains-page-empty-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.domains-page-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.domains-page-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.domains-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
}

.domains-page-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.domains-page-card-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.domains-page-card-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.domains-page-card-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--primary);
}

.domains-page-card-body {
    padding: calc(var(--spacing-unit) * 3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.domains-page-card-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.domains-page-card-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.domains-page-card-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.domains-page-card-status {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.domains-page-card-status-verified {
    background: var(--bg-secondary);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.domains-page-card-status-pending {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-base);
}

.domains-page-card-footer {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.domains-page-card-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.domains-page-card-delete-form {
    margin: 0;
    padding: 0;
}

.domains-page-card-delete {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.domains-page-card-delete:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.domains-page-card-delete i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.domains-page-tutorial {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.domains-page-tutorial-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.domains-page-tutorial-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0;
}

.domains-page-tutorial-title i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: var(--primary);
}

.domains-page-tutorial-body {
    padding: calc(var(--spacing-unit) * 4);
}

.domains-page-tutorial-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}

.domains-page-code {
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 4px;
    padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.75);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: var(--primary);
}

.domains-page-tutorial-list {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    padding-left: calc(var(--spacing-unit) * 3);
}

.domains-page-tutorial-list li {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.domains-page-tutorial-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* === DOMAINS MODAL === */
.domains-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.domains-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.domains-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.domains-modal-overlay.active .domains-modal {
    transform: scale(1);
}

.domains-modal-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.domains-modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0;
}

.domains-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.domains-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.domains-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.domains-modal-form {
    display: flex;
    flex-direction: column;
}

.domains-modal-body {
    padding: calc(var(--spacing-unit) * 3);
}

.domains-modal-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.domains-modal-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.domains-modal-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
}

.domains-modal-input:focus {
    border-color: var(--primary);
    color: var(--primary);
}

.domains-modal-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: calc(var(--spacing-unit) * 0.5);
}

.domains-modal-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.domains-modal-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.domains-modal-submit:hover {
    opacity: 0.9;
}

.domains-modal-submit i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.domains-modal-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.domains-modal-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === RESPONSIVE DOMAINS === */
@media (max-width: 768px) {
    .domains-page {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .domains-page-title {
        font-size: 1.5rem;
    }

    .domains-page-tabs {
        flex-direction: column;
        gap: 0;
    }

    .domains-page-tab {
        width: 100%;
        justify-content: flex-start;
        border-bottom: 1px solid var(--border-base);
        border-left: 2px solid transparent;
        bottom: 0;
    }

    .domains-page-tab.active {
        border-left-color: var(--primary);
        border-bottom-color: var(--border-base);
    }

    .domains-page-pane-header {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 2);
    }

    .domains-page-add {
        width: 100%;
        justify-content: center;
    }

    .domains-page-grid {
        grid-template-columns: 1fr;
    }

    .domains-page-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .domains-modal-footer {
        flex-direction: column;
    }

    .domains-modal-submit,
    .domains-modal-cancel {
        width: 100%;
    }
}

/* ============================================
   PAYMENT LINK - CREATE
   ============================================ */
.payment-link-creator {
    max-width: 800px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.payment-link-creator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.payment-link-creator-header-main {
    flex: 1;
}

.payment-link-creator-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-link-creator-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.payment-link-creator-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.payment-link-creator-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-link-creator-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-link-creator-errors {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-link-creator-errors-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.payment-link-creator-errors-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.payment-link-creator-errors-list li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: calc(var(--spacing-unit) * 0.5) 0;
}

.payment-link-creator-form {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.payment-link-creator-field {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-link-creator-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.payment-link-creator-label-optional {
    color: var(--text-muted);
    font-weight: 400;
}

.payment-link-creator-input,
.payment-link-creator-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.payment-link-creator-input:focus,
.payment-link-creator-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-link-creator-textarea {
    resize: vertical;
    min-height: 100px;
}

.payment-link-creator-amount-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    overflow: hidden;
}

.payment-link-creator-amount-currency {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    border-right: 1px solid var(--border-base);
}

.payment-link-creator-amount-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
}

.payment-link-creator-amount-input:focus {
    outline: none;
}

.payment-link-creator-amount-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-link-creator-image-upload {
    position: relative;
}

.payment-link-creator-image-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment-link-creator-image-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
    border: 2px dashed var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.payment-link-creator-image-label:hover {
    border-color: var(--primary);
    background: var(--bg-elevated);
    color: var(--primary);
}

.payment-link-creator-image-label i {
    width: 32px;
    height: 32px;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    stroke-width: 2;
}

.payment-link-creator-image-preview {
    margin-top: calc(var(--spacing-unit) * 2);
}

.payment-link-creator-image-preview-item {
    position: relative;
    display: inline-block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
}

.payment-link-creator-image-preview-img {
    display: block;
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
}

.payment-link-creator-image-preview-remove {
    position: absolute;
    top: calc(var(--spacing-unit) * 1);
    right: calc(var(--spacing-unit) * 1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-link-creator-image-preview-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

.payment-link-creator-image-preview-remove i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-link-creator-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 5);
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

.payment-link-creator-submit {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-link-creator-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.payment-link-creator-submit i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-link-creator-cancel {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-link-creator-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.hidden-message {
    display: none;
}

@media (max-width: 768px) {
    .payment-link-creator {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .payment-link-creator-title {
        font-size: 1.5rem;
    }

    .payment-link-creator-actions {
        flex-direction: column;
    }

    .payment-link-creator-submit,
    .payment-link-creator-cancel {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PAYMENT LINK - SHOW
   ============================================ */
.payment-link-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.payment-link-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.payment-link-detail-header-main {
    flex: 1;
}

.payment-link-detail-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-link-detail-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.payment-link-detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.payment-link-detail-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-link-detail-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-link-detail-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.payment-link-detail-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.payment-link-detail-card-header {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.payment-link-detail-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
}

.payment-link-detail-card-body {
    padding: calc(var(--spacing-unit) * 4);
}

.payment-link-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-link-detail-info-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.payment-link-detail-info-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.payment-link-detail-info-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.payment-link-detail-info-value-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    color: var(--primary);
}

.payment-link-detail-image-section {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-link-detail-image-wrapper {
    margin-top: calc(var(--spacing-unit) * 2);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
}

.payment-link-detail-image {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: cover;
}

.payment-link-detail-description-section {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

.payment-link-detail-description {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    margin: calc(var(--spacing-unit) * 2) 0 0 0;
}

.payment-link-detail-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-link-detail-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-link-detail-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-link-detail-button i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .payment-link-detail {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .payment-link-detail-title {
        font-size: 1.5rem;
    }

    .payment-link-detail-info-grid {
        grid-template-columns: 1fr;
    }

    .payment-link-detail-actions {
        flex-direction: column;
    }

    .payment-link-detail-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PAYMENT LINKS - INDEX
   ============================================ */
.payment-links-manager {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.payment-links-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.payment-links-manager-header-main {
    flex: 1;
}

.payment-links-manager-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-links-manager-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.payment-links-manager-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-links-manager-create {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-links-manager-create:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.payment-links-manager-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-links-manager-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.payment-links-manager-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-links-manager-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-links-manager-content {
    display: flex;
    flex-direction: column;
}

.payment-links-manager-list-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.payment-links-manager-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.payment-links-manager-list-header-main {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.payment-links-manager-list-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
}

.payment-links-manager-list-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.payment-links-manager-list-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.payment-links-manager-list-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.payment-links-manager-list-create {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-links-manager-list-create:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-links-manager-list-create i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-links-manager-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
    text-align: center;
}

.payment-links-manager-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-links-manager-empty-icon i {
    width: 56px;
    height: 56px;
    stroke-width: 2;
}

.payment-links-manager-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.payment-links-manager-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.payment-links-manager-list {
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.payment-links-manager-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    transition: all 0.2s;
}

.payment-links-manager-item:hover {
    border-color: var(--primary);
    background: var(--bg-elevated);
}

.payment-links-manager-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-links-manager-item-main {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    flex: 1;
    min-width: 0;
}

.payment-links-manager-item-image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-links-manager-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.payment-links-manager-item-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.payment-links-manager-item-image-placeholder i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.payment-links-manager-item-content {
    flex: 1;
    min-width: 0;
}

.payment-links-manager-item-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 1) 0;
}

.payment-links-manager-item-price {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.payment-links-manager-item-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

.payment-links-manager-item-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    flex-shrink: 0;
}

.payment-links-manager-item-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.payment-links-manager-item-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-links-manager-item-action-danger {
    border: 1px solid var(--border-base);
    background: var(--bg-elevated);
    color: white;
}

.payment-links-manager-item-action-danger:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-links-manager-item-action-danger i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: white;
}

.payment-links-manager-item-action-danger:hover i {
    color: var(--primary);
}

.payment-links-manager-item-action-form {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.payment-links-manager-item-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-links-manager-item-dropdown {
    position: relative;
}

.payment-links-manager-item-dropdown-menu {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 0.5));
    right: 0;
    min-width: 200px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing-unit) * 1);
    display: none;
    z-index: 100;
}

.payment-links-manager-item-dropdown-menu.active {
    display: block;
}

.payment-links-manager-item-dropdown-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: calc(var(--radius) * 0.75);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: left;
}

.payment-links-manager-item-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.payment-links-manager-item-dropdown-item-danger {
    color: var(--text-secondary);
}

.payment-links-manager-item-dropdown-item-danger:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.payment-links-manager-item-dropdown-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-links-manager-item-dropdown-divider {
    height: 1px;
    background: var(--border-base);
    margin: calc(var(--spacing-unit) * 0.5) 0;
}

.payment-links-manager-item-dropdown-form {
    margin: 0;
    padding: 0;
}

.payment-links-manager-item-url {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.payment-links-manager-item-url-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
}

.payment-links-manager-item-url-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.payment-links-manager-item-url-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-links-manager-item-url-copy i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-links-manager-sidebar {
    display: flex;
    flex-direction: column;
}

.payment-links-manager-guide {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    position: sticky;
    top: calc(var(--spacing-unit) * 4);
}

.payment-links-manager-guide-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-links-manager-guide-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    margin: 0 auto calc(var(--spacing-unit) * 3) auto;
}

.payment-links-manager-guide-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.payment-links-manager-guide-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-links-manager-guide-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.payment-links-manager-guide-steps {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-links-manager-guide-step {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-links-manager-guide-step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.payment-links-manager-guide-step-number i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-links-manager-guide-step-content {
    flex: 1;
}

.payment-links-manager-guide-step-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.payment-links-manager-guide-step-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.5;
}

.payment-links-manager-guide-features {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.payment-links-manager-guide-features-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}

.payment-links-manager-guide-features-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.payment-links-manager-guide-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.payment-links-manager-guide-features-list li {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.payment-links-manager-guide-features-list li i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
}

.payment-links-manager-guide-cta {
    margin-top: calc(var(--spacing-unit) * 4);
}

.payment-links-manager-create-full {
    width: 100%;
    justify-content: center;
}


@media (max-width: 768px) {
    .payment-links-manager {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .payment-links-manager-title {
        font-size: 1.5rem;
    }

    .payment-links-manager-header {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 2);
    }

    .payment-links-manager-actions {
        width: 100%;
        justify-content: space-between;
    }

    .payment-links-manager-create {
        flex: 1;
        justify-content: center;
    }

    .payment-links-manager-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .payment-links-manager-item-main {
        width: 100%;
    }

    .payment-links-manager-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================
   PAYMENT HISTORY
   ============================================ */
.payment-history {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.payment-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.payment-history-header-main {
    flex: 1;
}

.payment-history-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-history-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.payment-history-header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-history-header-action {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-history-header-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-header-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-history-header-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.payment-history-header-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-header-back i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.payment-history-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 3);
}

.payment-history-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.payment-history-stat-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.payment-history-stat-content {
    flex: 1;
}

.payment-history-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.payment-history-stat-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.payment-history-stat-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.payment-history-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.payment-history-search-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    overflow: hidden;
}

.payment-history-search-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--text-muted);
    margin-left: calc(var(--spacing-unit) * 2.5);
    flex-shrink: 0;
}

.payment-history-search-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.payment-history-search-input:focus {
    outline: none;
}

.payment-history-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-left: 1px solid var(--border-base);
    background: var(--primary);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-history-search-button:hover {
    opacity: 0.9;
}

.payment-history-search-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-history-search-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-history-filter {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-history-filter-group {
    flex: 1;
}

.payment-history-filter-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.payment-history-filter-dates {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.payment-history-filter-date {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

.payment-history-filter-date:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-history-filter-select {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}

.payment-history-filter-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-history-filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.payment-history-filter-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-filter-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-history-table-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.payment-history-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.payment-history-table-header-main {
    flex: 1;
}

.payment-history-table-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.payment-history-table-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.payment-history-table-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-history-table-action {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-history-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-table-action-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.payment-history-table-action-primary:hover {
    opacity: 0.9;
    color: white;
}

.payment-history-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-history-table-wrapper {
    overflow-x: auto;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
}

.payment-history-table thead {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-base);
}

.payment-history-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.payment-history-table tbody tr {
    border-bottom: 1px solid var(--border-base);
    transition: background 0.2s;
}

.payment-history-table tbody tr:last-child {
    border-bottom: none;
}

.payment-history-table tbody tr:hover {
    background: var(--bg-secondary);
}

.payment-history-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    color: var(--text-primary);
    font-size: 0.9rem;
    vertical-align: middle;
}

.payment-history-table-client {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.payment-history-table-client-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.payment-history-table-client-info {
    flex: 1;
    min-width: 0;
}

.payment-history-table-client-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.payment-history-table-client-id {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.payment-history-table-contact {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.payment-history-table-contact-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.payment-history-table-contact-item i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
}

.payment-history-table-contact-item span {
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.payment-history-table-contact-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.payment-history-table-contact-copy:hover {
    color: var(--primary);
}

.payment-history-table-contact-copy i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.payment-history-table-contact-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.payment-history-table-transaction {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.payment-history-table-transaction-id {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

.payment-history-table-transaction-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.payment-history-table-transaction-copy:hover {
    color: var(--primary);
}

.payment-history-table-transaction-copy i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.payment-history-table-transaction-method {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.payment-history-table-transaction-method i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.payment-history-table-amount {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.payment-history-table-amount-value {
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
}

.payment-history-table-amount-fee {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.payment-history-table-status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.payment-history-table-status i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.payment-history-table-status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.payment-history-table-status-completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.payment-history-table-status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.payment-history-table-date {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.payment-history-table-date-day {
    color: var(--text-primary);
    font-weight: 500;
}

.payment-history-table-date-time {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.payment-history-table-row-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.payment-history-table-row-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.payment-history-table-row-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-table-row-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-history-table-empty {
    text-align: center;
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
}

.payment-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.payment-history-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-history-empty-icon i {
    width: 56px;
    height: 56px;
    stroke-width: 2;
}

.payment-history-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.payment-history-empty-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
    max-width: 400px;
    line-height: 1.6;
}

.payment-history-empty-action {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.payment-history-empty-action:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.payment-history-empty-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-history-pagination {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: center;
}

.payment-history-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: calc(var(--spacing-unit) * 3);
    overflow-y: auto;
}

.payment-history-modal-overlay.active {
    display: flex;
}

.payment-history-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.payment-history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--primary);
    color: white;
}

.payment-history-modal-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

.payment-history-modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-history-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-history-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.payment-history-modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-history-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    overflow-y: auto;
    flex: 1;
}

.payment-history-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
}

.payment-history-modal-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
}

.payment-history-modal-section-full {
    grid-column: 1 / -1;
}

.payment-history-modal-section-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 3) 0;
}

.payment-history-modal-section-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.payment-history-modal-section-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.payment-history-modal-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.payment-history-modal-field-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.payment-history-modal-field-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.payment-history-modal-field-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.payment-history-modal-field-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.payment-history-modal-field-action:hover {
    opacity: 0.7;
}

.payment-history-modal-field-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-history-modal-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
}

.payment-history-modal-value-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.payment-history-modal-value-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.payment-history-modal-value-amount {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'JetBrains Mono', monospace;
}

.payment-history-modal-value-fee {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
}

.payment-history-modal-value-net {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
}

.payment-history-modal-notes {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.payment-history-modal-footer {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.payment-history-modal-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.payment-history-modal-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-history-modal-button-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.payment-history-modal-button-primary:hover {
    opacity: 0.9;
    color: white;
}

.payment-history-modal-button-success {
    background: var(--bg-elevated);
    border-color: var(--border-base);
}

.payment-history-modal-button-success:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.payment-history-modal-button i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

@media (max-width: 768px) {
    .payment-history {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .payment-history-title {
        font-size: 1.5rem;
    }

    .payment-history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 2);
    }

    .payment-history-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .payment-history-stats {
        grid-template-columns: 1fr;
    }

    .payment-history-filters {
        grid-template-columns: 1fr;
    }

    .payment-history-table-wrapper {
        overflow-x: auto;
    }

    .payment-history-table {
        min-width: 1000px;
    }

    .payment-history-table th,
    .payment-history-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .payment-history-modal-grid {
        grid-template-columns: 1fr;
    }

    .payment-history-modal-footer {
        flex-direction: column;
    }

    .payment-history-modal-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PAYMENT PUBLIC
   ============================================ */
.payment-public {
    min-height: 100vh;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
}

.payment-public-header {
    background: var(--primary);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    text-align: center;
}

.payment-public-header-logo img {
    max-height: 40px;
    width: auto;
}

.payment-public-container {
    max-width: 420px;
    margin: calc(var(--spacing-unit) * 3) auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
}

.payment-public-store-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-public-secure-badge {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.payment-public-product {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-public-product-image {
    width: 100px;
    height: 100px;
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-public-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.payment-public-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.payment-public-product-image-placeholder i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.payment-public-product-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.payment-public-product-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.payment-public-product-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.payment-public-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-public-method-item {
    text-align: center;
}

.payment-public-method-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    margin: 0 auto calc(var(--spacing-unit) * 1) auto;
}

.payment-public-method-icon i {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: var(--text-primary);
}

.payment-public-method-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.payment-public-summary {
    max-width: 420px;
    margin: calc(var(--spacing-unit) * 3) auto;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    text-align: center;
}

.payment-public-summary-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}

.payment-public-summary-amount {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 3) 0;
}

.payment-public-summary-field {
    margin-bottom: calc(var(--spacing-unit) * 3);
    text-align: left;
}

.payment-public-summary-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.payment-public-summary-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.payment-public-summary-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-public-summary-button {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-public-summary-button:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.payment-public-summary-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.payment-public-description {
    max-width: 420px;
    margin: calc(var(--spacing-unit) * 3) auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-base);
}

.payment-public-description-header {
    background: var(--primary);
    color: white;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

.payment-public-description-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.payment-public-description-body {
    background: var(--bg-elevated);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
}

.payment-public-description-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

.payment-public-footer {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    margin-top: auto;
}

.payment-public-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: calc(var(--spacing-unit) * 3);
    overflow-y: auto;
}

.payment-public-modal-overlay.active {
    display: flex;
}

.payment-public-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.payment-public-modal-large {
    max-width: 600px;
}

.payment-public-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--primary);
    color: white;
}

.payment-public-modal-title {
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

.payment-public-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-public-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.payment-public-modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.payment-public-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    overflow-y: auto;
    flex: 1;
}

.payment-public-modal-form {
    display: flex;
    flex-direction: column;
}

.payment-public-modal-field {
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-public-modal-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.payment-public-modal-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.payment-public-modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-public-modal-footer {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    background: var(--bg-secondary);
}

.payment-public-modal-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-public-modal-submit:hover {
    opacity: 0.9;
}

.payment-public-modal-submit i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.payment-public-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
    text-align: center;
}

.payment-public-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

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

.payment-public-loading-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.payment-public-hidden {
    display: none !important;
}

.payment-public-qr {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.payment-public-qr-code {
    text-align: center;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.payment-public-qr-image {
    max-width: 250px;
    width: 100%;
    height: auto;
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
    display: block;
}

.payment-public-qr-amount {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.payment-public-qr-amount strong {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.payment-public-qr-amount span {
    color: var(--primary);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.payment-public-qr-pix {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.payment-public-qr-pix-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
}

.payment-public-qr-pix-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.payment-public-qr-pix-code {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    resize: none;
}

.payment-public-qr-pix-code:focus {
    outline: none;
    border-color: var(--primary);
}

.payment-public-qr-pix-copy {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.payment-public-qr-pix-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.payment-public-qr-pix-copy i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.payment-public-qr-pix-notification {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    display: none;
}

.payment-public-qr-pix-notification.active {
    display: block;
}

.payment-public-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.payment-public-success-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.payment-public-success-icon i {
    width: 48px;
    height: 48px;
    stroke-width: 2;
}

.payment-public-success-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
}

.payment-public-receipt {
    width: 100%;
    max-width: 400px;
    background: var(--bg-secondary);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
    text-align: left;
    margin-top: calc(var(--spacing-unit) * 3);
}

.payment-public-receipt-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 calc(var(--spacing-unit) * 3) 0;
}

.payment-public-receipt-data {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.payment-public-receipt-item {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.payment-public-receipt-item strong {
    display: inline-block;
    min-width: 120px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .payment-public-container,
    .payment-public-summary,
    .payment-public-description {
        margin-left: calc(var(--spacing-unit) * 2);
        margin-right: calc(var(--spacing-unit) * 2);
    }

    .payment-public-modal {
        max-width: 100%;
        margin: calc(var(--spacing-unit) * 2);
    }

    .payment-public-qr-pix-wrapper {
        flex-direction: column;
    }

    .payment-public-qr-pix-copy {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   APP LAYOUT - LOADER
   ============================================ */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.app-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.app-loader-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-loader-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.app-loader-logo-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
}

.app-loader-logo-placeholder i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.app-loader-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.app-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   APP LAYOUT - SIDEBAR
   ============================================ */
.app-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.app-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-base);
    z-index: 1050;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    transform: translateX(0);
}

.app-sidebar-brand {
    padding: calc(var(--spacing-unit) * 3);
    text-align: center;
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.app-sidebar-brand a {
    display: inline-block;
}

.app-sidebar-brand img {
    max-height: 40px;
    width: auto;
}

.app-sidebar-brand-placeholder {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
}

.app-sidebar-brand-placeholder i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.app-sidebar-profile {
    margin: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--primary);
    border-radius: var(--radius);
    color: white;
    text-align: center;
    flex-shrink: 0;
}

.app-sidebar-profile-avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
}

.app-sidebar-profile-avatar i {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: white;
}

.app-sidebar-profile-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.app-sidebar-profile-email {
    font-size: 0.8rem;
    opacity: 0.9;
}

.app-sidebar-nav-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(var(--spacing-unit) * 2) 0;
}

.app-sidebar-nav-container::-webkit-scrollbar {
    width: 4px;
}

.app-sidebar-nav-container::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar-nav-container::-webkit-scrollbar-thumb {
    background: var(--border-base);
    border-radius: 2px;
}

.app-sidebar-nav-container:hover::-webkit-scrollbar-thumb {
    background: var(--primary);
}

.app-sidebar-nav {
    padding: 0;
    list-style: none;
}

.app-sidebar-nav-item {
    margin: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 2);
}

.app-sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
}

.app-sidebar-nav-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.app-sidebar-nav-link.active {
    background: var(--primary);
    color: white;
}

.app-sidebar-nav-icon {
    width: 20px;
    height: 20px;
    margin-right: calc(var(--spacing-unit) * 1.75);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-sidebar-nav-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.app-sidebar-nav-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
}

.app-sidebar-nav-badge-info {
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.65rem;
}

.app-sidebar-nav-toggle {
    cursor: pointer;
}

.app-sidebar-nav-chevron {
    margin-left: auto;
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-sidebar-nav-chevron i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.app-sidebar-nav-chevron.rotated {
    transform: rotate(90deg);
}

.app-sidebar-nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-secondary);
    margin: calc(var(--spacing-unit) * 0.5) 0;
    border-radius: var(--radius);
}

.app-sidebar-nav-submenu.active {
    max-height: 500px;
}

.app-sidebar-nav-submenu .app-sidebar-nav-link {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 6);
    font-size: 0.85rem;
    background: transparent;
}

.app-sidebar-nav-submenu .app-sidebar-nav-link:hover {
    background: var(--bg-elevated);
}

.app-sidebar-nav-submenu .app-sidebar-nav-link.active {
    background: var(--primary);
    color: white;
}

.app-sidebar-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    background: var(--bg-elevated);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.app-sidebar-footer-profile {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex: 1;
    min-width: 0;
}

.app-sidebar-footer-profile-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    flex-shrink: 0;
    border: 1px solid var(--border-base);
    overflow: hidden;
}

.app-sidebar-footer-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-sidebar-footer-profile-avatar i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.app-sidebar-footer-profile-info {
    flex: 1;
    min-width: 0;
}

.app-sidebar-footer-profile-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-footer-profile-email {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-footer {
    position: relative;
}

.app-sidebar-footer-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.app-sidebar-footer-menu:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.app-sidebar-footer-menu i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.app-sidebar-footer-dropdown {
    position: absolute;
    bottom: calc(100% + calc(var(--spacing-unit) * 0.5));
    left: calc(var(--spacing-unit) * 3);
    right: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing-unit) * 1);
    display: none;
    z-index: 1000;
}

.app-sidebar-footer-dropdown.active {
    display: block;
}

.app-sidebar-footer-dropdown-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: calc(var(--radius) * 0.75);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.app-sidebar-footer-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.app-sidebar-footer-dropdown-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.app-sidebar-footer-dropdown-divider {
    height: 1px;
    background: var(--border-base);
    margin: calc(var(--spacing-unit) * 0.5) 0;
}

/* ============================================
   APP LAYOUT - HEADER
   ============================================ */
.app-header {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    height: 64px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--spacing-unit) * 4);
    z-index: 999;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.app-header-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    align-items: center;
    justify-content: center;
}

.app-header-menu-btn:hover {
    background: var(--bg-elevated);
    color: var(--primary);
}

.app-header-menu-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.app-header-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.app-header-impersonate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin: 0 calc(var(--spacing-unit) * 4);
}

.app-header-impersonate-content {
    flex: 1;
}

.app-header-impersonate-content span {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.app-header-impersonate-form {
    margin: 0;
    padding: 0;
}

.app-header-impersonate-btn {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.app-header-impersonate-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.app-header-action-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-header-action-btn:hover {
    background: var(--primary);
    color: white;
}

.app-header-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.app-header-action-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-elevated);
}

.app-header-dropdown {
    position: relative;
}

.app-header-dropdown-menu {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 0.5));
    right: 0;
    min-width: 200px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing-unit) * 1);
    display: none;
    z-index: 1000;
}

.app-header-dropdown-menu.active {
    display: block;
}

.app-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: calc(var(--radius) * 0.75);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.app-header-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.app-header-dropdown-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.app-header-dropdown-divider {
    height: 1px;
    background: var(--border-base);
    margin: calc(var(--spacing-unit) * 0.5) 0;
}

/* ============================================
   APP LAYOUT - MAIN CONTENT
   ============================================ */
.app-main {
    margin-left: 280px;
    margin-top: 64px;
    min-height: calc(100vh - 64px);
    background: var(--bg-surface);
}

/* ============================================
   APP LAYOUT - BOTTOM NAVIGATION
   ============================================ */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-base);
    padding: calc(var(--spacing-unit) * 1.5) 0;
    display: none;
    z-index: 1000;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.app-bottom-nav-item {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 1);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.app-bottom-nav-item.active,
.app-bottom-nav-item:hover {
    color: var(--primary);
}

.app-bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-bottom-nav-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.app-bottom-nav-text {
    font-size: 0.7rem;
    font-weight: 500;
}

/* ============================================
   APP LAYOUT - WHATSAPP BUTTON
   ============================================ */
.app-whatsapp-btn {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 4);
    right: calc(var(--spacing-unit) * 4);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    z-index: 1000;
}

.app-whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.app-whatsapp-btn i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

@media (max-width: 968px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.active {
        transform: translateX(0);
    }

    .app-header {
        left: 0;
        padding: 0 calc(var(--spacing-unit) * 2);
    }

    .app-header-menu-btn {
        display: flex;
    }

    .app-main {
        margin-left: 0;
        margin-bottom: 80px;
    }

    .app-bottom-nav {
        display: flex;
    }

    .app-whatsapp-btn {
        bottom: calc(var(--spacing-unit) * 12);
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

/* ============================================
   DASHBOARD HOME
   ============================================ */
.dashboard-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.dashboard-home-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 5);
    gap: calc(var(--spacing-unit) * 3);
}

.dashboard-home-header-main {
    flex: 1;
}

.dashboard-home-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.dashboard-home-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.dashboard-home-filter-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.dashboard-home-filter-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.dashboard-home-verification-alert {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.dashboard-home-verification-alert-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.dashboard-home-verification-alert-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.dashboard-home-verification-alert-content {
    flex: 1;
}

.dashboard-home-verification-alert-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.dashboard-home-verification-alert-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.dashboard-home-verification-alert-btn {
    display: flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.dashboard-home-verification-alert-btn:hover {
    opacity: 0.9;
}

.dashboard-home-balance-card {
    background: var(--primary);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 5);
    margin-bottom: calc(var(--spacing-unit) * 5);
    color: white;
}

.dashboard-home-balance-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.dashboard-home-balance-card-header-main {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.dashboard-home-balance-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.dashboard-home-balance-card-icon i {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.dashboard-home-balance-card-title {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.dashboard-home-balance-card-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin: 0;
}

.dashboard-home-balance-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-balance-card-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.dashboard-home-balance-card-toggle i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.dashboard-home-balance-card-balance {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.dashboard-home-balance-card-value {
    color: white;
    font-weight: 700;
    font-size: 2.5rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.2;
}

.dashboard-home-balance-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.dashboard-home-balance-card-meta-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.dashboard-home-balance-card-meta-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}

.dashboard-home-balance-card-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.dashboard-home-balance-card-action {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
}

.dashboard-home-balance-card-action:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.dashboard-home-balance-card-action-primary {
    background: white;
    color: var(--primary);
    border-color: white;
}

.dashboard-home-balance-card-action-primary:hover {
    opacity: 0.9;
}

.dashboard-home-balance-card-action i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.dashboard-home-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.dashboard-home-period-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.dashboard-home-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.dashboard-home-stat-card:hover {
    border-color: var(--primary);
}

.dashboard-home-stat-card-header {
    margin-bottom: 0;
    flex-shrink: 0;
}

.dashboard-home-stat-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
}

.dashboard-home-stat-card-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.dashboard-home-stat-card-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
    flex: 1;
    min-width: 0;
}

.dashboard-home-stat-card-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
}

.dashboard-home-stat-card-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.dashboard-home-stat-card-meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.2;
}

.dashboard-home-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.dashboard-home-chart-card,
.dashboard-home-transactions-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.dashboard-home-chart-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    gap: calc(var(--spacing-unit) * 3);
}

.dashboard-home-chart-card-header-main {
    flex: 1;
}

.dashboard-home-chart-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.dashboard-home-chart-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-home-chart-card-dropdown {
    position: relative;
}

.dashboard-home-chart-card-dropdown-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-chart-card-dropdown-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.dashboard-home-chart-card-dropdown-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.dashboard-home-chart-card-dropdown-menu {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 0.5));
    right: 0;
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: calc(var(--spacing-unit) * 1);
    display: none;
    z-index: 100;
}

.dashboard-home-chart-card-dropdown-menu.active {
    display: block;
}

.dashboard-home-chart-card-dropdown-item {
    display: block;
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: none;
    border-radius: calc(var(--radius) * 0.75);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-chart-card-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.dashboard-home-chart-container {
    height: 300px;
    position: relative;
}

.dashboard-home-transactions-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    gap: calc(var(--spacing-unit) * 3);
}

.dashboard-home-transactions-card-header-main {
    flex: 1;
}

.dashboard-home-transactions-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
}

.dashboard-home-transactions-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-home-transactions-card-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.dashboard-home-transactions-card-link:hover {
    opacity: 0.8;
}

.dashboard-home-transactions-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.dashboard-home-transaction-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    transition: all 0.2s;
}

.dashboard-home-transaction-item:hover {
    background: var(--bg-elevated);
}

.dashboard-home-transaction-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.dashboard-home-transaction-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.dashboard-home-transaction-content {
    flex: 1;
    min-width: 0;
}

.dashboard-home-transaction-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 calc(var(--spacing-unit) * 0.25) 0;
}

.dashboard-home-transaction-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.dashboard-home-transaction-amount {
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.dashboard-home-transactions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
    text-align: center;
}

.dashboard-home-transactions-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.dashboard-home-transactions-empty-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.dashboard-home-transactions-empty-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.dashboard-home-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: calc(var(--spacing-unit) * 3);
    overflow-y: auto;
}

.dashboard-home-modal-overlay.active {
    display: flex;
}

.dashboard-home-modal {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.dashboard-home-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.dashboard-home-modal-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

.dashboard-home-modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.dashboard-home-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-modal-close:hover {
    background: var(--bg-elevated);
    color: var(--primary);
}

.dashboard-home-modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.dashboard-home-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    overflow-y: auto;
    flex: 1;
}

.dashboard-home-modal-body-center {
    text-align: center;
}

.dashboard-home-modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.dashboard-home-modal-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.dashboard-home-modal-form-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.dashboard-home-modal-form-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
}

.dashboard-home-modal-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dashboard-home-modal-footer {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    justify-content: flex-end;
}

.dashboard-home-modal-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dashboard-home-modal-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.dashboard-home-modal-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.dashboard-home-modal-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.dashboard-home-modal-btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-base);
}

.dashboard-home-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.dashboard-home-notification-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.dashboard-home-notification-message {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 calc(var(--spacing-unit) * 4) 0;
}

.dashboard-home-notification-checkbox {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-top: calc(var(--spacing-unit) * 4);
}

.dashboard-home-notification-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dashboard-home-notification-checkbox label {
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .dashboard-home-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-home {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .dashboard-home-title {
        font-size: 1.5rem;
    }

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

    .dashboard-home-filter-btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-home-verification-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-home-verification-alert-btn {
        width: 100%;
        justify-content: center;
    }

    .dashboard-home-balance-card {
        padding: calc(var(--spacing-unit) * 4);
    }

    .dashboard-home-balance-card-value {
        font-size: 2rem;
    }

    .dashboard-home-balance-card-actions {
        flex-direction: column;
    }

    .dashboard-home-balance-card-action {
        width: 100%;
        justify-content: center;
    }

    .dashboard-home-stats-grid,
    .dashboard-home-period-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-home-modal-form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-home-modal-footer {
        flex-direction: column;
    }

    .dashboard-home-modal-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   DEPOSIT PAGES - NEW DESIGN
   ============================================ */

/* Deposit Balance Page */
.deposit-page-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4);
}

.deposit-page-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.deposit-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-page-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.deposit-page-content {
    width: 100%;
}

.deposit-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.deposit-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-amount-input-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    transition: all 0.2s;
}

.deposit-amount-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-amount-prefix {
    padding: 0 calc(var(--spacing-unit) * 2.5);
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-base);
}

.deposit-amount-input-group:focus-within .deposit-amount-prefix {
    color: var(--primary);
}

.deposit-amount-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
}

.deposit-amount-input-group:focus-within .deposit-amount-input {
    color: var(--primary);
}

.deposit-amount-input.invalid {
    color: #ef4444;
}

.deposit-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.deposit-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-quick-amount {
    padding: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.deposit-quick-amount:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-quick-amount.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.deposit-form-actions {
    margin-top: calc(var(--spacing-unit) * 2);
}

.deposit-submit-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.deposit-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.deposit-submit-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-submit-text i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-submit-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-submit-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Deposit Success Page */
.deposit-payment-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1400px;
    margin: 0 auto;
}

.deposit-payment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-payment-header-main {
    flex: 1;
}

.deposit-payment-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-payment-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.deposit-payment-back-link {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.deposit-payment-back-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-payment-back-link i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 4);
}

.deposit-payment-left,
.deposit-payment-right {
    display: flex;
    flex-direction: column;
}

.deposit-payment-card,
.deposit-payment-info-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-payment-card-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.deposit-payment-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.deposit-payment-card-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.deposit-payment-card-header-text {
    flex: 1;
}

.deposit-payment-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.deposit-payment-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.deposit-payment-qr-section {
    display: flex;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.deposit-payment-qr-wrapper {
    max-width: 300px;
    width: 100%;
}

.deposit-payment-qr-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.deposit-payment-error {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid #ef4444;
    border-radius: var(--radius);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.deposit-payment-error i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    flex-shrink: 0;
}

.deposit-payment-pix-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2.5);
}

.deposit-payment-divider {
    position: relative;
    text-align: center;
    margin: calc(var(--spacing-unit) * 2) 0;
}

.deposit-payment-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-base);
}

.deposit-payment-divider-text {
    position: relative;
    padding: 0 calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.deposit-payment-pix-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-pix-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-payment-pix-input-wrapper {
    width: 100%;
}

.deposit-payment-pix-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    resize: vertical;
    outline: none;
    transition: all 0.2s;
}

.deposit-payment-pix-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-payment-copy-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-payment-copy-btn:hover {
    opacity: 0.9;
}

.deposit-payment-copy-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-payment-success-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 4);
}

.deposit-payment-success-section.hidden {
    display: none;
}

.deposit-payment-success-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.deposit-payment-success-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.deposit-payment-success-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-success-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    width: 100%;
}

.deposit-payment-success-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.deposit-payment-success-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.deposit-payment-success-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-success-status {
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-main);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
}

.deposit-payment-info-text {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.deposit-payment-info-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.deposit-payment-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 4);
}

.deposit-payment-loading.hidden {
    display: none;
}

.deposit-payment-loading-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--primary);
}

.deposit-payment-loading-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    animation: pulse 2s ease-in-out infinite;
}

.deposit-payment-loading-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.deposit-payment-details {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-payment-details.hidden {
    display: none;
}

.deposit-payment-detail-item {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.deposit-payment-detail-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-payment-detail-text {
    flex: 1;
}

.deposit-payment-detail-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.deposit-payment-detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-detail-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.deposit-payment-detail-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.deposit-payment-completed {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-payment-completed.hidden {
    display: none;
}

.deposit-payment-completed-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    text-align: center;
}

.deposit-payment-completed-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.deposit-payment-completed-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.deposit-payment-completed-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-receipt {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.deposit-payment-receipt-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.deposit-payment-receipt-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-payment-receipt-details {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-payment-receipt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(var(--spacing-unit) * 2);
    border-bottom: 1px solid var(--border-base);
}

.deposit-payment-receipt-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.deposit-payment-receipt-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.deposit-payment-receipt-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-payment-actions {
    margin-top: auto;
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

/* Deposit History Page */
.deposit-history-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1600px;
    margin: 0 auto;
}

.deposit-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-header-main {
    flex: 1;
}

.deposit-history-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-history-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.deposit-history-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-history-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.deposit-history-action-btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.deposit-history-action-btn.primary:hover {
    opacity: 0.9;
}

.deposit-history-action-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-history-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.deposit-history-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.deposit-history-stat-icon i {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: white;
}

.deposit-history-stat-content {
    flex: 1;
    min-width: 0;
}

.deposit-history-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.deposit-history-stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.deposit-history-stat-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.deposit-history-filters-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.deposit-history-filters {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-search {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-history-filter-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-history-filter-label i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.deposit-history-search-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-history-search-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.deposit-history-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-history-search-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit-history-search-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-search-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-history-filters-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
}

.deposit-history-filter-form {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex: 1;
}

.deposit-history-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
    flex: 1;
}

.deposit-history-date-inputs {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-history-date-input,
.deposit-history-status-select {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.deposit-history-date-input:focus,
.deposit-history-status-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.deposit-history-filter-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deposit-history-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-filter-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-history-table-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.deposit-history-table-header {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-table-header-main {
    flex: 1;
}

.deposit-history-table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.deposit-history-table-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.deposit-history-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-history-table-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.deposit-history-table-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-table-action-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.deposit-history-table-wrapper {
    overflow-x: auto;
}

.deposit-history-table {
    width: 100%;
    border-collapse: collapse;
}

.deposit-history-table thead {
    background: var(--bg-main);
}

.deposit-history-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-base);
}

.deposit-history-table-actions-col {
    text-align: center;
}

.deposit-history-table-row {
    border-bottom: 1px solid var(--border-base);
    transition: all 0.2s;
}

.deposit-history-table-row:hover {
    background: var(--bg-secondary);
}

.deposit-history-table-row:last-child {
    border-bottom: none;
}

.deposit-history-table td {
    padding: calc(var(--spacing-unit) * 3);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.deposit-history-table-transaction {
    min-width: 200px;
}

.deposit-history-transaction-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-history-transaction-id-group,
.deposit-history-end-to-end-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-history-transaction-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-all;
}

.deposit-history-end-to-end {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
}

.deposit-history-copy-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.deposit-history-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-copy-btn i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.deposit-history-table-amount,
.deposit-history-table-fee {
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-history-amount-value,
.deposit-history-fee-value {
    font-family: 'JetBrains Mono', monospace;
}

.deposit-history-status-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.85rem;
    font-weight: 500;
}

.deposit-history-status-badge.completed {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.deposit-history-status-badge.refunded {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.deposit-history-status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.deposit-history-status-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.deposit-history-status-badge.default {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.deposit-history-status-badge i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.deposit-history-date-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.deposit-history-date-value {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.deposit-history-time-value {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.deposit-history-table-actions-cell {
    text-align: center;
}

.deposit-history-view-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.deposit-history-view-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-view-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.deposit-history-empty {
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
}

.deposit-history-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--spacing-unit) * 2.5);
}

.deposit-history-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.deposit-history-empty-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
    color: white;
}

.deposit-history-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-history-empty-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
}

.deposit-history-pagination {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

/* Deposit History Modal */
.deposit-history-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.deposit-history-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.deposit-history-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.deposit-history-modal-overlay.active .deposit-history-modal {
    transform: scale(1);
}

.deposit-history-modal-header {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-modal-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.deposit-history-modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.deposit-history-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.deposit-history-modal-close:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.deposit-history-modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-history-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    overflow-y: auto;
    flex: 1;
}

.deposit-history-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-modal-section {
    display: flex;
    flex-direction: column;
}

.deposit-history-modal-section-full {
    grid-column: 1 / -1;
}

.deposit-history-modal-section-card {
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2.5);
}

.deposit-history-modal-section-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.deposit-history-modal-section-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.deposit-history-modal-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.75);
}

.deposit-history-modal-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.deposit-history-modal-label i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.deposit-history-modal-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-all;
}

.deposit-history-modal-value-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.deposit-history-modal-amount {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.deposit-history-modal-additional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.deposit-history-modal-additional-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.deposit-history-modal-footer {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

.hidden {
    display: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .deposit-payment-grid {
        grid-template-columns: 1fr;
    }

    .deposit-history-stats {
        grid-template-columns: 1fr;
    }

    .deposit-history-modal-grid {
        grid-template-columns: 1fr;
    }

    .deposit-history-modal-section-full {
        grid-column: 1;
    }

    .deposit-history-modal-additional-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .deposit-page-wrapper,
    .deposit-payment-wrapper,
    .deposit-history-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .deposit-payment-header,
    .deposit-history-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .deposit-payment-back-link,
    .deposit-history-header-actions {
        width: 100%;
    }

    .deposit-history-action-btn {
        flex: 1;
        justify-content: center;
    }

    .deposit-quick-amounts {
        grid-template-columns: repeat(2, 1fr);
    }

    .deposit-history-filters-group {
        flex-direction: column;
        align-items: stretch;
    }

    .deposit-history-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .deposit-history-date-inputs {
        flex-direction: column;
    }

    .deposit-history-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .deposit-history-table-actions {
        width: 100%;
    }

    .deposit-history-table-action-btn {
        flex: 1;
        justify-content: center;
    }

    .deposit-history-modal-overlay {
        padding: calc(var(--spacing-unit) * 2);
    }

    .deposit-history-modal-header,
    .deposit-history-modal-footer {
        flex-direction: column;
    }

    .deposit-history-action-btn {
        width: 100%;
        justify-content: center;
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   2FA PAGES - NEW DESIGN
   ============================================ */

/* 2FA Setup Page */
.twofa-setup-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1200px;
    margin: 0 auto;
}

.twofa-setup-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.twofa-setup-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.twofa-setup-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.twofa-setup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 4);
}

/* 2FA Status Cards (quando ativado) */
.twofa-status-card,
.twofa-manage-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--spacing-unit) * 2.5);
}

.twofa-status-icon,
.twofa-manage-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.twofa-status-icon i,
.twofa-manage-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
    color: white;
}

.twofa-status-title,
.twofa-manage-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.twofa-status-description,
.twofa-manage-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.twofa-manage-form {
    width: 100%;
    margin-top: calc(var(--spacing-unit) * 2);
}

.twofa-manage-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-manage-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.twofa-manage-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* 2FA Setup Cards (quando não ativado) */
.twofa-qr-card,
.twofa-activate-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.twofa-qr-header,
.twofa-activate-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.twofa-qr-icon,
.twofa-activate-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.twofa-qr-icon i,
.twofa-activate-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.twofa-qr-header-text,
.twofa-activate-header-text {
    flex: 1;
}

.twofa-qr-title,
.twofa-activate-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.twofa-qr-subtitle,
.twofa-activate-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.twofa-qr-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.twofa-qr-wrapper {
    display: flex;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
}

.twofa-qr-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.twofa-secret-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2.5);
}

.twofa-secret-divider {
    position: relative;
    text-align: center;
    margin: calc(var(--spacing-unit) * 2) 0;
}

.twofa-secret-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-base);
}

.twofa-secret-divider-text {
    position: relative;
    padding: 0 calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.twofa-secret-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-secret-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.twofa-secret-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.twofa-secret-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: all 0.2s;
}

.twofa-secret-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.twofa-secret-copy-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.twofa-secret-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.twofa-secret-copy-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.twofa-activate-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.twofa-activate-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-activate-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.twofa-activate-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    letter-spacing: 0.5em;
    outline: none;
    transition: all 0.2s;
}

.twofa-activate-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.twofa-activate-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.twofa-activate-actions {
    margin-top: calc(var(--spacing-unit) * 2);
}

.twofa-activate-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-activate-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.twofa-activate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.twofa-activate-btn-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-activate-btn-text i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.twofa-activate-btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-activate-btn-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* 2FA Verify Page */
.twofa-verify-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 600px;
    margin: 0 auto;
}

.twofa-verify-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.twofa-verify-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.twofa-verify-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.twofa-verify-content {
    width: 100%;
}

.twofa-verify-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.twofa-verify-card-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.twofa-verify-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.twofa-verify-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.twofa-verify-header-text {
    flex: 1;
}

.twofa-verify-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.twofa-verify-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.twofa-verify-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.twofa-verify-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-verify-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.twofa-verify-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    letter-spacing: 0.5em;
    outline: none;
    transition: all 0.2s;
}

.twofa-verify-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.twofa-verify-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.twofa-verify-actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.twofa-verify-submit-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-verify-submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.twofa-verify-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.twofa-verify-submit-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-verify-submit-text i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.twofa-verify-submit-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-verify-submit-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.twofa-verify-cancel-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.twofa-verify-cancel-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.twofa-verify-cancel-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Responsive */
@media (max-width: 1024px) {
    .twofa-setup-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .twofa-setup-wrapper,
    .twofa-verify-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .twofa-setup-title,
    .twofa-verify-title {
        font-size: 1.5rem;
    }

    .twofa-status-card,
    .twofa-manage-card,
    .twofa-qr-card,
    .twofa-activate-card,
    .twofa-verify-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .twofa-status-icon,
    .twofa-manage-icon {
        width: 64px;
        height: 64px;
    }

    .twofa-status-icon i,
    .twofa-manage-icon i {
        width: 32px;
        height: 32px;
    }

    .twofa-secret-input-group {
        flex-direction: column;
    }

    .twofa-secret-copy-btn {
        width: 100%;
    }
}

/* ============================================
   WITHDRAW PAGES - NEW DESIGN
   ============================================ */

/* Withdraw Balance Page */
.withdraw-page-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4);
}

.withdraw-page-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.withdraw-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-page-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.withdraw-page-balance-card {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.withdraw-balance-display {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-balance-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.withdraw-balance-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.withdraw-balance-content {
    flex: 1;
    min-width: 0;
}

.withdraw-balance-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.withdraw-balance-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-balance-status {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    flex-shrink: 0;
}

.withdraw-balance-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 2s ease-in-out infinite;
}

.withdraw-balance-status-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.withdraw-page-content {
    width: 100%;
}

.withdraw-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.withdraw-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-amount-input-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    transition: all 0.2s;
}

.withdraw-amount-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-amount-prefix {
    padding: 0 calc(var(--spacing-unit) * 2.5);
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1px solid var(--border-base);
}

.withdraw-amount-input-group:focus-within .withdraw-amount-prefix {
    color: var(--primary);
}

.withdraw-amount-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
}

.withdraw-amount-input-group:focus-within .withdraw-amount-input {
    color: var(--primary);
}

.withdraw-amount-input.invalid {
    color: #ef4444;
}

.withdraw-form-input,
.withdraw-form-select {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.withdraw-form-input:focus,
.withdraw-form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-form-input.invalid {
    border-color: #ef4444;
}

.withdraw-form-input.valid {
    border-color: var(--primary);
}

.withdraw-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.withdraw-quick-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-quick-amount {
    padding: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.withdraw-quick-amount:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-quick-amount.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.withdraw-quick-amount-all {
    font-weight: 600;
}

.withdraw-summary-card {
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    transition: all 0.3s;
}

.withdraw-summary-card.updated {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.withdraw-summary-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.withdraw-summary-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-secondary);
    color: var(--primary);
}

.withdraw-summary-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-summary-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.withdraw-summary-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.withdraw-summary-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-summary-divider {
    height: 1px;
    background: var(--border-base);
    margin: calc(var(--spacing-unit) * 1) 0;
}

.withdraw-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 2px solid var(--border-base);
}

.withdraw-summary-total-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-summary-total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-form-actions {
    margin-top: calc(var(--spacing-unit) * 2);
}

.withdraw-submit-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.withdraw-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.withdraw-submit-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-submit-text i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-submit-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-submit-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Withdraw Success Page */
.withdraw-success-page-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 600px;
    margin: 0 auto;
}

.withdraw-success-page-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.withdraw-success-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-success-page-description {
    font-size: 1rem;
    color: var(--text-secondary);
}

.withdraw-success-page-content {
    width: 100%;
}

.withdraw-success-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-success-icon-wrapper {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.withdraw-success-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.withdraw-success-icon i {
    width: 48px;
    height: 48px;
    stroke-width: 2;
}

.withdraw-success-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.withdraw-success-message {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.withdraw-success-receipt {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.withdraw-success-receipt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(var(--spacing-unit) * 2);
    border-bottom: 1px solid var(--border-base);
}

.withdraw-success-receipt-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.withdraw-success-receipt-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.withdraw-success-receipt-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-success-receipt-status {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
}

.withdraw-success-actions {
    margin-top: calc(var(--spacing-unit) * 2);
    width: 100%;
}

.withdraw-success-back-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.withdraw-success-back-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-success-back-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Withdraw History Page */
.withdraw-history-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1600px;
    margin: 0 auto;
}

.withdraw-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing-unit) * 4);
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-header-main {
    flex: 1;
}

.withdraw-history-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-history-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.withdraw-history-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-history-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.withdraw-history-action-btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.withdraw-history-action-btn.primary:hover {
    opacity: 0.9;
}

.withdraw-history-action-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-history-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.withdraw-history-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    flex-shrink: 0;
}

.withdraw-history-stat-icon i {
    width: 28px;
    height: 28px;
    stroke-width: 2;
    color: white;
}

.withdraw-history-stat-content {
    flex: 1;
    min-width: 0;
}

.withdraw-history-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-history-stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.withdraw-history-stat-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.withdraw-history-filters-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.withdraw-history-filters {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-search {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-history-filter-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-history-filter-label i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.withdraw-history-search-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-history-search-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.withdraw-history-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-history-search-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withdraw-history-search-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-search-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-history-filters-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
}

.withdraw-history-filter-form {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex: 1;
}

.withdraw-history-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
    flex: 1;
}

.withdraw-history-date-inputs {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-history-date-input,
.withdraw-history-status-select {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.withdraw-history-date-input:focus,
.withdraw-history-status-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.withdraw-history-filter-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.withdraw-history-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-filter-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-history-table-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
}

.withdraw-history-table-header {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-table-header-main {
    flex: 1;
}

.withdraw-history-table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.withdraw-history-table-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.withdraw-history-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-history-table-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.withdraw-history-table-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-table-action-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.withdraw-history-table-wrapper {
    overflow-x: auto;
}

.withdraw-history-table {
    width: 100%;
    border-collapse: collapse;
}

.withdraw-history-table thead {
    background: var(--bg-main);
}

.withdraw-history-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-base);
}

.withdraw-history-table-actions-col {
    text-align: center;
}

.withdraw-history-table-row {
    border-bottom: 1px solid var(--border-base);
    transition: all 0.2s;
}

.withdraw-history-table-row:hover {
    background: var(--bg-secondary);
}

.withdraw-history-table-row:last-child {
    border-bottom: none;
}

.withdraw-history-table td {
    padding: calc(var(--spacing-unit) * 3);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.withdraw-history-table-transaction {
    min-width: 200px;
}

.withdraw-history-transaction-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-history-transaction-id-group,
.withdraw-history-pix-key-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-history-transaction-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-all;
}

.withdraw-history-pix-key-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
}

.withdraw-history-pix-key-text i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.withdraw-history-copy-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.withdraw-history-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-copy-btn i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.withdraw-history-table-amount,
.withdraw-history-table-fee {
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-history-amount-value,
.withdraw-history-fee-value {
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-history-status-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.85rem;
    font-weight: 500;
}

.withdraw-history-status-badge.completed {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.withdraw-history-status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.withdraw-history-status-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.withdraw-history-status-badge.default {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.withdraw-history-status-badge i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.withdraw-history-date-info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.25);
}

.withdraw-history-date-value {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.withdraw-history-time-value {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.withdraw-history-table-actions-cell {
    text-align: center;
}

.withdraw-history-view-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.withdraw-history-view-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-view-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.withdraw-history-empty {
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
}

.withdraw-history-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--spacing-unit) * 2.5);
}

.withdraw-history-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.withdraw-history-empty-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
    color: white;
}

.withdraw-history-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-history-empty-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
}

.withdraw-history-pagination {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

/* Withdraw History Modal */
.withdraw-history-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.withdraw-history-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.withdraw-history-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.withdraw-history-modal-overlay.active .withdraw-history-modal {
    transform: scale(1);
}

.withdraw-history-modal-header {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-modal-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.withdraw-history-modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.withdraw-history-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.withdraw-history-modal-close:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.withdraw-history-modal-close i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-history-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    overflow-y: auto;
    flex: 1;
}

.withdraw-history-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-modal-section {
    display: flex;
    flex-direction: column;
}

.withdraw-history-modal-section-full {
    grid-column: 1 / -1;
}

.withdraw-history-modal-section-card {
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2.5);
}

.withdraw-history-modal-section-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.withdraw-history-modal-section-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.withdraw-history-modal-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.75);
}

.withdraw-history-modal-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.withdraw-history-modal-label i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.withdraw-history-modal-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-all;
}

.withdraw-history-modal-value-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.withdraw-history-modal-amount {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-history-modal-net-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-history-modal-additional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.withdraw-history-modal-additional-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.withdraw-history-timeline {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    position: relative;
    padding-left: calc(var(--spacing-unit) * 3);
}

.withdraw-history-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-base);
}

.withdraw-history-timeline-item {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    position: relative;
}

.withdraw-history-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-elevated);
    flex-shrink: 0;
    margin-top: 2px;
    position: absolute;
    left: -24px;
}

.withdraw-history-timeline-dot-error {
    background: #ef4444;
}

.withdraw-history-timeline-content {
    flex: 1;
}

.withdraw-history-timeline-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.withdraw-history-timeline-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.withdraw-history-modal-footer {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

/* Responsive */
@media (max-width: 1024px) {
    .withdraw-history-stats {
        grid-template-columns: 1fr;
    }

    .withdraw-history-modal-grid {
        grid-template-columns: 1fr;
    }

    .withdraw-history-modal-section-full {
        grid-column: 1;
    }

    .withdraw-history-modal-additional-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .withdraw-page-wrapper,
    .withdraw-success-page-wrapper,
    .withdraw-history-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .withdraw-balance-display {
        flex-direction: column;
        text-align: center;
    }

    .withdraw-balance-status {
        justify-content: center;
    }

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

    .withdraw-history-header-actions {
        width: 100%;
    }

    .withdraw-history-action-btn {
        flex: 1;
        justify-content: center;
    }

    .withdraw-quick-amounts {
        grid-template-columns: repeat(2, 1fr);
    }

    .withdraw-history-filters-group {
        flex-direction: column;
        align-items: stretch;
    }

    .withdraw-history-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .withdraw-history-date-inputs {
        flex-direction: column;
    }

    .withdraw-history-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .withdraw-history-table-actions {
        width: 100%;
    }

    .withdraw-history-table-action-btn {
        flex: 1;
        justify-content: center;
    }

    .withdraw-history-modal-overlay {
        padding: calc(var(--spacing-unit) * 2);
    }

    .withdraw-history-modal-header,
    .withdraw-history-modal-footer {
        flex-direction: column;
    }

    .withdraw-history-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   CREDENTIALS PAGE - NEW DESIGN
   ============================================ */

.credentials-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 900px;
    margin: 0 auto;
}

.credentials-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.credentials-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.credentials-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.credentials-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.credentials-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.credentials-card-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.credentials-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.credentials-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.credentials-header-text {
    flex: 1;
}

.credentials-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.credentials-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.credentials-fields {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.credentials-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-field-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-field-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.credentials-value-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
}

.credentials-value {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
    transition: all 0.2s;
}

.credentials-value.credentials-copied {
    border-color: var(--primary);
    background: var(--bg-secondary);
    color: var(--primary);
}

.credentials-secret-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
}

.credentials-secret-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: all 0.2s;
}

.credentials-secret-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.credentials-toggle-btn,
.credentials-copy-btn {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.credentials-toggle-btn:hover,
.credentials-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.credentials-toggle-btn i,
.credentials-copy-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.credentials-field-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.credentials-actions {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.credentials-generate-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-generate-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.credentials-generate-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Modal */
.credentials-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.credentials-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.credentials-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.credentials-modal-overlay.active .credentials-modal {
    transform: scale(1);
}

.credentials-modal-header {
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.credentials-modal-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    flex: 1;
}

.credentials-modal-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.credentials-modal-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.credentials-modal-header-text {
    flex: 1;
}

.credentials-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.credentials-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.credentials-modal-close {
    padding: calc(var(--spacing-unit) * 1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.credentials-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.credentials-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.credentials-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.credentials-modal-warning {
    display: flex;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
}

.credentials-modal-warning-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.credentials-modal-warning-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.credentials-modal-warning-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-modal-warning-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.credentials-modal-warning-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.credentials-modal-warning-note strong {
    color: var(--text-primary);
    font-weight: 600;
}

.credentials-modal-footer {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.credentials-modal-cancel-btn,
.credentials-modal-confirm-btn {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-modal-cancel-btn {
    border: 1px solid var(--border-base);
    background: var(--bg-main);
    color: var(--text-primary);
}

.credentials-modal-cancel-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.credentials-modal-confirm-btn {
    border: none;
    background: var(--primary);
    color: white;
}

.credentials-modal-confirm-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.credentials-modal-confirm-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.credentials-modal-cancel-btn i,
.credentials-modal-confirm-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.credentials-modal-confirm-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-modal-confirm-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.credentials-modal-confirm-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ============================================
   CREDENTIALS - IPS SECTION
   ============================================ */
.credentials-ips-section {
    margin-top: calc(var(--spacing-unit) * 12);
    padding-top: calc(var(--spacing-unit) * 12);
}

.credentials-section-divider {
    width: 100%;
    height: 1px;
    background: var(--border-base);
    margin-bottom: calc(var(--spacing-unit) * 6);
}

.credentials-ips-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    text-align: center;
}

.credentials-ips-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.credentials-ips-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {

    .credentials-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .credentials-title {
        font-size: 1.5rem;
    }

    .credentials-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .credentials-ips-section {
        margin-top: calc(var(--spacing-unit) * 5);
        padding-top: calc(var(--spacing-unit) * 5);
    }

    .credentials-ips-title {
        font-size: 1.5rem;
    }

    .credentials-value-wrapper,
    .credentials-secret-wrapper {
        flex-direction: row;
        align-items: center;
    }

    .credentials-value,
    .credentials-secret-input {
        min-width: 0;
        flex: 1;
    }

    .credentials-toggle-btn,
    .credentials-copy-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-shrink: 0;
        padding: calc(var(--spacing-unit) * 1.5);
    }

    .credentials-modal-footer {
        flex-direction: column;
    }

    .credentials-modal-cancel-btn,
    .credentials-modal-confirm-btn {
        width: 100%;
    }
}

/* ============================================
   PROFILE PAGE - NEW DESIGN
   ============================================ */

.profile-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1400px;
    margin: 0 auto;
}

.profile-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
}

.profile-header-content {
    flex: 1;
}

.profile-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.profile-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.profile-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.profile-header-btn {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-header-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.profile-header-btn.secondary {
    background: var(--bg-main);
    color: var(--text-primary);
}

.profile-header-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-header-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-content-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: calc(var(--spacing-unit) * 4);
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.profile-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
}

.profile-avatar-section {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.profile-avatar i {
    width: 60px;
    height: 60px;
    stroke-width: 2;
}

.profile-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--border-base);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.profile-avatar-edit:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-avatar-edit i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.profile-email {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.profile-email i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.profile-member-since {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.profile-member-since i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.profile-status-section {
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.profile-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.profile-status-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.profile-status-badge {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.profile-status-badge.verified {
    background: var(--bg-secondary);
    color: var(--primary);
}

.profile-status-badge.pending {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.profile-status-badge i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.profile-verify-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    transition: all 0.2s;
}

.profile-verify-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-verify-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.profile-actions-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.profile-action-btn {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-card-header {
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    margin-bottom: calc(var(--spacing-unit) * 4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
}

.profile-card-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    flex: 1;
}

.profile-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.profile-card-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.profile-card-header-text {
    flex: 1;
}

.profile-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.profile-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.profile-card-header-badge {
    flex-shrink: 0;
}

.profile-card-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.profile-info-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.profile-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-section-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.profile-info-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.profile-info-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.profile-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.profile-security-item {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.profile-security-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.profile-security-info {
    flex: 1;
}

.profile-security-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.profile-security-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.profile-security-action {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-security-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-security-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-doc-badge {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.profile-doc-badge.approved {
    background: var(--bg-secondary);
    color: var(--primary);
}

.profile-doc-badge.pending {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.profile-doc-badge.rejected {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.profile-doc-badge i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.profile-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 4);
}

.profile-doc-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.profile-doc-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.profile-doc-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.profile-doc-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.profile-doc-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-doc-value-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Modal */
.profile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.profile-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.profile-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.profile-modal-overlay.active .profile-modal {
    transform: scale(1);
}

.profile-modal-header {
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.profile-modal-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    flex: 1;
}

.profile-modal-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.profile-modal-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.profile-modal-header-text {
    flex: 1;
}

.profile-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.profile-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.profile-modal-close {
    padding: calc(var(--spacing-unit) * 1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.profile-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.profile-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.profile-modal-body {
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.profile-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.profile-form-label i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--primary);
}

.profile-form-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-form-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2.5);
    padding-right: calc(var(--spacing-unit) * 10);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s;
}

.profile-form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.profile-form-toggle {
    position: absolute;
    right: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-form-toggle:hover {
    color: var(--primary);
}

.profile-form-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-form-message {
    min-height: 20px;
}

.profile-form-message-success {
    font-size: 0.85rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.profile-form-message-error {
    font-size: 0.85rem;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.profile-form-message-success i,
.profile-form-message-error i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.profile-password-strength {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.profile-password-strength-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-main);
    border-radius: 3px;
    overflow: hidden;
}

.profile-password-strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s;
    border-radius: 3px;
}

.profile-password-strength-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-modal-footer {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.profile-modal-btn {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-modal-btn.secondary {
    border: 1px solid var(--border-base);
    background: var(--bg-main);
    color: var(--text-primary);
}

.profile-modal-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.profile-modal-btn.primary {
    border: none;
    background: var(--primary);
    color: white;
}

.profile-modal-btn.primary:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.profile-modal-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.profile-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.profile-modal-btn-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-modal-btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.profile-modal-btn-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Responsive */
@media (max-width: 1024px) {
    .profile-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .profile-title {
        font-size: 1.5rem;
    }

    .profile-header {
        flex-direction: column;
    }

    .profile-header-actions {
        width: 100%;
    }

    .profile-header-btn {
        flex: 1;
    }

    .profile-info-grid,
    .profile-security-grid,
    .profile-doc-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .profile-modal-footer {
        flex-direction: column;
    }

    .profile-modal-btn {
        width: 100%;
    }
}

/* ============================================
   WHITEIPS PAGE - NEW DESIGN
   ============================================ */

.whiteips-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1400px;
    margin: 0 auto;
}

.whiteips-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.whiteips-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.whiteips-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.whiteips-content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: calc(var(--spacing-unit) * 4);
}

.whiteips-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.whiteips-sidebar {
    display: flex;
    flex-direction: column;
}

.whiteips-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
}

.whiteips-card-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.whiteips-card-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.whiteips-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.whiteips-card-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.whiteips-card-header-text {
    flex: 1;
}

.whiteips-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.whiteips-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.whiteips-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.whiteips-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.whiteips-form-label i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--primary);
}

.whiteips-form-input-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: stretch;
}

.whiteips-form-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: all 0.2s;
}

.whiteips-form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.whiteips-form-input.whiteips-input-invalid {
    border-color: #ef4444;
}

.whiteips-form-submit {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
    flex-shrink: 0;
}

.whiteips-form-submit:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.whiteips-form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.whiteips-form-submit-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-form-submit-text i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.whiteips-form-submit-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-form-submit-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.whiteips-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.whiteips-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.whiteips-table {
    width: 100%;
    border-collapse: collapse;
}

.whiteips-table thead {
    background: var(--bg-main);
}

.whiteips-table th {
    padding: calc(var(--spacing-unit) * 2.5);
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-base);
}

.whiteips-table-actions-col {
    width: 100px;
    text-align: right;
}

.whiteips-table-row {
    border-bottom: 1px solid var(--border-base);
    transition: all 0.2s;
}

.whiteips-table-row:hover {
    background: var(--bg-main);
}

.whiteips-table-row:last-child {
    border-bottom: none;
}

.whiteips-table-ip {
    padding: calc(var(--spacing-unit) * 3);
}

.whiteips-ip-content {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.whiteips-ip-content i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
}

.whiteips-ip-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.whiteips-table-actions-cell {
    padding: calc(var(--spacing-unit) * 3);
    text-align: right;
}

.whiteips-action-btn {
    padding: calc(var(--spacing-unit) * 1.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.whiteips-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.whiteips-action-btn.danger {
    color: #ef4444;
}

.whiteips-action-btn.danger:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.whiteips-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.whiteips-empty {
    padding: calc(var(--spacing-unit) * 6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.whiteips-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.whiteips-empty-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.whiteips-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.whiteips-empty-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
}

.whiteips-pagination {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.whiteips-info-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.whiteips-info-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3);
}

.whiteips-info-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.whiteips-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.whiteips-info-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.whiteips-info-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.whiteips-info-features {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.whiteips-info-feature {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.whiteips-info-feature i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
}

/* Modal */
.whiteips-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.whiteips-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.whiteips-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s;
}

.whiteips-modal-overlay.active .whiteips-modal {
    transform: scale(1);
}

.whiteips-modal-header {
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.whiteips-modal-header-content {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    flex: 1;
}

.whiteips-modal-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.whiteips-modal-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.whiteips-modal-header-text {
    flex: 1;
}

.whiteips-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.whiteips-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.whiteips-modal-close {
    padding: calc(var(--spacing-unit) * 1);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.whiteips-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.whiteips-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.whiteips-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.whiteips-modal-warning {
    display: flex;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
}

.whiteips-modal-warning-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.whiteips-modal-warning-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.whiteips-modal-warning-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-modal-warning-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.whiteips-modal-warning-text strong {
    color: var(--primary);
    font-weight: 600;
}

.whiteips-modal-warning-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.whiteips-modal-footer {
    padding: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.whiteips-modal-btn {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-modal-btn.secondary {
    border: 1px solid var(--border-base);
    background: var(--bg-main);
    color: var(--text-primary);
}

.whiteips-modal-btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.whiteips-modal-btn.danger {
    border: none;
    background: #ef4444;
    color: white;
}

.whiteips-modal-btn.danger:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.whiteips-modal-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.whiteips-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.whiteips-modal-btn-text {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-modal-btn-loading {
    display: none;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.whiteips-modal-btn-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Responsive */
@media (max-width: 1024px) {
    .whiteips-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .whiteips-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .whiteips-title {
        font-size: 1.5rem;
    }

    .whiteips-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .whiteips-form-input-wrapper {
        flex-direction: column;
    }

    .whiteips-form-submit {
        width: 100%;
    }

    .whiteips-table {
        font-size: 0.9rem;
    }

    .whiteips-table th,
    .whiteips-table td {
        padding: calc(var(--spacing-unit) * 2);
    }

    .whiteips-modal-footer {
        flex-direction: column;
    }

    .whiteips-modal-btn {
        width: 100%;
    }
}

/* ============================================
   DEVICE NOTIFICATIONS PAGE - NEW DESIGN
   ============================================ */

.notifications-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1200px;
    margin: 0 auto;
}

.notifications-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    text-align: center;
}

.notifications-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.notifications-header-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-header-icon i {
    width: 50px;
    height: 50px;
    stroke-width: 2;
}

.notifications-header-text {
    max-width: 700px;
}

.notifications-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.notifications-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.notifications-features {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 4);
    flex-wrap: wrap;
}

.notifications-feature {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.notifications-feature i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.notifications-config-card,
.notifications-tutorial-card,
.notifications-devices-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.notifications-config-header,
.notifications-tutorial-header,
.notifications-devices-header {
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.notifications-config-header-content,
.notifications-devices-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
}

.notifications-config-icon,
.notifications-devices-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.notifications-config-icon i,
.notifications-devices-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.notifications-config-header-text,
.notifications-devices-header-content {
    flex: 1;
}

.notifications-config-title,
.notifications-tutorial-title,
.notifications-devices-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.notifications-config-subtitle,
.notifications-tutorial-subtitle,
.notifications-devices-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.notifications-tutorial-header {
    text-align: center;
}

.notifications-status {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2.5);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.notifications-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notifications-status.notifications-status-success .notifications-status-icon {
    background: var(--primary);
    color: white;
}

.notifications-status.notifications-status-error .notifications-status-icon {
    background: #ef4444;
    color: white;
}

.notifications-status.notifications-status-warning .notifications-status-icon {
    background: #f59e0b;
    color: white;
}

.notifications-status-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.notifications-status-content {
    flex: 1;
}

.notifications-status-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.notifications-status-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.notifications-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 3);
}

.notifications-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 220px;
    font-family: inherit;
}

.notifications-action-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.notifications-action-btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.notifications-action-btn.primary:hover:not(:disabled) {
    opacity: 0.9;
    background: var(--primary);
    color: white;
}

.notifications-action-btn.secondary {
    background: var(--bg-main);
    color: var(--text-primary);
}

.notifications-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.notifications-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notifications-action-btn.primary .notifications-action-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.notifications-action-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.notifications-action-content {
    text-align: left;
    flex: 1;
}

.notifications-action-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.notifications-action-subtitle {
    font-size: 0.85rem;
    opacity: 0.8;
}

.notifications-tutorial-steps {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.notifications-tutorial-step {
    display: flex;
    gap: calc(var(--spacing-unit) * 3);
    position: relative;
}

.notifications-tutorial-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 60px;
    bottom: -32px;
    width: 2px;
    background: var(--border-base);
}

.notifications-step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.notifications-step-content {
    flex: 1;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.notifications-step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.notifications-step-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.notifications-step-tips {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1.5);
}

.notifications-tip {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.notifications-tip i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
}

.notifications-devices-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
}

.notifications-devices-count {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    min-width: 100px;
}

.notifications-count-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.notifications-count-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.notifications-devices-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.notifications-device-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.notifications-device-item:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.notifications-device-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notifications-device-icon i {
    width: 30px;
    height: 30px;
    stroke-width: 2;
}

.notifications-device-info {
    flex: 1;
}

.notifications-device-id {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.notifications-device-token {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--radius);
    border: 1px solid var(--border-base);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    word-break: break-all;
}

.notifications-device-dates {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
}

.notifications-date-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.notifications-date-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--primary);
}

.notifications-device-status {
    flex-shrink: 0;
}

.notifications-status-badge {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
}

.notifications-status-badge.active {
    background: var(--bg-secondary);
    color: var(--primary);
    border: 1px solid var(--border-base);
}

.notifications-status-badge i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.notifications-empty {
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
}

.notifications-empty-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3);
}

.notifications-empty-icon i {
    width: 50px;
    height: 50px;
    stroke-width: 2;
}

.notifications-empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.notifications-empty-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: calc(var(--spacing-unit) * 3);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.notifications-empty-btn {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    font-family: inherit;
}

.notifications-empty-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.notifications-empty-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .notifications-title {
        font-size: 1.75rem;
    }

    .notifications-subtitle {
        font-size: 1rem;
    }

    .notifications-features {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 2);
    }

    .notifications-header-icon {
        width: 80px;
        height: 80px;
    }

    .notifications-header-icon i {
        width: 40px;
        height: 40px;
    }

    .notifications-config-card,
    .notifications-tutorial-card,
    .notifications-devices-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .notifications-actions {
        flex-direction: column;
    }

    .notifications-action-btn {
        width: 100%;
        min-width: auto;
    }

    .notifications-tutorial-step {
        flex-direction: column;
    }

    .notifications-tutorial-step::after {
        display: none;
    }

    .notifications-step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

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

    .notifications-devices-count {
        width: 100%;
    }

    .notifications-device-item {
        flex-direction: column;
        text-align: center;
    }

    .notifications-device-dates {
        justify-content: center;
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 1);
    }
}

/* ============================================
   API DOCUMENTATION PAGE - NEW DESIGN
   ============================================ */

.api-docs-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1200px;
    margin: 0 auto;
}

.api-docs-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.api-docs-header-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3) auto;
}

.api-docs-header-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.api-docs-header-text {
    max-width: 800px;
    margin: 0 auto;
}

.api-docs-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.api-docs-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.api-docs-nav {
    margin-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    overflow-x: auto;
}

.api-docs-nav-container {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    padding-bottom: calc(var(--spacing-unit) * 2);
}

.api-docs-nav-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.api-docs-nav-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.api-docs-nav-item.active {
    background: var(--primary);
    color: white;
}

.api-docs-nav-item i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.api-docs-content {
    position: relative;
}

.api-docs-section {
    display: none;
}

.api-docs-section.active {
    display: block;
}

.api-docs-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.api-docs-section-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2.5);
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.api-docs-section-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.api-docs-section-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.api-docs-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.api-docs-section-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.api-docs-section-body p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.api-docs-section-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

.api-docs-info-box {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.api-docs-info-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.api-docs-info-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.api-docs-code-inline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
    border-radius: calc(var(--radius) * 0.75);
    color: var(--primary);
    border: 1px solid var(--border-base);
}

.api-docs-endpoint {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2.5);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.api-docs-endpoint-method {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    color: white;
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
}

.api-docs-endpoint-url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-all;
}

.api-docs-subsection-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.api-docs-table-wrapper {
    overflow-x: auto;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.api-docs-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.api-docs-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border-base);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-docs-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    color: var(--text-secondary);
    font-size: 0.95rem;
    vertical-align: top;
}

.api-docs-table tbody tr:hover {
    background: var(--bg-secondary);
}

.api-docs-table code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
    border-radius: calc(var(--radius) * 0.5);
    color: var(--primary);
    border: 1px solid var(--border-base);
}

.api-docs-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: calc(var(--radius) * 0.5);
    font-weight: 500;
}

.api-docs-nested-list {
    margin-top: calc(var(--spacing-unit) * 1.5);
}

.api-docs-nested-list ul {
    list-style: none;
    padding: 0;
    margin: calc(var(--spacing-unit) * 1) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.75);
}

.api-docs-nested-list li {
    padding-left: calc(var(--spacing-unit) * 2);
    position: relative;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.api-docs-nested-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

.api-docs-code-block {
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.api-docs-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-base);
}

.api-docs-code-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-docs-code-copy {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--bg-main);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.api-docs-code-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.api-docs-code-copy i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.api-docs-code-content {
    padding: calc(var(--spacing-unit) * 3);
    margin: 0;
    overflow-x: auto;
    background: var(--bg-main);
}

.api-docs-code-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
    display: block;
    white-space: pre;
}

.api-docs-note {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    margin-top: calc(var(--spacing-unit) * 2);
}

.api-docs-note i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.api-docs-note p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .api-docs-wrapper {
        padding: calc(var(--spacing-unit) * 3);
    }
}

@media (max-width: 768px) {
    .api-docs-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .api-docs-title {
        font-size: 2rem;
    }

    .api-docs-subtitle {
        font-size: 1rem;
    }

    .api-docs-header-icon {
        width: 60px;
        height: 60px;
    }

    .api-docs-header-icon i {
        width: 30px;
        height: 30px;
    }

    .api-docs-nav-container {
        gap: calc(var(--spacing-unit) * 0.5);
        padding-bottom: calc(var(--spacing-unit) * 1.5);
    }

    .api-docs-nav-item {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .api-docs-nav-item span {
        display: none;
    }

    .api-docs-section-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .api-docs-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 2);
    }

    .api-docs-section-title {
        font-size: 1.5rem;
    }

    .api-docs-subsection-title {
        font-size: 1.2rem;
    }

    .api-docs-endpoint {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--spacing-unit) * 1.5);
    }

    .api-docs-table th,
    .api-docs-table td {
        padding: calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .api-docs-code-content {
        padding: calc(var(--spacing-unit) * 2);
    }

    .api-docs-code-content code {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .api-docs-nav-item {
        padding: calc(var(--spacing-unit) * 1.5);
    }

    .api-docs-section-card {
        padding: calc(var(--spacing-unit) * 2);
    }

    .api-docs-table-wrapper {
        font-size: 0.8rem;
    }

    .api-docs-table th,
    .api-docs-table td {
        padding: calc(var(--spacing-unit) * 1.5);
    }
}

/* ============================================
   SUPPORT PAGES - NEW DESIGN
   ============================================ */

/* Common Support Styles */
.support-alert {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-base);
}

.support-alert-error {
    background: var(--bg-main);
    border-left: 3px solid #ef4444;
}

.support-alert-success {
    background: var(--bg-main);
    border-left: 3px solid var(--primary);
}

.support-alert-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: #ef4444;
    flex-shrink: 0;
}

.support-alert-success .support-alert-icon {
    color: var(--primary);
}

.support-alert-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.support-alert-content {
    flex: 1;
}

.support-alert-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.support-alert-message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.support-alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.support-alert-list li {
    font-size: 0.95rem;
    color: var(--text-secondary);
    padding-left: calc(var(--spacing-unit) * 2);
    position: relative;
}

.support-alert-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ef4444;
}

.support-alert-success .support-alert-list li::before {
    color: var(--primary);
}

.support-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
}

.support-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.support-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.support-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
    color: white;
}

.support-btn-outline {
    background: var(--bg-main);
    color: var(--text-primary);
}

.support-btn-sm {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    font-size: 0.85rem;
}

.support-btn-lg {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 4);
    font-size: 1rem;
}

.support-btn-full {
    width: 100%;
    justify-content: center;
}

.support-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.support-btn.loading .btn-content {
    display: none;
}

.support-btn.loading .btn-loading {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.support-btn .btn-loading {
    display: none;
}

.support-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.support-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
}

.support-badge-warning {
    background: var(--bg-secondary);
    color: #f59e0b;
    border: 1px solid var(--border-base);
}

.support-badge-success {
    background: var(--bg-secondary);
    color: var(--primary);
    border: 1px solid var(--border-base);
}

.support-badge-secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-base);
}

.support-badge i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* Support Ticket Page (ticket.blade.php) */
.support-ticket-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1200px;
    margin: 0 auto;
}

.support-ticket-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.support-ticket-header-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3) auto;
}

.support-ticket-header-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.support-ticket-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.support-ticket-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.support-ticket-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.support-ticket-main,
.support-tickets-list-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.support-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.support-form-header,
.support-tickets-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2.5);
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.support-form-icon,
.support-tickets-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.support-form-icon i,
.support-tickets-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.support-form-title,
.support-tickets-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.support-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.support-form-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.support-form-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.support-form-select,
.support-form-textarea {
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    width: 100%;
}

.support-form-select:focus,
.support-form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.support-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.support-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.support-tickets-table-wrapper {
    overflow-x: auto;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.support-tickets-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.support-tickets-table th {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border-base);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.support-tickets-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.support-tickets-table tbody tr:hover {
    background: var(--bg-secondary);
}

.support-ticket-id {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
    font-weight: 600;
}

.support-ticket-subject {
    font-weight: 500;
    color: var(--text-primary);
}

.support-ticket-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.support-empty-state {
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 4);
}

.support-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3);
}

.support-empty-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.support-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.support-empty-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.support-pagination {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spacing-unit) * 3);
}

/* Support Create Page (create.blade.php) */
.support-create-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 900px;
    margin: 0 auto;
}

.support-create-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.support-create-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 3);
}

.support-create-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.support-create-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.support-create-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.support-create-form-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.support-create-form-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.support-create-form-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3);
}

.support-create-form-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.support-create-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.support-create-form-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.support-create-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
}

.support-create-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.support-create-form-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.support-create-form-label i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.support-create-form-select,
.support-create-form-textarea {
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    width: 100%;
}

.support-create-form-select:focus,
.support-create-form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-create-form-textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
}

.support-create-form-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.support-create-form-counter {
    margin-top: calc(var(--spacing-unit) * 1);
}

.support-create-form-counter span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.support-create-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(var(--spacing-unit) * 2);
}

/* Support Show Page (show.blade.php) */
.support-show-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1400px;
    margin: 0 auto;
}

.support-show-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.support-show-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 3);
}

.support-show-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.support-show-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.support-show-header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.support-show-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing-unit) * 4);
}

.support-show-main {
    display: flex;
    flex-direction: column;
}

.support-chat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    height: 700px;
}

.support-chat-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
    background: var(--bg-main);
}

.support-chat-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-chat-header-avatar i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.support-chat-header-info {
    flex: 1;
}

.support-chat-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.support-chat-header-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
}

.support-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    display: inline-block;
}

.support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
}

.support-message {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
}

.support-message-user {
    justify-content: flex-end;
}

.support-message-content {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.support-message-user .support-message-content {
    align-items: flex-end;
}

.support-message-bubble {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    border-radius: var(--radius);
    line-height: 1.6;
}

.support-message-bubble-user {
    background: var(--primary);
    color: white;
    border-radius: var(--radius) var(--radius) calc(var(--radius) * 0.5) var(--radius);
}

.support-message-bubble-support {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
    border-radius: calc(var(--radius) * 0.5) var(--radius) var(--radius) var(--radius);
}

.support-message-bubble p {
    margin: 0;
    font-size: 0.95rem;
}

.support-message-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.support-message-info i {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

.support-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.support-message-avatar-user {
    background: var(--primary);
    color: white;
}

.support-message-avatar-support {
    background: var(--bg-secondary);
    color: var(--primary);
}

.support-message-avatar-support i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.support-typing-indicator {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
}

.support-typing-bubble {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: calc(var(--radius) * 0.5) var(--radius) var(--radius) var(--radius);
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
}

.support-typing-bubble span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingDot 1.4s infinite ease-in-out;
}

.support-typing-bubble span:nth-child(1) {
    animation-delay: -0.32s;
}

.support-typing-bubble span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.support-chat-input {
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    background: var(--bg-main);
}

.support-chat-input-wrapper {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
}

.support-chat-textarea {
    flex: 1;
    padding: calc(var(--spacing-unit) * 2.5);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.6;
}

.support-chat-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.support-chat-send-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.support-chat-send-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.support-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.support-chat-send-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.support-chat-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: calc(var(--spacing-unit) * 1.5);
}

.support-chat-closed {
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--border-base);
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
}

.support-chat-closed i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.support-show-sidebar {
    display: flex;
    flex-direction: column;
}

.support-info-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
}

.support-info-header {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.support-info-header i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: var(--primary);
}

.support-info-header-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3);
}

.support-info-header-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
    color: white;
}

.support-info-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.support-info-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.support-info-content,
.support-info-items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.support-info-item {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.support-info-item label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.support-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.support-info-value-mono {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
}

.support-info-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.support-info-item-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.support-info-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.support-info-item-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.support-actions {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.support-actions-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.support-actions-title i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--primary);
}

.support-actions-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.support-action-btn {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.support-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.support-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.support-info-actions {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

/* Support Index Page (index.blade.php) */
.support-index-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1400px;
    margin: 0 auto;
}

.support-index-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.support-index-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 3);
}

.support-index-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.support-index-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.support-index-header-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.support-index-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing-unit) * 4);
}

.support-index-main {
    display: flex;
    flex-direction: column;
}

.support-tickets-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
}

.support-tickets-card-header {
    padding: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.support-tickets-card-header-content {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2.5);
}

.support-tickets-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--primary);
    flex-shrink: 0;
}

.support-tickets-card-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.support-tickets-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.support-tickets-card-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.support-tickets-list {
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.support-ticket-item {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.support-ticket-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.support-ticket-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.support-ticket-item-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex: 1;
}

.support-ticket-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-ticket-item-icon i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.support-ticket-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.support-ticket-item-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.support-ticket-item-status {
    flex-shrink: 0;
}

.support-ticket-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.support-ticket-item-date,
.support-ticket-item-updated {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.support-ticket-item-date i,
.support-ticket-item-updated i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-muted);
}

.support-index-sidebar {
    display: flex;
    flex-direction: column;
}

/* Responsive Support Pages */
@media (max-width: 1024px) {
    .support-show-content,
    .support-index-content {
        grid-template-columns: 1fr;
    }

    .support-chat-card {
        height: 600px;
    }
}

@media (max-width: 768px) {
    .support-ticket-wrapper,
    .support-create-wrapper,
    .support-show-wrapper,
    .support-index-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .support-ticket-title,
    .support-create-title,
    .support-show-title,
    .support-index-title {
        font-size: 1.75rem;
    }

    .support-ticket-header-content,
    .support-create-header-content,
    .support-show-header-content,
    .support-index-header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-show-header-actions,
    .support-index-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .support-form-card,
    .support-tickets-list-card,
    .support-create-form-card,
    .support-chat-card,
    .support-info-card,
    .support-tickets-card {
        padding: calc(var(--spacing-unit) * 3);
    }

    .support-message-content {
        max-width: 85%;
    }

    .support-chat-card {
        height: 500px;
    }

    .support-tickets-table {
        font-size: 0.85rem;
    }

    .support-tickets-table th,
    .support-tickets-table td {
        padding: calc(var(--spacing-unit) * 2);
    }
}

@media (max-width: 480px) {
    .support-btn {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
        font-size: 0.85rem;
    }

    .support-ticket-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-ticket-item-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-message-avatar {
        display: none;
    }
}

/* ============================================
   SETTINGS PAGE - NEW DESIGN
   ============================================ */

.settings-wrapper {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 1000px;
    margin: 0 auto;
}

.settings-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.settings-header-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto calc(var(--spacing-unit) * 3) auto;
}

.settings-header-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 2;
}

.settings-header-text {
    max-width: 600px;
    margin: 0 auto;
}

.settings-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.settings-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
}

.settings-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    padding: calc(var(--spacing-unit) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

.settings-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.settings-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-card-icon i {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.settings-card-content {
    flex: 1;
}

.settings-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.settings-card-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.settings-card-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.2s;
}

.settings-card:hover .settings-card-arrow {
    background: var(--primary);
    color: white;
    transform: translateX(4px);
}

.settings-card-arrow i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-wrapper {
        padding: calc(var(--spacing-unit) * 2);
    }

    .settings-title {
        font-size: 2rem;
    }

    .settings-subtitle {
        font-size: 1rem;
    }

    .settings-header-icon {
        width: 60px;
        height: 60px;
    }

    .settings-header-icon i {
        width: 30px;
        height: 30px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 3);
    }

    .settings-card {
        padding: calc(var(--spacing-unit) * 3);
        flex-direction: column;
        text-align: center;
        gap: calc(var(--spacing-unit) * 2);
    }

    .settings-card-icon {
        width: 56px;
        height: 56px;
    }

    .settings-card-icon i {
        width: 28px;
        height: 28px;
    }

    .settings-card-arrow {
        display: none;
    }
}

/* === MARKETPLACE PRODUCTS === */
.marketplace-products {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.marketplace-products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-products-header-main {
    flex: 1;
}

.marketplace-products-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.marketplace-products-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.marketplace-products-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: center;
}

.marketplace-products-create {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.marketplace-products-create:hover {
    opacity: 0.9;
}

.marketplace-products-create i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-products-export {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-export:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-export i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-products-filters {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 4);
    flex-wrap: wrap;
    align-items: center;
}

.marketplace-products-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.marketplace-products-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.marketplace-products-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-products-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-products-filters-dropdown {
    position: relative;
}

.marketplace-products-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-filters-toggle.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.marketplace-products-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-products-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    transition: transform 0.2s;
}

.marketplace-products-filters-toggle.active .marketplace-products-filters-chevron {
    transform: rotate(180deg);
}

.marketplace-products-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    min-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.marketplace-products-filters-panel.active {
    display: block;
}

.marketplace-products-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-products-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-products-filter-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.marketplace-products-filter-select,
.marketplace-products-filter-input {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-products-filter-select:focus,
.marketplace-products-filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-products-filters-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-products-filters-reset {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: transparent;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-filters-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-filters-reset i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.marketplace-products-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-products-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-products-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-products-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-products-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-products-stat-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-products-stat-content {
    flex: 1;
}

.marketplace-products-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-products-stat-separator {
    color: var(--text-muted);
    margin: 0 calc(var(--spacing-unit) * 1);
    font-weight: 400;
}

.marketplace-products-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-products-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-products-table {
    width: 100%;
    border-collapse: collapse;
}

.marketplace-products-table thead {
    background: var(--bg-secondary);
}

.marketplace-products-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-base);
}

.marketplace-products-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-base);
}

.marketplace-products-table tbody tr:hover {
    background: var(--bg-secondary);
}

.marketplace-products-table tbody tr:last-child td {
    border-bottom: none;
}

.marketplace-products-table-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-base);
}

.marketplace-products-table-placeholder {
    color: var(--text-muted);
}

.marketplace-products-badge {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.25);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.marketplace-products-badge-digital {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.marketplace-products-badge-physical {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-products-badge-public {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.marketplace-products-badge-private {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-products-icon-success {
    width: 18px;
    height: 18px;
    color: var(--primary);
    stroke-width: 2;
}

.marketplace-products-icon-muted {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    stroke-width: 2;
}

.marketplace-products-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    justify-content: center;
}

.marketplace-products-table-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-table-action-select:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.marketplace-products-table-action-edit:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.marketplace-products-table-action-delete:hover {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

.marketplace-products-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.marketplace-products-table-loading,
.marketplace-products-table-empty {
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) !important;
}

.marketplace-products-loading,
.marketplace-products-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.marketplace-products-loading i {
    width: 32px;
    height: 32px;
    color: var(--primary);
    stroke-width: 2;
    animation: spin 1s linear infinite;
}

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

.marketplace-products-empty i {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    stroke-width: 2;
}

.marketplace-products-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
}

.marketplace-products-pagination-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-products-pagination-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-products-pagination-select {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-pagination-select:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-products-pagination-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-products-pagination-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-products-pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.marketplace-products-pagination-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-products-selected-info {
    position: fixed;
    bottom: calc(var(--spacing-unit) * 3);
    right: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    color: white;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 999;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.marketplace-products-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: calc(var(--spacing-unit) * 3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.marketplace-products-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.marketplace-products-modal {
    background: var(--bg-elevated);
    border-radius: 6px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.marketplace-products-modal-overlay.active .marketplace-products-modal {
    transform: scale(1);
}

.marketplace-products-modal-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-products-modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
}

.marketplace-products-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-products-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-products-modal-body {
    padding: calc(var(--spacing-unit) * 3);
    overflow-y: auto;
    flex: 1;
}

.marketplace-products-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-products-modal-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-products-modal-field-full {
    grid-column: 1 / -1;
}

.marketplace-products-modal-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.marketplace-products-modal-input,
.marketplace-products-modal-select,
.marketplace-products-modal-textarea {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s;
    width: 100%;
}

.marketplace-products-modal-input:focus,
.marketplace-products-modal-select:focus,
.marketplace-products-modal-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-products-modal-textarea {
    resize: vertical;
    min-height: 100px;
}

.marketplace-products-modal-preview {
    margin-top: calc(var(--spacing-unit) * 1);
}

.marketplace-products-modal-preview-image {
    max-width: 150px;
    max-height: 150px;
    border-radius: 6px;
    border: 1px solid var(--border-base);
    object-fit: cover;
}

.marketplace-products-modal-switch {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    cursor: pointer;
}

.marketplace-products-modal-switch input[type="checkbox"] {
    display: none;
}

.marketplace-products-modal-switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 12px;
    transition: all 0.2s;
}

.marketplace-products-modal-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.2s;
}

.marketplace-products-modal-switch input[type="checkbox"]:checked + .marketplace-products-modal-switch-slider {
    background: var(--primary);
    border-color: var(--primary);
}

.marketplace-products-modal-switch input[type="checkbox"]:checked + .marketplace-products-modal-switch-slider::before {
    transform: translateX(20px);
    background: white;
}

.marketplace-products-modal-switch-label {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.marketplace-products-modal-section {
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.marketplace-products-modal-section-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-products-modal-info {
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.marketplace-products-modal-info strong {
    color: var(--text-primary);
    font-weight: 600;
}

.marketplace-products-modal-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-products-modal-cancel {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-products-modal-cancel:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-products-modal-submit {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.marketplace-products-modal-submit:hover {
    opacity: 0.9;
}

/* === RESPONSIVE MARKETPLACE PRODUCTS === */
@media (max-width: 768px) {
    .marketplace-products {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-products-title {
        font-size: 1.5rem;
    }

    .marketplace-products-header {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-products-header-actions {
        width: 100%;
    }

    .marketplace-products-create,
    .marketplace-products-export {
        flex: 1;
        justify-content: center;
    }

    .marketplace-products-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-products-search-wrapper {
        width: 100%;
    }

    .marketplace-products-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .marketplace-products-filters-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-products-stats {
        grid-template-columns: 1fr;
    }

    .marketplace-products-table-wrapper {
        overflow-x: auto;
    }

    .marketplace-products-table {
        min-width: 800px;
    }

    .marketplace-products-table th,
    .marketplace-products-table td {
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
        font-size: 0.85rem;
    }

    .marketplace-products-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-products-pagination-info {
        width: 100%;
        justify-content: space-between;
    }

    .marketplace-products-modal {
        max-height: 95vh;
        margin: calc(var(--spacing-unit) * 2);
    }

    .marketplace-products-modal-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-products-modal-footer {
        flex-direction: column;
    }

    .marketplace-products-modal-cancel,
    .marketplace-products-modal-submit {
        width: 100%;
    }

    .marketplace-products-selected-info {
        bottom: calc(var(--spacing-unit) * 2);
        right: calc(var(--spacing-unit) * 2);
        left: calc(var(--spacing-unit) * 2);
        text-align: center;
    }
}

/* === MARKETPLACE MANAGER === */
.marketplace-manager {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.marketplace-manager-header {
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

.marketplace-manager-header-main {
    flex: 1;
}

.marketplace-manager-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 0.5) 0;
    letter-spacing: -0.02em;
}

.marketplace-manager-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
}

.marketplace-manager-navigation {
    margin-bottom: calc(var(--spacing-unit) * 4);
    position: relative;
}

.marketplace-manager-navigation-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-manager-nav-scroll {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.marketplace-manager-nav-scroll:hover {
    opacity: 0.9;
}

.marketplace-manager-nav-scroll i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-manager-nav-scroll:first-child {
    left: calc(var(--spacing-unit) * -1);
}

.marketplace-manager-nav-scroll:last-child {
    right: calc(var(--spacing-unit) * -1);
}

.marketplace-manager-nav-carousel {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.marketplace-manager-nav-carousel::-webkit-scrollbar {
    height: 4px;
}

.marketplace-manager-nav-carousel::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.marketplace-manager-nav-carousel::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 2px;
}

.marketplace-manager-nav-carousel::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

.marketplace-manager-nav-tabs {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    min-width: max-content;
    padding: calc(var(--spacing-unit) * 1) 0;
    border-bottom: 2px solid var(--border-base);
}

.marketplace-manager-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.marketplace-manager-nav-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-radius: 6px 6px 0 0;
}

.marketplace-manager-nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--bg-secondary);
}

.marketplace-manager-nav-tab i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
}

.marketplace-manager-content {
    position: relative;
    min-height: 400px;
}

.marketplace-manager-tab-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.marketplace-manager-tab-pane.show {
    display: block;
}

.marketplace-manager-tab-pane.show.active {
    opacity: 1;
}

.marketplace-manager-tab-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 3);
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.marketplace-manager-tab-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: marketplace-spin 0.8s linear infinite;
}

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

.marketplace-manager-tab-error {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 4);
    margin: calc(var(--spacing-unit) * 4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
}

.marketplace-manager-tab-error i {
    width: 24px;
    height: 24px;
    color: var(--primary);
    stroke-width: 2;
    flex-shrink: 0;
    margin-top: calc(var(--spacing-unit) * 0.25);
}

.marketplace-manager-tab-error strong {
    display: block;
    margin-bottom: calc(var(--spacing-unit) * 1);
    font-weight: 600;
    font-size: 1rem;
}

.marketplace-manager-tab-error p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* === RESPONSIVE MARKETPLACE MANAGER === */
@media (max-width: 768px) {
    .marketplace-manager {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-manager-title {
        font-size: 1.5rem;
    }

    .marketplace-manager-nav-scroll {
        width: 32px;
        height: 32px;
    }

    .marketplace-manager-nav-scroll:first-child {
        left: calc(var(--spacing-unit) * -0.5);
    }

    .marketplace-manager-nav-scroll:last-child {
        right: calc(var(--spacing-unit) * -0.5);
    }

    .marketplace-manager-nav-scroll i {
        width: 16px;
        height: 16px;
    }

    .marketplace-manager-nav-tab {
        padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 1.5);
        font-size: 0.85rem;
    }

    .marketplace-manager-nav-tab i {
        width: 16px;
        height: 16px;
    }

    .marketplace-manager-nav-tabs {
        gap: calc(var(--spacing-unit) * 0.5);
    }

    .marketplace-manager-content {
        min-height: 300px;
    }
}

/* === MARKETPLACE VITRINE INDEX === */
.marketplace-vitrine {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.marketplace-vitrine-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-vitrine-header-main {
    flex: 1;
}

.marketplace-vitrine-title-group {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-vitrine-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-vitrine-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-vitrine-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 1) 0;
    letter-spacing: -0.02em;
}

.marketplace-vitrine-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 400;
    max-width: 600px;
}

.marketplace-vitrine-header-stats {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-vitrine-stat {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-vitrine-stat-badge {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.25);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.marketplace-vitrine-stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.marketplace-vitrine-refresh {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-vitrine-refresh:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-vitrine-refresh i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-manager-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: white;
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-vitrine-manager-btn:hover {
    opacity: 0.9;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.marketplace-vitrine-manager-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-filters-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-vitrine-filters-form {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.marketplace-vitrine-search-wrapper {
    flex: 1;
    min-width: 250px;
}

.marketplace-vitrine-search-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.marketplace-vitrine-search-label i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.marketplace-vitrine-search-input-group {
    position: relative;
}

.marketplace-vitrine-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.marketplace-vitrine-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-vitrine-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-vitrine-filters-dropdown {
    position: relative;
}

.marketplace-vitrine-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.marketplace-vitrine-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-vitrine-filters-toggle.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.marketplace-vitrine-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-vitrine-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    transition: transform 0.2s;
}

.marketplace-vitrine-filters-toggle.active .marketplace-vitrine-filters-chevron {
    transform: rotate(180deg);
}

.marketplace-vitrine-filters-indicator {
    position: absolute;
    top: calc(var(--spacing-unit) * 0.75);
    right: calc(var(--spacing-unit) * 0.75);
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

.marketplace-vitrine-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    min-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.marketplace-vitrine-filters-panel.active {
    display: block;
}

.marketplace-vitrine-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-vitrine-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-vitrine-filter-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.marketplace-vitrine-filter-label i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.marketplace-vitrine-filter-select,
.marketplace-vitrine-filter-input {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-vitrine-filter-select:focus,
.marketplace-vitrine-filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-vitrine-filters-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-vitrine-filters-apply {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.marketplace-vitrine-filters-apply:hover {
    opacity: 0.9;
}

.marketplace-vitrine-filters-apply i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-filters-clear {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-vitrine-filters-clear:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-vitrine-filters-clear i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-filters-active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
    flex-wrap: wrap;
}

.marketplace-vitrine-filters-info {
    flex: 1;
}

.marketplace-vitrine-filters-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-vitrine-filters-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.marketplace-vitrine-filters-chips {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    flex-wrap: wrap;
}

.marketplace-vitrine-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.25);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.marketplace-vitrine-filter-chip i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.marketplace-vitrine-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 640px) {
    .marketplace-vitrine-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .marketplace-vitrine-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1536px) {
    .marketplace-vitrine-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.marketplace-vitrine-product-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.marketplace-vitrine-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.marketplace-vitrine-product-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.marketplace-vitrine-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketplace-vitrine-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.marketplace-vitrine-product-placeholder i {
    width: 48px;
    height: 48px;
    stroke-width: 2;
}

.marketplace-vitrine-product-badges {
    position: absolute;
    top: calc(var(--spacing-unit) * 1.5);
    left: calc(var(--spacing-unit) * 1.5);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-vitrine-product-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.marketplace-vitrine-product-badge i {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.marketplace-vitrine-product-badge-digital {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-vitrine-product-badge-physical {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-vitrine-product-badge-commission {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-vitrine-product-checkout-btn {
    position: absolute;
    top: calc(var(--spacing-unit) * 1.5);
    right: calc(var(--spacing-unit) * 1.5);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-vitrine-product-checkout-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.marketplace-vitrine-product-checkout-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-product-body {
    padding: calc(var(--spacing-unit) * 3);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.marketplace-vitrine-product-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.marketplace-vitrine-product-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.marketplace-vitrine-product-description-empty {
    color: var(--text-muted);
    font-style: italic;
}

.marketplace-vitrine-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-vitrine-product-price {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
}

.marketplace-vitrine-product-details {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s;
}

.marketplace-vitrine-product-details:hover {
    color: var(--primary);
}

.marketplace-vitrine-product-details i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.marketplace-vitrine-product-actions {
    margin-top: auto;
}

.marketplace-vitrine-product-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-vitrine-product-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-product-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.marketplace-vitrine-product-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.marketplace-vitrine-product-btn-disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border-base);
    cursor: not-allowed;
    opacity: 0.6;
}

.marketplace-vitrine-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
}

.marketplace-vitrine-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
    background: var(--primary);
    border-radius: 50%;
}

.marketplace-vitrine-empty-icon i {
    width: 40px;
    height: 40px;
    color: white;
    stroke-width: 2;
}

.marketplace-vitrine-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 calc(var(--spacing-unit) * 1) 0;
}

.marketplace-vitrine-empty-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    max-width: 400px;
}

.marketplace-vitrine-pagination {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-top: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
}

.marketplace-vitrine-pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.marketplace-vitrine-pagination-info strong {
    color: var(--text-primary);
    font-weight: 600;
}

.marketplace-vitrine-pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    flex-wrap: wrap;
}

.marketplace-vitrine-pagination-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-vitrine-pagination-btn:hover:not(.marketplace-vitrine-pagination-btn-disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-vitrine-pagination-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.marketplace-vitrine-pagination-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-vitrine-pagination-page {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-vitrine-pagination-page:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-vitrine-pagination-page-active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.marketplace-vitrine-pagination-dots {
    padding: 0 calc(var(--spacing-unit) * 1);
    color: var(--text-muted);
    font-weight: 500;
}

.marketplace-vitrine-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: calc(var(--spacing-unit) * 3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.marketplace-vitrine-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.marketplace-vitrine-modal {
    background: var(--bg-elevated);
    border-radius: 6px;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.marketplace-vitrine-modal-overlay.active .marketplace-vitrine-modal {
    transform: scale(1);
}

.marketplace-vitrine-modal-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-vitrine-modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-vitrine-modal-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: var(--primary);
}

.marketplace-vitrine-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-vitrine-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-vitrine-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-vitrine-modal-body {
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-vitrine-modal-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    line-height: 1.6;
}

.marketplace-vitrine-modal-text code {
    padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.marketplace-vitrine-modal-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-vitrine-modal-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

.marketplace-vitrine-modal-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-vitrine-modal-copy {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.marketplace-vitrine-modal-copy:hover {
    opacity: 0.9;
}

.marketplace-vitrine-modal-copy i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-vitrine-modal-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-vitrine-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 3);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-vitrine-modal-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-vitrine-modal-btn-primary {
    background: var(--primary);
    border: none;
    color: white;
}

.marketplace-vitrine-modal-btn-primary:hover {
    opacity: 0.9;
}

.marketplace-vitrine-modal-btn-secondary {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
}

.marketplace-vitrine-modal-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === MARKETPLACE PRODUCT SHOW === */
.marketplace-product-show {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-header-main {
    flex: 1;
}

.marketplace-product-show-back {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-back:hover {
    color: var(--primary);
}

.marketplace-product-show-back i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-product-show-title-group {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-product-show-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-product-show-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
    letter-spacing: -0.02em;
}

.marketplace-product-show-badges {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    flex-wrap: wrap;
}

.marketplace-product-show-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.25);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.marketplace-product-show-badge i {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.marketplace-product-show-badge-digital {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-product-show-badge-physical {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-product-show-badge-commission {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-product-show-badge-public {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-product-show-badge-private {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-product-show-checkout {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.marketplace-product-show-checkout:hover {
    opacity: 0.9;
}

.marketplace-product-show-checkout i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-product-show-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 1024px) {
    .marketplace-product-show-content {
        grid-template-columns: 5fr 7fr;
    }
}

.marketplace-product-show-left {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-gallery {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-main-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg-secondary);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketplace-product-show-thumbnails {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    flex-wrap: wrap;
}

.marketplace-product-show-thumbnail {
    width: 70px;
    height: 70px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.marketplace-product-show-thumbnail:hover {
    border-color: var(--primary);
}

.marketplace-product-show-thumbnail.active {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.marketplace-product-show-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.marketplace-product-show-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 6px;
}

.marketplace-product-show-placeholder i {
    width: 48px;
    height: 48px;
    stroke-width: 2;
}

.marketplace-product-show-logo-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-logo-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 6px;
    flex-shrink: 0;
}

.marketplace-product-show-logo-icon i {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    stroke-width: 2;
}

.marketplace-product-show-logo-content {
    flex: 1;
}

.marketplace-product-show-logo-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-product-show-logo-image {
    max-height: 46px;
    max-width: 200px;
    border-radius: 4px;
    border: 1px solid var(--border-base);
}

.marketplace-product-show-logo-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-product-show-logo-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-logo-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-product-show-right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-price-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-price-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
}

@media (min-width: 768px) {
    .marketplace-product-show-price-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.marketplace-product-show-price-info {
    flex: 1;
}

.marketplace-product-show-price-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-product-show-price-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.marketplace-product-show-stock {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.marketplace-product-show-stock i {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.marketplace-product-show-price-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-product-show-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-base);
}

.marketplace-product-show-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-product-show-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.marketplace-product-show-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.marketplace-product-show-btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-base);
}

.marketplace-product-show-btn-secondary:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-btn-disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border-base);
    cursor: not-allowed;
    opacity: 0.6;
}

.marketplace-product-show-info-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .marketplace-product-show-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.marketplace-product-show-info-item {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
}

.marketplace-product-show-info-item-full {
    grid-column: 1 / -1;
}

.marketplace-product-show-info-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 6px;
    flex-shrink: 0;
}

.marketplace-product-show-info-icon i {
    width: 20px;
    height: 20px;
    color: var(--primary);
    stroke-width: 2;
}

.marketplace-product-show-info-content {
    flex: 1;
}

.marketplace-product-show-info-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-product-show-info-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.marketplace-product-show-status-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.marketplace-product-show-status-badge i {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.marketplace-product-show-status-approved {
    background: rgba(37, 99, 235, 0.2);
    color: var(--primary);
    border: 1px solid var(--primary);
}

.marketplace-product-show-status-pending {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-product-show-status-blocked {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-base);
}

.marketplace-product-show-status-none {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-base);
}

.marketplace-product-show-code-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    flex-wrap: wrap;
}

.marketplace-product-show-code {
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.marketplace-product-show-code-copy {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-product-show-code-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-code-copy i {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.marketplace-product-show-description-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-description-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-product-show-description-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: var(--primary);
}

.marketplace-product-show-description-content {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.marketplace-product-show-description-empty {
    color: var(--text-muted);
    font-style: italic;
}

.marketplace-product-show-checkout-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-checkout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-checkout-card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-product-show-checkout-card-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: var(--primary);
}

.marketplace-product-show-checkout-card-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}

.marketplace-product-show-checkout-card-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-checkout-card-link i {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.marketplace-product-show-checkout-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: calc(var(--spacing-unit) * 2);
}

@media (min-width: 768px) {
    .marketplace-product-show-checkout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.marketplace-product-show-checkout-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-product-show-checkout-field-full {
    grid-column: 1 / -1;
}

.marketplace-product-show-checkout-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-product-show-checkout-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.marketplace-product-show-checkout-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-product-show-checkout-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

.marketplace-product-show-checkout-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-product-show-checkout-copy {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.marketplace-product-show-checkout-copy:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-checkout-copy i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-product-show-checkout-banners {
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
}

.marketplace-product-show-checkout-banners-grid {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-product-show-checkout-banner {
    width: 120px;
    height: 70px;
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
    display: block;
}

.marketplace-product-show-checkout-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.marketplace-product-show-checkout-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketplace-product-show-affiliation-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-affiliation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-product-show-affiliation-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-product-show-affiliation-title i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: var(--primary);
}

.marketplace-product-show-affiliation-alert {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-product-show-affiliation-alert i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.marketplace-product-show-affiliation-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-affiliation-input-group {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-affiliation-input {
    flex: 1;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
}

.marketplace-product-show-affiliation-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-product-show-affiliation-copy {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.marketplace-product-show-affiliation-copy:hover {
    opacity: 0.9;
}

.marketplace-product-show-affiliation-copy i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-product-show-affiliation-open {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.marketplace-product-show-affiliation-open:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-product-show-affiliation-open i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-product-show-affiliation-success {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    font-size: 0.9rem;
}

.marketplace-product-show-affiliation-success i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 2px;
}

.marketplace-product-show-affiliation-warning {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.marketplace-product-show-affiliation-warning i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 2px;
}

.marketplace-product-show-affiliation-error {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-product-show-affiliation-error i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 2px;
}

.marketplace-product-show-affiliation-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

/* === RESPONSIVE MARKETPLACE VITRINE === */
@media (max-width: 768px) {
    .marketplace-vitrine,
    .marketplace-product-show {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-vitrine-title,
    .marketplace-product-show-title {
        font-size: 1.5rem;
    }

    .marketplace-vitrine-header,
    .marketplace-product-show-header {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-vitrine-header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .marketplace-vitrine-filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-vitrine-search-wrapper {
        width: 100%;
    }

    .marketplace-vitrine-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .marketplace-vitrine-filters-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-vitrine-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-product-show-content {
        grid-template-columns: 1fr;
    }

    .marketplace-product-show-price-section {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-product-show-price-actions {
        width: 100%;
    }

    .marketplace-product-show-btn {
        flex: 1;
        justify-content: center;
    }

    .marketplace-product-show-info-grid {
        grid-template-columns: 1fr;
    }
}

/* === MARKETPLACE ORDER BUMPS === */
.marketplace-orderbumps {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 100%;
}

.marketplace-orderbumps-header {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 3);
    align-items: flex-end;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-orderbumps-header-main {
    flex: 1;
    min-width: 200px;
}

.marketplace-orderbumps-title-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-orderbumps-title-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-orderbumps-title-icon i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2;
}

.marketplace-orderbumps-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0;
    line-height: 1.2;
}

.marketplace-orderbumps-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.marketplace-orderbumps-search-wrapper {
    position: relative;
    min-width: 240px;
    max-width: 360px;
}

.marketplace-orderbumps-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.marketplace-orderbumps-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-orderbumps-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-orderbumps-filters-dropdown {
    position: relative;
}

.marketplace-orderbumps-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-orderbumps-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-filters-toggle.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-secondary);
}

.marketplace-orderbumps-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    transition: transform 0.2s;
}

.marketplace-orderbumps-filters-toggle.active .marketplace-orderbumps-filters-chevron {
    transform: rotate(180deg);
}

.marketplace-orderbumps-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    min-width: 380px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.marketplace-orderbumps-filters-panel.active {
    display: block;
}

.marketplace-orderbumps-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-orderbumps-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-orderbumps-filter-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.marketplace-orderbumps-filter-select,
.marketplace-orderbumps-filter-input {
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-orderbumps-filter-select:focus,
.marketplace-orderbumps-filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-orderbumps-filters-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-orderbumps-filters-reset {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-orderbumps-filters-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-filters-reset i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-filters-apply {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5);
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.marketplace-orderbumps-filters-apply:hover {
    opacity: 0.9;
}

.marketplace-orderbumps-filters-apply i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-orderbumps-action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-orderbumps-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-action-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-orderbumps-action-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-orderbumps-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-orderbumps-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-orderbumps-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-orderbumps-stat-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-orderbumps-stat-content {
    flex: 1;
}

.marketplace-orderbumps-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-orderbumps-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-orderbumps-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-orderbumps-table {
    width: 100%;
    border-collapse: collapse;
}

.marketplace-orderbumps-table thead {
    background: var(--bg-secondary);
}

.marketplace-orderbumps-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-base);
}

.marketplace-orderbumps-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-base);
}

.marketplace-orderbumps-table tbody tr:hover {
    background: var(--bg-secondary);
}

.marketplace-orderbumps-table tbody tr:last-child td {
    border-bottom: none;
}

.marketplace-orderbumps-table-loading {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.marketplace-orderbumps-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.marketplace-orderbumps-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.marketplace-orderbumps-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-orderbumps-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
    justify-content: center;
}

.marketplace-orderbumps-table-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-orderbumps-table-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-table-action-delete:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-orderbumps-table-action i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-orderbumps-pagination-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-orderbumps-pagination-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-orderbumps-pagination-select {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100px;
}

.marketplace-orderbumps-pagination-select:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-orderbumps-pagination-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-orderbumps-pagination-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-orderbumps-pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-orderbumps-pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.marketplace-orderbumps-pagination-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    padding: calc(var(--spacing-unit) * 2);
}

.marketplace-orderbumps-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.marketplace-orderbumps-modal {
    background: var(--bg-elevated);
    border-radius: 6px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.marketplace-orderbumps-modal-overlay.active .marketplace-orderbumps-modal {
    transform: scale(1);
}

.marketplace-orderbumps-modal-header {
    padding: calc(var(--spacing-unit) * 3);
    border-bottom: 1px solid var(--border-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-orderbumps-modal-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
}

.marketplace-orderbumps-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-orderbumps-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-orderbumps-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-orderbumps-modal-body {
    padding: calc(var(--spacing-unit) * 3);
    overflow-y: auto;
    flex: 1;
}

.marketplace-orderbumps-modal-alert {
    padding: calc(var(--spacing-unit) * 2);
    border-radius: 6px;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 0.9rem;
}

.marketplace-orderbumps-modal-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.marketplace-orderbumps-modal-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.marketplace-orderbumps-modal-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-orderbumps-modal-form-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.marketplace-orderbumps-modal-form-input,
.marketplace-orderbumps-modal-form-select,
.marketplace-orderbumps-modal-form-textarea {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s;
    width: 100%;
}

.marketplace-orderbumps-modal-form-input:focus,
.marketplace-orderbumps-modal-form-select:focus,
.marketplace-orderbumps-modal-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-orderbumps-modal-form-textarea {
    resize: vertical;
    min-height: 100px;
}

.marketplace-orderbumps-modal-form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-orderbumps-modal-footer {
    padding: calc(var(--spacing-unit) * 3);
    border-top: 1px solid var(--border-base);
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-orderbumps-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.marketplace-orderbumps-modal-btn-secondary {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
}

.marketplace-orderbumps-modal-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-orderbumps-modal-btn-primary {
    background: var(--primary);
    color: white;
}

.marketplace-orderbumps-modal-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.marketplace-orderbumps-modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.marketplace-orderbumps-modal-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* === RESPONSIVE MARKETPLACE ORDER BUMPS === */
@media (max-width: 768px) {
    .marketplace-orderbumps {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-orderbumps-header {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-orderbumps-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .marketplace-orderbumps-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .marketplace-orderbumps-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .marketplace-orderbumps-filters-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-orderbumps-stats {
        grid-template-columns: 1fr;
    }

    .marketplace-orderbumps-table-wrapper {
        overflow-x: auto;
    }

    .marketplace-orderbumps-table {
        min-width: 800px;
    }

    .marketplace-orderbumps-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-orderbumps-pagination-info {
        width: 100%;
        justify-content: space-between;
    }

    .marketplace-orderbumps-modal {
        max-height: 95vh;
        margin: 0;
    }
}

/* === MARKETPLACE DOWNSELLS === */
.marketplace-downsells {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 100%;
}

.marketplace-downsells-header {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 3);
    align-items: flex-end;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-downsells-header-main {
    flex: 1;
    min-width: 200px;
}

.marketplace-downsells-title-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-downsells-title-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-downsells-title-icon i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2;
}

.marketplace-downsells-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0;
    line-height: 1.2;
}

.marketplace-downsells-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.marketplace-downsells-search-wrapper {
    position: relative;
    min-width: 240px;
    max-width: 360px;
}

.marketplace-downsells-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.marketplace-downsells-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-downsells-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-downsells-filters-dropdown {
    position: relative;
}

.marketplace-downsells-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-downsells-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-downsells-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-downsells-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.2s;
}

.marketplace-downsells-filters-dropdown.active .marketplace-downsells-filters-chevron {
    transform: rotate(180deg);
}

.marketplace-downsells-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    min-width: 440px;
    max-width: 92vw;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: calc(var(--spacing-unit) * 3);
    z-index: 1000;
    display: none;
}

.marketplace-downsells-filters-dropdown.active .marketplace-downsells-filters-panel {
    display: block;
}

.marketplace-downsells-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-downsells-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-downsells-filter-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.marketplace-downsells-filter-select,
.marketplace-downsells-filter-input {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-base);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-downsells-filter-select:focus,
.marketplace-downsells-filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-downsells-filters-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    justify-content: flex-end;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-downsells-filters-reset,
.marketplace-downsells-filters-apply {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-downsells-filters-reset {
    background: var(--bg-base);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
}

.marketplace-downsells-filters-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-downsells-filters-apply {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: white;
}

.marketplace-downsells-filters-apply:hover {
    opacity: 0.9;
}

.marketplace-downsells-filters-reset i,
.marketplace-downsells-filters-apply i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-downsells-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-downsells-action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-downsells-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-downsells-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-downsells-action-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-downsells-action-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-downsells-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-downsells-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-downsells-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-downsells-stat-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-downsells-stat-content {
    flex: 1;
}

.marketplace-downsells-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-downsells-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-downsells-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-downsells-table {
    width: 100%;
    border-collapse: collapse;
}

.marketplace-downsells-table thead {
    background: var(--bg-secondary);
}

.marketplace-downsells-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-base);
}

.marketplace-downsells-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-base);
}

.marketplace-downsells-table tbody tr:hover {
    background: var(--bg-secondary);
}

.marketplace-downsells-table tbody tr:last-child td {
    border-bottom: none;
}

.marketplace-downsells-table-loading {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.marketplace-downsells-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.marketplace-downsells-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.marketplace-downsells-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.marketplace-downsells-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
}

.marketplace-downsells-empty-icon i {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    stroke-width: 2;
}

.marketplace-downsells-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-downsells-empty-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-downsells-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.marketplace-downsells-badge-standard {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-downsells-badge-custom {
    background: var(--primary);
    color: white;
}

.marketplace-downsells-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
}

.marketplace-downsells-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.marketplace-downsells-table-action:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.marketplace-downsells-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-downsells-table-action-delete:hover {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: #ef4444;
}

.marketplace-downsells-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-downsells-pagination-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-downsells-pagination-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-downsells-pagination-select {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-downsells-pagination-select:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-downsells-pagination-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.marketplace-downsells-pagination-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
}

.marketplace-downsells-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-downsells-pagination-btn:hover:not(.marketplace-downsells-pagination-btn-disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-downsells-pagination-btn-active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-downsells-pagination-btn-active:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-downsells-pagination-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.marketplace-downsells-pagination-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-downsells-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 2);
}

.marketplace-downsells-modal-overlay.active {
    display: flex;
}

.marketplace-downsells-modal {
    background: var(--bg-base);
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.marketplace-downsells-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.marketplace-downsells-modal-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
}

.marketplace-downsells-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.marketplace-downsells-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-downsells-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-downsells-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.marketplace-downsells-modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-downsells-modal-form-column {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-downsells-modal-form-column.full-width {
    grid-column: 1 / -1;
}

.marketplace-downsells-modal-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-downsells-modal-form-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.marketplace-downsells-modal-form-input,
.marketplace-downsells-modal-form-select,
.marketplace-downsells-modal-form-textarea {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: inherit;
}

.marketplace-downsells-modal-form-input:focus,
.marketplace-downsells-modal-form-select:focus,
.marketplace-downsells-modal-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-downsells-modal-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.marketplace-downsells-modal-form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-downsells-modal-form-switch {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    cursor: pointer;
}

.marketplace-downsells-modal-form-checkbox {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-base);
    transition: all 0.2s;
    cursor: pointer;
}

.marketplace-downsells-modal-form-checkbox:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
}

.marketplace-downsells-modal-form-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.marketplace-downsells-modal-form-switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.marketplace-downsells-modal-form-checkbox:has(input:checked) .marketplace-downsells-modal-form-switch-slider {
    transform: translateX(20px);
}

.marketplace-downsells-modal-form-switch-label {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

.marketplace-downsells-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

.marketplace-downsells-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.marketplace-downsells-modal-btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-base);
    color: var(--text-primary);
}

.marketplace-downsells-modal-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-downsells-modal-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-downsells-modal-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-downsells-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-downsells-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === RESPONSIVE MARKETPLACE DOWNSELLS === */
@media (max-width: 768px) {
    .marketplace-downsells {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-downsells-header {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-downsells-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .marketplace-downsells-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .marketplace-downsells-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .marketplace-downsells-filters-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-downsells-stats {
        grid-template-columns: 1fr;
    }

    .marketplace-downsells-table-wrapper {
        overflow-x: auto;
    }

    .marketplace-downsells-table {
        min-width: 800px;
    }

    .marketplace-downsells-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-downsells-pagination-info {
        width: 100%;
        justify-content: space-between;
    }

    .marketplace-downsells-modal {
        max-height: 95vh;
        margin: 0;
    }

    .marketplace-downsells-modal-form-grid {
        grid-template-columns: 1fr;
    }
}

/* === MARKETPLACE UPSELLS === */
.marketplace-upsells {
    padding: calc(var(--spacing-unit) * 4);
    max-width: 100%;
}

.marketplace-upsells-header {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 3);
    align-items: flex-end;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-upsells-header-main {
    flex: 1;
    min-width: 200px;
}

.marketplace-upsells-title-group {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}

.marketplace-upsells-title-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-upsells-title-icon i {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 2;
}

.marketplace-upsells-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0;
    line-height: 1.2;
}

.marketplace-upsells-count-info {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: calc(var(--spacing-unit) * 0.5);
}

.marketplace-upsells-header-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.marketplace-upsells-search-wrapper {
    position: relative;
    min-width: 240px;
    max-width: 360px;
}

.marketplace-upsells-search-icon {
    position: absolute;
    left: calc(var(--spacing-unit) * 2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    stroke-width: 2;
    pointer-events: none;
}

.marketplace-upsells-search-input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-upsells-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-upsells-filters-dropdown {
    position: relative;
}

.marketplace-upsells-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-upsells-filters-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-upsells-filters-toggle i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-upsells-filters-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    transition: transform 0.2s;
}

.marketplace-upsells-filters-dropdown.active .marketplace-upsells-filters-chevron {
    transform: rotate(180deg);
}

.marketplace-upsells-filters-panel {
    position: absolute;
    top: calc(100% + calc(var(--spacing-unit) * 1));
    right: 0;
    min-width: 440px;
    max-width: 92vw;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: calc(var(--spacing-unit) * 3);
    z-index: 1000;
    display: none;
}

.marketplace-upsells-filters-dropdown.active .marketplace-upsells-filters-panel {
    display: block;
}

.marketplace-upsells-filters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.marketplace-upsells-filter-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 0.5);
}

.marketplace-upsells-filter-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.marketplace-upsells-filter-select,
.marketplace-upsells-filter-input {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-base);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.marketplace-upsells-filter-select:focus,
.marketplace-upsells-filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-upsells-filters-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1.5);
    justify-content: flex-end;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-base);
}

.marketplace-upsells-filters-reset,
.marketplace-upsells-filters-apply {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-upsells-filters-reset {
    background: var(--bg-base);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
}

.marketplace-upsells-filters-reset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-upsells-filters-apply {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: white;
}

.marketplace-upsells-filters-apply:hover {
    opacity: 0.9;
}

.marketplace-upsells-filters-reset i,
.marketplace-upsells-filters-apply i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-upsells-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-upsells-action-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.marketplace-upsells-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-upsells-action-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-upsells-action-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-upsells-action-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-upsells-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-upsells-stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    padding: calc(var(--spacing-unit) * 3);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-upsells-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.marketplace-upsells-stat-icon i {
    width: 28px;
    height: 28px;
    color: white;
    stroke-width: 2;
}

.marketplace-upsells-stat-content {
    flex: 1;
}

.marketplace-upsells-stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-upsells-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-upsells-table-wrapper {
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.marketplace-upsells-table {
    width: 100%;
    border-collapse: collapse;
}

.marketplace-upsells-table thead {
    background: var(--bg-secondary);
}

.marketplace-upsells-table th {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-base);
}

.marketplace-upsells-table td {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5);
    color: var(--text-primary);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-base);
}

.marketplace-upsells-table tbody tr:hover {
    background: var(--bg-secondary);
}

.marketplace-upsells-table tbody tr:last-child td {
    border-bottom: none;
}

.marketplace-upsells-table-loading {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.marketplace-upsells-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2);
    color: var(--text-secondary);
}

.marketplace-upsells-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-base);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.marketplace-upsells-empty {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) !important;
}

.marketplace-upsells-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
}

.marketplace-upsells-empty-icon i {
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    stroke-width: 2;
}

.marketplace-upsells-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.marketplace-upsells-empty-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-upsells-table-actions {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
    justify-content: center;
}

.marketplace-upsells-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.marketplace-upsells-table-action:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.marketplace-upsells-table-action i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-upsells-table-action-delete:hover {
    background: var(--danger-light, rgba(239, 68, 68, 0.1));
    color: #ef4444;
}

.marketplace-upsells-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-upsells-pagination-info {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
}

.marketplace-upsells-pagination-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.marketplace-upsells-pagination-select {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-upsells-pagination-select:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-upsells-pagination-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.marketplace-upsells-pagination-controls {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    align-items: center;
}

.marketplace-upsells-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 calc(var(--spacing-unit) * 1.5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-upsells-pagination-btn:hover:not(.marketplace-upsells-pagination-btn-disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-upsells-pagination-btn-active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-upsells-pagination-btn-active:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-upsells-pagination-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.marketplace-upsells-pagination-btn i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.marketplace-upsells-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 2);
}

.marketplace-upsells-modal-overlay.active {
    display: flex;
}

.marketplace-upsells-modal {
    background: var(--bg-base);
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.marketplace-upsells-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-bottom: 1px solid var(--border-base);
}

.marketplace-upsells-modal-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
}

.marketplace-upsells-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

.marketplace-upsells-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.marketplace-upsells-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.marketplace-upsells-modal-body {
    padding: calc(var(--spacing-unit) * 4);
}

.marketplace-upsells-modal-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-upsells-modal-form-column {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 3);
}

.marketplace-upsells-modal-form-column.full-width {
    grid-column: 1 / -1;
}

.marketplace-upsells-modal-form-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 1);
}

.marketplace-upsells-modal-form-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.marketplace-upsells-modal-form-input,
.marketplace-upsells-modal-form-select,
.marketplace-upsells-modal-form-textarea {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: inherit;
}

.marketplace-upsells-modal-form-input:focus,
.marketplace-upsells-modal-form-select:focus,
.marketplace-upsells-modal-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.marketplace-upsells-modal-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.marketplace-upsells-modal-form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.marketplace-upsells-form-alert {
    padding: calc(var(--spacing-unit) * 2);
    border-radius: 6px;
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 0.9rem;
}

.marketplace-upsells-form-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.marketplace-upsells-form-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.marketplace-upsells-form-alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.marketplace-upsells-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
}

.marketplace-upsells-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2.5);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.marketplace-upsells-modal-btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-base);
    color: var(--text-primary);
}

.marketplace-upsells-modal-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.marketplace-upsells-modal-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.marketplace-upsells-modal-btn-primary:hover {
    opacity: 0.9;
    color: white;
}

.marketplace-upsells-modal-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.marketplace-upsells-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === RESPONSIVE MARKETPLACE UPSELLS === */
@media (max-width: 768px) {
    .marketplace-upsells {
        padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }

    .marketplace-upsells-header {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-upsells-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .marketplace-upsells-search-wrapper {
        width: 100%;
        max-width: none;
    }

    .marketplace-upsells-filters-panel {
        position: static;
        min-width: auto;
        width: 100%;
    }

    .marketplace-upsells-filters-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-upsells-stats {
        grid-template-columns: 1fr;
    }

    .marketplace-upsells-table-wrapper {
        overflow-x: auto;
    }

    .marketplace-upsells-table {
        min-width: 800px;
    }

    .marketplace-upsells-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .marketplace-upsells-pagination-info {
        width: 100%;
        justify-content: space-between;
    }

    .marketplace-upsells-modal {
        max-height: 95vh;
        margin: 0;
    }

    .marketplace-upsells-modal-form-grid {
        grid-template-columns: 1fr;
    }
}

/* === MAINTENANCE PAGE === */
.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--bg-main);
}

.maintenance-page-container {
    max-width: 600px;
    width: 100%;
}

.maintenance-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-base);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.maintenance-page-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.maintenance-page-icon i {
    width: 56px;
    height: 56px;
    color: white;
    stroke-width: 2;
}

.maintenance-page-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    letter-spacing: -0.02em;
}

.maintenance-page-message {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 calc(var(--spacing-unit) * 2) 0;
    max-width: 480px;
}

.maintenance-page-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0 calc(var(--spacing-unit) * 6) 0;
    line-height: 1.5;
}

.maintenance-page-logo {
    margin: calc(var(--spacing-unit) * 4) 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-page-logo img {
    max-height: 56px;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.9;
}

.maintenance-page-footer {
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 4);
    border-top: 1px solid var(--border-base);
    width: 100%;
}

.maintenance-page-footer-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
}

@media (max-width: 640px) {
    .maintenance-page-content {
        padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 3);
    }

    .maintenance-page-icon {
        width: 80px;
        height: 80px;
        margin-bottom: calc(var(--spacing-unit) * 4);
    }

    .maintenance-page-icon i {
        width: 48px;
        height: 48px;
    }

    .maintenance-page-title {
        font-size: 1.5rem;
    }

    .maintenance-page-message {
        font-size: 1rem;
    }

    .maintenance-page-subtitle {
        font-size: 0.9rem;
        margin-bottom: calc(var(--spacing-unit) * 5);
    }

    .maintenance-page-logo img {
        max-height: 48px;
    }
}