:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  color: var(--text);
  background: var(--page-background);
  font-synthesis: none;
  --page-background: #eef6f2;
  --page-start: #f5fbf8;
  --page-end: #e7f2ed;
  --page-glow: rgba(8, 127, 105, .1);
  --surface: #ffffff;
  --surface-2: #f4f9f6;
  --surface-toolbar: rgba(245, 251, 248, .96);
  --surface-nav: rgba(249, 253, 251, .98);
  --surface-input: #ffffff;
  --line: #bfd6ca;
  --line-strong: #759c8a;
  --text: #17352f;
  --muted: #48675c;
  --accent: #08745a;
  --accent-strong: #06664e;
  --button-text: #ffffff;
  --button-hover: #065741;
  --button-active: #043d2e;
  --secondary-text: #18523d;
  --secondary-surface: #e0f2e8;
  --secondary-hover: #c7e8d8;
  --secondary-active: #afd9c4;
  --disabled-text: #50665d;
  --disabled-surface: #e1eae5;
  --focus-ring: #806100;
  --focus-glow: rgba(128, 97, 0, .22);
  --gold: #70520b;
  --danger: #a22937;
  --pending-line: #b48728;
  --pending-text: #654500;
  --pending-surface: #fff2c7;
  --queued-line: #7f9dcc;
  --queued-text: #264c83;
  --queued-surface: #eaf1ff;
  --approved-line: #6f9f82;
  --approved-text: #166244;
  --approved-surface: #dcf5e8;
  --rejected-line: #b77580;
  --rejected-text: #842b38;
  --rejected-surface: #fff0f2;
  --surface-error: #fff0f2;
  --avatar-start: #dbf5e8;
  --avatar-end: #baddca;
  --overlay-soft: rgba(15, 38, 27, .58);
  --overlay-strong: rgba(15, 38, 27, .78);
  --overlay-dialog: rgba(15, 38, 27, .62);
  --toast-text: #583e04;
  --toast-surface: #fff2c7;
}

:root[data-qr-theme="dark"] {
  color-scheme: dark;
  --page-background: #081511;
  --page-start: #0b1b16;
  --page-end: #07120f;
  --page-glow: rgba(80, 210, 161, .15);
  --surface: #11241e;
  --surface-2: #0c211a;
  --surface-toolbar: rgba(8, 21, 17, .96);
  --surface-nav: rgba(8, 24, 19, .98);
  --surface-input: #0b1c16;
  --line: #315348;
  --line-strong: #528473;
  --text: #f4fbf8;
  --muted: #b7cbc3;
  --accent: #76e2b8;
  --accent-strong: #55cfa0;
  --button-text: #06120e;
  --button-hover: #9aebcc;
  --button-active: #4bba8a;
  --secondary-text: #e7faf2;
  --secondary-surface: #183b30;
  --secondary-hover: #234e40;
  --secondary-active: #2c604d;
  --disabled-text: #bad0c5;
  --disabled-surface: #294337;
  --focus-ring: #f6cf74;
  --focus-glow: rgba(246, 207, 116, .22);
  --gold: #f4d47e;
  --danger: #ffb8b8;
  --pending-line: #c69a48;
  --pending-text: #fff2cf;
  --pending-surface: #3d2c0e;
  --queued-line: #718cbd;
  --queued-text: #e4edff;
  --queued-surface: #253453;
  --approved-line: #57ad83;
  --approved-text: #e2fff0;
  --approved-surface: #174a35;
  --rejected-line: #a95f66;
  --rejected-text: #ffdfe1;
  --rejected-surface: #4a2227;
  --surface-error: #3b171c;
  --avatar-start: #2b6652;
  --avatar-end: #173a2f;
  --overlay-soft: rgba(3, 10, 8, .62);
  --overlay-strong: rgba(3, 10, 8, .82);
  --overlay-dialog: rgba(2, 10, 7, .72);
  --toast-text: #07130f;
  --toast-surface: #f5d37f;
}

* { box-sizing: border-box; }

html { min-width: 280px; background: var(--page-background); }

body {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 15% 0%, var(--page-glow), transparent 32rem),
    linear-gradient(180deg, var(--page-start) 0%, var(--page-end) 100%);
}

button, input, select { min-height: 48px; border-radius: 12px; font: inherit; }

button {
  border: 1px solid var(--accent-strong);
  padding: .62rem .85rem;
  color: var(--button-text);
  background: var(--accent);
  font-weight: 850;
  cursor: pointer;
}

