* { box-sizing: border-box; }


.brand-logo { display: inline-flex; align-items: center; gap: 7px; color: #201b17; text-decoration: none; white-space: nowrap; }
.brand-logo-img { display: block; width: auto; height: 28px; max-width: min(220px, 72vw); object-fit: contain; }
.brand-logo-hero .brand-logo-img { height: 40px; max-width: min(300px, 82vw); }
@media (max-width: 640px) {
    .brand-logo-img { height: 26px; max-width: min(200px, 74vw); }
    .brand-logo-hero .brand-logo-img { height: 36px; max-width: min(260px, 82vw); }
}

.settings-notification-options .check {
    align-items: flex-start;
}

.settings-notification-coming {
    flex-wrap: wrap;
}

.settings-notification-coming small {
    display: block;
    width: 100%;
    margin-left: 26px;
    color: #777;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.settings-notification-device {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ededed;
}

.settings-notification-device strong {
    display: block;
    color: #222;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.settings-notification-device span {
    display: block;
    margin-top: 3px;
    color: #666;
    font-size: 12px;
    font-weight: 800;
}

.settings-notification-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.settings-notification-device [data-push-status] {
    grid-column: 1 / -1;
    margin: 0;
}

.settings-notification-device [data-push-status].error {
    color: #b91c1c;
    font-weight: 900;
}

@media (max-width: 720px) {
    .settings-notification-device {
        grid-template-columns: 1fr;
    }

    .settings-notification-actions {
        justify-content: stretch;
    }

    .settings-notification-actions button {
        flex: 1 1 100%;
    }
}
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; overflow: visible; }
.brand-mark-glass { fill: rgba(255, 255, 255, .70); stroke: rgba(255, 255, 255, .96); stroke-width: 2; filter: drop-shadow(0 9px 18px rgba(49, 41, 33, .13)); }
.brand-mark-card { fill: none; stroke: #433b33; stroke-width: 2.8; stroke-linecap: round; opacity: .80; }
.brand-mark-dot { fill: #8fb7e6; }
.brand-mark-dot.dot-main { fill: #e67f34; }
.brand-word { display: inline-flex; align-items: baseline; gap: 1px; color: #201b17; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 22px; font-weight: 850; line-height: 1; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .62); white-space: nowrap; }
.brand-word-local { color: #201b17; font-family: inherit; font-style: normal; font-weight: 900; letter-spacing: 0; transform: none; }
.brand-word-squad { color: #c86f2d; font-family: inherit; font-style: normal; font-weight: 850; letter-spacing: 0; text-transform: none; transform: none; }
.brand-logo-hero { margin-bottom: 18px; }
.brand-logo-hero .brand-mark { width: 44px; height: 44px; }
.brand-logo-hero .brand-word { font-size: 25px; }
.brand-logo-compact { justify-content: center; }
.brand-logo-compact .brand-mark { width: 34px; height: 34px; }
.brand-logo-compact .brand-word { font-size: 21px; }
@media (max-width: 640px) {
    .brand-logo-hero { margin-bottom: 14px; }
    .brand-logo-hero .brand-mark { width: 40px; height: 40px; }
    .brand-logo-hero .brand-word { font-size: 23px; }
    .brand-logo-compact .brand-mark { width: 32px; height: 32px; }
    .brand-logo-compact .brand-word { font-size: 20px; }
}
body { margin: 0; background: #fff; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page { width: min(1180px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.page-narrow { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { width: 100%; background: #fff; border: 1px solid #e7e7e7; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 22px; }
.employee-card { max-width: 440px; }
.login-card { max-width: 420px; }
.brand { font-size: 14px; font-weight: 700; color: #555; margin-bottom: 6px; }
h1 { margin: 0 0 22px; font-size: 28px; letter-spacing: 0; }
.field { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
.field-help { color: #666; font-size: 12px; font-weight: 600; line-height: 1.45; }
.field input, .field select, .edit-form input { width: 100%; height: 44px; border: 1px solid #d6d6d6; border-radius: 6px; padding: 0 12px; font: inherit; background: #fff; }
.compact input { min-width: 160px; }
.status-box { margin: 18px 0; padding: 18px; border: 1px solid #ececec; border-radius: 8px; background: #fafafa; }
.status-box strong { display: block; margin-top: 4px; font-size: 26px; }
.muted { color: #666; }
.small { font-size: 13px; }
.time-lines { display: grid; gap: 4px; margin-top: 14px; color: #333; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button, .button { border: 0; border-radius: 6px; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.primary { background: #111; color: #fff; }
.secondary { background: #efefef; color: #111; }
.danger { background: #c62828; color: #fff; }
.big { min-height: 76px; font-size: 22px; }
.small-button { min-height: 38px; font-size: 14px; }
.login-button { width: 100%; margin-top: 14px; }
.login-type-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
.login-type-toggle .button { min-height: 40px; border-radius: 999px; }
.auth-action-stack { display: grid; gap: 10px; margin-top: 18px; }
.auth-action-stack .button, .auth-action-stack .primary { width: 100%; }
.message, .notice { margin: 14px 0 0; font-weight: 700; }
.error { color: #c62828; }
.notice { padding: 12px 14px; border: 1px solid #d8ead8; border-radius: 8px; background: #f3fbf3; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.text-link { color: #111; font-weight: 800; }
.toolbar { margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.table-wrap { overflow-x: auto; border: 1px solid #e6e6e6; border-radius: 8px; }
.records-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 14px; }
.records-table th, .records-table td { padding: 12px; border-bottom: 1px solid #ededed; vertical-align: top; text-align: left; }
.records-table th { background: #f7f7f7; font-size: 13px; }
.time-cell { white-space: nowrap; line-height: 1.8; }
.edit-form { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; }
.edit-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.edit-form .check { display: flex; align-items: center; gap: 6px; }
.edit-form .check input { width: auto; height: auto; }
.badge { display: inline-flex; margin: 0 4px 5px 0; padding: 5px 8px; border-radius: 999px; background: #efefef; font-size: 12px; font-weight: 800; white-space: nowrap; }
.badge.warn { background: #fff3d5; }
.badge.ok { background: #e2f4e2; }

body.is-paid [data-hide-when-paid="true"] { display: none !important; }
.ad-slot {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d8d8d8;
    border-radius: 8px;
    background: #fafafa;
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
}
.ad-slot--employee-bottom {
    width: min(320px, calc(100vw - 48px));
    height: 100px;
    min-height: 100px;
    margin: 18px auto 0;
}
.ad-slot--admin-side {
    width: 350px;
    width: min(350px, 100%);
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}
.ad-slot--admin-mobile {
    display: none;
}

.status-badge.status-working, .mobile-status-pill.status-working { background: #f1e9ff; color: #6b3fb3; }
.status-badge.status-done, .mobile-status-pill.status-done { background: #e8f5ec; color: #2f6b45; }
.status-badge.status-deleted, .mobile-status-pill.status-deleted { background: #fdecec; color: #b42318; }
.status-badge.status-default, .mobile-status-pill.status-default { background: #efefef; color: #333; }
.empty { text-align: center; color: #777; padding: 30px; }
@media (max-width: 640px) {
    .page { padding: 16px 12px 36px; }
    .page-narrow { align-items: flex-start; }
    .card { padding: 18px; box-shadow: none; }
    h1 { font-size: 24px; }
    .button-grid { grid-template-columns: 1fr; }
    .admin-header { align-items: flex-start; }
    .filters { display: grid; }
    .filters .primary, .filters .button { width: 100%; }
}

.admin-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: -12px; font-size: 14px; font-weight: 800; }
.admin-nav span { color: #777; }
h2 { margin: 0 0 16px; font-size: 20px; letter-spacing: 0; }
h3 { margin: 22px 0 10px; font-size: 17px; letter-spacing: 0; }
textarea { width: 100%; border: 1px solid #d6d6d6; border-radius: 6px; padding: 10px 12px; font: inherit; resize: vertical; background: #fff; }
.employee-admin-card, .employee-list-card { margin-top: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.employee-form { display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.check-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; }
.check input { width: auto; height: auto; }
.contract-table-wrap { overflow-x: auto; border: 1px solid #e6e6e6; border-radius: 8px; }
.contract-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.contract-table th, .contract-table td { padding: 10px; border-bottom: 1px solid #ededed; text-align: left; vertical-align: middle; }
.contract-table th { background: #f7f7f7; }
.contract-table .time-input, .contract-table input[type="number"] { width: 100%; min-width: 86px; height: 38px; border: 1px solid #d6d6d6; border-radius: 6px; padding: 0 8px; font: inherit; background: #fff; }
.contract-table input:disabled { background: #f2f2f2; color: #888; }
.break-warning { display: block; margin-top: 4px; color: #c62828; font-size: 12px; font-weight: 800; }

.help-text { margin: -4px 0 10px; color: #555; font-size: 13px; font-weight: 700; line-height: 1.45; }
.input-invalid { border-color: #c62828 !important; background: #fff5f5 !important; }
.hidden,
[hidden] { display: none !important; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.summary-grid div { border: 1px solid #e8e8e8; border-radius: 8px; padding: 14px; background: #fafafa; }
.summary-grid span { display: block; margin-bottom: 6px; color: #666; font-size: 13px; font-weight: 700; }
.summary-grid strong { font-size: 20px; }
.employee-list-wrap .records-table { min-width: 920px; }
.inactive-row { color: #777; background: #fafafa; }
.actions-cell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions-cell form { margin: 0; }
@media (max-width: 760px) {
    .form-grid, .summary-grid { grid-template-columns: 1fr; }
    .section-head { align-items: flex-start; flex-direction: column; }
}

.signup-card { max-width: 760px; }
.auth-gap { margin-top: 12px; }
.auth-link-line { margin-top: 14px; }


body.login-body { min-height: 100vh; min-height: 100svh; background: linear-gradient(135deg, #fff7ee 0%, #f7fbff 46%, #fdf3f7 100%); overflow-x: hidden; }
.login-page { width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; padding: 28px 16px; background: linear-gradient(135deg, #fff7ee 0%, #f7fbff 46%, #fdf3f7 100%); position: relative; overflow-x: hidden; }
.login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 14% 14%, rgba(255, 183, 135, .42), transparent 32%), radial-gradient(circle at 86% 16%, rgba(179, 211, 255, .46), transparent 34%), radial-gradient(circle at 52% 88%, rgba(255, 226, 168, .34), transparent 36%); }
.unified-login-card { max-width: 430px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 26px; padding: 32px; background: rgba(255, 255, 255, .34); box-shadow: 0 28px 80px rgba(54, 43, 34, .18), 0 8px 24px rgba(74, 87, 110, .08), inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(255, 255, 255, .24); backdrop-filter: blur(34px) saturate(1.28); -webkit-backdrop-filter: blur(34px) saturate(1.28); position: relative; z-index: 1; }
.unified-login-card .login-card-head { display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.unified-login-card .login-brand { margin: 0; }
.unified-login-card h1 { display: none; }
.unified-login-card .login-type-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; padding: 5px; border: 1px solid rgba(255, 255, 255, .76); border-radius: 999px; background: rgba(255, 255, 255, .30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 8px 22px rgba(60, 48, 38, .06); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); }
.unified-login-card .login-type-toggle .button { min-height: 40px; border-radius: 999px; background: transparent; color: #6f655c; font-size: 14px; font-weight: 900; box-shadow: none; }
.unified-login-card .login-type-toggle .button.primary { background: rgba(255, 255, 255, .92); color: #171412; box-shadow: 0 9px 24px rgba(45, 39, 33, .12), inset 0 1px 0 rgba(255, 255, 255, .72); }
.unified-login-card .field { gap: 8px; color: #2c2926; font-size: 13px; }
.unified-login-card .field input { height: 48px; border: 1px solid #d8d2cc; border-radius: 14px; padding: 0 14px; background: #fff; color: #171412; font-size: 16px; font-weight: 700; box-shadow: 0 1px 2px rgba(38, 32, 26, .04); }
.unified-login-card .field input:focus { border-color: #ef8738; box-shadow: 0 0 0 3px rgba(239, 135, 56, .18), 0 2px 8px rgba(38, 32, 26, .06); outline: none; }
.unified-login-card .auth-gap { margin-top: 14px; }
.unified-login-card .login-help-text { margin: 0 0 14px; color: #51483f; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; }
.unified-login-card .login-button { min-height: 50px; margin-top: 18px; border-radius: 999px; background: #ef8738; color: #fff; font-size: 16px; box-shadow: 0 12px 28px rgba(239, 135, 56, .30); }
.unified-login-card .login-button:hover { background: #e47c2d; }
.unified-login-card .login-button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.unified-login-card .message, .unified-login-card .notice { border-radius: 14px; font-size: 13px; line-height: 1.45; }
.auth-link-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.auth-link-button { min-height: 42px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(255, 255, 255, .34); color: #51483f; font-size: 13px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 8px 20px rgba(60, 48, 38, .05); backdrop-filter: blur(14px) saturate(1.14); -webkit-backdrop-filter: blur(14px) saturate(1.14); }
.auth-link-button:hover { border-color: rgba(255, 255, 255, .88); color: #241f1a; background: rgba(255, 255, 255, .52); }
.login-google-auth { display: grid; gap: 12px; margin-top: 14px; }
.google-auth-button { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #202124; font-size: 15px; font-weight: 900; line-height: 1.2; box-shadow: 0 8px 20px rgba(60, 64, 67, .08); }
.google-auth-button:hover { border-color: #c6cbd1; background: #fff; color: #111827; box-shadow: 0 10px 24px rgba(60, 64, 67, .12); }
.google-auth-button:focus-visible { outline: 3px solid rgba(66, 133, 244, .22); outline-offset: 2px; }
.google-auth-icon { width: 18px; height: 18px; flex: 0 0 18px; display: block; }
.auth-divider { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; color: #7b7168; font-size: 12px; font-weight: 900; line-height: 1; }
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; background: rgba(92, 80, 68, .14); }
@supports (min-height: 100dvh) {
    body.login-body, .login-page { min-height: 100dvh; }
}
@media (max-width: 640px) {
    .login-page { align-items: center; padding: 14px 10px; }
    .unified-login-card { width: min(100%, 380px); padding: 22px 16px; border-radius: 22px; box-shadow: 0 20px 54px rgba(42, 35, 28, .14), inset 0 1px 0 rgba(255, 255, 255, .80); }
    .unified-login-card .login-card-head { margin-bottom: 18px; }
    .unified-login-card .login-brand { font-size: 21px; }
    .unified-login-card .login-type-toggle { margin-bottom: 18px; }
    .unified-login-card .field input, .unified-login-card .login-button { font-size: 16px; }
    .auth-link-actions { grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
}
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-meta { color: #555; font-size: 14px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) {
    .form-grid.two-col { grid-template-columns: 1fr; }
    .admin-meta { white-space: normal; }
}

.employee-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.code-card { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e7e7e7; border-radius: 8px; background: #fafafa; font-size: 14px; font-weight: 800; }
.code-card strong { font-size: 18px; }
@media (max-width: 640px) {
    .employee-topbar { flex-direction: column; }
}

.full-span { grid-column: 1 / -1; }
.help-field { gap: 8px; }
.help-box { padding: 12px 14px; border: 1px solid #e7e7e7; border-radius: 8px; background: #fafafa; color: #444; font-weight: 500; line-height: 1.55; }
.help-box p { margin: 0 0 6px; }
.help-box p:last-child { margin-bottom: 0; }
.code-card { display: grid; gap: 6px; }
.code-card .code-title { color: #555; font-size: 13px; }
.code-card p { margin: 0; color: #555; font-weight: 600; line-height: 1.5; }

.badge.danger-badge { background: #fde4e4; color: #9f1d1d; }
.form-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.location-form { margin-top: 14px; }
@media (max-width: 760px) {
    .form-grid.three-col { grid-template-columns: 1fr; }
}

.warn-notice { border-color: #f0dfb8; background: #fff8e7; }

.map-picker-wrap { display: grid; gap: 8px; }
.location-map { width: 100%; min-height: 320px; border: 1px solid #e1e1e1; border-radius: 8px; overflow: hidden; background: #f5f5f5; }
@media (max-width: 640px) {
    .location-map { min-height: 260px; }
}

.location-notice { display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.location-notice p { margin: 0; }


.today-records { display: grid; gap: 8px; margin-top: 14px; }
.today-records-title { font-size: 13px; font-weight: 900; color: #555; }
.today-segments { display: grid; gap: 6px; }
.today-segment-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #ececec; border-radius: 6px; background: #fff; font-size: 14px; }
.today-segment-row span { color: #666; font-weight: 900; }
.today-total { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; font-size: 14px; font-weight: 800; }
.single-action { grid-template-columns: 1fr; }



.records-toolbar { display: grid; gap: 10px; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-card { border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; background: #fff; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #ededed; }
.calendar-head h2 { margin: 0; font-size: 20px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays div { padding: 9px 8px; background: #f7f7f7; border-right: 1px solid #ededed; color: #555; font-size: 13px; font-weight: 900; text-align: center; }
.calendar-weekdays div:last-child { border-right: 0; }
.calendar-day { min-height: 132px; padding: 10px; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; color: #111; text-decoration: none; display: grid; align-content: start; gap: 5px; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day strong { font-size: 15px; }
.calendar-day span { font-size: 12px; font-weight: 800; color: #444; }
.calendar-day.has-records { background: #fcfcfc; }
.calendar-day.has-records:hover { background: #f5f5f5; }
.empty-day { background: #fafafa; }
.calendar-working { color: #6b3fb3 !important; }
.calendar-location-warning { color: #b42318 !important; }


.calendar-date-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.calendar-date-line strong { font-size: 15px; }
.calendar-employee-count { color: #777; font-size: 11px; font-weight: 800; }
.calendar-shift-entry.is-working { display: inline-flex; width: fit-content; max-width: 100%; padding: 2px 6px; border-radius: 999px; background: #f1e9ff; color: #6b3fb3 !important; }
.calendar-shift-list { display: grid; gap: 3px; min-width: 0; }
.calendar-shift-entry { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111 !important; font-size: 12px; font-weight: 800; }
.calendar-shift-entry.is-scheduled { color: #9a9a9a !important; font-weight: 700; }
.calendar-shift-entry.is-missing { color: #b42318 !important; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(180, 35, 24, .72); }
.calendar-shift-entry.is-extra { color: #111 !important; font-weight: 900; }
.calendar-extra-badge, .calendar-missing-label { display: inline-flex; align-items: center; min-height: 16px; margin-left: 3px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1; vertical-align: 1px; }
.calendar-extra-badge { background: #e7f0ff; color: #1f5fba; }
.calendar-holiday-badge { background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c; }
.calendar-missing-label { background: #fdecec; color: #b42318; text-decoration: none; }
.calendar-break-label { color: inherit; font-size: 11px; font-weight: 700; }
.calendar-more-button { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 22px; margin-top: 2px; padding: 2px 8px; border: 1px solid #dedede; border-radius: 999px; background: #fff; color: #555 !important; font-size: 12px; font-weight: 900; line-height: 1.2; cursor: pointer; }
.calendar-more-button:hover, .calendar-more-button:focus { border-color: #c9c9c9; background: #f5f5f5; color: #111 !important; outline: none; }
.calendar-day-modal-card { width: min(560px, 100%); max-height: min(720px, calc(100dvh - 36px)); overflow: auto; border-radius: 10px; }
.calendar-day-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.calendar-day-modal-head h2 { margin: 0; font-size: 20px; }
.calendar-day-modal-head p { margin: 0 0 4px; }
.calendar-day-modal-list { display: grid; gap: 7px; margin-bottom: 16px; }
.calendar-day-modal-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #ededed; border-radius: 8px; background: #fff; }
.calendar-day-modal-entry .calendar-shift-entry { display: block; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; }
.calendar-day-modal-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #f3f3f3; color: #555; font-size: 11px; font-weight: 900; white-space: nowrap; }
.calendar-day-modal-empty { margin: 0 0 16px; padding: 18px; border: 1px dashed #ddd; border-radius: 8px; text-align: center; }
.calendar-day-modal-card .modal-actions { grid-template-columns: 1fr; }

/* Admin records: compact table on desktop, readable cards on mobile. */
.alert-message { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 44px; }
.alert-close { position: absolute; top: 50%; right: 10px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; transform: translateY(-50%); border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; color: #333; font-size: 13px; font-weight: 900; line-height: 1; }
.error-message { border-color: #f0c7c7; background: #fff3f3; color: #a11919; }
.compact-records { display: table; width: 100%; min-width: 1080px; table-layout: fixed; border-collapse: collapse; }
.compact-records colgroup { display: table-column-group; }
.compact-records thead { display: table-header-group; }
.compact-records tbody { display: table-row-group; }
.compact-records tr { display: table-row; }
.compact-records th, .compact-records td { display: table-cell; padding: 9px 8px; border-bottom: 1px solid #ededed; vertical-align: middle; text-align: center; }
.compact-records th { background: #f7f7f7; font-size: 13px; font-weight: 800; white-space: nowrap; }
.compact-records .col-date { width: 12%; }
.compact-records .col-employee { width: 11%; }
.compact-records .col-shift { width: 6%; }
.compact-records .col-time { width: 8%; }
.compact-records .col-break { width: 7%; }
.compact-records .col-work { width: 8%; }
.compact-records .col-location { width: 17%; }
.compact-records .col-status { width: 10%; }
.compact-records .col-actions { width: 12%; }
.compact-records .date-cell, .compact-records .employee-name-cell { white-space: nowrap; }
.employee-name-cell strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-record-summary { display: none; }
.location-badges { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; max-width: 100%; }
.location-badges .badge, .status-cell .badge { margin: 0; }
.status-cell { line-height: 1.2; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; max-width: 100%; }
.manage-actions form { margin: 0; }
.manage-actions .small-button { min-height: 34px; padding: 0 10px; font-size: 13px; }
.payroll-summary-table .payroll-col-employee { width: 15%; }
.payroll-summary-table .payroll-col-days { width: 8%; }
.payroll-summary-table .payroll-col-time { width: 12%; }
.payroll-summary-table .payroll-col-money { width: 11%; }
.payroll-summary-table .payroll-col-status { width: 11%; }
.payroll-summary-table .payroll-col-actions { width: 21%; }
.payroll-summary-table .manage-actions { gap: 6px; justify-content: center; }
.payroll-summary-table .manage-cell { min-width: 160px; }
.payroll-confirmed-table .payroll-confirmed-col-employee { width: 12%; }
.payroll-confirmed-table .payroll-confirmed-col-period { width: 14%; }
.payroll-confirmed-table .payroll-confirmed-col-money { width: 10%; }
.payroll-confirmed-table .payroll-confirmed-col-date { width: 11%; }
.payroll-confirmed-table .payroll-confirmed-col-status { width: 7%; }
.payroll-confirmed-table .payroll-confirmed-col-reason { width: 13%; }
.payroll-confirmed-table .payroll-confirmed-col-actions { width: 23%; }
.payroll-confirmed-table .payroll-date-cell { white-space: nowrap; }
.payroll-confirmed-table .manage-actions { flex-wrap: nowrap; }
.payroll-confirmed-table .manage-cell { min-width: 220px; }
.payroll-tax-export-table .payroll-tax-export-col-check { width: 36px; min-width: 36px; max-width: 36px; }
.payroll-tax-export-table .payroll-tax-export-col-employee { width: 15%; }
.payroll-tax-export-table .payroll-tax-export-col-period { width: 190px; min-width: 190px; }
.payroll-tax-export-table .payroll-tax-export-col-time { width: 12%; }
.payroll-tax-export-table .payroll-tax-export-col-money { width: 12%; }
.payroll-tax-export-table .payroll-tax-export-col-type { width: 13%; }
.payroll-tax-export-table .payroll-tax-export-col-actions { width: 11%; }
.payroll-tax-export-table th:first-child, .payroll-tax-export-table td:first-child { width: 36px; min-width: 36px; max-width: 36px; text-align: center; padding-left: 4px; padding-right: 4px; }
.payroll-tax-export-table td[data-label="근무기간"] { min-width: 190px; white-space: nowrap; }
.payroll-tax-export-table .manage-cell { min-width: 88px; }
.payroll-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #d6d6d6; background: #f6f7f9; color: #2f3440; font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.payroll-action-button:hover { background: #eef0f3; }
.payroll-action-warning { border-color: #f0c36d; background: #fff3d5; color: #8a4b00; }
.payroll-action-warning:hover { background: #ffe7ad; }
.payroll-void-modal[hidden] { display: none; }
.payroll-void-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.payroll-void-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .44); }
.payroll-void-modal-card { position: relative; z-index: 1; width: min(440px, 100%); padding: 18px; border: 1px solid #d8dde5; border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgba(15, 23, 42, .24); }
.payroll-void-modal-card h3 { margin: 0 0 8px; font-size: 18px; }
.payroll-void-modal-card textarea { width: 100%; min-height: 96px; resize: vertical; }
.payroll-deposit-modal-card { width: min(92vw, 760px); max-width: 760px; }
.payroll-deposit-modal-card .table-wrap { overflow-x: auto; }
.payroll-deposit-table.records-table.compact-records { width: 100%; min-width: 680px; table-layout: fixed; }
.payroll-deposit-table th, .payroll-deposit-table td { white-space: nowrap; text-align: left; }
.payroll-deposit-table th:nth-child(1), .payroll-deposit-table td:nth-child(1) { width: 18%; }
.payroll-deposit-table th:nth-child(2), .payroll-deposit-table td:nth-child(2) { width: 18%; }
.payroll-deposit-table th:nth-child(3), .payroll-deposit-table td:nth-child(3) { width: 30%; font-size: 13px; overflow-wrap: anywhere; }
.payroll-deposit-table th:nth-child(4), .payroll-deposit-table td:nth-child(4) { width: 18%; }
.payroll-deposit-table th:nth-child(5), .payroll-deposit-table td:nth-child(5) { width: 16%; }
.payroll-deposit-table th:nth-child(5), .payroll-deposit-table td:nth-child(5) { text-align: right; }
.payroll-void-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.payroll-void-modal-error { margin: 8px 0 0; }
.admin-punch-inline, .compact-delete { display: inline-flex; margin: 0; vertical-align: middle; }


.records-table td .small-button,
.contract-table td .small-button,
.employee-table td .small-button,
.records-table td button,
.contract-table td button,
.employee-table td button,
.records-table td .button,
.contract-table td .button,
.employee-table td .button {
    min-height: 26px;
    min-width: 0;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.records-table td .danger.small-button,
.employee-table td .danger.small-button,
.contract-table td .danger.small-button { min-height: 26px; }
.records-table .manage-cell,
.records-table .actions-cell,
.employee-table .actions-cell,
.contract-table .actions-cell { vertical-align: middle; }
.records-table .manage-actions,
.records-table .actions-cell,
.employee-table .actions-cell,
.contract-table .actions-cell { gap: 4px; }
.records-table .manage-actions form,
.records-table .actions-cell form,
.employee-table .actions-cell form,
.contract-table .actions-cell form,
.records-table .admin-punch-inline,
.records-table .compact-delete { display: inline-flex; margin: 0; }
.compact-records .manage-actions { flex-wrap: nowrap; }
.compact-records .manage-actions .small-button { min-height: 26px; padding: 0 8px; border-radius: 999px; font-size: 11px; }
.record-edit-submit-form button { min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; }
@media (max-width: 760px) {
    .records-table td .small-button,
    .contract-table td .small-button,
    .employee-table td .small-button,
    .records-table td button,
    .contract-table td button,
    .employee-table td button,
    .records-table td .button,
    .contract-table td .button,
    .employee-table td .button { min-height: 28px; padding: 0 8px; font-size: 11px; }
    .compact-records .manage-actions { flex-wrap: wrap; justify-content: flex-end; }
}
.delete-button { background: #b92525; }
.compact-records .record-edit-row { display: none; }
.compact-records .record-edit-row.open { display: table-row; }
.compact-records .record-edit-row > td { display: table-cell; padding: 8px 6px; background: #fafafa; vertical-align: bottom; }
.compact-records .record-edit-row .edit-empty-cell { background: #fafafa; }
.record-edit-row label { display: grid; gap: 4px; min-width: 0; max-width: 100%; font-size: 12px; font-weight: 700; }
.record-edit-row label span { white-space: nowrap; }
.record-edit-row input { width: 100%; height: 36px; min-width: 0; max-width: 100%; border: 1px solid #d6d6d6; border-radius: 6px; padding: 0 8px; font: inherit; background: #fff; }
.record-edit-row .compact-input { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.record-edit-submit-form { margin: 0; display: flex; justify-content: flex-end; }
.record-edit-submit-form button { width: auto; min-width: 76px; max-width: 96px; white-space: nowrap; }
.rounding-policy-hint { margin: 0; line-height: 1.35; }
.rounding-policy-hint-cell { text-align: center; vertical-align: middle; }

@media (max-width: 768px) {
    .view-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .view-tabs .button { width: 100%; }
    .calendar-card { border: 0; overflow: visible; background: transparent; }
    .calendar-head { padding: 0 0 10px; border-bottom: 0; }
    .calendar-head .button { min-height: 38px; padding: 0 10px; }
    .calendar-weekdays { display: none; }
    .calendar-grid.calendar-days { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .calendar-day.empty-day { display: none; }
    .calendar-day { min-height: 0; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
    .calendar-day:nth-child(7n) { border-right: 1px solid #e5e5e5; }
    .calendar-day { grid-template-columns: 42px 1fr; align-items: start; }
    .calendar-date-line { grid-column: 1 / -1; }

    .table-wrap { overflow-x: visible; border: 0; border-radius: 0; }
    .records-table.compact-records { display: table; min-width: 0; border-collapse: separate; border-spacing: 0; }
    .compact-records colgroup, .compact-records thead { display: none; }
    .compact-records tbody, .compact-records tr, .compact-records td { display: block; width: 100%; }
    .compact-records .record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
    .compact-records .record-row td { padding: 0; border: 0; text-align: left; }
    .compact-records .record-row td::before { content: none; }
    .compact-records .record-row td:not(.date-cell):not(.manage-cell) { display: none; }
    .compact-records .date-cell { grid-column: 1; white-space: normal; min-width: 0; }
    .compact-records .desktop-cell-value { display: none; }
    .compact-records .mobile-record-summary { display: grid; gap: 5px; min-width: 0; }
    .mobile-record-top { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; line-height: 1.3; }
    .mobile-record-line { display: flex; flex-wrap: wrap; gap: 3px 5px; align-items: center; color: #333; font-size: 12px; font-weight: 700; line-height: 1.4; }
    .mobile-status-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; background: #efefef; font-size: 11px; font-weight: 900; line-height: 1; }
    .compact-records .manage-cell { grid-column: 2; grid-row: 1; align-self: start; }
    .compact-records .manage-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 148px; }
    .compact-records .manage-actions button, .compact-records .manage-actions .button { min-height: 28px; padding: 0 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
    .compact-records .manage-actions form { width: auto; }
    .compact-records .record-edit-row { display: none; margin: -4px 0 10px; padding: 10px 12px; border: 1px solid #e5e5e5; border-top: 0; border-radius: 0 0 8px 8px; background: #fafafa; }
    .compact-records .record-edit-row.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .compact-records .record-edit-row td { display: block; padding: 0; border: 0; background: transparent; }
    .compact-records .record-edit-row .edit-empty-cell { display: none; }
    .compact-records .record-edit-row .edit-reason-cell, .compact-records .record-edit-row .edit-action-cell { grid-column: 1 / -1; }
    .compact-records .record-edit-row td::before { content: none; }
    .record-edit-submit-form button { width: auto; min-width: 76px; max-width: 96px; min-height: 34px; margin-left: auto; border-radius: 999px; font-size: 11px; }
}

.payroll-deposit-modal-card .table-wrap { overflow-x: auto; }
.payroll-deposit-table.records-table.compact-records { display: table; width: 100%; min-width: 680px; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.payroll-deposit-table.compact-records thead { display: table-header-group; }
.payroll-deposit-table.compact-records tbody { display: table-row-group; }
.payroll-deposit-table.compact-records tr { display: table-row; }
.payroll-deposit-table.compact-records th,
.payroll-deposit-table.compact-records td { display: table-cell; width: auto; padding: 9px 10px; border-bottom: 1px solid #ededed; white-space: nowrap; }
.payroll-deposit-table.compact-records td::before { content: none; }

.employee-page { max-width: 1120px; }
.employee-card-wide { width: 100%; }
.connect-company-card { margin: 14px 0 18px; padding: 14px; border: 1px solid #e7e7e7; border-radius: 8px; background: #fafafa; }
.connect-company-card h2 { margin: 0 0 6px; font-size: 18px; }
.inline-connect-form { display: flex; gap: 10px; align-items: end; margin-top: 10px; }
.inline-connect-form .compact-field { flex: 1; margin: 0; }
.inline-connect-form button { width: auto; min-width: 112px; }
.employee-card-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.work-company-card { flex: 0 0 min(360px, 88vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.work-card-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.work-card-head h2 { margin: 0 0 4px; font-size: 20px; }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.card-status-box { padding: 12px; }
.compact-location-notice { padding: 10px; font-size: 13px; }
.pending-card-notice { margin: 0; }
.leave-company-form { margin: 0; text-align: right; }
.text-button { border: 0; background: transparent; padding: 4px 0; min-height: 0; color: #555; font-size: 13px; font-weight: 800; cursor: pointer; }
.danger-text { color: #b42318; }

@media (max-width: 768px) {
    .employee-page { padding-left: 14px; padding-right: 14px; }
    .employee-card-strip { margin-left: -2px; margin-right: -2px; }
    .inline-connect-form { display: grid; grid-template-columns: 1fr; }
    .inline-connect-form button { width: 100%; }
    .work-company-card { flex-basis: 88vw; }
}

.dismissible-alert { position: relative; padding-right: 52px; }
.employee-admin-card.form-collapsed .employee-form { display: none; }
.section-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
@media (max-width: 768px) {
    .section-actions { width: 100%; justify-content: stretch; }
    .section-actions .button, .section-actions button { flex: 1 1 auto; }
}

.employee-table .actions-cell { gap: 5px; align-items: center; }
.employee-table .actions-cell form { display: inline-flex; }
.employee-action-button { min-height: 26px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.employee-table td { vertical-align: middle; }
.employee-table .badge { padding: 4px 7px; font-size: 11px; }
@media (max-width: 760px) {
    .employee-table .actions-cell { gap: 4px; }
    .employee-action-button { min-height: 28px; padding: 0 8px; font-size: 11px; }
}

.account-reset-box { padding: 12px; border: 1px solid #ececec; border-radius: 8px; background: #fafafa; }
.account-reset-box h3 { margin-top: 0; }
.personal-mismatch-box { display: grid; gap: 10px; }
.personal-compare-list { display: grid; gap: 8px; }
.personal-compare-list div { display: grid; gap: 3px; }
.personal-compare-list span { color: #555; font-size: 13px; font-weight: 700; }

.connect-company-compact { display: grid; gap: 10px; justify-items: center; margin-top: 4px; }
.connect-company-compact > button { min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.compact-connect-panel { width: min(520px, 100%); margin: 0 auto; }
.connect-company-card-open { margin-top: 14px; }
.employee-table { table-layout: fixed; }
.employee-table th, .employee-table td { vertical-align: middle; }
.employee-table th:nth-child(1), .employee-table td.employee-name-col { width: 16%; text-align: left; }
.employee-table th:nth-child(2), .employee-table td.employee-contact-col { width: 20%; text-align: left; }
.employee-table td.employee-center-col { text-align: center; }
.employee-table th:nth-child(3), .employee-table th:nth-child(5), .employee-table td.nowrap-cell { text-align: center; white-space: nowrap; }
.employee-table th:nth-child(6), .employee-table td.employee-wage-col { text-align: center; white-space: nowrap; }
.employee-table th:nth-child(7), .employee-table td.employee-contract-col { text-align: center; }
.employee-table th:nth-child(8), .employee-table td.employee-actions-col { text-align: center; }
.employee-table .employee-name-col strong, .employee-table .employee-contact-col { overflow-wrap: anywhere; }
.employee-actions-col { justify-content: center; max-width: 100%; }
.employee-actions-col form { margin: 0; }
.employee-action-button { min-height: 24px; padding: 0 7px; }
@media (max-width: 760px) {
    .employee-list-wrap { overflow-x: visible; border: 0; }
    .employee-list-wrap .employee-table { min-width: 0; border-collapse: separate; border-spacing: 0; }
    .employee-list-wrap .employee-table thead { display: none; }
    .employee-list-wrap .employee-table tbody, .employee-list-wrap .employee-table tr, .employee-list-wrap .employee-table td { display: block; width: 100%; }
    .employee-list-wrap .employee-table tr { margin-bottom: 10px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
    .employee-list-wrap .employee-table td { padding: 3px 0; border: 0; text-align: left; }
    .employee-list-wrap .employee-table td.employee-center-col, .employee-list-wrap .employee-table td.employee-wage-col, .employee-list-wrap .employee-table td.employee-contract-col { text-align: left; }
    .employee-list-wrap .employee-table td.employee-actions-col { display: flex; justify-content: flex-start; padding-top: 8px; }
}

/* Employee ID-card commute UI */
.employee-page { max-width: 520px; min-height: 100vh; }
.employee-page .employee-card-wide { box-shadow: none; border: 0; padding: 18px 0 28px; }
.employee-page .employee-topbar { padding: 0 16px; margin-bottom: 10px; }
.id-card-slider { width: 100%; }
.id-card-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 18px 12px; scrollbar-width: none; }
.id-card-track::-webkit-scrollbar { display: none; }
.id-card,
.id-card-add { position: relative; flex: 0 0 min(86vw, 360px); height: auto; min-height: clamp(430px, 64dvh, 540px); max-height: calc(100dvh - 180px - env(safe-area-inset-bottom)); overflow: hidden; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 3.4dvh, 22px) 18px clamp(16px, 3dvh, 20px); border: 1px solid #e5e5e5; border-radius: 24px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.10); text-align: center; color: #111; }
.id-card-header { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 38px; }
.id-card-company { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 900; }
.id-card-close { position: absolute; top: 16px; right: 16px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid #e4e4e4; border-radius: 999px; background: #fafafa; color: #777; font-size: 20px; line-height: 1; }
.id-card-close:hover, .id-card-close:active { border-color: #f4caca; background: #fff1f1; color: #b42318; }
.id-card-main { display: grid; place-items: center; flex: 1 1 auto; min-height: 0; padding: clamp(12px, 3dvh, 24px) 0 clamp(8px, 2dvh, 14px); }
.id-card-status-circle { width: clamp(190px, 58vw, 240px); height: clamp(190px, 58vw, 240px); min-height: 0; border: 0; border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.08); color: #111; }
button.id-card-status-circle { cursor: pointer; }
.id-card-status-ready { background: #eef5f7; }
.id-card-status-working { background: #f1e9ff; color: #5b3a9e; }
.id-card-status-done { background: #e8f5ec; color: #2f6b45; }
.id-card-status-pending { background: #f4f4f4; color: #666; }
.id-card-status-text { font-size: 20px; font-weight: 900; animation: idCardPulse 2.4s ease-in-out infinite; }
.id-card-action-text { font-size: 15px; font-weight: 900; opacity: .78; }
.id-card-note { max-width: 230px; margin: 10px auto 0; color: #666; font-size: 13px; font-weight: 800; line-height: 1.45; }
.id-card-footer { display: grid; gap: clamp(4px, 1dvh, 8px); justify-items: center; align-content: end; width: 100%; min-width: 0; flex: 0 0 auto; min-height: clamp(92px, 17dvh, 124px); }
.id-card-meta-pills { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.id-card-location { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: #f3f3f3; color: #555; font-size: 11px; font-weight: 900; }
.id-card-segment { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; font-size: 12px; font-weight: 800; }
.id-card-user-name { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; font-weight: 900; }
.id-card-user-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; font-size: 13px; font-weight: 700; }
.id-card-add { border-style: dashed; background: #fbfbfb; cursor: pointer; align-items: center; justify-content: center; gap: 14px; }
.id-card-add-plus { width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; color: #222; font-size: 56px; font-weight: 600; line-height: 1; }
.id-card-add strong { font-size: 21px; font-weight: 900; }
.id-card-add span:last-child { max-width: 210px; color: #666; font-size: 13px; font-weight: 800; line-height: 1.45; }
.id-card-dots { display: flex; justify-content: center; gap: 7px; padding: 2px 0 8px; }
.id-card-dot { width: 7px; height: 7px; border-radius: 999px; background: #d7d7d7; transition: width .2s ease, background .2s ease; }
.id-card-dot.active { width: 18px; background: #111; }
.modal-layer { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.38); }
.modal-layer.open { display: flex; }
.modal-card { width: min(420px, 100%); padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.modal-card h2 { margin-bottom: 8px; }
.modal-form { display: grid; gap: 14px; margin-top: 14px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-message { margin-top: 10px; }
.admin-profile-modal-card { width: min(460px, 100%); border-radius: 8px; }

.employee-card-toast { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 1400; max-width: min(360px, calc(100vw - 28px)); padding: 10px 14px; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 900; line-height: 1.25; text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,.18); pointer-events: none; animation: employeeToastFade 2.6s ease forwards; }
.employee-card-toast.success { background: #1f6f43; }
.employee-card-toast.error { background: #b42318; }
@keyframes employeeToastFade { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes idCardPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes noticeButtonPulse { 0%, 100% { background: #f2f3f5; box-shadow: none; } 50% { background: #ffd6d6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .16); } }
@keyframes noticeToastFade { 0%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .id-card-status-text, .id-card-notice-button.has-unread, .id-card-notice-toast { animation: none; } .id-card-dot { transition: none; } }
@media (min-width: 769px) { .employee-page { max-width: 1120px; } .employee-page .employee-card-wide { padding-left: 0; padding-right: 0; } .id-card { flex-basis: 340px; } .id-card-track { justify-content: flex-start; } }
@media (max-width: 380px) { .id-card, .id-card-add { min-height: clamp(360px, 58dvh, 470px); padding-left: 14px; padding-right: 14px; } .id-card-status-circle { width: clamp(168px, 52vw, 180px); height: clamp(168px, 52vw, 180px); } .id-card-user-name { font-size: 20px; } }

.payroll-admin-card { padding-top: 0; overflow: hidden; }
.payroll-subtabs { display: inline-flex; flex-wrap: wrap; align-items: center; width: auto; max-width: calc(100% - 32px); margin: 16px 16px 12px; padding: 4px; gap: 4px; border: 1px solid #e5e7eb; border-radius: 14px; background: #f3f4f6; }
.payroll-subtabs .button { width: auto; min-height: 34px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #4b5563; font-size: 13px; font-weight: 800; line-height: 1; box-shadow: none; }
.payroll-subtabs .button.primary { background: #fff; color: #111827; box-shadow: 0 1px 3px rgba(15, 23, 42, .10); }
.payroll-subtabs .button.secondary:hover { background: #e9ecef; color: #111827; }
.payroll-admin-card > .records-filter-form { padding: 0 0 16px; }
.records-filter-form { display: grid; gap: 8px; align-items: stretch; }
.records-filter-main { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.filter-button-group { display: inline-flex; align-items: center; gap: 6px; }
.filter-button-group button { min-height: 40px; }
.payroll-filter-main { align-items: flex-end; gap: 8px 10px; }
.payroll-date-fields { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 8px; }
.payroll-date-fields .field { display: inline-flex; grid-template-columns: none; align-items: center; gap: 6px; min-height: 40px; }
.payroll-date-fields .field span { color: #555; font-size: 12px; font-weight: 900; white-space: nowrap; }
.payroll-date-fields .field input { width: 140px; min-width: 140px; height: 40px; }
.payroll-period-buttons { align-self: flex-end; flex-wrap: nowrap; gap: 5px; }
.payroll-period-buttons button { min-width: 58px; padding: 0 10px; }
.payroll-history-check { min-height: 40px; padding: 0 2px; white-space: nowrap; }
.payroll-filter-submit { min-height: 40px; padding-left: 18px; padding-right: 18px; }
.payroll-filter-actions { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.payroll-filter-actions .button,
.payroll-filter-actions button { min-height: 40px; }
.payroll-deposit-open { padding: 0 14px; border: 1px solid #e3b06f; background: #fff8ec; color: #8a4b00; font-size: 13px; font-weight: 900; white-space: nowrap; }
.payroll-deposit-open:hover { background: #ffefd1; }
.payroll-employee-filter select { width: 220px; min-width: 180px; max-width: 220px; }
.csv-mode-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0 0; border: 0; background: transparent; }
.csv-mode-title { font-size: 12px; font-weight: 900; color: #555; }
.radio-inline { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; font-weight: 800; white-space: nowrap; }
.radio-inline input { width: auto; margin: 0; }
.csv-mode-help { flex-basis: 100%; margin: 0; color: #666; line-height: 1.45; }
#recordsEmployeeSelect:disabled { color: #999; background: #f3f3f3; cursor: not-allowed; }
@media (max-width: 768px) {
    .records-filter-main { display: grid; grid-template-columns: 1fr; }
    .filter-button-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .filter-button-group button { width: 100%; }
    .payroll-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .payroll-date-fields .field { display: grid; gap: 5px; min-height: 0; }
    .payroll-date-fields .field input { width: 100%; min-width: 0; }
    .payroll-period-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .payroll-history-check { min-height: 34px; width: fit-content; }
    .payroll-employee-filter select { width: 100%; min-width: 0; max-width: none; }
    .payroll-filter-actions { width: 100%; }
    .payroll-filter-submit { flex: 1 1 130px; }
    .payroll-deposit-open { flex: 1 1 130px; }
    .csv-mode-box { align-items: flex-start; }
    .radio-inline { white-space: normal; }
}

@media (max-width: 768px) {
    .payroll-admin-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }
    .payroll-subtabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: auto;
        max-width: none;
        margin: 12px;
    }
    .payroll-subtabs .button {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
        text-align: center;
        white-space: normal;
    }
    .payroll-admin-card > .records-filter-form {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 12px 14px;
    }
    .payroll-filter-main,
    .payroll-date-fields,
    .payroll-employee-filter,
    .payroll-filter-actions,
    .payroll-tax-export-download {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .payroll-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .payroll-filter-submit,
    .payroll-deposit-open,
    .payroll-tax-export-download {
        width: 100%;
        min-width: 0;
    }
    .payroll-summary-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
        border: 0;
        border-radius: 0;
        padding: 0 12px 12px;
    }
    .payroll-summary-wrap .records-table.compact-records {
        display: block;
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .payroll-summary-wrap .compact-records colgroup {
        display: none;
    }
    .payroll-summary-wrap .compact-records thead {
        display: none;
    }
    .payroll-summary-wrap .compact-records tbody {
        display: grid;
        gap: 10px;
    }
    .payroll-summary-wrap .compact-records tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        margin: 0;
        padding: 12px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    .payroll-summary-wrap .compact-records th {
        display: none;
    }
    .payroll-summary-wrap .compact-records td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 6px 7px;
        border: 1px solid #eef0f3;
        border-radius: 8px;
        background: #f8fafc;
        color: #222;
        font-size: 12.5px;
        font-weight: 800;
        line-height: 1.25;
        text-align: right;
        white-space: nowrap;
        overflow-wrap: normal;
        box-sizing: border-box;
        grid-column: auto;
    }
    .payroll-summary-wrap .compact-records td::before {
        content: attr(data-label);
        display: inline;
        flex: 0 0 auto;
        margin: 0 4px 0 0;
        color: #666;
        font-size: 10.5px;
        font-weight: 900;
        text-align: left;
        white-space: nowrap;
    }
    .payroll-summary-wrap .compact-records td[data-label="직원명"] {
        display: block;
        grid-column: 1;
        order: -20;
        min-height: 0;
        padding: 0 0 3px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #111;
        font-size: 15px;
        font-weight: 950;
        line-height: 1.32;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .payroll-summary-wrap .compact-records td[data-label="직원명"]::before {
        content: none;
    }
    .payroll-summary-wrap .compact-records td[data-label="직원명"] strong {
        font-size: 15px;
        font-weight: 950;
    }
    .payroll-summary-wrap .compact-records td[data-label="선택"] {
        grid-column: 1;
        order: -30;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    .payroll-summary-wrap .compact-records td[data-label="선택"]::before {
        content: "선택";
        display: inline;
        margin-bottom: 0;
    }
    .payroll-summary-wrap .compact-records td[data-label="기간"],
    .payroll-summary-wrap .compact-records td[data-label="근무기간"] {
        grid-column: 1 / -1;
        align-items: flex-start;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .payroll-summary-wrap .compact-records td[data-label="인정근무시간"]::before,
    .payroll-summary-wrap .compact-records td[data-label="근무시간"]::before {
        content: "근무";
    }
    .payroll-summary-wrap .compact-records td[data-label="지급액 합계"]::before {
        content: "지급";
    }
    .payroll-summary-wrap .compact-records td[data-label="공제액 합계"]::before {
        content: "공제";
    }
.payroll-summary-wrap .compact-records td[data-label="실수령액"]::before,
.payroll-summary-wrap .compact-records td[data-label="실지급액"]::before {
        content: "실지급";
    }
    .payroll-summary-wrap .compact-records td[data-label="명세서 상태"]::before,
    .payroll-summary-wrap .compact-records td[data-label="상태"]::before {
        content: "상태";
    }
    .payroll-summary-wrap .compact-records td[data-label="근로자 정보"]::before {
        content: "정보";
    }
    .payroll-summary-wrap .compact-records td[data-label="취소사유"]:empty {
        display: none;
    }
    .payroll-summary-wrap .compact-records .manage-cell {
        display: block;
        grid-column: 2;
        grid-row: 1;
        order: -19;
        min-height: 0;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        margin-top: -3px;
        align-self: start;
        text-align: right;
        white-space: normal;
    }
    .payroll-summary-wrap .compact-records .manage-cell::before {
        content: none;
    }
    .payroll-summary-wrap .compact-records .manage-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: none;
        justify-content: flex-end;
    }
    .payroll-summary-wrap .compact-records .manage-actions form {
        width: auto;
    }
    .payroll-summary-wrap .compact-records .empty-cell {
        display: block;
        padding: 4px 0;
        color: #666;
        text-align: center;
        white-space: normal;
    }
    .payroll-summary-wrap .compact-records .empty-cell::before {
        content: none;
    }
    .payroll-summary-wrap .compact-records .badge {
        margin: 0;
    }
}

/* Employee admin table compact layout */
.employee-list-wrap .employee-table { width: 100%; min-width: 980px; table-layout: fixed; border-collapse: collapse; }
.employee-table th, .employee-table td { vertical-align: middle; }
.employee-table th:nth-child(1), .employee-table td.employee-name-col { width: 14%; text-align: left; }
.employee-table th:nth-child(2), .employee-table td.employee-contact-col { width: 24%; text-align: left; }
.employee-table th:nth-child(3), .employee-table td.employee-center-col:nth-child(3) { width: 8%; text-align: center; }
.employee-table th:nth-child(4), .employee-table td.employee-center-col:nth-child(4) { width: 9%; text-align: center; }
.employee-table th:nth-child(5), .employee-table td.employee-date-col { width: 14%; text-align: center; }
.employee-table th:nth-child(6), .employee-table td.employee-wage-col { width: 9%; text-align: center; }
.employee-table th:nth-child(7), .employee-table td.employee-contract-col { width: 14%; text-align: center; }
.employee-table th:nth-child(8), .employee-table td.employee-actions-col { width: 8%; text-align: center; }
.employee-table .employee-contact-col { overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.employee-table .employee-name-col { overflow-wrap: anywhere; line-height: 1.35; }
.employee-date-col { white-space: normal; line-height: 1.28; }
.employee-date-col span { display: block; white-space: nowrap; }
.employee-wage-col { white-space: nowrap; font-weight: 800; }
.employee-contract-col { line-height: 1.25; }
.contract-compact { display: grid; gap: 2px; justify-items: center; font-size: 12px; font-weight: 800; }
.contract-compact span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; max-width: 100%; }
.employee-actions form { display: inline-flex; margin: 0; }
.employee-actions .employee-action-button { min-height: 24px; padding: 0 7px; font-size: 11px; }
@media (max-width: 760px) {
    .employee-list-wrap .employee-table { min-width: 0; }
    .employee-date-col span { display: inline; }
    .employee-date-col span + span { margin-left: 4px; }
    .contract-compact { justify-items: start; }
    .employee-actions { justify-content: flex-start; }
}

/* Employee list final column layout */
.employee-list-wrap .employee-table {
    width: 100%;
    min-width: 1040px;
    table-layout: fixed;
    border-collapse: collapse;
}
.employee-list-wrap .employee-table th,
.employee-list-wrap .employee-table td {
    vertical-align: middle;
}
.employee-list-wrap .employee-table th:nth-child(1),
.employee-list-wrap .employee-table td:nth-child(1) { width: 10%; text-align: left; }
.employee-list-wrap .employee-table th:nth-child(2),
.employee-list-wrap .employee-table td:nth-child(2) { width: 25%; text-align: left; }
.employee-list-wrap .employee-table th:nth-child(3),
.employee-list-wrap .employee-table td:nth-child(3) { width: 7%; text-align: center; }
.employee-list-wrap .employee-table th:nth-child(4),
.employee-list-wrap .employee-table td:nth-child(4) { width: 7%; text-align: center; }
.employee-list-wrap .employee-table th:nth-child(5),
.employee-list-wrap .employee-table td:nth-child(5) { width: 14%; text-align: center; }
.employee-list-wrap .employee-table th:nth-child(6),
.employee-list-wrap .employee-table td:nth-child(6) { width: 8%; text-align: center; white-space: nowrap; }
.employee-list-wrap .employee-table th:nth-child(7),
.employee-list-wrap .employee-table td:nth-child(7) { width: 20%; text-align: center; }
.employee-list-wrap .employee-table th:nth-child(8),
.employee-list-wrap .employee-table td:nth-child(8) { width: 9%; text-align: center; }
.employee-contact-email { overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; }
.employee-contract-cell,
.employee-dates-cell { white-space: normal; line-height: 1.35; }
.employee-contract-main,
.employee-hire-date { font-weight: 700; white-space: nowrap; }
.employee-contract-sub,
.employee-resign-date { margin-top: 2px; color: #777; font-size: 12px; white-space: nowrap; }
.employee-contract-cell .employee-contract-main,
.employee-contract-cell .employee-contract-sub { display: block; }
.employee-dates-cell .employee-hire-date,
.employee-dates-cell .employee-resign-date { display: block; }
.employee-list-wrap .employee-table .employee-wage-col { white-space: nowrap; font-weight: 800; }
.employee-list-wrap .employee-table .employee-actions-col { text-align: center; }
.employee-list-wrap .employee-table .employee-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 100%;
}
.employee-list-wrap .employee-table .employee-actions.vertical {
    flex-direction: column;
    gap: 4px;
}
.employee-list-wrap .employee-table .employee-actions form { display: inline-flex; margin: 0; }
.employee-list-wrap .employee-table .employee-actions .employee-action-button { min-height: 24px; padding: 0 7px; font-size: 11px; white-space: nowrap; }
.employee-list-wrap .employee-table td.employee-actions-col {
    display: table-cell;
    vertical-align: middle;
}
.employee-list-wrap .employee-table .employee-actions,
.employee-list-wrap .employee-table .employee-actions form,
.employee-list-wrap .employee-table .employee-actions a,
.employee-list-wrap .employee-table .employee-actions button {
    border-bottom: 0;
    box-shadow: none;
}
.employee-list-wrap .employee-table .employee-actions {
    border: 0;
}
.employee-list-wrap .employee-table .employee-actions a,
.employee-list-wrap .employee-table .employee-actions button {
    text-decoration: none;
}
@media (max-width: 760px) {
    .employee-list-wrap .employee-table { min-width: 0; }
    .employee-list-wrap .employee-table th:nth-child(n),
    .employee-list-wrap .employee-table td:nth-child(n) { width: 100%; text-align: left; }
    .employee-list-wrap .employee-table .employee-actions { flex-direction: row; justify-content: flex-start; }
}

/* Pending contract employee table */
.pending-employee-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
}
.pending-employee-table th,
.pending-employee-table td { vertical-align: middle; }
.pending-employee-table th:nth-child(1),
.pending-employee-table td:nth-child(1) { width: 12%; text-align: left; }
.pending-employee-table th:nth-child(2),
.pending-employee-table td:nth-child(2) { width: 24%; text-align: left; }
.pending-employee-table th:nth-child(3),
.pending-employee-table td:nth-child(3) { width: 14%; text-align: center; }
.pending-employee-table th:nth-child(4),
.pending-employee-table td:nth-child(4) { width: 28%; text-align: left; }
.pending-employee-table th:nth-child(5),
.pending-employee-table td:nth-child(5) { width: 14%; text-align: center; }
.pending-employee-table th:nth-child(6),
.pending-employee-table td:nth-child(6) { width: 8%; text-align: center; }
.pending-email-cell { overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; }
.pending-phone-cell { white-space: nowrap; font-size: 13px; }
.pending-address-cell { overflow-wrap: anywhere; line-height: 1.35; font-size: 13px; }
.pending-joined-cell { line-height: 1.3; }
.pending-joined-date { font-weight: 700; white-space: nowrap; }
.pending-joined-time { margin-top: 2px; color: #777; font-size: 12px; white-space: nowrap; }
.pending-actions-cell .employee-actions { display: inline-flex; align-items: center; justify-content: center; }
.pending-actions-cell .employee-action-button { min-height: 24px; padding: 0 7px; font-size: 11px; white-space: nowrap; }
@media (max-width: 760px) {
    .pending-employee-table { min-width: 0; }
    .pending-employee-table thead { display: none; }
    .pending-employee-table tbody,
    .pending-employee-table tr,
    .pending-employee-table td { display: block; width: 100%; }
    .pending-employee-table tr { margin-bottom: 10px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
    .pending-employee-table td { padding: 3px 0; border: 0; text-align: left !important; }
    .pending-actions-cell .employee-actions { justify-content: flex-start; }
}


/* Employee common profile panel */
body.employee-card-page .employee-card-wide { position: relative; }
.employee-common-profile-panel {
    position: absolute;
    left: 50%;
    top: clamp(58px, 8dvh, 78px);
    z-index: 30;
    display: none;
    width: min(420px, calc(100vw - 36px));
    max-height: min(620px, calc(100dvh - 112px));
    overflow-y: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(229, 229, 229, .95);
    border-radius: 22px;
    background: rgba(255, 250, 243, .98);
    box-shadow: 0 22px 54px rgba(66, 55, 45, .22), 0 6px 16px rgba(74, 87, 110, .08);
    transform: translateX(-50%);
}
.employee-common-profile-panel.open { display: block; }
body.employee-card-page.profile-common-open .id-card-slider { pointer-events: none; }
body.employee-card-page.profile-common-open .id-card-track,
body.employee-card-page.profile-common-open .id-card-dots { filter: saturate(.78) brightness(.94); }
.employee-common-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.employee-common-profile-title { color: #111; font-size: 17px; font-weight: 950; line-height: 1.2; }
.employee-common-profile-subtitle { margin-top: 3px; color: #7a5a32; font-size: 12px; font-weight: 900; line-height: 1.35; }
.employee-common-tax-state {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid #ead7bf;
    border-radius: 12px;
    background: #fff;
}
.employee-common-tax-state span { color: #777; font-size: 12px; font-weight: 900; }
.employee-common-tax-state strong { color: #222; font-size: 13px; font-weight: 950; }
.employee-common-profile-form { gap: 8px; }
@media (min-width: 769px) {
    .employee-common-profile-panel { top: 74px; width: min(440px, calc(100vw - 48px)); }
}
@media (max-width: 520px) {
    .employee-common-profile-panel { top: 56px; width: min(360px, calc(100vw - 28px)); max-height: calc(100dvh - 92px); padding: 14px; border-radius: 20px; }
    .employee-common-tax-state { grid-template-columns: 1fr auto; }
    .employee-common-tax-state button { grid-column: 1 / -1; justify-self: stretch; }
}

/* Employee card monthly records */
.id-card-front { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(8px, 1.8dvh, 14px); }
.id-card-record-button {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    box-shadow: none;
}
.id-card-record-button:hover,
.id-card-record-button:active { background: #ececec; }
.id-card-records { display: none; height: 100%; min-height: 0; flex: 1 1 auto; overflow: hidden; text-align: left; }
.id-card.record-mode { justify-content: flex-start; }
.id-card.record-mode .id-card-front { display: none; }
.id-card.record-mode .id-card-records { display: flex; flex-direction: column; gap: 10px; }
.id-card-record-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; text-align: left; }
.id-card-record-header .id-card-company { font-size: 17px; }
.id-card-record-subtitle { margin-top: 2px; color: #666; font-size: 12px; font-weight: 800; }
.id-card-back {
    width: auto;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #333;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: none;
}
.id-card-month-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; }
.id-card-month-nav strong { font-size: 18px; font-weight: 900; }
.id-card-month-button {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #f3f3f3;
    color: #222;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
}
.id-card-record-summary {
    padding: 9px 10px;
    border-radius: 12px;
    background: #f7f7f7;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    line-height: 1.35;
}
.id-card-record-list { max-height: min(290px, 44vh); overflow-y: auto; padding-right: 2px; }
.id-card-profile-form { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 0; padding-right: 0; }
.id-card-profile-row { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 0 2px 3px; border-bottom: 1px solid #ececec; }
.id-card-profile-row span { color: #777; font-size: 12px; font-weight: 900; line-height: 1.2; }
.id-card-profile-row input { width: 100%; min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #111; font-size: 13px; font-weight: 800; box-shadow: none; }
.id-card-profile-row input:focus { outline: 0; box-shadow: none; }
.id-card-profile-row input::placeholder { color: #aaa; font-weight: 700; }
.id-card-profile-actions { display: flex; justify-content: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.id-card-profile-actions .id-card-back { min-height: 34px; padding: 0 16px; font-size: 12px; }
.id-card-profile-save { background: #ffe1c2; color: #9a5720; }
.id-card-profile-save:hover,
.id-card-profile-save:active { background: #ffd5aa; color: #814611; }
.id-card-record-day { padding: 9px 0; border-bottom: 1px solid #ededed; }
.id-card-record-day:last-child { border-bottom: 0; }
.id-card-record-date { margin-bottom: 5px; color: #111; font-size: 13px; font-weight: 900; }
.id-card-record-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border-radius: 9px; color: #333; font-size: 12px; font-weight: 800; line-height: 1.35; }
.id-card-record-item span:last-child { color: #666; white-space: nowrap; }
.id-card-record-item.working { background: #f1e9ff; color: #5b3a9e; }
.id-card-record-item.working span:last-child { color: #5b3a9e; }
.id-card-empty-record { margin: 30px 0 0; color: #777; font-size: 13px; font-weight: 800; text-align: center; }
@media (max-width: 380px) {
    .id-card-record-list { max-height: 250px; }
    .id-card-record-item { align-items: flex-start; flex-direction: column; gap: 2px; }
}


/* Employee mobile card header refinements */
.employee-page .employee-card-topbar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 4px;
}
.employee-card-topbar .employee-topbar-title { min-width: 0; }
.employee-card-topbar .brand { margin-bottom: 2px; }
.employee-card-topbar h1 { margin: 0; line-height: 1.12; }
.employee-card-topbar .muted.small { margin: 4px 0 0; }
.employee-topbar-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; padding-top: 2px; }
.employee-topbar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    white-space: nowrap;
    vertical-align: top;
}

button.employee-topbar-pill { cursor: pointer; }
.employee-topbar-pill:hover,
.employee-topbar-pill:active { background: #f7f7f7; }
.employee-pwa-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.employee-pwa-refresh-button:hover,
.employee-pwa-refresh-button:active { background: #f7f7f7; }
.employee-pwa-refresh-button[hidden] { display: none !important; }
.id-card-record-button,
.id-card-back {
    background: #ffe1c2;
    color: #9a5720;
    border: 0;
    box-shadow: none;
}
.id-card-record-button:hover,
.id-card-record-button:active,
.id-card-back:hover,
.id-card-back:active { background: #ffd5aa; color: #814611; }
.id-card-record-header { justify-content: flex-start; }
.id-card-record-list { flex: 1 1 auto; min-height: 0; max-height: min(260px, 39vh); }
.id-card-record-footer { display: flex; justify-content: center; flex: 0 0 auto; margin-top: auto; padding-top: 8px; }
.id-card-record-footer .id-card-back { min-height: 34px; padding: 0 14px; font-size: 12px; }
@media (max-width: 640px) {
    .employee-page .employee-card-topbar { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 380px) {
    .employee-topbar-actions { gap: 4px; }
    .employee-topbar-pill { height: 30px; min-height: 30px; padding: 0 10px; font-size: 12px; }
}


/* Employee form action buttons */
.employee-form .form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.employee-form .form-actions .button,
.employee-form .form-actions button {
    min-height: 42px;
    padding: 0 16px;
}
@media (max-width: 640px) {
    .employee-form .form-actions { display: grid; grid-template-columns: 1fr; }
    .employee-form .form-actions .button,
    .employee-form .form-actions button { width: 100%; }
}

.form-save-guide { margin: 4px 0 0; color: #777; font-size: 13px; font-weight: 700; line-height: 1.4; }


/* Admin tab shell */
.admin-shell {
    display: block;
    margin-bottom: 18px;
    border-bottom: 1px solid #dedede;
}
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 12px;
}
.admin-brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0;
}
.admin-account {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}
.admin-shell .admin-meta {
    color: #555;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.admin-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
}
button.admin-action-pill { cursor: default; }
.admin-action-pill:hover,
.admin-action-pill:active { background: #f6f6f6; }
.admin-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    padding: 0 2px;
    scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
    position: relative;
    bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #dedede;
    border-bottom-color: #dedede;
    border-radius: 12px 12px 0 0;
    background: #f3f3f3;
    color: #555;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
.admin-tab.is-active {
    z-index: 1;
    border-bottom-color: #fff;
    background: #fff;
    color: #111;
}
.admin-tab:not(.is-active):hover,
.admin-tab:not(.is-active):active { background: #ececec; color: #222; }
@media (max-width: 760px) {
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .admin-account {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .admin-brand { font-size: 20px; }
    .admin-tab { min-height: 38px; padding: 0 15px; }
}


/* Admin chrome-like tabs refinement */
.admin-shell {
    display: block;
    margin-bottom: 16px;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 2px 14px;
}
.admin-brand {
    color: #111;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
}
.admin-account {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.admin-shell .admin-meta {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: #555;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.admin-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #dfdfdf;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.admin-action-pill:hover,
.admin-action-pill:active {
    border-color: #d2d2d2;
    background: #f7f7f7;
}

.admin-contact-pill {
    border-color: rgba(200, 111, 45, .34);
    background: #fff8f2;
    color: #9a5720;
}
.admin-contact-pill:hover,
.admin-contact-pill:active {
    border-color: rgba(200, 111, 45, .46);
    background: #fff0e2;
    color: #814611;
}
.admin-tabs {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    overflow-x: auto;
    padding: 0 4px;
    border-bottom: 1px solid #d7d7d7;
    scrollbar-width: none;
}
.admin-tab {
    position: relative;
    bottom: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid #d9d9d9;
    border-bottom-color: #d7d7d7;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(#f6f6f6, #eeeeee);
    color: #5c5c5c;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    transform: translateY(2px);
}
.admin-tab.is-active {
    z-index: 2;
    min-height: 46px;
    border-color: #d7d7d7;
    border-bottom-color: #fff;
    background: #fff;
    color: #111;
    font-weight: 900;
    box-shadow: 0 -1px 4px rgba(0,0,0,.04), inset 0 1px 0 #fff;
    transform: translateY(0);
}
.admin-tab:not(.is-active):hover,
.admin-tab:not(.is-active):active {
    background: linear-gradient(#fafafa, #f1f1f1);
    color: #222;
}
.admin-shell + .code-card,
.admin-shell + .card {
    margin-top: 16px;
}
@media (max-width: 760px) {
    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 12px;
    }
    .admin-account {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 7px;
    }
    .admin-shell .admin-meta {
        min-height: 32px;
        flex: 1 1 100%;
    }
    .admin-brand { font-size: 21px; }
    .admin-tabs {
        gap: 4px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .admin-tab {
        min-height: 39px;
        padding: 0 17px;
        border-radius: 13px 13px 0 0;
        font-size: 13px;
    }
    .admin-tab.is-active { min-height: 43px; }
}


/* Admin tab content start card */
.admin-shell + .admin-code-card {
    margin-top: -1px;
    margin-bottom: 16px;
    padding: 15px 18px;
    border-color: #d7d7d7;
    border-top-color: #d7d7d7;
    border-radius: 0 8px 8px 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.035);
}
.admin-code-card .code-title {
    color: #666;
    font-size: 13px;
    font-weight: 900;
}
.admin-code-card strong {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fafafa;
    color: #111;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}
.admin-code-card p {
    margin: 0;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
@media (max-width: 760px) {
    .admin-shell + .admin-code-card {
        margin-top: -1px;
        padding: 13px 14px;
        border-radius: 0 8px 8px 8px;
    }
}


/* Admin tabs attached content panel */
.admin-shell {
    margin-bottom: 0;
}
.admin-tabs {
    margin-bottom: 0;
    border-bottom: 1px solid #d7d7d7;
}
.admin-tab {
    bottom: -1px;
}
.admin-tab.is-active {
    border-bottom-color: #fff;
    box-shadow: 0 -1px 3px rgba(0,0,0,.035), inset 0 1px 0 #fff;
}
.admin-shell + .admin-code-card {
    margin-top: 0;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #d7d7d7;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: none;
}
.admin-code-card {
    gap: 14px;
}
.admin-code-card-main {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.admin-code-card .ad-slot--admin-side {
    justify-self: end;
}
@media (max-width: 760px) {
    .admin-shell + .admin-code-card {
        margin-top: 0;
        margin-bottom: 16px;
        padding: 14px 14px;
        border-top: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: none;
    }
}


/* Admin tab/panel edge alignment */
.admin-tabs {
    padding-left: 0;
    padding-right: 0;
}
.admin-shell + .admin-code-card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0 12px 12px 12px;
}
@media (max-width: 760px) {
    .admin-tabs {
        padding-left: 0;
        padding-right: 0;
    }
    .admin-shell + .admin-code-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0 12px 12px 12px;
    }
}


/* Admin tab/panel rounded corner seam fix */
.admin-tabs {
    border-bottom: 0;
}
.admin-shell + .admin-code-card {
    position: relative;
    z-index: 1;
    border-top: 1px solid #d7d7d7;
}
@media (min-width: 761px) {
    .admin-code-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 24px;
    }
}
.admin-tab {
    z-index: 2;
}
.admin-tab.is-active {
    border-bottom-color: #fff;
}


/* Admin mobile baseline pass */
@media (max-width: 760px) {
    .admin-shell {
        width: 100%;
        margin-bottom: 0;
    }
    .admin-topbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 0 0 11px;
    }
    .admin-brand {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 20px;
        line-height: 1.2;
    }
    .admin-account {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }
    .admin-shell .admin-meta {
        flex: 1 1 100%;
        min-width: 0;
        min-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        line-height: 1.2;
    }
    .admin-action-pill {
        height: 32px;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 1;
        flex: 0 0 auto;
    }
    .admin-code-card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .admin-code-card .ad-slot--admin-side {
        display: none;
    }
    .admin-code-card .ad-slot--admin-mobile {
        display: flex;
        justify-self: center;
        width: min(320px, calc(100vw - 48px));
        height: 100px;
        min-height: 100px;
        margin-top: 2px;
    }
    .admin-tabs {
        width: 100%;
        display: flex;
        align-items: flex-end;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 16px;
        border-radius: 12px 12px 0 0;
        font-size: 13px;
        white-space: nowrap;
    }
    .admin-tab.is-active {
        min-height: 42px;
    }
    .admin-shell + .admin-code-card {
        margin-top: 0;
        margin-bottom: 14px;
        padding: 11px 12px;
        border-top: 1px solid #d7d7d7;
        border-radius: 0 10px 10px 10px;
    }
    .admin-code-card .code-title {
        font-size: 12px;
    }
    .admin-code-card strong {
        min-height: 28px;
        padding: 0 9px;
        font-size: 16px;
    }
    .admin-code-card p {
        font-size: 13px;
        line-height: 1.4;
    }
}


/* Mobile calendar card readability */
@media (max-width: 768px) {
    .calendar-day .calendar-shift-list {
        grid-column: 1 / -1;
        width: 100%;
        gap: 5px;
        min-width: 0;
    }
    .calendar-day .calendar-shift-entry,
    .calendar-day .calendar-shift-entry.is-working {
        display: block;
        width: auto;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }
    .calendar-day .calendar-shift-entry.is-working {
        width: fit-content;
        max-width: 100%;
    }
    .calendar-day .calendar-date-line,
    .calendar-day .calendar-employee-count {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        max-width: none;
    }
    .calendar-day .calendar-location-warning {
        display: none;
    }
    .calendar-day-modal-card {
        max-height: calc(100dvh - 28px);
        padding: 18px;
    }
    .calendar-day-modal-head {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-day-modal-entry {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}


/* Employee card contract mode */
.id-card-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.18fr) 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    gap: 7px;
}
.id-card-footer-actions > button {
    min-width: 0;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.id-card-footer-actions .id-card-notice-button {
    justify-self: center;
    width: 30px;
    min-width: 30px;
    padding: 0;
}
.id-card-contract-button,
.id-card-payroll-button {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff0d8;
    color: #8a551f;
    font-size: 12px;
    font-weight: 900;
    box-shadow: none;
}
.id-card-contract-button.needs-confirm {
    background: #fee2e2;
    color: #b42318;
    animation: contractAttentionBlink 1.8s ease-in-out infinite;
}
.id-card-contract-alert {
    align-self: center;
    min-height: 28px;
    margin-bottom: 6px;
    padding: 0 11px;
    border: 1px solid #fdba74;
    border-radius: 999px;
    background: #ffedd5;
    color: #9a3412;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .14);
    animation: contractAttentionBlink 1.8s ease-in-out infinite;
}
@keyframes contractAttentionBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(249, 115, 22, 0); }
    50% { opacity: .74; box-shadow: 0 0 0 4px rgba(249, 115, 22, .10); }
}
.id-card-contract-button:hover,
.id-card-contract-button:active,
.id-card-payroll-button:hover,
.id-card-payroll-button:active { background: #ffe6c1; color: #74430f; }
.id-card-notice-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
    background: #f2f3f5;
    color: #666;
    vertical-align: middle;
    box-shadow: none;
}
.id-card-notice-icon {
    display: block;
    width: 16px;
    height: 16px;
}
.id-card-notice-button:hover,
.id-card-notice-button:active { background: #e7e9ed; color: #333; }
.id-card-notice-button.has-unread {
    color: #c62828;
    animation: noticeButtonPulse 1.8s ease-in-out infinite;
}
.id-card-contracts,
.id-card-contract-archive,
.id-card-contract-detail,
.id-card-payrolls,
.id-card-notices { display: none; height: 100%; min-height: 0; flex: 1 1 auto; overflow: hidden; text-align: left; }
.id-card-notices { position: relative; }
.id-card.contract-mode,
.id-card.contract-archive-mode,
.id-card.contract-detail-mode,
.id-card.payroll-mode,
.id-card.notice-mode { justify-content: flex-start; }
.id-card.contract-mode .id-card-front,
.id-card.contract-mode .id-card-records,
.id-card.contract-mode .id-card-contract-archive,
.id-card.contract-mode .id-card-contract-detail,
.id-card.contract-mode .id-card-payrolls,
.id-card.contract-mode .id-card-notices,
.id-card.contract-detail-mode .id-card-front,
.id-card.contract-detail-mode .id-card-records,
.id-card.contract-detail-mode .id-card-contracts,
.id-card.contract-detail-mode .id-card-contract-archive,
.id-card.contract-detail-mode .id-card-payrolls,
.id-card.contract-detail-mode .id-card-notices,
.id-card.contract-archive-mode .id-card-front,
.id-card.contract-archive-mode .id-card-records,
.id-card.contract-archive-mode .id-card-contracts,
.id-card.contract-archive-mode .id-card-contract-detail,
.id-card.contract-archive-mode .id-card-payrolls,
.id-card.contract-archive-mode .id-card-notices,
.id-card.payroll-mode .id-card-front,
.id-card.payroll-mode .id-card-records,
.id-card.payroll-mode .id-card-contracts,
.id-card.payroll-mode .id-card-contract-archive,
.id-card.payroll-mode .id-card-contract-detail,
.id-card.payroll-mode .id-card-notices,
.id-card.notice-mode .id-card-front,
.id-card.notice-mode .id-card-records,
.id-card.notice-mode .id-card-contracts,
.id-card.notice-mode .id-card-contract-archive,
.id-card.notice-mode .id-card-contract-detail,
.id-card.notice-mode .id-card-payrolls { display: none; }
.id-card.contract-mode .id-card-contracts,
.id-card.contract-archive-mode .id-card-contract-archive,
.id-card.contract-detail-mode .id-card-contract-detail,
.id-card.payroll-mode .id-card-payrolls,
.id-card.notice-mode .id-card-notices { display: flex; flex-direction: column; gap: 10px; }
.id-card-contract-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: min(380px, 55vh);
    padding-right: 2px;
}
.id-card-contracts,
.id-card-contract-archive,
.id-card-contract-detail,
.id-card-payrolls,
.id-card-notices,
.id-card-records { min-height: 0; }
.id-card-contract-list > div {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 8px;
    align-items: start;
    padding: 8px 9px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fafafa;
}
.id-card-contract-list span {
    color: #777;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}
.id-card-contract-list strong {
    color: #111;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.id-card-payroll-list {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: 5px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(310px, 47vh);
    overflow-y: auto;
    padding-right: 2px;
}
.id-card-payroll-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: auto;
    min-height: 0;
    padding: 8px 9px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fafafa;
}
.id-card-payroll-item > div:first-child { flex: 1 1 auto; min-width: 0; }
.id-card-payroll-item strong {
    display: block;
    color: #111;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}
.id-card-payroll-item span {
    display: block;
    margin-top: 1px;
    color: #666;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}
.id-card-payroll-item span:first-of-type { white-space: nowrap; }
.id-card-payroll-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.id-card-payroll-side strong { white-space: nowrap; }
.id-card-payroll-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ffe1c2;
    color: #814611;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.id-card-payroll-view:hover,
.id-card-payroll-view:active { background: #ffd5aa; color: #814611; }
@media (max-width: 380px) {
    .id-card-payroll-item { align-items: flex-start; flex-direction: column; }
    .id-card-payroll-side { justify-items: start; }
}
.id-card-contract-note {
    margin: 0;
    color: #666;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}
@media (max-width: 380px) {
    .id-card-contract-list > div { grid-template-columns: 72px 1fr; }
}

.weekly-holiday-check { align-items: flex-start; flex-direction: column; gap: 4px; }
.weekly-holiday-check .field-help { margin-left: 24px; color: #777; }

/* Employee card app-like mobile viewport lock */
@media (max-width: 768px) {
    body.employee-card-page {
        position: fixed;
        inset: 0;
        width: 100%;
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    body.employee-card-page .employee-page {
        box-sizing: border-box;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        padding: calc(18px + env(safe-area-inset-top)) 0 max(4px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }

    body.employee-card-page .employee-card-wide {
        box-sizing: border-box;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        padding-top: clamp(10px, 2dvh, 16px);
        padding-bottom: 0;
    }

    body.employee-card-page .employee-card-topbar {
        flex: 0 0 auto;
    }

    body.employee-card-page .id-card-slider {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        touch-action: pan-x;
    }

    body.employee-card-page .id-card-track {
        height: auto;
        min-height: 0;
        align-items: flex-start;
        padding-top: clamp(8px, 1.8dvh, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    body.employee-card-page .id-card,
    body.employee-card-page .id-card-add {
        height: auto;
        min-height: clamp(300px, calc(100dvh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 480px);
        max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }
    body.employee-card-page .ad-slot--employee-bottom {
        flex: 0 0 100px;
        box-sizing: border-box;
        width: min(320px, calc(100vw - 48px));
        height: 100px;
        min-height: 0;
        max-height: 100px;
        margin: clamp(4px, .8dvh, 10px) auto max(2px, calc(env(safe-area-inset-bottom) - 18px));
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.employee-card-page .ad-slot--employee-bottom .adsbygoogle {
        flex: 0 0 auto;
        max-width: 100%;
        max-height: 100px;
    }

    body.employee-card-page #message:empty {
        display: none;
        margin: 0;
    }

    body.employee-card-page.is-standalone .ad-slot--employee-bottom,
    html.is-standalone body.employee-card-page .ad-slot--employee-bottom {
        margin-top: clamp(52px, 7dvh, 82px);
    }




    body.employee-card-page .id-card-record-list,
    body.employee-card-page .id-card-profile-form,
    body.employee-card-page .id-card-contract-list,
    body.employee-card-page .id-card-payroll-list,
    body.employee-card-page .id-card-notice-list {
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    body.employee-card-page .id-card-records,
    body.employee-card-page .id-card-contracts,
    body.employee-card-page .id-card-contract-archive,
    body.employee-card-page .id-card-contract-detail,
    body.employee-card-page .id-card-payrolls,
    body.employee-card-page .id-card-notices {
        min-height: 0;
        overflow: hidden;
    }

    body.employee-card-page button,
    body.employee-card-page a,
    body.employee-card-page input,
    body.employee-card-page select,
    body.employee-card-page textarea {
        touch-action: manipulation;
    }

    body.employee-card-page .modal-layer,
    body.employee-card-page .modal-card {
        touch-action: auto;
    }
}

@media (max-width: 768px) and (display-mode: standalone) {
    body.employee-card-page .employee-page {
        padding-top: 12px;
    }

    body.employee-card-page .id-card-track {
        padding-top: 6px;
    }

    body.employee-card-page .id-card,
    body.employee-card-page .id-card-add {
        min-height: clamp(300px, calc(100dvh - 232px - env(safe-area-inset-bottom)), 500px);
    }

    body.employee-card-page .ad-slot--employee-bottom {
        margin-top: clamp(52px, 7dvh, 82px);
        margin-bottom: max(2px, calc(env(safe-area-inset-bottom) - 18px));
    }
}


/* Admin employees mobile overflow/card fix */
@media (max-width: 760px) {
    .employee-list-card,
    .employee-list-card .table-wrap,
    .employee-list-card table,
    .employee-list-card thead,
    .employee-list-card tbody,
    .employee-list-card tr,
    .employee-list-card td,
    .employee-list-card th,
    .employee-list-card div,
    .employee-list-card span,
    .employee-list-card strong,
    .employee-list-card a,
    .employee-list-card button,
    .employee-list-card form {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .employee-list-card .table-wrap,
    .employee-list-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
        overflow-y: visible;
        border: 0;
        border-radius: 0;
    }

    .pending-employee-table,
    .employee-list-wrap .employee-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: auto;
        border-collapse: separate;
        border-spacing: 0;
    }

    .pending-employee-table thead,
    .employee-list-wrap .employee-table thead {
        display: none;
    }

    .pending-employee-table tbody,
    .employee-list-wrap .employee-table tbody {
        display: grid;
        width: 100%;
        gap: 10px;
    }

    .pending-employee-table tr,
    .employee-list-wrap .employee-table tr {
        display: grid;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .pending-employee-table td,
    .employee-list-wrap .employee-table td,
    .employee-list-wrap .employee-table td.employee-actions-col {
        display: block;
        width: 100% !important;
        max-width: 100%;
        padding: 0;
        border: 0;
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .pending-employee-table td + td,
    .employee-list-wrap .employee-table td + td {
        margin-top: 7px;
    }

    .pending-name-cell strong,
    .employee-name-col strong {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        font-size: 15px;
        line-height: 1.35;
    }

    .pending-email-cell,
    .pending-address-cell,
    .employee-contact-col,
    .employee-contact-email {
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.35;
    }

    .pending-phone-cell,
    .pending-joined-date,
    .pending-joined-time,
    .employee-hire-date,
    .employee-resign-date,
    .employee-wage-col {
        white-space: normal;
    }

    .pending-phone-cell {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .pending-joined-cell,
    .employee-dates-cell {
        display: grid !important;
        gap: 2px;
        line-height: 1.3;
    }

    .employee-list-wrap .employee-table tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px 10px;
        align-items: start;
    }

    .employee-list-wrap .employee-table td.employee-name-col,
    .employee-list-wrap .employee-table td.employee-contact-col,
    .employee-list-wrap .employee-table td.employee-contract-cell,
    .employee-list-wrap .employee-table td.employee-actions-col {
        grid-column: 1 / -1;
    }

    .employee-list-wrap .employee-table td.employee-center-col,
    .employee-list-wrap .employee-table td.employee-dates-cell,
    .employee-list-wrap .employee-table td.employee-wage-col {
        min-height: 24px;
    }

    .employee-contract-cell {
        display: grid !important;
        gap: 2px;
        line-height: 1.35;
    }

    .employee-contract-main,
    .employee-contract-sub {
        display: block;
        white-space: normal;
    }

    .pending-actions-cell,
    .employee-actions-col {
        padding-top: 2px !important;
    }

    .pending-actions-cell .employee-actions,
    .employee-list-wrap .employee-table .employee-actions,
    .employee-list-wrap .employee-table .employee-actions.vertical {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        border: 0;
        box-shadow: none;
    }

    .pending-actions-cell .employee-actions form,
    .employee-list-wrap .employee-table .employee-actions form {
        display: inline-flex;
        width: auto;
        margin: 0;
    }

    .pending-actions-cell .employee-action-button,
    .employee-list-wrap .employee-table .employee-action-button {
        width: auto;
        max-width: 100%;
        min-height: 28px;
        padding: 0 9px;
        font-size: 11px;
        white-space: nowrap;
    }

    .pending-employee-table td::before,
    .employee-list-wrap .employee-table td::before {
        display: block;
        margin-bottom: 2px;
        color: #888;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
    }

    .pending-employee-table td:nth-child(1)::before { content: '이름'; }
    .pending-employee-table td:nth-child(2)::before { content: '이메일'; }
    .pending-employee-table td:nth-child(3)::before { content: '전화'; }
    .pending-employee-table td:nth-child(4)::before { content: '주소'; }
    .pending-employee-table td:nth-child(5)::before { content: '가입일'; }
    .pending-employee-table td:nth-child(6)::before { content: '관리'; }

    .employee-list-wrap .employee-table td:nth-child(1)::before { content: '직원'; }
    .employee-list-wrap .employee-table td:nth-child(2)::before { content: '이메일/전화'; }
    .employee-list-wrap .employee-table td:nth-child(3)::before { content: '상태'; }
    .employee-list-wrap .employee-table td:nth-child(4)::before { content: '기기'; }
    .employee-list-wrap .employee-table td:nth-child(5)::before { content: '입퇴사'; }
    .employee-list-wrap .employee-table td:nth-child(6)::before { content: '시급'; }
    .employee-list-wrap .employee-table td:nth-child(7)::before { content: '계약'; }
    .employee-list-wrap .employee-table td:nth-child(8)::before { content: '관리'; }
}

/* Super admin screen */
.super-admin-page {
    max-width: 920px;
}
.super-admin-shell .admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111;
}
.super-admin-shell .brand-logo {
    flex: 0 0 auto;
}
.super-admin-shell .brand-logo-img {
    height: 32px;
    max-width: min(240px, 72vw);
}
.super-admin-brand-label {
    align-self: center;
    color: #555;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}
.super-admin-tab-disabled {
    cursor: default;
    color: #9a9a9a;
    background: linear-gradient(#f7f7f7, #f0f0f0);
}
.system-management-card {
    display: grid;
    gap: 14px;
}
.system-management-card .section-head {
    align-items: flex-start;
    gap: 14px;
}
.system-disabled-action:disabled {
    cursor: default;
    opacity: .68;
}
.system-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.system-guide-box {
    padding: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
}
.system-warning-box {
    border-color: #f5d7b8;
    background: #fff8f1;
}
.system-guide-box h2 {
    margin: 0 0 10px;
    color: #111;
    font-size: 16px;
    font-weight: 900;
}
.system-guide-box p {
    margin: 0 0 8px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}
.system-path-list {
    display: grid;
    gap: 8px;
    margin: 0;
}
.system-path-list dt {
    color: #666;
    font-size: 12px;
    font-weight: 900;
}
.system-path-list dd {
    margin: 0;
}
.system-guide-box code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #f4f4f4;
    color: #222;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
.system-compact-list {
    margin: 0;
    padding-left: 18px;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}
.system-code-list {
    columns: 2;
}
.deployment-control-box {
    display: grid;
    gap: 14px;
}
.deployment-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.deployment-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    color: #444;
    font-size: 13px;
    font-weight: 800;
}
.deployment-status-pill {
    flex: 0 0 auto;
    min-width: 54px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}
.deployment-status-pill.is-ok {
    background: #e8f5ec;
    color: #287a4b;
}
.deployment-status-pill.is-bad {
    background: #fdecec;
    color: #b42318;
}
.deployment-path-list {
    padding: 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fbfbfb;
}
.deployment-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.deployment-action-form {
    display: flex;
}
.deployment-action-form .button {
    width: 100%;
}
.deployment-command-preview {
    display: grid;
    gap: 7px;
}
.deployment-command-preview label {
    color: #555;
    font-size: 13px;
    font-weight: 900;
}
.deployment-log-box {
    width: 100%;
    min-height: 108px;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 10px;
    background: #f8f8f8;
    color: #222;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}
.deploy-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fafafa;
}
.deploy-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.deploy-status-pill.is-ok {
    background: #e8f5ec;
    color: #287a4b;
}
.deploy-status-pill.is-error {
    background: #fdecec;
    color: #b42318;
}
.deploy-two-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.deploy-panel {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    border: 1px solid #dedede;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.deploy-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid #e9e9e9;
    background: #f8fafc;
}
.deploy-panel-head h2 {
    margin: 0 0 5px;
    color: #111;
    font-size: 17px;
    font-weight: 900;
}
.deploy-path {
    margin: 0;
    color: #555;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-all;
}
.deploy-panel-note,
.deploy-backup-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.deploy-panel-note {
    background: #eef2f7;
    color: #4b5563;
}
.deploy-backup-badge.is-done {
    background: #e8f1ff;
    color: #1d4ed8;
}
.deploy-backup-badge.is-needed {
    background: #fdecec;
    color: #b42318;
}
.deploy-file-area {
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    background: #fff;
}
.deploy-empty-state {
    margin: 0;
    padding: 18px 14px;
    border: 1px dashed #d8d8d8;
    border-radius: 8px;
    background: #fbfbfb;
    color: #666;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}
.deploy-file-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #333;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.deploy-file-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #eeeeee;
    border-radius: 7px;
    background: #fcfcfc;
}
.deploy-file-list li span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.deploy-file-list.is-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    font-size: 11px;
}
.deploy-file-list.is-compact li {
    padding: 4px 6px;
}
.deploy-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.deploy-file-icon.is-uploadable {
    color: #1f8a4c;
}
.deploy-file-icon.is-blocked {
    color: #c62828;
}
.deploy-excluded-preview {
    display: grid;
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid #eeeeee;
}
.deploy-excluded-preview summary {
    cursor: pointer;
    color: #666;
    font-size: 12px;
    font-weight: 900;
}
.deploy-excluded-preview[open] summary {
    margin-bottom: 6px;
}
.deploy-panel-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e9e9e9;
    background: #f8fafc;
}
.deploy-panel-actions form,
.deploy-panel-actions button {
    width: 100%;
}
.deploy-action-warning {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
}
.deploy-result-log {
    padding: 14px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
}
#system-management,
#deploy-result {
    scroll-margin-top: 18px;
}
.restore-plan-box {
    display: grid;
    gap: 12px;
}
.restore-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.restore-plan-head h2 {
    margin-bottom: 6px;
}
.restore-plan-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #4b5563;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.restore-warning-list {
    padding: 10px 12px 10px 28px;
    border: 1px solid #f5d7b8;
    border-radius: 8px;
    background: #fff8f1;
}
.restore-backup-list {
    display: grid;
    gap: 8px;
}
.restore-backup-item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fcfcfc;
}
.restore-backup-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.restore-backup-main strong {
    color: #111;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.restore-backup-main span {
    color: #555;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
}
.restore-backup-main em {
    color: #1d4ed8;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}
.restore-backup-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}
.restore-backup-status div {
    display: grid;
    gap: 3px;
    padding: 7px 8px;
    border: 1px solid #eeeeee;
    border-radius: 7px;
    background: #fff;
}
.restore-backup-status dt {
    color: #666;
    font-size: 11px;
    font-weight: 900;
}
.restore-backup-status dd {
    margin: 0;
    font-size: 12px;
    font-weight: 900;
}
.restore-backup-status dd.is-ok {
    color: #287a4b;
}
.restore-backup-status dd.is-missing {
    color: #b42318;
}
.restore-disabled-button {
    white-space: nowrap;
}
.upload-exclude-settings {
    display: grid;
    gap: 10px;
}
.upload-exclude-list {
    columns: 3;
    font-size: 13px;
    line-height: 1.55;
}
.deploy-advanced-details summary {
    cursor: pointer;
    color: #111;
    font-size: 15px;
    font-weight: 900;
}
.deploy-advanced-details[open] summary {
    margin-bottom: 12px;
}
.deploy-advanced-details .deployment-command-preview + .deployment-command-preview {
    margin-top: 12px;
}
@media (max-width: 760px) {
    .system-management-card .section-head,
    .system-guide-grid,
    .deploy-two-panel {
        grid-template-columns: 1fr;
    }
    .system-management-card .section-head {
        display: grid;
    }
    .system-disabled-action {
        width: 100%;
    }
    .system-code-list,
    .upload-exclude-list {
        columns: 1;
    }
    .deployment-status-grid,
    .deployment-action-grid {
        grid-template-columns: 1fr;
    }
    .deploy-panel {
        min-height: 0;
    }
    .deploy-panel-head,
    .restore-plan-head,
    .restore-backup-item {
        display: grid;
    }
    .restore-backup-item,
    .restore-backup-status,
    .deploy-file-list.is-compact {
        grid-template-columns: 1fr;
    }
}
.super-admin-card h1 {
    margin-top: 0;
}
.super-settings-form {
    display: grid;
    gap: 14px;
}
.minimum-wage-preview {
    padding: 12px 14px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    color: #333;
    font-size: 14px;
    font-weight: 800;
}
@media (max-width: 760px) {
    .super-admin-page {
        max-width: 100%;
    }
    .minimum-wage-preview {
        font-size: 13px;
        line-height: 1.45;
    }
}

/* Employee form grid alignment after helper text */
.employee-form > .form-grid {
    align-items: start;
    grid-auto-flow: row;
}
.employee-form > .form-grid > .field {
    min-width: 0;
    align-self: start;
    grid-template-rows: 18px 44px auto;
    gap: 6px;
}
.employee-form > .form-grid > .field > span {
    display: flex;
    align-items: flex-end;
    min-height: 18px;
    line-height: 1.25;
}
.employee-form > .form-grid > .field > input,
.employee-form > .form-grid > .field > select {
    align-self: start;
}
.employee-form > .form-grid > .field > .field-help {
    margin-top: 0;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
@media (max-width: 760px) {
    .employee-form > .form-grid > .field {
        grid-template-rows: auto 44px auto;
    }
    .employee-form > .form-grid > .field > span {
        min-height: 0;
    }
}

/* Super admin company overview */
.super-company-table-wrap {
    overflow-x: auto;
}
.super-company-table {
    min-width: 980px;
    table-layout: fixed;
}
.super-company-table th,
.super-company-table td {
    vertical-align: middle;
}
.super-company-table th:nth-child(1),
.super-company-table td:nth-child(1) { width: 18%; }
.super-company-table th:nth-child(2),
.super-company-table td:nth-child(2) { width: 13%; text-align: center; }
.super-company-table th:nth-child(3),
.super-company-table td:nth-child(3) { width: 15%; }
.super-company-table th:nth-child(4),
.super-company-table td:nth-child(4) { width: 19%; }
.super-company-table th:nth-child(5),
.super-company-table td:nth-child(5) { width: 10%; text-align: center; }
.super-company-table th:nth-child(6),
.super-company-table td:nth-child(6) { width: 16%; text-align: center; }
.super-company-table th:nth-child(7),
.super-company-table td:nth-child(7) { width: 9%; text-align: center; }
.company-code-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    background: #fafafa;
    color: #111;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.super-company-name-cell,
.super-company-owner-cell,
.super-company-address-cell,
.super-company-activity-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}
.super-company-name-cell strong {
    display: block;
    margin-bottom: 3px;
}
.super-company-count-cell,
.super-company-activity-cell {
    font-weight: 800;
}
@media (max-width: 760px) {
    .super-company-table-wrap {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
    }
    .super-company-table,
    .super-company-table tbody,
    .super-company-table tr,
    .super-company-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .super-company-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .super-company-table thead {
        display: none;
    }
    .super-company-table tbody {
        display: grid;
        gap: 10px;
    }
    .super-company-table tr {
        padding: 13px;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        background: #fff;
    }
    .super-company-table td {
        padding: 0;
        border: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .super-company-table td + td {
        margin-top: 8px;
    }
    .super-company-table td::before {
        display: block;
        margin-bottom: 2px;
        color: #888;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.2;
    }
    .super-company-table td:nth-child(1)::before { content: '회사명'; }
    .super-company-table td:nth-child(2)::before { content: '회사코드'; }
    .super-company-table td:nth-child(3)::before { content: '대표자/전화'; }
    .super-company-table td:nth-child(4)::before { content: '주소'; }
    .super-company-table td:nth-child(5)::before { content: '직원'; }
    .super-company-table td:nth-child(6)::before { content: '최근 사용'; }
    .super-company-table td:nth-child(7)::before { content: '상태'; }
    .company-code-pill {
        max-width: 100%;
    }
}

/* Super admin company table width/column refinement */
.super-admin-page:has(.super-company-card) {
    max-width: 1120px;
}
.super-company-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.super-company-table th:nth-child(1),
.super-company-table td:nth-child(1) { width: 42%; text-align: left; }
.super-company-table th:nth-child(2),
.super-company-table td:nth-child(2) { width: 14%; text-align: center; }
.super-company-table th:nth-child(3),
.super-company-table td:nth-child(3) { width: 12%; text-align: center; }
.super-company-table th:nth-child(4),
.super-company-table td:nth-child(4) { width: 22%; text-align: center; }
.super-company-table th:nth-child(5),
.super-company-table td:nth-child(5) { width: 10%; text-align: center; }
.super-company-subline {
    margin-top: 3px;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.super-company-activity-cell {
    color: #333;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}
.super-activity-label {
    display: block;
    color: #555;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 760px) {
    .super-admin-page:has(.super-company-card) {
        max-width: 100%;
    }
    .super-company-table td:nth-child(1)::before { content: none; }
    .super-company-table td:nth-child(2)::before { content: '회사코드'; }
    .super-company-table td:nth-child(3)::before { content: '직원/재직'; }
    .super-company-table td:nth-child(4)::before { content: '최근 사용'; }
    .super-company-table td:nth-child(5)::before { content: '상태'; }
    .super-company-name-cell strong {
        display: block;
        margin-bottom: 5px;
        font-size: 16px;
    }
}

/* Super admin company operating cards */
.super-company-card {
    padding: 20px;
}
.super-company-section-head {
    align-items: flex-start;
}
.super-company-search {
    flex: 0 1 340px;
    min-width: min(100%, 260px);
    margin-left: auto;
}
.super-company-search input {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 750;
}
.super-company-search input:focus {
    border-color: #f97316;
    outline: 2px solid rgba(249, 115, 22, .14);
    outline-offset: 0;
}
.super-company-search-empty {
    margin: 10px 0 0;
}
.super-company-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    align-items: stretch;
}
.super-company-overview-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}
.super-company-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.super-company-title-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.super-company-title-wrap h2 {
    margin: 0;
    color: #111;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.super-company-status-badge {
    flex: 0 0 auto;
    margin: 0;
}
.super-company-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(160px, 1fr) minmax(0, 1.2fr);
    gap: 14px;
}
.super-company-info-block {
    min-width: 0;
    padding: 14px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background: #fcfcfc;
}
.super-company-info-block h3 {
    margin: 0 0 10px;
    color: #333;
    font-size: 14px;
    font-weight: 850;
}
.super-company-info-block dl {
    display: grid;
    gap: 7px;
    margin: 0;
}
.super-company-info-block dl > div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
.super-company-info-block dt {
    color: #777;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}
.super-company-info-block dd {
    margin: 0;
    color: #222;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.super-company-empty-use {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}
.super-company-status-badge.ok {
    background: #e8f5ec;
    color: #2f6b45;
}
.super-company-status-badge.warn {
    background: #fff3d5;
    color: #8a5a00;
}
.super-company-status-badge.danger-badge {
    background: #fdecec;
    color: #b42318;
}
.super-company-status-badge:not(.ok):not(.warn):not(.danger-badge) {
    background: #eef2f3;
    color: #555;
}
@media (max-width: 760px) {
    .super-company-card {
        padding: 16px;
    }
    .super-company-overview-card {
        padding: 16px;
        border-radius: 14px;
    }
    .super-company-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .super-company-title-wrap h2 {
        font-size: 19px;
    }
    .super-company-card-body {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .super-company-info-block {
        padding: 12px;
    }
    .super-company-info-block dl > div {
        grid-template-columns: 68px minmax(0, 1fr);
    }
}


.super-company-compact-card {
    gap: 7px;
    min-height: 0;
    padding: 12px;
}
.super-company-summary-head {
    align-items: flex-start;
    gap: 7px;
}
.super-company-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
}
.super-company-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #222;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.super-company-code {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #717784;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.super-company-status-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}
.super-company-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #64707d;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.super-company-status-pill.ok {
    background: #e8f5ec;
    color: #2f6b45;
}
.super-company-status-pill.warn {
    background: #fff2d8;
    color: #9a5b00;
}
.super-company-status-pill.danger-badge {
    background: #fdecec;
    color: #b42318;
}
.super-company-status-pill.is-subscribed,
.super-company-status-pill.is-paid-plan {
    background: #fff0e8;
    color: #c2410c;
}
.super-company-status-pill.is-canceled {
    background: #fdecec;
    color: #b42318;
}
.super-company-status-pill.is-inactive {
    background: #f1f3f5;
    color: #7a8491;
}
.super-company-status-pill.is-warning {
    background: #fff2d8;
    color: #9a5b00;
}
.super-company-status-pill.is-urgent {
    animation: billing-urgent-pulse 1.8s ease-in-out infinite;
    background: #ffe2df;
    color: #b42318;
    box-shadow: 0 0 0 1px rgba(180, 35, 24, .16);
}
.super-company-status-pill.is-danger {
    background: #b42318;
    color: #fff;
}
.super-company-status-pill.is-plan-over-limit {
    animation: billing-urgent-pulse 1.7s ease-in-out infinite;
    background: #b42318;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(180, 35, 24, .18);
}
.super-company-detail-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
}
.super-company-summary-lines {
    gap: 2px;
    padding: 4px 0 0;
    border-top-color: #f5f5f5;
    font-size: 13px;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}
.super-company-employee-count.is-over-limit,
.super-company-plan-warning-text {
    color: #b42318;
    font-weight: 950;
}
.super-company-plan-warning-text {
    font-size: 11px;
}
.super-company-contact-lines {
    padding-top: 0;
    border-top: 0;
}
.super-company-contact-lines div {
    overflow-wrap: break-word;
    word-break: normal;
}
.super-addon-badge-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
}
.super-company-summary-actions {
    margin-top: auto;
    padding-top: 2px;
}
.super-billing-badge {
    background: #eef2f3;
    color: #475569;
}
.super-billing-badge.ok,
.super-billing-badge.billing-state--active {
    background: #e8f5ec;
    color: #2f6b45;
}
.super-billing-badge.billing-state--due {
    background: #fff2d8;
    color: #9a5b00;
}
.super-billing-badge.billing-state--expired {
    background: #fdecec;
    color: #b42318;
}
.super-addon-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}
.super-addon-badge.is-enabled {
    background: #fff0e8;
    color: #c2410c;
}
.super-addon-badge.is-disabled {
    background: #f1f3f5;
    color: #8a94a3;
}
@media (min-width: 1280px) {
    .super-company-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 980px) {
    .super-company-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .super-company-section-head {
        align-items: stretch;
    }
    .super-company-search {
        flex-basis: auto;
        margin-left: 0;
        min-width: 0;
        width: 100%;
    }
    .super-company-list {
        grid-template-columns: 1fr;
    }
}
.billing-info-button--due {
    border-color: #ffc766;
    background: #fff7e6;
    color: #9a5b00;
}
.billing-info-button--expired {
    border-color: #f7b4ad;
    background: #fff1f0;
    color: #b42318;
}
.super-company-modal-layer {
    z-index: 70;
    padding: 20px;
    overscroll-behavior: contain;
}
.super-company-modal-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    width: min(920px, calc(100vw - 36px));
    max-height: 85vh;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(15, 23, 42, .22);
}
.super-company-modal-head {
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.super-company-modal-head h2 {
    margin: 0;
    color: #111;
    font-size: 21px;
    font-weight: 900;
}
.super-company-modal-head p {
    margin: 4px 0 0;
}
.super-company-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 22px;
    line-height: 1;
}
.super-company-modal-body {
    display: grid;
    gap: 9px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 14px;
}
.super-company-modal-summary {
    margin-top: 0;
}
.super-company-modal-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
}
.super-company-modal-info > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
}
.super-company-modal-info dt {
    color: #777;
    font-size: 12px;
    font-weight: 850;
}
.super-company-modal-info dd {
    margin: 0;
    color: #222;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.super-company-plan-summary dd.billing-state--active,
.super-payment-context-grid strong.billing-state--active {
    background: transparent;
    color: #2f6b45;
}
.super-company-plan-summary dd.billing-state--due,
.super-payment-context-grid strong.billing-state--due {
    background: transparent;
    color: #9a5b00;
}
.super-company-plan-summary dd.billing-state--expired,
.super-payment-context-grid strong.billing-state--expired {
    background: transparent;
    color: #b42318;
}
.super-billing-form,
.super-billing-section,
.super-payment-list {
    display: grid;
    gap: 8px;
}
.super-billing-section,
.super-feature-section {
    padding: 9px 10px;
    border: 1px solid #f2f2f2;
    border-radius: 9px;
    background: #fff;
}
.super-billing-section h3,
.super-feature-section h3 {
    margin: 0;
    color: #333;
    font-size: 13px;
    font-weight: 850;
}
.super-billing-section-head,
.super-feature-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.super-billing-section-head p,
.super-feature-section-head p {
    margin: 2px 0 0;
    color: #999;
    font-size: 11px;
    line-height: 1.35;
}
.super-billing-form-grid,
.super-billing-compact-grid,
.super-payment-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    align-items: end;
}
.super-billing-wide,
.super-payment-memo {
    grid-column: span 2;
}
.super-billing-check {
    min-height: 44px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}
.super-feature-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.super-feature-modal-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 850;
}
.super-feature-modal-row.is-enabled {
    border-color: #cfe8d8;
    background: #fbfffc;
    color: #2f6b45;
}
.super-feature-manual-list {
    display: grid;
    gap: 7px;
}
.super-feature-manual-row {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid #eeeeee;
    border-radius: 9px;
    background: #fff;
}
.super-feature-manual-row > input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #f97316;
}
.super-feature-manual-row > strong {
    min-width: 0;
    color: #222;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.super-feature-subscription-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.super-feature-subscription-pill.is-subscribed,
.super-feature-subscription-pill.is-paid-plan {
    background: #fff0e8;
    color: #c2410c;
}
.super-feature-subscription-pill.is-manual {
    background: #e8f5ec;
    color: #2f6b45;
}
.super-feature-subscription-pill.is-inactive {
    background: #f1f3f5;
    color: #7a8491;
}
.super-feature-subscription-pill.is-plan {
    background: #f1f3f5;
    color: #64707d;
}
.super-feature-subscription-pill.is-plan.is-paid-plan {
    background: #fff0e8;
    color: #c2410c;
}
.super-feature-subscription-pill.is-canceled {
    background: #fdecec;
    color: #b42318;
}
.super-feature-subscription-pill.is-warning {
    background: #fff2d8;
    color: #9a5b00;
}
.super-feature-subscription-pill.is-urgent {
    animation: billing-urgent-pulse 1.8s ease-in-out infinite;
    background: #ffe2df;
    color: #b42318;
    box-shadow: 0 0 0 1px rgba(180, 35, 24, .16);
}
.super-feature-subscription-pill.is-danger {
    background: #b42318;
    color: #fff;
}
@keyframes billing-urgent-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(180, 35, 24, .16), 0 0 0 0 rgba(180, 35, 24, .18); }
    50% { box-shadow: 0 0 0 1px rgba(180, 35, 24, .22), 0 0 0 4px rgba(180, 35, 24, .08); }
}
.super-subscription-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 24px;
}
.super-feature-compact-list-modal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.super-feature-compact-list-modal .super-feature-manual-row {
    display: inline-flex;
    grid-template-columns: none;
    width: auto;
    gap: 4px;
    min-height: 24px;
    padding: 3px 5px;
    border-radius: 7px;
}
.super-feature-compact-list-modal .super-feature-manual-row > input[type="checkbox"] {
    width: 12px;
    height: 12px;
}
.super-feature-compact-list-modal .super-feature-manual-row > strong {
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
}
.super-feature-compact-list-modal .super-feature-subscription-pill {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 9px;
}
.super-payment-add-inline {
    grid-template-columns: 120px 90px 120px 140px minmax(160px, 1fr) 56px;
    gap: 6px;
    align-items: end;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.super-payment-add-section {
    padding: 8px 10px;
    gap: 6px;
}
.super-payment-add-inline .field span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.super-payment-add-inline input,
.super-payment-add-inline select {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 13px;
}
.super-payment-amount-field {
    position: relative;
}
.super-payment-price-hint {
    position: absolute;
    left: 2px;
    bottom: -15px;
    color: #9a5b00;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.super-payment-add-inline button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 56px;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
}
.super-payment-add-inline .super-payment-memo {
    grid-column: auto;
}
.super-company-modal-actions {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin: 0 -16px -14px;
    padding: 8px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.super-payment-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.super-payment-context-grid > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #ececec;
    border-radius: 9px;
    background: #fff;
}
.super-payment-context-grid span {
    color: #777;
    font-size: 11px;
    font-weight: 850;
}
.super-payment-context-grid strong {
    color: #222;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.super-company-deactivate-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0;
    padding-top: 2px;
}
.super-payment-item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
}
.super-payment-cancel-form {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}
.super-payment-add-form {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.super-payment-history-list {
    display: grid;
    gap: 5px;
}
.super-payment-history-row {
    display: grid;
    grid-template-columns: 84px minmax(80px, 1fr) 82px 72px 72px minmax(100px, 1.2fr) 48px;
    gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #f0f0f0;
    border-radius: 7px;
    background: #fff;
    color: #333;
    font-size: 11px;
    font-weight: 800;
}
.super-payment-history-row span {
    min-width: 0;
    overflow-wrap: break-word;
}
.super-payment-history-action {
    display: flex;
    justify-content: flex-end;
}
.super-payment-cancel-button {
    min-height: 24px;
    padding: 0 7px;
    border-color: #f1c7c2;
    background: #fffafa;
    color: #b42318;
    font-size: 10px;
    box-shadow: none;
}
@media (max-width: 1100px) {
    .super-feature-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 980px) {
    .super-billing-form-grid,
    .super-billing-compact-grid,
    .super-payment-form,
    .super-payment-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .super-billing-wide,
    .super-payment-memo {
        grid-column: span 2;
    }
}
@media (max-width: 760px) {
    .super-company-compact-card {
        padding: 12px;
    }
    .super-company-summary-head {
        align-items: flex-start;
        flex-direction: row;
    }
    .super-feature-compact-list,
    .super-feature-modal-grid,
    .super-billing-form-grid,
    .super-billing-compact-grid,
    .super-payment-form,
    .super-payment-context-grid,
    .super-company-modal-info {
        grid-template-columns: 1fr;
    }
    .super-billing-wide,
    .super-payment-memo {
        grid-column: auto;
    }
    .super-billing-section-head,
    .super-feature-section-head {
        align-items: stretch;
        flex-direction: column;
    }
    .super-company-modal-layer {
        padding: 12px;
    }
    .super-company-modal-card {
        width: calc(100vw - 24px);
        max-height: 85vh;
    }
    .super-company-modal-head {
        padding: 14px;
    }
    .super-company-modal-body {
        padding: 12px;
    }
    .super-company-modal-actions {
        bottom: -12px;
        margin: 0 -12px -12px;
        padding: 8px 12px;
    }
    .super-feature-manual-row,
    .super-payment-history-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .super-feature-compact-list-modal .super-feature-manual-row {
        width: auto;
    }
    .super-payment-add-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .super-payment-add-inline .super-payment-memo {
        grid-column: span 2;
    }
}


/* Super admin access dashboard */
.access-dashboard-card {
    display: grid;
    gap: 16px;
}
.access-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}
.access-summary-card {
    display: grid;
    gap: 6px;
    min-height: 78px;
    padding: 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fcfcfc;
}
.access-summary-card span {
    color: #666;
    font-size: 12px;
    font-weight: 850;
}
.access-summary-card strong {
    color: #111;
    font-size: 21px;
    font-weight: 950;
    line-height: 1.1;
}
.access-summary-card-time {
    align-content: center;
}
.access-summary-card .access-summary-time {
    display: grid;
    gap: 2px;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.18;
    white-space: normal;
}
.access-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.access-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background: #fff;
}
.access-panel-wide {
    grid-column: 1 / -1;
}
.access-panel-head h2 {
    margin: 0;
    color: #222;
    font-size: 15px;
    font-weight: 900;
}
.access-panel-head p {
    margin: 4px 0 0;
    color: #777;
    font-size: 12px;
    font-weight: 750;
}
.access-table-wrap {
    overflow-x: auto;
}
.access-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.access-table th,
.access-table td {
    padding: 8px 7px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    white-space: nowrap;
}
.access-table th {
    color: #666;
    font-weight: 900;
}
.access-table td {
    color: #222;
    font-weight: 700;
}
.access-device-list {
    display: grid;
    gap: 8px;
}
.access-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fcfcfc;
    font-size: 13px;
    font-weight: 850;
}
@media (max-width: 1100px) {
    .access-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .access-summary-grid,
    .access-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .access-summary-card {
        min-height: auto;
    }
}

/* Employee tax report sensitive-info block */
.tax-report-box {
    display: grid;
    gap: 10px;
}
.tax-report-box h3 {
    margin-bottom: 0;
}
.resident-id-status {
    margin: 0;
    color: #333;
    font-size: 12px;
    font-weight: 850;
}
.resident-consent-check {
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}
.resident-consent-check input {
    flex: 0 0 auto;
    margin-top: 2px;
}
.resident-consent-check span {
    min-width: 0;
}



/* Employee tax information prompt */
.tax-info-alert,
.tax-info-complete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 16px 8px auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.tax-info-alert {
    border: 1px solid #f7cf7a;
    background: #fff4cf;
    color: #8a5a00;
    cursor: pointer;
    box-shadow: none;
}
.tax-info-alert:hover,
.tax-info-alert:active {
    background: #ffe9ad;
    color: #714700;
}
.tax-info-alert-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #f4b942;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}
.tax-info-complete {
    border: 1px solid #d8eadc;
    background: #eef8f0;
    color: #2f6b45;
}
.tax-info-modal-card {
    width: min(460px, 100%);
    border-radius: 18px;
}
.tax-info-modal-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
}
.tax-info-modal-card input[name="resident_id"] {
    letter-spacing: .02em;
}
@media (max-width: 640px) {
    .tax-info-alert,
    .tax-info-complete {
        margin-right: 12px;
        margin-left: 12px;
        max-width: calc(100% - 24px);
        font-size: 12px;
    }
    .tax-info-modal-card {
        max-height: calc(100dvh - 36px);
        overflow-y: auto;
        padding: 20px;
    }
}


/* iPhone Safari-safe tax modal behavior */
body.modal-open {
    overflow: hidden;
}
.tax-info-modal-layer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.tax-info-modal-layer .tax-info-modal-card {
    width: min(92vw, 480px);
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    margin: 0 auto;
}
.tax-info-modal-card input,
.tax-info-modal-card button,
.tax-info-modal-card label,
.tax-info-modal-card select,
.tax-info-modal-card textarea,
.tax-info-modal-card .resident-consent-check {
    font-size: 16px;
}
.tax-info-modal-card input[name="resident_id"] {
    font-size: 16px;
    line-height: 1.3;
}
.tax-info-modal-card .resident-consent-check {
    line-height: 1.45;
}
.tax-info-modal-card .modal-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}
.tax-info-modal-card .modal-actions button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    font-weight: 900;
}
.tax-info-modal-card .modal-actions .primary {
    background: #ffe1c2;
    color: #9a5720;
}
.tax-info-modal-card .modal-actions .primary:hover,
.tax-info-modal-card .modal-actions .primary:active {
    background: #ffd5aa;
    color: #814611;
}
.tax-info-modal-card .modal-actions .secondary {
    background: #f3f4f6;
    color: #374151;
}
.tax-info-modal-card .modal-actions .secondary:hover,
.tax-info-modal-card .modal-actions .secondary:active {
    background: #e7e9ed;
    color: #111827;
}
@media (max-width: 640px) {
    .tax-info-modal-layer {
        align-items: flex-start;
        justify-content: center;
        padding-top: calc(env(safe-area-inset-top) + 56px);
        padding-bottom: calc(env(safe-area-inset-bottom) + 180px);
        padding-left: 14px;
        padding-right: 14px;
    }
    .tax-info-modal-layer .tax-info-modal-card {
        width: min(92vw, 480px);
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        margin: 0 auto;
        overflow-y: auto;
    }
}

.tax-modal-inline-error {
    padding: 10px 12px;
    border: 1px solid #f3b6b6;
    border-radius: 10px;
    background: #fff2f2;
    color: #b42318;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.45;
}
.tax-modal-inline-error[hidden] {
    display: none;
}


/* Employee card list */
.employee-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.employee-list-head h2 {
    margin: 0;
    line-height: 1.25;
}
.employee-contract-pay-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.employee-contract-pay-card div {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.employee-contract-pay-card span {
    color: #666;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.employee-contract-pay-card strong {
    min-width: 0;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.employee-status-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.employee-status-filters legend {
    padding: 0;
    border: 0;
}
.employee-status-filters label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.employee-status-filters input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #333;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.employee-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    align-items: stretch;
}
.employee-summary-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
}
.employee-summary-card.employee-filter-hidden {
    display: none;
}
.employee-summary-card[hidden] {
    display: none !important;
}
.employee-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
}
.employee-summary-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.employee-summary-title strong {
    min-width: 0;
    color: #222;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}
.employee-summary-memo,
.employee-summary-meta strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.employee-summary-contact {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}
.employee-summary-head .badge {
    flex: 0 0 auto;
    margin: 0;
}
.employee-summary-contact {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 0 1px;
    border-top: 1px solid #f0f0f0;
    color: #333;
    font-size: 13px;
    line-height: 1.35;
}
.employee-summary-contact > div:first-child {
    min-width: 0;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.employee-summary-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.employee-summary-meta > div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    min-width: 0;
    padding: 6px 0;
    border-bottom: 1px solid #f2f2f2;
    background: transparent;
}
.employee-summary-meta > div:last-child {
    border-bottom: 0;
}
.employee-summary-meta > div.wide {
    grid-column: auto;
}
.employee-summary-meta span {
    display: block;
    color: #777;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}
.employee-summary-meta strong {
    display: block;
    color: #222;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}
.employee-device-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: wrap;
}
.employee-device-value strong {
    display: inline;
}
.employee-device-reset-form {
    display: inline-flex;
    margin: 0;
}
.employee-device-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #f7f7f7;
    color: #444;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}
.employee-device-reset-button:hover,
.employee-device-reset-button:active {
    background: #eeeeee;
    color: #222;
}
.employee-contract-row strong {
    overflow-wrap: normal;
    word-break: keep-all;
}
.employee-type-row strong,
.employee-device-value strong,
.employee-device-reset-button {
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
}
.employee-summary-meta em {
    display: block;
    margin-top: 2px;
    color: #666;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}
.employee-contract-sub {
    max-width: 100%;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.employee-summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 2px;
}
.employee-summary-actions form {
    display: inline-flex;
    margin: 0;
}
.employee-summary-actions .employee-action-button {
    width: auto;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
}
.employee-summary-head-actions .employee-edit-action {
    border-color: #fed7aa;
    background: #ffe1c2;
    color: #9a5720;
    box-shadow: 0 1px 0 rgba(154, 87, 32, .08);
}
.employee-summary-head-actions .employee-edit-action:hover,
.employee-summary-head-actions .employee-edit-action:focus-visible {
    background: #ffd5aa;
    color: #814611;
}
.employee-card-empty {
    display: none;
    margin: 10px 0 0;
}
.employee-card-empty.is-visible {
    display: block;
}
@media (min-width: 1280px) {
    .employee-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .employee-list-head {
        align-items: stretch;
    }
    .employee-status-filters {
        justify-content: flex-start;
    }
    .employee-status-filters label {
        flex: 0 1 auto;
    }
    .employee-contract-pay-card {
        align-items: stretch;
        flex-direction: column;
    }
    .employee-summary-card {
        padding: 10px;
    }
    .employee-summary-meta > div {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 5px;
    }
    .employee-summary-title strong {
        font-size: 14px;
    }
    .employee-summary-contact {
        font-size: 11px;
    }
    .employee-summary-actions .employee-action-button {
        min-height: 26px;
        padding: 0 7px;
        font-size: 11px;
    }
}
@media (max-width: 360px) {
    .employee-card-grid {
        grid-template-columns: 1fr;
    }
}



/* Company notices */
.notice-admin-card {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
}
.notice-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.notice-admin-head h2 { margin: 0 0 3px; font-size: 17px; }
.notice-admin-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) auto auto; gap: 8px; align-items: end; }
.notice-admin-form label { display: grid; gap: 4px; color: #555; font-size: 12px; font-weight: 800; }
.notice-admin-form input[type="text"], .notice-admin-form input[type="number"], .notice-admin-form select, .notice-admin-form textarea { width: 100%; border: 1px solid #ddd; border-radius: 7px; padding: 8px 9px; font: inherit; }
.notice-admin-form .check { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; }
.notice-admin-list { display: grid; gap: 8px; margin-top: 12px; }
.notice-admin-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #ededed; border-radius: 8px; background: #fafafa; }
.notice-admin-item.is-inactive { opacity: .6; }
.notice-admin-item strong { display: block; color: #111; font-size: 14px; }
.notice-admin-item p { margin: 4px 0; color: #444; font-size: 13px; line-height: 1.4; }
.notice-admin-read-count { display: inline-flex; margin-top: 4px; color: #222; font-size: 12px; font-weight: 900; }
.notice-admin-board { margin: 0 0 14px; }
.notice-admin-board .notice-admin-head { max-width: none; margin-bottom: 10px; }
.notice-admin-board .notice-admin-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    justify-content: start;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    margin-top: 0;
}
.notice-admin-board .notice-admin-card,
.notice-admin-board .notice-admin-item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 280px;
    padding: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
}
.notice-admin-board .notice-admin-create-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.notice-admin-card-label { color: #222; font-size: 14px; font-weight: 900; line-height: 1.25; }
.notice-admin-board .notice-admin-form label { display: grid; gap: 4px; color: #666; font-size: 12px; font-weight: 850; line-height: 1.25; }
.notice-admin-board .notice-admin-form input[type="text"],
.notice-admin-board .notice-admin-form textarea { width: 100%; border: 1px solid #ddd; border-radius: 7px; padding: 7px 8px; font: inherit; font-size: 13px; }
.notice-admin-board .notice-admin-form input[type="text"] { min-height: 31px; }
.notice-admin-board .notice-admin-form textarea { min-height: 92px; resize: vertical; line-height: 1.35; }
.notice-admin-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.notice-admin-board .notice-admin-form .check { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; color: #555; font-size: 12px; }
.notice-admin-board .notice-admin-form .primary.small-button { min-height: 26px; padding: 0 9px; font-size: 11px; }
.notice-admin-board .notice-admin-item { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px; background: #fff; }
.notice-admin-item-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; padding-bottom: 30px; }
.notice-admin-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; min-width: 0; }
.notice-admin-item-top strong { display: block; min-width: 0; color: #222; font-size: 15px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.notice-admin-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 0 auto; }
.notice-admin-date { display: block; margin-top: 2px; color: #777; font-size: 11px; font-weight: 800; line-height: 1.25; }
.notice-admin-board .notice-admin-item p { flex: 1 1 auto; min-height: 0; max-height: none; margin: 6px 0 0; color: #333; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; overflow-y: auto; padding-right: 2px; }
.notice-admin-board .notice-admin-read-count { position: absolute; left: 12px; bottom: 12px; display: inline-flex; width: fit-content; margin: 0; padding: 3px 7px; border-radius: 999px; background: #f2f3f5; color: #333; font-size: 11px; font-weight: 800; line-height: 1.2; }
.notice-admin-delete-form { position: absolute; right: 12px; bottom: 12px; display: flex; justify-content: flex-end; flex: 0 0 auto; margin: 0; }
.notice-admin-delete-form .danger.small-button { min-height: 22px; padding: 0 7px; border: 1px solid #f4b4b4; border-radius: 999px; background: #fff; color: #b42318; font-size: 11px; font-weight: 800; box-shadow: none; }
.notice-admin-delete-form .danger.small-button:hover,
.notice-admin-delete-form .danger.small-button:active { background: #fff1f1; color: #9f1d14; }
.notice-admin-empty { display: block; }
@media (max-width: 640px) { .notice-admin-board .notice-admin-list { grid-template-columns: 1fr; } }
.id-card-notice-box { border-top: 1px solid #ededed; padding-top: 9px; }
.id-card-notice-toast {
    position: absolute;
    left: 50%;
    top: 48px;
    z-index: 2;
    transform: translate(-50%, 0);
    padding: 6px 10px;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: rgba(224, 242, 254, .96);
    color: #0369a1;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    animation: noticeToastFade 2.4s ease forwards;
}
.id-card-notice-list { display: grid; grid-auto-rows: max-content; align-content: start; align-items: start; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.id-card-notice-item { align-self: start; height: auto; min-height: 0; padding: 12px; border: 1px solid #ededed; border-radius: 10px; background: #fafafa; }
.id-card-notice-item strong { display: block; color: #111; font-size: 13px; font-weight: 900; line-height: 1.35; }
.id-card-notice-item span { display: block; margin-top: 3px; color: #777; font-size: 11px; font-weight: 800; }
.id-card-notice-item p { margin: 7px 0 0; color: #444; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.id-card-notice-pin { display: inline-flex; align-items: center; min-height: 18px; padding: 0 5px; border-radius: 999px; background: #e7f7ed; color: #176b37; font-size: 10px; font-weight: 900; }
.id-card-notice-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 24px;
    min-height: 0;
    margin-top: 7px;
    padding: 3px 8px;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.id-card-notice-confirm { margin-top: 7px; }
.id-card-notice-confirm button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 24px;
    min-height: 0;
    border: 0;
    border-radius: 999px;
    background: #ffe1c2;
    color: #9a5720;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.id-card-notice-confirm button:hover,
.id-card-notice-confirm button:focus { background: #ffd5aa; color: #814611; }
.id-card-empty-record.compact { margin: 10px 0 0; }
@media (max-width: 760px) {
    .notice-admin-form { grid-template-columns: 1fr; }
    .notice-admin-item { display: block; }
    .notice-admin-item form { margin-top: 8px; }
}

.admin-name-pill { min-height: 34px; padding: 0 13px; border: 1px solid #dfdfdf; border-radius: 999px; background: #fff; color: #333; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
button.admin-action-pill { cursor: pointer; }

.records-toolbar .records-subtabs { margin: 0; max-width: 100%; }
.employee-card-actions-only { justify-content: flex-end; min-height: 34px; }
.employee-card-actions-only .employee-topbar-actions { margin-left: auto; }
@media (max-width: 768px) { body.employee-card-page .employee-card-actions-only { flex: 0 0 auto; min-height: 34px; padding-bottom: 0; } }

.id-card-contract-document-box {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.id-card-contract-pending-note {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #fcd34d;
    border-radius: 7px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}
.id-card-contract-view-button,
.id-card-contract-print-button {
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #fed7aa;
    background: #ffe1c2;
    color: #9a5720;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(154, 87, 32, .08);
}
.id-card-contract-view-button.small {
    width: auto;
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
}
.id-card-contract-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.id-card-contract-footer .id-card-back,
.id-card-contract-footer .id-card-contract-view-button {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}
.id-card-contract-view-button:hover,
.id-card-contract-view-button:active,
.id-card-contract-print-button:hover,
.id-card-contract-print-button:active {
    background: #ffd5aa;
    color: #814611;
}
.id-card-contract-print-button {
    justify-self: center;
    width: auto;
    max-width: min(190px, 100%);
    min-height: 38px;
    margin: 4px auto 0;
    padding: 6px 16px;
    border-color: #fed7aa;
    border-radius: 999px;
    background: #ffe1c2;
    color: #9a5720;
    font-size: 12px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.id-card-contract-print-button:hover,
.id-card-contract-print-button:active {
    background: #ffd5aa;
    color: #814611;
}
.id-card-contract-history {
    display: grid;
    gap: 6px;
}
.id-card-contract-history > strong {
    color: #111;
    font-size: 13px;
    font-weight: 950;
}
.id-card-contract-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fafafa;
}
.id-card-contract-history-item > div {
    min-width: 0;
}
.id-card-contract-history-item strong,
.id-card-contract-history-item span {
    display: block;
    line-height: 1.3;
}
.id-card-contract-history-item strong {
    color: #111;
    font-size: 13px;
    font-weight: 900;
}
.id-card-contract-history-item span {
    color: #666;
    font-size: 11px;
    font-weight: 800;
}
.id-card-contract-printable-label,
.id-card-contract-voided-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e8f5ec;
    color: #2f6b45;
    font-size: 11px;
    font-weight: 900;
}
.id-card-contract-voided-label {
    background: #eef2f3;
    color: #6b7280;
}
.id-card-contract-document-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #222;
    font-size: 13px;
    font-weight: 900;
}
.id-card-contract-document-head span {
    color: #777;
    font-size: 11px;
    font-weight: 800;
}
.id-card-contract-document-view summary {
    cursor: pointer;
    color: #c15d12;
    font-size: 13px;
    font-weight: 900;
}
.id-card-contract-document-html {
    max-height: min(340px, 46vh);
    margin-top: 8px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 7px;
    background: #fafafa;
    color: #222;
    font-size: 12px;
    line-height: 1.45;
}
.id-card-contract-detail-panel {
    display: none;
    min-height: 0;
    overflow: hidden;
}
.id-card-contract-detail-panel.active {
    display: grid;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.id-card-contract-detail .id-card-contract-document-html {
    flex: 1 1 auto;
}
.id-card-contract-detail-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.id-card-contract-detail-footer .id-card-back {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}
.id-card-contract-detail-footer .id-card-back.secondary {
    background: #efefef;
    color: #111;
}
@media (max-width: 380px) {
    .id-card-contract-detail-footer {
        gap: 6px;
    }
    .id-card-contract-detail-footer .id-card-back {
        padding: 0 8px;
        font-size: 12px;
    }
}
.id-card-contract-document-html h2,
.id-card-contract-document-html h3 {
    margin: 0 0 7px;
    font-size: 15px;
}
.id-card-contract-document-html h2 {
    font-size: 17px;
}
.id-card-contract-document-html section {
    margin-bottom: 10px;
}
.id-card-contract-document-html p {
    margin: 4px 0;
    overflow-wrap: anywhere;
}
.id-card-contract-document-html dl {
    display: grid;
    gap: 5px;
    margin: 0;
}
.id-card-contract-document-html dl div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
}
.id-card-contract-document-html dt {
    color: #666;
    font-weight: 900;
}
.id-card-contract-document-html dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.id-card-contract-document-html table {
    width: 100%;
    border-collapse: collapse;
}
.id-card-contract-document-html th,
.id-card-contract-document-html td {
    padding: 5px;
    border: 1px solid #e5e7eb;
    text-align: left;
}
.id-card-contract-document-html .contract-document-alert {
    padding: 8px;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-weight: 850;
}
.id-card-contract-document-html .contract-document-todo {
    color: #6b7280;
    font-size: 11px;
}
.id-card-contract-document-html .contract-document-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.id-card-contract-document-html .contract-document-signatures > div {
    padding: 9px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #fff;
}
.id-card-contract-document-html .contract-document-signatures h3 {
    text-align: center;
}
@media (max-width: 380px) {
    .id-card-contract-document-html .contract-document-signatures {
        grid-template-columns: 1fr;
    }
}
.id-card-contract-confirm-form {
    display: grid;
    gap: 7px;
}
.id-card-contract-confirm-form .check {
    align-items: flex-start;
    line-height: 1.45;
}
.id-card-contract-confirm-form .check input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.employee-contract-confirmed-at {
    display: inline-block;
    margin-left: 6px;
    line-height: 1.4;
}
.admin-contract-documents-box {
    display: grid;
    gap: 10px;
}
.admin-contract-document-list {
    display: grid;
    gap: 8px;
}
.admin-contract-document-item {
    padding: 9px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.admin-contract-document-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-weight: 900;
}
.admin-contract-document-item summary small {
    color: #777;
    font-size: 11px;
    font-weight: 800;
}
.admin-contract-document-view-hint {
    color: #c96b1c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.admin-contract-document-item summary:hover .admin-contract-document-view-hint {
    color: #9a5720;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.admin-contract-document-html {
    max-height: 420px;
    margin: 9px 0;
    overflow: auto;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 7px;
    background: #fafafa;
    color: #222;
    font-size: 12px;
    line-height: 1.45;
}
.admin-contract-document-html .contract-document-terms,
.admin-contract-document-html .contract-document-summary,
.admin-contract-document-html .contract-document-signatures dl {
    display: grid;
    gap: 6px;
}
.admin-contract-document-html .contract-document-terms div,
.admin-contract-document-html .contract-document-summary div,
.admin-contract-document-html .contract-document-signatures dl div {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
}
.admin-contract-document-html table {
    width: 100%;
    border-collapse: collapse;
}
.admin-contract-document-html th,
.admin-contract-document-html td {
    padding: 5px;
    border: 1px solid #e5e7eb;
    text-align: left;
}
.admin-contract-document-html .contract-document-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.admin-contract-document-html .contract-document-signatures > div {
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
}
.admin-contract-document-html .contract-document-confirmed-date {
    margin: 18px 0 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}
.admin-contract-document-html .contract-document-signatures h3 {
    text-align: left;
}
.admin-contract-document-html .contract-document-signatures dt {
    width: 74px;
    white-space: nowrap;
    align-self: start;
}
.admin-contract-document-html .contract-document-signature-label.spread,
.admin-contract-document-html .contract-document-signature-label.resident-spread {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    white-space: nowrap;
}
.admin-contract-document-html .contract-document-signature-label.long {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
}
.admin-contract-document-html .contract-document-signature-mark {
    display: inline-block;
    margin-left: 8px;
    white-space: nowrap;
}

@media screen {
    .id-card-contract-document-html,
    .admin-contract-document-html {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        background: #f3f4f6;
    }

    .id-card-contract-document-html > .contract-document,
    .admin-contract-document-html > .contract-document {
        box-sizing: border-box;
        width: min(100%, 190mm);
        max-width: 190mm;
        margin: 0 auto;
        padding: clamp(16px, 3vw, 28px);
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    }

    .id-card-contract-document-html > .contract-document table,
    .admin-contract-document-html > .contract-document table {
        width: 100%;
    }
}

@media screen and (max-width: 720px) {
    .id-card-contract-document-html,
    .admin-contract-document-html {
        padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .id-card-contract-document-html > .contract-document,
    .admin-contract-document-html > .contract-document {
        width: 100%;
        min-width: 0;
        padding: 16px;
    }

    .id-card-contract-document-html > .contract-document .contract-document-signatures,
    .admin-contract-document-html > .contract-document .contract-document-signatures {
        grid-template-columns: 1fr;
    }
}

@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {
    body.admin-employees-page * {
        visibility: hidden !important;
    }
    body.admin-employees-page .admin-contract-document-item[open] [data-contract-print-area],
    body.admin-employees-page .admin-contract-document-item[open] [data-contract-print-area] * {
        visibility: visible !important;
    }
    body.admin-employees-page .admin-contract-document-item[open] [data-contract-print-area] {
        position: static;
        width: 190mm;
        max-width: 190mm;
        margin: 0 auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: #111;
        font-size: 9.2pt;
        line-height: 1.28;
        box-shadow: none;
    }
}
.id-card-contract-confirm-form .check {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #333;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}
.id-card-contract-confirm-form button {
    min-height: 34px;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    background: #ffe1c2;
    color: #9a5720;
    font-size: 13px;
    font-weight: 900;
}
.id-card-contract-confirm-form button:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}
.contract-signature-modal-layer {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.contract-signature-modal-card {
    display: grid;
    gap: 10px;
    width: min(94vw, 460px);
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
    padding: 16px;
    border-radius: 12px;
    overflow: hidden;
}
.contract-signature-modal-card h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}
.contract-signature-guide {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}
.contract-signature-pad {
    width: 100%;
    min-height: 154px;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.signature-canvas {
    display: block;
    width: 100%;
    height: clamp(150px, 31dvh, 210px);
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.contract-signature-error {
    margin: 0;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}
.contract-signature-actions {
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
}
.contract-signature-actions button {
    min-height: 42px;
    border-radius: 8px;
    font-weight: 900;
}
.id-card-contract-document-html .contract-document-signature-image {
    display: block;
    max-width: 150px;
    max-height: 52px;
    margin: 0 auto 4px;
    object-fit: contain;
}
.id-card-contract-document-html .contract-document-signature-time,
.id-card-contract-document-html .contract-document-signed-notice {
    display: block;
    color: #4b5563;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}
.id-card-contract-document-html .contract-document-signed-notice {
    margin: 8px 0;
    color: #166534;
}
.admin-contract-document-html .contract-document-signature-image {
    display: block;
    max-width: 160px;
    max-height: 56px;
    margin: 0 auto 5px;
    object-fit: contain;
}
.admin-contract-document-html .contract-document-signature-time,
.admin-contract-document-html .contract-document-signed-notice {
    display: block;
    color: #4b5563;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}
.admin-contract-document-html .contract-document-signed-notice {
    margin: 8px 0;
    color: #166534;
}
@media (max-width: 390px) {
    .contract-signature-modal-card {
        gap: 8px;
        width: calc(100vw - 18px);
        padding: 12px;
    }
    .signature-canvas {
        height: clamp(140px, 28dvh, 178px);
    }
    .contract-signature-actions button {
        min-height: 40px;
        padding-right: 6px;
        padding-left: 6px;
        font-size: 13px;
    }
}

.employee-card-compact-head { align-items: flex-start; justify-content: space-between; }
.employee-card-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding-top: 2px; }
.employee-card-identity > strong { color: #111; font-size: 15px; font-weight: 900; line-height: 1; }
.employee-card-identity .tax-info-alert,
.employee-card-identity .tax-info-complete { margin: 0; min-height: 24px; padding: 0 8px; font-size: 11px; }
.employee-card-identity .tax-info-alert-mark { width: 15px; height: 15px; font-size: 10px; }
.id-card-user-name { line-height: 1.05; }
.id-card-user-email { line-height: 1.15; transform: translateY(-3px); }
@media (max-width: 768px) { body.employee-card-page .employee-card-compact-head { flex: 0 0 auto; min-height: 38px; padding-bottom: 0; } }

.employee-card-compact-head { align-items: center; }
.employee-card-identity { flex-direction: row; align-items: center; gap: 7px; padding-top: 0; }
.employee-card-identity > strong { white-space: nowrap; }
@media (max-width: 380px) { .employee-card-identity { gap: 5px; } .employee-card-identity > strong { font-size: 14px; } .employee-card-identity .tax-info-alert, .employee-card-identity .tax-info-complete { padding: 0 6px; font-size: 10px; } }

.id-card-slider { position: relative; isolation: isolate; }
.id-card-slider::after { content: ""; position: absolute; left: 50%; bottom: 28px; z-index: 0; width: min(68vw, 280px); height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, .10) 38%, rgba(15, 23, 42, 0) 72%); pointer-events: none; }
.id-card-track, .id-card-dots { position: relative; z-index: 1; }
@media (max-width: 768px) {
    body.employee-card-page .id-card-slider::after { bottom: 30px; width: min(70vw, 270px); height: 24px; }
}

.soft-blue-action { min-height: 40px; border: 1px solid #bfdbfe; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 13px; font-weight: 900; box-shadow: 0 1px 0 rgba(14, 116, 144, .08); }
.soft-blue-action:hover,
.soft-blue-action:active { background: #bae6fd; color: #075985; }
.soft-orange-action { min-height: 40px; padding: 0 16px; border: 1px solid #fed7aa; border-radius: 999px; background: #ffe1c2; color: #9a5720; font-size: 13px; font-weight: 900; box-shadow: 0 1px 0 rgba(154, 87, 32, .08); }
.soft-orange-action:hover,
.soft-orange-action:active { background: #ffd5aa; color: #814611; }
.soft-neutral-action { min-height: 40px; padding: 0 16px; border: 1px solid #d7dce2; border-radius: 999px; background: #fff; color: #374151; font-size: 13px; font-weight: 900; box-shadow: 0 1px 0 rgba(17, 24, 39, .05); }
.soft-neutral-action:hover,
.soft-neutral-action:active { background: #f3f4f6; border-color: #c8ced6; color: #111827; }
.soft-red-action { min-height: 40px; padding: 0 16px; border: 1px solid #fecaca; border-radius: 999px; background: #fee2e2; color: #b42318; font-size: 13px; font-weight: 900; box-shadow: 0 1px 0 rgba(180, 35, 24, .08); }
.soft-red-action:hover,
.soft-red-action:active { background: #fecaca; color: #9f1d14; }
.admin-content-anchor { height: 0; scroll-margin-top: 10px; }
.records-filter-main .soft-orange-action { min-height: 40px; }
.manual-record-card > summary.soft-blue-action { width: fit-content; padding: 0 16px; list-style: none; }
.manual-record-card > summary.soft-blue-action::-webkit-details-marker { display: none; }

/* Admin records glass pass */
.records-focus-panel,
.records-glass-toolbar,
.records-management-tools,
.records-list-wrap,
.records-calendar-card {
    position: relative;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(186,217,255,.16), rgba(255,255,255,0) 42%);
    box-shadow:
        0 18px 44px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.76),
        inset 0 -14px 30px rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
}
.records-focus-panel {
    display: grid;
    gap: 16px;
    margin: 0 0 14px;
    padding: 18px;
    overflow: hidden;
}
.records-focus-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(255,255,255,.55), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 82% 12%, rgba(255,181,105,.12), rgba(255,255,255,0) 32%);
}
.records-focus-panel > * {
    position: relative;
    z-index: 1;
}
.records-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.records-focus-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.15;
}
.records-focus-head span {
    display: block;
    margin-top: 5px;
    color: #475569;
    font-size: 13px;
    font-weight: 820;
}
.records-focus-eyebrow {
    margin: 0 0 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}
.records-focus-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.records-focus-card {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 114px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.32)),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.78), rgba(255,255,255,0) 36%);
    color: #0f172a;
    text-decoration: none;
    box-shadow:
        0 12px 28px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.76),
        inset 0 -12px 22px rgba(255,255,255,.18);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.records-focus-card:hover,
.records-focus-card:active {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.84);
    box-shadow:
        0 16px 34px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.84),
        inset 0 -12px 22px rgba(255,255,255,.20);
}
.records-focus-card--blue { background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(235,248,255,.48)), radial-gradient(circle at 100% 100%, rgba(56,189,248,.18), rgba(255,255,255,0) 42%); }
.records-focus-card--amber { background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,247,237,.50)), radial-gradient(circle at 100% 100%, rgba(251,191,36,.16), rgba(255,255,255,0) 42%); }
.records-focus-card--mint { background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(236,253,245,.48)), radial-gradient(circle at 100% 100%, rgba(45,212,191,.14), rgba(255,255,255,0) 42%); }
.records-focus-card--peach { background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,237,213,.46)), radial-gradient(circle at 100% 100%, rgba(251,146,60,.14), rgba(255,255,255,0) 42%); }
.records-focus-card span {
    color: #475569;
    font-size: 12px;
    font-weight: 950;
}
.records-focus-card strong {
    display: block;
    margin: 8px 0 7px;
    color: #0f172a;
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}
.records-focus-card em {
    color: #334155;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.2;
}
.records-glass-toolbar {
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
}
.records-glass-toolbar .records-subtabs {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 14px;
    background: rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.records-glass-toolbar .records-subtabs .button {
    min-height: 34px;
    border-radius: 11px;
}
.records-glass-toolbar .records-subtabs .button.primary {
    border: 1px solid rgba(255,151,64,.40);
    background:
        linear-gradient(135deg, rgba(255,181,105,.30), rgba(255,255,255,.70));
    color: #3b2413;
    box-shadow: 0 8px 18px rgba(255,151,64,.11), inset 0 1px 0 rgba(255,255,255,.82);
}
.records-glass-toolbar .records-filter-form,
.records-glass-toolbar > .filters {
    padding: 0;
}
.records-glass-toolbar .records-filter-main {
    align-items: end;
    gap: 8px;
}
.records-glass-toolbar .field.compact span {
    color: #475569;
    font-size: 12px;
    font-weight: 920;
}
.records-glass-toolbar .field.compact input,
.records-glass-toolbar .field.compact select {
    height: 40px;
    border-color: rgba(148,163,184,.28);
    border-radius: 12px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.records-glass-toolbar > .filters:not(.records-filter-form) {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.records-glass-toolbar > .filters:not(.records-filter-form) .field.compact {
    display: grid;
    grid-template-columns: auto 126px;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}
.records-glass-toolbar > .filters:not(.records-filter-form) .field.compact span {
    line-height: 1;
    white-space: nowrap;
}
.records-glass-toolbar > .filters:not(.records-filter-form) .field.compact input {
    width: 126px;
    min-width: 0;
}
.records-glass-toolbar > .filters:not(.records-filter-form) .records-filter-submit {
    height: 40px;
    min-height: 40px;
    min-width: 76px;
    padding: 0 14px;
    font-size: 13px;
}
.records-filter-submit {
    min-height: 44px;
    min-width: 112px;
}
.records-filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-left: 4px;
}
.records-filter-actions > button {
    width: 112px;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 930;
    line-height: 1;
    letter-spacing: 0;
    -webkit-backdrop-filter: blur(18px) saturate(1.32);
    backdrop-filter: blur(18px) saturate(1.32);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.records-filter-actions > button:hover,
.records-filter-actions > button:active {
    transform: translateY(-1px);
}
.records-filter-actions .records-filter-submit {
    border: 1px solid rgba(255,151,64,.58);
    background:
        linear-gradient(135deg, rgba(255,170,82,.92), rgba(255,218,174,.78)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 90% 100%, rgba(255,151,64,.24), rgba(255,255,255,0) 42%);
    color: #3b2413;
    box-shadow:
        0 18px 38px rgba(255,151,64,.26),
        0 2px 0 rgba(255,255,255,.42) inset,
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -14px 24px rgba(255,255,255,.22);
}
.records-manual-open-button {
    min-width: 112px;
    border: 1px solid rgba(255,151,64,.54);
    background:
        linear-gradient(135deg, rgba(255,196,128,.82), rgba(255,237,214,.62)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.94), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(255,151,64,.20), rgba(255,255,255,0) 42%);
    color: #4a2a12;
    box-shadow:
        0 17px 36px rgba(255,151,64,.22),
        0 2px 0 rgba(255,255,255,.40) inset,
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -14px 24px rgba(255,255,255,.20);
}
.records-csv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 112px;
    border: 1px solid rgba(255,151,64,.42);
    background:
        linear-gradient(135deg, rgba(255,246,235,.80), rgba(255,255,255,.48)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.94), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(255,181,105,.22), rgba(255,255,255,0) 42%);
    color: #4f321b;
    box-shadow:
        0 16px 34px rgba(255,151,64,.14),
        0 2px 0 rgba(255,255,255,.40) inset,
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -14px 24px rgba(255,255,255,.20);
}
.records-csv-button span {
    font-size: 14px;
    line-height: 1;
}
.records-csv-button:hover,
.records-csv-button:active {
    border-color: rgba(255,151,64,.56);
    background:
        linear-gradient(135deg, rgba(255,238,216,.88), rgba(255,255,255,.56)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(255,181,105,.26), rgba(255,255,255,0) 42%);
    color: #3b2413;
    box-shadow:
        0 19px 38px rgba(255,151,64,.18),
        0 2px 0 rgba(255,255,255,.45) inset,
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -14px 24px rgba(255,255,255,.22);
}
.records-glass-toolbar .csv-mode-help {
    margin-top: -2px;
    color: #64748b;
    font-size: 12px;
}
@media (min-width: 940px) {
    .records-glass-toolbar .records-filter-form {
        width: 100%;
    }
    .records-glass-toolbar .records-filter-main {
        display: grid;
        grid-template-columns: 176px 176px 166px max-content;
        align-items: end;
        gap: 8px;
        justify-content: start;
        width: max-content;
        max-width: 100%;
    }
    .records-glass-toolbar .records-filter-main .field.compact {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 44px;
    }
    .records-glass-toolbar .records-filter-main .field.compact span {
        white-space: nowrap;
    }
    .records-glass-toolbar .records-filter-main .field.compact input,
    .records-glass-toolbar .records-filter-main .field.compact select {
        min-width: 0;
        width: 100%;
    }
    .records-glass-toolbar .records-filter-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
        margin-left: 0;
    }
    .records-glass-toolbar .records-filter-actions > button {
        width: 92px;
        min-width: 92px;
        padding: 0 10px;
        font-size: 13px;
        white-space: nowrap;
    }
    .records-glass-toolbar .records-filter-actions .records-filter-submit {
        min-width: 92px;
    }
    .records-glass-toolbar .records-manual-open-button {
        min-width: 92px;
    }
    .records-glass-toolbar .records-csv-button {
        min-width: 92px;
    }
}
.records-manual-modal.open {
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.24), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 82% 18%, rgba(255,181,105,.16), rgba(255,255,255,0) 32%),
        rgba(15,23,42,.24);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
.records-manual-modal-card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(640px, calc(100dvh - 36px));
    overflow: auto;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.38)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 100% 100%, rgba(255,181,105,.20), rgba(255,255,255,0) 44%),
        radial-gradient(circle at 8% 90%, rgba(125,179,255,.14), rgba(255,255,255,0) 38%);
    box-shadow:
        0 30px 88px rgba(15,23,42,.26),
        0 1px 0 rgba(255,255,255,.45),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -22px 42px rgba(255,255,255,.24),
        inset 16px 0 34px rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(28px) saturate(1.58) brightness(1.04);
    backdrop-filter: blur(28px) saturate(1.58) brightness(1.04);
}
.records-manual-modal-card::before,
.records-manual-modal-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.records-manual-modal-card::before {
    background:
        linear-gradient(115deg, rgba(255,255,255,.72), rgba(255,255,255,0) 34%),
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 28%);
    opacity: .78;
}
.records-manual-modal-card::after {
    inset: 1px;
    border: 1px solid rgba(255,255,255,.34);
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 66%, rgba(255,255,255,0));
    opacity: .42;
}
.records-manual-modal-card > * {
    position: relative;
    z-index: 1;
}
.records-manual-modal-head {
    display: block;
    margin-bottom: 14px;
}
.records-manual-modal-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.18;
}
.records-manual-modal-head span {
    display: block;
    margin-top: 5px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}
.records-manual-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr .7fr;
    gap: 10px;
}
.records-manual-form .wide,
.records-manual-form .rounding-policy-hint,
.records-manual-modal-actions {
    grid-column: 1 / -1;
}
.records-manual-form label:nth-of-type(1) {
    grid-column: 1 / -1;
}
.records-manual-form label:nth-of-type(2) {
    grid-column: 1 / span 1;
}
.records-manual-form label:nth-of-type(3) {
    grid-column: 2 / span 1;
}
.records-manual-form label:nth-of-type(4) {
    grid-column: 3 / span 1;
}
.records-manual-form label:nth-of-type(5) {
    grid-column: 4 / span 1;
}
.records-manual-form label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 880;
}
.records-manual-form input,
.records-manual-form select {
    height: 40px;
    border-color: rgba(255,255,255,.58);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 8px 20px rgba(15,23,42,.045);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
}
.records-manual-form input[name="manual_break_minutes"] {
    text-align: center;
}
.records-manual-modal-actions {
    margin-top: 2px;
}
.records-manual-modal-actions .primary {
    border: 1px solid rgba(255,151,64,.58);
    background:
        linear-gradient(135deg, rgba(255,181,105,.84), rgba(255,231,203,.66)),
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 36%);
    color: #3b2413;
    box-shadow:
        0 16px 34px rgba(255,151,64,.22),
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -12px 22px rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.32);
    backdrop-filter: blur(18px) saturate(1.32);
}
.records-manual-modal-actions .secondary {
    border: 1px solid rgba(255,255,255,.64);
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
    color: #334155;
    box-shadow:
        0 12px 28px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -10px 18px rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    backdrop-filter: blur(16px) saturate(1.22);
}
.records-manual-modal-actions .primary:hover,
.records-manual-modal-actions .primary:active {
    background:
        linear-gradient(135deg, rgba(255,167,82,.88), rgba(255,215,171,.92));
    color: #2f1d0f;
}
.records-management-tools {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 16px;
}
.records-management-tools > summary {
    width: fit-content;
    min-height: 32px;
    padding: 0 12px;
    list-style: none;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.records-management-tools > summary::-webkit-details-marker {
    display: none;
}
.records-management-tools[open] {
    padding-bottom: 14px;
}
.records-management-tools .manual-record-form {
    margin-top: 10px;
}
.records-list-wrap {
    overflow: visible;
}
.records-list-wrap .records-table.compact-records {
    min-width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.records-list-wrap .compact-records th {
    border-bottom-color: rgba(148,163,184,.18);
    background:
        linear-gradient(135deg, rgba(248,250,252,.72), rgba(255,255,255,.44));
    color: #475569;
    font-weight: 920;
}
.records-list-wrap .compact-records td {
    border-bottom-color: rgba(148,163,184,.16);
}
.records-list-wrap .compact-records tbody tr:last-child td {
    border-bottom: 0;
}
.records-list-wrap .location-badges .badge,
.records-list-wrap .status-cell .badge,
.records-list-wrap .mobile-status-pill {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.record-actions-menu {
    position: relative;
    display: inline-block;
}
.record-actions-menu summary {
    list-style: none;
}
.record-actions-menu summary::-webkit-details-marker {
    display: none;
}
.record-actions-trigger {
    min-height: 26px;
    border: 1px solid rgba(148,163,184,.24);
    background: rgba(255,255,255,.54);
    color: #475569;
}
.record-actions-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10;
    display: grid;
    min-width: 118px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 14px 30px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.22);
    backdrop-filter: blur(14px) saturate(1.22);
}
.record-actions-menu-panel .small-button,
.record-actions-menu-panel button {
    justify-content: center;
    width: 100%;
}
.record-actions-menu-panel .delete-button {
    border: 1px solid rgba(248,113,113,.32);
    background: rgba(255,255,255,.66);
    color: #b42318;
    box-shadow: none;
}
.record-actions-menu-panel .delete-button:hover,
.record-actions-menu-panel .delete-button:active {
    background: #fff1f1;
    color: #9f1d14;
}
.records-empty-cell {
    padding: 0 !important;
}
.records-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 26px 14px;
    color: #475569;
    text-align: center;
}
.records-empty-state strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
}
.records-empty-state span {
    max-width: 520px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}
.records-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 4px;
}
.records-empty-actions .button {
    min-height: 32px;
}

@media (max-width: 900px) {
    .records-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .records-focus-panel {
        gap: 10px;
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(14px) saturate(1.18);
        backdrop-filter: blur(14px) saturate(1.18);
    }
    .records-focus-head {
        display: grid;
        gap: 8px;
    }
    .records-focus-head h2 {
        font-size: 22px;
    }
    .records-focus-head span {
        font-size: 12px;
    }
    .records-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .records-focus-card {
        min-height: 82px;
        padding: 10px;
        border-radius: 13px;
    }
    .records-focus-card strong {
        margin: 5px 0 4px;
        font-size: 26px;
    }
    .records-focus-card span,
    .records-focus-card em {
        font-size: 11px;
    }
    .records-glass-toolbar {
        gap: 8px;
        margin-bottom: 10px;
        padding: 9px;
        border-radius: 15px;
    }
    .records-glass-toolbar .records-subtabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        padding: 3px;
        border-radius: 13px;
    }
    .records-glass-toolbar .records-subtabs .button {
        min-height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }
    .records-glass-toolbar .records-filter-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .records-glass-toolbar .records-filter-main .field:nth-child(3) {
        grid-column: 1 / -1;
    }
    .records-glass-toolbar .field.compact {
        gap: 4px;
    }
    .records-glass-toolbar .field.compact input,
    .records-glass-toolbar .field.compact select {
        height: 38px;
        border-radius: 11px;
        font-size: 14px;
    }
    .records-filter-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        justify-self: center;
        width: min(100%, 350px);
        margin-left: 0;
    }
    .records-filter-submit {
        height: 44px;
        min-height: 44px;
        min-width: 0;
        width: 100%;
    }
    .records-manual-open-button,
    .records-csv-button {
        height: 44px;
        min-height: 44px;
        min-width: 0;
        width: 100%;
        padding: 0 12px;
    }
    .records-glass-toolbar .csv-mode-help {
        font-size: 11px;
    }
    .records-manual-modal {
        padding: 12px;
    }
    .records-manual-modal-card {
        max-height: calc(100dvh - 24px);
        padding: 16px;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(18px) saturate(1.32);
        backdrop-filter: blur(18px) saturate(1.32);
    }
    .records-manual-modal-head {
        gap: 10px;
    }
    .records-manual-modal-head h2 {
        font-size: 20px;
    }
    .records-manual-form {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .records-manual-modal-actions {
        grid-template-columns: 1fr 1fr;
    }
    .records-management-tools {
        margin-bottom: 10px;
        padding: 8px 10px;
        border-radius: 14px;
    }
    .records-management-tools > summary {
        min-height: 30px;
        font-size: 11px;
    }
    .records-list-wrap {
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .records-list-wrap .compact-records .record-row {
        border: 1px solid rgba(255,255,255,.68);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
            radial-gradient(circle at 100% 100%, rgba(186,217,255,.14), rgba(255,255,255,0) 42%);
        box-shadow:
            0 12px 28px rgba(15,23,42,.055),
            inset 0 1px 0 rgba(255,255,255,.74);
        -webkit-backdrop-filter: blur(12px) saturate(1.12);
        backdrop-filter: blur(12px) saturate(1.12);
    }
    .records-list-wrap .compact-records .record-row.is-focused {
        outline: 2px solid rgba(255,151,64,.35);
        background:
            linear-gradient(135deg, rgba(255,247,237,.82), rgba(255,255,255,.54));
    }
    .records-list-wrap .mobile-record-line {
        color: #334155;
    }
    .records-list-wrap .compact-records .manage-actions {
        max-width: none;
    }
    .record-actions-trigger {
        min-height: 28px;
        padding: 0 9px;
        font-size: 11px;
    }
    .record-actions-menu-panel {
        min-width: 104px;
        padding: 5px;
        border-radius: 11px;
    }
    .compact-records .record-edit-row.open {
        border-color: rgba(255,255,255,.68);
        border-radius: 0 0 14px 14px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.70), rgba(248,250,252,.54));
        box-shadow:
            0 12px 24px rgba(15,23,42,.045),
            inset 0 1px 0 rgba(255,255,255,.70);
    }
    .records-empty-state {
        padding: 22px 12px;
    }
    .records-empty-actions .button {
        flex: 1 1 96px;
    }
}


/* Admin payroll glass pass */
.payroll-focus-panel {
    margin-bottom: 12px;
}
.payroll-focus-scope {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.32)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.82), rgba(255,255,255,0) 34%);
    color: #334155;
    font-size: 12px;
    font-weight: 930;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.72);
}
.payroll-focus-card strong {
    font-size: clamp(22px, 2.3vw, 31px);
    letter-spacing: 0;
    white-space: normal;
    word-break: keep-all;
}
.payroll-glass-shell {
    position: relative;
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(186,217,255,.16), rgba(255,255,255,0) 42%);
    box-shadow:
        0 18px 44px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.76),
        inset 0 -14px 30px rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
}
.payroll-glass-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(255,255,255,.55), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 82% 12%, rgba(255,181,105,.12), rgba(255,255,255,0) 32%);
}
.payroll-glass-shell > * {
    position: relative;
    z-index: 1;
}
.payroll-glass-shell .payroll-subtabs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 14px;
    background: rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.payroll-glass-shell .payroll-subtabs .button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 11px;
    background: rgba(255,255,255,.30);
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}
.payroll-glass-shell .payroll-subtabs .button.primary {
    border-color: rgba(255,151,64,.42);
    background:
        linear-gradient(135deg, rgba(255,181,105,.34), rgba(255,255,255,.72));
    color: #3b2413;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,151,64,.12), inset 0 1px 0 rgba(255,255,255,.84);
}
.payroll-glass-shell .payroll-subtabs .button.secondary:hover,
.payroll-glass-shell .payroll-subtabs .button.secondary:active {
    border-color: rgba(255,181,105,.34);
    background: rgba(255,248,240,.62);
    color: #3b2413;
}
.payroll-glass-shell > .payroll-glass-filter,
.payroll-glass-shell > .records-filter-form {
    padding: 0;
}
.payroll-glass-shell .payroll-filter-main {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}
.payroll-glass-shell .field.compact span,
.payroll-glass-shell .payroll-date-fields .field span {
    color: #475569;
    font-size: 12px;
    font-weight: 920;
}
.payroll-glass-shell .field.compact input,
.payroll-glass-shell .field.compact select {
    height: 40px;
    border-color: rgba(148,163,184,.28);
    border-radius: 12px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.payroll-glass-shell .payroll-date-fields {
    gap: 8px;
}
.payroll-glass-shell .payroll-period-buttons {
    align-self: end;
    gap: 5px;
}
.payroll-glass-shell .payroll-period-buttons button {
    min-height: 32px;
    width: 56px;
    min-width: 56px;
    flex: 0 0 56px;
    padding: 0;
    border: 1px solid rgba(255,151,64,.28);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,246,235,.62), rgba(255,255,255,.34)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.82), rgba(255,255,255,0) 34%);
    color: #5a3a21;
    font-size: 12px;
    font-weight: 920;
    box-shadow:
        0 8px 18px rgba(255,151,64,.08),
        inset 0 1px 0 rgba(255,255,255,.66);
}
.payroll-glass-shell .payroll-period-buttons button:hover,
.payroll-glass-shell .payroll-period-buttons button:active {
    transform: translateY(-1px);
    border-color: rgba(255,151,64,.38);
    background:
        linear-gradient(135deg, rgba(255,238,216,.74), rgba(255,255,255,.44)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.88), rgba(255,255,255,0) 34%);
    color: #3b2413;
}
.payroll-history-check {
    align-self: end;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.payroll-filter-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-left: 2px;
}
.payroll-glass-shell .payroll-filter-submit,
.payroll-glass-shell .payroll-tax-export-download,
.payroll-glass-shell .payroll-deposit-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    min-height: 40px;
    min-width: 96px;
    flex: 0 0 96px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 930;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    -webkit-backdrop-filter: blur(18px) saturate(1.32);
    backdrop-filter: blur(18px) saturate(1.32);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.payroll-glass-shell .payroll-filter-submit:hover,
.payroll-glass-shell .payroll-filter-submit:active,
.payroll-glass-shell .payroll-tax-export-download:hover,
.payroll-glass-shell .payroll-tax-export-download:active,
.payroll-glass-shell .payroll-deposit-open:hover,
.payroll-glass-shell .payroll-deposit-open:active {
    transform: translateY(-1px);
}
.payroll-glass-shell .payroll-filter-submit {
    border: 1px solid rgba(255,151,64,.58);
    background:
        linear-gradient(135deg, rgba(255,170,82,.92), rgba(255,218,174,.78)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 90% 100%, rgba(255,151,64,.24), rgba(255,255,255,0) 42%);
    color: #3b2413;
    box-shadow:
        0 18px 38px rgba(255,151,64,.26),
        0 2px 0 rgba(255,255,255,.42) inset,
        inset 0 1px 0 rgba(255,255,255,.86),
        inset 0 -14px 24px rgba(255,255,255,.22);
}
.payroll-glass-shell .payroll-tax-export-download,
.payroll-glass-shell .payroll-deposit-open {
    border: 1px solid rgba(255,151,64,.42);
    background:
        linear-gradient(135deg, rgba(255,246,235,.80), rgba(255,255,255,.48)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.94), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(255,181,105,.22), rgba(255,255,255,0) 42%);
    color: #4f321b;
    box-shadow:
        0 16px 34px rgba(255,151,64,.14),
        0 2px 0 rgba(255,255,255,.40) inset,
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -14px 24px rgba(255,255,255,.20);
}
.payroll-glass-shell .payroll-tax-export-download:hover,
.payroll-glass-shell .payroll-tax-export-download:active,
.payroll-glass-shell .payroll-deposit-open:hover,
.payroll-glass-shell .payroll-deposit-open:active {
    border-color: rgba(255,151,64,.56);
    background:
        linear-gradient(135deg, rgba(255,238,216,.88), rgba(255,255,255,.56)),
        radial-gradient(circle at 22% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(255,181,105,.26), rgba(255,255,255,0) 42%);
    color: #3b2413;
    box-shadow:
        0 19px 38px rgba(255,151,64,.18),
        0 2px 0 rgba(255,255,255,.45) inset,
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -14px 24px rgba(255,255,255,.22);
}
.payroll-warning-panel {
    margin: 2px 0 2px;
    border: 1px solid rgba(251,191,36,.26);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,251,235,.72), rgba(255,255,255,.44)),
        radial-gradient(circle at 100% 100%, rgba(251,191,36,.14), rgba(255,255,255,0) 42%);
    box-shadow:
        0 14px 30px rgba(251,191,36,.08),
        inset 0 1px 0 rgba(255,255,255,.72);
}
.payroll-list-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 92% 100%, rgba(186,217,255,.16), rgba(255,255,255,0) 42%);
    box-shadow:
        0 18px 44px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.76),
        inset 0 -14px 30px rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
}
.payroll-list-wrap .records-table.compact-records {
    width: 100%;
    min-width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.payroll-list-wrap .compact-records th {
    border-bottom-color: rgba(148,163,184,.18);
    background:
        linear-gradient(135deg, rgba(248,250,252,.72), rgba(255,255,255,.44));
    color: #475569;
    font-weight: 920;
}
.payroll-list-wrap .compact-records td {
    border-bottom-color: rgba(148,163,184,.16);
    color: #1f2937;
}
.payroll-list-wrap .compact-records tbody tr:last-child td {
    border-bottom: 0;
}
.payroll-list-wrap .badge {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.payroll-action-button {
    width: 74px;
    min-width: 74px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        0 10px 20px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.72);
}
.payroll-list-wrap .compact-records .manage-actions .payroll-action-button {
    width: 74px;
    min-width: 74px;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
}
.payroll-action-button:hover,
.payroll-action-button:active {
    border-color: rgba(255,151,64,.34);
    background: rgba(255,248,240,.70);
    color: #3b2413;
}
.payroll-action-warning {
    border-color: rgba(251,191,36,.34);
    background:
        linear-gradient(135deg, rgba(255,251,235,.78), rgba(255,255,255,.42));
    color: #8a4b00;
}
.payroll-tax-export-actions {
    justify-content: flex-end;
    margin: 0 0 8px;
}
.payroll-tax-export-actions [data-tax-export-selected-count] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.36);
    color: #475569;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.payroll-empty-cell {
    padding: 0 !important;
}
.payroll-empty-state {
    padding: 28px 14px;
}
.payroll-void-modal-backdrop {
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.24), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 82% 18%, rgba(255,181,105,.16), rgba(255,255,255,0) 32%),
        rgba(15,23,42,.24);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
.payroll-void-modal-card {
    width: min(440px, 100%);
    padding: 18px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.40)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 100% 100%, rgba(255,181,105,.18), rgba(255,255,255,0) 44%);
    box-shadow:
        0 28px 78px rgba(15,23,42,.24),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -20px 38px rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(24px) saturate(1.50) brightness(1.04);
    backdrop-filter: blur(24px) saturate(1.50) brightness(1.04);
}
.payroll-deposit-modal-card {
    width: min(92vw, 760px);
}
.payroll-void-modal-actions button {
    width: 96px;
    min-width: 96px;
    min-height: 40px;
    border-radius: 999px;
    font-weight: 900;
}
.payroll-void-modal-actions .secondary {
    border: 1px solid rgba(255,255,255,.64);
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
    color: #334155;
    box-shadow: 0 12px 28px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.82);
}

@media (max-width: 900px) {
    .payroll-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .payroll-focus-panel {
        margin-bottom: 10px;
    }
    .payroll-focus-head {
        display: grid;
        gap: 8px;
    }
    .payroll-focus-scope {
        justify-self: start;
        min-height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }
    .payroll-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .payroll-focus-card strong {
        font-size: 24px;
    }
    .payroll-glass-shell {
        gap: 6px;
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 15px;
        -webkit-backdrop-filter: blur(16px) saturate(1.28);
        backdrop-filter: blur(16px) saturate(1.28);
    }
    .payroll-glass-shell .payroll-subtabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 3px;
        padding: 3px;
        border-radius: 13px;
    }
    .payroll-glass-shell .payroll-subtabs .button {
        min-height: 32px;
        padding: 0 8px;
        font-size: 12px;
        white-space: nowrap;
    }
    .payroll-glass-shell .payroll-filter-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        align-items: end;
    }
    .payroll-glass-shell .payroll-date-fields {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    .payroll-glass-shell .payroll-date-fields .field {
        display: grid;
        gap: 2px;
        min-height: 0;
    }
    .payroll-glass-shell .payroll-date-fields .field span,
    .payroll-glass-shell .payroll-employee-filter span {
        font-size: 11px;
        line-height: 1.05;
    }
    .payroll-glass-shell .payroll-date-fields .field input,
    .payroll-glass-shell .field.compact select {
        width: 100%;
        min-width: 0;
        height: 34px;
        border-radius: 10px;
        padding-left: 9px;
        padding-right: 9px;
        font-size: 13px;
    }
    .payroll-glass-shell .payroll-period-buttons {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin-top: -1px;
    }
    .payroll-glass-shell .payroll-period-buttons button {
        width: auto;
        min-width: 46px;
        min-height: 28px;
        flex: 0 0 auto;
        font-size: 11px;
    }
    .payroll-history-check,
    .payroll-employee-filter {
        grid-column: 1 / -1;
    }
    .payroll-history-check {
        min-height: 30px;
        padding: 0 8px;
        font-size: 11px;
        line-height: 1;
    }
    .payroll-employee-filter {
        margin-top: -1px;
    }
    .payroll-filter-actions {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
        margin-top: 1px;
        margin-left: 0;
    }
    .payroll-glass-shell .payroll-filter-submit,
    .payroll-glass-shell .payroll-deposit-open,
    .payroll-glass-shell .payroll-tax-export-download {
        width: 96px;
        min-width: 96px;
        height: 40px;
        min-height: 40px;
        flex: 0 0 96px;
        padding: 0 12px;
    }
    .payroll-tax-export-download {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .payroll-list-wrap {
        overflow: visible;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .payroll-list-wrap .records-table.compact-records {
        display: block;
        min-width: 0;
    }
    .payroll-list-wrap .compact-records tbody {
        gap: 9px;
    }
    .payroll-list-wrap .compact-records tr {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        gap: 5px 6px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,.96);
        border-radius: 14px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.46)),
            radial-gradient(circle at 18% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 34%),
            radial-gradient(circle at 100% 100%, rgba(186,217,255,.22), rgba(255,255,255,0) 44%),
            radial-gradient(circle at 8% 92%, rgba(255,181,105,.10), rgba(255,255,255,0) 36%);
        box-shadow:
            0 20px 46px rgba(15,23,42,.13),
            0 10px 18px rgba(15,23,42,.06),
            0 1px 0 rgba(255,255,255,.60),
            0 0 0 1px rgba(255,255,255,.30),
            0 0 0 1px rgba(148,163,184,.13),
            inset 0 1px 0 rgba(255,255,255,.94),
            inset 0 -18px 32px rgba(255,255,255,.22),
            inset 14px 0 28px rgba(255,255,255,.13);
        -webkit-backdrop-filter: blur(16px) saturate(1.34) brightness(1.03);
        backdrop-filter: blur(16px) saturate(1.34) brightness(1.03);
    }
    .payroll-list-wrap .compact-records tr::before,
    .payroll-list-wrap .compact-records tr::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        z-index: 0;
    }
    .payroll-list-wrap .compact-records tr::before {
        background:
            linear-gradient(115deg, rgba(255,255,255,.56), rgba(255,255,255,0) 32%),
            linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%);
        opacity: .72;
    }
    .payroll-list-wrap .compact-records tr::after {
        inset: 1px;
        border: 1px solid rgba(255,255,255,.52);
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='edge' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.85'/%3E%3Cstop offset='.22' stop-color='%23ffffff' stop-opacity='.18'/%3E%3Cstop offset='.48' stop-color='%2397c7ff' stop-opacity='.16'/%3E%3Cstop offset='.74' stop-color='%23ffbf86' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.66'/%3E%3C/linearGradient%3E%3Cfilter id='bend'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.065 .32' numOctaves='2' seed='6' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='1.4' y='1.4' width='97.2' height='97.2' rx='7' fill='none' stroke='url(%23edge)' stroke-width='1.6' filter='url(%23bend)'/%3E%3Cpath d='M4 12 C18 4 30 9 43 5 S72 1 96 10' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='.9' filter='url(%23bend)'/%3E%3Cpath d='M3 86 C19 94 31 89 45 94 S73 99 97 88' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.1' filter='url(%23bend)'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
            linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%, rgba(151,199,255,.10) 58%, rgba(255,191,134,.10) 78%, rgba(255,255,255,.14));
        opacity: .88;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.24),
            inset 0 -1px 0 rgba(148,163,184,.12),
            inset 10px 0 20px rgba(255,255,255,.10),
            0 8px 18px rgba(15,23,42,.045);
        mix-blend-mode: screen;
    }
    .payroll-list-wrap .compact-records td {
        position: relative;
        z-index: 1;
        min-height: 28px;
        padding: 4px 6px;
        border-color: rgba(255,255,255,.68);
        background: rgba(255,255,255,.52);
        color: #334155;
        font-size: 12px;
        line-height: 1.12;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }
    .payroll-list-wrap .compact-records td::before {
        margin-right: 3px;
        font-size: 10px;
        line-height: 1.1;
    }
    .payroll-list-wrap .compact-records td[data-label="직원명"],
    .payroll-list-wrap .compact-records td[data-label="선택"],
    .payroll-list-wrap .compact-records .manage-cell {
        background: transparent;
        box-shadow: none;
    }
    .payroll-list-wrap .compact-records td[data-label="직원명"] {
        padding-bottom: 1px;
        font-size: 14px;
        line-height: 1.16;
    }
    .payroll-list-wrap .compact-records td[data-label="직원명"] strong {
        font-size: 14px;
        line-height: 1.16;
    }
    .payroll-list-wrap .compact-records td[data-label="기간"],
    .payroll-list-wrap .compact-records td[data-label="근무기간"] {
        line-height: 1.18;
    }
    .payroll-list-wrap .compact-records .empty-cell {
        grid-column: 1 / -1;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .payroll-tax-export-actions {
        justify-content: center;
        margin-bottom: 8px;
    }
    .payroll-void-modal {
        padding: 12px;
    }
    .payroll-void-modal-card {
        max-height: calc(100dvh - 24px);
        overflow: auto;
        padding: 16px;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(18px) saturate(1.32);
        backdrop-filter: blur(18px) saturate(1.32);
    }
}


body.landing-body { min-height: 100vh; min-height: 100svh; background: #fff8ef; overflow-x: hidden; }
.landing-page { width: 100%; min-height: 100vh; min-height: 100svh; padding: 20px 16px 46px; background: linear-gradient(135deg, #fff8ef 0%, #f7fbff 52%, #fff6f2 100%); position: relative; overflow: hidden; }
.landing-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 12%, rgba(239, 135, 56, .18), transparent 28%), radial-gradient(circle at 86% 14%, rgba(120, 176, 226, .18), transparent 30%), linear-gradient(rgba(45, 39, 34, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 39, 34, .018) 1px, transparent 1px); background-size: auto, auto, 42px 42px, 42px 42px; }
.landing-topbar, .landing-hero, .landing-section, .landing-final-cta { position: relative; z-index: 1; width: min(1080px, 100%); margin: 0 auto; }
.landing-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 16px; }
.landing-brand .brand-logo-img { height: 32px; max-width: min(240px, 70vw); }
.landing-login-link { min-height: 38px; padding: 0 14px; border: 1px solid rgba(42, 36, 30, .12); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .78); color: #2d2722; font-size: 14px; font-weight: 900; text-decoration: none; box-shadow: 0 6px 14px rgba(52, 43, 34, .05); }
.landing-hero { min-height: min(680px, calc(100svh - 70px)); display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .92fr); gap: clamp(28px, 5vw, 54px); align-items: center; padding: 20px 0 42px; }
.landing-kicker, .landing-section-eyebrow { margin: 0; color: #c9692e; font-size: 14px; font-weight: 950; line-height: 1.45; }
.landing-hero h1 { max-width: 650px; margin: 12px 0 0; color: #181411; font-size: clamp(38px, 5.2vw, 56px); font-weight: 950; line-height: 1.12; letter-spacing: 0; }
.landing-alt-line { margin: 16px 0 0; color: #2f2a25; font-size: clamp(18px, 2.1vw, 22px); font-weight: 950; line-height: 1.45; }
.landing-subhead { max-width: 650px; margin: 12px 0 0; color: #51483f; font-size: clamp(16px, 1.8vw, 20px); font-weight: 800; line-height: 1.62; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.landing-primary, .landing-secondary { min-height: 52px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 950; line-height: 1; text-decoration: none; white-space: nowrap; }
.landing-primary { background: #ef8738; color: #fff; box-shadow: 0 10px 22px rgba(239, 135, 56, .24); }
.landing-primary:hover { background: #e47c2d; }
.landing-secondary { border: 1px solid rgba(42, 36, 30, .13); background: rgba(255, 255, 255, .80); color: #2d2722; box-shadow: 0 6px 16px rgba(52, 43, 34, .06); }
.landing-proof { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; color: #6a5c50; font-size: 13px; font-weight: 900; line-height: 1.45; }
.landing-proof span { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
.landing-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #ef8738; box-shadow: 0 0 0 3px rgba(239, 135, 56, .12); }
.landing-visual-story { min-height: 500px; position: relative; display: grid; place-items: center; }
.landing-visual-story::before { content: ""; position: absolute; inset: 70px 18px 44px 48px; border-radius: 8px; background: rgba(255, 252, 247, .54); box-shadow: 0 8px 18px rgba(73, 57, 42, .06); transform: rotate(-4deg); }
.landing-sheet { position: absolute; border: 1px solid rgba(62, 55, 48, .10); border-radius: 8px; overflow: hidden; background-color: rgba(255, 255, 255, .48); color: rgba(53, 46, 40, .38); font-size: 11px; font-weight: 800; line-height: 1.2; box-shadow: 0 10px 22px rgba(48, 41, 34, .06); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.landing-sheet div { min-height: 28px; padding: 7px 8px; border-right: 1px solid rgba(55, 85, 105, .08); border-bottom: 1px solid rgba(55, 85, 105, .08); background: rgba(255, 255, 255, .20); white-space: nowrap; }
.landing-sheet div:nth-child(-n+6) { background: rgba(239, 135, 56, .07); color: rgba(61, 50, 42, .42); }
.landing-sheet-paper { width: 270px; left: 0; top: 92px; display: grid; grid-template-columns: 1.1fr .8fr .8fr .6fr; transform: rotate(-7deg); opacity: .70; }
.landing-sheet-excel { width: 430px; right: 0; bottom: 70px; display: grid; grid-template-columns: .9fr .8fr .8fr 1fr .9fr 1fr; transform: rotate(3deg); opacity: .68; }
.landing-mobile-wrap { width: min(335px, 82vw); position: relative; z-index: 2; }
.landing-phone-preview { min-height: 430px; padding: 18px; border: 1px solid rgba(43, 36, 29, .10); border-radius: 8px; display: grid; align-content: space-between; gap: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 20px 42px rgba(54, 43, 34, .14), 0 6px 16px rgba(79, 95, 122, .06); }
.landing-phone-head { display: flex; align-items: center; justify-content: center; }
.landing-phone-head img { height: 25px; width: auto; max-width: 165px; object-fit: contain; }
.landing-status-card { padding: 16px; border-radius: 8px; background: #f7fbff; color: #2d2722; }
.landing-status-card span, .landing-clock-card span { display: block; color: #756a61; font-size: 13px; font-weight: 900; line-height: 1.35; }
.landing-status-card strong, .landing-clock-card strong { display: block; margin-top: 6px; color: #191512; font-size: 23px; font-weight: 950; line-height: 1.25; letter-spacing: 0; }
.landing-clock-card { padding: 18px; border-radius: 8px; background: linear-gradient(135deg, #fff7ee, #ffffff); border: 1px solid rgba(239, 135, 56, .18); }
.landing-clock-card button { width: 100%; min-height: 54px; margin-top: 20px; border-radius: 8px; background: #ef8738; color: #fff; font-size: 17px; font-weight: 950; box-shadow: 0 8px 18px rgba(239, 135, 56, .24); }
.landing-company-code { padding: 13px 14px; border-radius: 8px; background: #fff3df; color: #8a4b20; font-size: 13px; font-weight: 950; line-height: 1.45; text-align: center; }
.landing-summary-chip { position: absolute; z-index: 3; max-width: 210px; padding: 11px 13px; border: 1px solid rgba(43, 36, 29, .10); border-radius: 999px; background: rgba(255, 255, 255, .94); color: #2d2722; font-size: 13px; font-weight: 950; line-height: 1.35; box-shadow: 0 10px 22px rgba(54, 43, 34, .10); }
.landing-summary-time { left: -64px; top: 116px; }
.landing-summary-excel { right: -88px; bottom: 86px; background: #fff8ef; color: #8a4b20; }
.landing-section { padding: 40px 0; }
.landing-section-head { max-width: 720px; margin-bottom: 20px; }
.landing-section-head h2, .landing-free-card h2, .landing-final-cta h2 { margin: 8px 0 0; color: #1b1713; font-size: clamp(26px, 3.6vw, 40px); font-weight: 950; line-height: 1.2; letter-spacing: 0; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.landing-feature-card, .landing-step-card, .landing-free-card, .landing-final-cta { border: 1px solid rgba(43, 36, 29, .08); border-radius: 8px; background: rgba(255, 255, 255, .86); box-shadow: 0 10px 26px rgba(54, 43, 34, .07); }
.landing-feature-card { min-height: 184px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.landing-card-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 26px; margin-bottom: 18px; border-radius: 999px; background: #fff3df; color: #c9692e; font-size: 12px; font-weight: 950; }
.landing-feature-card h3 { margin: 0 0 9px; color: #201b17; font-size: 20px; font-weight: 950; line-height: 1.25; letter-spacing: 0; }
.landing-feature-card p { margin: 0; color: #51483f; font-size: 15px; font-weight: 750; line-height: 1.6; }
.landing-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.landing-step-card { min-height: 150px; padding: 19px; display: grid; align-content: start; gap: 18px; }
.landing-step-card span { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #2d2722; color: #fff; font-size: 14px; font-weight: 950; }
.landing-step-card p { margin: 0; color: #201b17; font-size: 17px; font-weight: 950; line-height: 1.45; }
.landing-free-card { padding: clamp(24px, 4vw, 40px); background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 248, 239, .94)); }
.landing-free-card p:last-child { max-width: 680px; margin: 15px 0 0; color: #51483f; font-size: 16px; font-weight: 800; line-height: 1.6; }
.landing-final-cta { margin-top: 22px; padding: clamp(24px, 4vw, 38px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #201b17; }
.landing-final-cta .landing-section-eyebrow { color: #f7b27d; }
.landing-final-cta h2 { color: #fff; }
.landing-final-cta .landing-primary { flex: 0 0 auto; background: #fff; color: #201b17; box-shadow: none; }
@supports (min-height: 100dvh) {
    body.landing-body, .landing-page { min-height: 100dvh; }
    .landing-hero { min-height: min(680px, calc(100dvh - 70px)); }
}
@media (max-width: 920px) {
    .landing-hero { min-height: 0; grid-template-columns: 1fr; padding-top: 14px; }
    .landing-visual-story { width: min(660px, 100%); min-height: 480px; margin: 0 auto; }
    .landing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .landing-page { padding: 16px 14px 34px; }
    .landing-topbar { padding-bottom: 12px; }
    .landing-brand .brand-logo-img { height: 30px; max-width: min(218px, 64vw); }
    .landing-login-link { min-height: 36px; padding: 0 12px; font-size: 13px; }
    .landing-hero { gap: 24px; padding: 18px 0 30px; }
    .landing-hero h1 { font-size: clamp(32px, 9.8vw, 38px); }
    .landing-alt-line { font-size: 17px; }
    .landing-subhead { font-size: 16px; }
    .landing-actions { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
    .landing-primary, .landing-secondary { width: 100%; min-height: 52px; }
    .landing-proof span { font-size: 12px; }
    .landing-visual-story { min-height: 450px; }
    .landing-visual-story::before { inset: 56px 16px 50px 24px; }
    .landing-sheet-paper { width: 238px; left: -34px; top: 64px; }
    .landing-sheet-excel { width: 380px; right: -142px; bottom: 58px; }
    .landing-sheet { font-size: 10px; }
    .landing-sheet div { min-height: 24px; padding: 6px 7px; }
    .landing-mobile-wrap { width: min(300px, 84vw); }
    .landing-phone-preview { min-height: 386px; }
    .landing-summary-chip { position: static; width: 100%; max-width: none; margin-top: 8px; border-radius: 8px; text-align: center; }
    .landing-section { padding: 32px 0; }
    .landing-section-head { margin-bottom: 18px; }
    .landing-feature-grid, .landing-step-grid { grid-template-columns: 1fr; gap: 10px; }
    .landing-feature-card { min-height: 0; padding: 20px; }
    .landing-step-card { min-height: 0; gap: 15px; }
    .landing-final-cta { align-items: stretch; flex-direction: column; }
}

body.signup-body { min-height: 100vh; min-height: 100svh; background: linear-gradient(135deg, #fff7ee 0%, #f7fbff 46%, #fdf3f7 100%); overflow-x: hidden; }
.signup-page { width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; padding: 28px 16px; background: linear-gradient(135deg, #fff7ee 0%, #f7fbff 46%, #fdf3f7 100%); position: relative; overflow-x: hidden; }
.signup-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 14% 14%, rgba(255, 183, 135, .42), transparent 32%), radial-gradient(circle at 86% 16%, rgba(179, 211, 255, .46), transparent 34%), radial-gradient(circle at 52% 88%, rgba(255, 226, 168, .34), transparent 36%); }
.localsquad-signup-card { width: min(820px, 100%); max-width: 820px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 26px; padding: 32px; background: rgba(255, 255, 255, .42); box-shadow: 0 28px 80px rgba(54, 43, 34, .16), 0 8px 24px rgba(74, 87, 110, .08), inset 0 1px 0 rgba(255, 255, 255, .82); backdrop-filter: blur(30px) saturate(1.22); -webkit-backdrop-filter: blur(30px) saturate(1.22); position: relative; z-index: 1; }

.employee-signup-card { width: min(760px, 100%); max-width: 760px; }
.localsquad-signup-card .signup-brand { display: flex; width: max-content; margin: 0 auto 8px; }
.localsquad-signup-card h1 { margin: 0; color: #181411; font-size: 30px; font-weight: 950; line-height: 1.2; text-align: center; }
.signup-lead { margin: 10px 0 24px; color: #51483f; font-size: 16px; font-weight: 700; line-height: 1.55; text-align: center; }
.signup-auth-options { display: grid; gap: 14px; margin: 18px 0 20px; }
.signup-auth-divider { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; color: #7b7168; font-size: 12px; font-weight: 900; line-height: 1; }
.signup-auth-divider::before,
.signup-auth-divider::after { content: ""; height: 1px; background: rgba(92, 80, 68, .14); }
.signup-form { gap: 22px; }
.signup-form-section { display: grid; gap: 14px; }
.signup-form-section h2 { margin: 0; color: #201b17; font-size: 18px; font-weight: 950; letter-spacing: 0; }
.localsquad-signup-card .form-grid.two-col { gap: 14px; }
.localsquad-signup-card .field { gap: 8px; color: #2c2926; font-size: 13px; }
.localsquad-signup-card .field input,
.localsquad-signup-card .field select { height: 48px; border: 1px solid #d8d2cc; border-radius: 14px; padding: 0 14px; background: #fff; color: #171412; font-size: 16px; font-weight: 700; box-shadow: 0 1px 2px rgba(38, 32, 26, .04); }
.localsquad-signup-card .field input:focus,
.localsquad-signup-card .field select:focus { border-color: #ef8738; box-shadow: 0 0 0 3px rgba(239, 135, 56, .18), 0 2px 8px rgba(38, 32, 26, .06); outline: none; }
.localsquad-signup-card .help-box { padding: 0; border: 0; border-radius: 0; background: transparent; color: #51483f; font-size: 13px; font-weight: 700; line-height: 1.56; box-shadow: none; }
.localsquad-signup-card .help-box p { margin: 0 0 5px; }
.localsquad-signup-card .help-box .small { color: #756a61; font-size: 12px; }
.localsquad-signup-card .field > .muted.small { margin: 0; color: #756a61; font-size: 12px; font-weight: 700; line-height: 1.45; }

.signup-code-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.localsquad-signup-card .signup-code-field { gap: 6px; }
.localsquad-signup-card .signup-code-field .help-box { display: none; }
.localsquad-signup-card .signup-code-field .signup-field-feedback { min-height: 0; }
.localsquad-signup-card .signup-code-field .signup-field-feedback:empty { display: none; }
.localsquad-signup-card .signup-code-field .signup-code-note { margin-top: -2px; }
.signup-check-button { min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 14px; background: rgba(255, 255, 255, .42); color: #51483f; font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 8px 20px rgba(60, 48, 38, .05); }
.signup-check-button:hover { background: rgba(255, 255, 255, .62); color: #241f1a; }
.signup-field-feedback { min-height: 18px; margin: 0; color: #756a61; font-size: 12px; font-weight: 900; line-height: 1.45; }
.signup-field-feedback.ok { color: #287a4b; }
.signup-field-feedback.error { color: #b42318; }
.localsquad-signup-card input[aria-invalid="true"] { border-color: #d94b45; box-shadow: 0 0 0 3px rgba(217, 75, 69, .14); }
@media (max-width: 760px) {
    .signup-code-control { grid-template-columns: 1fr; }
    .signup-check-button { width: 100%; font-size: 13px; }
}
.signup-submit { min-height: 52px; width: 100%; margin-top: 2px; border-radius: 999px; background: #ef8738; color: #fff; font-size: 16px; font-weight: 950; box-shadow: 0 12px 28px rgba(239, 135, 56, .30); }
.signup-submit:hover { background: #e47c2d; }
.signup-login-link { width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(255, 255, 255, .34); color: #51483f; font-size: 13px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 8px 20px rgba(60, 48, 38, .05); backdrop-filter: blur(14px) saturate(1.14); -webkit-backdrop-filter: blur(14px) saturate(1.14); }
.signup-login-link:hover { border-color: rgba(255, 255, 255, .88); color: #241f1a; background: rgba(255, 255, 255, .52); }
@supports (min-height: 100dvh) {
    body.signup-body, .signup-page { min-height: 100dvh; }
}
@media (max-width: 760px) {
    .signup-page { align-items: flex-start; padding: 14px 10px 24px; }
    .localsquad-signup-card { padding: 22px 16px; border-radius: 22px; }
    .localsquad-signup-card h1 { font-size: 26px; }
    .signup-lead { margin-bottom: 20px; font-size: 15px; }
    .localsquad-signup-card .form-grid.two-col { grid-template-columns: 1fr; gap: 12px; }
    .localsquad-signup-card .field input,
    .localsquad-signup-card .field select,
    .signup-submit { font-size: 16px; }
}

/* Employee app LocalSquad polish */
body.localsquad-employee-app {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        linear-gradient(145deg, rgba(255, 247, 237, .96) 0%, rgba(246, 251, 255, .96) 44%, rgba(255, 244, 248, .96) 100%),
        linear-gradient(90deg, rgba(239, 135, 56, .08), rgba(157, 195, 238, .10));
    color: #201b17;
}
body.localsquad-employee-app .employee-page,
body.localsquad-employee-app .employee-card-wide {
    background: transparent;
}
body.localsquad-employee-app .id-card {
    border-color: rgba(255, 255, 255, .82);
    background: #fff;
    box-shadow: 0 18px 46px rgba(66, 55, 45, .14), 0 3px 12px rgba(74, 87, 110, .06);
}
body.localsquad-employee-app .id-card-add {
    background: rgba(255, 255, 255, .92);
}
body.localsquad-employee-app #connectModal.connect-company-modal-layer {
    z-index: 1500;
    padding: 20px;
    background: rgba(47, 38, 31, .24);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
body.localsquad-employee-app #connectModal .connect-company-modal-card {
    width: min(440px, calc(100vw - 32px));
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 24px;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 26px 72px rgba(47, 38, 31, .20), inset 0 1px 0 rgba(255, 255, 255, .78);
    backdrop-filter: blur(26px) saturate(1.16);
    -webkit-backdrop-filter: blur(26px) saturate(1.16);
}
body.localsquad-employee-app #connectModal h2 {
    margin: 0 0 8px;
    color: #201b17;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: 0;
}
body.localsquad-employee-app #connectModal .muted {
    margin: 0;
    color: #655b52;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}
body.localsquad-employee-app #connectModal .connect-company-modal-form {
    gap: 18px;
    margin-top: 22px;
}
body.localsquad-employee-app #connectModal .connect-company-code-field {
    gap: 9px;
    color: #2c2926;
    font-size: 13px;
    font-weight: 900;
}
body.localsquad-employee-app #connectModal .connect-company-code-field input {
    height: 52px;
    border: 1px solid #d8d2cc;
    border-radius: 16px;
    padding: 0 15px;
    background: #fff;
    color: #171412;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(38, 32, 26, .04);
}
body.localsquad-employee-app #connectModal .connect-company-code-field input:focus {
    border-color: #ef8738;
    box-shadow: 0 0 0 3px rgba(239, 135, 56, .18), 0 2px 8px rgba(38, 32, 26, .06);
    outline: none;
}
body.localsquad-employee-app #connectModal .connect-company-modal-actions {
    gap: 10px;
}
body.localsquad-employee-app #connectModal .connect-company-modal-actions button {
    min-height: 48px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 950;
}
body.localsquad-employee-app #connectModal .connect-company-modal-actions .primary {
    background: #ef8738;
    color: #fff;
    box-shadow: 0 12px 26px rgba(239, 135, 56, .28);
}
body.localsquad-employee-app #connectModal .connect-company-modal-actions .secondary {
    border: 1px solid rgba(216, 210, 204, .90);
    background: rgba(255, 255, 255, .66);
    color: #51483f;
}
body.localsquad-employee-app #connectModal .modal-message {
    padding: 11px 13px;
    border: 1px solid #f0c7c7;
    border-radius: 14px;
    background: #fff3f3;
    font-size: 13px;
    line-height: 1.45;
}
@media (max-width: 640px) {
    body.localsquad-employee-app #connectModal.connect-company-modal-layer {
        align-items: flex-start;
        padding: calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 18px);
        overflow-y: auto;
    }
    body.localsquad-employee-app #connectModal .connect-company-modal-card {
        width: 100%;
        max-height: calc(100dvh - 36px);
        padding: 22px 18px;
        overflow-y: auto;
        border-radius: 22px;
    }
    body.localsquad-employee-app #connectModal h2 {
        font-size: 22px;
    }
    body.localsquad-employee-app #connectModal .connect-company-modal-actions {
        grid-template-columns: 1fr;
    }
    body.localsquad-employee-app #connectModal .connect-company-code-field input,
    body.localsquad-employee-app #connectModal .connect-company-modal-actions button {
        font-size: 16px;
    }
}

.system-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(17, 24, 39, .52);
}
.system-error-modal {
    width: min(420px, 100%);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .26);
    text-align: center;
}
.system-error-modal h2 {
    margin: 0 0 10px;
    color: #171412;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.45;
}
.system-error-modal p {
    margin: 0;
    color: #5f564f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}
.system-error-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.system-error-actions button {
    min-width: 112px;
    min-height: 40px;
    font-size: 16px;
}

.help-dot,
button.help-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border: 1px solid rgba(70, 62, 52, .24) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #5f5348 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    flex: 0 0 16px !important;
    white-space: nowrap !important;
    cursor: pointer;
    box-shadow: none !important;
}
.help-dot:hover,
.help-dot:focus-visible {
    border-color: rgba(239, 135, 56, .62) !important;
    color: #241f1a !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(239, 135, 56, .14) !important;
}
.help-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(280px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(35, 28, 22, .14);
    border-radius: 8px;
    background: #fff;
    color: #2b2520;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 16px 36px rgba(30, 24, 18, .18);
}
.help-tooltip[hidden] { display: none; }


body.employee-card-page .employee-pwa-install-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(70, 62, 52, .16);
    border-radius: 999px;
    background: #faf7f2;
    color: #6a5645;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
body.employee-card-page .employee-pwa-install-button:hover,
body.employee-card-page .employee-pwa-install-button:focus-visible {
    border-color: rgba(239, 135, 56, .45);
    background: #fff7ed;
    color: #8a3f0b;
    outline: none;
}
body.employee-card-page .employee-pwa-install-button[hidden] {
    display: none !important;
}
body.employee-card-page .employee-pwa-modal-layer {
    z-index: 90;
    align-items: center;
    padding: 18px 12px;
    background: rgba(17, 13, 10, .74);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
body.employee-card-page .employee-pwa-modal-card {
    width: min(430px, calc(100vw - 24px));
    max-height: min(86vh, 680px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 13, 9, .34), 0 8px 24px rgba(18, 13, 9, .18);
}
body.employee-card-page .employee-pwa-modal-card h2 {
    margin: 0 0 12px;
    color: #241f1a;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.28;
}
body.employee-card-page .employee-pwa-modal-copy {
    margin: 0 0 18px;
    color: #51483f;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.58;
}
body.employee-card-page .employee-pwa-guide-list {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
}
body.employee-card-page .employee-pwa-guide-card {
    padding: 15px;
    border: 1px solid rgba(216, 210, 204, .82);
    border-radius: 14px;
    background: #fffaf4;
}
body.employee-card-page .employee-pwa-guide-card + .employee-pwa-guide-card {
    background: #f8fbf7;
}
body.employee-card-page .employee-pwa-guide-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #241f1a;
}
body.employee-card-page .employee-pwa-guide-heading strong {
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}
body.employee-card-page .employee-pwa-platform-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    line-height: 1;
}
body.employee-card-page .employee-pwa-platform-icon-apple {
    background: #f3f4f6;
    color: #241f1a;
    font-size: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
}
body.employee-card-page .employee-pwa-platform-icon-android {
    background: #e8f5ec;
    color: #2f6b45;
}
body.employee-card-page .employee-pwa-platform-icon svg {
    display: block;
    width: 23px;
    height: 23px;
}
body.employee-card-page .employee-pwa-guide-card ol {
    display: grid;
    gap: 7px;
    margin: 12px 0 0;
    padding-left: 22px;
    color: #3f352c;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.48;
}
body.employee-card-page .employee-pwa-modal-card .modal-actions {
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 10px;
}
body.employee-card-page .employee-pwa-modal-actions button {
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 950;
}
body.employee-card-page .employee-pwa-modal-actions .primary {
    background: #ef8738;
    color: #fff;
    box-shadow: 0 12px 26px rgba(239, 135, 56, .26);
}
body.employee-card-page .employee-pwa-modal-actions .primary:hover,
body.employee-card-page .employee-pwa-modal-actions .primary:active {
    background: #e67f34;
    color: #fff;
}
body.employee-card-page .employee-pwa-modal-actions .secondary {
    border: 1px solid rgba(216, 210, 204, .92);
    background: #f8f8f8;
    color: #51483f;
    box-shadow: none;
}
body.employee-card-page .employee-pwa-modal-actions .secondary:hover,
body.employee-card-page .employee-pwa-modal-actions .secondary:active {
    background: #eeeeee;
    color: #241f1a;
}
@media (max-width: 640px) {
    body.employee-card-page .employee-pwa-modal-layer {
        align-items: center;
        padding: 12px 10px;
    }
    body.employee-card-page .employee-pwa-modal-card {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 24px);
        padding: 18px;
        border-radius: 16px;
    }
    body.employee-card-page .employee-pwa-modal-card h2 { font-size: 20px; }
    body.employee-card-page .employee-pwa-modal-copy { font-size: 14px; }
    body.employee-card-page .employee-pwa-guide-card { padding: 14px; }
    body.employee-card-page .employee-pwa-guide-card ol { font-size: 13px; }
}

/* Company logo shared display */
.admin-brand.is-logo {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}
.admin-brand-logo {
    display: block;
    max-width: min(220px, 42vw);
    max-height: 38px;
    object-fit: contain;
}
.id-card-company-logo {
    display: block;
    max-width: min(190px, 68vw);
    max-height: 42px;
    object-fit: contain;
}
.id-card-company.is-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
}
.id-card-record-header .id-card-company-logo {
    max-height: 30px;
}
@media (max-width: 760px) {
    .admin-brand-logo {
        max-width: min(210px, 82vw);
        max-height: 34px;
    }
}
/* Super admin deploy upload selection */
.deploy-upload-select-list {
    gap: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 700;
}
.deploy-upload-select-list li,
.deploy-file-list.is-compact li {
    min-height: 28px;
    padding: 3px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.deploy-upload-select-list li + li,
.deploy-file-list.is-compact li + li {
    border-top: 1px solid #f0f0f0;
}
.deploy-upload-select-list li.is-auto-excluded {
    background: #fffafa;
}
.deploy-upload-select-row {
    display: grid;
    grid-template-columns: 16px 14px minmax(0, 1fr) 36px;
    gap: 6px;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}
.deploy-upload-select-row input {
    width: 14px;
    height: 14px;
    margin: 0;
}
.deploy-upload-file-name,
.deploy-file-list.is-compact li span:last-child,
.deploy-file-list.is-compact li span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deploy-exclude-reason {
    color: #b42318;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}
.deploy-excluded-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.deploy-excluded-columns h3 {
    margin: 0 0 5px;
    color: #444;
    font-size: 12px;
    font-weight: 950;
}
.deploy-file-list.is-compact {
    display: block;
    max-height: 220px;
    overflow: auto;
    padding: 4px 0;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}
.deploy-user-exclude-empty {
    color: #777;
    font-family: inherit;
}
@media (max-width: 760px) {
    .deploy-upload-select-row {
        grid-template-columns: 16px 14px minmax(0, 1fr);
    }
    .deploy-exclude-reason {
        grid-column: 3;
        text-align: left;
    }
    .deploy-excluded-columns {
        grid-template-columns: 1fr;
    }
}
/* Super admin deploy upload selection: no truncation override */
.deploy-upload-select-list,
.deploy-file-list.is-compact {
    overflow-x: auto;
}
.deploy-upload-select-row {
    grid-template-columns: 16px 14px max-content 36px;
    min-width: max-content;
}
.deploy-upload-file-name,
.deploy-file-list.is-compact li span:last-child,
.deploy-file-list.is-compact li span:first-child {
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.deploy-file-list.is-compact {
    white-space: nowrap;
}
@media (max-width: 760px) {
    .deploy-upload-select-row {
        grid-template-columns: 16px 14px max-content;
    }
}

/* Public contact links */
.landing-contact-cta {
    border-color: rgba(239, 135, 56, .28);
    background: rgba(255, 247, 237, .86);
    color: #9a5720;
}
.landing-contact-cta:hover {
    background: #fff1dc;
    color: #7a3d12;
}
.signup-floating-contact {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(239, 135, 56, .28);
    border-radius: 999px;
    background: rgba(255, 247, 237, .92);
    color: #9a5720;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(60, 48, 38, .12), inset 0 1px 0 rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
.signup-floating-contact:hover {
    background: #fff1dc;
    color: #7a3d12;
}
@media (max-width: 640px) {
    .signup-page {
        padding-bottom: 76px;
    }
    .signup-floating-contact {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }
}
.remember-login-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 14px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 800;
}

.remember-login-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #111827;
}

/* Legal links and signup agreement UX */
.legal-inline-footer {
    width: min(100%, 760px);
    margin: 14px auto 0;
    color: #8a8f98;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}
.legal-inline-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 7px;
}
.legal-inline-links button,
.legal-inline-links a {
    display: inline;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7a808a;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.legal-inline-links button:hover,
.legal-inline-links a:hover,
.legal-inline-links button:active,
.legal-inline-links a:active {
    color: #111;
    text-decoration: underline;
    background: transparent;
}
.legal-inline-copy {
    margin: 2px 0 0;
    color: #a0a5ad;
    font-size: 10px;
    line-height: 1.5;
}
.landing-legal-footer {
    margin-top: 34px;
    margin-bottom: 26px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 24, 39, .08);
}
.login-legal-links {
    margin-top: 13px;
    font-size: 10.5px;
}
.signup-agreement-box {
    display: grid;
    gap: 7px;
    margin: 4px 0 13px;
    padding-top: 11px;
    border-top: 1px solid #eceff3;
    text-align: left;
}
.signup-agreement-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: #555d68;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.signup-agreement-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
}
.signup-agreement-row span {
    min-width: 0;
}
.legal-view-button {
    display: inline;
    min-height: 0;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a551f;
    font: inherit;
    font-weight: 900;
    line-height: inherit;
    text-decoration: underline;
    box-shadow: none;
    cursor: pointer;
}
.legal-view-button:hover,
.legal-view-button:active {
    background: transparent;
    color: #111;
}
.legal-modal-layer[hidden] {
    display: none !important;
}
.legal-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 18px;
}
.legal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .42);
}
.legal-modal-card {
    position: relative;
    z-index: 1;
    width: min(540px, 100%);
    max-height: min(78dvh, 680px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 18px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 23, 42, .22);
    text-align: left;
    outline: none;
}
.legal-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.legal-modal-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}
.legal-modal-close {
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 999px;
    background: #f3f4f6;
    color: #555;
    font-size: 20px;
    line-height: 1;
    box-shadow: none;
}
.legal-modal-body {
    overflow: auto;
    color: #3f4652;
    font-size: 13px;
    line-height: 1.65;
}
.legal-modal-body p {
    margin: 0 0 10px;
}
.legal-modal-body ul {
    margin: 0 0 10px 18px;
    padding: 0;
}
.legal-modal-body li + li {
    margin-top: 4px;
}
.legal-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.legal-modal-actions button {
    min-height: 32px;
    padding: 0 14px;
    font-size: 12px;
}
body.legal-modal-open {
    overflow: hidden;
}
@media (max-width: 520px) {
    .landing-legal-footer {
        margin-top: 24px;
        margin-bottom: 18px;
    }
    .legal-inline-footer {
        padding: 0 12px;
        font-size: 10.5px;
    }
    .signup-agreement-row {
        font-size: 11.5px;
    }
    .legal-modal-layer {
        padding: 12px;
    }
    .legal-modal-card {
        max-height: calc(100dvh - 24px);
        padding: 16px;
        border-radius: 10px;
    }
}

/* QA follow-up: mobile payroll and long-text layout polish */
@media (max-width: 760px) {
    main.page:has(.payroll-admin-card) .admin-tabs {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: visible;
        gap: 4px 5px;
        padding-right: 0;
        scroll-padding-right: 0;
    }
    main.page:has(.payroll-admin-card) .admin-tab {
        flex: 0 0 auto;
        padding-left: 13px;
        padding-right: 13px;
    }
    main.page:has(.payroll-admin-card) .admin-tab:last-child {
        margin-right: 0;
    }
    main.page:has(.payroll-admin-card) .admin-code-card--compact {
        gap: 3px;
        margin-bottom: 6px;
        padding: 7px 10px;
    }
    main.page:has(.payroll-admin-card) .admin-code-card--compact .ad-slot--admin-mobile {
        display: none;
        width: 0;
        height: 0;
        min-height: 0;
        margin: 0;
    }
    main.page:has(.payroll-admin-card) .platform-notice-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        margin-bottom: 8px;
        padding: 6px 8px;
    }
    main.page:has(.payroll-admin-card) .platform-notice-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.25;
    }
    main.page:has(.payroll-admin-card) .platform-notice-more {
        min-height: 24px;
        padding: 0 8px;
        font-size: 10px;
    }
}

.id-card-company {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
    line-height: 1.16;
}
@media (max-width: 768px) {
    body.employee-card-page .id-card-header {
        align-items: flex-start;
        min-height: 42px;
        padding-left: 34px;
        padding-right: 34px;
    }
    body.employee-card-page .id-card-company {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: clamp(15px, 4.4vw, 18px);
        line-height: 1.16;
    }
    body.employee-card-page .id-card-record-header .id-card-company {
        font-size: 15px;
    }
}

.employee-summary-title strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    line-height: 1.24;
}
.employee-summary-contact > div:first-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.employee-summary-head-actions {
    flex: 0 0 auto;
}

.location-map .leaflet-top,
.location-map .leaflet-bottom,
.location-map .leaflet-control-container {
    max-width: 100%;
}
.location-map .leaflet-control-attribution {
    box-sizing: border-box;
    max-width: calc(100% - 8px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

/* Admin store overview */
.admin-onboarding-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
}
.admin-onboarding-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.admin-onboarding-copy h2 {
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.admin-onboarding-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.admin-onboarding-code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}
.admin-onboarding-code-row span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}
.admin-onboarding-code-row strong {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    background: #fafafa;
    color: #111827;
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
    overflow-wrap: anywhere;
}
.admin-onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 260px);
}
.admin-onboarding-actions .button {
    min-height: 38px;
    white-space: nowrap;
}
.admin-onboarding-copy-status {
    flex-basis: 100%;
    min-height: 18px;
    color: #256f3a;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    text-align: right;
}
.store-overview-shell {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.store-overview-head,
.store-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.store-overview-head h2,
.store-panel-head h3 {
    margin: 0;
    color: #111;
    line-height: 1.2;
}
.store-overview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.store-overview-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}
.store-overview-summary-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 112px;
    padding: 15px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fff;
    color: #111;
    text-decoration: none;
}
.store-overview-summary-card span,
.store-payroll-totals span {
    color: #666;
    font-size: 13px;
    font-weight: 800;
}
.store-overview-summary-card strong {
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
}
.store-overview-summary-card em {
    align-self: end;
    color: #777;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
}
.store-overview-summary-card:hover,
.store-today-row:hover,
.store-exception-item:hover,
.store-person-list a:hover,
.store-statement-strip a:hover,
.store-notice-list a:hover {
    border-color: #222;
}
.store-overview-summary-card.is-working {
    background: #f7f3ff;
}
.store-overview-summary-card.is-done {
    background: #f1faf4;
}
.store-overview-summary-card.is-missing {
    background: #fff5f2;
}
.store-overview-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fff;
}
.store-panel-note {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #666;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.store-today-list,
.store-exception-list,
.store-person-list,
.store-notice-list {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin-top: 12px;
}
.store-today-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto minmax(130px, auto);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
    color: #111;
    text-decoration: none;
}
.store-today-row.status-working {
    background: #fbf8ff;
}
.store-today-row.status-missing {
    background: #fff8f5;
}
.store-today-time {
    color: #111;
    font-size: 15px;
    font-weight: 950;
    white-space: nowrap;
}
.store-today-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.store-today-main strong,
.store-person-list strong,
.store-notice-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
    line-height: 1.25;
}
.store-today-main span,
.store-person-list span,
.store-notice-list span {
    min-width: 0;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.store-today-status,
.store-mini-badge,
.store-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.store-today-status {
    background: #efefef;
    color: #222;
}
.status-working .store-today-status {
    background: #efe7ff;
    color: #5f36a8;
}
.status-done .store-today-status {
    background: #e8f5ec;
    color: #2f6b45;
}
.status-missing .store-today-status {
    background: #fdecec;
    color: #b42318;
}
.store-today-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}
.store-mini-badge.is-extra {
    background: #e9f3ff;
    color: #245f9d;
}
.store-mini-badge.is-review,
.store-location-badge.is-missing {
    background: #fdecec;
    color: #b42318;
}
.store-location-badge {
    background: #f3f3f3;
    color: #555;
}
.store-location-badge.is-muted {
    color: #777;
}
.store-overview-grid.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}
.store-exception-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.store-exception-item,
.store-person-list a,
.store-notice-list a,
.store-statement-strip a {
    min-width: 0;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    color: #111;
    text-decoration: none;
}
.store-exception-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 58px;
    padding: 11px 12px;
}
.store-exception-item span {
    color: #555;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.store-exception-item strong {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 950;
}
.store-compact-list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.store-compact-list li {
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff7f5;
    color: #8f2b20;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.store-person-list a,
.store-notice-list a {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
}
.store-payroll-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.store-payroll-totals div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    background: #f7f7f7;
}
.store-payroll-totals strong {
    min-width: 0;
    font-size: 19px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.store-statement-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.store-statement-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 11px;
    color: #333;
    font-size: 13px;
    font-weight: 900;
}
.store-overview-empty {
    padding: 14px;
    border: 1px dashed #dadada;
    border-radius: 8px;
    background: #fafafa;
    color: #666;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}
.store-today-list.is-empty-company {
    border: 0;
    background: transparent;
}
.store-empty-onboarding {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-color: #e2e8f0;
    background: linear-gradient(135deg, rgba(248, 250, 252, .92), rgba(255, 251, 235, .72));
    color: #334155;
}
.store-empty-onboarding strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.25;
}
.store-empty-onboarding span {
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
}
.store-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.store-empty-actions .button {
    min-height: 34px;
}
.store-empty-actions .admin-onboarding-copy-status {
    flex: 1 1 100%;
    min-height: 16px;
    text-align: left;
}
.record-row.is-focused {
    outline: 3px solid rgba(17, 17, 17, .22);
    outline-offset: -3px;
    background: #fffdf2;
}

@media (max-width: 900px) {
    .store-overview-summary-grid,
    .store-overview-grid.two-col {
        grid-template-columns: 1fr 1fr;
    }
    .store-today-row {
        grid-template-columns: 58px minmax(0, 1fr) auto;
    }
    .store-today-badges {
        grid-column: 2 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    main.page:has(.store-overview-shell) .admin-tabs {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }
    main.page:has(.store-overview-shell) .admin-tab {
        flex: 0 0 auto;
    }
    .store-overview-head,
    .store-panel-head {
        display: grid;
        grid-template-columns: 1fr;
    }
    .store-overview-actions {
        justify-content: stretch;
    }
    .store-overview-actions .button,
    .store-panel-head .button {
        flex: 1 1 auto;
        min-width: 0;
    }
    .store-overview-summary-grid,
    .store-overview-grid.two-col,
    .store-exception-list,
    .store-payroll-totals {
        grid-template-columns: 1fr;
    }
    .store-overview-summary-card {
        min-height: 92px;
        padding: 13px;
    }
    .store-overview-summary-card strong {
        font-size: 30px;
    }
    .store-overview-panel {
        padding: 13px;
    }
    .store-today-row {
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: start;
        gap: 7px 9px;
        padding: 11px;
    }
    .store-today-status {
        grid-column: 1 / 2;
        grid-row: 2;
        width: fit-content;
        min-height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }
    .store-today-badges {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }
    .store-today-main span {
        font-size: 12px;
    }
    .store-mini-badge,
    .store-location-badge {
        min-height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }
    .store-exception-item {
        min-height: 50px;
    }
    .store-statement-strip {
        display: grid;
        grid-template-columns: 1fr;
    }
    .store-statement-strip a {
        justify-content: center;
    }
}

/* Admin store overview compact v1 */
.store-overview-shell {
    gap: 12px;
}
.store-overview-head {
    align-items: center;
}
.store-overview-head h2 {
    font-size: 24px;
}
.store-overview-content {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(240px, 1fr) minmax(360px, 2fr);
    align-items: start;
    gap: 12px;
}
.store-overview-panel.store-today-panel {
    min-width: 0;
    padding: 12px;
}
.store-panel-titleline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.store-panel-titleline h3 {
    margin-right: 4px;
}
.store-count-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #555;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.store-count-badge.is-working {
    background: #efe7ff;
    color: #5f36a8;
}
.store-count-badge.is-done {
    background: #e8f5ec;
    color: #2f6b45;
}
.store-count-badge.is-missing {
    background: #fdecec;
    color: #b42318;
}
.store-today-list {
    gap: 0;
    margin-top: 8px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.store-today-header,
.store-today-row {
    display: grid;
    grid-template-columns: 124px minmax(52px, .6fr) minmax(118px, 1fr) 54px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.store-today-header {
    min-height: 32px;
    padding: 0 10px;
    background: #f7f7f7;
    color: #666;
    font-size: 11px;
    font-weight: 900;
}
.store-today-row {
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid #ededed;
    border-radius: 0;
}
.store-today-row:hover {
    background: #fafafa;
}
.store-today-row.status-working {
    background: #fcfaff;
}
.store-today-row.status-missing {
    background: #fff9f7;
}
.store-today-time {
    color: #111;
    font-size: 13px;
    font-weight: 950;
    white-space: nowrap;
}
.store-today-name {
    min-width: 0;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-today-state {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.store-today-status,
.store-mini-badge {
    flex: 0 0 auto;
    min-height: 20px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 20px;
    white-space: nowrap;
}
.store-location-text {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    color: #444;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-location-text.is-muted {
    color: #777;
}
.store-location-text.is-missing {
    color: #b42318;
}
.store-overview-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    color: #111;
    text-decoration: none;
}
.store-overview-card:hover {
    border-color: #222;
}
.store-card-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.store-card-headline span,
.store-pay-lines span,
.store-notice-line span {
    min-width: 0;
    color: #555;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.store-card-headline strong {
    min-width: 0;
    color: #111;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: right;
}
.store-contract-card {
    min-height: 100%;
}
.store-contract-people,
.store-pay-lines,
.store-notice-lines {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.store-person-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 31px;
    padding: 7px 8px;
    border-radius: 7px;
    background: #fafafa;
}
.store-person-chip strong {
    min-width: 0;
    font-size: 13px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-person-chip em {
    flex: 0 0 auto;
    color: #b45309;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.store-overview-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
}
.store-pay-card,
.store-notice-card {
    min-height: 100%;
}
.store-pay-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.store-pay-lines div {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 66px;
    min-width: 0;
    padding: 9px;
    border-radius: 7px;
    background: #fafafa;
}
.store-pay-lines strong {
    min-width: 0;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.store-notice-line {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 7px 0;
    border-top: 1px solid #f0f0f0;
}
.store-notice-line:first-child {
    border-top: 0;
    padding-top: 0;
}
.store-notice-line strong {
    min-width: 0;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-empty-line {
    color: #777;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

@media (max-width: 1180px) {
    .store-overview-content {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
    }
    .store-overview-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .store-overview-content {
        grid-template-columns: minmax(0, 1fr);
    }
    .store-overview-side {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .store-today-header,
    .store-today-row {
        grid-template-columns: 112px minmax(56px, .7fr) minmax(104px, 1fr) 64px;
        gap: 8px;
    }
    .store-overview-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-onboarding-card {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 10px;
        padding: 12px;
    }
    .admin-onboarding-copy h2 {
        font-size: 19px;
    }
    .admin-onboarding-copy p {
        font-size: 13px;
    }
    .admin-onboarding-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        min-width: 0;
    }
    .admin-onboarding-actions .button {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
    .admin-onboarding-copy-status {
        text-align: left;
    }
    .store-overview-shell {
        gap: 10px;
    }
    .store-overview-head {
        align-items: flex-start;
    }
    .store-overview-head h2 {
        font-size: 26px;
    }
    .store-overview-panel.store-today-panel {
        padding: 10px;
    }
    .store-panel-titleline {
        gap: 5px;
    }
    .store-today-header {
        display: none;
    }
    .store-today-row {
        grid-template-columns: 88px minmax(42px, .55fr) minmax(88px, 1fr) 54px;
        gap: 5px;
        min-height: 0;
        padding: 8px 9px;
    }
    .store-today-time {
        grid-column: 1;
        grid-row: 1;
        font-size: 12px;
    }
    .store-today-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px;
    }
    .store-today-state {
        grid-column: 3;
        grid-row: 1;
        gap: 3px;
    }
    .store-location-text {
        grid-column: 4;
        grid-row: 1;
        justify-content: flex-end;
        text-align: right;
        font-size: 11px;
    }
    .store-today-status,
    .store-mini-badge {
        min-height: 18px;
        padding: 0 5px;
        font-size: 9px;
        line-height: 18px;
    }
    .store-overview-card {
        padding: 10px;
    }
    .store-overview-side {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .store-contract-people {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .store-person-chip {
        min-height: 28px;
        padding: 6px 7px;
    }
    .store-person-chip strong {
        font-size: 12px;
    }
    .store-pay-lines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .store-pay-lines div {
        min-height: 52px;
        padding: 8px;
    }
    .store-pay-lines strong {
        font-size: 14px;
    }
    .store-notice-line strong {
        font-size: 12px;
    }
}

/* Admin mobile dropdown navigation */
.admin-mobile-menu {
    display: none;
}
.store-overview-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid #e1e1e1;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.store-overview-action-link:hover,
.store-overview-action-link:active {
    border-color: #222;
    background: #f8f8f8;
    color: #111;
}

@media (max-width: 760px) {
    .admin-tabs--desktop {
        display: none !important;
    }
    .admin-mobile-menu {
        position: relative;
        z-index: 50;
        display: block;
        width: 100%;
        min-width: 0;
    }
    .admin-mobile-menu summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 0 12px;
        border: 1px solid #d7d7d7;
        border-radius: 12px;
        background: #fff;
        color: #111;
        cursor: pointer;
        list-style: none;
        box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .admin-mobile-menu summary::-webkit-details-marker {
        display: none;
    }
    .admin-mobile-menu summary span {
        color: #666;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
    }
    .admin-mobile-menu summary strong {
        min-width: 0;
        overflow: hidden;
        color: #111;
        font-size: 14px;
        font-weight: 950;
        line-height: 1.1;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-mobile-menu summary::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid #555;
        border-bottom: 2px solid #555;
        transform: rotate(45deg) translateY(-2px);
    }
    .admin-mobile-menu[open] summary {
        border-radius: 12px 12px 8px 8px;
    }
    .admin-mobile-menu[open] summary::after {
        transform: rotate(225deg) translateY(-1px);
    }
    .admin-mobile-menu-panel {
        display: grid;
        gap: 8px;
        margin-top: 6px;
        padding: 8px;
        border: 1px solid #d7d7d7;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(0,0,0,.10);
    }
    .admin-mobile-menu-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .admin-mobile-menu-link,
    .admin-mobile-menu-utils a,
    .admin-mobile-menu-utils button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 38px;
        box-sizing: border-box;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: #fff;
        color: #222;
        font: inherit;
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        text-align: left;
        text-decoration: none;
    }
    .admin-mobile-menu-link:hover,
    .admin-mobile-menu-utils a:hover,
    .admin-mobile-menu-utils button:hover {
        background: #f5f5f5;
    }
    .admin-mobile-menu-link.is-active {
        background: #111;
        color: #fff;
    }
    .admin-mobile-menu-utils {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px solid #ededed;
    }
    .admin-mobile-menu-utils a,
    .admin-mobile-menu-utils button {
        color: #555;
    }
    .admin-topbar .admin-account {
        display: none !important;
    }
    .store-overview-actions {
        justify-content: flex-start;
        gap: 6px;
    }
    .store-overview-action-link {
        min-height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }
}

/* Admin overview liquid glass summary */
.store-overview-shell .store-overview-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}
.store-overview-shell .admin-glass-card {
    --glass-tint: rgba(248, 250, 252, .28);
    --glass-accent: rgba(120, 180, 255, .22);
    --glass-edge: rgba(255, 255, 255, .78);
    --glass-shine: rgba(255, 255, 255, .36);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto auto minmax(36px, 1fr) auto;
    align-content: stretch;
    gap: 12px;
    min-width: 0;
    min-height: 184px;
    padding: 18px 16px;
    overflow: hidden;
    border: 1px solid var(--glass-edge);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.30)),
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.94), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 90% 85%, var(--glass-accent), rgba(255,255,255,0) 38%),
        var(--glass-tint);
    -webkit-backdrop-filter: blur(22px) saturate(1.55) brightness(1.05);
    backdrop-filter: blur(22px) saturate(1.55) brightness(1.05);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -22px 38px rgba(255,255,255,.22),
        inset 0 0 0 1px rgba(255,255,255,.30),
        inset -18px -20px 36px rgba(15,23,42,.035);
    color: #0f172a;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.store-overview-shell .admin-glass-card > * {
    position: relative;
    z-index: 1;
}
.store-overview-shell .admin-glass-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 36%),
        linear-gradient(115deg, rgba(255,255,255,.58), rgba(255,255,255,0) 30%);
    opacity: .92;
    pointer-events: none;
}
.store-overview-shell .admin-glass-card::after {
    content: "";
    position: absolute;
    inset: -42% -62%;
    z-index: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0) 37%, var(--glass-shine) 50%, rgba(255,255,255,0) 63%);
    opacity: .54;
    pointer-events: none;
    transform: translateX(-8%) rotate(1deg);
    transition: transform .28s ease, opacity .18s ease;
}
.store-overview-shell .admin-glass-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .82);
    box-shadow:
        0 28px 68px rgba(15, 23, 42, .15),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -22px 38px rgba(255,255,255,.24),
        inset 0 0 0 1px rgba(255,255,255,.34),
        inset -18px -20px 36px rgba(15,23,42,.04);
}
.store-overview-shell .admin-glass-card:hover::after {
    opacity: .68;
    transform: translateX(2%) rotate(1deg);
}
.store-overview-shell .admin-glass-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 3px;
}
.store-overview-shell .admin-glass-card--today {
    --glass-tint: rgba(224, 242, 254, .36);
    --glass-accent: rgba(14, 165, 233, .24);
}
.store-overview-shell .admin-glass-card--review {
    --glass-tint: rgba(255, 247, 237, .38);
    --glass-accent: rgba(245, 158, 11, .18);
}
.store-overview-shell .admin-glass-card--pay {
    --glass-tint: rgba(236, 253, 245, .36);
    --glass-accent: rgba(16, 185, 129, .22);
}
.store-overview-shell .admin-glass-card--people {
    --glass-tint: rgba(239, 246, 255, .36);
    --glass-accent: rgba(59, 130, 246, .22);
}
.store-overview-shell .admin-glass-card--contract {
    --glass-tint: rgba(250, 245, 255, .36);
    --glass-accent: rgba(139, 92, 246, .18);
}
.store-overview-shell .admin-glass-card--notice {
    --glass-tint: rgba(255, 251, 235, .38);
    --glass-accent: rgba(234, 179, 8, .19);
}
.store-overview-shell .admin-glass-card.needs-attention {
    border-color: rgba(245, 158, 11, .52);
}
.store-overview-shell .admin-glass-label {
    display: block;
    min-width: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.2;
}
.store-overview-shell .admin-glass-number {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: #0f172a;
    font-size: clamp(34px, 3.1vw, 48px);
    font-weight: 950;
    letter-spacing: 0;
    line-height: .98;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 0 rgba(255,255,255,.36);
}
.store-overview-shell .admin-glass-number span {
    color: #334155;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
}
.store-overview-shell .admin-glass-number--money {
    display: block;
    max-width: 100%;
    font-size: clamp(18px, 1.55vw, 28px);
    line-height: 1.04;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}
.store-overview-shell .admin-glass-desc {
    display: block;
    min-width: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.store-overview-shell .admin-glass-mobile-note {
    display: none;
    min-width: 0;
    color: #334155;
    font-weight: 900;
    line-height: 1.2;
}
.store-overview-shell .admin-glass-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}
.store-overview-shell .admin-glass-pills span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 24px;
    max-width: 100%;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .58);
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-overview-shell .store-overview-details {
    grid-template-columns: minmax(0, 2fr) minmax(280px, .78fr);
    align-items: stretch;
}
.store-overview-shell .store-overview-details > .store-overview-panel,
.store-overview-shell .store-overview-details > .store-overview-side {
    height: 100%;
}
.store-overview-shell .store-overview-details .store-today-panel {
    display: grid;
    grid-template-rows: auto 1fr;
}
.store-overview-shell .store-overview-details .store-today-list,
.store-overview-shell .store-overview-details .store-notice-card {
    height: 100%;
}
.store-overview-shell .store-overview-side--single {
    grid-column: auto;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (max-width: 1280px) {
    .store-overview-shell .store-overview-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .store-overview-shell .admin-glass-card {
        min-height: 174px;
    }
}

@media (max-width: 980px) {
    .store-overview-shell .store-overview-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .store-overview-shell .store-overview-details {
        grid-template-columns: minmax(0, 1fr);
    }
    .store-overview-shell .store-overview-side--single {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .store-overview-shell .store-overview-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .store-overview-shell .admin-glass-card {
        aspect-ratio: auto;
        grid-template-rows: auto minmax(34px, auto) auto;
        gap: 6px;
        min-height: 112px;
        padding: 10px 8px;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(15px) saturate(1.34) brightness(1.03);
        backdrop-filter: blur(15px) saturate(1.34) brightness(1.03);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, .09),
            inset 0 1px 0 rgba(255,255,255,.76),
            inset 0 -12px 22px rgba(255,255,255,.18),
            inset -10px -12px 24px rgba(15,23,42,.028);
    }
    .store-overview-shell .admin-glass-card::before {
        opacity: .66;
    }
    .store-overview-shell .admin-glass-card::after {
        opacity: .34;
    }
    .store-overview-shell .admin-glass-card:hover {
        transform: none;
    }
    .store-overview-shell .admin-glass-number {
        font-size: 29px;
    }
    .store-overview-shell .admin-glass-number--money {
        font-size: clamp(12px, 3.65vw, 16px);
        line-height: 1.05;
    }
    .store-overview-shell .admin-glass-label {
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
    }
    .store-overview-shell .admin-glass-number span {
        font-size: 13px;
    }
    .store-overview-shell .admin-glass-desc {
        display: none;
    }
    .store-overview-shell .admin-glass-mobile-note {
        display: block;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .store-overview-shell .admin-glass-pills {
        display: none;
    }
}

/* Admin empty-state glass onboarding */
.admin-glass-onboarding-card {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    margin: 0 0 18px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.30)),
        radial-gradient(circle at 16% 8%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 94% 90%, rgba(251, 146, 60, .26), rgba(255,255,255,0) 40%);
    -webkit-backdrop-filter: blur(22px) saturate(1.52) brightness(1.05);
    backdrop-filter: blur(22px) saturate(1.52) brightness(1.05);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -22px 38px rgba(255,255,255,.22),
        inset 0 0 0 1px rgba(255,255,255,.30),
        inset -18px -20px 36px rgba(15,23,42,.035);
}
.admin-glass-onboarding-card > * {
    position: relative;
    z-index: 1;
}
.admin-glass-onboarding-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,0) 36%),
        linear-gradient(115deg, rgba(255,255,255,.58), rgba(255,255,255,0) 30%);
    opacity: .92;
    pointer-events: none;
}
.admin-glass-onboarding-card::after {
    content: "";
    position: absolute;
    inset: -46% -62%;
    z-index: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0) 37%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 63%);
    opacity: .54;
    pointer-events: none;
    transform: translateX(-7%) rotate(1deg);
}
.admin-glass-onboarding-card .admin-onboarding-copy {
    gap: 10px;
}
.admin-glass-onboarding-card .admin-onboarding-copy h2 {
    color: #0f172a;
    font-size: 23px;
    font-weight: 950;
}
.admin-glass-onboarding-card .admin-onboarding-copy p {
    color: #334155;
    font-size: 14px;
    font-weight: 850;
}
.admin-glass-onboarding-card .admin-onboarding-code-row span {
    color: #64748b;
}
.admin-glass-onboarding-card .admin-onboarding-code-row strong {
    border-color: rgba(255, 255, 255, .64);
    background: rgba(255, 255, 255, .64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(15, 23, 42, .05);
}
.admin-glass-onboarding-card .admin-onboarding-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    align-items: center;
    gap: 9px;
    min-width: min(100%, 300px);
}
.admin-glass-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.admin-glass-cta:hover {
    transform: translateY(-1px);
}
.admin-glass-cta-primary,
.admin-glass-cta-primary:hover {
    border: 1px solid rgba(251, 146, 60, .46);
    background: linear-gradient(135deg, rgba(255, 224, 188, .98), rgba(251, 146, 60, .86));
    color: #431407;
    box-shadow: 0 14px 28px rgba(251, 146, 60, .20), inset 0 1px 0 rgba(255,255,255,.62);
}
.admin-glass-cta-secondary,
.admin-glass-cta-secondary:hover {
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .54);
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.72);
}
.admin-glass-onboarding-card .admin-onboarding-copy-status {
    grid-column: 1 / -1;
    min-height: 16px;
    text-align: right;
}
.store-empty-onboarding {
    position: relative;
    isolation: isolate;
    gap: 10px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.50)),
        radial-gradient(circle at 0% 0%, rgba(255,255,255,.86), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 100% 100%, rgba(255, 237, 213, .48), rgba(255,255,255,0) 42%);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
    backdrop-filter: blur(14px) saturate(1.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 30px rgba(15, 23, 42, .05);
}
.store-empty-onboarding strong {
    font-size: 17px;
}
.store-empty-actions {
    gap: 9px;
}
.store-empty-actions .admin-glass-cta {
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
}

@media (max-width: 760px) {
    .admin-glass-onboarding-card {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
        padding: 18px;
        border-radius: 18px;
        -webkit-backdrop-filter: blur(16px) saturate(1.34) brightness(1.03);
        backdrop-filter: blur(16px) saturate(1.34) brightness(1.03);
        box-shadow:
            0 16px 34px rgba(15, 23, 42, .09),
            inset 0 1px 0 rgba(255,255,255,.78),
            inset 0 -14px 24px rgba(255,255,255,.18),
            inset -10px -12px 24px rgba(15,23,42,.028);
    }
    .admin-glass-onboarding-card::before {
        opacity: .72;
    }
    .admin-glass-onboarding-card::after {
        opacity: .34;
    }
    .admin-glass-onboarding-card .admin-onboarding-copy h2 {
        font-size: 21px;
    }
    .admin-glass-onboarding-card .admin-onboarding-copy p {
        font-size: 13px;
        line-height: 1.45;
    }
    .admin-glass-onboarding-card .admin-onboarding-actions,
    .store-empty-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        min-width: 0;
    }
    .admin-glass-onboarding-card .admin-glass-cta,
    .store-empty-actions .admin-glass-cta {
        width: 100%;
        min-height: 42px;
        padding: 0 10px;
        font-size: 13px;
        white-space: normal;
    }
    .admin-glass-onboarding-card .admin-onboarding-copy-status,
    .store-empty-actions .admin-onboarding-copy-status {
        grid-column: 1 / -1;
        text-align: left;
    }
    .store-empty-onboarding {
        padding: 16px;
        border-radius: 15px;
    }
    .store-empty-onboarding strong {
        font-size: 16px;
    }
}

/* Admin common liquid glass header */
main.page > .admin-shell.admin-header--common {
    position: relative;
    isolation: isolate;
    display: block;
    margin: 0 0 12px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.30);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(232,239,248,.96), rgba(255,241,227,.90)),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 35%),
        radial-gradient(circle at 90% 92%, rgba(96,165,250,.24), rgba(255,255,255,0) 44%),
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(226,233,244,.50));
    -webkit-backdrop-filter: blur(24px) saturate(1.58) brightness(1.03);
    backdrop-filter: blur(24px) saturate(1.58) brightness(1.03);
    box-shadow:
        0 24px 62px rgba(15,23,42,.11),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -18px 34px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.56);
}
main.page > .admin-shell.admin-header--common::before,
main.page > .admin-shell.admin-header--common::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}
main.page > .admin-shell.admin-header--common::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 38%),
        linear-gradient(112deg, rgba(255,255,255,.60), rgba(255,255,255,0) 34%),
        linear-gradient(0deg, rgba(15,23,42,.040), rgba(15,23,42,0) 34%);
    opacity: .96;
}
main.page > .admin-shell.admin-header--common::after {
    inset: -48% -62%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 37%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 63%);
    opacity: .50;
    transform: translateX(-8%);
}
main.page > .admin-shell.admin-header--common > * {
    position: relative;
    z-index: 1;
}
main.page > .admin-shell.admin-header--common .admin-topbar {
    padding: 0 0 12px;
    gap: 16px;
}
main.page > .admin-shell.admin-header--common .admin-brand-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
}
main.page > .admin-shell.admin-header--common .admin-brand-link:focus-visible {
    outline: 2px solid rgba(255,151,64,.58);
    outline-offset: 4px;
}
main.page > .admin-shell.admin-header--common .admin-brand,
main.page > .admin-shell.admin-header--common .brand-logo {
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255,255,255,.58);
}
main.page > .admin-shell.admin-header--common .admin-account {
    gap: 7px;
}
main.page > .admin-shell.admin-header--common .admin-action-pill {
    min-height: 34px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    color: #1f2937;
    box-shadow:
        0 10px 22px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -8px 16px rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.40);
    backdrop-filter: blur(18px) saturate(1.40);
}
main.page > .admin-shell.admin-header--common .admin-action-pill:hover,
main.page > .admin-shell.admin-header--common .admin-action-pill:active {
    border-color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.74);
    color: #111827;
}
main.page > .admin-shell.admin-header--common .admin-contact-pill {
    border-color: rgba(251,146,60,.34);
    background: rgba(255,247,237,.64);
    color: #8a4b16;
}
main.page > .admin-shell.admin-header--common .admin-tabs.admin-tabs--desktop {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -2px -2px -7px;
    padding: 2px 2px 9px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    scrollbar-width: none;
}
main.page > .admin-shell.admin-header--common .admin-tabs.admin-tabs--desktop::-webkit-scrollbar {
    display: none;
}
main.page > .admin-shell.admin-header--common .admin-tab {
    bottom: auto;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 12px;
    background: rgba(255,255,255,.50);
    color: #334155;
    font-size: 13px;
    font-weight: 920;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -8px 16px rgba(255,255,255,.14),
        0 7px 16px rgba(15,23,42,.055);
    -webkit-backdrop-filter: blur(18px) saturate(1.34);
    backdrop-filter: blur(18px) saturate(1.34);
    transform: none;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}
main.page > .admin-shell.admin-header--common .admin-tab:not(.is-active):hover,
main.page > .admin-shell.admin-header--common .admin-tab:not(.is-active):active {
    border-color: rgba(100,116,139,.24);
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,247,237,.40));
    color: #111827;
    box-shadow:
        0 8px 18px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.66);
}
main.page > .admin-shell.admin-header--common .admin-tab.is-active {
    min-height: 42px;
    border-color: rgba(255,151,64,.55);
    background:
        linear-gradient(135deg, rgba(255,181,105,.42), rgba(255,255,255,.62)),
        radial-gradient(circle at 24% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 50% 100%, rgba(255,151,64,.16), rgba(255,255,255,0) 46%);
    color: #3b2413;
    font-weight: 950;
    box-shadow:
        0 10px 28px rgba(255,151,64,.16),
        0 8px 20px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -14px 24px rgba(255,255,255,.22),
        inset 0 0 0 1px rgba(255,255,255,.24);
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-code-card-main {
    gap: 5px 9px;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .code-title {
    color: #475569;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact strong {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.58);
    color: #0f172a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 8px 18px rgba(15,23,42,.04);
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-code-card-note {
    color: #64748b;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-open-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid rgba(34,197,94,.34);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(240,253,244,.68), rgba(220,252,231,.44)),
        rgba(255,255,255,.30);
    color: #166534;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        inset 0 -7px 14px rgba(220,252,231,.22),
        0 7px 16px rgba(22,101,52,.070);
    -webkit-backdrop-filter: blur(18px) saturate(1.42);
    backdrop-filter: blur(18px) saturate(1.42);
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-open-button::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .78;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-open-button:hover,
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-open-button:active {
    border-color: rgba(34,197,94,.52);
    background:
        linear-gradient(135deg, rgba(220,252,231,.78), rgba(187,247,208,.52)),
        rgba(255,255,255,.38);
    color: #14532d;
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-link {
    border-color: rgba(255,255,255,.66);
    background: rgba(255,255,255,.42);
    color: #1f2937;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.74),
        inset 0 -7px 14px rgba(255,255,255,.14),
        0 7px 16px rgba(15,23,42,.045);
    -webkit-backdrop-filter: blur(18px) saturate(1.34);
    backdrop-filter: blur(18px) saturate(1.34);
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-copy-button {
    border: 1px solid rgba(255,255,255,.68);
    background: rgba(255,255,255,.44);
    color: #334155;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -7px 14px rgba(255,255,255,.14),
        0 7px 16px rgba(15,23,42,.050);
    -webkit-backdrop-filter: blur(18px) saturate(1.34);
    backdrop-filter: blur(18px) saturate(1.34);
}
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-copy-button:hover,
main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-invite-copy-button:active {
    border-color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.60);
    color: #111827;
}
main.page > .platform-notice-bar {
    margin: 8px 0 18px;
    border-color: rgba(251,146,60,.28);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,247,237,.76), rgba(255,255,255,.50)),
        radial-gradient(circle at 100% 50%, rgba(251,146,60,.10), rgba(255,255,255,0) 40%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 22px rgba(251,146,60,.05);
}

.admin-company-new-modal[hidden] {
    display: none !important;
}
.admin-company-new-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 22px;
}
.admin-company-new-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15,23,42,.34);
    cursor: pointer;
    -webkit-backdrop-filter: blur(9px) saturate(1.18);
    backdrop-filter: blur(9px) saturate(1.18);
}
.admin-company-new-modal-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    width: min(620px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 44px));
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(232,239,248,.94), rgba(255,241,227,.88)),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 100% 100%, rgba(96,165,250,.20), rgba(255,255,255,0) 44%);
    box-shadow:
        0 26px 72px rgba(15,23,42,.26),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -18px 34px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.42);
    -webkit-backdrop-filter: blur(24px) saturate(1.48) brightness(1.03);
    backdrop-filter: blur(24px) saturate(1.48) brightness(1.03);
}
.admin-company-new-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.admin-company-new-modal-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.25;
}
.admin-company-new-modal-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.admin-company-new-modal-close {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(15,23,42,.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.32);
    backdrop-filter: blur(18px) saturate(1.32);
}
.admin-company-new-modal-frame {
    width: 100%;
    height: clamp(360px, 58dvh, 520px);
    min-height: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
}
body.admin-company-new-modal-open {
    overflow: hidden;
}

.admin-invite-modal[hidden] {
    display: none !important;
}
.admin-invite-modal {
    position: fixed;
    inset: 0;
    z-index: 1510;
    display: grid;
    place-items: center;
    padding: 22px;
}
.admin-invite-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15,23,42,.34);
    cursor: pointer;
    -webkit-backdrop-filter: blur(9px) saturate(1.18);
    backdrop-filter: blur(9px) saturate(1.18);
}
.admin-invite-modal-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(520px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(232,239,248,.94), rgba(255,241,227,.88)),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 100% 100%, rgba(96,165,250,.20), rgba(255,255,255,0) 44%);
    box-shadow:
        0 26px 72px rgba(15,23,42,.26),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -18px 34px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.42);
    -webkit-backdrop-filter: blur(24px) saturate(1.48) brightness(1.03);
    backdrop-filter: blur(24px) saturate(1.48) brightness(1.03);
}
.admin-invite-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.admin-invite-modal-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.25;
}
.admin-invite-modal-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.admin-invite-modal-close {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(15,23,42,.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.32);
    backdrop-filter: blur(18px) saturate(1.32);
}
.admin-invite-modal-field {
    display: grid;
    gap: 6px;
}
.admin-invite-modal-field span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}
.admin-invite-modal-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 10px;
    background: rgba(255,255,255,.44);
    color: #1f2937;
    font-size: 13px;
    font-weight: 850;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 7px 16px rgba(15,23,42,.045);
    -webkit-backdrop-filter: blur(18px) saturate(1.34);
    backdrop-filter: blur(18px) saturate(1.34);
}
.admin-invite-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.admin-invite-copy-status {
    min-height: 16px;
    margin: -4px 0 0;
    color: #15803d;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}
body.admin-invite-modal-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    main.page > .admin-shell.admin-header--common {
        padding: 12px;
        border-radius: 16px;
        -webkit-backdrop-filter: blur(20px) saturate(1.46) brightness(1.03);
        backdrop-filter: blur(20px) saturate(1.46) brightness(1.03);
    }
    main.page > .admin-shell.admin-header--common .admin-topbar {
        padding: 0 0 9px;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu {
        display: block;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu summary {
        min-height: 42px;
        padding: 0 10px 0 9px;
        border: 1px solid rgba(255,151,64,.46);
        border-radius: 12px;
        background:
            linear-gradient(135deg, rgba(255,181,105,.34), rgba(255,255,255,.62)),
            radial-gradient(circle at 14% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 36%),
            radial-gradient(circle at 98% 100%, rgba(255,151,64,.18), rgba(255,255,255,0) 44%);
        color: #3b2413;
        box-shadow:
            0 12px 26px rgba(255,151,64,.13),
            0 8px 18px rgba(15,23,42,.045),
            inset 0 1px 0 rgba(255,255,255,.82),
            inset 0 -8px 14px rgba(255,255,255,.18);
        -webkit-backdrop-filter: blur(15px) saturate(1.26);
        backdrop-filter: blur(15px) saturate(1.26);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu summary span {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 8px;
        border: 1px solid rgba(255,151,64,.28);
        border-radius: 999px;
        background: rgba(255,151,64,.14);
        color: #8a3f0a;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu summary strong {
        color: #3b2413;
        font-weight: 950;
        text-shadow: 0 1px 0 rgba(255,255,255,.54);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu summary::after {
        border-right-color: #9a4b0b;
        border-bottom-color: #9a4b0b;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu[open] summary {
        border-color: rgba(255,151,64,.58);
        background:
            linear-gradient(135deg, rgba(255,181,105,.42), rgba(255,255,255,.66)),
            radial-gradient(circle at 14% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 38%),
            radial-gradient(circle at 96% 100%, rgba(255,151,64,.22), rgba(255,255,255,0) 46%);
        box-shadow:
            0 14px 30px rgba(255,151,64,.16),
            0 9px 20px rgba(15,23,42,.05),
            inset 0 1px 0 rgba(255,255,255,.86),
            inset 0 -10px 16px rgba(255,255,255,.20);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-panel {
        gap: 5px;
        margin-top: 6px;
        padding: 6px;
        border: 1px solid rgba(255,255,255,.72);
        border-radius: 12px;
        background: rgba(255,255,255,.58);
        box-shadow: 0 12px 26px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.72);
        -webkit-backdrop-filter: blur(16px) saturate(1.24);
        backdrop-filter: blur(16px) saturate(1.24);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-list {
        gap: 3px;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-link,
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils a,
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils button {
        min-height: 34px;
        padding: 0 9px;
        border: 1px solid rgba(255,255,255,.30);
        border-radius: 9px;
        background: rgba(255,255,255,.24);
        color: #334155;
        font-size: 12px;
        line-height: 1.05;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-link:hover,
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils a:hover,
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils button:hover {
        border-color: rgba(255,255,255,.58);
        background:
            linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,247,237,.24));
        color: #0f172a;
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-link.is-active {
        border: 1px solid rgba(255,151,64,.55);
        background:
            linear-gradient(135deg, rgba(255,181,105,.42), rgba(255,255,255,.66)),
            radial-gradient(circle at 20% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 40%),
            radial-gradient(circle at 50% 100%, rgba(255,151,64,.14), rgba(255,255,255,0) 46%);
        color: #3b2413;
        font-weight: 950;
        box-shadow:
            0 8px 18px rgba(255,151,64,.12),
            0 6px 14px rgba(15,23,42,.045),
            inset 0 1px 0 rgba(255,255,255,.88),
            inset 0 -8px 14px rgba(255,255,255,.18);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin-top: 1px;
        padding-top: 6px;
        border-top-color: rgba(15,23,42,.08);
    }
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils a,
    main.page > .admin-shell.admin-header--common .admin-mobile-menu-utils button {
        justify-content: center;
        min-height: 29px;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(255,255,255,.20);
        color: #475569;
        font-size: 11px;
        font-weight: 850;
        text-align: center;
    }
    main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact {
        margin: 8px 0 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
    main.page > .admin-shell.admin-header--common > .admin-code-card.admin-code-card--compact .admin-code-card-main {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    main.page > .platform-notice-bar {
        margin: 8px 0 16px;
        border-radius: 11px;
    }
    .admin-company-new-modal {
        padding: 14px;
    }
    .admin-company-new-modal-card {
        width: min(460px, calc(100vw - 20px));
        max-height: calc(100dvh - 24px);
        padding: 14px;
        border-radius: 16px;
    }
    .admin-company-new-modal-frame {
        height: clamp(390px, 68dvh, 560px);
        border-radius: 12px;
    }
    .admin-company-new-modal-head h2 {
        font-size: 18px;
    }
    .admin-invite-modal {
        padding: 14px;
    }
    .admin-invite-modal-card {
        width: min(420px, calc(100vw - 20px));
        padding: 14px;
        border-radius: 16px;
    }
    .admin-invite-modal-head h2 {
        font-size: 18px;
    }
    .admin-invite-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

/* Admin employees glass pass */
body.admin-employees-page .employee-admin-card,
body.admin-employees-page .employee-list-card {
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.92), transparent 34%),
        radial-gradient(circle at 92% 94%, rgba(120,180,255,.12), transparent 42%);
    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -16px 30px rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.32) brightness(1.03);
    backdrop-filter: blur(20px) saturate(1.32) brightness(1.03);
}
body.admin-employees-page .employee-list-card {
    position: relative;
    overflow: hidden;
}
body.admin-employees-page .employee-list-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(255,255,255,.48), transparent 30%, rgba(255,255,255,.12) 58%, transparent 76%);
    opacity: .58;
}
body.admin-employees-page .employee-list-card > * {
    position: relative;
    z-index: 1;
}
body.admin-employees-page .employee-status-filters label {
    border-color: rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    color: #334155;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 8px 18px rgba(15,23,42,.04);
    -webkit-backdrop-filter: blur(12px) saturate(1.18);
    backdrop-filter: blur(12px) saturate(1.18);
}
body.admin-employees-page .employee-status-filters input {
    accent-color: #f97316;
}
body.admin-employees-page .employee-card-grid {
    gap: 14px;
}
body.admin-employees-page .employee-summary-card {
    position: relative;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.66), rgba(255,255,255,.38)),
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.84), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255,181,105,.12), transparent 42%);
    box-shadow:
        0 16px 38px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -14px 26px rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.26) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.26) brightness(1.03);
}
body.admin-employees-page .employee-summary-card::before,
body.admin-employees-page .employee-summary-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
body.admin-employees-page .employee-summary-card::before {
    background: linear-gradient(145deg, rgba(255,255,255,.54), transparent 30%, rgba(255,255,255,.12) 62%, transparent 78%);
    opacity: .62;
}
body.admin-employees-page .employee-summary-card::after {
    inset: 1px;
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.52),
        inset -1px -1px 0 rgba(15,23,42,.035);
}
body.admin-employees-page .employee-summary-card > * {
    position: relative;
    z-index: 1;
}
body.admin-employees-page .employee-summary-head {
    align-items: flex-start;
}
body.admin-employees-page .employee-summary-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
body.admin-employees-page .employee-summary-title strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
}
body.admin-employees-page .employee-contract-status-chip {
    border: 1px solid rgba(255,151,64,.45);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,181,105,.36), rgba(255,255,255,.62)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.82), transparent 38%);
    color: #7c3f0d;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(255,151,64,.12), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-contract-status-chip.ok {
    border-color: rgba(34,197,94,.28);
    background: linear-gradient(135deg, rgba(187,247,208,.44), rgba(255,255,255,.60));
    color: #166534;
    box-shadow: 0 8px 18px rgba(34,197,94,.08), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-annual-leave-badge {
    border: 1px solid rgba(255,151,64,.34);
    background: linear-gradient(135deg, rgba(255,237,213,.72), rgba(255,255,255,.62));
    color: #8a3f0b;
    box-shadow: 0 8px 18px rgba(255,151,64,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-annual-leave-notice {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding: 11px 13px;
    border: 1px solid rgba(255,151,64,.28);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,237,213,.58), rgba(255,255,255,.56)),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.76), transparent 34%);
    box-shadow: 0 9px 22px rgba(255,151,64,.08), inset 0 1px 0 rgba(255,255,255,.78);
    color: #7c3f0d;
}
body.admin-employees-page .employee-annual-leave-notice strong {
    color: #7c3f0d;
    font-size: 13px;
    font-weight: 950;
}
body.admin-employees-page .employee-annual-leave-notice span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}
body.admin-employees-page .admin-contract-annual-leave-notice {
    margin: 10px 0 12px;
}
body.admin-employees-page .employee-health-certificate-badge {
    border: 1px solid rgba(14,165,233,.22);
    background: linear-gradient(135deg, rgba(186,230,253,.46), rgba(255,255,255,.62));
    color: #075985;
    box-shadow: 0 8px 18px rgba(14,165,233,.08), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-head .badge {
    border: 1px solid rgba(14,165,233,.22);
    background: linear-gradient(135deg, rgba(186,230,253,.46), rgba(255,255,255,.62));
    color: #075985;
    box-shadow: 0 8px 18px rgba(14,165,233,.08), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-badge.warn {
    border-color: rgba(245,158,11,.30);
    background: linear-gradient(135deg, rgba(254,243,199,.62), rgba(255,255,255,.62));
    color: #92400e;
    box-shadow: 0 8px 18px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-head .badge.warn {
    border-color: rgba(245,158,11,.30);
    background: linear-gradient(135deg, rgba(254,243,199,.62), rgba(255,255,255,.62));
    color: #92400e;
    box-shadow: 0 8px 18px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-badge.danger {
    border-color: rgba(239,68,68,.28);
    background: linear-gradient(135deg, rgba(254,226,226,.64), rgba(255,255,255,.62));
    color: #991b1b;
    box-shadow: 0 8px 18px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-head .badge.danger {
    border-color: rgba(239,68,68,.28);
    background: linear-gradient(135deg, rgba(254,226,226,.64), rgba(255,255,255,.62));
    color: #991b1b;
    box-shadow: 0 8px 18px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-health-certificate-box {
    display: grid;
    gap: 12px;
}
body.admin-employees-page .employee-health-certificate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.admin-employees-page .employee-health-certificate-head h3 {
    margin: 0;
}
body.admin-employees-page .employee-health-certificate-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
body.admin-employees-page .employee-health-certificate-summary div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(226,232,240,.62);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34)),
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.72), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 8px 18px rgba(15,23,42,.035);
}
body.admin-employees-page .employee-health-certificate-summary span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-health-certificate-summary strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}
body.admin-employees-page .employee-summary-head-actions {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
body.admin-employees-page .employee-summary-head-actions > .badge {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.46);
    color: #475569;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
}
body.admin-employees-page .employee-summary-contact,
body.admin-employees-page .employee-summary-meta {
    border-color: rgba(226,232,240,.72);
}
body.admin-employees-page .employee-summary-meta {
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}
body.admin-employees-page .employee-summary-meta > div {
    padding: 7px 8px;
    border-color: rgba(226,232,240,.68);
}
body.admin-employees-page .employee-summary-meta span {
    color: #64748b;
}
body.admin-employees-page .employee-summary-meta strong {
    color: #1f2937;
}
body.admin-employees-page .employee-summary-head-actions .employee-edit-action {
    border-color: rgba(255,151,64,.45);
    background:
        linear-gradient(135deg, rgba(255,181,105,.36), rgba(255,255,255,.58));
    color: #7c3f0d;
    box-shadow: 0 8px 18px rgba(255,151,64,.10), inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-device-reset-button {
    min-height: 19px;
    padding: 0 7px;
    border-color: rgba(185,28,28,.22);
    background: rgba(255,255,255,.44);
    color: #9f1239;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
body.admin-employees-page .pending-employee-table tr {
    background: rgba(255,255,255,.48);
}
body.admin-employees-page .employee-simple-eyebrow {
    margin: 0 0 5px;
    color: #ea580c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .03em;
}
body.admin-employees-page .employee-register-request-inline {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 14px 0 16px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42)),
        radial-gradient(circle at 14% 0%, rgba(255,255,255,.88), transparent 32%),
        radial-gradient(circle at 98% 100%, rgba(255,181,105,.13), transparent 42%);
    box-shadow:
        0 14px 32px rgba(15,23,42,.07),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -12px 24px rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.25) brightness(1.03);
    backdrop-filter: blur(16px) saturate(1.25) brightness(1.03);
}
body.admin-employees-page .employee-register-request-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
body.admin-employees-page .employee-register-request-head h3,
body.admin-employees-page .employee-request-simple-head h3 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
    font-size: 18px;
}
body.admin-employees-page .employee-register-request-head p,
body.admin-employees-page .employee-request-simple-head p {
    margin: 6px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
body.admin-employees-page .employee-request-row-list {
    display: grid;
    gap: 7px;
}
body.admin-employees-page .employee-request-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(226,232,240,.58);
    border-radius: 14px;
    background: rgba(255,255,255,.44);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(15,23,42,.035);
}
body.admin-employees-page .employee-request-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}
body.admin-employees-page .employee-request-row-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
body.admin-employees-page .employee-request-row-name strong {
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
    overflow-wrap: anywhere;
}
body.admin-employees-page .employee-request-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
body.admin-employees-page .employee-request-row-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}
body.admin-employees-page .employee-request-row-meta span + span::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 8px 2px 0;
    border-radius: 999px;
    background: rgba(100,116,139,.48);
}
body.admin-employees-page .employee-request-row-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    justify-content: flex-end;
    align-items: center;
}
body.admin-employees-page .employee-request-row-actions .button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}
body.admin-employees-page .employee-request-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed rgba(148,163,184,.48);
    border-radius: 14px;
    background: rgba(255,255,255,.32);
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
    text-align: center;
}
body.admin-employees-page .employee-initial-empty-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.44)),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.92), transparent 34%),
        radial-gradient(circle at 96% 96%, rgba(255,181,105,.15), transparent 44%);
    box-shadow:
        0 18px 42px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.84),
        inset 0 -16px 30px rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
}
body.admin-employees-page .employee-initial-empty-copy {
    min-width: 0;
}
body.admin-employees-page .employee-initial-empty-copy h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: 0;
}
body.admin-employees-page .employee-initial-empty-copy p {
    margin: 7px 0 0;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}
body.admin-employees-page .employee-initial-empty-action {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 168px;
}
body.admin-employees-page .employee-initial-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 999px;
    background: rgba(255,255,255,.44);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}
body.admin-employees-page .employee-initial-code strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}
body.admin-employees-page .employee-request-simple-panel,
body.admin-employees-page .employee-request-info-card,
body.admin-employees-page .employee-simple-step,
body.admin-employees-page .employee-simple-modal-card {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.72);
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.90), transparent 34%),
        radial-gradient(circle at 96% 96%, rgba(255,181,105,.16), transparent 42%);
    box-shadow:
        0 16px 38px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -14px 28px rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
    backdrop-filter: blur(18px) saturate(1.28) brightness(1.03);
}
body.admin-employees-page .employee-request-edit-card.simple-request-hidden-host {
    display: none;
}
body.admin-employees-page .employee-simple-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.42), transparent 32%),
        rgba(15,23,42,.20);
    -webkit-backdrop-filter: blur(14px) saturate(1.20);
    backdrop-filter: blur(14px) saturate(1.20);
}
body.admin-employees-page .employee-simple-modal-layer[hidden] {
    display: none;
}
body.admin-employees-page .employee-simple-modal-card {
    width: min(680px, 100%);
    max-height: min(900px, calc(100dvh - 32px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px;
}
body.admin-employees-page .employee-simple-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 4px;
}
body.admin-employees-page .employee-simple-modal-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-modal-head p {
    margin: 6px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
}
body.admin-employees-page .employee-simple-close-mark {
    display: none;
}
body.admin-employees-page .employee-request-simple-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    min-height: 0;
    overflow: hidden;
}
body.admin-employees-page .employee-request-simple-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
body.admin-employees-page .employee-simple-mode-switch {
    display: inline-flex;
    gap: 5px;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body.admin-employees-page .employee-simple-mode-switch button,
body.admin-employees-page .employee-simple-assist button {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
body.admin-employees-page .employee-simple-mode-switch button.is-active {
    border-color: rgba(255,151,64,.48);
    background: linear-gradient(135deg, rgba(255,181,105,.40), rgba(255,255,255,.64));
    color: #7c3f0d;
    box-shadow: 0 8px 18px rgba(255,151,64,.12), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-request-info-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
}
body.admin-employees-page .employee-request-info-card div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(226,232,240,.68);
    border-radius: 12px;
    background: rgba(255,255,255,.32);
}
body.admin-employees-page .employee-request-info-card span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-request-info-card strong {
    display: block;
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 950;
    overflow-wrap: anywhere;
}
body.admin-employees-page .employee-request-info-card p {
    grid-column: 1 / -1;
    margin: 0;
    color: #64748b;
    font-size: 12px;
}
body.admin-employees-page .employee-simple-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.admin-employees-page .employee-simple-progress span {
    flex: 0 0 auto;
    color: #7c3f0d;
    font-size: 12px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-progress div {
    flex: 1;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.40);
    box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
body.admin-employees-page .employee-simple-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,151,64,.72), rgba(255,206,150,.82));
    box-shadow: 0 4px 12px rgba(255,151,64,.20);
    transition: width .18s ease;
}
body.admin-employees-page .employee-simple-steps {
    display: grid;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}
body.admin-employees-page .employee-simple-step {
    display: none;
    gap: 13px;
    padding: 16px;
    border-radius: 16px;
}
body.admin-employees-page .employee-simple-step.is-active {
    display: grid;
}
body.admin-employees-page .employee-simple-step-label {
    color: #ea580c;
    font-size: 12px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-step h4 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
body.admin-employees-page .employee-simple-grid .field,
body.admin-employees-page .employee-simple-money {
    margin: 0;
}
body.admin-employees-page .employee-simple-question-stack {
    display: grid;
    gap: 12px;
}
body.admin-employees-page .employee-simple-primary-field input {
    min-height: 52px;
    font-size: 17px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-helper {
    margin: -3px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
body.admin-employees-page .employee-simple-warning {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(244,63,94,.28);
    border-radius: 13px;
    background: rgba(255,241,242,.78);
    color: #be123c;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-simple-primary-field input.is-under-minimum,
body.admin-employees-page [data-simple-hourly-wage].is-under-minimum {
    border-color: rgba(244,63,94,.55);
    box-shadow: 0 0 0 3px rgba(244,63,94,.10), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-simple-question-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.24)),
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.82), transparent 40%);
    box-shadow:
        0 12px 28px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.78);
}
body.admin-employees-page .employee-simple-question-card > strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.admin-employees-page .employee-simple-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid rgba(226,232,240,.68);
    border-radius: 13px;
    background: rgba(255,255,255,.42);
    color: #334155;
    font-size: 13px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-choice input {
    flex: 0 0 auto;
}
body.admin-employees-page .employee-simple-contract-end-field {
    margin: 0;
}
body.admin-employees-page .employee-simple-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(226,232,240,.68);
    border-radius: 12px;
    background: rgba(255,255,255,.34);
    color: #334155;
    font-size: 13px;
    font-weight: 850;
}
body.admin-employees-page .is-muted-field {
    opacity: .62;
}
body.admin-employees-page .employee-simple-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.admin-employees-page .employee-simple-day-chips button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.60);
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    color: #475569;
    font-weight: 950;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body.admin-employees-page .employee-simple-day-chips button.is-selected {
    border-color: rgba(255,151,64,.54);
    background: linear-gradient(135deg, rgba(255,181,105,.52), rgba(255,255,255,.68));
    color: #7c3f0d;
    box-shadow: 0 10px 22px rgba(255,151,64,.15), inset 0 1px 0 rgba(255,255,255,.86);
}
body.admin-employees-page .employee-simple-selected-days {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,151,64,.28);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255,237,213,.72), rgba(255,255,255,.44));
    color: #7c3f0d;
    font-size: 12px;
    font-weight: 900;
}
body.admin-employees-page .employee-simple-selected-days.is-empty {
    border-color: rgba(226,232,240,.72);
    background: rgba(255,255,255,.34);
    color: #64748b;
}
body.admin-employees-page .employee-simple-time-list {
    display: grid;
    gap: 8px;
}
body.admin-employees-page .employee-simple-same-time-panel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.28)),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.86), transparent 42%);
    box-shadow: 0 14px 30px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-simple-same-time-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
body.admin-employees-page .employee-simple-same-time-row label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-same-time-row input {
    width: 100%;
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid rgba(203,213,225,.82);
    border-radius: 12px;
    background: rgba(255,255,255,.64);
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
body.admin-employees-page .employee-simple-detail-toggle {
    justify-self: start;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255,151,64,.38);
    border-radius: 999px;
    background: rgba(255,255,255,.48);
    color: #7c3f0d;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(255,151,64,.08);
}
body.admin-employees-page .employee-simple-time-row {
    display: grid;
    grid-template-columns: 42px repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.26)),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.82), transparent 42%);
    box-shadow: 0 12px 26px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.80);
}
body.admin-employees-page .employee-simple-time-row.is-hidden {
    display: none;
}
body.admin-employees-page .employee-simple-time-row strong {
    align-self: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,181,105,.48), rgba(255,255,255,.64));
    color: #7c3f0d;
    font-size: 13px;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-simple-time-row label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-time-row input {
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid rgba(203,213,225,.82);
    border-radius: 11px;
    background: rgba(255,255,255,.62);
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
body.admin-employees-page .employee-simple-time-row small {
    grid-column: 2 / -1;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}
body.admin-employees-page .employee-simple-time-row small.is-warning {
    color: #be123c;
}
body.admin-employees-page .employee-simple-weekly-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.28)),
        radial-gradient(circle at 92% 12%, rgba(255,206,150,.30), transparent 38%);
    box-shadow: 0 14px 32px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.82);
}
body.admin-employees-page .employee-simple-weekly-card div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(226,232,240,.72);
    border-radius: 12px;
    background: rgba(255,255,255,.42);
}
body.admin-employees-page .employee-simple-weekly-card span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-weekly-card strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
}
body.admin-employees-page .employee-simple-weekly-card strong.is-eligible {
    color: #15803d;
}
body.admin-employees-page .employee-simple-weekly-card strong.is-ineligible {
    color: #7c3f0d;
}
body.admin-employees-page .employee-simple-weekly-card p {
    grid-column: 1 / -1;
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}
body.admin-employees-page .employee-simple-assist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.56);
    border-radius: 13px;
    background: rgba(255,255,255,.34);
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}
body.admin-employees-page .employee-simple-assist button {
    border-color: rgba(255,151,64,.36);
    background: rgba(255,255,255,.46);
    color: #7c3f0d;
}
body.admin-employees-page .employee-simple-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
body.admin-employees-page .employee-simple-option-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(226,232,240,.68);
    border-radius: 12px;
    background: rgba(255,255,255,.34);
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
body.admin-employees-page .employee-simple-review-grid div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(226,232,240,.68);
    border-radius: 12px;
    background: rgba(255,255,255,.36);
}
body.admin-employees-page .employee-simple-review-grid .employee-simple-review-wide {
    grid-column: 1 / -1;
}
body.admin-employees-page .employee-simple-review-grid span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-review-grid strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
body.admin-employees-page .employee-simple-note {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}
body.admin-employees-page .employee-simple-step:last-child {
    gap: 10px;
}
body.admin-employees-page .employee-simple-step:last-child h4 {
    font-size: 20px;
}
body.admin-employees-page .employee-simple-error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(244,63,94,.24);
    border-radius: 13px;
    background: rgba(255,241,242,.72);
    color: #9f1239;
    font-size: 13px;
    font-weight: 850;
}
body.admin-employees-page .employee-simple-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
body.admin-employees-page .employee-simple-actions button {
    min-width: 96px;
}
@media (max-width: 700px) {
    body.admin-employees-page .employee-list-card {
        padding: 13px;
        border-radius: 16px;
    }
    body.admin-employees-page .employee-list-head {
        gap: 10px;
        margin-bottom: 12px;
    }
    body.admin-employees-page .employee-status-filters {
        gap: 6px;
    }
    body.admin-employees-page .employee-status-filters label {
        min-height: 29px;
        padding: 0 9px;
        font-size: 11px;
    }
    body.admin-employees-page .employee-card-grid {
        gap: 9px;
    }
    body.admin-employees-page .employee-summary-card {
        padding: 11px;
        border-radius: 15px;
        box-shadow:
            0 17px 40px rgba(15,23,42,.095),
            inset 0 1px 0 rgba(255,255,255,.86),
            inset 0 -14px 28px rgba(255,255,255,.18);
    }
    body.admin-employees-page .employee-summary-head {
        gap: 8px;
    }
    body.admin-employees-page .employee-summary-title strong {
        font-size: 15px;
    }
    body.admin-employees-page .employee-contract-status-chip {
        font-size: 10px;
    }
    body.admin-employees-page .employee-health-certificate-summary {
        grid-template-columns: 1fr;
    }
    body.admin-employees-page .employee-summary-meta > div {
        padding: 6px 7px;
    }
    body.admin-employees-page .employee-register-request-inline {
        gap: 8px;
        margin: 10px 0 13px;
        padding: 10px;
        border-radius: 15px;
        max-width: 100%;
        overflow: hidden;
    }
    body.admin-employees-page .employee-register-request-head,
    body.admin-employees-page .employee-request-simple-head {
        display: grid;
        gap: 7px;
        min-width: 0;
    }
    body.admin-employees-page .employee-register-request-head > .badge {
        justify-self: start;
        width: auto;
    }
    body.admin-employees-page .employee-register-request-head h3 {
        font-size: 16px;
    }
    body.admin-employees-page .employee-register-request-head p {
        font-size: 12px;
        line-height: 1.4;
    }
    body.admin-employees-page .employee-request-row-list {
        gap: 7px;
        min-width: 0;
    }
    body.admin-employees-page .employee-request-row {
        grid-template-columns: 1fr;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        padding: 9px;
        border-radius: 13px;
    }
    body.admin-employees-page .employee-request-row-name {
        gap: 5px;
    }
    body.admin-employees-page .employee-request-row-name strong {
        font-size: 15px;
    }
    body.admin-employees-page .employee-request-row-name .pending-contract-badge {
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
    }
    body.admin-employees-page .employee-request-row-meta {
        display: block;
        font-size: 11px;
        line-height: 1.45;
    }
    body.admin-employees-page .employee-request-row-meta span {
        display: inline;
    }
    body.admin-employees-page .employee-request-row-meta span + span::before {
        width: 3px;
        height: 3px;
        margin: 0 6px 2px;
    }
    body.admin-employees-page .employee-request-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        justify-content: stretch;
    }
    body.admin-employees-page .employee-request-row-actions .button {
        width: auto;
        min-width: 0;
        justify-content: center;
        min-height: 34px;
        padding: 0 8px;
        font-size: 11px;
    }
    body.admin-employees-page .employee-initial-empty-card {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
        padding: 15px;
        border-radius: 17px;
    }
    body.admin-employees-page .employee-initial-empty-copy h2 {
        font-size: 18px;
    }
    body.admin-employees-page .employee-initial-empty-copy p {
        font-size: 12px;
        line-height: 1.4;
    }
    body.admin-employees-page .employee-initial-empty-action {
        justify-items: stretch;
        min-width: 0;
        width: 100%;
    }
    body.admin-employees-page .employee-initial-code,
    body.admin-employees-page .employee-initial-empty-action .button {
        justify-content: center;
        width: 100%;
    }
    body.admin-employees-page .employee-simple-modal-layer {
        align-items: flex-end;
        padding: 0;
        background: rgba(15,23,42,.24);
    }
    body.admin-employees-page .employee-simple-modal-card {
        width: calc(100dvw - 10px);
        max-width: calc(100dvw - 10px);
        min-width: 0;
        max-height: 92dvh;
        margin: 0 5px;
        border-radius: 22px 22px 0 0;
        padding: 12px;
        grid-template-rows: auto minmax(0, 1fr);
    }
    body.admin-employees-page .employee-simple-modal-head {
        align-items: flex-start;
        gap: 8px;
    }
    body.admin-employees-page .employee-simple-modal-head h2 {
        font-size: 20px;
    }
    body.admin-employees-page .employee-simple-modal-head p {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.42;
    }
    body.admin-employees-page .employee-simple-modal-head .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 14px;
    }
    body.admin-employees-page .employee-simple-close-text {
        display: none;
    }
    body.admin-employees-page .employee-simple-close-mark {
        display: inline;
        font-size: 22px;
        line-height: 1;
    }
    body.admin-employees-page .employee-simple-grid,
    body.admin-employees-page .employee-simple-review-grid {
        grid-template-columns: 1fr;
    }
    body.admin-employees-page .employee-request-info-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding: 7px;
    }
    body.admin-employees-page .employee-request-info-card div:nth-child(3) {
        grid-column: 1 / -1;
    }
    body.admin-employees-page .employee-request-info-card div {
        padding: 7px 8px;
        border-radius: 10px;
    }
    body.admin-employees-page .employee-request-info-card span {
        margin-bottom: 2px;
        font-size: 10px;
    }
    body.admin-employees-page .employee-request-info-card strong {
        font-size: 12px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    body.admin-employees-page .employee-request-info-card p {
        display: none;
    }
    body.admin-employees-page .employee-request-simple-panel {
        gap: 10px;
        padding: 10px;
        min-width: 0;
        max-width: 100%;
    }
    body.admin-employees-page .employee-simple-progress {
        gap: 8px;
    }
    body.admin-employees-page .employee-simple-progress div {
        height: 6px;
    }
    body.admin-employees-page .employee-simple-step {
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
    }
    body.admin-employees-page .employee-simple-step-label {
        font-size: 11px;
    }
    body.admin-employees-page .employee-simple-step h4 {
        font-size: 21px;
        line-height: 1.25;
    }
    body.admin-employees-page .employee-simple-question-stack {
        gap: 10px;
    }
    body.admin-employees-page .employee-simple-primary-field input {
        min-height: 54px;
        font-size: 18px;
    }
    body.admin-employees-page .employee-simple-helper {
        font-size: 11px;
    }
    body.admin-employees-page .employee-simple-question-card {
        padding: 12px;
    }
    body.admin-employees-page .employee-simple-same-time-panel {
        gap: 9px;
        padding: 10px;
        min-width: 0;
        max-width: 100%;
    }
    body.admin-employees-page .employee-simple-same-time-row {
        grid-template-columns: minmax(0, .95fr) minmax(0, .95fr) minmax(48px, 58px);
        gap: 5px;
        min-width: 0;
    }
    body.admin-employees-page .employee-simple-same-time-row label {
        min-width: 0;
        font-size: 10px;
    }
    body.admin-employees-page .employee-simple-same-time-row input {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 0 6px;
        font-size: 12px;
    }
    body.admin-employees-page .employee-simple-detail-toggle {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
    }
    body.admin-employees-page .employee-simple-time-list {
        gap: 7px;
        min-width: 0;
        max-width: 100%;
    }
    body.admin-employees-page .employee-simple-time-row {
        grid-template-columns: 28px minmax(0, .95fr) minmax(0, .95fr) minmax(48px, 58px);
        gap: 5px;
        padding: 8px;
        border-radius: 13px;
        min-width: 0;
        max-width: 100%;
    }
    body.admin-employees-page .employee-simple-time-row strong {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    body.admin-employees-page .employee-simple-time-row label {
        min-width: 0;
        font-size: 10px;
    }
    body.admin-employees-page .employee-simple-time-row input {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 0 6px;
        font-size: 12px;
    }
    body.admin-employees-page .employee-simple-time-row small {
        grid-column: 2 / -1;
        font-size: 10px;
    }
    body.admin-employees-page .employee-simple-weekly-card {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
    }
    body.admin-employees-page .employee-simple-weekly-card div {
        padding: 8px;
    }
    body.admin-employees-page .employee-simple-weekly-card strong {
        font-size: 13px;
    }
    body.admin-employees-page .employee-simple-choice-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    body.admin-employees-page .employee-simple-choice {
        min-height: 42px;
        font-size: 13px;
    }
    body.admin-employees-page .employee-simple-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    body.admin-employees-page .employee-simple-assist {
        display: grid;
    }
    body.admin-employees-page .employee-simple-assist button {
        justify-self: start;
    }
    body.admin-employees-page .employee-simple-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
    }
    body.admin-employees-page .employee-simple-actions button {
        width: 100%;
        min-width: 0;
    }
}