:root{--bg:#080f1f;--sidebar:#0b1427;--card:#111d32;--card2:#16233a;--border:#23334c;--text:#f3f6ff;--muted:#8fa0b9;--accent:#a58bff;--accent2:#69d6f6;--good:#5cddae;--shadow:0 18px 58px rgba(0,0,0,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}body.light{--bg:#f5f7fc;--sidebar:#fff;--card:#fff;--card2:#f6f4ff;--border:#e2e7f1;--text:#1c2540;--muted:#697890;--accent:#6947d8;--accent2:#0879a7;--good:#12805f;--shadow:0 18px 50px rgba(44,52,90,.06)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.25}p{color:var(--muted)}[hidden]{display:none!important}.layout{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:255px;background:var(--sidebar);border-right:1px solid var(--border);z-index:50;display:flex;flex-direction:column;padding:27px 15px 16px;overflow:auto;scrollbar-width:thin}.identity{display:flex;align-items:center;gap:12px;padding:0 10px 24px}.identity-icon{height:43px;width:43px;display:grid;place-items:center;flex-shrink:0;border-radius:13px;background:linear-gradient(135deg,#7659e8,#a69bff);font-family:Outfit;font-weight:800;font-size:26px;color:#fff}.identity-icon span,.welcome-symbol span{color:var(--accent2)}.identity b{display:block;font-family:Outfit;font-size:15px;max-width:153px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity small{display:block;font-size:9px;letter-spacing:1.2px;color:var(--muted);font-weight:800}.side-stamp{border:1px solid var(--border);margin:0 6px 14px;padding:11px;border-radius:10px;font-size:10px;letter-spacing:.7px;color:var(--muted);background:var(--card);display:flex;align-items:center;gap:6px}.side-stamp strong{color:var(--text);margin-left:auto;white-space:nowrap}.status-dot{height:7px;width:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good)}.sidebar nav{flex:1}.nav-label{font-size:9px;font-weight:800;letter-spacing:1.3px;color:var(--muted);margin:16px 13px 8px}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 13px;font-size:12px;font-weight:700;color:var(--muted);border-radius:10px;margin:2px 3px;transition:.2s;min-height:36px}.nav-item:hover,.nav-item.active{background:linear-gradient(95deg,rgba(139,110,248,.17),rgba(100,125,230,.04));color:var(--text)}.nav-item.active{box-shadow:inset 3px 0 var(--accent)}.nav-icon{font-size:16px;width:22px;text-align:center}.nav-lock{color:var(--accent);margin-left:auto;font-size:17px}.side-bottom{padding:12px 5px 2px}.side-quote{background:linear-gradient(135deg,rgba(130,107,232,.2),rgba(41,146,173,.08));padding:15px;border:1px solid var(--border);border-radius:13px;font-size:12px;color:var(--text);font-weight:700}.side-quote small{display:block;color:var(--muted);margin-top:8px;font-size:10px}.admin-entry{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-weight:700;padding:16px 10px 0;font-size:12px}.main-wrap{margin-left:255px;min-width:0}.topbar{height:75px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:15px;background:var(--bg);position:sticky;top:0;z-index:30;backdrop-filter:blur(16px)}.crumb{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:800}.crumb b{color:var(--text);letter-spacing:0;font-size:12px}.top-actions{display:flex;gap:12px;align-items:center}.round-button,.menu-button{color:var(--text);background:var(--card);border:1px solid var(--border);height:38px;min-width:38px;border-radius:10px}.menu-button{display:none}.pill-user{border-radius:30px;border:1px solid var(--border);padding:9px 15px;font-size:11px;font-weight:800;color:var(--text);background:var(--card);white-space:nowrap}main{max-width:1370px;padding:32px 34px 75px;margin:0 auto;min-height:calc(100vh - 135px)}.page-header{margin:6px 0 27px}.mini-tag{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:1.5px}.mini-tag span{color:var(--accent2)}.page-header h1{font-size:clamp(30px,4vw,43px);font-weight:800;letter-spacing:-1.2px;margin:7px 0 4px}.accent{color:var(--accent)}.page-header p{margin:0;font-size:13px}.panel{background:var(--card);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow)}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:41px 42px;overflow:hidden;background:radial-gradient(ellipse at right top,rgba(144,99,242,.28),transparent 48%),linear-gradient(125deg,var(--card),var(--card2));min-height:260px}.welcome h2{font-size:clamp(30px,4vw,46px);letter-spacing:-1px;margin:12px 0}.welcome h2 em{font-style:normal;color:var(--accent)}.welcome p{font-size:13px;max-width:440px}.welcome-symbol{font-size:clamp(100px,15vw,210px);color:var(--accent);font-family:Outfit;font-weight:800;line-height:1;opacity:.75;transform:rotate(-12deg);flex-shrink:0}.action-line{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:24px}.button{border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;padding:11px 17px;border:1px solid transparent;transition:transform .15s;color:var(--text);background:var(--card)}.button:hover{transform:translateY(-2px)}.button.primary{background:linear-gradient(130deg,#8062e6,#a48aff);color:#fff}.button.outline{border-color:var(--border)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.stat{min-height:135px;padding:20px 22px;display:flex;flex-direction:column;gap:4px}.stat span{font-size:23px}.stat strong{font-family:Outfit;font-size:30px;line-height:1.3}.stat small{font-size:11px;color:var(--muted);font-weight:700}.section-title{margin:33px 0 15px}.section-title h2{font-size:22px;margin-bottom:4px}.section-title h2 span{color:var(--accent)}.section-title p{font-size:12px;margin:0}.quick-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.quick-link{padding:19px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.quick-link:hover,.contact-tile:hover{transform:translateY(-3px);border-color:var(--accent)}.quick-link span{font-size:23px;margin-bottom:12px}.quick-link strong{font-size:13px}.quick-link small{color:var(--muted);font-size:11px}.two-cols,.three-cols{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:19px}.block{padding:24px}.block-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.block-head h2{font-size:17px;margin:0}.block-head a,.inline-link,.hint a{color:var(--accent);font-size:12px;font-weight:800}.stack-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}.stack-row:first-of-type{border-top:0}.stack-row b,.stack-row small{display:block}.stack-row b{font-size:12px}.stack-row small{font-size:11px;color:var(--muted);margin-top:3px}.item-emoji{height:35px;width:35px;display:grid;place-items:center;background:var(--card2);border-radius:10px;font-size:18px;flex-shrink:0}.quote-panel{margin-top:18px;text-align:center;padding:28px}.quote-panel>span{font-size:10px;color:var(--accent);font-weight:800;letter-spacing:1.3px}.quote-panel blockquote{font-family:Outfit;font-size:20px;font-weight:700;margin:13px 0}.quote-panel small{color:var(--muted)}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 19px;margin-bottom:20px}.toolbar label{font-size:12px;font-weight:800}.toolbar input,.toolbar select{background:var(--bg);border:1px solid var(--border);color:var(--text);outline:none;padding:10px 13px;border-radius:10px;font-size:12px;min-width:160px}.toolbar input[type=search]{min-width:210px;flex:1}.toolbar-count{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}.people-grid,.list-grid,.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.person-card{padding:24px;text-align:center}.person-avatar{width:74px;height:74px;margin:auto auto 12px;background:linear-gradient(135deg,#6256b6,#42a8c4);color:#fff;display:grid;place-items:center;border-radius:19px;font-size:33px;font-family:Outfit;font-weight:800;overflow:hidden}.person-avatar img{width:100%;height:100%;object-fit:cover}.person-card h2{font-size:16px;margin-bottom:4px}.person-card small{font-size:10px;color:var(--accent)}.person-card p{font-size:12px;margin:10px 0 0;min-height:34px}.person-socials{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px}.person-socials a{font-size:10px;color:var(--accent);border:1px solid var(--border);padding:5px 7px;border-radius:6px}.info-card{padding:22px;min-height:125px}.info-card .big-emoji{font-size:30px;display:block;margin-bottom:9px}.info-card small{font-size:10px;color:var(--accent);text-transform:uppercase;font-weight:800;letter-spacing:.7px}.info-card h3{font-size:17px;margin:6px 0 4px}.info-card p{font-size:12px;margin:0}.student-small{font-size:12px;margin-top:7px;color:var(--text)}.weekday-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.weekday-tabs button{border:1px solid var(--border);padding:10px 16px;background:var(--card);color:var(--muted);font-weight:800;font-size:12px;border-radius:10px}.weekday-tabs button.selected{background:var(--accent);color:#fff;border-color:var(--accent)}.schedule-row{display:flex;align-items:center;gap:17px;padding:18px 8px;border-top:1px solid var(--border)}.schedule-row:first-child{border:0}.schedule-period{border-radius:11px;background:var(--card2);width:42px;height:42px;display:grid;place-items:center;font-family:Outfit;font-size:18px;color:var(--accent);font-weight:800}.schedule-row div{flex:1}.schedule-row strong,.schedule-row small{display:block}.schedule-row strong{font-size:14px}.schedule-row small{font-size:11px;color:var(--muted)}.schedule-row time{font-size:11px;color:var(--muted);white-space:nowrap}.small-pill{font-size:9px;color:var(--accent);background:var(--card2);border-radius:7px;padding:6px 9px;white-space:nowrap;font-weight:800;letter-spacing:.5px}.task-item{border-top:1px solid var(--border);margin-top:15px;padding-top:18px}.task-item h3{font-size:15px;margin:9px 0 4px}.task-item p{font-size:12px;margin:0}.chip{padding:4px 8px;border-radius:6px;color:var(--accent2);background:var(--card2);font-size:10px;font-weight:800}.space-top{margin-top:15px}.muted{font-size:12px;color:var(--muted)}.responsive-table{overflow-x:auto;width:100%}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left;min-width:550px}th{font-size:10px;letter-spacing:.5px;color:var(--muted);font-weight:800;background:var(--card2)}td,th{padding:13px 15px;border-bottom:1px solid var(--border)}tbody tr:last-child td{border-bottom:0}.tag{padding:5px 8px;border-radius:7px;font-size:10px;font-weight:800;background:var(--card2);white-space:nowrap;color:var(--muted)}.tag.hadir,.tag.selesai,.tag.lancar{background:rgba(56,195,137,.12);color:var(--good)}.tag.izin,.tag.proses{background:rgba(110,155,255,.14);color:#8aabff}.tag.alpa,.tag.belum{background:rgba(243,121,122,.12);color:#eb909c}.tag.sakit,.tag.mengulang{background:rgba(240,179,81,.12);color:#e9b97b}.file-list{display:grid;gap:12px}.file-card{display:flex;align-items:center;gap:15px;padding:19px}.file-card>div{flex:1}.file-card h2{font-size:14px;margin:0 0 3px}.file-card small{font-size:10px;color:var(--accent)}.file-card p{font-size:11px;margin:5px 0 0}.file-icon{font-size:25px;background:var(--card2);padding:12px;border-radius:11px}.hint{font-size:11px;margin-top:14px}.quran-hero{padding:25px;display:flex;gap:26px;align-items:center;margin-bottom:24px;background:linear-gradient(120deg,var(--card),var(--card2))}.quran-hero h2{font-size:24px;margin:12px 0 8px}.quran-hero p{font-size:12px}.arabic{font-size:85px;color:var(--accent);min-width:170px;text-align:center}.media-card{overflow:hidden}.media-card>a>img,.media-card>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.media-placeholder{display:grid;place-items:center;font-size:60px;aspect-ratio:16/10;background:linear-gradient(130deg,#28234b,#153d54)}.media-desc{padding:17px}.media-desc h2{font-size:15px;margin-bottom:5px}.media-desc p{font-size:11px;margin:0 0 7px}.video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(140deg,#32265b,#153a54);overflow:hidden}.video-thumb>img{width:100%;height:100%;object-fit:cover}.play-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:55px;width:55px;border:none;border-radius:50%;color:#fff;font-size:21px;background:rgba(135,103,251,.91)}.video-thumb iframe{width:100%;height:100%;border:0}.contact-hero{padding:25px;display:flex;gap:24px;align-items:center;margin-bottom:22px}.contact-hero .big-emoji{font-size:45px}.contact-hero h2{font-size:23px;margin-bottom:4px}.contact-hero p{font-size:12px;margin:0}.contact-tile{padding:22px;display:flex;align-items:center;gap:17px;transition:.2s}.contact-tile>span{background:var(--card2);color:var(--accent);font-size:25px;padding:7px 13px;border-radius:10px}.contact-tile strong,.contact-tile small{display:block}.contact-tile small{color:var(--muted);font-size:11px;margin-top:3px}.empty-search{padding:28px;text-align:center;grid-column:1/-1;color:var(--muted);font-size:13px}.empty-search h2{color:var(--text);margin-top:8px}.locked{padding:55px 30px;text-align:center;max-width:700px;margin:25px auto}.locked h2{font-size:27px}.locked p{font-size:13px;max-width:500px;margin:10px auto 25px}.lock-emoji{display:block;font-size:52px}.site-footer{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--border);color:var(--muted);font-size:10px;padding:18px 34px;flex-wrap:wrap}.site-footer a{color:var(--accent)}.mobile-overlay{display:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
@media(min-width:1600px){.sidebar{width:285px}.main-wrap{margin-left:285px}}
@media(max-width:1060px){.sidebar{width:225px}.main-wrap{margin-left:225px}.topbar{padding:0 20px}main{padding:28px 24px 55px}.people-grid,.list-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{width:min(286px,85vw);transform:translateX(-102%);transition:transform .25s}.sidebar.open{transform:translateX(0)}.mobile-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.64);z-index:49}.main-wrap{margin-left:0}.topbar{height:67px;padding:0 15px}.menu-button{display:block}.pill-user{padding:9px 11px}.crumb{font-size:9px}.crumb b{font-size:11px}main{padding:23px 17px 44px}.page-header{margin-bottom:18px}.page-header h1{font-size:32px}.welcome{padding:25px}.welcome h2{font-size:33px}.welcome-symbol{font-size:85px}.stats{gap:10px}.stat{padding:13px;min-height:100px}.stat span{font-size:18px}.stat strong{font-size:22px}.stat small{font-size:10px}.two-cols,.three-cols{grid-template-columns:1fr}.people-grid,.list-grid,.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toolbar{padding:14px}.weekday-tabs{gap:5px}.weekday-tabs button{padding:9px 10px;font-size:11px}.file-card{flex-wrap:wrap}.quran-hero{gap:15px}.arabic{font-size:54px;min-width:100px}.site-footer{padding:19px;flex-direction:column}}
@media(max-width:470px){.welcome-symbol{display:none}.quick-links{gap:9px}.quick-link{padding:14px}.quick-link span{font-size:20px;margin-bottom:7px}.quick-link strong{font-size:12px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.people-grid,.list-grid,.media-grid{grid-template-columns:1fr}.person-card{padding:20px}.toolbar input[type=search]{min-width:100%}.toolbar-count{margin-left:0}.schedule-row{gap:10px}.schedule-row time{font-size:10px}.quran-hero{display:block}.arabic{display:block;min-width:0;margin-bottom:14px}.contact-hero{align-items:start}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
.demo-banner{border:1px dashed rgba(140,114,255,.55);background:rgba(130,110,245,.10);padding:11px 15px;border-radius:11px;margin-bottom:24px;color:var(--text);font-size:11px}.demo-banner strong{color:var(--accent)}

/* Identitas visual V3: parameter disimpan hanya admin, diterapkan di seluruh frontend. */
:root{--admin-brand:#A58BFF}body.light{--accent:var(--admin-brand)}
.identity-icon img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.identity-icon:has(img){background:none;padding:0;box-shadow:none}
.header-mini-logo{width:26px;height:26px;object-fit:contain;border-radius:6px}
.welcome-symbol img{max-width:95%;max-height:95%;object-fit:contain}
.identity-icon:not(:has(img)){background:var(--admin-brand)}.button.primary{background:var(--admin-brand)}

/* Palet brand menyebar ke menu aktif, hero, tombol dan notifikasi. */
:root{--brand-on:#152038}
.nav-item:hover,.nav-item.active{background:color-mix(in srgb,var(--admin-brand) 17%,transparent)}
.side-quote{background:linear-gradient(135deg,color-mix(in srgb,var(--admin-brand) 19%,transparent),var(--card))}
.welcome{background:radial-gradient(ellipse at right top,color-mix(in srgb,var(--admin-brand) 25%,transparent),transparent 53%),linear-gradient(125deg,var(--card),var(--card2))}
.button.primary{background:var(--admin-brand);color:var(--brand-on)}