:root {
    --hf-lime-300: #c7f04d;
    --hf-lime-400: #b5e51d;
    --hf-lime-500: #9dcb11;
    --hf-ink-950: #0d110f;
    --hf-ink-900: #111512;
    --hf-ink-800: #1a201c;
    --hf-ink-700: #283029;
    --hf-stone-700: #485149;
    --hf-stone-600: #626b63;
    --hf-stone-500: #7b847c;
    --hf-stone-300: #cfd6d0;
    --hf-stone-200: #dfe5df;
    --hf-stone-100: #edf1ed;
    --hf-stone-50: #f5f7f4;
    --hf-surface: #fbfcfa;
    --hf-error: #b42318;
    --hf-error-bg: #fef0ed;
    --hf-warning: #8a5b05;
    --hf-warning-bg: #fff7df;
    --hf-info: #285b8f;
    --hf-info-bg: #edf6ff;
    --hf-success: #2e6a3e;
    --hf-success-bg: #edf8ef;
    --hf-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --hf-font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hf-text-xs: .75rem;
    --hf-text-sm: .875rem;
    --hf-text-base: 1rem;
    --hf-text-lg: 1.25rem;
    --hf-text-xl: 1.5rem;
    --hf-text-2xl: 2rem;
    --hf-text-3xl: clamp(2.25rem, 4.5vw, 4.4rem);
    --hf-space-1: .25rem;
    --hf-space-2: .5rem;
    --hf-space-3: .75rem;
    --hf-space-4: 1rem;
    --hf-space-5: 1.25rem;
    --hf-space-6: 1.5rem;
    --hf-space-8: 2rem;
    --hf-space-10: 2.5rem;
    --hf-space-12: 3rem;
    --hf-space-16: 4rem;
    --hf-radius-sm: .625rem;
    --hf-radius-md: 1rem;
    --hf-radius-lg: 1.5rem;
    --hf-shadow: 0 18px 50px rgba(14, 20, 16, .08);
    --hf-ease: 180ms ease-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--hf-stone-50);
}

body.habitfit-app-page {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--hf-ink-900);
    background: var(--hf-stone-50);
    font-family: var(--hf-font-ui);
    font-size: var(--hf-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.habitfit-app-page button,
body.habitfit-app-page input,
body.habitfit-app-page select,
body.habitfit-app-page textarea {
    font: inherit;
}

body.habitfit-app-page button,
body.habitfit-app-page a {
    -webkit-tap-highlight-color: transparent;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hf-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.hf-app {
    min-height: 100vh;
}

.hf-layout {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    min-height: 100vh;
}

.hf-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: var(--hf-space-8) var(--hf-space-5);
    overflow: hidden;
    color: var(--hf-stone-300);
    background:
        radial-gradient(circle at 5% 5%, rgba(181, 229, 29, .12), transparent 22rem),
        var(--hf-ink-950);
}

.hf-sidebar::after {
    position: absolute;
    right: -3rem;
    bottom: 7rem;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(181, 229, 29, .14);
    border-radius: 50%;
    content: "";
}

.hf-wordmark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--hf-space-3);
    color: var(--hf-surface);
    font-family: var(--hf-font-display);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1;
    text-decoration: none;
}

.hf-wordmark > span:last-child > span {
    color: var(--hf-lime-400);
}

.hf-wordmark__mark {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 2px solid var(--hf-lime-400);
    border-radius: 50%;
    color: var(--hf-surface);
    background: var(--hf-ink-900);
    font-family: var(--hf-font-display);
    font-size: .95rem;
    font-style: italic;
    letter-spacing: -.09em;
    box-shadow: inset 0 0 0 3px var(--hf-ink-900);
}

.hf-wordmark--large {
    gap: var(--hf-space-4);
    font-size: 1.4rem;
}

.hf-wordmark--large .hf-wordmark__mark {
    width: 3.5rem;
    height: 3.5rem;
}

.hf-sidebar__org {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--hf-space-1);
    margin: var(--hf-space-10) 0 var(--hf-space-8);
    padding: var(--hf-space-4);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--hf-radius-sm);
    background: rgba(255, 255, 255, .035);
}

.hf-sidebar__org small,
.hf-sidebar__footer small {
    color: var(--hf-stone-500);
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.hf-sidebar__org strong {
    overflow: hidden;
    color: var(--hf-surface);
    font-size: var(--hf-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-nav {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--hf-space-2);
}

.hf-nav__item {
    position: relative;
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: var(--hf-space-3);
    padding: 0 var(--hf-space-4);
    border: 0;
    border-radius: var(--hf-radius-sm);
    color: var(--hf-stone-500);
    background: transparent;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: color var(--hf-ease), background var(--hf-ease), transform var(--hf-ease);
}

.hf-nav__item::before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--hf-lime-400);
    content: "";
    transition: height var(--hf-ease);
}

.hf-nav__item:hover {
    color: var(--hf-surface);
    background: rgba(255, 255, 255, .04);
    transform: translateX(2px);
}

.hf-nav__item.is-active {
    color: var(--hf-lime-300);
    background: rgba(181, 229, 29, .09);
}

.hf-nav__item.is-active::before {
    height: 1.5rem;
}

.hf-sidebar__footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hf-space-3);
    margin-top: auto;
    padding-top: var(--hf-space-5);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.hf-sidebar__footer > div:nth-child(2) {
    display: grid;
    min-width: 0;
}

.hf-sidebar__footer strong {
    overflow: hidden;
    color: var(--hf-surface);
    font-size: var(--hf-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-sidebar__footer a {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 50%;
    color: var(--hf-stone-500);
    transition: color var(--hf-ease), background var(--hf-ease);
}

.hf-sidebar__footer a:hover {
    color: var(--hf-surface);
    background: rgba(255, 255, 255, .06);
}

.hf-sidebar__avatar,
.hf-client-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--hf-ink-900);
    background: var(--hf-lime-400);
    font-weight: 850;
    letter-spacing: -.03em;
}

.hf-sidebar__avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--hf-text-xs);
}

.hf-main {
    min-width: 0;
}

.hf-topbar {
    display: flex;
    min-height: 6rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--hf-space-6);
    padding: var(--hf-space-4) clamp(var(--hf-space-6), 4vw, var(--hf-space-12));
    border-bottom: 1px solid var(--hf-stone-200);
    background: rgba(245, 247, 244, .9);
    backdrop-filter: blur(16px);
}

.hf-topbar p {
    margin: 0;
}

.hf-kicker {
    margin: 0 0 var(--hf-space-2);
    color: var(--hf-stone-600);
    font-size: .6875rem;
    font-weight: 850;
    letter-spacing: .17em;
    line-height: 1.2;
}

.hf-kicker--lime {
    color: var(--hf-lime-300);
}

.hf-topbar__hello {
    font-size: var(--hf-text-lg);
    letter-spacing: -.025em;
}

.hf-topbar__date {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
    font-weight: 600;
    text-transform: capitalize;
}

.hf-content {
    width: 100%;
    max-width: 98rem;
    margin: 0 auto;
    padding: clamp(var(--hf-space-6), 4vw, var(--hf-space-12));
}

.hf-view {
    display: grid;
    gap: var(--hf-space-8);
    animation: hf-enter 220ms ease-out both;
}

