/* =======================================
   引入匯文明朝體
   ======================================= */
@font-face {
  font-family: 'HuWenMingChaoTi';
  src: url('../fonts/HuWenMingChaoTi.woff2') format('woff2'),
    url('../fonts/HuWenMingChaoTi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* =======================================
     骨架載入動畫
     ======================================= */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-line {
  height: 1.2rem;
  margin-bottom: 0.8rem;
  width: 100%;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 80%;
}

body.dark-mode .skeleton {
  background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
  background-size: 200% 100%;
}

/* =======================================
     全局樣式 & Sticky Footer Setup
     ======================================= */
html {
  height: 100%;
  overflow: hidden;
  /* MODIFIED: Prevent scroll on html */
}

body {
  font-family: 'HuWenMingChaoTi', "Noto Serif TC", serif;
  color: #333;
  margin: 0;
  padding: 0;
  line-height: 1.7;
  background-image: url('../img/bg.webp');
  /* DO NOT CHANGE THIS PATH */
  background-color: #f9f5e7;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Keep fixed background */
  height: 100%;
  /* MODIFIED: Make body strictly 100% height */
  overflow: hidden;
  /* MODIFIED: Prevent scroll on body */
  /* --- Sticky Footer --- */
  display: flex;
  flex-direction: column;
  /* --- End Sticky Footer --- */
}

/* Header Styles */
header {
  display: flex;
  justify-content: center;
  /* Center the .header-center-content div */
  align-items: center;
  padding: 0.8rem 1rem;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  position: relative;
  /* Keep relative for dark mode button positioning */
  min-height: 50px;
  /* Keep min-height */
  flex-shrink: 0;
  /* Prevent header from shrinking */
  z-index: 10;
  /* Ensure header is above main content scrolling */
}

/* Container for H1 and Gaokao Button */
.header-center-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Main content area - takes remaining space */
main {
  /* --- Sticky Footer --- */
  flex-grow: 1;
  /* Allow main to grow and push footer down */
  /* --- End Sticky Footer --- */
  padding: 1rem 0;
  /* Keep vertical padding */
  margin: 0;
  width: 100%;
  overflow: hidden;
  /* MODIFIED: CRITICAL - Contain the layout container */
  position: relative;
  /* Needed for absolute positioning context if children require it */
  display: flex;
  /* MODIFIED: Make main a flex container to center layout-container */
  justify-content: center;
  /* Center layout-container horizontally */
  box-sizing: border-box;
}

/* NEW: Layout Container for Left/Right Split */
#layout-container {
  display: flex;
  flex-direction: row;
  /* Columns side-by-side */
  gap: 1rem;
  /* Space between columns */
  width: 100%;
  height: 100%;
  /* MODIFIED: Fill the height constrained by main */
  max-width: 1300px;
  /* Adjust max-width for two columns */
  /* margin: 0 auto; */
  /* Centered by main's flex */
  padding: 0 1rem;
  /* Keep horizontal padding */
  box-sizing: border-box;
  /* overflow: hidden; */
  /* Removed: Let columns handle their overflow */
}

/* NEW: Left and Right Columns */
#left-column,
#right-column {
  flex: 4;
  /* Left column wider */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  gap: 1rem;
  /* Space between items inside the column */
  overflow-y: auto;
  /* CRITICAL: Enable vertical scrolling */
  overflow-x: hidden;
  /* Prevent horizontal scrolling within column */
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  box-sizing: border-box;
  /* height: 100%; */
  /* MODIFIED: Removed, let flexbox determine height within layout-container */
  min-height: 0;
  /* MODIFIED: CRITICAL Flexbox scroll fix */
}

#right-column {
  flex: 3;
  /* Right column */
  /* min-height: 0; already applied */
}

/* Adjustments for sections moved into columns */
#gaokao-type-menu,
#gaokao-year-menu {
  flex-shrink: 0;
  /* Prevent menus from shrinking too much */
}

