:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#202020;background:#f7f7f7;font-synthesis:none;--brand:#b51f2b;--muted:#686868;--line:#e5e5e5;--paper:#fff;--accent:#d9b85c}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--brand)}button{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--brand);padding:10px 15px;font-weight:600;transition:background .15s}button:hover{background:#fff3f3}button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}button.primary:hover{background:#921824}button.danger{color:#a31927}button.small{font-size:12px;padding:6px 9px}.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}.sidebar{background:#171717;color:#f5f5f5;padding:32px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;font-size:21px;letter-spacing:-.8px;font-weight:700;margin:0 10px 40px}.brand .mark{display:grid;place-items:center;border-radius:9px;width:35px;height:35px;background:var(--accent);color:var(--brand);font-size:23px}.brand small{font-weight:400;opacity:.72}.nav-label{font-size:10px;letter-spacing:1.7px;text-transform:uppercase;color:#d9b85c;margin:23px 12px 10px}.nav{display:flex;flex-direction:column;gap:4px}.nav button{display:flex;align-items:center;gap:12px;border:none;color:#dedede;background:transparent;text-align:left;font-size:13px;font-weight:500;padding:12px;border-radius:7px}.nav button .symbol{font-size:17px;width:22px;text-align:center}.nav button.active{background:#d9b85c;color:#171717;font-weight:700}.nav button:hover{background:#332326}.nav button.active:hover{background:#d9b85c}.sidebar-bottom{margin-top:auto;border-top:1px solid #414141;padding:23px 10px 0;font-size:12px;line-height:1.7}.sidebar-bottom strong{display:block;color:#ffffff}.sidebar-bottom button{background:transparent;color:#f5f5f5;border-color:#777777;margin-top:10px}.main{min-width:0}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.topbar strong{color:#292929;font-weight:500}.topbar .avatar{width:31px;height:31px;background:#faedc9;display:inline-grid;place-items:center;border-radius:50%;margin-left:13px;color:#705111;font-weight:700}.content{padding:34px 38px 48px;max-width:1700px;margin:auto}.eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}h1{font-size:30px;font-weight:600;letter-spacing:-1.1px;margin:0 0 9px}h2{font-size:17px;font-weight:600;margin:0}h3{font-size:14px;margin:0 0 13px}p{line-height:1.6}p.sub{font-size:13px;color:var(--muted);margin:0}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px}.card{border:1px solid var(--line);background:white;border-radius:10px;padding:22px}.card-label{font-size:12px;color:var(--muted);margin-bottom:17px;display:flex;justify-content:space-between;gap:9px}.card-value{font-size:27px;letter-spacing:-.8px;font-weight:600}.card-foot{font-size:11px;color:var(--muted);margin-top:12px}.card.featured{background:#fff5d9;border-color:#e5c56d}.card .tiny-icon{font-size:16px;color:#927018}.panel{border:1px solid var(--line);background:#fff;border-radius:10px;margin-bottom:22px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid var(--line)}.panel-head p{margin:6px 0 0;color:var(--muted);font-size:12px}.panel-body{padding:24px}.toolbar{display:flex;align-items:end;gap:13px;flex-wrap:wrap;padding:17px 24px;border-bottom:1px solid var(--line);background:#fdfdfd}.toolbar label{font-size:11px;font-weight:500;display:grid;gap:6px}.toolbar input,.toolbar select{font-size:12px;padding:9px;min-width:140px}.toolbar .search{margin-left:auto;min-width:220px}.scroll-table{overflow:auto;max-height:580px}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;white-space:nowrap}th{font-weight:600;font-size:10px;letter-spacing:.45px;text-transform:uppercase;background:#f5f5f5;color:#626262;position:sticky;top:0;z-index:1}td,th{padding:15px 20px;border-bottom:1px solid #ededed;vertical-align:middle}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fffaf0}td .name{display:block;font-weight:600;color:#292929;margin-bottom:5px}td small{color:#6b6b6b;font-size:10px}.number{font-variant-numeric:tabular-nums}.money-link{border:0;padding:0;background:transparent;font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:12px}.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;border-radius:20px;padding:5px 9px;background:#fff0c4;color:#755313}.badge.pending{background:#fff4dd;color:#795414}.badge.rejected{background:#ffeded;color:#a31927}.badge.neutral{background:#f0f0f0;color:#606060}.empty{text-align:center;padding:55px 20px;white-space:normal;color:var(--muted);font-size:13px}.empty strong{display:block;color:#292929;font-size:16px;margin-bottom:9px}.panel-foot{display:flex;justify-content:space-between;gap:15px;padding:16px 24px;background:#fcfcfc;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.notice{border:1px solid #e9d6a2;background:#fffbf0;padding:15px 18px;border-radius:8px;font-size:12px;color:#73591f;margin-bottom:22px;line-height:1.7}.notice.success{background:#fff6de;color:#6f5015;border-color:#e8d29a}.notice ul{max-height:160px;overflow:auto;padding-left:20px}.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{counter-increment:step;display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6}.steps li:before{content:counter(step);flex-shrink:0;display:grid;place-items:center;background:#faedc9;color:#765417;width:26px;height:26px;border-radius:50%}.steps strong{display:block}.steps span{color:var(--muted)}.flow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 24px;color:var(--muted);font-size:11px}.flow span{color:#454545}.flow i{font-style:normal;color:#9a9a9a}input,select,textarea{border:1px solid #d6d6d6;border-radius:6px;background:white;color:#262626;padding:10px 11px;max-width:100%}input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px}textarea{min-height:85px;resize:vertical}dialog{border:1px solid var(--line);border-radius:13px;width:min(850px,calc(100vw - 32px));max-height:90vh;padding:0;box-shadow:0 25px 90px #0000002d;color:#242424}dialog::backdrop{background:#00000080;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:3;border-bottom:1px solid var(--line);padding:21px 25px}.dialog-body{padding:25px}.dialog-foot{display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:#fff;padding:18px 25px;border-top:1px solid var(--line);z-index:3}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}.field.full{grid-column:1/-1}.field small{font-weight:400;color:var(--muted);font-size:11px;line-height:1.6}.field.check{flex-direction:row;align-items:center;padding:8px 0;flex-wrap:wrap}.field.check small{width:100%}.field select[multiple]{min-height:140px}.form-section{grid-column:1/-1;border-bottom:1px solid var(--line);padding:15px 0 10px;font-size:14px}.form-error{color:#a31927;background:#fff0f1;padding:12px;border-radius:6px;margin-bottom:17px;font-size:12px}.hidden{display:none!important}.brackets{white-space:normal}.brackets td,.brackets th{padding:7px}.brackets input{width:100%;min-width:65px;padding:7px}.brackets th{position:static}.bracket-controls{margin-top:9px}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;font-size:12px}.details-grid dt{color:var(--muted);margin-bottom:5px}.details-grid dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.trace{white-space:normal;min-width:650px}.trace td{line-height:1.7}.trace .formula{font-size:11px;color:var(--muted);min-width:250px}.total-strip{display:flex;justify-content:space-between;background:#fff0c4;padding:19px 22px;border-radius:8px;font-size:13px;margin-top:20px}.total-strip strong{font-size:22px}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}.tabs button{font-size:12px;padding:8px 12px}.tabs .active{background:#fff0c4;border-color:#d9b85c}#toast{position:fixed;bottom:24px;right:24px;z-index:20;background:#232323;color:#fff;padding:14px 21px;border-radius:8px;box-shadow:0 6px 30px #0000002a;font-size:13px;display:none;max-width:440px}#toast.visible{display:block}.loading{padding:80px;text-align:center;color:var(--muted)}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:#171717;color:#ffffff;padding:70px;display:flex;flex-direction:column;justify-content:space-between}.login-story .brand{margin:0}.login-story h1{font-size:54px;line-height:1.13;font-weight:500;max-width:510px;letter-spacing:-2px}.login-story p{max-width:410px;color:#d0d0d0;font-size:15px}.login-art{border:1px solid #806128;border-radius:16px;max-width:410px;padding:24px;margin-top:35px;background:#351a1e}.login-art span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#e0c477}.login-art strong{display:block;font-size:28px;margin:20px 0}.login-art .bars{display:flex;gap:10px;align-items:flex-end;height:70px}.login-art i{flex:1;background:#d9b85c;border-radius:4px 4px 0 0;height:45%}.login-art i:nth-child(2){height:65%}.login-art i:nth-child(3){height:55%}.login-art i:nth-child(4){height:80%}.login-art i:nth-child(5){height:73%}.login-art i:nth-child(6){height:100%}.login-form{display:flex;align-items:center;justify-content:center;padding:45px}.login-form form{width:100%;max-width:370px}.login-form h2{font-size:28px;letter-spacing:-.8px;margin-bottom:13px}.login-form p{color:var(--muted);font-size:13px;margin-bottom:28px}.login-form label{display:grid;gap:8px;margin-bottom:20px;font-size:12px;font-weight:600}.login-form button{width:100%;margin-top:7px}.login-form .footnote{font-size:11px;margin-top:25px}.auth-brand{font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:28px}.wrap{white-space:normal;min-width:190px}.muted{color:var(--muted)}.legend{font-size:11px;color:var(--muted);line-height:1.7}.annual-bar{height:8px;background:#f0ece3;border-radius:9px;margin-top:14px}.annual-bar span{display:block;height:8px;background:#b51f2b;border-radius:9px;width:100%}@media(max-width:1150px){.shell{grid-template-columns:195px minmax(0,1fr)}.content{padding:26px 23px}.topbar{padding:0 23px}.cards{grid-template-columns:repeat(2,1fr)}.card-value{font-size:24px}.grid2{grid-template-columns:1fr}.sidebar{padding:28px 12px}.login-story{padding:45px}.login-story h1{font-size:42px}}@media(max-width:720px){.shell{display:block}.sidebar{height:auto;position:static;padding:17px}.brand{margin:0 0 17px}.nav{display:flex;flex-direction:row;overflow:auto}.nav button{flex-shrink:0}.nav-label,.sidebar-bottom{display:none}.topbar{height:56px}.content{padding:24px 15px}.page-heading{align-items:flex-start;flex-direction:column}h1{font-size:27px}.cards{gap:10px}.card{padding:16px}.card-value{font-size:22px}.form-grid{grid-template-columns:1fr}.field.full,.form-section{grid-column:auto}.panel-head,.toolbar{padding:17px}.toolbar .search{margin-left:0;width:100%}.login{display:block}.login-story{padding:28px;min-height:200px}.login-story h1{font-size:32px;margin-top:30px}.login-art,.login-story footer{display:none}.login-form{padding:35px 25px}.details-grid{grid-template-columns:1fr}.topbar .optional{display:none}}@media print{.sidebar,.topbar,.actions,.toolbar,button,#toast{display:none!important}.shell{display:block}.content{padding:0}.scroll-table{max-height:none;overflow:visible}dialog[open]{position:static;max-height:none;width:100%;border:0}.dialog-head{position:static}.dialog-foot{display:none}}

