@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

.account-page input.form-control,
.account-page .form-select {
    background-color: #fff;
}

.border-silver {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #d4d4d4, #ebe5e5, #d4d4d4) border-box;
    box-shadow: 0 0 10px rgba(200, 200, 200, 0.6);
    animation: silver-pulse 2s infinite alternate;
}

@keyframes silver-pulse {
    0% {
        box-shadow: 0 0 10px rgb(210 206 206 / 60%);
    }

    100% {
        box-shadow: 0 0 25px rgb(221 212 212);
    }
}

.border-gold {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #e7d9ff, #dcdbd7, #e7d9ff) border-box;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    animation: gold-pulse 2s infinite alternate;
}

@keyframes gold-pulse {
    0% {
        box-shadow: 0 0 10px rgb(117 63 148 / 40%)
    }

    100% {
        box-shadow: 0 0 20px rgb(184 150 195 / 70%);
    }
}

.icon-refresh-btn-global {
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    opacity: .75;
    transition: opacity .15s ease, transform .1s ease;
}

    .icon-refresh-btn-global:hover {
        opacity: 1;
    }

    .icon-refresh-btn-global:active {
        transform: scale(0.96);
    }

.icon-refresh-img {
    width: 1.5rem;
    height: auto;
    display: block;
}


@media (max-width: 1024px) {
    .limits-container {
        margin-bottom: 2rem !important;
        padding-bottom: 1.5rem !important;
    }

    .codes-section {
        margin-top: 1.5rem !important;
    }
}

.limits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    min-height: 2.5rem;
}

.limits-title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.limits-refresh-btn {
    flex-shrink: 0;
}

.codes-section {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    .limits-container {
        margin-bottom: 2rem !important;
        padding-bottom: 1.5rem !important;
    }

    .codes-section {
        margin-top: 1.5rem !important;
    }

    .limits-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .limits-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .limits-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }

    .limits-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .limits-header {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .limits-title {
        font-size: 1rem;
        flex-basis: calc(100% - 3rem);
    }

    .limits-refresh-btn {
        order: 2;
        margin-left: auto;
    }
}

/* ─── Account page (new design, scoped) ─── */
.dh-account-page {
    --dh-acc-font: "Inter", system-ui, sans-serif;
    --dh-acc-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --dh-acc-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --dh-acc-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --dh-acc-text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --dh-acc-text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
    --dh-acc-space-1: 0.25rem;
    --dh-acc-space-2: 0.5rem;
    --dh-acc-space-3: 0.75rem;
    --dh-acc-space-4: 1rem;
    --dh-acc-space-5: 1.25rem;
    --dh-acc-space-6: 1.5rem;
    --dh-acc-space-8: 2rem;
    --dh-acc-radius-sm: 0.375rem;
    --dh-acc-radius-md: 0.5rem;
    --dh-acc-radius-lg: 0.75rem;
    --dh-acc-radius-xl: 1rem;
    --dh-acc-radius-full: 9999px;
    --dh-acc-transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
    --dh-acc-bg: #f4f6f9;
    --dh-acc-surface: #ffffff;
    --dh-acc-surface-2: #f9fafc;
    --dh-acc-surface-off: #f0f2f6;
    --dh-acc-border: rgba(0, 0, 0, 0.08);
    --dh-acc-border-med: rgba(0, 0, 0, 0.12);
    --dh-acc-text: #111827;
    --dh-acc-text-muted: #6b7280;
    --dh-acc-text-faint: #9ca3af;
    --dh-acc-text-inv: #ffffff;
    --dh-acc-primary: #2563eb;
    --dh-acc-primary-hover: #1d4ed8;
    --dh-acc-primary-active: #1e40af;
    --dh-acc-primary-tint: #eff6ff;
    --dh-acc-primary-tint-2: #dbeafe;
    --dh-acc-success: #059669;
    --dh-acc-success-tint: #ecfdf5;
    --dh-acc-warning: #d97706;
    --dh-acc-warning-tint: #fffbeb;
    --dh-acc-danger: #dc2626;
    --dh-acc-danger-tint: #fef2f2;
    --dh-acc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dh-acc-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    --dh-acc-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06);
    font-family: var(--dh-acc-font);
    font-size: var(--dh-acc-text-sm);
    color: var(--dh-acc-text);
    background: var(--dh-acc-bg);
    min-height: 100%;
    border-radius: inherit;
}