.marble-prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.marble-input { min-width: 0; }
.marble-input .section-heading { flex-wrap: wrap; }
.thought-cloud { min-width: 0; }
.thought-cloud .section-heading { flex-wrap: wrap; }
.thought-cloud .section-heading h2 { color: var(--accent-strong); }
.thought-cloud-prompt {
  margin: 1.25rem 0 1.5rem;
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.thought-cloud-count { text-align: right; font-size: .85rem; }
.thought-cloud form button { width: 100%; }

button:hover, button:focus-visible { color: var(--button-text); background: var(--button-hover); }
button:active { color: var(--button-text); background: var(--button-active); }
button:disabled {
  color: var(--disabled-text);
  background: var(--disabled-surface);
  border-color: var(--line-strong);
  cursor: not-allowed;
  opacity: 1;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.shell {
  width: min(780px, 100%);
  margin: 0 auto;
  padding:
    max(.75rem, env(safe-area-inset-top))
    max(.8rem, env(safe-area-inset-right))
    max(6.6rem, calc(env(safe-area-inset-bottom) + 5.6rem))
    max(.8rem, env(safe-area-inset-left));
}

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .25rem .7rem;
  padding: .35rem .2rem .65rem;
}

.hero .eyebrow, .hero .brand-title-row, .hero .class-label { grid-column: 1; }
.hero .badge { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.brand-title-row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.hero h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.brand-subtitle {
  color: var(--secondary-text);
  font-size: clamp(.76rem, 2.8vw, .94rem);
  font-weight: 850;
  white-space: nowrap;
}
.class-label { margin: .08rem 0; color: var(--text); font-size: .9rem; }
.eyebrow {
  margin: 0;
  color: var(--accent-strong);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.panel {
  margin-bottom: .72rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(.82rem, 3vw, 1.05rem);
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

.panel h2 { margin: .12rem 0 .38rem; font-size: 1.13rem; }
.muted, .privacy-note, .message { color: var(--muted); line-height: 1.45; }
.compact-copy { margin: .35rem 0 .55rem; font-size: .86rem; }
.privacy-note { margin-bottom: 0; font-size: .82rem; }
.message { min-height: 1.4rem; }
.message.error { color: var(--danger); }

form { display: grid; gap: .62rem; margin-top: .75rem; }
label { display: grid; gap: .28rem; color: var(--text); font-weight: 750; }
input, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  padding: .62rem .75rem;
  color: var(--text);
  background: var(--surface-input);
}
select { color-scheme: inherit; }
input::placeholder { color: var(--muted); opacity: 1; }
input:disabled, select:disabled {
  color: var(--disabled-text);
  background: var(--disabled-surface);
  opacity: 1;
}
.record-form { grid-template-columns: minmax(10rem, .75fr) minmax(14rem, 1.5fr) auto; }
.record-form label { min-width: 0; }
.record-form .compact-copy {
  grid-column: 1 / -1;
  min-height: 1.3rem;
  margin: 0;
}
.record-form button { align-self: end; white-space: nowrap; }

.badge, .status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .18rem .58rem;
  color: var(--secondary-text);
  background: var(--secondary-surface);
  font-size: .76rem;
  font-weight: 850;
  white-space: nowrap;
}

.portal-toolbar {
  position: sticky;
  top: max(0px, env(safe-area-inset-top));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: -.12rem 0 .62rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .35rem .4rem .35rem .7rem;
  background: var(--surface-toolbar);
  backdrop-filter: blur(12px);
}

.portal-toolbar > div { display: flex; gap: .35rem; }
.last-checked { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.compact-action { min-height: 40px; padding: .42rem .6rem; font-size: .78rem; }
.secondary { color: var(--secondary-text); background: var(--secondary-surface); }
.logout { color: var(--text); background: var(--surface); border-color: var(--line-strong); }
.secondary:hover, .secondary:focus-visible, .logout:hover, .logout:focus-visible {
  color: var(--secondary-text);
  background: var(--secondary-hover);
}
.secondary:active, .logout:active {
  color: var(--secondary-text);
  background: var(--secondary-active);
}
.secondary:disabled, .logout:disabled {
  color: var(--disabled-text);
  background: var(--disabled-surface);
  border-color: var(--line-strong);
}
.install-student-app { width: 100%; margin-top: .6rem; }
.remember-device-choice { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--secondary-surface); color: var(--secondary-text); cursor: pointer; }
.remember-device-choice input { width: 26px; min-height: 26px; height: 26px; flex: 0 0 26px; accent-color: var(--accent); }
.remember-device-choice:focus-within {
  color: var(--secondary-text);
  background: var(--secondary-hover);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.remembered-device-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .65rem; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--secondary-text); background: var(--secondary-surface); font-size: .85rem; }

.install-dialog {
  width: min(calc(100% - 1.5rem), 430px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}
.install-dialog::backdrop { background: var(--overlay-dialog); }
.install-dialog h2 { margin: 0 0 .6rem; }
.install-dialog p { line-height: 1.5; }
.install-dialog form { display: flex; justify-content: flex-end; }
.install-dialog form button { min-width: 6rem; }

.portal-view { animation: view-in .16s ease-out; }
@keyframes view-in {
  from { opacity: .45; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.today-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .72rem .82rem;
}

.avatar {
  position: relative;
  display: grid;
  width: 124px;
  height: 124px;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 34px;
  background:
    radial-gradient(circle at 35% 30%, var(--avatar-start), var(--avatar-end) 70%);
  font-size: 4.5rem;
  box-shadow: inset 0 -10px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .2);
}
.avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
  transform-origin: center;
}
.avatar-layer-fallback {
  position: relative;
  z-index: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
}

.compact-avatar {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  font-size: 2rem;
}

.today-profile h2 { margin: .05rem 0; }
.mini-balance { color: var(--gold); font-size: .9rem; white-space: nowrap; }
.profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.growth-showcase { min-height: 170px; border-color: var(--line-strong); }
.profile-card h2 { margin: .1rem 0; font-size: 1.55rem; }
.growth-title { margin: .12rem 0; color: var(--text); }
.balance { margin: .35rem 0 0; color: var(--gold); font-size: 1.25rem; font-weight: 900; }

.section-heading {
  display: flex;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
}
.section-hint { max-width: 15rem; color: var(--muted); font-size: .72rem; text-align: right; }

.card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .65rem;
}

