/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  min-height: 100vh;
  color: #333;
}

/* Header with Gradient */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

.header-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 28px;
  font-weight: 300;
  color: white;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.logo span {
  font-weight: 700;
  background: linear-gradient(to right, #fff, #ffd6e7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav {
  display: flex;
  gap: 15px;
}

.nav {
  align-items: center;
}

.nav-btn {
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  color: rgba(255,255,255,0.85);
  border: none;
  background: rgba(255,255,255,0.1);
}

.nav-btn.active {
  background: white;
  color: #764ba2;
  box-shadow: 0 4px 15px rgba(255,255,255,0.3);
}

.nav-btn:hover:not(.active) {
  background: rgba(255,255,255,0.2);
  color: white;
  transform: translateY(-2px);
}

/* Dark Mode Toggle Button */
.dark-mode-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 5px;
}

.dark-mode-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.dark-mode-btn svg {
  width: 18px;
  height: 18px;
  color: white;
}

/* Main Content */
.main {
  padding: 40px 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.page-title {
  font-size: 20px;
  font-weight: 400;
  color: #666;
  margin-bottom: 25px;
  font-style: italic;
}

.page-title span {
  font-style: normal;
  color: #764ba2;
  font-weight: 600;
}

/* Letter Layout */
.letter-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
}

@media (max-width: 768px) {
  .letter-layout {
    grid-template-columns: 1fr;
  }
}

/* Letter Section */
.letter-section {
  flex: 1;
}

.letter-box {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  padding: 35px;
  transition: box-shadow 0.3s ease;
}

.letter-box:hover {
  box-shadow: 0 15px 50px rgba(0,0,0,0.12);
}

/* Letter Subject Input */
.letter-subject {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #764ba2;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
  background: transparent;
}

.letter-subject:focus {
  border-bottom-color: #764ba2;
}

.letter-subject::placeholder {
  color: #764ba2;
  opacity: 0.4;
}

.letter-textarea {
  width: 100%;
  min-height: 320px;
  border: none;
  outline: none;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 18px;
  line-height: 2;
  resize: vertical;
  color: #444;
  letter-spacing: 0.2px;
}

.letter-textarea::placeholder {
  color: #d0cdd6;
  font-style: italic;
}

/* Attachment Section */
.attachment-section {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 2px solid #f0f0f0;
}

.attachment-dropzone {
  border: 2px dashed #d0d0d0;
  border-radius: 12px;
  padding: 35px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #fafafa;
}

.attachment-dropzone:hover,
.attachment-dropzone.dragover {
  border-color: #764ba2;
  background: linear-gradient(135deg, #f5f0ff 0%, #fff0f5 100%);
  transform: scale(1.01);
}

.dropzone-content {
  pointer-events: none;
}

.dropzone-icon {
  width: 45px;
  height: 45px;
  color: #aaa;
  margin-bottom: 12px;
}

.attachment-dropzone:hover .dropzone-icon {
  color: #764ba2;
}

.dropzone-content p {
  color: #888;
  margin-bottom: 15px;
  font-size: 15px;
}

.browse-btn {
  pointer-events: auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
}

.browse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
}

/* File Previews */
.file-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.file-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  aspect-ratio: 1;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.file-preview:hover {
  transform: scale(1.05);
}

