#subject-science[hidden],
#subject-science .science-is-hidden { display: none; }

#subject-science .science-hero { padding: 1.25rem 0 1rem; text-align: center; }
#subject-science .science-hero-kicker { margin: 0 0 0.5rem; color: #277447; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; }
#subject-science .science-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
#subject-science .science-hero-copy { width: min(100%, 42rem); margin: 0.9rem auto 0; color: var(--ink-muted); line-height: 1.7; }

#subject-science .science-app-frame,
#subject-science .science-section-head,
#subject-science .science-card-topbar,
#subject-science .science-control-row,
#subject-science .science-card-stage,
#subject-science .science-nav-row { display: grid; gap: 1rem; }

#subject-science .science-status-banner,
#subject-science .science-panel { border: 1px solid rgba(39, 116, 71, 0.2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
#subject-science .science-status-banner { padding: 0.9rem 1.1rem; font-weight: 700; }
#subject-science .science-panel { padding: clamp(1rem, 3vw, 1.5rem); }
#subject-science .science-panel h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
#subject-science .science-section-copy,
#subject-science .science-message,
#subject-science .science-card-hint { color: var(--ink-muted); line-height: 1.7; }
#subject-science .science-section-head { margin-bottom: 1rem; }
#subject-science .science-summary-pill { justify-self: start; margin: 0; padding: 0.65rem 0.95rem; border: 1px solid rgba(39, 116, 71, 0.18); border-radius: 999px; background: #effbf3; color: #21633d; font-weight: 800; }
#subject-science .science-empty-message { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid #8bc6a1; border-radius: var(--radius-md); background: #effbf3; color: #205d38; font-weight: 700; }
#subject-science .science-range-group + .science-range-group { margin-top: 1.5rem; }
#subject-science .science-range-group h3 { margin: 0 0 0.8rem; }
#subject-science .science-range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; }
#subject-science .science-range-card { display: grid; gap: 0.6rem; min-height: 7.2rem; padding: 1rem; border: 1px solid rgba(39, 116, 71, 0.2); border-radius: 1.15rem; background: linear-gradient(180deg, #fff, #f2fbf5); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease; }
#subject-science .science-range-card:hover:enabled,
#subject-science .science-range-card:focus-visible { border-color: rgba(39, 116, 71, 0.5); transform: translateY(-2px); }
#subject-science .science-range-card:disabled { opacity: 0.5; cursor: not-allowed; }
#subject-science .science-range-label { font-size: 1.05rem; font-weight: 800; }
#subject-science .science-range-count { align-self: end; justify-self: start; padding: 0.35rem 0.7rem; border-radius: 999px; background: #d8f2e1; font-weight: 700; }
#subject-science .science-button { min-height: 3.25rem; padding: 0.85rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-weight: 800; }
#subject-science .science-button:disabled { opacity: 0.45; cursor: not-allowed; }
#subject-science .science-button-primary { color: #fff; background: linear-gradient(180deg, #3d9661, #21663f); box-shadow: 0 14px 24px rgba(33, 102, 63, 0.2); }
#subject-science .science-button-secondary,
#subject-science .science-direction-button { border-color: rgba(24, 50, 74, 0.1); background: rgba(255, 255, 255, 0.9); color: var(--ink); }
#subject-science .science-direction-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#subject-science .science-direction-button.is-active { color: #fff; background: linear-gradient(180deg, #49a970, #277447); }
#subject-science .science-course-meta { display: grid; gap: 0.35rem; }
#subject-science .science-card-stage { justify-items: center; }
#subject-science .science-card-meta { width: min(100%, 38rem); }
#subject-science .science-card-counter { margin: 0; font-size: 1.05rem; font-weight: 800; }
#subject-science .science-flashcard { width: min(100%, 38rem); height: clamp(22rem, 60vh, 31rem); padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 1500px; touch-action: manipulation; }
#subject-science .science-flashcard-core { position: relative; display: block; width: 100%; height: 100%; transition: transform 0.44s cubic-bezier(0.22, 0.7, 0.2, 1); transform-style: preserve-3d; }
#subject-science .science-flashcard.is-flipped .science-flashcard-core { transform: rotateY(180deg); }
#subject-science .science-flashcard-face { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 1rem; padding: clamp(1.2rem, 4vw, 2rem); overflow: hidden; border: 1px solid rgba(39, 116, 71, 0.24); border-radius: 1.7rem; background: linear-gradient(145deg, #fcfffd, #eaf8ef); box-shadow: 0 20px 42px rgba(42, 99, 66, 0.14); backface-visibility: hidden; }
#subject-science .science-flashcard-back { background: linear-gradient(145deg, #fff, #eef8ff); transform: rotateY(180deg); }
#subject-science .science-flashcard-label { color: #277447; font-size: 0.85rem; font-weight: 800; }
#subject-science .science-flashcard-body { display: grid; place-items: center; overflow: auto; }
#subject-science .science-flashcard-value { white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(1.45rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.6; text-align: center; }
#subject-science .science-card-hint { margin: 0; text-align: center; }
#subject-science .science-nav-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (min-width: 48rem) {
  #subject-science .science-section-head,
  #subject-science .science-card-topbar,
  #subject-science .science-control-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 34rem) {
  #subject-science .science-direction-toggle,
  #subject-science .science-nav-row { grid-template-columns: 1fr; }
  #subject-science .science-flashcard { height: clamp(20rem, 58vh, 27rem); }
}
@media (prefers-reduced-motion: reduce) {
  #subject-science .science-flashcard-core,
  #subject-science .science-range-card { transition: none; }
}