:root{--gold-main: #d4af37;--gold-strong: #c9a24d;--gold-soft: rgba(212, 175, 55, .25);--black-main: #0b0b0b;--black-soft: #1a1a1a;--white: #ffffff;--text-xs: .75rem;--text-sm: .85rem;--text-md: 1rem;--text-lg: 1.2rem;--text-xl: 1.6rem;font-family:Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--white);background-color:var(--black-main);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--black-main);-webkit-tap-highlight-color:transparent;overflow-x:hidden}a{color:var(--gold-main);text-decoration:none}button,input{font-family:inherit}button:disabled{opacity:.6;cursor:not-allowed}button{border:none;background:transparent;color:inherit}#app{min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh;background:var(--black-main)}.primary{background:var(--gold-main);color:var(--black-main);border:none;padding:.65rem 1.2rem;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px #d4af3740;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.primary.full{width:100%}.ghost{background:transparent;border:1px solid var(--black-main);color:var(--black-main);padding:.6rem 1.1rem;border-radius:999px;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.ghost--dark{border-color:#d4af3799;color:var(--black-main);background:var(--gold-main)}.icon-button{background:var(--gold-main);color:var(--black-main);border:none;padding:.5rem .8rem;border-radius:10px;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.primary:hover,.ghost:hover,.icon-button:hover{transform:translateY(-1px);box-shadow:0 10px 18px #00000040}.primary:active,.ghost:active,.icon-button:active{transform:translateY(0);box-shadow:0 6px 12px #0003}button:focus-visible{outline:2px solid rgba(212,175,55,.45);outline-offset:2px}.badge{background:var(--gold-soft);color:var(--gold-main);padding:.3rem .8rem;border-radius:999px;font-size:.75rem;font-weight:700}.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--gold-strong);font-weight:700}.login-status,.data-status{min-height:1.25rem;font-size:.85rem;font-weight:600;color:#ffffffb3}.login-status.info{color:var(--gold-strong)}.login-status.success{color:var(--gold-main)}.login-status.error{color:#ff6b6b}.data-status{margin-bottom:1rem}body{background:var(--black-main)}.topbar{background:linear-gradient(120deg,var(--gold-main),var(--gold-strong));color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 3rem;box-shadow:0 12px 30px #00000059;padding-top:calc(1.2rem + env(safe-area-inset-top))}.app:not(.is-authenticated) .topbar{display:none}.brand{display:flex;flex-direction:column;gap:.2rem}.brand__mark{font-size:1.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}.brand__tag{font-size:.9rem;color:var(--black-main);font-weight:600}.topbar__actions{display:flex;gap:.75rem}.content-stack{display:flex;flex-direction:column;gap:3rem}.app.is-authenticated .content-stack{gap:0}.shell{display:grid;grid-template-columns:260px 1fr;min-height:80vh;background:var(--black-main)}.menu-backdrop{display:none}.app:not(.is-authenticated) .shell{display:none}.sidebar{background:var(--black-main);border-right:1px solid rgba(212,175,55,.2);padding:2.2rem 1.5rem;display:flex;flex-direction:column;gap:2rem}.sidebar__brand .brand__mark{color:var(--gold-main)}.sidebar__brand .brand__tag{color:#fff9}.menu{display:flex;flex-direction:column;gap:.6rem}.menu__item{background:transparent;border:1px solid transparent;color:var(--white);padding:.7rem 1rem;border-radius:12px;text-align:left;font-weight:600;cursor:pointer}.menu__item.active{background:var(--gold-main);color:var(--black-main);border-color:var(--gold-strong)}.sidebar__footer{margin-top:auto;color:#fff9;font-size:.85rem}.shell__main{display:flex;flex-direction:column;background:var(--black-soft)}.views{display:flex;flex-direction:column}.appbar{background:linear-gradient(120deg,var(--gold-main),var(--gold-strong));color:var(--white);padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between}.appbar__title{font-size:1.3rem;font-weight:700}.appbar__actions{display:flex;gap:.5rem}.menu-toggle{display:none}.login-section{padding:2rem 1rem 2.5rem;background:linear-gradient(180deg,var(--black-main) 0%,var(--black-soft) 100%);display:flex;justify-content:center}.login-stack{width:min(520px,92%);display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}.app.is-authenticated .login-section{display:none}.login-card{background:#131313;border:1px solid rgba(212,175,55,.18);border-radius:18px;padding:1.6rem;box-shadow:0 10px 24px #00000059;transition:border-color .16s ease,box-shadow .16s ease}.login-card.is-error{animation:shake .3s ease-in-out;border-color:#d4af3780}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}to{transform:translate(0)}}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.restricted-card{display:none;background:var(--black-soft);border:1px solid rgba(212,175,55,.45);border-radius:24px;padding:2.4rem;box-shadow:0 20px 50px #0006}.app.is-restricted .restricted-card{display:block}.app.is-restricted .login-card,.app.is-restricted .register-card{display:none}.register-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000000bf;z-index:20}.app.is-register-open .register-modal{display:flex}.register-modal__content{width:min(520px,92%);background:#131313;border:1px solid rgba(212,175,55,.25);border-radius:18px;padding:1.8rem;box-shadow:0 18px 50px #00000080}.upper{text-transform:uppercase}.login-header h1{margin:.3rem 0;font-size:var(--text-xl);color:var(--gold-main)}.login-header h2{margin:.3rem 0;font-size:var(--text-lg);color:var(--gold-main)}.login-header p{margin:0;color:#ffffffbf}.login-form{margin-top:1rem;display:grid;gap:.75rem}.login-header p{font-size:var(--text-sm)}.field{display:grid;gap:.5rem;font-size:var(--text-md);color:var(--white)}.field input{background:var(--black-main);border:1px solid var(--gold-soft);padding:.85rem 1rem;border-radius:14px;color:var(--white);height:44px}.field input:focus{border-color:var(--gold-main);outline:2px solid rgba(212,175,55,.25)}.login-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}.view{display:none;padding:2.4rem}.view.is-active{display:block}.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}.view-header h2{margin:0;color:var(--gold-main)}.view-header p{margin:.2rem 0 0;color:#fff9}.form-card{background:var(--black-main);border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;margin-bottom:1.6rem;transition:border-color .16s ease,box-shadow .16s ease}.form-card h3{margin:0;color:var(--gold-main)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.form-grid label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:#fffc}.form-grid input,.form-grid select,.form-grid textarea{background:var(--black-soft);border:1px solid rgba(212,175,55,.25);border-radius:12px;padding:.7rem .9rem;color:var(--white);min-height:44px}.form-grid textarea{resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--gold-main);outline:2px solid rgba(212,175,55,.2)}.form-grid select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-main) 50%),linear-gradient(135deg,var(--gold-main) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 4px),calc(100% - 13px) calc(50% - 4px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.attendance-checklist{margin-top:1.2rem;background:var(--black-main);border:1px solid rgba(212,175,55,.2);border-radius:16px;padding:1rem 1.2rem}.attendance-checklist h4{margin:0 0 .8rem;color:var(--gold-main)}.attendance-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem 1rem}.attendance-item{display:flex;align-items:center;gap:.6rem;color:#ffffffd9;font-size:.9rem}.attendance-item input{accent-color:var(--gold-main)}.csv-upload{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1rem}.table-action{background:transparent;color:var(--gold-main);border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:.25rem .7rem;cursor:pointer;font-size:.75rem;font-weight:600}.table-action.is-confirm{background:#d4af3733;border-color:#d4af37a6;color:var(--gold-main)}button.is-loading{position:relative;padding-right:2.2rem;opacity:.85}button.is-loading:after{content:"";position:absolute;top:50%;right:.9rem;width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.35);border-top-color:var(--black-main);transform:translateY(-50%);animation:spin .8s linear infinite}.dashboard{display:flex;flex-direction:column;gap:2rem;color:var(--white)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem}.kpi-card{background:var(--black-main);border:1px solid var(--gold-soft);border-radius:18px;padding:1.6rem;box-shadow:0 10px 25px #00000059;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.kpi-label{color:#ffffffb3;font-size:.85rem}.kpi-value{display:block;font-size:2rem;color:var(--gold-main);margin:.5rem 0 .2rem}.skeleton-text{display:inline-block;color:transparent;background:linear-gradient(90deg,#ffffff14,#d4af3733,#ffffff14);background-size:200% 100%;border-radius:999px;animation:shimmer 1.2s ease-in-out infinite}.kpi-value.skeleton-text{min-width:80px;height:1.6rem}.kpi-detail.skeleton-text{min-width:120px;height:.85rem}.kpi-detail{color:#fff9;font-size:.8rem}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}.panel{background:var(--black-main);border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:1.8rem;display:flex;flex-direction:column;gap:1rem;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.panel h2{margin:0;color:var(--gold-main)}.panel.highlight{background:linear-gradient(160deg,#d4af3733,#000000e6);border:1px solid var(--gold-main)}.panel__stats{display:flex;gap:1.5rem}.stat-label{color:#fff9;font-size:.85rem}.stat-value{color:var(--gold-main);font-size:1.1rem;font-weight:700}.indicator-list{margin:0;padding-left:1.2rem;color:#fffc}.data-section{display:flex;flex-direction:column;gap:1rem;background:var(--black-main);border:1px solid rgba(212,175,55,.2);border-radius:20px;padding:1.8rem}.data-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.data-header h2{margin:0;color:var(--gold-main)}.data-header p{margin:0;color:#fff9}.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}.data-card{background:var(--black-soft);border:1px solid rgba(212,175,55,.2);border-radius:18px;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.login-card:hover,.form-card:hover,.kpi-card:hover,.panel:hover,.data-card:hover{border-color:#d4af3773;box-shadow:0 14px 30px #00000059}.data-card h3{margin:0;color:var(--gold-main)}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}.report-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.6rem}.report-filters label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:#fffc}.report-filters select{background:var(--black-soft);border:1px solid rgba(212,175,55,.25);border-radius:12px;padding:.7rem .9rem;color:var(--white)}.data-card{overflow-x:auto}.report-actions{display:flex;align-items:flex-end;gap:.8rem}.report-chart{margin-top:1.6rem;background:var(--black-main);border:1px solid rgba(212,175,55,.2);border-radius:20px;padding:1.6rem}.report-chart.is-loading{position:relative;min-height:260px;overflow:hidden}.report-chart.is-loading:after{content:"";position:absolute;inset:1rem;border-radius:16px;background:linear-gradient(90deg,#ffffff0f,#d4af372e,#ffffff0f);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite}.update-banner{display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.6rem;background:#131313;border-bottom:1px solid rgba(212,175,55,.3);color:var(--white)}.update-banner.is-visible{display:flex}.install-banner{display:none;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.6rem;background:#0f0f0f;border-bottom:1px solid rgba(212,175,55,.25);color:var(--white)}.install-banner.is-visible{display:flex}.install-actions{display:flex;gap:.6rem;align-items:center}.report-card{background:var(--black-main);border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:1.5rem;color:#fffc}.report-card h3{margin:0 0 .8rem;color:var(--gold-main)}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);table-layout:fixed}.data-table thead th{text-align:left;padding:.5rem;color:var(--black-main);background:var(--gold-main);word-break:break-word;white-space:normal}.data-table tbody td{padding:.5rem;border-bottom:1px solid rgba(212,175,55,.2);color:#fffc;word-break:break-word;white-space:normal}.data-table tbody tr:hover td{background:#d4af370f}.data-table tbody tr:last-child td{border-bottom:none}.data-card.is-loading{border-color:#d4af3759}.skeleton-row td{padding:.6rem}.skeleton-line{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,#ffffff14,#d4af3733,#ffffff14);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite}.skeleton-row td:nth-child(odd) .skeleton-line{width:70%}.skeleton-row td:nth-child(2n) .skeleton-line{width:90%}@keyframes shimmer{0%{background-position:0% 0}to{background-position:200% 0}}.empty-row{text-align:center;padding:1rem .5rem;color:#fff9}@media(max-width:960px){.topbar{flex-direction:column;align-items:flex-start;gap:1rem}.shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:min(78vw,260px);height:100dvh;max-height:100dvh;overflow-y:auto;padding:1.4rem 1.2rem;transform:translate(-110%);transition:transform .18s ease;z-index:20}.menu{flex-direction:column;flex-wrap:nowrap}.data-header{flex-direction:column;align-items:flex-start}.update-banner,.install-banner{align-items:flex-start}.install-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.appbar{flex-wrap:wrap;gap:.6rem;padding:1rem 1.2rem}.appbar__title{font-size:1.05rem;max-width:100%;line-height:1.2}.appbar__actions{width:100%;justify-content:flex-end;gap:.4rem}.appbar__actions .ghost{padding:.45rem .8rem}.menu-toggle{display:inline-flex}.menu-backdrop{display:none;position:fixed;inset:0;background:#0000008c;z-index:15}.app.is-menu-open .menu-backdrop{display:block}.app.is-menu-open .sidebar{transform:translate(0)}.view{padding:1.6rem}.data-table thead th,.data-table tbody td{padding:.4rem}.data-table{font-size:.8rem}}