.lpia {
	max-width: 1440px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	--lpia-border: color-mix(in srgb, var(--ink) 23%, var(--surface));
	--lpia-soft: color-mix(in srgb, var(--ink) 5%, var(--surface));
}
.lpia h1 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.035em; line-height: 1.2; }
.lpia h2 { font-size: 21px; line-height: 1.4; margin: 0 0 16px; color: var(--ink); }
.lpia h3 { font-size: 18px; line-height: 1.5; margin: 24px 0 10px; color: var(--ink); }
.lpia h4 { font-size: 16px; margin: 12px 0; }
.lpia p { margin: 10px 0 16px; }
.lpia .cap, .lpia small, .lpia .quiet { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.lpia .cap { margin: 8px 0 14px; }
.lpia .note { color: var(--ink); background: var(--lpia-soft); border: 1px solid var(--lpia-border); font-size: 15px; line-height: 1.6; padding: 16px 20px; border-radius: 10px; }
.lpia .lpia-filters, .lpia .lpia-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.lpia .lpia-filters { padding: 20px; background: var(--surface); border: 1px solid var(--lpia-border); border-radius: 12px; }
.lpia label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; flex: 1 1 150px; color: var(--ink); }
.lpia input, .lpia select, .lpia textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--lpia-border); border-radius: 8px; font: inherit; font-weight: 400; color: var(--ink); background: var(--plane); box-sizing: border-box; min-height: 46px; }
.lpia input[type=checkbox] { width: 22px; min-height: 22px; }
.lpia textarea { min-height: 115px; resize: vertical; }
.lpia .lpia-form label:has(textarea) { flex-basis: 100%; }
.lpia .lpia-form { margin: 24px 0; }
.lpia .lpia-form h3 { flex-basis: 100%; margin: 4px 0; }
.lpia button { font-size: 15px; line-height: 1.5; min-height: 44px; color: var(--ink); background: var(--surface); border: 1px solid var(--lpia-border); padding: 10px 16px; }
.lpia button:hover { background: var(--lpia-soft); border-color: var(--ink-2); }
.lpia-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 24px 0 12px; border-bottom: 1px solid var(--lpia-border); }
.lpia .lpia-tabs button { background: transparent; color: var(--ink-2); border: 1px solid transparent; }
.lpia .lpia-tabs button[aria-current], .lpia .lpia-inspector-tabs button[aria-pressed=true] { background: var(--ink); color: var(--plane); }
.lpia button:focus-visible, .lpia summary:focus-visible, .lpia input:focus-visible, .lpia select:focus-visible, .lpia textarea:focus-visible, .lpia-flow-viewport:focus-visible { outline: 3px solid var(--s1); outline-offset: 3px; }
.lpia button:disabled { opacity: 0.6; cursor: wait; }
.lpia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 24px; }
.lpia-card { border: 1px solid var(--lpia-border); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 26px; margin-bottom: 24px; overflow-wrap: anywhere; min-width: 0; }
.lpia-grid .lpia-card { margin-bottom: 0; }
.lpia .lpia-grid h2 { font-size: 18px; }
.lpia-value { display: block; font-size: 36px; font-weight: 650; margin-bottom: 14px; line-height: 1.25; }
.lpia-badge { display: inline-block; background: #e8edf0; color: #243a46; border-radius: 6px; padding: 5px 10px; font-size: 13px; font-weight: 600; line-height: 1.5; margin: 2px 8px 2px 0; }
.lpia-mature, .lpia-ready, .lpia-completed, .lpia-accepted { background: #d9f1e2; color: #163f2b; }
.lpia-failed, .lpia-unavailable, .lpia-budget_exhausted, .lpia-interrupted { background: #ffe2db; color: #7b291f; }
.lpia-insufficient, .lpia-provisional, .lpia-partial { background: #fff0c9; color: #624609; }
.lpia-running, .lpia-queued { background: #dceaff; color: #163e74; }
.lpia-json { max-height: 480px; overflow: auto; background: var(--plane); color: var(--ink); border: 1px solid var(--lpia-border); border-radius: 8px; padding: 18px; font: 14px/1.7 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.lpia details { margin: 16px 0; }
.lpia summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); padding: 10px 0; }
.lpia-status { min-height: 24px; font-size: 16px; color: var(--ink-2); }
.lpia-row + .lpia-row { border-top: 1px solid var(--lpia-border); margin-top: 24px; padding-top: 24px; }
.lpia .lpia-lead { font-size: 19px; line-height: 1.75; max-width: 86ch; margin: 22px 0; }
.lpia .lpia-finding { border-left: 3px solid var(--lpia-border); padding: 12px 18px; background: var(--lpia-soft); border-radius: 0 8px 8px 0; }
.lpia-finding small { display: block; margin-top: 10px; }
.lpia li { padding: 5px 0; max-width: 90ch; }
.lpia-prose { white-space: pre-wrap; max-width: 90ch; }
.lpia-flow { margin: 24px 0; min-width: 0; }
.lpia-flow-viewport { max-width: 100%; overflow-x: auto; border: 1px solid var(--lpia-border); border-radius: 12px; background: var(--plane); padding: 18px; }
.lpia-flow-graph { display: grid; grid-template-columns: repeat(var(--flow-columns), minmax(160px, 1fr)); gap: 24px; min-width: calc(var(--flow-columns) * 180px); position: relative; align-items: start; }
.lpia-flow-column { display: flex; flex-direction: column; gap: 14px; z-index: 1; min-width: 0; }
.lpia .lpia-flow-column-title { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.lpia .lpia-flow-node { display: flex; flex-direction: column; align-items: start; gap: 10px; text-align: left; width: 100%; padding: 16px 12px; border: 2px solid var(--lpia-border); border-radius: 10px; box-shadow: 0 2px 4px var(--ring); }
.lpia .lpia-flow-node strong { font-size: 16px; line-height: 1.4; }
.lpia .lpia-flow-node[aria-pressed=true] { border-color: var(--s1); box-shadow: 0 0 0 2px var(--s1); }
.lpia-flow-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.lpia-flow-edges path { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.lpia-step-inspector { margin-top: 20px; padding: 24px; border: 1px solid var(--lpia-border); background: var(--surface); border-radius: 12px; }
.lpia .lpia-step-inspector h3 { margin-top: 0; font-size: 22px; }
.lpia-step-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px; color: var(--ink-2); }
.lpia .lpia-step-meta p { font-size: 14px; margin: 0 0 8px; }
.lpia-inspector-tabs { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--lpia-border); margin-bottom: 20px; }
.lpia-data-row { padding: 12px 0; border-bottom: 1px solid var(--lpia-border); }
.lpia-data-row dt { font-weight: 650; font-size: 14px; color: var(--ink-2); }
.lpia-data-row dd { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }
.lpia-data-item { border: 1px solid var(--lpia-border); padding: 16px; border-radius: 8px; margin: 12px 0; }
.lpia-error-box { background: #ffe2db; color: #7b291f; padding: 16px; border-radius: 8px; }
.lpia .lpia-linked-run { margin: 18px 12px 0 0; }
.lpia-history-controls { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.lpia-history-controls label { flex: 1 1 200px; }
.lpia .lpia-history-card h2 { max-width: 90ch; }
.lpia .lpia-history-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--ink-2); margin: 12px 0; font-size: 14px; }
@media (max-width: 600px) {
	.lpia-card, .lpia-step-inspector { padding: 18px; }
	.lpia-tabs button { flex: 1 0 42%; }
	.lpia-filters label { flex-basis: 42%; }
	.lpia-grid { grid-template-columns: 1fr; }
	.lpia .lpia-lead { font-size: 17px; }
	.lpia .lpia-filters { padding: 16px; }
}

/* Catálogo visual: imagens privadas, comparação e navegação sem código gerado. */
.lpia-visuals { min-width: 0; }
.lpia-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.lpia-visual-grid .lpia-card { min-width: 0; }
.lpia-capture { display: block; width: 100%; max-width: 390px; height: auto; margin: 16px auto; border: 1px solid #737780; border-radius: 12px; background: #000; }
.lpia-visual-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.lpia-screen-viewport { max-width: 100%; overflow: auto; margin: 20px 0; padding: 12px 0; }
.lpia-screen-graph { display: flex; gap: 32px; position: relative; width: max-content; padding: 12px; }
.lpia-screen-node { z-index: 1; flex: 0 0 190px; width: 190px; min-height: 110px; display: flex; flex-direction: column; gap: 10px; text-align: left; white-space: normal; }
.lpia-screen-node[aria-pressed="true"] { outline: 3px solid #6c64c4; outline-offset: 3px; }
.lpia-visuals .lpia-table { width: 100%; table-layout: fixed; overflow-wrap: anywhere; }
.lpia-visuals .lpia-table th, .lpia-visuals .lpia-table td { text-align: left; padding: 10px; vertical-align: top; }
.lpia-edge-editor { padding: 16px; border: 1px solid #737780; border-radius: 10px; margin-bottom: 16px; }
.lpia-visuals fieldset { border: 1px solid #737780; border-radius: 10px; padding: 16px; }
.lpia-visuals input[type="checkbox"] { width: 20px; height: 20px; margin: 8px 12px; vertical-align: middle; }
.lpia-prototype { max-width: 390px; margin: 20px auto; }
.lpia-prototype-stage { position: relative; }
.lpia-prototype-stage .lpia-capture { margin: 0; border: 0; border-radius: 0; }
.lpia .lpia-hotspot { position: absolute; z-index: 2; background: transparent; color: transparent; border: 2px dashed #40e0ff; border-radius: 12px; padding: 0; min-height: 0; overflow: hidden; }
.lpia .lpia-hotspot:hover, .lpia .lpia-hotspot:focus-visible { background: #40e0ff30; color: transparent; outline: 3px solid #fff; }
.lpia-visuals h2, .lpia-visuals p { overflow-wrap: anywhere; }

.lpia-component-preview{width:100%;height:844px;border:0;border-radius:22px;background:#000;display:block}.lpia-prototype-stage:has(.lpia-component-preview){max-width:390px;margin:auto}

.lpia-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}.lpia-comparison-grid>.lpia-card{min-width:0}.lpia-comparison-grid>.lpia-card>button{margin:8px 8px 8px 0}.lpia-comparison-grid .lpia-capture{width:100%;max-width:390px}@media(max-width:850px){.lpia-comparison-grid{grid-template-columns:1fr}}
.lpia-table-scroll{max-width:100%;overflow-x:auto}.lpia-table-scroll table{width:100%;border-collapse:collapse}.lpia-table-scroll th,.lpia-table-scroll td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid var(--lpia-border);min-width:140px;overflow-wrap:anywhere}.lpia-table-scroll th{font-weight:600}