@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#172037;--muted:#718096;--navy:#101a38;--blue:#3759d7;--green:#19b77a;--surface:#fff;--bg:#f4f7fb;--line:#e7ebf3}*{box-sizing:border-box}body{font-family:Manrope,sans-serif;color:var(--ink);background:var(--bg)}.navbar{background:rgba(15,25,55,.97);backdrop-filter:blur(12px);min-height:72px}.navbar-brand small{display:block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#aeb7d5}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:white;background:linear-gradient(135deg,#5875f5,#26c58d);box-shadow:0 8px 20px #294ec94d}.brand-mark.big{width:54px;height:54px;font-size:1.25rem;margin-bottom:20px}.navbar .nav-link{color:#c5cbe0;border-radius:9px;padding:.55rem .75rem!important}.navbar .nav-link:hover,.navbar .nav-link.active{background:#ffffff13;color:white}.user-pill{border:1px solid #ffffff20}.page-wrap{padding-top:104px;min-height:calc(100vh - 65px);max-width:1500px}.hero-card{position:relative;overflow:hidden;padding:44px 48px;color:white;border-radius:26px;background:radial-gradient(circle at 85% 15%,#3d5fdb 0,transparent 35%),linear-gradient(125deg,#111b3b,#202d61)}.hero-card:after{content:'';position:absolute;width:330px;height:330px;border:1px solid #ffffff1c;border-radius:50%;right:-100px;top:-140px}.eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.18em;color:#7de0bd;margin-bottom:15px}.eyebrow.dark{color:var(--blue)}.hero-card h1{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1.08}.hero-card h1 span{color:#91a8ff}.hero-card p{color:#bec8e5;max-width:700px;font-size:1rem}.clock-card{position:relative;z-index:1;padding:28px;border:1px solid #ffffff1c;border-radius:20px;background:#ffffff10;text-align:center}.clock-card small,.clock-card span{display:block;color:#bdc8e5}.clock-card strong{font-size:2.6rem;letter-spacing:.04em}.stat-card{display:flex;align-items:center;gap:16px;background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 8px 30px #1720370a}.stat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px}.stat-icon.green{background:#e7fbf3;color:#13a76f}.stat-icon.purple{background:#f1edff;color:#7a5adc}.stat-icon.blue{background:#eaf0ff;color:#4262d5}.stat-icon.orange{background:#fff1e7;color:#e67d2e}.stat-card strong{font-size:1.65rem;display:block;line-height:1}.stat-card small{color:var(--muted)}.section-title{font-weight:800;font-size:1.45rem;margin:0}.legend{display:flex;gap:18px;font-size:.8rem;color:var(--muted)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.dot.live{background:var(--green);box-shadow:0 0 0 5px #19b77a18}.dot.idle{background:#9ba4bb}.room-card{height:100%;min-height:286px;border:1px solid var(--line);border-radius:20px;padding:22px;background:white;transition:.2s;box-shadow:0 8px 25px #17203708}.room-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #17203712}.room-card.is-live{border-top:4px solid var(--green)}.room-head{display:flex;justify-content:space-between}.room-code{font-weight:800;font-size:.8rem;color:#34405e;background:#f0f3f8;padding:7px 10px;border-radius:8px}.live-badge{font-size:.68rem;font-weight:800;color:#119666;margin-left:8px}.live-badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}.room-watermark{color:#dfe4ef;font-size:1.4rem}.room-card h3{font-size:1.2rem;font-weight:800;margin:18px 0 2px}.subject{color:var(--blue);font-weight:700}.teacher{display:flex;align-items:center;gap:10px}.teacher>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ecf0ff;color:var(--blue)}.teacher small,.teacher b{display:block}.teacher small{font-size:.65rem;color:var(--muted)}.material{font-size:.82rem;margin:16px 0;padding:12px;background:#f7f9fc;border-radius:10px}.material i{color:#f0a12a;margin-right:8px}.room-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem}.empty-room{text-align:center;padding:48px 0 20px;color:#99a3b9}.empty-room>i{font-size:2rem}.empty-room h3{color:#6b7690}.empty-room p{font-size:.8rem}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}.page-heading h1{font-weight:800;letter-spacing:-.04em;font-size:2.2rem;margin:0}.page-heading p{color:var(--muted);margin:5px 0 0}.btn{border-radius:10px;font-weight:700}.btn-primary{background:var(--blue);border-color:var(--blue)}.content-card,.report-sheet{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 8px 30px #17203708}.table>:not(caption)>*>*{padding:.9rem .8rem;border-bottom-color:var(--line)}.table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7d879e;background:#f8f9fc}.table-material{max-width:300px}.status,.role-badge{display:inline-block;padding:6px 10px;border-radius:20px;font-size:.68rem;font-weight:800}.status-draft{background:#fff3d9;color:#9a6900}.status-berlangsung{background:#e4f9f0;color:#08865a}.status-selesai{background:#edf0f5;color:#687188}.empty-state{text-align:center;padding:45px;color:var(--muted)}.empty-state>i{font-size:2.3rem;color:#a9b4ca}.empty-state h3{font-size:1rem;color:var(--ink);margin:15px 0 4px}.login-shell{display:grid;grid-template-columns:1.15fr .85fr;max-width:1060px;margin:20px auto 50px;background:var(--navy);border-radius:28px;overflow:hidden;box-shadow:0 25px 80px #17203725}.login-visual{padding:70px 60px;color:white;background:radial-gradient(circle at 20% 100%,#3856c8 0,transparent 42%)}.login-visual h1{font-size:2.7rem;font-weight:800;letter-spacing:-.05em}.login-visual p{color:#bec6de}.quote{margin-top:80px;padding:20px;border-left:3px solid #6ce0b5;background:#ffffff08;display:flex;gap:15px;color:#d6ddf2}.login-card{padding:60px;background:white}.login-card h2{font-weight:800}.input-icon{position:relative}.input-icon i{position:absolute;left:14px;top:15px;color:#98a2b7}.input-icon input{padding-left:42px}.form-control,.form-select{border-color:#dfe4ee;border-radius:10px;padding:.75rem .9rem}.form-control:focus,.form-select:focus{border-color:#7188e5;box-shadow:0 0 0 4px #3759d718}.demo-box{display:flex;flex-direction:column;margin-top:24px;padding:13px;background:#f4f7fc;border-radius:10px;font-size:.72rem}.form-section{padding:28px}.step-title{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}.step-title>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--blue);color:white;font-weight:800}.step-title h3{font-size:1rem;font-weight:800;margin:0}.step-title p{font-size:.75rem;color:var(--muted);margin:2px 0}.period-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}.period-grid input{display:none}.period-grid span{display:grid;place-items:center;aspect-ratio:1;border:1px solid #dfe4ee;border-radius:9px;cursor:pointer;font-weight:700}.period-grid input:checked+span{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 6px 12px #3759d72e}.attendance-input{margin-top:18px}.attendance-input label{font-size:.82rem;font-weight:700;margin-bottom:6px}.attendance-input label i{width:26px}.attendance-input.sick i{color:#e06a54}.attendance-input.permit i{color:#d79a22}.attendance-input.absent i{color:#8257c7}.info-note{display:flex;gap:10px;margin-top:20px;padding:13px;background:#eef3ff;color:#4e64aa;border-radius:10px;font-size:.74rem}.back-link{text-decoration:none;color:var(--blue);font-size:.8rem;font-weight:700}.filter-card{margin-bottom:22px}.report-head{display:flex;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:15px}.report-logo{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:var(--navy);color:white;margin-right:15px}.report-head h2{font-size:1.1rem;font-weight:800;margin:0}.report-head p,.report-head small,.report-head b{display:block;margin:0}.report-table{font-size:.78rem}.report-sign{display:flex;justify-content:space-between;margin:50px 50px 10px}.report-sign div{display:flex;flex-direction:column;min-width:220px}.report-sign b{margin-top:70px}.master-title{display:flex;align-items:center;gap:13px}.master-title>span{display:grid;place-items:center;width:44px;height:44px;background:#eef2ff;color:var(--blue);border-radius:12px}.master-title h3{font-size:1rem;font-weight:800;margin:0}.master-title small{color:var(--muted)}.master-list{max-height:280px;overflow:auto}.master-list>div{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--line);font-size:.82rem}.master-list i{color:var(--green)}.role-badge{background:#edf1ff;color:#4a62be}
@keyframes pulse{0%{box-shadow:0 0 0 0 #19b77a66}70%{box-shadow:0 0 0 7px #19b77a00}}@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.period-grid{grid-template-columns:repeat(5,1fr)}.hero-card{padding:30px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .btn{width:100%}}@media(max-width:575px){.page-wrap{padding-top:90px}.hero-card h1{font-size:2rem}.room-meta{gap:8px;flex-direction:column}.login-card{padding:35px 25px}.report-sign{margin:30px 0;gap:30px;flex-direction:column}.report-sign div{min-width:auto}}
.subject-checks{display:flex;flex-wrap:wrap;gap:8px}.subject-checks input{display:none}.subject-checks span{display:block;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:.76rem;cursor:pointer}.subject-checks input:checked+span{color:#fff;background:var(--blue);border-color:var(--blue)}.modal-content{border:0;border-radius:20px}.journal-sheet+.journal-sheet{margin-top:24px}
@media print{body{background:white;font-family:Arial,sans-serif}.navbar,.no-print,footer{display:none!important}.page-wrap{padding:0;max-width:none}.report-sheet{box-shadow:none;border:0;border-radius:0;padding:0}.journal-sheet{break-after:page}.journal-sheet:last-of-type{break-after:auto}.report-table{font-size:8.5pt}.report-table th{background:#eee!important;color:#000!important}.report-table td{height:34px}.report-sign{page-break-inside:avoid}}