#gaokao-question {
  flex-grow: 1;
  /* Allow question area to take remaining space */
  /* min-height: 0; Added implicitly by being a flex item inside a column needing min-height 0 */
  /* Style remains */
  padding: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.8;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Keep specific background/border styles */
#gaokao-type-menu {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  padding: 0.8rem;
  border-radius: 8px;
}

#gaokao-year-menu {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  padding: 0.8rem;
  border-radius: 8px;
}

/* #gaokao-question handled above */
#dialogue-input-area {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ddd;
}

#gaokao-actions {
  background: none;
  border: none;
  text-align: center;
  padding: 0.5rem 0 0 0;
  flex-shrink: 0;
}


footer {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  margin-top: 0;
  /* Removed margin-top, main grows to fill space */
  flex-shrink: 0;
  /* Prevent footer from shrinking */
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
  /* Ensure footer is above potentially overflowing content */
}

/* H1 style */
h1 {
  font-size: 1.6rem;
  margin: 0;
  color: #4a4a4a;
  white-space: nowrap;
}

/* Ghibli Style for #gaokao-btn */
#gaokao-btn {
  font-size: 1.0rem;
  padding: 0.7rem 1.3rem;
  margin: 0;
  white-space: nowrap;
  border-radius: 20px;
  border: 1px solid transparent;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  background-color: #a0d2db;
  color: #333;
  border-color: #8ec5ce;
}

#gaokao-btn:hover {
  background-color: #8ec5ce;
}

#gaokao-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dark Mode Moon Button - Absolute Position Top Right */
#toggle-dark-btn {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  color: inherit;
}

/* =======================================
     夜晚模式
     ======================================= */
body.dark-mode {
  background-image: none;
  background-color: #1a1a1a;
  color: #f0f0f0;
}

body.dark-mode header,
body.dark-mode footer {
  background-color: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(5px);
  color: #f0f0f0;
}

body.dark-mode h1 {
  color: #e0e0e0;
}

body.dark-mode #toggle-dark-btn {
  color: #f0f0f0;
}

/* Update background for columns and menus/sections in dark mode */
body.dark-mode #left-column,
body.dark-mode #right-column {
  background-color: rgba(42, 42, 42, 0.75);
  /* Darker tint for columns */
}

body.dark-mode #gaokao-type-menu,
body.dark-mode #gaokao-year-menu,
body.dark-mode #gaokao-question,
body.dark-mode #dialogue-input-area {
  background: rgba(50, 50, 50, 0.85);
  /* Slightly darker internal sections */
  border-color: #444;
  color: #f0f0f0;
}

/* Keep actions area transparent */
body.dark-mode #gaokao-actions {
  background: none;
  border: none;
}

body.dark-mode button {
  background-color: #3a3a3a;
  color: #e0e0e0;
  border: 1px solid #555;
}

body.dark-mode button:hover {
  background-color: #4a4a4a;
  border-color: #666;
}

body.dark-mode #submit-answer-btn,
body.dark-mode #reference-answer-btn,
body.dark-mode #ai-answer-btn,
body.dark-mode #gaokao-btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

body.dark-mode #submit-answer-btn {
  background-color: #506a4c;
  border-color: #6a896b;
  color: #f0f0f0;
}

body.dark-mode #reference-answer-btn {
  background-color: #6a7e8a;
  border-color: #8aa2b0;
  color: #f0f0f0;
}

body.dark-mode #ai-answer-btn {
  background-color: #a16a3f;
  border-color: #bd8e6b;
  color: #f0f0f0;
}

body.dark-mode #gaokao-btn {
  background-color: #6a7e8a;
  border-color: #8aa2b0;
  color: #f0f0f0;
}

body.dark-mode #gaokao-btn:hover {
  background-color: #5a6c82;
}

/* Dark mode Menu buttons (general rules already cover most, adjust specifics if needed) */
body.dark-mode #gaokao-type-menu button {
  background-color: #4b4b63;
  border-color: #60607a;
  color: #e0e0e0;
}

