.treatment-page {
    --treatment-ink: var(--tenant-secondary, #10282f);
    --treatment-muted: var(--tenant-muted, #62767a);
    --treatment-aqua: var(--tenant-primary, #27c7c2);
    --treatment-aqua-dark: var(--tenant-primary-dark, #159f9b);
    --treatment-mint: var(--tenant-primary-soft, #e6f8f5);
    --treatment-line: var(--tenant-line, rgba(16, 40, 47, .11));
    min-height: calc(100vh - 120px);
    padding: 48px 16px 64px;
    color: var(--treatment-ink);
    background:
        radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .88), transparent 22%),
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--treatment-aqua) 18%, transparent), transparent 25%),
        linear-gradient(
            145deg,
            var(--tenant-page-start, #f8fcfb) 0%,
            var(--tenant-page-end, #eef8f7) 100%);
}

.treatment-shell {
    width: min(100%, 980px);
    margin: 0 auto;
}

.treatment-editor-shell {
    width: min(100%, 860px);
    margin: 0 auto;
}

.treatment-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.treatment-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--treatment-aqua-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.treatment-eyebrow::before {
    width: 28px;
    height: 1px;
    background: currentColor;
    content: "";
}

.treatment-page-header h1 {
    margin: 16px 0 10px;
    font-size: clamp(36px, 6vw, 52px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.treatment-page-header > div:first-child > p:last-child {
    max-width: 620px;
    margin: 0;
    color: var(--treatment-muted);
    font-size: 16px;
    line-height: 1.7;
}

.treatment-total {
    display: grid;
    min-width: 126px;
    padding: 16px 20px;
    border: 1px solid var(--treatment-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    text-align: center;
    box-shadow: 0 12px 30px rgba(16, 40, 47, .07);
}

.treatment-total strong {
    color: var(--treatment-aqua-dark);
    font-size: 26px;
    line-height: 1;
}

.treatment-total span {
    margin-top: 5px;
    color: var(--treatment-muted);
    font-size: 11px;
    font-weight: 700;
}

.treatment-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.treatment-primary-button,
.treatment-secondary-button,
.treatment-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--tenant-control-radius, 999px);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.treatment-primary-button {
    min-height: 50px;
    border: 0;
    padding: 0 22px;
    background: var(--treatment-ink);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 14px 30px rgba(16, 40, 47, .16);
}

.treatment-primary-button:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 36px rgba(16, 40, 47, .23);
}

.treatment-secondary-button,
.treatment-edit-button {
    border: 1px solid var(--treatment-line);
    background: var(--tenant-surface, #fff);
    color: var(--treatment-ink);
}

.treatment-secondary-button {
    min-height: 50px;
    padding: 0 22px;
    font-size: 13px;
}

.treatment-edit-button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 11px;
}

.treatment-secondary-button:hover,
.treatment-edit-button:hover {
    transform: translateY(-1px);
    border-color: var(--treatment-aqua);
    color: var(--treatment-ink);
}

.treatment-book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border-radius: var(--tenant-control-radius, 999px);
    padding: 0 22px;
    background: var(--treatment-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(16, 40, 47, .16);
    transition: transform .2s ease, box-shadow .2s ease;
}

.treatment-message {
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}

.treatment-message.success {
    border-color: #b9e3c6;
    background: #edf9f1;
    color: #256d3b;
}

.treatment-message.error {
    border-color: #efc2c2;
    background: #fff1f1;
    color: #9d2929;
}

.treatment-message.validation-summary-valid {
    display: none;
}

.treatment-message ul {
    margin: 0;
    padding-left: 20px;
}

.treatment-book-button:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 18px 36px rgba(16, 40, 47, .23);
}

.treatment-category-list {
    display: grid;
    gap: 20px;
}

.treatment-category-card,
.treatment-empty-state {
    border: 1px solid transparent;
    border-radius: var(--tenant-card-radius, 26px);
    background:
        linear-gradient(var(--tenant-surface, #fff), var(--tenant-surface, #fff)) padding-box,
        linear-gradient(145deg, color-mix(in srgb, var(--treatment-aqua) 30%, transparent), var(--treatment-line)) border-box;
    box-shadow: 0 22px 56px rgba(16, 40, 47, .08);
}

.treatment-category-card {
    overflow: hidden;
}

.treatment-category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--treatment-line);
    background: linear-gradient(
        145deg,
        var(--tenant-panel-start, #fbfefd),
        var(--tenant-panel-end, #f1faf8));
}

.treatment-category-title,
.treatment-item-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.treatment-category-header h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.treatment-category-header p {
    max-width: 620px;
    margin: 6px 0 0;
    color: var(--treatment-muted);
    font-size: 13px;
    line-height: 1.6;
}

.treatment-category-count {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--treatment-mint);
    color: var(--treatment-aqua-dark);
    font-size: 10px;
    font-weight: 800;
}

.treatment-category-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.treatment-category-edit-button {
    min-height: 38px;
    border: 1px solid var(--treatment-line);
    border-radius: 999px;
    padding: 0 15px;
    background: #fff;
    color: var(--treatment-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.treatment-category-edit-button:hover {
    border-color: var(--treatment-aqua);
    color: var(--treatment-aqua-dark);
    transform: translateY(-1px);
}

.treatment-items {
    padding: 10px 28px;
}

.treatment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    padding: 15px 0;
}

.treatment-admin-page .treatment-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.treatment-item + .treatment-item {
    border-top: 1px solid var(--treatment-line);
}

.treatment-item h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
}

.treatment-item-main > span {
    display: block;
    margin-top: 5px;
    color: var(--treatment-muted);
    font-size: 12px;
}

.treatment-price {
    min-width: 130px;
    text-align: right;
}

.treatment-price strong {
    font-size: 17px;
    font-weight: 750;
}

.treatment-price span {
    color: var(--treatment-muted);
    font-size: 12px;
}

.treatment-status {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.treatment-status.active {
    background: var(--treatment-mint);
    color: var(--treatment-aqua-dark);
}

.treatment-status.inactive {
    background: #eef1f1;
    color: var(--treatment-muted);
}

.treatment-category-empty {
    margin: 0;
    padding: 28px;
    color: var(--treatment-muted);
    font-size: 13px;
}

.treatment-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--treatment-aqua-dark);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.treatment-back-link:hover {
    color: var(--treatment-ink);
}

.treatment-editor-header {
    margin-bottom: 28px;
}

.treatment-editor-header h1 {
    margin: 16px 0 10px;
    font-size: clamp(36px, 6vw, 52px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.treatment-editor-header > p:last-child {
    max-width: 620px;
    margin: 0;
    color: var(--treatment-muted);
    font-size: 16px;
    line-height: 1.7;
}

.treatment-editor-section {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid transparent;
    border-radius: var(--tenant-card-radius, 24px);
    background:
        linear-gradient(var(--tenant-surface, #fff), var(--tenant-surface, #fff)) padding-box,
        linear-gradient(145deg, color-mix(in srgb, var(--treatment-aqua) 30%, transparent), rgba(16, 40, 47, .05)) border-box;
    box-shadow: 0 22px 56px rgba(16, 40, 47, .08);
}

.treatment-editor-section + .treatment-editor-section {
    margin-top: 20px;
}

.treatment-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.treatment-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--treatment-mint);
    color: var(--treatment-aqua-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.treatment-section-heading h2 {
    margin: 1px 0 4px;
    font-size: 23px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.treatment-section-heading p,
.treatment-toggle-card p {
    margin: 0;
    color: var(--treatment-muted);
    font-size: 13px;
    line-height: 1.6;
}

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

.treatment-field {
    display: grid;
    align-content: start;
    gap: 7px;
}

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

.treatment-category-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.treatment-field-help {
    margin: 0;
    color: var(--treatment-muted);
    font-size: 12px;
    line-height: 1.5;
}

.treatment-field label,
.treatment-toggle-card label {
    color: var(--treatment-ink);
    font-size: 13px;
    font-weight: 800;
}

.treatment-field input,
.treatment-field select,
.treatment-field textarea {
    width: 100%;
    border: 1px solid var(--treatment-line);
    border-radius: 15px;
    padding: 0 15px;
    background: #fff;
    color: var(--treatment-ink);
    font: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.treatment-field input,
.treatment-field select {
    min-height: 52px;
}

.treatment-field textarea {
    min-height: 112px;
    padding-block: 13px;
    line-height: 1.55;
    resize: vertical;
}

.treatment-field input:focus,
.treatment-field select:focus,
.treatment-field textarea:focus {
    border-color: var(--treatment-aqua);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--treatment-aqua) 12%, transparent);
}

.treatment-price-input {
    position: relative;
}

.treatment-price-input > span {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    color: var(--treatment-muted);
    font-weight: 800;
    transform: translateY(-50%);
}

.treatment-price-input input {
    padding-left: 37px;
}

.treatment-validation {
    color: #a12626;
    font-size: 12px;
    font-weight: 700;
}

.treatment-validation:empty {
    display: none;
}

.treatment-inline-button {
    min-height: 52px;
    border: 1px solid var(--treatment-line);
    border-radius: 15px;
    padding: 0 18px;
    background: var(--treatment-ink);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.treatment-inline-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(16, 40, 47, .14);
}

.treatment-category-dialog {
    width: min(520px, calc(100vw - 28px));
    border: 1px solid var(--treatment-line);
    border-radius: 24px;
    padding: 0;
    background: #fff;
    color: var(--treatment-ink);
    box-shadow: 0 28px 80px rgba(16, 40, 47, .24);
}

.treatment-category-dialog::backdrop {
    background: rgba(10, 29, 34, .55);
    backdrop-filter: blur(4px);
}

.treatment-category-dialog form {
    display: grid;
    gap: 22px;
    padding: 28px;
}

.treatment-dialog-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.treatment-dialog-heading > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--treatment-mint);
    color: var(--treatment-aqua-dark);
    font-size: 22px;
    font-weight: 700;
}

.treatment-dialog-heading h2 {
    margin: 1px 0 4px;
    font-size: 24px;
    letter-spacing: -.025em;
}

.treatment-dialog-heading p {
    margin: 0;
    color: var(--treatment-muted);
    font-size: 13px;
    line-height: 1.55;
}

.treatment-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.treatment-dialog-actions button:disabled {
    cursor: wait;
    opacity: .65;
}

.treatment-category-warning {
    border: 1px solid color-mix(in srgb, #b56b21 30%, transparent);
    border-radius: 15px;
    padding: 13px 15px;
    background: color-mix(in srgb, #f6d9ae 34%, #fff);
    color: #7e4615;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.treatment-toggle-list {
    display: grid;
    gap: 12px;
}

.treatment-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid var(--treatment-line);
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        var(--tenant-panel-start, #fbfefd),
        var(--tenant-panel-end, #f1faf8));
}

.treatment-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 30px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #cbd5d6;
    cursor: pointer;
    outline: none;
    transition: background .2s ease, box-shadow .2s ease;
}

.treatment-toggle::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(16, 40, 47, .2);
    content: "";
    transition: transform .2s ease;
}

.treatment-toggle:checked {
    background: var(--treatment-aqua);
}

.treatment-toggle:checked::after {
    transform: translateX(24px);
}

.treatment-toggle:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--treatment-aqua) 20%, transparent);
}

.treatment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.treatment-empty-state {
    display: grid;
    justify-items: center;
    padding: 62px 24px;
    text-align: center;
}

.treatment-empty-state > span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--treatment-mint);
    color: var(--treatment-aqua-dark);
    font-size: 28px;
}

.treatment-empty-state h2 {
    margin: 20px 0 8px;
    font-size: 25px;
}

.treatment-empty-state p {
    margin: 0;
    color: var(--treatment-muted);
    font-size: 14px;
}

@media (max-width: 620px) {
    .treatment-page {
        padding: 28px 14px 44px;
    }

    .treatment-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .treatment-total {
        justify-self: start;
    }

    .treatment-header-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .treatment-book-button {
        align-self: flex-start;
    }

    .treatment-category-card,
    .treatment-empty-state {
        border-radius: 21px;
    }

    .treatment-category-header {
        padding: 21px;
    }

    .treatment-category-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .treatment-items {
        padding-inline: 21px;
    }

    .treatment-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .treatment-admin-page .treatment-item {
        grid-template-columns: 1fr;
    }

    .treatment-price {
        min-width: 0;
        text-align: left;
    }

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

    .treatment-field-wide {
        grid-column: auto;
    }

    .treatment-category-picker,
    .treatment-dialog-actions {
        grid-template-columns: 1fr;
    }

    .treatment-category-picker {
        display: grid;
    }

    .treatment-dialog-actions {
        display: grid;
    }

    .treatment-form-actions {
        display: grid;
    }
}