:root {
  --primary:#176b58;
  --primary-dark:#104c40;
  --bg:#f4f6f3;
  --card:#fff;
  --text:#203b34;
  --muted:#5d7169;
  --border:#dce5df;
  --warn:#ad382e;
  --ok:#187048;
  --pending:#91600c;
  --shadow:0 4px 20px #163c2905;
  --radius:16px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55
}
a {
  color:var(--primary);
  text-underline-offset:3px
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea,summary {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid #d39427;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
header {
  background:var(--primary-dark);
  color:#fff;
  padding:22px max(24px,calc((100vw - 1200px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
header h1 {
  font-size:1.35rem;
  margin:0;
  font-weight:750;
  letter-spacing:-.5px
}
header h1::before {
  content:"e";
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #89b4a4;
  border-radius:10px;
  margin-right:11px;
  background:#ffffff10;
  font-size:1.3rem
}
header .tag {
  font-size:.78rem;
  color:#d5e6de;
  font-weight:400;
  letter-spacing:0
}
#session-bar {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}
#session-bar button {
  min-height:36px;
  background:#ffffff12;
  border:1px solid #82a499;
  color:white
}
nav {
  display:flex;
  gap:8px;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0 max(24px,calc((100vw - 1200px)/2));
  overflow:auto
}
nav a {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:17px 18px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:3px solid transparent;
  font-size:.88rem;
  font-weight:600
}
nav a.active,nav a:hover {
  color:var(--primary);
  background:#f2f7f3;
  border-bottom-color:var(--primary)
}
main {
  max-width:1248px;
  margin:34px auto 64px;
  padding:0 24px
}
.page-heading {
  margin-bottom:26px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between
}
.eyebrow {
  font-size:.7rem;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:750;
  color:var(--primary);
  margin:0 0 8px
}
.page-heading h2 {
  font-size:1.85rem;
  line-height:1.2;
  letter-spacing:-.8px;
  margin:0 0 9px
}
.page-heading p:not(.eyebrow) {
  margin:0;
  color:var(--muted);
  font-size:.9rem
}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:22px;
  box-shadow:var(--shadow);
  min-width:0
}
h2 {
  margin:0 0 16px;
  font-size:1.13rem;
  letter-spacing:-.3px
}
h3 {
  font-size:.98rem;
  margin:24px 0 12px
}
p {
  overflow-wrap:anywhere
}
.helper {
  font-size:.83rem;
  color:var(--muted)
}
.card>p:first-of-type {
  margin-top:0
}
.card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-bottom:24px
}
.stat-box {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  text-align:left;
  box-shadow:var(--shadow);
  min-width:0
}
.stat-box .num {
  font-size:1.9rem;
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.9px;
  color:var(--primary);
  overflow-wrap:anywhere
}
.stat-box .lbl {
  font-size:.76rem;
  color:var(--muted);
  margin-top:9px
}
.stat-box:first-child {
  background:#eaf2ec;
  border-color:#c9ddce
}
.filter-bar {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  align-items:end;
  background:#f6f8f5;
  padding:16px;
  border:1px solid #e5ebe5;
  border-radius:12px;
  margin-bottom:20px
}
label {
  font-size:.8rem;
  color:#415e52;
  display:block;
  margin-bottom:6px;
  font-weight:600
}
input,select,textarea {
  width:100%;
  min-width:0;
  padding:10px 12px;
  border:1px solid #baccc0;
  border-radius:8px;
  font-size:.9rem;
  color:var(--text);
  background:#fff;
  min-height:44px
}
input::placeholder,textarea::placeholder {
  color:#74877d
}
textarea {
  resize:vertical
}
input:focus,select:focus,textarea:focus {
  border-color:var(--primary)
}
form.inline-form {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 20px;
  margin-bottom:4px
}
form:not(.inline-form)>div {
  margin-bottom:16px
}
.form-section {
  grid-column:1/-1;
  border-bottom:1px solid var(--border);
  padding-bottom:9px;
  margin:12px 0 0;
  font-size:.78rem;
  font-weight:750;
  color:var(--primary)
}
.form-actions {
  grid-column:1/-1;
  padding-top:4px;
  display:flex;
  gap:12px;
  align-items:center
}
.form-hint {
  font-size:.8rem;
  color:var(--muted);
  margin:0 0 20px
}
.form-card {
  padding:0
}
.form-card summary {
  cursor:pointer;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
  font-weight:700
}
.form-card summary::-webkit-details-marker {
  display:none
}
.form-card summary::after {
  content:"+";
  font-size:1.4rem;
  color:var(--primary)
}
.form-card[open] summary::after {
  content:"−"
}
.form-card[open] summary {
  border-bottom:1px solid var(--border)
}
.form-content {
  padding:24px
}
button,.button-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  background:var(--primary);
  color:#fff;
  border:1px solid transparent;
  padding:10px 17px;
  border-radius:9px;
  cursor:pointer;
  font-size:.85rem;
  font-weight:650;
  text-decoration:none;
  line-height:1.35
}
button:hover,.button-link:hover {
  background:var(--primary-dark)
}
button.secondary,.button-link.secondary {
  background:#edf2ee;
  color:#365b4b;
  border-color:#ccdcd1
}
button.secondary:hover {
  background:#dfeae2
}
button.danger {
  background:#fff3f1;
  color:var(--warn);
  border-color:#ebc4bc
}
button.danger:hover {
  background:#ffe5df
}
button:disabled {
  opacity:.65;
  cursor:wait
}
button.is-busy::before,.loading::before {
  content:"";
  display:inline-block;
  width:13px;
  height:13px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin-right:6px
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.84rem
}
th,td {
  padding:15px 12px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  overflow-wrap:anywhere
}
th {
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
  background:#f6f8f5;
  text-transform:none
}
tbody tr:last-child td {
  border-bottom:0
}
tbody tr:hover>td {
  background:#f9fbf8
}
.table-wrap {
  overflow-x:auto;
  max-width:100%
}
.sort-button {
  padding:0;
  min-height:32px;
  background:transparent;
  color:inherit;
  border-radius:3px;
  font-size:inherit;
  text-align:left;
  justify-content:flex-start;
  font-weight:700
}
.sort-button:hover {
  background:transparent;
  color:var(--primary)
}
.sort-arrow {
  font-size:.6rem;
  color:var(--primary)
}
.sort-mobile {
  display:none
}
.table-summary {
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 12px
}
.actions {
  min-width:150px
}
.actions button {
  margin:0 4px 6px 0;
  min-height:36px;
  padding:7px 10px;
  font-size:.74rem
}
.badge {
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-size:.71rem;
  font-weight:650;
  line-height:1.5;
  background:#eef1ee;
  color:#496255
}
.badge.sudah-bayar,.badge.success {
  background:#e6f3e9;
  color:var(--ok)
}
.badge.belum-bayar,.badge.warning {
  background:#fff0cf;
  color:#865b05
}
.badge.tertunggak {
  background:#ffebe6;
  color:var(--warn)
}
.empty,.placeholder {
  color:var(--muted);
  padding:28px 18px;
  text-align:center;
  background:#f8faf7;
  border:1px dashed var(--border);
  border-radius:10px;
  font-size:.86rem
}
.feedback {
  padding:12px 15px;
  border-radius:9px;
  background:#eef5ef;
  color:var(--primary);
  font-size:.85rem;
  overflow-wrap:anywhere;
  margin:12px 0
}
.feedback:empty {
  display:none
}
.feedback[data-tone="error"] {
  background:#fff0ed;
  color:var(--warn);
  border:1px solid #edcdc5
}
.feedback[data-tone="success"] {
  background:#eaf5ec;
  color:var(--ok)
}
.page-feedback {
  margin-bottom:22px
}
.loading {
  color:var(--muted);
  font-size:.85rem
}
.analytics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.analytics-grid>.card {
  margin:0
}
.chart-kicker {
  font-size:.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 8px
}
.chart-total {
  font-size:1.7rem;
  font-weight:750;
  letter-spacing:-.7px;
  margin:18px 0 4px
}
.chart-note {
  font-size:.77rem;
  color:var(--muted);
  margin:0 0 22px
}
.chart-row {
  margin-top:15px
}
.chart-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.8rem;
  margin-bottom:7px
}
.chart-label strong {
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.chart-track {
  height:8px;
  border-radius:9px;
  background:#edf1eb;
  overflow:hidden
}
.chart-fill {
  height:100%;
  border-radius:9px;
  background:var(--chart-color,var(--primary))
}
.dashboard-foot {
  margin-top:22px;
  border:1px solid #cfdfd3;
  background:#eaf2ec;
  border-radius:var(--radius);
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.dashboard-foot h3 {
  margin:0 0 4px
}
.dashboard-foot p {
  margin:0;
  font-size:.85rem;
  color:var(--muted)
}
.activity-list {
  list-style:none;
  margin:0;
  padding:0
}
.activity-item {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px 6px;
  border-bottom:1px solid var(--border)
}
.activity-item:last-child {
  border:0
}
.activity-icon {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  height:38px;
  border-radius:12px;
  background:#e9f2ec;
  color:var(--primary);
  font-weight:750
}
.activity-item[data-group="yuran"] .activity-icon {
  background:#eaf0fc;
  color:#3a6090
}
.activity-item[data-group="akademik"] .activity-icon {
  background:#eeeaf7;
  color:#67508a
}
.activity-item.needs-review {
  background:#fff8e8;
  border:1px solid #e7cc83;
  border-left:4px solid #b7861d;
  border-radius:12px;
  padding:18px;
  margin:12px 0
}
.activity-item.needs-review .activity-icon {
  background:#f8e8bc;
  color:#795917
}
.activity-body {
  flex:1;
  min-width:0
}
.activity-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.activity-body p {
  margin:8px 0;
  font-size:.89rem
}
.activity-meta {
  font-size:.76rem;
  color:var(--muted)
}
.review-note {
  font-size:.77rem!important;
  color:#805b13
}
.portal-tabs {
  display:flex;
  gap:8px;
  margin-bottom:24px;
  background:#e7ede7;
  border:1px solid #d8e2d8;
  border-radius:12px;
  padding:6px
}
.portal-tabs button {
  background:transparent;
  color:var(--muted);
  flex:1;
  padding:11px 10px
}
.portal-tabs button[aria-selected="true"] {
  background:#fff;
  color:var(--primary);
  box-shadow:0 2px 6px #1636290d
}
.connection-note {
  padding:16px;
  background:#f0f5ef;
  border-radius:10px;
  color:#355744;
  font-size:.85rem
}
.login-page main {
  max-width:460px!important;
  margin:64px auto
}
.login-page .card {
  padding:32px
}
.login-intro {
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:26px
}
.login-page button[type="submit"] {
  width:100%
}
.login-page header h1 .tag {
  display:none
}
.login-page h2 {
  font-size:1.5rem
}
.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  background:#fff;
  padding:12px;
  z-index:100;
  border-radius:8px
}
.skip-link:focus {
  top:16px
}
.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
}
.footer-note {
  font-size:.74rem;
  color:var(--muted);
  text-align:center;
  margin-top:32px
}
.detail-row>td {
  background:#f3f7f2;
  padding:18px
}
.detail-row table th {
  width:36%!important
}
.detail-row table td {
  background:transparent
}
@media(min-width:1500px) {
  main {
    margin-top:42px
  }
}
@media(max-width:1000px) {
  .analytics-grid {
    grid-template-columns:1fr 1fr
  }
  .analytics-grid>.card:last-child {
    grid-column:1/-1
  }
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  form.inline-form {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  header h1 .tag {
    display:block;
    margin:5px 0 0 45px
  }
  header h1::before {
    float:left
  }
  main {
    padding:0 20px
  }
}
@media(max-width:640px) {
  header {
    padding:18px 16px;
    align-items:flex-start;
    gap:12px
  }
  header h1 {
    font-size:1.17rem;
    white-space:nowrap
  }
  header h1 .tag {
    font-size:.65rem;
    margin-left:0;
    white-space:normal
  }
  header h1::before {
    display:none
  }
  #session-bar {
    justify-content:flex-end;
    gap:6px;
    text-align:right
  }
  #session-bar .tag {
    font-size:.68rem;
    max-width:150px
  }
  nav {
    padding:0 8px;
    gap:0
  }
  nav a {
    padding:13px 12px;
    font-size:.8rem
  }
  main {
    margin:24px auto 40px;
    padding:0 14px
  }
  .page-heading {
    align-items:flex-start;
    margin-bottom:22px;
    gap:12px
  }
  .page-heading h2 {
    font-size:1.55rem
  }
  .page-heading p:not(.eyebrow) {
    font-size:.82rem
  }
  .page-heading>.button-link {
    padding:9px 12px
  }
  .card {
    padding:18px;
    border-radius:13px;
    margin-bottom:18px
  }
  .stats {
    gap:10px;
    margin-bottom:18px
  }
  .stat-box {
    padding:16px 14px;
    border-radius:13px
  }
  .stat-box .num {
    font-size:1.45rem
  }
  .stat-box .lbl {
    font-size:.71rem
  }
  .filter-bar {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px;
    gap:12px
  }
  .filter-bar>div:first-child {
    grid-column:1/-1
  }
  .filter-bar button {
    width:100%
  }
  form.inline-form {
    grid-template-columns:1fr;
    gap:14px
  }
  input,select,textarea {
    font-size:16px
  }
  .form-card {
    padding:0
  }
  .form-card summary {
    padding:17px 18px
  }
  .form-content {
    padding:18px
  }
  .form-actions {
    display:block
  }
  .form-actions button {
    width:100%
  }
  .form-section {
    margin-top:10px
  }
  .analytics-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .analytics-grid>.card:last-child {
    grid-column:auto
  }
  .dashboard-foot {
    display:block;
    padding:20px
  }
  .dashboard-foot .button-link {
    margin-top:16px
  }
  .table-wrap {
    overflow:visible
  }
  .responsive-table thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
  }
  .responsive-table,.responsive-table tbody {
    display:block
  }
  .responsive-table tbody>tr:not(.detail-row) {
    display:block;
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:14px;
    padding:6px 12px;
    background:white
  }
  .responsive-table tbody>tr>td {
    display:flex;
    justify-content:space-between;
    gap:18px;
    text-align:right;
    padding:10px 0;
    border-bottom:1px solid #eef1ea;
    min-width:0;
    align-items:flex-start
  }
  .responsive-table tbody>tr>td::before {
    content:attr(data-label);
    flex:0 0 34%;
    text-align:left;
    font-size:.76rem;
    color:var(--muted);
    font-weight:600
  }
  .responsive-table tbody>tr>td:last-child {
    border:0
  }
  .responsive-table tbody>tr>td.actions {
    display:block;
    text-align:left;
    padding-top:12px
  }
  .responsive-table tbody>tr>td.actions::before {
    display:none
  }
  .responsive-table .actions button {
    min-height:44px;
    font-size:.78rem;
    padding:9px 12px
  }
  .responsive-table tbody>tr.detail-row>td {
    display:block;
    text-align:left;
    padding:12px;
    margin:-6px 0 16px;
    border-radius:12px
  }
  .responsive-table tbody>tr.detail-row>td::before,.responsive-table td[colspan]::before {
    display:none
  }
  .detail-row table {
    font-size:.8rem;
    table-layout:fixed
  }
  .detail-row th,.detail-row td {
    padding:8px 5px
  }
  .sort-mobile {
    display:flex;
    gap:9px;
    margin:0 0 16px;
    align-items:end
  }
  .sort-mobile>div {
    flex:1;
    min-width:0
  }
  .sort-mobile button {
    padding:10px 13px
  }
  .portal-tabs {
    gap:2px;
    padding:4px;
    margin-bottom:18px
  }
  .portal-tabs button {
    font-size:.77rem;
    padding:10px 5px
  }
  .activity-top {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .activity-item {
    gap:12px
  }
  .activity-icon {
    flex-basis:32px;
    height:32px;
    border-radius:9px
  }
  .activity-item.needs-review {
    padding:14px 10px
  }
  .activity-meta time {
    display:block;
    margin-top:3px
  }
  .login-page main {
    margin:32px auto
  }
  .login-page .card {
    padding:24px
  }
  .footer-note {
    margin-top:24px
  }
}

