:root{--nav:#062d54;--nav2:#0b3e70;--blue:#087cf0;--green:#35b96e;--red:#ef5350;--gold:#f4b62b;--purple:#7c4dff;--bg:#f1f5fa;--line:#e0e8f1;--text:#183a63;--muted:#6e819b}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#30445f;font-size:14px}a{text-decoration:none;color:inherit}.layout{display:flex;min-height:100vh}.sidebar{width:212px;background:linear-gradient(180deg,#092f55,#061e38);color:#e9f3ff;position:fixed;left:0;top:0;bottom:0;overflow:auto;z-index:10}.brand{padding:14px 10px 12px;display:flex;gap:7px;align-items:flex-start;border-bottom:1px solid #ffffff20}.brand-menu{font-size:19px;margin-top:4px}.church{font-size:45px;line-height:.8;color:#f5d16b}.brand-title{font-family:Georgia;font-weight:bold;color:#fff;font-size:15px;white-space:nowrap}.brand-sub{font-size:7px;font-weight:bold;margin-top:4px;white-space:nowrap}.brand-motto{font-size:8px;color:#f1cb67;font-family:Georgia;margin-top:5px;line-height:1.2}.nav{padding:10px 7px}.nav a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:7px;color:#d7e7f8;margin:2px 0;font-size:13px}.nav a span{width:18px;text-align:center;font-size:17px}.nav a em{margin-left:auto;font-style:normal}.nav a.active{background:linear-gradient(90deg,#087cf0,#0c6ed0);color:#fff;box-shadow:0 5px 15px #0002}.nav a:hover{background:#ffffff14}.nav-section{font-size:10px;font-weight:bold;color:#9db6cf;padding:14px 10px 5px}.sidebar-cross{text-align:center;font-size:46px;color:#f6d77c;margin:25px 0 6px}.sidebar-quote{padding:0 20px;text-align:center;font-family:Georgia;font-style:italic;color:#d5e2ef;line-height:1.45}.sidebar-quote small{display:block;margin-top:6px}.sidebar-bottom{font-size:9px;text-align:center;color:#9cb5cc;margin:28px 0}.main{margin-left:212px;width:calc(100% - 212px);min-width:0}.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;box-shadow:0 2px 10px #0b3e7010}.hamb{font-size:20px}.top-space{flex:1}.bell{border:0;background:#fff;font-size:20px;position:relative;margin-right:20px;color:#174b82}.bell i{position:absolute;right:-5px;top:-7px;background:#ef3e49;color:#fff;border-radius:50%;font-size:9px;padding:3px 5px;font-style:normal}.profile{display:flex;align-items:center;gap:8px;border-left:1px solid var(--line);padding-left:18px}.avatar{width:35px;height:35px;border-radius:50%;background:#6b8eab;color:#fff;display:grid;place-items:center;font-size:11px}.profile b,.profile small{display:block}.profile small{color:#8798ac;font-size:10px;margin-top:2px}.banner{height:96px;background:linear-gradient(90deg,#eaf6ff,#fff6e2);display:flex;align-items:center;justify-content:center;gap:60px;border-bottom:1px solid #dbe6f0;position:relative;overflow:hidden}.banner:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 100%,#a6d4a255 0 18%,transparent 35%),radial-gradient(circle at 88% 100%,#a6d4a255 0 17%,transparent 34%)}.banner-left{text-align:center;color:#16457a;font-family:Georgia;position:relative;z-index:1;line-height:1.35}.banner-title{font-size:20px;font-weight:bold;margin-bottom:3px}.banner-left small{display:block}.banner-art{font-size:46px;color:#c7a03b;position:relative;z-index:1}.page{padding:12px 16px 0;max-width:1500px;margin:auto}.welcome{background:linear-gradient(90deg,#fff,#eef7ff);border:1px solid #d9e8f5;border-radius:9px;padding:13px 35px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;box-shadow:0 3px 10px #0c4b8510}.welcome h1{font-family:Georgia;color:#10457e;font-size:20px;margin:0 0 5px}.welcome p{margin:2px 0;color:#536a83}.welcome-right{text-align:right;font-family:Georgia;color:#174579;line-height:1.45}.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:10px}.metric{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px;display:flex;gap:10px;align-items:center;box-shadow:0 3px 8px #0b3e7008}.metric>span{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-size:22px}.metric small{display:block;color:#687e98}.metric strong{display:block;font-size:24px;color:#174d85;margin:1px 0}.metric em{font-style:normal;font-size:10px}.metric.blue>span{background:#dcebff;color:#1774e9}.metric.green>span{background:#dff7e9;color:#20a15d}.metric.red>span{background:#ffe1e1;color:#e44242}.metric.gold>span{background:#fff0c9;color:#d89900}.metric.purple>span{background:#eadfff;color:#7541df}.metric.green em{color:#1b9b5a}.metric.red em{color:#e24444}.metric.gold em{color:#c68a00}.dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10px}.panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 10px #0b3e7008}.panel-head{padding:10px 15px;display:flex;align-items:center;justify-content:space-between}.panel-head h2{margin:0;color:#15477e;font-size:16px}.legend{display:flex;gap:13px;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.dot{display:inline-block;width:10px;height:10px;border-radius:3px}.dot.green{background:#36b96f}.dot.red{background:#ef5350}.dot.gold{background:#f4b62b}.dot.gray{background:#b8c2ce}.bar-chart{height:185px;padding:8px 28px 12px;display:flex;align-items:flex-end;justify-content:space-around;border-top:1px solid #eef2f6}.bar-col{height:100%;width:10%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.bars{height:150px;width:48px;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid #d7e1eb;position:relative}.bar{width:13px;min-height:2px;border-radius:3px 3px 0 0;display:block}.bar.present{background:#39bd72}.bar.absent{background:#ef5350}.bar.excused{background:#f3b52b}.bar-col small{text-align:center;color:#6e829b;font-size:9px}.donut-panel{min-height:230px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px;padding:0 20px}.donut{width:138px;height:138px;border-radius:50%;background:conic-gradient(#36b96f var(--rate),#ef5350 0 calc(var(--rate) + 6%),#f4b62b 0 calc(var(--rate) + 8%),#d8dfe7 0);display:grid;place-items:center;position:relative}.donut:after{content:'';position:absolute;width:91px;height:91px;border-radius:50%;background:#fff}.donut strong,.donut span{z-index:1;position:relative}.donut strong{font-size:24px;color:#174d85}.donut span{font-size:10px;color:#71839a;margin-top:-35px}.donut-legend p{margin:7px 0;font-size:12px}.donut-legend .dot{border-radius:50%;margin-right:5px}.quote-bottom{text-align:center;font-family:Georgia;color:#6d819a;font-size:10px;padding:3px 10px 10px}.tabs{display:flex;gap:7px;align-items:center;margin:10px 0}.tab{border:1px solid #dbe5ef;background:#fff;border-radius:6px;padding:8px 14px;color:#194a80;font-weight:bold;font-size:11px}.tab.active{background:#087cf0;color:#fff;border-color:#087cf0}.tab-spacer{flex:1}.tabs input{border:1px solid #d8e2ed;border-radius:6px;padding:8px}.primary-btn{background:#087cf0;border:0;border-radius:6px;color:#fff;padding:9px 14px;font-weight:bold;font-size:11px;display:inline-block}.class-panel{overflow:hidden}.collapse{border:1px solid #dbe4ee;background:#fff;border-radius:5px}.table-wrap{overflow:auto}.class-panel table{width:100%;border-collapse:collapse;min-width:950px}.class-panel th,.class-panel td{padding:8px 9px;border-top:1px solid #e7edf4;font-size:11px;white-space:nowrap}.class-panel th{background:#f4f7fb;color:#6a7d95;font-weight:bold}.level{padding:4px 7px;border-radius:12px;font-size:10px}.level.l1{background:#ffe7e7;color:#e33d3d}.level.l2{background:#e1efff;color:#1470cf}.level.l3{background:#e3f7e9;color:#1b9b59}.green-text{color:#15a35b}.red-text{color:#e44343}.action{display:inline-block;border:1px solid #dbe4ef;padding:4px 6px;border-radius:4px;font-size:10px;margin-right:3px;background:#fff;color:#35618d}.action.primary{background:#087cf0;color:#fff;border-color:#087cf0}.table-foot{padding:8px 13px;color:#70839a;font-size:10px}.table-foot span{float:right}.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}.list-panel{min-height:155px}.activity,.notice{display:flex;gap:9px;padding:8px 14px;border-top:1px solid #edf1f5;font-size:11px}.activity i,.notice i{width:24px;height:24px;border-radius:50%;background:#e5f2ff;color:#087cf0;display:grid;place-items:center;font-style:normal}.activity small,.notice small{display:block;color:#8a9aae;margin-top:3px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:5px 12px 12px}.quick-grid a{border:1px solid #e3e9f0;border-radius:6px;padding:10px 5px;text-align:center;color:#087cf0;font-size:19px}.quick-grid small{display:block;font-size:9px;color:#516d8c;margin-top:4px}.alert{margin:8px 16px;padding:9px 12px;border-radius:6px}.alert.success{background:#e7f8ef;color:#0b7b47}.alert.error{background:#ffecec;color:#a72b2b}footer{padding:9px 16px;color:#7890aa;font-size:9px}footer span{float:right}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#e8f3ff,#f9f4e6)}.login-card{background:#fff;padding:38px;border-radius:18px;width:min(420px,92vw);text-align:center;box-shadow:0 20px 60px #082e551f}.login-cross{font-size:60px;color:#d9ae3b}.login-card h1{font-family:Georgia;color:#103f72}.login-card p{font-size:11px;color:#71839a}.login-card input{display:block;width:100%;padding:12px;border:1px solid #d7e1eb;border-radius:8px;margin:8px 0}.login-card small{display:block;margin-top:12px;color:#8090a3}.login-card .primary-btn{width:100%;border:0;cursor:pointer;padding:12px}@media(max-width:1200px){.cards5{grid-template-columns:repeat(3,1fr)}.bottom-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}}@media(max-width:800px){.sidebar{width:65px}.brand>div:not(.brand-menu):not(.church),.nav a:not(.active) em,.nav a{font-size:0}.brand-title,.brand-sub,.brand-motto,.sidebar-quote,.sidebar-bottom,.nav-section{display:none}.nav a span{font-size:20px}.sidebar-cross{font-size:35px}.main{margin-left:65px;width:calc(100% - 65px)}.cards5{grid-template-columns:1fr 1fr}.welcome{display:block}.welcome-right{text-align:left;margin-top:8px}.bottom-grid{grid-template-columns:1fr}.tabs{overflow:auto}.banner-art{display:none}}@media(max-width:520px){.cards5{grid-template-columns:1fr}.page{padding:8px}.topbar{padding:0 10px}.profile div{display:none}.banner{height:75px}.banner-title{font-size:15px}.banner-left{font-size:11px}.welcome{padding:12px}.welcome h1{font-size:16px}}
.page-title{display:flex;align-items:center;justify-content:space-between;margin:5px 0 12px}.page-title h1{font-family:Georgia;color:#15477e;margin:0}.page-title p{color:#73869c;margin:5px 0}.filters{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.filters input,.filters select{padding:9px;border:1px solid #d9e2ec;border-radius:6px;background:#fff}.filters input:not([type=date]){min-width:270px}.form{padding:18px;max-width:700px}.form label{display:block;color:#657b95;font-size:12px;margin-bottom:10px}.form input,.form textarea,.form select,.panel>form input,.panel>form textarea,.panel>form select{display:block;width:100%;padding:10px;border:1px solid #d9e2ec;border-radius:6px;margin-top:5px;font:inherit}.attendance-box{padding:15px}.empty{padding:20px;text-align:center;color:#8091a5}