/**
 * Solvway Member Portal v2 — Enterprise UI/UX Design System
 * Telco-grade customer portal for student hostel Wi-Fi
 * Premium aesthetics: Deep Navy × Crimson × Glassmorphism
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --sp-primary:        #E8344A;
  --sp-primary-dark:   #C4273B;
  --sp-primary-light:  #FEF0F2;
  --sp-primary-ring:   rgba(232, 52, 74, 0.18);
  --sp-accent:         #FF6B35;
  --sp-grad-brand:     linear-gradient(135deg, #E8344A 0%, #FF6B35 100%);
  --sp-grad-brand-rev: linear-gradient(135deg, #FF6B35 0%, #E8344A 100%);

  --sp-navy-950:  #080F1C;
  --sp-navy-900:  #0D1B2A;
  --sp-navy-800:  #1A2D45;
  --sp-navy-700:  #243752;
  --sp-navy-600:  #2E4461;
  --sp-navy-500:  #3B5275;
  --sp-slate-400: #64748B;
  --sp-slate-300: #94A3B8;
  --sp-slate-200: #CBD5E1;
  --sp-slate-100: #E2E8F0;
  --sp-slate-50:  #F1F5F9;

  --sp-bg-canvas:  #EEF2F7;
  --sp-bg-surface: #FFFFFF;
  --sp-bg-subtle:  #F8FAFC;
  --sp-bg-hover:   #F0F4F8;

  --sp-border:        #E2E8F0;
  --sp-border-subtle: #F1F5F9;
  --sp-border-strong: #CBD5E1;

  --sp-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --sp-text-main:      #0F172A;
  --sp-text-secondary: #475569;
  --sp-text-muted:     #64748B;
  --sp-text-subtle:    #94A3B8;
  --sp-text-inverse:   #FFFFFF;

  --sp-success:        #059669;
  --sp-success-bg:     #ECFDF5;
  --sp-success-border: #A7F3D0;
  --sp-warning:        #D97706;
  --sp-warning-bg:     #FFFBEB;
  --sp-warning-border: #FDE68A;
  --sp-danger:         #DC2626;
  --sp-danger-bg:      #FEF2F2;
  --sp-danger-border:  #FECACA;
  --sp-info:           #2563EB;
  --sp-info-bg:        #EFF6FF;
  --sp-info-border:    #BFDBFE;

  --sp-shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --sp-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
  --sp-shadow-md: 0 4px 8px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.05);
  --sp-shadow-lg: 0 12px 24px -4px rgba(15,23,42,0.10), 0 4px 8px -4px rgba(15,23,42,0.05);
  --sp-shadow-xl: 0 24px 48px -8px rgba(15,23,42,0.12), 0 8px 16px -8px rgba(15,23,42,0.06);
  --sp-shadow-glow: 0 0 0 3px var(--sp-primary-ring);
  --sp-shadow-brand: 0 8px 24px rgba(232,52,74,0.30);

  --sp-radius-xs:   4px;
  --sp-radius-sm:   8px;
  --sp-radius-md:   12px;
  --sp-radius-lg:   16px;
  --sp-radius-xl:   20px;
  --sp-radius-2xl:  28px;
  --sp-radius-full: 9999px;

  --sp-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --sp-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --sp-dur-fast:  0.12s;
  --sp-dur-base:  0.20s;
  --sp-dur-slow:  0.35s;

  --bs-primary:     #E8344A;
  --bs-primary-rgb: 232,52,74;
}

/* ============================================================
   2. BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sp-font-sans) !important;
  font-size: 0.9375rem;
  line-height: 1.6;
  background-color: var(--sp-bg-canvas) !important;
  color: var(--sp-text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--sp-font-sans) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sp-text-main);
  line-height: 1.3;
}

a { color: var(--sp-primary); text-decoration: none; transition: color var(--sp-dur-fast) var(--sp-ease); }
a:hover { color: var(--sp-primary-dark); }

/* ============================================================
   3. ANIMATIONS
   ============================================================ */
