:root{--blue:#0b8fe9;--blue-dark:#0877c9;--blue-soft:#eaf6ff;--ink:#122d43;--muted:#7790a4;--line:#e6eef4;--green:#16a574;--green-soft:#e8f8f2;--orange:#f09a35;--orange-soft:#fff3e5;--purple:#7657d9;--purple-soft:#f0ebff;--red:#e95f69;--shadow:0 14px 38px rgba(26,83,125,.09);--radius:24px}*{box-sizing:border-box}html{background:#f5f8fb}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f5f8fb;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input{font:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-app-body{min-height:100vh}.mobile-login-screen{min-height:100vh;background:linear-gradient(180deg,#0a8fe9 0,#0a8fe9 38%,#f5f8fb 38%,#f5f8fb 100%);padding:env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom))}.mobile-login-hero{height:34vh;min-height:240px;color:#fff;padding:34px 8px 0;position:relative;overflow:hidden}.mobile-logo{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:#fff;color:var(--blue);font-size:20px;font-weight:900;box-shadow:0 14px 34px rgba(0,67,122,.22)}.mobile-login-hero p{margin:18px 0 7px;font-size:12px;opacity:.82}.mobile-login-hero h1{margin:0;max-width:330px;font-size:29px;line-height:1.18;letter-spacing:-.8px}.login-wave{position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid rgba(255,255,255,.16);right:-130px;top:-130px}.login-wave:before,.login-wave:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.13)}.login-wave:before{inset:42px}.login-wave:after{inset:88px}.mobile-login-card{max-width:480px;margin:-4px auto 0;background:#fff;border-radius:28px;padding:22px;box-shadow:0 22px 60px rgba(18,63,99,.16);position:relative;z-index:2}.mobile-role-tabs{height:48px;padding:4px;background:#edf6fc;border-radius:15px;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:22px}.mobile-role-tabs a{display:grid;place-items:center;border-radius:12px;color:#6d879b;font-size:13px;font-weight:800}.mobile-role-tabs a.active{background:#fff;color:var(--blue);box-shadow:0 5px 15px rgba(27,91,135,.1)}.mobile-login-card h2{margin:0;font-size:22px}.mobile-login-card>p{margin:7px 0 20px;color:var(--muted);font-size:12px;line-height:1.55}.mobile-login-form{display:flex;flex-direction:column;gap:14px}.mobile-login-form label{display:flex;flex-direction:column;gap:7px}.mobile-login-form label span{font-size:11px;font-weight:800;color:#526e84}.mobile-login-form input{height:49px;border:1px solid #dce8f0;border-radius:14px;padding:0 14px;outline:none;color:var(--ink);background:#fbfdff}.mobile-login-form input:focus{border-color:#6bc1f2;box-shadow:0 0 0 4px rgba(11,143,233,.09)}.mobile-login-form button,.mobile-form-card button{height:50px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--blue),#42b4ef);color:#fff;font-weight:900;box-shadow:0 12px 25px rgba(11,143,233,.22)}.pin-tip{padding:11px 12px;border-radius:12px;background:#eef8ff;color:#5e7d92;font-size:10px;line-height:1.5}.mobile-login-foot{display:block;text-align:center;margin-top:19px;color:#91a5b5;font-size:9px}.mobile-alert{padding:12px 13px;border-radius:13px;margin-bottom:14px;font-size:11px;line-height:1.45}.mobile-alert.error{background:#fff0f1;color:#bd4250;border:1px solid #ffd8dd}.mobile-alert.success{background:#eafaf4;color:#147c5a;border:1px solid #ccefe1}.mobile-alert.info{background:#eef8ff;color:#2372a5;border:1px solid #d7ecfa}.mobile-app-shell{min-height:100vh;max-width:760px;margin:0 auto;background:#f7f9fc;box-shadow:0 0 60px rgba(20,64,97,.07)}.mobile-topbar{height:82px;padding:calc(12px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(229,237,244,.82)}.mobile-greeting{display:flex;align-items:center;gap:11px}.mobile-greeting div{display:flex;flex-direction:column;gap:2px}.mobile-greeting small{color:var(--muted);font-size:10px}.mobile-greeting strong{font-size:14px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#0b8fe9,#5ac4f3);color:#fff;font-weight:900;box-shadow:0 9px 20px rgba(11,143,233,.2);flex:none}.mobile-avatar.large{width:76px;height:76px;border-radius:25px;font-size:28px}.mobile-notification{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#f0f8fe;color:var(--blue);position:relative}.mobile-notification i{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff6b74;border:2px solid #fff;right:8px;top:8px}.mobile-content{padding:18px 16px calc(96px + env(safe-area-inset-bottom))}.app-balance-card{min-height:220px;padding:22px;border-radius:27px;background:linear-gradient(128deg,#0787dc 0%,#0d9dea 58%,#59c4f1 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 42px rgba(11,143,233,.27);margin-bottom:22px}.app-balance-card.compact{min-height:198px}.balance-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.balance-head>span:first-child{font-size:12px;opacity:.86}.balance-head button{width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center}.balance-head button svg{width:20px;height:20px}.balance-status{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:9px;font-weight:800}.app-balance-card>strong{display:block;position:relative;z-index:2;margin:23px 0 29px;font-size:35px;letter-spacing:-1px}.balance-meta{display:flex;justify-content:space-between;gap:15px;position:relative;z-index:2}.balance-meta span{display:flex;flex-direction:column;gap:5px;min-width:0}.balance-meta span:last-child{text-align:right}.balance-meta small{font-size:9px;opacity:.68}.balance-meta b{font-size:11px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.balance-decoration{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)}.balance-decoration.one{width:270px;height:270px;right:-95px;top:-145px}.balance-decoration.two{width:190px;height:190px;right:100px;bottom:-145px}.mobile-section{margin-bottom:22px}.mobile-section.no-margin{margin-bottom:0}.mobile-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px}.mobile-section-title>div{display:flex;flex-direction:column;gap:3px}.mobile-section-title small,.mobile-page-heading small{font-size:9px;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.9px}.mobile-section-title h2{margin:0;font-size:17px}.mobile-section-title>a{font-size:10px;color:var(--blue);font-weight:800}.quick-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.quick-action-grid a{min-height:116px;background:#fff;border:1px solid var(--line);border-radius:19px;padding:13px 8px;display:flex;align-items:center;flex-direction:column;text-align:center;box-shadow:0 8px 24px rgba(35,87,126,.05)}.quick-action-grid b{font-size:10px;margin-top:9px}.quick-action-grid small{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.35}.quick-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;flex:none}.quick-icon svg{width:20px;height:20px}.quick-icon.blue{background:var(--blue-soft);color:var(--blue)}.quick-icon.green{background:var(--green-soft);color:var(--green)}.quick-icon.orange{background:var(--orange-soft);color:var(--orange)}.quick-icon.purple{background:var(--purple-soft);color:var(--purple)}.mobile-info-banner{min-height:135px;border-radius:23px;padding:20px;background:linear-gradient(120deg,#0b8fe9,#36b2ed);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;overflow:hidden;margin-bottom:23px}.mobile-info-banner>div:first-child{position:relative;z-index:2}.mobile-info-banner span{font-size:9px;padding:5px 8px;background:rgba(255,255,255,.16);border-radius:999px;font-weight:800}.mobile-info-banner strong{display:block;margin:12px 0 5px;font-size:16px;max-width:260px}.mobile-info-banner p{margin:0;max-width:290px;font-size:9px;line-height:1.5;opacity:.82}.info-illustration{width:72px;height:72px;border-radius:24px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:24px;font-weight:900;transform:rotate(7deg);flex:none}.admin-banner{background:linear-gradient(120deg,#1169bb,#0a95e6)}.mobile-transaction-list{background:#fff;border:1px solid var(--line);border-radius:22px;padding:4px 15px;box-shadow:var(--shadow)}.mobile-transaction-list.full-list{border-radius:20px}.mobile-transaction-item{min-height:72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;border-bottom:1px solid #edf2f6}.mobile-transaction-item:last-child{border-bottom:0}.tx-icon{width:41px;height:41px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:900}.tx-icon.deposit{background:var(--green-soft);color:var(--green)}.tx-icon.withdraw{background:#fff0f1;color:var(--red)}.mobile-transaction-item>div{min-width:0;display:flex;flex-direction:column;gap:4px}.mobile-transaction-item b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-transaction-item small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-transaction-item>strong{font-size:10px;white-space:nowrap}.positive{color:var(--green)}.negative{color:var(--red)}.mobile-empty{min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted)}.mobile-empty>span{width:52px;height:52px;border-radius:17px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:21px}.mobile-empty b{font-size:11px;margin-top:12px;color:#3b5c73}.mobile-empty small{font-size:9px;margin-top:5px}.mobile-page-heading{padding:2px 2px 0;margin-bottom:17px}.mobile-page-heading h1{font-size:24px;margin:5px 0 5px;letter-spacing:-.5px}.mobile-page-heading p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.mobile-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.mobile-stat-grid article{min-height:142px;background:#fff;border:1px solid var(--line);border-radius:21px;padding:16px;display:flex;flex-direction:column;box-shadow:var(--shadow)}.mobile-stat-grid article.wide{grid-column:1/-1;min-height:110px}.mobile-stat-grid small{font-size:9px;color:var(--muted);margin-top:12px}.mobile-stat-grid strong{font-size:14px;margin-top:5px;word-break:break-word}.report-grid article{min-height:118px}.report-grid article small{margin-top:0}.report-grid article strong{font-size:19px}.mobile-detail-card,.mobile-form-card,.mobile-profile-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);margin-bottom:17px}.mobile-detail-card h3,.mobile-form-card h3{font-size:14px;margin:0 0 14px}.mobile-detail-card dl{margin:0}.mobile-detail-card dl>div{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:12px 0;border-top:1px solid #edf2f6}.mobile-detail-card dl>div:first-child{border-top:0}.mobile-detail-card dt{font-size:9px;color:var(--muted)}.mobile-detail-card dd{margin:0;max-width:60%;text-align:right;font-size:10px;font-weight:800;color:#395b72;word-break:break-word}.status-pill{padding:5px 8px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:8px}.history-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.history-summary span{padding:14px;border-radius:17px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.history-summary small{font-size:8px;color:var(--muted)}.history-summary strong{font-size:12px}.mobile-profile-card{text-align:center;padding:24px 18px}.mobile-profile-card .mobile-avatar{margin:0 auto}.mobile-profile-card h2{font-size:19px;margin:13px 0 4px}.mobile-profile-card p{margin:0;color:var(--muted);font-size:10px}.mobile-form-card>p{margin:-6px 0 15px;color:var(--muted);font-size:9px;line-height:1.5}.mobile-form-card form{display:flex;flex-direction:column;gap:12px}.mobile-form-card label{display:flex;flex-direction:column;gap:6px}.mobile-form-card label span{font-size:9px;font-weight:800;color:#60798d}.mobile-form-card input{height:46px;border:1px solid #dbe7ef;border-radius:13px;padding:0 13px;outline:0}.mobile-form-card input:focus{border-color:#6bc1f2;box-shadow:0 0 0 4px rgba(11,143,233,.08)}.mobile-logout-button,.mobile-full-button{min-height:49px;border-radius:15px;background:#fff0f1;color:#c84956;border:1px solid #ffd9dd;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:900;margin-bottom:10px}.mobile-logout-button svg{width:18px;height:18px}.mobile-full-button{background:linear-gradient(135deg,var(--blue),#43b5ef);color:#fff;border:0;box-shadow:0 12px 25px rgba(11,143,233,.2);margin-bottom:15px}.mobile-action-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.mobile-action-pair a{min-height:46px;border-radius:14px;background:#fff;border:1px solid #dce7ef;display:grid;place-items:center;color:#4d6b81;font-size:10px;font-weight:900}.mobile-action-pair a.primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 10px 22px rgba(11,143,233,.19)}.mobile-student-list{background:#fff;border:1px solid var(--line);border-radius:22px;padding:3px 14px;box-shadow:var(--shadow)}.mobile-student-list article{min-height:70px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid #edf2f6}.mobile-student-list article:last-child{border-bottom:0}.mobile-student-list .mobile-avatar{width:39px;height:39px;border-radius:13px;font-size:12px}.mobile-student-list article div{min-width:0;display:flex;flex-direction:column;gap:4px}.mobile-student-list article b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-student-list article small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-student-list article>strong{font-size:9px;color:var(--blue);white-space:nowrap}.report-link-list{display:flex;flex-direction:column}.report-link-list a{min-height:50px;border-top:1px solid #edf2f6;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:800;color:#426178}.report-link-list a:first-child{border-top:0}.report-link-list svg{width:18px;height:18px;color:var(--blue)}.mobile-bottom-nav{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);height:calc(70px + env(safe-area-inset-bottom));padding:7px 10px env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid #e4edf4;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 -10px 28px rgba(25,75,110,.07)}.admin-mode .mobile-bottom-nav{grid-template-columns:repeat(5,1fr)}.mobile-bottom-nav a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#8aa0b1;font-size:8px;font-weight:700;position:relative}.mobile-bottom-nav a svg{width:21px;height:21px}.mobile-bottom-nav a.active{color:var(--blue);font-weight:900}.mobile-bottom-nav a.active:before{content:"";position:absolute;top:-7px;width:35px;height:3px;border-radius:0 0 5px 5px;background:var(--blue)}@media(min-width:620px){.mobile-content{padding-left:24px;padding-right:24px}.quick-action-grid a{padding-left:12px;padding-right:12px}.mobile-login-screen{display:grid;place-items:center;background:linear-gradient(135deg,#0788dc 0,#2ab0ec 45%,#f5f8fb 45%,#f5f8fb 100%)}.mobile-login-hero{position:absolute;left:max(4vw,30px);top:7vh;width:42vw}.mobile-login-card{width:440px;margin-left:auto;margin-right:6vw}}@media(max-width:390px){.quick-action-grid{gap:7px}.quick-action-grid a{min-height:108px;padding-left:5px;padding-right:5px}.quick-action-grid small{font-size:7px}.app-balance-card>strong{font-size:31px}.mobile-transaction-item{grid-template-columns:auto minmax(0,1fr)}.mobile-transaction-item>strong{grid-column:2;text-align:left;margin-top:-4px}.admin-mode .mobile-bottom-nav a span{font-size:7px}.mobile-bottom-nav{padding-left:3px;padding-right:3px}}

/* v8.2: navbar biru dan login PIN-only setelah perangkat mengingat NIS. */
.mobile-bottom-nav{
    background:linear-gradient(135deg,#087dce 0%,#0b97e6 55%,#16acee 100%);
    border-top:0;
    border-radius:24px 24px 0 0;
    box-shadow:0 -12px 30px rgba(4,91,156,.28);
    backdrop-filter:none;
    padding-top:8px;
}
.mobile-bottom-nav a{
    color:rgba(255,255,255,.72);
    border-radius:15px;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}
.mobile-bottom-nav a svg{stroke-width:2}
.mobile-bottom-nav a.active{
    color:#fff;
    background:rgba(255,255,255,.17);
    font-weight:900;
    transform:translateY(-1px);
}
.mobile-bottom-nav a.active:before{display:none}
.remembered-student-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid #d9eaf5;
    border-radius:16px;
    background:linear-gradient(135deg,#eef8ff,#f8fcff);
}
.remembered-student-card>span{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(145deg,#0b8fe9,#48b9ef);
    color:#fff;
    font-weight:900;
    box-shadow:0 8px 18px rgba(11,143,233,.2);
}
.remembered-student-card>div{display:flex;flex-direction:column;min-width:0}
.remembered-student-card small{font-size:8px;color:#7e94a5;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.remembered-student-card strong{font-size:13px;color:#183b56;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.remembered-student-card b{font-size:9px;color:#0b8fe9}
.mobile-switch-account{margin-top:10px;text-align:center}
.mobile-switch-account button{
    border:0;
    background:transparent;
    color:#678196;
    font-size:9px;
    font-weight:800;
    padding:8px 12px;
}
.mobile-switch-account button:active{color:#0b8fe9}

/* v8.3: foto profil siswa dari kamera/galeri. */
.mobile-avatar{overflow:hidden;position:relative}
.mobile-avatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.profile-photo-wrap{width:88px;height:88px;margin:0 auto;position:relative;display:grid;place-items:center}
.profile-photo-wrap .mobile-avatar.large{width:84px;height:84px;border-radius:28px}
.profile-photo-badge{position:absolute;right:-1px;bottom:0;width:31px;height:31px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--blue);border:3px solid #fff;box-shadow:0 7px 18px rgba(22,76,115,.19)}
.profile-photo-badge svg{width:17px;height:17px}
.profile-photo-card{overflow:hidden}
.profile-photo-picker{position:relative;display:block!important}
.profile-photo-picker>span{height:49px;border-radius:15px;background:#eef8ff;color:#137bbd!important;border:1px dashed #8ccdf3;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px!important;font-weight:900!important;cursor:pointer}
.profile-photo-picker>span svg{width:19px;height:19px}
.profile-photo-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.profile-photo-file-name{display:block;margin:-3px 0 2px;text-align:center;color:var(--muted);font-size:8px;line-height:1.4;word-break:break-word}
.profile-photo-delete-form{margin-top:10px!important}
.mobile-form-card .profile-photo-delete{height:44px;background:#fff0f1;color:#c84956;border:1px solid #ffd8dd;box-shadow:none}
.profile-photo-card.is-loading button[type=submit]{opacity:.7;pointer-events:none}

/* v8.4: layar PIN 6 digit dengan keypad ala aplikasi perbankan. */
.pin-login-screen{
    min-height:100vh;
    background:#fff;
    color:#202124;
    padding:calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
    position:relative;
    display:flex;
    justify-content:center;
}
.pin-back-form{position:absolute;left:18px;top:calc(15px + env(safe-area-inset-top));z-index:3}
.pin-back-button{
    width:46px;height:46px;border:0;background:transparent;color:#17191c;
    display:grid;place-items:center;font-size:38px;line-height:1;font-weight:300;padding:0;
}
.pin-login-panel{
    width:min(100%,430px);
    min-height:calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding-top:46px;
}
.pin-brand-mark{
    width:93px;height:93px;border-radius:50%;background:#eef8ff;
    display:grid;place-items:center;margin:0 auto 25px;
}
.pin-brand-mark span{
    width:67px;height:67px;border-radius:24px 24px 24px 8px;
    background:linear-gradient(145deg,#118de6,#20b4ef);color:#fff;
    display:grid;place-items:center;font-size:25px;font-weight:1000;
    box-shadow:0 13px 30px rgba(11,143,233,.23);
}
.pin-login-panel h1{margin:0;color:#17191c;font-size:25px;line-height:1.2;font-weight:900;letter-spacing:-.4px}
.pin-login-panel>p{margin:10px 0 4px;color:#666a70;font-size:14px;line-height:1.5}
.pin-alert{width:100%;margin:13px 0 0;text-align:left}
.pin-login-form{width:100%;display:flex;flex-direction:column;align-items:center}
.pin-hidden-input{
    position:fixed!important;left:-9999px!important;top:-9999px!important;
    width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;
}
.pin-account-name{display:flex;flex-direction:column;gap:3px;margin-top:11px}
.pin-account-name strong{font-size:12px;color:#2b2f33}
.pin-account-name small{font-size:9px;color:#9a9da2;letter-spacing:.35px}
.pin-dots{display:flex;align-items:center;justify-content:center;gap:23px;margin:28px 0 48px;min-height:21px}
.pin-dots span{
    width:16px;height:16px;border-radius:50%;background:#e9eaec;
    transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.pin-dots span.filled{background:#12a8e5;transform:scale(1.06);box-shadow:0 0 0 5px rgba(18,168,229,.08)}
.pin-dots.is-error span{animation:pinShake .34s ease}
@keyframes pinShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pin-keypad{width:min(100%,360px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px;margin-top:auto}
.pin-keypad button{
    width:74px;height:74px;margin:auto;border:0;border-radius:50%;background:#f1f2f4;
    color:#15171a;font-size:30px;font-weight:500;display:grid;place-items:center;
    -webkit-tap-highlight-color:transparent;transition:transform .08s ease,background .12s ease;
}
.pin-keypad button:active{transform:scale(.93);background:#e1e3e6}
.pin-keypad .pin-help-key{font-size:25px;color:#222;font-weight:500}
.pin-keypad .pin-delete-key{background:transparent}
.pin-keypad .pin-delete-key:active{background:#f1f2f4}
.pin-delete-key svg{width:31px;height:31px;stroke:#15171a;stroke-width:1.7}
.pin-fallback-submit{position:fixed;left:-9999px;width:1px;height:1px;opacity:0}
.pin-forgot-link{
    border:0;background:transparent;color:#118bd4;font-size:13px;font-weight:800;
    margin:23px 0 0;padding:9px 14px;
}
.pin-school-name{margin-top:10px;color:#a1a5aa;font-size:9px}
.pin-login-form.is-submitting .pin-keypad{pointer-events:none;opacity:.72}
.pin-login-form.is-submitting .pin-dots span.filled{animation:pinPulse .7s ease infinite alternate}
@keyframes pinPulse{to{opacity:.42}}
@media(max-height:690px){
    .pin-login-panel{padding-top:17px}.pin-brand-mark{width:70px;height:70px;margin-bottom:13px}.pin-brand-mark span{width:52px;height:52px;border-radius:18px 18px 18px 6px;font-size:19px}
    .pin-dots{margin:18px 0 25px}.pin-keypad{gap:9px 18px}.pin-keypad button{width:62px;height:62px;font-size:26px}.pin-forgot-link{margin-top:10px}
}
@media(min-width:620px){
    .pin-login-screen{background:#f4f8fb}.pin-login-panel{min-height:auto;margin:auto;background:#fff;border-radius:32px;padding:38px 42px 30px;box-shadow:0 24px 70px rgba(25,75,110,.12)}
    .pin-back-form{left:calc(50% - 255px);top:calc(50% - 345px)}
}

/* ===== v9.1 · DANA-inspired student experience ===== */
:root {
    --dana-blue: #118eea;
    --dana-blue-deep: #0879cf;
    --dana-cyan: #39b8f2;
    --dana-surface: #ffffff;
    --dana-canvas: #f3f7fb;
    --dana-text: #152c3d;
    --dana-muted: #71889a;
    --dana-line: #e6eef5;
    --dana-shadow: 0 12px 34px rgba(30, 84, 124, .10);
}

html {
    background: #eaf2f8;
}

.mobile-app-body {
    background: linear-gradient(180deg, #e8f4fb 0, #f3f7fb 34%, #f3f7fb 100%);
    color: var(--dana-text);
}

.mobile-app-shell {
    max-width: 520px;
    background: var(--dana-canvas);
    box-shadow: 0 0 70px rgba(21, 67, 101, .14);
    overflow: hidden;
}

.mobile-topbar {
    height: 74px;
    padding: calc(10px + env(safe-area-inset-top)) 17px 9px;
    color: #fff;
    border: 0;
    background:
        radial-gradient(circle at 92% -10%, rgba(255, 255, 255, .22), transparent 33%),
        linear-gradient(118deg, var(--dana-blue-deep), var(--dana-blue) 62%, var(--dana-cyan));
    box-shadow: none;
}

.mobile-greeting {
    gap: 10px;
}

.mobile-greeting small {
    color: rgba(255, 255, 255, .76);
    font-size: 9px;
}

.mobile-greeting strong {
    color: #fff;
    font-size: 13px;
}

.mobile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--dana-blue);
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .58);
    box-shadow: 0 7px 17px rgba(0, 70, 126, .18);
}

.mobile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.mobile-notification {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .18);
}

.mobile-content {
    padding: 0 14px calc(84px + env(safe-area-inset-bottom));
}

.dana-wallet-card {
    min-height: 174px;
    margin: 0 -14px 15px;
    padding: 13px 18px 16px;
    border-radius: 0 0 27px 27px;
    background:
        radial-gradient(circle at 88% 6%, rgba(255, 255, 255, .16), transparent 31%),
        linear-gradient(118deg, var(--dana-blue-deep), var(--dana-blue) 62%, var(--dana-cyan));
    box-shadow: 0 17px 31px rgba(17, 142, 234, .20);
}

.dana-wallet-card .balance-head > span:first-child {
    font-size: 10px;
    font-weight: 700;
}

.dana-wallet-card .balance-head button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}

.dana-wallet-card > strong {
    margin: 10px 0 17px;
    font-size: clamp(29px, 8vw, 35px);
    letter-spacing: -.9px;
}

.dana-wallet-card .balance-meta {
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.dana-wallet-card .balance-meta small {
    font-size: 8px;
}

.dana-wallet-card .balance-meta b {
    font-size: 10px;
}

.balance-live-status {
    position: absolute;
    right: 18px;
    bottom: 4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .66);
    font-size: 7px;
}

.balance-live-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7cf2c5;
    box-shadow: 0 0 0 3px rgba(124, 242, 197, .12);
}

.mobile-section {
    margin-bottom: 17px;
}

.mobile-section-title {
    margin-bottom: 10px;
    padding: 0 2px;
}

.mobile-section-title small,
.mobile-page-heading small {
    font-size: 8px;
    letter-spacing: .75px;
}

.mobile-section-title h2 {
    font-size: 15px;
}

.quick-action-grid {
    gap: 8px;
    padding: 13px 8px 12px;
    border: 1px solid var(--dana-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--dana-shadow);
}

.quick-action-grid a {
    min-height: 82px;
    padding: 7px 3px;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    background: transparent;
    transition: transform .16s ease, background .16s ease;
}

.quick-action-grid a:active {
    transform: scale(.96);
    background: #f1f8fd;
}

.quick-action-grid .quick-icon {
    width: 39px;
    height: 39px;
    border-radius: 14px;
}

.quick-action-grid b {
    margin-top: 7px;
    font-size: 9px;
}

.quick-action-grid small {
    display: none;
}

.mobile-info-banner {
    min-height: 112px;
    margin-bottom: 17px;
    padding: 17px;
    border-radius: 19px;
    background:
        linear-gradient(125deg, #e8f7ff, #f7fcff);
    border: 1px solid #d9eefb;
    box-shadow: 0 9px 25px rgba(27, 93, 137, .05);
}

.mobile-info-banner span {
    font-size: 8px;
}

.mobile-info-banner strong {
    margin-top: 4px;
    font-size: 13px;
}

.mobile-info-banner p {
    max-width: 75%;
    margin-top: 5px;
    font-size: 8px;
    line-height: 1.55;
}

.info-illustration {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 17px;
}

.mobile-transaction-list {
    overflow: hidden;
    border: 1px solid var(--dana-line);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 9px 28px rgba(30, 79, 115, .055);
}

.mobile-transaction-item {
    min-height: 67px;
    padding: 11px 13px;
    border-bottom-color: #edf2f6;
}

.mobile-transaction-item .tx-icon {
    width: 39px;
    height: 39px;
    border-radius: 50%;
}

.mobile-transaction-item div b {
    font-size: 10px;
}

.mobile-transaction-item div small {
    max-width: 190px;
    font-size: 8px;
}

.mobile-transaction-item > strong {
    font-size: 10px;
}

.mobile-page-heading {
    margin: 0 -14px 14px;
    padding: 17px 18px 24px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 0, rgba(255, 255, 255, .15), transparent 30%),
        linear-gradient(118deg, var(--dana-blue-deep), var(--dana-blue) 64%, var(--dana-cyan));
    border-radius: 0 0 25px 25px;
}

.mobile-page-heading small,
.mobile-page-heading p {
    color: rgba(255, 255, 255, .74);
}

.mobile-page-heading h1 {
    margin: 4px 0 5px;
    font-size: 23px;
}

.mobile-page-heading p {
    margin: 0;
    font-size: 9px;
}

.app-balance-card.compact,
.mobile-detail-card,
.mobile-form-card,
.mobile-profile-card {
    border: 1px solid var(--dana-line);
    border-radius: 20px;
    box-shadow: var(--dana-shadow);
}

.app-balance-card.compact {
    min-height: 181px;
    padding: 19px;
}

.mobile-bottom-nav {
    width: min(520px, 100%);
    height: calc(67px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 0;
    background:
        radial-gradient(circle at 50% 135%, rgba(255, 255, 255, .18), transparent 42%),
        linear-gradient(112deg, #0879cf, #118eea 62%, #28aaed);
    backdrop-filter: blur(18px);
    box-shadow: 0 -10px 28px rgba(8, 91, 158, .22);
}

.mobile-bottom-nav a {
    min-width: 0;
    gap: 2px;
    color: rgba(255, 255, 255, .72);
    font-size: 8px;
    font-weight: 700;
    border-radius: 14px;
}

.mobile-bottom-nav a svg {
    width: 20px;
    height: 20px;
}

.mobile-bottom-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.mobile-bottom-nav a.active:before {
    width: 30px;
    height: 3px;
    top: -7px;
    border-radius: 0 0 5px 5px;
    background: #fff;
}

.profile-photo-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.profile-photo-heading h3 {
    margin: 0;
}

.profile-photo-heading p {
    margin-bottom: 0;
}

.profile-photo-heading > span {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--dana-blue);
    background: #eaf6fe;
}

.profile-photo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-photo-actions form {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.profile-photo-picker {
    min-height: 104px;
    padding: 12px 8px;
    border: 1px solid #dceaf4;
    border-radius: 16px;
    background: #f8fcff;
}

.profile-photo-picker > span {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.profile-photo-picker svg {
    width: 24px;
    height: 24px;
    margin-bottom: 7px;
    color: var(--dana-blue);
}

.profile-photo-picker b {
    font-size: 9px;
}

.profile-photo-picker small {
    margin-top: 3px;
    color: var(--dana-muted);
    font-size: 7px;
}

.profile-photo-file-name {
    min-height: 26px;
    padding: 6px 2px;
    overflow: hidden;
    color: var(--dana-muted);
    font-size: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile-photo-actions button[type="submit"] {
    height: 39px;
    margin-top: auto;
    font-size: 8px;
}

.profile-photo-actions button[disabled] {
    cursor: not-allowed;
    opacity: .45;
    box-shadow: none;
}

.profile-photo-card {
    padding: 17px;
}

.profile-photo-heading {
    align-items: center;
    margin-bottom: 12px;
}

.profile-photo-heading p {
    max-width: 265px;
    font-size: 8px;
    line-height: 1.5;
}

.profile-photo-heading > span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.profile-photo-actions {
    gap: 8px;
}

.profile-photo-actions form {
    padding: 8px;
    border: 1px solid #e2eef6;
    border-radius: 16px;
    background: #fbfdff;
}

.profile-photo-picker {
    min-height: 82px;
    padding: 10px 7px;
    border-color: #cfe5f4;
    background: #f2f9fe;
}

.profile-photo-picker svg {
    width: 22px;
    height: 22px;
    margin-bottom: 5px;
}

.profile-photo-picker b {
    font-size: 10px;
}

.profile-photo-picker small {
    font-size: 7px;
}

.profile-photo-file-name {
    min-height: 28px;
    padding: 7px 2px 5px;
    text-align: center;
}

.profile-photo-actions button[type="submit"] {
    width: 100%;
    height: 38px;
    border-radius: 12px;
}

.mobile-upload-toast {
    position: fixed;
    left: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 300;
    width: min(88%, 390px);
    padding: 13px 16px;
    border-radius: 15px;
    box-shadow: 0 14px 35px rgba(8, 55, 91, .22);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: .22s;
}

.mobile-upload-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mobile-upload-toast.success {
    background: #0b9b69;
}

.mobile-upload-toast.error {
    background: #d84f4f;
}

.mobile-upload-toast.info {
    background: #187fc4;
}

.balance-warning[hidden] {
    display: none;
}

.balance-warning {
    position: fixed;
    inset: 0;
    z-index: 1100;
    padding: 20px;
    display: grid;
    place-items: end center;
    background: rgba(44, 13, 17, .62);
    backdrop-filter: blur(7px);
}

.balance-warning-card {
    width: min(480px, 100%);
    padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
    text-align: center;
    border: 1px solid #ffd9dc;
    border-radius: 27px 27px 20px 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(229, 73, 84, .1), transparent 35%),
        #fff;
    box-shadow: 0 28px 70px rgba(55, 9, 16, .3);
    animation: dana-sheet-in .25s ease both;
}

.balance-warning-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, #d83e4c, #f06b73);
    box-shadow: 0 12px 25px rgba(216, 62, 76, .25);
    font-size: 25px;
    font-weight: 950;
}

.balance-warning-card > small {
    color: #ce3543;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .8px;
}

.balance-warning-card h2 {
    margin: 7px 0;
    color: #3f2024;
    font-size: 21px;
}

.balance-warning-card > p {
    margin: 0;
    color: #876d70;
    font-size: 9px;
    line-height: 1.6;
}

.balance-warning-card dl {
    margin: 17px 0 0;
    padding: 4px 14px;
    border: 1px solid #f4e1e3;
    border-radius: 17px;
    background: #fff8f8;
}

.balance-warning-card dl > div {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #f3e4e5;
}

.balance-warning-card dl > div:first-child {
    border-top: 0;
}

.balance-warning-card dt {
    color: #8b7476;
    font-size: 8px;
}

.balance-warning-card dd {
    margin: 0;
    color: #41282b;
    font-size: 11px;
    font-weight: 900;
}

.balance-warning-card dl > div:last-child dd {
    color: #d13746;
}

.balance-warning-card button {
    width: 100%;
    height: 49px;
    margin-top: 16px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #d83e4c, #ee6871);
    box-shadow: 0 12px 24px rgba(216, 62, 76, .22);
    font-weight: 950;
}

body.balance-warning-open {
    overflow: hidden;
}

.idle-warning[hidden] {
    display: none;
}

.idle-warning {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: end center;
    padding: 20px;
    background: rgba(7, 29, 45, .55);
    backdrop-filter: blur(6px);
}

.idle-warning-card {
    width: min(480px, 100%);
    padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
    text-align: center;
    border-radius: 26px 26px 20px 20px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(4, 29, 48, .24);
    animation: dana-sheet-in .25s ease both;
}

.idle-warning-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--dana-blue);
    background: #eaf6fe;
}

.idle-warning-card > small {
    color: var(--dana-blue);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.idle-warning-card h2 {
    margin: 7px 0 7px;
    font-size: 21px;
}

.idle-warning-card p {
    margin: 0;
    color: var(--dana-muted);
    font-size: 10px;
    line-height: 1.6;
}

.idle-warning-card button {
    width: 100%;
    height: 48px;
    margin-top: 18px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(120deg, var(--dana-blue), var(--dana-cyan));
    box-shadow: 0 12px 24px rgba(17, 142, 234, .22);
    font-weight: 900;
}

body.idle-warning-open {
    overflow: hidden;
}

@keyframes dana-sheet-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 390px) {
    .mobile-content {
        padding-left: 11px;
        padding-right: 11px;
    }

    .dana-wallet-card,
    .mobile-page-heading {
        margin-left: -11px;
        margin-right: -11px;
    }

    .mobile-transaction-item div small {
        max-width: 145px;
    }
}

@media (max-width: 350px) {
    .profile-photo-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   v10.0 — compact professional mobile UI
   ========================================================= */
:root {
    --tp-radius-sm: 10px;
    --tp-radius-md: 14px;
    --tp-radius-lg: 18px;
    --tp-shadow: 0 6px 20px rgba(31, 74, 106, .075);
}

.mobile-app-body {
    font-size: 12px;
    background: #f4f7fa;
}

.mobile-app-shell {
    min-height: 100dvh;
    background: #f4f7fa;
}

.mobile-topbar {
    height: 64px;
    padding: calc(7px + env(safe-area-inset-top)) 14px 7px;
}

.mobile-greeting {
    gap: 8px;
}

.mobile-greeting small {
    font-size: 8px;
}

.mobile-greeting strong {
    font-size: 12px;
}

.mobile-avatar {
    width: 36px;
    height: 36px;
}

.mobile-notification {
    width: 35px;
    height: 35px;
}

.mobile-content {
    padding: 0 12px calc(72px + env(safe-area-inset-bottom));
}

.dana-wallet-card {
    min-height: 146px;
    margin: 0 -12px 12px;
    padding: 10px 15px 13px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 25px rgba(17, 142, 234, .16);
}

.dana-wallet-card > strong {
    margin: 7px 0 12px;
    font-size: clamp(25px, 7.3vw, 31px);
}

.dana-wallet-card .balance-head button {
    width: 30px;
    height: 30px;
}

.dana-wallet-card .balance-meta {
    padding-top: 8px;
}

.balance-live-status {
    right: 15px;
    bottom: 2px;
}

.mobile-section {
    margin-bottom: 12px;
}

.mobile-section-title {
    margin-bottom: 7px;
    padding: 0 1px;
}

.mobile-section-title h2 {
    font-size: 13px;
}

.quick-action-grid {
    gap: 4px;
    padding: 7px 5px;
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-shadow);
}

.quick-action-grid a {
    min-height: 65px;
    padding: 5px 2px;
    border-radius: 10px;
}

.quick-action-grid .quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.quick-action-grid b {
    margin-top: 5px;
    font-size: 8px;
}

.mobile-info-banner {
    min-height: 88px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-shadow);
}

.mobile-info-banner strong {
    font-size: 12px;
}

.mobile-info-banner p {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.4;
}

.info-illustration {
    width: 45px;
    height: 45px;
    border-radius: 14px;
}

.mobile-page-heading {
    margin: 0 -12px 11px;
    padding: 13px 15px 18px;
    border-radius: 0 0 19px 19px;
}

.mobile-page-heading h1 {
    margin: 3px 0;
    font-size: 19px;
}

.mobile-page-heading p {
    font-size: 8px;
}

.app-balance-card.compact,
.mobile-detail-card,
.mobile-form-card,
.mobile-profile-card,
.profile-photo-card {
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-shadow);
}

.mobile-detail-card,
.mobile-form-card,
.mobile-profile-card,
.profile-photo-card {
    padding: 13px;
    margin-bottom: 10px;
}

.mobile-detail-card h3,
.mobile-form-card h3 {
    margin: 0 0 8px;
    font-size: 13px;
}

.mobile-form-card > p {
    margin: -3px 0 10px;
    font-size: 8px;
    line-height: 1.45;
}

.mobile-detail-card dl {
    gap: 0;
}

.mobile-detail-card dl div {
    padding: 9px 0;
}

.mobile-detail-card dt {
    font-size: 8px;
}

.mobile-detail-card dd {
    font-size: 10px;
}

.mobile-form-card label {
    gap: 5px;
    margin-bottom: 9px;
}

.mobile-form-card label > span {
    font-size: 8px;
}

.mobile-form-card input,
.mobile-form-card select,
.mobile-form-card textarea {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 11px;
}

.mobile-form-card button,
.profile-photo-actions button[type="submit"] {
    min-height: 41px;
    border-radius: 11px;
    font-size: 9px;
}

.mobile-profile-card {
    padding: 14px 12px;
}

.mobile-profile-card h2 {
    margin: 8px 0 2px;
    font-size: 16px;
}

.mobile-profile-card p {
    font-size: 8px;
}

.profile-photo-wrap {
    width: 72px;
    height: 72px;
}

.profile-photo-wrap .mobile-avatar.large {
    width: 70px;
    height: 70px;
    border-radius: 22px;
}

.profile-photo-badge {
    width: 27px;
    height: 27px;
    border-radius: 9px;
}

.profile-photo-heading {
    gap: 9px;
    margin-bottom: 9px;
}

.profile-photo-heading h3 {
    font-size: 13px;
}

.profile-photo-heading p {
    max-width: 240px;
    font-size: 8px;
    line-height: 1.35;
}

.profile-photo-heading > span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.profile-photo-actions {
    gap: 7px;
}

.profile-photo-actions form {
    padding: 6px;
    border-radius: 12px;
}

.profile-photo-picker {
    min-height: 65px;
    padding: 7px 5px;
    border-radius: 10px;
}

.profile-photo-picker svg {
    width: 19px;
    height: 19px;
    margin-bottom: 3px;
}

.profile-photo-picker b {
    font-size: 9px;
}

.profile-photo-file-name {
    min-height: 22px;
    padding: 5px 1px 3px;
    font-size: 7px;
}

.profile-photo-actions button[type="submit"] {
    height: 36px;
    min-height: 36px;
}

.mobile-transaction-list {
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-shadow);
}

.mobile-transaction-item {
    min-height: 57px;
    padding: 8px 10px;
    gap: 9px;
}

.mobile-transaction-item .tx-icon {
    width: 34px;
    height: 34px;
}

.mobile-transaction-item div b,
.mobile-transaction-item > strong {
    font-size: 9px;
}

.mobile-transaction-item div small {
    max-width: 175px;
    font-size: 7px;
    line-height: 1.35;
}

.mobile-empty {
    padding: 24px 15px;
}

.mobile-bottom-nav {
    height: calc(59px + env(safe-area-inset-bottom));
    padding: 5px 7px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -7px 22px rgba(8, 91, 158, .18);
}

.mobile-bottom-nav a {
    gap: 1px;
    font-size: 7px;
    border-radius: 10px;
}

.mobile-bottom-nav a svg {
    width: 18px;
    height: 18px;
}

.mobile-bottom-nav a.active:before {
    top: -5px;
    width: 24px;
    height: 2px;
}

.mobile-upload-toast {
    bottom: calc(70px + env(safe-area-inset-bottom));
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 9px;
}

@media (max-width: 390px) {
    .mobile-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dana-wallet-card,
    .mobile-page-heading {
        margin-left: -10px;
        margin-right: -10px;
    }

    .mobile-transaction-item div small {
        max-width: 140px;
    }
}

/* =========================================================
   v10.3 — native polish, live AJAX status, compact navigation
   ========================================================= */
.mobile-app-shell {
    background:
        radial-gradient(circle at 14% 18%, rgba(34, 170, 236, .055), transparent 26%),
        linear-gradient(180deg, #f7fbfe 0, #f3f7fb 48%, #f5f8fb 100%);
}

.mobile-topbar {
    min-height: 66px;
    height: auto;
    box-shadow: 0 8px 22px rgba(4, 80, 137, .12);
}

.mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mobile-sync-badge {
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .92);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.mobile-sync-badge > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8ef0c2;
    box-shadow: 0 0 0 3px rgba(142, 240, 194, .14);
}

.mobile-sync-badge[data-state="loading"] > i {
    background: #fff;
    animation: tpSyncPulse .8s ease-in-out infinite alternate;
}

.mobile-sync-badge[data-state="error"] > i {
    background: #ffd27a;
    box-shadow: 0 0 0 3px rgba(255, 210, 122, .14);
}

@keyframes tpSyncPulse {
    to { opacity: .35; transform: scale(.72); }
}

.mobile-section,
.mobile-detail-card,
.mobile-form-card,
.mobile-profile-card,
.mobile-transaction-list {
    animation: tpCardEnter .28s ease both;
}

@keyframes tpCardEnter {
    from { opacity: .3; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-bottom-nav {
    width: min(496px, calc(100% - 20px));
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: 58px;
    padding: 5px 7px;
    border-radius: 19px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 13px 34px rgba(4, 76, 132, .3);
}

.mobile-bottom-nav a {
    min-height: 46px;
}

.mobile-content {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

@media (max-width: 380px) {
    .mobile-sync-badge {
        max-width: 74px;
        padding: 0 7px;
        overflow: hidden;
    }

    .mobile-sync-badge span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* v10.5 — pembayaran sekolah dari saldo tabungan */
.student-mode .mobile-bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.payment-page-heading {
    padding-top: 13px;
}

.payment-balance-card {
    min-height: 116px;
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .2), transparent 35%),
        linear-gradient(125deg, #087dce, #119ce7 62%, #45bff0);
    box-shadow: 0 13px 29px rgba(17, 142, 234, .2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
}

.payment-balance-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.payment-balance-card small {
    color: rgba(255, 255, 255, .7);
    font-size: 8px;
}

.payment-balance-card strong {
    margin: 5px 0;
    font-size: 23px;
    letter-spacing: -.6px;
}

.payment-balance-card span {
    color: rgba(255, 255, 255, .72);
    font-size: 7px;
}

.payment-held {
    min-width: 105px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
}

.payment-held b {
    margin: 5px 0 7px;
    font-size: 11px;
}

.payment-held span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.payment-held i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffe08a;
}

.payment-held em {
    font-style: normal;
    font-weight: 900;
}

.payment-count-badge {
    min-width: 27px;
    height: 27px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eaf6ff;
    color: #0b83d5;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 900;
}

.mobile-payment-list,
.mobile-payment-history {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mobile-payment-card {
    padding: 13px;
    border: 1px solid #e0ebf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 74, 106, .065);
}

.mobile-payment-card.is-pending {
    border-color: #f0dba7;
    background: linear-gradient(145deg, #fffdf7, #fffaf0);
}

.payment-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.payment-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #0b8fe9;
    background: #eaf6ff;
    display: grid;
    place-items: center;
}

.payment-category-icon svg {
    width: 18px;
    height: 18px;
}

.payment-card-head > div {
    min-width: 0;
}

.payment-card-head small {
    color: #0b8fe9;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.payment-card-head h3 {
    margin: 3px 0 2px;
    color: #17384e;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-card-head p {
    margin: 0;
    color: #8195a5;
    font-size: 7px;
}

.payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    white-space: nowrap;
}

.payment-status.waiting {
    color: #946914;
    background: #fff4d9;
}

.payment-status.approved {
    color: #087551;
    background: #e5f8f0;
}

.payment-status.rejected {
    color: #bc4650;
    background: #fff0f1;
}

.payment-card-meta {
    margin-top: 11px;
    padding: 10px 0;
    border-top: 1px solid #edf2f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.payment-card-meta span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.payment-card-meta span:last-child {
    text-align: right;
}

.payment-card-meta small {
    color: #8195a5;
    font-size: 7px;
}

.payment-card-meta strong {
    color: #31546d;
    font-size: 9px;
}

.payment-confirm-box {
    border-radius: 12px;
    background: #f0f8fe;
    overflow: hidden;
}

.payment-confirm-box > summary {
    min-height: 39px;
    padding: 0 11px;
    color: #0b82cf;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 900;
}

.payment-confirm-box > summary::-webkit-details-marker {
    display: none;
}

.payment-confirm-box form {
    padding: 10px;
    border-top: 1px solid #d8eaf6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-confirm-box label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.payment-confirm-box label span {
    color: #5c7589;
    font-size: 7px;
    font-weight: 800;
}

.payment-confirm-box input {
    width: 100%;
    height: 39px;
    padding: 0 12px;
    border: 1px solid #d8e6ef;
    border-radius: 10px;
    background: #fff;
    outline: none;
    letter-spacing: 5px;
}

.payment-confirm-box button {
    min-height: 39px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0b87d8, #31b1ec);
    font-size: 8px;
    font-weight: 900;
}

.payment-waiting-note {
    padding: 9px 10px;
    border-radius: 10px;
    color: #82621e;
    background: #fff3d7;
    font-size: 7px;
    line-height: 1.5;
}

.mobile-payment-history {
    padding: 3px 12px;
    border: 1px solid #e2ebf2;
    border-radius: 16px;
    background: #fff;
}

.mobile-payment-history > article {
    min-height: 64px;
    padding: 9px 0;
    border-top: 1px solid #edf2f6;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.mobile-payment-history > article:first-child {
    border-top: 0;
}

.payment-history-icon {
    width: 33px;
    height: 33px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
}

.payment-history-icon.waiting {
    color: #946914;
    background: #fff4d9;
}

.payment-history-icon.approved {
    color: #087551;
    background: #e5f8f0;
}

.payment-history-icon.rejected {
    color: #bc4650;
    background: #fff0f1;
}

.mobile-payment-history article > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-payment-history article > div strong {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-payment-history article > div small,
.mobile-payment-history article > div em {
    color: #8195a5;
    font-size: 6.5px;
    font-style: normal;
    line-height: 1.35;
}

.mobile-payment-history article > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.mobile-payment-history article > span:last-child b {
    font-size: 8px;
}

.mobile-payment-empty {
    min-height: 130px;
    padding: 20px;
    border: 1px dashed #cfe1ed;
    border-radius: 16px;
    color: #72899a;
    background: #f9fcfe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.mobile-payment-empty.compact {
    min-height: 95px;
    border: 0;
}

.mobile-payment-empty > span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #0b8fe9;
    background: #eaf6ff;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 900;
}

.mobile-payment-empty strong {
    margin-top: 9px;
    color: #31546d;
    font-size: 9px;
}

.mobile-payment-empty p {
    max-width: 250px;
    margin: 4px 0 0;
    font-size: 7px;
    line-height: 1.5;
}

@media (max-width: 370px) {
    .payment-balance-card {
        grid-template-columns: 1fr;
    }

    .payment-held {
        min-width: 0;
    }
}

/* ===== v10.5 · professional red e-wallet theme for the student APK ===== */
:root {
    --blue: #d32f2f;
    --blue-dark: #b71c1c;
    --blue-soft: #fff0ef;
    --dana-blue: #d32f2f;
    --dana-blue-deep: #b71c1c;
    --dana-cyan: #ff6b57;
    --dana-canvas: #f7f3f3;
    --dana-line: #eee3e3;
    --dana-shadow: 0 12px 34px rgba(105, 30, 30, .10);
}

html,
.mobile-app-body {
    background: #f3eded;
}

.mobile-app-body {
    background: linear-gradient(180deg, #f7e8e8 0, #f7f3f3 34%, #f7f3f3 100%);
}

.mobile-login-screen {
    background: linear-gradient(180deg, #c62828 0, #e3473e 38%, #f7f3f3 38%, #f7f3f3 100%);
}

.mobile-logo,
.pin-brand-mark,
.pin-forgot-link,
.mobile-role-tabs a.active {
    color: #c62828;
}

.pin-dots span.filled {
    background: #d32f2f;
    box-shadow: 0 0 0 5px rgba(211, 47, 47, .09);
}

.mobile-login-form button,
.mobile-form-card button,
.mobile-full-button,
.mobile-action-pair a.primary,
.payment-confirm-box button {
    background: linear-gradient(135deg, #c62828, #ef5350);
    box-shadow: 0 12px 25px rgba(198, 40, 40, .22);
}

.mobile-login-form input:focus,
.mobile-form-card input:focus,
.payment-confirm-box input:focus {
    border-color: #ef9a9a;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .09);
}

.pin-tip,
.mobile-alert.info {
    color: #8f3c3c;
    background: #fff2f1;
    border-color: #f4d9d7;
}

.mobile-topbar,
.dana-wallet-card,
.mobile-page-heading,
.app-balance-card,
.payment-balance-card {
    background:
        radial-gradient(circle at 92% -8%, rgba(255, 255, 255, .22), transparent 34%),
        linear-gradient(118deg, #a91321, #d32f2f 62%, #ff6652);
}

.dana-wallet-card {
    box-shadow: 0 17px 31px rgba(183, 28, 28, .22);
}

.mobile-avatar {
    color: #c62828;
    box-shadow: 0 7px 17px rgba(104, 14, 20, .19);
}

.mobile-info-banner {
    color: #7d2b2b;
    background: linear-gradient(125deg, #fff0ee, #fff9f8);
    border-color: #f4d7d4;
    box-shadow: 0 9px 25px rgba(126, 34, 34, .06);
}

.mobile-info-banner span,
.mobile-info-banner .info-illustration {
    color: #c62828;
    background: rgba(211, 47, 47, .09);
}

.quick-action-grid a:active {
    background: #fff1f0;
}

.quick-icon.blue,
.payment-category-icon,
.profile-photo-heading > span,
.mobile-payment-empty > span {
    color: #c62828;
    background: #fff0ef;
}

.mobile-bottom-nav {
    background:
        radial-gradient(circle at 50% 135%, rgba(255, 255, 255, .19), transparent 42%),
        linear-gradient(112deg, #a91321, #d32f2f 62%, #ef5350);
    box-shadow: 0 -10px 28px rgba(135, 23, 29, .24);
}

.mobile-sync-badge[data-state="ready"],
.mobile-sync-badge[data-state="syncing"] {
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .18);
}

.mobile-sync-badge[data-state="ready"] i {
    background: #b8f5d2;
}

.payment-count-badge,
.payment-status.approved a {
    color: #c62828;
    background: #fff0ef;
}

.profile-photo-picker {
    background: #fffbfa;
    border-color: #f0dfdd;
}

.profile-photo-picker:focus-within {
    border-color: #ef9a9a;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .08);
}

@media (min-width: 620px) {
    .mobile-login-screen {
        background: linear-gradient(135deg, #a91321 0, #e33e38 45%, #f7f3f3 45%, #f7f3f3 100%);
    }
}

/* v10.5.1 · status hasil persetujuan sebelum sinkronisasi halaman */
.mobile-payment-card.is-approved {
    border-color: #a9dfc9;
    background: linear-gradient(145deg, #f5fff9, #ecfaf3);
}

.mobile-payment-card.is-rejected {
    border-color: #f1b9bd;
    background: linear-gradient(145deg, #fff8f8, #fff0f1);
}

/* v10.5.2 · menu pembayaran utama di APK siswa */
.payment-type-section {
    padding: 14px;
    border: 1px solid #eedcda;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(116, 27, 31, .06);
}

.payment-filter-all {
    min-height: 29px;
    padding: 0 11px;
    border: 1px solid #efd4d2;
    border-radius: 999px;
    color: #9b4444;
    background: #fff8f7;
    font-size: 8px;
    font-weight: 900;
}

.payment-filter-all.active {
    color: #fff;
    border-color: #c62828;
    background: #c62828;
}

.payment-type-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.payment-type-option {
    min-width: 0;
    min-height: 91px;
    padding: 9px 5px;
    border: 1px solid #f0e2e0;
    border-radius: 15px;
    color: #263f50;
    background: #fffaf9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.payment-type-option > span {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #c62828;
    background: #fff0ef;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 950;
}

.payment-type-option strong {
    width: 100%;
    margin-top: 7px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-type-option small {
    width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #8d7777;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-type-option small b {
    color: #c62828;
}

.payment-type-option.active {
    border-color: #e08b8b;
    background: #fff0ef;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, .06);
}

.mobile-payment-card[hidden] {
    display: none;
}

/* v10.5.3 · foto profil sederhana dan saldo hanya di beranda */
.simple-profile-card {
    padding-top: 25px;
}

.profile-photo-inline-form {
    margin: 0;
}

.profile-photo-wrap.profile-photo-trigger {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.profile-photo-trigger .mobile-avatar.large {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 0 12px 28px rgba(105, 24, 29, .18);
}

.profile-photo-trigger .profile-photo-badge {
    right: -1px;
    bottom: 1px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: #c62828;
    border: 3px solid #fff;
}

.profile-photo-trigger input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.profile-photo-upload-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.profile-photo-inline-form.is-loading .profile-photo-badge {
    opacity: .72;
    animation: profileCameraPulse .8s ease-in-out infinite alternate;
}

@keyframes profileCameraPulse {
    to { transform: scale(.88); }
}

.payment-process-note {
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid #f0dcda;
    border-radius: 17px;
    background: #fff8f7;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.payment-process-note > span {
    width: 35px;
    height: 35px;
    border-radius: 11px;
    color: #c62828;
    background: #fff0ef;
    display: grid;
    place-items: center;
}

.payment-process-note > span svg {
    width: 18px;
    height: 18px;
}

.payment-process-note > div {
    min-width: 0;
}

.payment-process-note strong {
    display: block;
    color: #533333;
    font-size: 9px;
}

.payment-process-note p {
    margin: 4px 0 0;
    color: #8b7474;
    font-size: 7px;
    line-height: 1.45;
}

.payment-process-note > b {
    color: #a44c4c;
    font-size: 7px;
    white-space: nowrap;
}

.payment-process-note > b em {
    font-style: normal;
}

/* v10.5.4 · pembayaran nominal langsung dan persetujuan admin */
.payment-request-section {
    padding: 15px;
    border: 1px solid #edcfcc;
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(211, 47, 47, .09), transparent 34%),
        #fff;
    box-shadow: 0 12px 29px rgba(104, 22, 27, .09);
    scroll-margin-top: 78px;
}

.payment-request-section[hidden] {
    display: none;
}

.payment-request-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2e3e1;
}

.payment-request-heading > span {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #b71c1c, #ef5350);
    box-shadow: 0 9px 19px rgba(183, 28, 28, .2);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 950;
}

.payment-request-heading > div {
    min-width: 0;
}

.payment-request-heading small {
    color: #b44c4c;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.payment-request-heading h2 {
    margin: 3px 0;
    color: #4f2e2e;
    font-size: 14px;
}

.payment-request-heading p {
    margin: 0;
    color: #8a7373;
    font-size: 7px;
    line-height: 1.45;
}

.mobile-payment-request-form {
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.mobile-payment-request-form > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-payment-request-form > label > span {
    color: #624848;
    font-size: 8px;
    font-weight: 900;
}

.mobile-payment-request-form > label > small {
    color: #9a8383;
    font-size: 6.5px;
    line-height: 1.4;
}

.mobile-money-input {
    height: 48px;
    padding: 0 13px;
    border: 1px solid #e5d5d3;
    border-radius: 13px;
    background: #fffafa;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.mobile-money-input:focus-within {
    border-color: #e78f8f;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .08);
}

.mobile-money-input b {
    color: #c62828;
    font-size: 11px;
}

.mobile-money-input input,
.mobile-payment-request-form > label > input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 1px solid #e5d5d3;
    border-radius: 13px;
    color: #3d2929;
    background: #fffafa;
    outline: none;
    font-size: 12px;
    font-weight: 850;
}

.mobile-money-input input {
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 17px;
}

.mobile-money-input input:focus {
    box-shadow: none;
}

.mobile-payment-request-form > label > input:focus {
    border-color: #e78f8f;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .08);
}

.mobile-payment-request-form input[name="payment_pin"] {
    letter-spacing: 6px;
}

.mobile-payment-request-form > button {
    min-height: 47px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #b71c1c, #ef5350);
    box-shadow: 0 11px 23px rgba(183, 28, 28, .2);
    font-size: 9px;
    font-weight: 950;
}

.mobile-payment-request-form > button[disabled] {
    cursor: wait;
    opacity: .68;
}

.payment-admin-flow {
    margin: -2px 0 0;
    color: #876e6e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 7px;
}

.payment-admin-flow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f1ad35;
    box-shadow: 0 0 0 3px rgba(241, 173, 53, .13);
}

/* v10.5.5 · riwayat terpisah dan foto profil kotak */
.tx-icon.payment {
    color: #a45b00;
    background: #fff3dc;
    font-size: 9px;
}

.separated-history-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.separated-history-summary span {
    min-width: 0;
    padding: 12px 10px;
}

.separated-history-summary strong {
    overflow-wrap: anywhere;
}

.separated-history-summary span:nth-child(2) strong {
    color: #d14955;
}

.separated-history-summary span:nth-child(3) strong {
    color: #a45b00;
}

.transaction-history-filter {
    margin: 0 0 12px;
    padding: 5px;
    border: 1px solid #eedfdd;
    border-radius: 15px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    box-shadow: 0 7px 20px rgba(116, 27, 31, .05);
}

.transaction-history-filter button {
    min-width: 0;
    min-height: 34px;
    padding: 0 5px;
    border: 0;
    border-radius: 11px;
    color: #887171;
    background: transparent;
    font-size: 7px;
    font-weight: 900;
}

.transaction-history-filter button.active {
    color: #fff;
    background: linear-gradient(135deg, #b71c1c, #ef5350);
    box-shadow: 0 6px 14px rgba(183, 28, 28, .18);
}

.transaction-period-filter {
    margin: -2px 0 8px;
    padding: 8px;
    border: 1px solid #eadfdd;
    border-radius: 13px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    align-items: end;
}

.transaction-period-filter label {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.transaction-period-filter label span {
    color: #927d7d;
    font-size: 6px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.transaction-period-filter select,
.transaction-period-filter button {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid #ead8d6;
    border-radius: 9px;
    background: #fffafa;
    color: #624f4f;
    padding: 0 6px;
    font-size: 7px;
    font-weight: 800;
}

.transaction-period-filter button {
    width: auto;
    min-width: 48px;
    cursor: pointer;
    background: #f7eeee;
}

.history-period-meta {
    margin: 0 2px 8px;
    color: #9b8585;
    font-size: 7px;
    line-height: 1.4;
}

.separated-history-summary span {
    padding: 9px 8px;
}

.separated-history-summary small {
    font-size: 6px;
}

.separated-history-summary strong {
    font-size: 9px;
}

@media (max-width: 390px) {
    .transaction-period-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .transaction-period-filter button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.mobile-transaction-item[hidden] {
    display: none;
}

.history-filter-empty {
    min-height: 84px;
    padding: 20px;
    border: 1px dashed #ead8d6;
    border-radius: 18px;
    color: #927d7d;
    background: #fffafa;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 8px;
}

.history-filter-empty[hidden] {
    display: none;
}

.student-mode .mobile-avatar {
    border-radius: 11px;
}

.student-mode .mobile-avatar img {
    border-radius: inherit;
}

.profile-photo-wrap.profile-photo-trigger {
    width: 108px;
    height: 108px;
}

.profile-photo-trigger .mobile-avatar.large {
    width: 104px;
    height: 104px;
    border-radius: 18px;
}

@media (max-width: 390px) {
    .separated-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .separated-history-summary span:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 350px) {
    .transaction-history-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v10.5.6 · identitas pendaftaran siswa */
.mobile-login-form select {
    width: 100%;
    height: 49px;
    padding: 0 38px 0 13px;
    border: 1px solid #dce8f0;
    border-radius: 14px;
    color: var(--ink);
    background:
        linear-gradient(45deg, transparent 50%, #9b7474 50%) calc(100% - 17px) 21px / 5px 5px no-repeat,
        linear-gradient(135deg, #9b7474 50%, transparent 50%) calc(100% - 12px) 21px / 5px 5px no-repeat,
        #fff;
    appearance: none;
    outline: none;
}

.mobile-login-form select:focus {
    border-color: #ef9a9a;
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .09);
}

.mobile-registration-row {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 10px;
}

.registration-catalog-warning {
    padding: 11px 12px;
    border: 1px solid #f3d0ce;
    border-radius: 12px;
    color: #9c3f3f;
    background: #fff3f2;
    font-size: 8px;
    line-height: 1.5;
}

.mobile-login-form button[disabled] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

@media (max-width: 390px) {
    .mobile-registration-row {
        grid-template-columns: 1fr;
    }
}

/* v10.5.7 · registrasi foto, huruf kapital, dan kartu tagihan berwarna */
.student-only-apk,
.student-only-apk input,
.student-only-apk select,
.student-only-apk textarea,
.student-only-apk button {
    text-transform: uppercase;
}

.student-only-apk input::placeholder,
.student-only-apk textarea::placeholder {
    text-transform: uppercase;
}

.registration-photo-field {
    min-width: 0;
}

.registration-photo-picker {
    min-height: 88px;
    padding: 11px;
    border: 1px dashed #dc8c8c;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff5f4, #fffdfd);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.registration-photo-picker:focus-within {
    border-color: #c62828;
    box-shadow: 0 0 0 4px rgba(198, 40, 40, .08);
}

.registration-photo-preview {
    width: 62px;
    height: 62px;
    border-radius: 13px;
    color: #fff !important;
    background: linear-gradient(145deg, #b71c1c, #ef5350);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 9px 20px rgba(183, 28, 28, .2);
}

.registration-photo-preview svg {
    width: 25px;
    height: 25px;
}

.registration-photo-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.registration-photo-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.registration-photo-copy b {
    color: #5c3333;
    font-size: 11px;
}

.registration-photo-copy small {
    color: #987878;
    font-size: 7.5px;
    line-height: 1.45;
    word-break: break-word;
}

.registration-photo-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.registration-upload-feedback {
    padding: 10px 11px;
    border-radius: 12px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.45;
}

.registration-upload-feedback:empty {
    display: none;
}

.registration-upload-feedback.info {
    color: #246b98;
    background: #edf8ff;
}

.registration-upload-feedback.success {
    color: #167654;
    background: #eaf9f2;
}

.registration-upload-feedback.error {
    color: #b2333d;
    background: #fff0f1;
}

.mobile-login-form.is-loading {
    pointer-events: none;
    opacity: .86;
}

.payment-type-option {
    --type-accent: #c62828;
    --type-soft: #fff0ef;
    min-height: 108px;
    padding: 12px 7px;
    border-color: color-mix(in srgb, var(--type-accent) 24%, white);
    background: linear-gradient(145deg, #fff, var(--type-soft));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--type-accent) 9%, transparent);
}

.payment-type-option[data-payment-filter="SPP"] {
    --type-accent: #d32f2f;
    --type-soft: #fff1f0;
}

.payment-type-option[data-payment-filter="UANG_PANGKAL"] {
    --type-accent: #7b4fd0;
    --type-soft: #f3edff;
}

.payment-type-option[data-payment-filter="DAFTAR_ULANG"] {
    --type-accent: #1976d2;
    --type-soft: #eaf4ff;
}

.payment-type-option[data-payment-filter="SERAGAM"] {
    --type-accent: #ef7d22;
    --type-soft: #fff2e7;
}

.payment-type-option[data-payment-filter="KEGIATAN"] {
    --type-accent: #15956c;
    --type-soft: #e8f8f2;
}

.payment-type-option[data-payment-filter="LAINNYA"] {
    --type-accent: #008b9a;
    --type-soft: #e8f8fa;
}

.payment-type-option > span {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    color: #fff;
    background: var(--type-accent);
    font-size: 10px;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--type-accent) 24%, transparent);
}

.payment-type-option strong {
    margin-top: 9px;
    color: #273f50;
    font-size: 10px;
}

.payment-type-option small {
    margin-top: 4px;
    color: #6f8190;
    font-size: 7.5px;
}

.payment-type-option.active {
    border-color: var(--type-accent);
    background: var(--type-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--type-accent) 12%, transparent);
}

.mobile-payment-card {
    --bill-accent: #008b9a;
    --bill-soft: #edfafa;
    position: relative;
    padding: 17px 15px 15px 18px;
    border-color: color-mix(in srgb, var(--bill-accent) 28%, white);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--bill-accent) 12%, transparent), transparent 42%),
        linear-gradient(145deg, #fff, var(--bill-soft));
    box-shadow: 0 9px 22px color-mix(in srgb, var(--bill-accent) 10%, transparent);
    overflow: hidden;
}

.mobile-payment-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bill-accent);
}

.mobile-payment-card[data-payment-type="SPP"] {
    --bill-accent: #d32f2f;
    --bill-soft: #fff2f1;
}

.mobile-payment-card[data-payment-type="UANG_PANGKAL"] {
    --bill-accent: #7b4fd0;
    --bill-soft: #f4efff;
}

.mobile-payment-card[data-payment-type="DAFTAR_ULANG"] {
    --bill-accent: #1976d2;
    --bill-soft: #edf6ff;
}

.mobile-payment-card[data-payment-type="SERAGAM"] {
    --bill-accent: #ef7d22;
    --bill-soft: #fff4ea;
}

.mobile-payment-card[data-payment-type="KEGIATAN"] {
    --bill-accent: #15956c;
    --bill-soft: #ebf9f4;
}

.mobile-payment-card[data-payment-type="LAINNYA"] {
    --bill-accent: #008b9a;
    --bill-soft: #ebf9fa;
}

.mobile-payment-card .payment-card-head {
    gap: 12px;
}

.mobile-payment-card .payment-category-icon {
    width: 47px;
    height: 47px;
    border-radius: 14px;
    color: #fff;
    background: var(--bill-accent);
    box-shadow: 0 8px 17px color-mix(in srgb, var(--bill-accent) 23%, transparent);
}

.mobile-payment-card .payment-category-icon svg {
    width: 22px;
    height: 22px;
}

.mobile-payment-card .payment-card-head small {
    color: var(--bill-accent);
    font-size: 9px;
}

.mobile-payment-card .payment-card-head h3 {
    margin: 4px 0 3px;
    font-size: 15px;
}

.mobile-payment-card .payment-card-head p {
    font-size: 9px;
    font-weight: 750;
}

.mobile-payment-card .payment-status {
    min-height: 27px;
    padding: 0 9px;
    font-size: 8px;
}

.mobile-payment-card .payment-card-meta {
    margin-top: 14px;
    padding: 13px 0 12px;
    border-color: color-mix(in srgb, var(--bill-accent) 17%, white);
}

.mobile-payment-card .payment-card-meta small {
    font-size: 8px;
}

.mobile-payment-card .payment-card-meta strong {
    color: #263f50;
    font-size: 13px;
}

.mobile-payment-card .payment-confirm-box > summary {
    min-height: 45px;
    color: var(--bill-accent);
    background: color-mix(in srgb, var(--bill-accent) 8%, white);
    font-size: 10px;
}

.mobile-payment-card .payment-waiting-note {
    padding: 11px 12px;
    font-size: 8.5px;
}

@media (max-width: 365px) {
    .payment-type-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-payment-card .payment-card-head h3 {
        font-size: 13px;
    }
}

/* v10.5.7 · permintaan tarik tunai siswa */
.student-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cash-withdrawal-link {
    background: linear-gradient(135deg, #e96b22, #f49a38);
    box-shadow: 0 12px 25px rgba(233, 107, 34, .2);
}

.cash-withdrawal-summary article {
    background: linear-gradient(145deg, #fff, #fff9f3);
    border-color: #f1dfd0;
}

.cash-withdrawal-card {
    padding: 17px;
    border: 1px solid #efd4bf;
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0, rgba(239, 125, 34, .12), transparent 38%),
        #fff;
    box-shadow: 0 13px 30px rgba(145, 70, 20, .09);
}

.cash-withdrawal-card-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #f2e3d7;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.cash-withdrawal-card-head > span {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #e96b22, #f6a546);
    box-shadow: 0 9px 19px rgba(233, 107, 34, .22);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 950;
}

.cash-withdrawal-card-head small {
    color: #cf641f;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .6px;
}

.cash-withdrawal-card-head h2 {
    margin: 3px 0;
    color: #523829;
    font-size: 16px;
}

.cash-withdrawal-card-head p {
    margin: 0;
    color: #8e796c;
    font-size: 8px;
}

.cash-withdrawal-form {
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cash-withdrawal-form > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cash-withdrawal-form > label > span {
    color: #654b3b;
    font-size: 9px;
    font-weight: 900;
}

.cash-withdrawal-form > label > small {
    color: #9a8679;
    font-size: 7px;
    line-height: 1.45;
}

.cash-withdrawal-form textarea,
.cash-withdrawal-form > label > input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #ead8ca;
    border-radius: 13px;
    color: #402f25;
    background: #fffaf6;
    outline: 0;
    font-size: 11px;
    font-weight: 750;
}

.cash-withdrawal-form > label > input {
    height: 48px;
}

.cash-withdrawal-form textarea {
    resize: vertical;
}

.cash-withdrawal-form textarea:focus,
.cash-withdrawal-form > label > input:focus {
    border-color: #ee9b62;
    box-shadow: 0 0 0 4px rgba(239, 125, 34, .09);
}

.cash-withdrawal-form > button {
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #df6017, #f39a3d);
    box-shadow: 0 11px 23px rgba(223, 96, 23, .21);
    font-size: 10px;
    font-weight: 950;
}

.cash-withdrawal-form > p {
    margin: 0;
    color: #8b7466;
    font-size: 7.5px;
    line-height: 1.5;
    text-align: center;
}

.cash-withdrawal-form > p i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 50%;
    background: #ef7d22;
}

.cash-withdrawal-history article {
    border-color: #f0e0d4;
}

@media (max-width: 390px) {
    .student-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-actions a:last-child {
        grid-column: 1 / -1;
    }
}

/* v10.5.11 · tarik layar untuk refresh */
.mobile-app-body {
    overscroll-behavior-y: contain;
}

.pull-refresh-indicator {
    --pull-distance: 0px;
    position: fixed;
    z-index: 90;
    left: 50%;
    top: calc(8px + env(safe-area-inset-top));
    width: max-content;
    max-width: calc(100vw - 30px);
    min-height: 44px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgba(215, 226, 234, .94);
    border-radius: 999px;
    color: #516f84;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 13px 31px rgba(34, 75, 105, .16);
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-70px + var(--pull-distance)));
    transition: transform .22s ease, opacity .18s ease;
}

.pull-refresh-indicator > span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #c62828, #ef5350);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 950;
}

.pull-refresh-indicator > b {
    font-size: 9px;
    white-space: nowrap;
}

.mobile-app-body.is-pulling .pull-refresh-indicator,
.mobile-app-body.is-refreshing .pull-refresh-indicator {
    opacity: 1;
    transition: none;
}

.mobile-app-body.is-pull-ready .pull-refresh-indicator {
    color: #a91f28;
    border-color: #f1c7ca;
}

.mobile-app-body.is-refreshing .pull-refresh-indicator {
    opacity: 1;
}

.mobile-app-body.is-refreshing .pull-refresh-indicator > span {
    animation: pull-refresh-spin .7s linear infinite;
}

@keyframes pull-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

/* v10.5.12 · progres pembayaran dan cicilan siswa */
.payment-type-option {
    min-height: 178px;
    justify-content: flex-start;
}

.payment-type-option > .payment-type-recap {
    width: 100%;
    height: auto;
    margin-top: 8px;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
}

.payment-type-recap > em {
    align-self: center;
    padding: 4px 7px;
    border-radius: 999px;
    color: #8b641a;
    background: #fff3cf;
    font-size: 6.5px;
    font-style: normal;
    font-weight: 950;
}

.payment-type-recap > em.paid {
    color: #08724f;
    background: #def6eb;
}

.payment-type-recap > em.installment {
    color: #176fa7;
    background: #e5f4ff;
}

.payment-type-recap > em.unpaid {
    color: #a8464e;
    background: #fff0f1;
}

.payment-type-recap > em.flexible {
    color: #647a8a;
    background: #edf2f5;
}

.payment-type-recap > i {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--type-accent) 13%, white);
    overflow: hidden;
}

.payment-type-recap > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--type-accent);
}

.payment-type-option .payment-type-recap > small {
    margin-top: 0;
    color: #6e8190;
    font-size: 6.5px;
    line-height: 1.4;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.payment-type-option[disabled] {
    cursor: default;
    opacity: .78;
}

.payment-type-option.recap-paid {
    border-color: #9bd9c1;
    background: linear-gradient(145deg, #fff, #ecfaf4);
}

.payment-type-option.recap-pending {
    border-style: dashed;
}

/* v10.5.20 · huruf APK diperbesar dan semua isian teks tampil kapital */
.student-only-apk,
.student-only-apk input,
.student-only-apk textarea,
.student-only-apk select,
.student-only-apk button{
    text-transform:uppercase;
}
.student-only-apk .mobile-login-hero p{font-size:14px}
.student-only-apk .mobile-login-hero h1{font-size:32px}
.student-only-apk .mobile-role-tabs a{font-size:15px}
.student-only-apk .mobile-login-card h2{font-size:25px}
.student-only-apk .mobile-login-card>p{font-size:14px}
.student-only-apk .mobile-login-form label span{font-size:13px}
.student-only-apk .mobile-login-form input,
.student-only-apk .mobile-login-form select,
.student-only-apk .mobile-login-form textarea{min-height:52px;font-size:16px}
.student-only-apk .mobile-login-form button{font-size:14px}
.student-only-apk .pin-tip{font-size:12px}
.student-only-apk .mobile-login-foot{font-size:11px}
.student-only-apk .registration-photo-copy b{font-size:13px}
.student-only-apk .registration-photo-copy small{font-size:10px}
.student-only-apk .registration-catalog-warning,
.student-only-apk .registration-upload-feedback{font-size:11px}
.student-only-apk .remembered-student-card small{font-size:10px}
.student-only-apk .remembered-student-card strong{font-size:16px}
.student-only-apk .remembered-student-card b{font-size:12px}
.student-only-apk .mobile-switch-account button{font-size:12px}
.student-only-apk .pin-account-name strong{font-size:15px}
.student-only-apk .pin-account-name small{font-size:11px}
.student-only-apk .pin-school-name{font-size:11px}

/* v10.5.23 · kamera langsung dan galeri terpisah */
.registration-photo-field{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.registration-photo-label{
    color:#243746;
    font-size:13px;
    font-weight:850;
}
.registration-photo-label b{color:#c62828}
.registration-photo-picker{cursor:default}
.mobile-login-form .registration-photo-preview{
    width:62px;
    min-width:62px;
    height:62px;
    min-height:62px;
    margin:0;
    padding:0;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,#b71c1c,#ef5350);
    box-shadow:0 9px 20px rgba(183,28,28,.2);
}
.registration-photo-picker input[type="file"][hidden]{display:none!important}
.registration-photo-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.mobile-login-form .registration-photo-actions button{
    width:100%;
    min-height:64px;
    margin:0;
    padding:9px 10px;
    border:1px solid #efc9cc;
    border-radius:14px;
    color:#a51f31;
    background:linear-gradient(145deg,#fff,#fff3f4);
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
}
.registration-photo-actions button:first-child{
    color:#fff;
    border-color:#c91f35;
    background:linear-gradient(135deg,#b9142d,#ec4c50);
    box-shadow:0 8px 18px rgba(184,20,43,.18);
}
.registration-photo-actions b{font-size:13px}
.registration-photo-actions small{font-size:9px;font-weight:750;opacity:.78}
.registration-photo-native-input{
    position:fixed!important;
    left:-10000px!important;
    top:0!important;
    width:1px!important;
    height:1px!important;
    min-height:1px!important;
    padding:0!important;
    border:0!important;
    opacity:.01!important;
    pointer-events:none!important;
}
.pin-reset-request-form[hidden]{display:none!important}.pin-reset-request-form.is-open{display:block!important;animation:pinResetOpen .2s ease}@keyframes pinResetOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* v10.5.35 · register ringkas dan notifikasi lupa PIN berbentuk popup */
.student-only-apk .mobile-login-card:has([data-student-registration-form]){
    padding:18px;
    border-radius:22px;
}
.student-only-apk .mobile-login-card:has([data-student-registration-form])>p{
    margin-bottom:14px;
    font-size:12px;
    line-height:1.45;
}
.student-only-apk [data-student-registration-form]{gap:10px}
.student-only-apk [data-student-registration-form] label{gap:5px}
.student-only-apk [data-student-registration-form] input,
.student-only-apk [data-student-registration-form] select{
    min-height:46px;
    height:46px;
    border-radius:12px;
    color:#111;
    background:#fff;
}
.student-only-apk [data-student-registration-form] .registration-photo-actions button{min-height:54px}
.student-only-apk [data-student-registration-form] .pin-tip{padding:9px 10px}
.student-message-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:22px;
    background:rgba(10,20,30,.52);
    backdrop-filter:blur(3px);
}
.student-message-card{
    width:min(360px,100%);
    padding:25px 21px 21px;
    border-radius:22px;
    color:#111;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
    text-align:center;
}
.student-message-icon{
    width:54px;
    height:54px;
    margin:0 auto 12px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:#149d6f;
    font-size:27px;
    font-weight:900;
}
.student-message-card small{color:#137b59;font-size:11px;font-weight:900;letter-spacing:.5px}
.student-message-card h2{margin:7px 0 8px;color:#111;font-size:22px}
.student-message-card p{margin:0;color:#222;font-size:15px;font-weight:650;line-height:1.55;text-transform:none}
.student-message-card button{
    width:100%;
    min-height:48px;
    margin-top:19px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:#c62828;
    font-weight:900;
}

/* v10.5.36 · autentikasi siswa simpel seperti e-wallet */
.student-only-apk .mobile-login-screen{
    min-height:100vh;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:linear-gradient(180deg,#c91f35 0,#ef4949 185px,#f5f5f7 185px,#f5f5f7 100%);
}
.student-only-apk .mobile-login-hero{display:none}
.student-only-apk .mobile-login-card{
    width:min(100%,440px);
    max-width:440px;
    margin:24px auto 0;
    padding:22px 20px 24px;
    border:0;
    border-radius:26px;
    color:#111;
    background:#fff;
    box-shadow:0 22px 55px rgba(46,21,25,.17);
}
.student-only-apk .mobile-role-tabs{
    height:50px;
    margin-bottom:22px;
    padding:4px;
    border-radius:15px;
    background:#f1f3f5;
}
.student-only-apk .mobile-role-tabs a{color:#68737c;font-size:14px;font-weight:850}
.student-only-apk .mobile-role-tabs a.active{color:#bd1f31;background:#fff;box-shadow:0 5px 14px rgba(30,30,30,.08)}
.student-only-apk .mobile-login-card h2{margin:0;color:#111;font-size:25px;line-height:1.2;text-transform:none}
.student-only-apk .mobile-login-card>p{margin:7px 0 18px;color:#555;font-size:13px;line-height:1.5;text-transform:none}
.student-only-apk .mobile-login-form{gap:12px}
.student-only-apk .mobile-login-form label{gap:6px}
.student-only-apk .mobile-login-form label span,
.student-only-apk .registration-photo-label{color:#111;font-size:12px;font-weight:800;text-transform:none}
.student-only-apk .mobile-login-form input,
.student-only-apk .mobile-login-form select{
    width:100%;
    min-height:50px;
    height:50px;
    padding:0 14px;
    border:1px solid #d8dce1;
    border-radius:13px;
    color:#111;
    background:#fff;
    font-size:15px;
    text-transform:none;
}
.student-only-apk .mobile-login-form input:focus,
.student-only-apk .mobile-login-form select:focus{border-color:#cf2738;box-shadow:0 0 0 4px rgba(207,39,56,.08)}
.student-only-apk .mobile-login-form button[type="submit"]{
    min-height:51px;
    height:51px;
    margin-top:3px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,#c91f35,#ef4949);
    box-shadow:0 11px 23px rgba(198,31,50,.2);
    font-size:14px;
    font-weight:900;
    text-transform:none;
}
.student-only-apk .mobile-login-foot{margin-top:17px;color:#777;font-size:11px;text-transform:none}
.student-only-apk .pin-tip{padding:10px 11px;color:#67444a;background:#fff1f2;font-size:11px;text-transform:none}
.student-only-apk .registration-photo-picker{border-color:#dedfe2;background:#fafafa}
.student-only-apk .registration-photo-actions{grid-template-columns:1fr 1fr}
.student-only-apk .registration-photo-actions button{min-height:54px!important;border-radius:12px!important;text-transform:none}
.student-only-apk .mobile-alert{font-size:12px;text-transform:none}
.student-only-apk .pin-forgot-link{color:#a91e30!important;background:transparent!important;box-shadow:none!important;text-transform:none!important}

/* Lupa PIN selalu menjadi modal; tidak lagi tampil mentah di bawah form. */
.student-only-apk .pin-reset-request-form{
    position:fixed;
    inset:0;
    z-index:1200;
    padding:22px;
    display:none!important;
    place-items:center;
    background:rgba(15,18,22,.58);
    backdrop-filter:blur(4px);
}
.student-only-apk .pin-reset-request-form.is-open{display:grid!important;animation:pinResetOpen .18s ease}
.student-only-apk .pin-reset-request-form:before{
    content:"Lupa PIN?";
    position:absolute;
    width:min(calc(100% - 44px),360px);
    transform:translateY(-66px);
    color:#111;
    font-size:21px;
    font-weight:900;
    text-align:center;
    pointer-events:none;
    z-index:1;
}
.student-only-apk .pin-reset-request-form>p,
.student-only-apk .pin-reset-request-form>button{position:relative;width:min(100%,360px);z-index:0}
.student-only-apk .pin-reset-request-form>p{
    margin:0;
    padding:72px 22px 76px;
    border-radius:22px;
    color:#444;
    background:#fff;
    box-shadow:0 25px 65px rgba(0,0,0,.25);
    text-align:center;
    font-size:13px;
    line-height:1.55;
    text-transform:none;
}
.student-only-apk .pin-reset-request-form>button{
    min-height:48px;
    margin-top:-63px;
    padding:0 18px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#c91f35,#ef4949);
    font-size:14px;
    font-weight:900;
    text-transform:none;
}
@media(max-width:390px){
    .student-only-apk .mobile-login-card{margin-top:10px;padding:19px 16px 22px;border-radius:22px}
    .student-only-apk .mobile-login-card h2{font-size:22px}
    .student-only-apk .mobile-registration-row{grid-template-columns:1fr 1fr}
}

/* v10.5.39 · card register kecil, padat, dan tidak polos */
.student-only-apk.student-register-page .mobile-login-screen{
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#fff3f5 0,#f7f9ff 48%,#eef3fb 100%);
}
.student-register-page .student-register-back{
    top:0;width:34px;height:34px;border-radius:10px;background:#fff;color:#bd1730;
    box-shadow:0 4px 12px rgba(87,24,39,.10);font-size:27px
}
.student-register-page .student-register-heading{padding:22px 0 8px}
.student-register-page .student-register-mark{
    width:40px;height:40px;margin-bottom:5px;background:linear-gradient(145deg,#ef3149,#b90e2b);
    box-shadow:0 6px 14px rgba(193,19,47,.22)
}
.student-register-page .student-register-mark span{width:25px;height:21px;border-width:2px;border-radius:5px;font-size:9px}
.student-register-page .student-register-heading h1{font-size:18px;letter-spacing:-.2px}
.student-register-page .student-register-heading p{margin-top:1px;color:#596173;font-size:9px}
.student-register-page [data-student-registration-form]{
    gap:5px!important;padding:8px!important;border:1px solid #eadde1;border-radius:13px;
    background:linear-gradient(150deg,#fff 0,#fff8f9 100%);box-shadow:0 7px 18px rgba(43,56,85,.10)
}
.student-register-page [data-student-registration-form] label{gap:2px!important}
.student-register-page [data-student-registration-form] label span,
.student-register-page .registration-photo-label{color:#2b3140!important;font-size:8px!important;letter-spacing:.15px}
.student-register-page [data-student-registration-form] input,
.student-register-page [data-student-registration-form] select{
    height:35px!important;min-height:35px!important;padding:0 8px!important;border:1px solid #d7ddea!important;
    border-radius:8px!important;color:#171b24!important;background:#f3f6fc!important;font-size:11px!important
}
.student-register-page [data-student-registration-form] input:focus,
.student-register-page [data-student-registration-form] select:focus{
    border-color:#dc3850!important;background:#fff!important;box-shadow:0 0 0 2px rgba(220,56,80,.10)!important
}
.student-register-page .mobile-registration-row{gap:5px}
.student-register-page .registration-photo-field{gap:2px}
.student-register-page .registration-photo-picker{
    min-height:38px;padding:3px 6px;border:1px dashed #e08a98;border-radius:8px;background:#fff0f3
}
.student-register-page .registration-photo-preview{
    width:31px;height:31px;min-width:31px;border-radius:8px;color:#fff;background:linear-gradient(145deg,#ed3b53,#b90e2b)
}
.student-register-page .registration-photo-preview svg{width:16px;height:16px}
.student-register-page .registration-photo-copy b{color:#2a2f3b;font-size:9px}
.student-register-page .registration-photo-copy small{color:#7b5260;font-size:7px}
.student-register-page .registration-upload-feedback{min-height:0;margin:0;font-size:7px}
.student-register-page .registration-upload-feedback:empty{display:none}
.student-register-page .pin-tip{
    margin:0;padding:4px 6px;border-radius:7px;color:#69525a;background:#fff1d9;font-size:7px;line-height:1.2
}
.student-register-page [data-student-registration-form]>button[type="submit"]{
    height:39px!important;min-height:39px!important;margin:2px 0 0!important;transform:none!important;border-radius:9px!important;
    background:linear-gradient(135deg,#e7334d,#b80e2b)!important;font-size:12px!important;
    box-shadow:0 7px 14px rgba(186,14,43,.18)!important
}
.student-register-page .student-register-login{margin:7px 0 0;font-size:10px}
@media(max-height:680px){
    .student-register-page .student-register-heading{padding-top:16px}
    .student-register-page .student-register-heading p,.student-register-page .pin-tip{display:none}
    .student-register-page [data-student-registration-form]{gap:4px!important}
    .student-register-page [data-student-registration-form] input,
    .student-register-page [data-student-registration-form] select{height:32px!important;min-height:32px!important}
}

/* v10.5.38 · register satu layar dan satu ikon pemilih foto */
.student-register-page .student-register-heading{padding:36px 0 12px}
.student-register-page .student-register-mark{
    width:54px;height:54px;margin-bottom:8px;box-shadow:0 7px 16px rgba(225,0,10,.18)
}
.student-register-page .student-register-mark span{width:34px;height:29px;border-width:3px;font-size:12px}
.student-register-page .student-register-heading h1{font-size:22px;letter-spacing:-.3px}
.student-register-page .student-register-heading p{margin-top:3px;font-size:11px}
.student-register-page [data-student-registration-form]{gap:7px!important;padding:12px;border-radius:16px}
.student-register-page [data-student-registration-form] label{gap:3px!important;min-width:0}
.student-register-page [data-student-registration-form] label span,
.student-register-page .registration-photo-label{font-size:9px!important;letter-spacing:.2px}
.student-register-page [data-student-registration-form] input,
.student-register-page [data-student-registration-form] select{
    height:42px!important;min-height:42px!important;padding:0 10px!important;border-radius:9px!important;font-size:13px!important
}
.student-register-page .mobile-registration-row{gap:7px}
.student-register-page .registration-photo-field{gap:3px}
.student-register-page .registration-photo-picker{
    min-height:48px;padding:5px 8px;border-radius:9px;cursor:pointer
}
.student-register-page .registration-photo-preview{width:38px;height:38px;min-width:38px;border-radius:9px}
.student-register-page .registration-photo-copy b{font-size:11px}
.student-register-page .registration-photo-copy small{font-size:9px}
.student-register-page .registration-upload-feedback{min-height:0;margin:0;font-size:9px}
.student-register-page .registration-upload-feedback:empty{display:none}
.student-register-page .pin-tip{margin:0;padding:6px 8px;font-size:8px;line-height:1.25}
.student-register-page [data-student-registration-form]>button[type="submit"]{
    height:48px!important;min-height:48px!important;margin:3px -12px -72px!important;transform:translateY(82px);border-radius:11px!important;font-size:14px!important
}
.student-register-page .student-register-login{margin-top:84px;font-size:12px}
.registration-photo-source-sheet[hidden]{display:none!important}
.registration-photo-source-sheet{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.registration-photo-sheet-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.45)}
.student-register-page .registration-photo-source-sheet .registration-photo-actions{
    position:relative;z-index:1;width:min(100%,520px);display:grid;grid-template-columns:1fr 1fr;gap:9px;
    padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:#fff
}
.student-register-page .registration-photo-source-sheet .registration-photo-actions strong{
    grid-column:1/-1;color:#111;font-size:16px;text-align:center
}
.student-register-page .registration-photo-source-sheet .registration-photo-actions button{
    min-height:52px!important;border:1px solid #ddd;border-radius:12px;color:#111;background:#fff;font-size:13px
}
.student-register-page .registration-photo-source-sheet .registration-photo-actions .registration-photo-cancel{
    grid-column:1/-1;min-height:42px!important;color:#d90012;background:#fff5f6
}
.registration-photo-sheet-open{overflow:hidden}
@media(max-height:720px){
    .student-register-page .student-register-heading{padding-top:25px}
    .student-register-page .student-register-heading p{display:none}
    .student-register-page [data-student-registration-form]{gap:5px}
    .student-register-page [data-student-registration-form] input,
    .student-register-page [data-student-registration-form] select{height:39px!important;min-height:39px!important}
    .student-register-page .pin-tip{display:none}
}

/* v10.5.37 · halaman daftar akun mengikuti mockup merah-putih */
.student-only-apk.student-register-page .mobile-login-screen{
    display:block;
    min-height:100vh;
    padding:calc(22px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
    background:#fff;
}
.student-only-apk.student-register-page .mobile-login-card{
    position:relative;
    width:min(100%,520px);
    max-width:520px;
    margin:0 auto;
    padding:0;
    border-radius:0;
    box-shadow:none;
    background:#fff;
}
.student-register-back{
    position:absolute;
    left:0;
    top:2px;
    z-index:2;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    color:#111;
    font-size:38px;
    font-weight:400;
    line-height:1;
    text-transform:none;
}
.student-register-heading{
    padding:54px 0 22px;
    text-align:center;
    color:#111;
}
.student-register-mark{
    width:84px;
    height:84px;
    margin:0 auto 20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#f20b16,#c60000);
    box-shadow:0 12px 27px rgba(225,0,10,.22);
}
.student-register-mark span{
    width:50px;
    height:42px;
    border:4px solid #fff;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:17px;
    font-weight:1000;
    letter-spacing:-1px;
}
.student-register-heading h1{
    margin:0;
    color:#050505;
    font-size:clamp(27px,7vw,36px);
    line-height:1.12;
    font-weight:1000;
    letter-spacing:-.7px;
}
.student-register-heading p{
    margin:10px 0 0;
    color:#1f1f1f;
    font-size:16px;
    line-height:1.45;
    text-transform:none;
}
.student-register-page [data-student-registration-form]{
    gap:15px!important;
    padding:22px 20px 20px;
    border:1px solid #ececec;
    border-radius:22px;
    background:#fff;
    box-shadow:0 9px 28px rgba(0,0,0,.09);
}
.student-register-page [data-student-registration-form] label{
    gap:7px!important;
}
.student-register-page [data-student-registration-form] label span,
.student-register-page .registration-photo-label{
    color:#080808!important;
    font-size:13px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}
.student-register-page [data-student-registration-form] input,
.student-register-page [data-student-registration-form] select{
    height:58px!important;
    min-height:58px!important;
    padding:0 15px!important;
    border:1.5px solid #cfcfcf!important;
    border-radius:12px!important;
    color:#111!important;
    background-color:#fff!important;
    font-size:16px!important;
    box-shadow:none!important;
}
.student-register-page [data-student-registration-form] input::placeholder{color:#333;opacity:1}
.student-register-page .mobile-registration-row{gap:12px}
.student-register-page .registration-photo-picker{
    min-height:76px;
    padding:10px 12px;
    border:1.5px dashed #c8c8c8;
    border-radius:12px;
    background:#fff;
}
.student-register-page .registration-photo-copy b{color:#111;font-size:14px;text-transform:none}
.student-register-page .registration-photo-copy small{color:#666;font-size:10px;text-transform:none}
.student-register-page .registration-photo-actions button{min-height:50px!important}
.student-register-page [data-student-registration-form]>button[type="submit"]{
    height:62px!important;
    min-height:62px!important;
    margin:7px -20px -96px!important;
    transform:translateY(112px);
    border-radius:13px!important;
    background:linear-gradient(135deg,#ff1225,#e60000)!important;
    font-size:18px!important;
    font-weight:1000!important;
    box-shadow:0 12px 24px rgba(229,0,13,.2)!important;
    text-transform:uppercase!important;
}
.student-register-login{
    margin:116px 0 12px;
    color:#111;
    font-size:15px;
    text-align:center;
    text-transform:none;
}
.student-register-login a{color:#e60000;font-weight:750}
@media(max-width:390px){
    .student-only-apk.student-register-page .mobile-login-screen{padding-left:14px;padding-right:14px}
    .student-register-heading{padding-top:48px}
    .student-register-heading p{font-size:14px}
    .student-register-page [data-student-registration-form]{padding-left:15px;padding-right:15px}
    .student-register-page [data-student-registration-form]>button[type="submit"]{margin-left:-15px!important;margin-right:-15px!important}
}

/* v10.5.39 final override: card kecil dan berwarna */
.student-only-apk.student-register-page .mobile-login-screen{padding:calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#fff3f5 0,#f7f9ff 48%,#eef3fb 100%)}
.student-register-page .student-register-back{top:0;width:34px;height:34px;border-radius:10px;background:#fff;color:#bd1730;box-shadow:0 4px 12px rgba(87,24,39,.1);font-size:27px}
.student-register-page .student-register-heading{padding:22px 0 8px}
.student-register-page .student-register-mark{width:40px;height:40px;margin-bottom:5px;background:linear-gradient(145deg,#ef3149,#b90e2b);box-shadow:0 6px 14px rgba(193,19,47,.22)}
.student-register-page .student-register-mark span{width:25px;height:21px;border-width:2px;border-radius:5px;font-size:9px}
.student-register-page .student-register-heading h1{font-size:18px;letter-spacing:-.2px}
.student-register-page .student-register-heading p{margin-top:1px;color:#596173;font-size:9px}
.student-register-page [data-student-registration-form]{gap:5px!important;padding:8px!important;border:1px solid #eadde1;border-radius:13px;background:linear-gradient(150deg,#fff 0,#fff8f9 100%);box-shadow:0 7px 18px rgba(43,56,85,.1)}
.student-register-page [data-student-registration-form] label{gap:2px!important}
.student-register-page [data-student-registration-form] label span,.student-register-page .registration-photo-label{color:#2b3140!important;font-size:8px!important;letter-spacing:.15px}
.student-register-page [data-student-registration-form] input,.student-register-page [data-student-registration-form] select{height:35px!important;min-height:35px!important;padding:0 8px!important;border:1px solid #d7ddea!important;border-radius:8px!important;color:#171b24!important;background:#f3f6fc!important;font-size:11px!important}
.student-register-page [data-student-registration-form] input:focus,.student-register-page [data-student-registration-form] select:focus{border-color:#dc3850!important;background:#fff!important;box-shadow:0 0 0 2px rgba(220,56,80,.1)!important}
.student-register-page .mobile-registration-row{gap:5px}
.student-register-page .registration-photo-field{gap:2px}
.student-register-page .registration-photo-picker{min-height:38px;padding:3px 6px;border:1px dashed #e08a98;border-radius:8px;background:#fff0f3}
.student-register-page .registration-photo-preview{width:31px;height:31px;min-width:31px;border-radius:8px;color:#fff;background:linear-gradient(145deg,#ed3b53,#b90e2b)}
.student-register-page .registration-photo-preview svg{width:16px;height:16px}
.student-register-page .registration-photo-copy b{color:#2a2f3b;font-size:9px}
.student-register-page .registration-photo-copy small{color:#7b5260;font-size:7px}
.student-register-page .registration-upload-feedback{min-height:0;margin:0;font-size:7px}
.student-register-page .registration-upload-feedback:empty{display:none}
.student-register-page .pin-tip{margin:0;padding:4px 6px;border-radius:7px;color:#69525a;background:#fff1d9;font-size:7px;line-height:1.2}
.student-register-page [data-student-registration-form]>button[type="submit"]{height:39px!important;min-height:39px!important;margin:2px 0 0!important;transform:none!important;border-radius:9px!important;background:linear-gradient(135deg,#e7334d,#b80e2b)!important;font-size:12px!important;box-shadow:0 7px 14px rgba(186,14,43,.18)!important}
.student-register-page .student-register-login{margin:7px 0 0;font-size:10px}
@media(max-height:680px){.student-register-page .student-register-heading{padding-top:16px}.student-register-page .student-register-heading p,.student-register-page .pin-tip{display:none}.student-register-page [data-student-registration-form]{gap:4px!important}.student-register-page [data-student-registration-form] input,.student-register-page [data-student-registration-form] select{height:32px!important;min-height:32px!important}}

/* v10.5.40 · login siswa ringkas mengikuti mockup e-wallet */
.student-only-apk .pin-login-screen{
    min-height:100svh;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    overflow:hidden;background:
        radial-gradient(circle at -8% 76%,rgba(238,22,42,.08) 0 7%,transparent 7.4%),
        radial-gradient(circle at 108% 82%,rgba(238,22,42,.07) 0 15%,transparent 15.4%),
        linear-gradient(155deg,#ed1526 0 13%,#ff767d 24%,#fff8f5 24.3%,#fffdfa 100%);
}
.student-only-apk .pin-back-form{display:none}
.student-only-apk .pin-login-panel{
    width:min(100%,390px);min-height:calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:17vh 0 0;display:flex;align-items:center;color:#080808;
}
.student-only-apk .pin-brand-mark{
    width:76px;height:76px;margin:0 auto 13px;border-radius:50%;background:#fff;
    box-shadow:0 9px 24px rgba(75,23,25,.14)
}
.student-only-apk .pin-brand-mark span{
    position:relative;width:50px;height:35px;border-radius:8px;background:linear-gradient(145deg,#f11b2d,#c90013);
    color:#fff;font-size:15px;box-shadow:none
}
.student-only-apk .pin-brand-mark span:after{content:"";position:absolute;right:-6px;width:15px;height:15px;border:2px solid #fff;border-radius:5px;background:#dc1022}
.student-only-apk .pin-login-panel h1{font-size:28px;font-weight:1000;letter-spacing:-.7px}
.student-only-apk .pin-login-panel>p{margin:6px 0 18px;color:#666;font-size:12px}
.student-only-apk .pin-alert{position:fixed;z-index:20;top:calc(14px + env(safe-area-inset-top));left:50%;width:min(calc(100% - 28px),390px);transform:translateX(-50%);margin:0;box-shadow:0 10px 28px rgba(0,0,0,.13)}
.student-only-apk .pin-login-form{
    position:relative;width:100%;padding:16px 16px 14px;border:1px solid #f0e4e2;border-radius:19px;
    background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(73,38,31,.12)
}
.student-only-apk .pin-card-label{width:100%;color:#111;text-align:left;font-size:13px;font-weight:850}
.student-only-apk .pin-hidden-input{position:absolute!important;left:14px!important;top:42px!important;width:calc(100% - 28px)!important;height:54px!important;opacity:0!important;pointer-events:none!important}
.student-only-apk .pin-account-name{display:none}
.student-only-apk .pin-dots{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0 0;cursor:text}
.student-only-apk .pin-dots span{
    width:100%;height:49px;border:1px solid #eadfdd;border-radius:12px;background:#fff;
    box-shadow:0 5px 10px rgba(41,31,28,.07);display:grid;place-items:center
}
.student-only-apk .pin-dots span:after{content:"";width:8px;height:8px;border-radius:50%;background:#808080}
.student-only-apk .pin-dots span.filled{background:#fff;transform:none;box-shadow:0 5px 10px rgba(41,31,28,.07)}
.student-only-apk .pin-dots span.filled:after{background:#ed1328;box-shadow:0 0 0 3px rgba(237,19,40,.09)}
.student-only-apk .pin-keypad{display:none}
.student-only-apk .pin-forgot-link{align-self:flex-end;margin:9px 0 8px;padding:4px 0;color:#e31024;font-size:12px}
.student-only-apk .pin-fallback-submit{
    position:static;width:100%;height:50px;opacity:1;border:0;border-radius:13px;
    color:#fff;background:linear-gradient(135deg,#f11a2d,#de0016);font-size:15px;font-weight:950;
    box-shadow:0 8px 18px rgba(222,0,22,.2)
}
.student-only-apk .pin-fallback-submit:disabled{opacity:.48;box-shadow:none}
.student-only-apk .pin-reset-request-form{display:none!important}

/* v10.5.49 · login selalu penuh satu layar WebView/HP. */
.student-only-apk .pin-login-screen{
    box-sizing:border-box!important;
    width:100%!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
}
.student-only-apk .pin-login-panel{
    box-sizing:border-box!important;
    height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    max-height:none!important;
}
.device-registered-modal .student-message-icon{background:linear-gradient(135deg,#f11a2d,#d50016)!important}
.device-registered-modal .student-message-card small{color:#d50016!important}
.student-only-apk .pin-fingerprint{margin-top:18px;color:#e31024;font-size:45px;line-height:.75;transform:rotate(90deg)}
.student-only-apk .pin-fingerprint-label{margin-top:10px;color:#111;font-size:11px}
.student-only-apk .pin-auth-switch{
    width:178px;height:42px;margin-top:auto;padding:3px;display:grid;grid-template-columns:1fr 1fr;
    border:1px solid #eadfdd;border-radius:22px;background:#fff;box-shadow:0 7px 18px rgba(68,35,29,.11)
}
.student-only-apk .pin-auth-switch button,
.student-only-apk .pin-auth-switch a{
    display:grid;place-items:center;padding:0;border:0;border-radius:19px;
    color:#555;background:transparent;font:inherit;font-size:12px;font-weight:850;
    cursor:pointer;text-decoration:none
}
.student-only-apk .pin-auth-switch button.active,
.student-only-apk .pin-auth-switch a.active{color:#fff;background:linear-gradient(135deg,#f11a2d,#de0016)}
@media(max-height:720px){
    .student-only-apk .pin-login-panel{padding-top:11vh}.student-only-apk .pin-brand-mark{width:62px;height:62px;margin-bottom:8px}.student-only-apk .pin-brand-mark span{width:43px;height:31px}.student-only-apk .pin-login-panel h1{font-size:24px}.student-only-apk .pin-login-panel>p{margin-bottom:12px}.student-only-apk .pin-login-form{padding:13px}.student-only-apk .pin-dots span{height:43px}.student-only-apk .pin-fingerprint{margin-top:12px;font-size:38px}.student-only-apk .pin-fingerprint-label{margin-top:7px}
}
@media(min-width:620px){
    .student-only-apk .pin-login-screen{background:linear-gradient(155deg,#ed1526 0 20%,#ff767d 31%,#fff8f5 31.3%,#fffdfa 100%)}
    .student-only-apk .pin-login-panel{min-height:620px;margin:auto;padding:72px 24px 20px;border-radius:30px}
}

/* v10.5.41 final · register memenuhi satu layar HP tanpa memperbesar card */
.student-only-apk.student-register-page .mobile-login-screen{
    height:100svh;
    min-height:100svh;
    overflow:hidden;
}
.student-only-apk.student-register-page .mobile-login-card{
    min-height:calc(100svh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
}
.student-register-page .student-register-heading{
    flex:0 0 auto;
    padding-top:clamp(22px,5.4vh,52px);
    padding-bottom:clamp(8px,1.6vh,16px);
}
.student-register-page [data-student-registration-form]{flex:0 0 auto}
.student-register-page .student-register-login{
    margin-top:auto;
    padding:clamp(9px,2vh,20px) 0 3px;
}
@media(max-height:700px){
    .student-only-apk.student-register-page .mobile-login-screen{overflow:hidden}
    .student-only-apk.student-register-page .mobile-login-card{min-height:calc(100svh - 22px)}
    .student-register-page .student-register-heading{padding-top:16px;padding-bottom:6px}
    .student-register-page .student-register-login{padding-top:7px}
}

/* v10.5.43 final · seluruh register menyesuaikan satu viewport HP tanpa scroll */
.student-only-apk.student-register-page{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden!important;
}
.student-only-apk.student-register-page .mobile-login-screen{
    box-sizing:border-box;
    width:100%;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
}
.student-only-apk.student-register-page .mobile-login-card{
    box-sizing:border-box;
    width:min(100%,480px);
    height:calc(100dvh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height:0!important;
    margin:0 auto;
    overflow:hidden;
}
.student-register-page .student-register-heading{
    padding-top:clamp(12px,3.2dvh,28px)!important;
    padding-bottom:clamp(4px,1dvh,9px)!important;
}
.student-register-page .student-register-heading p{margin-bottom:0}
.student-register-page [data-student-registration-form]{
    gap:clamp(3px,.65dvh,5px)!important;
    padding:clamp(6px,1dvh,8px)!important;
}
.student-register-page [data-student-registration-form] input,
.student-register-page [data-student-registration-form] select{
    height:clamp(29px,4.6dvh,35px)!important;
    min-height:clamp(29px,4.6dvh,35px)!important;
}
.student-register-page .registration-photo-picker{min-height:clamp(32px,5dvh,38px)}
.student-register-page .registration-photo-preview{
    width:clamp(27px,4.2dvh,31px);
    height:clamp(27px,4.2dvh,31px);
    min-width:clamp(27px,4.2dvh,31px);
}
.student-register-page [data-student-registration-form]>button[type="submit"]{
    height:clamp(34px,5.2dvh,39px)!important;
    min-height:clamp(34px,5.2dvh,39px)!important;
}
.student-register-page .student-register-login{
    margin:0!important;
    padding:clamp(4px,.9dvh,8px) 0 0!important;
}
@media(max-height:650px){
    .student-register-page .student-register-heading{padding-top:9px!important;padding-bottom:3px!important}
    .student-register-page .student-register-mark{width:32px;height:32px;margin-bottom:2px}
    .student-register-page .student-register-heading h1{font-size:15px}
    .student-register-page .student-register-heading p,.student-register-page .pin-tip{display:none!important}
    .student-register-page [data-student-registration-form]{gap:2px!important;padding:5px!important}
    .student-register-page [data-student-registration-form] label{gap:1px!important}
    .student-register-page [data-student-registration-form] input,
    .student-register-page [data-student-registration-form] select{height:28px!important;min-height:28px!important}
    .student-register-page .registration-photo-picker{min-height:30px}
    .student-register-page .registration-photo-preview{width:25px;height:25px;min-width:25px}
    .student-register-page [data-student-registration-form]>button[type="submit"]{height:32px!important;min-height:32px!important}
}

/* Login awal juga memakai bahasa visual e-wallet; NIS hanya muncul pada perangkat baru. */
.student-only-apk:not(.student-register-page) .mobile-login-screen{
    min-height:100svh;
    padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at -8% 76%,rgba(238,22,42,.08) 0 7%,transparent 7.4%),
        radial-gradient(circle at 108% 82%,rgba(238,22,42,.07) 0 15%,transparent 15.4%),
        linear-gradient(155deg,#ed1526 0 13%,#ff767d 24%,#fff8f5 24.3%,#fffdfa 100%);
}
.student-only-apk:not(.student-register-page) .mobile-login-hero{display:none}
.student-only-apk:not(.student-register-page) .mobile-login-card{
    width:min(100%,390px);
    min-height:calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:0;
    padding:24vh 0 0;
    display:flex;
    flex-direction:column;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.student-only-apk:not(.student-register-page) .mobile-login-card>h2{
    margin:0 0 5px;
    color:#080808;
    font-size:28px;
    text-align:center;
    letter-spacing:-.7px;
}
.student-only-apk:not(.student-register-page) .mobile-login-card>p{
    margin:0 0 18px;
    color:#666;
    font-size:12px;
    text-align:center;
}
.student-only-apk:not(.student-register-page) .mobile-login-form{
    gap:10px;
    padding:16px;
    border:1px solid #f0e4e2;
    border-radius:19px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 30px rgba(73,38,31,.12);
}
.student-only-apk:not(.student-register-page) .mobile-login-form label span{color:#111;font-size:11px}
.student-only-apk:not(.student-register-page) .mobile-login-form input{
    min-height:49px;
    border:1px solid #eadfdd;
    border-radius:12px;
    background:#fff;
    font-size:14px;
}
.student-only-apk:not(.student-register-page) .mobile-login-form>button[type="submit"]{
    min-height:50px;
    border-radius:13px;
    background:linear-gradient(135deg,#f11a2d,#de0016);
    box-shadow:0 8px 18px rgba(222,0,22,.2);
}
.student-only-apk:not(.student-register-page) .mobile-role-tabs{
    order:9;
    width:178px;
    min-height:42px;
    margin:auto auto 0;
    padding:3px;
    border:1px solid #eadfdd;
    border-radius:22px;
    background:#fff;
    box-shadow:0 7px 18px rgba(68,35,29,.11);
}
.student-only-apk:not(.student-register-page) .mobile-role-tabs a{border-radius:19px;font-size:12px}
.student-only-apk:not(.student-register-page) .mobile-role-tabs a.active{color:#fff;background:linear-gradient(135deg,#f11a2d,#de0016)}
.student-only-apk:not(.student-register-page) .mobile-login-foot{display:none}
@media(max-height:700px){
    .student-only-apk:not(.student-register-page) .mobile-login-card{padding-top:15vh}
}

/* v10.5.44 · alur lupa PIN ringkas: satu tautan, langsung ke admin. */
.student-only-apk .pin-keypad-spacer{
    display:block;
    width:62px;
    height:62px;
}
.student-only-apk .pin-forgot-link{
    display:block!important;
    width:auto!important;
    min-height:0!important;
    margin:8px auto 10px!important;
    padding:4px 8px!important;
    border:0!important;
    color:#e31024!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.2!important;
    text-align:center!important;
    text-decoration:none!important;
}
.student-only-apk .pin-forgot-link:disabled{opacity:.65}
.student-only-apk .pin-reset-request-form{display:none!important}

/* v10.5.51 · layout normal agar panel tidak hilang pada Android WebView. */
html,
body.student-only-apk{
    width:100%;
    min-height:100%;
    margin:0;
}
body.student-only-apk{overflow-x:hidden!important;overflow-y:auto!important}
.student-only-apk .pin-login-screen{
    position:relative!important;
    inset:auto!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:100vh!important;
    min-height:100svh!important;
    max-height:none!important;
    margin:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
}
.student-only-apk .pin-login-panel{
    box-sizing:border-box!important;
    width:min(100%,390px)!important;
    height:auto!important;
    min-height:calc(100vh - 24px)!important;
    min-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:clamp(38px,8vh,72px) 0 12px!important;
    overflow:visible!important;
}
@media(max-height:700px){
    .student-only-apk .pin-login-panel{padding-top:24px!important}
    .student-only-apk .pin-brand-mark{width:58px;height:58px;margin-bottom:7px}
    .student-only-apk .pin-brand-mark span{width:41px;height:29px}
    .student-only-apk .pin-login-panel h1{font-size:22px}
    .student-only-apk .pin-login-panel>p{margin-bottom:9px}
    .student-only-apk .pin-login-form{padding:11px 12px 10px}
    .student-only-apk .pin-dots span{height:39px}
    .student-only-apk .pin-fingerprint{margin-top:8px;font-size:34px}
    .student-only-apk .pin-fingerprint-label{margin-top:5px}
    .student-only-apk .pin-auth-switch{margin-top:10px}
}

/* v10.5.52 · login kembali satu layar; tombol MASUK berada di bagian bawah. */
html{height:100%;min-height:100%}
body.student-only-apk{
    height:100%;
    min-height:100%;
    overflow:hidden!important;
}
.student-only-apk .pin-login-screen{
    height:100vh!important;
    height:100svh!important;
    min-height:100vh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding:calc(10px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    align-items:stretch!important;
}
.student-only-apk .pin-login-panel{
    height:calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    height:calc(100svh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    max-height:100%!important;
    padding:clamp(18px,4.5svh,42px) 0 0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}
.student-only-apk .pin-brand-mark{flex:0 0 auto}
.student-only-apk .pin-login-panel h1,
.student-only-apk .pin-login-panel>p{flex:0 0 auto}
.student-only-apk .pin-login-form{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    padding:14px 15px 13px!important;
}
.student-only-apk .pin-card-label,
.student-only-apk .pin-dots,
.student-only-apk .pin-forgot-link{flex:0 0 auto}
.student-only-apk .pin-forgot-link{margin:8px auto 4px!important}
.student-only-apk .pin-fallback-submit{
    flex:0 0 48px!important;
    height:48px!important;
    min-height:48px!important;
    margin-top:auto!important;
}
.student-only-apk .pin-fingerprint{
    flex:0 0 auto;
    margin-top:clamp(7px,1.5svh,14px)!important;
    font-size:clamp(30px,5svh,42px)!important;
}
.student-only-apk .pin-fingerprint-label{
    flex:0 0 auto;
    margin-top:4px!important;
}
.student-only-apk .pin-auth-switch{
    flex:0 0 40px!important;
    height:40px!important;
    min-height:40px!important;
    margin:clamp(7px,1.4svh,13px) auto 0!important;
}
@media(max-height:650px){
    .student-only-apk .pin-login-panel{padding-top:12px!important}
    .student-only-apk .pin-brand-mark{width:50px;height:50px;margin-bottom:4px}
    .student-only-apk .pin-brand-mark span{width:36px;height:26px;font-size:12px}
    .student-only-apk .pin-login-panel h1{font-size:20px}
    .student-only-apk .pin-login-panel>p{margin:3px 0 7px;font-size:10px}
    .student-only-apk .pin-login-form{padding:9px 11px 10px!important}
    .student-only-apk .pin-dots{gap:5px;margin-top:7px}
    .student-only-apk .pin-dots span{height:34px}
    .student-only-apk .pin-forgot-link{margin:5px auto 2px!important;font-size:11px!important}
    .student-only-apk .pin-fallback-submit{flex-basis:42px!important;height:42px!important;min-height:42px!important}
    .student-only-apk .pin-fingerprint{margin-top:5px!important;font-size:28px!important}
    .student-only-apk .pin-fingerprint-label{margin-top:2px!important;font-size:9px}
    .student-only-apk .pin-auth-switch{flex-basis:36px!important;height:36px!important;min-height:36px!important;margin-top:5px!important}
}
/* v10.5.56 · zoom foto profil di APK */
.mobile-photo-zoom-trigger{cursor:zoom-in}
body.mobile-photo-zoom-open{overflow:hidden}
.mobile-photo-lightbox{position:fixed;inset:0;z-index:12000;padding:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:rgba(3,8,14,.9);backdrop-filter:blur(8px)}
.mobile-photo-lightbox[hidden]{display:none!important}
.mobile-photo-lightbox img{display:block;max-width:calc(100vw - 28px);max-height:78vh;width:auto;height:auto;object-fit:contain;border:4px solid #fff;border-radius:20px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.55);touch-action:pinch-zoom}
.mobile-photo-lightbox small{max-width:90vw;color:#fff;font-size:12px;font-weight:850;text-align:center}
.mobile-photo-lightbox button{position:fixed;right:14px;top:max(14px,env(safe-area-inset-top));width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:15px;color:#fff;background:rgba(255,255,255,.16);font-size:28px;line-height:1}


/* v10.5.66 · lupa PIN wajib isi NIS */
body.pin-reset-open{overflow:hidden}
.pin-reset-modal{position:fixed;inset:0;z-index:9999;padding:20px;background:rgba(15,31,45,.62);display:grid;place-items:center;backdrop-filter:blur(5px)}
.pin-reset-dialog{position:relative;width:min(100%,390px);padding:24px 20px 20px;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(7,25,39,.30);text-align:center}
.pin-reset-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f2f5f8;color:#536a7b;font-size:22px;line-height:1;cursor:pointer}
.pin-reset-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:15px;display:grid;place-items:center;background:#eaf5ff;color:#087bc1;font-size:24px;font-weight:900}
.pin-reset-dialog h2{margin:0;color:#17384e;font-size:20px}
.pin-reset-dialog>p{margin:7px 0 16px;color:#6f8493;font-size:12px;line-height:1.55}
.pin-reset-dialog .pin-reset-request-form{margin:0;padding:0;background:transparent;text-align:left}
.pin-reset-dialog .pin-reset-request-form label{display:flex;flex-direction:column;gap:6px;margin:0}
.pin-reset-dialog .pin-reset-request-form label span{color:#456175;font-size:11px;font-weight:900}
.pin-reset-dialog .pin-reset-request-form input{width:100%;height:46px;padding:0 13px;border:1px solid #d7e2ea;border-radius:12px;background:#fbfdff;color:#17384e;font-size:15px;outline:none;box-sizing:border-box}
.pin-reset-dialog .pin-reset-request-form input:focus{border-color:#148dd3;box-shadow:0 0 0 3px rgba(20,141,211,.12)}
.pin-reset-dialog .pin-reset-request-form button{width:100%;height:45px;margin-top:11px;border:0;border-radius:12px;background:linear-gradient(135deg,#0b86d2,#27a8e6);color:#fff;font-size:12px;font-weight:900;cursor:pointer}
.pin-reset-dialog .pin-reset-request-form button:disabled{opacity:.65;cursor:wait}


/* v10.5.67 · perbaikan konflik CSS: form NIS lupa PIN wajib terlihat */
.student-only-apk .pin-reset-dialog .pin-reset-request-form,
.student-only-apk .pin-reset-dialog .pin-reset-request-form.is-open {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    place-items: initial !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    animation: none !important;
    text-align: left !important;
}
.student-only-apk .pin-reset-dialog .pin-reset-request-form::before {
    content: none !important;
    display: none !important;
}
.student-only-apk .pin-reset-dialog .pin-reset-request-form > label,
.student-only-apk .pin-reset-dialog .pin-reset-request-form > button {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
}

/* V10.6.0 logo sekolah */
.mobile-logo.has-school-logo{overflow:hidden;padding:4px}.mobile-logo.has-school-logo img{width:100%;height:100%;object-fit:contain;border-radius:15px}

/* Popup hasil ACC pendaftaran siswa */
.student-registration-result-popup{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:22px;background:rgba(15,23,42,.72);backdrop-filter:blur(7px)}
.student-registration-result-popup>div{width:min(100%,420px);padding:25px;border-radius:24px;background:#fff;box-shadow:0 26px 70px rgba(15,23,42,.28);text-align:center;border:1px solid #e8edf4}
.student-registration-result-popup>div>i{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 15px;border-radius:22px;font-style:normal;font-size:35px;font-weight:900}
.student-registration-result-popup .approved>i{background:#e9fbf2;color:#078553}.student-registration-result-popup .rejected>i{background:#fff0f2;color:#be1630}
.student-registration-result-popup h2{margin:0 0 10px;color:#142033;font-size:22px}.student-registration-result-popup p{margin:0;color:#46566c;font-size:14px;line-height:1.65;font-weight:700}
.student-registration-result-popup small{display:block;margin:14px 0 19px;color:#7b8798;font-size:11px;font-weight:800;line-height:1.5}
.student-registration-result-popup div>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.student-registration-result-popup a,.student-registration-result-popup button{min-height:46px;border:0;border-radius:13px;font-weight:900;text-decoration:none;display:grid;place-items:center;cursor:pointer}
.student-registration-result-popup a{background:#c5162e;color:#fff}.student-registration-result-popup button{background:#eef2f7;color:#26354a}

/* v11.7.0 · popup hasil aksi siswa */
.mobile-action-result-popup{position:fixed;inset:0;z-index:100080;display:grid;place-items:center;padding:16px;background:rgba(7,25,38,.72);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.16s ease}.mobile-action-result-popup.show{opacity:1;visibility:visible}.mobile-action-result-popup[hidden]{display:none!important}.mobile-action-result-card{position:relative;width:min(100%,430px);padding:27px 20px 20px;border-radius:25px;background:#fff;border:1px solid rgba(255,255,255,.7);box-shadow:0 28px 75px rgba(4,25,40,.34);transform:translateY(12px) scale(.98);transition:.18s ease}.mobile-action-result-popup.show .mobile-action-result-card{transform:translateY(0) scale(1)}.mobile-action-result-x{position:absolute;right:15px;top:15px;width:37px;height:37px;border:0;border-radius:12px;background:#eef4f7;color:#6f8798;font-size:23px}.mobile-action-result-icon{width:65px;height:65px;margin-bottom:16px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(135deg,#16a574,#50c99b);color:#fff;font-size:26px;font-weight:950;box-shadow:0 13px 27px rgba(22,165,116,.22)}.mobile-action-result-popup[data-type="error"] .mobile-action-result-icon{background:linear-gradient(135deg,#d94c5c,#ef7d89);box-shadow:0 13px 27px rgba(217,76,92,.22)}.mobile-action-result-popup[data-type="warning"] .mobile-action-result-icon{background:linear-gradient(135deg,#d78a21,#f2b452);box-shadow:0 13px 27px rgba(215,138,33,.22)}.mobile-action-result-popup[data-type="info"] .mobile-action-result-icon{background:linear-gradient(135deg,var(--blue),#43b5ef);box-shadow:0 13px 27px rgba(11,143,233,.22)}.mobile-action-result-card>small{display:block;color:#738b9c;font-size:9px;font-weight:950;letter-spacing:.11em}.mobile-action-result-card h2{margin:7px 42px 7px 0;color:#16384f;font-size:24px}.mobile-action-result-card p{margin:0;color:#617b8e;font-size:12px;line-height:1.65;overflow-wrap:anywhere}.mobile-action-result-ok{width:100%;min-height:49px;margin-top:21px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--blue),#42b4ef);color:#fff;font-size:11px;font-weight:950}.mobile-action-popup-open{overflow:hidden}


/* v11.8.1 · permukaan siswa lebih lembut, tidak putih menyilaukan */
.mobile-app-body,.student-app-body{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.62),transparent 30%),
    linear-gradient(145deg,#e6ebef 0%,#f5f7f8 50%,#dce4e9 100%)!important;
  background-attachment:fixed!important;
}
.mobile-login-screen,.student-login-screen,.student-register-page{
  background:linear-gradient(145deg,#e2e8ec 0%,#f6f8f9 52%,#dbe3e8 100%)!important;
}
.mobile-login-card,.student-card,.student-panel,.mobile-sheet,.student-modal-card{
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(235,240,243,.95))!important;
  border-color:#d4dde3!important;
}


/* V11.8.6 · pendaftaran siswa memakai master NIS sekolah */
.registration-nis-check{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.registration-nis-button{min-height:48px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(135deg,#455a64,#263238);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(38,50,56,.16)}
.registration-nis-button:disabled{opacity:.65;cursor:wait}
.registration-master-feedback{margin:9px 0 4px;padding:10px 12px;border-radius:12px;background:#eef2f4;border:1px solid #d9e0e4;color:#52636d;font-size:12px;line-height:1.45}
.registration-master-feedback.info{background:#eef5fa;border-color:#d5e5f0;color:#315b72}
.registration-master-feedback.success{background:#e8f6ef;border-color:#cce9da;color:#176647}
.registration-master-feedback.error{background:#fff0ef;border-color:#f0d1ce;color:#9d332a}
.registration-master-card{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 12px;padding:13px;border:1px solid #d6e0e5;border-radius:15px;background:linear-gradient(145deg,#f4f6f7,#e9eef0)}
.registration-master-card[hidden]{display:none!important}
.registration-master-card div{padding:10px 11px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid rgba(205,216,222,.8)}
.registration-master-card small{display:block;color:#70808a;font-size:10px;margin-bottom:3px}
.registration-master-card strong{display:block;color:#263840;font-size:12px;line-height:1.35;word-break:break-word}
.registration-master-lock{display:contents}
.registration-master-lock input:disabled,.registration-master-lock select:disabled,.registration-master-lock button:disabled{opacity:.58;cursor:not-allowed}
@media(max-width:520px){.registration-nis-check{grid-template-columns:1fr}.registration-nis-button{width:100%}.registration-master-card{grid-template-columns:1fr 1fr}}

/* v11.9.1 · konfirmasi transaksi siswa */
.mobile-transaction-confirm{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(5,17,28,.76);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:.16s ease}.mobile-transaction-confirm.show{opacity:1;visibility:visible}.mobile-transaction-confirm[hidden]{display:none!important}.mobile-transaction-confirm-card{position:relative;width:min(100%,430px);padding:26px 20px 20px;border-radius:25px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.38);transform:translateY(12px) scale(.98);transition:.18s ease;text-align:left}.mobile-transaction-confirm.show .mobile-transaction-confirm-card{transform:translateY(0) scale(1)}.mobile-transaction-confirm-x{position:absolute;right:15px;top:15px;width:38px;height:38px;border:0;border-radius:12px;background:#eef2f5;color:#657b8b;font-size:24px}.mobile-transaction-confirm-icon{width:64px;height:64px;border-radius:21px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(135deg,#d6871d,#f2b14d);color:#fff;font-size:26px;font-weight:950;box-shadow:0 13px 27px rgba(214,135,29,.25)}.mobile-transaction-confirm-card>small{display:block;color:#8b6828;font-size:10px;font-weight:950;letter-spacing:.11em}.mobile-transaction-confirm-card h2{margin:7px 42px 7px 0;color:#15394f;font-size:24px}.mobile-transaction-confirm-card p{margin:0;color:#637989;font-size:13px;line-height:1.6}.mobile-transaction-confirm-card>strong{display:block;margin-top:15px;padding:13px 15px;border:1px solid #dce8ef;border-radius:14px;background:#f4f8fa;color:#153d55;font-size:20px;text-align:center}.mobile-transaction-confirm-card>div{display:grid;grid-template-columns:1fr 1.35fr;gap:9px;margin-top:20px}.mobile-transaction-confirm-card>div button{min-height:49px;border-radius:15px;font-size:11px;font-weight:950}.mobile-transaction-confirm-card>div button:first-child{border:1px solid #d9e4ea;background:#f0f4f6;color:#607888}.mobile-transaction-confirm-card>div button:last-child{border:0;background:linear-gradient(135deg,#0c91df,#27afe8);color:#fff}.mobile-transaction-confirm-open{overflow:hidden}form[data-submitting="1"]{pointer-events:none;opacity:.82}@media(max-width:430px){.mobile-transaction-confirm{padding:12px}.mobile-transaction-confirm-card{padding:23px 17px 17px;border-radius:22px}.mobile-transaction-confirm-card>div{grid-template-columns:1fr}.mobile-transaction-confirm-card>div button:first-child{order:2}}


/* Point 5: jalur perbaikan pendaftaran yang ditolak */
.registration-repair-action{margin:12px 0 14px;padding:14px;border:1px solid #f0c6c6;border-radius:14px;background:#fff7f7;display:flex;flex-direction:column;gap:7px;color:#7f2424}
.registration-repair-action strong{font-size:14px;font-weight:900}
.registration-repair-action span{font-size:11px;line-height:1.5;color:#8f4b4b}
.registration-repair-action a{margin-top:3px;min-height:42px;border-radius:11px;background:#c73737;color:#fff!important;display:grid;place-items:center;text-decoration:none;font-size:12px;font-weight:900}

/* V12.3.2 · FIX halaman pendaftaran siswa: konten panjang wajib dapat di-scroll */
.student-only-apk.student-register-page{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
}
.student-only-apk.student-register-page .mobile-login-screen{
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
}
.student-only-apk.student-register-page .mobile-login-card{
    width:min(100%,520px)!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    margin:0 auto!important;
}
.student-register-page [data-student-registration-form]{
    flex:0 0 auto!important;
}
.student-register-page .student-register-login{
    margin-top:10px!important;
    padding:4px 0 8px!important;
}
@media (max-width:560px){
    .student-only-apk.student-register-page .mobile-login-screen{
        padding-left:10px!important;
        padding-right:10px!important;
    }
    .student-only-apk.student-register-page .mobile-login-card{
        border-radius:18px!important;
    }
}
@media (max-height:700px){
    .student-only-apk.student-register-page,
    .student-only-apk.student-register-page .mobile-login-screen,
    .student-only-apk.student-register-page .mobile-login-card{
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
    }
    .student-only-apk.student-register-page{min-height:100dvh!important;overflow-y:auto!important}
    .student-only-apk.student-register-page .mobile-login-screen{min-height:100dvh!important}
}

/* v12.3.3 · authoritative registration layout override.
   Menetralisir override lama v10.x yang saling bertabrakan. */
.student-only-apk.student-register-page,
.student-only-apk.student-register-page body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
}
.student-only-apk.student-register-page .mobile-login-screen{
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%)!important;
}
.student-only-apk.student-register-page .mobile-login-hero{display:none!important}
.student-only-apk.student-register-page .mobile-login-card{
    position:relative!important;
    width:min(100%,560px)!important;
    max-width:560px!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
}
.student-register-page .student-register-back{
    position:sticky!important;
    top:8px!important;
    left:0!important;
    z-index:20!important;
    width:38px!important;
    height:38px!important;
    display:grid!important;
    place-items:center!important;
    margin:0 0 -38px!important;
    border-radius:12px!important;
    color:#d91f37!important;
    background:#fff!important;
    box-shadow:0 5px 18px rgba(31,45,61,.12)!important;
    font-size:25px!important;
    text-decoration:none!important;
}
.student-register-page .student-register-heading{
    padding:10px 44px 14px!important;
    text-align:center!important;
}
.student-register-page .student-register-mark{
    width:46px!important;
    height:46px!important;
    margin:0 auto 8px!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#ef3149,#bd1730)!important;
    box-shadow:0 7px 18px rgba(193,19,47,.20)!important;
}
.student-register-page .student-register-mark span{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    border:0!important;
    border-radius:0!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    letter-spacing:.2px!important;
}
.student-register-page .student-register-heading h1{
    margin:0!important;
    font-size:21px!important;
    line-height:1.2!important;
    letter-spacing:-.25px!important;
}
.student-register-page .student-register-heading p{
    display:block!important;
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:11px!important;
    line-height:1.4!important;
}
.student-register-page [data-student-registration-form]{
    display:grid!important;
    gap:11px!important;
    padding:14px!important;
    border:1px solid #e4e7ec!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 10px 30px rgba(16,24,40,.08)!important;
    overflow:visible!important;
}
.student-register-page [data-student-registration-form] label{gap:5px!important;min-width:0!important}
.student-register-page [data-student-registration-form] label span,
.student-register-page .registration-photo-label{
    color:#344054!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
}
.student-register-page [data-student-registration-form] input,
.student-register-page [data-student-registration-form] select{
    box-sizing:border-box!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 11px!important;
    border:1px solid #d0d5dd!important;
    border-radius:10px!important;
    color:#101828!important;
    background:#f9fafb!important;
    font-size:13px!important;
    box-shadow:none!important;
}
.student-register-page [data-student-registration-form] input:focus,
.student-register-page [data-student-registration-form] select:focus{
    border-color:#e7334d!important;
    background:#fff!important;
    outline:0!important;
    box-shadow:0 0 0 3px rgba(231,51,77,.10)!important;
}
.student-register-page .registration-nis-check{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 100px!important;
    gap:10px!important;
    align-items:end!important;
}
.student-register-page .registration-nis-button{
    min-height:42px!important;
    height:42px!important;
    padding:0 12px!important;
    border-radius:11px!important;
    font-size:12px!important;
}
.student-register-page .registration-master-feedback,
.student-register-page .registration-master-card,
.student-register-page .registration-revision-notice,
.student-register-page .registration-identity-hint{
    margin:0!important;
    font-size:11px!important;
    line-height:1.45!important;
}
.student-register-page .registration-master-card{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.student-register-page .mobile-registration-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.student-register-page .registration-photo-picker{
    min-height:58px!important;
    padding:8px!important;
    border:1px dashed #e88494!important;
    border-radius:11px!important;
    background:#fff6f7!important;
}
.student-register-page .registration-photo-preview{width:40px!important;height:40px!important;min-width:40px!important;border-radius:10px!important}
.student-register-page .registration-photo-copy b{font-size:11px!important}
.student-register-page .registration-photo-copy small{font-size:9px!important}
.student-register-page .pin-tip{display:block!important;margin:0!important;padding:7px 9px!important;font-size:9px!important;line-height:1.35!important}
.student-register-page [data-student-registration-form]>button[type="submit"]{
    position:static!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:2px 0 0!important;
    transform:none!important;
    border-radius:11px!important;
    font-size:14px!important;
    text-transform:none!important;
    box-shadow:0 8px 18px rgba(186,14,43,.17)!important;
}
.student-register-page .student-register-login{
    display:block!important;
    margin:12px 0 0!important;
    padding:0 0 8px!important;
    font-size:12px!important;
    line-height:1.4!important;
    text-align:center!important;
}
@media(max-width:600px){
    .student-register-page .student-register-heading{padding-top:6px!important}
    .student-register-page .student-register-heading p{font-size:10px!important}
    .student-register-page .mobile-registration-row{grid-template-columns:1fr!important}
    .student-register-page .registration-master-card{grid-template-columns:1fr 1fr!important}
}
@media(max-width:390px){
    .student-only-apk.student-register-page .mobile-login-screen{padding-left:10px!important;padding-right:10px!important}
    .student-register-page [data-student-registration-form]{padding:11px!important;gap:9px!important}
    .student-register-page .registration-nis-check{grid-template-columns:minmax(0,1fr) 88px!important;gap:7px!important}
    .student-register-page [data-student-registration-form] input,
    .student-register-page [data-student-registration-form] select{font-size:12px!important}
}

/* V12.3.11 - tampilan nominal Rupiah lengkap tanpa mengubah nilai POST */
.mobile-money-input.rupiah-mask .money-cents{padding:0 12px 0 2px;color:var(--mobile-muted,#7d6b70);font-size:12px;font-weight:900;white-space:nowrap}.mobile-money-input.rupiah-mask input{min-width:0}.mobile-money-input.rupiah-mask>b{text-transform:none}

/* v12.6.8 · login siswa APK: satu layar dinamis, tanpa ruang kosong/scroll. */
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
    html:has(body.student-only-apk),
    body.student-only-apk {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }
    body.student-only-apk .pin-login-screen {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        padding: calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        display: grid !important;
        place-items: center !important;
    }
    body.student-only-apk .pin-login-panel {
        box-sizing: border-box !important;
        width: min(100%, 390px) !important;
        height: min(100%, 620px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 auto !important;
        padding: clamp(12px, 2.6dvh, 24px) 0 10px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.student-only-apk .pin-brand-mark {
        flex: 0 0 auto;
        width: clamp(50px, 8dvh, 66px) !important;
        height: clamp(50px, 8dvh, 66px) !important;
        margin-bottom: 7px !important;
    }
    body.student-only-apk .pin-brand-mark span {
        width: clamp(36px, 5.5dvh, 46px) !important;
        height: clamp(27px, 4dvh, 33px) !important;
        font-size: 13px !important;
    }
    body.student-only-apk .pin-login-panel h1 {
        flex: 0 0 auto;
        font-size: clamp(20px, 3dvh, 24px) !important;
        line-height: 1.1 !important;
    }
    body.student-only-apk .pin-login-panel > p {
        flex: 0 0 auto;
        margin: 4px 0 9px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }
    body.student-only-apk .pin-login-form {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 11px 12px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 17px !important;
    }
    body.student-only-apk .pin-card-label { font-size: 11px !important; }
    body.student-only-apk .pin-dots {
        flex: 0 0 auto !important;
        gap: 5px !important;
        margin: 8px 0 0 !important;
    }
    body.student-only-apk .pin-dots span {
        height: clamp(34px, 5.7dvh, 43px) !important;
        border-radius: 10px !important;
    }
    body.student-only-apk .pin-forgot-link {
        flex: 0 0 auto !important;
        margin: 5px auto 3px !important;
        padding: 3px 7px !important;
        font-size: 10px !important;
    }
    body.student-only-apk .pin-fallback-submit {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        flex: 0 0 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        opacity: 1 !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }
    body.student-only-apk .pin-fingerprint {
        flex: 0 0 auto !important;
        margin-top: clamp(7px, 1.2dvh, 10px) !important;
        font-size: clamp(27px, 4.5dvh, 34px) !important;
        line-height: .8 !important;
    }
    body.student-only-apk .pin-fingerprint-label {
        flex: 0 0 auto !important;
        margin-top: 3px !important;
        font-size: 9px !important;
    }
    body.student-only-apk .pin-auth-switch {
        flex: 0 0 36px !important;
        width: 164px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 7px auto 0 !important;
    }
    body.student-only-apk .pin-auth-switch button,
    body.student-only-apk .pin-auth-switch a { font-size: 10px !important; }
}

@media (max-height: 560px) and (max-width: 620px),
       (max-height: 560px) and (hover: none) and (pointer: coarse) {
    body.student-only-apk .pin-brand-mark { width: 44px !important; height: 44px !important; margin-bottom: 4px !important; }
    body.student-only-apk .pin-brand-mark span { width: 32px !important; height: 24px !important; font-size: 11px !important; }
    body.student-only-apk .pin-login-panel h1 { font-size: 18px !important; }
    body.student-only-apk .pin-login-panel > p { display: none !important; }
    body.student-only-apk .pin-login-form { padding: 8px 10px !important; }
    body.student-only-apk .pin-dots span { height: 31px !important; }
    body.student-only-apk .pin-fallback-submit { flex-basis: 38px !important; height: 38px !important; min-height: 38px !important; }
    body.student-only-apk .pin-fingerprint { margin-top: 4px !important; font-size: 25px !important; }
    body.student-only-apk .pin-auth-switch { margin-top: 4px !important; }
}

/* v12.6.9 · halaman awal Siswa dibuat sebagai satu permukaan aplikasi penuh. */
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
    body.student-only-apk:not(.student-register-page) .mobile-login-screen {
        box-sizing: border-box !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        padding: calc(6px + env(safe-area-inset-top)) 6px calc(6px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        background: linear-gradient(160deg,#fff4f5 0%,#fff 52%,#fff8f7 100%) !important;
    }
    body.student-only-apk:not(.student-register-page) .mobile-login-card {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        min-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: clamp(18px,3dvh,28px) clamp(16px,4.4vw,22px) !important;
        border: 1px solid #f1e3e4 !important;
        border-radius: 24px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 14px 36px rgba(112,28,42,.10) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    body.student-only-apk:not(.student-register-page) .mobile-login-card > h2 {
        font-size: clamp(25px,4.3dvh,31px) !important;
        line-height: 1.08 !important;
    }
    body.student-only-apk:not(.student-register-page) .mobile-login-card > p {
        max-width: 330px !important;
        margin: 7px auto 16px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    body.student-only-apk:not(.student-register-page) .mobile-login-form {
        width: 100% !important;
        padding: clamp(13px,2.2dvh,18px) !important;
        border-radius: 18px !important;
    }
    body.student-only-apk:not(.student-register-page) .mobile-role-tabs {
        width: min(220px,72vw) !important;
        margin: clamp(12px,2dvh,18px) auto 0 !important;
    }
}

/* ======================================================================
   V12.7.0 · STUDENT APK MOBILE UI FINAL
   Login/entry besar di tengah, shell satu viewport, halaman panjang hanya
   scroll di area konten aplikasi.
   ====================================================================== */
@media (max-width:980px), (hover:none) and (pointer:coarse){
  html:has(body.student-only-apk),body.student-only-apk{
    width:100%;height:100%;min-height:100%;overflow:hidden!important;overscroll-behavior:none;
  }
  body.student-only-apk .mobile-login-screen{
    box-sizing:border-box!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;display:grid!important;place-items:center!important;
    background:linear-gradient(160deg,#fff4f5 0%,#fff 54%,#fff7f6 100%)!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-hero{display:none!important}
  body.student-only-apk:not(.student-register-page) .mobile-login-card{
    box-sizing:border-box!important;width:min(92vw,470px)!important;max-width:470px!important;
    height:auto!important;min-height:clamp(440px,68dvh,610px)!important;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:0!important;padding:clamp(22px,4dvh,34px) clamp(17px,5vw,25px)!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
    border:1px solid #f0e0e3!important;border-radius:27px!important;background:#fff!important;
    box-shadow:0 22px 52px rgba(98,25,38,.13)!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-card>h2{font-size:clamp(27px,4.1dvh,33px)!important;line-height:1.08!important;margin:0 0 6px!important}
  body.student-only-apk:not(.student-register-page) .mobile-login-card>p{font-size:11px!important;line-height:1.45!important;margin:0 auto 15px!important}
  body.student-only-apk:not(.student-register-page) .mobile-login-form{width:100%!important;gap:10px!important;padding:16px!important;border-radius:18px!important}
  body.student-only-apk:not(.student-register-page) .mobile-login-form input{min-height:50px!important;font-size:16px!important}
  body.student-only-apk:not(.student-register-page) .mobile-login-form>button[type="submit"]{min-height:50px!important}
  body.student-only-apk:not(.student-register-page) .mobile-role-tabs{order:9!important;width:min(220px,72vw)!important;min-height:42px!important;margin:16px auto 0!important}

  /* Login PIN: hilangkan ruang kosong panjang dan besarkan blok login. */
  body.student-only-apk .pin-login-screen{
    box-sizing:border-box!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;display:grid!important;place-items:center!important;
  }
  body.student-only-apk .pin-login-panel{
    box-sizing:border-box!important;width:min(92vw,450px)!important;max-width:450px!important;
    height:auto!important;min-height:clamp(480px,72dvh,630px)!important;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:0!important;padding:clamp(20px,3.5dvh,30px) clamp(10px,3vw,18px)!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    border-radius:27px!important;background:rgba(255,255,255,.98)!important;box-shadow:0 22px 52px rgba(90,26,36,.13)!important;
  }
  body.student-only-apk .pin-brand-mark{width:64px!important;height:64px!important;margin-bottom:9px!important}
  body.student-only-apk .pin-login-panel h1{font-size:clamp(25px,4dvh,30px)!important;margin:0!important}
  body.student-only-apk .pin-login-panel>p{margin:5px 0 14px!important;font-size:11px!important}
  body.student-only-apk .pin-login-form{flex:0 0 auto!important;width:100%!important;min-height:0!important;padding:15px!important;margin:0!important}
  body.student-only-apk .pin-dots{margin:10px 0 0!important;gap:6px!important}
  body.student-only-apk .pin-dots span{height:46px!important}
  body.student-only-apk .pin-forgot-link{margin:7px auto 5px!important}
  body.student-only-apk .pin-fallback-submit{position:static!important;width:100%!important;height:48px!important;min-height:48px!important;flex:0 0 48px!important;margin:0!important;opacity:1!important}
  body.student-only-apk .pin-fingerprint{margin-top:11px!important;font-size:34px!important;flex:0 0 auto!important}
  body.student-only-apk .pin-fingerprint-label{margin-top:4px!important;font-size:9px!important;flex:0 0 auto!important}
  body.student-only-apk .pin-auth-switch{flex:0 0 40px!important;height:40px!important;min-height:40px!important;margin:10px auto 0!important}

  /* Register siswa: shell tetap 1 layar, form panjang scroll di dalam card. */
  body.student-only-apk.student-register-page .mobile-login-screen{display:grid!important;place-items:center!important;overflow:hidden!important}
  body.student-only-apk.student-register-page .mobile-login-card{
    box-sizing:border-box!important;width:min(94vw,520px)!important;max-width:520px!important;
    height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    min-height:0!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:0!important;padding:10px 12px!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    border-radius:22px!important;background:#fff!important;scrollbar-width:none;
  }
  body.student-only-apk.student-register-page .mobile-login-card::-webkit-scrollbar{display:none}
}
@media (max-width:420px) and (max-height:650px){
  body.student-only-apk:not(.student-register-page) .mobile-login-card{min-height:0!important;padding:16px!important}
  body.student-only-apk .pin-login-panel{min-height:0!important;padding:14px 9px!important}
  body.student-only-apk .pin-brand-mark{width:50px!important;height:50px!important;margin-bottom:5px!important}
  body.student-only-apk .pin-login-panel>p{display:none!important}
  body.student-only-apk .pin-dots span{height:38px!important}
  body.student-only-apk .pin-fingerprint{margin-top:6px!important;font-size:28px!important}
  body.student-only-apk .pin-auth-switch{margin-top:5px!important}
}

/* ======================================================================
   V12.7.1 · STUDENT APK PORTRAIT FULLSCREEN FILL
   Menangkap viewport mobile normal maupun Chrome Android desktop-layout.
   ====================================================================== */
@media screen and (orientation: portrait) and (max-width:1300px) {
  html:has(body.student-only-apk),body.student-only-apk{
    width:100%!important;height:100%!important;min-height:100%!important;
    margin:0!important;overflow:hidden!important;overscroll-behavior:none!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-screen,
  body.student-only-apk .pin-login-screen{
    box-sizing:border-box!important;
    width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-hero{display:none!important;}
  body.student-only-apk:not(.student-register-page) .mobile-login-card,
  body.student-only-apk .pin-login-panel{
    box-sizing:border-box!important;
    width:100%!important;max-width:none!important;
    height:100%!important;min-height:0!important;max-height:none!important;
    margin:0!important;
    border-radius:24px!important;
    overflow:hidden!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    background:#fff!important;
    box-shadow:0 18px 48px rgba(86,22,34,.14)!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-card{
    padding:clamp(22px,4dvh,38px) clamp(18px,5vw,34px)!important;
  }
  body.student-only-apk:not(.student-register-page) .mobile-login-card>h2{font-size:clamp(30px,5dvh,42px)!important;}
  body.student-only-apk:not(.student-register-page) .mobile-login-card>p{font-size:clamp(12px,1.8dvh,15px)!important;max-width:420px!important;}
  body.student-only-apk:not(.student-register-page) .mobile-login-form{width:100%!important;padding:clamp(16px,2.5dvh,22px)!important;gap:12px!important;}
  body.student-only-apk:not(.student-register-page) .mobile-login-form input{height:clamp(52px,7dvh,62px)!important;min-height:52px!important;font-size:16px!important;}
  body.student-only-apk:not(.student-register-page) .mobile-login-form button{height:clamp(52px,7dvh,62px)!important;min-height:52px!important;}
  body.student-only-apk:not(.student-register-page) .mobile-role-tabs{width:min(360px,92%)!important;min-height:48px!important;}

  body.student-only-apk .pin-login-panel{
    padding:clamp(22px,4dvh,36px) clamp(16px,4.5vw,30px)!important;
  }
  body.student-only-apk .pin-brand-mark{width:clamp(68px,9dvh,84px)!important;height:clamp(68px,9dvh,84px)!important;margin-bottom:12px!important;}
  body.student-only-apk .pin-login-panel h1{font-size:clamp(30px,5dvh,40px)!important;}
  body.student-only-apk .pin-login-panel>p{font-size:clamp(11px,1.65dvh,14px)!important;margin:6px 0 18px!important;}
  body.student-only-apk .pin-login-form{width:100%!important;max-width:none!important;padding:clamp(16px,2.5dvh,22px)!important;}
  body.student-only-apk .pin-dots{width:100%!important;gap:8px!important;}
  body.student-only-apk .pin-dots span{height:clamp(48px,6.5dvh,58px)!important;}
  body.student-only-apk .pin-fallback-submit{height:clamp(52px,7dvh,60px)!important;min-height:52px!important;flex-basis:auto!important;}
  body.student-only-apk .pin-fingerprint{font-size:clamp(36px,5dvh,44px)!important;}
  body.student-only-apk .pin-auth-switch{min-height:44px!important;height:44px!important;flex-basis:auto!important;}
}

@media screen and (orientation:portrait) and (max-width:1300px) and (max-height:700px){
  body.student-only-apk:not(.student-register-page) .mobile-login-card,
  body.student-only-apk .pin-login-panel{padding:12px 14px!important;}
  body.student-only-apk .pin-brand-mark{width:48px!important;height:48px!important;margin-bottom:4px!important;}
  body.student-only-apk .pin-login-panel h1{font-size:22px!important;}
  body.student-only-apk .pin-login-panel>p{display:none!important;}
  body.student-only-apk .pin-login-form{padding:10px!important;}
  body.student-only-apk .pin-dots span{height:38px!important;}
  body.student-only-apk .pin-fallback-submit{height:42px!important;min-height:42px!important;}
  body.student-only-apk .pin-fingerprint{font-size:28px!important;margin-top:5px!important;}
  body.student-only-apk .pin-auth-switch{height:36px!important;min-height:36px!important;margin-top:4px!important;}
}


/* V12.10 · filter pembayaran + network + zoom */
.stable-home-payment-filters{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}.stable-home-payment-filters::-webkit-scrollbar{display:none}.stable-home-payment-filters button{flex:none;border:1px solid #e7e9ec;border-radius:999px;background:#fff;color:#687781;padding:7px 10px;font-size:7px;font-weight:950}.stable-home-payment-filters button.active{border-color:#bd1730;background:#bd1730;color:#fff}.stable-home-payment-card[hidden]{display:none!important}.mobile-network-banner{position:fixed;z-index:20000;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));padding:10px 12px;border-radius:12px;background:#a50f24;color:#fff;text-align:center;font-size:10px;font-weight:950;box-shadow:0 10px 30px rgba(0,0,0,.2)}.mobile-network-banner[hidden]{display:none!important}.mobile-photo-zoom-trigger{cursor:zoom-in}

/* ===== V12.11.5 · STUDENT REGISTRATION MOBILE POLISH ===== */
@media(max-width:520px){
  .student-only-apk.student-register-page{overflow-y:auto!important;min-height:100dvh!important}
  .student-only-apk.student-register-page .mobile-login-screen{min-height:100dvh!important;height:auto!important;overflow:visible!important;padding:10px!important;display:block!important}
  .student-only-apk.student-register-page .mobile-login-card{height:auto!important;max-height:none!important;min-height:calc(100dvh - 20px)!important;overflow:visible!important;padding:14px!important}
  .student-register-page [data-student-registration-form]{grid-template-columns:1fr!important;gap:10px!important;padding:12px!important}
  .student-register-page .mobile-registration-row{grid-template-columns:1fr!important}
  .student-register-page .registration-master-card{grid-template-columns:1fr!important}
  .student-register-page .registration-nis-check{grid-template-columns:1fr!important}
  .student-register-page .registration-nis-button{width:100%!important;min-height:46px!important}
  .student-register-page [data-student-registration-form] input,
  .student-register-page [data-student-registration-form] select{min-height:48px!important;height:48px!important;font-size:16px!important}
  .student-register-page [data-student-registration-form]>button[type="submit"]{min-height:50px!important;font-size:11px!important}
  .student-register-page .student-register-login a{min-height:44px;display:inline-flex;align-items:center}
}