/* WEBAPP V1 — stylesheet aktif tunggal, hasil konsolidasi tanpa deklarasi identik yang saling menimpa. */
:root {
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --danger: #D64545;
  --warning: #F4A825;
  --info: #2E7ACB;
  --shadow: 0 18px 48px rgba(11, 61, 116, 0.12);
  --shadow-small: 0 6px 18px rgba(20, 34, 52, 0.08);
  --radius: 16px;
  --radius-small: 10px;
  --sidebar-width: 280px;
  --topbar-height: 84px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root {
  --brand-blue-dark: #0d477c;
  --brand-blue-soft: #eaf4ff;
  --brand-blue-pale: #f4f8fc;
}
.role-guardian .topbar {
  background-color: var(--brand-blue) !important;
}
.role-guardian .figma-guardian-home {
  background-color: var(--brand-blue) !important;
}
.figma-quick-section {
  background-color: var(--brand-blue) !important;
}
.role-guardian .topbar {
  background-image: linear-gradient(135deg, rgba(13,71,124,.94), rgba(45,141,210,.9)), url("../assets/foto-sekolah-ilustrasi.jpg") !important;
}
.figma-home-total .figma-bill-top > div > span {
  color: #0d477c !important;
}
.figma-home-total .figma-link {
  color: #0d477c !important;
}
.figma-home-bill .figma-bill-top > div > span {
  color: #0d477c !important;
}
.figma-home-bill .figma-link {
  color: #0d477c !important;
}
.money-reveal {
  display: inline-flex;
  max-width: 100%;
  align-items: baseline;
  gap: 7px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.money-reveal span {
  max-width: min(30vw, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.money-reveal small {
  color: currentColor;
  opacity: .7;
  font-size: .68em;
}
.money-full-value {
  padding: 18px;
  color: var(--brand-blue-dark);
  border-radius: 16px;
  background: var(--brand-blue-soft);
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 900;
  text-align: center;
}
.category-manager > div.is-inactive {
  opacity: .58;
}
.category-manager > div {
  min-width: 0;
}
.category-manager > div > span {
  min-width: 0;
}
.category-manager > div > span strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-manager > div > span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.figma-promo-card {
  background-image: linear-gradient(135deg, rgba(13,71,124,.93), rgba(23,105,170,.9)), url("../assets/foto-sekolah-ilustrasi.jpg") !important;
}
.figma-promo-card--payment {
  background-image: linear-gradient(135deg, #1769aa, #2d8dd2) !important;
}
.figma-social-buttons svg {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .money-reveal small {
    display: none;
  }
  .money-reveal span {
    max-width: 42vw;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .income-split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .category-manager > div {
    gap: 8px;
  }
  .category-manager .button {
    padding-inline: 8px;
    font-size: .72rem;
  }
}
.audience-combined .auth-panel::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),
    url("../assets/school-background-primary.jpg") center/cover no-repeat;
}
.audience-staff .password-eye {
  align-self: center !important;
}
.audience-developer .password-eye {
  align-self: center !important;
}
.audience-combined .password-eye {
  align-self: center !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}
.executive-grid {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(290px,.85fr);
  gap: 18px;
  margin-top: 18px;
}
.chart-card {
  min-width: 0;
}
.modern-chip {
  padding: 6px 10px;
  color: #087844;
  border-radius: 999px;
  background: #e1f5e9;
  font-size: .72rem;
  font-weight: 800;
}
.executive-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 18px;
  background: linear-gradient(115deg,#effaf3,#fff);
}
.executive-note h3 {
  margin: 3px 0;
}
.executive-note p {
  margin: 3px 0;
}
.income-hero {
  display: grid;
  grid-template-columns: minmax(260px,.9fr) minmax(0,1.3fr);
  gap: 24px;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(0,96,53,.18);
}
.income-hero > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
}
.income-hero > div:first-child strong {
  font-size: clamp(2rem,4vw,3.2rem);
}
.income-split {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.income-split span {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
}
.income-split b {
  font-size: 1.05rem;
}
.mini-column-chart {
  display: grid;
  grid-template-columns: repeat(7,minmax(42px,1fr));
  align-items: end;
  gap: 10px;
  min-height: 260px;
  padding: 24px 8px 0;
}
.mini-column {
  display: grid;
  grid-template-rows: 170px auto auto;
  min-width: 0;
  gap: 5px;
  text-align: center;
}
.mini-column > span {
  align-self: end;
  width: 72%;
  max-width: 46px;
  margin: 0 auto;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg,#50cd83,#087844);
}
.mini-column small {
  color: #667069;
  font-weight: 800;
}
.mini-column b {
  overflow: hidden;
  color: #35443a;
  font-size: .63rem;
  text-overflow: ellipsis;
}
.modern-list {
  display: grid;
}
.modern-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e3e8e4;
}
.modern-list > div:last-child {
  border-bottom: 0;
}
.modern-list span {
  display: grid;
  gap: 3px;
}
.modern-list small {
  color: #69726c;
}
.class-arrears-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 20px;
}
.class-arrears-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  color: #24342a;
  text-align: left;
  cursor: pointer;
}
.class-arrears-card:hover {
  transform: translateY(-2px);
}
.class-arrears-card span {
  display: grid;
  gap: 3px;
}
.class-arrears-card span:first-child strong {
  color: #087844;
  font-size: 1.7rem;
}
.class-arrears-card em {
  align-self: end;
  color: #b03e34;
  font-style: normal;
  font-weight: 900;
}
.class-arrears-card i {
  font-size: .78rem;
  font-style: normal;
  font-weight: 800;
}
.student-arrears-list {
  display: grid;
  gap: 14px;
}
.student-arrears-card summary {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}
.student-arrears-card summary::-webkit-details-marker {
  display: none;
}
.student-arrears-card summary span {
  display: grid;
  gap: 3px;
}
.student-arrears-card summary small {
  color: #6d756f;
}
.student-arrears-card summary em {
  color: #087844;
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}
.arrears-fee-lines {
  display: grid;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #e0e5e1;
}
.arrears-fee-lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}
.arrears-fee-lines span {
  display: grid;
  gap: 2px;
}
.arrears-student-total {
  margin-top: 5px;
  border-top: 2px solid #c9d4cc;
  color: #087844;
}
.arrears-grand-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 22px 26px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(110deg,#a9473c,#d8674e);
}
.arrears-grand-total strong {
  font-size: 1.45rem;
}
.category-manager {
  display: grid;
  gap: 4px;
}
.category-manager > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e1e6e2;
}
.category-manager span {
  display: grid;
  gap: 3px;
}
.waiver-choice-list {
  max-height: 310px;
  overflow: auto;
}
.modal-choice-list {
  max-height: 250px;
  overflow: auto;
}
.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 900px) {
  .executive-grid {
    grid-template-columns: 1fr;
  }
  .income-hero {
    grid-template-columns: 1fr;
  }
  .class-arrears-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .income-split {
    grid-template-columns: repeat(3,1fr);
  }
}
@media (max-width: 560px) {
  .class-arrears-grid {
    grid-template-columns: 1fr;
  }
  .income-split {
    grid-template-columns: 1fr;
  }
  .mini-column-chart {
    gap: 4px;
    overflow-x: auto;
  }
  .mini-column {
    min-width: 44px;
  }
  .student-arrears-card summary {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .student-arrears-card summary em {
    grid-column: 2/4;
  }
  .executive-note {
    align-items: flex-start;
    flex-direction: column;
  }
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
button {
  color: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}
a {
  -webkit-tap-highlight-color: transparent;
}
summary {
  -webkit-tap-highlight-color: transparent;
}
select {
  -webkit-tap-highlight-color: transparent;
}
img {
  max-width: 100%;
}
h1 {
  margin-top: 0;
}
h2 {
  margin-top: 0;
}
h3 {
  margin-top: 0;
}
h4 {
  margin-top: 0;
}
p {
  margin-top: 0;
}
h1 {
  line-height: 1.22;
  letter-spacing: -0.025em;
}
h2 {
  line-height: 1.22;
  letter-spacing: -0.025em;
}
h3 {
  line-height: 1.22;
  letter-spacing: -0.025em;
}
h1 {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}
h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
h3 {
  font-size: 1.05rem;
}
:focus-visible {
  outline: 3px solid rgba(46, 122, 203, 0.45);
  outline-offset: 3px;
}
.is-hidden {
  display: none !important;
}
.visually-hidden {
  position: absolute !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;
}
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  padding: 9px 14px;
  transform: translateY(-150%);
  color: var(--white);
  background: var(--primary-dark);
  border-radius: 8px;
}
.skip-link:focus {
  transform: translateY(0);
}
.muted {
  color: var(--muted);
}
.fine-print {
  color: var(--muted);
  font-size: 0.78rem;
}
.eyebrow {
  margin-bottom: 4px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.section-lead {
  max-width: 720px;
  color: var(--muted);
}
.text-danger {
  color: var(--danger);
}
.text-success {
  color: var(--primary-dark);
}
.text-warning {
  color: #8A5800;
}
.text-info {
  color: var(--info);
}
.text-right {
  text-align: right;
}
.nowrap {
  white-space: nowrap;
}
.splash-screen h1 {
  max-width: 520px;
  margin: 12px 0 22px;
}
.splash-kicker {
  margin: 24px 0 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.splash-version {
  margin-top: 24px;
  opacity: .78;
}
.loading-dots {
  display: flex;
  gap: 9px;
}
.loading-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  animation: dotPulse 1.1s infinite ease-in-out;
}
.loading-dots span:nth-child(2) {
  animation-delay: .14s;
}
.loading-dots span:nth-child(3) {
  animation-delay: .28s;
}
@keyframes dotPulse {
  0% {
    opacity: .35;
    transform: translateY(0);
  }
  65% {
    opacity: .35;
    transform: translateY(0);
  }
  100% {
    opacity: .35;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-7px);
  }
}
.school-logo {
  display: grid;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 20px;
  color: var(--white);
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
  font-weight: 900;
  letter-spacing: -.05em;
}
.school-logo--large {
  width: 94px;
  height: 94px;
  border-radius: 27px;
  font-size: 1.55rem;
}
.school-logo--small {
  width: 56px;
  height: 56px;
  border-radius: 0;
  font-size: .8rem;
}
.school-logo img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr);
}
.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(30px, 6vw, 80px);
  color: var(--white);
  background: linear-gradient(155deg, var(--primary-dark) 15%, var(--primary) 62%, #2aaa74 100%);
  transition: min-height .6s ease, padding .6s ease;
}
.auth-visual__pattern {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 8% 12%, rgba(255,255,255,.23) 0 2px, transparent 3px),
    radial-gradient(circle at 89% 18%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(120deg, transparent 72%, rgba(255,255,255,.08) 72% 73%, transparent 73%);
}
.school-scene {
  position: absolute;
  inset: 0;
  opacity: .62;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,55,34,.68), rgba(10,88,52,.24)), url("../assets/foto-sekolah-ilustrasi.jpg") center/cover no-repeat;
}
.school-scene__sun {
  position: absolute;
  top: 12%;
  right: 13%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 22px rgba(255,255,255,.04);
}
.school-scene__building {
  position: absolute;
  right: -4%;
  bottom: 8%;
  display: flex;
  width: 62%;
  height: 44%;
  align-items: flex-end;
  justify-content: space-evenly;
  padding: 11% 5% 4%;
  border-radius: 24px 24px 0 0;
  background: rgba(13, 56, 39, .25);
  transform: perspective(600px) rotateY(-6deg);
}
.school-scene__building::before {
  content: "";
  position: absolute;
  top: -16%;
  left: -4%;
  width: 108%;
  height: 17%;
  clip-path: polygon(5% 100%, 50% 0, 95% 100%);
  background: rgba(13, 56, 39, .29);
}
.school-scene__building span {
  width: 12%;
  height: 37%;
  border: 3px solid rgba(255,255,255,.15);
  border-bottom: 0;
  background: rgba(255,255,255,.08);
}
.school-scene__yard {
  position: absolute;
  right: -10%;
  bottom: -13%;
  width: 76%;
  height: 35%;
  border-radius: 50% 50% 0 0;
  background: rgba(7, 64, 38, .28);
  transform: rotate(-5deg);
}
.auth-brand {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 30px;
}
.auth-brand h1 {
  margin-bottom: 5px;
}
.auth-brand .eyebrow {
  color: #C9F4DE;
}
.auth-slogan {
  margin: 0;
  font-size: 1.05rem;
  opacity: .85;
}
.demo-mode-label {
  position: relative;
  z-index: 2;
  margin: 20px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.auth-visual::after {
  display: none;
  content: none;
}
.auth-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  transform: translateX(102%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .45s ease;
}
.auth-screen.login-open .auth-panel {
  transform: translateX(0);
  opacity: 1;
}
.auth-back {
  margin-bottom: 35px;
}
.demo-accounts {
  margin: 26px 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--background);
}
.demo-accounts summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 800;
}
.demo-account-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}
.demo-account {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  cursor: pointer;
}
.demo-account:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.demo-account strong {
  font-size: .84rem;
}
.demo-account code {
  color: var(--primary-dark);
  font-size: .75rem;
}
.demo-account small {
  grid-column: 1 / -1;
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}
.button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.button--large {
  min-height: 50px;
  padding: 12px 22px;
}
.button--small {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .8rem;
}
.button--full {
  width: 100%;
}
.button--primary:hover:not(:disabled) {
  background: var(--primary-dark);
}
.button--light {
  position: relative;
  z-index: 2;
  color: var(--primary-dark);
  background: var(--white);
  box-shadow: var(--shadow);
}
.button--ghost {
  color: var(--primary-dark);
  border-color: var(--line);
  background: transparent;
}
.button--danger {
  color: var(--white);
  background: var(--danger);
}
.button--warning {
  color: #513200;
  background: #FFE2A7;
}
.text-button {
  padding: 5px 0;
  color: var(--primary-dark);
  border: 0;
  background: none;
  font-weight: 800;
  cursor: pointer;
}
.icon-button {
  display: inline-grid;
  min-width: 44px;
  height: 44px;
  place-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
}
.icon-button:hover {
  background: var(--primary-soft);
}
.ui-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.stack {
  display: grid;
  gap: 17px;
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.field {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 750;
}
.field > span:first-child {
  font-size: .83rem;
}
.field input {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  background: var(--white);
}
.field select {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  background: var(--white);
}
.field textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  background: var(--white);
}
input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  border-radius: 9px;
  background: var(--white);
}
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  border-radius: 9px;
  background: var(--white);
}
textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  border: 1px solid #C9D7CE;
  border-radius: 9px;
  background: var(--white);
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(23, 138, 85, .12);
}
select:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(23, 138, 85, .12);
}
textarea:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(23, 138, 85, .12);
}
.password-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.form-grid .span-full {
  grid-column: 1 / -1;
}
.form-error {
  min-height: 1.1em;
  margin: -7px 0 0;
  color: var(--danger);
  font-size: .85rem;
  font-weight: 700;
}
.input-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}
.check-list {
  display: grid;
  gap: 5px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .83rem;
}
.check-list li::before {
  content: "○";
  margin-right: 7px;
  color: var(--muted);
}
.check-list li.is-valid {
  color: var(--primary-dark);
}
.check-list li.is-valid::before {
  content: "✓";
  color: var(--primary);
  font-weight: 900;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}
.toggle input {
  position: absolute;
  opacity: 0;
}
.toggle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #B9C5BD;
  cursor: pointer;
  transition: .2s ease;
}
.toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: .2s ease;
}
.toggle input:checked + span {
  background: var(--primary);
}
.toggle input:checked + span::after {
  transform: translateX(20px);
}
.app-shell {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  z-index: 400;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  box-shadow: 8px 0 30px rgba(10, 44, 30, .12);
}
.sidebar__brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 22px 19px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar__brand strong {
  display: block;
  font-size: .92rem;
}
.role-context {
  margin: 14px 14px 7px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}