@keyframes sp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sp-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(232,52,74,0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(232,52,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,52,74,0); }
}
@keyframes sp-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes sp-count-up {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sp-dropdown-in {
  from { opacity:0; transform: translateY(-8px) scale(0.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes sp-receipt-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.app-content, .app-content-header {
  animation: sp-fade-up var(--sp-dur-slow) var(--sp-ease);
}

/* ============================================================
   4. APP SHELL
   ============================================================ */
.app-wrapper { background-color: var(--sp-bg-canvas); min-height: 100vh; }
.app-main    { background: var(--sp-bg-canvas); }
.app-content { padding: 0 1.5rem 2rem; }
.app-content-header { padding: 1.5rem 1.5rem 0.75rem; }
.app-content-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sp-text-main);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

/* ============================================================
   5. HEADER / NAVBAR
   ============================================================ */
.app-header.navbar {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid rgba(226,232,240,0.8) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.03);
  height: 64px;
  padding: 0 1.5rem;
  z-index: 1030;
}
.app-header .nav-link {
  color: var(--sp-text-secondary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-dur-fast) var(--sp-ease);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.app-header .nav-link:hover {
  color: var(--sp-primary) !important;
  background-color: var(--sp-primary-light);
}
.app-header .navbar-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: var(--sp-radius-full);
  box-shadow: 0 0 0 2px #fff;
  background: var(--sp-primary) !important;
  color: #fff;
  animation: sp-pulse-ring 2s ease infinite;
}
.app-header .user-menu .nav-link {
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border: 1.5px solid var(--sp-border);
  border-radius: var(--sp-radius-full);
  background: var(--sp-bg-surface);
  gap: 0.5rem;
  box-shadow: var(--sp-shadow-xs);
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
.app-header .user-menu .nav-link:hover {
  border-color: var(--sp-primary);
  background: var(--sp-primary-light) !important;
  box-shadow: var(--sp-shadow-glow);
}
.app-header .user-image {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 2px solid var(--sp-primary);
  border-radius: 50%;
}

/* ============================================================
   6. DROPDOWNS
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-xl) !important;
  border-radius: var(--sp-radius-lg) !important;
  padding: 0.5rem !important;
  background: var(--sp-bg-surface) !important;
  animation: sp-dropdown-in var(--sp-dur-base) var(--sp-ease);
}
.dropdown-item {
  border-radius: var(--sp-radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sp-text-secondary);
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
.dropdown-item:hover,.dropdown-item:focus {
  background: var(--sp-bg-subtle);
  color: var(--sp-text-main);
  transform: translateX(2px);
}
.dropdown-item.dropdown-header {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-text-muted);
  padding: 0.5rem 1rem;
}
.user-header {
  background: linear-gradient(135deg, var(--sp-navy-900) 0%, var(--sp-navy-800) 100%) !important;
  padding: 1.5rem 1.25rem 1.25rem !important;
  border-radius: var(--sp-radius-md) var(--sp-radius-md) 0 0 !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.user-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(232,52,74,0.25) 0%, transparent 70%);
}
.user-header img {
  width: 64px; height: 64px;
  border: 3px solid rgba(255,255,255,0.25);
  margin-bottom: 0.75rem;
  position: relative;
}
.user-header p { margin: 0; font-weight: 700; font-size: 1rem; color: #fff !important; position: relative; }
.user-header small {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.1);
  padding: 0.2rem 0.65rem; border-radius: var(--sp-radius-full); position: relative;
}
.user-body { padding: 0.5rem !important; }
.user-footer {
  padding: 0.75rem !important;
  background: var(--sp-bg-subtle);
  border-top: 1px solid var(--sp-border) !important;
  border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md) !important;
  gap: 0.5rem;
}

/* ============================================================
   7. SIDEBAR
   ============================================================ */
.app-sidebar {
  background: var(--sp-navy-900) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 4px 0 24px rgba(8,15,28,0.25) !important;
}
.app-sidebar .sidebar-brand {
  height: 64px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.app-sidebar .sidebar-brand::after {
  content: '';
  position: absolute; bottom: 0; left: 1.25rem; right: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,52,74,0.5), transparent);
}
.app-sidebar .sidebar-brand img {
  max-height: 36px; width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.app-sidebar .sidebar-wrapper { background: transparent; }
.app-sidebar .nav-sidebar > .nav-item { margin: 0.15rem 0.75rem; }
.app-sidebar .nav-sidebar .nav-link {
  border-radius: var(--sp-radius-sm);
  color: rgba(255,255,255,0.6) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.65rem 0.9rem;
  display: flex; align-items: center; gap: 0.75rem;
  transition: all var(--sp-dur-base) var(--sp-ease);
  position: relative; overflow: hidden;
}
.app-sidebar .nav-sidebar .nav-link::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sp-grad-brand);
  border-radius: 0 var(--sp-radius-xs) var(--sp-radius-xs) 0;
  transform: scaleY(0);
  transition: transform var(--sp-dur-base) var(--sp-ease);
}
.app-sidebar .nav-sidebar .nav-link .nav-icon,
.app-sidebar .nav-sidebar .nav-link i {
  font-size: 1rem; width: 20px; text-align: center;
  color: rgba(255,255,255,0.4);
  transition: color var(--sp-dur-fast) var(--sp-ease);
  flex-shrink: 0;
}
.app-sidebar .nav-sidebar .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.9) !important;
}
.app-sidebar .nav-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-sidebar .nav-link:hover i { color: rgba(255,255,255,0.8); }
.app-sidebar .nav-sidebar .nav-link:hover::before { transform: scaleY(1); }
.app-sidebar .nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(232,52,74,0.85) 0%, rgba(200,35,60,0.90) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(232,52,74,0.40), inset 0 1px 0 rgba(255,255,255,0.1);
  font-weight: 600;
}
.app-sidebar .nav-sidebar .nav-link.active::before { transform: scaleY(0); }
.app-sidebar .nav-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-sidebar .nav-link.active i { color: #ffffff !important; }
.app-sidebar .nav-header {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  padding: 1.25rem 1.65rem 0.4rem;
}
.app-sidebar .nav-treeview {
  background: rgba(0,0,0,0.2);
  border-radius: var(--sp-radius-sm);
  margin: 0 0.75rem 0.25rem;
}
.app-sidebar .nav-treeview .nav-link { padding-left: 2.5rem; font-size: 0.835rem; }

/* ============================================================
   8. BREADCRUMB
   ============================================================ */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 0; gap: 0; }
