/**
 * Resonance Threads — Duo Theme System v3 (Premium Edition)
 * Dark: lifted, semi-transparent layered surfaces — NOT solid black
 * Light: warm off-white with glass-morphism panels
 * Key change: panels stand OUT from background via semi-transparent layers
 *             Theme colors used sparingly as accents, NOT backgrounds
 */

/* ═══════════════════════════════════════════════════════════════
   CORE THEME VARIABLES
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── DARK THEME (default) — lifted, layered, premium ── */
  --rt-bg-solid:    #0c0c14;
  --rt-surface:     rgba(22, 22, 34, 0.85);
  --rt-surface-2:   rgba(28, 28, 42, 0.80);
  --rt-surface-3:   rgba(36, 36, 52, 0.75);
  --rt-border:      rgba(255,255,255,0.08);
  --rt-border-2:    rgba(255,255,255,0.12);
  --rt-text:        #f2f2f6;
  --rt-text-2:      #c8c8d4;
  --rt-muted:       #8888a8;
  --rt-muted-2:     #606078;
  --rt-pink:        #ff4ecd;
  --rt-cyan:        #4fdcff;
  --rt-grad:        linear-gradient(135deg, #ff4ecd, #4fdcff);
  --rt-grad-brand:  linear-gradient(135deg, #4040ff, #c06ec0, #ff2020);
  --rt-radius:      12px;
  --rt-radius-lg:   18px;
  --rt-radius-xl:   24px;
  --rt-nav-h:       60px;
  --rt-trans:       all .2s ease;
  --rt-shadow:      0 4px 24px rgba(0,0,0,0.4);
  --rt-shadow-lg:   0 12px 48px rgba(0,0,0,0.55);
  --rt-blob-1:      rgba(255,78,205,0.025);
  --rt-blob-2:      rgba(79,220,255,0.02);
  --rt-blob-3:      rgba(100,60,220,0.015);

  /* Panel accent — very subtle brand tint for important areas */
  --rt-panel-accent: rgba(255,78,205,0.04);
  --rt-panel-accent-border: rgba(255,78,205,0.12);

  /* Glass effect for cards */
  --rt-glass: rgba(22, 22, 34, 0.72);
  --rt-glass-border: rgba(255,255,255,0.10);
  --rt-glass-blur: blur(16px);
}

[data-theme="light"] {
  /* ── LIGHT THEME — warm off-white, frosted glass panels ── */
  --rt-bg-solid:    #f4f4fa;
  --rt-surface:     rgba(255, 255, 255, 0.88);
  --rt-surface-2:   rgba(248, 248, 255, 0.85);
  --rt-surface-3:   rgba(240, 240, 248, 0.80);
  --rt-border:      rgba(0,0,0,0.08);
  --rt-border-2:    rgba(0,0,0,0.12);
  --rt-text:        #0a0a18;
  --rt-text-2:      #2a2a40;
  --rt-muted:       #606078;
  --rt-muted-2:     #9090a0;
  --rt-shadow:      0 4px 20px rgba(0,0,0,0.08);
  --rt-shadow-lg:   0 12px 48px rgba(0,0,0,0.12);
  --rt-blob-1:      rgba(255,78,205,0.03);
  --rt-blob-2:      rgba(79,220,255,0.025);
  --rt-blob-3:      rgba(100,60,220,0.02);
  --rt-panel-accent: rgba(255,78,205,0.03);
  --rt-panel-accent-border: rgba(255,78,205,0.10);
  --rt-glass: rgba(255, 255, 255, 0.78);
  --rt-glass-border: rgba(0,0,0,0.08);
  --rt-glass-blur: blur(16px);
}

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════════════════════ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rt-bg-solid) !important;
  color: var(--rt-text) !important;
  transition: background 0.35s ease, color 0.35s ease;
  overflow-x: hidden;
}
body > *:first-child { margin-top: 0 !important; }
body > *:last-child  { margin-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND CANVAS
═══════════════════════════════════════════════════════════════ */
#rtBgCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.7;
}
.page-wrapper { position: relative; z-index: 1; background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   BLOB ANIMATIONS — subtle, muted
═══════════════════════════════════════════════════════════════ */
.rt-blobs {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  margin: 0; padding: 0; width: 100%; height: 100%;
  opacity: 0.6;
}
.rt-blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px); will-change: transform;
}
.rt-blob-1 { width:600px;height:600px;background:var(--rt-blob-1);top:-10%;left:-5%;animation:blobFloat1 22s ease-in-out infinite; }
.rt-blob-2 { width:500px;height:500px;background:var(--rt-blob-2);top:30%;right:-8%;animation:blobFloat2 28s ease-in-out infinite; }
.rt-blob-3 { width:400px;height:400px;background:var(--rt-blob-3);bottom:10%;left:20%;animation:blobFloat3 18s ease-in-out infinite; }
.rt-blob-4 { width:350px;height:350px;background:var(--rt-blob-1);top:60%;right:25%;animation:blobFloat4 24s ease-in-out infinite; }
.rt-blob-5 { width:280px;height:280px;background:var(--rt-blob-2);top:15%;left:45%;animation:blobFloat5 20s ease-in-out infinite; }