.brand{flex-direction:column;align-items:flex-start;gap:10px;font-size:12px;letter-spacing:.6px;margin:0 10px 24px}.brand-logo{display:block;width:126px;height:auto;background:#fff;border-radius:6px;padding:8px;object-fit:contain}.login-story .brand{flex-direction:row;align-items:center;gap:20px;font-size:16px}.sidebar{overflow-y:auto}@media(max-width:720px){.sidebar .brand{flex-direction:row;align-items:center;margin-bottom:17px}.sidebar .brand-logo{width:78px}.login-story .brand{font-size:13px}.login-story .brand-logo{width:100px}.topbar{gap:12px;font-size:10px}}
:root{--gold:#d9b85c}::selection{background:#f4dba0;color:#171717}:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.sidebar :focus-visible,.login-story :focus-visible{outline-color:var(--gold)}.brand{color:#fff}.nav button.active{box-shadow:inset 3px 0 0 #b51f2b}.login-story .eyebrow{color:var(--gold)}.login-art i:nth-child(2n){background:#c3333e}.card.featured .card-value{color:#202020}.sidebar-bottom button:hover{background:#332326}.profile-header{display:flex;align-items:center;gap:24px;padding:28px}.profile-header h2{font-size:25px;margin:5px 0}.profile-header p{color:#666;margin:8px 0}.profile-header>button{margin-left:auto}.employee-photo{width:88px;height:88px;object-fit:cover;border-radius:18px;border:2px solid #d9b85c;flex-shrink:0}.initials{display:grid;place-items:center;background:#fff4dd;color:#a91d29;font-size:38px;font-weight:700}.profile-summary{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:12px;color:#555}.profile-tabs{flex-wrap:wrap;gap:6px;margin:20px 0}.profile-tabs button{white-space:nowrap}.profile-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px;margin:0 0 20px;background:white;border:1px solid #eee;border-radius:12px}.profile-facts dt{font-size:12px;color:#666;margin-bottom:8px}.profile-facts dd{margin:0;overflow-wrap:anywhere;font-weight:600}.profile-content .panel{margin-bottom:20px}.profile-content .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.profile-content pre{max-width:440px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}.employee-link{text-align:left;background:none;border:0;padding:0;color:#a91d29;cursor:pointer}.employee-link:hover{text-decoration:underline}.profile-content .panel-foot{display:flex;align-items:center;gap:14px}.profile-save{font-size:12px;color:#777}@media(max-width:760px){.profile-header{align-items:flex-start;flex-wrap:wrap;padding:18px;gap:15px}.profile-header>button{margin-left:0}.profile-header h2{font-size:20px}.profile-facts{grid-template-columns:1fr 1fr;padding:18px}.profile-content .form-grid{grid-template-columns:1fr}.profile-tabs{overflow-x:auto;flex-wrap:nowrap}.profile-header .employee-photo{height:64px;width:64px}}
.employee-shell{background:#f8f7f5;min-height:100vh}.employee-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px max(24px,calc((100vw - 1120px)/2));background:#171717;color:white;border-bottom:3px solid #d9b85c}.employee-top>div{display:flex;flex-direction:column;gap:5px}.employee-top .eyebrow{color:#d9b85c}.employee-main{max-width:1168px;margin:auto;padding:30px 24px}.employee-main h1{font-size:30px}.employee-main>.tabs{flex-wrap:wrap;margin:22px 0}.employee-main .panel,.live-panel{margin-bottom:22px}.employee-main .form-grid,.portal-account-tools .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.employee-main textarea{min-height:110px}.clock-panel{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px}.clock-panel h2{font-size:28px;margin:8px 0}.clock-actions{display:flex;flex-direction:column;gap:12px;text-align:center;max-width:270px}.clock-actions button{font-size:22px;padding:16px 48px}.clock-actions small{color:#666;line-height:1.6}.sync-label{font-size:12px;color:#70612b}.late-reminder{padding:22px;margin-bottom:20px;border:1px solid #d9b85c;border-left:5px solid #b51f2b;background:#fff2df;border-radius:12px}.late-reminder strong{color:#a91d29}.portal-notifications{list-style:none;padding:8px 24px 20px;margin:0}.portal-notifications li{padding:14px 0;border-bottom:1px solid #eee}.portal-notifications small{display:block;color:#777;font-size:11px;margin-top:6px}.live-counts{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:18px}.live-counts button{padding:14px 8px;font-size:11px;white-space:normal}.live-counts strong{display:block;font-size:26px;margin-bottom:7px}.live-counts .active{background:#fff0c9;border-color:#d9b85c;color:#911a24}.attendance-map{width:100%;height:360px;margin-top:20px;border:1px solid #ddd;border-radius:10px}.employee-main pre{max-width:400px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}.secret-result{overflow-wrap:anywhere;padding:12px 0}.secret-result code{display:block;padding:15px;background:#fff4d6;color:#171717}.portal-account-tools{margin-top:20px}.portal-account-tools hr{margin:25px 0;border:0;border-top:1px solid #eee}.portal-account-tools p{margin:12px 0}.button{display:inline-block;padding:10px 16px;border:1px solid #d9b85c;border-radius:8px;color:#a91d29;text-decoration:none}.employee-main .panel-foot{display:flex;align-items:center;gap:15px}.employee-main .cards{margin:20px 0}@media(max-width:760px){.employee-main{padding:20px 14px}.employee-top{padding:16px}.employee-main h1{font-size:25px}.clock-panel{padding:20px;align-items:flex-start;flex-direction:column}.clock-actions{max-width:none;width:100%}.employee-main .form-grid,.portal-account-tools .form-grid{grid-template-columns:1fr}.live-counts{grid-template-columns:repeat(3,minmax(0,1fr))}.employee-main>.tabs{flex-wrap:nowrap;overflow-x:auto}.employee-main>.tabs button{white-space:nowrap}.employee-main .panel-foot{align-items:flex-start;flex-direction:column}.employee-top strong{font-size:13px}.employee-top button{font-size:11px}}
.portal-logo{height:52px;width:80px;object-fit:contain;background:white;border-radius:8px;padding:4px}.employee-top>div{margin-right:auto}
.employee-link small{display:block;margin-top:4px;color:#737373;font-size:10px;font-weight:400}
/* Consolidated employee profile: four accessible, independently expandable cards. */
:root{font-family:"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.profile-card-stack{display:grid;gap:20px}.profile-group{min-width:0;background:#fff;border:1px solid #e4dfd7;border-radius:16px;box-shadow:0 4px 18px #30200c05;overflow:hidden}.profile-group>summary{display:flex;align-items:center;gap:18px;padding:26px 28px;cursor:pointer;list-style:none}.profile-group>summary::-webkit-details-marker{display:none}.profile-group>summary:hover{background:#fffdf8}.profile-group[open]>summary{border-bottom:1px solid #eae5dc;background:#fffdf9}.profile-group-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border:1px solid #ecdcb4;border-radius:12px;background:#fff8e8;color:#922331}.profile-group-icon svg{width:24px;height:24px}.profile-group-title{min-width:0;flex:1}.profile-group-title strong{display:block;font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.2px}.profile-group-title small{display:block;font-size:13px;line-height:1.6;color:#706b65;margin-top:5px}.profile-chevron{width:24px;height:24px;flex-shrink:0;color:#87734c;transition:transform .15s}.profile-group[open]>summary .profile-chevron{transform:rotate(180deg)}.profile-group-body{padding:28px 32px}.profile-subsection+.profile-subsection{border-top:1px solid #e9e5de;padding-top:32px;margin-top:32px}.profile-group-body .panel{border:0;border-radius:0;margin-bottom:24px;overflow:visible;box-shadow:none}.profile-group-body .panel-head{padding:0 0 16px;border-bottom:1px solid #eee9e1}.profile-group-body .panel-head h2{font-size:16px;line-height:1.5}.profile-group-body .panel-body{padding:22px 0}.profile-group-body .panel-foot{padding:16px 0;background:transparent}.profile-group-body .form-grid{gap:24px 28px}.profile-group-body .field{font-size:13px;line-height:1.5;font-weight:600}.profile-group-body input,.profile-group-body select{padding:11px 12px;font-size:14px;font-weight:400}.profile-group-body .profile-facts{background:#faf9f7;border:0;padding:22px;gap:24px;margin:0 0 24px}.profile-group-body .profile-facts dd{font-size:14px;line-height:1.6}.profile-group-body .legend{font-size:12px}.profile-group-body td{font-size:13px;line-height:1.6}.profile-group-body th{font-size:11px}.profile-pay-period{border-bottom:1px solid #e9e5de}.profile-pay-period>summary{padding:20px 4px;cursor:pointer;font-size:14px;font-weight:600}.profile-pay-period>summary span{display:inline-block;margin-left:22px;color:#8a232c;font-size:13px}.profile-pay-body{padding:8px 0 24px}.profile-pay-body h3{margin:24px 0 14px;font-size:14px}.profile-net{padding:20px;background:#fff7e5;border-radius:10px;font-size:14px;line-height:1.8}.profile-formula{display:block;min-width:240px;max-width:420px;white-space:normal}.profile-group-body pre{max-width:100%;line-height:1.7}.profile-group-body .profile-subsection:last-child .panel:last-child{margin-bottom:0}
@media(max-width:760px){.profile-group>summary{padding:20px 16px;gap:12px}.profile-group-title strong{font-size:16px}.profile-group-title small{font-size:12px}.profile-group-icon{width:40px;height:40px}.profile-group-body{padding:22px 16px}.profile-group-body .form-grid{grid-template-columns:1fr;gap:20px}.profile-group-body .panel-head{align-items:flex-start;flex-wrap:wrap}.profile-group-body .profile-facts{grid-template-columns:1fr}.profile-pay-period>summary span{display:block;margin:8px 0 0}.profile-group-body .panel-foot{flex-wrap:wrap}.profile-subsection+.profile-subsection{padding-top:24px;margin-top:24px}}
.nav .symbol svg{display:block;width:18px;height:18px}.nav .symbol{display:inline-flex;align-items:center;justify-content:center}
.profile-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.profile-box{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-height:242px;padding:28px;text-align:left;background:#fff;border:1px solid #e4dfd7;border-radius:16px;color:#202020;box-shadow:0 4px 18px #30200c05;transition:border-color .15s,box-shadow .15s,background .15s}.profile-box:hover{background:#fffdf7;border-color:#d3b46c;box-shadow:0 8px 24px #30200c0b}.profile-box .profile-group-title{flex:1}.profile-box .profile-group-title small{font-weight:400}.profile-box-link{display:flex;align-items:center;gap:10px;font-size:12px;color:#972431}.profile-box-link svg{width:18px;height:18px}.profile-detail-heading{padding:26px 32px;border-bottom:1px solid #eae5dc;background:#fffdf9}.profile-detail-heading h2{font-size:22px;line-height:1.5;margin:22px 0 6px}.profile-detail-heading p{font-size:13px;color:#706b65;margin:0}.profile-detail-heading button{font-size:12px}@media(max-width:760px){.profile-box-grid{grid-template-columns:1fr;gap:16px}.profile-box{min-height:210px;padding:24px}.profile-detail-heading{padding:22px 16px}.profile-detail-heading h2{font-size:19px}}
.profile-box-grid{grid-template-columns:minmax(0,1fr);gap:18px}.profile-box{min-height:0;flex-direction:row;align-items:center;gap:20px;padding:26px 28px}.profile-box .profile-group-title{flex:1}@media(max-width:760px){.profile-box{min-height:0;padding:22px 18px;gap:16px}}
.profile-box{aspect-ratio:2 / 1;width:100%;min-height:0}@media(max-width:760px){.profile-box{aspect-ratio:2 / 1;min-height:0}}
.profile-box{aspect-ratio:auto;min-height:48px;padding:10px 16px;gap:12px}.profile-box-grid{gap:10px}.profile-box .profile-group-icon{width:28px;height:28px;border-radius:7px}.profile-box .profile-group-icon svg{width:18px;height:18px}.profile-box .profile-group-title strong{font-size:14px;line-height:1.4}.profile-box .profile-group-title small{display:none}@media(max-width:760px){.profile-box{aspect-ratio:auto;min-height:48px;padding:10px 14px;gap:12px}}
.profile-box-grid{width:25%}.profile-box{min-width:0}.profile-box .profile-group-title strong{overflow-wrap:anywhere}
.employee-welcome{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 34px;background:linear-gradient(110deg,#fffdf7,#fff3d5);border:1px solid #e9d5a1;border-radius:18px;margin:24px 0}.employee-welcome-copy{min-width:0}.employee-welcome h1{font-size:30px;line-height:1.35;margin:8px 0 12px;overflow-wrap:anywhere}.employee-welcome p{font-size:14px;color:#645d50;margin:0 0 12px}.employee-welcome small{font-size:12px;color:#786c55}.welcome-mascot{width:180px;height:196px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 8px 8px #7a460b14)}.employee-main>.employee-nav-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible}.employee-nav-cards button{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:68px;padding:16px 20px;font-size:14px;text-align:left;border-radius:12px;white-space:normal;background:#fff;box-shadow:0 3px 10px #25140704}.employee-nav-cards button.active{background:#fff1c5;border-color:#d2ac48;box-shadow:inset 0 -3px 0 #b51f2b}.employee-nav-emoji{font-size:27px;line-height:1;flex-shrink:0}.employee-nav-cards button:hover{background:#fff8e6;border-color:#d2ac48}@media(max-width:760px){.employee-welcome{padding:20px;gap:14px}.employee-welcome h1{font-size:23px}.welcome-mascot{width:110px;height:140px}.employee-main>.employee-nav-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.employee-nav-cards button{min-height:72px;padding:14px 12px;font-size:13px;gap:10px}.employee-nav-emoji{font-size:24px}}@media(max-width:420px){.employee-welcome{align-items:flex-start}.welcome-mascot{width:80px;height:108px}.employee-welcome h1{font-size:21px}.employee-welcome p{font-size:13px}}
.philippine-clock{display:flex;flex-direction:column;gap:7px;margin:18px 0;padding:18px 22px;background:#fffdf8;border:1px solid #e7d29d;border-radius:12px}.clock-zone{font-size:12px;font-weight:600;color:#856229;letter-spacing:.4px}.philippine-clock time{font-size:clamp(26px,4vw,42px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.2;color:#972431;white-space:nowrap}.clock-date{font-size:13px;color:#625a4c}@media(max-width:420px){.philippine-clock{padding:14px 10px}.philippine-clock time{font-size:24px;letter-spacing:0}.employee-welcome:has(.philippine-clock){flex-wrap:wrap}.employee-welcome:has(.philippine-clock) .employee-welcome-copy{flex:1;min-width:220px}}

.profile-header-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.profile-header-actions{margin-left:0;justify-content:flex-start}}
.contribution-table{border-top:1px solid var(--line);padding:10px 0}.contribution-table summary{cursor:pointer;font-weight:600;padding:4px 0}
.contribution-calc{max-width:280px}
.photo-slot{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.photo-upload{font-size:12px;color:var(--brand);cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fff}
.photo-upload:hover{border-color:var(--brand)}
.photo-upload:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.photo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.photo-upload{position:relative}
.topbar button[data-signout]{margin-left:10px}
.employee-top-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.employee-top>.employee-top-actions{flex-direction:row;gap:8px}

/* The message box as a popover (top layer): keep its corner position, no popover frame. */
#toast[popover]{inset:auto 24px 24px auto;margin:0;border:0;overflow:visible}#toast[popover]:popover-open{display:block}

/* Bell → documents to review: the Review buttons the bell led to */
.bell-target { outline: 3px solid var(--gold, #d4a017); outline-offset: 2px; animation: bell-target-pulse 1.2s ease-in-out 3; }
@keyframes bell-target-pulse { 50% { outline-offset: 5px; } }