html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(15, 118, 110, .3);
    outline-offset: 3px;
}

.public-nav {
    position: sticky;
    top: 0;
    border-bottom-color: rgba(226, 235, 235, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-link {
    color: #526970;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}

.nav-link:hover {
    color: var(--teal);
}

.hero-section {
    isolation: isolate;
    padding-top: clamp(48px, 7vw, 82px);
}

.hero-copy h1 span {
    white-space: normal;
}

.registration-card {
    border-color: #e7efed;
    box-shadow: 0 28px 72px rgba(24, 59, 68, .1);
    transition: box-shadow .2s ease, transform .2s ease;
}

.registration-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 34px 82px rgba(24, 59, 68, .13);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.card-heading h2 {
    margin: 7px 0 5px;
    color: #18323b;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.25;
}

.card-heading p {
    margin: 0;
    color: #849097;
    font-size: 12px;
}

.card-heading-icon {
    flex: 0 0 auto;
}

.form-field input,
.form-field select,
.form-field textarea {
    font: inherit;
}

.form-field input,
.form-field select {
    min-height: 44px;
}

.form-field textarea {
    line-height: 1.55;
}

.form-field label {
    line-height: 1.5;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .1);
}

.btn {
    min-height: 42px;
}

.btn-primary {
    box-shadow: 0 9px 20px rgba(15, 118, 110, .19);
}

.feature-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(205, 237, 227, .65), transparent 28rem),
        #f1f6f6;
}

.feature-card {
    box-shadow: 0 8px 24px rgba(21, 48, 61, .035);
}

.feature-card:hover {
    border-color: #dcebe7;
    box-shadow: 0 18px 38px rgba(21, 48, 61, .09);
}

.closing-strip {
    box-shadow: 0 12px 34px rgba(21, 91, 78, .06);
}

.public-footer {
    flex-wrap: wrap;
}

.login-brand-panel {
    background:
        radial-gradient(circle at 100% 12%, rgba(145, 223, 208, .13), transparent 21rem),
        #123d3d;
}

.login-form-box .section-kicker {
    display: inline-block;
    margin-top: 26px;
}

.admin-workspace .topbar h1,
.therapist-workspace .topbar h1 {
    color: #18323b;
}

@media (max-width: 1000px) {
    .hero-section {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
        gap: 34px;
    }
}

@media (max-width: 900px) {
    .hero-section {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: 36px;
        padding-bottom: 60px;
    }

    .hero-copy {
        max-width: 680px;
    }

    .registration-card {
        width: 100%;
        box-sizing: border-box;
    }

    .login-wrap {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: auto;
        padding: 28px clamp(24px, 6vw, 60px);
    }

    .login-message {
        margin: 28px 0 14px;
        padding: 10px 0;
    }

    .login-message h1 {
        max-width: 620px;
    }

    .login-decoration {
        display: none;
    }

    .login-panel-foot {
        margin-top: 10px;
    }
}