.hf-hero {
    position: relative;
    display: grid;
    min-height: 21rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--hf-space-10);
    padding: clamp(var(--hf-space-8), 5vw, var(--hf-space-16));
    overflow: hidden;
    border-radius: var(--hf-radius-lg);
    color: var(--hf-surface);
    background:
        linear-gradient(115deg, rgba(13, 17, 15, .12), rgba(13, 17, 15, .8)),
        radial-gradient(circle at 75% 10%, rgba(181, 229, 29, .2), transparent 30rem),
        var(--hf-ink-900);
    box-shadow: var(--hf-shadow);
}

.hf-hero::before,
.hf-hero::after {
    position: absolute;
    border: 1px solid rgba(181, 229, 29, .16);
    border-radius: 50%;
    content: "";
}

.hf-hero::before {
    top: -9rem;
    right: 8rem;
    width: 25rem;
    height: 25rem;
}

.hf-hero::after {
    top: -4rem;
    right: -5rem;
    width: 17rem;
    height: 17rem;
}

.hf-hero__copy,
.hf-progress {
    position: relative;
    z-index: 1;
}

.hf-hero h1,
.hf-view-heading h1,
.hf-auth h1 {
    max-width: 14ch;
    margin: 0;
    font-family: var(--hf-font-display);
    font-size: var(--hf-text-3xl);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .98;
}

.hf-hero h1 span {
    color: var(--hf-lime-300);
}

.hf-hero__copy > p:not(.hf-kicker) {
    max-width: 38rem;
    margin: var(--hf-space-5) 0 var(--hf-space-8);
    color: var(--hf-stone-300);
    font-size: var(--hf-text-base);
    line-height: 1.65;
}

.hf-progress {
    display: grid;
    width: 9rem;
    height: 9rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--hf-lime-400) calc(var(--hf-progress) * 1%), rgba(255, 255, 255, .09) 0);
}

.hf-progress::before {
    position: absolute;
    inset: .6rem;
    border-radius: inherit;
    background: var(--hf-ink-900);
    content: "";
}

.hf-progress > div {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.hf-progress strong {
    font-size: var(--hf-text-2xl);
    letter-spacing: -.05em;
    line-height: 1;
}

.hf-progress strong small {
    font-size: var(--hf-text-sm);
}

.hf-progress span {
    margin-top: var(--hf-space-1);
    color: var(--hf-stone-500);
    font-size: .625rem;
    font-weight: 850;
    letter-spacing: .14em;
}

.hf-button {
    display: inline-flex;
    min-height: 2.875rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: var(--hf-space-2);
    padding: .7rem var(--hf-space-5);
    border: 1px solid transparent;
    border-radius: var(--hf-radius-sm);
    font-size: var(--hf-text-sm);
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--hf-ease), background var(--hf-ease), border-color var(--hf-ease), color var(--hf-ease), box-shadow var(--hf-ease);
}

.hf-button:hover {
    transform: translateY(-1px);
}

.hf-button:active {
    transform: translateY(0);
}

.hf-button:disabled {
    cursor: wait;
    opacity: .68;
    transform: none;
}

.hf-button--lime,
.hf-button--primary {
    color: var(--hf-ink-950);
    background: var(--hf-lime-400);
    box-shadow: 0 10px 24px rgba(181, 229, 29, .13);
}

.hf-button--lime:hover,
.hf-button--primary:hover {
    background: var(--hf-lime-300);
    box-shadow: 0 12px 28px rgba(181, 229, 29, .2);
}

.hf-button--secondary {
    color: var(--hf-ink-900);
    border-color: var(--hf-stone-300);
    background: var(--hf-surface);
}

.hf-button--secondary:hover {
    border-color: var(--hf-ink-700);
    background: var(--hf-stone-50);
}

.hf-button--ghost {
    color: var(--hf-stone-600);
    background: transparent;
}

.hf-button--ghost:hover {
    color: var(--hf-ink-900);
    background: var(--hf-stone-100);
}

.hf-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hf-space-4);
}

.hf-metric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--hf-space-4);
    padding: var(--hf-space-5);
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    background: var(--hf-surface);
}

.hf-metric__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--hf-ink-900);
    background: var(--hf-stone-100);
}

.hf-metric > div {
    display: grid;
}

.hf-metric span:not(.hf-metric__icon),
.hf-metric small {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-metric strong {
    margin: var(--hf-space-1) 0;
    font-size: var(--hf-text-2xl);
    letter-spacing: -.055em;
    line-height: 1;
}

.hf-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(18rem, .82fr) minmax(24rem, 1.18fr);
    gap: var(--hf-space-5);
}

.hf-panel,
.hf-form-panel {
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    background: var(--hf-surface);
}

.hf-panel {
    padding: var(--hf-space-6);
}

.hf-panel__heading,
.hf-view-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hf-space-6);
}

.hf-panel__heading h2,
.hf-form-panel__intro h2,
.hf-auth__panel h2 {
    margin: 0;
    font-size: var(--hf-text-xl);
    letter-spacing: -.035em;
    line-height: 1.15;
}

.hf-chip {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0 var(--hf-space-3);
    border-radius: 999px;
    color: var(--hf-success);
    background: var(--hf-success-bg);
    font-size: var(--hf-text-xs);
    font-weight: 800;
}

.hf-training-line {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: var(--hf-space-6);
}

.hf-training-line::before {
    position: absolute;
    top: 1.7rem;
    bottom: 1.7rem;
    left: 1.35rem;
    width: 1px;
    background: var(--hf-stone-200);
    content: "";
}

.hf-training-step {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 4.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hf-space-4);
    padding: var(--hf-space-2) 0;
    border: 0;
    color: var(--hf-ink-900);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.hf-training-step__index {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--hf-stone-300);
    border-radius: 50%;
    color: var(--hf-stone-600);
    background: var(--hf-surface);
    font-size: .6875rem;
    font-weight: 850;
    letter-spacing: .08em;
    transition: color var(--hf-ease), background var(--hf-ease), border var(--hf-ease);
}

.hf-training-step.is-complete .hf-training-step__index {
    color: var(--hf-ink-900);
    border-color: var(--hf-lime-400);
    background: var(--hf-lime-400);
}

.hf-training-step > span:nth-child(2) {
    display: grid;
}

.hf-training-step strong {
    font-size: var(--hf-text-sm);
}

.hf-training-step small {
    margin-top: var(--hf-space-1);
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-training-step > .hf-icon {
    color: var(--hf-stone-500);
    transition: transform var(--hf-ease), color var(--hf-ease);
}

.hf-training-step:hover > .hf-icon {
    color: var(--hf-ink-900);
    transform: translateX(3px);
}

.hf-link-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--hf-space-1);
    padding: 0;
    border: 0;
    color: var(--hf-stone-600);
    background: transparent;
    font-size: var(--hf-text-xs);
    font-weight: 750;
    cursor: pointer;
}

.hf-link-button .hf-icon {
    width: 1rem;
}

.hf-client-list {
    display: grid;
    margin-top: var(--hf-space-5);
}

.hf-client-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hf-space-3);
    min-height: 4.25rem;
    border-top: 1px solid var(--hf-stone-100);
}

.hf-client-row:first-child {
    border-top: 0;
}

.hf-client-row > div {
    display: grid;
}

.hf-client-row strong {
    font-size: var(--hf-text-sm);
}

.hf-client-row small {
    color: var(--hf-stone-500);
    font-size: var(--hf-text-xs);
}

.hf-client-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .6875rem;
}

