/* ============================================================
   NEUMORPHISM 2.0 + SOFT GLASS  --  Override Layer
   Loaded AFTER the inline <style> to override by cascade.
   Only visual properties are changed; layout stays intact.
   ============================================================ */
 
/* ── KEYFRAMES ── */
@keyframes gradientMesh {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
 
@keyframes glassShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
 
/* ── BASE ── */
body {
  background: #eaecf2;
  color: #1e293b;
}
 
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(210, 218, 240, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(220, 216, 235, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #eceef4 0%, #e4e6ee 25%, #e8e5f0 50%, #e6e8f0 75%, #eceef4 100%);
  background-size: 200% 200%;
  animation: gradientMesh 30s ease infinite;
  pointer-events: none;
}
 
.app-container {
  background: transparent;
}
 
/* ── TOP HEADER ── */
.top-header {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
 
.header-logo {
  /* layout-only */
}
 
.header-logo-icon {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  border-radius: 12px;
  box-shadow:
    2px 2px 6px rgba(91, 84, 212, 0.15),
    -1px -1px 4px rgba(255, 255, 255, 0.6);
}
 
.header-logo-text {
  /* structural only */
}
 
.header-logo-title {
  color: #1e293b;
}
 
.header-logo-subtitle {
  color: #64748b;
}
 
.header-nav {
  /* structural only */
}
 
.header-nav a {
  color: #64748b;
  transition: color 0.25s ease;
}
 
.header-nav a:hover {
  color: #5b54d4;
}
 
/* ── SIDEBAR ── */
.sidebar {
  background: rgba(20, 27, 45, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    2px 0 12px rgba(0, 0, 0, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
 
.sidebar-logo {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  border-radius: 16px;
  box-shadow:
    0 4px 12px rgba(91, 84, 212, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
 
.nav-items {
  /* structural only */
}
 
.nav-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #94a3b8;
  transition: all 0.3s ease;
}
 
.nav-item:hover {
  background: rgba(91, 84, 212, 0.1);
  border-color: rgba(91, 84, 212, 0.1);
  color: #b0b8d0;
}
 
.nav-item.active {
  background: linear-gradient(135deg, rgba(91, 84, 212, 0.8), rgba(110, 91, 191, 0.8));
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
  box-shadow:
    0 2px 8px rgba(91, 84, 212, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
 
.nav-item i {
  color: inherit;
}
 
.nav-item span {
  color: inherit;
}
 
.nav-divider {
  background: rgba(255, 255, 255, 0.05);
}
 
/* ── WORKSPACE ── */
.workspace {
  background: transparent;
}
 
.workspace-content {
  max-width: 1286px !important;
}
 
/* ── SECTIONS (glass cards) ── */
.section {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  box-shadow:
    4px 4px 12px rgba(180, 185, 200, 0.18),
    -3px -3px 8px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: box-shadow 0.3s ease;
}
 
.section:hover {
  box-shadow:
    5px 5px 14px rgba(180, 185, 200, 0.22),
    -3px -3px 10px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
 
.section-header {
  border-bottom: 1px solid rgba(220, 225, 235, 0.5);
}
 
.section-icon {
  border-radius: 16px;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.18),
    -2px -2px 6px rgba(255, 255, 255, 0.6);
}
 
.section-title {
  color: #1e293b;
}
 
.section-desc {
  color: #64748b;
}
 
/* ── FORM CONTROLS ── */
.form-group {
  /* structural only */
}
 
.form-label {
  color: #475569;
}
 
.form-input {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(220, 225, 235, 0.5);
  border-radius: 14px;
  box-shadow:
    inset 1px 1px 3px rgba(180, 185, 200, 0.15),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
  color: #1e293b;
  transition: all 0.3s ease;
}
 
.form-input:focus {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(91, 84, 212, 0.3);
  box-shadow:
    inset 1px 1px 3px rgba(180, 185, 200, 0.1),
    inset -1px -1px 3px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(91, 84, 212, 0.07);
}
 
.form-textarea {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(220, 225, 235, 0.5);
  border-radius: 14px;
  box-shadow:
    inset 1px 1px 3px rgba(180, 185, 200, 0.15),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
}
 
.form-input.mono {
  font-family: 'Roboto Mono', monospace;
  background: rgba(255, 255, 255, 0.4);
}
 
.form-grid {
  /* structural only */
}
 
.form-grid-2 {
  /* structural only */
}
 
.form-grid-3 {
  /* structural only */
}
 
/* ── COLOR PICKER ── */
.color-picker-group {
  /* structural only */
}
 
.color-picker {
  /* structural only */
}
 
.color-swatch {
  border: 2px solid rgba(220, 225, 235, 0.5);
  border-radius: 14px;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.18),
    -2px -2px 5px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
 
.color-swatch:hover {
  border-color: rgba(200, 208, 225, 0.6);
  transform: translateY(-1px);
  box-shadow:
    3px 3px 8px rgba(180, 185, 200, 0.22),
    -2px -2px 6px rgba(255, 255, 255, 0.6);
}
 
.color-value {
  color: #64748b;
}
 
/* ── THEME GALLERY ── */
.theme-gallery {
  /* structural only */
}
 
.theme-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(220, 225, 235, 0.4);
  border-radius: 18px;
  box-shadow:
    3px 3px 8px rgba(180, 185, 200, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}
 
.theme-card:hover {
  border-color: rgba(180, 190, 220, 0.5);
  transform: translateY(-2px);
  box-shadow:
    4px 4px 12px rgba(180, 185, 200, 0.2),
    -2px -2px 8px rgba(255, 255, 255, 0.55);
}
 
.theme-card.active {
  border-color: rgba(91, 84, 212, 0.35);
  box-shadow:
    0 0 0 2px rgba(91, 84, 212, 0.08),
    4px 4px 12px rgba(180, 185, 200, 0.2),
    -2px -2px 8px rgba(255, 255, 255, 0.5);
}
 
.theme-card-badge {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  box-shadow: 0 2px 6px rgba(91, 84, 212, 0.2);
}
 
.theme-card.active .theme-card-badge {
  opacity: 1;
  transform: scale(1);
}
 
.theme-preview {
  background: rgba(241, 244, 248, 0.5);
}
 
.theme-card-footer {
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(220, 225, 235, 0.35);
}
 
.theme-card-name {
  color: #1e293b;
}
 
.theme-card-desc {
  color: #94a3b8;
}
 
.theme-card-preview-btn {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(220, 225, 235, 0.4);
  border-radius: 8px;
  color: #64748b;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.12),
    -1px -1px 3px rgba(255, 255, 255, 0.35);
}
.theme-card-preview-btn:hover {
  background: rgba(91, 84, 212, 0.06);
  border-color: rgba(91, 84, 212, 0.2);
  color: #5b54d4;
}
 
/* ── FONT SELECTOR ── */
.font-selector-grid {
  /* structural only */
}
 
.font-option {
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(220, 225, 235, 0.4);
  border-radius: 14px;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.12),
    -1px -1px 4px rgba(255, 255, 255, 0.45);
  transition: all 0.25s ease;
}
 
.font-option:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(180, 190, 220, 0.45);
  transform: translateY(-1px);
  box-shadow:
    3px 3px 8px rgba(180, 185, 200, 0.16),
    -2px -2px 6px rgba(255, 255, 255, 0.5);
}
 
.font-option.active {
  border-color: rgba(91, 84, 212, 0.3);
  background: rgba(240, 242, 255, 0.6);
  box-shadow:
    inset 1px 1px 3px rgba(91, 84, 212, 0.05),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4),
    0 0 0 2px rgba(91, 84, 212, 0.06);
}
 
.font-option-sample {
  color: #1e293b;
}
 
.font-option-name {
  color: #64748b;
}
 
/* ── RATING WIDGET ── */
.rating-widget {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  box-shadow:
    4px 4px 12px rgba(180, 185, 200, 0.18),
    -3px -3px 8px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
 
.rating-title {
  color: #1e293b;
}
 
.rating-subtitle {
  color: #64748b;
}
 
.rating-stars {
  /* structural only */
}
 
.rating-star {
  color: rgba(226, 232, 240, 0.8);
  transition: all 0.2s ease;
}
 
.rating-star:hover,
.rating-star.hovered,
.rating-star.selected {
  color: #f59e0b;
  filter: drop-shadow(0 1px 4px rgba(245, 158, 11, 0.25));
}
 
.rating-star.selected {
  filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.2));
}
 
.rating-feedback {
  color: #64748b;
}
 
.rating-stats {
  border-top: 1px solid rgba(220, 225, 235, 0.4);
}
 
.rating-stat {
  /* structural only */
}
 
.rating-stat-value {
  color: #1e293b;
}
 
.rating-stat-label {
  color: #94a3b8;
}
 
/* ── DOWNLOAD COUNTER ── */
.download-counter {
  background: rgba(240, 242, 255, 0.5);
  border: 1px solid rgba(210, 218, 240, 0.4);
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  color: #5b54d4;
}
 
/* ── FILE UPLOAD ── */
.file-upload {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px dashed rgba(203, 213, 225, 0.5);
  border-radius: 16px;
  box-shadow:
    inset 1px 1px 4px rgba(180, 185, 200, 0.1),
    inset -1px -1px 4px rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}
 
.file-upload:hover {
  background: rgba(240, 242, 255, 0.45);
  border-color: rgba(91, 84, 212, 0.25);
}
 
.file-upload-icon {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.15),
    -1px -1px 4px rgba(255, 255, 255, 0.5);
  color: #cbd5e1;
  transition: all 0.3s ease;
}
 
.file-upload:hover .file-upload-icon {
  color: #5b54d4;
}
 
.file-upload-text {
  color: #475569;
}
 
.file-upload-hint {
  color: #94a3b8;
}
 
.file-preview {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(220, 225, 235, 0.4);
  border-radius: 14px;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.1),
    -1px -1px 4px rgba(255, 255, 255, 0.4);
}
 
.file-preview-remove {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(220, 225, 235, 0.4);
  color: #ef4444;
  border-radius: 10px;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.45);
  transition: all 0.25s ease;
}
 
.file-preview-remove:hover {
  background: rgba(254, 242, 242, 0.6);
}
 
/* ── EXPORT SECTION ── */
.export-section {
  background: rgba(240, 242, 255, 0.45);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1.5px solid rgba(210, 218, 240, 0.35);
  border-radius: 22px;
  box-shadow:
    4px 4px 12px rgba(180, 185, 200, 0.16),
    -3px -3px 8px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
 
.export-btn {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(220, 225, 235, 0.4);
  border-radius: 16px;
  box-shadow:
    3px 3px 8px rgba(180, 185, 200, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
}
 
.export-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    4px 4px 10px rgba(180, 185, 200, 0.2),
    -2px -2px 8px rgba(255, 255, 255, 0.6);
}
 
.export-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 2px 2px 4px rgba(180, 185, 200, 0.15),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
}
 
.export-btn-primary {
  background: linear-gradient(135deg, rgba(91, 84, 212, 0.85), rgba(110, 91, 191, 0.85));
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    3px 3px 10px rgba(91, 84, 212, 0.18),
    -1px -1px 5px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
 
.export-btn-primary:hover {
  box-shadow:
    4px 4px 14px rgba(91, 84, 212, 0.25),
    -2px -2px 6px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
 
.export-btn-secondary {
  border-color: rgba(220, 225, 235, 0.4);
  color: #475569;
}
 
.filename-input-wrapper {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(220, 225, 235, 0.4);
  border-radius: 14px;
  box-shadow:
    inset 1px 1px 3px rgba(180, 185, 200, 0.1),
    inset -1px -1px 3px rgba(255, 255, 255, 0.4);
}
 
/* ── FAQ OVERLAY / MODAL ── */
.faq-overlay,
.modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
 
.faq-modal,
.modal {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}
 
.modal-header {
  border-bottom: 1px solid rgba(220, 225, 235, 0.4);
}
 
.modal-close {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(220, 225, 235, 0.35);
  border-radius: 12px;
  color: #64748b;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}
 
.modal-close:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #1e293b;
}
 
.faq-item {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(220, 225, 235, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    2px 2px 6px rgba(180, 185, 200, 0.08),
    -1px -1px 4px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}
 
.faq-question {
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
}
 
.faq-question:hover {
  background: rgba(255, 255, 255, 0.5);
}
 
.faq-answer {
  background: rgba(255, 255, 255, 0.15);
}
 
/* ── BANK OFFERS BLOCK ── */
.bank-offers-block {
  background: rgba(240, 242, 250, 0.4);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(220, 225, 235, 0.3);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
 
.bank-offers-inner {
  /* structural only */
}
 
.bank-offers-head {
  border-bottom: 1px solid rgba(220, 225, 235, 0.35);
}
 
.bank-offers-icon {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  border-radius: 12px;
  box-shadow:
    2px 2px 6px rgba(91, 84, 212, 0.12),
    -1px -1px 4px rgba(255, 255, 255, 0.4);
}
 
.bank-offers-title {
  color: #1e293b;
}
 
.bank-offers-sub {
  color: #64748b;
}
 
.bank-offers-cards {
  /* structural only */
}
 
.bo-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(220, 225, 235, 0.4);
  border-radius: 16px;
  box-shadow:
    3px 3px 8px rgba(180, 185, 200, 0.12),
    -2px -2px 5px rgba(255, 255, 255, 0.45);
  transition: all 0.3s ease;
}
 
.bo-card:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(180, 190, 220, 0.45);
  transform: translateY(-2px);
  box-shadow:
    4px 4px 12px rgba(180, 185, 200, 0.18),
    -2px -2px 8px rgba(255, 255, 255, 0.55);
}
 
.bo-card.bo-featured {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(91, 84, 212, 0.25);
  box-shadow:
    3px 3px 10px rgba(91, 84, 212, 0.08),
    -2px -2px 6px rgba(255, 255, 255, 0.5);
}
 
.bo-badge {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  color: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(91, 84, 212, 0.15);
}
 
.bo-header {
  /* structural only */
}
 
.bo-logo {
  border-radius: 6px;
}
 
.bo-name {
  color: #1e293b;
}
 
.bo-tagline {
  color: #94a3b8;
}
 
.bo-divider {
  background: rgba(220, 225, 235, 0.35);
}
 
.bo-perks {
  /* structural only */
}
 
.bo-perk {
  color: #475569;
}
 
.bo-cta {
  background: rgba(240, 242, 255, 0.5);
  color: #5b54d4;
  border-radius: 10px;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}
 
.bo-card:hover .bo-cta {
  background: rgba(232, 236, 255, 0.6);
}
 
.bo-featured .bo-cta {
  background: linear-gradient(135deg, rgba(91, 84, 212, 0.85), rgba(110, 91, 191, 0.85));
  color: white;
  box-shadow:
    2px 2px 6px rgba(91, 84, 212, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
 
/* ── FILE STATUS INDICATORS ── */
.file-status {
  background: rgba(254, 243, 199, 0.4);
  border: 1px solid rgba(253, 230, 138, 0.4);
  border-radius: 10px;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.08),
    -1px -1px 3px rgba(255, 255, 255, 0.3);
}
 
/* ── THEME MODAL ── */
.theme-modal-overlay {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
 
.theme-modal {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  max-width: 720px;
  width: 95%;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
 
.theme-modal-close {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(220, 225, 235, 0.35);
  border-radius: 50%;
  color: #475569;
  box-shadow:
    1px 1px 4px rgba(180, 185, 200, 0.1),
    -1px -1px 3px rgba(255, 255, 255, 0.4);
  transition: all 0.25s ease;
}
 
.theme-modal-close:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #1e293b;
}
 
.theme-modal-preview {
  background: rgba(241, 244, 248, 0.4);
  border-radius: 24px 24px 0 0;
  padding: 32px;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-modal-preview svg {
  width: 100%;
  height: auto;
  max-height: 520px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.06));
}
 
.theme-modal-footer {
  background: transparent;
  border-top: 1px solid rgba(220, 225, 235, 0.35);
}
 
.theme-modal-apply {
  background: linear-gradient(135deg, rgba(91, 84, 212, 0.85), rgba(110, 91, 191, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  box-shadow:
    2px 2px 8px rgba(91, 84, 212, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}
 
.theme-modal-apply:hover {
  transform: translateY(-1px);
  box-shadow:
    3px 3px 10px rgba(91, 84, 212, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
 
/* ── FOOTER ── */
.footer {
  background: rgba(20, 27, 45, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
 
.footer-main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
 
.footer-brand-icon {
  background: linear-gradient(135deg, #5b54d4, #6e5bbf);
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.2);
}
 
/* ── PROGRESS BAR ── */
.progress-bar {
  background: linear-gradient(90deg,
    rgba(91, 84, 212, 0.7) 0%,
    rgba(110, 91, 191, 0.7) calc(var(--progress) * 1%),
    transparent calc(var(--progress) * 1%));
  box-shadow: 0 1px 4px rgba(91, 84, 212, 0.12);
}
 
/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 8px;
}
 
::-webkit-scrollbar-track {
  background: rgba(241, 244, 248, 0.3);
}
 
::-webkit-scrollbar-thumb {
  background: rgba(180, 190, 210, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
 
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
}
 
/* ── GLASS SHIMMER EFFECT (subtle) ── */
.section::after,
.bo-card::after,
.theme-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 65%
  );
  background-size: 200% 100%;
  transition: opacity 0.4s ease;
}
 
.section:hover::after,
.bo-card:hover::after,
.theme-card:hover::after {
  opacity: 1;
  animation: glassShimmer 1.4s ease forwards;
}
 
/* Ensure position relative for shimmer pseudo-elements */
.section,
.bo-card,
.theme-card {
  position: relative;
  overflow: hidden;
}
 
/* ── SMOOTH TRANSITIONS ON INTERACTIVE ELEMENTS ── */
.nav-item,
.form-input,
.form-textarea,
.file-upload,
.export-btn,
.bo-card,
.theme-card,
.font-option,
.color-swatch,
.faq-item,
.faq-question,
.rating-star,
.modal-close,
.theme-modal-close,
.theme-modal-apply,
.file-preview-remove,
.bo-cta {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
 
/* ── INPUT ERROR STATE ── */
.input-error {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(254, 242, 242, 0.45) !important;
  box-shadow:
    inset 1px 1px 3px rgba(239, 68, 68, 0.06),
    inset -1px -1px 3px rgba(255, 255, 255, 0.35),
    0 0 0 2px rgba(239, 68, 68, 0.06) !important;
}
 
/* ── THEME CARD ZOOM BUTTON ── */
.theme-card-zoom {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(220, 225, 235, 0.4);
  border-radius: 8px;
  box-shadow:
    1px 1px 3px rgba(180, 185, 200, 0.1),
    -1px -1px 2px rgba(255, 255, 255, 0.4);
}
 
.theme-card-zoom:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #5b54d4;
  border-color: rgba(91, 84, 212, 0.2);
}
 
/* ── RESPONSIVE OVERRIDES ── */
@media (max-width: 768px) {
  .sidebar {
    background: rgba(20, 27, 45, 0.9);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
 
  .top-header {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(220, 225, 235, 0.3);
  }
 
  .workspace {
    background: transparent;
  }
 
  .section {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-radius: 18px;
  }
 
  .bank-offers-block {
    background: rgba(240, 242, 250, 0.35);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
 
  .bo-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
 
  .export-btn {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
 
  /* Disable shimmer on mobile for performance */
  .section::after,
  .bo-card::after,
  .theme-card::after {
    display: none;
  }
}