:root{
  --bg: #f6f7fb;
  --surface: #fff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #111827;
  --danger: #991b1b;

  --r-md: 10px;
  --r-sm: 8px;

  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
}

*{ box-sizing:border-box; }
body{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin:0; background:var(--bg); color:var(--text); }

.container{ max-width: 980px; margin: 18px auto; padding: 0 16px; }
main.container{ display:block; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.row{ display:flex; gap: var(--s-2); flex-wrap: wrap; }
.row > *{ flex:1; min-width: 220px; }

label{ display:block; font-size: 12px; margin-bottom: 4px; color:#374151; }
input, select, textarea{
  width:100%;
  padding: 10px;
  border-radius: var(--r-sm);
  border:1px solid #d1d5db;
}
textarea{ min-height: 96px; resize: vertical; }

a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border:1px solid var(--primary);
  background:#fff;
  color:var(--primary);
  text-decoration:none;
  cursor:pointer;
}
button{ padding: 10px 12px; border-radius: var(--r-sm); border:1px solid var(--primary); background: var(--primary); color:#fff; cursor:pointer; }
button.secondary{ background:#fff; color:var(--primary); }
a.btn.primary, button.primary, .btn.primary{ background:var(--primary); color:#fff; }
a.btn.secondary, button.secondary, .btn.secondary{ background:#fff; color:var(--primary); }
.btn.danger, button.danger{ background:var(--danger); border-color: var(--danger); color:#fff; }
button[disabled], .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }

.actions{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }

.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
table{ width:100%; border-collapse: collapse; min-width: 720px; }
th, td{ text-align:left; padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }

.flash{ padding: 10px; border-radius: var(--r-sm); margin-bottom: 12px; }
.flash.error{ background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d; }
.flash.success{ background:#dcfce7; border:1px solid #bbf7d0; color:#14532d; }

.pill{ display:inline-block; padding: 2px 8px; border-radius: 999px; border:1px solid var(--border); font-size: 12px; color:#374151; }
.muted{ color:var(--muted); }

/* A11y: foco visível */
:focus-visible{ outline: 3px solid rgba(17,24,39,.35); outline-offset: 2px; }

/* Skip link */
.skip{ position:absolute; left:-999px; top:8px; background:#fff; padding:8px 10px; border-radius: var(--r-sm); border:1px solid var(--border); }
.skip:focus{ left: 16px; z-index: 9999; }

/* Topbar */
.topbar{ background: var(--primary); color:#fff; padding: 12px 16px; }
.topbar__inner{
  max-width: 980px;
  margin:0 auto;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.brand{ color:#fff; text-decoration:none; margin-right: 10px; white-space: nowrap; }
.nav{ display:flex; gap: 10px; flex-wrap:wrap; }
.nav a{ color:#fff; text-decoration:none; padding: 6px 8px; border-radius: 8px; }
.nav a[aria-current="page"]{ background: rgba(255,255,255,.12); }
.topbar__right{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.topbar__right form{ margin:0; }

/* Tabs/Chips */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration:none;
  color: var(--text);
}
.tab[aria-current="page"]{ border-color: var(--primary); }

/* Modal (confirm) */
.modal-backdrop{
  position: fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 9999;
}
.modal-backdrop[data-open="true"]{ display:flex; }
.modal{
  width: min(520px, 100%);
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  padding: 16px;
}
.modal__title{ margin:0 0 6px; font-size: 18px; }
.modal__body{ margin:0 0 14px; color:#374151; }
.modal__actions{ display:flex; gap: 8px; justify-content:flex-end; flex-wrap:wrap; }


/* Transactions - mobile cards */
.tx-cards{ display:none; }
.tx-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}
.tx-card__top{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; }
.tx-card__date{ font-weight:700; }
.tx-card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.tx-card__amount{ font-weight:800; font-size:18px; white-space:nowrap; }
.tx-card__body{ margin-top: 10px; display:grid; gap:8px; }
.tx-card__row{ display:flex; justify-content:space-between; gap: 10px; }
.tx-card__desc{ margin-top: 2px; color: #111827; }
.tx-card__actions{ margin-top: 12px; }

.mark-posted__form{
  display:none;
  gap:6px;
  align-items:center;
  margin-top: 8px;
  flex-wrap:wrap;
}
.mark-posted__form input[type="date"]{ max-width: 160px; }

/* Switch table/cards for mobile */
@media (max-width: 640px){
  .tx-table{ display:none; }
  .tx-cards{ display:block; }
  table{ min-width: 0; }
}


/* Dashboard layout */
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.dash-month{margin-top:10px;}
.dash-grid{display:grid;gap:14px;margin-bottom:14px;}
@media (min-width: 820px){
  .dash-summary{grid-template-columns: 1fr 1fr;}
  .dash-panels{grid-template-columns: 2fr 1fr;}
}
.dash-cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.link{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.link.muted{color:var(--muted);}
.dash-banner{margin-top:14px;}
.dash-banner__inner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.dash-banner__img{max-width:260px;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);}


/* ---- Auth split layout ---- */
.auth-shell{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding: 28px 16px;
}
.auth-split{
  width: 100%;
  max-width: 1100px;
  display:grid;
  grid-template-columns: 1fr 520px;
  gap: 18px;
  align-items: start;
}
.auth-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 420px;
}
.auth-panel__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.auth-panel__logo{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border);
  background:#fff;
  flex: 0 0 auto;
}
.auth-panel__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.auth-panel__title{
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
}
.auth-panel__subtitle{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.auth-panel__bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: #374151;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.auth-form-card{
  padding: 18px;
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.auth-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.auth-links{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 8px;
}
a.link{
  color: var(--primary);
  text-decoration:none;
  border-bottom: 1px solid rgba(17,24,39,.25);
}
a.link:hover{ border-bottom-color: rgba(17,24,39,.6); }


@media (min-width: 1440px){
  .auth-shell{ padding-top: 42px; }
  .auth-split{
    max-width: 1380px;
    grid-template-columns: 1fr 580px;
    gap: 24px;
  }
  .auth-panel{ padding: 28px; }
  .auth-form-card{ padding: 22px; }
}

@media (min-width: 1920px){
  .auth-split{
    max-width: 1560px;
    grid-template-columns: 1.1fr 620px;
  }
  .auth-panel__brand{ max-width: 680px; }
}

@media (max-width: 900px){
  .auth-split{ grid-template-columns: 1fr; }
  .auth-panel{ min-height: auto; }
}


/* ---- Auth split polish (new logo) ---- */
.auth-panel__logo{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  flex: 0 0 auto;
}
.auth-panel__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle background for the left panel to add presence on large screens */
.auth-panel{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(17,24,39,.06), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(17,24,39,.05), rgba(255,255,255,0) 55%);
}

/* Slightly stronger title hierarchy */
.auth-panel__title{ font-size: 18px; }
.auth-panel__subtitle{ font-size: 13px; }
.auth-card h1{ font-size: 24px; }