.breadcrumb-item { font-size: 0.8125rem; color: var(--sp-text-muted); font-weight: 500; }
.breadcrumb-item a { color: var(--sp-text-muted); transition: color var(--sp-dur-fast); }
.breadcrumb-item a:hover { color: var(--sp-primary); }
.breadcrumb-item.active { color: var(--sp-primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sp-slate-300); font-weight: 400; }

/* ============================================================
   9. CARDS
   ============================================================ */
.card {
  background: var(--sp-bg-surface) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-md) !important;
  box-shadow: var(--sp-shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--sp-dur-base) var(--sp-ease), box-shadow var(--sp-dur-base) var(--sp-ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-md) !important; }
.card-header {
  background: var(--sp-bg-subtle) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  padding: 1rem 1.25rem;
  font-weight: 700; font-size: 0.9rem; color: var(--sp-text-main);
}
.card-title { font-weight: 700; font-size: 1rem; color: var(--sp-text-main); margin-bottom: 0; }
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--sp-bg-subtle) !important;
  border-top: 1px solid var(--sp-border) !important;
  padding: 0.875rem 1.25rem;
}

/* ============================================================
   10. STAT CARDS (Dashboard)
   ============================================================ */
.sp-stat-card {
  border: none !important;
  border-radius: var(--sp-radius-lg) !important;
  box-shadow: var(--sp-shadow-md) !important;
  position: relative; overflow: hidden;
  transition: transform var(--sp-dur-base) var(--sp-ease), box-shadow var(--sp-dur-base) var(--sp-ease);
  animation: sp-fade-up var(--sp-dur-slow) var(--sp-ease) both;
}
.sp-stat-card:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-lg) !important; }
.sp-stat-card .card-body { padding: 1.5rem; position: relative; z-index: 1; }
.sp-stat-card .sp-stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--sp-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem; flex-shrink: 0;
}
.sp-stat-card .sp-stat-value {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--sp-text-main);
  animation: sp-count-up 0.5s var(--sp-ease) both;
}
.sp-stat-card .sp-stat-label {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sp-text-muted); margin-top: 0.35rem;
}
.sp-stat-card .sp-stat-trend {
  font-size: 0.8rem; font-weight: 600; margin-top: 0.75rem;
  display: flex; align-items: center; gap: 0.3rem;
}
.sp-stat-card .sp-stat-bg-icon {
  position: absolute; right: 1rem; bottom: 0.75rem;
  font-size: 4.5rem; opacity: 0.06; z-index: 0;
}
.sp-stat-primary .sp-stat-icon { background: var(--sp-primary-light); color: var(--sp-primary); }
.sp-stat-success .sp-stat-icon { background: var(--sp-success-bg); color: var(--sp-success); }
.sp-stat-warning .sp-stat-icon { background: var(--sp-warning-bg); color: var(--sp-warning); }
.sp-stat-info    .sp-stat-icon { background: var(--sp-info-bg); color: var(--sp-info); }
.sp-stat-card:nth-child(1) { animation-delay: 0.05s; }
.sp-stat-card:nth-child(2) { animation-delay: 0.10s; }
.sp-stat-card:nth-child(3) { animation-delay: 0.15s; }
.sp-stat-card:nth-child(4) { animation-delay: 0.20s; }

/* ============================================================
   11. WELCOME BANNER
   ============================================================ */
