* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh;
  background: #0a0a0a; color: #fff; transition: background 0.3s, color 0.3s;
}

/* === Page-level dark/light === */
body.page-dark { background: #0a0a0a; color: #fff; }
body.page-light { background: #f5f5f5; color: #0f1419; }

#app { max-width: 800px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 32px; margin-bottom: 4px; }
h1 span { color: #1d9bf0; }
.subtitle { color: #888; margin-bottom: 24px; }

.input-row { display: flex; gap: 8px; margin-bottom: 24px; }
.input-row input {
  flex: 1; padding: 12px 16px; border-radius: 12px;
  border: 1px solid #333; background: #1a1a1a; color: #fff; font-size: 16px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.input-row input:focus { outline: none; border-color: #1d9bf0; }
.input-row button {
  padding: 12px 24px; border-radius: 12px; border: none;
  background: #1d9bf0; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.input-row button:hover { background: #1a8cd8; }
.input-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Light mode overrides for input/buttons */
body.page-light .input-row input { background: #fff; color: #0f1419; border-color: #cfd9de; }
body.page-light .subtitle { color: #536471; }

.themes { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.theme-btn {
  padding: 8px 16px; border-radius: 8px; border: 2px solid #333;
  background: #1a1a1a; color: #ccc; cursor: pointer; font-size: 14px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.theme-btn.active { border-color: #1d9bf0; color: #fff; }

body.page-light .theme-btn { background: #fff; color: #536471; border-color: #cfd9de; }
body.page-light .theme-btn.active { border-color: #1d9bf0; color: #0f1419; }

#preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 16px 0;
}
.card-wrapper { width: 100%; }

.download-row { margin-top: 24px; display: flex; gap: 8px; }
.download-row button {
  padding: 12px 24px; border-radius: 12px; border: 1px solid #333;
  background: #1a1a1a; color: #fff; font-size: 14px; cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.download-row button:hover { background: #2a2a2a; }

body.page-light .download-row button { background: #fff; color: #0f1419; border-color: #cfd9de; }
body.page-light .download-row button:hover { background: #e8e8e8; }

.loading { text-align: center; padding: 40px; color: #888; }
.error { text-align: center; padding: 20px; color: #ff6b6b; }

/* Card render area (hidden, used by html2canvas) */
#render-area { position: fixed; left: 0; top: 0; z-index: -1; opacity: 0; pointer-events: none; overflow: visible; }

/* === Card base === */
.tweet-card {
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'Inter', -apple-system, sans-serif;
}

.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.card-name { font-weight: 700; font-size: 15px; }
.card-username { font-size: 14px; }
.card-text { font-size: 16px; line-height: 1.5; flex: 1; white-space: pre-wrap; word-break: break-word; }
.card-media { margin-top: 12px; border-radius: 12px; overflow: hidden; }
.card-media img { width: 100%; display: block; }
.card-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; font-size: 12px; }
.card-watermark { opacity: 0.4; }

/* === X Dark === */
.theme-x-dark { background: #16181c; color: #e7e9ea; border: 1px solid #2f3336; }
.theme-x-dark .card-username { color: #71767b; }
.theme-x-dark .card-footer { color: #71767b; }

/* === X Light === */
.theme-x-light { background: #ffffff; color: #0f1419; border: 1px solid #eff3f4; }
.theme-x-light .card-username { color: #536471; }
.theme-x-light .card-footer { color: #536471; }

/* === Clean === */
.theme-clean { background: #ffffff; color: #1a202c; border: 1px solid #e2e8f0; }
.theme-clean .card-username { color: #718096; }
.theme-clean .card-footer { color: #718096; }

/* === Neon === */
.theme-neon {
  background: #111111; color: #ffffff; border: 1px solid #00ff88;
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
}
.theme-neon .card-username { color: #888; }
.theme-neon .card-name { color: #00ff88; }
.theme-neon .card-footer { color: #00ff88; }

/* === Gradient === */
.theme-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff; border: none;
}
.theme-gradient .card-username { color: rgba(255,255,255,0.7); }
.theme-gradient .card-text { color: #ffffff; }
.theme-gradient .card-footer { color: rgba(255,255,255,0.5); }

/* === Sunset === */
.theme-sunset {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);
  color: #ffffff; border: 1px solid rgba(255,255,255,0.15);
}
.theme-sunset .card-username { color: rgba(255,255,255,0.7); }
.theme-sunset .card-footer { color: rgba(255,255,255,0.6); }

/* === Ocean === */
.theme-ocean {
  background: linear-gradient(135deg, #0c3547 0%, #1a6b7a 50%, #2dd4bf 100%);
  color: #ffffff; border: 1px solid rgba(45,212,191,0.3);
}
.theme-ocean .card-username { color: rgba(255,255,255,0.7); }
.theme-ocean .card-footer { color: rgba(255,255,255,0.6); }

/* === Midnight === */
.theme-midnight { background: #1a1a3e; color: #e0e0ff; border: 1px solid #2a2a5e; }
.theme-midnight .card-username { color: #8888bb; }
.theme-midnight .card-name { color: #c0c0ff; }
.theme-midnight .card-footer { color: #8888bb; }

/* === Paper === */
.theme-paper { background: #faf6ee; color: #3d3529; border: 1px solid #e0d8c8; }
.theme-paper .card-username { color: #8a7e6b; }
.theme-paper .card-footer { color: #8a7e6b; }

/* === Rose === */
.theme-rose {
  background: #2a1018; color: #fce4ec; border: 1px solid #4a2030;
  box-shadow: 0 0 20px rgba(255,107,157,0.2);
}
.theme-rose .card-username { color: #c48b9f; }
.theme-rose .card-name { color: #ff6b9d; }
.theme-rose .card-footer { color: #c48b9f; }

/* === Forest === */
.theme-forest { background: #0f2a10; color: #d4edda; border: 1px solid #1e4620; }
.theme-forest .card-username { color: #7fb88a; }
.theme-forest .card-name { color: #4caf50; }
.theme-forest .card-footer { color: #7fb88a; }

/* === Nord === */
.theme-nord { background: #3b4252; color: #eceff4; border: 1px solid #4c566a; }
.theme-nord .card-username { color: #a0aec0; }
.theme-nord .card-name { color: #88c0d0; }
.theme-nord .card-footer { color: #a0aec0; }

/* === Mono === */
.theme-mono { background: #ffffff; color: #111111; border: 1px solid #dddddd; }
.theme-mono .card-username { color: #666666; }
.theme-mono .card-footer { color: #666666; }

/* === Cyberpunk === */
.theme-cyberpunk {
  background: #120020; color: #f0e6ff; border: 1px solid #6200ea;
  box-shadow: 0 0 20px rgba(224,64,251,0.3);
}
.theme-cyberpunk .card-username { color: #b388ff; }
.theme-cyberpunk .card-name { color: #e040fb; }
.theme-cyberpunk .card-footer { color: #b388ff; }

/* === Gold === */
.theme-gold {
  background: #1c1a0e; color: #ffd700; border: 1px solid #3d3510;
  box-shadow: 0 0 15px rgba(255,215,0,0.15);
}
.theme-gold .card-username { color: #b8960f; }
.theme-gold .card-footer { color: #b8960f; }

/* === Spinner === */
.spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid #333; border-top-color: #1d9bf0;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Mobile === */
@media (max-width: 600px) {
  h1 { font-size: 24px; }
  .input-row { flex-direction: column; }
  .themes { gap: 4px; }
  .theme-btn { padding: 6px 12px; font-size: 12px; }
  #preview { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
}