:root {
  --font-main: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-page: #f0f2f5;
  --bg-card: #ffffff;
  --border-light: #e5e7eb;
  --text-dark: #1a1d23;
  --text-mid: #4b5563;
  --text-muted: #9ca3af;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --brand-primary: #667eea;
  --brand-secondary: #764ba2;
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --sidebar-bg: #111827;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-active: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  --credit: #059669;
  --debit: #dc2626;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background: var(--bg-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-secondary); }

/* ===== App shell (match project) ===== */
#wrapper { display: flex; width: 100%; align-items: stretch; min-height: 100vh; }
#sidebar-wrapper {
  min-width: 240px; max-width: 240px;
  background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column;
  z-index: 1010; box-shadow: var(--shadow-md);
  transition: transform .25s ease;
}
.sidebar-heading {
  padding: 1.5rem 1.1rem 1.1rem;
  display: flex; align-items: center; gap: 10px;
}
.brand-logo-box {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 10px;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(102,126,234,.35);
  font-weight: 800; font-size: .85rem; color: #fff;
}
.brand-text-wrap { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-org {
  font-size: .58rem; font-weight: 700; color: #9ca3af;
  letter-spacing: .4px; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-title {
  font-size: .88rem; font-weight: 800; color: #fff;
  letter-spacing: .2px; line-height: 1.3;
}
.sidebar-rule {
  border: none; border-top: 1px solid rgba(255,255,255,.08);
  margin: 0 14px 12px; opacity: 1;
}
.menu-label {
  padding: 0 20px; margin: 8px 0 6px;
  font-size: .62rem; font-weight: 800; color: #6b7280;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.nav-scroll { flex: 1; overflow-y: auto; padding-bottom: 1rem; }
.nav-group { margin: 2px 0; }
.nav-group-toggle {
  width: calc(100% - 12px);
  margin: 2px 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #d1d5db;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background .2s, color .2s;
}
.nav-group-toggle:hover {
  background: var(--sidebar-hover);
  color: #fff;
}
.nav-group.is-open > .nav-group-toggle {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.nav-group-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.nav-group-label i {
  font-size: .95rem;
  opacity: .75;
  text-transform: none;
  letter-spacing: 0;
}
.nav-group-chevron {
  font-size: .75rem;
  opacity: .65;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.nav-group.is-open > .nav-group-toggle .nav-group-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-group-body {
  display: none;
  padding: 0 0 4px;
}
.nav-group.is-open > .nav-group-body { display: block; }
.nav-group-body .list-group-item-custom {
  padding: 9px 12px 9px 18px;
  font-size: .8rem;
}
.list-group-item-custom {
  background: transparent; color: #9ca3af; border: none;
  padding: 10px 14px; font-weight: 600; font-size: .82rem;
  margin: 3px 10px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; transition: all .2s;
}
.list-group-item-custom i { font-size: 1.05rem; opacity: .7; }
.list-group-item-custom:hover {
  background: var(--sidebar-hover); color: #fff;
  transform: translateX(4px); text-decoration: none;
}
.list-group-item-custom:hover i,
.list-group-item-custom.active i { opacity: 1; }
.list-group-item-custom.active {
  background: var(--sidebar-active); color: #fff;
  box-shadow: 0 4px 12px rgba(102,126,234,.35);
}
.list-group-item-custom.danger { color: #f87171; }
.list-group-item-custom.danger:hover { color: #fecaca; }
form.logout-form { margin: 0; }
button.list-group-item-custom {
  width: calc(100% - 20px);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  appearance: none;
}

.org-switch { padding: 0 14px 8px; }
.org-switch label {
  display: block; font-size: .62rem; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b7280; margin-bottom: 6px;
}
.org-switch select {
  width: 100%; padding: .5rem .6rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28); color: #fff; font: inherit; font-size: .8rem;
}

#page-content-wrapper {
  width: 100%; min-width: 0;
  display: flex; flex-direction: column;
  min-height: 100vh; background: var(--bg-page);
  overflow-x: clip;
}
.app-chrome-sticky { position: sticky; top: 0; z-index: 1020; }
:root { --app-chrome-h: 3.75rem; }
.top-navbar {
  background: var(--bg-card); padding: 10px 16px;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-light);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.top-navbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.btn-sidebar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border-light); background: #fff;
  color: var(--text-dark); font-size: 1.25rem; cursor: pointer; flex-shrink: 0;
}
.nav-icon-box {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(102,126,234,.06);
  border: 1px solid rgba(102,126,234,.15);
  color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.navbar-title-block { min-width: 0; }
.navbar-title-block h5 {
  margin: 0; font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.4px; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(52vw, 420px);
}
.navbar-desc-sub {
  display: block; margin-top: 2px;
  font-size: .7rem; font-weight: 600; color: var(--text-muted); letter-spacing: .3px;
}
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; margin-right: 4px; vertical-align: middle;
  animation: blinker 2s linear infinite;
}
@keyframes blinker { 50% { opacity: .3; } }

.profile-box {
  display: flex; align-items: center; gap: 10px;
  background: #f8f9fb; border: 1px solid var(--border-light);
  border-radius: 50px; padding: 5px 8px 5px 12px;
  transition: background .2s; flex-shrink: 0;
}
.profile-box:hover { background: #f3f4f6; }
.profile-meta { text-align: right; }
.profile-meta .name { font-weight: 700; font-size: .85rem; line-height: 1.2; color: var(--text-dark); }
.profile-meta .role {
  font-weight: 700; font-size: .65rem; color: var(--brand-primary);
  letter-spacing: .4px; margin-top: 2px;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar-circle {
  background: var(--brand-gradient); color: #fff;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
  box-shadow: 0 2px 8px rgba(102,126,234,.3);
}
.header-account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.header-account .logout-form { display: flex; }
.header-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-dark);
  font-family: inherit;
  font-weight: 700;
  font-size: .78rem;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.header-account-btn i { font-size: .95rem; }
.header-account-btn:hover {
  background: #f8fafc;
  border-color: #d6dbe3;
  color: var(--text-dark);
  text-decoration: none;
}
.header-account-btn.is-active {
  background: rgba(102, 126, 234, .1);
  border-color: rgba(102, 126, 234, .38);
  color: var(--brand-primary);
}
.header-account-btn.is-out {
  color: #b42318;
  border-color: #f3c7c3;
  background: #fff;
}
.header-account-btn.is-out:hover {
  background: #fef2f2;
  border-color: #f0a8a2;
  color: #9f1d14;
}

.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(17,24,39,.45); z-index: 1005;
  opacity: 0; transition: opacity .2s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

.content-area { flex: 1; padding: 16px 0 28px; min-width: 0; }
.main-container { width: 100%; max-width: 1280px; padding: 0 16px; margin: 0 auto; min-width: 0; }
body.layout-wide .main-container {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}
body.layout-wide .content-area {
  padding-top: 4px;
}
body.layout-wide .topbar {
  margin-bottom: .35rem;
}
body.layout-wide .results-sheet {
  width: 100%;
}

.footer-enterprise {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 14px 24px; margin-top: auto;
}
.footer-brand { font-size: .82rem; color: var(--text-mid); text-align: center; }
.footer-brand-name { font-weight: 800; color: var(--text-dark); }

/* ===== Page chrome ===== */
.topbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.topbar h1 {
  margin: 0; font-size: 1.55rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--text-dark);
}
.topbar .meta { color: var(--text-mid); font-size: .88rem; font-weight: 500; }
.topbar .actions { margin-top: 0; }
.eyebrow {
  margin: 0 0 .25rem; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-primary); font-weight: 800;
}

.card {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: .95rem; margin: 0 0 .9rem; font-weight: 700;
  display: flex; align-items: center; gap: .45rem;
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap;
}
.card-head h3 { margin: 0; }

.grid { display: grid; gap: 1rem; }
.grid.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-gradient);
}
.stat .label {
  color: var(--text-muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.stat .value {
  font-size: 1.45rem; margin-top: .4rem; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat .value.accent { color: var(--brand-primary); }
.stat .hint { margin-top: .35rem; font-size: .75rem; color: var(--text-muted); font-weight: 500; }
.stat-icon {
  position: absolute; right: 14px; top: 14px;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(102,126,234,.08); color: var(--brand-primary); font-size: 1.1rem;
}
.stat-bank::before { background: #667eea; }
.stat-cash::before { background: #11998e; }
.stat-total::before { background: var(--brand-gradient); }
.stat-month::before { background: #f6c23e; }
.stat-flow.positive .value { color: var(--ok); }
.stat-flow.negative .value { color: var(--danger); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td {
  padding: .72rem .55rem; border-bottom: 1px solid var(--border-light);
  text-align: left; vertical-align: top;
}
table.data th {
  color: var(--text-muted); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .05em; background: #f8f9fb;
}
table.data tbody tr:hover td { background: #f9fafb; }
table.data tr.void td { opacity: .45; text-decoration: line-through; }

.scd { display: flex; flex-direction: column; gap: 1rem; }
.scd-banner {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
}
.scd-banner.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.scd-banner.is-info { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.scd-banner a { font-weight: 800; }
.scd-status {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .9fr);
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: #fff;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid #94a3b8;
}
.scd-status.is-complete { border-left-color: var(--ok); }
.scd-status.is-wait { border-left-color: var(--info); }
.scd-status.is-leave { border-left-color: #d97706; }
.scd-status.is-pending { border-left-color: #64748b; }
.scd-kicker {
  display: block;
  margin: 0 0 .3rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scd-status h2 {
  margin: 0 0 .3rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.scd-status p { margin: 0; color: var(--text-mid); line-height: 1.5; }
.scd-note {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: .75rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
}
.scd-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
}
.scd-facts div {
  padding: .7rem .75rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.scd-facts dt {
  margin: 0 0 .15rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scd-facts dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.scd-facts a { font-size: .75rem; font-weight: 700; }
.scd-panel {
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.scd-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #eef2f7;
}
.scd-panel-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.scd-panel-head p { margin: .2rem 0 0; font-size: .82rem; font-weight: 600; color: var(--text-mid); }
.scd-toolbar {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.scd-toolbar input[type="date"] { width: auto; min-height: 2.4rem; }
.scd-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid #eef2f7;
  background: #fbfcfe;
}
.scd-stat {
  min-width: 0;
}
.scd-stat span {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
}
.scd-stat strong {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.scd-stat.is-ok strong { color: var(--ok); }
.scd-stat.is-late strong { color: var(--warn); }
.scd-stat.is-leave strong { color: #c2410c; }
.scd-stat.is-miss strong { color: #64748b; }
.scd-table-wrap { overflow-x: auto; }
.scd-roster { width: 100%; border-collapse: collapse; font-size: .9rem; }
.scd-roster th {
  text-align: left;
  padding: .65rem 1.15rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
}
.scd-roster td {
  padding: .8rem 1.15rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.scd-roster tbody tr:last-child td { border-bottom: 0; }
.scd-roster tbody tr:hover td { background: #f8fafc; }
.scd-person { display: flex; flex-direction: column; gap: .1rem; }
.scd-person strong { font-weight: 800; color: var(--text-dark); }
.scd-person span { font-size: .78rem; font-weight: 600; color: var(--text-mid); }
.scd-time { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.scd-time.is-empty { font-weight: 600; color: var(--text-muted); }
.scd-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--brand-primary);
  font-size: .85rem;
}
.scd-map:hover { background: #e0e7ff; color: var(--brand-secondary); }
.scd-state {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
}
.scd-state.is-ok { background: #ecfdf5; color: #047857; }
.scd-state.is-warn { background: #fffbeb; color: #b45309; }
.scd-state.is-bad { background: #fef2f2; color: #b91c1c; }
.scd-lead {
  margin: 0;
  padding: .85rem 1.15rem 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.scd-periods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.scd-period { padding: 1rem 1.15rem 1.1rem; }
.scd-period + .scd-period { border-left: 1px solid #eef2f7; }
.scd-period h3 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 800; }
.scd-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.scd-metric {
  padding: .55rem .6rem;
  border-radius: 10px;
  background: #f8fafc;
}
.scd-metric span { display: block; font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.scd-metric strong { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.scd-metric.is-ok strong { color: var(--ok); }
.scd-metric.is-late strong { color: var(--warn); }
.scd-metric.is-bad strong { color: var(--danger); }
.scd-metric.is-leave strong { color: #c2410c; }
.scd-metric.is-zero strong { color: #94a3b8; font-weight: 700; }
.scd-sum-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.scd-sum-table th,
.scd-sum-table td { padding: .7rem .85rem; border-bottom: 1px solid #eef2f7; }
.scd-sum-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f8fafc;
}
.scd-sum-table td.is-num,
.scd-sum-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.scd-sum-table td.is-hot { color: var(--danger); font-weight: 800; }
.scd-sum-table td.is-warn { color: #b45309; font-weight: 800; }
.scd-sum-table td.is-zero { color: #cbd5e1; font-weight: 600; }
.scd-sum-table tbody tr:hover td { background: #f8fafc; }
.scd-sum-table tfoot td { font-weight: 800; background: #f8fafc; }
.scd-empty { padding: 1.25rem 1.15rem; color: var(--text-mid); }
@media (max-width: 960px) {
  .scd-status, .scd-stats, .scd-periods, .scd-metrics { grid-template-columns: 1fr 1fr; }
  .scd-period + .scd-period { border-left: 0; border-top: 1px solid #eef2f7; }
  .scd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Senarai yuran bergrup pelajar */
.fee-list { table-layout: auto; width: 100%; }
.fee-list .fee-col-type { width: 1%; }
.fee-list .fee-th-type { white-space: nowrap; vertical-align: bottom; }
.fee-list .fee-type-sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 400;
  font-size: .9rem;
  line-height: 0;
}
.fee-list td:nth-child(3),
.fee-list th:nth-child(3) {
  white-space: nowrap;
  min-width: 10rem;
}
.fee-list .fee-col-money { width: 6.5rem; }
.fee-list .fee-col-status { width: 6rem; }
.fee-list .fee-col-action { width: 5.5rem; }
.fee-list .fee-col-class { width: 7rem; }
.fee-list .fee-group + .fee-group { border-top: 1px solid var(--border-light); }
.fee-list .fee-parent td { background: #fff; font-weight: 500; }
.fee-list .fee-parent:hover td { background: #f9fafb; }
.fee-list .fee-toggle:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin-right: .25rem; vertical-align: middle;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--text-muted); cursor: pointer; padding: 0;
  box-shadow: none;
}
.fee-list .fee-toggle:not(.btn):hover { background: #f3f4f6; color: var(--text); }
.fee-list .fee-toggle:not(.btn) .bi { transition: transform .15s ease; font-size: .85rem; }
.fee-list .fee-group.is-open > .fee-parent .fee-toggle:not(.btn) .bi { transform: rotate(90deg); }
.fee-list .fee-child { display: none; }
.fee-list .fee-group.is-open > .fee-child { display: table-row; }
.fee-list .fee-child td { background: #f8fafc; color: var(--text); font-weight: 400; }
.fee-list .fee-child:hover td { background: #f1f5f9; }
.fee-list .fee-child-label { padding-left: 2.1rem !important; }
.fee-list.has-focus .fee-group.is-dimmed {
  filter: blur(1.5px);
  opacity: .38;
  pointer-events: none;
  user-select: none;
  transition: opacity .2s ease, filter .2s ease;
}
.fee-list.has-focus .fee-group.is-dimmed .fee-child { display: none !important; }
.fee-list.has-focus .fee-group.is-focused {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--border-light), 0 8px 24px rgba(15, 23, 42, .06);
}
.fee-list.has-focus .fee-group.is-focused > .fee-parent td {
  background: #fff;
}
.fee-collect-table tr.fee-collect-focus td {
  background: #f0f7ff;
}
.pill.mixed { color: var(--warn); border-color: #fde68a; background: #fffbeb; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt-credit { color: var(--credit); font-weight: 700; }
.amt-debit { color: var(--debit); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid transparent;
  background: var(--brand-gradient); color: #fff;
  padding: .52rem 1rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: .88rem;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(102,126,234,.28);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102,126,234,.35);
  text-decoration: none; color: #fff;
}
.btn.secondary {
  background: #fff; color: var(--brand-primary);
  border-color: #d1d5db; box-shadow: none;
}
.btn.secondary:hover { background: #f8f9fb; color: var(--brand-secondary); }
.btn.danger { background: var(--danger); box-shadow: 0 4px 12px rgba(220,38,38,.25); }
.btn.ghost { background: transparent; color: var(--text-mid); border-color: transparent; box-shadow: none; }
.btn.small { padding: .32rem .7rem; font-size: .8rem; box-shadow: none; }
.btn i { font-size: 1em; }
.btn-whatsapp {
  background: #25D366;
  border-color: #1da851;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .32);
}
.btn-whatsapp:hover {
  background: #1ebe57;
  border-color: #1aa34a;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .4);
}

.flash {
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; border: 1px solid; font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: .55rem;
}
.flash.success { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.flash.error { background: #fef2f2; border-color: #fecaca; color: var(--danger); }
.flash.info { background: #fffbeb; border-color: #fde68a; color: var(--warn); }

.cat-fee-links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  max-width: 22rem;
}
.cat-fee-chip {
  display: inline-block;
  padding: .12rem .4rem;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: var(--text-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}
a.cat-fee-chip:hover {
  border-color: rgba(102,126,234,.45);
  background: #eef2ff;
  color: #3730a3;
}
.cat-fee-chip.is-off {
  opacity: .55;
  text-decoration: line-through;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: .78rem; color: var(--text-mid); margin-bottom: .3rem; font-weight: 700; }
label.inline { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
input, select, textarea {
  width: 100%; padding: .58rem .7rem;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--text-dark);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(102,126,234,.15);
}
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }

/* —— Student list summary —— */
.stu-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.stu-summary-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.stu-summary-card:hover {
  border-color: #c7d2fe;
  text-decoration: none;
  color: inherit;
}
.stu-summary-card.is-active {
  border-color: rgba(102,126,234,.5);
  box-shadow: 0 0 0 3px rgba(102,126,234,.12);
}
.stu-summary-label {
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stu-summary-value {
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--text-dark);
  line-height: 1.15;
}
.stu-summary-card.is-ok .stu-summary-value { color: var(--ok); }
.stu-summary-card.is-warn .stu-summary-value { color: #c2410c; }
@media (max-width: 575.98px) {
  .stu-summary { grid-template-columns: 1fr; }
}

/* —— Student create / edit form —— */
.stu-form { display: flex; flex-direction: column; gap: 1rem; max-width: 1120px; margin-left: auto; margin-right: auto; }
.stu-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 1rem;
  align-items: start;
}
.stu-form-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.stu-form-side {
  position: sticky;
  top: .75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stu-form-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stu-form-panel-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
  background: #fafbfc;
}
.stu-form-step {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-gradient);
}
.stu-form-panel-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.stu-form-panel-head p {
  margin: .2rem 0 0;
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 550;
}
.stu-form-panel-body { padding: 1.05rem 1.15rem 1.2rem; }
.stu-form-subhead {
  margin: 1.15rem 0 .65rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stu-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem .9rem;
}
.stu-field { min-width: 0; }
.stu-field.stu-span-2 { grid-column: 1 / -1; }
.stu-field label {
  display: block;
  margin-bottom: .3rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-mid);
}
.stu-field .req { color: var(--danger); }
.stu-check {
  display: inline-flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: .88rem;
  font-weight: 650;
  color: var(--text-dark);
  cursor: pointer;
}
.stu-check input {
  width: auto;
  margin-top: .15rem;
  accent-color: var(--brand-primary);
}
.stu-fee-box {
  margin-top: .9rem;
  padding: .85rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.stu-fee-packages {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.stu-fee-option {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  padding: .65rem .7rem;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.stu-fee-option:has(input:checked) {
  border-color: rgba(102,126,234,.55);
  box-shadow: 0 0 0 3px rgba(102,126,234,.1);
}
.stu-fee-option input { width: auto; margin-top: .2rem; accent-color: var(--brand-primary); }
.stu-fee-option strong { display: block; font-size: .86rem; font-weight: 800; }
.stu-fee-option small {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 550;
}
.stu-fee-estimate {
  margin-top: .15rem;
  padding-top: .75rem;
  border-top: 1px dashed #e2e8f0;
}
.stu-fee-estimate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .5rem;
  margin-bottom: .55rem;
}
.stu-fee-estimate-head strong {
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-dark);
}
.stu-fee-estimate-head span {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.stu-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.stu-fee-table th,
.stu-fee-table td {
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}
.stu-fee-table th {
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f8fafc;
}
.stu-fee-table tbody tr:last-child th,
.stu-fee-table tbody tr:last-child td { border-bottom: 0; }
.stu-fee-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}
.stu-fee-table td.num { color: var(--text-dark); }
.stu-fee-option-check {
  margin-top: .1rem;
}
.stu-fee-code {
  display: inline-block;
  margin-top: .35rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.3;
}
.stu-fee-note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .65rem 0 0;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: .74rem;
  line-height: 1.45;
  font-weight: 550;
}
.stu-fee-note i { flex-shrink: 0; margin-top: .12rem; }
.stu-fee-note span { min-width: 0; }
.stu-fee-note em { font-style: normal; font-weight: 750; }
.stu-fee-hint {
  margin: 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 550;
}
.stu-form-footer {
  position: sticky;
  bottom: .65rem;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 -6px 24px rgba(15,23,42,.08);
}
.stu-form-footer-note {
  margin: 0;
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 550;
}
.stu-form-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-left: auto;
}
.topbar .eyebrow a { color: inherit; }
.topbar .eyebrow a:hover { color: var(--brand-primary); }

@media (max-width: 959.98px) {
  .stu-form-layout { grid-template-columns: 1fr; }
  .stu-form-side { position: static; }
}
@media (max-width: 575.98px) {
  .stu-form-grid { grid-template-columns: 1fr; }
  .stu-field.stu-span-2 { grid-column: auto; }
  .stu-form-panel-body { padding: .9rem 1rem 1.05rem; }
  .stu-form-footer {
    bottom: .4rem;
    flex-direction: column;
    align-items: stretch;
  }
  .stu-form-footer-actions { margin-left: 0; }
  .stu-form-footer-actions .btn { flex: 1; justify-content: center; }
}

/* ===== Guardian form ===== */
.profile-form-page,
.gd-form-page {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.profile-form-page .stu-form,
.profile-form-page .gd-form,
.gd-form-page .stu-form,
.gd-form-page .gd-form {
  max-width: none;
}
.profile-form-tip .stu-form-panel-body,
.gd-form-tip .stu-form-panel-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.profile-form-tip-icon,
.gd-form-tip-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: var(--brand-primary);
  font-size: 1.05rem;
  margin-bottom: .15rem;
}
.profile-form-tip strong,
.gd-form-tip strong {
  font-size: .9rem;
  font-weight: 800;
}
.profile-form-tip p,
.gd-form-tip p {
  margin: 0 0 .55rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-mid);
  font-weight: 550;
}
.gd-form .stu-check {
  display: flex;
  margin-bottom: .85rem;
}
.gd-form-check-hint {
  display: block;
  margin-top: .15rem;
  font-size: .75rem;
  font-weight: 550;
  color: var(--text-muted);
}
.gd-form-portal {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  font-size: .8rem;
  color: var(--text-mid);
  margin-bottom: .75rem;
}
.gd-form-portal.is-on {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.gd-form-portal.is-off {
  background: #fffbeb;
  border-color: #fde68a;
}
.gd-form-portal strong {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  color: var(--text-dark);
}
.gd-form-portal code {
  font-size: .78rem;
  background: rgba(255,255,255,.7);
  padding: .05rem .28rem;
  border-radius: 4px;
}
.gd-form-portal em {
  font-style: normal;
  font-weight: 650;
  color: #b45309;
  font-size: .75rem;
}
.gd-form-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 650;
  color: var(--text-muted);
}
.gd-form .field-hint {
  margin: .35rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-weight: 550;
}
.gd-form .stu-form-step i { font-size: .85rem; }

/* Portal profile uses same template */
.portal-profile-page { max-width: 920px; }
.portal-main .portal-profile-page .stu-form-layout { grid-template-columns: 1fr; }
.portal-main .portal-profile-page .stu-form-side { position: static; }

/* Portal profil — paparan lengkap + borang */
.portal-profile { display: flex; flex-direction: column; gap: .9rem; }
.portal-profile-hero {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 1.05rem 1rem 1.1rem;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .94), rgba(11, 42, 91, .96) 55%, rgba(127, 29, 29, .55)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .42);
  box-shadow: 0 16px 36px rgba(11, 42, 91, .22);
}
.portal-profile-hero-ornament {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23e8c978' stroke-opacity='0.14' d='M28 2 L34 14 L46 14 L36 24 L40 36 L28 30 L16 36 L20 24 L10 14 L22 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  pointer-events: none;
}
.portal-profile-id {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.portal-profile-avatar {
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: .95rem;
  font-weight: 800;
  color: #0b2a5b;
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}
.portal-profile-kicker {
  margin: 0 0 .15rem;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .88);
}
.portal-profile-id h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #fff;
}
.portal-profile-login {
  margin: .25rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.78);
}
.portal-profile-login code {
  font-family: inherit;
  font-weight: 800;
  color: #e8c978;
  background: transparent;
}
.portal-profile-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .65rem;
}
.portal-profile-info-head .portal-card-title { margin: 0; }
.portal-profile-hero-actions {
  position: relative;
  z-index: 1;
  margin-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.portal-profile-edit-btn {
  background: linear-gradient(145deg, #d4af5a, #8f6d28) !important;
  border: 1px solid rgba(198, 160, 70, .55) !important;
  color: #fff !important;
}
.portal-profile-form-btns {
  display: flex;
  gap: .55rem;
}
.portal-profile-form-btns .btn {
  flex: 1;
  min-height: 2.9rem;
  justify-content: center;
}
.portal-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.portal-profile-metric {
  padding: .75rem .7rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line, #d7e0ec);
  box-shadow: 0 6px 16px rgba(11, 42, 91, .05);
}
.portal-profile-metric .k {
  display: block;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-muted, #5b6b7c);
}
.portal-profile-metric .v {
  display: block;
  margin-top: .25rem;
  font-size: .98rem;
  font-weight: 800;
  color: var(--p-brand-deep, #0b2a5b);
  line-height: 1.2;
  word-break: break-word;
}
.portal-profile-info .portal-card-title { margin-bottom: .65rem; }
.portal-profile-dl {
  margin: 0;
  display: grid;
  gap: .45rem;
}
.portal-profile-dl > div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: .5rem;
  align-items: baseline;
  padding: .35rem 0;
  border-bottom: 1px solid var(--p-line, #d7e0ec);
}
.portal-profile-dl > div:last-child { border-bottom: 0; }
.portal-profile-dl dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 750;
  color: var(--p-muted, #5b6b7c);
}
.portal-profile-dl dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--p-ink, #0f172a);
  word-break: break-word;
}
.portal-profile-dl a {
  color: var(--p-brand, #1a4d9e);
  font-weight: 750;
  text-decoration: none;
}
.portal-profile-edit-intro {
  margin: -.35rem 0 .85rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}
.portal-profile-form {
  display: flex;
  flex-direction: column;
  gap: .95rem;
}
.portal-profile-fieldset {
  margin: 0;
  padding: .85rem .85rem .95rem;
  border: 1px solid var(--p-line, #d7e0ec);
  border-radius: 14px;
  background: #fff;
}
.portal-profile-fieldset legend {
  padding: 0 .35rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-brand-deep, #0b2a5b);
}
.portal-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
.portal-profile-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
  min-width: 0;
}
.portal-profile-field span {
  font-size: .75rem;
  font-weight: 750;
  color: var(--p-muted, #5b6b7c);
}
.portal-profile-field span em {
  font-style: normal;
  color: var(--p-red, #b91c1c);
}
.portal-profile-field small {
  font-size: .72rem;
  font-weight: 600;
  color: var(--p-muted, #5b6b7c);
  line-height: 1.35;
}
.portal-profile-field input,
.portal-profile-field select,
.portal-profile-field textarea {
  min-height: 2.75rem;
  border-radius: 12px;
  border: 1px solid var(--p-line, #d7e0ec);
  padding: .55rem .7rem;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--p-ink, #0f172a);
  background: #fff;
}
.portal-profile-field textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.4;
}
.portal-profile-field input:focus,
.portal-profile-field select:focus,
.portal-profile-field textarea:focus {
  outline: none;
  border-color: var(--p-gold, #c6a046);
  box-shadow: 0 0 0 3px rgba(198, 160, 70, .18);
}
.portal-profile-check {
  flex-direction: row !important;
  align-items: center;
  gap: .55rem !important;
  padding: .35rem 0;
}
.portal-profile-check input {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  accent-color: var(--p-brand-deep, #0b2a5b);
}
.portal-profile-check span {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--p-ink, #0f172a) !important;
}
.portal-profile-hero-actions .btn.secondary {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(232, 201, 120, .4);
  color: #fff;
}
.portal-profile-form-actions p {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--p-muted, #5b6b7c);
}
.portal-profile-form-actions p em {
  font-style: normal;
  color: var(--p-red, #b91c1c);
  font-weight: 800;
}
.portal-profile-form-actions .btn {
  width: 100%;
  min-height: 2.9rem;
  justify-content: center;
}
@media (min-width: 420px) {
  .portal-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
  .portal-profile-field.is-full { grid-column: 1 / -1; }
}

/* Portal — profil pelajar (paparan profesional) */
.portal-stu {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.portal-stu-hero {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 1.15rem 1.05rem 1.15rem;
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(18, 58, 122, .96), rgba(11, 42, 91, .98) 52%, rgba(127, 29, 29, .5)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .45);
  box-shadow: 0 18px 40px rgba(11, 42, 91, .24);
}
.portal-stu-hero-ornament {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23e8c978' stroke-opacity='0.14' d='M28 2 L34 14 L46 14 L36 24 L40 36 L28 30 L16 36 L20 24 L10 14 L22 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  pointer-events: none;
}
.portal-stu-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .95rem;
}
.portal-stu-avatar {
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #0b2a5b;
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
}
.portal-stu-hero-copy { min-width: 0; }
.portal-stu-kicker {
  margin: 0 0 .2rem;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .9);
}
.portal-stu-hero h1 {
  margin: 0;
  font-size: clamp(1.2rem, 4.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: #fff;
}
.portal-stu-meta {
  margin: .4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  font-size: .8rem;
  font-weight: 650;
  color: rgba(255,255,255,.8);
}
.portal-stu-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.portal-stu-meta i { color: #e8c978; font-size: .85rem; }
.portal-stu-hero-actions {
  position: relative;
  z-index: 1;
  margin-top: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.portal-stu-hero-actions .btn.secondary {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(232, 201, 120, .4);
  color: #fff;
}

.portal-stu-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
@media (min-width: 420px) {
  .portal-stu-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.portal-stu-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .85rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f5f8fd);
  border: 1px solid var(--p-line, #d7e0ec);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .06);
}
.portal-stu-chip-ico {
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(11, 42, 91, .08), rgba(198, 160, 70, .14));
  color: var(--p-brand-deep, #0b2a5b);
  font-size: 1rem;
}
.portal-stu-chip .k {
  display: block;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-chip .v {
  display: block;
  margin-top: .15rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--p-brand-deep, #0b2a5b);
  line-height: 1.2;
  word-break: break-word;
}

.portal-stu-panel {
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--p-line, #d7e0ec);
  box-shadow: 0 10px 28px rgba(11, 42, 91, .06);
  overflow: hidden;
}
.portal-stu-panel-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, #f8fafc, #eef3f9);
  border-bottom: 1px solid var(--p-line, #d7e0ec);
}
.portal-stu-panel-ico {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #0b2a5b, #163a73);
  color: #e8c978;
  font-size: 1.05rem;
  box-shadow: 0 6px 14px rgba(11, 42, 91, .22);
}
.portal-stu-panel-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--p-brand-deep, #0b2a5b);
  letter-spacing: -.01em;
}
.portal-stu-panel-head p {
  margin: .12rem 0 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-grid {
  margin: 0;
  padding: .35rem .35rem .55rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 480px) {
  .portal-stu-grid { grid-template-columns: 1fr 1fr; }
}
.portal-stu-grid > div {
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(215, 224, 236, .7);
}
.portal-stu-grid > div.is-wide { grid-column: 1 / -1; }
.portal-stu-grid dt {
  margin: 0 0 .2rem;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-grid dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 750;
  color: var(--p-ink, #0f172a);
  line-height: 1.35;
  word-break: break-word;
}
.portal-stu-address {
  padding: .95rem 1rem .35rem;
}
.portal-stu-address > p {
  margin: 0;
  padding: .85rem .9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid var(--p-line, #d7e0ec);
  font-size: .9rem;
  font-weight: 700;
  color: var(--p-ink, #0f172a);
  line-height: 1.45;
}
.portal-stu-address ul {
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.portal-stu-address li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--p-line, #d7e0ec);
  font-size: .78rem;
  font-weight: 750;
  color: var(--p-brand-deep, #0b2a5b);
}
.portal-stu-address li span {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  background: #f1f5f9;
  color: var(--p-brand-deep, #0b2a5b);
  border: 1px solid var(--p-line, #d7e0ec);
}
.portal-stu-badge.is-warn {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}
.portal-stu-badge-note {
  display: inline-block;
  margin-left: .35rem;
  font-size: .8rem;
  font-weight: 650;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-footer-actions {
  display: flex;
  gap: .55rem;
  padding-bottom: .25rem;
}
.portal-stu-footer-actions .btn {
  flex: 1;
  min-height: 2.9rem;
  justify-content: center;
}
.portal-stu-panel-foot {
  padding: .35rem 1rem 1rem;
}
.portal-stu-panel-foot .btn {
  width: 100%;
  justify-content: center;
  min-height: 2.6rem;
}
.portal-stu-children {
  padding: .75rem .85rem 1rem;
}
.portal-stu-empty {
  margin: 0;
  padding: .85rem .9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid var(--p-line, #d7e0ec);
  font-size: .86rem;
  font-weight: 650;
  color: var(--p-muted, #5b6b7c);
}
.portal-stu-grid a {
  color: var(--p-brand, #1a4d9e);
  font-weight: 750;
  text-decoration: none;
}
.portal-stu-grid a:hover { text-decoration: underline; }




.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  border: 1px solid var(--border-light); background: #fff;
}
.pill.unpaid { color: var(--danger); border-color: #fecaca; background: #fef2f2; }
.pill.partial { color: var(--warn); border-color: #fde68a; background: #fffbeb; }
.pill.paid, .pill.open, .pill.A { color: var(--ok); border-color: #bbf7d0; background: #f0fdf4; }
.pill.B { color: var(--info); border-color: #bfdbfe; background: #eff6ff; }
.pill.C { color: var(--warn); border-color: #fde68a; background: #fffbeb; }
.pill.D, .pill.TH { color: var(--danger); border-color: #fecaca; background: #fef2f2; }
.pill.submitted { color: var(--warn); border-color: #fde68a; background: #fffbeb; }
.pill.approved, .pill.locked, .pill.reviewed { color: var(--ok); border-color: #bbf7d0; background: #f0fdf4; }
.pill.draft { color: var(--text-mid); border-color: #e2e8f0; background: #f8fafc; }

.guest {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(102,126,234,.22) 0%, transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(118,75,162,.18) 0%, transparent 50%),
    linear-gradient(160deg, #111827 0%, #1f2937 55%, #111827 100%);
}
.login-card {
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 2rem 1.85rem 1.85rem;
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
}
.login-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 1.4rem;
}
.login-brand h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.login-brand p { margin: .2rem 0 0; color: var(--text-muted); font-size: .85rem; font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: .85rem; }

.password-field {
  position: relative;
  display: flex;
  align-items: stretch;
}
.password-field input {
  width: 100%;
  padding-right: 2.75rem;
}
.password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}
.password-toggle:hover { color: var(--text-dark); background: rgba(0,0,0,.04); }
.password-toggle:focus-visible {
  outline: 2px solid rgba(102,126,234,.45);
  outline-offset: 1px;
}
.password-toggle[aria-pressed="true"] { color: var(--brand-primary); }
.password-field.has-error input {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.login-field-error {
  margin: .4rem 0 0;
  color: #b91c1c;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}
.login-remember input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex: 0 0 auto;
}

/* Pilih mode Guru / Ibu bapa (dual-role, satu login) */
.mode-pick {
  width: min(440px, 100%);
  margin: 0 auto;
}
.mode-pick-card {
  background: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 1.5rem 1.25rem 1.35rem;
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
}
.mode-pick-kicker {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8f6d28;
}
.mode-pick-card h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0b2a5b;
}
.mode-pick-lead {
  margin: .55rem 0 1.15rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  color: #5b6b7c;
}
.mode-pick-lead em { font-style: normal; font-weight: 800; color: #0b2a5b; }
.mode-pick-grid {
  display: grid;
  gap: .75rem;
  margin: 0;
}
.mode-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid #d7e0ec;
  background: linear-gradient(180deg, #fff, #f5f8fd);
  cursor: pointer;
  font: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mode-pick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(11, 42, 91, .1);
}
.mode-pick-btn.is-guru { border-color: rgba(11, 42, 91, .28); }
.mode-pick-btn.is-parent { border-color: rgba(11, 42, 91, .28); }
.mode-pick-ico {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: .35rem;
  font-size: 1.15rem;
}
.mode-pick-btn.is-guru .mode-pick-ico {
  background: linear-gradient(145deg, #163a73, #0b2a5b);
  color: #e8c978;
}
.mode-pick-btn.is-parent .mode-pick-ico {
  background: linear-gradient(145deg, #163a73, #0b2a5b);
  color: #e8c978;
}
.mode-pick-btn strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}
.mode-pick-btn > span:last-child {
  font-size: .8rem;
  font-weight: 600;
  color: #5b6b7c;
  line-height: 1.35;
}
.mode-pick-note {
  margin: 1rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: #5b6b7c;
  text-align: center;
}

.report-title { text-align: center; margin: 0 0 .25rem; font-weight: 800; letter-spacing: -.02em; }
.report-sub { text-align: center; color: var(--text-mid); margin: 0 0 1.25rem; line-height: 1.55; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.report-sheet { padding: 1.35rem 1.4rem 1.6rem; }
.report-header { margin-bottom: 1.1rem; }
.report-header .report-sub { margin-bottom: 0; }

/* Keputusan peperiksaan (BRG MARKAH) */
.results-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem 1.25rem;
  margin: .85rem 0 0;
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.results-meta div { margin: 0; }
.results-meta dt {
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 .15rem;
}
.results-meta dd { margin: 0; font-weight: 700; font-size: .9rem; }
.results-cols-panel {
  margin-bottom: 1rem;
  max-width: 640px;
  padding: 1rem 1.15rem 1.15rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  animation: resultsColsIn .22s ease;
}
.results-cols-panel[hidden] { display: none !important; }
@keyframes resultsColsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.results-cols-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: .95rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid #eef2f7;
}
.results-cols-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(102,126,234,.14), rgba(118,75,162,.1));
  color: var(--brand-primary);
  font-size: 1.05rem;
}
.results-cols-title {
  margin: 0 0 .2rem;
  font-weight: 800;
  font-size: .98rem;
  letter-spacing: -.01em;
  color: var(--text-dark);
}
.results-cols-lead {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-mid);
}
.results-cols-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.results-col-tile {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.results-col-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.results-col-tile-body {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 4.1rem;
  padding: .7rem .8rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #fafbfc;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.results-col-tile:hover .results-col-tile-body {
  border-color: #c7d2fe;
  background: #fff;
  box-shadow: 0 2px 8px rgba(102,126,234,.08);
}
.results-col-tile-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--text-mid);
  font-size: 1rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.results-col-tile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.results-col-tile-text strong {
  font-size: .88rem;
  font-weight: 750;
  color: var(--text-dark);
  letter-spacing: -.01em;
}
.results-col-tile-text small {
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.results-col-tile-check {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: .75rem;
  background: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.results-col-tile input:checked + .results-col-tile-body {
  border-color: #818cf8;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  box-shadow: 0 0 0 3px rgba(102,126,234,.12);
}
.results-col-tile input:checked + .results-col-tile-body .results-col-tile-icon {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}
.results-col-tile input:checked + .results-col-tile-body .results-col-tile-check {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.results-col-tile input:focus-visible + .results-col-tile-body {
  outline: 2px solid rgba(102,126,234,.45);
  outline-offset: 2px;
}
#resultsColsBtn[aria-expanded="true"] {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
@media (max-width: 575.98px) {
  .results-cols-grid { grid-template-columns: 1fr; }
  .results-cols-panel { max-width: none; }
}
.results-register { overflow-x: auto; max-width: 100%; }
table.results-grid {
  font-size: .72rem;
  min-width: 1100px;
  border-collapse: collapse;
}
table.results-grid th,
table.results-grid td {
  padding: .28rem .32rem;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  vertical-align: middle;
}
table.results-grid thead th {
  background: #f1f5f9;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
table.results-grid th.sub-head { min-width: 3.2rem; }
table.results-grid th.sub-m,
table.results-grid th.sub-g { font-size: .62rem; color: var(--text-muted); min-width: 1.6rem; }
table.results-grid th.kind-oral,
table.results-grid td.kind-oral { background: #f8fafc; }
table.results-grid thead th.kind-oral { background: #eef2ff; }
table.results-grid .col-nama {
  text-align: left;
  min-width: 11rem;
  max-width: 16rem;
  white-space: normal;
  font-weight: 600;
}
table.results-grid .col-bil { width: 2rem; text-align: center; color: var(--text-muted); }
table.results-grid .col-jantina { text-align: center; width: 3.2rem; }
table.results-grid .col-sum { font-weight: 700; background: #fffbeb; }
table.results-grid thead th.col-sum { background: #fef3c7; }
table.results-grid .col-gc { width: 2rem; text-align: center; color: var(--text-mid); }
table.results-grid tbody td {
  text-align: center;
}
table.results-grid tbody td.col-nama,
table.results-grid tbody td.col-mykid {
  text-align: left;
}
table.results-grid tbody td.num {
  text-align: center;
}
table.results-grid .g-cell {
  display: inline-block;
  min-width: 1.15rem;
  font-weight: 800;
  font-size: .7rem;
}
table.results-grid .g-A { color: var(--ok); }
table.results-grid .g-B { color: var(--info); }
table.results-grid .g-C { color: var(--warn); }
table.results-grid .g-D,
table.results-grid .g-TH { color: var(--danger); }
table.results-grid .res-lulus { font-weight: 700; color: var(--ok); }
table.results-grid .res-gagal { font-weight: 700; color: var(--danger); }
table.results-grid .res-th { color: var(--text-muted); }
.results-legend { margin: .85rem 0 0; font-size: .78rem; }

/* Optional columns — hidden until toggled */
table.results-grid .col-opt { display: none; }
table.results-grid.show-angka .col-angka { display: table-cell; }
table.results-grid.show-mykid .col-mykid { display: table-cell; }

@media (min-width: 1100px) {
  table.results-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  table.results-grid thead .sticky-col { background: #f1f5f9; z-index: 3; }
  table.results-grid .col-bil.sticky-col { left: 0; }
  table.results-grid.show-angka .col-angka.sticky-col { left: 2rem; }
  table.results-grid .col-nama.sticky-col { left: 2rem; }
  table.results-grid.show-angka .col-nama.sticky-col { left: 5.5rem; }
  table.results-grid tbody tr:hover .sticky-col { background: #f9fafb; }
}

.balance-strip {
  background: #f8f9fb;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: .9rem 1rem;
  margin-bottom: 1.15rem;
}
.balance-strip-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .65rem;
}
.balance-strip-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
}
.balance-chip {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: .7rem .85rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.balance-chip .k { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.balance-chip .v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.balance-chip.is-total { border-color: rgba(102,126,234,.35); background: rgba(102,126,234,.04); }
.balance-chip.is-total .v { color: var(--brand-primary); }

.report-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.report-col {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.report-col-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; padding: .9rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: #f8f9fb;
}
.report-col-head h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; }
.report-col-tag {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 6px;
}
.report-col-tag.credit { background: #ecfdf5; color: var(--credit); }
.report-col-tag.debit { background: #fef2f2; color: var(--debit); }
.report-col-sum {
  font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report-col-credit { border-top: 3px solid var(--credit); }
.report-col-debit { border-top: 3px solid var(--debit); }
.report-table { margin: 0; }
.report-table th, .report-table td { padding: .62rem .7rem; }
.report-table .col-bil { width: 2.4rem; color: var(--text-muted); }
.report-table .col-amt { width: 6.5rem; }
.report-table tfoot th {
  background: #f3f4f6; color: var(--text-dark); font-size: .78rem;
  text-transform: none; letter-spacing: 0; font-weight: 800;
}
.report-table tbody { flex: 1; }

.closing-panel {
  margin-top: 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem 1.2rem;
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}
.closing-panel-head { margin-bottom: .9rem; }
.closing-panel-head h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 800; }
.closing-panel-head .muted { margin: 0; font-size: .85rem; }
.closing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem;
}
.closing-card {
  display: flex; align-items: center; gap: .85rem;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.closing-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.closing-card.bank .closing-icon { background: rgba(102,126,234,.12); color: #667eea; }
.closing-card.cash .closing-icon { background: rgba(17,153,142,.12); color: #11998e; }
.closing-card.total .closing-icon { background: var(--brand-gradient); color: #fff; }
.closing-card.total {
  border-color: rgba(102,126,234,.35);
  background: linear-gradient(135deg, rgba(102,126,234,.06), rgba(118,75,162,.05));
}
.closing-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.closing-meta .k {
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.closing-meta .v {
  font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; line-height: 1.2;
}
.closing-card.total .closing-meta .v { color: var(--brand-primary); }

.sign-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 2.25rem; padding-top: .5rem;
}
.sign-box { text-align: center; }
.sign-line {
  border-bottom: 1px solid #9ca3af;
  height: 2.5rem; margin-bottom: .65rem;
}
.sign-box strong { font-size: .82rem; letter-spacing: .04em; }

@media (max-width: 991.98px) {
  .report-columns, .closing-grid, .balance-strip-grid, .sign-row { grid-template-columns: 1fr; }
}
.muted { color: var(--text-muted); }
.toolbar, .panel-toolbar {
  display: flex; gap: .55rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; align-items: flex-end;
}
.panel-toolbar {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.panel-toolbar input[type="number"],
.panel-toolbar input[type="search"],
.panel-toolbar select { min-width: 0; }
.panel-toolbar .field { display: flex; flex-direction: column; gap: .25rem; }
.panel-toolbar .field.grow { flex: 1; min-width: 160px; }
.panel-toolbar input[type="number"] { width: 6.5rem; }

/* Compact student/list filter card */
.student-filters,
.search-filters {
  display: flex; flex-wrap: nowrap; gap: .75rem;
  align-items: flex-end;
  padding: 1rem 1.15rem;
}
.student-filters .filter-main,
.search-filters .filter-main {
  display: flex; flex-wrap: nowrap; gap: .75rem;
  flex: 1; min-width: 0; align-items: flex-end;
}
.student-filters .filter-main .field.grow,
.search-filters .filter-main .field.grow { min-width: 0; }
.student-filters .field-class,
.search-filters .field-class {
  flex: 0 0 200px; width: 200px; min-width: 160px; max-width: 200px;
}
.search-filters .field-sm {
  flex: 0 0 auto; width: 7rem; min-width: 6rem;
}
.search-filters .field-md {
  flex: 0 0 auto; width: 10.5rem; min-width: 8rem;
}
.student-filters .filter-actions,
.search-filters .filter-actions {
  display: flex; flex-wrap: nowrap; gap: .45rem; align-items: center;
  flex: 0 0 auto;
}
.student-filters .filter-static,
.search-filters .filter-static {
  min-height: 2.45rem; display: flex; align-items: center;
  padding: 0 .15rem; font-weight: 700; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-input {
  position: relative; display: block; min-width: 0;
}
.search-input > i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; font-size: .95rem;
}
.search-input input {
  padding-left: 2.35rem;
  background: #f8f9fb;
  min-width: 0;
}
.search-input input:focus { background: #fff; }

@media (max-width: 640px) {
  .student-filters .field-class,
  .search-filters .field-class { flex-basis: 140px; width: 140px; min-width: 120px; }
  .student-filters .filter-actions .btn,
  .search-filters .filter-actions .btn { padding: .52rem .7rem; }
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.month-card {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.05rem 1.1rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .85rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.month-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #d1d5db;
}
.month-card.is-current {
  border-color: rgba(102,126,234,.45);
  box-shadow: 0 0 0 3px rgba(102,126,234,.12), var(--shadow-sm);
}
.month-card header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
}
.month-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; }
.badge-now {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  background: var(--brand-gradient); border-radius: 999px;
  padding: .28rem .6rem;
}
.month-metrics { margin: 0; display: grid; gap: .65rem; }
.month-metrics dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700; margin-bottom: .15rem;
}
.month-metrics dd {
  margin: 0; display: flex; flex-direction: column; gap: .1rem;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
.month-metrics dd.emphasis span:first-child { font-weight: 700; }
.month-metrics dd.total {
  font-size: 1.15rem; color: var(--brand-primary); font-weight: 800;
}
.month-card footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .7rem; border-top: 1px solid var(--border-light);
}

.empty-state { text-align: center; padding: 2.75rem 1.5rem; }
.empty-state .empty-icon {
  width: 56px; height: 56px; margin: 0 auto .85rem;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(102,126,234,.08); color: var(--brand-primary); font-size: 1.5rem;
}
.empty-state h3 { margin: 0 0 .35rem; font-weight: 800; }

.dash-layout {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 1rem; margin-top: 1rem;
}
.summary-list { margin: 0; padding: 0; list-style: none; }
.summary-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border-light); font-size: .9rem;
}
.summary-list li:last-child { border-bottom: none; }
.summary-list .label { color: var(--text-mid); font-weight: 500; }
.summary-list .value { font-weight: 700; font-variant-numeric: tabular-nums; }

.quick-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-top: 1rem;
}
.quick-action {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); background: #f8f9fb;
  color: var(--text-dark); font-weight: 700; font-size: .84rem;
  transition: border-color .15s, background .15s, transform .15s;
}
.quick-action:hover {
  background: #fff; border-color: rgba(102,126,234,.35);
  color: var(--brand-primary); text-decoration: none; transform: translateY(-1px);
}
.quick-action i {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; font-size: .95rem;
}

.txn-filters .search-wrap { position: relative; }
.txn-filters .search-wrap i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.txn-filters .search-wrap input { padding-left: 2rem; }

/* ===== Transactions ledger ===== */
.txn-topbar { align-items: flex-start; }
.txn-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  justify-content: flex-end;
}
.txn-month-nav {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.txn-month-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.5rem;
  line-height: 1.15;
  padding: 0 .35rem;
}
.txn-month-label strong {
  font-size: .92rem;
  font-weight: 800;
}
.txn-month-label span {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.txn-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.txn-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.txn-summary-k {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.txn-summary-v {
  font-size: 1.12rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
  letter-spacing: -.01em;
}
.txn-summary-s {
  font-size: .72rem;
  font-weight: 560;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txn-summary-card.is-in .txn-summary-v { color: var(--credit); }
.txn-summary-card.is-out .txn-summary-v { color: var(--debit); }
.txn-summary-card.is-close {
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
  border-color: #e2e8f0;
}
.txn-ledger { padding: 0; overflow: hidden; }
.txn-ledger-head {
  padding: .85rem 1.1rem;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
}
.txn-table-wrap { overflow-x: auto; }
.txn-table { margin: 0; }
.txn-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}
.txn-table td, .txn-table th { vertical-align: top; }
.txn-col-date { width: 3.6rem; }
.txn-col-receipt { width: 6.5rem; }
.txn-col-amt { width: 8.2rem; white-space: nowrap; }
.txn-col-bal { width: 8.5rem; }
.txn-col-act { width: 7.5rem; }
.txn-col-meta { width: 11rem; }
.txn-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  padding: .35rem 0;
  border-radius: var(--radius-sm);
  background: #f1f5f9;
  line-height: 1.1;
}
.txn-date-d {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.txn-date-m {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .03em;
}
.txn-desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .28rem;
}
.txn-desc-title {
  font-size: .9rem;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.35;
}
.txn-ref {
  font-size: .75rem;
  display: block;
}
.txn-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .84rem;
  line-height: 1.35;
}
.txn-receipt {
  font-weight: 700;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.txn-col-amt {
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.txn-col-bal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .12rem;
}
.txn-bal-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
}
.txn-bal-split {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
.txn-attach-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}
.txn-attach-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.txn-void { position: relative; }
.txn-void > summary {
  list-style: none;
  cursor: pointer;
}
.txn-void > summary::-webkit-details-marker { display: none; }
.txn-void-pop {
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 5;
  width: 15rem;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: .4rem;
}
.txn-void-pop label {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
}
.txn-void-pop input[type="text"] {
  width: 100%;
  font-size: .85rem;
}

.flow-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem;
}
.flow-chip {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.flow-chip .k { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.flow-chip .v { font-size: 1.15rem; font-weight: 800; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.flow-chip.in .v { color: var(--credit); }
.flow-chip.out .v { color: var(--debit); }

.row-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }
.attach-inline { display: inline-flex; align-items: center; gap: .35rem; }
.attach-inline input[type="file"] { width: 8.5rem; font-size: .72rem; padding: .28rem; }

.type-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 700; padding: .12rem .4rem;
  border-radius: 6px; background: #f3f4f6; color: var(--text-mid);
}
.type-tag.credit { background: #ecfdf5; color: var(--credit); }
.type-tag.debit { background: #fef2f2; color: var(--debit); }

.balance-run { color: var(--text-mid); font-weight: 600; }

@media (max-width: 991.98px) {
  #sidebar-wrapper {
    position: fixed; left: 0; top: 0; bottom: 0;
    min-width: 280px; max-width: 280px;
    transform: translateX(-105%);
  }
  #wrapper.sidebar-open #sidebar-wrapper {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,.28);
  }
  .btn-sidebar-toggle { display: inline-flex; }
  .navbar-desc-sub { display: none !important; }
  .profile-meta { display: none; }
  .header-account-btn span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .header-account-btn { width: 40px; padding: 0; }
  .grid.stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-layout, .form-grid, .split, .flow-bar, .quick-actions { grid-template-columns: 1fr; }
  .txn-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .txn-col-meta, .txn-col-receipt { display: none; }
}

@media (max-width: 575.98px) {
  .main-container { padding: 0 12px; }
  .top-navbar { padding: 10px 12px; }
  .grid.stats { grid-template-columns: 1fr; }
  .avatar-circle { width: 36px; height: 36px; }
  .txn-summary { grid-template-columns: 1fr 1fr; }
  .txn-topbar-actions { width: 100%; justify-content: stretch; }
  .txn-month-nav { flex: 1; justify-content: space-between; }
}

.att-legend { margin: 0 0 .75rem; font-size: .82rem; }
.att-register { overflow-x: auto; }
table.att-grid { font-size: .78rem; }
table.att-grid th.day, table.att-grid td.day {
  text-align: center;
  padding: .3rem .15rem;
  min-width: 1.6rem;
  font-variant-numeric: tabular-nums;
}
table.att-grid th.day.is-weekend { color: var(--text-muted); }
table.att-grid th.day.is-holiday,
table.att-grid td.day.is-holiday { background: #fff7ed; }
table.att-grid th.day.is-holiday { color: #c2410c; }
table.att-grid td.att-mark { font-weight: 800; }
table.att-grid td.att-mark.present { color: var(--ok); }
table.att-grid td.att-mark.absent { color: var(--danger); }
table.att-grid td.att-mark.late { color: var(--warn); }
table.att-grid td.att-mark.excused { color: var(--info); }
table.att-grid td.att-mark.released { color: #8f6d28; }

/* Attendance monthly report — mirror exams/results sheet */
.att-report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .65rem;
  margin: 0 0 .45rem;
  padding: .55rem .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-report-filter-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 9rem;
}
.att-report-filter-field.is-year { min-width: 5.5rem; width: 5.5rem; }
.att-report-filter-field.is-month { min-width: 8.5rem; }
.att-report-filter-field label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.att-report-filter-field select,
.att-report-filter-field input[type="number"] {
  margin: 0;
  min-height: 2.35rem;
}
.att-report-filter-static {
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  font-weight: 750;
  color: var(--text-dark);
}
.att-report-filter-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.att-report-sheet { margin-top: 0; }
.att-report-sheet .report-title { margin-bottom: .45rem; }
.att-report-sheet .results-meta { margin-top: .35rem; }
.att-report-sheet.report-sheet { padding: 1rem 1.1rem 1.15rem; }
body.print-page .att-report-sheet.report-sheet { padding-top: .5rem; }
body.print-page .att-report-sheet .report-title { margin-bottom: .35rem; }
body.print-page .att-report-sheet .results-meta { margin-top: .25rem; margin-bottom: .5rem; }
table.att-report-grid {
  font-size: .72rem;
  min-width: 980px;
  border-collapse: collapse;
  width: 100%;
}
table.att-report-grid th,
table.att-report-grid td {
  padding: .28rem .32rem;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  vertical-align: middle;
}
table.att-report-grid thead th {
  background: #f1f5f9;
  font-size: .68rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}
table.att-report-grid .col-bil {
  width: 2rem;
  text-align: center;
  color: var(--text-muted);
}
table.att-report-grid .col-nama {
  text-align: left;
  min-width: 11rem;
  max-width: 16rem;
  white-space: normal;
  font-weight: 600;
}
table.att-report-grid tbody td {
  text-align: center;
}
table.att-report-grid tbody td.col-nama {
  text-align: left;
}
table.att-report-grid th.day,
table.att-report-grid td.day {
  min-width: 1.45rem;
  padding: .22rem .12rem;
}
table.att-report-grid th.day.is-weekend,
table.att-report-grid td.day.is-weekend {
  background: #f3e8ff;
  color: #6b21a8;
}
table.att-report-grid thead th.day.is-weekend {
  background: #e9d5ff;
  color: #6b21a8;
}
table.att-report-grid th.day.is-off,
table.att-report-grid td.day.is-off {
  background: #ecfeff;
  color: #0e7490;
}
table.att-report-grid thead th.day.is-off {
  background: #cffafe;
  color: #0e7490;
  font-weight: 700;
}
table.att-report-grid td.day.is-weekend:not(.att-mark),
table.att-report-grid td.day.is-off:not(.att-mark) {
  opacity: 1;
}
table.att-report-grid .col-sum {
  font-weight: 700;
  background: #fffbeb;
}
table.att-report-grid thead th.col-sum { background: #fef3c7; }
table.att-report-grid .col-h { color: var(--ok); }
table.att-report-grid .col-t { color: var(--danger); }
table.att-report-grid td.att-mark.is-holiday,
table.att-report-grid td.day.is-holiday:not(.att-mark) {
  color: #c2410c;
}
table.att-report-grid th.day.is-holiday,
table.att-report-grid td.day.is-holiday {
  background: #fff7ed;
}
.att-report-swatch {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  margin-top: .65rem;
  font-size: .78rem;
  font-weight: 650;
  color: var(--text-mid);
}
.att-report-swatch span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.att-swatch {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  background: #fff;
}
.att-swatch.is-class { background: #fff; }
.att-swatch.is-off { background: #cffafe; border-color: #22d3ee; }
.att-swatch.is-weekend { background: #e9d5ff; border-color: #c084fc; }
.att-swatch.is-holiday { background: #fff7ed; border-color: #fdba74; }
@media (min-width: 1100px) {
  table.att-report-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  table.att-report-grid thead .sticky-col { background: #f1f5f9; z-index: 3; }
  table.att-report-grid .col-bil.sticky-col { left: 0; }
  table.att-report-grid .col-nama.sticky-col { left: 2rem; }
  table.att-report-grid tbody tr:hover .sticky-col { background: #f9fafb; }
}
@media (max-width: 575.98px) {
  .att-report-filters { align-items: stretch; }
  .att-report-filter-field,
  .att-report-filter-field.is-year,
  .att-report-filter-field.is-month { width: 100%; min-width: 0; }
  .att-report-filter-actions { margin-left: 0; width: 100%; }
  .att-report-filter-actions .btn { width: 100%; justify-content: center; }
}

/* ===== Penyata kehadiran pusat (sheet 16) ===== */
.att-summary-note { margin: -.35rem 0 .75rem; }
.att-summary-sheet { margin-top: 0; }
.att-summary-header .report-title { margin-bottom: .4rem; }
.att-summary-meta { margin-top: .3rem; }
.att-summary-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .65rem 0 1rem;
}
table.att-summary-grid,
table.att-summary-teachers {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
table.att-summary-grid th,
table.att-summary-grid td,
table.att-summary-teachers th,
table.att-summary-teachers td {
  border: 1px solid #cbd5e1;
  padding: .28rem .35rem;
  white-space: nowrap;
}
table.att-summary-grid thead th,
table.att-summary-teachers thead th {
  background: #f1f5f9;
  font-weight: 700;
  text-align: center;
}
table.att-summary-grid .col-label {
  text-align: left;
  font-weight: 650;
  min-width: 7.5rem;
  background: #fff;
}
table.att-summary-grid .num,
table.att-summary-teachers .num { text-align: center; }
table.att-summary-grid .col-jum { font-weight: 650; background: #f8fafc; }
table.att-summary-grid .col-grand {
  font-weight: 700;
  background: #fffbeb;
  text-align: center;
}
table.att-summary-grid thead th.col-grand { background: #fef3c7; }
table.att-summary-grid tr.is-enrolled td { background: #f0fdf4; }
table.att-summary-grid tr.is-enrolled .col-label { background: #dcfce7; }
table.att-summary-grid tr.is-total td,
table.att-summary-teachers tr.is-total td {
  background: #fef3c7;
  font-weight: 700;
}
table.att-summary-grid tr.is-pct td { background: #eff6ff; }
.att-summary-pct-hint { text-align: left !important; font-weight: 500; }
.att-summary-teachers-title {
  margin: 1.1rem 0 .45rem;
  font-size: 1rem;
}
.att-summary-sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: .75rem;
}
.att-summary-sign-line {
  margin: .85rem 0 .55rem;
  min-height: 1.4rem;
}
@media (min-width: 1100px) {
  table.att-summary-grid .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  table.att-summary-grid thead .sticky-col { z-index: 3; background: #f1f5f9; }
}
@media (max-width: 575.98px) {
  .att-summary-sign { grid-template-columns: 1fr; }
}
body.print-page .att-summary-sheet.report-sheet { padding-top: .5rem; }
body.print-page .att-summary-sign { page-break-inside: avoid; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Attendance take ===== */
.att-take { display: flex; flex-direction: column; gap: 1rem; }

.att-take-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .85rem 1.25rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-take-hero-main {
  min-width: 0;
  flex: 1 1 14rem;
}
.att-take-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.att-take-back:hover { color: var(--brand-primary); text-decoration: none; }
.att-take-back i { font-size: .8rem; }
.att-take-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
}
.att-take-hero h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.att-take-meta {
  margin: .4rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-mid);
  line-height: 1.35;
}
.att-take-badge {
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}
.att-take-badge.is-saved {
  background: #ecfdf5;
  color: var(--ok);
}
.att-take-badge.is-new {
  background: #fff7ed;
  color: #c2410c;
}

.att-datebar {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  background: #f3f4f6;
  border-radius: 12px;
  flex-shrink: 0;
}
.att-datebar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  color: var(--text-mid);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.att-datebar-nav:hover {
  background: #fff;
  color: var(--brand-primary);
  text-decoration: none;
}
.att-datebar-form { flex: 0 1 auto; }
.att-datebar-form input[type="date"] {
  width: auto;
  max-width: 11rem;
  padding: .4rem .55rem;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.2;
  min-height: 0;
  height: auto;
  border: 0;
  background: #fff;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.att-class-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.att-class-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-light);
  background: #fff;
  color: var(--text-dark);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.att-class-chip:hover {
  border-color: #c7d2fe;
  color: var(--brand-primary);
  text-decoration: none;
}
.att-class-chip-meta {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--text-mid);
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.att-class-chip.is-active {
  border-color: transparent;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(102,126,234,.25);
}
.att-class-chip.is-active .att-class-chip-meta {
  background: rgba(255,255,255,.22);
  color: #fff;
}

.att-holiday-banner {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-md);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}
.att-holiday-banner i { font-size: 1.15rem; margin-top: .1rem; }
.att-holiday-banner strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.att-holiday-banner span { font-size: .8rem; font-weight: 600; opacity: .9; }

.att-take-empty-panel {
  text-align: center;
  padding: 2.75rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-take-empty-icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .85rem;
  border-radius: 999px; background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.35rem;
}
.att-take-empty-panel h2 {
  margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 800;
}
.att-take-empty-panel p {
  margin: 0 auto; max-width: 26rem;
  color: var(--text-mid); font-size: .9rem; line-height: 1.5;
}

.att-extra-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.att-extra-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .95rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid #eef2f7;
}
.att-extra-head h3 { margin: 0 0 .2rem; font-size: .98rem; font-weight: 800; }
.att-extra-head p { margin: 0; font-size: .82rem; color: var(--text-mid); }
.att-extra-icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(102,126,234,.14), rgba(118,75,162,.1));
  color: var(--brand-primary);
  font-size: 1rem;
}
.att-extra-details { margin-top: .15rem; }
.att-extra-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
}
.att-extra-details > summary::-webkit-details-marker { display: none; }
.att-extra-details > summary strong { display: block; font-size: .92rem; }
.att-extra-details > summary small {
  display: block;
  margin-top: .12rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-muted);
}
.att-extra-details[open] > summary {
  margin-bottom: .95rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid #eef2f7;
}

.att-draft-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: .82rem;
  font-weight: 600;
}
.att-draft-banner[hidden] { display: none !important; }
.att-draft-banner i { font-size: 1.05rem; }

.att-take-bar {
  position: sticky;
  top: .65rem;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .85rem 1rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.att-take-bar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  min-width: 0;
  flex: 1;
}
.att-progress {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 7.5rem;
}
.att-progress-text {
  font-size: .78rem;
  font-weight: 650;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.att-progress-text strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}
.att-progress-track {
  height: 5px;
  width: 8.5rem;
  max-width: 100%;
  border-radius: 99px;
  background: #eef2f7;
  overflow: hidden;
}
.att-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
  transition: width .2s ease;
}
.att-take-bar-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.att-live-counts { display: flex; flex-wrap: wrap; gap: .35rem; }
.att-count {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  border: 1px solid var(--border-light);
  background: #fff;
}
.att-count em {
  font-style: normal;
  font-weight: 700;
  opacity: .8;
}
.att-count strong { font-variant-numeric: tabular-nums; font-size: .86rem; }
.att-count.present { color: var(--ok); background: #f0fdf4; border-color: #bbf7d0; }
.att-count.absent { color: var(--danger); background: #fef2f2; border-color: #fecaca; }
.att-count.late { color: var(--warn); background: #fffbeb; border-color: #fde68a; }
.att-count.excused { color: var(--info); background: #eff6ff; border-color: #bfdbfe; }

.att-roster-shell {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.att-roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
  background: #fafbfc;
}
.att-roster-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.att-roster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin: .4rem 0 0;
  font-size: .72rem;
  font-weight: 650;
  color: var(--text-muted);
}
.att-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}
.att-legend-item.present { color: var(--ok); }
.att-legend-item.absent { color: var(--danger); }
.att-legend-item.late { color: var(--warn); }
.att-legend-item.excused { color: var(--info); }

.att-roster {
  display: flex;
  flex-direction: column;
}
.att-student {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
  transition: background .12s;
}
.att-student:last-child { border-bottom: 0; }
.att-student.is-pending { background: #fcfcfd; }
.att-student.is-marked:hover,
.att-student.is-pending:hover { background: #f8fafc; }
.att-student.is-present { box-shadow: inset 3px 0 0 var(--ok); }
.att-student.is-absent { box-shadow: inset 3px 0 0 var(--danger); }
.att-student.is-late { box-shadow: inset 3px 0 0 var(--warn); }
.att-student.is-excused { box-shadow: inset 3px 0 0 var(--info); }

.att-student-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.att-bil {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.att-student.is-marked .att-bil {
  background: #eef2ff;
  color: var(--brand-primary);
}
.att-student-text {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.att-student-name {
  display: block;
  font-weight: 750;
  font-size: .92rem;
  color: var(--text-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.att-student-name:hover { color: var(--brand-primary); }
.att-student-sub {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.att-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .3rem;
  padding: .2rem;
  background: #f3f4f6;
  border-radius: 10px;
}
.att-chip { margin: 0; cursor: pointer; flex: 0 0 auto; }
.att-chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.att-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  width: 2.15rem;
  height: 2.15rem;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: transparent;
  font-size: .72rem;
  font-weight: 800;
  color: var(--text-mid);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  user-select: none;
}
.att-chip span i { font-size: .88rem; }
.att-chip-short { display: none; }
.att-chip:hover span { background: #fff; color: var(--text-dark); }
.att-chip input:focus-visible + span {
  outline: 2px solid rgba(102,126,234,.45);
  outline-offset: 2px;
}
.att-chip.present input:checked + span {
  background: #ecfdf5; border-color: #6ee7b7; color: var(--ok);
  box-shadow: 0 0 0 2px rgba(5,150,105,.1);
}
.att-chip.absent input:checked + span {
  background: #fef2f2; border-color: #fca5a5; color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220,38,38,.08);
}
.att-chip.late input:checked + span {
  background: #fffbeb; border-color: #fcd34d; color: var(--warn);
  box-shadow: 0 0 0 2px rgba(217,119,6,.1);
}
.att-chip.excused input:checked + span {
  background: #eff6ff; border-color: #93c5fd; color: var(--info);
  box-shadow: 0 0 0 2px rgba(37,99,235,.08);
}
.att-chip.leave input:checked + span { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.att-chip.mc input:checked + span { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.att-chip.crk input:checked + span { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.att-chip.maternity input:checked + span { background: #fdf2f8; border-color: #f9a8d4; color: #be185d; }
.att-chip.annual input:checked + span { background: #ecfeff; border-color: #67e8f9; color: #0e7490; }
.att-chip.unauthorized input:checked + span { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

.att-take-footer {
  margin-top: .15rem;
  display: none;
}

@media (min-width: 640px) {
  .att-chip span {
    width: auto;
    min-width: 2.75rem;
    height: 2.15rem;
    padding: 0 .5rem;
  }
  .att-chip-short { display: inline; }
}

@media (max-width: 575.98px) {
  .att-take-hero { padding: .9rem 1rem; align-items: stretch; }
  .att-datebar { width: 100%; justify-content: space-between; }
  .att-datebar-form { flex: 1; }
  .att-datebar-form input[type="date"] { width: 100%; max-width: none; }
  .att-take-bar {
    top: .4rem;
    padding: .7rem .75rem;
  }
  .att-progress-track { width: 100%; }
  .att-count em { display: none; }
  .att-roster-head { padding: .75rem .9rem; }
  .att-roster-legend { gap: .3rem .55rem; }
  .att-student { padding: .6rem .75rem; gap: .5rem; }
  .att-status { gap: .2rem; padding: .15rem; }
  .att-chip span { width: 1.95rem; height: 1.95rem; border-radius: 7px; }
  .att-take-footer {
    display: flex;
    position: sticky;
    bottom: .75rem;
    z-index: 15;
    margin: .5rem 0 0;
    padding: .65rem;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 -6px 20px rgba(15,23,42,.08);
  }
  .att-take-footer .btn { width: 100%; justify-content: center; }
}


/* Legacy class cards kept for any other pages */
.att-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .65rem;
  margin-bottom: 1.15rem;
}
.att-class-card {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .85rem .9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.att-class-card i { color: var(--brand-primary); font-size: 1.1rem; }
.att-class-name { font-weight: 800; font-size: .9rem; line-height: 1.3; }
.att-class-meta { font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.att-class-card:hover {
  border-color: rgba(102,126,234,.4);
  color: var(--text-dark);
  text-decoration: none;
  transform: translateY(-1px);
}
.att-class-card.is-active {
  border-color: transparent;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(102,126,234,.28);
}
.att-class-card.is-active i,
.att-class-card.is-active .att-class-meta { color: rgba(255,255,255,.85); }

.att-take-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem;
}

.exam-score { width: 4.4rem; padding: .28rem .35rem; text-align: right; }

.exam-mark-tabs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0 0 .85rem;
  padding: .3rem;
  background: #f3f4f6;
  border-radius: var(--radius-md);
}
.exam-mark-tab {
  flex: 1; min-width: 7rem;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  padding: .55rem .85rem;
  font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.exam-mark-tab:hover { color: var(--text-dark); }
.exam-mark-tab.is-active {
  background: #fff; color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}
.exam-mark-pane { margin: 0; }
/* Paparan jadual — layout seperti doc/JADUAL KELAS.pdf */
.tt-sheet-card { padding: 0; overflow: hidden; }
.tt-sheet { padding: 1.1rem 1.15rem 1.25rem; background: #fff; }
.tt-sheet-head {
  text-align: center;
  margin-bottom: .9rem;
  line-height: 1.35;
}
.tt-sheet-banner {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.tt-sheet-org {
  margin: 0 0 .55rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}
.tt-sheet-meta {
  margin: .15rem 0;
  font-size: .88rem;
  color: var(--text-dark);
}
.tt-sheet-meta span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text-mid);
  font-size: .78rem;
}
.tt-sheet-meta strong {
  font-weight: 800;
  margin-left: .25rem;
}
.tt-sheet-wrap { overflow-x: auto; }
.tt-sheet-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .84rem;
}
.tt-sheet-table th,
.tt-sheet-table td {
  border: 1.5px solid #1e293b;
  padding: .55rem .4rem;
  text-align: center;
  vertical-align: middle;
}
.tt-sheet-table thead th {
  background: #c5e0b3;
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
}
.tt-sheet-table thead th.is-break {
  background: #ffffcc;
  color: var(--text-dark);
}
.tt-sheet-day {
  width: 5.5rem;
  background: #c5e0b3 !important;
  font-weight: 800 !important;
  font-size: .8rem !important;
  letter-spacing: .03em;
  color: var(--text-dark) !important;
}
.tt-sheet-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  margin-bottom: .3rem;
}
.tt-sheet-cell:last-child { margin-bottom: 0; }
.tt-sheet-cell strong {
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-dark);
  text-transform: uppercase;
  line-height: 1.25;
}
.tt-sheet-cell span {
  font-size: .7rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.2;
}
.tt-sheet-cell em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  color: #9a3412;
  background: rgba(255,255,255,.55);
  padding: .05rem .3rem;
  border-radius: 3px;
}
.tt-sheet-empty { color: #94a3b8; font-weight: 700; }
.tt-sheet-class {
  display: inline-block;
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  background: rgba(255,255,255,.55);
  padding: .05rem .35rem;
  border-radius: 3px;
}
.tt-sheet-conflict {
  outline: 2px solid #dc2626;
  outline-offset: -2px;
}
.tt-sheet-break {
  background: #ffffcc !important;
  padding: .4rem .2rem !important;
}
.tt-sheet-break span {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .35em;
  font-weight: 800;
  font-size: .78rem;
  color: var(--text-dark);
  line-height: 1;
}
@media print {
  .topbar, .panel-toolbar, .sidebar, .app-nav, .roles-topbar-actions, .flash, .no-print { display: none !important; }
  .tt-sheet-card { box-shadow: none; border: 0; }
  .tt-sheet { padding: 0; }
  .tt-sheet-table th, .tt-sheet-table td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
body.print-page .tt-sheet-card {
  box-shadow: none; border: 0; background: #fff;
}
body.print-page .tt-sheet { padding: 0; }
body.print-page .tt-sheet-table th,
body.print-page .tt-sheet-table td {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tt-part-missing-staff {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: .4rem .45rem .45rem !important;
}
.tt-part-missing-staff .tt-staff-select {
  border-color: #f87171;
  background: #fff;
}
.tt-sheet-no-staff {
  color: #b91c1c !important;
  font-weight: 800 !important;
  font-size: .68rem !important;
}
.tt-side-list {
  list-style: none; margin: 0; padding: 0;
}
.tt-side-list li {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.tt-side-list li:last-child { border-bottom: 0; }
.tt-side-list .muted { font-size: .8rem; }
.tt-days { display: flex; flex-wrap: wrap; gap: .45rem; }
.tt-day { position: relative; margin: 0; cursor: pointer; }
.tt-day input { position: absolute; opacity: 0; pointer-events: none; }
.tt-day span {
  display: inline-flex; padding: .4rem .75rem; border-radius: 999px;
  border: 1.5px solid var(--border-light); background: #fff;
  font-size: .8rem; font-weight: 800; color: var(--text-mid);
}
.tt-day input:checked + span {
  background: var(--brand-gradient); color: #fff; border-color: transparent;
}
.tt-slot-list { display: flex; flex-direction: column; gap: .45rem; }
.tt-slot-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .4rem .5rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.tt-slot-item.is-break {
  background: #f8fafc;
  border-style: dashed;
}
.tt-slot-row, .tt-slot-del { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tt-slot-row input { width: auto; }
.tt-slot-row select { width: auto; min-width: 7.5rem; font-size: .8rem; padding: .28rem .4rem; }
.tt-break-row td { background: #f8fafc; }
.tt-break-cell {
  text-align: center;
  vertical-align: middle !important;
  font-weight: 650;
}
.tt-break-badge {
  display: inline-flex; margin-left: .35rem; padding: .08rem .4rem; border-radius: 4px;
  background: #e2e8f0; color: #475569; font-size: .65rem; font-weight: 800;
  vertical-align: middle;
}
.tt-extra {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .3rem; font-size: .72rem; font-weight: 700; color: var(--text-mid);
  cursor: pointer;
}
.tt-extra input { position: static; opacity: 1; pointer-events: auto; }
.tt-part {
  margin-bottom: .45rem;
  padding-bottom: .4rem;
  border-bottom: 1px dashed var(--border-light);
}
.tt-part:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.tt-part-2 { opacity: .95; }
.tt-part-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem;
}
.tt-part-ro + .tt-part-ro {
  margin-top: .4rem; padding-top: .35rem;
  border-top: 1px dashed var(--border-light);
}
.tt-badge {
  display: inline-flex; margin-top: .2rem; padding: .1rem .4rem; border-radius: 999px;
  background: #fff7ed; color: #c2410c; font-size: .65rem; font-weight: 800;
}
.att-period-tabs {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem;
}
.att-period-tab {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-light); background: #fff;
  text-decoration: none; color: inherit; min-width: 8rem;
}
.att-period-tab.is-active {
  border-color: transparent; background: var(--brand-gradient); color: #fff;
}
.att-period-tab.is-active .muted { color: rgba(255,255,255,.8); }
.att-mark.mixed { background: #fffbeb; color: var(--warn); }
.slip-card { page-break-after: always; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px dashed var(--border-light); }
.slip-card:last-child { page-break-after: auto; border-bottom: 0; }

/* ===== Exam slip (print + screen) ===== */
.exam-slip {
  --slip-ink: #0f1f1e;
  --slip-muted: #5b6e6c;
  --slip-line: rgba(15, 31, 30, 0.12);
  --slip-brand: #0b3d3a;
  --slip-soft: #e8f2ef;
  max-width: 48rem;
  margin: 0 auto 1.75rem;
  padding: 0 0 1.25rem;
  color: var(--slip-ink);
  page-break-after: always;
  break-after: page;
  font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
}
.exam-slip:last-child { page-break-after: auto; break-after: auto; }
.exam-slip-head {
  text-align: center;
  padding: 1.1rem 1.25rem 1rem;
  background: linear-gradient(180deg, #f3f8f6, #fff);
  border: 1px solid var(--slip-line);
  border-radius: 14px 14px 0 0;
}
.exam-slip-school {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slip-muted);
}
.exam-slip-head h1 {
  margin: .35rem 0 .2rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--slip-brand);
}
.exam-slip-exam {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--slip-ink);
}
.exam-slip-meta,
.exam-slip-student {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--slip-line);
  border-top: 0;
}
.exam-slip-student {
  background: var(--slip-soft);
  border-radius: 0 0 12px 12px;
  margin-bottom: 1.1rem;
}
.exam-slip .k {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slip-muted);
  margin-bottom: .15rem;
}
.exam-slip strong { font-weight: 800; }
.exam-slip-section {
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slip-brand);
}
.exam-slip-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.15rem;
  font-size: .9rem;
}
.exam-slip-table th,
.exam-slip-table td {
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--slip-line);
  text-align: left;
}
.exam-slip-table thead th {
  background: #0b3d3a;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.exam-slip-table tbody tr:nth-child(even) { background: #f7faf9; }
.exam-slip-table .num { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.exam-slip-grade {
  display: inline-flex;
  min-width: 1.75rem;
  justify-content: center;
  padding: .1rem .4rem;
  border-radius: 6px;
  background: var(--slip-soft);
  font-weight: 800;
}
.exam-slip-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: 0 0 1.1rem;
}
.exam-slip-stat {
  padding: .85rem .95rem;
  border: 1px solid var(--slip-line);
  border-radius: 12px;
  background: #fff;
}
.exam-slip-stat strong {
  display: block;
  margin-top: .2rem;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  color: var(--slip-brand);
}
.exam-slip-stat.is-pass { background: #e8f8ef; border-color: #b7e4c7; }
.exam-slip-stat.is-pass strong { color: #067647; }
.exam-slip-stat.is-fail { background: #fef3f2; border-color: #fecdca; }
.exam-slip-stat.is-fail strong { color: #b42318; }
.exam-slip-note {
  margin: 0 0 1.35rem;
  font-size: .78rem;
  color: var(--slip-muted);
  font-weight: 600;
}
.exam-slip-signs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: .5rem;
}
.exam-slip-signs .line {
  height: 0;
  border-top: 1px solid #94a3a1;
  margin: 2.4rem 0 .55rem;
}
.exam-slip-signs strong {
  display: block;
  font-size: .85rem;
  color: var(--slip-brand);
}
.exam-slip-signs span {
  display: block;
  font-size: .72rem;
  color: var(--slip-muted);
  font-weight: 600;
  margin-top: .15rem;
}

@media print {
  .exam-slip {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .exam-slip-head { border-radius: 0; background: #f3f8f6; }
  .exam-slip-student { border-radius: 0; }
  .exam-slip-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .exam-slip-stat.is-pass,
  .exam-slip-stat.is-fail,
  .exam-slip-student,
  .exam-slip-table tbody tr:nth-child(even) {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .7rem; font: inherit; }

body.print-page .no-print { display: none !important; }
body.print-page .topbar { display: none !important; }

/* ===== Fee receipt preview (A4 · 95%) ===== */
body.preview-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(11, 61, 58, 0.08), transparent),
    #eef2f1;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.receipt-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 31, 30, 0.08);
  box-shadow: 0 1px 8px rgba(15, 31, 30, 0.04);
}
.receipt-toolbar-inner {
  width: min(95vw, calc(210mm * 0.95));
  max-width: calc(210mm * 0.95);
  margin: 0 auto;
  padding: .85rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  box-sizing: border-box;
}
.receipt-toolbar-copy .eyebrow {
  margin: 0 0 .1rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5b6e6c;
}
.receipt-toolbar-copy strong {
  font-size: 1rem;
  font-weight: 800;
  color: #0b3d3a;
}
.receipt-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.fee-receipt {
  --rc-ink: #0f1f1e;
  --rc-muted: #5b6e6c;
  --rc-line: rgba(15, 31, 30, 0.12);
  --rc-brand: #0b3d3a;
  --rc-soft: #e8f2ef;
  --rc-accent: #0d9488;
  --a4-w: 210mm;
  --a4-h: 297mm;
  box-sizing: border-box;
  width: min(95vw, calc(var(--a4-w) * 0.95));
  max-width: calc(var(--a4-w) * 0.95);
  min-height: calc(var(--a4-h) * 0.95);
  margin: 1.25rem auto 2.5rem;
  padding: 1.15rem 1.35rem 1.5rem;
  background: #fff;
  color: var(--rc-ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(15, 31, 30, 0.1);
  border: 1px solid rgba(15, 31, 30, 0.06);
}
.fee-receipt-head {
  text-align: center;
  padding: 1rem 1.1rem 1.05rem;
  background: linear-gradient(165deg, #f3f8f6 0%, #fff 55%);
  border: 1px solid var(--rc-line);
  border-radius: 16px 16px 0 0;
}
.fee-receipt-brand-row {
  display: grid;
  grid-template-columns: minmax(5rem, 7.5rem) minmax(0, 1fr) minmax(5rem, 7.5rem);
  align-items: center;
  gap: .55rem .85rem;
  width: 100%;
}
.fee-receipt-brand-col {
  min-width: 0;
}
.fee-receipt-brand-col-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.fee-receipt-brand-col-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.fee-receipt-brand-col-center {
  text-align: center;
  padding: 0 .15rem;
}
.fee-receipt-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.fee-receipt-logo-kafa { max-height: 5.1rem; }
.fee-receipt-logo-school { max-height: 5.5rem; }
.fee-receipt-school {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--rc-muted);
}
.fee-receipt-org {
  margin: .15rem 0 0;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--rc-brand);
}
.fee-receipt-head h1 {
  margin: .45rem 0 .25rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--rc-brand);
}
.fee-receipt-no {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--rc-ink);
}
.fee-receipt-no strong {
  font-weight: 800;
  color: var(--rc-accent);
}
.fee-receipt-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rc-line);
  border-top: 0;
  background: #fff;
}
.fee-receipt-student {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rc-line);
  border-top: 0;
  background: var(--rc-soft);
  border-radius: 0 0 14px 14px;
  margin-bottom: 1.2rem;
}
.fee-receipt .k {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-muted);
  margin-bottom: .15rem;
}
.fee-receipt strong { font-weight: 800; }
.fee-receipt-section {
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rc-brand);
}
.fee-receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: .92rem;
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  overflow: hidden;
}
.fee-receipt-table th,
.fee-receipt-table td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--rc-line);
  text-align: left;
}
.fee-receipt-table thead th {
  background: #0b3d3a;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.fee-receipt-table tbody tr:nth-child(even) { background: #f7faf9; }
.fee-receipt-table tbody tr:last-child td { border-bottom: 0; }
.fee-receipt-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.fee-receipt-desc {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--rc-muted);
}
.fee-receipt-table tfoot th {
  background: #f3f8f6;
  font-size: .95rem;
  font-weight: 800;
  color: var(--rc-brand);
  border-bottom: 0;
}
.fee-receipt-total-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .85rem;
  padding: 1rem 1.15rem;
  margin: 0 0 1.1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b3d3a, #0f766e);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 61, 58, 0.22);
}
.fee-receipt-total-card .k {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.fee-receipt-total-card strong {
  font-size: 1.45rem;
  letter-spacing: -.02em;
  margin-right: auto;
}
.fee-receipt-total-date {
  font-size: .8rem;
  font-weight: 700;
  opacity: .85;
}
.fee-receipt-note {
  margin: 0 0 1.15rem;
  font-size: .78rem;
  color: var(--rc-muted);
  font-weight: 600;
}
.fee-receipt-qr {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d5e0dc;
  border-radius: 12px;
  background: #f7faf9;
}
.fee-receipt-qr img {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.fee-receipt-qr-fallback {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  color: var(--rc-muted);
  font-size: 2rem;
}
.fee-receipt-qr-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.fee-receipt-qr-meta strong {
  font-size: .95rem;
  font-weight: 800;
  color: var(--rc-brand, var(--text-dark));
}
.fee-receipt-qr-meta > span {
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-mid);
}
.fee-receipt-qr-meta .muted {
  font-size: .75rem;
  font-weight: 550;
  color: var(--rc-muted);
}

.fee-receipt-table-wrap {
  width: 100%;
  margin: 0 0 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rc-line, rgba(15, 31, 30, 0.12));
}
.fee-receipt-table-wrap .fee-receipt-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.receipt-toolbar-actions .btn-label-short { display: none; }

@media (max-width: 640px) {
  html, body.preview-page {
    overflow-x: hidden;
  }
  body.preview-page {
    background: #eef2f1;
  }
  .receipt-toolbar-inner {
    width: 100%;
    max-width: none;
    padding: .65rem .75rem;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }
  .receipt-toolbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
  }
  .receipt-toolbar-actions .btn {
    width: 100%;
    min-height: 2.6rem;
    padding: .55rem .5rem;
    font-size: .8rem;
    white-space: nowrap;
  }
  .receipt-toolbar-actions .btn:only-child {
    grid-column: 1 / -1;
  }
  .receipt-toolbar-actions .btn-label-full { display: none; }
  .receipt-toolbar-actions .btn-label-short { display: inline; }
  .fee-receipt {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 0 1.25rem;
    padding: .7rem .7rem 1.1rem;
    padding-left: max(.7rem, env(safe-area-inset-left));
    padding-right: max(.7rem, env(safe-area-inset-right));
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: #fff;
  }
  .fee-receipt-head {
    padding: .75rem .55rem .85rem;
    border-radius: 12px 12px 0 0;
  }
  .fee-receipt-brand-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo-l logo-r"
      "center center";
    gap: .45rem .65rem;
    align-items: center;
  }
  .fee-receipt-brand-col-left {
    grid-area: logo-l;
    justify-content: center;
  }
  .fee-receipt-brand-col-right {
    grid-area: logo-r;
    justify-content: center;
  }
  .fee-receipt-brand-col-center {
    grid-area: center;
    padding: 0;
  }
  .fee-receipt-logo-kafa,
  .fee-receipt-logo-school {
    max-height: 3.25rem;
    max-width: 5.5rem;
    margin: 0 auto;
  }
  .fee-receipt-school {
    font-size: .62rem;
    letter-spacing: .03em;
    word-break: break-word;
  }
  .fee-receipt-org {
    font-size: .78rem;
    word-break: break-word;
  }
  .fee-receipt-head h1 {
    font-size: 1.05rem;
    margin-top: .4rem;
    line-height: 1.25;
  }
  .fee-receipt-no {
    font-size: .78rem;
    word-break: break-word;
  }
  .fee-receipt-meta,
  .fee-receipt-student {
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: .75rem .7rem;
  }
  .fee-receipt-student {
    border-radius: 0 0 12px 12px;
    margin-bottom: 1rem;
  }
  .fee-receipt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .fee-receipt-table {
    font-size: .85rem;
    min-width: 0;
    width: 100%;
  }
  .fee-receipt-table th,
  .fee-receipt-table td {
    padding: .55rem .55rem;
  }
  .fee-receipt-table thead th {
    font-size: .65rem;
  }
  .fee-receipt-total-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .85rem .9rem;
    border-radius: 12px;
  }
  .fee-receipt-total-card strong {
    font-size: 1.3rem;
    margin-right: 0;
    width: 100%;
  }
  .fee-receipt-qr {
    flex-direction: column;
    text-align: center;
    padding: .85rem;
  }
  .fee-receipt-qr-meta { align-items: center; }
  .fee-receipt-qr img,
  .fee-receipt-qr-fallback {
    width: 112px;
    height: 112px;
  }
  .fee-receipt-note {
    font-size: .74rem;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .receipt-toolbar-actions {
    grid-template-columns: 1fr;
  }
  .fee-receipt-logo-kafa,
  .fee-receipt-logo-school {
    max-height: 2.85rem;
  }
  .fee-receipt-head h1 { font-size: .98rem; }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 2.5%;
  }
  body.preview-page {
    background: #fff;
    margin: 0;
    padding: 0;
  }
  .fee-receipt {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
  }
  .fee-receipt-head { border-radius: 0; background: #f3f8f6; }
  .fee-receipt-student { border-radius: 0; }
  .fee-receipt-brand-row { gap: .5rem .75rem; }
  .fee-receipt-logo-kafa { max-height: 3.8rem; }
  .fee-receipt-logo-school { max-height: 4.2rem; }
  .fee-receipt-total-card { box-shadow: none; }
  .fee-receipt-logo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .fee-receipt-table thead th,
  .fee-receipt-total-card,
  .fee-receipt-student,
  .fee-receipt-table tbody tr:nth-child(even),
  .fee-receipt-table tfoot th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

body.preview-page .receipt-toolbar.no-print { display: block; }
@media print {
  body.preview-page .no-print { display: none !important; }
}

/* ===== Public receipt status (missing / blocked) ===== */
.public-status {
  min-height: calc(100vh - 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem .9rem 2rem;
  padding-left: max(.9rem, env(safe-area-inset-left));
  padding-right: max(.9rem, env(safe-area-inset-right));
  box-sizing: border-box;
}
.public-status-card {
  width: min(100%, 26rem);
  margin: 0 auto;
  padding: 1.6rem 1.25rem 1.4rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(15, 31, 30, 0.08);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 31, 30, 0.08);
}
.public-status-icon {
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto .95rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e8f2ef;
  color: #0b3d3a;
  font-size: 1.55rem;
}
.public-status.is-blocked .public-status-icon {
  background: #fef3c7;
  color: #92400e;
}
.public-status-eyebrow {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5b6e6c;
}
.public-status.is-blocked .public-status-eyebrow {
  color: #92400e;
}
.public-status-card h1 {
  margin: 0 0 .65rem;
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #0b3d3a;
}
.public-status.is-blocked .public-status-card h1 {
  color: #78350f;
}
.public-status-lead {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 1.5;
  font-weight: 550;
  color: #4b5c5a;
}
.public-status-lead strong {
  color: #0f1f1e;
  font-weight: 800;
}
.public-status-meter {
  margin: 0 0 1.1rem;
  padding: .85rem .9rem;
  border-radius: 12px;
  background: #f3f8f6;
  border: 1px solid rgba(15, 31, 30, 0.08);
}
.public-status-meter-bar {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-bottom: .55rem;
}
.public-status-pip {
  width: 1.55rem;
  height: .42rem;
  border-radius: 999px;
  background: #d5e0dc;
}
.public-status-pip.is-used {
  background: #0d9488;
}
.public-status-meter-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 650;
  color: #5b6e6c;
}
.public-status-meter-label strong {
  color: #0b3d3a;
  font-weight: 800;
}
.public-status-points {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: .45rem;
}
.public-status-points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .82rem;
  line-height: 1.4;
  font-weight: 600;
  color: #5b6e6c;
}
.public-status-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #0d9488;
}
.public-status.is-blocked .public-status-points li::before {
  background: #d97706;
}
@media (max-width: 640px) {
  .public-status {
    align-items: flex-start;
    padding-top: 1.75rem;
  }
  .public-status-card {
    padding: 1.35rem 1.05rem 1.2rem;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 31, 30, 0.06);
  }
}

@media print {
  #sidebar-wrapper, .top-navbar, .toolbar, .panel-toolbar, .no-print, .footer-enterprise, .btn-sidebar-toggle { display: none !important; }
  #wrapper { display: block; }
  .content-area, .main-container { padding: 0; max-width: none; }
  body { background: #fff; }
  .card, .stat, .report-col, .closing-card, .balance-chip { box-shadow: none; }
  .report-columns { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .closing-grid, .balance-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .closing-panel, .balance-strip, .report-col { break-inside: avoid; }
  table.results-grid { font-size: .55rem; min-width: 0; width: 100%; }
  table.results-grid th, table.results-grid td { padding: .12rem .15rem; }
  table.results-grid .sticky-col { position: static; }
  table.att-report-grid { font-size: .55rem; min-width: 0; width: 100%; }
  table.att-report-grid th, table.att-report-grid td { padding: .12rem .1rem; }
  table.att-report-grid .sticky-col { position: static; }
  .results-meta { background: none; border: 0; padding: 0; }
}

.cal-closed-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: var(--radius-sm);
  padding: .65rem .9rem;
  margin: 0 0 1rem;
  font-weight: 600;
}
.cal-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
}
.cal-badge.cal-school { background: #ecfdf5; color: #047857; }
.cal-badge.cal-local { background: #f5f3ff; color: #6d28d9; }
tr.is-muted td { opacity: .55; }

.impersonate-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  background: #7c3aed; color: #fff;
  padding: .55rem 1rem;
  font-size: .88rem;
}
.impersonate-banner form { margin: 0; }
.impersonate-banner .btn { background: #fff; color: #5b21b6; border: 0; }

.takwim-nav {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 0 0 .75rem;
}
.takwim-title { margin: 0; font-size: 1.15rem; min-width: 12rem; text-align: center; }
.takwim-legend {
  display: flex; flex-wrap: wrap; gap: .65rem 1.1rem;
  font-size: .82rem; color: var(--text-mid);
  margin: 0 0 .75rem;
}
.takwim-swatch {
  display: inline-block; width: .85rem; height: .85rem; border-radius: 4px;
  vertical-align: -2px; margin-right: .3rem; border: 1px solid var(--border-light);
}
.takwim-swatch.is-kafa { background: #eef2ff; }
.takwim-swatch.is-public { background: #ffedd5; }
.takwim-swatch.is-school { background: #d1fae5; }
.takwim-swatch.is-local { background: #ede9fe; }
.takwim-swatch.is-extra { background: #fce7f3; border-color: #f9a8d4; }
.takwim-swatch.is-leave { background: #fee2e2; border-color: #fca5a5; }
.takwim-swatch.is-release { background: #fef3c7; border-color: #fcd34d; }

/* Calendar page chrome */
.cal-chrome {
  display: flex; flex-direction: column; gap: .85rem;
  margin: 0 0 1rem; padding: 1rem 1.15rem 1.1rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.cal-chrome-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.cal-chrome-title {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
  min-width: 0; flex: 1;
}
.cal-chrome-title strong {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-dark);
}
.cal-chrome-title span {
  font-size: .78rem; font-weight: 550; color: var(--text-muted);
}
.cal-chrome-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .65rem .85rem;
  padding-top: .75rem; border-top: 1px solid #eef2f7;
}
.cal-field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.cal-field label {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.cal-field input[type="number"],
.cal-field input[type="date"],
.cal-field select,
.cal-field input[type="text"] {
  min-height: 2.35rem; border-radius: 10px;
}
.cal-field input[type="number"] { width: 5.5rem; }
.cal-field-grow { flex: 1 1 12rem; }
.cal-field-actions { display: flex; gap: .4rem; align-items: center; }
.cal-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem;
}
.cal-stat {
  display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem;
  background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.cal-stat span {
  font-size: .65rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.cal-stat strong {
  font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--text-dark); line-height: 1.1;
}
.cal-stat-text { font-size: .95rem !important; letter-spacing: .02em !important; }

.cal-sheet { padding: 1.15rem 1.2rem 1.35rem; }
.cal-sheet-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: .85rem 1.25rem; margin-bottom: 1rem;
}
.cal-sheet-head .report-title { margin-bottom: .2rem; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: .4rem .85rem; margin: 0; padding: 0; list-style: none;
  font-size: .75rem; font-weight: 650; color: var(--text-mid);
}
.cal-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.cal-dot {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 4px;
  border: 1px solid var(--border-light); flex-shrink: 0;
}
.cal-dot.is-kafa { background: #e0e7ff; }
.cal-dot.is-public { background: #ffedd5; }
.cal-dot.is-school { background: #d1fae5; }
.cal-dot.is-local { background: #ede9fe; }
.cal-dot.is-extra { background: #fce7f3; border-color: #f9a8d4; }
.cal-dot.is-leave { background: #fee2e2; border-color: #fca5a5; }
.cal-dot.is-release { background: #fef3c7; border-color: #fcd34d; }

.cal-manage, .cal-list { margin-top: 1rem; padding: 0; overflow: hidden; }
.cal-manage-head, .cal-list-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: .65rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border-light);
}
.cal-manage-head h2, .cal-list-head h2 {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
}
.cal-manage-head p, .cal-list-head p {
  margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 550;
}
.cal-list-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .45rem;
  border-radius: 999px; background: #f1f5f9; color: var(--text-mid);
  font-size: .78rem; font-weight: 800;
}
.cal-manage-body { padding: 1rem 1.15rem 1.15rem; }
.cal-add-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .65rem .85rem;
}
.cal-table-wrap { overflow-x: auto; }
.cal-table { margin: 0; border: 0; }
.cal-table th, .cal-table td { padding: .7rem 1.15rem; }
.cal-row-sub {
  display: block; font-size: .72rem; color: var(--text-muted); font-weight: 550; margin-top: .1rem;
}
.cal-empty {
  text-align: center; padding: 2rem 1.25rem; color: var(--text-mid);
}
.cal-empty i { font-size: 1.75rem; opacity: .45; display: block; margin-bottom: .5rem; }
.cal-empty h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); }
.cal-empty p { margin: 0; font-size: .88rem; font-weight: 550; }

.takwim {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: .85rem;
}
.takwim-head {
  text-align: center;
  font-size: .7rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: .45rem 0 .2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.takwim-head.is-kafa { color: #4338ca; }
.takwim-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: .18rem;
  min-height: 5.6rem;
  padding: .5rem .5rem .45rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
a.takwim-cell:hover {
  border-color: #94a3b8; color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.takwim-cell.is-empty { visibility: hidden; min-height: 0; padding: 0; border: 0; }
.takwim-cell.is-kafa { background: #f5f7ff; border-color: #c7d2fe; }
.takwim-cell.is-public { background: #fffaf5; border-color: #fed7aa; }
.takwim-cell.is-school { background: #f3fdf8; border-color: #a7f3d0; }
.takwim-cell.is-local { background: #faf8ff; border-color: #ddd6fe; }
.takwim-cell.is-release { background: #fffbeb; border-color: #fcd34d; }
.takwim-cell.is-today { box-shadow: inset 0 0 0 2px #0f172a; }
.takwim-num {
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--text-dark);
}
.takwim-name {
  font-size: .68rem; line-height: 1.25; color: var(--text-mid); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.takwim-extra {
  display: inline-flex; align-items: center; gap: .28rem;
  max-width: 100%;
  font-size: .65rem; line-height: 1.2; font-weight: 700;
  color: #9d174d;
}
.takwim-extra.is-mine { color: #be185d; }
.takwim-extra-dot {
  display: inline-block; width: .42rem; height: .42rem; border-radius: 50%;
  background: #db2777; flex-shrink: 0;
}
.takwim-extra-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.takwim-release {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: .15rem;
  max-width: 100%;
  padding: .08rem .28rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
}
.takwim-release .bi { font-size: .65rem; }
.takwim-release-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.takwim-leave-list {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: .1rem;
  max-width: 100%;
}
.takwim-leave-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  max-width: 100%;
  padding: .12rem .35rem;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.takwim-leave-tag em {
  font-style: normal;
  font-weight: 800;
  opacity: .75;
  font-size: .58rem;
}
.takwim-leave-tag.is-mc { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.takwim-leave-tag.is-crk { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.takwim-leave-tag.is-maternity { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.takwim-leave-tag.is-annual { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.takwim-leave-tag.is-unauthorized { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.takwim-leave-more {
  font-size: .62rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: .1rem .2rem;
}

@media (max-width: 800px) {
  .cal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .takwim { gap: 3px; }
  .takwim-cell { min-height: 3.5rem; padding: .28rem .25rem; border-radius: 8px; }
  .takwim-name { display: none; }
  .takwim-extra-label { display: none; }
  .takwim-release-label { display: none; }
  .takwim-leave-tag em { display: none; }
  .takwim-head { font-size: .58rem; }
  .cal-chrome-title strong { font-size: 1rem; }
  .cal-sheet-head { flex-direction: column; }
}

/* —— Attendance hub (index) —— */
.att-hub { display: flex; flex-direction: column; gap: 1rem; }

.att-hub-overview {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-hub-overview-lead {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  min-width: 12rem;
}
.att-hub-overview-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.att-hub-overview-lead strong {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-dark);
}
.att-hub-overview-hint {
  margin: .35rem 0 0; font-size: .8rem; color: var(--text-mid); font-weight: 550; line-height: 1.35;
}
.att-hub-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(4.5rem, 1fr));
  gap: .55rem;
  flex: 1 1 18rem;
  max-width: 28rem;
}
.att-hub-metric {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .75rem;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.att-hub-metric-label {
  font-size: .65rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.att-hub-metric-value {
  font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--text-dark); line-height: 1.15;
}
.att-hub-metric.is-ok .att-hub-metric-value { color: var(--ok); }
.att-hub-metric.is-bad .att-hub-metric-value { color: var(--danger); }
.att-hub-metric.is-rate .att-hub-metric-value { color: var(--brand-primary); }

.att-hub-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1rem;
  padding: .85rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-hub-toolbar-fields {
  display: flex; flex-wrap: wrap; gap: .65rem .85rem; align-items: flex-end; flex: 1;
}
.att-hub-toolbar-actions { display: flex; gap: .4rem; align-items: center; }
.att-hub-field {
  display: flex; flex-direction: column; gap: .28rem; min-width: 0;
}
.att-hub-field label {
  font-size: .68rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.att-hub-field select,
.att-hub-field input[type="date"] {
  min-width: 10.5rem; max-width: 14rem; width: 100%;
  padding: .45rem .6rem; font-size: .88rem; font-weight: 600;
}
.att-hub-static {
  padding: .45rem .15rem;
  font-size: .95rem; font-weight: 750; color: var(--text-dark);
}

.att-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: start;
}
.att-hub-layout.is-solo {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
}
.att-hub-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.att-hub-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
}
.att-hub-panel-head h2 {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
}
.att-hub-panel-sub {
  margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 550;
}
.att-hub-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem;
  border-radius: 999px;
  background: #f3f4f6; color: var(--text-mid);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

.att-hub-class-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
  padding: 1rem 1.1rem 1.15rem;
}
.att-hub-class-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: .95rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fafbfc;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.att-hub-class-card:hover {
  border-color: #c7d2fe;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.att-hub-class-card.is-active {
  border-color: rgba(102,126,234,.45);
  box-shadow: 0 0 0 3px rgba(102,126,234,.1);
  background: #fff;
}
.att-hub-class-card.is-done {
  background: #fff;
}
.att-hub-class-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
.att-hub-class-card h3 {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
}
.att-hub-class-card-top p {
  margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 600;
}
.att-hub-status {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .68rem; font-weight: 750; white-space: nowrap;
}
.att-hub-status.is-pending {
  background: #fff7ed; color: #c2410c;
}
.att-hub-status.is-done {
  background: #ecfdf5; color: var(--ok);
}
.att-hub-class-card-actions {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.att-hub-class-card-actions .btn { flex: 1 1 auto; justify-content: center; }
.att-hub-class-card-actions .btn.secondary.small:last-child {
  flex: 0 0 auto; min-width: 2.4rem; padding-left: .55rem; padding-right: .55rem;
}

.att-hub-class-list { max-height: min(70vh, 640px); overflow-y: auto; }
.att-hub-year { border-bottom: 1px solid var(--border-light); }
.att-hub-year:last-child { border-bottom: none; }
.att-hub-year-label {
  padding: .55rem 1.1rem .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  background: #fafbfc;
  position: sticky; top: 0; z-index: 1;
}
.att-hub-year ul { list-style: none; margin: 0; padding: 0; }
.att-hub-year a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1.1rem;
  color: var(--text-dark); text-decoration: none;
  border-top: 1px solid transparent;
  transition: background .12s;
}
.att-hub-year li + li a { border-top-color: var(--border-light); }
.att-hub-year a:hover { background: #f5f7ff; color: var(--brand-primary); }
.att-hub-class-name {
  font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; gap: .45rem;
}
.att-hub-dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(5,150,105,.15);
}
.att-hub-class-meta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.att-hub-year a:hover .att-hub-class-meta { color: var(--brand-primary); }

.att-hub-session-list { max-height: min(70vh, 640px); overflow-y: auto; }
.att-hub-day { border-bottom: 1px solid var(--border-light); }
.att-hub-day:last-child { border-bottom: none; }
.att-hub-day-label {
  padding: .55rem 1.1rem .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  background: #fafbfc;
  position: sticky; top: 0; z-index: 1;
}
.att-hub-day ul { list-style: none; margin: 0; padding: 0; }
.att-hub-day li {
  display: flex; align-items: center; justify-content: space-between; gap: .85rem;
  padding: .8rem 1.15rem;
  border-top: 1px solid var(--border-light);
}
.att-hub-day li:first-child { border-top: none; }
.att-hub-session-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.att-hub-session-main strong { font-size: .92rem; }
.att-hub-session-main .muted { font-size: .78rem; }
.att-hub-bar {
  margin-top: .35rem;
  height: 4px; border-radius: 99px; background: #eef2f7; overflow: hidden; max-width: 11rem;
}
.att-hub-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: var(--brand-primary);
}
.att-hub-bar > span.is-high { background: var(--ok); }
.att-hub-bar > span.is-mid { background: var(--warn); }
.att-hub-bar > span.is-low { background: var(--danger); }
.att-hub-session-side {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
.att-hub-pct {
  font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 2.5rem; text-align: right;
}
.att-hub-pct.is-high { color: var(--ok); }
.att-hub-pct.is-mid { color: var(--warn); }
.att-hub-pct.is-low { color: var(--danger); }
.att-hub-frac { font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 2.4rem; }

.att-hub-empty {
  padding: 2.75rem 1.25rem;
  text-align: center; color: var(--text-muted);
}
.att-hub-empty i { font-size: 1.85rem; display: block; margin-bottom: .55rem; opacity: .5; }
.att-hub-empty p { margin: 0 0 .9rem; font-weight: 550; }

.att-hub-empty-page {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.att-hub-empty-icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .9rem;
  border-radius: 999px; background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.4rem;
}
.att-hub-empty-page h2 {
  margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800;
}
.att-hub-empty-page p {
  margin: 0 auto; max-width: 26rem;
  color: var(--text-mid); font-size: .9rem; line-height: 1.5;
}

@media (max-width: 899.98px) {
  .att-hub-layout,
  .att-hub-layout.is-solo { grid-template-columns: 1fr; }
  .att-hub-class-list,
  .att-hub-session-list { max-height: none; }
  .att-hub-metrics { max-width: none; }
}
@media (max-width: 575.98px) {
  .att-hub-overview { padding: .9rem 1rem; }
  .att-hub-metrics { grid-template-columns: repeat(2, 1fr); }
  .att-hub-toolbar { padding: .75rem .9rem; }
  .att-hub-field select,
  .att-hub-field input[type="date"] { max-width: none; min-width: 0; }
  .att-hub-toolbar-fields { width: 100%; }
  .att-hub-field { flex: 1 1 8rem; }
  .att-hub-session-side .att-hub-frac { display: none; }
  .att-hub-day li { flex-wrap: wrap; }
  .att-hub-session-side { width: 100%; justify-content: flex-end; }
}


/* ===== Academic years ===== */
.ay-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899.98px) {
  .ay-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ay-lead { margin: -.25rem 0 1.15rem; max-width: 42rem; line-height: 1.5; }
.ay-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: .85rem;
}
.ay-session-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.05rem;
  background: #fafbfc;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ay-session-card:hover {
  border-color: #d1d5db;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ay-session-card.is-current {
  background: #fff;
  border-color: rgba(102,126,234,.4);
  box-shadow: 0 0 0 3px rgba(102,126,234,.1), var(--shadow-sm);
}
.ay-session-card.is-viewing:not(.is-current) {
  border-color: #cbd5e1;
}
.ay-session-card header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
}
.ay-session-card h3 {
  margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
}
.ay-session-meta { margin: .2rem 0 0; font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.ay-session-badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.ay-session-metrics {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .65rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
}
.ay-session-metrics dt {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 .15rem;
}
.ay-session-metrics dd {
  margin: 0; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ay-session-metrics dd.ay-metric-ok { color: #15803d; }
.ay-session-metrics dd.ay-metric-warn { color: #b45309; }
.ay-session-actions {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.ay-session-actions form { margin: 0; }

.ay-create { max-width: min(1100px, 100%); min-width: 0; overflow-x: hidden; }
.ay-create-form,
.ay-panel,
.ay-options,
.ay-promote-mode-wrap,
.ay-stream-setup,
.ay-stream-preview,
.ay-stream-setup-grid,
.ay-promote-mode,
.ay-size-mode,
.ay-fee-levels,
.ay-session-grid {
  min-width: 0;
  max-width: 100%;
}
.ay-create select,
.ay-create input,
.ay-create .field {
  max-width: 100%;
  min-width: 0;
}
.ay-steps {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem;
  padding: .35rem; background: #f3f4f6; border-radius: var(--radius-md);
}
.ay-step {
  flex: 1; min-width: 7.5rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 700; color: var(--text-muted);
}
.ay-step .n {
  width: 1.45rem; height: 1.45rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e5e7eb; color: var(--text-mid); font-size: .75rem;
}
.ay-step.is-active {
  background: #fff; color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}
.ay-step.is-active .n {
  background: var(--brand-gradient); color: #fff;
}
.ay-step.is-done { color: var(--text-mid); }
.ay-step.is-done .n { background: #a7f3d0; color: var(--ok); }
.ay-panel-title {
  margin: 0 0 .85rem; font-size: 1rem; font-weight: 800;
}
.ay-panel-nav {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.field-hint { margin: .35rem 0 0; font-size: .8rem; line-height: 1.4; }

.ay-fee-levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .85rem;
  align-items: start;
}
.ay-fee-level {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}
.ay-fee-level-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .65rem .85rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
}
.ay-fee-level-head h5 {
  margin: 0; font-size: .92rem; font-weight: 800; letter-spacing: -.01em;
}
.ay-fee-table { margin: 0; }
.ay-fee-table th, .ay-fee-table td { vertical-align: middle; }
.ay-fee-table th { font-size: .72rem; }
.ay-fee-table td { padding-top: .45rem; padding-bottom: .45rem; }
.ay-col-remove { width: 2.5rem; text-align: center; }
.ay-col-remove .btn { padding: .25rem .4rem; min-width: 0; color: var(--text-muted); }
.ay-col-remove .btn:hover { color: var(--danger, #dc2626); }
.ay-amount { max-width: 6.5rem; text-align: right; margin-left: auto; }
.ay-fee-empty { margin: .65rem .85rem; font-size: .82rem; }
.ay-fee-add {
  padding: .55rem .75rem .7rem;
  border-top: 1px solid var(--border-light);
  background: #fafbfc;
}
.ay-fee-add-select {
  width: 100%; margin: 0;
  font-size: .82rem; font-weight: 600;
  color: var(--text-mid);
}
.ay-fee-new-name {
  width: 100%; margin: 0; font-size: .85rem; font-weight: 600;
}
.ay-skip-fees { margin: .9rem 0 0; display: inline-flex; }

.ay-panel-lead { margin: -.35rem 0 1rem; font-size: .9rem; line-height: 1.45; max-width: 36rem; }

.ay-review {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1.15rem;
}
@media (max-width: 699.98px) {
  .ay-review { grid-template-columns: 1fr; }
}
.ay-review-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
  padding: .75rem .9rem;
}
.ay-review-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.ay-review-value {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.35;
  word-break: break-word;
}

.ay-options { display: grid; gap: .75rem; }
.ay-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .85rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.ay-option:hover { border-color: #c7cdd6; box-shadow: var(--shadow-sm); }
.ay-option.is-disabled {
  opacity: .55;
  background: #f9fafb;
  box-shadow: none;
}
.ay-option.is-disabled:hover { border-color: var(--border-light); box-shadow: none; }
.ay-option-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.12));
  color: var(--brand-primary);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.ay-option-body { min-width: 0; }
.ay-option-title {
  font-size: .98rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
}
.ay-option-desc {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-mid);
  font-weight: 500;
}
.ay-option-note {
  margin: .45rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--warn, #b45309);
}

.ay-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.ay-switch input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
}
.ay-switch-ui {
  width: 2.75rem; height: 1.55rem;
  border-radius: 999px;
  background: #d1d5db;
  border: 1px solid #c4c9d1;
  position: relative;
  transition: background .15s, border-color .15s;
  display: block;
}
.ay-switch-ui::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 1.15rem; height: 1.15rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .15s;
}
.ay-switch input:checked + .ay-switch-ui {
  background: var(--brand-gradient);
  border-color: transparent;
}
.ay-switch input:checked + .ay-switch-ui::after {
  transform: translateX(1.15rem);
}
.ay-switch input:focus-visible + .ay-switch-ui {
  box-shadow: 0 0 0 3px rgba(102,126,234,.25);
}
.ay-switch input:disabled + .ay-switch-ui {
  opacity: .7;
  cursor: not-allowed;
}
.ay-option.is-on {
  border-color: rgba(102,126,234,.35);
  box-shadow: 0 0 0 3px rgba(102,126,234,.08);
}

/* Cipta sesi · cara naik tahun + tetapan streaming */
.ay-promote-mode-wrap {
  display: grid;
  gap: .75rem;
  padding: .15rem 0 .25rem;
}
.ay-stream-section-label {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.ay-promote-mode {
  display: grid;
  gap: .65rem;
}
@media (min-width: 640px) {
  .ay-promote-mode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ay-promote-mode-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ay-promote-mode-card:hover { border-color: #c7cdd6; box-shadow: var(--shadow-sm); }
.ay-promote-mode-card.is-on {
  border-color: rgba(102,126,234,.4);
  box-shadow: 0 0 0 3px rgba(102,126,234,.08);
  background: #fafbff;
}
.ay-promote-mode-card input,
.ay-size-mode-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.ay-promote-mode-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.ay-promote-mode-card.is-on .ay-promote-mode-icon {
  background: linear-gradient(135deg, rgba(102,126,234,.14), rgba(118,75,162,.1));
  color: var(--brand-primary);
}
.ay-promote-mode-text {
  display: grid;
  gap: .2rem;
  min-width: 0;
}
.ay-promote-mode-text strong {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
}
.ay-promote-mode-text small {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.ay-stream-setup {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fafbfc;
  padding: 1rem 1.05rem;
  display: grid;
  gap: 1rem;
  animation: ayStreamIn .18s ease-out;
}
@keyframes ayStreamIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.ay-stream-setup-grid {
  display: grid;
  gap: .85rem;
}
@media (min-width: 720px) {
  .ay-stream-setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ay-stream-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}
.ay-quota-block { display: grid; gap: .55rem; }
.ay-quota-block[hidden],
.ay-headcount-block[hidden] {
  display: none !important;
}
.ay-quota-head { display: grid; gap: .2rem; }
.ay-quota-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.ay-quota-tab {
  appearance: none;
  border: 1px solid var(--border-light);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.ay-quota-tab.is-active {
  border-color: rgba(102,126,234,.45);
  color: var(--brand-primary);
  background: rgba(102,126,234,.06);
}
.ay-quota-pane { display: grid; gap: .4rem; }
.ay-quota-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem;
  align-items: center;
  padding: .4rem .55rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.ay-quota-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-dark);
}
.ay-quota-input {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 700;
}
.ay-quota-input input {
  width: 4.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: .3rem .4rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.ay-quota-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border-light);
}
.ay-quota-total.is-ok {
  border-color: rgba(22,163,74,.35);
  color: #15803d;
  background: rgba(22,163,74,.06);
}
.ay-quota-total.is-bad {
  border-color: rgba(220,38,38,.3);
  color: #b91c1c;
  background: rgba(220,38,38,.05);
}
.ay-stream-save-default {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 650;
  color: var(--text-dark);
  cursor: pointer;
}
.ay-stream-save-default input { margin-top: .2rem; }
.ay-stream-forecast {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  padding-top: .15rem;
  border-top: 1px dashed var(--border-light);
}
.ay-stream-preview {
  display: grid;
  gap: .65rem;
  padding: .85rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
}
.ay-stream-preview[hidden] { display: none !important; }
.ay-stream-preview-head {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-start;
  justify-content: space-between;
}
.ay-stream-preview-status {
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
}
.ay-stream-preview-status.is-ok { color: #15803d; font-weight: 650; }
.ay-stream-preview-status.is-error { color: #b91c1c; font-weight: 650; }
.ay-stream-preview-meta {
  font-size: .85rem;
  margin-bottom: .35rem;
}
.ay-stream-preview-groups {
  display: grid;
  gap: .45rem;
  max-height: 22rem;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: .15rem;
}
.ay-stream-preview-group {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fafbfc;
}
.ay-stream-preview-group > summary {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  align-items: center;
  padding: .55rem .7rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.ay-stream-preview-group > summary::-webkit-details-marker { display: none; }
.ay-spg-title { font-weight: 800; color: var(--text-dark); }
.ay-spg-count {
  font-size: .78rem;
  font-weight: 800;
  color: var(--brand-primary);
  background: rgba(102,126,234,.08);
  padding: .15rem .45rem;
  border-radius: 999px;
}
.ay-spg-from { font-size: .78rem; font-weight: 600; }
.ay-stream-preview-list {
  list-style: none;
  margin: 0;
  padding: 0 .7rem .65rem;
  display: grid;
  gap: .25rem;
}
.ay-stream-preview-list li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto;
  gap: .35rem .5rem;
  align-items: baseline;
  font-size: .82rem;
  padding: .2rem 0;
  border-top: 1px solid var(--border-light);
}
.ay-stream-preview-list .n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ay-stream-preview-list .name { font-weight: 650; color: var(--text-dark); }
.ay-stream-preview-list .meta { font-size: .75rem; text-align: right; }
.ay-delta {
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ay-delta.is-up { color: #15803d; }
.ay-delta.is-down { color: #b91c1c; }
.ay-delta.is-flat { color: var(--text-muted); font-weight: 650; }
@media (max-width: 640px) {
  .ay-stream-preview-list li {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  }
  .ay-stream-preview-list .meta { grid-column: 2 / -1; text-align: left; }
}

.ay-size-mode {
  display: grid;
  gap: .5rem;
  margin-top: .35rem;
}
@media (min-width: 720px) {
  .ay-size-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ay-size-mode-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ay-size-mode-card:hover { border-color: #c7cdd6; box-shadow: var(--shadow-sm); }
.ay-size-mode-card.is-on {
  border-color: rgba(102,126,234,.4);
  box-shadow: 0 0 0 3px rgba(102,126,234,.08);
  background: #fafbff;
}
.ay-size-mode-card strong {
  font-size: .88rem;
  font-weight: 800;
  color: var(--text-dark);
}
.ay-size-mode-card small {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.ay-headcount-preview {
  font-size: .82rem;
  line-height: 1.5;
  padding: .65rem .75rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.ay-promote-hero {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
  justify-content: space-between; margin-bottom: 1rem;
}
.ay-promote-path {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-weight: 800; font-size: 1.05rem;
}
.ay-promote-path .arrow { color: var(--brand-primary); }
.ay-fee-level-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .65rem; margin-top: .5rem;
}
.ay-fee-level-chip {
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: .65rem .75rem; background: #fafbfc;
}
.ay-fee-level-chip strong { display: block; font-size: .85rem; margin-bottom: .15rem; }
.ay-fee-level-chip .amt { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-primary); }
.ay-promote-sticky {
  position: sticky; bottom: 0; z-index: 5;
  margin: 1rem -0.25rem 0; padding: .85rem 1rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end;
}

/* Fee claims hub (staf) */
.fc-hub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 960px;
}
.fc-intro {
  margin: -.35rem 0 0;
  padding: .9rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
}
.fc-intro p {
  margin: 0;
  max-width: 44rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.fc-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.fc-metric {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.fc-metric-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: #eef2f7;
  color: #0b2a5b;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.fc-metric-pending .fc-metric-ico { background: #fff7ed; color: #c2410c; }
.fc-metric strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.fc-metric span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
}
.fc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .3rem;
  background: #eef1f6;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.fc-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-mid);
  text-decoration: none;
  white-space: nowrap;
}
.fc-tab:hover { color: var(--text-dark); background: rgba(255,255,255,.55); }
.fc-tab.is-active {
  background: #fff;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}
.fc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #c2410c;
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}
.fc-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed var(--border-light);
  background: #fff;
}
.fc-empty-ico {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 1.35rem;
  margin-bottom: .55rem;
}
.fc-empty h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.fc-empty p {
  margin: 0 auto .9rem;
  max-width: 22rem;
  color: var(--text-mid);
  font-size: .9rem;
}
.fc-list-card {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
}
.fc-list { list-style: none; margin: 0; padding: 0; }
.fc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #eef2f7;
}
.fc-item:last-child { border-bottom: 0; }
.fc-item:hover { background: #f8fafc; }
.fc-item.is-pending { border-left: 3px solid #f59e0b; }
.fc-item.is-approved { border-left: 3px solid #10b981; }
.fc-item.is-rejected { border-left: 3px solid #ef4444; }
.fc-item-main { min-width: 0; flex: 1; }
.fc-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  margin-bottom: .3rem;
}
.fc-item-title strong {
  font-size: .98rem;
  color: var(--text-dark);
}
.fc-pill {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  background: #eef2f7;
  color: #334155;
}
.fc-pill.is-warn { background: #ffedd5; color: #9a3412; }
.fc-pill.is-ok { background: #d1fae5; color: #065f46; }
.fc-pill.is-danger { background: #fee2e2; color: #991b1b; }
.fc-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-mid);
}
.fc-item-meta i { margin-right: .2rem; opacity: .75; }
.fc-item-fees {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: #475569;
  line-height: 1.4;
}
.fc-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  flex-shrink: 0;
}
.fc-item-amt {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0b2a5b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .fc-metrics { grid-template-columns: 1fr; }
  .fc-tabs { width: 100%; overflow-x: auto; }
  .fc-item {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-item-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .fc-item-side .btn { flex: 0 0 auto; }
}

/* Fee claim detail */
.fc-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
  border-left: 4px solid #94a3b8;
}
.fc-detail-head.is-pending { border-left-color: #f59e0b; }
.fc-detail-head.is-approved { border-left-color: #10b981; }
.fc-detail-head.is-rejected { border-left-color: #ef4444; }
.fc-detail-head-main { display: flex; flex-direction: column; gap: .45rem; }
.fc-detail-class {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-mid);
}
.fc-detail-class i { margin-right: .25rem; opacity: .75; }
.fc-detail-amt-block { text-align: right; }
.fc-detail-amt-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mid);
  margin-bottom: .2rem;
}
.fc-detail-amt {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0b2a5b;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.fc-panel {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 1rem 1.1rem 1.15rem;
}
.fc-panel-head {
  margin: 0 0 .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid #eef2f7;
}
.fc-panel-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.fc-panel-head h2 i { color: #64748b; font-size: 1rem; }
.fc-facts {
  display: grid;
  gap: .75rem;
  margin: 0 0 1rem;
}
.fc-facts dt {
  margin: 0 0 .15rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-mid);
}
.fc-facts dd {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-dark);
}
.fc-fee-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-fee-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: .9rem;
}
.fc-fee-lines li:last-child { border-bottom: 0; }
.fc-fee-lines span { color: var(--text-dark); font-weight: 600; }
.fc-fee-lines strong {
  font-variant-numeric: tabular-nums;
  color: #0b2a5b;
  white-space: nowrap;
}
.fc-muted-note {
  margin: 0;
  font-size: .86rem;
  color: var(--text-mid);
}
.fc-proof-btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  max-width: 100%;
}
.fc-proof-name {
  font-weight: 600;
  font-size: .78rem;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}
.fc-alert {
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: #f8fafc;
}
.fc-alert strong { display: block; font-size: .88rem; margin-bottom: .25rem; }
.fc-alert p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--text-mid); }
.fc-alert p a { font-weight: 700; }
.fc-alert.is-danger { background: #fff8f7; border-color: #fecdca; }
.fc-alert.is-danger strong { color: #991b1b; }
.fc-alert.is-ok { background: #f4fbf7; border-color: #b7e4c7; }
.fc-alert.is-ok strong { color: #065f46; }
.fc-actions-panel { border-color: #cbd5e1; }
.fc-actions-hint {
  margin: 0 0 1rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.fc-form { margin: 0; }
.fc-form-approve {
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid #eef2f7;
}
.fc-field {
  display: block;
  margin-bottom: .85rem;
}
.fc-field > span {
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-mid);
}
.fc-field select,
.fc-field textarea {
  width: 100%;
  max-width: 28rem;
  min-height: 2.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.fc-field textarea { min-height: 5rem; resize: vertical; }
@media (max-width: 720px) {
  .fc-detail-grid { grid-template-columns: 1fr; }
  .fc-detail-amt-block { text-align: left; }
  .fc-field select,
  .fc-field textarea { max-width: none; }
}

/* Continue-confirm */
.cc-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cc-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .8fr);
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.cc-kicker {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-progress-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-bottom: .55rem;
}
.cc-progress-row strong {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-dark);
}
.cc-progress-row strong span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.cc-progress-row > span {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef0f4;
  overflow: hidden;
}
.cc-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.cc-page.is-complete .cc-bar > span {
  background: linear-gradient(90deg, #34d399, #059669);
}
.cc-summary-note {
  margin: .7rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.cc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.cc-legend li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #f4f5f7;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-legend strong {
  font-weight: 800;
  color: var(--text-dark);
}
.cc-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  margin: 0;
}
.cc-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: #f8f9fb;
}
.cc-stats dt {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-mid);
}
.cc-stats dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.cc-stats .is-warn { background: #fff7ed; }
.cc-stats .is-warn dd { color: #c2410c; }
.cc-stats .is-ok { background: #f0fdf4; }
.cc-stats .is-ok dd { color: #047857; }
.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem .8rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
}
.cc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.cc-level { display: flex; flex-direction: column; gap: .7rem; }
.cc-level-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .65rem;
  padding: 0 .15rem;
}
.cc-level-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-dark);
}
.cc-level-head p {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.cc-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .7rem;
}
.cc-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  min-height: 7.2rem;
  overflow: hidden;
  padding: .9rem .95rem .8rem;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cc-card:hover {
  color: inherit;
  border-color: #c7d2fe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.cc-card.is-pending { border-color: #fed7aa; background: linear-gradient(180deg, #fffaf5 0%, #fff 42%); }
.cc-card.is-done { border-color: #e5e7eb; }
.cc-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.cc-card-top h3 {
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-dark);
}
.cc-badge {
  flex-shrink: 0;
  padding: .16rem .45rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.cc-badge-warn { background: #ffedd5; color: #9a3412; }
.cc-badge-ok { background: #dcfce7; color: #166534; }
.cc-card-teacher {
  margin: 0;
  min-width: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-card-teacher i { margin-right: .15rem; color: var(--text-muted); }
.cc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-mid);
}
.cc-card-foot i { color: #9ca3af; }
.cc-detail-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
}
.cc-detail-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.cc-detail-meta {
  margin: .25rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 800;
  color: var(--brand-primary);
}
.cc-back:hover { color: var(--brand-secondary); }
.cc-btn-out {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
  box-shadow: none;
}
.cc-btn-out:hover {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: none;
}
.cc-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 9.5rem;
}
.cc-field-grow { flex: 1 1 16rem; min-width: 12rem; }
.cc-toolbar .cc-field { flex: 1 1 13rem; max-width: 18rem; }
.cc-toolbar .cc-field-grow { max-width: none; }
.cc-field select { width: 100%; background: #fff; }
.cc-field label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.cc-field select,
.cc-search input {
  min-height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: #f8fafc;
  font-size: .9rem;
  font-weight: 600;
}
.cc-field select { padding: .4rem .65rem; }
.cc-search {
  position: relative;
  display: flex;
  align-items: center;
}
.cc-search > i {
  position: absolute;
  left: .7rem;
  color: #94a3b8;
  pointer-events: none;
}
.cc-search input {
  width: 100%;
  padding: .45rem .75rem .45rem 2.1rem;
  background: #fff;
}
.cc-filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.cc-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed var(--border-light);
  background: #fff;
}
.cc-empty-ico {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #eef2f7;
  color: #64748b;
  font-size: 1.35rem;
  margin-bottom: .55rem;
}
.cc-empty h2 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
}
.cc-empty p {
  margin: 0 auto;
  max-width: 22rem;
  color: var(--text-mid);
  font-size: .9rem;
}
.cc-banner {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: .88rem;
}
.cc-banner p { margin: 0; }
.cc-banner i { margin-top: .1rem; }
.cc-panel {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
}
.cc-panel-done { opacity: .98; }
.cc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
}
.cc-panel-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-dark);
}
.cc-panel-head p {
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--text-mid);
  font-weight: 600;
}
.cc-checkall {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  cursor: pointer;
}
.cc-checkall input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}
.cc-pkg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .85rem;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
  background: #f8fafc;
}
.cc-pkg-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.cc-pkg-toggle {
  display: inline-flex;
  padding: .2rem;
  border-radius: 10px;
  background: #e8edf3;
  gap: .2rem;
}
.cc-pkg-opt {
  margin: 0;
  cursor: pointer;
}
.cc-pkg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-pkg-opt span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-pkg-opt strong { font-weight: 800; color: inherit; }
.cc-pkg-opt input:checked + span {
  background: #fff;
  color: #0b2a5b;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cc-pkg-hint {
  margin: 0;
  flex: 1 1 12rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-mid);
}
.cc-seg {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 10px;
  background: #eef0f4;
  gap: 2px;
}
.cc-seg label {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}
.cc-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.cc-seg span {
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  padding: .38rem .7rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 800;
  color: #6b7280;
  white-space: nowrap;
}
.cc-seg em {
  font-style: normal;
  font-weight: 600;
  font-size: .72rem;
}
.cc-seg input:checked + span {
  background: #fff;
  color: var(--text-dark);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cc-seg input[value="B"]:checked + span { color: #5b21b6; }
.cc-seg input:focus-visible + span {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}
.cc-table-wrap { overflow-x: auto; }
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.cc-table th {
  text-align: left;
  padding: .65rem 1rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.cc-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover { background: #f8fafc; }
.cc-table tbody tr.is-selected,
.cc-table tbody tr.is-selected:hover { background: #f5f3ff; }
.cc-group td {
  padding: .5rem 1rem;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cc-col-check { width: 2.6rem; text-align: center; }
.cc-col-check input { width: 1.05rem; height: 1.05rem; }
.cc-col-actions { width: 1%; white-space: nowrap; }
.cc-student {
  font-weight: 800;
  color: var(--text-dark);
  text-decoration: none;
}
.cc-student:hover { color: var(--brand-primary); }
.cc-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .45rem;
  margin-top: .2rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-phone { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cc-class {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #eef2f7;
  font-size: .78rem;
  font-weight: 700;
  color: #334155;
}
.cc-guardian {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 8rem;
}
.cc-guardian span { font-weight: 600; color: var(--text-dark); }
.cc-guardian small { color: var(--text-mid); font-size: .78rem; }
.cc-pkg-select {
  min-width: 8.5rem;
  min-height: 2.15rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  padding: .3rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  background: #fff;
}
.cc-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: .35rem;
}
.cc-pill {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
}
.cc-pill-a { background: #eef2ff; color: #3730a3; }
.cc-pill-b { background: #f3e8ff; color: #6b21a8; }
.cc-pkg-change {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
}
.cc-pkg-change select {
  min-height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .4rem;
}
.cc-sticky {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 0;
  border-top: 1px solid var(--border-light);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}
.cc-sticky-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .8rem 1.1rem;
}
.cc-sticky-hint {
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cc-sticky-hint strong {
  font-weight: 800;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.cc-sticky.has-selection {
  border-top-color: #c7d2fe;
  background: rgba(245, 243, 255, .96);
}
.cc-sticky-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
@media (max-width: 820px) {
  .cc-summary { grid-template-columns: 1fr; }
  .cc-toolbar { align-items: stretch; }
  .cc-toolbar .cc-field,
  .cc-toolbar .cc-field-grow { max-width: none; flex-basis: 100%; }
  .cc-toolbar-actions { width: 100%; }
  .cc-toolbar-actions .btn { flex: 1; }
  .cc-seg em { display: none; }
  .cc-sticky-inner { flex-direction: column; align-items: stretch; }
  .cc-sticky-actions .btn { flex: 1; }
  .cc-col-actions { white-space: normal; }
}

/* Create-session confirm modal */
body.ay-modal-open { overflow: hidden; }
.ay-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ay-modal[hidden] { display: none !important; }
.ay-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .45);
  border: 0; padding: 0; cursor: pointer;
}
.ay-modal-dialog {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  overflow: hidden;
}
.ay-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
}
.ay-modal-head h3 {
  margin: 0; font-size: 1.05rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: .45rem;
}
.ay-modal-body {
  padding: 1rem 1.1rem;
  overflow: auto;
  flex: 1;
}
.ay-modal-foot {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--border-light);
  background: #fafbfc;
}
.ay-progress-modal .ay-modal-dialog { width: min(420px, 100%); }
.ay-resume-banner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-color: rgba(180, 83, 9, .35);
  background: #fffbeb;
}
.ay-resume-text { margin: 0; line-height: 1.45; max-width: 40rem; }
.ay-resume-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.ay-progress-phase {
  margin: 0 0 .85rem;
  font-weight: 700;
  font-size: .95rem;
}
.ay-progress-bar {
  height: .65rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: .85rem;
}
.ay-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: inherit;
  transition: width .25s ease;
}
.ay-progress-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .75rem;
  margin-bottom: .65rem;
  font-size: .88rem;
}
.ay-progress-stats .k { color: #64748b; font-weight: 600; }
.ay-progress-stats .v { font-weight: 800; font-variant-numeric: tabular-nums; }
.ay-progress-detail { margin: 0; font-size: .82rem; min-height: 1.2em; }
.ay-progress-error {
  margin: .75rem 0 0;
  padding: .65rem .75rem;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: .85rem;
  white-space: pre-wrap;
}
.ay-confirm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  margin-bottom: 1rem;
}
@media (max-width: 520px) {
  .ay-confirm-grid { grid-template-columns: 1fr; }
}
.ay-confirm-block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: .65rem .75rem;
  background: #f8fafc;
}
.ay-confirm-block .k {
  display: block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: .2rem;
}
.ay-confirm-block .v {
  display: block; font-size: .9rem; font-weight: 700; color: var(--text-dark);
  line-height: 1.35;
}
.ay-confirm-h {
  margin: 0 0 .55rem; font-size: .88rem; font-weight: 800;
}
.ay-confirm-fee {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: .55rem;
  overflow: hidden;
  background: #fff;
}
.ay-confirm-fee-head {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light);
  font-size: .85rem;
}
.ay-confirm-fee-head .amt {
  font-weight: 800; color: var(--brand-primary); font-variant-numeric: tabular-nums;
}
.ay-confirm-fee ul {
  list-style: none; margin: 0; padding: .35rem 0;
}
.ay-confirm-fee li {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .35rem .7rem;
  font-size: .84rem; font-weight: 600;
}
.ay-confirm-fee li span:last-child {
  font-variant-numeric: tabular-nums; color: var(--text-mid); white-space: nowrap;
}

/* Settings layout */
.settings-layout {
  display: grid;
  gap: 1rem;
  max-width: 820px;
}
.settings-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}
.geo-mode-bar {
  margin: 0 0 1rem;
  padding: .85rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}
.geo-mode-label {
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 750;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.geo-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.geo-mode-btn.is-active {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, .18);
}
.geo-mode-hint {
  margin: .65rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
}
.geo-map-wrap {
  margin: 0 0 .35rem;
}
.geo-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .75rem;
  margin-bottom: .35rem;
}
.geo-map-head strong {
  font-size: .9rem;
  font-weight: 800;
}
.geo-map-layers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.geo-layer-btn.is-active {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, .18);
}
.geo-map-hint {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 550;
  line-height: 1.4;
}
.geo-map-search {
  position: relative;
  margin: 0 0 .55rem;
  z-index: 5;
}
.geo-search-row {
  display: flex;
  gap: .4rem;
  align-items: stretch;
}
.geo-search-row input[type="search"] {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.geo-search-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.geo-search-results {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  max-height: 12rem;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}
.geo-search-results[hidden] { display: none !important; }
.geo-search-results li { margin: 0; border-bottom: 1px solid #f1f5f9; }
.geo-search-results li:last-child { border-bottom: none; }
.geo-search-hit {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: .55rem .7rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: 1.35;
}
.geo-search-hit:hover,
.geo-search-hit:focus {
  background: #f8fafc;
  outline: none;
}
.geo-search-hit i {
  color: #6366f1;
  margin-top: .1rem;
  flex-shrink: 0;
}
.geo-search-hit span {
  font-size: .82rem;
  font-weight: 600;
  color: #334155;
}
.geo-search-empty {
  padding: .65rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: #64748b;
}
.geo-map {
  width: 100%;
  height: 280px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  z-index: 1;
  background: #e2e8f0;
}
.geo-map .leaflet-tooltip {
  font-size: .72rem;
  font-weight: 750;
  padding: .15rem .4rem;
  border: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}
@media (min-width: 720px) {
  .geo-map { height: 340px; }
}
.settings-study-lead { margin: 0 0 .85rem; }
.settings-study-table-wrap {
  max-height: 18rem;
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.settings-study-table { margin: 0; font-size: .86rem; }
.settings-study-table th,
.settings-study-table td {
  padding: .45rem .65rem;
  vertical-align: middle;
}
.settings-study-table tr.is-selected td { background: #eff6ff; }
.settings-study-table tr.is-current td { font-weight: 650; }
.settings-study-label { margin-right: .35rem; }
.settings-study-days-cell { color: var(--text-mid); }
.settings-study-editor {
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.settings-study-editor-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  margin-bottom: .75rem;
}
.settings-study-editor-head label {
  font-weight: 700;
  font-size: .82rem;
  margin: 0;
}
.settings-study-editor-head select {
  min-width: 14rem;
  flex: 1;
}
@media (max-width: 575.98px) {
  .settings-study-table-wrap { max-height: 14rem; }
  .settings-study-editor-head { flex-direction: column; align-items: stretch; }
}

/* ===== Streaming profile manager ===== */
.stream-profile-panel {
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
}
.stream-profile-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  user-select: none;
}
.stream-profile-panel > summary::-webkit-details-marker { display: none; }
.stream-profile-summary-main {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.stream-profile-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(102,126,234,.14), rgba(118,75,162,.1));
  color: var(--brand-primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.stream-profile-summary-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
}
.stream-profile-summary-text small {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36rem;
}
.stream-profile-chevron {
  color: var(--text-muted);
  font-size: .95rem;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.stream-profile-panel[open] > summary {
  border-bottom: 1px solid var(--border-light);
}
.stream-profile-panel[open] .stream-profile-chevron {
  transform: rotate(180deg);
}
.stream-profile-body {
  padding: 1rem 1.1rem 1.15rem;
  display: grid;
  gap: 1rem;
}
.stream-profile-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .75rem .9rem;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.stream-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  min-width: 0;
}
.stream-profile-meta .label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-right: .15rem;
}
.stream-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  background: #f1f5f9;
  color: var(--text-mid);
  border: 1px solid var(--border-light);
}
.stream-chip.is-name {
  background: #eef2ff;
  color: #4338ca;
  border-color: #e0e7ff;
}
.stream-chip.is-muted {
  background: #f8fafc;
  color: var(--text-muted);
  border-color: #eef2f7;
}
.stream-chip.is-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.stream-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.stream-profile-save {
  padding: .85rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
}
.stream-profile-save-title {
  margin: 0 0 .65rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-mid);
}
.stream-profile-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem .75rem;
  align-items: flex-end;
}
.stream-profile-save-row .field {
  margin: 0;
  min-width: 12rem;
  flex: 1 1 14rem;
}
.stream-profile-save-row .field label {
  margin-bottom: .3rem;
}
.stream-profile-save-opts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
  flex: 0 0 auto;
}
.stream-profile-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-mid);
  margin: 0;
  white-space: nowrap;
}
.stream-profile-check input {
  margin: 0;
}
.stream-profile-hint {
  margin: .55rem 0 0;
  font-size: .78rem;
  color: var(--text-muted);
}
@media (max-width: 575.98px) {
  .stream-profile-summary-text small { max-width: 12rem; }
  .stream-profile-active { flex-direction: column; align-items: stretch; }
  .stream-profile-actions { width: 100%; }
  .stream-profile-actions .btn { flex: 1; }
}

/* Staff attendance floating save */
.staff-att-form.has-float-save {
  padding-bottom: 0;
}
html.staff-att-float-on .staff-att-form.has-float-save {
  padding-bottom: 4.75rem;
}
.staff-att-save-static {
  margin-top: 1rem;
  padding-bottom: .25rem;
}
.staff-att-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  transform: translateY(110%);
  transition: transform .22s ease, opacity .22s ease;
  opacity: 0;
}
.staff-att-float.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.staff-att-float-inner {
  pointer-events: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  border-top: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .1);
}
.staff-att-float-hint {
  font-size: .82rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-att-float .btn {
  flex-shrink: 0;
  min-width: 8.5rem;
}
@media (min-width: 992px) {
  .staff-att-float {
    left: 240px;
  }
}
@media print {
  .staff-att-float { display: none !important; }
  html.staff-att-float-on .staff-att-form.has-float-save { padding-bottom: 0; }
}

/* ===== Roles / RBAC matrix ===== */
.roles-topbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.roles-alert {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-bottom: 1rem;
}
.roles-alert p { margin: .2rem 0 0; font-size: .9rem; }
.roles-layout {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.roles-layout > * { min-width: 0; }
.roles-sidebar {
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: calc(var(--app-chrome-h, 3.75rem) + .5rem);
}
.roles-sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: .9rem 1rem .55rem;
  border-bottom: 1px solid var(--border-light);
}
.roles-sidebar-head h3 { margin: 0; font-size: .95rem; }
.roles-nav {
  display: flex; flex-direction: column;
  max-height: min(52vh, 28rem);
  overflow-y: auto;
  padding: .4rem;
}
.roles-nav-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  text-decoration: none;
  border: 1px solid transparent;
}
.roles-nav-item:hover {
  background: #f8fafc;
  color: var(--text-dark);
}
.roles-nav-item.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.roles-nav-item.is-inactive { opacity: .72; }
.roles-nav-name { font-weight: 700; font-size: .9rem; }
.roles-nav-meta {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  font-size: .72rem;
}
.roles-nav-meta code {
  font-size: .7rem; background: #f1f5f9; padding: .1rem .35rem;
  border-radius: 4px; color: var(--text-mid);
}
.roles-pill {
  display: inline-flex; align-items: center;
  padding: .12rem .4rem; border-radius: 4px;
  font-size: .68rem; font-weight: 700;
  border: 1px solid var(--border-light);
  background: #f8fafc; color: var(--text-mid);
}
.roles-pill.is-system { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.roles-pill.is-on { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.roles-pill.is-off { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.roles-pill.is-muted { background: #f1f5f9; color: var(--text-muted); }
.roles-create {
  border-top: 1px solid var(--border-light);
  padding: .35rem .55rem .75rem;
}
.roles-create > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .45rem; font-weight: 700; font-size: .88rem;
  color: var(--brand-primary);
}
.roles-create > summary::-webkit-details-marker { display: none; }
.roles-create-form {
  display: grid; gap: .55rem;
  padding: 0 .45rem .25rem;
}
.roles-create-form .field { margin: 0; }
.roles-create-hint { margin: 0; font-size: .75rem; }
.roles-hero {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: flex-start;
}
.roles-hero-main { display: flex; gap: .85rem; min-width: 0; flex: 1; }
.roles-hero-icon {
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(145deg, rgba(102,126,234,.16), rgba(118,75,162,.12));
  color: var(--brand-primary); font-size: 1.15rem;
}
.roles-hero-text h2 {
  margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 800;
}
.roles-hero-tags {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-bottom: .35rem;
}
.roles-hero-tags code {
  font-size: .75rem; background: #f1f5f9; padding: .15rem .4rem;
  border-radius: 4px;
}
.roles-hero-desc {
  margin: .25rem 0 0; color: var(--text-mid); font-size: .9rem;
}
.roles-hero-note {
  margin: .45rem 0 0; font-size: .82rem; color: var(--text-muted);
  display: flex; gap: .4rem; align-items: flex-start;
}
.roles-hero-note i { margin-top: .15rem; }
.roles-hero-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

.roles-matrix-card {
  padding: 0;
  overflow: visible;
  margin-bottom: 0;
  max-width: 100%;
}
.roles-matrix-sentinel {
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.roles-matrix-sticky {
  position: sticky;
  top: var(--app-chrome-h, 3.75rem);
  z-index: 25;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.roles-matrix-sticky.is-stuck {
  border-bottom-color: var(--border-light);
  box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .45);
}
.roles-matrix-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .85rem;
  flex-wrap: wrap;
  padding: .95rem 1.1rem;
  margin: 0;
}
.roles-matrix-title h3 {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 800;
}
.roles-matrix-title .muted {
  margin: 0;
  font-size: .82rem;
  max-width: 36rem;
}
.roles-matrix-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  justify-content: flex-end;
}

.rbac-modules {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.rbac-mod-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
  align-items: start;
  gap: .65rem 1rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
}
.rbac-mod-row:last-child { border-bottom: 0; }
.rbac-mod-row:nth-child(even) { background: #fafbfd; }
.rbac-mod-head {
  min-width: 0;
  padding-top: .25rem;
}
.rbac-mod-head h4 {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
}
.rbac-mod-count {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 600;
}
.rbac-mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}
.rbac-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #fff;
  font-size: .78rem;
  font-weight: 650;
  color: var(--text-mid);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.rbac-toggle:hover {
  border-color: #c7d2fe;
  background: #f8fafc;
}
.rbac-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rbac-toggle i {
  font-size: .9rem;
  color: var(--brand-primary);
  opacity: .75;
}
.rbac-toggle.is-on {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .12);
}
.rbac-toggle.is-on i { opacity: 1; }
.rbac-toggle.is-locked {
  cursor: default;
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
  box-shadow: none;
}
.rbac-toggle.is-locked i { color: #059669; opacity: 1; }

.roles-save-static {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1rem; padding-bottom: .25rem;
}
.roles-float {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  transform: translateY(110%); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.roles-float.is-visible {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
.roles-float-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -6px 24px rgba(15,23,42,.1);
}
html.roles-float-on .roles-matrix-form { padding-bottom: 4.5rem; }
@media (min-width: 992px) {
  .roles-float { left: 240px; }
}
@media (max-width: 991.98px) {
  .roles-layout { grid-template-columns: 1fr; }
  .roles-sidebar { position: static; }
  .roles-nav { max-height: 12rem; flex-direction: row; flex-wrap: wrap; }
  .roles-nav-item { flex: 1 1 10rem; }
  .roles-matrix-head { padding: .85rem 1rem; }
  .rbac-mod-row {
    grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr);
    padding: .75rem 1rem;
    gap: .5rem .75rem;
  }
}
@media (max-width: 520px) {
  .rbac-mod-row { grid-template-columns: 1fr; }
}
@media print {
  .roles-float { display: none !important; }
  html.roles-float-on .roles-matrix-form { padding-bottom: 0; }
  .roles-matrix-sticky { position: static; box-shadow: none; }
}


/* ===== Portal penjaga (mobile-first · tema biru merah emas) ===== */
.portal-body {
  --p-ink: #0f172a;
  --p-muted: #5b6b7c;
  --p-line: #d7e0ec;
  --p-surface: #fbfcfe;
  --p-surface-2: #eef2f8;
  --p-brand: #1a4d9e;
  --p-brand-deep: #0b2a5b;
  --p-brand-soft: #e4ecf8;
  --p-accent: #c6a046;
  --p-gold: #c6a046;
  --p-gold-bright: #e8c978;
  --p-red: #b91c1c;
  --p-red-deep: #7f1d1d;
  --p-red-soft: #fee2e2;
  --p-danger: #b91c1c;
  --p-ok: #067647;
  --p-warn: #b54708;
  --p-radius: 18px;
  --p-shadow: 0 10px 28px rgba(11, 42, 91, 0.10);
  --p-tab-h: calc(72px + env(safe-area-inset-bottom, 0px));
  font-family: "Outfit", var(--font-main), system-ui, sans-serif;
  color: var(--p-ink);
  background: var(--p-surface-2);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-bottom: var(--p-tab-h);
  -webkit-font-smoothing: antialiased;
}
.portal-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      #0b2a5b 0%,
      #123a7a 38%,
      #7f1d1d 72%,
      #9b1c1c 88%,
      var(--p-surface-2) 100%),
    var(--p-surface-2);
  background-size: 100% 11rem, 100% 100%;
  background-repeat: no-repeat;
  padding: 0 0 1.25rem;
}
.portal-body:not(.is-home) .portal-shell {
  background:
    linear-gradient(180deg,
      #0b2a5b 0%,
      #123a7a 42%,
      #7f1d1d 78%,
      #9b1c1c 100%,
      var(--p-surface-2) 100%),
    var(--p-surface-2);
  background-size: 100% 5.5rem, 100% 100%;
  background-repeat: no-repeat;
}
.portal-mesh {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: 14rem;
  opacity: .7;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(185, 28, 28, .42), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(232, 201, 120, .28), transparent 40%),
    radial-gradient(circle at 55% 18%, rgba(26, 77, 158, .35), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23e8c978' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M36 4 L44 20 L60 20 L48 32 L52 48 L36 40 L20 48 L24 32 L12 20 L28 20 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 72px 72px;
  background-position: center top, center top, center top, center 1.2rem;
  mask-image: linear-gradient(180deg, #000 35%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 95%);
  z-index: 0;
}
.portal-body:not(.is-home) .portal-mesh { height: 7rem; opacity: .55; }
.portal-top,
.portal-year-bar,
.portal-child-bar,
.portal-main,
.portal-flash { position: relative; z-index: 1; }

.portal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.05rem .75rem;
  padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
  color: #fff;
  position: relative;
  z-index: 40;
  background: linear-gradient(90deg, rgba(11, 42, 91, .35) 0%, rgba(185, 28, 28, .28) 55%, rgba(127, 29, 29, .22) 100%);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(232, 201, 120, .28);
  box-shadow: inset 0 -2px 0 rgba(185, 28, 28, .45);
}
.portal-top-brand,
.portal-brand-block {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1;
}
.portal-mark {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: linear-gradient(145deg, #f0d78a, #c6a046 55%, #9a7a2e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  padding: 2px;
  color: #0b2a5b;
  font-weight: 800;
  font-size: .9rem;
  border-radius: 0;
}
.portal-mark-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: #fff;
  padding: .2rem;
}
.portal-top-titles { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.portal-eyebrow {
  margin: 0;
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}
.portal-brand {
  display: block;
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.portal-sub {
  display: block;
  font-size: .66rem;
  font-weight: 650;
  color: rgba(232, 201, 120, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portal-top-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.portal-top-actions form.logout-form { display: flex; }
button.portal-icon-btn {
  padding: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
}
.portal-icon-btn {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(198, 160, 70, .35);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: background .12s ease, border-color .12s ease;
  box-shadow: none;
}
.portal-icon-btn:hover,
.portal-icon-btn:active {
  background: rgba(198, 160, 70, .22);
  border-color: rgba(232, 201, 120, .55);
  color: #fff;
}

.portal-year-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 1.05rem .75rem;
  padding: .45rem .65rem;
  border-radius: 14px;
  background: rgba(251, 253, 250, .92);
  border: 1px solid rgba(198, 160, 70, .28);
  box-shadow: 0 8px 18px rgba(11, 42, 91, .08);
}
.portal-year-bar label,
.portal-year-bar-static span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--p-muted);
  white-space: nowrap;
}
.portal-year-bar select {
  flex: 1;
  min-width: 0;
  min-height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--p-line);
  background: #fff;
  color: var(--p-brand-deep);
  font-weight: 800;
  font-size: .92rem;
  font-family: inherit;
  padding: .35rem .6rem;
}

.portal-child-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 1.05rem .85rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(251, 253, 250, .94);
  border: 1px solid rgba(198, 160, 70, .28);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(11, 42, 91, .08);
}
.portal-child-bar-back {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  color: var(--p-brand-deep);
  text-decoration: none;
  flex: 0 0 auto;
}
.portal-child-links {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.portal-child-links::-webkit-scrollbar { display: none; }
.portal-child-links a {
  flex: 0 0 auto;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--p-muted);
}
.portal-child-links a.is-active {
  background: var(--p-brand-deep);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(198, 160, 70, .35);
}

.portal-main {
  flex: 1;
  padding: .25rem 1.05rem .5rem;
  position: relative;
  z-index: 1;
}
.portal-body.is-home .portal-main { padding-top: .1rem; }
.portal-main .topbar {
  padding: .15rem 0 .85rem;
  border: 0;
  margin: 0;
  display: block;
}
.portal-main .topbar h1,
.portal-page-title {
  margin: .1rem 0 0;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--p-brand-deep);
  font-weight: 800;
}
.portal-main .eyebrow,
.portal-kicker {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--p-muted);
}
.portal-main .eyebrow a,
.portal-kicker a {
  color: var(--p-brand);
  font-weight: 800;
}

.portal-hero {
  margin: 0 0 1.15rem;
  padding: 1.05rem 1rem 1.15rem;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .94), rgba(11, 42, 91, .98) 55%, rgba(127, 29, 29, .55)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .42);
  box-shadow:
    0 18px 40px rgba(11, 42, 91, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.portal-hero::after { display: none; }
.portal-hero-ornament {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23e8c978' stroke-opacity='0.14' d='M28 2 L34 14 L46 14 L36 24 L40 36 L28 30 L16 36 L20 24 L10 14 L22 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  pointer-events: none;
}
.portal-hero-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .55rem auto .75rem;
  max-width: 12rem;
  z-index: 1;
}
.portal-hero-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 201, 120, .55), transparent);
}
.portal-hero-rule i {
  width: .5rem;
  height: .5rem;
  background: #e8c978;
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(232, 201, 120, .18);
}
.portal-hero .eyebrow,
.portal-hero .portal-kicker {
  color: rgba(232, 201, 120, .88);
  position: relative;
  z-index: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
}
.portal-hero h1 {
  margin: .2rem 0 .55rem;
  font-size: clamp(1.35rem, 5vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  position: relative;
  z-index: 1;
  font-weight: 800;
}
.portal-hero .muted,
.portal-hero p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.portal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  position: relative;
  z-index: 1;
}
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 750;
  background: rgba(232, 201, 120, .16);
  color: #f6e7c3;
  border: 1px solid rgba(198, 160, 70, .35);
}
.portal-chip.is-soft {
  background: rgba(0,0,0,.18);
  border-color: transparent;
  color: rgba(255,255,255,.88);
}

.portal-section { margin: 0 0 .25rem; }
.portal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .7rem;
}
.portal-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--p-brand-deep);
}
.portal-section-head span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--p-muted);
}

.portal-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .28rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.portal-status.is-warn {
  background: rgba(232, 201, 120, .22);
  color: #8f6d28;
  border: 1px solid rgba(198, 160, 70, .45);
}
.portal-status.is-ok {
  background: #e8f8ef;
  color: var(--p-ok);
  border: 1px solid #b7e4c7;
}
.portal-status.is-muted {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.portal-fade-in { animation: portalFadeUp .38s ease both; }
@keyframes portalFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-fade-in { animation: none; }
  .portal-child-card { animation: none !important; }
}

.portal-child-grid { display: grid; gap: .7rem; }
.portal-child-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.05rem;
  border-radius: var(--p-radius);
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  animation: portalFadeUp .4s ease both;
}
.portal-child-card:hover {
  border-color: rgba(198, 160, 70, .45);
  box-shadow: 0 10px 24px rgba(11, 42, 91, .1);
}
.portal-child-card:active { transform: scale(.975); }
.portal-child-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  color: var(--p-brand-deep);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 6px 14px rgba(11, 42, 91, .12);
}
.portal-child-avatar.is-lg {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.15rem;
}
.portal-child-copy { min-width: 0; }
.portal-child-card strong,
.portal-child-copy strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--p-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-child-card > span:nth-child(2) > span,
.portal-child-copy > span {
  display: block;
  margin-top: .18rem;
  font-size: .82rem;
  color: var(--p-muted);
  font-weight: 600;
}
.portal-child-card i.portal-chevron {
  color: var(--p-gold);
  font-size: 1.1rem;
}
.portal-child-card.is-pending {
  border-color: rgba(198, 160, 70, .55);
  background: linear-gradient(180deg, #fffdf5, #fff);
  box-shadow: 0 8px 22px rgba(143, 109, 40, 0.08);
}
.portal-child-card.is-withdrawn {
  opacity: .88;
  background: #fafafa;
}

.portal-child-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
  padding: 1.05rem 1rem 1.1rem;
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .94), rgba(11, 42, 91, .96) 55%, rgba(127, 29, 29, .55)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .42);
  box-shadow: 0 16px 36px rgba(11, 42, 91, .22);
}
.portal-back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 750;
  color: var(--p-brand);
  text-decoration: none;
}
.portal-back-link:hover { text-decoration: underline; }
.portal-child-hero-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.portal-child-hero h1 {
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 800;
}
.portal-child-hero p {
  margin: .2rem 0 0;
  font-size: .86rem;
  font-weight: 650;
  color: rgba(255,255,255,.78);
}
.portal-package-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .85rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(232, 201, 120, .18);
  color: #e8c978;
  border: 1px solid rgba(232, 201, 120, .4);
  font-size: .78rem;
  font-weight: 750;
}

.portal-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: 0 0 1rem;
}
.portal-stat {
  padding: .9rem .95rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
}
.portal-stat .label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--p-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.portal-stat .value {
  margin-top: .25rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--p-brand-deep);
  letter-spacing: -.02em;
}
.portal-stat .hint {
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--p-muted);
  font-weight: 600;
}

.portal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.portal-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  min-height: 5.2rem;
  padding: .9rem .95rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line);
  text-decoration: none;
  color: var(--p-ink);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  font-weight: 700;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.portal-action:hover {
  border-color: rgba(198, 160, 70, .45);
  box-shadow: 0 10px 24px rgba(11, 42, 91, .1);
}
.portal-action:active { transform: scale(.975); }
.portal-action i {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1e5bb8, #0b2a5b);
  color: #fff;
  font-size: 1rem;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 6px 14px rgba(11, 42, 91, .18);
}
.portal-action span {
  font-size: .88rem;
  font-weight: 800;
}

.portal-card {
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  padding: 1rem 1.05rem;
  margin: 0 0 .85rem;
}
.portal-card h3,
.portal-card-title {
  margin: 0 0 .75rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--p-brand-deep);
}
.portal-main .card {
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  padding: 1rem 1.05rem;
}
.portal-main .card h3 {
  margin-top: 0;
  color: var(--p-brand-deep);
}

.portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.portal-list li,
.portal-list-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--p-line);
}
.portal-list li:last-child,
.portal-list-item:last-child { border-bottom: 0; }
.portal-list a {
  color: var(--p-brand-deep);
  font-weight: 750;
  text-decoration: none;
}
.portal-list .meta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--p-muted);
}

.portal-empty { text-align: center; padding: 2rem 1.25rem; }
.portal-empty .empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--p-brand-soft);
  color: var(--p-brand);
  font-size: 1.35rem;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}
.portal-empty h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--p-ink);
}

.portal-flash {
  margin: 0 1.05rem .75rem;
  padding: .75rem .9rem;
  border-radius: 14px;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.4;
  border: 1px solid var(--p-line);
  background: #fff;
}
.portal-main .portal-flash { margin-left: 0; margin-right: 0; }
.portal-flash-success,
.portal-flash-ok { background: #f4fbf7; border-color: #b7e4c7; color: #067647; }
.portal-flash-error { background: #fff8f7; border-color: #fecdca; color: #b42318; }
.portal-flash-warning { background: #fffcf5; border-color: rgba(198,160,70,.45); color: #8f6d28; }
.portal-flash-info { background: #f4f7fc; border-color: var(--p-line); color: var(--p-brand-deep); }

.portal-continue-banner {
  margin: 0 0 1rem;
  padding: .85rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid rgba(198, 160, 70, .35);
  border-left: 3px solid #b91c1c;
  box-shadow: 0 10px 28px rgba(11, 42, 91, .08);
}
.portal-continue-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 .75rem;
  padding: .15rem .15rem .65rem;
  border-bottom: 1px solid var(--p-line);
}
.portal-continue-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--p-brand-deep);
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}
.portal-continue-icon.is-muted {
  background: #e5e7eb;
  color: #6b7280;
}
.portal-continue-head strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--p-brand-deep);
}
.portal-continue-head p {
  margin: .2rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--p-muted);
  line-height: 1.4;
}
.portal-continue-card {
  margin: 0 0 .75rem;
  padding: .9rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--p-line);
  box-shadow: 0 4px 12px rgba(11, 42, 91, .04);
}
.portal-continue-card:last-child { margin-bottom: 0; }
.portal-continue-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
}
.portal-continue-meta strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--p-ink);
}
.portal-continue-meta span {
  display: block;
  margin-top: .15rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--p-muted);
}
.portal-btn-primary {
  background: linear-gradient(145deg, #d4af5a, #8f6d28) !important;
  border: 1px solid rgba(198, 160, 70, .55) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(143, 109, 40, 0.22) !important;
}
.portal-btn-ghost {
  width: 100%;
  justify-content: center;
  min-height: 2.55rem;
  border-radius: 12px;
  font-weight: 750;
  color: var(--p-muted) !important;
}

.portal-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 .75rem calc(.55rem + env(safe-area-inset-bottom));
  z-index: 50;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
}
.portal-tabbar-inner {
  display: flex;
  gap: .15rem;
  padding: .35rem;
  border-radius: 18px;
  background: rgba(251, 253, 250, .94);
  border: 1px solid rgba(198, 160, 70, .28);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(11, 42, 91, .14);
}
.portal-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
  padding: .48rem .15rem;
  border-radius: 14px;
  text-decoration: none;
  color: #64748b;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .01em;
  transition: background .12s ease, color .12s ease;
  min-height: 0;
}
.portal-tab i { font-size: 1.15rem; line-height: 1; }
.portal-tab.is-active {
  color: #0b2a5b;
  background: linear-gradient(180deg, rgba(232, 201, 120, .32), rgba(228, 236, 248, .96));
  box-shadow: inset 0 0 0 1px rgba(198, 160, 70, .4);
}

@media (min-width: 640px) {
  .portal-shell { max-width: 32rem; }
  .portal-actions { grid-template-columns: repeat(3, 1fr); }
  .portal-main .data thead { display: table-header-group; }
  .portal-main .data tr { display: table-row; padding: 0; border: 0; }
  .portal-main .data td {
    display: table-cell;
    padding: .65rem .5rem;
    border-bottom: 1px solid var(--p-line) !important;
  }
  .portal-main .data td::before { display: none; }
}

.portal-pill {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: var(--p-surface-2);
  color: var(--p-muted);
}
.portal-pill-ok { background: #e8f8ef; color: var(--p-ok); }
.portal-pill-warn { background: #fffaeb; color: var(--p-warn); }
.portal-pill-danger { background: #fef3f2; color: var(--p-danger); }

.portal-notice-title {
  margin: .35rem 0 .85rem;
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--p-brand-deep);
  letter-spacing: -.015em;
}
.portal-notice-body {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: .95rem;
  font-weight: 600;
  color: var(--p-ink);
}

.portal-main .btn.small {
  min-height: 2.1rem;
  padding: .35rem .65rem;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.portal-main .btn.secondary,
.portal-main .btn.ghost {
  background: var(--p-surface);
  color: var(--p-brand-deep);
  border: 1px solid var(--p-line);
  box-shadow: none;
}
.portal-main .form-grid {
  gap: .85rem;
}
.portal-main .form-grid input,
.portal-main .form-grid select,
.portal-main .form-grid textarea {
  min-height: 2.85rem;
  border-radius: 12px;
  border-color: var(--p-line);
  font-size: 16px; /* avoid iOS zoom */
}
.portal-main .form-grid .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .25rem;
}
.portal-main .form-grid .actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}
.portal-main .form-grid .field.full,
.portal-main form.form-grid > .portal-card {
  grid-column: 1 / -1;
}
.portal-main form.form-grid {
  display: grid;
  gap: .85rem;
}
.portal-main .portal-card .form-grid {
  margin: 0;
}
.portal-main .portal-card .muted {
  font-weight: 600;
  font-size: .78rem;
  color: var(--p-muted);
}

.portal-continue-fees {
  margin-top: .8rem;
  padding-top: .75rem;
  border-top: 1px solid var(--p-line);
}
.portal-continue-fees .k {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-muted);
  margin-bottom: .4rem;
}
.portal-continue-fees ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-continue-fees li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem 0;
  font-size: .88rem;
  font-weight: 600;
}
.portal-continue-due {
  margin: .45rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--p-warn);
}
.portal-continue-due.is-ok { color: var(--p-ok); }
.portal-continue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.portal-continue-actions form { display: contents; }
.portal-continue-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 2.7rem;
  border-radius: 12px;
  font-weight: 800;
}

/* Portal yuran — pengesahan + bukti */
.portal-fee-hero {
  margin: 0 0 1rem;
  padding: 1.15rem 1.1rem 1.05rem;
  border-radius: 20px;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .92), rgba(11, 42, 91, .98)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .4);
  color: #fff;
  box-shadow: 0 16px 36px rgba(11, 42, 91, .22);
}
.portal-fee-hero-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .88);
  opacity: 1;
}
.portal-fee-hero-amount {
  margin: .2rem 0 .45rem;
  font-size: clamp(1.75rem, 8vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #fff;
}
.portal-fee-hero-note {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: .9;
  color: rgba(255,255,255,.85);
}
.portal-fee-hero-note strong {
  font-weight: 800;
  color: #e8c978;
}

.portal-continue-prompt {
  margin: .75rem 0 .65rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--p-ink);
  line-height: 1.45;
}
.portal-continue-actions-stack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.portal-continue-actions-stack .btn {
  width: 100%;
  justify-content: center;
}
.portal-continue-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .15rem 0 .25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-brand-deep);
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}
.portal-continue-back:hover { text-decoration: underline; }
.portal-pkg-form {
  margin: .85rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--p-line);
}
.portal-pkg-form-step {
  margin-top: .35rem;
  padding-top: 0;
  border-top: none;
}
.portal-pkg {
  display: block;
  margin: 0 0 .65rem;
}
.portal-pkg-label {
  display: block;
  margin: 0 0 .45rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--p-muted);
}
.portal-pkg-grid {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
label.portal-pkg-option {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  margin: 0 !important;
  padding: .85rem .9rem;
  border: 1.5px solid var(--p-line);
  border-radius: 14px;
  background: #fff;
  color: var(--p-ink);
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
label.portal-pkg-option:has(input:checked),
label.portal-pkg-option.is-selected {
  border-color: var(--p-gold, #c6a046);
  background: #fffcf5;
  box-shadow: 0 0 0 3px rgba(198, 160, 70, .15);
}
label.portal-pkg-option > input[type="radio"] {
  appearance: auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: .15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--p-gold, #c6a046);
}
label.portal-pkg-option > span {
  display: block;
  min-width: 0;
  margin: 0;
}
label.portal-pkg-option strong {
  display: block;
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--p-ink);
  line-height: 1.25;
}
label.portal-pkg-option small {
  display: block;
  margin: .2rem 0 0;
  font-size: .76rem;
  color: var(--p-muted);
  font-weight: 600;
  line-height: 1.35;
}
label.portal-pkg-option em {
  display: block;
  margin: .4rem 0 0;
  font-style: normal;
  font-weight: 800;
  font-size: 1rem;
  color: var(--p-brand-deep);
  font-variant-numeric: tabular-nums;
}
.portal-pkg-items {
  list-style: none;
  margin: .55rem 0 0;
  padding: .55rem 0 0;
  border-top: 1px dashed var(--p-line);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.portal-pkg-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--p-ink);
  line-height: 1.35;
}
.portal-pkg-items li.is-optional span { color: #8f6d28; }
.portal-pkg-items li.is-struck {
  color: #94a3b8;
  opacity: .9;
}
.portal-pkg-items li.is-struck span,
.portal-pkg-items li.is-struck strong {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: #94a3b8;
  font-weight: 600;
}
.portal-pkg-items li strong {
  display: inline;
  font-size: .78rem;
  font-weight: 800;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.portal-pkg-hint {
  margin: 0 0 .7rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--p-muted);
  line-height: 1.4;
}
.portal-continue-withdraw { margin: 0; padding-top: 0; }
.portal-continue-withdraw .btn { width: 100%; }
.portal-continue-due {
  margin: .45rem 0 0;
  font-size: .8rem;
  font-weight: 650;
  color: var(--p-muted);
}
.portal-continue-due.is-ok { color: var(--p-ok); }
.portal-fee-claim-intro { margin: -.25rem 0 1rem; font-size: .88rem; line-height: 1.45; }
.portal-fee-bank {
  --bank-green: #0b2a5b;
  --bank-green-mid: #1a4d9e;
  --bank-gold: #c6a046;
  --bank-gold-bright: #e8c978;
  --bank-paper: #fbfcfe;
  --bank-line: #d7e0ec;
  --bank-muted: #5b6b7c;
  --bank-ink: #0f172a;
  position: relative;
  margin: 0 0 1.15rem;
  padding: 1.05rem 1rem 1rem;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .94), rgba(11, 42, 91, .96) 60%, rgba(127, 29, 29, .5)),
    var(--bank-green);
  border: 1px solid rgba(198, 160, 70, .45);
  box-shadow:
    0 16px 36px rgba(11, 42, 91, .22),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.portal-fee-bank-ornament {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23e8c978' stroke-opacity='0.14' d='M28 2 L34 14 L46 14 L36 24 L40 36 L28 30 L16 36 L20 24 L10 14 L22 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  pointer-events: none;
}
.portal-fee-bank-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
}
.portal-fee-bank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  color: var(--bank-green);
  background: linear-gradient(145deg, #fff4d4, var(--bank-gold-bright));
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}
.portal-fee-bank-icon i { font-size: 1.15rem; line-height: 1; }
.portal-fee-bank-titles { min-width: 0; position: relative; }
.portal-fee-bank-kicker {
  margin: 0 0 .18rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .88);
}
.portal-fee-bank-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.25;
}
.portal-fee-bank-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .8rem auto .85rem;
  max-width: 11rem;
}
.portal-fee-bank-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 201, 120, .55), transparent);
}
.portal-fee-bank-rule i {
  width: .5rem;
  height: .5rem;
  background: var(--bank-gold-bright);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(232, 201, 120, .18);
}
.portal-fee-bank-account {
  position: relative;
  margin: 0 0 .7rem;
  padding: .85rem .9rem;
  border-radius: 14px;
  background: var(--bank-paper);
  border: 1px solid rgba(198, 160, 70, .35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}
.portal-fee-bank-account-label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bank-muted);
}
.portal-fee-bank-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  flex-wrap: wrap;
}
.portal-fee-bank-no {
  font-size: 1.28rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
  color: var(--bank-green);
  line-height: 1.2;
  word-break: break-all;
}
.portal-fee-bank-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .52rem .85rem;
  border: 1px solid rgba(198, 160, 70, .55);
  border-radius: 10px;
  background: linear-gradient(145deg, #d4af5a, #8f6d28);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -6px rgba(143, 109, 40, 0.55);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.portal-fee-bank-copy:hover {
  filter: brightness(1.06);
  border-color: rgba(232, 201, 120, .7);
}
.portal-fee-bank-copy:active {
  transform: translateY(1px);
}
.portal-fee-bank-copy.is-copied {
  background: linear-gradient(145deg, #1e5bb8, #0b2a5b);
  border-color: rgba(232, 201, 120, .45);
}
.portal-fee-bank-copy i { font-size: .9rem; }
.portal-fee-bank-meta {
  position: relative;
  margin: 0 0 .75rem;
  display: grid;
  gap: .4rem;
  padding: .15rem .1rem;
}
.portal-fee-bank-meta > div {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: .55rem;
  align-items: baseline;
}
.portal-fee-bank-meta dt {
  margin: 0;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .78);
}
.portal-fee-bank-meta dd {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .94);
  word-break: break-word;
  line-height: 1.35;
}
.portal-fee-bank-hint {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: rgba(232, 201, 120, .12);
  border: 1px solid rgba(198, 160, 70, .35);
  color: #f6e7c3;
}
.portal-fee-bank-hint > i {
  flex-shrink: 0;
  margin-top: .1rem;
  font-size: .95rem;
  color: var(--bank-gold-bright);
}
.portal-fee-bank-hint p {
  margin: 0;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
.portal-fee-bank-hint strong {
  font-weight: 800;
  color: var(--bank-gold-bright);
}
@media (max-width: 420px) {
  .portal-fee-bank-no { font-size: 1.12rem; letter-spacing: .03em; }
  .portal-fee-bank-account-row { align-items: stretch; }
  .portal-fee-bank-copy { width: 100%; justify-content: center; }
}
.portal-fee-claim-form fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.portal-fee-claim-form legend {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-muted);
  margin-bottom: .55rem;
}
.portal-fee-list-card {
  margin: 0 0 1rem;
  border: 1px solid var(--p-line);
  border-radius: 14px;
  background: var(--p-surface, #fff);
  overflow: hidden;
}
.portal-fee-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-fee-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .95rem;
  border-bottom: 1px solid var(--p-line);
}
.portal-fee-list li:last-child { border-bottom: 0; }
.portal-fee-list li > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.portal-fee-list li strong {
  font-size: .92rem;
  color: var(--p-ink);
}
.portal-fee-list li .muted {
  font-size: .78rem;
}
.portal-fee-list-amt {
  flex-shrink: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--p-brand-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.portal-fee-charge-row {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .7rem .75rem;
  margin-bottom: .45rem;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: var(--p-surface-2);
  cursor: pointer;
}
.portal-fee-charge-row.is-fixed { cursor: default; }
.portal-fee-charge-row input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--p-brand); }
.portal-fee-charge-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.portal-fee-charge-copy strong { font-size: .92rem; color: var(--p-ink); }
.portal-fee-expected {
  margin: 0 0 1rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: var(--p-brand-soft);
  color: var(--p-brand-deep);
  font-size: .9rem;
  font-weight: 650;
}
.portal-fee-fields {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}
.portal-fee-fields label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--p-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.portal-fee-fields label em {
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: .85;
}
.portal-fee-fields input[type="date"],
.portal-fee-fields input[type="text"],
.portal-fee-fields input[type="file"] {
  min-height: 2.85rem;
  border-radius: 12px;
  border: 1px solid var(--p-line);
  padding: .55rem .7rem;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--p-ink);
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
}
.portal-fee-upload-hint {
  font-size: .75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--p-muted);
}
.portal-fee-preview {
  padding: .65rem;
  border-radius: 12px;
  border: 1px dashed var(--p-line);
  background: var(--p-surface-2);
  font-size: .82rem;
  font-weight: 650;
  color: var(--p-muted);
}
.portal-fee-preview img {
  display: block;
  width: 100%;
  max-height: 12rem;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: .4rem;
  background: #fff;
}
.portal-fee-submit {
  width: 100%;
  min-height: 3rem;
  justify-content: center;
  background: linear-gradient(145deg, #d4af5a, #8f6d28);
  border: 1px solid rgba(198, 160, 70, .55);
  box-shadow: 0 6px 16px rgba(143, 109, 40, .28);
}
.portal-fee-claims { display: grid; gap: .65rem; }
.portal-fee-claim-status {
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid var(--p-line);
  background: var(--p-surface-2);
}
.portal-fee-claim-status.is-pending { border-color: #fedf89; background: #fffcf5; }
.portal-fee-claim-status.is-rejected { border-color: #fecdca; background: #fff8f7; }
.portal-fee-claim-status.is-approved { border-color: #b7e4c7; background: #f4fbf7; }
.portal-fee-claim-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.portal-fee-claim-status-head strong { font-size: 1.05rem; color: var(--p-ink); }
.portal-fee-claim-meta,
.portal-fee-claim-items {
  margin: 0 0 .35rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--p-muted);
  line-height: 1.35;
}
.portal-fee-claim-reject {
  margin: .35rem 0 .55rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--p-danger);
  line-height: 1.4;
}
.portal-fee-charge-list,
.portal-fee-receipt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.portal-fee-charge-list li,
.portal-fee-receipt-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .75rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--p-line);
  background: var(--p-surface);
}
.portal-fee-charge-list li > div,
.portal-fee-receipt-list li > div:first-child {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.portal-fee-charge-list strong,
.portal-fee-receipt-list strong {
  font-size: .92rem;
  color: var(--p-ink);
}
.portal-fee-receipt-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}
.portal-fee-receipt-actions .num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--p-brand-deep);
}
.portal-fee-receipt-list li.is-void { opacity: .72; }

/* ===== Menu guru (mobile hub) ===== */
.guru-body {
  --guru-ink: #0f172a;
  --guru-green: #0b2a5b;
  --guru-green-mid: #1a4d9e;
  --guru-green-soft: #e4ecf8;
  --guru-gold: #c6a046;
  --guru-gold-bright: #e8c978;
  --guru-red: #b91c1c;
  --guru-red-deep: #7f1d1d;
  --guru-paper: #eef2f8;
  --guru-card: #fbfcfe;
  --guru-line: #d7e0ec;
  --guru-muted: #5b6b7c;
  --brand-primary: #0b2a5b;
  --brand-secondary: #1a4d9e;
  --brand-gradient: linear-gradient(135deg, #1a4d9e, #0b2a5b);
  margin: 0;
  background: var(--guru-paper);
  font-family: Outfit, "Segoe UI", sans-serif;
  color: var(--guru-ink);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.guru-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      #0b2a5b 0%,
      #123a7a 38%,
      #7f1d1d 72%,
      #9b1c1c 88%,
      var(--guru-paper) 100%),
    var(--guru-paper);
  background-size: 100% 11rem, 100% 100%;
  background-repeat: no-repeat;
}
.guru-body:not(.is-home) .guru-shell {
  background:
    linear-gradient(180deg,
      #0b2a5b 0%,
      #123a7a 42%,
      #7f1d1d 78%,
      #9b1c1c 100%,
      var(--guru-paper) 100%),
    var(--guru-paper);
  background-size: 100% 5.5rem, 100% 100%;
  background-repeat: no-repeat;
}
.guru-mesh {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: 14rem;
  opacity: .7;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(185, 28, 28, .42), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(232, 201, 120, .28), transparent 40%),
    radial-gradient(circle at 55% 18%, rgba(26, 77, 158, .35), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23e8c978' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M36 4 L44 20 L60 20 L48 32 L52 48 L36 40 L20 48 L24 32 L12 20 L28 20 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, 72px 72px;
  background-position: center top, center top, center top, center 1.2rem;
  mask-image: linear-gradient(180deg, #000 35%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 95%);
  z-index: 0;
}
.guru-body:not(.is-home) .guru-mesh { height: 7rem; opacity: .55; }
.guru-top,
.guru-main,
.guru-bottom { position: relative; z-index: 1; }

/* App bar */
.guru-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.05rem .75rem;
  padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
  color: #fff;
}
.guru-top-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1;
}
.guru-mark {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: linear-gradient(145deg, #f0d78a, #c6a046 55%, #9a7a2e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  padding: 2px;
}
.guru-mark-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: #fff;
  padding: .2rem;
}
.guru-top-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.guru-brand {
  display: block;
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.guru-sub {
  display: block;
  font-size: .66rem;
  font-weight: 650;
  color: rgba(232, 201, 120, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guru-top-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.guru-top-actions form.logout-form { display: flex; }
button.guru-icon-btn {
  padding: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
}
.guru-icon-btn {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(198, 160, 70, .35);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: background .12s ease, border-color .12s ease;
}
.guru-icon-btn:hover,
.guru-icon-btn:active {
  background: rgba(198, 160, 70, .22);
  border-color: rgba(232, 201, 120, .55);
  color: #fff;
}
.guru-main {
  flex: 1;
  padding: .25rem 1rem 6.1rem;
}
.guru-body.is-locked .guru-main {
  padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
}
.gpw { display: flex; flex-direction: column; gap: .9rem; }
.gpw-intro { color: var(--guru-ink); padding: .2rem .1rem 0; }
.gpw-ico {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .65rem;
  border-radius: 14px;
  background: var(--guru-green-soft);
  border: 1px solid rgba(198, 160, 70, .45);
  color: var(--guru-green);
  font-size: 1.2rem;
}
.gpw-intro h1 {
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--guru-ink);
}
.gpw-intro p {
  margin: 0;
  max-width: 28rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--guru-muted);
}
.gpw-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 1.05rem 1rem 1.1rem;
  border-radius: 18px;
  background: var(--guru-card);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 16px 36px rgba(11, 42, 91, .16);
}
.gpw-card label {
  margin: .45rem 0 .2rem;
  font-size: .75rem;
  font-weight: 800;
  color: var(--guru-muted);
}
.gpw-card label:first-of-type { margin-top: 0; }
.gpw-note {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--guru-muted);
}
.gpw-submit {
  width: 100%;
  margin-top: .85rem;
  min-height: 2.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #123a7a, #0b2a5b);
  box-shadow: 0 8px 18px rgba(11, 42, 91, .28);
}
.guru-body.is-home .guru-main { padding-top: .1rem; }

/* Home hub — modern Islamic */
.gmh { display: flex; flex-direction: column; gap: 1.05rem; }
.gmh-hero {
  position: relative;
  color: #fff;
  padding: 1rem 1rem 1.15rem;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(18, 58, 122, .94), rgba(11, 42, 91, .96) 55%, rgba(127, 29, 29, .55)),
    #0b2a5b;
  border: 1px solid rgba(198, 160, 70, .42);
  box-shadow:
    0 18px 40px rgba(11, 42, 91, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.gmh-hero-ornament {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='none' stroke='%23e8c978' stroke-opacity='0.14' d='M28 2 L34 14 L46 14 L36 24 L40 36 L28 30 L16 36 L20 24 L10 14 L22 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 1;
  pointer-events: none;
}
.gmh-bismillah {
  position: relative;
  margin: 0;
  font-family: Amiri, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f0d78a;
  text-align: center;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.gmh-hero-rule,
.gmh-footer-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .7rem auto .85rem;
  max-width: 14rem;
}
.gmh-hero-rule span,
.gmh-footer-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 201, 120, .55), transparent);
}
.gmh-hero-rule i,
.gmh-footer-rule i {
  width: .55rem;
  height: .55rem;
  background: #e8c978;
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(232, 201, 120, .18);
}
.gmh-hero-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gmh-avatar {
  flex: 0 0 auto;
  width: 3.35rem;
  height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: #0b2a5b;
  background: linear-gradient(145deg, #fff4d4, #e8c978);
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.gmh-hero-text { min-width: 0; flex: 1; }
.gmh-kicker {
  margin: 0 0 .28rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem .4rem;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
}
.gmh-kicker-sep {
  opacity: .55;
}
.gmh-hijri {
  color: rgba(232, 201, 120, .92);
  font-weight: 700;
}
.gmh-hero h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .06rem;
  line-height: 1.2;
  color: #fff;
}
.gmh-salam {
  font-family: Amiri, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 700;
  color: #f6e7c3;
  letter-spacing: .01em;
}
.gmh-salam-ms {
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232, 201, 120, .78);
}
.gmh-name {
  margin-top: .18rem;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.gmh-role {
  margin: .3rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}
.gmh-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding: .78rem .85rem;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(232, 201, 120, .4);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
}
.gmh-alert:active { background: rgba(255,255,255,.14); }
.gmh-alert-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e8c978, #b8903a);
  color: #0b2a5b;
  font-size: 1.02rem;
}
.gmh-alert-body { flex: 1; min-width: 0; }
.gmh-alert-body strong {
  display: block;
  font-size: .88rem;
  font-weight: 800;
}
.gmh-alert-body small {
  display: block;
  margin-top: .12rem;
  font-size: .74rem;
  font-weight: 550;
  opacity: .82;
}
.gmh-alert > .bi-chevron-right { opacity: .7; font-size: 1rem; }

.gmh-section {
  background: var(--guru-card);
  border: 1px solid var(--guru-line);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(11, 42, 91, .08);
  overflow: hidden;
  position: relative;
}
.gmh-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c6a046 20%, #e8c978 50%, #c6a046 80%, transparent);
}
.gmh-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: 1.05rem 1rem .75rem;
}
.gmh-section-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.gmh-section-star {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  background: linear-gradient(145deg, #e8c978, #c6a046);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.gmh-section-head h2 {
  margin: 0;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--guru-green);
  text-transform: none;
}
.gmh-section-head p {
  margin: .12rem 0 0;
  font-size: .74rem;
  color: var(--guru-muted);
  font-weight: 550;
}
.gmh-section-count {
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  background: var(--guru-green);
  color: #f0d78a;
}

.gmh-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: 0 .9rem 1rem;
}
.gmh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-height: 8.4rem;
  padding: 1rem .9rem .95rem;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, #ffffff, #f4f7fc);
  border: 1px solid var(--guru-line);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.gmh-card:active {
  transform: scale(.975);
  border-color: rgba(198, 160, 70, .45);
  box-shadow: 0 10px 24px rgba(11, 42, 91, .1);
}
.gmh-card-wide { grid-column: 1 / -1; min-height: 6.4rem; }
.gmh-card-icon {
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.22rem;
  color: #fff;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  box-shadow: 0 8px 16px rgba(11, 42, 91, .12);
}
.gmh-card-checkin .gmh-card-icon { background: linear-gradient(145deg, #d7e8ff, #b9d4fb); color: #1d4f91; }
.gmh-card-leave .gmh-card-icon { background: linear-gradient(145deg, #f8e7b8, #f0d48a); color: #7a5a12; }
.gmh-card-jadual .gmh-card-icon { background: linear-gradient(145deg, #d5eef8, #b7dff0); color: #1a5f80; }
.gmh-card-rph .gmh-card-icon { background: linear-gradient(145deg, #d2f3ef, #b7ebe4); color: #0f6e66; }
.gmh-card-students .gmh-card-icon { background: linear-gradient(145deg, #fde2e2, #f8c9c9); color: #9f2424; }
.gmh-card-early-staff .gmh-card-icon { background: linear-gradient(145deg, #fde6c4, #f8d09a); color: #9a4d0a; }
.gmh-card-early-student .gmh-card-icon { background: linear-gradient(145deg, #d4effc, #b7e0f6); color: #0e5f8a; }
.gmh-card-portal .gmh-card-icon { background: linear-gradient(145deg, #f8e7b8, #f0d48a); color: #7a5a12; }
.gmh-card strong {
  font-size: .92rem;
  font-weight: 800;
  color: var(--guru-ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.gmh-card > span {
  font-size: .74rem;
  color: var(--guru-muted);
  font-weight: 550;
  line-height: 1.4;
}
.gmh-card-badge {
  position: absolute;
  top: .7rem;
  right: .7rem;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #9b2c2c;
  color: #fff;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Home: strip waktu hari ini */
.gmh-today {
  padding: 0 .9rem .55rem;
}
.gmh-today-card {
  position: relative;
  display: block;
  padding: .85rem 2rem .85rem 1rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(135deg, rgba(26, 77, 158, .08), rgba(11, 42, 91, .04)),
    #fff;
  border: 1px solid rgba(26, 77, 158, .22);
  box-shadow: 0 6px 16px rgba(11, 42, 91, .05);
}
.gmh-today-card:active {
  transform: scale(.985);
}
.gmh-today-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.gmh-today-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1a4a66;
}
.gmh-today-day {
  font-size: .75rem;
  font-weight: 700;
  color: var(--guru-muted, #5f7268);
}
.gmh-today-main {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.gmh-today-main strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
}
.gmh-today-main span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
  line-height: 1.35;
}
.gmh-today-more {
  margin: .35rem 0 0;
  font-size: .72rem;
  font-weight: 650;
  color: #3d7ea6;
}
.gmh-today-chevron {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26, 74, 102, .45);
  font-size: 1rem;
}

/* Modul jadual personal */
.gjad {
  padding: 0 .9rem 1.25rem;
}
.gjad-head {
  margin: 0 0 .85rem;
}
.gjad-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
}
.gjad-head p {
  margin: .2rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gjad-today {
  margin-bottom: 1rem;
  padding: .85rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--guru-line, #d5e3db);
}
.gjad-today-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .65rem;
}
.gjad-today-head strong {
  font-size: .95rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
}
.gjad-today-head span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--guru-muted, #5f7268);
}
.gjad-week-title {
  margin: 0 0 .55rem;
  font-size: .85rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
}
.gjad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.gjad-list.is-compact { gap: .35rem; }
.gjad-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .55rem;
  padding: .65rem .7rem;
  border-radius: 12px;
  background: #f4faf7;
  border: 1px solid transparent;
}
.gjad-item.is-now {
  background: linear-gradient(135deg, rgba(26, 77, 158, .12), rgba(11, 42, 91, .04));
  border-color: rgba(20, 128, 95, .35);
}
.gjad-item.is-next {
  background: linear-gradient(135deg, rgba(61, 126, 166, .12), rgba(26, 74, 102, .04));
  border-color: rgba(61, 126, 166, .3);
}
.gjad-item.is-done {
  opacity: .62;
}
.gjad-item.is-clash {
  border-color: rgba(185, 28, 28, .35);
  background: #fef2f2;
}
.gjad-time strong {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
  line-height: 1.25;
}
.gjad-time em {
  display: inline-block;
  margin-top: .2rem;
  font-size: .65rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #1a4d9e;
}
.gjad-item.is-next .gjad-time em { color: #1a4a66; }
.gjad-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.gjad-body strong {
  font-size: .88rem;
  font-weight: 750;
  color: var(--guru-ink, #0f1f1a);
}
.gjad-body span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gjad-day {
  margin: 0 0 .45rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--guru-line, #d5e3db);
  overflow: hidden;
}
.gjad-day summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem .85rem;
  cursor: pointer;
  list-style: none;
  font-weight: 750;
  color: var(--guru-green, #0b2a5b);
}
.gjad-day summary::-webkit-details-marker { display: none; }
.gjad-day summary em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 650;
  color: var(--guru-muted, #5f7268);
}
.gjad-day[open] summary {
  border-bottom: 1px solid var(--guru-line, #d5e3db);
}
.gjad-day .gjad-list,
.gjad-day .gjad-muted {
  padding: .65rem .75rem .8rem;
}
.gjad-muted {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gjad-empty {
  text-align: center;
  padding: 1.75rem 1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--guru-line, #d5e3db);
}
.gjad-empty i {
  font-size: 1.8rem;
  color: #94a3b8;
}
.gjad-empty h3 {
  margin: .55rem 0 .25rem;
  font-size: 1rem;
  color: var(--guru-green, #0b2a5b);
}
.gjad-empty p {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gjad-foot {
  margin: 1rem 0 0;
  text-align: center;
}
.gjad-foot a {
  font-size: .78rem;
  font-weight: 700;
  color: #1a4a66;
  text-decoration: none;
}

.gmh-footer {
  text-align: center;
  padding: .15rem .5rem .4rem;
}
.gmh-footer-rule { margin: 0 auto .55rem; max-width: 10rem; }
.gmh-footer-rule span {
  background: linear-gradient(90deg, transparent, rgba(11, 42, 91, .28), transparent);
}
.gmh-footer-rule i {
  background: var(--guru-gold);
  box-shadow: 0 0 0 3px rgba(198, 160, 70, .15);
}
.gmh-footer-note {
  margin: 0;
  font-family: Amiri, "Times New Roman", serif;
  font-size: 1.02rem;
  color: rgba(11, 42, 91, .72);
  letter-spacing: .01em;
  line-height: 1.4;
}
.gmh-footer-ms {
  margin: .25rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--guru-muted);
}

.gmh-stage {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  position: relative;
  min-height: 8rem;
  transition: opacity .18s ease;
}
.gmh-stage.is-loading {
  opacity: .55;
  pointer-events: none;
}
.gmh-stage.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2.5rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -.8rem;
  border-radius: 999px;
  border: 2px solid rgba(198, 160, 70, .35);
  border-top-color: #c6a046;
  animation: gmh-spin .7s linear infinite;
  z-index: 2;
}
@keyframes gmh-spin {
  to { transform: rotate(360deg); }
}

.gmh-empty {
  text-align: center;
  padding: 2.25rem 1.25rem;
  background: var(--guru-card);
  border: 1px solid var(--guru-line);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(11, 42, 91, .06);
}
.gmh-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--guru-green-soft);
  color: var(--guru-green-mid);
  font-size: 1.35rem;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}
.gmh-empty h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--guru-ink);
}
.gmh-empty p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--guru-muted);
  font-weight: 550;
}

.guru-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 .75rem calc(.55rem + env(safe-area-inset-bottom));
  z-index: 40;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.guru-bottom-inner {
  display: flex;
  gap: .15rem;
  padding: .35rem;
  border-radius: 18px;
  background: rgba(251, 252, 254, .94);
  border: 1px solid rgba(198, 160, 70, .28);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(11, 42, 91, .14);
}
.guru-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
  padding: .48rem .15rem;
  border-radius: 14px;
  text-decoration: none;
  color: #5b6b7c;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .01em;
  transition: background .12s ease, color .12s ease;
}
.guru-tab i { font-size: 1.15rem; }
.guru-tab.is-active {
  color: #0b2a5b;
  background: linear-gradient(180deg, rgba(232, 201, 120, .28), rgba(228, 236, 248, .95));
  box-shadow: inset 0 0 0 1px rgba(198, 160, 70, .35);
}

/* Legacy hello/tiles */
.guru-hello { color: #fff; margin-bottom: 1rem; }
.guru-hello-date { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; opacity: .8; }
.guru-hello h1 { margin: 0; font-size: 1.4rem; font-weight: 800; color: #fff; }
.guru-hello .muted { color: rgba(255,255,255,.75); margin: .35rem 0 0; font-size: .88rem; }
.guru-tiles { display: grid; gap: .75rem; }
.guru-tile {
  display: flex; align-items: center; gap: .85rem; padding: 1rem;
  border-radius: 16px; background: #fff; border: 1px solid var(--guru-line);
  text-decoration: none; color: inherit; min-height: 4.5rem;
}
.guru-tile-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: #fff; flex-shrink: 0;
}
.guru-tile-checkin .guru-tile-icon { background: linear-gradient(135deg, #1e5bb8, #0b2a5b); }
.guru-tile-leave .guru-tile-icon { background: linear-gradient(135deg, #d4af5a, #8f6d28); }
.guru-tile-students .guru-tile-icon { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }
.guru-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.guru-tile-body strong { font-size: 1.02rem; font-weight: 800; color: var(--guru-ink); }
.guru-tile-body span { font-size: .8rem; color: var(--guru-muted); font-weight: 500; }
.guru-tile-chevron { color: #c5bdaa; font-size: 1.1rem; }
.guru-tile-badge {
  min-width: 1.55rem; height: 1.55rem; padding: 0 .4rem; border-radius: 999px;
  background: #9b2c2c; color: #fff; font-size: .75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Kandungan modul dalam shell guru (telefon) */
.guru-body .guru-page-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0 0 .85rem;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}
.guru-body .guru-page-top .actions,
.guru-body .guru-page-top .roles-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  width: 100%;
  justify-content: stretch;
}
.guru-body .guru-page-top .btn,
.guru-body .guru-page-top .btn-block {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 12px;
  font-weight: 700;
}
.guru-body .card {
  border-radius: 16px;
  background: var(--guru-card);
  border-color: var(--guru-line);
  box-shadow: 0 8px 24px rgba(12, 59, 46, .07);
  overflow: hidden;
}
.guru-body .card-head {
  padding: .85rem 1rem;
}
.guru-body .card-head h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--guru-ink);
}
.guru-body .filter-bar,
.guru-body .toolbar,
.guru-body .att-filters {
  border-radius: 14px;
  background: var(--guru-card);
  border: 1px solid var(--guru-line);
  padding: .75rem;
  margin-bottom: .85rem;
}
.guru-body .table-wrap,
.guru-body .table-responsive {
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--guru-card);
  border: 1px solid var(--guru-line);
}
.guru-body table.data,
.guru-body table.table {
  font-size: .82rem;
}
.guru-body .btn {
  border-radius: 12px;
  background: linear-gradient(135deg, #1a7a58, #0c3b2e);
  box-shadow: 0 6px 16px rgba(12, 59, 46, .22);
}
.guru-body .btn:hover {
  box-shadow: 0 8px 18px rgba(12, 59, 46, .28);
}
.guru-body .btn.secondary {
  background: var(--guru-card);
  color: var(--guru-green);
  border-color: var(--guru-line);
  box-shadow: none;
}
.guru-body .btn.secondary:hover {
  background: var(--guru-green-soft);
  color: var(--guru-green);
}
.guru-body .flash {
  border-radius: 12px;
  font-size: .88rem;
}
.guru-body .form-grid label {
  font-weight: 700;
  font-size: .82rem;
}
.guru-body .form-grid input,
.guru-body .form-grid select,
.guru-body .form-grid textarea {
  min-height: 2.65rem;
  border-radius: 12px;
  font-size: 1rem;
  border-color: var(--guru-line);
  background: #fff;
}
.guru-body .form-grid input:focus,
.guru-body .form-grid select:focus,
.guru-body .form-grid textarea:focus {
  border-color: var(--guru-green-mid);
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 59, 46, .12);
}
.guru-body .att-take.guru-att-take {
  margin: 0;
}
.guru-body .att-take-hero {
  border-radius: 16px;
  margin-bottom: .85rem;
  background: var(--guru-card);
  border-color: var(--guru-line);
}
.guru-body .att-take-title-row h1 {
  font-size: 1.2rem;
}
.guru-body .att-student-row,
.guru-body .att-mark-row {
  border-radius: 12px;
}

/* Check-in / cuti / kehadiran — selaras tema emerald */
.guru-body .sci-hero,
.guru-body .atm-hero,
.guru-body .slm-form-card,
.guru-body .slm-card {
  background: var(--guru-card);
  border-color: var(--guru-line);
  box-shadow: 0 10px 28px rgba(12, 59, 46, .07);
}
.guru-body .sci-hero.is-ready::before,
.guru-body .atm-hero::before {
  background: linear-gradient(90deg, #b8954a, #1a7a58);
}
.guru-body .sci-hero.is-done::before {
  background: linear-gradient(90deg, #1a7a58, #0c3b2e);
}
.guru-body .sci-kicker,
.guru-body .atm-kicker,
.guru-body .slm-list-head h2 {
  color: var(--guru-green);
}
.guru-body .sci-hero.is-ready .sci-state-icon {
  background: linear-gradient(145deg, #e8f2ec, #cfe5d9);
  color: var(--guru-green);
}
.guru-body .sci-state h2,
.guru-body .atm-hero-meta time,
.guru-body .slm-card-who strong {
  color: var(--guru-ink);
}
.guru-body .sci-state p,
.guru-body .atm-cta-hint,
.guru-body .slm-card-who span {
  color: var(--guru-muted);
}
.guru-body .atm-metric {
  background: var(--guru-green-soft);
  border-color: rgba(12, 59, 46, .08);
  color: var(--guru-muted);
}
.guru-body .atm-metric span { color: var(--guru-ink); }
.guru-body .atm-metric.is-rate span { color: var(--guru-green); }
.guru-body .atm-cta {
  background: linear-gradient(135deg, #1a7a58, #0c3b2e);
  box-shadow: 0 10px 22px rgba(12, 59, 46, .26);
}
.guru-body .atm-cta.is-secondary {
  background: var(--guru-card);
  color: var(--guru-green) !important;
  border-color: rgba(12, 59, 46, .18);
}
.guru-body .slm-cta {
  background: linear-gradient(135deg, #c9a056, #8f6a28);
  box-shadow: 0 10px 22px rgba(143, 106, 40, .28);
}
.guru-body .slm-alert {
  background: rgba(184, 149, 74, .12);
  border-color: rgba(184, 149, 74, .35);
  color: #7a5a1e;
}
.guru-body .slm-chip.is-on {
  background: var(--guru-green);
  border-color: var(--guru-green);
  color: #fff;
}
.guru-body .slm-card.is-pending { border-left-color: var(--guru-gold); }
.guru-body .slm-card.is-pending .slm-status {
  background: rgba(184, 149, 74, .15);
  color: #8f6a28;
}
.guru-body .atm-filters,
.guru-body .slm-filters,
.guru-body .atm-section {
  background: var(--guru-card);
  border-color: var(--guru-line);
}
.guru-body .atm-class {
  border-color: var(--guru-line);
  background: #fff;
}
.guru-body .atm-class.is-done {
  background: var(--guru-green-soft);
  border-color: rgba(12, 59, 46, .14);
}
.guru-body .atm-class-icon {
  background: var(--guru-green-soft);
  color: var(--guru-green);
}

/* ===== Guru cuti (gcl) — template emerald–emas ===== */
.gcl {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.gcl-intro {
  text-align: center;
  padding: .15rem 0 .1rem;
}
.gcl-intro-rule {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 auto .55rem;
  max-width: 11rem;
}
.gcl-intro-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 160, 70, .55), transparent);
}
.gcl-intro-rule i {
  width: .5rem;
  height: .5rem;
  background: #e8c978;
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 3px rgba(232, 201, 120, .16);
}
.gcl-kicker {
  margin: 0 0 .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11, 42, 91, .55);
}
.gcl-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--guru-green, #0b2a5b);
}
.gcl-sub {
  margin: .28rem 0 0;
  font-size: .8rem;
  font-weight: 550;
  color: var(--guru-muted, #5f7268);
}

.gcl-cta {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-radius: 18px;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #d4af5a, #8f6d28);
  border: 1px solid rgba(232, 201, 120, .35);
  box-shadow: 0 12px 28px rgba(143, 109, 40, .28);
  transition: transform .12s ease;
}
.gcl-cta:active { transform: scale(.985); }
.gcl-cta-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  margin-top: .35rem;
}
.gcl-cta-icon {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: rgba(255, 255, 255, .18);
  font-size: 1.1rem;
}
.gcl-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .08rem;
  text-align: left;
}
.gcl-cta-text strong {
  font-size: .98rem;
  font-weight: 800;
}
.gcl-cta-text small {
  font-size: .74rem;
  opacity: .88;
  font-weight: 550;
}
.gcl-cta > .bi-chevron-right { opacity: .8; }

.gcl-panel {
  background: var(--guru-card, #fbfcfe);
  border: 1px solid var(--guru-line, #d5e3db);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(11, 42, 91, .07);
  overflow: hidden;
  position: relative;
}
.gcl-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c6a046 18%, #e8c978 50%, #c6a046 82%, transparent);
}
.gcl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: 1rem 1rem .7rem;
}
.gcl-panel-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.gcl-star {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  background: linear-gradient(145deg, #e8c978, #c6a046);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.gcl-form-icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  background: linear-gradient(145deg, #d4af5a, #8f6d28);
}
.gcl-panel-head h2 {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
  letter-spacing: -.01em;
}
.gcl-panel-head p {
  margin: .1rem 0 0;
  font-size: .74rem;
  color: var(--guru-muted, #5f7268);
  font-weight: 550;
}
.gcl-count {
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .42rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  background: var(--guru-green, #0b2a5b);
  color: #f0d78a;
}

.gcl-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  padding: 0 1rem 1rem;
}
.gcl-metric {
  padding: .7rem .75rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f4faf7);
  border: 1px solid var(--guru-line, #d5e3db);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.gcl-metric span {
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--guru-muted, #5f7268);
}
.gcl-metric strong {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--guru-green, #0b2a5b);
  line-height: 1;
}
.gcl-metric.is-low {
  border-color: rgba(198, 160, 70, .55);
  background: rgba(232, 201, 120, .16);
}
.gcl-metric.is-low strong { color: #8f6d28; }
.gcl-note {
  margin: 0 1rem 1rem;
  font-size: .72rem;
  color: var(--guru-muted, #5f7268);
  font-weight: 550;
}

.gcl-seg {
  display: flex;
  gap: .25rem;
  padding: .28rem;
  border-radius: 16px;
  background: var(--guru-card, #fbfcfe);
  border: 1px solid var(--guru-line, #d5e3db);
  box-shadow: 0 8px 20px rgba(11, 42, 91, .05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gcl-seg::-webkit-scrollbar { display: none; }
.gcl-seg-item {
  flex: 1 1 auto;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .58rem .7rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--guru-muted, #5f7268);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}
.gcl-seg-item em {
  font-style: normal;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  background: #9b2c2c;
  color: #fff;
}
.gcl-seg-item.is-on {
  background: linear-gradient(180deg, rgba(232, 201, 120, .32), rgba(227, 240, 234, .98));
  color: var(--guru-green, #0b2a5b);
  box-shadow: inset 0 0 0 1px rgba(198, 160, 70, .35);
}

.gcl-filters {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 0 1rem 1rem;
}
.gcl-filter-static {
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #f7faf8;
  font-size: .88rem;
  font-weight: 700;
  color: var(--guru-ink, #0b2a5b);
}
.gcl-hint {
  margin: 0 0 .85rem;
  font-size: .78rem;
  color: var(--guru-muted, #5f7268);
  line-height: 1.4;
}
.gel-students {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: .55rem;
}
.gel-student {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  cursor: pointer;
}
.gel-student.is-on {
  border-color: rgba(11, 42, 91, .35);
  background: linear-gradient(180deg, rgba(227, 240, 234, .95), #fff);
  box-shadow: inset 0 0 0 1px rgba(11, 42, 91, .12);
}
.gel-student input {
  margin-top: .2rem;
  flex-shrink: 0;
}
.gel-student span {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.gel-student strong {
  font-size: .9rem;
  color: var(--guru-ink, #0b2a5b);
}
.gel-student small {
  font-size: .75rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gcl-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gcl-chips::-webkit-scrollbar { display: none; }
.gcl-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  color: var(--guru-muted, #5f7268);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 700;
}
.gcl-chip em {
  font-style: normal;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .28rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  background: #9b2c2c;
  color: #fff;
}
.gcl-chip.is-on {
  background: var(--guru-green, #0b2a5b);
  border-color: var(--guru-green, #0b2a5b);
  color: #f0d78a;
}
.gcl-filter-row {
  display: flex;
  gap: .45rem;
  align-items: center;
}
.gcl-filter-row input,
.gcl-filter-row select {
  flex: 1;
  min-width: 0;
  min-height: 2.65rem;
  border-radius: 12px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--guru-ink, #0f172a);
}
.gcl-filter-period input[type="number"] {
  width: 4.6rem;
  flex: 0 0 auto;
}
.gcl-icon-btn {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  color: var(--guru-muted, #5f7268);
  text-decoration: none;
}

.gcl-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
  padding: 0 1rem .35rem;
  text-align: center;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--guru-muted, #5f7268);
}
.gcl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .28rem;
  padding: 0 1rem 1rem;
}
.gcl-cal-empty { min-height: 2.55rem; }
.gcl-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .05rem;
  min-height: 2.55rem;
  border-radius: 11px;
  border: 1px solid var(--guru-line, #d5e3db);
  text-decoration: none;
  color: var(--guru-ink, #0f172a);
  font-size: .78rem;
  background: #fff;
}
.gcl-cal-day strong { font-weight: 800; line-height: 1; }
.gcl-cal-day em {
  font-style: normal;
  font-size: .58rem;
  font-weight: 800;
  color: #8f6d28;
}
.gcl-cal-day.is-duty { background: var(--guru-green-soft, #e4ecf8); }
.gcl-cal-day.has-leave { border-color: rgba(198, 160, 70, .55); }
.gcl-cal-day.is-on {
  background: var(--guru-green, #0b2a5b);
  border-color: var(--guru-green, #0b2a5b);
  color: #fff;
  box-shadow: 0 6px 14px rgba(11, 42, 91, .22);
}
.gcl-cal-day.is-on em { color: #e8c978; }

.gcl-list {
  list-style: none;
  margin: 0;
  padding: 0 .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.gcl-card {
  padding: .9rem .85rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--guru-line, #d5e3db);
  border-left: 3px solid var(--guru-line, #d5e3db);
  box-shadow: 0 6px 16px rgba(11, 42, 91, .04);
}
.gcl-card.is-pending { border-left-color: var(--guru-gold, #c6a046); }
.gcl-card.is-ok { border-left-color: #0d5c45; }
.gcl-card.is-off,
.gcl-card.is-muted { border-left-color: #a8b5ae; }
.gcl-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .55rem;
  margin-bottom: .55rem;
}
.gcl-card-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.gcl-card-who strong {
  font-size: .95rem;
  font-weight: 800;
  color: var(--guru-ink, #0f172a);
}
.gcl-card-who span {
  font-size: .74rem;
  color: var(--guru-muted, #5f7268);
  font-weight: 550;
}
.gcl-status {
  flex: 0 0 auto;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  background: var(--guru-green-soft, #e4ecf8);
  color: var(--guru-green, #0b2a5b);
}
.gcl-card.is-pending .gcl-status {
  background: rgba(198, 160, 70, .18);
  color: #8f6d28;
}
.gcl-card.is-ok .gcl-status {
  background: #e4ecf8;
  color: #0d5c45;
}
.gcl-card.is-off .gcl-status,
.gcl-card.is-muted .gcl-status {
  background: #eef2f0;
  color: #6b7a72;
}
.gcl-card-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  margin-bottom: .35rem;
}
.gcl-type {
  display: inline-flex;
  padding: .2rem .5rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
  background: var(--guru-green, #0b2a5b);
  color: #f0d78a;
}
.gcl-range {
  font-size: .8rem;
  font-weight: 650;
  color: var(--guru-ink, #0f172a);
}
.gcl-reason {
  margin: .25rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--guru-muted, #5f7268);
}
.gcl-meta {
  margin: .3rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--guru-muted, #5f7268);
}
.gcl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}
.gcl-actions form { flex: 1 1 auto; min-width: 0; }
.gcl-reject-form {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .15rem;
}
.gcl-reject-form .gcl-note,
.gcl-reject-form input[name="decision_note"] {
  width: 100%;
  min-height: 2.45rem;
  padding: .55rem .7rem;
  border-radius: 12px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  color: var(--guru-ink, #0f1f1a);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  box-sizing: border-box;
}
.gcl-reject-form .gcl-note:focus,
.gcl-reject-form input[name="decision_note"]:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}
.gcl-reject-form .gcl-btn {
  width: 100%;
}
.gcl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 2.45rem;
  padding: .45rem .7rem;
  border-radius: 12px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  color: var(--guru-green, #0b2a5b);
  text-decoration: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
}
.gcl-btn.is-ok {
  background: linear-gradient(135deg, #1e5bb8, #0b2a5b);
  border-color: transparent;
  color: #fff;
}
.gcl-btn.is-bad {
  background: #fff;
  border-color: #c4a0a0;
  color: #9b2c2c;
}
.gcl-btn-solid {
  width: auto;
  min-width: 8rem;
  background: linear-gradient(135deg, #d4af5a, #8f6d28);
  border-color: transparent;
  color: #fff;
  padding-inline: 1.1rem;
}

.gcl-empty {
  text-align: center;
  padding: 1.6rem 1.1rem 1.4rem;
}
.gcl-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--guru-green-mid, #0d5c45);
  font-size: 1.25rem;
  background: var(--guru-green-soft, #e4ecf8);
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}
.gcl-empty h3 {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--guru-ink, #0f172a);
}
.gcl-empty p {
  margin: 0 0 1rem;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--guru-muted, #5f7268);
}

.gcl-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .15rem;
  font-size: .86rem;
  font-weight: 750;
  color: var(--guru-green, #0b2a5b);
  text-decoration: none;
}
.gcl-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 0 1rem 1.1rem;
}
.gcl-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.gcl-field > span {
  font-size: .78rem;
  font-weight: 750;
  color: var(--guru-green, #0b2a5b);
}
.gcl-field input,
.gcl-field select {
  min-height: 2.75rem;
  border-radius: 12px;
  border: 1px solid var(--guru-line, #d5e3db);
  background: #fff;
  padding: .5rem .75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--guru-ink, #0f172a);
}
.gcl-field input:focus,
.gcl-field select:focus {
  outline: none;
  border-color: var(--guru-green-mid, #0d5c45);
  box-shadow: 0 0 0 3px rgba(11, 42, 91, .12);
}
.gcl-static {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 12px;
  background: var(--guru-green-soft, #e4ecf8);
  border: 1px solid rgba(12, 59, 46, .08);
  font-weight: 700;
  color: var(--guru-ink, #0f172a);
}
.gcl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.gcl-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--guru-ink, #0f172a);
}
.gcl-check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--guru-green, #0b2a5b);
}

/* Bottom nav pada skrin utama (telefon) bila modul guru ada */
.guru-mobile-nav {
  display: none;
}
@media (max-width: 767.98px) {
  body.has-guru-nav #page-content-wrapper,
  body.has-guru-nav .content,
  body.has-guru-nav main {
    padding-bottom: 4.75rem;
  }
  .guru-mobile-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    gap: .15rem;
    padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
    background: rgba(251, 253, 250, .96);
    border-top: 1px solid #d5e3db;
    box-shadow: 0 -8px 24px rgba(11, 42, 91, .08);
  }
  .guru-mobile-nav .guru-tab.is-active {
    color: #0b2a5b;
    background: linear-gradient(180deg, rgba(232, 201, 120, .28), rgba(227, 240, 234, .95));
  }
}

/* ===== Staff check-in (sci) ===== */
.sci {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 720px;
}
.sci-notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.sci-notice i { font-size: 1.15rem; margin-top: .1rem; flex-shrink: 0; }
.sci-notice strong { display: block; font-size: .92rem; margin-bottom: .15rem; }
.sci-notice p { margin: 0; font-size: .84rem; line-height: 1.45; }
.sci-notice a { color: #b45309; font-weight: 700; }

.sci-hero {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.25rem 1.2rem 1.35rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
  position: relative;
  overflow: hidden;
}
.sci-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: #94a3b8;
}
.sci-hero.is-ready::before { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.sci-hero.is-out::before { background: linear-gradient(90deg, #0369a1, #0ea5e9); }
.sci-hero.is-done::before { background: linear-gradient(90deg, #059669, #10b981); }
.sci-hero.is-leave::before { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.sci-hero.is-idle::before { background: #94a3b8; }

.sci-hero-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.sci-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.sci-hero-meta time {
  font-size: .82rem;
  font-weight: 600;
  color: #475569;
  text-align: right;
}

.sci-state {
  text-align: center;
  padding: .35rem .25rem .15rem;
}
.sci-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto .9rem;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  background: #f1f5f9;
  color: #475569;
}
.sci-hero.is-ready .sci-state-icon {
  background: linear-gradient(145deg, #ccfbf1, #99f6e4);
  color: #0f766e;
}
.sci-hero.is-out .sci-state-icon {
  background: linear-gradient(145deg, #e0f2fe, #bae6fd);
  color: #0369a1;
}
.sci-hero.is-done .sci-state-icon {
  background: linear-gradient(145deg, #d1fae5, #a7f3d0);
  color: #047857;
}
.sci-hero.is-leave .sci-state-icon {
  background: linear-gradient(145deg, #ffedd5, #fed7aa);
  color: #c2410c;
}
.sci-state h2 {
  margin: 0 0 .4rem;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0f172a;
}
.sci-state p {
  margin: 0 auto;
  max-width: 28rem;
  font-size: .9rem;
  line-height: 1.5;
  color: #64748b;
}
.sci-hint {
  margin-top: .55rem !important;
  font-size: .82rem !important;
}
.sci-badge {
  display: inline-flex;
  margin-top: .85rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.sci-badge.is-ok {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.sci-badge.is-late {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.sci-gps {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1.15rem 0 .9rem;
  padding: .8rem .9rem;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
}
.sci-gps-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  margin-top: .3rem;
  flex-shrink: 0;
  background: currentColor;
}
.sci-gps[data-kind="warn"] {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.sci-gps[data-kind="warn"] .sci-gps-dot {
  animation: sci-pulse 1.2s ease-in-out infinite;
  background: #64748b;
}
.sci-gps[data-kind="ok"] {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.sci-gps[data-kind="ok"] .sci-gps-dot { background: #059669; }
.sci-gps[data-kind="bad"] {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.sci-gps[data-kind="bad"] .sci-gps-dot { background: #dc2626; }
@keyframes sci-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}

.sci-form {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sci-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 3.25rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: #cbd5e1;
  color: #fff;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: not-allowed;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.sci-cta.is-enabled,
.sci-cta:not(:disabled) {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  box-shadow: 0 10px 22px rgba(13, 148, 136, .28);
  cursor: pointer;
}
.sci-cta-out.is-enabled,
.sci-cta-out:not(:disabled) {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  box-shadow: 0 10px 22px rgba(2, 132, 199, .28);
}
.sci-cta.is-enabled:hover,
.sci-cta:not(:disabled):hover {
  filter: brightness(1.05);
}
.sci-cta.is-enabled:active,
.sci-cta:not(:disabled):active {
  transform: scale(.985);
}
.sci-cta:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
}
.sci-cta.is-busy {
  position: relative;
  pointer-events: none;
  opacity: .92;
}
.sci-cta.is-busy::after {
  content: '';
  width: .9rem;
  height: .9rem;
  margin-left: .35rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sci-spin .7s linear infinite;
  display: inline-block;
  vertical-align: -0.15em;
}
@keyframes sci-spin {
  to { transform: rotate(360deg); }
}
.sci-probe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  min-height: 2.55rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.sci-probe:hover { background: #f8fafc; color: #0f172a; }
.sci-probe:disabled { opacity: .55; cursor: wait; }
.sci-status {
  margin: .15rem 0 0;
  min-height: 1.2em;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
}

.sci-rules {
  list-style: none;
  margin: 1rem 0 0;
  padding: .75rem .85rem;
  display: grid;
  gap: .45rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.sci-rules li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
}
.sci-rules i {
  color: #0d9488;
  font-size: .95rem;
  width: 1.1rem;
  text-align: center;
}

.sci-roster {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.05rem 1rem 1.1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}
.sci-roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.sci-roster-head h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}
.sci-roster-sub {
  margin: .2rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
}
.sci-date-form {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.sci-date-form input[type="date"] {
  min-height: 2.35rem;
  padding: .35rem .55rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font: inherit;
  font-size: .85rem;
  background: #fff;
  color: #0f172a;
}
.sci-date-go {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sci-date-go:hover { background: #eef2f7; }

.sci-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin-bottom: .85rem;
}
.sci-stat {
  text-align: center;
  padding: .55rem .25rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: .68rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.25;
}
.sci-stat span {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: .1rem;
}
.sci-stat.is-ok span { color: #047857; }
.sci-stat.is-late span { color: #c2410c; }
.sci-stat.is-out span { color: #0369a1; }
.sci-stat.is-leave span { color: #1d4ed8; }
.sci-stat.is-pending span { color: #64748b; }

.sci-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.sci-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .75rem;
  border-radius: 12px;
  border: 1px solid #eef2f7;
  background: #fafbfc;
}
.sci-row-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  background: #e2e8f0;
  color: #64748b;
}
.sci-row.is-ok .sci-row-icon { background: #d1fae5; color: #047857; }
.sci-row.is-out .sci-row-icon { background: #e0f2fe; color: #0369a1; }
.sci-row.is-late .sci-row-icon { background: #ffedd5; color: #c2410c; }
.sci-row.is-leave .sci-row-icon { background: #dbeafe; color: #1d4ed8; }
.sci-row.is-bad .sci-row-icon { background: #fee2e2; color: #b91c1c; }
.sci-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.sci-row-body strong {
  font-size: .9rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sci-row-pos {
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}
.sci-row-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  align-items: flex-end;
}
.sci-row-label {
  font-size: .75rem;
  font-weight: 800;
  color: #475569;
}
.sci-row.is-ok .sci-row-label { color: #047857; }
.sci-row.is-out .sci-row-label { color: #0369a1; }
.sci-row.is-late .sci-row-label { color: #c2410c; }
.sci-row.is-leave .sci-row-label { color: #1d4ed8; }
.sci-row.is-bad .sci-row-label { color: #b91c1c; }
.sci-row-time {
  font-size: .7rem;
  font-weight: 600;
  color: #94a3b8;
}
.sci-row-gps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .08rem;
  max-width: 11rem;
}
.sci-gps-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  justify-content: center;
  margin: .55rem 0 0;
  font-size: .78rem;
  font-weight: 600;
}
.gps-link {
  color: #0369a1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.gps-link:hover { text-decoration: underline; }
.gps-cell {
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 600;
}
.sci-empty {
  text-align: center;
  padding: 1.75rem 1rem;
  color: #94a3b8;
}
.sci-empty i { font-size: 1.6rem; display: block; margin-bottom: .45rem; }
.sci-empty p { margin: 0; font-size: .88rem; font-weight: 600; }

.guru-body .sci { max-width: none; }
.guru-body .sci-hero,
.guru-body .sci-roster {
  box-shadow: 0 8px 24px rgba(30, 58, 95, .08);
}

@media (max-width: 520px) {
  .sci-hero { padding: 1.1rem 1rem 1.2rem; }
  .sci-hero-meta { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .sci-hero-meta time { text-align: left; }
  .sci-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sci-roster-head { flex-direction: column; }
  .sci-date-form { width: 100%; }
  .sci-date-form input[type="date"] { flex: 1; }
}

/* ===== Cuti guru mobile (slm) ===== */
.slm {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.slm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 3.1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #ea580c, #c2410c);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(194, 65, 12, .28);
}
.slm-cta:active { transform: scale(.985); }
.slm-alert {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.slm-alert strong { font-weight: 800; }
.slm-alert .bi-chevron-right { margin-left: auto; opacity: .6; }
.slm-filters {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.slm-chips {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
  scrollbar-width: none;
}
.slm-chips::-webkit-scrollbar { display: none; }
.slm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.slm-chip em {
  font-style: normal;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slm-chip.is-on {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
.slm-filter-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.slm-filter-row input[type="date"] {
  flex: 1;
  min-height: 2.5rem;
  padding: .4rem .65rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font: inherit;
  font-size: .9rem;
  background: #fff;
}
.slm-reset {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.slm-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 .1rem;
}
.slm-list-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: #0f172a;
}
.slm-list-head span {
  font-size: .78rem;
  font-weight: 700;
  color: #94a3b8;
}
.slm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.slm-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: .95rem 1rem;
  box-shadow: 0 8px 20px rgba(30, 58, 95, .06);
  border-left: 4px solid #cbd5e1;
}
.slm-card.is-pending { border-left-color: #3b82f6; }
.slm-card.is-ok { border-left-color: #10b981; }
.slm-card.is-off { border-left-color: #94a3b8; }
.slm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .55rem;
}
.slm-card-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.slm-card-who strong {
  font-size: .95rem;
  font-weight: 800;
  color: #0f172a;
}
.slm-card-who span {
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}
.slm-status {
  flex-shrink: 0;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
}
.slm-card.is-pending .slm-status { background: #eff6ff; color: #1d4ed8; }
.slm-card.is-ok .slm-status { background: #ecfdf5; color: #047857; }
.slm-card.is-off .slm-status { background: #f8fafc; color: #64748b; }
.slm-card-mid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  margin-bottom: .4rem;
}
.slm-type {
  display: inline-flex;
  padding: .18rem .5rem;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  font-size: .72rem;
  font-weight: 800;
}
.slm-range {
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
}
.slm-reason {
  margin: .35rem 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: #334155;
}
.slm-meta {
  margin: .35rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}
.slm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid #f1f5f9;
}
.slm-actions form { flex: 1 1 auto; min-width: 0; }
.slm-btn {
  width: 100%;
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .7rem;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.slm-btn.is-ok {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
.slm-btn.is-bad {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}
.slm-empty {
  text-align: center;
  padding: 2rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: #64748b;
}
.slm-empty i { font-size: 1.75rem; color: #94a3b8; display: block; margin-bottom: .55rem; }
.slm-empty h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: #0f172a; }
.slm-empty p { margin: 0 0 1rem; font-size: .86rem; line-height: 1.45; }

.slm-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  margin-bottom: .15rem;
}
.slm-form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.15rem 1.05rem 1.25rem;
  box-shadow: 0 8px 24px rgba(30, 58, 95, .07);
}
.slm-form-head {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
}
.slm-form-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffedd5, #fed7aa);
  color: #c2410c;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.slm-form-head h2 {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}
.slm-form-head p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: #64748b;
}
.slm-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.slm-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.slm-field > span {
  font-size: .78rem;
  font-weight: 800;
  color: #475569;
}
.slm-field input,
.slm-field select {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: #0f172a;
}
.slm-static {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-weight: 700;
  color: #0f172a;
}
.slm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.slm-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .86rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
.slm-check input { width: 1.1rem; height: 1.1rem; }
.slm-form .slm-cta {
  margin-top: .25rem;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ===== Kehadiran pelajar mobile (atm) ===== */
.atm {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.atm-hero {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.15rem 1.05rem 1.2rem;
  box-shadow: 0 8px 24px rgba(30, 58, 95, .07);
  position: relative;
  overflow: hidden;
}
.atm-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
}
.atm-hero-meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .95rem;
}
.atm-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.atm-hero-meta time {
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
}
.atm-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin-bottom: .95rem;
}
.atm-metric {
  text-align: center;
  padding: .55rem .2rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: .65rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.25;
}
.atm-metric span {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: .08rem;
}
.atm-metric.is-ok span { color: #047857; }
.atm-metric.is-bad span { color: #b91c1c; }
.atm-metric.is-rate span { color: #1d4ed8; }
.atm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 3.1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
}
.atm-cta.is-secondary {
  background: #fff;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
  box-shadow: none;
}
.atm-cta-hint {
  margin: .55rem 0 0;
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
  color: #64748b;
}
.atm-report-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin: .75rem 0 0;
}
.atm-report-links a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 750;
}
.atm-report-links a:hover {
  background: #dbeafe;
}
.atm-empty-inline {
  text-align: center;
  padding: .5rem 0 .25rem;
  color: #64748b;
}
.atm-empty-inline i { font-size: 1.6rem; color: #94a3b8; display: block; margin-bottom: .4rem; }
.atm-empty-inline h2 { margin: 0 0 .3rem; font-size: 1.05rem; color: #0f172a; }
.atm-empty-inline p { margin: 0; font-size: .84rem; }

.atm-filters {
  display: flex;
  gap: .45rem;
  align-items: flex-end;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .75rem;
}
.atm-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.atm-field span {
  font-size: .7rem;
  font-weight: 800;
  color: #64748b;
}
.atm-field select,
.atm-field input {
  min-height: 2.45rem;
  padding: .4rem .55rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font: inherit;
  font-size: .88rem;
  background: #fff;
  width: 100%;
}
.atm-reset {
  width: 2.45rem;
  height: 2.45rem;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 1px;
}

.atm-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: .95rem .9rem 1rem;
  box-shadow: 0 8px 20px rgba(30, 58, 95, .05);
}
.atm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding: 0 .1rem;
}
.atm-section-head h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: #0f172a;
}
.atm-section-head span {
  font-size: .78rem;
  font-weight: 700;
  color: #94a3b8;
}
.atm-class-list,
.atm-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.atm-class {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .7rem;
  border-radius: 13px;
  border: 1px solid #eef2f7;
  background: #fafbfc;
  text-decoration: none;
  color: inherit;
}
.atm-class.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.atm-class-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.atm-class.is-done .atm-class-icon {
  background: #d1fae5;
  color: #047857;
}
.atm-class-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.atm-class-body strong {
  font-size: .92rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atm-class-body span {
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}
.atm-class-side {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .05rem;
  flex-shrink: 0;
  position: relative;
  padding-right: 1rem;
}
.atm-class-side em {
  font-style: normal;
  font-size: .82rem;
  font-weight: 800;
}
.atm-class-side em.is-done { color: #047857; }
.atm-class-side em.is-pending { color: #c2410c; }
.atm-class-side small {
  font-size: .65rem;
  font-weight: 700;
  color: #94a3b8;
}
.atm-class-side .bi-chevron-right {
  position: absolute;
  right: -.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e1;
  font-size: .9rem;
}
.atm-session {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .65rem;
  border-radius: 12px;
  border: 1px solid #eef2f7;
  background: #fafbfc;
  text-decoration: none;
  color: inherit;
}
.atm-session-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.atm-session-main strong {
  font-size: .88rem;
  font-weight: 800;
  color: #0f172a;
}
.atm-session-main span {
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atm-session-pct {
  flex-shrink: 0;
  min-width: 2.6rem;
  text-align: center;
  padding: .35rem .4rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
}
.atm-session-pct.is-high { background: #ecfdf5; color: #047857; }
.atm-session-pct.is-mid { background: #fffbeb; color: #b45309; }
.atm-session-pct.is-low { background: #fef2f2; color: #b91c1c; }
.atm-empty {
  text-align: center;
  padding: 1.4rem .75rem;
  color: #94a3b8;
}
.atm-empty i { font-size: 1.4rem; display: block; margin-bottom: .35rem; }
.atm-empty p { margin: 0; font-size: .84rem; font-weight: 600; }

/* Ambil kehadiran dalam shell guru */
.guru-body .atm-take .att-take-hero,
.guru-body .atm-take-hero {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 8px 20px rgba(30, 58, 95, .06);
  padding: .95rem 1rem;
  margin-bottom: .75rem;
}
.guru-body .atm-take .att-take-back {
  font-size: .8rem;
  font-weight: 700;
  color: #64748b;
}
.guru-body .atm-take .att-take-title-row h1 {
  font-size: 1.2rem;
  font-weight: 800;
}
.guru-body .atm-take .att-class-switch {
  gap: .4rem;
  margin-bottom: .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
}
.guru-body .atm-take .att-class-chip {
  border-radius: 12px;
  min-height: 2.5rem;
}
.guru-body .atm-take .att-take-bar {
  border-radius: 14px;
  margin-bottom: .65rem;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--guru-card, #fffcf7);
  box-shadow: 0 4px 16px rgba(12, 59, 46, .06);
  border: 1px solid var(--guru-line, #e4ddd0);
}
.guru-body .atm-take .att-roster-shell {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--guru-line, #e4ddd0);
  background: var(--guru-card, #fffcf7);
}
.guru-body .atm-take .att-student {
  padding: .7rem .75rem;
  gap: .55rem;
}
.guru-body .atm-take .att-chip {
  min-width: 2.55rem;
  min-height: 2.55rem;
}
.guru-body .atm-take .att-take-footer {
  position: sticky;
  bottom: 4.75rem;
  z-index: 6;
  margin: .75rem 0 0;
  padding: .65rem 0 calc(.35rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, #f6f3ec 28%);
}
.guru-body .atm-take .att-take-footer .btn {
  width: 100%;
  min-height: 3rem;
  border-radius: 14px;
  font-weight: 800;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(12, 59, 46, .25);
}

/* ===== Staff form ===== */
.staff-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.staff-choice-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.staff-principal-option {
  width: 100%;
  align-items: flex-start;
}
.staff-principal-option em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-primary);
}
.staff-form textarea {
  width: 100%;
  min-height: 4.25rem;
  resize: vertical;
  font: inherit;
}
@media (max-width: 799.98px) {
  .staff-choice-grid,
  .staff-choice-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ===== Guru attendance take (mobile) ===== */
.gat {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-bottom: .25rem;
}
.gat-top {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.gat-back {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 1.1rem;
  text-decoration: none;
}
.gat-back:hover { color: var(--brand-primary); text-decoration: none; }
.gat-top-main { flex: 1; min-width: 0; }
.gat-top-main h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0f172a;
  line-height: 1.25;
}
.gat-top-main p {
  margin: .2rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}
.gat-pill {
  flex: 0 0 auto;
  margin-top: .2rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.gat-pill.is-saved { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.gat-pill.is-new { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

.gat-datebar {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .35rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.gat-date-nav {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-size: 1.05rem;
}
.gat-date-nav:active { background: #f1f5f9; }
.gat-date-form { flex: 1; min-width: 0; margin: 0; }
.gat-date-form input[type="date"] {
  width: 100%;
  min-height: 2.4rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}

.gat-classes {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .1rem;
  scrollbar-width: none;
}
.gat-classes::-webkit-scrollbar { display: none; }
.gat-class {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.gat-class em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  color: #94a3b8;
}
.gat-class.is-active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
.gat-class.is-active em { color: rgba(255,255,255,.7); }

.gat-notice {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: .82rem;
  line-height: 1.4;
}
.gat-notice i { font-size: 1.05rem; margin-top: .1rem; }
.gat-notice strong { display: block; margin-bottom: .1rem; }
.gat-notice span { font-weight: 550; opacity: .9; }

.gat-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.gat-empty i {
  font-size: 1.75rem;
  color: #94a3b8;
  display: block;
  margin-bottom: .55rem;
}
.gat-empty h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}
.gat-empty p {
  margin: 0;
  font-size: .84rem;
  color: #64748b;
  font-weight: 550;
}

.gat-draft {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: .78rem;
  font-weight: 650;
}
.gat-draft[hidden] { display: none !important; }

.gat-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem .65rem;
  align-items: center;
  padding: .7rem .8rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
.gat-progress { grid-column: 1 / -1; }
.gat-progress-text {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-bottom: .35rem;
  font-size: .82rem;
  font-weight: 650;
  color: #64748b;
}
.gat-progress-text strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}
.gat-progress-track {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.gat-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  transition: width .18s ease;
}
.gat-counts {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.gat-counts span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .45rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: .72rem;
  font-weight: 800;
  color: #334155;
}
.gat-counts em {
  font-style: normal;
  color: #94a3b8;
}
.gat-all {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .65rem;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #047857;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.gat-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.gat-student {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .75rem .8rem .85rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
  transition: border-color .12s, background .12s;
}
.gat-student.is-present { border-color: #a7f3d0; background: #f0fdf4; }
.gat-student.is-absent { border-color: #fecaca; background: #fef2f2; }
.gat-student.is-late { border-color: #fde68a; background: #fffbeb; }
.gat-student.is-excused { border-color: #bfdbfe; background: #eff6ff; }
.gat-student.is-pending { border-style: dashed; }
.gat-student-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .65rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.gat-student.is-marked .gat-student-head {
  cursor: pointer;
}
.gat-student.is-collapsed .gat-student-head {
  margin-bottom: 0;
}
.gat-student.is-collapsed .gat-status {
  display: none;
}
.gat-picked {
  flex: 0 0 auto;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .35rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  background: #e2e8f0;
  color: #334155;
}
.gat-student.is-present .gat-picked { background: #bbf7d0; color: #047857; }
.gat-student.is-absent .gat-picked { background: #fecaca; color: #b91c1c; }
.gat-student.is-late .gat-picked { background: #fde68a; color: #b45309; }
.gat-student.is-excused .gat-picked { background: #bfdbfe; color: #1d4ed8; }
.gat-edit-hint {
  flex: 0 0 auto;
  font-size: .75rem;
  color: #94a3b8;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .12s, transform .15s;
}
.gat-student.is-marked .gat-edit-hint { opacity: .7; }
.gat-student.is-marked:not(.is-collapsed) .gat-edit-hint {
  opacity: 1;
  transform: rotate(180deg);
  color: #64748b;
}
.gat-bil {
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  background: #f1f5f9;
  color: #64748b;
}
.gat-student-text { min-width: 0; flex: 1; }
.gat-student-text a,
.gat-student-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.3;
}
.gat-student-text a:active { color: var(--brand-primary); }
.gat-student-text span {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
}
.gat-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
}
.gat-chip {
  margin: 0;
  cursor: pointer;
  position: relative;
}
.gat-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gat-chip > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 3.1rem;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
}
.gat-chip i { font-size: 1.05rem; }
.gat-chip b { font-weight: 800; letter-spacing: .02em; }
.gat-chip.present input:checked + span {
  background: #059669; border-color: #059669; color: #fff;
  box-shadow: 0 6px 14px rgba(5, 150, 105, .28);
}
.gat-chip.absent input:checked + span {
  background: #dc2626; border-color: #dc2626; color: #fff;
  box-shadow: 0 6px 14px rgba(220, 38, 38, .25);
}
.gat-chip.late input:checked + span {
  background: #d97706; border-color: #d97706; color: #fff;
  box-shadow: 0 6px 14px rgba(217, 119, 6, .25);
}
.gat-chip.excused input:checked + span {
  background: #2563eb; border-color: #2563eb; color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .25);
}

.gat-footer {
  position: sticky;
  bottom: 4.6rem;
  z-index: 9;
  margin-top: .35rem;
  padding: .55rem 0 calc(.2rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, #eef2f7 35%);
}
.gat-save {
  width: 100%;
  min-height: 3.15rem;
  border-radius: 14px;
  font-weight: 800;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .28);
}

.gat-extra {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.gat-extra > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  font-size: .88rem;
  font-weight: 750;
  color: #334155;
  cursor: pointer;
  list-style: none;
}
.gat-extra > summary::-webkit-details-marker { display: none; }
.gat-extra > summary i {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
}
.gat-extra-form {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid #f1f5f9;
  padding-top: .85rem;
}
.gat-extra-form label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 750;
  color: #64748b;
}
.gat-extra-form input,
.gat-extra-form select {
  min-height: 2.55rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}
.gat-extra-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.gat-extra-form .btn {
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
  border-radius: 12px;
  font-weight: 800;
  margin-top: .2rem;
}

/* ===== Attendance desktop hub (atd) ===== */
.atd { display: flex; flex-direction: column; gap: 1rem; }
.atd-hero {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  gap: 1.1rem 1.5rem; padding: 1.15rem 1.35rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.atd-hero-lead { display: flex; flex-direction: column; gap: .25rem; min-width: 14rem; }
.atd-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.atd-hero-lead strong {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-dark);
}
.atd-hero-lead p { margin: .15rem 0 0; font-size: .82rem; color: var(--text-mid); font-weight: 550; }
.atd-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(4.5rem, 1fr));
  gap: .55rem; flex: 1 1 18rem; max-width: 30rem;
}
.atd-metric {
  display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem;
  background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.atd-metric span {
  font-size: .65rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.atd-metric strong {
  font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--text-dark); line-height: 1.1;
}
.atd-metric.is-ok strong { color: var(--ok); }
.atd-metric.is-bad strong { color: var(--danger); }
.atd-metric.is-rate strong { color: var(--brand-primary); }

.atd-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1rem; padding: .9rem 1.15rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.atd-toolbar-fields { display: flex; flex-wrap: wrap; gap: .65rem .9rem; align-items: flex-end; flex: 1; }
.atd-field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.atd-field label {
  font-size: .68rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.atd-field select,
.atd-field input[type="date"] {
  min-width: 11rem; max-width: 15rem; width: 100%;
  padding: .48rem .65rem; font-size: .88rem; font-weight: 600;
}
.atd-static { padding: .48rem .1rem; font-size: .95rem; font-weight: 750; color: var(--text-dark); }

.atd-layout {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 1rem; align-items: start;
}
.atd-layout.is-solo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); }
.atd-panel {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.atd-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--border-light); background: #fafbfc;
}
.atd-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.atd-panel-head p { margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 550; }
.atd-count {
  flex: 0 0 auto; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .75rem; font-weight: 800;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}

.atd-class-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem; padding: 1rem 1.1rem 1.15rem;
}
.atd-class {
  display: flex; flex-direction: column; gap: .75rem; padding: .9rem 1rem;
  border: 1.5px solid var(--border-light); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .12s, box-shadow .12s;
}
.atd-class:hover { border-color: #c7d2fe; box-shadow: 0 6px 16px rgba(37, 99, 235, .08); }
.atd-class.is-active { border-color: rgba(102,126,234,.55); box-shadow: 0 0 0 3px rgba(102,126,234,.1); }
.atd-class.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.atd-class-top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.atd-class h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--text-dark); }
.atd-class-top p { margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 550; }
.atd-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800;
  border: 1px solid transparent; white-space: nowrap;
}
.atd-badge.is-pending { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.atd-badge.is-done { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.atd-class-actions { display: flex; gap: .4rem; }
.atd-class-actions .btn { flex: 1; justify-content: center; }

.atd-class-list { max-height: min(70vh, 640px); overflow-y: auto; }
.atd-year { border-bottom: 1px solid var(--border-light); }
.atd-year:last-child { border-bottom: none; }
.atd-year-label {
  position: sticky; top: 0; z-index: 1; padding: .55rem 1.1rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid var(--border-light);
}
.atd-year ul { list-style: none; margin: 0; padding: 0; }
.atd-year a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1.1rem; color: var(--text-dark); text-decoration: none;
  border-top: 1px solid transparent;
}
.atd-year li + li a { border-top-color: var(--border-light); }
.atd-year a:hover { background: #f5f7ff; color: var(--brand-primary); }
.atd-class-name { display: inline-flex; align-items: center; gap: .4rem; font-weight: 750; font-size: .9rem; }
.atd-dot { color: #059669; font-size: .85rem; }
.atd-class-meta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 650; color: var(--text-muted);
}

.atd-sessions { max-height: min(70vh, 640px); overflow-y: auto; }
.atd-day { border-bottom: 1px solid var(--border-light); }
.atd-day:last-child { border-bottom: none; }
.atd-day-label {
  position: sticky; top: 0; z-index: 1; padding: .55rem 1.1rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid var(--border-light);
}
.atd-day ul { list-style: none; margin: 0; padding: 0; }
.atd-day li {
  display: flex; align-items: center; justify-content: space-between; gap: .85rem;
  padding: .8rem 1.1rem; border-top: 1px solid var(--border-light);
}
.atd-day li:first-child { border-top: none; }
.atd-session-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.atd-session-main strong { font-size: .92rem; font-weight: 800; }
.atd-session-main span { font-size: .78rem; color: var(--text-muted); font-weight: 550; }
.atd-bar { height: 4px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: .25rem; max-width: 12rem; }
.atd-bar > span { display: block; height: 100%; border-radius: inherit; }
.atd-bar > span.is-high { background: var(--ok); }
.atd-bar > span.is-mid { background: var(--warn); }
.atd-bar > span.is-low { background: var(--danger); }
.atd-session-side { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.atd-pct { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.atd-pct.is-high { color: var(--ok); }
.atd-pct.is-mid { color: var(--warn); }
.atd-pct.is-low { color: var(--danger); }
.atd-frac { font-size: .72rem; font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 2.4rem; }

.atd-empty {
  text-align: center; padding: 2.5rem 1.25rem; color: var(--text-muted);
}
.atd-empty i { font-size: 1.85rem; display: block; margin-bottom: .55rem; opacity: .5; }
.atd-empty p { margin: 0 0 .9rem; font-weight: 550; }
.atd-empty-page {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.atd-empty-icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto .9rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #64748b; font-size: 1.5rem;
}
.atd-empty-page h2 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; }
.atd-empty-page p { margin: 0 auto; max-width: 28rem; font-size: .9rem; color: var(--text-muted); }

@media (max-width: 959.98px) {
  .atd-layout, .atd-layout.is-solo { grid-template-columns: 1fr; }
  .atd-class-list, .atd-sessions { max-height: none; }
  .atd-metrics { max-width: none; }
}
@media (max-width: 575.98px) {
  .atd-metrics { grid-template-columns: repeat(2, 1fr); }
  .atd-field select, .atd-field input[type="date"] { max-width: none; min-width: 0; }
  .atd-session-side .atd-frac { display: none; }
  .atd-day li { flex-wrap: wrap; }
  .atd-session-side { width: 100%; justify-content: flex-end; }
}

/* ===== Staff leave desktop (sld) ===== */
.sld { display: flex; flex-direction: column; gap: 1rem; }
.sld-hero {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  gap: 1.1rem 1.5rem; padding: 1.15rem 1.35rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.sld-hero-lead { display: flex; flex-direction: column; gap: .25rem; min-width: 14rem; }
.sld-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.sld-hero-lead strong {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-dark);
}
.sld-hero-lead p { margin: .15rem 0 0; font-size: .82rem; color: var(--text-mid); font-weight: 550; }
.sld-hero-lead a { color: #c2410c; font-weight: 750; }
.sld-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(4.5rem, 1fr));
  gap: .55rem; flex: 1 1 18rem; max-width: 30rem;
}
.sld-metric {
  display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem;
  background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.sld-metric span {
  font-size: .65rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.sld-metric strong {
  font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--text-dark); line-height: 1.1;
}
.sld-metric.is-pending strong { color: #c2410c; }
.sld-metric.is-ok strong { color: var(--ok); }
.sld-metric.is-off strong { color: #94a3b8; }

.sld-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1rem; padding: .9rem 1.15rem;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.sld-toolbar-fields { display: flex; flex-wrap: wrap; gap: .65rem .9rem; align-items: flex-end; flex: 1; }
.sld-toolbar-actions { display: flex; gap: .4rem; align-items: center; }
.sld-field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
.sld-field label {
  font-size: .68rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.sld-field select,
.sld-field input[type="date"] {
  min-width: 10.5rem; max-width: 14rem; width: 100%;
  padding: .48rem .65rem; font-size: .88rem; font-weight: 600;
}

.sld-panel {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.sld-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--border-light); background: #fafbfc;
}
.sld-panel-head h2 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.sld-panel-head p { margin: .2rem 0 0; font-size: .78rem; color: var(--text-muted); font-weight: 550; }
.sld-count {
  flex: 0 0 auto; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .75rem; font-weight: 800;
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}

.sld-empty {
  text-align: center; padding: 2.75rem 1.25rem; color: var(--text-muted);
}
.sld-empty i { font-size: 1.85rem; display: block; margin-bottom: .55rem; opacity: .5; }
.sld-empty h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; color: var(--text-dark); }
.sld-empty p { margin: 0 0 1rem; font-size: .88rem; font-weight: 550; max-width: 26rem; margin-left: auto; margin-right: auto; }

.sld-table-wrap { overflow-x: auto; }
.sld-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.sld-table th {
  text-align: left; padding: .65rem 1.1rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.sld-table td {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.sld-table tbody tr:last-child td { border-bottom: 0; }
.sld-table tbody tr:hover { background: #fafbfc; }
.sld-row.is-pending { background: #fffbeb; }
.sld-row.is-pending:hover { background: #fff7ed; }
.sld-table td strong { display: block; font-weight: 800; color: var(--text-dark); }
.sld-sub {
  display: block; margin-top: .15rem; font-size: .75rem; font-weight: 550; color: var(--text-muted);
}
.sld-type {
  display: inline-flex; padding: .18rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155;
}
.sld-range { font-size: .9rem; }
.sld-status {
  display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap;
}
.sld-status.is-pending { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.sld-status.is-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sld-status.is-off { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.sld-status.is-muted { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.sld-reason {
  max-width: 16rem; font-size: .84rem; color: var(--text-mid); font-weight: 550;
  line-height: 1.4; word-break: break-word;
}
.sld-actions {
  white-space: nowrap; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end;
}
.sld-actions form { display: inline; margin: 0; }

.sld-form { display: flex; flex-direction: column; gap: 1rem; max-width: 960px; }
.sld-form-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 1rem; align-items: start;
}
.sld-form-side { position: sticky; top: .75rem; }
.sld-form-body { padding: 1.05rem 1.15rem 1.2rem; }
.sld-form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem .9rem;
}
.sld-form-field { min-width: 0; }
.sld-form-field.sld-span-2 { grid-column: 1 / -1; }
.sld-form-field label {
  display: block; margin-bottom: .3rem;
  font-size: .75rem; font-weight: 700; color: var(--text-mid);
}
.sld-form-field .req { color: var(--danger); }
.sld-form-field select,
.sld-form-field input {
  width: 100%; min-height: 2.55rem;
}
.sld-form-static {
  padding: .55rem 0; font-size: .95rem; font-weight: 750; color: var(--text-dark);
}
.sld-check {
  display: inline-flex; align-items: flex-start; gap: .5rem; margin: 0;
  font-size: .88rem; font-weight: 650; color: var(--text-dark); cursor: pointer;
}
.sld-check input { width: auto; margin-top: .15rem; accent-color: var(--brand-primary); }
.sld-notes {
  margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.55;
  color: var(--text-muted); font-weight: 550;
}
.sld-notes li + li { margin-top: .45rem; }
.sld-form-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1.1rem;
  background: rgba(255,255,255,.96); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.sld-form-footer-note { margin: 0; font-size: .8rem; color: var(--text-muted); font-weight: 550; }
.sld-form-footer-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: auto; }

@media (max-width: 959.98px) {
  .sld-form-layout { grid-template-columns: 1fr; }
  .sld-form-side { position: static; }
  .sld-metrics { max-width: none; }
}
@media (max-width: 575.98px) {
  .sld-metrics { grid-template-columns: repeat(2, 1fr); }
  .sld-form-grid { grid-template-columns: 1fr; }
  .sld-form-field.sld-span-2 { grid-column: auto; }
  .sld-field select, .sld-field input[type="date"] { max-width: none; min-width: 0; }
  .sld-form-footer { flex-direction: column; align-items: stretch; }
  .sld-form-footer-actions { margin-left: 0; }
  .sld-form-footer-actions .btn { flex: 1; justify-content: center; }
}

/* GK-10 & Guru Ganti bulanan */
.gk10-form-code {
  text-align: center;
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.gk10-section-title {
  margin: 1.25rem 0 .55rem;
  font-size: .95rem;
  font-weight: 800;
}
.gk10-log-table th,
.gk10-summary-table th {
  white-space: nowrap;
}
.gk10-log-table td.gk10-date {
  white-space: nowrap;
  font-weight: 650;
  font-size: .82rem;
}
.gk10-log-table tr.gk10-day-start td {
  border-top: 2px solid var(--border, #d0d7de);
}
.gk10-sign {
  min-width: 5.5rem;
  height: 1.6rem;
}
.gk10-refs {
  font-size: .78rem;
  max-width: 22rem;
  white-space: normal;
}
.gk10-footnote {
  margin: 1rem 0 0;
  font-size: .78rem;
}
body.print-page .gk10-sheet.report-sheet {
  padding: .4rem .2rem;
  box-shadow: none;
  border: 0;
}
body.print-page .gk10-log-table,
body.print-page .gk10-summary-table {
  font-size: .7rem;
}
@media print {
  .gk10-sheet .topbar,
  .no-print { display: none !important; }
}

/* ===== Guardian show (profil) ===== */
.gd-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .55rem;
  margin: 0 0 .85rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-muted);
}
.gd-crumb a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-mid);
  font-weight: 700;
}
.gd-crumb a:hover { color: var(--brand-primary); text-decoration: none; }
.gd-crumb-sep { opacity: .45; }
.gd-crumb-current { color: var(--text-dark); font-weight: 750; }
.gd-crumb-year {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gd-id {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.gd-id-left {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 280px;
}
.gd-avatar {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 6px 16px rgba(102, 126, 234, .28);
}
.gd-id-text { min-width: 0; flex: 1; }
.gd-id-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  margin-bottom: .4rem;
}
.gd-id-title h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.gd-id-status { display: flex; flex-wrap: wrap; gap: .3rem; }
.gd-id-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: var(--text-mid);
  font-size: .88rem;
  font-weight: 600;
}
.gd-id-contacts li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.gd-id-contacts i { color: var(--text-muted); font-size: .92rem; }
.gd-id-contacts a { color: inherit; font-weight: 700; }
.gd-id-contacts a:hover { color: var(--brand-primary); }
.gd-id-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  justify-content: flex-end;
}
.gd-inline-form { display: inline; margin: 0; }

.gd-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.gd-metric {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.gd-metric-k {
  display: block;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.gd-metric-v {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.gd-metric-v-sm { font-size: .95rem; word-break: break-word; }

.gd-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr);
  gap: 1rem;
  align-items: start;
}
.gd-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem 1.1rem;
}
.gd-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border-light);
}
.gd-panel-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.gd-panel-sub {
  margin: .2rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.gd-empty {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem .2rem 1.1rem;
  color: var(--text-mid);
}
.gd-empty > i {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--text-muted);
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.gd-empty strong { display: block; color: var(--text-dark); margin-bottom: .15rem; }
.gd-empty p { margin: 0; font-size: .86rem; }

.gd-table-wrap { overflow-x: auto; margin: 0 -.15rem; }
.gd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.gd-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .35rem .55rem .55rem;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.gd-table td {
  padding: .7rem .55rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.gd-table tr:last-child td { border-bottom: 0; }
.gd-table tr.is-primary td { background: #f8fffb; }
.gd-student-link {
  font-weight: 750;
  color: var(--text-dark);
  margin-right: .35rem;
}
.gd-student-link:hover { color: var(--brand-primary); }
.gd-tag {
  display: inline-flex;
  align-items: center;
  padding: .08rem .4rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 750;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  vertical-align: middle;
}
.gd-row-actions {
  display: flex;
  gap: .3rem;
  justify-content: flex-end;
  white-space: nowrap;
}
.gd-row-actions form { margin: 0; }

.gd-linkbox {
  margin-top: 1rem;
  padding-top: .95rem;
  border-top: 1px dashed var(--border-light);
}
.gd-linkbox h3 {
  margin: 0 0 .65rem;
  font-size: .88rem;
  font-weight: 800;
}
.gd-link-form { margin: 0; }
.gd-stu-pick-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-mid);
}
.gd-link-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) auto auto;
  gap: .65rem .75rem;
  align-items: end;
}
.gd-link-meta { margin-top: .85rem; }
.gd-link-check { padding-bottom: .35rem; }
.gd-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-weight: 700;
  font-size: .86rem;
  cursor: pointer;
  white-space: nowrap;
}
.gd-link-submit { display: flex; align-items: flex-end; }

.gd-stu-list {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gd-stu-list .cls-teacher-list {
  max-height: none;
  overflow: visible;
}
.gd-stu-list .cls-teacher-option { cursor: default; }
.gd-stu-cols {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, .75fr) minmax(0, .85fr) auto !important;
}
.gd-stu-list .cls-teacher-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.gd-stu-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.gd-stu-actions form { margin: 0; }
#gdStuPicker,
#gdStuCurrent {
  --cls-cols: minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, .7fr);
}
#gdStuCurrent { margin-bottom: .55rem; }
#gdStuCurrent[hidden],
#gdLinkMeta[hidden] { display: none !important; }

.gd-portal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .7rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  margin-bottom: .85rem;
}
.gd-portal-strip.is-on {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.gd-portal-strip.is-off {
  background: #fffbeb;
  border-color: #fde68a;
}
.gd-portal-strip-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  font-size: .8rem;
  color: var(--text-mid);
}
.gd-portal-strip-text strong {
  font-size: .86rem;
  color: var(--text-dark);
}
.gd-portal-strip-text code {
  font-size: .78rem;
  background: rgba(255,255,255,.65);
  padding: .05rem .28rem;
  border-radius: 4px;
}
.gd-portal-strip-text em {
  font-style: normal;
  font-weight: 650;
  color: #b45309;
  font-size: .75rem;
}

.gd-dl {
  margin: 0;
  display: grid;
  gap: 0;
}
.gd-dl > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .5rem;
  padding: .48rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .86rem;
}
.gd-dl > div:last-child { border-bottom: 0; }
.gd-dl dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 650;
}
.gd-dl dd {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}

.gd-aside-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border-light);
  font-size: .72rem;
  font-weight: 650;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .gd-shell { grid-template-columns: 1fr; }
  .gd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gd-metrics { grid-template-columns: 1fr 1fr; }
  .gd-id-actions { width: 100%; }
  .gd-id-actions .btn { flex: 1 1 auto; justify-content: center; }
  .gd-link-row { grid-template-columns: 1fr; }
  .gd-dl > div { grid-template-columns: 1fr; gap: .1rem; }
  .gd-row-actions { flex-wrap: wrap; }
}

/* Class form — nama kelas di label guru kelas */
.cls-homeroom-for {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--brand-primary);
  background: rgba(102, 126, 234, .1);
  border: 1px solid rgba(102, 126, 234, .22);
  vertical-align: middle;
}

/* Staff list — kelas jagaan di bawah nama */
.staff-homeroom-classes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .3rem;
}
.staff-class-tag {
  display: inline-block;
  padding: .08rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  color: var(--brand-primary);
  background: rgba(102, 126, 234, .1);
  border: 1px solid rgba(102, 126, 234, .22);
  line-height: 1.35;
}

/* Class form — guru kelas picker (aligned columns) */
.cls-teacher-picker,
.cls-teacher-current {
  --cls-cols: minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, .7fr);
  --cls-gap-x: 1rem;
  --cls-pad-x: .9rem;
}
.cls-teacher-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .45rem;
}
.cls-teacher-label-row label { margin: 0; }
.cls-teacher-for-class {
  font-size: .78rem;
  font-weight: 800;
  color: var(--brand-primary);
  background: rgba(102, 126, 234, .1);
  border: 1px solid rgba(102, 126, 234, .22);
  border-radius: 999px;
  padding: .12rem .55rem;
}
.cls-teacher-current {
  display: grid;
  grid-template-columns: var(--cls-cols);
  column-gap: var(--cls-gap-x);
  align-items: start;
  margin: 0 0 .65rem;
  padding: .7rem var(--cls-pad-x);
  border-radius: var(--radius-sm);
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
}
.cls-teacher-current.is-empty {
  border-color: #fde68a;
  background: #fffbeb;
}
.cls-teacher-picker {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.cls-teacher-picker.is-collapsed .cls-teacher-results { display: none; }
.cls-teacher-picker.is-open .cls-teacher-results { display: block; }
.cls-teacher-results[hidden] { display: none !important; }
.cls-teacher-search {
  position: relative;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border-light);
  background: #fafbfc;
}
.cls-teacher-search i {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.cls-teacher-search input {
  width: 100%;
  padding-left: 2rem;
  margin: 0;
}
.cls-teacher-list {
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}
/* Shared 3-col row — on a div, not the label (avoids .stu-field label { display:block }) */
.cls-teacher-cols {
  display: grid;
  grid-template-columns: var(--cls-cols);
  column-gap: var(--cls-gap-x);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: .55rem var(--cls-pad-x);
}
.cls-teacher-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border-light);
  background: #f8fafc;
  margin: 0;
  padding: 0;
}
.cls-teacher-head .cls-teacher-cols {
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cls-teacher-head .cls-teacher-cols > span:last-child {
  text-align: right;
}
.stu-field label.cls-teacher-option,
.cls-teacher-option {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  transition: background .12s;
}
.stu-field label.cls-teacher-option[hidden],
.cls-teacher-option[hidden],
.cls-teacher-option.is-filtered-out {
  display: none !important;
}
.cls-teacher-option:last-child { border-bottom: 0; }
.cls-teacher-option:hover { background: #f8fafc; }
.cls-teacher-option.is-selected { background: #f0f4ff; }
.cls-teacher-option > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.cls-teacher-name,
.cls-teacher-pos,
.cls-teacher-class {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .86rem;
  line-height: 1.3;
}
.cls-teacher-name {
  font-weight: 750;
  color: var(--text-dark);
}
.cls-teacher-current .cls-teacher-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}
.cls-teacher-pos {
  font-weight: 600;
  color: var(--text-mid);
}
.cls-teacher-class {
  font-weight: 700;
  color: var(--brand-primary);
  text-align: right;
}
.cls-teacher-class.is-current,
.cls-teacher-current .cls-teacher-class {
  color: #047857;
}
.cls-teacher-empty {
  margin: 0;
  padding: .75rem 1rem;
  text-align: center;
  font-size: .84rem;
}
@media (max-width: 520px) {
  .cls-teacher-picker,
  .cls-teacher-current {
    --cls-cols: minmax(0, 2fr) minmax(0, .65fr) minmax(0, .65fr);
    --cls-gap-x: .45rem;
    --cls-pad-x: .55rem;
  }
  .cls-teacher-name,
  .cls-teacher-pos,
  .cls-teacher-class { font-size: .78rem; }
  .cls-teacher-label-row { flex-wrap: wrap; }
}

/* ===== RPH module ===== */
.rph-mod { max-width: 960px; }
.rph-mod-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.rph-mod-head h1 { margin: 0; }
.rph-mod-head-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}
.rph-mod-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: .3rem;
  background: #eef1f6;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.rph-mod-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .95rem;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-mid);
  white-space: nowrap;
  text-decoration: none;
}
.rph-mod-tab:hover { color: var(--text-dark); background: rgba(255,255,255,.55); }
.rph-mod-tab.is-active {
  background: #fff;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}
.rph-mod-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--warn);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
}

.rph-day-nav {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  padding: .85rem 1rem;
  margin-bottom: .85rem;
}
.rph-day-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: #f8fafc;
  color: var(--text-dark);
  font-size: 1.1rem;
  flex-shrink: 0;
  text-decoration: none;
}
.rph-day-nav-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--brand-primary);
}
.rph-day-nav-center { flex: 1; min-width: 0; }
.rph-day-nav-fields {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.rph-day-nav-fields .field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 9rem;
}
.rph-day-nav-fields .field.grow { flex: 1; min-width: 12rem; }
.rph-day-nav-fields label {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.rph-day-nav-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
}
.rph-day-nav-title strong {
  font-size: 1.05rem;
  font-weight: 800;
}
.rph-day-nav-title > span { color: var(--text-mid); font-size: .9rem; }
.rph-today-tag {
  display: inline-block;
  margin-left: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--brand-primary);
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.rph-day-nav-right {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}

.rph-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.rph-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: .75rem .9rem;
  box-shadow: var(--shadow-sm);
}
.rph-stat-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.rph-stat-value {
  display: block;
  margin-top: .2rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rph-stat-value span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.rph-stat-ok { color: var(--ok); }
.rph-stat-warn { color: var(--warn); }
.rph-stat-bar {
  margin-top: .45rem;
  height: 4px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
}
.rph-stat-bar i {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 99px;
}

.rph-day-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.rph-lesson {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: .65rem .8rem;
  align-items: start;
  padding: .7rem .8rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #fff;
  border-left-width: 3px;
  border-left-style: solid;
  transition: border-color .12s ease, background .12s ease;
}
.rph-lesson:hover {
  border-color: #c7d2fe;
  background: #fafbff;
}
.rph-lesson.is-empty { border-left-color: #e2e8f0; }
.rph-lesson.has-rph { border-left-color: #818cf8; }
.rph-lesson.is-sub { border-left-color: #f59e0b; }
.rph-lesson.is-extra { border-left-color: #10b981; }
.rph-lesson-time {
  text-align: center;
  padding: .35rem .15rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  margin-top: .05rem;
}
.rph-lesson-time strong {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.rph-lesson-time span {
  display: block;
  margin-top: .08rem;
  font-size: .68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.rph-lesson-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem .85rem;
  align-items: start;
  min-width: 0;
}
.rph-lesson-main-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .16rem;
}
.rph-lesson-subject {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-lesson-sub {
  margin: 0;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-lesson-sep {
  margin: 0 .12rem;
  opacity: .45;
}
.rph-lesson-flag {
  color: #b45309;
  font-weight: 650;
}
.rph-lesson.is-extra .rph-lesson-flag {
  color: #047857;
}
.rph-lesson-title {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.35em;
}
.rph-lesson-title.is-empty {
  font-weight: 500;
  font-style: italic;
  color: #94a3b8;
}
.rph-lesson-main-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: .45rem;
  flex-shrink: 0;
  align-self: stretch;
}
.rph-lesson-main-right .pill {
  font-size: .68rem;
  padding: .18rem .45rem;
}
.rph-lesson-actions {
  display: flex;
  flex-direction: row;
  gap: .35rem;
  align-items: center;
}
.rph-lesson-actions .btn {
  justify-content: center;
  white-space: nowrap;
  padding: .28rem .55rem;
  font-size: .78rem;
}
.rph-lesson-print {
  min-width: 2rem;
  padding-left: .4rem;
  padding-right: .4rem;
}

.rph-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.rph-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: var(--text-muted);
  font-size: 1.5rem;
}
.rph-empty-icon.is-ok {
  background: #ecfdf5;
  color: var(--ok);
}
.rph-empty h2 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  font-weight: 800;
}
.rph-empty p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: .9rem;
}

/* Peti masuk RPH — padat & profesional */
.rph-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.rph-inbox-head-text h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.rph-inbox-head-text p {
  margin: .15rem 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}
.rph-inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .45rem .7rem;
  margin-bottom: .55rem;
  position: sticky;
  top: .35rem;
  z-index: 5;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}
.rph-inbox-checkall {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
  margin: 0;
  color: var(--text-mid);
}
.rph-inbox-checkall em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.rph-inbox-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.rph-inbox-item {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .7rem .8rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.rph-inbox-item.is-checked {
  border-color: #c7d2fe;
  background: #f8fafc;
}
.rph-inbox-check {
  position: relative;
  display: grid;
  place-items: center;
  margin: .2rem 0 0;
  cursor: pointer;
}
.rph-inbox-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rph-inbox-check-box {
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: border-color .12s ease, background .12s ease;
}
.rph-inbox-check input:checked + .rph-inbox-check-box {
  border-color: #4f46e5;
  background: #4f46e5;
}
.rph-inbox-check input:checked + .rph-inbox-check-box::after {
  content: "";
  width: .3rem;
  height: .55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.rph-inbox-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  align-items: start;
  min-width: 0;
}
.rph-inbox-main-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.rph-inbox-teacher {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-inbox-sub {
  margin: 0;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-inbox-sep {
  margin: 0 .15rem;
  opacity: .45;
}
.rph-inbox-title {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.35em;
}
.rph-inbox-main-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: .45rem;
  flex-shrink: 0;
  min-height: 100%;
  align-self: stretch;
}
.rph-inbox-date {
  display: block;
  margin: 0;
  text-align: right;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text-muted);
  white-space: nowrap;
}
.rph-inbox-date span {
  font-weight: 700;
  color: var(--text-mid);
}
.rph-inbox-actions {
  display: flex;
  flex-direction: row;
  gap: .35rem;
  align-items: center;
}
.rph-inbox-actions .btn {
  justify-content: center;
  white-space: nowrap;
  padding: .28rem .55rem;
  font-size: .78rem;
}
.rph-inbox-print {
  min-width: 2rem;
  padding-left: .4rem;
  padding-right: .4rem;
}
/* RPH print — templat AHAD (Excel RPH KAFA); preview = print = A4 */
.rph-preview-toolbar-inner {
  width: min(95vw, 210mm);
  max-width: 210mm;
}
.rph-sheet {
  --a4-w: 210mm;
  --a4-h: 297mm;
  --rph-pad-y: 8mm;
  --rph-pad-x: 10mm;
  box-sizing: border-box;
  width: min(95vw, var(--a4-w));
  max-width: var(--a4-w);
  min-height: var(--a4-h);
  margin: 1.25rem auto 2.5rem;
  padding: var(--rph-pad-y) var(--rph-pad-x);
  background: #fff;
  color: #111;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", serif;
  font-size: 10pt;
  line-height: 1.4;
  box-shadow: 0 10px 28px rgba(15, 31, 30, 0.1);
  border: 1px solid rgba(15, 31, 30, 0.06);
  /* Named page → margin A4 sepadan dengan padding preview */
  page: rph-a4;
}
.rph-sheet-head {
  text-align: center;
  margin-bottom: .65rem;
  padding-bottom: .45rem;
  border-bottom: 2.5px solid #111;
}
.rph-sheet-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.rph-sheet-school {
  margin: .25rem 0 0;
  font-size: .95rem;
  font-weight: 600;
  direction: auto;
  unicode-bidi: plaintext;
}
.rph-sheet-teacher {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: #334155;
  font-family: "Noto Naskh Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph-sheet-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(4.5rem, .55fr);
  gap: 0;
  align-items: stretch;
  margin: 0 0 .85rem;
  padding: 0;
  border: 1.5px solid #111;
  background: #fff;
}
.rph-sheet-meta-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-width: 0;
  padding: .5rem .7rem;
}
.rph-sheet-meta-item + .rph-sheet-meta-item {
  border-inline-start: 1.5px solid #111;
}
.rph-sheet-meta-label {
  display: block;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #475569;
  letter-spacing: .01em;
}
.rph-sheet-meta-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .45rem;
  min-width: 0;
}
.rph-sheet-meta-value {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.rph-sheet-meta-rumi {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph-sheet-meta-hijri {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.rph-sheet-meta-greg {
  font-size: .75rem;
  font-weight: 600;
  color: #475569;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1.25;
}
.rph-sheet-meta-week {
  text-align: center;
  align-items: center;
}
.rph-sheet-meta-week .rph-sheet-meta-body {
  justify-content: center;
}
.rph-sheet-meta-week-no {
  font-size: 1.2rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.rph-sheet-empty {
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed #94a3b8;
  font-family: "Noto Naskh Arabic", "Scheherazade New", serif;
}

.rph-slot {
  position: relative;
  margin: 0 0 .75rem;
  padding: .55rem .6rem .5rem;
  border: 1.5px solid #111;
  page-break-inside: avoid;
  break-inside: avoid;
}
.rph-slot.is-blank { border-style: dashed; border-color: #64748b; }
.rph-slot-num {
  position: absolute;
  top: .35rem;
  left: .45rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1px solid #111;
  border-radius: 2px;
  font-size: .72rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: #fff;
}
.rph-slot-pair {
  display: block;
}
.rph-slot-grid {
  direction: ltr;
  display: grid;
  /* LTR: main kiri, side kanan (stabil semasa print; elak stack RTL) */
  grid-template-columns: minmax(0, 1fr) 11.5rem;
  gap: .55rem .75rem;
}
.rph-slot-main { min-width: 0; direction: rtl; }
.rph-slot-side { direction: rtl; }
.rph-slot-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: .35rem .5rem;
  align-items: start;
  margin-bottom: .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid #cbd5e1;
}
.rph-slot-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rph-slot-label {
  font-size: .78rem;
  font-weight: 700;
  color: #1e293b;
  padding-top: .1rem;
  white-space: nowrap;
}
.rph-slot-value {
  font-size: .98rem;
  font-weight: 600;
  min-height: 1.35em;
}
.rph-slot-value-block { font-weight: 500; line-height: 1.5; }
.rph-slot-ph { color: #94a3b8; font-weight: 400; }
.rph-slot-row-list {
  grid-template-columns: 5.2rem minmax(0, 1fr);
}
.rph-slot-ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rph-slot-ol li {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: .35rem;
  margin-bottom: .2rem;
  align-items: start;
}
.rph-slot-n {
  font-size: .75rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #334155;
  padding-top: .15rem;
}
.rph-slot-t { font-size: .95rem; }
.rph-slot-reflect-lines {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.rph-slot-reflect-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .35rem;
  font-size: .9rem;
  line-height: 1.4;
}
.rph-slot-reflect-text { flex: 1 1 auto; min-width: 0; }
.rph-slot-reflect-n {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph-sheet-check {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .88rem;
  cursor: default;
}
.rph-sheet-box {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
  border: 1.5px solid #111;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1;
}
.rph-sheet-check.is-on .rph-sheet-box { background: #111; color: #fff; }
.rph-slot-refl-note {
  margin-top: .25rem;
  font-size: .88rem;
  padding: .25rem .4rem;
  border: 1px dashed #94a3b8;
}
.rph-slot-side {
  border-left: 1.5px solid #111;
  padding-left: .55rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.rph-slot-side-item { display: flex; flex-direction: column; gap: .12rem; }
.rph-slot-side-label {
  font-size: .72rem;
  font-weight: 700;
  color: #334155;
}
.rph-slot-side-val {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.rph-slot-side-class {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: #475569;
  margin-top: .1rem;
}
.rph-slot-side-tag {
  display: inline-block;
  margin-top: .2rem;
  padding: .05rem .35rem;
  border: 1px solid #111;
  font-size: .72rem;
  font-weight: 700;
  font-family: "Noto Naskh Arabic", serif;
  width: fit-content;
}
.rph-slot-time {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .88rem !important;
}
.rph-slot-notes {
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px dashed #94a3b8;
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: .35rem .5rem;
}

.rph-sheet-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: .85rem;
  border-top: 2px solid #111;
  page-break-inside: avoid;
}
.rph-sheet-sign-wide { grid-column: 1 / -1; }
.rph-sheet-sign-label {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-weight: 700;
}
.rph-sheet-sign-line {
  min-height: 2.4rem;
  border-bottom: 1.5px solid #64748b;
  margin-bottom: .35rem;
}
.rph-sheet-sign-line-tall { min-height: 3.2rem; }
.rph-sheet-sign-name {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph-sheet-uline {
  display: inline-block;
  min-width: 12rem;
  border-bottom: 1px solid #64748b;
  vertical-align: baseline;
  height: .9em;
}

/* Cetak = pratonton A4 (layout desktop dikekalkan; tiada collapse mobile) */
@page rph-a4 {
  size: A4 portrait;
  margin: 8mm 10mm;
}
@media print {
  .rph-sheet {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important; /* margin dari @page rph-a4 (= padding preview) */
    box-shadow: none !important;
    border: 0 !important;
    font-size: 8.5pt !important;
    line-height: 1.28 !important;
  }
  .rph-sheet-head {
    margin-bottom: .28rem !important;
    padding-bottom: .2rem !important;
  }
  .rph-sheet-title { font-size: 1.05rem !important; }
  .rph-sheet-school { font-size: .78rem !important; margin-top: .1rem !important; }
  .rph-sheet-teacher { font-size: .68rem !important; }
  .rph-sheet-meta {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(3.8rem, .5fr) !important;
    margin-bottom: .35rem !important;
    padding: 0 !important;
    gap: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rph-sheet-meta-item { padding: .28rem .4rem !important; gap: .08rem !important; }
  .rph-sheet-meta-label { font-size: .6rem !important; }
  .rph-sheet-meta-value,
  .rph-sheet-meta-hijri { font-size: .88rem !important; }
  .rph-sheet-meta-week-no { font-size: 1rem !important; }
  .rph-sheet-meta-rumi,
  .rph-sheet-meta-greg { font-size: .65rem !important; }
  .rph-slot-pair {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 .28rem !important;
  }
  .rph-slot {
    margin: 0 0 .22rem !important;
    padding: .22rem .3rem .18rem !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rph-slot-num {
    width: 1.05rem !important;
    height: 1.05rem !important;
    top: .2rem !important;
    left: .25rem !important;
    font-size: .62rem !important;
  }
  /* Table layout = paling stabil semasa print (elak grid RTL stack) */
  .rph-slot-grid {
    direction: ltr !important;
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 .08rem !important;
  }
  .rph-slot-main {
    display: table-cell !important;
    width: auto !important;
    vertical-align: top !important;
    direction: rtl !important;
    padding-left: .3rem !important;
  }
  .rph-slot-side {
    display: table-cell !important;
    width: 8.2rem !important;
    vertical-align: top !important;
    direction: rtl !important;
    border-left: 1.5px solid #111 !important;
    padding-left: .35rem !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .rph-slot-side-item + .rph-slot-side-item { margin-top: .18rem !important; }
  .rph-slot-row {
    margin-bottom: .1rem !important;
    padding-bottom: .08rem !important;
    gap: .15rem .28rem !important;
    grid-template-columns: 4.2rem minmax(0, 1fr) !important;
  }
  .rph-slot-label { font-size: .62rem !important; }
  .rph-slot-value { font-size: .8rem !important; min-height: 1.1em !important; }
  .rph-slot-t { font-size: .78rem !important; }
  .rph-slot-ol li { margin-bottom: .04rem !important; gap: .2rem !important; }
  .rph-slot-n { font-size: .62rem !important; padding-top: .05rem !important; }
  .rph-slot-side-label { font-size: .6rem !important; }
  .rph-slot-side-val { font-size: .75rem !important; }
  .rph-slot-time { gap: .05rem !important; }
  .rph-sheet-check { font-size: .68rem !important; gap: .2rem !important; }
  .rph-sheet-box {
    width: .75rem !important;
    height: .75rem !important;
    flex-basis: .75rem !important;
    margin-top: .08rem !important;
  }
  .rph-slot-refl-note { font-size: .72rem !important; padding: .15rem .25rem !important; margin-top: .1rem !important; }
  .rph-slot-notes { margin-top: .2rem !important; padding-top: .15rem !important; }
  .rph-sheet-foot {
    grid-template-columns: 1fr 1fr !important;
    margin-top: .35rem !important;
    padding-top: .28rem !important;
    gap: .35rem .55rem !important;
    break-inside: avoid;
  }
  .rph-sheet-sign-line { min-height: 1.35rem !important; margin-bottom: .15rem !important; }
  .rph-sheet-sign-line-tall { min-height: 1.8rem !important; }
  .rph-sheet-sign-label { font-size: .68rem !important; }
  .rph-sheet-sign-name { font-size: .72rem !important; }
  .rph-sheet-check.is-on .rph-sheet-box {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Template 2 print — padat utk 3 slot/page */
  .rph2-head { margin-bottom: .3rem !important; padding-bottom: .22rem !important; gap: .4rem !important; }
  .rph2-kicker { font-size: .58rem !important; }
  .rph2-title { font-size: 1.05rem !important; }
  .rph2-school { font-size: .75rem !important; }
  .rph2-head-side { padding: .2rem .35rem !important; }
  .rph2-head-label { font-size: .55rem !important; }
  .rph2-teacher { font-size: .75rem !important; }
  .rph2-meta { margin-bottom: .3rem !important; }
  .rph2-meta-cell { padding: .22rem .35rem !important; gap: .05rem !important; }
  .rph2-meta-label { font-size: .55rem !important; }
  .rph2-meta-cell strong { font-size: .82rem !important; }
  .rph2-meta-sub { font-size: .6rem !important; }
  .rph2-meta-week strong { font-size: .95rem !important; }
  .rph2-slot { margin-bottom: .22rem !important; }
  .rph2-slot-bar { padding: .2rem .3rem !important; gap: .25rem .4rem !important; }
  .rph2-slot-no { width: 1.05rem !important; height: 1.05rem !important; font-size: .62rem !important; }
  .rph2-slot-time { font-size: .72rem !important; }
  .rph2-slot-facts { font-size: .72rem !important; gap: .15rem .35rem !important; }
  .rph2-slot-nilai { max-width: 9rem !important; padding: .05rem .3rem .05rem .1rem !important; }
  .rph2-slot-nilai-label { font-size: .55rem !important; }
  .rph2-slot-nilai-val { font-size: .75rem !important; }
  .rph2-slot-body { padding: .28rem .35rem .22rem !important; }
  .rph2-field {
    grid-template-columns: 4rem minmax(0, 1fr) !important;
    margin-bottom: .18rem !important;
    gap: .12rem .3rem !important;
  }
  .rph2-field-label { font-size: .6rem !important; }
  .rph2-field-val { font-size: .8rem !important; line-height: 1.3 !important; }
  .rph2-field-title { font-size: .88rem !important; }
  .rph2-split {
    margin: .1rem 0 .22rem !important;
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  .rph2-panel {
    display: table-cell !important;
    width: 50% !important;
    vertical-align: top !important;
    padding: .22rem .3rem !important;
    border-inline-start: 1px solid #cbd5e1 !important;
  }
  .rph2-panel:first-child { border-inline-start: 0 !important; }
  .rph2-panel-title { font-size: .68rem !important; margin-bottom: .15rem !important; padding-bottom: .1rem !important; }
  .rph2-list li { margin-bottom: .05rem !important; font-size: .78rem !important; gap: .2rem !important; }
  .rph2-list-n { font-size: .6rem !important; }
  .rph2-reflect {
    grid-template-columns: 4rem minmax(0, 1fr) !important;
    gap: .12rem .3rem !important;
  }
  .rph2-refl-note { font-size: .72rem !important; padding: .15rem .25rem !important; }
  .rph2-foot {
    margin-top: .35rem !important;
    padding-top: 0 !important;
    gap: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .rph2-sign {
    min-height: 4.2rem !important;
    padding: .28rem .35rem .22rem !important;
  }
  .rph2-sign-label { font-size: .62rem !important; margin-bottom: .15rem !important; padding-bottom: .12rem !important; }
  .rph2-sign-space { min-height: 1.35rem !important; }
  .rph2-sign-space-tall { min-height: 1.7rem !important; }
  .rph2-sign-line { margin-bottom: .15rem !important; }
  .rph2-sign-name { font-size: .72rem !important; }
  .rph2-sign-cap { font-size: .58rem !important; }
}

/* Toolbar: pilih template (Rumi) */
.rph-tpl-switch {
  display: inline-flex;
  border: 1px solid rgba(15, 31, 30, .14);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.rph-tpl-btn {
  padding: .4rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  color: #5b6e6c;
  text-decoration: none;
  border: 0;
  background: transparent;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph-tpl-btn + .rph-tpl-btn { border-left: 1px solid rgba(15, 31, 30, .12); }
.rph-tpl-btn.is-on {
  background: #0b3d3a;
  color: #fff;
}
.rph-tpl-btn:hover:not(.is-on) { background: #f3f8f6; color: #0b3d3a; }

/* ========== Template 2 — Dokumen rasmi ========== */
.rph-sheet-t2 {
  --rph2-line: #1e293b;
  --rph2-soft: #f1f5f9;
  --rph2-muted: #64748b;
}
.rph2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin-bottom: .65rem;
  padding-bottom: .5rem;
  border-bottom: 2.5px solid var(--rph2-line);
}
.rph2-head-main { min-width: 0; flex: 1; }
.rph2-kicker {
  margin: 0 0 .15rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--rph2-muted);
}
.rph2-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
}
.rph2-school {
  margin: .2rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  direction: auto;
  unicode-bidi: plaintext;
}
.rph2-head-side {
  flex: 0 0 auto;
  text-align: start;
  padding: .35rem .55rem;
  border: 1px solid #cbd5e1;
  background: var(--rph2-soft);
}
.rph2-head-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--rph2-muted);
}
.rph2-teacher {
  display: block;
  margin-top: .1rem;
  font-size: .88rem;
  font-family: "Noto Naskh Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 .75rem;
  border: 1.5px solid var(--rph2-line);
  background: #fff;
}
.rph2-meta-cell {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .4rem .55rem;
  min-width: 0;
}
.rph2-meta-cell + .rph2-meta-cell {
  border-inline-start: 1px solid #cbd5e1;
}
.rph2-meta-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--rph2-muted);
  line-height: 1.2;
}
.rph2-meta-cell strong {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
}
.rph2-meta-sub {
  font-size: .7rem;
  font-weight: 600;
  color: var(--rph2-muted);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-meta-week {
  text-align: center;
  align-items: center;
  background: var(--rph2-soft);
}
.rph2-meta-week strong {
  font-size: 1.15rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.rph2-slot {
  margin: 0 0 .65rem;
  border: 1.5px solid var(--rph2-line);
  break-inside: avoid;
  page-break-inside: avoid;
}
.rph2-slot.is-blank { border-style: dashed; border-color: #64748b; }
.rph2-slot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  padding: .4rem .5rem;
  background: var(--rph2-soft);
  border-bottom: 1.5px solid var(--rph2-line);
  direction: rtl;
}
.rph2-slot-no {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1.5px solid #111;
  background: #fff;
  font-size: .72rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-slot-time {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  white-space: nowrap;
  font-family: "Noto Naskh Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-slot-time-sep { color: #94a3b8; font-weight: 600; }
.rph2-slot-facts {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .25rem .55rem;
  min-width: 0;
  font-size: .82rem;
  direction: rtl;
}
.rph2-slot-subject { font-weight: 700; font-family: "Noto Naskh Arabic", serif; }
.rph2-slot-tag {
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border: 1px solid #64748b;
  background: #fff;
  font-family: "Noto Naskh Arabic", serif;
}
.rph2-slot-year { color: #475569; font-weight: 600; font-family: "Noto Naskh Arabic", serif; }
.rph2-slot-nilai {
  flex: 0 0 auto;
  margin-inline-start: auto; /* pin ke kiri (RTL end) */
  max-width: 11rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
  padding: .1rem .45rem .1rem .15rem;
  border-inline-end: 0;
  border-inline-start: 1px solid #cbd5e1;
  font-family: "Noto Naskh Arabic", serif;
  text-align: start;
}
.rph2-slot-nilai-label {
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  color: #64748b;
}
.rph2-slot-nilai-val {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}
.rph2-slot-body { padding: .5rem .55rem .45rem; }
.rph2-field {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: .25rem .45rem;
  align-items: start;
  margin-bottom: .35rem;
}
.rph2-field-label {
  font-size: .72rem;
  font-weight: 700;
  color: #334155;
  padding-top: .1rem;
}
.rph2-field-val {
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  min-width: 0;
}
.rph2-field-title { font-weight: 700; font-size: 1rem; }
.rph2-split {
  direction: ltr;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: .2rem 0 .4rem;
  border: 1px solid #cbd5e1;
}
.rph2-panel {
  padding: .4rem .5rem;
  min-width: 0;
}
.rph2-panel + .rph2-panel {
  border-inline-start: 1px solid #cbd5e1;
}
.rph2-panel-title {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: #1e293b;
  padding-bottom: .2rem;
  border-bottom: 1px solid #e2e8f0;
}
.rph2-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rph2-list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .3rem;
  margin-bottom: .18rem;
  font-size: .9rem;
  align-items: start;
}
.rph2-list-n {
  font-size: .72rem;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #475569;
  padding-top: .12rem;
}
.rph2-reflect {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: .25rem .45rem;
  margin-top: .15rem;
}
.rph2-reflect-lines {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.rph2-reflect-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .3rem;
  font-size: .88rem;
  line-height: 1.35;
}
.rph2-reflect-text { flex: 1 1 auto; min-width: 0; }
.rph2-reflect-n {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-refl-note {
  grid-column: 2;
  margin-top: .15rem;
  font-size: .85rem;
  padding: .25rem .4rem;
  border: 1px dashed #94a3b8;
}
.rph2-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: .75rem;
  border: 1.5px solid var(--rph2-line);
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}
.rph2-sign {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 5.6rem;
  padding: .4rem .55rem .35rem;
}
.rph2-sign + .rph2-sign {
  border-inline-start: 1px solid #cbd5e1;
}
.rph2-sign-label {
  margin: 0 0 .3rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1e293b;
}
.rph2-sign-space {
  flex: 1 1 auto;
  min-height: 2.1rem;
}
.rph2-sign-space-tall { min-height: 2.6rem; }
.rph2-sign-line {
  border-bottom: 1.25px solid #64748b;
  margin: 0 0 .28rem;
  height: 0;
}
.rph2-sign-name {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  font-family: "Noto Naskh Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}
.rph2-sign-cap {
  margin: 0;
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #94a3b8;
}

.rph-edit { max-width: 1100px; }
.rph-edit-top { margin-bottom: .85rem; }
.rph-edit-crumb {
  margin: 0 .35rem;
  color: var(--text-muted);
  font-weight: 500;
}
.rph-edit-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: .95rem 1.15rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: .85rem;
}
.rph-edit-context-main {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.rph-edit-context-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 126, 234, .1);
  color: var(--brand-primary);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.rph-edit-context-body strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.rph-edit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .75rem;
  margin-top: .28rem;
  font-size: .82rem;
  color: var(--text-mid);
}
.rph-edit-meta .bi { margin-right: .2rem; opacity: .75; }
.rph-edit-context-status {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.rph-edit-lock {
  font-size: .78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.rph-edit-syllabus {
  padding: 0;
  margin-bottom: .85rem;
  overflow: hidden;
}
.rph-edit-syllabus-sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  user-select: none;
}
.rph-edit-syllabus-sum::-webkit-details-marker { display: none; }
.rph-edit-syllabus-sum strong { display: block; font-size: .92rem; }
.rph-edit-syllabus-sum small {
  display: block;
  margin-top: .1rem;
  font-size: .78rem;
}
.rph-edit-sec-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0fdf4;
  color: var(--ok);
  flex-shrink: 0;
}
.rph-edit-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform .18s ease;
}
.rph-edit-syllabus[open] .rph-edit-chevron { transform: rotate(180deg); }
.rph-edit-syllabus-form {
  padding: .85rem 1.1rem 1rem;
  border-top: 1px solid var(--border-light);
}
.rph-edit-syllabus-row {
  display: flex;
  gap: .55rem;
  align-items: stretch;
}
.rph-edit-syllabus-row select { flex: 1; min-width: 0; }
.rph-syl-select {
  min-height: 2.6rem;
  padding: .55rem .7rem;
  font-size: 1.02rem !important;
  line-height: 1.55;
}
.rph-syl-select option {
  direction: rtl;
  text-align: right;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", serif;
  padding: .35rem;
}
.rph-syl-preview {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #f8fafc;
}
.rph-syl-preview-meta {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .55rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.rph-syl-preview-block + .rph-syl-preview-block {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px dashed #cbd5e1;
}
.rph-syl-preview-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.rph-syl-preview-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.55;
}
.rph-syl-preview-content {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #334155;
}
.rph-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 1rem;
  align-items: start;
}
.rph-edit-main {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}
.rph-edit-section { padding: 0; overflow: hidden; }
.rph-edit-sec-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.15rem .85rem;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.rph-edit-sec-head h2 {
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.rph-edit-sec-head p {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--text-muted);
}
.rph-edit-sec-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-gradient);
  flex-shrink: 0;
  margin-top: .1rem;
}
.rph-edit-daytype {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 7.5rem;
}
.rph-edit-daytype label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0;
}
.rph-edit-daytype select { padding: .35rem .5rem; font-size: .85rem; }
.rph-edit-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .95rem;
  padding: 1.1rem 1.15rem 1.2rem;
}
.rph-edit-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rph-edit-split {
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 16.5rem);
  align-items: start;
}
.rph-edit-split .rph-edit-side {
  position: sticky;
  top: .75rem;
  padding: .75rem .8rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #f8fafc;
}
.rph-edit-split .field.full { grid-column: 1 / -1; }

/* Bahan & nilai */
.rph-bn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem);
  gap: 1rem 1.15rem;
  align-items: start;
}
.rph-bn-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.rph-bn-label-row label { margin: 0; }
.rph-bn-pick {
  max-width: 11rem;
  padding: .28rem .45rem !important;
  font-size: .78rem !important;
  border: 1px dashed #94a3b8;
  border-radius: 7px;
  background: #fff;
  color: #475569;
}
.rph-bn-value {
  padding: .85rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.rph-bn-value label {
  margin-bottom: .45rem;
}
.rph-bn-select {
  width: 100%;
  margin-bottom: .45rem;
  padding: .45rem .55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: .95rem !important;
}
.rph-bn-value .rph-field-lg {
  margin-top: 0;
}

/* Refleksi */
.rph-ref-grid {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.rph-ref-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  gap: .5rem;
  align-items: stretch;
}
.rph-ref-bank {
  width: 100%;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.45;
}
.rph-ref-count {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.rph-ref-hint {
  margin: 0;
  font-size: .78rem;
  color: var(--text-muted, #64748b);
}
.rph-ref-notes {
  padding-top: .35rem;
  border-top: 1px dashed #e2e8f0;
}
.rph-edit-fields .field { display: flex; flex-direction: column; gap: .35rem; }
.rph-edit-fields .field.full { grid-column: 1 / -1; }
.rph-edit-fields label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-mid);
  margin: 0;
}
.rph-edit-fields label .req { color: var(--danger); }
.rph-edit-fields label .hint {
  font-weight: 500;
  font-size: .72rem;
  color: var(--text-muted);
}
.rph-edit-fields input,
.rph-edit-fields textarea,
.rph-edit-fields select { width: 100%; }
.rph-edit-fields textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.45;
}
.rph-edit-fields input:focus,
.rph-edit-fields textarea:focus,
.rph-edit-fields select:focus {
  outline: none;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, .15);
}
.rph-edit-fields input[readonly],
.rph-edit-fields textarea[readonly],
.rph-edit-fields select:disabled {
  background: #f8fafc;
  color: var(--text-dark);
  cursor: default;
}
.rph-edit-aside { position: sticky; top: 1rem; }
.rph-edit-aside-card h3 {
  margin: 0 0 .35rem;
  font-size: .88rem;
  font-weight: 800;
}
.rph-edit-aside-hint {
  margin: 0 0 .85rem;
  font-size: .78rem;
  line-height: 1.4;
}
.rph-edit-aside-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: .45rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.rph-edit-aside-btn:last-child { margin-bottom: 0; }
.rph-edit-aside-rule {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: .85rem 0;
}
.rph-edit-aside-more { display: flex; flex-direction: column; }
.rph-edit-danger { color: var(--danger) !important; border-color: #fecaca !important; }
.rph-edit-danger:hover { background: #fef2f2 !important; }
.rph-edit-hidden { display: none; }
.rph-edit-sticky {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: 1rem -0.15rem 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.rph-edit-sticky-inner {
  padding: .75rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.rph-edit-sticky-actions {
  display: flex;
  gap: .45rem;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .rph-edit-layout { grid-template-columns: 1fr; }
  .rph-edit-aside { position: static; order: -1; }
  .rph-edit-aside-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem .75rem;
    align-items: center;
  }
  .rph-edit-aside-card h3,
  .rph-edit-aside-hint,
  .rph-edit-aside-rule { grid-column: 1 / -1; }
  .rph-edit-aside-more { display: contents; }
  .rph-edit-aside-btn { margin-bottom: 0; }
  .rph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rph-lesson {
    grid-template-columns: 3.6rem minmax(0, 1fr);
  }
  .rph-lesson-main {
    grid-template-columns: 1fr;
    gap: .4rem;
  }
  .rph-lesson-main-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .rph-lesson-subject { white-space: normal; }
  .rph-lesson-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .rph-inbox-item {
    grid-template-columns: 1.4rem minmax(0, 1fr);
  }
  .rph-inbox-main {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .rph-inbox-main-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .rph-inbox-date {
    text-align: left;
  }
  .rph-inbox-date br { display: none; }
  .rph-inbox-date span::before { content: ", "; }
  .rph-inbox-teacher { white-space: normal; }
  .rph-inbox-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (max-width: 640px) {
  .rph-day-nav { flex-wrap: wrap; }
  .rph-day-nav-center { order: -1; width: 100%; }
  .rph-edit-fields-2 { grid-template-columns: 1fr; }
  .rph-edit-sec-head { flex-wrap: wrap; }
  .rph-edit-daytype { margin-left: 0; width: 100%; }
  .rph-edit-syllabus-row { flex-direction: column; }
  .rph-edit-aside-card { grid-template-columns: 1fr; }
  .rph-edit-sticky-inner { flex-direction: column; align-items: stretch; }
  .rph-edit-sticky-actions .btn { flex: 1; }
}

/* Jawi content (bank + RPH fields) — UI labels remain LTR Rumi */
.jawi-text {
  direction: rtl;
  text-align: right;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", "Geeza Pro", serif;
  line-height: 1.75;
  font-size: 1.05em;
  unicode-bidi: isolate;
}
select.jawi-text,
select.jawi-text option {
  direction: rtl;
  text-align: right;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", serif;
}
input.jawi-text,
textarea.jawi-text {
  letter-spacing: 0;
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate;
}
.rph-lesson-title.jawi-text {
  font-size: .82rem;
  line-height: 1.35;
  color: #475569;
  font-style: normal;
}
.rph-inbox-title.jawi-text {
  font-size: .82rem;
  line-height: 1.35;
}
td.jawi-text strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.rph-act-bank {
  margin: 0 0 .55rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}
.rph-act-bank-label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.rph-act-bank-row {
  display: flex;
  gap: .45rem;
  align-items: stretch;
}
.rph-act-bank-row select {
  flex: 1;
  min-width: 0;
}
.rph-act-bank-row .btn { flex-shrink: 0; }

/* RPH v2 polish */
.rph-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.rph-hero h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.rph-hero-sub {
  margin: .35rem 0 0;
  color: var(--text-mid);
  font-size: .9rem;
  max-width: 36rem;
}
.rph-hero-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
}
.rph-hero-actions .rph-mod-tab-badge { margin-left: .15rem; }

.rph-day-panel {
  padding: 0;
  overflow: hidden;
  margin-bottom: 1rem;
}
.rph-day-panel-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.15rem .85rem;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  border-bottom: 1px solid var(--border-light);
}
.rph-day-panel-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.rph-day-kicker {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rph-day-panel-center h2 {
  margin: .2rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.rph-day-teacher {
  margin: .35rem 0 0;
  font-size: .84rem;
  color: var(--text-mid);
}
.rph-day-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-end;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
}
.rph-day-filters .field {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 9rem;
}
.rph-day-filters .field.grow { flex: 1; min-width: 12rem; }
.rph-day-filters label {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.rph-day-today { margin-bottom: .1rem; }

.rph-progress { padding: .9rem 1.15rem 1.05rem; }
.rph-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  color: var(--text-mid);
  margin-bottom: .4rem;
}
.rph-progress-top strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.rph-progress-bar {
  height: 8px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
}
.rph-progress-bar i {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  border-radius: 99px;
  transition: width .25s ease;
}
.rph-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--text-mid);
}
.rph-progress-meta .bi { margin-right: .25rem; opacity: .75; }
.rph-progress-meta .is-warn { color: var(--warn); font-weight: 700; }

/* Clearer Jawi inputs on RPH edit */
.rph-edit .rph-field-lg,
.rph-edit .rph-area {
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  padding: .7rem .9rem;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rph-edit .jawi-text.rph-field-lg,
.rph-edit .jawi-text.rph-area {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: isolate;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", "Geeza Pro", serif;
}
.rph-edit .rph-field-lg {
  min-height: 2.75rem;
  font-size: 1.15rem !important;
  line-height: 1.7;
}
.rph-edit .rph-area {
  min-height: 7.5rem;
  font-size: 1.12rem !important;
  line-height: 1.85 !important;
  resize: vertical;
}
.rph-edit .rph-area-sm { min-height: 4.75rem; }
.rph-edit .rph-field-lg:focus,
.rph-edit .rph-area:focus {
  outline: none;
  border-color: #818cf8;
  background: #fafafe;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, .18), inset 0 1px 2px rgba(15, 23, 42, .03);
}
.rph-edit .rph-field-lg[readonly],
.rph-edit .rph-area[readonly] {
  background: #f8fafc;
  border-style: dashed;
}
.rph-edit-fields label {
  font-size: .84rem !important;
  margin-bottom: .15rem;
}
.rph-edit-section { box-shadow: var(--shadow-sm); }

@media (max-width: 720px) {
  .rph-edit-split,
  .rph-bn-grid {
    grid-template-columns: 1fr;
  }
  .rph-edit-split .rph-edit-side {
    position: static;
    order: -1;
  }
  .rph-ref-pair {
    grid-template-columns: minmax(0, 1fr) 4rem;
  }
  .rph-bn-pick { max-width: none; }
}

/* Syllabus Jawi search */
.syl-search-jawi {
  direction: rtl;
}
.syl-search-jawi > i {
  left: auto !important;
  right: .75rem;
}
.syl-search-jawi input {
  padding-left: .85rem !important;
  padding-right: 2.35rem !important;
  font-size: 1.05rem;
  min-height: 2.4rem;
  text-align: right;
  font-family: "Noto Naskh Arabic", "Scheherazade New", "Traditional Arabic", serif;
}

@media (max-width: 720px) {
  .rph-hero { padding: 1rem; }
  .rph-day-panel-nav { padding: .9rem; }
}

/* RPH day notice (cuti peristiwa) */
.rph-notice {
  margin: 0 0 1rem;
  border: 1px solid #f0d9a8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 72%);
  overflow: hidden;
}
.rph-notice-banner {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  background: rgba(180, 120, 20, .08);
  border-bottom: 1px solid rgba(180, 120, 20, .12);
}
.rph-notice-ico {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: #b45309;
  color: #fff;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.rph-notice-banner-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.rph-notice-banner-text strong {
  font-size: .95rem;
  color: #7c2d12;
}
.rph-notice-banner-text span {
  font-size: .82rem;
  color: #92400e;
}
.rph-notice-body { padding: .85rem 1rem 1rem; }
.rph-notice-remark {
  margin: 0 0 .65rem;
  white-space: pre-wrap;
  line-height: 1.45;
  color: var(--text-dark);
}
.rph-notice-img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  object-fit: contain;
  background: #fff;
}
.rph-notice-meta { margin: .55rem 0 0; font-size: .78rem; }
.rph-notice-wait { margin: 0; padding: .75rem 1rem 1rem; font-size: .88rem; }
.rph-notice-edit {
  border-top: 1px solid rgba(180, 120, 20, .12);
  padding: 0;
}
.rph-notice-edit > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1rem;
  font-weight: 700;
  font-size: .88rem;
  color: #92400e;
}
.rph-notice-edit > summary::-webkit-details-marker { display: none; }
.rph-notice-form {
  display: grid;
  gap: .65rem;
  padding: 0 1rem 1rem;
}
.rph-notice-remove {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--text-mid);
}
.rph-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.rph-notice.is-compact .rph-notice-banner { padding: .7rem .85rem; }
.rph-notice.is-compact .rph-notice-body { padding: .7rem .85rem .85rem; }

/* Portal guru RPH */
.grph { display: flex; flex-direction: column; gap: .75rem; padding-bottom: 1rem; }
.grph-head {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.grph-head-row {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.grph-back,
.grph-inbox-btn,
.grph-date-arrow {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(11, 42, 91, .08);
  color: #0b2a5b;
  text-decoration: none;
  border: 0;
  flex-shrink: 0;
  position: relative;
}
.grph-inbox-btn em {
  position: absolute;
  top: -.15rem;
  right: -.15rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: .65rem;
  font-style: normal;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.grph-head-titles { flex: 1; min-width: 0; }
.grph-head-titles h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b2a5b;
}
.grph-head-titles p {
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--text-mid);
}
.grph-date-nav {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.grph-date-form { flex: 1; }
.grph-date-form input[type="date"] {
  width: 100%;
  min-height: 2.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  padding: .35rem .65rem;
  font-size: 1rem;
  font-weight: 700;
  background: #fff;
}
.grph-today-link {
  align-self: center;
  font-size: .82rem;
  font-weight: 700;
  color: #0b2a5b;
}
.grph-staff-form select,
.grph-teacher {
  width: 100%;
  min-height: 2.35rem;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  padding: .4rem .7rem;
  font-size: .9rem;
  background: #fff;
}
.grph-teacher {
  margin: 0;
  display: flex;
  align-items: center;
  color: var(--text-mid);
}
.grph-progress {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .78rem;
  color: var(--text-mid);
  padding: .35rem .15rem 0;
}
.grph-list { display: flex; flex-direction: column; gap: .55rem; }
.grph-card {
  display: flex;
  align-items: stretch;
  gap: .65rem;
  padding: .8rem .75rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.grph-card-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding-right: .55rem;
  border-right: 1px solid #eef2f7;
  color: #0b2a5b;
}
.grph-card-time strong { font-size: .95rem; }
.grph-card-time span { font-size: .72rem; color: var(--text-mid); }
.grph-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
  color: inherit;
}
.grph-card-body strong {
  font-size: .92rem;
  color: var(--text-dark);
}
.grph-card-body > span {
  font-size: .78rem;
  color: var(--text-mid);
}
.grph-card-body em {
  font-style: normal;
  font-size: .88rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grph-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: .35rem;
}
.grph-card-right .bi-chevron-right { color: #94a3b8; }
.grph-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: 2rem 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed var(--border-light);
  color: var(--text-mid);
}
.grph-empty i { font-size: 1.8rem; color: #94a3b8; }
.grph-empty strong { color: var(--text-dark); font-size: 1rem; }
.grph-empty span { font-size: .85rem; max-width: 16rem; }

.grph-inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .55rem .15rem;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #f4f7fb 70%, transparent);
}
.grph-checkall {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
}
.grph-inbox-item { align-items: center; }
.grph-inbox-check {
  display: grid;
  place-items: center;
  width: 1.6rem;
  flex-shrink: 0;
}
.grph-inbox-check input { width: 1.1rem; height: 1.1rem; }
.grph-quick-approve {
  flex-shrink: 0;
  align-self: center;
}

/* Mobile RPH form inside guru shell */
.grph-form {
  max-width: none;
  padding-bottom: 5.5rem;
}
.grph-form .rph-mod-head { margin-bottom: .5rem; }
.grph-form .rph-mod-head h1 { font-size: 1.15rem; }
.grph-form .rph-edit-context {
  padding: .75rem;
  border-radius: 14px;
}
.grph-form .rph-edit-layout {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.grph-form .rph-edit-aside {
  order: -1;
}
.grph-form .rph-edit-aside-card {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.grph-form .rph-edit-aside-card h3,
.grph-form .rph-edit-aside-hint,
.grph-form .rph-edit-aside-rule { display: none; }
.grph-form .rph-edit-aside-btn {
  flex: 1 1 auto;
  min-width: 42%;
}
.grph-form .rph-edit-sticky {
  left: 0;
  right: 0;
  bottom: 4.25rem;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--border-light);
  backdrop-filter: blur(8px);
}
.grph-form .rph-edit-sticky-inner {
  max-width: none;
}
.grph-form .rph-edit-sticky-inner > .muted { display: none; }
.grph-form .rph-edit-sticky-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.grph-form .rph-edit-sticky-actions .btn { width: 100%; }
.rph-edit-sticky-one { grid-template-columns: 1fr !important; width: 100%; }
.rph-edit-sticky-one .btn { width: 100%; }

.rph-day-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
}
.rph-day-status-pill.is-ready { color: #0f766e; }
.rph-day-status-pill.is-submitted { color: #b45309; }
.rph-day-status-pill.is-approved { color: #047857; }
.rph-day-status-pill.is-incomplete { color: #b91c1c; }

.rph-mod.has-day-sticky { padding-bottom: 5rem; }
.rph-day-sticky {
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin-top: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, .06);
}
.rph-day-sticky-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
}
.rph-day-sticky-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.rph-day-sticky-text strong { font-size: .95rem; color: #0b2a5b; }
.rph-day-sticky-text span { font-size: .8rem; color: var(--text-mid); }
.rph-day-sticky-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.rph-day-sticky-actions form { margin: 0; }

.grph.has-day-sticky { padding-bottom: 5.5rem; }
.grph-day-sticky {
  position: sticky;
  bottom: 4.4rem;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .65rem 0 .25rem;
  background: linear-gradient(180deg, transparent, #f4f7fb 28%);
}
.grph-day-sticky form { margin: 0; }
.grph-day-sticky .btn { width: 100%; min-height: 2.7rem; }

/* ===== Exam hub (senarai + cipta) ===== */
.exam-hub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 980px;
}
.exam-hub-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  padding: .7rem .85rem;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .04));
}
.exam-hub-search-field {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
}
.exam-hub-search-field > i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.exam-hub-search-field input {
  width: 100%;
  padding: .55rem .75rem .55rem 2.15rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
  font: inherit;
}
.exam-hub-search-field input:focus {
  outline: none;
  border-color: #93c5fd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.exam-create,
.exam-list {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, .04));
  overflow: hidden;
}
.exam-create-head,
.exam-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.15rem .85rem;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.exam-create-head h2,
.exam-list-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark, #0f172a);
}
.exam-create-head p,
.exam-list-head p {
  margin: .2rem 0 0;
  font-size: .82rem;
  color: var(--text-mid, #64748b);
}

.exam-create-form { padding: 1rem 1.15rem 1.15rem; }
.exam-create-basics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: .75rem .9rem;
  margin-bottom: 1rem;
}
.exam-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.exam-field-grow { grid-column: span 1; }
.exam-field label {
  font-size: .78rem;
  font-weight: 700;
  color: #475569;
}
.exam-field input,
.exam-field select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.exam-field input:focus,
.exam-field select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.exam-scope {
  margin: 0;
  padding: 0;
  border: 0;
}
.exam-scope legend {
  padding: 0;
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 700;
  color: #475569;
}
.exam-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.exam-scope-card {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.exam-scope-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exam-scope-card-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: 100%;
  padding: .85rem .9rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.exam-scope-card-body > i {
  font-size: 1.15rem;
  color: #64748b;
  margin-bottom: .2rem;
}
.exam-scope-card-body strong {
  font-size: .92rem;
  font-weight: 800;
  color: #0f172a;
}
.exam-scope-card-body small {
  font-size: .75rem;
  color: #64748b;
}
.exam-scope-card:hover .exam-scope-card-body {
  border-color: #cbd5e1;
  background: #fff;
}
.exam-scope-card.is-active .exam-scope-card-body,
.exam-scope-card input:checked + .exam-scope-card-body {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.exam-scope-card.is-active .exam-scope-card-body > i,
.exam-scope-card input:checked + .exam-scope-card-body > i {
  color: #2563eb;
}

.exam-scope-panel {
  margin-top: .85rem;
  padding: .85rem .9rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.exam-scope-hint {
  margin: 0 0 .65rem;
  font-size: .8rem;
  color: #64748b;
}
.exam-year-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
}
.exam-year-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.exam-year-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exam-year-chip > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .65rem .4rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.exam-year-chip strong {
  font-size: .85rem;
  font-weight: 800;
  color: #0f172a;
}
.exam-year-chip em {
  font-style: normal;
  font-size: .7rem;
  color: #64748b;
  font-weight: 600;
}
.exam-year-chip:hover:not(.is-empty) > span {
  border-color: #93c5fd;
}
.exam-year-chip input:checked + span {
  border-color: #2563eb;
  background: #eff6ff;
}
.exam-year-chip.is-empty {
  cursor: not-allowed;
  opacity: .45;
}
.exam-sole-class {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .15rem;
}
.exam-sole-class > i {
  font-size: 1.25rem;
  color: #16a34a;
}
.exam-sole-class strong {
  display: block;
  font-size: .95rem;
}
.exam-sole-class span {
  font-size: .78rem;
  color: #64748b;
}

.exam-create-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid #e2e8f0;
}
.exam-create-foot p {
  margin: 0;
  flex: 1 1 14rem;
  font-size: .78rem;
  color: #64748b;
  line-height: 1.4;
}

.exam-notice {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.exam-notice i { margin-top: .1rem; }
.exam-notice p { margin: 0; font-size: .9rem; }

.exam-empty {
  padding: 2.2rem 1.25rem;
  text-align: center;
}
.exam-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 1.35rem;
}
.exam-empty h3 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
}
.exam-empty p {
  margin: 0;
  color: #64748b;
  font-size: .88rem;
}

.exam-table-wrap { overflow-x: auto; }
.exam-table { margin: 0; }
.exam-table th {
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #64748b;
}
.exam-row-title {
  font-size: .95rem;
  color: #0f172a;
}
.exam-class-pill {
  display: inline-flex;
  max-width: 100%;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam-row-actions {
  white-space: nowrap;
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
}

@media (max-width: 800px) {
  .exam-create-basics { grid-template-columns: 1fr; }
  .exam-scope-grid { grid-template-columns: 1fr; }
  .exam-year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-create-foot { flex-direction: column; align-items: stretch; }
  .exam-create-foot .btn { width: 100%; justify-content: center; }
}
@media (max-width: 575.98px) {
  .exam-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-row-actions { justify-content: flex-start; flex-wrap: wrap; }
}