@font-face{font-family:LINESeedSansTH;src:url(https://cdn.jsdelivr.net/gh/ok1developer/NO1Money/LINESeedSansTH_W_Rg.woff)format("woff");font-weight:400}@font-face{font-family:LINESeedSansTH;src:url(https://cdn.jsdelivr.net/gh/ok1developer/NO1Money/LINESeedSansTH_W_Bd.woff)format("woff");font-weight:700}:root{--bg-main:#eef2ff;--primary-blue:#6366f1;--primary-light:#eef2ff;--text-dark:#1e293b;--text-gray:#64748b;--card-bg:#ffffffbf;--success:#10b981;--warning:#f59e0b;--danger:#f43f5e;--line-green:#06c755;--grad-blue:linear-gradient(135deg, #6366f1, #8b5cf6);--grad-out:linear-gradient(135deg, #f43f5e, #fb7185);--grad-lunch:linear-gradient(135deg, #f59e0b, #fbbf24);--grad-break:linear-gradient(135deg, #06b6d4, #38bdf8)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{touch-action:manipulation;-ms-touch-action:manipulation;-webkit-text-size-adjust:100%}input[type=text],input[type=number],input[type=email],input[type=tel],input[type=password],textarea,select{font-size:16px!important}body{background:linear-gradient(135deg,#c7d2fe,#ddd6fe,#bae6fd);justify-content:center;align-items:center;min-height:100dvh;font-family:LINESeedSansTH,sans-serif;display:flex}.app-container{background:linear-gradient(175deg,#f0f4ff 0%,#eef2ff 50%,#f5f0ff 100%);flex-direction:column;width:100%;max-width:480px;height:100dvh;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 60px -10px #6366f140}@media (min-width:520px){.app-container{border-radius:40px;height:92dvh;max-height:920px}}.aurora-bg{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.aurora-blob{filter:blur(80px);opacity:.45;border-radius:50%;animation:18s ease-in-out infinite alternate auroraAnim;position:absolute}.aurora-1{background:radial-gradient(circle,#a5b4fc,#818cf8);width:360px;height:360px;top:-130px;left:-120px}.aurora-2{background:radial-gradient(circle,#ddd6fe,#c4b5fd);width:280px;height:280px;animation-delay:-6s;top:25%;right:-120px}.aurora-3{background:radial-gradient(circle,#bae6fd,#7dd3fc);width:400px;height:400px;animation-delay:-12s;bottom:-150px;left:10%}@keyframes auroraAnim{0%{transform:translate(0)scale(1)}50%{transform:translate(40px,60px)scale(1.15)}to{transform:translate(-25px,35px)scale(.88)}}#login-screen{z-index:100;background:0 0;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:flex;position:absolute;inset:0}.login-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#ffffffd9;border:1px solid #fff9;border-radius:32px;width:100%;padding:44px 32px;box-shadow:0 20px 60px #6366f126}.btn-line{color:#fff;cursor:pointer;background:linear-gradient(135deg,#06c755,#00a843);border:none;border-radius:20px;justify-content:center;align-items:center;gap:10px;width:100%;padding:17px;font-family:inherit;font-size:16px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 10px 25px #06c75559}.btn-line:hover{transform:translateY(-2px);box-shadow:0 14px 30px #06c75573}.header{padding:max(env(safe-area-inset-top,16px), 40px) clamp(16px, 5vw, 28px) 12px;z-index:1;background:0 0;justify-content:space-between;align-items:center;display:flex;position:relative}.greeting p{color:var(--text-gray);margin-bottom:3px;font-size:clamp(11px,3vw,13px)}.greeting h1{color:var(--text-dark);font-size:clamp(18px,5vw,22px);font-weight:700}.profile-pic{object-fit:cover;border:2px solid #fffc;border-radius:16px;width:clamp(42px,11vw,52px);height:clamp(42px,11vw,52px);box-shadow:0 6px 20px #6366f133}.content-area{scrollbar-width:none;z-index:1;flex:1;padding:0 clamp(14px,4vw,24px) clamp(90px,14vh,110px);position:relative;overflow-y:auto}.content-area::-webkit-scrollbar{display:none}.section{animation:.3s fadeIn;display:none}.section.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border:1px solid #fff9;border-radius:clamp(18px,5vw,24px);margin-bottom:clamp(10px,3vw,16px);padding:clamp(14px,4vw,20px);box-shadow:0 8px 32px #6366f114}.section-title{color:var(--text-dark);justify-content:space-between;align-items:center;margin-bottom:clamp(10px,3vw,16px);font-size:clamp(14px,4vw,16px);font-weight:700;display:flex}.stats-row{grid-template-columns:repeat(4,1fr);gap:clamp(5px,2vw,10px);margin-bottom:clamp(10px,3vw,16px);display:grid}.stat-box{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#ffffffd1;border:1px solid #ffffffb3;border-radius:clamp(14px,4vw,18px);padding:clamp(10px,3vw,14px) clamp(3px,1vw,6px);transition:transform .2s;box-shadow:0 4px 20px #6366f114}.stat-box:hover{transform:translateY(-2px)}.stat-icon{border-radius:clamp(9px,3vw,12px);justify-content:center;align-items:center;width:clamp(30px,8vw,38px);height:clamp(30px,8vw,38px);margin:0 auto clamp(5px,2vw,8px);font-size:clamp(12px,3.5vw,15px);display:flex}.icon-blue{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 10px #6366f159}.icon-orange{color:#fff;background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 4px 10px #f59e0b59}.icon-green{color:#fff;background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 4px 10px #10b98159}.icon-red{color:#fff;background:linear-gradient(135deg,#f43f5e,#fb7185);box-shadow:0 4px 10px #f43f5e59}.stat-val{color:var(--text-dark);margin:4px 0 2px;font-size:clamp(16px,4.5vw,20px);font-weight:800;animation:3s ease-in-out infinite statFloat;display:block}@keyframes statFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.stat-label{color:var(--text-gray);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(9px,2.5vw,11px);overflow:hidden}.news-slider-wrap{border-radius:clamp(18px,5vw,22px);margin-bottom:clamp(10px,3vw,16px);position:relative;overflow:hidden;box-shadow:0 8px 32px #6366f11f}.news-track{will-change:transform;transition:transform .45s cubic-bezier(.4,0,.2,1);display:flex}.news-slide{cursor:pointer;min-width:100%;position:relative}.news-slide img{object-fit:cover;width:100%;height:clamp(140px,35vw,180px);display:block}.news-overlay{background:linear-gradient(#0000 0%,#0f0a281a 40%,#0f0a28d1 100%);position:absolute;inset:0}.news-content{padding:clamp(10px,3vw,16px);position:absolute;bottom:15px;left:0;right:0}.news-tag{background:var(--grad-blue);color:#fff;letter-spacing:.5px;border-radius:20px;margin-bottom:5px;padding:3px 10px;font-size:10px;font-weight:700;display:inline-block}.news-title{color:#fff;text-shadow:0 1px 4px #0006;font-size:clamp(12px,3.5vw,14px);font-weight:700;line-height:1.35}.news-date{color:#ffffffb3;margin-top:3px;font-size:10px}.news-dots{z-index:10;justify-content:center;gap:5px;padding:0;display:flex;position:absolute;bottom:8px;left:0;right:0}.news-dot{cursor:pointer;background:#fff6;border-radius:50%;width:6px;height:6px;transition:all .3s}.news-dot.active{background:#fff;border-radius:4px;width:18px}.news-modal{z-index:200;opacity:0;pointer-events:none;flex-direction:column;transition:opacity .3s;display:flex;position:fixed;inset:0}.news-modal.open{opacity:1;pointer-events:all}.news-modal-bg{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f0a2899;position:absolute;inset:0}.news-modal-sheet{background:linear-gradient(175deg,#f0f4ff,#eef2ff);border-radius:28px 28px 0 0;max-height:88dvh;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.news-modal.open .news-modal-sheet{transform:translateY(0)}.news-modal-img{object-fit:cover;width:100%;height:200px}.news-modal-body{padding:20px}.news-modal-tag{background:var(--grad-blue);color:#fff;border-radius:20px;margin-bottom:10px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-block}.news-modal-title{color:var(--text-dark);margin-bottom:6px;font-size:clamp(16px,4.5vw,20px);font-weight:700;line-height:1.3}.news-modal-meta{color:var(--text-gray);align-items:center;gap:6px;margin-bottom:16px;font-size:12px;display:flex}.news-modal-text{color:var(--text-gray);font-size:clamp(13px,3.5vw,14px);line-height:1.7}.news-modal-close{cursor:pointer;width:34px;height:34px;color:var(--text-dark);z-index:10;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 2px 10px #0000001a}.method-scroll{scrollbar-width:none;gap:clamp(6px,2vw,10px);padding-bottom:8px;display:flex;overflow-x:auto}.method-scroll::-webkit-scrollbar{display:none}.method-pill{color:var(--text-gray);white-space:nowrap;cursor:pointer;background:#fff9;border:1px solid #fffc;border-radius:20px;padding:clamp(7px,2vw,10px) clamp(12px,3.5vw,18px);font-size:clamp(11px,3.2vw,13px);transition:all .25s}.method-pill.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#0000;font-weight:700;box-shadow:0 6px 16px #6366f14d}.clock-display{color:var(--text-dark);text-align:center;letter-spacing:clamp(1px,.5vw,3px);font-variant-numeric:tabular-nums;text-shadow:0 2px 20px #6366f126;margin:clamp(4px,2vw,10px) 0 clamp(12px,4vw,20px);font-size:clamp(36px,11vw,52px);font-weight:700}.action-grid{grid-template-columns:1fr 1fr;gap:clamp(8px,3vw,14px);margin-bottom:clamp(8px,3vw,12px);display:grid}.btn-action{cursor:pointer;color:#fff;border:none;border-radius:clamp(18px,5vw,22px);flex-direction:column;justify-content:center;align-items:center;gap:clamp(4px,1.5vw,8px);padding:clamp(14px,4vw,20px) clamp(8px,3vw,14px);font-family:inherit;font-size:clamp(12px,3.5vw,15px);font-weight:700;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex}.btn-action:hover:not(.btn-disabled){transform:translateY(-3px)scale(1.02)}.btn-action:active:not(.btn-disabled){transform:scale(.97)}.btn-in{background:var(--grad-blue);box-shadow:0 10px 25px #6366f159}.btn-out{background:var(--grad-out);color:#fff;box-shadow:0 10px 25px #f43f5e4d}.timestamp{letter-spacing:1px;font-size:clamp(16px,5vw,22px);font-weight:700}.btn-disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)}.break-grid{grid-template-columns:1fr 1fr;gap:clamp(8px,3vw,14px);margin-top:clamp(8px,3vw,12px);display:grid}.btn-break{background:var(--grad-lunch);color:#fff;cursor:pointer;border:none;border-radius:clamp(14px,4vw,18px);flex-direction:column;justify-content:center;align-items:center;gap:clamp(4px,1.5vw,7px);padding:clamp(12px,3.5vw,16px);font-family:inherit;font-size:clamp(11px,3.2vw,13px);font-weight:700;transition:all .3s;display:flex;box-shadow:0 6px 18px #f59e0b40}.btn-break:nth-child(2){background:var(--grad-break);box-shadow:0 6px 18px #06b6d440}.btn-break span{opacity:.9;font-size:clamp(10px,2.8vw,12px);font-weight:400}.btn-break:hover{transform:translateY(-2px)}.btn-break.active{animation:1.5s infinite pulseBreak}@keyframes pulseBreak{0%{box-shadow:0 0 #f59e0b80}70%{box-shadow:0 0 0 12px #f59e0b00}to{box-shadow:0 0 #f59e0b00}}.btn-break.overtime{background:linear-gradient(135deg,#94a3b8,#64748b);animation:none;box-shadow:0 6px 18px #64748b40}.btn-break.overtime.active{animation:1.5s infinite pulseOvertime}@keyframes pulseOvertime{0%{box-shadow:0 0 #64748b80}70%{box-shadow:0 0 0 12px #64748b00}to{box-shadow:0 0 #64748b00}}.cal-card{flex-direction:column;transition:all .3s;display:flex;overflow:hidden}.cal-card-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;display:flex}.cal-card-header .toggle-icon{color:var(--text-gray);transition:transform .3s}.cal-body{opacity:1;max-height:400px;margin-top:15px;transition:max-height .4s,opacity .3s,margin-top .3s;overflow:hidden}.cal-card.collapsed .cal-body{opacity:0;max-height:0;margin-top:0}.cal-card.collapsed .cal-card-header .toggle-icon{transform:rotate(180deg)}.cal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.cal-header button{color:var(--text-gray);cursor:pointer;background:0 0;border:none;padding:5px;font-size:16px}.cal-header h3{color:var(--text-dark);margin:0;font-size:16px;font-weight:700}.cal-weekdays{text-align:center;color:var(--text-gray);grid-template-columns:repeat(7,1fr);margin-bottom:12px;font-size:12px;font-weight:400;display:grid}.cal-days{text-align:center;grid-template-columns:repeat(7,1fr);gap:8px 4px;display:grid}.cal-day{aspect-ratio:1;color:var(--text-dark);cursor:default;border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:all .2s;display:flex}.cal-day.muted{color:#cbd5e1;font-weight:400}.cal-day.today{background:var(--primary-blue);color:#fff;box-shadow:0 4px 10px #4285f44d}.cal-day.holiday{color:var(--danger)}.cal-day.holiday.today{background:var(--danger);color:#fff;box-shadow:0 4px 10px #ef44444d}.cal-legend{color:var(--text-gray);justify-content:center;gap:15px;margin-top:20px;font-size:11px;display:flex}.legend-item{align-items:center;gap:6px;display:flex}.history-item{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:14px 0;display:flex}.history-item:last-child{border-bottom:none}.h-left{align-items:center;gap:14px;display:flex}.h-icon{color:#fff;border-radius:14px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;display:flex}.h-text{color:var(--text-dark);font-size:15px;font-weight:700}.h-subtext{color:var(--text-gray);margin-top:3px;font-size:12px}.h-time{color:var(--text-dark);font-size:14px;font-weight:700}.bg-blue{background:var(--primary-blue)}.bg-red{background:var(--danger)}.bg-orange{background:var(--warning)}.bg-gray{background:#94a3b8}.profile-wrap{justify-content:center;align-items:center;display:flex;position:relative}.profile-glow{filter:blur(4px);opacity:.85;background:conic-gradient(#6366f1,#8b5cf6,#06b6d4,#10b981,#f59e0b,#f43f5e,#6366f1);border-radius:20px;width:calc(clamp(42px,11vw,52px) + 16px);height:calc(clamp(42px,11vw,52px) + 16px);animation:3s linear infinite spinGlow;position:absolute}@keyframes spinGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-glow-inner{background:var(--bg-main);border-radius:18px;width:calc(clamp(42px,11vw,52px) + 8px);height:calc(clamp(42px,11vw,52px) + 8px);position:absolute}.emp-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:1;background:#ffffffb8;border:1px solid #ffffffa6;border-radius:clamp(16px,4vw,20px);align-items:center;gap:clamp(12px,3.5vw,16px);margin:0 clamp(14px,4vw,24px) clamp(10px,3vw,14px);padding:clamp(12px,3.5vw,16px) clamp(14px,4vw,20px);display:flex;position:relative;box-shadow:0 6px 24px #6366f11a}.emp-avatar{object-fit:cover;border:2px solid #ffffffe6;border-radius:16px;flex-shrink:0;width:clamp(48px,13vw,60px);height:clamp(48px,13vw,60px);box-shadow:0 4px 14px #6366f133}.emp-info{flex:1;min-width:0}.emp-name{color:var(--text-dark);margin-bottom:2px;font-size:clamp(14px,4vw,16px);font-weight:700}.emp-pos{color:var(--text-gray);white-space:nowrap;text-overflow:ellipsis;margin-bottom:5px;font-size:clamp(10px,2.8vw,12px);overflow:hidden}.emp-badges{flex-wrap:wrap;gap:5px;display:flex}.emp-badge{border-radius:20px;padding:2px 9px;font-size:10px;font-weight:700}.badge-dept{color:var(--primary-blue);background:#eef2ff}.badge-id{color:#059669;background:#f0fdf4}.emp-status{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:4px;display:flex}.emp-status-dot{background:#10b981;border-radius:50%;width:10px;height:10px;animation:2s infinite statusPulse;box-shadow:0 0 0 3px #10b98133}@keyframes statusPulse{0%,to{box-shadow:0 0 0 3px #10b98133}50%{box-shadow:0 0 0 6px #10b98114}}.emp-status-txt{color:#10b981;font-size:10px;font-weight:700}.profile-modal{z-index:300;opacity:0;pointer-events:none;transition:opacity .3s;position:fixed;inset:0}.profile-modal.open{opacity:1;pointer-events:all}.profile-modal-bg{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f0a288c;position:absolute;inset:0}.profile-modal-sheet{background:linear-gradient(175deg,#f0f4ff,#eef2ff 50%,#f5f0ff);border-radius:28px 28px 0 0;max-height:92dvh;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.profile-modal.open .profile-modal-sheet{transform:translateY(0)}.profile-modal-handle{background:#6366f133;border-radius:2px;width:40px;height:4px;margin:12px auto 0}.profile-modal-close{cursor:pointer;width:34px;height:34px;color:var(--text-dark);z-index:10;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 2px 10px #00000014}.profile-hero{flex-direction:column;align-items:center;padding:24px 20px 16px;display:flex}.profile-hero-wrap{justify-content:center;align-items:center;width:90px;height:90px;margin-bottom:14px;display:flex;position:relative}.profile-hero-glow{filter:blur(5px);opacity:.9;background:conic-gradient(#6366f1,#8b5cf6,#06b6d4,#10b981,#f59e0b,#f43f5e,#6366f1);border-radius:26px;animation:3s linear infinite spinGlow;position:absolute;inset:-8px}.profile-hero-inner{background:linear-gradient(175deg,#f0f4ff,#eef2ff);border-radius:22px;position:absolute;inset:-3px}.profile-hero-img{object-fit:cover;z-index:1;border:2px solid #ffffffe6;border-radius:22px;width:90px;height:90px;position:relative}.profile-hero-name{color:var(--text-dark);margin-bottom:4px;font-size:clamp(18px,5vw,22px);font-weight:700}.profile-hero-pos{color:var(--text-gray);margin-bottom:12px;font-size:13px}.profile-hero-badges{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.profile-section{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffb8;border:1px solid #ffffffa6;border-radius:20px;margin:0 16px 12px;overflow:hidden}.profile-section-title{color:var(--text-gray);letter-spacing:.5px;text-transform:uppercase;padding:12px 16px 0;font-size:12px;font-weight:700}.profile-row{border-bottom:1px solid #f1f5f9cc;align-items:center;gap:12px;padding:12px 16px;display:flex}.profile-row:last-child{border-bottom:none}.profile-row-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;display:flex}.profile-row-label{color:var(--text-gray);margin-bottom:2px;font-size:11px}.profile-row-val{color:var(--text-dark);font-size:14px;font-weight:700}.profile-stat-row{grid-template-columns:repeat(3,1fr);gap:0;display:grid}.profile-stat-item{text-align:center;border-right:1px solid #f1f5f9cc;padding:14px 8px}.profile-stat-item:last-child{border-right:none}.profile-stat-val{margin-bottom:2px;font-size:20px;font-weight:800;animation:3s ease-in-out infinite statFloat}.profile-stat-label{color:var(--text-gray);margin-top:2px;font-size:10px}.form-label{color:var(--text-gray);margin-bottom:8px;font-size:13px;font-weight:700;display:block}.form-input{width:100%;color:var(--text-dark);box-sizing:border-box;background:#f8fafc;border:1px solid #0000;border-radius:16px;outline:none;margin-bottom:20px;padding:16px;font-family:inherit;font-size:14px;transition:all .3s}.form-input:focus{border-color:var(--primary-blue);background:#fff}.btn-submit{background:var(--primary-blue);color:#fff;cursor:pointer;border:none;border-radius:20px;width:100%;padding:16px;font-family:inherit;font-size:15px;font-weight:700;box-shadow:0 8px 20px #4285f440}.bottom-nav{-webkit-backdrop-filter:blur(24px);width:100%;padding:10px 8px max(env(safe-area-inset-bottom,10px), 14px);z-index:10;background:#ffffffeb;border-top:1px solid #fffc;border-top-left-radius:28px;border-top-right-radius:28px;justify-content:space-around;align-items:center;display:flex;position:absolute;bottom:0;left:0;box-shadow:0 -6px 40px #6366f11a,0 -1px #fffc}.nav-item{color:#b0b8d8;cursor:pointer;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;height:100%;padding:8px 4px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.nav-icon-wrapper{justify-content:center;align-items:center;width:100%;height:32px;transition:all .3s;display:flex}.nav-item i{font-size:22px;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.nav-item .nav-label{opacity:.7;letter-spacing:.2px;white-space:nowrap;font-size:10px;font-weight:600;transition:all .3s}.nav-item.active{color:var(--primary-blue)}.nav-item.active .nav-label{opacity:1}.nav-item.active .nav-icon-wrapper{transform:translateY(-2px)}.nav-item.active:before{content:"";z-index:-1;background:#6366f114;border-radius:14px;width:40px;height:40px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.fab-container{z-index:11;flex:1;justify-content:center;display:flex;position:relative;top:-22px}.fab{background:var(--grad-blue);color:#fff;cursor:pointer;border-radius:20px;justify-content:center;align-items:center;width:58px;height:58px;font-size:24px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 8px 24px #6366f173,0 0 0 4px #ffffffe6}.fab:hover{transform:scale(1.1);box-shadow:0 12px 30px #6366f18c}.fab:active{transform:scale(.93)}.nav-profile-img{object-fit:cover;border:2px solid #e2e8f0;border-radius:50%;width:26px;height:26px;transition:all .3s}.nav-item.active .nav-profile-img{border-color:var(--primary-blue);box-shadow:0 0 0 3px #6366f133}.swal-ios{-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;background:#ffffffd9!important;border:1px solid #ffffff80!important;border-radius:14px!important;width:280px!important;padding:20px 0 0!important;box-shadow:0 10px 40px #00000026!important}.swal-ios-title{color:#000!important;padding:0 20px 5px!important;font-size:17px!important;font-weight:700!important}.swal-ios-text{color:#333!important;margin:0!important;padding:0 20px 15px!important;font-size:13px!important}.swal-ios-actions{border-top:1px solid #0000001a!important;width:100%!important;margin:0!important;padding:0!important}.swal-ios-confirm{color:#007aff!important;width:100%!important;box-shadow:none!important;background:0 0!important;border-radius:0 0 14px 14px!important;margin:0!important;padding:12px 0!important;font-size:17px!important;font-weight:600!important}.swal-ios-confirm:active{background:#0000000d!important}.card-header-banner{border-radius:clamp(18px,5vw,24px) clamp(18px,5vw,24px) 0 0;align-items:center;gap:14px;margin:calc(-1*clamp(14px,4vw,20px)) calc(-1*clamp(14px,4vw,20px)) 20px;padding:20px clamp(14px,4vw,20px) 18px;display:flex;position:relative;overflow:hidden}.card-header-banner:before{content:"";background:inherit;z-index:0;position:absolute;inset:0}.card-header-banner-leave{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%)}.card-header-banner-doc{background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%)}.card-header-icon-wrap{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;z-index:1;background:#ffffff40;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:22px;display:flex;position:relative;box-shadow:0 4px 12px #00000026}.card-header-text{z-index:1;position:relative}.card-header-title{color:#fff;letter-spacing:.2px;margin-bottom:2px;font-size:17px;font-weight:700}.card-header-subtitle{color:#ffffffbf;font-size:12px}.card-header-deco{z-index:0;background:#ffffff14;border-radius:50%;width:100px;height:100px;position:absolute;top:-20px;right:-20px}.card-header-deco2{z-index:0;background:#ffffff0f;border-radius:50%;width:70px;height:70px;position:absolute;bottom:-30px;right:30px}.option-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;display:grid}.option-card{text-align:center;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:16px 6px 12px;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.option-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #6366f11f}.option-card.active{border-color:var(--primary-blue);background:linear-gradient(145deg,#eef2ff,#f5f0ff);transform:translateY(-2px);box-shadow:0 6px 20px #6366f138}.option-card.active:after{content:"✓";color:var(--primary-blue);background:#eef2ff;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;font-weight:700;line-height:16px;display:flex;position:absolute;top:6px;right:8px}.option-icon{color:var(--text-gray);margin-bottom:8px;font-size:26px;transition:all .25s}.option-card.active .option-icon{color:var(--primary-blue);filter:drop-shadow(0 2px 6px #6366f14d);transform:scale(1.15)}.option-title{color:var(--text-dark);margin-bottom:3px;font-size:13px;font-weight:700}.option-card.active .option-title{color:var(--primary-blue)}.option-quota{color:var(--text-gray);background:#f1f5f9;border-radius:20px;padding:2px 7px;font-size:10px;display:inline-block}.option-card.active .option-quota{color:var(--primary-blue);background:#6366f11a}.upload-zone{text-align:center;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:16px;margin-bottom:16px;padding:20px;transition:all .3s}.upload-zone.required{background:linear-gradient(135deg,#fef2f2,#fff5f5);border-color:#fca5a5}.form-row{align-items:flex-end;gap:10px;margin-bottom:16px;display:flex}.form-col{flex:1;min-width:0;overflow:hidden}.form-arrow{color:var(--text-gray);flex-shrink:0;padding-bottom:20px;font-size:14px}.badge-pulse{animation:2s infinite pulse-red}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 #f43f5eb3}70%{transform:scale(1);box-shadow:0 0 0 10px #f43f5e00}to{transform:scale(.95);box-shadow:0 0 #f43f5e00}}@media (max-width:359px){.header{padding:max(env(safe-area-inset-top,10px), 30px) 12px 8px}.greeting h1{font-size:16px}.stats-row{grid-template-columns:repeat(2,1fr);gap:6px}.action-grid,.break-grid{grid-template-columns:1fr;gap:8px}.option-grid{grid-template-columns:1fr 1fr;gap:8px}.clock-display{font-size:32px}.login-card{border-radius:24px;padding:30px 20px}.nav-item{padding:4px 8px}.nav-item .nav-label{font-size:9px}.fab{border-radius:16px;width:50px;height:50px;font-size:20px}.fab-container{top:-18px}.card-header-banner{gap:10px;padding:16px 12px 14px}.card-header-icon-wrap{width:40px;height:40px;font-size:18px}.card-header-title{font-size:14px}.card-header-subtitle{font-size:11px}.form-row{flex-direction:column;gap:0}.form-arrow{display:none}.form-col{width:100%}.form-input{margin-bottom:12px}.news-slide img{height:120px}}@media (min-width:481px) and (max-width:767px){.app-container{max-width:520px}.news-slide img{height:200px}.news-modal-img{height:240px}.profile-modal-sheet,.news-modal-sheet{border-radius:28px 28px 0 0;max-width:520px;margin:0 auto}}@media (min-width:768px){body{padding:20px}.app-container{border-radius:36px;max-width:600px;height:90dvh;max-height:1000px}.header{padding:24px 28px 14px}.greeting h1{font-size:24px}.greeting p{font-size:14px}.content-area{padding:0 28px 110px}.stats-row{gap:12px}.stat-box{border-radius:20px;padding:16px 8px}.stat-val{font-size:22px}.stat-label{font-size:12px}.news-slide img{height:220px}.news-modal-img{height:260px}.clock-display{font-size:56px}.btn-action{border-radius:24px;padding:22px 16px;font-size:16px}.card{border-radius:26px;padding:22px}.option-grid{gap:12px}.option-card{border-radius:18px;padding:18px 8px 14px}.option-icon{font-size:30px}.option-title{font-size:14px}.card-header-banner{gap:16px;padding:22px 22px 20px}.card-header-icon-wrap{width:52px;height:52px;font-size:24px}.card-header-title{font-size:19px}.card-header-subtitle{font-size:13px}.form-input{padding:18px;font-size:15px}.btn-submit{border-radius:22px;padding:18px;font-size:16px}.profile-modal-sheet,.news-modal-sheet{max-width:600px;margin:0 auto}.bottom-nav{border-top-left-radius:32px;border-top-right-radius:32px}.emp-card{border-radius:22px;margin:0 28px 14px;padding:16px 22px}.profile-hero-name{font-size:24px}.profile-hero-pos{font-size:15px}.profile-stat-val{font-size:24px}.profile-section{border-radius:22px;margin:0 20px 14px}.profile-row{padding:14px 18px}.profile-row-val{font-size:15px}}@media (min-width:1024px){body{background:linear-gradient(135deg,#c7d2fe 0%,#ddd6fe 40%,#bae6fd 100%);padding:30px}.app-container{border-radius:40px;max-width:440px;height:88dvh;max-height:900px;box-shadow:0 40px 80px -10px #6366f14d,0 0 0 1px #fff6}.news-modal,.profile-modal,#notif-modal{position:fixed;inset:0}.profile-modal-sheet,.news-modal-sheet,#notif-modal .profile-modal-sheet{max-width:480px;margin:0 auto}}@media (min-width:1440px){.app-container{max-width:460px;max-height:920px}}@media (max-height:500px) and (orientation:landscape){.app-container{border-radius:0;height:100dvh;max-height:none}.header{padding:8px 20px 6px}.content-area{padding:0 20px 70px}.clock-display{margin:4px 0 8px;font-size:32px}.action-grid{gap:8px}.btn-action{padding:10px 8px}.stats-row{margin-bottom:8px}.stat-box{padding:8px 4px}.bottom-nav{border-top-left-radius:20px;border-top-right-radius:20px;padding:6px 8px 8px}.fab{border-radius:16px;width:48px;height:48px;font-size:20px}.fab-container{top:-16px}.news-slide img{height:100px}.login-card{padding:24px 28px}.login-card h1{font-size:22px!important}}@media (hover:none) and (pointer:coarse){.btn-action:hover:not(.btn-disabled),.btn-break:hover,.stat-box:hover{transform:none}.option-card:hover{box-shadow:none;transform:none}.fab:hover{transform:none;box-shadow:0 8px 24px #6366f173,0 0 0 4px #ffffffe6}}@supports (padding:env(safe-area-inset-top)){.header{padding-top:max(env(safe-area-inset-top), 16px)}.bottom-nav{padding-bottom:max(env(safe-area-inset-bottom), 14px)}}@media print{body{background:#fff}.app-container{max-width:100%;height:auto;box-shadow:none;border-radius:0}.bottom-nav,.aurora-bg,.fab-container,#login-screen{display:none!important}.content-area{padding-bottom:0;overflow:visible}}.report-header{color:var(--text-dark);margin-bottom:20px;font-size:clamp(20px,5.5vw,24px);font-weight:700}.report-summary-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;display:grid}.report-summary-item{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center;background:#ffffffd1;border:1px solid #ffffffb3;border-radius:18px;padding:16px 12px;box-shadow:0 4px 16px #6366f114}.report-summary-icon{color:#fff;border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;margin:0 auto 8px;font-size:16px;display:flex}.report-summary-val{color:var(--text-dark);font-size:22px;font-weight:800}.report-summary-label{color:var(--text-gray);margin-top:2px;font-size:11px}.chart-wrap{width:100%;max-height:220px;margin:0 auto;position:relative}.chart-wrap canvas{max-height:220px;width:100%!important}.report-filter-row{scrollbar-width:none;gap:6px;margin-bottom:14px;display:flex;overflow-x:auto}.report-filter-row::-webkit-scrollbar{display:none}.report-filter-pill{white-space:nowrap;cursor:pointer;color:var(--text-gray);background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:7px 16px;font-size:12px;font-weight:700;transition:all .25s}.report-filter-pill.active{background:var(--grad-blue);color:#fff;border-color:#0000;box-shadow:0 4px 12px #6366f14d}.doc-list-item{border-bottom:1px solid #f1f5f9;align-items:center;gap:12px;padding:14px 0;display:flex}.doc-list-item:last-child{border-bottom:none}.doc-icon-wrap{color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;display:flex}.doc-info{flex:1;min-width:0}.doc-title{color:var(--text-dark);font-size:14px;font-weight:700}.doc-sub{color:var(--text-gray);margin-top:2px;font-size:11px}.doc-status{white-space:nowrap;border-radius:20px;flex-shrink:0;padding:3px 10px;font-size:10px;font-weight:700}.doc-status.approved{color:#059669;background:#dcfce7}.doc-status.pending{color:#d97706;background:#fef3c7}.doc-status.rejected{color:#dc2626;background:#fee2e2}.doc-status.ready{color:var(--primary-blue);background:#eef2ff}.scan-modal{z-index:500;opacity:0;pointer-events:none;transition:opacity .3s;position:fixed;inset:0}.scan-modal.open{opacity:1;pointer-events:all}.scan-modal-bg{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f0a2899;position:absolute;inset:0}.scan-modal-sheet{background:linear-gradient(175deg,#f0f4ff,#eef2ff 50%,#f5f0ff);border-radius:28px 28px 0 0;max-height:92dvh;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.scan-modal.open .scan-modal-sheet{transform:translateY(0)}.scan-modal-handle{background:#6366f133;border-radius:2px;width:40px;height:4px;margin:12px auto 0}.scan-modal-close{cursor:pointer;width:34px;height:34px;color:var(--text-dark);z-index:10;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 2px 10px #00000014}.scan-mode-tabs{background:#6366f114;border-radius:14px;gap:0;margin:16px 20px 0;padding:3px;display:flex}.scan-mode-tab{color:var(--text-gray);cursor:pointer;background:0 0;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 0;font-family:inherit;font-size:13px;font-weight:700;transition:all .25s;display:flex}.scan-mode-tab.active{color:var(--primary-blue);background:#fff;box-shadow:0 2px 8px #6366f126}.scan-body{padding:16px 20px 24px}.scan-view{animation:.3s fadeIn;display:none}.scan-view.active{display:block}.camera-container{aspect-ratio:1;background:#0f0a28;border-radius:24px;width:100%;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:0 8px 32px #0003}.camera-container video,.camera-container canvas{object-fit:cover;width:100%;height:100%;display:block}.camera-container canvas{display:none}.qr-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.qr-frame{border:3px solid #fffc;border-radius:20px;width:200px;height:200px;position:relative;box-shadow:0 0 0 2000px #00000059}.qr-frame:before,.qr-frame:after{content:"";border-style:solid;border-color:#6366f1;width:30px;height:30px;position:absolute}.qr-frame:before{border-width:4px 0 0 4px;border-radius:10px 0 0;top:-3px;left:-3px}.qr-frame:after{border-width:4px 4px 0 0;border-radius:0 10px 0 0;top:-3px;right:-3px}.qr-corners-bottom{pointer-events:none;height:30px;position:absolute;bottom:-3px;left:-3px;right:-3px}.qr-corners-bottom:before,.qr-corners-bottom:after{content:"";border-style:solid;border-color:#6366f1;width:30px;height:30px;position:absolute}.qr-corners-bottom:before{border-width:0 0 4px 4px;border-radius:0 0 0 10px;bottom:0;left:0}.qr-corners-bottom:after{border-width:0 4px 4px 0;border-radius:0 0 10px;bottom:0;right:0}.qr-scanline{background:linear-gradient(90deg,#0000,#6366f1,#0000);height:2px;animation:2s ease-in-out infinite scanMove;position:absolute;left:10px;right:10px;box-shadow:0 0 12px #6366f199}@keyframes scanMove{0%,to{top:10px}50%{top:calc(100% - 12px)}}.camera-hint{text-align:center;color:var(--text-gray);margin-bottom:14px;font-size:13px}.camera-hint i{color:var(--primary-blue);margin-right:5px}.photo-preview-container{aspect-ratio:4/3;background:#f1f5f9;border-radius:24px;justify-content:center;align-items:center;width:100%;margin-bottom:16px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000001a}.photo-preview-container img{object-fit:cover;width:100%;height:100%}.checkin-info-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd1;border:1px solid #ffffffb3;border-radius:18px;align-items:center;gap:12px;margin-bottom:14px;padding:14px 16px;display:flex;box-shadow:0 4px 16px #6366f114}.checkin-info-icon{color:#fff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;display:flex}.checkin-info-text{color:var(--text-dark);font-size:13px;font-weight:700}.checkin-info-sub{color:var(--text-gray);margin-top:2px;font-size:11px}.btn-capture{color:#fff;cursor:pointer;border:none;border-radius:20px;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px;font-family:inherit;font-size:15px;font-weight:700;transition:all .3s;display:flex}.btn-capture.primary{background:var(--grad-blue);box-shadow:0 10px 25px #6366f159}.btn-capture.success{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 10px 25px #10b98159}.btn-capture.outline{color:var(--text-gray);box-shadow:none;background:#fffc;border:1.5px solid #e2e8f0;margin-top:10px}.btn-capture:active{transform:scale(.97)}#register-screen{z-index:100;scrollbar-width:none;flex-direction:column;display:flex;position:absolute;inset:0;overflow-y:auto}#register-screen::-webkit-scrollbar{display:none}.register-wrap{min-height:100%;padding:max(env(safe-area-inset-top,20px), 40px) 20px 32px;z-index:1;flex-direction:column;display:flex;position:relative}.register-header{text-align:center;margin-bottom:20px}.register-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:3px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 14px;font-size:32px;display:flex;overflow:hidden;box-shadow:0 8px 24px #6366f159}.register-avatar-img{object-fit:cover;width:100%;height:100%}.register-title{color:var(--text-dark);margin-bottom:6px;font-size:22px;font-weight:700}.register-subtitle{color:var(--text-gray);margin-bottom:20px;font-size:13px}.register-steps{justify-content:center;align-items:center;gap:0;margin-top:4px;display:flex}.register-step{color:var(--text-gray);align-items:center;gap:6px;font-size:12px;display:flex}.register-step.active{color:var(--primary-blue);font-weight:700}.step-dot{width:26px;height:26px;color:var(--text-gray);background:#e2e8f0;border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:all .3s;display:flex}.register-step.active .step-dot{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 12px #6366f166}.step-line{background:#e2e8f0;width:40px;height:2px;margin:0 6px}.register-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffd9;border:1px solid #ffffffb3;border-radius:28px;padding:24px 20px;animation:.3s fadeIn;box-shadow:0 12px 40px #6366f11f}.register-line-badge{color:var(--text-dark);background:#06c75514;border:1px solid #06c75540;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;font-size:13px;display:flex}.register-dept-grid{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.register-dept-pill{color:var(--text-gray);cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffffb3;border:1.5px solid #e2e8f0;border-radius:20px;padding:8px 14px;font-size:12px;transition:all .2s}.register-dept-pill:hover{color:var(--primary-blue);border-color:#a5b4fc}.register-dept-pill.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#0000;font-weight:700;box-shadow:0 4px 12px #6366f14d}.register-error{color:var(--danger);background:#f43f5e14;border:1px solid #f43f5e40;border-radius:12px;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;font-size:13px;display:flex}.register-confirm-title{color:var(--text-dark);margin-bottom:16px;font-size:16px;font-weight:700}.register-confirm-list{background:#f8fafc;border-radius:16px;overflow:hidden}.register-confirm-row{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;display:flex}.register-confirm-row:last-child{border-bottom:none}.confirm-label{color:var(--text-gray);white-space:nowrap;font-size:12px}.confirm-value{color:var(--text-dark);text-align:right;font-size:13px;font-weight:700}.register-empid-wrap{background:#f8fafc;border:1px solid #0000;border-radius:16px;align-items:stretch;margin-top:6px;margin-bottom:4px;transition:border-color .3s,background .3s;display:flex;overflow:hidden}.register-empid-wrap:focus-within{border-color:var(--primary-blue);background:#fff}.register-empid-prefix{color:#fff;letter-spacing:1px;white-space:nowrap;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);flex-shrink:0;align-items:center;padding:0 14px;font-family:monospace;font-size:13px;font-weight:700;display:flex}.register-empid-input{letter-spacing:2px;color:var(--text-dark);outline:none;flex:1;padding:16px 14px;font-weight:700;background:0 0!important;border:none!important;border-radius:0!important;margin-bottom:0!important;font-family:monospace!important;font-size:15px!important}