.login-brand { margin: 18px 0 42px; }

.login-brand-shell {
  width: min(560px, 100%);
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  padding: 20px 26px 20px 20px;
  border: 1px solid rgba(23, 25, 29, .08);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,242,.98));
  box-shadow: 0 22px 55px rgba(40, 24, 16, .14);
}

.login-brand-shell::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -58px;
  bottom: -78px;
  border: 22px solid rgba(240, 90, 22, .08);
  border-radius: 50%;
}

.brand-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,112,31,.22), transparent 68%);
  filter: blur(3px);
}

.login-brand .brand-mark {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  position: relative;
  z-index: 1;
  object-fit: contain;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 25, 29, .13);
}

.brand-copy { position: relative; z-index: 1; min-width: 0; }
.brand-copy h1 { margin: 0; color: #17191d; font-size: clamp(30px, 7vw, 46px); line-height: .95; letter-spacing: -.055em; font-weight: 420; white-space: nowrap; }
.brand-copy h1 strong { font-weight: 900; }
.brand-copy p { margin: 9px 0 8px; color: #26292e; font-size: clamp(15px, 3.4vw, 21px); line-height: 1.15; font-weight: 750; white-space: nowrap; }
.brand-copy > span { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #17191d; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }

.mini-brand img,
.card-head img {
  object-fit: contain;
  object-position: center;
  background: #fff;
  padding: 2px;
}

dialog#confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  margin: auto;
  padding: 22px;
  overflow: hidden;
  box-sizing: border-box;
}

#confirm-dialog form,
#confirm-dialog p,
#confirm-dialog .dialog-actions,
#confirm-dialog button {
  min-width: 0;
  max-width: 100%;
}

#confirm-dialog p {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

#confirm-dialog .dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#confirm-dialog .dialog-actions button {
  width: 100%;
}

@media (max-width: 380px) {
  dialog#confirm-dialog { padding: 18px; }
  #confirm-dialog .dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .login-brand { margin: 10px 0 30px; }
  .login-brand-shell { gap: 14px; padding: 15px; border-radius: 22px; }
  .login-brand .brand-mark { width: 82px; height: 82px; flex-basis: 82px; border-radius: 17px; }
  .brand-copy h1 { font-size: clamp(27px, 8.4vw, 38px); }
  .brand-copy p { margin: 6px 0 7px; font-size: clamp(13px, 4vw, 17px); }
  .brand-copy > span { font-size: 7px; }
}

@media (max-width: 350px) {
  .login-brand-shell { flex-direction: column; text-align: center; }
  .brand-copy h1, .brand-copy p { white-space: normal; }
}

/* Identitas warna mengikuti logo resmi Saku Kita. */
:root {
  --primary: #f05a16;
  --primary-dark: #cf4307;
  --mint: #f05a16;
  --ink: #17191d;
  --muted: #6c7178;
  --bg: #f3f5f6;
  --line: #e1e4e7;
  --orange: #f05a16;
  --shadow: 0 10px 30px rgba(24, 26, 29, .13);
}

.login-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(240, 90, 22, .14), transparent 29%),
    radial-gradient(circle at 94% 16%, rgba(255, 178, 105, .12), transparent 24%),
    #f6f7f8;
}

.login-card {
  border-top-color: #f05a16;
}

.login-card h2,
.wallet,
.wallet nav button,
.balance-line strong,
.transaction .amount,
.choice {
  color: #e84f0d;
}

input:focus,
select:focus {
  border-color: #f05a16;
  box-shadow: 0 0 0 3px rgba(240, 90, 22, .14);
}