html[data-theme="dark"] .dh-account-page {
    --dh-acc-bg: #0f1117;
    --dh-acc-surface: #1a1d27;
    --dh-acc-surface-2: #1f2231;
    --dh-acc-surface-off: #242738;
    --dh-acc-border: rgba(255, 255, 255, 0.07);
    --dh-acc-border-med: rgba(255, 255, 255, 0.11);
    --dh-acc-text: #e8eaf0;
    --dh-acc-text-muted: #8b90a0;
    --dh-acc-text-faint: #555c70;
    --dh-acc-text-inv: #ffffff;
    --dh-acc-primary: #3b82f6;
    --dh-acc-primary-hover: #60a5fa;
    --dh-acc-primary-active: #93c5fd;
    --dh-acc-primary-tint: #1e2a3a;
    --dh-acc-primary-tint-2: #1a2535;
    --dh-acc-success: #10b981;
    --dh-acc-success-tint: #0d2a1e;
    --dh-acc-warning: #f59e0b;
    --dh-acc-warning-tint: #271e0a;
    --dh-acc-danger: #f87171;
    --dh-acc-danger-tint: #2a0f0f;
    --dh-acc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dh-acc-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --dh-acc-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.dh-account-page .dh-acc-page {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--dh-acc-space-8) var(--dh-acc-space-6);
}

@media (max-width: 640px) {
    .dh-account-page .dh-acc-page {
        padding: var(--dh-acc-space-6) var(--dh-acc-space-4);
    }
}

.dh-account-page .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dh-acc-space-4);
    margin-bottom: var(--dh-acc-space-8);
}

.dh-account-page .page-header h1 {
    font-size: var(--dh-acc-text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dh-acc-text);
    margin: 0;
}

.dh-account-page .subtitle {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    margin-top: var(--dh-acc-space-1);
    margin-bottom: 0;
}

.dh-account-page .header-actions {
    display: flex;
    align-items: center;
    gap: var(--dh-acc-space-2);
}

.dh-account-page .theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dh-acc-radius-md);
    color: var(--dh-acc-text-muted);
    border: 1px solid var(--dh-acc-border-med);
    background: var(--dh-acc-surface);
    cursor: pointer;
    padding: 0;
}

.dh-account-page .theme-toggle:hover {
    color: var(--dh-acc-text);
    background: var(--dh-acc-surface-off);
}

.dh-account-page .card {
    background: var(--dh-acc-surface);
    border: 1px solid var(--dh-acc-border);
    border-radius: var(--dh-acc-radius-xl);
    box-shadow: var(--dh-acc-shadow-md);
    padding: var(--dh-acc-space-6);
    margin-bottom: var(--dh-acc-space-5);
}

.dh-account-page .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dh-acc-space-3);
    margin-bottom: var(--dh-acc-space-5);
    padding-bottom: var(--dh-acc-space-4);
    border-bottom: 1px solid var(--dh-acc-border);
}

.dh-account-page .card-header h2 {
    font-size: var(--dh-acc-text-base);
    font-weight: 600;
    color: var(--dh-acc-text);
    display: flex;
    align-items: center;
    gap: var(--dh-acc-space-2);
    margin: 0;
}

.dh-account-page .card-header-icon {
    color: var(--dh-acc-text-muted);
    flex-shrink: 0;
}

.dh-account-page .limits-refresh-dh {
    flex-shrink: 0;
}

.dh-account-page .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--dh-acc-space-3);
}

.dh-account-page .info-tile {
    background: var(--dh-acc-surface-2);
    border: 1px solid var(--dh-acc-border);
    border-radius: var(--dh-acc-radius-lg);
    padding: var(--dh-acc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--dh-acc-space-1);
    position: relative;
}

.dh-account-page .info-tile--full {
    grid-column: 1 / -1;
}

.dh-account-page .tile-label {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dh-account-page .tile-value {
    font-size: var(--dh-acc-text-sm);
    font-weight: 500;
    color: var(--dh-acc-text);
    word-break: break-all;
}

.dh-account-page .tile-value.masked {
    letter-spacing: 0.12em;
    color: var(--dh-acc-text-muted);
}

.dh-account-page .tile-expiry {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    margin-top: 2px;
}

.dh-account-page .tile-expiry--urgent {
    color: var(--dh-acc-danger);
    font-weight: 600;
}

.dh-account-page .tile-api-row {
    display: flex;
    align-items: center;
    gap: var(--dh-acc-space-2);
    flex-wrap: wrap;
}

.dh-account-page .tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dh-acc-space-1);
    margin-top: var(--dh-acc-space-1);
}

