/*
 * SyncLab V2.0
 * Shared visual system inspired by the supplied zyad1 direction.
 * This file intentionally changes presentation only; application routes,
 * forms, field names, and server-side behavior remain untouched.
 */

:root {
  --v2-bg: #0b0e13;
  --v2-bg-deep: #080a0e;
  --v2-panel: #151a22;
  --v2-panel-strong: #1a202a;
  --v2-panel-soft: #11161d;
  --v2-line: rgba(255, 255, 255, 0.09);
  --v2-line-strong: rgba(89, 199, 255, 0.30);
  --v2-text: #f6f8fb;
  --v2-muted: #9ba5b4;
  --v2-primary: #59c7ff;
  --v2-primary-strong: #249fe3;
  --v2-primary-soft: rgba(89, 199, 255, 0.11);
  --v2-violet: #6a70f4;
  --v2-success: #39d98a;
  --v2-warning: #ffbf69;
  --v2-danger: #ff6474;
  --v2-radius-sm: 10px;
  --v2-radius: 16px;
  --v2-radius-lg: 24px;
  --v2-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  --v2-shell: 1180px;
}

html {
  background: var(--v2-bg);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(680px 460px at 100% 0%, rgba(89, 199, 255, 0.10), transparent 72%),
    radial-gradient(600px 420px at 0% 4%, rgba(106, 112, 244, 0.10), transparent 72%),
    var(--v2-bg) !important;
  color: var(--v2-muted) !important;
  font-family: "Tajawal", sans-serif !important;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  opacity: 0.35;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

/* Keep content visible even when animation libraries are unavailable or delayed. */
.wow {
  animation-name: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

::selection {
  background: var(--v2-primary);
  color: #071018;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track { background: var(--v2-bg-deep); }
::-webkit-scrollbar-thumb {
  background: #293341;
  border: 2px solid var(--v2-bg-deep);
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: var(--v2-primary-strong); }

a { color: inherit; }
a:hover { color: var(--v2-primary); }

h1, h2, h3, h4, h5, h6,
.section-title h2 {
  color: var(--v2-text) !important;
  letter-spacing: -0.02em;
}

p { color: var(--v2-muted); }

input, select, textarea, button { font-family: inherit; }

/* Shared loading state */
.preloader {
  background: var(--v2-bg-deep) !important;
}

.spinner .path,
.spinner-circle {
  border-color: var(--v2-primary) !important;
}

/* Calm, shared navigation feedback for public pages and both dashboards. */
.synclab-page-transition {
  align-items: center;
  background: rgba(9, 12, 17, .84);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .18s ease;
  visibility: hidden;
  z-index: 99999;
}

.synclab-page-transition.is-active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.synclab-loader { align-items: center; display: flex; gap: 7px; }
.synclab-loader span {
  animation: synclab-loader-pulse .85s ease-in-out infinite alternate;
  background: var(--v2-primary);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(89, 199, 255, .25);
  height: 8px;
  width: 8px;
}
.synclab-loader span:nth-child(2) { animation-delay: .14s; }
.synclab-loader span:nth-child(3) { animation-delay: .28s; }
@keyframes synclab-loader-pulse { from { opacity: .3; transform: translateY(2px); } to { opacity: 1; transform: translateY(-3px); } }

a, button, input, select, textarea, .subscription-card, .product-card {
  -webkit-tap-highlight-color: transparent;
}

button, a, input, select, textarea { transition-duration: .18s !important; }
button:active, .main-btn:active, .btn:active { transform: translateY(1px) scale(.995); }
.is-submitting { cursor: wait !important; opacity: .72 !important; pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Public navigation */
.header {
  background: transparent !important;
}

.navbar-area {
  background: transparent !important;
  padding-top: 10px;
}

.navbar-area.sticky {
  background: rgba(11, 14, 19, 0.84) !important;
  box-shadow: none !important;
  padding: 8px 0;
  backdrop-filter: blur(18px);
}

.navbar-area > .container {
  background: rgba(22, 27, 35, 0.82);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 16px 45px rgba(0, 0, 0, 0.16);
  max-width: var(--v2-shell);
  padding-inline: 22px;
  backdrop-filter: blur(14px);
}

.navbar {
  min-height: 64px;
  padding: 6px 0 !important;
}

.navbar-brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.navbar-brand img {
  background: #0f1319;
  border: 1px solid rgba(89, 199, 255, 0.28);
  border-radius: 10px;
  height: 46px !important;
  object-fit: cover;
  width: 46px !important;
}

.navbar-nav .nav-item a {
  color: #c4cad3 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 18px 13px !important;
}

.navbar-nav .nav-item a::before {
  background: var(--v2-primary) !important;
  bottom: 9px !important;
  height: 2px !important;
}

.navbar-nav .nav-item a:hover,
.navbar-nav .nav-item a.active {
  color: var(--v2-text) !important;
}

.navbar-nav .nav-item .main-btn {
  background: #eef9ff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 8px !important;
  color: #0b1118 !important;
  margin-inline-start: 9px;
  padding: 11px 20px !important;
}

.navbar-nav .nav-item .main-btn::before,
.navbar-nav .nav-item .main-btn::after { display: none !important; }

.navbar-nav .nav-item .main-btn:hover {
  background: var(--v2-primary) !important;
}

header .navbar-nav .nav-item > a.main-btn,
header .navbar-nav .nav-item > a.main-btn:hover {
  color: #0b1118 !important;
}

.navbar-toggler {
  border: 1px solid var(--v2-line) !important;
  border-radius: 9px;
  padding: 9px !important;
}

.navbar-toggler .toggler-icon { background: var(--v2-text) !important; }

/* Buttons */
.main-btn,
.btn-primary,
.btn-save,
.btn-add-subscription,
.btn-request,
.btn-confirm-delete {
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-primary-strong)) !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: 0 12px 28px rgba(36, 159, 227, 0.18) !important;
  color: #071018 !important;
  font-weight: 800 !important;
}

.main-btn:hover,
.btn-primary:hover,
.btn-save:hover,
.btn-add-subscription:hover,
.btn-request:hover,
.btn-confirm-delete:hover {
  box-shadow: 0 16px 32px rgba(36, 159, 227, 0.28) !important;
  color: #071018 !important;
  transform: translateY(-2px);
}

.main-btn.border-btn {
  background: transparent !important;
  border-color: var(--v2-line-strong) !important;
  box-shadow: none !important;
  color: var(--v2-text) !important;
}

.main-btn.border-btn:hover {
  background: var(--v2-primary-soft) !important;
  color: var(--v2-primary) !important;
}

/* Public home */
.hero-section {
  background: transparent !important;
  min-height: 690px;
  padding: 185px 0 105px !important;
  position: relative;
}

.hero-section::before {
  background:
    radial-gradient(520px 360px at 75% 30%, rgba(89, 199, 255, 0.12), transparent 72%),
    radial-gradient(420px 320px at 20% 28%, rgba(106, 112, 244, 0.11), transparent 72%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-section .container { max-width: 1120px; }

.hero-section .hero-content {
  padding-top: 0 !important;
  position: relative;
  z-index: 2;
}

.hero-section .hero-content::before {
  background: var(--v2-primary-soft);
  border: 1px solid rgba(89, 199, 255, 0.22);
  border-radius: 999px;
  color: var(--v2-primary);
  content: "SYNCLAB • V2.0";
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  margin-bottom: 22px;
  padding: 8px 13px;
}

.hero-section .hero-content h1 {
  color: var(--v2-text) !important;
  font-size: clamp(38px, 5vw, 62px) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.hero-section .hero-content p {
  color: var(--v2-muted) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
  margin-top: 22px !important;
  max-width: 620px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-section .hero-content .main-btn { margin: 0 !important; }

.hero-section .hero-content .scroll-bottom {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  bottom: -72px !important;
  color: var(--v2-primary) !important;
}

.hero-section .hero-img {
  isolation: isolate;
  position: relative;
  text-align: center;
}

.hero-section .hero-img::before {
  background: radial-gradient(circle, rgba(89, 199, 255, 0.20), transparent 67%);
  content: "";
  inset: 6% -2%;
  filter: blur(8px);
  position: absolute;
  z-index: -1;
}

.hero-section .hero-img img {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(158deg) brightness(0.88) contrast(1.08) drop-shadow(0 28px 55px rgba(0, 0, 0, 0.35));
  max-width: 100% !important;
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 50% 48%, #000 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 74% at 50% 48%, #000 72%, transparent 100%);
}

.feature-section,
.about-section,
.faq-section,
.feature-extended-section {
  background: transparent !important;
}

.feature-section { padding-top: 65px !important; }

.single-feature,
.single-feature-extended {
  background: linear-gradient(145deg, rgba(26, 32, 42, 0.96), rgba(18, 23, 30, 0.96)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
  height: 100%;
  padding: 30px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.single-feature:hover,
.single-feature-extended:hover {
  border-color: var(--v2-line-strong) !important;
  box-shadow: var(--v2-shadow) !important;
  transform: translateY(-5px) !important;
}

.feature-section .single-feature .icon,
.feature-extended-section .single-feature-extended .icon {
  background: var(--v2-primary-soft) !important;
  border: 1px solid rgba(89, 199, 255, 0.13);
  border-radius: 14px !important;
  color: var(--v2-primary) !important;
  height: 54px !important;
  width: 54px !important;
}

.single-feature h3,
.single-feature-extended h3 {
  color: var(--v2-text) !important;
  font-size: 21px !important;
  margin-bottom: 13px !important;
}

.single-feature p,
.single-feature-extended p {
  color: var(--v2-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.about-section { padding-top: 140px !important; }

.about-section .row {
  background: linear-gradient(135deg, rgba(89, 199, 255, 0.08), rgba(106, 112, 244, 0.065));
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-lg);
  margin-inline: 0;
  overflow: hidden;
  padding: 42px 30px;
}

.about-section .about-img img.w-100 {
  filter: saturate(0.78) hue-rotate(132deg);
}

.about-section .about-img .shape { opacity: 0.22; }

.about-content .section-title h2,
.faq-section .section-title h2,
.feature-extended-section .section-title h2 {
  color: var(--v2-text) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 900 !important;
}

.about-content p,
.faq-section .section-title p,
.feature-extended-section .section-title p {
  color: var(--v2-muted) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}

.faq-section { padding-top: 140px !important; }

.accordion-item {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 21px 23px !important;
}

.accordion-button:not(.collapsed) {
  background: rgba(89, 199, 255, 0.07) !important;
  color: var(--v2-primary) !important;
}

.accordion-button::after { filter: invert(1) brightness(1.7); }

.accordion-body {
  border-top: 1px solid var(--v2-line);
  color: var(--v2-muted) !important;
  line-height: 1.8;
  padding: 20px 23px !important;
}

.feature-extended-section { padding-top: 125px !important; }
.feature-extended-wrapper { background: transparent !important; }
.feature-extended-section .row > div { margin-bottom: 28px; }

/* Footer */
.footer {
  background: #090c11 !important;
  border-top: 1px solid var(--v2-line);
  margin-top: 135px;
  padding: 76px 0 40px !important;
}

.footer::before,
.footer::after { display: none !important; }

.footer .widget-wrapper .footer-widget h3 {
  color: var(--v2-text) !important;
  font-size: 16px !important;
}

.footer .widget-wrapper .footer-widget p,
.footer .widget-wrapper .footer-widget ul.links li a {
  color: var(--v2-muted) !important;
  font-size: 14px !important;
}

.footer .widget-wrapper .footer-widget ul.links li a:hover { color: var(--v2-primary) !important; }

.footer .widget-wrapper .footer-widget .socials li a {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line);
  color: var(--v2-primary) !important;
}

.scroll-top {
  background: var(--v2-primary) !important;
  border-radius: 10px !important;
  color: #071018 !important;
}

/* Login */
.login-section {
  background: transparent !important;
  min-height: calc(100vh - 80px);
  padding: 150px 0 70px !important;
}

.login-container {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius-lg) !important;
  box-shadow: var(--v2-shadow) !important;
  overflow: hidden;
}

.login-form-side,
.login-image-side {
  background: transparent !important;
  min-height: 560px;
  padding: 60px 52px !important;
}

.login-image-side {
  background:
    radial-gradient(circle at 80% 20%, rgba(89, 199, 255, 0.18), transparent 42%),
    linear-gradient(145deg, #171f2a, #11161d) !important;
  border-right: 1px solid var(--v2-line);
}

.login-form-side h2,
.login-image-side h3 { color: var(--v2-text) !important; }

.login-form-side p,
.login-image-side p,
.login-image-side li { color: var(--v2-muted) !important; }

.login-image-side li i { color: var(--v2-primary) !important; }

.login-form-side .btn-discord {
  background: #5865f2 !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(88, 101, 242, 0.18);
}

.divider::before,
.divider::after { background: var(--v2-line) !important; }
.divider span { background: var(--v2-panel) !important; color: var(--v2-muted) !important; }

.input-with-icon input,
.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"] {
  background: var(--v2-panel-soft) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  color: var(--v2-text) !important;
}

input::placeholder,
textarea::placeholder { color: #737e8d !important; }

.input-with-icon input:focus,
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--v2-primary) !important;
  box-shadow: 0 0 0 3px rgba(89, 199, 255, 0.10) !important;
}

.input-with-icon i { color: var(--v2-primary) !important; }

.btn-login {
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-primary-strong)) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #071018 !important;
  font-weight: 800 !important;
}

/* Terms */
.terms-section {
  background: transparent !important;
  padding: 165px 0 90px !important;
}

.terms-section .section-title,
.terms-elegant-content,
.terms-content {
  color: var(--v2-muted) !important;
}

.term-item,
.terms-content .single-term {
  background: linear-gradient(145deg, var(--v2-panel-strong), var(--v2-panel)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
}

.term-item:hover,
.terms-content .single-term:hover {
  border-color: var(--v2-line-strong) !important;
  box-shadow: var(--v2-shadow) !important;
}

.term-item h3,
.terms-content .single-term h3 { color: var(--v2-text) !important; }
.term-item p,
.term-item li,
.terms-content .single-term p,
.terms-content .single-term li { color: var(--v2-muted) !important; }
.term-number,
.term-item i,
.terms-content .single-term i { color: var(--v2-primary) !important; }

/* Purchase */
.purchase-hero {
  background:
    radial-gradient(520px 360px at 85% 25%, rgba(89, 199, 255, 0.16), transparent 72%),
    radial-gradient(420px 320px at 15% 65%, rgba(106, 112, 244, 0.13), transparent 72%),
    transparent !important;
  padding: 175px 0 100px !important;
}

.purchase-hero::before,
.purchase-hero::after { display: none !important; }

.purchase-hero .hero-content h1 { color: var(--v2-text) !important; font-size: clamp(38px, 5vw, 58px) !important; }
.purchase-hero .hero-content p { color: var(--v2-muted) !important; }

.purchase-hero-card {
  background: linear-gradient(145deg, var(--v2-panel-strong), var(--v2-panel)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius-lg) !important;
  box-shadow: var(--v2-shadow) !important;
}

.purchase-hero-card img {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(158deg) brightness(0.88) contrast(1.08);
}

.purchase-list li { color: #d7dde6 !important; }
.purchase-list i { color: var(--v2-primary) !important; }

.catalog-section {
  background: transparent !important;
  border-top: 1px solid var(--v2-line);
}

.catalog-head h2 { color: var(--v2-text) !important; }
.catalog-head p { color: var(--v2-muted) !important; }

.catalog-badge,
.product-category {
  background: var(--v2-primary-soft) !important;
  color: var(--v2-primary) !important;
}

.product-card {
  background: linear-gradient(145deg, var(--v2-panel-strong), var(--v2-panel)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
}

.product-card:hover {
  border-color: var(--v2-line-strong) !important;
  box-shadow: var(--v2-shadow) !important;
}

.product-card::before { background: var(--v2-primary) !important; }
.product-card h3 { color: var(--v2-text) !important; }
.product-card p { color: var(--v2-muted) !important; }
.product-price { color: var(--v2-primary) !important; }
.catalog-empty {
  background: var(--v2-panel) !important;
  border-color: var(--v2-line) !important;
  color: var(--v2-muted) !important;
}

/* Dashboard shell */
.sidebar {
  background: rgba(15, 19, 25, 0.97) !important;
  border-left: 1px solid var(--v2-line) !important;
  box-shadow: -14px 0 45px rgba(0, 0, 0, 0.18) !important;
}

.sidebar-header,
.sidebar-footer { border-color: var(--v2-line) !important; }

.sidebar-logo {
  align-items: center;
  color: var(--v2-text) !important;
  display: flex;
  font-size: 22px !important;
  font-weight: 900 !important;
  gap: 10px;
}

.sidebar-logo::before {
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-violet));
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(89, 199, 255, 0.22);
  content: "";
  height: 28px;
  width: 5px;
}

.menu-item {
  border-left: 0 !important;
  border-radius: 9px;
  border-right: 3px solid transparent !important;
  color: var(--v2-muted) !important;
  margin: 4px 12px;
  padding: 13px 15px !important;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--v2-text) !important;
}

.menu-item.active {
  background: var(--v2-primary-soft) !important;
  border-right-color: var(--v2-primary) !important;
  color: var(--v2-primary) !important;
}

.sidebar-toggle {
  background: var(--v2-panel-strong) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-primary) !important;
}

.sidebar-overlay { background: rgba(0, 0, 0, 0.7) !important; backdrop-filter: blur(3px); }

.main-content {
  background: transparent !important;
  min-height: 100vh;
}

.dashboard-header {
  background: rgba(15, 19, 25, 0.84) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

.user-avatar { border-color: var(--v2-primary) !important; }
.user-details h5,
.current-date { color: var(--v2-text) !important; }
.user-details p,
.current-time { color: var(--v2-muted) !important; }
.header-divider { background: var(--v2-line) !important; }

.btn-header {
  border-radius: 9px !important;
}

.btn-logout {
  background: rgba(255, 100, 116, 0.08) !important;
  border: 1px solid rgba(255, 100, 116, 0.30) !important;
  color: var(--v2-danger) !important;
}

.btn-logout:hover {
  background: var(--v2-danger) !important;
  color: #fff !important;
}

.dashboard-content { padding: 34px !important; }

.section-title {
  color: var(--v2-text) !important;
  font-weight: 800 !important;
}

.section-title i { color: var(--v2-primary) !important; }

/* Dashboard cards and panels */
.subscription-card,
.stat-card,
.stat-item,
.user-profile-card,
.panel-card,
.filter-card,
.filters-container,
.empty-state,
.empty-state-small,
.product-form,
.product-list-card,
.order-card,
.orders-card,
.content-card,
.dashboard-card {
  background: linear-gradient(145deg, rgba(26, 32, 42, 0.98), rgba(18, 23, 30, 0.98)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
}

.subscription-card:hover,
.stat-card:hover,
.stat-item:hover,
.panel-card:hover {
  border-color: var(--v2-line-strong) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20) !important;
  transform: translateY(-3px);
}

.subscription-header,
.panel-head,
.card-header {
  background: transparent !important;
  border-color: var(--v2-line) !important;
}

.subscription-header h4,
.subscription-header-left h4,
.stat-value,
.stat-content h3,
.panel-head h4,
.panel-card h4,
.empty-state h4,
.empty-state-small h4,
.user-name,
.info-row .value,
.date-value,
.form-label,
label {
  color: var(--v2-text) !important;
}

.subscription-id,
.stat-label,
.stat-time,
.info-row .label,
.date-label,
.section-note,
.empty-state p,
.empty-state-small p { color: var(--v2-muted) !important; }

.subscription-icon,
.stat-icon {
  background: var(--v2-primary-soft) !important;
  color: var(--v2-primary) !important;
}

.subscription-body,
.subscription-footer,
.info-row,
.date-row { border-color: var(--v2-line) !important; }

.subscription-filter,
.filter-tabs {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 12px !important;
}

.filter-card {
  background: linear-gradient(145deg, rgba(26, 32, 42, 0.98), rgba(18, 23, 30, 0.98)) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
}

.filter-card h4 { color: var(--v2-text) !important; }
.filter-buttons { gap: 8px !important; }

.filter-tab,
.filter-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--v2-muted) !important;
}

.filter-tab:hover,
.filter-btn:hover { color: var(--v2-text) !important; }

.filter-tab.active,
.filter-btn.active {
  background: var(--v2-primary-soft) !important;
  border-color: rgba(89, 199, 255, 0.20) !important;
  color: var(--v2-primary) !important;
}

.btn-action,
.btn-table,
.btn-table-action,
.btn-modal,
.btn-cancel,
.btn-reset {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.btn-renew,
.btn-edit,
.btn-details,
.btn-table.btn-primary,
.btn-table.btn-info {
  background: var(--v2-primary-soft) !important;
  border: 1px solid rgba(89, 199, 255, 0.22) !important;
  color: var(--v2-primary) !important;
}

.btn-renew:hover,
.btn-edit:hover,
.btn-details:hover,
.btn-table.btn-primary:hover,
.btn-table.btn-info:hover {
  background: var(--v2-primary) !important;
  color: #071018 !important;
}

.btn-reminder { background: rgba(255, 191, 105, 0.10) !important; border-color: rgba(255, 191, 105, 0.25) !important; color: var(--v2-warning) !important; }
.btn-delete { background: rgba(255, 100, 116, 0.09) !important; border-color: rgba(255, 100, 116, 0.24) !important; color: var(--v2-danger) !important; }

.btn-update {
  background: linear-gradient(135deg, var(--v2-primary), var(--v2-primary-strong)) !important;
  border: 0 !important;
  color: #071018 !important;
}

.btn-request-card {
  background: var(--v2-panel-soft) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-text) !important;
}

.btn-request-card:hover {
  background: var(--v2-primary-soft) !important;
  border-color: var(--v2-line-strong) !important;
}

.btn-request-card i { color: var(--v2-primary) !important; }

/* Dashboard tables */
.table-responsive,
.subscriptions-table,
.users-table,
.orders-table,
.products-table {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: none !important;
  overflow: auto;
}

table { color: var(--v2-muted) !important; }

table thead,
table thead tr,
table th {
  background: var(--v2-panel-soft) !important;
  border-color: var(--v2-line) !important;
  color: #dce4ed !important;
}

table tbody,
table tbody tr,
table td {
  background: transparent !important;
  border-color: var(--v2-line) !important;
  color: var(--v2-muted) !important;
}

table tbody tr:hover { background: rgba(89, 199, 255, 0.035) !important; }

.user-cell h4,
table td strong { color: var(--v2-text) !important; }

.discord-id { color: var(--v2-muted) !important; }

.badge,
.status-badge,
.status-pill,
.role-badge,
.admin-badge {
  border: 1px solid var(--v2-line) !important;
  border-radius: 999px !important;
}

.status-active,
.status-delivered,
.status-paid { background: rgba(57, 217, 138, 0.10) !important; color: var(--v2-success) !important; }
.status-expired,
.status-inactive,
.status-cancelled { background: rgba(255, 100, 116, 0.10) !important; color: var(--v2-danger) !important; }
.status-pending { background: rgba(255, 191, 105, 0.10) !important; color: var(--v2-warning) !important; }

/* Modals */
.modal-overlay,
.confirm-modal-overlay,
.renewal-modal,
.modal {
  background: rgba(3, 5, 8, 0.78) !important;
  backdrop-filter: blur(8px);
}

.modal-container,
.confirm-modal,
.renewal-modal-card,
.modal-content {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius) !important;
  box-shadow: var(--v2-shadow) !important;
  color: var(--v2-muted) !important;
}

.modal-header,
.modal-footer { border-color: var(--v2-line) !important; }

.modal-header h3,
.confirm-modal h3,
.renewal-modal-card h3,
.modal-content h3 { color: var(--v2-text) !important; }

.modal-close,
.renewal-modal-close {
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--v2-muted) !important;
}

