:root{--green:#0b5d4b;--green2:#117a62;--gold:#c9a227;--ink:#17352e;--muted:#6b7f79;--bg:#eef7f4;--card:#fff;--line:#dbe8e4;--danger:#b42318;--shadow:0 14px 38px rgba(11,93,75,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f7fbfa,var(--bg));min-height:100vh}
button,input,select,textarea{font:inherit}.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--green),#0a7259);color:#fff;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}.brandMark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#f5df83,var(--gold));display:grid;place-items:center;color:var(--green);font-weight:900}.schoolLogo{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.brand h1{margin:0;font-size:21px}.brand p{margin:3px 0 0}
.container{width:min(980px,calc(100% - 28px));margin:26px auto 70px}.card{background:#fff;border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
h2{margin:4px 0 14px}.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:900;color:var(--green2)}
label{display:block;font-weight:800;font-size:14px;margin:13px 0 7px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff}
button{border:0;border-radius:13px;padding:12px 17px;font-weight:900;cursor:pointer}.primary{width:100%;margin-top:16px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff}.ghost{background:#edf5f2;color:var(--green)}.light{background:#fff}.danger{background:var(--danger);color:#fff}.danger-text{color:var(--danger)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}.info-grid>div{padding:13px;border-radius:14px;background:#f1f8f5}.info-grid span,.stat span{display:block;color:var(--muted);font-size:12px}
.section-head,.welcome,.staff-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.check{display:flex;align-items:center;gap:9px}.check input{width:auto}
.child-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.child-card{text-align:left;background:#f1f8f5;color:var(--ink);border:1px solid var(--line)}
.results{margin-top:8px;display:grid;gap:7px}.result{padding:12px;border:1px solid var(--line);border-radius:13px;cursor:pointer}.result b,.result small{display:block}.result small{color:var(--muted)}
.empty,.notice{padding:14px;border-radius:13px;background:#fff8df;color:#6f5400;margin-top:12px}.selected-student{border-left:6px solid var(--gold)}
.list{display:grid;gap:12px}.item{border:1px solid var(--line);border-radius:16px;padding:16px}.item-head{display:flex;justify-content:space-between}.meta{color:var(--muted);font-size:13px;line-height:1.5}.badge{padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900}.waiting{background:#fff2c7}.approved{background:#dff6e9}.rejected{background:#fde7e5}.info{background:#e5efff}.item-actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.stat{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow)}.stat b{font-size:29px}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.76);z-index:100;display:grid;place-content:center;justify-items:center}.spinner{width:38px;height:38px;border:4px solid #d5e7e1;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;background:#17352e;color:#fff;padding:13px 18px;border-radius:13px}
.modal{position:fixed;inset:0;background:rgba(12,40,33,.56);z-index:80;display:grid;place-items:center;padding:18px}.modal-box{background:#fff;border-radius:22px;padding:22px;width:min(620px,100%)}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upload-box{display:block;padding:16px;border:1px dashed #8fb9ac;border-radius:16px;background:#f3faf7}
@media(max-width:700px){.grid2,.info-grid,.stats{grid-template-columns:1fr 1fr}.container{width:calc(100% - 18px)}}
@media(max-width:430px){.grid2,.info-grid,.child-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.brandMark{display:none}}
.logo-upload-box{display:flex;align-items:center;gap:14px;padding:14px;border:1px dashed #8fb9ac;border-radius:16px;background:#f3faf7}
.logo-upload-box>div{flex:1}
.logo-upload-box small{display:block;color:var(--muted);margin-top:6px}
.logo-preview-image{width:90px;height:90px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:50%;padding:5px}
@media(max-width:520px){.logo-upload-box{align-items:flex-start;flex-direction:column}}
.brand small{opacity:.72}
#guardianEmail{text-transform:none}
.header-actions{display:flex;gap:9px;align-items:center}
.app-splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(145deg,#0b5d4b,#08745a);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s ease}
.app-splash img{width:118px;height:118px;border-radius:28px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.app-splash h1{margin:22px 0 5px;font-size:28px;letter-spacing:.5px}
.app-splash p{margin:0;letter-spacing:2px;font-weight:800;opacity:.9}
.splash-loader{width:34px;height:34px;margin-top:25px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}
.splash-hide{opacity:0;visibility:hidden}
.install-box{max-width:540px}
.install-guide{padding:15px;border:1px solid var(--line);border-radius:15px;background:#f3faf7;margin-top:12px}
.install-guide h3{margin:0 0 7px}
@media(max-width:600px){
  .header-actions{gap:6px}
  #installAppBtn{padding:10px 11px;font-size:12px}
  #staffBtn{padding:10px 11px}
}
@media(display-mode:standalone){
  #installAppBtn{display:none}
  body{padding-top:env(safe-area-inset-top)}
}
.time-entry{display:grid;grid-template-columns:1fr 92px;gap:9px}
.time-entry select{min-width:0}
@media(max-width:420px){.time-entry{grid-template-columns:1fr 82px}}

.decision-record{
  margin-top:12px;
  padding:12px 14px;
  border-radius:13px;
  background:#f1f8f5;
  border:1px solid #cfe3da;
  color:#244f40;
  line-height:1.55;
  font-size:13px;
}
.decision-record span{
  display:inline-block;
  margin-top:5px;
  font-weight:800;
  color:#0b5d4b;
}

.attachment-preview{display:block;margin-top:13px;padding:10px;border:1px solid var(--line);border-radius:15px;background:#f3faf7;text-decoration:none;color:var(--green);font-weight:800}
.attachment-preview img{display:block;width:100%;max-height:300px;object-fit:contain;background:#fff;border-radius:11px;margin-bottom:8px}
.conflict-note{background:#fff1d6;color:#6d4700;border:1px solid #efd39b}
.item-actions .danger{width:auto;margin:0}

.attachment-preview img[hidden]{display:none!important}
.db-version-note{font-size:12px;color:var(--muted)}