.tmp-crm,
.tmp-client-profile,
.tmp-client-documents {
    --tmp-primary: #1f4f8f;
    --tmp-primary-dark: #173b6b;
    --tmp-accent: #d6a84f;
    --tmp-bg: #f5f7fb;
    --tmp-surface: #ffffff;
    --tmp-border: #dce3ee;
    --tmp-heading: #172033;
    --tmp-text: #172033;
    --tmp-muted: #667085;
    --tmp-form-bg: #ffffff;
    --tmp-input-bg: #ffffff;
    --tmp-input-border: #dce3ee;
    --tmp-button-bg: var(--tmp-primary);
    --tmp-button-text: #ffffff;
    --tmp-button-hover-bg: var(--tmp-primary-dark);
    --tmp-secondary-button-bg: #edf2f8;
    --tmp-secondary-button-text: var(--tmp-primary);
    --tmp-secondary-button-hover-bg: #dfe8f4;
    --tmp-table-header-bg: #f8fafd;
    --tmp-content-width: 1272px;
    --tmp-readable-width: 1040px;
    /* Hero = 13.25" × 4.8" @ 96dpi → ratio 4.8/13.25 = 0.3623 */
    --tmp-hero-height: 461px;
    --tmp-hero-ratio: 0.36226; /* 4.8 ÷ 13.25 */
    color: var(--tmp-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

body.twlcrm-crm-page .portal-content .tmp-crm {
    width: 100%;
    max-width: none;
}

body.twlcrm-crm-page .tmp-crm:not(.tmp-client-dashboard):not(.tmp-preparer-dashboard):not(.tmp-firm-dashboard):not(.tmp-tax-return):not(.tmp-flow-page):not(.tmp-login-shell) {
    width: min(1280px, calc(100vw - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 28px 0 42px;
}

.tmp-client-dashboard,
.tmp-preparer-dashboard,
.tmp-firm-dashboard,
.tmp-tax-return,
.tmp-flow-page {
    min-height: 100vh;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-client-dashboard .tmp-tabset,
.tmp-preparer-dashboard > .tmp-card,
.tmp-preparer-dashboard > .tmp-grid,
.tmp-preparer-dashboard > h2,
.tmp-firm-dashboard > .tmp-grid,
.tmp-firm-dashboard .tmp-tabset,
.tmp-tax-return > .tmp-notice,
.tmp-flow-page > .tmp-flow-grid,
.tmp-flow-page > .tmp-notice {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}

.tmp-tax-return .tmp-tax-progress,
.tmp-tax-return .tmp-tax-layout,
.tmp-flow-page > .tmp-section-band {
    width: 100%;
    max-width: none;
}

.tmp-crm *,
.tmp-client-profile *,
.tmp-client-documents * {
    box-sizing: border-box;
}

.tmp-crm h1,
.tmp-client-profile h1 {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: 0;
    color: var(--tmp-heading);
}

.tmp-crm h2,
.tmp-client-profile h2,
.tmp-client-documents h2,
.tmp-client-documents h3 {
    margin: 30px 0 14px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--tmp-heading);
}

.tmp-crm h3,
.tmp-client-profile h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tmp-heading);
}

.tmp-crm p,
.tmp-client-profile p,
.tmp-client-documents p {
    color: var(--tmp-muted);
}

.tmp-crm a,
.tmp-client-profile a,
.tmp-client-documents a {
    color: var(--tmp-primary);
    font-weight: 650;
    text-decoration: none;
}

.tmp-crm a:hover,
.tmp-client-profile a:hover,
.tmp-client-documents a:hover {
    text-decoration: underline;
}

.tmp-crm hr,
.tmp-client-profile hr,
.tmp-client-documents hr {
    border: 0;
    border-top: 1px solid var(--tmp-border);
    margin: 28px 0;
}

.tmp-page-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tmp-border);
}

.tmp-page-kicker {
    margin: 0 0 6px;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.tmp-portal-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    min-height: 260px;
    margin: 0 0 28px;
    padding: clamp(26px, 4vw, 44px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tmp-primary) 22%, var(--tmp-border));
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(17, 24, 39, .52)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .14);
}

.tmp-client-dashboard > .tmp-portal-hero,
.tmp-preparer-dashboard > .tmp-portal-hero,
.tmp-firm-dashboard > .tmp-portal-hero,
.tmp-tax-return > .tmp-portal-hero,
.tmp-flow-page > .tmp-portal-hero {
    width: 100%;
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.tmp-client-dashboard > .tmp-portal-hero--image-only,
.tmp-tax-return > .tmp-portal-hero--image-only,
.tmp-flow-page > .tmp-portal-hero--image-only {
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border: 0;
    background:
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: none;
}

.tmp-portal-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--tmp-primary), var(--tmp-accent));
}

.tmp-portal-hero--image-only::after {
    height: 0;
}

.tmp-client-welcome {
    display: grid;
    justify-items: center;
    width: 100%;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 58px) max(16px, calc((100vw - 980px) / 2)) clamp(24px, 4vw, 42px);
    color: var(--tmp-text);
    background: var(--tmp-surface);
    text-align: center;
}

.tmp-page-intro {
    width: 100%;
    padding: clamp(30px, 5vw, 58px) 16px clamp(26px, 4vw, 44px);
    background: var(--tmp-surface);
    text-align: center;
}

.tmp-page-intro__inner {
    display: grid;
    justify-items: center;
    width: min(var(--tmp-readable-width), 100%);
    margin: 0 auto;
}

.tmp-page-intro__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 86px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.tmp-page-intro h1 {
    max-width: 860px;
    margin-bottom: 12px;
    color: var(--tmp-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.03;
}

.tmp-page-intro p:not(.tmp-page-kicker) {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tmp-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.tmp-page-intro .tmp-hero-actions {
    justify-content: center;
}

.tmp-client-welcome__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 86px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.tmp-client-welcome h1 {
    max-width: 760px;
    margin-bottom: 12px;
    color: var(--tmp-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.03;
}

.tmp-client-welcome > p:not(.tmp-page-kicker) {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tmp-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.tmp-client-welcome .tmp-hero-actions {
    justify-content: center;
}

.tmp-client-owner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 14px 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

.tmp-client-owner img {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    object-fit: cover;
}

.tmp-client-owner div {
    display: grid;
    gap: 2px;
    text-align: left;
}

.tmp-client-owner strong {
    color: var(--tmp-heading);
}

.tmp-client-owner span {
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-portal-hero__content {
    position: relative;
    z-index: 1;
    max-width: 740px;
}

.tmp-portal-hero__logo {
    display: block;
    width: auto;
    max-width: 230px;
    max-height: 76px;
    margin-bottom: 20px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .26));
}

.tmp-portal-hero .tmp-page-kicker {
    color: color-mix(in srgb, var(--tmp-accent) 72%, white);
}

.tmp-portal-hero h1,
.tmp-portal-hero h2,
.tmp-portal-hero p {
    color: var(--tmp-hero-text, #ffffff);
}

.tmp-portal-hero h1 {
    max-width: 860px;
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1.02;
}

.tmp-portal-hero p {
    max-width: 680px;
    margin: 0;
    font-size: 1rem;
}

.tmp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.tmp-portal-hero__portrait {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    justify-items: center;
    width: min(220px, 24vw);
}

.tmp-portal-hero__portrait img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.tmp-portal-hero__portrait span {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.tmp-portal-hero__portrait small {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 650;
    text-align: center;
}

.tmp-design-luxury .tmp-portal-hero {
    background:
        linear-gradient(135deg, rgba(7, 10, 16, .92), rgba(31, 25, 12, .62)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, #090b10, #2d260d);
}

.tmp-design-modern .tmp-portal-hero {
    background:
        linear-gradient(135deg, rgba(12, 31, 63, .9), rgba(0, 128, 145, .55)),
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-accent));
}

.tmp-design-minimal .tmp-portal-hero {
    min-height: 210px;
    color: var(--tmp-text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-primary) 12%, white), var(--tmp-surface)),
        var(--tmp-hero-image, none);
}

.tmp-design-minimal .tmp-portal-hero h1,
.tmp-design-minimal .tmp-portal-hero h2,
.tmp-design-minimal .tmp-portal-hero p {
    color: var(--tmp-heading);
}

.tmp-client-dashboard.tmp-design-polished > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-luxury > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-modern > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-minimal > .tmp-portal-hero--image-only,
.tmp-tax-return > .tmp-portal-hero--image-only,
.tmp-flow-page > .tmp-portal-hero--image-only {
    height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    background:
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
}

.tmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 18px 0 26px;
}

.tmp-card,
.tmp-crm .tmp-card,
.tmp-client-profile .tmp-card {
    background: var(--tmp-surface);
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(20, 35, 60, .06);
}

.tmp-crm form,
.tmp-client-profile form,
.tmp-client-documents form {
    background: var(--tmp-form-bg);
}

.tmp-stat-card {
    min-height: 140px;
}

.tmp-stat-link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tmp-stat-link:hover,
.tmp-stat-link:focus {
    border-color: var(--tmp-primary);
    box-shadow: 0 12px 28px rgba(20, 35, 60, .1);
    text-decoration: none !important;
    transform: translateY(-1px);
}

.tmp-stat-label {
    color: var(--tmp-muted);
    font-size: 14px;
    font-weight: 700;
}

.tmp-stat-value {
    display: block;
    margin-top: 18px;
    font-size: 42px;
    line-height: 1;
    font-weight: 760;
    color: var(--tmp-heading);
}

.tmp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

.tmp-quick-panel {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.6fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
    margin: 22px 0 28px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--tmp-border);
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-primary) 8%, white), var(--tmp-surface));
}

.tmp-client-dashboard .tmp-quick-panel,
.tmp-preparer-dashboard .tmp-quick-panel,
.tmp-firm-dashboard .tmp-quick-panel {
    width: min(1240px, calc(100vw - 32px));
    margin: 0 auto 28px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--tmp-section-header-bg, #111111), color-mix(in srgb, var(--tmp-section-header-bg, #111111) 86%, white), var(--tmp-section-header-bg, #111111));
}

.tmp-client-dashboard .tmp-quick-panel__intro h3,
.tmp-client-dashboard .tmp-quick-panel__intro p,
.tmp-preparer-dashboard .tmp-quick-panel__intro h3,
.tmp-preparer-dashboard .tmp-quick-panel__intro p,
.tmp-firm-dashboard .tmp-quick-panel__intro h3,
.tmp-firm-dashboard .tmp-quick-panel__intro p {
    color: var(--tmp-section-header-text, #ffffff);
}

.tmp-quick-panel__intro h3 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.tmp-quick-panel__intro p:last-child {
    margin-bottom: 0;
}

.tmp-quick-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.tmp-quick-link-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 11px 13px;
    color: var(--tmp-button-text) !important;
    border: 1px solid color-mix(in srgb, var(--tmp-accent) 30%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--tmp-button-bg), color-mix(in srgb, var(--tmp-button-bg) 70%, var(--tmp-accent)));
    box-shadow: 0 10px 22px rgba(17, 24, 39, .08);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
}

.tmp-quick-link-grid a:hover,
.tmp-quick-link-grid a:focus {
    background:
        linear-gradient(135deg, var(--tmp-button-hover-bg), color-mix(in srgb, var(--tmp-button-hover-bg) 70%, var(--tmp-accent)));
    color: var(--tmp-button-text) !important;
    transform: translateY(-1px);
}

.tmp-promo-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 22px 0;
    padding: clamp(20px, 3vw, 30px);
    color: #ffffff;
    border-radius: 12px;
    background:
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
}

.tmp-section-band {
    display: grid;
    grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 30px clamp(18px, 4vw, 54px) 22px;
    color: var(--tmp-section-header-text, #ffffff);
    background: var(--tmp-section-header-bg, #111111);
}

.tmp-section-band span {
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--tmp-section-accent, var(--tmp-accent)), transparent);
}

.tmp-section-band h2 {
    margin: 0;
    color: var(--tmp-section-header-text, #ffffff);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
    text-align: center;
}

.tmp-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 24px;
    padding-bottom: 48px;
}