.sp-welcome-banner {
  background: linear-gradient(135deg, var(--sp-navy-900) 0%, var(--sp-navy-800) 60%, #1B3A5C 100%);
  border-radius: var(--sp-radius-xl) !important;
  border: none !important;
  box-shadow: var(--sp-shadow-xl) !important;
  overflow: hidden; position: relative; min-height: 160px;
}
.sp-welcome-banner::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(232,52,74,0.25) 0%, transparent 70%);
  border-radius: 50%;
}
.sp-welcome-banner::after {
  content: ''; position: absolute; bottom: -40px; left: 30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,107,53,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.sp-welcome-banner .card-body { padding: 2rem 2rem 1.75rem; position: relative; z-index: 1; }
.sp-welcome-banner .sp-welcome-greeting {
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-bottom: 0.35rem;
}
.sp-welcome-banner .sp-welcome-name {
  font-size: 1.75rem; font-weight: 800; color: #fff;
  letter-spacing: -0.03em; margin-bottom: 0.25rem;
}
.sp-welcome-banner .sp-welcome-username {
  font-size: 0.875rem; color: rgba(255,255,255,0.55);
  margin-bottom: 1.25rem; font-family: var(--sp-font-mono);
}
.sp-welcome-banner .sp-copy-link-group {
  display: flex; align-items: stretch; max-width: 480px;
  border-radius: var(--sp-radius-sm); overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.sp-welcome-banner .sp-copy-link-group input {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15); border-right: none;
  color: rgba(255,255,255,0.8) !important;
  font-family: var(--sp-font-mono); font-size: 0.8rem;
  padding: 0.6rem 1rem; flex: 1;
  border-radius: 0; outline: none;
}
.sp-welcome-banner .sp-copy-link-group button {
  background: var(--sp-grad-brand); border: none; color: #fff;
  font-weight: 600; font-size: 0.8rem; padding: 0 1.25rem;
  cursor: pointer; white-space: nowrap; transition: opacity var(--sp-dur-fast);
}
.sp-welcome-banner .sp-copy-link-group button:hover { opacity: 0.88; }

/* ============================================================
   12. PACKAGE PRICING CARDS
   ============================================================ */
.sp-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.sp-pkg-card {
  border: 2px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-xl) !important;
  background: var(--sp-bg-surface) !important;
  box-shadow: var(--sp-shadow-sm) !important;
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: all var(--sp-dur-base) var(--sp-ease);
  animation: sp-fade-up var(--sp-dur-slow) var(--sp-ease) both;
  position: relative;
}
.sp-pkg-card:hover {
  border-color: var(--sp-primary) !important;
  box-shadow: var(--sp-shadow-xl), 0 0 0 4px var(--sp-primary-ring) !important;
  transform: translateY(-6px);
}
.sp-pkg-card.sp-pkg-featured {
  border-color: var(--sp-primary) !important;
  box-shadow: var(--sp-shadow-brand) !important;
}
.sp-pkg-accent { height: 5px; background: var(--sp-grad-brand); width: 100%; }
.sp-pkg-card:not(.sp-pkg-featured) .sp-pkg-accent { background: var(--sp-slate-200); }
.sp-pkg-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--sp-grad-brand); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.3rem 0.75rem;
  border-radius: var(--sp-radius-full); box-shadow: var(--sp-shadow-brand);
}
.sp-pkg-img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; }
.sp-pkg-body { padding: 1.25rem 1.5rem 1rem; flex: 1; }
.sp-pkg-code {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--sp-primary); margin-bottom: 0.3rem;
  font-family: var(--sp-font-mono);
}
.sp-pkg-name { font-size: 1.15rem; font-weight: 700; color: var(--sp-text-main); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.sp-pkg-desc {
  font-size: 0.835rem; color: var(--sp-text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 1rem; min-height: 2.5em;
}
.sp-pkg-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.sp-pkg-spec-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.65rem;
  border-radius: var(--sp-radius-full);
  background: var(--sp-bg-subtle); color: var(--sp-text-secondary);
  border: 1px solid var(--sp-border);
}
.sp-pkg-spec-badge i { font-size: 0.7rem; color: var(--sp-primary); }
.sp-pkg-pricing { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0; }
.sp-pkg-currency { font-size: 1rem; font-weight: 700; color: var(--sp-text-secondary); }
.sp-pkg-amount { font-size: 2rem; font-weight: 800; color: var(--sp-primary); letter-spacing: -0.04em; line-height: 1; }
.sp-pkg-period { font-size: 0.8rem; color: var(--sp-text-muted); font-weight: 500; }
.sp-pkg-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--sp-border-subtle);
  background: var(--sp-bg-subtle);
}
.sp-pkg-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.7rem 1.5rem;
  background: var(--sp-bg-subtle); color: var(--sp-text-secondary);
  border: 1.5px solid var(--sp-border); border-radius: var(--sp-radius-sm);
  font-weight: 600; font-size: 0.875rem;
  transition: all var(--sp-dur-base) var(--sp-ease);
  text-decoration: none !important;
}
.sp-pkg-card:hover .sp-pkg-cta,
.sp-pkg-card.sp-pkg-featured .sp-pkg-cta {
  background: var(--sp-grad-brand); color: #fff !important;
  border-color: transparent; box-shadow: var(--sp-shadow-brand);
}
.sp-section-heading {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sp-text-muted);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem;
}
.sp-section-heading::after { content: ''; flex: 1; height: 1px; background: var(--sp-border); }
.sp-pkg-card:nth-child(1) { animation-delay: 0.05s; }
.sp-pkg-card:nth-child(2) { animation-delay: 0.10s; }
.sp-pkg-card:nth-child(3) { animation-delay: 0.15s; }
.sp-pkg-card:nth-child(4) { animation-delay: 0.20s; }
.sp-pkg-card:nth-child(5) { animation-delay: 0.25s; }
.sp-pkg-card:nth-child(6) { animation-delay: 0.30s; }

