:root {
  --bg-page: #FFFFEE;
  --bg-post: #D6DAF0;
  --bg-reply: #D6DAF0;
  --bg-op: #D6DAF0;
  --border-post: #B7C5D9;
  --text-main: #000;
  --text-name: #117743;
  --text-subject: #CC1105;
  --text-postnum: #000;
  --text-date: #000;
  --greentext: #789922;
  --quote-link: #D00;
  --link-color: #34345C;
  --bg-header: #AFD0F6;
  --bg-header-border: #3F6B9E;
  --bg-input: #fff;
  --bg-button: #F0E0D6;
  --bg-button-hover: #DCDCDC;
  --bg-modal-overlay: rgba(0, 0, 0, 0.6);
  --bg-faq: #F0E0D6;
  --border-faq: #D9BFB7;
}

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

body {
  background: var(--bg-page);
  font-family: arial, helvetica, sans-serif;
  font-size: 13.333px;
  color: var(--text-main);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
  background: #B7C5D9;
  border-radius: 2px;
}

/* Animations */
@keyframes highlight-post {
  0% { background-color: #FFEEBB; }
  100% { background-color: var(--bg-reply); }
}

@keyframes pulse-loading {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

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

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.post-highlight {
  animation: highlight-post 2s ease-out forwards;
}

.loading-pulse {
  animation: pulse-loading 1.5s ease-in-out infinite;
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.modal-animate {
  animation: modalIn 0.2s ease-out forwards;
}

/* Post hover */
.post-card:hover {
  filter: brightness(0.97);
}

/* Greentext */
.greentext {
  color: var(--greentext);
}

/* Quote links */
.quote-link {
  color: var(--quote-link);
  text-decoration: underline;
  cursor: pointer;
  font-weight: normal;
}
.quote-link:hover {
  color: #FF0000;
}

/* Image thumbnail */
.post-image {
  max-width: 250px;
  max-height: 250px;
  cursor: pointer;
  display: block;
  margin: 4px 0;
  border: 1px solid #ccc;
}
.post-image:hover {
  opacity: 0.85;
}

.post-image-expanded {
  max-width: 100%;
  max-height: 80vh;
  cursor: pointer;
  display: block;
  margin: 4px 0;
  border: 1px solid #ccc;
}

/* FAQ toggle */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-answer.open {
  max-height: 300px;
  padding: 8px 12px 12px;
}