html, body { height: 100%; overflow: hidden; background: #07111d url("../images/default/magichand-hero.png") center / cover fixed no-repeat !important; font-family: "Segoe UI", Arial, sans-serif !important; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,10,18,.88), rgba(3,13,23,.72) 42%, rgba(3,10,18,.5)), linear-gradient(0deg, rgba(2,7,13,.82), transparent 46%); z-index: -1; }
.x-viewport, .x-viewport body, .x-border-layout-ct { background: transparent !important; }
#header.app-header { display: flex; align-items: center; width: 100%; height: 72px; padding: 0 34px; border-bottom: 1px solid rgba(148,211,247,.25); background: linear-gradient(90deg, rgba(2,9,15,.97), rgba(8,26,42,.9), rgba(2,9,15,.94)); box-shadow: 0 8px 28px rgba(0,0,0,.38); color: #f3f9ff; }
.app-brand { color: #61c8ff; font-size: 20px; font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.app-brand::before { display: none; }
.app-title { margin-left: auto; color: #f7fbff; font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.app-version { position: fixed; z-index: 20; bottom: 4px; left: 102px; margin: 0; color: #8eb5ce; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.x-panel, .x-panel-body, .x-layout-collapsed, .x-border-layout-ct { background: rgba(5,17,28,.76) !important; }
.x-panel { border-color: rgba(91,180,230,.31) !important; box-shadow: 0 11px 28px rgba(0,0,0,.22); }
.x-panel-header { min-height: 38px; padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid rgba(91,180,230,.28) !important; background: linear-gradient(90deg, rgba(17,65,98,.96), rgba(11,35,56,.94)) !important; color: #dff5ff !important; font: 700 13px/18px "Segoe UI", Arial, sans-serif !important; letter-spacing: .025em; }
.x-panel-header-text { color: #dff5ff !important; }
.x-layout-split-west { width: 1px !important; background: #1b4d68 !important; box-shadow: none !important; }
.x-tree { padding: 10px 8px 24px !important; background: rgba(3,13,22,.78) !important; }
.x-tree-node { margin: 2px 0; }
.x-tree-node-el { min-height: 31px; padding: 5px 7px !important; border-radius: 5px; transition: background .16s ease; }
.x-tree-node-el:hover { background: rgba(63,169,231,.18); }
.x-tree-node a span, .x-tree-node .x-tree-node-anchor { color: #d4e7f4 !important; font: 600 13px/20px "Segoe UI", Arial, sans-serif !important; }
.x-tree-node .x-tree-selected { border: 0 !important; background: rgba(34,139,205,.42) !important; }
.x-tree-node-icon { margin-right: 7px !important; filter: brightness(1.7) saturate(.8) hue-rotate(155deg) drop-shadow(0 0 3px rgba(71,193,255,.68)); }
.x-tree-ec-icon { filter: brightness(1.45) saturate(.7) hue-rotate(150deg); }
.x-tree-node-expanded .x-tree-node-icon, .x-tree-node-collapsed .x-tree-node-icon { filter: brightness(1.4) sepia(.25) saturate(1.5) hue-rotate(165deg) drop-shadow(0 0 3px rgba(71,193,255,.55)); }
.x-tree-node-leaf .x-tree-node-icon { filter: brightness(1.7) saturate(.9) hue-rotate(155deg) drop-shadow(0 0 3px rgba(71,193,255,.7)); }
.x-tab-panel-body, .x-panel-bwrap { background: rgba(4,15,25,.62) !important; }
.x-panel-body p, .x-panel-body, .x-panel-body td { color: #e3edf5; font: 14px/1.6 "Segoe UI", Arial, sans-serif; }
.x-panel-body h1, .x-panel-body h2, .x-panel-body h3 { color: #7ed4ff; }
.x-panel-body a { color: #75d0ff !important; }
.x-btn button, .x-btn-text { font: 700 12px "Segoe UI", Arial, sans-serif !important; }
.x-btn { border-color: rgba(101,197,248,.58) !important; border-radius: 4px !important; background: linear-gradient(135deg, #227eb3, #124c75) !important; }
.x-btn-over { filter: brightness(1.16); }
.x-grid3-header, .x-grid3-hd, .x-tab-strip span.x-tab-strip-text { font-family: "Segoe UI", Arial, sans-serif !important; }
.x-grid3-header { background: rgba(13,54,82,.94) !important; }
.x-grid3-row { background: rgba(4,16,27,.74) !important; color: #e1edf5 !important; }
.x-grid3-row-alt { background: rgba(10,32,48,.8) !important; }
.x-grid3-row-over { background: rgba(35,120,170,.3) !important; }
@media (max-width: 720px) { #header.app-header { height: 60px; padding: 0 15px; } .app-brand { font-size: 14px; } .app-title { font-size: 14px; } .app-version { margin-left: 13px; font-size: 10px; } }
/* Ícones vetoriais/Unicode para substituir os GIFs antigos da árvore. */
.x-tree-node-icon { display: none !important; }
.x-tree-node-anchor::before { content: "✦"; display: inline-block; width: 20px; margin-right: 5px; color: #67cfff; font-size: 13px; text-align: center; text-shadow: 0 0 8px rgba(74, 190, 255, .85); }
.x-tree-node-expanded .x-tree-node-anchor::before, .x-tree-node-collapsed .x-tree-node-anchor::before { content: "◈"; color: #e5bc70; text-shadow: 0 0 8px rgba(229, 188, 112, .62); }
.x-tree-node-leaf .x-tree-node-anchor::before { content: "✦"; }
/* Conteúdo informativo: remove o cartão branco herdado do tema antigo. */
.fondoa, .x-panel-body.fondoa { background: rgba(5, 20, 32, .88) !important; border: 1px solid rgba(87, 181, 232, .24) !important; color: #dceaf4 !important; }
.fondoa, .fondoa p, .fondoa div, .fondoa span, .fondoa td { color: #dceaf4 !important; font: 14px/1.65 "Segoe UI", Arial, sans-serif !important; }
.fondoa h1, .fondoa h2, .fondoa h3, .fondoa strong { color: #8bd8ff !important; }
/* Navegação: símbolos variados e seta moderna posicionada à direita. */
.x-tree-node-el { position: relative; padding-right: 33px !important; }
.x-tree-node-anchor { display: inline-flex !important; align-items: center; max-width: calc(100% - 5px); }
.x-tree-node-icon { display: none !important; }
.x-tree-node-anchor::before { content: "✦" !important; color: #62caff !important; }
.x-tree-node:nth-child(7n + 1) > .x-tree-node-el .x-tree-node-anchor::before { content: "◈" !important; color: #edc472 !important; }
.x-tree-node:nth-child(7n + 2) > .x-tree-node-el .x-tree-node-anchor::before { content: "◌" !important; color: #70d7ff !important; }
.x-tree-node:nth-child(7n + 3) > .x-tree-node-el .x-tree-node-anchor::before { content: "⬡" !important; color: #b38cff !important; }
.x-tree-node:nth-child(7n + 4) > .x-tree-node-el .x-tree-node-anchor::before { content: "◆" !important; color: #e5bc70 !important; }
.x-tree-node:nth-child(7n + 5) > .x-tree-node-el .x-tree-node-anchor::before { content: "✧" !important; color: #79e3cb !important; }
.x-tree-node:nth-child(7n + 6) > .x-tree-node-el .x-tree-node-anchor::before { content: "◉" !important; color: #78b8ff !important; }
.x-tree-node-el::after { content: "›"; position: absolute; top: 5px; right: 9px; color: #75cfff; font: 700 20px/20px "Segoe UI", Arial, sans-serif; text-shadow: 0 0 8px rgba(61, 186, 255, .75); }
.x-tree-node-expanded > .x-tree-node-el::after { content: "⌄"; top: 4px; color: #e8c474; }
.x-tree-node-leaf > .x-tree-node-el::after { content: "→"; font-size: 14px; top: 8px; color: #77a8c4; }
.x-tree-ec-icon { position: absolute !important; z-index: 2; top: 4px; right: 5px; width: 24px !important; height: 24px !important; opacity: 0; cursor: pointer; }
/* Área de trabalho: a imagem do site aparece sob os painéis, sem caixa ou fundo branco. */
#content-panel, #content-panel .x-panel, #content-panel .x-panel-bwrap, #content-panel .x-panel-body, #content-panel .fondoa { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
#content-panel .fondoa, #content-panel .fondoa p, #content-panel .fondoa div, #content-panel .fondoa span, #content-panel .fondoa td { color: #eaf6ff !important; text-shadow: 0 2px 4px rgba(0,0,0,.82); }
#content-panel .x-panel-header { border: 0 !important; background: linear-gradient(90deg, rgba(4,24,39,.9), rgba(10,58,86,.78), rgba(4,24,39,.58)) !important; }
/* Apenas grupos recebem controle de expansão; os itens finais não exibem seta. */
.x-tree-node-el::after { display: none; }
.x-tree-node-el.x-tree-node-collapsed::after { content: "›"; display: block; position: absolute; top: 5px; right: 9px; color: #75cfff; font: 700 20px/20px "Segoe UI", Arial, sans-serif; text-shadow: 0 0 8px rgba(61,186,255,.75); }
.x-tree-node-el.x-tree-node-expanded::after { content: "⌄"; display: block; position: absolute; top: 4px; right: 9px; color: #e8c474; font: 700 20px/20px "Segoe UI", Arial, sans-serif; text-shadow: 0 0 8px rgba(232,196,116,.65); }
.x-tree-node-el.x-tree-node-leaf::after { display: none !important; }
/* Ícones temáticos das categorias. */
.x-tree-node-icon.icon-dashboard + .x-tree-node-anchor::before { content: "▦" !important; color: #eac36f !important; }
.x-tree-node-icon.icon-files + .x-tree-node-anchor::before { content: "▣" !important; color: #69ccff !important; }
.x-tree-node-icon.icon-message + .x-tree-node-anchor::before { content: "✉" !important; color: #ba91ff !important; }
.x-tree-node-icon.icon-upload + .x-tree-node-anchor::before { content: "↥" !important; color: #6ee1bc !important; }
.x-tree-node-icon.icon-download + .x-tree-node-anchor::before { content: "↧" !important; color: #7dbaff !important; }
.x-tree-node-icon.icon-map + .x-tree-node-anchor::before { content: "⌖" !important; color: #edc472 !important; }
.x-tree-node-icon.icon-server + .x-tree-node-anchor::before { content: "⌘" !important; color: #70d7ff !important; }
.x-tree-node-icon.icon-tools + .x-tree-node-anchor::before { content: "⚙" !important; color: #9ec4dc !important; }
.x-tree-node-icon.icon-cart + .x-tree-node-anchor::before { content: "◰" !important; color: #e9a8cb !important; }
.x-tree-node-icon.icon-help + .x-tree-node-anchor::before { content: "?" !important; color: #71d5ff !important; }
.x-tree-node-icon.icon-calendar + .x-tree-node-anchor::before { content: "▦" !important; color: #6ce0b7 !important; }
.x-tree-node-icon.icon-heart + .x-tree-node-anchor::before { content: "♥" !important; color: #ef8da9 !important; }
.x-tree-node-icon.icon-award + .x-tree-node-anchor::before { content: "★" !important; color: #edc472 !important; }

/* Regra final do tema: nenhuma camada do ExtJS pode recuperar o branco
   do tema legado. A arte de fundo continua visível no espaço entre painéis. */
.x-viewport,
.x-viewport.x-border-layout-ct,
.x-viewport > .x-border-layout-ct,
#content-panel,
#content-panel > .x-panel-bwrap,
#content-panel .x-panel-bwrap,
#content-panel .x-panel-mc,
#content-panel .x-panel-body,
#content-panel .x-panel-body-noheader,
#content-panel .x-panel-tl,
#content-panel .x-panel-tr,
#content-panel .x-panel-tc,
#content-panel .x-panel-ml,
#content-panel .x-panel-mr,
#content-panel .x-panel-bl,
#content-panel .x-panel-br,
#content-panel .x-panel-bc {
    background-color: transparent !important;
    background-image: none !important;
}

/* Conteúdo e janelas recebem vidro escuro em vez do cartão branco herdado. */
.x-window .x-window-mc,
.x-window .x-window-body,
.x-window .x-panel-mc,
.x-window .x-panel-body,
.x-window .x-form-item,
.x-menu,
.x-combo-list,
.x-tip .x-tip-body,
.x-tab-panel-body,
.x-plain-body {
    background: rgba(4, 17, 29, .92) !important;
    color: #eaf6ff !important;
}

/* A área de leitura nunca fica transparente: assim o tema antigo não pode
   deixar o texto branco sobre branco. */
#content-panel .x-panel-body,
#content-panel .x-panel-mc,
#content-panel .fondoa,
#content-panel .x-panel-body.fondoa {
    background: rgba(3, 16, 27, .94) !important;
    background-color: rgba(3, 16, 27, .94) !important;
    background-image: none !important;
    color: #eaf6ff !important;
}

#content-panel .fondoa *,
#content-panel .x-panel-body.fondoa * {
    color: #eaf6ff !important;
}

/* O viewport do ExtJS cobre o body; a arte precisa ser aplicada nele. */
.x-viewport.x-border-layout-ct {
    background: #07111d url("../images/default/magichand-hero.png") center center / cover no-repeat !important;
}

/* Classes do conteúdo informativo legado. Eram elas que aplicavam #fff. */
#content-panel table.tablecol,
#content-panel table.tablecol tbody,
#content-panel table.tablecol tr,
#content-panel td.titcol,
#content-panel td.titcol2,
#content-panel td.datoscol,
#content-panel td.datoscol2,
#content-panel td.valcol,
#content-panel td.valcol2 {
    background: rgba(3, 16, 27, .94) !important;
    background-color: rgba(3, 16, 27, .94) !important;
    background-image: none !important;
    border-color: rgba(87, 181, 232, .24) !important;
    color: #eaf6ff !important;
}

#content-panel td.titcol,
#content-panel td.titcol2 {
    color: #8bd8ff !important;
    font-weight: 700 !important;
}

/* Padrão único para todas as páginas de edição. */
#content-panel .editor-page > .x-panel-bwrap > .x-panel-body {
    padding: 16px !important;
    background: rgba(2, 13, 23, .76) !important;
}

#content-panel .editor-section {
    margin: 0 0 14px !important;
    border: 1px solid rgba(85, 181, 233, .28) !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18) !important;
}

#content-panel .editor-section > .x-panel-header {
    min-height: 44px !important;
    padding: 12px 15px !important;
    border: 0 !important;
    background: linear-gradient(90deg, rgba(10, 55, 83, .98), rgba(5, 27, 45, .96)) !important;
    color: #eaf8ff !important;
    font-size: 13px !important;
}

#content-panel .editor-section-actions > .x-panel-header {
    background: linear-gradient(90deg, rgba(16, 84, 120, .98), rgba(7, 37, 60, .96)) !important;
}

#content-panel .editor-actions-panel,
#content-panel .editor-specifications-panel {
    border: 0 !important;
    background: rgba(3, 17, 29, .94) !important;
    background-image: none !important;
}

.editor-action-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
}

.editor-action-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: min(100%, 330px);
    max-width: 100%;
    min-height: 46px;
    padding: 12px 15px !important;
    border: 1px solid rgba(100, 205, 255, .58) !important;
    border-radius: 5px;
    background: linear-gradient(135deg, rgba(28, 129, 184, .96), rgba(12, 63, 103, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 7px 18px rgba(0, 43, 75, .3);
    color: #ffffff !important;
    font: 700 13px/1.35 "Segoe UI", Arial, sans-serif !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform .16s ease, filter .16s ease;
}

.editor-action-button:hover,
.editor-action-button:focus-visible {
    filter: brightness(1.15);
    transform: translateY(-2px);
    outline: 0;
}

.editor-action-label { color: #f1fbff !important; }
.editor-action-arrow { color: #a7e4ff !important; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }

#content-panel .editor-specifications-panel {
    min-height: 92px;
    padding: 16px !important;
    color: #dbeefa !important;
}

#content-panel .editor-specifications-panel .x-loading-indicator {
    padding: 10px 12px 10px 31px !important;
    color: #9edcff !important;
    font: 600 13px/20px "Segoe UI", Arial, sans-serif !important;
}

/* A tabela antiga desenhava duas linhas verticais inúteis nas especificações. */
#content-panel .editor-specifications-panel table.tablecol,
#content-panel .editor-specifications-panel table.tablecol tbody,
#content-panel .editor-specifications-panel table.tablecol tr,
#content-panel .editor-specifications-panel table.tablecol td {
    border: 0 !important;
}

/* Páginas de ajuda também usam a tabela antiga, sem a classe do novo painel. */
#content-panel .fondoa table.tablecol,
#content-panel .fondoa table.tablecol tbody,
#content-panel .fondoa table.tablecol tr,
#content-panel .fondoa table.tablecol td {
    border: 0 !important;
}

/* Fallback visual para painéis já renderizados antes da atualização do script. */
#content-panel .editor-page > .x-panel-header {
    display: none !important;
}

/* Ícones do menu: finos, dourados, sem glow e um símbolo exclusivo por item. */
#tree-panel .x-tree-node-icon { display: none !important; filter: none !important; }
#tree-panel .x-tree-ec-icon { opacity: 0 !important; }
#tree-panel .x-tree-node-anchor::before {
    content: attr(data-nav-icon) !important;
    display: inline-block !important;
    width: 19px !important;
    margin-right: 7px !important;
    color: #d9b76a !important;
    font: 400 15px/1 "Segoe UI Symbol", "Segoe UI", sans-serif !important;
    text-align: center;
    text-shadow: none !important;
}
#tree-panel .x-tree-node-el.x-tree-node-collapsed::after,
#tree-panel .x-tree-node-el.x-tree-node-expanded::after {
    color: #d9b76a !important;
    text-shadow: none !important;
}

/* Moldura lateral no mesmo azul escuro e discreto dos cartões de conteúdo. */
#tree-panel,
#tree-panel > .x-panel-bwrap,
#tree-panel .x-panel-body {
    border-color: #1b4d68 !important;
    box-shadow: none !important;
}