:root {
  --nav: #10243e;
  --nav2: #183656;
  --accent: #d8a85d;
  --bg: #f4f6f9;
  --text: #243348;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.system-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.login-screen {
  display: grid;
  width: 100%;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 16% 18%, #d8a85d24, transparent 30%),
    linear-gradient(145deg, #10243e, #091827);
}

.login-card {
  width: min(410px, 100%);
  padding: 36px;
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 70px #020b1466;
}

.login-brand {
  margin-bottom: 28px;
  color: var(--nav);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2px;
}

.login-brand small {
  display: block;
  margin-top: 4px;
  color: #718094;
  font-size: 13px;
  letter-spacing: 1px;
}

.login-card h1 {
  margin: 0 0 22px;
  font-size: 24px;
}

.login-card label {
  display: block;
  margin: 14px 0 7px;
  color: #53657a;
  font-size: 14px;
  font-weight: 600;
}

.login-card input {
  width: 100%;
  min-height: 44px;
}

.login-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 700;
}

.login-notice {
  min-height: 20px;
  margin-top: 14px;
  padding: 0;
  font-size: 13px;
  text-align: center;
}

.login-notice.ok,
.login-notice.danger {
  padding: 9px;
  border-radius: 7px;
}

aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 230px;
  padding: 28px 18px;
  color: #fff;
  background: linear-gradient(180deg, var(--nav), #091827);
}

.brand {
  padding: 0 14px 28px;
  border-bottom: 1px solid #ffffff22;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2px;
}

.brand small {
  color: #b9c8d8;
  font-size: 13px;
  letter-spacing: 1px;
}

nav {
  margin-top: 22px;
}

