/* ═══════════════════════════════════════════════════════════
   TITANPIPS — GLOBAL NEUMORPHIC UI SYSTEM
   Applies soft neumorphism selectively:
   • Sidebar + Mobile Header / Bottom Tabs
   • Stat cards, info cards, action items
   • Buttons (CTA only — sharp contrast maintained)
   • Form inputs
   • Tables
   • Badges, pills, status chips
   Text contrast kept sharp. No neumorphism on plain text.
   ═══════════════════════════════════════════════════════════ */

/* ── Core palette override ── */
:root {
    --neu-bg:       #e8edf5;
    --neu-shadow-d: #c5cad4;
    --neu-shadow-l: #ffffff;
    --neu-text:     #1a2340;
    --neu-text2:    #7a8499;
    --neu-text3:    #9aa5b4;
    --neu-blue:     #1B6FE8;
    --neu-radius:   18px;
    --neu-radius-sm:13px;
}

/* ════════════════════════════
   GLOBAL BODY / PAGE BG
════════════════════════════ */
body {
    background: var(--neu-bg) !important;
    color: var(--neu-text) !important;
}

/* ════════════════════════════
   SIDEBAR — NEUMORPHIC
════════════════════════════ */
.sidebar {
    background: var(--neu-bg) !important;
    border-right: none !important;
    box-shadow: 6px 0 20px rgba(0,0,0,0.08), -2px 0 8px var(--neu-shadow-l) !important;
}

/* Brand logo bubble */
.brand-logo {
    background: var(--neu-bg) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    color: var(--neu-blue) !important;
    font-weight: 900 !important;
}

.brand-section {
    border-bottom: none !important;
}

.brand-name {
    background: linear-gradient(135deg, var(--neu-blue) 0%, #3b9eff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.brand-tagline {
    color: var(--neu-text2) !important;
}

/* Nav labels */
.nav-label {
    color: var(--neu-text3) !important;
}

/* Nav items */
a.nav-item,
.nav-item {
    color: var(--neu-text2) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

a.nav-item:hover,
.nav-item:hover {
    background: var(--neu-bg) !important;
    color: var(--neu-text) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
}

/* Active nav — pressed-in neumorphic inset */
a.nav-item.active,
.nav-item.active {
    background: var(--neu-bg) !important;
    color: var(--neu-blue) !important;
    box-shadow: inset 4px 4px 10px var(--neu-shadow-d), inset -3px -3px 8px var(--neu-shadow-l) !important;
    font-weight: 700 !important;
}

/* Nav badge */
.nav-badge {
    background: #dc2626 !important;
    box-shadow: 0 0 6px rgba(220,38,38,0.4) !important;
}

/* Sidebar footer / user */
.sidebar-footer {
    border-top: none !important;
}

.sidebar-user {
    background: var(--neu-bg) !important;
    box-shadow: inset 3px 3px 8px var(--neu-shadow-d), inset -2px -2px 6px var(--neu-shadow-l) !important;
    border-radius: 12px !important;
}

.sidebar-user-name { color: var(--neu-text) !important; }
.sidebar-user-email { color: var(--neu-text2) !important; }

.sidebar-avatar {
    box-shadow: 3px 3px 7px rgba(0,0,0,0.15) !important;
}

/* ════════════════════════════
   MOBILE HEADER
════════════════════════════ */
.mobile-header {
    background: var(--neu-bg) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 -2px 8px var(--neu-shadow-l) !important;
}

/* ════════════════════════════
   MOBILE BOTTOM TABS
════════════════════════════ */
.mobile-tabs {
    background: var(--neu-bg) !important;
    border-top: none !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.07) !important;
}

a.tab-btn,
.tab-btn {
    color: var(--neu-text2) !important;
}

a.tab-btn.active,
.tab-btn.active {
    color: var(--neu-blue) !important;
}

/* ════════════════════════════
   TOP HEADER BAR
════════════════════════════ */
.top-header {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 8px 8px 20px var(--neu-shadow-d), -6px -6px 16px var(--neu-shadow-l) !important;
    border-radius: 20px !important;
}

.page-title { color: var(--neu-text) !important; }

/* Icon buttons (notification bell etc) */
.icon-btn {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    color: var(--neu-text2) !important;
    transition: all 0.2s !important;
}

.icon-btn:hover {
    color: var(--neu-blue) !important;
    box-shadow: 5px 5px 12px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l) !important;
    background: var(--neu-bg) !important;
}

