/* The owner panel's design system.
   ==================================================================
   Source: Figma "Site Owner Panel - Webone (Ready For Dev)", section
   "onboarding" → frame "Components" (node 3048:1730). Every value below is
   read from that frame; where this file decides something the frame does not
   say (focus rings, disabled, the hover motion), the rule says so.

   cms-owner.css is the panel's page-by-page face, carried over from HAYA.CMS;
   this file is the shared vocabulary those pages are built from — tokens,
   icons and the controls the Blazor components in Components/Owner/Ui
   render. Pages compose these; they do not restyle them.

   Same two rules as cms-owner.css: everything is nested under
   .cms-owner-panel (the operator's dashboard shares the document root), and
   every direction-sensitive rule is logical. The Figma frame is drawn
   left-to-right with Persian text in it, so "icon on the left" there means
   "icon at the end" here — which is what lets one rule serve fa and en. */

/* ── Tokens ──────────────────────────────────────────────────────────── */

.cms-owner-panel {
    /* Ink and surfaces. The palette scales live on :root in cms-owner.css;
       these name the roles the components use them for. */
    --ow-surface: var(--accessibility-white);
    --ow-fill-subtle: var(--charade-50);
    --ow-ink: var(--charade-950);
    --ow-ink-hover: var(--charade-700);
    --ow-text: var(--charade-700);
    --ow-text-muted: var(--charade-500);
    --ow-text-placeholder: var(--charade-400);
    --ow-border: var(--charade-100);
    --ow-border-strong: var(--charade-200);
    --ow-accent: var(--blue-500);
    --ow-accent-soft: var(--blue-50);
    --ow-danger: var(--red-500);

    /* Text on a filled control, in two kinds that dark mode tells apart: on
       the ink fill (the primary button, a checked tile — which turns light
       in dark mode, so its text turns dark), and on a colour (blue, red, a
       photo's overlay — white in both). Both were the surface colour before,
       which is only white while the surface is. */
    --ow-on-ink: #fff;
    --ow-on-fill: #fff;

    /* Shape. */
    --ow-radius-xs: 6px;
    --ow-radius-sm: 8px;
    --ow-radius-md: 10px;
    --ow-radius-lg: 12px;

    /* Elevation: the frame's two drop shadows. */
    --ow-shadow-xs: 0 1px 1px rgba(32, 32, 40, 0.05);
    --ow-shadow-sm: 0 1px 2px 0 rgba(32, 32, 40, 0.05);

    /* Controls. */
    --ow-control-height: 40px;
    --ow-focus-ring: 0 0 0 3px rgba(9, 125, 234, 0.18);
}

/* Drawn in one scheme only: the theme menu's sun and moon (OwnerThemeMenu),
   the light and dark wordmarks (OwnerLogo). The document's scheme is stamped
   by haya-admin-boot.js before the first paint, so the right one is there from
   the start, with nothing to wait for. */
:root:not([data-haya-scheme="dark"]) .cms-owner-panel .ow-in-dark,
:root[data-haya-scheme="dark"] .cms-owner-panel .ow-in-light {
    display: none;
}

/* Error text a step lighter in dark: red-600 is the danger button's fill and
   reads at about 3:1 on the dark surface. */
:root[data-haya-scheme="dark"] .cms-owner-panel .ow-field__error {
    color: var(--red-400);
}

/* ── Icons ───────────────────────────────────────────────────────────── */

/* One mask per icon, painted in currentColor, so an icon takes the colour of
   the text beside it — white on a primary button, muted on a ghost one —
   without a second file per colour. The duotone 32px set (building, store,
   user) keeps its half-tone layer: opacity in the SVG is alpha in the mask. */
.cms-owner-panel .ow-icon {
    display: inline-block;
    flex: none;
    inline-size: var(--ow-icon-size, 16px);
    block-size: var(--ow-icon-size, 16px);
    background-color: currentColor;
    -webkit-mask: var(--ow-icon-src) center / contain no-repeat;
    mask: var(--ow-icon-src) center / contain no-repeat;
    vertical-align: middle;
}

/* Forward and back are arrows that turn with the reading direction: the file
   is drawn for Persian (forward = left) and mirrored for a left-to-right
   panel. --cms-owner-flip is 1 in LTR and -1 in RTL. */
.cms-owner-panel .ow-icon--logical {
    scale: calc(-1 * var(--cms-owner-flip, 1)) 1;
}

.cms-owner-panel .ow-icon--sparkles { --ow-icon-src: url('../img/owner/icons/sparkles.svg'); }
.cms-owner-panel .ow-icon--wrench { --ow-icon-src: url('../img/owner/icons/wrench.svg'); }
.cms-owner-panel .ow-icon--list-checks { --ow-icon-src: url('../img/owner/icons/list-checks.svg'); }
.cms-owner-panel .ow-icon--message-square { --ow-icon-src: url('../img/owner/icons/message-square.svg'); }
.cms-owner-panel .ow-icon--arrow-left { --ow-icon-src: url('../img/owner/icons/arrow-left.svg'); }
.cms-owner-panel .ow-icon--arrow-right { --ow-icon-src: url('../img/owner/icons/arrow-right.svg'); }
.cms-owner-panel .ow-icon--check { --ow-icon-src: url('../img/owner/icons/check.svg'); }
.cms-owner-panel .ow-icon--paperclip { --ow-icon-src: url('../img/owner/icons/paperclip.svg'); }
.cms-owner-panel .ow-icon--pen-line { --ow-icon-src: url('../img/owner/icons/pen-line.svg'); }
.cms-owner-panel .ow-icon--gift { --ow-icon-src: url('../img/owner/icons/gift.svg'); }
.cms-owner-panel .ow-icon--credit-card { --ow-icon-src: url('../img/owner/icons/credit-card.svg'); }
.cms-owner-panel .ow-icon--sliders-horizontal { --ow-icon-src: url('../img/owner/icons/sliders-horizontal.svg'); }
.cms-owner-panel .ow-icon--monitor { --ow-icon-src: url('../img/owner/icons/monitor.svg'); }
.cms-owner-panel .ow-icon--smartphone { --ow-icon-src: url('../img/owner/icons/smartphone.svg'); }
.cms-owner-panel .ow-icon--loader-circle { --ow-icon-src: url('../img/owner/icons/loader-circle.svg'); }
.cms-owner-panel .ow-icon--chevron-down { --ow-icon-src: url('../img/owner/icons/chevron-down.svg'); }
.cms-owner-panel .ow-icon--globe { --ow-icon-src: url('../img/owner/icons/globe.svg'); }
.cms-owner-panel .ow-icon--layers { --ow-icon-src: url('../img/owner/icons/layers.svg'); }
.cms-owner-panel .ow-icon--plus { --ow-icon-src: url('../img/owner/icons/plus.svg'); }
.cms-owner-panel .ow-icon--panels-top-left { --ow-icon-src: url('../img/owner/icons/panels-top-left.svg'); }
.cms-owner-panel .ow-icon--x { --ow-icon-src: url('../img/owner/icons/x.svg'); }
.cms-owner-panel .ow-icon--arrow-up { --ow-icon-src: url('../img/owner/icons/arrow-up.svg'); }
.cms-owner-panel .ow-icon--building { --ow-icon-src: url('../img/owner/icons/building.svg'); }
.cms-owner-panel .ow-icon--store { --ow-icon-src: url('../img/owner/icons/store.svg'); }
.cms-owner-panel .ow-icon--user { --ow-icon-src: url('../img/owner/icons/user.svg'); }
.cms-owner-panel .ow-icon--copy { --ow-icon-src: url('../img/owner/icons/copy.svg'); }
.cms-owner-panel .ow-icon--external-link { --ow-icon-src: url('../img/owner/icons/external-link.svg'); }
.cms-owner-panel .ow-icon--refresh-cw { --ow-icon-src: url('../img/owner/icons/refresh-cw.svg'); }
.cms-owner-panel .ow-icon--palette { --ow-icon-src: url('../img/owner/icons/palette.svg'); }
.cms-owner-panel .ow-icon--star { --ow-icon-src: url('../img/owner/icons/star.svg'); }
.cms-owner-panel .ow-icon--zap { --ow-icon-src: url('../img/owner/icons/zap.svg'); }
.cms-owner-panel .ow-icon--shield-check { --ow-icon-src: url('../img/owner/icons/shield-check.svg'); }
.cms-owner-panel .ow-icon--trash { --ow-icon-src: url('../img/owner/icons/trash.svg'); }
.cms-owner-panel .ow-icon--coffee { --ow-icon-src: url('../img/owner/icons/coffee.svg'); }
.cms-owner-panel .ow-icon--graduation-cap { --ow-icon-src: url('../img/owner/icons/graduation-cap.svg'); }
.cms-owner-panel .ow-icon--briefcase { --ow-icon-src: url('../img/owner/icons/briefcase.svg'); }
.cms-owner-panel .ow-icon--info { --ow-icon-src: url('../img/owner/icons/info.svg'); }
.cms-owner-panel .ow-icon--triangle-alert { --ow-icon-src: url('../img/owner/icons/triangle-alert.svg'); }
.cms-owner-panel .ow-icon--log-out { --ow-icon-src: url('../img/owner/icons/log-out.svg'); }
.cms-owner-panel .ow-icon--languages { --ow-icon-src: url('../img/owner/icons/languages.svg'); }
.cms-owner-panel .ow-icon--wallet { --ow-icon-src: url('../img/owner/icons/wallet.svg'); }
.cms-owner-panel .ow-icon--sun { --ow-icon-src: url('../img/owner/icons/sun.svg'); }
.cms-owner-panel .ow-icon--moon { --ow-icon-src: url('../img/owner/icons/moon.svg'); }

.cms-owner-panel .ow-icon--spin {
    animation: ow-spin 0.9s linear infinite;
}

