:root{--bg:#f4f7fb;--navy:#17233b;--navy2:#223453;--primary:#284c81;--border:#e3e8f0;--muted:#67768b;--text:#17263e;--white:#fff;--yellow:#fbd252;--yellow-light:#fff5ce;--blue:#65aaf4;--blue-light:#e4f2ff;--green:#14805e;--radius:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.layout{display:flex;min-height:100vh}.sidebar{background:var(--navy);color:#d6e2f1;width:250px;padding:28px 18px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh;flex-shrink:0}.logo{display:flex;gap:12px;align-items:center;padding:0 8px}.brandmark{height:43px;width:43px;display:grid;place-items:center;border-radius:13px;background:#d6e9ff;color:#17385c;font-size:22px;font-weight:800}.brandtitle{font-weight:760;color:white;letter-spacing:-.3px;font-size:18px}.brandsub{font-size:11px;color:#a6b5ca}.side-label{text-transform:uppercase;font-size:10px;color:#879bb6;letter-spacing:1.7px;padding:0 12px;margin-bottom:9px}.nav{display:flex;flex-direction:column;gap:6px}.navbutton{display:flex;align-items:center;gap:11px;background:transparent;color:#c3d2e5;border:0;text-align:left;padding:12px;border-radius:11px;width:100%;font-weight:650}.navbutton:hover{background:#273a5a}.navbutton.active{background:#35527d;color:#fff}.navbutton svg{height:19px;width:19px;stroke:currentColor;fill:none;stroke-width:1.8}.sidebar-bottom{margin-top:auto;border-top:1px solid #31435f;padding:18px 10px 0;font-size:12px;color:#a9bdd4}.main{flex:1;min-width:0;max-width:1500px;margin:auto;width:100%;padding:30px clamp(18px,4vw,58px) 80px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.crumb{font-size:13px;color:var(--muted);font-weight:700}.head-right{display:flex;gap:12px;align-items:center}.demo-chip{background:#e7edf6;border:1px solid #d3ddeb;border-radius:999px;padding:7px 12px;font-size:12px;color:#3c5476;font-weight:700}.avatar{width:40px;height:40px;border-radius:50%;background:var(--navy2);color:white;display:grid;place-items:center;font-size:12px;font-weight:800}.page-header{margin:0 0 24px}.page-header h1{font-size:clamp(27px,3vw,36px);line-height:1.15;letter-spacing:-1px;margin:0 0 7px}.page-header p{margin:0;color:var(--muted);font-size:14px}.alert{border-radius:12px;background:#eef3fa;color:#435c7a;border:1px solid #dce7f3;font-size:13px;padding:12px 15px;margin-bottom:22px}.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 24px #122b5006;padding:23px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.panel-heading h2{font-size:19px;margin:0;letter-spacing:-.3px}.panel-heading p{font-size:13px;color:var(--muted);margin:3px 0 0}.btn{border:1px solid #d9e2ed;background:white;color:#273b56;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover{background:#f5f8fc}.btn.primary{background:var(--primary);color:white;border-color:var(--primary)}.btn.primary:hover{background:#1e3c6b}.btn.ghost{border-color:transparent}.btn.small{padding:6px 11px}.muted{color:var(--muted)}.legend{display:flex;gap:17px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:650;color:#455571}.legend-item{display:flex;gap:7px;align-items:center}.dot{height:11px;width:11px;border-radius:4px;display:inline-block}.dot.parah{background:var(--yellow)}.dot.hutech{background:var(--blue)}.calendar-controls{display:flex;gap:10px;align-items:center}.calendar-controls strong{min-width:151px;text-align:center;font-size:16px}.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.cal-week{font-size:11px;font-weight:800;color:#778599;text-align:center;padding:9px 0;text-transform:uppercase}.cal-cell{display:flex;flex-direction:column;align-items:stretch;min-height:100px;padding:9px 8px;border:1px solid #e5eaf1;border-radius:10px;background:white;text-align:left;gap:5px;min-width:0}.cal-cell.empty{background:#f8fafc;border-color:#edf0f4}.cal-cell.weekend{background:#f8f9fb}.cal-cell.holiday{background:#faf7f4}.cal-cell.selected{outline:2px solid #456794;outline-offset:-2px}.cal-cell:not(.empty):hover{background:#f3f7fd}.cal-day{font-size:13px;font-weight:740;color:#3a4c67}.cal-cell.weekend .cal-day{color:#99a2b1}.cal-note{font-size:10px;color:#8d6c39;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cal-event{font-size:10px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:5px;padding:4px 5px;font-weight:760;color:#3a321a;background:var(--yellow-light);border-left:3px solid #e4b31d}.cal-event.hutech{color:#16446f;background:var(--blue-light);border-left-color:#4d94e5}.cal-event .event-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-event .event-time{display:block;font-size:10px;font-weight:800;line-height:1.45;white-space:nowrap}.selected-card{margin-top:20px;border:1px solid #e6ebf1;background:#fbfcfe;padding:16px;border-radius:12px}.selected-title{font-size:14px;font-weight:800;margin-bottom:10px}.absence-row{border-radius:8px;background:white;border:1px solid #e8ecf2;padding:10px 12px;display:flex;align-items:center;gap:12px;margin-top:7px;font-size:13px}.absence-row small{color:#65758a;margin-left:auto}.tag{display:inline-block;border-radius:20px;padding:5px 10px;font-size:11px;font-weight:760;white-space:nowrap}.tag.yellow{background:var(--yellow-light);color:#775900}.tag.blue{background:var(--blue-light);color:#185a96}.tag.wait{background:#fff2d7;color:#9b630a}.tag.approved{background:#def7eb;color:#17694b}.tag.rejected{background:#fde8e8;color:#a72c33}.tag.cancel{background:#eaeef4;color:#53647a}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field label,.field-label{font-size:12px;font-weight:800;color:#42536b}.field input,.field select,.field textarea,.day-select{width:100%;padding:11px 12px;border:1px solid #d8e1ea;border-radius:9px;background:#fff;color:#1a2a42;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.day-select:focus{border-color:#4b86c8;box-shadow:0 0 0 3px #dceafa}.small-help{font-size:12px;color:var(--muted)}.form-section{margin-top:24px}.form-section h3{font-size:16px;margin:0 0 6px}.day-rows{display:flex;flex-direction:column;gap:8px;margin-top:14px}.day-row{display:grid;grid-template-columns:140px minmax(120px,1fr) 218px;gap:11px;align-items:center;background:#f8fafc;border:1px solid #edf0f4;padding:11px 12px;border-radius:10px}.day-row.inactive{opacity:.7}.day-date{font-weight:750;font-size:13px}.day-date small{display:block;font-size:11px;color:var(--muted);font-weight:500}.time-pair{display:flex;align-items:center;gap:5px}.overtime-times{display:flex;flex-direction:column;gap:5px}.duration-note{display:block;font-size:11px;font-weight:750;color:#236b57}.duration-note.invalid{color:#bb4242}.overtime-summary{margin-top:14px;padding:13px 16px;background:#edf6f1;border:1px solid #c7e5d4;border-radius:10px;display:flex;justify-content:space-between;gap:9px;align-items:center;flex-wrap:wrap}.overtime-summary strong{font-size:17px;color:#195c46}.overtime-summary small{color:#476b5d}.overtime-summary.invalid{background:#fff4ed;border-color:#f2d0b5}.overtime-summary.invalid strong{color:#9b4d20}.time-pair input{padding:8px 5px;width:78px;border-radius:7px;border:1px solid #d4dfeb;font-size:12px}.weekday-note{color:#75849a;font-size:12px;text-align:right}.footer-actions{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}.stat-card{border:1px solid var(--border);background:#fff;border-radius:14px;padding:17px}.stat-card b{font-size:23px;display:block;letter-spacing:-.5px}.stat-card span{font-size:12px;color:var(--muted)}.request-list{display:flex;flex-direction:column;gap:12px}.request-card{border:1px solid var(--border);padding:17px;border-radius:12px;background:white}.request-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.request-card h3{margin:0 0 4px;font-size:15px}.request-card p{font-size:12px;color:var(--muted);margin:0}.request-actions{border-top:1px solid #edf0f5;margin-top:13px;padding-top:12px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}.workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}.workflow .step{border:1px solid var(--border);padding:13px;background:#fff;border-radius:12px}.workflow .step b{display:block;font-size:12px;margin-bottom:5px}.workflow .step span{font-size:11px;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:660px}th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#8190a3;background:#f7f9fc;padding:12px 11px}td{border-top:1px solid #e9edf3;padding:12px 11px;font-size:13px}td:first-child{font-weight:680}.info-note{background:#f4f7fb;border-left:3px solid #8facd0;border-radius:8px;font-size:12px;color:#566881;padding:11px 14px;margin-top:17px}.toast{position:fixed;right:24px;bottom:24px;max-width:420px;padding:15px 18px;border-radius:11px;background:#203955;color:white;box-shadow:0 20px 60px #101a2b38;z-index:10;font-size:13px}.hidden{display:none!important}.admin-form{background:#f7f9fc;border:1px solid #e3e9f2;border-radius:12px;padding:18px;margin:12px 0 16px}.bottom-nav{display:none}.two-col{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}.sidebar-box{border:1px solid var(--border);background:white;border-radius:var(--radius);padding:21px}.sidebar-box h3{font-size:15px;margin:0 0 12px}.detail-lines{display:grid;gap:8px;font-size:12px}.detail-lines div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #edf0f4}.detail-lines b{text-align:right}.mini-divider{height:1px;background:#edf0f4;margin:16px 0} @media(max-width:1060px){.sidebar{width:220px}.two-col{grid-template-columns:1fr}.cal-cell{min-height:85px;padding:7px 5px}.cal-event{font-size:9px}}@media(max-width:740px){.sidebar{display:none}.main{padding:20px 14px 90px}.topbar{margin-bottom:20px}.head-right{gap:8px}.demo-chip{font-size:10px;padding:6px 8px}.page-header{margin-bottom:18px}.panel{padding:15px}.panel-heading{align-items:flex-start;flex-wrap:wrap}.cal-grid{gap:3px}.cal-cell{min-height:66px;padding:5px 3px;gap:3px;border-radius:6px}.cal-event{font-size:0;height:7px;min-height:7px;padding:0;flex-shrink:0;border:0;border-radius:4px;background:var(--yellow)}.cal-event.hutech{background:var(--blue)}.cal-event .event-name,.cal-event .event-time{display:none}.cal-day{font-size:11px}.cal-note{display:none}.cal-week{font-size:10px;padding:5px 0}.form-grid{grid-template-columns:1fr}.day-row{grid-template-columns:1fr 1fr;gap:9px}.day-row .overtime-times,.day-row .time-pair,.day-row .weekday-note{grid-column:1/-1;text-align:left}.stat-row{gap:7px}.stat-card{padding:12px}.stat-card b{font-size:18px}.workflow{grid-template-columns:1fr}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:5;background:#fff;display:flex;justify-content:space-around;border-top:1px solid #dfe7f0;padding:7px 3px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px #14243d12}.bottom-nav button{border:0;background:transparent;color:#6b7e99;padding:6px 5px;display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:750}.bottom-nav button.active{color:#264d82}.bottom-nav svg{height:21px;width:21px;fill:none;stroke:currentColor;stroke-width:1.7}.toast{right:10px;left:10px;bottom:77px;max-width:none}.absence-row{flex-wrap:wrap}.absence-row small{margin-left:0;width:100%}}

.account-switch{border:1px solid #d9e2ed;background:#fff;color:#273b56;padding:9px 10px;border-radius:10px;min-width:175px;max-width:250px;font-weight:700;font-size:12px}
.badge-count{display:inline-flex;border-radius:25px;background:#e9f0fb;color:#33587f;font-size:11px;font-weight:750;padding:3px 8px;margin-left:auto}
.section-rule{border-top:1px solid #e7ebf2;padding-top:18px;margin-top:18px}
.notice-list{display:flex;flex-direction:column;gap:10px}.notice{padding:14px 15px;border:1px solid #e4eaf2;border-radius:11px;background:#fff;font-size:13px}.notice.unread{background:#eef5ff;border-color:#c8dced}.notice-title{font-weight:800;margin-bottom:3px}.notice-meta{color:#70809a;font-size:11px;margin-top:7px}.muted-italic{font-size:12px;color:#718096;font-style:italic}.tabs-inline{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}.btn.warn{color:#a5323b;background:#fffafa;border-color:#f1cfd2}.btn.warn:hover{background:#ffedf0}.req-summary{background:#f8fafc;border:1px solid #e9edf3;border-radius:9px;padding:11px 13px;margin-top:12px;font-size:12px}.req-days{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.day-pill{font-size:11px;background:#eef3fa;color:#3d5779;padding:4px 7px;border-radius:6px}.empty-state{border:1px dashed #d9e2ed;border-radius:10px;padding:28px 14px;text-align:center;color:#75859d;font-size:13px}.danger-text{color:#b13038}.admin-row-actions{display:flex;gap:7px;flex-wrap:wrap}.toolbar-grid{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.mobile-switch{display:none}.app-details{font-size:13px;line-height:1.6}.app-details summary{cursor:pointer;font-weight:750}.select-sm{border:1px solid #d8e1ea;border-radius:8px;padding:8px;background:white;font:inherit;color:var(--text)}.demo-hint{background:#e7edf6;color:#415777;border:1px solid #cbd9e9;padding:11px 14px;font-size:12px;border-radius:9px;margin:0 0 16px}.horizontal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.small-counter{font-size:12px;color:#66788f}.info-pill{display:inline-block;border-radius:8px;background:#eef3fa;padding:6px 9px;font-size:12px}.role-caption{font-size:11px;color:#657994}.text-block{white-space:pre-wrap}.status-reason{margin-top:9px;padding:10px;background:#f9f2ef;border-left:3px solid #cb9b68;color:#754e37;border-radius:7px;font-size:12px}.summary-inline{display:flex;gap:7px;flex-wrap:wrap}.switch-head{display:flex;align-items:center;gap:6px}
@media(max-width:740px){.account-switch{max-width:155px;min-width:0;width:155px;font-size:11px}.topbar{align-items:flex-start}.head-right .demo-chip{display:none}.toolbar-grid{grid-template-columns:1fr}.calendar-controls strong{min-width:100px;font-size:14px}.day-row{grid-template-columns:1fr}.day-row .time-pair,.day-row .weekday-note{grid-column:auto}.day-row .time-pair input{width:90px}.request-card{padding:13px}.role-caption{display:none}}

/* v5 online styles */
.loading,.auth-layout,.setup-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.auth-card,.setup-card{background:#fff;border-radius:20px;border:1px solid #e3e8f0;max-width:460px;width:100%;padding:32px;box-shadow:0 14px 45px #182b4712}
.auth-card h1,.setup-card h1{font-size:26px;line-height:1.18;margin:12px 0 7px}.auth-card p,.setup-card p{font-size:14px;color:#66768e}
.auth-card .btn{width:100%}.auth-card .field{margin:18px 0}.auth-logo{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#17395d;color:white;font-weight:900;font-size:22px}
.spinner{display:block;width:22px;height:22px;border:3px solid #dfe8f3;border-top-color:#274c80;border-radius:100%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.user-chip{display:flex;align-items:center;gap:9px;justify-content:flex-end}.user-chip .name{font-size:13px;font-weight:800}.user-chip .role{font-size:11px;color:#66768e;text-align:right}
.screen-max{max-width:1200px}.form-error{color:#a4232c;background:#fff1f1;padding:10px 12px;border-radius:8px;margin-top:10px;font-size:13px}
.holiday-pill{border-radius:999px;background:#fff7df;color:#846322;padding:4px 8px;font-size:11px}.badge-count{border-radius:999px;background:#dd4848;color:white;padding:1px 6px;font-size:10px}
.navbutton .badge-count{margin-left:auto}.top-title{font-size:26px;margin:0 0 6px;font-weight:850;letter-spacing:-.7px}.top-sub{font-size:13px;color:var(--muted);margin:0 0 24px}
.admin-tools{display:flex;gap:9px;flex-wrap:wrap}.empty-card{padding:28px;background:#fbfcff;border:1px dashed #cdd9e5;border-radius:12px;text-align:center;color:#67768b;font-size:13px}
.info-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid #edf0f4;padding:8px 0}
.notice-item{border-bottom:1px solid #eef1f5;padding:14px 4px}.notice-item.unread{background:#f5f9ff;border-radius:9px;padding:14px 11px}.notice-item b{display:block}.notice-item p{margin:5px 0;font-size:13px}.notice-item small{color:#758399}
.admin-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.danger{color:#aa2431!important}.btn.danger-btn{border-color:#f2cdcd;color:#a6232c}
.inline-select{min-width:180px;max-width:320px;width:100%;padding:9px 10px;background:white;border:1px solid #d8e1ea;border-radius:9px}
.cal-event{cursor:pointer}.event-time{font-weight:750}.field input[type="time"]{min-width:0}.tag{white-space:normal}
@media(max-width:900px){.sidebar{width:205px}.main{padding:25px 18px 75px}.cal-cell{padding:6px 4px;min-height:91px}.cal-event{font-size:9px}}
@media(max-width:740px){.sidebar{display:none}.main{padding:17px 12px 98px}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e3e8f0;z-index:8;padding:5px 4px max(5px,env(safe-area-inset-bottom));gap:2px;overflow:auto}.bottom-nav button{display:flex;flex-direction:column;flex:1;align-items:center;gap:4px;border:0;background:white;border-radius:8px;padding:9px 2px;font-size:10px;color:#60718c;min-width:68px;cursor:pointer}.bottom-nav button.active{background:#eaf1fa;color:#234879;font-weight:800}.topbar{align-items:center}.head-right{gap:8px}.top-sub{margin-bottom:15px}.panel{padding:13px}.cal-grid{gap:3px}.cal-cell{min-height:64px;padding:4px 3px;gap:2px}.cal-day{font-size:11px}.cal-event{font-size:8px;padding:2px 3px;line-height:1.18}.cal-event .event-name{display:none}.cal-event .event-time{font-size:8px}.cal-note{display:none}.calendar-controls strong{min-width:124px;font-size:14px}.calendar-controls .btn{padding:7px}.form-grid{grid-template-columns:1fr}.day-row{grid-template-columns:1fr;gap:6px}.time-pair input{width:110px}.request-top{flex-direction:column}.request-actions{align-items:stretch}.request-actions .btn{flex:1}.user-chip .role{display:none}.auth-card,.setup-card{padding:24px}.stat-row{grid-template-columns:1fr 1fr}}