.tmp-flow-card {
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.tmp-flow-card h3 {
    margin-top: 0;
    font-size: clamp(1.25rem, 2vw, 1.9rem);
}

.tmp-client-documents-page .tmp-flow-card,
.tmp-state-refund-page .tmp-state-card {
    border-radius: 0;
    box-shadow: none;
}

.tmp-client-documents-page .tmp-flow-card {
    border: 0;
    border-top: 1px solid var(--tmp-border);
}

.tmp-client-experience {
    padding-bottom: 58px;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-messages-inbox {
    width: min(1240px, calc(100vw - 32px));
    max-width: none;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 46px) 0 clamp(34px, 5vw, 58px);
}

.tmp-dashboard-section {
    padding-bottom: clamp(34px, 5vw, 68px);
}

.tmp-dashboard-section > .tmp-client-link-grid,
.tmp-dashboard-section > .tmp-announcement-list,
.tmp-dashboard-section > .tmp-status-tracker,
.tmp-dashboard-section > .tmp-tool-grid,
.tmp-dashboard-section > .tmp-dashboard-split,
.tmp-dashboard-section > .tmp-promo-band,
.tmp-dashboard-section > .tmp-review-card,
.tmp-state-grid {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin: clamp(26px, 4vw, 42px) auto 0;
}

.tmp-client-link-grid,
.tmp-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.tmp-client-link-card,
.tmp-tool-card {
    display: grid;
    gap: 12px;
    align-content: center;
    min-height: 132px;
    padding: 24px 20px;
    color: var(--tmp-button-text) !important;
    border: 1px solid color-mix(in srgb, var(--tmp-section-accent) 35%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tmp-button-bg) 88%, #000), color-mix(in srgb, var(--tmp-button-bg) 68%, var(--tmp-section-accent)));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .18);
    text-align: center;
    text-decoration: none !important;
}

.tmp-client-link-card:hover,
.tmp-tool-card:hover,
.tmp-client-link-card:focus,
.tmp-tool-card:focus {
    color: var(--tmp-button-text) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.tmp-client-link-icon,
.tmp-tool-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
}

.tmp-client-link-icon svg,
.tmp-tool-card span svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tmp-icon-text {
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
}

.tmp-client-link-card strong,
.tmp-tool-card strong {
    color: inherit;
    font-size: 1rem;
}

.tmp-announcement-list {
    display: grid;
    gap: 16px;
}

.tmp-announcement-card {
    display: grid;
    gap: 8px;
    padding: clamp(20px, 3vw, 30px);
    border-left: 6px solid var(--tmp-section-accent, var(--tmp-accent));
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .14);
}

.tmp-announcement-card.is-high,
.tmp-announcement-card.is-urgent {
    border-left-color: #dc2626;
}

.tmp-announcement-card span {
    color: var(--tmp-primary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-announcement-card h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.tmp-announcement-card p {
    margin: 0;
}

.tmp-status-tracker {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-status-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 10px 0 0;
}

.tmp-status-step {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    align-content: start;
    justify-items: center;
    padding: 0 6px;
    color: var(--tmp-muted);
    text-align: center;
}

.tmp-status-step::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 4px;
    background: var(--tmp-border);
    transform: translateY(-50%);
}

.tmp-status-step:last-child::before {
    display: none;
}

.tmp-status-step span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border: 3px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 850;
}

.tmp-status-step strong {
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 1.25;
}

.tmp-status-step.is-complete::before {
    background: var(--tmp-section-accent, var(--tmp-accent));
}

.tmp-status-step.is-complete span,
.tmp-status-step.is-current span {
    border-color: var(--tmp-section-accent, var(--tmp-accent));
    background: var(--tmp-section-accent, var(--tmp-accent));
    color: #111827;
}

.tmp-status-step.is-complete strong {
    color: var(--tmp-heading);
}

.tmp-status-step.is-current span {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--tmp-section-accent, var(--tmp-accent)) 18%, transparent);
}

.tmp-status-step.is-current strong {
    color: var(--tmp-heading);
}

.tmp-status-message {
    justify-self: center;
    width: min(720px, 100%);
    padding: 18px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-primary) 9%, white);
    text-align: center;
}

.tmp-status-message span {
    color: var(--tmp-primary);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-status-message h3 {
    margin: 4px 0 6px;
    font-size: 1.35rem;
}

.tmp-status-message p {
    margin: 0;
}

.tmp-dashboard-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 28px);
}

.tmp-document-list,
.tmp-client-task-list,
.tmp-client-invoice-list {
    display: grid;
    gap: 12px;
}

.tmp-document-card,
.tmp-client-task-card,
.tmp-client-invoice-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-surface) 92%, var(--tmp-bg));
}

.tmp-document-card {
    align-items: flex-start;
    flex-direction: column;
    color: var(--tmp-heading) !important;
    text-decoration: none !important;
}

.tmp-document-card span,
.tmp-client-task-card span,
.tmp-client-invoice-card span,
.tmp-client-task-card small,
.tmp-client-invoice-card small {
    display: inline-flex;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-client-task-card p,
.tmp-client-invoice-card p {
    margin: 6px 0;
}

.tmp-review-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: clamp(24px, 4vw, 42px);
    color: var(--tmp-hero-text, #ffffff);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .3)),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    box-shadow: 0 20px 44px rgba(0, 0, 0, .2);
}

.tmp-review-card h2,
.tmp-review-card p {
    color: inherit;
}

.tmp-review-card h2 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.7rem);
}

.tmp-review-stars {
    display: flex;
    gap: 4px;
    color: var(--tmp-section-accent, var(--tmp-accent));
    font-size: 26px;
}

.tmp-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding-bottom: 52px;
}

.tmp-state-refund-page .tmp-state-grid,
.tmp-messages-inbox {
    width: min(var(--tmp-readable-width), calc(100vw - 32px));
}

.tmp-state-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

.tmp-state-card h3 {
    margin: 0;
}

.tmp-reminder-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 22px;
}

.tmp-promo-band h3,
.tmp-promo-band p {
    color: #ffffff;
}

.tmp-promo-band > div > span {
    display: inline-flex;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--tmp-section-accent, var(--tmp-accent)) 76%, white);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.tmp-promo-band h3 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}

.tmp-promo-band p {
    margin: 0;
}

.tmp-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--tmp-border);
}

.tmp-summary-strip p {
    margin: 0;
}

.tmp-form {
    margin-top: 18px;
}

.tmp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.tmp-field {
    margin: 0 0 16px;
}

.tmp-field label,
.tmp-crm label,
.tmp-client-profile label {
    display: block;
    margin-bottom: 7px;
    color: var(--tmp-text);
    font-size: 14px;
    font-weight: 700;
}

.tmp-form-footer {
    margin-top: 20px;
}

.tmp-button,
.tmp-crm a.tmp-button,
.tmp-client-profile a.tmp-button,
.tmp-crm button,
.tmp-client-profile button,
.tmp-client-documents button,
.tmp-crm input[type="submit"],
.tmp-client-profile input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 0;
    border-radius: 8px;
    background: var(--tmp-button-bg);
    color: var(--tmp-button-text) !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
}

.tmp-button:hover,
.tmp-button:visited,
.tmp-button:focus,
.tmp-crm a.tmp-button:hover,
.tmp-crm a.tmp-button:visited,
.tmp-crm a.tmp-button:focus,
.tmp-client-profile a.tmp-button:hover,
.tmp-client-profile a.tmp-button:visited,
.tmp-client-profile a.tmp-button:focus,
.tmp-crm button:hover,
.tmp-client-profile button:hover,
.tmp-client-documents button:hover {
    background: var(--tmp-button-hover-bg);
    color: var(--tmp-button-text) !important;
    text-decoration: none !important;
}

.tmp-button-secondary {
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-button-secondary:hover,
.tmp-button-secondary:visited,
.tmp-button-secondary:focus,
.tmp-crm a.tmp-button-secondary:hover,
.tmp-crm a.tmp-button-secondary:visited,
.tmp-crm a.tmp-button-secondary:focus,
.tmp-client-profile a.tmp-button-secondary:hover,
.tmp-client-profile a.tmp-button-secondary:visited,
.tmp-client-profile a.tmp-button-secondary:focus {
    background: var(--tmp-secondary-button-hover-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-button-light,
.tmp-crm a.tmp-button-light,
.tmp-client-profile a.tmp-button-light {
    background: rgba(255, 255, 255, .92);
    color: var(--tmp-primary-dark) !important;
}

.tmp-button-light:hover,
.tmp-button-light:visited,
.tmp-button-light:focus,
.tmp-crm a.tmp-button-light:hover,
.tmp-crm a.tmp-button-light:visited,
.tmp-crm a.tmp-button-light:focus {
    background: #ffffff;
    color: var(--tmp-primary-dark) !important;
}

.tmp-login-shell {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
    gap: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 62px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(17, 24, 39, .38)),
        var(--tmp-login-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: 0 20px 54px rgba(17, 24, 39, .16);
}

.tmp-login-art {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    align-content: center;
    min-height: calc(100vh - 62px);
    padding: clamp(32px, 6vw, 90px);
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .18), rgba(17, 24, 39, .02)),
        var(--tmp-login-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
}

.tmp-login-art .tmp-page-kicker,
.tmp-login-art h1,
.tmp-login-art p {
    color: var(--tmp-hero-text, #ffffff);
}

.tmp-login-art h1 {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    line-height: .98;
}

.tmp-login-art p {
    max-width: 560px;
    margin: 0;
    font-size: 1.05rem;
}

.tmp-login-panel {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: center;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 62px);
    padding: clamp(32px, 6vw, 90px);
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
    box-shadow: none;
}

.tmp-login-panel .tmp-brand-logo {
    max-height: 130px;
    margin: 0 auto 26px;
    filter: none;
}

.tmp-login-panel h2 {
    margin-top: 0;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.tmp-login-panel form {
    width: min(430px, 100%);
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-crm input[type="text"],
.tmp-crm input[type="email"],
.tmp-crm input[type="password"],
.tmp-crm input[type="date"],
.tmp-crm input[type="time"],
.tmp-crm input[type="url"],
.tmp-crm select,
.tmp-crm textarea,
.tmp-client-profile input[type="text"],
.tmp-client-profile input[type="email"],
.tmp-client-profile input[type="password"],
.tmp-client-profile input[type="date"],
.tmp-client-profile input[type="time"],
.tmp-client-profile input[type="url"],
.tmp-client-profile select,
.tmp-client-profile textarea,
.tmp-client-documents input,
.tmp-client-documents select,
.tmp-client-documents textarea {
    width: 100%;
    max-width: 760px;
    min-height: 40px;
    border: 1px solid var(--tmp-input-border);
    border-radius: 8px;
    padding: 9px 11px;
    background: var(--tmp-input-bg);
    color: var(--tmp-text);
    font-size: 14px;
}

.tmp-crm textarea,
.tmp-client-profile textarea,
.tmp-client-documents textarea {
    min-height: 96px;
}

.tmp-crm .tmp-form-grid input,
.tmp-crm .tmp-form-grid select,
.tmp-crm .tmp-form-grid textarea {
    max-width: none;
}

.tmp-crm table,
.tmp-client-profile table,
.tmp-client-documents table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 35, 60, .05);
}

.tmp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
}

.tmp-manage-clients .tmp-table-wrap,
.tmp-manage-preparers .tmp-table-wrap {
    border-radius: 0;
}

.tmp-manage-clients table,
.tmp-manage-preparers table {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tmp-manage-clients th,
.tmp-manage-preparers th {
    background: transparent;
}

.tmp-manage-clients tr,
.tmp-manage-preparers tr {
    background: var(--tmp-surface);
}

.tmp-crm th,
.tmp-crm td,
.tmp-client-profile th,
.tmp-client-profile td,
.tmp-client-documents th,
.tmp-client-documents td {
    border: 0 !important;
    border-bottom: 1px solid var(--tmp-border) !important;
    padding: 12px 14px !important;
    text-align: left;
}

.tmp-crm tr:last-child td,
.tmp-crm tr:last-child th,
.tmp-client-profile tr:last-child td,
.tmp-client-profile tr:last-child th {
    border-bottom: 0 !important;
}

.tmp-crm th,
.tmp-client-profile th,
.tmp-client-documents th {
    background: var(--tmp-table-header-bg);
    color: var(--tmp-text);
    font-size: 13px;
    font-weight: 750;
}

.tmp-alert,
.tmp-notice {
    background: #fff;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-left: 4px solid var(--tmp-primary, #1f4f8f);
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 16px;
    color: var(--tmp-text, #172033);
}

.tmp-success {
    border-left-color: #17a673;
}

.tmp-filter-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tmp-border);
    color: var(--tmp-text);
    font-weight: 650;
}

.tmp-list-tools {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px;
    background: var(--tmp-surface, #ffffff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
}

.tmp-list-tools__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: min(260px, 100%);
}

.tmp-list-tools__field label {
    color: var(--tmp-heading, #172033);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tmp-list-summary {
    margin: 0 0 14px;
    color: var(--tmp-muted, #667085);
    font-size: .92rem;
    text-align: center;
}

.tmp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}

.tmp-pagination span {
    color: var(--tmp-heading, #172033);
    font-weight: 800;
}

.tmp-progress-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.tmp-progress-summary > div,
.tmp-notification-item,
.tmp-automation-row {
    background: var(--tmp-surface);
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
}

.tmp-progress-summary > div {
    padding: 14px;
}

.tmp-progress-summary span,
.tmp-notification-item span,
.tmp-automation-row summary span,
.tmp-automation-row summary em {
    display: block;
    color: var(--tmp-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.tmp-progress-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--tmp-heading);
    font-size: 20px;
}

.tmp-notification-list,
.tmp-automation-list {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
}

.tmp-notification-item {
    display: grid;
    gap: 4px;
    padding: 14px;
    color: var(--tmp-text) !important;
    text-decoration: none !important;
}

.tmp-notification-item:hover {
    border-color: var(--tmp-primary);
}

.tmp-automation-row {
    padding: 0;
}

.tmp-automation-row summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    cursor: pointer;
}

.tmp-automation-row form {
    padding: 0 14px 14px;
}

.tmp-commission-form {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.tmp-commission-form input,
.tmp-commission-form select,
.tmp-commission-form textarea {
    max-width: none !important;
}

.tmp-document-request-list,
.tmp-message-thread-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 22px;
}

.tmp-document-request-item,
.tmp-message-thread-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: var(--tmp-surface);
}

.tmp-document-request-item span,
.tmp-message-thread-item span {
    display: block;
    color: var(--tmp-muted);
    font-size: 13px;
    font-weight: 650;
}

.tmp-document-request-item p,
.tmp-message-thread-item p {
    margin: 8px 0 0;
}

.tmp-inline-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tmp-inline-upload input[type="file"] {
    max-width: 240px;
}

.tmp-error {
    border-left-color: #dc3545;
}

.tmp-empty-state {
    color: var(--tmp-muted);
    text-align: center;
}

.tmp-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    background: color-mix(in srgb, var(--tmp-primary) 10%, white);
    color: var(--tmp-primary-dark);
    font-size: 13px;
    font-weight: 750;
}

