/* Consolidated styles for landing + app pages */
/* ===== Landing (from index.html) ===== */
/* ─── Reset ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}

/* ─── Design Tokens ──────────────────────────────────── */
:root {
    --color-primary-sage: #5f7a61;
    --color-sage-hover: #4e6750;
    --color-sage-tint: rgba(95, 122, 97, 0.09);
    --color-adobe-red: #dc2626;
    --radius-container: 12px;
    --radius-action: 0.5rem;
    --font-main: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --bg: #faf9f6;
    --primary: #5f7a61;
    --primary-dark: #4e6750;
    --accent-light: rgba(95, 122, 97, 0.09);
    --accent-mid: rgba(95, 122, 97, 0.17);
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --text: #2d3436;
    --text-secondary: rgba(45, 52, 54, 0.6);
    --text-faint: rgba(45, 52, 54, 0.38);
    --rule: rgba(45, 52, 54, 0.08);
    --max-w: 660px;
    --gap: 112px;
    --gap-sm: 72px;
}

/* ─── Base ───────────────────────────────────────────── */
body {
    font-family: var(--font-main);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
}

/* ─── Nav ────────────────────────────────────────────── */
nav {
    padding: 28px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-w);
    margin: 0 auto;
}

.logo {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}
.logo span {
    color: var(--primary);
}

/* ─── Buttons ────────────────────────────────────────── */
.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--radius-action);
    border: none;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.1px;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.btn:hover {
    background: var(--primary-dark);
}

.btn-lg {
    font-size: 15px;
    padding: 14px 32px;
}

.std-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-action);
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
}

.std-btn:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.22);
    outline-offset: 2px;
}

.std-btn:disabled {
    cursor: not-allowed;
}

.std-btn-primary {
    background: var(--color-primary-sage);
    border-color: var(--color-primary-sage);
    color: #fff;
}

.std-btn-primary:hover {
    background: var(--color-sage-hover);
    border-color: var(--color-sage-hover);
}

.std-btn-primary:disabled {
    background: #c7d0c7;
    border-color: #c7d0c7;
    color: #ffffff;
    opacity: 0.75;
}

.std-btn-secondary {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}

.std-btn-secondary:hover {
    background: #f9fafb;
}

/* ─── Hero ───────────────────────────────────────────── */
.hero {
    padding: 80px 0 96px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(36px, 6vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--text);
    margin-bottom: 24px;
}

.hero-sub {
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 440px;
    margin: 0 auto 40px;
    font-weight: 400;
}

.hero-note {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: 0.2px;
}

/* ─── Mock UI Card ───────────────────────────────────── */
.mock-wrap {
    margin-top: 64px;
    display: flex;
    justify-content: center;
}

.mock-card {
    background: #fff;
    border-radius: 4px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 340px;
    box-shadow:
            0 1px 3px rgba(45, 52, 54, 0.06),
            0 6px 24px rgba(45, 52, 54, 0.06);
    text-align: left;
}

.mock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mock-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.mock-week {
    font-size: 11px;
    color: var(--text-faint);
}

.mock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
}
.mock-row:last-of-type {
    border-bottom: none;
}
.mock-row-label {
    color: var(--text-secondary);
}
.mock-row-val {
    font-weight: 600;
    color: var(--text);
}

.mock-divider {
    height: 1px;
    background: var(--rule);
    margin: 6px 0 16px;
}

.mock-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.mock-total-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.mock-total-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.8px;
}

.mock-confirm {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
}
.mock-confirm i {
    font-size: 11px;
}

/* ─── Section Label ──────────────────────────────────── */
.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-label::after {
    content: "";
    display: block;
    height: 1px;
    width: 28px;
    background: var(--primary);
    opacity: 0.4;
}

/* ─── Problem ────────────────────────────────────────── */
.problem {
    padding: var(--gap) 0;
}

.problem h2 {
    font-size: clamp(24px, 4.5vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 52px;
    max-width: 480px;
}

.thought-list {
    display: flex;
    flex-direction: column;
}

.thought {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
}
.thought:first-child {
    border-top: 1px solid var(--rule);
}

.thought-icon {
    width: 38px;
    height: 38px;
    background: var(--accent-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    margin-top: 2px;
}

.thought-text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text);
    font-style: italic;
    padding-top: 8px;
}

/* ─── Solution ───────────────────────────────────────── */
.solution {
    padding: var(--gap) 0;
}

.solution h2 {
    font-size: clamp(24px, 4.5vw, 32px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
}

.solution-list {
    display: flex;
    flex-direction: column;
}

.solution-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}
.solution-item:first-child {
    border-top: 1px solid var(--rule);
}

.solution-icon {
    width: 36px;
    height: 36px;
    background: var(--accent-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 13px;
    margin-top: 2px;
}

.solution-item p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    padding-top: 7px;
}

/* ─── Features ───────────────────────────────────────── */
.features {
    padding: var(--gap) 0;
}

.features > .container > h2 {
    font-size: clamp(24px, 4.5vw, 32px);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
}

.feature-primary {
    padding: 36px 32px;
    background: var(--accent-light);
    margin-bottom: 20px;
    border-left: 2px solid var(--primary);
}

.feature-primary-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.feature-primary h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.25;
}

.feature-primary p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 420px;
}

.features-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

@media (min-width: 480px) {
    .features-secondary {
        grid-template-columns: 1fr 1fr;
    }
}

.feature-card {
    background: var(--accent-light);
    padding: 24px 22px 22px;
    transition: background 0.2s ease;
}
.feature-card:hover {
    background: var(--accent-mid);
}

.feature-card-icon {
    color: var(--primary);
    font-size: 14px;
    margin-bottom: 13px;
    opacity: 0.85;
}

.feature-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.feature-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ─── Pricing ────────────────────────────────────────── */
.pricing {
    padding: var(--gap) 0;
}

.pricing h2 {
    font-size: clamp(24px, 4.5vw, 32px);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
}

.pricing-card {
    background: #fff;
    border-radius: 4px;
    padding: 40px 36px;
    box-shadow:
            0 1px 3px rgba(45, 52, 54, 0.05),
            0 8px 28px rgba(45, 52, 54, 0.06);
    max-width: 420px;
}

.pricing-free-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.3px;
    margin-bottom: 24px;
}
.pricing-free-tag i {
    font-size: 11px;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 8px;
}
.pricing-dollar {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}
.pricing-number {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -3px;
    color: var(--text);
    line-height: 1;
}
.pricing-period {
    font-size: 15px;
    color: var(--text-secondary);
    align-self: flex-end;
    padding-bottom: 8px;
    margin-left: 4px;
}

.pricing-after {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.55;
}
.pricing-after strong {
    color: var(--text);
    font-weight: 600;
}

.pricing-divider {
    height: 1px;
    background: var(--rule);
    margin-bottom: 28px;
}

.pricing-list {
    list-style: none;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pricing-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text);
}
.pricing-list li i {
    color: var(--primary);
    font-size: 12px;
    width: 16px;
    flex-shrink: 0;
}

.pricing-cta-wrap {
    margin-bottom: 16px;
}
.pricing-cta-wrap .btn {
    width: 100%;
    text-align: center;
}

.pricing-disclaimer {
    font-size: 12px;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pricing-disclaimer i {
    font-size: 10px;
}

/* ─── Final CTA ──────────────────────────────────────── */
.final-cta {
    padding: var(--gap) 0 112px;
    text-align: center;
}

.final-cta h2 {
    font-size: clamp(26px, 5.5vw, 38px);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 18px;
}

.final-cta p {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0 auto 36px;
    max-width: 340px;
    line-height: 1.6;
}

.final-cta-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-faint);
    letter-spacing: 0.1px;
}

/* ─── Divider ────────────────────────────────────────── */
.divider {
    height: 1px;
    background: var(--rule);
    max-width: var(--max-w);
    margin: 0 auto;
}

/* ─── Footer ─────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--rule);
    padding: 32px 28px;
}
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-copy {
    font-size: 13px;
    color: var(--text-faint);
}
.footer-links {
    display: flex;
    gap: 24px;
}
.footer-links a {
    font-size: 13px;
    color: var(--text-faint);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: var(--text);
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 420px) {
    :root {
        --gap: var(--gap-sm);
    }
    .btn-lg {
        width: 100%;
        text-align: center;
    }
    .pricing-card {
        padding: 32px 24px;
    }
    .feature-primary {
        padding: 28px 22px;
    }
}

@media (min-width: 640px) {
    .hero {
        padding: 100px 0 112px;
    }
}

/* ===== App Shared ===== */
:root {
    --surface: #ffffff;
    --text-2: rgba(45, 52, 54, 0.6);
    --text-3: rgba(45, 52, 54, 0.36);
    --nav-h: 62px;
    --page-px: 22px;
    --max-w: 430px;
}

.app-page {
    font-family:
            "Inter",
            -apple-system,
            sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-bottom: calc(var(--nav-h) + 16px);
}

.app-page a {
    color: inherit;
    text-decoration: none;
}
.app-page button {
    font-family: inherit;
}

.app-page .top-bar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--page-px);
    max-width: var(--max-w);
    margin: 0 auto;
    border-bottom: 1px solid var(--rule);
}

.app-page .top-bar-logo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}

.app-page .top-bar-action {
    color: var(--text-3);
    font-size: 17px;
    padding: 6px;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    line-height: 1;
}

.app-page .top-bar-action:hover {
    color: var(--text);
}

.app-page .logo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}

.app-page .logo em {
    color: var(--primary);
    font-style: normal;
}

.app-page .top-action {
    color: var(--text-3);
    font-size: 17px;
    padding: 6px;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    line-height: 1;
}

.app-page .top-action:hover {
    color: var(--text);
}

.app-page .page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--page-px) 32px;
}

.app-page .btn {
    display: block;
    width: 100%;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 20px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1px;
    transition: background 0.2s;
}

.app-page .btn:hover {
    background: var(--primary-dark);
}

.app-page .btn.is-paid {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--accent-mid);
}

.app-page .btn.is-paid:hover {
    background: var(--accent-light);
}

.app-page .btn-danger {
    color: #b85c5c;
    background: transparent;
    border: 1px solid rgba(184, 92, 92, 0.25);
}

.app-page .btn-danger:hover {
    background: rgba(184, 92, 92, 0.08);
}

.app-page .form-group {
    margin-bottom: 12px;
}

.app-page .form-label {
    display: block;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 8px;
}

.app-page .form-input,
.app-page .log-input {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 11px 12px;
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.2s;
}

.app-page .form-input:focus,
.app-page .log-input:focus {
    border-color: var(--primary);
}

.app-page .form-input::placeholder,
.app-page .log-input::placeholder {
    color: var(--text-3);
}

.app-page .toast {
    position: fixed;
    bottom: calc(var(--nav-h) + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--text);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    opacity: 0;
    pointer-events: none;
    transition:
            opacity 0.2s,
            transform 0.2s;
    white-space: nowrap;
    z-index: 200;
    letter-spacing: 0.1px;
}

.app-page .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.app-page .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: var(--bg);
    border-top: 1px solid var(--rule);
    z-index: 100;
    padding: 0;
    max-width: none;
    margin: 0;
    display: block;
}

.app-page .bottom-nav-inner {
    display: flex;
    max-width: var(--max-w);
    margin: 0 auto;
    height: 100%;
}

.app-page .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
    padding-bottom: 4px;
}

.app-page .nav-item i {
    font-size: 18px;
    line-height: 1;
}
.app-page .nav-item.active,
.app-page .nav-item:hover {
    color: var(--primary);
}

.app-page .section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.app-page .section-hd-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-3);
}

.app-page .section-hd-link {
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
}

.app-page .section-hd-link:hover {
    text-decoration: underline;
}

.app-page .entry-list {
    display: flex;
    flex-direction: column;
}

.app-page .entry-row {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
    gap: 10px;
}

.app-page .entry-row:first-child {
    border-top: 1px solid var(--rule);
}

.app-page .entry-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-mid);
    flex-shrink: 0;
    margin-top: 1px;
}

.app-page .entry-info {
    flex: 1;
    min-width: 0;
}

.app-page .entry-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-page .entry-sub,
.app-page .entry-hours-label {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 1px;
}

.app-page .entry-pay {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    text-align: right;
}

.app-page .entry-del,
.app-page .entry-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 13px;
    padding: 4px 2px 4px 6px;
    transition: color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.app-page .entry-del:hover,
.app-page .entry-delete:hover {
    color: #b85c5c;
}

.app-page .empty,
.app-page .empty-state {
    padding: 32px 0 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.7;
    border-top: 1px solid var(--rule);
}

.app-page .empty-state.empty-state-panel {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.45rem;
    border: 1px solid rgba(95, 122, 97, 0.14);
    border-radius: var(--radius-action);
    background: rgba(95, 122, 97, 0.045);
    color: #566273;
    text-align: center;
}

.app-page .activity-empty .empty-state.empty-state-panel {
    margin-top: 0.45rem;
    margin-bottom: 0.45rem;
}

.app-page .empty-state-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(95, 122, 97, 0.12);
    color: #4e6750;
    font-size: 1.14rem;
    box-shadow: inset 0 0 0 1px rgba(95, 122, 97, 0.1);
}

.app-page .empty-state-content {
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    max-width: 34rem;
}

.app-page .empty-state-title {
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 600;
}

.app-page .empty-state-copy {
    color: #6b7280;
    font-size: 0.86rem;
    line-height: 1.45;
    font-weight: 500;
}

.app-page .empty-state-action {
    width: fit-content;
    margin-top: 0.28rem;
    font-size: 0.86rem;
    font-weight: 600;
}

@media (max-width: 540px) {
    .app-page .empty-state.empty-state-panel {
        padding: 1.15rem;
    }

    .app-page .empty-state-icon {
        width: 2.65rem;
        height: 2.65rem;
        font-size: 1.04rem;
    }

    .app-page .empty-state-action {
        justify-self: center;
    }
}

/* ===== Dashboard Page ===== */
.dashboard-page .pay-card {
    background: var(--surface);
    margin: 16px 0;
    padding: 28px 24px 24px;
    box-shadow:
            0 1px 2px rgba(45, 52, 54, 0.04),
            0 4px 20px rgba(45, 52, 54, 0.07);
}

.dashboard-page .profile-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.dashboard-page .nanny-avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(45, 52, 54, 0.09);
}

.dashboard-page .nanny-meta {
    min-width: 0;
    flex: 1;
}

.dashboard-page .nanny-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-page .nanny-name {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.2px;
    font-weight: 600;
}

.dashboard-page .verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 4px 8px;
}

.dashboard-page .verified-badge i {
    font-size: 11px;
}

.dashboard-page .nanny-context {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}

.dashboard-page .calendar-card {
    background: var(--surface);
    padding: 16px 16px 14px;
    box-shadow:
            0 1px 2px rgba(45, 52, 54, 0.04),
            0 4px 20px rgba(45, 52, 54, 0.07);
}

.dashboard-page .calendar-header {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.dashboard-page .calendar-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--accent-light);
    gap: 2px;
}

.dashboard-page .mode-btn {
    border: none;
    background: transparent;
    padding: 10px 8px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
    min-height: 42px;
    cursor: pointer;
}

.dashboard-page .mode-btn.active {
    background: #fff;
    color: var(--primary);
}

.dashboard-page .calendar-nav {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 4px;
}

.dashboard-page .calendar-nav-btn {
    border: none;
    background: var(--accent-light);
    color: var(--text);
    min-height: 40px;
    cursor: pointer;
}

.dashboard-page .calendar-label {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.1px;
}

.dashboard-page .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.dashboard-page .calendar-weekdays span {
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.dashboard-page .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.dashboard-page .calendar-day {
    border: 1px solid rgba(45, 52, 54, 0.05);
    background: #fff;
    min-height: 52px;
    padding: 8px 4px 6px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    cursor: pointer;
    transition:
            background 0.2s ease,
            border-color 0.2s ease;
}

.dashboard-page .calendar-day.is-range {
    background: rgba(95, 122, 97, 0.08);
    border-color: rgba(95, 122, 97, 0.16);
}

.dashboard-page .calendar-day.is-outside {
    opacity: 0.42;
}

.dashboard-page .calendar-day.is-selected {
    border-color: rgba(95, 122, 97, 0.34);
    background: rgba(95, 122, 97, 0.18);
}

.dashboard-page .calendar-day.is-selected .calendar-day-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(95, 122, 97, 0.2);
}

.dashboard-page .calendar-day.is-today .calendar-day-num {
    color: var(--primary-dark);
    font-weight: 600;
}

.dashboard-page .calendar-day-num {
    font-size: 13px;
    line-height: 1;
    color: var(--text);
}

.dashboard-page .calendar-day-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.dashboard-page .calendar-day-dot.status-paid {
    background: #3f6a45;
}

.dashboard-page .calendar-day-dot.status-pending {
    background: #2c6fb8;
}

.dashboard-page .calendar-day-dot.status-upcoming {
    background: #7f878b;
}

.dashboard-page .pay-card-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
}

.dashboard-page .pay-card-week {
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 20px;
}

.dashboard-page .pay-amount {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -2.5px;
    line-height: 1;
    color: var(--text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.dashboard-page .pay-amount.is-paid {
    color: var(--primary);
}

.dashboard-page .pay-breakdown-wrap {
    margin-bottom: 16px;
}

.dashboard-page .breakdown-toggle {
    border: none;
    background: transparent;
    color: var(--text-2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
}

.dashboard-page .breakdown-toggle i {
    transition: transform 0.2s ease;
}

.dashboard-page .breakdown-toggle.open i {
    transform: rotate(180deg);
}

.dashboard-page .breakdown-panel {
    display: none;
    margin-top: 2px;
    border-top: 1px solid var(--rule);
    padding-top: 10px;
}

.dashboard-page .breakdown-panel.open {
    display: block;
}

.dashboard-page .breakdown-list {
    background: rgba(45, 52, 54, 0.04);
    padding: 10px 10px 8px;
}

.dashboard-page .breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text);
    padding: 6px 0;
}

.dashboard-page .breakdown-item-sub {
    font-size: 11px;
    color: var(--text-3);
    padding-bottom: 6px;
}

.dashboard-page .breakdown-item.is-total {
    margin-top: 2px;
    border-top: 1px solid rgba(45, 52, 54, 0.12);
    padding-top: 9px;
    font-weight: 600;
}

.dashboard-page .pay-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.dashboard-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    letter-spacing: 0.1px;
    transition:
            background 0.2s,
            color 0.2s;
}

.dashboard-page .status-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.dashboard-page .status-badge.unpaid {
    background: rgba(45, 52, 54, 0.06);
    color: var(--text-2);
}

.dashboard-page .status-badge.paid {
    background: var(--accent-light);
    color: var(--primary);
}

