@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--green:#176b43;--green2:#238653;--deep:#113e2b;--lime:#d6ef70;--yellow:#f2d84b;--ink:#18241d;--muted:#758078;--line:#e7ece7;--paper:#f8faf6;--white:#fff;--shadow:0 20px 60px rgba(20,65,42,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.topbar{height:88px;padding:0 max(5.5%,calc((100% - 1240px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.94);border-bottom:1px solid #edf0eb;position:sticky;top:0;z-index:20;backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:11px;font:700 16px Manrope,sans-serif;letter-spacing:.04em}.brand>span:last-child{line-height:1.2}.brand small{display:block;color:#8a968c;font:500 10px 'DM Sans',sans-serif;letter-spacing:.02em;margin-top:4px}.brand-mark,.form-mark{height:39px;width:39px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;font:800 16px Manrope,sans-serif;letter-spacing:-.07em;box-shadow:0 5px 12px #176b4322}.brand-mark span{color:var(--lime)}nav{display:flex;align-items:center;gap:30px;color:#59645b;font-weight:600;font-size:13px}nav a:hover{color:var(--green)}.nav-cta{padding:12px 22px;border-radius:10px;background:var(--green);color:#fff!important}.inline{display:inline}.nav-logout{border:0;background:none;color:#59645b;font-weight:600}.hero{max-width:1240px;margin:0 auto;min-height:590px;padding:78px 0 65px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px}.hero-copy{padding:0 0 0 6px}.eyebrow,.section-label{font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--green);display:inline-flex;align-items:center;gap:8px}.dot{height:8px;width:8px;border-radius:50%;background:#7bc74b;box-shadow:0 0 0 4px #7bc74b22}.hero h1,.auth-aside h1{font:800 clamp(42px,5.2vw,67px)/1.12 Manrope,sans-serif;letter-spacing:-.055em;margin:25px 0 20px}.hero h1 em,.auth-aside h1 em,.section-grid h2 em,.vision-section h2 em,.welcome-row h1 em{font-style:normal;color:var(--green)}.hero-copy>p{max-width:490px;line-height:1.9;font-size:15px;color:#707b72}.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:10px;padding:14px 19px;font-weight:700;font-size:12px;transition:.2s}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn-primary{background:var(--green);color:white;box-shadow:0 7px 16px #176b4320}.btn-light{background:#f1f5ef;color:var(--green);border:1px solid #e6ece4}.btn-dark{background:#132b1e;color:#fff}.btn-full{width:100%;margin-top:19px}.hero-note{display:flex;align-items:center;gap:9px;margin-top:28px;color:#7b857d;font-size:11px}.check{background:#e6f3dd;color:var(--green);height:20px;width:20px;display:grid;place-items:center;border-radius:50%;font-weight:bold}.hero-art{height:440px;position:relative;display:flex;align-items:center;justify-content:center}.hero-art:before{content:'';position:absolute;width:370px;height:370px;background:#e8f1d9;border-radius:50%;right:60px;top:25px}.sun{position:absolute;width:74px;height:74px;background:var(--yellow);border-radius:50%;right:58px;top:14px}.art-card{position:absolute;border-radius:22px}.card-back{width:335px;height:380px;right:74px;top:39px;background:#d6e8a9;transform:rotate(8deg)}.card-front{width:335px;background:#fff;right:112px;top:27px;padding:22px 21px;box-shadow:0 28px 65px #315e3b22;z-index:2;border:1px solid #eef2ea}.mini-top{display:flex;justify-content:space-between;align-items:center}.mini-logo{background:var(--green);color:#fff;border-radius:8px;width:31px;height:31px;display:grid;place-items:center;font:800 10px Manrope}.live{font-size:8px;letter-spacing:.08em;color:#718072;font-weight:800}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#73bd4b;margin-right:4px}.avatar{height:66px;width:66px;background:#eaf4d9;color:var(--green);border-radius:21px;display:grid;place-items:center;font-size:31px;margin:25px 0 12px}.art-title{font:800 19px Manrope;letter-spacing:-.04em}.art-sub{font-size:10px;color:#909a91;margin-top:5px}.attendance-row{display:flex;align-items:center;gap:10px;border:1px solid #edf0ea;padding:12px 10px;border-radius:12px;margin-top:12px}.status-icon{height:29px;width:29px;border-radius:9px;background:#e4f4df;color:var(--green);display:grid;place-items:center;font-size:14px}.status-icon.yellow{background:#fff7d6;color:#9b8100}.attendance-row span:nth-child(2){display:flex;flex-direction:column;gap:4px;flex:1}.attendance-row b{font-size:10px}.attendance-row small{font-size:8px;color:#98a098}.attendance-row strong{font-size:11px;color:var(--green)}.attendance-row .pending{color:#a3a99e;font-size:9px}.art-bottom{display:flex;justify-content:space-between;color:#7f8b80;font-size:8px;margin-top:18px}.floating-tag{position:absolute;z-index:4;bottom:40px;left:1px;display:flex;gap:10px;align-items:center;padding:13px 17px;background:#fff;border:1px solid #eef1e8;border-radius:13px;box-shadow:var(--shadow)}.floating-tag>span{width:29px;height:29px;background:var(--lime);color:var(--green);border-radius:9px;display:grid;place-items:center}.floating-tag div{display:flex;flex-direction:column;gap:5px}.floating-tag b{font-size:10px}.floating-tag small{font-size:9px;color:#899389}.decor{position:absolute;border:1px solid #a6ca78;border-radius:12px;transform:rotate(25deg)}.decor-one{width:25px;height:25px;right:34px;bottom:85px}.decor-two{width:12px;height:12px;left:25px;top:85px;background:var(--yellow);border:0}.school-section,.vision-section{padding:76px max(5.5%,calc((100% - 1240px)/2));background:#fff}.section-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;margin-top:24px;align-items:center}.section-grid h2,.vision-section h2,.bottom-cta h2{font:800 32px/1.25 Manrope;letter-spacing:-.045em;margin:0 0 15px}.muted{color:var(--muted);line-height:1.8}.school-card{display:flex;gap:20px;padding:28px;border:1px solid var(--line);border-radius:17px;background:#fcfdfb}.school-icon{flex-shrink:0;height:48px;width:48px;background:#e9f3dd;border-radius:13px;color:var(--green);display:grid;place-items:center;font-size:24px}.school-card h3{font:800 17px Manrope;margin:2px 0 8px}.school-card p{line-height:1.8;color:#788279;margin:0}.editable-note{display:inline-block;margin-top:12px;color:var(--green);font-size:10px;font-weight:700}.vision-section{background:#f6f8f1}.vision-section h2{margin-top:17px}.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:35px}.vision-card{background:#fff;border:1px solid #e9eee4;border-radius:17px;padding:27px;position:relative;overflow:hidden;min-height:250px}.vision-main{background:var(--green);color:white}.big-number{position:absolute;right:18px;top:9px;font:800 48px Manrope;color:#e8f0e5;opacity:.6}.vision-main .big-number{color:#d9efc5;opacity:.3}.vision-icon{height:43px;width:43px;background:#e9f4df;border-radius:13px;color:var(--green);display:grid;place-items:center;font-size:22px;margin-bottom:22px}.yellow-icon{background:#fff5c6!important;color:#8e7800!important}.vision-card h3{font:800 17px Manrope;margin:0 0 11px}.vision-card p,.vision-card li{font-size:12px;line-height:1.85;color:#788279}.vision-main p{color:#e0ece3}.vision-card ul{padding-left:17px;margin:0}.bottom-cta{max-width:1240px;margin:0 auto;padding:65px 0;display:flex;align-items:center;justify-content:space-between}.bottom-cta h2{margin:12px 0 8px}.bottom-cta p{margin:0;color:#788279}.footer{border-top:1px solid #e9eee7;background:#fff;padding:26px max(5.5%,calc((100% - 1240px)/2));display:flex;align-items:center;justify-content:space-between;color:#89938a;font-size:10px}.footer-brand{color:var(--ink);transform:scale(.85);transform-origin:left center}.footer p{margin:0}.auth-wrap{min-height:calc(100vh - 150px);max-width:1060px;margin:0 auto;padding:60px 0;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.auth-aside{padding:25px 0}.auth-aside h1{font-size:51px;margin:24px 0 18px}.auth-aside p{max-width:410px;color:#7c877d;line-height:1.9}.auth-bullets{display:flex;flex-direction:column;gap:15px;margin-top:30px;color:#506052;font-size:12px;font-weight:600}.auth-bullets span: first-letter{color:var(--green)}.auth-card{background:white;border:1px solid #e8eee6;box-shadow:var(--shadow);border-radius:20px;padding:36px}.form-mark{margin-bottom:22px}.auth-card h2{font:800 26px Manrope;letter-spacing:-.04em;margin:0 0 7px}.auth-card>.muted{margin:0 0 24px;font-size:12px}.auth-card form>label,.field label,.absence-form>label{display:block;font-size:11px;font-weight:700;margin:15px 0 8px;color:#344338}.auth-card input:not([type=hidden]),.field input,.field select,.field textarea,.absence-form textarea,.month-filter input{width:100%;border:1px solid #e1e8df;background:#fbfcfa;border-radius:9px;padding:13px 13px;outline:none;color:#25352a}.auth-card input:focus,.field input:focus,.field select:focus,.field textarea:focus,.absence-form textarea:focus{border-color:#8bb99b;box-shadow:0 0 0 3px #176b4310}.auth-foot{text-align:center;color:#899289;font-size:11px;margin:22px 0 0}.auth-foot a{color:var(--green);font-weight:800}.register-wrap{max-width:1120px;grid-template-columns:.8fr 1.2fr;gap:60px}.register-wrap .auth-aside h1{font-size:46px}.auth-card.wide{padding:30px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.field.full{grid-column:1/-1}.field label{margin-top:12px}.field input,.field select,.field textarea{font-size:12px;padding:11px}.flash{max-width:1240px;margin:14px auto 0;padding:13px 17px;border-radius:10px;font-size:12px;background:#e8f5e8;color:#176b43}.flash.error{background:#fff0ed;color:#a43a28}.dashboard{max-width:1240px;margin:0 auto;padding:44px 0 70px}.welcome-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.welcome-row h1{font:800 34px Manrope;letter-spacing:-.05em;margin:12px 0 8px}.welcome-row p{margin:0}.today-pill{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 16px;font-size:11px;color:#657167;font-weight:700;display:flex;align-items:center;gap:9px}.today-dot{height:7px;width:7px;border-radius:50%;background:#7cbe53}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:23px}.stat-card{padding:22px 24px;background:#fff;border:1px solid #e8eee6;border-radius:15px}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#829083;font-size:9px;font-weight:800;letter-spacing:.1em}.stat-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#edf4e7;color:var(--green);font-size:18px}.green-icon{background:#e4f5e2;color:#21814c}.stat-card h2{font:800 25px Manrope;letter-spacing:-.04em;margin:15px 0 5px}.stat-card p{color:#8a958b;font-size:11px;margin:0}.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:20px}.panel{background:#fff;border:1px solid #e7ede5;border-radius:16px;padding:24px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-head h2{font:800 19px Manrope;letter-spacing:-.04em;margin:7px 0 0}.secure-pill{font-size:9px;color:var(--green);background:#edf6e8;padding:8px 11px;border-radius:8px;font-weight:700}.camera-placeholder{text-align:center;background:#f8faf6;border:1px dashed #dce7d7;border-radius:14px;padding:26px 18px}.camera-circle{height:62px;width:62px;background:#e8f3de;color:var(--green);font-size:30px;border-radius:20px;display:grid;place-items:center;margin:0 auto 13px}.camera-placeholder h3,.done-state h3{font:800 17px Manrope;margin:0 0 8px}.camera-placeholder p,.done-state p{font-size:11px;color:#7f8b80;line-height:1.8;margin:0 auto 17px;max-width:300px}.camera-placeholder .btn{margin:0 auto}.camera-placeholder small,.done-state small{display:block;color:#9aa39a;font-size:9px;margin-top:16px}.camera-area{margin-top:15px}.camera-area video,.camera-area img{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:12px;background:#17251b}.camera-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.camera-actions form{display:inline}.camera-hint{font-size:10px;color:#7b877c}.hidden{display:none!important}.done-state{text-align:center;padding:25px 10px 28px}.done-icon{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:#e4f4de;color:var(--green);font-size:23px;margin:0 auto 15px}.done-state .btn{margin:3px auto 0}.absence-panel>.muted{font-size:11px;margin:0 0 20px}.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.radio-row label{cursor:pointer}.radio-row input{position:absolute;opacity:0}.radio-row span{display:block;padding:12px;text-align:center;background:#fafbf9;border:1px solid #e3eae0;border-radius:9px;font-size:11px;font-weight:700;color:#657266}.radio-row input:checked+span{border-color:var(--green);background:#edf6e8;color:var(--green)}.absence-form>label{margin-top:16px}.absence-form textarea{resize:vertical;font-size:11px}.absence-form .btn{margin-top:13px}.absence-confirm{display:flex;gap:12px;background:#f5f9f1;padding:15px;border-radius:12px}.absence-confirm .done-icon{width:35px;height:35px;font-size:16px;flex-shrink:0;margin:0}.absence-confirm b{font-size:12px}.absence-confirm p{font-size:11px;line-height:1.7;color:#7d887d;margin:7px 0 0}.history-panel{margin-top:20px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}th{text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#8c978d;background:#f8faf7;padding:13px 14px;font-weight:800}td{padding:14px;border-bottom:1px solid #edf1eb;font-size:11px;color:#58645a}tbody tr:last-child td{border-bottom:0}.empty{text-align:center;color:#9aa39a;padding:28px}.table-status{display:inline-flex;padding:6px 9px;border-radius:7px;background:#e9f5e4;color:#237343;font-size:9px;font-weight:800}.table-status.late{background:#fff1d5;color:#946c00}.table-status.away{background:#fff0e8;color:#b65d35}.table-status.pending-status{background:#f1f2ef;color:#7c857c}.subhistory{margin-top:22px}.subhistory th[colspan]{background:#fff;color:#334236;font-size:11px;letter-spacing:0}.small{font-size:10px}.reports-page .history-panel{margin-top:20px}.reports-page .stat-card h2{font-size:31px}.role-note{display:block;color:#8a948a;font-size:9px;margin-top:5px}.month-filter{display:flex;gap:8px;align-items:center}.month-filter input{padding:10px;font-size:11px;width:auto}.month-filter .btn{padding:11px 14px}.report-actions{display:flex;justify-content:flex-end;margin-top:17px}.footer-brand{flex-shrink:0}@media(max-width:1300px){.hero,.dashboard,.bottom-cta{margin-left:5.5%;margin-right:5.5%}.auth-wrap{margin-left:5.5%;margin-right:5.5%}}@media(max-width:900px){.topbar{padding:0 5%;height:75px}nav{gap:14px}.hero{padding-top:50px;grid-template-columns:1fr 1fr;gap:0}.hero h1{font-size:48px}.hero-art{transform:scale(.88);transform-origin:center}.section-grid{gap:35px}.auth-wrap,.register-wrap{gap:30px}.dashboard{padding-top:32px}.dashboard-grid{grid-template-columns:1fr}.auth-aside h1{font-size:42px}}@media(max-width:650px){.topbar{height:auto;min-height:70px;padding:14px 5%;align-items:flex-start;gap:12px}.brand{font-size:13px}.brand-mark{width:34px;height:34px}.brand small{font-size:9px}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:10px}nav>a:not(.nav-cta){display:none}.nav-cta{padding:10px 13px}.hero{display:block;margin:0;padding:48px 5% 35px}.hero h1{font-size:45px}.hero-copy>p{font-size:13px}.hero-art{height:380px;transform:scale(.88);margin:10px -20px 0}.school-section,.vision-section{padding:55px 5%}.section-grid{grid-template-columns:1fr;gap:20px}.section-grid h2,.vision-section h2,.bottom-cta h2{font-size:28px}.vision-grid{grid-template-columns:1fr}.vision-card{min-height:unset}.bottom-cta{margin:0;padding:45px 5%;display:block}.bottom-cta .btn{margin-top:22px}.footer{padding:22px 5%;flex-wrap:wrap;gap:12px}.footer p{order:3;width:100%}.auth-wrap,.register-wrap{display:block;margin:0;padding:35px 5%}.auth-aside{padding:10px 0 25px}.auth-aside h1,.register-wrap .auth-aside h1{font-size:40px}.auth-aside p{font-size:12px}.auth-bullets{display:none}.auth-card,.auth-card.wide{padding:25px 20px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.dashboard{margin:0;padding:30px 5% 45px}.welcome-row{display:block}.welcome-row h1{font-size:28px}.today-pill{display:inline-flex;margin-top:16px}.stat-grid{grid-template-columns:1fr;gap:10px}.stat-card{padding:18px}.stat-card h2{font-size:23px}.panel{padding:17px}.panel-head{align-items:flex-start}.panel-head h2{font-size:17px}.secure-pill{font-size:8px}.camera-actions .btn{padding:12px}.month-filter{width:100%;margin-top:10px}.month-filter input{min-width:0;flex:1}.reports-page .panel-head{flex-wrap:wrap}.table-wrap{margin:0 -5px}.table-wrap table{min-width:570px}th,td{padding:12px}.flash{margin:10px 5%;font-size:11px}}
@media print{.topbar,.footer,.report-actions,.month-filter,.flash{display:none!important}body{background:white}.dashboard{max-width:none;margin:0;padding:0}.panel,.stat-card{box-shadow:none;break-inside:avoid}.reports-page .history-panel{margin-top:12px}}

/* Foto bukti absensi pada monitoring kepala sekolah/admin */
.attendance-photo{display:block;width:64px;height:64px;object-fit:cover;border-radius:10px;border:2px solid #dcebd9;box-shadow:0 3px 10px rgba(25,75,45,.12);transition:transform .18s ease,box-shadow .18s ease}
.attendance-photo:hover{transform:scale(1.06);box-shadow:0 5px 16px rgba(25,75,45,.2)}
.percent-track{height:7px;min-width:90px;max-width:180px;margin-top:7px;background:#edf2e9;border-radius:99px;overflow:hidden}
.percent-track span{display:block;height:100%;background:linear-gradient(90deg,#24834b,#e6bd35);border-radius:99px}
@media print{.attendance-photo{width:42px;height:42px}.percent-track{border:1px solid #bbb}.month-filter,.report-actions,.topbar,.footer{display:none!important}}

/* Pengaturan hari libur */
.holiday-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;padding:4px 0 12px}.holiday-form label{font-size:.86rem;font-weight:700;color:#34453b}.holiday-form input{width:100%;min-width:0;padding:12px 13px;border:1px solid #dce5dc;border-radius:10px;background:#fff;font:inherit}.holiday-form button{justify-self:start}.holiday-form label:nth-of-type(3),.holiday-form label:nth-of-type(3)+input{grid-column:1/-1}@media(max-width:650px){.holiday-form{grid-template-columns:1fr}.holiday-form label,.holiday-form input,.holiday-form button{grid-column:1/-1}}