/* NOPPON APPLICATION v25 — Professional Foundation layer */
:root {
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 24px;
  --pf-space-6: 32px;
  --pf-radius-sm: 10px;
  --pf-radius-md: 16px;
  --pf-radius-lg: 24px;
  --pf-focus: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);
  --pf-success: #168451;
  --pf-warning: #B66A09;
  --pf-danger: #B53A46;
  --pf-info: #236AA2;
}

html { color-scheme: light; }
body.dark { color-scheme: dark; }

/* Promotion Studio v35 — card styles + scrolling styles */
.promotion-admin-card { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--maroon) 20%, var(--border)); scroll-margin-top: 92px; }
.promotion-admin-card > .admin-section-head {
  margin: 0;
  padding: 20px;
  background:
    radial-gradient(circle at 96% 0, rgba(var(--theme-highlight-rgb),.16), transparent 40%),
    linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 78%, var(--card)), var(--card) 68%);
  border-bottom: 1px solid var(--border);
}
.promotion-admin-card .admin-section-head h3 { margin: 2px 0 0; }
.promotion-admin-card .admin-section-head p { max-width: 690px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.promotion-admin-kicker { color: var(--maroon); font: 700 9px/1.2 'Kanit'; letter-spacing: .14em; }
.promotion-display-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px 20px 13px; }
.promotion-display-controls fieldset { min-width: 0; margin: 0; padding: 13px; background: color-mix(in srgb, var(--paper) 56%, var(--card)); border: 1px solid var(--border); border-radius: 17px; }
.promotion-display-controls legend { padding: 0 6px; color: var(--ink); font: 650 11.5px 'Kanit'; }
.promotion-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.promotion-choice {
  min-width: 0; padding: 11px 8px 10px; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: center; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.promotion-choice strong, .promotion-choice small { display: block; }
.promotion-choice strong { margin-top: 8px; font: 600 10.5px/1.3 'Kanit'; }
.promotion-choice small { margin-top: 3px; color: var(--muted); font-size: 8.5px; line-height: 1.35; }
.promotion-choice.active { background: var(--maroon-soft); border-color: color-mix(in srgb, var(--maroon) 58%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--maroon) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--maroon) 9%, transparent); }
.promotion-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 58%, transparent); outline-offset: 2px; }
@media (hover:hover) { .promotion-choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--maroon) 40%, var(--border)); } }
.promotion-layout-preview, .promotion-scroll-preview { position: relative; width: 72px; height: 48px; max-width: 100%; margin: 0 auto; overflow: hidden; background: color-mix(in srgb, var(--maroon-soft) 70%, var(--card)); border: 1px solid color-mix(in srgb, var(--maroon) 17%, var(--border)); border-radius: 10px; }
.promotion-layout-preview i, .promotion-scroll-preview i { display: block; position: absolute; background: linear-gradient(145deg, var(--maroon), var(--maroon-2)); }
.promotion-layout-preview.is-standard i:first-child { inset: 5px 5px 15px; border-radius: 5px; }
.promotion-layout-preview.is-standard i:last-child { left: 7px; right: 19px; bottom: 6px; height: 4px; border-radius: 99px; opacity: .55; }
.promotion-layout-preview.is-feature { background: linear-gradient(145deg, var(--maroon), var(--maroon-deep)); }
.promotion-layout-preview.is-feature i:first-child { left: 7px; right: 18px; bottom: 12px; height: 4px; background: #fff; border-radius: 99px; }
.promotion-layout-preview.is-feature i:last-child { left: 7px; right: 29px; bottom: 6px; height: 3px; background: rgba(255,255,255,.58); border-radius: 99px; }
.promotion-layout-preview.is-round { display: flex; align-items: center; justify-content: center; gap: 4px; background: transparent; border-style: dashed; }
.promotion-layout-preview.is-round i { position: static; width: 17px; height: 17px; border-radius: 50%; }
.promotion-layout-preview.is-round i:nth-child(2) { opacity: .75; }
.promotion-layout-preview.is-round i:nth-child(3) { opacity: .5; }
.promotion-scroll-preview { display: flex; align-items: center; gap: 4px; padding: 5px; }
.promotion-scroll-preview i { position: static; flex: 0 0 auto; border-radius: 4px; }
.promotion-scroll-preview.is-grid { display: grid; grid-template-columns: 1fr 1fr; }
.promotion-scroll-preview.is-grid i { width: 100%; height: 16px; }
.promotion-scroll-preview.is-row i { width: 22px; height: 34px; }
.promotion-scroll-preview.is-row i:last-child { opacity: .38; }
.promotion-scroll-preview.is-slide { justify-content: center; gap: 3px; }
.promotion-scroll-preview.is-slide i { width: 9px; height: 27px; opacity: .25; }
.promotion-scroll-preview.is-slide i:nth-child(2) { width: 39px; height: 36px; opacity: 1; }
.promotion-admin-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px; padding: 10px 12px; color: var(--muted); background: color-mix(in srgb, var(--maroon-soft) 50%, transparent); border-radius: 12px; font-size: 10px; }
.promotion-admin-summary b { color: var(--maroon); font: 650 13px 'Kanit'; }
.promotion-admin-list { padding: 4px 20px 14px; }

/* Public promotion layouts. These classes are shared by the existing gallery renderer. */
.img-grid.is-feature { grid-template-columns: 1fr; }
@media (min-width:620px) { .img-grid.is-feature { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.img-grid.is-feature .img-card { position: relative; min-height: 180px; aspect-ratio: 16/9; background: var(--maroon-deep); }
.img-grid.is-feature .img-wrap { height: 100%; }
.img-grid.is-feature .img-card img { width: 100%; height: 100%; aspect-ratio: auto; }
.img-grid.is-feature .img-card::after { content: ''; position: absolute; inset: 38% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(4,20,12,.85)); }
.img-grid.is-feature .img-card .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 16px 14px; color: #fff; font-size: 14px; line-height: 1.4; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.img-grid.is-feature .img-link-badge { background: rgba(255,255,255,.92); color: var(--maroon); box-shadow: 0 7px 18px rgba(0,0,0,.2); }
.img-grid.is-scroll-x.is-feature .img-card { width: min(78vw,340px); }
@media (min-width:620px) { .img-grid.is-scroll-x.is-feature .img-card { width: 390px; } }
.img-grid.is-carousel {
  display: flex !important; grid-template-columns: none !important; overflow-x: auto; gap: 14px;
  padding: 3px max(7%, 14px) 14px; margin-inline: calc(max(7%, 14px) * -1); scroll-padding-inline: max(7%, 14px);
  scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--maroon) 45%, transparent) transparent;
}
.img-grid.is-carousel .img-card { flex: 0 0 min(84vw,520px); width: min(84vw,520px); scroll-snap-align: start; scroll-snap-stop: always; }
.img-grid.is-carousel.is-feature .img-card { flex-basis: min(88vw,640px); width: min(88vw,640px); }
.img-grid.is-carousel.is-circle { align-items: flex-start; }
.img-grid.is-carousel.is-circle .img-card { flex-basis: 112px; width: 112px; }
@media (min-width:920px) {
  .img-grid.is-carousel .img-card { flex-basis: min(58%,560px); width: min(58%,560px); }
  .img-grid.is-carousel.is-feature .img-card { flex-basis: min(70%,700px); width: min(70%,700px); }
}
@media (prefers-reduced-motion: reduce) { .promotion-choice, .img-grid.is-carousel { scroll-behavior: auto; transition: none; } }

/* Learning Resource Manager v30 */
.knowledge-admin-card { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--maroon) 20%, var(--border)); }
.knowledge-admin-card > .admin-section-head {
  margin: 0;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--theme-highlight-rgb),.13), transparent 42%),
    linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 78%, var(--card)), var(--card) 66%);
  border-bottom: 1px solid var(--border);
}
.knowledge-admin-card .admin-section-head h3 { margin: 2px 0 0; }
.knowledge-admin-card .admin-section-head p { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.knowledge-admin-kicker { color: var(--maroon); font: 700 9px/1.2 'Kanit'; letter-spacing: .14em; }
.knowledge-admin-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 16px 20px 8px;
  padding: 12px 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--maroon-soft) 58%, var(--card));
  border: 1px solid color-mix(in srgb, var(--maroon) 18%, var(--border));
  border-radius: 15px;
}
.knowledge-admin-note > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.knowledge-admin-note > div { flex: 1; min-width: 0; }
.knowledge-admin-note b, .knowledge-admin-note small { display: block; }
.knowledge-admin-note b { font: 600 13px 'Kanit'; }
.knowledge-admin-note small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.knowledge-admin-note strong { color: var(--maroon); font: 650 13px 'Kanit'; white-space: nowrap; }
.knowledge-admin-list { padding: 0 20px 8px; }
.knowledge-admin-item .thumb,
.knowledge-admin-placeholder { width: 68px; height: 48px; flex: 0 0 68px; border-radius: 12px; }
.knowledge-admin-item .thumb { object-fit: cover; }
.knowledge-admin-placeholder { display: grid; place-items: center; color: var(--maroon); background: linear-gradient(135deg, var(--maroon-soft), var(--card)); border: 1px solid var(--border); font-size: 20px; }
.knowledge-admin-item .mini-btn:disabled { opacity: .32; cursor: default; }
.knowledge-admin-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; color: var(--muted); text-align: center; }
.knowledge-admin-empty > span { font-size: 30px; }
.knowledge-admin-empty b { color: var(--ink); font: 600 14px 'Kanit'; }
.knowledge-admin-empty p { margin: 0; font-size: 12px; }
.knowledge-display-settings { margin-top: 8px; padding: 20px; background: color-mix(in srgb, var(--paper) 48%, var(--card)); border-top: 1px solid var(--border); }
.knowledge-display-settings h4 { margin: 0 0 12px; color: var(--ink); font: 600 15px 'Kanit'; }
body.dark .knowledge-admin-kicker,
body.dark .knowledge-admin-note strong { color: var(--crimson); }