.dashboard-page .pay-rate-label {
    font-size: 13px;
    color: var(--text-3);
    font-weight: 500;
}

.dashboard-page .paid-on {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    margin-top: 10px;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 500;
}

.dashboard-page .paid-on i {
    color: var(--primary);
    font-size: 12px;
}

.dashboard-page .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 24px;
}

.dashboard-page .stat-cell {
    background: var(--accent-light);
    padding: 18px 16px 16px;
}

.dashboard-page .stat-val {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 5px;
}

.dashboard-page .stat-lbl {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.dashboard-page .log-hours-panel {
    background: var(--accent-light);
    padding: 14px;
    margin-bottom: 24px;
}

.dashboard-page .log-selected-date {
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 10px;
    font-weight: 500;
}

.dashboard-page .quick-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.dashboard-page .quick-hours-btn {
    border: none;
    background: #fff;
    color: var(--text-2);
    min-height: 42px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-page .quick-hours-btn.active {
    color: var(--primary);
    outline: 1px solid var(--accent-mid);
}

.dashboard-page .hours-stepper {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    gap: 6px;
    margin-bottom: 8px;
}

.dashboard-page .stepper-btn {
    border: none;
    background: #fff;
    min-height: 50px;
    font-size: 22px;
    color: var(--text);
    line-height: 1;
    cursor: pointer;
}

.dashboard-page .stepper-value {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    background: #fff;
    min-height: 50px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
}

.dashboard-page .log-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 11px 14px;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    line-height: 1;
}

.dashboard-page .log-btn:hover {
    background: var(--primary-dark);
}

.dashboard-page .btn.is-paid,
.dashboard-page .btn:disabled {
    background: rgba(45, 52, 54, 0.06);
    color: rgba(45, 52, 54, 0.58);
    border: 1px solid rgba(45, 52, 54, 0.12);
    cursor: not-allowed;
}

.dashboard-page .btn.is-paid:hover,
.dashboard-page .btn:disabled:hover {
    background: rgba(45, 52, 54, 0.06);
}

.dashboard-page .log-hours-panel.is-collapsed,
.dashboard-page #log-hours-header.is-collapsed {
    display: none;
}

.dashboard-page .rate-editor {
    display: none;
    gap: 6px;
    margin-top: -12px;
    margin-bottom: 24px;
    align-items: center;
}

.dashboard-page .rate-editor.open {
    display: flex;
}
.dashboard-page .rate-editor .log-input {
    width: 110px;
    flex: none;
}
.dashboard-page .rate-editor .log-btn {
    font-size: 14px;
    padding: 11px 14px;
}

.dashboard-page .btn-cancel {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-3);
    padding: 11px 8px;
    transition: color 0.2s;
}

.dashboard-page .btn-cancel:hover {
    color: var(--text);
}

/* ===== Entries Page ===== */
.entries-page .add-form {
    background: var(--accent-light);
    padding: 20px 18px;
    margin-bottom: 32px;
}

.entries-page .add-form-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.entries-page .add-form-row {
    display: flex;
    gap: 8px;
}

.entries-page .add-form-row .form-input {
    flex: 1;
    min-width: 0;
}
.entries-page .add-form-row .btn {
    width: auto;
    padding: 13px 18px;
    flex-shrink: 0;
}

.entries-page .week-group {
    margin-bottom: 36px;
}

.entries-page .week-group-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--rule);
}

.entries-page .week-group-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.entries-page .week-group-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.entries-page .entry-row-left {
    flex: 1;
    min-width: 0;
}
.entries-page .entry-row-right {
    flex-shrink: 0;
    text-align: right;
}

/* ===== Payment Page ===== */
.payment-page .payment-summary-card {
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 36px;
}

.payment-page .psc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}

.payment-page .psc-amount {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 12px;
}

.payment-page .psc-amount.paid {
    color: var(--primary);
}

.payment-page .psc-breakdown {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.app-page .section-block {
    margin-top: 10px;
}

.app-page .section-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.app-page .section-block-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-3);
}

.payment-page .week-payment-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}

.payment-page .week-payment-row:first-child {
    border-top: 1px solid var(--rule);
}

.payment-page .wpr-range {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.payment-page .wpr-detail {
    font-size: 12px;
    color: var(--text-faint);
}

.payment-page .wpr-right {
    text-align: right;
    flex-shrink: 0;
}

.payment-page .wpr-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.payment-page .wpr-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

.payment-page .wpr-status.paid {
    color: var(--primary);
}
.payment-page .wpr-status.unpaid {
    color: var(--text-faint);
}

/* ===== Settings Page ===== */
.settings-page .settings-section {
    margin-bottom: 40px;
}

.settings-page .settings-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.settings-page .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}

.settings-page .settings-row:first-of-type {
    border-top: 1px solid var(--rule);
}

.settings-page .settings-row-label {
    font-size: 15px;
    color: var(--text);
}

.settings-page .settings-row-value {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-page .rate-save-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.settings-page .rate-save-row .btn {
    flex: 1;
}

/* ===== Auth + Thankyou Pages ===== */
.auth-page nav,
.thankyou-page nav {
    max-width: 760px;
}

.auth-nav-btn {
    padding: 9px 16px;
    font-size: 13px;
}

.auth-main,
.thankyou-main {
    min-height: calc(100vh - 96px);
    display: grid;
    place-items: center;
    padding: 24px 20px 48px;
}

.auth-card,
.thankyou-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    padding: 34px 30px 30px;
    box-shadow:
            0 1px 3px rgba(45, 52, 54, 0.06),
            0 8px 28px rgba(45, 52, 54, 0.08);
}

.auth-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
}

.auth-card h1,
.thankyou-card h1 {
    font-size: clamp(26px, 5vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
}

.auth-sub,
.thankyou-sub {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.auth-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--accent-light);
    margin-bottom: 18px;
}

.auth-switch-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 10px;
    cursor: pointer;
}

.auth-switch-btn.active {
    background: #fff;
    color: var(--primary);
}

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

.auth-page .form-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: -2px;
}

.auth-page .form-input {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 11px 12px;
    outline: none;
    transition: border-color 0.2s;
}

.auth-page .form-input:focus {
    border-color: var(--primary);
}

.auth-form.is-hidden {
    display: none;
}

.auth-submit {
    margin-top: 8px;
    width: 100%;
}

.auth-message {
    min-height: 20px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--primary);
}

.auth-message.is-error {
    color: #b85c5c;
    text-align: center;
}

.thankyou-page {
    background: var(--bg);
}

.thankyou-card {
    text-align: center;
}

.thankyou-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 24px;
}

.thankyou-btn {
    width: 100%;
    text-align: center;
}

.thankyou-countdown {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-faint);
}

/* ===== Auth V2 ===== */
.auth-page {
    --auth-border: #eaecf0;
    --auth-label: #475467;
    --auth-muted: #98a2b3;
    --auth-card-shadow:
            0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: #f3f4f6;
    color: #101828;
    font-family: var(--font-main);
}

.auth2-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth2-shell {
    width: min(1120px, 100%);
    min-height: min(760px, calc(100vh - 48px));
    display: flex;
    background: #ffffff;
    border: 1px solid var(--auth-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--auth-card-shadow);
}

.auth2-steps-pane {
    flex: 0 0 35%;
    width: 35%;
    min-width: 320px;
    background: #f9fafb;
    border-right: 1px solid var(--auth-border);
    padding: 44px 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth2-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--auth-label);
    text-decoration: none;
    font-weight: 600;
}

.auth2-brand {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.auth2-brand img {
    display: block;
    width: 168px;
    height: auto;
}

.auth2-pane-copy {
    max-width: 300px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--auth-label);
    margin-bottom: 30px;
}

.auth2-sidebar-panel {
    display: none;
}

.auth2-sidebar-panel-signup {
    display: block;
}

.auth2-shell:has(#login-form:not(.is-hidden)) .auth2-sidebar-panel-signup {
    display: none;
}

.auth2-shell:has(#login-form:not(.is-hidden)) .auth2-sidebar-panel-login {
    display: block;
}

.auth2-step-list {
    list-style: none;
    display: grid;
    gap: 18px;
}

.auth2-step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--auth-muted);
    padding: 0;
    border-radius: var(--radius-action);
    border: 1px solid transparent;
}

.auth2-step-item span {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-action);
    border: 1px solid var(--auth-border);
    display: grid;
    place-items: center;
    color: var(--auth-muted);
    background: #ffffff;
    font-size: 0.86rem;
    font-weight: 600;
    flex-shrink: 0;
}

.auth2-step-item strong {
    display: block;
    font-size: 0.9rem;
    color: #344054;
    line-height: 1.25;
    letter-spacing: 0;
}

.auth2-step-item small {
    display: block;
    font-size: 0.78rem;
    color: var(--auth-muted);
    margin-top: 3px;
}

.auth2-step-item.is-active {
    background: transparent;
    border-color: transparent;
}

.auth2-step-item.is-active span {
    background: var(--color-sage-tint);
    border-color: rgba(95, 122, 97, 0.32);
    color: var(--color-primary-sage);
}

.auth2-step-item.is-active strong {
    color: #101828;
}

.auth2-step-item.is-done span {
    background: var(--color-primary-sage);
    border-color: var(--color-primary-sage);
    color: #ffffff;
}

.auth2-value-list .auth2-step-item span {
    background: var(--color-sage-tint);
    border-color: rgba(95, 122, 97, 0.28);
    color: var(--color-primary-sage);
}

.auth2-value-list .auth2-step-item strong {
    color: #101828;
}

.auth2-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
}

.auth2-form-pane {
    flex: 1 1 65%;
    width: 65%;
    position: relative;
    display: grid;
    place-items: center;
    background: #ffffff;
    padding: 56px 32px;
    box-sizing: border-box;
}

.auth2-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--auth-border);
    margin: 0;
}

.auth2-progress.is-hidden {
    display: none;
}

#auth2-progress-fill {
    display: block;
    height: 100%;
    width: 25%;
    background: var(--color-primary-sage);
    transition: width 0.25s ease;
}

.auth2-form-stack {
    width: 100%;
    max-width: 420px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
}

.auth2-form-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 1.25rem;
    color: var(--color-primary-sage);
}

.auth2-login-form,
.auth2-onboard-flow {
    width: 100%;
}

.auth2-login-form h1,
.auth2-step-panel h1 {
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: 0;
    color: #101828;
    margin-bottom: 8px;
    text-align: center;
}

.auth2-sub {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--auth-label);
    margin-bottom: 18px;
    text-align: center;
}

.auth2-step-panel {
    display: none;
}

.auth2-step-panel.is-active {
    display: block;
}

.auth2-step-panel .form-group {
    margin-bottom: 11px;
}

.auth2-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.auth2-step-panel .form-label,
.auth2-login-form .form-label,
.auth2-reset-form .form-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--auth-label);
    margin-bottom: 6px;
    display: inline-block;
}

.auth2-step-panel .form-input,
.auth2-login-form .form-input,
.auth2-reset-form .form-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--auth-border);
    border-radius: var(--radius-action);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.auth2-step-panel .form-input:focus,
.auth2-login-form .form-input:focus,
.auth2-reset-form .form-input:focus {
    border-color: var(--color-primary-sage);
    outline: none;
}

.auth2-login-form .form-input,
.auth2-reset-form .form-input {
    margin-bottom: 12px;
}

.auth2-login-form .form-input:last-of-type,
.auth2-reset-form .form-input:last-of-type {
    margin-bottom: 0;
}

.auth2-or {
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--auth-muted);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0;
}

.auth2-or::before,
.auth2-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-border);
}

.auth2-social-btn {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--auth-border);
    border-radius: var(--radius-action);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.auth2-social-btn:hover {
    background: #f9fafb;
}

.auth2-auth-switch-copy,
.auth2-resend-copy {
    color: var(--auth-label);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

.auth2-auth-switch-copy {
    margin: 16px 0 0;
}

.auth2-forgot-row {
    margin-top: 25px;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.4;
}

.auth2-resend-copy {
    margin: -2px 0 18px;
}

.auth2-text-link {
    border: none;
    background: transparent;
    color: var(--auth-label);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    text-underline-offset: 3px;
}

.auth2-text-link:hover,
.auth2-text-link:focus-visible {
    opacity: 0.8;
}

.auth2-text-link:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.2);
    outline-offset: 3px;
    border-radius: 4px;
}

.auth2-google-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.auth2-submit {
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    padding: 10px 16px;
    font-size: 14px;
}

.auth-reset-page .auth2-progress {
    display: none;
}

.auth-reset-page .auth2-sidebar-panel {
    display: block;
}

.auth2-reset-form {
    width: 100%;
}

.auth2-reset-form .auth2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth2-code-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}

.auth2-code-input {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 1px solid var(--auth-border);
    border-radius: var(--radius-action);
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.auth2-code-input:focus {
    border-color: var(--color-primary-sage);
    outline: none;
}

.auth2-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-page .std-btn {
    min-height: 40px;
    padding: 10px 16px;
    border-radius: var(--radius-action);
    font-size: 14px;
}

.auth2-skip-link {
    border: none;
    background: transparent;
    color: var(--auth-label);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 3px;
    display: flex;
    justify-content: center;
    margin: 14px auto 0;
    padding: 0;
    width: fit-content;
}

.auth2-skip-link:hover,
.auth2-skip-link:focus-visible {
    text-decoration: underline;
}

.auth2-skip-link:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.18);
    outline-offset: 3px;
    border-radius: 4px;
}

.auth2-microcopy {
    color: var(--auth-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 4px 0 14px;
}

.auth2-step-success {
    text-align: center;
    padding-top: 0;
}

.auth2-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(95, 122, 97, 0.14);
    color: var(--color-primary-sage);
    font-size: 1.7rem;
    animation: authCheckPop 0.35s ease;
}

#password-reset-request-form h1,
#reset-sent-title {
    text-align: center;
}

@keyframes authCheckPop {
    from {
        transform: scale(0.72);
        opacity: 0.4;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .auth2-main {
        display: block;
        padding: 0;
        background: #ffffff;
    }

    .auth2-shell {
        flex-direction: column;
        min-height: 100vh;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .auth2-steps-pane {
        display: none;
    }

    .auth2-form-pane {
        width: 100%;
        flex: 1;
        min-height: 100vh;
        padding: 28px 0 0;
        background: #ffffff;
    }

    .auth2-progress {
        margin: 0;
    }

    .auth2-form-stack {
        width: 100%;
        max-width: 440px;
        min-height: calc(100vh - 28px);
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 24px 16px;
    }

    .auth2-form-mark {
        margin-bottom: 14px;
    }

    .auth2-code-row {
        gap: 7px;
    }

    .auth2-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ===== Nanny Approval Portal ===== */
.nanny-approval-page {
    background: #f3f4f6;
    font-family: var(--font-main);
}

.nap-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 20px;
}

.nap-card {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-container);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
    padding: 24px 20px;
}

.nap-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nap-brand img {
    display: block;
    width: 168px;
    height: auto;
}

.nap-card h1 {
    font-size: 1.32rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    text-align: center;
}

.nap-copy {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #4b5563;
    text-align: center;
}

.nap-summary-card {
    margin-top: 18px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-container);
    background: #fff;
    overflow: hidden;
}

.nap-summary-row {
    min-height: 48px;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f2f4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.nap-summary-row:last-child {
    border-bottom: none;
}

.nap-summary-row span {
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
}

.nap-summary-row strong {
    color: #374151;
    font-size: 0.86rem;
    line-height: 1.5;
    font-weight: 600;
    text-align: right;
}

.nap-btn {
    width: 100%;
    margin-top: 16px;
    min-height: 44px;
}

.nap-meta {
    margin-top: 10px;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
    text-align: center;
}

.nap-success {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    background: #f3f7f4;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    animation: napSuccessFade 0.35s ease;
}

.nap-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(95, 122, 97, 0.14);
    color: var(--color-primary-sage);
    font-size: 2rem;
    animation: authCheckPop 0.35s ease;
}

.nap-success h2 {
    font-size: 1.26rem;
    color: #111827;
    margin-bottom: 8px;
}

.nap-success p {
    color: #4b5563;
    font-size: 0.9rem;
    max-width: 420px;
}

.nap-success-sub {
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}

@keyframes napSuccessFade {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Landing Redesign (Desktop-first, homepage only) ===== */
.landing-page {
    background: #fbfbf9;
    color: var(--text);
    font-family: "Inter", sans-serif;
}

.landing-page * {
    box-sizing: border-box;
}

.landing-page a {
    text-decoration: none;
    color: inherit;
}

.landing-page .lp-wrap {
    width: min(1200px, calc(100% - 64px));
    margin: 0 auto;
}

.landing-page .lp-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 14px;
}

.landing-page .lp-kicker.center {
    text-align: center;
}

.landing-page .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-action);
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.landing-page .lp-btn:hover {
    background: var(--primary-dark);
}

.landing-page .lp-btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--rule);
}

.landing-page .lp-btn-ghost:hover {
    background: rgba(45, 52, 54, 0.04);
}

.landing-page .lp-btn-lg {
    min-height: 48px;
    padding: 0 22px;
}

.landing-page .lp-brand {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.landing-page .lp-brand span {
    color: var(--primary);
}

.landing-page .lp-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(251, 251, 249, 0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(45, 52, 54, 0.06);
}

.landing-page .lp-nav-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    min-height: 78px;
}

.landing-page .lp-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.landing-page .lp-nav-links a {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.landing-page .lp-nav-links a:hover {
    color: var(--text);
}

.landing-page .lp-nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-page .lp-hero {
    padding: 48px 0 70px;
}

.landing-page .lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(330px, 470px) minmax(420px, 1fr);
    gap: 44px;
    align-items: center;
}

.landing-page .lp-hero-copy h1 {
    font-size: clamp(36px, 5vw, 44px);
    line-height: 1.05;
    letter-spacing: -1.8px;
    margin-bottom: 20px;
}

.landing-page .lp-sub {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 28px;
    max-width: 460px;
}

.landing-page .lp-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.landing-page .lp-hero-actions span {
    font-size: 13px;
    color: var(--text-faint);
}

.landing-page .lp-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-page .lp-trust-row li {
    font-size: 13px;
    color: var(--text-secondary);
}

.landing-page .lp-trust-row i {
    color: var(--primary);
    margin-right: 6px;
}

.landing-page .lp-hero-visual {
    position: relative;
    min-height: 560px;
}

.landing-page .lp-hero-visual > img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 4px;
}

.landing-page .lp-floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(45, 52, 54, 0.08);
    box-shadow: 0 12px 34px rgba(45, 52, 54, 0.14);
    padding: 16px;
    width: min(285px, 82%);
}

