#tool {
  background: transparent;
  color: #332e29;
}

#tool #particles-js,
#tool .about-section {
  display: none !important;
}

#tool .main-content {
  display: grid;
  gap: 24px;
  padding: 28px;
}

#tool .hero-section {
  min-height: 0;
  padding: 0;
  display: block;
  text-align: left;
}

#tool .hero-content,
#tool .history-container {
  width: 100%;
  max-width: none;
  background: #ffffff;
  border: 1px solid #e6dfd4;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 40px rgba(51, 46, 41, 0.08);
}

#tool .hero-title,
#tool .section-title,
#tool .result-title {
  font-family: 'Noto Serif SC', serif;
  color: #332e29;
  text-shadow: none;
  animation: none;
}

#tool .hero-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 12px;
}

#tool .hero-subtitle {
  margin-bottom: 20px;
  color: #6e6458;
  font-size: 1rem;
  line-height: 1.7;
}

#tool .wish-container {
  max-width: none;
  margin-bottom: 16px;
}

#tool #wishText {
  min-height: 108px;
  padding: 16px 18px;
  border: 1px solid #d8cfbf;
  border-radius: 18px;
  background: #faf7f1;
  backdrop-filter: none;
  color: #332e29;
  box-shadow: inset 0 1px 2px rgba(51, 46, 41, 0.04);
}

#tool #wishText:focus {
  border-color: #9d2932;
  box-shadow: 0 0 0 4px rgba(157, 41, 50, 0.08);
}

#tool #wishText::placeholder {
  color: #9a9084;
}

#tool .wish-counter,
#tool .draw-hint,
#tool .history-date,
#tool .history-wish,
#tool .details-text,
#tool .source-text {
  color: #8d8377;
}

#tool .draw-section {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

#tool .draw-button {
  width: 100%;
  max-width: 280px;
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #9d2932 0%, #b6454e 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(157, 41, 50, 0.18);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

#tool .draw-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(157, 41, 50, 0.22);
}

#tool .btn-glow {
  display: none;
}

#tool .history-section {
  display: block !important;
  padding: 0;
  max-width: none;
  margin: 0;
}

#tool .section-title {
  margin-bottom: 18px;
  font-size: 1.6rem;
  text-align: left;
}

#tool .history-list {
  gap: 12px;
  margin-bottom: 18px;
}

#tool .history-item {
  background: #faf7f1;
  border: 1px solid #ebe2d6;
  border-radius: 16px;
  padding: 16px;
}

#tool .history-item:hover {
  background: #f6f0e7;
  border-color: #dcc7b4;
}

#tool .history-header {
  gap: 12px;
}

#tool .history-result,
#tool .sign-number,
#tool .detail-section h4,
#tool .modal-header h3,
#tool .share-preview h4 {
  color: #9d2932;
}

#tool .clear-history-btn {
  margin: 0;
  padding: 12px 18px;
  background: #332e29;
  color: #ffffff;
  border-radius: 14px;
}

#tool .clear-history-btn:hover {
  background: #4b453e;
  transform: none;
}

#tool .result-section,
#shareModal.modal {
  background: rgba(51, 46, 41, 0.72);
  backdrop-filter: blur(10px);
}

#tool .result-container,
#shareModal .modal-content {
  background: #ffffff;
  border: 1px solid #e6dfd4;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(26, 26, 46, 0.16);
}

#tool .result-header,
#shareModal .modal-header {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee7dc;
}

#tool .close-btn,
#shareModal .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f6efe6;
  color: #8f4b52;
}

#tool .close-btn:hover,
#shareModal .modal-close:hover {
  color: #9d2932;
  background: #efe5da;
}

#tool .sign-card {
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px;
  background: #faf7f1;
  border: 1px solid #ebe2d6;
  border-radius: 18px;
}

#tool .sign-image {
  width: 120px;
  height: 160px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6dfd4;
  box-shadow: none;
}

#tool .sign-number {
  margin-bottom: 8px;
  font-size: 1rem;
}

#tool .sign-number .number {
  font-size: 2rem;
}

#tool .sign-name {
  color: #332e29;
  font-size: 1.5rem;
}

#tool .sign-details {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

#tool .detail-section {
  margin-bottom: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #ece6dc;
  border-left: 1px solid #ece6dc;
  border-radius: 16px;
}

#tool .detail-section p,
#tool .annotate-text,
#tool .explain-text,
#tool .share-preview p,
#tool .share-preview small {
  color: #5f5549;
}

#tool .result-actions,
#shareModal .share-options {
  gap: 10px;
}

#tool .action-btn,
#shareModal .share-option {
  padding: 12px 16px;
  border: 1px solid #9d2932;
  background: #ffffff;
  color: #9d2932;
  border-radius: 14px;
  box-shadow: none;
}

#tool .action-btn:hover,
#shareModal .share-option:hover {
  background: #9d2932;
  color: #ffffff;
  transform: none;
}

#tool .save-btn {
  background: #9d2932;
  color: #ffffff;
}

#tool .share-btn {
  background: #f8f2ea;
}

#shareModal .share-preview {
  background: #faf7f1;
  border-radius: 16px;
  margin-bottom: 16px;
}

#toast.toast {
  background: #332e29;
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(51, 46, 41, 0.18);
}

@media (max-width: 768px) {
  #tool .main-content {
    padding: 18px;
    gap: 18px;
  }

  #tool .hero-content,
  #tool .history-container,
  #tool .result-container,
  #shareModal .modal-content {
    padding: 18px;
    border-radius: 20px;
  }

  #tool .draw-section {
    align-items: stretch;
  }

  #tool .draw-button,
  #tool .action-btn,
  #shareModal .share-option,
  #tool .clear-history-btn {
    width: 100%;
    max-width: none;
  }

  #tool .result-actions,
  #shareModal .share-options {
    flex-direction: column;
  }

  #tool .sign-card {
    gap: 14px;
    padding: 14px;
  }
}