.manual-overlay {
    z-index: 11000;
    padding: 18px;
    background: rgba(2, 6, 23, .82);
    backdrop-filter: blur(12px);
}

.manual-overlay[hidden] { display: none !important; }

.manual-shell {
    width: min(1120px, 100%);
    height: min(760px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e8f0;
    background: #07111f;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .52), 0 0 0 1px rgba(99, 102, 241, .08);
}

.manual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(120deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .74));
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.manual-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.manual-brand-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #c4b5fd; background: rgba(124, 58, 237, .18); border: 1px solid rgba(167, 139, 250, .3); border-radius: 13px; font-size: 19px; }
.manual-eyebrow, .manual-kicker, .manual-nav-label { margin: 0; color: #94a3b8; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.manual-brand h2, .manual-panel-heading h3, .manual-tool-heading h4 { margin: 3px 0 0; color: #f8fafc; letter-spacing: -.02em; }
.manual-brand h2 { font-size: 20px; }
.manual-brand p:last-child { margin: 4px 0 0; color: #94a3b8; font-size: 11px; }
.manual-close { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #cbd5e1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; transition: .2s ease; }
.manual-close:hover, .manual-close:focus-visible { color: #fff; background: rgba(239, 68, 68, .18); border-color: rgba(248, 113, 113, .45); }

.manual-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; flex: 1; }
.manual-sidebar { padding: 22px 12px; background: rgba(2, 6, 23, .28); border-right: 1px solid rgba(148, 163, 184, .1); }
.manual-sidebar .manual-nav-label { padding: 0 10px 10px; }
.manual-category-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px; margin-bottom: 5px; color: #94a3b8; background: transparent; border: 1px solid transparent; border-radius: 11px; font: inherit; font-size: 11px; text-align: left; cursor: pointer; transition: .2s ease; }
.manual-category-button i { width: 18px; text-align: center; color: #64748b; }
.manual-category-button:hover, .manual-category-button:focus-visible { color: #f8fafc; background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.16); }
.manual-category-button.is-active { color: #f8fafc; background: rgba(99,102,241,.15); border-color: rgba(129,140,248,.3); box-shadow: inset 3px 0 #818cf8; }
.manual-category-button.is-active i { color: #a5b4fc; }
.manual-main { min-width: 0; min-height: 0; overflow: auto; }
.manual-panel { padding: 28px; animation: manual-panel-in .22s ease both; }
.manual-panel[hidden] { display: none; }
@keyframes manual-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.manual-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.manual-panel-heading h3 { font-size: 23px; }
.manual-panel-heading p:last-child { max-width: 650px; margin: 7px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.55; }
.manual-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #86efac; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }

.manual-tool-layout { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 18px; align-items: start; }
.manual-tool-list-wrap { min-width: 0; }
.manual-tool-list-wrap > .manual-nav-label { padding: 3px 5px 9px; }
.manual-tool-list { display: flex; flex-direction: column; gap: 5px; }
.manual-tool-button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 8px; color: #94a3b8; background: rgba(255,255,255,.018); border: 1px solid rgba(148,163,184,.08); border-radius: 10px; font: inherit; font-size: 10px; text-align: left; cursor: pointer; transition: .2s ease; }
.manual-tool-button i { width: 19px; color: var(--tool-color); text-align: center; font-size: 12px; }
.manual-tool-button small { display: block; margin-top: 2px; color: #64748b; font-size: 8px; }
.manual-tool-button:hover, .manual-tool-button:focus-visible { color: #fff; background: rgba(255,255,255,.05); border-color: rgba(148,163,184,.2); }
.manual-tool-button.is-active { color: #fff; background: color-mix(in srgb, var(--tool-color) 14%, transparent); border-color: color-mix(in srgb, var(--tool-color) 45%, transparent); box-shadow: inset 3px 0 var(--tool-color); }
.manual-tool-detail { min-width: 0; padding: 17px; background: rgba(15,23,42,.58); border: 1px solid rgba(148,163,184,.12); border-radius: 17px; }
.manual-tool-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.manual-tool-heading h4 { font-size: 16px; }
.manual-replay { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #c4b5fd; background: rgba(124,58,237,.12); border: 1px solid rgba(167,139,250,.25); border-radius: 8px; font: inherit; font-size: 9px; cursor: pointer; }
.manual-replay:hover, .manual-replay:focus-visible { color: #fff; background: rgba(124,58,237,.25); }
.manual-demo { min-height: 260px; display: grid; place-items: center; padding: 14px; overflow: hidden; background: radial-gradient(circle at 80% 10%, rgba(99,102,241,.08), transparent 42%), #020617; border: 1px solid rgba(148,163,184,.1); border-radius: 13px; }
.manual-description-card { margin-top: 13px; padding: 12px 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.1); border-radius: 11px; }
.manual-description-card p:not(.manual-kicker) { margin: 5px 0 0; color: #e2e8f0; font-size: 11px; line-height: 1.55; }
.manual-description-card .manual-tool-note { color: #94a3b8; font-size: 10px; }

.manual-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.manual-guide-card { min-height: 205px; padding: 17px; background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.1); border-radius: 15px; }
.manual-guide-card--violet { border-top: 2px solid #8b5cf6; }.manual-guide-card--cyan { border-top: 2px solid #22d3ee; }.manual-guide-card--green { border-top: 2px solid #34d399; }
.manual-guide-icon { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 12px; color: #c4b5fd; background: rgba(124,58,237,.13); border-radius: 9px; }
.manual-guide-card h4 { margin: 0; color: #f8fafc; font-size: 13px; }.manual-guide-card p { margin: 7px 0 16px; color: #94a3b8; font-size: 10px; line-height: 1.55; }
.manual-connection-demo, .manual-mini-tree, .manual-search-demo { display: flex; align-items: center; gap: 8px; min-height: 35px; color: #cbd5e1; font-size: 9px; }
.manual-node, .manual-tree-parent, .manual-tree-child { padding: 7px 8px; border-radius: 7px; }.manual-node--blue, .manual-tree-parent { background: rgba(59,130,246,.16); color: #93c5fd; }.manual-node--gold, .manual-tree-child { background: rgba(212,175,55,.16); color: #fde68a; }
.manual-connection-demo i { color: #818cf8; animation: manual-arrow-pulse 1.4s ease-in-out infinite; }.manual-search-demo i { color: #34d399; font-size: 17px; animation: manual-satellite 1.7s ease-in-out infinite; }.manual-search-demo span { width: 23px; height: 3px; background: #334155; border-radius: 99px; animation: manual-search-line 1.5s ease-in-out infinite; }.manual-search-demo span:nth-child(3) { animation-delay: .2s; }.manual-search-demo span:nth-child(4) { animation-delay: .4s; }
@keyframes manual-arrow-pulse { 50% { transform: translateX(4px); opacity: .45; } }@keyframes manual-satellite { 50% { transform: rotate(12deg) translateY(-2px); } }@keyframes manual-search-line { 50% { background: #34d399; transform: scaleX(1.25); } }

.manual-personalizacao-layout { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }.manual-palette-preview { min-height: 280px; display: flex; flex-direction: column; overflow: hidden; background: #111827; border: 1px solid rgba(212,175,55,.25); border-radius: 16px; }.manual-palette-preview-top { display: flex; gap: 6px; padding: 12px; background: rgba(0,0,0,.22); }.manual-palette-preview-top span { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; }.manual-palette-preview-top span:nth-child(2) { background: #f59e0b; }.manual-palette-preview-top span:nth-child(3) { background: #22c55e; }.manual-palette-surface { flex: 1; padding: 32px 25px; background: linear-gradient(145deg, #172554, #0f172a); }.manual-palette-star { display: block; margin-bottom: 14px; color: #fde68a; font-size: 28px; animation: manual-star-glow 1.8s ease-in-out infinite; }.manual-palette-surface strong { color: #f8fafc; font-size: 15px; }.manual-palette-surface p { max-width: 270px; margin: 8px 0 0; color: #bfdbfe; font-size: 10px; line-height: 1.5; }.manual-palette-swatches { display: flex; gap: 7px; padding: 13px; background: rgba(0,0,0,.18); }.manual-palette-swatches span { width: 25px; height: 15px; background: var(--swatch); border: 1px solid rgba(255,255,255,.22); border-radius: 5px; }.manual-personalizacao-copy { display: flex; flex-direction: column; justify-content: center; gap: 9px; }.manual-setting-row { display: flex; gap: 11px; padding: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.1); border-radius: 12px; }.manual-setting-row strong { color: #f8fafc; font-size: 11px; }.manual-setting-row p { margin: 4px 0 0; color: #94a3b8; font-size: 10px; line-height: 1.45; }.manual-setting-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 3px; background: #60a5fa; border-radius: 50%; box-shadow: 0 0 10px currentColor; }.manual-setting-dot--firmamento { background: #d4af37; }.manual-setting-dot--bairro { background: #c084fc; }
@keyframes manual-star-glow { 50% { filter: drop-shadow(0 0 8px #fde68a); transform: scale(1.08); } }

/* Demonstrações */
.demo-frame { width: min(100%, 430px); min-height: 215px; overflow: hidden; background: rgba(15,23,42,.9); border: 1px solid color-mix(in srgb, var(--demo-color) 50%, transparent); border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,.22); transform: translateY(7px); opacity: .35; transition: opacity .45s ease, transform .45s ease, border-color .25s ease; }.demo-frame.is-playing { opacity: 1; transform: translateY(0); }.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; color: var(--demo-color); background: color-mix(in srgb, var(--demo-color) 18%, #0f172a); border-bottom: 1px solid color-mix(in srgb, var(--demo-color) 25%, transparent); font-size: 8px; }.demo-toolbar-group { display: flex; align-items: center; gap: 7px; }.demo-icon { color: #cbd5e1; font-size: 13px; }.demo-action { opacity: .76; }.demo-focus-chip { display: inline-block; margin: 15px 17px 0; padding: 5px 7px; color: var(--demo-color); background: color-mix(in srgb, var(--demo-color) 13%, transparent); border-radius: 6px; font-size: 8px; }.demo-title-field, .demo-content-field, .demo-firmamento-content { margin: 14px 17px 0; color: #f8fafc; line-height: 1.5; }.demo-title-field { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--demo-color) 28%, transparent); font-size: 12px; font-weight: 800; animation: demo-field-in .7s .15s ease both; }.demo-content-field { min-height: 54px; padding-bottom: 18px; color: #cbd5e1; font-size: 11px; animation: demo-field-in .7s .42s ease both; }.demo-focus-chip { animation: demo-field-in .55s ease both; }.demo-reason-number { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--demo-color); background: color-mix(in srgb, var(--demo-color) 17%, transparent); border-radius: 7px; font-size: 10px; }.demo-frame--contentor .demo-content-field { margin-top: 27px; }.demo-frame--firmamento { background: linear-gradient(140deg, #111827, #172554); }.demo-firmamento-palette { display: flex; gap: 7px; padding: 14px 17px 0; }.demo-swatch { width: 18px; height: 18px; background: var(--swatch); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; animation: demo-swatch-in .5s ease both; }.demo-swatch:nth-child(2) { animation-delay: .17s; }.demo-swatch:nth-child(3) { animation-delay: .34s; }.demo-firmamento-content { min-height: 80px; padding: 20px 0; color: #e0f2fe; }.demo-tree-parent, .demo-tree-child { margin: 17px 22px 0; padding: 9px 11px; border-radius: 7px; font-size: 11px; }.demo-tree-parent { color: #fecaca; background: rgba(239,68,68,.14); font-weight: 800; animation: demo-field-in .5s .1s ease both; }.demo-tree-child { margin-top: 7px; margin-left: 44px; color: #fecaca; background: rgba(239,68,68,.07); animation: demo-field-in .5s .48s ease both; }.demo-tree-links { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 22px 20px 65px; }.demo-link-pill { padding: 5px 8px; color: #fecaca; background: rgba(239,68,68,.08); border: 1px dashed rgba(248,113,113,.35); border-radius: 99px; font-size: 8px; animation: demo-field-in .5s .85s ease both; }.demo-link-pill:nth-child(2) { animation-delay: 1.03s; }
.demo-task-group { margin: 17px; padding: 13px; background: rgba(192,132,252,.08); border: 1px solid rgba(192,132,252,.3); border-radius: 10px; }.demo-group-title { display: block; margin-bottom: 10px; color: #e9d5ff; font-size: 11px; }.demo-task { position: relative; padding: 8px 8px 8px 25px; margin-top: 5px; color: #d8b4fe; background: rgba(255,255,255,.04); border-radius: 7px; font-size: 10px; transition: opacity .3s ease, transform .3s ease, background .3s ease; }.demo-task::before { content: ''; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border: 1px solid #c084fc; border-radius: 50%; }.demo-task.is-complete { color: #86efac; background: rgba(34,197,94,.1); text-decoration: line-through; }.demo-task.is-complete::before { content: '✓'; display: grid; place-items: center; color: #052e16; background: #86efac; border-color: #86efac; font-size: 8px; }.demo-task.is-hidden { opacity: 0; transform: translateX(12px); }
.demo-card-body { display: flex; gap: 14px; padding: 20px 17px; }.demo-card-image { width: 92px; height: 110px; display: grid; place-items: center; flex: 0 0 auto; color: #fde68a; background: radial-gradient(circle at 30% 30%, #f59e0b, transparent 27%), linear-gradient(160deg, #164e63, #78350f); border: 1px solid rgba(212,175,55,.42); border-radius: 9px; font-size: 28px; animation: demo-image-in .65s ease both; }.demo-card-copy { display: flex; flex-direction: column; gap: 8px; }.demo-card-copy .demo-title-field, .demo-card-copy .demo-content-field { margin: 0; }.demo-card-copy .demo-content-field { padding: 0; }.demo-citation-loading, .demo-summary-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 75px; color: #cbd5e1; font-size: 10px; }.demo-citation-loading::before { content: '◌'; color: #cbd5e1; font-size: 22px; animation: demo-spin 1s linear infinite; }.demo-citation-loading.is-done { opacity: .45; }.demo-quote { margin: 0 17px 18px; padding: 12px; color: #e2e8f0; background: rgba(148,163,184,.08); border-left: 3px solid #94a3b8; font-size: 10px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: .45s ease; }.demo-quote.is-visible { opacity: 1; transform: translateY(0); }.demo-web-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 100px; color: #c4b5fd; font-size: 10px; }.demo-spinner { width: 15px; height: 15px; border: 2px solid rgba(196,181,253,.25); border-top-color: #c4b5fd; border-radius: 50%; animation: demo-spin .8s linear infinite; }.demo-web-loading.is-done { opacity: .35; }.demo-web-card { display: flex; gap: 10px; margin: 0 17px 17px; padding: 9px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.35); border-radius: 9px; opacity: 0; transform: translateY(7px); transition: .45s ease; }.demo-web-card.is-visible { opacity: 1; transform: translateY(0); }.demo-web-image { width: 72px; display: grid; place-items: center; color: #ddd6fe; background: linear-gradient(145deg, #312e81, #7c3aed); border-radius: 6px; font-size: 9px; }.demo-web-copy { align-self: center; color: #ede9fe; font-size: 10px; line-height: 1.4; }.demo-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 20px 17px; }.demo-gallery-image { min-height: 115px; display: grid; place-items: center; color: #fdf2f8; background: linear-gradient(145deg, var(--image-color), #0f172a); border-radius: 8px; font-size: 9px; opacity: 0; transform: scale(.88); animation: demo-image-in .5s var(--image-delay) ease forwards; }.demo-summary-status { min-height: 110px; flex-direction: column; color: #d8b4fe; }.demo-summary-icon { color: #86efac; font-size: 30px; animation: demo-bounce .7s ease-in-out infinite; }.demo-summary-status.is-done .demo-summary-icon { animation: none; opacity: .45; }.demo-summary-result { margin: 0 17px 18px; padding: 12px; color: #f3e8ff; background: linear-gradient(90deg, rgba(16,185,129,.1), rgba(168,85,247,.14)); border-radius: 8px; opacity: 0; transform: translateY(6px); transition: .45s ease; font-size: 10px; line-height: 1.5; }.demo-summary-result.is-visible { opacity: 1; transform: translateY(0); }
@keyframes demo-field-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }@keyframes demo-image-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }@keyframes demo-swatch-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }@keyframes demo-spin { to { transform: rotate(360deg); } }@keyframes demo-bounce { 50% { transform: translateY(-6px) scale(1.05); } }

@media (max-width: 820px) {
    .manual-overlay { padding: 8px; }.manual-shell { height: calc(100dvh - 16px); border-radius: 17px; }.manual-header { padding: 16px; }.manual-layout { grid-template-columns: 1fr; }.manual-sidebar { display: flex; gap: 5px; overflow-x: auto; padding: 9px; border-right: 0; border-bottom: 1px solid rgba(148,163,184,.1); }.manual-sidebar .manual-nav-label { display: none; }.manual-category-button { width: auto; flex: 0 0 auto; margin: 0; padding: 9px 10px; }.manual-category-button span { white-space: nowrap; }.manual-panel { padding: 18px 14px; }.manual-panel-heading h3 { font-size: 19px; }.manual-tool-layout { grid-template-columns: 1fr; }.manual-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.manual-tool-button { min-height: 47px; }.manual-tool-detail { padding: 12px; }.manual-guide-grid, .manual-personalizacao-layout { grid-template-columns: 1fr; }.manual-guide-card { min-height: 0; }.manual-palette-preview { min-height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
    .manual-panel, .manual-category-button, .manual-tool-button, .manual-close, .demo-frame, .demo-task, .demo-quote, .demo-web-card, .demo-summary-result { animation: none !important; transition: none !important; }.manual-search-demo *, .manual-palette-star, .demo-spinner, .demo-summary-icon { animation: none !important; }
}

/* Réplicas dos cabeçalhos reais das caixas */
.demo-control,
.demo-static-control {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 9px;
    line-height: 1;
}
.demo-control {
    padding: 0;
    color: #cbd5e1;
    background: transparent;
    border: 0;
    cursor: default;
}
.demo-control:hover,
.demo-control:focus-visible { color: #fff; }
.demo-control--add { color: #34d399; }
.demo-control--danger { color: #f87171; }
.demo-control-separator {
    width: 1px;
    height: 14px;
    margin: 0 2px;
    background: rgba(148, 163, 184, .3);
}
.demo-static-control { color: #d8b4fe; }
.demo-inline-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.demo-inline-actions .demo-control { width: 16px; height: 16px; font-size: 8px; }

/* Elevador: pai, filho e ligações hierárquicas */
.demo-elevator-section {
    margin: 14px 17px 18px;
    overflow: hidden;
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 9px;
}
.demo-elevator-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    color: #fecaca;
    background: rgba(239, 68, 68, .12);
}
.demo-drag-handle { color: #fca5a5; font-size: 10px; letter-spacing: -3px; opacity: .72; }
.demo-elevator-parent-title,
.demo-elevator-child-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.demo-elevator-child {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(248, 113, 113, .15);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
}
.demo-elevator-child.is-visible { opacity: 1; transform: translateY(0); }
.demo-elevator-link-list {
    display: grid;
    gap: 6px;
    padding: 8px 12px 12px 28px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .45s ease;
}
.demo-elevator-link-list.is-visible { opacity: 1; transform: translateY(0); }
.demo-elevator-link-row {
    display: grid;
    grid-template-columns: 12px 14px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 6px 7px;
    color: #fecaca;
    background: rgba(239, 68, 68, .07);
    border-radius: 6px;
    animation: demo-field-in .5s var(--link-delay, 0ms) ease both;
}
.demo-elevator-link-icon { color: #fca5a5; font-size: 11px; }
.demo-elevator-link-label { overflow: hidden; text-overflow: ellipsis; font-size: 9px; font-weight: 800; }
.demo-elevator-link-url { grid-column: 3; overflow: hidden; color: #94a3b8; text-overflow: ellipsis; font-size: 8px; }

/* Bairro de Tarefas: grupo, tipo de marcação, conclusão e filtro */
.demo-task-group {
    opacity: .4;
    transform: translateY(7px);
    transition: opacity .45s ease, transform .45s ease;
}
.demo-task-group.is-built { opacity: 1; transform: translateY(0); }
.demo-task-group-header { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.demo-group-icon { color: #e9d5ff; font-size: 13px; }
.demo-group-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-check-picker {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 8px;
    color: #c4b5fd;
    font-size: 8px;
}
.demo-check-label { margin-right: 2px; color: #a78bfa; font-weight: 800; }
.demo-check-option {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #c4b5fd;
    border: 1px solid rgba(196, 181, 253, .28);
    border-radius: 5px;
    font-size: 8px;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.demo-check-option.is-selected {
    color: #fff;
    background: rgba(192, 132, 252, .28);
    border-color: #d8b4fe;
    transform: scale(1.08);
}
.demo-task {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height .45s ease, opacity .45s ease, transform .45s ease, margin .45s ease, padding .45s ease;
}
.demo-task.is-visible { max-height: 50px; margin-top: 5px; padding-top: 8px; padding-bottom: 8px; opacity: 1; transform: translateY(0); }
.demo-task.is-complete { color: #86efac; background: rgba(34, 197, 94, .1); text-decoration: line-through; }
.demo-task.is-hidden { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(12px); }

/* Firmamento: superfície, paleta e destaque sem título */
.demo-frame--firmamento {
    background: var(--firmamento-surface, #111827);
    transition: background .8s ease, border-color .35s ease;
}
.demo-firmamento-palette { align-items: center; }
.demo-swatch {
    cursor: default;
    transition: box-shadow .3s ease, transform .3s ease;
}
.demo-swatch.is-selected { box-shadow: 0 0 0 2px #f8fafc, 0 0 12px var(--swatch); transform: scale(1.1); }
.demo-firmamento-content {
    position: relative;
    margin-top: 14px;
    padding: 19px 11px;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 8px);
    border-radius: 8px;
    transform: translateY(4px);
    opacity: .72;
    transition: background-color .65s ease, opacity .65s ease, transform .65s ease;
}
.demo-firmamento-content.is-written { background-color: rgba(29, 78, 216, .18); opacity: 1; transform: translateY(0); }
.demo-firmamento-highlight {
    padding: 1px 4px;
    color: #fef3c7;
    background: rgba(212, 175, 55, .25);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .4s ease, box-shadow .4s ease;
}
.demo-firmamento-highlight.is-visible { opacity: 1; box-shadow: 0 0 12px rgba(212, 175, 55, .26); }

@media (prefers-reduced-motion: reduce) {
    .demo-elevator-child,
    .demo-elevator-link-list,
    .demo-task-group,
    .demo-task,
    .demo-firmamento-content,
    .demo-swatch,
    .demo-firmamento-highlight { animation: none !important; transition: none !important; }
}
/* Fluxos fiéis de WebCard e Citação Bíblica */
.demo-web-empty,
.demo-citation-empty {
    margin: 24px 17px;
    color: #c4b5fd;
    font-size: 10px;
    font-style: italic;
    text-align: center;
    opacity: 1;
    transition: opacity .35s ease, transform .35s ease;
}
.demo-web-empty.is-dimmed,
.demo-citation-empty.is-dimmed { opacity: .18; transform: translateY(-3px); }
.demo-web-empty.is-hidden,
.demo-citation-empty.is-hidden { display: none; }

.demo-web-config,
.demo-bible-selector {
    width: calc(100% - 34px);
    margin: 10px 17px;
    overflow: hidden;
    background: rgba(15, 23, 42, .92);
    border: 1px solid color-mix(in srgb, var(--demo-color) 42%, transparent);
    border-radius: 9px;
    opacity: 0;
    max-height: 0;
    transform: translateY(7px) scale(.98);
    transition: opacity .4s ease, max-height .45s ease, transform .4s ease;
}
.demo-web-config.is-visible,
.demo-bible-selector.is-visible { max-height: 220px; opacity: 1; transform: translateY(0) scale(1); }
.demo-web-config-header,
.demo-bible-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: #ddd6fe;
    background: rgba(139, 92, 246, .16);
    font-size: 9px;
}
.demo-web-config-header span { color: #a78bfa; font-size: 8px; }
.demo-web-config p { margin: 7px 10px; color: #94a3b8; font-size: 8px; }
.demo-web-url-list { display: grid; gap: 4px; padding: 0 10px; }
.demo-web-url-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 18px;
    padding: 3px 6px;
    color: #cbd5e1;
    background: rgba(2, 6, 23, .72);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 4px;
    font: inherit;
    font-size: 8px;
}
.demo-web-url-input::placeholder { color: #64748b; }
.demo-web-config-actions { display: flex; justify-content: flex-end; padding: 7px 10px 9px; }
.demo-web-config-button,
.demo-bible-confirm {
    padding: 5px 9px;
    color: #fff;
    background: #8b5cf6;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
}
.demo-web-resolving,
.demo-web-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: calc(100% - 34px);
    margin: 16px 17px;
    opacity: 0;
    max-height: 0;
    transform: translateY(7px);
    transition: opacity .45s ease, max-height .45s ease, transform .45s ease;
}
.demo-web-resolving.is-visible,
.demo-web-result-grid.is-visible { max-height: 150px; opacity: 1; transform: translateY(0); }
.demo-web-skeleton {
    min-height: 92px;
    display: grid;
    place-items: center;
    color: #a78bfa;
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(139, 92, 246, .32);
    border-radius: 8px;
    font-size: 8px;
}
.demo-web-skeleton::before {
    content: '';
    width: 14px;
    height: 14px;
    margin-bottom: -25px;
    border: 2px solid rgba(196, 181, 253, .25);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: demo-spin .8s linear infinite;
}
.demo-web-result-card {
    overflow: hidden;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(7px);
    animation: demo-field-in .5s var(--result-delay, 0ms) ease both;
}
.demo-web-result-card:nth-child(2) { --result-delay: 160ms; }
.demo-web-result-image {
    min-height: 58px;
    display: grid;
    place-items: center;
    color: #ddd6fe;
    background: linear-gradient(145deg, var(--card-image), #0f172a);
    font-size: 8px;
}
.demo-web-result-copy { display: grid; gap: 3px; padding: 7px; }
.demo-web-result-title { overflow: hidden; color: #f8fafc; text-overflow: ellipsis; font-size: 9px; line-height: 1.3; }
.demo-web-result-site { overflow: hidden; color: #a78bfa; font-size: 8px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; }

.demo-bible-selector { border-color: rgba(148, 163, 184, .42); }
.demo-bible-selector-header { background: rgba(148, 163, 184, .16); color: #e2e8f0; }
.demo-bible-close { color: #cbd5e1; font-size: 14px; line-height: 10px; }
.demo-bible-navigation { padding: 6px 10px; color: #94a3b8; background: rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(148, 163, 184, .12); font-size: 8px; }
.demo-bible-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 9px 10px 6px; }
.demo-bible-choice {
    min-height: 23px;
    display: grid;
    place-items: center;
    color: #e2e8f0;
    background: rgba(148, 163, 184, .1);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 4px;
    font-size: 8px;
}
.demo-bible-choice.is-selected { color: #fff; background: rgba(99, 102, 241, .42); border-color: #a5b4fc; box-shadow: 0 0 8px rgba(129, 140, 248, .3); }
.demo-bible-manual { padding: 5px 10px 7px; border-top: 1px solid rgba(148, 163, 184, .1); }
.demo-bible-manual label { display: block; margin-bottom: 4px; color: #cbd5e1; font-size: 8px; font-weight: 700; }
.demo-bible-reference { width: 100%; box-sizing: border-box; padding: 4px 6px; color: #e2e8f0; background: rgba(2, 6, 23, .6); border: 1px solid rgba(148, 163, 184, .18); border-radius: 4px; font: inherit; font-size: 8px; }
.demo-bible-manual small { display: block; margin-top: 3px; color: #64748b; font-size: 7px; }
.demo-bible-selector-footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 10px; border-top: 1px solid rgba(148, 163, 184, .12); }
.demo-bible-count { color: #a5b4fc; font-size: 8px; }
.demo-bible-confirm { background: #6366f1; }
.demo-citation-attached {
    display: grid;
    gap: 6px;
    margin: 17px;
    padding: 11px 12px;
    color: #f1f5f9;
    background: rgba(148, 163, 184, .08);
    border-left: 3px solid #94a3b8;
    opacity: 0;
    max-height: 0;
    transform: translateY(7px);
    transition: opacity .45s ease, max-height .45s ease, transform .45s ease;
}
.demo-citation-attached.is-visible { max-height: 90px; opacity: 1; transform: translateY(0); }
.demo-citation-reference { color: #cbd5e1; font-size: 9px; text-transform: uppercase; }
.demo-citation-text { color: #e2e8f0; font-size: 10px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
    .demo-web-empty,
    .demo-citation-empty,
    .demo-web-config,
    .demo-bible-selector,
    .demo-web-resolving,
    .demo-web-result-grid,
    .demo-citation-attached,
    .demo-web-result-card { animation: none !important; transition: none !important; }
    .demo-web-skeleton::before { animation: none !important; }
}
/* Popup de inserção e animação de duplicação do Manual */
.demo-control--interactive {
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, color .2s ease;
}
.demo-control--interactive:hover,
.demo-control--interactive:focus-visible {
    color: #a7f3d0;
    filter: drop-shadow(0 0 5px rgba(52, 211, 153, .75));
}
.demo-control--interactive.is-pressed { animation: demo-plus-press .48s ease; }
.demo-duplicate-stage {
    position: relative;
    width: min(100%, 430px);
    display: grid;
    gap: 10px;
    align-content: start;
}
.demo-duplicate-stage > .demo-frame { width: 100%; }
.demo-frame.is-duplicate-source {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .32), 0 15px 30px rgba(0, 0, 0, .22);
}
.demo-tool-picker {
    position: absolute;
    z-index: 5;
    top: 8px;
    left: 50%;
    width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 13px;
    color: #e2e8f0;
    background: #111827;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 13px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, .52), 0 0 0 1px rgba(99, 102, 241, .08);
    opacity: 0;
    transform: translate(-50%, -8px) scale(.96);
    transition: opacity .28s ease, transform .28s ease;
}
.demo-tool-picker.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.demo-tool-picker.is-closing { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
.demo-tool-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.demo-tool-picker-header strong { color: #f8fafc; font-size: 11px; }
.demo-tool-picker-close {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: rgba(255, 255, 255, .06);
    border-radius: 7px;
    font-size: 10px;
}
.demo-tool-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.demo-tool-picker-item {
    position: relative;
    min-width: 0;
    min-height: 53px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 3px;
    color: #94a3b8;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 8px;
    font: inherit;
    font-size: 8px;
    text-align: center;
}
.demo-tool-picker-item i { color: var(--tool-color); font-size: 14px; }
.demo-tool-picker-item span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.demo-tool-picker-item.is-selected {
    color: #f8fafc;
    background: color-mix(in srgb, var(--tool-color) 17%, transparent);
    border-color: color-mix(in srgb, var(--tool-color) 65%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tool-color) 22%, transparent);
}
.demo-tool-picker-item.is-selecting { animation: demo-tool-picker-select .58s ease; }
.demo-tool-picker-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    display: grid;
    place-items: center;
    color: #052e16;
    background: #86efac;
    border-radius: 50%;
    font-size: 8px;
    opacity: 0;
    transform: scale(.5);
}
.demo-tool-picker-item.is-selected .demo-tool-picker-check {
    opacity: 1;
    transform: scale(1);
    transition: opacity .22s ease, transform .22s ease;
}
.demo-frame.demo-duplicate-copy {
    opacity: 0;
    transform: translateY(12px) scale(.97);
    animation: demo-duplicate-in .65s ease forwards;
}
@keyframes demo-plus-press { 35% { transform: scale(1.45) rotate(8deg); } 70% { transform: scale(.88); } }
@keyframes demo-tool-picker-select { 35% { transform: scale(1.04); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-color) 25%, transparent); } 70% { transform: scale(.98); } }
@keyframes demo-duplicate-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
    .demo-tool-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .demo-control--interactive,
    .demo-tool-picker,
    .demo-tool-picker-item,
    .demo-frame.demo-duplicate-copy {
        animation: none !important;
        transition: none !important;
    }
    .demo-tool-picker.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
    .demo-frame.demo-duplicate-copy { opacity: 1; transform: none; }
}