@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap");:root{--bg-primary:#eef2f7;--bg-secondary:#dfe7ef;--bg-gradient-1:#d8ece8;--bg-gradient-2:#dde5f7;--bg-gradient-3:#f3e4df;--bg-gradient-4:#e5edf1;--glass-bg:rgba(255,255,255,0.25);--glass-bg-hover:rgba(255,255,255,0.35);--glass-border:rgba(255,255,255,0.4);--glass-shadow:rgba(140,120,180,0.15);--glass-blur:20px;--text-primary:#2d2540;--text-secondary:#4a3f5e;--text-tertiary:#6b5f82;--text-muted:#8a7fa0;--accent-primary:#6d5bd0;--accent-secondary:#14b8a6;--accent-tertiary:#f97316;--accent-success:#5dba7d;--accent-warning:#d4a24e;--accent-danger:#c75c6e;--input-bg:rgba(255,255,255,0.3);--input-border:rgba(180,160,210,0.4);--input-focus:rgba(124,92,191,0.5);--table-header-bg:rgba(124,92,191,0.12);--table-row-hover:rgba(124,92,191,0.06);--table-border:rgba(160,140,200,0.2);--scrollbar-track:rgba(200,190,220,0.3);--scrollbar-thumb:rgba(124,92,191,0.3);--ambient-a:rgba(109,91,208,0.18);--ambient-b:rgba(20,184,166,0.18);--ambient-c:rgba(249,115,22,0.12)}[data-theme=dark]{--bg-primary:#090b12;--bg-secondary:#10151f;--bg-gradient-1:#15162b;--bg-gradient-2:#0d2430;--bg-gradient-3:#241711;--bg-gradient-4:#101725;--glass-bg:rgba(255,255,255,0.06);--glass-bg-hover:rgba(255,255,255,0.1);--glass-border:rgba(255,255,255,0.1);--glass-shadow:rgba(0,0,0,0.3);--glass-blur:24px;--text-primary:#e8e0f4;--text-secondary:#c0b4d8;--text-tertiary:#9a8cb8;--text-muted:#6a5e80;--accent-primary:#9b8cff;--accent-secondary:#2dd4bf;--accent-tertiary:#fb923c;--accent-success:#5dca80;--accent-warning:#e0b050;--accent-danger:#e06878;--input-bg:rgba(255,255,255,0.05);--input-border:rgba(155,125,232,0.2);--input-focus:rgba(155,125,232,0.4);--table-header-bg:rgba(155,125,232,0.1);--table-row-hover:rgba(155,125,232,0.05);--table-border:rgba(100,80,160,0.2);--scrollbar-track:rgba(30,20,50,0.5);--scrollbar-thumb:rgba(155,125,232,0.3);--ambient-a:rgba(155,140,255,0.2);--ambient-b:rgba(45,212,191,0.14);--ambient-c:rgba(251,146,60,0.12)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background .6s ease,color .4s ease;line-height:1.6}.galaxy-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-gradient-1) 25%,var(--bg-gradient-2) 50%,var(--bg-gradient-3) 75%,var(--bg-gradient-4) 100%);transition:background .6s ease}.galaxy-bg:before{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 0 18%,var(--ambient-a) 32%,transparent 48% 100%),linear-gradient(235deg,transparent 0 20%,var(--ambient-b) 38%,transparent 56% 100%),conic-gradient(from 140deg at 50% 50%,transparent,var(--ambient-c),transparent,var(--ambient-a),transparent);filter:blur(18px);opacity:.9;animation:galaxyDrift 22s ease-in-out infinite alternate;will-change:transform}@keyframes galaxyDrift{0%{transform:translateZ(0) rotate(0deg) scale(1)}50%{transform:translate3d(2%,-1%,0) rotate(4deg) scale(1.03)}to{transform:translate3d(-1%,2%,0) rotate(-3deg) scale(1.01)}}[data-theme=dark] .galaxy-bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.4) 0,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.3) 0,transparent 100%),radial-gradient(1.5px 1.5px at 50% 30%,rgba(255,255,255,.5) 0,transparent 100%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.3) 0,transparent 100%),radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,.4) 0,transparent 100%),radial-gradient(1.5px 1.5px at 15% 85%,rgba(255,255,255,.35) 0,transparent 100%),radial-gradient(1px 1px at 55% 90%,rgba(255,255,255,.25) 0,transparent 100%),radial-gradient(1px 1px at 85% 10%,rgba(255,255,255,.3) 0,transparent 100%);animation:twinkle 8s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.7}}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:8px;box-shadow:0 8px 32px var(--glass-shadow);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}.glass:hover{background:var(--glass-bg-hover);box-shadow:0 12px 40px var(--glass-shadow);transform:translateY(-1px)}.glass-card{padding:2rem}.glass-card-sm{padding:1.25rem}.app-container{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1 1;max-width:1200px;width:100%;margin:0 auto;padding:2rem 1.5rem}.navbar{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:var(--glass-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid var(--glass-border);padding:.8rem 1.5rem;transition:background .3s ease,border-color .3s ease}.navbar-inner{max-width:1200px;margin:0 auto;justify-content:space-between;gap:1rem}.navbar-brand,.navbar-inner{display:flex;align-items:center}.navbar-brand{gap:.6rem;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:1.2rem;font-family:Outfit,sans-serif;letter-spacing:0}.navbar-brand-icon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 2px 12px rgba(124,92,191,.3);animation:iconPulse 4s ease-in-out infinite}.btn svg,.nav-link svg,.navbar-brand-icon svg,.page-title svg,.section-title svg,.theme-toggle svg{width:1.05em;height:1.05em;flex:0 0 auto}@keyframes iconPulse{0%,to{transform:translateY(0);box-shadow:0 2px 12px rgba(124,92,191,.25)}50%{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,184,166,.22)}}.navbar-nav{display:flex;align-items:center;gap:.5rem}.nav-link{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--text-secondary);padding:.5rem 1rem;border-radius:8px;font-size:.9rem;font-weight:500;transition:color .2s ease,background .2s ease,transform .2s ease;position:relative}.nav-link:hover{color:var(--text-primary);background:var(--glass-bg);transform:translateY(-1px)}.nav-link.active{color:var(--accent-primary);background:rgba(124,92,191,.08)}.theme-toggle{width:44px;height:44px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .3s ease,background .3s ease,transform .3s ease}.theme-toggle:hover{background:var(--glass-bg-hover);color:var(--accent-primary);transform:rotate(15deg)}.page-header{margin-bottom:2rem}.page-title{display:inline-flex;align-items:center;gap:.65rem;font-family:Outfit,sans-serif;font-size:2rem;font-weight:700;letter-spacing:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.page-title svg{color:var(--accent-secondary);-webkit-text-fill-color:initial}.section-title{display:flex;align-items:center;gap:.55rem;font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--text-secondary)}.heading-icon{color:var(--accent-secondary)}.page-subtitle{color:var(--text-tertiary);font-size:.95rem;font-weight:400}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem;letter-spacing:.02em}.form-input,.form-select{width:100%;padding:.75rem 1rem;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text-primary);font-family:Inter,sans-serif;font-size:.95rem;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.form-input::placeholder{color:var(--text-muted)}.form-input:focus,.form-select:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(124,92,191,.1);background:var(--glass-bg-hover)}.form-select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239a8cb8' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:2.5rem}.form-select option{background:var(--bg-secondary);color:var(--text-primary)}.form-input-sm,.form-select-sm{padding:.5rem .75rem;font-size:.85rem;border-radius:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border:none;border-radius:8px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:box-shadow .25s ease,transform .25s ease,background .25s ease,opacity .25s ease;text-decoration:none;white-space:nowrap}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:white;box-shadow:0 4px 16px rgba(124,92,191,.3);position:relative;overflow:hidden}.btn-primary:hover{box-shadow:0 6px 24px rgba(124,92,191,.4);transform:translateY(-1px)}.btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.24) 48%,transparent 62% 100%);transform:translateX(-120%);transition:transform .6s ease}.btn-primary:hover:after{transform:translateX(120%)}.btn>*{position:relative;z-index:1}.btn-ghost{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-ghost:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.btn-danger{background:linear-gradient(135deg,var(--accent-danger),#d4607a);color:white;box-shadow:0 4px 16px rgba(199,92,110,.25)}.btn-sm{padding:.45rem .9rem;font-size:.8rem;border-radius:8px}.btn-lg{padding:.9rem 2rem;font-size:1rem}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.table-container{overflow-x:auto;border-radius:8px;border:1px solid var(--table-border)}.data-table{width:100%;border-collapse:collapse;font-size:.88rem}.data-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:5}.data-table th{background:var(--table-header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75rem 1rem;text-align:left;font-weight:600;color:var(--text-secondary);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.data-table td,.data-table th{border-bottom:1px solid var(--table-border)}.data-table td{padding:.65rem 1rem;color:var(--text-primary);transition:background .15s ease}.data-table tbody tr:hover td{background:var(--table-row-hover)}.data-table tbody tr{animation:rowIn .35s ease both}@keyframes rowIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.data-table tbody tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em}.badge-hadir{background:rgba(93,186,125,.12);color:var(--accent-success);border:1px solid rgba(93,186,125,.2)}.badge-tidak-hadir{background:rgba(199,92,110,.12);color:var(--accent-danger);border:1px solid rgba(199,92,110,.2)}.badge-libur{background:rgba(212,162,78,.12);color:var(--accent-warning);border:1px solid rgba(212,162,78,.2)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.stat-card{text-align:center;padding:1.25rem;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 42%,rgba(20,184,166,.08));opacity:0;transition:opacity .25s ease}.stat-card:hover:before{opacity:1}.stat-value{font-family:Outfit,sans-serif;font-size:2rem;font-weight:700;letter-spacing:0;position:relative}.stat-value.hadir{color:var(--accent-success)}.stat-value.tidak-hadir{color:var(--accent-danger)}.stat-value.libur{color:var(--accent-warning)}.stat-value.total{color:var(--accent-primary)}.stat-label{color:var(--text-tertiary);font-size:.8rem;font-weight:500;margin-top:.25rem;text-transform:uppercase;letter-spacing:.04em}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.login-card{width:100%;max-width:420px;text-align:center;animation:cardIn .5s ease both}.login-icon{width:72px;height:72px;border-radius:8px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;color:white;margin:0 auto 1.5rem;box-shadow:0 8px 30px rgba(124,92,191,.35);animation:float 4s ease-in-out infinite}.login-icon svg{width:34px;height:34px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.login-title{font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:.4rem;color:var(--text-primary)}.login-subtitle{color:var(--text-tertiary);font-size:.9rem;margin-bottom:2rem}.login-error{background:rgba(199,92,110,.1);border:1px solid rgba(199,92,110,.2);color:var(--accent-danger);padding:.6rem 1rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem;animation:shake .4s ease}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.filter-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.filter-bar .form-select{width:auto;min-width:140px}.spinner{width:24px;height:24px;border:3px solid var(--glass-border);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;color:var(--text-tertiary)}.toast{position:fixed;bottom:2rem;right:2rem;display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.5rem;border-radius:8px;font-size:.88rem;font-weight:500;z-index:1000;animation:slideUp .3s ease,fadeOut .3s ease 2.7s;animation-fill-mode:forwards}.toast svg{width:18px;height:18px}.toast-success{background:rgba(93,186,125,.15);border:1px solid rgba(93,186,125,.3);color:var(--accent-success)}.toast-error,.toast-success{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.toast-error{background:rgba(199,92,110,.15);border:1px solid rgba(199,92,110,.3);color:var(--accent-danger)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}.add-form{display:flex;gap:.75rem;align-items:flex-end}.add-form .form-group{flex:1 1;margin-bottom:0}.attendance-grid{max-height:70vh;overflow:auto}.attendance-grid .data-table td,.attendance-grid .data-table th{padding:.45rem .5rem;font-size:.78rem;min-width:44px;text-align:center}.attendance-grid .data-table td:first-child,.attendance-grid .data-table th:first-child{text-align:left;position:-webkit-sticky;position:sticky;left:0;z-index:3;background:var(--table-header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:140px}.attendance-grid .data-table td:first-child{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500}.attendance-grid .form-select-sm{min-width:36px;font-size:.7rem;text-align:center;background-image:none;padding:.3rem .2rem}.cell-hadir{background:rgba(93,186,125,.08)!important}.cell-tidak-hadir{background:rgba(199,92,110,.08)!important}.cell-libur{background:rgba(212,162,78,.08)!important}.empty-state{text-align:center;padding:3rem 2rem;color:var(--text-tertiary)}.empty-state-icon{width:64px;height:64px;margin-bottom:1rem;opacity:.5;color:var(--accent-secondary);display:inline-flex;align-items:center;justify-content:center}.empty-state-icon svg{width:54px;height:54px}.empty-state-title{font-size:1.1rem;font-weight:600;margin-bottom:.4rem;color:var(--text-secondary)}.section-divider{height:1px;background:var(--table-border);margin:1.5rem 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}@media (max-width:768px){.main-content{padding:1rem}.page-title{font-size:1.5rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.navbar-inner{flex-wrap:wrap}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar .form-select{width:100%}.add-form{flex-direction:column}.glass-card{padding:1.25rem}}@media (max-width:480px){.stats-grid{grid-template-columns:1fr 1fr;gap:.6rem}.stat-card{padding:.9rem}.stat-value{font-size:1.5rem}}.token-input-wrapper{display:flex;flex-direction:column;gap:1rem}.input-token-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--table-border)}.btn-icon{width:32px;height:32px;padding:0;border-radius:8px}.btn-icon svg{width:16px;height:16px}.fade-in{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}