/*
 * Restored component layer
 * ------------------------
 * Newer application screens share this file while the original base styles
 * remain in style.css. Structural layouts use flexbox throughout.
 */

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

/* Booking workspace: calendar, providers and intake configuration. */
.booking-calendar-panel,
.booking-setup-layout,
.booking-timeoff-panel { margin-top: 22px; }
.booking-calendar-heading,
.booking-calendar-controls,
.booking-calendar-days,
.booking-calendar-day > header,
.booking-calendar-event,
.booking-setup-layout,
.booking-provider-form,
.booking-provider-list,
.booking-provider-list summary,
.booking-provider-edit,
.booking-provider-actions,
.booking-check-list,
.booking-intake-form,
.booking-question-list,
.booking-question-list article,
.booking-timeoff-form,
.booking-timeoff-list,
.booking-timeoff-list article {
    display: flex;
}
.booking-calendar-heading { align-items: center; gap: 18px; }
.booking-calendar-heading > div:first-child { flex: 1 1 auto; }
.booking-calendar-controls { align-items: center; flex-wrap: wrap; gap: 6px; }
.booking-calendar-controls a {
    padding: 8px 11px; border: 1px solid var(--color-border); border-radius: 9px;
    background: var(--color-surface); color: var(--color-muted); font-size: 13px; font-weight: 700;
}
.booking-calendar-controls a:hover,
.booking-calendar-controls a.is-active { border-color: #fcd3c1; background: #fef1eb; color: var(--color-accent-text); }
.booking-calendar-days { align-items: stretch; gap: 0; overflow-x: auto; border-top: 1px solid var(--color-border); }
.booking-calendar-day {
    box-sizing: border-box; min-width: 150px; min-height: 210px; flex: 1 1 14%;
    border-right: 1px solid var(--color-border); background: #fff;
}
.booking-calendar-day:last-child { border-right: 0; }
.booking-calendar-days.is-day .booking-calendar-day { min-width: 100%; }
.booking-calendar-days.is-month { flex-wrap: wrap; overflow: visible; }
.booking-calendar-days.is-month .booking-calendar-day { min-width: 14.285%; flex-basis: 14.285%; border-bottom: 1px solid var(--color-border); }
.booking-calendar-day > header { align-items: center; justify-content: space-between; padding: 11px 12px; background: #fcf9f8; color: var(--color-muted); }
.booking-calendar-day > header span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.booking-calendar-day > header strong { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.booking-calendar-day.is-today > header strong { background: #ff5a1f; color: #fff; }
.booking-calendar-events { padding: 8px; }
.booking-calendar-event {
    align-items: flex-start; gap: 7px; margin-bottom: 7px; padding: 8px;
    border-left: 3px solid var(--booking-color); border-radius: 7px; background: #fbf6f4;
}
.booking-calendar-event time { color: var(--booking-color); font-size: 11px; font-weight: 800; }
.booking-calendar-event span { min-width: 0; }
.booking-calendar-event strong,
.booking-calendar-event small { display: block; overflow: hidden; text-overflow: ellipsis; }
.booking-calendar-event strong { color: var(--color-text); font-size: 12px; white-space: nowrap; }
.booking-calendar-event small { margin-top: 2px; color: var(--color-muted); font-size: 10px; }
.booking-calendar-empty { display: block; padding: 12px 4px; color: var(--color-faint); font-size: 11px; }
.booking-widget-settings { margin-top: 22px; }
.booking-widget-form { padding: 20px; }

.booking-setup-layout { align-items: flex-start; flex-wrap: wrap; gap: 22px; }
.booking-setup-layout > section { min-width: 320px; flex: 1 1 460px; }
.booking-provider-form,
.booking-intake-form { flex-direction: column; gap: 13px; padding: 20px; border-bottom: 1px solid var(--color-border); }
.booking-provider-form label,
.booking-provider-edit label,
.booking-intake-form label,
.booking-timeoff-form label { min-width: 0; }
.booking-provider-form fieldset,
.booking-provider-edit fieldset {
    margin: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px;
}
.booking-provider-form legend,
.booking-provider-edit legend { padding: 0 5px; color: var(--color-muted); font-size: 12px; font-weight: 700; }
.booking-check-list { flex-wrap: wrap; gap: 8px 14px; }
.booking-check-list label { flex: 1 1 160px; flex-direction: row !important; align-items: center; gap: 7px; font-size: 13px; }
.booking-check-list input,
.booking-inline-check input { width: auto !important; }
.booking-provider-list { flex-direction: column; }
.booking-provider-list details { border-bottom: 1px solid var(--color-border); }
.booking-provider-list details:last-child { border-bottom: 0; }
.booking-provider-list summary { align-items: center; gap: 12px; padding: 15px 20px; cursor: pointer; list-style: none; }
.booking-provider-list summary::-webkit-details-marker { display: none; }
.booking-provider-list summary > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.booking-provider-list summary strong,
.booking-provider-list summary small { display: block; }
.booking-provider-list summary small { margin-top: 2px; color: var(--color-muted); font-size: 12px; }
.booking-provider-list summary > i { color: var(--color-faint); transition: transform .18s; }
.booking-provider-list details[open] summary > i { transform: rotate(180deg); }
.booking-provider-avatar {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--booking-color); color: #fff; font-weight: 800;
}
.booking-provider-edit { flex-direction: column; gap: 13px; padding: 18px 20px; background: #fcf9f8; }
.booking-provider-actions { align-items: center; gap: 8px; padding: 0 20px 18px; background: #fcf9f8; }
.booking-provider-actions button.secondary { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.booking-provider-actions button.danger { background: #fff; color: #b42318; border: 1px solid #f5c2bd; }
.booking-provider-week { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.booking-provider-week label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.booking-provider-week label > span { min-width: 54px; font-size: 12px; }
.booking-provider-week input[type="checkbox"] { width: auto !important; }
.booking-provider-week input[type="time"] { min-width: 115px; flex: 1 1 115px; }
.booking-inline-check { flex-direction: row !important; align-items: center; gap: 8px; }
.booking-placement-choice { margin: 0; padding: 0; border: 0; }
.booking-placement-choice legend { padding: 0 0 8px; color: #70665c; font-size: .71rem; font-weight: 700; }
.booking-placement-option { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.booking-placement-option input { width: auto !important; margin-top: 3px; }
.booking-placement-option span { display: flex; flex-direction: column; gap: 2px; }
.booking-placement-option small { color: var(--color-muted); font-weight: 400; }
.booking-placement-option:has(input:checked) { border-color: var(--color-accent-text); background: #fef1eb; }
.reviews-mode-choice { margin: 0; padding: 0; border: 0; }
.reviews-mode-choice legend { padding: 0 0 10px; color: #70665c; font-size: .71rem; font-weight: 700; }
.reviews-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.reviews-mode-option { display: flex !important; flex-direction: column !important; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; }
.reviews-mode-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.reviews-mode-option strong { font-size: .85rem; }
.reviews-mode-option small { color: var(--color-muted); font-weight: 400; font-size: .74rem; line-height: 1.4; }
.reviews-mode-option:has(input:checked) { border-color: var(--color-accent-text); background: #fef1eb; }
.reviews-mode-preview { position: relative; display: flex; align-items: center; height: 52px; padding: 8px; border-radius: 8px; background: #f5ebe7; gap: 5px; overflow: hidden; }
.reviews-mode-preview .rmp-card { display: block; flex: 1 1 30%; height: 100%; border-radius: 4px; background: #dfc4b8; }
.reviews-mode-preview.is-row .rmp-card,
.reviews-mode-preview.is-marquee .rmp-card { flex: 0 0 30%; }
.reviews-mode-preview.is-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.reviews-mode-preview.is-marquee .rmp-card { animation: reviews-mode-preview-drift 5s linear infinite; }
.reviews-mode-preview.is-spotlight { flex-direction: column; justify-content: center; gap: 6px; }
.reviews-mode-preview.is-spotlight .rmp-card { width: 70%; height: 28px; flex: 0 0 auto; }
.reviews-mode-preview .rmp-dots { display: flex; gap: 3px; }
.reviews-mode-preview .rmp-dot { width: 5px; height: 5px; border-radius: 50%; background: #dfc4b8; }
.reviews-mode-preview .rmp-dot:first-child { background: #ff5a1f; }
@keyframes reviews-mode-preview-drift { from { transform: translateX(0); } to { transform: translateX(-40px); } }

/* Language switcher picker. Same shape as the reviews one above, but the
   preview is the REAL switcher markup rendered with this site's own
   languages, not a drawing of it — so the swatch cannot drift from what
   publishing emits. That is why these rules style .language-switcher itself
   rather than a preview-only class. */
.switcher-style-choice { margin: 0; padding: 0; border: 0; }
.switcher-style-choice legend { padding: 0 0 10px; color: #70665c; font-size: .71rem; font-weight: 700; }
.switcher-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.switcher-style-option { display: flex !important; flex-direction: column !important; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; }
.switcher-style-option input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switcher-style-option:has(input:checked) { border-color: var(--color-accent-text); background: #fef1eb; }
.switcher-style-label { font-size: .85rem; font-weight: 700; }
.switcher-style-option small { color: var(--color-muted); font-weight: 400; font-size: .74rem; line-height: 1.4; }
.switcher-style-preview { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px; border-radius: 8px; background: #f5ebe7; }
/* The preview is inert: it is a sample of the control, not the control. */
.switcher-style-preview .language-switcher a { pointer-events: none; }
.switcher-style-preview .language-switcher select { pointer-events: none; }

.language-switcher { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; }
.language-switcher a { color: var(--color-muted); text-decoration: none; }
.language-switcher a.active { color: var(--color-text); }
/* The separator is emitted as markup, not generated here — a customer site
   never loads this stylesheet, so a CSS-only separator published as "NOEN". */
.language-switcher-sep { color: var(--color-border); font-weight: 400; }
.language-switcher.is-dropdown select { font: inherit; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }
.booking-intake-form [hidden],
.website-booking-form [hidden] { display: none !important; }
.booking-question-list { flex-direction: column; }
.booking-question-list article,
.booking-timeoff-list article { align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-border); }
.booking-question-list article > span,
.booking-timeoff-list article > span { min-width: 0; flex: 1 1 auto; }
.booking-question-list strong,
.booking-question-list small,
.booking-timeoff-list strong,
.booking-timeoff-list small { display: block; }
.booking-question-list small,
.booking-timeoff-list small { margin-top: 3px; color: var(--color-muted); font-size: 12px; }
.booking-timeoff-form { align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 18px 20px; }
.booking-timeoff-form label { flex: 1 1 180px; }
.booking-timeoff-form button { flex: 0 0 auto; }

@media (max-width: 760px) {
    .booking-calendar-heading { align-items: flex-start; flex-direction: column; }
    .booking-calendar-days.is-month { flex-wrap: nowrap; overflow-x: auto; }
    .booking-calendar-days.is-month .booking-calendar-day { min-width: 150px; flex-basis: 150px; }
    .booking-setup-layout > section { min-width: 100%; }
    .booking-timeoff-form { align-items: stretch; flex-direction: column; }
}

/* Real website modules: Newsletter, Reviews and slot-based Booking ------- */
.module-theme-newsletter .module-workspace-icon { background: #fef1eb; color: var(--color-accent-text); }
.module-theme-reviews .module-workspace-icon { background: #fff7dc; color: #b78e08; }
.module-art--newsletter,
.module-art--reviews { display: flex; min-height: 128px; flex-direction: column; justify-content: center; gap: 9px; padding: 22px; border-radius: 16px; background: rgba(255,255,255,.78); }
.module-newsletter-envelope { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 13px; background: #ff5a1f; color: #fff; font-size: 18px; }
.module-newsletter-line,
.module-review-copy { display: block; width: 78%; height: 7px; border-radius: 99px; background: #f8e2d8; }
.module-newsletter-line.is-short,
.module-review-copy.is-short { width: 48%; }
.module-art--newsletter b { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent-text); font-size: 11px; }
.module-review-rating { display: flex; align-items: center; gap: 12px; }
.module-review-rating strong { color: #34312f; font-size: 28px; }
.module-review-rating small { color: #f2c122; letter-spacing: 2px; }
.module-art--reviews > b { color: #f7763f; font-size: 11px; }
.newsletter-layout,
.reviews-layout { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 22px; margin: 22px 0; }
.newsletter-layout > .operations-panel,
.reviews-layout > .operations-panel { min-width: 320px; flex: 1 1 440px; }
.booking-settings-layout { margin: 22px 0; }
.booking-settings-layout > .operations-panel + .operations-panel { margin-top: 22px; }
.newsletter-campaign-list,
.newsletter-subscriber-list,
.reviews-list,
.booking-block-list { display: flex; flex-direction: column; }
.newsletter-campaign-list > a,
.newsletter-campaign-list > article,
.newsletter-subscriber-list > article,
.booking-block-list > article { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid #f2e9e5; color: #2f2d2c; text-decoration: none; }
.newsletter-campaign-list > a > span,
.newsletter-campaign-list > article > span,
.newsletter-subscriber-list > article > span,
.booking-block-list > article > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.newsletter-campaign-list strong,
.newsletter-subscriber-list strong,
.booking-block-list strong { font-size: 14px; }
.newsletter-campaign-list small,
.newsletter-subscriber-list small,
.booking-block-list small { color: #9a8f84; font-size: 12px; }
.newsletter-campaign-list em { color: #83776b; font-size: 12px; font-style: normal; }
.newsletter-compose-form,
.booking-settings-form,
.reviews-manual-panel .module-form { padding: 20px; }
.newsletter-compose-actions,
.reviews-connection-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 20px 20px; }
.newsletter-add-subscriber,
.booking-block-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 18px 20px; border-top: 1px solid #f2e9e5; }
.newsletter-add-subscriber input { min-width: 210px; flex: 1 1 230px; }
.newsletter-add-subscriber input,
.booking-block-form input { box-sizing: border-box; padding: 10px 12px; border: 1px solid #e9d8d1; border-radius: 9px; font: inherit; }
.newsletter-add-subscriber button,
.booking-block-form button,
.booking-week-form > button { padding: 10px 14px; border: 0; border-radius: 9px; background: #ff5a1f; color: #fff; font-weight: 750; cursor: pointer; }
.newsletter-subscriber-avatar { display: flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 50%; background: #fef1eb; color: var(--color-accent-text); font-weight: 800; }
.newsletter-subscriber-list select,
.agency-booking-status select { padding: 7px 9px; border: 1px solid #e9d8d1; border-radius: 8px; background: #fff; }
.reviews-google-mark,
.reviews-google-panel .operations-panel-heading > i { color: #f7763f; font-size: 24px; }
.reviews-connection { display: flex; align-items: center; gap: 13px; padding: 20px; }
.reviews-connection-status { display: flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f8ef; color: var(--color-success-text); }
.reviews-connection > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.reviews-connection small { color: #9a8f84; }
.reviews-connection em { margin-top: 5px; color: #b42318; font-size: 12px; font-style: normal; }
.reviews-list { padding: 18px; flex-direction: row; flex-wrap: wrap; gap: 14px; }
.reviews-list > article { display: flex; min-width: 250px; flex: 1 1 300px; flex-direction: column; padding: 18px; border: 1px solid #f0e4df; border-radius: 14px; background: #fff; }
.reviews-list > article.is-hidden { opacity: .62; background: #fcf8f7; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.review-card-head > span { display: flex; flex-direction: column; }
.review-card-head small { color: #d8a80b; font-size: 12px; }
.reviews-list blockquote { flex: 1; margin: 15px 0; color: #755141; line-height: 1.65; }
.review-card-delete button { border: 0; background: transparent; color: #b42318; font-size: 12px; cursor: pointer; }
.module-check { flex-direction: row !important; align-items: center; }
.module-check input { width: auto !important; }
.module-form-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.module-form-row > label { min-width: 130px; flex: 1 1 150px; }
.booking-timezone-summary { font-size: 15px !important; }
.booking-week-form { display: flex; flex-direction: column; padding: 10px 20px 20px; }
.booking-weekday { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f7f1ee; }
.booking-weekday > span { display: flex; min-width: 130px; flex: 1; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.booking-weekday > span input[type="checkbox"] { width: auto; }
.booking-weekday > input { width: 105px; padding: 7px; border: 1px solid #e9d8d1; border-radius: 8px; }
.booking-weekday > i { color: var(--color-faint); font-size: 11px; font-style: normal; }
.booking-week-form > button { align-self: flex-start; margin-top: 14px; }
.booking-blocks-panel { margin: 22px 0; }
.booking-block-form label { display: flex; min-width: 170px; flex: 1 1 190px; flex-direction: column; gap: 6px; color: #755141; font-size: 12px; font-weight: 700; }
.booking-block-list > article form { margin-left: auto; }

@media (max-width: 760px) {
    .newsletter-layout > .operations-panel,
    .reviews-layout > .operations-panel { min-width: 100%; flex-basis: 100%; }
    .newsletter-add-subscriber,
    .booking-block-form { align-items: stretch; flex-direction: column; }
    .newsletter-add-subscriber input { min-width: 0; width: 100%; }
    .booking-weekday { align-items: flex-start; flex-wrap: wrap; }
    .booking-weekday > span { min-width: 100%; flex-basis: 100%; }
}

.admin-module-body,
.module-workspace-body,
.admin-analytics-body {
    background: #fbf7f6;
}

/* Project navigation stays available while its main content scrolls. */
@media (min-width: 721px) {
    .site-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        width: 240px;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        box-sizing: border-box;
    }
}

.operations-heading-actions,
.portal-analytics-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.operations-heading-actions .btn,
.portal-analytics-heading-actions .btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* Portal authentication ------------------------------------------------ */
.portal-auth-body {
    min-height: 100vh;
    margin: 0;
    background: #fcf7f5;
}

.portal-auth-shell {
    display: flex;
    min-height: 100vh;
}

.portal-auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex: 1 1 52%;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(44px, 7vw, 92px);
    background: #0a0a0a;
    color: #fff;
    box-sizing: border-box;
}

.portal-auth-brand-panel::after {
    position: absolute;
    right: -130px;
    bottom: -180px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 115px rgba(255,255,255,.018);
    content: "";
}

.portal-auth-logo {
    position: absolute;
    top: 34px;
    left: clamp(44px, 7vw, 92px);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
}
/* This panel is always solid black (see .portal-auth-brand-panel) -- the
   logo's default ink color is invisible against it, so force it light here. */
.portal-auth-logo .brand-logo-web { color: #fff; }
.portal-auth-logo .brand-tagline { color: #e4c4b7; }

.portal-auth-brand-copy {
    position: relative;
    z-index: 1;
    max-width: 580px;
}

.portal-auth-kicker {
    display: block;
    margin-bottom: 15px;
    color: #f9a17b;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.portal-auth-brand-copy h1 {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem, 4.5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.portal-auth-brand-copy > p {
    max-width: 520px;
    margin: 21px 0 0;
    color: #e4c4b7;
    font-size: .98rem;
    line-height: 1.75;
}

.portal-auth-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.portal-auth-benefits > span {
    display: flex;
    min-width: 170px;
    flex: 1 1 170px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    color: #f9e4db;
    font-size: .71rem;
    font-weight: 650;
}

.portal-auth-benefits i { color: #f99b73; }

.portal-auth-brand-footer {
    position: absolute;
    bottom: 30px;
    left: clamp(44px, 7vw, 92px);
    color: #be917d;
    font-size: .65rem;
}

.portal-auth-form-panel {
    display: flex;
    min-height: 100vh;
    flex: 1 1 48%;
    align-items: center;
    justify-content: center;
    padding: 42px;
    background: #fff;
    box-sizing: border-box;
}

.portal-auth-card {
    width: 100%;
    max-width: 430px;
}

.portal-auth-card-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 13px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1.05rem;
}

.portal-auth-card-icon.is-error { background: #ffeded; color: #ca4141; }
.portal-auth-card-kicker { color: var(--color-accent-text); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.portal-auth-card h2 { margin: 8px 0 0; color: #2d2b2a; font-size: 2rem; letter-spacing: -.04em; }
.portal-auth-card > p { margin: 10px 0 0; color: #908477; font-size: .8rem; line-height: 1.6; }

.portal-auth-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-top: 28px;
}

.portal-auth-form > label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.portal-auth-form > label > span { color: #544e4b; font-size: .7rem; font-weight: 800; }
.portal-auth-form > label > small { color: var(--color-faint); font-size: .62rem; }
.portal-auth-form input { width: 100%; margin: 0; box-sizing: border-box; }
.portal-auth-form input:focus {
    border-color: #f18557;
    box-shadow: 0 0 0 3px rgba(244, 95, 31, .12);
    outline: 0;
}
.portal-auth-form > button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 3px 0 0;
}

.portal-auth-help {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 22px;
    padding: 13px 14px;
    border-radius: 9px;
    background: #fcf7f5;
    color: var(--color-faint);
    font-size: .65rem;
    line-height: 1.5;
}

.portal-auth-expired-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 21px;
    padding: 13px 14px;
    border: 1px solid #efe4df;
    border-radius: 10px;
    background: #fffaf8;
}

.portal-auth-expired-note i { margin-top: 2px; color: var(--color-accent-text); }
.portal-auth-expired-note span { display: flex; flex-direction: column; gap: 4px; }
.portal-auth-expired-note strong { color: #4a4543; font-size: .7rem; }
.portal-auth-expired-note small { color: var(--color-faint); font-size: .62rem; line-height: 1.45; }
.portal-auth-secondary-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 19px; color: var(--color-accent-text); font-size: .7rem; font-weight: 800; text-decoration: none; }
.portal-auth-login-value { margin: 13px 0 0; padding: 10px 12px; border-radius: 8px; background: #fcf5f2; color: #754f3f; font-size: .7rem; }

/* Module workspaces ---------------------------------------------------- */
.module-workspace { max-width: 1240px !important; }

.module-workspace-heading {
    position: relative;
    overflow: hidden;
    padding: 0 0 24px;
}

.module-workspace-heading .agency-module-title {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: flex-start;
    gap: 15px;
}

.module-workspace-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1rem;
}

.module-workspace-heading-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.module-workspace-token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 7px;
    background: #fbf1ed;
    color: #825745;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .6rem;
}

.module-workspace-empty {
    display: flex;
    min-height: 390px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    text-align: center;
    box-sizing: border-box;
}

.module-workspace-empty-art {
    width: min(100%, 340px);
    margin-bottom: 23px;
}

.module-workspace-empty h2,
.module-workspace-empty h3 { margin: 0; color: #302e2d; }
.module-workspace-empty p { max-width: 450px; margin: 9px 0 0; color: var(--color-faint); font-size: .72rem; line-height: 1.55; }

.module-entry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid #f3ece9;
    color: #151514;
    text-decoration: none;
}

.module-entry-row:hover { background: #fffaf7; }
.module-entry-row > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.module-entry-row strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.module-entry-row small { color: var(--color-faint); font-size: .61rem; }

.module-entry-mark {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: .7rem;
    font-weight: 850;
}

.module-entry-mark--person { border-radius: 50%; background: #fef3ee; color: #dc7c53; }
.module-entry-mark--number { background: #e8f8ef; color: var(--color-success-text); font-size: .58rem; }

.module-theme-services .module-workspace-icon { background: #fef1eb; color: var(--color-accent-text); }
.module-theme-team_members .module-workspace-icon { background: #fef3ee; color: #dc7c53; }
.module-theme-testimonials .module-workspace-icon { background: #fff7dc; color: #b58d08; }
.module-theme-faqs .module-workspace-icon { background: #e8f8ef; color: var(--color-success-text); }
.module-theme-projects .module-workspace-icon { background: #fef1eb; color: #d4754c; }
.module-theme-testimonials .module-entry-mark { background: #fff7dc; color: #b58d08; }
.module-theme-projects .module-entry-mark { background: #fef1eb; color: #d4754c; }
.agency-module-form label > small,
.portal-customer-module-form label > small { margin-top: -2px; color: var(--color-faint); font-size: .57rem; line-height: 1.4; }

.module-editor-preview { overflow: hidden; margin-top: 4px; border: 1px solid #efe4df; border-radius: 12px; background: #fffaf8; }
.module-editor-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #f1e8e4; }
.module-editor-preview > header span { color: #754f3f; font-size: .59rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.module-editor-preview > header small { color: var(--color-faint); font-size: .53rem; }
.module-editor-preview article { box-sizing: border-box; }
.module-preview-media { display: flex; align-items: center; justify-content: center; background: #ffffff; color: var(--color-accent-text); }
.module-preview-service { display: flex; align-items: stretch; min-height: 155px; }
.module-preview-service > img,
.module-preview-service > .module-preview-media { width: 34%; min-width: 125px; object-fit: cover; }
.module-preview-service > div { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px; }
.module-preview-service small { color: var(--color-accent-text); font-size: .52rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.module-preview-service h3,
.module-preview-person h3,
.module-preview-project h3 { margin: 4px 0 0; color: #151514; font-size: .8rem; }
.module-preview-service p,
.module-preview-person p,
.module-preview-project p { margin: 6px 0 0; color: #908477; font-size: .57rem; line-height: 1.45; }
.module-preview-service strong { margin-top: 7px; color: #4a4543; font-size: .65rem; }
.module-preview-service em,
.module-preview-project em { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 9px; color: var(--color-accent-text); font-size: .56rem; font-style: normal; font-weight: 800; }
.module-preview-person { display: flex; align-items: center; gap: 15px; padding: 17px; }
.module-preview-person > img,
.module-preview-avatar { width: 82px; height: 82px; flex: 0 0 82px; border-radius: 50%; object-fit: cover; }
.module-preview-avatar { display: flex; align-items: center; justify-content: center; background: #fef1eb; color: #d4754c; font-size: 1.6rem; font-weight: 850; }
.module-preview-person > div { min-width: 0; }
.module-preview-person strong { display: block; margin-top: 3px; color: #dc7d54; font-size: .58rem; }
.module-preview-quote { position: relative; padding: 18px; }
.module-preview-quote > i { color: #e7d084; font-size: 1rem; }
.module-preview-quote blockquote { margin: 8px 0 10px; color: #4a4543; font-family: Georgia, serif; font-size: .78rem; line-height: 1.55; }
.module-preview-quote > span { color: #e2b729; font-size: .62rem; letter-spacing: .1em; }
.module-preview-quote footer { display: flex; flex-direction: column; margin-top: 9px; }
.module-preview-quote footer strong { color: #754f3f; font-size: .6rem; }
.module-preview-quote footer small { color: var(--color-faint); font-size: .54rem; }
.module-preview-faq { padding: 16px; }
.module-preview-faq > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-preview-faq strong { color: #4a4543; font-size: .68rem; }
.module-preview-faq > header i { color: var(--color-success-text); }
.module-preview-faq p { margin: 10px 0 0; color: #908477; font-size: .58rem; line-height: 1.5; }
.module-preview-faq > small { display: inline-flex; margin-top: 10px; padding: 4px 7px; border-radius: 6px; background: #e8f8ef; color: var(--color-success-text); font-size: .5rem; font-weight: 750; text-transform: uppercase; }
.module-preview-project { display: flex; min-height: 165px; }
.module-preview-project > img,
.module-preview-project > .module-preview-media { width: 42%; min-width: 150px; object-fit: cover; }
.module-preview-project > div { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px; }
.module-preview-project > div > span { color: #dc7d54; font-size: .52rem; font-weight: 800; text-transform: uppercase; }

.blog-workspace-heading { min-height: 185px; align-items: center; }
.blog-workspace-heading--portal { min-height: 115px; }
.blog-workspace-cover {
    display: flex;
    width: min(360px, 34%);
    min-height: 145px;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    padding: 23px 27px;
    border-radius: 16px;
    background: #0a0a0a;
    color: #fff;
    box-shadow: 0 15px 30px rgba(64, 53, 49, .16);
    box-sizing: border-box;
}

.blog-workspace-cover > span { color: #faa885; font-size: .52rem; font-weight: 850; letter-spacing: .16em; }
.blog-workspace-cover > b { margin-top: 12px; font-size: 1.4rem; line-height: 1.05; letter-spacing: -.035em; }
.blog-workspace-cover > small { margin-top: 15px; color: #f7cab6; font-size: .56rem; }

@media (max-width: 620px) {
    .module-preview-service,
    .module-preview-project { flex-direction: column; }
    .module-preview-service > img,
    .module-preview-service > .module-preview-media,
    .module-preview-project > img,
    .module-preview-project > .module-preview-media { width: 100%; min-width: 0; height: 150px; }
}

/* Blog management ------------------------------------------------------ */
.admin-blog-page { max-width: 1240px !important; }
.admin-blog-summary { display: flex; flex-wrap: wrap; }
.admin-blog-summary .portal-pages-stat { min-width: 230px; flex: 1 1 0; }
.admin-blog-layout { display: flex; align-items: flex-start; gap: 22px; }
.admin-blog-primary { display: flex; min-width: 0; flex: 1 1 68%; flex-direction: column; gap: 22px; }
.admin-blog-sidebar { display: flex; min-width: 310px; flex: 0 1 32%; flex-direction: column; gap: 18px; }
.admin-blog-posts-panel,
.admin-blog-create-panel { overflow: hidden; }
.admin-blog-list { display: flex; flex-direction: column; }
.admin-blog-row { display: flex; align-items: center; border-bottom: 1px solid #f3ece9; }
.admin-blog-row:last-child { border-bottom: 0; }
.admin-blog-row-main {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    color: #151514;
    text-decoration: none;
}
.admin-blog-row-main:hover { background: #fffaf7; }
.admin-blog-row-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.admin-blog-row-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.admin-blog-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-blog-row-copy small { color: var(--color-faint); font-size: .64rem; }
.admin-blog-row-actions { display: flex; align-items: center; gap: 3px; padding-right: 13px; }
.admin-blog-row-actions form { margin: 0; }
.admin-blog-create-form { align-items: flex-end; }
.admin-blog-presentation-form { padding: 16px; }
.admin-blog-publishing-note { margin: 0; }

/* Blog editor ---------------------------------------------------------- */
.blog-editor-workspace { max-width: 1240px; padding-top: 30px; }
.blog-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 19px;
}
.blog-editor-title-row { display: flex; min-width: 0; align-items: flex-start; gap: 13px; }
.blog-editor-title-row > div { min-width: 0; }
.blog-editor-title-row h1 { margin: 4px 0 0; color: #2d2b2a; font-size: 1.65rem; letter-spacing: -.035em; }
.blog-editor-title-row p { margin: 6px 0 0; color: var(--color-faint); font-size: .7rem; }
.blog-editor-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.blog-editor-heading-actions .btn { display: inline-flex; min-height: 39px; align-items: center; gap: 7px; margin: 0; }
.blog-editor-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #efe2dc;
    border-radius: 11px;
    background: #fff;
}
.blog-editor-statusbar > div { display: flex; align-items: center; gap: 10px; }
.blog-editor-statusbar > div > i { color: var(--color-accent-text); }
.blog-editor-statusbar span { display: flex; flex-direction: column; gap: 2px; }
.blog-editor-statusbar strong { color: #4a4543; font-size: .7rem; }
.blog-editor-statusbar small { color: var(--color-faint); font-size: .6rem; }
.blog-editor-form { margin: 0; }
.blog-editor-layout { display: flex; align-items: flex-start; gap: 22px; }
.blog-editor-paper {
    min-width: 0;
    flex: 1 1 70%;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(53, 45, 41, .045);
}
.blog-editor-paper-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid #f2ebe8; background: #fefaf9; }
.blog-editor-paper-top span { color: var(--color-accent-text); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.blog-editor-paper-top small { color: var(--color-faint); font-size: .58rem; }
.blog-editor-paper > label { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 17px 20px 0; }
.blog-editor-paper > label > span { color: #754f3f; font-size: .68rem; font-weight: 800; }
.blog-editor-paper input,
.blog-editor-paper textarea { width: 100%; margin: 0; box-sizing: border-box; }
.blog-editor-richtext { min-height: 420px; padding: 0 20px 21px; }
.image-field { display: flex; align-items: center; gap: 8px; }
.image-field input { flex: 1 1 auto; min-width: 0; }
.image-field button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.image-field-preview { display: block; max-width: 220px; max-height: 140px; margin-top: 8px; border: 1px solid var(--color-border); border-radius: 8px; object-fit: cover; }
.image-field-preview[hidden] { display: none; }
.blog-editor-side { display: flex; min-width: 310px; flex: 0 1 30%; flex-direction: column; gap: 16px; }
.blog-editor-side-panel { overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.blog-editor-side-panel > header { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid #f2ebe8; }
.blog-editor-side-panel > header > i { color: var(--color-accent-text); }
.blog-editor-side-panel > header span { display: flex; flex-direction: column; gap: 2px; }
.blog-editor-side-panel > header strong { color: #4a4543; font-size: .7rem; }
.blog-editor-side-panel > header small { color: var(--color-faint); font-size: .58rem; }
.blog-editor-side-panel > label { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 13px 16px 0; }
.blog-editor-side-panel > label > span { color: #754f3f; font-size: .66rem; font-weight: 800; }
.blog-editor-side-panel input,
.blog-editor-side-panel textarea,
.blog-editor-side-panel select { width: 100%; margin: 0; box-sizing: border-box; }
.blog-editor-search-card { margin: 15px; padding: 13px; border: 1px solid #efe6e2; border-radius: 9px; background: #fefcfb; }
.blog-editor-search-card span,
.blog-editor-search-card strong,
.blog-editor-search-card small { display: block; }
.blog-editor-search-card span { color: #c95f32; font-size: .56rem; }
.blog-editor-search-card strong { margin-top: 4px; color: #aa4013; font-size: .72rem; }
.blog-editor-search-card small { margin-top: 5px; color: var(--color-faint); font-size: .57rem; line-height: 1.4; }
.blog-editor-save { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.blog-editor-danger { margin-top: 16px; padding: 15px; border: 1px solid #f0d5d5; border-radius: 11px; background: #fff8f8; }

/* Page editor ---------------------------------------------------------- */
.page-editor-workspace { max-width: 1240px; margin: 0 auto; }
.page-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 18px 0 22px;
}
.page-editor-title { display: flex; min-width: 0; align-items: flex-start; gap: 14px; }
.page-editor-title > div { min-width: 0; }
.page-editor-title-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1rem;
}
.page-editor-kicker { display: block; color: var(--color-accent-text); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.page-editor-title h1 { margin: 4px 0 0; color: #2d2b2a; font-size: 1.75rem; letter-spacing: -.04em; }
.page-editor-title p { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; color: var(--color-faint); font-size: .7rem; }
.page-editor-heading-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
.page-editor-heading-actions .btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.page-editor-summary { display: flex; flex-wrap: wrap; margin-bottom: 22px; overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.page-editor-summary > article { display: flex; min-width: 0; flex: 1 1 25%; align-items: center; gap: 12px; padding: 17px 18px; border-right: 1px solid #f1eae7; box-sizing: border-box; }
.page-editor-summary > article:last-child { border-right: 0; }
.page-editor-summary-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 10px; background: #fef1eb; color: var(--color-accent-text); }
.page-editor-summary-icon.is-violet,
.page-editor-panel-heading > span.is-violet { background: #fef1eb; color: #dc7d54; }
.page-editor-summary-icon.is-green,
.page-editor-panel-heading > span.is-green { background: #e8f8ef; color: var(--color-success-text); }
.page-editor-summary-icon.is-amber { background: #fff7dd; color: #b99009; }
.page-editor-summary article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.page-editor-summary small { color: var(--color-faint); font-size: .59rem; font-weight: 750; }
.page-editor-summary strong { overflow: hidden; color: #151514; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.page-editor-summary p { margin: 0; overflow: hidden; color: var(--color-faint); font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.page-editor-layout { display: flex; align-items: flex-start; gap: 22px; }
.page-editor-main-panel { min-width: 0; flex: 1 1 68%; }
.page-editor-side { display: flex; min-width: 300px; flex: 0 1 32%; flex-direction: column; gap: 16px; }
.page-editor-panel { overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.page-editor-form { margin: 0; }
.page-editor-panel-heading { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #f2ebe8; }
.page-editor-panel-heading > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: var(--color-accent-text);
}
.page-editor-panel-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.page-editor-panel-heading h2 { margin: 0; color: #151514; font-size: .82rem; }
.page-editor-panel-heading p { margin: 0; color: var(--color-faint); font-size: .61rem; line-height: 1.4; }
.page-editor-section-heading { border-top: 1px solid #f2ebe8; }
.page-editor-form-section { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 21px; }
.page-editor-form-section > label { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 0; }
.page-editor-form-section > label:first-child { margin-top: 0; }
.page-editor-form-section > label span { color: #754f3f; font-size: .68rem; font-weight: 800; }
.page-editor-form-section > label small { color: var(--color-faint); font-size: .58rem; line-height: 1.4; }
.page-editor-form-section > label em {
    display: inline-flex;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f7f2f0;
    color: var(--color-faint);
    font-size: .48rem;
    font-style: normal;
    text-transform: uppercase;
    vertical-align: middle;
}
.page-editor-form-section input,
.page-editor-form-section select,
.page-editor-form-section textarea { width: 100%; margin: 0; box-sizing: border-box; }
.page-editor-form-section textarea { min-height: 104px; resize: vertical; }
.seo-health-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
    padding: 14px 15px;
    border: 1px solid #f0d29b;
    border-radius: 11px;
    background: #fffaf0;
}
.seo-health-card.is-good { border-color: #bce4cb; background: #f2fbf5; }
.seo-health-card-heading { display: flex; align-items: center; gap: 10px; }
.seo-health-card-heading > span {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff0cf;
    color: #a66e00;
}
.seo-health-card.is-good .seo-health-card-heading > span { background: #dff5e7; color: var(--color-success-text); }
.seo-health-card-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.seo-health-card-heading strong { color: #554532; font-size: .68rem; }
.seo-health-card.is-good .seo-health-card-heading strong { color: #17653d; }
.seo-health-card-heading small { color: var(--color-faint); font-size: .55rem; }
.seo-health-card ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.seo-health-card li { display: flex; flex-direction: column; gap: 2px; padding-left: 41px; }
.seo-health-card li strong { color: #71501f; font-size: .6rem; }
.seo-health-card li span,
.seo-health-card > p { margin: 0; color: #9a7d55; font-size: .56rem; line-height: 1.45; }
.seo-health-card > p { padding-left: 41px; color: var(--color-success-text); }
.seo-field-meter {
    align-self: flex-end;
    margin-top: -4px;
    color: var(--color-faint);
    font-size: .54rem;
    font-weight: 650;
}
.seo-field-meter.is-empty { color: #a66e00; }
.seo-field-meter.is-over { color: #c53d3d; }
.page-editor-search-preview { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 14px 15px; border: 1px solid #efe6e2; border-radius: 10px; background: #fefcfb; }
.page-editor-search-preview small { color: #49705d; font-size: .57rem; }
.page-editor-search-preview strong { color: #aa4013; font-size: .78rem; font-weight: 600; }
.page-editor-search-preview p { margin: 0; color: var(--color-faint); font-size: .59rem; line-height: 1.45; }
.page-editor-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid #f2ebe8; background: #fefaf9; }
.page-editor-form-footer > span { color: var(--color-faint); font-size: .58rem; }
.page-editor-form-footer > span i { margin-right: 5px; }
.page-editor-form-footer button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; margin: 0; }
.page-editor-layout-form { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; }
.page-editor-layout-form label { margin: 0; color: #754f3f; font-size: .65rem; font-weight: 800; }
.page-editor-layout-form select,
.page-editor-layout-form input { width: 100%; margin: 0; box-sizing: border-box; }
.page-editor-layout-form button { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; margin: 2px 0 0; }
.page-editor-layout-form small { color: var(--color-faint); font-size: .57rem; line-height: 1.4; }
.page-editor-panel-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid #f2ebe8; color: var(--color-accent-text); font-size: .62rem; font-weight: 750; text-decoration: none; }
.page-editor-panel-link:hover { background: #fffaf7; }
.page-editor-action-list { display: flex; flex-direction: column; }
.page-editor-action-list form { margin: 0; }
.page-editor-action-list > a,
.page-editor-action-list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 13px 16px; border: 0; border-bottom: 1px solid #f5efed; border-radius: 0; background: #fff; color: #4a4543; text-align: left; text-decoration: none; box-sizing: border-box; }
.page-editor-action-list > *:last-child button,
.page-editor-action-list > a:last-child { border-bottom: 0; }
.page-editor-action-list > a:hover,
.page-editor-action-list button:hover { background: #fffaf7; }
.page-editor-action-list > a > span,
.page-editor-action-list button > span { display: flex; min-width: 0; align-items: center; gap: 10px; }
.page-editor-action-list > a > span > i,
.page-editor-action-list button > span > i { display: inline-flex; width: 31px; height: 31px; flex: 0 0 31px; align-items: center; justify-content: center; border-radius: 8px; background: #fef1eb; color: var(--color-accent-text); }
.page-editor-action-list > a > span > span,
.page-editor-action-list button > span > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.page-editor-action-list strong { color: #4a4543; font-size: .65rem; }
.page-editor-action-list small { color: var(--color-faint); font-size: .56rem; }
.page-editor-action-list > a > i,
.page-editor-action-list button > i { color: var(--color-faint); font-size: .55rem; }
.page-editor-danger-panel { border-color: #efd5d5; }
.page-editor-danger-panel .page-editor-panel-heading > span { background: #fff0f0; color: #c54141; }
.page-editor-danger-panel form { margin: 0; padding: 14px 16px; }
.page-editor-danger-panel button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; margin: 0; }
.page-editor-danger-panel .btn-danger { border-color: #c54141; background: #c54141; color: #fff; }
.page-editor-danger-panel .btn-danger:hover { border-color: #a83232; background: #a83232; }

@media (max-width: 1080px) {
    .page-editor-layout { flex-direction: column; }
    .page-editor-main-panel,
    .page-editor-side { width: 100%; min-width: 0; flex-basis: auto; }
    .page-editor-summary > article { flex-basis: 50%; }
    .page-editor-summary > article:nth-child(even) { border-right: 0; }
    .page-editor-summary > article:nth-child(-n + 2) { border-bottom: 1px solid #f1eae7; }
}

@media (max-width: 820px) {
    .page-editor-heading { flex-direction: column; }
    .page-editor-heading-actions { justify-content: flex-start; }
    .page-editor-summary > article { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #f1eae7; }
    .page-editor-summary > article:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
    .page-editor-title-icon { width: 40px; height: 40px; flex-basis: 40px; }
    .page-editor-title h1 { font-size: 1.45rem; }
    .page-editor-heading-actions { width: 100%; flex-direction: column; }
    .page-editor-heading-actions .btn { width: 100%; }
    .page-editor-form-footer { align-items: stretch; flex-direction: column; }
    .page-editor-form-footer button { width: 100%; }
}

/* Publishing ----------------------------------------------------------- */
.publishing-page { max-width: 1240px; margin: 0 auto; padding: 34px 32px 52px; box-sizing: border-box; }
.publishing-page--portal { max-width: 1120px; }
.publishing-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.publishing-kicker { display: block; color: var(--color-accent-text); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.publishing-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 5px; }
.publishing-title-row h1 { margin: 0; color: #2d2b2a; font-size: 1.9rem; letter-spacing: -.04em; }
.publishing-heading p { margin: 7px 0 0; color: var(--color-faint); font-size: .75rem; }
.publishing-heading-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.publishing-heading-actions form {
    display: flex;
    align-items: stretch;
    margin: 0;
}
.publishing-heading-actions .btn,
.publishing-heading-actions button {
    display: inline-flex;
    min-height: 42px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0 17px;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.publishing-heading-actions .btn-secondary { border-color: #eedcd4; }
.publishing-heading-actions .btn i,
.publishing-heading-actions button i {
    display: inline-flex;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.publishing-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f7f2f0;
    color: #84786c;
    font-size: .58rem;
    font-weight: 800;
}
.publishing-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.publishing-badge.is-success,
.publishing-badge.is-live { background: #e8f8ef; color: var(--color-success-text); }
.publishing-badge.is-warning { background: #fff6da; color: var(--color-warning-text); }
.publishing-badge.is-danger,
.publishing-badge.is-failed { background: #ffeded; color: #ca4141; }
.publishing-summary { display: flex; flex-wrap: wrap; margin-bottom: 22px; overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.publishing-summary > article { display: flex; min-width: 0; flex: 1 1 25%; align-items: center; gap: 12px; padding: 18px 20px; border-right: 1px solid #f1eae7; box-sizing: border-box; }
.publishing-summary > article:last-child { border-right: 0; }
.publishing-summary-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 10px; background: #fef1eb; color: var(--color-accent-text); }
.publishing-summary article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.publishing-summary small { color: var(--color-faint); font-size: .59rem; font-weight: 750; }
.publishing-summary strong { overflow: hidden; color: #151514; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.publishing-summary p { margin: 0; color: var(--color-faint); font-size: .58rem; }
.publishing-summary .is-date { font-size: .7rem; }
.publishing-layout { display: flex; align-items: flex-start; gap: 22px; }
.publishing-main { display: flex; min-width: 0; flex: 1 1 67%; flex-direction: column; gap: 22px; }
.publishing-side { display: flex; min-width: 310px; flex: 0 1 33%; flex-direction: column; gap: 18px; }
.publishing-panel { overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.publishing-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; border-bottom: 1px solid #f2ebe8; }
.publishing-panel > header h2 { margin: 0; color: #302e2d; font-size: .9rem; }
.publishing-panel > header p { margin: 4px 0 0; color: var(--color-faint); font-size: .66rem; }
.publishing-release-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px; }
.publishing-release-copy { display: flex; min-width: 0; flex: 1 1 auto; align-items: flex-start; gap: 14px; }
.publishing-release-copy > div { min-width: 0; }
.publishing-release-copy h3 { margin: 0; color: #151514; font-size: .9rem; }
.publishing-release-copy p { margin: 7px 0 0; color: var(--color-faint); font-size: .7rem; line-height: 1.55; }
.publishing-release-icon { display: inline-flex; width: 54px; height: 54px; flex: 0 0 54px; align-items: center; justify-content: center; border-radius: 14px; background: #fef1eb; color: var(--color-accent-text); font-size: 1.15rem; }
.publishing-release-action { display: flex; max-width: 245px; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.publishing-release-action button { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin: 0; }
.publishing-release-action small { color: var(--color-faint); font-size: .58rem; line-height: 1.4; text-align: right; }
.publishing-error-box { display: flex; align-items: flex-start; gap: 11px; margin: 0 19px 19px; padding: 13px 14px; border: 1px solid #f0d3d3; border-radius: 10px; background: #fff6f6; color: #c53c3c; }
.publishing-error-box div { display: flex; flex-direction: column; gap: 4px; }
.publishing-error-box p { margin: 0; color: #7e5b5b; font-size: .64rem; line-height: 1.45; }
.publishing-error-box small { color: #a47b7b; font-size: .56rem; }
.publishing-url-list,
.publishing-history,
.publishing-checks,
.publishing-checklist { display: flex; flex-direction: column; }
.publishing-url-list > article,
.publishing-history > article { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #f5efed; color: #151514; text-decoration: none; }
.publishing-url-list > article:last-child,
.publishing-history > article:last-child { border-bottom: 0; }
.publishing-url-icon,
.publishing-history-icon { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 9px; background: #fef1eb; color: var(--color-accent-text); }
.publishing-url-list article > div,
.publishing-history article > div { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 3px; }
.publishing-url-list small,
.publishing-history small { color: var(--color-faint); font-size: .59rem; }
.publishing-url-list strong,
.publishing-history strong { color: #4a4543; font-size: .7rem; }
.publishing-url-list p,
.publishing-history p { margin: 0; color: var(--color-faint); font-size: .59rem; line-height: 1.45; }
.publishing-url-list article > a,
.publishing-history article > a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--color-accent-text); font-size: .62rem; font-weight: 750; text-decoration: none; }
.publishing-url-list article > a:hover,
.publishing-history article > a:hover { color: #bf410b; }
.publishing-empty { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 25px; color: var(--color-faint); text-align: center; }
.publishing-empty i { color: #d9b6a7; font-size: 1.35rem; }
.publishing-empty strong { color: #754f3f; font-size: .76rem; }
.publishing-empty p { margin: 0; font-size: .63rem; }
.publishing-health-empty,
.publishing-health-good { display: flex; align-items: center; gap: 13px; padding: 20px; }
.publishing-health-empty > div,
.publishing-health-good > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.publishing-health-empty strong,
.publishing-health-good strong { color: #4a4543; font-size: .72rem; }
.publishing-health-empty p,
.publishing-health-good p { margin: 0; color: var(--color-faint); font-size: .63rem; line-height: 1.45; }
.publishing-health-icon,
.publishing-health-good > i { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 11px; background: #f3f0ff; color: #7357d9; }
.publishing-health-good { background: #f7fdf9; }
.publishing-health-good > i { background: #e4f7ec; color: var(--color-success-text); }
.publishing-health-summary { display: flex; flex-wrap: wrap; border-bottom: 1px solid #f2ebe8; }
.publishing-health-summary article { display: flex; min-width: 120px; flex: 1 1 25%; flex-direction: column; gap: 4px; padding: 14px 17px; border-right: 1px solid #f2ebe8; box-sizing: border-box; }
.publishing-health-summary article:last-child { border-right: 0; }
.publishing-health-summary small { color: var(--color-faint); font-size: .57rem; font-weight: 750; }
.publishing-health-summary strong { color: #4a4543; font-size: .9rem; }
.publishing-health-summary .is-danger strong { color: #ca4141; }
.publishing-health-summary .is-warning strong { color: var(--color-warning-text); }
.publishing-health-issues { display: flex; max-height: 430px; flex-direction: column; overflow-y: auto; }
.publishing-health-issues article { display: flex; align-items: flex-start; gap: 11px; padding: 13px 17px; border-bottom: 1px solid #f5efed; }
.publishing-health-issues article > span { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border-radius: 8px; background: #fff5db; color: var(--color-warning-text); font-size: .65rem; }
.publishing-health-issues article.is-error > span { background: #ffeded; color: #ca4141; }
.publishing-health-issues article > div { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 4px; }
.publishing-health-issues strong { color: #4a4543; font-size: .66rem; line-height: 1.4; }
.publishing-health-issues code { overflow-wrap: anywhere; color: #756a60; font-size: .58rem; }
.publishing-health-issues small { color: var(--color-faint); font-size: .56rem; overflow-wrap: anywhere; }
.publishing-health-checked,
.publishing-health-truncated { margin: 0; padding: 10px 17px; border-top: 1px solid #f5efed; color: var(--color-faint); font-size: .57rem; }
.publishing-health-truncated { border-top: 0; background: #fff9e9; color: #8b711d; }
.publishing-health-action { display: flex; justify-content: flex-end; margin: 0; padding: 13px 17px; border-top: 1px solid #f2ebe8; }
.publishing-health-action button { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.publishing-domain-form { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 17px; }
.publishing-domain-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.publishing-domain-form input { width: 100%; margin: 0; box-sizing: border-box; }
.publishing-domain-readonly { display: flex; flex-direction: column; gap: 4px; padding: 17px; }
.publishing-domain-readonly small { color: var(--color-faint); font-size: .59rem; }
.publishing-domain-readonly strong { color: #151514; }
.publishing-domain-readonly p { margin: 2px 0 0; color: var(--color-faint); font-size: .63rem; line-height: 1.45; }
.publishing-checks article { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #f5efed; }
.publishing-checks article > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.publishing-checks article strong { color: #4a4543; font-size: .67rem; }
.publishing-checks article p { margin: 0; color: var(--color-faint); font-size: .59rem; line-height: 1.45; }
.publishing-check-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 3px; border-radius: 50%; background: #b9b1a9; }
.publishing-check-dot.is-success { background: #21ad65; }
.publishing-check-dot.is-warning { background: #e2b933; }
.publishing-check-dot.is-danger { background: #d84a4a; }
.publishing-dns-records { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; border-bottom: 1px solid #f5efed; }
.publishing-dns-records small { color: var(--color-faint); font-size: .57rem; font-weight: 750; }
.publishing-dns-records code { overflow: hidden; padding: 5px 7px; border-radius: 5px; background: #f9f4f2; color: #72685e; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.publishing-check-action { margin: 0; padding: 14px 16px; }
.publishing-check-action button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; margin: 0; }
.publishing-checklist > div { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid #f5efed; color: var(--color-faint); font-size: .64rem; }
.publishing-checklist > div:last-child { border-bottom: 0; }
.publishing-checklist > div i { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #f4efed; color: var(--color-faint); font-size: .5rem; }
.publishing-checklist > div.is-complete { color: var(--color-success-text); }
.publishing-checklist > div.is-complete i { background: #e4f7ec; color: var(--color-success-text); }

/* Ticket detail -------------------------------------------------------- */
.ticket-detail-workspace { max-width: 1240px; }
.ticket-detail-heading .operations-title { align-items: flex-start; }
.ticket-detail-heading-actions,
.ticket-heading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ticket-detail-heading-actions { justify-content: flex-end; }
.ticket-heading-meta { margin-top: 9px; }
.ticket-detail-priority,
.ticket-detail-portal-badge,
.ticket-detail-private-badge,
.ticket-message-visibility {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f7f2f0;
    color: #84786c;
    font-size: .58rem;
    font-weight: 800;
}
.ticket-detail-priority.is-high { background: #ffeded; color: #c83e3e; }
.ticket-detail-priority.is-normal,
.ticket-message-visibility.is-customer { background: #fef1eb; color: var(--color-accent-text); }
.ticket-detail-portal-badge,
.ticket-message-visibility.is-visible { background: #e8f8ef; color: var(--color-success-text); }
.ticket-message-visibility { background: #fff5d5; color: #9c7a09; }
.ticket-detail-layout { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 22px; }
.ticket-conversation-panel { min-width: 0; flex: 1 1 68%; overflow: hidden; }
.ticket-detail-sidebar { display: flex; min-width: 320px; flex: 0 1 32%; flex-direction: column; gap: 16px; }
.ticket-conversation { display: flex; flex-direction: column; }
.ticket-conversation-item { display: flex; align-items: flex-start; gap: 13px; padding: 19px 20px; border-bottom: 1px solid #f3ece9; background: #fff; }
.ticket-conversation-item.is-team-reply { background: #fffcfb; }
.ticket-conversation-item.is-internal { background: #fffdf8; }
.ticket-conversation-avatar { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 11px; background: #fef1eb; color: var(--color-accent-text); font-size: .76rem; font-weight: 800; }
.ticket-conversation-item.is-team-reply .ticket-conversation-avatar { background: #e8f8ef; color: var(--color-success-text); }
.ticket-conversation-item.is-internal .ticket-conversation-avatar { background: #fff5d5; color: #ae8706; }
.ticket-conversation-content { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 11px; }
.ticket-conversation-content > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticket-conversation-content > header > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ticket-conversation-content > header strong { color: #151514; font-size: .75rem; }
.ticket-conversation-content time { color: var(--color-faint); font-size: .63rem; }
.ticket-conversation-body { color: #504b48; font-size: .76rem; line-height: 1.65; overflow-wrap: anywhere; }
.ticket-conversation-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-conversation-attachments > a { display: flex; min-width: 190px; max-width: 100%; flex: 0 1 260px; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #efe4df; border-radius: 9px; background: #fff; color: #72685e; text-decoration: none; }
.ticket-conversation-attachments span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.ticket-reply-composer { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 20px; background: #fffaf8; }
.ticket-composer-heading { display: flex; align-items: center; gap: 10px; }
.ticket-composer-heading > span { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 9px; background: #fef1eb; color: var(--color-accent-text); }
.ticket-composer-heading > div { display: flex; flex-direction: column; gap: 3px; }
.ticket-reply-composer textarea { min-height: 120px; margin: 0; resize: vertical; }
.ticket-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ticket-attachment-control { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; margin: 0; color: #85796c; }
.ticket-attachment-control > span { display: flex; flex-direction: column; gap: 2px; }
.ticket-composer-footer .ticket-note-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.ticket-settings-panel { overflow: hidden; }
.ticket-subject-form { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 17px; border-bottom: 1px solid #f2ebe8; }
.ticket-subject-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ticket-subject-form input,
.ticket-subject-form select { width: 100%; margin: 0; }
.ticket-settings-list { display: flex; flex-direction: column; }
.ticket-settings-list form { margin: 0; padding: 12px 17px; border-bottom: 1px solid #f5efed; }
.ticket-settings-list label { display: flex; align-items: center; gap: 12px; margin: 0; }
.ticket-settings-list label > span { display: flex; min-width: 105px; flex: 0 0 105px; align-items: center; gap: 7px; color: #7e7367; font-size: .66rem; font-weight: 700; }
.ticket-settings-list select,
.ticket-settings-list input { min-width: 0; flex: 1; margin: 0; }
.ticket-settings-meta { display: flex; flex-direction: column; gap: 12px; padding: 16px 17px; background: #fefaf9; }
.ticket-settings-meta > span { display: flex; align-items: center; gap: 8px; }
.ticket-settings-meta strong { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-visibility-explainer { display: flex; align-items: flex-start; gap: 10px; padding: 14px 15px; border: 1px solid #eee5e1; border-radius: 11px; background: #fcf9f8; color: #908477; }
.ticket-visibility-explainer.is-shared { border-color: #cfe8db; background: #f2fbf6; color: var(--color-success-text); }
.ticket-visibility-explainer > span { display: flex; flex-direction: column; gap: 4px; }

/* Appointment detail --------------------------------------------------- */
.appointment-detail-workspace { max-width: 1240px; }
.appointment-detail-heading-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.appointment-detail-summary { margin-bottom: 22px; }
.appointment-request-panel { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 15px 17px; border: 1px solid #cfe7da; border-radius: 12px; background: #f1faf5; }
.appointment-request-panel.is-waiting { border-color: #ece0b8; background: #fffbed; }
.appointment-request-panel.is-declined { border-color: #efd1d1; background: #fff5f5; }
.appointment-request-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: var(--color-success-text); }
.appointment-request-panel > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.appointment-request-panel p { margin: 0; color: var(--color-faint); font-size: .66rem; }
.appointment-request-panel form { margin: 0; }
.appointment-detail-layout { display: flex; align-items: flex-start; gap: 22px; }
.appointment-detail-form-panel { min-width: 0; flex: 1 1 68%; overflow: hidden; }
.appointment-detail-sidebar { display: flex; min-width: 315px; flex: 0 1 32%; flex-direction: column; gap: 16px; }
.appointment-detail-form { margin: 0; }
.appointment-detail-status-panel { overflow: hidden; }
.appointment-detail-status-list { display: flex; flex-direction: column; }
.appointment-detail-status-list article { display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid #f5efed; }
.appointment-detail-status-list article > span { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 9px; background: #fef1eb; color: var(--color-accent-text); }
.appointment-detail-status-list article > span.is-violet { background: #fef3ee; color: #dc7c53; }
.appointment-detail-status-list article > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.appointment-detail-status-list small { color: var(--color-faint); font-size: .58rem; }
.appointment-detail-status-list strong { color: #4a4543; font-size: .68rem; }
.appointment-detail-status-list em { color: var(--color-faint); font-size: .55rem; font-style: normal; }
.appointment-detail-side-action { margin: 0; padding: 14px 17px; }
.appointment-detail-side-action .btn { display: flex; width: 100%; align-items: center; justify-content: center; margin: 0; }
.appointment-decline-panel form,
.appointment-danger-panel form { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; }
.appointment-decline-panel label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.appointment-decline-panel textarea { width: 100%; margin: 0; box-sizing: border-box; }
.appointment-danger-panel { border-color: #ecd0d0; }

/* Email workspace ------------------------------------------------------ */
.email-workspace { max-width: 1240px; }
.email-summary { margin-bottom: 22px; }
.email-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; padding: 14px 18px; border-bottom: 1px solid #f2ebe8; }
.email-filter-bar label { display: flex; min-width: 160px; flex: 1 1 180px; flex-direction: column; gap: 5px; margin: 0; }
.email-filter-bar input,
.email-filter-bar select { width: 100%; margin: 0; box-sizing: border-box; }
.email-log-list { display: flex; flex-direction: column; }
.email-log-row { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid #f5efed; color: #151514; text-decoration: none; }
.email-log-row:hover { background: #fffaf7; }
.email-status-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 10px; background: #e8f8ef; color: var(--color-success-text); }
.email-status-icon.is-failed { background: #ffeded; color: #ca4141; }
.email-log-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.email-log-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-log-copy small { overflow: hidden; color: var(--color-faint); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.email-log-meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--color-faint); font-size: .58rem; }
.email-compose-panel { overflow: hidden; }
.email-compose-form { display: flex; flex-direction: column; gap: 0; margin: 0; }
.email-compose-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; }
.email-compose-grid > label { display: flex; min-width: 280px; flex: 1 1 calc(50% - 16px); flex-direction: column; gap: 6px; margin: 0; }
.email-compose-grid > label.is-wide { flex-basis: 100%; }
.email-compose-grid input,
.email-compose-grid select,
.email-compose-grid textarea { width: 100%; margin: 0; box-sizing: border-box; }
.email-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-top: 1px solid #f2ebe8; background: #fefaf9; }
.email-compose-actions p { margin: 0; color: var(--color-faint); font-size: .63rem; line-height: 1.45; }
.email-compose-actions button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 0; }
.email-detail-layout { display: flex; align-items: flex-start; gap: 22px; }
.email-message-panel { min-width: 0; flex: 1 1 69%; }
.email-detail-sidebar { display: flex; min-width: 310px; flex: 0 1 31%; flex-direction: column; gap: 16px; }
.email-message-header { display: flex; flex-wrap: wrap; gap: 16px; padding: 17px 20px; border-bottom: 1px solid #f2ebe8; background: #fefaf9; }
.email-message-header > div { display: flex; min-width: 150px; flex: 1 1 180px; flex-direction: column; gap: 4px; }
.email-message-header span,
.email-message-subject small { color: var(--color-faint); font-size: .57rem; }
.email-message-header strong { overflow: hidden; color: #754f3f; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.email-message-subject { display: flex; flex-direction: column; gap: 5px; padding: 17px 20px; border-bottom: 1px solid #f2ebe8; }
.email-message-subject strong { color: #151514; font-size: .9rem; }
.email-message-body { min-height: 260px; padding: 24px 20px; color: #504b48; font-size: .76rem; line-height: 1.75; white-space: normal; }
.email-retention-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 17px 20px 0;
    padding: 12px 13px;
    border: 1px solid #f8dbce;
    border-radius: 9px;
    background: #fef6f3;
    color: var(--color-accent-text);
}
.email-retention-notice.is-failed {
    border-color: #efd0d0;
    background: #fff5f5;
    color: #c54141;
}
.email-retention-notice > i { margin-top: 2px; }
.email-retention-notice > span { display: flex; flex-direction: column; gap: 4px; }
.email-retention-notice strong { color: #4a4543; font-size: .68rem; }
.email-retention-notice small { color: #908477; font-size: .61rem; line-height: 1.45; }
.email-attachment { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; padding: 11px 12px; border: 1px solid #efe4df; border-radius: 9px; background: #fefaf9; }
.email-attachment span { display: flex; flex-direction: column; gap: 3px; }
.email-detail-facts { display: flex; flex-direction: column; }
.email-detail-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; border-bottom: 1px solid #f5efed; }
.email-detail-facts span { color: var(--color-faint); font-size: .6rem; }
.email-detail-facts strong { min-width: 0; overflow: hidden; color: #754f3f; font-size: .63rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.email-delivery-error { display: flex; align-items: flex-start; gap: 9px; margin: 14px; padding: 11px 12px; border-radius: 9px; background: #fff0f0; color: #ca4141; }
.email-delivery-error p { margin: 4px 0 0; color: #815d5d; font-size: .6rem; line-height: 1.45; }

/* Contact form management --------------------------------------------- */
.admin-submissions-page { max-width: 1240px !important; }
.admin-submissions-summary { display: flex; flex-wrap: wrap; }
.admin-submissions-summary .portal-pages-stat { min-width: 230px; flex: 1 1 0; }
.admin-contact-fields-panel,
.admin-submissions-panel { margin-bottom: 22px; overflow: hidden; }
.admin-contact-fields-wrap { overflow-x: auto; }
.admin-contact-fields-table { min-width: 900px; }
.admin-contact-field-row { display: flex; align-items: center; }
.admin-contact-field-main { display: flex; min-width: 0; flex: 1; align-items: center; }
.admin-contact-field-main > * { min-width: 0; flex: 1; }
.admin-contact-field-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; padding-right: 10px; }
.admin-contact-field-actions form { margin: 0; }
/* The form-settings block sat flush against the panel edge, because
   .module-form carries no padding of its own and the panel's padding lives on
   its heading. Scoped to this page: .module-form is on ten other screens and
   none of them asked for this. */
.admin-submissions-page .operations-panel > .module-form { margin: 0; padding: 18px 20px; }
.admin-submissions-page .operations-panel > .module-form > label { display: block; margin-bottom: 5px; color: #2d2b2a; font-size: .68rem; font-weight: 700; }
.admin-submissions-page .operations-panel > .module-form > input { width: 100%; height: 38px; margin: 0 0 14px; border-radius: 9px; box-sizing: border-box; font-size: .72rem; }
.admin-submissions-page .operations-panel > .module-form > .muted { margin: -8px 0 14px; color: var(--color-faint); font-size: .62rem; }
.admin-submissions-page .operations-panel > .module-form > button { margin: 0; }
/* Save and Remove are two separate forms, so they stacked. They belong on one
   line, with the destructive one clearly secondary to it. */
.admin-contact-form-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 20px 18px; }
.admin-contact-form-settings-actions form { margin: 0; }

/* Contact form field table ---------------------------------------------
   One form covers every row, so one save covers the lot and a reorder carries
   your edits with it. It used to be a form per row plus a form per arrow, and
   the arrows discarded whatever you had just typed. */
.admin-contact-fields-form { margin: 0; }
.admin-contact-fields-panel .admin-contact-fields-table { min-width: 900px; }

/* Rows get room to breathe and a hover tint, so the one you are working on is
   obvious in a list of seven near-identical rows. */
.admin-contact-fields-table .fields-table-row { padding: 10px 18px; border-bottom: 1px solid #f6f1ef; transition: background .12s ease; }
.admin-contact-fields-table .admin-contact-field-row:hover { background: #fffbf9; }
.admin-contact-fields-table .fields-table-header { padding: 11px 18px; border-bottom: 1px solid #f2ebe8; background: #fdf8f6; color: #736760; font-size: .62rem; letter-spacing: .07em; }

.admin-contact-fields-table input[type="text"],
.admin-contact-fields-table select { height: 36px; border-radius: 8px; font-size: .7rem; }
.admin-contact-fields-table input[type="text"]:focus-visible,
.admin-contact-fields-table select:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 1px; }

/* A disabled options box reads as not-applicable rather than as an empty box
   someone forgot to fill in. */
.admin-contact-fields-table input[name$="[options]"]:disabled { border-color: transparent; background: transparent; color: #b3a79f; }

/* The generated token is read, never typed — a chip says that better than
   loose grey text sitting between two editable columns. */
.admin-contact-fields-table .token { display: inline-block; max-width: 100%; padding: 3px 7px; overflow: hidden; border-radius: 6px; background: #f4efec; color: #6f6a63; font-size: .58rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }

.admin-contact-field-actions { gap: 1px; padding-right: 0; }

/* The save bar sticks to the bottom of the panel, because with seven rows the
   button would otherwise sit below the fold of the table's own scroll area. */
.admin-contact-fields-footer { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-top: 1px solid #f2ebe8; background: #fffdfc; box-shadow: 0 -6px 14px -12px rgba(23, 21, 18, .5); }
.admin-contact-fields-footer .muted { display: inline-flex; align-items: center; gap: 7px; color: var(--color-faint); font-size: .63rem; }
.admin-contact-fields-footer .muted i { color: var(--color-success-text); }
.admin-contact-fields-footer button { margin: 0; }

/* The add row is a different act from editing the rows above it, so it gets
   its own ground and sits outside the striped table. */
.admin-contact-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; padding: 16px 18px; border-top: 1px solid #f2ebe8; background: #fdf8f6; }
.admin-contact-add-form > label { display: flex; min-width: 150px; flex: 1 1 170px; flex-direction: column; gap: 5px; margin: 0; }
.admin-contact-add-form > label > span { color: #736760; font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-contact-add-form input,
.admin-contact-add-form select { width: 100%; height: 36px; margin: 0; border-radius: 8px; box-sizing: border-box; font-size: .7rem; }
.admin-contact-required-option { flex: 0 0 auto !important; flex-direction: row !important; align-items: center; gap: 9px; }
/* <strong> and <small> ran together as "Required fieldVisitors must…" — both
   are inline, and nothing stacked them. */
.admin-contact-required-option > span { display: flex; flex-direction: column; gap: 1px; }
.admin-contact-required-option strong { color: #2d2b2a; font-size: .64rem; }
/* The add row's column labels are uppercase, and this <small> inherited it —
   turning a sentence into VISITORS MUST COMPLETE IT BEFORE SUBMITTING. */
.admin-contact-required-option small { max-width: 190px; color: var(--color-faint); font-size: .56rem; letter-spacing: normal; line-height: 1.4; text-transform: none; }
.admin-contact-required-option input { flex: 0 0 auto; width: auto; margin: 0; }

/* Adding a form is its own job. It used to sit between a form's settings and
   that form's fields, so its "Token key" and "Send messages to" read as
   belonging to the form above them. */
.admin-contact-add-formset { margin: 0; padding: 18px 20px; }
.admin-contact-add-formset-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 15px; }
.admin-contact-add-formset-grid > label { display: flex; min-width: 190px; flex: 1 1 220px; flex-direction: column; gap: 6px; margin: 0; }
.admin-contact-add-formset-grid > label > span { color: #2d2b2a; font-size: .68rem; font-weight: 700; }
.admin-contact-add-formset-grid input { width: 100%; height: 38px; margin: 0; border-radius: 9px; box-sizing: border-box; font-size: .72rem; }
.admin-contact-add-formset-grid small { color: var(--color-faint); font-size: .58rem; line-height: 1.45; }
.admin-contact-add-formset-grid code { padding: 1px 4px; border-radius: 4px; background: #f4efec; font-size: .95em; }
.admin-contact-add-formset button { margin: 0; }
.field-optional-note { margin-left: 6px; color: var(--color-faint); font-size: .55rem; font-style: normal; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

/* Tab strips -----------------------------------------------------------
   .tab-strip / .tab-btn had no rules anywhere, so every place using them —
   the contact form switcher, the page editor's language tabs and the reusable
   boxes — rendered them as a row of plain underlined links with no indication
   which one was active. */
.tab-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 18px 0; border-bottom: 1px solid #f2ebe8; }
.tab-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--color-faint); font-size: .69rem; font-weight: 700; text-decoration: none; transition: background .12s ease, color .12s ease; }
.tab-btn:hover { background: #fdf6f4; color: var(--color-accent-text); text-decoration: none; }
.tab-btn.active { margin-bottom: -1px; padding-bottom: 10px; border-color: #f2ebe8; background: #fff; color: var(--color-accent-text); }
.tab-btn:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.admin-submission-list { display: flex; flex-direction: column; }
.admin-submission-row { padding: 17px 19px; border-bottom: 1px solid #f3ece9; }
.admin-submission-row > header { display: flex; align-items: center; gap: 11px; }
.admin-submission-row > header > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.admin-submission-row header em { color: #b58d08; font-size: .58rem; font-style: normal; font-weight: 750; }
.admin-submission-row header form { margin: 0; }
.admin-submission-icon { display: inline-flex; width: 37px; height: 37px; flex: 0 0 37px; align-items: center; justify-content: center; border-radius: 10px; background: #fef1eb; color: var(--color-accent-text); }
.admin-submission-data { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; padding-left: 48px; }
.admin-submission-data > div { min-width: 180px; flex: 1 1 220px; }
.admin-submission-data small { color: var(--color-faint); font-size: .55rem; font-weight: 750; text-transform: uppercase; }
.admin-submission-data p { margin: 4px 0 0; color: #754f3f; font-size: .68rem; line-height: 1.5; }

/* Reusable project library -------------------------------------------- */
.project-library-workspace { max-width: 1320px; }
.project-library-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 18px 0 22px;
}
.project-library-title { display: flex; min-width: 0; align-items: flex-start; gap: 14px; }
.project-library-title > div { min-width: 0; }
.project-library-title-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fef1eb;
    color: var(--color-accent-text);
    font-size: 1.05rem;
}
.project-library-kicker { display: block; color: var(--color-accent-text); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.project-library-title h1 { margin: 4px 0 0; color: #2d2b2a; font-size: 1.85rem; letter-spacing: -.04em; }
.project-library-title p { margin: 7px 0 0; color: var(--color-faint); font-size: .72rem; }
.project-library-create-link { display: inline-flex; min-height: 41px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.project-library-summary { display: flex; flex-wrap: wrap; margin: 22px 0; overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.project-library-summary > article { display: flex; min-width: 0; flex: 1 1 25%; align-items: center; gap: 12px; padding: 17px 18px; border-right: 1px solid #f1eae7; box-sizing: border-box; }
.project-library-summary > article:last-child { border-right: 0; }
.project-library-summary-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border-radius: 10px; background: #fef1eb; color: var(--color-accent-text); }
.project-library-summary-icon.is-green { background: #e8f8ef; color: var(--color-success-text); }
.project-library-summary-icon.is-violet { background: #fef1eb; color: #dc7d54; }
.project-library-summary-icon.is-amber { background: #fff7dd; color: #b99009; }
.project-library-summary article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.project-library-summary small { color: var(--color-faint); font-size: .58rem; font-weight: 750; }
.project-library-summary strong { color: #151514; font-size: .82rem; }
.project-library-summary p { margin: 0; color: var(--color-faint); font-size: .57rem; }
.project-library-layout { display: flex; align-items: flex-start; gap: 22px; }
.project-library-panel { overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.project-library-main { min-width: 0; flex: 1 1 72%; }
.project-library-side { display: flex; min-width: 310px; flex: 0 1 28%; flex-direction: column; gap: 17px; }
.project-library-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid #f2ebe8; }
.project-library-panel-heading h2 { margin: 0; color: #151514; font-size: .88rem; }
.project-library-panel-heading p { margin: 4px 0 0; color: var(--color-faint); font-size: .63rem; }
.project-library-panel-heading > span { display: inline-flex; flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #fbf1ed; color: #a1512e; font-size: .58rem; font-weight: 800; }
.project-library-cards { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; background: #fdf9f8; }
.project-library-card { display: flex; min-width: 320px; flex: 1 1 calc(50% - 16px); flex-direction: column; overflow: hidden; margin: 0; border: 1px solid #ede1dc; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(53, 45, 41, .04); }
.project-library-preview { position: relative; display: block; height: 205px; overflow: hidden; border-bottom: 1px solid #f1eae7; background: #ffffff; }
.project-library-preview iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1000px;
    height: 625px;
    border: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(.4);
    transform-origin: top center;
}

.project-library-preview > span { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.95); color: var(--color-accent-text); font-size: .6rem; font-weight: 800; box-shadow: 0 5px 14px rgba(42, 36, 33, .12); }
.project-library-card-body { display: flex; flex: 1; flex-direction: column; padding: 15px 16px 14px; }
.project-library-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-library-card-body > header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.project-library-card-body > header > div > span { color: var(--color-faint); font-size: .52rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.project-library-card-body > header a { overflow: hidden; color: #151514; font-size: .82rem; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.project-library-card-body > header a:hover { color: var(--color-accent-text); }
.project-library-card-body > header em { display: inline-flex; min-height: 22px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; background: #fff7dd; color: var(--color-warning-text); font-size: .52rem; font-style: normal; font-weight: 800; }
.project-library-card-body > header em i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.project-library-card-body > header em.is-ready { background: #e8f8ef; color: var(--color-success-text); }
.project-library-card-body > p { min-height: 38px; margin: 9px 0 0; color: #85796d; font-size: .61rem; line-height: 1.5; }
.project-library-card-body > p.is-empty { color: var(--color-faint); font-style: italic; }
.project-library-card-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.project-library-card-stats span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #f9f4f2; color: #908477; font-size: .54rem; }
.project-library-card-stats i { color: var(--color-accent-text); }
.project-library-card-stats strong { color: #754f3f; }
.project-library-card-body > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f5efed; }
.project-library-card-body > footer small { color: var(--color-faint); font-size: .53rem; }
.project-library-card-body > footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent-text); font-size: .6rem; font-weight: 800; text-decoration: none; }
.project-library-empty { display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; }
.project-library-empty > span { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: #fef1eb; color: var(--color-accent-text); font-size: 1.1rem; }
.project-library-empty h3 { margin: 7px 0 0; color: #4a4543; font-size: .86rem; }
.project-library-empty p { max-width: 360px; margin: 0; color: var(--color-faint); font-size: .64rem; line-height: 1.5; }
.project-library-empty .btn { margin-top: 8px; }
.project-library-side-heading { display: flex; align-items: center; gap: 11px; padding: 16px; border-bottom: 1px solid #f2ebe8; }
.project-library-side-heading > span { display: inline-flex; width: 35px; height: 35px; flex: 0 0 35px; align-items: center; justify-content: center; border-radius: 9px; background: #fef1eb; color: var(--color-accent-text); }
.project-library-side-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.project-library-side-heading h2 { margin: 0; color: #151514; font-size: .76rem; }
.project-library-side-heading p { margin: 0; color: var(--color-faint); font-size: .58rem; line-height: 1.4; }
.project-library-create-form { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px; }
.project-library-create-form label { display: flex; flex-direction: column; gap: 3px; margin: 7px 0 0; }
.project-library-create-form label:first-of-type { margin-top: 0; }
.project-library-create-form label span { color: #754f3f; font-size: .65rem; font-weight: 800; }
.project-library-create-form label small { color: var(--color-faint); font-size: .56rem; line-height: 1.4; }
.project-library-create-form label em { color: var(--color-faint); font-size: .49rem; font-style: normal; text-transform: uppercase; }
.project-library-create-form input,
.project-library-create-form textarea { width: 100%; margin: 0; box-sizing: border-box; }
.project-library-create-form textarea { min-height: 88px; resize: vertical; }
.project-library-create-form button { display: flex; width: 100%; min-height: 41px; align-items: center; justify-content: center; gap: 7px; margin: 5px 0 0; }
.project-library-create-form > p { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 0; color: var(--color-faint); font-size: .54rem; line-height: 1.45; }
.project-library-create-form > p i { margin-top: 2px; color: #dc7d54; }
.project-library-guide > header { padding: 15px 16px; border-bottom: 1px solid #f2ebe8; }
.project-library-guide h2 { margin: 0; color: #151514; font-size: .76rem; }
.project-library-guide header p { margin: 4px 0 0; color: var(--color-faint); font-size: .57rem; }
.project-library-guide > div { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #f5efed; }
.project-library-guide > div:last-child { border-bottom: 0; }
.project-library-guide > div > span { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; border-radius: 7px; background: #fef3ee; color: var(--color-accent-text); font-size: .57rem; font-weight: 850; }
.project-library-guide > div p { display: flex; min-width: 0; flex-direction: column; gap: 3px; margin: 0; }
.project-library-guide strong { color: #754f3f; font-size: .61rem; }
.project-library-guide small { color: var(--color-faint); font-size: .55rem; line-height: 1.4; }

@media (max-width: 1080px) {
    .project-library-layout { flex-direction: column; }
    .project-library-main,
    .project-library-side { width: 100%; min-width: 0; flex-basis: auto; }
    .project-library-side { flex-direction: row; }
    .project-library-side > section { min-width: 280px; flex: 1 1 50%; }
    .project-library-summary > article { flex-basis: 50%; }
    .project-library-summary > article:nth-child(even) { border-right: 0; }
    .project-library-summary > article:nth-child(-n + 2) { border-bottom: 1px solid #f1eae7; }
}

@media (max-width: 820px) {
    .project-library-heading { flex-direction: column; }
    .project-library-side { flex-direction: column; }
    .project-library-side > section { min-width: 0; flex-basis: auto; }
    .project-library-card { min-width: 100%; flex-basis: 100%; }
}

@media (max-width: 620px) {
    .project-library-title-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .project-library-title h1 { font-size: 1.45rem; }
    .project-library-create-link { width: 100%; }
    .project-library-summary > article { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #f1eae7; }
    .project-library-summary > article:last-child { border-bottom: 0; }
    .project-library-cards { padding: 10px; }
    .project-library-card { min-width: 0; }
    .project-library-preview { height: 180px; }
    .project-library-card-body > footer { align-items: flex-start; flex-direction: column; }
}

/* Token reference ------------------------------------------------------ */
.tokens-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.tokens-head h1 { margin: 0; color: #2d2b2a; font-size: 1.9rem; letter-spacing: -.04em; }
.tokens-intro { margin: 7px 0 0; color: var(--color-faint); font-size: .75rem; }
.tokens-count { padding: 6px 10px; border-radius: 999px; background: #fbf1ed; color: #a1512e; font-size: .63rem; font-weight: 800; }
.tokens-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; padding: 12px; border: 1px solid #ede1dc; border-radius: 12px; background: #fff; }
.tokens-search { min-width: 220px; flex: 1; margin: 0; }
.tokens-jump { display: flex; flex-wrap: wrap; gap: 5px; }
.tokens-jump a { padding: 7px 9px; border-radius: 7px; color: #72685e; font-size: .62rem; font-weight: 750; text-decoration: none; }
.tokens-jump a:hover { background: #fef3ee; color: var(--color-accent-text); }
.token-section { margin-bottom: 20px; overflow: hidden; border: 1px solid #ede1dc; border-radius: 13px; background: #fff; }
.token-section > header { padding: 16px 18px; border-bottom: 1px solid #f2ebe8; }
.token-section h2 { margin: 0; color: #151514; font-size: .9rem; }
.section-lead { margin: 5px 0 0; color: var(--color-faint); font-size: .64rem; }
.tokens-table { display: flex; flex-direction: column; }
.tokens-table > div { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid #f5efed; }
.tokens-table > div:last-child { border-bottom: 0; }
.tokens-table code { min-width: 190px; color: var(--color-accent-text); font-size: .64rem; }
.tokens-table span { min-width: 0; flex: 1; color: #85796c; font-size: .64rem; }
.token-copy { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 0; padding: 6px 8px; border: 1px solid #f1e0d8; border-radius: 7px; background: #fff; color: #a1512e; font-size: .58rem; box-shadow: none; }
.module-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.token-section .module-card { min-width: 230px; flex: 1 1 260px; padding: 15px; }
.token-note { margin: 0 18px 16px; padding: 12px 13px; border-radius: 9px; background: #fcf5f2; color: #85796c; font-size: .63rem; line-height: 1.5; }
.tokens-empty { padding: 40px; color: var(--color-faint); text-align: center; }
.tokens-copied { position: fixed; right: 22px; bottom: 22px; z-index: 100; padding: 9px 13px; border-radius: 8px; background: #302e2d; color: #fff; font-size: .65rem; }

/* Customer portal directory ------------------------------------------ */
.customer-portal-directory-page { max-width: 1240px; }
.customer-portal-directory-summary { margin-bottom: 22px; }
.customer-portal-directory-heading { align-items: flex-end; }
.customer-portal-directory-search { display: flex; min-width: 270px; align-items: center; gap: 8px; margin: 0; }
.customer-portal-directory-search input { width: 100%; margin: 0; }
.customer-portal-directory-list { display: flex; flex-direction: column; }
.customer-portal-directory-row { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid #f5efed; }
.customer-portal-directory-row:last-child { border-bottom: 0; }
.customer-portal-directory-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.customer-portal-directory-copy strong { color: #151514; }
.customer-portal-directory-copy small { color: var(--color-faint); font-size: .62rem; }
.customer-portal-directory-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }

/* Portal admin preview ------------------------------------------------- */
.portal-admin-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(234, 151, 116, .28);
    border-radius: 10px;
    background: rgba(198, 80, 30, .16);
}
.portal-admin-preview-icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.6); color: var(--color-accent); }
.portal-admin-preview-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.portal-admin-preview-copy strong { color: var(--color-text); font-size: .65rem; }
.portal-admin-preview-copy small { color: #a1512e; font-size: .55rem; }
.portal-admin-switcher { display: flex; gap: 5px; }
.portal-admin-switch-button,
.portal-admin-exit-button { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 7px; background: rgba(255,255,255,.1); color: #fce4da; box-shadow: none; }
.portal-admin-exit-form { margin: 0; }
.portal-account-preview-note { margin: 10px 15px; padding: 9px 10px; border-radius: 8px; background: #fff7dd; color: #96750a; font-size: .58rem; line-height: 1.4; }

/* System message ------------------------------------------------------- */
.system-message-page { min-height: 100vh; margin: 0; background: #fcf7f5; }
.system-message-shell { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 30px; box-sizing: border-box; }
.system-message-card { width: 100%; max-width: 520px; padding: 34px; border: 1px solid #ede1dc; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(53, 45, 41, .09); text-align: center; box-sizing: border-box; }
.system-message-brand { display: inline-flex; margin-bottom: 24px; text-decoration: none; }
.system-message-icon { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 15px; background: #ffeded; color: #ca4141; font-size: 1.25rem; }
.system-message-card h1 { margin: 0; color: #2d2b2a; font-size: 1.55rem; letter-spacing: -.035em; }
.system-message-card p { margin: 10px auto 0; color: var(--color-faint); font-size: .75rem; line-height: 1.6; }
.system-message-code { display: block; margin-top: 12px; color: var(--color-faint); font-size: .58rem; }
.system-message-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 23px; }

/* Smaller restored helpers -------------------------------------------- */
.ticket-create-workspace { max-width: 1160px; }
.ticket-create-layout { display: flex; align-items: flex-start; gap: 22px; }
.ticket-create-form { min-width: 0; flex: 1; }
.appointment-guidance-card { min-width: 280px; flex: 0 1 32%; }
.admin-analytics-page { max-width: 1240px !important; }
.admin-analytics-log-panel { margin-top: 22px; }
.portal-analytics-tool-link { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #f0dbd2; border-radius: 8px; background: #fff; color: #a1512e; font-size: .64rem; font-weight: 750; text-decoration: none; }
.portal-device-panel,
.portal-events-panel { min-width: 0; }
.agency-booking-page { max-width: 1240px !important; }
.booking-workspace-heading { align-items: center; }

/* Customer booking setup: keep the essentials visible and progressively
   disclose the controls most customers only need occasionally. */
.booking-setup-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0 22px;
    padding: 22px;
    border: 1px solid #fdded1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(95, 78, 70, .06);
}
.booking-setup-guide.is-complete {
    border-color: #cdebdc;
    background: #ffffff;
}
.booking-setup-guide-copy {
    display: flex;
    min-width: 280px;
    flex: 1 1 320px;
    align-items: flex-start;
    gap: 14px;
}
.booking-setup-guide-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #ff5a1f;
    color: #fff;
    box-shadow: 0 8px 18px rgba(242, 85, 18, .2);
}
.booking-setup-guide.is-complete .booking-setup-guide-icon { background: #16a765; }
.booking-setup-guide-copy small {
    display: block;
    margin-bottom: 4px;
    color: var(--color-accent-text);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.booking-setup-guide.is-complete .booking-setup-guide-copy small { color: #11804d; }
.booking-setup-guide-copy h2 { margin: 0; color: #2d2b2a; font-size: 1.04rem; }
.booking-setup-guide-copy p { max-width: 560px; margin: 5px 0 0; color: #908477; font-size: .8rem; line-height: 1.55; }
.booking-setup-steps {
    display: flex;
    min-width: 300px;
    flex: 1 1 440px;
    align-items: stretch;
    gap: 8px;
}
.booking-setup-steps a {
    display: flex;
    min-width: 125px;
    flex: 1 1 0;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #f3e2db;
    border-radius: 11px;
    background: #fff;
    color: #7e7367;
    text-decoration: none;
}
.booking-setup-steps a > span {
    display: inline-flex;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f0ed;
    color: #84786c;
    font-size: .68rem;
    font-weight: 800;
}
.booking-setup-steps a strong { font-size: .72rem; line-height: 1.3; }
.booking-setup-steps a.is-done { border-color: #cdebdc; color: #146640; }
.booking-setup-steps a.is-done > span { background: #dff6e9; color: #11804d; }
.booking-setup-next {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 10px;
    background: #ff5a1f;
    color: #fff;
    font-size: .76rem;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(242, 85, 18, .18);
}
.booking-setup-guide.is-complete .booking-setup-next { background: #11804d; }

.booking-advanced-card {
    overflow: hidden;
}
.booking-advanced-card > summary,
.booking-advanced-section > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}
.booking-advanced-card > summary::-webkit-details-marker,
.booking-advanced-section > summary::-webkit-details-marker,
.booking-form-more > summary::-webkit-details-marker { display: none; }
.booking-advanced-card > summary > span:first-child,
.booking-advanced-section-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fef3ef;
    color: var(--color-accent-text);
}
.booking-advanced-card > summary > div,
.booking-advanced-section > summary > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.booking-advanced-card > summary strong,
.booking-advanced-section > summary strong { color: #2d2b2a; font-size: .9rem; }
.booking-advanced-card > summary small,
.booking-advanced-section > summary small { color: var(--color-faint); font-size: .72rem; }
.booking-advanced-card > summary > i:last-child,
.booking-advanced-section > summary > i:last-child {
    color: #bb9a8c;
    font-size: .72rem;
    transition: transform .18s;
}
.booking-advanced-card[open] > summary > i:last-child,
.booking-advanced-section[open] > summary > i:last-child,
.booking-form-more[open] > summary i { transform: rotate(180deg); }
.booking-advanced-card-body { padding: 0 20px 20px; border-top: 1px solid #f6f0ed; }

.booking-form-more {
    padding: 0;
    border: 1px solid #f0e5e0;
    border-radius: 10px;
    background: #fcf9f8;
}
.booking-form-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    color: #72685e;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 750;
    list-style: none;
}
.booking-form-more > summary i { color: #bb9a8c; font-size: .68rem; transition: transform .18s; }
.booking-form-more[open] { padding-bottom: 13px; }
.booking-form-more[open] > summary { margin-bottom: 10px; border-bottom: 1px solid #f0e5e0; }
.booking-form-more > label,
.booking-form-more > .module-form-row { margin-right: 13px; margin-left: 13px; }

.booking-advanced-section {
    margin-top: 22px;
    overflow: hidden;
}
.booking-advanced-section-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 0 20px 22px;
    border-top: 1px solid #f6f0ed;
}
.booking-advanced-section-body > .booking-blocks-panel { padding-top: 20px; }
.booking-advanced-section-body .booking-setup-layout { margin-top: 0; }

@media (max-width: 900px) {
    .booking-setup-steps { flex-basis: 100%; }
    .booking-setup-next { margin-left: 58px; }
}
@media (max-width: 620px) {
    .booking-setup-guide { align-items: stretch; padding: 18px; }
    .booking-setup-guide-copy,
    .booking-setup-steps { min-width: 100%; }
    .booking-setup-steps { flex-direction: column; }
    .booking-setup-steps a { min-width: 100%; }
    .booking-setup-next { width: 100%; margin-left: 0; }
}
.agency-service-toggle { min-width: 105px; }
.portal-quick-panel { overflow: hidden; }
.portal-activity { display: flex; flex-direction: column; }
.portal-page-modal { z-index: 1000; }
.onboarding-step-progress { margin-bottom: 24px; }
.onboarding-details-page,
.onboarding-template-page { max-width: 1050px; }
.onboarding-template-section { margin-top: 22px; }
.onboarding-complete-card { padding: 32px; border: 1px solid #ede1dc; border-radius: 15px; background: #fff; text-align: center; }
.onboarding-complete-icon { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f8ef; color: var(--color-success-text); font-size: 1.15rem; }
.onboarding-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.onboarding-form > section { overflow: hidden; border: 1px solid #ede1dc; border-radius: 14px; background: #fff; }
.onboarding-form > section > header { padding: 17px 20px; border-bottom: 1px solid #f2ebe8; }
.onboarding-form > section > header h2 { margin: 0; color: #151514; font-size: .9rem; }
.onboarding-form > section > header p { margin: 5px 0 0; color: var(--color-faint); font-size: .65rem; }
.onboarding-project-name { display: flex; align-items: center; gap: 10px; }
.customer-website-panel { overflow: hidden; }
.customer-summary-date { font-size: .75rem !important; }
.module-theme-blog .module-workspace-icon { background: #fff6d9; color: #b99009; }
.module-theme-booking .module-workspace-icon { background: #e8f8ef; color: var(--color-success-text); }
.portal-booking-reason { padding: 14px 16px; border: 1px solid #efe4df; border-radius: 10px; background: #fefaf9; }
.portal-call-list { display: flex; flex-direction: column; }
.portal-call-list > article { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #f5efed; }
.portal-metric-change { display: inline-flex; align-items: center; gap: 5px; color: var(--color-success-text); font-size: .58rem; font-weight: 800; }
.confirmation { max-width: 620px; margin: 50px auto; padding: 30px; border: 1px solid #ede1dc; border-radius: 15px; background: #fff; color: #151514; text-align: center; }

@media (max-width: 1080px) {
    .publishing-layout,
    .ticket-detail-layout,
    .appointment-detail-layout,
    .email-detail-layout,
    .blog-editor-layout,
    .admin-blog-layout,
    .ticket-create-layout { flex-direction: column; }

    .publishing-main,
    .publishing-side,
    .ticket-conversation-panel,
    .ticket-detail-sidebar,
    .appointment-detail-form-panel,
    .appointment-detail-sidebar,
    .email-message-panel,
    .email-detail-sidebar,
    .blog-editor-paper,
    .blog-editor-side,
    .admin-blog-primary,
    .admin-blog-sidebar,
    .ticket-create-form,
    .appointment-guidance-card {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .publishing-summary > article { flex-basis: 50%; }
    .publishing-summary > article:nth-child(even) { border-right: 0; }
    .publishing-summary > article:nth-child(-n + 2) { border-bottom: 1px solid #f1eae7; }
}

@media (max-width: 820px) {
    .portal-auth-shell { flex-direction: column; }
    .portal-auth-brand-panel { min-height: 460px; flex-basis: auto; padding: 90px 34px 65px; }
    .portal-auth-logo { left: 34px; }
    .portal-auth-brand-footer { left: 34px; }
    .portal-auth-form-panel { min-height: auto; flex-basis: auto; padding: 54px 28px; }
    .publishing-page { padding-right: 20px; padding-left: 20px; }
    .publishing-heading,
    .blog-editor-heading { flex-direction: column; }
    .publishing-heading-actions,
    .blog-editor-heading-actions { justify-content: flex-start; }
    .publishing-summary > article { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #f1eae7; }
    .publishing-summary > article:last-child { border-bottom: 0; }
    .email-compose-actions { align-items: stretch; flex-direction: column; }
    .admin-page-main .portal-page-traffic { display: none; }
}

@media (max-width: 620px) {
    .portal-auth-brand-panel { min-height: 420px; padding-right: 22px; padding-left: 22px; }
    .portal-auth-logo,
    .portal-auth-brand-footer { left: 22px; }
    .portal-auth-benefits > span { min-width: 100%; }
    .portal-auth-form-panel { padding: 42px 20px; }
    .module-workspace-heading,
    .blog-workspace-heading { min-height: 0; flex-direction: column; }
    .blog-workspace-cover { display: none; }
    .module-workspace-heading-side { width: 100%; align-items: flex-start; }
    .admin-blog-summary .portal-pages-stat,
    .admin-submissions-summary .portal-pages-stat { min-width: 100%; }
    .blog-editor-heading-actions,
    .publishing-heading-actions,
    .operations-heading-actions { width: 100%; flex-direction: column; }
    .blog-editor-heading-actions .btn,
    .publishing-heading-actions .btn,
    .operations-heading-actions .btn { width: 100%; }
    .publishing-heading-actions form,
    .publishing-heading-actions button { width: 100%; }
    .publishing-release-body { align-items: flex-start; flex-direction: column; }
    .publishing-release-action { max-width: none; align-items: stretch; }
    .publishing-release-action,
    .publishing-release-action button { width: 100%; }
    .publishing-release-action small { text-align: left; }
    .ticket-conversation-item { padding: 16px 14px; }
    .ticket-conversation-content > header,
    .ticket-composer-footer { align-items: stretch; flex-direction: column; }
    .ticket-settings-list label { align-items: stretch; flex-direction: column; gap: 6px; }
    .ticket-settings-list label > span { min-width: 0; flex-basis: auto; }
    .appointment-request-panel { align-items: flex-start; flex-wrap: wrap; }
    .email-log-meta { display: none; }
    .email-compose-grid > label { min-width: 100%; flex-basis: 100%; }
    .admin-submission-data { padding-left: 0; }
    .tokens-head { align-items: flex-start; flex-direction: column; }
    .tokens-table > div { align-items: flex-start; flex-direction: column; }
    .tokens-table code { min-width: 0; }
    .customer-portal-directory-heading { align-items: stretch; flex-direction: column; }
    .customer-portal-directory-search { min-width: 0; width: 100%; }
    .customer-portal-directory-row { align-items: flex-start; flex-wrap: wrap; }
    .customer-portal-directory-meta { width: 100%; padding-left: 49px; }
    .system-message-shell { padding: 18px; }
    .system-message-card { padding: 28px 20px; }
}

/* Languages screen — what is actually translated ------------------------
   This screen listed the site's languages and nothing else, so a working
   translation and one silently serving the default language's body looked
   identical. Page::bodyHtml() falls through on purpose rather than publish
   a blank page, which is right for a half-translated site and impossible
   to tell apart from a mistake. The table makes the four states visible. */
.language-list-panel .language-rows { margin: 0; padding: 0; list-style: none; }

.language-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f6f1ef; }
.language-row:last-child { border-bottom: 0; }
.language-row-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.language-row-name strong { font-size: .82rem; }
.language-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.language-row-actions form { margin: 0; }
.language-row-actions button { margin: 0; }

.language-default-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #eaf6ef; color: var(--color-success-text); font-size: .64rem; font-weight: 750; }

/* The table scrolls inside its own box: one column per language, so a site
   with several would otherwise push the whole page sideways. */
.language-status-wrap { overflow-x: auto; }
.language-status-table { width: 100%; border-collapse: collapse; }
.language-status-table th,
.language-status-table td { padding: 12px 18px; border-bottom: 1px solid #f6f1ef; text-align: left; vertical-align: top; }
.language-status-table thead th { border-bottom: 1px solid #f2ebe8; background: #fdf8f6; color: #736760; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.language-status-table tbody tr:last-child th,
.language-status-table tbody tr:last-child td { border-bottom: 0; }
.language-status-table tbody tr:hover { background: #fffbf9; }

.language-status-table tbody th { min-width: 190px; font-weight: 700; }
.language-status-table tbody th a { color: var(--color-accent-text); font-size: .74rem; }
.language-status-table tbody th .token { display: block; margin-top: 3px; font-size: .6rem; }
.language-status-table td { min-width: 230px; }
.language-status-table td code { display: block; margin-top: 4px; color: #6f6a63; font-size: .62rem; word-break: break-all; }
.language-status-table td small { display: block; margin-top: 4px; color: var(--color-faint); font-size: .6rem; line-height: 1.45; }

.language-state { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 750; }
.language-state.is-own { color: var(--color-success-text); }
.language-state.is-fallback { color: var(--color-warning-text); }
.language-state.is-broken,
.language-state.is-blocked { color: #b3261e; }

.language-state-fix { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--color-accent-text); font-size: .64rem; font-weight: 700; }
.language-state-fix:hover { gap: 9px; }

.language-status-blocked { padding: 16px 20px; }
.language-status-blocked p:last-child { margin-bottom: 0; }
.language-status-foot { margin: 0; padding: 13px 20px 16px; border-top: 1px solid #f2ebe8; background: #fdfbfa; font-size: .62rem; line-height: 1.55; }

.language-add-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.language-add-grid > label { display: flex; min-width: 190px; flex: 1 1 220px; flex-direction: column; gap: 4px; margin: 0; }
.language-add-grid > label > span { color: #2d2b2a; font-size: .68rem; font-weight: 700; }
.language-add-grid > label > small { color: var(--color-faint); font-size: .58rem; }
.language-add-grid input { width: 100%; height: 38px; margin: 4px 0 0; box-sizing: border-box; }
.language-add-panel .module-form { padding: 18px 20px 20px; }
.language-add-panel button { margin: 0; }

@media (max-width: 640px) {
    .language-row { align-items: flex-start; flex-direction: column; }
}

/* The short-codes fieldset carried no class, so it rendered with the
   browser's default border — a box inside a box on a screen that has none
   anywhere else. Same treatment as .switcher-style-choice above. */
.language-short-codes { margin: 0; padding: 0; border: 0; }
.language-short-codes legend { padding: 0 0 8px; color: #70665c; font-size: .71rem; font-weight: 700; }
.language-short-codes label { display: block; margin: 12px 0 4px; color: #2d2b2a; font-size: .68rem; font-weight: 700; }
.language-short-codes input { width: 100%; max-width: 220px; box-sizing: border-box; }
.language-short-codes button { display: block; margin-top: 15px; }