.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: .68rem;
  background: var(--surface-2);
}
.card h3 { margin: 0 0 .14rem; font-size: .93rem; overflow-wrap: anywhere; }
.card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.card small { display: block; margin-top: .28rem; color: var(--gold); font-size: .72rem; }
.card button { min-width: 76px; padding-inline: .68rem; }
.customization-grid .card { grid-template-columns: minmax(0, 1fr) auto; }
.empty { color: var(--muted); text-align: center; padding: .8rem .4rem; }


.status.pending, .status.submitted, .pending .status {
  border-color: var(--pending-line);
  color: var(--pending-text);
  background: var(--pending-surface);
}
.status.queued, .queued .status { border-color: var(--queued-line); color: var(--queued-text); background: var(--queued-surface); }
.status.approved, .status.completed, .approved .status, .completed .status {
  border-color: var(--approved-line);
  color: var(--approved-text);
  background: var(--approved-surface);
}
.status.rejected, .status.cancelled, .rejected .status, .cancelled .status {
  border-color: var(--rejected-line);
  color: var(--rejected-text);
  background: var(--rejected-surface);
}

.pending-notice {
  margin: 0 0 .72rem;
  border: 1px solid var(--pending-line);
  border-radius: 13px;
  padding: .68rem .8rem;
  color: var(--pending-text);
  background: var(--pending-surface);
}
.pending-notice p { margin: .18rem 0 0; font-size: .82rem; }

.history-list { display: grid; gap: .48rem; margin-top: .6rem; }
.history-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .65rem .72rem;
  background: var(--surface-2);
}
.history-top { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.history-top h3 { margin: 0; font-size: .9rem; }
.history-detail { margin: .4rem 0 0; color: var(--text); font-size: .82rem; line-height: 1.4; }
.event-meta { margin: .35rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: .3rem;
  width: min(780px, 100%);
  margin: auto;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding:
    .42rem
    max(.45rem, env(safe-area-inset-right))
    max(.42rem, env(safe-area-inset-bottom))
    max(.45rem, env(safe-area-inset-left));
  background: var(--surface-nav);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .32);
  backdrop-filter: blur(14px);
}
.bottom-nav button {
  display: grid;
  min-width: 0;
  min-height: 52px;
  place-items: center;
  gap: .05rem;
  border-color: transparent;
  padding: .28rem .2rem;
  color: var(--muted);
  background: var(--surface-nav);
  font-size: .74rem;
}
.bottom-nav button span { font-size: 1.05rem; line-height: 1; }
.bottom-nav button[aria-selected="true"] {
  border-color: var(--line-strong);
  color: var(--secondary-text);
  background: var(--secondary-hover);
}
.bottom-nav button:hover, .bottom-nav button:focus-visible {
  color: var(--secondary-text);
  background: var(--secondary-hover);
}
.bottom-nav button:active {
  color: var(--secondary-text);
  background: var(--secondary-active);
}
.bottom-nav button:disabled {
  color: var(--disabled-text);
  background: var(--disabled-surface);
  border-color: var(--line-strong);
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: auto;
  background: var(--overlay-soft);
}
body.tour-active .bottom-nav {
  z-index: 70;
  pointer-events: none;
}
body.tour-active .bottom-nav button:not(.tour-target) {
  color: var(--disabled-text);
  background: var(--disabled-surface);
  border-color: var(--line-strong);
  opacity: 1;
}
body.tour-active .bottom-nav .tour-target {
  pointer-events: auto;
  opacity: 1;
}
.tour-card {
  position: fixed;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 5.8rem));
  left: max(.8rem, env(safe-area-inset-left));
  width: min(520px, calc(100% - 1.6rem));
  margin: auto;
  border: 2px solid var(--accent-strong);
  border-radius: 16px;
  padding: .9rem 1rem;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.tour-card h2 { margin: .18rem 0 .35rem; font-size: 1.15rem; }
