:root{
  --text:#111827; --bg:#f7fafc; --bg2:#f1f7fb; --card:#ffffff; --muted:#5b6b7c;
  --accent:#87CEFA; --accent2:#5bb8f3; --ok:#059669; --warn:#b45309; --err:#dc2626;
  --line:#dbeafe; --line-2:#e6f3ff; --chip:#f7fbff; --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow-x:hidden; }
body{
  min-height:100svh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* Header */
header{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); background:var(--accent); color:#fff;
}
header .brand{ display:flex; gap:10px; align-items:center; font-weight:700; font-size:18px; letter-spacing:.3px; }
header .brand img{ width:28px; height:28px; border-radius:8px; background:#fff; }
header a.btn{
  background:#fff; color:#0f2740; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700; border:1px solid rgba(0,0,0,.06);
}

/* Container & Tabs */
.container{ flex:1; width:100%; max-width:1200px; margin:28px auto; padding:0 16px; min-width:0; }
.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; min-width:0; }
.tab{
  padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#f8fbff; color:#2b3d52; cursor:pointer; font-weight:600;
}
.tab.active{ background:var(--accent); color:#fff; border-color:#6ec8fb; box-shadow:0 6px 18px rgba(135,206,250,.35); }

/* Generic grid (used by sections like OCR) */
.grid{ display:grid; gap:16px; min-width:0; }
@media (min-width:900px){
  .grid{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}

/* Planner layout with areas (overrides the generic .grid) */
#planner.grid{
  grid-template-columns: 1fr;
  grid-template-areas:
    "expenses"
    "planner"
    "goals"
    "net";
}
#planner .area-expenses{ grid-area:expenses; }
#planner .area-planner { grid-area:planner; }
#planner .area-goals   { grid-area:goals; }
#planner .area-net     { grid-area:net; }

/* Desktop: KPIs on top row, Expenses/Planner below, side-by-side */
@media (min-width:1000px){
  #planner.grid{
    grid-template-columns: 1.1fr .9fr; /* tweak if you want equal widths: 1fr 1fr */
    grid-template-areas:
      "expenses planner"
      "goals    net";
  }
}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:0 8px 20px rgba(15,23,42,.05); min-width:0;
}
.card h3{ margin:4px 0 14px; font-size:18px; color:#0f172a; }

.note-box{
  margin-top:16px; padding:12px 14px; background:#f0f8ff; border:1px solid #87CEFA;
  border-radius:12px; color:#0f2740; font-size:14px; line-height:1.5;
}
.note-warn{ background:rgba(180,83,9,.08); border:1px solid rgba(180,83,9,.35); color:#7a3e06; }
.note-warn .ic{ margin-right:6px; }

/* Forms */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
label{ font-weight:600; color:#0f172a; font-size:14px; }
input,select{
  background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:12px; font-size:15px; outline:none; min-width:0;
}
input::placeholder{ color:#8aa0b6; }
button.primary{
  background:var(--accent); border:none; color:#0f2740; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer;
}
button.ghost{
  background:#fff; border:1px solid var(--line); color:#0f2740; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer;
}
.muted{ color:var(--muted); font-size:13px; }

/* Upload */
.drop{ border:1px dashed var(--accent); background:#f7fbff; border-radius:16px; padding:18px; text-align:center; }
.drop .big{ font-size:15px; font-weight:600; color:#0f172a; }
.preview{ margin-top:12px; border-radius:12px; max-height:260px; object-fit:contain; border:1px solid var(--line); }

/* KPI blocks */
.results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; min-width:0; }
@media (max-width:700px){ .results{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .results{ grid-template-columns:1fr; } .kpi .value{ font-size:18px; } }
.kpi{ background:var(--chip); border:1px solid var(--line-2); border-radius:14px; padding:12px; min-width:0; }
.kpi .label{ font-size:12px; color:#5b6b7c; text-transform:uppercase; letter-spacing:.08em; }
.kpi .value{ font-weight:800; font-size:20px; margin-top:6px; color:#0f172a; }

/* Rows / Tags */
.row{ display:flex; gap:10px; align-items:center; justify-content:space-between; min-width:0; }
@media (max-width:600px){ .row{ flex-direction:column; align-items:stretch; gap:8px; } }
.tag{
  font-size:12px; background:#f7fbff; border:1px solid var(--line);
  border-radius:999px; padding:6px 10px; color:#0f2740;
}

/* Badges */
.badge-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 12px; }
.badge-lg,.badge-sm{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:1px solid transparent; }
.badge-lg{ font-weight:800; padding:8px 12px; }
.badge-sm{ font-weight:700; padding:6px 10px; font-size:12px; }
.badge-accept{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#065f46; }
.badge-reject{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#7f1d1d; }
.badge-muted{ background:#f3f7fb; border-color:var(--line); color:#475569; }
.badge-warn{ background:rgba(180,83,9,.12); border-color:rgba(180,83,9,.35); color:#7a3e06; }
.badge-sm .label{ opacity:.85; letter-spacing:.02em; text-transform:uppercase; }
.badge-sm .val{ font-variant-numeric:tabular-nums; }

/* Misc */
details{ margin-top:10px; }
pre{ white-space:pre-wrap; background:#f7fbff; border:1px solid var(--line); border-radius:12px; padding:12px; color:#0f172a; font-size:13px; }

.label-with-tip {
  position: relative;               /* anchor for .help-tip (absolute) */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Help tooltip */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #f3f7fb;
  color: #0f2740;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  cursor: help;
  position: relative;
}
.help:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.help-tip {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0f2740;      /* dark bubble */
  color: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 24px rgba(15,23,42,.25);
}
.help-tip::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #0f2740; /* little arrow */
}
.help:hover + .help-tip,
.help:focus + .help-tip,
.help.open + .help-tip {      /* .open added for taps (JS below) */
  display: block;
}
.help-tip ul { margin: 6px 0 0; padding-left: 18px; }
.help-tip li { margin: 2px 0; }

.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-wrap {
  position: relative;      /* anchor for the absolute tooltip */
  display: inline-block;
}

/* Hide by default (stronger & scoped to the wrapper) */
.help-wrap .help-tip { display: none !important; }

/* Show on hover/focus/tap */
.help-wrap .help:hover + .help-tip,
.help-wrap .help:focus + .help-tip,
.help-wrap .help.open + .help-tip { display: block !important; }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:9999; }
.modal .box{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 18px; min-width:260px; text-align:center; color:#0f172a; }
.spinner{ width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin:0 auto 10px; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Tables */
.table{ width:100%; border-collapse:collapse; margin-top:10px; }
.table th,.table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; font-size:13px; }
.table th{ background:#eaf6ff; color:#0f172a; }
.table td{ background:#fff; color:#0f172a; }
.table .num{ font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .table,.table thead,.table tbody,.table th,.table td,.table tr{ display:block; }
  .table thead{ display:none; }
  .table tr{ margin:0 0 12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .table td{ border:none; border-bottom:1px solid var(--line); padding:10px 12px; }
  .table td:last-child{ border-bottom:none; }
  .table td::before{ content:attr(data-label); display:block; font-weight:600; color:#5b6b7c; margin-bottom:4px; }
}

/* Footer */
footer{
  margin-top:auto; padding:18px 20px; border-top:1px solid var(--line);
  background:var(--accent); color:#fff;
}
footer .row{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
footer a{ color:#fff; text-decoration:underline; }
footer a:hover{ text-decoration:none; }
footer .social{ display:flex; gap:12px; align-items:center; }
footer .social a{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:#0f2740;
  border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:6px 10px; text-decoration:none;
}