:root{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:#10243a;background:#f3f7fb;font-synthesis:none;text-rendering:optimizeLegibility;--red:#0866a5;--red2:#0f7dca;--primary:#0866a5;--primary-dark:#07568b;--primary-light:#e7f3fc;--dark:#142638;--muted:#718096;--line:#e2e8f0;--card:#fff;--green:#20a66a;--green-bg:#e5f8ef;--amber:#d58b1d;--amber-bg:#fff4dc;--danger:#e34e5b;--danger-bg:#fdebed;--blue:#1577c5}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:#f3f7fb}body{min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.85rem}.mono{font-variant-numeric:tabular-nums}.nowrap{white-space:nowrap}.grow{flex:1}.row{display:flex;gap:.75rem;align-items:center}.row.wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:1rem}.center{text-align:center}.ui-icon{width:22px;height:22px;display:inline-grid;place-items:center;flex:none}.ui-icon svg{width:100%;height:100%;display:block;fill:currentColor}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 0,#fff 0,#edf6fd 38%,#eaf1f7)}.login-card{width:min(440px,100%);background:#fff;border:1px solid rgba(8,102,165,.12);border-radius:26px;padding:30px;box-shadow:0 22px 55px #1f4b6e1f}.login-brand{display:flex;gap:15px;align-items:center;margin-bottom:26px}.login-logo{width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#075a93,#0f80cf);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.05rem;box-shadow:0 10px 24px #0866a538}.login-brand h1{font-size:1.25rem;margin:0}.login-brand p{margin:5px 0 0;color:var(--muted);font-size:.9rem}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:.88rem;font-weight:700;color:#33485d}.field input,.field select,.field textarea{width:100%;border:1px solid #d9e2ea;border-radius:13px;padding:12px 13px;background:#fff;outline:none;transition:.15s;color:#142638}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0866a517}.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:750;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff}.btn-primary:hover{filter:brightness(.96)}.btn-secondary{background:#edf5fb;color:#155b8e}.btn-danger{background:#fcecef;color:#a92b39}.btn-success{background:#e4f4ec;color:#0e6840}.btn-outline{background:#fff;border:1px solid var(--line);color:#33485d}.btn-block{width:100%}.btn-lg{padding:14px 18px;font-size:1rem}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{background:#142a3e;color:#fff;min-height:100vh;position:sticky;top:0;height:100vh;padding:18px 14px;display:flex;flex-direction:column}.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}.brand-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#075a93,#0f80cf);display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:.04em}.brand h1{font-size:1.1rem;margin:0}.brand p{margin:3px 0 0;color:#abc0d1;font-size:.88rem}.sidebar .brand{margin:0 6px 20px}.sidebar .brand-mark{width:44px;height:44px;border-radius:13px}.nav{display:flex;flex-direction:column;gap:4px;overflow:auto}.nav button{border:0;background:transparent;color:#c7d6e1;text-align:left;padding:10px 12px;border-radius:10px}.nav button:hover,.nav button.active{background:#1d405e;color:#fff}.sidebar-footer{margin-top:auto;padding-top:12px;border-top:1px solid #294a65}.profile-mini{display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;background:#e8f0f6;display:grid;place-items:center;color:#32526e;font-weight:800;flex:none}.sidebar .avatar{background:#244b69;color:#fff}.profile-mini strong{display:block;font-size:.9rem}.profile-mini span{display:block;font-size:.78rem;color:#aebfcd;margin-top:2px}.main{min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:10}.topbar h2{font-size:1.05rem;margin:0}.topbar .clock{margin-left:auto;text-align:right}.topbar .clock strong{display:block}.topbar .clock span{font-size:.78rem;color:var(--muted)}.mobile-menu{display:none;border:0;background:#edf3f7;border-radius:10px;padding:9px 11px;margin-right:10px}.content{padding:24px;max-width:1450px;margin:auto}.page-title{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:18px}.page-title h1{font-size:1.55rem;margin:0}.page-title p{margin:5px 0 0;color:var(--muted)}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 3px 12px #1e3c5a09}.card h3{margin:0 0 12px;font-size:1rem}.stat{display:flex;flex-direction:column;gap:5px}.stat .value{font-size:1.65rem;font-weight:800}.stat .label{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.hero-attendance{background:linear-gradient(135deg,#075a93,#0f7dca);color:#fff;border:none}.hero-attendance .muted{color:#d8ecfa}.hero-attendance .hero-time{font-size:2.1rem;font-weight:800;letter-spacing:.03em}.hero-attendance .hero-date{font-size:.9rem;opacity:.9}.attendance-state{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.hero-attendance .badge{background:#ffffff29;color:#fff}.hero-attendance .btn-secondary{background:#fff;color:var(--primary)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:11px 12px;border-bottom:1px solid #edf0f3;text-align:left;font-size:.88rem;vertical-align:middle}.table th{font-size:.76rem;color:#626f7b;text-transform:uppercase;letter-spacing:.035em;background:#fafcff;position:sticky;top:0}.table tr:last-child td{border-bottom:0}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions .btn{padding:7px 9px;font-size:.8rem}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.73rem;font-weight:800;background:#edf1f4;color:#56616d}.badge-hadir,.badge-disetujui,.badge-success,.badge-aktif{background:#e4f4ec;color:#146a45}.badge-terlambat,.badge-menunggu{background:#fff1dc;color:#8b5300}.badge-izin,.badge-sakit,.badge-cuti,.badge-dinas,.badge-baru{background:#e8f2ff;color:#245fa8}.badge-alpha,.badge-ditolak,.badge-rejected{background:#fce7ea;color:#9a1d29}.badge-belum{background:#eceef1;color:#60646b}.notice{padding:12px 14px;border-radius:12px;border:1px solid #dce6ef;background:#f4f9fd;color:#2c5475}.notice.warn{border-color:#f0d3a7;background:#fff9ee;color:#795117}.notice.danger{border-color:#f3c8cf;background:#fff5f6;color:#8f1d2b}.notice.success{border-color:#bfe2d2;background:#f3fcf7;color:#176a47}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters .field{min-width:160px;flex:1}.filters .field.compact{max-width:220px}.separator{height:1px;background:var(--line);margin:18px 0}.empty{padding:32px;text-align:center;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#071a2b94;z-index:60;display:grid;place-items:center;padding:18px;backdrop-filter:blur(3px)}.modal{background:#fff;border-radius:22px;width:min(620px,100%);max-height:92vh;overflow:auto;box-shadow:0 25px 70px #00000040}.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-body{padding:20px}.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.icon-btn{border:0;background:#edf3f7;border-radius:11px;width:38px;height:38px;color:#33516a}.camera-box{aspect-ratio:4/3;background:#151b20;border-radius:18px;overflow:hidden;position:relative}.camera-box video,.camera-box img{width:100%;height:100%;object-fit:cover}.camera-hint{position:absolute;left:12px;right:12px;bottom:12px;background:#00000094;color:#fff;padding:9px 11px;border-radius:10px;font-size:.8rem}.gps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.gps-grid div{background:#f5f8fb;border-radius:12px;padding:10px}.gps-grid span{display:block;font-size:.7rem;color:var(--muted)}.gps-grid strong{font-size:.88rem}.countdown{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}.quick-actions{display:flex;gap:10px;flex-wrap:wrap}.quick-actions .btn{min-width:150px}.toast-root{position:fixed;right:18px;bottom:110px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{opacity:0;transform:translateY(10px);transition:.2s;background:#243746;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:0 12px 30px #0000002e;max-width:360px}.toast.show{opacity:1;transform:none}.toast.success{background:#176b48}.toast.error{background:#991f2c}.toast.warn{background:#875800}.install-banner{position:fixed;left:50%;bottom:106px;transform:translate(-50%);z-index:45;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 12px 30px #00000021;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px)}.offline-banner{background:#6c4712;color:#fff;text-align:center;padding:7px;font-size:.84rem;position:sticky;top:0;z-index:1000}.employee-shell{min-height:100vh;background:#eaf2f8}.employee-main{width:min(100%,760px);min-height:100vh;margin:0 auto;background:#f4f8fc;box-shadow:0 0 50px #224a680f}.employee-content{min-height:100vh}.employee-page{padding:0 18px calc(116px + env(safe-area-inset-bottom));min-height:100vh}.employee-loading{min-height:70vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--muted)}.employee-loading span{width:34px;height:34px;border:3px solid #dce9f3;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.employee-page-header{margin:0 -18px 22px;padding:34px 24px 30px;background:linear-gradient(135deg,#07598f 0,#0d75bd);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:142px}.employee-page-header h1{margin:0;font-size:1.75rem;letter-spacing:-.02em}.employee-page-header p{margin:7px 0 0;color:#d6ecfb;font-size:.94rem}.header-icon-button{border:0;background:#ffffff24;color:#fff;border-radius:14px;min-width:52px;height:48px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-weight:850}.header-icon-button .ui-icon{width:24px;height:24px}.header-icon-button span{font-size:.65rem}.header-icon-button.text{font-size:.84rem;min-width:auto;padding:0 15px}.institution-header{margin:0 -18px;padding:28px 24px 86px;background:linear-gradient(135deg,#07598f 0,#0f78c4);color:#fff;display:flex;align-items:center;justify-content:space-between}.institution-brand{display:flex;align-items:center;gap:13px}.institution-logo{width:58px;height:58px;border-radius:18px;background:#ffffff21;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-weight:900;letter-spacing:.03em;box-shadow:inset 0 0 0 4px #ffffff08}.institution-brand strong{display:block;font-size:1rem;letter-spacing:.01em}.institution-brand span{display:block;margin-top:4px;font-size:.88rem;color:#d6ebfa;letter-spacing:.035em}.header-refresh{width:48px;height:48px;border:0;border-radius:50%;background:#ffffff29;color:#fff;display:grid;place-items:center}.header-refresh .ui-icon{width:26px;height:26px}.welcome-card{position:relative;margin-top:-57px;background:#fff;border-radius:34px;padding:28px 25px 22px;box-shadow:0 10px 32px #244b6917;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}.profile-avatar{width:92px;height:92px;border-radius:50%;background:#eff6fb;border:2px solid #cfe0ec;box-shadow:inset 0 0 0 7px #fff;display:grid;place-items:center;color:#075f99;overflow:hidden}.profile-avatar .ui-icon{width:43px;height:43px}.profile-avatar img{width:100%;height:100%;object-fit:cover}.welcome-copy>span:first-child{color:#7c8997;font-size:.93rem}.welcome-copy h1{margin:3px 0 4px;font-size:1.55rem;line-height:1.15;letter-spacing:-.02em}.welcome-copy p{margin:0;color:#7b8997}.role-chip{display:inline-flex!important;align-items:center;gap:7px;margin-top:10px;background:#e9f3fa;border:1px solid #b8d6e9;color:#095f96;padding:7px 11px;border-radius:999px;font-weight:750;font-size:.82rem}.role-chip .ui-icon{width:17px;height:17px}.welcome-divider{grid-column:1/-1;height:1px;background:#edf1f4}.date-strip{grid-column:1/-1;background:#eff6fd;border-radius:16px;padding:12px 15px;display:flex;justify-content:space-between;gap:12px;color:#607387;font-size:.87rem}.date-strip span{display:flex;align-items:center;gap:7px}.date-strip .ui-icon{width:18px;height:18px;color:#68819a}.date-strip strong{color:#203b53}.day-state-card{margin-top:20px;background:#fff;border:1px solid #d9e4ec;border-radius:24px;padding:22px;display:flex;gap:17px;align-items:center}.day-state-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#edf6fb;color:#5e849b}.day-state-icon .ui-icon{width:32px;height:32px}.day-state-card strong{font-size:1.15rem}.day-state-card p{margin:6px 0 0;color:#7a8794;line-height:1.45}.day-state-card.work .day-state-icon{background:#e8f7ef;color:#209966}.day-state-card.off .day-state-icon{background:#eef3f6;color:#7693a3}.time-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.time-cards article{background:#fff;border-radius:22px;padding:20px;min-height:154px;box-shadow:0 5px 20px #224a680d}.time-card-head{display:flex;align-items:center;gap:9px;color:#526373}.time-card-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900}.time-card-icon.in{background:#effbef;color:#25a25e}.time-card-icon.out{background:#fff6e8;color:#e79514;transform:rotate(180deg)}.time-cards article>strong{display:block;margin-top:22px;font-size:1.75rem;letter-spacing:.03em}.time-cards article>small{display:block;margin-top:7px;color:#96a0aa}.location-status-card{margin-top:16px;background:#fff;border-radius:22px;padding:18px;display:flex;align-items:center;gap:15px;box-shadow:0 5px 20px #224a680d;border:1px solid transparent}.location-icon{width:58px;height:58px;border-radius:17px;background:#fff0f1;color:#e64755;display:grid;place-items:center}.location-icon .ui-icon{width:29px;height:29px}.location-status-card span{display:block;color:#7a8794;font-size:.84rem}.location-status-card strong{display:block;margin-top:3px;font-size:1.03rem}.location-status-card small{display:block;margin-top:4px;color:#8996a3;line-height:1.35}.round-action{width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:#eef5fa;color:#597a92}.round-action .ui-icon{width:21px;height:21px}.location-status-card.inside{border-color:#cbead9}.location-status-card.inside .location-icon{background:#e6f8ee;color:#20a66a}.location-status-card.outside{border-color:#f4d2d6}.location-status-card.outside .location-icon{background:#fdebed;color:#e34e5b}.location-status-card.gps-warning{border-color:#f0dfb8}.location-status-card.gps-warning .location-icon{background:#fff6df;color:#cf8a1d}.quick-section{margin-top:30px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:1.22rem;margin:0}.section-heading button{border:0;background:transparent;color:#075f98;font-weight:800}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.quick-grid>button{border:0;background:#fff;border-radius:20px;min-height:122px;padding:15px 8px 13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:#1b3348;box-shadow:0 5px 20px #224a680d}.quick-grid strong{font-size:.84rem}.quick-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center}.quick-icon .ui-icon{width:27px;height:27px}.quick-icon.history{background:#e8f3fb;color:#0870b6}.quick-icon.clock{background:#e9f3ff;color:#4c9af0}.quick-icon.pin{background:#e9f8ef;color:#20a66a}.quick-icon.file,.quick-icon.help{background:#fff5db;color:#d7a51b}.presence-status-card{background:#fff;border-radius:25px;padding:22px;box-shadow:0 6px 22px #224a680f}.presence-status-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eyebrow{display:block;font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;color:#82909e;font-weight:800}.presence-status-top h2{margin:5px 0 0;font-size:1.35rem}.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:8px 11px;font-size:.76rem;font-weight:850;white-space:nowrap}.status-pill .ui-icon{width:17px;height:17px}.status-pill.success{background:var(--green-bg);color:#1c9a60}.status-pill.warning{background:var(--amber-bg);color:#bd7815}.status-pill.info{background:#e7f3fc;color:#1471b4}.status-pill.neutral{background:#edf2f5;color:#687784}.presence-times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.presence-times>div{background:#f6f9fc;border-radius:17px;padding:15px}.presence-times span{display:flex;align-items:center;gap:6px;color:#788a9c;font-size:.78rem}.presence-times span .ui-icon{width:16px;height:16px}.presence-times strong{display:block;font-size:1.1rem;margin-top:8px}.presence-times small{display:block;color:#8e9ba8;margin-top:4px}.checkout-countdown{margin-top:14px;background:#eaf5fc;border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;color:#527086}.checkout-countdown strong{color:#075f98;font-size:1.15rem}.presence-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.presence-action{border:0;border-radius:20px;padding:17px;text-align:left;display:flex;gap:12px;align-items:center}.presence-action>.ui-icon{width:36px;height:36px}.presence-action span,.presence-action strong{display:block}.presence-action small{display:block;margin-top:4px;opacity:.75}.presence-action.checkin{background:#e6f7ed;color:#1f8c59}.presence-action.checkout{background:#fff3de;color:#b97917}.presence-action:disabled{opacity:.46}.rule-card{margin-top:18px;background:#fff;border-radius:22px;padding:20px}.rule-card h3{margin:0 0 15px}.rule-list{display:grid;gap:12px}.rule-list>div{display:flex;gap:12px;align-items:flex-start}.rule-list>div>.ui-icon{color:#166fae;margin-top:2px}.rule-list strong,.rule-list small{display:block}.rule-list small{color:#8594a2;margin-top:3px;line-height:1.35}.history-tools{margin-top:-3px}.history-search{height:56px;background:#fff;border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 16px;box-shadow:0 4px 18px #224a680d}.history-search .ui-icon{color:#6a7d8e}.history-search input{border:0;outline:none;flex:1;color:#253c51;background:transparent}.history-chips{display:flex;gap:9px;overflow:auto;padding:15px 0 4px;scrollbar-width:none}.history-chips::-webkit-scrollbar{display:none}.history-chips button{border:1px solid #cfd9e1;background:#fff;color:#20364a;border-radius:999px;padding:10px 17px;font-weight:750;white-space:nowrap}.history-chips button.active{background:#075f98;color:#fff;border-color:#075f98}.history-list{display:grid;gap:16px;margin-top:18px}.history-card{background:#fff;border-radius:24px;padding:21px;box-shadow:0 5px 20px #224a680e}.history-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.history-card-head>div strong{display:block;font-size:1.05rem}.history-card-head>div span{display:block;margin-top:4px;color:#7f8d9b}.history-divider{height:1px;background:#e5eaee;margin:17px 0}.history-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 22px}.history-detail-grid div span{display:block;color:#81909f;font-size:.81rem}.history-detail-grid div strong{display:block;margin-top:5px;font-size:.94rem;line-height:1.35}.history-note{grid-column:1/-1}.employee-empty{padding:40px 16px;text-align:center;color:#83909c;background:#fff;border-radius:20px;margin-top:18px}.notification-list{display:grid;gap:12px}.notification-card{background:#fff;border-radius:20px;padding:16px;display:flex;gap:13px;border:1px solid #e6edf2}.notification-card.unread{border-color:#c3dff1;background:#fbfdff}.notification-icon{width:46px;height:46px;border-radius:14px;background:#eaf4fb;color:#0870b5;display:grid;place-items:center}.notification-title{display:flex;justify-content:space-between;gap:10px}.notification-title>span{font-size:.67rem;background:#e6f2fb;color:#0d6fac;border-radius:999px;padding:4px 7px;font-weight:800}.notification-card p{margin:6px 0;color:#53697d;line-height:1.45}.notification-card small{color:#8c99a5}.request-list{display:grid;gap:13px}.request-card{background:#fff;border-radius:20px;padding:17px;box-shadow:0 4px 17px #224a680d}.request-icon{width:44px;height:44px;border-radius:13px;background:#edf5fb;color:#176fae;display:grid;place-items:center}.request-card .grow>strong,.request-card .grow>span{display:block}.request-card .grow>span{color:#81909e;font-size:.82rem;margin-top:3px}.request-card p{margin:14px 0 0;color:#4e6478}.request-card>small{display:block;margin-top:9px;color:#83919d}.profile-main-card{background:#fff;border-radius:26px;padding:22px;box-shadow:0 6px 22px #224a680f}.profile-identity{display:flex;align-items:center;gap:17px}.profile-identity .profile-avatar{width:88px;height:88px}.profile-identity h2{margin:0;font-size:1.35rem}.profile-identity p{margin:5px 0;color:#7b8996}.profile-identity .grow>span{display:block;color:#597084}.profile-facts{border-top:1px solid #e8edf1;margin-top:20px;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-facts div span{display:flex;gap:6px;align-items:center;color:#82909d;font-size:.78rem}.profile-facts .ui-icon{width:17px;height:17px}.profile-facts strong{display:block;margin-top:5px;line-height:1.35}.active-text{color:#36a365}.profile-menu{margin-top:18px;background:#fff;border-radius:25px;padding:4px 20px;box-shadow:0 6px 22px #224a680d}.profile-menu>button{width:100%;border:0;background:#fff;display:grid;grid-template-columns:48px 1fr 22px;align-items:center;gap:12px;text-align:left;padding:16px 0;border-bottom:1px solid #edf1f4;color:#153047}.profile-menu>button:last-child{border-bottom:0}.profile-menu>button>.ui-icon:first-child{width:44px;height:44px;padding:11px;border-radius:50%;background:#edf5fb;color:#0769a8}.profile-menu>button>.ui-icon:last-child{width:18px;height:18px;color:#a0aab3}.profile-menu span strong,.profile-menu span small{display:block}.profile-menu span small{color:#8b98a4;margin-top:3px}.profile-menu .logout-menu>.ui-icon:first-child{background:#fdeced;color:#d94f5a}.app-version{text-align:center;color:#9aa5af;font-size:.74rem;margin:18px 0}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.info-grid>div{background:#f5f8fb;border-radius:13px;padding:12px}.info-grid span,.info-grid strong{display:block}.info-grid span{color:#82909d;font-size:.75rem}.info-grid strong{margin-top:4px}.guide-steps{margin:0;padding-left:22px}.guide-steps li{margin:0 0 10px;line-height:1.5}.attendance-modal{width:min(660px,100%)}.attendance-modal-head{background:linear-gradient(135deg,#07598f,#0d75bd);color:#fff;border-bottom:0}.attendance-modal-head .icon-btn{background:#ffffff21;color:#fff}.attendance-kicker{display:block;font-size:.68rem;letter-spacing:.12em;color:#d7edfb;font-weight:800;margin-bottom:4px}.attendance-modal-head h3{font-size:1.3rem}.attendance-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.attendance-steps span{font-size:.72rem;text-align:center;background:#eef3f7;color:#788794;padding:8px 5px;border-radius:999px}.attendance-steps span.active{background:#e3f1fb;color:#0768a5;font-weight:800}.gps-status-panel{border:1px solid #dbe6ee;background:#f8fbfd;border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center}.gps-status-icon{width:44px;height:44px;border-radius:13px;background:#eef5fa;color:#0b70b2;display:grid;place-items:center;font-size:1.5rem}.gps-status-panel span,.gps-status-panel strong,.gps-status-panel small{display:block}.gps-status-panel span{color:#82909d;font-size:.74rem}.gps-status-panel strong{margin-top:3px}.gps-status-panel small{margin-top:3px;color:#8996a2}.gps-status-panel.inside{border-color:#c7e7d6;background:#f8fdf9}.gps-status-panel.inside .gps-status-icon{background:#e4f7ec;color:#1d9b60}.gps-status-panel.outside{border-color:#f2ccd1;background:snow}.gps-status-panel.outside .gps-status-icon{background:#fdebed;color:#e34e5b}.gps-status-panel.warning{border-color:#efdbae;background:#fffdf7}.gps-status-panel.warning .gps-status-icon{background:#fff2d6;color:#c98316}.attendance-camera-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.attendance-server-note{font-size:.82rem}.bottom-nav{position:fixed;z-index:50;left:50%;bottom:0;transform:translate(-50%);width:min(100%,760px);height:calc(88px + env(safe-area-inset-bottom));padding:9px 9px env(safe-area-inset-bottom);background:#fff;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;border-top:1px solid #e3e9ee;box-shadow:0 -8px 25px #23466214}.bottom-nav-item{position:relative;border:0;background:transparent;color:#748596;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:70px;font-weight:750;font-size:.74rem}.bottom-nav-item>.ui-icon{width:25px;height:25px}.bottom-nav-item.active{color:#075f98}.attendance-nav{overflow:visible}.attendance-orb{position:absolute;top:-33px;width:72px;height:72px;border-radius:50%;background:linear-gradient(145deg,#0765a3,#2997e7);border:6px solid #f4f8fc;color:#fff;display:grid;place-items:center;box-shadow:0 7px 20px #136baa42}.attendance-orb .ui-icon{width:40px;height:40px}.attendance-nav>span:last-of-type{margin-top:38px}.notification-dot{position:absolute;top:7px;right:28%;min-width:17px;height:17px;border-radius:999px;background:#e84b59;color:#fff;font-size:.6rem;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}@media(max-width:1050px){.grid-6{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;z-index:30;width:250px;transition:.22s;box-shadow:12px 0 30px #0003}.sidebar.open{left:0}.mobile-menu{display:block}.content{padding:16px}.topbar{padding:0 14px}.grid-3,.grid-2{grid-template-columns:1fr}.page-title{flex-direction:column}.topbar .clock span{display:none}}@media(max-width:560px){.grid-6,.grid-4{grid-template-columns:repeat(2,1fr)}.login-card{padding:24px 19px;border-radius:22px}.card{padding:15px}.gps-grid{grid-template-columns:1fr}.quick-actions .btn{width:100%}.topbar .clock strong{font-size:.9rem}.content{padding:12px}.modal-backdrop{padding:0;align-items:end}.modal{border-radius:26px 26px 0 0;width:100%;max-height:94vh}.modal-head{padding:17px 18px}.modal-body{padding:18px}.modal-foot{padding:13px 18px calc(13px + env(safe-area-inset-bottom))}.page-title h1{font-size:1.35rem}.employee-page{padding-left:15px;padding-right:15px}.employee-page-header{margin-left:-15px;margin-right:-15px;padding:31px 22px 28px;min-height:135px}.institution-header{margin-left:-15px;margin-right:-15px;padding:24px 20px 82px}.institution-logo{width:54px;height:54px}.institution-brand strong{font-size:.88rem}.institution-brand span{font-size:.78rem}.welcome-card{padding:24px 19px 20px;border-radius:30px;grid-template-columns:auto 1fr;gap:14px}.profile-avatar{width:78px;height:78px}.profile-avatar .ui-icon{width:37px;height:37px}.welcome-copy h1{font-size:1.28rem}.role-chip{font-size:.73rem}.date-strip{font-size:.75rem;padding:11px}.day-state-card{padding:18px;border-radius:21px}.day-state-icon{width:57px;height:57px}.day-state-card strong{font-size:1.05rem}.day-state-card p{font-size:.88rem}.time-cards article{padding:17px;min-height:142px}.time-cards article>strong{font-size:1.52rem}.location-status-card{padding:15px}.location-icon{width:52px;height:52px}.quick-grid{gap:8px}.quick-grid>button{min-height:108px;border-radius:18px;padding:12px 5px}.quick-icon{width:48px;height:48px}.quick-grid strong{font-size:.75rem}.presence-status-top{flex-direction:column}.presence-times,.presence-actions{grid-template-columns:1fr 1fr}.history-card{padding:18px}.history-card-head{gap:8px}.status-pill{font-size:.68rem;padding:7px 9px}.profile-main-card{padding:18px}.profile-identity .profile-avatar{width:76px;height:76px}.profile-identity h2{font-size:1.18rem}.profile-facts{gap:14px}.profile-menu{padding:4px 16px}.profile-menu>button{grid-template-columns:44px 1fr 18px}.bottom-nav{height:calc(86px + env(safe-area-inset-bottom))}.attendance-orb{width:70px;height:70px}.toast-root{left:12px;right:12px;bottom:102px}.toast{max-width:none}.install-banner{bottom:100px;width:calc(100% - 24px)}}@media(max-width:390px){.institution-brand strong{font-size:.8rem}.institution-brand span{font-size:.72rem}.institution-logo{width:48px;height:48px}.header-refresh{width:42px;height:42px}.welcome-card{grid-template-columns:70px 1fr}.profile-avatar{width:70px;height:70px}.date-strip{flex-direction:column;gap:7px}.quick-grid strong{font-size:.7rem}.time-cards article>strong{font-size:1.35rem}.presence-times,.presence-actions{grid-template-columns:1fr}.history-detail-grid{gap:15px 12px}.history-card-head{flex-direction:column}.profile-facts{grid-template-columns:1fr}}@media print{.sidebar,.topbar,.bottom-nav,.no-print,.btn,.filters,.history-tools,.employee-page-header .header-icon-button{display:none!important}.app-shell{display:block}.content{padding:0}.card{box-shadow:none;border-color:#bbb}.table-wrap{overflow:visible}.table{min-width:0}.main{background:#fff}.employee-shell,.employee-main{background:#fff;box-shadow:none}.employee-page{padding:0}.employee-page-header{margin:0 0 18px;padding:18px;background:#fff;color:#111;border-bottom:2px solid #111;min-height:auto}.employee-page-header p{color:#555}.history-list{gap:10px}.history-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}.toast-root{display:none}}