.hf-status {
    display: inline-flex;
    width: fit-content;
    min-height: 1.75rem;
    align-items: center;
    padding: 0 .65rem;
    border-radius: 999px;
    color: var(--hf-stone-700);
    background: var(--hf-stone-100);
    font-size: .6875rem;
    font-weight: 750;
    white-space: nowrap;
}

.hf-status--active {
    color: var(--hf-success);
    background: var(--hf-success-bg);
}

.hf-status--lead {
    color: var(--hf-info);
    background: var(--hf-info-bg);
}

.hf-status--onboarding {
    color: var(--hf-warning);
    background: var(--hf-warning-bg);
}

.hf-empty {
    display: grid;
    min-height: 16rem;
    place-items: center;
    align-content: center;
    padding: var(--hf-space-8);
    text-align: center;
}

.hf-empty__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: var(--hf-space-3);
    border-radius: 50%;
    color: var(--hf-stone-600);
    background: var(--hf-stone-100);
}

.hf-empty h3 {
    margin: 0;
    font-size: var(--hf-text-lg);
    letter-spacing: -.025em;
}

.hf-empty p {
    max-width: 28rem;
    margin: var(--hf-space-2) 0 var(--hf-space-5);
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
}

.hf-view-heading {
    padding: var(--hf-space-3) 0 var(--hf-space-2);
}

.hf-view-heading h1 {
    max-width: 18ch;
    font-size: clamp(2.25rem, 5vw, 3.8rem);
}

.hf-view-heading h1[tabindex="-1"]:focus {
    outline: 0;
}

.hf-view-heading > div > p:last-child {
    max-width: 38rem;
    margin: var(--hf-space-4) 0 0;
    color: var(--hf-stone-600);
}

.hf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hf-space-4);
}

.hf-search {
    display: flex;
    width: min(100%, 30rem);
    min-height: 3rem;
    align-items: center;
    gap: var(--hf-space-3);
    padding: 0 var(--hf-space-4);
    border: 1px solid var(--hf-stone-300);
    border-radius: var(--hf-radius-sm);
    color: var(--hf-stone-500);
    background: var(--hf-surface);
    transition: border-color var(--hf-ease), box-shadow var(--hf-ease);
}

.hf-search:focus-within {
    border-color: var(--hf-ink-700);
    box-shadow: 0 0 0 3px rgba(181, 229, 29, .3);
}

.hf-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--hf-ink-900);
    background: transparent;
}

.hf-toolbar__count {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
    white-space: nowrap;
}

.hf-clients-table {
    overflow: hidden;
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    background: var(--hf-surface);
}

.hf-clients-table__head,
.hf-clients-table__row {
    display: grid;
    grid-template-columns: minmax(14rem, 1.35fr) minmax(12rem, 1fr) minmax(8rem, .6fr) minmax(8rem, .6fr);
    align-items: center;
    gap: var(--hf-space-4);
}

.hf-clients-table__head {
    min-height: 3rem;
    padding: 0 var(--hf-space-5);
    color: var(--hf-stone-500);
    background: var(--hf-stone-50);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hf-clients-table__row {
    min-height: 5rem;
    padding: var(--hf-space-3) var(--hf-space-5);
    border-top: 1px solid var(--hf-stone-100);
}

.hf-client-identity,
.hf-contact {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--hf-space-3);
}

.hf-client-identity > span:last-child {
    display: grid;
    min-width: 0;
}

.hf-client-identity strong,
.hf-client-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-client-identity strong {
    font-size: var(--hf-text-sm);
}

.hf-client-identity small,
.hf-contact,
.hf-clients-table__row time {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-contact .hf-icon {
    width: 1rem;
}

.hf-form-panel {
    display: grid;
    grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr);
    gap: clamp(var(--hf-space-6), 4vw, var(--hf-space-12));
    padding: clamp(var(--hf-space-6), 4vw, var(--hf-space-10));
}

.hf-form-panel--compact {
    align-items: start;
}

.hf-form-panel__intro {
    max-width: 26rem;
}

.hf-form-panel__intro p:last-child {
    margin: var(--hf-space-3) 0 0;
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
    line-height: 1.6;
}

.hf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hf-space-5);
}

.hf-field {
    display: grid;
    align-content: start;
    gap: var(--hf-space-2);
    color: var(--hf-ink-800);
    font-size: var(--hf-text-sm);
    font-weight: 700;
}

.hf-field em {
    color: var(--hf-error);
    font-style: normal;
}

.hf-field--wide,
.hf-form-actions {
    grid-column: 1 / -1;
}

.hf-field input,
.hf-field select,
.hf-field textarea {
    width: 100%;
    min-height: 3rem;
    padding: .75rem var(--hf-space-4);
    border: 1px solid var(--hf-stone-300);
    border-radius: var(--hf-radius-sm);
    outline: 0;
    color: var(--hf-ink-900);
    background: var(--hf-surface);
    font-weight: 450;
    transition: border-color var(--hf-ease), box-shadow var(--hf-ease), background var(--hf-ease);
}

.hf-field textarea {
    min-height: 7.5rem;
    resize: vertical;
    line-height: 1.6;
}

.hf-field input::placeholder,
.hf-field textarea::placeholder {
    color: var(--hf-stone-500);
}

.hf-field input:hover,
.hf-field select:hover,
.hf-field textarea:hover {
    border-color: var(--hf-stone-500);
}

.hf-field input:focus,
.hf-field select:focus,
.hf-field textarea:focus {
    border-color: var(--hf-ink-700);
    box-shadow: 0 0 0 3px rgba(181, 229, 29, .3);
}

.hf-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hf-space-3);
    margin-top: var(--hf-space-2);
}

.hf-form-hint {
    margin-left: auto;
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-profile-form {
    display: grid;
    gap: var(--hf-space-6);
}

.hf-profile-badge {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--hf-space-2);
    padding: 0 var(--hf-space-4);
    border: 1px solid var(--hf-stone-200);
    border-radius: 999px;
    color: var(--hf-stone-600);
    background: var(--hf-surface);
    font-size: var(--hf-text-xs);
    font-weight: 700;
}

.hf-profile-badge .hf-icon {
    color: var(--hf-lime-500);
}

.hf-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hf-space-3);
    min-height: 3rem;
    cursor: pointer;
}

.hf-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hf-switch > span {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--hf-stone-300);
    transition: background var(--hf-ease), box-shadow var(--hf-ease);
}

.hf-switch > span::after {
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--hf-surface);
    box-shadow: 0 2px 6px rgba(13, 17, 15, .18);
    content: "";
    transition: transform var(--hf-ease);
}

.hf-switch input:checked + span {
    background: var(--hf-lime-500);
}

.hf-switch input:checked + span::after {
    transform: translateX(1.25rem);
}

.hf-switch input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(181, 229, 29, .35);
}

.hf-switch strong {
    font-size: var(--hf-text-sm);
}

.hf-specialty-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hf-space-3);
}

.hf-specialty {
    overflow: hidden;
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-sm);
    background: var(--hf-surface);
    transition: border-color var(--hf-ease), box-shadow var(--hf-ease), transform var(--hf-ease);
}

.hf-specialty:hover {
    border-color: var(--hf-stone-500);
    transform: translateY(-1px);
}

.hf-specialty.is-selected {
    border-color: var(--hf-lime-500);
    box-shadow: inset 0 0 0 1px var(--hf-lime-500);
}

.hf-specialty__select {
    position: relative;
    display: grid;
    min-height: 6.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hf-space-3);
    padding: var(--hf-space-4);
    cursor: pointer;
}