@keyframes ow-spin {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-icon--spin { animation-duration: 2.4s; }
}

/* ── Button ──────────────────────────────────────────────────────────── */

/* Primary / Outline / Ghost, 40px, radius 8, label 14 medium.
   The hover motion is the panel's own and is kept exactly as it was: the
   button grows 10px at its end and the arrow slides 30px out from behind the
   label (20px of travel plus the 10px the button grew). It used to hide the
   arrow under an opaque label background; the primary button is a gradient
   now, which a label cannot repaint, so the arrow is clipped by a slot that
   starts at the label's end edge instead. Same path, same timing, same
   final position. */
.cms-owner-panel .ow-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: var(--ow-control-height);
    padding-inline: 18px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

/* The growth on hover is the primary button's, making room for the arrow
   that slides out (.ow-btn__reveal); the quieter variants stay still. */
.cms-owner-panel .ow-btn--primary {
    transition: padding 0.3s ease;
}

.cms-owner-panel .ow-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    padding-inline-end: 28px;
}

.cms-owner-panel .ow-btn:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-btn:disabled,
.cms-owner-panel .ow-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cms-owner-panel .ow-btn--block {
    display: flex;
    inline-size: 100%;
}

.cms-owner-panel .ow-btn--primary {
    color: var(--ow-on-ink);
    border-color: var(--ow-ink);
    background-color: var(--ow-ink);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
    box-shadow:
        var(--ow-shadow-sm),
        inset 0 -1px 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 1px rgba(255, 255, 255, 0.25),
        inset 0 6px 8px -1px rgba(255, 255, 255, 0.12);
}

.cms-owner-panel .ow-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--ow-ink-hover);
}

.cms-owner-panel .ow-btn--primary:focus-visible {
    box-shadow:
        var(--ow-focus-ring),
        inset 0 -1px 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 1px rgba(255, 255, 255, 0.25),
        inset 0 6px 8px -1px rgba(255, 255, 255, 0.12);
}

.cms-owner-panel .ow-btn--outline {
    color: var(--ow-ink);
    background-color: var(--ow-surface);
    border-color: var(--ow-border);
    box-shadow: var(--ow-shadow-xs);
}

.cms-owner-panel .ow-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--ow-fill-subtle);
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-btn--ghost {
    color: var(--ow-text-muted);
    padding-inline: 12px;
}

.cms-owner-panel .ow-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-btn__label {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* The slot the arrow slides out of: from the label's end edge outward, and
   clipped, so at rest the arrow sits "behind" the label and cannot be seen. */
.cms-owner-panel .ow-btn__reveal {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 100%;
    inline-size: 30px;
    overflow: hidden;
    pointer-events: none;
}

.cms-owner-panel .ow-btn__reveal .ow-icon {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--ow-icon-size, 16px) / -2);
    inset-inline-start: -26px;
    transition: translate 0.3s ease;
}

.cms-owner-panel .ow-btn:hover:not(:disabled):not([aria-disabled="true"]) .ow-btn__reveal .ow-icon {
    translate: calc(30px * var(--cms-owner-flip, 1)) 0;
}

/* ── Chip ────────────────────────────────────────────────────────────── */

.cms-owner-panel .ow-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    block-size: 34px;
    padding-inline: 14px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-xs);
    color: var(--ow-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    --ow-icon-size: 13px;
}

.cms-owner-panel .ow-chip:hover:not(:disabled) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-chip:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-chip--selected,
.cms-owner-panel .ow-chip--selected:hover:not(:disabled) {
    background-color: var(--ow-fill-subtle);
    border-color: var(--ow-ink);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-chip--solid,
.cms-owner-panel .ow-chip--solid:hover:not(:disabled) {
    background-color: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Radio ───────────────────────────────────────────────────────────── */

/* A real radio, drawn: 16px, 1px ring, an 8px blue dot when checked — the
   only blue in an option card. */
.cms-owner-panel .ow-radio {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--ow-border-strong);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-sm);
    cursor: pointer;
}

.cms-owner-panel .ow-radio::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background-color: var(--ow-accent);
    scale: 0;
    transition: scale 0.12s ease;
}

.cms-owner-panel .ow-radio:checked {
    border-color: var(--ow-accent);
}

.cms-owner-panel .ow-radio:checked::before {
    scale: 1;
}

.cms-owner-panel .ow-radio:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Badge ───────────────────────────────────────────────────────────── */