.dh-account-page .tile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dh-acc-space-1);
    font-size: var(--dh-acc-text-xs);
    font-weight: 500;
    padding: 3px var(--dh-acc-space-2);
    border-radius: var(--dh-acc-radius-sm);
    border: 1px solid var(--dh-acc-border-med);
    background: var(--dh-acc-surface);
    color: var(--dh-acc-text-muted);
    cursor: pointer;
}

.dh-account-page .tile-btn:hover {
    color: var(--dh-acc-primary);
    border-color: var(--dh-acc-primary);
    background: var(--dh-acc-primary-tint);
}

.dh-account-page .badge-plan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--dh-acc-text-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--dh-acc-radius-full);
    background: var(--dh-acc-primary-tint-2);
    color: var(--dh-acc-primary);
}

.dh-account-page .badge-plan--classic {
    background: var(--dh-acc-surface-off);
    color: var(--dh-acc-text-muted);
}

.dh-account-page .badge-plan--plus {
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #d4d4d4, #ebe5e5, #d4d4d4) border-box;
    border: 1px solid transparent;
    color: #4b5563;
    box-shadow: 0 0 8px rgba(200, 200, 200, 0.45);
}

.dh-account-page .badge-plan--premium,
.dh-account-page .badge-plan--vip {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

html[data-theme="dark"] .dh-account-page .badge-plan--plus {
    background: var(--dh-acc-surface-off);
    color: var(--dh-acc-text-muted);
    box-shadow: none;
}

html[data-theme="dark"] .dh-account-page .badge-plan--premium,
html[data-theme="dark"] .dh-account-page .badge-plan--vip {
    background: linear-gradient(135deg, #422006, #78350f);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.25);
}

.dh-account-page .limits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--dh-acc-space-3);
}

.dh-account-page .limit-card {
    background: var(--dh-acc-surface-2);
    border: 1px solid var(--dh-acc-border);
    border-radius: var(--dh-acc-radius-lg);
    padding: var(--dh-acc-space-4);
}

.dh-account-page .limit-card .lc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dh-acc-space-3);
}

.dh-account-page .limit-card .lc-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--dh-acc-radius-md);
    background: var(--dh-acc-primary-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dh-acc-primary);
}

.dh-account-page .limit-card .lc-icon svg {
    display: block;
}

.dh-account-page .limit-card .lc-label {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    font-weight: 500;
    text-align: right;
    flex: 1;
    margin-left: var(--dh-acc-space-2);
}

.dh-account-page .lc-numbers {
    font-size: var(--dh-acc-text-lg);
    font-weight: 700;
    color: var(--dh-acc-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--dh-acc-space-1);
}

.dh-account-page .lc-slash {
    font-size: var(--dh-acc-text-xs);
    font-weight: 400;
    color: var(--dh-acc-text-muted);
}

.dh-account-page .lc-caption {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    margin-bottom: var(--dh-acc-space-3);
}

.dh-account-page .dh-acc-progress-bar {
    width: 100%;
    height: 5px;
    background: var(--dh-acc-surface-off);
    border-radius: var(--dh-acc-radius-full);
    overflow: hidden;
}

.dh-account-page .dh-acc-progress-fill {
    height: 100%;
    border-radius: var(--dh-acc-radius-full);
    background: var(--dh-acc-primary);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}

.dh-account-page .dh-acc-progress-fill.warn {
    background: var(--dh-acc-warning);
}

.dh-account-page .dh-acc-progress-fill.bad {
    background: var(--dh-acc-danger);
}

.dh-account-page .dh-acc-progress-fill--muted {
    background: var(--dh-acc-text-faint);
    opacity: 0.35;
}

.dh-account-page .lc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--dh-acc-text-xs);
    font-weight: 500;
    margin-top: var(--dh-acc-space-2);
    color: var(--dh-acc-text-muted);
}

.dh-account-page .lc-status.ok {
    color: var(--dh-acc-success);
}

.dh-account-page .lc-status.warn {
    color: var(--dh-acc-warning);
}

.dh-account-page .lc-status.bad {
    color: var(--dh-acc-danger);
}

.dh-account-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dh-acc-space-2);
    font-size: var(--dh-acc-text-sm);
    font-weight: 500;
    padding: var(--dh-acc-space-2) var(--dh-acc-space-4);
    border-radius: var(--dh-acc-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.25;
}

