/* ===== Preview Wrapper ===== */
.preview-wrapper {
  width: 100%;
  position: relative;
}

.preview-scaler {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* ===== OG Card (1200x630 base) ===== */
.og-card {
  position: relative;
  overflow: hidden;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  box-sizing: border-box;
}

.og-card * {
  box-sizing: border-box;
}

/* ===== Logo ===== */
.og-logo-wrap {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.og-logo {
  object-fit: contain;
}

/* ===== Title ===== */
.og-title {
  /* Styles applied dynamically via JS */
}

/* ===== Subtitle ===== */
.og-subtitle {
  opacity: 0.85;
}

/* ===== Accent ===== */
.og-accent {
  /* Styles applied dynamically via JS */
}

/* ===== Watermark ===== */
.og-watermark {
  position: absolute;
  bottom: 24px;
  right: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

/* Dark cards — lighter watermark */
.og-card[style*="background:rgb(15"] .og-watermark {
  color: rgba(255, 255, 255, 0.3);
}

/* Light cards — darker watermark */
.og-card[style*="background:#fff"] .og-watermark,
.og-card[style*="background:#f8"] .og-watermark,
.og-card[style*="background:#f0"] .og-watermark {
  color: rgba(0, 0, 0, 0.15);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .preview-wrapper {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .preview-wrapper {
    min-height: 220px;
  }
}

/* ===== Color Picker ===== */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* ===== Toast Transition ===== */
[x-cloak] {
  display: none !important;
}

/* ===== Smooth scaling ===== */
.preview-scaler {
  transition: transform 0.15s ease-out;
}

/* ===== Focus ring for inputs ===== */
input:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}