@media (max-width: 620px) {
    .public-nav {
        height: 70px;
        padding: 0 18px;
    }

    .public-nav .brand-mark {
        width: 38px;
        height: 38px;
    }

    .nav-actions {
        gap: 12px;
    }

    .nav-actions .nav-link {
        font-size: 12px;
    }

    .nav-actions .btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .hero-section {
        padding: 38px 19px 50px;
    }

    .hero-copy h1 {
        font-size: clamp(35px, 10vw, 46px);
        letter-spacing: -1.8px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .registration-card {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .registration-card::before {
        inset: 7px -5px -7px 5px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .feature-section {
        padding: 56px 19px;
    }

    .feature-intro h2 {
        font-size: 27px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .feature-card {
        padding: 22px;
    }

    .closing-strip {
        margin: 36px 19px;
        padding: 20px;
        align-items: stretch;
        flex-direction: column;
    }

    .closing-strip > div {
        align-items: flex-start;
    }

    .closing-strip .btn {
        width: 100%;
        box-sizing: border-box;
    }

    .public-footer {
        padding: 22px 19px;
        align-items: flex-start;
        flex-direction: column;
    }

    .login-form-panel {
        padding: 30px 21px 42px;
    }

    .login-brand-panel {
        padding: 24px 21px;
    }

    .login-message h1 {
        font-size: clamp(34px, 9vw, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

:root {
    --shadow-soft: 0 12px 34px rgba(25, 62, 72, .055);
    --shadow-card: 0 18px 46px rgba(25, 62, 72, .075);
}

body {
    background-image:
        radial-gradient(ellipse at 4% 0%, rgba(218, 240, 235, .3), transparent 28rem),
        linear-gradient(180deg, rgba(255, 255, 255, .42), transparent 34rem);
}

.brand-mark {
    background: linear-gradient(145deg, #28a99a 0%, #0f766e 75%);
    box-shadow: 0 9px 22px rgba(15, 118, 110, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.brand:hover .brand-mark {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 12px 25px rgba(15, 118, 110, .27);
}

.btn {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.btn-primary {
    background-image: linear-gradient(120deg, #11877c, #0f766e);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 12px 23px rgba(15, 118, 110, .22);
}

.btn-outline:hover:not(:disabled) {
    box-shadow: 0 7px 18px rgba(26, 70, 75, .07);
}

.hero-section {
    padding-bottom: clamp(65px, 8vw, 100px);
}

.hero-copy h1 {
    max-width: 630px;
    font-size: clamp(42px, 5.1vw, 66px);
    letter-spacing: -3px;
    line-height: 1.08;
}

.hero-copy h1 span {
    color: #13877b;
    background: linear-gradient(100deg, #0f766e 0%, #42a48c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 490px;
}

.registration-card {
    border-radius: 26px;
    box-shadow: 0 30px 76px rgba(24, 59, 68, .105);
}

.feature-section {
    border-top: 1px solid rgba(219, 234, 229, .8);
    border-bottom: 1px solid rgba(219, 234, 229, .8);
}

.feature-card {
    border-radius: 21px;
}

.feature-icon {
    box-shadow: inset 0 0 0 1px rgba(24, 73, 67, .035);
}

.login-wrap {
    background:
        radial-gradient(ellipse at 88% 8%, rgba(222, 243, 237, .52), transparent 28rem),
        #f8fbfa;
}

.login-form-box {
    border: 1px solid rgba(229, 238, 235, .85);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 24px 70px rgba(25, 62, 72, .09);
    backdrop-filter: blur(12px);
}

.admin-workspace,
.therapist-workspace {
    background-attachment: fixed;
}

.sidebar {
    box-shadow: 8px 0 28px rgba(27, 62, 73, .025);
}

.sidebar-brand {
    margin-bottom: 6px;
}

.side-link {
    min-height: 44px;
    border-radius: 12px;
}

.topbar {
    min-height: 82px;
    box-shadow: 0 4px 18px rgba(25, 62, 72, .025);
}

.topbar-profile {
    padding: 7px 11px 7px 7px;
    border: 1px solid rgba(226, 235, 235, .8);
    border-radius: 16px;
    background: rgba(255, 255, 255, .76);
}

.page-content {
    animation: page-enter .38s ease both;
}

.admin-workspace .page-content,
.therapist-workspace .page-content {
    width: 100%;
    min-width: 0;
}

.page-intro-row {
    margin-bottom: 20px;
}

.page-lead {
    max-width: 760px;
    color: #6f828c;
    line-height: 1.75;
}

.intro-chip {
    border: 1px solid rgba(218, 232, 229, .95);
    background: linear-gradient(135deg, #fff, #f4faf8);
    box-shadow: 0 5px 16px rgba(25, 62, 72, .04);
}

.panel {
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.panel:hover {
    box-shadow: var(--shadow-card);
}

.panel-header {
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(231, 238, 238, .82);
}

.panel-header h3 {
    letter-spacing: -.45px;
}

.panel-icon {
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .05);
}

.filter-bar {
    padding: 12px;
    border: 1px solid rgba(231, 238, 238, .86);
    border-radius: 15px;
    background: linear-gradient(135deg, #fbfdfd, #f7faf9);
}

.leave-request-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.leave-request-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.leave-request-field-wide {
    grid-column: 1 / -1;
}

.leave-request-field label,
.leave-review-form label {
    color: #536b70;
    font-size: 14px;
    font-weight: 700;
}

.leave-request-field input,
.leave-request-field select,
.leave-request-field textarea,
.leave-review-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #dfe9e6;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.leave-request-field input:focus,
.leave-request-field select:focus,
.leave-request-field textarea:focus,
.leave-review-form textarea:focus {
    border-color: #57a996;
    box-shadow: 0 0 0 4px rgba(17, 135, 124, .11);
    outline: none;
}

.leave-request-field textarea,
.leave-review-form textarea {
    resize: vertical;
}

.leave-review-form {
    display: grid;
    gap: 10px;
}

.workspace-section-leave-requests .page-content {
    --leave-ink: #173b3d;
    --leave-muted: #668080;
    --leave-border: #e4eeea;
    --leave-surface: #f7fbf9;
    color: #294849;
}

.workspace-section-leave-requests .page-intro-row {
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.workspace-section-leave-requests .leave-page-intro {
    display: flex;
    align-items: center;
    gap: 16px;
}

.workspace-section-leave-requests .leave-page-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d8eee6;
    border-radius: 18px;
    background: linear-gradient(145deg, #effaf5, #e1f4ec);
    color: #198575;
    font-size: 27px;
    box-shadow: 0 8px 18px rgba(41, 118, 100, .08);
}

.workspace-section-leave-requests .leave-page-intro .section-kicker {
    display: block;
    margin-bottom: 4px;
    color: #238777;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.workspace-section-leave-requests .page-lead {
    margin-bottom: 0;
    color: #50696b;
    font-size: 16px;
    line-height: 1.55;
}

.workspace-section-leave-requests .intro-chip {
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid #e1eee8;
    border-radius: 999px;
    background: #f4faf6;
    color: #317e70;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.workspace-section-leave-requests .leave-pending-chip {
    border-color: #f2e3bf;
    background: #fff9eb;
    color: #9a6a18;
}

.workspace-section-leave-requests .leave-section {
    margin-bottom: 22px;
    padding: 25px;
    border: 1px solid var(--leave-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(229, 246, 239, .44), transparent 34%),
        #fff;
    box-shadow: 0 12px 34px rgba(37, 76, 67, .055);
}

.workspace-section-leave-requests .panel-header {
    margin-bottom: 21px;
}

.workspace-section-leave-requests .panel-header h3 {
    margin: 4px 0 5px;
    color: var(--leave-ink);
    font-size: 22px;
    letter-spacing: -.035em;
}

.workspace-section-leave-requests .panel-header p {
    margin: 0;
    color: var(--leave-muted);
    font-size: 14px;
    line-height: 1.55;
}

.workspace-section-leave-requests .section-kicker {
    color: #218778;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.workspace-section-leave-requests .leave-panel-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #ecf8f2;
    color: #258875;
    font-size: 21px;
}

.workspace-section-leave-requests .leave-submit-button {
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 15px;
}

.workspace-section-leave-requests .leave-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.workspace-section-leave-requests .leave-summary-grid .mini-stat {
    gap: 13px;
    min-height: 86px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: 0 7px 20px rgba(37, 76, 67, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.workspace-section-leave-requests .leave-summary-grid .mini-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(37, 76, 67, .1);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-total {
    border-color: #cfece3;
    background: linear-gradient(140deg, #effaf6, #e1f4ed);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-pending {
    border-color: #f5dfc8;
    background: linear-gradient(140deg, #fff8f0, #ffede1);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-approved {
    border-color: #e2d9fb;
    background: linear-gradient(140deg, #f8f5ff, #eee9ff);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-rejected {
    border-color: #f5d6cd;
    background: linear-gradient(140deg, #fff7f3, #ffebe5);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-cancelled {
    border-color: #d7e3ec;
    background: linear-gradient(140deg, #f5f9fc, #e9f1f7);
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-total .mini-stat-icon {
    background: #d8f1e9;
    color: #138b79;
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-pending .mini-stat-icon {
    background: #ffe4d5;
    color: #d77943;
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-approved .mini-stat-icon {
    background: #e5dcff;
    color: #7858d6;
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-rejected .mini-stat-icon {
    background: #ffddd2;
    color: #d96648;
}

.workspace-section-leave-requests .leave-summary-grid .leave-stat-cancelled .mini-stat-icon {
    background: #dceaf3;
    color: #527d98;
}

.workspace-section-leave-requests .leave-summary-grid .mini-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 18px;
}

.workspace-section-leave-requests .leave-summary-grid .mini-stat small {
    color: var(--leave-muted);
    font-size: 13px;
}

.workspace-section-leave-requests .leave-summary-grid .mini-stat strong {
    margin-top: 2px;
    color: var(--leave-ink);
    font-size: 24px;
}

.workspace-section-leave-requests .leave-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
}

.workspace-section-leave-requests .leave-filter-bar .filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526a6d;
    font-size: 14px;
    font-weight: 700;
}

.workspace-section-leave-requests .leave-filter-bar select {
    min-width: 190px;
    min-height: 46px;
    padding: 9px 13px;
    border: 1px solid #dfe9e6;
    border-radius: 11px;
    background: #fff;
    color: #294849;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-filter-bar .btn {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-export-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #dfeee7;
    border-radius: 15px;
    background: linear-gradient(110deg, #f3faf6, #fbfdfc);
}

.workspace-section-leave-requests .leave-export-actions > div:first-child {
    display: grid;
    gap: 3px;
}

.workspace-section-leave-requests .leave-export-actions strong {
    color: #23484a;
    font-size: 15px;
}

.workspace-section-leave-requests .leave-export-actions span {
    color: #668080;
    font-size: 13px;
}

.workspace-section-leave-requests .leave-export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.workspace-section-leave-requests .leave-export-buttons .btn {
    min-height: 44px;
    padding: 10px 15px;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-request-list {
    display: grid;
    gap: 16px;
}

.workspace-section-leave-requests .leave-history-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--leave-border);
    border-radius: 17px;
    background: linear-gradient(145deg, #fff, #fcfefd);
    box-shadow: 0 5px 16px rgba(37, 76, 67, .035);
}

.workspace-section-leave-requests .leave-history-heading,
.workspace-section-leave-requests .leave-history-type {
    display: flex;
    align-items: center;
}

.workspace-section-leave-requests .leave-history-heading {
    justify-content: space-between;
    gap: 14px;
}

.workspace-section-leave-requests .leave-history-type {
    min-width: 0;
    gap: 13px;
}

.workspace-section-leave-requests .leave-history-type > div {
    display: grid;
    gap: 3px;
}

.workspace-section-leave-requests .leave-history-type strong {
    color: var(--leave-ink);
    font-size: 17px;
}

.workspace-section-leave-requests .leave-history-type small {
    color: var(--leave-muted);
    font-size: 13px;
}

.workspace-section-leave-requests .leave-type-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 15px;
    font-size: 20px;
}

.workspace-section-leave-requests .leave-type-vacation {
    background: #fff5df;
    color: #c68a24;
}

.workspace-section-leave-requests .leave-type-permission {
    background: #eaf5ff;
    color: #3982b7;
}

.workspace-section-leave-requests .status-badge {
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
}

.workspace-section-leave-requests .leave-history-details {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    padding: 16px;
    border: 1px solid #edf2ef;
    border-radius: 14px;
    background: var(--leave-surface);
}

.workspace-section-leave-requests .leave-history-details > div,
.workspace-section-leave-requests .leave-summary-item {
    display: grid;
    align-content: start;
    gap: 7px;
}

.workspace-section-leave-requests .leave-history-details span,
.workspace-section-leave-requests .leave-summary-item span,
.workspace-section-leave-requests .leave-reason-block > span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--leave-muted);
    font-size: 13px;
    font-weight: 700;
}

.workspace-section-leave-requests .leave-history-details strong,
.workspace-section-leave-requests .leave-summary-item strong {
    color: #294849;
    font-size: 15px;
    line-height: 1.55;
}

.workspace-section-leave-requests .leave-history-details p,
.workspace-section-leave-requests .leave-reason-block p,
.workspace-section-leave-requests .leave-admin-note p {
    margin: 0;
    color: #385456;
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.workspace-section-leave-requests .leave-admin-summary {
    display: grid;
    grid-template-columns: .75fr 1.4fr 1fr;
    gap: 12px;
}

.workspace-section-leave-requests .leave-summary-item {
    padding: 13px 15px;
    border: 1px solid #edf2ef;
    border-radius: 13px;
    background: var(--leave-surface);
}

.workspace-section-leave-requests .leave-reason-block {
    display: grid;
    gap: 8px;
}

.workspace-section-leave-requests .leave-admin-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid #d9eee5;
    border-radius: 13px;
    background: #f1faf5;
    color: #278574;
}

.workspace-section-leave-requests .leave-admin-note > i {
    margin-top: 2px;
    font-size: 18px;
}

.workspace-section-leave-requests .leave-admin-note strong {
    display: block;
    margin-bottom: 4px;
    color: #267c6d;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-admin-note p {
    color: #385e57;
}

.workspace-section-leave-requests .leave-cancel-form {
    display: flex;
    justify-content: flex-end;
}

.workspace-section-leave-requests .leave-cancel-form .btn {
    min-height: 42px;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-review-form {
    padding-top: 17px;
    border-top: 1px solid var(--leave-border);
}

.workspace-section-leave-requests .leave-review-form label span {
    color: #849796;
    font-weight: 500;
}

.workspace-section-leave-requests .leave-review-form textarea {
    min-height: 84px;
}

.workspace-section-leave-requests .leave-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.workspace-section-leave-requests .leave-review-actions .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
}

.workspace-section-leave-requests .leave-empty-state {
    min-height: 220px;
    border: 1px dashed #d8e8e1;
    border-radius: 16px;
    background: #fbfdfc;
}

.workspace-section-leave-requests .leave-empty-state strong {
    color: var(--leave-ink);
    font-size: 17px;
}

.workspace-section-leave-requests .leave-empty-state span {
    color: var(--leave-muted);
    font-size: 14px;
}

.admin-workspace.workspace-section-leave-requests .page-lead {
    font-size: 18px;
}

.admin-workspace.workspace-section-leave-requests .section-kicker {
    font-size: 13px;
}

.admin-workspace.workspace-section-leave-requests .panel-header h3 {
    font-size: 25px;
}

.admin-workspace.workspace-section-leave-requests .panel-header p {
    font-size: 16px;
}

.admin-workspace.workspace-section-leave-requests .leave-summary-grid .mini-stat small {
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-summary-grid .mini-stat strong {
    font-size: 27px;
}

.admin-workspace.workspace-section-leave-requests .leave-history-type strong {
    font-size: 19px;
}

.admin-workspace.workspace-section-leave-requests .leave-history-type small {
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-summary-item span,
.admin-workspace.workspace-section-leave-requests .leave-reason-block > span,
.admin-workspace.workspace-section-leave-requests .leave-review-form label {
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-summary-item strong,
.admin-workspace.workspace-section-leave-requests .leave-reason-block p,
.admin-workspace.workspace-section-leave-requests .leave-admin-note p,
.admin-workspace.workspace-section-leave-requests .leave-review-form textarea {
    font-size: 17px;
}

.admin-workspace.workspace-section-leave-requests .status-badge {
    padding: 8px 14px;
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-review-actions .btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-export-actions strong {
    font-size: 17px;
}

.admin-workspace.workspace-section-leave-requests .leave-export-actions span {
    font-size: 14px;
}

.admin-workspace.workspace-section-leave-requests .leave-export-buttons .btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-filter-bar .filter-label,
.admin-workspace.workspace-section-leave-requests .leave-filter-bar select,
.admin-workspace.workspace-section-leave-requests .leave-filter-bar .btn {
    font-size: 15px;
}

.admin-workspace.workspace-section-leave-requests .leave-review-actions .btn:hover,
.admin-workspace.workspace-section-leave-requests .leave-export-buttons .btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .workspace-section-leave-requests .leave-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .workspace-section-leave-requests .leave-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .workspace-section-leave-requests .page-intro-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .workspace-section-leave-requests .leave-section {
        padding: 19px;
        border-radius: 17px;
    }

    .workspace-section-leave-requests .leave-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .workspace-section-leave-requests .leave-summary-grid .mini-stat {
        padding: 12px;
    }

    .workspace-section-leave-requests .leave-admin-summary,
    .workspace-section-leave-requests .leave-history-details {
        grid-template-columns: 1fr;
    }

    .workspace-section-leave-requests .leave-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-section-leave-requests .leave-filter-bar select,
    .workspace-section-leave-requests .leave-filter-bar .btn {
        width: 100%;
    }

    .workspace-section-leave-requests .leave-export-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-section-leave-requests .leave-export-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-section-leave-requests .leave-export-buttons .btn {
        justify-content: center;
    }

    .workspace-section-leave-requests .leave-history-card {
        padding: 17px;
    }
}

@media (max-width: 600px) {
    .leave-request-form {
        grid-template-columns: 1fr;
    }

    .leave-request-field-wide {
        grid-column: auto;
    }

    .workspace-section-leave-requests .leave-page-icon {
        width: 49px;
        height: 49px;
        border-radius: 15px;
        font-size: 23px;
    }

    .workspace-section-leave-requests .leave-page-intro {
        align-items: flex-start;
        gap: 12px;
    }

    .admin-workspace.workspace-section-leave-requests .page-lead {
        font-size: 16px;
    }

    .workspace-section-leave-requests .page-lead {
        font-size: 14px;
    }

    .admin-workspace.workspace-section-leave-requests .panel-header h3 {
        font-size: 21px;
    }

    .workspace-section-leave-requests .panel-header h3 {
        font-size: 19px;
    }

    .workspace-section-leave-requests .leave-history-heading {
        align-items: flex-start;
    }

    .workspace-section-leave-requests .leave-history-type strong {
        font-size: 16px;
    }

    .workspace-section-leave-requests .leave-review-actions {
        flex-direction: column;
    }

    .workspace-section-leave-requests .leave-review-actions .btn {
        width: 100%;
    }
}

.filter-bar .btn {
    min-height: 42px;
}

.data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th {
    color: #748892;
    letter-spacing: .075em;
    background: #f7faf9;
}

.data-table tbody tr {
    transition: background-color .16s ease;
}

.data-table tbody tr:hover {
    background-color: #f8fbfa;
}

.data-table tbody tr:last-child td {
    border-bottom-color: transparent;
}

.mini-avatar {
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .08);
}

.status-badge {
    border-radius: 999px;
    padding: 6px 10px;
}

.alert {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(25, 62, 72, .045);
}

.stat-card {
    backdrop-filter: blur(8px);
}

.attendance-clock-card {
    border: 1px solid rgba(219, 235, 230, .9);
    border-radius: 19px;
    background:
        radial-gradient(circle at 92% 8%, rgba(221, 244, 237, .8), transparent 12rem),
        linear-gradient(135deg, #fbfefd, #f4faf8);
}

.attendance-times > div {
    border-radius: 14px;
}

.table-responsive {
    min-width: 0;
    max-width: 100%;
    border-radius: 14px;
}

.empty-state {
    padding-top: 30px;
    padding-bottom: 30px;
}

@keyframes page-enter {
    from {
        opacity: .72;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .topbar {
        min-height: 74px;
    }

    .page-content {
        padding-top: 24px;
    }
}

@media (max-width: 620px) {
    .hero-copy h1 {
        font-size: clamp(38px, 11vw, 50px);
        letter-spacing: -2.2px;
    }

    .panel {
        border-radius: 18px;
    }

    .filter-bar {
        gap: 9px;
    }

    .filter-bar .btn,
    .filter-bar > a.btn {
        flex: 1 1 auto;
    }

    .topbar-profile {
        padding: 5px;
        border: 0;
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-content {
        animation: none;
    }

    .brand-mark {
        transition: none;
    }
}

.brand-logo {
    display: block;
    flex: 0 0 auto;
    width: 160px;
    height: 68px;
    object-fit: contain;
}

.footer-brand .brand-logo {
    width: 145px;
    height: 62px;
}

@media (max-width: 620px) {
    .brand-logo {
        width: 138px;
        height: 58px;
    }

    .footer-brand .brand-logo {
        width: 125px;
        height: 54px;
    }
}

:root {
    --kamilla-primary: #11877c;
    --kamilla-primary-dark: #0b625e;
    --kamilla-primary-soft: #eaf7f3;
    --kamilla-ink: #19383d;
    --kamilla-muted: #74888a;
    --kamilla-line: #e4eeeb;
    --kamilla-canvas: #f5f9f8;
}

body {
    color: var(--kamilla-ink);
}

.public-body {
    background:
        radial-gradient(ellipse at 90% 3%, rgba(214, 241, 231, .45), transparent 28rem),
        #fbfdfc;
}

.public-nav {
    min-height: 78px;
    padding-inline: clamp(18px, 5vw, 76px);
    background: rgba(255, 255, 255, .9);
}

.public-nav .brand-logo {
    width: 150px;
    height: 64px;
}

.nav-actions .btn {
    border-radius: 12px;
}

.hero-section {
    max-width: 1440px;
    margin-inline: auto;
}

.hero-copy h1 {
    max-width: 680px;
    color: var(--kamilla-ink);
    line-height: 1.12;
}

.eyebrow-pill {
    border-color: #deeee8;
    background: rgba(255, 255, 255, .76);
    color: var(--kamilla-primary-dark);
}

.registration-card,
.login-form-box {
    border: 1px solid rgba(222, 235, 230, .9);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 64px rgba(31, 74, 69, .09);
}

.form-field input,
.form-field select,
.form-field textarea,
.filter-bar input,
.filter-bar select,
.attendance-record-form input,
.attendance-record-form select {
    border-color: #dfe9e6;
    border-radius: 11px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.attendance-record-form input:focus,
.attendance-record-form select:focus {
    border-color: #60ad9b;
    box-shadow: 0 0 0 4px rgba(17, 135, 124, .11);
    outline: none;
}

.btn {
    border-radius: 11px;
    font-weight: 700;
}

.btn-primary,
.admin-workspace .btn-primary,
.therapist-workspace .btn-primary {
    border-color: transparent;
    background: linear-gradient(130deg, #159488, #0d756d);
}

.btn-primary:hover:not(:disabled),
.admin-workspace .btn-primary:hover:not(:disabled),
.therapist-workspace .btn-primary:hover:not(:disabled) {
    background: linear-gradient(130deg, #117c72, #095f5b);
    box-shadow: 0 10px 22px rgba(15, 118, 110, .2);
    transform: translateY(-1px);
}

.admin-workspace .patients-page {
    font-size: 15px;
}

.admin-workspace .patients-page .page-lead {
    font-size: 12px;
}

.admin-workspace .patients-page .intro-chip {
    font-size: 11px;
}

.admin-workspace .patients-page .section-kicker {
    font-size: 10px;
}

.admin-workspace .patients-page .patient-edit-form .form-field label {
    font-size: 12px;
}

.admin-workspace .patients-page .btn {
    font-size: 14px;
}

.admin-workspace .patients-page .patient-row-actions .btn,
.admin-workspace .patients-page .inline-status-form .btn {
    font-size: 13px;
}

.admin-workspace .patients-page .panel-header h3 {
    font-size: 18px;
}

.admin-workspace .patients-page .panel-header p {
    font-size: 12px;
}

.admin-workspace .patients-page .filter-bar input,
.admin-workspace .patients-page .filter-bar select,
.admin-workspace .patients-page .inline-status-form select {
    font-size: 11px;
}

.admin-workspace .patients-page .data-table th {
    font-size: 10px;
}

.admin-workspace .patients-page .data-table td {
    font-size: 11px;
}

.admin-workspace .patients-page .person-cell strong,
.admin-workspace .patients-page .mini-avatar {
    font-size: 11px;
}

.admin-workspace .patients-page .person-cell small,
.admin-workspace .patients-page .patient-subline,
.admin-workspace .patients-page .table-footer {
    font-size: 10px;
}

.admin-workspace .patients-page .phone-link {
    font-size: 11px;
}

.admin-workspace .patients-page .status-badge {
    font-size: 11px;
}

.admin-workspace,
.therapist-workspace {
    --admin-blue: var(--kamilla-primary);
    --admin-teal: var(--kamilla-primary);
    --admin-line: var(--kamilla-line);
    --therapist-teal: var(--kamilla-primary);
    --therapist-deep: var(--kamilla-primary-dark);
    --therapist-mint: var(--kamilla-primary-soft);
    --admin-ink: var(--kamilla-ink);
    --therapist-ink: var(--kamilla-ink);
    background:
        radial-gradient(ellipse at 92% 3%, rgba(211, 239, 228, .35), transparent 30rem),
        var(--kamilla-canvas);
    background-attachment: fixed;
}

.admin-workspace .sidebar,
.therapist-workspace .sidebar {
    border-right-color: var(--kamilla-line);
    background: rgba(255, 255, 255, .94);
    box-shadow: 8px 0 28px rgba(27, 62, 73, .035);
}

.admin-workspace .side-link.active,
.therapist-workspace .side-link.active {
    color: var(--kamilla-primary-dark);
    background: linear-gradient(100deg, #e9f6f1, #f3faf7);
    box-shadow: inset 3px 0 #2d9a85;
}

.admin-workspace .side-link:hover,
.therapist-workspace .side-link:hover {
    color: var(--kamilla-primary-dark);
    background: #f1f8f5;
}

.admin-workspace .topbar,
.therapist-workspace .topbar {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(222, 235, 230, .9);
}

.admin-workspace .panel,
.therapist-workspace .panel {
    border-color: var(--kamilla-line);
    box-shadow: 0 10px 30px rgba(31, 74, 69, .055);
}

.admin-workspace .panel:hover,
.therapist-workspace .panel:hover {
    border-color: #d6e8e1;
    box-shadow: 0 16px 38px rgba(31, 74, 69, .08);
}

.admin-workspace .panel-icon,
.therapist-workspace .panel-icon {
    background: var(--kamilla-primary-soft);
    color: var(--kamilla-primary);
}

.admin-workspace .welcome-banner {
    background:
        radial-gradient(circle at 83% 12%, rgba(220, 249, 234, .23), transparent 14rem),
        linear-gradient(112deg, #124b50 0%, #137d75 57%, #49a98a 100%);
    box-shadow: 0 20px 44px rgba(19, 105, 91, .17);
}

.admin-workspace .welcome-kicker {
    color: #d0f3e7;
}

.admin-workspace .stat-card,
.therapist-workspace .stat-card {
    border-color: var(--kamilla-line);
    box-shadow: 0 9px 26px rgba(31, 74, 69, .05);
}

.admin-workspace .stat-card:hover,
.therapist-workspace .stat-card:hover {
    border-color: #d1e7de;
    box-shadow: 0 16px 34px rgba(31, 74, 69, .09);
}

.admin-workspace .table-responsive,
.therapist-workspace .table-responsive {
    overflow-x: auto;
    border: 1px solid #e8efed;
    border-radius: 14px;
    scrollbar-color: #b8d7cb #f3f8f6;
    scrollbar-width: thin;
}

.admin-workspace .data-table thead th,
.therapist-workspace .data-table thead th {
    background: #f3f8f6;
    color: #667f7d;
}

.admin-workspace .data-table tbody tr:hover,
.therapist-workspace .data-table tbody tr:hover {
    background: #f6fbf8;
}

.admin-workspace .filter-bar,
.therapist-workspace .filter-bar {
    border-color: #e5eeeb;
    background: linear-gradient(135deg, #fbfdfc, #f5f9f7);
}

.admin-workspace .intro-chip,
.therapist-workspace .intro-chip {
    border-color: #dcece5;
    background: linear-gradient(135deg, #fff, #eff8f4);
    color: var(--kamilla-primary-dark);
}

.login-brand-panel {
    background:
        radial-gradient(circle at 92% 12%, rgba(204, 244, 224, .2), transparent 22rem),
        linear-gradient(145deg, #104c4b, #0b353c);
}

.public-footer {
    border-top-color: var(--kamilla-line);
    background: rgba(255, 255, 255, .75);
}

@media (max-width: 620px) {
    .public-nav {
        min-height: 68px;
        padding-inline: 15px;
    }

    .public-nav .brand-logo {
        width: 126px;
        height: 54px;
    }

    .nav-actions {
        gap: 9px;
    }

    .nav-actions .btn {
        min-height: 38px;
        padding-inline: 10px;
    }

    .admin-workspace,
    .therapist-workspace {
        background-attachment: scroll;
    }

    .admin-workspace .topbar-profile .profile-copy,
    .therapist-workspace .topbar-profile .profile-copy {
        display: none;
    }

    .admin-workspace .topbar-profile,
    .therapist-workspace .topbar-profile {
        gap: 0;
    }
}

body {
    font-size: 16px;
}

.dashboard-page .topbar-title h1 {
    font-size: clamp(24px, 2.2vw, 29px);
}

.dashboard-page .topbar .eyebrow {
    font-size: 12px;
}

.dashboard-page .profile-copy strong,
.dashboard-page .side-link {
    font-size: 15px;
}

.dashboard-page .profile-copy small,
.dashboard-page .workspace-label,
.dashboard-page .sidebar-version {
    font-size: 13px;
}

.dashboard-page .welcome-kicker,
.dashboard-page .welcome-date > span,
.dashboard-page .section-kicker {
    font-size: 12px;
}

.dashboard-page .welcome-banner h2,
.dashboard-page .therapist-banner h2 {
    font-size: clamp(28px, 3.2vw, 40px);
}

.dashboard-page .welcome-banner p,
.dashboard-page .therapist-banner p {
    font-size: 16px;
}

.dashboard-page .welcome-date strong {
    font-size: 18px;
}

.dashboard-page .stats-grid .stat-top {
    font-size: 14px;
}

.dashboard-page .stats-grid .stat-value {
    font-size: clamp(32px, 3.5vw, 44px);
}

.dashboard-page .therapist-stats .stat-status-text {
    font-size: clamp(23px, 2.4vw, 30px);
}

.dashboard-page .stats-grid .stat-foot,
.dashboard-page .stats-grid .stat-foot a {
    font-size: 14px;
}

.dashboard-page .panel-header h3,
.dashboard-page .quick-actions h3,
.dashboard-page .attendance-guide h3 {
    font-size: 21px;
}

.dashboard-page .panel-header p {
    font-size: 15px;
}

.dashboard-page .panel-header .text-link,
.dashboard-page .data-table th {
    font-size: 13px;
}

.dashboard-page .data-table td,
.dashboard-page .activity-copy strong,
.dashboard-page .quick-actions > a strong {
    font-size: 15px;
}

.dashboard-page .person-cell small,
.dashboard-page .status-badge,
.dashboard-page .activity-copy > span,
.dashboard-page .activity-time,
.dashboard-page .empty-state span,
.dashboard-page .quick-actions > a small {
    font-size: 13px;
}

.dashboard-page .empty-state strong {
    font-size: 16px;
}

.dashboard-page .attendance-clock-card strong {
    font-size: 28px;
}

.dashboard-page .attendance-times > div > span,
.dashboard-page .attendance-times strong,
.dashboard-page .attendance-clock-card .clock-date,
.dashboard-page .attendance-clock-card > div > small,
.dashboard-page .form-hint {
    font-size: 14px;
}

#pendaftaran.registration-card .card-heading h2 {
    font-size: clamp(22px, 2vw, 26px);
}

#pendaftaran.registration-card .card-heading p,
#pendaftaran.registration-card .form-field label {
    font-size: 15px;
}

#pendaftaran.registration-card .section-kicker {
    font-size: 12px;
}

#pendaftaran.registration-card .form-field input,
#pendaftaran.registration-card .form-field select,
#pendaftaran.registration-card .form-field textarea {
    font-size: 16px;
}

#pendaftaran.registration-card .btn {
    font-size: 16px;
}

.admin-workspace.workspace-section-patients,
.admin-workspace.workspace-section-attendance,
.admin-workspace.workspace-section-patient-attendance,
.admin-workspace.workspace-section-users {
    font-size: 16px;
}

.admin-workspace.workspace-section-patients .page-lead,
.admin-workspace.workspace-section-attendance .page-lead,
.admin-workspace.workspace-section-patient-attendance .page-lead,
.admin-workspace.workspace-section-users .page-lead {
    font-size: 16px;
    line-height: 1.6;
}

.admin-workspace.workspace-section-patients .intro-chip,
.admin-workspace.workspace-section-attendance .intro-chip,
.admin-workspace.workspace-section-patient-attendance .intro-chip,
.admin-workspace.workspace-section-users .intro-chip {
    font-size: 14px;
}

.admin-workspace.workspace-section-patients .section-kicker,
.admin-workspace.workspace-section-attendance .section-kicker,
.admin-workspace.workspace-section-patient-attendance .section-kicker,
.admin-workspace.workspace-section-users .section-kicker {
    font-size: 13px;
}

.admin-workspace.workspace-section-patients .panel-header h3,
.admin-workspace.workspace-section-attendance .panel-header h3,
.admin-workspace.workspace-section-patient-attendance .panel-header h3,
.admin-workspace.workspace-section-users .panel-header h3 {
    font-size: 21px;
}

.admin-workspace.workspace-section-patients .panel-header p,
.admin-workspace.workspace-section-attendance .panel-header p,
.admin-workspace.workspace-section-patient-attendance .panel-header p,
.admin-workspace.workspace-section-users .panel-header p {
    font-size: 15px;
}

.admin-workspace.workspace-section-patients .filter-label,
.admin-workspace.workspace-section-attendance .filter-label,
.admin-workspace.workspace-section-patient-attendance .filter-label,
.admin-workspace.workspace-section-users .form-field label {
    font-size: 15px;
}

.admin-workspace.workspace-section-patients .filter-bar input,
.admin-workspace.workspace-section-patients .filter-bar select,
.admin-workspace.workspace-section-patients .inline-status-form select,
.admin-workspace.workspace-section-attendance .filter-bar input,
.admin-workspace.workspace-section-attendance .filter-bar select,
.admin-workspace.workspace-section-patient-attendance .filter-bar input,
.admin-workspace.workspace-section-patient-attendance .filter-bar select,
.admin-workspace.workspace-section-users .form-field input,
.admin-workspace.workspace-section-users .form-field select,
.admin-workspace.workspace-section-users .form-field textarea {
    font-size: 16px;
}

.admin-workspace.workspace-section-patients .btn,
.admin-workspace.workspace-section-attendance .btn,
.admin-workspace.workspace-section-patient-attendance .btn,
.admin-workspace.workspace-section-users .btn {
    font-size: 15px;
}

.admin-workspace.workspace-section-patients .data-table th,
.admin-workspace.workspace-section-attendance .data-table th,
.admin-workspace.workspace-section-patient-attendance .data-table th {
    font-size: 13px;
}

.admin-workspace.workspace-section-patients .data-table td,
.admin-workspace.workspace-section-attendance .data-table td,
.admin-workspace.workspace-section-patient-attendance .data-table td {
    font-size: 15px;
}

.admin-workspace.workspace-section-patients .person-cell strong,
.admin-workspace.workspace-section-patients .phone-link,
.admin-workspace.workspace-section-attendance .person-cell strong,
.admin-workspace.workspace-section-attendance .time-chip,
.admin-workspace.workspace-section-patient-attendance .person-cell strong {
    font-size: 15px;
}

.admin-workspace.workspace-section-patients .person-cell small,
.admin-workspace.workspace-section-patients .patient-subline,
.admin-workspace.workspace-section-patients .table-footer,
.admin-workspace.workspace-section-patients .status-badge,
.admin-workspace.workspace-section-attendance .status-badge,
.admin-workspace.workspace-section-patient-attendance .status-badge {
    font-size: 13px;
}

.admin-workspace.workspace-section-attendance .mini-stat small,
.admin-workspace.workspace-section-patient-attendance .empty-state span,
.admin-workspace.workspace-section-users .therapist-info small,
.admin-workspace.workspace-section-users .form-field small,
.admin-workspace.workspace-section-users .form-hint {
    font-size: 14px;
}

.admin-workspace.workspace-section-attendance .mini-stat strong {
    font-size: 24px;
}

.admin-workspace.workspace-section-users .therapist-info strong {
    font-size: 16px;
}

.admin-workspace.workspace-section-users .therapist-info > span {
    font-size: 15px;
}

.admin-workspace.workspace-section-attendance .page-intro-row {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    margin-bottom: 20px;
    padding: 20px 24px;
    border-color: #dcebe9;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 0%, rgba(119, 205, 190, .18), transparent 16rem),
        linear-gradient(112deg, #fff 0%, #f8fcfb 58%, #eff8f6 100%);
    box-shadow: 0 12px 30px rgba(34, 86, 85, .055);
}

.admin-workspace.workspace-section-attendance .attendance-intro-copy {
    display: grid;
    gap: 7px;
}

.admin-workspace.workspace-section-attendance .attendance-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #168779;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.admin-workspace.workspace-section-attendance .page-lead {
    color: #5d7880;
    font-size: 16px;
    font-weight: 500;
}

.admin-workspace.workspace-section-attendance .attendance-date-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 185px;
    padding: 10px 14px;
    border-color: #d6eae5;
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 5px 14px rgba(39, 101, 88, .055);
    color: #168779;
}

.admin-workspace.workspace-section-attendance .attendance-date-chip > i {
    font-size: 19px;
}

.admin-workspace.workspace-section-attendance .attendance-date-chip span,
.admin-workspace.workspace-section-attendance .attendance-date-chip small,
.admin-workspace.workspace-section-attendance .attendance-date-chip strong {
    display: block;
}

.admin-workspace.workspace-section-attendance .attendance-date-chip small {
    margin-bottom: 2px;
    color: #80968f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
}

.admin-workspace.workspace-section-attendance .attendance-date-chip strong {
    color: #176f68;
    font-size: 14px;
    line-height: 1.3;
}

.admin-workspace.workspace-section-attendance .attendance-stats {
    gap: 16px;
    margin-bottom: 21px;
}

.admin-workspace.workspace-section-attendance .attendance-stat {
    position: relative;
    min-height: 128px;
    gap: 15px;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(35, 72, 101, .055);
    transition: transform .2s ease, box-shadow .2s ease;
}

.admin-workspace.workspace-section-attendance .attendance-stat::after {
    position: absolute;
    right: -25px;
    bottom: -43px;
    width: 116px;
    height: 116px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .07;
    content: "";
    pointer-events: none;
}

.admin-workspace.workspace-section-attendance .attendance-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 32px rgba(35, 72, 101, .09);
}

.admin-workspace.workspace-section-attendance .attendance-stat-present {
    border-color: #d8eee8;
    background: linear-gradient(125deg, #fff 30%, #f3fbf8);
    color: #138575;
}

.admin-workspace.workspace-section-attendance .attendance-stat-total {
    border-color: #e5e0fa;
    background: linear-gradient(125deg, #fff 30%, #f8f6ff);
    color: #7759ca;
}

.admin-workspace.workspace-section-attendance .attendance-stat-pending {
    border-color: #f7e5db;
    background: linear-gradient(125deg, #fff 30%, #fff8f3);
    color: #dc7048;
}

.admin-workspace.workspace-section-attendance .attendance-stat .mini-stat-icon {
    width: 46px;
    height: 46px;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 12%, white);
    border-radius: 15px;
    font-size: 18px;
}

.admin-workspace.workspace-section-attendance .attendance-stat-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

.admin-workspace.workspace-section-attendance .attendance-stat small {
    color: #708890;
    font-size: 13px;
    font-weight: 600;
}

.admin-workspace.workspace-section-attendance .attendance-stat strong {
    margin-top: 2px;
    color: #1d3c45;
    font-size: 29px;
    line-height: 1.15;
}

.admin-workspace.workspace-section-attendance .attendance-stat-note {
    display: block;
    margin-top: 4px;
    color: #8a9b9e;
    font-size: 11px;
    line-height: 1.4;
}

.admin-workspace.workspace-section-attendance .attendance-stat-progress {
    display: block;
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5f1ed;
}

.admin-workspace.workspace-section-attendance .attendance-stat-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #36b49a, #138575);
    transition: width .3s ease;
}

@media (max-width: 600px) {
    .admin-workspace.workspace-section-attendance .page-intro-row {
        gap: 14px;
        padding: 17px;
    }

    .admin-workspace.workspace-section-attendance .page-lead {
        font-size: 14px;
    }

    .admin-workspace.workspace-section-attendance .attendance-date-chip {
        width: 100%;
    }

    .admin-workspace.workspace-section-attendance .attendance-stat {
        min-height: 0;
        padding: 15px;
    }

    .admin-workspace.workspace-section-attendance .attendance-stat-note {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-workspace.workspace-section-attendance .attendance-stat,
    .admin-workspace.workspace-section-attendance .attendance-stat-progress span {
        transition: none;
    }
}