/* Componentes adicionados durante a evolução do editor. */
/* =================================================== */
/* ETAPA 22: DESEMPENHO, PROXIES E AJUDA CONTEXTUAL    */
/* =================================================== */
.track.has-preview-proxy { box-shadow: inset 0 0 0 1px rgba(34,211,238,.78); }
.proxy-manager-list { display:flex; flex-direction:column; gap:9px; min-height:0; overflow-y:auto; padding-right:2px; }
.proxy-media-card { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; padding:10px; border:1px solid var(--separator); border-radius:.75rem; background:rgba(2,6,23,.18); }
.proxy-media-thumb { width:54px; height:54px; border-radius:.58rem; background:var(--metalayer) center/cover no-repeat; display:grid; place-items:center; color:#67e8f9; }
.proxy-media-copy { min-width:0; }
.proxy-media-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-light); font-size:12px; }
.proxy-media-copy small { display:block; margin-top:3px; color:var(--text-muted); font-size:10px; }
.proxy-media-actions { display:flex; gap:6px; overflow-x:auto; margin-top:8px; padding-bottom:2px; scrollbar-width:thin; }
.proxy-media-actions button { flex:0 0 auto; min-height:34px; padding:6px 9px; border:1px solid var(--separator); border-radius:.55rem; background:var(--btn); color:var(--text-light); font-size:10px; font-weight:750; display:inline-flex; align-items:center; gap:5px; }
.proxy-media-actions button.active { border-color:#22d3ee; color:#cffafe; background:rgba(8,145,178,.18); }
.proxy-media-actions button.danger { color:#fecaca; }
.proxy-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.proxy-summary-card { padding:9px; border-radius:.65rem; border:1px solid var(--separator); background:rgba(15,23,42,.45); }
.proxy-summary-card span { display:block; color:var(--text-muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.proxy-summary-card strong { display:block; margin-top:3px; color:var(--text-light); font-size:15px; }
.proxy-build-panel { display:none; margin:10px 0; padding:10px; border-radius:.7rem; border:1px solid rgba(34,211,238,.25); background:rgba(8,145,178,.08); }
.proxy-build-panel.active { display:block; }
.proxy-build-head { display:flex; justify-content:space-between; gap:10px; color:#cffafe; font-size:11px; font-weight:750; }
.proxy-build-bar { height:10px; margin-top:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
.proxy-build-bar span { display:block; width:0; height:100%; background:linear-gradient(90deg,#0891b2,#22d3ee); transition:width .2s linear; }
.proxy-settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--separator); }
.proxy-settings-row:last-child { border-bottom:0; }
.proxy-settings-row div { min-width:0; }
.proxy-settings-row strong { display:block; color:var(--text-light); font-size:12px; }
.proxy-settings-row small { display:block; color:var(--text-muted); font-size:10px; line-height:1.35; margin-top:2px; }

#action-help-modal { position:absolute; z-index:4; width:min(420px,calc(100vw - 18px)); max-height:min(78dvh,650px); overflow:hidden; flex-direction:column; }
#action-help-modal>.content { min-height:0; overflow-y:auto; padding:12px 14px!important; }
.action-help-hero { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; }
.action-help-icon { width:42px; height:42px; border-radius:.72rem; display:grid; place-items:center; color:#dbeafe; background:linear-gradient(145deg,rgba(37,99,235,.3),rgba(124,58,237,.22)); border:1px solid rgba(96,165,250,.28); }
.action-help-icon i { font-size:23px; }
.action-help-hero strong { display:block; color:var(--text-light); font-size:15px; }
.action-help-hero small { display:block; margin-top:2px; color:#93c5fd; font-size:10px; font-weight:750; }
.action-help-description { margin:12px 0 0; color:var(--text-muted); font-size:12px; line-height:1.55; }
.action-help-example { margin-top:10px; padding:10px; border-radius:.65rem; border:1px solid rgba(34,197,94,.2); background:rgba(34,197,94,.07); color:#bbf7d0; font-size:11px; line-height:1.5; }
.action-help-example strong { color:#dcfce7; }
.action-help-steps { margin:10px 0 0; padding-left:20px; color:var(--text-muted); font-size:11px; line-height:1.5; }
.action-help-steps li+li { margin-top:4px; }
.action-help-warning { margin-top:10px; padding:8px 10px; border-radius:.58rem; border:1px solid rgba(245,158,11,.22); background:rgba(245,158,11,.07); color:#fde68a; font-size:10px; line-height:1.45; }
.action-help-history { display:flex; gap:6px; overflow-x:auto; margin-top:12px; padding-bottom:3px; scrollbar-width:thin; }
.action-help-history button { flex:0 0 auto; max-width:180px; min-height:30px; padding:5px 8px; border:1px solid var(--separator); border-radius:999px; background:var(--btn); color:var(--text-muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.action-help-history button.active { color:#fff; border-color:#3b82f6; background:rgba(37,99,235,.22); }
.action-help-nav { display:flex; gap:6px; }
.action-help-nav button { width:34px; height:34px; border-radius:.55rem; border:1px solid var(--separator); background:var(--btn); color:var(--text-light); }
.action-help-footer-actions { display:flex; gap:7px; overflow-x:auto; width:100%; scrollbar-width:thin; }
.action-help-footer-actions button { flex:0 0 auto; }
[data-help-key] { -webkit-touch-callout:none; }

@media (max-width:640px) {
  #performance-proxy-modal { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  #performance-proxy-modal>.content { min-height:0; overflow-y:auto!important; }
  #performance-proxy-modal>.modal-footer { flex-wrap:wrap; gap:7px; }
  #performance-proxy-modal>.modal-footer>span { flex:1 0 100%; margin:0!important; white-space:normal; }
  .proxy-summary-grid { grid-template-columns:1fr 1fr 1fr; }
  #action-help-modal { width:calc(100vw - 14px); max-height:82dvh; }
  .action-help-footer-actions { padding-bottom:2px; }
}

/* v29 — sistema único de ícones e botões */
:root {
  --ui-icon-gap: 7px;
  --ui-icon-size: 18px;
  --ui-icon-box: 20px;
}
.material-icons,
i.material-icons,
span.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--ui-icon-size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  min-width: 1em;
  max-width: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex: 0 0 auto;
  vertical-align: middle;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}
.ui-button-normalized {
  --button-icon-size: var(--ui-icon-size);
  --button-icon-box: var(--ui-icon-box);
  --button-icon-gap: var(--ui-icon-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-icon-gap);
  text-align: center;
  line-height: 1.15;
}
.ui-button-normalized > .ui-button-icon {
  width: var(--button-icon-box) !important;
  height: var(--button-icon-box) !important;
  min-width: var(--button-icon-box) !important;
  max-width: var(--button-icon-box) !important;
  font-size: var(--button-icon-size) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center;
  transform: none !important;
}
.ui-button-normalized > .ui-button-label,
.ui-button-normalized > span:not(.material-icons) {
  min-width: 0;
  margin: 0;
  line-height: 1.15;
}
.ui-button-normalized.ui-icon-only {
  --button-icon-gap: 0px;
  gap: 0 !important;
  /* Preserva o padding definido pelo componente original. */
}
.menu-btn.ui-button-normalized,
.tool-btn.ui-button-normalized,
.close.ui-button-normalized,
.btn-danger.ui-button-normalized {
  --button-icon-size: 20px;
  --button-icon-box: 22px;
}
.modal-action.ui-button-normalized,
.btn-primary.ui-button-normalized,
.plugin-card-actions button.ui-button-normalized,
.preset-model-actions button.ui-button-normalized {
  --button-icon-size: 17px;
  --button-icon-box: 19px;
  --button-icon-gap: 7px;
  min-height: 38px;
}
.menu-item.ui-button-normalized {
  --button-icon-size: 19px;
  --button-icon-box: 22px;
  justify-content: flex-start;
}
.action-category-btn.ui-button-normalized,
.quick-shortcut-btn.ui-button-normalized {
  --button-icon-gap: 2px;
  --button-icon-size: 19px;
  --button-icon-box: 21px;
  flex-direction: column;
}
.dashboard-wiki-btn.ui-button-normalized,
.btn-create-project.ui-button-normalized {
  --button-icon-size: 19px;
  --button-icon-box: 21px;
}
.plugin-tabs button.ui-button-normalized,
.browser-filter.ui-button-normalized,
.cover-preset-btn.ui-button-normalized,
.chroma-key-preset.ui-button-normalized {
  --button-icon-size: 16px;
  --button-icon-box: 18px;
}
@media (max-width: 430px) {
  :root { --ui-icon-gap: 6px; --ui-icon-size: 17px; --ui-icon-box: 19px; }
  .modal-action.ui-button-normalized { min-height: 36px; }
  .menu-btn.ui-button-normalized,
  .tool-btn.ui-button-normalized,
  .close.ui-button-normalized { --button-icon-size: 19px; --button-icon-box: 21px; }
}


/* v32 — ícones e alças preservados; redimensionamento livre no canvas */
.ui-button-normalized {
  column-gap: var(--button-icon-gap);
}
.ui-button-normalized.ui-icon-only {
  column-gap: 0 !important;
}
.menu .menu-item,
.menu-item.ui-button-normalized,
[role="menu"] [role="menuitem"] {
  width: 100%;
  justify-content: flex-start !important;
  text-align: left !important;
  column-gap: 10px;
}
.menu-item > .menu-item-label,
.menu-item > .ui-button-label,
.menu-item > span:not(.material-icons) {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left !important;
}
.dropdown,
.dropdown.ui-button-normalized {
  justify-content: flex-start;
  text-align: left !important;
  column-gap: 8px;
}
.dropdown > span:not(.material-icons),
.dropdown > .ui-button-label {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left !important;
}
.dropdown > .material-icons:last-child {
  margin-left: auto !important;
}