/* ============================================================
   13. CHECKOUT FORM
   ============================================================ */
.sp-checkout-pkg-card { border-radius: var(--sp-radius-xl) !important; overflow: hidden; position: sticky; top: 80px; }
.sp-checkout-pkg-header {
  background: linear-gradient(160deg, var(--sp-navy-900), var(--sp-navy-700));
  padding: 1.5rem; position: relative; overflow: hidden;
}
.sp-checkout-pkg-header::after {
  content: ''; position: absolute; top: -30%; right: -15%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(232,52,74,0.3), transparent 70%);
  border-radius: 50%;
}
.sp-checkout-pkg-header img { width: 100%; border-radius: var(--sp-radius-md); margin-bottom: 1rem; max-height: 160px; object-fit: cover; }
.sp-checkout-pkg-header h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.25rem; position: relative; z-index: 1; }
.sp-checkout-pkg-header p { color: rgba(255,255,255,0.6); font-size: 0.835rem; margin-bottom: 0; position: relative; z-index: 1; }
.sp-price-display { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 0.25rem; margin-top: 0.75rem; }
.sp-price-display .currency { font-size:1rem; color: rgba(255,255,255,0.7); font-weight:600; }
.sp-price-display .amount { font-size:2.25rem; font-weight:800; color:#fff; letter-spacing:-0.04em; }
.sp-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sp-spec-item {
  background: var(--sp-bg-subtle); border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm); padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.sp-spec-item .sp-spec-icon {
  width: 28px; height: 28px; border-radius: var(--sp-radius-xs);
  background: var(--sp-primary-light); color: var(--sp-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; margin-bottom: 0.35rem;
}
.sp-spec-item .sp-spec-value { font-size: 0.875rem; font-weight: 700; color: var(--sp-text-main); }
.sp-spec-item .sp-spec-label { font-size: 0.7rem; color: var(--sp-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   14. INVOICE / RECEIPT
   ============================================================ */
.sp-invoice-card { border-radius: var(--sp-radius-xl) !important; max-width: 720px; margin: 0 auto; }
.sp-invoice-header { background: var(--sp-navy-900); padding: 2rem; position: relative; overflow: hidden; }
.sp-invoice-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at bottom right, rgba(232,52,74,0.3), transparent 60%); }
.sp-invoice-brand { font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; position: relative; }
.sp-invoice-brand span { color: var(--sp-primary); }
.sp-invoice-number { font-family: var(--sp-font-mono); font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 0.25rem; position: relative; }
.sp-invoice-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem;
  padding: 1.5rem; background: var(--sp-bg-subtle); border-bottom: 1px solid var(--sp-border);
}
.sp-invoice-meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.sp-invoice-meta-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-text-muted); }
.sp-invoice-meta-value { font-size: 0.9rem; font-weight: 600; color: var(--sp-text-main); }
.sp-invoice-table th { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-text-muted); border-bottom: 2px solid var(--sp-border) !important; background: var(--sp-bg-subtle); padding: 0.75rem 1rem; }
.sp-invoice-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--sp-border-subtle) !important; font-size: 0.875rem; vertical-align: middle; }
.sp-invoice-total { background: var(--sp-bg-subtle); border-top: 2px solid var(--sp-border) !important; padding: 1.25rem 1.5rem; }
.sp-invoice-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; padding: 0.3rem 0; color: var(--sp-text-secondary); }
.sp-invoice-total-row.sp-grand-total { font-size: 1.2rem; font-weight: 800; color: var(--sp-text-main); border-top: 1px solid var(--sp-border); margin-top: 0.5rem; padding-top: 0.75rem; }
.sp-grand-total .amount { color: var(--sp-primary); }