.modal-close:hover,
.renewal-modal-close:hover { background: rgba(255, 100, 116, 0.11) !important; color: var(--v2-danger) !important; }

.confirm-modal-icon { background: rgba(255, 100, 116, 0.10) !important; color: var(--v2-danger) !important; }
.btn-cancel,
.btn-confirm-cancel,
.btn-reset { background: rgba(255, 255, 255, 0.045) !important; border-color: var(--v2-line) !important; color: var(--v2-muted) !important; }

.notes-list,
.code {
  background: var(--v2-panel-soft) !important;
  border-color: var(--v2-line) !important;
  color: var(--v2-text) !important;
}

.flash-message {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-text) !important;
}

.flash-success { background: rgba(57, 217, 138, 0.10) !important; color: var(--v2-success) !important; }
.flash-error { background: rgba(255, 100, 116, 0.10) !important; color: var(--v2-danger) !important; }

.form-check-wrapper {
  background: var(--v2-panel-soft) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
}

.form-check-input {
  background-color: #2b3441 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.form-check-input:checked {
  background-color: var(--v2-primary-strong) !important;
  border-color: var(--v2-primary) !important;
}

.form-check-label { color: var(--v2-muted) !important; }

/* Membership gate */
.join-container,
.not-in-server-container {
  background: var(--v2-panel) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: var(--v2-radius-lg) !important;
  box-shadow: var(--v2-shadow) !important;
}