.landing-page .lp-card-pay {
    right: -18px;
    top: 52px;
}

.landing-page .lp-card-week {
    right: 20px;
    bottom: 24px;
}

.landing-page .lp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.landing-page .lp-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--rule);
}

.landing-page .lp-line strong {
    font-size: 14px;
    color: var(--text);
}

.landing-page .lp-line.total {
    margin-top: 4px;
    border-bottom: none;
}

.landing-page .lp-line.total strong {
    color: var(--primary);
    font-size: 24px;
    letter-spacing: -0.4px;
}

.landing-page .lp-card-pay p {
    margin-top: 8px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
}

.landing-page .lp-week-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.landing-page .lp-week-grid span {
    font-size: 11px;
    color: var(--text-secondary);
}

.landing-page .lp-benefits {
    border-top: 1px solid rgba(45, 52, 54, 0.06);
    border-bottom: 1px solid rgba(45, 52, 54, 0.06);
    background: rgba(95, 122, 97, 0.035);
}

.landing-page .lp-benefit-grid {
    padding: 28px 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-page .lp-benefit-grid article i {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 10px;
}

.landing-page .lp-benefit-grid h3 {
    font-size: 20px;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.landing-page .lp-benefit-grid p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

.landing-page .lp-problem-solution,
.landing-page .lp-how,
.landing-page .lp-features,
.landing-page .lp-testimonials,
.landing-page .lp-pricing,
.landing-page .lp-final-cta {
    padding: 84px 0;
}

.landing-page .lp-ps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 26px;
    align-items: stretch;
}

.landing-page .lp-panel {
    background: #fff;
    border: 1px solid rgba(45, 52, 54, 0.07);
    padding: 26px;
}

.landing-page .lp-panel h3 {
    font-size: 29px;
    letter-spacing: -0.6px;
    margin-bottom: 18px;
}

.landing-page .lp-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.landing-page .lp-panel li {
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-page .lp-problem i {
    color: #c87373;
}

.landing-page .lp-solution i {
    color: var(--primary);
}

.landing-page .lp-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    color: #fff;
    background: var(--primary);
    align-self: center;
}

.landing-page .lp-how h2,
.landing-page .lp-testimonials h2 {
    text-align: center;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -1.1px;
    margin-bottom: 28px;
}

.landing-page .lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.landing-page .lp-steps article {
    text-align: center;
    padding: 12px;
}

.landing-page .lp-steps article div {
    width: 50px;
    height: 50px;
    margin: 0 auto 12px;
    border: 1px solid var(--accent-mid);
    display: grid;
    place-items: center;
    color: var(--primary);
}

.landing-page .lp-steps h3 {
    font-size: 21px;
    margin-bottom: 8px;
}

.landing-page .lp-steps p {
    color: var(--text-secondary);
    font-size: 15px;
}

.landing-page .lp-features {
    background: rgba(95, 122, 97, 0.03);
}

.landing-page .lp-features-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 34px;
}

.landing-page .lp-features-layout aside h2 {
    font-size: 42px;
    letter-spacing: -1px;
    margin-bottom: 14px;
}

.landing-page .lp-features-layout aside p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 16px;
}

.landing-page .lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.landing-page .lp-feature-grid article {
    background: #fff;
    border: 1px solid rgba(45, 52, 54, 0.07);
    padding: 18px;
}

.landing-page .lp-feature-grid h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.landing-page .lp-feature-grid p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.landing-page .lp-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.landing-page .lp-testimonial-grid article {
    background: #fff;
    border: 1px solid rgba(45, 52, 54, 0.07);
    padding: 20px;
}

.landing-page .lp-testimonial-grid p {
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.7;
}

.landing-page .lp-testimonial-grid h4 {
    font-size: 15px;
    margin-bottom: 2px;
}

.landing-page .lp-testimonial-grid span {
    font-size: 13px;
    color: var(--text-faint);
}

.landing-page .lp-pricing {
    background: rgba(95, 122, 97, 0.025);
}

.landing-page .lp-pricing-grid {
    display: grid;
    grid-template-columns: minmax(290px, 380px) 1fr;
    gap: 30px;
    align-items: center;
}

.landing-page .lp-pricing-card {
    background: #fff;
    border: 1px solid rgba(45, 52, 54, 0.07);
    padding: 26px;
}

.landing-page .lp-pricing-card h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.landing-page .lp-pricing-card h3 span {
    font-size: 44px;
    letter-spacing: -2px;
}

.landing-page .lp-pricing-card p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.landing-page .lp-pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.landing-page .lp-pricing-card li {
    font-size: 14px;
    color: var(--text-secondary);
}

.landing-page .lp-pricing-card i {
    color: var(--primary);
    margin-right: 7px;
}

.landing-page .lp-pricing-copy h2 {
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -1.2px;
    margin-bottom: 12px;
}

.landing-page .lp-pricing-copy p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.landing-page .lp-pricing-notes {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.landing-page .lp-pricing-notes span {
    font-size: 14px;
    color: var(--text-secondary);
}

.landing-page .lp-pricing-notes i {
    margin-right: 6px;
    color: var(--primary);
}

.landing-page .lp-final-cta {
    padding-top: 74px;
}

.landing-page .lp-final-inner {
    background: linear-gradient(
            120deg,
            rgba(95, 122, 97, 0.1),
            rgba(95, 122, 97, 0.04)
    );
    border: 1px solid rgba(95, 122, 97, 0.18);
    padding: 56px 40px;
    text-align: center;
}

.landing-page .lp-final-inner h2 {
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.landing-page .lp-final-inner p {
    color: var(--text-secondary);
    margin-bottom: 22px;
    font-size: 18px;
}

.landing-page .lp-footer {
    margin-top: 80px;
    border-top: 1px solid rgba(45, 52, 54, 0.08);
    background: #f7f8f5;
}

.landing-page .lp-footer-grid {
    padding: 44px 0 30px;
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 22px;
}

.landing-page .lp-footer-grid > div > p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-top: 10px;
}

.landing-page .lp-footer h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.landing-page .lp-footer a {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.landing-page .lp-footer a:hover {
    color: var(--text);
}

.landing-page .lp-footer-bottom {
    padding: 14px 0 26px;
    border-top: 1px solid rgba(45, 52, 54, 0.08);
    font-size: 12px;
    color: var(--text-faint);
}

@media (max-width: 1100px) {
    .landing-page .lp-wrap {
        width: min(1100px, calc(100% - 40px));
    }

    .landing-page .lp-nav-links {
        gap: 16px;
    }

    .landing-page .lp-hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .landing-page .lp-hero-visual {
        min-height: auto;
    }

    .landing-page .lp-hero-visual > img {
        height: 520px;
    }

    .landing-page .lp-floating-card {
        width: min(290px, 66%);
    }

    .landing-page .lp-features-layout,
    .landing-page .lp-pricing-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .lp-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-page .lp-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .lp-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .landing-page .lp-wrap {
        width: calc(100% - 28px);
    }

    .landing-page .lp-header {
        position: static;
    }

    .landing-page .lp-nav-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
        min-height: 68px;
    }

    .landing-page .lp-nav-links {
        display: none;
    }

    .landing-page .lp-nav-cta {
        gap: 6px;
    }

    .landing-page .lp-btn,
    .landing-page .lp-btn-lg {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }

    .landing-page .lp-brand {
        font-size: 28px;
    }

    .landing-page .lp-hero {
        padding: 28px 0 48px;
    }

    .landing-page .lp-hero-copy h1 {
        font-size: 40px;
        line-height: 1.08;
    }

    .landing-page .lp-sub {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .landing-page .lp-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .landing-page .lp-hero-actions span {
        text-align: center;
    }

    .landing-page .lp-trust-row {
        gap: 10px;
    }

    .landing-page .lp-hero-visual > img {
        height: 420px;
    }

    .landing-page .lp-floating-card {
        position: static;
        width: 100%;
        margin-top: 10px;
    }

    .landing-page .lp-benefit-grid,
    .landing-page .lp-steps,
    .landing-page .lp-feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .lp-problem-solution,
    .landing-page .lp-how,
    .landing-page .lp-features,
    .landing-page .lp-testimonials,
    .landing-page .lp-pricing,
    .landing-page .lp-final-cta {
        padding: 52px 0;
    }

    .landing-page .lp-ps-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .lp-arrow {
        width: 42px;
        height: 42px;
        justify-self: center;
        transform: rotate(90deg);
    }

    .landing-page .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .landing-page .lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .landing-page .lp-hero-copy h1 {
        font-size: 41px;
    }
}

/* ===== App Professional Refactor (responsive + hierarchy) ===== */
:root {
    --app-primary: #5f7a61;
    --app-primary-dark: #4e6750;
    --app-bg: #f9f9f9;
    --app-surface: #ffffff;
    --app-text: #1f2722;
    --app-muted: rgba(31, 39, 34, 0.62);
    --app-faint: rgba(31, 39, 34, 0.42);
    --app-rule: rgba(31, 39, 34, 0.1);
}

.app-page {
    --primary: #5f7a61;
    --primary-dark: #4e6750;
    --accent-light: rgba(95, 122, 97, 0.09);
    --accent-mid: rgba(95, 122, 97, 0.17);
    font-family:
            "Plus Jakarta Sans",
            "Inter",
            -apple-system,
            sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
}

.app-page nav {
    padding: 0;
    max-width: none;
    margin: 0;
}

.app-page .top-bar,
.app-page .page,
.app-page .summary-card,
.app-page .pay-card,
.app-page .entries-log-panel,
.app-page .period-card,
.app-page .entry-row,
.app-page .settings-section,
.app-page .payment-summary-card,
.app-page .section-block,
.app-page .side-nav,
.app-page .btn,
.app-page .form-input {
    border-radius: 0;
}

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

.side-nav {
    display: none;
}

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

.app-page .top-bar {
    max-width: none;
    width: 100%;
    border-bottom: 1px solid var(--app-rule);
}

.app-page .page {
    max-width: none;
    width: 100%;
    padding: 20px var(--page-px) 32px;
}

.app-page .btn {
    background: var(--app-primary);
}

.app-page .btn:hover {
    background: var(--app-primary-dark);
}

.app-page .form-input,
.app-page .log-input {
    border-color: var(--app-rule);
}

.app-page .form-input:focus,
.app-page .log-input:focus {
    border-color: var(--app-primary);
}

.app-page .section-hd-title,
.app-page .section-block-title,
.app-page .settings-section-title {
    color: var(--app-faint);
}

.app-page .section-hd-link {
    color: var(--app-primary);
}

.app-page .entry-row {
    border-color: var(--app-rule);
}

.app-page .entry-date {
    color: var(--app-text);
}

.app-page .entry-sub,
.app-page .entry-hours-label,
.app-page .pay-rate-label,
.app-page .settings-row-value {
    color: var(--app-faint);
    font-weight: 500;
}

.app-page .entry-pay,
.app-page .wpr-amount,
.app-page .psc-amount {
    font-weight: 600;
}

.dashboard-layout {
    display: grid;
    gap: 16px;
}

.summary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.summary-card {
    background: var(--app-surface);
    border: 1px solid var(--app-rule);
    padding: 18px 18px 16px;
}

.summary-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--app-faint);
    font-weight: 600;
    margin-bottom: 8px;
}

.summary-big {
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.8px;
}

.summary-sub {
    margin-top: 6px;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 500;
}

.pay-card-compact {
    background: var(--app-surface);
    border: 1px solid var(--app-rule);
    box-shadow: none;
    padding: 18px;
    margin: 0;
}

.pay-card-eyebrow {
    color: var(--app-faint);
}

.pay-card-week {
    margin-bottom: 10px;
    color: var(--app-muted);
}

.pay-amount {
    font-size: clamp(32px, 5vw, 44px);
    line-height: 1;
    margin-bottom: 10px;
}

.pay-status-row {
    margin-bottom: 12px;
}

.status-badge {
    padding: 5px 10px;
}

.status-badge.paid {
    color: var(--app-primary);
    background: rgba(95, 122, 97, 0.12);
}

.btn-mark-paid {
    width: auto;
    min-width: 148px;
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.btn-mark-paid.settled,
.btn-mark-paid:disabled {
    background: rgba(31, 39, 34, 0.04);
    color: rgba(31, 39, 34, 0.5);
    border-color: rgba(31, 39, 34, 0.1);
    cursor: not-allowed;
}

.paid-on {
    justify-content: flex-start;
    margin-top: 8px;
}

.entry-list {
    background: var(--app-surface);
    border: 1px solid var(--app-rule);
    padding: 0 14px;
}

.entry-row {
    gap: 12px;
    padding: 14px 0;
}

.entry-state-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

.status-dot-paid {
    background: #3f6a45;
}

.status-dot-pending {
    background: #2d6eb5;
}

.entries-layout {
    display: grid;
    gap: 14px;
}

.entries-period-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: rgba(95, 122, 97, 0.1);
}

.entries-period-btn {
    border: 0;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--app-muted);
    background: transparent;
    cursor: pointer;
}

.entries-period-btn.active {
    color: var(--app-primary);
    background: #fff;
}

.entries-period-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
}

.period-card {
    min-width: 220px;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--app-rule);
    background: var(--app-surface);
    color: var(--app-text);
    scroll-snap-align: start;
    cursor: pointer;
}

.period-card.active {
    border-color: rgba(95, 122, 97, 0.46);
    background: rgba(95, 122, 97, 0.08);
}

.period-card-label {
    font-size: 12px;
    color: var(--app-faint);
    margin-bottom: 6px;
    font-weight: 600;
}

.period-card-main {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.period-card-sub {
    font-size: 13px;
    color: var(--app-muted);
    font-weight: 600;
    margin-top: 2px;
}

.entries-log-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-rule);
    padding: 14px;
}

.entries-log-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--app-faint);
    font-weight: 600;
    margin-bottom: 10px;
}

.entries-date-switch {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 8px;
    align-items: center;
}

.entries-date-btn,
.entries-today-btn,
.entries-quick-btn,
.entries-stepper-btn {
    border: 1px solid var(--app-rule);
    background: #fff;
    color: var(--app-text);
    min-height: 42px;
    cursor: pointer;
}

.entries-selected-date {
    text-align: center;
    font-size: 14px;
    color: var(--app-muted);
    font-weight: 600;
}

.entries-today-btn {
    margin-top: 8px;
    width: 100%;
    font-weight: 600;
}

.entries-quick-hours {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.entries-quick-btn {
    font-weight: 600;
}

.entries-quick-btn.active {
    background: rgba(95, 122, 97, 0.12);
    color: var(--app-primary);
    border-color: rgba(95, 122, 97, 0.34);
}

.entries-stepper {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 8px;
}

.entries-stepper-value {
    min-height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-rule);
    background: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

#entries-btn-add {
    margin-top: 10px;
    width: 100%;
}

.entries-list-note {
    color: var(--app-faint);
    font-size: 13px;
    font-weight: 500;
}

.period-list-group {
    background: var(--app-surface);
    border: 1px solid var(--app-rule);
    padding: 0 14px;
    margin-bottom: 12px;
}

.period-list-header {
    padding: 12px 0;
    border-bottom: 1px solid var(--app-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.period-list-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text);
}

.period-list-total {
    font-size: 13px;
    color: var(--app-muted);
    font-weight: 600;
}

.entry-row-editable {
    position: relative;
    transition: background 0.18s ease;
}

.entry-row-editable.is-editing {
    background: rgba(95, 122, 97, 0.08);
}

.entry-delete {
    margin-left: 4px;
    border: 0;
    background: transparent;
}

.side-brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.side-brand span {
    color: var(--app-primary);
}

@media (min-width: 768px) {
    .app-shell {
        display: block;
    }

    .side-nav {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        background: #fff;
        border-right: 1px solid var(--app-rule);
        padding: 24px 16px;
    }

    .side-nav-links {
        margin-top: 16px;
        display: grid;
        gap: 4px;
    }

    .side-link {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 0 10px;
        color: var(--app-muted);
        font-size: 14px;
        font-weight: 600;
        border: 1px solid transparent;
    }

    .side-link.active {
        color: var(--app-primary);
        background: rgba(95, 122, 97, 0.1);
        border-color: rgba(95, 122, 97, 0.24);
    }

    .app-main {
        margin-left: 220px;
        min-height: 100vh;
    }

    .app-page .top-bar {
        height: 64px;
        padding: 0 28px;
    }

    .app-page .page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 26px 28px 40px;
    }

    .app-page {
        padding-bottom: 20px;
    }

    .app-page .bottom-nav {
        display: none;
    }

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

    .dashboard-layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    .dashboard-layout .summary-grid {
        grid-column: 1 / span 8;
    }

    .dashboard-layout .pay-card-compact {
        grid-column: 9 / span 4;
    }

    .dashboard-layout > section:last-child {
        grid-column: 1 / -1;
    }

    .entries-layout {
        max-width: 900px;
    }

    .entries-period-cards {
        padding-bottom: 6px;
    }

    .period-card {
        min-width: 260px;
    }
}

