*{box-sizing:border-box}body{color:#102314;background:#003f18;margin:0;font-family:Arial,Helvetica,sans-serif}.app{background:#f6fff3;max-width:460px;min-height:100vh;margin:auto;box-shadow:0 0 40px #00000073}.top{color:#fff;background:linear-gradient(135deg,#004d1d,#008a32);border-bottom:5px solid #ffd21f;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.brandGroup{align-items:center;gap:12px;min-width:0;display:flex}.logoImg{object-fit:contain;display:block}.logoImg.small{flex-shrink:0;width:64px;height:64px}.logoImg.large{width:150px;height:150px;margin:0 auto 12px}.top h1,.login h1{color:#ffd21f;letter-spacing:1px;margin:0;line-height:1}.top h1{font-size:25px}.login h1{margin-bottom:10px;font-size:34px}.top p,.top small,.login p,.login small{margin:3px 0;display:block}.userBar{background:#effbea;border-bottom:1px solid #dcebd8;justify-content:space-between;align-items:center;padding:9px 12px;display:flex}.userBar strong{font-size:16px}.roleText{color:#315d38;font-size:12px}.userBar button{white-space:nowrap;padding:8px 12px;font-size:13px}button{color:#fff;cursor:pointer;background:#07852f;border:none;border-radius:10px;padding:11px;font-weight:700}.menuToggle{background:#00230e59;border:2px solid #ffd21fcc;border-radius:14px;place-content:center;gap:5px;width:52px;min-width:52px;height:52px;padding:0;display:grid}.menuToggle span{background:#ffd21f;border-radius:999px;width:25px;height:3px;display:block}.menuBackdrop{z-index:20;background:#0014088c;border-radius:0;padding:0;display:none;position:fixed;inset:0}.menuBackdrop.open{display:block}.mobileMenu{z-index:30;background:linear-gradient(#022f14,#06481f);border-left:4px solid #ffd21f;width:min(88vw,390px);padding:16px;transition:transform .18s;position:fixed;top:0;bottom:0;right:max(0px,50vw - 230px);overflow-y:auto;transform:translate(110%);box-shadow:-12px 0 30px #00000059}.mobileMenu.open{transform:translate(0)}.menuHeader{border-bottom:1px solid #ffffff2e;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;padding:4px 0 16px;display:flex}.menuHeader strong,.menuHeader span,.menuHeader small{display:block}.menuHeader strong{color:#ffd21f;letter-spacing:.5px;font-size:23px}.menuHeader span{color:#fff;margin-top:3px;font-size:15px}.menuHeader small{color:#ffffffb3;margin-top:5px;font-size:12px}.menuClose{color:#fff;background:#ffffff21;border-radius:50%;min-width:42px;min-height:42px;padding:0;font-size:30px;line-height:1}.menuSection{margin-bottom:18px}.menuSection:last-child{margin-bottom:0}.menuSection h2{color:#ffd21f;letter-spacing:.7px;text-transform:uppercase;margin:0 0 8px;font-size:14px}.menuList{gap:9px;display:grid}.menuList button{text-align:left;background:#ffffff17;border:1px solid #ffffff29;border-radius:16px;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;min-height:56px;font-size:18px;display:grid}.menuList button.active{color:#073713;background:#ffd21f;border-color:#fff}.menuIcon{background:#ffffff24;border-radius:12px;place-items:center;width:34px;height:34px;font-size:20px;display:grid}.menuList button.active .menuIcon{background:#0737131f}.menuLabel{font-weight:800}.menuArrow{opacity:.8;font-size:30px;line-height:1}.currentScreenBar{background:#fff8c7;border-bottom:1px solid #ead66f;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;display:flex}.currentScreenBar span{color:#315d38;text-transform:uppercase;font-size:12px;font-weight:700}.currentScreenBar strong{color:#073713;text-align:right;font-size:18px}.snapshotPanel{color:#fff;background:linear-gradient(135deg,#073713,#0b7f33);border:2px solid #ffd21f;border-radius:20px;margin-bottom:16px;padding:16px;box-shadow:0 8px 22px #00000029}.sectionIntro{margin-bottom:12px}.sectionIntro span{color:#d5f2d4;letter-spacing:.6px;text-transform:uppercase;font-size:12px;font-weight:700;display:block}.sectionIntro h2{margin:3px 0;font-size:25px}.sectionIntro p{color:#eefbe9;margin:0;font-size:15px}.sectionIntro.compact{margin-top:14px}.sectionIntro.compact span{color:#315d38}.sectionIntro.compact h2{color:#073713;font-size:21px}.snapshotGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.snapshotGrid .card{margin-bottom:0;padding:12px}.snapshotGrid .card h3{font-size:13px}.snapshotGrid .card strong{font-size:21px}.dashboardDetails{margin-top:18px}main{padding:14px}.grid{gap:12px;display:grid}.card,.attendanceBoard,.requestCard{background:#fff;border:1px solid #dcebd8;border-radius:16px;margin-bottom:12px;padding:14px;box-shadow:0 4px 14px #00000014}.card h3{margin:0 0 6px;font-size:16px}.card strong{color:#007c2b;margin-bottom:6px;font-size:24px;display:block}.card p{margin:0 0 3px;font-size:14px}.attendanceRow{border-bottom:1px solid #e8f0e4;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.attendanceRow:last-child{border-bottom:none}.attendanceRow span{font-weight:700}.attendanceRow strong{color:#007c2b;white-space:nowrap}.miniText{color:#55715b;margin-top:3px;font-size:12px}.approvalButtons{gap:8px;margin-top:10px;display:flex}.login{background:radial-gradient(circle,#0d8a35,#003515);place-items:center;min-height:100vh;padding:16px;display:grid}.loginCard{text-align:center;background:#fff;border:4px solid #ffd21f;border-radius:24px;width:100%;max-width:390px;padding:28px}.login input,.formInput{border:1px solid #bbb;border-radius:12px;width:100%;margin:10px 0;padding:15px;font-size:16px}.login button{width:100%;margin-top:12px;font-size:16px}.demoPins{color:#253326;margin-top:10px;font-size:16px;line-height:1.25}.reasonBox{resize:vertical;border:1px solid #ccc;border-radius:12px;width:100%;min-height:80px;margin:10px 0;padding:12px;font-size:15px}.actions{grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;display:grid}.actions button{min-height:58px}.clockOut,.danger{background:#d71920}.feed{gap:10px;display:grid}.feedItem{background:#fff;border-left:6px solid #07852f;border-radius:12px;padding:14px;box-shadow:0 3px 12px #0000000f}.timeline{background:#f1fbef;border:1px solid #dcebd8;border-radius:12px;margin-top:10px;padding:10px}.timeline h4{margin:0 0 6px;font-size:14px}.timelineRow{border-bottom:1px solid #e2eee0;gap:8px;padding:3px 0;display:flex}.timelineRow:last-child{border-bottom:none}.timelineRow span{color:#07852f;width:16px;font-size:12px;font-weight:700}.timelineRow strong{margin:0;font-size:13px}.timelineRow small{color:#55715b;margin-top:1px;font-size:11px;display:block}footer{text-align:center;color:#4d6b52;padding:16px 12px;font-size:12px}.maintenanceHistoryCard{background:#f6fff3;border:1px solid #cfe8c8;border-left:5px solid #07852f;border-radius:14px;margin-top:10px;padding:12px}.maintenanceHistoryCard strong{margin-bottom:5px;font-size:17px}.expenseCheckbox{color:#253326;background:#fffbe6;border:1px solid #cfe8c8;border-radius:12px;align-items:flex-start;gap:10px;width:100%;margin:10px 0 14px;padding:13px;font-weight:700;line-height:1.25;display:flex}.expenseCheckbox input{accent-color:#07852f;flex:none;width:22px;height:22px}.expenseTag{color:#102314;background:#ffd21f;border-radius:999px;margin-top:8px;padding:6px 9px;font-size:12px;font-weight:700;display:inline-block}.equipmentActionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.downtimeCard{border-left:7px solid #c62828}details.card summary,.card details summary{cursor:pointer;color:#075f26;padding:5px 0}@media (width<=720px){.equipmentActionGrid{grid-template-columns:1fr}}