:root {
  --blue-900: #0d47a1;
  --blue-700: #1565c0;
  --blue-500: #1976d2;
  --blue-100: #e3f2fd;
  --green: #2e7d32;
  --green-bg: #e8f5e9;
  --orange: #ef6c00;
  --orange-bg: #fff3e0;
  --red: #c62828;
  --red-bg: #ffebee;
  --ink: #152033;
  --muted: #6b778c;
  --line: #dfe5ed;
  --surface: #ffffff;
  --background: #f3f6fa;
  --shadow: 0 12px 30px rgba(21, 32, 51, .09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

button { cursor: pointer; }

.topbar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 22px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar h1, .section-heading h2, .dialog-header h2 {
  margin: 0;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
  color: var(--blue-700);
}

.eyebrow.light { color: rgba(255,255,255,.75); }

.page-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 22px 110px;
}

.checking-card {
  padding: 28px;
  color: white;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-500));
  box-shadow: 0 18px 40px rgba(13, 71, 161, .25);
}

.checking-header, .checking-actions, .section-heading, .dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checking-card h2 { margin: 0; font-size: 1.15rem; }

.checking-balance {
  margin-top: 20px;
  font-size: clamp(3rem, 9vw, 5.8rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.055em;
}

.muted-light { color: rgba(255,255,255,.72); }

.status-pill {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: .8rem;
  font-weight: 800;
}

.checking-actions { margin-top: 24px; }

.last-refresh {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

.button {
  border: 0;
  border-radius: 13px;
  min-height: 44px;
  padding: 10px 16px;
  font-weight: 850;
  transition: transform .15s ease, opacity .15s ease;
}

.button:active { transform: scale(.98); }

.button:disabled { opacity: .55; cursor: wait; }

.button-light {
  color: var(--blue-900);
  background: white;
}

.button-primary {
  color: white;
  background: var(--blue-700);
}

.button-secondary {
  color: var(--ink);
  background: #e9eef5;
}

.button-icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.2rem;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.metric-card {
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric-card p {
  margin: 10px 0 5px;
  color: var(--muted);
}

.metric-card strong {
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-weight: 900;
}

.metric-card.orange .metric-icon { color: var(--orange); background: var(--orange-bg); }
.metric-card.orange strong { color: var(--orange); }
.metric-card.green .metric-icon { color: var(--green); background: var(--green-bg); }
.metric-card.green strong { color: var(--green); }
.metric-card.blue .metric-icon { color: var(--blue-700); background: var(--blue-100); }
.metric-card.blue strong { color: var(--blue-700); }

.section-block { margin-top: 30px; }

.section-heading { margin-bottom: 12px; }

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.account-card {
  min-height: 145px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  box-shadow: var(--shadow);
}

.account-card .account-icon {
  font-size: 1.6rem;
}

.account-name {
  margin: 18px 0 2px;
  font-weight: 850;
}

.account-institution {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.account-balance {
  margin-top: 8px;
  font-size: 1.55rem;
  font-weight: 950;
}

.bill-list { display: grid; gap: 10px; }

.bill-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--blue-700);
  background: white;
  box-shadow: 0 7px 20px rgba(21, 32, 51, .06);
}

.bill-card.due-soon { border-left-color: var(--orange); }
.bill-card.overdue { border-left-color: var(--red); }
.bill-card.paid { border-left-color: var(--green); opacity: .76; }

.bill-checkbox {
  width: 24px;
  height: 24px;
  accent-color: var(--green);
}

.bill-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.bill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  color: var(--muted);
  font-size: .87rem;
}

.bill-due { font-weight: 800; }
.bill-card.due-soon .bill-due { color: var(--orange); }
.bill-card.overdue .bill-due { color: var(--red); }
.bill-card.paid .bill-due { color: var(--green); }

.bill-amount {
  text-align: right;
  font-size: 1.1rem;
  font-weight: 950;
}

.autopay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(650px, calc(100% - 24px));
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 21px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 35px rgba(21,32,51,.18);
  backdrop-filter: blur(12px);
}

.nav-item {
  min-height: 52px;
  border: 0;
  border-radius: 15px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.nav-item span {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
}

.nav-item.active {
  color: var(--blue-700);
  background: var(--blue-100);
}

dialog {
  width: min(500px, calc(100% - 28px));
  border: 0;
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 25px 80px rgba(0,0,0,.28);
}

dialog::backdrop { background: rgba(16,25,40,.55); }

#billForm { padding: 24px; }

#billForm label {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-weight: 800;
}

#billForm input, #billForm select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
}

.checkbox-row input { width: 22px !important; min-height: auto !important; }

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 20px);
  padding: 12px 17px;
  border-radius: 13px;
  color: white;
  background: #172033;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .topbar { padding-top: 18px; }
  .topbar h1 { font-size: 1.3rem; }
  .checking-card { padding: 22px; }
  .checking-actions { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card:last-child { grid-column: 1 / -1; }
  .accounts-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .account-card { min-width: 210px; scroll-snap-align: start; }
  .section-heading { align-items: flex-end; }
  .bill-card { grid-template-columns: auto 1fr; }
  .bill-amount { grid-column: 2; text-align: left; }
}