.hf-specialty__select > input,
.hf-specialty__primary > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hf-specialty__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--hf-stone-600);
    background: var(--hf-stone-100);
}

.hf-specialty.is-selected .hf-specialty__icon {
    color: var(--hf-ink-900);
    background: var(--hf-lime-400);
}

.hf-specialty__select > span:nth-child(3) {
    display: grid;
    min-width: 0;
}

.hf-specialty__select strong {
    font-size: var(--hf-text-sm);
}

.hf-specialty__select small {
    margin-top: var(--hf-space-1);
    overflow: hidden;
    color: var(--hf-stone-500);
    font-size: .625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hf-specialty__check {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 1px solid var(--hf-stone-300);
    border-radius: 50%;
    color: transparent;
}

.hf-specialty__check .hf-icon {
    width: .9rem;
}

.hf-specialty.is-selected .hf-specialty__check {
    color: var(--hf-ink-900);
    border-color: var(--hf-lime-400);
    background: var(--hf-lime-400);
}

.hf-specialty__select input:focus-visible ~ .hf-specialty__check {
    box-shadow: 0 0 0 3px rgba(181, 229, 29, .35);
}

.hf-specialty__primary {
    display: flex;
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--hf-stone-100);
    color: var(--hf-stone-500);
    font-size: .6875rem;
    font-weight: 700;
    cursor: pointer;
}

.hf-specialty__primary:has(input:disabled) {
    cursor: not-allowed;
    opacity: .55;
}

.hf-specialty__primary:has(input:checked) {
    color: var(--hf-ink-900);
    background: rgba(181, 229, 29, .13);
}

.hf-toast-region {
    position: fixed;
    right: var(--hf-space-6);
    bottom: var(--hf-space-6);
    z-index: 100;
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    gap: var(--hf-space-2);
}

.hf-toast {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    gap: var(--hf-space-3);
    padding: var(--hf-space-3) var(--hf-space-4);
    border: 1px solid var(--hf-stone-700);
    border-radius: var(--hf-radius-sm);
    color: var(--hf-surface);
    background: var(--hf-ink-900);
    box-shadow: var(--hf-shadow);
    font-size: var(--hf-text-sm);
    font-weight: 650;
    animation: hf-toast-in 180ms ease-out both;
}

.hf-toast--error {
    border-color: #e17167;
}

.hf-toast.is-leaving {
    animation: hf-toast-out 180ms ease-in both;
}

.hf-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hf-spin .7s linear infinite;
}

.hf-boot,
.hf-fatal {
    display: grid;
    min-height: 100vh;
    place-items: center;
    align-content: center;
    gap: var(--hf-space-4);
    padding: var(--hf-space-8);
    color: var(--hf-stone-300);
    background: var(--hf-ink-950);
    text-align: center;
}

.hf-boot__mark {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    border: 2px solid var(--hf-lime-400);
    border-radius: 50%;
    color: var(--hf-surface);
    font-family: var(--hf-font-display);
    font-style: italic;
    animation: hf-pulse 1.4s ease-in-out infinite;
}

.hf-fatal .hf-wordmark__mark {
    width: 4.5rem;
    height: 4.5rem;
}

.hf-fatal h1 {
    margin: 0;
    color: var(--hf-surface);
}

.hf-fatal p:not(.hf-kicker) {
    max-width: 34rem;
    margin: 0 0 var(--hf-space-3);
}

.hf-mobile-nav {
    display: none;
}

.hf-auth {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr);
}

.hf-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(var(--hf-space-8), 7vw, 7rem);
    overflow: hidden;
    color: var(--hf-surface);
    background:
        radial-gradient(circle at 70% 30%, rgba(181, 229, 29, .2), transparent 34rem),
        var(--hf-ink-950);
}

.hf-auth__brand::after {
    position: absolute;
    top: 15%;
    right: -14rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(181, 229, 29, .17);
    border-radius: 50%;
    box-shadow: 0 0 0 5rem rgba(181, 229, 29, .03), 0 0 0 10rem rgba(181, 229, 29, .02);
    content: "";
}

.hf-auth__brand > * {
    position: relative;
    z-index: 1;
}

.hf-auth h1 {
    max-width: 11ch;
}

.hf-auth__brand > div > p:last-child {
    max-width: 36rem;
    margin: var(--hf-space-6) 0 0;
    color: var(--hf-stone-300);
    font-size: var(--hf-text-lg);
    line-height: 1.6;
}

.hf-auth__tagline {
    margin: var(--hf-space-16) 0 0;
    color: var(--hf-stone-500);
    font-size: .6875rem;
    font-weight: 850;
    letter-spacing: .15em;
}

.hf-auth__tagline strong {
    color: var(--hf-lime-300);
}

.hf-auth__form {
    display: grid;
    place-items: center;
    padding: clamp(var(--hf-space-6), 6vw, var(--hf-space-16));
    background: var(--hf-stone-50);
}

.hf-auth__panel {
    width: min(100%, 28rem);
}

.hf-auth__panel > p:not(.hf-kicker) {
    margin: var(--hf-space-3) 0 var(--hf-space-8);
    color: var(--hf-stone-600);
}

.hf-auth form {
    display: grid;
    gap: var(--hf-space-4);
}

.hf-auth form p {
    display: grid;
    gap: var(--hf-space-2);
    margin: 0;
}

.hf-auth form label {
    color: var(--hf-ink-800);
    font-size: var(--hf-text-sm);
    font-weight: 700;
}

.hf-auth .input {
    width: 100%;
    min-height: 3.25rem;
    padding: .75rem var(--hf-space-4);
    border: 1px solid var(--hf-stone-300);
    border-radius: var(--hf-radius-sm);
    outline: 0;
    color: var(--hf-ink-900);
    background: var(--hf-surface);
}

.hf-auth .input:focus {
    border-color: var(--hf-ink-700);
    box-shadow: 0 0 0 3px rgba(181, 229, 29, .3);
}

.hf-auth .login-remember label {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--hf-space-2);
    font-weight: 550;
}

.hf-auth .button-primary {
    min-height: 3.25rem;
    padding: 0 var(--hf-space-5);
    border: 0;
    border-radius: var(--hf-radius-sm);
    color: var(--hf-ink-950);
    background: var(--hf-lime-400);
    font-weight: 800;
    cursor: pointer;
    transition: background var(--hf-ease), transform var(--hf-ease);
}

.hf-auth .button-primary:hover {
    background: var(--hf-lime-300);
    transform: translateY(-1px);
}

.hf-auth__forgot {
    display: inline-block;
    margin-top: var(--hf-space-5);
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
    font-weight: 650;
    text-underline-offset: .2em;
}

.hf-button:focus-visible,
.hf-nav__item:focus-visible,
.hf-link-button:focus-visible,
.hf-training-step:focus-visible,
.hf-sidebar__footer a:focus-visible,
.hf-auth a:focus-visible,
.hf-auth .button-primary:focus-visible {
    outline: 3px solid var(--hf-lime-400);
    outline-offset: 3px;
}

@keyframes hf-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hf-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes hf-toast-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes hf-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hf-pulse {
    50% {
        box-shadow: 0 0 0 12px rgba(181, 229, 29, .08);
    }
}