.file-preview img,
.file-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-preview .remove-file {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.file-preview .remove-file:hover {
  background: #e74c3c;
  transform: scale(1.1);
}

.file-preview .file-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 20px 10px 8px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview .file-size {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

.file-preview .file-no-email {
  display: block;
  font-size: 9px;
  color: #ffc107;
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.file-preview.over-email-limit {
  outline: 2px solid rgba(255, 193, 7, 0.6);
  outline-offset: -2px;
}

/* File Warning Popup */
.file-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.file-warning-overlay.show {
  opacity: 1;
}

.file-warning-modal {
  background: white;
  padding: 35px;
  border-radius: 16px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
  animation: modalSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.file-warning-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffc107 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.file-warning-icon svg {
  width: 28px;
  height: 28px;
  color: #856404;
}

.file-warning-modal h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 20px;
}

.file-warning-modal p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.file-warning-close {
  margin-top: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-warning-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
}

/* Dark mode file warning */
body.dark-mode .file-warning-modal {
  background: #1e1432;
  border: 1px solid rgba(118, 75, 162, 0.3);
}

body.dark-mode .file-warning-modal h3 {
  color: #e0d0f0;
}

body.dark-mode .file-warning-modal p {
  color: #9080a8;
}

/* Letter Footer */
.letter-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.word-count {
  color: #999;
  font-size: 14px;
  font-weight: 500;
}

/* Options Sidebar */
.options-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-label {
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

/* Delivery Buttons */
.delivery-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.delivery-btn {
  padding: 10px 16px;
  border: none;
  background: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  color: #666;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.delivery-btn:hover {
  background: #ede5f5;
  color: #764ba2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.15);
}

.delivery-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
}

/* Test button special styling */
.delivery-btn.test-btn {
  background: #fff3cd;
  color: #856404;
}

.delivery-btn.test-btn:hover {
  background: #ffe69c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.delivery-btn.test-btn.active {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #000;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.5);
}

/* Custom Date Picker Section */
.custom-date-section {
  margin-top: 5px;
}

.custom-date-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.custom-date-toggle svg {
  width: 18px;
  height: 18px;
  color: #aaa;
  transition: color 0.3s ease;
}

.custom-date-toggle:hover {
  color: #764ba2;
  background: #e8e0f0;
}

.custom-date-toggle:hover svg {
  color: #764ba2;
}

.custom-date-toggle.active {
  color: #764ba2;
  background: #e8e0f0;
}

.custom-date-picker {
  margin-top: 12px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f6ff 0%, #fff5f8 100%);
  border-radius: 10px;
  border: 1px solid #e8e0f0;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.date-picker-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #764ba2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.custom-date-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

.custom-date-input:focus {
  outline: none;
  border-color: #764ba2;
  box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.1);
}

.date-picker-clear {
  margin-top: 10px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-picker-clear:hover {
  background: #e74c3c;
  color: white;
}

/* Email Input */
.email-input-wrapper {
  position: relative;
}

.email-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #aaa;
}

.email-input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.email-input:focus {
  outline: none;
  border-color: #764ba2;
  box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.1);
}

/* Animated Rainbow Send Button */
.send-button {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c, #fad0c4, #667eea);
  background-size: 300% 300%;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: gradientShift 4s ease infinite;
  box-shadow: 0 6px 25px rgba(118, 75, 162, 0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.send-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(118, 75, 162, 0.5);
  animation: gradientShift 2s ease infinite;
}

.send-button:active {
  transform: translateY(-1px);
}

.send-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  animation: none;
}

/* Delivery Info */
.delivery-info {
  text-align: center;
  font-size: 14px;
  color: #888;
  line-height: 1.7;
  padding: 15px;
  background: linear-gradient(135deg, #f5f0ff 0%, #fff0f5 100%);
  border-radius: 10px;
}

.delivery-info strong {
  color: #764ba2;
  display: block;
  margin-top: 5px;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: white;
  padding: 45px;
  border-radius: 20px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  animation: modalSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
}

@keyframes modalSlide {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Launch Animation */
.launch-animation {
  padding: 20px 0;
}

.launch-animation.hidden {
  display: none;
}

.launch-scene {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}

.launch-globe {
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  animation: globeAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes globeAppear {
  0% { transform: translateX(-50%) scale(0) rotate(-30deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

.launch-plane {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-30%) rotate(-25deg) scale(0);
  animation:
    planeAppear 0.4s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    planeLaunch 0.8s 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: 2;
}

@keyframes planeAppear {
  0% { transform: translateX(-30%) rotate(-25deg) scale(0); }
  100% { transform: translateX(-30%) rotate(-25deg) scale(1); }
}

@keyframes planeLaunch {
  0% {
    top: 55px;
    left: 50%;
    transform: translateX(-30%) rotate(-25deg) scale(1);
    opacity: 1;
  }
  25% {
    top: 40px;
    left: 45%;
    transform: translateX(-30%) rotate(5deg) scale(1.1);
    opacity: 1;
  }
  100% {
    top: -60px;
    left: -30%;
    transform: translateX(-30%) rotate(10deg) scale(0.5);
    opacity: 0;
  }
}

/* Globe subtle pulse after plane launches */
.launch-globe {
  animation:
    globeAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    globeReact 0.4s 1.2s ease-out forwards;
}

@keyframes globeReact {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(0.92); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Sparkle trail */
.sparkle-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  box-shadow: 0 0 8px 2px rgba(240, 147, 251, 0.6);
}

.sparkle.s1 {
  top: 50px; left: 45%;
  animation: sparkleTrail 0.6s 1.3s ease-out forwards;
  background: #f093fb;
}
.sparkle.s2 {
  top: 60px; left: 50%;
  animation: sparkleTrail 0.5s 1.4s ease-out forwards;
  background: #667eea;
  width: 4px; height: 4px;
}
.sparkle.s3 {
  top: 45px; left: 40%;
  animation: sparkleTrail 0.7s 1.35s ease-out forwards;
  background: white;
  width: 5px; height: 5px;
}
.sparkle.s4 {
  top: 55px; left: 48%;
  animation: sparkleTrail 0.5s 1.45s ease-out forwards;
  background: #f093fb;
  width: 3px; height: 3px;
}
.sparkle.s5 {
  top: 40px; left: 42%;
  animation: sparkleTrail 0.6s 1.5s ease-out forwards;
  background: #764ba2;
  width: 4px; height: 4px;
}
.sparkle.s6 {
  top: 50px; left: 52%;
  animation: sparkleTrail 0.55s 1.55s ease-out forwards;
  background: white;
  width: 3px; height: 3px;
}
.sparkle.s7 {
  top: 35px; left: 38%;
  animation: sparkleTrail 0.65s 1.6s ease-out forwards;
  background: #667eea;
  width: 5px; height: 5px;
}

@keyframes sparkleTrail {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.5) translate(-8px, -10px);
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(-20px, -30px);
  }
}

.launch-text {
  color: #764ba2;
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  animation: textFadeIn 0.5s 0.8s ease forwards;
  letter-spacing: 0.5px;
}

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

/* Confirmation (after animation) */
.modal-confirmation {
  display: none;
  opacity: 0;
}

.modal-confirmation.show {
  display: block;
  animation: confirmFadeIn 0.5s ease forwards;
}

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

.confirm-check {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 8px 25px rgba(150, 230, 161, 0.4);
}

.confirm-check svg {
  width: 30px;
  height: 30px;
  color: #2d8f3c;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 0.4s 0.2s ease forwards;
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.modal-content h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 24px;
}

.modal-content p {
  color: #666;
  margin-bottom: 10px;
}

.modal-date {
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px !important;
}

.modal-note {
  font-size: 13px;
  color: #888 !important;
  background: #f8f8f8;
  padding: 12px 15px;
  border-radius: 10px;
  margin-bottom: 25px !important;
  border-left: 3px solid #764ba2;
}

.modal-close {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 35px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
}

.modal-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
}

/* Loading state */
.send-button.loading {
  position: relative;
  color: transparent;
  animation: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.send-button.loading::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
}

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

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #764ba2;
}

/* Overdue Email Notification */
.overdue-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(118, 75, 162, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  font-weight: 500;
}

.overdue-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.overdue-notification svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ===== DARK MODE (Global) ===== */

body.dark-mode {
  background: linear-gradient(135deg, #1e0f32 0%, #140a28 100%);
  color: #d0c0e0;
  position: relative;
}

body.dark-mode::before {
  content: 'futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego futuroego';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  line-height: 2.2;
  letter-spacing: 8px;
  word-spacing: 40px;
  color: rgba(118, 75, 162, 0.08);
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
}

body.dark-mode .main {
  position: relative;
  z-index: 1;
}

body.dark-mode .page-title {
  color: #9080a8;
}

body.dark-mode .page-title span {
  color: #b090d0;
}

/* Dark mode - Letter box */
body.dark-mode .letter-box {
  background: rgba(40, 25, 65, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  border: 1px solid rgba(118, 75, 162, 0.15);
}

body.dark-mode .letter-box:hover {
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

body.dark-mode .letter-subject {
  color: #c8a0e8;
}

body.dark-mode .letter-subject::placeholder {
  color: #c8a0e8;
  opacity: 0.5;
}

body.dark-mode .letter-subject:focus {
  border-bottom-color: #764ba2;
}

body.dark-mode .letter-textarea {
  color: #c0b0d8;
  background: transparent;
}

body.dark-mode .letter-textarea::placeholder {
  color: rgba(192, 176, 216, 0.4);
}

body.dark-mode .letter-footer {
  border-top-color: rgba(118, 75, 162, 0.15);
}

body.dark-mode .word-count {
  color: #8070a0;
}

/* Dark mode - Attachment section */
body.dark-mode .attachment-section {
  border-top-color: rgba(118, 75, 162, 0.15);
}

body.dark-mode .attachment-dropzone {
  background: rgba(255,255,255,0.03);
  border-color: rgba(118, 75, 162, 0.25);
}

body.dark-mode .attachment-dropzone:hover,
body.dark-mode .attachment-dropzone.dragover {
  border-color: #764ba2;
  background: rgba(118, 75, 162, 0.1);
}

body.dark-mode .dropzone-content p {
  color: #8070a0;
}

body.dark-mode .dropzone-icon {
  color: #8070a0;
}

body.dark-mode .attachment-dropzone:hover .dropzone-icon {
  color: #b090d0;
}

/* Dark mode - Sidebar */
body.dark-mode .option-label {
  color: #b8a0d0;
}

body.dark-mode .delivery-btn {
  background: rgba(255,255,255,0.06);
  color: #b8a0d0;
}

body.dark-mode .delivery-btn:hover {
  background: rgba(118, 75, 162, 0.2);
  color: #d0b8e8;
}

body.dark-mode .delivery-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

body.dark-mode .delivery-btn.test-btn {
  background: rgba(255, 193, 7, 0.1);
  color: #f0d060;
}

body.dark-mode .delivery-btn.test-btn:hover {
  background: rgba(255, 193, 7, 0.2);
}

body.dark-mode .delivery-btn.test-btn.active {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #000;
}

body.dark-mode .custom-date-toggle {
  background: rgba(255,255,255,0.06);
  color: #8070a0;
}

body.dark-mode .custom-date-toggle:hover,
body.dark-mode .custom-date-toggle.active {
  background: rgba(118, 75, 162, 0.2);
  color: #b090d0;
}

body.dark-mode .custom-date-toggle svg {
  color: #8070a0;
}

body.dark-mode .custom-date-toggle:hover svg,
body.dark-mode .custom-date-toggle.active svg {
  color: #b090d0;
}

body.dark-mode .custom-date-picker {
  background: rgba(118, 75, 162, 0.1);
  border-color: rgba(118, 75, 162, 0.2);
}

body.dark-mode .date-picker-label {
  color: #b090d0;
}

body.dark-mode .custom-date-input {
  background: rgba(40, 25, 65, 0.6);
  border-color: rgba(118, 75, 162, 0.25);
  color: #d0c0e0;
}

body.dark-mode .custom-date-input:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.15);
}

body.dark-mode .email-input {
  background: rgba(40, 25, 65, 0.6);
  border-color: rgba(118, 75, 162, 0.25);
  color: #d0c0e0;
}

body.dark-mode .email-input:focus {
  border-color: #764ba2;
  box-shadow: 0 0 0 4px rgba(118, 75, 162, 0.15);
}

body.dark-mode .email-input::placeholder {
  color: #6a5a80;
}

body.dark-mode .email-icon {
  color: #6a5a80;
}

body.dark-mode .delivery-info {
  background: rgba(118, 75, 162, 0.1);
  color: #9080a8;
}

body.dark-mode .delivery-info strong {
  color: #b090d0;
}

/* Dark mode - Modal */
body.dark-mode .modal-content {
  background: #1e1432;
  border: 1px solid rgba(118, 75, 162, 0.3);
}

body.dark-mode .modal-content h2 {
  color: #e0d0f0;
}

body.dark-mode .modal-content p {
  color: #9080a8;
}

body.dark-mode .modal-note {
  background: rgba(118, 75, 162, 0.1);
  color: #9080a8 !important;
}

body.dark-mode .launch-text {
  color: #c8a0e8;
}

body.dark-mode .confirm-check {
  background: linear-gradient(135deg, #3a7d44 0%, #2d8f3c 100%);
  box-shadow: 0 8px 25px rgba(45, 143, 60, 0.3);
}

body.dark-mode .confirm-check svg {
  color: #b8f0c0;
}

/* Dark mode - Scrollbar */
body.dark-mode::-webkit-scrollbar-track {
  background: #1a0e2e;
}

body.dark-mode::-webkit-scrollbar-thumb {
  background: rgba(118, 75, 162, 0.5);
}