@media (max-width: 767px) {
    .app-page {
        padding-bottom: calc(var(--nav-h) + 16px);
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .btn-mark-paid {
        width: 100%;
    }
}

@media (hover: hover) and (pointer: fine) {
    .side-link:hover {
        background: rgba(95, 122, 97, 0.08);
        border-color: rgba(95, 122, 97, 0.2);
        color: var(--app-primary-dark);
    }

    .period-card:hover,
    .entry-row-editable:hover,
    .entries-period-btn:hover,
    .entries-quick-btn:hover,
    .entries-date-btn:hover,
    .entries-today-btn:hover,
    .entries-stepper-btn:hover,
    .app-page .nav-item:hover,
    .app-page .top-action:hover,
    .app-page .top-bar-action:hover {
        background: rgba(95, 122, 97, 0.08);
        color: var(--app-primary-dark);
    }

    .entry-delete:hover {
        background: rgba(184, 92, 92, 0.08);
        color: #b85c5c;
    }
}

/* ===== Premium Dashboard Rebuild ===== */
.dashboard-page {
    background: #f9fafb;
    color: #111827;
    font-family:
            "Plus Jakarta Sans",
            "Inter",
            -apple-system,
            sans-serif;
}

.dashboard-page .dashboard-shell {
    min-height: 100vh;
}

.dashboard-page .dashboard-sidebar {
    display: none;
}

.dashboard-page .dashboard-main {
    min-height: 100vh;
}

.dashboard-page .dashboard-header {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-page .dashboard-header-inner {
    min-height: 72px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-page .dashboard-title {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.dashboard-page .dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-page .dashboard-btn,
.dashboard-page .dashboard-icon-btn,
.dashboard-page .dashboard-profile-btn {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    min-height: 40px;
    font-size: 0.875rem;
    font-weight: 600;
}

.dashboard-page .dashboard-btn {
    padding: 0 14px;
    cursor: pointer;
}

.dashboard-page .dashboard-btn-primary {
    background: #5f7a61;
    color: #fff;
    border-color: #5f7a61;
}

.dashboard-page .dashboard-btn-primary:hover {
    background: #677667;
    border-color: #677667;
}

.dashboard-page .dashboard-btn-primary.is-settled,
.dashboard-page .dashboard-btn-primary:disabled {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
    cursor: not-allowed;
}

.dashboard-page .dashboard-btn-secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.dashboard-page .dashboard-btn-secondary:hover {
    background: #f9fafb;
}

.dashboard-page .dashboard-icon-btn {
    width: 40px;
    display: inline-grid;
    place-items: center;
    background: #fff;
    color: #4b5563;
    border-color: #d1d5db;
    cursor: pointer;
}

.dashboard-page .dashboard-icon-btn:hover {
    background: #f3f4f6;
}

.dashboard-page .dashboard-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
    cursor: pointer;
}

.dashboard-page .dashboard-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(95, 122, 97, 0.16);
    color: #374151;
    font-size: 0.72rem;
    font-weight: 600;
}

.dashboard-page .dashboard-profile-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.dashboard-page .dashboard-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 26px;
    display: grid;
    gap: 24px;
}

.dashboard-page .dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard-page .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.dashboard-page .kpi-card {
    padding: 1.5rem;
}

.dashboard-page .kpi-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.dashboard-page .kpi-value {
    font-size: clamp(2rem, 4.2vw, 2.5rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #111827;
}

.dashboard-page .kpi-status-value {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    line-height: 1.25;
    letter-spacing: 0;
}

.dashboard-page .kpi-foot,
.dashboard-page .kpi-trend {
    margin-top: 0.58rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.dashboard-page .kpi-trend .trend-up {
    color: #b45309;
}

.dashboard-page .kpi-trend .trend-down {
    color: #15803d;
}

.dashboard-page .kpi-trend i {
    margin-right: 0.32rem;
}

.dashboard-page .dashboard-analytics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.dashboard-page .card-head {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-page .card-head h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dashboard-page .card-head span {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 600;
}

.dashboard-page .card-head-link {
    font-size: 0.875rem;
    color: #5f7a61;
    font-weight: 600;
}

.dashboard-page .card-head-link:hover {
    color: #677667;
}

.dashboard-page .chart-wrap {
    padding: 10px 12px 12px;
}

.dashboard-page .spending-svg {
    width: 100%;
    height: auto;
    display: block;
}

.dashboard-page .spending-label {
    fill: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-page .period-summary-card {
    padding-bottom: 1.1rem;
}

.dashboard-page .period-summary-list {
    padding: 0.85rem 1.5rem 0.2rem;
    display: grid;
}

.dashboard-page .period-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.78rem 0;
    border-bottom: 1px solid #f0f2f4;
}

.dashboard-page .period-summary-row:last-child {
    border-bottom: none;
}

.dashboard-page .period-summary-row span {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
}

.dashboard-page .period-summary-row strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
}

.dashboard-page .quick-pay-card {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.dashboard-page .quick-pay-amount {
    margin-top: 0.6rem;
    font-size: clamp(2rem, 4vw, 2.5rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.dashboard-page .quick-pay-sub {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

.dashboard-page .quick-pay-card .std-btn,
.dashboard-page .quick-pay-card .dashboard-btn-primary {
    margin-top: 1rem;
}

.dashboard-page .quick-pay-helper {
    margin-top: 0.78rem;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.55;
    font-weight: 500;
}

.demo-confirm-link {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.62rem;
    color: #5f7a61;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo-confirm-link:hover {
    color: #4e6750;
}

.demo-confirm-link:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.22);
    outline-offset: 2px;
}

.dashboard-page .quick-pay-note {
    min-height: 1.1rem;
    margin-top: 0.55rem;
    font-size: 0.76rem;
    color: #8a94a3;
    font-weight: 500;
}

.dashboard-page .quick-pay-note i {
    color: #5f7a61;
    margin-right: 0.3rem;
}

.dashboard-page .activity-card {
    padding: 0 0 6px;
}

.dashboard-page .table-wrap {
    overflow-x: auto;
    padding: 0 1.5rem 1.25rem;
}

.dashboard-page .activity-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.dashboard-page .activity-table th,
.dashboard-page .activity-table td {
    padding: 0.86rem 0.3rem;
    border-bottom: 1px solid #f0f2f4;
    text-align: left;
    white-space: nowrap;
}

.dashboard-page .activity-table th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}

.dashboard-page .activity-table td {
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
}

.dashboard-page .activity-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-page .activity-status.is-pending {
    border: 1px solid #d1d5db;
    color: #4b5563;
    background: #ffffff;
}

.dashboard-page .activity-status.is-paid {
    border: 1px solid rgba(95, 122, 97, 0.28);
    color: #3f5a3f;
    background: rgba(95, 122, 97, 0.14);
}

.dashboard-page .activity-empty {
    color: #6b7280;
}

@media (min-width: 1024px) {
    .dashboard-page .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 250px;
        padding: 20px 14px;
        background: #ffffff;
        border-right: 1px solid #e5e7eb;
        display: block;
        z-index: 30;
    }

    .dashboard-page .dashboard-brand {
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        padding: 8px 10px 18px;
    }

    .dashboard-page .dashboard-brand span {
        color: #5f7a61;
    }

    .dashboard-page .dashboard-nav {
        display: grid;
        gap: 4px;
    }

    .dashboard-page .dashboard-nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 12px;
        font-size: 0.92rem;
        color: #4b5563;
        font-weight: 500;
        border-left: 3px solid transparent;
        border-radius: 5px;
    }

    .dashboard-page .dashboard-nav-link i {
        width: 16px;
        font-size: 0.9rem;
        color: #6b7280;
    }

    .dashboard-page .dashboard-nav-link:hover {
        background: rgba(95, 122, 97, 0.08);
    }

    .dashboard-page .dashboard-nav-link.active {
        background: rgba(95, 122, 97, 0.12);
        color: #111827;
        font-weight: 600;
    }

    .dashboard-page .dashboard-nav-link.active i {
        color: #111827;
    }

    .dashboard-page .dashboard-main {
        margin-left: 250px;
    }

    .dashboard-page .dashboard-header {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .dashboard-page .dashboard-header-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        min-height: 80px;
    }

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

    .dashboard-page .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-analytics-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .dashboard-page .bottom-nav {
        display: none;
    }
}

@media (max-width: 1023px) {
    .dashboard-page {
        padding-bottom: calc(var(--nav-h) + 18px);
    }

    .dashboard-page .dashboard-profile-name {
        display: none;
    }

    .dashboard-page .dashboard-header-actions {
        gap: 8px;
    }

    .dashboard-page .dashboard-btn-secondary {
        padding: 0 10px;
        font-size: 0.8rem;
    }

    .dashboard-page .table-wrap {
        padding: 0 1rem 1rem;
    }
}

/* ===== Standard App Shell (Global /app) ===== */
.app-page {
    background: #f9fafb;
    color: #111827;
    font-family:
            "Plus Jakarta Sans",
            "Inter",
            -apple-system,
            sans-serif;
    padding-bottom: 0;
}

.app-page .bottom-nav {
    display: none !important;
}

.app-page .std-shell {
    min-height: 100vh;
}

.app-page .std-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    z-index: 40;
}

.app-page .std-sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid #e5e7eb;
}

.app-page .std-brand {
    display: flex;
    align-items: center;
}

.app-page .std-brand img {
    display: block;
    width: 176px;
    height: auto;
}

.app-page .std-nav {
    padding: 16px 12px;
    display: grid;
    gap: 6px;
}

.app-page .std-nav-link {
    min-height: 46px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 500;
}

.app-page .std-nav-link i {
    width: 18px;
    text-align: center;
    color: #6b7280;
}

.app-page .std-nav-link:hover {
    background: rgba(95, 122, 97, 0.08);
}

.app-page .std-nav-link.active {
    background: #f2f4f2;
    color: #5f7a61;
    font-weight: 600;
}

.app-page .std-nav-link.active i {
    color: #5f7a61;
}

.app-page .std-main {
    margin-left: 250px;
    min-height: 100vh;
}

.app-page .std-topbar {
    position: fixed;
    left: 250px;
    right: 0;
    top: 0;
    height: 80px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    z-index: 35;
}

.app-page .std-topbar-inner {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 40px;
}

.app-page .std-topbar-title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: #111827;
}

.app-page .std-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.app-page .std-nanny-switcher {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 50;
}

.app-page .std-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 50;
}

.app-page .std-nanny-switcher.is-hidden {
    display: none;
}

.app-page .std-account-menu.is-hidden {
    display: none;
}

.app-page .std-nanny-menu-card {
    width: 284px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-container);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
    padding: 10px;
}

.app-page .std-account-menu-card {
    width: 292px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-container);
    background: #fff;
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}

.app-page .std-nanny-menu-title {
    font-size: 0.72rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 8px;
}

.app-page .std-account-menu-title {
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-page .std-nanny-row {
    width: 100%;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-action);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #374151;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.app-page .std-nanny-row:hover {
    background: var(--color-sage-tint);
}

.app-page .std-nanny-row.is-active {
    background: var(--color-sage-tint);
    border-color: rgba(95, 122, 97, 0.24);
}

.app-page .std-nanny-current {
    min-height: 58px;
    border: 1px solid rgba(95, 122, 97, 0.2);
    border-radius: var(--radius-action);
    background: rgba(95, 122, 97, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.app-page .std-account-current {
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(95, 122, 97, 0.18);
    border-radius: var(--radius-action);
    background: rgba(95, 122, 97, 0.075);
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-page .std-nanny-menu-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(95, 122, 97, 0.14);
    color: #3f5a3f;
    font-size: 0.74rem;
    font-weight: 600;
}

.app-page .std-account-menu-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(95, 122, 97, 0.14);
    color: #3f5a3f;
    font-size: 0.74rem;
    font-weight: 600;
}

.app-page .std-nanny-current-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.app-page .std-account-current-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.app-page .std-nanny-row-name {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .std-account-row-name {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .std-nanny-row-rate {
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 500;
}

.app-page .std-account-row-email {
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .std-nanny-add,
.app-page .std-nanny-edit {
    width: 100%;
    min-height: 36px;
    margin-top: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-action);
    background: #fff;
    color: #4e6750;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    cursor: pointer;
}

.app-page .std-account-menu-action {
    width: 100%;
    min-height: 36px;
    margin-top: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-action);
    background: #fff;
    color: #4e6750;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.app-page .std-account-menu-action--button {
    color: #5f6368;
}

.app-page .std-nanny-add:hover,
.app-page .std-nanny-edit:hover {
    background: rgba(95, 122, 97, 0.08);
}

.app-page .std-account-menu-action:hover,
.app-page .std-account-menu-action:focus-visible {
    background: rgba(95, 122, 97, 0.08);
    outline: none;
}

.app-page .std-btn,
.app-page .std-icon-btn,
.app-page .std-profile-btn,
.app-page input,
.app-page select,
.app-page textarea,
.app-page .btn,
.app-page .entries-view-btn,
.app-page .entries-nav-btn,
.app-page .entries-side-quick-btn,
.app-page .entries-period-btn,
.app-page .entries-quick-btn,
.app-page .entries-date-btn,
.app-page .entries-today-btn,
.app-page .entries-stepper-btn,
.app-page .period-card,
.app-page .chart-mode-toggle,
.app-page .chart-mode-toggle button {
    border-radius: var(--radius-action) !important;
}

.app-page .std-btn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.app-page .std-btn-primary {
    background: #5f7a61;
    color: #fff;
    border-color: #5f7a61;
}

.app-page .std-btn-primary:hover {
    background: #677667;
    border-color: #677667;
}

.app-page .std-btn-primary.is-settled,
.app-page .std-btn-primary:disabled {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

.app-page .std-btn-secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.app-page .std-btn-secondary:hover {
    background: #f9fafb;
}

.app-page .std-btn-danger {
    width: 100%;
    border-color: rgba(184, 92, 92, 0.3);
    color: #b85c5c;
    background: #fff;
}

.app-page .std-btn-danger:hover {
    background: rgba(184, 92, 92, 0.08);
}

.app-page .std-icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}

.app-page .std-icon-btn:hover {
    background: #f3f4f6;
}

.app-page .std-topbar-actions .std-icon-btn[aria-label="Notifications"] {
    display: none;
}

.app-page .std-profile-btn {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 600;
    cursor: pointer;
}

.app-page .std-profile-name {
    display: grid;
    gap: 1px;
    line-height: 1.08;
    text-align: left;
}

.app-page .std-profile-main-name {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page .std-profile-role {
    color: #6b7280;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.app-page .std-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(95, 122, 97, 0.16);
    font-size: 0.72rem;
    font-weight: 600;
}

.app-page .std-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(80px + 2.5rem) 2.5rem 2.5rem;
    display: grid;
    gap: 1.5rem;
}

.app-page .app-card,
.app-page .period-list-group,
.app-page .entry-list,
.app-page .settings-section,
.app-page .payment-summary-card,
.app-page .section-block,
.app-page .entries-log-panel,
.app-page .summary-card,
.app-page .pay-card,
.app-page .dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-container) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.app-page .dashboard-content,
.app-page .entries-layout,
.app-page .payment-layout,
.app-page .settings-layout,
.app-page .reports-layout {
    gap: 1.5rem;
}

.app-page .trial-ended-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-color: rgba(95, 122, 97, 0.18);
    background:
            linear-gradient(
                    180deg,
                    rgba(95, 122, 97, 0.075),
                    rgba(255, 255, 255, 0) 76%
            ),
            #fff;
}

.app-page .trial-ended-banner.is-hidden {
    display: none;
}

.app-page .trial-ended-banner strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #111827;
    font-size: 0.94rem;
    font-weight: 600;
}

.app-page .trial-ended-banner p {
    margin: 0;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.5;
}

.app-page .trial-ended-banner .std-btn {
    flex: 0 0 auto;
}

.app-page .dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.app-page .dashboard-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.app-page .kpi-card,
.app-page .quick-pay-card,
.app-page .entries-section-card,
.app-page .settings-card {
    padding: 1.5rem;
}

.app-page .card-head {
    padding: 1.25rem 1.5rem 0;
}

.app-page .history-section-toggle,
.app-page .history-toggle-btn {
    border: none;
    background: transparent;
    color: var(--color-primary-sage);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 3px;
}

.app-page .history-section-toggle:hover,
.app-page .history-section-toggle:focus-visible,
.app-page .history-toggle-btn:hover,
.app-page .history-toggle-btn:focus-visible {
    color: var(--color-primary-sage-dark);
    text-decoration: underline;
}

.app-page .chart-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.app-page .chart-mode-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
}

.app-page .chart-mode-toggle button {
    min-height: 32px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.app-page .chart-mode-toggle button.active {
    background: #ffffff;
    color: #111827;
}

.app-page .chart-wrap {
    padding: 10px 12px 12px;
}

.app-page .table-wrap {
    padding: 0 1.5rem 1.25rem;
    overflow-x: auto;
}

.app-page .activity-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 660px;
}

.app-page .activity-table th,
.app-page .activity-table td {
    padding: 0.86rem 0.3rem;
    text-align: left;
    border-bottom: 1px solid #f0f2f4;
}

.app-page .activity-table th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}

.app-page .activity-table td {
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
}

.app-page .activity-row {
    cursor: pointer;
}

.app-page .activity-row:hover {
    background: rgba(95, 122, 97, 0.06);
}

.app-page .activity-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.app-page .activity-status.is-pending {
    background: rgba(217, 130, 43, 0.14);
    border: 1px solid rgba(217, 130, 43, 0.35);
    color: #9a5b19;
}

.app-page .activity-status.is-paid {
    background: rgba(95, 122, 97, 0.14);
    border: 1px solid rgba(95, 122, 97, 0.28);
    color: #3f5a3f;
}

.app-page .activity-status.is-sent {
    background: rgba(79, 70, 229, 0.12);
    border: 1px solid rgba(79, 70, 229, 0.28);
    color: #3730a3;
}

.app-page .entries-period-switch {
    margin-bottom: 12px;
}

.app-page .entries-period-cards {
    padding-bottom: 4px;
}

.app-page .entries-log-panel {
    margin: 0;
}

.app-page .entries-history-card {
    padding: 1.25rem 1.5rem;
}

.app-page .entries-history-card .section-hd {
    margin-bottom: 10px;
}

.app-page .settings-layout {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-page .settings-layout .settings-card.settings-full-card {
    grid-column: 1 / -1;
}

.settings-page .settings-column {
    display: grid;
    align-content: start;
    gap: 1.5rem;
}

.settings-page .settings-v1-hidden,
.settings-page [data-v1-hidden="true"] {
    display: none !important;
}

.app-page .settings-card-title {
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #111827;
    font-weight: 600;
    margin-bottom: 0.42rem;
}

.app-page .settings-card-kicker {
    margin-bottom: 0.24rem;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-page .settings-help-copy {
    color: #667085;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
    font-weight: 500;
}

.app-page .settings-subtle-copy {
    margin: 10px 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 500;
}

.settings-page .settings-billing-note {
    display: grid;
    gap: 0.18rem;
}

.app-page .settings-textarea {
    min-height: 74px;
    resize: vertical;
    padding-top: 10px;
}

.settings-page .settings-card {
    display: grid;
    align-content: start;
    gap: 0;
}

.settings-page .settings-card-section {
    padding-top: 1.15rem;
    margin-top: 1.1rem;
    border-top: 1px solid rgba(17, 24, 39, 0.055);
}

.settings-page .settings-card-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.settings-page .settings-section-head {
    margin-bottom: 0.85rem;
}

.settings-page #parent-account .settings-card-section {
    padding-top: 0.95rem;
    margin-top: 0.95rem;
}

.settings-page #parent-account .settings-section-head {
    margin-bottom: 0.68rem;
}

.settings-page #parent-account .form-group {
    margin-bottom: 0.82rem;
}

.settings-page #parent-account .rate-save-row {
    margin-top: 0.1rem;
}

.settings-page .settings-section-head h3,
.settings-page .settings-section-title {
    margin: 0;
    color: #27323f;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
}

.settings-page .settings-profile-summary {
    display: grid;
    gap: 0.24rem;
    margin: 0.2rem 0 1.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(95, 122, 97, 0.13);
    border-radius: 0.5rem;
    background: rgba(95, 122, 97, 0.04);
}

.settings-page .settings-profile-summary strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.settings-page .settings-profile-summary span {
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
}

