/* PERANGKAT AJAR V8 — mobile-first UI polish */
:root{--v8-navy:#123f5f;--v8-blue:#176d98;--v8-gold:#f4bf32;--v8-bg:#eef4f7;--v8-line:#d4e0e7;--v8-text:#172a3a}
html{scroll-padding-top:12px}body{overflow-x:hidden}img,svg,video,canvas,iframe{max-width:100%;height:auto}.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}.topbar,.site-header,.toolbar{isolation:isolate}.topbar-inner{width:min(1180px,calc(100% - 20px));margin:auto}.topbar .brand img,.site-header .brand img{object-fit:contain}.navlinks,.top-actions,.toolbar-actions{scrollbar-width:none}.navlinks::-webkit-scrollbar,.top-actions::-webkit-scrollbar,.toolbar-actions::-webkit-scrollbar{display:none}
.school-head{align-items:center}.school-head img{object-fit:contain}.doc-title h1,.doc-title h2,.hero h1{overflow-wrap:anywhere;text-wrap:balance}.doc-title p,.hero p,.section p{overflow-wrap:anywhere}.section,.card,.panel,.callout{max-width:100%}
@media(max-width:760px){
 html{font-size:15px}.topbar,.site-header,.toolbar{position:relative!important;top:auto!important}.topbar-inner{width:100%;padding:8px 8px 9px;display:grid!important;gap:7px!important}.topbar .brand,.site-header .brand{min-width:0;gap:8px}.topbar .brand img,.site-header .brand img{width:38px!important;height:38px!important;flex:0 0 38px;padding:3px}.topbar .brand span,.site-header .brand span{font-size:1rem!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navlinks,.top-actions,.toolbar-actions{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overscroll-behavior-inline:contain;padding:1px 0 3px!important;max-width:100%}.navlinks a,.navlinks button,.top-actions a,.top-actions button,.toolbar-actions a,.toolbar-actions button{flex:0 0 auto!important;min-height:40px!important;padding:7px 11px!important;border-radius:10px!important;font-size:.78rem!important;line-height:1.15!important;white-space:nowrap!important}
 .doc-shell,.shell,.page-shell,.pro-shell,.container,.wrapper{width:calc(100% - 12px)!important;margin:8px auto 28px!important}.school-head{display:grid!important;grid-template-columns:68px minmax(0,1fr)!important;gap:12px!important;padding:14px!important;border-radius:15px!important}.school-head img{width:62px!important;height:62px!important}.school-head p{margin:2px 0!important;font-size:.9rem!important;line-height:1.35!important}.school-head p strong{font-size:.95rem!important}.doc-title{padding:20px 10px 16px!important}.doc-title .eyebrow{font-size:.78rem!important;letter-spacing:.12em!important}.doc-title h1,.doc-title h2{font-size:clamp(1.75rem,8vw,2.35rem)!important;line-height:1.16!important;margin:8px 0!important}.doc-title>p{font-size:1rem!important;margin:8px 0 14px!important}.doc-meta{gap:6px!important;justify-content:center!important}.doc-meta .badge{font-size:.76rem!important;padding:6px 10px!important}.section,.card,.panel{padding:14px!important;margin:12px 0!important;border-radius:14px!important}.section h2,.card h2,.panel h2{font-size:1.35rem!important;line-height:1.25!important}.summary-grid,.grid,.stats,.profile-head{gap:10px!important}.summary{padding:12px!important}.summary b{font-size:1.65rem!important}.callout{padding:12px!important;line-height:1.55!important}.data-table{min-width:720px}.actions{gap:7px!important}.actions .btn,.actions a,.actions button{min-height:42px!important;padding:8px 11px!important;font-size:.82rem!important}.sign-grid,.signature-grid-v2{grid-template-columns:1fr!important;gap:18px!important}.signature,.signature-block-v2{text-align:center!important}.signature-img-v2{max-height:92px!important}.footer-note{font-size:.8rem!important;padding:12px!important}
 /* diagnostic pages */
 body:has(.assessment-form) .topbar{border-bottom-width:2px!important;padding:6px 8px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important}.assessment-form~*{max-width:100%}body:has(.assessment-form) .brand span{display:none!important}body:has(.assessment-form) .top-actions{justify-content:flex-start!important}body:has(.assessment-form) .shell{width:calc(100% - 10px)!important;margin:6px auto 26px!important;border-radius:16px!important;overflow:visible!important}body:has(.assessment-form) .hero{padding:15px 13px!important;border-radius:15px!important}body:has(.assessment-form) .hero-grid{grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important}body:has(.assessment-form) .hero img{width:52px!important;height:52px!important;border-radius:12px!important}body:has(.assessment-form) .hero h1{font-size:clamp(1.55rem,7vw,2.1rem)!important;line-height:1.12!important;margin:5px 0!important}body:has(.assessment-form) .hero p{font-size:.9rem!important;line-height:1.48!important;margin:7px 0!important}body:has(.assessment-form) .meta{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;padding-bottom:2px}body:has(.assessment-form) .meta span{flex:0 0 auto!important;font-size:.72rem!important;padding:4px 8px!important}body:has(.assessment-form) .content{padding:10px 7px!important}body:has(.assessment-form) .notice{padding:11px 12px!important;margin-bottom:10px!important;font-size:.9rem!important}body:has(.assessment-form) .stepper{display:flex!important;overflow-x:auto!important;gap:6px!important;margin:9px 0 12px!important;padding-bottom:2px}body:has(.assessment-form) .stepper a{flex:0 0 auto!important;min-height:40px!important;padding:7px 11px!important;font-size:.78rem!important}body:has(.assessment-form) .card{padding:13px!important;margin:10px 0!important;border-radius:13px!important}body:has(.assessment-form) .card h2{font-size:1.35rem!important;padding-bottom:7px!important;margin-bottom:12px!important}body:has(.assessment-form) .student-grid{grid-template-columns:1fr!important;gap:9px!important}body:has(.assessment-form) .student-grid .field:first-child{grid-column:auto!important}body:has(.assessment-form) .field input,body:has(.assessment-form) .field select,body:has(.assessment-form) textarea{min-height:48px!important;border-radius:11px!important}body:has(.assessment-form) .privacy{font-size:.84rem!important;line-height:1.5!important;padding:10px!important}body:has(.assessment-form) .question{padding:10px!important;margin:9px 0!important}body:has(.assessment-form) .option{padding:10px!important}body:has(.assessment-form) .actions{display:grid!important;grid-template-columns:1fr!important}body:has(.assessment-form) .actions .btn{width:100%!important}
}
@media(max-width:430px){.topbar .brand span,.site-header .brand span{font-size:.92rem!important}.school-head{grid-template-columns:56px minmax(0,1fr)!important;gap:9px!important;padding:11px!important}.school-head img{width:52px!important;height:52px!important}.school-head p{font-size:.8rem!important}.school-head p strong{font-size:.84rem!important}.doc-title h1,.doc-title h2{font-size:1.72rem!important}.section,.card,.panel{padding:12px!important}}
@media print{.topbar,.site-header,.toolbar{position:static!important}}