/* Dashboard-only Bio Page editor styles. Public presentation lives in bio-base.css. */
.phone-screen-scroll::-webkit-scrollbar { display: none; }
.phone-screen-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.theme-choice-card {
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.theme-choice-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border));
    box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .5);
}

.theme-choice-card.is-selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.theme-choice-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    outline-offset: 2px;
}

.theme-choice-preview {
    position: relative;
    width: 100%;
    height: 7.25rem;
    padding: .8rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.65rem 1fr;
    grid-template-rows: 1.65rem 1fr auto auto;
    gap: .38rem .55rem;
    border: 1px solid color-mix(in srgb, var(--preview-text) 12%, transparent);
    border-radius: .7rem;
    background: var(--preview-bg);
}

.theme-choice-preview::before {
    content: '';
    position: absolute;
    inset: .42rem;
    border-radius: .55rem;
    background: var(--preview-surface);
    box-shadow: 0 8px 20px -16px var(--preview-text);
    opacity: .97;
}

.theme-choice-preview > * { position: relative; z-index: 1; }
.theme-choice-preview__avatar { width: 1.65rem; height: 1.65rem; border: 2px solid var(--preview-accent); border-radius: 50%; background: color-mix(in srgb, var(--preview-text) 14%, var(--preview-surface)); }
.theme-choice-preview__copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .22rem; }
.theme-choice-preview__name { width: 46%; height: .28rem; border-radius: 2px; background: var(--preview-text); }
.theme-choice-preview__description { width: 72%; height: .2rem; border-radius: 2px; background: color-mix(in srgb, var(--preview-text) 35%, transparent); }
.theme-choice-preview__button { grid-column: 1 / -1; height: 1rem; margin: 0 .12rem; border-radius: .32rem; background: var(--preview-accent); }
.theme-choice-preview__button.is-secondary { opacity: .48; }

.theme-choice-preview.is-compact {
    height: 4.4rem;
    grid-template-columns: 1.25rem 1fr;
    grid-template-rows: 1.25rem auto;
    padding: .6rem;
}

.theme-choice-preview.is-compact .theme-choice-preview__avatar { width: 1.25rem; height: 1.25rem; }
.theme-choice-preview.is-compact .theme-choice-preview__name { align-self: center; width: 45%; height: .24rem; }
.theme-choice-preview.is-compact .theme-choice-preview__button { height: .75rem; }

.theme-choice-card--executive .theme-choice-preview__avatar,
.theme-choice-card--terminal .theme-choice-preview__avatar { border-radius: .2rem; }
.theme-choice-card--executive .theme-choice-preview__button,
.theme-choice-card--terminal .theme-choice-preview__button { border-radius: .15rem; }
.theme-choice-card--editorial .theme-choice-preview::before,
.theme-choice-card--onyx .theme-choice-preview::before { border-radius: 0; }
.theme-choice-card--editorial .theme-choice-preview__avatar,
.theme-choice-card--onyx .theme-choice-preview__avatar { border-radius: 0; }
.theme-choice-card--editorial .theme-choice-preview__button,
.theme-choice-card--onyx .theme-choice-preview__button { border-radius: 0; background: transparent; border: 1px solid var(--preview-accent); }
.theme-choice-card--sunset .theme-choice-preview::before { transform: rotate(-1deg); border-radius: 1rem; }
.theme-choice-card--sunset .theme-choice-preview__avatar { border-radius: 35% 65% 58% 42%; }
.theme-choice-card--sunset .theme-choice-preview__button,
.theme-choice-card--glassmorphism .theme-choice-preview__button { border-radius: 999px; }
.theme-choice-card--glassmorphism .theme-choice-preview::before { opacity: .72; border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.theme-choice-card--forest .theme-choice-preview::before { border-radius: 1rem .35rem 1rem .35rem; }
.theme-choice-card--forest .theme-choice-preview__avatar { border-radius: 40% 60% 45% 55%; }
.theme-choice-card--forest .theme-choice-preview__button { border-radius: .7rem .2rem .7rem .2rem; }

/* Bio Page content builder */
.content-add-panel {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 7%, var(--surface)), var(--surface));
}
.content-add-panel__eyebrow { display: block; margin-bottom: .2rem; color: var(--text-primary); font-size: .7rem; font-weight: 750; }
.content-add-panel__copy { max-width: 27rem; color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.content-add-panel__actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.content-add-button {
    min-height: 2.75rem;
    padding: .65rem .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    color: var(--text-primary);
    background: var(--surface);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.content-add-button:hover { border-color: color-mix(in srgb, var(--color-accent) 40%, var(--border)); transform: translateY(-1px); }
.content-add-button--primary { color: #fff; border-color: var(--color-accent); background: var(--color-accent); }
.block-order-button,
.block-delete-button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .4rem; color: var(--text-muted); font-size: .65rem; }
.block-edit-button { min-height: 2.75rem; }
.block-order-button:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-muted); }
.block-order-button:disabled { opacity: .25; cursor: not-allowed; }

