.product-feature-shell {
    display: grid;
    gap: 18px;
}

/* ERP-2: service order workspace */
.quote-order-conversion,
.quote-order-link {
    margin-top: 12px;
    border-radius: 12px;
}

.quote-order-conversion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.quote-order-conversion div {
    display: grid;
    gap: 3px;
}

.quote-order-conversion strong {
    color: #166534;
    font-size: 13px;
}

.quote-order-conversion span {
    color: #4b6354;
    font-size: 12px;
}

.quote-order-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.service-orders-page {
    display: grid;
    gap: 18px;
}

.service-orders-header {
    align-items: end;
}

.service-order-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(94px, 1fr));
    gap: 8px;
}

.service-order-kpis > div {
    min-width: 94px;
    padding: 11px 13px;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
}

.service-order-kpis span,
.service-order-summary span,
.service-order-section-heading span {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-order-kpis strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 22px;
}

.service-orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #f8fafc;
}

.service-orders-toolbar > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-orders-toolbar span {
    color: #64748b;
    font-size: 12px;
}

.service-orders-toolbar a,
.service-orders-empty a {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.service-orders-list {
    display: grid;
    gap: 16px;
}

.service-order-card {
    padding: 20px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
    scroll-margin-top: 98px;
}

.service-order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.service-order-card-header > div {
    min-width: 0;
}

.service-order-card-header small {
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-order-card-header h2 {
    margin: 5px 0 4px;
    color: #0f172a;
    font-size: 20px;
}

.service-order-card-header div > span,
.service-order-description {
    color: #64748b;
    font-size: 12px;
}

.service-order-status-pill {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 11px;
    font-weight: 900;
}

.service-order-status-in_progress .service-order-status-pill {
    background: #fef3c7;
    color: #92400e;
}

.service-order-status-completed .service-order-status-pill {
    background: #dcfce7;
    color: #166534;
}

.service-order-status-canceled .service-order-status-pill {
    background: #f1f5f9;
    color: #475569;
}

.service-order-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #e2e8f0;
}

.service-order-summary > div {
    min-width: 0;
    padding: 12px;
    background: #f8fafc;
}

.service-order-summary strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-order-description {
    margin: 14px 0 0;
    line-height: 1.55;
}

.service-order-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 16px;
    margin-top: 16px;
}

.service-order-items,
.service-order-planning-form {
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fbfdff;
}

.service-order-section-heading {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
}

.service-order-section-heading strong {
    color: #0f172a;
    font-size: 14px;
}

.service-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #e2e8f0;
}

.service-order-item > div {
    display: grid;
    gap: 3px;
}

.service-order-item strong {
    color: #0f172a;
    font-size: 12px;
}

.service-order-item span {
    color: #64748b;
    font-size: 11px;
}

.service-order-planning-form {
    display: grid;
    gap: 10px;
}

.service-order-planning-form label {
    display: grid;
    gap: 5px;
}

.service-order-planning-form label > span {
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

.service-order-planning-form input,
.service-order-planning-form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cfd9e7;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
}