nav button {
  display: block;
  width: 100%;
  margin: 5px 0;
  padding: 13px 16px;
  border: 0;
  border-radius: 8px;
  color: #c8d4df;
  background: transparent;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

nav button.active {
  border-left: 3px solid var(--accent);
  color: #fff;
  background: var(--nav2);
}

@media (hover: hover) {
  nav button:hover {
    color: #fff;
    background: var(--nav2);
  }
}

.disabled {
  position: absolute;
  bottom: 25px;
  padding: 12px;
  border: 1px dashed #ffffff33;
  border-radius: 8px;
  font-size: 13px;
}

.disabled span {
  color: #efc27c;
  font-size: 11px;
}

main {
  width: calc(100% - 230px);
  margin-left: 230px;
  padding: 28px 36px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

h1 {
  margin: 0;
  font-size: 26px;
}

header p {
  margin: 6px 0;
  color: #8190a3;
  font-size: 13px;
}

.session-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.session-user span {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.session-user small {
  margin-top: 3px;
  color: #718094;
}

select,
input,
textarea {
  min-width: 0;
  padding: 9px;
  border: 1px solid #d9e0e8;
  border-radius: 6px;
  background: white;
  color: var(--text);
  font: inherit;
}

button {
  font: inherit;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #d8a85d55;
  outline-offset: 2px;
}

.card {
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px #10243e0b;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.search-form {
  display: flex;
  min-width: min(430px, 100%);
  gap: 8px;
}

.search-form input {
  flex: 1;
}

.btn {
  padding: 9px 15px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--nav2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:disabled {
  cursor: wait;
  opacity: 0.65;
}

.btn.gold {
  color: #2b2418;
  background: var(--accent);
}

.btn.light {
  color: #32465d;
  background: #edf1f5;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-card {
  overflow: hidden;
}

th {
  color: #718094;
  background: #f8fafc;
  text-align: left;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid #edf0f3;
}

.pill {
  padding: 4px 8px;
  border-radius: 20px;
  color: #247449;
  background: #e6f5ed;
  font-size: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.metric {
  padding: 18px;
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: #fff;
}

.metric b {
  display: block;
  margin-top: 7px;
  font-size: 25px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.field-label {
  color: #64758a;
  font-size: 13px;
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.detail-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.detail-grid dt {
  margin-bottom: 5px;
  color: #718094;
  font-size: 12px;
}

.detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.compact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-list li {
  padding: 11px 12px;
  border-left: 3px solid #d8a85d88;
  border-radius: 7px;
  background: #f8fafc;
  overflow-wrap: anywhere;
}

.empty-state {
  padding: 24px 12px;
  color: #718094;
  text-align: center;
}

.loading-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  gap: 10px;
  color: #64758a;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #d8e0e8;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.wide-note {
  width: 100%;
  margin-top: 10px;
}

.notice {
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 7px;
  color: #78520d;
  background: #fff4dd;
}

.ok {
  color: #276c44;
  background: #e7f6ed;
}

.danger {
  color: #9b2d26;
  background: #ffe9e7;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-head h3,
.section-head p {
  margin: 0;
}

.section-head p {
  margin-top: 5px;
  color: #718094;
  font-size: 13px;
  line-height: 1.5;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.filter-actions,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-span-2 {
  grid-column: span 2;
}

.status-suspended {
  color: #8a6016;
  background: #fff3d5;
}

.status-disabled {
  color: #8f3a35;
  background: #fce8e6;
}

.timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.timeline::before {
  position: absolute;
  inset: 6px auto 6px 6px;
  width: 2px;
  background: #d8a85d66;
  content: "";
}

.timeline li {
  position: relative;
  padding: 0 0 20px 10px;
}

.timeline li::before {
  position: absolute;
  top: 5px;
  left: -21px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px #d8a85d;
  content: "";
}

.timeline-time {
  margin-bottom: 4px;
  color: #718094;
  font-size: 12px;
}

.timeline p {
  margin: 5px 0 0;
  color: #64758a;
  line-height: 1.5;
}

.handoff-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 4px 0 22px;
}

.handoff-flow span {
  padding: 16px;
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.handoff-flow b {
  color: var(--accent);
  font-size: 24px;
}

.context-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.context-strip div {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.context-strip span,
.context-strip b {
  display: block;
}

.context-strip span {
  margin-bottom: 5px;
  color: #718094;
  font-size: 12px;
}

.context-strip b {
  overflow-wrap: anywhere;
}

.parse-panel:empty {
  display: none;
}

.parse-panel .notice {
  margin: 0 0 14px;
}

.metric .metric-note {
  font-size: 16px;
  line-height: 1.35;
}

@media (min-width: 901px) and (max-width: 1023px) {
  aside {
    width: 190px;
  }

  main {
    width: calc(100% - 190px);
    margin-left: 190px;
    padding: 22px;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .system-shell {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .login-screen {
    min-height: 100svh;
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .login-card {
    padding: 28px 22px 24px;
    border-radius: 14px;
  }

  aside {
    position: sticky;
    z-index: 10;
    top: 0;
    width: 100%;
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      10px
      max(12px, env(safe-area-inset-left));
    box-shadow: 0 5px 18px #07111d33;
  }

  .brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 9px;
    border-bottom: 0;
    font-size: 18px;
    letter-spacing: 1px;
  }

  .brand br {
    display: none;
  }

  .brand small {
    font-size: 11px;
  }

  nav {
    display: flex;
    gap: 8px;
    margin-top: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav button {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    text-align: center;
    scroll-snap-align: start;
  }

  nav button.active {
    border-left: 0;
    box-shadow: inset 0 0 0 1px #d8a85d99;
  }

  .disabled {
    display: none;
  }

  main {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding:
      16px
      max(14px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  header {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  header h1 {
    font-size: 22px;
    line-height: 1.25;
  }

  header p {
    display: none;
  }

  .session-user {
    flex-shrink: 0;
    gap: 8px;
  }

  .session-user span {
    max-width: 124px;
  }

  .session-user strong,
  .session-user small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 11px;
  }

  .table-card {
    overflow: visible;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
  }

  .search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    width: 100%;
  }

  select,
  input,
  textarea,
  .btn {
    min-height: 44px;
  }

  select,
  input,
  textarea {
    font-size: 16px;
  }

  textarea {
    min-height: 92px;
  }

  .toolbar > .btn,
  .card > p .btn {
    width: 100%;
  }

  .card > p {
    display: grid;
    gap: 8px;
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody tr {
    padding: 8px 0;
  }

  .responsive-table tbody tr + tr {
    border-top: 1px solid #e4e9ef;
  }

  .responsive-table td {
    display: grid;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }

  .responsive-table td::before {
    content: attr(data-label);
    color: #718094;
    font-size: 12px;
    font-weight: 600;
  }

  .responsive-table .action-cell {
    display: block;
    padding-top: 10px;
  }

  .responsive-table .action-cell::before,
  .responsive-table .empty-state::before {
    display: none;
  }

  .responsive-table .empty-state {
    display: block;
  }

  .responsive-table .action-cell .btn {
    width: 100%;
  }

  .mobile-optional {
    display: none !important;
  }

  .metric-grid,
  .form-grid,
  .filter-grid,
  .context-strip,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    gap: 10px;
    margin-bottom: 12px;
  }

  .metric {
    padding: 15px;
  }

  .metric b {
    font-size: 22px;
  }

  .form-grid {
    gap: 12px;
  }

  .field-span-2 {
    grid-column: auto;
  }

  .filter-actions,
  .inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .filter-actions .btn,
  .inline-actions .btn {
    width: 100%;
  }

  .section-head {
    flex-direction: column;
  }

  .section-head > .btn {
    width: 100%;
  }

  .handoff-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .handoff-flow b {
    transform: rotate(90deg);
    text-align: center;
  }

  .detail-grid {
    gap: 8px;
  }

  .detail-grid div {
    padding: 10px 12px;
  }

  .notice {
    line-height: 1.45;
  }

  #app {
    min-width: 0;
  }
}

/* Final responsive overrides: every compact control stays tappable, and the
   1024px desktop boundary never inherits the legacy 1100px minimum width. */
@media (min-width: 901px) and (max-width: 1199px) {
  .system-shell {min-width: 0 !important}
  .system-shell aside {width: 230px; min-width: 230px !important}
  .system-shell main {min-width: 0 !important; width: calc(100vw - 230px)}
}
@media (max-width: 900px) {
  .identity-chip button,.text-back,.teacher-actions .btn,.family-photo.photo-upload {min-height: 44px !important}
  .teacher-actions .btn {padding-top: 10px; padding-bottom: 10px}
}

@media (max-width: 420px) {
  .login-card {
    padding: 24px 18px 20px;
  }

  .login-brand {
    margin-bottom: 22px;
    font-size: 22px;
  }

  header {
    flex-wrap: wrap;
  }

  .session-user {
    width: 100%;
    justify-content: space-between;
  }

  .session-user span {
    align-items: flex-start;
  }

  .session-user .btn {
    min-width: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
  }
}

/* task35 · 优姿优态大家庭本地演示层 */
:root {
  --nav: #18382f;
  --nav2: #265449;
  --accent: #e77451;
  --coral: #e77451;
  --coral-dark: #b94f36;
  --cream: #fffaf3;
  --sand: #ead3ae;
  --sea: #2e716e;
  --bg: #f7f2ea;
  --text: #2c3f39;
  --muted: #74837d;
  --line: #e9dfd2;
}

.demo-ribbon {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 0 0 12px 12px;
  color: #fff;
  background: #18382fe8;
  box-shadow: 0 7px 20px #15352d2e;
  font-size: 11px;
  letter-spacing: .06em;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.demo-ribbon i,
.update-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #84d6a6;
  box-shadow: 0 0 0 4px #84d6a622;
}

.eyebrow {
  margin: 0 0 8px;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.eyebrow.coral,
.header-kicker {
  color: var(--coral);
}

.family-mark {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 38px;
  height: 34px;
  flex: 0 0 auto;
}

.family-mark i {
  display: block;
  width: 10px;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(180deg, #f49b72, #d96545);
}

.family-mark i:nth-child(1) {height: 18px; transform: rotate(-9deg)}
.family-mark i:nth-child(2) {height: 31px}
.family-mark i:nth-child(3) {height: 23px; transform: rotate(8deg)}
.family-mark.small {width: 32px; height: 28px}
.family-mark.small i {width: 8px}
.family-mark.small i:nth-child(1) {height: 15px}
.family-mark.small i:nth-child(2) {height: 26px}
.family-mark.small i:nth-child(3) {height: 20px}

.login-screen {
  grid-template-columns: minmax(0, 1.3fr) minmax(390px, .7fr);
  min-height: 100svh;
  padding: 0;
  place-items: stretch;
  background: #122e27;
}

.login-story {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.login-story > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #102b23b8 0%, #173a2e52 52%, #102a228f 100%), linear-gradient(0deg, #0d251fba, transparent 62%);
}

.login-story-copy {
  position: absolute;
  left: clamp(34px, 6vw, 92px);
  bottom: clamp(54px, 10vh, 112px);
  width: min(680px, calc(100% - 80px));
  color: #fff;
}

.login-story-copy h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 5.8vw, 78px);
  line-height: 1.06;
  letter-spacing: -.05em;
  text-shadow: 0 10px 38px #10271f61;
}

.login-story-copy h1 em {
  color: #ffc08d;
  font-style: normal;
}

.login-story-copy > p:not(.eyebrow) {
  max-width: 590px;
  color: #fff8efdd;
  font-size: 17px;
  line-height: 1.75;
}

.family-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.family-values span {
  display: flex;
  flex-direction: column;
  padding: 13px 15px;
  border: 1px solid #ffffff30;
  border-radius: 13px;
  background: #ffffff12;
  backdrop-filter: blur(9px);
}

.family-values b {font-size: 13px}
.family-values small {margin-top: 4px; color: #fff8efb8; font-size: 11px}

.art-source {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: #ffffff9c;
  font-size: 10px;
}

.login-card {
  align-self: center;
  justify-self: center;
  width: min(440px, calc(100% - 52px));
  padding: 45px 42px 36px;
  border: 1px solid #e6ded1;
  border-radius: 24px;
  box-shadow: 0 30px 80px #0718124f;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  color: #18382f;
  font-size: 23px;
}

.login-card h2 {margin: 0 0 10px; color: #18382f; font-size: 31px}
.login-lead {margin: 0 0 25px; color: #728078; font-size: 14px; line-height: 1.65}
.login-card input {border-radius: 10px; background: #fffdfa}
.login-submit {border-radius: 10px}
.privacy-note {margin: 14px 0 0; color: #96a19b; font-size: 11px; line-height: 1.5; text-align: center}

aside {
  width: 252px;
  padding: 28px 16px 22px;
  overflow-y: auto;
  background: linear-gradient(180deg, #173c32, #102b25 68%, #0c221d);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 22px;
  font-size: 21px;
  line-height: 1.15;
}

.brand small {font-size: 11px; letter-spacing: .06em}

.nav-group {
  margin: 18px 13px 7px;
  color: #9bb8ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
  padding: 11px 14px;
  border-radius: 10px;
  color: #d2e1dc;
  font-size: 14px;
}

nav button > span:first-child {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 7px;
  color: #ffd1aa;
  background: #ffffff0d;
  font-size: 12px;
}

nav button.active {
  border-left: 0;
  color: #fff;
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #ffffff12;
}

.sidebar-note {
  display: flex;
  flex-direction: column;
  margin: 24px 5px 0;
  padding: 14px;
  border: 1px solid #ffffff17;
  border-radius: 13px;
  color: #f9e4cb;
  background: #ffffff09;
}

.sidebar-note b {font-size: 12px}
.sidebar-note span {margin-top: 5px; color: #b6cec5; font-size: 10px}

main {
  width: calc(100% - 252px);
  margin-left: 252px;
  padding: 34px clamp(24px, 3.4vw, 56px) 60px;
}

header {margin: 4px 0 25px}
.header-kicker {margin: 0 0 6px; font-size: 9px; font-weight: 800; letter-spacing: .2em}
header h1 {color: #1d3931; font-size: 28px}
header p:last-child {color: var(--muted)}
.session-user {padding: 7px 7px 7px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9}
.session-user strong {color: #24453c; font-size: 13px}
.session-user small {color: #89948f; font-size: 10px}

.btn {border-radius: 9px; font-weight: 650}
.btn.gold {color: #fff; background: linear-gradient(135deg, #e87a55, #d76042); box-shadow: 0 7px 18px #d7604226}
.btn.light {border-color: var(--line); color: #39584f; background: #fffdfa}
.card,
.family-panel {border: 1px solid var(--line); border-radius: 17px; background: #fffdfa; box-shadow: 0 10px 32px #56351a08}
.family-panel {margin-bottom: 18px; padding: 24px}

.family-home-hero {
  position: relative;
  min-height: 322px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 20px 55px #173e3026;
}

.family-home-hero > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%}
.family-home-shade {position: absolute; inset: 0; background: linear-gradient(90deg, #16362ebd, #18382f38 60%, #17382f86), linear-gradient(0deg, #123129a6, transparent 55%)}
.family-home-copy {position: absolute; left: clamp(25px, 4vw, 52px); bottom: 42px; max-width: 570px}
.family-home-copy p {margin: 0 0 9px; color: #ffd4ae; font-size: 10px; font-weight: 800; letter-spacing: .18em}
.family-home-copy h2 {margin: 0 0 14px; font-size: clamp(30px, 4vw, 49px); line-height: 1.15; letter-spacing: -.04em}
.family-home-copy span {display: inline-flex; padding: 7px 12px; border: 1px solid #ffffff29; border-radius: 999px; background: #ffffff12; font-size: 11px; backdrop-filter: blur(8px)}

.checkin-card {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  width: 210px;
  flex-direction: column;
  padding: 19px;
  border: 1px solid #ffffff32;
  border-radius: 17px;
  background: #fffaf2e8;
  color: #27463d;
  box-shadow: 0 14px 38px #102c2457;
  backdrop-filter: blur(14px);
}

.checkin-card > span {color: #74847e; font-size: 10px}
.checkin-card strong {margin: 6px 0 15px; font-size: 15px}
.checkin-card strong b {color: var(--coral); font-size: 25px}
.family-checkin {width: 100%; color: #fff; background: linear-gradient(135deg, #e97b56, #ce593c)}
.family-checkin:disabled {color: #2a5a49; background: #dff0e5; opacity: 1}

.family-metrics {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px}
.family-metrics article {display: flex; min-width: 0; flex-direction: column; padding: 18px 19px; border: 1px solid var(--line); border-radius: 15px; background: #fffdfa}
.family-metrics span {color: #7a8a84; font-size: 10px}
.family-metrics b {margin: 6px 0 4px; overflow: hidden; color: #24483e; font-size: 23px; text-overflow: ellipsis; white-space: nowrap}
.family-metrics small {overflow: hidden; color: #9a9f9b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap}

.welcome-panel {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px}
.welcome-panel > div:first-child h3 {margin: 0 0 8px; font-size: 23px}
.welcome-panel > div:first-child p:last-child {max-width: 720px; color: var(--muted); line-height: 1.65}
.role-preview-control {display: flex; min-width: 210px; flex-direction: column; gap: 5px; padding: 12px; border-radius: 12px; background: #f7f0e7}
.role-preview-control > span {font-size: 11px; font-weight: 700}
.role-preview-control select {min-height: 38px}
.role-preview-control small {color: #88958f; font-size: 9px; line-height: 1.35}
.family-quick-grid {grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px}
.family-quick-grid button {display: flex; min-height: 126px; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid var(--line); border-radius: 14px; color: #264a40; background: #fff; text-align: left; cursor: pointer}
.family-quick-grid button:hover {border-color: #df876c; transform: translateY(-2px); box-shadow: 0 12px 24px #be6d5014}
.family-quick-grid i {color: var(--coral); font-size: 10px; font-style: normal}
.family-quick-grid b {margin: 10px 0 5px; font-size: 14px}
.family-quick-grid span {color: #7c8d86; font-size: 10px; line-height: 1.5}
.update-strip {display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px}
.update-strip > div {display: flex; align-items: center; gap: 12px}
.update-strip p {margin: 0; color: #6f7e78; font-size: 11px}
.update-strip p b {margin-right: 8px; color: #2b5146}

.internal-intro {display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 12px 0 22px; padding: 28px 32px; border-radius: 20px; color: #fff; background: linear-gradient(125deg, #214d42, #367468); box-shadow: 0 18px 40px #1c493b24}
.internal-intro h2 {margin: 0 0 8px; font-size: 34px}
.internal-intro p:last-child {margin: 0; color: #d6e9e2; font-size: 13px}
.identity-chip {display: flex; min-width: 215px; flex-direction: column; align-items: flex-end}
.identity-chip > span {color: #ffd5ae; font-size: 11px}
.identity-chip b {margin: 6px 0; font-size: 15px}
.identity-chip button {padding: 0; border: 0; color: #e5f2ee; background: transparent; font-size: 11px; cursor: pointer}
.internal-card-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px}
.internal-card {position: relative; display: flex; min-height: 215px; flex-direction: column; align-items: flex-start; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; color: #27483f; background: #fffdfa; text-align: left; cursor: pointer}
.internal-card::after {content: ''; position: absolute; right: -34px; bottom: -45px; width: 135px; height: 135px; border-radius: 50%; background: #e9805d10}
.internal-card:hover {border-color: #e18a6e; transform: translateY(-2px); box-shadow: 0 15px 35px #a8604212}
.internal-card > i {color: var(--coral); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .1em}
.internal-card h3 {margin: 20px 0 7px; font-size: 25px}
.internal-card p {margin: 0 0 18px; color: #74867f; font-size: 12px}
.internal-card > b {max-width: 85%; color: #49685f; font-size: 11px; font-weight: 600; line-height: 1.6}
.internal-card > span {margin-top: auto; color: var(--coral-dark); font-size: 11px; font-weight: 750}
.internal-card.priority-1 {grid-column: span 2; min-height: 235px; color: #fff; background: linear-gradient(125deg, #1f4b40, #39786a)}
.internal-card.priority-1::after {width: 260px; height: 260px; background: #ffffff09}
.internal-card.priority-1 > i,.internal-card.priority-1 > span {color: #ffd0a8}
.internal-card.priority-1 p,.internal-card.priority-1 > b {color: #d5e8e1}

.family-section-head {align-items: flex-end}
.family-section-head h3 {margin: 0 0 5px; font-size: 20px}
.family-section-head p {margin: 0; color: var(--muted); font-size: 11px}
.family-wall-actions {display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap}
.family-wall-actions > span {padding: 6px 10px; border-radius: 999px; color: #9b5a42; background: #fbe7dc; font-size: 9px; font-weight: 700}
.family-wall-actions > .btn {min-height: 36px; padding: 8px 12px; font-size: 10px}
.family-wall-section {padding: 28px}
.family-photo-grid {display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 85px; gap: 8px; margin-top: 20px}
.family-photo {position: relative; grid-column: span 4; grid-row: span 2; padding: 0; overflow: hidden; border: 0; border-radius: 13px; background: #d8c8b5; cursor: zoom-in}
.family-photo.photo-1,.family-photo.photo-5 {grid-column: span 5}
.family-photo.photo-2,.family-photo.photo-6 {grid-column: span 3}
.family-photo.photo-3 {grid-column: span 4; grid-row: span 3}
.family-photo.photo-4 {grid-column: span 5; grid-row: span 3}
.family-photo img {width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease}
.family-photo.photo-upload {display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(202,99,70,.65); background: rgba(255,248,239,.92); color: var(--coral); cursor: pointer}
.family-photo.photo-upload input {position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none}
.family-photo.photo-upload b {font-size: 16px}
.family-photo.photo-upload span {position: static; padding: 0; background: none; color: var(--muted); font-size: 10px}
.family-photo:hover img {transform: scale(1.035)}
.family-photo span {position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 8px 9px; border-radius: 8px; color: #fff; background: #17382fa8; font-size: 9px; text-align: left; backdrop-filter: blur(7px)}

.family-page-head {margin: 5px 0 23px}
.family-page-head .text-back {margin-bottom: 26px}
.family-page-head h2 {margin: 0 0 9px; color: #223f37; font-size: 34px}
.family-page-head > p:last-of-type {max-width: 820px; color: var(--muted); font-size: 13px; line-height: 1.65}
.text-back {padding: 0; border: 0; color: #6d7e77; background: transparent; font-size: 11px; cursor: pointer}
.viewing-role {display: inline-flex; margin-top: 7px; padding: 7px 10px; border-radius: 999px; color: #9b583f; background: #fbe7dc; font-size: 10px}

.teacher-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
.teacher-card {position: relative; display: flex; min-height: 320px; flex-direction: column; padding: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fffdfa}
.teacher-card::after {content: ''; position: absolute; top: -55px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--teacher-glow, #f5cfb1)}
.teacher-card.tone-sunset {--teacher-glow:#f1ad8140}.teacher-card.tone-rose {--teacher-glow:#eeb9c540}.teacher-card.tone-peach {--teacher-glow:#ffc8a940}.teacher-card.tone-sand {--teacher-glow:#d9bc8140}.teacher-card.tone-sea {--teacher-glow:#77bdb340}.teacher-card.tone-coral {--teacher-glow:#ef836f40}
.teacher-rank {display: flex; align-items: center; gap: 10px; z-index: 1}
.teacher-rank span {color: var(--coral); font-size: 11px; font-weight: 800}
.teacher-rank b {font-size: 14px}
.teacher-status {align-self: flex-start; margin: 17px 0 6px; padding: 5px 8px; border-radius: 999px; color: #8a694c; background: #f4eadc; font-size: 9px}
.teacher-card h3 {margin: 8px 0; font-size: 23px}
.teacher-card > p {min-height: 42px; margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.65}
.teacher-numbers {display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 18px}
.teacher-numbers > span {display: flex; min-width: 0; flex-direction: column; padding: 11px; border-radius: 10px; background: #f7f2ea}
.teacher-numbers b {overflow: hidden; color: #2c5549; font-size: 15px; text-overflow: ellipsis; white-space: nowrap}
.teacher-numbers small {margin-top: 3px; color: #89958f; font-size: 9px}
.teacher-actions {display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto}
.teacher-actions .btn {min-height: 37px; padding: 8px 11px; font-size: 10px}

.course-detail-layout {display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 14px}
.course-facts dl {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 17px 0}
.course-facts dl div,.identity-detail div {padding: 12px; border-radius: 10px; background: #f7f2ea}
.course-facts dt,.identity-detail dt {color: #87938e; font-size: 9px}
.course-facts dd,.identity-detail dd {margin: 5px 0 0; color: #2a5045; font-size: 12px; font-weight: 700}
.course-chip-list,.identity-tags {display: flex; flex-wrap: wrap; gap: 7px}
.course-chip-list span,.identity-tags span {padding: 7px 10px; border-radius: 999px; color: #366256; background: #e7f1ed; font-size: 10px}
.policy-card {background: linear-gradient(145deg, #fff5e9, #fffdfa)}
.policy-card h3 {margin-top: 0}
.policy-card p {padding-bottom: 8px; border-bottom: 1px dashed #eadac6; color: #5e716a; font-size: 11px}
.policy-card small {color: #9b8d7f; font-size: 9px; line-height: 1.5}
.student-link-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px}
.student-link-list button {display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: #2b5146; background: #fff; text-align: left; cursor: pointer}
.student-link-list span {display: flex; flex-direction: column; gap: 4px}
.student-link-list small {color: #8c9893; font-size: 9px}
.student-link-list i {color: var(--coral); font-size: 10px; font-style: normal}

.script-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px}
.script-card {display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: #fffdfa}
.script-card > div:first-child {display: flex; align-items: center; gap: 9px}
.script-card > div:first-child span {color: var(--coral); font-size: 10px}
.script-card > div:first-child b {font-size: 13px}
.script-card > div:first-child small {margin-left: auto; color: #a2785d; font-size: 9px}
.script-card h3 {margin: 18px 0 7px; font-size: 20px}
.script-card > p {color: var(--muted); font-size: 10px; line-height: 1.6}
.script-card blockquote {margin: 10px 0; padding: 13px; border-left: 3px solid #df805e; border-radius: 0 9px 9px 0; color: #6c5549; background: #fbf0e7; font-size: 10px; line-height: 1.65}
.script-card dl {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px}
.script-card dl div {padding: 9px; border-radius: 8px; background: #f6f1ea}
.script-card dt {color: #909a95; font-size: 8px}
.script-card dd {margin: 4px 0 0; color: #46655c; font-size: 9px; font-weight: 700}

.family-report-form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 17px}
.family-report-form label,.review-panel label {display: flex; min-width: 0; flex-direction: column; gap: 6px}
.family-report-form label > span,.review-panel label > span {color: #546d64; font-size: 11px; font-weight: 700}
.family-report-form label small {color: #929b97; font-size: 9px}
.report-full {grid-column: 1 / -1}
.report-preview {display: flex; flex-direction: column; padding: 13px; border: 1px dashed #dfbfae; border-radius: 11px; background: #fff7f1}
.report-preview span {color: var(--coral); font-size: 9px; font-weight: 700}
.report-preview b {margin: 5px 0; color: #34594f; font-size: 12px}
.report-preview small {color: #7e8c86; font-size: 9px}
.report-actions {display: flex; gap: 8px}
.report-columns {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px}
.pending-column {border-top: 3px solid #e8936d}.linked-column {border-top: 3px solid #62a98d}
.report-list {display: grid; gap: 9px; margin-top: 15px}
.report-item {padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff}
.report-item > div:first-child {display: flex; align-items: center; gap: 8px}
.report-item > div:first-child span {padding: 4px 7px; border-radius: 999px; color: #a65d42; background: #fbe2d6; font-size: 8px}
.report-item.linked > div:first-child span {color: #34745e; background: #dff0e9}
.report-item > div:first-child b {font-size: 12px}
.report-item > div:first-child small {margin-left: auto; color: #97a09c; font-size: 8px}
.report-item dl {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 12px 0}
.report-item dl div {padding: 8px; border-radius: 7px; background: #f7f3ed}
.report-item dt {color: #929b97; font-size: 8px}
.report-item dd {margin: 3px 0 0; color: #49665e; font-size: 9px; font-weight: 650}
.report-item footer {display: flex; align-items: center; justify-content: space-between; gap: 8px}
.report-item footer small {color: #969f9b; font-size: 8px}
.report-item footer .btn {min-height: 34px; font-size: 9px}
.role-blocked {border-style: dashed; text-align: center}
.role-blocked > span,.exam-state > span {display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #9b5b43; background: #f8e5da; font-size: 9px}
.role-blocked h3,.exam-state h3 {margin: 12px 0 7px}
.role-blocked p,.exam-state p {color: var(--muted); font-size: 11px; line-height: 1.6}

.exam-flow {display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffdfa}
.exam-flow span {display: flex; align-items: center; gap: 8px; color: #89958f; font-size: 10px; font-weight: 700}
.exam-flow span b {display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #eee8df; font-size: 9px}
.exam-flow span.active {color: #a2553c}.exam-flow span.active b {color: #fff; background: var(--coral)}
.exam-flow span.done {color: #34735e}.exam-flow span.done b {color: #fff; background: #4f9b7f}
.exam-flow i {color: #c8c1b7; font-style: normal}
.distribution-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 15px}
.distribution-grid label {display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer}
.distribution-grid input {width: 17px; height: 17px; min-height: 0; accent-color: var(--coral)}
.distribution-grid span {display: flex; flex-direction: column}
.distribution-grid b {font-size: 11px}.distribution-grid small {margin-top: 3px; color: #8f9995; font-size: 8px}
.exam-state {padding: 40px; text-align: center}
.exam-paper form {display: grid; gap: 14px; margin-top: 16px}
.exam-paper fieldset {padding: 18px; border: 1px solid var(--line); border-radius: 13px}
.exam-paper legend {padding: 0 8px; color: #34564d; font-size: 12px; font-weight: 700}
.exam-paper legend b {margin-right: 7px; color: var(--coral)}
.exam-paper fieldset label {display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 10px; border-radius: 9px; background: #f8f4ee; color: #5f716b; font-size: 10px; cursor: pointer}
.exam-paper input[type="radio"] {width: 17px; height: 17px; min-height: 0; accent-color: var(--coral)}

.role-matrix {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px}
.role-matrix article {padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffdfa}
.role-matrix article.current {border-color: #de7d5c; box-shadow: inset 0 3px #de7d5c}
.role-matrix span {color: #2d5247; font-size: 14px; font-weight: 800}
.role-matrix p {min-height: 34px; color: #83908a; font-size: 9px; line-height: 1.5}
.role-matrix ul {margin: 12px 0 0; padding-left: 17px; color: #61736c; font-size: 9px; line-height: 1.8}
.identity-detail {display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0 0}
.approval-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px}
.approval-list label {display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff}
.approval-list span {display: flex; flex-direction: column; gap: 3px}.approval-list b {font-size: 11px}.approval-list small {color: #909995; font-size: 8px}
.approval-list input {width: 18px; height: 18px; min-height: 0; accent-color: var(--coral)}
.student-identity-layout {display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 14px}
.student-profile {text-align: center}.student-avatar {display: grid; width: 72px; height: 72px; margin: 0 auto 12px; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #e9825e, #bd5237); font-size: 27px; font-weight: 800}
.student-profile h3 {margin: 0}.student-profile > p {color: var(--muted); font-size: 11px}.student-profile .identity-tags {justify-content: center; margin: 14px 0}
.student-profile dl {text-align: left}.student-profile dl div {padding: 11px 0; border-top: 1px solid var(--line)}.student-profile dt {color: #89948f; font-size: 9px}.student-profile dd {margin: 4px 0 0; color: #385c52; font-size: 11px; font-weight: 700}
.student-profile .source-only {margin: 8px -8px -8px; padding: 12px; border: 1px dashed #e2ad91; border-radius: 9px; background: #fff3eb}
.review-panel {display: flex; flex-direction: column; gap: 13px}.review-panel h3 {margin: 0}.review-panel > p {margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6}.review-panel > small {margin-top: auto; color: #939c98; font-size: 9px}

.family-modal-backdrop,
.family-lightbox {position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; background: #102a24bf; backdrop-filter: blur(8px)}
.family-modal {position: relative; width: min(570px, 100%); max-height: calc(100vh - 40px); padding: 32px; overflow: auto; border: 1px solid #f2dfcf; border-radius: 22px; background: #fffdfa; box-shadow: 0 30px 90px #071a145c}
.onboarding-backdrop {z-index: 1600}
.onboarding-modal {display: grid; gap: 14px}
.onboarding-modal label:not(.modal-consent) {display: grid; gap: 7px; text-align: left}
.onboarding-modal input:not([type="checkbox"]) {width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit}
.modal-close {position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: #6b7c75; background: #fff; cursor: pointer}
.modal-icon {display: grid; width: 48px; height: 48px; margin-bottom: 17px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #e67b55, #ca573b); font-size: 22px}
.family-modal h2 {margin: 0 0 8px; color: #24443b; font-size: 27px}.family-modal > p:not(.eyebrow) {color: #7a8983; font-size: 11px}
.update-points {display: grid; gap: 8px; margin: 19px 0}.update-points span {display: flex; align-items: flex-start; gap: 10px; padding: 11px; border-radius: 10px; color: #566a63; background: #f7f2eb; font-size: 10px; line-height: 1.55}.update-points b {color: var(--coral); font-size: 10px}
.modal-consent {display: flex; align-items: center; gap: 9px; margin: 15px 0; padding: 12px; border: 1px solid #ead8ca; border-radius: 10px; background: #fff8f2; color: #4c625b; font-size: 10px}.modal-consent input {width: 18px; height: 18px; min-height: 0; accent-color: var(--coral)}
.family-modal > .btn {width: 100%; min-height: 44px}.family-modal > small {display: block; margin-top: 10px; color: #9ca39f; font-size: 8px; text-align: center}
.family-lightbox {z-index: 1300; grid-template-rows: minmax(0, 1fr) auto; color: #fff}.family-lightbox img {max-width: min(1100px, 94vw); max-height: 82vh; border-radius: 15px; box-shadow: 0 30px 90px #0008}.family-lightbox > button {position: fixed; top: 25px; right: 28px; width: 42px; height: 42px; border: 1px solid #ffffff54; border-radius: 50%; color: #fff; background: #102a249c; font-size: 20px; cursor: pointer}.family-lightbox p {margin: 12px 0 0; font-size: 11px}

@media (max-width: 1100px) {
  .login-screen {grid-template-columns: minmax(0, 1fr) 430px}
  .login-story-copy h1 {font-size: 51px}
  .family-home-copy {max-width: 460px}
  .family-quick-grid {grid-template-columns: repeat(2, 1fr)}
  .identity-detail {grid-template-columns: repeat(3, 1fr)}
  .role-matrix {grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 900px) {
  .demo-ribbon {max-width: calc(100% - 28px); white-space: nowrap}
  .login-screen {display: block; min-height: 100svh; padding: 0; background: #f7f2ea}
  .login-story {min-height: 48svh}
  .login-story-copy {left: 24px; bottom: 37px; width: calc(100% - 48px)}
  .login-story-copy h1 {font-size: clamp(34px, 10vw, 52px)}
  .login-story-copy > p:not(.eyebrow) {display: none}
  .family-values {display: none}
  .login-card {width: calc(100% - 28px); margin: -18px auto 28px; padding: 30px 22px 24px; border-radius: 20px}
  .login-brand {margin-bottom: 25px}
  aside {width: 100%; overflow: visible}
  .nav-group,.sidebar-note {display: none}
  nav button {padding: 9px 13px}
  nav button > span:first-child {display: none}
  main {width: 100%; margin-left: 0; padding-top: 16px}
  .family-home-hero {min-height: 440px}
  .family-home-copy {top: 42px; right: 24px; bottom: auto; left: 24px}
  .family-home-copy h2 {font-size: 34px}
  .checkin-card {right: 20px; bottom: 20px; left: 20px; width: auto}
  .family-metrics {grid-template-columns: repeat(2, 1fr)}
  .welcome-panel {grid-template-columns: 1fr}
  .role-preview-control {min-width: 0}
  .family-quick-grid {grid-template-columns: 1fr 1fr}
  .internal-intro {align-items: flex-start; flex-direction: column}
  .identity-chip {min-width: 0; align-items: flex-start}
  .teacher-grid,.script-grid,.report-columns {grid-template-columns: 1fr}
  .course-detail-layout,.student-identity-layout {grid-template-columns: 1fr}
  .family-photo-grid {grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px}
  .family-photo,.family-photo.photo-1,.family-photo.photo-2,.family-photo.photo-3,.family-photo.photo-4,.family-photo.photo-5,.family-photo.photo-6 {grid-column: span 1; grid-row: span 1}
  .family-wall-actions {justify-content: flex-start}
  .role-matrix,.approval-list {grid-template-columns: 1fr 1fr}
  .distribution-grid {grid-template-columns: repeat(2, 1fr)}
  .identity-detail {grid-template-columns: 1fr 1fr}
  .responsive-table .pill.ok,.responsive-table .pill.danger {display: inline-flex}
}

@media (max-width: 560px) {
  .login-story {min-height: 44svh}
  .family-home-hero {min-height: 470px}
  .family-home-copy h2 {font-size: 30px}
  .family-metrics,.family-quick-grid,.internal-card-grid,.role-matrix,.approval-list,.identity-detail {grid-template-columns: 1fr}
  .internal-card.priority-1 {grid-column: auto}
  .internal-card {min-height: 205px; padding: 22px}
  .internal-intro {padding: 24px}
  .internal-intro h2 {font-size: 29px}
  .family-report-form,.course-facts dl,.student-link-list {grid-template-columns: 1fr}
  .report-full {grid-column: auto}
  .script-card dl {grid-template-columns: 1fr}
  .exam-flow {align-items: flex-start; flex-direction: column}
  .exam-flow i {display: none}
  .distribution-grid {grid-template-columns: 1fr}
  .family-photo-grid {grid-template-columns: 1fr; grid-auto-rows: 190px}
  .family-section-head {align-items: flex-start}
  .family-wall-actions {align-items: stretch; flex-direction: column; width: 100%}
  .family-wall-actions > .btn {min-height: 44px}
  .family-modal {padding: 27px 20px 22px}
  .report-item footer .btn,
  .modal-close,
  .family-lightbox > button,
  .exam-paper fieldset label,
  .teacher-actions .btn,
  .text-back {min-width: 44px; min-height: 44px}
}