:root{--bg:#eef4fa;--surface:rgba(255,255,255,.86);--surface-solid:#fff;--text:#142239;--muted:#6d7e96;--line:#dce6f1;--nav:#0c1829;--cyan:#06a8d7;--blue:#2563eb;--green:#10a779;--violet:#7656dc;--danger:#d84a61;--shadow:0 18px 50px rgba(31,58,90,.09);--radius:20px}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 5%,rgba(39,191,218,.12),transparent 26%),linear-gradient(135deg,#f5f9fd,#eaf1f8)}button,input,select,textarea{font:inherit;color:inherit}button,a{transition:.2s ease}a{text-decoration:none;color:inherit}.shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;z-index:20;background:linear-gradient(180deg,#0b182a,#101e32);color:#b9c7d9;padding:26px 18px;display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(5,15,30,.12)}.brand{display:flex;align-items:center;gap:12px;color:#fff;padding:0 8px 28px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;font-size:22px;font-weight:900;background:linear-gradient(135deg,#02b5d4,#3158de);box-shadow:0 8px 22px rgba(6,174,211,.3)}.brand strong,.brand small{display:block}.brand strong{font-size:20px;letter-spacing:-.5px}.brand small{color:#7890ab;font-size:10px;text-transform:uppercase;letter-spacing:1.6px}.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav-label{font-size:10px;letter-spacing:1.6px;color:#58708c;padding:20px 13px 6px}.sidebar nav a{padding:12px 14px;border-radius:12px;display:flex;gap:13px;align-items:center;font-weight:650;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,rgba(11,177,211,.25),rgba(43,83,218,.13));color:#fff;transform:translateX(2px)}.sidebar-foot{margin-top:auto;border:1px solid #213451;border-radius:14px;padding:13px;display:flex;align-items:center;gap:10px}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot strong{font-size:12px;color:#d9e5f2}.sidebar-foot small{font-size:9px;color:#7890ab;margin-top:3px}.shield{color:#42d8ad}.workspace{grid-column:2;min-width:0;display:flex;flex-direction:column;min-height:100vh}.topbar{height:76px;border-bottom:1px solid rgba(207,221,236,.8);background:rgba(255,255,255,.68);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:15}.search{width:min(420px,38vw);display:flex;align-items:center;gap:10px;background:#f1f5f9;border:1px solid transparent;border-radius:12px;padding:10px 14px;color:#8292a7}.search:focus-within{border-color:#8ddbea;background:#fff}.search input{border:0;background:transparent;outline:0;width:100%}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:0;background:transparent;border-radius:10px;width:38px;height:38px;cursor:pointer}.icon-btn:hover{background:#e8f0f7}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#00abc9,#294ed1);color:#fff;font-weight:800}.user-meta strong,.user-meta small{display:block}.user-meta strong{font-size:12px}.user-meta small{font-size:10px;color:var(--muted)}.role-pill{font-size:9px;font-weight:800;letter-spacing:.5px;background:#e7f4fa;color:#087e9b;padding:6px 9px;border-radius:99px}.main{padding:34px;flex:1}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.page-head h1{font-size:28px;margin:5px 0 4px;letter-spacing:-.7px}.page-head p,.panel-head p{margin:0;color:var(--muted);font-size:13px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#0b9db8;font-weight:900}.btn{border:1px solid var(--line);background:var(--surface-solid);border-radius:11px;padding:10px 16px;cursor:pointer;font-weight:750;font-size:13px}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,65,101,.1)}.btn.primary{background:linear-gradient(135deg,#05a9c9,#3154d5);border:0;color:#fff;box-shadow:0 9px 20px rgba(28,108,193,.2)}.btn.soft{background:#edf3f8}.btn.wide{width:100%;padding:13px}.btn.tiny{padding:6px 10px;color:#177a91;background:#e8f8fb;border-color:#bdebf1}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}.metric{position:relative;overflow:hidden;background:var(--surface);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.metric:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-45px;top:-45px;background:currentColor;opacity:.09}.metric span{display:block;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:1px}.metric strong{display:block;font-size:30px;margin:12px 0 4px;color:var(--text);letter-spacing:-1px}.metric small{color:var(--muted)}.cyan{color:var(--cyan)}.blue{color:var(--blue)}.green{color:var(--green)}.violet{color:var(--violet)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,.8fr);gap:22px}.panel{background:var(--surface);border:1px solid rgba(255,255,255,.84);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:16px;margin:0 0 4px}.panel-head a{font-size:12px;color:#078eaa;font-weight:700}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;padding:12px 16px;color:#7b8da4;font-size:9px;letter-spacing:.9px;background:rgba(238,244,250,.8)}td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}td strong,td small{display:block}td small{color:var(--muted);margin-top:4px}.status{display:inline-block;border:0;border-radius:99px;padding:5px 8px;font-size:9px;font-weight:900;background:#edf1f5;color:#627288}.status.paid,.status.approved,.status.active{background:#dcf7ec;color:#087a57}.status.pending{background:#fff2d7;color:#9a6410}.status.partial{background:#e5f1ff;color:#2165ab}.status.rejected,.status.cancelled{background:#ffe3e8;color:#b22f46}.action-panel>a{display:flex;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line);gap:12px}.action-panel>a:hover{background:rgba(238,245,251,.7)}.action-panel i,.activity-icon{font-style:normal;width:39px;height:39px;border-radius:11px;background:currentColor;display:grid;place-items:center}.action-panel i{color:#fff}.action-panel i.cyan{background:#e0f7fb;color:#0694ad}.action-panel i.green{background:#dff7ed;color:#078d65}.action-panel i.violet{background:#ede8ff;color:#6b4fd0}.action-panel span{flex:1}.action-panel strong,.action-panel small{display:block}.action-panel strong{font-size:12px}.action-panel small{color:var(--muted);font-size:10px;margin-top:4px}.filterbar{display:flex;gap:10px;margin-bottom:18px}.filterbar select,.search-field{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px}.search-field{display:flex;gap:8px;min-width:280px}.search-field input{border:0;outline:0;width:100%;background:transparent}select,input,textarea{border:1px solid var(--line);border-radius:10px;background:#f8fbfd;padding:10px 12px;outline:0;width:100%}select:focus,input:focus,textarea:focus{border-color:#56bfd4;box-shadow:0 0 0 3px rgba(41,172,200,.1)}dialog{border:0;border-radius:20px;padding:0;width:min(650px,calc(100vw - 30px));box-shadow:0 30px 90px rgba(4,20,42,.32);background:var(--surface-solid);color:var(--text)}dialog::backdrop{background:rgba(8,19,35,.62);backdrop-filter:blur(6px)}dialog form{padding:24px}.modal-head{display:flex;justify-content:space-between;margin-bottom:22px}.modal-head h2{margin:0 0 5px}.modal-head p{margin:0;color:var(--muted);font-size:12px}.modal-head button{font-size:25px;background:transparent;border:0;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,.login-form label,.scanner-card label{font-size:11px;font-weight:800;display:grid;gap:7px}.span-2{grid-column:span 2}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.toast,.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:12px;font-weight:700}.toast.success{background:#ddf7ec;color:#067450}.toast.error,.alert.error{background:#ffe4e9;color:#a7263d}.notice{padding:14px 18px;background:#e4f6fb;border:1px solid #bceaf4;border-radius:14px;margin-bottom:18px;display:flex;gap:14px;color:#13768c;font-size:12px}.notice span{color:#527787}.header-kpi{text-align:right}.header-kpi small,.header-kpi strong{display:block}.header-kpi small{color:var(--muted);font-size:9px;letter-spacing:1px}.header-kpi strong{font-size:24px;color:var(--green)}.attendance-grid{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);gap:22px}.scanner-card{background:linear-gradient(160deg,#101f35,#0a1729);border-radius:24px;padding:28px;color:#fff;box-shadow:var(--shadow);text-align:center}.scanner-card>p{color:#90a5be;font-size:12px}.scanner-card form{text-align:left}.scanner-card input,.scanner-card select{background:#152942;border-color:#29405d;color:#fff}.scan-visual{width:150px;height:150px;margin:0 auto 18px;display:grid;place-items:center;position:relative;background:rgba(12,173,203,.08)}.scan-visual span{font-size:48px;color:#34d3e6}.scan-visual i{position:absolute;width:85%;height:2px;background:#34d3e6;box-shadow:0 0 12px #34d3e6;animation:scan 2.3s infinite alternate}.scan-corners{position:absolute;inset:0;border:3px solid #1cb7d2;clip-path:polygon(0 0,28% 0,28% 3%,3% 3%,3% 28%,0 28%,0 0,100% 0,100% 28%,97% 28%,97% 3%,72% 3%,72% 0,100% 0,100% 100%,72% 100%,72% 97%,97% 97%,97% 72%,100% 72%,100% 100%,0 100%,0 72%,3% 72%,3% 97%,28% 97%,28% 100%)}@keyframes scan{from{transform:translateY(-45px)}to{transform:translateY(45px)}}.segmented{display:flex;margin:14px 0}.segmented label{flex:1}.segmented input{display:none}.segmented span{padding:9px;text-align:center;border:1px solid #29405d;color:#91a6bf}.segmented input:checked+span{background:#0d99b8;color:#fff}.activity-list article{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}.activity-list article>div:nth-child(2){flex:1}.activity-list strong,.activity-list small{display:block}.activity-list small{font-size:10px;color:var(--muted);margin-top:3px}.activity-list article>span{text-align:right}.security-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.security-strip article{display:flex;gap:12px;align-items:center;background:var(--surface);padding:16px;border-radius:15px;border:1px solid #fff}.security-strip article>span{font-size:22px;color:#09a2be}.security-strip strong,.security-strip small{display:block}.security-strip strong{font-size:12px}.security-strip small{color:var(--muted);font-size:10px;margin-top:3px}.live-pill{background:#dcf7ec;color:#067856;border-radius:99px;padding:7px 11px;font-size:10px;font-weight:800}.live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0cba7e;margin-right:5px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.event-card{background:var(--surface);border:1px solid #fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.event-banner{height:110px;padding:16px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(135deg,#0aa5c3,#3055d3);color:#fff}.event-banner>span{font-size:10px;font-weight:800;letter-spacing:1px}.event-card>div:last-child{padding:19px}.event-card h2{font-size:16px;margin:0 0 8px}.event-card p{color:var(--muted);font-size:12px;min-height:46px}.event-card footer{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;border-top:1px solid var(--line);padding-top:13px}.empty-state{text-align:center;padding:15vh 20px}.empty-state>strong{font-size:76px;color:#bdd0df}.login-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:linear-gradient(140deg,#071525,#102a46);position:relative;overflow:hidden}.login-orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-a{width:500px;height:500px;background:rgba(6,190,215,.18);top:-280px;right:-100px}.orb-b{width:420px;height:420px;background:rgba(66,80,222,.16);bottom:-250px;left:-120px}.login-card{width:min(460px,100%);background:rgba(255,255,255,.96);border-radius:27px;padding:38px;box-shadow:0 35px 100px rgba(0,0,0,.35);z-index:1}.login-logo{display:flex;align-items:center;gap:11px}.login-logo strong,.login-logo small{display:block}.login-logo small{font-size:9px;color:var(--muted);letter-spacing:1px}.login-copy{margin:34px 0 24px}.login-copy h1{font-size:30px;line-height:1.1;letter-spacing:-1px;margin:8px 0 12px}.login-copy p{font-size:13px;color:var(--muted);line-height:1.6}.login-form{display:grid;gap:16px}.trust-row{display:flex;justify-content:center;gap:13px;margin-top:24px;color:#7c8da2;font-size:8px}body>footer,.workspace>footer{font-size:9px;color:#8091a7;padding:12px 34px;border-top:1px solid var(--line)}.mobile-only{display:none}[data-theme=dark]{--bg:#081320;--surface:rgba(16,31,49,.92);--surface-solid:#122238;--text:#e8f2fc;--muted:#89a0b8;--line:#243a51;--shadow:0 18px 50px rgba(0,0,0,.22)}[data-theme=dark] body{background:radial-gradient(circle at 85% 5%,rgba(15,154,185,.12),transparent 26%),#081320}[data-theme=dark] .topbar{background:rgba(9,22,37,.8)}[data-theme=dark] .search,[data-theme=dark] .btn.soft{background:#13263b}[data-theme=dark] th{background:#13263b}[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:#102238}@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.card-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.shell{display:block}.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.open{transform:none}.workspace{display:flex}.mobile-only{display:inline-grid;place-items:center}.topbar{padding:0 15px}.search{display:none}.user-meta,.top-actions>.role-pill{display:none}.main{padding:22px 15px}.dashboard-grid,.attendance-grid{grid-template-columns:1fr}.page-head{align-items:flex-start}.security-strip{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}}@media(max-width:520px){.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:16px}.metric strong{font-size:22px}.page-head{display:grid}.filterbar{display:grid}.search-field{min-width:0}.trust-row{flex-direction:column;align-items:center}.login-card{padding:28px 22px}}