:root{font-family:PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:#17212b;background:#f4f6f8;font-synthesis:none;--navy: #123b63;--navy-dark: #0b2945;--green: #176b4d;--green-soft: #e6f4ed;--orange: #9a5a00;--orange-soft: #fff3d6;--red: #a83232;--red-soft: #fdecec;--border: #d8dee5;--muted: #5f6c78;--shadow: 0 14px 40px rgb(25 40 55 / 9%)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #f4b942;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.18}h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.25}h3{font-size:1.2rem}.landing{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#d8eee5,transparent 36%),linear-gradient(135deg,#eff4f8,#f8f5eb)}.landing-card{width:min(680px,100%);padding:clamp(30px,7vw,64px);border:1px solid rgb(255 255 255 / 70%);background:#ffffffe0;box-shadow:var(--shadow);border-radius:32px;text-align:center}.landing-card>p:not(.eyebrow){color:var(--muted);font-size:1.1rem;line-height:1.8}.logo-mark{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:22px;background:var(--navy);color:#fff;font-weight:800;font-size:2rem;margin-bottom:24px}.landing-actions{display:grid;gap:14px;margin-top:32px}.employee-shell{max-width:680px;min-height:100vh;margin:0 auto;background:#f7f8fa;padding-bottom:110px;font-size:18px}.employee-header{padding:28px 22px 22px;background:var(--navy);color:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.employee-header p{margin-bottom:4px;opacity:.78}.employee-header h1{margin-bottom:0;font-size:1.85rem}.employee-shell main{padding:20px}.status-pill{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:999px;background:#ffffff29;font-size:.86rem;white-space:nowrap}.card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 5px 20px #1928370d}.hero-card{min-height:430px;display:flex;flex-direction:column;justify-content:center;text-align:center}.hero-card h2{font-size:2rem;margin-bottom:12px}.eyebrow{color:var(--green);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;margin-bottom:8px}.large-copy{font-size:1.3rem;font-weight:700}.muted{color:var(--muted);line-height:1.7}.primary-button,.secondary-button{width:100%;min-height:68px;border:0;border-radius:16px;font-weight:800;font-size:1.28rem;display:grid;place-items:center;text-decoration:none;cursor:pointer}.primary-button{color:#fff;background:var(--green);margin-top:26px}.primary-button:hover{background:#11563e}.primary-button:disabled,.primary-small:disabled{opacity:.45;cursor:not-allowed}.secondary-button{color:var(--navy);background:#e8eef4;margin-top:14px}.text-button{display:inline-block;margin-top:24px;color:var(--navy);font-size:1.05rem;font-weight:700}.notice{padding:15px 18px;margin:18px 0 0;border-radius:14px;background:#eef3f8;color:var(--navy-dark);line-height:1.6}.notice.success{background:var(--green-soft);color:var(--green)}.notice.error{background:var(--red-soft);color:var(--red)}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translate(-50%);width:min(680px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--border);padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -12px 30px #19283714}.bottom-nav button{min-height:68px;background:none;border:0;color:var(--muted);font-size:1rem;font-weight:800;border-radius:12px;cursor:pointer}.bottom-nav button.active{color:var(--navy);background:#edf2f7}.section-heading{margin:8px 4px 20px}.stack{display:grid;gap:14px}.schedule-card h3{margin-bottom:8px}.schedule-card .large-copy{margin-bottom:6px}.form-card form{display:grid;gap:20px}.form-card label:not(.choice){display:grid;gap:8px;font-size:1.08rem;font-weight:700}.form-card input[type=date],.form-card input[type=time]{width:100%;min-height:58px;padding:10px 14px;border:2px solid var(--border);border-radius:12px;background:#fff;font-size:1.08rem}.form-card fieldset{display:grid;gap:10px;border:0;padding:0;margin:0}.form-card legend{margin-bottom:10px;font-weight:800}.choice{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px;border:2px solid var(--border);border-radius:12px;font-size:1.05rem}.choice input{width:24px;height:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payslip-summary{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;cursor:pointer;color:inherit}.payslip-summary span{font-size:1.15rem;font-weight:700}.payslip-summary strong{font-size:1.3rem;color:var(--green)}.payslip-summary small{color:var(--muted)}.back-button{border:0;background:none;color:var(--navy);font-weight:700;padding:0 0 24px;cursor:pointer}.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.pay-grid div{background:#f2f5f7;border-radius:14px;padding:16px}.pay-grid dt{color:var(--muted)}.pay-grid dd{margin:6px 0 0;font-weight:800}.pay-lines{border-top:1px solid var(--border)}.pay-lines div,.pay-total{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}.pay-total{font-size:1.35rem;color:var(--green);border-bottom:0;padding-top:24px}.help-notice{margin-top:18px;text-align:center;font-weight:700}.auth-shell{padding:20px;display:grid;place-items:center}.auth-shell main{width:100%;padding:0}.state-card{text-align:center;padding:clamp(26px,6vw,44px)}.state-card h1,.state-card h2{margin-bottom:14px}.state-icon{width:74px;height:74px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;background:var(--orange-soft);color:var(--orange);font-size:2rem;font-weight:900}.elder-steps{margin:24px 0;padding:0;list-style-position:inside;display:grid;gap:12px;text-align:left;line-height:1.65}.elder-steps li{padding:14px;border-radius:12px;background:#f1f5f8}.admin-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr;background:#f4f6f8}.sidebar{background:var(--navy-dark);color:#fff;padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 30px}.brand>span{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#f4b942;color:var(--navy-dark);font-weight:900;font-size:1.3rem}.brand div{display:grid}.brand small{opacity:.65}.sidebar nav{display:grid;gap:6px}.sidebar nav button{border:0;background:transparent;color:#ffffffb8;min-height:48px;border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;font-weight:600}.sidebar nav button:hover,.sidebar nav button.active{color:#fff;background:#ffffff1f}.sidebar>a{margin-top:auto;color:#fff;padding:14px;border:1px solid rgb(255 255 255 / 25%);border-radius:12px;text-decoration:none;text-align:center}.admin-main{padding:42px clamp(24px,4vw,64px);overflow:hidden}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.admin-heading h2{margin-bottom:0}.admin-heading .status-pill{background:#dfe8f0;color:var(--navy)}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px;margin-bottom:20px}.metric{min-height:130px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.metric span{color:var(--muted);font-weight:600}.metric strong{font-size:2.3rem}.metric.warning{background:var(--orange-soft);border-color:#e9c274}.metric.success{background:var(--green-soft);border-color:#a8d3bf}.admin-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:20px;box-shadow:0 4px 16px #1928370a}.task-list{line-height:2;padding-left:24px}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}th{color:var(--muted);font-size:.9rem;text-align:left;padding:12px 10px;border-bottom:1px solid var(--border)}td{padding:16px 10px;border-bottom:1px solid #edf0f2;vertical-align:top}.tag{display:inline-block;padding:5px 9px;border-radius:999px;background:#edf2f7;font-size:.82rem}.inline-actions{display:flex;flex-wrap:wrap;gap:8px}.inline-actions button,.primary-small{min-height:40px;border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:10px;padding:8px 13px;font-weight:700;cursor:pointer}.inline-actions .danger-link{color:var(--red)}.inline-actions .primary-small,.primary-small{border-color:var(--green);background:var(--green);color:#fff}.message-row{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--border)}.message-row p{margin:7px 0}.message-row small{color:var(--muted)}.line-link-list{display:grid;gap:18px}.line-link-guide .task-list,.line-link-card{margin-bottom:0}.line-link-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.line-link-heading h3{margin:10px 0 0}.line-link-heading small{color:var(--muted)}.message-history{margin:20px 0;border:1px solid var(--border);border-radius:14px;overflow:hidden}.message-history p{display:grid;grid-template-columns:1fr auto;gap:16px;margin:0;padding:14px 16px;border-bottom:1px solid var(--border)}.message-history p:last-child{border-bottom:0}.message-history small{color:var(--muted);font-size:.8rem}.admin-field{display:grid;gap:8px;margin-top:20px;font-weight:800}.admin-field select{width:100%;min-height:52px;padding:10px 12px;border:2px solid var(--border);border-radius:10px;background:#fff}.identity-check{display:grid;gap:7px;margin-top:16px;padding:16px;border-radius:12px;background:#eef3f8}.identity-check strong{color:var(--navy-dark);font-size:1.15rem}.confirm-panel{margin-top:18px;padding:18px;border:2px solid #e2b85f;border-radius:14px;background:var(--orange-soft)}.confirm-panel p{line-height:1.6}.line-link-actions{margin-top:18px}.empty-state{text-align:center;padding-block:42px}.workflow{display:flex;align-items:center;gap:8px;overflow-x:auto;margin:-8px 0 24px}.workflow span{white-space:nowrap;background:#e7ebef;color:var(--muted);border-radius:999px;padding:8px 14px;font-size:.88rem;font-weight:700}.workflow span.done{background:var(--green-soft);color:var(--green)}.upload-zone{border:2px dashed #aab7c3;border-radius:16px;padding:28px;margin:20px 0;display:grid;gap:8px;text-align:center;background:#f8fafb}.upload-zone input{margin:0 auto;max-width:100%}.upload-zone small{color:var(--muted)}.validation-panel{border-radius:18px;padding:24px;margin:20px 0;border:1px solid}.validation-panel.valid{background:var(--green-soft);border-color:#97c9b2}.validation-panel.invalid{background:var(--red-soft);border-color:#e4aaaa}.validation-panel .issue{background:#fff9;border-radius:10px;padding:10px 12px}.validation-panel .issue.error{color:var(--red)}.validation-panel .issue.warning{color:var(--orange)}.publish-bar{position:sticky;bottom:16px;background:var(--navy-dark);color:#fff;border-radius:18px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow)}.publish-bar p{margin:3px 0 0;opacity:.7}@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}}@media(max-width:760px){.admin-shell{display:block}.sidebar{position:static;height:auto;padding:18px}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebar>a{margin-top:16px;display:block}.brand{padding-bottom:18px}.admin-main{padding:24px 16px 100px}.metric-grid{grid-template-columns:1fr 1fr}.message-row,.publish-bar,.line-link-heading{align-items:stretch;flex-direction:column}.message-history p{grid-template-columns:1fr;gap:5px}}@media(max-width:480px){.employee-header{display:block}.employee-header .status-pill{margin-top:14px}.employee-shell main{padding:14px}.card{padding:20px;border-radius:18px}.form-grid,.pay-grid{grid-template-columns:1fr}.bottom-nav button{font-size:.95rem}.metric-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