@keyframes blobFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,80px) scale(1.08)} 66%{transform:translate(-40px,40px) scale(0.95)} }
@keyframes blobFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-80px,-60px) scale(1.1)} 70%{transform:translate(40px,80px) scale(0.92)} }
@keyframes blobFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 30%{transform:translate(50px,-70px) scale(1.05)} 60%{transform:translate(-60px,30px) scale(1.12)} }
@keyframes blobFloat4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-80px) scale(1.06)} }
@keyframes blobFloat5 { 0%,100%{transform:translate(0,0) scale(1)} 45%{transform:translate(70px,50px) scale(0.94)} }

@media (prefers-reduced-motion: reduce) {
  .rt-blob { animation: none !important; }
  #rtBgCanvas { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — always dark, refined
═══════════════════════════════════════════════════════════════ */
.navbar {
  background: rgba(8, 8, 14, 0.92) !important;
  border-bottom: 1px solid rgba(255,78,205,0.12) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  position: sticky; top: 0; z-index: 200;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE — always visible, all devices
═══════════════════════════════════════════════════════════════ */
.nav-theme-toggle {
  display: flex !important; align-items: center; gap: 6px;
  padding: 8px 14px !important; border-radius: 24px !important;
  border: 1.5px solid rgba(255,78,205,0.35) !important;
  background: rgba(255,78,205,0.08) !important;
  cursor: pointer; font-size: 13px !important; font-weight: 700;
  color: #ff4ecd !important; transition: var(--rt-trans);
  flex-shrink: 0; font-family: inherit; white-space: nowrap;
  min-height: unset !important; min-width: unset !important;
  visibility: visible !important; opacity: 1 !important;
  position: relative; z-index: 10;
}
.nav-theme-toggle:hover {
  background: rgba(255,78,205,0.16) !important;
  border-color: #ff4ecd !important;
  box-shadow: 0 0 16px rgba(255,78,205,0.25);
}
#themeIcon { font-size: 16px; line-height: 1; display: inline-block; min-width: 16px; }
[data-theme="light"] .nav-theme-toggle {
  border-color: rgba(0,0,0,0.18) !important;
  background: rgba(0,0,0,0.05) !important;
  color: #333 !important;
}
[data-theme="light"] .nav-theme-toggle:hover {
  background: rgba(255,78,205,0.10) !important;
  border-color: #ff4ecd !important; color: #ff4ecd !important;
}
@media (max-width: 767px) {
  .nav-theme-toggle { padding: 7px 10px !important; font-size: 12px !important; }
  .nav-theme-toggle .theme-label { display: none; }
  #themeIcon { font-size: 15px; }
}
@media (max-width: 400px) {
  .nav-theme-toggle { padding: 6px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SURFACE CARDS — glass-morphism, STAND OUT from background
   Key fix: Cards use backdrop-filter + semi-transparent bg
   so they clearly separate from the page background
═══════════════════════════════════════════════════════════════ */
.card, .product-card, .design-card, .cm-card, .cm-post,
.order-card, .vault-card, .store-card, .feature-card,
.dashboard-card, .profile-card, .profile-section,
.checkout-section, .admin-card, .room-card {
  background: var(--rt-glass) !important;
  backdrop-filter: var(--rt-glass-blur) !important;
  -webkit-backdrop-filter: var(--rt-glass-blur) !important;
  border: 1px solid var(--rt-glass-border) !important;
  color: var(--rt-text) !important;
  border-radius: var(--rt-radius-lg) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.card:hover, .product-card:hover, .design-card:hover, .cm-card:hover,
.store-card:hover, .vault-card:hover, .feature-card:hover {
  border-color: rgba(255,78,205,0.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  transform: translateY(-2px) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .product-card,
[data-theme="light"] .design-card,
[data-theme="light"] .cm-card,
[data-theme="light"] .cm-post,
[data-theme="light"] .store-card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .profile-section,
[data-theme="light"] .checkout-section,
[data-theme="light"] .admin-card {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .product-card:hover,
[data-theme="light"] .design-card:hover,
[data-theme="light"] .store-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════
   IMPORTANT PANELS — semi-transparent brand accent (subtle)
   These get a very faint brand tint to highlight them
═══════════════════════════════════════════════════════════════ */
.rt-accent-panel,
.rs-stat-card,
.rs-dash-panel,
.cm-hero,
.store-hero,
.pp-info,
.checkout-section.primary,
.cart-summary {
  background: var(--rt-panel-accent) !important;
  border: 1px solid var(--rt-panel-accent-border) !important;
  backdrop-filter: var(--rt-glass-blur) !important;
  -webkit-backdrop-filter: var(--rt-glass-blur) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY — bold, readable
═══════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 { color: var(--rt-text) !important; }
p, li, td, th, label { color: var(--rt-text-2); }
.text-muted, [class*="-muted"], [class*="-sub"], [class*="-meta"] {
  color: var(--rt-muted) !important;
}
a:not([class]) { color: var(--rt-pink); }
a:not([class]):hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS & FORMS
═══════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.nav-search),
textarea, select {
  background: var(--rt-surface-2) !important;
  border: 1px solid var(--rt-border-2) !important;
  color: var(--rt-text) !important;
  border-radius: var(--rt-radius) !important;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--rt-muted) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--rt-pink) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,78,205,0.12) !important;
}
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.nav-search),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: rgba(248,248,255,0.9) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #0a0a18 !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #9090a0 !important; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — 4-tier system, NO theme color bleed, clean shapes
   Buttons are FUNCTIONAL — color indicates purpose, not brand
═══════════════════════════════════════════════════════════════ */

/* Primary gradient — for main CTAs only */
.btn-primary, .rt-btn-primary, .auth-btn,
.place-order-btn, .cart-checkout-btn, .profile-save-btn,
.cm-submit-btn, .contact-submit-btn {
  background: var(--rt-grad) !important;
  color: #000 !important; font-weight: 700 !important;
  border: none !important; border-radius: var(--rt-radius) !important;
  padding: 11px 22px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  white-space: nowrap !important; cursor: pointer !important;
  transition: var(--rt-trans) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  letter-spacing: 0.3px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.btn-primary:hover, .rt-btn-primary:hover, .auth-btn:hover,
.place-order-btn:hover, .cart-checkout-btn:hover {
  opacity: 0.9 !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255,78,205,0.25) !important;
}

/* Secondary — for secondary actions */
.btn-secondary, .rt-btn-secondary {
  background: var(--rt-surface-2) !important;
  border: 1.5px solid var(--rt-border-2) !important;
  color: var(--rt-text) !important;
  border-radius: var(--rt-radius) !important;
  padding: 11px 22px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  white-space: nowrap !important; cursor: pointer !important;
  transition: var(--rt-trans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.btn-secondary:hover, .rt-btn-secondary:hover {
  border-color: var(--rt-pink) !important; color: var(--rt-pink) !important;
  background: rgba(255,78,205,0.06) !important;
}

/* Ghost/outline — for less prominent actions */
.btn-ghost, .btn-outline, .rt-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--rt-border-2) !important;
  color: var(--rt-text-2) !important;
  border-radius: var(--rt-radius) !important;
  padding: 10px 20px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  white-space: nowrap !important; cursor: pointer !important;
  transition: var(--rt-trans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.btn-ghost:hover, .btn-outline:hover {
  border-color: var(--rt-pink) !important; color: var(--rt-pink) !important;
  background: rgba(255,78,205,0.04) !important;
}

/* Danger button */
.btn-danger {
  background: rgba(239,68,68,0.08) !important;
  border: 1.5px solid rgba(239,68,68,0.25) !important;
  color: #ef4444 !important;
  border-radius: var(--rt-radius) !important;
  padding: 10px 20px !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  cursor: pointer !important; transition: var(--rt-trans) !important;
  font-size: 13px !important; font-weight: 600 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.15) !important; }

/* ═══════════════════════════════════════════════════════════════
   BUTTON OVERFLOW FIX — global constraint
═══════════════════════════════════════════════════════════════ */
button, .btn, [class*="btn-"], [class*="-btn"] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════════════════════════ */
section, .section, main, .main-content { background: transparent; color: var(--rt-text); }
.section-alt, .bg-alt {
  background: var(--rt-surface) !important;
  backdrop-filter: var(--rt-glass-blur);
  -webkit-backdrop-filter: var(--rt-glass-blur);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — always dark, premium
═══════════════════════════════════════════════════════════════ */
.site-footer, footer {
  background: rgba(6, 6, 12, 0.95) !important;
  color: rgba(255,255,255,0.78) !important;
  border-top: 1px solid rgba(255,78,205,0.10) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.site-footer a, footer a { color: rgba(255,255,255,0.60) !important; }
.site-footer a:hover, footer a:hover { color: var(--rt-pink) !important; }

/* ═══════════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════════ */
.modal-overlay, .cm-modal-overlay {
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-box, .modal-content, .cm-modal {
  background: var(--rt-surface) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--rt-border-2) !important;
  color: var(--rt-text) !important;
  border-radius: var(--rt-radius-xl) !important;
}
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content,
[data-theme="light"] .cm-modal {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════════ */
table { border-collapse: collapse; width: 100%; }
th { background: var(--rt-surface-2) !important; color: var(--rt-muted) !important; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--rt-border-2) !important; }
td { color: var(--rt-text) !important; border-bottom: 1px solid var(--rt-border) !important; }
tr:hover td { background: rgba(255,78,205,0.03) !important; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — refined
═══════════════════════════════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: rgba(255,78,205,0.25) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,78,205,0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,78,205,0.45); }

/* ═══════════════════════════════════════════════════════════════
   FLASH / ALERTS
═══════════════════════════════════════════════════════════════ */
.flash-success, .alert-success { background: rgba(74,222,128,0.08) !important; border: 1px solid rgba(74,222,128,0.20) !important; color: #4ade80 !important; border-radius: var(--rt-radius) !important; padding: 12px 18px !important; }
.flash-error,   .alert-error   { background: rgba(239,68,68,0.08) !important; border: 1px solid rgba(239,68,68,0.20) !important; color: #ef4444 !important; border-radius: var(--rt-radius) !important; padding: 12px 18px !important; }
.flash-info,    .alert-info    { background: rgba(79,220,255,0.07) !important; border: 1px solid rgba(79,220,255,0.20) !important; color: #4fdcff !important; border-radius: var(--rt-radius) !important; padding: 12px 18px !important; }
.flash-warning, .alert-warning { background: rgba(245,158,11,0.07) !important; border: 1px solid rgba(245,158,11,0.20) !important; color: #f59e0b !important; border-radius: var(--rt-radius) !important; padding: 12px 18px !important; }
[data-theme="light"] .flash-success { color: #16a34a !important; }
[data-theme="light"] .flash-error   { color: #dc2626 !important; }
[data-theme="light"] .flash-info    { color: #0284c7 !important; }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY — glass panels, distinct from bg
═══════════════════════════════════════════════════════════════ */
.cm-root { position: relative; z-index: 1; }
.cm-hero {
  background: var(--rt-glass) !important;
  border: 1px solid var(--rt-panel-accent-border) !important;
  backdrop-filter: var(--rt-glass-blur) !important;
  -webkit-backdrop-filter: var(--rt-glass-blur) !important;
}
.cm-card, .cm-post {
  background: var(--rt-glass) !important;
  border: 1px solid var(--rt-glass-border) !important;
  backdrop-filter: var(--rt-glass-blur) !important;
  -webkit-backdrop-filter: var(--rt-glass-blur) !important;
}
[data-theme="light"] .cm-hero,
[data-theme="light"] .cm-card,
[data-theme="light"] .cm-post {
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN
═══════════════════════════════════════════════════════════════ */
.admin-sidebar, .admin-nav {
  background: rgba(8,8,14,0.92) !important;
  border-right: 1px solid rgba(255,78,205,0.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.admin-content { background: transparent !important; color: var(--rt-text) !important; }

/* ═══════════════════════════════════════════════════════════════
   BODY OVERRIDES
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"]  body { background: #0c0c14 !important; color: #f2f2f6 !important; }
[data-theme="light"] body { background: #f4f4fa !important; color: #0a0a18 !important; }

/* ═══════════════════════════════════════════════════════════════
   RATING OVERFLOW FIX — prevent ratings from breaking cards
═══════════════════════════════════════════════════════════════ */
.pp-rating, .cm-stars, .store-card-rating,
.product-card-rating, [class*="rating"] {
  display: flex !important;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.pp-stars, .cm-star, [class*="star"] {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE WRAPPER CONSISTENCY — same max-width everywhere
═══════════════════════════════════════════════════════════════ */
.page-content, .inner-page, .store-layout,
.cart-page, .orders-page, .vault-page,
.profile-layout, .checkout-layout, .db-wrap,
.cm-root, .about-section {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   STUDIO PANEL FIX — clipart/tool panels distinct
═══════════════════════════════════════════════════════════════ */
.studio-panel, .clipart-panel, .tools-panel,
.layers-panel, .sa-panel, [class*="studio-sidebar"],
[class*="rds-panel"], [class*="rds-sidebar"] {
  background: rgba(18, 18, 28, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
[data-theme="light"] .studio-panel,
[data-theme="light"] .clipart-panel,
[data-theme="light"] .tools-panel,
[data-theme="light"] .layers-panel {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE VISIBILITY FIX — panels visible on small screens
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .studio-panel, .clipart-panel, .tools-panel, .layers-panel {
    position: fixed !important;
    z-index: 800 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Card content overflow prevention */
  .product-card, .store-card, .design-card,
  .cm-post, .vault-card {
    overflow: hidden !important;
    word-break: break-word !important;
  }

  /* Button overflow on mobile */
  .product-card-actions, .store-card-actions,
  .cm-post-actions, .vault-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}