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

/* Dashboard Core System Styles */
:root {
   --dash-bg: #020205;
   --dash-panel: rgba(8, 12, 18, 0.6);
   --dash-border: rgba(255, 255, 255, 0.08);
   --dash-cyan: #00f0ff;
   --dash-cyan-dim: rgba(0, 240, 255, 0.1);
   --dash-font-tech: 'Rajdhani', sans-serif;
   --dash-font-ui: 'Inter', sans-serif;
}

body {
   background-color: var(--dash-bg);
   color: #fff;
   min-height: 100vh;
}

.dashboard-wrapper {
   padding: 40px 40px 80px 40px;
   min-height: calc(100vh - 100px);
   background:
      radial-gradient(circle at 15% 50%, rgba(0, 240, 255, 0.03) 0%, transparent 25%),
      radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.02) 0%, transparent 20%);
}

.dashboard-container {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 30px;
}

/* --- 1. Identity Panel (Profile) --- */
/* --- 1. Identity Panel (Refined) --- */
.dashboard-identity-panel {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   background: var(--dash-panel);
   /* Unified background */
   border: 1px solid var(--dash-border);
   border-left: 3px solid var(--dash-cyan);
   padding: 20px 30px;
   border-radius: 4px;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(10px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   gap: 40px;
}

/* Background grid effect */
.dashboard-identity-panel::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   background-size: 40px 40px;
   opacity: 0.3;
   pointer-events: none;
   z-index: 0;
}

.identity-core {
   display: flex;
   align-items: center;
   gap: 25px;
   position: relative;
   z-index: 1;
   flex-grow: 1;
   /* Allow it to take space */
}

/* Updated Avatar Size */
.profile-hex-large {
   width: 80px;
   height: 80px;
   position: relative;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   background: rgba(0, 240, 255, 0.1);
   padding: 2px;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-hex-large:hover {
   transform: scale(1.05);
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.2);
   background: rgba(0, 240, 255, 0.2);
}

.profile-img-large {
   width: 100%;
   height: 100%;
   object-fit: cover;
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   background: #000;
   filter: grayscale(0.2);
   transition: filter 0.3s;
}

.profile-hex-large:hover .profile-img-large {
   filter: grayscale(0);
}

.status-indicator {
   position: absolute;
   bottom: 2px;
   right: 2px;
   width: 12px;
   height: 12px;
   background: #000;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
}

.status-indicator.active::after {
   content: '';
   width: 8px;
   height: 8px;
   background: var(--dash-cyan);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--dash-cyan);
   animation: pulseStatus 2s infinite;
}

.identity-data {
   display: flex;
   flex-direction: column;
   gap: 0px;
}

.user-display-name {
   font-family: var(--dash-font-tech);
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 2px;
   color: #fff;
   line-height: 1;
   text-transform: uppercase;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   transition: color 0.3s;
}

