body{background:radial-gradient(circle at 82% 0,#ede9fe 0,transparent 26%),linear-gradient(180deg,#f8faff,#f2f5fa);min-height:100vh}.panel,.stat,.course-card{border-color:#ffffffb8;box-shadow:0 12px 35px #25345b14;backdrop-filter:blur(12px);transition:.25s}.panel:hover,.stat:hover,.course-card:hover{transform:translateY(-2px);box-shadow:0 18px 45px #25345b1f}.sidebar{background:radial-gradient(circle at 30% 0,#30395d 0,transparent 30%),linear-gradient(180deg,#111827,#0a1020);box-shadow:12px 0 40px #080f1f1f}.topbar{background:#ffffffd9;backdrop-filter:blur(18px)}.portal-shell{max-width:1250px;margin:35px auto;padding:0 20px;position:relative}.app-ambient{position:fixed;width:360px;height:360px;background:#7c5cff18;filter:blur(70px);border-radius:50%;right:-80px;top:-90px;pointer-events:none}.portal-title{background:#ffffffa8;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:20px;padding:18px 22px;box-shadow:0 12px 38px #1d2c4f0c}.user-chip{background:#fff;padding:7px 13px 7px 7px;border:1px solid var(--line);border-radius:15px}.mobile-dock{display:none}.attendance-app-card{max-width:720px;margin:0 auto 25px;background:linear-gradient(145deg,#fff,#f8f9ff);border:1px solid #fff;border-radius:28px;padding:28px;box-shadow:0 22px 60px #232b4d21;overflow:hidden;position:relative}.attendance-top{display:flex;justify-content:space-between;align-items:flex-start}.attendance-top h2{font-size:30px;margin:6px 0}.attendance-top p{color:var(--muted);margin:0}.secure-chip{background:#e9fbf4;color:#07845d;padding:9px 12px;border-radius:30px;font-size:11px;font-weight:800}.step-track{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0;position:relative}.step-track:before{content:'';height:2px;background:#e4e8f0;position:absolute;left:11%;right:11%;top:18px}.step{text-align:center;z-index:1}.step span{display:grid;place-items:center;width:36px;height:36px;margin:auto;background:#edf0f5;color:#8d97a8;border:4px solid #fff;border-radius:50%;font-weight:800}.step small{display:block;margin-top:7px;font-size:9px;color:#8791a1}.step.done span{background:#15b981;color:#fff}.step.current span{background:linear-gradient(135deg,#8b5cf6,#5b3fde);color:#fff;box-shadow:0 0 0 6px #7656f518,0 8px 20px #6748e34a}.camera-stage{height:410px;background:#111827;border-radius:24px;overflow:hidden;position:relative}.camera-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-stage canvas{display:none}.camera-guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.camera-guide i{width:210px;height:270px;border:2px solid #ffffffb5;border-radius:48%;box-shadow:0 0 0 999px #07101e55}.camera-guide span{position:absolute;bottom:18px;color:#fff;background:#0b1224a8;padding:7px 12px;border-radius:30px;font-size:10px}.camera-loading{position:absolute;inset:0;background:#111827;color:#fff;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}.camera-loading i{font-size:45px;color:#8b72ff;animation:pulse 1.2s infinite}.capture-preview{display:none;position:relative}.capture-preview img{width:100%;height:410px;object-fit:cover;border-radius:24px;transform:scaleX(-1)}.capture-preview button{position:absolute;right:15px;bottom:15px;border:0;background:#0c1427d9;color:#fff;padding:10px 15px;border-radius:30px}.location-card{display:flex;align-items:center;gap:12px;background:#f4f7fb;border:1px solid #e8ecf3;padding:13px;margin:15px 0;border-radius:15px}.location-icon{width:39px;height:39px;border-radius:12px;background:#e8f3ff;color:#2587f5;display:grid;place-items:center;font-size:19px}.location-card>div{flex:1}.location-card b,.location-card small{display:block}.location-card small{color:var(--muted);font-size:10px}.spin{animation:spin 1s linear infinite}.gps-ok{color:#10a875}.gps-error{color:#e33d5f}.capture-btn{width:100%;border:0;background:#111827;color:#fff;border-radius:15px;padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800}.capture-btn span{width:37px;height:37px;display:grid;place-items:center;background:#fff;color:#111827;border-radius:50%;font-size:18px}.capture-btn:disabled,.final-punch:disabled{opacity:.42}.final-punch{margin-top:10px}.day-complete{text-align:center;padding:45px}.day-complete>i{font-size:70px;color:#12b981}.event-panel{max-width:1100px;margin:auto}.event-photo{width:58px;height:58px;object-fit:cover;border-radius:13px}.event-badge{padding:7px 10px;border-radius:30px;font-size:10px;font-weight:800;background:#edf8ff;color:#1976c9}.event-badge.lunch_in,.event-badge.lunch_out{background:#fff4e6;color:#d4760a}.event-badge.punch_out{background:#f1edff;color:#6245db}.map-link{color:#2679dd;font-weight:800;font-size:11px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.12);opacity:.65}}
@media(max-width:780px){body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}.content{padding-bottom:100px}.portal-shell{margin:14px auto;padding:0 12px 100px}.portal-title{padding:14px}.portal-title h2{font-size:19px}.user-chip b{display:none}.attendance-app-card{padding:18px 14px;border-radius:22px}.attendance-top h2{font-size:24px}.secure-chip{font-size:9px}.camera-stage,.capture-preview img{height:min(55vh,430px)}.mobile-dock{position:fixed;display:flex;align-items:flex-end;justify-content:space-around;z-index:90;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:67px;padding:8px;background:#101827ee;backdrop-filter:blur(18px);border-radius:21px;box-shadow:0 14px 35px #09101f5c}.mobile-dock a{color:#8691a7;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:55px;font-size:9px;font-weight:700}.mobile-dock a i{font-size:20px}.mobile-dock .dock-main{color:#fff;transform:translateY(-15px)}.mobile-dock .dock-main i{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#8566ff,#5a3cdb);box-shadow:0 8px 22px #6042db78}.event-panel table{min-width:720px}}