@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#3d4658;--primary-hover:#2b3242;--primary-light:#eceef2;--accent:#c78a4f;--accent-hover:#b3743c;--accent-light:#f6ecdf;--bg:#f2f1ee;--surface:#ffffff;--border:#e8e3da;--border-light:#f0ece5;--text:#1f1f2e;--text-sub:#55556a;--muted:#9898a8;--muted-light:#c4c4d0;--danger:#f05a5a;--warn:#f0a040;--success:#3dba88;--r:12px;--shadow-xs:0 1px 3px rgba(80,70,60,.06);--shadow-sm:0 2px 8px rgba(80,70,60,.08);--shadow:0 4px 20px rgba(80,70,60,.11);--shadow-md:0 8px 32px rgba(80,70,60,.14);--transition:.18s cubic-bezier(.4,0,.2,1)}body{font-family:Noto Sans TC,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;min-height:100vh;line-height:1.55;scrollbar-color:var(--muted-light) transparent;scrollbar-width:thin}.topbar{background:#fff;height:60px;display:flex;align-items:center;gap:8px;padding:0 24px;position:sticky;top:0;z-index:200;border-bottom:1px solid var(--border);box-shadow:0 2px 12px #50463c12}.topbar-left{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.topbar-left h1{font-size:16px;font-weight:700;color:var(--text);letter-spacing:.3px;display:flex;align-items:center;gap:7px;white-space:nowrap}.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.nav{display:flex;align-items:center;justify-content:safe center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{background:none;border:none;color:var(--text-sub);padding:7px 15px;border-radius:99px;cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition);white-space:nowrap;flex-shrink:0}.nav button.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #3d465847}.nav button:hover:not(.active){background:#f0ece5;color:var(--text)}.sub-nav{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:stretch;justify-content:safe center;gap:0;overflow-x:auto;scrollbar-width:none;position:sticky;top:60px;z-index:199;box-shadow:0 1px 3px #50463c0a}.sub-nav::-webkit-scrollbar{display:none}.sub-nav button{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-sub);padding:10px 17px;cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap;transition:color .15s,border-color .15s,background .12s;flex-shrink:0}.sub-nav button.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}.sub-nav button:hover:not(.active){color:var(--text);background:#f6f4f0}.page-content{padding:24px 26px;max-width:1440px;margin:0 auto;zoom:1.05;animation:page-in .26s cubic-bezier(.4,0,.2,1) both}@keyframes page-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;margin-bottom:16px;box-shadow:var(--shadow-xs);transition:box-shadow var(--transition)}@keyframes card-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}.card:hover{box-shadow:var(--shadow-sm)}.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border-light)}.card-hd h2{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}.card-hd h2:before{content:"";display:inline-block;width:3px;height:15px;background:linear-gradient(to bottom,var(--primary),var(--accent));border-radius:99px}.btn{padding:7px 16px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-sub);cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;box-shadow:var(--shadow-xs);white-space:nowrap}.btn:hover{background:#f8f5f0;border-color:var(--muted-light);color:var(--text);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn:active{transform:translateY(0);box-shadow:var(--shadow-xs)}.btn-primary{background:var(--primary);border-color:transparent;color:#fff;box-shadow:0 2px 10px #3d465852}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 4px 16px #3d46586b;color:#fff}.btn-success{background:var(--success);border-color:transparent;color:#fff;box-shadow:0 2px 8px #3dba8838}.btn-success:hover{background:#34a878;box-shadow:0 4px 14px #3dba8852;color:#fff}.btn-danger{background:var(--danger);border-color:transparent;color:#fff;box-shadow:0 2px 8px #f05a5a38}.btn-danger:hover{background:#d94a4a;box-shadow:0 4px 14px #f05a5a52;color:#fff}.btn-sm{padding:5px 12px;font-size:13px;border-radius:7px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}.topbar .btn{box-shadow:none;background:#f4f0ea;border-color:var(--border)}.topbar .btn:hover{background:#ede9e0}.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}.fg{display:flex;flex-direction:column;gap:5px}.fg label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase}.fg input,.fg select,.fg textarea{padding:8px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;background:var(--surface);color:var(--text);outline:none;transition:var(--transition);font-family:inherit}.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3d46581f}.fg input::placeholder{color:var(--muted-light)}.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xs)}table.main{border-collapse:collapse;width:max-content;min-width:100%}table.main th,table.main td{border:1px solid var(--border);padding:0;white-space:nowrap}table.main th{background:#faf8f4;font-size:11px;font-weight:600;color:var(--muted);padding:7px 8px;text-align:center;letter-spacing:.3px}.mtbl{width:100%;border-collapse:collapse;font-size:14px}.mtbl th{background:#faf8f4;padding:10px 16px;text-align:left;white-space:nowrap;font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border);letter-spacing:.3px;text-transform:uppercase}.mtbl td{padding:10px 16px;border-bottom:1px solid var(--border-light);vertical-align:middle}.mtbl tr:last-child td{border-bottom:none}.mtbl.compact th,.mtbl.compact td{padding:8px 10px}.mtbl tbody tr{transition:background var(--transition)}.mtbl tbody tr:hover td{background:#faf8f4}.sticky-hd{position:sticky;left:0;z-index:12;background:#faf8f4}.sticky-col{position:sticky;left:0;z-index:8;background:var(--surface)}.date-hd{min-width:70px;text-align:center}.day-sub{font-size:10px;font-weight:400}.wkd{color:var(--danger)}.scell{min-width:70px;padding:3px 4px;vertical-align:middle;cursor:pointer;position:relative;transition:background var(--transition)}.scell:hover{background:#eeecff}.cell-label{font-size:11px;font-weight:600;text-align:center;padding:3px 6px;border-radius:99px;width:100%;cursor:pointer;transition:var(--transition);letter-spacing:.3px}.nhr-code{font-size:9px;color:var(--muted);text-align:center;background:#f0ece5;border-radius:99px;padding:1px 5px;margin-top:2px}.s-early{background:#fffaf5}.s-early .cell-label{background:#ffd6a5;color:#8a3800}.s-mid{background:#f4fdf8}.s-mid .cell-label{background:#a8edcc;color:#0e5e38}.s-late{background:#f4f5ff}.s-late .cell-label{background:#b8c4ff;color:#1e2ea8}.s-full{background:#faf4ff}.s-full .cell-label{background:#d4b0ff;color:#5010a0}.s-off{background:#f5f3ef}.s-off .cell-label{background:#ddd9d2;color:#5a5650}.s-sp{background:#fff5f5}.s-sp .cell-label{background:#ffb3b3;color:#900000}.shift-popup{display:none;position:fixed;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);z-index:9999;min-width:150px;max-height:300px;overflow-y:auto;padding:6px}.shift-popup.open{display:block}.shift-opt{padding:7px 13px;font-size:12px;cursor:pointer;border-radius:99px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:var(--transition);font-weight:500}.shift-opt:hover{background:var(--primary-light);color:var(--primary)}.shift-opt.selected{background:var(--primary-light);font-weight:600;color:var(--primary)}.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.2px}.b-am{background:#fff0e0;color:#8a4800}.b-gn{background:#dcf7ec;color:#126040}.b-bl{background:#e2eaff;color:#1a3580}.b-pu{background:#ede4ff;color:#5820b0}.b-gy{background:#ede9e2;color:var(--muted)}.b-warn{background:#fff5d9;color:#845000}.b-danger{background:#ffe4e4;color:#961818}.role-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}.role-manager{background:#dcf7ec;color:#126040;border-color:#b0e0c8}.role-employee{background:#e2eaff;color:#1a3580;border-color:#b5ceff}.topbar .role-tag{background:var(--primary-light);color:var(--primary);border-color:#3d46582e}.alert{padding:11px 15px;border-radius:10px;font-size:13px;margin-bottom:14px;border-left:3px solid transparent;line-height:1.5}.alert-info{background:#eef0ff;color:#2a35a8;border-left-color:var(--primary)}.alert-warn{background:#fff8e0;color:#7a4500;border-left-color:var(--warn)}.alert-success{background:#dcf7ec;color:#126040;border-left-color:var(--success)}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(8px);background:var(--text);color:#fff;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:500;z-index:10050;transition:opacity .3s,transform .3s;pointer-events:none;opacity:0;box-shadow:var(--shadow-md)}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 8% -10%,#e6e8ee 0%,transparent 55%),radial-gradient(900px 500px at 110% 110%,#f3ead9 0%,transparent 55%),var(--bg)}.login-card{display:flex;width:760px;max-width:96%;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -30px #3c325a73;border:1px solid var(--border-light);animation:card-in .35s cubic-bezier(.4,0,.2,1) both}.login-brand{flex:0 0 280px;padding:46px 34px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:8px;background:linear-gradient(160deg,#3d4658,#2b3242);position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(240px 240px at 85% 12%,rgba(199,138,79,.3),transparent 62%)}.login-badge{width:60px;height:60px;border-radius:18px;background:#c78a4f33;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#e5c49b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:relative;z-index:1}.login-badge svg{width:30px;height:30px}.login-name{font-size:27px;font-weight:700;letter-spacing:1px;position:relative;z-index:1}.login-tag{font-size:14px;opacity:.92;position:relative;z-index:1}.login-brand-foot{margin-top:auto;font-size:11px;opacity:.7;position:relative;z-index:1;letter-spacing:1px}.login-form{flex:1;padding:46px 42px;min-width:0}.login-h{font-size:22px;font-weight:700;color:var(--text)}.login-p{font-size:13px;color:var(--muted);margin:6px 0 26px}.lpfg{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:14px;padding:0 14px;margin-bottom:14px;transition:var(--transition);background:#fbfaf8}.lpfg:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);background:#fff}.lpfg .lpico{display:flex;align-items:center;flex-shrink:0}.lpfg .lpico svg{width:18px;height:18px;stroke:var(--muted);transition:stroke var(--transition)}.lpfg:focus-within .lpico svg{stroke:var(--primary)}.lpfg input{flex:1;border:none;background:none;padding:13px 0;font-size:15px;color:var(--text);width:100%}.lpfg input:focus{outline:none;box-shadow:none}.lpbtn{width:100%;border:none;border-radius:14px;padding:14px;font-size:16px;font-weight:700;letter-spacing:4px;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--primary),var(--primary-hover));box-shadow:0 12px 24px -8px #3d465899;transition:var(--transition);margin-top:6px}.lpbtn:hover{filter:brightness(1.04);transform:translateY(-1px)}.lpbtn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.lplink{text-align:center;margin-top:16px}.lplink button{background:none;border:none;color:var(--primary);font-size:13px;cursor:pointer}.lplink button:hover{text-decoration:underline}.lphint{margin-top:18px;font-size:11px;color:var(--muted);background:#faf8f4;border:1px solid var(--border-light);border-radius:12px;padding:10px 12px;line-height:1.7}@media (max-width:560px){.login-brand{display:none}.login-form{padding:36px 26px}}.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:6px;margin-bottom:12px}.emp-card{border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:8px 10px;transition:var(--transition)}.emp-card:hover{border-color:var(--primary)}.sv.good{color:var(--success)}.sv.warn{color:var(--warn)}.sv.bad{color:var(--danger)}.notif-btn{position:relative;background:none;border:none;color:var(--muted);cursor:pointer;padding:7px;border-radius:9px;font-size:18px;line-height:1;display:flex;align-items:center;transition:var(--transition)}.notif-btn:hover{background:#f0ece5;color:var(--text)}.notif-badge{position:absolute;top:1px;right:1px;background:var(--danger);color:#fff;font-size:9px;font-weight:600;min-width:16px;height:16px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 1px 4px #f05a5a66}.notif-panel{position:absolute;top:60px;right:16px;width:350px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);z-index:500;max-height:440px;overflow-y:auto}.notif-item{padding:13px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background var(--transition)}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:#faf8f4}.notif-item.unread{background:#f5f3ff}.notif-item .n-title{font-size:13px;font-weight:600;margin-bottom:3px}.notif-item .n-msg{font-size:12px;color:var(--muted);line-height:1.45}.notif-item .n-time{font-size:11px;color:var(--muted-light);margin-top:4px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e191473;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}.modal-box{background:#fff;border-radius:18px;padding:28px 30px;min-width:380px;max-width:92vw;box-shadow:var(--shadow-md);animation:modal-in .22s cubic-bezier(.34,1.56,.64,1);zoom:1.05}@keyframes modal-in{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.modal-title{font-size:16px;font-weight:700;margin-bottom:18px;color:var(--text)}.hamburger-btn{display:none;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;font-size:17px;line-height:1;padding:0;border:1px solid var(--border);background:transparent;color:var(--text-sub);cursor:pointer;transition:var(--transition);flex-shrink:0}.hamburger-btn:hover{background:#f4f0ea;color:var(--text)}.mobile-menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:185;background:transparent}.mobile-menu{position:fixed;top:56px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 8px 28px #50463c21;z-index:190;padding:8px 10px 12px;animation:slide-down .2s cubic-bezier(.4,0,.2,1)}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}.mobile-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:12px 16px;border:none;background:none;border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-sub);transition:var(--transition);font-family:inherit}.mobile-menu-item.active{background:var(--primary-light);color:var(--primary);font-weight:600}.mobile-menu-item:hover:not(.active){background:#f4f0ea;color:var(--text)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--muted-light);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}@media (max-width: 1024px){.page-content{padding:18px}.topbar{padding:0 18px;gap:6px}.nav button{padding:5px 11px;font-size:12px}.topbar-left h1{font-size:14px}.role-tag{display:none}}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#ffffffb8;z-index:50;border-radius:var(--r);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.kbd-hint{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:11px;color:var(--muted);padding-top:8px;border-top:1px solid var(--border-light)}.kbd{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 7px;font-size:11px;color:var(--text-sub);white-space:nowrap}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 0;color:var(--muted);font-size:13px;gap:8px}.empty-state-icon{font-size:32px}.today-hd{background:var(--accent-light)!important;color:var(--accent-hover)!important}.today-cell{background:#c78a4f12!important}.admin-tab-bar{display:flex;justify-content:safe center;gap:0;background:#fff;border-bottom:2px solid var(--border);border-radius:var(--r) var(--r) 0 0;margin-bottom:0;overflow-x:auto;scrollbar-width:none;box-shadow:0 1px 3px #50463c0a}.admin-tab-bar::-webkit-scrollbar{display:none}.admin-tab-bar+.card{border-top-left-radius:0;border-top-right-radius:0;border-top:none;margin-top:0}.admin-tab-bar+.card .mtbl td{white-space:nowrap}@media (max-width: 680px){.topbar{height:56px;flex-wrap:nowrap}.sub-nav{top:56px}.topbar-left{flex:1;min-width:0;overflow:hidden}.topbar-left h1{font-size:14px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.topbar-left h1 select,.topbar-left h1>span{display:none}.hamburger-btn{display:flex}.nav,.role-tag{display:none}.topbar-desktop-only{display:none!important}.page-content{padding:12px}.card{padding:16px;margin-bottom:12px}.card-hd{flex-wrap:wrap;gap:10px;margin-bottom:14px;padding-bottom:12px}.card-hd h2{width:100%}.tbl-wrap{border-radius:9px}.mtbl th,.mtbl td{padding:8px 12px}.frow{flex-direction:column;gap:8px}.frow .fg{width:100%}.fg input,.fg select,.fg textarea{font-size:16px}input:not([type=number]),select,textarea{font-size:16px!important}.login-box{padding:32px 24px}.login-title{font-size:20px}.emp-grid{grid-template-columns:1fr}.modal-box{min-width:unset;width:94vw;padding:20px}.notif-panel{position:fixed;top:56px;left:0;right:0;width:100%;border-radius:0 0 16px 16px;max-height:65vh}.rate-bar{display:none}.admin-tab-bar{touch-action:pan-x;border-radius:var(--r) var(--r) 0 0}.sub-nav{touch-action:pan-x;padding:0 12px}}