:root {
  --nav1: #0c2563; --nav2: #1a4bc4; --nav-text: #d6e0f7;
  --bg: #f3f6fc; --panel: #ffffff; --text: #18213a; --muted: #5d6a84; --line: #e3e8f2;
  --th: #f4f6fb; --primary: #1d4ed8; --primary-d: #1b3fae; --primary-ink: #fff; --soft: #eaf0fe; --field: #cfd8ea;
  --pos: #157a34; --neg: #c0392b; --info-bg: #eaf0fe; --info-line: #cddbfb;
  --cur-head: #f4c430; --cur-bg: #fdf3c9; --cur-row: #fdf5d6;
  --sal-bg: #eaf0fe; --desp-bg: #fdebea; --rec-bg: #e6f5ea;
  --warn: #9a3412; --warn-bg: #ffe9cf; --radius: 14px; --shadow: 0 1px 2px #1a2b5a0f, 0 4px 14px #1a2b5a0d;
  color-scheme: light;
  --primary-solid: #1d4ed8; --pos-solid: #157a34; --neg-solid: #c0392b; --amber-solid: #b45309;
  --surface: #ffffff; --row-hover: #f8faff; --row-line: #edf0f7; --dup-bg: #fafbfe;
  --seg-hover: #ffffffa8; --wrap-hover: #dbe6fd; --focus-ring: #1d4ed829;
  --badge-bg: #dfe8fc; --badge-ink: #1e3a8a; --ok-bg: #cfe9d2; --ok-ink: #1b5e20; --off-bg: #e5e7eb; --off-ink: #4b5563;
  --chip-bg: #dbe3f3; --chip-line: #9aa9c6; --parc-bg: #c9d6f1; --parc-line: #aab9de; --parc-ink: #23407f;
  --bad-bg: #fbdcd8; --bad-ink: #9d2417; --bad-line: #f0a99f; --amber-bg: #fdecc8; --amber-ink: #8a4b00; --amber-line: #f0c48a;
  --chart-text: #55627a; --chart-grid: #d3dae6; --chart-line: #1d4ed8; --chart-pos: #2e7d32; --chart-neg: #b3191c;
  --chart-cur: #f4e3a6; --chart-cur-ink: #7a5a00; --cur-ink: #3a2a00;
  --head-ink: #2b3448; --sec-ink: #7a1d1d; --rec-ink: #1b5e20; --avg-bg: #e4e9f2; --avg-head: #d3dae6;
  --past-ink: #667490; --item-ink: #4a566d; --bar-bg: #cfd6e3; --meter-bg: #d3dae6;
  --toast-bg: #14213d; --toast-ink: #ffffff; --login-box: #f1f4fa; --cred-bg: #ffffff; --cred-line: #b7c2d6; --login-line: #c9d3e6;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nav1: #0a1430; --nav2: #12307a; --nav-text: #c3d0f0;
  --bg: #0f1626; --panel: #172033; --text: #e6ecf8; --muted: #9aa7c2; --line: #2a3652;
  --th: #1c2740; --primary: #7ea6ff; --primary-d: #2c4fc0; --primary-ink: #ffffff; --soft: #1f2c4d; --field: #3a4766;
  --pos: #4cc577; --neg: #ff7b6e; --info-bg: #1b2a4a; --info-line: #2f4373;
  --cur-head: #f4c430; --cur-bg: #3a3216; --cur-row: #2f2a17;
  --sal-bg: #1d2b4b; --desp-bg: #3a1e24; --rec-bg: #17332a;
  --warn: #ffb98a; --warn-bg: #3a2a18; --shadow: 0 1px 2px #0006, 0 4px 14px #0004;
  --primary-solid: #3a63e0; --pos-solid: #157a34; --neg-solid: #c0392b; --amber-solid: #b45309;
  --surface: #1d2740; --row-hover: #1c2842; --row-line: #263250; --dup-bg: #141c2e;
  --seg-hover: #ffffff14; --wrap-hover: #2a3b66; --focus-ring: #7ea6ff40;
  --badge-bg: #26365e; --badge-ink: #b9ccff; --ok-bg: #1c3d2b; --ok-ink: #8fe0a8; --off-bg: #2b3347; --off-ink: #aab3c7;
  --chip-bg: #25314f; --chip-line: #46557a; --parc-bg: #2a3a66; --parc-line: #4a5f96; --parc-ink: #bcd0ff;
  --bad-bg: #4a2328; --bad-ink: #ffb4a8; --bad-line: #7a3a40; --amber-bg: #473817; --amber-ink: #ffd28a; --amber-line: #7a5a25;
  --chart-text: #a7b3cc; --chart-grid: #34425f; --chart-line: #7ea6ff; --chart-pos: #5ac27a; --chart-neg: #ff7b72;
  --chart-cur: #4a3f1a; --chart-cur-ink: #ffd978; --cur-ink: #3a2a00;
  --head-ink: #c8d3ea; --sec-ink: #ffb4b4; --rec-ink: #8fe0a8; --avg-bg: #212c46; --avg-head: #2a3757;
  --past-ink: #7f8aa3; --item-ink: #aab6cf; --bar-bg: #34425f; --meter-bg: #2c3955;
  --toast-bg: #e6ecf8; --toast-ink: #0f1626; --login-box: #172033; --cred-bg: #1d2740; --cred-line: #3a4766; --login-line: #2a3652;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nav1: #0a1430; --nav2: #12307a; --nav-text: #c3d0f0;
    --bg: #0f1626; --panel: #172033; --text: #e6ecf8; --muted: #9aa7c2; --line: #2a3652;
    --th: #1c2740; --primary: #7ea6ff; --primary-d: #2c4fc0; --primary-ink: #ffffff; --soft: #1f2c4d; --field: #3a4766;
    --pos: #4cc577; --neg: #ff7b6e; --info-bg: #1b2a4a; --info-line: #2f4373;
    --cur-head: #f4c430; --cur-bg: #3a3216; --cur-row: #2f2a17;
    --sal-bg: #1d2b4b; --desp-bg: #3a1e24; --rec-bg: #17332a;
    --warn: #ffb98a; --warn-bg: #3a2a18; --shadow: 0 1px 2px #0006, 0 4px 14px #0004;
    --primary-solid: #3a63e0; --pos-solid: #157a34; --neg-solid: #c0392b; --amber-solid: #b45309;
    --surface: #1d2740; --row-hover: #1c2842; --row-line: #263250; --dup-bg: #141c2e;
    --seg-hover: #ffffff14; --wrap-hover: #2a3b66; --focus-ring: #7ea6ff40;
    --badge-bg: #26365e; --badge-ink: #b9ccff; --ok-bg: #1c3d2b; --ok-ink: #8fe0a8; --off-bg: #2b3347; --off-ink: #aab3c7;
    --chip-bg: #25314f; --chip-line: #46557a; --parc-bg: #2a3a66; --parc-line: #4a5f96; --parc-ink: #bcd0ff;
    --bad-bg: #4a2328; --bad-ink: #ffb4a8; --bad-line: #7a3a40; --amber-bg: #473817; --amber-ink: #ffd28a; --amber-line: #7a5a25;
    --chart-text: #a7b3cc; --chart-grid: #34425f; --chart-line: #7ea6ff; --chart-pos: #5ac27a; --chart-neg: #ff7b72;
    --chart-cur: #4a3f1a; --chart-cur-ink: #ffd978; --cur-ink: #3a2a00;
    --head-ink: #c8d3ea; --sec-ink: #ffb4b4; --rec-ink: #8fe0a8; --avg-bg: #212c46; --avg-head: #2a3757;
    --past-ink: #7f8aa3; --item-ink: #aab6cf; --bar-bg: #34425f; --meter-bg: #2c3955;
    --toast-bg: #e6ecf8; --toast-ink: #0f1626; --login-box: #172033; --cred-bg: #1d2740; --cred-line: #3a4766; --login-line: #2a3652;
  }
}
* { box-sizing: border-box; }
/* Tamanho da letra do app: a base (rem) é 15px em vez dos 16px do navegador e o texto corrido é 0,9375rem, ou seja, ~14px; tudo em rem acompanha */
html { font-size: 93.75%; }
body { margin: 0; font: .9375rem/1.5 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: .2rem 0 1rem; } h2 { font-size: 1.08rem; font-weight: 650; margin: 0 0 .6rem; }
a { color: var(--primary); }
.muted { color: var(--muted); } .pos { color: var(--pos); } .neg { color: var(--neg); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }

/* barra superior */
.top { display: flex; align-items: center; gap: 1.2rem; padding: 0 1.4rem; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--nav1), var(--nav2)); color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px #0c256340; }
.brand { font-weight: 700; display: flex; align-items: center; gap: .6rem; padding: .7rem 0; font-size: 1.05rem; }
.logo { width: 40px; height: 40px; display: block; }
.wordmark b { color: var(--primary); font-weight: inherit; } .top .wordmark b { color: #8fb0ff; }
.top .wordmark { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
nav button { background: none; border: 0; color: var(--nav-text); padding: .55rem .8rem; cursor: pointer; border-radius: 9px;
  display: flex; gap: .45rem; align-items: center; margin: .45rem 0; border-bottom: 2px solid transparent; }
nav button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
nav button:hover { background: #ffffff14; color: #fff; }
nav button.on { color: #fff; font-weight: 600; background: #ffffff26; border-bottom-color: transparent; }
/* linha de destaque embaixo do botão: cresce da esquerda para a direita ao passar o mouse (e fica na página atual) e recolhe para a direita ao sair */
nav button { position: relative; }
nav button::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 3px; background: #8fb0ff;
  transform: scaleX(0); transform-origin: right; transition: transform .28s ease; pointer-events: none; }
nav button:hover::after, nav button:focus-visible::after, nav button.on::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { nav button::after { transition: none; } }
.top .primary { background: #fff; border: 0; color: var(--primary-d); border-radius: 10px; padding: .55rem 1.1rem; cursor: pointer; font-weight: 700; box-shadow: 0 2px 8px #0c25634d; }
.top .primary:hover { background: #e8efff; }
.userbtn { background: none; border: 0; color: #fff; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .4rem; border-radius: 9px; }
.userbtn:hover { background: #ffffff14; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a6bff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.menu { position: absolute; right: 1rem; top: 3.6rem; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px #0004; min-width: 250px; padding: .5rem; z-index: 30; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .5rem .6rem; border-radius: 7px; cursor: pointer; }
.menu button:hover { background: var(--th); }
.menu label { padding: .3rem .6rem; }
.banner { background: var(--warn-bg); color: var(--warn); padding: .5rem 1rem; text-align: center; font-weight: 600; }
.banner button { margin-left: .8rem; }
main { padding: 1.2rem 1.4rem 2rem; max-width: 1500px; margin: 0 auto; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem 0 1.5rem; }

/* componentes */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.row { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.row.center { align-items: center; } .row.between { justify-content: space-between; }
.grow { flex: 1; }
.btn { background: var(--surface); border: 1px solid var(--field); border-radius: 10px; padding: .45rem 1rem; cursor: pointer; font-weight: 500; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { border-color: var(--primary); background: var(--soft); color: var(--primary); }
.btn.primary { background: var(--primary-solid); color: var(--primary-ink); border-color: var(--primary-solid); font-weight: 600; box-shadow: 0 2px 6px #1d4ed84d; }
.btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.btn.danger { color: var(--neg); } .btn.danger:hover { background: var(--desp-bg); border-color: var(--neg); color: var(--neg); } .btn.small { padding: .2rem .7rem; font-size: .82rem; border-radius: 8px; }
.btn.on { background: var(--primary-solid); color: #fff; border-color: var(--primary-solid); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
/* grupo de botões (período, visões) e seletor de opções (choice): um só controle com a opção ativa preenchida */
.seg, .choice { display: inline-flex; gap: 2px; padding: 3px; background: var(--soft); border-radius: 12px; vertical-align: middle; }
.seg .btn, .choice .opt { border: 0; background: transparent; border-radius: 9px; padding: .38rem .95rem; margin: 0; color: var(--text); box-shadow: none; font-weight: 500; }
.seg .btn:hover, .choice .opt:hover { background: var(--seg-hover); color: var(--primary); border: 0; }
.seg .btn.on, .choice .opt.on { background: var(--c, var(--primary-solid)); color: #fff; font-weight: 600; box-shadow: 0 1px 4px #1a2b5a33; }
.choice { display: flex; width: fit-content; max-width: 100%; margin-top: .2rem; }
.choice.wrap { flex-wrap: wrap; width: 100%; background: transparent; padding: 0; gap: .4rem; }
.choice.wrap .opt { background: var(--soft); border-radius: 99px; }
.choice.wrap .opt:not(.on):hover { background: var(--wrap-hover); }
.choice.wrap .opt.on { background: var(--c, var(--primary-solid)); color: #fff; box-shadow: 0 1px 4px #1a2b5a33; }
.choice .opt { font: inherit; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.choice .opt:not(.on) { --c: var(--primary); }
.choice.off { opacity: .55; } .choice.off .opt { cursor: default; }
.choice.wrap .opt[style*="--c"]:not(.on) { color: color-mix(in srgb, var(--c) 75%, var(--text)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.drop { border: 2px dashed var(--field); border-radius: var(--radius); padding: 2rem 1rem; text-align: center; cursor: pointer; background: var(--th); transition: border-color .12s, background .12s; }
.drop:hover { border-color: var(--primary); background: var(--soft); } .drop .big { font-size: 1.1rem; font-weight: 600; color: var(--primary); margin-bottom: .2rem; }
.scroll.tall { max-height: 52vh; overflow: auto; margin: .6rem 0; } .scroll.tall thead th { position: sticky; top: 0; z-index: 1; }
tr.dup td { color: var(--muted); background: var(--dup-bg); } input.tiny { padding: .2rem .35rem; font-size: .85rem; width: 9.5rem; }
input, select, textarea { background: var(--surface); border: 1px solid var(--field); border-radius: 10px; padding: .45rem .65rem; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
input[type=checkbox] { width: auto; accent-color: var(--primary); } input[type=color] { padding: 2px; height: 2rem; width: 2.8rem; cursor: pointer; }
.field { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); } .field > input, .field > select, .field > textarea { display: block; width: 100%; margin-top: .2rem; color: var(--text); font-size: .95rem; font-weight: 400; }
.err { color: var(--neg); min-height: 1.3em; font-size: .9rem; }
.info { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 12px; padding: .65rem .9rem; font-size: .9rem; margin: .8rem 0; }
.badge { display: inline-block; font-size: .72rem; padding: .05rem .55rem; border-radius: 99px; background: var(--badge-bg); color: var(--badge-ink); }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); } .badge.off { background: var(--off-bg); color: var(--off-ink); } .badge.warn { background: var(--amber-bg); color: var(--amber-ink); }
.chip { display: inline-block; font-size: .78rem; padding: 0 .55rem; border-radius: 99px; border: 1px solid var(--chip-line); background: var(--chip-bg); }
.chip.card { --c: #6b7280; color: color-mix(in srgb, var(--c) 70%, var(--text)); background: color-mix(in srgb, var(--c) 14%, var(--panel)); border-color: color-mix(in srgb, var(--c) 45%, var(--panel)); font-weight: 600; }
.chip.parc { background: var(--parc-bg); border-color: var(--parc-line); color: var(--parc-ink); font-size: .72rem; margin-left: .3rem; }

/* tabelas */
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .5rem .8rem; border-bottom: 1px solid var(--row-line); text-align: left; }
tbody tr:hover td { background: var(--row-hover); } tbody tr:last-child td { border-bottom: 0; }
th { font-size: .74rem; background: var(--th); font-weight: 600; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; }
tr.curmonth td { background: var(--cur-row); }
tr.past td { color: var(--past-ink); }
a.edit { color: var(--muted); cursor: pointer; font-size: .85rem; text-decoration: none; } a.edit:hover { color: var(--primary); text-decoration: underline; }

/* visão geral */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin: .9rem 0; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; box-shadow: var(--shadow); }
.kpi .l { font-size: .78rem; color: var(--muted); font-weight: 500; } .kpi .v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem; align-items: start; } @media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.inv { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .5rem; align-items: center; padding: .35rem 0; }
.chartbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.chart { width: 100%; height: auto; display: block; } .chart text { font-size: 11px; fill: var(--chart-text); }
.bud { display: grid; grid-template-columns: 11rem 1fr minmax(15rem, 24rem); gap: .8rem; align-items: center; padding: .3rem 0; }
@media (max-width: 800px) { .bud { grid-template-columns: 1fr; gap: .2rem; padding: .5rem 0; } }
.bname { font-weight: 500; } .bval { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.budbar { height: 12px; border-radius: 8px; background: var(--soft); overflow: hidden; } .budbar i { display: block; height: 100%; border-radius: 8px; background: var(--pos); }
.budbar.atencao i { background: var(--amber-solid); } .budbar.estourado i { background: var(--neg); }
.budtag { display: inline-block; font-size: .72rem; padding: 0 .5rem; border-radius: 99px; font-weight: 600; background: var(--ok-bg); color: var(--ok-ink); }
.budtag.atencao { background: var(--amber-bg); color: var(--amber-ink); } .budtag.estourado { background: var(--bad-bg); color: var(--bad-ink); }
.chip.late { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line); font-weight: 600; } .chip.today { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-line); font-weight: 600; }
.chip.tag { background: var(--parc-bg); border-color: var(--parc-line); color: var(--parc-ink); font-size: .72rem; margin-left: .1rem; }
.tagsinput { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; padding: .3rem .5rem; background: var(--surface); border: 1px solid var(--field); border-radius: 10px; }
.tagsinput:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.tagsinput input { flex: 1; min-width: 9rem; border: 0; padding: .15rem 0; box-shadow: none; background: transparent; }
.tagsinput input:focus { box-shadow: none; }
.tagchips { display: contents; } .tagsinput .chip.tag { font-size: .8rem; padding: 0 .2rem 0 .55rem; margin: 0; }
.tagsinput .chip .x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .3rem; border-radius: 99px; }
.tagsinput .chip .x:hover { background: #00000026; }
.chip.pend { background: var(--parc-bg); color: var(--parc-ink); border-color: var(--parc-line); }
.pay { display: grid; grid-template-columns: 3.2rem 1fr auto auto; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--row-line); } .pay:last-of-type { border-bottom: 0; }
.pay.late .when { color: var(--neg); font-weight: 600; } .pay .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.info.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }
.info.attn { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.budwarn { background: var(--warn-bg); border-color: var(--amber-line); color: var(--warn); font-weight: 500; }
.legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--muted); padding: .3rem 0 0 2rem; }
.legend i { display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border-radius: 2px; vertical-align: middle; }

table.mx { min-width: 100%; } table.mx th { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--head-ink); } table.mx th, table.mx td { padding: .3rem .65rem; }
table.mx th.m { text-align: center; line-height: 1.15; font-weight: 600; } table.mx td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mx th:first-child, table.mx td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); min-width: 14rem; }
table.mx th:first-child { background: var(--th); }
table.mx .cur { background: var(--cur-bg) !important; } table.mx th.cur { background: var(--cur-head) !important; color: var(--cur-ink); }
table.mx th.cur small { display: block; font-size: .65rem; font-weight: 700; text-align: right; }
table.mx .avg { background: var(--avg-bg); border-left: 1px solid var(--line); } table.mx th.avg { background: var(--avg-head); } table.mx td.avg { font-variant-numeric: tabular-nums; }
table.mx .past { color: var(--past-ink); } table.mx th.past { color: var(--past-ink); }
table.mx tr.sum td { background: var(--sal-bg); font-weight: 600; } table.mx tr.sum td:first-child { background: var(--sal-bg); }
table.mx tr.sec td { background: var(--desp-bg); font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--sec-ink); }
table.mx tr.sec.rec td { background: var(--rec-bg); color: var(--rec-ink); }
table.mx tr.grp td:first-child { font-weight: 600; cursor: pointer; }
table.mx tr.grp .bar { height: 3px; border-radius: 2px; margin-top: 2px; background: var(--bar-bg); } table.mx tr.grp .bar i { display: block; height: 100%; border-radius: 2px; }
table.mx tr.item td { font-size: .85rem; color: var(--item-ink); } table.mx tr.item td:first-child { padding-left: 1.8rem; cursor: default; }
.var { font-size: .62rem; font-weight: 700; margin-left: .3rem; } .var.good { color: var(--pos); } .var.bad { color: var(--neg); }
.cell-link { cursor: pointer; border-bottom: 1px solid currentColor; } .cell-link:hover { color: var(--primary); }
table.mx tr.fat td { font-weight: 700; background: var(--sal-bg); } table.mx tr.fat td:first-child { background: var(--sal-bg); }
/* tela de Cartões: tudo ganha a cor do cartão escolhido (seletor, botão, borda, cabeçalho e fatura) */
.cardzone { --c: #6b7280; --ink: #fff; }
.cardzone .cardsel { border: 2px solid var(--c); box-shadow: inset 6px 0 0 var(--c); padding-left: 1rem; }
.cardzone .btn.pin { border-color: var(--c); color: var(--c); }
.cardzone .btn.pin.on { background: color-mix(in srgb, var(--c) 18%, var(--panel)); font-weight: 600; }
.cardzone .btn.primary { background: var(--c); border-color: var(--c); color: var(--ink); }
.cardzone .cardtop { border: 3px solid var(--c); border-top-width: 6px; }
.cardzone table.mx thead th { background: color-mix(in srgb, var(--c) 16%, var(--th)); }
.cardzone table.mx th:first-child { background: color-mix(in srgb, var(--c) 16%, var(--th)); }
.cardzone table.mx tr.fat td, .cardzone table.mx tr.fat td:first-child { background: color-mix(in srgb, var(--c) 20%, var(--sal-bg)); }
.cardzone table.mx .cell-link:hover { color: var(--c); }

/* modal e login */
.overlay { position: fixed; inset: 0; background: #0a163f80; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal { background: var(--panel); border-radius: 18px; padding: 1.6rem 1.7rem; width: min(660px, 100%); max-height: 94vh; overflow: auto; box-shadow: 0 20px 60px #0a163f59; }
.modal h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.form { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem .8rem; } .form .c2 { grid-column: span 2; } .form .c3 { grid-column: span 3; } .form .c4 { grid-column: span 4; } .form .c6 { grid-column: 1 / -1; }
.actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; align-items: center; }
.rules { display: grid; gap: .1rem; font-size: .85rem; margin: .5rem 0; } .rules .no { color: var(--neg); } .rules .yes { color: var(--pos); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(ellipse at 20% 30%, #1e45c9 0%, #0b1d57 40%, #050b1e 100%); }
.login .box { background: var(--login-box); border-radius: 18px; padding: 2rem 2.3rem 1.6rem; width: min(470px, 100%); text-align: center; }
.login .logo { width: 84px; height: 84px; margin: 0 auto .2rem; }
.login h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.login .slogan { color: var(--primary); font-weight: 500; font-size: .95rem; margin: .1rem 0 1rem; } .login form { display: grid; gap: .8rem; text-align: left; margin-top: 1rem; }
.login .btn.primary { width: 100%; padding: .65rem; }
.login textarea { width: 100%; font-family: Consolas, monospace; font-size: .8rem; resize: vertical; }
.login .cred { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; align-items: center; text-align: left; background: var(--cred-bg); border: 1px solid var(--cred-line); border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0; font-size: .9rem; }
.login .cred span { color: var(--muted); font-size: .8rem; } .login .cred code { font-family: Consolas, monospace; font-size: 1rem; user-select: all; word-break: break-all; }
.login .row { display: flex; gap: .5rem; justify-content: center; margin-bottom: .6rem; } .login .row .btn.primary { width: auto; padding: .3rem .85rem; }
.login ol { text-align: left; font-size: .85rem; padding-left: 1.2rem; margin: .5rem 0; }
.login .firstrun { border-top: 1px solid var(--login-line); margin-top: 1.1rem; padding-top: .6rem; } .login .firstrun h3 { margin: 0 0 .3rem; } .login .firstrun p { margin: .2rem 0; font-size: .88rem; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tabs button { background: none; border: 0; padding: .65rem 1.1rem; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; font-weight: 500; margin-bottom: -1px; }
.tabs button:hover { color: var(--primary); }
.tabs button.on { color: var(--primary); border-color: var(--primary); font-weight: 650; }
table.plain th, table.plain td { padding: .35rem .6rem; } table.plain.wide { min-width: 1200px; } table.plain.wide td { white-space: nowrap; } table.plain td.strong { font-weight: 700; }
table.edit { table-layout: fixed; width: 100%; }
table.edit th, table.edit td { padding: .2rem .4rem; border: 0; } table.edit input { width: 100%; min-width: 0; text-align: right; }
.two > * { min-width: 0; }
table.edit thead th { background: var(--th); }
.panel table.edit { margin-bottom: .3rem; }
.meter { height: 10px; background: var(--meter-bg); border-radius: 6px; overflow: hidden; margin: .4rem 0; } .meter i { display: block; height: 100%; }
tr.sec-row td { background: var(--th); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--head-ink); }
.alloc { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--line); margin: .4rem 0; } .alloc i { display: block; height: 100%; }
.about h4 { font-size: .95rem; margin: .9rem 0 .15rem; } .about ul, .about ol { margin: .2rem 0 .6rem; padding-left: 1.3rem; } .about li { margin: .15rem 0; }
.privacy { max-height: 52vh; overflow: auto; padding-right: .5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: .6rem 0; }
.privacy h3 { font-size: .95rem; margin: .8rem 0 .15rem; } .privacy p { margin: 0 0 .3rem; font-size: .9rem; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-ink); padding: .6rem 1.1rem; border-radius: 9px; z-index: 80; }
/* Topo sempre em uma linha: vai encolhendo conforme a largura. */
.top { flex-wrap: nowrap; } .top > * { flex-shrink: 0; } nav { min-width: 0; flex-wrap: nowrap; flex-shrink: 1; }
.brand, nav button, .top .primary, .userbtn { white-space: nowrap; }
/* Níveis de compactação do topo, escolhidos por fitTopbar() (app.js) conforme o espaço que sobra: o nome do usuário pode ser comprido,
   então não dá para fixar em larguras de tela. 1: mais justo; 2: sem o nome do usuário; 3: só ícones (e o rótulo da página atual). */
.uname-t { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top.tb1, .top.tb2, .top.tb3 { gap: .6rem; padding: 0 .8rem; }
.top.tb1 .brand, .top.tb2 .brand, .top.tb3 .brand { font-size: .95rem; }
.top.tb1 nav button, .top.tb2 nav button, .top.tb3 nav button { padding: .5rem .55rem; font-size: .9rem; gap: .35rem; }
.top.tb1 .primary, .top.tb2 .primary, .top.tb3 .primary { padding: .5rem .8rem; font-size: .9rem; }
.top.tb2 .uname, .top.tb3 .uname { display: none; }
.top.tb2 nav button, .top.tb3 nav button { padding: .5rem .5rem; font-size: .88rem; gap: .3rem; }
.top.tb3 nav button { padding: .5rem .6rem; } .top.tb3 nav button .lbl { display: none; } .top.tb3 nav button.on .lbl { display: inline; }
@media (max-width: 1000px) { .uname { display: none; } .top .primary .lbl { display: none; } .top .primary { padding: .45rem .75rem; font-size: 1.05rem; line-height: 1; } }
@media (max-width: 820px) { .brandtxt { display: none; } .top { gap: .35rem; padding: 0 .5rem; } }
@media (max-width: 520px) {
  nav button { padding: .5rem .4rem; } nav button.on .lbl { display: none; } nav button svg { width: 18px; height: 18px; }
  .logo { width: 34px; height: 34px; } .login .logo { width: 84px; height: 84px; } .menu { right: .4rem; }
}@media (max-width: 700px) { .form > * { grid-column: 1 / -1 !important; } main { padding: .8rem; } .top { gap: .4rem; } }
.accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.acct { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c, #6b7280); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow); }
.acct.on { border-color: var(--c, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #6b7280) 45%, transparent), var(--shadow); }
.acct.off { opacity: .7; } .acct .bal { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.login .chk { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; text-align: left; }
.login .chk input { margin-top: .2rem; }
.login .row .btn.small { width: auto; }
.about .fold { margin: .5rem 0; border-top: 1px solid var(--line); padding-top: .4rem; } .about .fold > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.overlay .cred { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; align-items: center; background: var(--cred-bg); border: 1px solid var(--cred-line); border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0; font-size: .9rem; }
.overlay .cred span { color: var(--muted); font-size: .8rem; } .overlay .cred code { font-family: Consolas, monospace; font-size: 1rem; user-select: all; word-break: break-all; }
.qrbox { display: grid; place-items: center; margin: .6rem 0; } .qrbox svg { max-width: 100%; height: auto; border-radius: 8px; }
pre.reservas { background: var(--cred-bg); border: 1px solid var(--cred-line); border-radius: 10px; padding: .7rem .9rem; font: 1.05rem/1.7 Consolas, monospace; text-align: center; user-select: all; margin: .6rem 0; }
.turnstile { display: grid; place-items: center; min-height: 0; }