.tmp-status-pill.is-inactive {
    background: #f2f4f7;
    color: #667085;
}

.tmp-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tmp-crm .tmp-inline-form select {
    width: auto;
    max-width: 180px;
    min-height: 36px;
}

.tmp-crm button.tmp-button-secondary {
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-crm button.tmp-button-secondary:hover,
.tmp-crm button.tmp-button-secondary:focus {
    background: var(--tmp-secondary-button-hover-bg);
    color: var(--tmp-secondary-button-text) !important;
}

.tmp-crm .tmp-button-small {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.tmp-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tmp-protected-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tmp-accent) 18%, white);
    color: #3d2a00;
    font-size: 13px;
    font-weight: 750;
}

.tmp-manage-panel {
    position: relative;
    max-width: min(720px, calc(100vw - 32px));
}

.tmp-manage-panel > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--tmp-secondary-button-bg);
    color: var(--tmp-secondary-button-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    list-style: none;
}

.tmp-manage-panel > summary::-webkit-details-marker {
    display: none;
}

.tmp-manage-panel[open] > summary {
    margin-bottom: 12px;
}

.tmp-manage-panel__body {
    display: grid;
    gap: 14px;
    width: min(680px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--tmp-border);
    border-radius: 10px;
    background: var(--tmp-surface);
    box-shadow: 0 14px 34px rgba(20, 35, 60, .12);
}

.tmp-manage-form {
    display: grid;
    gap: 12px;
}

.tmp-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.tmp-crm .tmp-manage-grid input,
.tmp-crm .tmp-manage-grid select,
.tmp-crm .tmp-manage-grid textarea,
.tmp-crm .tmp-manage-form textarea {
    max-width: none;
}

.tmp-manage-split {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.tmp-danger-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-checkline,
.tmp-check-field label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.tmp-crm .tmp-checkline input,
.tmp-crm .tmp-check-field input {
    width: auto;
    min-height: 0;
}

.tmp-crm button.tmp-button-danger,
.tmp-crm .tmp-button-danger {
    background: #b42318;
    color: #ffffff !important;
}

.tmp-crm button.tmp-button-danger:hover,
.tmp-crm .tmp-button-danger:hover,
.tmp-crm button.tmp-button-danger:focus,
.tmp-crm .tmp-button-danger:focus {
    background: #8f1d14;
    color: #ffffff !important;
}

.tmp-dashboard-link {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

.tmp-referral-input {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.tmp-brand-logo {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

.tmp-tabset {
    display: grid;
    gap: 18px;
    margin: 22px 0;
}

.tmp-tab-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tmp-border);
    scrollbar-width: thin;
}

.tmp-crm .tmp-tab-button,
.tmp-client-profile .tmp-tab-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--tmp-border);
    border-radius: 999px;
    background: var(--tmp-surface);
    color: var(--tmp-text) !important;
}

.tmp-crm .tmp-tab-button.is-active,
.tmp-client-profile .tmp-tab-button.is-active {
    border-color: var(--tmp-primary);
    background: var(--tmp-primary);
    color: var(--tmp-button-text) !important;
}

.tmp-tab-panel {
    display: none;
}

.tmp-tab-panel.is-active {
    display: block;
}

.tmp-tab-panel > h2:first-child,
.tmp-tab-panel > h3:first-child {
    margin-top: 0;
}