/* Teaching Calendar v34 — timeline/month views + targeted notifications */
.calendar-summary {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: 12px;
  margin: 2px 0 14px;
}
.calendar-summary > div {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  padding: 17px 18px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--maroon) 88%, #10291d), var(--crimson));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 21px;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--maroon) 19%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.calendar-summary > div::after { content: '∫'; position: absolute; right: 14px; bottom: -25px; font: 700 88px/1 'Kanit'; opacity: .09; }
.calendar-summary .calendar-next::after { content: 'π'; }
.calendar-summary span { display: block; margin-bottom: 5px; color: rgba(255,255,255,.7); font: 700 9px/1.2 'Kanit'; letter-spacing: .14em; }
.calendar-summary b { position: relative; z-index: 1; display: block; font: 650 31px/1.25 'Kanit'; }
.calendar-summary small { position: relative; z-index: 1; display: block; margin-top: 5px; color: rgba(255,255,255,.8); font-size: 11.5px; }
.calendar-summary .calendar-next b { max-width: 760px; font-size: clamp(17px, 3vw, 23px); }
.calendar-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.calendar-filterbar { display: flex; flex: 1; gap: 7px; overflow-x: auto; margin: 0; padding: 3px 1px 7px; scrollbar-width: none; }
.calendar-filterbar::-webkit-scrollbar { display: none; }
.calendar-filterbar button {
  min-height: 38px;
  padding: 8px 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 550 12px 'Kanit';
  white-space: nowrap;
  cursor: pointer;
}
.calendar-filterbar button.active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--maroon) 22%, transparent); }
.calendar-view-switch { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; background: color-mix(in srgb, var(--paper) 68%, var(--card)); border: 1px solid var(--border); border-radius: 14px; }
.calendar-view-switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 11px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font: 600 11px 'Kanit'; white-space: nowrap; cursor: pointer; }
.calendar-view-switch button.active { color: #fff; background: var(--maroon); box-shadow: 0 7px 17px color-mix(in srgb, var(--maroon) 21%, transparent); }
.calendar-view-switch .uic { font-size: 15px; }

.calendar-month-shell { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 23px; box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent); }
.calendar-month-header { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 17px 18px; background: linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 72%, var(--card)), var(--card) 72%); border-bottom: 1px solid var(--border); }
.calendar-month-header > button, .calendar-month-nav button { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; color: var(--maroon); background: var(--card); border: 1px solid color-mix(in srgb, var(--maroon) 22%, var(--border)); border-radius: 11px; cursor: pointer; }
.calendar-month-header > button .uic, .calendar-month-nav button .uic { font-size: 17px; }
.calendar-month-header > div:nth-child(2) { min-width: 0; }
.calendar-month-header span { display: block; color: var(--maroon); font: 700 8.5px/1.2 'Kanit'; letter-spacing: .16em; }
.calendar-month-header h3 { margin: 2px 0 0; color: var(--ink); font: 650 clamp(18px,3vw,24px)/1.25 'Kanit'; }
.calendar-month-header small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.calendar-month-nav { display: flex; gap: 6px; }
.calendar-month-nav button:first-child { min-width: 54px; font: 600 10.5px 'Kanit'; }
.calendar-month-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.calendar-month-weekdays, .calendar-month-grid { min-width: 720px; }
.calendar-month-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); color: var(--muted); background: color-mix(in srgb, var(--paper) 70%, var(--card)); border-bottom: 1px solid var(--border); }
.calendar-month-weekdays span { padding: 9px 7px; font: 600 10px 'Kanit'; text-align: center; }
.calendar-month-weekdays span:first-child, .calendar-month-weekdays span:last-child { color: color-mix(in srgb, var(--pf-danger) 78%, var(--muted)); }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); background: var(--border); gap: 1px; }
.calendar-month-day { position: relative; display: flex; min-width: 0; min-height: 118px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; color: var(--ink); background: var(--card); border: 0; text-align: left; cursor: pointer; }
.calendar-month-day:hover { z-index: 1; background: color-mix(in srgb, var(--maroon-soft) 38%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--maroon) 20%, transparent); }
.calendar-month-day.is-outside { color: var(--muted); background: color-mix(in srgb, var(--paper) 58%, var(--card)); opacity: .58; }
.calendar-month-day.is-selected { z-index: 2; background: color-mix(in srgb, var(--maroon-soft) 58%, var(--card)); box-shadow: inset 0 0 0 2px var(--maroon); }
.calendar-month-day-number { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 9px; font: 650 11px 'Kanit'; }
.calendar-month-day.is-today .calendar-month-day-number { color: #fff; background: var(--maroon); box-shadow: 0 5px 13px color-mix(in srgb, var(--maroon) 25%, transparent); }
.calendar-month-events { display: grid; gap: 4px; min-width: 0; }
.calendar-month-event { display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 3px; min-width: 0; padding: 4px 5px; color: var(--maroon); background: var(--maroon-soft); border-left: 3px solid var(--maroon); border-radius: 6px; font-size: 8px; line-height: 1.25; }
.calendar-month-event i { font-style: normal; }
.calendar-month-event b { font-size: 7.5px; }
.calendar-month-event > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-month-event.category-exam { color: #9f2738; background: color-mix(in srgb, #d94b62 11%, var(--card)); border-color: #d94b62; }
.calendar-month-event.category-assignment { color: #8b5b08; background: color-mix(in srgb, #d59b25 12%, var(--card)); border-color: #d59b25; }
.calendar-month-event.category-activity { color: #6740a8; background: color-mix(in srgb, #8b68c8 11%, var(--card)); border-color: #8b68c8; }
.calendar-month-event.category-holiday { color: #1c704d; background: color-mix(in srgb, #37a873 11%, var(--card)); border-color: #37a873; }
.calendar-month-event.is-important { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.calendar-month-more { color: var(--muted); font: 600 8px 'Kanit'; }
.calendar-month-agenda { margin-top: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 21px; }
.calendar-month-agenda-head { padding: 14px 17px; background: color-mix(in srgb, var(--paper) 55%, var(--card)); border-bottom: 1px solid var(--border); }
.calendar-month-agenda-head > span { display: block; color: var(--maroon); font: 700 8.5px 'Kanit'; letter-spacing: .13em; }
.calendar-month-agenda-head h3 { margin: 2px 0 0; color: var(--ink); font: 600 15px 'Kanit'; }
.calendar-month-agenda-list { display: grid; gap: 0; }
.calendar-month-agenda-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 15px 17px; border-bottom: 1px dashed var(--border); }
.calendar-month-agenda-item:last-child { border-bottom: 0; }
.calendar-month-agenda-item.is-important { border-left: 4px solid var(--gold); }
.calendar-month-agenda-icon { display: grid; place-items: center; width: 40px; height: 40px; background: var(--maroon-soft); border: 1px solid var(--border); border-radius: 13px; font-size: 19px; }
.calendar-month-agenda-item h4 { margin: 2px 0 0; color: var(--ink); font: 600 14px/1.4 'Kanit'; }
.calendar-month-agenda-item p { margin: 7px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.calendar-month-empty { padding: 24px 17px; color: var(--muted); font-size: 12px; text-align: center; }
.cal-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }
.cal-category, .cal-important {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--maroon);
  background: var(--maroon-soft);
  border-radius: 999px;
  font: 650 10px/1 'Kanit';
}
.cal-important { color: #8b351a; background: #fff0dc; }
body.dark .cal-category { color: var(--crimson); }
body.dark .cal-important { color: #ffd5a5; background: rgba(255,162,79,.15); }
.cal-item.is-important .cal-body { border-left: 4px solid var(--gold); }
.cal-facts { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.cal-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--maroon); font: 600 12px 'Kanit'; text-decoration: none; }
.cal-link .uic { width: 16px; height: 16px; }
.calendar-offline-note { margin: 0 0 16px; }

.calendar-admin-card { overflow: hidden; padding: 0; }
.calendar-admin-card > .admin-section-head {
  margin: 0;
  padding: 20px;
  background: radial-gradient(circle at 100% 0, rgba(var(--theme-highlight-rgb),.14), transparent 44%), linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 80%, var(--card)), var(--card) 68%);
  border-bottom: 1px solid var(--border);
}
.calendar-admin-card .admin-section-head p { max-width: 700px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.calendar-admin-kicker { color: var(--maroon); font: 700 9px/1.2 'Kanit'; letter-spacing: .14em; }
.calendar-admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 16px 20px 8px; }
.calendar-admin-stats > div { padding: 12px 14px; background: color-mix(in srgb, var(--paper) 52%, var(--card)); border: 1px solid var(--border); border-radius: 15px; }
.calendar-admin-stats b, .calendar-admin-stats span { display: block; }
.calendar-admin-stats b { color: var(--maroon); font: 650 17px 'Kanit'; }
.calendar-admin-stats span { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.calendar-migration-note { display: flex; align-items: center; gap: 11px; margin: 8px 20px; padding: 12px 14px; background: color-mix(in srgb, #fff5d8 70%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border)); border-radius: 15px; }
body.dark .calendar-migration-note { background: color-mix(in srgb, var(--gold) 10%, var(--card)); }
.calendar-migration-note > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--maroon); background: var(--card); border: 1px solid var(--border); border-radius: 12px; font-size: 19px; }
.calendar-migration-note > div { flex: 1; min-width: 0; }
.calendar-migration-note b, .calendar-migration-note small { display: block; }
.calendar-migration-note b { color: var(--ink); font: 600 13px 'Kanit'; }
.calendar-migration-note small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.calendar-admin-settings { display: grid; grid-template-columns: 1.2fr .7fr auto; align-items: end; gap: 10px; padding: 12px 20px; }
.calendar-admin-settings label { margin-top: 0; }
.calendar-admin-tools { display: grid; grid-template-columns: 1fr minmax(160px, .32fr); gap: 9px; padding: 4px 20px 12px; }
.calendar-admin-tools input, .calendar-admin-tools select { margin: 0; }
.calendar-admin-list { padding: 0 20px 14px; }
.calendar-admin-row { display: grid; grid-template-columns: 58px 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px dashed var(--border); }
.calendar-admin-row:last-child { border-bottom: 0; }
.calendar-admin-row time { display: grid; place-items: center; min-height: 56px; color: var(--maroon); background: var(--maroon-soft); border: 1px solid var(--border); border-radius: 14px; }
.calendar-admin-row time b { font: 650 20px/1 'Kanit'; }
.calendar-admin-row time span { font-size: 9.5px; }
.calendar-admin-symbol { display: grid; place-items: center; width: 40px; height: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; font-size: 19px; }
.calendar-admin-copy { min-width: 0; }
.calendar-admin-copy > div { display: flex; gap: 5px; }
.calendar-admin-type, .calendar-admin-important { color: var(--maroon); font: 650 9.5px 'Kanit'; }
.calendar-admin-important { color: #a15416; }
.calendar-admin-copy h4 { margin: 2px 0 0; color: var(--ink); font: 600 14px/1.4 'Kanit'; }
.calendar-admin-copy p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-admin-actions { display: flex; gap: 5px; }
.calendar-admin-actions button { display: grid; place-items: center; width: 35px; height: 35px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.calendar-admin-actions button.danger { color: var(--pf-danger); }
.calendar-admin-actions .uic { width: 16px; height: 16px; }
.calendar-admin-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 14px; color: var(--muted); text-align: center; }
.calendar-admin-empty span { font-size: 30px; }
.calendar-admin-empty b { color: var(--ink); font: 600 14px 'Kanit'; }
.calendar-admin-empty p { margin: 0; font-size: 11.5px; }
.calendar-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.calendar-event-modal input[type="date"], .calendar-event-modal input[type="time"] { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink); background: var(--card); border: 1.5px solid var(--border); border-radius: 13px; }
.calendar-audience-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.calendar-audience-options:not([hidden]) { display: grid; }
.calendar-audience-options label, .calendar-important-toggle, .calendar-notify-toggle { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 9px 10px; background: color-mix(in srgb, var(--maroon-soft) 55%, var(--card)); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.calendar-audience-options input, .calendar-important-toggle input, .calendar-notify-toggle input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--maroon); }
.calendar-important-toggle { margin-top: 13px; }
.calendar-notify-toggle { margin-top: 9px; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 8%, var(--card)); border-color: color-mix(in srgb, var(--pf-success) 28%, var(--border)); }
.calendar-notify-toggle input { accent-color: var(--pf-success); }
.calendar-important-toggle span, .calendar-notify-toggle span { display: block; }
.calendar-important-toggle b, .calendar-important-toggle small, .calendar-notify-toggle b, .calendar-notify-toggle small { display: block; }
.calendar-important-toggle b, .calendar-notify-toggle b { color: var(--ink); font: 600 12.5px 'Kanit'; }
.calendar-important-toggle small, .calendar-notify-toggle small { margin-top: 1px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
body.dark .calendar-admin-kicker, body.dark .calendar-admin-stats b, body.dark .calendar-admin-row time, body.dark .calendar-admin-type { color: var(--crimson); }

@media (max-width: 700px) {
  .calendar-summary { grid-template-columns: 1fr; }
  .calendar-summary > div { min-height: 96px; }
  .calendar-toolbar { flex-direction: column; align-items: stretch; }
  .calendar-view-switch { align-self: flex-start; order: -1; }
  .calendar-filterbar { width: 100%; }
  .calendar-month-header { grid-template-columns: 38px minmax(0,1fr) auto; padding: 14px; }
  .calendar-month-weekdays, .calendar-month-grid { min-width: 660px; }
  .calendar-month-day { min-height: 104px; padding: 6px; }
  .calendar-admin-card > .admin-section-head { flex-direction: column; align-items: stretch; gap: 13px; }
  .calendar-admin-card > .admin-section-head .btn { width: 100%; }
  .calendar-admin-stats { grid-template-columns: 1fr 1fr; padding-inline: 14px; }
  .calendar-admin-stats > div:last-child { grid-column: 1 / -1; }
  .calendar-migration-note { align-items: flex-start; flex-wrap: wrap; margin-inline: 14px; }
  .calendar-migration-note .btn { width: 100%; }
  .calendar-admin-settings, .calendar-admin-tools { grid-template-columns: 1fr; padding-inline: 14px; }
  .calendar-admin-list { padding-inline: 14px; }
  .calendar-admin-row { grid-template-columns: 50px 34px minmax(0, 1fr); gap: 8px; }
  .calendar-admin-symbol { width: 34px; height: 34px; font-size: 16px; }
  .calendar-admin-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .calendar-form-grid { grid-template-columns: 1fr; }
  .calendar-audience-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .knowledge-admin-card > .admin-section-head { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; }
  .knowledge-admin-card > .admin-section-head .btn { width: 100%; min-height: 44px; flex: 0 0 auto; }
  .knowledge-admin-note { align-items: flex-start; margin-inline: 14px; }
  .knowledge-admin-note strong { display: none; }
  .knowledge-admin-list { padding-inline: 14px; }
  .knowledge-admin-item .thumb,
  .knowledge-admin-placeholder { width: 58px; height: 44px; flex-basis: 58px; }
  .knowledge-display-settings { padding: 16px 14px; }
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--maroon-soft) 82%, transparent) 0, transparent 31rem),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, #fff) 0, var(--paper) 30rem);
}

button, input, select, textarea { font: inherit; }
button, [role="button"] { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .62; transform: none !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 75%, #fff);
  outline-offset: 3px;
  box-shadow: var(--pf-focus);
}

.foundation-live {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.foundation-network {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92vw, 560px);
  padding: 10px 14px;
  color: #fff;
  background: color-mix(in srgb, #27372e 94%, transparent);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  box-shadow: 0 16px 38px rgba(8,24,15,.28);
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px);
  transition: opacity .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.foundation-network.show { opacity: 1; transform: translate(-50%, 0); }
.foundation-network-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #F0B64A; box-shadow: 0 0 0 4px rgba(240,182,74,.16); }

.hero { border-radius: 0 0 36px 36px; box-shadow: 0 18px 55px rgba(6,65,34,.13); }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.09), transparent 42%, rgba(255,255,255,.04));
}
.hero-top, .hero-greet { max-width: 1120px; margin-left: auto; margin-right: auto; }
.hero-greet h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.greet-label { letter-spacing: -.02em; }
.greet-clock {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 11px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  font: 600 .72em/1 'Kanit';
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Personalized login identity v28 */
.hero-user { padding: 20px; }
.hu-top { gap: 16px; }
.hu-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.34), transparent 54%),
    rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.42);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 30px rgba(0,0,0,.18);
}
.hu-avatar img {
  display: block;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(-4%, 1%);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.16));
}
.hu-avatar.is-neutral { color: #fff; font-size: 32px; }
.hu-kicker {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.7) !important;
  font: 700 8.5px/1.2 'Kanit' !important;
  letter-spacing: .14em;
}
.hu-name h3 { font-size: clamp(18px, 3vw, 23px); white-space: normal; line-height: 1.32; }
.hu-name h3 + span { display: inline-flex; margin-top: 4px; }

.card, .student-analytics-card, .research-panel, .home-summary {
  border-color: color-mix(in srgb, var(--border) 82%, var(--maroon) 18%);
}
.card {
  box-shadow: 0 1px 2px rgba(12,45,27,.04), 0 10px 30px rgba(12,45,27,.055);
}
.card > h3:first-child { letter-spacing: -.01em; }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 650;
  letter-spacing: .005em;
}
.btn.sm { min-height: 38px; }
.btn[aria-busy="true"]::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

input, select, textarea {
  border-color: color-mix(in srgb, var(--border) 78%, var(--muted) 22%);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border) 50%, var(--maroon) 50%); }
input:focus, select:focus, textarea:focus {
  border-color: var(--maroon-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--maroon-2) 14%, transparent);
}

body.admin-active main { max-width: 1180px; }
.admin-overview { border: 1px solid rgba(255,255,255,.16); }
.admin-overview-head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-role-strip { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.admin-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.2;
}
.admin-role-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #83F0B0; box-shadow: 0 0 0 3px rgba(131,240,176,.14); }
#foundationSyncStatus[data-state="loading"] { background: rgba(224,174,73,.18); }
#foundationSyncStatus[data-state="off"] { background: rgba(181,58,70,.2); }
.admin-version-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 11px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 600 10px 'Kanit'; }