body.dark-mode #gaokao-year-menu button {
  background-color: #5a4a5a;
  border-color: #705f70;
  color: #e0e0e0;
}

body.dark-mode #gaokao-type-menu button:hover {
  background-color: #5a5a72;
}

body.dark-mode #gaokao-year-menu button:hover {
  background-color: #695969;
}

body.dark-mode #userAnswer {
  background-color: #333;
  color: #f0f0f0;
  border-color: #555;
}

body.dark-mode #messages {
  background: #2e2e2e;
  border-color: #444;
}

/* Keep messages background distinct */
body.dark-mode #messages .user-message {
  background-color: #3a5a70;
  color: #f0f0f0;
}

body.dark-mode #messages .ai-message {
  background-color: #4a4a4a;
  color: #f0f0f0;
}

body.dark-mode .thinking-message {
  color: #bbb;
}

/* Add scrollbar styling for columns in dark mode */
body.dark-mode #left-column,
body.dark-mode #right-column {
  scrollbar-color: #555 #2a2a2a;
}

body.dark-mode #left-column::-webkit-scrollbar,
body.dark-mode #right-column::-webkit-scrollbar {
  width: 8px;
}

body.dark-mode #left-column::-webkit-scrollbar-track,
body.dark-mode #right-column::-webkit-scrollbar-track {
  background: #2a2a2a;
}

body.dark-mode #left-column::-webkit-scrollbar-thumb,
body.dark-mode #right-column::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
  border: 2px solid #2a2a2a;
}


/* =======================================
     一般按鈕樣式 (用於菜單按鈕等)
     ======================================= */
#gaokao-type-menu button,
#gaokao-year-menu button {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  margin: 0;
  /* Remove margin, rely on flex gap */
  font-family: inherit;
}

#gaokao-type-menu button:hover,
#gaokao-year-menu button:hover {
  background: #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#gaokao-type-menu button:active,
#gaokao-year-menu button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* =======================================
     二級目錄：題型菜單 (Within Left Column)
     ======================================= */
#gaokao-type-menu {
  display: flex;
  flex-wrap: wrap;
  /* Allow items to wrap onto the next line */
  justify-content: center;
  /* Center items */
  gap: 0.5rem;
  /* Spacing between buttons */
  /* Padding/BG/Border set above */
  flex-shrink: 0;
  /* Prevent shrinking */
}

#gaokao-type-menu button {
  /* Specific styles for type menu buttons */
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  background-color: #e6e6fa;
  border: 1px solid #c9c9e3;
  color: #333;
  flex-shrink: 0;
  white-space: nowrap;
}

#gaokao-type-menu button:hover {
  background-color: #d8d8f0;
}

/* =======================================
     三級目錄：年份列表 (Within Left Column)
     ======================================= */
#gaokao-year-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  /* Padding/BG/Border set above */
  flex-shrink: 0;
  /* Prevent shrinking */
}

#gaokao-year-menu button {
  /* Specific styles for year menu buttons */
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  background-color: #d8bfd8;
  border: 1px solid #c1acc1;
  color: #333;
  flex-shrink: 0;
}

#gaokao-year-menu button:hover {
  background-color: #c8aec8;
}

/* =======================================
     題目顯示區 (Within Left Column) - Styles moved up for clarity */
#gaokao-question h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #555;
}

#gaokao-question p {
  margin-bottom: 0.8em;
}

#gaokao-question strong {
  color: #0056b3;
  margin-right: 5px;
}

#gaokao-question .formatted-line {
  display: block;
  margin-bottom: 0.3em;
}


/* =======================================
     對話與輸入區域 (Within Right Column)
     ======================================= */
#dialogue-input-area {
  padding: 1rem;
  /* Background/border set above */
  display: flex;
  /* Use flex to manage internal elements */
  flex-direction: column;
  /* Stack messages and textarea */
  flex-grow: 1;
  /* Allow this area to take most space in right column */
  overflow: hidden;
  /* Prevent this section itself from scrolling */
  min-height: 0;
  /* MODIFIED: Add flexbox fix for parent column */
  border-radius: 8px;
  /* Ensure consistency */
}

