:root{--ink:#1c3047;--muted:#74839a;--primary:#245eaa;--navy:#122f56;--bg:#f5f7fb;--line:#e4e9f2;--green:#12825b;--red:#c34b57}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'DM Sans','Segoe UI',sans-serif;background:var(--bg);font-size:14px}a{text-decoration:none;color:var(--primary)}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{display:flex;min-height:100vh}.sidebar{width:256px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;top:0;bottom:0}.brand{height:94px;display:flex;gap:12px;align-items:center;padding:22px;border-bottom:1px solid #f1f3f7;color:var(--navy)}.mark,.symbol{width:42px;height:42px;background:#205caa;border-radius:14px;color:#fff;font-size:32px;display:grid;place-items:center}.brand strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;letter-spacing:.4px}.brand small{display:block;font-size:9px;letter-spacing:1.3px;color:#8290a0;margin-top:3px}.navtitle{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#a4aeb9;padding:30px 25px 11px}.sidebar nav{padding:0 12px;display:grid;gap:5px}.navlink{display:flex;gap:13px;align-items:center;color:#63738b;padding:13px 16px;border-radius:11px;font-weight:600}.navlink:hover,.navlink.current{color:#1455a0;background:#eaf2fe}.navicon{font-size:21px;width:22px;text-align:center}.sidebottom{margin-top:auto;padding:23px;font-size:12px;color:#455773;border-top:1px solid var(--line)}.sidebottom small{display:block;color:#9da9b6;margin:7px 0 0 17px}.statusdot,.dot{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:7px}.main{margin-left:256px;width:calc(100% - 256px)}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between;color:#728097;font-size:12px}.bread{color:#a3acb8}.profile{display:flex;align-items:center;gap:11px;color:var(--ink)}.profile small{display:block;font-size:11px;color:#9ca8b9;margin-top:4px}.avatar{background:#eaf2fd;color:#1a64b4;border-radius:12px;width:37px;height:37px;display:grid;place-items:center;font-weight:800}.logout{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;color:#788ca4}.content{padding:34px;max-width:1520px;margin:auto}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.9px;color:#326cae}.pagehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:12px}.pagehead h1{font:800 27px 'Plus Jakarta Sans',sans-serif;margin:8px 0}.pagehead p{color:#7b8ba2;margin:0}.tag{font-size:10px;font-weight:800;letter-spacing:1.1px;color:#2774bb;background:#e8f1fc;padding:10px 13px;border-radius:30px;white-space:nowrap}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:20px}.metric,.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 12px rgba(24,54,92,.025)}.metric{padding:21px 23px;min-height:128px}.metric span{display:block;font-size:12px;color:#7887a0;font-weight:600}.metric b{display:block;font:800 29px 'Plus Jakarta Sans',sans-serif;margin:9px 0 2px}.metric small{color:#a0abba}.offline{font-size:17px!important;color:var(--red)}.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-bottom:20px}.colsform{grid-template-columns:1fr 1fr}.panel{padding:22px;margin-bottom:20px;min-width:0}.cols .panel{margin-bottom:0}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:19px;border-bottom:1px solid #edf0f5;margin-bottom:18px}.panelhead h2{font:800 15px 'Plus Jakarta Sans',sans-serif;margin:0}.panelhead a{font-size:12px;font-weight:700}.timeline,.records{display:grid;gap:15px}.event{display:flex;align-items:flex-start;gap:13px}.eventicon{background:#edf3fc;color:#2266ba;border-radius:11px;width:38px;height:38px;display:grid;place-items:center;flex-shrink:0}.event strong,.record strong{display:block;font-size:13px}.event p,.record p{color:#728097;line-height:1.55;margin:6px 0}.event small,.record small,.muted{color:#96a3b3}.countrows>div{display:flex;align-items:center;padding:14px 3px;border-bottom:1px solid #f0f3f7;color:#6c7d91}.countrows b{margin-left:auto;color:var(--ink)}.red{background:var(--red)}.blue{background:var(--primary)}.green{background:var(--green)}.note{background:#f0f5fc;border:1px solid #e3ecf9;border-radius:11px;font-size:12px;color:#55718e;padding:13px 15px;line-height:1.65;margin:15px 0}.steps{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.steps span{background:#f3f7fd;border:1px solid #e5edf7;border-radius:9px;padding:12px;color:#6c8aac}.steps b{color:#1b4e83}.steps i{font-style:normal;color:#adbacb}label{font-size:12px;font-weight:700;display:block;color:#445b78;margin-bottom:15px}input:not([type=checkbox]),select,textarea{margin-top:8px;display:block;width:100%;padding:11px 12px;color:#29425f;background:#fff;border:1px solid #dce4ef;border-radius:9px;outline:none}input:focus,select:focus,textarea:focus{border-color:#377fcd;box-shadow:0 0 0 3px #e5f0fd}textarea{resize:vertical}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.formsub{font-weight:800;margin-bottom:12px}.formsub small{color:#91a0b1;font-weight:400;margin-left:5px}.studentcheck{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin-bottom:18px;display:grid}.checkstudent{display:flex;align-items:center;gap:8px;padding:7px 3px;margin:0;font-weight:500}.checkstudent input{accent-color:var(--primary)}.primary,.secondary{border:0;border-radius:9px;padding:12px 18px;font-weight:700;background:var(--primary);color:#fff}.secondary{background:#eef4fc;color:#245eaa}.primary:hover{background:#1b4a89}.pill{font-size:10px;font-weight:800;border-radius:30px;color:#1d70a7;background:#e6f2ff;padding:7px 11px;white-space:nowrap}.pill.light{background:#f4f6f9;color:#6d8298}.record{border-bottom:1px solid var(--line);padding-bottom:15px}.record:last-child{border:0}.recordtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.recordtop>span:not(.score):not(.state){font-size:11px;color:#9aa7b5}.detailtags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.detailtags span{font-size:10px;background:#f2f5f9;padding:6px;border-radius:5px;color:#71849c}.score,.state{font-size:10px;padding:5px 9px;border-radius:20px;font-weight:800;white-space:nowrap}.positive,.done{background:#e8f7f0;color:var(--green)}.negative{background:#fff0f0;color:var(--red)}.pending{background:#fff6e7;color:#b67b19}.inlineform{display:flex;gap:9px;margin-top:8px}.inlineform input{margin:0!important}.outcome{background:#e8f7f0;padding:12px;border-radius:8px;font-size:12px;color:#315e49}.studentgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.studentcard{border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:11px;padding:13px;color:#1c3047}.studentcard.selected,.studentcard:hover{border-color:#8eb6e8;background:#f4f8ff}.studentavatar{background:#edf3fc;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;color:#2675c0;font-weight:800}.studentcard div{flex:1;min-width:0}.studentcard strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.studentcard small{display:block;color:#99a5b7;margin-top:4px}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:11px;color:#70829a;background:#f6f8fb;padding:13px}td{padding:13px;font-size:12px;border-bottom:1px solid #eef1f5}td strong{color:#2c4667}.small{font-size:11px}.footer{text-align:center;color:#abb5c1;padding:14px 0 5px;font-size:11px}.logrow{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);gap:8px}.logrow span{color:#9aa7b5;font-size:11px}.alert{border-radius:9px;padding:13px;margin-bottom:16px}.error{background:#fff1f1;color:#a63b4b}.success{background:#eaf8f0;color:#27734b}.menutoggle{display:none}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.loginbrand{background:linear-gradient(145deg,#122a4d,#205dac);color:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12vw}.symbol{background:#ffffff24;margin-bottom:23px;font-size:50px;width:69px;height:69px}.loginbrand h1{font:800 48px 'Plus Jakarta Sans',sans-serif;margin:0}.loginbrand p{font-size:21px;line-height:1.7;max-width:410px;color:#d5e7fc}.loginbrand small{font-size:10px;letter-spacing:1.3px;color:#b6cde7;margin-top:32px}.loginpanel{align-self:center;width:min(420px,85%);justify-self:center}.loginpanel h2{font:800 29px 'Plus Jakarta Sans',sans-serif;margin:8px 0}.loginpanel p{line-height:1.5;margin-bottom:25px}.wide{width:100%;display:flex;justify-content:space-between}.hint{margin-top:20px;text-align:center;color:#8392a5;font-size:12px}@media(max-width:1080px){.metrics{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}.studentgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{transform:translateX(-100%);z-index:20;transition:transform .2s}.showmenu .sidebar{transform:translateX(0);box-shadow:15px 0 40px #0002}.main{margin-left:0;width:100%}.topbar{height:67px;padding:0 14px}.menutoggle{display:block;border:0;background:none;color:#22568d;font-size:25px;margin-right:10px}.profile small,.bread,.profile b{display:none}.content{padding:19px 15px}.pagehead{align-items:flex-start}.pagehead h1{font-size:23px}.pagehead p{font-size:12px}.tag{font-size:9px}.metrics{gap:10px}.metric{padding:15px;min-height:107px}.metric b{font-size:23px}.panel{padding:17px}.studentgrid{grid-template-columns:1fr}.login{grid-template-columns:1fr}.loginbrand{min-height:220px;padding:30px}.loginbrand h1{font-size:31px}.loginbrand p{font-size:14px}.loginbrand small{margin-top:9px}.loginpanel{padding:30px 0}.steps i{display:none}.steps span{flex:1;min-width:120px}.formgrid{grid-template-columns:1fr}.inlineform{flex-direction:column}.logrow{flex-direction:column}}@media print{.sidebar,.topbar,.pagehead .tag,.primary,.secondary{display:none!important}.main{margin:0;width:100%}.content{padding:0}.panel,.metric{box-shadow:none;break-inside:avoid}.footer{display:block}}

/* SIPALAWA institutional design system · local assets only */
:root{--navy:#102c4f;--navy-mid:#183b64;--primary:#20588f;--ink:#1c314c;--muted:#607086;--line:#dfe5ed;--bg:#f4f6f9;--green:#16714f;--red:#ad3e4b}
html{scroll-behavior:smooth}body{font-family:Arial,"Segoe UI",Tahoma,sans-serif;font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg)}
button,input,textarea,select{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8db8e6;outline-offset:2px}
.shell{min-width:0}.sidebar{background:var(--navy);border:0;width:270px;color:#fff;z-index:45;overflow-y:auto}.brand{min-height:87px;height:auto;border-bottom:1px solid #ffffff20;color:white;padding:20px 22px}.brand strong{font-family:Arial,"Segoe UI",sans-serif;color:white;font-size:20px;letter-spacing:.2px;font-weight:750}.brand small{color:#bdcfe1;font-size:9px;letter-spacing:1px}.mark{width:43px;height:43px;background:#fff;color:var(--navy);font-size:22px;font-family:Georgia,serif;font-weight:800;border-radius:10px}.navlabel{font-size:10px;letter-spacing:1.5px;color:#9fb7d0;font-weight:700;padding:25px 22px 10px}.sidebar nav{display:flex;flex-direction:column;gap:3px;padding:0 11px 18px}.sidebar nav a{color:#d7e1ec;display:flex;align-items:center;min-height:40px;padding:10px 13px;border-radius:7px;font-size:12.5px;font-weight:550;line-height:1.35;transition:background .12s ease}.sidebar nav a:hover{background:#ffffff13;color:#fff}.sidebar nav a.active,.sidebar nav a[aria-current=page]{color:#fff;background:#34618f;box-shadow:inset 3px 0 0 #c5ddfa}.sidefoot{margin-top:auto;padding:20px 22px;border-top:1px solid #ffffff22;color:#dbe6ef;font-size:12px}.sidefoot small{color:#a7bed4}.main{margin-left:270px;width:calc(100% - 270px);min-width:0}.topbar{background:#fff;height:72px;border-bottom:1px solid var(--line);padding:0 31px;gap:12px}.topbar-location{min-width:0;display:flex;align-items:center;gap:10px}.crumb{color:#6a7d93}.mobilebrand{display:none;font-weight:800;letter-spacing:.6px;color:var(--navy)}.userchip{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end}.userchip b{font-size:12px}.userchip small{font-size:11px;color:#687b92}.badge-demo{background:#edf3fa!important;color:#345f89!important;border:1px solid #dce7f3;border-radius:5px!important;font-weight:700;letter-spacing:.5px}.smallbtn{white-space:nowrap}.content{max-width:1540px;padding:30px 31px}.pageintro{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:25px;padding-bottom:22px;border-bottom:1px solid var(--line)}.pageintro h1{font-family:Arial,"Segoe UI",sans-serif;font-size:27px;letter-spacing:-.5px;font-weight:750;margin:5px 0 7px}.pageintro p{margin:0;color:var(--muted);font-size:13px}.eyebrow{color:#42678b;font-size:10px;letter-spacing:1.5px;font-weight:800}.metrics{gap:14px}.metric,.panel{border:1px solid #dce3eb;background:#fff;border-radius:10px;box-shadow:0 2px 7px rgba(19,44,73,.025)}.metric{padding:20px;min-height:113px;border-top:3px solid #3e719e}.metric span{font-weight:650;font-size:12px;color:#5b6d82}.metric b{font-family:Arial,"Segoe UI",sans-serif;font-size:29px;font-weight:750;margin-top:11px}.panel{padding:21px}.panelhead{margin-bottom:18px;padding-bottom:14px;flex-wrap:wrap}.panelhead h2{font-family:Arial,"Segoe UI",sans-serif;font-size:15px;font-weight:750;line-height:1.4}.record{padding:12px 0}.recordtop{align-items:flex-start}.record p{line-height:1.6}.record small{color:#6d8094}.primary,.secondary{border-radius:7px;font-weight:700;min-height:40px;transition:background .12s ease}.primary{background:var(--primary)}.primary:hover{background:#173f69}.secondary{background:#eef3f8;color:#234f79;border:1px solid #d5e0eb}.secondary:hover{background:#e1eaf3}.pill{border-radius:5px;background:#e9f1f8;color:#235780;font-size:10px;font-weight:750}.note{border-radius:7px;background:#f1f5f9;color:#4e657f;border-color:#dbe5ef}.score,.state{border-radius:5px;font-size:10px}.panel input:not([type=checkbox]),.panel select,.panel textarea,.loginpanel input{border:1px solid #cbd6e2;border-radius:6px;padding:10px 11px;min-height:41px}.panel textarea{min-height:86px}.panel label{color:#2c435c;font-size:12px}.tablewrap{border:1px solid var(--line);border-radius:7px;overflow-x:auto}table{min-width:540px}th{color:#37536f;background:#edf2f7;font-size:11px;white-space:nowrap;border-bottom:1px solid #d6e0eb}td{font-size:12px}tr:hover td{background:#f8fafc}.studentgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.studentcard{border-radius:7px;background:white}.studentcard:hover{background:#f5f8fb}.login{grid-template-columns:1.06fr .94fr;background:#fff}.loginbrand{padding:clamp(55px,8vw,145px);background:linear-gradient(150deg,#0f2948 0%,#163c65 75%,#225b8d 100%)}.loginbrand h1{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(36px,4vw,56px);letter-spacing:1px}.loginbrand p{font-size:18px;color:#d6e3f0}.symbol{background:#ffffff20;border:1px solid #ffffff40;border-radius:12px;font-family:Georgia,serif;font-size:37px}.loginpanel{max-width:420px}.loginpanel h2{font-family:Arial,"Segoe UI",sans-serif;font-size:28px}.navbackdrop{display:none}.menutoggle{display:none;border:1px solid #d8e1eb;background:#fff;color:#183e66;width:40px;height:40px;border-radius:7px;font-size:20px;align-items:center;justify-content:center}
@media(max-width:1100px){.sidebar{width:236px}.main{margin-left:236px;width:calc(100% - 236px)}.content{padding:23px}.topbar{padding:0 23px}.studentgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.sidebar{width:min(300px,84vw);transform:translateX(-105%);transition:transform .2s ease;box-shadow:none}.showmenu .sidebar{transform:translateX(0);box-shadow:15px 0 35px #071c3580}.showmenu .navbackdrop{display:block;position:fixed;inset:0;background:#102c4f66;z-index:40}.main{margin:0;width:100%}.topbar{height:64px;padding:0 14px}.menutoggle{display:inline-flex}.mobilebrand{display:inline}.crumb{display:none}.userchip{gap:8px}.userchip small{display:none}.userchip b{display:none}.content{padding:20px 15px}.pageintro h1{font-size:23px}.pageintro{margin-bottom:18px}.colsform{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:15px;min-height:101px}.metric b{font-size:25px}.panel{padding:16px}.studentgrid{grid-template-columns:1fr}.login{grid-template-columns:1fr}.loginbrand{min-height:220px;padding:30px}.loginbrand h1{font-size:34px}.loginbrand p{font-size:14px;margin-bottom:4px}.loginpanel{width:min(460px,90%);padding:30px 0}.recordtop{flex-wrap:wrap}.inlineform{flex-direction:column}.filterbar{flex-direction:column}.filterbar select{min-width:0;width:100%}}
@media(max-width:400px){.metrics{grid-template-columns:1fr 1fr}.metric{padding:12px}.metric span{font-size:11px}.metric b{font-size:22px}.topbar .badge-demo{display:none}.panelhead{align-items:start}.pageintro h1{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media print{.sidebar,.topbar,.navbackdrop,.menutoggle{display:none!important}.main{width:100%;margin:0}.content{max-width:none}}