.foundation-security-note {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--maroon-soft) 86%, var(--card));
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--maroon) 28%);
  border-radius: 15px;
  font-size: 12.5px;
  line-height: 1.55;
}
.foundation-security-note .icon { color: var(--maroon); font-size: 17px; }
.foundation-security-note strong { display: block; color: var(--maroon); font-family: 'Kanit'; }
.admin-overview + .foundation-security-note { margin-bottom: 14px; }

.admin-jumpbar { top: 8px; }
.admin-jump { min-height: 38px; }
.notice { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent); }
.notice.ok { background: color-mix(in srgb, var(--card) 68%, #E2F7EA 32%); }
.notice.warn { background: color-mix(in srgb, var(--card) 70%, #FFF1D8 30%); }

/* Teacher system library: search first, then progressive disclosure by menu. */
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.admin-section-head h3 { margin: 0; }
.admin-link-tools {
  margin-bottom: 14px;
  padding: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--maroon-soft) 78%, var(--card)), color-mix(in srgb, var(--card) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--maroon) 28%);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.admin-link-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: 14px;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--border) 72%, var(--muted) 28%);
  border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.admin-link-search-wrap:focus-within {
  border-color: var(--maroon-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--maroon-2) 12%, transparent);
  transform: translateY(-1px);
}
.admin-link-search-wrap > .uic { flex: 0 0 auto; color: var(--muted); font-size: 17px; }
.admin-link-search-wrap input[type="search"] {
  width: 100%;
  min-width: 0;
  padding: 12px 44px 12px 10px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.admin-link-search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.admin-link-search-wrap button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transform: translateY(-50%);
}
.admin-link-search-wrap button.show { display: grid; place-items: center; }
.admin-link-search-wrap button:hover { color: var(--ink); background: var(--maroon-soft); }
.admin-link-filter-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.admin-link-filter-grid select {
  min-width: 0;
  padding: 9px 36px 9px 12px;
  border-radius: 12px;
  font-size: 13px;
}
.admin-link-result-meta {
  min-height: 18px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.admin-link-result-meta b { color: var(--ink); }
.admin-link-groups { display: grid; gap: 10px; }
.admin-link-group {
  overflow: clip;
  background: color-mix(in srgb, var(--card) 96%, var(--maroon-soft));
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--maroon) 18%);
  border-radius: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.admin-link-group[open] {
  border-color: color-mix(in srgb, var(--border) 55%, var(--maroon) 45%);
  box-shadow: 0 10px 28px rgba(13,57,31,.07);
}
.admin-link-group > summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.admin-link-group > summary::-webkit-details-marker { display: none; }
.admin-link-group > summary:hover { background: color-mix(in srgb, var(--maroon-soft) 55%, transparent); }
.admin-link-group-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--maroon);
  background: var(--maroon-soft);
  border: 1px solid var(--border);
  border-radius: 13px;
  font-size: 20px;
}
.admin-link-group-copy { min-width: 0; }
.admin-link-group-copy b,
.admin-link-group-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-link-group-copy b { color: var(--ink); font: 650 14.5px 'Kanit'; }
.admin-link-group-copy small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.admin-link-group-count {
  min-width: 31px;
  padding: 4px 8px;
  color: var(--maroon);
  background: var(--maroon-soft);
  border-radius: 999px;
  font: 650 11px 'Kanit';
  text-align: center;
}
.admin-link-group-chevron { color: var(--muted); transition: transform .18s ease; }
.admin-link-group[open] .admin-link-group-chevron { transform: rotate(180deg); }
.admin-link-group-list { padding: 0 14px 5px; border-top: 1px solid var(--border); }
.admin-link-filtered-list {
  padding: 1px 14px 5px;
  background: color-mix(in srgb, var(--card) 96%, var(--maroon-soft));
  border: 1px solid var(--border);
  border-radius: 16px;
}
.admin-system-item > .icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--ac-soft, var(--maroon-soft));
  border: 1px solid var(--border);
  border-radius: 13px;
}
.admin-system-item .admin-link-thumb { width: 62px; height: 46px; }
.admin-system-meta { display: flex !important; align-items: center; gap: 5px; }
.admin-system-meta .uic { flex: 0 0 auto; }
.admin-system-meta b { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.admin-system-desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.admin-link-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 6px 0 4px;
  color: var(--maroon);
  background: color-mix(in srgb, var(--maroon-soft) 72%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--border) 55%, var(--maroon) 45%);
  border-radius: 12px;
  font: 600 12.5px 'Sarabun';
  cursor: pointer;
}
.admin-link-more:hover { background: var(--maroon-soft); border-style: solid; }
.admin-link-more span { color: var(--muted); font-size: 11px; }
.admin-link-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--maroon-soft) 55%, transparent);
  border: 1px dashed var(--border);
  border-radius: 16px;
  text-align: center;
}
.admin-link-empty > span { font-size: 27px; }
.admin-link-empty b { color: var(--ink); font-family: 'Kanit'; }
.admin-link-empty p { max-width: 470px; font-size: 12.5px; line-height: 1.5; }

/* Professional quick actions + Theme Studio v25 */
.hero-quick-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 98px;
  padding: 0 13px;
  overflow: hidden;
  font: 650 12px 'Kanit';
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-quick-action .uic { position: relative; z-index: 1; flex: 0 0 auto; font-size: 16px; }
.hero-action-label { position: relative; z-index: 1; }
.hero-action-label .action-short { display: none; }
.hero-theme-action {
  color: #123d25;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(237,255,245,.9));
  border-color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 #fff, 0 10px 25px rgba(4,30,15,.2), 0 0 0 1px rgba(30,123,69,.08);
}
.hero-theme-action::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #2fa360, #4aa3df, #7c5ce0, #ef9b3d);
}
.theme-color-signal {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  background: var(--maroon-2);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--maroon-2) 30%, transparent);
}
.hero-teacher-action {
  color: #2c2108;
  background: linear-gradient(135deg, #fff7d8, #f2c35e);
  border-color: rgba(255,244,196,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 25px rgba(39,29,5,.22);
}
.hero-teacher-action::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 12%, rgba(255,255,255,.58) 35%, transparent 58%);
  transform: translateX(-125%);
  transition: transform .55s ease;
}
.hero-teacher-action:hover::before { transform: translateX(125%); }
.hero-teacher-action.is-home-action {
  color: #123d25;
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.78);
}
.hero-quick-action:hover { transform: translateY(-2px) scale(1.015); }
.hero-quick-action:active { transform: translateY(0) scale(.97); }
.hero-quick-action:focus-visible,
.gate-action:focus-visible {
  outline: 3px solid rgba(255,255,255,.98);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--maroon-2) 58%, transparent), 0 14px 32px rgba(4,30,15,.24);
}

.gate-utility-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
  font: 600 10.5px 'Kanit';
  letter-spacing: .04em;
}
.gate-utility-divider::before,
.gate-utility-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.gate-utility-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 11px;
}
.gate-utility-actions .gate-admin { margin-top: 0; }
.gate-utility-actions .gate-action {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 126px;
  padding: 14px;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--border);
  border-radius: 19px;
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gate-action-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gate-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
}
.gate-action-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.gate-action-copy { display: block; min-width: 0; }
.gate-action-copy strong,
.gate-action-copy small { display: block; }
.gate-action-copy strong { font: 650 14px 'Kanit'; line-height: 1.3; }
.gate-action-copy small { margin-top: 3px; font-size: 10.5px; line-height: 1.4; }
.gate-theme-action {
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--maroon-2) 20%, transparent), transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--maroon-soft) 82%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--border) 62%, var(--maroon-2) 38%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent), 0 9px 24px rgba(11,59,34,.08);
}
.gate-theme-action .gate-action-icon { color: #fff; background: linear-gradient(135deg, var(--maroon-2), var(--maroon)); box-shadow: 0 7px 16px color-mix(in srgb, var(--maroon) 25%, transparent); }
.gate-theme-action .gate-action-arrow { color: var(--maroon); font-size: 20px; transition: transform .18s ease; }
.gate-theme-action small { color: var(--muted); }
.gate-teacher-action {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(242,195,94,.22), transparent 46%),
    linear-gradient(145deg, #164c2f, #082718);
  border-color: rgba(111,198,147,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 28px rgba(5,35,20,.22);
}
.gate-teacher-action::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: -34px;
  width: 92px;
  height: 92px;
  border: 17px solid rgba(255,255,255,.045);
  border-radius: 50%;
  pointer-events: none;
}
.gate-teacher-action .gate-action-icon { color: #3b2a06; background: linear-gradient(135deg, #fff6d5, #e9b84f); box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.gate-action-badge { padding: 4px 7px; color: #f7d98f; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font: 700 7.5px 'Kanit'; letter-spacing: .12em; }
.gate-teacher-action small { color: rgba(255,255,255,.7); }
.gate-action:hover { transform: translateY(-3px); }
.gate-theme-action:hover { border-color: var(--maroon-2); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent), 0 15px 30px rgba(11,59,34,.14); }
.gate-theme-action:hover .gate-action-arrow { transform: translate(2px,-2px); }
.gate-teacher-action:hover { border-color: rgba(242,195,94,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 17px 34px rgba(5,35,20,.3); }
.gate-action:active { transform: translateY(0) scale(.98); }

/* Full theme coverage v25 — ทุกพื้นผิวและองค์ประกอบตกแต่งใช้ Theme Tokens กลาง */
html { background: var(--paper); }
body,
body.dark {
  background: var(--theme-body-background, var(--paper));
}
body::before {
  background:
    radial-gradient(760px 420px at 8% 8%, rgba(var(--theme-secondary-rgb),.14), transparent 68%),
    radial-gradient(640px 440px at 94% 36%, rgba(var(--theme-highlight-rgb),.11), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 64%, transparent), transparent 42%);
}
body::after { background-image: radial-gradient(rgba(var(--theme-rgb),.2) .65px, transparent .65px); }
body.dark::before {
  background:
    radial-gradient(720px 420px at 12% 4%, rgba(var(--theme-secondary-rgb),.14), transparent 68%),
    radial-gradient(620px 460px at 92% 38%, rgba(var(--theme-highlight-rgb),.08), transparent 72%);
}
.hero { box-shadow: inset 0 -1px 0 rgba(255,255,255,.12), 0 18px 48px rgba(var(--theme-deep-rgb),.22); }
.foundation-network {
  background: color-mix(in srgb, var(--theme-hero-end) 94%, transparent);
  box-shadow: 0 16px 38px rgba(var(--theme-deep-rgb),.3);
}
.card { box-shadow: var(--shadow); }
.admin-link-group[open],
.know-card.card-base,
.theme-preset.active { box-shadow: var(--shadow); }
.modal,
.gate-box,
.popup-modal { box-shadow: var(--shadow-lg), var(--edge-top); }
.modal-bg,
.theme-studio-bg { background: rgba(var(--theme-deep-rgb),.66); }
body.dark input,
body.dark select,
body.dark textarea { background: color-mix(in srgb, var(--card) 92%, var(--paper)); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--crimson);
  box-shadow: 0 0 0 4px rgba(var(--theme-secondary-rgb),.14);
}
.search-box:focus-within {
  border-color: color-mix(in srgb, var(--maroon-2) 58%, transparent);
  box-shadow: 0 0 0 4px rgba(var(--theme-secondary-rgb),.12), var(--elev-3), var(--inner-light);
}
body.dark .search-box { border-color: rgba(var(--theme-secondary-rgb),.2); }
body.dark .announce { background: linear-gradient(135deg, var(--maroon-soft), color-mix(in srgb, var(--card) 84%, transparent)); }
.btn { box-shadow: 0 6px 17px rgba(var(--theme-secondary-rgb),.28); }
.btn:hover { box-shadow: 0 9px 25px rgba(var(--theme-secondary-rgb),.38); }
.btn.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 72%, #fff), var(--gold)); color: var(--maroon-deep); }
.paste-box,
.paste-box::after,
.dev-card,
.admin-overview,
.student-analytics-head {
  background: linear-gradient(135deg, var(--theme-hero-end), var(--theme-hero-mid) 58%, var(--theme-hero-start));
}
.paste-box::before { background: conic-gradient(from 0deg, transparent 0 70%, var(--crimson) 82%, var(--gold) 90%, transparent 98%); }
.paste-row input { color: var(--maroon-deep); }
.home-summary .hs-ready::before,
.know-count-pill::before { box-shadow: 0 0 0 4px rgba(var(--theme-secondary-rgb),.13); }
.know-count-pill::before { background: var(--maroon-2); }
.bottom-nav { box-shadow: var(--elev-3), var(--inner-light); }
.nav-btn.active:not(.nav-btn-center) { box-shadow: var(--inner-light), 0 5px 14px rgba(var(--theme-secondary-rgb),.12); }
.nav-btn-center .uic { box-shadow: var(--elev-2), 0 0 0 5px var(--glass-strong), 0 0 25px rgba(var(--theme-secondary-rgb),.3); }
body.dark .card-base {
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--maroon-soft)), color-mix(in srgb, var(--card) 86%, var(--paper)));
  border-color: color-mix(in srgb, var(--border) 82%, var(--maroon) 18%);
}
body.dark .link-media-icon,
body.dark .know-media-badge { background: color-mix(in srgb, var(--theme-hero-end) 82%, transparent); }
.link-card.has-image .link-media::after,
.know-media.know-visual::after { background: linear-gradient(180deg, transparent 30%, rgba(var(--theme-deep-rgb),.66)); }
.know-resource-pill { color: color-mix(in srgb, var(--maroon-deep) 84%, var(--ink)); }
body.dark .know-resource-pill { background: color-mix(in srgb, var(--card) 76%, transparent); color: var(--ink); }

[data-accent="green"], [data-accent="teal"], [data-accent="gray"] {
  --ac: var(--theme-accent-1);
  --ac-soft: var(--theme-accent-soft-1);
}
[data-accent="blue"], [data-accent="indigo"] {
  --ac: var(--theme-accent-2);
  --ac-soft: var(--theme-accent-soft-2);
}
[data-accent="purple"], [data-accent="pink"] {
  --ac: var(--theme-accent-3);
  --ac-soft: var(--theme-accent-soft-3);
}
[data-accent="red"], [data-accent="orange"], [data-accent="amber"] {
  --ac: var(--theme-accent-4);
  --ac-soft: var(--theme-accent-soft-4);
}
body.dark [data-accent] { --ac-soft: color-mix(in srgb, var(--card) 76%, var(--ac)); }