.cms-owner-panel .ow-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    block-size: 20px;
    padding-inline: 7px;
    border-radius: var(--ow-radius-xs);
    background-color: var(--ow-accent-soft);
    color: var(--ow-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.cms-owner-panel .ow-badge--neutral {
    background-color: var(--ow-fill-subtle);
    color: var(--ow-text);
}

.cms-owner-panel .ow-badge--dark {
    background-color: var(--ow-ink);
    color: var(--ow-on-ink);
}

/* ── Input ───────────────────────────────────────────────────────────── */

/* The frame has no focus or error state; focus takes the charcoal border the
   frame uses for "selected", and an error takes the palette's red. */
.cms-owner-panel .ow-input {
    inline-size: 100%;
    block-size: var(--ow-control-height);
    padding-inline: 12px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-xs);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .ow-input::placeholder {
    color: var(--ow-text-placeholder);
    font-weight: 500;
    opacity: 1;
}

.cms-owner-panel .ow-input:hover:not(:disabled):not(:focus) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-input:focus {
    outline: none;
    border-color: var(--ow-ink);
    box-shadow: var(--ow-shadow-xs), var(--ow-focus-ring);
}

/* Refused: a red border and a red ring, at rest as well as in focus, so the
   field that was wrong is the field the eye lands on. */
.cms-owner-panel .ow-input[aria-invalid="true"],
.cms-owner-panel .ow-input[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
    border-color: var(--ow-danger);
    box-shadow: var(--ow-shadow-xs), 0 0 0 3px rgba(221, 81, 72, 0.12);
}

.cms-owner-panel .ow-input[aria-invalid="true"]:focus {
    border-color: var(--ow-danger);
    box-shadow: var(--ow-shadow-xs), 0 0 0 3px rgba(221, 81, 72, 0.22);
}

/* Why it was refused: under the field, red, with no box around it. */
.cms-owner-panel .ow-field__error {
    margin: 0;
    color: var(--red-600, var(--ow-danger));
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
}

.cms-owner-panel .ow-field__required {
    margin-inline-start: 2px;
    color: var(--ow-danger);
}

.cms-owner-panel .ow-input:disabled {
    background-color: var(--ow-fill-subtle);
    color: var(--ow-text-muted);
    cursor: not-allowed;
}

/* ── Code input (OwnerCodeInput, adapted from Radzen's security code) ─── */

/* One box per digit, each an .ow-input in all but width. The boxes show only
   once js/owner-code-input.js has made them work (.ow-code--ready); until
   then — or without script — the <noscript> field stands in. */
.cms-owner-panel .ow-code__boxes {
    display: none;
    justify-content: center;
    gap: 8px;
}

.cms-owner-panel .ow-code--ready .ow-code__boxes {
    display: flex;
}

.cms-owner-panel .ow-code__box {
    inline-size: 48px;
    block-size: 52px;
    padding: 0;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-xs);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    caret-color: var(--ow-accent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .ow-code__box:hover:not(:focus) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-code__box:focus {
    outline: none;
    border-color: var(--ow-ink);
    box-shadow: var(--ow-shadow-xs), var(--ow-focus-ring);
}

/* Every box filled: the code is ready to send. */
.cms-owner-panel .ow-code--complete .ow-code__box {
    border-color: var(--ow-accent);
}

/* Refused: the same red border and ring as a refused .ow-input. */
.cms-owner-panel .ow-code--invalid .ow-code__box {
    border-color: var(--ow-danger);
    box-shadow: var(--ow-shadow-xs), 0 0 0 3px rgba(221, 81, 72, 0.12);
}

.cms-owner-panel .ow-code--invalid .ow-code__box:focus {
    box-shadow: var(--ow-shadow-xs), 0 0 0 3px rgba(221, 81, 72, 0.22);
}

.cms-owner-panel .ow-code .ow-field__error {
    margin-top: 8px;
}

/* Sent and waiting for the answer: a second send is refused (the code is
   single-use), so the boxes say so rather than looking ready for more. */
.cms-owner-panel .ow-code--sending .ow-code__box {
    opacity: 0.6;
    pointer-events: none;
}

.cms-owner-panel .ow-code__plain {
    text-align: center;
    letter-spacing: 0.4em;
}

@media (max-width: 400px) {
    .cms-owner-panel .ow-code__boxes {
        gap: 6px;
    }

    .cms-owner-panel .ow-code__box {
        inline-size: 40px;
        block-size: 46px;
    }
}

/* ── Option card ─────────────────────────────────────────────────────── */

/* A radio card: icon tile at the start, text, radio at the end. Selected is
   a 1px charcoal border and a charcoal tile with a white icon (the start
   screen, nodes 3050:1794/3050:1880); the radio dot is the only blue. The row
   is a <label> around a real radio, so the whole row is the hit area and the
   keyboard works; what the card unfolds sits below it, outside the label. */
.cms-owner-panel .ow-option {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border-radius: var(--ow-radius-lg);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    color: var(--ow-text-muted);
    text-align: start;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.cms-owner-panel .ow-option:hover {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-option--selected,
.cms-owner-panel .ow-option--selected:hover,
.cms-owner-panel .ow-option:has(.ow-radio:checked) {
    border-color: var(--ow-ink);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-option:has(.ow-radio:focus-visible) {
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-option--disabled {
    opacity: 0.5;
}

.cms-owner-panel .ow-option__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}

.cms-owner-panel .ow-option--disabled .ow-option__row {
    cursor: not-allowed;
}

.cms-owner-panel .ow-option__tile {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    color: var(--ow-text-muted);
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
    --ow-icon-size: 22px;
}

.cms-owner-panel .ow-option--selected .ow-option__tile,
.cms-owner-panel .ow-option:has(.ow-radio:checked) .ow-option__tile {
    border-color: var(--ow-border-strong);
    background-color: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-option__text {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cms-owner-panel .ow-option__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-owner-panel .ow-option__title {
    color: var(--ow-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.cms-owner-panel .ow-option__description {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
}

/* What a picked card unfolds: 18px in from the card's edges, below the row. */
.cms-owner-panel .ow-option__extra {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
    animation: ow-unfold 0.18s ease-out;
}

.cms-owner-panel .ow-option__extra > * {
    flex: 1 1 0;
    min-inline-size: 0;
}

@keyframes ow-unfold {
    from {
        opacity: 0;
        translate: 0 -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-option__extra { animation: none; }
}

/* ── Mode option ─────────────────────────────────────────────────────── */

/* The smaller choice card: a 16px icon at the start, title and one line.
   Resting, it reads as the road not taken — muted title, lighter line;
   active, it is filled pale with a charcoal border and ink text (the start
   screen, node 3050:1833). */
.cms-owner-panel .ow-mode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    inline-size: 100%;
    padding: 12px 14px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-xs);
    color: var(--ow-text-muted);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cms-owner-panel .ow-mode:hover:not(:disabled) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-mode--active,
.cms-owner-panel .ow-mode--active:hover:not(:disabled) {
    border-color: var(--ow-ink);
    background-color: var(--ow-fill-subtle);
    box-shadow: none;
    color: var(--ow-ink);
}

.cms-owner-panel .ow-mode:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-mode:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cms-owner-panel .ow-mode__icon {
    display: flex;
    padding-top: 3px;
}

.cms-owner-panel .ow-mode__text {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.cms-owner-panel .ow-mode__title {
    color: var(--ow-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.cms-owner-panel .ow-mode__description {
    color: var(--ow-text-placeholder);
    font-size: 13px;
    font-weight: 500;
}

.cms-owner-panel .ow-mode--active .ow-mode__title {
    color: var(--ow-ink);
}

.cms-owner-panel .ow-mode--active .ow-mode__description {
    color: var(--ow-text-muted);
}

/* ── Dialog ──────────────────────────────────────────────────────────── */

/* The layer covers everything, the panel's own header and sidebar included;
   the backdrop dims and blurs the page behind (Figma node 3023:3182:
   charade-950 at 40%, a 3px blur). The panel is 680px with a 16px radius,
   and only its body scrolls, so the header and the footer — the way out and
   the way on — never leave the screen. */
.cms-owner-panel .ow-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 16px;
}

.cms-owner-panel .ow-dialog-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(32, 32, 40, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: ow-fade-in 0.18s ease-out;
}

.cms-owner-panel .ow-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: min(var(--ow-dialog-width, 680px), 100%);
    max-block-size: calc(100dvh - 32px);
    border-radius: 16px;
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow:
        0 4px 6px -4px rgba(32, 32, 40, 0.1),
        0 10px 15px -3px rgba(32, 32, 40, 0.1);
    overflow: hidden;
    outline: none;
    animation: ow-dialog-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cms-owner-panel .ow-dialog > .ow-dialog-header,
.cms-owner-panel .ow-dialog > .ow-dialog-footer {
    flex: none;
}

.cms-owner-panel .ow-dialog__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 28px 24px;
}

.cms-owner-panel .ow-dialog__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cms-owner-panel .ow-dialog__title {
    margin: 0;
    color: var(--ow-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.cms-owner-panel .ow-dialog__subtitle {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}

.cms-owner-panel .ow-dialog__note {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}

/* A refusal inside a dialog: the server's reason, in red, on a pale ground so
   it reads as something to act on rather than one more line of help. */
.cms-owner-panel .ow-dialog__error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--red-200, #fecaca);
    border-radius: 8px;
    background-color: var(--red-50, #fef2f2);
    color: var(--red-600);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}

.cms-owner-panel .ow-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes ow-fade-in {
    from { opacity: 0; }
}

@keyframes ow-dialog-in {
    from {
        opacity: 0;
        scale: 0.97;
        translate: 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-dialog,
    .cms-owner-panel .ow-dialog-backdrop { animation: none; }
}

@media (max-width: 560px) {
    .cms-owner-panel .ow-dialog__body,
    .cms-owner-panel .ow-dialog-header,
    .cms-owner-panel .ow-dialog-footer {
        padding-inline: 18px;
    }

    .cms-owner-panel .ow-option__extra {
        flex-direction: column;
    }
}

/* ── Dialog parts ────────────────────────────────────────────────────── */

/* Header: back at the start, title and meta, close at the end; the progress
   is a 2px blue line on the bottom border, filling from the start. */
.cms-owner-panel .ow-dialog-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background-color: var(--ow-surface);
    border-bottom: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-dialog-header__text {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.5;
}

.cms-owner-panel .ow-dialog-header__title {
    margin: 0;
    color: var(--ow-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .ow-dialog-header__meta {
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.cms-owner-panel .ow-icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border-radius: var(--ow-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ow-ink);
    cursor: pointer;
    --ow-icon-size: 18px;
}

.cms-owner-panel .ow-icon-btn:hover:not(:disabled) {
    background-color: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-icon-btn--outline {
    background-color: var(--ow-surface);
    border-color: var(--ow-border);
    box-shadow: var(--ow-shadow-sm);
}

.cms-owner-panel .ow-icon-btn--outline:hover:not(:disabled) {
    background-color: var(--ow-fill-subtle);
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-dialog-header__progress {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    block-size: 2px;
    overflow: hidden;
}

.cms-owner-panel .ow-dialog-header__progress-fill {
    block-size: 100%;
    background-color: var(--ow-accent);
    transition: inline-size 0.3s ease;
}

/* Footer: an optional hint at the start, the actions at the end with the
   primary one last. */
.cms-owner-panel .ow-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 28px;
    background-color: var(--ow-surface);
    border-top: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-dialog-footer__hint {
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.cms-owner-panel .ow-dialog-footer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* ── Popover: the floating layer menus and selects share ─────────────── */

/* Fixed and placed against its trigger by js/owner-ui.js, so no card or
   scroll box can clip it. Hidden until placed, so it never flashes at the
   top of the page; it then grows in from the side it opened on. */
.cms-owner-panel .ow-popover {
    position: fixed;
    top: 0;
    left: 0;
    /* Above the dialog layer (2000), so a select inside a dialog opens over it. */
    z-index: 2100;
    visibility: hidden;
}

.cms-owner-panel .ow-popover[data-placed] {
    visibility: visible;
    animation: ow-pop-in 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

.cms-owner-panel .ow-popover[data-side="bottom"] { transform-origin: top center; }
.cms-owner-panel .ow-popover[data-side="top"] { transform-origin: bottom center; --ow-pop-from: 4px; }

@keyframes ow-pop-in {
    from {
        opacity: 0;
        scale: 0.96;
        translate: 0 var(--ow-pop-from, -4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-popover[data-placed] { animation: none; }
}

/* ── Dropdown menu ───────────────────────────────────────────────────── */

.cms-owner-panel .ow-dropdown {
    position: relative;
    display: inline-flex;
}

.cms-owner-panel .ow-dropdown__trigger {
    font-family: inherit;
}

.cms-owner-panel .ow-menu {
    /* A long menu or list scrolls inside itself: never taller than 360px
       or than the window, a wheel that reaches its end stops there instead
       of scrolling the page behind it, and the bar stays thin. */
    max-block-size: min(360px, calc(100vh - 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ow-border-strong) transparent;
    padding: 4px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow:
        0 12px 28px -8px rgba(32, 32, 40, 0.16),
        0 4px 10px -4px rgba(32, 32, 40, 0.08);
    color: var(--ow-text);
    font-size: 14px;
    line-height: 1.5;
}

.cms-owner-panel .ow-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-block-size: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ow-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    --ow-icon-size: 16px;
}

.cms-owner-panel .ow-menu__item > .ow-icon {
    color: var(--ow-text-muted);
}

/* One highlight for the pointer and the keyboard: the script focuses the
   item under the pointer, so :focus is the only state to draw. */
.cms-owner-panel .ow-menu__item:focus,
.cms-owner-panel .ow-menu__item:hover:not(:disabled) {
    background-color: var(--ow-fill-subtle);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-menu__item:focus > .ow-icon,
.cms-owner-panel .ow-menu__item:hover:not(:disabled) > .ow-icon {
    color: var(--ow-ink);
}

.cms-owner-panel .ow-menu__item:disabled,
.cms-owner-panel .ow-menu__item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cms-owner-panel .ow-menu__item--danger,
.cms-owner-panel .ow-menu__item--danger > .ow-icon {
    color: var(--red-600);
}

.cms-owner-panel .ow-menu__item--danger:focus,
.cms-owner-panel .ow-menu__item--danger:hover:not(:disabled) {
    background-color: var(--red-50);
    color: var(--red-700);
}

.cms-owner-panel .ow-menu__item--done,
.cms-owner-panel .ow-menu__item--done > .ow-icon {
    color: var(--green-600);
}

.cms-owner-panel .ow-menu__text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-owner-panel .ow-menu__shortcut {
    margin-inline-start: auto;
    color: var(--ow-text-placeholder);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* A pick-one item's check: at the far end of the row, with its place kept
   while unchosen so choosing never moves the label. */
.cms-owner-panel .ow-menu__item > .ow-menu__check {
    margin-inline-start: auto;
    color: var(--ow-accent);
}

.cms-owner-panel .ow-menu__item > .ow-menu__check--off {
    visibility: hidden;
}

/* A flag (OwnerFlag): the drawing is cropped by its own box, a 3:2
   rectangle, or a circle for an icon-only control. The hairline ring keeps
   the white band of a flag visible on a white menu. */
.cms-owner-panel .ow-flag {
    display: inline-block;
    flex: none;
    inline-size: var(--ow-flag-size, 20px);
    block-size: calc(var(--ow-flag-size, 20px) * 2 / 3);
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    line-height: 0;
}

.cms-owner-panel .ow-flag::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.cms-owner-panel .ow-flag--round {
    block-size: var(--ow-flag-size, 20px);
    border-radius: 50%;
}

.cms-owner-panel .ow-flag > svg {
    inline-size: 100%;
    block-size: 100%;
}

.cms-owner-panel .ow-menu__separator {
    block-size: 1px;
    margin: 4px -4px;
    background-color: var(--ow-border);
}

/* The head of an account menu: who this is, over a hairline. */
.cms-owner-panel .ow-menu__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px -4px 4px;
    padding: 6px 14px 10px;
    border-block-end: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-menu__avatar {
    inline-size: 32px;
    block-size: 32px;
    font-size: 14px;
    border-radius: 50%;
}

/* The account avatar is the panel's own chrome, not a site's identity, so it
   drops the hue and wears the ink of the panel's buttons. Two classes, so it
   outranks .ow-monogram, which is declared further down this sheet. */
.cms-owner-panel .ow-monogram.ow-menu__avatar {
    background: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-menu__identity {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    gap: 2px;
}

.cms-owner-panel .ow-menu__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ow-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-owner-panel .ow-menu__caption {
    font-size: 12px;
    color: var(--ow-text-muted);
}

/* Signing out is a form post (a cookie is only writable on a real HTTP
   response), so its menu item is a submit button dressed as an item. */
.cms-owner-panel .ow-menu form {
    display: contents;
}

.cms-owner-panel .ow-menu__label {
    padding: 6px 10px 4px;
    color: var(--ow-text-placeholder);
    font-size: 12px;
    font-weight: 600;
}

/* ── Select ──────────────────────────────────────────────────────────── */

/* The trigger is the design system's Input with a chevron at the end; the
   list is the menu panel, at least as wide as the trigger, with the chosen
   option in ink and checked. */
.cms-owner-panel .ow-select {
    position: relative;
    display: inline-flex;
    min-inline-size: 0;
}

.cms-owner-panel .ow-select__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
    block-size: var(--ow-control-height);
    padding-inline: 12px 10px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-xs);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    --ow-icon-size: 16px;
}

.cms-owner-panel .ow-select__trigger:hover:not(:disabled) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-select__trigger:focus-visible,
.cms-owner-panel .ow-select__trigger[data-state="open"] {
    outline: none;
    border-color: var(--ow-ink);
    box-shadow: var(--ow-shadow-xs), var(--ow-focus-ring);
}

.cms-owner-panel .ow-select__trigger:disabled {
    background-color: var(--ow-fill-subtle);
    color: var(--ow-text-muted);
    cursor: not-allowed;
}

.cms-owner-panel .ow-select__value {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-owner-panel .ow-select__value--placeholder {
    color: var(--ow-text-placeholder);
}

.cms-owner-panel .ow-select__chevron {
    color: var(--ow-text-muted);
    transition: rotate 0.2s ease;
}

.cms-owner-panel .ow-select__trigger[data-state="open"] .ow-select__chevron {
    rotate: 180deg;
}

.cms-owner-panel .ow-select__option--selected {
    color: var(--ow-ink);
    font-weight: 600;
}

.cms-owner-panel .ow-select__option .ow-select__check {
    margin-inline-start: auto;
    color: var(--ow-ink);
}

/* ── Task list (Figma 3050:1959) ─────────────────────────────────────── */

.cms-owner-panel .ow-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.cms-owner-panel .ow-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cms-owner-panel .ow-task__tick {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    margin-top: 1px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--ow-text-muted);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cms-owner-panel .ow-task--waiting .ow-task__tick {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-task--done .ow-task__tick {
    background-color: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-on-ink);
    animation: ow-tick-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cms-owner-panel .ow-task--failed .ow-task__tick {
    background-color: var(--red-500);
    border-color: var(--red-500);
    color: var(--ow-on-fill);
}

.cms-owner-panel .ow-task__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.cms-owner-panel .ow-task__label {
    color: var(--ow-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.cms-owner-panel .ow-task--done .ow-task__label {
    color: var(--ow-ink);
}

.cms-owner-panel .ow-task--running .ow-task__label {
    color: var(--ow-text);
}

.cms-owner-panel .ow-task--failed .ow-task__label {
    color: var(--red-600);
}

.cms-owner-panel .ow-task__detail {
    color: var(--ow-text-muted);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@keyframes ow-tick-in {
    from { scale: 0.6; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-task--done .ow-task__tick { animation: none; }
}

/* ── Notice (Figma 3050:2018) ────────────────────────────────────────── */

.cms-owner-panel .ow-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    color: var(--charade-600);
}

.cms-owner-panel .ow-notice__icon {
    margin-top: 4px;
    color: var(--ow-text-muted);
}

.cms-owner-panel .ow-notice__text {
    flex: 1 1 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}

/* ── Monogram ───────────────────────────────────────────────────────────── */

/* The first letter of a name on a colour of its own: a hue from the key
   (--ow-hue), a soft diagonal of two shades of it, the letter white. The
   colour is the identity; the letter only confirms it. */
.cms-owner-panel .ow-monogram {
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--ow-radius-sm);
    background:
        radial-gradient(120% 90% at 80% 10%, hsl(var(--ow-hue, 212) 92% 78% / 0.55) 0%, transparent 60%),
        linear-gradient(135deg, hsl(var(--ow-hue, 212) 78% 52%) 0%, hsl(calc(var(--ow-hue, 212) + 28) 72% 40%) 100%);
    color: var(--ow-on-fill);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.cms-owner-panel .ow-monogram__letter {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* ── Theme card ─────────────────────────────────────────────────────────── */

/* Three to a row: a shelf, not a catalogue. The create dialog's body is
   624px wide, so each card is about 200px — enough for a sketch and a name. */
.cms-owner-panel .ow-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cms-owner-panel .ow-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ow-radius-lg);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cms-owner-panel .ow-theme-card--choice {
    cursor: pointer;
}

.cms-owner-panel .ow-theme-card--choice:hover {
    border-color: var(--ow-border-strong);
    transform: translateY(-1px);
}

.cms-owner-panel .ow-theme-card--selected,
.cms-owner-panel .ow-theme-card--selected:hover,
.cms-owner-panel .ow-theme-card:has(.ow-radio:checked) {
    border-color: var(--ow-ink);
    box-shadow: 0 0 0 1px var(--ow-ink);
}

.cms-owner-panel .ow-theme-card:has(.ow-radio:focus-visible) {
    box-shadow: var(--ow-focus-ring);
}

/* One card on its own, in a confirmation: no wider than a shelf's card. */
.cms-owner-panel .ow-theme-card--single {
    inline-size: 220px;
    margin-inline: auto;
}

/* The native radio does the choosing and the keyboard; the card is what the
   reader sees of it. Hidden without display:none, so it stays focusable. */
.cms-owner-panel .ow-theme-card__radio {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
}

/* The cover: a sketch of a page on the theme's colour. */
.cms-owner-panel .ow-theme-card__cover {
    display: block;
    aspect-ratio: 16 / 10;
    padding: 12px 14px 0;
    background:
        radial-gradient(120% 90% at 80% 10%, hsl(var(--ow-hue, 212) 92% 78% / 0.55) 0%, transparent 60%),
        linear-gradient(135deg, hsl(var(--ow-hue, 212) 78% 52%) 0%, hsl(calc(var(--ow-hue, 212) + 28) 72% 40%) 100%);
    border-bottom: 1px solid var(--ow-border);
    overflow: hidden;
}

.cms-owner-panel .ow-theme-card__sketch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    block-size: 100%;
    padding: 8px;
    border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--white-background) 92%, transparent);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.35);
}

.cms-owner-panel .ow-theme-card__sketch-bar,
.cms-owner-panel .ow-theme-card__sketch-hero,
.cms-owner-panel .ow-theme-card__sketch-cols > span {
    display: block;
    border-radius: 3px;
    background: hsl(var(--ow-hue, 212) 40% 88%);
}

.cms-owner-panel .ow-theme-card__sketch-bar {
    block-size: 6px;
    inline-size: 45%;
}

.cms-owner-panel .ow-theme-card__sketch-hero {
    block-size: 26px;
    background: hsl(var(--ow-hue, 212) 70% 60%);
}

.cms-owner-panel .ow-theme-card__sketch-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: 1 1 auto;
}

.cms-owner-panel .ow-theme-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
}

.cms-owner-panel .ow-theme-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-inline-size: 0;
}

.cms-owner-panel .ow-theme-card__title {
    color: var(--ow-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-owner-panel .ow-theme-card__description {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A theme's name and line are the designer's, in whatever language they wrote
   them. Each takes its reading direction from its own words — or the full
   stop of an English line jumps to its start in Persian — and stays aligned
   with the panel, which plaintext alone would not do (CMS-L23). */
.cms-owner-panel .ow-theme-card__title,
.cms-owner-panel .ow-theme-card__description {
    unicode-bidi: plaintext;
}

[dir="rtl"] .cms-owner-panel .ow-theme-card__title,
[dir="rtl"] .cms-owner-panel .ow-theme-card__description {
    text-align: right;
}

/* The pick: a check in the cover's corner, only once the card is chosen. */
.cms-owner-panel .ow-theme-card__pick {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 999px;
    background: var(--ow-ink);
    color: var(--ow-on-ink);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cms-owner-panel .ow-theme-card--selected .ow-theme-card__pick,
.cms-owner-panel .ow-theme-card:has(.ow-radio:checked) .ow-theme-card__pick {
    opacity: 1;
    transform: scale(1);
}

.cms-owner-panel .ow-theme-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding: 0 12px 12px;
}

/* A shelf that is not stocked yet: three ghosts of the cards to come. */
.cms-owner-panel .ow-theme-ghost {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 12px;
    border-radius: var(--ow-radius-lg);
    border: 1px dashed var(--ow-border-strong);
    overflow: hidden;
}

.cms-owner-panel .ow-theme-ghost__cover {
    display: block;
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(135deg, var(--ow-fill-subtle) 0 10px, transparent 10px 20px);
    border-bottom: 1px dashed var(--ow-border-strong);
}

.cms-owner-panel .ow-theme-ghost__line {
    display: block;
    block-size: 8px;
    inline-size: 55%;
    margin-inline: 12px;
    border-radius: 4px;
    background: var(--ow-fill-subtle);
}

/* ── Category tiles ─────────────────────────────────────────────────────── */

/* The kinds of site: a tile each, three to a row, the picked one charcoal
   like a picked option card. Compact is one row of small chips — a filter
   over a list, not the question itself. */
.cms-owner-panel .ow-category-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cms-owner-panel .ow-category-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    color: var(--ow-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cms-owner-panel .ow-category-tile:hover:not(:disabled) {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-category-tile:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-category-tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cms-owner-panel .ow-category-tile__icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    color: var(--ow-text-muted);
    --ow-icon-size: 18px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cms-owner-panel .ow-category-tile--selected,
.cms-owner-panel .ow-category-tile--selected:hover:not(:disabled) {
    border-color: var(--ow-ink);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-category-tile--selected .ow-category-tile__icon {
    background-color: var(--ow-ink);
    border-color: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-category-tile__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-owner-panel .ow-category-picker--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cms-owner-panel .ow-category-picker--compact .ow-category-tile {
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    font-size: 12px;
}

.cms-owner-panel .ow-category-picker--compact .ow-category-tile__icon {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 999px;
    --ow-icon-size: 13px;
}

/* ── Dialog sections and fields ─────────────────────────────────────────── */

.cms-owner-panel .ow-dialog__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms-owner-panel .ow-dialog__section + .ow-dialog__section {
    padding-top: 16px;
    border-top: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-dialog__section-title {
    margin: 0;
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.cms-owner-panel .ow-field__label {
    color: var(--ow-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Danger ─────────────────────────────────────────────────────────────── */

.cms-owner-panel .ow-btn--danger {
    background-color: var(--red-600);
    border-color: var(--red-600);
    color: var(--ow-on-fill);
}

.cms-owner-panel .ow-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--red-700, var(--red-600));
    border-color: var(--red-700, var(--red-600));
}

.cms-owner-panel .ow-icon-btn--danger {
    color: var(--red-600);
}

.cms-owner-panel .ow-icon-btn--danger:hover:not(:disabled) {
    background-color: var(--red-50);
    border-color: var(--red-200);
}

/* ── Domains dialog ─────────────────────────────────────────────────────── */

.cms-owner-panel .ow-connect {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cms-owner-panel .ow-connect__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: left;
}

.cms-owner-panel .ow-domains {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-owner-panel .ow-domain {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
}

.cms-owner-panel .ow-domain__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.cms-owner-panel .ow-domain__host {
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
    min-inline-size: 0;
    text-decoration: none;
}

.cms-owner-panel .ow-domain__host:hover {
    color: var(--ow-accent);
}

.cms-owner-panel .ow-domain__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cms-owner-panel .ow-domain__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}

.cms-owner-panel .ow-domain__stage {
    display: inline-flex;
    align-items: center;
    block-size: 20px;
    padding-inline: 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.cms-owner-panel .ow-domain__stage--ok {
    color: var(--green-600);
    background: var(--green-50, rgba(195, 239, 201, 0.5));
}

.cms-owner-panel .ow-domain__stage--wait {
    color: var(--orange-600);
    background: var(--orange-50, rgba(249, 235, 198, 0.6));
}

.cms-owner-panel .ow-domain__stage--bad {
    color: var(--red-600);
    background: var(--red-50);
}

.cms-owner-panel .ow-domain__note {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 12.5px;
    line-height: 1.7;
}

.cms-owner-panel .ow-domain__problem {
    margin: 0;
    color: var(--red-600);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.7;
}

.cms-owner-panel .ow-domain__how-toggle {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ow-accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.cms-owner-panel .ow-domain__how {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--ow-radius-sm);
    background: var(--ow-accent-soft);
    color: var(--ow-text);
    font-size: 12.5px;
    line-height: 1.7;
}

.cms-owner-panel .ow-domain__how p {
    margin: 0;
}

.cms-owner-panel .ow-domain__how-title {
    color: var(--ow-ink);
    font-weight: 700;
}

.cms-owner-panel .ow-domain__how code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--ow-ink);
    overflow-wrap: anywhere;
}

.cms-owner-panel .ow-domain__ns {
    margin: 0;
    padding-inline-start: 18px;
}

.cms-owner-panel .ow-domain__records {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--ow-surface);
    border-radius: var(--ow-radius-xs);
    overflow: hidden;
}

.cms-owner-panel .ow-domain__records th,
.cms-owner-panel .ow-domain__records td {
    padding: 6px 8px;
    text-align: start;
    border-bottom: 1px solid var(--ow-border);
    vertical-align: top;
}

.cms-owner-panel .ow-domain__records th {
    color: var(--ow-text-muted);
    font-weight: 600;
    font-size: 11.5px;
}

/* The disconnect's one question, in the row it is about. */
.cms-owner-panel .ow-domain__confirm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--red-200);
    background: var(--red-50);
}

.cms-owner-panel .ow-domain__confirm-title {
    margin: 0;
    color: var(--red-600);
    font-size: 13px;
    font-weight: 700;
}

.cms-owner-panel .ow-domain__confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ── Plan cards (add-ons, upgrade) ──────────────────────────────────────── */

.cms-owner-panel .ow-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cms-owner-panel .ow-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    padding-inline-end: 40px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .ow-plan:hover {
    border-color: var(--ow-border-strong);
}

.cms-owner-panel .ow-plan--selected,
.cms-owner-panel .ow-plan:has(.ow-radio:checked) {
    border-color: var(--ow-ink);
    box-shadow: 0 0 0 1px var(--ow-ink);
}

.cms-owner-panel .ow-plan:has(.ow-radio:focus-visible) {
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-plan__radio {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
}

.cms-owner-panel .ow-plan__title {
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.cms-owner-panel .ow-plan__price {
    color: var(--ow-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    unicode-bidi: plaintext;
}

.cms-owner-panel .ow-plan__unit {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.cms-owner-panel .ow-plan__meta {
    color: var(--ow-text-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
}

/* ── Stats (AI credit) ──────────────────────────────────────────────────── */

.cms-owner-panel .ow-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cms-owner-panel .ow-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--ow-radius-sm);
    background: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-stat__value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ow-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    unicode-bidi: plaintext;
}

.cms-owner-panel .ow-stat__label {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.cms-owner-panel .ow-topup {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cms-owner-panel .ow-topup__row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cms-owner-panel .ow-topup__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: left;
}

/* ── The AI route of the create-site dialog (CMS-L49) ─────────────────────
   Figma: Build Site (B) 05–11. Everything below is scoped to the owner
   panel like the rest of this sheet. */

/* The pill that swaps modes on the same brief (Mode switch). */
.cms-owner-panel .ow-mode-switch {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
    color: var(--ow-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cms-owner-panel .ow-mode-switch b {
    color: var(--ow-ink);
    font-weight: 700;
}

.cms-owner-panel .ow-mode-switch:hover:not(:disabled) { border-color: var(--ow-border-strong); }
.cms-owner-panel .ow-mode-switch:focus-visible { outline: none; box-shadow: var(--ow-focus-ring); }
.cms-owner-panel .ow-mode-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Your site so far": chips of what the earlier steps said (Draft). */
.cms-owner-panel .ow-draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-block-end: 18px;
    border-block-end: 1px dashed var(--ow-border);
}

.cms-owner-panel .ow-draft__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

.cms-owner-panel .ow-draft__items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.cms-owner-panel .ow-draft__item {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--ow-radius-xs);
    background: var(--ow-fill-subtle);
    color: var(--ow-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

/* Fields of the steps. */
.cms-owner-panel .ow-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-owner-panel .ow-field .ow-field__label {
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 600;
}

.cms-owner-panel .ow-input::placeholder,
.cms-owner-panel .ow-textarea::placeholder { color: var(--ow-text-placeholder); }

.cms-owner-panel .ow-textarea {
    inline-size: 100%;
    min-block-size: 112px;
    padding: 10px 12px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background-color: var(--ow-surface);
    box-shadow: var(--ow-shadow-sm);
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .ow-textarea:focus-visible,
.cms-owner-panel .ow-chat__input:focus-visible {
    outline: none;
    border-color: var(--ow-border-strong);
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The grey box under the site types (Company options). */
.cms-owner-panel .ow-subtle {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-subtle__question {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

.cms-owner-panel .ow-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.cms-owner-panel .ow-check input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.cms-owner-panel .ow-check__box {
    display: inline-grid;
    place-items: center;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 4px;
    border: 1px solid var(--ow-border-strong);
    background: var(--ow-surface);
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cms-owner-panel .ow-check input:checked + .ow-check__box {
    border-color: var(--ow-ink);
    background: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-check input:focus-visible + .ow-check__box { box-shadow: var(--ow-focus-ring); }

/* The dashed drop box (Upload), tall on the content step and slim on the look step. */
.cms-owner-panel .ow-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-block: 24px;
    border-radius: var(--ow-radius-md);
    border: 1px dashed var(--ow-border-strong);
    background: var(--ow-surface);
    color: var(--ow-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cms-owner-panel .ow-upload:hover { border-color: var(--ow-ink); }
.cms-owner-panel .ow-upload:focus-within { box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-upload input,
.cms-owner-panel .ow-chat__attach input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
}

.cms-owner-panel .ow-upload--slim {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding-block: 18px;
    color: var(--ow-text-muted);
}

.cms-owner-panel .ow-upload__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.cms-owner-panel .ow-upload__hint {
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.cms-owner-panel .ow-upload__files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cms-owner-panel .ow-upload__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-inline-size: 100%;
    padding: 3px 6px 3px 3px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--ow-text);
}

.cms-owner-panel .ow-upload__file img {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.cms-owner-panel .ow-upload__file-name {
    max-inline-size: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

.cms-owner-panel .ow-upload__remove {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ow-text-muted);
    cursor: pointer;
}

.cms-owner-panel .ow-upload__remove:hover { background: var(--ow-fill-subtle); color: var(--ow-ink); }

/* Tabs (manual / AI) of the look step. */
.cms-owner-panel .ow-tabs {
    align-self: flex-start;
    display: inline-flex;
    padding: 3px;
    border-radius: var(--ow-radius-sm);
    background: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ow-radius-xs);
    background: transparent;
    color: var(--ow-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.cms-owner-panel .ow-tab--active {
    background: var(--ow-surface);
    color: var(--ow-ink);
    box-shadow: 0 1px 3px rgba(32, 32, 40, 0.1);
}

.cms-owner-panel .ow-tab:focus-visible { outline: none; box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-dialog__section--ruled {
    padding-block-start: 28px;
    border-block-start: 1px solid var(--ow-border);
    gap: 20px;
}

/* The three mood thumbnails (Styles). */
.cms-owner-panel .ow-styles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cms-owner-panel .ow-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.cms-owner-panel .ow-style__thumb {
    display: flex;
    flex-direction: column;
    gap: 10px;
    inline-size: 100%;
    block-size: 96px;
    padding: 10px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: #fff;
    color: #3d3f52;
    text-align: start;
    transition: border-color 0.15s ease;
}

.cms-owner-panel .ow-style--selected .ow-style__thumb { border-color: var(--ow-ink); }
.cms-owner-panel .ow-style:focus-visible { outline: none; }
.cms-owner-panel .ow-style:focus-visible .ow-style__thumb { box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-style__thumb--warm { background: #faf6f2; }
.cms-owner-panel .ow-style__thumb--formal { background: #202028; color: #f5f5f8; }

.cms-owner-panel .ow-style__nav {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    line-height: 1.2;
}

.cms-owner-panel .ow-style__nav b { font-weight: 700; direction: ltr; }
.cms-owner-panel .ow-style__nav i { font-style: normal; font-weight: 500; }

.cms-owner-panel .ow-style__hero {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-owner-panel .ow-style__shape {
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 6px;
    background: var(--charade-100);
}

.cms-owner-panel .ow-style__thumb--warm .ow-style__shape {
    border-radius: 20px 20px 6px 6px;
    background: linear-gradient(90deg, #dbba9e, #b58c6b);
}

.cms-owner-panel .ow-style__thumb--formal .ow-style__shape { display: none; }
.cms-owner-panel .ow-style__thumb--formal .ow-style__lines { align-items: center; }

.cms-owner-panel .ow-style__lines {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-inline-size: 0;
}

.cms-owner-panel .ow-style__lines b {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.cms-owner-panel .ow-style__lines i {
    display: block;
    block-size: 3px;
    inline-size: 48px;
    border-radius: 2px;
    background: rgba(61, 63, 82, 0.2);
}

.cms-owner-panel .ow-style__lines i + i { inline-size: 30px; }
.cms-owner-panel .ow-style__thumb--formal .ow-style__lines i { background: rgba(245, 245, 248, 0.2); }

.cms-owner-panel .ow-style__label {
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.cms-owner-panel .ow-style--selected .ow-style__label { color: var(--ow-ink); }

/* Colours: a row of swatches and a picker square. */
.cms-owner-panel .ow-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cms-owner-panel .ow-swatches {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 28px;
}

.cms-owner-panel .ow-swatch {
    position: relative;
    display: inline-block;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    border: 1px solid rgba(32, 32, 40, 0.08);
    border-radius: 50%;
    background: var(--ow-swatch, #ccc);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.cms-owner-panel .ow-swatch--selected { box-shadow: 0 0 0 2px var(--white-background), 0 0 0 4px var(--ow-accent); }
.cms-owner-panel .ow-swatch:focus-visible { outline: none; box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-swatch--picker {
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--ow-radius-sm);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--ow-border);
    background: conic-gradient(#f87171, #fbbf24, #4ade80, #60a5fa, #c084fc, #f87171);
    overflow: hidden;
}

.cms-owner-panel .ow-swatch--picker input {
    position: absolute;
    inset: -8px;
    inline-size: calc(100% + 16px);
    block-size: calc(100% + 16px);
    opacity: 0;
    cursor: pointer;
}

.cms-owner-panel .ow-swatches--small .ow-swatch {
    inline-size: 22px;
    block-size: 22px;
    cursor: default;
}

/* The proposal (Summary). */
.cms-owner-panel .ow-review {
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
}

.cms-owner-panel .ow-review__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-block-end: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-review__section:last-child { border-block-end: 0; }

.cms-owner-panel .ow-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cms-owner-panel .ow-review__title {
    color: var(--ow-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .ow-review__edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ow-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
}

.cms-owner-panel .ow-review__edit:hover { text-decoration: underline; }

.cms-owner-panel .ow-review__line {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.cms-owner-panel .ow-review__line--empty { font-style: italic; }

/* The conversation's points on the review step (chat route): one editable
   row per thing settled — what it is about, the answer, and a remove. */
.cms-owner-panel .ow-review__points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 6px;
}

/* One row, one box: the question and the answer are two cells of the same
   hairline-bordered row, same height, a hairline between them — the fields
   themselves draw no border, so an input beside a textarea reads as one
   line rather than two unrelated controls. The answer grows with its text. */
.cms-owner-panel .ow-review__point {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    align-items: stretch;
    border: 1px solid var(--ow-border);
    border-radius: 10px;
    background: var(--ow-surface);
    overflow: hidden;
}

.cms-owner-panel .ow-review__point:focus-within {
    border-color: var(--ow-border-strong);
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .ow-review__point-q,
.cms-owner-panel .ow-review__point-a {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 40px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
    resize: none;
    field-sizing: content;
}

.cms-owner-panel .ow-review__point-q {
    color: var(--ow-text-muted);
    font-weight: 600;
    background: color-mix(in srgb, var(--ow-ink) 3%, transparent);
    border-inline-end: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-review__point-q:focus-visible,
.cms-owner-panel .ow-review__point-a:focus-visible {
    outline: none;
    box-shadow: none;
}

.cms-owner-panel .ow-review__point-q::placeholder,
.cms-owner-panel .ow-review__point-a::placeholder {
    color: var(--ow-text-muted);
    opacity: 0.7;
    font-weight: 500;
}

.cms-owner-panel .ow-review__point-remove {
    display: inline-grid;
    place-items: center;
    align-self: stretch;
    inline-size: 32px;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--ow-border);
    background: transparent;
    color: var(--ow-text-muted);
    cursor: pointer;
}

.cms-owner-panel .ow-review__point-remove:hover {
    color: var(--ow-ink);
    background: color-mix(in srgb, var(--ow-ink) 4%, transparent);
}

@media (max-width: 560px) {
    .cms-owner-panel .ow-review__point { grid-template-columns: minmax(0, 1fr) auto; }
    .cms-owner-panel .ow-review__point-q { grid-column: 1; border-inline-end: 0; border-block-end: 1px solid var(--ow-border); }
    .cms-owner-panel .ow-review__point-a { grid-column: 1; }
    .cms-owner-panel .ow-review__point-remove { grid-row: 1 / span 2; grid-column: 2; }
}

/* Plan cards with the plan's features (Plans). */
.cms-owner-panel .ow-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-block-start: 10px;
}

.cms-owner-panel .ow-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .ow-plan-card:hover { border-color: var(--ow-border-strong); }
.cms-owner-panel .ow-plan-card--selected,
.cms-owner-panel .ow-plan-card--selected:hover { border-color: var(--ow-ink); }

/* The free start (Figma 1859:969): one card across both columns, a
   title and a line, no price. Greyed when the panel cannot offer it. */
.cms-owner-panel .ow-plan-card--free,
.cms-owner-panel .ow-plans__empty {
    grid-column: 1 / -1;
}

.cms-owner-panel .ow-plan-card--disabled {
    cursor: not-allowed;
}

.cms-owner-panel .ow-plan-card--disabled .ow-plan-card__title,
.cms-owner-panel .ow-plan-card--disabled .ow-plan-card__description {
    color: var(--ow-text-muted);
}
.cms-owner-panel .ow-plan-card:focus-within { box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-plan-card__badge {
    position: absolute;
    inset-block-start: -11px;
    inset-inline-start: 11px;
    display: inline-flex;
    align-items: center;
    block-size: 20px;
    padding-inline: 7px;
    border-radius: var(--ow-radius-xs);
    background: var(--ow-ink);
    color: var(--ow-on-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.cms-owner-panel .ow-plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cms-owner-panel .ow-plan-card__title {
    color: var(--ow-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .ow-plan-card__description {
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

.cms-owner-panel .ow-plan-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-block-start: 12px;
    unicode-bidi: plaintext;
}

.cms-owner-panel .ow-plan-card__price b {
    color: var(--ow-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    font-feature-settings: "salt" 1;
}

.cms-owner-panel .ow-plan-card__unit {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.cms-owner-panel .ow-plan-card__gift {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 10px;
    padding: 3px 8px;
    border-radius: var(--ow-radius-xs);
    border: 1px solid var(--ow-border);
    color: var(--ow-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    font-feature-settings: "salt" 1;
}

.cms-owner-panel .ow-plan-card__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-plan-card__feature {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cms-owner-panel .ow-plan-card__feature-text {
    display: flex;
    flex-direction: column;
}

.cms-owner-panel .ow-plan-card__feature-text b {
    color: var(--ow-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

.cms-owner-panel .ow-plan-card__feature-text i {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
}

/* The payment summary. */
.cms-owner-panel .ow-summary {
    display: flex;
    flex-direction: column;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
}

/* The checkout card's title row (Figma: "Payment review" with the card icon). */
.cms-owner-panel .ow-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 8px;
    color: var(--ow-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .ow-summary__head-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-block-end: 1px solid var(--ow-border);
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.cms-owner-panel .ow-summary__row:last-child { border-block-end: 0; }

.cms-owner-panel .ow-summary__row b {
    color: var(--ow-ink);
    font-weight: 600;
    unicode-bidi: plaintext;
}

.cms-owner-panel .ow-summary__total {
    background: var(--ow-fill-subtle);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-summary__total b {
    font-size: 18px;
    font-weight: 800;
}

/* The bought plan, on the ready screen. */
.cms-owner-panel .ow-bought {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-fill-subtle);
}

.cms-owner-panel .ow-bought__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .ow-bought__text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.cms-owner-panel .ow-bought__text b {
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

.cms-owner-panel .ow-bought__text i {
    color: var(--ow-text-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    unicode-bidi: plaintext;
}

/* The first step's reminder under its question: the step does not move on
   until the kind's question is answered (the user's rule). */
.cms-owner-panel .ow-subtle__hint {
    margin: 0;
    color: var(--ow-text-placeholder);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
}

/* Payment methods (Figma: Payment review, "روش پرداخت"): two cards in the
   plan grid's shape. The seller's way is picked; the wallet is a placeholder
   and drawn as one — faded, no pointer, its radio disabled. */
.cms-owner-panel .ow-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cms-owner-panel .ow-method {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cms-owner-panel .ow-method--selected { border-color: var(--ow-ink); }

.cms-owner-panel .ow-method--disabled {
    cursor: not-allowed;
    color: var(--charade-300);
}

.cms-owner-panel .ow-method--disabled .ow-radio { pointer-events: none; }

.cms-owner-panel .ow-method__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cms-owner-panel .ow-method__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ow-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .ow-method--disabled .ow-method__title { color: var(--charade-300); }
.cms-owner-panel .ow-method--disabled .ow-badge { color: var(--charade-300); }

.cms-owner-panel .ow-method__description {
    color: var(--charade-300);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

.cms-owner-panel .ow-method--selected .ow-method__description { color: var(--ow-text-muted); }

/* The payment's outcome (Figma: Payment status): one card, three tones. The
   icon tile is the only thing that changes colour, so the three screens are
   told apart at a glance and read the same way. */
.cms-owner-panel .ow-outcome {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
}

.cms-owner-panel .ow-outcome__status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cms-owner-panel .ow-outcome__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--ow-radius-sm);
    border: 1px solid var(--ow-border);
    color: var(--ow-ink);
}

.cms-owner-panel .ow-outcome--success .ow-outcome__icon {
    border-color: var(--green-600);
    background: var(--green-50);
    color: var(--green-600);
}

.cms-owner-panel .ow-outcome--failed .ow-outcome__icon {
    border-color: var(--red-500);
    background: var(--red-50);
    color: var(--red-500);
}

.cms-owner-panel .ow-outcome--error .ow-outcome__icon {
    border-color: var(--orange-500);
    background: var(--orange-50);
    color: var(--orange-500);
}

.cms-owner-panel .ow-outcome__title {
    color: var(--ow-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    unicode-bidi: plaintext;
}

.cms-owner-panel .ow-outcome__text {
    margin: 0;
    color: var(--ow-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}

/* The outcome card's own summary: rows without the card border around them. */
.cms-owner-panel .ow-summary--flat {
    inline-size: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cms-owner-panel .ow-summary--flat .ow-summary__row { padding-inline: 0; }

/* The conversation (Chat). */
.cms-owner-panel .ow-chat {
    display: flex;
    flex-direction: column;
    border-radius: var(--ow-radius-md);
    border: 1px solid var(--ow-border);
    background: var(--ow-surface);
}

.cms-owner-panel .ow-chat__log {
    display: flex;
    flex-direction: column;
    gap: 14px;
    block-size: 320px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cms-owner-panel .ow-chat__msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cms-owner-panel .ow-chat__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ow-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

/* The sparkle before the name, in the accent (Figma 3055:2178: #097DEA,
   at the reading edge of the label). */
.cms-owner-panel .ow-chat__label .ow-icon { color: var(--ow-accent); }

.cms-owner-panel .ow-chat__text {
    margin: 0;
    color: var(--ow-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cms-owner-panel .ow-chat__text--muted { color: var(--ow-text-muted); }

/* The customer's bubble starts where the assistant's text starts — the
   reading edge — rather than being pushed to the far side (user's call). */
.cms-owner-panel .ow-chat__row {
    display: flex;
    justify-content: flex-start;
}

.cms-owner-panel .ow-chat__bubble {
    max-inline-size: 85%;
    padding: 6px 12px;
    border-radius: 10px;
    border-start-start-radius: 0;
    background: var(--charade-600);
    color: var(--ow-on-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cms-owner-panel .ow-chat__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block-start: 4px;
}

/* Several questions asked together: each a labelled row of chips, so the
   customer sees which chip answers which question before anything is sent. */
.cms-owner-panel .ow-chat__asks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block-start: 4px;
}

.cms-owner-panel .ow-chat__ask {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cms-owner-panel .ow-chat__ask-label {
    color: var(--ow-ink-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.cms-owner-panel .ow-chat__ask .ow-chat__choices {
    padding-block-start: 0;
}

.cms-owner-panel .ow-chat__composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-block-start: 1px solid var(--ow-border);
}

.cms-owner-panel .ow-chat__input {
    inline-size: 100%;
    min-block-size: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ow-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    resize: none;
}

.cms-owner-panel .ow-chat__input:focus-visible { box-shadow: none; }

.cms-owner-panel .ow-chat__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Attached, not yet sent: a strip of chips above the attach link. */
.cms-owner-panel .ow-chat__pending {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 8px;
}

/* The files a message went out with, inside its bubble, above the words. */
.cms-owner-panel .ow-chat__bubble-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 6px;
}

.cms-owner-panel .ow-chat__bubble-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-inline-size: 100%;
    font-size: 12px;
}

.cms-owner-panel .ow-chat__bubble-file img {
    display: block;
    inline-size: 64px;
    block-size: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.15);
}

.cms-owner-panel .ow-chat__bubble-file > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-owner-panel .ow-chat__send {
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: var(--ow-radius-sm);
    background: var(--ow-ink);
    color: var(--ow-on-ink);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cms-owner-panel .ow-chat__send:disabled { opacity: 0.3; cursor: not-allowed; }
.cms-owner-panel .ow-chat__send:focus-visible { outline: none; box-shadow: var(--ow-focus-ring); }

.cms-owner-panel .ow-chat__attach {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 12px;
    color: var(--ow-text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    overflow: hidden;
}

.cms-owner-panel .ow-chat__attach:hover { color: var(--ow-ink); }

/* Transfer instructions keep their reference readable in either language. */
.cms-owner-panel .ow-subtle .cms-pattern { unicode-bidi: plaintext; }

@media (max-width: 640px) {
    .cms-owner-panel .ow-styles,
    .cms-owner-panel .ow-plans,
    .cms-owner-panel .ow-colors { grid-template-columns: minmax(0, 1fr); }
}

/* ── Toasts: the builder's Liquid Glass (CMS-L41 task 6), for this panel ──
   A copy of builder-toast.css with the ow- prefix and the panel's scope;
   the queue behind it is the builder's ToastCenter (OwnerToastHost).

   The original's notes follow.
   ── ────────────────────────────────
   The material, in Apple's terms:

   - Glass, not grey: a heavy blur with saturation lifted, so whatever is
     behind the toast shows through as colour rather than mud; and the
     backdrop dimmed, so white text stays readable even over the white
     canvas. The sum, worst case (green — the brightest — with the wash at
     full strength over a pure white page): backdrop x .86, under a .72 dark
     base, a .22 tint and a .24 wash, is about 4.6:1. Raise a tint or thin
     the base only with that sum redone.
   - Light: a lensing rim that is bright where light would strike (top and the
     far corner) and almost gone between, plus a soft specular sheen near the
     top. Depth comes from three shadow layers — contact, near and ambient —
     never from a hard border.
   - Colour is information: the kind tints the whole body, its rim and its
     glow, the glass drop around the icon, and the wash that marks time, so
     it reads from across the screen before a word is. The system colours
     are Apple's dark-appearance ones.
   - Motion has a cause: arrivals spring in from the edge the stack hangs
     from; departures fade and settle while their slot closes, so the rest of
     the stack glides into the space instead of jumping (ToastStage keeps a
     leaving toast drawn for its exit).

   The wash is the progress bar: it grows left to right over the toast's whole
   duration, in either language — it is a clock, not reading order. Hover or
   keyboard focus pauses the wash and ToastCenter's clock together.

   Positions are physical on purpose: "top right" is the right of the screen
   in either language. */

.cms-owner-panel .ow-toasts {
    --ow-toast-rise: -14px;
    --ow-toast-spring: cubic-bezier(.34, 1.36, .64, 1);
    --ow-toast-ease: cubic-bezier(.4, 0, .2, 1);

    position: fixed;
    z-index: 2300; /* above the dialog layer (2000) and popovers (2100) */
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100vw - 32px));
    pointer-events: none;
}

.cms-owner-panel .ow-toasts--top-center,
.cms-owner-panel .ow-toasts--top-right,
.cms-owner-panel .ow-toasts--top-left {
    top: 64px; /* under the fixed 48px header */
}

.cms-owner-panel .ow-toasts--bottom-center,
.cms-owner-panel .ow-toasts--bottom-right,
.cms-owner-panel .ow-toasts--bottom-left {
    --ow-toast-rise: 14px;
    bottom: 24px;
}

.cms-owner-panel .ow-toasts--top-center,
.cms-owner-panel .ow-toasts--bottom-center {
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.cms-owner-panel .ow-toasts--top-right,
.cms-owner-panel .ow-toasts--bottom-right {
    right: 16px;
    align-items: flex-end;
}

.cms-owner-panel .ow-toasts--top-left,
.cms-owner-panel .ow-toasts--bottom-left {
    left: 16px;
    align-items: flex-start;
}

/* ── the slot: a row whose height animates ───────────────────────────────── */

.cms-owner-panel .ow-toast-slot {
    display: grid;
    grid-template-rows: 1fr;
    max-width: 100%;
    animation: ow-toast-slot-in .38s var(--ow-toast-ease);
    transition: grid-template-rows .32s var(--ow-toast-ease);
}

.cms-owner-panel .ow-toast-slot.is-leaving {
    grid-template-rows: 0fr;
    pointer-events: none;
}

/* min-height: 0 is what lets the row close; the space between toasts lives
   inside it, so it closes with the toast. */
.cms-owner-panel .ow-toast-slot__inner {
    min-height: 0;
    display: flex;
    justify-content: inherit;
    padding-block-end: 10px;
}

.cms-owner-panel .ow-toasts--bottom-center .ow-toast-slot__inner,
.cms-owner-panel .ow-toasts--bottom-right .ow-toast-slot__inner,
.cms-owner-panel .ow-toasts--bottom-left .ow-toast-slot__inner {
    padding-block: 10px 0;
}

/* A collapsing row still keeps its item's padding, so without this the slot
   stops at the gap's height and the last 10px jump when the toast is gone. */
.cms-owner-panel .ow-toast-slot.is-leaving .ow-toast-slot__inner {
    padding-block: 0;
    transition: padding-block .32s var(--ow-toast-ease);
}

/* ── the glass ──────────────────────────────────────────────────────────── */

.cms-owner-panel .ow-toast {
    --ow-toast-tint: 10 132 255;

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-height: 48px;
    padding: 7px;
    padding-inline-start: 8px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, .02) 100%),
        linear-gradient(rgb(var(--ow-toast-tint) / .22), rgb(var(--ow-toast-tint) / .22)),
        rgba(20, 20, 24, .72);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(.86);
    backdrop-filter: blur(28px) saturate(190%) brightness(.86);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, .16),
        0 10px 24px -8px rgba(0, 0, 0, .42),
        0 28px 60px -22px rgba(0, 0, 0, .55),
        0 8px 30px -6px rgb(var(--ow-toast-tint) / .4),
        inset 0 0 0 1px rgb(var(--ow-toast-tint) / .4),
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 rgba(255, 255, 255, .04);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    pointer-events: auto;
    animation: ow-toast-in .52s var(--ow-toast-spring) backwards;
    transition:
        transform .28s var(--ow-toast-spring),
        box-shadow .28s var(--ow-toast-ease),
        opacity .22s var(--ow-toast-ease);
}

/* The lensing rim: a 1px ring masked out of a gradient, bright where light
   strikes and nearly absent between. */
.cms-owner-panel .ow-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(140deg,
        rgba(255, 255, 255, .55) 0%,
        rgb(var(--ow-toast-tint) / .55) 22%,
        rgb(var(--ow-toast-tint) / .12) 48%,
        rgb(var(--ow-toast-tint) / .3) 72%,
        rgba(255, 255, 255, .34) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* The specular sheen: soft light pooled near the top edge. */
.cms-owner-panel .ow-toast::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 22% -40%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}

.cms-owner-panel .ow-toast:hover {
    transform: translateY(-1px) scale(1.012);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, .16),
        0 14px 30px -8px rgba(0, 0, 0, .48),
        0 34px 70px -22px rgba(0, 0, 0, .6),
        0 10px 36px -6px rgb(var(--ow-toast-tint) / .5),
        inset 0 0 0 1px rgb(var(--ow-toast-tint) / .5),
        inset 0 1px 0 rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(255, 255, 255, .05);
}

/* Apple's dark-appearance system colours, as RGB triplets so every layer can
   take its own alpha. */
.cms-owner-panel .ow-toast--success { --ow-toast-tint: 48 209 88; }
.cms-owner-panel .ow-toast--warning { --ow-toast-tint: 255 159 10; }
/* Bad news is red: a failure, and a loss — something deleted, discarded or
   taken out. Both carry a cross; only the failure interrupts (role=alert). */
.cms-owner-panel .ow-toast--error,
.cms-owner-panel .ow-toast--removal { --ow-toast-tint: 255 69 58; }

/* ── time ───────────────────────────────────────────────────────────────── */

/* The wash: the kind's colour sweeping in from the left with a feathered
   leading edge, the way light spreads through glass — never a hard line,
   which reads as a rendering fault rather than as time passing. A gradient
   twice-and-a-bit the toast's width slides across it: the tinted half comes
   in, the soft band between is the edge. */
.cms-owner-panel .ow-toast__fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(90deg,
        rgb(var(--ow-toast-tint) / .18) 0%,
        rgb(var(--ow-toast-tint) / .24) 44%,
        rgb(var(--ow-toast-tint) / 0) 56%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    animation: ow-toast-fill var(--ow-toast-duration, 5000ms) linear forwards;
}

.cms-owner-panel .ow-toast:hover .ow-toast__fill,
.cms-owner-panel .ow-toast:focus-within .ow-toast__fill,
.cms-owner-panel .ow-toast.is-paused .ow-toast__fill {
    animation-play-state: paused;
}

/* ── content ────────────────────────────────────────────────────────────── */

/* The icon in a drop of tinted glass. */
.cms-owner-panel .ow-toast__icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgb(var(--ow-toast-tint)), rgb(var(--ow-toast-tint) / .78) 70%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -1px 2px rgba(0, 0, 0, .18),
        0 0 0 .5px rgba(255, 255, 255, .18),
        0 4px 14px -2px rgb(var(--ow-toast-tint) / .6);
    color: #fff;
}

/* Server messages carry codes and paths; a Latin run inside a Persian
   sentence otherwise reads end-first (the CMS-L4-22 lesson). */
.cms-owner-panel .ow-toast__text {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 4px;
    padding-inline-end: 2px;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    unicode-bidi: plaintext;
    text-align: start;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

/* Glass buttons: lighter glass on glass, pressed in when clicked. */
.cms-owner-panel .ow-toast__action,
.cms-owner-panel .ow-toast__close {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    border: 0;
    background: rgba(255, 255, 255, .12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 0 0 .5px rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition:
        background-color .18s var(--ow-toast-ease),
        color .18s var(--ow-toast-ease),
        transform .22s var(--ow-toast-spring);
}

.cms-owner-panel .ow-toast__action {
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .ow-toast__close {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .62);
}

.cms-owner-panel .ow-toast__action:hover {
    background: rgba(255, 255, 255, .2);
}

.cms-owner-panel .ow-toast__close:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.cms-owner-panel .ow-toast__action:active,
.cms-owner-panel .ow-toast__close:active {
    transform: scale(.94);
}

.cms-owner-panel .ow-toast__action:focus-visible,
.cms-owner-panel .ow-toast__close:focus-visible {
    outline: 2px solid rgb(10 132 255 / .95);
    outline-offset: 2px;
}

/* ── motion ─────────────────────────────────────────────────────────────── */

.cms-owner-panel .ow-toast-slot.is-leaving .ow-toast {
    opacity: 0;
    transform: translateY(calc(var(--ow-toast-rise) * .5)) scale(.94);
    transition:
        transform .32s var(--ow-toast-ease),
        opacity .2s var(--ow-toast-ease);
}

@keyframes ow-toast-in {
    from {
        opacity: 0;
        transform: translateY(var(--ow-toast-rise)) scale(.92);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ow-toast-slot-in {
    from { grid-template-rows: 0fr; }
    to { grid-template-rows: 1fr; }
}

@keyframes ow-toast-fill {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* A browser without backdrop blur gets solid glass rather than a see-through
   panel the text cannot be read on. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cms-owner-panel .ow-toast {
        background: rgba(30, 30, 34, .96);
    }
}

/* No motion: nothing springs, slides or grows. A steady wash still says the
   kind, the clock still runs, and a leaving toast simply goes. */
@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .ow-toast-slot,
    .cms-owner-panel .ow-toast,
    .cms-owner-panel .ow-toast__action,
    .cms-owner-panel .ow-toast__close {
        animation: none;
        transition: none;
    }

    .cms-owner-panel .ow-toast:hover {
        transform: none;
    }

    .cms-owner-panel .ow-toast-slot.is-leaving {
        display: none;
    }

    .cms-owner-panel .ow-toast__fill {
        animation: none;
        background-position: 0 0;
        opacity: .6;
    }
}

/* ── create-site dialog: paid plans under a disclosure, builder countdown (WP7) ── */
.cms-owner-panel .ow-plans__paid {
    display: contents;
}

.cms-owner-panel .ow-plans__paid > summary {
    grid-column: 1 / -1;
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ow-ink);
}

.cms-owner-panel .ow-plans__paid > summary::-webkit-details-marker {
    display: none;
}

.cms-owner-panel .ow-plans__paid > summary::before {
    content: "+ ";
}

.cms-owner-panel .ow-plans__paid[open] > summary::before {
    content: "− ";
}

.cms-owner-panel .ow-dialog__countdown {
    align-self: center;
    margin-inline-end: auto;
    font-size: 0.875rem;
    color: var(--ow-text);
    font-variant-numeric: tabular-nums;
}