/* Widget library and configurator */
.widget-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(4px);
}
.widget-library-dialog,
.widget-config-dialog {
    width: min(100%, 68rem);
    max-height: min(90dvh, 54rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    box-shadow: 0 30px 80px -25px rgba(15, 23, 42, .55);
}
.widget-library-dialog { width: min(100%, 56rem); }
.widget-dialog-header {
    padding: 1.15rem 1.35rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border-light);
}
.widget-dialog-header h4 { margin: .1rem 0 .25rem; font-size: 1.08rem; font-weight: 780; letter-spacing: -.02em; }
.widget-dialog-header p { max-width: 34rem; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
.widget-dialog-eyebrow { display: block; color: var(--color-accent); font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.widget-dialog-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--border)); border-radius: .7rem; }
.widget-dialog-close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--text-muted); border-radius: 50%; }
.widget-dialog-close:hover { color: var(--text-primary); background: var(--surface-muted); }

.widget-library-grid { padding: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; overflow-y: auto; }
.widget-library-card { position: relative; min-height: 8rem; padding: .9rem 2.5rem .9rem .9rem; display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; text-align: left; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.widget-library-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border)); box-shadow: 0 14px 30px -26px rgba(15,23,42,.7); }
.widget-library-card__preview { height: 5.2rem; padding: .7rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--color-accent) 13%, var(--border)); border-radius: .65rem; overflow: hidden; }
.widget-library-card__preview > i { margin-bottom: .2rem; font-size: .9rem; }
.widget-library-card__preview > span { display: block; height: .28rem; width: 75%; border-radius: 999px; background: currentColor; opacity: .2; }
.widget-library-card__preview > span:nth-of-type(2) { width: 95%; }
.widget-library-card__preview > span:nth-of-type(3) { width: 52%; height: .75rem; opacity: .65; }
.widget-library-card--gallery .widget-library-card__preview { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 1fr 1fr; }
.widget-library-card--gallery .widget-library-card__preview i { grid-column: 1 / -1; }
.widget-library-card--gallery .widget-library-card__preview span { width: 100%; height: 100%; border-radius: .2rem; }
.widget-library-card--countdown .widget-library-card__preview { flex-direction: row; align-items: center; }
.widget-library-card--countdown .widget-library-card__preview i { margin: 0 .25rem 0 0; }
.widget-library-card--countdown .widget-library-card__preview span { width: 1.1rem; height: 1.7rem; border-radius: .25rem; opacity: .35; }
.widget-library-card__content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; }
.widget-library-card__category { color: var(--color-accent); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.widget-library-card__content strong { font-size: .82rem; }
.widget-library-card__content small { color: var(--text-muted); font-size: .66rem; line-height: 1.45; }
.widget-library-card__arrow { position: absolute; right: 1rem; color: var(--text-muted); font-size: .7rem; }

.widget-config-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); flex: 1; overflow: hidden; }
.widget-config-form { padding: 1.25rem 1.35rem 2rem; overflow-y: auto; }
.widget-form-section { display: flex; flex-direction: column; gap: 1rem; }
.widget-field { min-width: 0; display: flex; flex-direction: column; gap: .38rem; }
.widget-field > label,
.widget-section-label { color: var(--text-secondary); font-size: .67rem; font-weight: 750; line-height: 1.3; }
.widget-field > label { display: flex; align-items: center; gap: .4rem; }
.widget-field > label span,
.widget-section-label span { color: var(--text-muted); font-size: .55rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.widget-field > small { align-self: flex-end; color: var(--text-muted); font-size: .58rem; line-height: 1.3; }
.widget-field > small.is-error,
.widget-form-error { align-self: flex-start; color: #b91c1c; }
.widget-input {
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem .8rem;
    color: var(--text-primary);
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: .6rem;
    font: inherit;
    font-size: .75rem;
    line-height: 1.45;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
textarea.widget-input { min-height: 5rem; resize: vertical; }
.widget-input:focus { outline: none; border-color: var(--color-accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 13%, transparent); }
.widget-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.widget-social-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.widget-segmented { padding: .2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: .65rem; }
.widget-segmented button { min-height: 2.35rem; padding: .45rem .7rem; color: var(--text-muted); border-radius: .45rem; font-size: .68rem; font-weight: 700; }
.widget-segmented button.is-selected { color: var(--text-primary); background: var(--surface); box-shadow: 0 2px 8px -5px rgba(15,23,42,.5); }
.widget-form-divider { position: relative; margin: .2rem 0; text-align: center; }
.widget-form-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-light); }
.widget-form-divider span { position: relative; padding: 0 .65rem; color: var(--text-muted); background: var(--surface); font-size: .57rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.widget-secondary-button,
.widget-text-button { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: .65rem; font-weight: 700; cursor: pointer; }
.widget-secondary-button { padding: .55rem .75rem; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: .55rem; }
.widget-secondary-button:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border)); }
.widget-secondary-button:disabled,
.widget-secondary-button.is-disabled { opacity: .45; cursor: not-allowed; }
.widget-text-button { padding: .4rem; color: var(--text-muted); }
.widget-text-button:hover { color: #b91c1c; }
.widget-image-control { display: flex; align-items: center; gap: .75rem; }
.widget-image-control__preview { width: 6rem; height: 4.5rem; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; color: var(--text-muted); background: var(--surface-muted); border: 1px dashed var(--border); border-radius: .65rem; }
.widget-image-control__preview img { width: 100%; height: 100%; object-fit: cover; }
.widget-image-control > div { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.widget-info-callout { padding: .85rem; display: flex; gap: .7rem; color: var(--text-secondary); background: color-mix(in srgb, var(--color-accent) 6%, var(--surface-muted)); border: 1px solid color-mix(in srgb, var(--color-accent) 13%, var(--border)); border-radius: .65rem; }
.widget-info-callout > i { margin-top: .1rem; color: var(--color-accent); }
.widget-info-callout p { display: flex; flex-direction: column; gap: .18rem; font-size: .65rem; line-height: 1.45; }
.widget-info-callout span { color: var(--text-muted); }
.widget-repeater { display: flex; flex-direction: column; gap: .65rem; }
.widget-repeater-row,
.widget-faq-editor { padding: .75rem; display: grid; gap: .7rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: .7rem; }
.widget-repeater-row { grid-template-columns: 4.5rem 1fr auto; align-items: center; }
.widget-repeater-row > img { width: 4.5rem; height: 3.5rem; object-fit: cover; border-radius: .45rem; }
.widget-faq-editor { position: relative; padding-top: 1rem; }
.widget-faq-editor legend { padding: 0 .35rem; color: var(--text-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.widget-repeater-actions { display: flex; gap: .2rem; }
.widget-repeater-actions button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--text-muted); border-radius: .4rem; font-size: .6rem; }
.widget-repeater-actions button:hover:not(:disabled) { color: var(--text-primary); background: var(--surface); }
.widget-repeater-actions button.is-danger:hover { color: #b91c1c; background: #fef2f2; }
.widget-repeater-actions button:disabled { opacity: .3; }

.widget-live-preview { padding: 1.25rem; overflow-y: auto; background: var(--surface-muted); border-left: 1px solid var(--border-light); }
.widget-live-preview__label { margin-bottom: .7rem; display: flex; justify-content: space-between; color: var(--text-muted); font-size: .58rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.widget-preview-canvas { width: 100%; min-height: 24rem; padding: clamp(1.25rem, 4vw, 2.5rem) 1rem; display: flex; align-items: flex-start; justify-content: center; border: 1px solid var(--bio-surface-border); border-radius: 1rem; overflow: hidden; }
.widget-preview-canvas > .bio-widget { width: min(100%, 22rem); }
.widget-preview-canvas .contents,
.preview-phone-frame .contents { display: contents; }
.widget-preview-empty { width: 100%; padding: 1rem; color: var(--bio-muted); border: 1px dashed var(--bio-plugin-border); border-radius: var(--bio-media-radius); font-size: .65rem; text-align: center; }
.widget-preview-faq { min-height: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--bio-text); font-size: .68rem; font-weight: 700; }

.widget-dialog-footer { padding: .85rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border-light); background: var(--surface); }
.widget-dialog-footer > p { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .62rem; }
.widget-dialog-footer > div { display: flex; gap: .55rem; }
.widget-cancel-button,
.widget-save-button { min-height: 2.75rem; padding: .65rem 1rem; border-radius: .6rem; font-size: .7rem; font-weight: 750; }
.widget-cancel-button { color: var(--text-secondary); background: var(--surface-muted); border: 1px solid var(--border); }
.widget-save-button { display: inline-flex; align-items: center; gap: .45rem; color: #fff; background: var(--color-accent); border: 1px solid var(--color-accent); }
.widget-save-button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 760px) {
    .content-add-panel { align-items: flex-start; flex-direction: column; }
    .content-add-panel__actions { width: 100%; }
    .content-add-button { flex: 1; }
    .widget-dialog-backdrop { padding: .5rem; align-items: flex-end; }
    .widget-library-dialog,
    .widget-config-dialog { max-height: 94dvh; border-radius: 1rem 1rem .35rem .35rem; }
    .widget-library-grid { grid-template-columns: 1fr; }
    .widget-config-layout { display: flex; flex-direction: column; overflow-y: auto; }
    .widget-config-form { overflow: visible; }
    .widget-live-preview { order: -1; padding: .9rem 1.25rem; overflow: visible; border-left: 0; border-bottom: 1px solid var(--border-light); }
    .widget-preview-canvas { min-height: 11rem; max-height: 17rem; overflow-y: auto; }
    .widget-dialog-footer { position: sticky; bottom: 0; }
    .widget-dialog-footer > p { display: none; }
    .widget-dialog-footer > div { width: 100%; }
    .widget-cancel-button,
    .widget-save-button { flex: 1; }
    .block-builder-row { flex-wrap: wrap; gap: .65rem; }
    .block-row-actions { width: 100%; padding: .55rem 0 0; justify-content: flex-end; border-left: 0; border-top: 1px solid var(--border-light); }
}

@media (max-width: 520px) {
    .widget-field-grid,
    .widget-social-fields { grid-template-columns: 1fr; }
    .widget-repeater-row { grid-template-columns: 3.5rem 1fr; }
    .widget-repeater-row > img { width: 3.5rem; height: 3.5rem; }
    .widget-repeater-row .widget-repeater-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-choice-card { transition: none; }
    .theme-choice-card:hover { transform: none; }
    .widget-library-card,
    .content-add-button { transition: none; transform: none !important; }
}