@media (max-width: 1180px) {
    .hf-layout {
        grid-template-columns: 13.5rem minmax(0, 1fr);
    }

    .hf-sidebar {
        padding-inline: var(--hf-space-4);
    }

    .hf-sidebar__org {
        padding-inline: var(--hf-space-3);
    }

    .hf-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hf-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hf-specialty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hf-layout {
        display: block;
        padding-bottom: 5rem;
    }

    .hf-sidebar {
        display: none;
    }

    .hf-mobile-nav {
        position: fixed;
        right: var(--hf-space-3);
        bottom: var(--hf-space-3);
        left: var(--hf-space-3);
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--hf-space-1);
        padding: var(--hf-space-2);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 1.1rem;
        background: rgba(13, 17, 15, .96);
        box-shadow: 0 18px 50px rgba(13, 17, 15, .26);
        backdrop-filter: blur(16px);
    }

    .hf-mobile-nav .hf-nav__item {
        min-height: 3.5rem;
        flex-direction: column;
        justify-content: center;
        gap: var(--hf-space-1);
        padding: var(--hf-space-1);
        font-size: .625rem;
        text-align: center;
    }

    .hf-mobile-nav .hf-nav__item::before {
        display: none;
    }

    .hf-topbar {
        min-height: 5rem;
    }

    .hf-form-panel {
        grid-template-columns: 1fr;
    }

    .hf-clients-table__head {
        display: none;
    }

    .hf-clients-table__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--hf-space-3);
    }

    .hf-clients-table__row .hf-contact {
        grid-column: 1;
    }

    .hf-clients-table__row > div:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }

    .hf-clients-table__row time {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .hf-auth {
        grid-template-columns: 1fr;
    }

    .hf-auth__brand {
        min-height: 31rem;
    }
}

@media (max-width: 640px) {
    .hf-topbar {
        padding-inline: var(--hf-space-4);
    }

    .hf-topbar__date {
        display: none;
    }

    .hf-content {
        padding: var(--hf-space-4);
    }

    .hf-view {
        gap: var(--hf-space-5);
    }

    .hf-hero {
        min-height: 30rem;
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--hf-space-8);
        padding: var(--hf-space-6);
    }

    .hf-hero h1 {
        font-size: clamp(2.15rem, 12vw, 3.25rem);
    }

    .hf-hero__copy > p:not(.hf-kicker) {
        margin-bottom: var(--hf-space-6);
    }

    .hf-progress {
        width: 6.5rem;
        height: 6.5rem;
        justify-self: end;
    }

    .hf-progress strong {
        font-size: var(--hf-text-lg);
    }

    .hf-metrics {
        grid-template-columns: 1fr 1fr;
        gap: var(--hf-space-3);
    }

    .hf-metric {
        grid-template-columns: 1fr;
        padding: var(--hf-space-4);
    }

    .hf-metric__icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .hf-panel,
    .hf-form-panel {
        padding: var(--hf-space-5);
    }

    .hf-panel__heading,
    .hf-view-heading {
        display: grid;
    }

    .hf-view-heading .hf-button,
    .hf-view-heading .hf-profile-badge {
        justify-self: start;
    }

    .hf-form-grid {
        grid-template-columns: 1fr;
    }

    .hf-field,
    .hf-field--wide,
    .hf-form-actions {
        grid-column: 1;
    }

    .hf-specialty-grid {
        grid-template-columns: 1fr;
    }

    .hf-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .hf-search {
        width: 100%;
    }

    .hf-clients-table__row {
        padding: var(--hf-space-4);
    }

    .hf-clients-table__row .hf-contact {
        display: none;
    }

    .hf-form-hint {
        width: 100%;
        margin-left: 0;
    }

    .hf-toast-region {
        right: var(--hf-space-4);
        bottom: 6rem;
        left: var(--hf-space-4);
        width: auto;
    }

    .hf-auth__brand,
    .hf-auth__form {
        padding: var(--hf-space-8) var(--hf-space-5);
    }

    .hf-auth__brand {
        min-height: 34rem;
    }

    .hf-auth h1 {
        font-size: clamp(2.4rem, 13vw, 4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Business & paiements */
.hf-business-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hf-space-6);
}

.hf-business-summary,
.hf-connect-card {
    position: relative;
    min-height: 20rem;
}

.hf-business-summary {
    overflow: hidden;
    color: var(--hf-surface);
    border-color: var(--hf-ink-900);
    background:
        radial-gradient(circle at 92% 8%, rgba(181, 229, 29, .17), transparent 15rem),
        var(--hf-ink-900);
}

.hf-business-summary .hf-form-panel__intro p,
.hf-business-summary .hf-kicker {
    color: var(--hf-stone-500);
}

.hf-business-summary .hf-form-panel__intro h2 {
    color: var(--hf-lime-300);
}

.hf-entitlement {
    display: flex;
    align-items: baseline;
    gap: var(--hf-space-3);
    margin: var(--hf-space-8) 0;
}

.hf-entitlement strong {
    color: var(--hf-lime-300);
    font-size: clamp(3.25rem, 7vw, 5.5rem);
    letter-spacing: -.08em;
    line-height: .8;
}

.hf-entitlement span {
    color: var(--hf-stone-500);
    font-size: var(--hf-text-sm);
    font-weight: 750;
}

.hf-connect-card {
    align-content: start;
}

.hf-connect-status {
    display: flex;
    align-items: center;
    gap: var(--hf-space-3);
    margin: var(--hf-space-8) 0;
    padding: var(--hf-space-4);
    border: 1px solid var(--hf-stone-200);
    background: var(--hf-stone-100);
}

.hf-connect-status span {
    width: .75rem;
    height: .75rem;
    border: 3px solid #fee2e2;
    border-radius: 50%;
    background: #dc2626;
    box-sizing: content-box;
}

.hf-connect-status.is-active span {
    border-color: #e3f5bd;
    background: #6ca000;
}

.hf-connect-status strong {
    font-size: var(--hf-text-sm);
}

.hf-business-plans {
    margin-top: var(--hf-space-6);
    padding: clamp(var(--hf-space-6), 4vw, var(--hf-space-10));
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    background: var(--hf-surface);
}

.hf-business-plans__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hf-space-4);
    margin-top: var(--hf-space-6);
}

.hf-business-plan {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--hf-space-6);
    border: 1px solid var(--hf-stone-200);
    background: var(--hf-stone-100);
}

.hf-business-plan.is-featured {
    color: var(--hf-surface);
    border-color: var(--hf-ink-900);
    background: var(--hf-ink-900);
}

.hf-business-plan__badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: .35rem .55rem;
    color: var(--hf-ink-900);
    background: var(--hf-lime-400);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.hf-business-plan__price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: var(--hf-space-4) 0;
}

.hf-business-plan__price strong {
    color: #527300;
    font-size: clamp(2.5rem, 5vw, 3.7rem);
    letter-spacing: -.07em;
    line-height: 1;
}

.hf-business-plan.is-featured .hf-kicker,
.hf-business-plan.is-featured .hf-business-plan__price strong {
    color: var(--hf-lime-300);
}