.dh-account-page .btn-primary {
    background: var(--dh-acc-primary);
    color: var(--dh-acc-text-inv);
    border-color: var(--dh-acc-primary);
}

.dh-account-page .btn-primary:hover {
    background: var(--dh-acc-primary-hover);
    border-color: var(--dh-acc-primary-hover);
}

.dh-account-page .btn-secondary {
    background: var(--dh-acc-surface);
    color: var(--dh-acc-text);
    border-color: var(--dh-acc-border-med);
}

.dh-account-page .btn-secondary:hover {
    background: var(--dh-acc-surface-off);
}

.dh-account-page .btn-sm {
    font-size: var(--dh-acc-text-xs);
    padding: var(--dh-acc-space-1) var(--dh-acc-space-3);
}

.dh-account-page .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dh-acc-radius-md);
    border: 1px solid var(--dh-acc-border-med);
    background: var(--dh-acc-surface);
    color: var(--dh-acc-text-muted);
    cursor: pointer;
}

.dh-account-page .btn-icon:hover {
    color: var(--dh-acc-primary);
    background: var(--dh-acc-primary-tint);
    border-color: var(--dh-acc-primary);
}

.dh-account-page .divider {
    height: 1px;
    background: var(--dh-acc-border);
    margin: var(--dh-acc-space-5) 0;
}

.dh-account-page .limits-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dh-acc-space-3);
    flex-wrap: wrap;
}

.dh-account-page .limits-footer-note {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.dh-account-page .btn-increase svg {
    flex-shrink: 0;
}

/* Modals (scoped to account page subtree; high z-index over sidebar) */
.dh-account-page .dh-acc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--dh-acc-space-4);
}

.dh-account-page .dh-acc-modal {
    background: var(--dh-acc-surface);
    border: 1px solid var(--dh-acc-border-med);
    border-radius: var(--dh-acc-radius-xl);
    box-shadow: var(--dh-acc-shadow-lg);
    width: 100%;
    max-width: 420px;
    padding: var(--dh-acc-space-6);
}

.dh-account-page .dh-acc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dh-acc-space-5);
}

.dh-account-page .dh-acc-modal-header h3 {
    font-size: var(--dh-acc-text-base);
    font-weight: 600;
    margin: 0;
    color: var(--dh-acc-text);
}

.dh-account-page .dh-acc-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dh-acc-radius-md);
    color: var(--dh-acc-text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.dh-account-page .dh-acc-modal-close:hover {
    background: var(--dh-acc-surface-off);
    color: var(--dh-acc-text);
}

.dh-account-page .dh-acc-modal-footer {
    display: flex;
    gap: var(--dh-acc-space-2);
    justify-content: flex-end;
    margin-top: var(--dh-acc-space-6);
}

.dh-account-page .dh-acc-field {
    display: flex;
    flex-direction: column;
    gap: var(--dh-acc-space-1);
    margin-bottom: var(--dh-acc-space-4);
}

.dh-account-page .dh-acc-field label {
    font-size: var(--dh-acc-text-xs);
    font-weight: 500;
    color: var(--dh-acc-text-muted);
}

.dh-account-page .dh-acc-field-row {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--dh-acc-border-med);
    border-radius: var(--dh-acc-radius-md);
    background: var(--dh-acc-surface-2);
    overflow: hidden;
    transition: border-color var(--dh-acc-transition), box-shadow var(--dh-acc-transition);
}

.dh-account-page .dh-acc-field-row:focus-within {
    border-color: var(--dh-acc-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

html[data-theme="dark"] .dh-account-page .dh-acc-field-row:focus-within {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dh-account-page .dh-acc-field-input {
    flex: 1;
    padding: var(--dh-acc-space-2) var(--dh-acc-space-3);
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--dh-acc-text-sm);
    min-width: 0;
    color: var(--dh-acc-text);
}

.dh-account-page .dh-acc-field-hint {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-text-muted);
    margin-top: var(--dh-acc-space-1);
}

.dh-account-page .dh-acc-field-error-show {
    font-size: var(--dh-acc-text-xs);
    color: var(--dh-acc-danger);
    margin-bottom: var(--dh-acc-space-3);
}

@media (max-width: 540px) {
    .dh-account-page .limits-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dh-account-page .info-grid {
        grid-template-columns: 1fr;
    }

    .dh-account-page .page-header {
        flex-direction: column;
    }
}