/* ══════════════════════════════════════════
   Creator Pay — Dark Theme
   Color Palette:
   Background:  #0d1117 (deep navy black)
   Surface:     #161b22 (card bg)
   Surface2:    #1c2333 (hover/elevated)
   Border:      #30363d
   Text:        #e6edf3 (primary)
   Text muted:  #8b949e
   Accent:      #7c6af7 → #a78bfa (purple gradient)
   Green:       #3fb950
   Red:         #f85149
   ══════════════════════════════════════════ */

/* ── Theme Toggle Button ── */
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn:hover {
  border-color: #667eea;
  transform: rotate(20deg) scale(1.1);
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
}

body.dark-mode .theme-toggle-btn {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}

/* ── Base ── */
body.dark-mode,
html.dark-mode body,
html.dark-mode body {
  background: #0d1117 !important;
  color: #e6edf3 !important;
}

/* ── Navbar ── */
body.dark-mode,
html.dark-mode body .navbar {
  background: rgba(13, 17, 23, 0.98) !important;
  border-bottom: 1px solid #30363d !important;
  box-shadow: 0 1px 0 #30363d !important;
}

body.dark-mode,
html.dark-mode body .nav-links a {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .nav-links a:hover {
  color: #a78bfa !important;
}

/* ── Login / Sign Up buttons (admin-btn) ── */
body.dark-mode,
html.dark-mode body .admin-btn {
  background: linear-gradient(135deg, #7c6af7 0%, #5b4fcf 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 106, 247, 0.35) !important;
  border: none !important;
}

body.dark-mode,
html.dark-mode body .admin-btn:hover {
  background: linear-gradient(135deg, #9580ff 0%, #7c6af7 100%) !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.5) !important;

}

body.dark-mode,
html.dark-mode body .search-box input {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .search-box input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .search-box input:focus {
  border-color: #7c6af7 !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

/* ── Hero ── */
body.dark-mode,
html.dark-mode body .hero-gradient {
  background: url('/file/dark.png') center/cover no-repeat !important;
}

body.dark-mode,
html.dark-mode body .hero-left h1 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .hero-left p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .hero-main-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .hero-main-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .float-card {
  background: rgba(22, 27, 34, 0.97) !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode,
html.dark-mode body .float-card p:first-child {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .float-card p:last-child {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .skill-tags .glass-card {
  background: rgba(28, 35, 51, 0.9) !important;
  border: 1px solid #30363d !important;
  color: #c9d1d9 !important;
}

/* ── Stats Bar — keep gradient, just tweak text ── */
body.dark-mode,
html.dark-mode body .stats-bar {
 linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}

/* ── How It Works ── */
body.dark-mode,
html.dark-mode body .how-section {
  background: #0d1117 !important;
}

body.dark-mode .how-section .section-header h2,
html.dark-mode body .how-section .section-header h2 {
  color: #e6edf3 !important;
}

body.dark-mode .how-section .section-header p,
html.dark-mode body .how-section .section-header p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .step-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .step-card:hover {
  border-color: #7c6af7 !important;
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .step-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .step-card p {
  color: #8b949e !important;
}

/* ── Categories ── */
body.dark-mode,
html.dark-mode body .categories-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .cat-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .cat-card:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .cat-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .cat-card p {
  color: #8b949e !important;
}

/* ── Seller CTA ── */
body.dark-mode,
html.dark-mode body .seller-cta {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .cta-box {
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)
  box-shadow: 0 20px 60px rgba(124, 106, 247, 0.35) !important;
}

/* ── Resources ── */
body.dark-mode,
html.dark-mode body .resources-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .filter-tabs {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .filter-btn {
  color: white !important;
}

body.dark-mode,
html.dark-mode body .filter-btn:hover {
  background: rgba(124, 106, 247, 0.12) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .filter-btn.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 106, 247, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .resource-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .resource-card:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 6px 20px rgba(124, 106, 247, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .resource-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .resource-card p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .resource-price {
  color: #3fb950 !important;
}

body.dark-mode,
html.dark-mode body .resource-icon {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .skeleton-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .sk {
  background: #1c2333 !important;
}

/* ── Pagination ── */
body.dark-mode,
html.dark-mode body .pagination {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .pag-info {
  color:#8b949e !important
}

body.dark-mode,
html.dark-mode body .pag-arrow,
body.dark-mode,
html.dark-mode body .pag-num {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pag-arrow:hover:not(:disabled),
body.dark-mode,
html.dark-mode body .pag-num:hover {
  border-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pag-num.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Blog Section ── */
body.dark-mode,
html.dark-mode body .blog-home-section {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .blog-card {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .blog-card:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .blog-card-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .blog-card-excerpt {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .blog-card-date,
body.dark-mode,
html.dark-mode body .blog-card-author {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .blog-shimmer-img,
body.dark-mode,
html.dark-mode body .blog-shimmer-line {
  background: linear-gradient(90deg, #161b22 25%, #1c2333 50%, #161b22 75%) !important;
  background-size: 400% 100% !important;
}

/* ── Trust Strip ── */
body.dark-mode,
html.dark-mode body .trust-section {
  background: #0d1117 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .trust-icon {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .trust-item h4 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .trust-item p {
  color: #8b949e !important;
}

/* ── FAQ ── */
body.dark-mode,
html.dark-mode body .faq-section {
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .faq-item-home {
  background: #161b22 !important;
  border: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-item-home:hover {
  background: #1c2333 !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .faq-q {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .faq-a {
  color: #8b949e !important;
}

/* ── Footer ── */
body.dark-mode,
html.dark-mode body footer {
  background: linear-gradient(135deg, #010409 0%, #0d1117 100%) !important;
  border-top: 1px solid #30363d !important;
}

/* ── User Dropdown ── */
body.dark-mode,
html.dark-mode body .user-dropdown {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a {
  background: #161b22 !important;
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a:hover {
  background: #1c2333 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .udh-divider {
  background: #30363d !important;
}

body.dark-mode,
html.dark-mode body .udh-logout {
  color: #f85149 !important;
}

body.dark-mode,
html.dark-mode body .udh-logout i {
  color: #f85149 !important;
}

body.dark-mode,
html.dark-mode body .udh-logout:hover {
  background: #1f1315 !important;
}

/* ── Mobile Sidebar ── */
body.dark-mode,
html.dark-mode body .mobile-sidebar {
  background: linear-gradient(180deg, #0d1117, #161b22) !important;
  border-right: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-content a {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-content a:hover {
  color: #a78bfa !important;
  background: rgba(124, 106, 247, 0.08) !important;
  border-left-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .mobile-sidebar-divider {
  background: #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-info {
  background: linear-gradient(135deg, #161b22, #1c2333) !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-name {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .mobile-user-email {
  color: #8b949e !important;
}

/* ── Mobile Bottom Nav ── */
body.dark-mode,
html.dark-mode body .mob-nav {
  background: #0d1117 !important;
  border-top-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .mob-nav-item {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .mob-nav-item.active,
body.dark-mode,
html.dark-mode body .mob-nav-item:hover {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .mob-nav-item.active svg,
body.dark-mode,
html.dark-mode body .mob-nav-item:hover svg {
  stroke: #a78bfa !important;
}

/* ── Auth Modal ── */
body.dark-mode,
html.dark-mode body .auth-modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

body.dark-mode,
html.dark-mode body .am-right {
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .am-input {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .am-input:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .am-input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .am-tabs {
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .am-tab {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-tab.active {
  color: #a78bfa !important;
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .am-header h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .am-header p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-label-row label,
body.dark-mode,
html.dark-mode body .am-input-group label {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-switch {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .am-security {
  color: #8b949e !important;
}

/* ── Smooth transitions ── */
body,
body * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════ */

/* Hero */
body.dark-mode,
html.dark-mode body .hero::before {
  background: rgba(13, 17, 23, 0.55) !important;
}

body.dark-mode,
html.dark-mode body .hero-badge {
  background: rgba(124, 106, 247, 0.18) !important;
  border-color: rgba(124, 106, 247, 0.35) !important;
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .hero-badge-dot {
  background: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .hero h1 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .hero p {
  color: #8b949e !important;
}

/* Page background */
body.dark-mode,
html.dark-mode body .page-content {
  background: linear-gradient(160deg, #0d1117 0%, #0d1117 100%) !important;
}

/* Content boxes */
body.dark-mode,
html.dark-mode body .content-box {
  background: #161b22 !important;
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .content-box:nth-child(even) {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .content-box:nth-child(even):hover {
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .content-box h2 {
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .content-box>p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .content-box strong {
  color: #e6edf3 !important;
}

/* Feature items (What We Offer) */
body.dark-mode,
html.dark-mode body .feature-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .feature-item:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 10px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .feature-item h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .feature-item p {
  color: #8b949e !important;
}

/* Benefits list (How It Works) */
body.dark-mode,
html.dark-mode body .benefits-list li {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .benefits-list i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li span {
  color: #8b949e !important;
}

/* Values grid */
body.dark-mode,
html.dark-mode body .value-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .value-card:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 10px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .value-card h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .value-card p {
  color: #8b949e !important;
}

/* Contact strip */
body.dark-mode,
html.dark-mode body .contact-us-strip {
  background: #161b22 !important;
  border-top: 1px solid #30363d !important;
}

body.dark-mode,
html.dark-mode body .contact-us-icon {
  background: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .contact-us-left h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .contact-us-left p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .contact-us-btn {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.35) !important;
}

/* Shimmer in dark */
body.dark-mode,
html.dark-mode body .shimmer-title,
body.dark-mode,
html.dark-mode body .shimmer-text,
body.dark-mode,
html.dark-mode body .shimmer-icon,
body.dark-mode,
html.dark-mode body .shimmer-feature-title,
body.dark-mode,
html.dark-mode body .shimmer-list-item,
body.dark-mode,
html.dark-mode body .shimmer-form-field,
body.dark-mode,
html.dark-mode body .shimmer-button {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .shimmer-box::before {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 247, 0.08), transparent) !important;
}

/* ══════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .page-content {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-item {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-item:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-q {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-a {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .faq-accordion-icon {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-category-title {
  color: #e6edf3 !important;
}

/* ══════════════════════════════════════════
   TERMS & PRIVACY PAGES
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .terms-layout,
body.dark-mode,
html.dark-mode body .privacy-layout {
  background: #0d1117 !important;
}

/* TOC Sidebar */
body.dark-mode,
html.dark-mode body .toc-inner {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}


body.dark-mode,
html.dark-mode body .toc-link:hover,
body.dark-mode,
html.dark-mode body .toc-link.active {
  background: rgba(124, 106, 247, 0.12) !important;
  color: #a78bfa !important;
}


body.dark-mode,
html.dark-mode body .toc-link.active .toc-num {
  color: #a78bfa !important;
}

/* Content boxes */
body.dark-mode,
html.dark-mode body .terms-main .content-box,
body.dark-mode,
html.dark-mode body .privacy-main .content-box {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box:hover,
body.dark-mode,
html.dark-mode body .privacy-main .content-box:hover {
  box-shadow: 0 6px 28px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box h2,
body.dark-mode,
html.dark-mode body .privacy-main .content-box h2 {
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box p,
body.dark-mode,
html.dark-mode body .privacy-main .content-box p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .terms-main .content-box strong,
body.dark-mode,
html.dark-mode body .privacy-main .content-box strong {
  color: #e6edf3 !important;
}

/* Section icon */
body.dark-mode,
html.dark-mode body .section-icon-wrap {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .section-icon-wrap i {
  color: #a78bfa !important;
}

/* Info boxes */
body.dark-mode,
html.dark-mode body .info-blue {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
}

body.dark-mode,
html.dark-mode body .info-blue i {
  color: #60a5fa !important;
}

body.dark-mode,
html.dark-mode body .info-green {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}

body.dark-mode,
html.dark-mode body .info-green i {
  color: #4ade80 !important;
}

body.dark-mode,
html.dark-mode body .info-warn {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #fcd34d !important;
}

body.dark-mode,
html.dark-mode body .info-warn i {
  color: #fbbf24 !important;
}

/* Highlight strip */
body.dark-mode,
html.dark-mode body .highlight-strip {
  background: rgba(124, 106, 247, 0.1) !important;
  border-left-color: #7c6af7 !important;
  color: #c9d1d9 !important;
}

/* Rule cards */
body.dark-mode,
html.dark-mode body .rule-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .rule-card:hover {
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .rule-card>i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .rule-card strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .rule-card p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .rule-card--warn {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .rule-card--warn>i {
  color: #f87171 !important;
}

/* Steps list */
body.dark-mode,
html.dark-mode body .step-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .step-item strong {
  color: #e6edf3 !important;
}

/* Benefits list */
body.dark-mode,
html.dark-mode body .benefits-list li {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .benefits-list li:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
}

body.dark-mode,
html.dark-mode body .benefits-list i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .benefits-list span {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .benefits-list strong {
  color: #e6edf3 !important;
}

/* Contact card */
body.dark-mode,
html.dark-mode body .contact-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .contact-item:hover {
  border-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .contact-item i {
  color: #a78bfa !important;
}

/* Privacy-specific: data grid, security grid, rights grid, etc. */
body.dark-mode,
html.dark-mode body .data-card,
body.dark-mode,
html.dark-mode body .sec-card,
body.dark-mode,
html.dark-mode body .right-card,
body.dark-mode,
html.dark-mode body .share-card,
body.dark-mode,
html.dark-mode body .cookie-card,
body.dark-mode,
html.dark-mode body .retention-item,
body.dark-mode,
html.dark-mode body .use-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .data-card-head {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .data-card ul li,
body.dark-mode,
html.dark-mode body .sec-card p,
body.dark-mode,
html.dark-mode body .right-card p,
body.dark-mode,
html.dark-mode body .share-card p,
body.dark-mode,
html.dark-mode body .cookie-card p,
body.dark-mode,
html.dark-mode body .use-item p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .sec-card strong,
body.dark-mode,
html.dark-mode body .right-card strong,
body.dark-mode,
html.dark-mode body .share-card strong,
body.dark-mode,
html.dark-mode body .cookie-card strong,
body.dark-mode,
html.dark-mode body .use-item strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .sec-card i,
body.dark-mode,
html.dark-mode body .right-card i,
body.dark-mode,
html.dark-mode body .use-item i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .share-card--warn {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

body.dark-mode,
html.dark-mode body .pstat-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .pstat-card i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .retention-icon {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .retention-icon i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .retention-item strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .retention-item p {
  color: #8b949e !important;
}

/* ══════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .contact-left,
body.dark-mode,
html.dark-mode body .contact-right {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode,
html.dark-mode body .info-head h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .info-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .info-icon-wrap {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .info-icon-wrap i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .response-badge {
  background: rgba(124, 106, 247, 0.1) !important;
  border-color: rgba(124, 106, 247, 0.3) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .response-badge i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .info-card {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body a.info-card:hover {
  background: #21293d !important;
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 14px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .info-card strong {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .info-card span {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .info-card-arrow {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .social-btn {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

/* Form */
body.dark-mode,
html.dark-mode body .form-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .form-group label {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .form-group label i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .form-group input,
body.dark-mode,
html.dark-mode body .form-group textarea,
body.dark-mode,
html.dark-mode body .select-wrap select {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .form-group input::placeholder,
body.dark-mode,
html.dark-mode body .form-group textarea::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .form-group input:focus,
body.dark-mode,
html.dark-mode body .form-group textarea:focus,
body.dark-mode,
html.dark-mode body .select-wrap select:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .select-arrow {
  color: #484f58 !important;
}

/* FAQ section */
body.dark-mode,
html.dark-mode body .faq-section {
  border-top-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-head p {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .faq-head-icon {
  background: rgba(124, 106, 247, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .faq-head-icon i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-item {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .faq-item:hover {
  border-color: #7c6af7 !important;
  box-shadow: 0 4px 16px rgba(124, 106, 247, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .faq-item.open {
  border-color: #7c6af7 !important;
  border-left-color: #7c6af7 !important;
  box-shadow: 0 4px 20px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .faq-q {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .faq-icon {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .faq-item.open .faq-icon {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .faq-a {
  color: #8b949e !important;
  border-top-color: #30363d !important;
}

/* Shimmer */
body.dark-mode,
html.dark-mode body .shimmer-card,
body.dark-mode,
html.dark-mode body .shimmer-form-field,
body.dark-mode,
html.dark-mode body .shimmer-button {
  background: #1c2333 !important;
}

/* ══════════════════════════════════════════
   BLOG PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .blog-page {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .gridWrap {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .blog-grid-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .skel-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .skel-card-img,
body.dark-mode,
html.dark-mode body .skel-line,
body.dark-mode,
html.dark-mode body .skel-hero {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .blog-empty {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .read-modal-content {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .read-modal-topbar {
  border-color: #30363d !important;
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .read-modal-close {
  color: #8b949e !important;
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .read-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .read-meta {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .read-content {
  color: #c9d1d9 !important;
}

body.dark-mode,
html.dark-mode body .read-content h1,
body.dark-mode,
html.dark-mode body .read-content h2,
body.dark-mode,
html.dark-mode body .read-content h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .read-content a {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .hero-slider {
  background: #0d1117 !important;
}

body.dark-mode,
html.dark-mode body .hero-slide-overlay {
  background: none !important;
}

body.dark-mode,
html.dark-mode body .hero-arrow {
  background: rgba(22, 27, 34, 0.9) !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

/* ══════════════════════════════════════════
   DASHBOARD PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .dashboard-wrapper {
  background: linear-gradient(160deg, #0d1117 0%, #0d1117 100%) !important;
}

/* Banner — keep purple gradient, just tweak text */
body.dark-mode,
html.dark-mode body .dash-banner-left h1 {
  color: #fff !important;
}

body.dark-mode,
html.dark-mode body .dash-banner-left p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Stat cards */
body.dark-mode,
html.dark-mode body .stat-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .stat-card:hover {
  box-shadow: 0 8px 28px rgba(124, 106, 247, 0.18) !important;
}

body.dark-mode,
html.dark-mode body .stat-num {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .stat-label {
  color: #8b949e !important;
}

/* Section head */
body.dark-mode,
html.dark-mode body .dash-section-head h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dash-section-head h2 i {
  color: #a78bfa !important;
}

/* Filter tabs */
body.dark-mode,
html.dark-mode body .dash-filters {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn:hover {
  background: rgba(124, 106, 247, 0.1) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dash-filter-btn.active {
  background: linear-gradient(135deg, #7c6af7, #5b4fcf) !important;
  color: #fff !important;
}



body.dark-mode,
html.dark-mode body .dash-filter-select {
  color: #e6edf3 !important;
  background: transparent !important;
}

/* Purchases table wrapper */
body.dark-mode,
html.dark-mode body .purchases-grid {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody tr {
  border-bottom-color: #21293d !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody tr:hover {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .purchases-table tbody td {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .td-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .td-price {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .td-date {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .td-id {
  color: #8b949e !important;
}

/* Type badges in dark */
body.dark-mode,
html.dark-mode body .td-badge.pdf {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #fca5a5 !important;
}

body.dark-mode,
html.dark-mode body .td-badge.excel {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #86efac !important;
}

body.dark-mode,
html.dark-mode body .td-badge.exam {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
}

body.dark-mode,
html.dark-mode body .td-badge.freelance {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #c4b5fd !important;
}

body.dark-mode,
html.dark-mode body .td-badge.default {
  background: #1c2333 !important;
  color: #8b949e !important;
}

/* Type icons in dark */
body.dark-mode,
html.dark-mode body .td-icon.pdf {
  background: rgba(245, 158, 11, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.excel {
  background: rgba(22, 163, 74, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.exam {
  background: rgba(59, 130, 246, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.freelance {
  background: rgba(124, 58, 237, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .td-icon.default {
  background: #1c2333 !important;
}

/* Action buttons */
body.dark-mode,
html.dark-mode body .pc-btn.download,
body.dark-mode,
html.dark-mode body .pc-btn.view {
  background: rgba(124, 106, 247, 0.12) !important;
  border-color: rgba(124, 106, 247, 0.35) !important;
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .pc-btn.download:hover,
body.dark-mode,
html.dark-mode body .pc-btn.view:hover {
  background: rgba(124, 106, 247, 0.22) !important;
}

/* Shimmer */
body.dark-mode,
html.dark-mode body .sh {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .shimmer-wrap::before {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 247, 0.06), transparent) !important;
}

/* Empty state */
body.dark-mode,
html.dark-mode body .empty-state {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .empty-state h2 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .empty-state p {
  color: #8b949e !important;
}


/* Detail modal */
body.dark-mode,
html.dark-mode body .detail-modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode,
html.dark-mode body .detail-modal {
  background: #161b22 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode,
html.dark-mode body .detail-modal-close {
  background: #1c2333 !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .detail-modal-close:hover {
  background: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-title {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-desc {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dm-field {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .dm-field-label {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .dm-field-label i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val.price {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .dm-field-val.mono {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.pdf {
  background: rgba(220, 38, 38, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.excel {
  background: rgba(22, 163, 74, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.exam {
  background: rgba(37, 99, 235, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.freelance {
  background: rgba(124, 58, 237, 0.15) !important;
}

body.dark-mode,
html.dark-mode body .dm-icon.default {
  background: #1c2333 !important;
}

/* Status badges in dark */
body.dark-mode,
html.dark-mode body .td-status.completed {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #86efac !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .td-status.pending {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #fcd34d !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .td-status.failed {
  background: rgba(225, 29, 72, 0.12) !important;
  color: #fca5a5 !important;
  border-color: rgba(225, 29, 72, 0.25) !important;
}

/* Search input */
body.dark-mode,
html.dark-mode body .search-box input {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .search-box input::placeholder {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .search-box input:focus {
  border-color: #7c6af7 !important;
}

/* User dropdown (dashboard has its own) */
body.dark-mode,
html.dark-mode body .user-dropdown {
  background: #161b22 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a {
  color: #c9d1d9 !important;
  background: #161b22 !important;
}

body.dark-mode,
html.dark-mode body .user-dropdown a:hover {
  background: #1c2333 !important;
  color: #a78bfa !important;
}


/* ══════════════════════════════════════════
   DETAIL PAGE
   ══════════════════════════════════════════ */
body.dark-mode,
html.dark-mode body .details-wrapper {
  background: #0d1117 !important;
}

/* Breadcrumb */
body.dark-mode,
html.dark-mode body .breadcrumb {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .breadcrumb a {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .breadcrumb span {
  color: #484f58 !important;
}

/* Resource header card */
body.dark-mode,
html.dark-mode body .resource-header-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .resource-header-card h1 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .description {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .resource-meta-row {
  border-top-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .resource-meta-item {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .resource-meta-item i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .resource-meta-item strong {
  color: #e6edf3 !important;
}

/* Included card */
body.dark-mode,
html.dark-mode body .included-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .card-heading {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .card-heading i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .included-item {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .included-item:hover {
  border-color: #7c6af7 !important;
  box-shadow: 0 3px 10px rgba(124, 106, 247, 0.12) !important;
}

body.dark-mode,
html.dark-mode body .included-item i {
  color: #3fb950 !important;
}

/* Why card */
body.dark-mode,
html.dark-mode body .why-card {
  background: rgba(124, 106, 247, 0.06) !important;
  border-color: rgba(124, 106, 247, 0.25) !important;
}

body.dark-mode,
html.dark-mode body .why-item {
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .why-item i {
  color: #a78bfa !important;
}

body.dark-mode,
html.dark-mode body .why-item strong {
  color: #e6edf3 !important;
}

/* Purchase card */
body.dark-mode,
html.dark-mode body .purchase-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode,
html.dark-mode body .price-section {
  border-bottom-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .price-label {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .info-item {
  color: #8b949e !important;
  border-bottom-color: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .info-item i {
  color: #3fb950 !important;
}

/* Trust card */
body.dark-mode,
html.dark-mode body .trust-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body.dark-mode,
html.dark-mode body .trust-card-title {
  color: #484f58 !important;
}

body.dark-mode,
html.dark-mode body .trust-badge {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode,
html.dark-mode body .trust-badge.green i {
  color: #3fb950 !important;
}

body.dark-mode,
html.dark-mode body .trust-badge.blue i {
  color: #60a5fa !important;
}

body.dark-mode,
html.dark-mode body .trust-badge.amber i {
  color: #fbbf24 !important;
}

body.dark-mode,
html.dark-mode body .trust-badge.purple i {
  color: #a78bfa !important;
}

/* Contact section */
body.dark-mode,
html.dark-mode body .detail-contact-section {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode,
html.dark-mode body .detail-contact-left h3 {
  color: #e6edf3 !important;
}

body.dark-mode,
html.dark-mode body .detail-contact-left p {
  color: #8b949e !important;
}

/* Shimmer */
body.dark-mode,
html.dark-mode body .shimmer-element {
  background: #1c2333 !important;
}

body.dark-mode,
html.dark-mode body .shimmer-element::after {
  background: linear-gradient(90deg, transparent, rgba(124, 106, 247, 0.07), transparent) !important;
}

body.dark-mode,
html.dark-mode body .shimmer-features {
  background: #1c2333 !important;
}


/* ══════════════════════════════════════════
   ADMIN RESOURCES PAGE — Dark Mode
   ══════════════════════════════════════════ */

/* ── Body & layout ── */
body.dark-mode,
html.dark-mode body {
  background: #0d1117 !important;
}

body.dark-mode .sidebar,
html.dark-mode body .sidebar {
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%) !important;
  border-right-color: #30363d !important;
  box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
}

body.dark-mode .sidebar-header,
html.dark-mode body .sidebar-header {
  border-bottom-color: #30363d !important;
}

body.dark-mode .sidebar-close-btn,
html.dark-mode body .sidebar-close-btn {
  color: #8b949e !important;
}

body.dark-mode .sidebar-close-btn:hover,
html.dark-mode body .sidebar-close-btn:hover {
  background: #1c2333 !important;
  color: #f85149 !important;
}

body.dark-mode .main,
html.dark-mode body .main {
  background: #0d1117 !important;
}

/* ── Sidebar nav links ── */
body.dark-mode .sidebar a.nav-link,
html.dark-mode body .sidebar a.nav-link {
  color: #8b949e !important;
}

body.dark-mode .sidebar a.nav-link:not(.active-link):hover,
html.dark-mode body .sidebar a.nav-link:not(.active-link):hover {
  background: rgba(124,106,247,0.08) !important;
  border-left-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode .sidebar a.nav-link.active-link,
html.dark-mode body .sidebar a.nav-link.active-link {
  background: linear-gradient(90deg, rgba(124,106,247,0.18) 0%, rgba(91,79,207,0.07) 100%) !important;
  border-left-color: #7c6af7 !important;
  color: #a78bfa !important;
}

body.dark-mode .sidebar a.nav-link-divider,
html.dark-mode body .sidebar a.nav-link-divider {
  border-top-color: #30363d !important;
}

/* ── Sidebar user section ── */
body.dark-mode .sidebar-user,
html.dark-mode body .sidebar-user {
  background: #161b22 !important;
  border-top-color: #30363d !important;
}

body.dark-mode .sidebar-user .user-info,
html.dark-mode body .sidebar-user .user-info {
  border-bottom-color: #30363d !important;
}

body.dark-mode .sidebar-user .user-name,
html.dark-mode body .sidebar-user .user-name {
  color: #e6edf3 !important;
}

body.dark-mode .sidebar-user .user-email,
html.dark-mode body .sidebar-user .user-email {
  color: #8b949e !important;
}

body.dark-mode .sb-logout,
html.dark-mode body .sb-logout {
  background: #161b22 !important;
  border-color: #f85149 !important;
  color: #f85149 !important;
}

body.dark-mode .sb-logout:hover,
html.dark-mode body .sb-logout:hover {
  background: rgba(248,81,73,0.12) !important;
}

/* ── Dark/light toggle wrap ── */
body.dark-mode .sb-nm-wrap,
html.dark-mode body .sb-nm-wrap {
  border-top-color: #30363d !important;
}

body.dark-mode .sb-nm-wrap-label,
html.dark-mode body .sb-nm-wrap-label {
  color: #8b949e !important;
}

/* ── Section header — light mode explicit ── */
.section-header {
  background: transparent;
}

.section-title h2 {
  color: #1e293b;
}

/* ── Section title & counts ── */
body.dark-mode .section-title h2,
html.dark-mode body .section-title h2 {
  color: #e6edf3 !important;
}

body.dark-mode .resource-count,
html.dark-mode body .resource-count {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}

/* ── View toggle buttons ── */
body.dark-mode .view-btn,
html.dark-mode body .view-btn {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode .view-btn:hover,
html.dark-mode body .view-btn:hover {
  border-color: #7c6af7 !important;
  color: #a78bfa !important;
}

/* ── Add buttons ── */
body.dark-mode .pdf-btn,
html.dark-mode body .pdf-btn {
  background: #1c2333 !important;
  border-color: #f85149 !important;
  color: #f85149 !important;
}

body.dark-mode .pdf-btn:hover,
html.dark-mode body .pdf-btn:hover {
  background: rgba(248,81,73,0.12) !important;
}

body.dark-mode .excel-btn,
html.dark-mode body .excel-btn {
  background: #1c2333 !important;
  border-color: #3fb950 !important;
  color: #3fb950 !important;
}

body.dark-mode .excel-btn:hover,
html.dark-mode body .excel-btn:hover {
  background: rgba(63,185,80,0.12) !important;
}

body.dark-mode .exam-btn,
html.dark-mode body .exam-btn {
  background: #1c2333 !important;
  border-color: #f0883e !important;
  color: #f0883e !important;
}

body.dark-mode .exam-btn:hover,
html.dark-mode body .exam-btn:hover {
  background: rgba(240,136,62,0.12) !important;
}

body.dark-mode .freelance-btn,
html.dark-mode body .freelance-btn {
  background: #1c2333 !important;
  border-color: #a78bfa !important;
  color: #a78bfa !important;
}

body.dark-mode .freelance-btn:hover,
html.dark-mode body .freelance-btn:hover {
  background: rgba(167,139,250,0.12) !important;
}

/* ── Custom select dropdown ── */
body.dark-mode .custom-select,
html.dark-mode body .custom-select {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode .custom-select span,
html.dark-mode body .custom-select span {
  color: #e6edf3 !important;
}

body.dark-mode .custom-select .arrow,
html.dark-mode body .custom-select .arrow {
  color: #484f58 !important;
}

body.dark-mode .custom-select:hover,
html.dark-mode body .custom-select:hover {
  border-color: #7c6af7 !important;
  background: #21293d !important;
}

body.dark-mode .dropdown,
html.dark-mode body .dropdown {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

body.dark-mode .dropdown div,
html.dark-mode body .dropdown div {
  color: #c9d1d9 !important;
}

body.dark-mode .dropdown div:hover,
html.dark-mode body .dropdown div:hover {
  background: rgba(124,106,247,0.1) !important;
  color: #a78bfa !important;
}

/* ── Resource rows ── */
body.dark-mode .row,
html.dark-mode body .row {
  background: #161b22 !important;
  border-color: #30363d !important;
  box-shadow: none !important;
}

body.dark-mode .row:hover,
html.dark-mode body .row:hover {
  background: #1c2333 !important;
  box-shadow: 0 4px 16px rgba(124,106,247,0.12) !important;
}

body.dark-mode .table-title h4,
html.dark-mode body .table-title h4 {
  color: #e6edf3 !important;
}

body.dark-mode .table-title p,
html.dark-mode body .table-title p {
  color: #8b949e !important;
}

body.dark-mode .table-title .icon img,
html.dark-mode body .table-title .icon img {
  border-color: #30363d !important;
}

body.dark-mode .row .price,
html.dark-mode body .row .price {
  color: #a78bfa !important;
}

body.dark-mode .btn-view,
html.dark-mode body .btn-view {
  background: #1c2333 !important;
  border-color: #388bfd !important;
  color: #388bfd !important;
}

body.dark-mode .btn-edit,
html.dark-mode body .btn-edit {
  background: #1c2333 !important;
  border-color: #f0883e !important;
  color: #f0883e !important;
}

body.dark-mode .btn-delete,
html.dark-mode body .btn-delete {
  background: #1c2333 !important;
  border-color: #f85149 !important;
  color: #f85149 !important;
}

body.dark-mode .btn-view:hover,
html.dark-mode body .btn-view:hover {
  background: #388bfd !important;
  color: #fff !important;
}

body.dark-mode .btn-edit:hover,
html.dark-mode body .btn-edit:hover {
  background: #f0883e !important;
  color: #fff !important;
}

body.dark-mode .btn-delete:hover,
html.dark-mode body .btn-delete:hover {
  background: #f85149 !important;
  color: #fff !important;
}

/* ── Empty state ── */
body.dark-mode .empty-state h3,
html.dark-mode body .empty-state h3 {
  color: #e6edf3 !important;
}

body.dark-mode .empty-state p,
html.dark-mode body .empty-state p {
  color: #8b949e !important;
}



/* ── Modals ── */
body.dark-mode .modal-content,
html.dark-mode body .modal-content {
  background: #161b22 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}

body.dark-mode .modal-content .close,
html.dark-mode body .modal-content .close {
  background: #1c2333 !important;
  color: #8b949e !important;
}

body.dark-mode .modal-content .close:hover,
html.dark-mode body .modal-content .close:hover {
  background: rgba(248,81,73,0.15) !important;
  color: #f85149 !important;
}

body.dark-mode #resourceForm input,
body.dark-mode #resourceForm textarea,
body.dark-mode #editForm input,
body.dark-mode #editForm textarea,
html.dark-mode body #resourceForm input,
html.dark-mode body #resourceForm textarea,
html.dark-mode body #editForm input,
html.dark-mode body #editForm textarea {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode #resourceForm input::placeholder,
body.dark-mode #resourceForm textarea::placeholder,
body.dark-mode #editForm input::placeholder,
body.dark-mode #editForm textarea::placeholder,
html.dark-mode body #resourceForm input::placeholder,
html.dark-mode body #resourceForm textarea::placeholder,
html.dark-mode body #editForm input::placeholder,
html.dark-mode body #editForm textarea::placeholder {
  color: #484f58 !important;
}

body.dark-mode #resourceForm input:focus,
body.dark-mode #resourceForm textarea:focus,
body.dark-mode #editForm input:focus,
body.dark-mode #editForm textarea:focus,
html.dark-mode body #resourceForm input:focus,
html.dark-mode body #resourceForm textarea:focus,
html.dark-mode body #editForm input:focus,
html.dark-mode body #editForm textarea:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 4px rgba(124,106,247,0.15) !important;
}

body.dark-mode .last-file-info,
html.dark-mode body .last-file-info {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode #viewContent p,
html.dark-mode body #viewContent p {
  border-bottom-color: #30363d !important;
  color: #8b949e !important;
}

body.dark-mode #viewContent strong,
html.dark-mode body #viewContent strong {
  color: #e6edf3 !important;
}

/* ── Auth modal ── */
body.dark-mode .auth-modal-content,
html.dark-mode body .auth-modal-content {
  background: #161b22 !important;
}

body.dark-mode .auth-modal-content .close,
html.dark-mode body .auth-modal-content .close {
  color: #8b949e !important;
}

body.dark-mode .auth-modal-content p,
html.dark-mode body .auth-modal-content p {
  color: #8b949e !important;
}

body.dark-mode .form-group label,
html.dark-mode body .form-group label {
  color: #c9d1d9 !important;
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
html.dark-mode body .form-group input,
html.dark-mode body .form-group textarea {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus,
html.dark-mode body .form-group input:focus,
html.dark-mode body .form-group textarea:focus {
  border-color: #7c6af7 !important;
  background: #21293d !important;
  box-shadow: 0 0 0 4px rgba(124,106,247,0.15) !important;
}

body.dark-mode .toggle-form,
html.dark-mode body .toggle-form {
  color: #8b949e !important;
}

/* ── Delete confirm modal ── */
body.dark-mode #deleteModal > div,
html.dark-mode body #deleteModal > div {
  background: #161b22 !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}

body.dark-mode #deleteModal h3,
html.dark-mode body #deleteModal h3 {
  color: #e6edf3 !important;
}

body.dark-mode #deleteModal p,
html.dark-mode body #deleteModal p {
  color: #8b949e !important;
}

body.dark-mode #deleteModal button:first-child,
html.dark-mode body #deleteModal button:first-child {
  background: #1c2333 !important;
  border-color: #30363d !important;
  color: #8b949e !important;
}

/* ── Skeleton shimmer — dark mode ── */
body.dark-mode .sk-row-icon,
body.dark-mode .sk-row-title,
body.dark-mode .sk-row-desc,
body.dark-mode .sk-row-price,
body.dark-mode .sk-row-btn,
html.dark-mode body .sk-row-icon,
html.dark-mode body .sk-row-title,
html.dark-mode body .sk-row-desc,
html.dark-mode body .sk-row-price,
html.dark-mode body .sk-row-btn {
  background: linear-gradient(90deg, #1c2333 25%, #21293d 50%, #1c2333 75%) !important;
  background-size: 400px 100% !important;
  animation: sk-dark-shimmer 1.4s infinite linear !important;
}

body.dark-mode .custom-select-skeleton,
html.dark-mode body .custom-select-skeleton {
  background: #1c2333 !important;
  border-color: #30363d !important;
}

body.dark-mode .custom-select-skeleton .sk-icon,
body.dark-mode .custom-select-skeleton .sk-text,
body.dark-mode .custom-select-skeleton .sk-arrow,
html.dark-mode body .custom-select-skeleton .sk-icon,
html.dark-mode body .custom-select-skeleton .sk-text,
html.dark-mode body .custom-select-skeleton .sk-arrow {
  background: linear-gradient(90deg, #1c2333 25%, #21293d 50%, #1c2333 75%) !important;
  background-size: 400px 100% !important;
  animation: sk-dark-shimmer 1.4s infinite linear !important;
}

body.dark-mode .skeleton-line,
html.dark-mode body .skeleton-line {
  background: linear-gradient(90deg, #1c2333 25%, #21293d 50%, #1c2333 75%) !important;
  background-size: 400px 100% !important;
  animation: sk-dark-shimmer 1.4s infinite linear !important;
}

@keyframes sk-dark-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── Purchased resources section ── */
body.dark-mode .purchased-heading,
html.dark-mode body .purchased-heading {
  color: #e6edf3 !important;
}