.settings-page .settings-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-page .form-group {
    display: grid;
    gap: 0.42rem;
    margin-bottom: 1rem;
}

.settings-page .form-label {
    margin: 0;
    color: #7a8494;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.settings-page .form-input,
.settings-page .settings-textarea {
    min-height: 44px;
    border-color: #e5e7eb;
    border-radius: 0.5rem !important;
    color: #111827;
    font-weight: 500;
}

.settings-page .form-input:disabled,
.settings-page .settings-textarea:disabled {
    background: #f9fafb;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
    cursor: not-allowed;
}

.settings-page .settings-row {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.055);
}

.settings-page .settings-row:first-of-type {
    border-top: 1px solid rgba(17, 24, 39, 0.055);
}

.settings-page .settings-row-label {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
}

.settings-page .settings-row-value {
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
}

.settings-page .settings-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 0.62rem;
    border: 1px solid rgba(95, 122, 97, 0.28);
    border-radius: 999px;
    background: rgba(95, 122, 97, 0.1);
    color: #3f5a3f;
    font-size: 0.76rem;
    font-weight: 600;
}

.settings-page .settings-status-badge.is-ended {
    background: var(--accent-light);
    border-color: rgba(95, 122, 97, 0.28);
    color: #3f5a3f;
}

.settings-page .settings-status-badge.is-action-required {
    background: rgba(184, 92, 92, 0.08);
    border-color: rgba(184, 92, 92, 0.24);
    color: #8f4545;
}

.settings-page .settings-row.is-hidden {
    display: none;
}

.settings-page .settings-billing-panel {
    display: grid;
    gap: 0.42rem;
    margin: 0.1rem 0 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(95, 122, 97, 0.13);
    border-radius: 0.5rem;
    background: rgba(95, 122, 97, 0.04);
}

.settings-page .settings-billing-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.06rem;
}

.settings-page .settings-billing-panel .settings-row-label {
    min-width: 0;
}

.settings-page .settings-billing-panel .settings-status-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.settings-page .settings-billing-copy {
    max-width: 100%;
    margin: 0;
    color: #5d6878;
    line-height: 1.55;
}

.settings-page .settings-billing-copy.is-hidden {
    display: none;
}

.settings-page .settings-billing-actions {
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 1rem !important;
}

.settings-page .settings-billing-actions .std-btn {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-page .settings-billing-actions .settings-billing-cancel {
    color: #5d6878;
    border-color: rgba(95, 122, 97, 0.22);
    background: #ffffff;
}

.settings-page .settings-billing-actions .settings-billing-cancel:hover {
    color: #3f5a3f;
    border-color: rgba(95, 122, 97, 0.36);
    background: rgba(95, 122, 97, 0.06);
}

.settings-page .settings-toggle-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.075);
    border-radius: 0.5rem;
    background: #fbfcfb;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
            background 0.2s ease,
            border-color 0.2s ease;
}

.settings-page #parent-account .settings-toggle-row {
    margin-top: 0.72rem;
    padding: 0.9rem 0.95rem;
}

.settings-page .settings-toggle-row:hover,
.settings-page .settings-toggle-row:focus-visible {
    border-color: rgba(95, 122, 97, 0.28);
    background: rgba(95, 122, 97, 0.055);
}

.settings-page .settings-toggle-row:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.18);
    outline-offset: 2px;
}

.settings-page .settings-toggle-row p {
    margin: 0.32rem 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 500;
}

.settings-page .settings-account-actions {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-page .settings-account-actions p {
    margin: 0.28rem 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 500;
}

.settings-page .settings-account-actions .std-btn {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 16px;
}

.settings-page .settings-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(95, 122, 97, 0.28);
    background: #5f7a61;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition:
            background 0.2s ease,
            border-color 0.2s ease;
}

.settings-page .settings-toggle:not(.is-on) {
    background: #ffffff;
    border-color: #d1d5db;
}

.settings-page .settings-toggle span {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.18);
    transition:
            left 0.2s ease,
            right 0.2s ease,
            background 0.2s ease;
}

.settings-page .settings-toggle:not(.is-on) span {
    right: auto;
    left: 3px;
    background: #9ca3af;
}

.settings-page .settings-actions-card {
    border-color: #e7e9ec;
    background: #ffffff;
}

.settings-page .settings-support-card .settings-help-copy,
.settings-page .settings-actions-card .settings-help-copy {
    margin-bottom: 0.85rem;
}

.settings-page .settings-support-card .settings-help-copy strong {
    display: block;
    margin-bottom: 0.26rem;
    color: #111827;
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
}

.settings-page .settings-support-card .settings-help-copy span {
    display: block;
}

.settings-page .settings-support-link {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-page .settings-danger-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(17, 24, 39, 0.055);
}

.settings-page .settings-danger-actions .std-btn {
    width: auto;
}

.settings-page .settings-danger-actions .settings-action-reset {
    border-color: rgba(95, 122, 97, 0.18);
    color: #4e6750;
    background: #ffffff;
}

.settings-page .settings-danger-actions .settings-action-reset:hover {
    background: rgba(95, 122, 97, 0.07);
    border-color: rgba(95, 122, 97, 0.28);
}

.settings-page .settings-danger-actions .settings-action-danger {
    border-color: rgba(184, 92, 92, 0.22);
    color: #9f5959;
    background: #ffffff;
}

.settings-page .settings-danger-actions .settings-action-danger:hover {
    background: rgba(184, 92, 92, 0.08);
}

.app-page .form-label {
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 600;
}

.app-page .form-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 0 12px;
    font-size: 0.92rem;
    box-sizing: border-box;
}

.app-page .form-input:focus {
    border-color: #5f7a61;
}

.settings-page .settings-row-value {
    overflow-wrap: anywhere;
    text-align: right;
}

.app-page .rate-save-row {
    margin-top: 14px;
}

.app-page.settings-page .form-label {
    margin: 0;
    color: #7a8494;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.app-page.settings-page .form-input,
.app-page.settings-page .settings-textarea {
    min-height: 44px;
    border-color: #e5e7eb;
    border-radius: 0.5rem !important;
    color: #111827;
    font-weight: 500;
}

.app-page.settings-page .settings-textarea {
    padding: 10px 12px;
    line-height: 1.45;
}

.app-page.settings-page .rate-save-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.25rem;
}

.app-page.settings-page .rate-save-row .std-btn {
    width: auto;
}

.app-page .reports-card,
.app-page .payment-detail-card {
    padding-bottom: 8px;
}

.payment-detail-page .payment-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.payment-detail-page .payment-detail-head h2 {
    margin: 0;
}

.payment-detail-page .payment-detail-head-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.payment-detail-page .payment-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
}

.payment-detail-page .payment-detail-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.payment-detail-page .payment-detail-actions .std-btn {
    min-height: 36px;
    padding-inline: 12px;
}

.payment-detail-page .payment-detail-delete-btn {
    color: #9f5959;
    border-color: rgba(184, 92, 92, 0.26);
}

.payment-detail-page .payment-detail-delete-btn:hover {
    color: #8f4545;
    background: rgba(184, 92, 92, 0.08);
}

.payment-detail-page .payment-detail-lock-note {
    margin: 1.5rem 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(95, 122, 97, 0.14);
    border-radius: 0.5rem;
    background: rgba(95, 122, 97, 0.06);
    color: #59655b;
    font-size: 0.88rem;
    line-height: 1.55;
}

.payment-detail-page .payment-detail-edit-form {
    margin: 1rem 1.5rem;
    padding: 1rem;
    border: 1px solid rgba(95, 122, 97, 0.14);
    border-radius: 0.5rem;
    background: #fbfbf8;
}

.payment-detail-page .payment-detail-edit-form.is-hidden {
    display: none;
}

.payment-detail-page .payment-detail-edit-grid {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) 1fr;
    gap: 0.85rem;
}

.payment-detail-page .payment-detail-edit-grid .form-group {
    margin-bottom: 0;
}

.payment-detail-page .payment-detail-note-input {
    height: 40px;
    padding-block: 10px;
    resize: vertical;
}

.payment-detail-page .payment-detail-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.payment-detail-page .payment-detail-delete-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 1.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(184, 92, 92, 0.2);
    border-radius: 0.5rem;
    background: rgba(184, 92, 92, 0.055);
}

.payment-detail-page .payment-detail-delete-copy {
    display: grid;
    gap: 0.25rem;
}

.payment-detail-page .payment-detail-delete-copy strong {
    color: #4b3838;
    font-size: 0.92rem;
    font-weight: 600;
}

.payment-detail-page .payment-detail-delete-copy p {
    margin: 0;
    color: #6f5656;
    font-size: 0.86rem;
    line-height: 1.5;
}

.payment-detail-page .payment-detail-delete-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.payment-detail-page .payment-detail-total {
    margin: 0;
    padding: 0 1.5rem 0.85rem;
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.55;
}

.payment-detail-page .payment-detail-note {
    display: grid;
    gap: 0.35rem;
    margin: 0 1.5rem 1.35rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0.5rem;
    background: #fbfbf8;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.55;
}

.payment-detail-page .payment-detail-note strong {
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ===== Subscription Page ===== */
.subscription-page .subscription-layout {
    max-width: 840px;
    align-content: start;
    gap: 1.15rem;
}

.subscription-page .subscription-hero {
    display: grid;
    gap: 0.4rem;
}

.subscription-page .subscription-eyebrow,
.subscription-page .subscription-plan-kicker {
    margin: 0;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.subscription-page .subscription-hero h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.8rem, 4.4vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 600;
}

.subscription-page .subscription-subtitle {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.subscription-page .subscription-copy {
    max-width: 640px;
    margin: 0.2rem 0 0;
    color: #6b7280;
    font-size: 0.93rem;
    line-height: 1.62;
    font-weight: 400;
}

.subscription-page .subscription-plan-card {
    max-width: 760px;
    padding: 1.25rem;
    display: grid;
    gap: 1.5rem;
}

.subscription-page .subscription-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef0f2;
}

.subscription-page .subscription-plan-header h2 {
    margin: 0.2rem 0 0;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.subscription-page .subscription-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    align-self: center;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(95, 122, 97, 0.14);
    border-radius: 999px;
    background: var(--accent-light);
    color: #3f5a3f;
    text-align: right;
    white-space: nowrap;
}

.subscription-page .subscription-price strong {
    display: inline;
    color: #3f5a3f;
    font-size: 0.98rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.subscription-page .subscription-price span {
    display: inline;
    margin-top: 0;
    font-size: 0.78rem;
    font-weight: 500;
}

.subscription-page .subscription-feature-intro {
    margin: 0;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
}

.subscription-page .subscription-feature-list {
    list-style: none;
    margin: -0.2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem 1rem;
}

.subscription-page .subscription-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: #374151;
    font-size: 0.88rem;
    line-height: 1.4;
    font-weight: 500;
}

.subscription-page .subscription-feature-list i {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 0.7rem;
}

.subscription-page .subscription-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.1rem;
}

.subscription-page .subscription-primary-cta {
    min-width: 230px;
}

.subscription-page .subscription-helper,
.subscription-page .subscription-note {
    margin: 0;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.55;
    font-weight: 400;
}

.subscription-page .subscription-note {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-weight: 400;
}

@media (max-width: 767px) {
    .subscription-page .subscription-layout {
        gap: 1rem;
    }

    .subscription-page .subscription-plan-card {
        padding: 1rem;
    }

    .subscription-page .subscription-plan-header,
    .subscription-page .subscription-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-page .subscription-price {
        width: fit-content;
        min-width: 0;
        align-self: flex-start;
        text-align: left;
    }

    .subscription-page .subscription-feature-list {
        grid-template-columns: 1fr;
    }

    .subscription-page .subscription-actions .std-btn,
    .subscription-page .subscription-primary-cta {
        width: 100%;
    }
}

.app-page .reports-copy {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    padding: 0 1.5rem 1.5rem;
}

/* ===== Reports Monthly Records ===== */
.reports-page .reports-page-head {
    display: grid;
    gap: 0.38rem;
}

.reports-page .reports-eyebrow {
    margin: 0;
    color: #5f7a61;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reports-page .reports-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.reports-page .reports-page-head p:not(.reports-eyebrow) {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 600;
}

.reports-page .reports-summary-card,
.reports-page .reports-receipts-card,
.reports-page .reports-history-card {
    padding-bottom: 1.25rem;
}

.reports-page .reports-summary-grid {
    padding: 1rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.reports-page .reports-summary-stat {
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #f0f2f4;
    border-radius: var(--radius-action);
    background: #fbfcfb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8rem;
}

.reports-page .reports-summary-stat span {
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reports-page .reports-summary-stat strong {
    color: #111827;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.reports-page .reports-summary-export {
    margin: 1rem 1.5rem 0;
    padding: 1rem;
    border: 1px solid #f0f2f4;
    border-radius: var(--radius-action);
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.reports-page .reports-summary-export p {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.reports-page .reports-empty-state {
    margin: 1rem 1.5rem 0;
}

.reports-page .reports-empty-state .empty-state-panel {
    width: 100%;
}

.reports-page .reports-receipts-card .card-head,
.reports-page .reports-history-card .card-head {
    padding-bottom: 0.65rem;
}

.reports-page .reports-receipts-card .card-head h2,
.reports-page .reports-history-card .card-head h2 {
    margin-bottom: 0.18rem;
}

.reports-page .reports-table-wrap {
    padding-bottom: 0;
}

.reports-page .reports-receipts-table {
    min-width: 0;
}

.reports-page .reports-receipts-table td:nth-child(3),
.reports-page .reports-receipts-table th:nth-child(3),
.reports-page .reports-receipts-table td.col-currency,
.reports-page .reports-history-table td:nth-child(4),
.reports-page .reports-history-table th:nth-child(4),
.reports-page .reports-history-table td.col-currency {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reports-page .reports-receipts-table td:nth-child(6),
.reports-page .reports-receipts-table th:nth-child(6),
.reports-page .reports-history-table td:nth-child(5),
.reports-page .reports-history-table th:nth-child(5) {
    text-align: right;
}

.reports-page .reports-receipt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 0.8rem;
    border: 1px solid rgba(95, 122, 97, 0.28);
    border-radius: 0.5rem;
    background: rgba(95, 122, 97, 0.08);
    color: #3f5a3f;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
}

.reports-page .reports-receipt-btn:hover {
    border-color: rgba(95, 122, 97, 0.5);
    background: rgba(95, 122, 97, 0.13);
}

.reports-page .reports-receipt-btn.is-summary {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #4b5563;
}

.reports-page .reports-receipt-btn:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.22);
    outline-offset: 2px;
}

.reports-page .reports-receipt-muted {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.reports-page .reports-action-muted {
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
}

.reports-page .reports-document-stack {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== Payment Hub ===== */
.payment-page .payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.payment-page .payment-kpi {
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}

.payment-page .payment-kpi-due .payment-kpi-value {
    color: #111827;
}

.payment-page .payment-kpi-label {
    margin: 0 0 0.5rem;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}

.payment-page .payment-kpi-value {
    margin: 0;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #111827;
}

.payment-page .payment-kpi-meta {
    margin: 0.55rem 0 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.4;
}

.payment-page .payment-kpi-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payment-page .payment-interac-btn {
    width: 100%;
    margin-top: 1rem;
}

.payment-page .payment-approval-link {
    display: inline-flex;
    align-items: center;
    margin-top: 0.8rem;
    color: #3730a3;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.payment-page .payment-list-card {
    padding: 0;
}

.payment-page .payment-current-card {
    padding: 1.5rem;
    display: grid;
    gap: 1.15rem;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}

.payment-page .payment-current-card .payment-current-empty-state {
    width: 100%;
}

.payment-page .payment-current-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.payment-page .payment-current-head h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.payment-page .payment-current-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #f0f2f4;
    border-bottom: 1px solid #f0f2f4;
}

.payment-page .payment-current-grid div {
    display: grid;
    gap: 0.32rem;
}

.payment-page .payment-current-grid span {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.payment-page .payment-current-grid strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.payment-page .payment-current-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.payment-page .payment-current-action,
.payment-page .payment-current-secondary {
    width: fit-content;
    min-width: min(100%, 220px);
}

.payment-page .payment-list-card .card-head {
    padding: 1.5rem 1.5rem 0.55rem;
}

.payment-page .payment-activity-table {
    font-family:
            Inter, "SF Pro Text", "SF Pro Display", "Plus Jakarta Sans", sans-serif;
    min-width: 780px;
}

.payment-page .payment-activity-table th,
.payment-page .payment-activity-table td {
    vertical-align: middle;
}

.payment-page .payment-week-row:hover {
    background: rgba(95, 122, 97, 0.05);
}

.payment-page .payment-activity-table td:nth-child(3),
.payment-page .payment-activity-table th:nth-child(3),
.payment-page .payment-activity-table td.col-currency {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payment-page .payment-activity-table td:nth-child(4),
.payment-page .payment-activity-table th:nth-child(4) {
    text-align: left;
}

.payment-page .payment-activity-table td.col-rate {
    font-variant-numeric: tabular-nums;
}

.payment-page .payment-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 118px;
    padding: 0 0.72rem;
    border: 1px solid rgba(95, 122, 97, 0.28);
    border-radius: 0.5rem;
    background: rgba(95, 122, 97, 0.08);
    color: #3f5a3f;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition:
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
}

.payment-page .payment-action-btn:hover {
    border-color: rgba(95, 122, 97, 0.5);
    background: rgba(95, 122, 97, 0.13);
    color: #3f5a3f;
}

.payment-page .payment-action-btn:disabled,
.payment-page .payment-action-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

.payment-page .payment-action-btn:disabled:hover,
.payment-page .payment-action-btn.is-disabled:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

.payment-page .payment-action-btn:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.22);
    outline-offset: 2px;
}

.payment-page .payment-current-secondary {
    border-color: #e5e7eb;
    background: #fff;
    color: #4b5563;
}

.payment-page .payment-document-note,
.payment-page .payment-document-state {
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 600;
}

.payment-page .payment-document-state {
    display: inline-block;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.payment-page .payment-document-note {
    margin-top: 0.8rem;
}

.payment-page .payment-action-stack {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
}

.payment-page .payment-summary-btn {
    border-color: #e5e7eb;
    background: #fff;
    color: #4b5563;
}

.payment-page .payment-week-header td {
    background: #f7f8f9;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding-top: 0.52rem;
    padding-bottom: 0.52rem;
    border-bottom: 1px solid #eceff1;
}

.payment-page .payment-day-row:hover {
    background: rgba(95, 122, 97, 0.06);
}

.payment-page .payment-receipt-col {
    width: 86px;
    text-align: center;
}

.payment-page .payment-receipt-btn {
    min-height: 30px;
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 0.5rem;
    background: rgba(220, 38, 38, 0.04);
    color: var(--color-adobe-red);
    font-size: 0.73rem;
    font-weight: 600;
    padding: 0 0.48rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
}

.payment-page .payment-receipt-btn:hover {
    background: rgba(220, 38, 38, 0.1);
}

.payment-page .payment-receipt-na {
    color: #9ca3af;
}

/* ===== Print-Friendly Documents ===== */
.document-page {
    min-height: 100vh;
    margin: 0;
    background: #f9fafb;
    color: #111827;
    font-family:
            "Plus Jakarta Sans",
            "Inter",
            -apple-system,
            BlinkMacSystemFont,
            sans-serif;
}

.document-shell {
    width: min(960px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
}

.document-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.document-toolbar a {
    color: #5f7a61;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.document-toolbar a:hover {
    color: #4e6750;
}

.document-print-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(95, 122, 97, 0.28);
    border-radius: 0.5rem;
    background: #5f7a61;
    color: #ffffff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.document-print-btn:hover {
    background: #4e6750;
}

.document-paper {
    padding: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.document-header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eef0f2;
}

.document-brand {
    margin-bottom: 16px;
}

.document-brand img {
    display: block;
    width: 152px;
    height: auto;
}

.document-header h1,
.document-unavailable h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.document-header p,
.document-unavailable p {
    margin: 9px 0 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 500;
}

.document-helper-line {
    max-width: 560px;
    color: #6b7280 !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
}

.document-status {
    align-self: flex-start;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(95, 122, 97, 0.2);
    border-radius: 10px;
    background: rgba(95, 122, 97, 0.06);
    color: #3f5a3f;
    text-align: right;
}

.document-status strong,
.document-status span {
    display: block;
}

.document-status strong {
    font-size: 0.8rem;
    font-weight: 600;
}

.document-status span {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.document-info-grid,
.document-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.document-info-grid div,
.document-summary-grid div {
    min-height: 62px;
    padding: 12px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fbfcfb;
}

.document-info-grid span,
.document-summary-grid span,
.document-confirmation-grid span,
.document-meta-list dt {
    display: block;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.document-info-grid strong,
.document-confirmation-grid strong,
.document-meta-list dd {
    display: block;
    margin-top: 7px;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
}

.document-summary-grid strong {
    display: block;
    margin-top: 7px;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 600;
}

.weekly-document-paper .document-summary-grid div:last-child strong {
    font-weight: 700;
}

.document-section {
    margin-top: 24px;
}

.document-section h2 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 0.96rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.document-summary-section .document-summary-grid {
    margin-top: 0;
}

.weekly-document-paper .document-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-section-note {
    margin: 12px 0 0;
    max-width: 680px;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.6;
    font-weight: 400;
}

.document-meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 20px 0 0;
    padding: 0;
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #eef0f2;
}

.document-meta-list div {
    min-width: 0;
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid #f4f5f6;
}

.document-meta-list div:last-child {
    border-bottom: 0;
}

.document-meta-list dt,
.document-meta-list dd {
    margin: 0;
}

.document-optional-details-section .document-meta-list {
    margin-top: 0;
}

.document-optional-details dd {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.document-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    font-size: 0.88rem;
}

.document-table th,
.document-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
}

.document-table th {
    background: #fbfcfb;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.document-table td {
    color: #111827;
    font-weight: 400;
}

.document-table td:first-child,
.document-table td:last-child,
.monthly-document-paper .document-table td:nth-child(3) {
    font-weight: 600;
}

.document-table tr:last-child td {
    border-bottom: 0;
}

.document-confirmation {
    padding: 16px 18px;
    border: 1px solid rgba(95, 122, 97, 0.18);
    border-radius: 10px;
    background: rgba(95, 122, 97, 0.045);
}

.document-confirmation .document-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    border-top: 0;
    border-bottom: 0;
}

.document-confirmation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.document-confirmation p,
.document-note,
.document-empty {
    margin: 12px 0 0;
    color: #4b5563;
    font-size: 0.84rem;
    line-height: 1.6;
    font-weight: 400;
}

.document-available-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #eef0f2;
}

.document-available-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #eef0f2;
    background: #ffffff;
}

