/* Scoped to the app so the host website keeps its own styles. */
.persona-app {
    --bg: #08091e;
    --field: #101124;
    --text: #ecebe8;
    --muted: #9c9cad;
    --line: #2c2d40;
    --accent: #a99cc8;
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font: 18px/1.7 'Outfit', system-ui, sans-serif;
    min-height: 100vh;
    color-scheme: dark;
}
.persona-app *, .persona-app *::before, .persona-app *::after { box-sizing: border-box; }
.persona-app [hidden] { display: none !important; }
.persona-app h1, .persona-app h2, .persona-app h3, .persona-app p { margin: 0; }
.persona-app h1, .persona-app h2, .persona-app h3 { font: inherit; font-weight: 600; letter-spacing: -.025em; }
.persona-app button, .persona-app input, .persona-app textarea, .persona-app select { font: inherit; }
.persona-app button {
    padding: 10px 30px;
    border: 1px solid #aaa9b8;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.persona-app button:hover { background: #ffffff08; border-color: #706b93; }
.persona-app button:disabled { opacity: .55; cursor: wait; }
.persona-app :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.persona-app :is(input[type=text], textarea, select) {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
}
.persona-app :is(input[type=text], textarea, select):focus { border-color: var(--accent); }
.persona-app textarea { resize: vertical; min-height: 110px; }
.persona-app .small-textarea { min-height: 100px; }
.persona-app .big-textarea { min-height: 140px; }
.persona-app ::placeholder { color: #8b8b9d; opacity: 1; font-size: 15px; }
.persona-app label { color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* Guided questions share the same dark page, separated only by a fine rule. */
.persona-app .walkthrough { width: 90%; max-width: 1400px; margin: auto; padding: 48px 20px; min-height: 100vh; }
.persona-app .walk-container section { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; min-height: calc(100vh - 96px); }
.persona-app .column.left { padding-right: 32px; border-right: 1px solid var(--line); }
.persona-app .column-padding { display: flex; flex-direction: column; }
.persona-app .selected-avatar-wrapper { display: flex; align-items: center; flex-direction: column; margin-bottom: 40px; }
.persona-app .avatar, .persona-app #avatar-image {
    width: 164px; height: 164px; object-fit: cover;
    border-radius: 50%; border: 2px solid var(--accent); padding: 0;
}
.persona-app .walkthrough-avatar { width: 112px; height: 112px; }
.persona-app input.avatar-name { background: transparent; border: 0; text-align: center; font-size: 22px; padding: 14px 0 0; }
.persona-app .left h2 { font-size: 16px; margin-bottom: 14px; }
.persona-app .left p { font-size: 15px; color: var(--muted); line-height: 1.9; }
.persona-app .button-walk:not(.confirm) { color: var(--muted); font-size: 12px; margin-top: 24px; align-self: flex-start; padding: 8px 13px; }
.persona-app .page-title { font-size: 25px; line-height: 1.4; margin-bottom: 14px; }
.persona-app .right label { margin: 16px 0 8px; }
.persona-app #avatar-wrapper { align-self: flex-start; cursor: pointer; margin: 4px 0 12px; }
.persona-app #avatar-image { width: 76px; height: 76px; }
.persona-app .buttons-section { display: flex; justify-content: flex-end; gap: 12px; padding-top: 0; }
.persona-app .next-button, .persona-app .confirm { background: transparent; border-color: #aaa9b8; color: var(--text); }

/* Overview: open columns, quiet fields, no large enclosing panel. */
.persona-app .overview { --persona-color: #a78bfa; width: 90%; max-width: 1400px; margin: auto; padding: 28px 20px 80px; }
.persona-app .share-container { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 28px; }
.persona-app .share-text { font-size: 12px; color: var(--muted); }
.persona-app .share-icons { display: flex; gap: 8px; }
.persona-app .share-icons a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #47495f; border-radius: 50%; }
.persona-app .share-icons a:hover { background: #ffffff0a; border-color: var(--accent); }
.persona-app .share-icons img { width: 14px; height: 14px; object-fit: contain; }
.persona-app #overview-title { color: var(--text); font-size: 32px; line-height: 1.4; margin-bottom: 26px; }
.persona-app .title-overview { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.persona-app .title-overview-col1 { display: flex; align-items: center; gap: 14px; }
.persona-app .color-label label { color: var(--muted); font-size: 12px; }
.persona-app .input-color-container { position: relative; overflow: hidden; flex: 0 0 28px; width: 28px; height: 28px; border: 2px solid #75758b; border-radius: 50%; background: var(--persona-color); }
.persona-app #input-color { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: pointer; }
.persona-app .input-color-container:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.persona-app #generate-pdf { border-color: var(--persona-color); padding: 10px 30px; }
.persona-app .hidden-elements { display: none; }
.persona-app .overview-container { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 52px; }
.persona-app .overview-left { padding-right: 28px; border-right: 1px solid var(--line); }
.persona-app .justify-center { display: flex; justify-content: center; padding: 0 0 26px; cursor: pointer; }
.persona-app .overview .avatar { border-color: var(--persona-color); }
.persona-app #sortable-list-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.persona-app div.dragable-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 0 24px; border: 0; background: transparent; }
.persona-app .dragable-item label { padding-right: 20px; }
.persona-app .overview :is(input[type=text], textarea, select) { font-size: 15px; }
.persona-app .overview textarea { max-height: none; overflow: hidden; }
.persona-app .overview .small-textarea { min-height: 92px; }
.persona-app .overview .big-textarea { min-height: 120px; }
.persona-app .drag-handle { position: absolute; left: -17px; top: 15px; cursor: grab; color: var(--muted); opacity: 0; }
.persona-app button.delete-icon { position: absolute; top: 12px; right: 0; border: 0; border-radius: 4px; margin: 0; padding: 0 4px; font-size: 16px; color: var(--muted); opacity: 0; }
.persona-app .dragable-item:hover :is(.drag-handle, .delete-icon), .persona-app .dragable-item:focus-within :is(.drag-handle, .delete-icon) { opacity: 1; }
.persona-app .delete-icon:hover { color: #f1a4b2; }
.persona-app .new-title { background: transparent !important; border: 0 !important; padding: 0 !important; font-weight: 500; color: var(--text); }
.persona-app div.add-item { margin-top: 24px; padding: 13px; border: 1px dashed #4a4564; border-radius: 4px; text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; }
.persona-app .add-item:hover { border-color: var(--persona-color); color: var(--text); }
.persona-app .warning-message { display: none; max-width: 520px; padding: 80px 30px; margin: auto; text-align: center; color: var(--muted); }
@media (max-width: 1100px) {
    .persona-app .walk-container section { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
    .persona-app .overview-container { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}

@media (hover: none) {
    .persona-app .drag-handle, .persona-app button.delete-icon { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .persona-app button { transition: none; }
}

.persona-app .justify-center { flex-direction: column; align-items: center; gap: 14px; }
.persona-app .persona-name { color: var(--text); font-size: 20px; font-weight: 600; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.persona-app .persona-name:empty { display: none; }

/* Editorial hierarchy replaces repeated outlines and decorative accents. */
.persona-app .step-number { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.persona-app .page-title { font-size: 34px; font-weight: 500; }
.persona-app #overview-title { font-size: 42px; font-weight: 500; letter-spacing: -.04em; }
.persona-app .overview-section-title { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 22px 0 4px; margin-top: 24px; font-size: 17px; font-weight: 500; color: var(--text); }
.persona-app .overview-section-title:first-child { border: 0; padding-top: 0; margin-top: 0; }
.persona-app .overview input[type=text] { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.persona-app .overview input[type=text]:focus { border-color: var(--accent); }
.persona-app .overview label { font-weight: 400; color: #c5c5c0; }
.persona-app .overview .new-title { padding: 0; }
.persona-app .first-page #avatar-wrapper { margin-bottom: 8px; }
.persona-app .first-page #avatar-image { width: 76px; height: 76px; border-color: var(--line); }
.persona-app .first-page [data-persona-name] { text-align: left; font-size: 18px; margin: 0 0 18px; }
.persona-app .next-button:hover, .persona-app .confirm:hover { background: #ffffff08; border-color: #d5d3df; }

.persona-app .column.right { display: flex; flex-direction: column; }
.persona-app .buttons-section { flex-shrink: 0; align-self: center; }

/* Two columns for short profile facts; longer answers keep the full width. */
.persona-app .walk-fields { display: grid; gap: 0 24px; }
.persona-app .walk-field { display: flex; flex-direction: column; min-width: 0; }
.persona-app .first-page .walk-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.persona-app .first-page .walk-field:first-child { grid-column: 1 / -1; }
.persona-app .step-progress { height: 4px; background: #18172d; border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.persona-app .step-progress-fill { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #3632b4, #7540d7, #ed00d5, #7540d7, #3632b4); }

/* Same moving contour as alanlouette.be, scoped and independently named. */
@property --persona-button-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.persona-app .confirm, .persona-app .next-button, .persona-app #generate-pdf {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    border-color: transparent;
}
.persona-app .confirm:hover, .persona-app .next-button:hover { border-color: transparent; }
.persona-app .confirm::before, .persona-app .next-button::before, .persona-app #generate-pdf::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    z-index: 2;
    background: conic-gradient(from var(--persona-button-angle), #ff00aa 0deg, #ff00aa 70deg, #8d3dff 130deg, #0066ff 200deg, #0066ff 270deg, #8d3dff 320deg, #ff00aa 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: persona-button-border 10s linear infinite;
}
.persona-app .confirm::after, .persona-app .next-button::after, .persona-app #generate-pdf::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
    transition: background .35s ease;
}
.persona-app .confirm:hover::after, .persona-app .next-button:hover::after, .persona-app #generate-pdf:hover::after { background: #ffffff14; }
.persona-app .confirm:disabled::before, .persona-app .next-button:disabled::before, .persona-app #generate-pdf:disabled::before { animation-play-state: paused; }
@keyframes persona-button-border { to { --persona-button-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .persona-app .confirm::before, .persona-app .next-button::before, .persona-app #generate-pdf::before { animation: none; }
    .persona-app .confirm::after, .persona-app .next-button::after, .persona-app #generate-pdf::after { transition: none; }
}

.persona-app .title-overview { flex-wrap: wrap; }
.persona-app .pdf-logo-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.persona-app .pdf-logo-control label { color: var(--muted); font-size: 12px; }
.persona-app #pdf-logo-input { max-width: 220px; font-size: 12px; color: var(--muted); }
.persona-app #pdf-logo-input::file-selector-button { background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin-right: 8px; cursor: pointer; }
.persona-app #pdf-logo-preview { max-width: 72px; max-height: 32px; object-fit: contain; }
.persona-app #remove-pdf-logo { font-size: 12px; padding: 6px 10px; }

.persona-app .draft-toolbar { width: 90%; max-width: 1400px; padding: 14px 20px 0; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }
.persona-app #new-persona { font-size: 12px; padding: 6px 12px; border-color: var(--line); }

.persona-app .draft-toolbar { flex-wrap: wrap; align-items: flex-start; }
.persona-app .persona-library, .persona-app .audience-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.persona-app .persona-library :is(button, select), .persona-app .audience-toolbar select { font-size: 13px; padding: 7px 12px; width: auto; }
.persona-app #saved-personas { max-width: 230px; }
.persona-app .persona-library label, .persona-app .audience-toolbar label { font-size: 13px; color: var(--muted); }
.persona-app .audience-toolbar { width: 90%; max-width: 1400px; padding: 16px 20px 0; margin: auto; }

/* Small screens show only the original screen-size message. */
@media (max-width: 980px) {
    .persona-app .warning-message { display: block; }
    .persona-app .walkthrough, .persona-app .overview,
    .persona-app .draft-toolbar, .persona-app .audience-toolbar { display: none; }
}

.persona-app .step-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
.persona-app .step-heading { flex: 1; min-width: 220px; }
.persona-app .step-header .page-title { margin-bottom: 0; }

/* Keep navigation at the bottom of the viewport, independent of form length. */
.persona-app .walkthrough { padding-bottom: 110px; }
.persona-app .buttons-section {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1400px;
    padding: 16px 20px;
    background: var(--bg);
    border-top: 1px solid var(--line);
    z-index: 10;
}