.hf-business-plan__price span,
.hf-business-plan > p:not(.hf-kicker, .hf-business-plan__price) {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-business-plan.is-featured > p:not(.hf-kicker, .hf-business-plan__price),
.hf-business-plan.is-featured .hf-business-plan__price span {
    color: var(--hf-stone-500);
}

.hf-business-plan__limit {
    display: block;
    margin: auto 0 var(--hf-space-5);
    padding-top: var(--hf-space-5);
    border-top: 1px solid var(--hf-stone-200);
    font-size: var(--hf-text-sm);
}

.hf-business-plan.is-featured .hf-business-plan__limit {
    border-color: rgba(255, 255, 255, .1);
}

.hf-payment-request {
    margin-top: var(--hf-space-6);
}

@media (max-width: 960px) {
    .hf-business-grid,
    .hf-business-plans__grid {
        grid-template-columns: 1fr;
    }

    .hf-business-summary,
    .hf-connect-card {
        min-height: auto;
    }
}

/* 0.4.0 — persistent light/dark theme with AA-oriented text contrast */
.hf-theme-toggle {
    position: fixed;
    z-index: 90;
    top: 1.65rem;
    right: 1.75rem;
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    padding: .2rem;
    border: 1px solid var(--hf-stone-300);
    border-radius: 999px;
    color: var(--hf-ink-900);
    background: var(--hf-surface);
    box-shadow: var(--hf-shadow);
    cursor: pointer;
}

body.habitfit-app-page .hf-topbar {
    padding-right: 6rem;
}

.hf-theme-toggle::before {
    position: absolute;
    z-index: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--hf-lime-400);
    content: "";
    transform: translateX(-.6rem);
    transition: transform var(--hf-ease);
}

:root[data-theme="dark"] .hf-theme-toggle::before {
    transform: translateX(.6rem);
}

.hf-theme-toggle span {
    position: relative;
    z-index: 1;
    color: #111512;
    font-size: .72rem;
    line-height: 1;
}

.hf-theme-toggle:focus-visible {
    outline: 3px solid var(--hf-lime-400);
    outline-offset: 3px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --hf-ink-900: #f3f6f1;
    --hf-ink-800: #e3e9e3;
    --hf-ink-700: #d1dad2;
    --hf-stone-700: #d6ded7;
    --hf-stone-600: #bec8c0;
    --hf-stone-500: #a6b1a8;
    --hf-stone-300: #465249;
    --hf-stone-200: #354038;
    --hf-stone-100: #222b24;
    --hf-stone-50: #101511;
    --hf-surface: #171e18;
    --hf-error: #ff8e84;
    --hf-error-bg: #3a1d1b;
    --hf-warning: #f1c464;
    --hf-warning-bg: #332913;
    --hf-info: #8fc6ff;
    --hf-info-bg: #172c3e;
    --hf-success: #9bd5a7;
    --hf-success-bg: #183222;
    --hf-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

:root[data-theme="dark"],
:root[data-theme="dark"] body.habitfit-app-page,
:root[data-theme="dark"] .hf-main {
    color: var(--hf-ink-900);
    background: var(--hf-stone-50);
}

:root[data-theme="dark"] .hf-topbar {
    border-color: var(--hf-stone-200);
    background: rgba(16, 21, 17, .9);
}

:root[data-theme="dark"] .hf-sidebar,
:root[data-theme="dark"] .hf-hero,
:root[data-theme="dark"] .hf-boot,
:root[data-theme="dark"] .hf-fatal,
:root[data-theme="dark"] .hf-auth__brand,
:root[data-theme="dark"] .hf-business-summary,
:root[data-theme="dark"] .hf-business-plan.is-featured,
:root[data-theme="dark"] .hf-toast {
    color: #f7faf6;
    background-color: #0d110f;
}

:root[data-theme="dark"] .hf-hero,
:root[data-theme="dark"] .hf-business-summary {
    background:
        radial-gradient(circle at 82% 12%, rgba(181, 229, 29, .19), transparent 28rem),
        #0d110f;
}

:root[data-theme="dark"] .hf-progress::before,
:root[data-theme="dark"] .hf-wordmark__mark,
:root[data-theme="dark"] .hf-business-plan.is-featured,
:root[data-theme="dark"] .hf-toast {
    background: #111512;
}

:root[data-theme="dark"] .hf-wordmark,
:root[data-theme="dark"] .hf-wordmark__mark,
:root[data-theme="dark"] .hf-sidebar__org strong,
:root[data-theme="dark"] .hf-sidebar__footer strong,
:root[data-theme="dark"] .hf-nav__item:hover,
:root[data-theme="dark"] .hf-hero,
:root[data-theme="dark"] .hf-boot__mark,
:root[data-theme="dark"] .hf-fatal h1,
:root[data-theme="dark"] .hf-auth__brand,
:root[data-theme="dark"] .hf-business-summary,
:root[data-theme="dark"] .hf-business-plan.is-featured,
:root[data-theme="dark"] .hf-toast {
    color: #f7faf6;
}

:root[data-theme="dark"] .hf-sidebar,
:root[data-theme="dark"] .hf-hero__copy > p:not(.hf-kicker),
:root[data-theme="dark"] .hf-boot,
:root[data-theme="dark"] .hf-fatal,
:root[data-theme="dark"] .hf-auth__brand > div > p:last-child {
    color: var(--hf-stone-600);
}

:root[data-theme="dark"] .hf-sidebar__avatar,
:root[data-theme="dark"] .hf-client-avatar,
:root[data-theme="dark"] .hf-specialty.is-selected .hf-specialty__icon,
:root[data-theme="dark"] .hf-specialty.is-selected .hf-specialty__check,
:root[data-theme="dark"] .hf-training-step.is-complete .hf-training-step__index,
:root[data-theme="dark"] .hf-business-plan__badge {
    color: #111512;
}

:root[data-theme="dark"] .hf-auth__form {
    background: var(--hf-stone-50);
}

:root[data-theme="dark"] .hf-button--secondary,
:root[data-theme="dark"] .hf-metric,
:root[data-theme="dark"] .hf-panel,
:root[data-theme="dark"] .hf-form-panel,
:root[data-theme="dark"] .hf-search,
:root[data-theme="dark"] .hf-clients-table,
:root[data-theme="dark"] .hf-field input,
:root[data-theme="dark"] .hf-field select,
:root[data-theme="dark"] .hf-field textarea,
:root[data-theme="dark"] .hf-profile-badge,
:root[data-theme="dark"] .hf-specialty,
:root[data-theme="dark"] .hf-business-plans,
:root[data-theme="dark"] .hf-auth .input,
:root[data-theme="dark"] .hf-theme-toggle {
    color: var(--hf-ink-900);
    border-color: var(--hf-stone-200);
    background: var(--hf-surface);
}

:root[data-theme="dark"] .hf-clients-table__head,
:root[data-theme="dark"] .hf-metric__icon,
:root[data-theme="dark"] .hf-status,
:root[data-theme="dark"] .hf-empty__icon,
:root[data-theme="dark"] .hf-connect-status,
:root[data-theme="dark"] .hf-business-plan,
:root[data-theme="dark"] .hf-button--ghost:hover {
    background: var(--hf-stone-100);
}

:root[data-theme="dark"] .hf-business-plan.is-featured {
    border-color: #4a574d;
}

:root[data-theme="dark"] .hf-business-plan__price strong {
    color: var(--hf-lime-300);
}

:root[data-theme="dark"] .hf-mobile-nav {
    border-color: var(--hf-stone-200);
    background: rgba(16, 21, 17, .97);
}

@media (max-width: 860px) {
    .hf-theme-toggle {
        top: .9rem;
        right: 1rem;
    }
}

/* Exercise library */
.hf-exercise-library {
    --hf-exercise-card-min: 14.5rem;
}

.hf-exercise-source {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hf-space-4);
    padding: var(--hf-space-5) var(--hf-space-6);
    border: 1px solid var(--hf-stone-200);
    border-left: 4px solid var(--hf-lime-500);
    border-radius: var(--hf-radius-md);
    background:
        linear-gradient(110deg, rgba(181, 229, 29, .12), transparent 42%),
        var(--hf-surface);
}

