:root {
  color-scheme: light dark;
  --bg: #E9EDF0; --surface: #F8FAFB; --ink: #16222B; --muted: #566672; --line: #CBD4DA;
  --accent: #0E5A6E; --accent-ink: #FFFFFF;
  --p: #1B7347; --p-bg: #DCEFE4; --h: #8F5A00; --h-bg: #FAEAC6; --a: #AE3328; --a-bg: #F8D9D5; --sun: #E1E7EB;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F171D; --surface: #18232B; --ink: #E6EDF1; --muted: #92A2AE; --line: #2B3A44;
    --accent: #4DB6CF; --accent-ink: #06232B;
    --p: #62D193; --p-bg: #173626; --h: #F0B44C; --h-bg: #3A2D10; --a: #FF8C7F; --a-bg: #40201C; --sun: #1F2C35;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); padding: 20px max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left)); }
.wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
h1, h2 { margin: 0; line-height: 1.1; } h1 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; } h2 { font-size: 18px; }
a { color: var(--accent); }
.sub { color: var(--muted); margin: 0; } .pad { padding: 12px 0; }
.top { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; }
.who-am-i { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); }
.badge.soft { background: var(--sun); color: var(--muted); }
.note { background: var(--h-bg); color: var(--h); border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.note a { color: inherit; font-weight: 600; } .note.ok { background: var(--p-bg); color: var(--p); } .note.bad { background: var(--a-bg); color: var(--a); }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tabs a { padding: 12px 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .grow { flex: 1 1 200px; }
button, input, select { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 6px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.in { background: var(--p-bg); border-color: var(--p); color: var(--p); } .btn.out { background: var(--h-bg); border-color: var(--h); color: var(--h); }
.btn.danger { color: var(--a); border-color: var(--a); } .btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=time], select {
  min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 6px; min-width: 0; max-width: 100%;
}
.datebar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .datebar .long { font-weight: 800; font-size: 20px; flex: 1 1 100%; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.stat b { display: block; font: 500 22px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat.p b { color: var(--p); } .stat.h b { color: var(--h); } .stat.a b { color: var(--a); }
.dims { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dims label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg a, .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 6px; font-weight: 600; text-decoration: none; color: var(--ink); }
.seg a[aria-current], .chip[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 13px; } .chip small { font: 500 12px var(--mono); margin-left: 6px; opacity: .85; }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
.row { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); } .row:last-child { border-bottom: 0; }
.who { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; } .meta { color: var(--muted); font-size: 13px; }
.st { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: var(--sun); color: var(--muted); }
.st.on { background: var(--p-bg); color: var(--p); } .st.done { background: var(--h-bg); color: var(--h); } .st.bad { background: var(--a-bg); color: var(--a); }
.times { font: 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ctl { display: flex; flex-wrap: wrap; gap: 8px; } .ctl .btn { flex: 1 1 110px; } .ctl .btn.small { flex: 0 0 auto; }
details.edit { font-size: 13px; color: var(--muted); } details.edit summary { cursor: pointer; min-height: 28px; } details.edit form { margin-top: 8px; }
.empty { background: var(--surface); border: 1.5px dashed var(--line); border-radius: 8px; padding: 24px 18px; display: flex; flex-direction: column; gap: 10px; }
.empty p { margin: 0; color: var(--muted); max-width: 60ch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card.login { max-width: 420px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .field label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .field input, .field select { width: 100%; }
.mini { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); } .mini:last-child { border-bottom: 0; }
.wrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .wrow:last-child { border-bottom: 0; }
.gridbox { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table.muster { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; }
.muster th, .muster td { padding: 6px 7px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.muster thead th { font-weight: 600; color: var(--muted); font-size: 11px; background: var(--surface); } .muster thead th small { display: block; font-weight: 400; }
.muster .nm { position: sticky; left: 0; background: var(--surface); text-align: left; min-width: 130px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); font-weight: 600; }
.muster .sun { background: var(--sun); } .muster .cP, .cP { color: var(--p); font-weight: 600; } .muster .cH, .cH { color: var(--h); font-weight: 600; } .muster .cA, .muster .cQ, .cA { color: var(--a); font-weight: 600; } .muster .cN { color: var(--line); }
.muster .tot, .muster td.r { font: 13px var(--mono); font-variant-numeric: tabular-nums; } .muster .tot { border-left: 1px solid var(--line); } .muster td.l { text-align: left; font-weight: 600; } .muster tfoot td { font-weight: 600; border-bottom: 0; }
.legend { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 30; } .modal[hidden] { display: none; }
.modal .box { background: var(--surface); border-radius: 8px; padding: 14px; max-width: 480px; width: 100%; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.modal img, .shot video, .shot canvas { width: 100%; border-radius: 6px; display: block; background: #000; min-height: 120px; max-height: 60vh; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .btn, .chip { transition: background-color .12s, border-color .12s; } }

/* Modern sign-in screen */
.wrap:has(.login-shell) { max-width: 1080px; min-height: calc(100vh - 76px); justify-content: center; }
.wrap:has(.login-shell) > .top { display: none; }
.login-shell { display: grid; grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr); min-height: 590px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 70px rgba(19, 43, 54, .12); }
.login-visual { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 34px; color: #f5fbfd; background: linear-gradient(145deg, #123746 0%, #0e5a6e 58%, #147b83 100%); }
.login-visual:before { content: ""; position: absolute; z-index: -1; width: 390px; height: 390px; right: -170px; top: 140px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 72px rgba(255,255,255,.025); }
.brand-lockup { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.brand-lockup b { color: #8fe0d4; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.45); border-radius: 12px; background: rgba(255,255,255,.12); font-size: 23px; font-weight: 900; letter-spacing: -.06em; }
.visual-copy { max-width: 400px; margin-top: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #5ca9b8; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.login-visual .eyebrow { color: #a8e7df; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #83e0b4; box-shadow: 0 0 0 4px rgba(131,224,180,.13); }
.visual-copy h2 { margin: 19px 0 14px; font-size: clamp(32px, 3.4vw, 43px); line-height: 1.08; letter-spacing: -.045em; }
.visual-copy p { max-width: 340px; color: rgba(245,251,253,.76); font-size: 15px; line-height: 1.75; }
.visual-stat-row { display: grid; gap: 13px; margin-top: 18px; }
.visual-stat { display: flex; align-items: center; gap: 12px; }
.stat-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid rgba(255,255,255,.19); border-radius: 11px; color: #a8e7df; background: rgba(255,255,255,.08); font-size: 18px; font-weight: 800; }
.visual-stat b, .visual-stat small { display: block; }
.visual-stat b { font-size: 13px; }
.visual-stat small { margin-top: 2px; color: rgba(245,251,253,.65); font-size: 12px; }
.visual-grid { position: absolute; z-index: -1; right: -4px; bottom: 0; width: 200px; height: 160px; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(135deg, transparent, #000); }
.visual-footer { margin: 0; color: rgba(245,251,253,.5); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.login-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 62px); }
.login-heading { margin-bottom: 30px; }
.login-heading h2 { margin: 10px 0 9px; font-size: 31px; letter-spacing: -.04em; }
.login-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.mobile-brand { display: none; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-form .field { gap: 8px; }
.login-form .field label { color: var(--ink); font-size: 12px; font-weight: 750; letter-spacing: .07em; }
.login-form input[type=text], .login-form input[type=password] { width: 100%; min-height: 53px; padding: 0 15px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
.login-form input::placeholder { color: #8997a0; }
.login-submit { min-height: 54px; width: 100%; border-radius: 10px; display: flex; justify-content: space-between; padding: 0 18px; font-size: 15px; box-shadow: 0 6px 15px rgba(14,90,110,.16); }
.login-submit span:last-child { font-size: 22px; line-height: 1; transition: transform .15s; }
.login-submit:hover span:last-child { transform: translateX(3px); }
.login-help { display: flex; align-items: flex-start; gap: 11px; margin-top: 25px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 58%, var(--surface)); }
.help-icon { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; background: var(--sun); color: var(--muted); font-size: 12px; font-weight: 800; }
.login-help p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-help b { color: var(--ink); font-size: 13px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 24px 0 0; color: var(--muted); font-size: 11px; }
.login-security span { color: var(--p); }
@media (max-width: 760px) {
  body { padding: 14px 12px 28px; }
  .wrap:has(.login-shell) { min-height: calc(100vh - 42px); }
  .login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 17px; }
  .login-visual { display: none; }
  .login-main { padding: 30px 24px 26px; }
  .mobile-brand { display: inline-block; margin-bottom: 28px; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .13em; }
  .mobile-brand b { color: var(--accent); }
  .login-heading { margin-bottom: 25px; }
  .login-heading h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .login-form input, .login-submit span:last-child { transition: none; } }


/* Login page: responsive design matching the approved mobile/desktop mockup */
:root { color-scheme: light; }
body:has(.auth-page) { padding: 0; min-height: 100vh; background: #edf4f8; color: #10243a; }
.wrap:has(.auth-page) { max-width: none; min-height: 100vh; margin: 0; padding: clamp(12px, 3vw, 32px); display: flex; flex-direction: column; justify-content: center; gap: 0; }
.wrap:has(.auth-page) > .top { display: none; }
.auth-page { width: 100%; max-width: 1440px; margin: 0 auto; }
.auth-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: min(850px, calc(100vh - 64px)); overflow: hidden; background: #fff; border: 1px solid #e2eaf0; border-radius: 24px; box-shadow: 0 24px 70px rgba(15, 42, 65, .13); }
.auth-hero { position: relative; isolation: isolate; min-height: 620px; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 64px); color: #fff; background: #064d70 url('construction-hero.jpg') center 43% / cover no-repeat; }
.auth-hero:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, rgba(2, 42, 68, .91), rgba(4, 77, 112, .74) 52%, rgba(5, 35, 57, .46)); }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(3, 29, 48, .35), transparent 70%); }
.hero-brand { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 34px; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; background: rgba(255,255,255,.12); font-size: 34px; }
.hardhat-icon { display: inline-block; transform: rotate(180deg); }
.hero-copy { max-width: 500px; }
.hero-kicker, .auth-eyebrow { margin: 0 0 14px; font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .18em; }
.hero-kicker { color: #f9c74f; }
.hero-copy h1 { margin: 0; font-size: clamp(38px, 4.4vw, 66px); line-height: .99; font-weight: 850; letter-spacing: -.055em; }
.gold-rule { display: block; width: 66px; height: 5px; margin: 28px 0 22px; border-radius: 99px; background: #ffc247; }
.hero-subtitle { max-width: 370px; margin: 0; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.55; color: rgba(255,255,255,.9); }
.auth-content { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 64px); }
.auth-heading { margin-bottom: 28px; }
.auth-eyebrow { color: #0b7185; margin-bottom: 9px; }
.auth-heading h2 { margin: 0 0 8px; color: #10243a; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -.045em; }
.auth-heading > p:last-child { margin: 0; color: #62758a; font-size: 16px; }
.auth-form { display: flex; flex-direction: column; gap: 19px; }
.auth-form .field { gap: 8px; }
.auth-form .field label { color: #162e45; font-size: 14px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.input-icon { position: absolute; left: 17px; z-index: 1; color: #6c7f92; font-size: 22px; pointer-events: none; }
.auth-form .input-wrap input { width: 100%; min-width: 0; min-height: 62px; padding: 0 50px 0 54px; border: 1.5px solid #d4e0e9; border-radius: 12px; background: #fff; color: #10243a; font-size: 16px; box-shadow: inset 0 1px 2px rgba(12,39,61,.02); }
.auth-form .input-wrap input:focus { outline: none; border-color: #08758b; box-shadow: 0 0 0 4px rgba(8,117,139,.12); }
.auth-form .input-wrap input::placeholder { color: #8a9bad; }
.password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #62758a; cursor: pointer; font-size: 20px; }
.password-toggle:hover { background: #edf4f8; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 64px; margin-top: 2px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #08617a, #08758b); color: #fff; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(8,97,122,.18); transition: transform .15s, box-shadow .15s; }
.auth-submit span:last-child { font-size: 24px; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(8,97,122,.23); }
.auth-submit:focus-visible, .password-toggle:focus-visible { outline: 3px solid #f4bc42; outline-offset: 3px; }
.account-help { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 17px; border-radius: 14px; background: #eaf5ff; color: #174e78; }
.help-symbol { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #167ee8; color: #fff; font-size: 18px; font-weight: 800; }
.account-help strong { display: block; margin: 0 0 3px; font-size: 15px; }
.account-help p { margin: 0; color: #536d84; font-size: 13px; line-height: 1.5; }
.feature-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 28px; }
.feature { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 5px; padding: 0 8px; text-align: center; }
.feature + .feature { border-left: 1px solid #dce5ec; }
.feature-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; font-size: 26px; font-weight: 700; }
.attendance-icon { color: #09a67b; background: #e0f7ee; }
.photo-icon { color: #0877d1; background: #e6f2ff; }
.salary-icon { color: #c77a08; background: #fff1d5; }
.feature strong { color: #10243a; font-size: 13px; line-height: 1.3; }
.feature small { color: #64788d; font-size: 11px; line-height: 1.4; }
.privacy-note { margin: 23px 0 0; color: #75879a; text-align: center; font-size: 12px; }
.privacy-note span { color: #0b9b70; }
@media (max-width: 900px) {
 .wrap:has(.auth-page) { padding: 14px; }
 .auth-card { grid-template-columns: 1fr; min-height: 0; max-width: 620px; margin: 0 auto; border-radius: 22px; }
 .auth-hero { min-height: 250px; padding: 28px 28px 34px; background-position: center 40%; }
 .hero-brand { width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; font-size: 25px; }
 .hero-copy h1 { font-size: clamp(31px, 7vw, 43px); }
 .hero-kicker { margin-bottom: 8px; font-size: 10px; }
 .gold-rule { width: 48px; height: 4px; margin: 14px 0 11px; }
 .hero-subtitle { font-size: 14px; max-width: 300px; }
 .auth-content { padding: 27px 24px 24px; }
 .auth-heading { margin-bottom: 22px; }
 .auth-heading h2 { font-size: 32px; }
 .auth-heading > p:last-child { font-size: 14px; }
 .auth-form { gap: 16px; }
 .auth-form .input-wrap input { min-height: 56px; font-size: 16px; }
 .auth-submit { min-height: 58px; font-size: 17px; }
 .account-help { margin-top: 18px; padding: 14px; }
 .feature-row { margin-top: 23px; }
 .feature-icon { width: 46px; height: 46px; font-size: 22px; }
 .feature strong { font-size: 12px; }
 .feature small { font-size: 10px; }
 .privacy-note { margin-top: 18px; }
}
@media (max-width: 380px) {
 .wrap:has(.auth-page) { padding: 8px; }
 .auth-card { border-radius: 16px; }
 .auth-hero { min-height: 220px; padding: 22px 20px 26px; }
 .auth-content { padding: 23px 17px 20px; }
 .feature { padding: 0 4px; }
 .feature strong { font-size: 11px; }
 .feature small { font-size: 9px; }
 .account-help p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .auth-submit { transition: none; } }

/* Explicit login-page hooks: reliable even when :has() selectors are unsupported or cached CSS is stale. */
body.auth-body { padding: 0; min-height: 100vh; background: #edf4f8; color: #10243a; }
.wrap.auth-wrap { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: clamp(12px, 3vw, 32px); display: flex; flex-direction: column; justify-content: center; gap: 0; }
.auth-wrap > .auth-site-header { display: none !important; }
.auth-wrap .auth-page { width: 100%; max-width: 1440px; margin: 0 auto; }
.auth-wrap .auth-card { width: 100%; }
@media (max-width: 900px) { .wrap.auth-wrap { padding: 14px; } }
@media (max-width: 380px) { .wrap.auth-wrap { padding: 8px; } }

/* Comfortable Admin attendance review cards */
.approval-page { gap: 18px; }
.approval-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.approval-heading h2 { font-size:clamp(23px,3vw,30px); margin:5px 0 9px; letter-spacing:-.025em; }
.approval-heading .sub { max-width:680px; line-height:1.6; }
.approval-kicker { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; }
.approval-count { flex:0 0 145px; display:flex; flex-direction:column; gap:2px; padding:14px; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.approval-count strong { font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums; }
.approval-count span { font-weight:700; }
.approval-count small { color:var(--muted); margin-top:4px; }
.approval-filters { display:flex; flex-wrap:wrap; gap:8px; }
.approval-filters a { display:inline-flex; gap:8px; align-items:center; min-height:42px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-weight:700; text-decoration:none; }
.approval-filters a.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.approval-filters b { font-size:12px; padding:2px 7px; border-radius:999px; background:rgba(127,127,127,.16); }
.approval-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.approval-card { min-width:0; padding:18px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 4px 16px rgba(20,40,50,.04); }
.approval-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.approval-person { display:flex; align-items:center; gap:11px; min-width:0; }
.approval-avatar { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border-radius:13px; background:var(--p-bg); color:var(--p); font-size:20px; font-weight:800; }
.approval-person h3 { margin:0; font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.approval-person p { margin:3px 0; color:var(--muted); font-size:13px; }
.approval-date { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.approval-status { flex:0 0 auto; padding:5px 10px; border-radius:999px; background:var(--h-bg); color:var(--h); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.approval-status.approved { background:var(--p-bg); color:var(--p); }
.approval-status.rejected { background:var(--a-bg); color:var(--a); }
.approval-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.approval-fact { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.approval-fact > span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.approval-fact > strong { font-size:15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.approval-fact:last-child { grid-column:1/-1; }
.approval-evidence { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; }
.approval-evidence a { font-size:13px; font-weight:700; }
.approval-evidence small { color:var(--muted); }
.approval-evidence .evidence-missing { color:var(--a); }
.approval-action { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.approval-action label { font-size:12px; color:var(--muted); font-weight:800; }
.approval-action label span { font-weight:400; }
.approval-action input { width:100%; min-height:44px; }
.approval-buttons { display:flex; gap:9px; }
.approval-buttons .btn { flex:1; min-height:46px; }
.approval-reviewed { padding:11px 12px; border-radius:9px; background:var(--bg); color:var(--muted); font-size:13px; }
.approval-empty { padding:30px; }
@media(max-width:900px) { .approval-list { grid-template-columns:1fr; } .approval-heading { padding:18px; } }
@media(max-width:560px) { .approval-heading { flex-direction:column; } .approval-count { width:100%; flex-basis:auto; } .approval-card { padding:14px; gap:13px; } .approval-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .approval-filters a { justify-content:center; padding:0 8px; } .approval-buttons { flex-direction:column; } .approval-person h3 { font-size:16px; } }

/* Attendance approvals: simplified, comfortable responsive cards */
.approval-page{gap:18px}.approval-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 0 2px}
.approval-heading h2{font-size:clamp(22px,2.5vw,30px);margin:0 0 6px;letter-spacing:-.025em}.approval-heading .sub{font-size:14px;line-height:1.5;max-width:60ch}
.approval-count{flex:0 0 auto;min-width:94px;padding:12px 16px;border:1px solid var(--line);background:var(--surface);border-radius:12px;text-align:center}
.approval-count strong{display:block;font-size:27px;line-height:1.1;color:var(--accent)}.approval-count span{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:700}
.approval-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.approval-filters a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--muted);background:var(--surface);font-weight:650;font-size:13px}
.approval-filters a.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.approval-filters b{font-size:11px;padding:2px 6px;border-radius:999px;background:rgba(128,128,128,.15)}
.approval-list{display:grid;gap:14px}.approval-card{min-width:0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(20,40,55,.035);display:grid;gap:18px}
.approval-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.approval-person{min-width:0;display:flex;align-items:center;gap:12px}
.approval-person h3{margin:0 0 3px;font-size:18px;line-height:1.25}.approval-person p{margin:0 0 5px;color:var(--muted);font-size:13px}.approval-date{display:inline-block;color:var(--muted);font-size:12px;font-weight:650}
.approval-status{display:inline-flex;flex:0 0 auto;align-items:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--sun);color:var(--muted)}
.approval-status.pending{background:var(--h-bg);color:var(--h)}.approval-status.approved{background:var(--p-bg);color:var(--p)}.approval-status.rejected{background:var(--a-bg);color:var(--a)}
.approval-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.approval-fact{min-width:0;padding:12px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.approval-fact>span{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.045em;text-transform:uppercase}.approval-fact strong{font-size:16px;font-weight:750;overflow-wrap:anywhere}
.approval-evidence{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center}.approval-evidence a{font-size:13px;font-weight:700;text-decoration:none}.approval-evidence a:hover{text-decoration:underline}.approval-evidence small{color:var(--muted);font-size:11px}.approval-evidence .evidence-missing{color:var(--a)}
.approval-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding-top:15px;border-top:1px solid var(--line)}
.approval-action input{width:100%;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.approval-buttons{display:flex;flex-wrap:wrap;gap:8px}.approval-buttons .btn{min-height:44px;border-radius:8px;padding:0 16px}
.approval-reviewed{padding:12px 14px;background:var(--bg);border-radius:9px;color:var(--muted);font-size:13px}.approval-empty{align-items:center;text-align:center}
@media(max-width:680px){.approval-heading{align-items:flex-start}.approval-count{min-width:74px;padding:10px}.approval-card{padding:15px;gap:14px}.approval-facts{grid-template-columns:1fr 1fr}.approval-fact:last-child{grid-column:1/-1}.approval-action{grid-template-columns:1fr}.approval-buttons{display:grid;grid-template-columns:1fr 1fr}}


/* Global creator credit and software purchase contact */
.site-credit{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px;max-width:100%;margin:32px auto 14px;padding:20px 22px;background:linear-gradient(135deg,#fff,#f5f8fa);border:1px solid var(--line,#d7e0e5);border-radius:14px;box-shadow:0 4px 18px rgba(20,45,60,.06);color:var(--muted,#5b6b78);font-size:14px;text-align:left}
.credit-author,.credit-purchase{display:flex;align-items:center;gap:13px;min-width:0}
.credit-device{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:#edf2f5;color:#263746}
.credit-device svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.credit-copy,.purchase-copy{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.credit-label{font-size:12px;color:var(--muted,#5b6b78)}
.credit-copy strong{font-size:16px;color:var(--ink,#18252f);font-weight:750}
.credit-divider{height:42px;width:1px;background:var(--line,#d7e0e5)}
.credit-phone{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:#e1f5eb;color:#14834f}
.credit-phone svg{width:24px;height:24px;fill:currentColor}
.purchase-copy>span{font-size:12px;color:var(--muted,#5b6b78)}
.site-credit a{color:#075fc7;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
.site-credit a:hover{text-decoration:underline}
@media(max-width:600px){.site-credit{flex-direction:column;align-items:stretch;gap:14px;margin:24px 0 10px;padding:16px;border-radius:12px}.credit-divider{height:1px;width:100%}.credit-author,.credit-purchase{gap:12px}.credit-device,.credit-phone{width:42px;height:42px;flex-basis:42px}.credit-copy strong{font-size:15px}.site-credit a{font-size:16px}}


/* Hard-size footer icons to prevent oversized SVG rendering when other styles interfere. */
.site-credit{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:18px 26px;max-width:100%;width:100%;}
.site-credit .credit-device,.site-credit .credit-phone{box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;}
.site-credit .credit-device svg{display:block!important;width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important;flex:0 0 26px!important;}
.site-credit .credit-phone svg{display:block!important;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;max-width:24px!important;max-height:24px!important;flex:0 0 24px!important;}
.site-credit .credit-author,.site-credit .credit-purchase{display:flex;align-items:center;gap:13px;min-width:0;}
.site-credit .credit-copy,.site-credit .purchase-copy{display:flex;flex-direction:column;gap:2px;line-height:1.35;}
@media(max-width:600px){.site-credit{flex-direction:column;align-items:stretch;gap:14px}.site-credit .credit-device,.site-credit .credit-phone{flex-basis:42px;width:42px;height:42px;min-width:42px;min-height:42px}.site-credit .credit-device svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;flex-basis:24px!important}.site-credit .credit-phone svg{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important;flex-basis:22px!important}}


/* Mobile-safe worker attendance register: preserve columns and scroll horizontally. */
.daily-register { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.daily-register table { width:max-content; min-width:820px; border-collapse:separate; border-spacing:0; font-size:13px; }
.daily-register th,.daily-register td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.daily-register th { position:sticky; top:0; background:var(--surface); color:var(--muted); font-size:12px; font-weight:750; }
.daily-register tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface) 88%,var(--bg)); }
.daily-register tbody tr:last-child td { border-bottom:0; }

/* Footer uses a deliberate high-contrast palette in both light and dark device modes. */
.site-credit { background:#f8fafc !important; color:#40515f !important; border-color:#d5dee5 !important; }
.site-credit .credit-label,.site-credit .purchase-copy>span { color:#667787 !important; }
.site-credit .credit-copy strong { color:#172b3a !important; }
.site-credit .credit-device { background:#edf2f5 !important; color:#263746 !important; }
.site-credit .credit-phone { background:#e1f5eb !important; color:#14834f !important; }
.site-credit a { color:#075fc7 !important; }
@media(max-width:600px) {
  .daily-register table { min-width:820px; }
  .daily-register th,.daily-register td { padding:9px 10px; }
  .site-credit { align-items:stretch; }
  .site-credit .credit-copy strong { color:#172b3a !important; }
}


/* Professional branded footer */
.site-credit{
  display:block!important; box-sizing:border-box; width:100%; max-width:100%;
  margin:28px 0 12px; padding:0; overflow:hidden;
  background:linear-gradient(135deg,#fbfdff 0%,#f3f7fb 100%)!important;
  color:#52677d!important; border:1px solid #d5e0eb!important;
  border-radius:16px; box-shadow:0 8px 24px rgba(25,55,85,.07);
}
.site-credit .credit-main{
  display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,54px);
  padding:20px 28px;
}
.site-credit .credit-author,.site-credit .credit-purchase{
  display:flex; align-items:center; gap:14px; min-width:0; flex:1; justify-content:center;
}
.site-credit .credit-device,.site-credit .credit-phone{
  display:flex; align-items:center; justify-content:center; flex:0 0 54px;
  width:54px;height:54px;min-width:54px;min-height:54px;border-radius:16px;
}
.site-credit .credit-device{background:#e3f4fb!important;color:#0c6176!important}
.site-credit .credit-phone{background:#ddf7e9!important;color:#087b51!important}
.site-credit .credit-device svg,.site-credit .credit-phone svg{
  display:block!important;width:27px!important;height:27px!important;max-width:27px!important;
  max-height:27px!important;flex:0 0 27px!important;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.site-credit .credit-copy,.site-credit .purchase-copy{display:flex;flex-direction:column;gap:3px;line-height:1.35;min-width:0}
.site-credit .credit-label,.site-credit .purchase-copy>span{font-size:13px;color:#667c93!important;letter-spacing:.01em}
.site-credit .credit-copy strong{font-size:19px;font-weight:800;color:#12304c!important;letter-spacing:-.02em}
.site-credit .purchase-copy a{font-size:20px;font-weight:850;letter-spacing:.01em;color:#075fc7!important;text-decoration:none}
.site-credit .purchase-copy a:hover{text-decoration:underline}
.site-credit .credit-divider{display:block;width:1px;height:52px;background:#ccd8e5;flex:0 0 1px}
.site-credit .credit-tagline{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid #dce5ee;padding:12px 18px;text-align:center;
  font-size:13px;color:#647b91;line-height:1.45;
}
.site-credit .credit-tagline strong{font-weight:800;color:#183752}
.site-credit .tagline-separator{color:#9aabbc}
@media(max-width:650px){
 .site-credit{border-radius:13px;margin-top:22px}
 .site-credit .credit-main{flex-direction:column;align-items:stretch;gap:15px;padding:18px 16px}
 .site-credit .credit-author,.site-credit .credit-purchase{justify-content:flex-start}
 .site-credit .credit-divider{width:100%;height:1px;flex:0 0 1px}
 .site-credit .credit-device,.site-credit .credit-phone{flex-basis:46px;width:46px;height:46px;min-width:46px;min-height:46px;border-radius:13px}
 .site-credit .credit-device svg,.site-credit .credit-phone svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;flex-basis:24px!important}
 .site-credit .credit-copy strong,.site-credit .purchase-copy a{font-size:18px}
 .site-credit .credit-tagline{gap:6px;padding:11px 12px;font-size:12px}
}