.service-order-history {
    margin-top: 14px;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.service-order-history summary {
    cursor: pointer;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.service-order-history article {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0 0;
}

.service-order-history article > span {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: #2563eb;
}

.service-order-history article div {
    display: grid;
    gap: 2px;
}

.service-order-history strong {
    color: #0f172a;
    font-size: 12px;
}

.service-order-history small {
    color: #64748b;
    font-size: 11px;
}

.service-orders-empty {
    min-height: 260px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.service-orders-empty > span {
    color: #2563eb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-orders-empty p {
    max-width: 520px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .service-orders-toolbar,
    .service-order-card-header {
        align-items: flex-start;
    }

    .service-order-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .quote-order-conversion,
    .service-orders-toolbar,
    .service-orders-toolbar > div,
    .service-order-card-header {
        display: grid;
    }

    .quote-order-conversion button,
    .service-orders-toolbar a,
    .service-order-planning-form button {
        width: 100%;
    }

    .service-order-kpis {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .service-order-kpis > div {
        min-width: 0;
        padding: 10px;
    }

    .service-order-kpis strong {
        font-size: 18px;
    }

    .service-order-card {
        padding: 15px;
        border-radius: 15px;
    }

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

    .service-order-item {
        align-items: flex-start;
    }
}

.product-feature-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    padding-bottom: 4px;
}

.product-feature-header span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.product-feature-header h1 {
    margin: 6px 0 4px;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.1;
}

.product-feature-header p {
    margin: 0;
    color: #64748b;
    max-width: 720px;
    line-height: 1.55;
}

.product-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.product-feature-panel {
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 14px 44px rgba(15, 23, 42, .06);
}

.product-feature-panel h2,
.product-feature-panel h3 {
    margin: 0 0 8px;
}

.product-feature-panel p,
.product-feature-muted {
    color: #64748b;
    line-height: 1.55;
}

.product-feature-list {
    display: grid;
    gap: 12px;
}

.product-feature-row {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    display: grid;
    gap: 8px;
}

.product-feature-row header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.product-feature-row strong {
    color: #0f172a;
}

.product-feature-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.product-feature-form {
    display: grid;
    gap: 12px;
}

.product-feature-form label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-weight: 800;
}

.product-feature-form input,
.product-feature-form textarea,
.product-feature-form select {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    color: #0f172a;
    background: #fff;
}

.product-feature-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.product-feature-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.product-feature-check {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
}

.product-feature-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

.product-feature-table th,
.product-feature-table td {
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.product-feature-table th {
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.product-feature-empty {
    border: 1px dashed rgba(15, 23, 42, .18);
    border-radius: 8px;
    padding: 24px;
    color: #64748b;
    text-align: center;
    background: #f8fafc;
}

.product-feature-button,
.product-feature-link-button {
    border: 1px solid #2563eb;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    min-height: 38px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-feature-button.is-secondary,
.product-feature-link-button {
    background: #fff;
    color: #2563eb;
}

.product-feature-button:disabled {
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
}

.product-feature-link-button {
    min-height: 32px;
    padding: 6px 10px;
}

.product-feature-alert {
    border: 1px solid rgba(37, 99, 235, .18);
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 800;
}

.product-feature-alert.is-success {
    border-color: rgba(22, 163, 74, .18);
    background: #f0fdf4;
    color: #166534;
}

.product-feature-alert.is-error {
    border-color: rgba(220, 38, 38, .2);
    background: #fef2f2;
    color: #991b1b;
}

.calendar-integration-shell {
    max-width: 1080px;
}

.calendar-integration-overview {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    border-top: 1px solid rgba(15, 23, 42, .09);
    border-bottom: 1px solid rgba(15, 23, 42, .09);
}

.calendar-provider-mark,
.calendar-professional-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #eef5ff;
    color: #175cd3;
    font-weight: 900;
}

.calendar-provider-mark {
    width: 42px;
    height: 42px;
    border: 1px solid #d7e6ff;
    border-radius: 8px;
    font-size: 19px;
}

.calendar-integration-overview strong,
.calendar-integration-overview small {
    display: block;
}

.calendar-integration-overview strong {
    color: #0f172a;
}

.calendar-integration-overview small {
    margin-top: 4px;
    color: #64748b;
}

.calendar-platform-status,
.calendar-connection-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.calendar-platform-status[data-ready="true"],
.calendar-connection-pill[data-status="connected"] {
    background: #ecfdf3;
    color: #067647;
}

.calendar-connection-pill[data-status="pending_oauth"] {
    background: #fffaeb;
    color: #b54708;
}

.calendar-connection-pill[data-status="error"] {
    background: #fef3f2;
    color: #b42318;
}

.calendar-professionals-section {
    display: grid;
    gap: 12px;
}

.calendar-professionals-section > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.calendar-professionals-section h2 {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 18px;
}

.calendar-professionals-section > header small {
    color: #64748b;
    font-weight: 750;
}

.calendar-section-eyebrow {
    color: #175cd3;
    font-size: 10px;
    font-weight: 900;
}

.calendar-professional-list {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: #fff;
}

.calendar-professional-drawer + .calendar-professional-drawer {
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.calendar-professional-drawer > summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 15px;
    cursor: pointer;
    list-style: none;
}

.calendar-professional-drawer > summary::-webkit-details-marker {
    display: none;
}

.calendar-professional-drawer[open] > summary {
    background: #f8fafc;
}

.calendar-professional-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.calendar-professional-title {
    min-width: 0;
}

.calendar-professional-title strong,
.calendar-professional-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-professional-title strong {
    color: #0f172a;
    font-size: 14px;
}

.calendar-professional-title small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.calendar-drawer-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.calendar-professional-drawer[open] .calendar-drawer-chevron {
    transform: rotate(225deg);
}

.calendar-professional-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 15px 16px 69px;
    border-top: 1px solid rgba(15, 23, 42, .07);
}

.calendar-connection-details {
    min-width: 0;
}

.calendar-connection-details span,
.calendar-connection-details strong,
.calendar-connection-details small {
    display: block;
}

.calendar-connection-details span {
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.calendar-connection-details strong {
    margin-top: 4px;
    color: #0f172a;
    overflow-wrap: anywhere;
}

.calendar-connection-details small {
    margin-top: 4px;
    color: #64748b;
    line-height: 1.45;
}

.calendar-professional-actions {
    justify-content: flex-end;
}

.calendar-professional-actions form {
    margin: 0;
}

.calendar-legacy-connection {
    padding: 14px;
    border: 1px solid #fedf89;
    border-radius: 8px;
    background: #fffaeb;
}

.calendar-legacy-connection strong {
    color: #93370d;
}

.calendar-legacy-connection p {
    margin: 5px 0 10px;
    color: #854a0e;
    line-height: 1.45;
}

.product-feature-row.is-unread {
    border-color: rgba(37, 99, 235, .28);
    background: #f8fbff;
}

.product-feature-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.product-feature-metrics article {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.product-feature-metrics small {
    color: #64748b;
    font-weight: 800;
}

.product-feature-metrics strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 24px;
}

.product-feature-metrics article > span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.product-feature-metrics article.is-warning {
    border-color: rgba(217, 119, 6, .28);
    background: #fffbeb;
}

.finance-header-count {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: #64748b;
}

.finance-header-count strong {
    color: #0f172a;
    font-size: 26px;
    line-height: 1;
}

.finance-header-count span {
    font-size: 12px;
    font-weight: 750;
}

.finance-integration {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    overflow: hidden;
}

.finance-integration > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.finance-integration > summary::-webkit-details-marker {
    display: none;
}

.finance-integration-brand {
    display: grid;
    place-items: center;
    min-width: 58px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

.finance-integration > summary > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.finance-integration > summary small {
    color: #64748b;
}

.finance-integration-status {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.finance-integration-status.is-validated {
    background: #ecfdf5;
    color: #047857;
}

.finance-integration-status.is-error {
    background: #fff7ed;
    color: #c2410c;
}

.finance-integration-body {
    padding: 16px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.finance-integration-current,
.finance-integration-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.finance-integration-current > div,
.finance-integration-form label {
    display: grid;
    gap: 6px;
}

.finance-integration-current small,
.finance-integration-form span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.finance-integration-current strong {
    overflow-wrap: anywhere;
}

.finance-integration-form input,
.finance-integration-form select,
.finance-asaas-charge-form input,
.finance-asaas-charge-form select {
    min-height: 40px;
    border: 1px solid rgba(15, 23, 42, .15);
    border-radius: 8px;
    padding: 9px 11px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.finance-integration-key,
.finance-integration-form p,
.finance-integration-form button {
    grid-column: 1 / -1;
}

.finance-integration-form p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.finance-integration-form button {
    justify-self: start;
}

.finance-integration-actions,
.finance-asaas-charge-form {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.finance-integration-actions {
    margin-top: 14px;
}

.finance-webhook-setup {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 15px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 10px;
    background: rgba(239, 246, 255, .55);
}

.finance-webhook-setup > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.finance-webhook-setup > header > div {
    display: grid;
    gap: 3px;
}

.finance-webhook-setup small,
.finance-webhook-fields label > span:first-child {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.finance-webhook-setup p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.finance-webhook-state {
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 11px;
    font-weight: 850;
}

.finance-webhook-state.is-active {
    background: #ecfdf5;
    color: #047857;
}

.finance-webhook-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.finance-webhook-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.finance-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.finance-copy-field input,
.finance-copy-field button {
    min-height: 40px;
    border: 1px solid rgba(15, 23, 42, .15);
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.finance-copy-field input {
    min-width: 0;
    padding: 9px 11px;
    border-radius: 8px 0 0 8px;
}

.finance-copy-field button {
    padding: 0 12px;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.finance-asaas-charge-form {
    flex: 1 1 100%;
}

.finance-asaas-charge-form input,
.finance-asaas-charge-form select {
    flex: 1 1 170px;
}

.finance-ledger {
    display: grid;
    gap: 10px;
}

.finance-entry {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.finance-entry[open] {
    border-color: rgba(37, 99, 235, .28);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.finance-entry > summary {
    min-height: 74px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(125px, .8fr) minmax(180px, 1.5fr) auto minmax(105px, .7fr) 18px;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.finance-entry > summary::-webkit-details-marker {
    display: none;
}

.finance-entry-date,
.finance-entry-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.finance-entry-date small,
.finance-entry-main small {
    color: #64748b;
    font-size: 12px;
}

.finance-entry-date strong,
.finance-entry-main strong {
    color: #0f172a;
    overflow-wrap: anywhere;
}

.finance-entry-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.finance-entry[data-status="paid"] .finance-entry-status {
    background: #ecfdf5;
    color: #047857;
}

.finance-entry[data-status="canceled"] .finance-entry-status,
.finance-entry[data-status="refunded"] .finance-entry-status {
    background: #f1f5f9;
    color: #475569;
}

.finance-entry-value {
    color: #0f172a;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.finance-entry-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.finance-entry[open] .finance-entry-chevron {
    transform: rotate(225deg);
}

.finance-entry-body {
    padding: 16px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #f8fafc;
}

.finance-edit-form,
.finance-notes-field {
    display: grid;
    gap: 12px;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.finance-form-grid label,
.finance-notes-field {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.finance-form-grid input,
.finance-form-grid select,
.finance-notes-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(15, 23, 42, .15);
    border-radius: 8px;
    padding: 9px 11px;
    background: #fff;
    color: #0f172a;
    font: inherit;
}

.finance-entry-actions,
.finance-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.finance-entry-source {
    margin-right: auto;
    color: #64748b;
    font-size: 12px;
}

.product-feature-button.is-success {
    border-color: #15803d;
    background: #15803d;
}

.product-feature-button.is-danger {
    border-color: #dc2626;
    background: #fff;
    color: #b91c1c;
}

.finance-secondary-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.product-feature-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 8px;
    background: #fff;
}

.winco-v3-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.winco-login-social {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
}

.winco-login-social a {
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 8px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0f172a;
    font-weight: 850;
    background: #fff;
}

.product-feature-public {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: #f8fafc;
    color: #0f172a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.product-feature-public-card {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 8px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
    display: grid;
    gap: 14px;
    text-align: center;
}

.product-feature-public-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin: 0 auto;
}

/* WINCO_QUOTE_ERP1_WORKSPACE_V1 */
.quote-workspace {
    gap: 22px;
}

.quote-page-header {
    align-items: center;
}

.quote-header-summary {
    min-width: 112px;
    padding: 13px 16px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #fff;
    display: grid;
    gap: 2px;
    text-align: right;
}

.quote-header-summary small,
.quote-panel-heading small,
.quote-number,
.quote-step {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.quote-header-summary strong {
    color: #0f172a;
    font-size: 24px;
}

.quote-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: start;
}

.quote-builder-panel,
.quote-queue-panel {
    border-radius: 18px;
    padding: 22px;
}

.quote-panel-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.quote-panel-heading h2 {
    margin-top: 4px;
}

.quote-step {
    color: #2563eb;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

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

.quote-items-section {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 13px;
}

.quote-items-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quote-items-section h3 {
    margin: 3px 0 0;
}

.quote-items-list {
    display: grid;
    gap: 10px;
}

.quote-item-editor {
    position: relative;
    padding: 14px 44px 14px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: minmax(170px, 1.7fr) minmax(82px, .6fr)
        minmax(110px, .85fr) minmax(100px, .75fr) minmax(112px, .8fr);
    align-items: end;
    gap: 10px;
}

.quote-item-editor label {
    gap: 5px;
    font-size: 12px;
}

.quote-item-editor input {
    min-height: 42px;
    padding: 9px 10px;
}

.quote-item-total {
    min-height: 64px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eaf1ff;
    display: grid;
    align-content: center;
    gap: 4px;
}

.quote-item-total span,
.quote-total-card span,
.quote-card-summary span,
.quote-status-form label > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.quote-item-total strong {
    color: #1d4ed8;
    font-size: 13px;
}

.quote-remove-item {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
}

.quote-remove-item:hover:not(:disabled),
.quote-remove-item:focus-visible:not(:disabled) {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.quote-remove-item:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.quote-total-card {
    padding: 15px 16px;
    border: 1px solid #cbdcf8;
    border-radius: 14px;
    background: #f5f8ff;
    display: grid;
    gap: 9px;
}

.quote-total-card > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.quote-total-card strong {
    color: #334155;
}

.quote-total-card .quote-grand-total {
    padding-top: 10px;
    border-top: 1px solid #cbdcf8;
    align-items: baseline;
}

.quote-grand-total span {
    color: #1e3a8a;
    font-weight: 850;
}

.quote-grand-total strong {
    color: #1d4ed8;
    font-size: 24px;
}

.quote-submit {
    width: 100%;
    min-height: 46px;
}

.quote-list {
    gap: 14px;
}

.quote-card {
    padding: 17px;
    border-radius: 15px;
    gap: 14px;
}

.quote-card header > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.quote-card header strong {
    font-size: 16px;
}

.quote-number {
    color: #2563eb;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.quote-card-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.quote-card-summary > div {
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    display: grid;
    gap: 3px;
}

.quote-card-summary strong {
    overflow-wrap: anywhere;
    font-size: 13px;
}

.quote-details {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 0;
}

.quote-details summary {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.quote-saved-items {
    margin-top: 9px;
    display: grid;
    gap: 7px;
}

.quote-saved-items > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 12px;
}

.quote-saved-items strong {
    white-space: nowrap;
}

.quote-status-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(110px, .8fr) auto;
    align-items: end;
}

.quote-status-form label {
    display: grid;
    gap: 5px;
}

.quote-status-form select,
.quote-status-form input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    background: #fff;
    padding: 7px 9px;
    color: #0f172a;
    font: inherit;
    font-size: 12px;
}

.quote-status-sent,
.quote-status-in_review {
    background: #fef3c7;
    color: #92400e;
}

.quote-status-accepted {
    background: #dcfce7;
    color: #166534;
}

.quote-status-rejected,
.quote-status-closed {
    background: #f1f5f9;
    color: #475569;
}

.quote-empty-state {
    min-height: 180px;
    display: grid;
    place-content: center;
    gap: 6px;
}

.quote-empty-state strong {
    color: #0f172a;
}

.quote-empty-state span {
    font-size: 13px;
}

@media (max-width: 1180px) {
    .quote-layout {
        grid-template-columns: 1fr;
    }

    .quote-item-editor {
        grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(100px, 1fr));
    }
}

@media (max-width: 720px) {
    .product-feature-header {
        display: grid;
        align-items: start;
    }

    .product-feature-header h1 {
        font-size: 24px;
    }

    .finance-header-count {
        justify-items: start;
    }

    .product-feature-row header,
    .product-feature-actions {
        display: grid;
    }

    .product-feature-table {
        display: block;
        overflow-x: auto;
    }

    .quote-page-header,
    .quote-panel-heading,
    .quote-items-section > header {
        display: grid;
    }

    .quote-header-summary {
        width: 100%;
        text-align: left;
    }

    .quote-builder-panel,
    .quote-queue-panel {
        padding: 16px;
        border-radius: 15px;
    }

    .quote-form-grid,
    .quote-item-editor {
        grid-template-columns: 1fr 1fr;
    }

    .quote-item-description {
        grid-column: 1 / -1;
    }

    .quote-item-total {
        min-height: 58px;
    }

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

    .quote-card-summary > div:first-child {
        grid-column: 1 / -1;
    }

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

    .quote-status-form .product-feature-link-button {
        width: 100%;
    }

    .finance-entry > summary {
        grid-template-columns: 1fr auto 16px;
        grid-template-areas:
            "main value chevron"
            "date status chevron";
        gap: 9px 12px;
        align-items: center;
    }

    .finance-integration > summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .finance-integration-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .finance-integration-current,
    .finance-integration-form {
        grid-template-columns: 1fr;
    }

    .finance-integration-key,
    .finance-integration-form p,
    .finance-integration-form button {
        grid-column: auto;
    }

    .finance-integration-actions,
    .finance-asaas-charge-form {
        display: grid;
    }

    .finance-webhook-setup > header,
    .finance-webhook-fields {
        display: grid;
        grid-template-columns: 1fr;
    }

    .finance-webhook-state {
        justify-self: start;
    }

    .finance-entry-main {
        grid-area: main;
    }

    .finance-entry-date {
        grid-area: date;
    }

    .finance-entry-status {
        grid-area: status;
    }

    .finance-entry-value {
        grid-area: value;
    }

    .finance-entry-chevron {
        grid-area: chevron;
    }

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

    .finance-entry-actions,
    .finance-secondary-actions {
        display: grid;
        justify-items: stretch;
    }

    .finance-entry-source {
        margin-right: 0;
    }

    .finance-entry-actions button,
    .finance-secondary-actions button,
    .finance-secondary-actions form {
        width: 100%;
    }

    .calendar-integration-overview {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .calendar-platform-status {
        grid-column: 1 / -1;
    }

    .calendar-professionals-section > header {
        display: grid;
        align-items: start;
    }

    .calendar-professional-drawer > summary {
        grid-template-columns: 40px minmax(0, 1fr) 12px;
    }

    .calendar-connection-pill {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .calendar-drawer-chevron {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .calendar-professional-body {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .calendar-professional-actions,
    .calendar-professional-actions a,
    .calendar-professional-actions button,
    .calendar-professional-actions form {
        width: 100%;
    }
}