#messages {
  min-height: 150px;
  /* Keep minimum height */
  flex-grow: 1;
  /* Allow messages to take available vertical space */
  overflow-y: auto;
  /* Scroll messages area */
  margin-bottom: 1rem;
  /* Space between messages and textarea */
  padding: 0.5rem;
  border: none;
  /* Border removed, parent has border */
  background: #f8f9fa;
  /* Slightly different background for chat */
  border-radius: 6px;
  /* Inner radius */
  min-height: 0;
  /* MODIFIED: Ensure messages container can shrink */
}

/* Dark mode messages background override */
body.dark-mode #messages {
  background: #2e2e2e;
}

#messages>div:not(.separator) {
  margin-bottom: 0.8rem;
  padding: 0.8rem 1.2rem;
  border-radius: 15px;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 85%;
  word-wrap: break-word;
}

#messages .user-message {
  background-color: #d1eaff;
  color: #004085;
  margin-left: auto;
  border-bottom-right-radius: 5px;
  text-align: left;
}

#messages .ai-message {
  background-color: #e2e3e5;
  color: #383d41;
  margin-right: auto;
  border-bottom-left-radius: 5px;
  text-align: left;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.thinking-message {
  animation: blink 1.5s linear infinite;
  font-style: italic;
  color: #666;
}

#userAnswer {
  font-size: 1.1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.8rem;
  min-height: 4rem;
  /* Adjusted min-height */
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
  /* Take full width of its container */
  flex-shrink: 0;
  /* Prevent textarea from shrinking excessively */
}

/* =======================================
     底部互動按鈕區 (Within Right Column) - Styles moved up for clarity */
#gaokao-actions button {
  font-size: 1.0rem;
  padding: 0.8rem 1.5rem;
  margin: 0.5rem;
  /* Keep margin between buttons */
  border-radius: 20px;
  border: 1px solid transparent;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#gaokao-actions button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#submit-answer-btn {
  background-color: #87a96b;
  color: white;
  border-color: #79975d;
}

#submit-answer-btn:hover {
  background-color: #79975d;
}

#reference-answer-btn {
  background-color: #a0d2db;
  color: #333;
  border-color: #8ec5ce;
}

#reference-answer-btn:hover {
  background-color: #8ec5ce;
}

#ai-answer-btn {
  background-color: #f4a261;
  color: white;
  border-color: #e09150;
}

#ai-answer-btn:hover {
  background-color: #e09150;
}

/* =======================================
     自定義試題表單
     ======================================= */
#custom-question-form {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1.7;
}

#custom-question-form h2 {
  font-size: 1.5rem;
  margin: 0 0 1.2rem 0;
  color: #555;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
}

.form-group .required {
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: normal;
}

.form-group .optional {
  color: #888;
  font-size: 0.85rem;
  font-weight: normal;
}

.form-group textarea,
.form-group input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.2s;
}

.form-group textarea:focus,
.form-group input[type="number"]:focus {
  outline: none;
  border-color: #87a96b;
  box-shadow: 0 0 0 2px rgba(135, 169, 107, 0.2);
}

.form-group input[type="number"] {
  max-width: 160px;
  resize: none;
}

.form-group.has-error textarea,
.form-group.has-error input[type="number"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

#submit-custom-btn {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: inherit;
  border: none;
  border-radius: 20px;
  background-color: #87a96b;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

#submit-custom-btn:hover {
  background-color: #79975d;
}

#submit-custom-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dark mode for custom form */
body.dark-mode #custom-question-form {
  background: rgba(50, 50, 50, 0.85);
  border-color: #444;
  color: #f0f0f0;
}

body.dark-mode #custom-question-form h2 {
  color: #e0e0e0;
}

body.dark-mode .form-group textarea,
body.dark-mode .form-group input[type="number"] {
  background-color: #333;
  color: #f0f0f0;
  border-color: #555;
}