/* Account security, two-step sign-in and staff batch controls. */
.security-dialog { width:min(720px,calc(100vw - 32px)); }
.security-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:18px 0; padding:5px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.security-tabs button { min-height:44px; padding:9px 10px; }
.security-tabs button[aria-selected="true"] { background:var(--card); color:var(--primary); border-color:var(--border); box-shadow:0 2px 8px #102a1d12; }
.security-panel { min-height:250px; }
.security-status { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; padding:14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.totp-secret { display:grid; gap:5px; margin:16px 0; padding:14px; border:1px dashed var(--primary); border-radius:10px; background:var(--surface); }
.totp-secret code { font-size:1rem; font-weight:700; letter-spacing:.05em; overflow-wrap:anywhere; user-select:all; }
.passkey-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin:16px 0; }
.passkey-form label { grid-column:1/-1; margin:0; }
.security-list { display:grid; gap:10px; list-style:none; padding:0; margin:16px 0; }
.security-item { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.security-item-body { display:grid; gap:4px; min-width:0; }
.security-item-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.security-item .helper { margin:0; }
.security-empty,.security-loading { padding:22px; text-align:center; border:1px dashed var(--border); border-radius:11px; color:var(--muted); }
.second-factor-actions { display:grid; gap:10px; margin-top:14px; }
.second-factor-actions button { width:100%; }
.bulk-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
.bulk-toolbar strong { margin-right:auto; }
.bulk-toolbar select { width:auto; min-width:210px; }
.bulk-results { margin:12px 0; padding:14px; border-left:4px solid var(--primary); border-radius:8px; background:var(--surface); }
.bulk-results ul { margin:8px 0 0; padding-left:20px; }
.success-text { color:var(--ok); }
.error-text { color:var(--warn); }
.select-column { width:48px; text-align:center; }
.select-column input { width:20px; height:20px; min-height:20px; padding:0; accent-color:var(--primary); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media(max-width:640px) {
  .security-dialog { width:calc(100vw - 20px); }
  .security-tabs { grid-template-columns:1fr; }
  .security-panel { min-height:0; }
  .security-item,.security-status { align-items:flex-start; flex-direction:column; }
  .security-item button { width:100%; }
  .passkey-form { grid-template-columns:1fr; }
  .bulk-toolbar { align-items:stretch; flex-direction:column; }
  .bulk-toolbar strong { margin-right:0; }
  .bulk-toolbar select,.bulk-toolbar button { width:100%; }
  .staff-table .select-column { justify-content:flex-end; }
}
.child-switcher { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; padding:16px 18px; }
.child-switcher>div { display:grid; gap:7px; min-width:0; }
.child-list { display:flex; flex-wrap:wrap; gap:8px; }
.child-chip { min-height:40px; padding:8px 15px; border-radius:999px; background:var(--surface); color:var(--text); border:1px solid var(--border); }
.child-chip[aria-pressed="true"] { background:var(--primary); color:#fff; border-color:var(--primary); }
.add-child-panel { max-width:760px; margin-inline:auto; }
.add-child-panel .dialog-heading { align-items:flex-start; }
.compact-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.compact-form .form-actions,.compact-form .feedback { grid-column:1/-1; }
@media(max-width:640px) {
  .child-switcher { align-items:stretch; flex-direction:column; }
  .child-switcher>button { width:100%; }
  .child-list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .child-chip { flex:0 0 auto; }
  .compact-form { grid-template-columns:1fr; }
  .compact-form .form-actions,.compact-form .feedback { grid-column:auto; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    scroll-behavior:auto!important
  }
}

/* Chatbot bantuan/FAQ (keputusan Dr. Amin 2026-08-31) — namespace .chatbot-* elak langgar kelas sedia ada */
.chatbot-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 999; font-family: inherit; }
.chatbot-toggle { position:relative; display:grid; place-items:center; width:58px; height:58px; min-height:58px; padding:0; border-radius:50%; color:#f4efe3; box-shadow:0 8px 24px rgba(11,66,56,.28); }
.chatbot-toggle svg { display:block; width:36px; height:36px; }
.chatbot-toggle::after { content:attr(data-tooltip); position:absolute; right:calc(100% + 10px); top:50%; padding:6px 9px; border-radius:7px; background:var(--primary-dark); color:#fff; font-size:.72rem; font-weight:650; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(5px,-50%); transition:opacity .15s ease,transform .15s ease; }
.chatbot-toggle:hover::after,.chatbot-toggle:focus-visible::after { opacity:1; transform:translate(0,-50%); }
.chatbot-toggle[aria-expanded="true"]::after { display:none; }
.chatbot-panel { position: absolute; right: 0; bottom: 70px; width: 300px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; overflow: hidden; }
.chatbot-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; background: var(--primary); color: #fff; }
.chatbot-head strong { font-size: 0.9rem; }
.chatbot-sub { font-size: 0.7rem; opacity: 0.85; flex: 1; }
.chatbot-close { background: transparent; color: #fff; border: none; font-size: 1.1rem; padding: 0 4px; cursor: pointer; }
.chatbot-log { max-height: 260px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.chatbot-msg { padding: 7px 10px; border-radius: 8px; max-width: 90%; white-space: pre-wrap; }
.chatbot-msg.chatbot-bot { background: var(--bg); align-self: flex-start; }
.chatbot-msg.chatbot-user { background: var(--primary); color: #fff; align-self: flex-end; }
.chatbot-msg.chatbot-error { background: #fdedec; color: var(--warn); }
.chatbot-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.chatbot-form input { flex: 1; }

/* CHED: account controls, accessibility preferences and staff accounts. */
:root { --surface:#edf3ee; --surface-hover:#e0ebe4; --alert-bg:#fff0ed; --warning-bg:#fff6df; }
header { position:relative; }
.profile-menu,.notification-menu { position:relative; }
#session-bar { flex-wrap:nowrap; }
#session-bar .profile-trigger { min-height:44px; padding:6px 10px 6px 6px; gap:9px; }
.profile-avatar { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; background:#c8e9d9; color:#104c40; font-weight:750; font-size:.77rem; }
.profile-name { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-caret { font-size:1.1rem; }
.profile-panel,.notification-panel { position:absolute; right:0; top:calc(100% + 12px); z-index:1100; width:340px; max-width:calc(100vw - 28px); max-height:75vh; overflow:auto; overscroll-behavior:contain; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 12px 40px #08281d30; text-align:left; }
.profile-identity { display:flex; flex-direction:column; gap:3px; padding:0 3px 14px; margin-bottom:6px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
#session-bar .menu-action { display:flex; justify-content:flex-start; width:100%; min-height:44px; background:transparent; border:0; color:var(--text); padding:11px 8px; }
#session-bar .menu-action:hover { background:var(--surface); }
.settings-title { padding-top:14px; margin:12px 0; border-top:1px solid var(--border); font-size:.86rem; }
.preference-row { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; align-items:center; margin-top:10px; }
.preference-row label { margin:0; }
.preference-row select { padding:8px; font-size:.85rem; }
.translation-note { margin-bottom:0; font-size:.75rem; }
.account-dialog { width:520px; max-width:calc(100vw - 28px); max-height:90dvh; overflow:auto; padding:24px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--card); box-shadow:0 20px 80px #00150f50; }
.account-dialog::backdrop { background:#061f19a6; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.dialog-heading h2 { margin:0; }
.dialog-close { font-size:1.35rem; width:44px; padding:6px; flex-shrink:0; }
.account-form label { margin-top:14px; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin:20px 0 0!important; }
/* (2026-09-01, AMAF) pop-up "Lihat Penuh" pelajar — grid 2 lajur elak scroll panjang */
.student-detail-dialog { width:680px; }
.student-detail-dialog .account-form { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.student-detail-dialog .account-form > .form-section,
.student-detail-dialog .account-form > .form-hint,
.student-detail-dialog .account-form > .page-feedback,
.student-detail-dialog .account-form > .dialog-actions { grid-column:1 / -1; }
.student-detail-dialog .account-form textarea { min-height:56px; resize:vertical; }
@media (max-width:640px) { .student-detail-dialog .account-form { grid-template-columns:1fr; } }

.permission-options { border:1px solid var(--border); border-radius:9px; margin:16px 0; padding:12px 16px; }
.permission-options legend { font-size:.8rem; color:var(--muted); padding:0 5px; }
.account-form .checkbox-label { display:flex; gap:10px; align-items:center; min-height:44px; margin:0; }
.password-strength { display:grid; gap:7px; margin-top:8px; color:var(--muted); font-size:.76rem; }
.password-strength-top { display:flex; justify-content:space-between; gap:12px; }
.password-strength-top strong { color:var(--muted); font-weight:650; }
.password-strength-track { display:block; height:6px; overflow:hidden; border-radius:999px; background:var(--surface); }
.password-strength-fill { display:block; width:0; height:100%; border-radius:inherit; background:var(--warn); transition:width .18s ease,background-color .18s ease; }
.password-strength[data-level="1"] .password-strength-fill { width:34%; }
.password-strength[data-level="2"] .password-strength-fill { width:67%; background:#b7861d; }
.password-strength[data-level="3"] .password-strength-fill { width:100%; background:var(--ok); }
.password-strength[data-level="1"] .password-strength-top strong { color:var(--warn); }
.password-strength[data-level="2"] .password-strength-top strong { color:#8a6415; }
.password-strength[data-level="3"] .password-strength-top strong { color:var(--ok); }
.skeleton-row { pointer-events:none; }
.skeleton-line { display:block; width:var(--skeleton-width,80%); max-width:180px; height:13px; border-radius:999px; background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hover) 42%,var(--surface) 65%); background-size:300% 100%; animation:skeleton-shimmer 1.25s ease-in-out infinite; }
.activity-skeleton .activity-icon .skeleton-line { width:18px; height:18px; }
.activity-skeleton .activity-body { display:grid; align-content:center; gap:12px; }
@keyframes skeleton-shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
.empty-state { display:grid; justify-items:center; gap:7px; }
.empty-state-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface); color:var(--primary); font-size:1.25rem; }
.empty-state strong { color:var(--text); font-size:.92rem; }
.empty-state>span:last-child { max-width:520px; }
.danger-dialog { border-top:5px solid var(--warn); }
.danger-callout { padding:14px; border:1px solid #edcdc5; border-radius:10px; color:var(--warn); background:var(--alert-bg); }
.danger-target { margin:16px 0; padding:12px 14px; border-radius:9px; background:var(--surface); font-weight:650; overflow-wrap:anywhere; }
.danger-dialog button.danger:disabled { opacity:.45; cursor:not-allowed; }
.checkbox-label input { width:20px; height:20px; min-height:20px; padding:0; accent-color:var(--primary); }
.permission-options .helper { margin-bottom:0; }
.staff-table { table-layout:fixed; }
.staff-table th:last-child { width:24%; }
.staff-table .actions button { width:100%; margin-right:0; }
.reset-target { font-weight:650; overflow-wrap:anywhere; }
#session-bar .notification-toggle { position:relative; width:44px; min-height:44px; padding:9px; }
.notification-toggle svg { width:22px; height:22px; }
.notification-count { position:absolute; right:-5px; top:-7px; min-width:20px; padding:1px 5px; border-radius:12px; font-size:.65rem; background:#f8d277; color:#483308; border:2px solid var(--primary-dark); }
.notification-panel { width:380px; }
.notification-panel h2 { margin-bottom:8px; }
.notification-list { list-style:none; padding:0; margin:0; }
.notification-list li { padding:12px; margin:12px 0; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.notification-list p { font-size:.85rem; margin:8px 0 0; }
.notification-list .notification-warning { background:var(--warning-bg); border-color:#b38a38; }
.notification-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#session-bar .notification-actions button { background:var(--primary); color:#fff; border-color:transparent; min-height:44px; }
#session-bar .notification-actions button.secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
[data-theme="dark"] { --primary:#76d5b1; --primary-dark:#153d31; --bg:#101b18; --card:#192923; --text:#e5eee8; --muted:#b3c7bb; --border:#3b5548; --warn:#ffb7a9; --ok:#96dfb3; --pending:#efd491; --surface:#243a30; --surface-hover:#304b3e; --alert-bg:#442b27; --warning-bg:#3d3524; --shadow:0 4px 20px #0002; }
[data-theme="dark"] nav,[data-theme="dark"] .skip-link { background:var(--card); }
[data-theme="dark"] nav a.active,[data-theme="dark"] nav a:hover { background:var(--surface); }
[data-theme="dark"] label { color:var(--text); }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea { background:#14221c; border-color:#5b7966; }
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder { color:#a4b8ab; }
[data-theme="dark"] button,[data-theme="dark"] .button-link { background:#277c61; }
[data-theme="dark"] button:hover,[data-theme="dark"] .button-link:hover { background:#316d58; }
[data-theme="dark"] button.secondary,[data-theme="dark"] .button-link.secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
[data-theme="dark"] button.secondary:hover { background:var(--surface-hover); }
[data-theme="dark"] button.danger { background:var(--alert-bg); border-color:#7b5047; }
[data-theme="dark"] .stat-box:first-child,[data-theme="dark"] .dashboard-foot,[data-theme="dark"] .filter-bar,[data-theme="dark"] th,[data-theme="dark"] .empty,[data-theme="dark"] .placeholder,[data-theme="dark"] .connection-note,[data-theme="dark"] .detail-row>td { background:var(--surface); border-color:var(--border); color:var(--text); }
[data-theme="dark"] tbody tr:hover>td { background:var(--surface); }
[data-theme="dark"] .chart-track { background:#314d3e; }
[data-theme="dark"] .badge { background:#31483b; color:#d4e9da; }
[data-theme="dark"] .badge.sudah-bayar,[data-theme="dark"] .badge.success { background:#244a35; color:var(--ok); }
[data-theme="dark"] .badge.belum-bayar,[data-theme="dark"] .badge.warning { background:#514222; color:#f2d799; }
[data-theme="dark"] .badge.tertunggak { background:var(--alert-bg); color:var(--warn); }
[data-theme="dark"] .feedback { background:var(--surface); }
[data-theme="dark"] .feedback[data-tone="error"],[data-theme="dark"] .chatbot-msg.chatbot-error { background:var(--alert-bg); border-color:#7b5047; }
[data-theme="dark"] .feedback[data-tone="success"] { background:#244a35; color:var(--ok); }
[data-theme="dark"] .password-strength[data-level="2"] .password-strength-top strong { color:#f2d799; }
[data-theme="dark"] .danger-callout { border-color:#7b5047; }
[data-theme="dark"] .activity-icon { background:#284835; color:#b1e1c5; }
[data-theme="dark"] .activity-item[data-group="yuran"] .activity-icon { background:#2a3d57; color:#c7dcff; }
[data-theme="dark"] .activity-item[data-group="akademik"] .activity-icon { background:#40334f; color:#e0c7ff; }
[data-theme="dark"] .activity-item.needs-review { background:var(--warning-bg); border-color:#927739; }
[data-theme="dark"] .activity-item.needs-review .activity-icon { background:#5e4b26; color:#f2d799; }
[data-theme="dark"] .review-note { color:#f2d799; }
[data-theme="dark"] .portal-tabs { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .portal-tabs button { background:transparent; color:var(--muted); }
[data-theme="dark"] .portal-tabs button[aria-selected="true"] { background:var(--card); color:var(--primary); }
[data-theme="dark"] .sort-button,[data-theme="dark"] .sort-button:hover { background:transparent; color:inherit; }
[data-theme="dark"] .chatbot-head,[data-theme="dark"] .chatbot-msg.chatbot-user { background:#277c61; }
[data-theme="dark"] #session-bar .notification-actions button:not(.secondary) { background:#277c61; }
@media(max-width:640px) {
  header { flex-wrap:wrap; align-items:center; }
  #session-bar { margin-left:auto; }
  .profile-name { max-width:100px; }
  .profile-panel,.notification-panel { position:absolute; }
  .notification-menu { position:static; }
  .notification-panel { right:14px; top:calc(100% - 6px); }
  .preference-row select { font-size:16px; }
  .account-dialog { padding:18px; }
  .staff-table { table-layout:auto; }
  .staff-table .actions button { width:auto; }
  .staff-table td { flex-wrap:wrap; }
  .responsive-table .skeleton-row>td::before { display:none; }
  [data-theme="dark"] .responsive-table tbody>tr:not(.detail-row) { background:var(--card); }
  [data-theme="dark"] .responsive-table tbody>tr>td { border-color:var(--border); }
}

/* AMAF 2026-09-02: mod papar/edit profil (kad baca sahaja + butang Edit) + sokongan cetak. */
.profile-view-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 20px; margin-bottom:4px; }
.profile-view-grid > .form-section { grid-column:1 / -1; margin-top:14px; margin-bottom:4px; }
.profile-view-row { display:flex; flex-direction:column; padding:7px 0; border-bottom:1px solid var(--border); }
.profile-view-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.profile-view-value { font-size:.95rem; word-break:break-word; }
.profile-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:640px) { .profile-view-grid { grid-template-columns:1fr; } }

/* AMAF 2026-09-02 (kemas kini): combo carian pelajar SATU medan bersepadu
   (teks + senarai cadangan bertindih) -- gantikan corak 2 kotak berasingan
   drpd percubaan awal, ikut maklum balas Dr. Amin. */
.student-combo { position: relative; }
.student-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.student-combo-option { padding: 8px 12px; cursor: pointer; font-size: .9rem; }
.student-combo-option:hover, .student-combo-option.active { background: #f1f5f2; }
.student-combo-empty { padding: 8px 12px; color: var(--muted); font-size: .85rem; }
[data-theme="dark"] .student-combo-list { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .student-combo-option:hover, [data-theme="dark"] .student-combo-option.active { background: var(--surface); }


/* CHED 2026-09-02: panel pemantauan akaun penjaga E-Anak. */
.account-monitor-table th:last-child { width:150px; }
.account-monitor-table .actions button { margin:0; width:100%; }
.account-review-list .activity-body { display:grid; gap:8px; }
.account-review-list .activity-body>p { margin:0; }
.account-review-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.account-review-actions .activity-meta { flex:1; min-width:180px; }
.account-review-actions button { margin:0; }
.account-source { color:var(--muted); }
@media(max-width:640px) {
  .account-monitor-table th:last-child { width:auto; }
  .account-monitor-table .actions button { width:auto; }
  .account-review-actions { align-items:stretch; }
  .account-review-actions button { width:100%; }
}