/* Notification badge on bell */
.icon-btn .badge {
    background: #dc2626 !important;
    box-shadow: 0 2px 6px rgba(220,38,38,0.5) !important;
    border: 2px solid var(--neu-bg) !important;
}

/* User chip */
.user-chip {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 5px 5px 12px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l) !important;
    color: var(--neu-text) !important;
}

.user-chip-name {
    color: var(--neu-text) !important;
    font-weight: 600 !important;
}

/* ════════════════════════════
   CARDS — NEUMORPHIC SURFACE
════════════════════════════ */
.card,
.chart-card,
.settings-section,
.support-card,
.admin-stat-card,
.table-wrap {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 8px 8px 20px var(--neu-shadow-d), -6px -6px 16px var(--neu-shadow-l) !important;
    border-radius: 20px !important;
}

.card:hover,
.support-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 10px 10px 24px var(--neu-shadow-d), -7px -7px 18px var(--neu-shadow-l) !important;
    background: var(--neu-bg) !important;
}

.card-title  { color: var(--neu-text2) !important; }
.card-value  { color: var(--neu-text) !important; }

/* Card icon bubbles */
.card-icon {
    background: var(--neu-bg) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    border-radius: 12px !important;
}

.card-icon.blue { background: var(--neu-bg) !important; }
.card-icon.green { background: var(--neu-bg) !important; }
.card-icon.gold  { background: var(--neu-bg) !important; }
.card-icon.red   { background: var(--neu-bg) !important; }

/* ════════════════════════════
   HERO CARD (dark gradient card)
   — kept dark, only shadow updated
════════════════════════════ */
.hero-card {
    box-shadow: 10px 10px 28px rgba(0,0,0,0.3), -4px -4px 12px rgba(255,255,255,0.06) !important;
    border: none !important;
}

/* Hero stats sub-tiles */
.hero-stat {
    background: rgba(255,255,255,0.12) !important;
}

/* ════════════════════════════
   QUICK ACTION GRID
════════════════════════════ */
.action-item {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l) !important;
    border-radius: 16px !important;
    transition: all 0.2s !important;
}

.action-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 8px 8px 18px var(--neu-shadow-d), -5px -5px 14px var(--neu-shadow-l) !important;
    background: var(--neu-bg) !important;
}

.action-icon {
    background: var(--neu-bg) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    border-radius: 12px !important;
    transition: all 0.2s !important;
}

.action-item:hover .action-icon {
    box-shadow: inset 3px 3px 8px var(--neu-shadow-d), inset -2px -2px 6px var(--neu-shadow-l) !important;
    background: var(--neu-bg) !important;
}

.action-label { color: var(--neu-text) !important; }

/* ════════════════════════════
   PLAN CARDS
════════════════════════════ */
.plan-card {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 8px 8px 20px var(--neu-shadow-d), -6px -6px 16px var(--neu-shadow-l) !important;
    border-radius: 20px !important;
}

.plan-card:hover,
.plan-card.selected {
    transform: translateY(-4px) !important;
    box-shadow: 12px 12px 28px var(--neu-shadow-d), -8px -8px 20px var(--neu-shadow-l) !important;
    background: var(--neu-bg) !important;
}

.plan-card.featured {
    box-shadow: 8px 8px 20px var(--neu-shadow-d), -6px -6px 16px var(--neu-shadow-l), 0 0 0 2px var(--neu-blue) !important;
    background: var(--neu-bg) !important;
}

.plan-roi { color: var(--neu-blue) !important; }
.plan-name { color: var(--neu-text) !important; }
.plan-range { color: var(--neu-text2) !important; }

/* ════════════════════════════
   REFERRAL CARD (gradient)
════════════════════════════ */
.ref-card {
    box-shadow: 10px 10px 28px rgba(0,0,0,0.3), -4px -4px 12px rgba(255,255,255,0.06) !important;
    border: none !important;
}

.ref-copy-btn {
    box-shadow: 4px 4px 10px rgba(0,0,0,0.15) !important;
}

/* ════════════════════════════
   SECTION HEADER
════════════════════════════ */
.section-title { color: var(--neu-text) !important; }
.section-link  { color: var(--neu-blue) !important; }

/* Chart card header */
.chart-title { color: var(--neu-text) !important; }