/* Receipt */
.sp-receipt-wrapper { max-width: 560px; margin: 0 auto; text-align: center; padding: 2rem 0; }
.sp-receipt-icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--sp-success-bg); border: 3px solid var(--sp-success-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--sp-success); margin: 0 auto 1.5rem;
  animation: sp-receipt-pop 0.5s var(--sp-ease) both;
}
.sp-receipt-title { font-size: 1.75rem; font-weight: 800; color: var(--sp-text-main); letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.sp-receipt-subtitle { color: var(--sp-text-muted); font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.6; }
.sp-receipt-details { background: var(--sp-bg-subtle); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); overflow: hidden; text-align: left; margin-bottom: 2rem; }
.sp-receipt-row { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--sp-border-subtle); font-size: 0.875rem; }
.sp-receipt-row:last-child { border-bottom: none; }
.sp-receipt-row .label { color: var(--sp-text-muted); font-weight: 500; }
.sp-receipt-row .value { color: var(--sp-text-main); font-weight: 700; }
.sp-error-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--sp-danger-bg); border: 3px solid var(--sp-danger-border); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--sp-danger); margin: 0 auto 1.5rem; }

/* ============================================================
   15. FORMS
   ============================================================ */
.form-control,.form-select {
  background: var(--sp-bg-surface) !important;
  border: 1.5px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-sm) !important;
  color: var(--sp-text-main) !important;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.6rem 0.9rem;
  transition: all var(--sp-dur-fast) var(--sp-ease);
  box-shadow: none !important;
}
.form-control:focus,.form-select:focus {
  border-color: var(--sp-primary) !important;
  box-shadow: 0 0 0 3px var(--sp-primary-ring) !important;
  background: var(--sp-bg-surface) !important;
}
.form-control::placeholder { color: var(--sp-text-subtle) !important; }
.form-label { font-size: 0.8125rem; font-weight: 600; color: var(--sp-text-secondary); margin-bottom: 0.4rem; }
.form-text { font-size: 0.775rem; color: var(--sp-text-muted); }
.input-group-text { background: var(--sp-bg-subtle) !important; border: 1.5px solid var(--sp-border) !important; color: var(--sp-text-muted); }

/* ============================================================
   16. BUTTONS
   ============================================================ */
.btn {
  font-family: var(--sp-font-sans) !important;
  font-weight: 600; font-size: 0.875rem;
  border-radius: var(--sp-radius-sm);
  padding: 0.6rem 1.25rem;
  transition: all var(--sp-dur-fast) var(--sp-ease);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-primary {
  background: var(--sp-grad-brand) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(232,52,74,0.30);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--sp-shadow-brand) !important; background: var(--sp-grad-brand) !important; }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--sp-bg-subtle) !important; border: 1.5px solid var(--sp-border) !important; color: var(--sp-text-secondary) !important; }
.btn-secondary:hover { background: var(--sp-bg-hover) !important; border-color: var(--sp-border-strong) !important; color: var(--sp-text-main) !important; }
.btn-dark { background: var(--sp-navy-900) !important; border-color: var(--sp-navy-900) !important; color: #fff !important; }
.btn-dark:hover { background: var(--sp-navy-800) !important; border-color: var(--sp-navy-800) !important; }
.btn-lg { padding: 0.8rem 2rem; font-size: 0.9375rem; border-radius: var(--sp-radius-md); }
.btn-sm { padding: 0.4rem 0.875rem; font-size: 0.8rem; border-radius: var(--sp-radius-xs); }

/* ============================================================
   17. BADGES
   ============================================================ */
.badge { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.3em 0.65em; border-radius: var(--sp-radius-full); }
.badge.bg-success,.badge.text-bg-success { background: var(--sp-success-bg) !important; color: var(--sp-success) !important; border: 1px solid var(--sp-success-border); }
.badge.bg-warning,.badge.text-bg-warning { background: var(--sp-warning-bg) !important; color: var(--sp-warning) !important; border: 1px solid var(--sp-warning-border); }
.badge.bg-danger,.badge.text-bg-danger   { background: var(--sp-danger-bg)  !important; color: var(--sp-danger)  !important; border: 1px solid var(--sp-danger-border); }
.badge.bg-info,.badge.text-bg-info       { background: var(--sp-info-bg)    !important; color: var(--sp-info)    !important; border: 1px solid var(--sp-info-border); }
.badge.bg-primary { background: var(--sp-primary-light) !important; color: var(--sp-primary) !important; border: 1px solid rgba(232,52,74,0.2); }
.text-active    { background: var(--sp-success-bg) !important; color: var(--sp-success) !important; }
.text-inactive  { background: var(--sp-warning-bg) !important; color: var(--sp-warning) !important; }
.text-cancelled { background: var(--sp-danger-bg)  !important; color: var(--sp-danger)  !important; }
.text-failed    { background: var(--sp-danger-bg)  !important; color: var(--sp-danger)  !important; }
.text-prepared  { background: var(--sp-info-bg)    !important; color: var(--sp-info)    !important; }

/* ============================================================
   18. TABLES
   ============================================================ */
.table { font-size: 0.875rem; color: var(--sp-text-main); }
.table > thead > tr > th { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sp-text-muted); background: var(--sp-bg-subtle); border-bottom: 2px solid var(--sp-border) !important; padding: 0.875rem 1rem; white-space: nowrap; }
.table > tbody > tr > td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--sp-border-subtle) !important; vertical-align: middle; color: var(--sp-text-secondary); }
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table > tbody > tr:hover > td { background: var(--sp-bg-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--sp-bg-subtle) !important; }
table.dataTable thead th { font-size: 0.72rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sp-text-muted) !important; background: var(--sp-bg-subtle) !important; border-bottom: 2px solid var(--sp-border) !important; }
.dataTables_wrapper .dataTables_filter input { border: 1.5px solid var(--sp-border) !important; border-radius: var(--sp-radius-sm) !important; padding: 0.45rem 0.75rem; font-size: 0.875rem; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px var(--sp-primary-ring) !important; outline: none; }
.paginate_button { border-radius: var(--sp-radius-xs) !important; font-size: 0.8rem !important; }
.paginate_button.current { background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; color: #fff !important; }

/* ============================================================
   19. ALERTS
   ============================================================ */
.alert { border: none; border-radius: var(--sp-radius-md) !important; border-left: 4px solid transparent; font-size: 0.875rem; font-weight: 500; }
.alert-success { background: var(--sp-success-bg) !important; color: var(--sp-success) !important; border-left-color: var(--sp-success) !important; }
.alert-danger  { background: var(--sp-danger-bg)  !important; color: var(--sp-danger)  !important; border-left-color: var(--sp-danger)  !important; }
.alert-warning { background: var(--sp-warning-bg) !important; color: var(--sp-warning) !important; border-left-color: var(--sp-warning) !important; }
.alert-info    { background: var(--sp-info-bg)    !important; color: var(--sp-info)    !important; border-left-color: var(--sp-info)    !important; }

/* ============================================================
   20. ACCORDION
   ============================================================ */
.accordion-button { font-weight: 700; font-size: 0.9rem; color: var(--sp-text-main); background: var(--sp-bg-surface); }
.accordion-button:not(.collapsed) { color: var(--sp-primary); background: var(--sp-primary-light); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--sp-primary-ring); }
.accordion-item { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-md) !important; overflow: hidden; }