/* Responsive refinements */
@media (max-width: 991px) {
  .navbar-area { padding-inline: 0; }
  .navbar-area > .container {
    margin-inline: auto !important;
    padding-inline: 16px;
    width: calc(100% - 24px) !important;
  }
  .navbar {
    direction: rtl;
    justify-content: space-between !important;
    width: 100%;
  }
  .navbar-brand { margin: 0 !important; }
  .navbar-collapse {
    background: #12171e !important;
    border: 1px solid var(--v2-line);
    border-radius: 12px;
    margin-top: 8px;
    padding: 10px 12px 15px;
  }
  .navbar-nav .nav-item a { padding: 12px 9px !important; }
  .navbar-nav .nav-item .main-btn { margin: 8px 0 0 !important; text-align: center; }
  .hero-section { padding-top: 155px !important; text-align: center; }
  .hero-section .hero-content p { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-section .hero-img {
    margin-top: 55px;
    width: 100% !important;
  }
  .hero-section .hero-img img { width: 100% !important; }
  .about-section .row { padding: 28px 16px; }
  .about-content { margin-top: 35px; }
  .login-image-side { border-right: 0; border-top: 1px solid var(--v2-line); }
}

@media (max-width: 768px) {
  .dashboard-content { padding: 86px 16px 28px !important; }
  .dashboard-header { padding: 15px 16px !important; }
  .sidebar { box-shadow: -25px 0 65px rgba(0, 0, 0, 0.42) !important; }
  .header-actions { width: 100%; }
  .btn-header { justify-content: center; }
  .subscription-filter { padding: 8px !important; }
  .filter-tabs { width: 100%; }
  .filter-tab { flex: 1; justify-content: center; }
}

@media (max-width: 576px) {
  .hero-section { min-height: auto; padding-bottom: 70px !important; }
  .hero-section .container { padding-inline: 14px !important; }
  .hero-section .row { margin-inline: 0 !important; }
  .hero-section .hero-content h1 {
    direction: rtl;
    font-size: 32px !important;
    overflow-wrap: anywhere;
  }
  .hero-section .hero-content p { font-size: 15px !important; line-height: 1.8 !important; }
  .hero-actions .main-btn { justify-content: center; width: 100%; }
  .single-feature,
  .single-feature-extended { padding: 25px !important; }
  .about-section,
  .faq-section,
  .feature-extended-section { padding-top: 90px !important; }
  .footer { margin-top: 90px; }
  .login-form-side,
  .login-image-side { min-height: auto; padding: 38px 25px !important; }
  .purchase-hero { padding-top: 150px !important; }
  .catalog-head { align-items: flex-start !important; flex-direction: column; gap: 14px; }
  .dashboard-content { padding-inline: 12px !important; }
  .modal-container,
  .renewal-modal-card { border-radius: 14px !important; }
}