.document-available-list span {
    color: #4b5563;
    font-weight: 500;
}

.document-available-list strong {
    color: #3f5a3f;
    font-weight: 600;
}

.document-disclaimer {
    margin: 26px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eef0f2;
    color: #6b7280;
    font-size: 0.74rem;
    line-height: 1.6;
    font-weight: 400;
}

.document-unavailable {
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .document-shell {
        width: min(100% - 24px, 960px);
        padding: 20px 0;
    }

    .document-paper {
        padding: 24px;
    }

    .document-header,
    .document-toolbar,
    .document-available-list li {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-status {
        width: 100%;
        text-align: left;
    }

    .document-info-grid,
    .document-summary-grid,
    .document-confirmation-grid,
    .document-meta-list {
        grid-template-columns: 1fr;
    }

    .document-meta-list div {
        padding-right: 0;
    }

    .document-table {
        font-size: 0.8rem;
    }

    .document-table th,
    .document-table td {
        padding: 10px;
    }
}

@page {
    size: letter;
    margin: 0.5in;
}

@media print {
    .document-page {
        background: #ffffff;
    }

    .document-shell {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .document-toolbar {
        display: none;
    }

    .document-paper {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .document-status,
    .document-info-grid div,
    .document-summary-grid div,
    .document-confirmation,
    .document-available-list li {
        break-inside: avoid;
    }
}

/* ===== Payment Confirmation Panel ===== */
body.payment-panel-open {
    overflow: hidden;
}

.payment-confirmation-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
    background: rgba(17, 24, 39, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.payment-confirmation-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.payment-confirmation-panel {
    width: min(440px, 100%);
    height: 100%;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -18px 0 40px rgba(17, 24, 39, 0.12);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
}

.payment-confirmation-overlay.is-open .payment-confirmation-panel {
    transform: translateX(0);
}

.payment-confirmation-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eef0f2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.payment-confirmation-header h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.payment-confirmation-header p {
    margin: 0.32rem 0 0;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 600;
}

.payment-panel-close {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
}

.payment-panel-close:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.payment-panel-close:focus-visible {
    outline: 2px solid rgba(95, 122, 97, 0.22);
    outline-offset: 2px;
}

.payment-confirmation-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: grid;
    align-content: start;
    gap: 1.1rem;
}

.payment-panel-context {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
}

.payment-panel-context p {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.payment-panel-context span {
    display: block;
    margin-top: 0.38rem;
    color: #6b7280;
    font-size: 0.86rem;
    font-weight: 500;
}

.payment-panel-summary {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
}

.payment-panel-row {
    min-height: 40px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #f0f2f4;
}

@media (max-height: 700px) {
    .payment-confirmation-body {
        gap: 0.7rem;
    }
    .payment-panel-row {
        min-height: 32px;
    }
    .payment-panel-next {
        display: none;
    }
}

.payment-panel-row:last-child {
    border-bottom: none;
}

.payment-panel-row span {
    color: #6b7280;
    font-size: 0.86rem;
    font-weight: 500;
}

.payment-panel-row strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
}

.payment-panel-next {
    display: grid;
    gap: 0.45rem;
}

.payment-panel-next h3,
.payment-panel-note-label {
    margin: 0;
    color: #111827;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.payment-panel-next p {
    margin: 0;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.65;
    font-weight: 600;
}

.payment-panel-note {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.8rem 0.9rem;
    color: #111827;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    box-sizing: border-box;
}

.payment-panel-note:focus {
    border-color: #5f7a61;
    outline: 2px solid rgba(95, 122, 97, 0.16);
    outline-offset: 0;
}

.payment-panel-note-help {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 600;
}

.payment-confirmation-footer {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid #eef0f2;
    background: #fff;
    margin: 0 -1.5rem -1.1rem;
}

.payment-panel-disclaimer {
    margin: 0 0 0.9rem;
    color: #6b7280;
    font-size: 0.76rem;
    line-height: 1.45;
    font-weight: 600;
}

.payment-panel-actions {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 0.75rem;
    width: 100%;
}

/* ===== Hours Advanced Calendar ===== */
.entries-page .entries-main-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    gap: 1.5rem;
    align-items: stretch;
}

.entries-page .entries-main-split > .app-card {
    height: 100%;
}

.entries-page .entries-calendar-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.entries-page .entries-calendar-head {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.entries-page .entries-context-copy {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
}

.entries-page .entries-calendar-nav {
    display: inline-grid;
    width: min(100%, 320px);
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.entries-page .entries-nav-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    min-height: 34px;
    color: #4b5563;
    cursor: pointer;
}

.entries-page .entries-period-label {
    min-width: 180px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    letter-spacing: 0.02em;
}

.entries-page .entries-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 6px;
}

.entries-page .entries-weekdays span {
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.entries-page .entries-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
    touch-action: none;
}

.entries-page .entries-day {
    position: relative;
    background: #fff;
    width: 100%;
    aspect-ratio: 1 / 0.9;
    min-height: 58px;
    max-height: 90px;
    border: none;
    cursor: pointer;
    transition:
            background 0.18s ease,
            color 0.18s ease;
    text-align: left;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
}

.entries-page .entries-day:hover {
    background: #f9fbfa;
}

.entries-page .entries-day::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.5px;
    right: -1.5px;
    height: 34px;
    border-radius: 0;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.entries-page .entries-day.is-in-range::before {
    background: var(--accent-light);
    opacity: 1;
}

.entries-page .entries-day.is-range-start::before {
    left: 50%;
    right: -1.5px;
    background: var(--accent-light);
    border-radius: 0;
    opacity: 1;
}

.entries-page .entries-day.is-range-end::before {
    left: -1.5px;
    right: 50%;
    background: var(--accent-light);
    border-radius: 0;
    opacity: 1;
}

.entries-page .entries-day.is-in-range.is-week-start::before {
    left: 8px;
    border-radius: 999px 0 0 999px;
}

.entries-page .entries-day.is-in-range.is-week-end::before {
    right: 8px;
    border-radius: 0 999px 999px 0;
}

.entries-page .entries-day.is-range-start.is-week-end::before,
.entries-page .entries-day.is-range-end.is-week-start::before {
    opacity: 0;
}

.entries-page .entries-day.is-range-start,
.entries-page .entries-day.is-range-end,
.entries-page .entries-day.is-in-range {
    z-index: 3;
}

.entries-page .entries-day.is-outside {
    background: #fbfcfc;
}

.entries-page .entries-day > * {
    position: relative;
    z-index: 2;
}

.entries-page .entries-day-number {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1;
}

.entries-page .entries-day.is-today .entries-day-number {
    background: var(--accent-light);
    color: #3f5a3f;
}

.entries-page .entries-day.is-range-start .entries-day-number,
.entries-page .entries-day.is-range-end .entries-day-number,
.entries-page .entries-day.is-single .entries-day-number {
    border: none;
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 39, 34, 0.12);
}

.entries-page .entries-day-dot {
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--primary);
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.entries-page .entries-day-dot.is-pending {
    background: #d97706;
}

.entries-page .entries-day-dot.is-sent {
    background: #4f65a5;
}

.entries-page .entries-day-dot.is-paid {
    background: var(--primary);
}

.entries-page .entries-side-panel {
    position: static;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    justify-content: flex-start;
    min-height: 0;
    overflow: auto;
}

.entries-page .entries-side-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.entries-page .entries-empty-state {
    border: 1px dashed #d1d5db;
    border-radius: var(--radius-action);
    padding: 18px 14px;
    text-align: center;
    margin-bottom: 8px;
    transition:
            opacity 0.2s ease,
            max-height 0.2s ease,
            padding 0.2s ease,
            margin 0.2s ease;
    max-height: 240px;
    opacity: 1;
}

.entries-page .entries-empty-state.is-hidden {
    display: block !important;
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
}

.entries-page .entries-empty-graphic {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background: var(--color-sage-tint);
    color: var(--color-primary-sage);
}

.entries-page .entries-empty-state h3 {
    font-size: 0.94rem;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 6px;
}

.entries-page .entries-empty-state p {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}

.entries-page .entries-form-content {
    width: 100%;
    transition:
            opacity 0.2s ease,
            max-height 0.2s ease;
    max-height: 800px;
    opacity: 1;
    visibility: visible;
}

.entries-page .entries-form-content.is-hidden {
    display: block !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

.is-hidden {
    display: none !important;
}

.entries-page .entries-input-card {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entries-page .entries-input-card-head {
    display: grid;
    gap: 6px;
}

.entries-page .entries-input-kicker {
    color: #4e6750;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.entries-page .entries-input-copy {
    margin: 0;
    color: #667085;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.entries-page .entries-side-panel .form-group,
.entries-page .entries-side-panel .form-input,
.entries-page .entries-side-quick,
.entries-page .entries-side-panel .std-btn {
    width: 100%;
}

.entries-page .entries-side-panel .form-group {
    margin-bottom: 8px;
}

.entries-page .entries-side-panel .form-label {
    margin-bottom: 4px;
}

.entries-page .entries-side-panel .form-input {
    min-height: 36px;
}

.entries-page .entries-hours-group {
    margin-bottom: 0 !important;
}

.entries-page .entries-stepper {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
}

.entries-page .entries-stepper-btn {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(95, 122, 97, 0.24);
    background: rgba(255, 255, 255, 0.86);
    color: #374151;
    font-size: 1.12rem;
    font-weight: 600;
    cursor: pointer;
    padding-bottom: 5px;
    transition:
            background 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease;
}

.entries-page .entries-stepper-btn:hover,
.entries-page .entries-stepper-btn:focus-visible {
    background: rgba(95, 122, 97, 0.1);
    border-color: rgba(95, 122, 97, 0.4);
    color: #526452;
}

.entries-page .entries-stepper-btn:disabled,
.entries-page .entries-side-quick-btn:disabled,
.entries-page .entries-note-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.entries-page .entries-stepper-input {
    min-height: 44px !important;
    padding: 0 10px;
    text-align: center;
    color: #111827;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: rgba(255, 255, 255, 0.92);
}

.entries-page .entries-stepper-input::-webkit-outer-spin-button,
.entries-page .entries-stepper-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.entries-page .entries-stepper-input[type="number"] {
    -moz-appearance: textfield;
}

.entries-page .entries-stepper-input:disabled,
.entries-page .entries-notes-input:disabled {
    background: #f9fafb;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
}

.entries-page .entries-side-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.entries-page .entries-quick-label {
    margin-bottom: -4px;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.entries-page .entries-side-quick-btn {
    width: 100%;
    border: 1px solid rgba(95, 122, 97, 0.22);
    background: rgba(255, 255, 255, 0.76);
    min-height: 40px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
            background 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease;
}

.entries-page .entries-side-quick-btn:hover,
.entries-page .entries-side-quick-btn:focus-visible {
    background: rgba(95, 122, 97, 0.08);
}

.entries-page .entries-side-quick-btn.is-active {
    border-color: rgba(95, 122, 97, 0.42);
    background: rgba(95, 122, 97, 0.12);
    color: #526452;
}

.entries-page .entries-bulk-summary {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.82rem;
    color: #4e6750;
    font-weight: 600;
    line-height: 1.45;
}

.entries-page .entries-note-toggle {
    width: fit-content;
    border: 0;
    padding: 0;
    background: transparent;
    color: #667085;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}

.entries-page .entries-note-toggle:hover,
.entries-page .entries-note-toggle:focus-visible {
    color: var(--primary-dark);
    text-decoration: underline;
    outline: none;
}

.entries-page .entries-notes-group {
    margin-bottom: 0 !important;
}

.entries-page .entries-notes-input {
    height: 56px;
    min-height: 56px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.72);
    color: #374151;
    resize: none;
}

.entries-page .entries-history-card {
    padding: 0;
}

.entries-page .entries-history-card .entries-log-row[data-date] {
    cursor: pointer;
    transition: background 0.18s ease;
}

.entries-page .entries-history-card .entries-log-row[data-date]:hover {
    background: rgba(95, 122, 97, 0.06);
}

.entries-page .entries-history-card .card-head {
    padding: 1.5rem 1.5rem 0.4rem;
}

.entries-page .activity-table th,
.entries-page .activity-table td {
    vertical-align: middle;
}

.entries-page .activity-table td:nth-child(4),
.entries-page .activity-table th:nth-child(4),
.entries-page .activity-table td.col-currency {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entries-page .activity-table td.col-rate {
    font-variant-numeric: tabular-nums;
}

.entries-page .entries-week-header td {
    background: #f7f8f9;
    padding: 0;
    border-bottom: 1px solid #eceff1;
}

.entries-page .entries-week-toggle {
    width: 100%;
    min-height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: none;
    background: transparent;
    color: #5c6675;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.65rem 0.7rem;
    cursor: pointer;
    text-align: left;
}

.entries-page .entries-week-toggle-label {
    flex: 0 0 auto;
    font-size: 0.78rem;
}

.entries-page .entries-week-more-row td {
    padding: 0.65rem 0.7rem 0.85rem;
    text-align: center;
    background: #ffffff;
}

.payment-page .payment-list-card,
.reports-page .reports-receipts-card,
.reports-page .reports-history-card,
.entries-page .entries-history-card {
    width: 100%;
}

.payment-page .payment-list-card .card-head,
.reports-page .reports-receipts-card .card-head,
.reports-page .reports-history-card .card-head,
.entries-page .entries-history-card .card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1.4rem 1.6rem 0.72rem;
}

.reports-page .reports-receipts-card .card-head > div,
.reports-page .reports-history-card .card-head > div {
    display: grid;
    grid-column: 1;
    gap: 0.3rem;
}

.payment-page .payment-list-card .card-head h2,
.reports-page .reports-receipts-card .card-head h2,
.reports-page .reports-history-card .card-head h2,
.entries-page .entries-history-card .card-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.payment-page .payment-list-card .card-head span,
.reports-page .reports-receipts-card .card-head span,
.reports-page .reports-history-card .card-head span,
.entries-page .entries-history-card .card-head span {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.55;
}

.payment-page .payment-list-card .card-head h2,
.payment-page .payment-list-card .card-head > span,
.entries-page .entries-history-card .card-head h2,
.entries-page .entries-history-card .card-head > span {
    grid-column: 1;
}

.payment-page .payment-list-card .card-head .history-section-toggle,
.reports-page .reports-receipts-card .card-head .history-section-toggle,
.reports-page .reports-history-card .card-head .history-section-toggle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.payment-page .payment-list-card .table-wrap,
.reports-page .reports-table-wrap,
.entries-page .entries-history-card .table-wrap {
    padding: 0 1.6rem 1.35rem;
}

.payment-page .payment-activity-table,
.reports-page .reports-receipts-table,
.reports-page .reports-history-table,
.entries-page .entries-history-card .activity-table {
    table-layout: fixed;
    border-collapse: collapse;
}

.payment-page .payment-activity-table,
.reports-page .reports-receipts-table {
    min-width: 860px;
}

.entries-page .entries-history-card .activity-table {
    min-width: 760px;
}

.reports-page .reports-history-table {
    min-width: 720px;
}

.payment-page .payment-activity-table th,
.payment-page .payment-activity-table td,
.reports-page .reports-receipts-table th,
.reports-page .reports-receipts-table td,
.reports-page .reports-history-table th,
.reports-page .reports-history-table td,
.entries-page .entries-history-card .activity-table th,
.entries-page .entries-history-card .activity-table td {
    padding: 0.94rem 0.85rem;
    border-bottom-color: #eef0f2;
    vertical-align: middle;
}

.payment-page .payment-activity-table th,
.reports-page .reports-receipts-table th,
.reports-page .reports-history-table th,
.entries-page .entries-history-card .activity-table th {
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.payment-page .payment-activity-table td,
.reports-page .reports-receipts-table td,
.reports-page .reports-history-table td,
.entries-page .entries-history-card .activity-table td {
    color: #111827;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.entries-page .entries-history-card .entries-week-header td {
    padding: 0.62rem 0.85rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: #f7f8f9;
}

.payment-page .payment-activity-table th:nth-child(1),
.reports-page .reports-receipts-table th:nth-child(1) {
    width: 20%;
}

.payment-page .payment-activity-table th:nth-child(2),
.reports-page .reports-receipts-table th:nth-child(2) {
    width: 10%;
}

.payment-page .payment-activity-table th:nth-child(3),
.reports-page .reports-receipts-table th:nth-child(3) {
    width: 13%;
}

.payment-page .payment-activity-table th:nth-child(4),
.reports-page .reports-receipts-table th:nth-child(4) {
    width: 20%;
}

.payment-page .payment-activity-table th:nth-child(5),
.reports-page .reports-receipts-table th:nth-child(5) {
    width: 18%;
}

.payment-page .payment-activity-table th:nth-child(6),
.reports-page .reports-receipts-table th:nth-child(6) {
    width: 19%;
}

.reports-page .reports-history-table th:nth-child(1) {
    width: 26%;
}

.reports-page .reports-history-table th:nth-child(2) {
    width: 14%;
}

.reports-page .reports-history-table th:nth-child(3) {
    width: 14%;
}

.reports-page .reports-history-table th:nth-child(4) {
    width: 20%;
}

.reports-page .reports-history-table th:nth-child(5) {
    width: 26%;
}

.entries-page .entries-history-card .activity-table th:nth-child(1) {
    width: 32%;
}

.entries-page .entries-history-card .activity-table th:nth-child(2) {
    width: 11%;
}

.entries-page .entries-history-card .activity-table th:nth-child(3) {
    width: 13%;
}

.entries-page .entries-history-card .activity-table th:nth-child(4) {
    width: 20%;
}

.entries-page .entries-history-card .activity-table th:nth-child(5) {
    width: 24%;
}

.payment-page .payment-activity-table th:nth-child(3),
.payment-page .payment-activity-table td:nth-child(3),
.reports-page .reports-receipts-table th:nth-child(3),
.reports-page .reports-receipts-table td:nth-child(3),
.reports-page .reports-history-table th:nth-child(4),
.reports-page .reports-history-table td:nth-child(4),
.entries-page .entries-history-card .activity-table th:nth-child(4),
.entries-page .entries-history-card .activity-table td:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payment-page .payment-activity-table th:nth-child(4),
.payment-page .payment-activity-table td:nth-child(4),
.reports-page .reports-receipts-table th:nth-child(4),
.reports-page .reports-receipts-table td:nth-child(4),
.reports-page .reports-history-table th:nth-child(5),
.reports-page .reports-history-table td:nth-child(5),
.entries-page .entries-history-card .activity-table th:nth-child(5),
.entries-page .entries-history-card .activity-table td:nth-child(5) {
    text-align: left;
}

.payment-page .payment-activity-table th:nth-child(3),
.payment-page .payment-activity-table td:nth-child(3),
.reports-page .reports-receipts-table th:nth-child(3),
.reports-page .reports-receipts-table td:nth-child(3) {
    padding-right: 1.5rem;
}

.payment-page .payment-activity-table th:nth-child(4),
.payment-page .payment-activity-table td:nth-child(4),
.reports-page .reports-receipts-table th:nth-child(4),
.reports-page .reports-receipts-table td:nth-child(4) {
    padding-left: 1.35rem;
    padding-right: 1.2rem;
}

.payment-page .payment-activity-table th:nth-child(5),
.payment-page .payment-activity-table td:nth-child(5),
.reports-page .reports-receipts-table th:nth-child(5),
.reports-page .reports-receipts-table td:nth-child(5) {
    padding-left: 1.6rem;
}

.payment-page .payment-activity-table th:nth-child(6),
.payment-page .payment-activity-table td:nth-child(6),
.reports-page .reports-receipts-table th:nth-child(6),
.reports-page .reports-receipts-table td:nth-child(6) {
    padding-left: 1rem;
}

.entries-page .entries-history-card .activity-table th:nth-child(4),
.entries-page .entries-history-card .activity-table td:nth-child(4) {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
    text-align: center;
}

.entries-page .entries-history-card .activity-table th:nth-child(5),
.entries-page .entries-history-card .activity-table td:nth-child(5) {
    padding-left: 1.85rem;
}

.payment-page .payment-activity-table th:nth-child(6),
.payment-page .payment-activity-table td:nth-child(6),
.reports-page .reports-receipts-table th:nth-child(6),
.reports-page .reports-receipts-table td:nth-child(6) {
    text-align: left;
}

.payment-page .payment-activity-table .activity-status,
.reports-page .reports-receipts-table .activity-status,
.entries-page .entries-history-card .activity-status,
.payment-page .payment-document-state {
    justify-content: center;
    white-space: nowrap;
}

.payment-page .payment-action-stack,
.reports-page .reports-document-stack {
    justify-content: flex-start;
}

.reports-page .reports-receipt-muted,
.reports-page .reports-action-muted,
.payment-page .payment-document-state {
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .payment-page .payment-summary-grid {
        grid-template-columns: 1fr;
    }

    .entries-page .entries-main-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-page .dashboard-kpi-grid,
    .app-page .dashboard-analytics-grid {
        grid-template-columns: 1fr;
    }

    .app-page .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-page .settings-column {
        display: contents;
    }

    .settings-page #parent-account {
        order: 1;
    }

    .settings-page #nanny-profile {
        order: 2;
    }

    .settings-page .settings-billing-card {
        order: 3;
    }

    .settings-page .settings-support-card {
        order: 4;
    }

    .reports-page .reports-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-page .payment-current-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .payment-page .payment-current-grid {
        grid-template-columns: 1fr;
    }

    .payment-page .payment-current-actions,
    .payment-page .payment-current-action,
    .payment-page .payment-current-secondary {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .reports-page .reports-summary-grid {
        grid-template-columns: 1fr;
    }

    .reports-page .reports-summary-export {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-page .reports-summary-export .std-btn {
        width: 100%;
    }

    .reports-page .reports-table-wrap {
        overflow-x: visible;
    }

    .reports-page .reports-receipts-table,
    .reports-page .reports-history-table,
    .reports-page .reports-receipts-table thead,
    .reports-page .reports-history-table thead,
    .reports-page .reports-receipts-table tbody,
    .reports-page .reports-history-table tbody,
    .reports-page .reports-receipts-table tr,
    .reports-page .reports-history-table tr,
    .reports-page .reports-receipts-table th,
    .reports-page .reports-history-table th,
    .reports-page .reports-receipts-table td {
        display: block;
        width: 100%;
    }

    .reports-page .reports-history-table td {
        display: block;
        width: 100%;
    }

    .reports-page .reports-receipts-table thead,
    .reports-page .reports-history-table thead {
        display: none;
    }

    .reports-page .reports-receipts-table tr,
    .reports-page .reports-history-table tr {
        padding: 0.8rem 0;
        border-bottom: 1px solid #f0f2f4;
    }

    .reports-page .reports-receipts-table td,
    .reports-page .reports-history-table td {
        padding: 0.42rem 0;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .reports-page .reports-receipts-table td::before,
    .reports-page .reports-history-table td::before {
        content: attr(data-label);
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-align: left;
    }

    .reports-page .reports-receipts-table td:nth-child(3),
    .reports-page .reports-receipts-table th:nth-child(3),
    .reports-page .reports-receipts-table td.col-currency,
    .reports-page .reports-history-table td:nth-child(4),
    .reports-page .reports-history-table th:nth-child(4),
    .reports-page .reports-history-table td.col-currency {
        text-align: right;
    }
}

@media (max-width: 640px) {
    .app-page .std-profile-main-name {
        max-width: 96px;
    }

    .app-page .std-profile-role {
        display: none;
    }

    .settings-page .settings-danger-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-page .settings-account-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-page .settings-billing-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-page .settings-danger-actions .std-btn {
        width: 100%;
    }

    .settings-page .settings-account-actions .std-btn {
        width: 100%;
    }

    .payment-confirmation-overlay {
        align-items: flex-end;
    }

    .payment-confirmation-panel {
        width: 100%;
        height: auto;
        max-height: 94vh;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }

    .payment-confirmation-overlay.is-open .payment-confirmation-panel {
        transform: translateY(0);
    }

    .payment-confirmation-header,
    .payment-confirmation-body,
    .payment-confirmation-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .payment-panel-actions {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 767px) {
    .app-page {
        overflow-x: hidden;
    }

    .app-page .std-sidebar {
        display: none;
    }

    .app-page .std-main {
        margin-left: 0;
        min-width: 0;
    }

    .app-page .std-topbar {
        left: 0;
        height: 72px;
    }

    .app-page .std-topbar-inner {
        max-width: none;
        padding: 0 16px;
        gap: 10px;
    }

    .app-page .std-topbar-title {
        font-size: 17px;
    }

    .app-page .std-topbar-actions {
        gap: 8px;
        min-width: 0;
    }

    .app-page .std-topbar-actions [data-quick-add] {
        display: none;
    }

    .app-page .std-icon-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }

    .app-page .std-profile-btn {
        min-width: 0;
        max-width: 148px;
        padding: 0 8px;
    }

    .app-page .std-profile-main-name {
        max-width: 76px;
    }

    .app-page .std-profile-role,
    .app-page .std-profile-btn .fa-chevron-down {
        display: none;
    }

    .app-page .std-nanny-switcher {
        right: 0;
        width: min(280px, calc(100vw - 32px));
    }

    .app-page .std-account-menu {
        right: 0;
        width: min(292px, calc(100vw - 32px));
    }

    .app-page .std-nanny-menu-card {
        width: 100%;
    }

    .app-page .std-account-menu-card {
        width: 100%;
    }

    .app-page .std-content {
        width: 100%;
        max-width: none;
        padding: calc(72px + 16px) 16px calc(92px + env(safe-area-inset-bottom));
        gap: 16px;
        box-sizing: border-box;
    }

    .app-page .dashboard-content,
    .app-page .entries-layout,
    .app-page .payment-layout,
    .app-page .settings-layout,
    .app-page .reports-layout {
        gap: 16px;
    }

    .app-page .trial-ended-banner {
        align-items: stretch;
        flex-direction: column;
        padding: 0.95rem;
    }

    .app-page .trial-ended-banner .std-btn {
        width: 100%;
    }

    .app-page .app-card {
        min-width: 0;
    }

    .app-page .dashboard-kpi-grid,
    .app-page .dashboard-analytics-grid,
    .app-page .settings-layout,
    .reports-page .reports-summary-grid,
    .payment-page .payment-current-grid,
    .entries-page .entries-main-split {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .app-page .kpi-card,
    .app-page .quick-pay-card,
    .app-page .settings-card,
    .payment-page .payment-current-card,
    .entries-page .entries-calendar-card,
    .entries-page .entries-side-panel {
        padding: 16px;
    }

    .app-page .card-head,
    .payment-page .payment-list-card .card-head,
    .reports-page .reports-receipts-card .card-head,
    .reports-page .reports-history-card .card-head,
    .entries-page .entries-history-card .card-head {
        padding: 16px 16px 8px;
    }

    .payment-page .payment-list-card .card-head,
    .reports-page .reports-receipts-card .card-head,
    .reports-page .reports-history-card .card-head,
    .entries-page .entries-history-card .card-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .payment-detail-page .payment-detail-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .payment-detail-page .payment-detail-status {
        justify-content: flex-start;
        padding-top: 0;
    }

    .payment-detail-page .payment-detail-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .payment-detail-page .payment-detail-lock-note,
    .payment-detail-page .payment-detail-edit-form,
    .payment-detail-page .payment-detail-delete-confirm,
    .payment-detail-page .payment-detail-note {
        margin-inline: 16px;
    }

    .payment-detail-page .payment-detail-edit-grid {
        grid-template-columns: 1fr;
    }

    .payment-detail-page .payment-detail-edit-actions {
        justify-content: stretch;
    }

    .payment-detail-page .payment-detail-edit-actions .std-btn {
        flex: 1 1 0;
    }

    .payment-detail-page .payment-detail-delete-confirm {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-detail-page .payment-detail-delete-confirm-actions {
        justify-content: stretch;
    }

    .payment-detail-page .payment-detail-delete-confirm-actions .std-btn {
        flex: 1 1 0;
    }

    .payment-detail-page .payment-detail-total {
        padding-inline: 16px;
    }

    .app-page .table-wrap,
    .reports-page .reports-table-wrap {
        padding: 0 16px 16px;
        overflow-x: visible;
    }

    .app-page .activity-table {
        min-width: 0;
    }

    .app-page .activity-table,
    .app-page .activity-table thead,
    .app-page .activity-table tbody,
    .app-page .activity-table tr,
    .app-page .activity-table th,
    .app-page .activity-table td {
        display: block;
        width: 100%;
    }

    .app-page .activity-table thead {
        display: none;
    }

    .app-page .activity-table tr {
        padding: 0.82rem 0;
        border-bottom: 1px solid #f0f2f4;
    }

    .app-page .activity-table tr:last-child {
        border-bottom: none;
    }

    .app-page .activity-table td {
        padding: 0.42rem 0;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .payment-page .payment-action-stack,
    .reports-page .reports-document-stack {
        align-items: center;
        justify-content: flex-end;
    }

    .entries-page .entries-history-card .activity-table td:nth-child(4),
    .entries-page .entries-history-card .activity-table td:nth-child(5) {
        padding: 0.42rem 0;
        text-align: left;
    }

    .app-page .activity-table td::before {
        content: attr(data-label);
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

    .app-page .activity-table td[colspan] {
        display: block;
        text-align: left;
    }

    .app-page .activity-table td[colspan]::before,
    .entries-page .entries-week-header td::before {
        content: none;
    }

    .entries-page .entries-week-header td {
        display: block;
        padding: 0.65rem 0.75rem;
        text-align: left;
    }

    .app-page .activity-status {
        text-align: left;
        line-height: 1.25;
        white-space: normal;
    }

    .app-page .activity-table td[data-label="Status"] .activity-status {
        max-width: 64%;
        justify-content: center;
        text-align: center;
    }
    .app-page .activity-table td[data-label="Action"],
    .app-page .activity-table td[data-label="Receipt"],
    .app-page .activity-table td[data-label="Document"] {
        text-align: right;
    }

    .app-page .activity-table td[data-label="Action"]::before,
    .app-page .activity-table td[data-label="Receipt"]::before,
    .app-page .activity-table td[data-label="Document"]::before {
        margin-bottom: 0.1rem;
    }

    .payment-page .payment-activity-table th:nth-child(6),
    .payment-page .payment-activity-table td:nth-child(6),
    .reports-page .reports-receipts-table th:nth-child(6),
    .reports-page .reports-receipts-table td:nth-child(6) {
        padding-left: 0px;
    }

    .payment-page .payment-action-btn,
    .reports-page .reports-receipt-btn {
        justify-content: center;
    }

    .payment-page .payment-activity-table th:nth-child(4),
    .payment-page .payment-activity-table td:nth-child(4),
    .reports-page .reports-receipts-table th:nth-child(4),
    .reports-page .reports-receipts-table td:nth-child(4),
    .payment-page .payment-activity-table th:nth-child(5),
    .payment-page .payment-activity-table td:nth-child(5),
    .reports-page .reports-receipts-table th:nth-child(5),
    .reports-page .reports-receipts-table td:nth-child(5),
    .payment-page .payment-activity-table th:nth-child(3),
    .payment-page .payment-activity-table td:nth-child(3),
    .reports-page .reports-receipts-table th:nth-child(3),
    .reports-page .reports-receipts-table td:nth-child(3) {
        padding-left: 0px;
        padding-right: 0px;
    }

    .payment-page .payment-action-stack,
    .reports-page .reports-document-stack {
        width: 100%;
    }

    .dashboard-page .kpi-value {
        font-size: clamp(1.75rem, 10vw, 2.45rem);
    }

    .dashboard-page .kpi-status-value {
        font-size: 1.05rem;
        line-height: 1.35;
        letter-spacing: -0.02em;
    }

    .dashboard-page .period-summary-row,
    .payment-page .payment-current-grid div {
        min-width: 0;
    }

    .payment-page .payment-current-actions,
    .payment-page .payment-current-action,
    .payment-page .payment-current-secondary,
    .app-page.dashboard-page .quick-pay-card .std-btn {
        width: 100%;
    }

    .entries-page .entries-calendar-nav {
        width: 100%;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
    }

    .entries-page .entries-period-label {
        min-width: 0;
        font-size: 12px;
    }

    .entries-page .entries-weekdays {
        margin-bottom: 4px;
    }

    .entries-page .entries-weekdays span {
        font-size: 10px;
    }

    .entries-page .entries-day {
        aspect-ratio: 1 / 1;
        min-height: 42px;
        max-height: none;
    }

    .entries-page .entries-day-number {
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
        font-size: 12px;
    }

    .entries-page .entries-day::before {
        height: 28px;
    }

    .entries-page .entries-day-dot {
        bottom: 4px;
        width: 4px;
        height: 4px;
    }

    .reports-page .reports-page-head h1 {
        font-size: 1.75rem;
    }

    .reports-page .reports-summary-grid {
        padding: 12px 16px 0;
    }

    .reports-page .reports-summary-stat {
        min-height: 96px;
    }

    .reports-page .reports-summary-export,
    .reports-page .reports-empty-state {
        margin-left: 16px;
        margin-right: 16px;
    }

    .settings-page .settings-danger-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-page .settings-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .settings-page .settings-inline-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .settings-page .settings-row-value {
        text-align: left;
    }

    .settings-page .settings-status-badge {
        align-self: flex-start;
    }

    .settings-page .settings-toggle-row {
        align-items: flex-start;
        padding: 0.9rem;
    }

    .settings-page .settings-danger-actions .std-btn,
    .settings-page .rate-save-row .std-btn {
        width: 100%;
    }

    .app-page .form-input,
    .app-page textarea,
    .app-page select {
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 1200;
        min-height: 66px;
        padding: 7px 8px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        border: 1px solid rgba(229, 231, 235, 0.92);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 28px rgba(17, 24, 39, 0.11);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-link {
        position: relative;
        min-width: 0;
        min-height: 52px;
        border-radius: 0.5rem;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 5px;
        color: #6b7280;
        font-size: 0.66rem;
        line-height: 1;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.18s ease;
    }

    .mobile-bottom-link::before {
        content: "";
        position: absolute;
        inset: 5px 6px;
        border-radius: 0.5rem;
        background: var(--accent-light);
        opacity: 0;
        transition: opacity 0.18s ease;
    }

    .mobile-bottom-link i {
        position: relative;
        z-index: 1;
        font-size: 0.94rem;
    }

    .mobile-bottom-link span {
        position: relative;
        z-index: 1;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus-visible {
        color: #4b5563;
        outline: none;
    }

    .mobile-bottom-link:hover::before,
    .mobile-bottom-link:focus-visible::before {
        opacity: 0.72;
    }

    .mobile-bottom-link.active {
        color: #5f7a61;
        font-weight: 600;
    }

    .mobile-bottom-link.active::before {
        opacity: 1;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .app-page {
        overflow-x: hidden;
    }

    .app-page .table-wrap,
    .reports-page .reports-table-wrap {
        overflow-x: visible;
    }

    .app-page .activity-table {
        min-width: 0;
    }

    .app-page .activity-table,
    .app-page .activity-table thead,
    .app-page .activity-table tbody,
    .app-page .activity-table tr,
    .app-page .activity-table th,
    .app-page .activity-table td {
        display: block;
        width: 100%;
    }

    .app-page .activity-table thead {
        display: none;
    }

    .app-page .activity-table tr {
        padding: 0.82rem 0;
        border-bottom: 1px solid #f0f2f4;
    }

    .app-page .activity-table tr:last-child {
        border-bottom: none;
    }

    .app-page .activity-table td {
        padding: 0.42rem 0;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .entries-page .entries-history-card .activity-table td:nth-child(4),
    .entries-page .entries-history-card .activity-table td:nth-child(5) {
        padding: 0.42rem 0;
        text-align: left;
    }

    .app-page .activity-table td::before {
        content: attr(data-label);
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

    .app-page .activity-table td[colspan] {
        display: block;
        text-align: left;
    }

    .app-page .activity-table td[colspan]::before,
    .entries-page .entries-week-header td::before {
        content: none;
    }

    .entries-page .entries-week-header td {
        display: block;
        padding: 0.65rem 0.75rem;
        text-align: left;
    }

    .app-page .activity-status {
        line-height: 1.25;
        white-space: normal;
    }

    .app-page .activity-table td[data-label="Status"] .activity-status {
        max-width: 64%;
        justify-content: center;
        text-align: center;
    }

    .app-page .activity-table td[data-label="Action"],
    .app-page .activity-table td[data-label="Receipt"],
    .app-page .activity-table td[data-label="Document"] {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }

    .payment-page .payment-action-btn,
    .reports-page .reports-receipt-btn {
        width: 100%;
        justify-content: center;
    }

    .payment-page .payment-action-stack,
    .reports-page .reports-document-stack {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .entries-page .entries-history-card .table-wrap {
        padding: 0 16px 18px;
        overflow-x: visible;
    }

    .entries-page .entries-history-card .activity-table,
    .entries-page .entries-history-card .activity-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .entries-page .entries-history-card .activity-table thead {
        display: none;
    }

    .entries-page .entries-history-card .entries-week-header {
        display: block;
        padding: 0.55rem 0 0.28rem;
        border-bottom: none;
    }

    .entries-page .entries-history-card .entries-week-header td {
        display: block;
        width: auto;
        padding: 0.48rem 0.72rem;
        border: 1px solid #edf0ed;
        border-radius: 0.5rem;
        background: #f7f8f7;
        color: #6b7280;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.35;
        text-align: left;
    }

    .entries-page .entries-history-card .entries-log-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
      "date date date status"
      "hours rate . status"
      "total total total status";
        column-gap: 0.35rem;
        row-gap: 0.22rem;
        align-items: start;
        width: 100%;
        padding: 0.86rem 0;
        border-bottom: 1px solid #f0f2f4;
    }

    .entries-page .entries-history-card .entries-log-row:last-child {
        border-bottom: none;
    }

    .entries-page .entries-history-card .entries-log-row td {
        display: block;
        width: auto;
        padding: 0;
        border-bottom: none;
        text-align: left;
    }

    .entries-page .entries-history-card .entries-log-row td::before {
        content: none;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Date"] {
        grid-area: date;
        color: #111827;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Hours"] {
        grid-area: hours;
    }

    .entries-page
    .entries-history-card
    .entries-log-row
    td[data-label="Hours"]::after {
        content: " ·";
        color: #9ca3af;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Rate"] {
        grid-area: rate;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Hours"],
    .entries-page .entries-history-card .entries-log-row td[data-label="Rate"] {
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.35;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Total"] {
        grid-area: total;
        color: #111827;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.4;
        font-variant-numeric: tabular-nums;
    }

    .entries-page .entries-history-card .entries-log-row td[data-label="Status"] {
        grid-area: status;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        min-width: 0;
        padding-top: 0.02rem;
    }

    .entries-page
    .entries-history-card
    .entries-log-row
    td[data-label="Status"]
    .activity-status {
        max-width: min(148px, 42vw);
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

/* Dashboard Phase 5A.2 visual hierarchy refinement */
.app-page.dashboard-page .kpi-card-inner {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.app-page.dashboard-page .kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(95, 122, 97, 0.1);
    color: #4f664f;
    flex: 0 0 auto;
    line-height: 1;
    text-align: center;
}

.app-page.dashboard-page .kpi-icon {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
}

.app-page.dashboard-page .kpi-icon i,
.app-page.dashboard-page .weekly-step-dot i {
    display: block;
    line-height: 1;
}

.app-page.dashboard-page .getting-started-card {
    position: relative;
    overflow: hidden;
    padding: 1.9rem 2rem;
    background: #f6f9f5;
    border-color: rgba(95, 122, 97, 0.24);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.78),
            0 16px 34px rgba(31, 41, 55, 0.075);
}

.app-page.dashboard-page .getting-started-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    align-items: center;
    gap: 1.9rem;
}

.app-page.dashboard-page .getting-started-copy {
    display: grid;
    gap: 0.88rem;
}

.app-page.dashboard-page .getting-started-eyebrow {
    margin: 0;
    color: #4f6d51;
    font-size: 0.74rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-page.dashboard-page .getting-started-copy h2 {
    margin: 0.08rem 0 0;
    color: #111827;
    font-size: clamp(1.35rem, 2vw, 1.72rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0;
}

.app-page.dashboard-page .getting-started-copy p,
.app-page.dashboard-page .getting-started-actions p {
    margin: 0;
    color: #566273;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 500;
}

.app-page.dashboard-page .getting-started-copy p {
    max-width: 680px;
    margin-top: 0.04rem;
}

.app-page.dashboard-page .getting-started-flow strong {
    font-width: 600;
}

.app-page.dashboard-page .getting-started-flow {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    margin: 0.54rem 0 0;
    padding: 0;
    list-style: none;
}

.app-page.dashboard-page .getting-started-flow li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 132px;
    color: #111827;
    font-size: 0.86rem;
    line-height: 1.25;
    font-weight: 600;
}

.app-page.dashboard-page .getting-started-flow li:not(:last-child)::after {
    content: "";
    display: block;
    width: clamp(28px, 4vw, 48px);
    height: 1px;
    margin-left: 0.1rem;
    background: rgba(95, 122, 97, 0.2);
}

.app-page.dashboard-page .getting-started-flow strong,
.app-page.dashboard-page .getting-started-flow small {
    display: block;
}

.app-page.dashboard-page .getting-started-flow small {
    margin-top: 0.18rem;
    color: #6b7280;
    font-size: 0.76rem;
    line-height: 1.25;
    font-weight: 500;
}

.app-page.dashboard-page .getting-started-step-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.07);
    color: #4b5563;
    font-size: 0.84rem;
    font-weight: 700;
}

.app-page.dashboard-page
.getting-started-flow
li.is-complete
.getting-started-step-mark {
    background: #5f7a61;
    color: #fff;
}

.app-page.dashboard-page .getting-started-flow strong {
    font-weight: 600;
}

.app-page.dashboard-page
.getting-started-flow
li.is-current
.getting-started-step-mark {
    background: rgba(95, 122, 97, 0.14);
    color: #4e6750;
    box-shadow: inset 0 0 0 1px rgba(95, 122, 97, 0.18);
}

.app-page.dashboard-page .getting-started-actions {
    display: grid;
    align-content: center;
    gap: 0.9rem;
    padding-left: 1.65rem;
    border-left: 1px solid rgba(95, 122, 97, 0.14);
    text-align: left;
}

.app-page.dashboard-page .getting-started-actions .std-btn {
    width: 100%;
    justify-content: center;
}

.app-page.dashboard-page .getting-started-actions p {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: #657184;
    font-size: 0.84rem;
}

.app-page.dashboard-page .getting-started-actions p i {
    margin-top: 0.18rem;
    color: #5f7a61;
    font-size: 0.9rem;
}

.app-page.dashboard-page .weekly-snapshot-card {
    display: flex;
    flex-direction: column;
    padding: 0 0 0.95rem;
}

.app-page.dashboard-page .weekly-snapshot-body {
    flex: 1;
    align-content: center;
    padding: 1.85rem 1.5rem 1.15rem;
    display: grid;
    gap: 2rem;
}

.app-page.dashboard-page .weekly-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: relative;
}

.app-page.dashboard-page .weekly-stepper::before {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 17px;
    height: 2px;
    background: #e5e7eb;
}

.app-page.dashboard-page .weekly-stepper.is-step-2::before {
    background: linear-gradient(90deg, #5f7a61 0 33.333%, #e5e7eb 33.333% 100%);
}

.app-page.dashboard-page .weekly-stepper.is-step-3::before {
    background: linear-gradient(90deg, #5f7a61 0 66.666%, #e5e7eb 66.666% 100%);
}

.app-page.dashboard-page .weekly-stepper.is-step-4::before {
    background: #5f7a61;
}

.app-page.dashboard-page .weekly-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.28rem;
    color: #9ca3af;
    text-align: center;
}

.app-page.dashboard-page .weekly-step-dot {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #ffffff;
    font-size: 0.78rem;
}

.app-page.dashboard-page .weekly-step.is-complete {
    color: #374151;
}

.app-page.dashboard-page .weekly-step.is-complete .weekly-step-dot {
    border-color: #5f7a61;
    background: #5f7a61;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(95, 122, 97, 0.1);
}

.app-page.dashboard-page .weekly-step strong {
    font-size: 0.78rem;
    font-weight: 600;
    color: inherit;
}

.app-page.dashboard-page .weekly-step span {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #6b7280;
    font-weight: 600;
}

.app-page.dashboard-page .weekly-snapshot-note {
    display: grid;
    gap: 0.75rem;
    padding-top: 0;
    justify-items: center;
}

.app-page.dashboard-page .weekly-snapshot-message:empty {
    display: none;
}

.app-page.dashboard-page .weekly-snapshot-message {
    margin: 0;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.55;
    font-weight: 500;
}

.app-page.dashboard-page .weekly-document-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0;
    padding: 0.22rem 0.58rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 600;
    text-align: center;
}

.app-page.dashboard-page .weekly-document-state.is-pending {
    background: rgba(107, 114, 128, 0.08);
    border-color: rgba(107, 114, 128, 0.16);
    color: #6b7280;
}

.app-page.dashboard-page .weekly-document-state.is-sent {
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.28);
    color: #3730a3;
}

.app-page.dashboard-page .weekly-document-state.is-paid {
    background: rgba(95, 122, 97, 0.14);
    border-color: rgba(95, 122, 97, 0.28);
    color: #3f5a3f;
}

.app-page.dashboard-page .quick-pay-card {
    padding: 0 0 1.35rem;
    align-items: stretch;
}

.app-page.dashboard-page .quick-pay-card .card-head {
    padding: 1.25rem 1.5rem 0;
}

.app-page.dashboard-page .quick-pay-status {
    width: fit-content;
    margin: 1rem 1.5rem 0;
}

.app-page.dashboard-page .quick-pay-amount {
    margin: 0.72rem 1.5rem 0;
    font-size: clamp(2rem, 3.4vw, 2.35rem);
}

.app-page.dashboard-page .quick-pay-sub {
    margin: 0.34rem 1.5rem 0;
}

.app-page.dashboard-page .quick-pay-card .std-btn {
    align-self: stretch;
    width: auto;
    margin: 1rem 1.5rem 0;
}

.app-page.dashboard-page .quick-pay-card .quick-pay-btn-form {
    align-self: stretch;
    margin: 1rem 1.5rem 0;
    display: flex;
    width: auto;
}

.app-page.dashboard-page .quick-pay-card .quick-pay-btn-form button {
    width: 100%;
}

.app-page.dashboard-page .quick-pay-helper {
    margin: 0.78rem 1.5rem 0;
}

.app-page.dashboard-page .quick-pay-note {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.app-page.dashboard-page .quick-pay-note:empty {
    display: none;
}

.app-page.dashboard-page .demo-confirm-link {
    margin: 0.55rem 1.5rem 0;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.72;
    text-decoration-style: dotted;
}

.app-page.dashboard-page .demo-confirm-link:hover {
    opacity: 1;
}

.app-page.dashboard-page .activity-footnote {
    margin: -0.45rem 1.5rem 1rem;
    color: #8a94a3;
    font-size: 0.74rem;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;
}

@media (max-width: 900px) {
    .app-page.dashboard-page .getting-started-card {
        padding: 1rem;
    }

    .app-page.dashboard-page .getting-started-inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1rem;
    }

    .app-page.dashboard-page .getting-started-actions {
        padding-left: 0;
        border-left: 0;
        justify-items: stretch;
        min-width: 0;
        text-align: left;
    }

    .app-page.dashboard-page .getting-started-actions .std-btn {
        width: 100%;
    }

    .app-page.dashboard-page .kpi-card-inner {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 0.85rem;
    }

    .app-page.dashboard-page .kpi-icon {
        width: 40px;
        height: 40px;
    }

    .app-page.dashboard-page .weekly-snapshot-card {
        padding-bottom: 0.82rem;
    }

    .app-page.dashboard-page .weekly-snapshot-body {
        padding: 0.92rem 1rem 0;
        gap: 1rem;
    }

    .app-page.dashboard-page .weekly-stepper {
        --step-icon-size: 36px;
        --step-icon-column: 44px;
        --step-gap: 28px;
        --step-line-x: 22px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--step-gap);
    }

    .app-page.dashboard-page .weekly-stepper::before {
        content: "";
        position: absolute;
        left: var(--step-line-x);
        right: auto;
        top: calc(var(--step-icon-size) / 2);
        bottom: calc(var(--step-icon-size) / 2);
        width: 2px;
        height: auto;
        background: #e5e7eb;
        transform: translateX(-50%);
        z-index: 0;
    }

    .app-page.dashboard-page .weekly-stepper.is-step-2::before {
        background: linear-gradient(
                180deg,
                #5f7a61 0 33.333%,
                #e5e7eb 33.333% 100%
        );
    }

    .app-page.dashboard-page .weekly-stepper.is-step-3::before {
        background: linear-gradient(
                180deg,
                #5f7a61 0 66.666%,
                #e5e7eb 66.666% 100%
        );
    }

    .app-page.dashboard-page .weekly-stepper.is-step-4::before {
        background: #5f7a61;
    }

    .app-page.dashboard-page .weekly-step {
        display: grid !important;
        grid-template-columns: var(--step-icon-column) minmax(0, 1fr);
        align-items: start;
        justify-items: start;
        column-gap: 16px;
        text-align: left;
        min-height: var(--step-icon-size);
        width: 100%;
    }

    .app-page.dashboard-page .weekly-step:not(:last-child)::after {
        content: none;
    }

    .app-page.dashboard-page
    .weekly-stepper.is-step-2
    .weekly-step:nth-child(1)::after,
    .app-page.dashboard-page
    .weekly-stepper.is-step-3
    .weekly-step:nth-child(-n + 2)::after,
    .app-page.dashboard-page
    .weekly-stepper.is-step-4
    .weekly-step:nth-child(-n + 3)::after {
        content: none;
    }

    .app-page.dashboard-page .weekly-document-state {
        width: fit-content;
        margin-top: 0.08rem;
        font-size: 0.76rem;
        line-height: 1.25;
        font-weight: 600;
        text-align: left;
    }

    .app-page.dashboard-page .weekly-step-dot {
        grid-column: 1 !important;
        grid-row: 1 / span 2;
        align-self: start;
        justify-self: center !important;
        position: relative;
        z-index: 2;
    }

    .app-page.dashboard-page .weekly-step strong,
    .app-page.dashboard-page .weekly-step span {
        grid-column: 2;
        position: relative;
        z-index: 1;
    }

    .app-page.dashboard-page .quick-pay-card {
        padding-bottom: 1rem;
    }

    .app-page.dashboard-page .quick-pay-card .card-head {
        padding: 16px 16px 0;
    }

    .app-page.dashboard-page .quick-pay-status,
    .app-page.dashboard-page .quick-pay-amount,
    .app-page.dashboard-page .quick-pay-sub,
    .app-page.dashboard-page .quick-pay-helper,
    .app-page.dashboard-page .quick-pay-note,
    .app-page.dashboard-page .demo-confirm-link {
        margin-right: 16px;
        margin-left: 16px;
    }

    .app-page.dashboard-page .quick-pay-card .std-btn,
    .app-page.dashboard-page .quick-pay-card .quick-pay-btn-form {
        margin-right: 16px;
        margin-left: 16px;
    }

    .app-page.dashboard-page .activity-footnote {
        margin: -0.2rem 1rem 1rem;
        text-align: left;
    }
}

@media (max-width: 540px) {
    .app-page.dashboard-page .getting-started-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.68rem;
    }

    .app-page.dashboard-page .getting-started-flow li {
        gap: 0.65rem;
    }

    .app-page.dashboard-page .getting-started-flow li:not(:last-child)::after {
        content: none;
    }
}