:root {
    --navy:#102f40;
    --navy-deep:#0b2433;
    --navy-soft:#234657;
    --brand-navy:#0e3352;
    --brand-teal:#2f9d93;
    --mint:#b9edd5;
    --green:#197456;
    --green-soft:#e8f5ee;
    --amber:#b77327;
    --amber-soft:#fcf0df;
    --red:#ad4340;
    --red-soft:#fbecec;
    --paper:#f6f7f4;
    --white:#fff;
    --ink:#183746;
    --muted:#75858a;
    --line:#e4e9e5;
    --radius:20px;
    --shadow:0 5px 24px #18374605;
    --font:'Trebuchet MS','Avenir Next',sans-serif
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    color:var(--ink);
    font-family:var(--font);
    font-size:14px;
    line-height:1.55;
    background:var(--paper)
}
button,input,select,textarea {
    font:inherit
}
a {
    color:inherit;
    text-decoration:none
}
button {
    cursor:pointer
}
button:disabled {
    cursor:not-allowed;
    opacity:.45
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2,h3 {
    line-height:1.2;
    letter-spacing:-.035em
}
h1 {
    font-size:34px;
    margin-bottom:10px;
    font-weight:700
}
h2 {
    font-size:20px;
    margin-bottom:12px
}
h3 {
    font-size:16px;
    margin-bottom:7px
}
p {
    color:var(--muted);
    margin-bottom:16px
}
small {
    font-size:12px
}
strong {
    font-weight:700
}
input,select,textarea {
    width:100%;
    border:1px solid #dce4df;
    border-radius:10px;
    background:var(--white);
    color:var(--ink);
    min-height:46px;
    padding:11px 13px;
    transition:border-color .2s,box-shadow .2s
}
input::placeholder,textarea::placeholder {
    color:#9aa7a9
}
input:focus,select:focus,textarea:focus {
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px #19745613
}
textarea {
    resize:vertical;
    min-height:100px
}
label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:12px;
    font-weight:700;
    color:#4e636a
}
label small {
    font-weight:400;
    color:var(--muted)
}
fieldset {
    border:1px solid var(--line);
    border-radius:12px;
    padding:15px 18px;
    margin:0
}
legend {
    font-weight:700;
    font-size:12px;
    padding:0 8px
}
button:focus-visible,a:focus-visible {
    outline:3px solid #67c4a0;
    outline-offset:4px
}
[hidden] {
    display:none!important
}
.icon {
    display:inline-block;
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    vertical-align:middle
}
.svg-sprite {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.muted {
    color:var(--muted)
}
.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:.2em;
    color:var(--green);
    margin-bottom:11px
}
.pill {
    display:inline-flex;
    border:1px solid var(--line);
    background:#f6f8f5;
    border-radius:20px;
    font-size:9px;
    letter-spacing:.12em;
    font-weight:700;
    padding:7px 12px
}
.pill-light {
    border-color:#ffffff30;
    background:#ffffff0c;
    color:var(--mint)
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:11px 19px;
    border:1px solid transparent;
    border-radius:11px;
    font-weight:700;
    font-size:12px;
    line-height:1.4;
    white-space:nowrap;
    transition:background .18s,transform .18s
}
.button:active:not(:disabled) {
    transform:translateY(1px)
}
.button-primary {
    background:var(--navy);
    color:white
}
.button-primary:hover:not(:disabled) {
    background:var(--navy-soft)
}
.button-outline {
    background:white;
    color:var(--ink);
    border-color:#dce4df
}
.button-outline:hover:not(:disabled) {
    background:#f0f5f1
}
.button-danger {
    background:var(--red-soft);
    border-color:#efcfcc;
    color:var(--red)
}
.button-danger:hover {
    background:#f5dbd7
}
.button-mint {
    background:var(--mint);
    color:var(--navy)
}
.button-mint:hover {
    background:#d2f5e3
}
.button-sm {
    min-height:34px;
    padding:7px 12px;
    font-size:11px;
    border-radius:8px
}
.button-full {
    width:100%
}
.icon-button {
    border:1px solid var(--line);
    border-radius:9px;
    background:white;
    width:36px;
    height:36px;
    display:grid;
    place-items:center
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:0;
    background:transparent;
    padding:0;
    color:var(--green);
    font-size:12px;
    font-weight:700;
    white-space:nowrap
}
.text-link .icon {
    width:17px;
    height:17px
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
    border-radius:7px;
    padding:5px 9px;
    background:#edf1f1;
    color:#61747d
}
.badge:before {
    content:'';
    width:5px;
    height:5px;
    flex-shrink:0;
    background:currentColor;
    border-radius:50%
}
.badge-present,.badge-approved {
    background:var(--green-soft);
    color:var(--green)
}
.badge-late,.badge-pending,.badge-leave {
    background:var(--amber-soft);
    color:var(--amber)
}
.badge-rejected,.badge-absent {
    background:var(--red-soft);
    color:var(--red)
}
.badge-off,.badge-canceled {
    background:#eef1f2;
    color:#76868c
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    max-width:100%;
    padding:11px;
    border:1px solid #e1ede6;
    border-radius:15px;
    background:#f9fcf8;
    color:var(--brand-navy);
    line-height:1.1;
    flex-shrink:0
}
.brand-copy {
    flex:1;
    min-width:0
}
.brand:focus-visible,.mobile-brand:focus-visible {
    outline:2px solid var(--brand-teal);
    outline-offset:4px
}
.brand-symbol {
    display:block;
    width:36px;
    height:42px;
    object-fit:contain;
    flex-shrink:0
}
.brand-wordmark {
    display:block;
    width:112px;
    max-width:100%;
    height:auto
}
.brand small {
    display:block;
    font-size:8px;
    letter-spacing:.035em;
    font-weight:400;
    margin-top:5px;
    color:var(--navy-soft)
}
.sidebar {
    width:246px;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    padding:34px 23px 24px;
    background:radial-gradient(ellipse at 0 100%,#204f5738,transparent 60%),var(--navy-deep);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-color:#6d919c transparent;
    scrollbar-width:thin;
    z-index:40
}
.sidebar::-webkit-scrollbar {
    width:7px
}
.sidebar::-webkit-scrollbar-thumb {
    border:2px solid var(--navy-deep);
    border-radius:999px;
    background:#6d919c
}
.tenant-switch {
    display:flex;
    gap:10px;
    align-items:center;
    padding:15px 10px;
    margin:32px -2px 25px;
    border:1px solid #91b2bb21;
    border-radius:12px;
    color:#e4eef0
}
.tenant-switch strong {
    display:block;
    font-size:11px;
    max-width:148px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.tenant-switch div>span {
    display:block;
    font-size:9px;
    color:#88a6af;
    margin-top:3px
}
.tenant-icon {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:8px;
    background:#ffffff0c;
    color:var(--mint);
    flex-shrink:0
}
.tenant-icon .icon {
    width:18px
}
.nav-label {
    font-size:8px;
    letter-spacing:.16em;
    color:#75969f;
    margin-bottom:12px;
    margin-left:12px
}
.side-nav {
    display:flex;
    flex-direction:column;
    gap:5px
}
.nav-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 13px;
    border-radius:10px;
    color:#94b0b9;
    font-size:11px;
    transition:background .15s,color .15s
}
.nav-item .icon {
    width:18px;
    height:18px
}
.nav-item.active {
    background:var(--mint);
    color:var(--navy-deep);
    font-weight:700;
    box-shadow:0 6px 14px #0000000e
}
.nav-item:not(.active):hover {
    background:#ffffff08;
    color:white
}
.sidebar-footer {
    margin-top:auto;
    padding-top:22px;
    flex-shrink:0
}
.system-status {
    display:flex;
    gap:7px;
    align-items:center;
    font-size:9px;
    color:#89a9b1;
    padding-bottom:24px;
    border-bottom:1px solid #ffffff0d;
    margin-bottom:20px
}
.system-status>span {
    height:5px;
    width:5px;
    background:#9fdfb8;
    border-radius:50%
}
.avatar {
    display:grid;
    place-items:center;
    background:#3c626c;
    color:#def2eb;
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    flex-shrink:0
}
.avatar-light {
    background:#e7eee8;
    color:#456a60
}
.account {
    display:flex;
    align-items:center;
    gap:10px
}
.account strong {
    display:block;
    color:#e4eef0;
    font-size:10px;
    max-width:135px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
.account small {
    display:block;
    font-size:9px;
    color:#7898a2
}
.logout {
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:10px;
    color:#799aa5;
    font-size:10px;
    padding:17px 0 0
}
.logout .icon {
    width:16px
}
.workspace {
    margin-left:246px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}
.topbar {
    height:77px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding:0 38px;
    background:#ffffff75
}
.topbar-left,.topbar-right {
    display:flex;
    gap:18px;
    align-items:center
}
.breadcrumb {
    color:#73848a;
    font-size:10px
}
.breadcrumb span {
    padding:0 10px;
    color:#b6c2c4
}
.mobile-brand {
    display:none;
    align-items:center;
    gap:7px
}
.mobile-brand .brand-symbol {
    width:24px;
    height:28px
}
.mobile-brand .brand-wordmark {
    width:84px
}
.date-chip {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#6d8087
}
.date-chip .icon {
    width:15px;
    height:15px
}
.topbar-right .avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    font-size:11px
}
.mobile-menu {
    display:none
}
.main-content {
    width:100%;
    max-width:1570px;
    padding:35px 38px 42px;
    margin:0 auto;
    flex:1
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:27px
}
.page-heading h1 {
    font-size:30px
}
.page-description {
    font-size:11px;
    margin:0
}
.heading-actions {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}
.card {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:25px;
    box-shadow:var(--shadow);
    margin-bottom:22px;
    min-width:0
}
.card p {
    font-size:12px;
    line-height:1.65
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:21px
}
.section-heading h2 {
    font-size:17px;
    margin:0
}
.section-heading p {
    margin:5px 0 0;
    font-size:10px
}
.section-heading h3 {
    margin:0
}
.workspace-footer {
    padding:0 38px 22px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#a1afae;
    font-size:8px
}
.workspace-footer>span:last-child {
    display:flex;
    align-items:center;
    gap:5px
}
.workspace-footer .icon {
    width:12px;
    height:12px
}
.bottom-nav {
    display:none
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:23px
}
.stat-card {
    position:relative;
    min-width:0;
    background:white;
    border:1px solid var(--line);
    border-radius:17px;
    padding:23px 22px;
    animation:enter .4s both
}
.stat-card:nth-child(2) {
    animation-delay:.06s
}
.stat-card:nth-child(3) {
    animation-delay:.12s
}
.stat-card:nth-child(4) {
    animation-delay:.18s
}
.stat-card>p {
    font-size:10px;
    color:#77898d;
    margin:0 0 7px
}
.stat-card>strong {
    font-size:32px;
    font-weight:700;
    line-height:1.1;
    display:block;
    letter-spacing:-.04em
}
.stat-card>strong small {
    font-size:13px;
    color:#8f9d9f;
    padding-left:8px;
    letter-spacing:0
}
.stat-card>span:last-child {
    font-size:9px;
    color:#92a09f;
    display:block;
    margin-top:9px
}
.stat-icon {
    background:#ebf0f3;
    color:#527186;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:11px;
    flex-shrink:0
}
.stat-card .stat-icon {
    position:absolute;
    right:17px;
    top:18px
}
.stat-icon .icon {
    width:17px;
    height:17px
}
.mint {
    background:var(--green-soft);
    color:var(--green)
}
.amber {
    background:var(--amber-soft);
    color:var(--amber)
}
.feature-icon {
    width:44px;
    height:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:var(--green-soft);
    color:var(--green);
    margin-bottom:18px;
    flex-shrink:0
}
.feature-icon.small {
    width:33px;
    height:33px;
    margin:0
}
.feature-icon.amber {
    background:var(--amber-soft);
    color:var(--amber)
}
.hero-banner,.employee-welcome {
    background:radial-gradient(ellipse at 75% 130%,#47887d60,transparent 60%),var(--navy);
    color:white;
    border-radius:22px;
    padding:30px 34px;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    position:relative
}
.hero-banner h2 {
    font-size:27px;
    margin:20px 0 10px;
    line-height:1.25
}
.hero-banner p {
    color:#a4bec1;
    font-size:11px;
    margin:0
}
.hero-orbit {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:190px;
    height:150px;
    margin-right:24px;
    border:1px solid #9fcebe38;
    border-radius:50%;
    transform:rotate(-12deg);
    background:#b9edd505
}
.hero-orbit:before {
    content:'';
    position:absolute;
    inset:13px -30px;
    border:1px solid #9fcebe24;
    border-radius:50%;
    transform:rotate(35deg)
}
.hero-orbit .icon {
    width:44px;
    height:44px;
    color:var(--mint)
}
.hero-orbit span {
    font-size:10px;
    color:#a4c8bf;
    margin-top:12px
}
.dashboard-columns {
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(255px,1fr);
    gap:22px
}
.dashboard-columns>.card {
    min-height:290px
}
.two-column {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}
.bar-chart {
    height:168px;
    display:flex;
    gap:14px;
    align-items:flex-end;
    padding:4px 5px 0;
    margin-top:8px
}
.bar-column {
    flex:1;
    text-align:center;
    min-width:0
}
.bar-value {
    display:block;
    font-size:10px;
    color:#71848b;
    margin-bottom:8px
}
.bar-track {
    height:111px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:repeating-linear-gradient(to top,transparent 0,transparent 35px,#f0f3f0 36px);
    border-bottom:1px solid var(--line)
}
.chart-bar {
    width:65%;
    max-width:40px;
    min-height:3px;
    background:linear-gradient(180deg,#a0d8c0,#3d826e);
    border-radius:7px 7px 2px 2px;
    height:0;
    transition:height .7s cubic-bezier(.2,.8,.3,1)
}
.bar-column>span:last-child {
    display:block;
    margin-top:12px;
    color:#86969b;
    font-size:9px
}
.chart-legend {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:9px;
    color:#90a09e;
    margin-top:21px
}
.chart-legend>span {
    display:flex;
    align-items:center;
    gap:6px
}
.chart-legend i {
    width:7px;
    height:7px;
    border-radius:2px;
    background:#79b79e
}
.attention-card {
    background:linear-gradient(155deg,#fcfcf9,#f8f7f0)
}
.attention-card .eyebrow {
    font-size:8px;
    color:#8d8b73
}
.attention-card h2 {
    font-size:22px;
    line-height:1.3
}
.attention-card p:not(.eyebrow) {
    font-size:10px
}
.attention-card .button {
    font-size:10px;
    min-height:38px
}
.subscription-note {
    font-size:9px;
    color:#92a09e;
    padding-top:20px
}
.table-wrap {
    overflow-x:auto;
    scrollbar-width:thin
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:11px;
    white-space:nowrap
}
th {
    font-size:9px;
    letter-spacing:.035em;
    font-weight:400;
    color:#8b9ba0;
    padding:14px 15px;
    border-bottom:1px solid var(--line);
    background:#fafbf9
}
th:first-child {
    border-radius:9px 0 0 9px
}
th:last-child {
    border-radius:0 9px 9px 0
}
td {
    padding:16px 15px;
    border-bottom:1px solid #edf1ed;
    vertical-align:middle;
    color:#4e686f
}
tbody tr:last-child td {
    border-bottom:0
}
td>strong {
    font-size:11px;
    color:var(--ink)
}
.cell-person {
    display:flex;
    align-items:center;
    gap:10px
}
.cell-person .avatar {
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:11px
}
.cell-person strong {
    display:block;
    font-size:11px;
    color:var(--ink)
}
.cell-person small,.cell-subtitle {
    display:block;
    color:#93a1a4;
    font-size:9px;
    margin-top:3px
}
.table-footnote {
    font-size:10px!important;
    padding-top:12px;
    border-top:1px solid var(--line);
    margin:0
}
.filter-bar {
    display:flex;
    gap:13px;
    align-items:flex-end;
    margin-bottom:24px
}
.filter-wrap {
    flex-wrap:wrap
}
.filter-bar label {
    min-width:125px;
    font-size:10px;
    flex:1
}
.filter-bar .search-label {
    flex:1.5;
    min-width:170px
}
.filter-bar input,.filter-bar select {
    font-size:11px;
    min-height:40px;
    padding:9px 12px
}
.filter-bar .button {
    min-height:40px;
    font-size:11px
}
.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:10px;
    color:#899b9e
}
.pagination>div {
    display:flex;
    gap:8px
}
.empty-state {
    padding:40px 10px;
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:center;
    gap:10px
}
.empty-state>.icon {
    width:34px;
    height:34px;
    stroke-width:1.2;
    color:#8cae9e;
    margin-bottom:5px
}
.empty-state strong {
    font-size:13px;
    max-width:350px
}
.empty-state span {
    font-size:11px;
    color:#98a6a6
}
.form-card {
    max-width:620px
}
.form-card.wide {
    max-width:840px
}
.form-stack {
    display:flex;
    flex-direction:column;
    gap:20px
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}
.span-two {
    grid-column:1/-1
}
.checkbox-label {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:400;
    color:#526970
}
.checkbox-label input {
    appearance:auto;
    min-height:0;
    width:17px;
    height:17px;
    accent-color:var(--green);
    flex-shrink:0;
    padding:0
}
.day-options {
    display:flex;
    gap:16px;
    flex-wrap:wrap
}
.day-options .checkbox-label {
    font-size:11px
}
.form-actions {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap
}
.card-heading {
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:25px
}
.card-heading .feature-icon {
    margin:0
}
.card-heading h2 {
    margin-bottom:5px
}
.card-heading p {
    margin:0;
    font-size:11px
}
.notice {
    background:#eef5f1;
    border:1px solid #dae9de;
    color:#526f60;
    font-size:12px;
    line-height:1.7;
    padding:15px 17px;
    border-radius:12px;
    margin:0 0 20px
}
.form-stack>.notice {
    margin:0
}
.notice .icon {
    width:17px;
    height:17px
}
.notice a {
    text-decoration:underline;
    font-weight:700
}
.notice-danger {
    color:var(--red);
    background:var(--red-soft);
    border-color:#efcfcc
}
.notice-success {
    background:var(--green-soft);
    color:var(--green);
    border-color:#c7e8d4
}
.detail-list {
    margin:0
}
.detail-list>div {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #edf1ed;
    font-size:11px
}
.detail-list>div:last-child {
    border:0
}
.detail-list dt {
    color:#93a1a5;
    flex-shrink:0
}
.detail-list dd {
    margin:0;
    text-align:right;
    color:#45616b;
    overflow-wrap:anywhere
}
.list-item {
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid var(--line);
    padding:15px 0
}
.list-main {
    flex:1;
    min-width:0
}
.list-main strong {
    font-size:12px;
    display:block
}
.list-main small {
    display:block;
    font-size:10px;
    color:#8fa1a7;
    overflow-wrap:anywhere
}
.office-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}
.office-card {
    overflow:hidden
}
.geofence-art {
    height:145px;
    margin:-25px -25px 23px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    background:radial-gradient(circle,#c8e5d657,transparent 55%),linear-gradient(90deg,#e9eeea 1px,transparent 1px),linear-gradient(#e9eeea 1px,transparent 1px),#f3f6f2;
    background-size:auto,22px 22px,22px 22px,auto
}
.geofence-circle {
    height:106px;
    width:106px;
    border:1px dashed #82b6a2;
    display:grid;
    place-items:center;
    border-radius:50%;
    position:relative;
    background:#9dd9b936
}
.geofence-circle:after {
    content:'';
    position:absolute;
    inset:12px;
    border:1px solid #81b39b4d;
    border-radius:50%
}
.geofence-circle .icon {
    height:31px;
    width:31px;
    color:var(--green);
    z-index:1
}
.geofence-art>span {
    font-size:10px;
    font-weight:700;
    color:#658e7b;
    background:#f5faf4;
    padding:7px 11px;
    border-radius:9px
}
.import-form {
    margin-top:30px
}
.reason-cell {
    max-width:250px;
    min-width:180px;
    white-space:normal;
    overflow-wrap:anywhere
}
.preserve-lines {
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.attendance-photo {
    display:block;
    width:100%;
    max-height:470px;
    object-fit:contain;
    border-radius:13px;
    background:#edf1ed
}
.photo-empty {
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background:var(--paper);
    border-radius:13px;
    color:var(--muted)
}
.photo-empty .icon {
    width:34px;
    height:34px;
    margin:16px
}
.photo-empty p {
    font-size:11px
}
dialog {
    border:1px solid var(--line);
    padding:27px;
    border-radius:20px;
    max-width:500px;
    width:calc(100% - 32px);
    color:var(--ink);
    box-shadow:0 30px 100px #08283840;
    max-height:90dvh;
    overflow:auto
}
dialog::backdrop {
    background:#0b253381;
    backdrop-filter:blur(3px)
}
dialog>p {
    font-size:12px
}
.dialog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    gap:15px
}
.dialog-heading h2 {
    margin:0
}
.dialog-close {
    border:0;
    background:var(--paper);
    border-radius:50%;
    width:30px;
    height:30px;
    font-size:23px;
    color:#70838a
}
.toast-stack {
    position:fixed;
    top:22px;
    right:22px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:450px
}
.toast {
    display:flex;
    align-items:flex-start;
    gap:11px;
    box-shadow:0 9px 30px #123d3520;
    border:1px solid #d6e8dc;
    background:white;
    padding:17px 18px;
    border-radius:14px;
    font-size:12px;
    animation:enter .25s both
}
.toast .icon {
    color:var(--green);
    width:19px;
    height:19px
}
.toast>span {
    flex:1
}
.toast-close {
    border:0;
    background:transparent;
    color:#91a19e;
    font-size:20px;
    line-height:1;
    padding:0 0 0 5px
}
.error-card {
    max-width:650px;
    margin:60px auto;
    padding:45px
}
.error-number {
    font-size:70px;
    letter-spacing:-.06em;
    color:#c4dacc;
    display:block;
    font-weight:700
}
.error-card p {
    font-size:14px
}
.error-card .form-actions {
    margin-top:25px
}
.auth-body {
    background:#edf1ed
}
.login-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    height:100dvh
}
.login-story {
    padding:clamp(20px,4dvh,40px) clamp(26px,4vw,64px) clamp(16px,2.5dvh,28px);
    background:radial-gradient(ellipse at 90% 90%,#326b685e,transparent 60%),var(--navy-deep);
    color:white;
    position:relative;
    overflow:hidden;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    row-gap:clamp(12px,2dvh,20px)
}
.story-content {
    width:100%;
    max-width:430px;
    min-height:0;
    justify-self:center;
    align-self:center;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:clamp(16px,2.5dvh,28px)
}
.story-copy {
    position:relative;
    z-index:1;
    width:100%;
    text-align:center
}
.story-copy .eyebrow {
    color:#b2dbb9;
    font-size:9px
}
.story-copy h1 {
    font-family:Georgia,serif;
    font-size:clamp(34px,min(5.6dvh,4vw),52px);
    line-height:1.15;
    font-weight:400;
    letter-spacing:-.045em;
    margin:clamp(12px,2dvh,18px) 0 clamp(12px,2.3dvh,22px)
}
.story-copy>p:last-child {
    max-width:375px;
    color:#8daeb8;
    font-size:13px;
    line-height:1.8;
    margin:0 auto
}
.story-art {
    position:relative;
    width:100%;
    height:clamp(160px,28dvh,250px);
    flex-shrink:0
}
.orbit {
    position:absolute;
    border:1px solid #b3dac223;
    border-radius:50%;
    width:90%;
    height:80%;
    left:2%;
    top:8%;
    transform:rotate(-23deg)
}
.orbit-two {
    transform:rotate(24deg);
    left:9%;
    top:12%;
    width:80%
}
.art-tile {
    position:absolute;
    background:#1d414e;
    border:1px solid #87b4ab29;
    border-radius:16px;
    box-shadow:0 15px 28px #04182422
}
.tile-pin {
    left:2%;
    top:2%;
    padding:clamp(10px,1.8dvh,17px) clamp(12px,1.8vw,20px);
    display:flex;
    align-items:center;
    gap:12px;
    transform:rotate(-7deg);
    color:var(--mint);
    font-size:11px
}
.tile-pin .icon {
    width:29px;
    height:29px
}
.tile-time {
    left:22%;
    top:26%;
    padding:clamp(13px,2.3dvh,23px) clamp(17px,2.4vw,31px);
    transform:rotate(4deg);
    background:var(--mint);
    color:var(--navy-deep);
    width:55%
}
.tile-time small {
    font-size:7px;
    letter-spacing:.17em
}
.tile-time strong {
    font-size:clamp(27px,4.1dvh,36px);
    display:block;
    letter-spacing:-.05em;
    line-height:1.4
}
.tile-time span {
    font-size:9px;
    color:#537d70
}
.tile-check {
    right:0;
    top:70%;
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    transform:rotate(-6deg);
    font-size:10px;
    color:#bcd8d2
}
.tile-check .icon {
    background:#396d5b;
    border-radius:50%;
    padding:4px;
    width:24px;
    height:24px;
    color:#c4e7d7
}
.story-footer {
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:#70949e
}
.story-footer span:last-child {
    letter-spacing:.12em
}
.login-form-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:0;
    padding:clamp(20px,4dvh,40px) 30px 50px;
    background:radial-gradient(ellipse at 100% 0,#dfe9df80,transparent 60%),#fcfcf9;
    position:relative
}
.login-form-wrap {
    width:100%;
    max-width:345px;
    margin:0
}
.login-form-wrap>.pill {
    font-size:7px;
    color:var(--green);
    background:#edf4e9;
    border-color:#e3ebde;
    padding:8px 12px
}
.login-form-wrap h2 {
    font-size:33px;
    margin:24px 0 12px;
    letter-spacing:-.055em
}
.login-form-wrap>p {
    font-size:12px;
    line-height:1.7;
    max-width:300px
}
.login-form-wrap .form-stack {
    margin-top:30px;
    gap:22px
}
.login-form-wrap label {
    font-size:11px
}
.login-form-wrap input {
    background:white;
    min-height:48px;
    font-size:12px
}
.password-field {
    position:relative;
    display:block
}
.password-field input {
    padding-right:60px
}
.password-toggle {
    position:absolute;
    right:12px;
    top:14px;
    border:0;
    padding:0;
    color:#799284;
    background:transparent;
    font-size:10px
}
.login-form-wrap .button {
    margin-top:4px;
    min-height:48px;
    justify-content:space-between;
    padding:14px 20px
}
.login-help {
    display:flex;
    gap:12px;
    align-items:flex-start;
    border-top:1px solid var(--line);
    padding-top:25px;
    margin-top:30px;
    color:#7e948b
}
.login-help .icon {
    width:16px;
    height:16px;
    margin-top:4px
}
.login-help p {
    font-size:10px;
    line-height:1.8;
    margin:0
}
.login-help strong {
    font-size:10px;
    font-weight:400;
    color:#375a4b
}
.login-legal {
    font-size:9px!important;
    line-height:1.8;
    color:#a5b1a8!important;
    margin-top:25px;
    max-width:310px!important
}
.login-copyright {
    font-size:9px;
    color:#a3b0a5;
    position:absolute;
    bottom:clamp(16px,2.5dvh,28px)
}
.employee-welcome {
    padding:33px 34px;
    min-height:235px
}
.employee-welcome h2 {
    font-size:35px;
    line-height:1.15;
    margin:18px 0 12px
}
.employee-welcome p {
    color:#a2bec0;
    font-size:11px
}
.employee-welcome .button {
    font-size:11px
}
.welcome-art {
    position:relative;
    width:200px;
    height:170px;
    display:grid;
    place-items:center
}
.welcome-disc {
    height:134px;
    width:134px;
    border-radius:50%;
    border:1px solid #9bcdbd45;
    display:grid;
    place-items:center;
    background:#b9edd508;
    position:relative
}
.welcome-disc:before,.welcome-disc:after {
    content:'';
    position:absolute;
    inset:-22px;
    border:1px solid #a5cdbb21;
    border-radius:50%;
    transform:scaleY(.65) rotate(25deg)
}
.welcome-disc:after {
    transform:scaleY(.75) rotate(-25deg);
    inset:-10px
}
.welcome-disc .icon {
    width:60px;
    height:60px;
    color:var(--mint);
    stroke-width:1.2
}
.tiny-orbit {
    position:absolute;
    top:17px;
    right:21px;
    width:21px;
    height:21px;
    border-radius:50%;
    background:#ebbc7d;
    box-shadow:0 0 0 7px #ebbc7d12
}
.employee-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.employee-stats .card {
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 23px
}
.employee-stats strong {
    font-size:28px;
    line-height:1;
    display:block
}
.employee-stats span:not(.stat-icon) {
    display:block;
    font-size:10px;
    color:#93a19e;
    margin-top:7px
}
.time-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:4px 0 18px;
    gap:20px
}
.time-pair>div:first-child {
    border-right:1px solid var(--line)
}
.time-pair p {
    font-size:10px;
    margin:6px 0 9px
}
.time-pair strong {
    font-size:32px;
    letter-spacing:-.055em;
    font-weight:700
}
.time-pair small {
    font-size:9px;
    color:#91a1a0;
    margin-left:5px
}
.time-dot {
    width:6px;
    height:6px;
    background:#63a680;
    border-radius:50%;
    display:inline-block
}
.muted-dot {
    background:#c4ceca
}
.history-list-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--line)
}
.history-list-item:last-child {
    border:0
}
.history-date {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:42px;
    height:48px;
    border:1px solid #e0e9e2;
    border-radius:11px;
    background:#f6f9f4;
    flex-shrink:0
}
.history-date strong {
    font-size:18px;
    line-height:1.2;
    font-weight:400
}
.history-date small {
    font-size:8px;
    color:#83988a
}
.attendance-clock-card {
    border-radius:20px;
    background:linear-gradient(115deg,#e8f4e9,#f0f6ee);
    border:1px solid #d9e9dc;
    padding:24px 29px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px
}
.attendance-clock-card p {
    font-size:11px;
    color:#829589;
    margin:0 0 5px
}
.attendance-clock-card strong {
    font-size:38px;
    letter-spacing:-.04em;
    display:block;
    line-height:1.25;
    font-variant-numeric:tabular-nums
}
.attendance-clock-card small {
    display:block;
    font-size:9px;
    color:#82a18b;
    margin-top:7px
}
.attendance-layout {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(275px,1fr);
    gap:22px
}
.camera-card {
    height:fit-content
}
.camera-frame {
    border-radius:16px;
    aspect-ratio:1;
    max-height:540px;
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 70%,#c9ddcb80,transparent 80%),#f2f6f0;
    position:relative;
    border:1px solid var(--line)
}
.camera-frame video,.camera-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.camera-frame video {
    transform:scaleX(-1)
}
.camera-placeholder {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:25px;
    text-align:center
}
.camera-placeholder>.icon {
    width:45px;
    height:45px;
    color:#84a191;
    stroke-width:1.2;
    margin-bottom:22px
}
.camera-placeholder>strong {
    font-size:17px;
    margin-bottom:8px
}
.camera-placeholder p {
    font-size:10px
}
.camera-label {
    position:absolute;
    left:14px;
    bottom:13px;
    padding:7px 10px;
    background:#102f40ca;
    color:white;
    font-size:8px;
    letter-spacing:.1em;
    border-radius:7px
}
.camera-actions {
    display:flex;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap
}
.camera-actions .button {
    flex:1;
    font-size:11px
}
.camera-card>#attendance-message {
    margin:18px 0 0
}
.location-card>strong {
    display:block;
    font-size:15px
}
.location-card>p {
    font-size:10px
}
.location-card .detail-list>div {
    padding:13px 0;
    font-size:10px
}
.location-card .detail-list dt {
    max-width:105px
}
.geofence-status {
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #e2e9e1;
    border-radius:10px;
    padding:12px;
    margin:18px 0 12px;
    color:#7e9285;
    font-size:11px;
    background:#f5f7f2
}
.geofence-status .icon {
    width:16px;
    height:16px
}
.geofence-status.valid {
    background:var(--green-soft);
    color:var(--green);
    border-color:#c7e8d4
}
.geofence-status.invalid {
    background:var(--red-soft);
    color:var(--red);
    border-color:#efcfcc
}
.location-note {
    display:block;
    font-size:9px;
    color:#91a095;
    margin-top:12px
}
.attendance-submit-card h2 {
    font-size:25px
}
.attendance-submit-card>small {
    font-size:9px;
    display:block;
    text-align:center;
    color:#9aa69e;
    margin-top:13px
}
.privacy-footnote {
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#96a49e;
    font-size:9px!important;
    line-height:1.7
}
.privacy-footnote .icon {
    width:13px;
    height:13px;
    margin-top:2px
}
.privacy-card {
    max-width:850px
}
.policy-section {
    padding-top:18px;
    border-top:1px solid var(--line);
    margin-top:20px
}
.policy-section h3 {
    font-size:14px
}
.policy-section p {
    line-height:1.8;
    font-size:12px
}
.consent-label {
    align-items:flex-start;
    line-height:1.8
}
.consent-label input {
    margin-top:4px
}
.history-entry {
    padding:23px 0;
    border-top:1px solid var(--line)
}
.history-entry:first-of-type {
    border:0
}
.history-entry .section-heading {
    margin-bottom:17px
}
.history-entry .section-heading h3 {
    font-size:13px
}
.history-entry .section-heading p {
    font-size:10px
}
.history-times {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.history-times>div {
    display:flex;
    flex-direction:column;
    gap:7px;
    padding-left:13px;
    border-left:2px solid #d8eadd
}
.history-times span {
    font-size:10px;
    color:#91a19a
}
.history-times strong {
    font-size:16px
}
.history-times small {
    font-size:9px;
    color:#8c9e91
}
.history-times .text-link {
    font-size:10px
}
.history-entry>.badge {
    margin-top:18px
}
.leave-entry {
    border-bottom:1px solid var(--line);
    padding:22px 0
}
.leave-entry:first-child {
    padding-top:0
}
.leave-entry:last-child {
    border:0
}
.leave-entry>p {
    font-size:12px;
    color:#5a7368
}
.profile-heading {
    text-align:center;
    padding:12px 0 22px;
    border-bottom:1px solid var(--line)
}
.avatar-large {
    height:74px;
    width:74px;
    border-radius:25px;
    background:var(--green-soft);
    color:var(--green);
    font-size:28px;
    margin:0 auto 18px
}
.profile-heading h2 {
    font-size:21px;
    margin:0 0 8px
}
.profile-heading p {
    font-size:10px;
    margin:0
}
.privacy-withdraw {
    margin-top:24px
}
.role-employee .main-content {
    max-width:1250px
}
.loading:after {
    content:'';
    display:inline-block;
    width:13px;
    height:13px;
    border:2px solid currentColor;
    border-top-color:transparent;
    border-radius:50%;
    animation:spin .7s linear infinite
}
.sidebar-overlay {
    position:fixed;
    inset:0;
    z-index:39;
    border:0;
    background:#0b24337a;
    backdrop-filter:blur(2px)
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
@keyframes enter {
    from {
        opacity:0;
        transform:translateY(10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(min-width:741px) and (max-height:760px) {
    .login-form-wrap h2 {
        font-size:28px;
        margin:18px 0 9px
    }
    .login-form-wrap .form-stack {
        margin-top:22px;
        gap:16px
    }
    .login-form-wrap input {
        min-height:44px
    }
    .login-help {
        padding-top:18px;
        margin-top:20px
    }
    .login-legal {
        margin-top:18px;
        margin-bottom:0
    }
}
@media(min-width:741px) and (max-height:600px) {
    .login-form-wrap>.pill {
        display:none
    }
    .login-form-wrap h2 {
        margin-top:0
    }
    .login-help {
        padding-top:14px;
        margin-top:18px
    }
    .login-legal {
        margin-top:14px
    }
}
@media(max-width:1200px) {
    .sidebar {
        width:220px;
        padding-left:18px;
        padding-right:18px
    }
    .workspace {
        margin-left:220px
    }
    .main-content {
        padding:30px 25px
    }
    .topbar {
        padding:0 25px
    }
    .stats-grid {
        gap:12px
    }
    .stat-card {
        padding:23px 16px
    }
    .stat-card .stat-icon {
        right:12px;
        width:28px;
        height:28px
    }
    .stat-card>p {
        max-width:90px;
        font-size:9px
    }
    .stat-card>span:last-child {
        font-size:8px
    }
    .stat-card>strong {
        font-size:28px
    }
    .page-heading h1 {
        font-size:27px
    }
    .hero-banner {
        padding:25px
    }
    .hero-orbit {
        margin:0
    }
    .attendance-layout {
        grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr)
    }
}
@media(min-width:1001px) and (max-height:820px) {
    .sidebar {
        padding:22px 20px 16px
    }
    .brand {
        padding:9px;
        border-radius:13px
    }
    .brand-symbol {
        width:33px;
        height:38px
    }
    .brand-wordmark {
        width:104px
    }
    .tenant-switch {
        margin:20px -2px 16px;
        padding:12px 10px
    }
    .nav-label {
        margin-bottom:8px
    }
    .side-nav {
        gap:3px
    }
    .nav-item {
        padding:10px 12px
    }
    .sidebar-footer {
        padding-top:14px
    }
    .system-status {
        padding-bottom:14px;
        margin-bottom:14px
    }
    .logout {
        padding-top:12px
    }
}
@media(min-width:1001px) and (max-height:660px) {
    .sidebar {
        padding:16px 18px 12px
    }
    .brand {
        padding:7px 9px
    }
    .brand-symbol {
        width:30px;
        height:35px
    }
    .brand-wordmark {
        width:96px
    }
    .brand small,.tenant-switch div>span,.system-status {
        display:none
    }
    .tenant-switch {
        margin:12px -2px 11px;
        padding:9px 8px
    }
    .tenant-icon {
        width:28px;
        height:28px
    }
    .nav-label {
        margin-bottom:6px;
        font-size:7px
    }
    .side-nav {
        gap:1px
    }
    .nav-item {
        gap:10px;
        padding:7px 10px;
        font-size:10px
    }
    .nav-item .icon {
        width:16px;
        height:16px
    }
    .sidebar-footer {
        padding-top:10px
    }
    .logout {
        padding-top:9px
    }
}
@media(max-width:1000px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .22s
    }
    .sidebar.is-open {
        transform:translateX(0)
    }
    .workspace {
        margin-left:0
    }
    .mobile-menu {
        display:grid
    }
    .main-content {
        padding:28px
    }
    .topbar {
        padding:0 28px
    }
    .workspace-footer {
        padding-left:28px;
        padding-right:28px
    }
}
@media(max-width:740px) {
    .main-content {
        padding:25px 18px 30px
    }
    .topbar {
        height:64px;
        padding:0 18px
    }
    .topbar-left {
        gap:10px
    }
    .date-chip {
        font-size:9px
    }
    .topbar-right {
        gap:12px
    }
    .breadcrumb {
        font-size:9px
    }
    .breadcrumb span {
        padding:0 5px
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:23px;
        gap:16px
    }
    .page-heading h1 {
        font-size:26px
    }
    .page-description {
        font-size:11px
    }
    .heading-actions {
        width:100%
    }
    .heading-actions .button {
        font-size:11px
    }
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }
    .stat-card {
        padding:23px 17px
    }
    .stat-card>p {
        max-width:none;
        font-size:10px
    }
    .stat-card>strong {
        font-size:29px
    }
    .stat-card>span:last-child {
        font-size:9px
    }
    .dashboard-columns,.two-column,.office-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .dashboard-columns>.card {
        min-height:0
    }
    .card {
        padding:21px;
        border-radius:17px;
        margin-bottom:18px
    }
    .section-heading {
        margin-bottom:20px
    }
    .section-heading h2 {
        font-size:16px
    }
    .section-heading .text-link {
        font-size:10px
    }
    .hero-banner {
        padding:25px 22px
    }
    .hero-banner h2 {
        font-size:25px
    }
    .hero-orbit {
        width:105px;
        height:120px;
        margin-left:10px
    }
    .hero-orbit:before {
        inset:12px -5px
    }
    .hero-orbit span {
        display:none
    }
    .hero-orbit .icon {
        width:34px;
        height:34px
    }
    .hero-banner>.hero-orbit {
        flex-shrink:0
    }
    .hero-banner .pill {
        font-size:7px
    }
    .form-grid {
        gap:17px
    }
    .form-stack {
        gap:18px
    }
    .form-actions .button {
        font-size:11px
    }
    .filter-bar {
        flex-wrap:wrap;
        gap:11px
    }
    .filter-bar label,.filter-bar .search-label {
        flex:1 1 130px;
        min-width:0
    }
    .pagination {
        font-size:9px
    }
    .pagination .button {
        font-size:9px;
        padding:7px 9px
    }
    .workspace-footer {
        padding:0 18px 20px;
        font-size:7px
    }
    .office-card .geofence-art {
        margin:-21px -21px 20px
    }
    .login-layout {
        grid-template-columns:1fr;
        height:auto;
        min-height:100dvh
    }
    .login-story {
        padding:27px 27px 30px;
        min-height:0;
        display:flex;
        flex-direction:column;
        gap:0
    }
    .login-story .brand {
        padding:10px;
        border-radius:13px
    }
    .login-story .brand-symbol {
        width:32px;
        height:36px;
    }
    .login-story .brand-wordmark {
        width:102px
    }
    .story-content {
        max-width:none;
        align-items:flex-start;
        gap:0;
        margin-top:32px
    }
    .story-copy {
        text-align:left
    }
    .story-copy .eyebrow {
        font-size:7px
    }
    .story-copy h1 {
        font-size:35px;
        margin:12px 0 0
    }
    .story-copy>p:last-child,.story-art,.story-footer {
        display:none
    }
    .login-form-panel {
        padding:35px 27px 22px
    }
    .login-form-wrap {
        max-width:400px;
        margin:auto 0
    }
    .login-copyright {
        position:static;
        padding-top:30px
    }
    .login-form-wrap>.pill {
        display:none
    }
    .login-form-wrap h2 {
        font-size:28px;
        margin-top:0
    }
    .login-form-wrap .form-stack {
        margin-top:26px
    }
    .login-form-wrap>p {
        max-width:350px
    }
    .toast-stack {
        right:12px;
        left:12px;
        top:12px;
        max-width:none
    }
    .toast {
        font-size:11px;
        padding:13px
    }
    .error-card {
        margin:25px 18px;
        padding:30px
    }
    .error-card .form-actions {
        flex-wrap:wrap
    }
    .employee-welcome {
        padding:27px 22px;
        min-height:238px
    }
    .employee-welcome h2 {
        font-size:31px
    }
    .employee-welcome>.welcome-art {
        width:100px;
        height:145px;
        margin-left:-18px
    }
    .welcome-disc {
        width:80px;
        height:80px
    }
    .welcome-disc .icon {
        width:38px;
        height:38px
    }
    .welcome-disc:before {
        inset:-15px
    }
    .tiny-orbit {
        width:14px;
        height:14px;
        right:9px;
        top:15px
    }
    .employee-welcome .pill {
        font-size:7px
    }
    .employee-welcome .button {
        font-size:10px;
        padding:11px 13px
    }
    .employee-welcome p {
        font-size:9px
    }
    .employee-stats {
        gap:12px
    }
    .employee-stats .card {
        padding:18px 14px;
        gap:10px
    }
    .employee-stats strong {
        font-size:25px
    }
    .employee-stats span:not(.stat-icon) {
        font-size:8px
    }
    .employee-stats .stat-icon {
        width:29px;
        height:29px
    }
    .time-pair {
        padding-bottom:10px
    }
    .time-pair strong {
        font-size:32px
    }
    .role-employee .workspace {
        padding-bottom:77px
    }
    .role-employee .main-content {
        max-width:650px
    }
    .role-employee .page-heading h1 {
        font-size:26px
    }
    .role-employee .mobile-menu {
        display:none
    }
    .role-employee .breadcrumb {
        display:none
    }
    .role-employee .mobile-brand {
        display:flex
    }
    .bottom-nav {
        position:fixed;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        bottom:0;
        left:0;
        right:0;
        height:calc(69px + env(safe-area-inset-bottom));
        padding:8px 9px env(safe-area-inset-bottom);
        background:#fffffff5;
        backdrop-filter:blur(14px);
        border-top:1px solid #e4eae2;
        box-shadow:0 -7px 25px #102f4007;
        z-index:35
    }
    .bottom-nav a {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        flex-direction:column;
        color:#97a69e;
        font-size:8px;
        letter-spacing:.01em
    }
    .bottom-nav .icon {
        width:21px;
        height:21px
    }
    .bottom-nav a.active {
        color:var(--green);
        font-weight:700
    }
    .bottom-nav a.active .icon {
        background:#e7f4e9;
        box-shadow:0 0 0 6px #e7f4e9;
        border-radius:5px
    }
    .role-employee .workspace-footer {
        justify-content:center
    }
    .role-employee .workspace-footer>span:last-child {
        display:none
    }
    .attendance-layout {
        grid-template-columns:1fr;
        gap:0
    }
    .attendance-clock-card {
        padding:22px;
        margin-bottom:18px
    }
    .attendance-clock-card strong {
        font-size:35px
    }
    .attendance-clock-card .badge {
        font-size:9px
    }
    .camera-actions .button {
        font-size:10px;
        padding:11px
    }
    .attendance-side {
        display:flex;
        flex-direction:column
    }
    .location-card .detail-list>div {
        font-size:11px
    }
    .attendance-submit-card {
        order:2
    }
    .privacy-footnote {
        font-size:8px!important
    }
    .history-entry .section-heading h3 {
        font-size:12px
    }
    .history-times strong {
        font-size:15px
    }
    .privacy-card>.feature-icon {
        margin-bottom:17px
    }
    .privacy-card>h2 {
        font-size:20px
    }
    .policy-section p {
        font-size:11px
    }
    .detail-list>div {
        font-size:11px
    }
    .detail-list dt {
        flex-shrink:1
    }
    .detail-list dd {
        max-width:65%
    }
    .role-employee .heading-actions .button {
        font-size:11px
    }
}
@media(max-width:370px) {
    .main-content {
        padding-left:13px;
        padding-right:13px
    }
    .page-heading h1 {
        font-size:23px
    }
    .employee-welcome>.welcome-art {
        display:none
    }
    .employee-stats .card {
        padding:15px 11px
    }
    .employee-stats .stat-icon {
        display:none
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .span-two {
        grid-column:auto
    }
    .stat-card {
        padding:21px 13px
    }
    .stat-card .stat-icon {
        width:24px;
        height:24px;
        right:9px;
        top:14px
    }
    .stat-card>p {
        font-size:9px
    }
    .stat-card>span:last-child {
        font-size:8px
    }
    .card {
        padding:18px
    }
    .hero-orbit {
        display:none
    }
    .pagination {
        flex-wrap:wrap
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}