:root {
        --bg: #07111f;
        --panel: #f5f7fa;
        --panel-muted: #f3f4f6;
        --panel-strong: rgba(255, 255, 255, 0.96);
        --text: #111827;
        --muted: #5b677a;
        --muted-soft: #64748b;
        --line: rgba(0, 0, 0, 0.05);
        --line-strong: rgba(0, 0, 0, 0.08);
        --brand: #2f6bff;
        --brand-strong: #4a8dff;
        --brand-deep: #0a1f44;
        --brand-rich: #123a8c;
        --brand-soft: rgba(47, 107, 255, 0.16);
        --brand-muted: rgba(47, 107, 255, 0.08);
        --success: #22c55e;
        --warning: #fbbf24;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        --glass-shadow: none;
        --radius-xl: 30px;
        --radius-lg: 22px;
        --radius-md: 18px;
        --radius-sm: 14px;
        --content-width: 1280px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: Inter, Arial, Helvetica, sans-serif;
        background: #eef3f8;
        color: var(--text);
        position: relative;
        overflow-x: hidden;
      }

      .page-bg {
        position: fixed;
        inset: -10%;
        z-index: 0;
        background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%2397b8d2'/%3E%3Cstop offset='100%25' stop-color='%23dce7ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23sky)'/%3E%3Crect y='520' width='1600' height='380' fill='%23adc6b1'/%3E%3Cg opacity='0.95'%3E%3Crect x='120' y='420' width='140' height='130' rx='6' fill='%23f5f1e9'/%3E%3Cpolygon points='105,430 190,360 275,430' fill='%237b8ca2'/%3E%3Crect x='152' y='470' width='28' height='80' fill='%23d8d1c7'/%3E%3Crect x='198' y='454' width='35' height='28' fill='%23b7d0ea'/%3E%3C/g%3E%3Cg opacity='0.96'%3E%3Crect x='340' y='386' width='188' height='166' rx='7' fill='%23efe9df'/%3E%3Cpolygon points='320,398 434,314 548,398' fill='%23788aa1'/%3E%3Crect x='382' y='456' width='34' height='96' fill='%23d9d0c4'/%3E%3Crect x='438' y='432' width='44' height='32' fill='%23b4cee7'/%3E%3C/g%3E%3Cg opacity='0.97'%3E%3Crect x='620' y='402' width='170' height='148' rx='7' fill='%23f4ede5'/%3E%3Cpolygon points='600,412 705,334 810,412' fill='%236e8397'/%3E%3Crect x='662' y='468' width='34' height='82' fill='%23d8d1c6'/%3E%3Crect x='718' y='442' width='34' height='30' fill='%23b5d1ea'/%3E%3C/g%3E%3Cg opacity='0.96'%3E%3Crect x='910' y='392' width='180' height='160' rx='7' fill='%23f1ebe3'/%3E%3Cpolygon points='888,405 1000,322 1112,405' fill='%2373869e'/%3E%3Crect x='954' y='462' width='35' height='90' fill='%23d8d0c5'/%3E%3Crect x='1010' y='438' width='40' height='30' fill='%23b5cee7'/%3E%3C/g%3E%3Cg opacity='0.95'%3E%3Crect x='1180' y='430' width='160' height='122' rx='7' fill='%23f3ede5'/%3E%3Cpolygon points='1160,438 1260,366 1360,438' fill='%237a8ea4'/%3E%3Crect x='1230' y='480' width='30' height='72' fill='%23d7cec3'/%3E%3Crect x='1278' y='458' width='34' height='26' fill='%23b7d0ea'/%3E%3C/g%3E%3Cg opacity='0.9'%3E%3Crect x='0' y='560' width='1600' height='18' fill='%2387a58d'/%3E%3C/g%3E%3Cg fill='%237fa088'%3E%3Ccircle cx='290' cy='420' r='36'/%3E%3Ccircle cx='570' cy='430' r='42'/%3E%3Ccircle cx='846' cy='438' r='36'/%3E%3Ccircle cx='1130' cy='430' r='40'/%3E%3Ccircle cx='1410' cy='440' r='34'/%3E%3C/g%3E%3C/svg%3E");
        background-size: cover;
        background-position: center;
        filter: blur(18px) saturate(0.82) brightness(1.02);
        transform: scale(1.08);
        pointer-events: none;
      }

      .page-bg-overlay {
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.6);
        pointer-events: none;
      }

      body.modal-open {
        overflow: hidden;
      }

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

      button {
        cursor: pointer;
      }

      img {
        max-width: 100%;
        display: block;
      }

      .app-shell {
        width: min(calc(100% - 36px), var(--content-width));
        margin: 0 auto;
        padding: 28px 0 54px;
        position: relative;
        z-index: 2;
      }

      .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin-bottom: 18px;
        padding: 4px 0 10px;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .brand-wrap {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      .header-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .btn-text {
        border: 0;
        background: transparent;
        color: #334155;
        font-weight: 700;
        padding: 12px 10px;
      }

      .btn-text:hover {
        color: #0f172a;
      }

      .brand-logo {
        display: block;
        width: auto;
        height: 96px;
        object-fit: contain;
        flex: 0 0 auto;
        align-self: center;
      }

      .brand-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .brand-name {
        margin: 0;
        font-size: 2.35rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 0.98;
      }

      .brand-tagline {
        margin: 0;
        font-size: 1.1rem;
        color: #64748b;
        line-height: 1.24;
      }

      .brand-version {
        margin: 4px 0 0;
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(100, 116, 139, 0.92);
        line-height: 1.15;
        letter-spacing: 0.01em;
      }

      .brand-version[hidden] {
        display: none;
      }

      .app-shell[hidden] {
        display: none;
      }

      .beta-gate {
        min-height: calc(100vh - 120px);
        display: grid;
        place-items: center;
        position: relative;
        z-index: 2;
      }

      .beta-gate[hidden] {
        display: none;
      }

      .beta-gate-card {
        width: min(100%, 520px);
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.52);
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-radius: 28px;
        padding: 32px 30px;
      }

      .beta-gate-brand {
        display: flex;
        justify-content: center;
        margin-bottom: 18px;
      }

      .beta-gate-logo {
        width: auto;
        height: 70px;
        object-fit: contain;
        opacity: 0.96;
      }

      .beta-gate-title {
        margin: 0;
        font-size: 2rem;
        font-weight: 800;
        color: #0f172a;
        text-align: center;
      }

      .beta-gate-copy {
        margin: 10px 0 0;
        font-size: 1rem;
        line-height: 1.6;
        color: #475569;
        text-align: center;
      }

      .beta-gate-form {
        margin-top: 24px;
        display: grid;
        gap: 16px;
      }

      .beta-gate-help {
        margin-top: 18px;
        display: grid;
        gap: 10px;
        justify-items: center;
      }

      .beta-gate-help-copy {
        margin: 0;
        color: #64748b;
        font-size: 0.95rem;
        text-align: center;
      }

      .beta-gate-apply-link {
        min-width: 220px;
        justify-content: center;
        text-decoration: none;
      }

      .beta-gate-status {
        margin-top: 16px;
      }

      .beta-admin-panel {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
      }

      .beta-admin-panel summary {
        width: fit-content;
        color: #64748b;
        cursor: pointer;
        font-size: 0.84rem;
        font-weight: 800;
      }

      .beta-admin-form {
        margin-top: 12px;
        display: grid;
        gap: 12px;
      }

      .beta-admin-form .btn {
        width: fit-content;
      }

      .beta-admin-tools {
        margin-top: 12px;
        display: grid;
        gap: 14px;
      }

      .beta-admin-heading {
        margin: 0;
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 800;
      }

      .beta-admin-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .beta-admin-approval-list {
        display: grid;
        gap: 8px;
      }

      .beta-admin-empty {
        margin: 0;
        color: #64748b;
        font-size: 0.9rem;
      }

      .beta-admin-approval-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.54);
      }

      .beta-admin-approval-item strong,
      .beta-admin-approval-item span,
      .beta-admin-approval-item small {
        display: block;
      }

      .beta-admin-approval-item strong {
        color: #0f172a;
        font-size: 0.9rem;
      }

      .beta-admin-approval-item span,
      .beta-admin-approval-item small {
        color: #64748b;
        font-size: 0.8rem;
      }

      .beta-admin-approval-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .beta-admin-status-pill {
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.1);
        color: #1d4ed8;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .beta-admin-approval-item[data-status="revoked"] .beta-admin-status-pill {
        background: rgba(148, 163, 184, 0.18);
        color: #475569;
      }

      .hero-card,
      .panel-card,
      .agent-card {
        background: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.42);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .hero-card {
        border-radius: var(--radius-xl);
        padding: 24px 24px 26px;
        margin-bottom: 22px;
      }

      .hero-card.is-listing-hero,
      .hero-card.is-flyer-hero {
        padding: 18px 22px 20px;
        margin-bottom: 16px;
      }

      .hero-card.is-listing-hero .tool-tabs,
      .hero-card.is-flyer-hero .tool-tabs {
        margin-bottom: 18px;
      }

      .hero-card.is-listing-hero .tool-tabs {
        gap: 7px;
        padding: 7px;
        max-width: 812px;
      }

      .hero-card.is-listing-hero .hero-grid,
      .hero-card.is-flyer-hero .hero-grid {
        align-items: start;
      }

      .hero-card.is-listing-hero .hero-grid > :first-child {
        max-width: 560px;
        padding-top: 16px;
      }

      .hero-card.is-listing-hero .tool-tab {
        min-width: 144px;
        padding: 10px 16px;
        font-size: 0.92rem;
        font-weight: 650;
      }

      .tool-tabs {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.42);
        margin-bottom: 24px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.48),
          0 10px 24px rgba(15, 23, 42, 0.08);
      }

      .tool-tab {
        border: 0;
        border-radius: 999px;
        padding: 14px 24px;
        min-width: 180px;
        background: rgba(255, 255, 255, 0.55);
        color: #1e293b;
        font-weight: 700;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
          box-shadow 0.2s ease, border-color 0.2s ease;
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
      }

      .tool-tab:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.7);
        color: #0f172a;
        box-shadow: 0 10px 18px rgba(47, 107, 255, 0.08);
      }

      .tool-tab.active {
        background: linear-gradient(135deg, #0a1f44 0%, #123a8c 45%, #2f6bff 75%, #4a8dff 100%);
        color: #ffffff;
        box-shadow:
          0 10px 25px rgba(47, 107, 255, 0.35),
          0 0 0 1px rgba(255, 255, 255, 0.16);
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.86fr);
        gap: 28px;
        align-items: center;
      }

      .hero-card.is-listing-hero .hero-grid {
        grid-template-columns: minmax(0, 0.76fr) minmax(640px, 1.24fr);
        gap: 20px;
        align-items: stretch;
      }

      .hero-grid-full {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .eyebrow {
        display: block;
        margin: 0 0 12px;
        font-size: 0.73rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #2563eb;
      }

      .eyebrow[hidden] {
        display: none;
      }

      .hero-title {
        margin: 0;
        max-width: 12ch;
        font-size: clamp(3rem, 4.6vw, 4.8rem);
        line-height: 0.98;
        letter-spacing: -0.04em;
        color: #0f172a;
        text-wrap: balance;
        text-shadow: none;
      }

      .hero-card.is-listing-hero .hero-title,
      .hero-card.is-flyer-hero .hero-title {
        max-width: 18ch;
        font-size: clamp(2.2rem, 3.25vw, 3.35rem);
        line-height: 1.02;
      }

      .hero-card.is-listing-hero .hero-title {
        max-width: 11ch;
        font-size: clamp(2.7rem, 4.2vw, 4.25rem);
        line-height: 0.97;
        letter-spacing: -0.055em;
      }

      .hero-title-accent {
        display: inline-block;
        background: linear-gradient(135deg, #1f5dff 0%, #2f6bff 42%, #49a3ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .hero-subtitle {
        margin: 8px 0 0;
        max-width: 52ch;
        color: #475569;
        font-size: 1.08rem;
        line-height: 1.62;
      }

      .hero-card.is-listing-hero .hero-subtitle,
      .hero-card.is-flyer-hero .hero-subtitle {
        margin-top: 6px;
        font-size: 1rem;
        line-height: 1.38;
      }

      .hero-card.is-listing-hero .hero-subtitle {
        max-width: 24ch;
        margin-top: 8px;
        color: #4b5d79;
        font-size: 1.02rem;
        line-height: 1.45;
      }

      .hero-support-text {
        margin: 10px 0 0;
        max-width: 54ch;
        color: #64748b;
        font-size: 0.96rem;
        line-height: 1.55;
      }

      .hero-support-text:empty {
        display: none;
      }

      .hero-cta-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 18px;
      }

      .hero-card.is-listing-hero .hero-cta-row,
      .hero-card.is-flyer-hero .hero-cta-row {
        margin-top: 12px;
      }

      .hero-card.is-listing-hero .hero-cta-row .btn {
        padding: 12px 18px;
        font-size: 0.94rem;
        border-radius: 14px;
      }

      .hero-card.is-listing-hero .hero-cta-row {
        gap: 14px;
        margin-top: 18px;
      }

      .hero-proof-line {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin: 18px 0 0;
        color: #24354d;
        font-size: 0.95rem;
        font-weight: 700;
      }

      .hero-proof-line[hidden] {
        display: none;
      }

      .hero-proof-icon {
        color: #2563eb;
        font-size: 1rem;
      }

      .hero-cta-row[hidden] {
        display: none;
      }

      .btn {
        border: 1px solid transparent;
        border-radius: 12px;
        padding: 14px 18px;
        font-weight: 700;
        transition: all 0.2s ease;
      }

      .btn:hover {
        transform: translateY(-1px);
      }

      .btn-primary {
        background: linear-gradient(135deg, #0a1f44 0%, #123a8c 45%, #2f6bff 75%, #4a8dff 100%);
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(47, 107, 255, 0.35);
      }

      .btn-primary[disabled] {
        opacity: 0.78;
        cursor: progress;
      }

      .btn-secondary {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(148, 163, 184, 0.22);
        color: #1f2937;
        backdrop-filter: blur(12px);
      }

      .btn-subtle {
        background: rgba(255, 255, 255, 0.55);
        color: #1e293b;
        border-color: rgba(148, 163, 184, 0.22);
      }

      .btn-locked {
        background: rgba(47, 107, 255, 0.08);
        color: var(--brand-strong);
        border: 1px solid rgba(47, 107, 255, 0.14);
      }

      .preview-card {
        background: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 26px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
      }

      .listing-hero-visual {
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 100%;
        padding: 4px;
        border-radius: 28px;
        background:
          radial-gradient(circle at left center, rgba(131, 184, 255, 0.18), transparent 38%),
          rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(83, 132, 255, 0.18);
        box-shadow:
          0 18px 42px rgba(15, 23, 42, 0.11),
          0 0 0 1px rgba(255, 255, 255, 0.28),
          0 0 50px rgba(47, 107, 255, 0.08);
      }

      .listing-hero-visual[hidden] {
        display: none;
      }

      .listing-hero-visual img {
        width: 100%;
        height: 100%;
        border-radius: 22px;
        object-fit: contain;
      }

      .workflow-video-inline-button {
        display: flex;
        align-items: center;
        gap: 14px;
        width: fit-content;
        margin-top: 10px;
        padding: 14px 18px;
        border: 1px solid rgba(47, 107, 255, 0.2);
        border-radius: 18px;
        background: linear-gradient(135deg, #0a1f44 0%, #123a8c 48%, #2f6bff 100%);
        color: #ffffff;
        box-shadow: 0 14px 30px rgba(47, 107, 255, 0.28);
        text-align: left;
      }

      .workflow-video-inline-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px rgba(47, 107, 255, 0.34);
      }

      .workflow-video-inline-button strong,
      .workflow-video-inline-button small {
        display: block;
      }

      .workflow-video-inline-button strong {
        font-size: 0.98rem;
        line-height: 1.1;
      }

      .workflow-video-inline-button small {
        margin-top: 3px;
        color: rgba(255, 255, 255, 0.74);
        font-size: 0.78rem;
        font-weight: 700;
      }

      .workflow-video-inline-play {
        position: relative;
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
      }

      .workflow-video-inline-play::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 54%;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #ffffff;
        transform: translate(-50%, -50%);
      }

      .preview-card[hidden],
      .workflow-card[hidden],
      .flyer-generated-section[hidden] {
        display: none;
      }

      .preview-label {
        margin: 0;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-strong);
      }

      .preview-body {
        flex: 1;
        padding: 18px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(203, 216, 235, 0.82);
        border-radius: 20px;
        color: #16263b;
      }

      .preview-body h3 {
        margin: 0 0 10px;
        font-size: 1.24rem;
        font-weight: 700;
        color: #0f172a;
      }

      .preview-body p {
        margin: 0 0 12px;
        color: #475569;
        line-height: 1.6;
      }

      .preview-body p:last-child {
        margin-bottom: 0;
      }

      .workflow-card {
        background: rgba(255, 255, 255, 0.64);
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 22px;
        padding: 22px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
      }

      .flyer-carousel-card {
        display: grid;
        gap: 16px;
        align-content: start;
        min-height: 100%;
      }

      .flyer-examples-modal-shell {
        width: min(100%, 860px);
        max-height: min(92vh, 980px);
      }

      .flyer-examples-modal-body {
        padding: 18px 24px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .flyer-carousel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }

      .flyer-carousel-eyebrow {
        margin: 0;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-strong);
      }

      .flyer-carousel-controls {
        display: inline-flex;
        gap: 8px;
      }

      .flyer-carousel-nav {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 1px solid rgba(47, 107, 255, 0.18);
        background: rgba(255, 255, 255, 0.92);
        color: #16315f;
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
      }

      .flyer-carousel-nav:hover {
        background: rgba(236, 243, 255, 0.98);
      }

      .flyer-carousel-stage {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 360px;
        padding: 22px;
        background: linear-gradient(180deg, rgba(242, 246, 252, 0.95) 0%, rgba(230, 237, 247, 0.9) 100%);
        border: 1px solid rgba(203, 216, 235, 0.78);
        border-radius: 24px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        overflow: visible;
      }

      .flyer-examples-modal-body .flyer-carousel-stage {
        min-height: auto;
      }

      .flyer-carousel-stage::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        pointer-events: none;
      }

      .flyer-carousel-image {
        max-width: min(100%, 320px);
        max-height: 430px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
      }

      .flyer-examples-modal-body .flyer-carousel-image {
        max-width: min(100%, 460px);
        max-height: none;
      }

      .flyer-carousel-copy {
        display: grid;
        gap: 6px;
      }

      .flyer-carousel-title {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 800;
        color: #0f172a;
      }

      .flyer-carousel-description {
        margin: 0;
        color: #5b677a;
        line-height: 1.6;
      }

      .flyer-carousel-dots {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .flyer-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        border: 0;
        background: rgba(47, 107, 255, 0.2);
        box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.08);
        padding: 0;
      }

      .flyer-carousel-dot.is-active {
        width: 26px;
        background: linear-gradient(135deg, #1d3f88 0%, #2f6bff 100%);
      }

      .workflow-card h2 {
        margin: 0 0 14px;
        font-size: 1.08rem;
        color: #0f172a;
      }

      .workflow-card ol {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 10px;
        counter-reset: workflow-step;
      }

      .workflow-card li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #334155;
        font-weight: 700;
        line-height: 1.35;
        counter-increment: workflow-step;
      }

      .workflow-card li::before {
        content: counter(workflow-step);
        display: grid;
        place-items: center;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: rgba(47, 107, 255, 0.1);
        color: var(--brand-strong);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .preview-description-text.is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .preview-toggle {
        margin-top: 8px;
        display: inline-flex;
        align-self: flex-start;
      }

      .preview-toggle[aria-expanded="true"]::after {
        content: " ▴";
      }

      .preview-chip-row {
        display: none;
      }

      .preview-chip {
        display: inline-flex;
        align-items: center;
        padding: 7px 11px;
        border-radius: 999px;
        background: rgba(47, 107, 255, 0.08);
        color: #123a8c;
        font-size: 0.76rem;
        font-weight: 700;
      }

      .workspace {
        display: grid;
        gap: 22px;
      }

      .photo-hero-preview {
        display: none;
      }

      .photo-hero-preview.active {
        display: block;
      }

      .tool-panel {
        display: none;
      }

      .tool-panel.active {
        display: block;
      }

      #panel-flyer.active {
        padding: 18px;
        border-radius: 28px;
        background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
      }

      .tool-panel.listing-transition-out {
        opacity: 0;
        transition: opacity 150ms ease;
      }

      .tool-panel.flyer-transition-enter {
        opacity: 0;
        transform: translateY(12px);
      }

      .tool-panel.flyer-transition-enter-active {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .tool-transition-message {
        position: fixed;
        top: 18px;
        left: 50%;
        z-index: 1200;
        transform: translate(-50%, -8px);
        padding: 11px 16px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.96);
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 800;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease, transform 140ms ease;
      }

      .tool-transition-message.active {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      .coming-soon-panel {
        min-height: 58vh;
        display: grid;
        place-items: center;
      }

      .coming-soon-card {
        width: min(760px, 100%);
        min-height: 320px;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 40px 32px;
      }

      .coming-soon-content {
        display: grid;
        gap: 14px;
        max-width: 520px;
      }

      .coming-soon-title {
        margin: 0;
        font-size: clamp(2rem, 3.4vw, 2.6rem);
        line-height: 1.08;
        color: #0f172a;
      }

      .coming-soon-subtext {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 600;
        color: #475569;
      }

      .coming-soon-support {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.65;
        color: #64748b;
      }

      .panel-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
        gap: 20px;
        align-items: start;
      }

      .stack {
        display: grid;
        gap: 20px;
      }

      .panel-card,
      .agent-card {
        border-radius: 18px;
        padding: 28px;
      }

      .section-title-row {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 16px;
        margin-bottom: 0;
      }

      .section-title-row.compact {
        margin-bottom: 8px;
      }

      section-header {
        display: block;
        margin-bottom: 16px;
        position: relative;
      }

      .section-header-banner {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 42%),
          linear-gradient(180deg, #4077ea 0%, #2558c8 34%, #123a8c 72%, #0a1f44 100%);
        color: #ffffff;
        border-radius: 12px;
        padding: 12px 16px;
        border: 1px solid rgba(86, 129, 217, 0.2);
        box-shadow:
          0 10px 22px rgba(17, 43, 95, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -8px 14px rgba(8, 20, 52, 0.16);
      }

      .section-header-banner::before {
        content: "";
        position: absolute;
        inset: 1px 1px auto 1px;
        height: 38%;
        border-radius: 11px 11px 20px 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 68%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
        z-index: 0;
      }

      .section-header-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 18%, rgba(255, 255, 255, 0) 42%);
        pointer-events: none;
        z-index: 0;
      }

      .section-header-title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 0 rgba(8, 20, 52, 0.2);
      }

      .section-copy {
        margin: 0;
        color: #5b677a;
        line-height: 1.6;
      }

      .section-anchor {
        font-size: 0.92rem;
        color: var(--muted-soft);
      }

      .field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
      }

      .field-grid.three-up,
      .field-grid.four-up {
        grid-template-columns: repeat(3, minmax(128px, 168px));
        justify-content: start;
        gap: 14px;
      }

      .field-grid.four-up {
        grid-template-columns: repeat(4, minmax(128px, 168px));
      }

      .field {
        display: grid;
        gap: 5px;
      }

      .field.is-focused-jump {
        border-radius: 18px;
        box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.16);
        transition: box-shadow 0.2s ease;
      }

      .field label,
      .fieldset-label {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1f2937;
      }

      .required-star {
        color: #dc2626;
      }

      .field input,
      .field select,
      .field textarea {
        width: 100%;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.72);
        min-height: 48px;
        height: 48px;
        padding: 8px 13px;
        color: #0f172a;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        appearance: none;
        -webkit-appearance: none;
      }

      .field input::placeholder,
      .field textarea::placeholder {
        color: #94a3b8;
      }

      .field textarea {
        min-height: 120px;
        height: auto;
        resize: vertical;
      }

      .select-shell {
        position: relative;
      }

      .select-shell select {
        position: relative;
        z-index: 1;
        padding-right: 42px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.68),
          0 1px 2px rgba(15, 23, 42, 0.03);
      }

      .select-shell-caret {
        position: absolute;
        top: 50%;
        right: 16px;
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(71, 85, 105, 0.82);
        border-bottom: 2px solid rgba(71, 85, 105, 0.82);
        transform: translateY(-62%) rotate(45deg);
        pointer-events: none;
        transition: transform 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
        opacity: 0.82;
      }

      .select-shell:hover .select-shell-caret {
        border-right-color: rgba(37, 99, 235, 0.82);
        border-bottom-color: rgba(37, 99, 235, 0.82);
        opacity: 1;
      }

      .select-shell:focus-within .select-shell-caret {
        transform: translateY(-62%) rotate(45deg) scale(1.05);
        border-right-color: rgba(37, 99, 235, 0.9);
        border-bottom-color: rgba(37, 99, 235, 0.9);
        opacity: 1;
      }

      .select-shell-tone {
        max-width: 320px;
      }

      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: rgba(74, 141, 255, 0.86);
        box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
      }

      .helper-text {
        margin: 0;
        font-size: 0.88rem;
        line-height: 1.4;
        color: #64748b;
      }

      .inline-error {
        display: none;
        font-size: 0.86rem;
        color: #b42318;
      }

      .field.invalid input,
      .field.invalid select,
      .field.invalid textarea {
        border-color: rgba(220, 38, 38, 0.44);
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
      }

      .field.invalid .inline-error {
        display: block;
      }

      .listing-package-editable {
        width: 100%;
        min-height: 220px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.78);
        padding: 16px 18px;
        color: #0f172a;
        line-height: 1.7;
        font: inherit;
        resize: vertical;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .listing-package-editable:focus {
        outline: none;
        border-color: rgba(74, 141, 255, 0.86);
        box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
      }

      .selected-features-bar {
        border: 1px solid rgba(199, 215, 255, 0.62);
        background: linear-gradient(
          135deg,
          rgba(234, 241, 255, 0.92),
          rgba(245, 249, 255, 0.82)
        );
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 18px;
        padding: 12px;
        margin-top: 12px;
      }

      .selected-features-label {
        margin: 0 0 10px;
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #0f172a;
      }

      .selected-features-helper {
        margin: 0 0 10px;
      }

      .selected-features-add-row {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        align-items: stretch;
      }

      .selected-features-add-row input {
        flex: 1;
        border: 1px solid rgba(148, 163, 184, 0.26);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.88);
        min-height: 48px;
        padding: 12px 14px;
        color: #0f172a;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }

      .selected-features-add-row input:focus {
        outline: none;
        border-color: rgba(74, 141, 255, 0.86);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.16);
      }

      .selected-features-add-button {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(37, 99, 235, 0.92));
        border-color: transparent;
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(30, 64, 175, 0.18);
      }

      .selected-features-add-button:hover {
        box-shadow: 0 14px 28px rgba(30, 64, 175, 0.26);
      }

      .selected-features-status {
        margin: 8px 0 0;
        min-height: 1.2em;
      }

      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .feature-chip-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .feature-chip-grid .chip {
        width: 100%;
        min-width: 0;
        justify-content: center;
      }

      .chip {
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #ffffff;
        color: #0f172a;
        padding: 9px 13px;
        font-size: 0.92rem;
        line-height: 1.1;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
          transform 0.2s ease, box-shadow 0.2s ease;
      }

      .chip:hover {
        background: #f8faff;
        border-color: #2f6bff;
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 8px 18px rgba(47, 107, 255, 0.1);
      }

      .chip.selected {
        background: linear-gradient(180deg, #3f7cff 0%, #1f57df 16%, #123a8c 55%, #0a1f44 100%);
        border-color: rgba(147, 197, 253, 0.18);
        color: #ffffff;
        box-shadow:
          0 10px 22px rgba(13, 56, 199, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          inset 0 -8px 16px rgba(8, 20, 52, 0.22);
      }

      .chip.selected:hover {
        background: linear-gradient(180deg, #4b85ff 0%, #245de6 16%, #144093 55%, #0a1f44 100%);
        border-color: rgba(147, 197, 253, 0.22);
        color: #ffffff;
        box-shadow:
          0 12px 24px rgba(13, 56, 199, 0.24),
          0 0 18px rgba(96, 165, 250, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.38),
          inset 0 -8px 16px rgba(8, 20, 52, 0.24);
      }

      .chip-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(147, 197, 253, 0.14);
        background: linear-gradient(180deg, #2b63e8 0%, #1a49c8 14%, #0f2f7f 52%, #081634 100%);
        color: #f8fafc;
        box-shadow:
          0 10px 22px rgba(15, 23, 42, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.32),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
      }

      .chip-preview::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
        pointer-events: none;
      }

      .chip-preview::after {
        content: none;
      }

      .chip-close {
        appearance: none;
        border: 0;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        color: inherit;
        cursor: pointer;
        font-size: 0.95rem;
        line-height: 1;
        opacity: 0.72;
        transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
      }

      .chip-close:hover,
      .chip-close:focus-visible {
        background: rgba(255, 255, 255, 0.24);
        opacity: 1;
        outline: none;
        transform: scale(1.08);
      }

      .selected-feature-chip {
        cursor: grab;
        user-select: none;
        touch-action: none;
        padding: 10px 14px;
        gap: 10px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease, background 0.2s ease,
          opacity 0.2s ease;
      }

      .selected-feature-chip.chip:hover,
      .selected-feature-chip:hover {
        border-color: rgba(96, 165, 250, 0.42);
        background: linear-gradient(180deg, #376ff1 0%, #1d53d6 14%, #12398c 52%, #081634 100%);
        color: #f8fafc;
        transform: translateY(-2px);
        box-shadow:
          0 14px 28px rgba(15, 23, 42, 0.22),
          0 0 0 1px rgba(96, 165, 250, 0.12),
          0 0 18px rgba(59, 130, 246, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
      }

      .selected-feature-chip:active {
        cursor: grabbing;
      }

      .selected-feature-chip.is-dragging {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transform: none;
        box-shadow: none;
      }

      .selected-feature-chip.is-floating-drag-chip {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        cursor: grabbing;
        pointer-events: none;
        opacity: 0.96;
        transform: translate3d(0, 0, 0);
        box-shadow:
          0 18px 34px rgba(15, 23, 42, 0.26),
          0 0 0 1px rgba(96, 165, 250, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
        transition: none;
        will-change: transform;
      }

      .selected-feature-transparent-drag-image {
        position: fixed;
        top: -100px;
        left: -100px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .selected-feature-drop-placeholder {
        flex: 0 0 auto;
        border: 2px dashed rgba(47, 107, 255, 0.58);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 246, 255, 0.54)),
          rgba(219, 234, 254, 0.62);
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.72),
          0 8px 18px rgba(47, 107, 255, 0.14);
        transition: transform 0.22s ease;
      }

      .selected-feature-handle {
        color: rgba(255, 255, 255, 0.86);
        font-size: 0.96rem;
        letter-spacing: -0.05em;
        opacity: 0.88;
        transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
        position: relative;
        z-index: 1;
      }

      .selected-feature-chip:hover .selected-feature-handle,
      .selected-feature-chip:focus-visible .selected-feature-handle {
        color: #ffffff;
        opacity: 1;
        transform: translateY(-1px);
      }

      .selected-feature-chip > span {
        position: relative;
        z-index: 1;
      }

      .feature-groups {
        display: grid;
        gap: 10px;
      }

      .feature-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
      }

      .feature-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.26);
        background: rgba(255, 255, 255, 0.78);
        color: #334155;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .feature-tab:hover {
        border-color: rgba(47, 107, 255, 0.28);
        background: rgba(248, 250, 252, 0.96);
      }

      .feature-tab.active {
        border-color: rgba(47, 107, 255, 0.48);
        background: linear-gradient(180deg, #3f7cff 0%, #1f57df 16%, #123a8c 55%, #0a1f44 100%);
        color: #ffffff;
        box-shadow:
          0 10px 24px rgba(47, 107, 255, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          inset 0 -8px 16px rgba(8, 20, 52, 0.22);
      }

      .feature-tab-count {
        min-width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.08);
        color: inherit;
        font-size: 0.76rem;
        font-weight: 900;
      }

      .feature-tab.active .feature-tab-count {
        background: rgba(255, 255, 255, 0.2);
      }

      .feature-group {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.85),
          rgba(241, 245, 249, 0.75)
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
        padding: 14px;
      }

      .feature-group-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 12px;
      }

      .feature-group-title {
        margin: 0;
        font-size: 0.98rem;
        color: #0f172a;
      }

      .toggle-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(59, 130, 246, 0.18);
        background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.9));
        color: #1d4ed8;
        font-weight: 700;
        font-size: 0.82rem;
        padding: 7px 12px;
        border-radius: 999px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        transition:
          color 0.2s ease,
          border-color 0.2s ease,
          background 0.2s ease,
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }

      .toggle-link::after {
        content: "▾";
        font-size: 0.78rem;
        opacity: 0.9;
      }

      .toggle-link:hover {
        color: #1e40af;
        border-color: rgba(59, 130, 246, 0.28);
        background: linear-gradient(135deg, rgba(219, 234, 254, 1), rgba(191, 219, 254, 0.92));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.84),
          0 8px 18px rgba(59, 130, 246, 0.12);
        transform: translateY(-1px);
      }

      .quick-add-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .quick-add-chevron {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.58);
        color: #475569;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      }

      .quick-add-toggle:hover .quick-add-chevron {
        background: rgba(255, 255, 255, 0.82);
        border-color: rgba(47, 107, 255, 0.18);
      }

      .panel-card.collapsed .quick-add-chevron {
        transform: rotate(-90deg);
      }

      .quick-add-content {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
        margin-top: 0;
      }

      .panel-card.collapsed .quick-add-content {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        margin-top: -4px;
      }

      .quick-add-inner {
        overflow: hidden;
        display: grid;
        gap: 0;
        padding: 14px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(241, 245, 249, 0.72) 0%, rgba(226, 232, 240, 0.62) 100%);
        border: 1px solid rgba(148, 163, 184, 0.18);
      }

      .quick-add-intro {
        margin: 0 0 16px;
        max-width: 64ch;
        color: #475569;
        line-height: 1.5;
      }

      .cta-block {
        display: grid;
        gap: 12px;
        align-items: start;
        padding-top: 6px;
      }

      .flyer-readiness-status {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 251, 235, 0.82);
        color: #92400e;
      }

      .flyer-readiness-status[hidden] {
        display: none;
      }

      .flyer-readiness-status.is-complete {
        background: rgba(236, 253, 245, 0.84);
        border-color: rgba(34, 197, 94, 0.22);
        color: #166534;
      }

      .flyer-readiness-status strong,
      .flyer-readiness-status small {
        display: block;
      }

      .flyer-readiness-status strong {
        font-size: 0.9rem;
      }

      .flyer-readiness-status small {
        margin-top: 2px;
        font-size: 0.8rem;
        line-height: 1.35;
      }

      .flyer-readiness-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.16);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .flyer-readiness-status.is-complete .flyer-readiness-icon {
        background: rgba(22, 163, 74, 0.16);
      }

      .cta-guidance {
        margin: 0;
        color: rgba(212, 223, 242, 0.72);
        font-size: 0.94rem;
      }

      .cta-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .section-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .section-pill {
        position: relative;
      }

      .section-pill input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .section-pill span {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 15px;
        border-radius: 16px;
        border: 1px solid rgba(171, 193, 226, 0.12);
        background: rgba(255, 255, 255, 0.08);
        font-weight: 600;
        color: rgba(235, 242, 255, 0.92);
      }

      .section-pill input:checked + span {
        background: rgba(47, 107, 255, 0.14);
        border-color: rgba(74, 141, 255, 0.28);
        color: var(--brand-strong);
      }

      .mode-selector {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .mode-card {
        border: 1px solid rgba(171, 193, 226, 0.12);
        border-radius: 18px;
        background: rgba(7, 16, 29, 0.34);
        padding: 16px;
        text-align: left;
        display: grid;
        gap: 8px;
        color: #f5f8ff;
      }

      .mode-card.active {
        border-color: rgba(74, 141, 255, 0.28);
        background: rgba(47, 107, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.1);
      }

      .mode-card.locked {
        background: rgba(47, 107, 255, 0.06);
      }

      .mode-label {
        font-weight: 800;
      }

      .mode-copy {
        margin: 0;
        font-size: 0.9rem;
        color: rgba(209, 221, 240, 0.74);
        line-height: 1.5;
      }

      .mode-note {
        font-size: 0.84rem;
        color: var(--brand-strong);
        font-weight: 700;
      }

      .output-shell {
        display: grid;
        gap: 16px;
      }

      @media (min-width: 1081px) {
        .panel-card.output-shell {
          position: sticky;
          top: 24px;
          align-self: start;
          max-height: calc(100vh - 48px);
          overflow-y: auto;
          overscroll-behavior: contain;
        }
      }

      .output-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding-bottom: 2px;
      }

      .output-status {
        margin: 0;
        color: #475569;
        font-size: 0.9rem;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }

      .output-status.is-success {
        color: #1d4ed8;
        background: rgba(234, 241, 255, 0.96);
        border-color: rgba(59, 130, 246, 0.22);
      }

      .output-status.is-error {
        color: #b91c1c;
        background: rgba(254, 242, 242, 0.96);
        border-color: rgba(248, 113, 113, 0.24);
      }

      .output-status.is-neutral {
        color: #475569;
      }

      .form-status {
        margin: 12px 0 0;
        color: #475569;
        font-size: 0.9rem;
        min-height: 0;
        display: none;
        align-items: center;
        padding: 8px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }

      .form-status.is-visible {
        display: inline-flex;
      }

      .form-status.is-error {
        color: #b91c1c;
        background: rgba(254, 242, 242, 0.96);
        border-color: rgba(248, 113, 113, 0.24);
      }

      .beta-usage-copy {
        margin: 10px 0 0;
        color: #64748b;
        font-size: 0.86rem;
        font-weight: 750;
        line-height: 1.35;
      }

      .beta-usage-copy[hidden] {
        display: none;
      }

      .beta-usage-copy.is-low {
        color: #9a3412;
      }

      .beta-usage-copy.is-empty {
        color: #b91c1c;
      }

      .output-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .refine-package-controls {
        display: grid;
        gap: 8px;
      }

      .refine-package-label {
        margin: 0;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
      }

      .output-card {
        min-height: 420px;
        padding: 30px;
        border-radius: 18px;
        background: #f3f4f6;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.8),
          0 10px 30px rgba(0, 0, 0, 0.08),
          0 0 0 1px rgba(47, 107, 255, 0.04);
      }

      .output-card .report-output:not(.empty) {
        display: grid;
        gap: 16px;
      }

      .before-after-slider-dragging,
      .before-after-slider-dragging * {
        user-select: none !important;
        -webkit-user-select: none !important;
      }

      .photo-preview-card {
        display: grid;
        gap: 18px;
      }

      .photo-preview-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(47, 107, 255, 0.12);
        border: 1px solid rgba(47, 107, 255, 0.16);
        color: #1d4ed8;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.03em;
      }

      .before-after-slider-host {
        width: 100%;
      }

      .before-after-slider-frame {
        width: min(100%, 900px);
        margin: 0 auto;
      }

      .before-after-slider {
        position: relative;
        width: 100%;
        height: clamp(340px, 52vw, 480px);
        overflow: hidden;
        border-radius: 20px;
        background:
          radial-gradient(circle at top, rgba(255, 255, 255, 0.52), transparent 42%),
          linear-gradient(180deg, rgba(226, 232, 240, 0.86), rgba(236, 242, 247, 0.98));
        box-shadow:
          inset 0 8px 18px rgba(255, 255, 255, 0.28),
          inset 0 -8px 18px rgba(15, 23, 42, 0.05),
          inset 0 1px 0 rgba(255, 255, 255, 0.8),
          0 12px 28px rgba(15, 23, 42, 0.08);
        cursor: ew-resize;
        touch-action: none;
      }

      .before-after-slider__image {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .before-after-slider__img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
      }

      .before-after-slider__labels {
        position: absolute;
        inset: 14px 14px auto 14px;
        display: flex;
        justify-content: space-between;
        z-index: 3;
        pointer-events: none;
      }

      .before-after-slider__label {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.62);
        color: #f8fafc;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
      }

      .before-after-slider__handle {
        position: absolute;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
        width: 56px;
        border: 0;
        background: transparent;
        padding: 0;
        z-index: 4;
        cursor: ew-resize;
      }

      .before-after-slider__divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
      }

      .before-after-slider__knob {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.96);
        color: #1d4ed8;
        border: 1px solid rgba(47, 107, 255, 0.14);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
      }

      .before-after-slider__knob-arrows {
        font-size: 1rem;
        line-height: 1;
        transform: translateY(-1px);
      }

      .before-after-slider.is-dragging .before-after-slider__knob,
      .before-after-slider:hover .before-after-slider__knob {
        transform: translate(-50%, -50%) scale(1.04);
      }

      .photo-preview-note {
        margin: 0;
        color: #64748b;
        font-size: 0.9rem;
      }

      .photo-preview-benefits {
        display: grid;
        gap: 12px;
        padding: 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      }

      .photo-preview-benefits-title {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
      }

      .photo-preview-benefits-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .photo-preview-benefits-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #334155;
        font-size: 0.94rem;
        line-height: 1.35;
      }

      .photo-preview-benefits-list li::before {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(34, 197, 94, 0.12);
        color: #15803d;
        font-size: 0.84rem;
        font-weight: 900;
        flex: 0 0 auto;
        margin-top: 1px;
      }

      @media (max-width: 520px) {
        .photo-preview-benefits-list {
          grid-template-columns: 1fr;
        }
      }

      .photo-preview-layout {
        display: grid;
        gap: 18px;
      }

      .feature-preview-card {
        display: grid;
        gap: 18px;
      }

      .feature-preview-label {
        margin: 0;
      }

      .feature-preview-title {
        margin: 0;
        font-size: 1.32rem;
        color: #0f172a;
      }

      .feature-preview-copy {
        margin: 0;
        color: #475569;
        line-height: 1.65;
      }

      .feature-preview-list {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .feature-preview-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #334155;
        font-weight: 600;
      }

      .feature-preview-list li::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #2f6bff;
        box-shadow: 0 0 0 5px rgba(47, 107, 255, 0.12);
        flex: 0 0 auto;
      }

      .virtual-staging-form {
        display: grid;
        gap: 16px;
      }

      .virtual-staging-options {
        display: grid;
        gap: 10px;
      }

      .photo-enhancer-options-panel {
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 18px;
        background: rgba(248, 250, 252, 0.76);
        overflow: hidden;
      }

      .photo-enhancer-options-panel[open] {
        background: rgba(248, 250, 252, 0.88);
      }

      .photo-enhancer-options-summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        cursor: pointer;
        user-select: none;
      }

      .photo-enhancer-options-summary::-webkit-details-marker {
        display: none;
      }

      .photo-enhancer-options-summary::after {
        content: "";
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        border-right: 2px solid rgba(71, 85, 105, 0.82);
        border-bottom: 2px solid rgba(71, 85, 105, 0.82);
        transform: rotate(45deg);
        transition: transform 160ms ease;
      }

      .photo-enhancer-options-panel[open] .photo-enhancer-options-summary::after {
        transform: rotate(225deg);
      }

      .photo-enhancer-options-summary .fieldset-label {
        margin: 0;
      }

      .photo-enhancer-options-summary-meta {
        margin-left: auto;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.08);
        color: #4f46e5;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .photo-enhancer-options-body {
        padding: 0 16px 16px;
      }

      .photo-enhancer-checkbox-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
      }

      .photo-enhancer-option {
        min-height: 24px;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(248, 250, 252, 0.7);
        font-size: 0.84rem;
        font-weight: 700;
      }

      .photo-enhancer-option input {
        appearance: none;
        -webkit-appearance: none;
        display: block;
        box-sizing: border-box;
        flex: 0 0 18px;
        width: 18px;
        min-width: 18px;
        max-width: 18px;
        height: 18px;
        min-height: 18px;
        max-height: 18px;
        aspect-ratio: 1 / 1;
        margin: 0;
        padding: 0;
        line-height: 0;
        align-self: center;
        border-radius: 999px;
        border: 1.5px solid rgba(148, 163, 184, 0.7);
        background: #ffffff;
        box-shadow: inset 0 0 0 0 rgba(18, 58, 140, 1);
        transition:
          background-color 140ms ease,
          border-color 140ms ease,
          box-shadow 140ms ease,
          transform 140ms ease;
      }

      .photo-enhancer-option input:checked {
        border-color: #123a8c;
        background: #123a8c;
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92);
      }

      .photo-enhancer-option:hover input {
        border-color: rgba(18, 58, 140, 0.75);
      }

      .staging-segmented-control {
        display: inline-grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        width: min(100%, 560px);
        padding: 4px;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.74);
      }

      .staging-segment {
        min-height: 42px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: #475569;
        font-weight: 850;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
          transform 0.2s ease, box-shadow 0.2s ease;
      }

      .staging-segment:hover {
        background: #f8faff;
        border-color: #2f6bff;
        color: #0f172a;
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 8px 18px rgba(47, 107, 255, 0.1);
      }

      .staging-segment.active {
        background: linear-gradient(180deg, #2b63e8 0%, #1a49c8 14%, #0f2f7f 52%, #081634 100%);
        border-color: rgba(147, 197, 253, 0.14);
        color: #ffffff;
        box-shadow:
          0 10px 22px rgba(15, 23, 42, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.32),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
      }

      .staging-segment.active:hover {
        border-color: rgba(96, 165, 250, 0.42);
        background: linear-gradient(180deg, #376ff1 0%, #1d53d6 14%, #12398c 52%, #081634 100%);
        color: #f8fafc;
        transform: translateY(-2px);
        box-shadow:
          0 14px 28px rgba(15, 23, 42, 0.22),
          0 0 0 1px rgba(96, 165, 250, 0.12),
          0 0 18px rgba(59, 130, 246, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.34),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
      }

      .virtual-staging-upload {
        position: relative;
        display: grid;
        min-height: 250px;
        place-items: center;
        padding: 14px;
        border-radius: 18px;
        border: 1px dashed rgba(47, 107, 255, 0.3);
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.1), transparent 46%),
          rgba(255, 255, 255, 0.78);
        text-align: center;
        cursor: pointer;
        overflow: hidden;
      }

      .virtual-staging-upload.has-image {
        border-style: solid;
        background: rgba(248, 250, 252, 0.92);
      }

      .virtual-staging-upload.is-drag-over {
        border-color: rgba(47, 107, 255, 0.72);
        border-width: 2px;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.16), transparent 46%),
          rgba(239, 246, 255, 0.86);
      }

      .virtual-staging-preview-frame {
        width: 100%;
        display: grid;
        place-items: center;
        border-radius: 14px;
        overflow: hidden;
        background: rgba(241, 245, 249, 0.86);
      }

      .virtual-staging-preview-frame[hidden],
      .virtual-staging-empty[hidden],
      .staging-compliance-summary[hidden],
      #staging-result-slider-wrap[hidden],
      #staging-download-row[hidden],
      #photo-enhancer-result-slider-wrap[hidden],
      #photo-enhancer-download-row[hidden],
      #photo-enhancer-compliance-summary[hidden] {
        display: none;
      }

      .virtual-staging-preview {
        width: 100%;
        max-height: min(58vh, 520px);
        display: block;
        object-fit: contain;
        object-position: center;
        border-radius: 14px;
      }

      .virtual-staging-result-card {
        display: grid;
        gap: 18px;
      }

      .photo-enhancer-checkbox-grid .profile-checkbox {
        min-height: 100%;
      }

      .virtual-staging-empty {
        min-height: 300px;
        display: grid;
        place-items: center;
        gap: 10px;
        padding: 24px;
        border-radius: 18px;
        border: 1px dashed rgba(148, 163, 184, 0.28);
        background: rgba(248, 250, 252, 0.72);
        color: #64748b;
        text-align: center;
        font-weight: 700;
      }

      .staging-compliance-summary {
        margin: -4px 0 0;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(248, 250, 252, 0.86);
        color: #475569;
        font-size: 0.92rem;
        font-weight: 700;
        text-align: center;
      }

      @media (max-width: 720px) {
        .photo-enhancer-options-summary {
          padding: 13px 14px;
        }

        .photo-enhancer-options-body {
          padding: 0 14px 14px;
        }

        .photo-enhancer-checkbox-grid {
          grid-template-columns: 1fr;
        }
      }

      .photo-request-modal-shell {
        width: min(560px, 100%);
      }

      .photo-request-form {
        display: grid;
        gap: 16px;
      }

      .photo-request-copy {
        margin: 0;
        color: #475569;
        line-height: 1.6;
      }

      .output-footer-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding-top: 2px;
        flex-wrap: wrap;
      }

      .listing-output-actions {
        display: grid;
        justify-content: stretch;
        gap: 10px;
      }

      .listing-primary-action-row,
      .listing-secondary-action-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
      }

      .listing-create-flyer-btn {
        min-height: 52px;
        padding-inline: 24px;
        border-radius: 14px;
        box-shadow: 0 14px 30px rgba(47, 107, 255, 0.3);
      }

      .listing-create-flyer-btn.is-next-step:not(:disabled) {
        animation: listing-create-flyer-glow 10s ease-in-out infinite;
      }

      .listing-secondary-action-row .btn {
        background: rgba(255, 255, 255, 0.36);
        border-color: rgba(47, 107, 255, 0.18);
        color: #1f2937;
        box-shadow: none;
      }

      .listing-copy-btn {
        min-width: 172px;
      }

      .listing-copy-btn.is-copied {
        border-color: rgba(47, 107, 255, 0.48);
        background: rgba(239, 246, 255, 0.78);
        box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
        color: #123a8c;
      }

      .listing-output-actions .btn:disabled {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      @keyframes listing-create-flyer-glow {
        0%,
        82%,
        100% {
          box-shadow: 0 14px 30px rgba(47, 107, 255, 0.3);
        }
        88% {
          box-shadow:
            0 14px 30px rgba(47, 107, 255, 0.3),
            0 0 0 4px rgba(47, 107, 255, 0.1),
            0 0 28px rgba(47, 107, 255, 0.38);
        }
        94% {
          box-shadow:
            0 14px 30px rgba(47, 107, 255, 0.3),
            0 0 0 7px rgba(47, 107, 255, 0.04),
            0 0 18px rgba(47, 107, 255, 0.2);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .listing-create-flyer-btn.is-next-step:not(:disabled) {
          animation: none;
        }
      }

      .saved-drafts {
        display: grid;
        gap: 14px;
        padding: 18px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
      }

      .saved-drafts-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .saved-drafts-title {
        margin: 0;
        font-size: 0.98rem;
        font-weight: 700;
        color: #0f172a;
      }

      .saved-drafts-copy {
        margin: 0;
        font-size: 0.88rem;
        color: #64748b;
      }

      .saved-drafts-list {
        display: grid;
        gap: 12px;
      }

      .saved-draft-item {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 14px;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.18);
      }

      .saved-draft-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }

      .saved-draft-time {
        font-size: 0.82rem;
        color: #64748b;
      }

      .saved-draft-preview {
        margin: 0;
        color: #334155;
        line-height: 1.55;
      }

      .saved-draft-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .saved-drafts-empty {
        margin: 0;
        color: #64748b;
        font-size: 0.92rem;
      }

      .report-output {
        color: #1f2937;
        line-height: 1.7;
      }

      .listing-package-section {
        padding: 20px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 8px 20px rgba(15, 23, 42, 0.05);
        scroll-margin-top: 32px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      }

      .listing-package-section.is-focused {
        border-color: rgba(47, 107, 255, 0.28);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.82),
          0 12px 28px rgba(47, 107, 255, 0.12);
      }

      .listing-package-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }

      .listing-package-title {
        margin: 0;
        font-size: 1.04rem;
        font-weight: 800;
        color: #0f172a;
      }

      .listing-package-copy {
        min-width: 88px;
      }

      .listing-package-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .listing-package-inline-option {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #475569;
        margin-right: 2px;
      }

      .listing-package-inline-option input {
        margin: 0;
        inline-size: 16px;
        block-size: 16px;
      }

      .listing-package-regenerate {
        min-width: 116px;
      }

      .listing-package-regenerate.is-loading {
        cursor: progress;
        opacity: 0.8;
      }

      .listing-package-copy-wrap,
      .listing-package-regenerate-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
      }

      .listing-section-feedback {
        position: absolute;
        top: 50%;
        left: calc(100% + 8px);
        transform: translateY(-50%) translateX(-4px);
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.96);
        color: #334155;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      }

      .listing-section-feedback.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
      }

      .listing-section-feedback.is-success {
        color: #1d4ed8;
        border-color: rgba(59, 130, 246, 0.2);
        background: rgba(234, 241, 255, 0.98);
      }

      .listing-section-feedback.is-error {
        color: #b91c1c;
        border-color: rgba(248, 113, 113, 0.2);
        background: rgba(254, 242, 242, 0.98);
      }

      .listing-package-body {
        display: grid;
        gap: 14px;
      }

      .listing-package-body p {
        margin: 0;
        color: #334155;
      }

      .listing-package-body ul {
        margin: 0;
        padding-left: 1.15rem;
        color: #334155;
      }

      .listing-package-body li + li {
        margin-top: 8px;
      }

      .listing-package-email-subject {
        display: grid;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(248, 250, 252, 0.96);
        border: 1px solid rgba(148, 163, 184, 0.16);
      }

      .listing-package-email-label {
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
      }

      .listing-package-email-value {
        margin: 0;
        font-size: 0.98rem;
        font-weight: 700;
        color: #0f172a;
      }

      .listing-package-video-lines {
        display: grid;
        gap: 8px;
      }

      .listing-package-video-lines p {
        margin: 0;
      }

      .report-output.empty {
        color: #64748b;
        display: grid;
        place-items: center;
        min-height: 300px;
        text-align: center;
        padding: 24px;
        border: 1px dashed rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.08), transparent 42%),
          rgba(255, 255, 255, 0.82);
        position: relative;
      }

      .report-output-empty-state {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 14px;
      }

      .report-output-empty-logo {
        width: 126px;
        height: 126px;
        opacity: 0.7;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(47, 107, 255, 0.12));
      }

      .report-output-empty-copy {
        margin: 0;
      }

      .report-output.loading {
        color: #334155;
        display: grid;
        place-items: center;
        min-height: 300px;
        text-align: center;
        padding: 24px;
        border: 1px dashed rgba(47, 107, 255, 0.12);
        border-radius: 20px;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.1), transparent 44%),
          rgba(255, 255, 255, 0.86);
      }

      .listing-output-loading {
        display: grid;
        justify-items: center;
        gap: 14px;
        max-width: 360px;
      }

      .listing-output-spinner {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        border: 3px solid rgba(47, 107, 255, 0.16);
        border-top-color: #2f6bff;
        animation: listing-output-spin 0.8s linear infinite;
      }

      .listing-output-loading-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
      }

      .listing-output-loading-copy {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.6;
        color: #64748b;
      }

      @keyframes listing-output-spin {
        to {
          transform: rotate(360deg);
        }
      }

      #btn-generate-listing,
      #btn-create-flyer-from-listing,
      #btn-generate-flyer-copy,
      #btn-generate-staging {
        position: relative;
        overflow: hidden;
        min-height: 52px;
        padding: 18px 28px;
        border-radius: 14px;
        font-size: 1.03rem;
        font-weight: 800;
        background: linear-gradient(180deg, #3f7cff 0%, #1f57df 16%, #123a8c 55%, #0a1f44 100%);
        box-shadow:
          0 12px 28px rgba(47, 107, 255, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.38),
          inset 0 -10px 18px rgba(8, 20, 52, 0.24);
      }

      #btn-generate-listing::before,
      #btn-create-flyer-from-listing::before,
      #btn-generate-flyer-copy::before,
      #btn-generate-staging::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.14) 24%, rgba(255, 255, 255, 0) 52%),
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 58%);
        pointer-events: none;
      }

      #btn-generate-listing::after,
      #btn-create-flyer-from-listing::after,
      #btn-generate-flyer-copy::after,
      #btn-generate-staging::after {
        content: "";
        position: absolute;
        top: -35%;
        left: -38%;
        width: 26%;
        height: 180%;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0)
        );
        transform: rotate(18deg);
        pointer-events: none;
        animation: listing-button-shimmer 2.8s ease-in-out infinite;
      }

      #btn-generate-listing:hover,
      #btn-create-flyer-from-listing:hover,
      #btn-generate-flyer-copy:hover,
      #btn-generate-staging:hover {
        transform: scale(1.03);
        filter: brightness(1.07) saturate(1.05);
        box-shadow:
          0 14px 30px rgba(47, 107, 255, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.42),
          inset 0 -10px 18px rgba(8, 20, 52, 0.26);
      }

      #btn-generate-listing[disabled]::after,
      #btn-create-flyer-from-listing[disabled]::after,
      #btn-generate-flyer-copy[disabled]::after,
      #btn-generate-staging[disabled]::after {
        animation-play-state: paused;
        opacity: 0.4;
      }

      @keyframes listing-button-shimmer {
        0% {
          left: -38%;
          opacity: 0;
        }
        12% {
          opacity: 1;
        }
        32% {
          left: 118%;
          opacity: 0;
        }
        100% {
          left: 118%;
          opacity: 0;
        }
      }

      .report-output h2,
      .report-output h3,
      .report-output h4 {
        margin: 0 0 8px;
        font-weight: 700;
        line-height: 1.25;
      }

      .report-output h3 {
        font-size: 1.02rem;
      }

      .report-output p {
        margin: 0 0 14px;
      }

      .report-output ul {
        margin: 0 0 14px 1.2rem;
        padding: 0;
      }

      .report-output li {
        margin-bottom: 8px;
      }

      .report-output hr {
        border: 0;
        border-top: 1px solid rgba(172, 196, 232, 0.12);
        margin: 18px 0;
      }

      .report-output .section-block + .section-block {
        margin-top: 18px;
      }

      .flyer-guided-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
      }

      .flyer-guided-main {
        position: relative;
        z-index: 3;
        isolation: isolate;
        min-width: 0;
      }

      .flyer-panel-grid {
        display: grid;
        grid-template-columns: minmax(170px, 0.46fr) minmax(640px, 1.54fr);
        gap: 22px;
        align-items: start;
      }

      .flyer-setup-stack {
        gap: 16px;
      }

      .flyer-setup-stack .panel-card {
        padding: 22px;
      }

      .flyer-setup-hero {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 18px;
        align-items: center;
        margin-bottom: 18px;
      }

      .flyer-setup-hero-badge {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        min-height: 52px;
        padding: 0 18px;
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 42%),
          linear-gradient(180deg, #4077ea 0%, #2558c8 34%, #123a8c 72%, #0a1f44 100%);
        color: #ffffff;
        border: 1px solid rgba(86, 129, 217, 0.2);
        box-shadow:
          0 10px 24px rgba(17, 43, 95, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -8px 14px rgba(8, 20, 52, 0.16);
        font-size: 1.02rem;
        font-weight: 800;
        text-shadow: 0 1px 0 rgba(8, 20, 52, 0.22);
      }

      .flyer-setup-hero-badge::before {
        content: "";
        position: absolute;
        inset: 1px 1px auto 1px;
        height: 40%;
        border-radius: 15px 15px 24px 24px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 68%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
        z-index: 0;
      }

      .flyer-setup-hero-badge > * {
        position: relative;
        z-index: 1;
      }

      .flyer-setup-hero-copy {
        margin: 0;
        color: #64748b;
        font-size: 1rem;
        line-height: 1.45;
      }

      .flyer-setup-stack .field-grid.four-up {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .flyer-setup-section {
        display: grid;
        gap: 12px;
      }

      .flyer-setup-section + .flyer-setup-section,
      .flyer-setup-section + .flyer-open-house-details {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .flyer-setup-section .fieldset-label,
      .flyer-open-house-details .fieldset-label {
        margin: 0;
      }

      .flyer-setup-section .field-grid {
        grid-template-columns: repeat(14, minmax(0, 1fr));
        gap: 16px;
      }

      .flyer-setup-section .field.full {
        grid-column: 1 / -1;
      }

      #field-flyer-price {
        grid-column: span 4;
      }

      #field-flyer-beds {
        grid-column: span 2;
      }

      #field-flyer-baths,
      #field-flyer-sqft {
        grid-column: span 2;
      }

      #field-flyer-property-type {
        grid-column: span 4;
      }

      #field-flyer-property-type label {
        white-space: nowrap;
      }

      #flyer-price {
        font-size: 0.88rem;
        padding-left: 11px;
        padding-right: 11px;
      }

      .flyer-content-section {
        display: grid;
        gap: 10px;
      }

      .flyer-content-section + .flyer-content-section {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .flyer-content-section .fieldset-label {
        margin: 0;
      }

      .flyer-content-section .field-grid {
        gap: 14px;
      }

      .flyer-content-section.template-minimal-copy .field.is-template-hidden {
        display: none;
      }

      .flyer-content-section.template-minimal-copy {
        gap: 14px;
      }

      .flyer-details-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        align-items: start;
      }

      .flyer-details-grid > .field {
        min-width: 0;
      }

      #field-flyer-type {
        max-width: 240px;
      }

      #field-flyer-type select {
        min-height: 60px;
        height: 60px;
        font-size: 1.05rem;
        font-weight: 700;
      }

      .flyer-template-summary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        justify-content: end;
        min-width: 210px;
        padding-top: 22px;
      }

      .flyer-style-field {
        display: grid;
        gap: 10px;
        width: 100%;
        grid-column: 1 / -1;
      }

      .flyer-style-picker-button {
        width: 100%;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
          "art copy"
          "art action";
        align-items: start;
        column-gap: 20px;
        row-gap: 10px;
        padding: 18px 22px;
        border-radius: 22px;
        border: 1px solid rgba(59, 130, 246, 0.24);
        background:
          radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%),
          rgba(255, 255, 255, 0.9);
        box-shadow:
          0 14px 30px rgba(15, 23, 42, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.52);
        text-align: left;
      }

      .flyer-style-picker-button.is-empty {
        grid-template-columns: 124px minmax(0, 1fr);
        align-items: center;
        column-gap: 24px;
        row-gap: 8px;
        padding: 18px 26px;
        border-style: dashed;
        border-color: rgba(59, 130, 246, 0.28);
        background:
          radial-gradient(circle at top left, rgba(59, 130, 246, 0.05), transparent 30%),
          rgba(255, 255, 255, 0.88);
      }

      .flyer-style-picker-button:focus-visible {
        outline: 2px solid rgba(47, 107, 255, 0.46);
        outline-offset: 3px;
      }

      .flyer-style-picker-art {
        grid-area: art;
        position: relative;
        width: 96px;
        height: 124px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(248, 250, 252, 0.96);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
      }

      .flyer-style-picker-button.has-selected-preview .flyer-style-picker-art {
        cursor: zoom-in;
      }

      .flyer-style-picker-button.is-empty .flyer-style-picker-art {
        width: 92px;
        height: 112px;
        border-style: dashed;
        box-shadow: none;
        justify-self: center;
      }

      .flyer-selected-style-thumb {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .flyer-selected-style-thumb[hidden],
      .flyer-selected-style-thumb-empty[hidden] {
        display: none !important;
      }

      .flyer-selected-style-thumb-empty {
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
      }

      .flyer-selected-style-zoom-hint {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 1;
        display: inline-flex;
        justify-content: center;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.82);
        color: #ffffff;
        font-size: 0.66rem;
        font-weight: 800;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        pointer-events: none;
      }

      .flyer-style-picker-button.has-selected-preview:hover .flyer-selected-style-zoom-hint,
      .flyer-style-picker-button.has-selected-preview:focus-visible .flyer-selected-style-zoom-hint {
        opacity: 1;
        transform: translateY(0);
      }

      .flyer-style-picker-copy {
        grid-area: copy;
        display: grid;
        gap: 4px;
        min-width: 0;
        align-content: start;
      }

      .flyer-style-picker-copy strong {
        color: #0f172a;
        font-size: 1.12rem;
        line-height: 1.1;
      }

      .flyer-style-picker-copy small {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .flyer-style-picker-button.is-empty .flyer-style-picker-copy strong {
        font-size: 1.08rem;
        max-width: none;
      }

      .flyer-style-picker-button.is-empty .flyer-style-picker-copy small {
        -webkit-line-clamp: 2;
        max-width: none;
      }

      .flyer-style-picker-button.is-empty .flyer-style-picker-copy,
      .flyer-style-picker-button.is-empty .flyer-style-picker-action {
        align-self: center;
      }

      .flyer-style-picker-action {
        grid-area: action;
        justify-self: start;
        color: #2563eb;
        font-size: 0.84rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        opacity: 0.9;
        white-space: nowrap;
      }

      .flyer-download-row[hidden] {
        display: none !important;
      }

      #flyer-type-helper {
        max-width: 34ch;
      }

      .flyer-open-house-details {
        margin: 14px 0 0;
        padding: 10px 12px 12px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 14px;
        background: rgba(248, 250, 252, 0.78);
      }

      .flyer-open-house-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
      }

      .flyer-photo-upload {
        position: relative;
        display: block;
        min-height: 220px;
        padding: 10px;
        border-radius: 18px;
        border: 1px dashed rgba(47, 107, 255, 0.28);
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.08), transparent 42%),
          rgba(255, 255, 255, 0.74);
        text-align: center;
        overflow: hidden;
      }

      .flyer-photo-upload.has-image {
        padding: 10px;
        border-style: solid;
        background: rgba(248, 250, 252, 0.92);
      }

      .flyer-photo-upload.is-drag-over {
        border-color: rgba(47, 107, 255, 0.72);
        border-width: 2px;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.16), transparent 46%),
          rgba(239, 246, 255, 0.86);
      }

      .flyer-photo-empty {
        display: grid;
        gap: 10px;
        justify-items: center;
      }

      .flyer-photo-empty[hidden],
      .flyer-photo-preview[hidden] {
        display: none;
      }

      .flyer-photo-preview-frame {
        width: 100%;
        height: clamp(220px, 28vw, 280px);
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(248, 250, 252, 0.88);
        overflow: hidden;
      }

      .flyer-photo-upload.has-image .flyer-photo-preview-frame {
        width: min(100%, 560px);
        height: auto;
        min-height: clamp(280px, 36vw, 380px);
        margin: 0 auto;
        padding: 0;
        overflow: visible;
      }

      .flyer-photo-upload.has-image.is-portrait .flyer-photo-preview-frame {
        width: min(100%, 520px);
        min-height: clamp(420px, 58vw, 620px);
      }

      .flyer-photo-upload.has-image.is-landscape .flyer-photo-preview-frame {
        width: min(100%, 760px);
        min-height: clamp(260px, 34vw, 400px);
      }

      .flyer-photo-preview {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(70vh, 620px);
        display: block;
        object-fit: contain;
        object-position: center;
        border-radius: 14px;
      }

      .flyer-photo-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .flyer-photo-actions[hidden] {
        display: none;
      }

      .flyer-supporting-images-field {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
      }

      .flyer-supporting-compact-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 7px;
      }

      .flyer-supporting-compact-header .fieldset-label {
        margin: 0;
      }

      .flyer-supporting-photo-style-hint {
        margin: 0;
        color: #64748b;
        font-size: 0.88rem;
        font-weight: 700;
        line-height: 1.35;
      }

      .flyer-supporting-photo-style-hint[hidden] {
        display: none;
      }

      .flyer-supporting-photo-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }

      .flyer-supporting-photo-upload {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 104px;
        height: 104px;
        padding: 10px;
        border-radius: 12px;
        border: 1px dashed rgba(47, 107, 255, 0.3);
        background: rgba(255, 255, 255, 0.62);
        color: #1f2937;
        font-weight: 700;
        text-align: center;
      }

      .flyer-supporting-photo-upload[hidden] {
        display: none;
      }

      .flyer-supporting-photo-upload.is-disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }

      .flyer-supporting-photo-upload.is-drag-over {
        border-color: rgba(47, 107, 255, 0.72);
        background: rgba(239, 246, 255, 0.9);
        color: #123a8c;
      }

      .flyer-supporting-photo-grid {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: start;
      }

      .flyer-supporting-photo-card {
        position: relative;
        width: 104px;
        height: 104px;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.18);
      }

      .flyer-supporting-photo-card img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .flyer-supporting-photo-remove {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        background: rgba(255, 255, 255, 0.86);
        color: #0f172a;
        font-size: 0.8rem;
        font-weight: 900;
        line-height: 1;
      }

      .flyer-logo-upload-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .branding-layout {
        display: grid;
        grid-template-columns: minmax(520px, 1fr) minmax(300px, 390px);
        gap: 32px;
        align-items: start;
      }

      .branding-logo-panel,
      .branding-colors-panel {
        min-width: 0;
        overflow: visible;
      }

      .branding-profile-card {
        display: grid;
        gap: 12px;
        min-width: 0;
        overflow: hidden;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
      }

      .branding-profile-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .branding-profile-display {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        min-width: 0;
      }

      .branding-profile-headshot {
        display: grid;
        gap: 0;
      }

      .branding-profile-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

      .branding-profile-name {
        margin: 0;
        color: #0f172a;
        font-size: 1.04rem;
        font-weight: 900;
        line-height: 1.25;
      }

      .branding-profile-brokerage,
      .branding-profile-realtor,
      .branding-profile-contact {
        margin: 0;
        color: #475569;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }

      .branding-profile-contact {
        color: #64748b;
        font-weight: 650;
      }

      .branding-profile-realtor {
        color: #334155;
        font-size: 0.76rem;
        font-weight: 900;
        line-height: 1.1;
      }

      .branding-profile-realtor sup {
        font-size: 0.58em;
      }

      .branding-profile-media-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
      }

      .branding-profile-media-actions .btn {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.82rem;
      }

      .media-empty-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.16);
        color: #64748b;
        font-size: 0.9rem;
      }

      .media-empty-logo {
        width: 126px;
        height: 126px;
        display: block;
        object-fit: contain;
        margin-bottom: 10px;
      }

      .branding-profile-copy .is-empty {
        color: #94a3b8;
      }

      .branding-profile-edit {
        justify-self: end;
        white-space: nowrap;
      }

      .branding-agent-edit {
        display: grid;
        gap: 10px;
        padding-top: 12px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .realtor-checkbox-field {
        align-content: center;
      }

      .realtor-toggle-control {
        width: fit-content;
        min-height: 30px;
        align-items: center;
        gap: 8px;
        padding: 0;
        font-size: 0.78rem;
        line-height: 1.2;
      }

      .realtor-toggle-control .brand-lock-track {
        width: 36px;
        height: 20px;
        padding: 2px;
        flex: 0 0 auto;
      }

      .realtor-toggle-control .brand-lock-thumb {
        width: 14px;
        height: 14px;
      }

      .realtor-toggle-control input:checked + .brand-lock-track .brand-lock-thumb {
        transform: translateX(16px);
      }

      .realtor-toggle-control sup {
        font-size: 0.58em;
      }

      .profile-checkbox {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(248, 250, 252, 0.78);
        color: #334155;
        font-size: 0.9rem;
        font-weight: 750;
        cursor: pointer;
      }

      .profile-checkbox input {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        accent-color: #2563eb;
      }

      .profile-checkbox sup {
        font-size: 0.58em;
      }

      .branding-agent-edit[hidden],
      .branding-profile-display[hidden],
      .branding-profile-edit[hidden] {
        display: none;
      }

      .branding-edit-actions {
        display: flex;
        justify-content: flex-end;
      }

      .branding-logo-footer {
        padding-top: 12px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .branding-reset-profile {
        width: fit-content;
        min-height: auto;
        padding: 2px 0;
        color: #64748b;
        font-size: 0.84rem;
        box-shadow: none;
      }

      .branding-reset-profile:hover {
        color: #0f172a;
      }

      .branding-colors-panel {
        display: grid;
        gap: 14px;
        min-width: 0;
        max-width: 390px;
        padding: 2px 0 0 30px;
        border-left: 1px solid rgba(148, 163, 184, 0.16);
        background: transparent;
        transition: border-color 0.18s ease;
      }

      .branding-colors-panel:has(#flyer-brand-colors-toggle:checked) {
        border-left-color: rgba(47, 107, 255, 0.28);
      }

      .branding-colors-panel:has(.brand-colors-section[hidden]) {
        display: none;
      }

      .branding-layout:has(.branding-colors-panel .brand-colors-section[hidden]) {
        grid-template-columns: 1fr;
      }

      .branding-layout:has(.branding-colors-panel .brand-colors-section:not([hidden])) {
        grid-template-columns: 1fr;
      }

      .branding-layout:has(.branding-colors-panel .brand-colors-section:not([hidden])) .branding-colors-panel {
        max-width: none;
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
      }

      .branding-colors-panel-inline {
        grid-column: 2;
        max-width: none;
        padding: 6px 0 0;
        border: 0;
        gap: 8px;
      }

      .flyer-logo-upload {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px dashed rgba(47, 107, 255, 0.3);
        background: rgba(255, 255, 255, 0.62);
        color: #1f2937;
        font-weight: 700;
      }

      .flyer-logo-upload[hidden] {
        display: none !important;
      }

      .flyer-logo-remove {
        min-height: auto;
        padding: 4px 2px;
        color: #64748b;
        background: transparent;
        border: 0;
        box-shadow: none;
        font-size: 0.86rem;
      }

      .flyer-logo-remove:hover {
        color: #0f172a;
        background: transparent;
      }

      .flyer-logo-preview-shell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, 220px);
        aspect-ratio: 1 / 1;
        height: auto;
        margin-top: 12px;
        padding: 18px;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: #f8fafc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }

      .branding-logo-footer .field {
        display: grid;
        grid-template-columns: minmax(180px, 220px) minmax(260px, 1fr);
        gap: 12px 18px;
        align-items: center;
      }

      .branding-logo-footer .flyer-logo-preview-shell {
        width: min(100%, 220px);
        min-height: 0;
        height: auto;
        margin-top: 0;
        padding: 18px;
        grid-row: span 3;
      }

      .branding-logo-footer .flyer-logo-upload-row {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 8px;
        align-self: end;
      }

      .flyer-logo-preview-shell.has-logo {
        background: rgba(248, 250, 252, 0.92);
      }

      .flyer-logo-preview-shell.is-drag-over {
        border-color: rgba(47, 107, 255, 0.72);
        background: rgba(47, 107, 255, 0.08);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.74),
          0 0 0 3px rgba(47, 107, 255, 0.1);
      }

      .flyer-logo-empty {
        display: grid;
        place-items: center;
        gap: 5px;
        color: var(--muted);
        font-size: 0.95rem;
        font-weight: 800;
        text-align: center;
        line-height: 1.25;
      }

      .flyer-logo-empty small,
      .flyer-headshot-empty small {
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 700;
      }

      .flyer-logo-empty small:last-child {
        color: #64748b;
        font-size: 0.74rem;
      }

      .flyer-logo-preview {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
      }

      .flyer-logo-preview[hidden],
      .flyer-logo-empty[hidden] {
        display: none !important;
      }

      .branding-agent-section {
        display: grid;
        gap: 10px;
      }

      .branding-agent-section .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .flyer-headshot-field {
        margin-top: 0;
        padding-top: 14px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .flyer-headshot-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .flyer-headshot-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .flyer-headshot-preview-shell {
        display: grid;
        place-items: center;
        width: 76px;
        height: 76px;
        margin-top: 0;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background: #f8fafc;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }

      .headshot-display-shell {
        cursor: pointer;
      }

      .headshot-display-shell:focus-visible {
        outline: 3px solid rgba(47, 107, 255, 0.34);
        outline-offset: 3px;
      }

      .flyer-headshot-preview-shell.has-headshot {
        border-radius: 999px;
      }

      .flyer-headshot-preview-shell.is-drag-over {
        border-color: rgba(47, 107, 255, 0.72);
        background: rgba(47, 107, 255, 0.08);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.74),
          0 0 0 3px rgba(47, 107, 255, 0.1);
      }

      .flyer-headshot-empty {
        padding: 8px;
        display: grid;
        place-items: center;
        gap: 2px;
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1.25;
        text-align: center;
      }

      .flyer-headshot-preview {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .flyer-headshot-preview[hidden],
      .flyer-headshot-empty[hidden] {
        display: none !important;
      }

      .flyer-profile-modal-shell {
        width: min(620px, 100%);
      }

      .flyer-profile-modal-shell .branding-agent-edit {
        padding-top: 0;
        border-top: 0;
      }

      .flyer-profile-headshot-editor {
        padding-top: 14px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .profile-headshot-editor-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .headshot-modal-shell {
        width: 96px;
        height: 96px;
        border-radius: 24px;
      }

      .headshot-modal-shell.has-headshot {
        border-radius: 999px;
      }

      .brand-colors-section {
        display: grid;
        gap: 8px;
        max-width: 360px;
        margin-top: 2px;
        padding-top: 2px;
        border-top: 0;
        position: relative;
        z-index: 2;
      }

      .branding-colors-panel-inline .brand-colors-section {
        max-width: 100%;
        margin-top: 0;
        padding-top: 0;
      }

      .brand-colors-section[hidden] {
        display: none;
      }

      .brand-colors-section.is-revealing {
        animation: brandColorsReveal 1s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: top center;
      }

      .panel-card.has-open-brand-popover {
        position: relative;
        z-index: 80;
        overflow: visible;
      }

      .brand-palette-mode-group {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .brand-palette-mode {
        min-height: 40px;
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.58);
        color: #1e293b;
        font-weight: 800;
      }

      .brand-palette-mode.active {
        background: linear-gradient(135deg, #0a1f44 0%, #123a8c 55%, #2f6bff 100%);
        color: #ffffff;
        border-color: rgba(47, 107, 255, 0.36);
      }

      .brand-logo-color-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }

      .brand-logo-color-actions .helper-text:not(:empty) {
        color: #166534;
        font-weight: 800;
      }

      .brand-logo-color-actions .helper-text.is-error {
        color: #b42318;
        font-weight: 700;
      }

      .brand-lock-control,
      .brand-apply-control {
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #1f2937;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
      }

      .brand-apply-control {
        width: 100%;
        margin-top: 0;
        align-items: flex-start;
      }

      .branding-logo-footer .flyer-logo-upload-row .brand-apply-control {
        width: auto;
        margin-left: 4px;
        flex: 1 1 260px;
        min-width: min(100%, 240px);
      }

      .brand-apply-control small {
        display: block;
        margin-top: 3px;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.35;
      }

      .brand-apply-control.is-disabled {
        opacity: 0.62;
        cursor: not-allowed;
      }

      .brand-apply-control.is-disabled .brand-lock-track {
        background: rgba(148, 163, 184, 0.16);
        border-color: rgba(148, 163, 184, 0.2);
      }

      .brand-lock-control input,
      .brand-apply-control input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .brand-lock-track {
        width: 44px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        flex: 0 0 auto;
        padding: 2px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.26);
        border: 1px solid rgba(148, 163, 184, 0.28);
        transition: background 0.18s ease, border-color 0.18s ease;
      }

      .brand-lock-thumb {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #ffffff;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.14);
        transition: transform 0.18s ease;
      }

      .brand-lock-control input:checked + .brand-lock-track,
      .brand-apply-control input:checked + .brand-lock-track {
        background: linear-gradient(135deg, #0a1f44 0%, #123a8c 55%, #2f6bff 100%);
        border-color: rgba(47, 107, 255, 0.36);
      }

      .brand-lock-control input:checked + .brand-lock-track .brand-lock-thumb,
      .brand-apply-control input:checked + .brand-lock-track .brand-lock-thumb {
        transform: translateX(20px);
      }

      .brand-lock-status {
        margin: -4px 0 0;
        color: #2563eb;
        font-weight: 700;
      }

      .brand-color-swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        max-width: 320px;
      }

      .brand-detected-colors {
        display: grid;
        gap: 6px;
        max-width: 340px;
      }

      .brand-detected-colors .fieldset-label,
      .brand-detected-colors .helper-text {
        margin: 0;
      }

      .brand-color-swatch {
        width: 50px;
        height: 30px;
        padding: 0;
        border-radius: 8px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.07);
        transition: transform 0.14s ease, box-shadow 0.14s ease, outline-color 0.14s ease;
      }

      .brand-color-swatch:hover,
      .brand-color-swatch:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12);
        outline: 2px solid rgba(47, 107, 255, 0.22);
        outline-offset: 2px;
      }

      .brand-color-swatch.is-applied {
        animation: brandSwatchApplied 0.42s ease;
      }

      .brand-color-picker-wrap {
        display: grid;
        gap: 8px;
        max-width: 360px;
      }

      .brand-color-field-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        align-items: start;
        overflow: visible;
      }

      .brand-color-field-wrap {
        position: relative;
      }

      .brand-color-field-wrap.is-picker-open {
        z-index: 30;
      }

      .brand-color-field {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid transparent;
        background: transparent;
        text-align: left;
        font-size: 0.86rem;
        font-weight: 800;
        color: #1f2937;
      }

      .brand-color-field.active {
        border-color: rgba(47, 107, 255, 0.46);
        background: rgba(47, 107, 255, 0.07);
        box-shadow: inset 3px 0 0 rgba(47, 107, 255, 0.72);
      }

      .brand-color-field-swatch {
        width: 54px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
      }

      .brand-contrast-warning {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 2px 0 0;
        padding: 9px 10px;
        border-radius: 10px;
        border: 1px solid rgba(245, 158, 11, 0.28);
        background: rgba(254, 243, 199, 0.72);
        color: #78350f;
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1.35;
      }

      .brand-contrast-warning[hidden] {
        display: none;
      }

      .brand-contrast-warning span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: rgba(245, 158, 11, 0.18);
        color: #92400e;
        font-size: 0.78rem;
        font-weight: 900;
      }

      .brand-color-popover {
        position: static;
        display: grid;
        gap: 8px;
        width: 100%;
        max-width: 320px;
        margin-top: 8px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
        animation: brandColorPopoverIn 0.14s ease;
      }

      .brand-color-popover::before {
        content: none;
      }

      .brand-color-popover.is-flipped {
        top: auto;
        bottom: auto;
      }

      .brand-color-popover.is-flipped::before {
        content: none;
      }

      .brand-color-popover[hidden] {
        display: none;
      }

      .brand-hex-field input {
        width: 100%;
        min-height: 42px;
        padding: 8px 11px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(248, 250, 252, 0.92);
        color: #0f172a;
        font-weight: 800;
        text-transform: uppercase;
      }

      .brand-hex-field {
        display: grid;
        gap: 4px;
        color: #334155;
        font-size: 0.78rem;
        font-weight: 800;
      }

      .brand-popover-preview {
        width: 100%;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.12);
      }

      .brand-spectrum {
        position: relative;
        height: 148px;
        border-radius: 12px;
        overflow: hidden;
        cursor: crosshair;
        touch-action: none;
        user-select: none;
        background:
          linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0)),
          linear-gradient(
            to right,
            #ff2d2d 0%,
            #ffd02d 17%,
            #47d75a 34%,
            #2dd8cc 50%,
            #2f6bff 67%,
            #ba4dff 84%,
            #ff2d2d 100%
          );
      }

      .brand-spectrum-marker {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        border: 2px solid #ffffff;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.34), 0 4px 10px rgba(15, 23, 42, 0.18);
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      .brand-popover-swatches {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
      }

      .brand-popover-swatch {
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.88);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
      }

      @keyframes brandColorPopoverIn {
        from {
          opacity: 0;
          transform: translateY(-3px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes brandSwatchApplied {
        0% {
          transform: scale(1);
          outline: 2px solid rgba(47, 107, 255, 0);
          outline-offset: 2px;
        }
        45% {
          transform: scale(1.06);
          outline: 2px solid rgba(47, 107, 255, 0.48);
          outline-offset: 3px;
        }
        100% {
          transform: scale(1);
          outline: 2px solid rgba(47, 107, 255, 0);
          outline-offset: 2px;
        }
      }

      @keyframes brandColorsReveal {
        0% {
          opacity: 0;
          transform: translateX(22px) translateY(-8px) scale(0.96);
          filter: blur(4px);
        }
        45% {
          opacity: 1;
          transform: translateX(0) translateY(0) scale(1.01);
          filter: blur(0);
        }
        100% {
          opacity: 1;
          transform: translateX(0) translateY(0) scale(1);
          filter: blur(0);
        }
      }

      .flyer-generated-section {
        margin-top: 0;
      }

      .flyer-preview-sidebar {
        position: sticky;
        top: 18px;
        z-index: 0;
        display: grid;
        gap: 18px;
        padding: 22px;
        max-height: calc(100vh - 36px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .flyer-preview-sidebar-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .flyer-preview-sidebar-title {
        margin: 0;
        color: #0f172a;
        font-size: 1.38rem;
        font-weight: 800;
        line-height: 1.2;
      }

      .flyer-preview-sidebar-state {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 0.92rem;
      }

      .flyer-preview-shell {
        display: grid;
        gap: 14px;
      }

      .flyer-preview-shell-guided {
        gap: 12px;
      }

      #flyer-preview-root {
        width: 100%;
        display: grid;
        justify-items: center;
        align-items: start;
      }

      .flyer-preview-stage {
        display: grid;
        place-items: center;
        min-height: 420px;
        width: 100%;
        padding: 16px;
        border-radius: 22px;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.08), transparent 44%),
          rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(148, 163, 184, 0.14);
      }

      .flyer-preview-stage-guided {
        min-height: 0;
        padding: 18px;
      }

      .flyer-preview-stage.has-waiting-preview {
        min-height: 420px;
        padding: 24px;
      }

      .flyer-preview-waiting-card {
        width: min(100%, 360px);
        min-height: 320px;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 14px;
        padding: 34px 28px;
        border-radius: 28px;
        text-align: center;
        color: #475569;
        background:
          radial-gradient(circle at top, rgba(47, 107, 255, 0.1), transparent 52%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
        border: 1px solid rgba(148, 163, 184, 0.2);
        box-shadow:
          0 22px 48px rgba(15, 23, 42, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }

      .flyer-preview-waiting-logo {
        width: min(220px, 76%);
        height: auto;
        display: block;
        margin-bottom: 6px;
      }

      .flyer-preview-waiting-card strong {
        color: #0f172a;
        font-size: 1.2rem;
        line-height: 1.22;
      }

      .flyer-preview-waiting-card span {
        max-width: 260px;
        font-size: 0.94rem;
        line-height: 1.5;
      }

      .flyer-style-preview-frame {
        width: min(100%, 340px);
        display: grid;
        gap: 10px;
        justify-items: center;
        padding: 12px;
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
          rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow:
          0 18px 36px rgba(15, 23, 42, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }

      .flyer-style-preview-label {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .flyer-style-preview-image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 22px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
        background: #ffffff;
      }

      .flyer-preview-stage.has-style-preview {
        padding-top: 22px;
        padding-bottom: 22px;
      }

      .flyer-generated-section .flyer-canvas {
        margin: 0 auto;
      }

      .flyer-preview-sidebar-summary {
        display: grid;
        gap: 10px;
        padding-top: 4px;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
      }

      .flyer-preview-sidebar-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #475569;
        font-size: 0.94rem;
      }

      .flyer-preview-sidebar-row strong {
        color: #0f172a;
        font-size: 0.98rem;
        font-weight: 800;
        text-align: right;
      }

      .flyer-guided-footer-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 18px;
      }

      .flyer-guided-tip,
      .flyer-guided-security {
        margin: 0;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.4;
      }

      .flyer-canvas {
        width: min(100%, 850px);
        max-width: 850px;
        aspect-ratio: 8.5 / 11;
        padding: clamp(18px, 3.2vw, 34px);
        display: grid;
        grid-template-rows: auto auto auto 1fr auto;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 28px;
        box-shadow: 0 28px 54px rgba(15, 23, 42, 0.14);
        overflow: hidden;
        position: relative;
      }

      .flyer-logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 120px;
        max-height: 60px;
        padding: 7px 9px;
        border-radius: 10px;
        background: rgba(248, 250, 252, 0.9);
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
        box-sizing: border-box;
      }

      .flyer-logo-mark img {
        display: block;
        max-width: 120px;
        max-height: 60px;
        width: auto;
        height: auto;
        object-fit: contain;
      }

      .flyer-logo-floating {
        position: absolute;
        z-index: 5;
      }

      .logo-modern {
        left: clamp(18px, 3vw, 34px);
        bottom: clamp(18px, 3vw, 34px);
      }

      .logo-open-house {
        top: clamp(18px, 3vw, 34px);
        right: clamp(18px, 3vw, 34px);
      }

      .logo-luxury-minimal {
        top: clamp(18px, 3vw, 34px);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(248, 245, 238, 0.92);
      }

      .logo-luxury-showcase {
        right: clamp(18px, 3vw, 34px);
        bottom: clamp(18px, 3vw, 34px);
        background: rgba(248, 245, 238, 0.92);
      }

      .flyer-canvas.has-logo-modern .flyer-footer {
        min-height: 68px;
        padding-left: 144px;
      }

      .flyer-canvas.has-logo-luxury-showcase .luxury-flyer-footer {
        min-height: 68px;
        padding-right: 144px;
      }

      .flyer-canvas.theme-listing {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        color: #0f172a;
      }

      .flyer-canvas.theme-modern {
        background: #f5f3ef;
        color: #0f172a;
      }

      .flyer-canvas-modern-listing {
        grid-template-rows: 44% auto auto minmax(0, 1fr) auto;
        gap: clamp(8px, 1.1vw, 12px);
        padding: clamp(18px, 2.7vw, 30px);
        background: #f5f3ef;
        color: #111827;
      }

      .editorial-modern-top {
        position: relative;
        min-height: 0;
        height: 100%;
        border-radius: 22px;
        overflow: hidden;
        background: #d8d6cf;
      }

      .editorial-modern-top img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .editorial-modern-badge {
        position: absolute;
        z-index: 3;
        left: clamp(14px, 2.3vw, 22px);
        top: clamp(14px, 2.3vw, 22px);
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 0;
        background: rgba(15, 23, 42, 0.9);
        color: #ffffff;
        font-size: clamp(0.62rem, 1.05vw, 0.78rem);
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .editorial-modern-headline {
        position: absolute;
        z-index: 2;
        left: clamp(20px, 3.2vw, 36px);
        right: clamp(20px, 3.2vw, 36px);
        bottom: clamp(14px, 2.2vw, 26px);
        display: grid;
        gap: 2px;
        max-height: clamp(120px, 15vw, 190px);
        overflow: hidden;
        color: #ffffff;
        text-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
      }

      .editorial-modern-headline span {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.05rem, 2.1vw, 1.75rem);
        font-style: italic;
        font-weight: 600;
        line-height: 1;
      }

      .editorial-modern-headline h3 {
        max-width: 15ch;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: clamp(2rem, 5vw, 4.35rem);
        font-weight: 800;
        line-height: 0.94;
        letter-spacing: -0.025em;
      }

      .editorial-modern-headline.is-long-headline h3 {
        max-width: 18ch;
        font-size: clamp(1.75rem, 4.35vw, 3.65rem);
        line-height: 0.98;
      }

      .editorial-modern-address-panel {
        position: relative;
        z-index: 2;
        width: min(76%, 500px);
        margin: clamp(-26px, -3.2vw, -16px) auto 0;
        padding: clamp(9px, 1.35vw, 13px) clamp(14px, 2vw, 20px);
        display: grid;
        gap: 2px;
        background: #111827;
        color: #ffffff;
      }

      .editorial-modern-address-panel p,
      .editorial-modern-address-panel span {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .editorial-modern-address-panel p {
        font-size: clamp(0.78rem, 1.28vw, 0.96rem);
        font-weight: 850;
        white-space: nowrap;
      }

      .editorial-modern-address-panel span {
        color: rgba(255, 255, 255, 0.78);
        font-size: clamp(0.62rem, 0.96vw, 0.76rem);
        font-weight: 750;
      }

      .editorial-modern-divider {
        height: 2px;
        width: 100%;
        background: rgba(17, 24, 39, 0.16);
      }

      .editorial-modern-lower {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
        gap: clamp(14px, 2vw, 22px);
        overflow: hidden;
      }

      .editorial-modern-features,
      .editorial-modern-about {
        min-height: 0;
        overflow: hidden;
      }

      .editorial-modern-features h4,
      .editorial-modern-about h4 {
        margin: 0;
        color: #111827;
        font-size: clamp(0.7rem, 1.14vw, 0.82rem);
        font-weight: 950;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding-bottom: 8px;
      }

      .editorial-modern-features .flyer-feature-list {
        gap: 5px;
        padding-left: 1rem;
        font-size: clamp(0.72rem, 1.18vw, 0.86rem);
        line-height: 1.32;
      }

      .editorial-modern-about p {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #334155;
        font-size: clamp(0.76rem, 1.22vw, 0.9rem);
        line-height: 1.42;
      }

      .flyer-canvas.theme-content-grid {
        background: #ffffff;
        color: #0f172a;
      }

      .flyer-canvas.theme-minimalist-modern-split {
        background: #ffffff;
        color: #ffffff;
      }

      .flyer-canvas.theme-editorial-open-house {
        background: #fbfaf7;
        color: #111111;
      }

      .flyer-canvas.theme-luxury-minimalistic-2 {
        background: #fbf7f0;
        color: #111111;
      }

      .flyer-canvas-luxury-minimalistic-2 {
        grid-template-rows: auto auto 41% auto auto;
        gap: clamp(12px, 1.65vw, 18px);
        padding: 0;
        font-family: Inter, "Helvetica Neue", Arial, sans-serif;
        overflow: hidden;
        border: 1px solid rgba(196, 151, 70, 0.44);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
      }

      .luxury-minimalistic-2-stats-band,
      .luxury-minimalistic-2-tagline-band {
        padding: clamp(16px, 2.1vw, 24px) clamp(26px, 3vw, 38px);
        background: linear-gradient(90deg, #bb8a3a 0%, #d6ab63 48%, #b88436 100%);
        color: #1d232f;
        text-align: center;
      }

      .luxury-minimalistic-2-stats-band {
        font-size: clamp(1rem, 2vw, 1.55rem);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .luxury-minimalistic-2-title-panel {
        padding: clamp(28px, 3.5vw, 42px) clamp(22px, 3vw, 36px) clamp(24px, 3vw, 30px);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
          linear-gradient(135deg, rgba(229, 229, 229, 0.45) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(214, 214, 214, 0.38) 100%);
        border-bottom: 1px solid rgba(17, 24, 39, 0.08);
        text-align: center;
      }

      .luxury-minimalistic-2-title {
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: clamp(10px, 1.6vw, 18px);
        flex-wrap: wrap;
      }

      .luxury-minimalistic-2-script {
        margin: 0;
        color: #111111;
        font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
        font-size: clamp(3.4rem, 8.2vw, 7rem);
        font-weight: 400;
        line-height: 0.9;
      }

      .luxury-minimalistic-2-main-word {
        margin: 0;
        color: #111111;
        font-size: clamp(3rem, 7vw, 6rem);
        font-weight: 300;
        letter-spacing: 0.02em;
        line-height: 0.9;
        text-transform: uppercase;
      }

      .luxury-minimalistic-2-address {
        margin: clamp(18px, 2.2vw, 22px) 0 0;
        color: #23272f;
        font-size: clamp(1rem, 2vw, 1.55rem);
        font-weight: 500;
        letter-spacing: 0.16em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .luxury-minimalistic-2-photo-frame {
        margin: 0 clamp(22px, 3vw, 36px);
        padding: clamp(18px, 2.2vw, 24px);
        background: #f8f4ed;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
      }

      .luxury-minimalistic-2-photo-shell {
        position: relative;
        min-height: 0;
        height: 100%;
        background: linear-gradient(180deg, rgba(231, 223, 211, 0.7), rgba(245, 238, 229, 0.92));
        overflow: hidden;
      }

      .luxury-minimalistic-2-photo-shell img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .luxury-minimalistic-2-photo-placeholder {
        width: 100%;
        height: 100%;
        min-height: clamp(260px, 32vw, 460px);
        display: grid;
        place-items: center;
        padding: 18px;
        color: rgba(33, 41, 55, 0.72);
        font-size: clamp(1rem, 2vw, 1.55rem);
        font-weight: 600;
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }

      .luxury-minimalistic-2-footer {
        display: grid;
        grid-template-columns: minmax(0, 0.27fr) minmax(0, 0.46fr) minmax(0, 0.27fr);
        gap: 0;
        align-items: stretch;
        margin: 0;
        padding: clamp(12px, 1.9vw, 18px) clamp(22px, 3vw, 36px);
        border-top: 1px solid rgba(196, 151, 70, 0.7);
        border-bottom: 1px solid rgba(196, 151, 70, 0.7);
        background: linear-gradient(180deg, #f7f1e6 0%, #f6eedf 100%);
      }

      .luxury-minimalistic-2-footer-panel {
        min-width: 0;
        display: grid;
        place-items: center;
        padding: clamp(12px, 2vw, 18px);
      }

      .luxury-minimalistic-2-footer-panel + .luxury-minimalistic-2-footer-panel {
        border-left: 1px solid rgba(196, 151, 70, 0.7);
      }

      .luxury-minimalistic-2-headshot-frame,
      .luxury-minimalistic-2-logo-frame {
        width: 100%;
        max-width: 196px;
        aspect-ratio: 0.86 / 1;
        display: grid;
        place-items: center;
        border: 2px solid rgba(196, 151, 70, 0.76);
        background: rgba(255, 255, 255, 0.58);
        overflow: hidden;
      }

      .luxury-minimalistic-2-headshot-frame img,
      .luxury-minimalistic-2-logo-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .luxury-minimalistic-2-logo-frame img {
        object-fit: contain;
        padding: 14px;
        background: #fffdf8;
      }

      .luxury-minimalistic-2-panel-placeholder {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        padding: 14px;
        color: rgba(120, 94, 38, 0.85);
        font-size: clamp(0.86rem, 1.35vw, 1.02rem);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }

      .luxury-minimalistic-2-agent-copy {
        width: 100%;
        display: grid;
        gap: 12px;
        align-content: center;
        justify-items: start;
        text-align: left;
      }

      .luxury-minimalistic-2-agent-name {
        margin: 0;
        color: #171b23;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.85rem, 4vw, 3.1rem);
        font-weight: 500;
        line-height: 0.98;
      }

      .luxury-minimalistic-2-agent-divider {
        width: min(100%, 220px);
        height: 1px;
        background: rgba(196, 151, 70, 0.85);
      }

      .luxury-minimalistic-2-agent-list {
        display: grid;
        gap: 10px;
      }

      .luxury-minimalistic-2-agent-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        color: #1f2430;
        font-size: clamp(0.92rem, 1.65vw, 1.4rem);
        font-weight: 500;
        line-height: 1.22;
      }

      .luxury-minimalistic-2-agent-icon {
        color: #be9447;
        font-size: 1.1em;
        line-height: 1;
      }

      .luxury-minimalistic-2-tagline-band {
        font-size: clamp(1rem, 2vw, 1.58rem);
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .flyer-canvas-editorial-open-house {
        grid-template-rows: auto auto 35% auto auto minmax(0, 1fr) auto;
        gap: clamp(10px, 1.35vw, 16px);
        padding: clamp(18px, 2.8vw, 32px);
        font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      }

      .editorial-open-house-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(16px, 2.4vw, 26px);
      }

      .editorial-open-house-rule {
        height: 2px;
        background: #161616;
      }

      .editorial-open-house-brand {
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .editorial-open-house-brand img {
        display: block;
        width: auto;
        max-width: clamp(96px, 15vw, 168px);
        max-height: 54px;
        object-fit: contain;
      }

      .editorial-open-house-brand p {
        margin: 0;
        color: #111111;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(0.92rem, 1.75vw, 1.55rem);
        line-height: 1.05;
      }

      .editorial-open-house-title {
        display: grid;
        grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
        align-items: center;
        gap: clamp(12px, 1.7vw, 18px);
      }

      .editorial-open-house-open-block {
        display: grid;
        place-items: center;
        min-height: clamp(94px, 11vw, 126px);
        padding: clamp(12px, 2vw, 20px);
        background: #232220;
        color: #ffffff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2.6rem, 6.4vw, 5.1rem);
        font-weight: 400;
        line-height: 0.9;
        letter-spacing: -0.04em;
      }

      .editorial-open-house-title h3 {
        margin: 0;
        color: #111111;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3rem, 6vw, 5.35rem);
        font-weight: 400;
        line-height: 0.88;
        letter-spacing: -0.05em;
      }

      .editorial-open-house-main-grid {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 0.66fr) minmax(0, 0.34fr);
        gap: clamp(12px, 1.8vw, 18px);
      }

      .editorial-open-house-main-image,
      .editorial-open-house-stack-image,
      .editorial-open-house-lower-image {
        min-height: 0;
        overflow: hidden;
        background: #ebe7e0;
      }

      .editorial-open-house-main-image img,
      .editorial-open-house-stack-image img,
      .editorial-open-house-lower-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .editorial-open-house-stack {
        min-height: 0;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 1.8vw, 18px);
      }

      .editorial-open-house-image-placeholder {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        padding: 16px;
        color: #6b7280;
        font-size: clamp(0.68rem, 1.1vw, 0.82rem);
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .editorial-open-house-info-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: clamp(14px, 2vw, 22px);
      }

      .editorial-open-house-info-row.no-price-box {
        grid-template-columns: minmax(0, 1fr);
      }

      .editorial-open-house-event-copy {
        min-width: 0;
        display: grid;
        gap: 6px;
      }

      .editorial-open-house-event-line,
      .editorial-open-house-address {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .editorial-open-house-event-line {
        color: #161616;
        font-size: clamp(1rem, 2.25vw, 1.9rem);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }

      .editorial-open-house-address {
        color: #161616;
        font-size: clamp(0.9rem, 1.85vw, 1.55rem);
        font-weight: 700;
        line-height: 1.14;
        white-space: nowrap;
      }

      .editorial-open-house-price-box {
        padding: clamp(12px, 1.9vw, 18px) clamp(16px, 2.3vw, 24px);
        background: #232220;
        color: #ffffff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.55rem, 4vw, 3.55rem);
        font-weight: 400;
        line-height: 0.92;
        letter-spacing: -0.05em;
        white-space: nowrap;
      }

      .editorial-open-house-description p {
        margin: 0;
        color: #222222;
        font-size: clamp(0.78rem, 1.26vw, 0.98rem);
        line-height: 1.48;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .editorial-open-house-lower-grid {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr);
        gap: clamp(16px, 2.2vw, 28px);
      }

      .editorial-open-house-features {
        min-height: 0;
        display: grid;
        align-content: start;
        gap: 12px;
      }

      .editorial-open-house-features h4 {
        margin: 0;
        color: #111111;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.2rem, 2.65vw, 2.6rem);
        font-weight: 500;
        line-height: 0.98;
        letter-spacing: 0.01em;
        text-transform: uppercase;
      }

      .editorial-open-house-feature-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(10px, 1.8vw, 20px);
      }

      .editorial-open-house-feature-columns ul {
        margin: 0;
        padding-left: 1.25rem;
        display: grid;
        gap: 10px;
      }

      .editorial-open-house-feature-columns li,
      .editorial-open-house-feature-empty {
        color: #222222;
        font-size: clamp(0.88rem, 1.8vw, 1.6rem);
        line-height: 1.35;
      }

      .editorial-open-house-feature-empty {
        margin: 0;
      }

      .editorial-open-house-footer {
        display: grid;
        grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
        border: 2px solid #161616;
        background: #ffffff;
      }

      .editorial-open-house-agent-panel {
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: clamp(12px, 1.9vw, 18px);
        padding: clamp(14px, 2.1vw, 20px);
        background: #232220;
        color: #ffffff;
      }

      .editorial-open-house-agent-copy {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .editorial-open-house-agent-copy strong {
        color: #ffffff;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1rem, 2.15vw, 1.9rem);
        font-weight: 400;
        line-height: 1;
      }

      .editorial-open-house-agent-copy span {
        color: rgba(255, 255, 255, 0.9);
        font-size: clamp(0.72rem, 1.35vw, 1rem);
        line-height: 1.2;
      }

      .editorial-open-house-agent-copy .flyer-realtor-line {
        color: rgba(255, 255, 255, 0.88);
      }

      .editorial-open-house-headshot {
        width: clamp(64px, 8vw, 96px);
        height: clamp(64px, 8vw, 96px);
        border-color: rgba(255, 255, 255, 0.82);
      }

      .editorial-open-house-contact-panel {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        background: #ffffff;
      }

      .editorial-open-house-contact-panel[data-contact-count="1"] {
        grid-template-columns: minmax(0, 1fr);
      }

      .editorial-open-house-contact-panel[data-contact-count="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .editorial-open-house-contact-item {
        min-width: 0;
        padding: clamp(14px, 2vw, 20px);
        display: grid;
        align-content: center;
        gap: 6px;
        border-left: 1px solid rgba(17, 17, 17, 0.16);
      }

      .editorial-open-house-contact-item:first-child {
        border-left: 0;
      }

      .editorial-open-house-contact-item span,
      .editorial-open-house-contact-item strong {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .editorial-open-house-contact-item span {
        color: #111111;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(0.92rem, 1.8vw, 1.6rem);
        font-weight: 400;
        line-height: 1.05;
      }

      .editorial-open-house-contact-item strong {
        color: #222222;
        font-size: clamp(0.72rem, 1.28vw, 0.98rem);
        font-weight: 500;
        line-height: 1.28;
        word-break: break-word;
      }

      .flyer-canvas-minimal-split {
        grid-template-rows: 19% 28% minmax(0, 24%) minmax(0, 1fr);
        gap: 0;
        padding: clamp(18px, 2.7vw, 30px);
        border-radius: 18px;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .flyer-canvas-minimal-split.no-middle-section {
        grid-template-rows: 20% 34% minmax(0, 1fr);
      }

      .flyer-canvas-minimal-split.no-bottom-section {
        grid-template-rows: 20% 34% minmax(0, 1fr);
      }

      .flyer-canvas-minimal-split.no-middle-section.no-bottom-section {
        grid-template-rows: 24% minmax(0, 1fr);
      }

      .minimal-split-header {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: clamp(12px, 2vw, 24px);
        padding: clamp(18px, 3vw, 34px);
        background: #000000;
        color: #ffffff;
        overflow: hidden;
      }

      .minimal-split-header h3 {
        max-width: 12ch;
        margin: 0;
        font-size: clamp(2rem, 5.1vw, 4.8rem);
        font-weight: 950;
        line-height: 0.9;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .minimal-split-header p {
        margin: 2px 0 0;
        max-width: 18ch;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(0.58rem, 1vw, 0.76rem);
        font-weight: 850;
        letter-spacing: 0.08em;
        line-height: 1.25;
        text-align: right;
        text-transform: uppercase;
      }

      .minimal-split-header img {
        display: block;
        width: auto;
        max-width: clamp(70px, 12vw, 118px);
        max-height: clamp(34px, 5vw, 54px);
        object-fit: contain;
        background: #ffffff;
        padding: 6px;
      }

      .minimal-split-main-image,
      .minimal-split-secondary-image {
        min-height: 0;
        overflow: hidden;
        background: #8b8b8b;
      }

      .minimal-split-main-image img,
      .minimal-split-secondary-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .minimal-split-middle {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
      }

      .minimal-split-description-panel,
      .minimal-split-feature-panel,
      .minimal-split-price-panel,
      .minimal-split-contact-panel {
        min-width: 0;
        min-height: 0;
        padding: clamp(14px, 2.25vw, 26px);
        overflow: hidden;
      }

      .minimal-split-description-panel {
        display: grid;
        align-content: space-between;
        gap: 14px;
        background: #000000;
        color: #ffffff;
      }

      .minimal-split-description-panel > p {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.86);
        font-size: clamp(0.7rem, 1.25vw, 0.92rem);
        line-height: 1.44;
      }

      .minimal-split-location {
        display: grid;
        gap: 4px;
      }

      .minimal-split-location span,
      .minimal-split-price-panel span,
      .minimal-split-contact-panel span {
        color: rgba(255, 255, 255, 0.72);
        font-size: clamp(0.58rem, 1vw, 0.72rem);
        font-weight: 900;
        letter-spacing: 0.12em;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .minimal-split-location strong {
        color: #ffffff;
        font-size: clamp(0.76rem, 1.35vw, 1rem);
        font-weight: 950;
        line-height: 1.22;
      }

      .minimal-split-feature-panel {
        display: grid;
        align-content: center;
        gap: clamp(8px, 1.2vw, 14px);
        background: #888888;
        color: #ffffff;
      }

      .minimal-split-feature {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .minimal-split-feature span {
        display: inline-grid;
        place-items: center;
        width: clamp(18px, 2.5vw, 26px);
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.72);
        color: #ffffff;
        font-size: clamp(0.72rem, 1.2vw, 0.95rem);
        font-weight: 950;
        line-height: 1;
      }

      .minimal-split-feature strong {
        overflow: hidden;
        color: #ffffff;
        font-size: clamp(0.72rem, 1.25vw, 0.94rem);
        font-weight: 900;
        line-height: 1.2;
        text-overflow: ellipsis;
        text-transform: uppercase;
      }

      .minimal-split-bottom {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
      }

      .minimal-split-bottom.no-secondary-image {
        grid-template-columns: minmax(0, 1fr);
      }

      .minimal-split-bottom-panels {
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 0.88fr) minmax(0, 1.12fr);
      }

      .minimal-split-bottom.single-bottom-panel .minimal-split-bottom-panels {
        grid-template-rows: minmax(0, 1fr);
      }

      .minimal-split-price-panel {
        display: grid;
        align-content: center;
        gap: 4px;
        background: #8d8d8d;
        color: #ffffff;
      }

      .minimal-split-price-panel strong {
        color: #ffffff;
        font-size: clamp(1.25rem, 3vw, 2.7rem);
        font-weight: 950;
        line-height: 0.95;
      }

      .minimal-split-contact-panel {
        display: grid;
        align-content: center;
        gap: 4px;
        background: #000000;
        color: #ffffff;
      }

      .minimal-split-contact-panel strong,
      .minimal-split-contact-panel p {
        margin: 0;
        color: #ffffff;
        font-size: clamp(0.68rem, 1.18vw, 0.9rem);
        font-weight: 850;
        line-height: 1.22;
      }

      .minimal-split-contact-panel .flyer-realtor-line {
        color: rgba(255, 255, 255, 0.78);
        font-size: clamp(0.55rem, 0.95vw, 0.68rem);
        letter-spacing: 0.1em;
      }

      .flyer-canvas-content-grid {
        grid-template-rows: 40% auto minmax(0, 1fr);
        gap: clamp(10px, 1.3vw, 15px);
        padding: clamp(20px, 3vw, 34px);
      }

      .content-grid-top {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 14px;
        min-height: 0;
      }

      .content-grid-intro {
        display: grid;
        align-content: start;
        gap: 10px;
        min-width: 0;
        min-height: 0;
      }

      .content-grid-intro .flyer-description {
        font-size: clamp(0.8rem, 1.36vw, 0.98rem);
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .content-grid-badge,
      .content-grid-context {
        width: fit-content;
        border-radius: 999px;
        font-weight: 900;
      }

      .content-grid-badge {
        padding: 8px 12px;
        background: #0f172a;
        color: #ffffff;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .content-grid-context {
        max-width: 100%;
        padding: 7px 11px;
        background: rgba(47, 107, 255, 0.1);
        color: var(--brand-strong);
        font-size: clamp(0.7rem, 1.18vw, 0.84rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .content-grid-price {
        margin: 0;
        color: #0f172a;
        font-size: clamp(2rem, 4.6vw, 4rem);
        font-weight: 950;
        line-height: 0.95;
        letter-spacing: -0.02em;
      }

      .content-grid-main-image,
      .content-grid-supporting-image {
        min-height: 0;
        border-radius: 20px;
        overflow: hidden;
        background: #e2e8f0;
      }

      .content-grid-main-image img,
      .content-grid-supporting-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .content-grid-supporting-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        min-height: 0;
      }

      .content-grid-supporting-strip[data-supporting-count="1"] {
        grid-template-columns: minmax(0, 1fr);
      }

      .content-grid-supporting-strip[data-supporting-count="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .content-grid-supporting-image {
        aspect-ratio: 16 / 9;
        border-radius: 16px;
      }

      .content-grid-lower {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 12px;
        min-height: 0;
      }

      .content-grid-lower .flyer-card {
        min-height: 0;
        overflow: hidden;
        background: #ffffff;
        border-color: rgba(148, 163, 184, 0.22);
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
      }

      .content-grid-contact-card {
        display: grid;
        align-content: start;
        gap: 8px;
      }

      .content-grid-contact-card .flyer-cta {
        max-width: none;
      }

      .content-grid-agent {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        color: #334155;
        font-size: clamp(0.68rem, 1.18vw, 0.84rem);
        line-height: 1.35;
      }

      .content-grid-agent > div {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

      .content-grid-agent > div:only-child {
        grid-column: 1 / -1;
      }

      .flyer-canvas.theme-luxury-minimal,
      .flyer-canvas.theme-luxury-showcase {
        background:
          radial-gradient(circle at 18% 0%, rgba(212, 178, 107, 0.18), transparent 34%),
          linear-gradient(180deg, #07111f 0%, #111827 100%);
        color: #f8f5ee;
      }

      .flyer-canvas-luxury {
        gap: clamp(8px, 1.2vw, 13px);
        padding: clamp(20px, 3vw, 34px);
      }

      .flyer-canvas-luxury-minimal {
        grid-template-rows: auto 50% minmax(0, auto) auto minmax(0, auto) auto;
      }

      .flyer-canvas-luxury-showcase {
        grid-template-rows: auto 36% auto minmax(0, auto) auto minmax(0, auto) auto;
      }

      .luxury-flyer-badge,
      .luxury-event-line,
      .luxury-price-overlay {
        width: fit-content;
        border-radius: 999px;
        font-weight: 900;
      }

      .luxury-flyer-badge {
        padding: 8px 13px;
        border: 1px solid rgba(212, 178, 107, 0.38);
        color: #efd8a0;
        font-size: 0.72rem;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }

      .luxury-hero-image {
        position: relative;
        min-height: 0;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        background: #172033;
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
      }

      .luxury-hero-image img,
      .luxury-supporting-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .luxury-price-overlay {
        position: absolute;
        left: 18px;
        bottom: 18px;
        padding: 10px 15px;
        background: rgba(8, 19, 33, 0.84);
        color: #efd8a0;
        font-size: clamp(1rem, 2vw, 1.4rem);
        backdrop-filter: blur(10px);
      }

      .luxury-supporting-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        min-height: 0;
      }

      .luxury-supporting-strip[data-supporting-count="1"] {
        grid-template-columns: minmax(0, 1fr);
      }

      .luxury-supporting-strip[data-supporting-count="2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .luxury-supporting-image {
        aspect-ratio: 16 / 9;
        border-radius: 16px;
        overflow: hidden;
        background: #172033;
        border: 1px solid rgba(212, 178, 107, 0.2);
      }

      .luxury-copy-block {
        display: grid;
        gap: 8px;
        min-height: 0;
      }

      .luxury-copy-block .flyer-headline {
        max-width: 13ch;
        color: #ffffff;
        font-size: clamp(1.85rem, 4vw, 3.35rem);
        letter-spacing: -0.035em;
      }

      .luxury-copy-block .flyer-description {
        color: rgba(248, 245, 238, 0.82);
        font-size: clamp(0.78rem, 1.35vw, 0.94rem);
        line-height: 1.42;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .luxury-event-line {
        padding: 7px 11px;
        background: rgba(212, 178, 107, 0.14);
        color: #efd8a0;
        font-size: clamp(0.72rem, 1.25vw, 0.86rem);
      }

      .luxury-data-row {
        gap: 8px;
      }

      .luxury-data-row .flyer-stat {
        min-width: 0;
        padding: 9px 10px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(212, 178, 107, 0.18);
      }

      .luxury-data-row .flyer-stat-value {
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .luxury-cta-block {
        min-height: 0;
        padding: clamp(12px, 1.8vw, 18px);
        border-radius: 20px;
        border: 1px solid rgba(212, 178, 107, 0.22);
        background: rgba(255, 255, 255, 0.06);
      }

      .luxury-cta-block p {
        margin: 0;
        color: #efd8a0;
        font-size: clamp(0.86rem, 1.45vw, 1.02rem);
        font-weight: 900;
        line-height: 1.35;
      }

      .luxury-flyer-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(212, 178, 107, 0.24);
        padding-top: 12px;
        color: rgba(248, 245, 238, 0.78);
        font-size: clamp(0.68rem, 1.2vw, 0.84rem);
        font-weight: 800;
      }

      .luxury-agent-name-wrap {
        display: grid;
        gap: 1px;
      }

      .editorial-modern-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(12px, 1.8vw, 20px);
        border-top: 1px solid rgba(17, 24, 39, 0.16);
        padding-top: clamp(8px, 1.2vw, 12px);
        min-height: 0;
      }

      .editorial-modern-contact-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .editorial-modern-contact {
        display: grid;
        gap: 3px;
        min-width: 0;
        align-content: center;
      }

      .editorial-modern-footer .flyer-cta {
        max-width: none;
        color: #111827;
        font-size: clamp(0.82rem, 1.35vw, 0.98rem);
        line-height: 1.28;
      }

      .editorial-modern-footer .flyer-agent-line,
      .editorial-modern-footer .flyer-template-note {
        margin: 0;
      }

      .editorial-modern-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(28vw, 132px);
        max-width: 132px;
        max-height: 62px;
        padding: 7px 9px;
        border-radius: 10px;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid rgba(148, 163, 184, 0.18);
        flex: 0 0 auto;
      }

      .flyer-agent-headshot {
        width: 72px;
        height: 72px;
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.78);
        background: #e2e8f0;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
      }

      .flyer-agent-headshot img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .editorial-modern-headshot {
        width: 68px;
        height: 68px;
      }

      .content-grid-headshot {
        width: 60px;
        height: 60px;
      }

      .luxury-headshot {
        width: 58px;
        height: 58px;
        border-color: rgba(212, 178, 107, 0.55);
      }

      .editorial-modern-logo img {
        display: block;
        max-width: 100%;
        max-height: 48px;
        object-fit: contain;
        object-position: center;
      }

      .flyer-canvas.theme-luxury {
        background: linear-gradient(180deg, #081321 0%, #121826 100%);
        color: #f8f5ee;
      }

      .flyer-canvas.theme-bold {
        background: linear-gradient(180deg, #0f172a 0%, #1d4ed8 100%);
        color: #f8fbff;
      }

      .flyer-canvas.theme-minimal {
        background: #ffffff;
        color: #111827;
      }

      .flyer-canvas.theme-open-house {
        background: linear-gradient(180deg, #fff8ef 0%, #ffffff 100%);
        color: #0f172a;
      }

      .flyer-canvas.theme-coming-soon {
        background: linear-gradient(180deg, #fffef7 0%, #f7fbff 100%);
        color: #0f172a;
      }

      .flyer-canvas.theme-under-contract {
        background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
        color: #0f172a;
      }

      .flyer-canvas.theme-just-sold {
        background: linear-gradient(180deg, #fff6f0 0%, #ffffff 100%);
        color: #0f172a;
      }

      .flyer-banner {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .theme-listing .flyer-banner,
      .theme-modern .flyer-banner,
      .theme-under-contract .flyer-banner {
        background: rgba(18, 58, 140, 0.08);
        color: #123a8c;
      }

      .theme-luxury .flyer-banner {
        background: rgba(205, 176, 106, 0.14);
        color: #efd8a0;
      }

      .theme-open-house .flyer-banner {
        background: rgba(245, 158, 11, 0.12);
        color: #b45309;
      }

      .theme-coming-soon .flyer-banner {
        background: rgba(14, 165, 233, 0.12);
        color: #0369a1;
      }

      .theme-just-sold .flyer-banner {
        background: rgba(234, 88, 12, 0.12);
        color: #c2410c;
      }

      .theme-bold .flyer-banner {
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
      }

      .theme-minimal .flyer-banner {
        background: rgba(17, 24, 39, 0.06);
        color: #111827;
      }

      .flyer-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
        gap: 16px;
        align-items: stretch;
      }

      .flyer-hero-copy {
        display: grid;
        gap: 10px;
        align-content: start;
      }

      .flyer-headline {
        margin: 0;
        font-size: clamp(2rem, 4vw, 3.45rem);
        line-height: 0.92;
        letter-spacing: -0.05em;
      }

      .flyer-subheadline,
      .flyer-description,
      .flyer-image-placeholder,
      .flyer-agent-line,
      .flyer-realtor-line,
      .flyer-template-note,
      .flyer-meta-row,
      .flyer-status-line,
      .flyer-cta {
        margin: 0;
        line-height: 1.55;
      }

      .flyer-agent-name-block {
        display: grid;
        gap: 1px;
      }

      .flyer-realtor-line {
        display: block;
        font-size: clamp(0.58rem, 1vw, 0.72rem);
        font-weight: 900;
        line-height: 1.05;
        text-transform: uppercase;
        opacity: 0.78;
      }

      .flyer-realtor-line sup {
        font-size: 0.58em;
      }

      .flyer-subheadline {
        font-size: 1rem;
        font-weight: 700;
        opacity: 0.9;
      }

      .flyer-description {
        color: inherit;
        opacity: 0.86;
      }

      .theme-luxury .flyer-subheadline,
      .theme-luxury .flyer-description,
      .theme-luxury .flyer-agent-line,
      .theme-luxury .flyer-realtor-line,
      .theme-luxury .flyer-template-note {
        color: rgba(248, 245, 238, 0.86);
      }

      .theme-bold .flyer-subheadline,
      .theme-bold .flyer-description,
      .theme-bold .flyer-agent-line,
      .theme-bold .flyer-realtor-line,
      .theme-bold .flyer-template-note {
        color: rgba(248, 251, 255, 0.9);
      }

      .flyer-image {
        position: relative;
        min-height: 220px;
        border-radius: 24px;
        overflow: hidden;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(226, 232, 240, 0.52));
      }

      .flyer-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }

      .flyer-image-placeholder {
        height: 100%;
        min-height: 220px;
        display: grid;
        place-items: center;
        padding: 18px;
        text-align: center;
        font-weight: 700;
        color: #64748b;
      }

      .theme-luxury .flyer-image-placeholder {
        color: rgba(248, 245, 238, 0.68);
      }

      .flyer-price-chip {
        width: fit-content;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: clamp(0.82rem, 1.5vw, 0.98rem);
        font-weight: 900;
      }

      .theme-listing .flyer-price-chip,
      .theme-modern .flyer-price-chip,
      .theme-open-house .flyer-price-chip,
      .theme-coming-soon .flyer-price-chip,
      .theme-under-contract .flyer-price-chip,
      .theme-just-sold .flyer-price-chip {
        background: #0f172a;
        color: #ffffff;
      }

      .theme-luxury .flyer-price-chip {
        background: #d4b26b;
        color: #081321;
      }

      .theme-bold .flyer-price-chip {
        background: #f8fbff;
        color: #0f172a;
      }

      .theme-minimal .flyer-price-chip {
        background: #111827;
        color: #ffffff;
      }

      .flyer-stat-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }

      .flyer-stat {
        padding: 12px 14px;
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.04);
      }

      .theme-luxury .flyer-stat {
        background: rgba(255, 255, 255, 0.08);
      }

      .theme-bold .flyer-stat {
        background: rgba(255, 255, 255, 0.1);
      }

      .flyer-stat-label {
        display: block;
        font-size: clamp(0.56rem, 1.15vw, 0.74rem);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.7;
      }

      .flyer-stat-value {
        display: block;
        margin-top: 5px;
        font-size: clamp(0.74rem, 1.4vw, 0.98rem);
        font-weight: 800;
      }

      .flyer-content-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.78fr);
        gap: 14px;
      }

      .flyer-card {
        padding: clamp(10px, 1.8vw, 16px);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.68);
        border: 1px solid rgba(148, 163, 184, 0.16);
      }

      .theme-luxury .flyer-card {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(212, 178, 107, 0.2);
      }

      .theme-bold .flyer-card {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.18);
      }

      .theme-minimal .flyer-card,
      .theme-minimal .flyer-stat {
        border-radius: 10px;
      }

      .flyer-card-title {
        margin: 0 0 10px;
        font-size: clamp(0.72rem, 1.35vw, 0.9rem);
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .flyer-feature-list {
        margin: 0;
        padding-left: 1.1rem;
        display: grid;
        gap: 6px;
        font-size: clamp(0.74rem, 1.3vw, 0.92rem);
        line-height: 1.35;
      }

      .flyer-footer {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: end;
        padding-top: 6px;
      }

      .flyer-cta {
        max-width: 38%;
        font-weight: 800;
        font-size: clamp(0.76rem, 1.35vw, 0.96rem);
        line-height: 1.35;
      }

      .flyer-template-note {
        font-size: clamp(0.68rem, 1.2vw, 0.82rem);
        opacity: 0.68;
      }

      .flyer-agent-line,
      .flyer-meta-row {
        font-size: clamp(0.74rem, 1.3vw, 0.92rem);
      }

      .flyer-canvas.has-brand-surface {
        background: var(--flyer-brand-background);
        color: var(--flyer-brand-text);
      }

      .flyer-canvas.has-brand-surface .flyer-headline,
      .flyer-canvas.has-brand-surface .flyer-subheadline,
      .flyer-canvas.has-brand-surface .flyer-description,
      .flyer-canvas.has-brand-surface .flyer-agent-line,
      .flyer-canvas.has-brand-surface .flyer-realtor-line,
      .flyer-canvas.has-brand-surface .flyer-meta-row,
      .flyer-canvas.has-brand-surface .flyer-stat-value,
      .flyer-canvas.has-brand-surface .luxury-copy-block .flyer-headline,
      .flyer-canvas.has-brand-surface .luxury-copy-block .flyer-description,
      .flyer-canvas.has-brand-surface .luxury-flyer-footer {
        color: var(--flyer-brand-text);
      }

      .flyer-canvas.has-brand-palette .editorial-modern-badge,
      .flyer-canvas.has-brand-palette .content-grid-badge,
      .flyer-canvas.has-brand-palette .luxury-flyer-badge,
      .flyer-canvas.has-brand-palette .flyer-banner {
        background: var(--flyer-brand-primary);
        color: var(--flyer-brand-on-primary);
        border-color: var(--flyer-brand-accent);
      }

      .flyer-canvas.has-brand-palette .flyer-price-chip,
      .flyer-canvas.has-brand-palette .luxury-price-overlay,
      .flyer-canvas.has-brand-palette .content-grid-context,
      .flyer-canvas.has-brand-palette .luxury-event-line {
        background: var(--flyer-brand-accent);
        color: var(--flyer-brand-on-accent);
      }

      .flyer-canvas.has-brand-palette .flyer-card,
      .flyer-canvas.has-brand-palette .flyer-stat,
      .flyer-canvas.has-brand-palette .luxury-cta-block {
        border-color: var(--flyer-brand-accent);
      }

      .flyer-canvas.has-brand-palette .flyer-card-title,
      .flyer-canvas.has-brand-palette .content-grid-price,
      .flyer-canvas.has-brand-palette .editorial-modern-features h4,
      .flyer-canvas.has-brand-palette .editorial-modern-about h4,
      .flyer-canvas.has-brand-palette .flyer-cta,
      .flyer-canvas.has-brand-palette .luxury-cta-block p,
      .flyer-canvas.has-brand-palette .flyer-template-note {
        color: var(--flyer-brand-primary);
      }

      .flyer-canvas.has-brand-palette .editorial-modern-divider,
      .flyer-canvas.has-brand-palette .editorial-modern-footer,
      .flyer-canvas.has-brand-palette .content-grid-agent,
      .flyer-canvas.has-brand-palette .luxury-flyer-footer {
        border-color: var(--flyer-brand-accent);
      }

      .flyer-canvas.has-brand-palette .editorial-modern-divider {
        background: var(--flyer-brand-accent);
      }

      .flyer-download-row {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .flyer-template-modal-shell {
        width: min(1180px, calc(100vw - 32px));
        max-width: 1180px;
      }

      .flyer-template-groups {
        display: grid;
        gap: 28px;
      }

      .flyer-template-note-helper {
        margin: 18px 0 0;
        color: #64748b;
        font-size: 0.88rem;
        line-height: 1.45;
        text-align: center;
      }

      .empty-state-card {
        display: grid;
        gap: 8px;
        padding: 26px 24px;
        border: 1px dashed rgba(148, 163, 184, 0.45);
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
        color: #475569;
        text-align: center;
      }

      .empty-state-card strong {
        color: #0f172a;
        font-size: 1.05rem;
      }

      .empty-state-card p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.55;
      }

      .flyer-template-coming-soon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 28px 0 0;
        padding: 16px 18px;
        border: 1px solid rgba(47, 107, 255, 0.3);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(47, 107, 255, 0.12), rgba(74, 141, 255, 0.2));
        color: #14306f;
        font-size: 1.05rem;
        font-weight: 800;
        text-align: center;
        box-shadow: 0 12px 28px rgba(47, 107, 255, 0.12);
      }

      .flyer-template-coming-soon span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #ffffff;
        color: #2458d8;
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase;
      }

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

      .flyer-template-group-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: 0.02em;
      }

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

      .flyer-template-card {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 12px;
        min-height: 310px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: #ffffff;
        color: #0f172a;
        text-align: left;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
          background 0.18s ease;
      }

      .flyer-template-card:hover {
        transform: translateY(-2px);
        border-color: rgba(74, 141, 255, 0.42);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      }

      .flyer-template-card.selected {
        border-color: rgba(74, 141, 255, 0.72);
        background: rgba(47, 107, 255, 0.08);
        box-shadow: 0 0 0 1px rgba(74, 141, 255, 0.16);
      }

      .flyer-template-card-name {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
      }

      .flyer-template-card-description {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.4;
      }

      .flyer-template-preview {
        position: relative;
        aspect-ratio: 8.5 / 11;
        border-radius: 16px;
        overflow: hidden;
        background: #e2e8f0;
      }

      .flyer-template-preview-image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      .flyer-template-preview.has-preview-image {
        padding: 0;
        background: #ffffff;
      }

      .flyer-template-preview.has-preview-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 32%),
          linear-gradient(180deg, transparent 62%, rgba(15, 23, 42, 0.52));
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
      }

      .flyer-template-card:hover .flyer-template-preview.has-preview-image::after,
      .flyer-template-card:focus-visible .flyer-template-preview.has-preview-image::after {
        opacity: 1;
      }

      .flyer-template-preview-zoom-hint {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1;
        display: inline-flex;
        justify-content: center;
        padding: 7px 9px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.82);
        color: #ffffff;
        font-size: 0.76rem;
        font-weight: 800;
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        pointer-events: none;
      }

      .flyer-template-card:hover .flyer-template-preview-zoom-hint,
      .flyer-template-card:focus-visible .flyer-template-preview-zoom-hint {
        opacity: 1;
        transform: translateY(0);
      }

      .flyer-template-preview-fallback {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 14px;
        text-align: center;
        color: rgba(248, 251, 255, 0.78);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background:
          linear-gradient(160deg, rgba(47, 107, 255, 0.34), rgba(15, 23, 42, 0.88)),
          radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 54%);
      }

      .style-preview {
        display: grid;
        place-items: center;
        min-height: 220px;
        color: #f8fbff;
        font-weight: 900;
        padding: 14px;
      }

      .style-mini-flyer {
        width: min(100%, 145px);
        aspect-ratio: 8.5 / 11;
        display: grid;
        grid-template-rows: 42% 1fr auto;
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
      }

      .style-mini-image {
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(148, 163, 184, 0.42), rgba(226, 232, 240, 0.9)),
          linear-gradient(45deg, transparent 0 52%, rgba(47, 107, 255, 0.24) 52% 100%);
      }

      .style-mini-copy {
        display: grid;
        align-content: start;
        gap: 4px;
      }

      .style-mini-badge,
      .style-mini-title,
      .style-mini-line,
      .style-mini-stats span {
        display: block;
        border-radius: 999px;
      }

      .style-mini-badge {
        width: 38%;
        height: 7px;
        background: #0f172a;
      }

      .style-mini-title {
        width: 72%;
        height: 10px;
        background: #123a8c;
      }

      .style-mini-line {
        width: 62%;
        height: 5px;
        background: rgba(100, 116, 139, 0.5);
      }

      .style-mini-line.wide {
        width: 88%;
      }

      .style-mini-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
      }

      .style-mini-stats span {
        height: 13px;
        background: rgba(15, 23, 42, 0.1);
      }

      .style-mini-flyer-modern {
        grid-template-rows: 44% 15% 1fr auto;
        background: #f5f3ef;
      }

      .style-mini-flyer-modern .style-mini-image {
        grid-row: 1 / 3;
        background:
          linear-gradient(135deg, rgba(148, 163, 184, 0.26), rgba(226, 232, 240, 0.82)),
          linear-gradient(35deg, transparent 0 58%, rgba(15, 23, 42, 0.16) 58% 100%);
      }

      .style-mini-flyer-modern .style-mini-copy {
        grid-row: 2 / 4;
        align-self: start;
        padding: 7px;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.88);
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18);
      }

      .style-mini-flyer-modern .style-mini-badge,
      .style-mini-flyer-modern .style-mini-title {
        background: #f8fafc;
      }

      .style-mini-flyer-modern .style-mini-line {
        background: rgba(248, 250, 252, 0.46);
      }

      .style-mini-flyer-content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        grid-template-rows: 1fr auto;
      }

      .style-mini-flyer-content-grid .style-mini-image {
        grid-column: 2;
        grid-row: 1;
      }

      .style-mini-flyer-content-grid .style-mini-copy {
        grid-column: 1;
        grid-row: 1;
      }

      .style-mini-flyer-content-grid .style-mini-stats {
        grid-column: 1 / -1;
      }

      .style-mini-flyer-modern-2 {
        grid-template-rows: 52% 1fr auto;
        background: #071425;
      }

      .style-mini-flyer-modern-2 .style-mini-image {
        background:
          linear-gradient(135deg, rgba(212, 178, 107, 0.78), transparent 34%),
          linear-gradient(145deg, #1e293b, #0f172a);
      }

      .style-mini-flyer-modern-2 .style-mini-copy {
        align-self: end;
        padding-top: 4px;
      }

      .style-mini-flyer-modern-2 .style-mini-badge,
      .style-mini-flyer-modern-2 .style-mini-title {
        background: #f8fafc;
      }

      .style-mini-flyer-modern-2 .style-mini-line {
        background: rgba(248, 250, 252, 0.36);
      }

      .style-mini-flyer-modern-2 .style-mini-stats span {
        background: rgba(248, 250, 252, 0.9);
      }

      .style-mini-flyer-modern-3 {
        grid-template-columns: minmax(0, 1fr) 32%;
        grid-template-rows: 16% 34% 1fr auto;
        background: #f8fafc;
      }

      .style-mini-flyer-modern-3 .style-mini-image {
        grid-column: 1 / -1;
        grid-row: 2;
        background:
          linear-gradient(135deg, rgba(30, 64, 175, 0.12), rgba(186, 230, 253, 0.68)),
          linear-gradient(35deg, transparent 0 56%, rgba(20, 83, 45, 0.18) 56% 100%);
      }

      .style-mini-flyer-modern-3 .style-mini-copy {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
      }

      .style-mini-flyer-modern-3 .style-mini-stats {
        grid-column: 2;
        grid-row: 2 / 4;
        align-self: stretch;
        display: grid;
        grid-template-columns: 1fr;
        padding: 5px;
        border-radius: 8px;
        background: #dbeafe;
      }

      .style-mini-flyer-modern-3 .style-mini-stats span {
        height: auto;
        min-height: 24px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.92);
      }

      .style-mini-flyer-modern-3::before {
        content: "";
        grid-column: 1 / -1;
        grid-row: 1;
        border-radius: 9px;
        background: #dbeafe;
      }

      .style-mini-flyer-modern-3 .style-mini-title {
        background: #14532d;
      }

      .style-mini-flyer-modern-3 .style-mini-badge,
      .style-mini-flyer-modern-3 .style-mini-line {
        background: rgba(20, 83, 45, 0.28);
      }

      .style-mini-flyer-content-grid .style-mini-stats span {
        height: 18px;
      }

      .style-mini-flyer-luxury,
      .style-mini-flyer-luxury-minimal,
      .style-mini-flyer-luxury-showcase,
      .style-mini-flyer-bold {
        background: #081321;
      }

      .style-mini-flyer-luxury .style-mini-title,
      .style-mini-flyer-luxury-minimal .style-mini-title,
      .style-mini-flyer-luxury-showcase .style-mini-title {
        background: #d4b26b;
      }

      .style-mini-flyer-luxury .style-mini-badge,
      .style-mini-flyer-luxury-minimal .style-mini-badge,
      .style-mini-flyer-luxury-showcase .style-mini-badge {
        background: rgba(248, 245, 238, 0.82);
      }

      .style-mini-flyer-luxury .style-mini-line,
      .style-mini-flyer-luxury-minimal .style-mini-line,
      .style-mini-flyer-luxury-showcase .style-mini-line,
      .style-mini-flyer-bold .style-mini-line {
        background: rgba(248, 245, 238, 0.35);
      }

      .style-mini-flyer-luxury-showcase {
        grid-template-rows: 34% 14% 1fr auto;
      }

      .style-mini-flyer-luxury-showcase .style-mini-copy {
        grid-row: 3;
      }

      .style-mini-flyer-luxury-showcase::after {
        content: "";
        display: block;
        grid-row: 2;
        border-radius: 7px;
        background:
          linear-gradient(90deg, rgba(248, 245, 238, 0.35), rgba(248, 245, 238, 0.12));
      }

      .style-mini-flyer-bold .style-mini-badge,
      .style-mini-flyer-bold .style-mini-title {
        background: #60a5fa;
      }

      .style-mini-flyer-minimal {
        background: #ffffff;
      }

      .style-preview-modern {
        background: linear-gradient(145deg, #ffffff 0%, #dbeafe 100%);
        color: #123a8c;
      }

      .style-preview-modern-2 {
        background:
          linear-gradient(145deg, rgba(3, 12, 24, 0.96), rgba(15, 23, 42, 0.9)),
          linear-gradient(90deg, transparent 0 52%, rgba(212, 178, 107, 0.34) 52% 100%);
        color: #f8fafc;
      }

      .style-preview-modern-3 {
        background:
          linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(219, 234, 254, 0.82)),
          linear-gradient(90deg, transparent 0 62%, rgba(186, 230, 253, 0.55) 62% 100%);
        color: #14532d;
      }

      .style-preview-content-grid {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(219, 234, 254, 0.78)),
          linear-gradient(90deg, transparent 0 46%, rgba(18, 58, 140, 0.24) 46% 100%);
        color: #0f172a;
      }

      .style-preview-luxury {
        background: linear-gradient(145deg, #081321 0%, #d4b26b 160%);
        color: #f8f5ee;
      }

      .style-preview-luxury-minimal {
        background: linear-gradient(145deg, #030712 0%, #111827 62%, #d4b26b 160%);
        color: #efd8a0;
      }

      .style-preview-luxury-showcase {
        background:
          linear-gradient(145deg, rgba(3, 7, 18, 0.96), rgba(17, 24, 39, 0.92)),
          linear-gradient(90deg, transparent 0 54%, rgba(212, 178, 107, 0.34) 54% 100%);
        color: #efd8a0;
      }

      .style-preview-bold {
        background: linear-gradient(145deg, #0f172a 0%, #2563eb 100%);
        color: #ffffff;
      }

      .style-preview-minimal {
        background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
        color: #111827;
      }

      .flyer-template-card-meta {
        display: grid;
        gap: 4px;
      }

      .workspace-accent {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(47, 107, 255, 0.12);
        border: 1px solid rgba(74, 141, 255, 0.18);
        color: var(--brand-strong);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

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

      .branding-agent-edit .agent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .agent-accordion-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .agent-accordion-toggle .section-copy {
        margin-top: 6px;
      }

      .agent-accordion-chevron {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(255, 255, 255, 0.58);
        color: #475569;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
        transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      }

      .agent-accordion-toggle:hover .agent-accordion-chevron {
        background: rgba(255, 255, 255, 0.82);
        border-color: rgba(47, 107, 255, 0.2);
      }

      .agent-card.expanded .agent-accordion-chevron {
        transform: rotate(180deg);
      }

      .agent-accordion-content {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
        margin-top: 0;
      }

      .agent-card.expanded .agent-accordion-content {
        grid-template-rows: 1fr;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        margin-top: 16px;
      }

      .agent-accordion-inner {
        overflow: hidden;
      }

      .agent-grid .field.full {
        grid-column: 1 / -1;
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: rgba(15, 23, 42, 0.48);
        backdrop-filter: blur(6px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.16s ease, visibility 0.16s ease;
      }

      .modal-overlay.open {
        display: flex;
        opacity: 1;
        visibility: visible;
      }

      .modal-shell {
        width: min(520px, 100%);
        max-height: 90vh;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #0f172a;
        transform: translateY(8px) scale(0.98);
        transition: transform 0.18s ease;
      }

      .modal-shell.flyer-template-modal-shell {
        width: min(1180px, calc(100vw - 32px));
        max-width: 1180px;
      }

      .flyer-template-preview-modal-shell {
        width: min(96vw, 1280px);
        max-width: 1280px;
        max-height: calc(100vh - 32px);
      }

      .flyer-template-preview-modal-shell .modal-header {
        padding: 12px 18px;
      }

      .flyer-template-preview-modal-shell .modal-body {
        padding: 12px 16px;
      }

      .flyer-template-preview-modal-shell .modal-footer {
        padding: 10px 18px;
      }

      .flyer-template-preview-modal-shell .modal-subtitle {
        margin-top: 4px;
      }

      .workflow-video-modal-shell {
        width: min(1040px, calc(100vw - 40px));
      }

      .workflow-video-modal-body {
        padding: 20px 24px 24px;
      }

      .workflow-video-frame-shell {
        overflow: hidden;
        border-radius: 22px;
        background: #0f172a;
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
        aspect-ratio: 16 / 9;
      }

      .workflow-video-frame-shell iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
      }

      .workflow-video-fallback {
        margin: 12px 0 0;
        color: #64748b;
        font-size: 0.9rem;
      }

      .workflow-video-fallback a {
        color: var(--brand-strong);
        font-weight: 800;
      }

      .flyer-template-preview-fullscreen-frame {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-height: calc(100vh - 136px);
        overflow: auto;
        padding: 10px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid rgba(148, 163, 184, 0.18);
      }

      .flyer-template-preview-fullscreen-image {
        display: block;
        width: clamp(620px, 54vw, 820px);
        max-width: none;
        max-height: none;
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
      }

      .flyer-template-preview-fullscreen-description {
        margin: 10px 4px 0;
        color: #475569;
        font-size: 0.94rem;
        line-height: 1.45;
      }

      @media (max-width: 760px) {
        .flyer-template-preview-modal-shell {
          width: min(96vw, 100%);
        }

        .flyer-template-preview-fullscreen-image {
          width: min(100%, calc(100vw - 56px));
          max-width: 100%;
        }
      }

      .modal-overlay.open .modal-shell {
        transform: translateY(0) scale(1);
      }

      .replace-flyer-modal-shell {
        width: min(520px, 100%);
        grid-template-rows: auto auto;
      }

      .modal-header,
      .modal-footer {
        padding: 20px 24px;
        background: #ffffff;
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 16px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.92);
      }

      .modal-title {
        margin: 0;
        color: #0f172a;
        font-size: 1.28rem;
        font-weight: 800;
        line-height: 1.2;
      }

      .modal-subtitle {
        margin: 8px 0 0;
        color: #475569;
        line-height: 1.55;
      }

      .modal-close {
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: #f8fafc;
        color: #0f172a;
        border-radius: 999px;
        width: 38px;
        height: 38px;
        font-size: 1.35rem;
        line-height: 1;
        box-shadow: none;
      }

      .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px 24px;
        background: #ffffff;
      }

      .modal-footer {
        border-top: 1px solid rgba(226, 232, 240, 0.92);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }

      .modal-footnote {
        margin: 0;
        color: #64748b;
        font-size: 0.92rem;
      }

      .auth-modal-shell {
        width: min(520px, 100%);
      }

      .auth-modal-body {
        display: grid;
        gap: 18px;
      }

      .auth-modal-copy {
        margin: 0;
        color: #475569;
        line-height: 1.6;
      }

      .auth-modal-copy:empty {
        display: none;
      }

      .auth-modal-form {
        display: grid;
        gap: 14px;
      }

      .auth-modal-label {
        margin: 0 0 8px;
        font-size: 0.9rem;
        font-weight: 700;
        color: #0f172a;
      }

      .auth-modal-input {
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        border-radius: 14px;
        border: 1px solid rgba(171, 193, 226, 0.18);
        background: rgba(255, 255, 255, 0.96);
        color: #0f172a;
      }

      .auth-modal-input::placeholder {
        color: #94a3b8;
      }

      .auth-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
      }

      .modal-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .sample-listing-modal-shell {
        width: min(560px, 100%);
      }

      .sample-listing-copy {
        max-height: min(58vh, 520px);
        overflow-y: auto;
        padding-right: 6px;
      }

      .sample-listing-copy h3 {
        margin: 0 0 12px;
        color: #0f172a;
        font-size: 1.08rem;
      }

      .sample-listing-copy p {
        margin: 0 0 14px;
        color: #475569;
        line-height: 1.62;
      }

      .sample-listing-copy p:last-child {
        margin-bottom: 0;
      }

      .modal-actions .btn,
      .modal-footer > .btn {
        min-height: 46px;
      }

      .compare-intro-title {
        margin: 0;
        color: #0f172a;
        font-size: 1.25rem;
      }

      .compare-intro-copy {
        margin: 8px 0 0;
        color: #475569;
        line-height: 1.6;
      }

      .compare-grid {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .compare-card {
        position: relative;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(189, 205, 228, 0.42);
        padding: 22px;
      }

      .compare-card.premium {
        border-color: rgba(47, 107, 255, 0.2);
        background: linear-gradient(180deg, rgba(47, 107, 255, 0.08), rgba(255, 255, 255, 0.98));
        box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.08);
      }

      .compare-badge {
        position: absolute;
        top: 18px;
        right: 18px;
        border-radius: 999px;
        padding: 8px 10px;
        background: rgba(47, 107, 255, 0.12);
        color: var(--brand-strong);
        font-weight: 800;
        font-size: 0.8rem;
      }

      .compare-label {
        margin: 0 0 12px;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
      }

      .flyer-media-actions {
        margin-top: 14px;
        padding-top: 14px;
      }

      .flyer-generation-mode {
        display: grid;
        gap: 8px;
      }

      .flyer-generation-mode-control {
        display: inline-flex;
        width: fit-content;
        padding: 4px;
        border: 1px solid rgba(148, 163, 184, 0.26);
        border-radius: 16px;
        background: rgba(248, 250, 252, 0.86);
        gap: 4px;
      }

      .flyer-generation-mode-button {
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #475569;
        cursor: pointer;
        font: inherit;
        font-size: 0.88rem;
        font-weight: 800;
        padding: 9px 14px;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .flyer-generation-mode-button.active {
        background: linear-gradient(135deg, #163b82, #2f6bff);
        color: #ffffff;
        box-shadow: 0 10px 20px rgba(47, 107, 255, 0.18);
      }

      .flyer-generation-progress {
        display: grid;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(47, 107, 255, 0.18);
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.92)),
          radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 48%);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
      }

      .flyer-generation-progress[hidden] {
        display: none;
      }

      .flyer-generation-progress-copy {
        display: grid;
        gap: 4px;
      }

      .flyer-generation-progress-copy strong {
        color: #0f172a;
        font-size: 1rem;
      }

      .flyer-generation-progress-copy small {
        color: #475569;
        font-size: 0.9rem;
        line-height: 1.4;
      }

      .flyer-generation-progress-copy span {
        margin-top: 2px;
        color: #123a8c;
        font-size: 0.9rem;
        font-weight: 800;
      }

      .flyer-generation-progress-bar {
        position: relative;
        height: 8px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.22);
      }

      .flyer-generation-progress-bar span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -42%;
        width: 42%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(22, 59, 130, 0.12), #2f6bff, rgba(22, 59, 130, 0.12));
        animation: flyer-progress-shimmer 1.45s ease-in-out infinite;
      }

      @keyframes flyer-progress-shimmer {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(340%);
        }
      }

      .ai-flyer-result-frame {
        width: min(100%, 560px);
        max-width: 560px;
        display: grid;
        place-items: center;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 28px 54px rgba(15, 23, 42, 0.14);
        overflow: visible;
      }

      .ai-flyer-result {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        background: #ffffff;
        border-radius: 24px;
      }

      .compare-body {
        display: grid;
        gap: 14px;
      }

      .compare-section h4 {
        margin: 0 0 6px;
        font-size: 0.96rem;
      }

      .compare-section p {
        margin: 0;
        color: #54667f;
        line-height: 1.65;
      }

      .premium-signature {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(16, 32, 55, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .signature-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .signature-headshot {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        object-fit: cover;
        object-position: center;
        border: 1px solid rgba(16, 32, 55, 0.08);
      }

      .signature-details {
        min-width: 0;
      }

      .signature-name {
        margin: 0;
        font-size: 0.96rem;
        font-weight: 800;
      }

      .signature-meta {
        margin: 4px 0 0;
        color: #54667f;
        font-size: 0.88rem;
        line-height: 1.5;
      }

      .signature-logo {
        max-width: 92px;
        width: 100%;
        object-fit: contain;
        object-position: right center;
      }

      .comparison-note {
        margin: 0 0 18px;
        color: var(--warning);
        font-size: 0.92rem;
      }

      @media (max-width: 1080px) {
        .hero-grid,
        .panel-grid,
        .flyer-details-grid,
        .flyer-panel-grid,
        .flyer-guided-shell {
          grid-template-columns: 1fr;
        }

        .flyer-setup-section .field-grid {
          grid-template-columns: repeat(8, minmax(0, 1fr));
        }

        .flyer-details-grid {
          grid-template-columns: 1fr;
        }

        #field-flyer-price,
        #field-flyer-beds,
        #field-flyer-baths,
        #field-flyer-sqft {
          grid-column: span 2;
        }

        #field-flyer-property-type {
          grid-column: span 4;
        }

        .flyer-preview-sidebar {
          position: static;
          top: auto;
          max-height: none;
          overflow: visible;
        }

        .flyer-setup-hero {
          grid-template-columns: 1fr;
          align-items: start;
        }

        .flyer-style-picker-button {
          grid-template-columns: auto minmax(0, 1fr);
        }

        .flyer-style-picker-action {
          grid-column: 1 / -1;
          padding-top: 2px;
        }

        .flyer-template-summary {
          min-width: 0;
          padding-top: 0;
        }

        .listing-hero-visual {
          order: 2;
        }

        .branding-layout {
          grid-template-columns: 1fr;
        }

        .branding-colors-panel {
          padding: 16px 0 0;
          border-left: 0;
          border-top: 1px solid rgba(148, 163, 184, 0.16);
        }

        .branding-agent-edit .agent-grid {
          grid-template-columns: 1fr;
        }

        .branding-logo-footer .field {
          grid-template-columns: 1fr;
        }

        .branding-profile-header {
          grid-template-columns: 1fr;
        }

        .branding-profile-edit {
          justify-self: start;
        }

        .flyer-template-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .agent-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 820px) {
        html,
        body {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
        }

        .listing-hero-visual {
          display: none !important;
        }

        .app-shell {
          width: min(calc(100% - 24px), var(--content-width));
          max-width: calc(100% - 24px);
          padding-top: 16px;
          padding-left: 0;
          padding-right: 0;
          overflow-x: hidden;
        }

        .site-header {
          width: 100%;
          align-items: stretch;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 14px;
        }

        .brand-wrap {
          width: 100%;
          min-width: 0;
          gap: 12px;
          justify-content: flex-start;
        }

        .header-actions {
          width: 100%;
          display: grid;
          grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
          gap: 10px;
        }

        .header-actions .btn,
        .header-actions .btn-text {
          width: 100%;
          min-width: 0;
          justify-content: center;
          text-align: center;
          white-space: normal;
        }

        .hero-card {
          width: 100%;
          max-width: 100%;
          padding: 18px;
          overflow: hidden;
        }

        .hero-grid,
        .hero-card.is-listing-hero .hero-grid,
        .hero-card.is-flyer-hero .hero-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 18px;
        }

        .hero-grid > *,
        .hero-card.is-listing-hero .hero-grid > :first-child {
          min-width: 0;
          max-width: 100%;
          padding-top: 0;
        }

        .hero-title,
        .hero-card.is-listing-hero .hero-title,
        .hero-card.is-flyer-hero .hero-title {
          max-width: 100%;
          font-size: clamp(2.25rem, 12vw, 3.35rem);
          line-height: 1.02;
          letter-spacing: -0.045em;
          overflow-wrap: normal;
        }

        .hero-subtitle,
        .hero-card.is-listing-hero .hero-subtitle,
        .hero-card.is-flyer-hero .hero-subtitle {
          max-width: 100%;
          font-size: 1rem;
          line-height: 1.45;
        }

        .hero-cta-row,
        .hero-card.is-listing-hero .hero-cta-row,
        .hero-card.is-flyer-hero .hero-cta-row {
          width: 100%;
          flex-direction: column;
          align-items: stretch;
        }

        .hero-cta-row .btn {
          width: 100%;
        }

        .preview-card,
        .workflow-card {
          width: 100%;
          max-width: 100%;
        }

        .workflow-video-inline-button {
          width: min(100%, 360px);
          min-width: 0;
          justify-content: flex-start;
        }

        .workflow-video-modal-shell {
          width: min(100%, calc(100vw - 24px));
        }

        .workflow-video-modal-body {
          padding: 16px;
        }

        .flyer-carousel-stage {
          min-height: 300px;
        }

        .beta-gate {
          width: min(calc(100% - 24px), 520px);
          min-height: 100vh;
          margin: 0 auto;
          padding: 18px 0;
          overflow-x: hidden;
        }

        .beta-gate-card {
          width: 100%;
          max-width: 100%;
          padding: 24px 18px;
          border-radius: 24px;
        }

        .beta-gate-title {
          font-size: clamp(1.55rem, 8vw, 2rem);
          line-height: 1.1;
          overflow-wrap: normal;
        }

        .beta-gate-copy {
          font-size: 0.96rem;
          line-height: 1.5;
        }

        .field-grid,
        .field-grid.three-up,
        .field-grid.four-up,
        .flyer-setup-stack .field-grid.four-up,
        .flyer-setup-section .field-grid,
        .brand-color-field-grid,
        .agent-grid,
        .mode-selector,
        .flyer-template-grid,
        .flyer-stat-row,
        .compare-grid {
          grid-template-columns: 1fr;
        }

        #field-flyer-price,
        #field-flyer-beds,
        #field-flyer-baths,
        #field-flyer-sqft,
        #field-flyer-property-type {
          grid-column: auto;
        }

        .flyer-hero,
        .flyer-content-grid {
          grid-template-columns: 1fr;
        }

        .flyer-canvas-content-grid .flyer-stat-row {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .flyer-canvas-content-grid .content-grid-top,
        .flyer-canvas-content-grid .content-grid-lower {
          grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        }

        .flyer-canvas-luxury .flyer-stat-row {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .cta-actions,
        .output-actions,
        .modal-actions {
          flex-direction: column;
        }

        .cta-actions .btn,
        .output-actions .btn,
        .modal-actions .btn {
          width: 100%;
        }

        .tool-tabs {
          width: 100%;
          display: grid;
          grid-template-columns: 1fr;
        }

        .tool-tab {
          width: 100%;
          min-width: 0;
        }

        .brand-logo {
          height: 62px;
          flex: 0 0 auto;
        }

        .brand-name {
          font-size: 1.72rem;
        }

        .brand-tagline {
          font-size: 0.92rem;
          line-height: 1.15;
        }

        .flyer-setup-hero-badge {
          width: 100%;
          justify-content: center;
        }

        .flyer-style-picker-button {
          grid-template-columns: 1fr;
          justify-items: start;
        }

        .flyer-style-picker-art {
          width: 76px;
          height: 100px;
        }

        .flyer-preview-sidebar {
          padding: 18px;
        }

        .flyer-preview-stage-guided {
          padding: 14px;
        }

        .flyer-guided-footer-meta {
          gap: 8px;
        }

        .brand-version {
          font-size: 0.72rem;
        }

        .premium-signature {
          align-items: start;
          flex-direction: column;
        }

        .modal-header,
        .modal-body,
        .modal-footer {
          padding-left: 18px;
          padding-right: 18px;
        }
      }

      @media (max-width: 520px) {
        .header-actions {
          grid-template-columns: 1fr;
        }

        .header-actions .btn,
        .header-actions .btn-text {
          min-height: 48px;
        }

        .hero-card {
          padding: 16px;
          border-radius: 24px;
        }

        .tool-tabs {
          padding: 6px;
          border-radius: 24px;
        }

        .tool-tab {
          padding: 11px 14px;
          border-radius: 18px;
        }

        .hero-title,
        .hero-card.is-listing-hero .hero-title,
        .hero-card.is-flyer-hero .hero-title {
          font-size: clamp(2.15rem, 9.4vw, 2.55rem);
          line-height: 1.04;
          letter-spacing: -0.035em;
          text-wrap: wrap;
        }

        .hero-subtitle,
        .hero-card.is-listing-hero .hero-subtitle,
        .hero-card.is-flyer-hero .hero-subtitle {
          font-size: 0.98rem;
          overflow-wrap: anywhere;
        }

        section-header,
        .section-header-banner,
        .section-copy {
          max-width: 100%;
          overflow-wrap: anywhere;
        }
      }