.hero-theme-action {
  color: var(--maroon-deep);
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, #fff), color-mix(in srgb, var(--maroon-soft) 84%, var(--card)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card) 75%, #fff), 0 10px 25px rgba(var(--theme-deep-rgb),.22), 0 0 0 1px rgba(var(--theme-rgb),.1);
}
.hero-theme-action::before { background: linear-gradient(90deg, var(--maroon-2), var(--crimson), var(--gold)); }
.hero-teacher-action {
  color: var(--maroon-deep);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 64%, #fff), var(--gold));
  border-color: color-mix(in srgb, var(--gold) 58%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 25px rgba(var(--theme-deep-rgb),.24);
}
.hero-teacher-action.is-home-action { color: var(--maroon-deep); background: color-mix(in srgb, var(--card) 94%, #fff); }
.gate-teacher-action {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--theme-highlight-rgb),.24), transparent 46%),
    linear-gradient(145deg, var(--theme-hero-start), var(--theme-hero-end));
  border-color: rgba(var(--theme-secondary-rgb),.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 28px rgba(var(--theme-deep-rgb),.3);
}
.gate-teacher-action .gate-action-icon { color: var(--maroon-deep); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 62%, #fff), var(--gold)); }
.gate-action-badge { color: color-mix(in srgb, var(--gold) 76%, #fff); }
.gate-teacher-action:hover { border-color: rgba(var(--theme-highlight-rgb),.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 17px 34px rgba(var(--theme-deep-rgb),.38); }
.gate-theme-action { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent), 0 9px 24px rgba(var(--theme-deep-rgb),.1); }
.gate-theme-action:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent), 0 15px 30px rgba(var(--theme-deep-rgb),.17); }

.student-dashboard-card { border-color: color-mix(in srgb, var(--maroon) 20%, var(--border)); }
.analytics-kpi.theme-stat-1 { --kpi: var(--theme-stat-1); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-1)); }
.analytics-kpi.theme-stat-2 { --kpi: var(--theme-stat-2); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-2)); }
.analytics-kpi.theme-stat-3 { --kpi: var(--theme-stat-3); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-3)); }
.analytics-kpi.theme-stat-4 { --kpi: var(--theme-stat-4); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-4)); }
.analytics-kpi.theme-stat-5 { --kpi: var(--theme-stat-5); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-5)); }
.analytics-kpi.theme-stat-6 { --kpi: var(--theme-stat-6); --kpi-soft: color-mix(in srgb, var(--card) 84%, var(--theme-stat-6)); }
.analytics-kpi small { color: var(--kpi, var(--maroon-2)); }
.analytics-bar { background: linear-gradient(180deg, var(--crimson), var(--maroon)); box-shadow: 0 -6px 18px rgba(var(--theme-secondary-rgb),.18); }
.student-avatar { background: linear-gradient(135deg, var(--theme-accent-soft-1), var(--theme-accent-soft-2)); color: var(--maroon); }
body.dark .student-avatar { background: rgba(var(--theme-secondary-rgb),.18); color: var(--crimson); }
.student-page-btn.primary { box-shadow: 0 8px 18px rgba(var(--theme-rgb),.18); }
.research-export-btn.primary { background: var(--maroon); box-shadow: 0 8px 20px rgba(var(--theme-rgb),.22); }
.research-trend-svg .line-sessions { stroke: var(--maroon); }
.research-trend-svg .line-users { stroke: var(--gold); }
.research-trend-svg .dot-sessions { fill: var(--card); stroke: var(--maroon); }
.research-trend-svg .dot-users { fill: var(--card); stroke: var(--gold); }
.research-legend i { background: var(--maroon); }
.research-legend .users i { border-top-color: var(--gold); }
.research-rank-no { color: var(--maroon); background: var(--maroon-soft); }
body.dark .research-rank-no { background: rgba(var(--theme-secondary-rgb),.18); color: var(--crimson); }
.research-rank-bar { background: var(--maroon); }
.research-coverage { background: color-mix(in srgb, var(--card) 78%, var(--gold)); color: color-mix(in srgb, var(--ink) 74%, var(--gold)); }
body.dark .research-coverage { background: rgba(var(--theme-highlight-rgb),.14); color: color-mix(in srgb, var(--gold) 64%, #fff); }
body.theme-studio-open { overflow: hidden; }
.theme-studio-bg {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(4,18,10,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.theme-studio-bg.show { display: flex; }
.theme-studio {
  width: 100%;
  max-width: 680px;
  max-height: min(92vh, 820px);
  overflow-y: auto;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, #fff);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 70px rgba(4,30,15,.24);
  animation: theme-sheet-in .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes theme-sheet-in { from { opacity: 0; transform: translateY(48px); } }
.theme-studio-handle { width: 44px; height: 5px; margin: 0 auto 13px; background: var(--border); border-radius: 999px; }
.theme-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.theme-kicker { display: block; margin-bottom: 2px; color: var(--maroon); font: 700 9.5px 'Kanit'; letter-spacing: .14em; }
.theme-studio-head h2 { margin: 0; color: var(--ink); font-size: 21px; }
.theme-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  font-size: 23px;
  cursor: pointer;
}
.theme-close:hover { color: var(--ink); background: var(--maroon-soft); }
.theme-intro { margin: 7px 0 11px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.theme-source {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 9px 11px;
  background: var(--maroon-soft);
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--maroon) 28%);
  border-radius: 13px;
}
.theme-source > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--maroon); background: var(--card); border-radius: 9px; }
.theme-source b, .theme-source small { display: block; }
.theme-source b { color: var(--ink); font-size: 12.5px; }
.theme-source small { margin-top: 1px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.theme-preview {
  --preview-start: #2FA360;
  --preview-end: #0B3B22;
  --preview-accent: #D9A441;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 74px;
  overflow: hidden;
  padding: 13px;
  color: #fff;
  background: linear-gradient(125deg, var(--preview-start), var(--preview-end));
  border-radius: 17px;
  box-shadow: 0 13px 30px color-mix(in srgb, var(--preview-start) 24%, transparent);
}
.theme-preview::after { content: ''; position: absolute; width: 140px; height: 140px; right: -55px; top: -70px; background: rgba(255,255,255,.12); border-radius: 50%; }
.theme-preview > span { position: relative; z-index: 1; display: grid; place-items: center; width: 45px; height: 45px; color: var(--preview-start); background: #fff; border-radius: 13px; font: 700 10px 'Kanit'; }
.theme-preview > div { position: relative; z-index: 1; min-width: 0; }
.theme-preview b, .theme-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-preview b { font: 600 14px 'Kanit'; }
.theme-preview small { margin-top: 2px; color: rgba(255,255,255,.82); font-size: 10.5px; }
.theme-preview > i { position: relative; z-index: 1; width: 10px; height: 38px; background: var(--preview-accent); border-radius: 999px; }
.theme-label { margin: 13px 0 7px; color: var(--ink); font: 600 12px 'Kanit'; }
.theme-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.theme-mode-grid button {
  min-height: 43px;
  padding: 8px 9px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.theme-mode-grid button span { margin-left: 4px; font-size: 12px; }
.theme-mode-grid button.active { color: var(--maroon); background: var(--maroon-soft); border-color: var(--maroon); box-shadow: 0 0 0 2px color-mix(in srgb, var(--maroon) 12%, transparent); }
.theme-preset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.theme-preset {
  position: relative;
  min-width: 0;
  min-height: 84px;
  padding: 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.theme-preset:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--border) 45%, var(--maroon) 55%); }
.theme-preset.active { border-color: var(--maroon); box-shadow: 0 0 0 2px color-mix(in srgb, var(--maroon) 13%, transparent), 0 9px 22px rgba(11,50,27,.08); }
.theme-preset-colors { display: flex; margin-bottom: 7px; }
.theme-preset-colors i { width: 24px; height: 24px; border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.16); }
.theme-preset-colors i + i { margin-left: -7px; }
.theme-preset b, .theme-preset small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-preset b { font: 600 11.5px 'Kanit'; }
.theme-preset small { margin-top: 1px; color: var(--muted); font-size: 9.5px; }
.theme-preset em { position: absolute; top: 8px; right: 9px; display: none; color: var(--maroon); font-style: normal; }
.theme-preset.active em { display: block; }
.theme-custom-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 8px; }
.theme-custom-row input[type="color"] {
  width: 48px;
  height: 44px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.theme-custom-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-custom-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.theme-custom-row input[type="text"] { min-width: 0; padding-top: 9px; padding-bottom: 9px; text-transform: uppercase; }
.theme-studio-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 15px; }
.theme-studio-actions .btn { min-width: 0; }

.admin-theme-card { overflow: hidden; }
.admin-theme-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-theme-head h3 { margin: 0; }
.admin-theme-head .uic { color: var(--maroon); }
.admin-theme-badge { flex: 0 0 auto; padding: 5px 9px; color: var(--maroon); background: var(--maroon-soft); border-radius: 999px; font: 600 9px 'Kanit'; }
.admin-theme-preview { margin-bottom: 12px; }
.admin-theme-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.admin-theme-settings label { margin-top: 0; }
.admin-theme-custom { grid-template-columns: 48px minmax(0,1fr); }
.admin-theme-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.admin-theme-actions .btn { min-width: 0; }
.theme-safety-note { margin-top: 12px; }

.modal-bg { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.modal { box-shadow: 0 26px 70px rgba(5,30,16,.22); }

/* Student inbox + teacher notification center v25 */
.notification-toggle { position: relative; }
.notification-toggle[hidden] { display: none !important; }
.notification-toggle.has-unread {
  color: #fff;
  background: linear-gradient(145deg, var(--pf-danger), color-mix(in srgb, var(--pf-danger) 72%, #7b0713));
  border-color: color-mix(in srgb, var(--pf-danger) 68%, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--pf-danger) 32%, transparent);
}
.notification-toggle.has-unread .uic { animation: notificationBellRing 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
.notification-toggle.has-error { color: #fff; background: var(--pf-danger); }
.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #fff;
  background: var(--pf-danger);
  border: 2px solid color-mix(in srgb, var(--hero-start, var(--maroon)) 82%, #fff);
  border-radius: 999px;
  font: 700 9px/1 'Kanit';
  box-shadow: 0 4px 12px rgba(58,12,20,.24);
}
.notification-badge[hidden] { display: none; }
@keyframes notificationBellRing {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(13deg); }
  88% { transform: rotate(-11deg); }
  92% { transform: rotate(8deg); }
  96% { transform: rotate(-5deg); }
}

body.notification-open { overflow: hidden; }
.student-notification-bg {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.student-notification-bg.show { opacity: 1; visibility: visible; pointer-events: auto; }
.student-notification-center {
  width: min(100%, 720px);
  max-height: min(86vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 95% 0, color-mix(in srgb, var(--maroon-soft) 88%, transparent), transparent 18rem),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--maroon) 28%);
  border-radius: 28px 28px 18px 18px;
  box-shadow: 0 30px 100px rgba(4,25,14,.32);
  transform: translateY(28px) scale(.985);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.student-notification-bg.show .student-notification-center { transform: translateY(0) scale(1); }
.student-notification-handle { width: 42px; height: 4px; margin: -6px auto 13px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 38%, transparent); }
.student-notification-head, .student-notification-heading, .student-notification-toolbar, .notification-message-meta, .notification-message-actions {
  display: flex;
  align-items: center;
}
.student-notification-head { justify-content: space-between; gap: 14px; }
.student-notification-heading { min-width: 0; gap: 12px; }
.student-notification-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  color: #fff;
  background: linear-gradient(145deg, var(--maroon), var(--maroon-2));
  border-radius: 16px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--maroon) 24%, transparent);
}
.student-notification-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-kicker, .notification-admin-kicker { display: block; margin-bottom: 2px; color: var(--maroon); font: 700 8.5px/1.2 'Kanit'; letter-spacing: .14em; }
.student-notification-heading h2 { margin: 0; font-size: clamp(17px, 4vw, 22px); line-height: 1.25; }
.student-notification-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 24px;
}
.student-notification-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0 11px; }
.student-notification-summary > div:not(.notification-connect-error) { padding: 11px 13px; background: color-mix(in srgb, var(--maroon-soft) 58%, var(--card)); border: 1px solid var(--border); border-radius: 15px; }
.student-notification-summary b { display: block; color: var(--maroon); font: 700 18px/1.15 'Kanit'; }
.student-notification-summary span { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.notification-connect-error { grid-column: 1 / -1; padding: 11px 13px; color: var(--pf-danger); background: color-mix(in srgb, var(--pf-danger) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--pf-danger) 30%, var(--border)); border-radius: 15px; }
.app-badge-permission {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 0 11px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--pf-danger) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--pf-danger) 22%, var(--border));
  border-radius: 16px;
}
.app-badge-permission[hidden] { display: none; }
.app-badge-permission-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--pf-danger); border-radius: 13px; box-shadow: 0 7px 18px color-mix(in srgb, var(--pf-danger) 24%, transparent); }
.app-badge-permission-icon::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #ff3347; border: 2px solid var(--card); border-radius: 50%; }
.app-badge-permission-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-badge-permission-copy { min-width: 0; }
.app-badge-permission-copy b { display: block; color: var(--ink); font: 600 11.5px/1.3 'Kanit'; }
.app-badge-permission-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.app-badge-permission button { min-height: 34px; padding: 7px 11px; color: #fff; background: var(--pf-danger); border: 0; border-radius: 11px; font: 600 10px 'Kanit'; box-shadow: 0 6px 15px color-mix(in srgb, var(--pf-danger) 20%, transparent); }
.app-badge-permission.is-ready { background: color-mix(in srgb, var(--pf-success) 7%, var(--card)); border-color: color-mix(in srgb, var(--pf-success) 24%, var(--border)); }
.app-badge-permission.is-ready .app-badge-permission-icon { background: var(--pf-success); }
.app-badge-permission.is-blocked { background: color-mix(in srgb, var(--pf-warning) 7%, var(--card)); border-color: color-mix(in srgb, var(--pf-warning) 26%, var(--border)); }
.student-notification-toolbar { justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.student-notification-filters { display: flex; gap: 6px; }
.student-notification-filters button, .notification-mark-all {
  min-height: 34px;
  padding: 7px 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10.5px;
}
.student-notification-filters button.active { color: #fff; background: var(--maroon); border-color: var(--maroon); }
.notification-mark-all { color: var(--maroon); border-color: color-mix(in srgb, var(--maroon) 30%, var(--border)); }
.student-notification-list { min-height: 160px; overflow-y: auto; overscroll-behavior: contain; padding: 10px 4px 4px 0; scrollbar-gutter: stable; }
.notification-message { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; margin-bottom: 9px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 7px 22px color-mix(in srgb, var(--ink) 6%, transparent); }
.notification-message.is-unread { border-color: color-mix(in srgb, var(--maroon) 46%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--maroon-soft) 60%, var(--card)), var(--card) 66%); }
.notification-message.is-expired { opacity: .62; }
.notification-message-marker { display: grid; place-items: center; width: 38px; height: 38px; color: var(--maroon); background: var(--maroon-soft); border-radius: 13px; }
.notification-message-marker .uic { font-size: 18px; }
.notification-message.priority-important .notification-message-marker { color: var(--pf-warning); background: color-mix(in srgb, var(--pf-warning) 11%, var(--card)); }
.notification-message.priority-urgent .notification-message-marker { color: var(--pf-danger); background: color-mix(in srgb, var(--pf-danger) 10%, var(--card)); }
.notification-message-meta { justify-content: space-between; gap: 10px; }
.notification-message-meta time { color: var(--muted); font-size: 9.5px; }
.notification-priority { display: inline-flex; padding: 3px 7px; color: var(--maroon); background: var(--maroon-soft); border-radius: 999px; font: 650 8.5px/1.2 'Kanit'; }
.priority-important .notification-priority { color: var(--pf-warning); background: color-mix(in srgb, var(--pf-warning) 10%, var(--card)); }
.priority-urgent .notification-priority { color: var(--pf-danger); background: color-mix(in srgb, var(--pf-danger) 9%, var(--card)); }
.notification-message h3 { margin: 7px 0 4px; font-size: 14px; line-height: 1.4; }
.notification-message p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.65; overflow-wrap: anywhere; }
.notification-message-actions { flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.notification-message-actions a, .notification-message-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 6px 9px; color: var(--maroon); background: var(--maroon-soft); border: 0; border-radius: 10px; font-size: 10px; text-decoration: none; }
.notification-read-state { color: var(--muted); font-size: 9.5px; }
.notification-empty, .notification-history-empty { display: grid; place-items: center; min-height: 190px; padding: 28px 18px; color: var(--muted); text-align: center; }
.notification-empty .uic, .notification-history-empty .uic { margin-bottom: 10px; color: var(--maroon); font-size: 30px; }
.notification-empty b, .notification-history-empty b { color: var(--ink); font: 600 13px 'Kanit'; }
.notification-empty span, .notification-history-empty span { margin-top: 4px; font-size: 10.5px; }
.student-notification-privacy { margin: 8px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }

