/* Estilos específicos (extra) — complementam app.css, usando só os tokens dele.
   Editores avançados de configuração (Pages/Config/Advanced + Shared/Advanced). */

/* ---------- moldura ---------- */
.adv{display:flex;flex-direction:column;gap:16px;min-width:0}
.adv-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.adv-title{margin:0;font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em}
.adv-sub{margin:0;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.adv-actions{flex-shrink:0}
.adv-foot{margin:0;font-size:12.5px;line-height:1.5}
.adv-add{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.adv-list{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.5}
.adv-cards{display:flex;flex-direction:column;gap:10px}
.adv-cards.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.adv-item .card-h{padding:8px 10px 8px 14px}
.adv-item.open{border-color:var(--line2)}
.adv-item:not(.open) .card-h{border-bottom:none}
.adv-toggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:none;background:none;padding:4px 0;text-align:left;min-width:0;color:inherit}
.adv-fs{border:1px solid var(--line);border-radius:8px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.adv-fs legend{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);padding:0 6px}

/* lista mestre (esquerda) + editor (direita) */
.adv-master{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
@media (max-width:980px){.adv-master{grid-template-columns:1fr}}
.adv-li{padding:8px 8px 8px 12px;gap:4px}
.adv-li.sel{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.adv-li.off{opacity:.65}
.adv-li-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:none;background:none;padding:2px 0;text-align:left;min-width:0;color:inherit}

/* ---------- controles ---------- */
.bitext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.bitext .en{color:var(--ink2)}
.ok-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pos);margin-right:6px;vertical-align:1px}
.input.expr{font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
button.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.on.neg{background:var(--neg-soft);border-color:var(--neg);color:var(--neg)}
.chip.removable{padding-right:4px}
.chip.removable button{border:none;background:transparent;color:inherit;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;padding:0}
.chip.removable button:hover{background:rgba(127,127,127,.25)}
.chip-input{height:28px;width:auto;min-width:150px;max-width:220px;border-radius:999px;font-size:12.5px}
.scope-hint .chip{height:24px;padding:0 8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.rowtools{display:inline-flex;gap:2px;flex-shrink:0}
.rowtools .btn.icon.sm{width:30px}
.danger-ghost:hover:not(:disabled){color:var(--neg)}
.grow-0{flex-shrink:0}
.scope-hint{border:1px dashed var(--line2);border-radius:8px;padding:8px 10px;font-size:12.5px}
.scope-hint summary{cursor:pointer;color:var(--ink2);font-weight:600}
.scope-groups{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.scope-groups .eyebrow{display:block;margin-bottom:4px}
.switch{position:relative;display:inline-block;width:34px;height:20px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:10px;background:var(--line2);transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--panel);transition:transform .15s}
.switch input:checked+span{background:var(--pos)}
.switch input:checked+span::after{transform:translateX(14px)}
.switch input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.pair-row{display:flex;gap:8px;align-items:center;min-width:0}
.pair-row .input{min-width:0}
.map-head{display:grid;grid-template-columns:1fr 16px 1fr 30px;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* ---------- locais ---------- */
.lvl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.loc-tree{list-style:none;margin:0;padding:6px 0}
.loc-row{display:flex;align-items:center;gap:6px;padding:2px 8px 2px calc(10px + var(--depth,0) * 22px);border-bottom:1px solid var(--line);position:relative}
.loc-row:last-child{border-bottom:none}
.loc-row::before{content:"";position:absolute;left:calc(var(--depth,0) * 22px - 4px);top:0;bottom:50%;width:8px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);display:var(--tree-line,block)}
.loc-row[style*="--depth:0"]::before{display:none}
.loc-row.sel{background:var(--acc-soft)}
.loc-row.inactive .loc-name{color:var(--ink3)}
.loc-name{display:flex;align-items:center;gap:8px;border:none;background:none;padding:8px 0;text-align:left;min-width:0;color:inherit;font-weight:500}

/* ---------- permissões ---------- */
.perm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
.lvl{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;background:var(--panel2);color:var(--ink3)}
.lvl-1{background:var(--info-soft);color:var(--info)}.lvl-2{background:var(--pos-soft);color:var(--pos)}.lvl-3{background:var(--warn-soft);color:var(--warn)}.lvl-4{background:var(--acc-soft);color:var(--acc)}
.perm td{min-width:150px}
.perm td:first-child{min-width:180px}
.perm-sel{height:32px;font-size:12.5px;font-weight:600}
.perm-sel.dflt{color:var(--ink3);font-weight:400;font-style:italic;background:var(--panel2)}
.perm-sel.lvl-b-0:not(.dflt){color:var(--ink3)}
.perm-sel.lvl-b-1:not(.dflt){color:var(--info)}.perm-sel.lvl-b-2:not(.dflt){color:var(--pos)}.perm-sel.lvl-b-3:not(.dflt){color:var(--warn)}.perm-sel.lvl-b-4:not(.dflt){color:var(--acc)}
.perm-fixed td{background:var(--panel2)}
.member .row{flex-wrap:wrap}
.member-av{background:var(--panel2);color:var(--ink2);flex-shrink:0}

/* ---------- blueprint ---------- */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.bp-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0;color:inherit}
.bp-card:hover{border-color:var(--ink3)}
.bp-card.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc);background:var(--acc-soft)}
.diff-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.diff-list li{display:flex;gap:8px;flex-wrap:wrap}
.conflict{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.conflict-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.conflict-cols>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.conflict-cols pre{margin:0;max-height:180px;overflow:auto;font-size:11.5px}
.conflict-cols .pick pre{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
@media (max-width:820px){.conflict-cols{grid-template-columns:1fr}}
.json-view{margin:0;max-height:60vh;overflow:auto;font-size:11.5px;white-space:pre}

/* ---------- painel ---------- */
.kpi-preview{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.kpi-preview .kpi{min-width:200px;border-style:dashed}
.kpi-mini{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi-mini.warn{color:var(--warn)}.kpi-mini.neg{color:var(--neg)}.kpi-mini.pos{color:var(--pos)}.kpi-mini.acc{color:var(--acc)}.kpi-mini.info{color:var(--info)}
.alert-preview{border:1px dashed var(--line2);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.hit-row{display:flex;gap:10px;align-items:flex-start;padding-top:6px;border-top:1px solid var(--line)}

/* ---------- biblioteca ---------- */
.lib-card{display:flex;flex-direction:column;gap:8px;min-height:180px}
.lib-desc{margin:0;font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.state-strip{display:flex;flex-wrap:wrap;gap:4px}
.impact-banner{border:1px solid currentColor;line-height:1.55}
.flow-preview{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:8px;background:var(--panel2)}
.flow-node{display:inline-flex;gap:4px;align-items:center}
.state-row,.var-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tr-card{border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 12px}
.tr-card.open{border-color:var(--line2);padding-bottom:12px}
.tr-card.bad{border-color:var(--neg)}
.step-card{border:1px solid var(--line);border-radius:8px;padding:10px 10px 10px 12px;display:flex;flex-direction:column;gap:8px}
.step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:'IBM Plex Mono',monospace;font-size:11px;flex-shrink:0}
.op-test{position:sticky;top:72px}
.test-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.test-steps li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.test-steps li:last-child{border-bottom:none;font-weight:600}
.test-v{font-size:15px;font-weight:600;white-space:nowrap}
.test-steps li.err{color:var(--neg)}

@media (max-width:820px){
  .bitext{grid-template-columns:1fr}
  .op-test{position:static}
  .state-row>div,.var-row>*{min-width:0!important;width:100%!important}
  .perm td{min-width:120px}
  .adv-cards.grid2{grid-template-columns:1fr}
}
.adv-li-main>*{max-width:100%}
.adv-li-main .ellip{display:block}
@media (min-width:821px){.var-row{flex-wrap:nowrap}}
@media (max-width:820px){.var-row,.state-row{flex-wrap:wrap}}
.bp-card>.ellip{display:block;max-width:100%}
.adv .ferr{font-size:12px;color:var(--neg);line-height:1.45}
.adv .hint{font-size:11.5px;color:var(--ink3);line-height:1.45}
.adv .card-h{flex-wrap:wrap}
.loc-name{flex-wrap:wrap;row-gap:2px}
.lvl-row>.grow{min-width:200px}
@media (max-width:820px){
  .lvl-row>.grow{flex-basis:100%;min-width:0}
  .loc-row{padding-left:calc(6px + var(--depth,0) * 14px);padding-right:2px}
  .loc-row::before{left:calc(var(--depth,0) * 14px - 4px)}
  .loc-row .rowtools .btn.icon.sm{width:26px}
  .step-card>.row{flex-wrap:wrap!important}
  .step-card>.row>.grow{flex-basis:100%;order:5}
  .adv-li>.row{flex-wrap:wrap!important}
}
.adv>*{min-width:0;max-width:100%}
.adv .tbl-wrap{max-width:100%;position:relative}
@media (max-width:820px){.perm td{min-width:110px}.perm td:first-child{min-width:130px}.perm-legend>span>.muted{display:none}}
@media (max-width:820px){.adv-head{flex-direction:column;align-items:stretch}.adv-actions{justify-content:flex-start}}