* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode {
  background-color: #FFF8F0;
  color: #333;
}

body.dark-mode {
  background-color: #1A1410;
  color: #E8DDD0;
}

/* Quill progress bar animation */
@keyframes quillDraw {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes quillBounce {
  0%, 100% { transform: translateY(0) rotate(-30deg); }
  50% { transform: translateY(-4px) rotate(-30deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heartBurst {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes typewriter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.heart-burst {
  animation: heartBurst 0.4s ease-out;
}

.quill-progress-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}

.light-mode .quill-progress-track {
  background: #E8DDD0;
}

.dark-mode .quill-progress-track {
  background: #3A3430;
}

.quill-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #990000, #BB0000, #990000);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  transition: width 0.5s ease;
}

/* Drop zone styles */
.drop-zone {
  border: 2.5px dashed #990000;
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: #BB0000;
  background-color: rgba(153, 0, 0, 0.04);
  transform: scale(1.005);
}

.dark-mode .drop-zone:hover, .dark-mode .drop-zone.drag-over {
  background-color: rgba(187, 0, 0, 0.08);
}

.drop-zone.has-image {
  border-style: solid;
  border-color: #990000;
}

/* AO3 style button */
.ao3-btn {
  background: linear-gradient(135deg, #990000 0%, #BB0000 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(153, 0, 0, 0.3);
}

.ao3-btn:hover:not(:disabled) {
  box-shadow: 0 4px 20px rgba(153, 0, 0, 0.5);
  transform: translateY(-1px);
}

.ao3-btn:active:not(:disabled) {
  transform: translateY(0);
}

.ao3-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tag styles */
.trope-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  border: 1.5px solid;
}

.light-mode .trope-tag {
  border-color: #D4C5B0;
  color: #555;
  background: #FFF;
}

.light-mode .trope-tag:hover {
  border-color: #990000;
  color: #990000;
}

.light-mode .trope-tag.selected {
  background: #990000;
  border-color: #990000;
  color: white;
}

.dark-mode .trope-tag {
  border-color: #4A4035;
  color: #B0A090;
  background: #2A2420;
}

.dark-mode .trope-tag:hover {
  border-color: #BB0000;
  color: #E0C0B0;
}

.dark-mode .trope-tag.selected {
  background: #990000;
  border-color: #990000;
  color: white;
}

/* Rating icon */
.rating-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  border: 1.5px solid transparent;
}

.light-mode .rating-option {
  background: #FFF;
  border-color: #D4C5B0;
}

.light-mode .rating-option:hover {
  border-color: #990000;
}

.light-mode .rating-option.selected {
  background: #990000;
  color: white;
  border-color: #990000;
}

.dark-mode .rating-option {
  background: #2A2420;
  border-color: #4A4035;
}

.dark-mode .rating-option:hover {
  border-color: #BB0000;
}

.dark-mode .rating-option.selected {
  background: #990000;
  color: white;
  border-color: #990000;
}

/* Slider */
.tone-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  transition: opacity 0.2s;
}

.light-mode .tone-slider {
  background: linear-gradient(to right, #D4C5B0, #990000);
}

.dark-mode .tone-slider {
  background: linear-gradient(to right, #4A4035, #BB0000);
}

.tone-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #990000;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}

.tone-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.tone-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #990000;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Story output AO3 styling */
.story-container {
  border-radius: 8px;
  overflow: hidden;
}

.light-mode .story-container {
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid #E0D5C5;
}

.dark-mode .story-container {
  background: #2A2420;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  border: 1px solid #3A3430;
}

.story-meta-header {
  padding: 20px 24px;
  font-size: 13px;
  line-height: 1.8;
}

.light-mode .story-meta-header {
  background: #F5EDE0;
  border-bottom: 1px solid #E0D5C5;
  color: #666;
}

.dark-mode .story-meta-header {
  background: #1E1914;
  border-bottom: 1px solid #3A3430;
  color: #9A8A7A;
}

.meta-label {
  font-weight: 600;
}

.light-mode .meta-label {
  color: #444;
}

.dark-mode .meta-label {
  color: #C0B0A0;
}

.meta-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 1px 2px;
  font-size: 12px;
}

.light-mode .meta-tag {
  background: #E8DDD0;
  color: #990000;
}

.dark-mode .meta-tag {
  background: #3A3430;
  color: #D09080;
}

.story-body {
  padding: 28px 24px 32px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 18px;
  line-height: 1.85;
  white-space: pre-wrap;
}

.light-mode .story-body {
  color: #2A2A2A;
}

.dark-mode .story-body {
  color: #E0D5C5;
}

/* Kudos button */
.kudos-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid;
}

.light-mode .kudos-btn {
  background: white;
  border-color: #990000;
  color: #990000;
}

.light-mode .kudos-btn:hover {
  background: #990000;
  color: white;
}

.dark-mode .kudos-btn {
  background: #2A2420;
  border-color: #BB0000;
  color: #BB0000;
}

.dark-mode .kudos-btn:hover {
  background: #BB0000;
  color: white;
}

/* Config panel */
.config-panel {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.config-panel.collapsed {
  max-height: 0;
  opacity: 0;
}

.config-panel.expanded {
  max-height: 1200px;
  opacity: 1;
}

/* Loading messages */
.loading-msg {
  animation: gentlePulse 2s ease-in-out infinite;
}

/* Image preview overlay */
.image-preview-container {
  position: relative;
}

.image-preview-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
}

.light-mode .image-preview-container::after {
  box-shadow: inset 0 0 40px rgba(245, 237, 224, 0.5);
}

.dark-mode .image-preview-container::after {
  box-shadow: inset 0 0 40px rgba(26, 20, 16, 0.5);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

.light-mode ::-webkit-scrollbar-track {
  background: #F5EDE0;
}

.light-mode ::-webkit-scrollbar-thumb {
  background: #D4C5B0;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: #1E1914;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #4A4035;
  border-radius: 4px;
}

/* Copy notification */
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.copy-toast.show {
  transform: translateX(-50%) translateY(0);
}

.light-mode .copy-toast {
  background: #333;
  color: white;
}

.dark-mode .copy-toast {
  background: #F5EDE0;
  color: #1A1410;
}