@import"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{color-scheme:light;--primary: #204c7c;--primary-dim: #17395f;--on-primary: #ffffff;--primary-container: #d4e6f7;--on-primary-container: #071b2f;--primary-fixed-dim: #93badf;--accent: #bf6a3f;--accent-soft: #f4e3d8;--on-accent-soft: #4b2411;--secondary: #5d6777;--secondary-container: #e4ebf4;--on-secondary-container: #15202d;--error: #ba1a1a;--error-container: #ffdad6;--on-error: #ffffff;--on-error-container: #410002;--background: #f4f1ec;--surface: #f7f5f1;--surface-container-lowest: #ffffff;--surface-container-low: #f0ebe4;--surface-container: #e6e0d8;--surface-container-high: #ddd5cb;--surface-container-highest: #d0c6ba;--on-surface: #24303a;--on-surface-variant: #687178;--outline-variant: #afb3b1;--warning-container: #fff3dd;--on-warning-container: #7a4c16;--font-display: "Manrope", "Noto Sans TC", sans-serif;--font-body: "Instrument Sans", "Noto Sans TC", sans-serif;--display-sm-size: 1.5rem;--display-sm-weight: 800;--headline-lg-size: 2rem;--headline-lg-weight: 700;--headline-md-size: 1.5rem;--headline-md-weight: 700;--title-lg-size: 1.25rem;--title-lg-weight: 700;--title-md-size: 1.0625rem;--title-md-weight: 700;--title-sm-size: .9375rem;--title-sm-weight: 600;--body-md-size: .875rem;--body-md-weight: 400;--body-sm-size: .8125rem;--body-sm-weight: 400;--label-lg-size: .875rem;--label-lg-weight: 500;--label-md-size: .75rem;--label-md-weight: 500;--spacing-1: .35rem;--spacing-2: .7rem;--spacing-3: 1.05rem;--spacing-4: 1.4rem;--spacing-5: 1.75rem;--spacing-6: 2.1rem;--spacing-7: 2.45rem;--spacing-8: 2.8rem;--spacing-9: 3.15rem;--spacing-10: 3.5rem;--spacing-12: 4.2rem;--spacing-16: 5.6rem;--rounded-sm: .25rem;--rounded-md: .375rem;--rounded-lg: .75rem;--rounded-xl: 1rem;--rounded-2xl: 1.25rem;--rounded-full: 9999px;--shadow-ambient: 0 10px 40px -10px rgba(43, 52, 55, .08);--shadow-modal: 0 16px 48px -12px rgba(43, 52, 55, .14);--transition-fast: .15s cubic-bezier(.2, 0, 0, 1);--transition-normal: .25s cubic-bezier(.2, 0, 0, 1)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at top left,rgba(191,106,63,.08),transparent 26rem),radial-gradient(circle at top right,rgba(32,76,124,.12),transparent 32rem),var(--background);color:var(--on-surface);font-family:var(--font-body);font-size:var(--body-md-size);font-weight:var(--body-md-weight);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--on-surface);line-height:1.3}h1{font-size:var(--headline-lg-size);font-weight:var(--headline-lg-weight)}h2{font-size:var(--title-lg-size);font-weight:var(--title-lg-weight)}p{line-height:1.65}a{color:var(--primary);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.8}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(43,91,181,.18);outline-offset:2px}button,input,select,textarea{font:inherit;color:inherit}input,select,textarea{width:100%;padding:var(--spacing-2) var(--spacing-3);background:var(--surface-container-lowest);border:1px solid rgba(171,179,183,.2);border-radius:var(--rounded-md);font-size:var(--body-md-size);color:var(--on-surface);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}input:focus,select:focus,textarea:focus{border-color:#2b5bb566;box-shadow:0 0 0 3px #2b5bb514}input::placeholder,textarea::placeholder{color:var(--outline-variant)}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-3) center;padding-right:var(--spacing-8)}button{cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.5}.ui-button{--button-bg: linear-gradient(135deg, var(--primary), var(--primary-dim));--button-color: var(--on-primary);--button-border: transparent;--button-shadow: 0 10px 24px -14px rgba(43, 91, 181, .58);--button-hover-shadow: 0 16px 32px -18px rgba(43, 91, 181, .54);--button-pressed-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);--button-translate-y: 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);min-height:2.5rem;padding:var(--spacing-2) var(--spacing-5);border-radius:var(--rounded-md);border:1px solid var(--button-border);background:var(--button-bg);color:var(--button-color);box-shadow:var(--button-shadow);font-size:var(--body-md-size);font-weight:600;line-height:1.2;text-decoration:none;transform:translateY(var(--button-translate-y));transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)}.ui-button:hover:not(:disabled){--button-translate-y: -1px;box-shadow:var(--button-hover-shadow)}.ui-button:active:not(:disabled),.ui-button.ui-button--pressed:not(:disabled){--button-translate-y: 1px;box-shadow:var(--button-pressed-shadow)}.ui-button--primary{--button-bg: linear-gradient(135deg, var(--primary), var(--primary-dim));--button-color: var(--on-primary);--button-border: rgba(26, 78, 168, .4);--button-shadow: 0 10px 24px -14px rgba(43, 91, 181, .58);--button-hover-shadow: 0 16px 32px -18px rgba(43, 91, 181, .54);--button-pressed-shadow: inset 0 2px 4px rgba(0, 27, 62, .24)}.ui-button--secondary{--button-bg: rgba(214, 227, 255, .42);--button-color: var(--primary);--button-border: rgba(43, 91, 181, .2);--button-shadow: 0 6px 18px -16px rgba(43, 52, 55, .25);--button-hover-shadow: 0 10px 24px -18px rgba(43, 91, 181, .32);--button-pressed-shadow: inset 0 1px 2px rgba(43, 91, 181, .12)}.ui-button--tertiary{--button-bg: var(--surface-container-high);--button-color: var(--on-surface);--button-border: rgba(171, 179, 183, .24);--button-shadow: 0 6px 18px -16px rgba(43, 52, 55, .24);--button-hover-shadow: 0 10px 24px -18px rgba(43, 52, 55, .26);--button-pressed-shadow: inset 0 1px 2px rgba(43, 52, 55, .12)}.ui-button--danger{--button-bg: linear-gradient(135deg, #ed6a5f, #d74236);--button-color: var(--on-primary);--button-border: rgba(164, 17, 17, .35);--button-shadow: 0 10px 24px -14px rgba(186, 26, 26, .38);--button-hover-shadow: 0 16px 32px -18px rgba(186, 26, 26, .42);--button-pressed-shadow: inset 0 2px 4px rgba(65, 0, 2, .18)}.interactive-surface-control,.interactive-link-surface{--surface-control-bg: var(--surface-container-lowest);--surface-control-color: var(--on-surface);--surface-control-subtle: var(--on-surface-variant);--surface-control-border: rgba(171, 179, 183, .18);display:block;width:100%;border-radius:var(--rounded-lg);border:1px solid var(--surface-control-border);background:var(--surface-control-bg);color:var(--surface-control-color);text-decoration:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast)}.interactive-surface-control:hover:not(:disabled),.interactive-link-surface:hover{transform:translateY(-1px);border-color:#2b5bb53d;box-shadow:0 16px 32px -24px #2b343752}.interactive-surface-control:active:not(:disabled),.interactive-link-surface:active{transform:translateY(1px) scale(.996);box-shadow:inset 0 1px 2px #2b34371f}.interactive-surface-control.is-selected,.interactive-link-surface.is-selected{--surface-control-bg: var(--primary-fixed-dim);--surface-control-color: var(--on-primary-container);--surface-control-subtle: var(--on-primary-container);--surface-control-border: rgba(43, 91, 181, .18);box-shadow:var(--shadow-ambient)}.interactive-surface-title{color:var(--surface-control-color)}.interactive-surface-meta{color:var(--surface-control-subtle)}.hris-app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(264px,304px) minmax(0,1fr);gap:var(--spacing-6);padding:var(--spacing-5)}.hris-sidebar{position:sticky;top:var(--spacing-5);align-self:start;height:calc(100vh - var(--spacing-10));max-height:calc(100vh - var(--spacing-10));min-height:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--spacing-5);padding:var(--spacing-5);border-radius:var(--rounded-2xl);background:linear-gradient(180deg,#fffffff0,#ffffffdb),linear-gradient(140deg,#204c7c1f,#bf6a3f14);border:1px solid rgba(175,179,177,.24);box-shadow:0 20px 45px -28px #24303a4d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}.hris-sidebar__brand{display:flex;gap:var(--spacing-3);align-items:center}.hris-sidebar__brand-mark{width:3rem;height:3rem;display:grid;place-items:center;border-radius:1rem;background:linear-gradient(145deg,var(--primary),var(--accent));color:var(--on-primary);font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:.08em;box-shadow:0 16px 32px -22px #204c7cb8}.hris-sidebar__brand-copy{display:grid;gap:.125rem}.hris-sidebar__brand-copy strong{font-family:var(--font-display);font-size:1rem;font-weight:800;line-height:1.2}.hris-sidebar__brand-copy span,.hris-sidebar__section-label,.hris-sidebar__identity-label{color:var(--on-surface-variant);font-size:var(--label-md-size);letter-spacing:.08em;text-transform:uppercase}.hris-sidebar__nav{display:grid;gap:var(--spacing-2);align-content:start;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:var(--spacing-2);scrollbar-gutter:stable}.hris-sidebar__nav-item{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--spacing-3);align-items:start;padding:var(--spacing-3);border-radius:var(--rounded-xl);border:1px solid transparent;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.hris-sidebar__nav-item:hover{background:#ffffffb8;border-color:#204c7c24;transform:translate(2px)}.hris-sidebar__nav-item.is-active{background:linear-gradient(140deg,#204c7c1f,#bf6a3f1a);border-color:#204c7c33;box-shadow:0 14px 28px -24px #24303a73}.hris-sidebar__nav-glyph{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:.9rem;background:#ffffffc7;color:var(--primary);font-family:var(--font-display);font-size:.95rem;font-weight:800}.hris-sidebar__nav-copy{display:grid;gap:.2rem;text-align:left}.hris-sidebar__nav-copy strong{font-size:var(--body-md-size);font-weight:700;color:var(--on-surface)}.hris-sidebar__nav-copy span{color:var(--on-surface-variant);font-size:var(--body-sm-size);line-height:1.55}.hris-sidebar__footer{display:grid;gap:var(--spacing-3)}.hris-sidebar__identity{display:grid;gap:var(--spacing-1);padding:var(--spacing-3);border-radius:var(--rounded-xl);background:#ffffffc7}.hris-sidebar__identity strong{word-break:break-all}.hris-sidebar__footer-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.hris-main-shell{min-width:0;position:sticky;top:var(--spacing-5);align-self:start;height:calc(100vh - 2 * var(--spacing-5));display:grid;grid-template-rows:auto 1fr;gap:var(--spacing-5);padding:var(--spacing-3) var(--spacing-3) 0 0}.hris-main-shell__hero{display:flex;justify-content:space-between;gap:var(--spacing-4);align-items:center;flex-wrap:nowrap;padding:var(--spacing-4) var(--spacing-6);border-radius:var(--rounded-2xl);background:linear-gradient(145deg,#204c7ceb,#17395feb),radial-gradient(circle at right top,rgba(191,106,63,.34),transparent 16rem);color:var(--on-primary);box-shadow:0 24px 50px -30px #17395fb3}.hris-main-shell__hero-content{display:grid;gap:var(--spacing-2);max-width:50rem}.hris-main-shell__eyebrow{font-size:var(--label-md-size);letter-spacing:.12em;text-transform:uppercase;opacity:.74}.hris-main-shell__hero h1{margin:0;color:var(--on-primary);font-size:clamp(1.85rem,3vw,2.75rem)}.hris-main-shell__hero p{margin:0;color:#ffffffd6;max-width:42rem}.hris-main-shell__hero-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-2);justify-content:flex-end}.hris-main-shell__chip{display:inline-flex;align-items:center;min-height:2rem;padding:0 var(--spacing-3);border-radius:var(--rounded-full);background:#ffffff24;color:var(--on-primary);font-size:var(--body-sm-size);font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hris-main-shell__chip.is-muted{background:#ffffff14}.hris-main-shell__content{min-width:0}code{font-family:JetBrains Mono,Fira Code,monospace;font-size:.8125rem;background:var(--surface-container);padding:.15em .4em;border-radius:var(--rounded-sm)}pre{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--body-sm-size);background:var(--surface-container-low);padding:var(--spacing-4);border-radius:var(--rounded-lg);overflow-x:auto;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--outline-variant);border-radius:var(--rounded-full)}::-webkit-scrollbar-thumb:hover{background:var(--on-surface-variant)}ul.clean,ol.clean{list-style:none;padding:0}@media(max-width:1120px){.hris-app-shell{grid-template-columns:1fr}.hris-sidebar{position:static;height:auto;max-height:none;min-height:auto;overflow:visible}.hris-sidebar__nav{overflow:visible;padding-right:0;scrollbar-gutter:auto}.hris-main-shell{padding-right:0}}@media(max-width:720px){.hris-app-shell{gap:var(--spacing-4);padding:var(--spacing-3)}.hris-sidebar,.hris-main-shell__hero{padding:var(--spacing-4)}.hris-sidebar__footer-actions{display:grid}.hris-sidebar__footer-actions .ui-button{width:100%}}