.hf-exercise-source__mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--hf-radius-sm);
    color: var(--hf-ink-950);
    background: var(--hf-lime-400);
}

.hf-exercise-source strong,
.hf-exercise-source p {
    display: block;
}

.hf-exercise-source p {
    max-width: 65ch;
    margin: var(--hf-space-1) 0 0;
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
}

.hf-exercise-toolbar {
    display: grid;
    grid-template-columns: minmax(17rem, 1.45fr) repeat(4, minmax(8.5rem, .65fr)) auto;
    align-items: end;
    gap: var(--hf-space-3);
    padding: var(--hf-space-4);
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    background: var(--hf-surface);
    box-shadow: var(--hf-shadow);
}

.hf-search--exercise {
    width: 100%;
    min-height: 3.25rem;
}

.hf-filter {
    display: grid;
    gap: var(--hf-space-2);
}

.hf-filter > span {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
    font-weight: 750;
}

.hf-filter select {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 2.25rem 0 var(--hf-space-3);
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-sm);
    outline: 0;
    color: var(--hf-ink-900);
    background: var(--hf-stone-50);
    cursor: pointer;
}

.hf-filter select:hover {
    border-color: var(--hf-stone-500);
}

.hf-filter-reset {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: var(--hf-space-2);
    padding: 0 var(--hf-space-3);
    border: 0;
    border-radius: var(--hf-radius-sm);
    color: var(--hf-stone-600);
    background: transparent;
    font-size: var(--hf-text-xs);
    font-weight: 750;
    cursor: pointer;
    transition: color var(--hf-ease), background var(--hf-ease);
}

.hf-filter-reset:hover {
    color: var(--hf-ink-900);
    background: var(--hf-stone-100);
}

.hf-exercise-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hf-space-4);
    margin-bottom: calc(var(--hf-space-3) * -1);
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
}

.hf-exercise-results-heading strong {
    color: var(--hf-ink-900);
}

.hf-exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--hf-exercise-card-min), 1fr));
    gap: var(--hf-space-4);
}

.hf-exercise-card {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-md);
    color: var(--hf-ink-900);
    background: var(--hf-surface);
    box-shadow: 0 9px 26px rgba(14, 20, 16, .045);
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--hf-ease),
        box-shadow var(--hf-ease),
        transform var(--hf-ease);
}

.hf-exercise-card:hover {
    border-color: var(--hf-lime-500);
    box-shadow: 0 16px 35px rgba(14, 20, 16, .1);
    transform: translateY(-3px);
}

.hf-exercise-card__media {
    position: relative;
    display: grid;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 25%, rgba(181, 229, 29, .2), transparent 40%),
        var(--hf-stone-100);
}

.hf-exercise-card__media::after {
    position: absolute;
    right: var(--hf-space-3);
    bottom: 0;
    left: var(--hf-space-3);
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--hf-lime-500);
    content: "";
}

.hf-exercise-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 240ms ease-out;
}

.hf-exercise-card:hover .hf-exercise-card__media img {
    transform: scale(1.025);
}

.hf-exercise-card__placeholder {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid var(--hf-stone-300);
    border-radius: 50%;
    color: var(--hf-stone-600);
}

.hf-exercise-card__placeholder .hf-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.hf-exercise-card__level {
    position: absolute;
    top: var(--hf-space-3);
    right: var(--hf-space-3);
    padding: .35rem .55rem;
    border: 1px solid rgba(13, 17, 15, .12);
    border-radius: 999px;
    color: var(--hf-ink-900);
    background: rgba(251, 252, 250, .92);
    font-size: .6875rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.hf-exercise-card__body {
    display: grid;
    gap: var(--hf-space-2);
    padding: var(--hf-space-4);
}

.hf-exercise-card__meta {
    color: var(--hf-stone-600);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hf-exercise-card__body > strong {
    min-height: 2.7rem;
    font-size: var(--hf-text-base);
    line-height: 1.35;
}

.hf-exercise-card__muscles,
.hf-exercise-card__equipment {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--hf-space-2);
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
}

.hf-exercise-card__muscles .hf-icon {
    width: 1rem;
    height: 1rem;
    color: var(--hf-lime-500);
}

.hf-exercise-card__equipment {
    justify-content: space-between;
    margin-top: var(--hf-space-2);
    padding-top: var(--hf-space-3);
    border-top: 1px solid var(--hf-stone-100);
    font-weight: 700;
}

.hf-exercise-card__equipment .hf-icon {
    width: 1rem;
    transition: transform var(--hf-ease);
}

.hf-exercise-card:hover .hf-exercise-card__equipment .hf-icon {
    transform: translateX(3px);
}

.hf-exercise-card--skeleton {
    min-height: 22rem;
    cursor: default;
}

.hf-exercise-card--skeleton > span,
.hf-exercise-card--skeleton > i {
    display: block;
    border-radius: var(--hf-radius-sm);
    background:
        linear-gradient(90deg, var(--hf-stone-100), var(--hf-stone-50), var(--hf-stone-100));
    background-size: 200% 100%;
    animation: hf-exercise-shimmer 1.35s linear infinite;
}

.hf-exercise-card--skeleton > span {
    height: 12rem;
    border-radius: 0;
}

.hf-exercise-card--skeleton > i {
    width: calc(100% - var(--hf-space-8));
    height: 1rem;
    margin: var(--hf-space-4);
}

.hf-exercise-card--skeleton > i:last-child {
    width: 55%;
    margin-top: 0;
}

@keyframes hf-exercise-shimmer {
    to {
        background-position: -200% 0;
    }
}

.hf-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hf-space-5);
}

.hf-pagination > span {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-sm);
}

.hf-pagination > span strong {
    color: var(--hf-ink-900);
}

.hf-icon--back {
    transform: rotate(180deg);
}

.hf-exercise-create {
    display: grid;
    grid-template-columns: minmax(16rem, .72fr) minmax(22rem, 1.28fr);
    gap: var(--hf-space-8);
    padding: var(--hf-space-8);
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-lg);
    background:
        linear-gradient(140deg, rgba(181, 229, 29, .11), transparent 38%),
        var(--hf-surface);
    box-shadow: var(--hf-shadow);
}

.hf-exercise-create__intro h2 {
    margin: var(--hf-space-2) 0 var(--hf-space-3);
    font-family: var(--hf-font-display);
    font-size: var(--hf-text-2xl);
    letter-spacing: -.045em;
    line-height: 1.05;
}

.hf-exercise-create__intro p:last-child {
    max-width: 38ch;
    margin: 0;
    color: var(--hf-stone-600);
}

.hf-exercise-create__form {
    display: grid;
    gap: var(--hf-space-4);
}

.hf-field > small,
.hf-field > span small {
    color: var(--hf-stone-600);
    font-size: var(--hf-text-xs);
    font-weight: 500;
}

.hf-exercise-dialog {
    width: min(68rem, calc(100vw - var(--hf-space-8)));
    max-height: calc(100vh - var(--hf-space-8));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--hf-stone-200);
    border-radius: var(--hf-radius-lg);
    color: var(--hf-ink-900);
    background: var(--hf-surface);
    box-shadow: 0 30px 90px rgba(13, 17, 15, .28);
}

.hf-exercise-dialog::backdrop {
    background: rgba(13, 17, 15, .72);
    backdrop-filter: blur(7px);
}