.role-context strong {
  display: block;
}
.sidebar-nav {
  flex: 1 1 auto;
  overflow: auto;
  padding: 7px 10px 18px;
  scrollbar-width: thin;
}
.sidebar-nav__item {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
}
.sidebar-link {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
}
.nav-icon {
  display: grid;
  width: 24px;
  flex: 0 0 24px;
  place-items: center;
  opacity: .92;
}
.sidebar-link span:first-child {
  display: grid;
  width: 24px;
  flex: 0 0 24px;
  place-items: center;
  opacity: .92;
}
.nav-icon .ui-icon {
  width: 19px;
  height: 19px;
}
.sidebar__footer {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar-link--danger {
  color: #FFD3D3;
}
.demo-chip {
  margin: 4px 7px 8px;
  padding: 6px 9px;
  color: #FFE3AC;
  border: 1px solid rgba(244,168,37,.26);
  border-radius: 7px;
  background: rgba(244,168,37,.09);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}
.is-production .demo-mode-label {
  display: none;
}
.is-production .demo-chip {
  display: none;
}
.is-production .sidebar-link[data-action="reset-demo"] {
  display: none;
}
.is-production .button[data-action="reset-demo"] {
  display: none;
}
.is-production .app-footer span:last-child {
  display: none;
}
.sidebar-scrim {
  display: none;
  position: fixed;
  z-index: 350;
  inset: 0;
  background: rgba(4, 27, 17, .5);
  backdrop-filter: blur(2px);
}
.app-page {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}
.mobile-bottom-nav {
  display: none;
}
.topbar {
  position: sticky;
  z-index: 300;
  top: 0;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: 15px;
  padding: 13px clamp(18px, 3.2vw, 42px);
  border-bottom: 1px solid rgba(210, 224, 215, .85);
  backdrop-filter: blur(14px);
}
.topbar__menu {
  display: none;
}
.topbar__title {
  margin-right: auto;
}
.topbar__title h1 {
  margin: 0;
  overflow: hidden;
  font-size: 1.32rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__title .eyebrow {
  margin: 0;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notification-button {
  position: relative;
  font-size: 1rem;
}
.notification-button span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--danger);
  font-size: .63rem;
  font-weight: 900;
}
.notification-button span.has-count {
  display: flex;
}
.user-button {
  display: flex;
  max-width: 250px;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.user-button:hover {
  border-color: var(--line);
  background: var(--background);
}
.user-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--white);
  border-radius: 12px;
  background: var(--primary);
  font-size: .77rem;
  font-weight: 900;
}
.student-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--white);
  background: var(--primary);
  font-size: .77rem;
  font-weight: 900;
}
.student-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.student-avatar--large {
  width: 76px;
  height: 76px;
  font-size: 1rem;
}
.user-button__text {
  min-width: 0;
  text-align: left;
}
.user-button__text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-button__text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-content {
  width: min(100%, 1500px);
  min-height: calc(100vh - 145px);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px);
}
.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px clamp(20px, 3vw, 42px);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: .75rem;
}
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-heading h2 {
  margin-bottom: 7px;
}
.page-heading p {
  margin-bottom: 0;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 14px;
}
.section-heading h3 {
  margin: 0;
}
.grid {
  display: grid;
  gap: 17px;
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--sidebar {
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}
.card {
  padding: 20px;
  border: 1px solid rgba(211, 225, 216, .92);
  background: var(--surface);
}
.card--soft {
  border-color: #C9E6D6;
}
.card--dark {
  color: var(--white);
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  box-shadow: var(--shadow);
}
.card--info {
  background: #EEF6FF;
  border-color: #CFE3F7;
}
.card--warning {
  background: #FFF8E8;
  border-color: #F5DFAF;
}
.card--danger {
  background: #FFF3F3;
  border-color: #F2CCCC;
}
.card > :last-child {
  margin-bottom: 0;
}
.metric-card {
  position: relative;
  min-height: 124px;
  overflow: hidden;
}
.metric-card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -22px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary-soft);
  opacity: .78;
}
.metric-card__label {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 750;
}
.metric-card__value {
  margin: 0 0 5px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.metric-card__detail {
  color: var(--muted);
  font-size: .76rem;
}
.card--dark .metric-card__label {
  color: #C5E4D4;
}
.card--dark .metric-card__detail {
  color: #C5E4D4;
}
.card--dark.metric-card::after {
  background: rgba(255,255,255,.13);
}
.welcome-card {
  display: flex;
  min-height: 220px;
  align-items: center;
  gap: 24px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
}
.welcome-card__copy {
  position: relative;
  z-index: 2;
  flex: 1;
}
.welcome-card__copy h2 {
  margin-bottom: 8px;
}
.welcome-card__copy p {
  max-width: 610px;
  color: #CEE7D9;
}
.welcome-art {
  position: relative;
  width: min(260px, 30%);
  min-width: 160px;
  height: 155px;
}
.welcome-art::before {
  content: "";
  position: absolute;
  border-radius: 24px;
  transform: rotate(-7deg);
}
.welcome-art::after {
  content: "";
  position: absolute;
  transform: rotate(-7deg);
}
.welcome-art::before {
  inset: 15px 18px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.13);
}
.welcome-art::after {
  inset: 38px 0 0 55px;
  border-radius: 50% 50% 16px 16px;
  background: rgba(255,255,255,.13);
}
.profile-card {
  display: flex;
  gap: 16px;
  align-items: center;
}
.profile-card__body {
  flex: 1;
}
.profile-card__body h3 {
  margin: 0 0 3px;
}
.profile-card__body p {
  margin: 0;
  color: var(--muted);
}
.profile-select {
  width: min(100%, 300px);
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.quick-action {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.quick-action:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.quick-action:hover {
  transform: translateY(-1px);
}
.quick-action__icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--primary-dark);
  border-radius: 10px;
  background: var(--primary-soft);
}
.quick-action__icon .ui-icon {
  width: 19px;
  height: 19px;
}
.quick-action strong {
  font-size: .82rem;
}
.bill-card {
  display: grid;
  gap: 13px;
}
.bill-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bill-card__amount {
  margin: 2px 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.bill-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  color: var(--muted);
  font-size: .8rem;
}
.badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: #EDF2EF;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: #EDF2EF;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.status-paid {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-success {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-healthy {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-verified {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-active {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-completed {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-processed {
  color: #0C6B3F;
  background: #DCF4E7;
}
.status-unpaid {
  color: #765000;
  background: #FFF0C8;
}
.status-new {
  color: #765000;
  background: #FFF0C8;
}
.status-queued {
  color: #765000;
  background: #FFF0C8;
}
.status-draft {
  color: #765000;
  background: #FFF0C8;
}
.status-pending {
  color: #175D9B;
  background: #E0EEFC;
}
.status-in_progress {
  color: #175D9B;
  background: #E0EEFC;
}
.status-sandbox {
  color: #175D9B;
  background: #E0EEFC;
}
.status-simulated {
  color: #175D9B;
  background: #E0EEFC;
}
.status-scheduled {
  color: #175D9B;
  background: #E0EEFC;
}
.status-retry {
  color: #175D9B;
  background: #E0EEFC;
}
.status-overdue {
  color: #A22E2E;
  background: #FBE0E0;
}
.status-failed {
  color: #A22E2E;
  background: #FBE0E0;
}
.status-locked {
  color: #A22E2E;
  background: #FBE0E0;
}
.status-error {
  color: #A22E2E;
  background: #FBE0E0;
}
.status-refunded {
  color: #A22E2E;
  background: #FBE0E0;
}
.status-partially_paid {
  color: #67439B;
  background: #ECE4F7;
}
.status-waived {
  color: #67439B;
  background: #ECE4F7;
}
.status-inactive {
  color: #67439B;
  background: #ECE4F7;
}
.status-cancelled {
  color: #56625B;
  background: #E7ECE9;
}
.status-closed {
  color: #56625B;
  background: #E7ECE9;
}
.status-alumni {
  color: #56625B;
  background: #E7ECE9;
}
.readonly-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: .83rem;
}
.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: .83rem;
}
.support-session-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: .83rem;
}
.readonly-banner {
  color: #175D9B;
  border: 1px solid #C8DEF4;
  background: #EDF6FF;
}
.demo-banner {
  color: #765000;
  border: 1px solid #F2D592;
  background: #FFF8E8;
}
.support-session-banner {
  color: #D6EDFF;
  border: 1px solid rgba(136,203,255,.23);
  background: #0C496E;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--white);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.data-table th {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  color: var(--muted);
  background: #F8FAF8;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.data-table td {
  font-size: .84rem;
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table tbody tr:hover td {
  background: #FBFDFB;
}
.table-person {
  display: flex;
  align-items: center;
  gap: 9px;
}
.table-person .student-avatar {
  width: 34px;
  height: 34px;
  font-size: .65rem;
}
.empty-state {
  padding: 36px 20px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #C8D8CE;
  border-radius: var(--radius);
}
.empty-state__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  place-items: center;
  color: var(--primary-dark);
  border-radius: 14px;
  background: var(--primary-soft);
}
.empty-state strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}
.payment-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--white);
}
.payment-tabs__item {
  min-height: 40px;
  flex: 1 0 auto;
  padding: 8px 14px;
  color: var(--muted);
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.payment-tabs__item.is-active {
  color: var(--primary-dark);
  background: var(--primary-soft);
}
.payment-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.payment-progress__step {
  position: relative;
  padding: 10px 8px;
  color: var(--muted);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  font-size: .72rem;
  font-weight: 800;
}
.payment-progress__step.is-active {
  color: var(--primary-dark);
  border-color: #B9D9C8;
  background: var(--primary-soft);
}
.list {
  display: grid;
  gap: 10px;
}
.list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:first-child {
  padding-top: 0;
}
.list-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.list-item__body {
  flex: 1;
}
.list-item__body h3 {
  margin: 0 0 3px;
  font-size: .92rem;
}
.list-item__body h4 {
  margin: 0 0 3px;
  font-size: .92rem;
}
.list-item__body p {
  margin: 0;
  color: var(--muted);
  font-size: .81rem;
}
.news-card {
  display: grid;
  gap: 10px;
}
.news-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .74rem;
}
.news-card h3 {
  margin: 0;
}
.calendar-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 13px;
  align-items: start;
}
.calendar-date {
  display: grid;
  place-items: center;
  padding: 8px 4px;
  color: var(--primary-dark);
  border: 1px solid #C9E6D6;
  border-radius: 11px;
  background: var(--primary-soft);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.calendar-date span {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
}
.notification-item.is-unread {
  padding-left: 12px;
  border-left: 3px solid var(--primary);
}
.notification-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.timeline {
  position: relative;
  display: grid;
  gap: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 7px;
  width: 2px;
  background: var(--line);
}
.timeline-item {
  position: relative;
  padding: 0 0 18px 29px;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.timeline-item h3 {
  margin-bottom: 3px;
  font-size: .9rem;
}
.timeline-item p {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: .8rem;
}
.progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #E4EBE6;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.bar-chart {
  display: grid;
  gap: 11px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(75px, 120px) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: .78rem;
}
.bar-row__track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #E9EFEB;
}
.bar-row__fill {
  height: 100%;
  border-radius: 999px;
}
.donut {
  position: relative;
  display: grid;
  width: 192px;
  height: 192px;
  place-items: center;
  border-radius: 50%;
}
.donut::after {
  content: "";
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--white);
}
.donut strong {
  position: relative;
  z-index: 1;
  font-size: 1.85rem;
}
.qris-layout {
  display: grid;
  grid-template-columns: minmax(220px, 330px) 1fr;
  gap: 24px;
  align-items: start;
}
.qris-demo {
  position: relative;
  width: min(100%, 290px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 18px;
  border: 10px solid var(--white);
  outline: 1px solid var(--line);
  border-radius: 7px;
  background-color: #fff;
  background-image: repeating-conic-gradient(#17211B 0 25%, transparent 0 50%),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(23,33,27,.95) 5px 9px);
  background-position: 0 0, 7px 4px;
  background-size: 28px 28px, 33px 33px;
  image-rendering: pixelated;
}
.qris-demo::before {
  content: "DEMO";
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--danger);
  font-weight: 950;
  letter-spacing: .12em;
}
.qris-demo::after {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 950;
  letter-spacing: .12em;
}
.qris-demo::before {
  inset: 42% -16px auto;
  height: 50px;
  transform: rotate(-7deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.qris-demo::after {
  content: "QRIS SIMULASI";
  right: 15px;
  bottom: 14px;
  left: 15px;
  height: 32px;
  border-radius: 4px;
  background: var(--primary-dark);
  font-size: .68rem;
}
.receipt {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  box-shadow: var(--shadow-small);
}
.receipt__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--primary-dark);
}
.receipt__school {
  display: flex;
  gap: 13px;
  align-items: center;
}
.receipt__title {
  text-align: right;
}
.receipt__title h2 {
  margin-bottom: 3px;
}
.receipt__body {
  display: grid;
  gap: 10px;
  padding: 23px 0;
}
.receipt-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
}
.receipt-row span:first-child {
  color: var(--muted);
}
.receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-radius: 10px;
  background: var(--primary-soft);
  font-size: 1.15rem;
  font-weight: 900;
}
.receipt__footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 35px;
  color: var(--muted);
  font-size: .78rem;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.health-card {
  position: relative;
  overflow: hidden;
}
.health-card__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.health-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-soft);
}
.health-dot--warning {
  background: var(--warning);
  box-shadow: 0 0 0 5px #FFF2D3;
}
.health-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  margin: 0;
  font-size: .78rem;
}
.health-card dt {
  color: var(--muted);
}
.health-card dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}
.code-box {
  overflow: auto;
  padding: 14px;
  color: #D7F1E3;
  border-radius: 11px;
  background: #102A1F;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}
.key-value {
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr;
  gap: 9px 16px;
  margin: 0;
}
.key-value dt {
  color: var(--muted);
}
.key-value dd {
  margin: 0;
  font-weight: 750;
}
.modal-root {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 29, 18, .57);
  backdrop-filter: blur(4px);
}
.modal {
  position: relative;
  width: min(100%, 620px);
  max-height: min(90vh, 850px);
  overflow: auto;
  background: var(--white);
}
.modal--wide {
  width: min(100%, 880px);
}
.modal__header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.modal__header h2 {
  margin: 0;
  font-size: 1.28rem;
}
.modal__content {
  padding: 22px;
}
.guardian-bank-home {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20,145,79,.94) 0 315px, #E7E7E7 315px);
  box-shadow: var(--shadow);
}
.guardian-identity-card {
  padding: 16px;
  color: var(--text);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 9px 22px rgba(8,60,35,.2);
}
.guardian-identity-card p {
  margin: 0 0 8px;
  font-size: .78rem;
}
.guardian-identity-card__body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guardian-identity-card__body h2 {
  margin: 0;
  font-size: 1.25rem;
}
.guardian-identity-card__body span {
  font-size: .76rem;
  color: var(--muted);
}
.guardian-avatar {
  width: 58px;
  height: 58px;
  border: 3px solid #178A55;
  font-size: 1rem;
}
.guardian-contact {
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 800;
}
.privacy-chip {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 6px;
  border: 1px solid #88928C;
  border-radius: 999px;
  font-size: .62rem;
}
.guardian-action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 25px 24px 18px;
}
.guardian-action-row button {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--white);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.guardian-action-row button > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #111;
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 5px 12px rgba(0,0,0,.15);
}
.guardian-action-row .ui-icon {
  width: 29px;
  height: 29px;
}
.guardian-action-row strong {
  font-size: .76rem;
  font-weight: 600;
}
.guardian-home-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 -18px;
  padding: 4px 16px 0;
  border-radius: 26px 26px 0 0;
  background: #E7E7E7;
}
.guardian-home-tabs button {
  min-height: 48px;
  color: #686868;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}
.guardian-home-tabs button.is-active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
}
.guardian-feed {
  display: grid;
  gap: 14px;
  margin: 0 -4px;
  padding-top: 14px;
}
.guardian-feed-card {
  padding: 17px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 5px 11px rgba(0,0,0,.15);
}
.guardian-feed-card--bill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.guardian-feed-card--bill .button {
  grid-column: 1 / -1;
  justify-self: start;
}
.guardian-feed-card--bill h3 {
  margin-bottom: 6px;
}
.guardian-news-row {
  display: flex;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.guardian-news-row > span {
  color: var(--primary);
}
.guardian-news-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .77rem;
}
.guardian-mini-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.guardian-mini-summary div {
  display: grid;
  gap: 3px;
}
.guardian-mini-summary span {
  color: var(--muted);
  font-size: .72rem;
}
.guardian-demo-note {
  margin: 15px 0 0;
  color: #56615A;
  font-size: .68rem;
  text-align: center;
}
.search-box {
  display: flex;
  max-width: 620px;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.search-box input {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
.is-search-hidden {
  display: none !important;
}
.stage-list {
  gap: 15px;
}
.class-capacity {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 16px 0;
}
.class-capacity strong {
  color: var(--primary-dark);
  font-size: 1.7rem;
}
.class-capacity span {
  color: var(--muted);
  font-size: .78rem;
}
.compact-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.compact-list > span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  text-align: left;
}
.compact-list > button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  text-align: left;
}
.compact-list > button {
  width: 100%;
  color: inherit;
  cursor: pointer;
}
.compact-list span small {
  display: block;
  color: var(--muted);
}
.compact-list button small {
  display: block;
  color: var(--muted);
}
.alumni-group summary small {
  display: block;
  color: var(--muted);
}
.promotion-list {
  display: grid;
  gap: 8px;
  margin: 17px 0;
}
.promotion-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.promotion-row input {
  width: 20px;
  height: 20px;
}
.promotion-row span {
  display: grid;
}
.promotion-row small {
  color: var(--muted);
}
.promotion-row b {
  color: var(--primary-dark);
  font-size: .75rem;
}
.alumni-group summary {
  cursor: pointer;
}
.alumni-group summary > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.manage-student-row {
  display: grid;
  grid-template-columns: 1fr minmax(180px, .8fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.manage-student-row span {
  display: grid;
}
.manage-student-row small {
  color: var(--muted);
}
.code-sample {
  overflow: auto;
  padding: 12px;
  border-radius: 9px;
  background: #10271D;
  color: #DCF4E7;
  font-size: .72rem;
}
.payment-check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.payment-check-row input {
  width: 21px;
  height: 21px;
}
.payment-check-row span {
  display: grid;
}
.payment-check-row small {
  color: var(--muted);
}
.annual-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}
.annual-card p {
  margin-bottom: 0;
}
.guardian-child-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.guardian-child-button:disabled {
  cursor: default;
}
.guardian-child-button > span {
  display: grid;
}
.guardian-child-button strong {
  font-size: 1.2rem;
}
.guardian-child-button small {
  color: var(--muted);
}
.guardian-inline-content {
  min-height: 260px;
  margin-top: 14px;
}
.month-filter {
  max-width: 330px;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 15px 0;
}
.comparison-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: var(--primary-soft);
}
.comparison-grid span {
  color: var(--muted);
  font-size: .72rem;
}
.clickable-metrics > button {
  display: block;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.clickable-metrics > button .metric-card {
  height: 100%;
}
.clickable-metrics > button:hover .metric-card {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.toast-region {
  position: fixed;
  z-index: 3000;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(390px, calc(100vw - 36px));
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  color: var(--white);
  border-radius: 12px;
  background: #173D2C;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  animation: toastIn .25s ease;
}
.toast--error {
  background: #932D2D;
}
.toast strong {
  display: block;
}
.toast p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: .8rem;
}
@keyframes toastIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}
@media (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .auth-screen {
    grid-template-columns: 1fr;
    background: var(--white);
  }
  .auth-visual {
    min-height: 100vh;
    padding: 32px 24px 42px;
  }
  .auth-panel {
    position: fixed;
    z-index: 20;
    inset: 0;
    min-height: 100vh;
    overflow: auto;
    transform: translateY(105%);
  }
  .auth-screen.login-open .auth-panel {
    transform: translateY(0);
  }
  .school-scene__building {
    width: 85%;
    height: 40%;
    opacity: .7;
  }
  .sidebar {
    transition: transform .28s ease;
  }
  .app-shell.sidebar-open .sidebar-scrim {
    display: block;
  }
  .app-page {
    margin-left: 0;
  }
  .topbar__menu {
    display: inline-grid;
  }
  .grid--sidebar {
    grid-template-columns: 1fr;
  }
  .welcome-art {
    display: none;
  }
  .qris-layout {
    grid-template-columns: 1fr;
  }
  .role-guardian .mobile-bottom-nav {
    position: fixed;
    z-index: 320;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 28px rgba(18,47,33,.10);
    backdrop-filter: blur(14px);
  }
  .mobile-nav__item {
    display: grid;
    min-width: 0;
    min-height: 52px;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 4px 2px;
    color: var(--muted);
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: .64rem;
    font-weight: 800;
    cursor: pointer;
  }
  .mobile-nav__item .ui-icon {
    width: 20px;
    height: 20px;
  }
  .mobile-nav__item.is-active {
    color: var(--primary-dark);
    background: var(--primary-soft);
  }
  .role-guardian .main-content {
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
  }
  .role-guardian .app-footer {
    display: none;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
  .main-content {
    padding: 18px 14px 28px;
  }
  .topbar {
    min-height: 72px;
    padding: 10px 12px;
  }
  .topbar__title .eyebrow {
    display: none;
  }
  .topbar__title h1 {
    font-size: 1.04rem;
  }
  .user-button__text {
    display: none;
  }
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .grid--2 {
    grid-template-columns: 1fr;
  }
  .grid--3 {
    grid-template-columns: 1fr;
  }
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .health-grid {
    grid-template-columns: 1fr;
  }
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .span-full {
    grid-column: auto;
  }
  .page-heading {
    flex-direction: column;
  }
  .page-heading .button-row {
    width: 100%;
  }
  .page-heading .button-row .button {
    flex: 1;
  }
  .profile-card {
    align-items: flex-start;
  }
  .profile-card .profile-select {
    width: 100%;
  }
  .welcome-card {
    min-height: 190px;
  }
  .auth-brand {
    align-items: flex-start;
  }
  .auth-brand h1 {
    font-size: 2rem;
  }
  .auth-brand .school-logo {
    width: 54px;
    height: 54px;
    border-radius: 15px;
  }
  .app-footer {
    flex-direction: column;
    padding: 17px 14px;
  }
  .modal-root {
    align-items: end;
  }
  .receipt {
    padding: 19px;
  }
  .receipt__header {
    flex-direction: column;
  }
  .receipt__footer {
    flex-direction: column;
  }
  .receipt__title {
    text-align: left;
  }
  .receipt-row {
    grid-template-columns: 120px 1fr;
  }
  .bar-row {
    grid-template-columns: 70px 1fr;
  }
  .bar-row strong {
    grid-column: 2;
  }
  .key-value {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .key-value dd {
    margin-bottom: 8px;
  }
  .metric-card {
    min-height: 112px;
    padding: 15px;
  }
  .metric-card__value {
    font-size: 1.28rem;
  }
  .metric-card__detail {
    font-size: .7rem;
  }
  .payment-progress__step {
    padding: 9px 4px;
    font-size: .66rem;
  }
  .promotion-row {
    grid-template-columns: auto 1fr;
  }
  .promotion-row b {
    grid-column: 2;
  }
  .manage-student-row {
    grid-template-columns: 1fr;
  }
  .annual-card {
    align-items: stretch;
    flex-direction: column;
  }
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  .guardian-bank-home {
    min-height: calc(100vh - 72px);
    padding: 18px 22px 28px;
    border-radius: 0;
    box-shadow: none;
  }
  .guardian-home-tabs {
    margin-right: -22px;
    margin-left: -22px;
  }
}
.password-eye {
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.password-eye .ui-icon {
  width: 23px;
  height: 23px;
}
.topbar {
  border: 0;
}
.topbar .eyebrow {
  color: #fff;
}
.topbar h1 {
  color: #fff;
}
.topbar .user-button {
  color: #fff;
}
.topbar .icon-button {
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar__menu {
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.notification-button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .icon-button:hover {
  background: rgba(255,255,255,.12) !important;
}
.topbar .icon-button:focus-visible {
  background: rgba(255,255,255,.12) !important;
}
.sidebar__brand {
  color: #fff;
}
.role-context {
  color: #fff;
}
.role-context {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}
.sidebar-nav__item .nav-icon {
  color: #fff;
}
.sidebar__footer {
  border-color: rgba(255,255,255,.2);
}
.sidebar__footer .demo-chip {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}
.guardian-profile-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-photo-button {
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}
.profile-photo-button::after {
  content: "+";
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #087a3c;
  font-weight: 900;
}
.profile-photo {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border: 3px solid #087a3c;
  border-radius: 50%;
}
.tpi-student-avatar {
  flex-basis: 78px;
  font-size: 1.15rem;
}
.profile-photo.is-small {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: .8rem;
}
.tpi-student-avatar.is-small {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: .8rem;
}
.guardian-name-button {
  display: grid;
  min-width: 0;
  flex: 1;
  padding: 5px 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.guardian-name-button strong {
  line-height: 1.08;
  font-size: 1.22rem;
}
.guardian-name-button small {
  margin-top: 4px;
  color: #677068;
  font-size: .66rem;
}
.guardian-name-button:disabled {
  cursor: default;
}
.payment-state {
  display: inline-flex !important;
  width: max-content !important;
  margin-top: 7px !important;
  padding: 4px 9px !important;
  color: #fff;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: .64rem !important;
  font-style: normal;
  font-weight: 900;
}
.payment-state.is-paid {
  background: #138747;
}
.payment-state.is-unpaid {
  background: #cf3535;
}
.tpi-profile-card > b {
  margin-top: 7px;
  font-size: .74rem;
}
.tpi-quick-actions i {
  background: #fff;
}
.tpi-quick-actions i.is-orange {
  color: #111;
}
.tpi-quick-actions i.is-purple {
  color: #111;
}
.tpi-quick-actions i.is-mint {
  color: #111;
}
.tpi-quick-actions i.is-blue {
  color: #111;
}
.tpi-home-sheet > nav {
  border-bottom: 1px solid #ddd;
}
.tpi-home-sheet > nav button {
  border-bottom: 3px solid transparent;
}
.tpi-home-sheet > nav button.is-active {
  border-bottom-color: #13a157;
}
.dashboard-news-card {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 15px;
  color: inherit;
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
  text-align: left;
  cursor: pointer;
}
.dashboard-history-card {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 15px;
  color: inherit;
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
  text-align: left;
  cursor: pointer;
}
.dashboard-news-card {
  flex-direction: column;
}
.dashboard-news-card span {
  color: #07823f;
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.dashboard-news-card small {
  color: #666;
}
.dashboard-history-card {
  align-items: flex-start;
}
.dashboard-history-card i {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: #119954;
}
.dashboard-history-card span {
  display: grid;
}
.dashboard-history-card small {
  color: #666;
  font-size: .67rem;
}
.inline-news-detail {
  margin: 13px -14px -14px;
  padding: 15px;
  border-top: 1px solid #cfd6d1;
  border-radius: 0 0 11px 11px;
  background: #f5faf7;
  animation: expandNews .2s ease;
}
.inline-news-detail h4 {
  margin: 0 0 7px;
}
.inline-news-detail p {
  font-size: .76rem;
  line-height: 1.6;
}
@keyframes expandNews {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.connected-timeline {
  position: relative;
  background: #fff;
}
.connected-timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background: #a8d9bd;
}
.connected-timeline button {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 10px 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.connected-timeline button i {
  width: 12px;
  height: 12px;
  margin: 4px 0 0 2px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #139554;
  box-shadow: 0 0 0 2px #139554;
}
.connected-timeline button span {
  display: grid;
}
.connected-timeline button small {
  color: #66736b;
  font-size: .67rem;
}
.student-setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.student-setting-row div {
  display: grid;
}
.student-setting-row small {
  color: #66736b;
}
.device-settings .list-item {
  padding: 13px 0;
}
.guardian-page-head {
  min-height: 58px;
  padding-top: 12px;
}
.guardian-page-head > button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}
.guardian-page-head > button:hover {
  background: #e2eee7;
}
.guardian-page-head .ui-icon {
  width: 23px;
  height: 23px;
}
.role-group-card {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.role-group-card span {
  display: grid;
}
.role-group-card small {
  color: #66736b;
  font-size: .7rem;
  font-style: normal;
}
.role-group-card em {
  color: #66736b;
  font-size: .7rem;
  font-style: normal;
}
.role-group-card strong {
  margin: 3px 0;
  font-size: 1.06rem;
}
.role-group-card b {
  color: #087a3c;
}
.clean-bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.clean-bill-row > div:first-child {
  display: grid;
  min-width: 0;
  flex: 1;
}
.clean-bill-row small {
  color: #66736b;
}
.clean-bill-row > b {
  white-space: nowrap;
}
.scope-panel {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7faf8;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  margin-top: 10px;
}
.choice-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d7ddd9;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.choice-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d7ddd9;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.choice-grid input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.choice-list input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.choice-list {
  display: grid;
  max-height: 320px;
  overflow: auto;
  gap: 7px;
  margin-top: 10px;
}
.choice-list label span {
  display: grid;
}
.choice-list small {
  color: #66736b;
}
.arrears-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.arrears-group summary span {
  display: grid;
}
.arrears-group summary small {
  color: #66736b;
}
.chart-card {
  margin-top: 18px;
}
.donut-summary {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 100%;
  padding: 28px 24px;
}
.donut-summary__header {
  display: grid;
  gap: 4px;
  text-align: center;
}
.donut-summary__header h3 {
  margin: 0;
}
.donut-summary__header .eyebrow {
  margin: 0;
}
.donut-summary__chart {
  display: grid;
  place-items: center;
}
.donut-summary__legend {
  display: grid;
  gap: 10px;
}
.donut-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #e5ece8;
}
.donut-summary__row:first-child {
  border-top: 0;
  padding-top: 0;
}
.donut-summary__row span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #3d4c46;
}
.donut-summary__row strong {
  color: var(--ink);
}
.legend {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.legend.unpaid {
  background: #dfe8e2;
}
.role-developer_admin .grid--sidebar > * {
  min-width: 0;
}
.role-developer_admin .card {
  min-width: 0;
}
.role-developer_admin .table-wrap {
  min-width: 0;
}
.role-developer_admin .table-wrap {
  overflow-x: auto;
}
@media (max-width: 900px) {
  .sidebar {
    right: 0;
    left: auto;
    transform: translateX(105%);
  }
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }
  .sidebar-scrim {
    background: rgba(0,0,0,.45);
  }
  .topbar__menu {
    order: 5;
  }
  .topbar__actions {
    margin-left: auto;
  }
}
@media (max-width: 640px) {
  .topbar-school-brand span {
    max-width: 150px;
    font-size: .58rem;
  }
  .topbar-school-brand img {
    width: 56px;
    height: 56px;
  }
  .choice-grid {
    grid-template-columns: 1fr;
  }
  .clean-bill-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .donut {
    width: 168px;
    height: 168px;
  }
  .donut::after {
    width: 116px;
    height: 116px;
  }
  .donut strong {
    font-size: 1.65rem;
  }
  .donut-summary {
    padding: 24px 18px;
  }
  .donut-summary__row {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-iteration-count: 1 !important;
  }
  *::before {
    animation-iteration-count: 1 !important;
  }
  *::after {
    animation-iteration-count: 1 !important;
  }
}
@media print {
  body {
    background: #fff;
  }
  .sidebar {
    display: none !important;
  }
  .topbar {
    display: none !important;
  }
  .app-footer {
    display: none !important;
  }
  .page-heading {
    display: none !important;
  }
  .no-print {
    display: none !important;
  }
  .readonly-banner {
    display: none !important;
  }
  .demo-banner {
    display: none !important;
  }
  .support-session-banner {
    display: none !important;
  }
  .toast-region {
    display: none !important;
  }
  .app-page {
    margin: 0;
  }
  .main-content {
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .receipt {
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .receipt .school-logo {
    color: #000;
    border-color: #000;
    background: #fff;
    box-shadow: none;
  }
}
.audience-guardian img[src$="logo-tpi.png"] {
  content: url("../assets/logo-tpi-asli.jpeg");
  border-radius: 50%;
  object-fit: cover;
}
.role-guardian img[src$="logo-tpi.png"] {
  content: url("../assets/logo-tpi-asli.jpeg");
  border-radius: 50%;
  object-fit: cover;
}
.audience-guardian .auth-panel__inner .field::before {
  color: #fff;
  font-size: 1.12rem;
}
.audience-guardian .auth-panel__inner .login-security-note {
  max-width: 330px;
  margin: 12px auto 0;
  color: #fff;
  text-align: center;
}
.role-guardian .app-page {
  transition: filter .28s ease,transform .28s ease;
}
.figma-student-card-icon {
  color: #fff;
}
.figma-student-card-icon .ui-icon {
  width: 29px;
  height: 29px;
}
.figma-home-sheet > nav button {
  position: relative;
}
.figma-home-sheet > nav button.is-active::after {
  position: absolute;
  right: 8px;
  bottom: 1px;
  left: 8px;
  height: 4px;
  border-radius: 4px;
  background: #24bb63;
}
.figma-home-bill .figma-bill-card {
  padding: 16px;
}
.figma-home-total {
  padding: 16px;
}
.role-guardian .sidebar {
  transition: transform .34s cubic-bezier(.18,.8,.2,1);
}
.role-guardian .sidebar__brand .school-logo {
  overflow: hidden;
  border-radius: 50%;
}
.role-guardian .sidebar__brand .school-logo img {
  width: 100%;
  height: 100%;
}
.role-guardian .sidebar-nav__item {
  font-size: .88rem;
}
.role-guardian .sidebar-nav__item .nav-icon {
  width: 32px;
  flex-basis: 32px;
}
.role-guardian .sidebar-nav__item .ui-icon {
  width: 24px;
  height: 24px;
}
.guardian-sidebar-status {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 10px 13px;
  border: 1px solid #b9beb9;
  border-radius: 10px;
  background: #f4f4f4;
}
.guardian-sidebar-status span.is-unpaid {
  color: #b32626;
}
.guardian-sidebar-status span.is-paid {
  color: #168943;
}
.figma-page-head p {
  margin-top: 18px;
}
.figma-bill-card {
  min-height: 164px;
}
.figma-bill-card.is-expanded {
  min-height: 430px;
}
.figma-bill-detail dl {
  margin-top: 17px;
}
.figma-pay-button {
  min-height: 51px;
}
.figma-checkout-actions .button {
  min-height: 56px;
  font-size: 1rem;
}
.figma-qris-page {
  padding-bottom: 55px;
}
.figma-payment-logo {
  height: 125px;
  border-radius: 50%;
  object-fit: cover;
}
.figma-news-card.is-expanded {
  min-height: 520px;
}
.figma-news-card h3 {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.figma-news-card.is-expanded h3 {
  display: block;
  overflow: visible;
  font-size: 1.05rem;
}
.figma-news-detail {
  border: 0;
}
.figma-news-detail > p {
  font-weight: 750;
  line-height: 1.72;
  text-align: justify;
}
.figma-news-detail dl {
  display: grid;
  gap: 3px;
}
.figma-news-detail dt {
  margin-top: 10px;
}
.figma-news-detail dd {
  margin: 0;
  font-weight: 850;
}
.figma-period-filter {
  font-size: 1.02rem;
}
.figma-timeline > button strong {
  font-size: .96rem;
}
.figma-remind-button {
  padding: 5px 13px;
  color: #6e562b;
  border: 0;
  border-radius: 999px;
  background: #ffcc7f;
  font-weight: 800;
}
.figma-notification-card p {
  line-height: 1.6;
}
.figma-form-card .field > span {
  font-size: .96rem;
  font-weight: 850;
}
.figma-form-card .field input {
  min-height: 52px;
}
.figma-form-card .field select {
  min-height: 52px;
}
.figma-form-card .field textarea {
  min-height: 116px;
}
.figma-form-card .button {
  min-height: 56px;
  font-size: 1.05rem;
}
@media (max-width: 430px) {
  .figma-checkout-scrim {
    padding: 18px;
  }
}
.splash-signature {
  position: absolute;
  bottom: 13vh;
  margin: 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .42em;
}
@keyframes tpiSpin {
  to {
    transform: rotate(360deg);
  }
}
.secret-logo-button {
  width: 138px;
  height: 138px;
  padding: 0;
  border: 0;
  filter: drop-shadow(0 0 11px rgba(255,255,255,.7));
  cursor: pointer;
}
.secret-logo-button img {
  width: 100%;
  height: 100%;
}
.auth-panel__inner .muted {
  color: rgba(255,255,255,.87);
}
.auth-panel__inner .fine-print {
  color: rgba(255,255,255,.87);
}
.auth-panel__inner .text-button {
  color: rgba(255,255,255,.87);
}
.auth-panel__inner .field > span:first-child {
  color: #fff;
}
.auth-panel__inner input {
  border-color: rgba(255,255,255,.2);
}
.auth-panel__inner .button--primary {
  border-radius: 999px;
}
.login-school-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  font-size: .75rem;
  font-weight: 800;
}
.login-school-mark img {
  width: 48px;
  height: 48px;
}
.login-security-note {
  text-align: center;
}
.topbar-school-brand {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
}
.topbar-school-brand img {
  width: 42px;
  height: 42px;
}
.role-guardian .topbar-school-brand {
  display: flex;
}
.role-guardian .main-content {
  margin: 0 auto;
}
.role-guardian .sidebar__footer .demo-chip {
  display: none;
}
.role-guardian .sidebar__footer [data-action="reset-demo"] {
  display: none;
}
.tpi-guardian-home {
  margin: 0 -14px;
  min-height: calc(100vh - 94px);
  padding: 5px 20px 0;
  background: linear-gradient(rgba(15,155,67,.78),rgba(0,105,35,.92)), url("../assets/foto-sekolah-ilustrasi.jpg") center top/cover fixed;
}
.tpi-profile-card {
  padding: 13px 16px;
  color: #161a17;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.tpi-profile-card > p {
  margin: 0 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #cfd3d0;
  font-size: .75rem;
}
.tpi-profile-card .guardian-child-button {
  gap: 10px;
}
.tpi-student-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  color: #fff;
  border: 3px solid #087a3a;
  border-radius: 50%;
  background: linear-gradient(#3392df,#123a81);
  font-weight: 900;
}
.tpi-profile-card .guardian-child-button strong {
  line-height: 1.05;
  font-size: 1.15rem;
}
.tpi-profile-card b {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-style: normal;
}
.tpi-profile-card em {
  display: block;
  margin-top: 4px;
  font-style: normal;
}
.tpi-profile-card em {
  width: max-content;
  padding: 1px 5px;
  border: 1px solid #8f9691;
  border-radius: 999px;
  font-size: .58rem;
}
.tpi-quick-actions {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
  padding: 23px 0 17px;
}
.tpi-quick-actions button {
  min-width: 0;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  font-size: .68rem;
  cursor: pointer;
}
.tpi-quick-actions i {
  display: grid;
  width: 47px;
  height: 47px;
  margin: 0 auto 5px;
  place-items: center;
  color: #111;
  border-radius: 7px;
  box-shadow: 0 6px 10px rgba(0,0,0,.18);
}
.tpi-quick-actions i.is-orange {
  background: #ff7900;
}
.tpi-quick-actions i.is-purple {
  background: #ec00c8;
}
.tpi-quick-actions i.is-mint {
  background: #00e6a9;
}
.tpi-quick-actions i.is-blue {
  background: #68c9ff;
}
.tpi-home-sheet {
  margin: 0 -20px;
  min-height: 390px;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  background: #e7e7e7;
}
.tpi-home-sheet > nav {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 7px 16px 0;
  background: #fff;
}
.tpi-home-sheet > nav button {
  min-height: 38px;
  color: #666;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.tpi-home-sheet > nav button.is-active {
  color: #126b16;
  background: #9bec29;
  font-weight: 900;
}
.tpi-home-content {
  display: grid;
  gap: 14px;
  padding: 20px;
}
.tpi-bill-card {
  position: relative;
  padding: 14px;
  border: 1px solid #cbd2cc;
  border-radius: 11px;
  background: linear-gradient(110deg,#f3f5f3,#fff);
  box-shadow: 0 3px 7px rgba(0,0,0,.08);
}
.tpi-info-card {
  position: relative;
  padding: 14px;
  border: 1px solid #cbd2cc;
  border-radius: 11px;
  background: linear-gradient(110deg,#f3f5f3,#fff);
  box-shadow: 0 3px 7px rgba(0,0,0,.08);
}
.tpi-checkout-card {
  position: relative;
  padding: 14px;
  border: 1px solid #cbd2cc;
  border-radius: 11px;
  background: linear-gradient(110deg,#f3f5f3,#fff);
  box-shadow: 0 3px 7px rgba(0,0,0,.08);
}
.tpi-form-card {
  position: relative;
  padding: 14px;
  border: 1px solid #cbd2cc;
  border-radius: 11px;
  background: linear-gradient(110deg,#f3f5f3,#fff);
  box-shadow: 0 3px 7px rgba(0,0,0,.08);
}
.tpi-settings-card {
  position: relative;
  padding: 14px;
  border: 1px solid #cbd2cc;
  border-radius: 11px;
  background: linear-gradient(110deg,#f3f5f3,#fff);
  box-shadow: 0 3px 7px rgba(0,0,0,.08);
}
.tpi-bill-card::after {
  content: "▤";
  position: absolute;
  z-index: 0;
  right: 12px;
  bottom: 4px;
  color: #e6e9e7;
  font-size: 5rem;
}
.tpi-bill-card > * {
  position: relative;
  z-index: 1;
}
.tpi-bill-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tpi-bill-card h3 {
  margin: 2px 0 6px;
  font-size: .88rem;
}
.tpi-info-card h3 {
  margin: 2px 0 6px;
  font-size: .88rem;
}
.tpi-card-label {
  color: #05893f;
  font-size: .57rem;
  font-weight: 950;
  letter-spacing: .16em;
}
.tpi-info-card > span {
  color: #05893f;
  font-size: .57rem;
  font-weight: 950;
  letter-spacing: .16em;
}
.tpi-bill-card dl {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4px 9px;
  margin: 5px 0 10px;
  font-size: .72rem;
}
.tpi-checkout-card dl {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4px 9px;
  margin: 5px 0 10px;
  font-size: .72rem;
}
.tpi-payment-info dl {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4px 9px;
  margin: 5px 0 10px;
  font-size: .72rem;
}
.tpi-settings-card dl {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4px 9px;
  margin: 5px 0 10px;
  font-size: .72rem;
}
.tpi-bill-card dt {
  color: #616761;
}
.tpi-checkout-card dt {
  color: #616761;
}
.tpi-payment-info dt {
  color: #616761;
}
.tpi-settings-card dt {
  color: #616761;
}
.tpi-bill-card dd {
  margin: 0;
  font-weight: 750;
}
.tpi-checkout-card dd {
  margin: 0;
  font-weight: 750;
}
.tpi-payment-info dd {
  margin: 0;
  font-weight: 750;
}
.tpi-settings-card dd {
  margin: 0;
  font-weight: 750;
}
.tpi-detail-link {
  padding: 0;
  color: #f28b00;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.tpi-info-card button {
  padding: 0;
  color: #f28b00;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.tpi-feed-row button {
  padding: 0;
  color: #f28b00;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.tpi-page-list {
  display: grid;
  gap: 12px;
  padding: 16px 0 35px;
}
.guardian-page-head {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 18px 0 8px;
}
.guardian-page-head button {
  padding: 3px 0;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}
.guardian-page-head h2 {
  margin: 0;
  font-size: 1rem;
}
.guardian-page-head p {
  margin: 3px 0 0;
  color: #666;
  font-size: .7rem;
}
.tpi-checkout-card {
  max-width: 500px;
  margin: 16px auto;
}
.tpi-checkout-total {
  margin: 12px -14px;
  padding: 12px 14px;
  background: #f1f1f1;
  text-align: center;
}
.tpi-checkout-total span {
  display: block;
}
.tpi-checkout-total strong {
  display: block;
}
.tpi-demo-warning {
  color: #a66300;
  font-size: .67rem;
  text-align: center;
}
.tpi-qris-page {
  display: grid;
  gap: 14px;
  padding: 12px 0 40px;
}
.tpi-countdown {
  padding: 17px;
  border: 1px solid #d2d6d3;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.tpi-qris-box {
  padding: 17px;
  border: 1px solid #d2d6d3;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.tpi-payment-info {
  padding: 17px;
  border: 1px solid #d2d6d3;
  border-radius: 12px;
  background: #fff;
}
.tpi-countdown div {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin: 10px 0;
}
.tpi-countdown span {
  font-size: 1.4rem;
  font-weight: 900;
}
.tpi-countdown small {
  display: block;
  color: #777;
  font-size: .55rem;
  font-weight: 500;
}
.tpi-countdown p {
  margin: 4px 0;
  color: #666;
  font-size: .68rem;
}
.tpi-qris-box p {
  margin: 4px 0;
  color: #666;
  font-size: .68rem;
}
.tpi-qris-box .qris-demo {
  width: min(100%,280px);
  margin: 16px auto;
}
.tpi-payment-info {
  text-align: left;
}
.tpi-payment-info p {
  padding: 9px;
  color: #8d5e00;
  border-radius: 5px;
  background: #ffd889;
  font-size: .66rem;
}
.tpi-help-strip {
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.tpi-payment-logo {
  width: 80px;
  margin: 0 auto;
}
.tpi-info-card p {
  margin: 5px 0;
  color: #5f655f;
  font-size: .74rem;
}
.tpi-info-card small {
  display: block;
  margin-bottom: 8px;
  color: #777;
  font-size: .62rem;
}
.tpi-feed-row {
  padding: 13px 0;
  border-bottom: 1px solid #ddd;
}
.tpi-feed-row:last-child {
  border: 0;
}
.tpi-feed-row > span {
  color: #05893f;
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.tpi-feed-row h3 {
  margin: 3px 0;
  font-size: .86rem;
}
.tpi-feed-row p {
  margin: 0 0 6px;
  color: #666;
  font-size: .72rem;
}
.tpi-period-filter {
  margin: 10px 0 13px;
}
.tpi-history-list {
  padding: 15px;
  border-radius: 10px;
  background: #e6e6e6;
}
.tpi-history-list article {
  display: grid;
  grid-template-columns: 13px 1fr;
  gap: 8px;
  padding-bottom: 14px;
}
.tpi-history-list i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #343834;
}
.tpi-history-list article div {
  display: grid;
}
.tpi-history-list span {
  color: #666;
  font-size: .67rem;
}
.tpi-history-list small {
  color: #666;
  font-size: .67rem;
}
.tpi-empty-notification {
  display: grid;
  min-height: 55vh;
  place-items: center;
  align-content: center;
  text-align: center;
}
.tpi-empty-notification div {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid #555;
  border-radius: 50%;
  font-weight: 900;
}
.tpi-empty-notification h3 {
  margin: 12px 0 3px;
}
.tpi-empty-notification p {
  color: #777;
  font-size: .75rem;
}
.tpi-form-card {
  max-width: 650px;
  margin: 12px auto;
}
.tpi-settings-card {
  margin: 12px 0;
}
.tpi-device-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #ddd;
}
.tpi-device-row div {
  display: grid;
}
.tpi-device-row span {
  width: max-content;
  margin: 3px 0;
  padding: 2px 5px;
  border-radius: 999px;
  background: #e5e5e5;
  font-size: .52rem;
}
.tpi-device-row small {
  color: #777;
  font-size: .63rem;
}
.tpi-device-row button {
  align-self: center;
  color: #b22;
  border: 0;
  background: transparent;
}
@media (max-width: 900px) {
  .auth-screen.login-open .auth-visual {
    min-height: 100vh;
  }
  .auth-panel {
    padding: 28vh 0 0;
  }
  .auth-panel__inner {
    width: 100%;
    min-height: 72vh;
    padding: 28px 26px 40px;
  }
}
@media (max-width: 640px) {
  .role-guardian .mobile-bottom-nav {
    display: none;
  }
  .role-guardian .main-content {
    padding-bottom: 30px;
  }
  .role-guardian .main-content:has(.guardian-bank-home) {
    padding: 0 14px 30px;
    background: transparent;
  }
  .tpi-quick-actions {
    gap: 4px;
  }
  .tpi-quick-actions span {
    display: block;
    white-space: nowrap;
    font-size: .6rem;
  }
}
:root {
  --figma-green-100: #59ff59;
  --figma-green-200: #00d600;
  --figma-green-300: #00aa00;
  --figma-green-400: #008000;
  --figma-green-500: #005800;
  --figma-green-600: #003400;
  --figma-accent: #aaff00;
  --figma-card: #f7f8f7;
  --figma-line: #b2bab2;
  --figma-text: #3c3c3c;
  --figma-orange: #ff9900;
}
.audience-guardian .auth-panel__inner {
  position: relative;
  color: #fff;
}
.audience-guardian .auth-panel__inner .auth-back {
  display: none;
}
.audience-guardian .auth-panel__inner #login-mode-help {
  display: none;
}
.audience-guardian .auth-panel__inner .login-security-note {
  display: none;
}
.audience-guardian .auth-panel__inner .login-school-mark {
  position: absolute;
  display: flex;
  margin: 0;
  text-shadow: 0 2px 7px rgba(0,0,0,.5);
}
.audience-guardian .auth-panel__inner .login-school-mark img {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.72));
}
.audience-guardian .auth-panel__inner .field {
  gap: 0;
}
.audience-guardian .auth-panel__inner .field > span:first-child {
  clip-path: inset(50%);
}
.audience-guardian .auth-panel__inner .field input {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.22);
}
.audience-guardian .auth-panel__inner .password-field {
  position: relative;
  display: block;
}
.audience-guardian .auth-panel__inner .password-eye {
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 2;
}
.audience-guardian .auth-panel__inner .form-error {
  margin: 0;
  color: #fff4a6;
}
.audience-guardian .auth-panel__inner .button--primary {
  border-color: rgba(255,255,255,.45);
  font-weight: 500;
}
.audience-guardian .auth-panel__inner #forgot-password-button {
  right: 42px;
  margin-top: 116px;
}
.role-guardian {
  color: var(--figma-text);
  background: #fff;
}
.role-guardian .topbar-school-brand {
  text-shadow: 0 1px 5px #17401e;
}
.role-guardian .topbar-school-brand img {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.72));
}
.role-guardian .topbar__menu {
  padding: 0;
}
.role-guardian .notification-button {
  padding: 0;
}
.role-guardian .topbar__menu .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 2.7;
}
.role-guardian .notification-button .ui-icon {
  width: 27px;
  height: 27px;
  stroke-width: 2.7;
}
.role-guardian.guardian-subpage .topbar {
  display: none;
}
.role-guardian.guardian-subpage .main-content {
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
}
.role-guardian .main-content {
  width: min(100%,620px);
  padding: 0;
}
.role-guardian .sidebar {
  right: 0;
  left: auto;
  width: min(72vw,310px);
  padding: 0;
  transform: translateX(105%);
  box-shadow: -15px 0 35px rgba(0,0,0,.2);
}
.role-guardian.sidebar-open .sidebar {
  transform: translateX(0);
}
.role-guardian .sidebar__brand {
  padding: 34px 18px 18px;
  color: #08752d;
  border: 0;
}
.role-guardian .sidebar__brand .school-logo {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.role-guardian .role-context {
  margin: 0 12px 10px;
  padding: 11px 13px;
  border: 1px solid #b9beb9;
  border-radius: 10px;
}
.role-guardian .sidebar-nav {
  padding: 0 10px 12px;
}
.role-guardian .sidebar-nav__item {
  min-height: 44px;
  border-radius: 5px;
}
.role-guardian .sidebar__footer {
  padding: 12px;
  border-color: #d5d5d5;
}
.role-guardian .sidebar__footer [data-action="logout"] {
  border-radius: 0;
}
.role-guardian .sidebar-scrim {
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(4px);
}
.role-guardian .mobile-bottom-nav {
  display: none !important;
}
.role-guardian .app-footer {
  display: none !important;
}
.figma-profile-card {
  color: #111;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}
.figma-profile-card > p {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d7d7d7;
}
.figma-profile-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.figma-photo-button {
  position: relative;
  display: block;
  flex: 0 0 auto;
  cursor: pointer;
}
.figma-photo-button::after {
  content: "+";
  position: absolute;
  right: -2px;
  bottom: 0;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #01870a;
  font-weight: 900;
}
.figma-avatar {
  display: grid;
  flex: 0 0 80px;
  place-items: center;
  object-fit: cover;
  color: #fff;
  border: 3px solid #087a3a;
  border-radius: 50%;
  background: linear-gradient(#389cf0,#163e84);
  font-weight: 900;
}
.figma-avatar.is-small {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
.figma-child-name {
  display: grid;
  min-width: 0;
  padding: 0;
  color: #111;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.figma-child-name strong {
  line-height: 1.08;
}
.figma-child-name small {
  margin-top: 5px;
}
.figma-child-name:disabled {
  cursor: default;
}
.figma-profile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .66rem;
}
.figma-payment-state {
  padding: 3px 8px;
  color: #fff;
  border-radius: 999px;
  font-style: normal;
  font-weight: 850;
}
.figma-quick-actions button {
  min-width: 0;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.figma-quick-actions i {
  display: grid;
  margin: 0 auto 6px;
  place-items: center;
  border-radius: 12px;
}
.figma-quick-actions i .ui-icon {
  width: 31px;
  height: 31px;
  stroke-width: 2.2;
}
.figma-quick-actions span {
  display: block;
  font-size: .7rem;
  white-space: nowrap;
}
.figma-home-sheet {
  min-height: 500px;
  overflow: hidden;
}
.figma-home-sheet > nav {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
}
.figma-home-sheet > nav button {
  padding: 5px 8px;
  border: 0;
  cursor: pointer;
}
.figma-home-section-title {
  margin: 4px 0 -6px;
  font-size: .85rem;
  font-weight: 800;
}
.figma-home-empty {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 160px;
  padding: 24px;
  color: #697069;
  border: 1px solid #d7ddd8;
  border-radius: 12px;
  text-align: center;
}
.figma-bill-card {
  position: relative;
  padding: 14px;
  color: var(--figma-text);
  border: 1px solid var(--figma-line);
  border-radius: 12px;
  background: linear-gradient(105deg,#e0e1e0,#fff 82%);
}
.figma-news-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  color: var(--figma-text);
  border: 1px solid var(--figma-line);
  border-radius: 12px;
  background: linear-gradient(105deg,#e0e1e0,#fff 82%);
}
.figma-notification-card {
  position: relative;
  padding: 14px;
  color: var(--figma-text);
  border: 1px solid var(--figma-line);
  border-radius: 12px;
  background: linear-gradient(105deg,#e0e1e0,#fff 82%);
}
.figma-receipt-card {
  position: relative;
  overflow: hidden;
  padding: 14px;
  color: var(--figma-text);
  border: 1px solid var(--figma-line);
  border-radius: 12px;
  background: linear-gradient(105deg,#e0e1e0,#fff 82%);
}
.figma-bill-watermark {
  position: absolute;
  right: 14px;
  bottom: -15px;
  font-weight: 900;
}
.figma-bill-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.figma-bill-top > div > span {
  color: #008709;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.figma-news-card > span {
  color: #008709;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.figma-notification-card > span {
  color: #008709;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.figma-receipt-card > span {
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.figma-bill-card h3 {
  margin: 6px 0;
  font-size: .9rem;
}
.figma-news-card h3 {
  margin: 6px 0;
  font-size: .9rem;
}
.figma-receipt-card h3 {
  margin: 6px 0;
  font-size: .9rem;
}
.figma-bill-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 2px 0 12px;
  font-size: .75rem;
}
.figma-bill-card dt {
  grid-column: 1/-1;
}
.figma-bill-card dd {
  margin: 0;
}
.figma-status {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.figma-link {
  width: max-content;
  padding: 0;
  color: var(--figma-orange);
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: .73rem;
  font-weight: 800;
  cursor: pointer;
}
.figma-bill-detail hr {
  width: 62%;
  margin: 10px 0 8px;
  border: 0;
  border-top: 1px solid #9aa09b;
}
.figma-bill-detail > strong {
  font-size: .76rem;
}
.figma-bill-detail dl {
  display: grid;
  grid-template-columns: 1fr;
  margin: 12px 0;
}
.figma-bill-detail dt {
  color: #5f655f;
}
.figma-pay-button {
  min-width: 150px;
  margin: 8px 0 15px;
}
.figma-dashboard-card {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 15px;
  color: var(--figma-text);
  border: 1px solid #d0d5d1;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}
.figma-dashboard-card > span {
  color: #087f3d;
  font-size: .57rem;
  font-weight: 900;
  text-transform: uppercase;
}
.figma-dashboard-card > small {
  color: #697069;
}
.figma-dashboard-card.is-history i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #139554;
}
.figma-dashboard-card.is-history strong {
  grid-column: 2;
}
.figma-dashboard-card.is-history small {
  grid-column: 2;
}
.figma-guardian-page {
  width: min(100%,620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 27px 23px 40px;
  color: var(--figma-text);
  background: #fff;
}
.figma-page-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 22px;
}
.figma-page-head > button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  padding: 0;
  color: var(--figma-text);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.figma-page-head > button:hover {
  background: #ecf3ee;
}
.figma-page-head .ui-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.8;
}
.figma-page-head h2 {
  margin: 7px 0 0;
  font-size: 1.24rem;
}
.figma-page-head p {
  margin: 14px 0 0 -42px;
  color: #606560;
  font-size: .76rem;
  line-height: 1.35;
}
.figma-page-list {
  display: grid;
  gap: 20px;
}
.figma-empty {
  display: grid;
  gap: 6px;
  min-height: 180px;
  place-content: center;
  color: #6a706a;
  text-align: center;
}
.figma-checkout-scrim {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: grid;
  overflow: auto;
  place-items: center;
  padding: 22px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px);
}
.figma-receipt-scrim {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: grid;
  overflow: auto;
  place-items: center;
  padding: 22px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px);
}
.figma-checkout-card {
  width: min(100%,430px);
  padding: 23px 15px;
  border-radius: 13px;
  background: linear-gradient(105deg,#f0f1f0,#fff);
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
}
.figma-receipt-document {
  width: min(100%,430px);
  border-radius: 13px;
  background: linear-gradient(105deg,#f0f1f0,#fff);
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
}
.figma-checkout-card > span {
  font-size: .8rem;
}
.figma-checkout-card h3 {
  margin: 7px 0;
  font-size: .95rem;
}
.figma-checkout-card hr {
  width: 63%;
  margin: 8px 0 17px;
  border: 0;
  border-top: 1px solid #999;
}
.figma-checkout-total {
  display: grid;
  justify-items: center;
  margin-bottom: 30px;
}
.figma-checkout-total strong {
  font-size: 1.35rem;
}
.figma-checkout-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-bottom: 25px;
  font-size: .76rem;
}
.figma-checkout-card dd {
  margin: 0 0 10px;
}
.figma-checkout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
}
.figma-checkout-card > .figma-link {
  margin-top: 13px;
}
.figma-qris-page {
  display: grid;
  gap: 12px;
}
.figma-qris-card {
  padding: 13px 17px;
  border: 1px solid #bfc5c0;
  border-radius: 10px;
  background: linear-gradient(105deg,#e5e6e5,#fff);
  text-align: center;
}
.figma-qris-card > strong {
  font-size: .8rem;
}
.figma-qris-card > p {
  margin: 6px 0;
  font-size: .68rem;
}
.figma-qris-card.is-countdown > div {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin: 9px 0 5px;
}
.figma-qris-card.is-countdown span {
  display: grid;
  font-size: 1.1rem;
}
.figma-qris-card.is-countdown small {
  font-size: .62rem;
}
.figma-demo-qr {
  position: relative;
  width: min(100%,270px);
  aspect-ratio: 1;
  margin: 12px auto 16px;
  overflow: hidden;
  border: 14px solid #fff;
  background: repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/18px 18px;
  box-shadow: 0 0 0 1px #222;
}
.figma-demo-qr::before {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border: 10px solid #111;
  background: #fff;
  box-shadow: inset 0 0 0 8px #111;
}
.figma-demo-qr::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border: 10px solid #111;
  background: #fff;
  box-shadow: inset 0 0 0 8px #111;
}
.figma-demo-qr::before {
  top: 7px;
  left: 7px;
}
.figma-demo-qr::after {
  right: 7px;
  bottom: 7px;
}
.figma-demo-qr span {
  position: absolute;
  z-index: 2;
  inset: 44% 12px auto;
  padding: 6px;
  color: #fff;
  background: #c72f2f;
  font-weight: 950;
  letter-spacing: .2em;
  transform: rotate(-6deg);
}
.figma-payment-data {
  text-align: left;
}
.figma-payment-data dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  font-size: .67rem;
}
.figma-payment-data dt {
  margin-top: 9px;
  font-weight: 700;
}
.figma-payment-data dd {
  margin: 0;
  font-weight: 800;
}
.figma-payment-data .is-summary {
  grid-template-columns: 1fr 1.5fr;
}
.figma-payment-data .is-summary dt {
  margin: 0;
}
.figma-qris-warning {
  margin: 12px -17px -13px !important;
  padding: 9px 17px;
  color: #7a4900;
  background: #ffc552;
}
.figma-help-strip {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  color: #444;
  border: 1px solid #c9ceca;
  border-radius: 9px;
  background: linear-gradient(105deg,#e4e5e4,#fff);
}
.figma-cancel-payment {
  justify-self: center;
  color: #a03434;
  border: 0;
  background: transparent;
  font-size: .72rem;
}
.figma-payment-logo {
  width: 96px;
  margin: 8px auto 0;
}
.figma-news-card {
  min-height: 151px;
}
.figma-news-card > p {
  margin: 8px 0;
  font-size: .78rem;
}
.figma-news-card > small {
  display: block;
  margin: 8px 0 15px;
  color: #616761;
  font-size: .66rem;
}
.figma-news-watermark {
  position: absolute;
}
.figma-news-detail {
  margin: 14px -14px 14px;
  padding: 14px;
  border-top: 1px solid #cbd1cc;
  border-bottom: 1px solid #cbd1cc;
  background: rgba(255,255,255,.58);
  animation: figmaExpand .2s ease;
}
.figma-news-detail h4 {
  margin: 0 0 7px;
}
.figma-news-detail p {
  line-height: 1.55;
}
@keyframes figmaExpand {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.figma-period-filter {
  display: grid;
  gap: 8px;
  margin: -6px 0 20px;
  font-weight: 800;
}
.figma-period-filter select {
  min-height: 50px;
  border-color: var(--figma-line);
  border-radius: 12px;
  background: linear-gradient(105deg,#e3e4e3,#fff);
}
.figma-timeline {
  position: relative;
  display: grid;
  min-height: 520px;
  gap: 0;
  padding: 26px 17px;
  border: 1px solid var(--figma-line);
  border-radius: 12px;
  background: #fff;
}
.figma-timeline::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 42px;
  left: 25px;
  width: 2px;
  background: #88ce9f;
}
.figma-timeline > button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  min-height: 84px;
  padding: 6px 0;
  color: var(--figma-text);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.figma-timeline > button i {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #138744;
  box-shadow: 0 0 0 2px #138744;
}
.figma-timeline > button span {
  display: grid;
  gap: 3px;
}
.figma-timeline > button small {
  color: #5e645f;
}
.figma-notification-card {
  min-height: 130px;
}
.figma-notification-card.is-unread {
  box-shadow: inset 4px 0 0 #0b9747;
}
.figma-notification-card p {
  margin: 8px 0;
  font-size: .76rem;
}
.figma-notification-card small {
  color: #666;
  font-size: .65rem;
}
.figma-notification-empty {
  display: grid;
  min-height: 60vh;
  place-content: center;
  justify-items: center;
  gap: 9px;
  text-align: center;
}
.figma-notification-empty > div {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 2px solid #555;
  border-radius: 50%;
  font-weight: 950;
}
.figma-notification-empty span {
  max-width: 250px;
  color: #6d726d;
  font-size: .75rem;
}
.figma-form-card {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--figma-line);
  background: linear-gradient(105deg,#e3e4e3,#fff);
}
.figma-settings-card {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--figma-line);
  background: linear-gradient(105deg,#e3e4e3,#fff);
}
.figma-form-card h3 {
  margin: 0 0 18px;
}
.figma-settings-card h3 {
  margin: 0 0 18px;
}
.figma-form-card .field input {
  border-color: #bec5bf;
  background: rgba(255,255,255,.76);
}
.figma-form-card .field select {
  border-color: #bec5bf;
  background: rgba(255,255,255,.76);
}
.figma-form-card .field textarea {
  border-color: #bec5bf;
  background: rgba(255,255,255,.76);
}
.figma-settings-card dl {
  display: grid;
  gap: 4px;
  margin: 0 0 15px;
}
.figma-settings-card dt {
  margin-top: 9px;
  color: #5f655f;
  font-size: .75rem;
}
.figma-settings-card dd {
  margin: 0;
  font-weight: 800;
}
.figma-student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.figma-student-row > div {
  display: grid;
}
.figma-student-row small {
  color: #667067;
  font-size: .7rem;
}
.figma-settings-card.is-devices {
  min-height: 270px;
}
.figma-settings-card.is-devices article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
}
.figma-settings-card.is-devices article > div {
  display: grid;
  gap: 4px;
}
.figma-settings-card.is-devices article span {
  width: max-content;
  padding: 3px 6px;
  border-radius: 4px;
  background: #d7d7d7;
  font-size: .5rem;
}
.figma-settings-card.is-devices article small {
  color: #666;
  font-size: .6rem;
}
.figma-settings-card.is-devices article button {
  color: #b22d2d;
  border: 0;
  background: transparent;
}
.figma-receipt-card {
  display: grid;
  gap: 5px;
  min-height: 150px;
}
.figma-receipt-card > strong {
  font-size: 1.15rem;
}
.figma-receipt-card > small {
  color: #666;
}
.figma-receipt-card > .figma-link {
  margin-top: 10px;
}
.figma-receipt-document {
  padding: 25px 22px;
}
.figma-receipt-document header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.figma-receipt-document header img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.figma-receipt-document header div {
  display: grid;
}
.figma-receipt-document header small {
  font-size: .58rem;
}
.figma-receipt-document > span {
  color: #087f3d;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .2em;
}
.figma-receipt-document h2 {
  margin: 5px 0;
}
.figma-receipt-document > hr {
  margin: 14px 0 18px;
  border: 0;
  border-top: 1px solid #333;
}
.figma-receipt-document > dl {
  display: grid;
  grid-template-columns: .85fr 1.8fr;
  gap: 13px 8px;
  font-size: .7rem;
}
.figma-receipt-document > dl dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.figma-receipt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 28px 0 13px;
}
@media (max-width: 900px) {
  .audience-guardian .auth-panel {
    padding: 31vh 0 0;
  }
  .audience-guardian .auth-panel__inner {
    min-height: 69vh;
  }
  .role-guardian .sidebar {
    transform: translateX(105%);
  }
  .role-guardian.sidebar-open .sidebar {
    transform: translateX(0);
  }
}
@media (max-width: 430px) {
  .figma-guardian-page {
    padding-right: 23px;
    padding-left: 23px;
  }
  .figma-checkout-actions {
    gap: 18px;
  }
}
@media print {
  .figma-receipt-scrim {
    position: static;
    display: block;
    padding: 0;
    background: #fff;
  }
  .figma-receipt-document {
    width: 100%;
    box-shadow: none;
  }
  .figma-receipt-actions {
    display: none;
  }
  .figma-receipt-document > .figma-link {
    display: none;
  }
}
.audience-guardian .secret-logo-button {
  width: clamp(204px,51vw,260px);
  height: clamp(204px,51vw,260px);
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 0 15px rgba(255,255,255,.9));
}
.audience-staff .secret-logo-button {
  width: clamp(204px,51vw,260px);
  height: clamp(204px,51vw,260px);
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 0 15px rgba(255,255,255,.9));
}
.audience-guardian .secret-logo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.audience-staff .secret-logo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.audience-guardian .demo-mode-label {
  display: none;
}
.audience-staff .demo-mode-label {
  display: none;
}
.audience-guardian .auth-panel {
  padding: 31vh 0 0;
  transform: translateY(105%);
  transition: transform .62s cubic-bezier(.18,.8,.2,1),opacity .4s ease;
}
.audience-staff .auth-panel {
  padding: 31vh 0 0;
  transform: translateY(105%);
  transition: transform .62s cubic-bezier(.18,.8,.2,1),opacity .4s ease;
}
.audience-guardian .auth-screen.login-open .auth-panel {
  transform: translateY(0);
}
.audience-staff .auth-screen.login-open .auth-panel {
  transform: translateY(0);
}
.audience-guardian .auth-panel__inner {
  width: 100%;
  min-height: 69vh;
  padding: 30px 34px 46px;
  border-radius: 45px 45px 0 0;
  background: radial-gradient(circle at 22% 103%,#00c326 0 27%,transparent 27.3%),linear-gradient(154deg,#00aa23,#00831c 57%,#005b14 58% 73%,#00a81c 74%);
}
.audience-staff .auth-panel__inner {
  width: 100%;
  min-height: 69vh;
  padding: 30px 34px 46px;
  border-radius: 45px 45px 0 0;
  background: radial-gradient(circle at 22% 103%,#00c326 0 27%,transparent 27.3%),linear-gradient(154deg,#00aa23,#00831c 57%,#005b14 58% 73%,#00a81c 74%);
}
.audience-guardian .auth-panel__inner .login-school-mark {
  top: -25vh;
  left: 30px;
  max-width: calc(100% - 60px);
  color: #fff;
  font-size: .72rem;
  line-height: 1.3;
}
.audience-staff .auth-panel__inner .login-school-mark {
  top: -25vh;
  left: 30px;
  max-width: calc(100% - 60px);
  color: #fff;
  font-size: .72rem;
  line-height: 1.3;
}
.audience-guardian .auth-panel__inner .login-school-mark img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}
.audience-staff .auth-panel__inner .login-school-mark img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}
.audience-guardian .auth-panel__inner h2 {
  margin: 4px 0 30px;
  color: #fff;
  font-size: clamp(1.7rem,7vw,2.05rem);
}
.audience-staff .auth-panel__inner h2 {
  margin: 4px 0 30px;
  color: #fff;
  font-size: clamp(1.7rem,7vw,2.05rem);
}
.audience-guardian #login-mode-help {
  display: none;
}
.audience-staff #login-mode-help {
  display: none;
}
.audience-guardian .auth-back {
  display: none;
}
.audience-staff .auth-back {
  display: none;
}
.audience-guardian .auth-panel__inner .stack {
  display: grid;
  gap: 18px;
}
.audience-staff .auth-panel__inner .stack {
  display: grid;
  gap: 18px;
}
.audience-guardian .auth-panel__inner .field {
  position: relative;
}
.audience-staff .auth-panel__inner .field {
  position: relative;
}
.audience-guardian .auth-panel__inner .field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.audience-staff .auth-panel__inner .field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.audience-guardian .auth-panel__inner .field::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 50%;
  width: 25px;
  height: 25px;
  background: url("../assets/icon-login-nisn.png") center/contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
.audience-staff .auth-panel__inner .field::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 50%;
  width: 25px;
  height: 25px;
  background: url("../assets/icon-login-nisn.png") center/contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}
.audience-guardian .auth-panel__inner #login-password-field::before {
  background-image: url("../assets/icon-login-password.png");
}
.audience-staff .auth-panel__inner #login-password-field::before {
  background-image: url("../assets/icon-login-password.png");
}
.audience-guardian .auth-panel__inner .field input {
  padding: 10px 52px 10px 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.audience-staff .auth-panel__inner .field input {
  padding: 10px 52px 10px 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.audience-guardian .auth-panel__inner .field input::placeholder {
  color: rgba(255,255,255,.94);
  opacity: 1;
}
.audience-staff .auth-panel__inner .field input::placeholder {
  color: rgba(255,255,255,.94);
  opacity: 1;
}
.audience-guardian .password-eye {
  color: #fff;
  background: transparent;
}
.audience-staff .password-eye {
  color: #fff;
  background: transparent;
}
.audience-guardian .auth-panel__inner #forgot-password-button {
  position: static;
  grid-row: 3;
  justify-self: end;
  margin: -8px 4px 0 0;
  color: #fff;
}
.audience-staff .auth-panel__inner #forgot-password-button {
  position: static;
  grid-row: 3;
  justify-self: end;
  margin: -8px 4px 0 0;
  color: #fff;
}
.audience-guardian .auth-panel__inner .form-error {
  grid-row: 4;
}
.audience-staff .auth-panel__inner .form-error {
  grid-row: 4;
}
.audience-guardian .auth-panel__inner .button--primary {
  grid-row: 5;
  min-height: 56px;
  margin-top: 70px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(0,95,30,.52);
  font-size: 1.08rem;
}
.audience-staff .auth-panel__inner .button--primary {
  grid-row: 5;
  min-height: 56px;
  margin-top: 70px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(0,95,30,.52);
  font-size: 1.08rem;
}
.audience-guardian .login-security-note {
  display: block;
  max-width: 330px;
  margin: 12px auto 0;
  color: #fff;
  text-align: center;
}
.audience-staff .login-security-note {
  display: block;
  max-width: 330px;
  margin: 12px auto 0;
  color: #fff;
  text-align: center;
}
.role-guardian .topbar {
  position: relative !important;
  top: auto !important;
  z-index: 3;
  min-height: 112px;
  padding: 18px 23px 12px;
  border: 0;
  box-shadow: none !important;
}
.role-guardian .topbar-school-brand {
  order: 1;
  margin-right: auto;
  color: #fff;
  line-height: 1.45;
}
.role-guardian .topbar-school-brand img {
  border-radius: 50%;
  object-fit: cover;
}
.role-guardian .topbar__title {
  display: none;
}
.role-guardian .user-button {
  display: none;
}
.role-guardian .topbar__actions {
  order: 2;
  margin-left: 0;
}
.role-guardian .topbar__menu {
  order: 3;
}
.role-guardian .topbar__menu {
  width: 43px;
  min-width: 43px;
  height: 43px;
  color: #fff;
  border: 0;
  background: transparent;
}
.role-guardian .notification-button {
  width: 43px;
  min-width: 43px;
  height: 43px;
  color: #fff;
  border: 0;
}
.role-guardian .notification-button {
  background: url("../assets/icon-notification.png") center/30px 30px no-repeat !important;
}
.role-guardian .notification-button > svg {
  display: none;
}
.role-guardian .notification-button #notification-count {
  top: -1px;
  right: 0;
}
.role-guardian.sidebar-open .app-page {
  filter: blur(4px);
}
.figma-guardian-home {
  min-height: calc(100vh - 112px);
  padding-top: 0;
  background: transparent !important;
}
.figma-profile-card {
  position: relative;
  margin: 0 23px;
  padding: 13px 16px 12px;
  border-radius: 15px;
}
.figma-profile-card > p {
  margin-right: 66px;
  color: #08752d;
  font-size: .78rem;
}
.figma-student-card-icon {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 12px;
  width: 54px;
  height: 54px;
  padding: 9px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg,#21b86a,#006482);
}
.figma-student-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.figma-profile-main {
  padding-right: 55px;
}
.figma-avatar {
  width: 94px;
  height: 94px;
  flex-basis: 94px;
}
.figma-child-name strong {
  color: #08752d;
  font-size: clamp(1.1rem,5.4vw,1.42rem);
}
.figma-profile-meta {
  flex-wrap: wrap;
  margin-top: 10px;
}
.figma-profile-meta > span {
  padding: 3px 8px;
  border: 1px solid #111;
  border-radius: 999px;
}
.figma-quick-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(78px,112px)) !important;
  justify-content: center;
  gap: clamp(18px,8vw,40px);
  padding: 28px 28px 21px;
}
.figma-quick-actions i {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255,255,255,.86);
}
.figma-quick-actions span {
  color: #fff;
}
.figma-home-sheet {
  border-radius: 30px 30px 0 0;
  background: #e8e8e8;
}
.figma-home-sheet > nav {
  margin: 0;
  padding: 13px 23px;
  border-radius: 30px 30px 0 0;
  background: #e8e8e8;
}
.figma-home-sheet > nav button {
  min-height: 45px;
  border-radius: 0;
  color: #555;
  background: #fff;
  font-size: .96rem;
}
.figma-home-sheet > nav button:first-child {
  border-radius: 22px 0 0 22px;
}
.figma-home-sheet > nav button:last-child {
  border-radius: 0 22px 22px 0;
}
.figma-home-sheet > nav button.is-active {
  color: #222;
  background: #fff;
  font-weight: 900;
}
.figma-home-sheet > nav button.is-active::after {
  display: none !important;
  content: none !important;
}
.figma-home-content {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 17px;
  min-height: 425px;
  padding: 21px 23px 32px;
  background: #fff;
}
.figma-home-bill .figma-bill-card {
  min-height: 148px;
  color: #fff;
  border: 0;
}
.figma-home-total {
  min-height: 148px;
  border: 0;
}
.figma-dashboard-card.is-history {
  display: grid;
  grid-template-columns: 13px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  min-height: 0 !important;
  padding: 14px 16px !important;
  text-align: left;
}
.figma-dashboard-card.is-history i {
  grid-row: 1/3;
  align-self: start;
  margin-top: 5px;
}
.figma-dashboard-card.is-history strong {
  margin: 0 !important;
  align-self: start;
}
.figma-dashboard-card.is-history small {
  margin: 0 !important;
  align-self: start;
}
.figma-bill-watermark {
  width: 41%;
  height: 78%;
  color: transparent !important;
  font-size: 0 !important;
  background: url("../assets/icon-bill-watermark.png") center/contain no-repeat;
  opacity: .62;
}
.figma-bill-card {
  overflow: hidden;
}
.figma-notification-card {
  overflow: hidden;
}
.figma-bill-card > *:not(.figma-bill-watermark) {
  position: relative;
  z-index: 1;
}
.figma-notification-card > *:not(.figma-bill-watermark) {
  position: relative;
  z-index: 1;
}
.figma-news-watermark {
  width: 38%;
  height: 62%;
  color: transparent !important;
  font-size: 0 !important;
  background: url("../assets/icon-announcement-card.png") center/contain no-repeat;
  opacity: .62;
}
.figma-news-card > *:not(.figma-news-watermark) {
  position: relative;
  z-index: 1;
}
.figma-payment-history-list {
  display: grid;
  margin-top: 18px;
  padding: 8px 18px;
  border: 1px solid #bfc4bf;
  border-radius: 16px;
  background: #fff;
}
.figma-payment-history-row {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  grid-template-areas: "time time time" "icon title amount" "icon desc desc";
  align-items: center;
  gap: 4px 10px;
  min-height: 118px;
  padding: 15px 0;
  color: #333;
  border: 0;
  border-bottom: 1px solid #d6dad6;
  background: transparent;
  text-align: left;
}
.figma-payment-history-row:last-child {
  border-bottom: 0;
}
.figma-payment-history-row time {
  grid-area: time;
  padding-left: 48px;
  font-size: .72rem;
}
.figma-payment-history-row img {
  grid-area: icon;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.figma-payment-history-row strong {
  grid-area: title;
  color: #087c2d;
  font-size: 1rem;
}
.figma-payment-history-row b {
  grid-area: amount;
  color: #222;
  font-size: .9rem;
  white-space: nowrap;
}
.figma-payment-history-row small {
  grid-area: desc;
  color: #555;
  font-size: .78rem;
}
.figma-device-section {
  margin: 0 0 22px;
}
.figma-device-section > h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}
.figma-device-section > p {
  margin: 0 0 18px;
  color: #666;
}
.figma-device-card {
  padding: 9px 18px;
  border: 1px solid #c9d5ce;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,70,30,.06);
}
.figma-device-card article {
  padding: 18px 0;
  border-bottom: 1px solid #d8ddd9;
}
.figma-device-card article:last-child {
  border-bottom: 0;
}
.figma-device-card article > div {
  position: relative;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
  gap: 8px;
}
.figma-device-card article strong {
  font-size: 1rem;
}
.figma-device-card article span {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}
.figma-device-card article em {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
}
.figma-device-card article span {
  color: #56605a;
  background: #edf2ef;
}
.figma-device-card article em {
  justify-self: end;
  color: #087c45;
  background: #d8f4e7;
}
.figma-device-card article small {
  color: #666;
  font-size: .75rem;
}
.figma-device-card article button {
  margin-top: -48px;
  padding: 10px 14px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: #d94242;
  font-weight: 850;
}
@media (max-width: 430px) {
  .audience-guardian .secret-logo-button {
    width: 202px;
    height: 202px;
  }
  .audience-staff .secret-logo-button {
    width: 202px;
    height: 202px;
  }
  .audience-guardian .auth-panel__inner {
    padding-right: 30px;
    padding-left: 30px;
  }
  .audience-staff .auth-panel__inner {
    padding-right: 30px;
    padding-left: 30px;
  }
  .role-guardian .topbar {
    padding-right: 17px;
    padding-left: 17px;
  }
  .role-guardian .topbar-school-brand {
    gap: 6px;
  }
  .role-guardian .topbar-school-brand img {
    width: 53px;
    height: 53px;
  }
  .role-guardian .topbar-school-brand span {
    max-width: 155px;
    font-size: .54rem;
  }
  .role-guardian .topbar__menu {
    width: 38px;
    min-width: 38px;
  }
  .role-guardian .notification-button {
    width: 38px;
    min-width: 38px;
  }
  .figma-profile-card {
    margin-right: 19px;
    margin-left: 19px;
  }
  .figma-profile-main {
    padding-right: 43px;
  }
  .figma-avatar {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }
  .figma-student-card-icon {
    width: 48px;
    height: 48px;
  }
  .figma-quick-actions {
    grid-template-columns: repeat(3,minmax(75px,96px)) !important;
    gap: 13px;
    padding-right: 18px;
    padding-left: 18px;
  }
  .figma-quick-actions span {
    font-size: .67rem;
  }
  .figma-payment-history-row {
    grid-template-columns: 31px minmax(0,1fr) auto;
    column-gap: 7px;
  }
  .figma-payment-history-row time {
    padding-left: 41px;
  }
  .figma-payment-history-row img {
    width: 29px;
    height: 29px;
  }
  .figma-payment-history-row strong {
    font-size: .86rem;
  }
  .figma-payment-history-row b {
    font-size: .78rem;
  }
}
.secret-logo-button {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.login-school-mark img {
  overflow: visible !important;
  background: transparent !important;
}
.sidebar__brand .school-logo {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.topbar-school-brand img {
  overflow: visible !important;
  background: transparent !important;
}
.secret-logo-button img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
.login-school-mark img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
.sidebar__brand .school-logo img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
.topbar-school-brand img {
  object-fit: contain !important;
  border-radius: 0 !important;
}
.audience-guardian .auth-panel__inner .field:first-child::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-staff .auth-panel__inner .field:first-child::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-developer .auth-panel__inner .field:first-child::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-guardian .auth-panel__inner #login-password-field::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-staff .auth-panel__inner #login-password-field::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-developer .auth-panel__inner #login-password-field::before {
  content: "" !important;
  top: 50% !important;
  width: 25px !important;
  height: 25px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
}
.role-guardian .figma-quick-actions {
  position: relative;
  z-index: 1;
  padding-bottom: 25px;
}
.role-guardian .figma-home-sheet {
  position: relative;
  z-index: 2;
}
.figma-news-watermark {
  top: 18% !important;
  right: 12px !important;
  background-position: center bottom !important;
}
.figma-payment-history-row img {
  align-self: start;
  transform: translateY(-7px);
}
.figma-device-card article {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-width: 0;
  gap: 12px;
}
.figma-device-card article.is-current {
  grid-template-columns: minmax(0,1fr);
}
.figma-device-card .figma-device-main {
  display: grid;
  grid-template-columns: minmax(0,1fr) !important;
  min-width: 0;
  width: 100%;
  gap: 8px;
}
.figma-device-card .figma-device-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 7px;
}
.figma-device-card .figma-device-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.figma-device-card .figma-device-title span {
  flex: 0 0 auto;
  justify-self: auto;
}
.figma-device-card .figma-device-title em {
  flex: 0 0 auto;
  justify-self: auto;
}
.figma-device-card article small {
  display: block;
  grid-column: 1/-1 !important;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.figma-device-card article button {
  float: none;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .figma-device-card {
    padding-right: 14px;
    padding-left: 14px;
  }
  .figma-device-card article {
    grid-template-columns: minmax(0,1fr);
  }
  .figma-device-card article button {
    justify-self: start;
  }
}
@media (min-width: 901px) {
  .audience-staff .auth-panel {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    padding: 24px;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
  }
  .audience-developer .auth-panel {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    padding: 24px;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
  }
  .audience-staff .auth-screen.login-open .auth-panel {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }
  .audience-developer .auth-screen.login-open .auth-panel {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
  }
  .audience-staff .auth-panel__inner {
    width: min(430px,92vw);
    min-height: 0;
    padding: 30px 34px 32px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    box-shadow: 0 26px 70px rgba(0,0,0,.32);
  }
  .audience-developer .auth-panel__inner {
    width: min(430px,92vw);
    min-height: 0;
    padding: 30px 34px 32px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    box-shadow: 0 26px 70px rgba(0,0,0,.32);
  }
  .audience-staff .auth-panel__inner .login-school-mark {
    position: static;
    justify-content: center;
    max-width: none;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
  }
  .audience-developer .auth-panel__inner .login-school-mark {
    position: static;
    justify-content: center;
    max-width: none;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
  }
  .audience-staff .auth-panel__inner .login-school-mark span {
    display: none;
  }
  .audience-developer .auth-panel__inner .login-school-mark span {
    display: none;
  }
  .audience-staff .auth-panel__inner h2 {
    margin: 0 0 8px;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 2.1rem;
    text-align: center;
  }
  .audience-developer .auth-panel__inner h2 {
    margin: 0 0 8px;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 2.1rem;
    text-align: center;
  }
  .audience-staff .auth-panel__inner .field input {
    min-height: 48px;
    padding: 10px 44px 10px 10px;
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.82);
    border-radius: 0;
    background: rgba(255,255,255,.05);
    font-weight: 500;
  }
  .audience-developer .auth-panel__inner .field input {
    min-height: 48px;
    padding: 10px 44px 10px 10px;
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.82);
    border-radius: 0;
    background: rgba(255,255,255,.05);
    font-weight: 500;
  }
  .audience-staff .auth-panel__inner .field::before {
    right: 12px;
    left: auto;
    width: 20px !important;
    height: 20px !important;
  }
  .audience-developer .auth-panel__inner .field::before {
    right: 12px;
    left: auto;
    width: 20px !important;
    height: 20px !important;
  }
  .audience-staff .auth-panel__inner #login-password-field::before {
    right: auto;
    left: 12px;
  }
  .audience-developer .auth-panel__inner #login-password-field::before {
    right: auto;
    left: 12px;
  }
  .audience-staff .auth-panel__inner #login-password-field input {
    padding-right: 48px;
    padding-left: 42px;
  }
  .audience-developer .auth-panel__inner #login-password-field input {
    padding-right: 48px;
    padding-left: 42px;
  }
  .audience-staff .auth-panel__inner .button--primary {
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 4px;
    color: #102217;
    background: #fff;
    font-size: .9rem;
    font-weight: 850;
  }
  .audience-developer .auth-panel__inner .button--primary {
    min-height: 48px;
    margin-top: 14px;
    border: 0;
    border-radius: 4px;
    color: #102217;
    background: #fff;
    font-size: .9rem;
    font-weight: 850;
  }
  .audience-staff .login-security-note {
    margin-top: 18px;
    font-size: .75rem;
  }
  .audience-developer .login-security-note {
    margin-top: 18px;
    font-size: .75rem;
  }
}
.audience-guardian .auth-panel::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),url("../assets/school-background-primary.jpg") center/cover no-repeat;
}
.audience-staff .auth-panel::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),url("../assets/school-background-primary.jpg") center/cover no-repeat;
}
.audience-guardian .password-eye {
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
}
.audience-staff .password-eye {
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
}
.audience-developer .password-eye {
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
}
.audience-guardian .auth-panel__inner .field input {
  min-height: 56px;
  line-height: 1.35;
}
.audience-staff .auth-panel__inner .field input {
  min-height: 56px;
  line-height: 1.35;
}
.role-guardian .topbar-school-brand {
  gap: 9px;
  font-size: .69rem;
}
.role-guardian .topbar-school-brand img {
  width: 68px !important;
  height: 68px !important;
}
.role-guardian .notification-button #notification-count:not(.has-count) {
  display: none;
}
.role-guardian .notification-button #notification-count.has-count {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d73838;
  font-size: .64rem;
  font-weight: 900;
}
.role-guardian .sidebar__brand {
  gap: 10px;
}
.role-guardian .sidebar__brand .school-logo {
  width: 66px !important;
  height: 66px !important;
  flex: 0 0 66px;
}
.role-guardian .sidebar__brand strong {
  font-size: .66rem;
  line-height: 1.4;
}
.role-guardian .sidebar__brand small {
  font-size: .56rem;
  line-height: 1.4;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"] .nav-icon::before {
  -webkit-mask-image: url("../assets/icon-announcement-user.png") !important;
  mask-image: url("../assets/icon-announcement-user.png") !important;
}
.figma-child-name small {
  color: #41694e;
  font-size: .78rem;
  font-weight: 700;
}
.figma-profile-meta {
  justify-content: flex-start !important;
}
.figma-profile-meta .figma-payment-state {
  margin-left: 0;
}
.figma-quick-actions i {
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
  background: rgba(0,91,39,.18) !important;
}
.figma-quick-actions i .ui-icon {
  stroke: #fff !important;
}
.figma-home-empty--paid {
  min-height: 255px;
  padding-top: 14px;
}
.figma-home-empty--paid img {
  width: min(132px,42vw);
  height: 112px;
  margin: 0 auto 3px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  filter: saturate(.85) brightness(1.08);
}
.auth-hero-copy {
  display: none;
}
@media (min-width: 901px) {
  .audience-staff .auth-screen {
    background: linear-gradient(90deg,rgba(0,48,34,.88),rgba(0,50,35,.46)),url("../assets/school-background-primary.jpg") center/cover no-repeat;
  }
  .audience-developer .auth-screen {
    background: linear-gradient(90deg,rgba(0,48,34,.88),rgba(0,50,35,.46)),url("../assets/school-background-primary.jpg") center/cover no-repeat;
  }
  .audience-combined .auth-screen {
    background: linear-gradient(90deg,rgba(0,48,34,.88),rgba(0,50,35,.46)),url("../assets/school-background-primary.jpg") center/cover no-repeat;
  }
  .audience-staff .auth-hero-copy {
    max-width: 570px;
    color: #fff;
  }
  .audience-developer .auth-hero-copy {
    max-width: 570px;
    color: #fff;
  }
  .audience-combined .auth-hero-copy {
    max-width: 570px;
    color: #fff;
  }
  .auth-hero-copy strong {
    color: #f8d64e;
    font-size: 1.05rem;
  }
  .auth-hero-copy small {
    max-width: 520px;
    color: rgba(255,255,255,.9);
    font-size: .9rem;
    line-height: 1.55;
  }
  .auth-hero-copy address {
    margin-top: 6px;
    color: rgba(255,255,255,.76);
    font-size: .78rem;
    font-style: normal;
  }
  .audience-staff .auth-panel {
    background: rgba(0,35,27,.7) !important;
    backdrop-filter: blur(3px);
  }
  .audience-developer .auth-panel {
    background: rgba(0,35,27,.7) !important;
    backdrop-filter: blur(3px);
  }
  .audience-combined .auth-panel {
    background: rgba(0,35,27,.7) !important;
    backdrop-filter: blur(3px);
  }
  .audience-staff .auth-panel::before {
    content: none !important;
  }
  .audience-developer .auth-panel::before {
    content: none !important;
  }
  .audience-combined .auth-panel::before {
    content: none !important;
  }
  .audience-staff .auth-panel__inner {
    background: linear-gradient(150deg,rgba(1,69,49,.98),rgba(0,43,32,.98));
  }
  .audience-developer .auth-panel__inner {
    background: linear-gradient(150deg,rgba(1,69,49,.98),rgba(0,43,32,.98));
  }
  .audience-combined .auth-panel__inner {
    background: linear-gradient(150deg,rgba(1,69,49,.98),rgba(0,43,32,.98));
  }
}
@media (max-width: 560px) {
  .role-guardian .topbar-school-brand img {
    width: 57px !important;
    height: 57px !important;
  }
  .role-guardian .topbar-school-brand {
    font-size: .56rem;
  }
}
@media (min-width: 901px) {
  .audience-staff .auth-screen {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
  }
  .audience-developer .auth-screen {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
  }
  .audience-combined .auth-screen {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
  }
  .audience-staff .secret-logo-button {
    position: absolute;
    left: 0;
  }
  .audience-developer .secret-logo-button {
    position: absolute;
    left: 0;
  }
  .audience-combined .secret-logo-button {
    position: absolute;
    left: 0;
  }
  .audience-staff .auth-hero-copy {
    order: 4;
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }
  .audience-developer .auth-hero-copy {
    order: 4;
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }
  .audience-combined .auth-hero-copy {
    order: 4;
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }
}
.audience-staff .auth-panel__inner .password-field {
  position: relative !important;
  display: block !important;
}
.audience-developer .auth-panel__inner .password-field {
  position: relative !important;
  display: block !important;
}
.audience-combined .auth-panel__inner .password-field {
  position: relative !important;
  display: block !important;
}
.audience-staff .auth-panel__inner .password-eye {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-developer .auth-panel__inner .password-eye {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-combined .auth-panel__inner .password-eye {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
.audience-staff .auth-screen {
  background-image: linear-gradient(180deg,rgba(0,93,45,.38),rgba(0,76,35,.72)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.audience-developer .auth-screen {
  background-image: linear-gradient(180deg,rgba(0,93,45,.38),rgba(0,76,35,.72)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.audience-combined .auth-screen {
  background-image: linear-gradient(180deg,rgba(0,93,45,.38),rgba(0,76,35,.72)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.audience-guardian .auth-panel::before {
  background-image: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}
.audience-staff .auth-panel::before {
  background-image: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}
.audience-developer .auth-panel::before {
  background-image: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}
.audience-combined .auth-panel::before {
  background-image: linear-gradient(180deg,rgba(0,83,39,.24),rgba(0,73,33,.68)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
}
.role-guardian .app-page {
  background-image: linear-gradient(180deg,rgba(20,190,79,.74),rgba(0,113,47,.9)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center top !important;
  background-size: auto 610px !important;
  background-repeat: no-repeat !important;
}
.role-guardian .tpi-guardian-home {
  background-image: linear-gradient(180deg,rgba(20,190,79,.74),rgba(0,113,47,.9)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center top !important;
  background-size: auto 610px !important;
  background-repeat: no-repeat !important;
}
.role-guardian .figma-guardian-home {
  background-image: linear-gradient(180deg,rgba(20,190,79,.74),rgba(0,113,47,.9)),
    url("../assets/school-background-secondary.jpg") !important;
  background-position: center top !important;
  background-size: auto 610px !important;
  background-repeat: no-repeat !important;
}
@media (min-width: 901px) {
  .audience-staff .secret-logo-button {
    width: 86px !important;
    height: 86px !important;
    top: -136px !important;
  }
  .audience-developer .secret-logo-button {
    width: 86px !important;
    height: 86px !important;
    top: -136px !important;
  }
  .audience-combined .secret-logo-button {
    width: 86px !important;
    height: 86px !important;
    top: -136px !important;
  }
  .audience-staff .auth-panel__inner .login-school-mark img {
    width: 78px !important;
    height: 78px !important;
  }
  .audience-developer .auth-panel__inner .login-school-mark img {
    width: 78px !important;
    height: 78px !important;
  }
  .audience-combined .auth-panel__inner .login-school-mark img {
    width: 78px !important;
    height: 78px !important;
  }
}
.role-guardian .figma-quick-actions {
  justify-content: center !important;
}
.role-guardian .figma-quick-actions i {
  margin: 0 auto 6px !important;
}
.role-guardian .figma-quick-actions i .ui-icon {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 2.3 !important;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"] .nav-icon {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  color: #646a66 !important;
  background: none !important;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"] .nav-icon::before {
  width: 25px !important;
  height: 25px !important;
  background-color: currentColor !important;
  -webkit-mask: url("../assets/icon-announcement-user.png") center/contain no-repeat !important;
  mask: url("../assets/icon-announcement-user.png") center/contain no-repeat !important;
}
.role-guardian .sidebar__brand small {
  white-space: nowrap;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"] .nav-icon::before {
  content: none !important;
  display: none !important;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"] .nav-icon svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}
:root {
  --sidebar-collapsed-width: 76px;
}
.app-shell {
  --responsive-sidebar-width: clamp(220px, 21.875vw, var(--sidebar-width));
}
.app-page {
  min-width: 0;
}
.topbar {
  min-width: 0;
}
.topbar__title {
  min-width: 0;
}
.topbar__actions {
  min-width: 0;
}
.main-content {
  min-width: 0;
}
.grid > * {
  min-width: 0;
}
.profile-card__body {
  min-width: 0;
}
.list-item__body {
  min-width: 0;
}
@media (min-width: 901px) {
  .sidebar {
    width: var(--responsive-sidebar-width);
    transition: width .2s ease;
  }
  .app-page {
    margin-left: var(--responsive-sidebar-width);
    transition: margin-left .2s ease;
  }
  .app-shell.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
  }
  .app-shell.sidebar-collapsed .app-page {
    margin-left: var(--sidebar-collapsed-width);
  }
  .app-shell.sidebar-collapsed .sidebar__brand {
    justify-content: center;
    padding-right: 8px;
    padding-left: 8px;
  }
  .app-shell.sidebar-collapsed .sidebar__brand > div:last-child {
    display: none;
  }
  .app-shell.sidebar-collapsed .role-context {
    display: none;
  }
  .app-shell.sidebar-collapsed .guardian-sidebar-status {
    display: none;
  }
  .app-shell.sidebar-collapsed .demo-chip {
    display: none;
  }
  .app-shell.sidebar-collapsed .sidebar-nav__item > span:not(.nav-icon) {
    display: none;
  }
  .app-shell.sidebar-collapsed .sidebar-link__label {
    display: none;
  }
  .app-shell.sidebar-collapsed .sidebar-nav {
    padding-right: 9px;
    padding-left: 9px;
  }
  .app-shell.sidebar-collapsed .sidebar-nav__item {
    justify-content: center;
    gap: 0;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  .app-shell.sidebar-collapsed .sidebar-link {
    justify-content: center;
    gap: 0;
    padding-right: 8px;
    padding-left: 8px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
  }
  .app-shell.sidebar-collapsed .sidebar-link span:first-child {
    font-size: 1rem;
  }
  .app-shell.sidebar-collapsed .sidebar__footer {
    padding-right: 8px;
    padding-left: 8px;
  }
  .app-shell.sidebar-collapsed .sidebar-collapse-button span:first-child {
    transform: rotate(180deg);
  }
}
.user-avatar {
  overflow: hidden;
}
.student-avatar {
  overflow: hidden;
}
.guardian-avatar {
  overflow: hidden;
}
.figma-avatar {
  overflow: hidden;
}
.tpi-student-avatar {
  overflow: hidden;
}
.user-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.student-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guardian-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figma-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpi-student-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-card__body h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.profile-card__body p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.list-item__body h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.list-item__body h4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.list-item__body p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.news-card h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.profile-card__body h3 {
  -webkit-line-clamp: 2;
}
.list-item__body h3 {
  -webkit-line-clamp: 2;
}
.list-item__body h4 {
  -webkit-line-clamp: 2;
}
.news-card h3 {
  -webkit-line-clamp: 2;
}
.profile-card__body p {
  -webkit-line-clamp: 2;
}
.list-item__body p {
  -webkit-line-clamp: 2;
}
.profile-card > .badge {
  flex: 0 0 auto;
  max-width: 42%;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}
.profile-card > .status-badge {
  flex: 0 0 auto;
  max-width: 42%;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}
.profile-card .figma-payment-state {
  flex: 0 0 auto;
  max-width: 42%;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}
.profile-card .payment-state {
  flex: 0 0 auto;
  max-width: 42%;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: center;
}
#modal-close-button {
  display: inline-grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: 1.55rem;
  line-height: 1;
}
#modal-close-button:hover {
  color: var(--danger);
  border-color: #F2CCCC;
  background: #FFF3F3;
}
#modal-close-button:focus-visible {
  color: var(--danger);
  border-color: #F2CCCC;
  background: #FFF3F3;
}
@media (min-width: 641px) and (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .executive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .income-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .qris-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-card {
    align-items: flex-start;
  }
}
@media (max-width: 900px) {
  .app-shell.sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
  }
  .app-shell.sidebar-collapsed .app-page {
    margin-left: 0;
  }
  .app-shell.sidebar-collapsed .sidebar__brand > div:last-child {
    display: revert;
  }
  .app-shell.sidebar-collapsed .role-context {
    display: revert;
  }
  .app-shell.sidebar-collapsed .guardian-sidebar-status {
    display: revert;
  }
  .app-shell.sidebar-collapsed .demo-chip {
    display: revert;
  }
  .app-shell.sidebar-collapsed .sidebar-nav__item > span:not(.nav-icon) {
    display: revert;
  }
  .app-shell.sidebar-collapsed .sidebar-link__label {
    display: revert;
  }
  .app-shell.sidebar-collapsed .sidebar-nav__item {
    justify-content: flex-start;
    gap: 11px;
    font-size: .86rem;
  }
  .app-shell.sidebar-collapsed .sidebar-link {
    justify-content: flex-start;
    gap: 11px;
    font-size: .86rem;
  }
  .sidebar-collapse-button {
    display: none;
  }
}
@media (max-width: 640px) {
  .modal-root {
    place-items: end center;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .modal {
    width: 100%;
    max-height: min(88vh, 850px);
    border-radius: 18px 18px 12px 12px;
  }
  .modal__header {
    gap: 12px;
    padding: 16px 16px 12px;
  }
  .modal__content {
    padding: 16px;
  }
  .profile-card {
    gap: 12px;
  }
  .profile-card .student-avatar--large {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
  .profile-card > .badge {
    max-width: 46%;
    font-size: .62rem;
  }
  .profile-card > .status-badge {
    max-width: 46%;
    font-size: .62rem;
  }
}
:root {
  --background: #F4F8FD;
  --text: #142234;
  --muted: #617187;
  --line: #D7E4F2;
}
a {
  color: var(--primary);
}
.button--primary {
  color: #fff;
}
.button--secondary:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.auth-enter-button {
  border-color: var(--primary);
}
.login-submit {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.sidebar-collapse-button {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.sidebar-link:hover {
  border-color: var(--primary);
}
.button--secondary {
  color: var(--primary-dark);
  border-color: #AFCBE6;
  background: #F3F8FD;
}
.card--soft {
  background: var(--primary-soft);
}
.metric-card.is-soft {
  background: var(--primary-soft);
}
.eyebrow {
  color: var(--primary);
}
.section-kicker {
  color: var(--primary);
}
.card-kicker {
  color: var(--primary);
}
.audience-guardian .auth-screen {
  background: linear-gradient(180deg,rgba(17,112,184,.50),rgba(6,48,96,.82)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat !important;
}
.audience-staff .auth-screen {
  background: linear-gradient(180deg,rgba(17,112,184,.50),rgba(6,48,96,.82)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat !important;
}
.audience-developer .auth-screen {
  background: linear-gradient(180deg,rgba(17,112,184,.50),rgba(6,48,96,.82)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat !important;
}
.audience-combined .auth-screen {
  background: linear-gradient(180deg,rgba(17,112,184,.50),rgba(6,48,96,.82)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat !important;
}
.audience-guardian .school-scene {
  opacity: .22 !important;
  background: linear-gradient(180deg,rgba(44,135,205,.2),rgba(6,48,96,.72)) !important;
}
.audience-staff .school-scene {
  opacity: .22 !important;
  background: linear-gradient(180deg,rgba(44,135,205,.2),rgba(6,48,96,.72)) !important;
}
.audience-developer .school-scene {
  opacity: .22 !important;
  background: linear-gradient(180deg,rgba(44,135,205,.2),rgba(6,48,96,.72)) !important;
}
.audience-combined .school-scene {
  opacity: .22 !important;
  background: linear-gradient(180deg,rgba(44,135,205,.2),rgba(6,48,96,.72)) !important;
}
.auth-panel::before {
  background: linear-gradient(150deg,rgba(19,108,177,.97),rgba(7,49,98,.98)) !important;
}
.audience-guardian .auth-panel {
  background: linear-gradient(150deg,rgba(19,108,177,.97),rgba(7,49,98,.98)) !important;
}
.audience-staff .auth-panel {
  background: linear-gradient(150deg,rgba(19,108,177,.97),rgba(7,49,98,.98)) !important;
}
.audience-developer .auth-panel {
  background: linear-gradient(150deg,rgba(19,108,177,.97),rgba(7,49,98,.98)) !important;
}
.audience-combined .auth-panel {
  background: linear-gradient(150deg,rgba(19,108,177,.97),rgba(7,49,98,.98)) !important;
}
.login-school-mark {
  border-color: rgba(181,218,249,.38) !important;
}
.auth-panel__inner {
  border-color: rgba(181,218,249,.38) !important;
}
.login-school-mark img {
  filter: none !important;
}
.sidebar__brand img {
  filter: none !important;
}
.topbar-school-brand img {
  filter: none !important;
}
.sidebar-nav__item {
  color: rgba(255,255,255,.9) !important;
}
.sidebar-link {
  color: rgba(255,255,255,.9) !important;
}
.sidebar__brand strong {
  color: rgba(255,255,255,.9) !important;
}
.sidebar__brand small {
  color: rgba(255,255,255,.9) !important;
}
.role-context strong {
  color: rgba(255,255,255,.9) !important;
}
.role-context small {
  color: rgba(255,255,255,.9) !important;
}
.sidebar-nav__item:hover {
  color: #fff !important;
}
.sidebar-nav__item.is-active {
  color: #fff !important;
}
.sidebar-link:hover {
  color: #fff !important;
  background: rgba(101,179,236,.22) !important;
}
.topbar {
  border-bottom-color: #D5E5F3;
}
.topbar-school-brand span {
  color: #fff;
}
.notification-button {
  color: #fff !important;
}
.sidebar-toggle {
  color: #fff !important;
}
.role-guardian .figma-guardian-home {
  background: transparent !important;
}
.role-guardian .tpi-guardian-home {
  background: transparent !important;
}
.role-guardian .figma-profile-card {
  border-color: rgba(211,231,248,.9);
  box-shadow: 0 18px 42px rgba(5,43,84,.22);
}
.role-guardian .figma-profile-card > p {
  color: var(--primary-dark);
}
.role-guardian .figma-child-name strong {
  color: var(--primary-dark);
}
.role-guardian .figma-child-name small {
  color: var(--primary-dark);
}
.role-guardian .figma-student-card-icon {
  background: linear-gradient(145deg,#2C8FD2,#0B4F91) !important;
}
.figma-avatar--initials {
  border-color: #2F91D5 !important;
  background: linear-gradient(180deg,#55ACE7,#145AA5) !important;
}
.figma-receipt-card > span {
  color: var(--primary) !important;
}
.role-guardian .sidebar-nav__item[data-route="guardian-news"].is-active .nav-icon {
  color: #9BD8FF !important;
}
.role-guardian .sidebar__brand strong {
  color: #fff !important;
}
.role-guardian .sidebar__brand small {
  color: #fff !important;
}
.role-guardian .sidebar-nav__item {
  color: rgba(255,255,255,.9) !important;
}
.role-guardian .sidebar__footer .sidebar-link {
  color: rgba(255,255,255,.9) !important;
}
.role-guardian .sidebar-nav__item.is-active {
  color: #fff !important;
  box-shadow: inset 4px 0 #8DD2FF !important;
}
.figma-quick-section {
  padding: 12px 16px 26px;
  color: #fff;
}
.figma-quick-section > h2 {
  margin: 0 0 7px;
  text-align: center;
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.role-guardian .figma-quick-actions {
  grid-template-columns: repeat(3,minmax(78px,106px)) !important;
  gap: 20px clamp(17px,7vw,36px) !important;
  padding: 8px 10px 0 !important;
}
.role-guardian .figma-quick-actions button {
  min-width: 0;
  color: #fff;
}
.role-guardian .figma-quick-actions i {
  width: 52px !important;
  height: 52px !important;
  border: 3px solid rgba(255,255,255,.64) !important;
  border-radius: 14px !important;
  background: rgba(21,101,164,.28) !important;
  box-shadow: 0 8px 18px rgba(4,35,69,.18) !important;
}
.role-guardian .figma-quick-actions i .ui-icon {
  stroke: #fff !important;
}
.role-guardian .figma-quick-actions span {
  color: #fff !important;
  font-size: .68rem;
  line-height: 1.2;
  white-space: normal;
}
.figma-promo-section {
  padding: 22px 18px;
  background: #F4F8FD;
}
.figma-promo-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.figma-promo-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  color: #fff;
  border: 1px solid rgba(183,214,241,.4);
  border-radius: 22px;
  box-shadow: 0 13px 28px rgba(11,61,116,.16);
}
.figma-promo-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 160px;
  height: 160px;
  border: 25px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.figma-promo-card--social {
  background: linear-gradient(120deg,rgba(5,36,73,.93),rgba(18,101,169,.78)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat;
}
.figma-promo-card--payment {
  background: radial-gradient(circle at 80% 10%,rgba(255,255,255,.13) 0 2px,transparent 3px) 0 0/18px 18px,
    linear-gradient(135deg,#1769AA,#0B3D74);
}
.figma-promo-kicker {
  position: relative;
  z-index: 1;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.figma-promo-card h2 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin: 9px 0 8px;
  color: #fff;
  font-size: clamp(1.22rem,3.8vw,1.8rem);
  line-height: 1.08;
}
.figma-promo-card p {
  position: relative;
  z-index: 1;
  max-width: 50ch;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: .78rem;
  line-height: 1.5;
}
.figma-social-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.figma-social-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  background: rgba(4,33,65,.25);
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
}
.figma-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  background: rgba(4,33,65,.25);
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
}
.figma-social-buttons .ui-icon {
  width: 16px;
  height: 16px;
}
.figma-promo-cta {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 20px;
}
.figma-home-summary {
  margin: 0 !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  background: #F4F8FD !important;
}
.figma-home-summary .figma-home-content {
  padding-top: 12px;
}
.bar-fill {
  background-color: var(--primary) !important;
}
.mini-column span {
  background-color: var(--primary) !important;
}
.progress__bar {
  background-color: var(--primary) !important;
}
.income-hero {
  background-color: var(--primary) !important;
}
.metric-card.is-info {
  background-color: var(--primary) !important;
}
.legend.paid {
  background: var(--primary) !important;
}
.class-arrears-card:hover {
  border-color: #7FB4DF;
  box-shadow: 0 14px 28px rgba(11,61,116,.12);
}
.class-arrears-card i {
  color: var(--primary-dark);
}
.arrears-grand-total strong {
  color: var(--primary-dark);
}
.social-config-card textarea {
  min-height: 82px;
}
.figma-status.is-paid {
  color: #0D6B3D !important;
  background: #DDF5E8 !important;
}
.figma-payment-state.is-paid {
  color: #0D6B3D !important;
  background: #DDF5E8 !important;
}
.status-badge.is-paid {
  color: #0D6B3D !important;
  background: #DDF5E8 !important;
}
.figma-status.is-unpaid {
  color: #A92121 !important;
  background: #FFE3E3 !important;
}
.figma-payment-state.is-unpaid {
  color: #A92121 !important;
  background: #FFE3E3 !important;
}
.figma-status.is-pending {
  color: #8A5700 !important;
  background: #FFF0C9 !important;
}
@media (max-width: 640px) {
  .role-guardian .app-page {
    background: linear-gradient(180deg,rgba(32,129,200,.70) 0,rgba(7,62,119,.91) 780px,#F4F8FD 780px),
      url("../assets/school-background-secondary.jpg") center top/auto 780px no-repeat,
      #F4F8FD !important;
  }
  .role-guardian .figma-quick-actions {
    gap: 14px 9px !important;
  }
  .figma-promo-grid {
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    padding: 3px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .figma-promo-card {
    min-height: 205px;
    padding: 19px;
    scroll-snap-align: center;
  }
  .figma-promo-cta {
    left: 19px;
    bottom: 18px;
  }
}
.topbar {
  background-color: #1769aa !important;
}
.role-guardian .figma-quick-section {
  background-color: #1769aa !important;
}
.figma-home-total {
  color: #15324d !important;
  background: linear-gradient(135deg,#eaf4ff,#cfe5f8) !important;
}
.guardian-link-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.guardian-link-grid section {
  min-width: 0;
}
.guardian-link-grid .modal-choice-list {
  max-height: 260px;
  overflow: auto;
}
.metric-card__value {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.income-hero strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-arrears-card summary > b {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .guardian-link-grid {
    grid-template-columns: minmax(0,1fr);
  }
}
:root {
  --pro-radius-sm: 10px;
  --pro-radius: 16px;
  --pro-radius-lg: 22px;
}
.card {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.metric-card {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.figma-settings-card {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.figma-form-card {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.figma-page-list > article {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.modal {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow);
}
.button {
  min-height: 42px;
  border-radius: var(--pro-radius-sm) !important;
  font-weight: 750;
}
.button:focus-visible {
  outline: 3px solid rgba(66, 153, 225, .34) !important;
  outline-offset: 2px;
}
button:focus-visible {
  outline: 3px solid rgba(66, 153, 225, .34) !important;
  outline-offset: 2px;
}
input:focus-visible {
  outline: 3px solid rgba(66, 153, 225, .34) !important;
  outline-offset: 2px;
}
select:focus-visible {
  outline: 3px solid rgba(66, 153, 225, .34) !important;
  outline-offset: 2px;
}
textarea:focus-visible {
  outline: 3px solid rgba(66, 153, 225, .34) !important;
  outline-offset: 2px;
}
.field input {
  min-height: 46px;
  border-color: var(--pro-border);
  border-radius: var(--pro-radius-sm);
}
.field select {
  min-height: 46px;
  border-color: var(--pro-border);
  border-radius: var(--pro-radius-sm);
}
.field textarea {
  min-height: 46px;
  border-color: var(--pro-border);
  border-radius: var(--pro-radius-sm);
}
.table-wrap {
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow);
}
.table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef5fb;
}
.table-wrap tbody tr:hover {
  background: #f6faff;
}
.user-button__text small {
  color: rgba(255,255,255,.82) !important;
}
.global-search-button {
  color: #fff !important;
}
.professional-task-center {
  margin-top: 22px;
}
.professional-task-center > .section-heading {
  align-items: center;
}
.system-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: #165d45;
  background: #e7f7ef;
  border: 1px solid #bce7d2;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 750;
}
.system-health-pill i {
  width: 8px;
  height: 8px;
  background: #21a66f;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(33,166,111,.12);
}
.professional-task-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}
.professional-task-grid button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 18px;
  text-align: left;
  color: #16324b;
  background: #fff;
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow);
  cursor: pointer;
}
.professional-task-grid button:hover {
  transform: translateY(-2px);
  border-color: #8bbce1;
  box-shadow: var(--pro-shadow-hover);
}
.professional-task-grid span {
  font-weight: 750;
}
.professional-task-grid strong {
  grid-row: span 2;
  font-size: 1.8rem;
}
.professional-task-grid small {
  color: #60778c;
}
.empty-state {
  border-style: dashed !important;
  background: linear-gradient(145deg,#fff,#f4f8fc) !important;
}
.figma-empty {
  border-style: dashed !important;
  background: linear-gradient(145deg,#fff,#f4f8fc) !important;
}
.figma-home-empty {
  border-style: dashed !important;
  background: linear-gradient(145deg,#fff,#f4f8fc) !important;
}
@media (max-width: 760px) {
  .global-search-button {
    display: none;
  }
  .professional-task-grid {
    grid-template-columns: 1fr;
  }
  .professional-task-center {
    padding-inline: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  *::before {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.role-guardian .figma-quick-section {
  margin-top: 0 !important;
}
.role-guardian .role-context {
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.24) !important;
}
.role-guardian .role-context strong {
  color: #fff !important;
  opacity: 1 !important;
}
.role-guardian .role-context small {
  color: #fff !important;
  opacity: 1 !important;
}
.role-guardian .sidebar-nav__item .nav-icon {
  color: #fff !important;
  stroke: currentColor !important;
  filter: none !important;
  opacity: 1 !important;
}
.role-guardian .sidebar-nav__item .ui-icon {
  color: #fff !important;
  stroke: currentColor !important;
  filter: none !important;
  opacity: 1 !important;
}
.figma-profile-card {
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}
.figma-student-card-icon {
  display: none !important;
}
.topbar .user-button__text small {
  color: rgba(255,255,255,.88) !important;
  font-weight: 650;
}
.notification-feed {
  gap: 12px;
}
.notification-feed__item {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 38px;
  gap: 12px;
  align-items: start;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow);
}
.notification-feed__item.is-unread {
  border-left: 4px solid #2388cb;
}
.notification-feed__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.notification-feed__icon .ui-icon {
  width: 22px;
  height: 22px;
}
.notification-feed__item p {
  margin: 5px 0;
  color: #526a7f;
}
.notification-delete {
  color: #a92121 !important;
  background: #fff0f0 !important;
}
.follow-up-panel {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow);
}
.follow-up-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}
.follow-up-grid button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 17px;
  text-align: left;
  color: #17344d;
  background: #f6faff;
  border: 1px solid #d5e6f4;
  border-radius: 14px;
  cursor: pointer;
}
.follow-up-grid strong {
  font-size: 1.7rem;
}
.follow-up-grid small {
  color: #668095;
}
.compact-list--actions > span {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.compact-list--actions > span > span {
  min-width: 0;
}
.category-manager .is-inactive {
  display: none !important;
}
@media (max-width: 760px) {
  .follow-up-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 430px) {
  .follow-up-grid {
    grid-template-columns: 1fr;
  }
}
:root {
  --primary: #0f8a4b;
  --primary-dark: #075d35;
  --primary-soft: #eaf7ef;
  --brand-blue: #0f8a4b;
  --pro-border: #d6e6dc;
  --pro-shadow: 0 10px 30px rgba(6, 70, 39, .08);
  --pro-shadow-hover: 0 16px 38px rgba(6, 70, 39, .14);
}
.topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-guardian .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-staff .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-developer .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-headmaster .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-treasurer .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.role-tu .topbar {
  color: #fff !important;
  background: linear-gradient(120deg, #118a4d, #075d35) !important;
}
.sidebar {
  color: #fff !important;
  background: linear-gradient(180deg, #0d7542 0%, #075d35 58%, #043b24 100%) !important;
}
.app-sidebar {
  color: #fff !important;
  background: linear-gradient(180deg, #0d7542 0%, #075d35 58%, #043b24 100%) !important;
}
.role-guardian .sidebar {
  color: #fff !important;
  background: linear-gradient(180deg, #0d7542 0%, #075d35 58%, #043b24 100%) !important;
}
.sidebar-nav__item.is-active {
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 4px 0 #9de6b8;
}
.sidebar-nav__item:hover {
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: inset 4px 0 #9de6b8;
}
.role-guardian .sidebar-nav__item.is-active {
  background: rgba(255, 255, 255, .14) !important;
}
.button--primary {
  border-color: #0f8a4b !important;
  background: linear-gradient(135deg, #16a05b, #08703e) !important;
}
.figma-primary-button {
  border-color: #0f8a4b !important;
  background: linear-gradient(135deg, #16a05b, #08703e) !important;
}
.role-guardian .app-page {
  background: linear-gradient(180deg, #0f8a4b 0, #0f8a4b 850px, #f3f8f5 850px) !important;
}
.role-guardian .figma-quick-section {
  background: linear-gradient(180deg, rgba(14, 132, 73, .90), rgba(6, 79, 43, .97)),
    url("../assets/school-background-secondary.jpg") center/cover no-repeat !important;
}
.auth-panel__inner .button--primary {
  border-color: rgba(205, 244, 220, .72) !important;
  background: linear-gradient(135deg, rgba(22, 160, 91, .94), rgba(6, 95, 53, .96)) !important;
  box-shadow: 0 10px 24px rgba(2, 48, 26, .28) !important;
}
.audience-guardian .auth-panel__inner .field input {
  border-color: rgba(211, 246, 224, .50) !important;
  background: rgba(60, 167, 105, .42) !important;
}
.audience-staff .auth-panel__inner .field input {
  border-color: rgba(211, 246, 224, .50) !important;
  background: rgba(60, 167, 105, .42) !important;
}
.audience-developer .auth-panel__inner .field input {
  border-color: rgba(211, 246, 224, .50) !important;
  background: rgba(60, 167, 105, .42) !important;
}
.audience-combined .auth-panel__inner .field input {
  border-color: rgba(211, 246, 224, .50) !important;
  background: rgba(60, 167, 105, .42) !important;
}
.figma-home-bill .figma-bill-card {
  background: linear-gradient(125deg, #08703f, #16a05b 62%, #70d096) !important;
}
.chart-card .bar-row__fill {
  background: linear-gradient(180deg, #59ca85, #0f8a4b) !important;
}
.mini-column span {
  background: linear-gradient(180deg, #59ca85, #0f8a4b) !important;
}
.bar-row__fill {
  background: linear-gradient(180deg, #59ca85, #0f8a4b) !important;
}
.donut {
  background: conic-gradient(#0f8a4b var(--donut-value), #d9ebe0 0) !important;
}
.professional-task-grid strong {
  color: #0f8a4b !important;
}
.notification-feed__icon {
  color: #0f8a4b !important;
}
.follow-up-grid strong {
  color: #0f8a4b !important;
}
.notification-feed__icon {
  background: #e7f6ed !important;
}
.notification-feed__item.is-unread {
  border-left-color: #0f8a4b !important;
  background: #f3fbf6 !important;
}
@media (max-width: 760px) {
  .role-guardian .app-page {
    background: linear-gradient(180deg, #0f8a4b 0, #0f8a4b 820px, #f3f8f5 820px) !important;
  }
}
.fee-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.fee-summary-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d6e3ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(21, 55, 86, .07);
}
.fee-summary-card small {
  display: block;
  color: #617184;
}
.fee-summary-card span {
  display: block;
  color: #617184;
}
.fee-summary-card strong {
  display: block;
  margin: 8px 0 4px;
  overflow: hidden;
  color: #122238;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fee-settings-hero {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #124b83, #2387ce);
  box-shadow: 0 18px 42px rgba(14, 78, 132, .2);
}
.fee-settings-hero h2 {
  margin: 0;
  color: inherit;
}
.fee-settings-hero p {
  margin: 0;
}
.fee-settings-page {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.fee-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.fee-settings-form {
  min-width: 0;
  max-width: 100%;
}
.fee-preview {
  min-width: 0;
  max-width: 100%;
}
.reconciliation-panel {
  min-width: 0;
  max-width: 100%;
}
.fee-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.fee-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #23364b;
  font-weight: 750;
}
.fee-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #b9cbd9;
  border-radius: 11px;
  background: #fff;
  color: #14263a;
}
.fee-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #b9cbd9;
  border-radius: 11px;
  background: #fff;
  color: #14263a;
}
.inline-reconcile input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #b9cbd9;
  border-radius: 11px;
  background: #fff;
  color: #14263a;
}
.fee-field small {
  color: #66798b;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.45;
}
.fee-preview .note {
  color: #66798b;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.45;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #31516f;
  font-weight: 800;
}
.switch-row input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #2179b8;
}
.protected-principal {
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid #b8decf;
  border-radius: 13px;
  color: #13583f;
  background: #edf9f4;
}
.fee-public-note {
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid #b8decf;
  border-radius: 13px;
  color: #13583f;
  background: #edf9f4;
}
.protected-principal p {
  line-height: 1.5;
}
.fee-public-note {
  line-height: 1.5;
}
.protected-principal p {
  margin: 4px 0 0;
}
.receipt-breakdown {
  margin: 14px 0;
}
.receipt-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #e2eaf0;
}
.allocation-strip > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e2eaf0;
}
.receipt-breakdown .total {
  margin-top: 5px;
  border-top: 2px solid #277eb8;
  font-size: 1.08rem;
}
.inline-reconcile {
  display: flex;
  min-width: 220px;
  gap: 7px;
}
.reconciliation-panel td small {
  display: block;
  margin-top: 4px;
  color: #6c7b88;
}
.allocation-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.allocation-strip > div {
  flex-direction: column;
  padding: 14px;
  border: 1px solid #d3e2ed;
  border-radius: 14px;
  background: #f7fbfe;
}
.allocation-strip span {
  color: #657789;
}
.allocation-strip strong {
  overflow: hidden;
  color: #12314d;
  text-overflow: ellipsis;
}
.fee-settings-hero p {
  max-width: 760px;
  margin-top: 8px;
  color: rgba(255, 255, 255, .86);
}
.fee-preview-receipt {
  padding: 18px;
  border: 1px dashed #9fb7ca;
  border-radius: 16px;
  background: #f7fbfe;
}
.fee-preview-receipt > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}
.receipt-allocation > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}
.fee-preview-receipt .is-total {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid #cddae5;
  font-weight: 800;
}
.receipt-allocation .is-total {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid #cddae5;
  font-weight: 800;
}
.fee-preview-receipt .is-internal {
  color: #526b7e;
  font-size: .86rem;
}
.fee-reconcile-table input {
  width: 132px;
  min-width: 0;
}
.fee-reconcile-table form {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1050px) {
  .fee-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fee-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .allocation-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .fee-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fee-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .allocation-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .fee-reconcile-table form {
    align-items: stretch;
    flex-direction: column;
  }
  .fee-reconcile-table input {
    width: 100%;
  }
  .inline-reconcile {
    min-width: 180px;
    flex-direction: column;
  }
}
html {
  --primary: #137a4b;
  --primary-dark: #074a31;
  --primary-soft: #e9f6ef;
  --background: #f4f8f6;
  --surface: #ffffff;
  --text: #15251d;
  --text-muted: #607268;
  --line: #cfe1d7;
  --shadow: 0 14px 34px rgba(6, 73, 47, .10);
  --focus-ring: 0 0 0 3px rgba(19, 122, 75, .20);
}
html body {
  color: var(--text);
  background: var(--background);
}
html .app-page {
  color: var(--text);
  background: var(--background);
}
html .main-content {
  color: var(--text);
  background: var(--background);
}
html .topbar {
  color: #fff;
  background: linear-gradient(120deg, #075238, #137a4b 58%, #299264) !important;
  box-shadow: 0 8px 25px rgba(5, 67, 43, .18);
}
html .topbar * {
  color: #fff !important;
}
html .topbar__title p {
  color: #fff !important;
}
html .topbar .user-button span {
  color: #fff !important;
}
html .sidebar {
  color: #fff;
  background: linear-gradient(180deg, #0b5f40 0%, #07472f 100%) !important;
}
html .role-guardian .sidebar {
  color: #fff;
  background: linear-gradient(180deg, #0b5f40 0%, #07472f 100%) !important;
}
html .sidebar__brand {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar__brand strong {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar__brand small {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar .role-context {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar .role-context strong {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar .role-context small {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar-nav__item {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar-link {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar-nav__item .nav-icon {
  color: rgba(255, 255, 255, .94) !important;
}
html .sidebar .role-context {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .14) !important;
}
html .sidebar-nav__item.is-active {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .14) !important;
}
html .sidebar-nav__item.is-active {
  box-shadow: inset 4px 0 0 #9ae4bd;
}
html .button--primary {
  color: #fff;
  border-color: #137a4b;
  background: linear-gradient(135deg, #137a4b, #0b6541);
}
html button[type="submit"]:not(.button--danger):not(.button--warning) {
  color: #fff;
  border-color: #137a4b;
  background: linear-gradient(135deg, #137a4b, #0b6541);
}
html .button--primary:hover {
  border-color: #075238;
  background: linear-gradient(135deg, #0f6c44, #074a31);
}
html input:focus {
  outline: 0;
  border-color: #137a4b;
  box-shadow: var(--focus-ring);
}
html select:focus {
  outline: 0;
  border-color: #137a4b;
  box-shadow: var(--focus-ring);
}
html textarea:focus {
  outline: 0;
  border-color: #137a4b;
  box-shadow: var(--focus-ring);
}
html button:focus-visible {
  outline: 0;
  border-color: #137a4b;
  box-shadow: var(--focus-ring);
}
html a:focus-visible {
  outline: 0;
  border-color: #137a4b;
  box-shadow: var(--focus-ring);
}
html .metric-card--soft {
  background: #edf8f2;
}
html .soft-card {
  background: #edf8f2;
}
html .fee-preview-card {
  background: #edf8f2;
}
html .income-hero {
  background: linear-gradient(135deg, #075238, #137a4b 55%, #58b782) !important;
}
html .head-income-hero {
  background: linear-gradient(135deg, #075238, #137a4b 55%, #58b782) !important;
}
html .bar-row__fill {
  background: linear-gradient(180deg, #4fba7e, #137a4b) !important;
}
html .mini-column__bar {
  background: linear-gradient(180deg, #4fba7e, #137a4b) !important;
}
html .chart-bar {
  background: linear-gradient(180deg, #4fba7e, #137a4b) !important;
}
html .progress__value {
  background: linear-gradient(180deg, #4fba7e, #137a4b) !important;
}
html .donut-chart {
  --chart-primary: #137a4b;
}
html .donut {
  --chart-primary: #137a4b;
}
html .auth-login-panel {
  background: linear-gradient(155deg, rgba(13, 116, 70, .98), rgba(4, 65, 42, .98)) !important;
}
html .auth-panel {
  background: linear-gradient(155deg, rgba(13, 116, 70, .98), rgba(4, 65, 42, .98)) !important;
}
html .login-sheet {
  background: linear-gradient(155deg, rgba(13, 116, 70, .98), rgba(4, 65, 42, .98)) !important;
}
html .role-guardian .topbar {
  background: #0d6e47 !important;
  box-shadow: none;
}
html .role-guardian .figma-guardian-home {
  background: linear-gradient(180deg, rgba(13, 110, 71, .96), rgba(7, 75, 49, .98)),
    url("../assets/foto-sekolah-ilustrasi.jpg") center top/cover no-repeat !important;
}
html .figma-profile-card {
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow: 0 16px 34px rgba(4, 54, 36, .20);
}
html .figma-student-card-icon {
  display: none !important;
}
html .figma-quick-section {
  background: transparent !important;
}
html .figma-quick-actions i {
  color: #fff !important;
  border: 3px solid rgba(255, 255, 255, .64) !important;
  background: rgba(255, 255, 255, .08) !important;
}
html .figma-quick-actions span {
  color: #fff !important;
}
html .figma-quick-section h2 {
  color: #fff !important;
}
html .figma-promo-card {
  background-image: linear-gradient(135deg, rgba(7, 74, 49, .94), rgba(19, 122, 75, .89)),
    url("../assets/foto-sekolah-ilustrasi.jpg") !important;
}
html .figma-promo-card--payment {
  background-image: linear-gradient(135deg, #075238, #1d8b5b) !important;
}
html .figma-bill-card:not(.is-warning) {
  background: linear-gradient(135deg, #168757, #43b878) !important;
}
html .guardian-bill-card:not(.is-warning) {
  background: linear-gradient(135deg, #168757, #43b878) !important;
}
html .role-guardian:not(.guardian-subpage) .app-page {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
html .role-guardian:not(.guardian-subpage) .main-content {
  height: calc(100dvh - 112px);
  min-height: 0;
  overflow: hidden;
}
html .role-guardian:not(.guardian-subpage) .figma-guardian-home {
  display: grid;
  grid-template-rows: auto auto minmax(128px, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html .role-guardian:not(.guardian-subpage) .figma-profile-card {
  padding-top: 10px;
  padding-bottom: 10px;
}
html .role-guardian:not(.guardian-subpage) .figma-quick-section {
  padding-top: 8px;
  padding-bottom: 12px;
}
html .role-guardian:not(.guardian-subpage) .figma-quick-actions {
  gap: 9px 12px !important;
  padding-top: 2px !important;
}
html .role-guardian:not(.guardian-subpage) .figma-quick-actions i {
  width: 44px !important;
  height: 44px !important;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-section {
  min-height: 0;
  padding: 10px 14px;
  overflow: hidden;
  background: #f2f8f4;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(78%, 1fr);
  grid-template-columns: none;
  height: 100%;
  min-height: 0;
  gap: 10px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-grid::-webkit-scrollbar {
  display: none;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-card {
  min-height: 0;
  height: 100%;
  padding: 14px 16px;
  border-radius: 17px;
  scroll-snap-align: center;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-card h2 {
  margin: 5px 0;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
}
html .role-guardian:not(.guardian-subpage) .figma-promo-card p {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  font-size: .72rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html .role-guardian:not(.guardian-subpage) .figma-social-buttons {
  gap: 6px;
}
html .role-guardian:not(.guardian-subpage) .figma-social-buttons button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: .65rem;
}
html .role-guardian:not(.guardian-subpage) .figma-promo-cta {
  min-height: 30px;
  padding: 5px 10px;
  font-size: .65rem;
}
html .figma-home-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px 12px;
  background: #f2f8f4;
}
html .figma-overview-item {
  display: flex;
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #163c2d;
  text-align: left;
  border: 1px solid #cfe3d7;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(6, 66, 41, .08);
}
html .figma-overview-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .figma-overview-item strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .figma-overview-item span {
  color: #638074;
  font-size: .62rem;
}
html .figma-overview-item strong {
  margin-top: 3px;
  color: #0b6c43;
  font-size: .72rem;
}
html .figma-live-qr {
  display: block;
  width: min(280px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 16px auto;
  padding: 8px;
  border: 1px solid #cfe3d7;
  border-radius: 12px;
  background: #fff;
  image-rendering: pixelated;
}
html .figma-payment-verification {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #b9dec9;
  border-radius: 12px;
  color: #0b5f40;
  background: #eef9f3;
  font-size: .78rem;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 760px) {
  html .role-guardian .sidebar {
    background: linear-gradient(180deg, #0b5f40, #063e2a) !important;
  }
}
@media (max-width: 430px), (max-height: 760px) {
  html .role-guardian:not(.guardian-subpage) .main-content {
    height: calc(100dvh - 112px);
  }
  html .role-guardian:not(.guardian-subpage) .figma-guardian-home {
    grid-template-rows: auto auto minmax(110px, 1fr) auto;
  }
  html .role-guardian:not(.guardian-subpage) .figma-profile-card {
    margin-right: 14px;
    margin-left: 14px;
    padding: 8px 12px;
  }
  html .role-guardian:not(.guardian-subpage) .figma-profile-card > p {
    margin-bottom: 4px;
    padding-bottom: 4px;
  }
  html .role-guardian:not(.guardian-subpage) .figma-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
  html .role-guardian:not(.guardian-subpage) .figma-child-name strong {
    font-size: .9rem;
  }
  html .role-guardian:not(.guardian-subpage) .figma-quick-section > h2 {
    margin-bottom: 2px;
    font-size: .7rem;
  }
  html .role-guardian:not(.guardian-subpage) .figma-quick-actions {
    gap: 5px 8px !important;
  }
  html .role-guardian:not(.guardian-subpage) .figma-quick-actions i {
    width: 38px !important;
    height: 38px !important;
    border-width: 2px !important;
  }
  html .role-guardian:not(.guardian-subpage) .figma-quick-actions span {
    font-size: .58rem;
  }
  html .figma-home-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px 10px 9px;
  }
  html .figma-overview-action {
    display: none;
  }
}
@media (max-height: 700px) {
  html .role-guardian:not(.guardian-subpage) .figma-guardian-home {
    grid-template-rows: auto auto minmax(82px, 1fr);
  }
  html .role-guardian:not(.guardian-subpage) .figma-promo-section {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  html .role-guardian:not(.guardian-subpage) .figma-promo-card {
    padding: 9px 12px;
  }
  html .role-guardian:not(.guardian-subpage) .figma-promo-card p {
    display: none;
  }
  html .role-guardian:not(.guardian-subpage) .figma-social-buttons {
    display: none;
  }
  html .role-guardian:not(.guardian-subpage) .figma-home-overview {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html *::before {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
.student-photo-manager {
  margin-top: 20px;
  border-top: 4px solid var(--primary, #137a4b);
}
.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.photo-upload-form {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d6e3dc;
  border-radius: 16px;
  background: #f8fbf9;
}
.photo-upload-form h4 {
  margin: 0;
}
.photo-upload-result {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
}
.photo-upload-result.is-success {
  border: 1px solid #8ed2ad;
  background: #eaf8f0;
  color: #145c39;
}
.photo-upload-result.is-error {
  border: 1px solid #efaaaa;
  background: #fff0f0;
  color: #8a1f1f;
}
.photo-upload-result p {
  margin-bottom: 0;
}
.cashflow-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.cashflow-scroll > * {
  min-width: 760px;
}
.finance-year-select {
  width: auto;
  min-width: 120px;
}
.auth-screen.is-login-open .auth-panel__inner {
  animation: webapp-v1-login-rise .36s cubic-bezier(.2, .8, .2, 1) both;
}
.auth-screen.auth-screen--login .auth-panel__inner {
  animation: webapp-v1-login-rise .36s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes webapp-v1-login-rise {
  from {
    opacity: 0;
    transform: translateY(54px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 760px) {
  .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-guardian .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-staff .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-developer .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-headmaster .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-treasurer .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .role-tu .topbar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .photo-upload-grid {
    grid-template-columns: 1fr;
  }
  .student-photo-manager .section-heading {
    align-items: flex-start;
  }
}
@media screen and (min-width: 901px) {
  body:has(#auth-screen:not(.is-hidden)) {
    overflow: hidden !important;
  }
  #auth-screen.auth-screen:not(.is-hidden) {
    position: fixed !important;
    z-index: 100 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: none !important;
    grid-template-columns: none !important;
  }
  #auth-screen .school-scene {
    display: none !important;
    content: none !important;
  }
  #auth-screen #show-login-button {
    position: absolute !important;
    right: auto !important;
    bottom: 7vh !important;
    left: calc(6vw + 38px) !important;
    width: 190px !important;
    margin: 0 !important;
    transition: transform 0.72s cubic-bezier(.22, .75, .18, 1),
      opacity 0.42s ease !important;
  }
  #auth-screen .demo-mode-label {
    display: none !important;
  }
  #auth-screen.login-open #show-login-button {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  #auth-screen.login-open #show-login-button {
    transform: translateX(-120vw) !important;
  }
  #auth-screen .auth-panel {
    position: absolute !important;
    z-index: 30 !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    display: block !important;
    width: min(560px, calc(100% - 48px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100% - 24px) !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    transform: translate(-50%, calc(100% + 50px)) !important;
    transition: transform 0.68s cubic-bezier(.18, .82, .2, 1),
      opacity 0.35s ease,
      visibility 0s linear 0.68s !important;
  }
  #auth-screen .auth-panel::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  #auth-screen.login-open .auth-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
    transition: transform 0.68s cubic-bezier(.18, .82, .2, 1),
      opacity 0.35s ease,
      visibility 0s !important;
  }
  #auth-screen .auth-panel__inner {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 34px 42px 40px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-bottom: 0 !important;
    border-radius: 34px 34px 0 0 !important;
    background: linear-gradient(
        145deg,
        rgba(14, 145, 83, 0.98),
        rgba(5, 91, 52, 0.99)
      ) !important;
    box-shadow: 0 -18px 55px rgba(0, 31, 20, 0.38) !important;
    animation: none !important;
  }
}
@media screen and (min-width: 901px) {
  .cashflow-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
    overflow: visible !important;
    cursor: default;
    user-select: auto;
    scrollbar-width: none !important;
    scroll-snap-type: none !important;
  }
  .cashflow-scroll.is-dragging {
    cursor: default;
  }
  .cashflow-scroll > .mini-column-chart,
  .mini-column-chart {
    display: grid !important;
    width: 100% !important;
    min-width: 100% !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: auto !important;
    gap: 8px !important;
    align-items: end !important;
    justify-content: stretch !important;
    min-height: 340px !important;
    padding: 18px 0 0 !important;
    margin: 0 !important;
  }
  .mini-column {
    display: grid !important;
    grid-template-rows: 240px 26px 22px !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    text-align: center !important;
    scroll-snap-align: none;
  }
  .mini-column > span {
    align-self: end !important;
    width: 54px !important;
    max-width: 54px !important;
    min-height: 4px !important;
    margin: 0 auto !important;
    border-radius: 12px 12px 4px 4px !important;
  }
  .mini-column small {
    display: block !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 24px !important;
    white-space: nowrap !important;
  }
  .mini-column b {
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: 10px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
}
.income-hero {
  background: linear-gradient(135deg, #1f3b4d 0%, #245c5a 55%, #5f9b8b 100%) !important;
  color: #ffffff !important;
}
.income-hero .eyebrow {
  color: rgba(255, 255, 255, 0.84) !important;
}
.income-hero span {
  color: rgba(255, 255, 255, 0.84) !important;
}
.income-hero small {
  color: rgba(255, 255, 255, 0.84) !important;
}
.income-hero strong {
  color: #ffffff !important;
}
.income-split b {
  color: #ffffff !important;
}
.income-split span {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
@media screen and (min-width: 901px) {
  .income-split {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  .audience-staff .auth-screen {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #00ad7b !important;
  }
  .audience-staff .auth-panel {
    position: fixed !important;
    z-index: 20 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(102%) !important;
    background: #00ad7b !important;
    transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .35s ease !important;
  }
  .audience-staff .auth-panel::before {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 41.4% !important;
    content: "" !important;
    background: linear-gradient(180deg, rgba(8,13,19,.36), rgba(4,17,18,.08) 42%, rgba(3,20,17,.24)),
      url("../assets/wali-login-mask-group.png") top center/100% auto no-repeat !important;
  }
  .audience-staff .auth-panel::after {
    position: absolute !important;
    z-index: 1 !important;
    top: 34.6783% !important;
    left: 0 !important;
    width: 100% !important;
    height: 65.3217% !important;
    content: "" !important;
    pointer-events: none !important;
    background: url("../assets/wali-login-frame.png") center/100% 100% no-repeat !important;
  }
  .audience-staff .auth-screen.login-open .auth-panel {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .audience-staff .auth-panel__inner {
    position: absolute !important;
    z-index: 4 !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .audience-staff .auth-panel__inner .auth-back {
    display: none !important;
  }
  .audience-staff .auth-panel__inner #login-mode-help {
    display: none !important;
  }
  .audience-staff .auth-panel__inner .field > span:first-child {
    display: none !important;
  }
  .audience-staff .auth-panel__inner #demo-account-list {
    display: none !important;
  }
  .audience-staff .auth-panel__inner .login-school-mark {
    position: absolute !important;
    z-index: 4 !important;
    top: 5.2% !important;
    left: 8.55% !important;
    display: flex !important;
    width: 84% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: center !important;
    gap: 1.6cqw !important;
    color: #fff !important;
    font-size: clamp(10.5px, 3.18cqw, 13.1px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    text-align: left !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.94) !important;
  }
  .audience-staff .auth-panel__inner .login-school-mark img {
    flex: 0 0 auto !important;
    width: 15.6cqw !important;
    height: 15.6cqw !important;
    max-width: 68px !important;
    max-height: 68px !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.88)) drop-shadow(0 2px 6px rgba(0,40,30,.64)) !important;
  }
  .audience-staff .auth-panel__inner .login-school-mark span {
    display: block !important;
    white-space: nowrap !important;
  }
  .audience-staff .auth-panel__inner > h2 {
    position: absolute !important;
    z-index: 4 !important;
    top: 38.08% !important;
    left: 11.15% !important;
    width: 82% !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(27px, 7.95cqw, 33px) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    line-height: 1.08 !important;
    text-align: left !important;
    text-shadow: 0 2px 5px rgba(0,92,68,.26) !important;
    white-space: nowrap !important;
  }
  .audience-staff #login-form {
    position: absolute !important;
    z-index: 4 !important;
    inset: 0 !important;
    display: block !important;
    margin: 0 !important;
  }
  .audience-staff #login-form > .field {
    position: absolute !important;
    left: 8.74% !important;
    display: block !important;
    width: 82.52% !important;
    height: 4.72% !important;
    min-height: 43px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .audience-staff #login-form > .field:first-of-type {
    top: 46.24% !important;
  }
  .audience-staff #login-password-field {
    top: 53.55% !important;
  }
  .audience-staff #login-form > .field::before {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    left: 4.15% !important;
    width: 5.82% !important;
    max-width: 24px !important;
    aspect-ratio: 1 !important;
    content: "" !important;
    transform: translateY(-50%) !important;
    background: url("../assets/wali-login-icon.png") center/contain no-repeat !important;
    filter: drop-shadow(0 1px 1px rgba(0,76,57,.22)) !important;
  }
  .audience-staff #login-password-field::before {
    background-image: url("../assets/wali-password-icon.png") !important;
  }
  .audience-staff #login-form > .field:first-of-type {
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(81,223,187,.82), rgba(63,205,170,.76)) !important;
    box-shadow: 0 5px 12px rgba(0,73,55,.39), inset 0 1px 1px rgba(255,255,255,.30) !important;
    backdrop-filter: blur(15px) saturate(1.18) !important;
  }
  .audience-staff #login-password-field .password-field {
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(81,223,187,.82), rgba(63,205,170,.76)) !important;
    box-shadow: 0 5px 12px rgba(0,73,55,.39), inset 0 1px 1px rgba(255,255,255,.30) !important;
    backdrop-filter: blur(15px) saturate(1.18) !important;
  }
  .audience-staff #login-password-field .password-field {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .audience-staff #login-form > .field > input {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 13.3% 0 12.4% !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    caret-color: #fff !important;
    background: transparent !important;
    font-size: clamp(17px, 5.08cqw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .audience-staff #login-password-field input {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 13.3% 0 12.4% !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    caret-color: #fff !important;
    background: transparent !important;
    font-size: clamp(17px, 5.08cqw, 21px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .audience-staff #login-password-field input {
    padding-right: 14.5% !important;
  }
  .audience-staff #login-form input::placeholder {
    color: rgba(255,255,255,.98) !important;
    opacity: 1 !important;
    letter-spacing: normal !important;
  }
  .audience-staff #login-password-field .password-eye {
    position: absolute !important;
    z-index: 6 !important;
    top: 50% !important;
    right: 3.4% !important;
    display: grid !important;
    width: 8.2% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  .audience-staff #login-password-field .password-eye .ui-icon {
    width: 72% !important;
    height: 72% !important;
    stroke: currentColor !important;
  }
  .audience-staff #forgot-password-button {
    position: absolute !important;
    z-index: 5 !important;
    top: 59.35% !important;
    right: 10.65% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    font-size: clamp(14px, 4.11cqw, 17px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0,75,55,.38) !important;
  }
  .audience-staff #login-error {
    position: absolute !important;
    z-index: 6 !important;
    top: 64.2% !important;
    left: 10% !important;
    width: 80% !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
  }
  .audience-staff #login-form > .button--primary {
    position: absolute !important;
    z-index: 5 !important;
    top: 68.15% !important;
    left: 8.74% !important;
    width: 82.52% !important;
    height: 4.72% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(77,215,179,.79), rgba(55,195,159,.75)) !important;
    box-shadow: 0 5px 12px rgba(0,73,55,.40), inset 0 1px 1px rgba(255,255,255,.30) !important;
    font-size: clamp(17px, 5.06cqw, 21px) !important;
    font-weight: 400 !important;
  }
  .audience-staff .login-security-note {
    position: absolute !important;
    z-index: 5 !important;
    top: 74.1% !important;
    left: 11% !important;
    display: block !important;
    width: 78% !important;
    max-width: none !important;
    margin: 0 !important;
    color: rgba(255,255,255,.96) !important;
    font-size: clamp(9px, 2.55cqw, 11px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
}
:root {
  --zip-green-950: #003c32;
  --zip-green-900: #004d3e;
  --zip-green-800: #006653;
  --zip-green-700: #00876b;
  --zip-green-600: #00a985;
  --zip-mint: #00dfa8;
  --zip-mint-soft: #dff9f1;
  --zip-ink: #10231f;
  --zip-muted: #62736f;
  --zip-line: #d8e5e1;
  --zip-page: #f4f8f7;
  --zip-white: #fff;
  --zip-warning: #f6b94a;
  --zip-danger: #dc4c4c;
  --zip-shadow: 0 18px 48px rgba(0, 77, 62, .12);
  --zip-shadow-soft: 0 8px 24px rgba(0, 77, 62, .08);
  --zip-radius-xl: 28px;
  --zip-radius-lg: 20px;
  --zip-radius-md: 14px;
}
html {
  background: var(--zip-green-950);
}
body {
  color: var(--zip-ink);
  background: var(--zip-page);
}
button {
  font: inherit;
}
input {
  font: inherit;
}
select {
  font: inherit;
}
textarea {
  font: inherit;
}
.auth-screen {
  background: #003c32;
  min-height: 100dvh;
  overflow: hidden;
}
.auth-visual {
  min-height: 100dvh;
  background-image: linear-gradient(180deg, rgba(0,77,62,.42), rgba(0,60,50,.84)),
    url("../assets/school-background-web.jpeg") !important;
  background-size: cover !important;
  background-position: center !important;
}
.auth-visual__pattern {
  opacity: .18 !important;
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px) !important;
  background-size: 25px 25px !important;
}
.school-scene {
  display: none !important;
}
.auth-enter-button {
  min-width: 220px;
  min-height: 54px;
  margin-top: 28px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: linear-gradient(135deg, var(--zip-mint), var(--zip-green-600)) !important;
  color: #003c32 !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 34px rgba(0,223,168,.22) !important;
}
.auth-panel {
  background: rgba(0,45,38,.76) !important;
  backdrop-filter: blur(10px);
}
.auth-panel__inner {
  width: min(440px, calc(100vw - 32px)) !important;
  padding: 34px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: var(--zip-radius-xl) !important;
  background: linear-gradient(155deg, rgba(0,102,83,.96), rgba(0,60,50,.98)) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  color: #fff !important;
}
.auth-panel__inner h2 {
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem !important;
}
.auth-panel__inner p {
  color: rgba(255,255,255,.86) !important;
}
.auth-panel__inner label {
  color: rgba(255,255,255,.86) !important;
}
.auth-back {
  color: rgba(255,255,255,.86) !important;
}
.auth-panel__inner input {
  min-height: 54px !important;
  padding: 0 46px 0 48px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-panel__inner input::placeholder {
  color: rgba(255,255,255,.7) !important;
}
.auth-panel__inner .primary-button {
  min-height: 54px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--zip-mint), var(--zip-green-600)) !important;
  color: #003c32 !important;
  font-weight: 900 !important;
}
.auth-panel__inner .password-toggle {
  color: #fff !important;
}
.app-shell:not(.role-guardian) {
  background: var(--zip-page) !important;
}
.app-shell:not(.role-guardian) .sidebar {
  background: linear-gradient(180deg, var(--zip-green-900), var(--zip-green-950)) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 18px 0 44px rgba(0,77,62,.1);
}
.app-shell:not(.role-guardian) .sidebar__brand {
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.app-shell:not(.role-guardian) .sidebar__brand .school-logo {
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell:not(.role-guardian) .sidebar__brand img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
}
.app-shell:not(.role-guardian) .sidebar__brand strong {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .sidebar__brand span {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .sidebar__role-card {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .sidebar-link {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .sidebar__role-card {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: var(--zip-radius-md) !important;
}
.app-shell:not(.role-guardian) .sidebar-link {
  border-radius: 12px !important;
  margin: 2px 9px !important;
}
.app-shell:not(.role-guardian) .sidebar-link:hover {
  background: rgba(255,255,255,.1) !important;
}
.app-shell:not(.role-guardian) .sidebar-link.is-active {
  background: linear-gradient(90deg, rgba(0,223,168,.28), rgba(255,255,255,.1)) !important;
  box-shadow: inset 4px 0 0 var(--zip-mint);
}
.app-shell:not(.role-guardian) .sidebar-link .ui-icon {
  color: rgba(255,255,255,.9) !important;
}
.app-shell:not(.role-guardian) .sidebar__footer {
  border-top-color: rgba(255,255,255,.12) !important;
}
.app-shell:not(.role-guardian) .sidebar-collapse-button {
  background: rgba(0,223,168,.14) !important;
}
.app-shell:not(.role-guardian) .topbar {
  min-height: 76px !important;
  padding-top: env(safe-area-inset-top) !important;
  background: linear-gradient(105deg, var(--zip-green-900), var(--zip-green-700)) !important;
  box-shadow: 0 10px 30px rgba(0,77,62,.12) !important;
}
.app-shell:not(.role-guardian) .topbar__title strong {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .topbar__title span {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .topbar-school-brand {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .topbar .icon-button {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .topbar__profile strong {
  color: #fff !important;
}
.app-shell:not(.role-guardian) .topbar__profile span {
  color: rgba(255,255,255,.75) !important;
}
.app-shell:not(.role-guardian) .topbar__avatar {
  background: linear-gradient(135deg, var(--zip-mint), var(--zip-green-600)) !important;
  color: #003c32 !important;
}
.app-shell:not(.role-guardian) .app-main {
  background: var(--zip-page) !important;
}
.app-shell:not(.role-guardian) .page-header h1 {
  color: var(--zip-ink) !important;
  letter-spacing: -.025em;
}
.app-shell:not(.role-guardian) .page-header p {
  color: var(--zip-muted) !important;
}
.app-shell:not(.role-guardian) .card {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .panel {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .dashboard-card {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .table-card {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .chart-card {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .form-card {
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zip-line) !important;
  border-radius: var(--zip-radius-lg) !important;
  background: linear-gradient(145deg, #fff, #f0fbf7) !important;
  box-shadow: var(--zip-shadow-soft) !important;
}
.app-shell:not(.role-guardian) .stat-card::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: -30px;
  top: -34px;
  border-radius: 50%;
  background: rgba(0,223,168,.1);
}
.app-shell:not(.role-guardian) .stat-card--warning {
  background: linear-gradient(145deg, #fff, #fff8e7) !important;
}
.app-shell:not(.role-guardian) .primary-button {
  border-color: transparent !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--zip-green-700), var(--zip-green-900)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,77,62,.16) !important;
}
.app-shell:not(.role-guardian) .button--primary {
  border-color: transparent !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--zip-green-700), var(--zip-green-900)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,77,62,.16) !important;
}
.app-shell:not(.role-guardian) .secondary-button {
  border-color: #a8c9c0 !important;
  color: var(--zip-green-900) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.app-shell:not(.role-guardian) .button--secondary {
  border-color: #a8c9c0 !important;
  color: var(--zip-green-900) !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.app-shell:not(.role-guardian) input {
  border-color: #c8dcd7 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.app-shell:not(.role-guardian) select {
  border-color: #c8dcd7 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.app-shell:not(.role-guardian) textarea {
  border-color: #c8dcd7 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.app-shell:not(.role-guardian) input:focus {
  border-color: var(--zip-green-600) !important;
  box-shadow: 0 0 0 3px rgba(0,169,133,.14) !important;
  outline: none;
}
.app-shell:not(.role-guardian) select:focus {
  border-color: var(--zip-green-600) !important;
  box-shadow: 0 0 0 3px rgba(0,169,133,.14) !important;
  outline: none;
}
.app-shell:not(.role-guardian) textarea:focus {
  border-color: var(--zip-green-600) !important;
  box-shadow: 0 0 0 3px rgba(0,169,133,.14) !important;
  outline: none;
}
.app-shell:not(.role-guardian) table {
  border-collapse: separate;
  border-spacing: 0;
}
.app-shell:not(.role-guardian) thead th {
  background: #edf8f5 !important;
  color: var(--zip-green-900) !important;
  border-bottom-color: var(--zip-line) !important;
}
.app-shell:not(.role-guardian) tbody tr:hover td {
  background: #f4fbf9 !important;
}
.app-shell:not(.role-guardian) .badge--success {
  background: var(--zip-mint-soft) !important;
  color: var(--zip-green-900) !important;
}
.app-shell:not(.role-guardian) .status-success {
  background: var(--zip-mint-soft) !important;
  color: var(--zip-green-900) !important;
}
.app-shell:not(.role-guardian) .modal-card {
  border-radius: var(--zip-radius-xl) !important;
  border: 1px solid var(--zip-line) !important;
  box-shadow: var(--zip-shadow) !important;
}
@media (max-width: 1180px) {
  .app-shell:not(.role-guardian) .content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app-shell:not(.role-guardian) .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app-shell:not(.role-guardian) .two-column-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app-shell:not(.role-guardian) .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .app-shell:not(.role-guardian) .card {
    min-width: 0;
  }
  .app-shell:not(.role-guardian) .panel {
    min-width: 0;
  }
  .app-shell:not(.role-guardian) td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-shell:not(.role-guardian) th {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 760px) {
  .auth-screen {
    overflow-y: auto;
  }
  .auth-visual {
    min-height: 100dvh;
    padding: calc(64px + env(safe-area-inset-top)) 22px calc(150px + env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-position: center !important;
  }
  .auth-brand {
    width: 100% !important;
    margin-top: 3vh !important;
    padding: 22px 18px 26px !important;
    text-align: center;
    border: 0 !important;
    border-radius: 24px !important;
    background: rgba(0,60,50,.42) !important;
    box-shadow: none !important;
  }
  .auth-brand h1 {
    font-family: inherit !important;
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }
  .auth-brand .secret-logo-button img {
    width: min(45vw, 190px) !important;
    height: min(45vw, 190px) !important;
  }
  .auth-brand > p {
    font-size: 1.25rem !important;
  }
  .auth-brand > span {
    display: block;
    font-size: .82rem !important;
    letter-spacing: .15em !important;
  }
  .auth-hero-copy {
    display: none !important;
  }
  .auth-enter-button {
    width: 100%;
    margin-top: 32px !important;
    border-radius: 999px !important;
    background: rgba(0,77,62,.78) !important;
    color: #fff !important;
  }
  .auth-screen.login-open .auth-brand {
    transform: translateX(-115%);
    opacity: 0;
    transition: transform .42s ease, opacity .3s ease;
  }
  .auth-panel {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(0,45,38,.35) !important;
  }
  .auth-panel__inner {
    width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    overflow-y: auto;
    padding: 30px 24px calc(28px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 34px 34px 0 0 !important;
    animation: zipPanelUp .42s cubic-bezier(.22,.8,.27,1);
  }
  @keyframes zipPanelUp {
    from {
      transform: translateY(100%);
      opacity: .45;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .app-shell:not(.role-guardian) .topbar {
    min-height: calc(66px + env(safe-area-inset-top)) !important;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px !important;
    position: sticky !important;
    top: 0;
    z-index: 40;
  }
  .app-shell:not(.role-guardian) .topbar__title strong {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-shell:not(.role-guardian) .topbar__profile > div:last-child {
    display: none;
  }
  .app-shell:not(.role-guardian) .topbar__avatar {
    width: 42px !important;
    height: 42px !important;
  }
  .app-shell:not(.role-guardian) .app-main {
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom)) !important;
  }
  .app-shell:not(.role-guardian) .page-header {
    margin-bottom: 18px !important;
  }
  .app-shell:not(.role-guardian) .page-header h1 {
    font-size: 1.55rem !important;
  }
  .app-shell:not(.role-guardian) .sidebar {
    width: min(86vw, 326px) !important;
    padding-top: env(safe-area-inset-top);
  }
  .app-shell:not(.role-guardian) .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .app-shell:not(.role-guardian) .stat-card {
    min-height: 134px;
    padding: 18px !important;
  }
  .app-shell:not(.role-guardian) .stat-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .app-shell:not(.role-guardian) .table-wrap {
    overflow-x: auto;
    border-radius: var(--zip-radius-md);
  }
  .app-shell:not(.role-guardian) table {
    min-width: 680px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen.login-open .auth-brand {
    animation: none !important;
    transition: none !important;
  }
  .auth-panel__inner {
    animation: none !important;
    transition: none !important;
  }
}
.splash-screen--v1 {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  padding: calc(36px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 43%, rgba(0, 223, 168, .74) 0, rgba(0, 223, 168, .18) 22%, transparent 45%),
    linear-gradient(155deg, #003c32 0%, #006653 42%, #00a985 68%, #004d3e 100%);
  transition: opacity .45s ease, visibility .45s ease;
}
.splash-screen--v1::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, transparent 55%, rgba(0, 223, 168, .16) 55% 70%, transparent 70%);
}
.splash-screen--v1.is-leaving {
  opacity: 0;
  visibility: hidden;
}
.splash-screen--v1 .splash-glow {
  display: none;
}
.splash-screen--v1 .school-logo--large {
  position: relative;
  z-index: 1;
  width: clamp(170px, 15vw, 230px);
  height: clamp(170px, 15vw, 230px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 14px 28px rgba(0, 0, 0, .25));
}
.splash-screen--v1 .school-logo--large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.splash-screen--v1 .splash-spinner {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin-top: 38px;
  border: 2px solid rgba(255, 255, 255, .34);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tpiSpin 1s linear infinite;
}
.splash-screen--v1 .splash-signature {
  position: absolute;
  z-index: 1;
  right: auto;
  bottom: clamp(68px, 8vh, 96px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(.82rem, .9vw, 1rem);
  font-weight: 800;
  letter-spacing: .48em;
  white-space: nowrap;
}
@media (min-width: 901px) {
  .auth-welcome-v1 {
    min-height: 100dvh;
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(46px, 6vw, 88px);
    color: #fff;
    text-align: left;
    background-image: linear-gradient(180deg, rgba(0, 77, 62, .42), rgba(0, 60, 50, .84)),
      url("../assets/school-background-web.jpeg");
    background-position: center;
    background-size: cover;
  }
  .auth-welcome-v1 .auth-brand--v1 {
    position: relative;
    z-index: 2;
    display: block;
    width: min(620px, 48vw);
    max-width: 620px;
    margin: 0 0 92px;
    padding: 30px 38px 32px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-left: 4px solid #00dfa8;
    border-radius: 0 24px 24px 0;
    background: linear-gradient(135deg, rgba(0, 60, 50, .8), rgba(0, 77, 62, .42));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.72s cubic-bezier(.22, .75, .18, 1), opacity 0.42s ease;
  }
  .auth-screen.login-open .auth-welcome-v1 .auth-brand--v1 {
    transform: translateX(-120vw);
    opacity: 0;
    pointer-events: none;
  }
  .auth-welcome-v1 .auth-brand--v1 h1 {
    margin: 0 0 24px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.75rem, 4vw, 4.6rem);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -.035em;
  }
  .auth-welcome-v1 .auth-brand--v1 .secret-logo-button {
    position: absolute;
    top: -118px;
    left: 0;
    width: 86px;
    height: 86px;
    padding: 0;
    border: 0;
    background: transparent;
    filter: none;
  }
  .auth-welcome-v1 .auth-brand--v1 .secret-logo-button img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .85)) drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
  }
  .auth-welcome-v1 .auth-brand--v1 > p {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.25rem, 1.7vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
  }
  .auth-welcome-v1 .auth-brand--v1 > span {
    display: block;
    color: rgba(255, 255, 255, .88);
    font-size: .86rem;
    letter-spacing: .2em;
  }
  .auth-welcome-v1 .auth-hero-copy {
    display: grid;
    gap: 8px;
    margin-top: 28px;
  }
  .auth-welcome-v1 .auth-hero-copy strong {
    color: #f6cf57;
    font-size: 1rem;
  }
  .auth-welcome-v1 .auth-hero-copy small {
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-style: normal;
  }
  .auth-welcome-v1 .auth-hero-copy address {
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-style: normal;
  }
  .auth-welcome-v1 #show-login-button {
    position: absolute;
    z-index: 3;
    bottom: 68px;
    left: clamp(46px, 6vw, 88px);
    width: 190px;
    min-height: 52px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 77, 62, .58);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  }
  .auth-welcome-v1 .demo-mode-label {
    display: none;
  }
}
@media (max-width: 900px) {
  .splash-screen--v1 .school-logo--large {
    width: clamp(150px, 42vw, 188px);
    height: clamp(150px, 42vw, 188px);
  }
  .splash-screen--v1 .splash-spinner {
    width: 54px;
    height: 54px;
    margin-top: 30px;
  }
  .splash-screen--v1 .splash-signature {
    bottom: max(54px, calc(env(safe-area-inset-bottom) + 42px));
    font-size: clamp(.72rem, 3.1vw, .9rem);
  }
}

/* Webapp v1.3 — dashboard Kepala Sekolah dan topbar staf */
.app-shell:not(.role-guardian) .global-search-button {
  display: none !important;
}
.head-dashboard-charts {
  align-items: stretch;
}
.head-class-chart {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 420px;
}
.head-class-chart .bar-chart {
  align-content: space-evenly;
  gap: 18px;
  min-height: 310px;
  padding: 8px 0 4px;
}
.head-class-chart .bar-row {
  grid-template-columns: minmax(90px, 128px) 1fr 44px;
  gap: 14px;
  font-size: .86rem;
}
.head-class-chart .bar-row__track {
  height: 18px;
}
.head-donut-summary {
  grid-template-rows: auto 1fr auto;
  min-height: 420px;
}
.head-donut-summary .donut-summary__header {
  text-align: left;
}
.head-donut-summary .donut-summary__chart {
  align-self: center;
}
.head-donut-summary .donut {
  width: 220px;
  height: 220px;
}
.head-donut-summary .donut::after {
  width: 150px;
  height: 150px;
}
.head-donut-summary .donut strong {
  font-size: 2rem;
}
.head-donut-summary .donut-summary__legend h3 {
  margin: 0 0 14px;
}
@media (max-width: 900px) {
  .head-class-chart,
  .head-donut-summary {
    min-height: auto;
  }
  .head-class-chart .bar-chart {
    min-height: auto;
  }
}


/* Webapp v1.4 — tampilan APK/HP dan transisi login */
@media (max-width: 900px) {
  body:has(#auth-screen:not(.is-hidden)) {
    overflow: hidden !important;
  }

  #auth-screen.auth-screen:not(.is-hidden) {
    position: fixed !important;
    z-index: 100 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #003f35 !important;
  }

  #auth-screen .auth-welcome-v1 {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 auto auto 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    background: linear-gradient(180deg, #005e4e 0%, #003f35 100%) !important;
    border-radius: 0 !important;
    transform: translateY(0) !important;
    transform-origin: top center !important;
    transition: height .68s cubic-bezier(.22,.76,.2,1), border-radius .68s cubic-bezier(.22,.76,.2,1), box-shadow .45s ease !important;
  }

  #auth-screen .auth-welcome-v1 .auth-visual__pattern {
    position: absolute !important;
    z-index: 0 !important;
    inset: -4% !important;
    display: block !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(0,45,37,.18) 0%, rgba(0,48,40,.38) 54%, rgba(0,38,32,.86) 100%),
      url("../assets/school-background-web.jpeg") center 48% / cover no-repeat !important;
    transform: translateY(0) scale(1.08) !important;
    transform-origin: center top !important;
    transition: transform .72s cubic-bezier(.22,.76,.2,1), background-position .72s ease, filter .5s ease !important;
  }

  #auth-screen .auth-welcome-v1 .school-scene {
    display: none !important;
  }

  #auth-screen .auth-welcome-v1::after {
    right: 14px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: .62rem !important;
    transition: opacity .25s ease !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 {
    position: absolute !important;
    z-index: 3 !important;
    top: max(58px, calc(env(safe-area-inset-top) + 34px)) !important;
    left: 50% !important;
    display: grid !important;
    width: min(86%, 360px) !important;
    margin: 0 !important;
    padding: 24px 20px 22px !important;
    justify-items: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-align: center !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 24px !important;
    background: linear-gradient(150deg, rgba(0,80,65,.68), rgba(0,49,41,.38)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(7px) !important;
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
    transform-origin: top center !important;
    transition: top .68s cubic-bezier(.22,.76,.2,1), transform .68s cubic-bezier(.22,.76,.2,1), opacity .35s ease, padding .68s ease !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 .secret-logo-button {
    position: static !important;
    order: -2 !important;
    display: grid !important;
    width: 78px !important;
    height: 78px !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    filter: none !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 .secret-logo-button img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 8px 16px rgba(0,0,0,.28)) !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 h1 {
    order: -1 !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(2rem, 9.2vw, 2.65rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 > p {
    margin: 2px 0 0 !important;
    color: #fff !important;
    font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  #auth-screen .auth-welcome-v1 .auth-brand--v1 > span {
    display: block !important;
    color: rgba(255,255,255,.88) !important;
    font-size: clamp(.62rem, 2.8vw, .75rem) !important;
    letter-spacing: .16em !important;
    line-height: 1.4 !important;
  }

  #auth-screen .auth-welcome-v1 .auth-hero-copy {
    display: none !important;
  }

  #auth-screen #show-login-button {
    position: absolute !important;
    z-index: 4 !important;
    right: auto !important;
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 92px)) !important;
    left: 50% !important;
    width: min(190px, 58vw) !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    color: #00513f !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.24) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: transform .5s cubic-bezier(.22,.76,.2,1), opacity .28s ease !important;
  }

  #auth-screen .demo-mode-label {
    position: absolute !important;
    z-index: 4 !important;
    right: auto !important;
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 48px)) !important;
    left: 50% !important;
    width: max-content !important;
    max-width: 88% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    border: 0 !important;
    background: transparent !important;
    font-size: .66rem !important;
    letter-spacing: .08em !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.48) !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: transform .48s cubic-bezier(.22,.76,.2,1), opacity .25s ease !important;
  }

  #auth-screen .auth-panel,
  .audience-staff #auth-screen .auth-panel,
  .audience-guardian #auth-screen .auth-panel,
  .audience-combined #auth-screen .auth-panel,
  .audience-developer #auth-screen .auth-panel {
    position: absolute !important;
    z-index: 8 !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: 72dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: transparent !important;
    transform: translateY(104%) !important;
    transition: transform .68s cubic-bezier(.18,.82,.2,1), opacity .3s ease !important;
  }

  #auth-screen .auth-panel::before,
  #auth-screen .auth-panel::after {
    display: none !important;
    content: none !important;
  }

  #auth-screen .auth-panel__inner,
  .audience-staff #auth-screen .auth-panel__inner,
  .audience-guardian #auth-screen .auth-panel__inner,
  .audience-combined #auth-screen .auth-panel__inner,
  .audience-developer #auth-screen .auth-panel__inner {
    position: absolute !important;
    z-index: 1 !important;
    inset: auto 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: 72dvh !important;
    margin: 0 !important;
    padding: 26px 22px calc(26px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-bottom: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    background: linear-gradient(155deg, rgba(11,143,83,.99), rgba(3,82,49,.995)) !important;
    box-shadow: 0 -18px 55px rgba(0,24,17,.38) !important;
    animation: none !important;
  }

  #auth-screen .auth-panel__inner .auth-back {
    position: static !important;
    display: inline-flex !important;
    margin: 0 0 14px !important;
    padding: 4px 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .86rem !important;
  }

  #auth-screen .auth-panel__inner .login-school-mark,
  .audience-staff #auth-screen .auth-panel__inner .login-school-mark {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  #auth-screen .auth-panel__inner .login-school-mark img,
  .audience-staff #auth-screen .auth-panel__inner .login-school-mark img {
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 54px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) !important;
  }

  #auth-screen .auth-panel__inner .login-school-mark span,
  .audience-staff #auth-screen .auth-panel__inner .login-school-mark span {
    position: static !important;
    display: block !important;
    white-space: normal !important;
  }

  #auth-screen .auth-panel__inner > h2,
  .audience-staff #auth-screen .auth-panel__inner > h2 {
    position: static !important;
    width: auto !important;
    margin: 0 0 6px !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(1.7rem, 7vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: normal !important;
  }

  #auth-screen #login-mode-help {
    position: static !important;
    display: block !important;
    margin: 0 0 18px !important;
    color: rgba(255,255,255,.84) !important;
    font-size: .86rem !important;
  }

  #auth-screen #login-form,
  .audience-staff #auth-screen #login-form {
    position: static !important;
    display: grid !important;
    inset: auto !important;
    gap: 14px !important;
    margin: 0 !important;
  }

  #auth-screen #login-form > .field,
  .audience-staff #auth-screen #login-form > .field,
  #auth-screen #login-password-field {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 7px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #auth-screen #login-form > .field > span:first-child,
  .audience-staff #auth-screen #login-form > .field > span:first-child {
    position: static !important;
    display: block !important;
    color: rgba(255,255,255,.92) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
  }

  #auth-screen #login-form > .field::before,
  #auth-screen #login-password-field::before {
    display: none !important;
    content: none !important;
  }

  #auth-screen #login-form input,
  .audience-staff #auth-screen #login-form input {
    position: static !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 48px 0 16px !important;
    color: #fff !important;
    caret-color: #fff !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 14px !important;
    outline: 0 !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  #auth-screen #login-form input::placeholder {
    color: rgba(255,255,255,.68) !important;
  }

  #auth-screen #login-password-field .password-field,
  .audience-staff #auth-screen #login-password-field .password-field {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #auth-screen #login-password-field .password-eye,
  .audience-staff #auth-screen #login-password-field .password-eye {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    right: 7px !important;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  #auth-screen #login-error {
    position: static !important;
    width: auto !important;
    margin: -4px 0 0 !important;
    color: #ffe2e2 !important;
    text-align: left !important;
  }

  #auth-screen #login-form > .button--primary,
  .audience-staff #auth-screen #login-form > .button--primary {
    position: static !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 2px 0 0 !important;
    padding: 0 18px !important;
    color: #00503f !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 12px 25px rgba(0,38,27,.2) !important;
    font-size: .98rem !important;
    font-weight: 900 !important;
  }

  #auth-screen #forgot-password-button,
  .audience-staff #auth-screen #forgot-password-button {
    position: static !important;
    display: block !important;
    margin: -2px auto 0 !important;
    padding: 4px !important;
    color: #fff !important;
    font-size: .82rem !important;
  }

  #auth-screen .login-security-note,
  .audience-staff #auth-screen .login-security-note {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 16px 0 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .7rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  #auth-screen.login-open .auth-welcome-v1 {
    height: 35dvh !important;
    border-radius: 0 0 28px 28px !important;
    box-shadow: 0 16px 38px rgba(0,24,18,.32) !important;
  }

  #auth-screen.login-open .auth-welcome-v1 .auth-visual__pattern {
    background-position: center 36% !important;
    filter: saturate(.94) brightness(.92) !important;
    transform: translateY(-3%) scale(1) !important;
  }

  #auth-screen.login-open .auth-welcome-v1 .auth-brand--v1 {
    top: max(-180px, calc(env(safe-area-inset-top) - 160px)) !important;
    padding: 24px 20px 22px !important;
    gap: 8px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-140px) !important;
  }

  #auth-screen.login-open .auth-welcome-v1 .auth-brand--v1 .secret-logo-button {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 3px !important;
  }

  #auth-screen.login-open .auth-welcome-v1 .auth-brand--v1 .secret-logo-button img {
    width: 78px !important;
    height: 78px !important;
  }

  #auth-screen.login-open #show-login-button,
  #auth-screen.login-open .demo-mode-label {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-42px) !important;
  }

  #auth-screen.login-open .auth-welcome-v1::after {
    opacity: 0 !important;
  }

  #auth-screen.login-open .auth-panel,
  .audience-staff #auth-screen.login-open .auth-panel,
  .audience-guardian #auth-screen.login-open .auth-panel,
  .audience-combined #auth-screen.login-open .auth-panel,
  .audience-developer #auth-screen.login-open .auth-panel {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* Webapp v1.5 — penyempurnaan mobile, kuitansi, dan halaman dispensasi */
.receipt-modal {
  display: grid;
  gap: 18px;
}
.receipt-modal__hero {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d8e9e0;
  border-radius: 22px;
  background: linear-gradient(135deg, #f8fcfa 0%, #edf7f2 100%);
}
.receipt-modal__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.receipt-modal__brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.08));
}
.receipt-modal__brand p {
  margin: 0 0 4px;
  color: #11824f;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.receipt-modal__brand h3 {
  margin: 0;
  color: #173126;
  font-size: 1.18rem;
}
.receipt-modal__brand span,
.receipt-modal__meta span {
  color: #6b7a72;
  font-size: .88rem;
  line-height: 1.5;
}
.receipt-modal__meta {
  display: grid;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px dashed #bfd8cb;
}
.receipt-modal__meta small {
  color: #6b7a72;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.receipt-modal__meta strong {
  color: #173126;
  font-size: 1.1rem;
}
.receipt-modal__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.receipt-modal__section {
  padding: 16px 18px;
  border: 1px solid #e0ebe5;
  border-radius: 20px;
  background: #fff;
}
.receipt-modal__section h4 {
  margin: 0 0 14px;
  color: #173126;
  font-size: 1rem;
}
.receipt-modal__grid {
  grid-template-columns: minmax(135px, 180px) 1fr;
  gap: 10px 16px;
}
.receipt-modal__grid dt {
  color: #6b7a72;
}
.receipt-modal__grid dd {
  color: #1f3128;
}
.receipt-modal__notice {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #f2d2d2;
  background: #fff6f6;
}
.receipt-modal__notice strong {
  display: block;
  margin-bottom: 6px;
  color: #9d2f2f;
}
.receipt-modal__notice p,
.receipt-modal__notice small {
  margin: 0;
  color: #6d4a4a;
}
.receipt-modal__footer {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}
.receipt-modal__footer p {
  margin: 0;
  color: #6b7a72;
}
@media (max-width: 900px) {
  .receipt-modal__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipt-modal__brand {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .receipt-modal__hero {
    padding: 16px;
    border-radius: 18px;
  }
  .receipt-modal__brand {
    display: grid;
    justify-items: start;
  }
  .receipt-modal__brand img {
    width: 56px;
    height: 56px;
  }
  .receipt-modal__section {
    padding: 14px;
    border-radius: 16px;
  }
  .receipt-modal__grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .receipt-modal__grid dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 900px) {
  .app-shell:not(.role-guardian) .global-search-button {
    display: none !important;
  }
  .cashflow-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    margin-top: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .cashflow-scroll > .mini-column-chart,
  .mini-column-chart {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(58px, 1fr)) !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 10px !important;
    min-height: 220px !important;
    padding: 12px 4px 0 !important;
  }
  .mini-column {
    grid-template-rows: 138px 22px 18px !important;
    gap: 4px !important;
  }
  .mini-column > span {
    width: 48px !important;
    max-width: 48px !important;
  }
  .mini-column small {
    font-size: .85rem !important;
    white-space: nowrap !important;
  }
  .mini-column b {
    overflow: visible !important;
    font-size: .7rem !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
  .finance-year-filter {
    min-width: 118px;
  }
  .finance-year-filter select {
    min-height: 44px;
  }
  .section-heading {
    gap: 10px;
  }
  .income-hero {
    gap: 14px;
    padding: 18px;
  }
  .income-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .head-class-chart,
  .head-donut-summary {
    min-height: auto;
  }
  .head-class-chart .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .head-class-chart .modern-chip {
    align-self: flex-start;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: .82rem;
    white-space: normal;
  }
  .head-class-chart .bar-chart {
    gap: 14px;
    padding: 2px 0 0;
  }
  .head-class-chart .bar-row {
    grid-template-columns: 86px 1fr 42px;
    gap: 10px;
    align-items: center;
    font-size: .84rem;
  }
  .head-class-chart .bar-row__track {
    height: 16px;
  }
  .head-donut-summary .donut-summary__header {
    margin-bottom: 2px;
  }
  .head-donut-summary .donut {
    width: 190px;
    height: 190px;
  }
  .head-donut-summary .donut::after {
    width: 124px;
    height: 124px;
  }
  .head-donut-summary .donut-summary__legend {
    gap: 10px;
  }
}
@media (max-width: 640px) {
  .head-class-chart .section-heading {
    align-items: stretch;
  }
  .head-class-chart .modern-chip {
    width: fit-content;
    max-width: 100%;
  }
  .head-class-chart .bar-row {
    grid-template-columns: minmax(92px, auto) 1fr;
    grid-template-areas:
      "label value"
      "track track";
    gap: 8px 12px;
    align-items: center;
  }
  .head-class-chart .bar-row > span:first-child {
    grid-area: label;
    display: block;
  }
  .head-class-chart .bar-row > strong {
    grid-area: value;
    justify-self: end;
    font-size: 1.05rem;
  }
  .head-class-chart .bar-row__track {
    grid-area: track;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .head-donut-summary .donut-summary__header {
    text-align: center;
  }
  .head-donut-summary .donut-summary__chart {
    justify-items: center;
  }
  .head-donut-summary .donut-summary__legend h3 {
    text-align: center;
  }
  .head-donut-summary .donut-summary__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* v3.3.6 — perapihan kwitansi, grafik kelas TU, dan safe area mobile */
.class-bars {
  display: grid;
  gap: 16px;
}
.class-bars__item {
  display: grid;
  gap: 9px;
}
.class-bars__label {
  color: #1f3128;
  font-size: .92rem;
  font-weight: 700;
}
.class-bars__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.class-bars__track {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efea;
}
.class-bars__fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e9356 0%, #57bf78 100%);
}
.class-bars__count {
  min-width: 20px;
  color: #173126;
  font-size: .88rem;
  font-weight: 800;
  text-align: right;
}

.receipt-modal {
  gap: 16px;
}
.receipt-modal__hero {
  gap: 14px;
}
.receipt-modal__body {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.receipt-modal__section--full {
  width: 100%;
}
.receipt-modal__grid.receipt-modal__grid--single {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 10px 18px;
}
.receipt-modal__grid.receipt-modal__grid--single dt {
  margin: 0;
  color: #61736a;
  font-weight: 600;
}
.receipt-modal__grid.receipt-modal__grid--single dd {
  margin: 0;
  color: #173126;
  font-weight: 700;
}
.receipt-modal__grid.receipt-modal__grid--single dd strong {
  color: #0d5d38;
}

@media (max-width: 900px) {
  .receipt-modal__body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .topbar {
    min-height: calc(78px + env(safe-area-inset-top));
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 12px;
  }
  .main-content {
    padding-top: 22px;
  }
  .class-bars {
    gap: 14px;
  }
  .class-bars__label {
    font-size: .9rem;
  }
  .class-bars__meta {
    gap: 10px;
  }
  .class-bars__track {
    height: 12px;
  }
  .receipt-modal__grid.receipt-modal__grid--single {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .receipt-modal__grid.receipt-modal__grid--single dd {
    margin-bottom: 10px;
  }
}


/* v3.3.7 — penyesuaian hero landing dan safe area topbar staf */
.auth-visual::after,
#auth-screen .auth-welcome-v1::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 901px) {
  .auth-welcome-v1 .auth-brand--v1 {
    margin-bottom: 126px !important;
  }
  .auth-welcome-v1 #show-login-button {
    bottom: 96px !important;
  }
}

@media (max-width: 900px) {
  #auth-screen .auth-welcome-v1 .auth-brand--v1 {
    top: max(42px, calc(env(safe-area-inset-top) + 20px)) !important;
  }
  #auth-screen #show-login-button {
    bottom: max(132px, calc(env(safe-area-inset-bottom) + 108px)) !important;
  }

  .topbar {
    min-height: calc(86px + env(safe-area-inset-top)) !important;
    padding-top: calc(22px + env(safe-area-inset-top)) !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
  }
  .topbar__actions {
    align-self: start;
  }
  .main-content {
    padding-top: 26px !important;
  }
}

/* v3.3.9 R4 — pisahkan layar login dan aplikasi staf secara tegas */
body.app-session-active {
  overflow: hidden !important;
}
body.app-session-active #auth-screen,
body.app-session-active #splash-screen {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.app-session-active #app-shell {
  display: grid !important;
  visibility: visible !important;
  min-height: 100dvh !important;
}
body.app-auth-visible #app-shell {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.app-auth-visible #auth-screen {
  display: block !important;
  visibility: visible !important;
}

@media (max-width: 900px) {
  body.app-session-active .app-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  body.app-session-active .main-content {
    height: calc(100dvh - var(--topbar-height));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.app-session-active .topbar {
    position: sticky !important;
    top: 0 !important;
  }
}

/* v3.4.1 R6 — landing staf, scroll panjang, kuitansi seragam, dan dialog aplikasi */
@media (min-width: 901px) {
  #auth-screen .auth-welcome-v1 {
    justify-content: flex-start !important;
    padding-top: clamp(150px, 20vh, 220px) !important;
  }
  #auth-screen .auth-welcome-v1 .auth-brand--v1 {
    margin: 0 !important;
  }
  #auth-screen .auth-welcome-v1 #show-login-button {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 28px 0 0 58px !important;
    transform: none !important;
  }
}

body.app-session-active #app-shell {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.app-session-active .app-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.app-session-active .main-content {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
body.app-session-active .app-footer {
  position: relative;
  z-index: 2;
}

.unified-receipt {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px);
  color: #24332c;
  border: 1px solid #dce8e2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(0, 63, 43, .1);
}
.unified-receipt__school {
  display: flex;
  align-items: center;
  gap: 18px;
}
.unified-receipt__school img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}
.unified-receipt__school h3 {
  margin: 0 0 5px;
  font-size: 1.16rem;
}
.unified-receipt__school p {
  margin: 0;
  color: #64746c;
  font-size: .82rem;
  line-height: 1.5;
}
.unified-receipt__eyebrow {
  margin: 30px 0 7px;
  color: #078b56;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.unified-receipt > h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}
.unified-receipt__number {
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.unified-receipt__rule {
  height: 1px;
  margin: 19px 0 24px;
  background: #26372f;
}
.unified-receipt__details {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 13px 20px;
  margin: 0;
}
.unified-receipt__details dt {
  color: #65746d;
}
.unified-receipt__details dd {
  min-width: 0;
  margin: 0;
  color: #24332c;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.unified-receipt__details small {
  font-weight: 600;
}
.unified-receipt__total {
  color: #087748 !important;
  font-size: 1.08rem;
}
.unified-receipt__footer {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #dce8e2;
}
.unified-receipt__footer p {
  margin: 0;
  color: #65746d;
}

.modal--password .modal__header {
  padding-bottom: 18px;
  border-bottom: 1px solid #dce8e2;
  background: linear-gradient(135deg, #f6fcf8, #edf8f2);
}
.modal--password .modal__header .eyebrow {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #087748;
  background: #dff5e8;
  letter-spacing: .12em;
}
.forced-password-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid #d9e9e1;
  border-radius: 16px;
  background: #f8fcfa;
}
.forced-password-intro p { margin: 0; line-height: 1.55; }
.forced-password-lock {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  background: #0a8f57;
}
.forced-password-field .password-field { display: block; position: relative; }
.forced-password-field .password-eye { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); }
.forced-password-field input { padding-right: 50px; }
.forced-password-rules { margin: 2px 0 0; }
.forced-password-rules li { color: #7a8781; }
.forced-password-rules li::before { content: "○"; margin-right: 8px; }
.forced-password-rules li.is-valid { color: #0b8b56; font-weight: 700; }
.forced-password-rules li.is-valid::before { content: "✓"; }

.app-confirm__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 2px auto 16px;
  place-items: center;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(145deg, #0d9b5f, #067447);
}
.app-confirm__icon .ui-icon { width: 29px; height: 29px; }
.app-confirm__message {
  margin: 0;
  color: #34473e;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}
.app-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .topbar {
    min-height: calc(78px + env(safe-area-inset-top)) !important;
    padding-top: calc(15px + env(safe-area-inset-top)) !important;
  }
  .main-content { padding-top: 20px !important; }
  .unified-receipt { padding: 20px 18px; border-radius: 19px; }
  .unified-receipt__details { grid-template-columns: 1fr; gap: 4px; }
  .unified-receipt__details dd { margin-bottom: 10px; }
  .modal--password .modal__content { padding-top: 18px; }
}

/* v3.4.1 R6 — seluruh dialog bawaan browser dialihkan ke dialog aplikasi. */
.app-confirm__actions--single {
  grid-template-columns: minmax(0, 1fr) !important;
}
.native-prompt-form {
  width: 100%;
}
.native-prompt-form .app-confirm__message {
  margin-top: 0;
}


/* R7 hotfix: pindahkan ikon username ke kiri pada login staf */
.audience-staff #login-form > .field:first-of-type::after,
.audience-staff #login-form > .field:first-of-type > input::after {
  content: none !important;
  display: none !important;
}
.audience-staff #login-form > .field:first-of-type {
  position: absolute !important;
}
.audience-staff #login-form > .field:first-of-type::before {
  position: absolute !important;
  z-index: 6 !important;
  top: 50% !important;
  left: 4.15% !important;
  right: auto !important;
  width: 5.82% !important;
  max-width: 24px !important;
  aspect-ratio: 1 !important;
  content: "" !important;
  transform: translateY(-50%) !important;
  background: url("../assets/wali-login-icon.png") center/contain no-repeat !important;
  filter: drop-shadow(0 1px 1px rgba(0,76,57,.22)) !important;
}
.audience-staff #login-form > .field:first-of-type > input {
  padding-left: 12.8% !important;
  padding-right: 6.2% !important;
  background-image: none !important;
}


/* v3.4.1 R8 — perbaikan login staf dan posisi landing web staf */
.audience-staff #login-form > .field:first-of-type,
.audience-staff #auth-screen #login-form > .field:first-of-type {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  gap: 7px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.audience-staff #login-form > .field:first-of-type::before,
.audience-staff #auth-screen #login-form > .field:first-of-type::before {
  display: none !important;
  content: none !important;
}
.audience-staff #login-form > .field:first-of-type > input,
.audience-staff #auth-screen #login-form > .field:first-of-type > input {
  padding-left: 48px !important;
  padding-right: 16px !important;
  background-image: url("../assets/wali-login-icon.png") !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: 16px center !important;
}
.audience-staff #login-form > .field:first-of-type > span:first-child,
.audience-staff #auth-screen #login-form > .field:first-of-type > span:first-child {
  display: block !important;
}

@media (min-width: 901px) {
  #auth-screen .auth-welcome-v1 {
    justify-content: center !important;
    padding-top: clamp(72px, 10vh, 120px) !important;
    padding-bottom: clamp(72px, 10vh, 120px) !important;
  }
  #auth-screen .auth-welcome-v1 .auth-brand--v1 {
    margin: 0 0 34px !important;
    transform: translateY(18px) !important;
  }
  #auth-screen .auth-welcome-v1 #show-login-button {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 0 0 58px !important;
    transform: none !important;
  }
  #auth-screen.login-open .auth-welcome-v1 .auth-brand--v1 {
    transform: translateX(-120vw) !important;
  }
}


/* v3.4.1 R9 - adaptive password eye contrast */
.password-eye,
button.password-eye,
.password-toggle,
button.password-toggle,
.toggle-password,
button.toggle-password {
  color: #1f2937 !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

.password-eye svg,
.password-toggle svg,
.toggle-password svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Input/password box with dark background */
.audience-staff .password-eye,
.audience-staff .password-toggle,
.audience-guardian .password-eye,
.audience-guardian .password-toggle,
.login-dark .password-eye,
.login-dark .password-toggle {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* White modal/dialog background */
.password-modal .password-eye,
.password-modal .password-toggle,
.dialog-password .password-eye,
.dialog-password .password-toggle,
.modal .password-eye,
.modal .password-toggle {
  color: #111827 !important;
  stroke: currentColor !important;
}


/* v3.4.1 R14 — APK staf full-bleed pada status bar Android lama */
@media (max-width: 900px) {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh !important;
  }

  body.app-auth-visible,
  body:has(#auth-screen:not(.is-hidden)) {
    background: transparent !important;
  }

  #auth-screen.auth-screen:not(.is-hidden),
  #auth-screen .auth-welcome-v1,
  body.app-session-active #app-shell {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
}


/* v3.4.1 R15 — pemulihan akun ringkas tanpa menampilkan nomor TU */
.account-recovery-simple {
  display: grid;
  gap: 14px;
}
.account-recovery-simple > p {
  margin: 0;
  color: var(--muted, #667085);
  line-height: 1.55;
}
.account-recovery-simple > small {
  display: block;
  margin: -4px 0 0;
  color: var(--muted, #7a8581);
  text-align: center;
}

/* ========================================================================== 
   v3.4.1 R16 — Responsive & Navigation Foundation
   R17 — APK-only scope hardening: blok ini hanya aktif di WebView Android.
   ========================================================================== */
@media (max-width: 900px) {
  html.platform-android,
  body.platform-android,
  body.platform-android #app-shell,
  body.platform-android .app-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
  }

  html.platform-android,
  body.platform-android,
  body.platform-android.app-session-active,
  body.platform-android.app-session-active #app-shell,
  body.platform-android.app-session-active .app-page {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  body.platform-android.app-session-active #app-shell,
  body.platform-android.app-session-active .app-page {
    overflow: hidden !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }

  /* Background topbar sendiri membentang sampai tepi atas. Safe area hanya
     menambah ruang di dalamnya, bukan menciptakan strip warna terpisah. */
  body.platform-android.app-session-active .topbar,
  body.platform-android .app-shell:not(.role-guardian) .topbar {
    top: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    background-clip: border-box !important;
  }

  body.platform-android.app-session-active .main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
  }

  /* Side/bottom system area tidak punya panel warna tersendiri. */
  body.platform-android .app-footer {
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    border-bottom: 0 !important;
  }

  body.platform-android input,
  body.platform-android textarea,
  body.platform-android select {
    min-width: 0 !important;
    font-size: max(16px, 1em) !important;
  }

  body.platform-android button[aria-busy="true"] {
    cursor: wait !important;
    opacity: .72 !important;
    pointer-events: none !important;
  }
}

.connection-banner,
.refresh-data-indicator {
  position: fixed;
  z-index: 1500;
  right: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateX(50%) translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 8px 24px rgba(0, 35, 25, .16);
}
.connection-banner {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  color: #5c4100;
  background: rgba(255, 241, 190, .98);
}
.refresh-data-indicator {
  top: calc(8px + env(safe-area-inset-top, 0px));
  color: #07583b;
  background: rgba(238, 255, 247, .98);
}
.connection-banner.is-visible,
.refresh-data-indicator.is-visible {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}


/* v3.4.1 R18 — APK Staff responsive/keyboard/picker/interaction polish.
   Hanya .platform-android agar Web Staf desktop/mobile tidak ikut berubah. */
.platform-android {
  color-scheme: light;
}

/* Form login dan modal tetap dapat digeser ketika keyboard memakan viewport,
   termasuk WebView Android lama seperti perangkat dengan layar pendek. */
.platform-android #auth-screen.login-open {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.platform-android #auth-screen.login-open .auth-panel {
  min-height: var(--spp-visual-height, 100dvh) !important;
  overflow: visible !important;
}
.platform-android #auth-screen.login-open .auth-panel__inner {
  padding-bottom: max(42px, calc(env(safe-area-inset-bottom) + 28px)) !important;
}
.platform-android .modal-root {
  align-items: start !important;
  overflow-y: auto !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
.platform-android .modal {
  width: min(100%, 620px) !important;
  max-height: calc(var(--spp-visual-height, 100dvh) - 24px) !important;
  margin: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: #fff !important;
}
.platform-android .modal__header,
.platform-android .modal__content,
.platform-android .scope-panel {
  background: #fff !important;
}
.platform-android select,
.platform-android input[type="date"],
.platform-android input[type="month"] {
  color-scheme: light !important;
  background-color: #fff !important;
  border-color: #d7e2dc !important;
}
.platform-android select option,
.platform-android select optgroup {
  color: #18352a !important;
  background: #fff !important;
}

/* Tap checkbox/radio tidak meninggalkan kotak/ring hijau tambahan. Check mark
   bawaan tetap terlihat; keyboard desktop tetap memakai focus-visible di web. */
.platform-android input[type="checkbox"]:focus,
.platform-android input[type="checkbox"]:focus-visible,
.platform-android input[type="radio"]:focus,
.platform-android input[type="radio"]:focus-visible,
.platform-android .choice-list label:focus,
.platform-android .choice-grid label:focus {
  outline: none !important;
  box-shadow: none !important;
}
.platform-android .choice-list input[type="checkbox"],
.platform-android .choice-grid input[type="checkbox"],
.platform-android .promotion-row input[type="checkbox"] {
  accent-color: #0a8f57;
}

/* Bayar tunai: metadata identitas konsisten satu baris di HP sempit. */
.platform-android .cash-student-meta {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: clamp(.72rem, 3.25vw, .84rem) !important;
}

/* Tampilan dispensasi aktif lebih ringkas tanpa horizontal scroll. */
.platform-android .waiver-summary,
.platform-android .waiver-reason {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.platform-android .waiver-reason {
  margin-top: 3px;
  color: #7a8781;
  font-size: .74rem;
  font-style: normal;
}

/* Tentang Aplikasi Staff mengikuti komposisi sederhana APK Wali. */
.platform-android .staff-about-mobile {
  display: grid;
  min-height: min(62dvh, 520px);
  padding: 30px 20px 36px;
  place-items: center;
  align-content: center;
  gap: 18px;
  text-align: center;
  border: 1px solid #dce8e2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(0, 70, 45, .08);
}
.platform-android .staff-about-mobile img {
  width: clamp(118px, 38vw, 168px);
  height: auto;
  object-fit: contain;
}
.platform-android .staff-about-mobile p {
  margin: 0;
  color: #506158;
  font-weight: 700;
}
.platform-android .staff-about-mobile div {
  display: grid;
  gap: 5px;
  color: #1f3229;
  font-size: .82rem;
}

/* Kepala Sekolah tetap read-only di logic/API, tetapi label pengawasan yang
   berulang disembunyikan dari APK agar halaman lebih bersih. */
.platform-android .role-headmaster .role-context small,
.platform-android .role-wakepsek .role-context small,
.platform-android .role-headmaster .readonly-banner,
.platform-android .role-wakepsek .readonly-banner,
.platform-android .role-headmaster .head-class-chart .modern-chip,
.platform-android .role-wakepsek .head-class-chart .modern-chip {
  display: none !important;
}
.platform-android .role-headmaster .head-dashboard-charts,
.platform-android .role-wakepsek .head-dashboard-charts {
  margin-top: 10px !important;
}
.platform-android .role-headmaster .head-class-chart > .section-heading,
.platform-android .role-wakepsek .head-class-chart > .section-heading {
  margin-top: 0 !important;
}

/* Kualitas data TU lebih ringkas; tidak butuh instruksi "tekan kartu". */
.platform-android .follow-up-panel > .section-heading {
  margin-bottom: 12px !important;
}
.platform-android .follow-up-grid button {
  position: relative;
  padding-right: 42px !important;
  text-align: left !important;
}
.platform-android .follow-up-grid button > i {
  position: absolute;
  top: 50%;
  right: 16px;
  color: #0a8f57;
  font-size: 1.45rem;
  font-style: normal;
  transform: translateY(-50%);
}


/* Keyboard fallback untuk WebView Android lama yang tidak selalu mengecilkan
   visual viewport saat IME terbuka. Ruang ekstra hanya aktif saat field fokus. */
.platform-android.android-keyboard-focus #auth-screen.login-open .auth-panel__inner {
  padding-bottom: max(260px, 38vh) !important;
}
.platform-android.android-keyboard-focus .modal__content {
  padding-bottom: max(240px, 34vh) !important;
}
.platform-android input,
.platform-android textarea,
.platform-android select {
  scroll-margin-top: 90px;
  scroll-margin-bottom: 42vh;
}

/* Semua aksi yang benar-benar berlabel Hapus tetap memakai tone destruktif. */
.platform-android .button.button--danger,
.platform-android button[data-action="delete-category"],
.platform-android button[data-action="delete-waiver"],
.platform-android button[data-action="delete-guardian-account"],
.platform-android button[data-action="delete-event"],
.platform-android button[data-action="delete-announcement"] {
  border-color: #c93636 !important;
  color: #fff !important;
  background: #d94242 !important;
}


/* ==========================================================================
   v3.4.1 R19 — APK Staff header/status/login/focus hardening
   Scope Android-only: Web Staf tidak ikut berubah.
   ========================================================================== */
@media (max-width: 900px) {
  /* Header role: avatar + nama peran di kiri, notifikasi dan menu di kanan. */
  html.platform-android body.audience-staff .app-shell.role-tu .topbar,
  html.platform-android body.audience-staff .app-shell.role-treasurer .topbar,
  html.platform-android body.audience-staff .app-shell.role-headmaster .topbar,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto !important;
    column-gap: 12px !important;
    align-items: center !important;
    min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .topbar-school-brand,
  html.platform-android body.audience-staff .app-shell.role-treasurer .topbar-school-brand,
  html.platform-android body.audience-staff .app-shell.role-headmaster .topbar-school-brand,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .topbar-school-brand,
  html.platform-android body.audience-staff .app-shell.role-tu .topbar__title,
  html.platform-android body.audience-staff .app-shell.role-treasurer .topbar__title,
  html.platform-android body.audience-staff .app-shell.role-headmaster .topbar__title,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .topbar__title,
  html.platform-android body.audience-staff .app-shell.role-tu .global-search-button,
  html.platform-android body.audience-staff .app-shell.role-treasurer .global-search-button,
  html.platform-android body.audience-staff .app-shell.role-headmaster .global-search-button,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .global-search-button {
    display: none !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .topbar__actions,
  html.platform-android body.audience-staff .app-shell.role-treasurer .topbar__actions,
  html.platform-android body.audience-staff .app-shell.role-headmaster .topbar__actions,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .topbar__actions {
    display: contents !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .user-button,
  html.platform-android body.audience-staff .app-shell.role-treasurer .user-button,
  html.platform-android body.audience-staff .app-shell.role-headmaster .user-button,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .user-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .user-avatar,
  html.platform-android body.audience-staff .app-shell.role-treasurer .user-avatar,
  html.platform-android body.audience-staff .app-shell.role-headmaster .user-avatar,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .user-avatar {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,.92) !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.16) !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .user-button__text,
  html.platform-android body.audience-staff .app-shell.role-treasurer .user-button__text,
  html.platform-android body.audience-staff .app-shell.role-headmaster .user-button__text,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .user-button__text {
    display: block !important;
    min-width: 0 !important;
  }
  /* Yang ditampilkan di header adalah nama peran, bukan nama akun personal. */
  html.platform-android body.audience-staff .app-shell.role-tu .user-button__text strong,
  html.platform-android body.audience-staff .app-shell.role-treasurer .user-button__text strong,
  html.platform-android body.audience-staff .app-shell.role-headmaster .user-button__text strong,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .user-button__text strong {
    display: none !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .user-button__text small,
  html.platform-android body.audience-staff .app-shell.role-treasurer .user-button__text small,
  html.platform-android body.audience-staff .app-shell.role-headmaster .user-button__text small,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .user-button__text small {
    display: block !important;
    max-width: min(52vw, 230px) !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: clamp(1rem, 4.8vw, 1.23rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .notification-button,
  html.platform-android body.audience-staff .app-shell.role-treasurer .notification-button,
  html.platform-android body.audience-staff .app-shell.role-headmaster .notification-button,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .notification-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  html.platform-android body.audience-staff .app-shell.role-tu .topbar__menu,
  html.platform-android body.audience-staff .app-shell.role-treasurer .topbar__menu,
  html.platform-android body.audience-staff .app-shell.role-headmaster .topbar__menu,
  html.platform-android body.audience-staff .app-shell.role-wakepsek .topbar__menu {
    display: grid !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    order: initial !important;
  }

  /* Card Status Siswa Kepsek/Bendahara: legend di kiri, donut di kanan. */
  html.platform-android body.audience-staff .role-headmaster .staff-student-status-card,
  html.platform-android body.audience-staff .role-wakepsek .staff-student-status-card,
  html.platform-android body.audience-staff .role-treasurer .staff-student-status-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(138px, 39vw, 190px) !important;
    grid-template-rows: auto 1fr !important;
    gap: 10px 12px !important;
    min-height: 0 !important;
    padding: 20px 18px !important;
    align-items: center !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: end !important;
    text-align: left !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__header h3 {
    margin: 3px 0 0 !important;
    font-size: clamp(.98rem, 4.3vw, 1.18rem) !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__chart {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    place-self: center !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__legend {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    gap: 8px !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__legend > h3 {
    margin: 0 0 4px !important;
    font-size: clamp(.98rem, 4.3vw, 1.18rem) !important;
    line-height: 1.08 !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px 7px !important;
    padding: 0 !important;
    border-top: 0 !important;
    font-size: clamp(.72rem, 3.2vw, .88rem) !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__row span {
    gap: 7px !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut-summary__row strong {
    white-space: nowrap !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut {
    width: clamp(138px, 37vw, 176px) !important;
    height: clamp(138px, 37vw, 176px) !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut::after {
    width: 68% !important;
    height: 68% !important;
  }
  html.platform-android body.audience-staff .staff-student-status-card .donut strong {
    font-size: clamp(1.55rem, 7.4vw, 2.15rem) !important;
  }

  /* Login Staff: satu gambar saja. Awal sedikit zoom, setelah klik MASUK kembali
     ke skala normal. Form tidak pernah ikut scale/zoom. */
  html.platform-android body.audience-staff #auth-screen {
    position: fixed !important;
    inset: 0 !important;
    isolation: isolate !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #006743 !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen.is-hidden {
    display: none !important;
  }
  html.platform-android body.audience-staff #auth-screen::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: -5% !important;
    pointer-events: none !important;
    background-image: linear-gradient(180deg, rgba(0,124,76,.48), rgba(0,83,49,.74)), url("../assets/school-background-secondary.jpg") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open::before {
    transform: scale(1) !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-visual {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100dvh !important;
    background: transparent !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .school-scene {
    display: none !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel {
    position: fixed !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: var(--spp-visual-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: translateY(100%) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s ease !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel__inner {
    position: relative !important;
    width: 100% !important;
    min-height: var(--spp-visual-height, 100dvh) !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 30px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(0,137,78,.82), rgba(0,91,53,.90)) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-back {
    display: inline-flex !important;
    margin: 0 0 30px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-school-mark {
    position: static !important;
    display: flex !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    font-size: clamp(.66rem, 2.85vw, .79rem) !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-school-mark img {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel__inner h2 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(1.95rem, 8.2vw, 2.45rem) !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    text-align: left !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-mode-help {
    display: block !important;
    margin: 0 0 24px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: .95rem !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html.platform-android body.audience-staff #auth-screen .field {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html.platform-android body.audience-staff #auth-screen .field input {
    width: 100% !important;
    min-height: 58px !important;
    max-width: 100% !important;
    padding: 12px 52px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-password-field input {
    padding-right: 54px !important;
  }
  html.platform-android body.audience-staff #auth-screen #forgot-password-button {
    position: static !important;
    grid-row: auto !important;
    justify-self: center !important;
    margin: -2px 0 6px !important;
    color: #fff !important;
    font-weight: 750 !important;
  }
  html.platform-android body.audience-staff #auth-screen .form-error {
    grid-row: auto !important;
    margin: 0 !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-submit,
  html.platform-android body.audience-staff #auth-screen button[type="submit"] {
    grid-row: auto !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 22px 0 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #075d35 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 1.08rem !important;
    font-weight: 850 !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-security-note {
    margin: 24px 0 0 !important;
    color: rgba(255,255,255,.66) !important;
    text-align: center !important;
  }
  /* R18 menambah padding besar pada inner saat keyboard fokus. Di R19 ruang
     scroll dikelola oleh viewport/panel, jadi ukuran form tidak ikut "membesar". */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px) !important;
  }

  /* Android touch UI: hilangkan focus halo/garis tap dari semua kontrol Staff.
     Web tetap mempertahankan focus-visible untuk keyboard. */
  html.platform-android body.audience-staff,
  html.platform-android body.audience-staff * {
    -webkit-tap-highlight-color: transparent !important;
  }
  html.platform-android body.audience-staff button:focus,
  html.platform-android body.audience-staff button:focus-visible,
  html.platform-android body.audience-staff input:focus,
  html.platform-android body.audience-staff input:focus-visible,
  html.platform-android body.audience-staff select:focus,
  html.platform-android body.audience-staff select:focus-visible,
  html.platform-android body.audience-staff textarea:focus,
  html.platform-android body.audience-staff textarea:focus-visible,
  html.platform-android body.audience-staff [tabindex]:focus,
  html.platform-android body.audience-staff [tabindex]:focus-visible,
  html.platform-android body.audience-staff .search-box:focus-within,
  html.platform-android body.audience-staff .choice-list label:focus-within,
  html.platform-android body.audience-staff .choice-grid label:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
  html.platform-android body.audience-staff.app-session-active .search-box input:focus,
  html.platform-android body.audience-staff.app-session-active .field input:focus,
  html.platform-android body.audience-staff.app-session-active .field select:focus,
  html.platform-android body.audience-staff.app-session-active .field textarea:focus {
    border-color: var(--pro-border, #d6e6dc) !important;
  }
}


/* ==========================================================================
   v3.4.1 R20 — APK Staff login bottom-sheet + inline feedback hardening
   ========================================================================== */
@media (max-width: 900px) {
  /* SATU gambar persisten. Tidak ada background image kedua di panel/visual. */
  html.platform-android body.audience-staff #auth-screen {
    background: #005b3c !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen::before {
    inset: -6% !important;
    background-image: linear-gradient(180deg, rgba(0,111,70,.26), rgba(0,69,44,.62)),
      url("../assets/school-background-secondary.jpg") !important;
    background-position: center 48% !important;
    background-size: cover !important;
    transform: scale(1.13) !important;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open::before {
    transform: scale(1) !important;
    filter: brightness(.92) saturate(.96) !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-welcome-v1,
  html.platform-android body.audience-staff #auth-screen .auth-welcome-v1 .auth-visual__pattern,
  html.platform-android body.audience-staff #auth-screen .auth-visual {
    background: transparent !important;
    background-image: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-welcome-v1 .auth-visual__pattern {
    display: none !important;
  }

  /* Klik MASUK: hero hanya mengecil di bagian atas, BUKAN berubah menjadi layar login penuh. */
  html.platform-android body.audience-staff #auth-screen .auth-visual {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transition: height .32s cubic-bezier(.2,.8,.2,1) !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-visual {
    height: 31dvh !important;
    pointer-events: none !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-brand,
  html.platform-android body.audience-staff #auth-screen.login-open #show-login-button,
  html.platform-android body.audience-staff #auth-screen.login-open .demo-mode-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity .16s ease !important;
  }

  /* Panel login hanya 73% bagian bawah. Form tidak pernah di-scale. */
  html.platform-android body.audience-staff #auth-screen .auth-panel {
    position: absolute !important;
    z-index: 5 !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 73dvh !important;
    min-height: 0 !important;
    max-height: 73dvh !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: translateY(104%) !important;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .18s ease !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel__inner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: linear-gradient(165deg, rgba(0,132,77,.965), rgba(0,78,48,.985)) !important;
    box-shadow: 0 -14px 38px rgba(0,28,18,.28) !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-back {
    margin: 0 0 12px !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-school-mark {
    margin: 0 0 10px !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-school-mark img {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel__inner h2 {
    margin-bottom: 4px !important;
    font-size: clamp(1.65rem, 7.2vw, 2.05rem) !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-mode-help {
    margin-bottom: 14px !important;
    font-size: .85rem !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form {
    gap: 11px !important;
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .field,
  html.platform-android body.audience-staff #auth-screen .field input,
  html.platform-android body.audience-staff #auth-screen .password-field,
  html.platform-android body.audience-staff #auth-screen button {
    transform: none !important;
  }
  html.platform-android body.audience-staff #auth-screen .field input {
    min-height: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
  }
  html.platform-android body.audience-staff #auth-screen button[type="submit"] {
    min-height: 52px !important;
    height: 52px !important;
    margin-top: 4px !important;
  }
  html.platform-android body.audience-staff #auth-screen .login-security-note {
    margin-top: 14px !important;
    font-size: .67rem !important;
  }

  /* Saat keyboard benar-benar dibuka, panel mengikuti tinggi visual viewport dan scroll.
     Perubahan ini baru aktif SETELAH field disentuh, bukan saat tombol MASUK ditekan. */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel {
    height: var(--spp-visual-height, 73dvh) !important;
    max-height: var(--spp-visual-height, 73dvh) !important;
  }
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  }

  /* Bottom toast Staff benar-benar tidak dirender; guard JS juga aktif. */
  html.platform-android body.audience-staff #toast-region {
    display: none !important;
  }

  .profile-photo-feedback {
    display: block;
    min-height: 1.25em;
    margin-top: 7px;
    color: var(--muted, #6e7f78);
    font-size: .75rem;
    line-height: 1.35;
  }
  .profile-photo-feedback.is-success { color: #0b8c59; }
  .profile-photo-feedback.is-error { color: #c93636; }
}


/* ==========================================================================
   v3.4.1 R21 — login Staff satu foto benar-benar mengecil + dashboard compact
   ========================================================================== */
@media (max-width: 900px) {
  /* Satu aset foto persisten. Kondisi awal memenuhi layar dengan rasio asli 4:3,
     lalu setelah tombol Masuk foto yang SAMA mengecil menjadi header foto utuh. */
  html.platform-android body.audience-staff #auth-screen {
    --r21-login-photo-h: clamp(235px, 73.52vw, 360px);
    background: #006b44 !important;
  }
  html.platform-android body.audience-staff #auth-screen::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 136dvh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    background-image:
      linear-gradient(180deg, rgba(0,90,56,.15), rgba(0,69,43,.30)),
      url("../assets/school-background-secondary.jpg") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
    transition:
      width .34s cubic-bezier(.2,.8,.2,1),
      height .34s cubic-bezier(.2,.8,.2,1),
      left .34s cubic-bezier(.2,.8,.2,1),
      transform .34s cubic-bezier(.2,.8,.2,1),
      filter .34s ease !important;
    will-change: width, height, left, transform !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open::before {
    left: 0 !important;
    width: 100vw !important;
    height: var(--r21-login-photo-h) !important;
    filter: brightness(.92) saturate(.97) !important;
    transform: none !important;
  }

  /* Hero mengikuti tinggi foto. Tidak ada layer background kedua. */
  html.platform-android body.audience-staff #auth-screen .auth-visual {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    background: transparent !important;
    transition: height .34s cubic-bezier(.2,.8,.2,1) !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-visual {
    height: var(--r21-login-photo-h) !important;
  }

  /* Panel dimulai TEPAT setelah foto dan berakhir TEPAT di bawah viewport.
     Tidak menggunakan tinggi 73dvh sehingga tidak ada strip/celah foto di bawah. */
  html.platform-android body.audience-staff #auth-screen .auth-panel {
    position: absolute !important;
    z-index: 5 !important;
    top: var(--r21-login-photo-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    transform: translateY(102%) !important;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .16s ease !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  html.platform-android body.audience-staff #auth-screen .auth-panel__inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Saat keyboard benar-benar terbuka, panel boleh naik agar field tetap terlihat.
     Ini hanya aktif setelah input disentuh, bukan setelah menekan tombol Masuk. */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel {
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Desktop Staff: hilangkan ruang kosong berlebihan pada Arus Kas + Status Siswa. */
@media (min-width: 901px) {
  body.audience-staff .role-treasurer .executive-grid {
    align-items: start !important;
    gap: 16px !important;
    margin-top: 14px !important;
  }
  body.audience-staff .role-treasurer .executive-grid > .chart-card {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 20px 18px !important;
  }
  body.audience-staff .role-treasurer .executive-grid .cashflow-scroll > * {
    min-width: 0 !important;
  }
  body.audience-staff .role-treasurer .executive-grid .mini-column-chart {
    min-height: 190px !important;
    padding: 8px 4px 0 !important;
    gap: 8px !important;
  }
  body.audience-staff .role-treasurer .executive-grid .mini-column {
    grid-template-rows: 118px auto auto !important;
    gap: 4px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card {
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
    padding: 20px 18px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__chart {
    margin: 0 !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut {
    width: 160px !important;
    height: 160px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut::after {
    width: 108px !important;
    height: 108px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__legend {
    gap: 6px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row {
    padding-top: 7px !important;
  }
}


/* ==========================================================================
   v3.4.1 R23 — login Staff stabil, popup rounded global, status rapi
   ========================================================================== */
@media (max-width: 900px) {
  /* Login Staff: jangan meloncat ke atas ketika username/password difokuskan. */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel {
    top: var(--r21-login-photo-h) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form input,
  html.platform-android body.audience-staff #auth-screen #login-form button,
  html.platform-android body.audience-guardian #auth-screen #login-form button {
    touch-action: manipulation !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form button[type="submit"],
  html.platform-android body.audience-guardian #auth-screen #login-form button[type="submit"] {
    position: relative !important;
    z-index: 12 !important;
    pointer-events: auto !important;
  }

  /* Seluruh modal aplikasi Android memakai sudut konsisten, tidak kotak lancip. */
  html.platform-android .modal {
    border-radius: 28px !important;
    overflow: hidden !important;
  }
  html.platform-android .modal__header {
    border-radius: 28px 28px 0 0 !important;
  }
  html.platform-android .modal__content {
    border-radius: 0 0 28px 28px !important;
  }
  html.platform-android .modal--confirm,
  html.platform-android .modal--password,
  html.platform-android .receipt-modal,
  html.platform-android .account-recovery-simple {
    border-radius: 24px !important;
  }

  /* Picker select buatan aplikasi menggantikan popup native Android yang kotak. */
  .r23-select-list {
    display: grid;
    gap: 8px;
    padding: 2px 0 4px;
  }
  .r23-select-option {
    display: flex;
    width: 100%;
    min-height: 58px;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    color: #17231f;
    border: 1px solid #e0e9e4;
    border-radius: 18px;
    background: #fff;
    font: inherit;
    text-align: left;
    box-shadow: none;
  }
  .r23-select-option i {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 2px solid #7b817e;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .r23-select-option.is-selected {
    background: #f1fbf6;
    border-color: #a8dec2;
  }
  .r23-select-option.is-selected i {
    border: 6px solid #11975e;
  }

  /* Legend status Bendahara lurus seperti Kepala Sekolah. */
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__legend h3 {
    margin: 0 0 8px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 12px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row > strong {
    min-width: 58px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) {
  .r23-select-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
  }
  .r23-select-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(10, 18, 15, .58);
    backdrop-filter: blur(2px);
  }
  .r23-select-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 520px);
    max-height: min(72dvh, 620px);
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 24, 16, .3);
  }
  .r23-select-panel > header {
    display: flex;
    min-height: 62px;
    padding: 12px 14px 12px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5ebe8;
  }
  .r23-select-panel > header strong {
    font-size: 1.05rem;
    color: #17231f;
  }
  .r23-select-panel > header button {
    width: 42px;
    height: 42px;
    border: 1px solid #dce6e1;
    border-radius: 50%;
    background: #fff;
    font-size: 1.7rem;
    line-height: 1;
    color: #17231f;
  }
  .r23-select-panel .r23-select-list {
    max-height: calc(min(72dvh, 620px) - 62px);
    overflow-y: auto;
    padding: 12px;
  }
}


/* ==========================================================================
   v3.4.1 R24 — modal/keyboard stability, class labels, compact dashboards
   ========================================================================== */
@media (max-width: 900px) {
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel {
    top: var(--r21-login-photo-h) !important;
    right: 0 !important;
    bottom: max(0px, calc(100dvh - var(--spp-visual-height, 100dvh) - var(--spp-visual-offset-top, 0px))) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 16px 20px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form,
  html.platform-android body.audience-staff #auth-screen #login-form > *,
  html.platform-android body.audience-staff #auth-screen #login-form .field,
  html.platform-android body.audience-staff #auth-screen #login-form .password-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form button[type="submit"] {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  html.platform-android .modal-root {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  html.platform-android .modal-root.is-hidden { display: none !important; }
  html.platform-android .modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    max-height: calc(var(--spp-visual-height, 100dvh) - 22px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #fff !important;
    overscroll-behavior: contain !important;
  }
  html.platform-android .modal__header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    background: #fff !important;
    border-radius: 28px 28px 0 0 !important;
  }
  html.platform-android .modal__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 0 28px 28px !important;
    background: #fff !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-anchor: none !important;
  }
  html.platform-android.android-keyboard-focus .modal {
    max-height: calc(var(--spp-visual-height, 100dvh) - 18px) !important;
  }
  html.platform-android.android-keyboard-focus .modal__content {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html.platform-android .modal__content .stack,
  html.platform-android .modal__content .form-grid { overflow: visible !important; }
  html.platform-android .modal-choice-list,
  html.platform-android .choice-list,
  html.platform-android .choice-grid { touch-action: pan-y !important; }
  html.platform-android .modal-choice-list label,
  html.platform-android .choice-list label,
  html.platform-android .choice-grid label { -webkit-tap-highlight-color: transparent !important; }
  html.platform-android .r23-select-panel,
  html.platform-android .r23-select-list {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }
  html.platform-android .r23-select-option { touch-action: manipulation !important; }

  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row > span {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row > strong {
    margin: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  html.platform-android .student-avatar { background: #2469d8 !important; }
  html.platform-android .student-avatar > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: scale(1.11) !important;
    transform-origin: center !important;
  }
  .guardian-account-simple .form-note {
    margin: -2px 0 2px;
    padding: 12px 14px;
    color: #53665d;
    border: 1px solid #dce8e2;
    border-radius: 16px;
    background: #f6fbf8;
    font-size: .82rem;
    line-height: 1.45;
  }
}

@media (min-width: 901px) {
  body.audience-staff .role-treasurer .executive-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr) !important;
    align-items: start !important;
    gap: 16px !important;
  }
  body.audience-staff .role-treasurer .executive-grid > .chart-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body.audience-staff .role-treasurer .executive-grid .cashflow-scroll {
    min-height: 0 !important;
    height: auto !important;
  }
  body.audience-staff .role-treasurer .executive-grid .mini-column-chart {
    height: 210px !important;
    min-height: 0 !important;
  }
  body.audience-staff .role-treasurer .staff-student-status-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}


/* ==========================================================================
   v3.4.1 R24 — revisi 13 screenshot + pemisahan Tambah Wali/Hubungkan Wali
   ========================================================================== */
@media (max-width: 900px) {
  /* Modal Android: header stabil, isi saja yang menggulir. */
  html.platform-android .modal-root {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html.platform-android .modal-root.is-hidden { display: none !important; }
  html.platform-android .modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 620px) !important;
    height: auto !important;
    max-height: calc(var(--spp-visual-height, 100dvh) - 20px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
    transform: none !important;
  }
  html.platform-android .modal__header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    z-index: 3 !important;
    border-radius: 28px 28px 0 0 !important;
    background: #fff !important;
  }
  html.platform-android .modal__content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
    border-radius: 0 0 28px 28px !important;
    background: #fff !important;
  }
  html.platform-android.android-keyboard-focus .modal {
    max-height: calc(var(--spp-visual-height, 100dvh) - 12px) !important;
  }
  html.platform-android.android-keyboard-focus .modal__content {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html.platform-android .modal--password {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--spp-visual-height, 100dvh) - 20px) !important;
  }
  html.platform-android .modal--password .modal__header {
    flex: 0 0 auto !important;
  }
  html.platform-android .modal--password .modal__content,
  html.platform-android .forced-password-form {
    min-height: 0 !important;
    overflow: visible !important;
  }
  html.platform-android .modal__content form,
  html.platform-android .modal__content .stack,
  html.platform-android .modal__content .form-grid {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Picker: scroll gesture tidak dianggap pilihan. */
  html.platform-android .r23-select-overlay { touch-action: none !important; }
  html.platform-android .r23-select-panel,
  html.platform-android .r23-select-list {
    max-height: min(72dvh, calc(var(--spp-visual-height, 100dvh) - 64px)) !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
  html.platform-android .r23-select-list {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html.platform-android .r23-select-option {
    flex: 0 0 auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Avatar default saja yang digeser/zoom supaya karakter tepat di tengah. */
  html.platform-android .student-avatar > img {
    transform: none !important;
    object-position: 50% 50% !important;
  }
  html.platform-android .student-avatar--default > img {
    transform: none !important;
    object-position: center !important;
  }

  /* Status siswa Bendahara: label dan jumlah selalu satu garis. */
  html.platform-android body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  html.platform-android body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row > span {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  html.platform-android body.audience-staff .role-treasurer .staff-student-status-card .donut-summary__row > strong {
    align-self: center !important;
    margin: 0 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* Login Staff: seluruh form tetap di dalam panel dan bergerak hanya di scroller panel. */
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel {
    top: var(--r21-login-photo-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    overflow: hidden !important;
  }
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel {
    top: var(--r21-login-photo-h) !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px 20px max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    border-radius: 28px 28px 0 0 !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form,
  html.platform-android body.audience-staff #auth-screen #login-form > *,
  html.platform-android body.audience-staff #auth-screen #login-form .field,
  html.platform-android body.audience-staff #auth-screen #login-form .password-field,
  html.platform-android body.audience-staff #auth-screen #login-form input,
  html.platform-android body.audience-staff #auth-screen #login-form button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-form button[type="submit"] {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Default avatar scaling must never affect uploaded photos on any staff viewport. */
.student-avatar--default > img {
  object-fit: cover;
  object-position: center;
}

/* Add Guardian is deliberately account-only; linking is handled by Hubungkan Wali Manual. */
.guardian-account-simple {
  width: 100%;
}

/* Desktop executive cards: reduce dead space without forcing a fixed height. */
@media (min-width: 901px) {
  body.audience-staff .role-treasurer .executive-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .78fr) !important;
    align-items: start !important;
    gap: 14px !important;
  }
  body.audience-staff .role-treasurer .executive-grid > .chart-card,
  body.audience-staff .role-treasurer .staff-student-status-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
  }
  body.audience-staff .role-treasurer .executive-grid .mini-column-chart {
    height: 190px !important;
    min-height: 0 !important;
  }
}

.class-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 14px;
}
@media (max-width: 900px) {
  .class-detail-actions { margin: 8px 0 12px; }
  .class-detail-actions .button { width: 100%; }
  body.audience-staff .role-treasurer .executive-grid .mini-column-chart {
    min-height: 170px !important;
    padding-top: 6px !important;
  }
  body.audience-staff .role-treasurer .executive-grid .mini-column {
    grid-template-rows: 92px 22px 18px !important;
    gap: 4px !important;
  }
}

/* R24.1 HOTFIX — login staff/developer mobile tap target, eye icon placement, and visual separation */
body.audience-staff .auth-panel__inner,
body.audience-developer .auth-panel__inner,
body.audience-staff .auth-panel__inner *,
body.audience-developer .auth-panel__inner * {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.audience-staff .auth-panel,
  body.audience-developer .auth-panel {
    padding-top: 33vh !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 40, 26, 0.18) 12%, rgba(0, 40, 26, 0.56) 100%) !important;
  }

  body.audience-staff .auth-panel__inner,
  body.audience-developer .auth-panel__inner {
    position: relative;
    min-height: 67vh;
    padding: 28px 22px 38px !important;
    border-radius: 34px 34px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 24px),
      linear-gradient(160deg, #007d45 0%, #006637 46%, #00572f 100%) !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
  }

  body.audience-staff .auth-panel__inner::before,
  body.audience-developer .auth-panel__inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 74px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    transform: translateX(-50%);
  }

  body.audience-staff .auth-panel__inner::after,
  body.audience-developer .auth-panel__inner::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 28px;
    border-radius: 34px 34px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    pointer-events: none;
  }

  body.audience-staff .auth-panel__inner .login-school-mark,
  body.audience-developer .auth-panel__inner .login-school-mark {
    top: -23.5vh !important;
    left: 22px !important;
    max-width: calc(100% - 44px) !important;
  }

  body.audience-staff .auth-panel__inner .stack,
  body.audience-developer .auth-panel__inner .stack {
    gap: 16px !important;
  }

  body.audience-staff .auth-panel__inner .field,
  body.audience-developer .auth-panel__inner .field {
    position: relative !important;
    overflow: visible !important;
  }

  body.audience-staff .auth-panel__inner .field input,
  body.audience-developer .auth-panel__inner .field input {
    width: 100% !important;
    min-height: 58px !important;
    padding-left: 50px !important;
    padding-right: 52px !important;
  }

  body.audience-staff .auth-panel__inner #login-password-field input,
  body.audience-developer .auth-panel__inner #login-password-field input {
    position: relative;
    z-index: 1;
    padding-right: 58px !important;
  }

  body.audience-staff .auth-panel__inner .password-field,
  body.audience-developer .auth-panel__inner .password-field {
    position: relative !important;
    display: block !important;
  }

  body.audience-staff .auth-panel__inner .password-eye,
  body.audience-developer .auth-panel__inner .password-eye {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    left: auto !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    cursor: pointer;
  }

  body.audience-staff .auth-panel__inner .password-eye .ui-icon,
  body.audience-developer .auth-panel__inner .password-eye .ui-icon {
    width: 24px !important;
    height: 24px !important;
    pointer-events: none;
  }

  body.audience-staff .auth-panel__inner .button--primary.button--full,
  body.audience-developer .auth-panel__inner .button--primary.button--full {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    margin-top: 8px !important;
    border-radius: 18px !important;
  }
}


/* R24.2 HOTFIX — login password field, password modal keyboard, avatar crop, and Android select suppression */
@media (max-width: 900px) {
  html.platform-android body.audience-staff #auth-screen #login-password-field .password-field,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-field {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 54px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    overflow: hidden !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-field::before,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-field::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: 10px !important;
    background: url("../assets/wali-password-icon.png") center/20px 20px no-repeat !important;
    opacity: .98 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field input,
  html.platform-android body.audience-developer #auth-screen #login-password-field input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 8px 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-eye,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-eye {
    position: static !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    place-items: center !important;
    z-index: 1 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-eye .ui-icon,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-eye .ui-icon {
    width: 22px !important;
    height: 22px !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-form > .field > input,
  html.platform-android body.audience-developer #auth-screen #login-form > .field > input {
    height: 54px !important;
    min-height: 54px !important;
  }

  html.platform-android.android-keyboard-focus .modal-root {
    align-items: flex-start !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html.platform-android .modal--password {
    width: min(100%, 640px) !important;
  }

  html.platform-android .modal--password .modal__header {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  html.platform-android .modal--password .modal__content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

html.platform-android .forced-password-form,
html.platform-android .forced-password-form .stack,
html.platform-android .forced-password-form .field {
  min-height: 0 !important;
}

html.platform-android .forced-password-form .password-field {
  position: relative !important;
  display: block !important;
}

html.platform-android .forced-password-form input {
  min-height: 56px !important;
  padding-right: 52px !important;
}

html.platform-android .forced-password-form .password-eye {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Uploaded profile photos always fill the circle neatly; defaults stay centered. */
.student-avatar,
.figma-avatar,
.guardian-avatar,
.tpi-student-avatar {
  background: #e8efea !important;
}

.student-avatar:not(.student-avatar--default) > img,
.guardian-avatar > img,
.tpi-student-avatar > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.06) !important;
}

.student-avatar--default > img,
.tpi-student-avatar.is-default > img,
.guardian-avatar.is-default > img {
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

.figma-avatar {
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #e8efea !important;
}

/* Profile modal avatar uses the same centered crop for uploaded photos. */
.profile-card .student-avatar {
  background: #e8efea !important;
}

.profile-card .student-avatar:not(.student-avatar--default) > img {
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.06) !important;
}

/* Android custom select: keep only the new card-style popup, prevent native popup behind it. */
html.platform-android .r23-select-overlay {
  z-index: 10040 !important;
}

html.platform-android .r23-select-backdrop {
  background: rgba(10, 26, 17, 0.42) !important;
}

html.platform-android .r23-select-panel {
  width: min(92vw, 640px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.22) !important;
}

html.platform-android .r23-select-panel header {
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid #d8e3dc !important;
}

html.platform-android .r23-select-list {
  padding: 10px 12px 14px !important;
  gap: 12px !important;
  background: #fff !important;
}

html.platform-android .r23-select-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 88px !important;
  padding: 0 18px !important;
  border: 1px solid #d5dfd8 !important;
  border-radius: 22px !important;
  background: #fff !important;
}

html.platform-android .r23-select-option.is-selected {
  background: #eef7f1 !important;
  border-color: #a8d6b8 !important;
}

/* ========================================================================== */
/* R24 FINAL DETAIL — login alignment, scrollable modals, picker reliability, */
/* and profile-photo centering.                                               */
/* ========================================================================== */
@media (max-width: 900px) {
  /* Staff/developer login: username dan password memakai geometri yang sama. */
  html.platform-android body.audience-staff #auth-screen #login-form > .field:first-child,
  html.platform-android body.audience-developer #auth-screen #login-form > .field:first-child,
  html.platform-android body.audience-staff #auth-screen #login-password-field,
  html.platform-android body.audience-developer #auth-screen #login-password-field {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-username,
  html.platform-android body.audience-developer #auth-screen #login-username,
  html.platform-android body.audience-staff #auth-screen #login-password,
  html.platform-android body.audience-developer #auth-screen #login-password {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    padding: 0 56px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-radius: 18px !important;
    color: #fff !important;
    caret-color: #fff !important;
    background-color: rgba(255,255,255,.12) !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 22px 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-username,
  html.platform-android body.audience-developer #auth-screen #login-username {
    background-image: url("../assets/wali-login-icon.png") !important;
    padding-right: 18px !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password,
  html.platform-android body.audience-developer #auth-screen #login-password {
    background-image: url("../assets/wali-password-icon.png") !important;
    padding-right: 58px !important;
  }

  /* Hilangkan ikon gembok tambahan dari wrapper supaya tidak dobel / bergeser. */
  html.platform-android body.audience-staff #auth-screen #login-password-field .password-field,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 58px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-password-field .password-field::before,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-field::before {
    display: none !important;
    content: none !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-eye,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-eye {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    z-index: 8 !important;
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: transparent !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  html.platform-android body.audience-staff #auth-screen #login-password-field .password-eye .ui-icon,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-eye .ui-icon {
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
  }

  /* Modal Android: header tetap, isi yang panjang benar-benar dapat di-scroll. */
  html.platform-android .modal-root {
    overflow: hidden !important;
    align-items: center !important;
  }
  html.platform-android .modal {
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 640px) !important;
    max-height: calc(var(--spp-visual-height, 100dvh) - 24px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }
  html.platform-android .modal__header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    z-index: 4 !important;
    background: #fff !important;
  }
  html.platform-android .modal__content,
  html.platform-android .modal--password .modal__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    background: #fff !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html.platform-android .modal__content form,
  html.platform-android .modal__content .stack,
  html.platform-android .modal__content .form-grid,
  html.platform-android .forced-password-form {
    min-height: 0 !important;
    overflow: visible !important;
  }
  html.platform-android.android-keyboard-focus .modal-root {
    align-items: flex-start !important;
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  }
  html.platform-android.android-keyboard-focus .modal {
    max-height: calc(var(--spp-visual-height, 100dvh) - 12px) !important;
  }

  /* Picker custom: isi dapat digeser, dan opsi belum menerima tap saat baru muncul. */
  html.platform-android .r23-select-panel {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(74dvh, calc(var(--spp-visual-height, 100dvh) - 36px)) !important;
  }
  html.platform-android .r23-select-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  html.platform-android .r23-select-overlay[data-ready="0"] .r23-select-option {
    pointer-events: none !important;
  }
  html.platform-android .r23-select-overlay[data-ready="1"] .r23-select-option {
    pointer-events: auto !important;
  }

  html.platform-android input[type="date"],
  html.platform-android input[type="month"] {
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* Semua avatar memakai frame bulat penuh dan pusat visual yang konsisten. */
.user-avatar,
.student-avatar,
.guardian-avatar,
.tpi-student-avatar,
.profile-card .student-avatar {
  overflow: hidden !important;
  border-radius: 50% !important;
}
.user-avatar > img,
.student-avatar > img,
.guardian-avatar > img,
.tpi-student-avatar > img,
.profile-card .student-avatar > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  margin: 0 !important;
}
/* Foto unggahan diberi sedikit zoom agar tepi gambar/latar lama tidak terlihat. */
.student-avatar:not(.student-avatar--default) > img,
.profile-card .student-avatar:not(.student-avatar--default) > img,
.user-avatar > img {
  transform: scale(1.10) !important;
  transform-origin: center center !important;
}
/* Aset default sudah dirancang simetris: jangan dizoom. */
.student-avatar--default > img,
.tpi-student-avatar.is-default > img,
.guardian-avatar.is-default > img {
  transform: none !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html.platform-android body.audience-staff #auth-screen #login-form > .field:first-child::before,
  html.platform-android body.audience-developer #auth-screen #login-form > .field:first-child::before,
  html.platform-android body.audience-staff #auth-screen #login-password-field::before,
  html.platform-android body.audience-developer #auth-screen #login-password-field::before {
    display: none !important;
    content: none !important;
  }
}

/* ========================================================================== */
/* R24 FINAL EXECUTION HOTFIX 2 — staff password frame, keyboard panel,      */
/* and default-avatar centering.                                             */
/* ========================================================================== */
@media (max-width: 900px) {
  /* Login staff/developer: panel jangan dipaksa setinggi sisa layar.
     Biarkan tinggi mengikuti isi agar tidak muncul "setengah halaman hijau"
     kosong saat field password difokuskan. */
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel__inner {
    height: auto !important;
    min-height: auto !important;
    max-height: min(calc(var(--spp-visual-height, 100dvh) - var(--r21-login-photo-h, 34dvh) + 12px), 72dvh) !important;
    padding-top: 18px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-focus body.audience-developer #auth-screen.login-open .auth-panel__inner {
    max-height: min(calc(var(--spp-visual-height, 100dvh) - 8px), 72dvh) !important;
  }

  /* Password field: samakan bingkai, padding, dan geometri dengan username. */
  html.platform-android body.audience-staff #auth-screen #login-password-field,
  html.platform-android body.audience-developer #auth-screen #login-password-field {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-field,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field input#login-password,
  html.platform-android body.audience-developer #auth-screen #login-password-field input#login-password {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 58px 0 56px !important;
    border: 1px solid rgba(255,255,255,.40) !important;
    border-radius: 18px !important;
    outline: 0 !important;
    color: #fff !important;
    caret-color: #fff !important;
    background: rgba(255,255,255,.12) url("../assets/wali-password-icon.png") 18px center / 22px 22px no-repeat !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 58px !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field input#login-password::placeholder,
  html.platform-android body.audience-developer #auth-screen #login-password-field input#login-password::placeholder {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-password-field .password-eye,
  html.platform-android body.audience-developer #auth-screen #login-password-field .password-eye {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
  }

  /* Username biar tetap sejajar persis dengan password. */
  html.platform-android body.audience-staff #auth-screen #login-username,
  html.platform-android body.audience-developer #auth-screen #login-username {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 18px 0 56px !important;
    border: 1px solid rgba(255,255,255,.40) !important;
    border-radius: 18px !important;
    background-position: 18px center !important;
    background-size: 22px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 58px !important;
  }
}

/* R25 — default avatar baru sudah simetris, pakai center murni di semua tampilan. */
.student-avatar--default > img,
.guardian-avatar.is-default > img,
.tpi-student-avatar.is-default > img,
.figma-avatar.is-default > img {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

/* ========================================================================== */
/* v3.4.2 R26 — konsistensi login Staff + avatar lintas aplikasi              */
/* ========================================================================== */
@media (max-width: 900px) {
  html.platform-android body.audience-staff #auth-screen #login-username,
  html.platform-android body.audience-developer #auth-screen #login-username,
  html.platform-android body.audience-staff #auth-screen #login-password,
  html.platform-android body.audience-developer #auth-screen #login-password {
    font-weight: 700 !important;
  }

  html.platform-android body.audience-staff #auth-screen #login-username::placeholder,
  html.platform-android body.audience-developer #auth-screen #login-username::placeholder,
  html.platform-android body.audience-staff #auth-screen #login-password::placeholder,
  html.platform-android body.audience-developer #auth-screen #login-password::placeholder {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }
}

/* Aset default v3.4.2 sudah sama untuk Staff dan Wali serta simetris. */
.student-avatar--default > img,
.guardian-avatar.is-default > img,
.tpi-student-avatar.is-default > img,
.figma-avatar.is-default > img {
  object-position: 50% 50% !important;
  transform: none !important;
}


/* ========================================================================== */
/* v3.4.2 R27 FINAL — login keyboard, unified lower green, calm pickers       */
/* ========================================================================== */
@media (max-width: 900px) {
  /* Warna bawah login menyatu dengan ujung panel; tidak ada blok hijau kontras. */
  html.platform-android body.audience-staff #auth-screen,
  html.platform-android body.audience-developer #auth-screen,
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel {
    background-color: #005b38 !important;
  }
  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel__inner {
    background: linear-gradient(160deg, #087f49 0%, #006b3e 48%, #005b38 100%) !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: 24px !important;
    scroll-padding-bottom: 150px !important;
  }

  /* Realme 5i / WebView keyboard: sediakan viewport nyata yang dapat discroll.
     Hanya aktif selama input memperoleh fokus; setelah keyboard tutup layout kembali. */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-focus body.audience-developer #auth-screen.login-open .auth-panel {
    position: fixed !important;
    z-index: 60 !important;
    top: calc(var(--spp-visual-offset-top, 0px) + 88px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(var(--spp-visual-height, 100dvh) - 88px) !important;
    max-height: calc(var(--spp-visual-height, 100dvh) - 88px) !important;
    overflow: hidden !important;
    background: #005b38 !important;
  }
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-focus body.audience-developer #auth-screen.login-open .auth-panel__inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: max(150px, calc(env(safe-area-inset-bottom, 0px) + 110px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  /* Picker tetap mudah ditap, tetapi gesture vertikal diprioritaskan untuk scroll. */
  html.platform-android select,
  html.platform-android input[type="date"],
  html.platform-android input[type="month"] {
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Kartu kelas: setelah eyebrow "Kelas" dihapus, jaga jarak judul tetap rapi. */
.role-group-card > span > strong:first-child {
  margin-top: 0 !important;
}

/* ========================================================================== */
/* v3.4.3 R28 FINAL — rounded picker only, keyboard scroll, staff initials    */
/* ========================================================================== */
@media (max-width: 900px) {
  /* Android select wajib melalui custom rounded picker. Pointer ke select asli
     dimatikan agar WebView tidak dapat memunculkan dialog native kotak. Label
     .field tetap menerima gesture sehingga scroll vertikal tetap natural. */
  html.platform-android select {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  html.platform-android label:has(select),
  html.platform-android .field:has(select) {
    cursor: pointer !important;
    touch-action: pan-y !important;
  }

  /* Satu gaya popup saja: rounded, sedikit lebih tebal, tanpa tampilan native. */
  html.platform-android .r23-select-overlay {
    z-index: 10080 !important;
  }
  html.platform-android .r23-select-panel {
    width: min(92vw, 640px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 22px 58px rgba(0, 35, 24, .24) !important;
  }
  html.platform-android .r23-select-panel > header {
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid #dce6e1 !important;
    background: #fff !important;
  }
  html.platform-android .r23-select-panel > header strong {
    font-weight: 800 !important;
  }
  html.platform-android .r23-select-list {
    padding: 12px !important;
    gap: 12px !important;
    background: #fff !important;
  }
  html.platform-android .r23-select-option {
    min-height: 76px !important;
    padding: 0 18px !important;
    border: 1px solid #d7e0dc !important;
    border-radius: 20px !important;
    background: #fff !important;
    font-weight: 600 !important;
  }
  html.platform-android .r23-select-option > span {
    font-weight: 600 !important;
  }
  html.platform-android .r23-select-option.is-selected {
    border-color: #a6d7b8 !important;
    background: #eff9f3 !important;
  }

  /* Realme 5i: saat keyboard aktif, buat panel login satu scroller penuh dan
     sediakan ruang virtual di bawah tombol agar tombol Masuk dapat digeser ke
     atas keyboard tanpa menutup keyboard terlebih dahulu. */
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-focus body.audience-developer #auth-screen.login-open .auth-panel {
    position: fixed !important;
    z-index: 70 !important;
    top: var(--spp-visual-offset-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--spp-visual-height, 100dvh) !important;
    max-height: var(--spp-visual-height, 100dvh) !important;
    overflow: hidden !important;
    background: #005b38 !important;
  }
  html.platform-android.android-keyboard-focus body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-focus body.audience-developer #auth-screen.login-open .auth-panel__inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: max(320px, 44vh, calc(env(safe-area-inset-bottom, 0px) + 260px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-padding-top: 18px !important;
    scroll-padding-bottom: 320px !important;
  }
}

/* Staff tanpa foto sendiri selalu menggunakan inisial, bukan ilustrasi siswa. */
.user-avatar--profile-initials {
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  flex: 0 0 76px !important;
  place-items: center !important;
  border: 2px solid #d7e2dc !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #087a4b !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}
.staff-profile-avatar {
  overflow: hidden !important;
  border-radius: 50% !important;
}
.staff-profile-avatar > img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* ========================================================================== */
/* v3.4.3 R29 — Staff fixed keyboard mode + unified lower green              */
/* ========================================================================== */
@media (max-width: 900px) {
  /* Normal login Staff: satu bidang hijau sampai navigation bar dan tidak
     dapat di-scroll. Ini menghilangkan strip warna berbeda di bawah catatan. */
  html.platform-android body.audience-staff #auth-screen,
  html.platform-android body.audience-developer #auth-screen {
    background: #00663c !important;
  }

  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel {
    overflow: hidden !important;
    background: #00663c !important;
  }

  html.platform-android body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android body.audience-developer #auth-screen.login-open .auth-panel__inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
    touch-action: manipulation !important;
    background: linear-gradient(180deg, #00834b 0%, #007345 42%, #00663c 100%) !important;
  }

  /* R28 menggunakan fokus sebagai scroller; R29 hanya mengaktifkan mode khusus
     jika visualViewport benar-benar mengecil karena keyboard. */
  html.platform-android.android-keyboard-focus:not(.android-keyboard-open) body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-focus:not(.android-keyboard-open) body.audience-developer #auth-screen.login-open .auth-panel {
    top: var(--r21-login-photo-h) !important;
    bottom: 0 !important;
    height: auto !important;
  }

  html.platform-android.android-keyboard-focus:not(.android-keyboard-open) body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-focus:not(.android-keyboard-open) body.audience-developer #auth-screen.login-open .auth-panel__inner {
    height: 100% !important;
    min-height: 100% !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: hidden !important;
  }

  /* Keyboard terbuka: panel berpindah ke visual viewport, tetapi tetap FIXED
     dan tanpa scroll. Spacing dikompakkan agar username, password, dan Masuk
     dapat dipakai langsung seperti referensi Realme 5i. */
  html.platform-android.android-keyboard-open body.audience-staff #auth-screen.login-open .auth-panel,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen.login-open .auth-panel {
    position: fixed !important;
    z-index: 80 !important;
    top: var(--spp-visual-offset-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--spp-visual-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--spp-visual-height, 100dvh) !important;
    overflow: hidden !important;
    background: #00663c !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen.login-open .auth-panel__inner,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen.login-open .auth-panel__inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 20px 8px !important;
    overflow: hidden !important;
    border-radius: 28px 28px 0 0 !important;
    background: linear-gradient(180deg, #00834b 0%, #007345 42%, #00663c 100%) !important;
    transform: none !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen .auth-back,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen .auth-back {
    margin-bottom: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen .login-school-mark,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen .login-school-mark {
    margin-bottom: 6px !important;
    gap: 9px !important;
    font-size: .66rem !important;
    line-height: 1.2 !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen .login-school-mark img,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen .login-school-mark img {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen .auth-panel__inner > h2,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen .auth-panel__inner > h2 {
    margin-bottom: 3px !important;
    font-size: clamp(1.5rem, 6.2vw, 1.82rem) !important;
    line-height: 1.04 !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen #login-mode-help,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen #login-mode-help {
    margin-bottom: 8px !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen #login-form,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen #login-form {
    gap: 9px !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen #login-username,
  html.platform-android.android-keyboard-open body.audience-staff #auth-screen #login-password,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen #login-username,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen #login-password {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen #login-form > .button--primary,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen #login-form > .button--primary {
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 2px !important;
  }

  html.platform-android.android-keyboard-open body.audience-staff #auth-screen .login-security-note,
  html.platform-android.android-keyboard-open body.audience-developer #auth-screen .login-security-note {
    margin-top: 7px !important;
    font-size: .64rem !important;
    line-height: 1.2 !important;
  }
}

/* ========================================================================== */
/* v3.4.4 R30 — Alumni search, success feedback, recovery, support WhatsApp   */
/* ========================================================================== */

.support-whatsapp-settings {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid #d7e5de;
  border-radius: 18px;
  background: #f7fbf9;
}
.support-whatsapp-settings .section-heading { margin-bottom: 4px; }
.support-whatsapp-settings h4 { margin: 2px 0 0; }
.support-whatsapp-settings .field { margin-top: 12px; }

.alumni-index-student {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.alumni-index-student .profile-card__body { min-width: 0; }
.alumni-index-student .profile-card__body p { margin-top: 4px; }
.alumni-student-results:empty,
.alumni-year-results:empty { display: none; }

/* Pemulihan akun: satu kartu yang tidak menimpa field login di belakang. */
.account-recovery-simple {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px 15px;
  align-items: start;
}
.account-recovery-simple .account-recovery-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, #0aa46e, #08774f);
  font-size: 1.25rem;
  font-weight: 900;
}
.account-recovery-simple > div:nth-child(2) { min-width: 0; }
.account-recovery-simple > div:nth-child(2) > strong {
  display: block;
  margin-bottom: 5px;
  color: #17231f;
  font-size: 1.02rem;
}
.account-recovery-simple > div:nth-child(2) > p {
  margin: 0;
  color: var(--muted, #667085);
  line-height: 1.55;
}
.account-recovery-simple > .button,
.account-recovery-simple > small {
  grid-column: 1 / -1;
}
.account-recovery-simple > small {
  margin: -2px 0 0;
  text-align: center;
}

/* R30: sukses/error kembali tampil pada APK Staff. Dibuat di atas agar tidak
   bertabrakan dengan navigation bar atau keyboard Android. */
@media (max-width: 900px) {
  html.platform-android body.audience-staff #toast-region,
  html.platform-android body.audience-guardian #toast-region {
    display: grid !important;
    z-index: 12050 !important;
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    right: 50% !important;
    bottom: auto !important;
    width: min(92vw, 430px) !important;
    transform: translateX(50%) !important;
  }
  html.platform-android .toast {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(11, 117, 75, .97) !important;
    box-shadow: 0 12px 32px rgba(0, 45, 29, .24) !important;
  }
  html.platform-android .toast--error {
    background: rgba(151, 45, 45, .97) !important;
  }
  html.platform-android .account-recovery-simple {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 0 2px !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================
   4F5S_STAFF_FORGOT_PASSWORD_UI_FIX
   APK Staff:
   - Lupa kata sandi selalu terlihat.
   - Berada di atas tombol Masuk.
   - Tidak overlap dengan tombol submit.
   ========================================================== */

html.platform-android body.audience-staff
#auth-screen #login-form #forgot-password-button {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  float: none !important;

  width: max-content !important;
  max-width: 100% !important;
  min-height: 32px !important;

  margin: 0 8px 8px auto !important;
  padding: 4px 2px !important;

  transform: none !important;
  translate: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  z-index: 3 !important;

  line-height: 1.25 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html.platform-android body.audience-staff
#auth-screen #login-form
> .button.button--primary[type="submit"] {
  display: flex !important;
  position: relative !important;

  width: 100% !important;

  margin-top: 0 !important;

  transform: none !important;

  z-index: 1 !important;
}

html.platform-android body.audience-staff
#auth-screen #login-form .form-error:empty {
  display: none !important;
}

/* ==========================================================
   4F5S2_FORGOT_PASSWORD_TEXT_VISIBLE

   Final Android Staff login fix.
   Tombol sudah berada di atas MASUK.
   Rule ini memaksa teks benar-benar terlihat.
   ========================================================== */

html.platform-android body.audience-staff
#auth-screen #login-form #forgot-password-button,
html.platform-android body.audience-staff
#auth-screen #login-form #forgot-password-button.text-button {

  display: block !important;

  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;

  margin:
    2px
    10px
    10px
    auto !important;

  padding:
    6px
    2px !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  box-shadow: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  font-style: normal !important;

  line-height: 24px !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;

  text-indent: 0 !important;
  text-align: right !important;
  text-decoration: none !important;
  text-transform: none !important;

  white-space: nowrap !important;

  overflow: visible !important;

  clip: auto !important;
  clip-path: none !important;

  transform: none !important;
  translate: none !important;
  scale: none !important;

  filter: none !important;
  mix-blend-mode: normal !important;

  pointer-events: auto !important;

  z-index: 50 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/*
 * Jaga tombol MASUK tetap terpisah dari tombol lupa sandi.
 */
html.platform-android body.audience-staff
#auth-screen #login-form
> button.button.button--primary[type="submit"] {

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  margin:
    0
    0
    0
    0 !important;

  z-index: 1 !important;
}

/*
 * Jangan sisakan slot kosong dari error login kalau belum ada error.
 */
html.platform-android body.audience-staff
#auth-screen #login-form
#login-error:empty {

  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TPI_V25_5_FINAL_CSS_START */
html,body{overflow-anchor:none!important}
#modal-root,.modal,.modal__content,.choice-list,.promotion-list,.table-wrap,.stage-list{overflow-anchor:none!important}

/* Universal modal */
.modal-root.is-hidden{display:none!important}
.modal-root:not(.is-hidden){
  position:fixed!important;inset:0!important;z-index:10000!important;
  display:grid!important;place-items:center!important;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
  background:rgba(4,31,27,.60)!important;overflow:hidden!important;
}
.modal-root:not(.is-hidden) .modal{
  position:relative!important;inset:auto!important;
  width:min(620px,calc(100vw - 24px))!important;
  height:auto!important;min-height:0!important;max-height:min(80dvh,760px)!important;
  margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;
  border-radius:24px!important;overflow:hidden!important;background:#fff!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;transform:none!important;
}
.modal-root:not(.is-hidden) .modal.modal--wide{width:min(780px,calc(100vw - 24px))!important;max-height:82dvh!important}
.modal-root:not(.is-hidden) .modal.modal--confirm{width:min(520px,calc(100vw - 24px))!important;max-height:64dvh!important}
.modal-root:not(.is-hidden) .modal__header{
  position:relative!important;top:auto!important;flex:0 0 auto!important;
  min-height:0!important;height:auto!important;padding:18px 20px 16px!important;margin:0!important;
  background:#fff!important;border-bottom:1px solid #dde7e4!important;
}
.modal-root:not(.is-hidden) .modal__header h2,.modal-root:not(.is-hidden) .modal__header h3{margin:2px 0 0!important}
.modal-root:not(.is-hidden) .modal__content{
  display:block!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  padding:18px 20px 22px!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;justify-content:flex-start!important;align-content:start!important;
}
.modal-root:not(.is-hidden) .modal__content>.stack,.modal-root:not(.is-hidden) .modal__content>form{margin-top:0!important;padding-top:0!important}
.modal-root:not(.is-hidden) .modal__close{flex:0 0 auto!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:50%!important}
.modal-root:not(.is-hidden) .modal__content .modal-choice-list,.modal-root:not(.is-hidden) .modal__content .choice-list{
  max-height:min(42dvh,420px)!important;overflow-y:auto!important;
}
.modal-root:not(.is-hidden) .modal--confirm .modal__content{padding-top:16px!important;padding-bottom:18px!important}

/* Selection rows */
.choice-list>label,.waiver-choice-list>label,.promotion-row,.payment-check-row,.tpi-v255-recipient-row{
  box-sizing:border-box!important;min-height:74px!important;margin:0!important;padding:12px 14px!important;gap:12px!important;
  align-items:center!important;overflow:hidden!important;overflow-anchor:none!important;transform:none!important;
  transition:background-color .14s ease,border-color .14s ease!important;
}
.choice-list>label>span,.waiver-choice-list>label>span,.promotion-row>span,.payment-check-row>span,.tpi-v255-recipient-text{
  min-width:0!important;overflow:hidden!important;
}
.choice-list input[type="checkbox"],.choice-list input[type="radio"],.waiver-choice-list input[type="checkbox"],
.promotion-row input[type="checkbox"],.payment-check-row input[type="checkbox"]{
  flex:0 0 auto!important;box-sizing:border-box!important;transform:none!important;outline:none!important;box-shadow:none!important;
}
input[type="checkbox"]:focus,input[type="checkbox"]:focus-visible,input[type="radio"]:focus,input[type="radio"]:focus-visible{
  outline:none!important;box-shadow:none!important;transform:none!important;
}
input[type="checkbox"]:active,input[type="radio"]:active{transform:none!important}

/* Ellipsis */
.profile-card__body{min-width:0!important}
.profile-card__body h3,.tpi-v255-recipient-row strong,.tpi-v255-recipient-row small,.cash-student-meta,.student-arrears-card summary strong{
  display:block!important;max-width:100%!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
}
.tpi-v255-inline-full{
  display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;text-align:left!important;color:inherit!important;font:inherit!important;
}
.tpi-v255-inline-full small{display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}

/* TU guardian actions */
body.role-tu .tpi-v14-guardian-actions,body.role-tu .tpi-guardian-account-actions{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:center!important;
}
body.role-tu .tpi-v14-guardian-actions .button,body.role-tu .tpi-guardian-account-actions .button{
  width:100%!important;min-width:0!important;margin:0!important;white-space:nowrap!important;
}

.tpi-v255-person-card{min-height:0!important}
button.tpi-v255-readonly-card{
  appearance:none!important;-webkit-appearance:none!important;width:100%!important;text-align:left!important;
  color:inherit!important;font:inherit!important;cursor:pointer!important;transform:none!important;
}
button.tpi-v255-readonly-card:active{transform:none!important}

/* Installment native renderer */
#tpi-installment-rules [data-tpi-installment-rule-list]{display:grid!important;gap:12px!important}
#tpi-installment-rules [data-tpi-installment-rule-form]{padding:16px!important;margin:0!important;border-radius:18px!important;overflow-anchor:none!important}
#tpi-installment-rules [data-tpi-installment-rule-form] .tpi-installment-dependent{display:none!important}
#tpi-installment-rules [data-tpi-installment-rule-form]:has(input[name="enabled"]:checked) .tpi-installment-dependent,
#tpi-installment-rules [data-tpi-installment-rule-form].tpi-v255-installment-enabled .tpi-installment-dependent{display:flex!important}
#tpi-installment-rules input[name="enabled"],#tpi-installment-rules input[name="flexibleAmount"],#tpi-installment-rules input[name="finalMustSettle"]{
  max-width:52px!important;min-width:52px!important;width:52px!important;height:30px!important;
}
#tpi-installment-rules input[name="maxInstallments"]{max-width:140px!important}
.tpi-wf-launch,.tpi-pro-floating-action,.tpi-professional-fab,.floating-workflow-action{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
}

/* Finance */
.tpi-v255-finance-search{margin:0 0 14px!important;position:relative!important;z-index:1!important}
.table-wrap{overflow-x:auto!important}
.data-table{min-width:760px}
.data-table td,.data-table th{vertical-align:middle!important;padding:12px 14px!important}
.tpi-v255-table-full{
  display:block!important;max-width:170px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
  border:0!important;background:transparent!important;padding:0!important;margin:0!important;color:inherit!important;
  font:inherit!important;text-align:left!important;cursor:pointer!important;
}
.tpi-v255-full-text{font-size:17px!important;line-height:1.55!important;overflow-wrap:anywhere!important;white-space:pre-wrap!important}

/* Receipt actions */
.tpi-receipt-actions,.tpi-v14-receipt-actions{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(0,1.18fr)!important;gap:8px!important;align-items:stretch!important;
}
.tpi-receipt-actions .button,.tpi-v14-receipt-actions .button{
  width:100%!important;min-width:0!important;padding-inline:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

/* Arrears */
.tpi-v255-arrears-groups{gap:12px!important}
.tpi-v255-arrears-card summary{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important}
.tpi-v255-arrears-card summary span{min-width:0!important}
.tpi-v255-arrears-card summary em{grid-column:2!important;margin-top:2px!important}

/* Audit log */
body.role-headmaster .audit-card,body.role-wakepsek .audit-card,body.role-headmaster .audit-item,body.role-wakepsek .audit-item,
body.role-headmaster [data-audit-card],body.role-wakepsek [data-audit-card]{
  padding:18px!important;border-radius:20px!important;gap:10px!important;
}

/* Read-only detail */
.tpi-v255-detail-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:0!important}
.tpi-v255-detail-grid>div{min-width:0!important;padding:12px!important;border-radius:14px!important;background:#f4f8f7!important}
.tpi-v255-detail-grid .span-full{grid-column:1/-1!important}
.tpi-v255-detail-grid dt{font-size:12px!important;color:#6f7e7a!important;margin-bottom:4px!important}
.tpi-v255-detail-grid dd{margin:0!important;font-weight:700!important;overflow-wrap:anywhere!important}
.tpi-v255-readonly-note{margin:14px 0 0!important;color:#6f7e7a!important}

/* Smooth Staff login: transform/opacity only */
body.audience-staff #auth-screen .auth-hero,body.audience-staff #auth-screen .auth-panel,
body.audience-developer #auth-screen .auth-hero,body.audience-developer #auth-screen .auth-panel{
  transition-property:transform,opacity!important;transition-duration:240ms,180ms!important;
  transition-timing-function:cubic-bezier(.22,.61,.36,1),ease-out!important;will-change:transform,opacity!important;
}
body.audience-staff #auth-screen.login-open .auth-panel__inner,body.audience-developer #auth-screen.login-open .auth-panel__inner{
  scroll-behavior:auto!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}
body.audience-staff #auth-screen.login-open input:focus,body.audience-staff #auth-screen.login-open textarea:focus,
body.audience-developer #auth-screen.login-open input:focus,body.audience-developer #auth-screen.login-open textarea:focus{
  outline:2px solid rgba(8,123,88,.30)!important;outline-offset:0!important;
}
html:not(.android-keyboard-open) body:not(.audience-guardian) #app-shell{transform:none!important}
body:not(.audience-guardian) #main-content,body:not(.audience-guardian) .main-content,body:not(.audience-guardian) .app-main{scroll-margin-top:0!important}

@media(max-width:700px){
  .modal-root:not(.is-hidden){padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important}
  .modal-root:not(.is-hidden) .modal{width:calc(100vw - 20px)!important;max-height:80dvh!important;border-radius:22px!important}
  .modal-root:not(.is-hidden) .modal.modal--wide{width:calc(100vw - 20px)!important;max-height:82dvh!important}
  .modal-root:not(.is-hidden) .modal.modal--confirm{width:calc(100vw - 28px)!important;max-height:62dvh!important}
  .modal-root:not(.is-hidden) .modal__header{padding:16px 16px 14px!important}
  .modal-root:not(.is-hidden) .modal__content{padding:16px!important}
  .tpi-v255-detail-grid{grid-template-columns:1fr!important}
  .tpi-v255-detail-grid .span-full{grid-column:auto!important}
  .tpi-receipt-actions,.tpi-v14-receipt-actions{grid-template-columns:1fr .7fr 1.18fr!important}
}
/* TPI_V25_5_FINAL_CSS_END */

/* TPI_V25_8_PROFESSIONAL_FINAL_START */

/* Kenaikan Kelas + Dispensasi: checkbox tetap stabil tanpa ring/kotak hijau tambahan. */
.promotion-row input[type="checkbox"],
.waiver-choice-list input[type="checkbox"]{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  width:20px!important;height:20px!important;
  min-width:20px!important;max-width:20px!important;
  padding:0!important;margin:0 8px 0 0!important;
  outline:0!important;outline-offset:0!important;
  box-shadow:none!important;filter:none!important;transform:none!important;
  accent-color:#087b58!important;
}
.promotion-row input[type="checkbox"]:focus,
.promotion-row input[type="checkbox"]:focus-visible,
.waiver-choice-list input[type="checkbox"]:focus,
.waiver-choice-list input[type="checkbox"]:focus-visible{
  outline:0!important;box-shadow:none!important;
}
.promotion-row:has(input[type="checkbox"]:focus),
.promotion-row:has(input[type="checkbox"]:focus-visible),
.waiver-choice-list>label:has(input[type="checkbox"]:focus),
.waiver-choice-list>label:has(input[type="checkbox"]:focus-visible){
  outline:0!important;box-shadow:none!important;
}

/* Switch compact konsisten: 44 x 24. */
#tpi-installment-rules input[name="enabled"],
#tpi-installment-rules input[name="flexibleAmount"],
#tpi-installment-rules input[name="finalMustSettle"],
body.role-tu [data-tpi-guardian-content] input[type="checkbox"],
body.role-tu .social-config-card input[type="checkbox"]{
  -webkit-appearance:none!important;appearance:none!important;
  position:relative!important;box-sizing:border-box!important;
  width:44px!important;min-width:44px!important;max-width:44px!important;
  height:24px!important;min-height:24px!important;max-height:24px!important;
  padding:2px!important;margin:0!important;
  border:1px solid #b8c7c2!important;border-radius:999px!important;
  background:#dbe4e1!important;outline:0!important;box-shadow:none!important;
  transition:background-color .18s ease,border-color .18s ease!important;
}
#tpi-installment-rules input[name="enabled"]::before,
#tpi-installment-rules input[name="flexibleAmount"]::before,
#tpi-installment-rules input[name="finalMustSettle"]::before,
body.role-tu [data-tpi-guardian-content] input[type="checkbox"]::before,
body.role-tu .social-config-card input[type="checkbox"]::before{
  content:""!important;display:block!important;position:absolute!important;
  width:18px!important;height:18px!important;left:2px!important;top:2px!important;
  margin:0!important;border:0!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 1px 4px rgba(15,23,42,.22)!important;
  transform:translateX(0)!important;transition:transform .18s ease!important;
}
#tpi-installment-rules input[name="enabled"]::after,
#tpi-installment-rules input[name="flexibleAmount"]::after,
#tpi-installment-rules input[name="finalMustSettle"]::after,
body.role-tu [data-tpi-guardian-content] input[type="checkbox"]::after,
body.role-tu .social-config-card input[type="checkbox"]::after{
  content:none!important;display:none!important;
}
#tpi-installment-rules input[name="enabled"]:checked,
#tpi-installment-rules input[name="flexibleAmount"]:checked,
#tpi-installment-rules input[name="finalMustSettle"]:checked,
body.role-tu [data-tpi-guardian-content] input[type="checkbox"]:checked,
body.role-tu .social-config-card input[type="checkbox"]:checked{
  background:#087b58!important;border-color:#087b58!important;
}
#tpi-installment-rules input[name="enabled"]:checked::before,
#tpi-installment-rules input[name="flexibleAmount"]:checked::before,
#tpi-installment-rules input[name="finalMustSettle"]:checked::before,
body.role-tu [data-tpi-guardian-content] input[type="checkbox"]:checked::before,
body.role-tu .social-config-card input[type="checkbox"]:checked::before{
  transform:translateX(20px)!important;
}

/* Atur Angsuran dibuat ringkas: teks rekomendasi/saran tidak ditampilkan. */
#tpi-installment-rules [data-tpi-installment-rule-form] .muted,
#tpi-installment-rules [data-tpi-installment-rule-form] small.muted{
  display:none!important;
}

/* OFF = hanya nominal + switch utama. ON = field lanjutan tampil. */
#tpi-installment-rules [data-tpi-installment-rule-form] .tpi-installment-dependent{
  display:none!important;
}
#tpi-installment-rules [data-tpi-installment-rule-form]:has(input[name="enabled"]:checked) .tpi-installment-dependent,
#tpi-installment-rules [data-tpi-installment-rule-form].tpi-v255-installment-enabled .tpi-installment-dependent{
  display:flex!important;
}
#tpi-installment-rules [data-tpi-installment-rule-form] label:has(input[type="checkbox"]){
  min-height:38px!important;gap:12px!important;align-items:center!important;
}

/* Audit full ID tetap rapi walau panjang. */
.tpi-human-audit-card details p{
  overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.45!important;
}
.tpi-human-audit-card details summary{cursor:pointer!important;}

/* Alumni list is visibly interactive, but remains read-only. */
button.tpi-v255-readonly-card{
  cursor:pointer!important;
}
button.tpi-v255-readonly-card:focus-visible{
  outline:2px solid rgba(8,123,88,.22)!important;
  outline-offset:2px!important;
}

/* TPI_V25_8_PROFESSIONAL_FINAL_END */

/* TPI_V25_9_FUNCTIONAL_ROLE_START */

.choice-grid input[type="checkbox"],
.choice-list input[type="checkbox"],
.promotion-row input[type="checkbox"],
.waiver-choice-list input[type="checkbox"],
.payment-check-row input[type="checkbox"]{
  -webkit-appearance:auto!important;appearance:auto!important;box-sizing:border-box!important;
  width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;
  min-height:20px!important;max-height:20px!important;margin:0 10px 0 0!important;padding:0!important;
  border:0!important;outline:0!important;outline-offset:0!important;box-shadow:none!important;
  filter:none!important;transform:none!important;accent-color:#087b58!important;
}
.choice-grid input[type="checkbox"]::before,.choice-grid input[type="checkbox"]::after,
.choice-list input[type="checkbox"]::before,.choice-list input[type="checkbox"]::after,
.promotion-row input[type="checkbox"]::before,.promotion-row input[type="checkbox"]::after,
.waiver-choice-list input[type="checkbox"]::before,.waiver-choice-list input[type="checkbox"]::after,
.payment-check-row input[type="checkbox"]::before,.payment-check-row input[type="checkbox"]::after{
  content:none!important;display:none!important;
}
.choice-grid input[type="checkbox"]:focus,.choice-grid input[type="checkbox"]:focus-visible,
.choice-list input[type="checkbox"]:focus,.choice-list input[type="checkbox"]:focus-visible,
.promotion-row input[type="checkbox"]:focus,.promotion-row input[type="checkbox"]:focus-visible,
.waiver-choice-list input[type="checkbox"]:focus,.waiver-choice-list input[type="checkbox"]:focus-visible,
.payment-check-row input[type="checkbox"]:focus,.payment-check-row input[type="checkbox"]:focus-visible{
  outline:0!important;box-shadow:none!important;transform:none!important;
}
.choice-grid label:has(input[type="checkbox"]:focus),
.choice-grid label:has(input[type="checkbox"]:focus-visible),
.choice-list label:has(input[type="checkbox"]:focus),
.choice-list label:has(input[type="checkbox"]:focus-visible),
.promotion-row:has(input[type="checkbox"]:focus),
.waiver-choice-list>label:has(input[type="checkbox"]:focus){
  outline:0!important;box-shadow:none!important;
}

/* Same 44x24 switch language as approved Atur Angsuran. */
.tpi-switch{
  -webkit-appearance:none!important;appearance:none!important;position:relative!important;
  box-sizing:border-box!important;width:44px!important;min-width:44px!important;max-width:44px!important;
  height:24px!important;min-height:24px!important;max-height:24px!important;padding:2px!important;margin:0!important;
  border:1px solid #b8c7c2!important;border-radius:999px!important;background:#dbe4e1!important;
  outline:0!important;box-shadow:none!important;transition:background-color .18s ease,border-color .18s ease!important;
}
.tpi-switch::before{
  content:""!important;display:block!important;position:absolute!important;width:18px!important;height:18px!important;
  left:2px!important;top:2px!important;margin:0!important;border:0!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 1px 4px rgba(15,23,42,.22)!important;
  transform:translateX(0)!important;transition:transform .18s ease!important;
}
.tpi-switch::after{content:none!important;display:none!important}
.tpi-switch:checked{background:#087b58!important;border-color:#087b58!important}
.tpi-switch:checked::before{transform:translateX(20px)!important}

.tpi-selection-heading{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:12px!important;margin-bottom:10px!important;
}
.tpi-selection-heading>strong{min-width:0!important}
.tpi-selection-heading>small{flex:0 0 auto!important;margin:0!important;white-space:nowrap!important}

.tpi-v259-alumni-edit-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;align-items:center!important;padding:10px 12px!important;
}
.tpi-v259-alumni-open{
  min-width:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:12px!important;align-items:center!important;padding:0!important;margin:0!important;border:0!important;
  background:transparent!important;color:inherit!important;font:inherit!important;text-align:left!important;cursor:pointer!important;
}
.tpi-v259-alumni-open .profile-card__body{min-width:0!important}
.tpi-v259-alumni-edit{min-width:64px!important}

.tpi-v259-arrears-list{gap:12px!important}
.tpi-v259-arrears-card summary{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:12px!important;align-items:center!important;
}
.tpi-v259-arrears-card summary>span{min-width:0!important}
.tpi-v259-arrears-card summary strong{
  display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
}
.tpi-v259-arrears-card summary em{
  grid-column:2!important;margin:0!important;font-size:12px!important;color:#087b58!important;
}
.tpi-v259-arrears-line{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:start!important;
}
.tpi-v259-arrears-line>span:first-child{min-width:0!important}
.tpi-v259-arrears-remaining{text-align:right!important;white-space:nowrap!important}
.tpi-v259-arrears-remaining small{display:block!important}

/* Remove only the safely-discovered executive task-center component. */
body.role-headmaster .professional-task-grid,
body.role-wakepsek .professional-task-grid{display:none!important}

/* TPI_V25_9_FUNCTIONAL_ROLE_END */

/* TPI_V25_10_ARREARS_UI_STABILITY_START */

/* TU Akun Wali: keep actions side-by-side even on compact screens. */
.tpi-guardian-account-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  width:max-content!important;
}
.tpi-guardian-account-actions .button{
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:9px 10px!important;
  white-space:nowrap!important;
  font-size:12px!important;
}
td:has(> .tpi-guardian-account-actions){
  min-width:142px!important;
}

/* Tunggakan overview: whole class/alumni card is the action. */
.tpi-v2510-arrears-overview{
  display:grid!important;
  gap:0!important;
}
.tpi-v2510-arrears-group{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:108px!important;
  padding:20px!important;
  border:0!important;
  border-bottom:1px solid #dbe7e2!important;
  border-radius:0!important;
  background:#fff!important;
  color:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.tpi-v2510-arrears-group:first-child{border-radius:18px 18px 0 0!important}
.tpi-v2510-arrears-group:last-child{border-radius:0 0 18px 18px!important;border-bottom:0!important}
.tpi-v2510-arrears-group:only-child{border-radius:18px!important}
.tpi-v2510-arrears-group>span{display:grid!important;gap:4px!important;min-width:0!important}
.tpi-v2510-arrears-group small{color:#6b7d76!important;font-size:12px!important}
.tpi-v2510-arrears-group strong{font-size:17px!important}
.tpi-v2510-arrears-group em{font-style:normal!important;color:#62746d!important;font-size:12px!important}
.tpi-v2510-arrears-group>b{color:#00885f!important;white-space:nowrap!important;font-size:15px!important}

/* One-open-at-a-time native accordion detail. */
.tpi-v2510-arrears-list{display:grid!important;gap:10px!important}
.tpi-v2510-arrears-student{padding:0!important;overflow:hidden!important}
.tpi-v2510-arrears-student summary{
  list-style:none!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto auto!important;
  gap:10px!important;
  align-items:center!important;
  min-height:76px!important;
  padding:12px 14px!important;
  cursor:pointer!important;
}
.tpi-v2510-arrears-student summary::-webkit-details-marker{display:none!important}
.tpi-v2510-arrears-student summary>span{min-width:0!important}
.tpi-v2510-arrears-student summary strong{
  display:block!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
}
.tpi-v2510-arrears-student summary small{display:block!important;color:#61746c!important}
.tpi-v2510-arrears-student summary>b{color:#00885f!important;white-space:nowrap!important}
.tpi-v2510-arrears-student summary>i{
  font-style:normal!important;font-size:22px!important;color:#698078!important;
  transition:transform .16s ease!important;
}
.tpi-v2510-arrears-student[open] summary>i{transform:rotate(90deg)!important}
.tpi-v2510-arrears-body{
  display:grid!important;
  gap:0!important;
  padding:0 14px 14px!important;
  border-top:1px solid #e4ece8!important;
}
.tpi-v2510-arrears-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:start!important;
  padding:13px 0!important;
  border-bottom:1px solid #edf2ef!important;
}
.tpi-v2510-arrears-line>span:first-child{display:grid!important;gap:3px!important;min-width:0!important}
.tpi-v2510-arrears-line small{color:#6b7d76!important;line-height:1.35!important}
.tpi-v2510-arrears-value{text-align:right!important;white-space:nowrap!important}
.tpi-v2510-arrears-value small{display:block!important}
.tpi-v2510-arrears-total{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:12px!important;padding:14px 0 2px!important;color:#086f51!important;
}

/* TU Alumni: no ALUMNI badge; use the space for name + Edit. */
.tpi-v2510-alumni-tu-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:10px 12px!important;
}
.tpi-v2510-alumni-open{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  min-width:0!important;
  padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  color:inherit!important;font:inherit!important;text-align:left!important;cursor:pointer!important;
}
.tpi-v2510-alumni-open .profile-card__body{min-width:0!important}
.tpi-v2510-alumni-edit{min-width:64px!important}

/* Correct role scope: role-* classes are on #app-shell, not body. */
#app-shell.role-treasurer [class*="professional-task"],
#app-shell.role-headmaster [class*="professional-task"],
#app-shell.role-wakepsek [class*="professional-task"],
#app-shell.role-treasurer section:has(.professional-task-grid),
#app-shell.role-headmaster section:has(.professional-task-grid),
#app-shell.role-wakepsek section:has(.professional-task-grid){
  display:none!important;
}

/* Atur Angsuran: one main page scroll only. No nested list scrollbar that can reset. */
#tpi-installment-rules{
  overflow:visible!important;
  overflow-anchor:none!important;
}
#tpi-installment-rules [data-tpi-installment-rule-list]{
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  overflow-y:visible!important;
  overscroll-behavior:auto!important;
  scrollbar-gutter:auto!important;
  scroll-behavior:auto!important;
  contain:none!important;
}
#tpi-installment-rules [data-tpi-installment-rule-form]{
  overflow-anchor:none!important;
}

/* Preserve approved compact installment switches. */
#tpi-installment-rules input[name="enabled"],
#tpi-installment-rules input[name="flexibleAmount"],
#tpi-installment-rules input[name="finalMustSettle"]{
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
}

/* TPI_V25_10_ARREARS_UI_STABILITY_END */

/* TPI_V25_11_ARREARS_ID_SWITCH_START */

.tpi-dashboard-wali-switch-row{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.tpi-dashboard-wali-switch-row>span{
  min-width:0!important;
}

input.tpi-switch[name="showPromos"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  position:relative!important;
  box-sizing:border-box!important;
  flex:0 0 44px!important;
  align-self:center!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #b8c7c2!important;
  border-radius:999px!important;
  background:#dbe4e1!important;
  outline:0!important;
  box-shadow:none!important;
  vertical-align:middle!important;
  transform:none!important;
  transition:background-color .18s ease,border-color .18s ease!important;
}
input.tpi-switch[name="showPromos"]::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  box-sizing:border-box!important;
  width:18px!important;
  height:18px!important;
  left:3px!important;
  top:50%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(15,23,42,.20)!important;
  transform:translate(0,-50%)!important;
  transition:transform .18s ease!important;
}
input.tpi-switch[name="showPromos"]::after{
  content:none!important;
  display:none!important;
}
input.tpi-switch[name="showPromos"]:checked{
  background:#087b58!important;
  border-color:#087b58!important;
}
input.tpi-switch[name="showPromos"]:checked::before{
  transform:translate(20px,-50%)!important;
}
input.tpi-switch[name="showPromos"]:focus,
input.tpi-switch[name="showPromos"]:focus-visible,
input.tpi-switch[name="showPromos"]:active{
  outline:0!important;
  box-shadow:none!important;
}

/* TPI_V25_11_ARREARS_ID_SWITCH_END */