.tour-card p { margin: .25rem 0; color: var(--muted); line-height: 1.4; }
.tour-instruction { color: var(--gold) !important; font-weight: 800; }
.tour-card button { margin-top: .55rem; }
.tour-target {
  position: relative;
  z-index: 80 !important;
  pointer-events: auto;
  outline: 4px solid var(--focus-ring) !important;
  outline-offset: 1px;
  animation: tutorial-pulse .9s ease-in-out infinite alternate;
}
@keyframes tutorial-pulse { to { box-shadow: 0 0 0 7px var(--focus-glow); } }

.error-panel { border-color: var(--rejected-line); background: var(--surface-error); }
.toast {
  position: fixed;
  right: 1rem;
  bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 5.8rem));
  left: 1rem;
  z-index: 85;
  max-width: 620px;
  margin: auto;
  border-radius: 12px;
  padding: .72rem .85rem;
  color: var(--toast-text);
  background: var(--toast-surface);
  font-weight: 800;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.toast.visible { opacity: 1; transform: translateY(0); }

.monthly-notice {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--overlay-strong);
}
.monthly-notice-card {
  width: min(520px, 100%);
  border: 2px solid var(--accent-strong);
  border-radius: 18px;
  padding: 1.15rem;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.monthly-notice-card h2 { margin: .25rem 0 .55rem; }
.monthly-notice-card p:not(.eyebrow) {
  color: var(--text);
  line-height: 1.65;
}
.monthly-notice-card button { width: 100%; margin-top: .7rem; }

.privacy-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--page-end);
}
.privacy-card {
  width: min(440px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 1.1rem;
  background: var(--surface);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
}
.privacy-card h2 { margin: .25rem 0 .45rem; }
.privacy-card p:not(.eyebrow) { color: var(--text); line-height: 1.5; }
.privacy-card form { margin-top: .65rem; }
.privacy-card button { width: 100%; margin-top: .55rem; }

[hidden] { display: none !important; }

@media (max-width: 560px) {
  .shell { padding-right: .65rem; padding-left: .65rem; }
  .brand-title-row { gap: .42rem; }
  .portal-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .portal-toolbar > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .last-checked { padding-top: .35rem; line-height: 1.25; }
  .compact-action { min-height: 44px; padding-inline: .45rem; font-size: .72rem; }
  .card-list { grid-template-columns: 1fr; }
  .today-profile { grid-template-columns: 54px minmax(0, 1fr); }
  .today-profile .mini-balance { grid-column: 2; }
  .profile-card { grid-template-columns: 1fr; text-align: center; }
  .profile-card .avatar { margin: 0 auto; }
  .growth-showcase { min-height: 0; }
  .avatar:not(.compact-avatar) {
    width: 112px;
    height: 112px;
    border-radius: 30px;
    font-size: 4rem;
  }
  .compact-avatar {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 2rem;
  }
  .section-heading { align-items: flex-start; }
  .section-hint { max-width: 9.5rem; }
  .record-form { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .portal-toolbar { display: grid; }
  .last-checked { max-width: none; }
  .bottom-nav button strong { font-size: .67rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.used-stamp { display: inline-block; margin: .45rem .35rem .15rem 0; padding: .16rem .55rem; border: 2px solid var(--queued-line); border-radius: .3rem; background: var(--queued-surface); color: var(--queued-text); font-size: .9rem; font-weight: 900; line-height: 1.35; transform: rotate(-4deg); }

.fulfillment-revoked { display: inline-block; margin: .35rem; color: var(--muted); background: var(--surface-2); padding: .15rem .4rem; border-radius: .25rem; font-size: .8rem; }
:root .item-icon {
  float: right;
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 0 .4rem .65rem;
}

.learning-board-grid, .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem; margin: .8rem 0; }
.learning-board-post { display: flex; flex-direction: column; align-items: stretch; min-width: 0; overflow-wrap: anywhere; }
.learning-board-post img { width: 100%; max-height: 320px; object-fit: contain; border-radius: .6rem; }
.learning-board-post .preserve-lines { white-space: pre-wrap; }
.board-comments { border-top: 1px solid var(--line); margin-top: .7rem; font-size: .9rem; }
#classroomActivitiesSection details > summary { cursor: pointer; padding: .8rem; font-weight: 700; }
#classroomActivitiesSection textarea, #classroomActivitiesSection select { width: 100%; box-sizing: border-box; }
#classroomActivitiesSection .feature-section + .feature-section { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }