:root{--ink:#1c3932;--muted:#7c8983;--green:#1c614e;--bg:#f7f9f6;--line:#e7ece6;--soft:#eaf3ed;--gold:#c2984e}*{box-sizing:border-box}body{margin:0;font:14px 'DM Sans',sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d7ac5c;outline-offset:3px}.sidebar{width:246px;background:#fff;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);padding:34px 22px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:10px;font:800 39px Manrope,sans-serif;line-height:1}.brand small{display:block;font:600 8px 'DM Sans';letter-spacing:2px;margin-top:9px}.brand-symbol{background:var(--green);color:#fff;border-radius:13px;width:43px;height:46px;text-align:center;font-size:38px}.brand-symbol span{color:#d0bd80}.mosque-switch{display:flex;align-items:center;gap:10px;padding:16px 0;margin:30px 0 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.mosque-switch strong{font-size:12px}.mosque-switch small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.mosque-icon{font-size:29px;color:var(--green)}.sample-dot{width:7px;height:7px;border-radius:50%;background:#76a68a;margin-left:auto}.nav-label,.tiny{font-size:9px;letter-spacing:1.5px;color:#99a39d;font-weight:700;margin:0 12px 15px}nav{display:grid;gap:7px}.nav-item{border:0;background:none;text-align:left;padding:13px 14px;color:#78877f;border-radius:8px;display:flex;align-items:center;gap:13px;font-size:13px}.nav-item svg{width:19px;height:19px}.nav-item.active{background:#eaf3ed;color:var(--green);font-weight:700}.nav-item .count{margin-left:auto;font-size:10px;background:var(--green);color:white;border-radius:4px;padding:2px 6px}.sidebar-bottom{margin-top:auto;padding:25px 12px 0}.sidebar-bottom .tiny{margin:0;font-size:8px}.sidebar-bottom p{font-size:14px;line-height:1.7;color:#6b7f72}.text-button{border:0;padding:0;background:none;color:var(--green);font-size:12px}.app{margin-left:246px}.topbar{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#fff}.breadcrumb{font-size:11px;color:#88958d}.breadcrumb span{margin:0 12px;color:#c4cbc5}.breadcrumb b{color:#536a5e;font-weight:500}.role-area{display:flex;align-items:center;gap:22px}.demo-pill{font-size:8px;font-weight:700;letter-spacing:1px;border:1px solid #e2cf9c;border-radius:5px;padding:6px 8px;color:#a47f32;background:#fffcf2}.avatar{height:30px;width:30px;background:#f0ede4;color:#877858;display:inline-grid;place-items:center;border-radius:50%;font-size:11px}.role-select{display:flex;gap:6px;align-items:center}.role-select select{border:0;background:transparent;color:var(--ink);font-size:12px;max-width:110px}.menu-button{display:none}main{padding:30px 36px;max-width:1550px;margin:auto;min-height:calc(100vh - 140px)}h1,h2,h3,p{margin-top:0}h1{font:800 27px Manrope,sans-serif;letter-spacing:-.9px;margin-bottom:7px}h2{font:800 17px Manrope,sans-serif;letter-spacing:-.4px}h3{font:700 14px Manrope,sans-serif}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}.page-head p,.subtext{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.date{font-size:11px;color:#7d8a80;display:flex;gap:8px;align-items:center}.hero{position:relative;overflow:hidden;min-height:190px;border:1px solid #d8e6dc;border-radius:13px;background:#e8f0e7;padding:27px 30px;margin-bottom:23px;display:flex;align-items:center;justify-content:space-between;gap:24px}.hero-copy{max-width:520px;position:relative;z-index:1}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#748b69;margin-bottom:12px}.hero h2{font-size:25px;letter-spacing:-.8px;line-height:1.4;margin-bottom:10px;max-width:470px}.hero p{font-size:12px;line-height:1.7;color:#708370;max-width:430px;margin-bottom:18px}.hero-art{width:245px;flex-shrink:0;align-self:stretch;position:relative;opacity:.85}.hero-art svg{width:100%;height:100%;min-height:145px}.button{background:var(--green);color:#fff;border:1px solid var(--green);border-radius:7px;padding:10px 15px;font-weight:600;font-size:11px;display:inline-flex;align-items:center;gap:8px;justify-content:center}.button svg{width:15px;height:15px}.button.secondary{background:white;color:var(--green);border-color:#d9e3da}.button.ghost{border-color:transparent;background:transparent;color:var(--green);padding:5px 0}.button.danger{background:#fff5f1;color:#ac5345;border-color:#f0d7d0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:24px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#8a988d;font-size:11px}.stat-icon{width:29px;height:29px;border-radius:8px;background:#eef3ed;color:#719775;display:grid;place-items:center}.stat-icon svg{width:16px;height:16px}.stat-value{font:800 24px Manrope,sans-serif;margin:12px 0 8px;letter-spacing:-.8px}.stat-foot{font-size:10px;color:#8c988e}.stat-foot strong{color:#4e8b63;font-weight:500}.two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:22px}.panel{border:1px solid var(--line);border-radius:11px;background:#fff;margin-bottom:22px;overflow:hidden}.panel-head{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h2{font-size:14px;margin:0 0 6px}.panel-head small{font-size:10px;color:var(--muted)}.panel-body{padding:0 22px 22px}.service-row{display:flex;align-items:center;gap:13px;border-top:1px solid #eef1eb;padding:16px 0}.ticket-icon{width:35px;height:35px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:#edf3e9;color:#81916e}.ticket-icon svg{width:17px;height:17px}.service-row h3{font-size:12px;margin:0 0 7px}.service-row p{margin:0;color:#8b958b;font-size:10px}.service-row .badge{margin-left:auto;white-space:nowrap}.badge{font-size:9px;padding:5px 8px;border-radius:5px;background:#eef2ed;color:#64806d;display:inline-block;font-weight:600}.badge.amber{background:#fcf1de;color:#aa8549}.badge.blue{background:#eaf1f8;color:#6b8aac}.badge.green{background:#e6f2e9;color:#4d8b61}.badge.private{background:#f1eaf4;color:#93709d}.prayers{background:#1d5948;color:#fff;border-radius:11px;padding:20px 22px;margin-bottom:22px;position:relative;overflow:hidden}.prayers h2{font-size:14px;margin-bottom:6px}.prayers small{font-size:10px;color:#a9c5b7}.prayer-list{display:flex;justify-content:space-between;gap:7px;margin-top:23px}.prayer-list div{text-align:center;font-size:10px;color:#b6cabe;padding:8px 6px;border-radius:6px}.prayer-list b{font-size:14px;display:block;margin-top:8px;font-family:Manrope;color:#fff}.prayer-list .selected{background:#3a715e}.prayer-note{font-size:9px;color:#a8c4b5;margin-top:15px}.event{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.event-date{width:40px;flex-shrink:0;height:44px;background:#f5f4ec;border:1px solid #ecebdf;border-radius:7px;text-align:center;font-size:8px;padding-top:5px;color:#9b957b}.event-date strong{display:block;font:800 18px Manrope;color:#5b6658}.event h3{font-size:12px;margin:1px 0 7px}.event p{font-size:10px;color:var(--muted);margin:0}.notice{padding:12px 15px;border:1px solid #e9e4d7;border-radius:8px;background:#fcfaf4;color:#958765;font-size:10px;line-height:1.7;margin-bottom:22px}.notice strong{color:#7d754f}.section-kicker{font-size:9px;color:#a1aca3;font-weight:700;letter-spacing:1px}.chart{height:104px;display:flex;align-items:flex-end;justify-content:space-around;gap:15px;padding:4px 8px 0;margin:6px 0 28px;border-bottom:1px solid #e9eee8}.bar-group{height:100%;display:flex;align-items:flex-end;gap:5px;position:relative;flex:1;justify-content:center}.bar{width:15px;min-height:2px;border-radius:4px 4px 0 0;background:#80a88b}.bar.out{background:#d7dfc6}.bar-group span{position:absolute;bottom:-20px;font-size:9px;color:#9aa396}.legend{font-size:9px;display:flex;gap:18px;color:#879585}.legend i{width:7px;height:7px;border-radius:2px;background:#80a88b;display:inline-block;margin-right:5px}.legend i.out{background:#d7dfc6}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:9px;color:#94a092;font-weight:500;letter-spacing:.5px;background:#fafbf8;padding:12px 18px}td{font-size:12px;padding:17px 18px;border-top:1px solid var(--line);vertical-align:top}td small{display:block;font-size:10px;color:#8a978c;margin-top:7px}.income{color:#448767}.expense{color:#b18166}.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:19px}.tabs{display:flex;flex-wrap:wrap;gap:6px}.tab{border:1px solid #e3e9df;background:white;padding:9px 13px;font-size:11px;border-radius:7px;color:#7c8a7b}.tab.active{background:var(--green);color:white;border-color:var(--green)}.search{border:1px solid #dfe7dd;border-radius:7px;padding:10px 13px;background:#fff;min-width:220px;max-width:100%}.ticket-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.ticket{padding:20px;border:1px solid var(--line);background:white;border-radius:10px;display:flex;flex-direction:column;gap:15px}.ticket-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#99a292}.ticket h3{margin:0;font-size:15px;line-height:1.5}.ticket p{color:#839080;font-size:12px;line-height:1.7;margin:0}.ticket-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;border-top:1px solid var(--line);padding-top:15px;font-size:11px}.ticket-meta small{display:block;color:#9da695;font-size:9px;margin-bottom:6px}.ticket .button{width:100%}.overdue{color:#ba7e48}.empty{grid-column:1/-1;text-align:center;padding:45px;color:#8a9885}.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.content-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:24px}.content-card h2{line-height:1.6;margin:14px 0 10px}.content-card p{color:#80907f;line-height:1.8;font-size:12px;white-space:pre-wrap}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.role-card{padding:22px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center}.role-card .avatar{height:40px;width:40px}.role-card p{font-size:12px;line-height:1.8;color:#859181;margin-bottom:0}.role-card h3{margin-bottom:5px}.role-card .badge{margin-left:auto}footer{max-width:1550px;margin:auto;padding:0 36px 20px;display:flex;justify-content:space-between;font-size:9px;color:#a1aa9f}dialog{border:1px solid #dce5d8;border-radius:15px;width:min(550px,calc(100% - 30px));padding:27px;max-height:90vh;box-shadow:0 20px 100px #123c2b30;color:var(--ink)}dialog::backdrop{background:#173d314f;backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;gap:15px}.dialog-top h2{font-size:21px;margin-bottom:25px}.close{background:none;border:0;color:#869581;font-size:28px;align-self:flex-start}.field{display:block;margin-bottom:17px;font-size:12px;font-weight:600}.field input,.field select,.field textarea{display:block;width:100%;margin-top:8px;border:1px solid #dce5d7;border-radius:7px;padding:11px 12px;background:#fcfdfb;color:var(--ink)}.field textarea{min-height:95px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid #9abd9f;outline-offset:1px}.field.check{display:flex;align-items:center;gap:10px;line-height:1.6}.field.check input{width:auto;margin:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.dialog-actions{border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:flex-end;gap:10px}.dialog-actions .button{font-size:12px}#toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translate(-50%,20px);opacity:0;background:#204e3e;color:white;border-radius:9px;padding:14px 22px;font-size:12px;transition:.2s;pointer-events:none;z-index:40;box-shadow:0 8px 30px #204e3e24}#toast.show{opacity:1;transform:translate(-50%,0)}.detail-copy{background:#f5f8f1;border-radius:7px;padding:14px;font-size:12px;line-height:1.8;white-space:pre-wrap}.timeline{font-size:11px;line-height:1.8;color:#7d8e78;padding:13px 0}.timeline p{margin:7px 0}.full-prayer{padding:32px}.full-prayer .prayer-list div{flex:1;padding:25px 5px;font-size:13px}.full-prayer .prayer-list b{font-size:26px}.helper{font-size:11px;line-height:1.7;color:#8b957d}.mobile-label{display:none}@media(min-width:1450px){main{padding:36px 48px}.topbar{padding:0 48px}.hero{min-height:215px}.hero-art{width:300px}.hero h2{font-size:29px}.stat{padding:22px}}@media(max-width:1150px){.sidebar{width:210px;padding:28px 16px}.app{margin-left:210px}main{padding:26px}.topbar{padding:0 26px}.hero-art{width:170px}.hero h2{font-size:23px}.stat-value{font-size:20px}.two-col{grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr)}.ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-grid{gap:10px}.stat{padding:15px}.breadcrumb{font-size:10px}.role-area{gap:12px}}@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:20px 0 100px #15342b1a}.sidebar.open{transform:translateX(0)}.app{margin-left:0}.menu-button{display:block;border:0;background:none;font-size:22px;color:var(--green);padding:5px;margin-right:12px}.topbar{height:70px;justify-content:flex-start}.role-area{margin-left:auto}.breadcrumb{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr 1fr}.stat-value{font-size:24px}#toast{left:50%}.hero-art{width:180px}.demo-pill{font-size:7px}.content-grid{grid-template-columns:1fr}footer{padding:0 26px 20px}}@media(max-width:600px){main{padding:23px 18px}.topbar{padding:0 18px}.page-head{align-items:flex-start;margin-bottom:21px}.page-head h1{font-size:24px}.page-head .date{display:none}.page-head .button{max-width:150px;white-space:nowrap;padding:10px;font-size:10px}.page-head p{font-size:11px}.hero{padding:23px;min-height:200px}.hero h2{font-size:23px;max-width:310px}.hero-copy{max-width:100%}.hero p{max-width:280px;font-size:11px}.hero-art{position:absolute;right:-55px;bottom:-23px;width:185px;height:160px;opacity:.23}.hero .button{position:relative}.two-col{grid-template-columns:1fr;gap:0}.stat{padding:15px}.stat-value{font-size:21px}.stat-top{font-size:10px}.stat-foot{font-size:9px}.stat-icon{width:25px;height:25px}.stat-grid{gap:10px;margin-bottom:20px}.ticket-grid{grid-template-columns:1fr}.ticket{padding:20px}.search{width:100%}.tabs{gap:5px}.tab{padding:9px 10px;font-size:10px}.notice{font-size:10px;padding:12px}.prayers{padding:20px}.prayer-list b{font-size:15px}.panel-head{padding:19px}.panel-body{padding:0 19px 20px}.content-card{padding:21px}.role-card{padding:18px;gap:10px}.role-card p{font-size:10px}.role-card .badge{font-size:8px;white-space:nowrap}.role-card h3{font-size:12px}.field-row{grid-template-columns:1fr;gap:0}dialog{padding:23px}.full-prayer{padding:20px}.full-prayer .prayer-list div{padding:18px 4px;font-size:10px}.full-prayer .prayer-list b{font-size:19px}footer{font-size:8px;padding:0 18px 18px;gap:20px;line-height:1.7}td{font-size:11px;padding:15px 13px}th{padding:12px 13px}.table-wrap{max-width:100%}}

/* Identitas SMART UPEM */
.brand{gap:9px;font-size:18px;letter-spacing:-.6px;align-items:center}.brand-symbol{flex-shrink:0;width:36px;height:42px;display:grid;place-items:center;font-size:15px;letter-spacing:-1px;border-radius:10px}.brand-name{min-width:0;white-space:nowrap}.brand small{font-size:9px;line-height:1.6;letter-spacing:.2px;font-weight:500;white-space:normal;margin-top:6px;color:#7c8983}@media(min-width:851px) and (max-width:1150px){.brand{font-size:15px;gap:7px}.brand-symbol{width:31px;font-size:13px}.brand small{font-size:8px}}

/* Lambang grafis SMART UPEM; wordmark tetap teks HTML. */
.brand-emblem{display:block;width:44px;height:44px;object-fit:contain;flex-shrink:0}.mobile-brand{display:none}@media(min-width:851px) and (max-width:1150px){.brand-emblem{width:35px;height:35px}.brand{gap:6px;font-size:14px}}@media(max-width:850px){.mobile-brand{display:flex;align-items:center;gap:7px;min-width:0;font:800 12px Manrope,sans-serif;letter-spacing:-.3px}.mobile-brand img{flex-shrink:0;object-fit:contain}.mobile-brand small{display:block;font:500 7px 'DM Sans',sans-serif;letter-spacing:0;line-height:1.5;max-width:120px;margin-top:3px;color:var(--muted)}.topbar .demo-pill{display:none}.role-area{gap:6px}.brand-emblem{width:40px;height:40px}}

@media(max-width:380px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-value{font-size:18px}}

[hidden]{display:none!important}

.hero-art img{width:148px;height:auto;max-width:100%;object-fit:contain;opacity:.8}.button:not(.ghost):not(.secondary):not(.danger){background:var(--green);color:#fff}