.hf-exercise-dialog__close {
    position: sticky;
    top: var(--hf-space-4);
    z-index: 3;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin: var(--hf-space-4) var(--hf-space-4) calc(var(--hf-space-4) * -1) auto;
    place-items: center;
    border: 1px solid var(--hf-stone-200);
    border-radius: 50%;
    color: var(--hf-ink-900);
    background: var(--hf-surface);
    box-shadow: var(--hf-shadow);
    cursor: pointer;
}

.hf-exercise-detail__grid {
    display: grid;
    grid-template-columns: minmax(18rem, .82fr) minmax(24rem, 1.18fr);
    min-height: 38rem;
}

.hf-exercise-detail__visual {
    position: sticky;
    top: 0;
    display: grid;
    height: min(44rem, calc(100vh - var(--hf-space-8)));
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 67% 27%, rgba(181, 229, 29, .24), transparent 36%),
        var(--hf-stone-100);
}

.hf-exercise-detail__visual > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hf-exercise-detail__visual > span {
    display: grid;
    width: 7rem;
    height: 7rem;
    place-items: center;
    border: 1px solid var(--hf-stone-300);
    border-radius: 50%;
    color: var(--hf-stone-600);
}

.hf-exercise-detail__visual > span .hf-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.hf-exercise-detail__performance {
    position: absolute;
    right: var(--hf-space-6);
    bottom: var(--hf-space-6);
    left: var(--hf-space-6);
    display: grid;
    grid-template-columns: 1.3fr .75fr .35fr;
    gap: var(--hf-space-2);
}

.hf-exercise-detail__performance span {
    height: 4px;
    border-radius: 999px;
    background: var(--hf-lime-500);
}

.hf-exercise-detail__performance span:nth-child(2) {
    opacity: .65;
}

.hf-exercise-detail__performance span:nth-child(3) {
    opacity: .3;
}

.hf-exercise-detail__content {
    display: grid;
    align-content: start;
    gap: var(--hf-space-6);
    padding: var(--hf-space-10);
}

.hf-exercise-detail__content h2 {
    max-width: 15ch;
    margin: calc(var(--hf-space-3) * -1) 0 0;
    font-family: var(--hf-font-display);
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -.055em;
    line-height: .98;
}

.hf-exercise-detail__content h3 {
    margin: 0 0 var(--hf-space-3);
    font-size: var(--hf-text-base);
}

.hf-exercise-detail__content section {
    padding-top: var(--hf-space-5);
    border-top: 1px solid var(--hf-stone-200);
}

.hf-exercise-detail__content ol {
    display: grid;
    gap: var(--hf-space-3);
    margin: 0;
    padding-left: 1.4rem;
    color: var(--hf-stone-700);
    line-height: 1.65;
}

.hf-exercise-detail__tags,
.hf-muscle-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hf-space-2);
}

.hf-exercise-detail__tags span,
.hf-muscle-list span {
    padding: .45rem .7rem;
    border: 1px solid var(--hf-stone-200);
    border-radius: 999px;
    color: var(--hf-stone-700);
    background: var(--hf-stone-50);
    font-size: var(--hf-text-xs);
    font-weight: 700;
}

.hf-muscle-list span:first-child {
    border-color: rgba(157, 203, 17, .45);
    color: var(--hf-ink-900);
    background: rgba(181, 229, 29, .14);
}

.hf-language-note {
    margin: 0;
    padding: var(--hf-space-4);
    border-left: 3px solid var(--hf-warning);
    border-radius: 0 var(--hf-radius-sm) var(--hf-radius-sm) 0;
    color: var(--hf-warning);
    background: var(--hf-warning-bg);
    font-size: var(--hf-text-sm);
}

.hf-exercise-detail__loading {
    display: grid;
    min-height: 28rem;
    place-items: center;
    align-content: center;
    gap: var(--hf-space-4);
    color: var(--hf-stone-600);
}

.hf-exercise-detail__loading .hf-spinner {
    width: 2rem;
    height: 2rem;
}

.hf-exercise-card:focus-visible,
.hf-filter select:focus-visible,
.hf-filter-reset:focus-visible,
.hf-exercise-dialog__close:focus-visible {
    outline: 3px solid var(--hf-lime-500);
    outline-offset: 3px;
}

:root[data-theme="dark"] .hf-exercise-source,
:root[data-theme="dark"] .hf-exercise-toolbar,
:root[data-theme="dark"] .hf-exercise-card,
:root[data-theme="dark"] .hf-exercise-create,
:root[data-theme="dark"] .hf-exercise-dialog,
:root[data-theme="dark"] .hf-exercise-dialog__close {
    color: var(--hf-ink-900);
    border-color: var(--hf-stone-200);
    background-color: var(--hf-surface);
}

:root[data-theme="dark"] .hf-filter select,
:root[data-theme="dark"] .hf-exercise-card__media,
:root[data-theme="dark"] .hf-exercise-detail__visual,
:root[data-theme="dark"] .hf-exercise-detail__tags span,
:root[data-theme="dark"] .hf-muscle-list span {
    color: var(--hf-ink-900);
    border-color: var(--hf-stone-200);
    background-color: var(--hf-stone-100);
}

:root[data-theme="dark"] .hf-exercise-card__level {
    color: #111512;
    background: rgba(247, 250, 246, .92);
}

:root[data-theme="dark"] .hf-exercise-dialog::backdrop {
    background: rgba(0, 0, 0, .78);
}

@media (max-width: 1280px) {
    .hf-exercise-toolbar {
        grid-template-columns: minmax(16rem, 1fr) repeat(2, minmax(9rem, .55fr));
    }

    .hf-filter-reset {
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .hf-mobile-nav {
        grid-template-columns: repeat(5, 1fr);
    }

    .hf-exercise-create,
    .hf-exercise-detail__grid {
        grid-template-columns: 1fr;
    }

    .hf-exercise-detail__visual {
        position: relative;
        height: min(26rem, 50vh);
    }

    .hf-exercise-dialog {
        width: calc(100vw - var(--hf-space-5));
        max-height: calc(100vh - var(--hf-space-5));
    }
}

@media (max-width: 700px) {
    .hf-exercise-source {
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--hf-space-4);
    }

    .hf-exercise-source .hf-chip {
        grid-column: 2;
        justify-self: start;
    }

    .hf-exercise-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .hf-search--exercise {
        grid-column: 1 / -1;
    }

    .hf-filter-reset {
        grid-column: 1 / -1;
    }

    .hf-exercise-create {
        gap: var(--hf-space-6);
        padding: var(--hf-space-5);
    }

    .hf-exercise-detail__content {
        padding: var(--hf-space-6);
    }
}

@media (max-width: 480px) {
    .hf-exercise-library {
        --hf-exercise-card-min: 100%;
    }

    .hf-exercise-toolbar {
        grid-template-columns: 1fr;
    }

    .hf-search--exercise,
    .hf-filter-reset {
        grid-column: 1;
    }

    .hf-exercise-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--hf-space-1);
    }

    .hf-pagination {
        justify-content: space-between;
        gap: var(--hf-space-2);
    }

    .hf-pagination .hf-button {
        padding-inline: var(--hf-space-3);
    }

    .hf-exercise-detail__content {
        padding: var(--hf-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-exercise-card--skeleton > span,
    .hf-exercise-card--skeleton > i {
        animation: none;
    }

    .hf-exercise-card,
    .hf-exercise-card__media img,
    .hf-exercise-card__equipment .hf-icon {
        transition: none;
    }
}