/* A teia (Workers): filamento no centro, pools em órbita; um pool aberto mostra as máquinas em leque. */
.web { position: relative; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; margin-bottom: 14px;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(245, 185, 66, .05), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg-2); }
.web-svg { display: block; width: 100%; height: auto; }
.web-kpis { position: absolute; top: 14px; left: 16px; display: flex; gap: 18px; font: 500 12px var(--mono); color: var(--mute); letter-spacing: .04em; }
.web-kpis b { color: var(--ink); font-weight: 600; }
.web-legend { position: absolute; bottom: 12px; left: 16px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--mute); }
.web-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

.web-svg .orbit { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 6; }
.web-svg .edge { stroke-linecap: round; }
.web-svg .edge.off { stroke: var(--line-2); stroke-dasharray: 3 7; }
.web-svg .edge.on { stroke: var(--cool); opacity: .45; }
.web-svg .edge.busy { stroke: var(--fil); stroke-dasharray: 6 10; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -16; } }

.web-svg .own-arc { fill: none; stroke: var(--line-2); stroke-width: 1; }
.web-svg .own-arc.none { stroke-dasharray: 2 5; }
.web-svg .own-label { font: 600 11px var(--display); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-2); }

.web-svg .hub .ring { fill: none; stroke: var(--fil); transform-origin: 0 0; }
.web-svg .hub .r1 { stroke-width: 1; opacity: .9; stroke-dasharray: 1 5; }
.web-svg .hub .r2 { stroke-width: 1.5; opacity: .55; stroke-dasharray: 18 10; animation: spin 32s linear infinite; }
.web-svg .hub .r3 { stroke-width: 1; opacity: .35; stroke-dasharray: 2 9; animation: spin 48s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.web-svg .hub .disc { fill: var(--panel); stroke: var(--fil); stroke-width: 1.5; }
.web-svg .hub-t { font: 700 15px var(--display); letter-spacing: .22em; fill: var(--ink); text-anchor: middle; }
.web-svg .hub-s { font: 500 10px var(--mono); fill: var(--mute); text-anchor: middle; }

.web-svg .node { cursor: pointer; text-decoration: none; }
.web-svg .node .halo { fill: var(--fil); opacity: 0; }
.web-svg .node.busy .halo { animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: 0; } 50% { opacity: .18; } }
.web-svg .node .gpu-track { fill: none; stroke: var(--line-2); stroke-width: 3; }
.web-svg .node .gpu { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.web-svg .node.busy .gpu { stroke: var(--fil); }
.web-svg .node.off .gpu { stroke: transparent; }
.web-svg .node .core { fill: var(--panel); stroke: var(--ok); stroke-width: 1.5; transition: stroke .3s; }
.web-svg .node.busy .core { stroke: var(--fil); }
.web-svg .node.off .core { stroke: var(--line-2); fill: var(--bg-2); }
.web-svg .node .pct { font: 600 13px var(--mono); fill: var(--ink); text-anchor: middle; }
.web-svg .node.off .pct { fill: var(--mute); }
.web-svg .node .name { font: 600 13px var(--display); letter-spacing: .04em; fill: var(--ink); text-anchor: middle; }
.web-svg .node .sub { font: 500 10px var(--mono); fill: var(--mute); text-anchor: middle; }
.web-svg .node.off .name { fill: var(--mute); }
.web-svg .node:hover .core, .web-svg .node:focus-visible .core { stroke-width: 3; }
.web-svg .node:focus-visible { outline: none; }
.web-svg .empty-t { font: 500 13px var(--mono); fill: var(--mute); }

/* pools em órbita: anel com um segmento por máquina; clique abre as máquinas em leque */
.web-svg .pl { cursor: pointer; outline: none; transition: opacity .25s; }
.web-svg .pl.dim, .web-svg .edge.dim { opacity: .32; }
.web-svg .pl .hit { fill: transparent; }
.web-svg .pl .halo { fill: var(--fil); opacity: 0; }
.web-svg .pl.busy .halo { animation: halo 2.4s ease-in-out infinite; }
.web-svg .pl .seg { fill: none; stroke-width: 5; stroke-linecap: butt; }
.web-svg .pl .seg.on { stroke: var(--ok); } .web-svg .pl .seg.busy { stroke: var(--fil); } .web-svg .pl .seg.off { stroke: var(--line-2); }
.web-svg .pl .seg.none { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.web-svg .pl .core { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; transition: stroke .3s, stroke-width .2s; }
.web-svg .pl.on .core { stroke: var(--ok); } .web-svg .pl.busy .core { stroke: var(--fil); }
.web-svg .pl.orphan .core { stroke-dasharray: 3 4; }
.web-svg .pl .cnt { font: 700 20px var(--display); fill: var(--ink); text-anchor: middle; }
.web-svg .pl.off .cnt { fill: var(--mute); }
.web-svg .pl .name { font: 600 15px var(--display); letter-spacing: .05em; fill: var(--ink); text-anchor: middle; }
.web-svg .pl .sub { font: 500 10px var(--mono); fill: var(--mute); text-anchor: middle; }
.web-svg .pl .open-ring { fill: none; stroke: var(--fil); stroke-width: 1.2; stroke-dasharray: 4 6; transform-origin: 0 0; animation: spin 20s linear infinite; }
.web-svg .pl:hover .core, .web-svg .pl:focus-visible .core { stroke-width: 3; }
.web-svg .pl:focus-visible .hit { stroke: var(--cool); stroke-width: 1.5; }
.web-legend .hint { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .web-svg .edge.busy, .web-svg .hub .r2, .web-svg .hub .r3, .web-svg .node.busy .halo, .web-svg .pl.busy .halo, .web-svg .pl .open-ring { animation: none; } .web-svg .node.busy .halo, .web-svg .pl.busy .halo { opacity: .12; } }
@media (max-width: 760px) { .web-kpis { position: static; padding: 12px 14px 0; } .web-legend { position: static; padding: 0 14px 12px; } }

/* campos empilhados dos parâmetros (página Workers) */
label.pf { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink); min-width: 200px; }
label.pf input { width: 120px; text-align: right; } label.pf small { color: var(--mute); font-weight: 400; }

/* Modelos (admin): vitrine do catálogo com um cartão por variante e os parâmetros da rede */
.mk-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .mk-bar input { flex: 1; min-width: 260px; }
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; } .mk-chips button { padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font: 500 12px var(--sans); cursor: pointer; }
.mk-chips button.on { border-color: var(--fil); color: var(--fil); background: var(--fil-dim); } .mk-chips button b { font-family: var(--mono); font-weight: 500; color: var(--mute); margin-left: 4px; }
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { .mk-grid { grid-template-columns: 1fr; } }
.mk { display: flex; flex-direction: column; gap: 10px; } .mk.has { border-color: rgba(245, 185, 66, .45); } .mk.def { border-color: var(--line-2); background: var(--panel-2); }
.mk-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mk-h h3 { margin: 0; font: 600 20px/1 var(--display); letter-spacing: .02em; } .mk-h .tag-v { color: var(--fil); font-weight: 500; } .mk-h .meta { color: var(--mute); font: 500 11px var(--mono); margin-left: auto; }
.mk-caps { display: inline-flex; gap: 4px; } .mk-caps i { font-style: normal; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.mk-caps i.vision { color: #9085e9; } .mk-caps i.tools { color: var(--cool); } .mk-caps i.thinking { color: #d55181; }
.mk p.desc { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.mk-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.mk-fields label { display: flex; flex-direction: column; gap: 3px; font: 500 11px var(--sans); color: var(--ink-2); min-width: 0; } .mk-fields label input { width: 100%; } .mk-fields label small { color: var(--mute); font: 500 10px var(--mono); }
.mk-fields .margin { display: flex; flex-direction: column; gap: 3px; font: 500 11px var(--sans); color: var(--ink-2); justify-content: center; } .mk-fields .margin b { font: 600 15px var(--mono); color: var(--ink); }
.mk-more { color: var(--mute); font-size: 12px; margin: 4px 0 0; grid-column: 1 / -1; }
.mk.off { opacity: .62; } .mk.off:hover { opacity: 1; }
.mk .onoff { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); } .mk .onoff small { display: block; color: var(--mute); } .mk .onoff select { max-width: 190px; }
.mk-fields .onoff { grid-column: 1 / -1; padding-top: 4px; flex-direction: row; } .mk-fields .onoff input { width: auto; flex: none; } .mk-fields .onoff span { flex: 1; text-align: left; }

/* tabela da página Workers agrupada por pool (abre junto com a teia) */
tr.pool-row td { background: var(--panel-2); } tr.pool-row.open td { border-bottom-color: var(--line-2); } tr.pool-row:hover td { background: var(--panel); }
.pl-caret { display: inline-block; width: 16px; color: var(--fil); font-size: 11px; }
tr.wk-row td.wk-cell { padding-left: 34px; position: relative; }
tr.wk-row td.wk-cell::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 50%; width: 9px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
tr.pool-cfg-row td.pool-cfg { background: var(--bg-2); font-size: 12px; } td.pool-cfg label { display: inline-flex; gap: 8px; align-items: center; margin-right: 12px; color: var(--ink-2); } td.pool-cfg select { font-size: 12px; }
.tiers-card { margin-bottom: 12px; } .tiers-card .mk-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
td.pool-cfg .pool-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } td.pool-cfg .pa { display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); }
td.pool-cfg .pa.approved { border-color: rgba(79, 207, 143, .4); } td.pool-cfg .pa.pending { border-color: rgba(245, 185, 66, .5); }

/* Modelos: abas Ollama × OpenRouter */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.subtabs a { padding: 9px 14px; color: var(--ink-2); font: 500 14px var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); } .subtabs a.on { color: var(--ink); border-bottom-color: var(--fil); }
.or-cfg { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; } .or-cfg label.pf input, .or-cfg label.pf select { width: 190px; text-align: left; }
.or-cfg label.pf small { max-width: 220px; }
.or-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.or-fields { grid-template-columns: 1fr 1fr; }

/* modais do admin (<dialog>) */
dialog.modal { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); color: var(--ink); padding: 22px 24px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
dialog.modal::backdrop { background: rgba(5, 6, 9, .72); backdrop-filter: blur(3px); }
dialog.modal h2 { margin: 0 0 10px; font: 600 24px/1.1 var(--display); letter-spacing: .02em; }
dialog.modal .modal-b { font-size: 14px; line-height: 1.55; color: var(--ink-2); } dialog.modal .modal-b p { margin: 0 0 10px; } dialog.modal .modal-b b { color: var(--ink); }
dialog.modal .field select { width: 100%; } dialog.modal .modal-a { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.am-warn { color: var(--fil); font-size: 12px; min-height: 1em; margin: 10px 0 0 !important; }