:root { --bg:#f4f6f8; --card:#fff; --text:#1a1f2e; --muted:#5c667a; --accent:#0b6e4f; --danger:#b42318; --border:#d8dee9; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:#102a43; color:#fff; padding:1rem; display:none; }
.sidebar a { display:block; color:#d9e2ec; padding:.6rem .5rem; border-radius:8px; margin-bottom:.25rem; }
.sidebar a.active, .sidebar a:hover { background:#243b53; color:#fff; }
.main { flex:1; padding:1rem; max-width:1100px; margin:0 auto; width:100%; padding-bottom:5.5rem; }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:.35rem 0; z-index:10; }
.bottom-nav a { font-size:.75rem; color:var(--muted); text-align:center; padding:.25rem; min-height:44px; display:flex; align-items:center; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem; margin-bottom:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.stat .label { color:var(--muted); font-size:.85rem; }
.stat .value { font-size:1.4rem; font-weight:700; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:10px; padding:.7rem 1rem; font-size:1rem; cursor:pointer; min-height:44px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.secondary { background:#486581; }
.btn.danger { background:var(--danger); }
input, select, textarea { width:100%; padding:.7rem; border:1px solid var(--border); border-radius:10px; font-size:1rem; margin:.35rem 0 .8rem; }
label { font-weight:600; font-size:.9rem; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.6rem; border-bottom:1px solid var(--border); text-align:left; font-size:.92rem; }
.amount.income { color:#0b6e4f; font-weight:700; }
.amount.expense { color:var(--danger); font-weight:700; }
.alert { padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; }
.alert.error { background:#fee4e2; color:#7a271a; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:.92rem; }

/* Transaction form – mobile friendly */
.tx-form .form-submit-bar {
  position:sticky;
  bottom:3.75rem;
  z-index:5;
  background:linear-gradient(transparent, var(--bg) 20%);
  padding:.75rem 0 .25rem;
  margin-top:.5rem;
}
.tx-form .form-submit-bar .btn { width:100%; font-size:1.05rem; }

/* Receipt upload */
.receipt-upload { margin:.5rem 0 1rem; }
.receipt-label { font-weight:600; font-size:.9rem; margin:0 0 .5rem; }
.receipt-input-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.receipt-actions {
  display:grid;
  gap:.65rem;
  grid-template-columns:1fr;
}
.receipt-btn-camera {
  width:100%;
  font-size:1.05rem;
  padding:.85rem 1rem;
  min-height:48px;
}
.receipt-btn-file {
  width:100%;
  min-height:44px;
}
.receipt-processing {
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.75rem 0;
  color:var(--muted);
  font-size:.95rem;
}
.receipt-spinner {
  width:1.1rem;
  height:1.1rem;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:receipt-spin .8s linear infinite;
}
@keyframes receipt-spin { to { transform:rotate(360deg); } }
.receipt-preview {
  border:1px solid var(--border);
  border-radius:12px;
  padding:.85rem;
  margin-top:.75rem;
  background:#fafbfc;
  max-width:100%;
  overflow:hidden;
}
.receipt-preview-image-wrap {
  text-align:center;
  margin-bottom:.75rem;
  max-height:220px;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
}
.receipt-preview-img {
  max-width:100%;
  max-height:220px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.receipt-preview-pdf {
  display:flex;
  justify-content:center;
  margin-bottom:.75rem;
}
.receipt-pdf-icon {
  width:72px;
  height:88px;
  border:2px solid var(--danger);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--danger);
  background:#fff;
  font-size:1.1rem;
}
.receipt-meta {
  margin:0 0 .75rem;
  font-size:.9rem;
}
.receipt-meta > div {
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.25rem 0;
  border-bottom:1px solid var(--border);
}
.receipt-meta dt { margin:0; color:var(--muted); font-weight:500; }
.receipt-meta dd { margin:0; font-weight:600; text-align:right; word-break:break-all; }
.receipt-preview-actions {
  display:grid;
  gap:.5rem;
  grid-template-columns:1fr 1fr;
}
.receipt-preview-actions .btn { width:100%; min-height:44px; }
.receipt-error { margin-top:.5rem; margin-bottom:0; }
.receipt-upload.is-busy .receipt-actions { opacity:.7; pointer-events:none; }

/* Invoice review UI */
.invoice-review-grid {
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
.invoice-preview-card { text-align:center; }
.invoice-meta-row {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}
.invoice-confidence { font-weight:600; color:var(--muted); }
.invoice-status-badge {
  display:inline-block;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  background:#e3e8ef;
  color:#334e68;
}
.invoice-status-badge.status-queued,
.invoice-status-badge.status-processing { background:#dbeafe; color:#1e40af; }
.invoice-status-badge.status-review_required { background:#fef3c7; color:#92400e; }
.invoice-status-badge.status-confirmed,
.invoice-status-badge.status-auto_saved { background:#d1fae5; color:#065f46; }
.invoice-status-badge.status-failed,
.invoice-status-badge.status-dismissed { background:#fee4e2; color:#7a271a; }
.invoice-warnings {
  margin:.5rem 0 1rem;
  padding-left:1.25rem;
  color:#92400e;
}
.invoice-warnings li { margin-bottom:.35rem; }
.invoice-field-low-confidence {
  color:#92400e;
}
.invoice-field-low-confidence + input,
.invoice-field-low-confidence + select,
.invoice-field-low-confidence + textarea {
  border-color:#f59e0b;
  background:#fffbeb;
}
.invoice-form-actions { margin-top:.5rem; }
.invoice-form-actions .btn { width:100%; }
.invoice-secondary-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.invoice-secondary-actions .btn { flex:1; min-width:140px; }
.invoice-list-table { font-size:.88rem; }
.invoice-upload-form .form-submit-bar {
  position:sticky;
  bottom:3.75rem;
  z-index:5;
  padding:.75rem 0;
}
.invoice-upload-form .form-submit-bar .btn { width:100%; }

@media (min-width: 520px) {
  .receipt-actions { grid-template-columns:1fr 1fr; }
}

@media (min-width: 768px) {
  .invoice-review-grid { grid-template-columns:minmax(240px, 360px) 1fr; }
  .invoice-form-actions .btn { width:auto; }
}

@media (min-width: 900px) {
  .sidebar { display:block; }
  .bottom-nav { display:none; }
  .main { padding:1.5rem 1rem 2rem; }
  .tx-form .form-submit-bar { bottom:0; }
  .invoice-upload-form .form-submit-bar { bottom:0; }
}

@media (max-width: 430px) {
  .main { padding:.85rem .85rem 5.5rem; }
  input, select, textarea { font-size:16px; }
  .receipt-preview-img { max-height:180px; }
  .invoice-secondary-actions { flex-direction:column; }
  .invoice-secondary-actions .btn { width:100%; }
}