:root {
  --fc-ink: #18304d;
  --fc-muted: #6f7f91;
  --fc-paper: #fffdf7;
  --fc-teal: #087d75;
  --fc-coral: #ee6b55;
  --fc-gold: #f2b84b;
  --fc-line: rgba(24, 48, 77, 0.14);
  --fc-frame: #315a89;
  --fc-frame-dark: #17325f;
  --fc-shadow: 0 6px 0 var(--fc-frame), 0 22px 48px rgba(34, 61, 91, 0.16);
  --fc-card-shadow: 0 4px 0 rgba(49, 90, 137, 0.24), 0 12px 24px rgba(34, 61, 91, 0.1);
}

.fc-activity-center {
  color: var(--fc-ink);
  display: grid;
  gap: 18px;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
}

.fc-activity-hero,
.fc-live-console,
.fc-template-library,
.fc-activity-editor {
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 184, 75, 0.18), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 240, 0.96));
  border: 3px solid var(--fc-frame);
  border-radius: 28px;
  box-shadow: var(--fc-shadow);
}

.fc-activity-hero {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  overflow: hidden;
  padding: 26px 30px;
  position: relative;
}

.fc-activity-hero::after {
  background: repeating-linear-gradient(135deg, rgba(8, 125, 117, 0.08) 0 8px, transparent 8px 18px);
  content: "";
  height: 130px;
  position: absolute;
  right: -38px;
  top: -42px;
  transform: rotate(8deg);
  width: 180px;
}

.fc-activity-hero h2,
.fc-section-head h3,
.fc-activity-editor h3,
.fc-live-head h3 {
  font-family: "Noto Serif TC", "Songti TC", serif;
  letter-spacing: -0.035em;
  margin: 4px 0 7px;
}

.fc-activity-hero h2 { font-size: clamp(1.75rem, 3vw, 2.7rem); }
.fc-activity-hero p { color: var(--fc-muted); margin: 0; }
.fc-kicker { color: var(--fc-coral); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; }
.fc-hero-actions, .fc-editor-actions, .fc-template-actions, .fc-control-row { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }

.fc-primary-button,
.fc-secondary-button,
.fc-icon-button,
.fc-text-button,
.fc-control-row button,
.fc-add-question,
.fc-add-option {
  align-items: center;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.fc-primary-button { background: var(--fc-teal); border: 1px solid var(--fc-teal); color: white; padding: 10px 18px; box-shadow: 0 8px 20px rgba(8, 125, 117, 0.2); }
.fc-secondary-button { background: white; border: 2px solid var(--fc-frame); color: var(--fc-ink); padding: 10px 16px; box-shadow: 0 3px 0 rgba(49, 90, 137, 0.22); }
.fc-icon-button { background: white; border: 2px solid var(--fc-frame); color: var(--fc-ink); min-width: 44px; padding: 6px; box-shadow: 0 3px 0 rgba(49, 90, 137, 0.22); }
.fc-primary-button:hover:not(:disabled), .fc-secondary-button:hover:not(:disabled), .fc-control-row button:hover:not(:disabled) { transform: translateY(-2px); }
.fc-primary-button:focus-visible, .fc-secondary-button:focus-visible, .fc-icon-button:focus-visible, .fc-control-row button:focus-visible { outline: 3px solid rgba(238, 107, 85, 0.35); outline-offset: 2px; }
.fc-primary-button:disabled, .fc-secondary-button:disabled, .fc-control-row button:disabled { cursor: not-allowed; opacity: 0.45; }

.fc-health-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.fc-health-strip > div { background: rgba(255,255,255,0.88); border: 2px solid rgba(49, 90, 137, 0.24); border-radius: 16px; display: flex; flex-direction: column; padding: 13px 16px; box-shadow: 0 3px 0 rgba(49, 90, 137, 0.13); }
.fc-health-strip span { color: var(--fc-muted); font-size: 0.78rem; }
.fc-health-strip strong { font-size: 1.35rem; }
.fc-health-strip .is-alert { background: #fff2ef; color: #b43f2f; }

.fc-status-banner { border-radius: 14px; font-weight: 800; padding: 12px 16px; }
.fc-status-banner.tone-success { background: #e7f7f1; color: #08685f; }
.fc-status-banner.tone-warning { background: #fff4d5; color: #915b00; }
.fc-status-banner.tone-error { background: #fff0ed; color: #a63a2e; }
.fc-status-banner > span { display: block; font-weight: 600; margin-top: 4px; }
.fc-conflict-actions, .fc-health-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fc-conflict-actions button, .fc-health-actions button { background: white; border: 2px solid currentColor; border-radius: 12px; color: inherit; font: inherit; font-weight: 800; min-height: 44px; padding: 8px 14px; }
.fc-health-detail, .fc-template-preview { background: white; border: 3px solid var(--fc-frame); border-radius: 22px; box-shadow: var(--fc-shadow); padding: 22px; }
.fc-health-detail p { color: var(--fc-muted); }
.fc-diagnostics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fc-diagnostics span { background: #eef7f5; border-radius: 999px; color: var(--fc-teal); font-size: .74rem; padding: 5px 9px; }

.fc-section-head, .fc-activity-editor-head, .fc-live-head, .fc-panel-title { align-items: center; display: flex; justify-content: space-between; gap: 20px; }
.fc-section-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.fc-panel-title .fc-section-actions .fc-secondary-button { min-height: 40px; padding: 7px 12px; }
.fc-template-library, .fc-activity-editor, .fc-live-console { padding: 26px; }
.fc-count-chip { background: var(--fc-ink); border-radius: 999px; color: white; min-width: 34px; padding: 6px 11px; text-align: center; }
.fc-template-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 20px; }
.fc-template-card { background: rgba(255,255,255,0.9); border: 2px solid rgba(49, 90, 137, 0.34); border-radius: 22px; display: flex; flex-direction: column; min-height: 240px; padding: 20px; position: relative; box-shadow: var(--fc-card-shadow); }
.fc-template-card::before { background: var(--fc-gold); border-radius: 6px; content: ""; height: 6px; left: 20px; position: absolute; top: -3px; width: 50px; }
.fc-template-card-top { color: var(--fc-muted); display: flex; font-size: 0.78rem; font-weight: 800; justify-content: space-between; }
.fc-template-card h4 { font-family: "Noto Serif TC", serif; font-size: 1.35rem; margin: 18px 0 8px; }
.fc-template-card p { color: var(--fc-muted); flex: 1; margin: 0 0 16px; }
.fc-template-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.fc-template-tags span { background: #eef7f5; border-radius: 999px; color: var(--fc-teal); font-size: 0.75rem; padding: 4px 9px; }
.fc-template-actions { margin-top: auto; }
.fc-library-tabs { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px; }
.fc-library-tabs button { background: white; border: 2px solid rgba(49, 90, 137, 0.3); border-radius: 999px; color: var(--fc-muted); flex: 0 0 auto; font: inherit; font-weight: 800; min-height: 44px; padding: 8px 15px; }
.fc-library-tabs button.is-active { background: var(--fc-ink); color: white; }
.fc-library-tools { display: grid; gap: 10px; grid-template-columns: minmax(220px, 1fr) minmax(150px, .3fr); margin-top: 12px; }
.fc-library-tools input, .fc-library-tools select { background: white; border: 2px solid rgba(49, 90, 137, 0.28); border-radius: 13px; color: var(--fc-ink); font: inherit; min-height: 44px; padding: 9px 12px; width: 100%; }
.fc-template-preview { position: relative; }
.fc-preview-list { display: grid; gap: 12px; padding-left: 24px; }
.fc-preview-list li { border-bottom: 1px solid var(--fc-line); padding: 10px 0 15px; }
.fc-preview-list li div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fc-preview-list li span { background: #f3f7f6; border-radius: 9px; padding: 6px 9px; }
.fc-activity-history { border-top: 1px solid var(--fc-line); margin-top: 26px; padding-top: 20px; }
.fc-history-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 12px; }
.fc-history-list button { background: white; border: 2px solid rgba(49, 90, 137, 0.28); border-radius: 14px; color: var(--fc-ink); display: grid; font: inherit; gap: 4px; min-height: 66px; padding: 12px; text-align: left; box-shadow: 0 3px 0 rgba(49, 90, 137, 0.14); }
.fc-history-list button span { color: var(--fc-muted); font-size: .76rem; }

.fc-empty-state { color: var(--fc-muted); padding: 30px; text-align: center; }
.fc-empty-library { padding: 55px 20px; }
.fc-empty-orbit { align-items: center; background: #fff3ce; border: 1px solid #f1d47f; border-radius: 50%; color: #9b6600; display: inline-flex; font-size: 2rem; height: 70px; justify-content: center; width: 70px; }

.fc-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0; }
.fc-field { display: grid; gap: 7px; }
.fc-field-wide { grid-column: 1 / -1; }
.fc-field > span { color: var(--fc-muted); font-size: 0.78rem; font-weight: 800; }
.fc-field input, .fc-field textarea, .fc-question-card input, .fc-question-card textarea, .fc-question-card select { background: white; border: 2px solid rgba(49, 90, 137, 0.28); border-radius: 12px; color: var(--fc-ink); font: inherit; min-height: 44px; padding: 10px 12px; width: 100%; }
.fc-toggle { align-items: center; display: flex; gap: 9px; min-height: 44px; }
.fc-toggle input { height: 20px; width: 20px; }
.fc-question-stack { display: grid; gap: 14px; }
.fc-question-card { background: white; border: 2px solid rgba(49, 90, 137, 0.34); border-radius: 20px; display: grid; gap: 16px; grid-template-columns: 50px 1fr; padding: 18px; box-shadow: var(--fc-card-shadow); }
.fc-question-number { color: var(--fc-coral); font: 900 1.15rem/1 "Noto Serif TC", serif; padding-top: 12px; }
.fc-question-main { display: grid; gap: 12px; }
.fc-question-toolbar { display: flex; gap: 10px; justify-content: space-between; }
.fc-text-button { background: transparent; border: 0; min-height: 36px; }
.fc-text-button.is-danger { color: #b63f31; }
.fc-question-prompt { font-size: 1.05rem !important; font-weight: 800 !important; }
.fc-option-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-option-edit { align-items: center; background: #f8faf9; border: 2px solid rgba(49, 90, 137, 0.2); border-radius: 14px; display: grid; gap: 8px; grid-template-columns: auto 24px 1fr; padding: 8px; }
.fc-option-edit.is-answer { background: #eaf8f4; border-color: rgba(8,125,117,0.45); }
.fc-option-edit > input:first-child { height: 18px; min-height: auto; width: 18px; }
.fc-add-option, .fc-add-question { background: transparent; border: 2px dashed rgba(8,125,117,0.45); color: var(--fc-teal); padding: 9px 14px; }
.fc-add-question { margin: 15px 0; width: 100%; }
.fc-editor-actions { border-top: 1px solid var(--fc-line); justify-content: flex-end; padding-top: 18px; }

.fc-live-console { border-color: var(--fc-frame); }
.fc-live-pulse { align-items: center; color: var(--fc-coral); display: inline-flex; font-size: 0.72rem; font-weight: 900; gap: 7px; letter-spacing: 0.16em; }
.fc-live-pulse::before, .fc-live-dot { animation: fcPulse 1.5s infinite; background: var(--fc-coral); border-radius: 50%; content: ""; height: 9px; width: 9px; }
@keyframes fcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(238,107,85,.35); } 50% { box-shadow: 0 0 0 8px rgba(238,107,85,0); } }
.fc-live-counts { align-items: baseline; display: flex; gap: 5px; }
.fc-live-counts strong { color: var(--fc-teal); font-size: 2.4rem; }
.fc-control-row { background: #f5f8f7; border: 2px solid rgba(49, 90, 137, 0.2); border-radius: 17px; margin: 18px 0; padding: 10px; }
.fc-control-row button { background: white; border: 2px solid rgba(49, 90, 137, 0.28); color: var(--fc-ink); padding: 9px 15px; box-shadow: 0 3px 0 rgba(49, 90, 137, 0.14); }
.fc-control-row button.is-finish { background: var(--fc-ink); color: white; margin-left: auto; }
.fc-live-grid { display: grid; gap: 16px; grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.3fr); }
.fc-current-question, .fc-response-board { background: white; border: 2px solid rgba(49, 90, 137, 0.3); border-radius: 20px; padding: 20px; box-shadow: var(--fc-card-shadow); }
.fc-current-question > span { color: var(--fc-muted); font-size: .78rem; font-weight: 800; }
.fc-current-question h4 { font-family: "Noto Serif TC", serif; font-size: 1.35rem; }
.fc-question-options-preview { display: grid; gap: 8px; }
.fc-question-options-preview span { background: #f7f9f8; border-radius: 10px; padding: 9px 11px; }
.fc-question-options-preview b { color: var(--fc-teal); display: inline-block; width: 28px; }
.fc-response-list { display: grid; gap: 7px; max-height: 350px; overflow: auto; }
.fc-response-row { align-items: center; border-bottom: 1px solid var(--fc-line); display: grid; gap: 10px; grid-template-columns: minmax(100px,.8fr) minmax(100px,1.2fr) auto; padding: 10px 2px; }
.fc-response-row.is-correct strong { color: var(--fc-teal); }
.fc-response-row.is-wrong strong { color: var(--fc-coral); }
.fc-response-row.is-waiting { opacity: .68; }
.fc-response-row time { color: var(--fc-muted); font-size: .78rem; }
.fc-reward-bar { align-items: center; background: #fff6dc; border: 2px solid #d8ad3f; border-radius: 18px; display: flex; gap: 16px; margin-top: 16px; padding: 14px 16px; box-shadow: 0 3px 0 rgba(143, 99, 9, 0.16); }
.fc-reward-bar > div { display: grid; flex: 1; }
.fc-reward-bar span { color: #765b1c; font-size: .82rem; }
.fc-reward-state { background: white; border-radius: 999px; padding: 7px 11px; }

.fc-student-overlay { align-items: center; background: rgba(10, 25, 43, 0.72); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 2600; }
.fc-student-activity-card { background: var(--fc-paper); border: 1px solid rgba(255,255,255,.75); border-radius: 28px; box-shadow: 0 32px 90px rgba(0,0,0,.34); color: var(--fc-ink); max-height: calc(100vh - 32px); max-width: 760px; overflow: auto; width: 100%; }
.fc-student-activity-card > header { align-items: flex-start; background: linear-gradient(135deg,#e9f7f3,#fff6d9); display: flex; justify-content: space-between; padding: 22px 24px; }
.fc-student-activity-card h2 { font-family: "Noto Serif TC", serif; margin: 6px 0; }
.fc-student-activity-card header p { color: var(--fc-muted); margin: 0; }
.fc-student-activity-card > main { padding: 24px; }
.fc-student-activity-card main h3 { font-family: "Noto Serif TC", serif; font-size: clamp(1.35rem,4vw,2rem); line-height: 1.5; margin: 0 0 20px; }
.fc-student-options { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.fc-student-options button { align-items: center; background: white; border: 2px solid var(--fc-line); border-radius: 18px; color: var(--fc-ink); display: flex; font: inherit; font-size: 1.05rem; gap: 12px; min-height: 64px; padding: 12px 15px; text-align: left; }
.fc-student-options button b { align-items: center; background: #eef3f2; border-radius: 12px; color: var(--fc-teal); display: inline-flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.fc-student-options button.is-selected { background: #e8f7f2; border-color: var(--fc-teal); box-shadow: 0 8px 20px rgba(8,125,117,.14); }
.fc-student-options button.is-revealed-correct { border-color: var(--fc-gold); box-shadow: 0 0 0 3px rgba(242,184,75,.22); }
.fc-student-short-answer { border: 2px solid var(--fc-line); border-radius: 18px; font: inherit; min-height: 150px; padding: 15px; resize: vertical; width: 100%; }
.fc-student-reveal { background: #fff4d0; border-radius: 16px; margin-top: 16px; padding: 14px; }
.fc-storage-warning { background: #fff2d7; border: 1px solid #e7c36b; border-radius: 14px; color: #785100; font-weight: 800; margin-bottom: 16px; padding: 11px 13px; }
.fc-student-activity-card > footer { align-items: center; border-top: 1px solid var(--fc-line); display: flex; gap: 14px; justify-content: space-between; padding: 17px 24px; }
.fc-submit-state { color: var(--fc-muted); font-weight: 800; }
.fc-submit-state.tone-applied, .fc-submit-state.tone-duplicate { color: var(--fc-teal); }
.fc-submit-state.tone-retrying, .fc-submit-state.tone-blocked { color: #a06300; }
.fc-submit-state.tone-rejected { color: #b63f31; }
.fc-student-activity-chip { align-items: center; background: #fff7de; border: 1px solid #e8ca71; border-radius: 999px; bottom: 22px; box-shadow: var(--fc-shadow); color: var(--fc-ink); display: flex; font: inherit; font-weight: 900; gap: 10px; min-height: 48px; padding: 10px 17px; position: fixed; right: 22px; z-index: 2500; }

@media (max-width: 860px) {
  .fc-activity-hero, .fc-live-head, .fc-reward-bar { align-items: stretch; flex-direction: column; }
  .fc-health-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fc-live-grid { grid-template-columns: 1fr; }
  .fc-control-row button.is-finish { margin-left: 0; }
}

@media (max-width: 560px) {
  .fc-template-library, .fc-activity-editor, .fc-live-console { padding: 16px; }
  .fc-activity-hero { padding: 20px; }
  .fc-form-grid, .fc-option-grid, .fc-student-options { grid-template-columns: 1fr; }
  .fc-library-tools { grid-template-columns: 1fr; }
  .fc-question-card { grid-template-columns: 1fr; }
  .fc-question-number { padding: 0; }
  .fc-student-overlay { padding: 8px; }
  .fc-student-activity-card > footer { align-items: stretch; flex-direction: column; }
  .fc-student-activity-card > footer .fc-primary-button { width: 100%; }
  .fc-response-row { grid-template-columns: 1fr auto; }
  .fc-response-row span { grid-column: 1 / -1; }
  .fc-section-head, .fc-panel-title { align-items: stretch; flex-direction: column; }
  .fc-section-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-live-pulse::before, .fc-live-dot { animation: none; }
  .fc-primary-button, .fc-secondary-button, .fc-control-row button { transition: none; }
}