.accounts-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.account-card{min-height:205px;display:flex;flex-direction:column}.card-actions,.bill-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.action-button{min-height:34px;padding:7px 10px;border:0;border-radius:10px;font-size:.78rem;font-weight:850;color:var(--ink);background:#edf2f8}.action-button.primary{color:white;background:var(--blue-700)}.action-button.success{color:white;background:var(--green)}.bill-main{min-width:0}.bill-actions{grid-column:2/-1;margin-top:8px}.history-panel{width:min(520px,calc(100% - 28px))}.history-list{display:grid;gap:10px;margin-top:16px}.history-entry{display:flex;justify-content:space-between;gap:15px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}textarea{resize:vertical}@media(max-width:1050px){.accounts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.accounts-grid{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.account-card{min-width:0}.bill-actions{grid-column:1/-1}}@media(max-width:480px){.accounts-grid{grid-template-columns:1fr}}


/* v0.3.0: compact cards and highly visible action buttons */
.accounts-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.account-card {
  min-height: 136px;
  padding: 12px;
  border-radius: 16px;
}
.account-card .account-icon { font-size: 1.2rem; }
.account-name { margin: 8px 0 0; font-size: .95rem; }
.account-institution { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-balance { margin: 4px 0 8px !important; font-size: 1.25rem; }
.card-actions, .bill-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 5px;
  border: 0;
  border-radius: 9px;
  font-size: .70rem;
  line-height: 1.05;
  font-weight: 900;
  color: white;
  box-shadow: 0 3px 8px rgba(21,32,51,.12);
}
.action-button.visit, .action-button.pay { background: #1565c0; }
.action-button.refresh { background: #0288d1; }
.action-button.edit { background: #546e7a; }
.action-button.history { background: #6a1b9a; }
.action-button.paid-button { background: #2e7d32; }
.action-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.bill-card { padding: 12px; }
.bill-actions { grid-column: 1 / -1; margin-top: 4px; }
.bill-actions .action-button { font-size: .78rem; min-height: 38px; }
@media (max-width: 1050px) {
  .accounts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .accounts-grid { grid-template-columns: 1fr; }
  .card-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* v0.3.3 forced icon-only account actions */
.account-icon-actions {
  display: grid !important;
  grid-template-columns: repeat(4, 36px) !important;
  gap: 7px !important;
  justify-content: start !important;
  margin-top: auto !important;
}

.account-icon-button {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.account-icon-button.visit-icon {
  color: white !important;
  background: var(--blue-700) !important;
}

.account-icon-button.refresh-icon {
  color: #0d47a1 !important;
  background: #dceeff !important;
}

.account-icon-button.edit-icon {
  color: #374151 !important;
  background: #e5e7eb !important;
}

.account-icon-button.history-icon {
  color: #6a1b9a !important;
  background: #f1dcf7 !important;
}

.account-icon-button:hover {
  transform: translateY(-1px);
  filter: brightness(.96);
}

/* v0.3.3 history controls */
.history-dialog-content {
  padding: 24px;
}

.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.button-danger {
  color: white;
  background: var(--red);
}

.history-entry {
  align-items: center;
}

.history-detail {
  margin-top: 3px;
  color: var(--muted);
  font-size: .9rem;
}

.history-delete-entry {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--red-bg);
  color: var(--red);
  cursor: pointer;
}

.empty-history {
  color: var(--muted);
}

#loginDialog{width:min(420px,calc(100% - 30px));border:0;border-radius:22px;padding:26px}#loginDialog::backdrop{background:#101828aa}#loginForm label{display:grid;gap:6px;margin:14px 0;font-weight:800}#loginForm input{padding:12px;border:1px solid #dfe5ed;border-radius:10px}


/* v0.5 management controls */
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.dialog-spacer {
  flex: 1 1 auto;
}

.button-danger {
  color: #fff;
  background: #c62828;
}

.hidden {
  display: none !important;
}

dialog form {
  min-width: min(500px, calc(100vw - 56px));
}


/* v0.5.1 account form cleanup */
.account-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 90vh;
  overflow: auto;
}

.account-form {
  padding: 24px;
}

.account-form .dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 14px;
  background: white;
}

.form-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}

.form-section h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--ink);
}

.account-form label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-weight: 800;
}

.account-form label:first-of-type {
  margin-top: 0;
}

.account-form label span {
  font-size: .92rem;
}

.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
}

.account-form textarea {
  min-height: 110px;
  resize: vertical;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two-column {
  grid-template-columns: 1fr 1fr;
}

.account-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 20px;
  padding-top: 16px;
  background: white;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .account-dialog {
    width: calc(100% - 16px);
    max-height: 94vh;
  }

  .account-form {
    padding: 18px;
  }

  .form-grid.two-column {
    grid-template-columns: 1fr;
  }

  .form-section {
    padding: 15px;
  }

  .account-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .account-dialog-actions .dialog-spacer {
    display: none;
  }

  .account-dialog-actions #deleteAccountButton {
    grid-column: 1 / -1;
  }
}


/* v0.6 Plaid integration */
.plaid-button { color:#fff; background:#111827; }
.plaid-button:hover { background:#000; }