.notification-admin-card { overflow: hidden; padding: 0; scroll-margin-top: 92px; }
.notification-admin-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 19px 20px; background: linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 70%, var(--card)), var(--card) 62%); border-bottom: 1px solid var(--border); }
.notification-admin-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.notification-admin-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; color: #fff; background: linear-gradient(145deg, var(--maroon), var(--maroon-2)); border-radius: 16px; box-shadow: 0 10px 24px color-mix(in srgb, var(--maroon) 22%, transparent); }
.notification-admin-icon .uic { font-size: 22px; }
.notification-admin-title h3 { margin: 0; font-size: 17px; }
.notification-admin-title p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.notification-admin-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 14px 20px 0; }
.notification-admin-kpis > div { padding: 12px 13px; background: color-mix(in srgb, var(--paper) 64%, var(--card)); border: 1px solid var(--border); border-radius: 15px; }
.notification-admin-kpis b { display: block; color: var(--maroon); font: 700 19px/1.2 'Kanit'; }
.notification-admin-kpis span { color: var(--muted); font-size: 9.5px; }
.notification-admin-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 14px; padding: 14px 20px 20px; }
.notification-composer, .notification-history-panel { min-width: 0; padding: 15px; background: color-mix(in srgb, var(--paper) 48%, var(--card)); border: 1px solid var(--border); border-radius: 19px; }
.notification-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.notification-panel-head span { display: block; color: var(--ink); font: 600 13px 'Kanit'; }
.notification-panel-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.4; }
.notification-panel-head .notification-compose-step { color: color-mix(in srgb, var(--maroon) 36%, var(--border)); font: 700 24px/1 'Kanit'; }
.notification-composer label { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.notification-composer label span { color: var(--muted); font-size: 9px; font-weight: 400; }
.notification-audience-value:empty { display: none; }
.notification-audience-builder { display: grid; gap: 10px; margin-top: 10px; }
.notification-audience-builder fieldset { min-width: 0; margin: 0; padding: 11px; background: color-mix(in srgb, var(--card) 80%, var(--paper)); border: 1px solid var(--border); border-radius: 14px; }
.notification-audience-builder legend { padding: 0 5px; color: var(--ink); font: 600 10.5px 'Kanit'; }
.notification-audience-builder legend span { margin-left: 4px; color: var(--muted); font: 400 8.5px 'Sarabun'; }
.notification-room-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.notification-composer .notification-room-choice,
.notification-composer .notification-person-choice { margin: 0; cursor: pointer; }
.notification-room-choice { display: flex; align-items: center; gap: 8px; padding: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; }
.notification-room-choice:has(input:checked) { background: var(--maroon-soft); border-color: color-mix(in srgb, var(--maroon) 42%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--maroon) 12%, transparent); }
.notification-room-choice input, .notification-person-choice input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--maroon); }
.notification-room-choice span, .notification-person-choice span { min-width: 0; }
.notification-room-choice b, .notification-person-choice b { display: block; color: var(--ink); font: 600 10px/1.3 'Kanit'; }
.notification-room-choice small, .notification-person-choice small { display: block; margin-top: 1px; color: var(--muted); font-size: 8.5px; line-height: 1.35; }
.notification-audience-builder input[type="search"] { min-height: 36px; margin: 2px 0 8px; border-radius: 11px; font-size: 10px; }
.notification-person-list { max-height: 248px; overflow-y: auto; display: grid; gap: 6px; padding-right: 3px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.notification-person-choice { display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; }
.notification-person-choice:has(input:checked):not(.is-always) { background: var(--maroon-soft); border-color: color-mix(in srgb, var(--maroon) 42%, var(--border)); }
.notification-person-choice.is-always { cursor: default; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 8%, var(--card)); border-color: color-mix(in srgb, var(--pf-success) 28%, var(--border)); }
.notification-person-choice.is-always input { accent-color: var(--pf-success); }
.notification-person-choice em { margin-left: auto; padding: 3px 6px; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 10%, var(--card)); border-radius: 999px; font: 600 7.5px 'Kanit'; white-space: nowrap; }
.notification-builder-empty { display: block; grid-column: 1 / -1; padding: 8px; color: var(--muted); font-size: 9px; text-align: center; }
.notification-all-audience { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 11px 12px; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--pf-success) 26%, var(--border)); border-radius: 13px; }
.notification-all-audience > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; color: #fff; background: var(--pf-success); border-radius: 9px; font-weight: 700; }
.notification-all-audience b { display: block; color: var(--ink); font: 600 10.5px 'Kanit'; }
.notification-all-audience small { display: block; margin-top: 2px; color: var(--muted); font-size: 8.5px; line-height: 1.4; }
.notification-recipient-note { margin-top: 8px; padding: 9px 10px; color: var(--muted); background: color-mix(in srgb, var(--maroon-soft) 50%, transparent); border-radius: 11px; font-size: 9.5px; line-height: 1.45; }
.notification-recipient-note b { color: var(--maroon); }
.notification-directory-ok { display: block; margin-top: 4px; color: var(--pf-success); font-weight: 650; }
.notification-always-note { display: block; margin-top: 3px; color: var(--pf-success); font-weight: 600; }
.notification-directory-warning { color: var(--pf-warning); }
.notification-form-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; }
.notification-compose-actions { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8px; margin-top: 13px; }
.notification-sensitive-note { display: grid; gap: 2px; margin-top: 10px; padding: 10px 11px; color: var(--pf-warning); background: color-mix(in srgb, var(--pf-warning) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--pf-warning) 23%, var(--border)); border-radius: 12px; font-size: 9px; line-height: 1.45; }
.notification-sensitive-note b { font-size: 9.5px; }
.notification-admin-online { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; padding: 8px 10px; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 7%, var(--card)); border-radius: 11px; font-size: 9.5px; }
.notification-admin-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-success) 14%, transparent); }
.notification-admin-error { margin: 0 0 9px; font-size: 10px; }
.notification-campaign-history { max-height: 520px; overflow-y: auto; padding-right: 3px; }
.notification-campaign-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.notification-campaign-row:last-child { border-bottom: 0; }
.notification-campaign-symbol { display: grid; place-items: center; width: 34px; height: 34px; color: var(--maroon); background: var(--maroon-soft); border-radius: 11px; }
.notification-campaign-copy { min-width: 0; }
.notification-campaign-copy > div:first-child { display: flex; align-items: center; gap: 7px; }
.notification-campaign-copy time { color: var(--muted); font-size: 8.5px; }
.notification-campaign-copy h4 { margin: 5px 0 2px; overflow: hidden; color: var(--ink); font: 600 11.5px/1.35 'Kanit'; text-overflow: ellipsis; white-space: nowrap; }
.notification-campaign-copy p { margin: 0; color: var(--muted); font-size: 9px; }
.notification-read-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 8px; }
.notification-read-progress > span { height: 5px; overflow: hidden; background: color-mix(in srgb, var(--maroon-soft) 76%, var(--border)); border-radius: 999px; }
.notification-read-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--maroon), var(--maroon-2)); border-radius: inherit; }
.notification-read-progress b { color: var(--muted); font-size: 8.5px; white-space: nowrap; }
.notification-delete { display: grid; place-items: center; width: 31px; height: 31px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 10px; }
.notification-delete:hover { color: var(--pf-danger); border-color: color-mix(in srgb, var(--pf-danger) 44%, var(--border)); }
.notification-rules-help { margin-top: 10px; padding: 10px 11px; background: var(--card); border: 1px dashed color-mix(in srgb, var(--maroon) 26%, var(--border)); border-radius: 12px; }
.notification-rules-help summary { color: var(--maroon); cursor: pointer; font: 600 10px 'Kanit'; }
.notification-rules-help p { margin: 8px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.menu-access-card { overflow: hidden; padding: 0; scroll-margin-top: 92px; }
.menu-access-card > .admin-section-head { margin: 0; padding: 19px 20px; background: linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 72%, var(--card)), var(--card) 66%); border-bottom: 1px solid var(--border); }
.menu-access-card .admin-section-head h3 { margin: 2px 0 0; font-size: 17px; }
.menu-access-card .admin-section-head p { max-width: 680px; margin: 4px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.menu-access-kicker { display: block; color: var(--maroon); font: 700 8.5px/1.2 'Kanit'; letter-spacing: .14em; }
.menu-access-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; color: var(--maroon); background: var(--maroon-soft); border-radius: 999px; font: 700 8.5px 'Kanit'; letter-spacing: .08em; }
.menu-access-legend, .menu-access-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(220px,.8fr); align-items: center; gap: 14px; }
.menu-access-legend { padding: 10px 20px; color: var(--muted); background: color-mix(in srgb, var(--paper) 72%, var(--card)); border-bottom: 1px solid var(--border); font: 600 9px 'Kanit'; }
.menu-access-list { padding: 0 20px; }
.menu-access-row { min-height: 70px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.menu-access-row:last-child { border-bottom: 0; }
.menu-access-subject { display: flex; align-items: center; gap: 11px; min-width: 0; }
.menu-access-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: var(--ac,var(--maroon)); background: color-mix(in srgb, var(--ac,var(--maroon)) 11%, var(--card)); border-radius: 13px; }
.menu-access-subject strong { display: block; overflow: hidden; color: var(--ink); font: 600 11.5px/1.35 'Kanit'; text-overflow: ellipsis; white-space: nowrap; }
.menu-access-subject small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.menu-access-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.menu-access-choice { position: relative; margin: 0; cursor: pointer; }
.menu-access-choice input { position: absolute; opacity: 0; pointer-events: none; }
.menu-access-choice span { display: grid; place-items: center; min-height: 37px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 12px; font: 600 10px 'Kanit'; transition: .16s ease; }
.menu-access-choice input:checked + span { color: #fff; background: linear-gradient(145deg, var(--maroon), var(--maroon-2)); border-color: var(--maroon); box-shadow: 0 8px 18px color-mix(in srgb, var(--maroon) 18%, transparent); }
.menu-access-choice input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--maroon) 22%, transparent); outline-offset: 2px; }
.menu-access-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px 18px; background: color-mix(in srgb, var(--paper) 52%, var(--card)); border-top: 1px solid var(--border); }
.menu-access-actions > span { color: var(--muted); font-size: 9.5px; line-height: 1.45; }

@media (min-width: 620px) {
  .theme-studio-bg { align-items: center; padding: 24px; }
  .theme-studio { padding: 20px; border-radius: 28px; box-shadow: 0 28px 90px rgba(4,30,15,.28); }
  .theme-studio-handle { display: none; }
  .student-notification-bg { align-items: center; padding: 24px; }
  .student-notification-center { border-radius: 28px; }
  .student-notification-handle { display: none; }
}