body.dark-mode .form-group textarea:focus,
body.dark-mode .form-group input[type="number"]:focus {
  border-color: #6a896b;
  box-shadow: 0 0 0 2px rgba(106, 137, 107, 0.3);
}

body.dark-mode .form-group .required {
  color: #e74c3c;
}

body.dark-mode #submit-custom-btn {
  background-color: #506a4c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}


/* =======================================
     響應式設計 (Mobile Optimization)
     ======================================= */
@media (max-width: 768px) {

  /* Allow body scroll on mobile if content overflows */
  html {
    overflow: auto;
    /* MODIFIED: Allow scroll on html for mobile */
  }

  body {
    overflow: auto;
    /* Keep this for mobile */
    height: auto;
    /* MODIFIED: Allow body height to adjust */
    min-height: 100vh;
    /* Keep min-height */
  }

  /* Main takes natural height based on content */
  main {
    padding: 0.5rem 0.5rem;
    /* Add horizontal padding back to main */
    height: auto;
    overflow: visible;
    /* Allow main to overflow if needed */
    flex-grow: 1;
    /* Allow main to grow on mobile too */
    display: block;
    /* Reset display */
  }

  /* Stack columns vertically */
  #layout-container {
    flex-direction: column;
    height: auto;
    /* Allow container height to adjust to content */
    max-width: 100%;
    /* Use full width */
    margin: 0 auto 1rem auto;
    /* Adjust margin, add bottom margin */
    overflow: visible;
    /* Allow container to overflow */
    padding: 0;
    /* Remove horizontal padding from container itself */
  }

  /* Columns take full width and disable independent scroll */
  #left-column,
  #right-column {
    width: 100%;
    flex-basis: auto;
    /* Reset flex basis */
    overflow-y: visible;
    /* Disable independent scroll */
    height: auto;
    /* Allow height to adjust */
    padding: 0.8rem;
    /* Slightly reduce padding */
    margin-bottom: 1rem;
    /* Add space between stacked columns */
    /* Reset flex property for vertical stacking */
    flex: none;
    min-height: auto;
    /* MODIFIED: Reset min-height for mobile */
  }

  /* Remove margin from the last column */
  #right-column {
    margin-bottom: 0;
  }


  /* Responsive Header */
  header {
    padding: 0.5rem;
    justify-content: space-between;
  }

  .header-center-content {
    gap: 0.8rem;
    margin: 0 auto;
    flex-shrink: 1;
    min-width: 0;
    justify-content: center;
  }

  h1 {
    font-size: 1.2rem;
  }

  #gaokao-btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    flex-shrink: 0;
  }

  #toggle-dark-btn {
    font-size: 1.3rem;
    right: 0.5rem;
    top: 0.5rem;
    flex-shrink: 0;
    position: absolute;
    /* Ensure position is kept */
  }


  /* Type menu wrapping on mobile (already wraps, adjust styles if needed) */
  #gaokao-type-menu {
    padding: 0.5rem;
    gap: 0.3rem;
  }

  #gaokao-type-menu button {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
    margin: 0;
  }

  /* Removed margin */

  /* Year menu responsiveness */
  #gaokao-year-menu {
    padding: 0.5rem;
    gap: 0.3rem;
  }

  #gaokao-year-menu button {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    margin: 0;
  }

  /* Removed margin */

  #gaokao-question {
    padding: 1rem;
    font-size: 1rem;
  }

  #gaokao-question h2 {
    font-size: 1.3rem;
  }

  #dialogue-input-area {
    padding: 0.5rem;
  }

  #messages {
    max-height: 40vh;
    /* Limit messages height on mobile */
  }

  #messages>div:not(.separator) {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    max-width: 90%;
  }

  /* Adjust message width */
  #userAnswer {
    font-size: 1rem;
    padding: 0.6rem;
    min-height: 3rem;
  }

  #gaokao-actions button {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    margin: 0.3rem;
  }
}