.primary {
  background: linear-gradient(135deg, #ff721f, #e64908);
  box-shadow: 0 7px 18px rgba(240, 90, 22, .28);
}

.primary:hover {
  background: #cf4307;
}

.hero {
  background: linear-gradient(135deg, #17191d 0%, #292c31 62%, #472417 100%);
}

.hero::before {
  border-color: rgba(240, 90, 22, .13);
}

.avatar {
  background: #f05a16;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}

.badge {
  background: #fff0e9;
  color: #c94208;
}

.notice {
  background: linear-gradient(110deg, #1d1f23, #34373c 67%, #8f3411);
}

.date-pill,
.quick-stats div {
  background: #f7f7f7;
  border-color: #e7e7e7;
}

.quick-stats strong {
  color: #dc4b0d;
}

.emoney-card {
  background: linear-gradient(135deg, #111315, #282b30 58%, #9f370d);
  box-shadow: 0 18px 35px rgba(35, 23, 18, .34);
}
.integrated-card { position: relative; min-height: 0; padding: 0; container-type: inline-size; }
.integrated-card .card-head { position: absolute; z-index: 2; top: 7.43%; left: 4.69%; width: 62%; display: flex; align-items: center; }
.integrated-card .card-head img { width: 9.38cqw; height: 9.38cqw; margin-right: 2.19cqw; padding: .7cqw; border-radius: 2.38cqw; }
.integrated-card .card-head b { font-size: 4.38cqw; line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.integrated-card .card-head small { margin-top: 1.15cqw; font-size: 1.5cqw; letter-spacing: .5cqw; color: #d7d9dd; white-space: nowrap; }
.card-identity { position: absolute; z-index: 2; left: 4.69%; right: 31%; top: 38.16%; height: 25%; }
.card-photo { width: 12.5cqw; height: 15.63cqw; display: grid; place-items: center; border: .5cqw solid rgba(255,255,255,.9); border-radius: 2cqw; background: linear-gradient(145deg,#f36a24,#a83309); color: #fff; font-size: 6.5cqw; font-weight: 900; box-shadow: 0 6px 14px #0005; }
.card-photo.uploadable { position: relative; cursor: pointer; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
.card-photo.uploadable::after { content: "UPLOAD FOTO"; position: absolute; right: 3px; bottom: 3px; left: 3px; padding: 3px 1px; border-radius: 5px; background: rgba(0,0,0,.72); color: #fff; font-size: 6px; font-weight: 900; letter-spacing: .35px; line-height: 1.15; text-align: center; }
.card-photo.uploadable[style*="background-image: url"]::after { content: "UBAH FOTO"; }
.card-photo.uploadable:focus-visible { outline: 3px solid #ff8a3d; outline-offset: 3px; }
.integrated-card .card-owner { position: absolute; top: 0; left: 15.31cqw; min-width: 0; width: 46cqw; }
.integrated-card .card-owner small { color: #cfd2d7; font-size: 1.5cqw; letter-spacing: .38cqw; }
.integrated-card .card-owner strong { margin-top: .7cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3.63cqw; line-height: 1.1; }
.integrated-card .card-owner #card-role { margin-top: 7.8cqw; font-size: 1.75cqw; letter-spacing: .31cqw; }
.integrated-card .card-code { position: absolute; z-index: 2; left: 5%; bottom: 8.3%; display: block; }
.integrated-card .card-code small,.integrated-card .card-code strong,.integrated-card .card-code span { display: block; }
.integrated-card .card-code small { color: #cfd2d7; font-size: 1.5cqw; letter-spacing: .31cqw; }
.integrated-card .card-code strong { margin-top: 1.25cqw; color: #fff; font: 900 3.19cqw/1 monospace; letter-spacing: .44cqw; white-space: nowrap; }
.integrated-card .card-code span { margin-top: 4.8cqw; color: #d7d9dd; font-size: 1.38cqw; }
.card-qr { position: absolute; z-index: 3; top: 21.8%; right: 6.25%; width: 20.63%; height: 42.62%; padding: 1.25cqw; border-radius: 2.13cqw; background: #fff; color: #17191d; text-align: center; box-shadow: 0 8px 20px #0005; }
.card-qr img { display: block; width: 18.13cqw; height: 18.13cqw; }
.card-qr small { display: block; margin-top: 1.35cqw; font-size: 1.19cqw; font-weight: 900; letter-spacing: .04cqw; white-space: nowrap; }
.card-ils { position: absolute; z-index: 3; right: 10.19%; bottom: 8.3%; width: 12.81%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.card-ils img { display: block; width: 12.81cqw; height: 10.88cqw; object-fit: contain; }
.card-ils small { display: block; width: 14cqw; margin-top: 1.1cqw; color: #fff; font-size: .69cqw; font-weight: 900; line-height: 1; letter-spacing: .025cqw; white-space: nowrap; }
.card-security-note { margin: 11px 5px 0; color: #6c6f75; text-align: center; font-size: 12px; }
@media(max-width:560px){.integrated-card .card-photo{font-size:6.5cqw}}

.home-button,
.section-title button {
  background: #f05a16;
}

.merchant-cta {
  width: 100%; border: 0; border-radius: 16px; padding: 17px 18px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: linear-gradient(135deg, #ff6b1a, #d94808); color: #fff;
  box-shadow: 0 10px 24px rgba(226, 76, 10, .28);
}
.merchant-cta > span { font-size: 36px; }
.merchant-cta div { flex: 1; }
.merchant-cta strong,.merchant-cta small { display: block; }
.merchant-cta small { opacity: .82; }
.merchant-cta > b { font-size: 24px; }
.attendance-cta { background: linear-gradient(135deg,#1d2737,#090d14); }
.attendance-report-cta { background: linear-gradient(135deg,#17191d 0%,#292c31 62%,#593022 100%); box-shadow:0 12px 28px rgba(23,25,29,.22); }
.merchant-balance-cta { margin-top:12px; background:linear-gradient(135deg,#203b32,#176745 70%,#0d8a52); box-shadow:0 12px 28px rgba(20,105,69,.22); }
.finance-cash-cta { margin:18px 0 4px;background:linear-gradient(135deg,#17191d,#4b2b20 70%,#b83a09);box-shadow:0 12px 28px rgba(90,38,18,.24); }
.finance-cash-cta > span { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border:2px solid rgba(255,255,255,.75);border-radius:50%;font-size:15px;font-weight:900; }
.merchant-balance-cta > span { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border:2px solid rgba(255,255,255,.75);border-radius:50%;font-size:15px;font-weight:900; }
.merchant-balance-result { margin-top:18px;padding:20px;border:1px solid #b9e3cc;border-radius:15px;background:linear-gradient(135deg,#f1fcf6,#e6f8ee);text-align:center; }
.merchant-balance-result small,.merchant-balance-result strong,.merchant-balance-result span { display:block; }
.merchant-balance-result small { color:#527363;font-size:11px;letter-spacing:.7px; }
.merchant-balance-result strong { margin-top:5px;color:#17251e;font-size:21px; }
.merchant-balance-result span { margin-top:9px;color:#087443;font-size:30px;font-weight:900; }
.attendance-cta:not(.hidden) + .attendance-report-cta:not(.hidden) { margin-top: 12px; }
.central-manage-home{position:relative;overflow:hidden;width:100%;margin:4px 0 18px;padding:20px 21px;display:flex;align-items:center;gap:16px;border:0;border-radius:18px;background:linear-gradient(125deg,#f7671d 0%,#ec4b0b 54%,#9f2d09 100%);color:#fff;text-align:left;box-shadow:0 14px 30px rgba(216,66,8,.28);transition:transform .2s ease,box-shadow .2s ease}.central-manage-home:after{content:"";position:absolute;width:145px;height:145px;right:-62px;top:-75px;border:25px solid rgba(255,255,255,.09);border-radius:50%}.central-manage-home:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(216,66,8,.34)}.central-manage-home>div{position:relative;z-index:1;display:grid;gap:2px;flex:1}.central-manage-home small{color:#ffe4d5;font-size:10px;font-weight:900;letter-spacing:1.7px}.central-manage-home strong{font-size:19px;letter-spacing:.25px}.central-manage-home em{color:#fff0e8;font-size:12px;font-style:normal;line-height:1.4}.central-manage-home>b{position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fff;color:#d84408;font-size:19px}.central-manage-icon{position:relative;z-index:1;width:50px;height:50px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:0 0 auto;border-radius:15px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.central-manage-icon i{display:block;border:2px solid #fff;border-radius:3px}.central-manage-icon i:first-child{background:#fff}.central-manage-icon i:last-child{background:rgba(255,255,255,.55)}
.wallet nav.single-action{grid-template-columns:1fr}.wallet nav.single-action button{width:100%;padding:7px 5px}
.central-admin-mode .hero{height:132px}.central-admin-mode .content{padding-top:42px}.central-admin-mode .whatsapp-admin{margin:-20px auto 48px}.central-audit-home{position:relative;overflow:hidden;width:100%;margin:18px 0;padding:18px 21px;display:flex;align-items:center;gap:16px;border:0;border-radius:18px;background:linear-gradient(125deg,#17191d 0%,#272a30 58%,#593022 100%);color:#fff;text-align:left;box-shadow:0 13px 28px rgba(23,25,29,.22);transition:transform .2s ease,box-shadow .2s ease}.central-audit-home:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(23,25,29,.28)}.central-audit-home>span{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:#f05a16;color:#fff;font-size:28px}.central-audit-home>div{display:grid;gap:2px;flex:1}.central-audit-home small{color:#ff8a50;font-size:10px;font-weight:900;letter-spacing:1.7px}.central-audit-home strong{font-size:18px;letter-spacing:.3px}.central-audit-home em{color:#e0e1e4;font-size:12px;font-style:normal}.central-audit-home>b{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fff;color:#d84408;font-size:18px}
@media(max-width:560px){.central-admin-mode .hero{height:108px}.central-admin-mode .content{padding-top:34px}.central-admin-mode .whatsapp-admin{margin:-14px auto 40px}.central-manage-home,.central-audit-home{padding:17px 15px;gap:12px}.central-manage-icon{width:44px;height:44px;padding:9px}.central-manage-home strong,.central-audit-home strong{font-size:16px}.central-manage-home em,.central-audit-home em{font-size:11px}.central-manage-home>b,.central-audit-home>b{width:30px;height:30px}.central-audit-home>span{width:44px;height:44px;font-size:25px}}
.attendance-summary { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px; }
.attendance-summary > div { padding:17px;border:1px solid #e4e5e8;border-radius:15px;background:#fff;box-shadow:0 8px 22px #17191d0b; }
.attendance-summary small,.attendance-summary strong,.attendance-summary span { display:block; }
.attendance-summary small { color:#6e7279;font-size:11px; }
.attendance-summary strong { margin:5px 0;color:#e94f0d;font-size:30px; }
.attendance-summary span { color:#777;font-size:12px; }
.attendance-row { display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:14px;border:1px solid #e5e5e7;border-radius:14px;background:#fff; }
.attendance-row-report { flex-wrap:wrap; align-items:flex-start; }
.student-report-form,.student-report-view,.teacher-report-form,.teacher-class-report { flex:0 0 100%; margin-top:4px; padding:13px; border-radius:11px; background:#fff7f2; border:1px solid #f2d6c8; }
.teacher-class-report { background:#f3f8ff; border-color:#cdddf3; }
.teacher-class-report small { color:#174f91; font-size:9px; font-weight:900; letter-spacing:.8px; }
.teacher-class-report p { margin:5px 0 0; color:#202a38; font-size:13px; line-height:1.5; }
.teacher-class-report span { display:block; margin-top:5px; color:#657184; font-size:9px; }
.teacher-class-report.missing { background:#f7f7f8; border-color:#e5e5e7; }
.teacher-report-form label { margin:0; font-size:13px; font-weight:800; }
.teacher-report-form textarea { display:block; width:100%; min-height:100px; margin-top:8px; padding:11px; resize:vertical; border:1px solid #cfd5dc; border-radius:9px; background:#fff; color:#17191d; font:inherit; line-height:1.45; }
.teacher-report-form > div { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.teacher-report-form > div small { color:#74777d; font-size:10px; }
.teacher-report-form button { flex:0 0 auto; padding:10px 12px; border:0; border-radius:8px; background:#ee5714; color:#fff; font-size:11px; font-weight:850; }
.student-report-form label em { color:#777; font-size:10px; font-weight:600; }
.user-merge { background:#5b3d8f!important; color:#fff!important; }
.student-report-form label { margin:0; font-size:13px; font-weight:800; }
.student-report-form textarea { display:block; width:100%; min-height:88px; margin-top:8px; padding:11px; resize:vertical; border:1px solid #cfd5dc; border-radius:9px; background:#fff; color:#17191d; font:inherit; line-height:1.45; }
.student-report-form textarea:focus { outline:0; border-color:#f05a16; box-shadow:0 0 0 3px #f05a1620; }
.student-report-form > div { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.student-report-form > div small { color:#74777d; font-size:10px; }
.student-report-form button { flex:0 0 auto; padding:9px 11px; border:0; border-radius:8px; background:#ee5714; color:#fff; font-size:11px; font-weight:850; }
.student-report-view small { color:#bf410c; font-size:9px; font-weight:900; letter-spacing:.8px; }
.student-report-view p { margin:5px 0 0; color:#272a30; font-size:13px; line-height:1.5; }
.student-report-view span { display:block; margin-top:5px; color:#7a7d82; font-size:9px; }
.student-report-view.missing { background:#f7f7f8; border-color:#e5e5e7; }
.student-report-view.missing p { color:#8a8d92; font-style:italic; }
.student-report-intro { margin:0 0 14px; padding:15px; display:flex; align-items:flex-start; gap:12px; border:1px solid #f1c6b0; border-radius:14px; background:linear-gradient(135deg,#fff8f3,#fff1e8); color:#52230f; }
.student-report-intro > span { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#f05a16; color:#fff; font-size:22px; }
.student-report-intro strong { color:#c7430b; font-size:13px; }
.student-report-intro p { margin:4px 0 0; font-size:12px; line-height:1.5; }
.attendance-icon { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fff0e8;color:#df4b0c;font-size:20px;font-weight:900; }
.attendance-row > div:nth-child(2) { min-width:0;flex:1; }
.attendance-row strong,.attendance-row span,.attendance-row small { display:block; }
.attendance-row span,.attendance-row small { margin-top:3px;color:#74777d;font-size:11px; }
.attendance-status { padding:6px 8px;border-radius:999px;background:#edf8f1;color:#147246;font-size:10px;text-transform:uppercase; }
.attendance-status.terlambat { background:#fff4dc;color:#9a6200; }.attendance-status.izin,.attendance-status.sakit { background:#edf4ff;color:#315f9e; }.attendance-status.alfa { background:#fff0ed;color:#ac3218; }
.attendance-success { margin-top:16px;padding:16px;border-radius:13px;background:#ecf9f2;color:#14633f; }
.teacher-report-shortcut { width:100%; margin-top:16px; padding:14px 16px; display:flex; align-items:center; gap:12px; border:1px solid #d9dde5; border-radius:12px; background:#17191d; color:#fff; text-align:left; }
.teacher-report-shortcut > span { font-size:26px; color:#ff6b1a; }
.teacher-report-shortcut > div { flex:1; }
.teacher-report-shortcut strong,.teacher-report-shortcut small { display:block; }
.teacher-report-shortcut small { margin-top:2px; color:#c7c9ce; font-size:11px; }
.teacher-report-shortcut > b { font-size:20px; }
.admin-activity-shortcut { width:100%; margin:0 0 18px; padding:17px; display:flex; align-items:center; gap:13px; border:0; border-radius:15px; background:linear-gradient(135deg,#17191d,#3d251c); color:#fff; text-align:left; box-shadow:0 10px 24px rgba(20,22,25,.2); }
.admin-activity-shortcut > span { font-size:32px; color:#ff681a; }
.admin-activity-shortcut > div { min-width:0; flex:1; }
.admin-activity-shortcut strong,.admin-activity-shortcut small { display:block; }
.admin-activity-shortcut strong { font-size:15px; }
.admin-activity-shortcut small { margin-top:3px; color:#d1d2d5; font-size:11px; }
.admin-activity-shortcut > b { font-size:22px; }
.attendance-search { position:sticky; top:8px; z-index:5; margin:0 0 14px; padding:12px; border:1px solid #e3e4e7; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 9px 24px rgba(20,22,26,.1); backdrop-filter:blur(8px); }
.attendance-search > label { margin:0 0 7px; font-size:13px; font-weight:800; }
.attendance-search > div { display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #cfd3da; border-radius:10px; background:#fff; }
.attendance-search > div:focus-within { border-color:#f05a16; box-shadow:0 0 0 3px #f05a1620; }
.attendance-search span { color:#d84a0c; font-size:24px; }
.attendance-search input { margin:0; padding:12px 0; border:0; box-shadow:none; }
.attendance-search input:focus { border:0; box-shadow:none; }
.attendance-search > small { display:block; min-height:17px; margin-top:6px; color:#74777d; font-size:11px; }
.attendance-success strong,.attendance-success span,.attendance-success small { display:block; }.attendance-success strong{font-size:19px}.attendance-success span{margin-top:4px}.attendance-success small{margin-top:3px;color:#537164}
.admin-activity-card { margin-top:18px; }
.admin-promotion-card { margin-top:18px; border-color:#f2c4ae; background:linear-gradient(180deg,#fff,#fff8f4); }
.admin-fee-card { margin-top:18px; border-color:#f2c4ae; background:linear-gradient(180deg,#fff,#fff7f1); }
.admin-fee-card small { display:block; margin:-2px 0 14px; color:#6f7379; font-size:11px; line-height:1.5; }
.child-confirm .confirm-total { margin-top:4px; padding-top:10px; border-top:2px solid #f1c2aa; }
.child-confirm .confirm-total dt,.child-confirm .confirm-total dd { color:#c94108; font-weight:900; }
.fee-disclosure { margin:10px 0 14px !important; padding:10px 12px; border-radius:9px; background:#fff2e9; color:#7b3517; font-size:11px; line-height:1.45; }
.payment-success #success-fee { margin:7px 0 2px; color:#6f7379; font-size:12px; }
.activity-admin-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #eee; }
.activity-admin-row:first-child { margin-top:16px; }.activity-admin-row.inactive{opacity:.55}.activity-admin-row strong,.activity-admin-row small{display:block}.activity-admin-row small{margin-top:3px;color:#777;font-size:11px}.activity-admin-row button{border:0;border-radius:8px;padding:8px 10px;background:#fff0e8;color:#b93d08;font-weight:750}
.activity-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.activity-admin-row .activity-edit{background:#edf3ff;color:#315b92}.activity-admin-row .activity-delete{background:#17191d;color:#fff}
.scan-button { width: 100%; padding: 13px; margin-top: 14px; border: 1px dashed #f05a16; border-radius: 10px; background: #fff4ee; color: #c94208; font-weight: 750; }
.topup-search-results{margin-top:-2px;border:1px solid #e0e2e7;border-radius:12px;background:#fff;box-shadow:0 10px 24px rgba(20,22,26,.12);overflow:hidden}.topup-search-result{display:block;width:100%;padding:12px 14px;border:0;border-bottom:1px solid #eceef1;background:#fff;color:#17191d;text-align:left}.topup-search-result:last-child{border-bottom:0}.topup-search-result:hover,.topup-search-result:focus{background:#fff4ee}.topup-search-result strong,.topup-search-result small{display:block}.topup-search-result small{margin-top:3px;color:#6f737a}.topup-search-empty{padding:13px;color:#74777d;text-align:center}.topup-selected-recipient{margin:8px 0 2px;padding:11px 13px;border:1px solid #bfe7ce;border-radius:10px;background:#effaf3;color:#166534}.topup-selected-recipient strong,.topup-selected-recipient small{display:block}.topup-selected-recipient small{margin-top:2px;color:#417052}
.scanner { width: 100%; aspect-ratio: 4/3; margin-top: 12px; border-radius: 12px; background: #111; object-fit: cover; }
.scanner.front-camera { transform:scaleX(-1); }
.camera-switch { margin-top:9px; background:#17191d; border-style:solid; border-color:#17191d; color:#fff; }
.scan-status { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: #eef7ff; color: #17486d; font-size: 12px; line-height: 1.45; word-break: break-word; }
.scan-status.error { background: #fff0ed; color: #a72e13; }
.user-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px 18px; }
.user-row.inactive { opacity: .62; background: #f5f5f5; }
.user-info { min-width: 0; }
.user-info strong { display:block; font-size:16px; }
.user-info small { margin-top:4px; line-height:1.5; overflow-wrap:anywhere; }
.user-side { display:contents; }
.user-side > strong { grid-column:2; grid-row:1; white-space:nowrap; text-align:right; }
.user-actions { grid-column:1/-1; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:7px; margin-top:2px; }
.user-actions button { border: 0; border-radius: 8px; padding: 8px 10px; font-weight: 750; }
.user-card { background: #fff0e8; color: #c9470b; }
.user-manage { background: #17191d; color: #fff; }
.user-attendance { background:#edf3ff;color:#315b92; }
.user-class { background:#fff3d9;color:#8a5a00; }
.user-alumni { background:#f0edf8;color:#59458a; }
.user-row.alumni { background:#f6f4f9; }
.user-row.alumni .user-info strong { color:#655c75; }
.account-search { position:sticky; top:8px; z-index:5; margin:0 0 14px; padding:12px; border:1px solid #e3e4e7; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 9px 24px rgba(20,22,26,.1); backdrop-filter:blur(8px); }
.account-search > label { margin:0 0 7px; font-size:13px; font-weight:800; }
.account-search > div { display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #cfd3da; border-radius:10px; background:#fff; }
.account-search > div:focus-within { border-color:#f05a16; box-shadow:0 0 0 3px #f05a1620; }
.account-search span { color:#d84a0c; font-size:24px; }
.account-search input { margin:0; padding:12px 0; border:0; box-shadow:none; }
.account-search input:focus { border:0; box-shadow:none; }
.account-search > small { display:block; min-height:17px; margin-top:6px; color:#74777d; font-size:11px; }
.print-card-button { margin-top: 18px; }
.new-account-result { margin-top: 18px; padding: 15px; border: 1px solid #f5b08f; border-radius: 12px; background: #fff5ef; color: #922f08; }
.new-account-result small,.new-account-result strong,.new-account-result span,.new-account-result em { display: block; }
.new-account-result small { font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.new-account-result strong { margin-top: 4px; color: #17191d; font-size: 18px; }
.new-account-result span { margin-top: 5px; font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.new-account-result em { margin-top: 4px; color: #6b6d72; font-size: 12px; font-style: normal; }
.new-account-result button { width:100%;margin-top:12px;padding:10px;border:0;border-radius:9px;background:#17191d;color:#fff;font-weight:800; }
.card-output-dialog { width: min(410px,calc(100% - 28px)); padding: 25px; border-radius: 18px; }
.card-output-dialog h3 { margin: 0 0 5px; font-size: 24px; }
.card-output-dialog p { margin: 0 0 18px; color: #73767d; }
.output-options { display: grid; gap: 10px; }
.output-options button { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px; border: 1px solid #e2e3e6; border-radius: 12px; background: #fff; color: #17191d; text-align: left; }
.output-options button:hover { border-color: #f05a16; background: #fff7f2; }
.output-options button > b { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #f05a16; color: #fff; font-size: 18px; }
.output-options span,.output-options strong,.output-options small { display: block; }
.output-options strong { font-size: 17px; }
.output-options small { margin-top: 2px; color: #74777d; }
.output-cancel { width: 100%; margin-top: 14px; padding: 11px; border: 0; border-radius: 9px; background: #eee; font-weight: 750; }
.security-dialog { width: min(430px,calc(100% - 28px)); border-radius: 18px; }
.security-dialog h3 { margin-top: 0; font-size: 23px; }
.security-dialog p,.security-dialog small { color: #72757b; }
.admin-security-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px 1fr; gap: 14px; margin-bottom: 20px; padding: 22px; border: 0; color: #fff; background: linear-gradient(125deg,#17191d 0%,#292c31 62%,#9f370d 100%); box-shadow: 0 16px 32px rgba(23,25,29,.2); }
#admin-security-home { margin-top: 18px; }
.admin-security-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; top: -78px; border: 24px solid rgba(255,255,255,.06); border-radius: 50%; }
.admin-security-icon { position: relative; z-index: 1; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; background: linear-gradient(145deg,#ff721f,#dc4307); font-size: 27px; box-shadow: 0 9px 20px rgba(240,90,22,.3); }
.admin-security-copy { position: relative; z-index: 1; }
.admin-security-copy small { color: #ffb18a; font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.admin-security-copy h2 { margin: 3px 0 4px; font-size: 22px; }
.admin-security-copy p { margin: 0; color: #d8dadd; font-size: 13px; line-height: 1.45; }
.admin-security-actions { position: relative; z-index: 1; grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 5px; }
.admin-security-button { width: 100%; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-weight: 900; letter-spacing: .3px; backdrop-filter: blur(6px); transition: .2s ease; }
.admin-security-button span { text-align: left; }
@media(max-width:560px){.admin-security-actions{grid-template-columns:1fr}.admin-security-button{padding:12px 14px}}
.admin-security-button:hover { transform: translateY(-1px); background: #f05a16; border-color: #f05a16; }
.admin-security-button b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #d94a0b; font-size: 17px; }
.unit-admin-home { width: 100%; margin: 18px 0 24px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; border: 0; border-radius: 18px; background: linear-gradient(135deg,#ff6a19,#dd4308); color: #fff; text-align: left; box-shadow: 0 12px 26px rgba(224,72,10,.22); }
.unit-admin-home>span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: rgba(255,255,255,.18); font-size: 30px; font-weight: 500; }
.unit-admin-home>div { display: grid; gap: 3px; flex: 1; }
.unit-admin-home strong { font-size: 17px; letter-spacing: .3px; }
.unit-admin-home small { color: #fff4ee; font-size: 13px; }
.unit-admin-home>b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #df4709; font-size: 18px; }
.unit-admin-home:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(224,72,10,.28); }
.finance-limits-card { margin-top: 18px; padding: 24px; border: 0; background: linear-gradient(135deg,#20242a 0%,#2c2523 58%,#96320d 140%); color: #fff; box-shadow: 0 14px 30px rgba(27,29,33,.18); }
.finance-limits-heading small { color: #ff7a3b; font-weight: 900; letter-spacing: 1.4px; }
.finance-limits-heading h2 { margin: 5px 0 4px; color: #fff; }
.finance-limits-heading p { margin: 0 0 18px; color: #d8dadd; }
.finance-limits-card form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.finance-limits-card label { color: #fff; font-weight: 750; }
.finance-limits-card input { margin-top: 7px; background: #fff; color: #17191d; }
.finance-limits-note { grid-column: 1/-1; color: #d8dadd; line-height: 1.5; }
.finance-limits-card button { grid-column: 1/-1; margin-top: 2px; }
@media(max-width:560px){.finance-limits-card form{grid-template-columns:1fr}.finance-limits-note,.finance-limits-card button{grid-column:1}}
.notice .open-change-password { margin-top: 10px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; font-size: 12px; font-weight: 850; }
.whatsapp-admin { position: static; width: max-content; max-width: calc(100% - 32px); min-height: 48px; margin: -59px auto 58px; padding: 7px 10px 7px 17px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid #fff; border-radius: 999px; background: linear-gradient(135deg,#20c965,#15984b); color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(20,140,71,.27); transition: transform .18s ease,box-shadow .18s ease,background .18s ease; }
.wa-label { font-size: 14px; font-weight: 850; letter-spacing: .2px; }
.wa-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #118447; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.wa-icon svg { width: 25px; height: 25px; }
.whatsapp-admin:hover { background: linear-gradient(135deg,#1fbd5a,#118743); box-shadow: 0 13px 28px rgba(20,140,71,.34); transform: translateY(-1px); }
@media(max-width:560px){.whatsapp-admin{margin:-53px auto 52px;min-height:46px;padding:6px 9px 6px 16px}.wa-icon{width:33px;height:33px}}
@media(max-width:560px){.user-row{gap:10px}.user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.user-actions button{width:100%;min-height:40px;padding:8px 6px}.user-status{margin:0}.user-info small{font-size:12px}}
@media(max-width:560px){.student-report-form>div{align-items:stretch;flex-direction:column}.student-report-form button{width:100%}}

/* Apresiasi Orangtua mengikuti lebar dan susunan Refleksi Santri. */
.attendance-row-report .parent-appreciation-form {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.attendance-row-report .parent-appreciation-form label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.attendance-row-report .parent-appreciation-form textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 11px;
  resize: vertical;
  border: 1px solid #b9d7c2;
  border-radius: 9px;
  background: #fff;
  color: #17191d;
  font: inherit;
  line-height: 1.45;
}
.attendance-row-report .parent-appreciation-form textarea:focus {
  outline: 0;
  border-color: #198754;
  box-shadow: 0 0 0 3px #19875420;
}

.purchase-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0;padding:12px;border:1px solid #d7dbe0;border-radius:11px}.purchase-choices legend{padding:0 5px;font-size:13px;font-weight:800}.purchase-choices legend small{font-weight:500;color:#6b7280}.purchase-choices label{position:relative;margin:0}.purchase-choices input{position:absolute;opacity:0;pointer-events:none}.purchase-choices span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:9px;border:1px solid #d7dbe0;border-radius:10px;background:#fff;color:#32363d;font-weight:750;cursor:pointer}.purchase-choices input:checked+span{border-color:#f05a16;background:#fff1e9;color:#c94008;box-shadow:0 0 0 2px #f05a1622}.purchase-choices input:checked+span:before{content:'✓';margin-right:6px;font-weight:900}@media(max-width:430px){.purchase-choices{grid-template-columns:1fr}.purchase-choices span{justify-content:flex-start}}

@media print {
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #print-card-area, #print-card-area * { visibility: visible !important; }
  #print-card-area { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 12mm; }
  #print-card-area .emoney-card { width: 85.6mm; height: 54mm; aspect-ratio: auto; margin: 0 auto; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #print-card-area .card-security-note { width: 85.6mm; margin: 4mm auto 0; }
}
.user-status { display: block; margin: 7px 0 0 auto; padding: 7px 11px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 800; }
.user-status.deactivate { background: #fff0ed; color: #b52f12; }
.user-status.reactivate { background: #eaf8f1; color: #15734b; }
.child-confirm { padding: 0 24px 25px; overflow: hidden; text-align: center; }
.handover { margin: 0 -24px 22px; padding: 13px; background: #17191d; color: #fff; font-weight: 800; letter-spacing: .8px; }
.confirm-person { display: flex; align-items: center; gap: 13px; padding: 15px; background: #f7f7f7; border-radius: 12px; text-align: left; }
.confirm-person > div:first-child { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f05a16; color: #fff; font-size: 22px; font-weight: 800; }
.confirm-person small,.confirm-person strong,.confirm-person span { display: block; }
.confirm-person small { color: #777; font-size: 9px; letter-spacing: 1px; }
.confirm-person span { color: #777; font-size: 12px; }
.child-confirm dl { margin: 20px 0; }
.child-confirm dl div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eee; }
.child-confirm dt { color: #70747a; }
.child-confirm dd { margin: 0; font-weight: 800; }
.child-confirm dl div:nth-child(2) dd { color: #e34d0c; font-size: 21px; }
.pin-label { text-align: left; }
.pin-label input { text-align: center; font-size: 28px; letter-spacing: 15px; }
.pin-help { color: #777; font-size: 12px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 18px; }
.confirm-actions button { margin: 0; padding: 14px 8px; border: 0; border-radius: 10px; }
.confirm-actions button:first-child { background: #eee; color: #333; }
.payment-success { padding: 35px 24px; text-align: center; }
.success-check { width: 72px; height: 72px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: #f05a16; color: #fff; font-size: 40px; }
.payment-success > strong { display: block; color: #e34d0c; font-size: 32px; }
.integrated-card .card-qr #qr-code { display: block; width: 18.13cqw; height: 18.13cqw; margin: 0; image-rendering: pixelated; }