/* ============================================================
   21. MODALS
   ============================================================ */
.modal-content { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-xl) !important; box-shadow: var(--sp-shadow-xl) !important; }
.modal-header { background: var(--sp-bg-subtle); border-bottom: 1px solid var(--sp-border); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-footer { border-top: 1px solid var(--sp-border); padding: 1rem 1.5rem; background: var(--sp-bg-subtle); }

/* ============================================================
   22. FOOTER
   ============================================================ */
.app-footer { background: var(--sp-bg-surface) !important; border-top: 1px solid var(--sp-border) !important; padding: 1rem 1.5rem; font-size: 0.8125rem; color: var(--sp-text-muted); }
.app-footer a { color: var(--sp-text-muted); transition: color var(--sp-dur-fast); }
.app-footer a:hover { color: var(--sp-primary); }

/* ============================================================
   23. USAGE / PROFILE
   ============================================================ */
.sp-usage-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sp-usage-stat-item { background: var(--sp-bg-subtle); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); padding: 1rem; text-align: center; }
.sp-usage-stat-item .val { font-size: 1.25rem; font-weight: 800; color: var(--sp-text-main); }
.sp-usage-stat-item .lbl { font-size: 0.75rem; color: var(--sp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

.sp-profile-header { background: linear-gradient(160deg, var(--sp-navy-900), var(--sp-navy-700)); padding: 2rem; border-radius: var(--sp-radius-xl) var(--sp-radius-xl) 0 0; position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.5rem; }
.sp-profile-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(232,52,74,0.2), transparent 60%); }
.sp-profile-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); flex-shrink: 0; background: linear-gradient(135deg, var(--sp-primary), var(--sp-accent)); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #fff; font-weight: 800; }
.sp-profile-meta h4 { color: #fff; font-size: 1.25rem; margin-bottom: 0.25rem; position: relative; }
.sp-profile-meta span { font-size: 0.8rem; color: rgba(255,255,255,0.55); font-family: var(--sp-font-mono); position: relative; }
.sp-profile-plan-badge { background: var(--sp-grad-brand); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: var(--sp-radius-full); display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; position: relative; }
.sp-profile-field-row { display: flex; align-items: flex-start; padding: 0.875rem 0; border-bottom: 1px solid var(--sp-border-subtle); gap: 1rem; }
.sp-profile-field-row:last-child { border-bottom: none; }
.sp-profile-field-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sp-text-muted); min-width: 160px; flex-shrink: 0; }
.sp-profile-field-value { font-size: 0.9rem; font-weight: 600; color: var(--sp-text-main); }

