:root{
  --bg:#f2f2f2;
  --panel:#ffffff;
  --text:#222;
  --muted:#666;
  --line:#d7d7d7;
  --line2:#ececec;
  --btn:#f7f7f7;
  --btnline:#cfcfcf;

  --green:#2aa84a;
  --yellow:#d6b100;
  --orange:#d07a00;
  --red:#cc2b2b;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.hidden{ display:none !important; }

/* ===== Header ===== */
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}

.brand__title{ font-weight:800; letter-spacing:.2px; }
.brand__sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.top__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.lang select{
  height:30px;
  border:1px solid var(--btnline);
  background:#fff;
  padding:4px 6px;
}

/* ===== Layout ===== */
.wrap{ max-width:980px; margin:18px auto; padding:0 14px 40px; }

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px;
  margin-bottom:14px;
}
.panel--tight{ padding:10px 14px; }

.panel__title{ font-weight:800; margin-bottom:6px; }
.panel__sub{ font-size:12px; color:var(--muted); }

/* ===== Fields ===== */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > span{ font-size:12px; color:var(--muted); }

.field input,
.field select{
  height:34px;
  padding:6px 10px;
  border:1px solid var(--btnline);
  background:#fff;
  outline:none;
  width:100%;
  min-width:0;
}

.field--inline{ display:flex; flex-direction:row; align-items:center; gap:8px; }
.field--inline > span{ min-width:90px; }
.field--inline input{ width:150px; }

.field--mini input,
.field--mini select{ width:140px; }

/* ===== Auth ===== */
.authgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
@media (max-width:720px){
  .authgrid{ grid-template-columns:1fr; }
}

.remember{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}

