/* Interface da série Eféquitis. Cópia idêntica em Eféquitis, Glitchê, Rétro e Tequisti; valores do DS Coere.
   Contrato e regras de sincronização: ../SERIE-EFEQUITIS.md. */
body.family {
  --family-panel: #FFFFFF; --family-soft: #F0F0F0; --family-ink: #141E19;
  --family-muted: #46554D; --family-line: #D8D9D6; --family-hover: #E6EEE9;
  --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg);
  font-family: var(--font-sans); background: var(--family-soft); color: var(--family-ink);
}
body.family[data-theme="dark"] {
  --family-panel: #141E19; --family-soft: #0D1F17; --family-ink: #F0F0F0;
  --family-muted: #B4C0B9; --family-line: #2C3A33; --family-hover: #1E372D;
  --text-2: var(--family-muted); --text-3: var(--family-muted);
}
.family .app-shell { min-width: 0; min-height: 0; height: 100dvh; }
.family .topbar { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--family-panel); border-color: var(--family-line); }
.family .brand { width: max-content; max-width: 100%; gap: var(--sp-3); }
.family .brand-mark { width: 48px; height: 36px; border: 0; border-radius: 0; background: none; }
.family .brand-mark img { width: 36px; height: auto; filter: none; }
.family .brand-copy { display: flex; align-items: baseline; gap: var(--sp-4); }
.family .brand-copy h1 { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.16; letter-spacing: -.02em; white-space: nowrap; }
.family .brand-copy p { margin: 0; color: var(--family-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.family .top-actions { width: 100%; min-width: 0; display: flex; gap: var(--sp-2); }
.family .top-actions > .button { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 var(--sp-3); white-space: nowrap; font-size: 12px; }
.family .button, .family .tool-button, .family .icon-button, .family .text-button { background: var(--family-panel); color: var(--family-ink); border-color: var(--family-line); border-radius: var(--r-pill); font-weight: 600; transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), transform 220ms var(--ease-out); }
.family .button:hover:not(:disabled), .family .tool-button:hover:not(:disabled), .family .icon-button:hover:not(:disabled) { background: var(--family-hover); border-color: var(--moss-400); color: var(--family-ink); }
.family .button--primary, .family .button--primary:hover:not(:disabled) { background: var(--golden-yellow); border-color: var(--golden-yellow); color: #141E19; }
.family .ui-icon { font-size: 0 !important; place-content: center; }
.family .ui-icon::before { font-family: Phosphor; font-size: 18px; line-height: 1; }
.family #openButton .ui-icon::before { content: '\e24a'; }
.family .workspace { min-width: 0; gap: var(--sp-3); padding: var(--sp-3); grid-template-columns: 256px minmax(0, 1fr) 304px; }
.family .panel { background: var(--family-panel); border: 1px solid var(--family-line); border-radius: var(--r-lg); scrollbar-width: thin; scrollbar-color: var(--family-line) transparent; }
.family .panel-section { padding: var(--sp-4); }
.family .panel-section + .panel-section { border-color: var(--family-line); }
.family .section-heading { min-height: 24px; margin-bottom: var(--sp-3); }
.family .section-heading h2, .family .section-heading h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.family .section-heading span { font-size: 12px; color: var(--family-muted); }
.family .category-title, .family .category-toggle { color: var(--family-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.family .category-toggle { min-height: 34px; }
.family .effect-category { gap: var(--sp-2); border-color: var(--family-line); }
.family .effect-list { display: grid; gap: var(--sp-2); }
.family .effect-item, .family .preset-card { width: 100%; min-height: 64px; border: 1px solid var(--family-line); border-radius: var(--r-md); padding: var(--sp-2); background: var(--family-panel); color: var(--family-ink); }
.family .effect-item { display: flex; align-items: center; gap: var(--sp-3); }
.family .effect-entry .effect-item { padding-right: 34px; }
.family .effect-item:hover:not(:disabled), .family .preset-card:hover { border-color: var(--moss-400); background: var(--family-hover); }
.family .effect-item[data-active="true"] { background: var(--family-hover); border-color: var(--moss-400); color: var(--family-ink); }
.family .effect-item .effect-icon { flex: 0 0 56px; width: 56px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); font-size: 18px; }
.family .effect-item .effect-preview { flex: 0 0 56px; width: 56px; height: 36px; border-radius: var(--r-sm); align-self: center; }
.family .effect-item .effect-icon { background: var(--moss-green); color: #F0F0F0; }
.family .effect-copy strong { font-size: 14px; font-weight: 600; white-space: normal; line-height: 1.25; }
.family .effect-copy small, .family .effect-item[data-active="true"] .effect-copy small, .family .preset-card small { color: var(--family-muted); font-size: 12px; line-height: 1.4; }
.family .effect-compat { display: none; }
.family .effect-badge { margin: 4px 4px 0 0; font-size: 8px; background: var(--family-hover); color: var(--family-muted); }
.family .effect-search, .family .search-wrap { height: 50px; min-height: 50px; border: 1px solid var(--family-line); border-radius: var(--r-md); background: var(--family-soft); color: var(--family-ink); margin-bottom: var(--sp-4); }
.family .search-wrap input { color: var(--family-ink); font-size: 14px; background: transparent; }
.family .search-wrap { padding-inline: var(--sp-3); }
.family .editor { border: 1px solid var(--family-line); border-radius: var(--r-lg); overflow: hidden; background: var(--family-soft); grid-template-rows: auto minmax(0, 1fr); }
.family .editor-toolbar { min-height: 58px; padding: var(--sp-2) var(--sp-3); background: var(--family-panel); border-color: var(--family-line); }
.family .image-meta strong, .family .media-info strong { font-size: 12px; color: var(--family-ink); }
.family .image-meta span, .family .media-info span { color: var(--family-muted); }
.family .canvas-area, .family .stage-wrap { background: var(--family-soft); }
/* Estado vazio: mesma superfície do cartão, área pontilhada discreta, cor só na interação. */
.family:not(.has-media) :is(.stage-wrap,.canvas-area) { background: var(--family-panel); }
.family:not(.has-media) :is(.editor-actions,.canvas-tools) { visibility: hidden; }
.family .dropzone, body.family[data-theme="dark"] .dropzone { position: absolute; inset: var(--sp-4); width: auto; height: auto; min-height: 0; max-width: none; display: grid; align-content: center; justify-items: center; gap: var(--sp-3); border: 1.5px dashed var(--family-line); border-radius: var(--r-lg); padding: var(--sp-5); background: transparent; color: var(--family-ink); box-shadow: none; transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.family .dropzone:hover, .family .dropzone[data-dragging="true"], body.family[data-theme="dark"] .dropzone:hover, body.family[data-theme="dark"] .dropzone[data-dragging="true"] { background: var(--family-hover); border-color: var(--moss-400); transform: none; }
.family .dropzone .drop-icon { width: 64px; height: 64px; margin: 0 0 var(--sp-1); border: 0; border-radius: 50%; background: var(--family-hover); color: var(--moss-green); font-size: 28px; transition: background 220ms var(--ease-out), color 220ms var(--ease-out); }
body.family[data-theme="dark"] .dropzone .drop-icon { color: #F0F0F0; }
body.family[data-theme="dark"] .editor-toolbar { background: var(--family-panel); }
.family .dropzone:hover .drop-icon, .family .dropzone[data-dragging="true"] .drop-icon { background: var(--moss-green); color: #F0F0F0; }
.family .dropzone h2, .family .dropzone > strong { margin: 0; color: var(--family-ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; text-align: center; }
.family .dropzone .format-list, .family .dropzone small { margin: 0; max-width: 34ch; color: var(--family-muted); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; text-transform: none; text-align: center; }
.family .empty-panel, .family .empty-parameters, .family .empty-layer-state { min-height: 128px; display: grid; align-content: center; justify-items: center; gap: var(--sp-2); padding: var(--sp-4); margin: 0; border: 1.5px dashed var(--family-line); border-radius: var(--r-md); background: transparent; color: var(--family-muted); font-size: 12px; text-align: center; }
.family .empty-panel p, .family .empty-parameters p { margin: 0; max-width: 26ch; font-size: 12px; }
.family .empty-panel i, .family .empty-parameters > i { font-size: 24px; }
.family .layer-row, .family .layer-item, .family .stack-item { border: 1px solid var(--family-line); border-radius: var(--r-md); background: var(--family-panel); padding: var(--sp-3); color: var(--family-ink); }
.family .layer-row[data-selected="true"], .family .layer-item[data-selected="true"], .family .stack-item[data-selected="true"] { border-color: var(--moss-400); background: var(--family-hover); color: var(--family-ink); box-shadow: inset 3px 0 0 var(--moss-green); }
.family .layer-row[data-selected="true"] :is(.layer-copy small,.layer-icon,.layer-status,.layer-action), .family :is(.stack-select,.layer-select) small { color: var(--family-muted); }
.family :is(.layer-copy,.stack-select,.layer-select) strong { font-size: 14px; font-weight: 600; }
.family :is(.stack-opacity,.layer-opacity,.stack-blend,.layer-blend) { font-size: 12px; color: var(--family-muted); }
.family .stack-tools button, .family .layer-tools button { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; color: var(--family-muted); }
.family :is(.stack-tools,.layer-tools) button i { font-size: 16px; line-height: 1; }
.family :is(.stack-tools,.layer-tools) button:hover { background: var(--family-hover); color: var(--family-ink); }
.family :is(.stack-tools,.layer-tools) button[aria-pressed="false"] { color: var(--family-muted); opacity: .7; }
.family :is(.stack-item,.layer-item)[data-visible="false"] :is(.stack-select,.layer-select) { opacity: .5; }
.family .parameters-form { gap: var(--sp-4); }
.family .effect-heading h3, .family .parameters-panel h4 { font-size: 24px; font-weight: 600; color: var(--family-ink); }
.family .effect-heading p, .family .effect-description { color: var(--family-muted); font-size: 14px; line-height: 1.5; }
.family .parameter-heading, .family .parameter-heading label { color: var(--family-muted); font-size: 13px; }
.family .keyframe-timeline, .family .video-controls { background: var(--family-panel); color: var(--family-ink); border-color: var(--family-line); }
.family .privacy-footer, .family .statusbar { height: 32px; min-height: 32px; padding: 0 var(--sp-5); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--family-soft); border: 0; color: var(--family-muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.family .statusbar > span:not(:first-child) { display: none; }
.family dialog { border: 1px solid var(--family-line); border-radius: var(--r-lg); background: var(--family-panel); color: var(--family-ink); box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); }
.family dialog::backdrop { background: rgba(8,23,17,.65); backdrop-filter: blur(4px); }
.family dialog :is(.shortcuts-card,form) { background: var(--family-panel); color: var(--family-ink); }
.family button:focus-visible, .family input:focus-visible, .family summary:focus-visible { outline: 3px solid var(--golden-yellow); outline-offset: 2px; }
/* O clique sempre chega ao botão, mesmo quando o ícone interno é redesenhado durante a reprodução. */
.family button * { pointer-events: none; }
/* Ícone e texto nunca colados: todo botão de ferramenta alinha e separa o conteúdo. */
.family .tool-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.family .tool-button > :is(i, .ph, [aria-hidden="true"]) { flex: none; line-height: 1; }
.family .family-more { display: none; }
.family .family-select { width: 100%; min-width: 0; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border: 1px solid var(--family-line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--family-soft); color: var(--family-ink); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.family .family-options { position: fixed; z-index: 100; margin: 0; padding: var(--sp-2); max-height: 256px; overflow: auto; border: 1px solid var(--family-line); border-radius: var(--r-md); background: var(--family-panel); box-shadow: var(--shadow-lg); color: var(--family-ink); }
.family .family-options button { width: 100%; min-height: 34px; display: block; border: 0; border-radius: var(--r-sm); background: transparent; padding: var(--sp-2); color: inherit; text-align: left; cursor: pointer; }
.family .family-options button[aria-selected="true"], .family .family-options button:hover { background: var(--family-hover); }
.family .family-options-group { padding: var(--sp-3) var(--sp-2) var(--sp-1); color: var(--family-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.family .family-options-group:first-child { padding-top: var(--sp-1); }
.family .family-options button[data-preview="font"] { min-height: 38px; font-size: 16px; line-height: 1.2; }
.family .family-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(min-width:821px) and (max-width:1100px) {
 .family .topbar { display: flex; gap: var(--sp-4); padding: var(--sp-3); }
 .family .brand-copy { display: grid; gap: var(--sp-1); }
 .family .brand-copy h1 { font-size: 20px; }
 .family .brand-copy p { display: none; }
 .family .top-actions { width: auto; margin-left: auto; }
 .family .top-actions > .button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex: none; padding: 0; }
 .family .top-actions .button-label { display: none; }
 .family .workspace { grid-template-columns: 224px minmax(0,1fr) 256px; gap: var(--sp-2); padding: var(--sp-2); }
}
@media(max-width:820px) {
 .family .topbar { display: flex; height: var(--mobile-topbar); min-height: var(--mobile-topbar); padding: var(--sp-2); gap: var(--sp-2); }
 .family .brand { gap: var(--sp-1); }
 .family .brand-mark { width: 28px; height: 32px; }
 .family .brand-mark img { width: 24px; }
 .family .brand-copy h1 { max-width: none; font-size: 14px; overflow: visible; }
 .family .brand-copy p { display: none; }
 .family .top-actions { width: auto; margin-left: auto; gap: 4px; }
 .family .top-actions > .button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; flex: none; }
 .family .family-more { display: grid; place-items: center; order: 3; }
 .family .workspace { display: block; padding: 0; }
 .family .editor { border: 0; border-radius: 0; grid-template-rows: var(--mobile-toolbar) minmax(0,1fr); }
 .family .editor-toolbar { min-height: var(--mobile-toolbar); padding: 4px 8px; }
 .family .panel { border-radius: var(--r-lg) var(--r-lg) 0 0; }
 .family .dropzone { inset: var(--sp-2); padding: var(--sp-4); gap: var(--sp-3); }
 .family .dropzone h2, .family .dropzone > strong { font-size: 17px; }
 .family .dropzone .drop-icon { width: 52px; height: 52px; margin: 0; font-size: 24px; }
 .family .dropzone small, .family .dropzone .format-list { font-size: 12px; }
 .family .panel--left, .family .panel-section--layers, .family .panel-section--parameters, .family .layers-section, .family .stack-section, .family .parameters-section, .family .keyframes-section, .family .mobile-time-panel { background: var(--family-panel); color: var(--family-ink); }
 .family .panel-section .section-heading { background: var(--family-panel); }
 .family .panel--left > .panel-section { padding: 16px 12px 8px; }
 .family .effect-search, .family .search-wrap { height: 34px; min-height: 34px; margin-bottom: 8px; }
 .family .panel--left { overflow-y: auto; }
 .family .panel--left .library-section { height: auto; display: block; }
 .family .effect-library { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 0 0 6px; scrollbar-width: thin; }
 .family .effect-category { flex: none; display: grid; grid-template-rows: auto auto; gap: 6px; }
 .family .effect-category + .effect-category { border-top: 0; padding-top: 0; border-left: 1px solid var(--family-line); padding-left: 14px; }
 .family .panel--left .library-section > .section-heading { display: none; }
 .family .family-presets { margin-bottom: var(--sp-2); padding-block: 2px; }
 .family .effect-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 96px; gap: 8px 10px; }
 .family .effect-item, .family .effect-entry .effect-item { width: 96px; min-height: 0; flex-direction: column; align-items: stretch; gap: 4px; border: 0; padding: 0; background: transparent; scroll-snap-align: start; }
 .family .effect-item:hover:not(:disabled), .family .effect-item[data-active="true"] { background: transparent; }
 .family .effect-item .effect-preview { flex: none; width: 96px; height: 50px; border: 2px solid transparent; border-radius: var(--r-md); }
 .family .effect-item[data-active="true"] .effect-preview { border-color: var(--golden-yellow); }
 .family .effect-item .effect-copy { display: block; min-width: 0; padding: 0 2px; }
 .family .effect-item .effect-copy strong { display: block; overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
 .family .effect-item .effect-copy small { display: none; }
 .family .effect-item .effect-icon { flex: none; width: 96px; height: 50px; border: 2px solid transparent; border-radius: var(--r-md); font-size: 20px; }
 .family .effect-list > .effect-entry { width: 96px; position: relative; }
 .family .effect-entry .favorite-button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; transform: none; border-radius: 999px; background: rgba(20,30,25,.55); color: #F0F0F0; }
 .family .effect-badge { display: none; }
 .family .preset-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .family .mobile-nav { background: var(--family-panel); border-color: var(--family-line); }
 .family .mobile-nav button { font-size: 12px; color: var(--family-muted); font-weight: 600; }
 .family .mobile-nav button[data-active="true"] { background: var(--family-hover); color: var(--family-ink); }
 .family .privacy-footer, .family .statusbar { display: none; }
 .family .family-overflow { position: absolute; top: calc(100% + 8px); right: 8px; width: 256px; padding: 8px; border: 1px solid var(--family-line); border-radius: var(--r-lg); background: var(--family-panel); box-shadow: var(--shadow-lg); }
 .family .family-overflow .button { display: flex !important; width: 100%; justify-content: flex-start; min-height: 44px; margin-bottom: 4px; padding: 8px 12px; }
 .family .family-overflow .button-label { display: inline !important; }
}
@media(prefers-reduced-motion:reduce) { .family *, .family *::before, .family *::after { animation: none !important; transition: none !important; } }

.family #openButton .ui-icon::before { content: "\e256"; }
.family #shortcutsButton .ui-icon::before { content: "\e2d8"; }
.family #themeButton .ui-icon::before { content: "\e330"; }
.family #surpriseButton .ui-icon::before { content: "\e422"; }
.family #presetButton .ui-icon::before { content: "\e6a2"; }
.family #presetsButton .ui-icon::before { content: "\e6a2"; }
.family #saveRecipeButton .ui-icon::before { content: "\e248"; }
.family #importRecipeButton .ui-icon::before { content: "\e4c0"; }
.family #batchButton .ui-icon::before { content: "\e466"; }
.family #exportButton .ui-icon::before { content: "\e20c"; }
.family[data-theme="dark"] #themeButton .ui-icon::before { content: "\e472"; }

.family .brand-mark img { content: url("assets/coere-simbolo.svg"); }
.family[data-theme="dark"] .brand-mark img { content: url("assets/coere-simbolo-nevoa.svg"); }
.family :is(.stack-section,.layers-section):has(.empty-layer-state) .random-actions { display: none; }
.family :is(.stack-section,.layers-section):has(.empty-layer-state) :is(.stack-actions,.layer-actions):not(:has(> #addLayerButton:not([hidden]))) { display: none; }
.family .empty-layer-state::before { font-family: Phosphor; font-size: 24px; content: "\e466"; }
.family .family-presets { border-block: 1px solid var(--family-line); padding-block: var(--sp-2); margin-bottom: var(--sp-4); }
.family .family-presets summary { cursor: pointer; min-height: 34px; display: flex; justify-content: space-between; align-items: center; color: var(--family-muted); font-size: 12px; list-style: none; }
.family .family-presets summary::after { content: '›'; font-size: 20px; }
.family .family-presets[open] summary::after { transform: rotate(90deg); }
.family .family-presets .preset-library { margin-top: var(--sp-2); }
.family .family-presets .preset-library:empty { display: none; }
.family .preset-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--family-muted); font-size: 12px; }
.family .preset-tools .text-button { margin-left: auto; }
.family .preset-card { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; gap: var(--sp-3); text-align: left; cursor: pointer; }
.family .preset-library { display: grid; gap: var(--sp-2); }
.family .preset-card .preset-visual { width: 62px; height: 40px; border-radius: var(--r-sm); }
.family .preset-visual.preset-visual--icon { display: grid; place-items: center; background: var(--moss-green); color: #F0F0F0; font-size: 18px; animation: none; }
.family span.preset-visual.preset-visual--icon::after { content: none; }
.family .preset-visual { position: relative; overflow: hidden; background: var(--preset, linear-gradient(135deg,#ebcd50,#325a41)); background-size: 160% 160%; animation: family-preset-shift 4s ease-in-out infinite alternate var(--delay,0s); }
.family span.preset-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 48%,transparent 72%); transform: translateX(-120%); animation: family-preset-light 3.6s ease-in-out infinite var(--delay,0s); }
@keyframes family-preset-shift { 0% { background-position: 0% 20%; } 50% { background-position: 100% 80%; } 100% { background-position: 10% 35%; } }
@keyframes family-preset-light { 0%,35% { transform: translateX(-120%); } 75%,100% { transform: translateX(120%); } }
.family .preset-card > span:last-child { min-width: 0; display: grid; gap: 2px; }
.family .user-presets { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.family .user-presets .category-title { margin: 0; }
.family .user-preset-list { display: grid; gap: var(--sp-2); }
.family .user-preset { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--sp-1); border: 1px solid var(--family-line); border-radius: var(--r-md); padding: 4px; background: var(--family-panel); }
.family .user-preset:hover { border-color: var(--moss-400); }
.family .user-preset-apply { min-width: 0; display: grid; gap: 2px; border: 0; border-radius: var(--r-sm); padding: 6px 8px; background: transparent; color: var(--family-ink); text-align: left; cursor: pointer; }
.family .user-preset-apply:hover { background: var(--family-hover); }
.family .user-preset-apply strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.family .user-preset-apply small { overflow: hidden; color: var(--family-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.family .user-preset-delete { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--family-muted); cursor: pointer; }
.family .user-preset-delete:hover { background: var(--family-hover); color: var(--family-ink); }
.family .preset-empty { margin: 0; color: var(--family-muted); font-size: 12px; line-height: 1.45; }
.family .preset-save { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-2); }
.family .preset-save input { min-width: 0; height: 34px; border: 1px solid var(--family-line); border-radius: var(--r-md); padding: 0 var(--sp-3); background: var(--family-soft); color: var(--family-ink); font: inherit; font-size: 12px; }
.family .preset-save .tool-button { min-height: 34px; font-size: 12px; }
.family .preset-card strong { font-size: 14px; font-weight: 600; }
.family .presets-section { padding: 0; border: 0; }
.family .dropzone .format-list, .family .dropzone small { max-width: 42ch; }
/* Ações de Camadas: "Limpar tudo" no cabeçalho; aleatorizar numa linha só, sem quebra de texto. */
.family .section-heading h2 > span { margin-left: var(--sp-1); font-weight: 500; }
.family .text-button--danger { color: #A54B36; }
body.family[data-theme="dark"] .text-button--danger { color: #E3917C; }
.family :is(.stack-actions,.layer-actions) { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.family :is(.stack-actions,.layer-actions) > .tool-button { grid-column: auto; }
.family .random-actions { display: grid; grid-template-columns: auto minmax(max-content,1fr) minmax(max-content,1fr); align-items: center; gap: var(--sp-2); }
.family .random-label { padding-right: var(--sp-1); color: var(--family-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.family :is(.stack-actions,.layer-actions) .tool-button { min-width: 0; min-height: 32px; padding: 0 10px; overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.family .empty-panel[hidden], .family .empty-parameters[hidden] { display: none !important; }

.family input[type="range"] { accent-color: var(--moss-green); }
.family input[type="checkbox"] { accent-color: var(--moss-green); }
.family input[type="range"]::-webkit-slider-thumb { background: var(--moss-green); }
.family .keyframe-timeline { left: 16px; right: 16px; bottom: 16px; width: auto; min-height: 50px; transform: none; grid-template-columns: auto auto minmax(48px,1fr) auto auto; gap: 8px; padding: 8px; border-radius: var(--r-lg); background: var(--family-panel); }
.family .keyframe-timeline[data-source="video"] { bottom: 126px; }
body.family[data-theme="dark"] .keyframe-timeline { background: var(--family-panel); color: var(--family-ink); }
/* Keyframe selecionado na barra: clique seleciona, Delete apaga. */
.family .timeline-markers > button { transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.family .timeline-markers > button[data-selected="true"] { background: var(--family-ink); box-shadow: 0 0 0 2px var(--golden-yellow); transform: translateX(-50%) rotate(45deg) scale(1.3); }
.family .keyframe-timeline > * { grid-column: auto; grid-row: 1; }
.family .keyframe-timeline .timeline-duration { gap: 4px; font-size: 10px; }
.family .keyframe-timeline .timeline-time { font-size: 10px; min-width: 70px; color: var(--family-muted); }
.family .keyframe-timeline .timeline-title { font-size: 10px; color: var(--family-muted); }
.family .keyframe-timeline .timeline-action { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; }
.family .original-button { bottom: 78px; }
.family.has-video-media .original-button { bottom: 188px; }
.family .layer-item, .family .stack-item { grid-template-columns: minmax(0,1fr); }
.family .layer-select, .family .stack-select { grid-column: 1; min-height: 28px; }
.family .layer-tools, .family .stack-tools { grid-column: 1; justify-content: flex-end; }
.family .layer-select strong, .family .stack-select strong { white-space: normal; overflow: visible; }
.family .stack-index { background: var(--moss-green); color: #F0F0F0; }
@media(min-width:821px) and (max-width:1100px) {
 .family .random-actions { gap: 6px; }
 .family .random-label { padding-right: 0; }
 .family .keyframe-timeline { grid-template-columns: auto minmax(48px,1fr) auto; }
 .family .keyframe-timeline .timeline-title, .family .keyframe-timeline .timeline-duration { display: none; }
}
@media(max-width:820px) {
 .family .keyframe-timeline, .family .canvas-view > .keyframe-timeline, .family .keyframe-timeline[data-source="video"], .family .canvas-view > .keyframe-timeline[data-source="video"] { left:8px; right:8px; bottom:8px; min-height:46px; width:auto; transform:none; grid-template-columns:auto minmax(48px,1fr) auto; background:var(--family-panel); }
 .family .keyframe-timeline .timeline-title, .family .keyframe-timeline .timeline-duration { display:none; }
 .family .keyframe-timeline .timeline-actions { grid-column:1; }
 .family .keyframe-timeline .timeline-track { grid-column:2; }
 .family .keyframe-timeline .timeline-time { grid-column:3; font-size:9px; }
 .family .original-button, .family.has-image-media .original-button, .family.has-video-media .original-button { bottom:62px; }
 .family .mobile-nav i { font-size:20px; }
}

/* Botão só de ícone é sempre um círculo: largura igual à altura e raio total, também no estado de passar o mouse. */
.family #removeButton, .family #fitButton:not(:has(> span:not([hidden]))), .family .user-preset-delete, .family :is(.stack-tools,.layer-tools) button { aspect-ratio: 1; padding: 0; border-radius: 50%; }
.family .user-preset-delete { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.family :is(.stack-tools,.layer-tools) button { width: 28px; height: 28px; }
@media(min-width:821px) { .family #removeButton { width: 38px; min-width: 38px; height: 38px; min-height: 38px; } }
@media(max-width:820px) { .family :is(#removeButton,#fitButton) { width: 32px; min-width: 32px; height: 32px; min-height: 32px; aspect-ratio: 1; padding: 0; border-radius: 50%; } }