@media (max-width: 820px) {
    .tmp-crm,
    .tmp-client-profile,
    .tmp-client-documents {
        max-width: none;
        width: 100%;
    }

    .tmp-crm h1,
    .tmp-client-profile h1 {
        font-size: 28px;
    }

    .tmp-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .tmp-page-header .tmp-button {
        width: 100%;
    }

    .tmp-portal-hero,
    .tmp-login-shell,
    .tmp-quick-panel {
        grid-template-columns: 1fr;
    }

    .tmp-portal-hero {
        min-height: 0;
        padding: 22px;
        border-radius: 10px;
    }

    .tmp-client-dashboard > .tmp-portal-hero--image-only,
    .tmp-tax-return > .tmp-portal-hero--image-only,
    .tmp-flow-page > .tmp-portal-hero--image-only {
        width: 100%;
        height: max(190px, calc(100vw * .3623));
        min-height: max(190px, calc(100vw * .3623));
        padding: 0;
        border-radius: 0;
    }

    .tmp-client-welcome {
        padding: 28px 16px 30px;
    }

    .tmp-client-owner {
        align-items: center;
        flex-direction: column;
        border-radius: 16px;
        text-align: center;
    }

    .tmp-client-owner div {
        text-align: center;
    }

    .tmp-portal-hero__portrait {
        width: min(190px, 60vw);
        justify-self: start;
    }

    .tmp-hero-actions,
    .tmp-promo-band {
        align-items: stretch;
        flex-direction: column;
    }

    .tmp-login-shell {
        min-height: 0;
        padding: 18px;
        border-radius: 10px;
    }

    .tmp-login-art,
    .tmp-login-panel {
        grid-column: 1;
        grid-row: auto;
        min-height: auto;
    }

    .tmp-login-panel {
        padding: 18px;
    }

    .tmp-login-art h1,
    .tmp-portal-hero h1 {
        font-size: 2rem;
    }

    .tmp-quick-link-grid {
        grid-template-columns: 1fr;
    }

    .tmp-flow-grid {
        grid-template-columns: 1fr;
    }

    .tmp-dashboard-split,
    .tmp-review-card {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .tmp-client-link-grid,
    .tmp-tool-grid,
    .tmp-state-grid {
        grid-template-columns: 1fr;
    }

    .tmp-client-dashboard .tmp-dashboard-section > .tmp-client-link-grid,
    .tmp-client-dashboard .tmp-dashboard-section > .tmp-tool-grid {
        width: 100%;
        margin-top: 0;
        padding: 0 12px;
    }

    .tmp-client-dashboard .tmp-client-link-card,
    .tmp-client-dashboard .tmp-tool-card {
        min-height: 88px;
        border-radius: 0;
        box-shadow: none;
    }

    .tmp-client-dashboard .tmp-dashboard-section > .tmp-status-tracker {
        width: min(100%, calc(100vw - 24px));
        margin-top: 22px;
    }

    .tmp-status-track {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        background: transparent;
    }

    .tmp-status-step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        justify-items: start;
        min-height: 58px;
        padding: 0 0 18px;
        text-align: left;
    }

    .tmp-status-step::before {
        top: 38px;
        left: 19px;
        width: 4px;
        height: calc(100% - 2px);
        transform: none;
    }

    .tmp-status-step span {
        margin: 0;
        grid-row: 1;
        grid-column: 1;
    }

    .tmp-status-step strong {
        align-self: center;
        grid-column: 2;
        font-size: 13px;
    }

    .tmp-client-dashboard .tmp-status-message {
        margin: 0 auto;
    }

    .tmp-document-card,
    .tmp-client-task-card,
    .tmp-client-invoice-card {
        align-items: stretch;
        flex-direction: column;
    }

    .tmp-tax-form-actions {
        position: static;
        flex-direction: column;
        align-items: stretch;
        margin: 0 0 20px;
    }

    .tmp-tax-layout,
    .tmp-tax-progress {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tmp-tax-steps {
        grid-template-columns: 1fr;
        /* ISSUE 3 FIX mobile: adequate bottom padding */
        padding: 10px 0 24px;
    }

    .tmp-tax-steps a {
        /* ISSUE 3 FIX mobile: 2-column layout — circle | label — both on same row */
        display: grid;
        grid-template-rows: unset;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        min-height: 52px;
        padding: 0 0 16px;
        text-align: left;
        /* ISSUE 3 FIX mobile: label font size */
        font-size: 0.82rem;
    }

    .tmp-tax-steps a::before {
        /* ISSUE 3 FIX mobile: vertical connector line centered on 36px circle */
        top: 18px;
        left: 17px;
        width: 4px;
        height: calc(100% - 4px);
    }

    .tmp-tax-steps a span {
        grid-column: 1;
        /* ISSUE 3 FIX mobile: match new 32px circle, keep centered on its row */
        width: 32px;
        height: 32px;
        margin: 0;
        align-self: center;
    }

    .tmp-form-grid,
    .tmp-intake-grid,
    .tmp-tax-layout {
        grid-template-columns: 1fr !important;
    }

    .tmp-crm input[type="text"],
    .tmp-crm input[type="email"],
    .tmp-crm input[type="password"],
    .tmp-crm input[type="date"],
    .tmp-crm input[type="time"],
    .tmp-crm input[type="url"],
    .tmp-crm select,
    .tmp-crm textarea,
    .tmp-client-profile input[type="text"],
    .tmp-client-profile input[type="email"],
    .tmp-client-profile input[type="password"],
    .tmp-client-profile input[type="date"],
    .tmp-client-profile input[type="time"],
    .tmp-client-profile input[type="url"],
    .tmp-client-profile select,
    .tmp-client-profile textarea,
    .tmp-client-documents input,
    .tmp-client-documents select,
    .tmp-client-documents textarea {
        max-width: none;
        font-size: 16px;
    }

    .tmp-crm .tmp-button,
    .tmp-crm button,
    .tmp-crm input[type="submit"],
    .tmp-client-profile button,
    .tmp-client-documents button {
        width: 100%;
        min-height: 44px;
    }

    .tmp-card,
    .tmp-crm .tmp-card,
    .tmp-client-profile .tmp-card {
        padding: 16px;
        border-radius: 8px;
        box-shadow: none;
    }

    .tmp-manage-clients .tmp-table-wrap,
    .tmp-manage-preparers .tmp-table-wrap {
        overflow: visible;
    }

    .tmp-manage-clients table,
    .tmp-manage-preparers table,
    .tmp-manage-clients thead,
    .tmp-manage-preparers thead,
    .tmp-manage-clients tbody,
    .tmp-manage-preparers tbody,
    .tmp-manage-clients tr,
    .tmp-manage-preparers tr,
    .tmp-manage-clients td,
    .tmp-manage-preparers td {
        display: block;
        width: 100%;
    }

    .tmp-manage-clients table,
    .tmp-manage-preparers table {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .tmp-manage-clients thead,
    .tmp-manage-preparers thead {
        display: none;
    }

    .tmp-manage-clients tr,
    .tmp-manage-preparers tr {
        margin-bottom: 14px;
        border: 1px solid var(--tmp-border);
        border-radius: 10px;
        background: var(--tmp-surface);
        box-shadow: 0 8px 20px rgba(20, 35, 60, .06);
        overflow: hidden;
    }

    .tmp-manage-clients td,
    .tmp-manage-preparers td {
        display: grid;
        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        border-bottom: 1px solid var(--tmp-border) !important;
        overflow-wrap: anywhere;
    }

    .tmp-manage-clients td::before,
    .tmp-manage-preparers td::before {
        content: attr(data-label);
        color: var(--tmp-muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .tmp-manage-clients td:last-child,
    .tmp-manage-preparers td:last-child {
        grid-template-columns: 1fr;
        border-bottom: 0 !important;
    }

    .tmp-manage-clients td:last-child::before,
    .tmp-manage-preparers td:last-child::before {
        display: none;
    }

    .tmp-row-actions,
    .tmp-manage-split,
    .tmp-danger-zone,
    .tmp-inline-form {
        width: 100%;
        align-items: stretch;
    }

    .tmp-row-actions > *,
    .tmp-inline-form > *,
    .tmp-manage-split > *,
    .tmp-danger-zone > * {
        width: 100%;
    }

    .tmp-manage-panel,
    .tmp-manage-panel__body {
        width: 100%;
        max-width: none;
    }

    .tmp-manage-panel__body {
        padding: 14px;
        box-shadow: none;
    }

    .tmp-manage-grid {
        grid-template-columns: 1fr;
    }

    .tmp-crm .tmp-inline-form select {
        width: 100%;
        max-width: none;
    }

    .tmp-crm .tmp-tab-button,
    .tmp-client-profile .tmp-tab-button {
        width: auto;
        min-height: 40px;
    }
}

.tmp-intake-page {
    min-height: 100vh;
    margin: -20px 0;
    padding: 32px 12px;
    background-color: var(--tmp-intake-bg, #e5b2a9);
    background-size: cover;
    background-position: center;
    /* General text — overridden by more specific vars below */
    color: var(--tmp-intake-text, #111827);
}

.tmp-intake-shell {
    width: min(920px, 100%);
    margin: 0 auto;
}

.tmp-intake-logo-wrap {
    margin-bottom: 18px;
    text-align: center;
}

.tmp-intake-logo {
    max-width: 240px;
    max-height: 120px;
    object-fit: contain;
}

.tmp-intake-card {
    padding: 0;
    background: var(--tmp-intake-card-bg, rgba(255,255,255,0.12));
    border-radius: 8px;
}

.tmp-intake-heading {
    margin-bottom: 20px;
}

.tmp-intake-heading h1 {
    margin: 0 0 8px;
    /* FIRM-CUSTOMIZABLE: heading color, falls back to general text color */
    color: var(--tmp-intake-heading-color, var(--tmp-intake-text, #111827));
    font-size: 34px;
    line-height: 1.15;
}

.tmp-intake-heading p {
    margin: 0;
    /* FIRM-CUSTOMIZABLE: subheading/description color */
    color: var(--tmp-intake-subheading-color, var(--tmp-intake-text, #111827));
    font-size: 17px;
}

.tmp-intake-form {
    display: grid;
    gap: 16px;
}

.tmp-intake-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.tmp-intake-form label {
    display: block;
    margin: 2px 0 -6px;
    font-weight: 700;
    /* FIRM-CUSTOMIZABLE: form field label color */
    color: var(--tmp-intake-label-color, var(--tmp-intake-text, #111827));
}

.tmp-intake-form input,
.tmp-intake-form select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 4px;
    background: #fff;
    color: #111827;
    font-size: 15px;
}

.tmp-intake-form select[multiple] {
    min-height: 48px;
    padding: 8px 10px;
}

.tmp-intake-form button {
    justify-self: start;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--tmp-intake-button-bg, #111827);
    color: var(--tmp-intake-button-text, #ffffff);
    font-weight: 800;
    cursor: pointer;
}

.tmp-tax-layout {
    display: grid;
    gap: 18px;
    align-items: start;
    margin-top: clamp(22px, 4vw, 44px);
    padding: 0 max(16px, calc((100vw - var(--tmp-content-width)) / 2)) 58px;
}

.tmp-tax-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    overflow: visible;
    /* ISSUE 3 FIX: increased bottom padding so label text is never clipped */
    padding: 24px 0 32px;
}

.tmp-tax-steps a {
    position: relative;
    z-index: 1;
    display: grid;
    /* ISSUE 3 FIX: grid rows — circle first, then label — with explicit row heights */
    grid-template-rows: 32px auto;
    justify-items: center;
    align-items: start;
    gap: 8px;
    /* ISSUE 3 FIX: increased min-height to accommodate circle + label */
    min-height: 90px;
    padding: 0 6px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    /* Use firm-customizable wizard step label color; white by default on dark canvas */
    color: var(--tmp-wizard-step-label, #ffffff);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.3;
}

.tmp-tax-steps a::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 4px;
    /* Firm-customizable: connector line between steps */
    background: var(--tmp-wizard-step-connector, var(--tmp-border));
}

.tmp-tax-steps a:last-child::before {
    display: none;
}

.tmp-tax-steps a span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    /* Firm-customizable: circle number text */
    color: var(--tmp-wizard-step-circle-text, var(--tmp-muted));
    border: 3px solid var(--tmp-wizard-step-connector, var(--tmp-border));
    border-radius: 50%;
    /* Firm-customizable: circle background */
    background: var(--tmp-wizard-step-circle-bg, var(--tmp-surface));
    align-self: start;
}

.tmp-tax-steps a.is-current {
    /* Current step label slightly brighter */
    color: var(--tmp-wizard-step-label, #ffffff);
    opacity: 1;
}

.tmp-tax-steps a.is-done::before {
    /* FIRM-CUSTOMIZABLE: completed step connector color */
    background: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
}

.tmp-tax-steps a.is-done span {
    color: #111827;
    /* FIRM-CUSTOMIZABLE: completed step circle color */
    border-color: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
    background: var(--tmp-intake-step-done-color, var(--tmp-section-accent, var(--tmp-accent)));
}

.tmp-tax-steps a.is-current span {
    color: #111827;
    border-color: var(--tmp-primary);
    background: var(--tmp-primary);
    /* ISSUE 3 FIX: halo sized relative to the 32px circle */
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--tmp-primary) 15%, transparent);
}

.tmp-tax-steps a.is-done {
    color: var(--tmp-wizard-step-label, #ffffff);
}

.tmp-tax-steps a.is-skipped {
    opacity: 0.35;
}

.tmp-tax-panel {
    min-width: 0;
}

.tmp-tax-form {
    padding: clamp(20px, 3vw, 34px);
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
    box-shadow: none;
}

.tmp-tax-form-actions {
    position: sticky;
    top: 58px;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 28px;
    padding: 16px 18px;
    border: 0;
    border-left: 5px solid var(--tmp-section-accent, var(--tmp-accent));
    border-radius: 0;
    background: color-mix(in srgb, var(--tmp-primary) 8%, var(--tmp-surface));
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.tmp-tax-form-actions strong {
    display: block;
    color: var(--tmp-heading);
    font-size: 1.05rem;
}

.tmp-tax-form-actions .tmp-actions {
    margin: 0;
}

.tmp-tax-form h2 {
    text-align: center;
}

.tmp-tax-form h3 {
    margin-top: 24px;
}

.tmp-required-note {
    color: var(--tmp-muted);
    font-size: 13px;
}

.tmp-required-note span,
.tmp-tax-form label span,
.tmp-tax-fieldset legend span {
    color: #dc2626;
}

.tmp-tax-fieldset {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 0;
    border: 0;
}

.tmp-tax-fieldset legend {
    margin-bottom: 6px;
    font-weight: 800;
}

.tmp-tax-fieldset label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 600;
    color: var(--tmp-text);
}

.tmp-tax-progress {
    margin-top: clamp(28px, 5vw, 58px);
    margin-bottom: 0;
    padding: 16px max(16px, calc((100vw - var(--tmp-content-width)) / 2));
    border: 0;
    border-radius: 0;
    background: var(--tmp-surface);
}

.tmp-tax-progress-bar {
    overflow: hidden;
    height: 10px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--tmp-secondary-button-bg);
}

.tmp-tax-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tmp-primary);
}

.tmp-tax-upload {
    margin: 18px 0;
}

.tmp-tax-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #f8fafc;
    color: var(--tmp-muted);
    font-weight: 800;
    cursor: pointer;
}

.tmp-tax-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tmp-dependent-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--tmp-border);
}

.tmp-signature-request-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin: 14px 0;
    padding: 22px;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card {
    margin: 14px 0;
    border: 2px dashed var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
    cursor: pointer;
    list-style: none;
}

.tmp-signature-inline-card summary::-webkit-details-marker {
    display: none;
}

.tmp-signature-click {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 22px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-weight: 800;
}

.tmp-signature-iframe {
    display: block;
    width: calc(100% - 44px);
    min-height: 760px;
    margin: 0 22px 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #fff;
}

.tmp-signature-inline-card p {
    margin: 0 22px 22px;
}

.tmp-tax-centered {
    text-align: center;
}

.tmp-tax-summary-section {
    margin: 14px 0;
}

.tmp-tax-summary-section summary {
    cursor: pointer;
}

.tmp-tax-summary-section table {
    margin-top: 14px;
}

.tmp-bank-advance-info {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--tmp-border);
    border-radius: 8px;
    background: #f8fafc;
}

@media (max-width: 720px) {
    .tmp-crm,
    .tmp-client-profile,
    .tmp-client-documents {
        padding: 0;
        border-radius: 0;
    }

    .tmp-page-header {
        display: flex;
        flex-direction: column;
    }

    .tmp-crm h1,
    .tmp-client-profile h1 {
        font-size: 28px;
    }

    .tmp-stat-value {
        font-size: 34px;
    }

    .tmp-intake-grid {
        grid-template-columns: 1fr;
    }

    .tmp-intake-heading h1 {
        font-size: 28px;
    }

    .tmp-tax-layout {
        grid-template-columns: 1fr;
    }

    .tmp-tax-steps {
        position: static;
    }

    .tmp-signature-request-card {
        grid-template-columns: 1fr;
    }

    .tmp-signature-inline-card summary {
        grid-template-columns: 1fr;
    }

    .tmp-document-request-item,
    .tmp-message-thread-item {
        grid-template-columns: 1fr;
    }

    .tmp-inline-upload {
        justify-content: flex-start;
    }
}

/* ============================================================
   PORTAL LAYOUT FIXES — v2.9
   Fixes: hero height, documents page layout, step labels, nav
   ============================================================ */

/* ISSUE 1 & 2 FIX: Documents & Tasks page uses tmp-client-dashboard class now.
   Ensure the hero on that page gets the exact same full height as Dashboard Home. */
.tmp-client-documents-page.tmp-client-dashboard > .tmp-portal-hero--image-only {
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    min-height: calc(100vw * var(--tmp-hero-ratio, 0.36226));
    margin: 0;
    padding: 0;
    border: 0;
    background:
        var(--tmp-hero-image, none),
        linear-gradient(135deg, var(--tmp-primary-dark), var(--tmp-primary));
    background-position: center;
    background-size: cover;
    box-shadow: none;
}

/* ISSUE 2 FIX: Documents & Tasks page-intro section should match Dashboard Home
   welcome section — white background, centered content, consistent spacing. */
.tmp-client-documents-page .tmp-page-intro {
    width: 100%;
    padding: clamp(30px, 5vw, 58px) 16px clamp(26px, 4vw, 44px);
    background: var(--tmp-surface);
    text-align: center;
}

.tmp-client-documents-page .tmp-page-intro__inner {
    display: grid;
    justify-items: center;
    width: min(var(--tmp-readable-width), 100%);
    margin: 0 auto;
}

/* ISSUE 2 FIX: Sections inside Documents page use the same full-width dark canvas
   and centered content widths as Dashboard Home. */
.tmp-client-documents-page .tmp-client-experience {
    padding-bottom: 58px;
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-client-documents-page .tmp-dashboard-section > .tmp-dashboard-split {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* ISSUE 3 FIX: Additional step label visibility — ensure the text node that sits
   after the <span> circle inside each <a> is never hidden or clipped. */
.tmp-tax-steps a > :not(span) {
    /* Target the text node wrapper — browsers wrap bare text in anonymous boxes,
       but named siblings (strong tags from PHP output) are targeted here. */
    display: block;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure step label text color is always readable on both light and dark backgrounds */
.tmp-tax-steps a,
.tmp-tax-steps a:visited {
    color: var(--tmp-text, #172033);
}

.tmp-tax-steps a.is-done {
    color: var(--tmp-text, #172033);
}

/* ISSUE 3 FIX: On very small screens (≤ 480px) make labels slightly smaller
   but never invisible */
@media (max-width: 480px) {
    .tmp-tax-steps a {
        font-size: 0.75rem;
    }
}

/* ============================================================
   PORTAL LAYOUT FIXES — v2.9.1
   ============================================================ */

/* FIX: Requested Documents — center to match section content width */
.tmp-doc-requests-wrap {
    width: min(var(--tmp-content-width), calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px) 0 0;
}

.tmp-doc-requests-heading {
    margin: 0 0 14px;
    color: var(--tmp-surface, #ffffff);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* FIX: Hero banner — strictly enforce 13.25" × 4.8" aspect ratio at 96dpi.
   13.25 × 96 = 1272px wide, 4.8 × 96 = 460.8px tall → ratio 0.36226.
   Using aspect-ratio as a modern fallback for browsers that support it. */
.tmp-portal-hero--image-only {
    aspect-ratio: 13.25 / 4.8;
}

/* Override any lingering fixed pixel heights from earlier rules */
.tmp-client-dashboard > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-polished > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-luxury > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-modern > .tmp-portal-hero--image-only,
.tmp-client-dashboard.tmp-design-minimal > .tmp-portal-hero--image-only,
.tmp-client-documents-page.tmp-client-dashboard > .tmp-portal-hero--image-only,
.tmp-tax-return > .tmp-portal-hero--image-only,
.tmp-flow-page > .tmp-portal-hero--image-only {
    width: 100%;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: 13.25 / 4.8;
    background-size: cover;
    background-position: center;
}

/* Mobile: keep ratio but allow slight compression below 600px */
@media (max-width: 600px) {
    .tmp-portal-hero--image-only {
        /* On phones use a slightly taller ratio so the image isn't a sliver */
        aspect-ratio: 4 / 1.8;
    }
}

/* ============================================================
   WIZARD STEP COLOR OVERRIDES — v2.9.2
   All colors below are controlled per-firm from the admin
   Firm Edit screen under "Portal Section Colors".
   ============================================================ */

/* Progress bar fill — firm-customizable */
.tmp-tax-progress-bar span {
    background: var(--tmp-wizard-progress-bar, var(--tmp-primary));
}

/* Progress % text — firm-customizable */
.tmp-tax-progress > div {
    color: var(--tmp-wizard-progress-text, var(--tmp-text));
    font-size: 0.9rem;
}

/* Progress section background — keep it consistent with canvas
   so the bar area doesn't appear as a jarring white stripe */
.tmp-tax-progress {
    background: var(--tmp-portal-canvas, #050505);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Tax steps section sits on the canvas — text must be readable */
.tmp-tax-layout {
    background: var(--tmp-portal-canvas, #050505);
}

.tmp-tax-steps a,
.tmp-tax-steps a:visited {
    color: var(--tmp-wizard-step-label, #ffffff);
}

.tmp-tax-steps a.is-current,
.tmp-tax-steps a.is-done {
    color: var(--tmp-wizard-step-label, #ffffff);
}

/* Uncompleted circle on dark canvas */
.tmp-tax-steps a span {
    background: var(--tmp-wizard-step-circle-bg, #2a2a2a);
    border-color: var(--tmp-wizard-step-connector, #555555);
    color: var(--tmp-wizard-step-circle-text, #ffffff);
}

/* Connector line between circles */
.tmp-tax-steps a::before {
    background: var(--tmp-wizard-step-connector, #555555);
}

/* Skipped steps — dim but still readable */
.tmp-tax-steps a.is-skipped {
    opacity: 0.38;
}

/* Mobile responsive — same variable overrides apply */
@media (max-width: 760px) {
    .tmp-tax-steps a {
        color: var(--tmp-wizard-step-label, #ffffff);
    }
    .tmp-tax-progress > div {
        color: var(--tmp-wizard-progress-text, #ffffff);
    }
}

/* ============================================================
   STATUS TRACKER COLOR OVERRIDES — v2.9.3
   Controlled per-firm from Firm Edit → Portal Section Colors
   ============================================================ */

/* Incomplete step label */
.tmp-status-step {
    color: var(--tmp-status-step-label, #ffffff);
}

.tmp-status-step strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Completed step label */
.tmp-status-step.is-complete strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Current step label */
.tmp-status-step.is-current strong {
    color: var(--tmp-status-step-label, #ffffff);
}

/* Incomplete circle */
.tmp-status-step span {
    background: var(--tmp-status-circle-bg, #2a2a2a);
    border-color: var(--tmp-status-connector, #444444);
    color: var(--tmp-status-circle-text, #ffffff);
}

/* Connector line between steps */
.tmp-status-step::before {
    background: var(--tmp-status-connector, #444444);
}

/* Completed connector line uses accent (already var-driven, keep it) */
.tmp-status-step.is-complete::before {
    background: var(--tmp-section-accent, var(--tmp-accent));
}

@media (max-width: 760px) {
    .tmp-status-step strong {
        color: var(--tmp-status-step-label, #ffffff);
    }
    .tmp-status-step.is-complete strong,
    .tmp-status-step.is-current strong {
        color: var(--tmp-status-step-label, #ffffff);
    }
}

/* ============================================================
   PHASE 2 — Features #1-4 Styles — v2.10.0
   ============================================================ */

/* -- Notification Center -- */
.tmp-notification-center .tmp-page-header { margin-bottom: 24px; }
.tmp-notification-list { display: grid; gap: 10px; }
.tmp-notification-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 8px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    transition: border-color .15s, box-shadow .15s;
}
.tmp-notification-item.is-unread {
    border-left: 4px solid var(--tmp-primary, #1f4f8f);
    box-shadow: 0 2px 10px rgba(31,79,143,.08);
}
.tmp-notification-item.is-read { opacity: .7; }
.tmp-notif-icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
    font-size: 18px;
}
.tmp-notif-body { min-width: 0; }
.tmp-notif-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.tmp-notif-type { font-weight: 700; font-size: 13px; color: var(--tmp-primary,#1f4f8f); }
.tmp-notif-time { font-size: 12px; color: var(--tmp-muted,#667085); }
.tmp-notif-desc { margin: 0; font-size: 14px; line-height: 1.45; }
.tmp-notif-link { font-size: 13px; font-weight: 700; color: var(--tmp-primary,#1f4f8f); text-decoration: none; margin-top: 6px; display: inline-block; }
.tmp-notif-actions { display: flex; flex-direction: column; gap: 6px; }
.tmp-notif-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff);
    color: var(--tmp-muted,#667085);
    cursor: pointer; font-size: 14px; font-weight: 800;
}
.tmp-notif-action-btn:hover { background: var(--tmp-primary,#1f4f8f); color: #fff; border-color: var(--tmp-primary,#1f4f8f); }
.tmp-notif-delete-btn:hover { background: #e53e3e !important; border-color: #e53e3e !important; }
.tmp-notif-widget { }

/* -- Firm Admin permissions grid -- */
.tmp-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.tmp-perm-toggle {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; font-size: 14px; font-weight: 600;
    padding: 10px 12px; border-radius: 8px;
    background: var(--tmp-bg,#f5f7fb);
    border: 1px solid var(--tmp-border,#dce3ee);
    transition: background .15s;
}
.tmp-perm-toggle:hover { background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white); }
.tmp-perm-toggle input { display: none; }
.tmp-perm-track {
    position: relative; width: 42px; height: 23px;
    border-radius: 999px; background: var(--tmp-border,#dce3ee);
    transition: background .2s; flex-shrink: 0;
}
.tmp-perm-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.tmp-perm-toggle input:checked ~ .tmp-perm-track { background: var(--tmp-primary,#1f4f8f); }
.tmp-perm-toggle input:checked ~ .tmp-perm-track .tmp-perm-thumb { transform: translateX(19px); }
.tmp-perm-toggle input:checked + .tmp-perm-track { background: var(--tmp-primary,#1f4f8f); }
.tmp-perm-toggle input:checked + .tmp-perm-track .tmp-perm-thumb { transform: translateX(19px); }

/* -- Edit client / client list item selected state -- */
.tmp-client-list-item.is-selected {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 7%, white);
    border-color: var(--tmp-primary,#1f4f8f);
}
.tmp-edit-client-fields .tmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tmp-edit-client-fields .tmp-table th { background: var(--tmp-table-header-bg,#f8fafd); padding: 10px 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--tmp-border,#dce3ee); }
.tmp-edit-client-fields .tmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--tmp-border,#dce3ee); }
.tmp-edit-client-fields .tmp-table tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
    .tmp-notification-item { grid-template-columns: 36px 1fr; }
    .tmp-notif-actions { flex-direction: row; grid-column: 1/-1; }
    .tmp-perm-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CLIENT / PREPARER CARD GRID — v2.10.3
   ============================================================ */

.tmp-client-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 4px 0 28px;
}

.tmp-client-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(17,24,39,.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s;
}
.tmp-client-card:hover { box-shadow: 0 4px 18px rgba(17,24,39,.1); }

.tmp-client-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-client-card__name {
    display: block;
    font-size: .98rem;
    font-weight: 750;
    color: var(--tmp-heading, #172033);
}
.tmp-client-card__id {
    display: block;
    font-size: .75rem;
    color: var(--tmp-muted, #667085);
    margin-top: 2px;
}

.tmp-client-card__body {
    flex: 1 1 auto;
    padding: 10px 16px;
    display: grid;
    gap: 4px;
}
.tmp-client-card__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .82rem;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.tmp-client-card__row:last-child { border-bottom: 0; }
.tmp-client-card__row span:first-child { color: var(--tmp-muted, #667085); flex-shrink: 0; }
.tmp-client-card__row span:last-child { text-align: right; font-weight: 600; }

.tmp-client-card__actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
    flex-wrap: wrap;
}

/* ============================================================
   WORKFLOW AUTOMATION GROUPED ACCORDION — v2.10.3
   ============================================================ */

.tmp-workflow-group-list {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.tmp-workflow-group {
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    overflow: hidden;
    background: var(--tmp-surface, #fff);
}

.tmp-workflow-group__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tmp-surface, #fff);
    color: var(--tmp-heading, #172033);
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.tmp-workflow-group {
    background: var(--tmp-surface, #ffffff) !important;
    border: 1px solid var(--tmp-border, #dce3ee) !important;
}
.tmp-workflow-group__header {
    background: var(--tmp-surface, #ffffff) !important;
    color: var(--tmp-heading, #172033) !important;
}
.tmp-workflow-group__header:hover { background: var(--tmp-bg, #f5f7fb); }
.tmp-workflow-group__header[aria-expanded="true"] {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 5%, white);
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-workflow-group__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.tmp-workflow-group__title strong { font-size: .94rem; color: var(--tmp-heading,#172033); }

.tmp-workflow-group__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tmp-workflow-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}
.tmp-workflow-mini-pill.is-on  { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 12%,white); color: var(--tmp-primary,#1f4f8f); }
.tmp-workflow-mini-pill.is-off { background: var(--tmp-bg,#f5f7fb); color: var(--tmp-muted,#667085); text-decoration: line-through; }

.tmp-workflow-group__chevron {
    font-size: 18px;
    transition: transform .2s;
    flex-shrink: 0;
    color: var(--tmp-muted,#667085);
}
.tmp-workflow-group__header[aria-expanded="true"] .tmp-workflow-group__chevron {
    transform: rotate(180deg);
}

.tmp-workflow-group__body {
    padding: 0;
}
.tmp-workflow-group__body[hidden] { display: none; }

.tmp-workflow-template-card {
    padding: 16px 18px;
    border-top: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-workflow-template-card:first-child { border-top: none; }

.tmp-workflow-template-card__label { margin-bottom: 12px; }

.tmp-workflow-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tmp-accent,#d6a84f) 15%, white);
    color: var(--tmp-heading,#172033);
    font-size: .78rem;
    font-weight: 700;
}

.tmp-workflow-form-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.tmp-workflow-enable-toggle {
    /* inherits .tmp-perm-toggle from firm-admin styles */
    padding: 6px 10px;
    border-radius: 6px;
}

/* ============================================================
   FIRM PAGE STANDARD LAYOUT — v2.10.4
   Hero image → pill nav → intro section → content
   ============================================================ */

/* Wrapper that sits below the hero+nav intro, holds the page body */
.tmp-firm-page-content {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) 0 60px;
}

/* Dark canvas sections use --tmp-font-dark-bg for text */
.tmp-client-experience,
.tmp-firm-page > .tmp-client-experience,
.tmp-status-track,
.tmp-tax-layout,
.tmp-tax-progress {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* Light/white sections use --tmp-font-light-bg */
.tmp-firm-page-content,
.tmp-firm-page-content h1,
.tmp-firm-page-content h2,
.tmp-firm-page-content h3,
.tmp-page-intro h1,
.tmp-page-intro h2,
.tmp-page-intro p {
    color: var(--tmp-font-light-bg, #172033);
}
.tmp-page-intro h1 {
    color: var(--tmp-heading-light-bg, #172033);
}

/* Firm hero overlay text */
.tmp-portal-hero--firm .tmp-portal-hero__content h1,
.tmp-portal-hero--firm .tmp-portal-hero__content p,
.tmp-portal-hero--firm .tmp-page-kicker {
    color: var(--tmp-hero-text, #ffffff);
}

/* Dashboard section headings on dark canvas */
.tmp-section-band h2 {
    color: var(--tmp-font-dark-bg, #ffffff);
}

/* Pill nav sits full-width directly below the hero image, no gap */
.tmp-firm-page .portal-pill-nav,
.tmp-manage-clients .portal-pill-nav,
.tmp-manage-preparers .portal-pill-nav,
.tmp-firm-admin-manager .portal-pill-nav,
.tmp-add-firm-admin .portal-pill-nav,
.tmp-notification-center .portal-pill-nav,
.tmp-workflow-automations-page .portal-pill-nav,
.tmp-reports-page .portal-pill-nav,
.tmp-intake-settings-page .portal-pill-nav,
.tmp-signature-templates-page .portal-pill-nav {
    position: relative; /* not sticky on inner pages — stays under hero */
    top: 0;
    margin: 0;
}

/* Workflow automation page content gets standard width */
.tmp-workflow-automations-page .tmp-firm-page-content,
.tmp-reports-page .tmp-firm-page-content,
.tmp-signature-templates-page .tmp-firm-page-content,
.tmp-intake-settings-page .tmp-firm-page-content {
    width: min(1100px, calc(100vw - 32px));
}

/* ============================================================
   NEXT PHASE CENTERS
   ============================================================ */

.tmp-next-phase-page .tmp-client-experience {
    padding-top: clamp(28px, 5vw, 58px);
}

.tmp-next-phase-section {
    background: transparent;
    padding: 0;
}

.tmp-next-phase-content {
    width: min(var(--tmp-content-width, 1272px), calc(100vw - 32px));
    margin: 0 auto;
}

.tmp-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(18px, 2vw, 28px);
    margin-bottom: clamp(20px, 3vw, 36px);
}

.tmp-flow-card.tmp-mini-form,
.tmp-next-phase-content .tmp-flow-card {
    background: var(--tmp-surface, #ffffff);
    color: var(--tmp-text, #172033);
    border: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-next-phase-content .tmp-flow-card h2,
.tmp-next-phase-content .tmp-flow-card h3,
.tmp-next-phase-content .tmp-table-wrap th,
.tmp-next-phase-content label,
.tmp-next-phase-content strong {
    color: var(--tmp-heading, #172033);
}

.tmp-next-phase-content .tmp-field {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
}

.tmp-next-phase-content input,
.tmp-next-phase-content select,
.tmp-next-phase-content textarea {
    width: 100%;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--tmp-text, #172033);
    background: #ffffff;
}

.tmp-next-phase-content .tmp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 14px;
}

.tmp-table-wrap {
    overflow-x: auto;
}

.tmp-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.tmp-table-wrap th,
.tmp-table-wrap td {
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.tmp-table-wrap th {
    background: color-mix(in srgb, var(--tmp-surface, #ffffff) 88%, var(--tmp-primary, #145c72));
    font-size: 13px;
}

.tmp-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    min-width: 460px;
}

.tmp-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tmp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tmp-action-row form {
    margin: 0;
}

.tmp-button-small,
.tmp-next-phase-content .tmp-button-small {
    padding: 7px 12px;
    font-size: 13px;
}

.tmp-button-danger,
.tmp-next-phase-content .tmp-button-danger {
    background: #b42318;
    color: #ffffff;
}

.tmp-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.tmp-check-inline input {
    width: auto;
}

.tmp-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.tmp-check-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    padding-bottom: 10px;
}

.tmp-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--tmp-primary, #145c72) 14%, #ffffff);
    color: var(--tmp-heading, #172033);
    font-weight: 700;
    font-size: 12px;
}

.tmp-muted {
    color: var(--tmp-muted, #637083);
}

.tmp-activity-accordion {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.tmp-activity-day {
    background: #ffffff;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    overflow: hidden;
}

.tmp-activity-day summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--tmp-surface, #ffffff) 88%, var(--tmp-primary, #145c72));
}

.tmp-activity-day summary span {
    color: var(--tmp-muted, #637083);
    font-size: 13px;
}

.tmp-activity-list {
    display: grid;
    gap: 0;
}

.tmp-activity-item {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
}

.tmp-activity-item span,
.tmp-activity-item small {
    color: var(--tmp-muted, #637083);
    font-size: 12px;
}

.tmp-activity-item p {
    margin: 0;
}

@media (max-width: 720px) {
    .tmp-next-phase-content {
        width: calc(100vw - 24px);
    }

    .tmp-inline-grid,
    .tmp-table-wrap table {
        min-width: 620px;
    }

    .tmp-inline-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   FIRM INNER PAGE LAYOUT (no hero) — PDF Spec
   ============================================================ */
.tmp-firm-inner-page {
    min-height: 100vh;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-firm-page-title {
    text-align: center;
    padding: clamp(28px, 4vw, 52px) 20px clamp(18px, 3vw, 32px);
    background: var(--tmp-surface, #fff);
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-firm-page-title h1 {
    margin: 6px 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--tmp-heading, #172033);
}
.tmp-firm-page-subtitle {
    color: var(--tmp-muted, #667085);
    max-width: 560px;
    margin: 0 auto;
    font-size: .95rem;
}
.tmp-firm-page-body {
    width: min(1272px, calc(100vw - 32px));
    margin: 0 auto;
    padding: clamp(24px,3vw,40px) 0 60px;
}

/* ============================================================
   PILL NAV — Centered, no brand div
   ============================================================ */
.portal-pill-nav {
    width: 100%;
    background: var(--twlcrm-portal-nav-bg, #111111);
    border-bottom: 3px solid var(--twlcrm-accent, #d6a84f);
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 16px;
}
.portal-pill-nav__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 9px;
    max-width: 1400px;
    margin: 0 auto;
}
.portal-pill-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: var(--twlcrm-portal-nav-text, #ffffff);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .13s, border-color .13s, color .13s;
}
.portal-pill-nav__btn:hover,
.portal-pill-nav__btn.is-active {
    background: var(--twlcrm-accent, #d6a84f);
    border-color: var(--twlcrm-accent, #d6a84f);
    color: #111;
}
.portal-pill-nav__btn--logout { opacity: .55; }
.portal-pill-nav__btn--logout:hover { opacity: 1; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }

/* ============================================================
   WORKFLOW AUTOMATION — Cards & Modal
   ============================================================ */
.tmp-wa-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tmp-wa-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 24px;
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    min-width: 100px;
}
.tmp-wa-stat__val { font-size: 1.8rem; font-weight: 800; color: var(--tmp-primary,#1f4f8f); }
.tmp-wa-stat__lbl { font-size: .78rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .05em; }

.tmp-wa-search-wrap { margin-bottom: 18px; }
.tmp-wa-search {
    width: 100%;
    max-width: 380px;
    padding: 9px 14px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 999px;
    font-size: .88rem;
    background: var(--tmp-surface,#fff);
}

.tmp-wa-category { margin-bottom: 28px; }
.tmp-wa-category__label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tmp-muted,#667085);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--tmp-border,#dce3ee);
}

.tmp-wa-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: box-shadow .15s;
}
.tmp-wa-card:hover { box-shadow: 0 3px 12px rgba(17,24,39,.08); }
.tmp-wa-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
}
.tmp-wa-card__left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tmp-wa-card__name { font-size: .94rem; color: var(--tmp-heading,#172033); }
.tmp-wa-card__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tmp-wa-card__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tmp-wa-card__status { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tmp-wa-card__status.is-on { color: #16a34a; }
.tmp-wa-card__status.is-off { color: var(--tmp-muted,#667085); }

.tmp-wa-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.tmp-wa-pill.is-on  { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 12%,white); color: var(--tmp-primary,#1f4f8f); }
.tmp-wa-pill.is-off { background: var(--tmp-bg,#f5f7fb); color: var(--tmp-muted,#667085); opacity: .7; }

/* Modal */
.tmp-wa-modal { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.tmp-wa-modal.is-open { pointer-events: all; }
.tmp-wa-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .22s; }
.tmp-wa-modal.is-open .tmp-wa-modal__overlay { opacity: 1; }
.tmp-wa-modal__panel {
    position: absolute;
    top: 0; right: 0;
    width: min(540px, 100vw);
    height: 100vh;
    background: var(--tmp-surface,#fff);
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.tmp-wa-modal.is-open .tmp-wa-modal__panel { transform: translateX(0); }
.tmp-wa-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
    flex-shrink: 0;
}
.tmp-wa-modal__title { margin: 0; font-size: 1.05rem; }
.tmp-wa-modal__close {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: var(--tmp-muted,#667085); width: 32px; height: 32px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.tmp-wa-modal__close:hover { background: var(--tmp-bg,#f5f7fb); }
.tmp-wa-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
body.tmp-wa-modal-open { overflow: hidden; }

.tmp-wa-chips { margin-bottom: 16px; padding: 12px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; }
.tmp-wa-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tmp-wa-chip {
    padding: 4px 10px; border-radius: 999px;
    background: var(--tmp-primary,#1f4f8f); color: #fff;
    border: none; cursor: pointer; font-size: .78rem; font-weight: 700;
}
.tmp-wa-chip:hover { opacity: .85; }

.tmp-wa-template-block {
    padding: 16px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--tmp-bg,#f5f7fb);
}
.tmp-wa-template-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.tmp-wa-channel-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; }
.tmp-wa-field { margin-bottom: 10px; }
.tmp-wa-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.tmp-wa-field input, .tmp-wa-field textarea { width: 100%; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; padding: 8px 10px; font-size: .85rem; background: #fff; }

/* Toggle switch for automation enable/disable */
.tmp-wa-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .85rem; font-weight: 600; }
.tmp-wa-toggle input { display: none; }
.tmp-wa-toggle__track { position: relative; width: 42px; height: 23px; border-radius: 999px; background: var(--tmp-border,#dce3ee); transition: background .18s; flex-shrink: 0; }
.tmp-wa-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.tmp-wa-toggle input:checked + .tmp-wa-toggle__track { background: #16a34a; }
.tmp-wa-toggle input:checked + .tmp-wa-toggle__track .tmp-wa-toggle__thumb { transform: translateX(19px); }

/* ============================================================
   FORM BUILDER — 3-panel layout
   ============================================================ */
.tmp-fb-editor { display: flex; flex-direction: column; min-height: 80vh; }
.tmp-fb-settings-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--tmp-surface,#fff);
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
    flex-wrap: wrap;
}
.tmp-fb-settings-bar__left { display: flex; gap: 16px; flex-wrap: wrap; flex: 1 1 auto; }
.tmp-fb-settings-bar__left .tmp-field label { font-size: .75rem; font-weight: 700; display: block; margin-bottom: 3px; }
.tmp-fb-settings-bar__left .tmp-field input,
.tmp-fb-settings-bar__left .tmp-field select { font-size: .85rem; padding: 7px 10px; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; }
.tmp-fb-settings-bar__right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#fb-save-msg { padding: 0 16px; }

.tmp-fb-panels { display: grid; grid-template-columns: 200px 1fr 240px; flex: 1 1 auto; min-height: 70vh; border-top: 1px solid var(--tmp-border,#dce3ee); }

.tmp-fb-left {
    border-right: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-bg,#f5f7fb);
    padding: 14px 10px;
    overflow-y: auto;
}
.tmp-fb-left h3 { margin: 0 0 4px; font-size: .85rem; }
.tmp-fb-hint { font-size: .75rem; color: var(--tmp-muted,#667085); margin: 0 0 10px; }
.tmp-fb-palette { display: grid; gap: 5px; }
.tmp-fb-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 7px;
    background: var(--tmp-surface,#fff);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    transition: background .12s, border-color .12s;
}
.tmp-fb-palette-item:hover { background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white); border-color: var(--tmp-primary,#1f4f8f); }

.tmp-fb-center { background: var(--tmp-bg,#f5f7fb); display: flex; flex-direction: column; }
.tmp-fb-canvas-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff); font-size: .85rem; font-weight: 700;
}
.tmp-fb-canvas {
    flex: 1 1 auto;
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tmp-fb-canvas-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--tmp-muted,#667085);
    font-size: .9rem;
    border: 2px dashed var(--tmp-border,#dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface,#fff);
}

.tmp-fb-field-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s;
}
.tmp-fb-field-card:hover { border-color: var(--tmp-primary,#1f4f8f); }
.tmp-fb-field-card.is-active { border-color: var(--tmp-primary,#1f4f8f); box-shadow: 0 0 0 3px color-mix(in srgb,var(--tmp-primary,#1f4f8f) 15%,white); }
.tmp-fb-field-card__controls { display: flex; gap: 4px; flex-shrink: 0; }
.tmp-fb-ctrl {
    width: 26px; height: 26px; border-radius: 5px;
    border: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-bg,#f5f7fb);
    cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.tmp-fb-ctrl:hover { background: var(--tmp-primary,#1f4f8f); color: #fff; border-color: var(--tmp-primary,#1f4f8f); }
.tmp-fb-ctrl--del:hover { background: #e53e3e !important; border-color: #e53e3e !important; }

.tmp-fb-right {
    border-left: 1px solid var(--tmp-border,#dce3ee);
    background: var(--tmp-surface,#fff);
    overflow-y: auto;
}
.tmp-fb-toggle-row { margin: 10px 0; }
.tmp-fb-sig-preview {
    padding: 16px;
    border: 2px dashed var(--tmp-border,#dce3ee);
    border-radius: 6px;
    text-align: center;
    color: var(--tmp-muted,#667085);
    font-size: .8rem;
}

/* Form builder template library */
.tmp-fb-library__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tmp-fb-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tmp-fb-template-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s;
}
.tmp-fb-template-card:hover { box-shadow: 0 4px 16px rgba(17,24,39,.08); }
.tmp-fb-template-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tmp-fb-template-card__meta { font-size: .78rem; color: var(--tmp-muted,#667085); }
.tmp-fb-template-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Preview */
.tmp-fb-preview { max-width: 680px; margin: 0 auto; }
.tmp-fb-preview__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 18px; flex-wrap: wrap; gap: 10px; }
.tmp-fb-preview__form { background: var(--tmp-surface,#fff); border: 1px solid var(--tmp-border,#dce3ee); border-radius: 10px; padding: 28px; }
.tmp-fb-preview-field { margin-bottom: 16px; }
.tmp-fb-preview-field label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .88rem; }
.tmp-fb-preview-field input, .tmp-fb-preview-field select, .tmp-fb-preview-field textarea {
    width: 100%; border: 1px solid var(--tmp-border,#dce3ee); border-radius: 6px; padding: 8px 10px; font-size: .88rem;
}

@media (max-width: 760px) {
    .tmp-fb-panels { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    .tmp-fb-left { border-right: none; border-bottom: 1px solid var(--tmp-border,#dce3ee); max-height: 200px; }
    .tmp-fb-right { border-left: none; border-top: 1px solid var(--tmp-border,#dce3ee); max-height: 300px; }
    .tmp-wa-modal__panel { width: 100vw; }
    .portal-pill-nav__btn { font-size: .7rem; padding: 5px 11px; min-height: 32px; }
}

/* ============================================================
   TAX FIELD LIBRARY — Form Builder Left Panel
   ============================================================ */

/* Tab switcher */
.tmp-fb-left-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--tmp-border, #dce3ee);
}
.tmp-fb-tab {
    flex: 1 1 auto;
    padding: 8px 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 700;
    color: var(--tmp-muted, #667085);
    font-family: inherit;
    transition: color .13s, border-color .13s;
    text-align: center;
    white-space: nowrap;
}
.tmp-fb-tab:hover { color: var(--tmp-heading, #172033); }
.tmp-fb-tab.is-active {
    color: var(--tmp-primary, #1f4f8f);
    border-bottom-color: var(--tmp-primary, #1f4f8f);
}

/* Tab panels */
.tmp-fb-tab-panel { padding-top: 2px; }

/* Tax section label (category divider inside the list) */
.tmp-fb-tax-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tmp-muted, #667085);
    padding: 12px 2px 5px;
    border-top: 1px solid var(--tmp-border, #dce3ee);
    margin-top: 6px;
}
.tmp-fb-tax-palette .tmp-fb-tax-section-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

/* Tax field library palette */
.tmp-fb-tax-palette {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmp-fb-tax-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 6px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--tmp-text, #172033);
    font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.35;
}

.tmp-fb-tax-item:hover {
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 8%, white);
    border-color: var(--tmp-primary, #1f4f8f);
    color: var(--tmp-primary, #1f4f8f);
}

/* "Added" flash state */
.tmp-fb-tax-item--added {
    background: color-mix(in srgb, #16a34a 12%, white) !important;
    border-color: #16a34a !important;
    color: #16a34a !important;
    font-weight: 800 !important;
}

/* Widen the left sidebar slightly since tax field names are longer */
.tmp-fb-panels {
    grid-template-columns: 220px 1fr 240px;
}

@media (max-width: 900px) {
    .tmp-fb-panels { grid-template-columns: 1fr; }
    .tmp-fb-left { max-height: 280px; }
}

/* ============================================================
   PAYROLL CENTER — v2.11.0
   ============================================================ */

/* ── Import Card ────────────────────────────────────────────── */
.tmp-payroll-import-card,
.tmp-payroll-history-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 12px;
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: 24px;
}

.tmp-payroll-section-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-section-desc {
    color: var(--tmp-muted, #667085);
    font-size: .88rem;
    margin: 0 0 22px;
}

/* ── Steps ──────────────────────────────────────────────────── */
.tmp-payroll-import-steps {
    display: grid;
    gap: 20px;
    margin-bottom: 22px;
}

.tmp-payroll-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
}
.tmp-payroll-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tmp-primary, #1f4f8f);
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.tmp-payroll-step__label {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tmp-muted, #667085);
    margin-bottom: 10px;
}

/* ── Bank selector ──────────────────────────────────────────── */
.tmp-payroll-bank-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tmp-payroll-bank-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    border: 2px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    cursor: pointer;
    min-width: 150px;
    text-align: center;
    transition: border-color .15s, background .15s;
    position: relative;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-payroll-bank-card input[type="radio"] { display: none; }
.tmp-payroll-bank-card:has(input:checked) {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 7%, white);
}
.tmp-payroll-bank-card:hover:not(.is-coming-soon) {
    border-color: var(--tmp-primary, #1f4f8f);
}
.tmp-payroll-bank-card.is-coming-soon {
    opacity: .55;
    cursor: not-allowed;
}
.tmp-payroll-bank-card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-bank-card__soon {
    font-size: .7rem;
    font-weight: 700;
    color: var(--tmp-muted, #667085);
    background: var(--tmp-bg, #f5f7fb);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--tmp-border, #dce3ee);
}

/* ── Period row ─────────────────────────────────────────────── */
.tmp-payroll-period-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tmp-payroll-period-row .tmp-field {
    margin: 0;
    flex: 1 1 160px;
}

/* ── Upload zone ────────────────────────────────────────────── */
.tmp-payroll-upload-zone {
    position: relative;
}
.tmp-payroll-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.tmp-payroll-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: 2px dashed var(--tmp-border, #dce3ee);
    border-radius: 10px;
    background: var(--tmp-bg, #f5f7fb);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.tmp-payroll-upload-zone:hover .tmp-payroll-upload-label {
    border-color: var(--tmp-primary, #1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary, #1f4f8f) 5%, white);
}
.tmp-payroll-upload-icon { font-size: 2rem; }
#payroll-file-name { font-size: .88rem; font-weight: 600; color: var(--tmp-heading, #172033); }
.tmp-payroll-upload-label small { font-size: .75rem; color: var(--tmp-muted, #667085); }

.tmp-payroll-import-actions { display: flex; justify-content: flex-end; }
.tmp-payroll-import-btn { font-size: .9rem; padding: 11px 28px; }

/* ── Payroll Run History ─────────────────────────────────────── */
.tmp-payroll-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.tmp-payroll-empty {
    text-align: center;
    padding: 40px;
    color: var(--tmp-muted, #667085);
    font-size: .9rem;
}
.tmp-payroll-empty p:first-child { font-size: 2rem; }

.tmp-payroll-run-list { display: grid; gap: 12px; }
.tmp-payroll-run-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    background: var(--tmp-bg, #f5f7fb);
    flex-wrap: wrap;
}
.tmp-payroll-run-card__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.tmp-payroll-run-card__num {
    font-size: .95rem;
    color: var(--tmp-heading, #172033);
}
.tmp-payroll-run-card__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--tmp-muted, #667085);
}
.tmp-payroll-run-card__stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.tmp-payroll-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 90px;
}
.tmp-payroll-stat span { font-size: .7rem; color: var(--tmp-muted, #667085); text-transform: uppercase; letter-spacing: .04em; }
.tmp-payroll-stat strong { font-size: .92rem; color: var(--tmp-heading, #172033); }

.tmp-payroll-run-card__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Settings panel ─────────────────────────────────────────── */
.tmp-payroll-settings-panel {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    margin-top: 4px;
}
.tmp-payroll-settings-panel > summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: .88rem;
    color: var(--tmp-heading, #172033);
    list-style: none;
}
.tmp-payroll-settings-panel > summary::-webkit-details-marker { display: none; }
.tmp-payroll-settings-body { padding: 0 18px 18px; }

.tmp-payroll-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.tmp-payroll-profile-card {
    background: var(--tmp-bg, #f5f7fb);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    padding: 14px;
}
.tmp-payroll-profile-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: .9rem;
}

/* ── Run Detail ──────────────────────────────────────────────── */
.tmp-payroll-run-detail { }
.tmp-payroll-run-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-payroll-run-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.tmp-payroll-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    min-width: 120px;
    text-align: center;
}
.tmp-payroll-summary-stat span { font-size: .72rem; color: var(--tmp-muted, #667085); text-transform: uppercase; letter-spacing: .04em; }
.tmp-payroll-summary-stat strong { font-size: 1.1rem; font-weight: 800; color: var(--tmp-primary, #1f4f8f); }

/* Preparer grid */
.tmp-payroll-preparer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.tmp-payroll-prep-card {
    background: var(--tmp-surface, #fff);
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 10px;
    padding: 16px;
}
.tmp-payroll-prep-card__top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-payroll-prep-card__top strong { font-size: .95rem; }
.tmp-payroll-prep-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tmp-payroll-prep-card__stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .78rem;
}
.tmp-payroll-prep-card__stats span { color: var(--tmp-muted, #667085); }
.tmp-payroll-prep-card__stats strong { font-size: .88rem; }

/* ── Detail table ───────────────────────────────────────────── */
.tmp-payroll-detail-table-wrap {
    overflow-x: auto;
}
.tmp-payroll-detail-table-wrap .tmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
}
.tmp-payroll-detail-table-wrap .tmp-table th {
    background: var(--tmp-bg, #f5f7fb);
    padding: 9px 12px;
    text-align: left;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tmp-muted, #667085);
    border-bottom: 2px solid var(--tmp-border, #dce3ee);
    white-space: nowrap;
}
.tmp-payroll-detail-table-wrap .tmp-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--tmp-border, #dce3ee);
    vertical-align: middle;
}
.tmp-payroll-detail-table-wrap .tmp-table tfoot td,
.tmp-payroll-detail-table-wrap .tmp-table tfoot th {
    padding: 11px 12px;
    border-top: 2px solid var(--tmp-border, #dce3ee);
    border-bottom: none;
    background: var(--tmp-bg, #f5f7fb);
}
.tmp-payroll-detail-table-wrap .tmp-table tr:last-child td { border-bottom: 0; }

/* Status pill variants */
.tmp-status-pill--draft    { background: color-mix(in srgb, #667085 12%, white); color: #667085; }
.tmp-status-pill--approved { background: color-mix(in srgb, #16a34a 12%, white); color: #16a34a; }
.tmp-status-pill--paid     { background: color-mix(in srgb, #1f4f8f 12%, white); color: #1f4f8f; }

@media (max-width: 760px) {
    .tmp-payroll-run-card { grid-template-columns: 1fr; }
    .tmp-payroll-run-card__stats { justify-content: flex-start; }
    .tmp-payroll-bank-grid { flex-direction: column; }
    .tmp-payroll-bank-card { min-width: 0; width: 100%; }
    .tmp-payroll-preparer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAYROLL PAYMENTS — Pay Stubs, Earnings Widget, Gateway
   ============================================================ */

/* Earnings widget on preparer dashboard */
.tmp-earnings-widget { }
.tmp-earnings-highlight {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border: 1px solid color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
    border-radius: 8px;
    margin-bottom: 16px;
}
.tmp-earnings-highlight__stat { display: flex; flex-direction: column; gap: 2px; }
.tmp-earnings-highlight__stat span { font-size: .72rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .04em; }
.tmp-earnings-highlight__stat strong { font-size: 1rem; font-weight: 800; }
.tmp-earnings-history { display: grid; gap: 8px; }
.tmp-earnings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 7px;
    background: var(--tmp-bg,#f5f7fb);
    flex-wrap: wrap;
}
.tmp-earnings-row__info { display: flex; flex-direction: column; gap: 2px; }
.tmp-earnings-row__info strong { font-size: .88rem; }
.tmp-earnings-row__info span { font-size: .75rem; color: var(--tmp-muted,#667085); }
.tmp-earnings-row__amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tmp-earnings-row__amounts span { font-size: .75rem; color: var(--tmp-muted,#667085); }
.tmp-earnings-row__amounts strong { font-size: .92rem; }
.tmp-earnings-row__status { display: flex; align-items: center; gap: 8px; }

/* Pay stub list */
.tmp-pay-stub-list { display: grid; gap: 10px; }
.tmp-pay-stub-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface,#fff);
    flex-wrap: wrap;
}
.tmp-pay-stub-list-item > div { display: flex; flex-direction: column; gap: 4px; }

/* Pay stub document */
.tmp-pay-stub-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.tmp-pay-stub-doc {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 13px;
}
.tmp-pay-stub-doc__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 28px;
    background: var(--tmp-heading,#172033);
    color: #fff;
    gap: 20px;
    flex-wrap: wrap;
}
.tmp-pay-stub-doc__firm { display: flex; align-items: center; gap: 14px; }
.tmp-pay-stub-doc__firm strong { display: block; font-size: 1rem; }
.tmp-pay-stub-doc__firm span { font-size: .82rem; opacity: .75; }
.tmp-pay-stub-doc__title { text-align: right; }
.tmp-pay-stub-doc__title h2 { margin: 0 0 4px; font-size: 1.3rem; color: #fff; }
.tmp-pay-stub-doc__title span { font-size: .82rem; opacity: .7; }

.tmp-pay-stub-doc__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 20px 28px;
    background: #f8fafd;
    border-bottom: 1px solid #ddd;
}
.tmp-pay-stub-doc__meta > div { display: flex; flex-direction: column; gap: 3px; }
.tmp-pay-stub-doc__meta span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.tmp-pay-stub-doc__meta strong { font-size: .88rem; color: #172033; }

.tmp-pay-stub-doc__summary {
    padding: 20px 28px;
    border-bottom: 1px solid #ddd;
    display: grid;
    gap: 6px;
}
.tmp-pay-stub-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
}
.tmp-pay-stub-summary-row:last-child { border-bottom: none; }
.tmp-pay-stub-summary-row--deduction { color: #e53e3e; }
.tmp-pay-stub-summary-row--total {
    font-size: 1rem;
    font-weight: 800;
    padding-top: 10px;
    border-top: 2px solid #172033;
    border-bottom: none;
    margin-top: 6px;
}

.tmp-pay-stub-paid-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 28px;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
    border-bottom: 1px solid #bbf7d0;
    color: #16a34a;
    font-size: .85rem;
    font-weight: 700;
    flex-wrap: wrap;
}

.tmp-pay-stub-doc__lines { padding: 20px 28px; }
.tmp-pay-stub-doc__lines h4 { margin: 0 0 12px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.tmp-pay-stub-doc__lines table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tmp-pay-stub-doc__lines th {
    text-align: left; padding: 7px 8px;
    background: #f8fafd; border-bottom: 2px solid #ddd;
    color: #667085; font-size: .72rem; text-transform: uppercase;
}
.tmp-pay-stub-doc__lines td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; }
.tmp-pay-stub-footer { padding: 16px 28px; background: #f8fafd; font-size: .78rem; color: #667085; border-top: 1px solid #ddd; }

/* Mark as paid */
.tmp-mark-paid-form { margin-top: 8px; }
.tmp-mark-paid-toggle > summary { list-style: none; cursor: pointer; }
.tmp-mark-paid-toggle > summary::-webkit-details-marker { display: none; }
.tmp-mark-paid-fields { margin-top: 10px; padding: 14px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; border: 1px solid var(--tmp-border,#dce3ee); }
.tmp-mark-paid-fields .tmp-field { margin-bottom: 10px; }
.tmp-pay-paid-badge { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f0fdf4; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #16a34a; flex-wrap: wrap; }

/* Gateway settings */
.tmp-gateway-settings .tmp-gw-section { padding: 14px; background: var(--tmp-bg,#f5f7fb); border-radius: 8px; border: 1px solid var(--tmp-border,#dce3ee); margin-top: 4px; }

/* ============================================================
   CRM FIXES CSS — Items 1, 4, 5, 6, 12
   ============================================================ */

/* Form Submissions list */
.tmp-sub-list { display: grid; gap: 8px; }
.tmp-sub-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--tmp-border, #dce3ee);
    border-radius: 8px;
    background: var(--tmp-surface, #fff);
    flex-wrap: wrap;
}
.tmp-sub-list-item > div { display: flex; flex-direction: column; gap: 3px; }
.tmp-sub-list-item strong { font-size: .88rem; }
.tmp-sub-list-item span { font-size: .75rem; color: var(--tmp-muted, #667085); }

/* Support ticket thread */
.tmp-ticket-thread { margin-top: 24px; border-top: 1px solid var(--tmp-border, #dce3ee); padding-top: 18px; }
.tmp-ticket-thread h4 { margin: 0 0 14px; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tmp-muted, #667085); }
.tmp-ticket-msg {
    margin-bottom: 14px;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--tmp-border, #dce3ee);
}
.tmp-ticket-msg--original { background: var(--tmp-bg, #f5f7fb); }
.tmp-ticket-msg--staff { background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white); border-color: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white); }
.tmp-ticket-msg--client { background: var(--tmp-surface, #fff); }
.tmp-ticket-msg__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .78rem; flex-wrap: wrap; }
.tmp-ticket-msg__meta strong { font-size: .85rem; }
.tmp-ticket-msg__meta span { color: var(--tmp-muted, #667085); }
.tmp-ticket-msg__body { font-size: .88rem; line-height: 1.5; }
.tmp-ticket-reply-form { margin-top: 14px; }
.tmp-ticket-reply-row { display: flex; gap: 10px; align-items: flex-end; }
.tmp-ticket-reply-row textarea { flex: 1 1 auto; border: 1px solid var(--tmp-border, #dce3ee); border-radius: 7px; padding: 9px 12px; font-size: .88rem; font-family: inherit; resize: none; min-height: 70px; }

/* ============================================================
   PREPARER DASHBOARD — Clean Layout
   ============================================================ */
.tmp-preparer-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: clamp(16px,2vw,24px) clamp(16px,3vw,32px) 0;
    max-width: 1272px;
    margin: 0 auto;
}
.tmp-preparer-stat-card {
    flex: 1 1 140px;
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tmp-preparer-stat-card__val { font-size: 1.6rem; font-weight: 800; color: var(--tmp-primary,#1f4f8f); }
.tmp-preparer-stat-card__lbl { font-size: .75rem; color: var(--tmp-muted,#667085); text-transform: uppercase; letter-spacing: .05em; }

.tmp-preparer-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    max-width: 1272px;
    margin: 20px auto 40px;
    padding: 0 clamp(16px,3vw,32px);
    align-items: start;
}
@media (max-width: 860px) {
    .tmp-preparer-body { grid-template-columns: 1fr; }
}

.tmp-preparer-col { display: flex; flex-direction: column; gap: 16px; }

.tmp-preparer-section {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    padding: 16px 18px;
}
.tmp-preparer-section__title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tmp-muted,#667085);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tmp-preparer-section__link { font-size: .75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tmp-primary,#1f4f8f); text-decoration: none; }
.tmp-preparer-empty { color: var(--tmp-muted,#667085); font-size: .85rem; padding: 8px 0; }

/* Quick action grid */
.tmp-preparer-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tmp-preparer-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 8px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    color: var(--tmp-heading,#172033);
    background: var(--tmp-bg,#f5f7fb);
    transition: background .12s, border-color .12s;
}
.tmp-preparer-action-btn:hover {
    background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white);
    border-color: var(--tmp-primary,#1f4f8f);
    color: var(--tmp-primary,#1f4f8f);
}
.tmp-preparer-action-btn span { font-size: 1rem; }

/* Message preview cards in preparer dashboard */
.tmp-msg-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-msg-preview-card:last-child { border-bottom: none; }
.tmp-msg-preview-card__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--tmp-primary,#1f4f8f);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tmp-msg-preview-card__body { flex: 1 1 auto; min-width: 0; }
.tmp-msg-preview-card__body strong { display: block; font-size: .85rem; }
.tmp-msg-preview-card__body span { font-size: .75rem; color: var(--tmp-muted,#667085); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Thread item role label */
.tmp-thread-item__role { font-size: .7rem; color: var(--tmp-muted,#667085); }

/* ============================================================
   FIRM SETUP WIZARD
   ============================================================ */
.tmp-setup-wizard {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px,4vw,48px) 20px;
}
.tmp-setup-wizard__header { text-align: center; margin-bottom: 32px; }
.tmp-setup-wizard__header h1 { margin: 0 0 10px; font-size: clamp(1.5rem,3vw,2rem); }
.tmp-setup-wizard__header p { color: var(--tmp-muted,#667085); margin: 0; }

.tmp-setup-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    position: relative;
}
.tmp-setup-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--tmp-border,#dce3ee);
    z-index: 0;
}
.tmp-setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    position: relative;
    z-index: 1;
}
.tmp-setup-step__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--tmp-border,#dce3ee);
    color: var(--tmp-muted,#667085);
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; font-weight: 800;
}
.tmp-setup-step.is-active .tmp-setup-step__num {
    background: var(--tmp-primary,#1f4f8f);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--tmp-primary,#1f4f8f) 20%,white);
}
.tmp-setup-step.is-done .tmp-setup-step__num {
    background: #16a34a;
    color: #fff;
}
.tmp-setup-step__lbl { font-size: .75rem; font-weight: 700; color: var(--tmp-muted,#667085); text-align: center; }
.tmp-setup-step.is-active .tmp-setup-step__lbl { color: var(--tmp-primary,#1f4f8f); }
.tmp-setup-step.is-done .tmp-setup-step__lbl { color: #16a34a; }

.tmp-setup-card {
    background: var(--tmp-surface,#fff);
    border: 1px solid var(--tmp-border,#dce3ee);
    border-radius: 12px;
    padding: clamp(20px,3vw,32px);
}
.tmp-setup-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.tmp-setup-card > p { color: var(--tmp-muted,#667085); margin: 0 0 20px; }
.tmp-setup-card--complete { text-align: center; padding: 40px; }
.tmp-setup-check {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}

.tmp-setup-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.tmp-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    background: var(--tmp-bg,#f5f7fb);
    transition: border-color .13s, background .13s;
    min-height: 60px;
}
.tmp-provider-card input[type="radio"] { display: none; }
.tmp-provider-card:hover { border-color: var(--tmp-primary,#1f4f8f); }
.tmp-provider-card.is-selected {
    border-color: var(--tmp-primary,#1f4f8f);
    background: color-mix(in srgb,var(--tmp-primary,#1f4f8f) 8%,white);
}
.tmp-provider-card__name { font-size: .82rem; font-weight: 700; color: var(--tmp-heading,#172033); }
.tmp-setup-btn { width: 100%; margin-top: 20px; font-size: .95rem; padding: 13px; }

/* Firm Settings tabs */
.tmp-settings-tab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--tmp-border,#dce3ee);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tmp-settings-tab {
    padding: 10px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--tmp-muted,#667085);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .12s, border-color .12s;
}
.tmp-settings-tab:hover { color: var(--tmp-heading,#172033); }
.tmp-settings-tab.is-active { color: var(--tmp-primary,#1f4f8f); border-bottom-color: var(--tmp-primary,#1f4f8f); }

.tmp-settings-connected-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    font-size: .84rem;
    color: #15803d;
    margin-bottom: 16px;
}

.tmp-email-hint { margin-top: 10px; }

/* ============================================================
   FIRM DASHBOARD — Centered Branded Icon Quick-Nav
   ============================================================ */
.tmp-firm-quicknav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px 28px;
    max-width: 900px;
    margin: 0 auto;
}
.tmp-firm-quicknav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 90px;
    height: 90px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--qn-color, #d6a84f) 12%, white);
    border: 2px solid color-mix(in srgb, var(--qn-color, #d6a84f) 30%, white);
    text-decoration: none;
    color: var(--tmp-heading, #172033);
    font-size: .74rem;
    font-weight: 700;
    transition: background .14s, border-color .14s, transform .12s;
    text-align: center;
}
.tmp-firm-quicknav__btn:hover {
    background: var(--qn-color, #d6a84f);
    border-color: var(--qn-color, #d6a84f);
    color: #fff;
    transform: translateY(-2px);
}
.tmp-firm-quicknav__icon {
    font-size: 1.6rem;
    line-height: 1;
}

/* ============================================================
   PORTAL PILL NAV — for preparer/client roles
   ============================================================ */
.portal-pill-nav {
    width: 100%;
    background: var(--twlcrm-portal-nav-bg, #111);
    border-bottom: 3px solid var(--twlcrm-accent, #d6a84f);
    position: sticky;
    top: 0;
    z-index: 100;
}
.portal-pill-nav__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.portal-pill-nav__inner::-webkit-scrollbar { display: none; }
.portal-pill-nav__brand img {
    max-height: 32px;
    max-width: 100px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 8px;
}
.portal-pill-nav__links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.portal-pill-nav__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: .02em;
    transition: background .13s, border-color .13s, color .13s;
    min-height: 34px;
}
.portal-pill-nav__btn:hover,
.portal-pill-nav__btn.is-active {
    background: var(--twlcrm-accent, #d6a84f);
    border-color: var(--twlcrm-accent, #d6a84f);
    color: #111;
}

/* ============================================================
   PREPARER DASHBOARD — Notification Alert
   ============================================================ */
.tmp-preparer-notif-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 6%, white);
    border: 1px solid color-mix(in srgb, var(--tmp-primary,#1f4f8f) 20%, white);
    border-left: 4px solid var(--tmp-primary,#1f4f8f);
    border-radius: 8px;
    text-decoration: none;
    color: var(--tmp-heading,#172033);
    font-size: .85rem;
    margin-bottom: 12px;
    transition: background .13s;
}
.tmp-preparer-notif-alert:hover {
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
}
.tmp-preparer-notif-alert__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--tmp-primary,#1f4f8f);
    flex-shrink: 0;
    animation: tmp-pulse 1.5s infinite;
}
@keyframes tmp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.3); }
}
.tmp-preparer-notif-alert__arrow {
    margin-left: auto;
    color: var(--tmp-primary,#1f4f8f);
    font-weight: 800;
}

/* Payment method picker (preparer dashboard) */
.tmp-payment-method-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tmp-payment-method-pill {
    cursor: pointer;
}
.tmp-payment-method-pill input { display: none; }
.tmp-payment-method-pill span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--tmp-muted,#667085);
    background: var(--tmp-bg,#f5f7fb);
    transition: all .13s;
}
.tmp-payment-method-pill:hover span,
.tmp-payment-method-pill.is-selected span,
.tmp-payment-method-pill input:checked + span {
    border-color: var(--tmp-primary,#1f4f8f);
    background: color-mix(in srgb, var(--tmp-primary,#1f4f8f) 10%, white);
    color: var(--tmp-primary,#1f4f8f);
}

/* ============================================================
   PLAN MANAGEMENT — Pricing Grid
   ============================================================ */
.tmp-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.tmp-plan-card {
    background: var(--tmp-surface,#fff);
    border: 2px solid var(--tmp-border,#dce3ee);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow .15s, border-color .15s;
}
.tmp-plan-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); border-color: var(--plan-color,#1f4f8f); }
.tmp-plan-card.is-current { border-color: var(--plan-color,#1f4f8f); border-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-color,#1f4f8f) 12%, white); }

.tmp-plan-card__badge {
    background: var(--plan-color,#1f4f8f);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 5px 12px;
    text-align: center;
}
.tmp-plan-card__header {
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--tmp-border,#dce3ee);
}
.tmp-plan-card__header h3 { margin: 0 0 10px; font-size: 1rem; color: var(--plan-color,#1f4f8f); }
.tmp-plan-card__price { display: flex; align-items: baseline; gap: 3px; }
.tmp-plan-card__amount { font-size: 2rem; font-weight: 800; color: var(--tmp-heading,#172033); }
.tmp-plan-card__period { font-size: .82rem; color: var(--tmp-muted,#667085); }
.tmp-plan-card__setup { font-size: .75rem; color: var(--tmp-muted,#667085); margin: 6px 0 0; }

.tmp-plan-card__features {
    list-style: none;
    padding: 14px 20px;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tmp-plan-card__features li { font-size: .82rem; color: var(--tmp-text,#172033); }
.tmp-plan-card__action { padding: 14px 20px 18px; }
.tmp-plan-card__action .tmp-button { justify-content: center; font-size: .85rem; }