:root {
  --bg: #f5f6f8; --panel: #ffffff; --panel-2: #f9fafb; --border: #e3e6eb; --text: #1b1f24; --muted: #687280;
  --accent: #2563eb; --accent-soft: #e8efff; --side: #111827; --side-text: #c9d1dc; --side-active: #1f2937;
  --ok: #16a34a; --ok-soft: #e7f6ec; --warn: #d97706; --warn-soft: #fdf3e2; --err: #dc2626; --err-soft: #fdecec;
  --run: #2563eb; --run-soft: #e8efff; --off: #8b95a3; --off-soft: #eef0f3;
  --copy: #7c4dcc; --copy-soft: #f1ebfb;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --panel: #151b23; --panel-2: #1a212b; --border: #262f3b; --text: #e6e9ee; --muted: #8d97a5;
    --accent: #5b8cff; --accent-soft: #1a2640; --side: #0a0e14; --side-text: #aeb7c3; --side-active: #182030;
    --ok: #3fb768; --ok-soft: #13291c; --warn: #e5a23b; --warn-soft: #2d2311; --err: #f06464; --err-soft: #321718;
    --run: #5b8cff; --run-soft: #1a2640; --off: #7d8794; --off-soft: #1c222b;
    --copy: #b190ef; --copy-soft: #261f3a;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }

/* layout */
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-text); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { color: #fff; font-weight: 700; font-size: 15px; padding: 4px 10px 16px; display: flex; gap: 8px; align-items: center; }
.brand svg { flex: none; }
.side a { color: var(--side-text); padding: 8px 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.side a:hover { background: var(--side-active); text-decoration: none; color: #fff; }
.side a.active { background: var(--side-active); color: #fff; font-weight: 600; }
.side .spacer { flex: 1; }
.side form button { width: 100%; background: none; border: 0; color: var(--side-text); text-align: left; padding: 8px 10px; cursor: pointer; font: inherit; border-radius: 8px; }
.side form button:hover { background: var(--side-active); color: #fff; }
.pill { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--err); color: #fff; font-weight: 600; }
.pill.run { background: var(--run); }
.main { padding: 24px 28px 48px; min-width: 0; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.head .sub { color: var(--muted); margin-top: 2px; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > h2 { padding: 16px 18px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.stat .hint { color: var(--muted); font-size: 12px; }
.stat.ok .value { color: var(--ok); } .stat.err .value { color: var(--err); } .stat.run .value { color: var(--run); }
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-all; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
td .muted, .muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { padding: 36px; text-align: center; color: var(--muted); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-ok, .b-success, .b-info { background: var(--ok-soft); color: var(--ok); }
.b-warning, .b-stale { background: var(--warn-soft); color: var(--warn); }
.b-failed, .b-error { background: var(--err-soft); color: var(--err); }
.b-running { background: var(--run-soft); color: var(--run); }
.b-running::before { animation: pulse 1s infinite; }
.b-never, .b-disabled, .b-pruned { background: var(--off-soft); color: var(--off); }
@keyframes pulse { 50% { opacity: .25; } }
.spark { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.spark span { width: 7px; border-radius: 2px; background: var(--off); opacity: .85; }
.spark .s-success { background: var(--ok); } .spark .s-warning { background: var(--warn); }
.spark .s-failed { background: var(--err); } .spark .s-running { background: var(--run); }

/* forms */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--err); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.confirm-dialog { width: min(440px, calc(100% - 32px)); padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: 0 16px 48px #0005; }
.confirm-dialog::backdrop { background: #0009; }
.confirm-dialog p { margin: 0 0 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-actions { justify-content: flex-end; }
.cost-result { white-space: pre-wrap; overflow-wrap: anywhere; }
.cost-result:not(:empty) { padding: 8px 0; border-top: 1px solid var(--border); }
.cloud-note { border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: 12px; }
.cloud-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 18px; box-shadow: 0 3px 14px #0000000a; }
.cloud-head, .cloud-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cloud-head h2, .cloud-future h2 { font-size: 20px; margin: 3px 0; }
.cloud-provider { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.cloud-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cloud-status { color: var(--muted); font-size: 12px; }
.cloud-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; margin-top: 20px; }
.cloud-metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cloud-metric > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.cloud-metric > strong { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.cloud-metric > small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.cloud-error { color: var(--err) !important; }
.cloud-invoices { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.cloud-invoices h3 { margin-bottom: 2px; }
.cloud-invoice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 14px 0; }
.cloud-invoice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.cloud-invoice-card strong { font-size: 19px; line-height: 1.2; }
.cloud-invoice-id { font-weight: 600; }
.cloud-invoice-dates { color: var(--muted); font-size: 11px; }
.cloud-disclaimer { margin-top: 16px; color: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .cloud-panel { padding: 16px; } }
form.stack { display: grid; gap: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; }
.field .help { color: var(--muted); font-size: 12px; margin-top: 4px; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=time], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { margin-top: 3px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }

/* flashes / results */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.flash.error { background: var(--err-soft); color: var(--err); border-color: transparent; }
.result { margin-top: 12px; padding: 12px 14px; border-radius: 8px; display: none; }
.result.show { display: block; }
.result.ok { background: var(--ok-soft); } .result.err { background: var(--err-soft); color: var(--err); }
.result.loading { background: var(--run-soft); color: var(--run); }
pre.log { background: #0b0f14; color: #d5dde6; padding: 14px; border-radius: 8px; overflow: auto; max-height: 520px; font: 12px/1.55 var(--mono); margin: 0; white-space: pre-wrap; word-break: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { border: 1px solid var(--border); background: var(--panel-2); border-radius: 99px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.sys { opacity: .6; }
.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.problems { color: var(--warn); font-size: 12px; margin: 2px 0 0; padding-left: 16px; }

/* escolha segmentada */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.seg label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg input { margin-top: 3px; }
.seg span { display: flex; flex-direction: column; }
.seg small { color: var(--muted); font-size: 12px; }

/* caixa da chave SSH */
.keybox { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.keybox > .i { width: 22px; height: 22px; color: var(--muted); }
.keybox span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.keybox small { color: var(--muted); font-size: 12px; word-break: break-all; }
.keybox.ok { border-color: var(--ok); background: var(--ok-soft); }
.keybox.ok > .i { color: var(--ok); }
.keybox.drop { border-style: dashed; cursor: pointer; }
.keybox.drop:hover, .keybox.drop.picked { border-color: var(--accent); background: var(--accent-soft); }
.keybox.drop.picked > .i { color: var(--accent); }
.keybox.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* agendamento */
.days { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.days label { cursor: pointer; }
.days input { display: none; }
.days span { display: inline-block; min-width: 46px; text-align: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-weight: 600; }
.days input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.sched-preview { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent); }
.sched-preview > .i { width: 22px; height: 22px; color: var(--accent); }
.sched-preview span { display: flex; flex-direction: column; gap: 2px; }
.sched-preview strong { font-size: 15px; }
.sched-preview small { color: var(--muted); font-size: 12.5px; }
.sched-preview.bad { background: var(--err-soft); border-color: var(--err); }
.sched-preview.bad > .i, .sched-preview.bad strong { color: var(--err); }

.worker-st { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--side-text); }
.worker-st small { color: #6b7686; margin-left: auto; }
.worker-st .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7686; }
.worker-st.on .dot { background: #3fb768; box-shadow: 0 0 0 3px rgba(63, 183, 104, .2); }
.worker-st.off { color: #f06464; }
.worker-st.off .dot { background: #f06464; animation: pulse 1.4s infinite; }

/* log ao vivo */
.live { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.live.on { color: var(--ok); }
.live.on .dot { background: var(--ok); animation: pulse 1.6s infinite; }
.live.off { color: var(--err); }
.live.off .dot { background: var(--err); }
pre.log div { min-height: 1.55em; }
pre.log .ll-err { color: #ff8585; }
pre.log .ll-warn { color: #f5c26b; }
pre.log .ll-ok { color: #7ee2a2; }

/* ícones */
.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.btn .i { width: 15px; height: 15px; }
.btn.icon { padding: 5px 7px; }

/* menu lateral */
.brand .logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #3b82f6, #6366f1); display: grid; place-items: center; color: #fff; }
.brand .logo .i { width: 17px; height: 17px; }
.nav-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #6b7686; padding: 14px 10px 4px; font-weight: 600; }
.nav-l { display: inline-flex; align-items: center; gap: 10px; }
.side a .i, .side button .i { opacity: .75; }
.side a.active .i { opacity: 1; color: #7aa2ff; }
.side a.active { box-shadow: inset 3px 0 0 #5b8cff; }

/* seletor de destino */
.dest-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dest-tab { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none !important; }
.dest-tab span { display: flex; flex-direction: column; line-height: 1.25; }
.dest-tab small { color: var(--muted); font-size: 11.5px; }
.dest-tab .i { width: 20px; height: 20px; color: var(--muted); }
.dest-tab:hover { border-color: var(--accent); }
.dest-tab.active { border-color: var(--accent); background: var(--accent-soft); }
.dest-tab.active .i { color: var(--accent); }
.dest-tab.add { justify-content: center; color: var(--muted); border-style: dashed; }

/* gerenciador de arquivos */
.fm { position: relative; }
.fm-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.crumb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; color: var(--text); font-weight: 500; text-decoration: none !important; word-break: break-all; }
a.crumb:hover { background: var(--panel-2); color: var(--accent); }
.crumb.cur { font-weight: 700; }
.crumbs .sep { width: 14px; height: 14px; color: var(--muted); }
.fm-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.search { position: relative; display: inline-flex; align-items: center; }
.search .i { position: absolute; left: 9px; color: var(--muted); width: 14px; height: 14px; }
.search input { padding: 6px 10px 6px 30px; width: 190px; font-size: 13px; }
.fm-mkdir { display: flex; gap: 8px; align-items: center; padding: 10px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.fm-mkdir input[type=text] { max-width: 280px; padding: 6px 10px; }
.fm-table td { padding: 8px 16px; }
.fm-table th { padding: 9px 16px; }
.fname { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; text-decoration: none !important; vertical-align: middle; }
a.fname:hover span:last-child { color: var(--accent); text-decoration: underline; }
.ficon { width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--panel-2); color: var(--muted); flex: none; }
.ficon .i { width: 18px; height: 18px; }
.ficon.dir { background: #fef3c7; color: #d97706; }
.ficon.gz { background: #dbeafe; color: #2563eb; }
.ficon.js { background: #ede9fe; color: #7c3aed; }
.ficon.big { width: 56px; height: 56px; border-radius: 14px; }
.ficon.big .i { width: 28px; height: 28px; }
@media (prefers-color-scheme: dark) {
  .ficon.dir { background: #3a2c0d; color: #f5b83d; }
  .ficon.gz { background: #142542; color: #6b9bff; }
  .ficon.js { background: #261a43; color: #a98bff; }
}
.tag { display: inline-block; margin-left: 8px; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 600; vertical-align: middle; }
.tag.muted-tag { background: var(--off-soft); color: var(--off); }
.row-actions { display: inline-flex; gap: 4px; opacity: .35; transition: opacity .12s; }
.row-actions form { margin: 0; }
.fm-table tr:hover .row-actions, .row-actions:focus-within { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }
.fm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--muted); text-align: center; }
.fm-empty strong { color: var(--text); font-size: 15px; }
.fm-empty.err strong { color: var(--err); }
.fm-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; flex-wrap: wrap; background: var(--panel-2); }
.upbar { position: relative; height: 30px; background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.upbar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); transition: width .2s; }
.upbar span { position: relative; line-height: 30px; padding: 0 16px; color: var(--accent); font-weight: 600; }
.upbar.err span { color: var(--err); }
.drop-overlay { display: none; position: absolute; inset: 0; border: 2px dashed var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); color: var(--accent); font-size: 16px; align-items: center; justify-content: center; gap: 10px; z-index: 5; pointer-events: none; }
.drop-overlay .i { width: 26px; height: 26px; }
.fm.dragging .drop-overlay { display: flex; }
input[type=file] { font: inherit; color: var(--text); max-width: 100%; }

/* auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth .card { width: 100%; max-width: 380px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .side .spacer { display: none; }
  .brand { padding: 4px 8px; width: 100%; }
  .main { padding: 16px; }
  .grid2 { grid-template-columns: 1fr; }
}

/* barra de progresso */
.progress { height: 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7c9dff); transition: width .4s; }

/* central de recuperação */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.mode { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.mode:hover { border-color: var(--accent); transform: translateY(-1px); }
.mode-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.mode-ic .i { width: 24px; height: 24px; }
.mode.danger .mode-ic { background: var(--err-soft); color: var(--err); }
.mode.danger:hover { border-color: var(--err); }
.mode-tx { display: flex; flex-direction: column; gap: 6px; }
.mode-tx strong { font-size: 16px; }
.mode-tx small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.mode-go { color: var(--accent); font-weight: 600; font-size: 13px; margin-top: 4px; }
.mode.danger .mode-go { color: var(--err); }
.stepn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; margin-right: 8px; vertical-align: 2px; }
.points { display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.point { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.point:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.point input { margin-top: 4px; }
.point span { display: flex; flex-direction: column; gap: 2px; }
.point small { color: var(--muted); }
.dr-sum { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.dr-sum div { display: flex; flex-direction: column; }
.dr-sum small { color: var(--muted); font-size: 11.5px; }
.btn.danger-bg { background: var(--err); border-color: var(--err); color: #fff; }
.checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.checklist li { padding-left: 26px; position: relative; }
.checklist li::before { position: absolute; left: 0; font-weight: 700; }
.checklist li.ok::before { content: "✔"; color: var(--ok); }
.checklist li.bad::before { content: "✖"; color: var(--err); }
.checklist li.warn::before { content: "!"; color: var(--warn); left: 6px; }
.checklist li.skip::before { content: "–"; color: var(--muted); left: 4px; }
.ok-card { border-color: var(--ok); }
.confirm-name { font-family: var(--mono); font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }
input.match { border-color: var(--ok) !important; outline: 2px solid var(--ok-soft); }
.reach { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
.reach.good { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.reach.good strong { color: var(--ok); }
.reach.bad { background: var(--err-soft); border-color: transparent; color: var(--err); }
input.warn-input { border-color: var(--warn) !important; }

/* agentes: visão central */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .agents { grid-template-columns: 1fr; } }
.acard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--off); }
.acard.h-ok { border-top-color: var(--ok); } .acard.h-running, .acard.h-installing { border-top-color: var(--run); }
.acard.h-down, .acard.h-error { border-top-color: var(--err); } .acard.h-no_contact { border-top-color: var(--warn); }
.ac-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ac-name { font-size: 17px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-host { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ac-ver { font-family: var(--mono); font-weight: 700; text-align: right; display: flex; flex-direction: column; }
.ac-ver small { font-weight: 400; font-size: 11px; color: var(--warn); }
.ac-ver.old { color: var(--warn); }
.ac-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; }
.ac-facts div { display: flex; flex-direction: column; } .ac-facts small { color: var(--muted); font-size: 11.5px; }
.ac-facts strong.warn { color: var(--warn); }
.ac-jobs { display: flex; flex-direction: column; }
.aj { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.aj-n, .aj-l { display: flex; flex-direction: column; gap: 2px; } .aj-n small, .aj-l small { color: var(--muted); font-size: 12px; }
.aj-l { align-items: flex-end; } .aj-run { color: var(--run) !important; }
.ac-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
.ac-msg.ok { color: var(--ok); } .ac-msg.err { color: var(--err); }
.ac-err { color: var(--err); font-size: 12.5px; background: var(--err-soft); padding: 8px 10px; border-radius: 8px; }
.ac-note { color: var(--warn); font-size: 12.5px; background: var(--warn-soft); padding: 8px 10px; border-radius: 8px; }
.ac-log { max-height: 240px; font-size: 11.5px; padding: 8px 10px; }
.aj-n .tag { align-self: flex-start; margin-left: 0; }

/* cópias adicionais */
.copies { display: grid; gap: 6px; }
.copy-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.copy-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.copy-row.is-primary { opacity: .45; }
.copy-row.is-primary::after { content: "destino principal"; font-size: 11.5px; color: var(--muted); }
.copy-ret { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.copy-ret input { width: 70px; padding: 4px 6px; }
.cloud-invoice-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* gastos por serviço e créditos */
.cost-split { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 860px) { .cost-split { grid-template-columns: 1fr; } }
.cost-rows { display: flex; flex-direction: column; color: var(--text); }
.cost-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.cost-row.muted { color: var(--muted); font-size: 12px; }
.cost-row.cost-sub { color: var(--muted); }
.cost-row.cost-total { border-bottom: 0; border-top: 2px solid var(--border); font-size: 14px; }
.cost-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* saúde da máquina (agente) */
.ac-sys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.meter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meter small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter strong { font-size: 13.5px; }
.meter .track { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.meter .fill { height: 100%; background: var(--ok); border-radius: 4px; transition: width .4s; }
.meter.warn .fill { background: var(--warn); } .meter.warn strong { color: var(--warn); }
.meter.err .fill { background: var(--err); } .meter.err strong { color: var(--err); }
.sys-find { display: flex; flex-direction: column; gap: 4px; }
.sys-find div { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); }
.sys-find div.error { background: var(--err-soft); color: var(--err); }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sys-box { background: var(--panel-2); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sys-box h3 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sys-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.sys-kv dt { color: var(--muted); } .sys-kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.spark { width: 100%; height: 46px; display: block; }
.spark path.l { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark path.a { fill: var(--accent-soft); stroke: none; }
.sys-tbl { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.sys-tbl td, .sys-tbl th { padding: 3px 4px; text-align: left; } .sys-tbl .r { text-align: right; }
.sys-tbl th { color: var(--muted); font-weight: 500; }
@media (max-width: 640px) { .ac-sys { grid-template-columns: repeat(2, 1fr); } }

/* ── Execução: "Onde este backup está" (origem → destinos) ── */
details.flow > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.flow > summary::-webkit-details-marker { display: none; }
details.flow > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; display: inline-block; }
details.flow[open] > summary::before { transform: rotate(90deg); }
details.flow > summary h2 { margin: 0; }
details.flow > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.flow-grid { display: grid; grid-template-columns: minmax(170px, 230px) 110px minmax(0, 1fr); align-items: center; margin-top: 16px; position: relative; }
.flow-origin, .flow-node { border: 1.5px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flow-origin { border-color: var(--text); }
.flow-lines { width: 100%; height: 100%; align-self: stretch; overflow: visible; }
.flow-lines path { fill: none; stroke-width: 1.8; }
.flow-targets { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flow-node.role-pri { border-color: var(--accent); background: var(--accent-soft); }
.flow-node.role-cpy { border-color: var(--copy); background: var(--copy-soft); }
.flow-node.st-failed, .flow-node.st-missing { border-color: var(--err); border-style: dashed; background: var(--err-soft); }
.flow-node.st-pruned { border-color: var(--off); border-style: dashed; background: var(--off-soft); }
.fn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-role { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fn-path { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.flow-rule { margin: 14px 0 0; }
@media (max-width: 760px) {
  .flow-grid { grid-template-columns: 1fr; gap: 10px; }
  .flow-lines { display: none; }
  .flow-targets { padding-left: 14px; border-left: 2px solid var(--border); }
}
.days.hours span { min-width: 44px; padding: 5px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* explorador de databases/tabelas (formulário de job) */
.tree-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tree-bar input[type=search] { flex: 1 1 220px; min-width: 0; max-width: 340px; padding: 5px 10px; }
.tree { border: 1px solid var(--border); border-radius: 8px; max-height: 480px; overflow: auto; background: var(--panel); }
.tree-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); min-width: 0; }
.tree-row:last-child { border-bottom: 0; }
.tree-row.db { cursor: pointer; background: var(--panel-2); font-weight: 500; }
.tree-row.db:hover { background: var(--accent-soft); }
.tree-row.tbl { padding-left: 46px; font-size: 13px; }
.tree-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tree-row .tag { margin-left: 0; }
.tree-row .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tree-row .meta { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree-row .ico { color: var(--muted); }
.tree-row.db .ico { color: var(--accent); }
.tree-row.off .name { color: var(--muted); text-decoration: line-through; }
.tree-row.off .ico { opacity: .5; }
.tree-row.sys { opacity: .7; }
.tree-row input[type=checkbox] { margin: 0; flex: none; }
.twisty { border: 0; background: none; padding: 0; width: 18px; height: 18px; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; }
.twisty .i { transition: transform .12s; width: 14px; height: 14px; }
.twisty.open .i { transform: rotate(90deg); }
.tree-summary { margin-top: 8px; font-size: 13px; }
details.adv { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
details.adv > summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
details.adv .field + .field { margin-top: 12px; }
@media (max-width: 640px) { .tree-row .meta { display: none; } .tree-row.tbl { padding-left: 30px; } }