@media (max-width: 619px) {
  input, select, textarea { font-size: 16px; }
  .hero { border-radius: 0 0 28px 28px; }
  .hero-greet h2 { gap: 7px; }
  .greet-clock { min-height: 30px; padding: 4px 9px; border-radius: 9px; font-size: .68em; }
  .hero-user { padding: 16px; }
  .hu-top { align-items: flex-start; gap: 12px; }
  .hu-avatar { width: 72px; height: 72px; flex-basis: 72px; border-radius: 23px; }
  .hu-name h3 { font-size: 17px; }
  .hu-kicker { letter-spacing: .09em; }
  .admin-overview-head { gap: 10px; }
  .promotion-admin-card > .admin-section-head { flex-direction: column; align-items: stretch; gap: 13px; }
  .promotion-admin-card > .admin-section-head .btn { width: 100%; }
  .promotion-display-controls { grid-template-columns: 1fr; padding: 13px 14px 11px; }
  .promotion-admin-summary { align-items: flex-start; flex-direction: column; gap: 2px; margin-inline: 14px; }
  .promotion-admin-list { padding-inline: 14px; }
  .admin-role-strip { display: grid; grid-template-columns: 1fr; }
  .admin-role-chip { width: 100%; }
  .admin-section-head { align-items: flex-start; }
  .admin-section-head .btn { flex: 0 0 auto; }
  .admin-link-tools { padding: 10px; border-radius: 15px; }
  .admin-link-filter-grid { grid-template-columns: 1fr; }
  .admin-link-group > summary { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; }
  .admin-link-group-count { grid-column: 3; grid-row: 1; }
  .admin-link-group-chevron { grid-column: 3; grid-row: 2; justify-self: center; margin-top: -11px; }
  .admin-link-group-list, .admin-link-filtered-list { padding-left: 10px; padding-right: 10px; }
  .admin-system-item .admin-system-meta { white-space: normal; overflow-wrap: anywhere; }
  .admin-system-item .acts { padding-left: 0; }
  .hbtns { gap: 5px; }
  .icon-btn { width: 36px; height: 36px; border-radius: 12px; }
  .hero-quick-action { width: auto; min-width: 61px; padding: 0 9px; gap: 5px; }
  .hero-action-label .action-full { display: none; }
  .hero-action-label .action-short { display: inline; }
  .theme-color-signal { width: 6px; height: 6px; }
  .brand { gap: 8px; }
  .brand .logo { height: 40px; min-width: 40px; padding: 0 8px; border-radius: 13px; }
  .brand h1 { font-size: 16px; }
  .brand small { max-width: 125px; }
  .gate-utility-actions { gap: 8px; }
  .theme-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-custom-row { grid-template-columns: 46px minmax(0,1fr); }
  .theme-custom-row .btn { grid-column: 1 / -1; }
  .theme-studio-actions, .admin-theme-actions, .admin-theme-settings { grid-template-columns: 1fr; }
  .admin-theme-head { display: block; }
  .admin-theme-badge { display: inline-flex; margin-top: 7px; }
  .foundation-network { border-radius: 16px; }
  .student-notification-bg { padding: 0; }
  .student-notification-center { width: 100%; max-height: 92vh; padding: 15px; border-radius: 25px 25px 0 0; }
  .student-notification-summary { margin-top: 12px; }
  .student-notification-toolbar { align-items: flex-start; }
  .student-notification-filters { flex-wrap: wrap; }
  .notification-message { padding: 12px; }
  .notification-admin-hero, .notification-admin-kpis, .notification-admin-grid { padding-left: 14px; padding-right: 14px; }
  .notification-admin-grid { grid-template-columns: 1fr; }
  .notification-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .notification-form-grid, .notification-compose-actions { grid-template-columns: 1fr; }
  .notification-campaign-history { max-height: none; overflow: visible; }
  .menu-access-legend { display: none; }
  .menu-access-list { padding: 0 14px; }
  .menu-access-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .menu-access-actions { align-items: stretch; flex-direction: column; padding: 13px 14px 16px; }
  .menu-access-actions .btn { width: 100%; }
}

@media (max-width: 399px) {
  .brand small { display: none; }
  .hero-quick-action { width: 36px; min-width: 36px; padding: 0; }
  .hero-action-label, .theme-color-signal { display: none; }
  .gate-utility-actions { grid-template-columns: 1fr; }
  .gate-utility-actions .gate-action { min-height: 104px; }
  .promotion-choice-grid { grid-template-columns: 1fr; }
  .promotion-choice { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; column-gap: 10px; text-align: left; }
  .promotion-choice .promotion-layout-preview, .promotion-choice .promotion-scroll-preview { grid-row: 1 / span 2; }
  .promotion-choice strong { margin-top: 0; }
  .theme-mode-grid button span { display: block; margin: 2px 0 0; font-size: 10.5px; }
  .student-notification-summary { grid-template-columns: 1fr; }
  .notification-connect-error { grid-column: auto; }
  .app-badge-permission { grid-template-columns: auto minmax(0,1fr); }
  .app-badge-permission button { grid-column: 1 / -1; width: 100%; }
  .notification-admin-kpis { grid-template-columns: 1fr; }
  .notification-message { grid-template-columns: 1fr; }
  .notification-message-marker { width: 34px; height: 34px; }
  .notification-room-grid { grid-template-columns: 1fr; }
}

/* System Card Studio v36 — five visual styles × four interaction styles */
.system-card-studio { overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--maroon) 20%, var(--border)); scroll-margin-top: 92px; }
.system-card-studio > .admin-section-head {
  margin: 0; padding: 20px;
  background:
    radial-gradient(circle at 96% 0, rgba(var(--theme-highlight-rgb),.16), transparent 40%),
    linear-gradient(118deg, color-mix(in srgb, var(--maroon-soft) 78%, var(--card)), var(--card) 68%);
  border-bottom: 1px solid var(--border);
}
.system-card-studio .admin-section-head h3 { margin: 2px 0 0; }
.system-card-studio .admin-section-head p { max-width: 690px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.system-card-kicker { color: var(--maroon); font: 700 9px/1.2 'Kanit'; letter-spacing: .14em; }
.system-card-live-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 10px; color: var(--pf-success); background: color-mix(in srgb, var(--pf-success) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--pf-success) 23%, var(--border)); border-radius: 999px; font: 600 9px 'Kanit'; white-space: nowrap; }
.system-card-live-badge i { width: 7px; height: 7px; background: var(--pf-success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-success) 13%, transparent); }
.system-card-live-badge.is-local { color: var(--pf-warning); background: color-mix(in srgb, var(--pf-warning) 8%, var(--card)); border-color: color-mix(in srgb, var(--pf-warning) 23%, var(--border)); }
.system-card-live-badge.is-local i { background: var(--pf-warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-warning) 13%, transparent); }
.system-card-studio-body { display: grid; gap: 12px; padding: 16px 20px 20px; }
.system-card-studio fieldset { min-width: 0; margin: 0; padding: 13px; background: color-mix(in srgb, var(--paper) 55%, var(--card)); border: 1px solid var(--border); border-radius: 17px; }
.system-card-studio legend { padding: 0 6px; color: var(--ink); font: 650 11.5px 'Kanit'; }
.system-style-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.system-motion-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.system-style-choice, .system-motion-choice { min-width: 0; padding: 11px 8px 10px; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; text-align: center; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.system-style-choice strong, .system-style-choice small, .system-motion-choice strong, .system-motion-choice small { display: block; }
.system-style-choice strong, .system-motion-choice strong { margin-top: 8px; font: 600 10.5px/1.3 'Kanit'; }
.system-style-choice small, .system-motion-choice small { margin-top: 3px; color: var(--muted); font-size: 8.5px; line-height: 1.35; }
.system-style-choice.active, .system-motion-choice.active { background: var(--maroon-soft); border-color: color-mix(in srgb, var(--maroon) 58%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--maroon) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--maroon) 9%, transparent); }
.system-style-choice:focus-visible, .system-motion-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 58%, transparent); outline-offset: 2px; }
@media (hover:hover) { .system-style-choice:hover, .system-motion-choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--maroon) 40%, var(--border)); } }

