:root{--nav:#075985;--nav2:#0369a1;--bg:#eef4f8;--card:#fff;--muted:#64748b;--line:#d6e1ea;--yellow:#fff6c7;--green:#15803d;--blue:#2563eb;--red:#dc2626;--purple:#7c3aed;--orange:#c2410c;--shadow:0 3px 14px rgba(15,76,129,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:#1f2937}.top{background:linear-gradient(135deg,#064e3b,#075985 56%,#0c4a6e);color:#fff;padding:22px 18px;box-shadow:0 2px 10px rgba(0,0,0,.12)}.topBar{display:flex;align-items:center;gap:16px}.topLogos{display:flex;align-items:center;gap:10px;flex:0 0 auto}.topLogos img{height:58px;width:auto;object-fit:contain;background:rgba(255,255,255,.08);padding:4px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.18)}.topText{min-width:0}.top h1{margin:0;font-size:25px;letter-spacing:.2px}.top p{margin:6px 0 0;opacity:.92}.wrap{max-width:1380px;margin:18px auto;padding:0 14px}.status{padding:12px 14px;border-radius:9px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;margin-bottom:14px;font-weight:650;line-height:1.45}.status.ok{background:#ecfdf5;border-color:#a7f3d0;color:#166534}.status.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}.card{background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:15px;box-shadow:var(--shadow);overflow:hidden}.cardTitle{padding:11px 15px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:850;color:var(--nav);display:flex;justify-content:space-between;align-items:center;gap:10px}.cardBody{padding:15px}.picker,.btnbar,.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.fileBtn,.btn,.navBtn{border:0;border-radius:8px;padding:10px 15px;color:#fff;font-weight:800;cursor:pointer;font-size:13px}.fileBtn{background:#075985}.btn.save{background:var(--green)}.btn.edit{background:var(--blue)}.btn.del{background:var(--red)}.btn.view{background:var(--purple)}.btn.down{background:#334155}.btn.new{background:#0f766e}.btn.clear{background:#64748b}.btn:hover,.fileBtn:hover,.navBtn:hover{filter:brightness(.96)}.btn:disabled,.fileBtn:disabled{opacity:.45;cursor:not-allowed}.dbName{font-weight:750;color:#075985}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}.layout{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}.sidebar{position:sticky;top:10px}.nav{display:grid;gap:7px;padding:10px}.navBtn{background:#eaf2f7;color:#164e63;text-align:left;border:1px solid #d3e3ec}.navBtn.active{background:#075985;color:#fff;border-color:#075985}.navBtn span{display:block;font-size:11px;opacity:.72;margin-top:2px;font-weight:600}.dashboard{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:10px;margin-bottom:14px}.metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;box-shadow:var(--shadow)}.metric .n{font-size:24px;font-weight:900;color:#075985}.metric .l{font-size:11px;font-weight:800;color:#64748b;margin-top:3px;text-transform:uppercase;letter-spacing:.3px}.formGrid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px}.field{min-width:0}.field.full{grid-column:1/-1}.field.two{grid-column:span 2}label{display:block;font-size:12px;font-weight:800;color:#475569;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid #b9c8d5;border-radius:8px;padding:9px 10px;background:#fff;font-size:13px;font-family:inherit}textarea{min-height:72px;resize:vertical}.yellow{background:var(--yellow);border-color:#e5b200;font-weight:700}.readonly{background:#f1f5f9;color:#475569}.searchList{width:100%;height:126px;margin-top:8px;border:1px solid #cbd5e1;border-radius:8px}.personCard{background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;padding:11px;margin-top:10px}.personInfo{display:grid;grid-template-columns:90px 1fr 90px 1fr;gap:5px;font-size:12px}.personInfo b{color:#334155}.sectionNote{padding:9px 11px;border-radius:8px;background:#f8fafc;color:#64748b;font-size:12px;line-height:1.45;margin:10px 0}.tableWrap{overflow:auto;max-height:430px;border:1px solid var(--line);border-radius:9px}.card.flashResult{outline:3px solid rgba(124,58,237,.22);box-shadow:0 0 0 6px rgba(124,58,237,.08),var(--shadow)}.results{width:100%;border-collapse:collapse;font-size:12px;min-width:720px}.results th,.results td{border-bottom:1px solid #e5e7eb;padding:7px 8px;text-align:left;white-space:nowrap}.results th{position:sticky;top:0;background:#eaf2f7;color:#164e63;z-index:1}.results tr[data-row]{cursor:pointer}.results tr[data-row]:hover{background:#eff6ff}.results tr.selected{background:#dbeafe}.subtle{color:#64748b;font-size:12px}.hidden{display:none!important}.attendanceGrid{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px}.currentBox{padding:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:12px;line-height:1.6}.footer{text-align:center;color:#64748b;font-size:11px;padding:8px 0 28px}.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e2e8f0;color:#475569}.badge.ok{background:#dcfce7;color:#166534}.drop{border:2px dashed #9db4c7;border-radius:10px;padding:13px;text-align:center;color:#526579;margin-top:10px}.searchTop{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.dbToggle{position:fixed;right:18px;top:118px;z-index:1100;border:0;border-radius:999px;padding:10px 15px;background:#0f172a;color:#fff;font-weight:850;cursor:pointer;box-shadow:0 5px 18px rgba(15,23,42,.28);letter-spacing:.2px}.dbToggle:hover{background:#1e293b}.dbDrawer{position:fixed;right:18px;top:165px;z-index:1090;width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 185px);overflow:auto;background:#fff;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 16px 44px rgba(15,23,42,.28);transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease}.dbDrawer.open{transform:translateX(0);opacity:1;pointer-events:auto}.dbDrawerHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#0f172a;color:#fff;font-weight:850;position:sticky;top:0;z-index:2}.dbClose{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:7px;padding:5px 9px;font-size:17px;cursor:pointer}.dbDrawerBody{padding:13px}.dbDrawer .status{margin-bottom:11px}.dbDrawer .card{box-shadow:none;margin:0;border-radius:10px}.dbDrawer .picker{align-items:center}.dbDrawer .fileBtn,.dbDrawer .btn.down{flex:1;min-width:160px}.dbDrawer .dbName{display:block;width:100%;padding-top:3px;word-break:break-word}.dbBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.18);z-index:1080;opacity:0;pointer-events:none;transition:opacity .22s}.dbBackdrop.open{opacity:1;pointer-events:auto}@media(max-width:680px){.galleryStrip{grid-auto-columns:82vw}.galleryItem{aspect-ratio:16/9;height:auto}.galleryPrev{left:6px}.galleryNext{right:6px}.galleryClose{right:6px}.galleryLightbox{padding:12px}.dbToggle{top:auto;bottom:16px;right:12px}.dbDrawer{top:70px;right:10px;width:calc(100vw - 20px);max-height:calc(100vh - 90px)}}

.galleryCard{background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:15px;box-shadow:var(--shadow);overflow:hidden}.galleryHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:linear-gradient(90deg,#f0fdf4,#eff6ff);border-bottom:1px solid var(--line)}.galleryHeadText h2{margin:0;font-size:15px;color:#075985;letter-spacing:.2px}.galleryHeadText p{margin:3px 0 0;font-size:11px;color:#64748b}.galleryStrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,290px);gap:10px;overflow-x:auto;padding:12px 14px 15px;scroll-snap-type:x mandatory;scrollbar-width:thin}.galleryItem{position:relative;aspect-ratio:16/9;height:auto;border:0;padding:0;border-radius:11px;overflow:hidden;cursor:pointer;background:#e2e8f0;box-shadow:0 2px 8px rgba(15,23,42,.10);scroll-snap-align:start}.galleryItem img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .25s ease,filter .25s ease}.galleryItem:hover img{transform:scale(1.045);filter:brightness(.92)}.galleryOverlay{position:absolute;inset:auto 0 0;padding:24px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.68));color:#fff;text-align:left;font-size:11px;font-weight:800;letter-spacing:.2px}.galleryZoom{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.48);color:#fff;font-size:15px;backdrop-filter:blur(3px)}.galleryLightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.91);z-index:300;padding:24px}.galleryLightbox.open{display:flex}.galleryLightboxInner{position:relative;max-width:min(1100px,94vw);max-height:92vh;width:100%;display:flex;flex-direction:column;align-items:center;gap:9px}.galleryLightbox img{width:min(1100px,94vw);aspect-ratio:16/9;max-height:80vh;object-fit:cover;object-position:center center;border-radius:12px;box-shadow:0 18px 70px rgba(0,0,0,.5);background:#0f172a}.galleryCaption{color:#e2e8f0;font-size:13px;font-weight:700;text-align:center}.galleryClose,.galleryPrev,.galleryNext{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.25)}.galleryClose{right:0;top:-2px;width:40px;height:40px;border-radius:50%;font-size:24px;z-index:2}.galleryPrev,.galleryNext{top:50%;transform:translateY(-50%);width:44px;height:58px;border-radius:10px;font-size:26px}.galleryPrev{left:-54px}.galleryNext{right:-54px}.galleryClose:hover,.galleryPrev:hover,.galleryNext:hover{background:rgba(255,255,255,.24)}
@media(max-width:1050px){.dashboard{grid-template-columns:repeat(3,1fr)}.formGrid{grid-template-columns:repeat(2,1fr)}.attendanceGrid{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}.sidebar{position:static}.nav{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.topBar{align-items:flex-start;gap:12px}.topLogos img{height:46px}.top h1{font-size:20px}.dashboard{grid-template-columns:repeat(2,1fr)}.formGrid{grid-template-columns:1fr}.field.two{grid-column:span 1}.attendanceGrid{grid-template-columns:1fr 1fr}.nav{grid-template-columns:1fr 1fr}.personInfo{grid-template-columns:80px 1fr}.searchTop{grid-template-columns:1fr}.btn{flex:1}}