/* ============================================================
   24. UTILITIES & SELECT2
   ============================================================ */
.sp-text-primary  { color: var(--sp-primary) !important; }
.sp-text-success  { color: var(--sp-success) !important; }
.sp-mono          { font-family: var(--sp-font-mono); }
.sp-fw-800        { font-weight: 800; }
.sp-skeleton { background: linear-gradient(90deg, var(--sp-slate-100) 25%, var(--sp-slate-50) 50%, var(--sp-slate-100) 75%); background-size: 400px 100%; animation: sp-shimmer 1.4s ease infinite; border-radius: var(--sp-radius-sm); }

.select2-container--default .select2-selection--single { border: 1.5px solid var(--sp-border) !important; border-radius: var(--sp-radius-sm) !important; height: 38px !important; display: flex; align-items: center; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px var(--sp-primary-ring) !important; }
.select2-dropdown { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-sm) !important; box-shadow: var(--sp-shadow-lg) !important; }
.select2-results__option--highlighted { background: var(--sp-primary) !important; }

/* ============================================================
   25. RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .app-content        { padding: 0 1rem 1.5rem; }
  .app-content-header { padding: 1rem 1rem 0.5rem; }
  .sp-package-grid    { grid-template-columns: 1fr; }
  .sp-spec-grid       { grid-template-columns: 1fr; }
  .sp-welcome-banner .card-body { padding: 1.5rem; }
  .sp-welcome-banner .sp-welcome-name { font-size: 1.35rem; }
  .sp-invoice-meta    { grid-template-columns: 1fr 1fr; }
  .sp-profile-header  { flex-direction: column; text-align: center; }
}
@media (max-width: 575.98px) {
  .sp-invoice-meta  { grid-template-columns: 1fr; }
  .sp-usage-stats   { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. ULTRA-ENTERPRISE AUTHENTICATION & LOGIN PAGES
   ========================================================================== */
.sp-auth-body {
  background-color: #060d17 !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(30, 58, 138, 0.35) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(225, 29, 72, 0.25) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.9) 0px, transparent 100%);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Ambient Glowing Background Orbs */
.sp-ambient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.sp-orb-1 {
  width: 420px;
  height: 420px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(37, 99, 235, 0.1) 70%, transparent 100%);
  animation: sp-float-slow 18s ease-in-out infinite alternate;
}

.sp-orb-2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.3) 0%, rgba(244, 63, 94, 0.08) 70%, transparent 100%);
  animation: sp-float-slow 22s ease-in-out infinite alternate-reverse;
}

.sp-orb-3 {
  width: 350px;
  height: 350px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, transparent 70%);
}

@keyframes sp-float-slow {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

/* Auth Card Glass Container */
.sp-auth-container {
  border-radius: 24px !important;
  background: #ffffff;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sp-auth-hero {
  background: linear-gradient(145deg, #09131F 0%, #0d1b2a 50%, #152238 100%);
  position: relative;
  overflow: hidden;
}

.sp-hero-mesh-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(225, 29, 72, 0.2) 0%, transparent 60%);
  opacity: 0.85;
}

.sp-feature-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.sp-auth-feature-item {
  transition: transform 0.2s ease;
}
.sp-auth-feature-item:hover {
  transform: translateX(4px);
}

/* Modern Input Controls */
.sp-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-input-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 5;
}

.sp-form-control {
  padding-left: 44px !important;
  height: 48px;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  font-size: 0.92rem;
  font-weight: 500;
  color: #0f172a;
  background-color: #f8fafc;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-form-control:focus {
  background-color: #ffffff;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12) !important;
}

.sp-eye-toggle {
  z-index: 5;
  background: transparent;
  padding: 4px 8px;
  font-size: 1.1rem;
}
.sp-eye-toggle:hover {
  color: #0f172a !important;
}

.sp-login-btn {
  height: 48px;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0d6efd 0%, #2563eb 100%) !important;
  border: none !important;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-login-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(13, 110, 253, 0.4) !important;
}

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

/* ==========================================================================
   27. TELCO DASHBOARD METRICS & WIDGETS
   ========================================================================== */
.sp-telco-card {
  border-radius: 16px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.sp-telco-card:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

.sp-wifi-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
  border: 1px solid rgba(13, 110, 253, 0.2);
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.sp-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  animation: sp-pulse-anim 2s infinite;
}

@keyframes sp-pulse-anim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sp-meta-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid #f1f5f9;
}

.sp-meta-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}

.sp-meta-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.sp-quick-card {
  border-radius: 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08) !important;
}

.sp-quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.sp-progress-bar {
  background-color: #e2e8f0;
}

.bg-gradient-primary {
  background: linear-gradient(90deg, #0d6efd 0%, #06b6d4 100%) !important;
}

.cursor-pointer {
  cursor: pointer;
}