.system-style-preview { position: relative; display: block; width: 88px; height: 58px; max-width: 100%; margin: 0 auto; overflow: hidden; background: var(--card); border: 1px solid color-mix(in srgb, var(--maroon) 16%, var(--border)); border-radius: 12px; box-shadow: 0 5px 12px color-mix(in srgb, var(--maroon) 9%, transparent); }
.system-style-preview i, .system-style-preview b, .system-style-preview em { position: absolute; display: block; }
.system-style-preview i { left: 8px; top: 9px; width: 22px; height: 22px; background: linear-gradient(145deg, var(--maroon), var(--maroon-2)); border-radius: 7px; }
.system-style-preview b { left: 37px; right: 9px; top: 12px; height: 5px; background: var(--ink); border-radius: 99px; opacity: .75; }
.system-style-preview em { left: 37px; right: 21px; top: 22px; height: 4px; background: var(--muted); border-radius: 99px; opacity: .45; }
.system-style-preview::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 8px; background: var(--maroon-soft); border-radius: 99px; }
.system-style-preview.is-gradient { background: linear-gradient(145deg, color-mix(in srgb, var(--maroon-soft) 76%, var(--card)), color-mix(in srgb, var(--gold) 13%, var(--card))); border-color: color-mix(in srgb, var(--maroon) 38%, var(--border)); }
.system-style-preview.is-gradient::before { content: ''; position: absolute; width: 42px; height: 42px; right: -17px; top: -18px; background: color-mix(in srgb, var(--maroon-2) 23%, transparent); border-radius: 50%; }
.system-style-preview.is-glass { background: linear-gradient(145deg, color-mix(in srgb, var(--card) 76%, transparent), color-mix(in srgb, var(--maroon-soft) 53%, transparent)); border-color: color-mix(in srgb, #fff 65%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px color-mix(in srgb, var(--maroon) 15%, transparent); }
.system-style-preview.is-glass i { background: color-mix(in srgb, var(--card) 66%, var(--maroon-soft)); border: 1px solid color-mix(in srgb, #fff 65%, var(--border)); }
.system-style-preview.is-compact { height: 43px; margin-block: 7px 8px; }
.system-style-preview.is-compact i { width: 20px; height: 20px; top: 6px; left: 7px; }
.system-style-preview.is-compact b { left: 33px; top: 9px; }
.system-style-preview.is-compact em { left: 33px; top: 19px; }
.system-style-preview.is-compact::after { left: 33px; right: 12px; bottom: 6px; height: 5px; }
.system-style-preview.is-circle { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.system-style-preview.is-circle i { left: 50%; top: 1px; width: 39px; height: 39px; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 7px 14px color-mix(in srgb, var(--maroon) 18%, transparent); }
.system-style-preview.is-circle b { left: 21px; right: 21px; top: 45px; height: 5px; }
.system-style-preview.is-circle em, .system-style-preview.is-circle::after { display: none; }

.system-motion-preview { position: relative; display: grid; place-items: center; width: 72px; height: 43px; margin: 0 auto; }
.system-motion-preview i { display: block; width: 48px; height: 31px; background: linear-gradient(145deg, var(--maroon-soft), var(--card)); border: 1px solid color-mix(in srgb, var(--maroon) 24%, var(--border)); border-radius: 9px; box-shadow: 0 6px 12px color-mix(in srgb, var(--maroon) 10%, transparent); }
.system-motion-preview.is-lift i { transform: translateY(-4px); box-shadow: 0 11px 16px color-mix(in srgb, var(--maroon) 18%, transparent); }
.system-motion-preview.is-glow i { border-color: var(--maroon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--maroon) 14%, transparent), 0 0 17px color-mix(in srgb, var(--maroon) 34%, transparent); }
.system-motion-preview.is-tilt i { transform: rotate(-7deg); box-shadow: 8px 9px 15px color-mix(in srgb, var(--maroon) 18%, transparent); }
.system-motion-preview.is-none i { box-shadow: none; }

/* Gradient cards */
body[data-system-card-style="gradient"] .link-card,
body[data-system-card-style="gradient"] .menu-card { background: linear-gradient(145deg, color-mix(in srgb, var(--ac-soft, var(--maroon-soft)) 72%, var(--card)), var(--card) 62%, color-mix(in srgb, var(--gold) 8%, var(--card))); border-color: color-mix(in srgb, var(--ac, var(--maroon)) 27%, var(--border)); }
body[data-system-card-style="gradient"] .link-card::before,
body[data-system-card-style="gradient"] .menu-card::before { background: radial-gradient(circle at 102% -8%, color-mix(in srgb, var(--ac, var(--maroon)) 23%, transparent), transparent 43%), linear-gradient(110deg, rgba(255,255,255,.25), transparent 52%); }
body[data-system-card-style="gradient"] .link-card .icon,
body[data-system-card-style="gradient"] .menu-card .micon { color: #fff; background: linear-gradient(145deg, var(--ac, var(--maroon)), color-mix(in srgb, var(--ac, var(--maroon)) 72%, var(--maroon-deep))); border-color: color-mix(in srgb, var(--ac, var(--maroon)) 72%, #fff); box-shadow: 0 9px 19px color-mix(in srgb, var(--ac, var(--maroon)) 27%, transparent); }
body[data-system-card-style="gradient"] .menu-card .count,
body[data-system-card-style="gradient"] .link-card .cat { border-color: color-mix(in srgb, var(--ac, var(--maroon)) 18%, transparent); background: color-mix(in srgb, var(--ac-soft, var(--maroon-soft)) 72%, var(--card)); }
body.dark[data-system-card-style="gradient"] .link-card,
body.dark[data-system-card-style="gradient"] .menu-card { background: linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, var(--ac, var(--maroon))), color-mix(in srgb, var(--paper) 82%, var(--card))); }

/* Glass cards */
body[data-system-card-style="glass"] .link-card,
body[data-system-card-style="glass"] .menu-card { background: linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, transparent), color-mix(in srgb, var(--ac-soft, var(--maroon-soft)) 55%, transparent)); border-color: color-mix(in srgb, #fff 67%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 16px 35px rgba(var(--theme-deep-rgb),.11); -webkit-backdrop-filter: blur(17px); backdrop-filter: blur(17px); }
body[data-system-card-style="glass"] .link-card::before,
body[data-system-card-style="glass"] .menu-card::before { background: radial-gradient(circle at 12% -10%, rgba(255,255,255,.75), transparent 40%), linear-gradient(150deg, transparent, color-mix(in srgb, var(--ac, var(--maroon)) 8%, transparent)); }
body[data-system-card-style="glass"] .link-card .icon,
body[data-system-card-style="glass"] .menu-card .micon { background: color-mix(in srgb, var(--card) 68%, var(--ac-soft, var(--maroon-soft))); border-color: color-mix(in srgb, #fff 72%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px color-mix(in srgb, var(--ac, var(--maroon)) 17%, transparent); }
body.dark[data-system-card-style="glass"] .link-card,
body.dark[data-system-card-style="glass"] .menu-card { background: linear-gradient(145deg, color-mix(in srgb, var(--card) 72%, transparent), color-mix(in srgb, var(--maroon-soft) 38%, transparent)); border-color: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.3); }

/* Compact cards */
body[data-system-card-style="compact"] .menu-grid { grid-template-columns: 1fr; }
body[data-system-card-style="compact"] .menu-card { min-height: 82px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 11px; row-gap: 2px; align-items: center; padding: 11px 12px; text-align: left; }
body[data-system-card-style="compact"] .menu-card .micon { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; }
body[data-system-card-style="compact"] .menu-card h3 { align-self: end; font-size: 13.5px; }
body[data-system-card-style="compact"] .menu-card p { grid-column: 2; align-self: start; display: -webkit-box; margin: 0; overflow: hidden; font-size: 10.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
body[data-system-card-style="compact"] .menu-card .count { grid-column: 3; grid-row: 1 / 3; align-self: center; padding-inline: 8px; font-size: 9.5px; }
body[data-system-card-style="compact"] .link-card-body { padding: 12px 13px; gap: 6px; }
body[data-system-card-style="compact"] .link-card .icon { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
body[data-system-card-style="compact"] .link-card h3 { font-size: 14px; }
body[data-system-card-style="compact"] .link-card p { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
body[data-system-card-style="compact"] .link-card .cat { padding: 2px 8px; font-size: 9px; }
body[data-system-card-style="compact"] .link-card .go { padding: 4px 5px 4px 11px; font-size: 10.5px; }
body[data-system-card-style="compact"] .link-card .go .arrow { width: 24px; height: 24px; font-size: 12px; }
body[data-system-card-style="compact"] .link-card.has-image { display: grid; grid-template-columns: 108px minmax(0,1fr); }
body[data-system-card-style="compact"] .link-card.has-image .link-media { width: 108px; height: 100%; min-height: 120px; border: 0; border-right: 1px solid var(--border); }
body[data-system-card-style="compact"] .link-card.has-image .link-media-icon { left: 9px; bottom: 9px; width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
@media (min-width:620px) {
  body[data-system-card-style="compact"] .menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:920px) {
  body[data-system-card-style="compact"] .menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Interaction choices */
@media (hover:hover) {
  body[data-card-motion="glow"] .link-card:hover,
  body[data-card-motion="glow"] .menu-card:hover { transform: translateY(-2px) scale(1.006); border-color: var(--ac, var(--maroon)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac, var(--maroon)) 16%, transparent), 0 0 28px color-mix(in srgb, var(--ac, var(--maroon)) 28%, transparent), var(--shadow-lg); }
  body[data-card-motion="glow"] .link-card:hover .icon,
  body[data-card-motion="glow"] .menu-card:hover .micon { transform: scale(1.06); box-shadow: 0 0 20px color-mix(in srgb, var(--ac, var(--maroon)) 36%, transparent); }
  body[data-card-motion="tilt"] .link-card:nth-child(odd):hover,
  body[data-card-motion="tilt"] .menu-card:nth-child(odd):hover { transform: perspective(700px) rotateX(1.5deg) rotateY(-2.2deg) translateY(-4px); box-shadow: 9px 16px 34px rgba(var(--theme-deep-rgb),.18); }
  body[data-card-motion="tilt"] .link-card:nth-child(even):hover,
  body[data-card-motion="tilt"] .menu-card:nth-child(even):hover { transform: perspective(700px) rotateX(1.5deg) rotateY(2.2deg) translateY(-4px); box-shadow: -9px 16px 34px rgba(var(--theme-deep-rgb),.18); }
  body[data-card-motion="none"] .link-card:hover,
  body[data-card-motion="none"] .menu-card:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow), var(--edge-top); }
  body[data-card-motion="none"] .link-card:hover .icon,
  body[data-card-motion="none"] .menu-card:hover .micon { transform: none; box-shadow: none; }
}
body[data-card-motion="none"] .link-card::after,
body[data-card-motion="none"] .menu-card::after { display: none; }

@media (max-width:619px) {
  .system-card-studio > .admin-section-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .system-card-live-badge { align-self: flex-start; }
  .system-card-studio-body { padding: 13px 14px 16px; }
  .system-style-grid, .system-motion-grid { display: flex; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .system-style-grid::-webkit-scrollbar, .system-motion-grid::-webkit-scrollbar { display: none; }
  .system-style-choice, .system-motion-choice { flex: 0 0 148px; scroll-snap-align: start; }
  body[data-system-card-style="compact"] .link-card.has-image { grid-template-columns: 94px minmax(0,1fr); }
  body[data-system-card-style="compact"] .link-card.has-image .link-media { width: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-card-motion] .link-card:hover,
  body[data-card-motion] .menu-card:hover,
  body[data-card-motion] .link-card:hover .icon,
  body[data-card-motion] .menu-card:hover .micon { transform: none !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Student Access Control v38 — teacher console + learner warning sign */
body.student-access-blocked { overflow: hidden; }
.student-access-blocked-bg {
  position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center;
  padding: max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  visibility: hidden; opacity: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,210,44,.28), transparent 33%),
    radial-gradient(circle at 5% 92%, rgba(181,58,70,.24), transparent 31%),
    rgba(8,10,12,.91);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .22s ease, visibility .22s ease;
}
.student-access-blocked-bg.show { visibility: visible; opacity: 1; pointer-events: auto; }
.student-access-warning {
  width: min(100%,680px); max-height: calc(100dvh - max(28px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); overflow: auto; overscroll-behavior: contain;
  color: #17191c; background: #fff; border: 3px solid #f2bd1b; border-radius: 27px;
  box-shadow: 0 34px 90px rgba(0,0,0,.52), 0 0 0 7px rgba(255,205,31,.18), inset 0 0 0 1px rgba(255,255,255,.8);
  transform: translateY(14px) scale(.985); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.student-access-warning.is-person { border-color: #d84a57; box-shadow: 0 34px 90px rgba(0,0,0,.54), 0 0 0 7px rgba(216,74,87,.18), inset 0 0 0 1px rgba(255,255,255,.8); }
.student-access-blocked-bg.show .student-access-warning { transform: none; }
.student-access-stripes {
  height: 26px; border-radius: 23px 23px 0 0; border-bottom: 2px solid #17191c;
  background: repeating-linear-gradient(135deg,#ffd329 0 22px,#111419 22px 44px);
}
.student-access-warning-body { padding: 30px 36px 33px; text-align: center; background: linear-gradient(180deg,#fff 0,#fff 72%,#fff9e4 100%); }
.student-access-symbol {
  display: grid; place-items: center; width: 88px; height: 78px; margin: 0 auto 14px; color: #17191c;
  filter: drop-shadow(0 9px 13px rgba(184,129,0,.25));
}
.student-access-symbol svg { width: 84px; height: 76px; fill: #ffd84b; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.student-access-symbol svg path:nth-child(n+2) { fill: none; stroke-width: 2.2; }
.student-access-eyebrow { display: block; color: #a52734; font: 700 10px/1.3 'Kanit',sans-serif; letter-spacing: .15em; }
.student-access-warning h2 { margin: 7px 0 5px; color: #951f2b; font: 700 clamp(26px,5vw,36px)/1.2 'Kanit',sans-serif; text-wrap: balance; }
.student-access-target {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; margin: 10px auto 0; padding: 7px 13px 7px 8px;
  color: #762d35; background: #fff0f1; border: 1px solid #e7b6bb; border-radius: 99px; box-shadow: 0 5px 14px rgba(143,38,50,.08);
}
.student-access-target > span { flex: 0 0 auto; padding: 4px 9px; color: #fff; background: #b53a46; border-radius: 99px; font: 650 10px/1.2 'Kanit',sans-serif; }
.student-access-target > strong { min-width: 0; overflow-wrap: anywhere; font: 650 16px/1.35 'Kanit',sans-serif; }
.student-access-target.is-room { color: #765000; background: #fff7d3; border-color: #dfbc50; box-shadow: 0 5px 14px rgba(153,104,0,.08); }
.student-access-target.is-room > span { color: #17191c; background: #ffd84b; }
.student-access-reason-panel {
  position: relative; margin: 22px 0 16px; padding: 17px 18px 18px; text-align: left;
  background: linear-gradient(135deg,#fff3a8,#fff9d8); border: 2px solid #d9a300; border-left: 8px solid #b82e3d; border-radius: 15px;
  box-shadow: 0 8px 20px rgba(168,112,0,.12);
}
.student-access-reason-panel span { display: block; margin-bottom: 6px; color: #8d2330; font: 650 11px 'Kanit',sans-serif; }
.student-access-reason-panel p { margin: 0; color: #17191c; font: 650 17px/1.55 'Kanit',sans-serif; overflow-wrap: anywhere; }
.student-access-help { margin: 17px auto 18px; max-width: 520px; color: #454b52; font-size: 12.5px; line-height: 1.65; }
.student-access-return {
  width: 100%; min-height: 51px; padding: 11px 18px; color: #17191c; background: linear-gradient(180deg,#ffe16a,#ffd12d);
  border: 2px solid #17191c; border-radius: 13px; box-shadow: 0 9px 0 #17191c,0 15px 25px rgba(0,0,0,.2);
  cursor: pointer; font: 650 14px 'Kanit',sans-serif; transition: transform .15s ease, background .15s ease;
}
.student-access-return:hover { background: #ffca18; transform: translateY(-2px); }
.student-access-return:active { transform: translateY(4px); box-shadow: 0 4px 0 #17191c,0 8px 15px rgba(0,0,0,.18); }
.student-access-return:focus-visible { outline: 3px solid rgba(255,200,25,.55); outline-offset: 3px; }

.access-control-card { overflow: hidden; padding: 0; border-color: color-mix(in srgb,#d49a12 33%,var(--border)); scroll-margin-top: 92px; }
.access-control-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 22px;
  background:
    linear-gradient(118deg,color-mix(in srgb,#fff7d5 70%,var(--card)),var(--card) 67%),
    var(--card);
  border-bottom: 1px solid color-mix(in srgb,#d7a214 25%,var(--border));
}
body.dark .access-control-hero { background: linear-gradient(118deg,color-mix(in srgb,#8f6500 17%,var(--card)),var(--card) 67%); }
.access-control-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.access-control-hero-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; color: #181b1f; background: #ffd84b; border: 1px solid #d5a000; border-radius: 15px; box-shadow: 0 9px 20px rgba(166,112,0,.17); font-size: 25px; }
.access-control-hero-icon .uic { width: 25px; height: 25px; }
.access-control-heading h3 { margin: 2px 0 0; font-size: 19px; }
.access-control-heading p { max-width: 630px; margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.access-control-kicker { color: #9a6500; font: 700 9px/1.2 'Kanit',sans-serif; letter-spacing: .14em; }
.access-control-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #775000; background: color-mix(in srgb,#fff1b5 68%,var(--card)); border: 1px solid color-mix(in srgb,#d49a12 45%,var(--border)); border-radius: 99px; font: 650 9px 'Kanit',sans-serif; letter-spacing: .07em; }
.access-control-live i,.access-control-online i { width: 7px; height: 7px; background: #24a469; border-radius: 50%; box-shadow: 0 0 0 4px rgba(36,164,105,.13); }
.access-control-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.access-control-kpis div { padding: 14px 18px; background: var(--card); }
.access-control-kpis b,.access-control-kpis span { display: block; }
.access-control-kpis b { color: var(--ink); font: 650 21px 'Kanit',sans-serif; }
.access-control-kpis span { color: var(--muted); font-size: 9.5px; }
.access-control-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); }
.access-control-composer,.access-control-active { min-width: 0; padding: 20px 22px 22px; }
.access-control-active { background: color-mix(in srgb,var(--paper) 55%,var(--card)); border-left: 1px solid var(--border); }
.access-control-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.access-control-panel-head span,.access-control-panel-head small { display: block; }
.access-control-panel-head span { color: var(--ink); font: 650 14px 'Kanit',sans-serif; }
.access-control-panel-head small { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.access-control-panel-head > b { color: color-mix(in srgb,#bd8400 55%,var(--muted)); font: 700 27px/1 'Kanit',sans-serif; }
.access-control-mode { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; padding: 5px; background: color-mix(in srgb,var(--paper) 74%,var(--card)); border: 1px solid var(--border); border-radius: 14px; }
.access-control-mode button { min-height: 38px; padding: 8px 12px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: 600 11px 'Kanit',sans-serif; }
.access-control-mode button.active { color: #775000; background: color-mix(in srgb,#fff0ae 70%,var(--card)); border-color: color-mix(in srgb,#d49a12 40%,var(--border)); box-shadow: 0 5px 14px rgba(148,99,0,.09); }
.access-control-targets { margin: 10px 0 14px; }
.access-target-note { margin-bottom: 7px; color: var(--muted); font-size: 9.5px; }
.access-room-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.access-room-choice,.access-person-choice { position: relative; display: flex; align-items: center; gap: 9px; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s ease,background .15s ease,transform .15s ease; }
.access-room-choice { min-height: 52px; padding: 9px 11px; }
.access-room-choice input,.access-person-choice input { position: absolute; opacity: 0; pointer-events: none; }
.access-room-choice span,.access-person-choice > span:nth-of-type(2) { min-width: 0; flex: 1; }
.access-room-choice b,.access-room-choice small,.access-person-choice b,.access-person-choice small { display: block; }
.access-room-choice b,.access-person-choice b { overflow: hidden; color: var(--ink); font: 600 11px/1.35 'Kanit',sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.access-room-choice small,.access-person-choice small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.access-room-choice > i,.access-person-choice > i { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; color: transparent; border: 1px solid var(--border); border-radius: 7px; font: 700 11px sans-serif; }
.access-room-choice:has(input:checked),.access-person-choice:has(input:checked) { background: color-mix(in srgb,#fff3bf 55%,var(--card)); border-color: #d39a13; }
.access-room-choice:has(input:checked) > i,.access-person-choice:has(input:checked) > i { color: #fff; background: #b57a00; border-color: #b57a00; }
@media (hover:hover) { .access-room-choice:hover,.access-person-choice:hover { transform: translateY(-1px); border-color: color-mix(in srgb,#cf9510 56%,var(--border)); } }
.access-student-search { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.access-student-search > span { position: absolute; left: 11px; z-index: 1; color: var(--muted); font-size: 16px; pointer-events: none; }
.access-student-search input { width: 100%; height: 40px; padding-left: 36px; margin: 0; border-radius: 11px; }
.access-person-list { display: grid; gap: 6px; max-height: 255px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.access-person-choice { min-height: 54px; padding: 7px 9px; }
.access-person-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; color: var(--maroon); background: var(--maroon-soft); border-radius: 11px; font: 650 13px 'Kanit',sans-serif; }
.access-control-composer > label { display: flex; justify-content: space-between; gap: 10px; }
.access-control-composer textarea,.access-control-composer input[type="datetime-local"] { margin-bottom: 11px; }
.access-warning-preview { display: flex; align-items: center; gap: 11px; margin: 4px 0 12px; padding: 12px; color: #202226; background: #fff7d2; border: 1px solid #dba916; border-left-width: 5px; border-radius: 12px; }
.access-preview-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 34px; color: #17191c; background: #ffd84b; border: 1px solid #c59000; clip-path: polygon(50% 0,100% 100%,0 100%); padding-top: 8px; font: 800 16px sans-serif; }
.access-warning-preview small,.access-warning-preview b,.access-warning-preview p { display: block; margin: 0; }
.access-warning-preview small { color: #8b5b00; font-size: 8.5px; }
.access-warning-preview b { color: #17191c; font: 650 11px 'Kanit',sans-serif; }
.access-warning-preview p { margin-top: 1px; color: #5f522d; font-size: 9.5px; line-height: 1.4; }
.access-control-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 9px 15px; color: #17191c; background: #ffd84b; border: 1px solid #d5a000; border-radius: 12px; box-shadow: 0 8px 18px rgba(163,107,0,.14); cursor: pointer; font: 650 12px 'Kanit',sans-serif; }
.access-control-submit span { font-size: 16px; }
.access-control-submit:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }
.access-control-privacy { display: flex; gap: 9px; margin-top: 11px; padding: 10px 11px; color: var(--muted); background: color-mix(in srgb,var(--paper) 68%,var(--card)); border-radius: 11px; font-size: 8.8px; line-height: 1.45; }
.access-control-privacy b { flex: 0 0 auto; color: var(--ink); }
.access-control-online { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 11px; color: #168451; background: color-mix(in srgb,#daf3e6 65%,var(--card)); border-radius: 10px; font-size: 9.5px; }
.access-control-list { display: grid; gap: 8px; max-height: 540px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.access-control-empty { display: grid; justify-items: center; padding: 34px 16px; text-align: center; color: var(--muted); }
.access-control-empty span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 9px; color: #188553; background: color-mix(in srgb,#d8f3e5 70%,var(--card)); border-radius: 50%; font-size: 21px; }
.access-control-empty b,.access-control-empty small { display: block; }
.access-control-empty b { color: var(--ink); font: 600 12px 'Kanit',sans-serif; }
.access-control-empty small { margin-top: 3px; font-size: 9.5px; }
.access-control-row { display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: start; gap: 9px; padding: 11px; background: var(--card); border: 1px solid color-mix(in srgb,#dca518 36%,var(--border)); border-radius: 13px; box-shadow: 0 5px 14px rgba(var(--theme-deep-rgb),.04); }
.access-row-symbol { display: grid; place-items: center; width: 35px; height: 31px; color: #17191c; background: #ffd84b; border: 1px solid #c79406; clip-path: polygon(50% 0,100% 100%,0 100%); padding-top: 6px; font: 800 14px sans-serif; }
.access-row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.access-row-badges span { padding: 2px 7px; color: #7c5200; background: #fff3bd; border-radius: 99px; font: 600 8px 'Kanit',sans-serif; }
.access-row-badges time { color: var(--muted); font-size: 8px; }
.access-control-row h4 { margin: 5px 0 1px; color: var(--ink); font: 600 11.5px 'Kanit',sans-serif; }
.access-control-row p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 9.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.access-row-actions { align-self: center; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.access-control-row button { min-height: 32px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font: 600 8.5px 'Kanit',sans-serif; white-space: nowrap; transition: transform .15s ease,box-shadow .15s ease,background .15s ease; }
.access-control-row button:hover { transform: translateY(-1px); }
.access-control-row button:focus-visible { outline: 3px solid rgba(var(--theme-rgb),.2); outline-offset: 2px; }
.access-control-row .access-row-edit { color: var(--theme-deep); background: color-mix(in srgb,var(--theme-pale) 72%,var(--card)); border: 1px solid color-mix(in srgb,var(--theme) 38%,var(--border)); box-shadow: 0 4px 11px rgba(var(--theme-deep-rgb),.06); }
.access-control-row .access-row-release { color: #a22d38; background: color-mix(in srgb,#fae3e5 60%,var(--card)); border: 1px solid color-mix(in srgb,#bf4350 35%,var(--border)); }
.student-access-edit-bg { z-index: 100000; }
.student-access-edit-modal { width: min(100%,560px); padding: 25px; overflow: auto; max-height: calc(100dvh - 32px); border: 1px solid color-mix(in srgb,#d49a12 42%,var(--border)); border-radius: 23px; box-shadow: 0 30px 80px rgba(19,23,28,.3),0 0 0 6px rgba(255,211,41,.1); }
.student-access-edit-head { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.student-access-edit-head > div > span { display: block; color: #966200; font: 700 8.5px/1.2 'Kanit',sans-serif; letter-spacing: .14em; }
.student-access-edit-head h3 { margin: 3px 0 0; color: var(--ink); font-size: 19px; }
.student-access-edit-icon { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 40px; padding-top: 8px; color: #17191c; background: #ffd84b; border: 1px solid #bd8700; clip-path: polygon(50% 0,100% 100%,0 100%); font: 800 17px sans-serif; filter: drop-shadow(0 6px 8px rgba(154,101,0,.18)); }
.student-access-edit-target { display: flex; align-items: center; gap: 9px; margin: 17px 0; padding: 11px 13px; color: #742a34; background: color-mix(in srgb,#fff0f1 82%,var(--card)); border: 1px solid color-mix(in srgb,#d84a57 37%,var(--border)); border-left: 5px solid #d84a57; border-radius: 13px; }
.student-access-edit-target.is-room { color: #725000; background: color-mix(in srgb,#fff6ca 78%,var(--card)); border-color: color-mix(in srgb,#d39a13 43%,var(--border)); border-left-color: #d39a13; }
.student-access-edit-target span { flex: 0 0 auto; padding: 4px 8px; color: #fff; background: #b53a46; border-radius: 99px; font: 650 9px 'Kanit',sans-serif; }
.student-access-edit-target.is-room span { color: #17191c; background: #ffd84b; }
.student-access-edit-target strong { min-width: 0; color: inherit; font: 650 13px/1.4 'Kanit',sans-serif; overflow-wrap: anywhere; }
.student-access-edit-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.student-access-edit-label span { color: var(--muted); font-size: 9.5px; font-weight: 500; }
.student-access-edit-modal textarea { min-height: 126px; margin-bottom: 0; resize: vertical; border-width: 2px; line-height: 1.6; }
.student-access-edit-modal textarea:focus { border-color: #d39a13; box-shadow: 0 0 0 4px rgba(211,154,19,.12); }
.student-access-edit-live { display: flex; align-items: flex-start; gap: 9px; margin: 11px 0 17px; padding: 10px 11px; color: #167348; background: color-mix(in srgb,#daf3e6 65%,var(--card)); border-radius: 11px; font-size: 9.5px; line-height: 1.5; }
.student-access-edit-live i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 3px; background: #24a469; border-radius: 50%; box-shadow: 0 0 0 4px rgba(36,164,105,.13); }
.student-access-edit-actions { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 9px; }
.student-access-edit-actions .btn { min-height: 44px; }
.student-access-edit-actions .btn:disabled { opacity: .5; cursor: wait; }
.access-control-rules-help { margin-top: 12px; padding: 10px 12px; background: var(--card); border: 1px dashed color-mix(in srgb,#d49a12 46%,var(--border)); border-radius: 12px; }
.access-control-rules-help summary { cursor: pointer; color: #8b5c00; font: 600 9.5px 'Kanit',sans-serif; }
.access-control-rules-help p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
@media (max-width:780px) {
  .access-control-grid { grid-template-columns: 1fr; }
  .access-control-active { border-top: 1px solid var(--border); border-left: 0; }
}
@media (max-width:520px) {
  .student-access-blocked-bg { padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .student-access-warning { max-height: calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); border-width: 2px; border-radius: 22px; }
  .student-access-stripes { height: 20px; border-radius: 19px 19px 0 0; background-size: 36px 36px; }
  .student-access-warning-body { padding: 22px 17px 26px; }
  .student-access-symbol { width: 70px; height: 62px; }
  .student-access-symbol svg { width: 67px; height: 60px; }
  .student-access-target { display: flex; width: 100%; padding-right: 10px; }
  .student-access-target > strong { font-size: 14px; }
  .student-access-reason-panel { margin: 17px 0 13px; padding: 14px 14px 15px; border-left-width: 7px; }
  .student-access-reason-panel p { font-size: 15px; }
  .student-access-return { min-height: 48px; box-shadow: 0 6px 0 #17191c,0 11px 20px rgba(0,0,0,.18); }
  .access-control-hero { align-items: flex-start; padding: 17px 15px; }
  .access-control-heading { align-items: flex-start; }
  .access-control-hero-icon { width: 42px; height: 42px; border-radius: 13px; }
  .access-control-live { display: none; }
  .access-control-kpis div { padding: 11px 9px; }
  .access-control-kpis b { font-size: 18px; }
  .access-control-kpis span { font-size: 8px; }
  .access-control-composer,.access-control-active { padding: 16px 14px 18px; }
  .access-room-grid { grid-template-columns: 1fr 1fr; }
  .access-control-row { grid-template-columns: 31px minmax(0,1fr); }
  .access-row-actions { grid-column: 2; flex-direction: row; justify-self: stretch; }
  .access-row-actions button { flex: 1; }
  .student-access-edit-bg { align-items: flex-end; padding: 10px; }
  .student-access-edit-modal { width: 100%; max-height: calc(100dvh - max(20px,env(safe-area-inset-top))); padding: 20px 16px max(18px,env(safe-area-inset-bottom)); border-radius: 22px 22px 15px 15px; }
  .student-access-edit-actions { grid-template-columns: 1fr; }
  .student-access-edit-actions #btnSaveStudentAccessEdit { grid-row: 1; }
}
@media (max-width:359px) {
  .student-access-warning-body { padding: 17px 13px 21px; }
  .student-access-symbol { width: 58px; height: 51px; margin-bottom: 8px; }
  .student-access-symbol svg { width: 56px; height: 50px; }
  .student-access-eyebrow { font-size: 8px; letter-spacing: .11em; }
  .student-access-warning h2 { margin-top: 5px; font-size: 23px; }
  .student-access-target { gap: 6px; padding: 6px 8px 6px 6px; }
  .student-access-target > span { padding: 4px 7px; font-size: 9px; }
  .student-access-target > strong { font-size: 12.5px; }
  .student-access-reason-panel { margin-block: 13px 10px; }
  .student-access-reason-panel p { font-size: 14px; line-height: 1.45; }
  .student-access-help { margin-block: 10px 13px; font-size: 11px; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:560px) {
  .student-access-warning { width: min(94vw,820px); }
  .student-access-stripes { height: 17px; }
  .student-access-warning-body { display: grid; grid-template-columns: 135px minmax(0,1fr); grid-template-rows: auto auto auto auto; align-items: center; column-gap: 20px; padding: 15px 24px 18px; }
  .student-access-symbol { grid-column: 1; grid-row: 1 / 5; width: 112px; height: 100px; margin: 0 auto; }
  .student-access-symbol svg { width: 106px; height: 96px; }
  .student-access-eyebrow,.student-access-warning h2,.student-access-target,.student-access-reason-panel { grid-column: 2; }
  .student-access-eyebrow { align-self: end; text-align: left; }
  .student-access-warning h2 { margin: 2px 0; text-align: left; font-size: 25px; }
  .student-access-target { justify-self: start; margin: 3px 0 0; }
  .student-access-reason-panel { margin: 9px 0 5px; padding: 10px 13px; }
  .student-access-reason-panel p { font-size: 14px; line-height: 1.4; }
  .student-access-help,.student-access-return { grid-column: 1 / -1; }
  .student-access-help { margin: 8px auto 6px; font-size: 10.5px; }
  .student-access-return { min-height: 40px; box-shadow: 0 5px 0 #17191c,0 9px 15px rgba(0,0,0,.18); }
}
@media (forced-colors:active) {
  .student-access-warning,.student-access-reason-panel,.student-access-target,.student-access-return { border: 3px solid CanvasText; forced-color-adjust: auto; }
  .student-access-stripes { background: CanvasText; }
}

@media print {
  .hero, .search-wrap, .bottom-nav-wrap, .scroll-top-btn, .foundation-network,
  .admin-jumpbar, .research-export-actions, .student-table-actions, .student-notification-bg,
  .notification-compose-actions, .notification-rules-help, .notification-delete,
  .student-access-blocked-bg, .student-access-edit-bg, .access-control-composer, .access-control-rules-help { display: none !important; }
  body, main { background: #fff !important; color: #111 !important; max-width: none !important; }
  .card, .student-analytics-card, .research-panel { break-inside: avoid; box-shadow: none !important; border-color: #bbb !important; }
}