:root {
    color-scheme: light;
    --app-accent: #f97316;
    --app-ink: #16202a;
    --app-muted: #667085;
    --app-line: #e6e9ef;
    --app-panel: #ffffff;
    --app-soft: #f7f8fb;
    --app-shadow: 0 18px 50px rgba(22, 32, 42, 0.08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--app-ink);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 44%, #f5f7fb 100%);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.file-button {
    border: 0;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.app-shell {
    min-height: 100vh;
}

.app-footer {
    padding: 12px 20px 18px;
    color: var(--app-muted);
    background: #f4f7fb;
    text-align: center;
}

.app-footer small {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: .72rem;
}

.app-footer a {
    color: inherit;
    text-decoration: none;
}

.app-footer a:hover,
.app-footer a:focus-visible {
    color: var(--app-ink);
    text-decoration: underline;
}

.connect-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #f7f8fb;
}

.discovery-screen {
    min-height: 100vh;
    padding: 28px;
}

.reveal-screen {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(560px, 1fr) auto;
    gap: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at 50% -10%, rgba(249, 115, 22, 0.10), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
}

.reveal-screen[hidden] {
    display: none;
}

.reveal-header {
    width: min(1440px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(170px, .55fr) minmax(360px, 1.5fr) minmax(260px, .8fr);
    gap: 24px;
    align-items: center;
    padding: 8px 4px 2px;
}

.reveal-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--app-ink);
    font-weight: 900;
}

.reveal-copy {
    text-align: center;
}

.reveal-copy h1 {
    margin: 0;
    color: var(--app-ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.reveal-summary {
    max-width: 660px;
    margin: 10px auto 0;
    color: var(--app-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.reveal-metrics {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.reveal-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 750;
}

.reveal-metrics strong {
    color: var(--app-ink);
    font-size: .9rem;
}

.reveal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.reveal-primary-action {
    min-height: 48px;
    padding-inline: 22px;
    box-shadow: 0 14px 30px rgba(249, 115, 22, .24);
}

.reveal-preview-shell {
    width: min(1440px, 100%);
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 42px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .13);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 32px 90px rgba(15, 23, 42, .18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms ease, transform 260ms ease;
}

.reveal-screen.is-ready .reveal-preview-shell {
    opacity: 1;
    transform: translateY(0);
}

.reveal-browser-bar {
    display: grid;
    grid-template-columns: repeat(3, 9px) minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: #f8fafc;
}

.reveal-browser-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
}

.reveal-browser-bar strong {
    min-width: 0;
    margin-left: 5px;
    overflow: hidden;
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reveal-frame {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
    background: #ffffff;
}

.reveal-status {
    min-height: 20px;
    margin: 0;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.connect-card {
    width: min(680px, 100%);
    display: grid;
    gap: 18px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--app-shadow);
    padding: clamp(24px, 4vw, 36px);
}

.connect-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.connect-title-row h1 {
    max-width: none;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.connect-card > .intro {
    max-width: 620px;
    margin-bottom: 2px;
    color: var(--app-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.connection-help {
    margin: -4px 0 0;
    color: var(--app-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.connection-help a {
    color: var(--app-ink);
    font-weight: 700;
    text-underline-offset: 2px;
}

.connection-help a:hover {
    color: var(--app-accent);
}

.connection-help a:focus-visible {
    border-radius: 3px;
    outline: 3px solid rgba(249, 115, 22, .2);
    outline-offset: 2px;
}

#connection-message:empty {
    display: none;
}

.discovery-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.discovery-header,
.discovery-card,
.discovery-card-main,
.discovery-card-actions,
.discovery-title-row,
.discovery-actions {
    display: flex;
    align-items: center;
}

.discovery-header {
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(22, 32, 42, .06);
    padding: 18px 20px;
}

.discovery-header h1 { max-width: none; font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.08; letter-spacing: -.025em; }
.discovery-header .intro { margin: 7px 0 0; font-size: .94rem; line-height: 1.45; }

.discovery-actions,
.discovery-card-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.discovery-group {
    display: grid;
    gap: 12px;
}

.discovery-group-heading h2 {
    font-size: 1rem;
}

.discovery-products {
    display: grid;
    gap: 12px;
}

.discovery-card {
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
}

.discovery-card-main {
    min-width: 0;
    gap: 14px;
}

.discovery-card h3 {
    margin: 0;
    font-size: 1rem;
}

.discovery-card p {
    margin: 6px 0 0;
    color: var(--app-muted);
    line-height: 1.45;
}

.discovery-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--app-soft);
}

.discovery-avatar.is-empty {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: var(--app-accent);
    font-weight: 900;
}

.discovery-title-row {
    gap: 10px;
    flex-wrap: wrap;
}

.status-pill {
    border: 1px solid var(--app-line);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.status-pill[data-status="published"] {
    border-color: #bbf7d0;
    color: #166534;
    background: #f0fdf4;
}

.status-pill[data-status="draft"] {
    border-color: #fed7aa;
    color: #9a3412;
    background: #fff7ed;
}

.status-pill[data-status="unpublished"] {
    border-color: var(--app-line);
    color: var(--app-muted);
    background: var(--app-soft);
}

.discovery-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.discovery-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--app-line);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.discovery-metrics strong {
    color: var(--app-ink);
}

.brand-lockup,
.brand,
.toolbar-actions,
.toolbar-controls,
.token-control,
.inline-controls,
.import-first,
.preview-bar,
.section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--app-accent), #fb923c);
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.26);
}

.brand-title {
    display: grid;
    gap: 1px;
}

.brand-title span,
.eyebrow,
.intro,
.message,
.app-message,
.hint,
.field small,
.section-select span,
.panel-header p {
    color: var(--app-muted);
}

.brand-title strong {
    font-size: 16px;
}

.eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    max-width: 650px;
    font-size: clamp(2.2rem, 5.8vw, 4.5rem);
    line-height: 0.96;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

h3 {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.intro {
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.connection-form,
.field,
.field-group,
.panel-body,
.section-list,
.dynamic-list,
.indexed-fields {
    display: grid;
    gap: 12px;
}

.field label,
.connection-form label,
.product-picker span {
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.input,
.select,
.textarea,
.token-control input {
    width: 100%;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--app-ink);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input,
.select,
.token-control input {
    min-height: 42px;
    padding: 0 12px;
}

.textarea {
    min-height: 108px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.5;
}

.editable-field {
    background:
        linear-gradient(180deg, rgba(255, 251, 235, 0.72), rgba(255, 255, 255, 0.96)),
        #ffffff;
    border-color: rgba(217, 119, 6, 0.34);
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.07);
}

.input:focus,
.select:focus,
.textarea:focus,
.token-control input:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.token-control input {
    flex: 1;
}

.primary-button,
.secondary-button,
.file-button,
.section-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0 16px;
    font-weight: 850;
    text-decoration: none;
}

.primary-button {
    color: #ffffff;
    background: var(--app-accent);
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22);
}

.secondary-button,
.file-button,
.section-actions button {
    border: 1px solid var(--app-line);
    color: var(--app-ink);
    background: #ffffff;
}

.file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.message,
.app-message {
    min-height: 22px;
    font-size: 0.92rem;
    font-weight: 750;
}

.message[data-type="error"],
.app-message[data-type="error"] {
    color: #9f2d2d;
}

.message[data-type="success"],
.app-message[data-type="success"] {
    color: #28633f;
}

.message[data-type="warning"],
.app-message[data-type="warning"] {
    color: #8a5a1d;
}

.studio {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.topbar {
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--app-line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
}

.toolbar-controls {
    justify-content: center;
    min-width: 0;
}

.toolbar-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.segmented {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: #f8fafc;
}

.segment {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 850;
}

.segment[aria-pressed="true"] {
    background: #ffffff;
    color: var(--app-ink);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

.product-picker {
    width: min(300px, 28vw);
    display: grid;
    gap: 4px;
}

.app-message {
    padding: 8px 18px;
    border-bottom: 1px solid var(--app-line);
    background: #fffaf0;
}

.workspace {
    --studio-left-panel: 370px;
    --studio-right-panel: 380px;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--studio-left-panel) 8px minmax(380px, 1fr) 8px var(--studio-right-panel);
    gap: 9px;
    padding: 18px;
    overflow: hidden;
}

.panel,
.preview-stage {
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--app-shadow);
}

.panel {
    overflow-y: auto;
}

.panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--app-line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.panel-header-copy {
    min-width: 0;
}

.panel-header-copy > :first-child {
    margin-top: 0;
}

.panel-window-actions,
.collapsed-panel-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.panel-window-actions button {
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    color: var(--app-muted);
    background: #fff;
    font-size: .9rem;
    font-weight: 900;
    cursor: pointer;
}

.panel-window-actions button:hover,
.panel-window-actions button:focus-visible {
    border-color: var(--app-accent);
    color: var(--app-accent);
    outline: none;
}

.panel-resizer {
    position: relative;
    min-width: 8px;
    cursor: col-resize;
    touch-action: none;
}

.panel-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 52px;
    border-radius: 999px;
    background: #cbd5e1;
    transform: translate(-50%, -50%);
    transition: height .15s ease, background-color .15s ease;
}

.panel-resizer:hover::before,
.panel-resizer:focus-visible::before {
    height: 76px;
    background: var(--app-accent);
}

.panel-resizer:focus-visible {
    outline: none;
}

body.is-resizing-panel {
    cursor: col-resize;
    user-select: none;
}

@media (min-width: 1181px) {
    .workspace.is-left-collapsed {
        grid-template-columns: 0 0 minmax(380px, 1fr) 8px var(--studio-right-panel);
    }

    .workspace.is-right-collapsed {
        grid-template-columns: var(--studio-left-panel) 8px minmax(380px, 1fr) 0 0;
    }

    .workspace.is-left-collapsed.is-right-collapsed {
        grid-template-columns: 0 0 minmax(380px, 1fr) 0 0;
    }

    .workspace.is-left-collapsed .structure-panel,
    .workspace.is-left-collapsed .panel-resizer-left,
    .workspace.is-right-collapsed .settings-panel,
    .workspace.is-right-collapsed .panel-resizer-right {
        visibility: hidden;
        pointer-events: none;
    }
}

.panel-body {
    padding: 18px;
}

.section-row,
.indexed-fields {
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: #ffffff;
}

.section-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    box-shadow: 0 8px 18px rgba(22, 32, 42, 0.04);
}

.section-row.is-selected {
    border-color: var(--app-accent);
    background: #fffaf5;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.14);
}

.section-row.is-hidden {
    opacity: 0.62;
}

.composer-row-card {
    position: relative;
    gap: 11px;
    padding: 11px;
    border-color: rgba(214, 220, 230, 0.95);
    background: #f9fafb;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.composer-row-card:nth-child(even) {
    background: #f5f7fa;
}

.composer-row-card.is-selected {
    border-color: rgba(249, 115, 22, 0.58);
    background: #fffaf5;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.16), 0 10px 22px rgba(22, 32, 42, 0.06);
}

.composer-row-card.is-dragging {
    opacity: 0.55;
}

.composer-row-card.is-drop-before::before,
.composer-row-card.is-drop-after::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 3px;
    border-radius: 999px;
    background: var(--app-accent);
}