.user-display-name:hover {
   color: var(--dash-cyan);
   text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* Stats Integration */
.identity-stats {
   display: flex;
   gap: 20px;
   position: relative;
   z-index: 1;
   align-items: center;
}

/* System-style Stats */
.stat-box {
   background: transparent;
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   padding-left: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-width: auto;
   transition: transform 0.3s;
}

.stat-box:hover {
   transform: translateX(2px);
}

.stat-label {
   display: block;
   font-size: 9px;
   color: var(--text-muted, #8a8f9d);
   margin-bottom: 5px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   opacity: 0.8;
}

.stat-val {
   font-family: var(--dash-font-tech);
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   letter-spacing: 0.5px;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Interactive feedback for stats */
.stat-box:hover .stat-val {
   color: var(--dash-cyan);
   text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* Responsive adjust */
@media (max-width: 768px) {
   .dashboard-identity-panel {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
   }

   .identity-stats {
      width: 100%;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 15px;
      justify-content: space-between;
   }

   .stat-box {
      border-left: none;
      padding-left: 0;
   }
}

/* --- 2. Dashboard Navigation Modules --- */
.dashboard-nav-grid {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.nav-module-box {
   flex: 1;
   min-width: 140px;
   height: 100px;
   background: rgba(8, 12, 18, 0.7);
   border: 1px solid var(--dash-border);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   padding: 15px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(5px);
}

.nav-module-box::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 100%;
   background: var(--dash-cyan);
   transform: scaleY(0);
   transition: transform 0.3s;
   transform-origin: bottom;
}

.nav-module-box:hover {
   background: rgba(0, 240, 255, 0.05);
   border-color: rgba(0, 240, 255, 0.3);
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.nav-module-box.active {
   background: rgba(0, 240, 255, 0.08);
   border-color: var(--dash-cyan);
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.nav-module-box.active::before {
   transform: scaleY(1);
   height: 100%;
   transform-origin: top;
}

/* --- WARNING PULSE EFFECT --- */
@keyframes warnPulse {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.4);
   }

   70% {
      box-shadow: 0 0 0 10px rgba(255, 60, 60, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(255, 60, 60, 0);
   }
}

.nav-module-box.profile-warning-pulse {
   border-color: rgba(255, 60, 60, 0.5) !important;
   animation: warnPulse 2s infinite;
}

.nav-module-box.profile-warning-pulse .module-indicator {
   background: rgba(255, 60, 60, 0.2);
   color: #ff3c3c;
   border: 1px solid rgba(255, 60, 60, 0.4);
}

.nav-module-box.profile-warning-pulse::before {
   background: #ff3c3c !important;
   transform: scaleY(1);
   height: 100%;
   transform-origin: top;
   opacity: 0.5;
}

.module-icon {
   font-size: 20px;
   color: var(--text-muted, #8a8f9d);
   /* Muted by default */
   transition: color 0.3s;
}

.nav-module-box:hover .module-icon,
.nav-module-box.active .module-icon {
   color: var(--dash-cyan);
}

.module-text-group {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   z-index: 1;
}

.module-label {
   font-family: var(--dash-font-tech);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
   text-transform: uppercase;
}

.module-detail {
   font-family: var(--dash-font-ui);
   font-size: 11px;
   color: var(--text-muted, #8a8f9d);
   font-weight: 500;
   letter-spacing: 0.5px;
   white-space: nowrap;
}

/* Hover state for detail text */
.nav-module-box:hover .module-detail {
   color: rgba(255, 255, 255, 0.8);
}

.module-indicator {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 10px;
   background: var(--dash-cyan);
   color: #000;
   padding: 2px 6px;
   border-radius: 2px;
   font-weight: 700;
}

/* --- 3. Unified Data Surface --- */
.data-surface-container {
   background: rgba(5, 7, 10, 0.85);
   border: 1px solid var(--dash-border);
   border-top: 1px solid rgba(0, 240, 255, 0.2);
   min-height: 500px;
   position: relative;
   border-radius: 4px;
   backdrop-filter: blur(20px);
   display: flex;
   flex-direction: column;
}

.data-surface-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
   border-bottom: 1px solid var(--dash-border);
   background: rgba(0, 0, 0, 0.2);
}

.surface-title {
   font-family: var(--dash-font-tech);
   font-size: 18px;
   letter-spacing: 2px;
   color: var(--dash-cyan);
   text-transform: uppercase;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 10px;
}

.surface-title::before {
   content: '';
   display: block;
   width: 6px;
   height: 6px;
   background: var(--dash-cyan);
   box-shadow: 0 0 8px var(--dash-cyan);
   border-radius: 50%;
}

.surface-controls {
   display: flex;
   gap: 10px;
}

.control-btn {
   background: transparent;
   border: 1px solid var(--dash-border);
   color: var(--text-muted, #8a8f9d);
   font-family: var(--dash-font-ui);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 14px;
   cursor: pointer;
   transition: all 0.2s;
   border-radius: 2px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.control-btn:hover {
   border-color: rgba(0, 240, 255, 0.4);
   color: #fff;
   background: rgba(0, 240, 255, 0.05);
}

.data-surface-viewport {
   flex-grow: 1;
   padding: 0;
   overflow: hidden;
   /* For custom scrollbar if needed */
}

/* --- Unified Table Styles --- */
.unified-table-wrapper {
   width: 100%;
   overflow-x: auto;
}

.system-table {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--dash-font-ui);
}

.system-table th {
   text-align: left;
   padding: 16px 30px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--text-muted, #8a8f9d);
   border-bottom: 1px solid var(--dash-border);
   font-weight: 600;
}

.system-table td {
   padding: 16px 30px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   font-size: 13px;
   color: #eee;
   transition: background 0.2s;
}

.system-table tr:hover td {
   background: rgba(255, 255, 255, 0.02);
}

.system-table tr:last-child td {
   border-bottom: none;
}

.status-badge {
   padding: 4px 8px;
   border-radius: 2px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: inline-block;
}

.status-success {
   background: rgba(0, 255, 128, 0.15);
   color: #00ff80;
   border: 1px solid rgba(0, 255, 128, 0.2);
}

.status-pending {
   background: rgba(255, 170, 0, 0.15);
   color: #ffaa00;
   border: 1px solid rgba(255, 170, 0, 0.2);
}

.status-error {
   background: rgba(255, 60, 60, 0.15);
   color: #ff3c3c;
   border: 1px solid rgba(255, 60, 60, 0.2);
}

.action-link {
   color: var(--dash-cyan);
   text-decoration: none;
   font-weight: 600;
   font-size: 12px;
   transition: opacity 0.2s;
}

.action-link:hover {
   text-decoration: underline;
   text-shadow: 0 0 8px var(--dash-cyan);
}

/* --- Summary Cards Grid (Updated for List Layout) --- */
.dashboard-summary-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 20px;
   padding: 0px 0px 0px 0px;
   /* Reduced bottom padding as table follows */
}

/* Card Container */
.summary-card {
   background: rgba(8, 12, 18, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   backdrop-filter: blur(5px);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}

.summary-card:hover {
   transform: translateY(-4px);
   border-color: rgba(0, 240, 255, 0.3);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Header */
.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   background: rgba(255, 255, 255, 0.02);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-header-title {
   font-family: var(--dash-font-tech);
   font-size: 14px;
   font-weight: 700;
   color: var(--dash-cyan);
   letter-spacing: 1px;
   text-transform: uppercase;
}

.card-header-action {
   background: transparent;
   border: none;
   color: var(--text-muted, #8a8f9d);
   font-size: 10px;
   font-family: var(--dash-font-ui);
   font-weight: 600;
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 6px;
}

.card-header-action:hover {
   color: #fff;
}

.card-header-action i {
   font-size: 9px;
   transition: transform 0.2s;
}

.card-header-action:hover i {
   transform: translateX(3px);
}

/* List Items */
.card-list {
   display: flex;
   flex-direction: column;
}

.card-list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   transition: background 0.2s;
}

.card-list-item:hover {
   background: rgba(255, 255, 255, 0.03);
}

.card-list-item:last-child {
   border-bottom: none;
}

.item-info {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.item-label {
   font-family: var(--dash-font-ui);
   font-size: 13px;
   font-weight: 600;
   color: #eee;
}

.item-meta {
   font-size: 11px;
   color: var(--text-muted, #8a8f9d);
   letter-spacing: 0.5px;
}

/* Status & Action Elements */
.item-action {
   display: flex;
   align-items: center;
}

.card-status-pill {
   padding: 3px 8px;
   border-radius: 2px;
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   min-width: 50px;
   text-align: center;
}

/* Status Colors moved to shared classes or local overrides */
.card-action-pill {
   background: transparent;
   border: 1px solid rgba(0, 240, 255, 0.3);
   color: var(--dash-cyan);
   padding: 4px 10px;
   font-size: 9px;
   font-weight: 700;
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 5px;
   text-transform: uppercase;
}

.card-action-pill:hover {
   background: var(--dash-cyan);
   color: #000;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* New Divider Styles */
.section-divider {
   padding: 0 30px;
   margin-bottom: -10px;
   margin-top: 20px;
   display: flex;
   align-items: center;
}

.section-header-text {
   font-family: var(--dash-font-ui);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   color: var(--text-muted, #8a8f9d);
   text-transform: uppercase;
}

/* Utility to ensure status colors work for pills */
.status-dim {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-muted, #8a8f9d);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-get {
   border-color: rgba(0, 240, 255, 0.3);
   color: var(--dash-cyan);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
   .dashboard-identity-panel {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
   }

   .identity-stats {
      width: 100%;
      justify-content: flex-start;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      padding-top: 20px;
   }
}

@media (max-width: 768px) {
   .dashboard-wrapper {
      padding: 20px;
   }

   .dashboard-nav-grid {
      gap: 10px;
   }

   .nav-module-box {
      min-width: calc(50% - 5px);
      /* 2 per row */
      height: 90px;
   }

   .identity-core {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
   }

   .user-display-name {
      font-size: 24px;
   }

   .profile-hex-large {
      width: 80px;
      height: 80px;
   }

   .data-surface-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
   }

   .summary-grid {
      grid-template-columns: 1fr;
   }
}

/* Loading Animation */
.loading-state {
   padding: 60px;
   text-align: center;
   color: var(--text-muted, #8a8f9d);
   font-family: var(--dash-font-tech);
   letter-spacing: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

/* --- Account Configuration Module --- */
/* --- Account Configuration Module --- */
.account-config-container {
   padding: 15px;
   /* Reduced padding */
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 20px;
   /* Reduced gap */
}

@media (max-width: 1024px) {
   .account-config-container {
      grid-template-columns: 1fr;
   }
}

.config-card {
   background: rgba(8, 12, 18, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 20px;
   /* Reduced padding */
   backdrop-filter: blur(5px);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   height: 100%;
   display: flex;
   flex-direction: column;
}

.card-header-flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   border-bottom: 1px solid rgba(0, 240, 255, 0.2);
   padding-bottom: 10px;
}

.config-section-title {
   font-family: var(--dash-font-tech);
   color: var(--dash-cyan);
   font-size: 14px;
   margin-bottom: 0;
   /* Handled by flex parent */
   padding-bottom: 0;
   border-bottom: none;
   letter-spacing: 1px;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 10px;
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.save-section-btn {
   background: transparent;
   border: 1px solid var(--dash-cyan);
   color: var(--dash-cyan);
   padding: 4px 12px;
   font-size: 10px;
   font-family: var(--dash-font-ui);
   font-weight: 700;
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 1px;
   border-radius: 2px;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 6px;
}

.save-section-btn:hover:not(:disabled) {
   background: rgba(0, 240, 255, 0.1);
   box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.save-section-btn.saving {
   color: var(--text-muted, #8a8f9d);
   border-color: var(--dash-border);
   cursor: not-allowed;
}

.save-section-btn.success {
   background: rgba(0, 255, 128, 0.1);
   color: #00ff80;
   border-color: #00ff80;
}

.form-group {
   margin-bottom: 15px;
   /* Reduced margin */
}

.dash-label {
   display: block;
   font-family: var(--dash-font-ui);
   font-size: 10px;
   color: var(--text-muted, #8a8f9d);
   margin-bottom: 4px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.dash-input,
.dash-textarea {
   width: 100%;
   background: rgba(8, 12, 18, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 10px 12px;
   /* More compact */
   color: #fff;
   border-radius: 4px;
   font-family: var(--dash-font-ui);
   font-size: 13px;
   transition: all 0.2s;
}

.dash-textarea {
   resize: vertical;
   line-height: 1.5;
}

.dash-input:focus,
.dash-textarea:focus {
   border-color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.05);
   outline: none;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

.input-icon-wrapper {
   position: relative;
}

.input-icon-wrapper i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted, #8a8f9d);
   font-size: 14px;
}

.input-icon-wrapper .dash-input {
   padding-left: 40px;
}

/* Updated Primary Button (if used elsewhere, keeping styles consistent) */
.dash-btn-primary {
   background: var(--dash-cyan-dim);
   color: var(--dash-cyan);
   border: 1px solid var(--dash-cyan);
   padding: 10px 20px;
   cursor: pointer;
   font-family: var(--dash-font-tech);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.2s;
   border-radius: 2px;
   width: 100%;
}

.dash-btn-primary:hover {
   background: var(--dash-cyan);
   color: #000;
   box-shadow: 0 0 15px var(--dash-cyan-dim);
}

.social-link-group {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

/* Social Selector & Dynamic Inputs */
.platform-selector-group {
   margin-bottom: 20px;
   position: relative;
   z-index: 10;
}

.custom-select-wrapper {
   position: relative;
   width: 100%;
}

.select-trigger {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: rgba(0, 240, 255, 0.05);
   /* Slight tint */
   border: 1px dashed var(--dash-border);
   color: var(--dash-cyan);
   padding: 12px 15px;
   font-size: 13px;
   transition: all 0.2s;
}

.select-trigger:hover {
   background: rgba(0, 240, 255, 0.1);
   border-color: var(--dash-cyan);
}

.custom-options {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #0b1016;
   /* Solid background */
   border: 1px solid var(--dash-border);
   border-top: none;
   z-index: 20;
   max-height: 200px;
   overflow-y: auto;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
   opacity: 1;
   visibility: visible;
   transition: all 0.2s;
   transform: translateY(5px);
}

/* Profile Image Edit */
.profile-hex-large {
   position: relative;
   cursor: pointer;
   overflow: hidden;
   transition: all 0.3s;
}

.profile-hex-large:hover {
   box-shadow: 0 0 15px var(--dash-cyan);
   border-color: #fff;
}

.profile-edit-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s;
   color: #fff;
   font-size: 16px;
   z-index: 2;
}

.profile-hex-large:hover .profile-edit-overlay {
   opacity: 1;
}

.upload-trigger-btn {
   font-size: 10px;
   color: var(--dash-cyan);
   text-decoration: underline;
   cursor: pointer;
   margin-top: 5px;
   display: inline-block;
   opacity: 0.7;
   transition: opacity 0.2s;
}

.upload-trigger-btn:hover {
   opacity: 1;
}

.custom-options.hidden {
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   pointer-events: none;
}

.option-item {
   padding: 10px 15px;
   cursor: pointer;
   font-size: 12px;
   font-family: var(--dash-font-tech);
   letter-spacing: 1px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;
   align-items: center;
   gap: 10px;
   color: #8a8f9d;
   transition: all 0.2s;
}

.option-item:hover {
   background: rgba(0, 240, 255, 0.05);
   color: #fff;
   padding-left: 20px;
}

.option-item:last-child {
   border-bottom: none;
}

.empty-social-state {
   text-align: center;
   padding: 20px;
   border: 1px dashed rgba(255, 255, 255, 0.1);
   color: var(--text-muted, #8a8f9d);
   font-size: 11px;
   border-radius: 4px;
   font-family: var(--dash-font-ui);
   letter-spacing: 1px;
}

.social-input-row {
   margin-bottom: 15px;
}

.row-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 5px;
}

.remove-social-btn {
   background: none;
   border: none;
   color: var(--text-muted, #8a8f9d);
   cursor: pointer;
   font-size: 12px;
   transition: color 0.2s;
   padding: 0;
}

.remove-social-btn:hover {
   color: #ff3c3c;
}

/* Social Row in Header */
.user-social-row {
   display: flex;
   align-items: center;
   gap: 12px;
   height: 32px;
   margin-top: 5px;
}

.header-social-link {
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-muted, #8a8f9d);
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: 14px;
   text-decoration: none;
   backdrop-filter: blur(4px);
}

.header-social-link:hover {
   background: rgba(0, 240, 255, 0.1);
   border-color: rgba(0, 240, 255, 0.4);
   color: var(--dash-cyan);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.header-social-link i {
   transition: transform 0.2s;
}

.header-social-link:hover i {
   transform: scale(1.1);
}

/* --- Wallet Module Enhanced Styles --- */

.wallet-overview-container {
   display: flex;
   gap: 30px;
   margin-bottom: 40px;
   align-items: stretch;
}

@media (max-width: 900px) {
   .wallet-overview-container {
      flex-direction: column;
   }
}

/* Balance Card */
.wallet-balance-card {
   flex: 0 0 300px;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   padding: 25px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   overflow: hidden;
}

.wallet-balance-card::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 100px;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.03));
   pointer-events: none;
}

.balance-meta {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
}

.balance-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1.5px;
   color: var(--text-muted);
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 8px;
}

.balance-label i {
   color: var(--dash-cyan);
}

.balance-actions-mini {
   display: flex;
   gap: 5px;
}

.mini-control {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-muted);
   width: 24px;
   height: 24px;
   border-radius: 2px;
   cursor: pointer;
   font-size: 10px;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
}

.mini-control:hover {
   border-color: var(--dash-cyan);
   color: #fff;
   background: rgba(0, 240, 255, 0.05);
}

.balance-value-wrapper {
   display: flex;
   align-items: baseline;
   gap: 10px;
}

#wallet-balance-display {
   font-family: var(--dash-font-tech);
   font-size: 36px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 1px;
   text-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.currency-tag {
   font-size: 12px;
   font-weight: 700;
   color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.1);
   padding: 2px 6px;
   border-radius: 2px;
   letter-spacing: 1px;
}

/* Wallet Actions Row */
.wallet-actions-row {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   gap: 15px;
}

.wallet-action-item {
   background: rgba(8, 12, 18, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   padding: 15px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   position: relative;
   overflow: hidden;
   height: 100%;
}

.wallet-action-item:hover {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(0, 240, 255, 0.3);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.action-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.03);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: var(--dash-cyan);
   transition: all 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.05);
}

.wallet-action-item:hover .action-icon {
   background: rgba(0, 240, 255, 0.1);
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
   border-color: rgba(0, 240, 255, 0.2);
   color: #fff;
   transform: scale(1.1);
}

.action-label {
   font-family: var(--dash-font-ui);
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-muted);
   transition: color 0.2s;
}

.wallet-action-item:hover .action-label {
   color: #fff;
}

/* Modal System */
.dash-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(5px);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   /* Initially hidden interaction */
   transition: opacity 0.3s ease;
}

.dash-modal-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.dash-modal {
   background: #0b0f15;
   border: 1px solid var(--dash-border);
   border-top: 2px solid var(--dash-cyan);
   padding: 30px;
   width: 100%;
   max-width: 450px;
   border-radius: 4px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
   transform: scale(0.95);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   overflow: hidden;
}

.dash-modal-overlay.active .dash-modal {
   transform: scale(1);
}

/* Modal Grid Background */
.dash-modal::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   background-size: 20px 20px;
   opacity: 0.5;
   pointer-events: none;
   z-index: 0;
}

.dash-modal-content {
   position: relative;
   z-index: 1;
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 15px;
}

.modal-title {
   font-family: var(--dash-font-tech);
   font-size: 20px;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.modal-close {
   background: none;
   border: none;
   color: var(--text-muted);
   cursor: pointer;
   font-size: 18px;
   transition: color 0.2s;
}

.modal-close:hover {
   color: #fff;
}

.modal-balance-display {
   text-align: center;
   margin-bottom: 25px;
   background: rgba(0, 240, 255, 0.05);
   border: 1px solid rgba(0, 240, 255, 0.1);
   padding: 15px;
   border-radius: 4px;
}

.modal-balance-label {
   display: block;
   font-size: 10px;
   color: var(--text-muted);
   letter-spacing: 1px;
   margin-bottom: 5px;
   text-transform: uppercase;
}

.modal-balance-val {
   font-family: var(--dash-font-tech);
   font-size: 24px;
   color: var(--dash-cyan);
   font-weight: 700;
}

.modal-actions {
   display: flex;
   gap: 15px;
   margin-top: 25px;
}

.modal-btn {
   flex: 1;
   padding: 12px;
   border: none;
   border-radius: 2px;
   font-family: var(--dash-font-ui);
   font-weight: 600;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.2s;
}

.modal-btn.primary {
   background: var(--dash-cyan);
   color: #000;
}

.modal-btn.primary:hover {
   background: #fff;
   box-shadow: 0 0 15px var(--dash-cyan-dim);
}

.modal-btn.secondary {
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

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

/* Form Styles Override for Modal */
/* --- Top-Up Expansion Styles --- */
.wallet-action-item.expanded {
   background: #000;
   border-color: var(--dash-cyan);
   z-index: 10;
   cursor: default;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.action-content-default {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 100%;
}

.preset-btn {
   flex: 1;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-muted);
   font-size: 10px;
   padding: 4px 6px;
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.2s;
   font-family: var(--dash-font-tech);
}


.preset-btn:hover {
   background: rgba(0, 240, 255, 0.1);
   color: var(--dash-cyan);
   border-color: var(--dash-cyan);
}

/* --- Support Module Styles --- */
.support-nav-btn {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-muted);
   padding: 10px 20px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1px;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 8px;
}

.support-nav-btn:hover {
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
}

.support-nav-btn.active {
   background: rgba(0, 240, 255, 0.1);
   border-color: var(--dash-cyan);
   color: #fff;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

.custom-select-wrapper {
   position: relative;
}

.dash-btn-primary {
   background: var(--dash-cyan-dim);
   color: var(--dash-cyan);
   border: 1px solid var(--dash-cyan);
   padding: 10px 20px;
   cursor: pointer;
   font-family: var(--dash-font-tech);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.2s;
   border-radius: 2px;
   width: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

.dash-btn-primary:hover {
   background: var(--dash-cyan);
   color: #000;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* --- WooCommerce Adapter --- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
   font-family: var(--dash-font-tech);
   color: var(--dash-cyan);
   text-transform: uppercase;
   font-size: 18px;
   letter-spacing: 1px;
}

.woocommerce-table {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--dash-font-ui);
   margin-bottom: 30px;
}

.woocommerce-table th {
   text-align: left;
   padding: 16px 20px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--text-muted, #8a8f9d);
   border-bottom: 1px solid var(--dash-border);
   font-weight: 600;
   background: rgba(0, 0, 0, 0.2);
}

.woocommerce-table td {
   padding: 16px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   font-size: 13px;
   color: #eee;
}

.woocommerce-button,
.button,
.woocommerce-Button {
   background: transparent !important;
   border: 1px solid var(--dash-cyan) !important;
   color: var(--dash-cyan) !important;
   font-family: var(--dash-font-tech) !important;
   text-transform: uppercase;
   border-radius: 2px !important;
   padding: 8px 16px !important;
   font-weight: 700 !important;
   transition: all 0.2s !important;
   cursor: pointer;
}

.woocommerce-button:hover,
.button:hover,
.woocommerce-Button:hover {
   background: var(--dash-cyan) !important;
   color: #000 !important;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

.woocommerce-Input,
.input-text,
select {
   background: rgba(8, 12, 18, 0.5) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   color: #fff !important;
   padding: 10px !important;
   font-family: var(--dash-font-ui) !important;
}

.woocommerce-Input:focus,
.input-text:focus,
select:focus {
   border-color: var(--dash-cyan) !important;
   outline: none !important;
}

.woocommerce-message,
.woocommerce-info {
   background: rgba(0, 240, 255, 0.1) !important;
   border-top: 3px solid var(--dash-cyan) !important;
   color: #fff !important;
   font-family: var(--dash-font-ui) !important;
}

.woocommerce-error {
   background: rgba(255, 60, 60, 0.1) !important;
   border-top: 3px solid #ff3c3c !important;
   color: #fff !important;
}

/* Adjust address grid */
.woocommerce-Address {
   background: rgba(8, 12, 18, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 20px;
}

/* Empty Orders State */
.empty-orders-state {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.empty-orders-message {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 20px 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

.empty-icon {
   font-size: 40px;
   color: rgba(0, 240, 255, 0.2);
   margin-bottom: 10px;
}

.empty-title {
   font-family: var(--dash-font-tech);
   color: #fff;
   font-size: 24px;
   letter-spacing: 2px;
   margin: 0;
}

.empty-desc {
   color: var(--text-muted, #8a8f9d);
   font-size: 13px;
   max-width: 400px;
   margin-bottom: 20px;
   line-height: 1.6;
}

/* Quick Actions */
.quick-actions-title {
   font-family: var(--dash-font-tech);
   color: var(--dash-cyan);
   font-size: 14px;
   letter-spacing: 1px;
   margin-bottom: 20px;
   text-transform: uppercase;
   padding-left: 10px;
   border-left: 3px solid var(--dash-cyan);
}

.quick-actions-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 15px;
}

.quick-action-link {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-muted, #8a8f9d) !important;
   padding: 15px 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   text-decoration: none !important;
   border-radius: 4px;
   transition: all 0.2s;
   font-family: var(--dash-font-tech);
   font-size: 13px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.quick-action-link:hover {
   background: rgba(0, 240, 255, 0.05);
   border-color: var(--dash-cyan);
   color: #fff !important;
   transform: translateY(-2px);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.quick-action-link i {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

.dash-btn-primary:hover {
   background: var(--dash-cyan);
   color: #000;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

/* --- WooCommerce Adapter --- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
   font-family: var(--dash-font-tech);
   color: var(--dash-cyan);
   text-transform: uppercase;
   font-size: 18px;
   letter-spacing: 1px;
}

.woocommerce-table {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--dash-font-ui);
   margin-bottom: 30px;
}

.woocommerce-table th {
   text-align: left;
   padding: 16px 20px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--text-muted, #8a8f9d);
   border-bottom: 1px solid var(--dash-border);
   font-weight: 600;
   background: rgba(0, 0, 0, 0.2);
}

.woocommerce-table td {
   padding: 16px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   font-size: 13px;
   color: #eee;
}

.woocommerce-button,
.button,
.woocommerce-Button {
   background: transparent !important;
   border: 1px solid var(--dash-cyan) !important;
   color: var(--dash-cyan) !important;
   font-family: var(--dash-font-tech) !important;
   text-transform: uppercase;
   border-radius: 2px !important;
   padding: 8px 16px !important;
   font-weight: 700 !important;
   transition: all 0.2s !important;
   cursor: pointer;
}

.woocommerce-button:hover,
.button:hover,
.woocommerce-Button:hover {
   background: var(--dash-cyan) !important;
   color: #000 !important;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

.woocommerce-Input,
.input-text,
select {
   background: rgba(8, 12, 18, 0.5) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   color: #fff !important;
   padding: 10px !important;
   font-family: var(--dash-font-ui) !important;
}

.woocommerce-Input:focus,
.input-text:focus,
select:focus {
   border-color: var(--dash-cyan) !important;
   outline: none !important;
}

.woocommerce-message,
.woocommerce-info {
   background: rgba(0, 240, 255, 0.1) !important;
   border-top: 3px solid var(--dash-cyan) !important;
   color: #fff !important;
   font-family: var(--dash-font-ui) !important;
}

.woocommerce-error {
   background: rgba(255, 60, 60, 0.1) !important;
   border-top: 3px solid #ff3c3c !important;
   color: #fff !important;
}

/* Adjust address grid */
.woocommerce-Address {
   background: rgba(8, 12, 18, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 20px;
}

/* Empty Orders State */
.empty-orders-state {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.empty-orders-message {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 20px 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

.empty-icon {
   font-size: 40px;
   color: rgba(0, 240, 255, 0.2);
   margin-bottom: 10px;
}

.empty-title {
   font-family: var(--dash-font-tech);
   color: #fff;
   font-size: 24px;
   letter-spacing: 2px;
   margin: 0;
}

.empty-desc {
   color: var(--text-muted, #8a8f9d);
   font-size: 13px;
   max-width: 400px;
   margin-bottom: 20px;
   line-height: 1.6;
}

/* Quick Actions */
.quick-actions-title {
   font-family: var(--dash-font-tech);
   color: var(--dash-cyan);
   font-size: 14px;
   letter-spacing: 1px;
   margin-bottom: 20px;
   text-transform: uppercase;
   padding-left: 10px;
   border-left: 3px solid var(--dash-cyan);
}

.quick-actions-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 15px;
}

.quick-action-link {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-muted, #8a8f9d) !important;
   padding: 15px 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   text-decoration: none !important;
   border-radius: 4px;
   transition: all 0.2s;
   font-family: var(--dash-font-tech);
   font-size: 13px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.quick-action-link:hover {
   background: rgba(0, 240, 255, 0.05);
   border-color: var(--dash-cyan);
   color: #fff !important;
   transform: translateY(-2px);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}



.pixim-orders-table th {
   font-size: 10px !important;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--text-muted) !important;
   padding: 15px 20px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   background: rgba(0, 0, 0, 0.3);
}

.pixim-orders-table td {
   padding: 18px 20px !important;
   vertical-align: middle;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
   font-size: 13px !important;
}

.pixim-orders-table tr:hover td {
   background: rgba(0, 240, 255, 0.02);
}

/* Order Number */
.order-number-link {
   font-family: var(--dash-font-tech);
   font-weight: 700;
   font-size: 15px;
   color: #fff !important;
   text-decoration: none !important;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: color 0.2s;
}

.order-number-link i {
   font-size: 10px;
   opacity: 0;
   transform: translateX(-5px);
   transition: all 0.2s;
   color: var(--dash-cyan);
}

.order-number-link:hover {
   color: var(--dash-cyan) !important;
}

.order-number-link:hover i {
   opacity: 1;
   transform: translateX(0);
}

/* Order Totals */
.order-total-val {
   display: block;
   color: #fff;
   font-weight: 600;
   font-family: var(--dash-font-tech);
   letter-spacing: 0.5px;
}

.order-item-count {
   display: block;
   font-size: 10px;
   color: var(--text-muted);
   margin-top: 2px;
}

/* Status Badges */
.pixim-status-badge {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: var(--dash-font-ui);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-processing {
   background: rgba(0, 240, 255, 0.1);
   color: var(--dash-cyan);
   border: 1px solid rgba(0, 240, 255, 0.3);
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.status-pending {
   background: rgba(255, 160, 0, 0.1);
   color: #ffa000;
   border: 1px solid rgba(255, 160, 0, 0.3);
}

.status-success {
   background: rgba(0, 255, 100, 0.1);
   color: #00ff64;
   border: 1px solid rgba(0, 255, 100, 0.2);
}

.status-error {
   background: rgba(255, 50, 50, 0.1);
   color: #ff3232;
   border: 1px solid rgba(255, 50, 50, 0.3);
}

.status-muted {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-muted);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Compact Actions */
.order-actions-group {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
}

.compact-action-btn {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff !important;
   font-size: 10px;
   padding: 6px 12px;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none !important;
   transition: all 0.2s;
   font-weight: 600;
}

.compact-action-btn:hover {
   border-color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.1);
   color: var(--dash-cyan) !important;
}

.compact-action-btn.pay {
   border-color: #ffa000;
   color: #ffa000 !important;
}

.compact-action-btn.pay:hover {
   background: #ffa000;
   color: #000 !important;
}

/* --- Sortable Header Styles --- */
.sortable-header {
   cursor: pointer;
   transition: background 0.2s;
   user-select: none;
}

.sortable-header:hover {
   background: rgba(0, 240, 255, 0.1) !important;
   color: #fff !important;
}

.sort-icon {
   font-size: 10px;
   margin-left: 5px;
   opacity: 0.5;
   transition: all 0.2s;
}

.sortable-header:hover .sort-icon {
   opacity: 1;
   color: var(--dash-cyan);
}

/* Loading Overlay */
.table-loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(2px);
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
   border-radius: 4px;
}

.table-loading-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.spinner {
   width: 40px;
   height: 40px;
   border: 3px solid rgba(0, 240, 255, 0.1);
   border-top: 3px solid var(--dash-cyan);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.no-orders-found td {
   border: none !important;
   background: transparent !important;
}


/* --- Orders Filter Bar Centered & Tech Style --- */
.orders-filter-bar {
   text-align: center;
   margin-bottom: 35px;
   margin-top: 20px;
   position: relative;
}

/* Add a subtle separator line below the filter bar */
.orders-filter-bar::after {
   content: '';
   position: absolute;
   bottom: -15px;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
}

.filter-pills-wrapper {
   display: flex;
   justify-content: center;
   flex-wrap: nowrap;
   gap: 15px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 10px;
   scrollbar-width: none;
}

.filter-pills-wrapper::-webkit-scrollbar {
   display: none;
}

.filter-pill {
   /* Premium Glass Effect */
   background: linear-gradient(180deg, rgba(20, 30, 40, 0.7) 0%, rgba(10, 15, 20, 0.9) 100%);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   /* Top light highlight */

   color: var(--text-muted, #8a8f9d);
   padding: 10px 24px;
   height: 42px;
   min-width: 100px;
   /* Consistent minimum width */

   border-radius: 6px;
   /* High-end tech radius */
   font-family: var(--dash-font-tech, 'Rajdhani', sans-serif);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;

   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

   position: relative;
   overflow: hidden;
   flex-shrink: 0;
   text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

button.filter-pill {
   line-height: 1;
}

.filter-pill::before {
   /* Hover shine sweep effect container */
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
   transform: skewX(-20deg);
   transition: left 0.5s;
   pointer-events: none;
}

.filter-pill:hover::before {
   left: 150%;
}

.filter-pill:hover {
   border-color: rgba(0, 240, 255, 0.5);
   color: #fff;
   background: linear-gradient(180deg, rgba(0, 240, 255, 0.1) 0%, rgba(10, 20, 30, 0.8) 100%);
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
   transform: translateY(-2px);
}

.filter-pill.active {
   background: rgba(0, 240, 255, 0.1);
   border-color: var(--dash-cyan);
   color: var(--dash-cyan);
   box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.05);
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

/* Active indicator line */
.filter-pill.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--dash-cyan);
   box-shadow: 0 -2px 5px rgba(0, 240, 255, 0.8);
}

.filter-pill:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   filter: grayscale(1);
   pointer-events: none;
}

/* --- Orders Filter Bar Centered & Tech Style --- */
.orders-filter-bar {
   text-align: center;
   margin-bottom: 35px;
   margin-top: 20px;
   position: relative;
}

/* Add a subtle separator line below the filter bar */
.orders-filter-bar::after {
   content: '';
   position: absolute;
   bottom: -15px;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
}

.filter-pills-wrapper {
   display: flex;
   justify-content: center;
   flex-wrap: nowrap;
   gap: 15px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 30px;
   scrollbar-width: none;
   padding-top: 30px;
}

.filter-pills-wrapper::-webkit-scrollbar {
   display: none;
}

.filter-pill {
   /* Premium Glass Effect */
   background: linear-gradient(180deg, rgba(20, 30, 40, 0.7) 0%, rgba(10, 15, 20, 0.9) 100%);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   /* Top light highlight */

   color: var(--text-muted, #8a8f9d);
   padding: 10px 24px;
   height: 42px;
   min-width: 100px;
   /* Consistent minimum width */

   border-radius: 6px;
   /* High-end tech radius */
   font-family: var(--dash-font-tech, 'Rajdhani', sans-serif);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;

   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

   position: relative;
   overflow: hidden;
   flex-shrink: 0;
   text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: normal;
}

button.filter-pill {
   line-height: 1;
}

.filter-pill::before {
   /* Hover shine sweep effect container */
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
   transform: skewX(-20deg);
   transition: left 0.5s;
   pointer-events: none;
}

.filter-pill:hover::before {
   left: 150%;
}

.filter-pill:hover {
   border-color: rgba(0, 240, 255, 0.5);
   color: #fff;
   background: linear-gradient(180deg, rgba(0, 240, 255, 0.1) 0%, rgba(10, 20, 30, 0.8) 100%);
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
   transform: translateY(-2px);
}

.filter-pill.active {
   background: rgba(0, 240, 255, 0.1);
   border-color: var(--dash-cyan);
   color: var(--dash-cyan);
   box-shadow: 0 0 25px rgba(0, 240, 255, 0.25), inset 0 0 10px rgba(0, 240, 255, 0.05);
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

/* Active indicator line */
.filter-pill.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--dash-cyan);
   box-shadow: 0 -2px 5px rgba(0, 240, 255, 0.8);
}

.filter-pill:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   filter: grayscale(1);
   pointer-events: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
   .filter-pills-wrapper {
      justify-content: flex-start;
      padding-left: 10px;
      padding-right: 10px;
      scroll-snap-type: x mandatory;
   }

   .filter-pill {
      scroll-snap-align: center;
      width: auto;
   }
}

/* --- Futuristic System Table --- */
.pixim-orders-table {
   margin-bottom: 0 !important;
}

.pixim-orders-table th {
   font-size: 10px !important;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--text-muted) !important;
   padding: 15px 20px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   background: rgba(0, 0, 0, 0.3);
}

.pixim-orders-table td {
   padding: 18px 20px !important;
   vertical-align: middle;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
   font-size: 13px !important;
}

.pixim-orders-table tr:hover td {
   background: rgba(0, 240, 255, 0.02);
}

/* Order Number */
.order-number-link {
   font-family: var(--dash-font-tech);
   font-weight: 700;
   font-size: 15px;
   color: #fff !important;
   text-decoration: none !important;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: color 0.2s;
}

.order-number-link i {
   font-size: 10px;
   opacity: 0;
   transform: translateX(-5px);
   transition: all 0.2s;
   color: var(--dash-cyan);
}

.order-number-link:hover {
   color: var(--dash-cyan) !important;
}

.order-number-link:hover i {
   opacity: 1;
   transform: translateX(0);
}

/* Order Totals */
.order-total-val {
   display: block;
   color: #fff;
   font-weight: 600;
   font-family: var(--dash-font-tech);
   letter-spacing: 0.5px;
}

.order-item-count {
   display: block;
   font-size: 10px;
   color: var(--text-muted);
   margin-top: 2px;
}

/* Status Badges */
.pixim-status-badge {
   display: inline-block;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: var(--dash-font-ui);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-processing {
   background: rgba(0, 240, 255, 0.1);
   color: var(--dash-cyan);
   border: 1px solid rgba(0, 240, 255, 0.3);
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}

.status-pending {
   background: rgba(255, 160, 0, 0.1);
   color: #ffa000;
   border: 1px solid rgba(255, 160, 0, 0.3);
}

.status-success {
   background: rgba(0, 255, 100, 0.1);
   color: #00ff64;
   border: 1px solid rgba(0, 255, 100, 0.2);
}

.status-error {
   background: rgba(255, 50, 50, 0.1);
   color: #ff3232;
   border: 1px solid rgba(255, 50, 50, 0.3);
}

.status-muted {
   background: rgba(255, 255, 255, 0.05);
   color: var(--text-muted);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Compact Actions */
.order-actions-group {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
   overflow: visible !important;
}


.compact-action-btn {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff !important;
   font-size: 10px;
   padding: 6px 12px;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none !important;
   transition: all 0.2s;
   font-weight: 600;
}

.compact-action-btn:hover {
   border-color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.1);
   color: var(--dash-cyan) !important;
}

.compact-action-btn.pay {
   border-color: #ffa000;
   color: #ffa000 !important;
}

.compact-action-btn.pay:hover {
   background: #ffa000;
   color: #000 !important;
}

.compact-action-btn.action-download {
   position: relative;
   z-index: 1;
   border-color: rgba(0, 240, 255, 0.4);
   color: var(--dash-cyan) !important;
   background: transparent !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compact-action-btn.action-download:hover {
   background: var(--dash-cyan) !important;
   color: #000 !important;
   border-color: var(--dash-cyan);
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
   transform: translateY(-1px);
}



/* --- New PRODUCTS Manifest (pp-products-cell) --- */
.pp-products-cell {
   width: 320px;
   max-width: 420px;
   overflow: visible !important;
}

.pp-prod-main {
   display: flex;
   align-items: center;
   gap: 12px;
   position: relative;
   height: 40px;
}

.pp-prod-thumb {
   width: 40px;
   height: 40px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(0, 240, 255, 0.2);
   border-radius: 4px;
   overflow: hidden;
   flex-shrink: 0;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.05);
}

.pp-prod-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.pp-prod-info {
   display: flex;
   align-items: center;
   gap: 8px;
   overflow: hidden;
   flex: 1;
}

.pp-prod-name {
   font-size: 13px;
   color: #fff;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.pp-prod-qty {
   font-size: 11px;
   color: var(--dash-cyan);
   font-family: var(--dash-font-tech);
   font-weight: 700;
   white-space: nowrap;
   background: rgba(0, 240, 255, 0.1);
   padding: 2px 6px;
   border-radius: 3px;
}

/* More Pill Indicator */
.pp-prod-more {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 100, 255, 0.2) 100%);
   border: 1px solid rgba(0, 240, 255, 0.3);
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 6px;
   border-radius: 10px;
   cursor: pointer;
   position: relative;
   transition: all 0.2s;
}

.pp-prod-more:hover {
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
   background: rgba(0, 240, 255, 0.3);
}

/* Glass Popover */
.pp-prod-popover {
   position: absolute;
   bottom: calc(100% + 15px);
   right: 0;
   width: 280px;
   background: rgba(7, 12, 18, 0.98);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(0, 240, 255, 0.3);
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.1);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
   z-index: 100;
   pointer-events: none;
}

.pp-prod-more:hover .pp-prod-popover,
.pp-prod-more.active .pp-prod-popover {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: all;
}

.pp-popover-header {
   font-size: 10px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--dash-cyan);
   margin-bottom: 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   font-weight: 700;
}

.pp-popover-list {
   max-height: 200px;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--dash-cyan) transparent;
}

.pp-popover-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pp-popover-item:last-child {
   border-bottom: none;
}

.pp-popover-thumb {
   width: 32px;
   height: 32px;
   border-radius: 3px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-popover-meta {
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.pp-popover-name {
   font-size: 11px;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.pp-popover-qty {
   font-size: 9px;
   color: var(--text-muted);
}

/* Table Row Height Fix */
.pixim-orders-table td {
   padding: 14px 20px !important;
   height: 70px;
}

@media (max-width: 1024px) {
   .pp-products-cell {
      width: 100%;
      max-width: none;
   }

   .pp-prod-main {
      flex-wrap: wrap;
      height: auto;
   }

   .pp-prod-popover {
      position: static;
      width: 100%;
      margin-top: 10px;
      transform: none;
      display: none;
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      box-shadow: none;
      background: rgba(0, 0, 0, 0.2);
   }

   .pp-prod-more.active .pp-prod-popover {
      display: block;
   }
}

/* --- Sortable Header Styles --- */
.sortable-header {
   cursor: pointer;
   transition: background 0.2s;
   user-select: none;
}

.sortable-header:hover {
   background: rgba(0, 240, 255, 0.1) !important;
   color: #fff !important;
}

.sort-icon {
   font-size: 10px;
   margin-left: 5px;
   opacity: 0.5;
   transition: all 0.2s;
}

.sortable-header:hover .sort-icon {
   opacity: 1;
   color: var(--dash-cyan);
}

/* Base button reset for filter pills if they used <button> */
button.filter-pill {
   cursor: pointer;
   line-height: 1.2;
}

/* Loading Overlay */
.table-loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(2px);
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
   border-radius: 4px;
}

.table-loading-overlay.active {
   opacity: 1;
   pointer-events: all;
}

.spinner {
   width: 40px;
   height: 40px;
   border: 3px solid rgba(0, 240, 255, 0.1);
   border-top: 3px solid var(--dash-cyan);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.no-orders-found td {
   border: none !important;
   background: transparent !important;
}

/* --- Subscriptions Summary Card --- */
.subscriptions-summary .stat-value {
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.summary-stat {
   background: rgba(255, 255, 255, 0.02);
   padding: 12px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: all 0.3s ease;
}

.summary-stat:hover {
   background: rgba(0, 240, 255, 0.03);
   border-color: rgba(0, 240, 255, 0.2);
   transform: translateY(-2px);
}

.pixim-subscriptions-module .order-actions-group {
   justify-content: flex-end;
}

/* --- Downloads Terminal Enhancements --- */
.pixim-downloads-terminal {
   width: 100%;
   margin: 0 auto;
   overflow-x: auto;
}

.terminal-data-surface table {
   table-layout: fixed !important;
   width: 100% !important;
}

.terminal-data-surface th.download-product,
.terminal-data-surface td.download-product {
   width: 40%;
}

.terminal-data-surface th.download-remaining,
.terminal-data-surface td.download-remaining {
   width: 15%;
}

.terminal-data-surface th.download-expires,
.terminal-data-surface td.download-expires {
   width: 20%;
}

.terminal-data-surface th.download-file,
.terminal-data-surface td.download-file {
   width: 25%;
   text-align: right;
}

.terminal-summary-strip {
   display: flex;
   align-items: center;
   gap: 30px;
   background: rgba(0, 0, 0, 0.4);
   padding: 12px 20px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   margin-bottom: 20px;
   font-family: var(--dash-font-tech);
}

.summary-node {
   display: flex;
   gap: 8px;
   font-size: 11px;
}

.node-label {
   color: var(--text-muted);
}

.node-value {
   color: var(--dash-cyan);
   font-weight: 700;
}

.summary-status {
   margin-left: auto;
   font-size: 10px;
   color: var(--dash-cyan);
   display: flex;
   align-items: center;
   gap: 8px;
   letter-spacing: 1px;
}

.status-dot {
   width: 6px;
   height: 6px;
   background: var(--dash-cyan);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--dash-cyan);
   animation: pulse 1.5s infinite;
}

.terminal-data-surface thead th {
   background: transparent !important;
   border-bottom: 2px solid rgba(0, 240, 255, 0.1) !important;
   padding-bottom: 15px !important;
}

.terminal-row {
   background: rgba(255, 255, 255, 0.01) !important;
   transition: all 0.3s ease !important;
}

.terminal-row:hover {
   background: rgba(0, 240, 255, 0.03) !important;
}

.terminal-row td {
   padding-top: 15px !important;
   padding-bottom: 15px !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
   overflow: visible !important;
}

.terminal-thumb {
   width: 48px !important;
   height: 48px !important;
   flex-shrink: 0;
}

.terminal-thumb img {
   border-radius: 8px;
   border: 1px solid rgba(0, 240, 255, 0.2);
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

.terminal-asset-name {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 2px;
}

.terminal-asset-meta {
   font-size: 12px;
   color: var(--text-muted);
   font-family: var(--dash-font-tech);
   display: flex;
   align-items: center;
   gap: 6px;
}

.compact-product .pp-prod-info {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 2px !important;
   flex: 1;
   min-width: 0;
}

.compact-product .pp-prod-main {
   height: auto !important;
   min-height: 48px;
}

.terminal-data-node {
   display: flex;
   flex-direction: column;
}

.node-meta-label {
   font-size: 8px;
   color: var(--text-muted);
   margin-bottom: 2px;
   display: none;
   /* Hide for desktop since we have headers */
}

.tech-val {
   font-family: var(--dash-font-tech);
   letter-spacing: 0.5px;
}

.terminal-btn {
   border-radius: 10px !important;
   background: transparent !important;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   max-width: 180px;
}

.terminal-btn .btn-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

@media (max-width: 768px) {
   .terminal-summary-strip {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
   }

   .summary-status {
      margin-left: 0;
   }

   .terminal-data-node .node-meta-label {
      display: block;
   }

   .terminal-row td {
      padding-left: 110px !important;
   }
}

.woocommerce-MyAccount-content {
   width: 75% !important;
   padding-left: 0px !important;
   float: right !important;
}

/* --- Wallet Module Enhanced --- */
.pixim-wallet-module {
   padding: 0;
}

.wallet-overview-container {
   display: flex;
   gap: 12px;
   margin-bottom: 20px;
   align-items: flex-start;

}

/* Layout Structure: Left Sidebar + Right Panel */
.pp-wallet-ops-row-1 {
   flex: 0 0 280px;
   width: 280px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.pp-wallet-ops-row-2 {
   flex: 1;
   min-width: 0;
   /* Prevent flex blowout */
   max-width: -webkit-fill-available;
   /* Readability constraint */
   width: 100%;
}

/* Tablet: Breakdown to stacked rows */
@media (max-width: 1024px) {
   .wallet-overview-container {
      flex-direction: column;
      align-items: stretch;
      max-width: 100%;
   }

   .pp-wallet-ops-row-1 {
      width: 100%;
      flex: none;
      display: grid;
      grid-template-columns: 1fr 2fr;
      /* Balance Left, Actions Right */
      gap: 20px;
   }

   .pp-wallet-ops-row-2 {
      max-width: 100%;
   }
}

/* Mobile: Full Stack */
@media (max-width: 768px) {
   .pp-wallet-ops-row-1 {
      display: flex;
      flex-direction: column;
   }
}

.glass-panel {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 4px;
   backdrop-filter: blur(10px);
}

/* Viewport Panel (Left) */
/* Viewport Panel (Left - Balance) */
.wallet-viewport {
   width: 100%;
   /* Full width of sidebar */
   flex: none;
   padding: 18px;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(0, 240, 255, 0.1);
   box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.03);
}

.viewport-header {
   margin-bottom: 25px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   padding-bottom: 15px;
}

.balance-meta {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 15px;
}

.balance-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 1.5px;
   color: var(--text-muted);
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 8px;
}

.balance-label i {
   color: var(--dash-cyan);
}

.balance-value-wrapper {
   display: flex;
   align-items: baseline;
   gap: 10px;
}

#wallet-balance-display {
   font-family: var(--dash-font-tech);
   font-size: 42px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 1px;
   text-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.currency-tag {
   font-size: 11px;
   font-weight: 700;
   color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.1);
   padding: 2px 6px;
   border-radius: 2px;
   letter-spacing: 1px;
}

/* Swapable Panels */
.wallet-panel {
   display: none;
   animation: piximPanelIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wallet-panel.is-active {
   display: block;
}

@keyframes piximPanelIn {
   from {
      opacity: 0;
      transform: translateX(-15px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* Panel Content Area */
.viewport-content {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
   border-radius: 4px;
   padding: 24px;
   /* Generous padding for panel */
   min-height: auto;
   height: fit-content;
}

@media (max-width: 768px) {
   .viewport-content {
      padding: 20px;
   }
}

.panel-title {
   display: block;
   font-family: var(--dash-font-tech);
   font-size: 15px;
   color: var(--dash-cyan);
   letter-spacing: 2px;
   margin-bottom: 12px;
   text-transform: uppercase;
}

.panel-input-group {
   margin-bottom: 20px;
}

.panel-input-group label {
   display: block;
   font-size: 10px;
   color: var(--text-muted);
   margin-bottom: 8px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.panel-input-group input,
.panel-input-group textarea {
   width: 100%;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #fff;
   padding: 12px 15px;
   border-radius: 4px;
   font-family: var(--dash-font-ui);
   font-size: 14px;
   outline: none;
   transition: all 0.2s;
}

.panel-input-group input:focus,
.panel-input-group textarea:focus {
   border-color: var(--dash-cyan);
   background: rgba(0, 240, 255, 0.03);
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

/* Action Tiles (Tabs - Sidebar Mode) */
.wallet-actions-row {
   display: flex;
   flex-direction: column;
   /* Vertical Stack */
   gap: 8px;
}

@media (max-width: 1024px) {
   .wallet-actions-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      /* Grid on Tablet */
      gap: 15px;
   }
}

.wallet-tab-card {
   padding: 12px 16px;
   display: flex;
   flex-direction: row;
   /* Horizontal Content */
   align-items: center;
   justify-content: flex-start;
   /* Left Align */
   gap: 12px;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.05);
}

.wallet-tab-card:hover {
   background: rgba(0, 240, 255, 0.03);
   border-color: rgba(0, 240, 255, 0.2);
   transform: translateY(-3px);
}

/* ACTIVE INDICATOR POINT */
.wallet-tab-card.is-active {
   background: rgba(0, 240, 255, 0.06);
   border-color: rgba(0, 240, 255, 0.4);
}



.wallet-tab-card.is-active::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 3px;
   /* Side Marker */
   background: var(--dash-cyan);
   box-shadow: 0 0 15px var(--dash-cyan);
   border-radius: 0;
   transform: none;
}

/* Adjust active marker for tablet grid */
@media (max-width: 1024px) {
   .wallet-tab-card.is-active::before {
      height: 3px;
      width: 100%;
      top: 0;
      left: 0;
   }
}

/* Hide the old top-center dot/line if present in other rules by override */
.wallet-tab-card.is-active::after {
   display: none;
}

.wallet-tab-card.is-active::after {
   content: '';
   position: absolute;
   top: -2px;
   left: 50%;
   transform: translateX(-50%);
   width: 30px;
   height: 2px;
   background: var(--dash-cyan);
   box-shadow: 0 0 12px var(--dash-cyan);
   z-index: 9;
}

.wallet-tab-card .action-icon {
   width: 32px;
   height: 32px;
   min-width: 32px;
   min-height: 32px;
   margin-right: 12px;
   /* Right Margin for text spacing */

   border-radius: 50%;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--dash-cyan);
   transition: all 0.3s ease;
   padding: 0;
   margin: 0;
}

.wallet-tab-card .action-icon i {
   font-size: 14px;
   width: 14px;
   height: 14px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
}


.wallet-tab-card:hover .action-icon,
.wallet-tab-card.is-active .action-icon {
   background: var(--dash-cyan);
   color: #000;
   box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
}

.action-label {
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1.2px;
}

/* Expanded/Form Components */
.topup-input-wrapper {
   display: flex;
   align-items: center;
   gap: 15px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 15px;
   border-radius: 4px;
   margin-bottom: 20px;
}

.tech-prefix {
   color: var(--dash-cyan);
   font-family: var(--dash-font-tech);
   font-weight: 700;
   font-size: 22px;
}

#topup-amount-input {
   background: transparent;
   border: none;
   color: #fff;
   font-family: var(--dash-font-tech);
   font-size: 26px;
   width: 100%;
   outline: none;
}

.topup-presets {
   display: flex;
   gap: 10px;
   margin-bottom: 25px;
}

.preset-btn {
   flex: 1;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #fff;
   padding: 10px;
   border-radius: 4px;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.2s;
   font-family: var(--dash-font-tech);
   text-transform: uppercase;
}

.preset-btn:hover {
   background: var(--dash-cyan-dim);
   border-color: var(--dash-cyan);
}

.confirm-topup-btn {
   width: 100%;
   background: var(--dash-cyan);
   color: #000;
   border: none;
   padding: 15px;
   border-radius: 4px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   cursor: pointer;
   transition: all 0.2s;
   font-family: var(--dash-font-tech);
   font-size: 14px;
}

.confirm-topup-btn:hover {
   box-shadow: 0 0 25px var(--dash-cyan);
   transform: translateY(-1px);
}

/* Unified Form Styling (Matches Login Modal) */
.pixim-wallet-module .modal-form {
   display: flex !important;
   flex-direction: column !important;
   gap: 12px !important;
   margin: 0 !important;
   padding: 0 !important;
}

.pixim-wallet-module .form-group {
   display: flex !important;
   flex-direction: column !important;
   gap: 4px !important;
   position: relative !important;
   margin-bottom: 12px !important;
   /* Consistent vertical spacing */
   padding: 0 !important;
}

.pixim-wallet-module .input-label {
   font-family: var(--dash-font-tech) !important;
   font-size: 12px !important;
   font-weight: 600 !important;
   color: var(--text-muted) !important;
   letter-spacing: 1px !important;
   text-transform: uppercase !important;
   display: block !important;
   margin: 0 !important;
}

.pixim-wallet-module .input-wrapper {
   position: relative !important;
   display: flex !important;
   align-items: center !important;
   margin: 0 !important;
}

.pixim-wallet-module .input-icon {
   position: absolute !important;
   left: 14px !important;
   color: var(--text-muted) !important;
   font-size: 14px !important;
   pointer-events: none !important;
   transition: color 0.3s !important;
   z-index: 5 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
   top: 0 !important;
   width: 20px !important;
}

.pixim-wallet-module .modal-input,
.pixim-wallet-module textarea {
   width: 100% !important;
   background: rgba(255, 255, 255, 0.03) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 4px !important;
   padding: 12px 14px 12px 48px !important;
   color: #fff !important;
   font-family: var(--dash-font-ui) !important;
   font-size: 14px !important;
   transition: all 0.3s !important;
   outline: none !important;
   height: 44px !important;
   box-sizing: border-box !important;
   margin: 0 !important;
   line-height: normal !important;
}

.pixim-wallet-module textarea {
   height: auto !important;
   min-height: 100px !important;
   padding: 12px 15px !important;
   /* Non-iconed fields get standard padding */
}

/* Iconed textareas (if any) */
.pixim-wallet-module .input-wrapper textarea {
   padding-left: 48px !important;
}

.pixim-wallet-module .modal-input:focus,
.pixim-wallet-module textarea:focus {
   border-color: var(--dash-cyan) !important;
   background: rgba(0, 240, 255, 0.05) !important;
   box-shadow: 0 0 15px rgba(0, 240, 255, 0.1) !important;
}

.pixim-wallet-module .modal-input:focus~.input-icon,
.pixim-wallet-module textarea:focus~.input-icon {
   color: var(--dash-cyan) !important;
}

.pixim-wallet-module .btn-submit {
   width: 100% !important;
   padding: 14px !important;
   background: rgba(0, 240, 255, 0.1) !important;
   border: 1px solid var(--dash-cyan) !important;
   color: var(--dash-cyan) !important;
   font-family: var(--dash-font-tech) !important;
   font-size: 16px !important;
   font-weight: 700 !important;
   letter-spacing: 2px !important;
   text-transform: uppercase !important;
   cursor: pointer !important;
   transition: all 0.3s !important;
   position: relative !important;
   overflow: hidden !important;
   margin-top: 10px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 10px !important;
   height: auto !important;
   border-radius: 4px !important;
   box-shadow: none !important;
}

.pixim-wallet-module .btn-submit:hover {
   background: var(--dash-cyan) !important;
   color: #000 !important;
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.4) !important;
}

.pixim-wallet-module .btn-submit:active {
   transform: scale(0.98) !important;
}



/* Withdraw Destination Selector - Refined */
.pixim-wallet-module .destination-selector {
   display: flex !important;
   gap: 12px !important;
   margin-bottom: 25px !important;
   width: 100% !important;
}

.pixim-wallet-module .dest-toggle-btn {
   flex: 1 !important;
   height: 42px !important;
   position: relative !important;
   background: rgba(8, 12, 18, 0.8) !important;
   border: 1px solid rgba(0, 240, 255, 0.15) !important;
   color: rgba(255, 255, 255, 0.5) !important;
   padding: 0 20px !important;
   border-radius: 30px !important;
   font-family: var(--dash-font-tech) !important;
   font-size: 13px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 1.5px !important;
   cursor: pointer !important;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   overflow: hidden !important;
   backdrop-filter: blur(10px) !important;
}

.pixim-wallet-module .dest-label-group {
   display: flex !important;
   align-items: center !important;
   gap: 12px !important;
}

.pixim-wallet-module .dest-toggle-btn i {
   font-size: 18px !important;
   width: 18px !important;
   display: flex !important;
   justify-content: center !important;
   opacity: 0.6 !important;
   transition: all 0.3s ease !important;
}

.pixim-wallet-module .dest-toggle-btn:hover {
   background: rgba(15, 22, 32, 0.9) !important;
   border-color: rgba(0, 240, 255, 0.4) !important;
   color: #fff !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.08) !important;
}

.pixim-wallet-module .dest-toggle-btn.is-active {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.04)) !important;
   border-color: var(--dash-cyan) !important;
   color: #fff !important;
   box-shadow: 0 0 25px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.5) !important;
}

.pixim-wallet-module .dest-toggle-btn.is-active i {
   opacity: 1 !important;
   color: var(--dash-cyan) !important;
   filter: drop-shadow(0 0 8px var(--dash-cyan)) !important;
}

/* Badge / Tag Styling */
.pixim-wallet-module .toggle-tag {
   font-size: 10px !important;
   padding: 4px 10px !important;
   border-radius: 20px !important;
   background: rgba(0, 240, 255, 0.12) !important;
   border: 1px solid rgba(0, 240, 255, 0.35) !important;
   color: rgba(0, 240, 255, 0.7) !important;
   font-weight: 700 !important;
   letter-spacing: 1px !important;
   text-transform: uppercase !important;
   transition: all 0.3s !important;
   line-height: 1 !important;
}

.pixim-wallet-module .dest-toggle-btn.is-active .toggle-tag {
   background: rgba(0, 240, 255, 0.22) !important;
   border-color: var(--dash-cyan) !important;
   color: var(--dash-cyan) !important;
   box-shadow: 0 0 12px rgba(0, 240, 255, 0.3) !important;
}

/* Electric Edge Accent */
.pixim-wallet-module .dest-toggle-btn.is-active::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--dash-cyan), transparent);
   box-shadow: 0 0 10px var(--dash-cyan);
   opacity: 0.8 !important;
}

.pixim-wallet-module .dest-toggle-btn:active {
   transform: translateY(0) !important;
   box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.8) !important;
}

.withdraw-fields-group {
   display: none;
   flex-direction: column;
   gap: 15px;
   animation: piximPanelIn 0.3s ease-out;
}

.withdraw-fields-group.is-active {
   display: flex;
}

/* Compact Bank Fields */
.bank-fields-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
}


/* --- Mobile: Stacked Destination Selector --- */
.pixim-wallet-module .destination-selector {
   flex-direction: column !important;
   gap: 10px !important;
}

.pixim-wallet-module .dest-toggle-btn {
   width: 100% !important;
   height: 100px !important;
   justify-content: space-between !important;
   padding: 10px 15px !important;
}

/* --- Mobile: Enhanced Inputs --- */
.pixim-wallet-module .modal-input,
.pixim-wallet-module textarea {
   height: 50px !important;
   /* Mobile friendly height */
   font-size: 16px !important;
   /* Prevent iOS zoom */
   padding-left: 45px !important;
   /* Space for icon */
}

.pixim-wallet-module .input-icon {
   font-size: 16px !important;
   width: 20px !important;
   left: 15px !important;
}

/* --- Mobile: Close Button Accessibility --- */
.panel-header-row .close-panel {
   font-size: 20px !important;
   padding: 10px !important;
   /* Larger hit area */
   margin-right: -10px !important;
   /* Align with edge */
   color: #fff !important;
}

/* --- Mobile: Submit Button sticky-ish/full --- */
.pixim-wallet-module .btn-submit {
   position: relative !important;
   width: 100% !important;
   height: 55px !important;
   font-size: 14px !important;
   margin-top: 20px !important;
   margin-bottom: 20px !important;
   /* Bottom buffer */
   box-shadow: 0 5px 20px rgba(0, 240, 255, 0.2) !important;
}

/* Bank Fields Grid on Mobile */
.bank-fields-grid {
   grid-template-columns: 1fr !important;
   gap: 12px !important;
}
}

/* Fix visibility of existing panels while transitioning markup if needed */
.panel-input-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 20px;
}

/* Ensure Top Up specials match */
.topup-presets {
   display: flex;
   gap: 10px;
   margin: 5px 0 15px 0 !important;
}

/* Top-up Preset Buttons */
.pixim-wallet-module .preset-btn {
   flex: 1 !important;
   height: 42px !important;
   position: relative !important;
   background: rgba(8, 12, 18, 0.8) !important;
   border: 1px solid rgba(0, 240, 255, 0.15) !important;
   color: rgba(255, 255, 255, 0.6) !important;
   padding: 0 15px !important;
   border-radius: 30px !important;
   font-family: var(--dash-font-tech) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 1px !important;
   cursor: pointer !important;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   overflow: hidden !important;
   backdrop-filter: blur(10px) !important;
}

.pixim-wallet-module .preset-btn:hover {
   background: rgba(15, 22, 32, 0.9) !important;
   border-color: rgba(0, 240, 255, 0.4) !important;
   color: #fff !important;
   transform: translateY(-1px) !important;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.08) !important;
}

.pixim-wallet-module .preset-btn.is-active {
   background: linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.04)) !important;
   border-color: var(--dash-cyan) !important;
   color: var(--dash-cyan) !important;
   box-shadow: 0 0 20px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
   text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

.pixim-wallet-module .preset-btn.is-active::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--dash-cyan), transparent);
   box-shadow: 0 0 10px var(--dash-cyan);
   opacity: 0.8 !important;
}


.pixim-wallet-module .preset-btn:active {
   transform: translateY(0) !important;
   box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.8) !important;
}

/* --- MOBILE WALLET REDESIGN (MAX 768px) --- */
@media only screen and (max-width: 768px) {
   .pixim-wallet-module {
      padding: 0 !important;
      width: 100% !important;
      overflow: hidden !important;
   }

   /* 1. Tight Balance Card */
   .pp-balance-card {
      padding: 20px 15px !important;
      margin-bottom: 20px !important;
      border-radius: 2px !important;
   }

   .viewport-header {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      border-bottom: none !important;
   }

   #wallet-balance-display {
      font-size: 32px !important;
      line-height: 1 !important;
   }

   .currency-tag {
      font-size: 9px !important;
      vertical-align: middle !important;
   }

   /* 2. Compact Action Tiles Grid */
   .pp-action-tiles {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
      margin-bottom: 20px !important;
   }

   .wallet-tab-card {
      padding: 12px 8px !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 6px !important;
      border-radius: 2px !important;
      background: rgba(255, 255, 255, 0.02) !important;
   }

   .wallet-tab-card .action-icon {
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
      min-height: 30px !important;
      margin: 0 !important;
   }

   .wallet-tab-card .action-icon i {
      font-size: 13px !important;
      width: 13px !important;
      height: 13px !important;
   }

   .action-label {
      font-size: 9px !important;
      letter-spacing: 0.5px !important;
   }

   .wallet-tab-card.is-active::before {
      height: 2px !important;
      width: 50% !important;
      left: 25% !important;
      top: auto !important;
      bottom: 0 !important;
      box-shadow: 0 0 10px var(--dash-cyan) !important;
   }

   /* 3. Panel Adjustments */
   .viewport-content {
      padding: 15px !important;
      border-radius: 2px !important;
   }

   .panel-title {
      font-size: 13px !important;
      border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
      padding-bottom: 8px !important;
   }

   /* 4. Transaction List → Stacked Cards */
   .system-table,
   .system-table tbody,
   .system-table tr,
   .system-table td {
      display: block !important;
      width: 100% !important;
   }

   .system-table thead {
      display: none !important;
   }

   .system-table tbody {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
   }

   .system-table tr {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      background: rgba(8, 12, 18, 0.6) !important;
      border: 1px solid var(--dash-border) !important;
      border-radius: 2px !important;
      padding: 12px !important;
      gap: 10px !important;
      position: relative !important;
      box-sizing: border-box !important;
   }

   .system-table td {
      display: flex !important;
      flex-direction: column !important;
      padding: 0 !important;
      border: none !important;
      text-align: left !important;
      gap: 2px !important;
   }

   .system-table td::before {
      content: attr(data-label);
      font-size: 7px !important;
      color: rgba(255, 255, 255, 0.3) !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.8px !important;
      line-height: 1 !important;
   }

   .system-table td:nth-child(1) {
      grid-column: 1 !important;
      order: 2;
   }

   /* ID */
   .system-table td:nth-child(2) {
      grid-column: 1 !important;
      order: 1;
      margin-bottom: 4px;
   }

   /* TYPE */
   .system-table td:nth-child(3) {
      grid-column: 2 !important;
      order: 4;
      text-align: right !important;
      align-items: flex-end;
   }

   /* METHOD */
   .system-table td:nth-child(4) {
      grid-column: 1 !important;
      order: 3;
   }

   /* DATE */
   .system-table td:nth-child(5) {
      grid-column: 2 !important;
      order: 1;
      text-align: right !important;
      align-items: flex-end;
      font-size: 14px !important;
   }

   /* AMOUNT */

   .system-table .tech-val {
      font-size: 11px !important;
   }

   .system-table td:nth-child(3) {
      font-size: 10px !important;
      color: rgba(255, 255, 255, 0.6) !important;
   }
}

/* --- Mobile Withdraw UI Enhancements --- */
@media only screen and (max-width: 768px) {
   .pixim-wallet-module .destination-selector {
      flex-direction: column !important;
      gap: 10px !important;
   }

   .pixim-wallet-module .dest-toggle-btn {
      width: 100% !important;
      height: 50px !important;
      justify-content: space-between !important;
      padding: 0 15px !important;
   }

   .pixim-wallet-module .modal-input,
   .pixim-wallet-module textarea {
      height: 50px !important;
      font-size: 16px !important;
      padding-left: 45px !important;
   }

   .pixim-wallet-module .input-icon {
      font-size: 16px !important;
      width: 20px !important;
      left: 15px !important;
      top: 0 !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
   }

   .panel-header-row .close-panel {
      font-size: 20px !important;
      padding: 10px !important;
      margin-right: -10px !important;
      color: #fff !important;
   }

   .pixim-wallet-module .btn-submit {
      position: relative !important;
      width: 100% !important;
      height: 55px !important;
      font-size: 14px !important;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
      box-shadow: 0 5px 20px rgba(0, 240, 255, 0.2) !important;
   }

   .bank-fields-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
   }
}

/* --- Mobile Withdraw Overflow & Scroll Fix --- */
@media only screen and (max-width: 768px) {
   .dash-modal {
      max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overflow-y: auto;
      display: flex;
      /* Changed to flex to allow content to flex within */
      flex-direction: column;
      padding-bottom: env(safe-area-inset-bottom, 20px);
      /* Adjust padding for iOS safe area + additional for submit button */
      box-sizing: border-box;
      /* Ensure padding is included in height calculation */
   }

   .dash-modal-content {
      flex-grow: 1;
      /* Allow content to take up available space */
      overflow-y: visible;
      /* Content itself should not scroll, the modal container will */
      padding-bottom: 80px;
      /* Ample space for content above the sticky button */
   }

   /* Ensure close button remains visible and accessible */
   .modal-header {
      position: sticky;
      top: 0;
      background: #0b0f15;
      /* Same as modal background to avoid transparency issues */
      z-index: 10;
      padding-top: 20px;
      /* Add some space from the top of the modal */
   }

   /* Make the submit button sticky at the bottom of the modal content */
   .pixim-wallet-module .btn-submit {
      position: sticky !important;
      bottom: 0 !important;
      margin-top: auto !important;
      /* Pushes button to the bottom */
      background: #0b0f15;
      /* Match modal background */
      padding-bottom: env(safe-area-inset-bottom, 20px);
      /* Safe area consideration */
      z-index: 10;
      border-top: 1px solid rgba(0, 240, 255, 0.1);
      /* Separator line */
   }

   /* Ensure inputs and payment options remain full-width */
   .pixim-wallet-module .modal-input,
   .pixim-wallet-module textarea,
   .pixim-wallet-module .destination-selector {
      width: 100% !important;
   }

   /* Reset other mobile specific overrides that might conflict */
   .pixim-wallet-module {
      overflow: hidden !important;
      /* Keep the module itself contained */
   }

   .viewport-content {
      max-height: none !important;
      /* Allow content to expand within the flex container */
      overflow-y: visible !important;
      /* Parent handles scrolling */
      padding-bottom: 0 !important;
      /* Reset padding to be handled by dash-modal-content */
   }

   .panel-header-row {
      position: static !important;
      top: auto !important;
      background: transparent !important;
      z-index: auto !important;
      padding: 0 !important;
      margin-bottom: 25px !important;
      /* Restore default margin bottom or adjust as needed */
   }

   .close-panel {
      z-index: auto !important;
   }
}

@media only screen and (max-width: 768px) {
   .pixim-wallet-module .dest-toggle-btn {
      width: 100% !important;
      height: 100px !important;
      justify-content: space-between !important;
      padding: 10px 15px !important;
   }

   .panel-header-row {
      position: static !important;
      top: auto !important;
      background: transparent !important;
      z-index: auto !important;
      padding: 0 !important;
      margin-bottom: 1px !important;
   }
}