/* ===== Buttons ===== */
.btn{
  height:34px;
  padding:0 12px;
  border:1px solid var(--btnline);
  background:var(--btn);
  cursor:pointer;
  white-space:nowrap;
}
.btn--ghost{ background:#fff; }
.btn--ghost.danger{ border-color:#e1b1b1; color:#9a1e1e; }

.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn--active{
  background:#e9e9e9 !important;
  border-color:#bdbdbd !important;
  color:#333 !important;
}

/* ===== Messages ===== */
.msg{ margin-top:10px; font-size:12px; color:var(--muted); }
.msg.ok{ color:#1f7a36; }
.msg.error{ color:#b12424; }

/* ===== Bar ===== */
.bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.bar__left{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.bar__right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-end;
}
@media (max-width:720px){
  .bar{ flex-direction:column; align-items:stretch; }
  .bar__left,.bar__right{ width:100%; justify-content:flex-start; }
  .bar__right .btn{ flex:1; }
}

.exportbar{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* ===== Sorting headers ===== */
.sortbtn{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--muted);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sortbtn:hover{ color:#333; }
.sortbtn--right{ width:100%; justify-content:flex-end; }

.arrow{ font-size:12px; color:#888; }
.arrow.active{ color:#111; font-weight:800; }

/* ===== Intro (SEO + explicação) ===== */
.intro .panel__sub{ margin-bottom: 12px; }

.intro__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.intro__card{
  border:1px solid var(--line);
  background:#fff;
  padding:12px;
}
.intro__h{
  font-weight:900;
  margin-bottom:6px;
}
.intro__p{
  margin:0;
  font-size:13px;
  color:#333;
  line-height:1.45;
}
.intro__cta{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}
@media (max-width: 720px){
  .intro__grid{ grid-template-columns: 1fr; }
}

/* ===== Table ===== */
.table{ border-top:1px solid var(--line); margin-top:10px; }

.thead,.trow{
  display:grid;
  grid-template-columns: 38px 60px 1fr 140px 110px 70px 44px;
  align-items:center;
}

.thead{
  background:#fafafa;
  border-bottom:1px solid var(--line);
  height:38px;
  font-size:12px;
  color:var(--muted);
}

.th, .td{ padding:0 10px; min-width:0; }
.th.check,.td.check{ display:flex; justify-content:center; }
.th.dot,.td.dot{ display:flex; justify-content:center; align-items:center; }

.selectall{ display:flex; align-items:center; gap:10px; }
.selectall input{ width:16px; height:16px; }

.tbody .rowitem{
  border-bottom:1px solid var(--line2);
  height:42px;
}
.tbody .rowitem:hover{ background:#fcfcfc; }

.dcbox{
  width:26px;
  height:26px;
  border:1px solid var(--btnline);
  display:grid;
  place-items:center;
  font-weight:800;
  color:#444;
  background:#fff;
  margin-left:6px;
}

.namecell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.namecell span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.valuecell{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  font-variant-numeric: tabular-nums;
  gap:6px;
}
.valuecell .sign{ color:var(--muted); font-weight:800; margin-right:2px; }

.td.date{
  font-size:12px;
  color:var(--muted);
  font-variant-numeric: tabular-nums;
}

.xbtn{
  width:28px;
  height:28px;
  border:1px solid var(--btnline);
  background:#fff;
  cursor:pointer;
  line-height:26px;
  text-align:center;
  font-size:16px;
  color:#444;
}
.xbtn:hover{ background:#f7f7f7; }

.thead .th.dot{
  width:auto !important;
  height:auto !important;
  border:none !important;
  background:transparent !important;
}

/* ===== Balls ===== */
.ball{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(0,0,0,.20);
  background:var(--red);
}
.ball.red{ background: var(--red); }
.ball.green{ background: var(--green); }

/* ===== Totals ===== */
.totals{
  margin-top:10px;
  border-top:1px solid var(--line);
}
.totalsRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}
.totalsRow .block{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-variant-numeric: tabular-nums;
}
.totalgeral{
  border-top:1px solid var(--line2);
  padding-top:10px;
  padding-bottom:6px;
}
.tg-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  padding:10px 8px;
}
.tg-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.tag{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border:1px solid var(--btnline);
  display:grid;
  place-items:center;
  font-weight:900;
  background:#fff;
}
.tg-title{ color:#111; }
.tg-right{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:10px;
  flex:1;
  text-align:right;
  white-space:nowrap;
}
.tg-value{
  font-size:26px;
  font-weight:800;
  letter-spacing:.2px;
}
.tg-pct{ font-size:14px; color:var(--muted); }
.bigdot{
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:var(--green);
}

/* ===== Add row ===== */
.addrow{
  display:grid;
  grid-template-columns: 80px 1fr 160px 210px 120px;
  gap:10px;
  align-items:end;
}
@media (max-width:860px){
  .addrow{ grid-template-columns:1fr 1fr; }
  .field--mini input,.field--mini select{ width:100%; }
}
@media (max-width:520px){
  .addrow{ grid-template-columns:1fr; }
}

/* ===== Multi delete ===== */
.multidel{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.multidel input{
  width:16px;
  height:16px;
  cursor:pointer;
}
.mdel{
  width:16px;
  height:16px;
  cursor:pointer;
}

/* ===== Edit highlight ===== */
.rowitem.selected{ background:#f5f8ff; }

/* ===== Export selection ===== */
.rowitem.export-selected{ background:#eef3ff; }
.expchk{ width:16px; height:16px; cursor:pointer; }

/* ===== Modal ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}
.modal__panel{
  position:relative;
  width:min(520px, calc(100% - 28px));
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px;
  box-shadow:0 10px 35px rgba(0,0,0,.20);
}
.modal__title{ font-weight:900; margin-bottom:4px; }
.modal__sub{ font-size:12px; color:var(--muted); margin-bottom:12px; }
.modal__form{ display:grid; gap:10px; }
.modal__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}

/* month icon */
input[type="month"]{
  appearance:auto;
  -webkit-appearance:auto;
}
input[type="month"]::-webkit-calendar-picker-indicator{
  opacity:1;
  display:block;
  cursor:pointer;
}

/* ===== Tutorial ===== */
.tuto{
  position:fixed;
  inset:0;
  z-index:2000;
}
.tuto__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.tuto__hi{
  position:absolute;
  border:2px solid rgba(255,255,255,.9);
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.18);
  pointer-events:none;
  display:none;
}
.tuto__bubble{
  position:absolute;
  max-width:min(560px, calc(100% - 20px));
  background:#ff6a00;
  color:#fff;
  border-radius:14px;
  padding:14px 14px 12px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.tuto__title{
  font-weight:900;
  margin-bottom:6px;
  letter-spacing:.2px;
}
.tuto__text{
  font-size:14px;
  line-height:1.35;
  white-space: pre-line;
}
.tuto__controls{
  position:fixed;
  left:0;
  right:0;
  bottom:14px;
  z-index:2003;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}
.tuto__next{
  width:74px;
  height:74px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:34px;
  font-weight:900;
  cursor:pointer;
}
.tuto__next:hover{ background:rgba(255,255,255,.26); }
.tuto__skip{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.92);
  font-size:13px;
  cursor:pointer;
  text-decoration:underline;
}
.tuto__skip:hover{ color:#fff; }

/* ===== Footer ===== */
.footer{
  margin-top:18px;
  padding:16px 0 6px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.footer__inner{
  max-width:980px;
  margin:0 auto;
  padding:0 14px;
}
.footer__title{
  font-weight:900;
  color:#222;
  margin-bottom:6px;
}
.footer__desc{
  margin:0 0 10px 0;
  line-height:1.45;
}
.footer__links{
  margin:10px 0 0 0;
  padding-left:18px;
  line-height:1.6;
}
.footer__links a{
  color:#2b59c3;
  text-decoration:underline;
}

/* ===== Support ===== */
.support{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.support__title{
  font-weight:900;
  color:#222;
  margin-bottom:6px;
}
.support__text{
  margin:0 0 10px 0;
  line-height:1.45;
}
.support__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:start;
}
.support__btn{
  display:inline-block;
  padding:10px 12px;
  border:1px solid var(--btnline);
  background:#fff;
  color:#111;
  text-decoration:none;
  text-align:center;
}
.support__btn:hover{ background:#f7f7f7; }

.support__mbway{
  border:1px solid var(--line);
  padding:10px 12px;
  background:#fff;
}
.support__mbwayLabel{
  font-weight:800;
  margin-bottom:6px;
  color:#222;
}
.support__mbwayRow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.support__mbwayCode{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding:6px 8px;
  border:1px solid var(--line2);
  background:#fafafa;
  font-size:12px;
  border-radius:6px;
}
.support__copy{
  height:30px;
  padding:0 10px;
}
.support__hint{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 720px){
  .support__actions{ grid-template-columns: 1fr; }
}

/* ===== Mobile table tweaks ===== */
@media (max-width:520px){
  .thead, .trow{
    grid-template-columns: 30px 42px 1fr 86px 34px 30px;
  }
  .td.date, .th.date{ display:none !important; }

  .th, .td{ padding: 0 6px; }
  .th.dc, .td.dc{ padding-left: 2px; padding-right: 2px; }
  .th.x,  .td.x { padding-left: 2px; padding-right: 2px; }

  .td.dc{ justify-content:flex-start !important; }
  .dcbox{ margin-left:0 !important; }

  .td.x, .th.x{ justify-content:flex-end !important; }

  .xbtn{
    width:26px;
    height:26px;
    line-height:24px;
  }

  .tuto__bubble{
    max-width: calc(100% - 16px);
    border-radius:12px;
    padding:12px 12px 10px;
  }
  .tuto__text{ font-size:13px; }
  .tuto__next{ width:68px; height:68px; font-size:32px; }
}