.composer-row-card.is-drop-before::before {
    top: -7px;
}

.composer-row-card.is-drop-after::after {
    bottom: -7px;
}

.composer-row-heading {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.composer-row-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.composer-row-heading .section-actions {
    min-width: 0;
    flex-wrap: nowrap;
}

.composer-row-heading .section-actions button {
    white-space: nowrap;
}

.composer-row-heading strong {
    flex: 0 0 auto;
    color: var(--app-ink);
    font-size: 0.92rem;
    line-height: 1.25;
    white-space: nowrap;
}

.composer-row-drag-handle {
    width: 24px;
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    color: #98a2b3;
    background: transparent;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.composer-row-drag-handle:active {
    cursor: grabbing;
}

.composer-row-drag-handle:hover,
.composer-row-drag-handle:focus-visible {
    color: var(--app-accent);
    background: #fff7ed;
    outline: none;
}

.composer-layout-badge {
    width: fit-content;
    max-width: 118px;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(214, 220, 230, 0.9);
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-row-heading span,
.composer-slot-label,
.composer-empty-slot,
.composer-block em {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.composer-row-layout {
    display: grid;
    gap: 5px;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
}

.composer-row-layout .select {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.composer-slots {
    display: grid;
    gap: 8px;
}

.composer-slot {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(230, 233, 239, 0.9);
    border-radius: 12px;
    background: #ffffff;
}

.composer-slot-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.composer-block {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    background: #fbfcfe;
    text-align: left;
}

.composer-block-shell {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 3px;
    border-radius: 12px;
}

.composer-block-drag-handle {
    width: 22px;
    min-height: 30px;
    border: 0;
    border-radius: 8px;
    color: #98a2b3;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.composer-block-drag-handle:active {
    cursor: grabbing;
}

.composer-block-drag-handle:hover,
.composer-block-drag-handle:focus-visible {
    color: var(--app-accent);
    background: #fff7ed;
    outline: none;
}

.composer-block-shell.is-block-dragging {
    opacity: 0.55;
}

.composer-block-shell.is-block-drop-before::before,
.composer-block-shell.is-block-drop-after::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    height: 2px;
    border-radius: 999px;
    background: var(--app-accent);
}

.composer-block-shell.is-block-drop-before::before {
    top: -4px;
}

.composer-block-shell.is-block-drop-after::after {
    bottom: -4px;
}

.composer-slot.is-block-drop-target {
    border-color: rgba(249, 115, 22, 0.55);
    background: #fffaf5;
}

.composer-slot.is-block-drop-invalid {
    border-color: rgba(220, 38, 38, 0.55);
    background: #fff5f5;
}

.composer-block-actions {
    min-width: 0;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.composer-block-actions button {
    min-height: 24px;
    padding: 0 7px;
    border: 0;
    border-radius: 7px;
    color: var(--app-muted);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

.composer-block-actions button:hover,
.composer-block-actions button:focus-visible {
    color: var(--app-accent);
    background: #fff7ed;
    outline: none;
}

.composer-block-actions button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.composer-block:hover,
.composer-block:focus-visible,
.composer-block.is-selected {
    border-color: rgba(249, 115, 22, 0.36);
    background: #fffaf5;
    outline: none;
}

.composer-block.is-selected {
    box-shadow: inset 3px 0 0 var(--app-accent);
}

.composer-block.is-hidden {
    opacity: 0.62;
}

.composer-block strong,
.composer-block em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    color: var(--app-muted);
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 950;
}

.composer-add-block {
    min-height: 36px;
    border: 1px dashed var(--app-line);
    border-radius: 10px;
    color: var(--app-muted);
    background: #fbfcfe;
    font-size: 0.82rem;
    font-weight: 850;
}

.composer-add-block:hover,
.composer-add-block:focus-visible {
    border-color: rgba(249, 115, 22, 0.5);
    color: var(--app-accent);
    background: #fffaf5;
    outline: none;
}

.composer-block-picker {
    display: grid;
    gap: 8px;
}

.composer-block-picker label {
    display: grid;
    gap: 5px;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
}

.composer-block-picker .select {
    min-height: 34px;
    border-radius: 10px;
    font-size: 0.82rem;
}

.composer-empty-slot,
.structure-empty {
    padding: 8px;
    border: 1px dashed var(--app-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.composer-validation {
    padding: 8px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #9a3412;
    background: #fff7ed;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.section-select {
    min-width: 0;
    min-height: 0;
    display: block;
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

.section-select strong {
    display: block;
    overflow: hidden;
    color: var(--app-ink);
    font-size: 0.92rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-row-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.section-row-meta > span {
    min-width: 0;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.section-row-meta > .section-visibility[data-visible="true"] {
    color: #15803d;
}

.section-actions {
    flex: 0 0 auto;
    gap: 4px;
}

.section-actions button {
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    font-size: 0.75rem;
}

.section-actions .section-arrow {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.section-actions .section-arrow:hover:not(:disabled),
.section-actions .section-arrow:focus-visible {
    color: var(--app-accent);
    background: rgba(249, 115, 22, 0.08);
    outline: none;
}

.section-actions .section-arrow:disabled {
    color: #b6beca;
    background: transparent;
}

.section-actions .section-remove {
    font-size: 0.92rem;
}

.field-group {
    padding: 14px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: #ffffff;
}

.field-group-title {
    color: #344054;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-settings-accordion {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: var(--app-panel);
    box-shadow: 0 8px 22px rgba(22, 32, 42, .045);
}

.page-settings-accordion-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    color: var(--app-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.page-settings-accordion-toggle > span:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.page-settings-accordion-toggle strong {
    font-size: .9rem;
}

.page-settings-accordion-toggle small {
    overflow: hidden;
    color: var(--app-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-settings-accordion-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-accent) 28%, transparent);
    outline-offset: -3px;
}

.page-settings-accordion-indicator {
    flex: 0 0 auto;
    color: var(--app-muted);
    font-size: 1rem;
    transition: transform .16s ease;
}

.page-settings-accordion.is-expanded .page-settings-accordion-indicator {
    transform: rotate(180deg);
}

.page-settings-accordion-content {
    display: grid;
    gap: 12px;
    padding: 0 12px 12px;
    border-top: 1px solid var(--app-line);
}

.page-settings-accordion-content > .field-group:first-child {
    margin-top: 12px;
}

.page-settings-close {
    justify-self: start;
}

.page-settings-section-hint {
    margin: 0;
}

.indexed-fields {
    padding: 12px;
    background: #fbfcfe;
}

.toolbar-field {
    display: grid;
    gap: 8px;
}

.text-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #fbfcfe;
}

.format-button {
    min-width: 31px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #475467;
    background: transparent;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.format-button:hover {
    border-color: #d0d5dd;
    background: #ffffff;
}

.format-button:focus-visible,
.toolbar-select select:focus-visible,
.toolbar-select input:focus-visible {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.format-button.is-active,
.format-button[aria-pressed="true"] {
    border-color: rgba(249, 115, 22, 0.34);
    color: #9a3412;
    background: #fff7ed;
}

.format-button.align-button {
    font-size: 14px;
}

.toolbar-select {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 850;
}

.toolbar-select select,
.toolbar-select input {
    min-height: 30px;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--app-ink);
    font-size: 12px;
    font-weight: 750;
}

.toolbar-select select {
    max-width: 118px;
    padding: 0 24px 0 8px;
}

.toolbar-select input {
    width: 62px;
    padding: 0 7px;
}

.toolbar-number span::after {
    content: " px";
    font-weight: 750;
}

.toolbar-number input {
    text-align: right;
}

.toolbar-divider {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--app-line);
}

.contrast-note {
    border-radius: 12px;
    padding: 10px;
    color: #8a5a1d;
    background: #fff7ed;
    font-size: 0.88rem;
    font-weight: 750;
}

.contrast-note[data-safe="true"] {
    color: #28633f;
    background: #eef8f1;
}

.product-manager,
.social-editor,
.social-list-editor,
.social-edit-row,
.social-row-copy,
.social-manual-fields {
    display: grid;
    gap: 6px;
}

.social-edit-row {
    padding: 9px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.social-row-main {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: start;
}

.social-icon {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: 0 0 auto;
    color: currentColor;
    opacity: 0.76;
}

.social-row-copy strong,
.social-row-copy span,
.social-row-copy small,
.social-import-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-row-copy strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.social-row-copy span,
.social-import-url,
.social-row-copy small {
    color: var(--app-muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.social-import-url {
    padding-left: 27px;
}

.social-visibility {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 850;
}

.social-mini-actions {
    justify-content: flex-end;
}

.social-mini-actions button {
    min-width: 25px;
    min-height: 25px;
    padding: 0 6px;
    font-size: 0.76rem;
}

.social-manual-fields {
    padding-left: 27px;
}

.social-manual-fields .field {
    gap: 5px;
}

.social-manual-fields .input {
    min-height: 34px;
    border-radius: 9px;
}

.compatibility-note {
    border: 1px solid #f0dca8;
    border-radius: 10px;
    color: #694c10;
    background: #fffaf0;
    font-size: 0.82rem;
    line-height: 1.4;
    padding: 8px 10px;
}

.compatibility-note summary {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.compatibility-note p {
    margin: 6px 0 0;
}

.product-manager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #fbfcfe;
}

.check-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
}

.check-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-actions {
    display: flex;
    gap: 4px;
}

.mini-actions button {
    min-width: 30px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.78rem;
}

.profile-studio-nav {
    display: grid;
    gap: 18px;
}

.profile-layout-picker {
    display: grid;
    gap: 8px;
}

.profile-layout-choice {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--app-ink);
    text-align: left;
}

.profile-layout-choice:hover,
.profile-layout-choice:focus-visible,
.profile-layout-choice.is-selected {
    border-color: rgba(249, 115, 22, 0.55);
    background: #fffaf5;
    outline: none;
}

.profile-layout-choice strong,
.profile-layout-choice em,
.profile-area-button,
.profile-media-option strong,
.profile-media-option em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-layout-choice strong {
    font-size: 0.9rem;
}

.profile-layout-choice em,
.profile-media-option em {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.3;
}

.profile-layout-thumb {
    height: 54px;
    display: grid;
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    background: #f2f4f7;
}

.profile-layout-thumb i {
    display: block;
    border-radius: 999px;
    background: #98a2b3;
}

.profile-layout-thumb-center i:first-child,
.profile-layout-thumb-avatar i:first-child {
    width: 24px;
    height: 24px;
    justify-self: center;
    border-radius: 50%;
    background: var(--app-accent);
}

.profile-layout-thumb-split {
    grid-template-columns: 1.3fr 0.7fr;
}

.profile-layout-thumb-grid,
.profile-layout-thumb-mosaic {
    grid-template-columns: repeat(2, 1fr);
}

.profile-layout-thumb-grid i,
.profile-layout-thumb-mosaic i {
    min-height: 14px;
}

.profile-layout-thumb-lines i,
.profile-layout-thumb-stack i,
.profile-layout-thumb-brand i {
    height: 7px;
}

.profile-layout-thumb-brand i:first-child {
    height: 4px;
    background: var(--app-accent);
}

.profile-area-nav {
    display: grid;
    gap: 6px;
}

.profile-area-button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--app-muted);
    font-weight: 850;
    text-align: left;
}

.profile-area-button:hover,
.profile-area-button:focus-visible,
.profile-area-button.is-selected {
    background: #fff7ed;
    color: var(--app-ink);
    outline: none;
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #344054;
    font-size: 0.9rem;
    font-weight: 800;
}

.profile-tone-control {
    gap: 7px;
}

.profile-tone-label,
.profile-tone-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-tone-label output {
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.profile-tone-track {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 30px;
}

.profile-tone-track input[type="range"] {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 30px;
    margin: 0;
    accent-color: var(--app-accent);
    cursor: pointer;
}

.profile-tone-marker {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 12px;
    border-radius: 999px;
    background: #667085;
    transform: translateX(-50%);
    pointer-events: none;
}

.profile-tone-scale {
    color: #667085;
    font-size: 10px;
    font-weight: 750;
}

.profile-tone-scale span:nth-child(2) {
    color: #344054;
}

.profile-tone-reset {
    min-height: 34px;
    justify-self: start;
}

.profile-product-list,
.profile-product-row-body,
.profile-media-list {
    display: grid;
    gap: 8px;
}

.profile-product-row {
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #fbfcfe;
    overflow: hidden;
}

.profile-product-row summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.profile-product-row summary > span {
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 850;
}

.profile-product-row-body {
    padding: 0 10px 10px;
}

.profile-media-option {
    display: grid;
    grid-template-columns: auto 48px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #ffffff;
}

.profile-media-option:has(input:checked) {
    border-color: rgba(249, 115, 22, 0.5);
    background: #fffaf5;
}

.preview-stage {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.preview-bar {
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-line);
}

.profile-publishing-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--app-line);
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
}

.profile-publishing-copy {
    min-width: 0;
}

.profile-publishing-copy h2 {
    margin: 2px 0 4px;
    font-size: 1rem;
    line-height: 1.25;
}

.profile-publishing-copy p,
.profile-publishing-count {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.profile-publishing-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.status-pill[data-status="error"] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.profile-publishing-warnings {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.88);
}

.profile-publishing-warnings strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-publishing-warnings ul {
    margin: 0;
    padding-left: 18px;
    color: #344054;
    font-size: 0.84rem;
    line-height: 1.45;
}

.profile-publishing-warning-blocking strong {
    color: #991b1b;
}

.profile-publishing-warning-nonblocking strong {
    color: #9a3412;
}

.profile-readiness {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #ffffff;
}

.profile-readiness strong {
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
}

.profile-readiness span {
    color: var(--app-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.profile-readiness[data-readiness="success"] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.profile-readiness[data-readiness="success"] strong {
    color: #166534;
}

.profile-readiness[data-readiness="warning"] {
    border-color: #fed7aa;
    background: #fff7ed;
}

.profile-readiness[data-readiness="warning"] strong {
    color: #9a3412;
}

.profile-readiness[data-readiness="error"] {
    border-color: #fecaca;
    background: #fef2f2;
}

.profile-readiness[data-readiness="error"] strong {
    color: #991b1b;
}

.profile-diagnostic-scroll {
    display: grid;
    gap: 12px;
    max-height: min(260px, 30vh);
    overflow: auto;
    padding: 2px 4px 6px 0;
    scrollbar-gutter: stable;
}

.profile-diagnostic-collapsed {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #ffffff;
}

.profile-diagnostic-collapsed > summary {
    cursor: pointer;
    color: var(--app-ink);
    font-size: 0.82rem;
    font-weight: 900;
}

.profile-diagnostic-collapsed > summary span {
    display: inline-flex;
    min-width: 20px;
    min-height: 20px;
    margin-left: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--app-soft);
    color: var(--app-muted);
    font-size: 0.72rem;
}

.profile-diagnostic-collapsed[open] > summary {
    margin-bottom: 10px;
}

.profile-diagnostic-group {
    display: grid;
    gap: 10px;
}

.profile-diagnostic-group h3 {
    margin: 4px 0 0;
    font-size: 0.84rem;
    line-height: 1.25;
}

.profile-diagnostic-section {
    display: grid;
    gap: 8px;
}

.profile-diagnostic-section h4 {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-diagnostic-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #ffffff;
}

.profile-diagnostic-card[data-category="blocking"] {
    border-color: #fecaca;
}

.profile-diagnostic-card[data-category="cosmetic"] {
    border-color: #fed7aa;
}

.profile-diagnostic-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.profile-diagnostic-card-head strong {
    margin: 0;
    color: var(--app-ink);
    font-size: 0.86rem;
    letter-spacing: 0;
    text-transform: none;
}

.profile-diagnostic-card-head span {
    border: 1px solid var(--app-line);
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 900;
}

.profile-diagnostic-card dl,
.profile-diagnostic-dev-grid {
    display: grid;
    gap: 7px;
    margin: 0;
}

.profile-diagnostic-card dl div,
.profile-diagnostic-dev-grid div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
}

.profile-diagnostic-card dt,
.profile-diagnostic-dev-grid dt {
    color: var(--app-muted);
    font-size: 0.76rem;
    font-weight: 900;
}

.profile-diagnostic-card dd,
.profile-diagnostic-dev-grid dd {
    min-width: 0;
    margin: 0;
    color: #344054;
    font-size: 0.82rem;
    line-height: 1.45;
}

.profile-diagnostic-card code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.profile-diagnostic-card-details {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 8px;
}

.profile-diagnostic-card-details summary {
    cursor: pointer;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-diagnostic-developer {
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    padding-top: 10px;
}

.profile-diagnostic-developer summary {
    cursor: pointer;
    color: var(--app-ink);
    font-size: 0.84rem;
    font-weight: 900;
}

.profile-diagnostic-raw {
    margin-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 9px;
}

.profile-diagnostic-raw > summary {
    cursor: pointer;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-diagnostic-raw {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.profile-diagnostic-raw pre {
    max-height: 260px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 0.76rem;
    line-height: 1.45;
}

.profile-publishing-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-publishing-actions .primary-button,
.profile-publishing-actions .secondary-button {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.84rem;
}

.preview-scroll {
    min-height: 0;
    display: grid;
    justify-items: center;
    overflow: auto;
    padding: 20px;
    background: #e9edf3;
}

#preview-frame {
    width: min(100%, 1200px);
    min-height: 100%;
    height: 1200px;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.18);
}

#preview-frame.device-tablet {
    width: min(768px, 100%);
}

#preview-frame.device-mobile {
    width: min(390px, 100%);
}

@media (max-width: 1180px) {
    .panel-resizer,
    .panel-window-actions,
    .collapsed-panel-controls {
        display: none;
    }

    .reveal-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .reveal-copy {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .reveal-brand {
        grid-column: 1;
        grid-row: 2;
    }

    .reveal-actions {
        grid-column: 2;
        grid-row: 2;
    }

    .studio {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .toolbar-controls,
    .toolbar-actions {
        justify-content: flex-start;
    }

    .product-picker {
        width: min(100%, 380px);
    }

    .workspace {
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        gap: 18px;
        overflow: visible;
    }

    .settings-panel {
        grid-column: 1 / -1;
        min-height: 360px;
    }
}

@media (max-width: 760px) {
    .connect-screen,
    .reveal-screen,
    .discovery-screen {
        padding: 16px;
    }

    .reveal-screen {
        grid-template-rows: auto minmax(500px, 1fr) auto;
        gap: 14px;
    }

    .reveal-header {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .reveal-copy,
    .reveal-brand,
    .reveal-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .reveal-copy {
        text-align: left;
    }

    .reveal-summary {
        margin-left: 0;
    }

    .reveal-metrics,
    .reveal-actions {
        justify-content: flex-start;
    }

    .reveal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .reveal-preview-shell {
        min-height: 500px;
        border-radius: 16px;
    }

    #reveal-frame {
        min-height: 500px;
    }

    .brand-lockup,
    .toolbar-controls,
    .toolbar-actions,
    .token-control,
    .inline-controls,
    .import-first,
    .preview-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .discovery-header,
    .discovery-card {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-publishing-panel {
        grid-template-columns: 1fr;
    }

    .profile-publishing-status,
    .profile-publishing-actions {
        justify-content: flex-start;
    }

    .workspace {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .panel,
    .preview-stage {
        border-radius: 14px;
    }

    #preview-frame,
    #preview-frame.device-tablet,
    #preview-frame.device-mobile {
        width: 100%;
        min-width: 0;
        height: 900px;
    }

    .section-row {
        grid-template-columns: 1fr;
    }
}

.product-page-layout-options {
    display: grid;
    gap: 8px;
}

.product-page-layout-card {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.product-page-layout-card:hover,
.product-page-layout-card:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--app-line));
    outline: none;
}

.product-page-layout-card.is-selected {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, var(--panel));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
}

.product-page-layout-card strong {
    font-size: .88rem;
}

.product-page-layout-card span,
.product-page-layout-card em {
    color: var(--muted);
    font-size: .75rem;
    font-style: normal;
    line-height: 1.35;
}

.product-page-layout-card em {
    margin-top: 3px;
    color: var(--ink);
    font-weight: 750;
}

.legacy-design-note,
.legacy-layout-note {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f2d3a0;
    border-radius: 9px;
    background: #fff9ed;
    color: #74430b;
    font-size: .76rem;
    line-height: 1.4;
}

.legacy-layout-note {
    display: grid;
    gap: 3px;
}

.legacy-layout-note strong,
.legacy-layout-note span,
.legacy-layout-note p {
    margin: 0;
}

/* Local-first page library and focused page workflow. */
.discovery-products { display: grid; gap: 8px; }
.project-publish-guidance { display: grid; gap: 2px; margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--app-accent); background: var(--app-soft); color: var(--app-muted); font-size: .78rem; line-height: 1.4; }
.project-publish-guidance strong { color: var(--app-ink); }
.project-draft-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-soft); }
.project-draft-status > div:first-child { display: grid; gap: 3px; }
.project-draft-status span { color: var(--app-muted); font-size: .82rem; }
.project-draft-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shared-links-account { padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.shared-links-account-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.shared-links-account-summary::-webkit-details-marker { display: none; }
.shared-links-account-summary::after { content: "⌄"; flex: 0 0 auto; color: var(--app-muted); font-size: 1.25rem; font-weight: 800; line-height: 1; transform: rotate(0deg); transition: transform .15s ease; }
.shared-links-account[open] .shared-links-account-summary::after { transform: rotate(180deg); }
.shared-links-account[open] .shared-links-account-summary { margin-bottom: 12px; }
.shared-links-account .discovery-group-heading p { margin: 3px 0 0; color: var(--app-muted); font-size: .8rem; }
#shared-links-manager { display: grid; gap: 12px; }
.shared-link-account-list { display: grid; gap: 7px; }
.shared-link-account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); }
.shared-link-account-row > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 4px 9px; }
.shared-link-account-row strong { color: var(--app-ink); font-size: .86rem; }
.shared-link-account-row span { color: var(--app-muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.shared-link-account-row small { grid-column: 1 / -1; overflow: hidden; color: var(--app-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.shared-link-account-form { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(140px, .6fr) minmax(220px, 1.4fr) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-soft); }
.shared-link-account-form .hint { grid-column: 1 / -1; margin: 0; }
.discovery-card { display: grid; grid-template-columns: minmax(0, 1fr) 132px auto; gap: 12px; padding: 9px 12px; border-radius: 12px; }
.discovery-card-main { gap: 10px; }
.discovery-card h3 { font-size: .94rem; }
.discovery-card p { margin-top: 3px; font-size: .8rem; }
.discovery-product-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.discovery-product-thumbnail { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-soft); }
.discovery-product-thumbnail.is-empty { display: grid; place-items: center; color: var(--app-muted); font-weight: 800; }
.discovery-profile-card .discovery-avatar { width: 52px; height: 52px; }
.discovery-metrics { gap: 5px; margin-top: 7px; }
.discovery-metrics span { padding: 3px 6px; font-size: .68rem; }
.page-library-preview { width: 132px; height: 96px; overflow: hidden; display: block; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-soft); color: var(--app-muted); font-size: .7rem; line-height: 94px; text-align: center; padding: 0; }
.page-library-preview iframe { width: 1280px; height: 930px; border: 0; pointer-events: none; transform: scale(.103125); transform-origin: top left; }
.page-local-state { color: var(--app-muted); font-size: .76rem; font-weight: 750; white-space: nowrap; }
.discovery-actions button:disabled { border-color: var(--app-line); background: var(--app-soft); color: var(--app-muted); opacity: 1; cursor: default; }
#discovery-message:empty { display: none; }
.active-page-identity { min-width: 200px; display: grid; gap: 2px; }
.active-page-identity span { color: var(--app-muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.active-page-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
    .project-draft-status { align-items: stretch; flex-direction: column; }
}

.publish-overlay, .reconnect-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 30px 100px rgba(15,23,42,.28); }
.publish-overlay::backdrop, .reconnect-dialog::backdrop { background: rgba(15,23,42,.68); backdrop-filter: blur(5px); }
.publish-overlay-shell { display: grid; }
.publish-overlay-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--app-line); }
.publish-overlay-shell h2, .reconnect-card h2 { margin: 2px 0 0; }
.publish-confirmation-copy { margin: 0; padding: 18px 20px 0; color: var(--app-muted); line-height: 1.55; }
.publish-overlay-summary { max-height: min(50vh, 420px); overflow: auto; }
.publish-overlay-summary .profile-publishing-panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.publish-unavailable { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.publish-unavailable span { flex: 1; color: var(--app-muted); }
.publish-confirmation-actions { display: flex; justify-content: flex-end; padding: 0 20px 18px; }
.reconnect-dialog { width: min(560px, calc(100vw - 32px)); }
.reconnect-card { display: grid; gap: 16px; padding: 24px; }
.reconnect-actions { display: flex; justify-content: flex-end; gap: 10px; }
.action-dialog-content { display: grid; gap: 12px; color: #344054; line-height: 1.55; }
.action-dialog-content p, .action-dialog-content ul { margin: 0; }
.action-dialog-content ul { padding-left: 20px; }
.action-dialog-secondary { display: flex; justify-content: flex-start; }
.action-dialog-secondary[hidden] { display: none; }
.action-dialog-secondary .secondary-button { font-weight: 700; }
.publish-result { display: grid; gap: 6px; flex: 1; }
.publish-result strong { color: #166534; }
.publish-result[data-result="partial"] strong { color: #9a3412; }
.publish-result a { color: #175cd3; overflow-wrap: anywhere; }
.compatibility-result { display: grid; gap: 7px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-soft); }
.compatibility-result > strong { font-size: .76rem; letter-spacing: .08em; }
.compatibility-result article { display: grid; gap: 3px; }
.compatibility-result h3, .compatibility-result article p { margin: 0; }
.compatibility-result h3 { font-size: .94rem; }
.compatibility-result[data-risk="HIGH"] { border-color: #fecaca; background: #fef2f2; }
.compatibility-result[data-risk="HIGH"] > strong { color: #991b1b; }
.compatibility-result[data-risk="MEDIUM"] { border-color: #fed7aa; background: #fff7ed; }
.compatibility-result[data-risk="MEDIUM"] > strong { color: #9a3412; }
.compatibility-result[data-risk="LOW"] > strong { color: #166534; }

@media (max-width: 900px) {
    .shared-link-account-form { grid-template-columns: 1fr 1fr; }
    .shared-link-account-form .field:nth-child(3) { grid-column: 1 / -1; }
    .discovery-card { grid-template-columns: minmax(0, 1fr) 132px; }
    .discovery-card-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .topbar { align-items: flex-start; flex-wrap: wrap; }
    .toolbar-actions { width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
}

@media (max-width: 560px) {
    .shared-link-account-row { align-items: stretch; flex-direction: column; }
    .shared-link-account-form { grid-template-columns: 1fr; }
    .shared-link-account-form .field:nth-child(3) { grid-column: auto; }
    .discovery-screen { padding: 14px; }
    .discovery-header, .discovery-card { align-items: stretch; flex-direction: column; }
    .discovery-card { display: flex; }
    .page-library-preview { display: none; }
    .discovery-card-actions { justify-content: space-between; }
    .publish-unavailable { align-items: flex-start; flex-direction: column; }
}

/* Shared Studio interface primitives used by the active Product composer. */
.studio-section-card,
.field-group,
.composer-row-card {
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: var(--app-panel);
    box-shadow: 0 8px 22px rgba(22, 32, 42, .045);
}

.repeater-item-heading {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: space-between;
}

.studio-repeater {
    display: grid;
    gap: 9px;
}

.studio-repeater-item {
    border: 1px solid var(--app-line);
    border-radius: 11px;
    background: var(--app-soft);
    padding: 11px;
}

.studio-empty-state {
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    text-align: center;
}

.selected-carousel-asset {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.selected-carousel-asset img {
    width: 56px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: #e9edf3;
}

.selected-carousel-asset strong,
.selected-carousel-asset span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-carousel-asset span {
    color: var(--app-muted);
    font-size: .76rem;
}

.account-asset-picker {
    padding: 12px;
    border-radius: 12px;
    background: var(--app-soft);
}

.asset-library-controls {
    grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(92px, .8fr));
}

.asset-card-list {
    max-height: min(360px, 44vh);
    padding-right: 3px;
    scrollbar-gutter: stable;
}

.asset-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 11px;
    min-height: 78px;
    padding: 9px;
    border-radius: 11px;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.asset-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(22, 32, 42, .08);
}

.asset-card.is-selected {
    border-color: var(--app-accent);
    box-shadow: inset 0 0 0 1px var(--app-accent);
}

.asset-thumb {
    width: 68px;
    height: 58px;
}

.asset-card-copy {
    min-width: 0;
}

.asset-apply-label {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    color: var(--app-accent);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.product-cover-choice-group {
    display: grid;
    gap: 8px;
}

.product-cover-choice-list {
    display: grid;
    gap: 7px;
}

.product-cover-choice {
    display: grid;
    grid-template-columns: auto 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.product-cover-choice.is-selected {
    border-color: var(--app-accent);
    box-shadow: inset 0 0 0 1px var(--app-accent);
}

.product-cover-choice-preview {
    display: grid;
    place-items: center;
    width: 64px;
    height: 52px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--app-soft);
}

.product-cover-choice-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-cover-choice-copy,
.product-cover-choice-copy strong,
.product-cover-choice-copy small {
    display: block;
    min-width: 0;
}

.product-cover-choice-copy strong,
.product-cover-choice-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-cover-choice-copy small {
    margin-top: 3px;
    color: var(--app-muted);
}

.product-cover-choice-divider {
    height: 1px;
    margin: 12px 0;
    background: var(--app-line);
}

.hero-presentation-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 420px) {
    .hero-presentation-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

.asset-drop-target {
    margin: 9px 0;
    padding: 10px;
    border: 1px dashed #b9c2cf;
    border-radius: 9px;
    color: var(--app-muted);
    background: #fff;
    font-size: .74rem;
    font-weight: 800;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.asset-drop-target.is-drag-over {
    border-color: var(--app-accent);
    color: var(--app-accent);
    background: #fff7ed;
}

.composer-block.is-selected {
    box-shadow: inset 3px 0 0 var(--app-accent);
}

.composer-block:focus-visible,
.asset-card:focus-visible,
.composer-add-block:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .28);
    outline-offset: 2px;
}

/* Product Studio's section-first editor shell. The schema-v2 row/slot model remains internal. */
.product-section-group {
    gap: 8px;
    padding: 8px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.product-section-group:nth-child(even),
.product-section-group.is-selected {
    background: transparent;
}

.product-section-group.is-selected {
    border-color: rgba(249, 115, 22, .22);
    box-shadow: none;
}

.product-section-group.has-visible-sections .composer-row-heading {
    color: var(--app-ink);
    padding: 6px 7px;
    border: 1px solid rgba(249, 115, 22, .2);
    border-radius: 9px;
    background: #fffaf5;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .07);
}

.product-section-group.has-visible-sections .composer-layout-badge {
    border-color: rgba(249, 115, 22, .24);
    background: #fffaf5;
}

.product-section-group.is-hidden-only .composer-row-heading,
.product-section-group.is-hidden-only .product-section-layout {
    opacity: .58;
}

.product-section-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px;
}

.product-section-layout > span {
    color: var(--app-muted);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-layout-options {
    display: flex;
    gap: 4px;
}

.product-layout-choice {
    width: 30px;
    height: 24px;
    display: flex;
    gap: 2px;
    align-items: stretch;
    padding: 5px;
    border: 1px solid var(--app-line);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}

.product-layout-choice i {
    min-width: 0;
    flex: 1 1 0;
    border-radius: 2px;
    background: #cbd5e1;
}

.product-layout-40-60 i:first-child,
.product-layout-60-40 i:last-child {
    flex-grow: .67;
}

.product-layout-40-60 i:last-child,
.product-layout-60-40 i:first-child {
    flex-grow: 1;
}

.product-layout-choice:hover:not(:disabled),
.product-layout-choice:focus-visible,
.product-layout-choice.is-selected {
    border-color: var(--app-accent);
    background: #fff7ed;
    outline: none;
}

.product-layout-choice.is-selected i {
    background: var(--app-accent);
}

.product-layout-choice:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.product-section-group .composer-slots[data-composer-layout="50-50"],
.product-section-group .composer-slots[data-composer-layout="40-60"],
.product-section-group .composer-slots[data-composer-layout="60-40"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-section-group .composer-slots[data-composer-layout="40-60"] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.product-section-group .composer-slots[data-composer-layout="60-40"] {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.product-section-group .composer-slots[data-composer-layout="three-column"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-section-group .composer-slot {
    padding: 0;
    border: 0;
    background: transparent;
}

.product-section-group .composer-block-shell {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--app-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(22, 32, 42, .045);
}

.product-section-group .composer-block.is-visible {
    color: var(--app-ink);
}

.product-section-group .composer-block-shell.is-visible {
    border-color: rgba(249, 115, 22, .36);
    background: #fff8f1;
    box-shadow: 0 6px 16px rgba(249, 115, 22, .1);
}

.product-section-group .composer-block-shell.is-hidden {
    border-color: #e4e7ec;
    background: #f8fafc;
}

.product-section-group .composer-block {
    min-height: 44px;
    padding: 5px;
    background: transparent;
}

.product-section-group .composer-block-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 29px;
}

.product-section-group .composer-block-actions button {
    min-width: 25px;
    min-height: 25px;
    border: 1px solid transparent;
}

.product-section-group .composer-block-actions .composer-block-duplicate {
    margin-left: auto;
}

.product-section-group .composer-add-block {
    min-height: 58px;
    background: #fff;
}

.composer-block-picker {
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(22, 32, 42, .08);
}

.product-section-group.composer-row-card {
    grid-template-columns: minmax(0, 1fr);
}

.product-section-group.composer-row-card > .composer-block-picker {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
    overflow: visible;
}

.composer-block-picker-heading {
    display: grid;
    gap: 3px;
}

.composer-block-picker-heading > strong {
    font-size: .82rem;
}

.composer-block-picker-heading > span {
    color: var(--app-muted);
    font-size: .75rem;
    line-height: 1.4;
}

.section-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 6px;
    overflow: visible;
}

.section-picker-grid button {
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    color: var(--app-ink);
    background: var(--app-soft);
    font-size: .73rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
}

.section-picker-grid button > span:last-child {
    min-width: 0;
    white-space: normal;
}

.composer-block-picker-cancel {
    justify-self: start;
}

.section-picker-grid button:hover,
.section-picker-grid button:focus-visible {
    border-color: var(--app-accent);
    background: #fff7ed;
    outline: none;
}

.structure-empty strong,
.structure-empty span {
    display: block;
}

.structure-empty span {
    margin-top: 5px;
    color: var(--app-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.purchase-destination {
    margin: -4px 0 10px;
    color: #24705a;
    font-weight: 750;
}

@media (max-width: 1180px) {
    .asset-library-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .selected-carousel-asset {
        align-items: stretch;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .selected-carousel-asset .mini-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .asset-library-controls {
        grid-template-columns: 1fr;
    }

    .product-section-group .composer-slots[data-composer-layout] {
        grid-template-columns: 1fr;
    }

    .section-picker-grid {
        grid-template-columns: 1fr;
    }
}

.video-compatibility {
    margin-bottom: 12px;
}

.video-list-editor {
    display: grid;
    gap: 10px;
}

.video-edit-row {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 94%, var(--ink) 6%);
}

.video-edit-summary {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.video-edit-summary strong,
.video-edit-summary span {
    display: block;
    min-width: 0;
}

.video-edit-summary span {
    color: var(--muted);
    font-size: .8rem;
}

.video-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.video-fields {
    display: grid;
    gap: 8px;
}

.inline-warning {
    margin: -2px 0 0;
    color: #9a3412;
    font-size: .82rem;
    line-height: 1.35;
}

.inline-warning:empty {
    display: none;
}

.gumroad-video-picker {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.account-asset-picker {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--app-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.asset-library-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.asset-card-list {
    display: grid;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
}

.asset-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    padding: 7px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.asset-card:hover,
.asset-card.is-selected {
    border-color: var(--brand);
    background: #fff8f1;
}

.asset-thumb {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2f7;
    color: var(--muted);
}

.asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-card-copy strong,
.asset-card-copy span,
.asset-card-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-card-copy span,
.asset-card-copy small {
    color: var(--muted);
    font-size: .78rem;
}

.video-picker-header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.video-picker-header label {
    color: var(--ink);
    font-size: .82rem;
    font-weight: 900;
}

.video-discovery-status {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.35;
}

.video-discovery-status[data-status="success"] {
    color: #166534;
}

.video-discovery-status[data-status="warning"] {
    color: #9a3412;
}

.selected-video-asset {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.selected-video-copy strong,
.selected-video-copy span,
.selected-video-copy small {
    display: block;
}

.selected-video-copy span,
.selected-video-copy small {
    color: var(--muted);
    font-size: .82rem;
}

.selected-video-asset video {
    width: 100%;
    max-height: 180px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    background: #111827;
}

.selected-video-url {
    display: grid;
    gap: 6px;
}

.selected-video-url code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .76rem;
}

.selected-video-url .secondary-button {
    justify-self: start;
}

@media (max-width: 760px) {
    .video-edit-summary {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .video-edit-summary .social-visibility,
    .video-edit-summary .mini-actions {
        grid-column: 2;
        justify-self: start;
    }

    .video-picker-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final Publisher Pro hierarchy cleanup */
.discovery-screen{background:#f4f7fb}.discovery-shell{background:transparent}.discovery-card,.shared-links-account{border-color:#dfe5ed;background:#fff;box-shadow:0 8px 24px rgba(22,32,42,.05)}
.workspace{background:#f3f6fa}.structure-panel{background:#f8fafc}.preview-stage{background:#eef2f7}.settings-panel{background:#f8fafc}.preview-scroll{background:#e9eef5}
.primary-button,.secondary-button,.file-button,.destructive-button{min-height:40px;padding:0 15px;border-radius:10px;font:inherit;font-size:.84rem;font-weight:800;transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}.primary-button:hover:not(:disabled){background:#ea650f;box-shadow:0 8px 18px rgba(249,115,22,.24)}.secondary-button:hover:not(:disabled){border-color:#c5ced9;background:#f8fafc}.primary-button:focus-visible,.secondary-button:focus-visible,.destructive-button:focus-visible{outline:3px solid rgba(249,115,22,.2);outline-offset:2px}.primary-button:disabled,.secondary-button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}.destructive-button{border:1px solid #fecaca;background:#fff;color:#b42318}.status-pill,.page-local-state{border-radius:999px;font-weight:800}.toolbar-actions{gap:7px}.toolbar-controls{display:flex;align-items:center;gap:12px}.editor-page-selector select{width:min(300px,28vw);min-height:40px;padding:0 34px 0 12px;border:1px solid var(--app-line);border-radius:10px;background:#fff;color:var(--app-ink);font:inherit;font-size:.84rem;font-weight:750}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.product-section-group.composer-row-card{padding:13px;border:1px solid #dce3eb;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(22,32,42,.04)}.product-section-group.composer-row-card:nth-child(even){background:#fff}.product-section-group.composer-row-card.is-selected{border-color:rgba(249,115,22,.72);background:#fff1e6;box-shadow:0 0 0 2px rgba(249,115,22,.14),0 8px 20px rgba(124,55,12,.07)}.product-section-group.composer-row-card.is-hidden-only:not(.is-selected){border-color:#dce3eb;background:#f4f6f8;box-shadow:none}.product-section-group .composer-block-shell{padding:0;border:0;background:transparent;box-shadow:none}.product-section-group .composer-block{min-height:42px;padding:8px 9px;border:1px solid transparent;border-radius:9px;background:#f6f8fb}.product-section-group .composer-block:hover,.product-section-group .composer-block:focus-visible{border-color:#cfd7e2;background:#fff}.product-section-group .composer-block.is-selected{border-color:var(--app-accent);background:#fff8f2;box-shadow:none}.product-section-group .composer-block-actions button{min-height:30px;border-color:#d8dee8;background:#fff}.product-section-group .composer-row-layout{padding-top:10px;border-top:1px solid #edf0f4}
.page-settings-accordion.is-expanded{border-color:#d6dee8;background:#f1f5f9;box-shadow:none}.page-settings-accordion-content{gap:0;padding:4px 14px 14px;background:#f1f5f9}.page-settings-accordion-content>.field-group{margin:0;padding:16px 0;border:0;border-bottom:1px solid #dce3eb;border-radius:0;background:transparent;box-shadow:none}.page-settings-accordion-content>.field-group:first-child{margin-top:0}.page-settings-close{width:100%;margin-top:14px;justify-self:stretch;border-color:#cbd5e1;background:#fff}
#activate-license:disabled,#library-license:disabled{border-color:#bbdfca;background:#edf8f1;color:#267044;opacity:1;box-shadow:none}
@media(max-width:1100px){.editor-page-selector select{width:min(260px,38vw)}.active-page-identity{display:none}}