.period-btn {
    background: var(--neu-bg) !important;
    border: none !important;
    color: var(--neu-text2) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    border-radius: 10px !important;
}

.period-btn.active,
.period-btn:hover {
    background: linear-gradient(135deg, var(--neu-blue), #0057cc) !important;
    color: #fff !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l), 0 3px 12px rgba(27,111,232,0.3) !important;
}

/* ════════════════════════════
   TABLE
════════════════════════════ */
th {
    background: var(--neu-bg) !important;
    color: var(--neu-text2) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

tbody tr:hover td,
tr:hover td {
    background: rgba(27,111,232,0.03) !important;
}

td { color: var(--neu-text) !important; }

/* ════════════════════════════
   TRANSACTION LIST
════════════════════════════ */
.tx-item {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.tx-icon {
    background: var(--neu-bg) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    border-radius: 12px !important;
}

.tx-name  { color: var(--neu-text) !important; }
.tx-date  { color: var(--neu-text2) !important; }
.tx-amount.positive { color: #059669 !important; }
.tx-amount.negative { color: #dc2626 !important; }

/* ════════════════════════════
   BUTTONS — STANDOUT CTA
════════════════════════════ */
.btn-primary {
    background: linear-gradient(135deg, #1B6FE8, #0057cc) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l), 0 4px 20px rgba(27,111,232,0.35) !important;
    border-radius: 13px !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 6px 6px 18px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l), 0 6px 24px rgba(27,111,232,0.45) !important;
    background: linear-gradient(135deg, #2a7ef5, #0065e0) !important;
}

.btn-primary:active {
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.2) !important;
    transform: scale(0.98) !important;
}

.btn-success {
    background: linear-gradient(135deg, #00C48C, #009E72) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l), 0 4px 16px rgba(0,196,140,0.35) !important;
    border-radius: 13px !important;
}

.btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 6px 6px 18px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l), 0 6px 20px rgba(0,196,140,0.45) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #FF5C5C, #CC2929) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l), 0 4px 16px rgba(255,92,92,0.35) !important;
    border-radius: 13px !important;
}

.btn-secondary {
    background: var(--neu-bg) !important;
    color: var(--neu-text) !important;
    border: none !important;
    box-shadow: 5px 5px 12px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l) !important;
    border-radius: 13px !important;
}

.btn-secondary:hover {
    color: var(--neu-blue) !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l) !important;
    transform: translateY(-1px) !important;
}

.btn-outline-blue {
    background: var(--neu-bg) !important;
    color: var(--neu-blue) !important;
    border: none !important;
    box-shadow: 5px 5px 12px var(--neu-shadow-d), -4px -4px 10px var(--neu-shadow-l) !important;
    border-radius: 13px !important;
}

.btn-outline-blue:hover {
    background: linear-gradient(135deg, var(--neu-blue), #0057cc) !important;
    color: #fff !important;
    box-shadow: 6px 6px 14px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l), 0 4px 16px rgba(27,111,232,0.3) !important;
}

.btn-outline-blue:active,
.btn-secondary:active {
    box-shadow: inset 3px 3px 8px var(--neu-shadow-d), inset -2px -2px 6px var(--neu-shadow-l) !important;
    transform: scale(0.98) !important;
}

/* Hero buttons keep their white-on-blue look */
.hero-btn-white {
    background: white !important;
    color: var(--neu-blue) !important;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.15) !important;
}

.hero-btn-ghost {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* ════════════════════════════
   FORMS — NEUMORPHIC INPUTS
════════════════════════════ */
.form-input {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: inset 4px 4px 10px var(--neu-shadow-d), inset -3px -3px 8px var(--neu-shadow-l) !important;
    color: var(--neu-text) !important;
    border-radius: var(--neu-radius-sm) !important;
}

.form-input:focus {
    box-shadow: inset 4px 4px 10px var(--neu-shadow-d), inset -3px -3px 8px var(--neu-shadow-l), 0 0 0 2px rgba(27,111,232,0.3) !important;
    outline: none !important;
}

.form-input::placeholder {
    color: var(--neu-text3) !important;
}

.form-label {
    color: var(--neu-text2) !important;
}

/* ════════════════════════════
   STATUS BADGES
════════════════════════════ */
.status {
    background: var(--neu-bg) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
}

.status-pending  {
    color: #d97706 !important;
    box-shadow: 3px 3px 7px var(--neu-shadow-d), -2px -2px 5px var(--neu-shadow-l) !important;
}

.status-approved {
    color: #059669 !important;
    box-shadow: 3px 3px 7px var(--neu-shadow-d), -2px -2px 5px var(--neu-shadow-l) !important;
}

.status-rejected {
    color: #dc2626 !important;
    box-shadow: 3px 3px 7px var(--neu-shadow-d), -2px -2px 5px var(--neu-shadow-l) !important;
}

/* Card badges */
.card-badge {
    background: var(--neu-bg) !important;
    box-shadow: 3px 3px 7px var(--neu-shadow-d), -2px -2px 5px var(--neu-shadow-l) !important;
    border-radius: 50px !important;
}

.badge-green { color: #059669 !important; }
.badge-red   { color: #dc2626 !important; }
.badge-blue  { color: var(--neu-blue) !important; }
.badge-gold  { color: #d97706 !important; }

/* Plan badge pill */
.plan-badge {
    background: linear-gradient(135deg, var(--neu-blue), #0057cc) !important;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15) !important;
}

/* ════════════════════════════
   PROGRESS BAR
════════════════════════════ */
.progress-bar {
    background: var(--neu-bg) !important;
    box-shadow: inset 3px 3px 7px var(--neu-shadow-d), inset -2px -2px 5px var(--neu-shadow-l) !important;
    border-radius: 50px !important;
}

/* ════════════════════════════
   SETTINGS
════════════════════════════ */
.settings-section {
    overflow: hidden;
}

a.settings-item,
.settings-item {
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    transition: all 0.2s !important;
}

a.settings-item:hover,
.settings-item:hover {
    background: rgba(27,111,232,0.03) !important;
}

.settings-label { color: var(--neu-text) !important; }
.settings-desc  { color: var(--neu-text2) !important; }
.settings-arrow { color: var(--neu-text3) !important; }

/* ════════════════════════════
   SUPPORT CARDS
════════════════════════════ */
.support-card-title { color: var(--neu-text) !important; }
.support-card-text  { color: var(--neu-text2) !important; }

/* ════════════════════════════
   ADMIN STAT CARDS
════════════════════════════ */
.admin-stat-label { color: var(--neu-text2) !important; }
.admin-stat-value { color: var(--neu-text) !important; }

.admin-tab {
    background: var(--neu-bg) !important;
    border: none !important;
    color: var(--neu-text2) !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    border-radius: 10px !important;
}

.admin-tab.active,
.admin-tab:hover {
    background: linear-gradient(135deg, var(--neu-blue), #0057cc) !important;
    color: #fff !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l), 0 3px 12px rgba(27,111,232,0.3) !important;
}

/* ════════════════════════════
   PROFILE HEADER (dark gradient)
════════════════════════════ */
.profile-header {
    box-shadow: 10px 10px 28px rgba(0,0,0,0.3), -4px -4px 12px rgba(255,255,255,0.06) !important;
    border: none !important;
}

/* ════════════════════════════
   MODAL
════════════════════════════ */
.modal-box {
    background: var(--neu-bg) !important;
    box-shadow: 12px 12px 30px var(--neu-shadow-d), -8px -8px 22px var(--neu-shadow-l) !important;
    border-radius: 24px !important;
}

.modal-title { color: var(--neu-text) !important; }

.modal-close {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l) !important;
    color: var(--neu-text2) !important;
}

.modal-close:hover {
    background: #dc2626 !important;
    color: white !important;
    box-shadow: 4px 4px 10px rgba(220,38,38,0.3) !important;
}

/* ════════════════════════════
   TOGGLE SWITCH
════════════════════════════ */
.toggle-slider {
    background: var(--neu-bg) !important;
    box-shadow: inset 3px 3px 7px var(--neu-shadow-d), inset -2px -2px 5px var(--neu-shadow-l) !important;
}

input:checked + .toggle-slider {
    background: var(--neu-blue) !important;
    box-shadow: inset 2px 2px 5px rgba(0,0,57,0.2) !important;
}

/* ════════════════════════════
   DIVIDERS
════════════════════════════ */
.divider {
    background: rgba(0,0,0,0.06) !important;
}

.divider-text::before,
.divider-text::after {
    background: rgba(0,0,0,0.06) !important;
}

.divider-text {
    color: var(--neu-text2) !important;
}

/* ════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════ */
.toast {
    background: var(--neu-text) !important;
    box-shadow: 8px 8px 24px rgba(0,0,0,0.2) !important;
    border-radius: 14px !important;
}

.toast.success { background: #059669 !important; box-shadow: 6px 6px 18px rgba(5,150,105,0.3) !important; }
.toast.error   { background: #dc2626 !important; box-shadow: 6px 6px 18px rgba(220,38,38,0.3) !important; }
.toast.warning { background: #d97706 !important; box-shadow: 6px 6px 18px rgba(217,119,6,0.3) !important; }
.toast.info    { background: var(--neu-blue) !important; box-shadow: 6px 6px 18px rgba(27,111,232,0.3) !important; }

/* ════════════════════════════
   SPINNER
════════════════════════════ */
.spinner {
    border-color: rgba(0,0,0,0.08) !important;
    border-top-color: var(--neu-blue) !important;
}

/* ════════════════════════════
   EMPTY STATE
════════════════════════════ */
.empty-title { color: var(--neu-text) !important; }
.empty-text  { color: var(--neu-text2) !important; }

/* ════════════════════════════
   LIVE BADGE / DOT
════════════════════════════ */
.live-badge {
    background: rgba(5,150,105,0.12) !important;
    border: 1px solid rgba(5,150,105,0.25) !important;
}

.live-dot {
    background: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5,150,105,0.2) !important;
}

/* ════════════════════════════
   AUTH / LOGIN PAGES
════════════════════════════ */
.auth-card,
.login-card,
.register-card,
div.card[style*="max-width"] {
    background: var(--neu-bg) !important;
    border: none !important;
    box-shadow: 12px 12px 30px var(--neu-shadow-d), -8px -8px 22px var(--neu-shadow-l) !important;
    border-radius: 24px !important;
}

/* ════════════════════════════
   INDEX / LANDING PAGE
════════════════════════════ */
/* Top nav bar on landing */
header,
nav[style],
.landing-nav {
    background: rgba(232, 237, 245, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* Landing hero & sections */
section,
.hero-section,
.features-section {
    background: var(--neu-bg) !important;
}

/* ════════════════════════════
   SKELETON LOADER
════════════════════════════ */
.skeleton,
.skeleton-line {
    background: linear-gradient(90deg, var(--neu-bg) 25%, #dde2ec 50%, var(--neu-bg) 75%) !important;
    background-size: 200% 100% !important;
}

/* ════════════════════════════
   NOTIFICATION BELL BADGE DOT
════════════════════════════ */
@keyframes neuPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.nav-badge {
    animation: neuPulse 2s infinite !important;
}

/* ════════════════════════════
   FADE-IN ANIMATIONS (preserve)
════════════════════════════ */
.fade-in-1 { animation: pgFadeIn 0.4s ease 0.05s both; }
.fade-in-2 { animation: pgFadeIn 0.4s ease 0.12s both; }
.fade-in-3 { animation: pgFadeIn 0.4s ease 0.2s both; }
.fade-in-4 { animation: pgFadeIn 0.4s ease 0.28s both; }
.fade-in-5 { animation: pgFadeIn 0.4s ease 0.36s both; }

/* ════════════════════════════
   MOBILE PERFORMANCE GUARD
   Reduce shadow complexity on
   mobile to keep things snappy
════════════════════════════ */
@media (max-width: 768px) {
    .sidebar {
        box-shadow: 4px 0 14px rgba(0,0,0,0.1) !important;
    }

    .card,
    .chart-card,
    .table-wrap,
    .settings-section,
    .admin-stat-card {
        box-shadow: 6px 6px 16px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l) !important;
    }

    .plan-card,
    .plan-card:hover {
        transform: none !important;
        box-shadow: 4px 4px 14px var(--neu-shadow-d), -3px -3px 10px var(--neu-shadow-l) !important;
    }

    .form-input {
        box-shadow: inset 3px 3px 8px var(--neu-shadow-d), inset -2px -2px 6px var(--neu-shadow-l) !important;
    }

    .btn-primary,
    .btn-success,
    .btn-danger {
        box-shadow: 4px 4px 10px var(--neu-shadow-d), -3px -3px 8px var(--neu-shadow-l), 0 3px 12px rgba(27,111,232,0.25) !important;
    }

    .top-header {
        box-shadow: 6px 6px 16px var(--neu-shadow-d), -4px -4px 12px var(--neu-shadow-l) !important;
    }
}