/* Magic Box — dark UV theme */
:root {
  --bg: #08070f;
  --bg-2: #0d0b18;
  --panel: #12101d;
  --panel-2: #181528;
  --panel-3: #1f1b33;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);
  --ink: #f4f1ff;
  --muted: #9b95bd;
  --muted-2: #6e688f;
  --brand: #a855f7;
  --brand-deep: #7c3aed;
  --cyan: #22d3ee;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb7185;
  --glow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 0 28px rgba(168, 85, 247, 0.28);
  --glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 28px rgba(34, 211, 238, 0.22);
  --radius: 16px;
  --font: "Heebo", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.45; overflow-x: hidden; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cyan); }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.spacer { flex: 1; }
.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--brand); text-transform: uppercase; }
::selection { background: rgba(168, 85, 247, 0.4); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2542; border-radius: 10px; border: 2px solid var(--bg); }

/* ambient glows behind everything */
.bg-glow { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; opacity: 0.55; }
.bg-glow-1 { width: 620px; height: 620px; background: #6d28d9; top: -260px; right: 120px; }
.bg-glow-2 { width: 520px; height: 520px; background: #0e7490; bottom: -240px; left: -120px; opacity: 0.35; }

/* ------------------------------------------------------------ layout */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 284px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, rgba(20, 16, 36, 0.9), rgba(10, 8, 20, 0.95));
  border-left: 1px solid var(--line); backdrop-filter: blur(12px);
  padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { padding: 20px 28px 80px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------- brand */
.brand { position: relative; text-align: center; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.brand-halo { position: absolute; inset: -10px 20px 30px; background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.35), rgba(34, 211, 238, 0.12) 45%, transparent 70%); filter: blur(18px); pointer-events: none; }
.brand-logo { position: relative; width: 230px; max-width: 100%; height: auto; display: block; margin: 0 auto -6px; filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.55)) drop-shadow(0 0 6px rgba(34, 211, 238, 0.35)); }
.brand-name { position: relative; font-weight: 900; font-size: 26px; letter-spacing: 0.02em; margin-top: 0; direction: ltr; }
.brand-name span { background: linear-gradient(90deg, #c084fc, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-tag { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--muted-2); margin-top: 2px; }

.side-section { display: flex; flex-direction: column; gap: 8px; }
.side-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted-2); text-transform: uppercase; padding: 0 6px; }

/* ---------------------------------------------------------- accounts */
.accounts { display: flex; flex-direction: column; gap: 4px; }
.acct {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: inherit; text-align: right; width: 100%; transition: all 0.15s;
}
.acct:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.acct.active { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(34, 211, 238, 0.08)); border-color: rgba(168, 85, 247, 0.45); box-shadow: var(--glow); }
.acct .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.acct .acct-text { flex: 1; min-width: 0; display: block; }
.acct .acct-label { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .acct-sub { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.acct .acct-sub .em { direction: ltr; unicode-bidi: isolate; }
.acct .count { font-family: var(--mono); font-size: 11px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 2px 8px; }
.acct .count.fresh { background: var(--cyan); color: #04141a; font-weight: 700; box-shadow: 0 0 12px rgba(34, 211, 238, 0.6); }
.acct.err .dot { box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.45); }
.acct .warn-ic { color: var(--amber); }
.btn-connect { border: 1px dashed rgba(168, 85, 247, 0.5); background: transparent; color: #d8c8ff; border-radius: 12px; padding: 10px; font-weight: 600; transition: all 0.15s; }
.btn-connect:hover { background: rgba(168, 85, 247, 0.15); border-style: solid; box-shadow: var(--glow); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sync-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.sync-row { display: flex; justify-content: space-between; align-items: baseline; }
.sync-last { color: var(--muted); }
.sync-progress { margin: 10px 0 6px; }
.bar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width 0.3s; }
.sync-text { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-actions { display: flex; gap: 6px; margin-top: 10px; }
.sync-actions .btn { flex: 1; }
.link-btn { background: none; border: 0; color: var(--cyan); padding: 4px; font-weight: 500; }
.link-btn:hover { text-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }
.sidebar .link-btn { text-align: right; }
.link-btn.full-history { display: block; width: 100%; margin-top: 8px; font-size: 12px; text-align: center; }

.user-chip { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12.5px; }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); }
.user-chip .who { flex: 1; min-width: 0; }
.user-chip .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who span { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; direction: ltr; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.alerts { display: flex; flex-direction: column; gap: 8px; }
.alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-radius: 14px; padding: 12px 16px; border: 1px solid rgba(251, 191, 36, 0.55); background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(168, 85, 247, 0.06)); box-shadow: 0 0 22px rgba(251, 191, 36, 0.2); }
.alert.auth { border-color: rgba(251, 113, 133, 0.6); background: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(168, 85, 247, 0.06)); box-shadow: 0 0 22px rgba(251, 113, 133, 0.22); }
.alert-text { flex: 1; min-width: 240px; line-height: 1.5; }
.alert-actions { display: flex; gap: 6px; }

/* ------------------------------------------------------------ panels */
.panel { background: linear-gradient(180deg, rgba(24, 21, 40, 0.85), rgba(16, 14, 28, 0.85)); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.panel-head.compact { margin-bottom: 10px; align-items: center; }
.panel-title { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* report panel */
.report { position: relative; border-color: rgba(168, 85, 247, 0.45); box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.45); }
.report::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: radial-gradient(600px 200px at 85% 0%, rgba(168, 85, 247, 0.18), transparent 60%); pointer-events: none; }
.report-controls { display: flex; align-items: center; gap: 12px; }
.report-body { display: flex; flex-direction: column; gap: 12px; position: relative; }
.period-strip-wrap { display: flex; align-items: center; gap: 4px; }
.period-strip { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scroll-behavior: smooth; }
.strip-arrow {
  flex: none; font-size: 20px; padding: 4px 6px; border-radius: 10px;
  border: 1px solid transparent; user-select: none; -webkit-user-select: none;
}
.strip-arrow:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.strip-arrow:active { background: rgba(34, 211, 238, 0.15); }
.pchip { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; text-align: right; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--muted); transition: all 0.15s; cursor: pointer; }
.pchip:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--ink); }
.pchip .pchip-label { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.pchip .pchip-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 5px; }
.pchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.pchip.ready .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.pchip.late .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
.pchip.progress .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.pchip.selected { border-color: rgba(34, 211, 238, 0.7); box-shadow: var(--glow-cyan); background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(168, 85, 247, 0.1)); color: var(--ink); }
.period { border-radius: 14px; padding: 16px 18px; border: 1px solid var(--line-2); background: var(--panel); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all 0.15s; }
.period:hover { border-color: rgba(34, 211, 238, 0.5); }
.period.selected { border-color: rgba(34, 211, 238, 0.6); box-shadow: var(--glow-cyan); background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.08)); cursor: default; }
.period-nav { display: flex; align-items: center; gap: 6px; }
.period-nav .icon-btn { font-size: 22px; line-height: 1; padding: 0 8px; }
.period-nav .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.period-hint { margin-right: auto; align-self: center; }
.status-pill.past { color: var(--muted); border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.period-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.period-label { font-weight: 700; font-size: 15px; }
.status-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.status-pill.ready { color: var(--green); border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.1); box-shadow: 0 0 12px rgba(52, 211, 153, 0.25); }
.status-pill.progress { color: var(--amber); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08); }
.status-pill.late { color: var(--red); border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.1); }
.period-dates { font-family: var(--mono); font-size: 26px; font-weight: 600; direction: ltr; text-align: right; letter-spacing: -0.01em; }
.period.selected .period-dates { color: #e0fbff; text-shadow: 0 0 18px rgba(34, 211, 238, 0.45); }
.period-due { font-size: 13px; color: var(--muted); }
.period-due b { color: var(--ink); }
.period-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.pstat { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.pstat .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; }
.pstat .val { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-top: 2px; direction: ltr; text-align: right; }
.pstat.warn .val { color: var(--amber); }
.pstat.cyan .val { color: var(--cyan); }
.period-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.period-actions .btn.primary { flex: 1; min-width: 150px; }
.outside-expenses-card { width:100%; margin:12px 0 16px; padding:15px 18px; display:grid; grid-template-columns:minmax(190px,1fr) auto; gap:5px 18px; text-align:start; color:var(--ink); background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.42); border-radius:14px; font:inherit; }
button.outside-expenses-card { cursor:pointer; }
button.outside-expenses-card:hover, button.outside-expenses-card:focus-visible { background:rgba(245,158,11,.12); border-color:#f59e0b; outline:none; }
.outside-expenses-card .outside-expenses-title { color:#fbbf24; font-weight:700; }
.outside-expenses-card strong { grid-row:1 / span 2; grid-column:2; align-self:center; font-family:var(--mono); font-size:22px; color:#fde68a; direction:ltr; }
.outside-expenses-card span:not(.outside-expenses-title), .outside-expenses-card small { color:var(--muted); }
.outside-expenses-card small { grid-column:1 / -1; }
.outside-expenses-card.loading { color:var(--muted); display:block; }
.outside-expenses-card.empty { opacity:.72; }
.outside-modal-total { display:flex; justify-content:space-between; gap:16px; padding:12px 14px; margin-bottom:14px; border-radius:12px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.35); }
.outside-modal-total strong { color:#fde68a; font-family:var(--mono); direction:ltr; }
.manual-modal-head { position:sticky; top:-22px; z-index:5; display:flex; align-items:center; gap:12px; margin:-22px -24px 14px; padding:14px 24px 10px; background:linear-gradient(180deg,var(--bg-2) 82%,transparent); }
.manual-modal-head h2 { flex:1; }

/* ------------------------------------------------------------ buttons */
.btn { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 10px; padding: 8px 14px; font-weight: 600; transition: all 0.15s; white-space: nowrap; color: var(--ink); }
.btn:hover { border-color: rgba(168, 85, 247, 0.6); background: var(--panel-3); box-shadow: 0 0 16px rgba(168, 85, 247, 0.2); }
.btn.primary { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 0 22px rgba(168, 85, 247, 0.45); }
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 0 30px rgba(168, 85, 247, 0.65); }
.btn.cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); color: #04141a; border-color: transparent; box-shadow: 0 0 22px rgba(34, 211, 238, 0.4); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); }
/* One action is the action: the PDF for the accountant. Excel, ZIP and the
   print view stay reachable but stop competing with it for the eye. */
.btn.big { font-size: 15px; padding: 12px 22px; }
.btn.small { font-size: 12.5px; padding: 6px 12px; font-weight: 500; color: #a49fbd; }
.btn.danger:hover { border-color: rgba(251, 113, 133, 0.6); box-shadow: 0 0 16px rgba(251, 113, 133, 0.25); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; font-size: 20px; padding: 4px 8px; border-radius: 8px; color: var(--muted); }
.icon-btn:hover { background: rgba(168, 85, 247, 0.15); color: var(--ink); }

/* segmented controls */
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); transition: all 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(124, 58, 237, 0.35)); color: #fff; box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), inset 0 0 0 1px rgba(168, 85, 247, 0.5); }
.view-toggle button { font-size: 16px; padding: 4px 10px; }

/* ------------------------------------------------------------- topbar */
.topbar { display: flex; align-items: center; gap: 12px; }
.search-wrap { flex: 1; position: relative; }
.search-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; }
.search { width: 100%; padding: 11px 40px 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); outline: none; transition: all 0.15s; }
.search::placeholder { color: var(--muted-2); }
.search:focus { border-color: var(--brand); box-shadow: var(--glow); }

/* ------------------------------------------------------------ filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.range { display: flex; gap: 6px; align-items: center; }
.range label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.filters select, .filters input[type="date"], .modal-card input, .modal-card select, .modal-card textarea, .doc-form input, .doc-form select, .doc-form textarea {
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--ink); border-radius: 10px; padding: 7px 10px; color-scheme: dark;
}
.filters select { max-width: 200px; }
.filters select:focus, .modal-card input:focus, .modal-card select:focus, .doc-form input:focus, .doc-form select:focus, .doc-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--glow); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
input[type="checkbox"] { accent-color: var(--brand); }

/* -------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; }
.stat .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted-2); text-transform: uppercase; }
.stat .val { font-family: var(--mono); font-size: 22px; font-weight: 600; margin-top: 4px; direction: ltr; text-align: right; }
.stat.warn .val { color: var(--amber); text-shadow: 0 0 14px rgba(251, 191, 36, 0.4); }
.stat.brand .val { color: #d8b4fe; text-shadow: 0 0 14px rgba(168, 85, 247, 0.5); }
.stat.cyan .val { color: var(--cyan); text-shadow: 0 0 14px rgba(34, 211, 238, 0.4); }
.stat.chart { grid-column: span 2; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 6px; }
.bars .b { flex: 1; background: linear-gradient(180deg, #c084fc, #7c3aed); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
.bars .b:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; right: 0; background: #000; border: 1px solid var(--line-2); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; z-index: 2; font-family: var(--mono); }

/* ------------------------------------------------------------ bulkbar */
.bulkbar { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #2a1650, #12102a); border: 1px solid rgba(168, 85, 247, 0.6); border-radius: 14px; padding: 8px 14px; position: sticky; top: 10px; z-index: 5; box-shadow: var(--glow); }
.bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.bulkbar select { background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
.bulkbar select option { color: #000; }

/* --------------------------------------------------------------- grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; position: relative; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 24px rgba(168, 85, 247, 0.28), 0 16px 40px rgba(0, 0, 0, 0.5); }
.card.selected { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.card .stripe { height: 3px; }
.card .thumb { aspect-ratio: 4 / 3.2; background: #0b0a14; display: grid; place-items: center; overflow: hidden; position: relative; border-bottom: 1px solid var(--line); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .thumb .ph { font-size: 38px; opacity: 0.4; }
.card .sel { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; opacity: 0; transition: opacity 0.15s; }
.card:hover .sel, .card.selected .sel, .grid.selecting .sel { opacity: 1; }
.card .badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.badge { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid var(--line-2); backdrop-filter: blur(3px); }
.badge.income { color: var(--green); border-color: rgba(52, 211, 153, 0.5); }
.badge.low { color: var(--amber); border-color: rgba(251, 191, 36, 0.5); }
.badge.sent { color: var(--cyan); border-color: rgba(34, 211, 238, 0.5); }
.badge.reviewed { color: #c4b5fd; border-color: rgba(168, 85, 247, 0.5); }
.badge.nf { color: var(--muted); border-color: var(--line-2); }
/* The fourth net: read from the PDF behind the mail's button, or still not read. */
.badge.link { color: var(--cyan); border-color: rgba(34, 211, 238, 0.5); }
/* Photographed by hand rather than collected from a mailbox — identifiable at a glance in the grid. */
.badge.manual { color: var(--cyan); border-color: rgba(34, 211, 238, 0.5); }
.card .amount.nf { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.card .vendor { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .amount { font-family: var(--mono); font-size: 18px; font-weight: 600; direction: ltr; text-align: right; color: #e9ddff; }
.card .amount.none { color: var(--amber); font-size: 13px; font-family: var(--font); font-weight: 600; }
.card .meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.card .meta .cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- list */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-family: var(--mono); font-weight: 500; color: var(--muted-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.table tr { cursor: pointer; }
.table tbody tr:hover { background: rgba(168, 85, 247, 0.08); }
.table tr.selected { background: rgba(34, 211, 238, 0.1); }
.table .mini { width: 42px; height: 54px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line-2); background: #000; }
.table .amt { direction: ltr; text-align: right; font-weight: 600; white-space: nowrap; font-family: var(--mono); }
.table .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; box-shadow: 0 0 8px currentColor; }

.empty { border: 1px dashed var(--line-2); border-radius: 14px; padding: 50px 20px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); margin: 8px 0; }
.empty img { width: 150px; filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.5)); }

/* -------------------------------------------------------------- drawer */
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(780px, 96vw); background: var(--bg-2); border-right: 1px solid rgba(168, 85, 247, 0.4); z-index: 40; box-shadow: 20px 0 80px rgba(0, 0, 0, 0.6), var(--glow); display: flex; flex-direction: column; animation: slide 0.2s ease-out; }
@keyframes slide { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.backdrop { position: fixed; inset: 0; background: rgba(4, 3, 10, 0.6); backdrop-filter: blur(3px); z-index: 30; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.drawer-nav { display: flex; gap: 2px; }
.drawer-body { overflow-y: auto; padding: 16px 20px 40px; display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
.doc-view { background: #000; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; text-align: center; min-height: 300px; }
.doc-view img { max-width: 100%; border-radius: 6px; box-shadow: 0 0 24px rgba(168, 85, 247, 0.25); cursor: zoom-in; }
.doc-view .noimg { padding: 60px 20px; color: var(--muted); }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.doc-actions a.btn { text-decoration: none; }
.doc-form { display: flex; flex-direction: column; gap: 9px; }
.doc-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
.doc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.doc-form textarea { min-height: 60px; resize: vertical; }
.doc-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.doc-sub { font-size: 12px; color: var(--muted); direction: ltr; text-align: right; word-break: break-all; font-family: var(--mono); }
.ai-note { background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.35); color: #e5d4ff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.doc-form .save-row { display: flex; gap: 6px; margin-top: 4px; }
.doc-form .save-row .btn { flex: 1; }
.pill-row { display: flex; gap: 4px; flex-wrap: wrap; }
.pill { font-size: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; }
.danger-zone { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.subject-line { font-size: 13px; margin-top: 8px; }

/* --------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; background: rgba(4, 3, 10, 0.7); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: 20px; }
.modal-card { background: var(--bg-2); border: 1px solid rgba(168, 85, 247, 0.45); border-radius: 18px; width: min(580px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px 24px; box-shadow: var(--glow), 0 30px 80px rgba(0, 0, 0, 0.6); animation: pop 0.18s ease-out; }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card h2 { margin: 0 0 6px; font-size: 20px; }
.modal-card h3 { font-size: 14px; color: var(--muted); }
.modal-card .hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.modal-card .form { display: flex; flex-direction: column; gap: 10px; }
.modal-card label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.modal-card .actions { display: flex; gap: 8px; margin-top: 14px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { border: 1px solid var(--line-2); background: transparent; border-radius: 10px; padding: 8px 14px; font-weight: 600; color: var(--muted); }
.tabs button.active { background: rgba(168, 85, 247, 0.2); border-color: var(--brand); color: #fff; box-shadow: 0 0 12px rgba(168, 85, 247, 0.3); }
.provider-card { border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: all 0.15s; }
.provider-card:hover { border-color: var(--brand); box-shadow: var(--glow); }
.provider-card.recommended { border-color: rgba(34, 211, 238, 0.55); box-shadow: var(--glow-cyan); background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.06)); }
.provider-card.subtle { opacity: 0.72; }
.provider-card .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.5); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.provider-card .ic { font-size: 28px; }
.provider-card b { display: block; }
.provider-card small { color: var(--muted); }
.acct-list { display: flex; flex-direction: column; gap: 8px; }
.acct-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 10px 12px; }
.acct-item input[type="color"] { width: 30px; height: 30px; border: 0; padding: 0; background: none; }
.acct-item input[type="text"] { flex: 1; }
.rules { display: flex; flex-direction: column; gap: 6px; }
.rule { display: flex; gap: 8px; align-items: center; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.rule code { direction: ltr; background: #000; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; }
.log { background: #000; color: #c9c2ea; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; max-height: 260px; overflow-y: auto; direction: rtl; white-space: pre-wrap; }
.log .error { color: var(--red); } .log .warn { color: var(--amber); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.status-ok { color: var(--green); } .status-bad { color: var(--red); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* -------------------------------------------------------------- toasts */
.toasts { position: fixed; bottom: 18px; left: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #12101d; border: 1px solid rgba(168, 85, 247, 0.6); color: #fff; padding: 10px 16px; border-radius: 12px; box-shadow: var(--glow); animation: pop 0.2s; max-width: 380px; }
.toast.ok { border-color: rgba(52, 211, 153, 0.7); box-shadow: 0 0 20px rgba(52, 211, 153, 0.3); }
.toast.err { border-color: rgba(251, 113, 133, 0.7); box-shadow: 0 0 20px rgba(251, 113, 133, 0.3); }

@media (max-width: 1100px) { .report-body { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .main { padding: 14px; }
  .drawer-body { grid-template-columns: 1fr; }
  .stat.chart { grid-column: span 1; }
}

/* --------------------------------------------------- income by source */

.income-sources {
  margin: 14px 0 0; padding: 15px 18px 17px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.08) inset, 0 12px 34px -22px rgba(168, 85, 247, 0.9);
}
.income-sources .panel-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--brand); text-transform: uppercase; margin-bottom: 12px;
}
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; }

.src-row {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: opacity 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.src-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.src-name { font-weight: 600; font-size: 15px; }
.src-count { font-family: var(--mono); font-size: 11.5px; color: #8b86a6; white-space: nowrap; }

/* The figure is the point of the panel, so it is the largest thing in it. */
.src-sum { margin: 8px 0 13px; font-family: var(--mono); font-size: 25px; line-height: 1.15; color: var(--cyan); }
.src-sum .amt { text-shadow: 0 0 18px rgba(34, 211, 238, 0.45); }
.src-sum .amt.none { color: #6f6a88; text-shadow: none; }
.src-sum .sep { margin: 0 8px; color: #4b4666; font-size: 17px; }

.src-row.off { opacity: 0.5; }
.src-row.off .src-sum { color: #8b86a6; }
.src-row.off .src-sum .amt { text-shadow: none; }
.src-row.only { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.22), 0 0 30px -12px rgba(34, 211, 238, 0.8); }

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

.src-row.clickable { cursor: pointer; }
.src-row.clickable:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.src-row.clickable:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.src-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
}
.src-state.on {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(168, 85, 247, 0.9)); color: #fff;
  box-shadow: 0 0 18px -4px rgba(168, 85, 247, 0.8);
}
.src-state.off { background: rgba(255, 255, 255, 0.06); color: #8b86a6; border: 1px solid var(--line-2); }
.src-state.fixed { background: rgba(34, 211, 238, 0.12); color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.3); }

.src-view {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 13px; margin-inline-start: auto;
  border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: #e7e4f2;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.src-view:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--cyan); }
.src-view.active { background: var(--cyan); border-color: transparent; color: #04141a; font-weight: 600; }

/* --------------------------------- the headline pair and the two big boxes */

/* What came in and what went out, in one glance. The per-currency cells and
   every switch live downstairs in "פרטים נוספים": this row exists so the
   first thing on the card is a number, not a control panel. */
.sum-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 14px; }
.sum-cell {
  font: inherit; cursor: pointer; text-align: start; flex: 1 1 200px; padding: 14px 18px;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  display: grid; gap: 3px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sum-cell:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); }
.sum-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: #8b86a6; text-transform: uppercase; }
.sum-val { font-family: var(--mono); font-size: 30px; font-weight: 600; direction: ltr; text-align: right; }
.sum-other { font-family: var(--mono); font-size: 12px; color: #8b86a6; direction: ltr; text-align: right; }
.sum-n { font-size: 12px; color: #8b86a6; }
.sum-cell.income .sum-val { color: var(--cyan); text-shadow: 0 0 18px rgba(34, 211, 238, 0.4); }
.sum-cell.income:hover { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 26px -14px rgba(34, 211, 238, 0.9); }
.sum-cell.expense .sum-val { color: #e9b8ff; text-shadow: 0 0 18px rgba(168, 85, 247, 0.35); }
.sum-cell.expense:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 26px -14px rgba(168, 85, 247, 0.9); }

/* The two figures the owner has to act on. Deliberately the largest thing on
   the card, each with one sentence of arithmetic under it in plain words. */
.big-boxes { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.big-boxes.loading { color: #6f6a88; font-family: var(--mono); font-size: 13px; }
.big-box {
  flex: 1 1 260px; padding: 16px 20px; border-radius: 18px;
  border: 1px solid var(--line-2); background: var(--panel);
}
.bb-title { font-size: 13px; color: #cfc9e6; font-weight: 600; }
.bb-value { font-family: var(--mono); font-size: 38px; font-weight: 700; line-height: 1.15; margin-top: 4px; direction: ltr; text-align: right; }
.bb-value.muted { color: #6f6a88; }
.bb-calc { font-size: 12.5px; color: #a49fbd; margin-top: 6px; line-height: 1.6; }
.bb-calc b { color: #e7e4f2; font-family: var(--mono); direction: ltr; unicode-bidi: embed; }
.bb-actual { font-size: 12px; color: var(--amber); margin-top: 7px; font-family: var(--mono); }
.big-box.pay { border-color: rgba(168, 85, 247, 0.55); box-shadow: var(--glow); }
.big-box.pay .bb-value { color: #e9b8ff; text-shadow: 0 0 22px rgba(168, 85, 247, 0.4); }
.big-box.refund { border-color: rgba(34, 211, 238, 0.55); box-shadow: var(--glow-cyan); }
.big-box.refund .bb-value { color: var(--cyan); text-shadow: 0 0 22px rgba(34, 211, 238, 0.4); }
.big-box.advance .bb-value { color: #ffd9a0; }
.big-box.advance.empty .bb-value { color: #6f6a88; text-shadow: none; }

/* Everything that is evidence rather than answer. Closed by default; the
   browser remembers the owner's choice through localStorage. */
.more-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
.more-details > summary {
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #8b86a6; padding: 4px 0;
}
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::before { content: "▸"; display: inline-block; margin-inline-end: 8px; transition: transform 0.15s ease; }
.more-details[open] > summary::before { transform: rotate(-90deg); }
.more-details > summary:hover { color: var(--ink); }
.more-body { display: grid; gap: 16px; padding-top: 8px; }

/* "איך חישבנו?" — the same two calculations at length, for someone who has
   never filed a return. */
.how { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 14px; }
.how > summary { cursor: pointer; font-size: 13px; color: #cfc9e6; }
.how-body { margin-top: 8px; font-size: 13px; line-height: 1.75; color: #a49fbd; }
.how-body p { margin: 0 0 8px; }
.how-body b { color: #e7e4f2; font-family: var(--mono); direction: ltr; unicode-bidi: embed; }
.how-h { font-weight: 700; color: var(--cyan); margin-top: 10px !important; }

/* "מה רואה החשבון אמר" — the figures that came back, per period. */
.aa-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 6px; }
.aa-field { display: grid; gap: 4px; font-size: 12px; color: #8b86a6; }
.aa-field input { width: 130px; }

/* ------------------------------------------------- report figures */

.report-figures { margin: 14px 0 16px; display: grid; gap: 10px; }
.report-figures.loading { color: #6f6a88; font-family: var(--mono); font-size: 13px; }
.rep-line { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.rep-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: #8b86a6; text-transform: uppercase; }
.rep-cells { display: flex; gap: 10px; flex-wrap: wrap; }

.cur-cell {
  font: inherit; cursor: pointer; text-align: start; padding: 10px 15px; min-width: 156px;
  border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  display: grid; gap: 2px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cur-cell:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line-2); }
.cur-cell .cur-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: #6f6a88; }
.cur-cell .cur-val { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.cur-cell .cur-n { font-size: 11px; color: #8b86a6; }
.cur-cell.income .cur-val { color: var(--cyan); text-shadow: 0 0 16px rgba(34, 211, 238, 0.4); }
.cur-cell.income:hover { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 26px -14px rgba(34, 211, 238, 0.9); }
.cur-cell.expense .cur-val { color: #e9b8ff; text-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }
.cur-cell.expense:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 26px -14px rgba(168, 85, 247, 0.9); }

/* The "הכל" cell reads as a total-of-line, not another currency, so it gets
   its own dashed frame and a tint instead of the solid per-currency look. */
.cur-cell.all { border-style: dashed; background: rgba(255, 255, 255, 0.02); }
.cur-cell.all .cur-val { font-size: 17px; }
.cur-cell.all .cur-n { font-family: var(--mono); }
.cur-cell.all.income { background: rgba(34, 211, 238, 0.06); }
.cur-cell.all.income .cur-val { color: var(--cyan); }
.cur-cell.all.expense { background: rgba(168, 85, 247, 0.07); }
.cur-cell.all.expense .cur-val { color: #e9b8ff; }

/* A foreign income currency the owner switched off: the figure stays, just
   greyed, and the pill inside the cell is the switch back on. */
.cur-cell.off { opacity: 0.55; }
.cur-cell.off .cur-val { color: #8b86a6 !important; text-shadow: none !important; }
.cur-switch {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; width: fit-content;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer;
}
.cur-switch.on {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(168, 85, 247, 0.9)); color: #fff;
  box-shadow: 0 0 14px -4px rgba(168, 85, 247, 0.8);
}
.cur-switch.off { background: rgba(255, 255, 255, 0.06); color: #8b86a6; border: 1px solid var(--line-2); }
.cur-switch:hover { filter: brightness(1.15); }

.rep-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rep-counted { font-size: 12px; color: #cfc9e6; }
.rep-ex-label { font-size: 11.5px; color: #6f6a88; margin-inline-start: 6px; }
.ex-chip {
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px 11px; border-radius: 999px;
  border: 1px dashed var(--line-2); background: transparent; color: #8b86a6;
}
.ex-chip:hover { color: #e7e4f2; border-color: var(--cyan); border-style: solid; }

/* ------------------------------------------------------ VAT forecast card */

.vat-forecast { margin-top: 2px; }
.vf-cells { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.vf-cell {
  flex: 1 1 140px; min-width: 140px; border: 1px solid var(--line-2); background: var(--panel);
  border-radius: 12px; padding: 10px 13px;
}
.vf-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; }
.vf-val { font-family: var(--mono); font-size: 19px; font-weight: 600; margin-top: 4px; direction: ltr; text-align: right; }
.vf-val.big { font-size: 24px; }
.vf-sub { font-size: 11px; color: #8b86a6; margin-top: 3px; }
.vf-note { font-size: 11px; color: var(--amber); margin-top: 2px; }
.vf-cell.refund { border-color: rgba(34, 211, 238, 0.55); box-shadow: var(--glow-cyan); }
.vf-cell.refund .vf-val { color: var(--cyan); text-shadow: 0 0 16px rgba(34, 211, 238, 0.4); }
.vf-cell.pay { border-color: rgba(168, 85, 247, 0.55); box-shadow: var(--glow); }
.vf-cell.pay .vf-val { color: #e9b8ff; text-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }
/* Foreign income switched off: same grey treatment as an excluded .cur-cell. */
.vf-cell.off { opacity: 0.55; }
.vf-cell.off .vf-val { color: #8b86a6; }
.vf-hint { font-size: 11.5px; color: var(--muted-2); margin-top: 8px; }

/* ---------------------------------------------------- accountant checks */

.rep-controls { margin-top: 2px; }
.rep-controls-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chk-chip {
  font: inherit; font-size: 12px; cursor: pointer; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: #cfc9e6;
  transition: all 0.15s;
}
.chk-chip:hover { border-color: var(--cyan); color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.chk-chip.info { cursor: default; color: #8b86a6; }
.chk-chip.info:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.03); color: #8b86a6; }
.chk-chip.ok { border-color: rgba(52, 211, 153, 0.35); color: var(--green); }
.chk-chip.ok:hover { border-color: var(--green); }
.chk-chip.warn { border-color: rgba(251, 191, 36, 0.4); color: var(--amber); }
.chk-chip.warn:hover { border-color: var(--amber); background: rgba(251, 191, 36, 0.08); }

/* ------------------------------------------------------- sync progress */

/* Registers --pct as an animatable number rather than an opaque string, so a
   plain change to it (not just the JS tween) can transition on its own. */
@property --pct {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.sync-dock {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px 14px 14px; min-width: 320px;
  background: rgba(18, 16, 29, 0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.14) inset, 0 24px 60px -24px rgba(168, 85, 247, 0.85);
  animation: dock-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes dock-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }

.sync-dock .ring {
  --pct: 0; position: relative; width: 62px; height: 62px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.08) 0);
  transition: background 0.5s ease;
}
.sync-dock .ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.45); opacity: calc(var(--pct) * 0.01 + 0.15);
}
/* A gentle pulse while a run is in progress, quieted once it is done — the
   glow itself is the "still working" signal, not just the number. */
.sync-dock:not(.done) .ring::after { animation: dock-ring-pulse 1.6s ease-in-out infinite; }
@keyframes dock-ring-pulse {
  0%, 100% { opacity: calc(var(--pct) * 0.01 + 0.15); }
  50% { opacity: calc(var(--pct) * 0.01 + 0.5); }
}
.sync-dock .hole {
  position: absolute; inset: 6px; border-radius: 50%; background: var(--panel);
  display: grid; place-items: center;
}
.sync-dock .pct { font-family: var(--mono); font-size: 17px; font-weight: 600; color: #fff; }
.sync-dock .pct i { font-style: normal; font-size: 10px; color: #8b86a6; margin-inline-start: 1px; }

.sync-dock .dock-body { flex: 1; min-width: 0; }
.sync-dock .dock-title {
  font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync-dock .dock-meta { font-size: 11.5px; color: #8b86a6; margin-bottom: 2px; }
.sync-dock .dock-eta { font-size: 11px; color: var(--cyan); margin-bottom: 8px; }
.sync-dock .dock-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sync-dock .dock-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7); transition: width 0.5s ease;
}
/* Before a total is known there is nothing to be a percentage of, so the bar
   sweeps instead of pretending to a number it does not have. */
.sync-dock.indeterminate .dock-fill { width: 34%; animation: sweep 1.25s ease-in-out infinite; }
@keyframes sweep { 0% { margin-inline-start: -34%; } 100% { margin-inline-start: 100%; } }
.sync-dock.done .ring { background: conic-gradient(var(--cyan) 100%, var(--cyan) 0); }

@media (max-width: 640px) {
  .sync-dock { inset-inline: 12px; min-width: 0; }
}

/* ------------------------------------- headline figures, per currency */

.stat.money {
  font: inherit; text-align: start; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.stat.money .sub { font-family: var(--mono); font-size: 11px; color: #8b86a6; margin-top: 2px; }
.stat.money.income .val { color: var(--cyan); text-shadow: 0 0 16px rgba(34, 211, 238, 0.4); }
.stat.money.expense .val { color: #e9b8ff; text-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }
.stat.money.income:hover { border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 28px -14px rgba(34, 211, 238, 0.9); }
.stat.money.expense:hover { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 28px -14px rgba(168, 85, 247, 0.9); }
button.stat { border: 1px solid var(--line); }
#stat-all { cursor: pointer; }
#stat-all .sub { font-size: 11px; color: #8b86a6; margin-top: 2px; }

.stat.excluded-box { grid-column: span 2; }
.stat.excluded-box .ex-wrap { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* The old inline "הוצאות ₪ לפי חודש" tile is superseded by #chart-year below. */
.stat.chart { display: none; }

/* ------------------------------------------------------ chart-year panel */
.chart-year {
  --cy-income: #17a6bf;
  --cy-income-light: #5fd3e8;
  --cy-income-deep: #0c6f84;
  --cy-expense: #a855f7;
  --cy-expense-light: #dcb4fb;
  --cy-expense-deep: #6425b8;
  --cy-net: rgba(244, 241, 255, 0.75);
  margin-bottom: 10px;
  position: relative; /* positioning root for .cy-tooltip, which must not be
    clipped by #cy-scroll's overflow-y: hidden */
}
.chart-year .panel-head { margin-bottom: 4px; }

.cy-controls { display: flex; align-items: center; gap: 10px; }
.cy-controls .seg button { font-size: 12px; padding: 6px 12px; }

.cy-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
.cy-pill { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; }
.cy-pill .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase; }
.cy-pill .val { font-family: var(--mono); font-size: 18px; font-weight: 600; margin-top: 3px; direction: ltr; text-align: right; }
.cy-pill.cy-income .val { color: var(--cy-income-light); }
.cy-pill.cy-expense .val { color: var(--cy-expense-light); }
.cy-pill.cy-net .val.up { color: var(--green); }
.cy-pill.cy-net .val.down { color: var(--red); }

.cy-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cy-chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px 5px 9px;
  font-size: 12px; color: var(--muted); transition: all 0.15s;
}
.cy-chip:hover { border-color: var(--line-2); color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.cy-chip .dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.cy-chip .dot-income { background: var(--cy-income); color: var(--cy-income); }
.cy-chip .dot-expense { background: var(--cy-expense); color: var(--cy-expense); }
.cy-chip .dot-net { background: var(--cy-net); color: var(--cy-net); box-shadow: none; }
.cy-chip.is-off { opacity: 0.45; text-decoration: line-through; }

.cy-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 2px; }
.cy-svg { display: block; direction: ltr; }
.cy-svg text { font-family: var(--mono); fill: var(--muted-2); user-select: none; }
.cy-svg .cy-tick-label { font-size: 10.5px; }
.cy-svg .cy-month-label { font-size: 11px; }
.cy-svg .cy-month-label.is-now { fill: var(--cyan); font-weight: 600; }
.cy-svg .cy-month-label.is-prev { fill: var(--ink); }
.cy-svg .cy-grid { stroke: var(--line-2); stroke-width: 1; }
.cy-svg .cy-baseline { stroke: var(--line-2); stroke-width: 1; }
.cy-svg .cy-highlight { fill: rgba(255, 255, 255, 0.03); }
.cy-svg .cy-hit { fill: transparent; }
.cy-svg .cy-month:focus-visible .cy-hit { outline: none; }
.cy-svg .cy-month:focus-visible .cy-focus-ring { stroke: var(--cyan); stroke-width: 2; opacity: 1; }
.cy-svg .cy-focus-ring { fill: none; stroke: transparent; opacity: 0; rx: 6; }
.cy-svg .cy-month.is-current .cy-mark-income,
.cy-svg .cy-month.is-current .cy-mark-expense { opacity: 0.62; }
.cy-svg .cy-badge-progress { font-size: 9.5px; fill: var(--cyan); letter-spacing: 0.04em; }
.cy-svg .cy-net-dot { stroke: var(--panel); stroke-width: 2; }
.cy-svg .cy-net-dot-up { fill: var(--green); }
.cy-svg .cy-net-dot-down { fill: var(--red); }
.cy-svg .cy-net-line { stroke: var(--cy-net); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cy-svg .cy-usd-label { font-size: 9.5px; fill: var(--muted-2); }

.chart-year.hide-income .cy-mark-income { opacity: 0.08; pointer-events: none; }
.chart-year.hide-expense .cy-mark-expense { opacity: 0.08; pointer-events: none; }
.chart-year.hide-net .cy-mark-net { opacity: 0.08; pointer-events: none; }
.chart-year.focus-income .cy-mark-expense,
.chart-year.focus-income .cy-mark-net { opacity: 0.25; }
.chart-year.focus-expense .cy-mark-income,
.chart-year.focus-expense .cy-mark-net { opacity: 0.25; }
.chart-year.focus-net .cy-mark-income,
.chart-year.focus-net .cy-mark-expense { opacity: 0.25; }
.cy-mark-income, .cy-mark-expense, .cy-mark-net { transition: opacity 0.15s; }

.cy-usd-note { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 6px; }

.cy-tooltip {
  position: absolute; z-index: 6; pointer-events: none; direction: rtl; text-align: right;
  background: #000; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); min-width: 170px; transition: opacity 0.1s;
}
.cy-tooltip .tt-month { font-weight: 700; font-size: 12.5px; margin-bottom: 5px; }
.cy-tooltip .tt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--muted); padding: 2px 0; }
.cy-tooltip .tt-row .tt-val { font-family: var(--mono); font-weight: 600; color: var(--ink); direction: ltr; }
.cy-tooltip .tt-row.tt-income .tt-val { color: var(--cy-income-light); }
.cy-tooltip .tt-row.tt-expense .tt-val { color: var(--cy-expense-light); }
.cy-tooltip .tt-row.tt-net .tt-val.up { color: var(--green); }
.cy-tooltip .tt-row.tt-net .tt-val.down { color: var(--red); }
.cy-tooltip .tt-count { font-size: 10.5px; color: var(--muted-2); margin-top: 4px; }

.cy-tablewrap { margin-top: 12px; }
.cy-table-toggle { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted-2); background: none; border: 0; padding: 4px 0; text-decoration: underline; }
.cy-table { margin-top: 8px; font-size: 12.5px; }

@media (max-width: 640px) {
  .cy-pills { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------- what to actually do */

/* The two figures mean nothing until they say who receives them and when. */
.todo-strip {
  margin: 12px 0 4px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025);
}
.todo-strip.late { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.06); }
.todo-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.todo-k { font-size: 12.5px; color: #8b86a6; }
.todo-v { font-family: var(--mono); font-size: 22px; font-weight: 600; color: #fff; }
.todo-when { font-size: 12.5px; color: #8b86a6; }
.todo-strip.late .todo-when { color: #fca5a5; }
.todo-steps { margin: 0; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.85; }
.todo-steps li { color: #cfc9e6; }
.todo-steps b { font-family: var(--mono); color: #fff; }
.todo-foot { margin-top: 8px; font-size: 12px; color: #6f6a88; }
.bb-note { color: #8b86a6; font-size: 11.5px; }
@media (max-width: 820px) { .todo-v { font-size: 19px; } .todo-steps { font-size: 13px; } }

/* The advance rate is edited where it is read, not four clicks away. */
.rate-edit { display: inline-flex; align-items: center; gap: 2px; }
.rate-in {
  width: 62px; padding: 3px 7px; font: inherit; font-family: var(--mono); font-weight: 600;
  color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2);
  border-radius: 8px; text-align: center; -moz-appearance: textfield;
}
.rate-in::-webkit-outer-spin-button, .rate-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rate-in:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }
.rate-pc { font-family: var(--mono); font-weight: 600; color: #fff; }
.big-box .bb-note { margin-top: 6px; font-size: 11.5px; color: #8b86a6; line-height: 1.7; }
.rate-learn { font-size: 11.5px; }
@media (max-width: 820px) { .rate-in { width: 72px; padding: 6px 8px; font-size: 16px; } }

/* The owner's own report: clearly not the one that gets sent. */
.period-actions .btn.personal {
  background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line-2); color: #cfc9e6;
  box-shadow: none; font-weight: 500;
}
.period-actions .btn.personal:hover { border-color: var(--cyan); color: #fff; background: rgba(34, 211, 238, 0.08); }

/* The sum as three figures: component, component, result. The result is the
   biggest thing in the box; the sentence in words is small underneath. */
.bb-tiles { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.bb-tile {
  flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: center;
  padding: 10px 10px 9px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035);
  color: inherit; font: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.bb-tile:not([disabled]):hover { border-color: var(--cyan); background: rgba(34, 211, 238, 0.07); }
.bb-tile[disabled] { cursor: default; }
.bb-tile .tl-lbl { font-size: 11.5px; color: #8b86a6; line-height: 1.3; }
.bb-tile .tl-val { font-family: var(--mono); font-size: 19px; font-weight: 600; color: #fff; white-space: nowrap; }
.bb-tile .tl-sub { font-family: var(--mono); font-size: 10.5px; color: #6f6a88; }
.bb-tile.res { flex: 1.3 1 150px; border-color: transparent; }
.bb-tile.res .tl-val { font-size: 26px; }
.bb-tile.res.pay { background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(168, 85, 247, 0.4)); box-shadow: 0 0 22px -6px rgba(168, 85, 247, 0.9); }
.bb-tile.res.refund { background: linear-gradient(135deg, rgba(8, 145, 178, 0.5), rgba(34, 211, 238, 0.35)); box-shadow: 0 0 22px -6px rgba(34, 211, 238, 0.9); }
.bb-tile.rate .tl-val { display: flex; justify-content: center; }
.bb-op { align-self: center; font-family: var(--mono); font-size: 20px; color: #6f6a88; padding: 0 2px; }
.big-box .bb-calc { font-size: 11.5px; color: #8b86a6; }
.big-box .bb-calc b { color: #cfc9e6; }
@media (max-width: 820px) { .bb-tiles { gap: 6px; } .bb-tile .tl-val { font-size: 16px; } .bb-tile.res .tl-val { font-size: 22px; } .bb-op { font-size: 16px; } }

/* -------------------------------------------- hand-photographed documents */

.manual-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px dashed rgba(168, 85, 247, 0.5); border-radius: 14px; padding: 26px 16px; cursor: pointer;
  transition: all 0.15s; background: rgba(255, 255, 255, 0.02);
}
.manual-drop:hover, .manual-drop:focus-visible { background: rgba(168, 85, 247, 0.1); border-style: solid; box-shadow: var(--glow); outline: none; }
.manual-drop.drag { background: rgba(34, 211, 238, 0.1); border-color: var(--cyan); border-style: solid; box-shadow: var(--glow-cyan); }
.manual-drop-ic { font-size: 34px; }
.manual-drop-text b { display: block; font-size: 14px; }
.manual-drop-text span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.manual-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-height: 52vh; overflow-y: auto; }
.manual-file { display: flex; gap: 10px; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; background: rgba(255, 255, 255, 0.02); }
.manual-file-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #0b0a14; display: grid; place-items: center; }
.manual-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.manual-file-thumb .ph { font-size: 26px; opacity: 0.5; }
.manual-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.manual-file-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manual-file-status { font-size: 12px; color: var(--muted); }
.manual-file .bar.mini { height: 4px; }
.manual-file .bar.mini .fill { width: 0; }
.manual-file .bar.mini.indeterminate .fill { width: 34%; box-shadow: none; animation: sweep 1.25s ease-in-out infinite; }
.manual-file .bar.mini.done .fill { width: 100%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.manual-file .bar.mini.err .fill { width: 100%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.manual-file-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.manual-file-fields .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.manual-file-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.manual-file-fields button[data-save] { align-self: flex-start; }
/* A form control has to be allowed to obey its column.
 *
 * Grid and flex children default to `min-width: auto`, which for an <input>
 * is its intrinsic ~20-character width. On a phone the sheet gives inputs
 * 16px type and 12px padding — around 200px each — and two of them in a
 * `1fr 1fr` row inside a 270px card measured 412px, so every field ran off
 * both edges of the screen. Measured at 358px, not guessed: the upload card
 * wanted 488px and the document drawer's form overflowed by 50px.
 *
 * `min-width: 0` is the whole fix. It is stated once for every form container
 * rather than per component, because the trap is a property of grid and flex
 * and not of any one card — the next two-column row added anywhere would
 * have inherited the same bug. `max-width: 100%` only ever allows shrinking,
 * so nothing on a wide screen moves. */
.doc-form .row, .doc-form label,
.manual-file-fields .row, .manual-file-fields label,
.modal-card .row, .modal-card label { min-width: 0; }
.doc-form input, .doc-form select, .doc-form textarea,
.manual-file-fields input, .manual-file-fields select,
.modal-card input, .modal-card select, .modal-card textarea { min-width: 0; max-width: 100%; }
.doc-form .row > label > input, .doc-form .row > label > select,
.manual-file-fields .row input, .manual-file-fields .row select { width: 100%; }
/* A field the model could not read off the photo: red-ish border so the gap
   is obvious rather than a silently-guessed value sitting in the box. */
.manual-file-fields label.field-missing input,
.manual-file-fields label.field-missing select { border-color: var(--red); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35); }
.missing-tag { color: var(--red); font-weight: 600; font-size: 10px; margin-inline-start: 4px; }
.manual-file-readstatus { font-size: 11.5px; color: var(--muted); }
.manual-file-readstatus.has-missing { color: var(--red); }
.manual-file-blurry {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px; padding: 8px 10px; border-radius: 8px; font-size: 12px;
  color: #fecaca; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.35);
}
.manual-summary { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.3); font-size: 13px; color: #cffafe; }
@media (max-width: 820px) {
  .manual-drop { padding: 22px 12px; }
  .manual-drop, .manual-file-thumb { min-height: 44px; }
  .manual-file-fields input, .manual-file-fields select { font-size: 16px; padding: 10px 11px; }
  .manual-file-fields button[data-save] { min-height: 44px; padding: 10px 16px; }
  .manual-file-blurry button[data-retake] { min-height: 44px; padding: 10px 16px; }
}

/* The grouped foreign-currency tile lists several sums, so its value line runs
   smaller and wraps instead of overflowing the tile. */
.stat .val.small-val { font-size: 15px; line-height: 1.45; white-space: normal; }

/* ---- the quiet line under the tiles -------------------------------------
   Two diagnostics that used to sit as full tiles: a count of documents worth
   re-reading, and the breakdown of what was collected but not counted. Both
   answer "why is the number what it is" — needed sometimes, never the first
   thing on the screen. */

.stat-notes {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  margin: -6px 0 4px;
}

.note-chip {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.note-chip:hover { color: var(--ink); border-color: var(--line); }
.note-chip.warn { color: var(--amber); border-color: rgba(251, 191, 36, 0.32); }

.note-details {
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 5px 13px; font-size: 12.5px; color: var(--muted);
  max-width: 100%;
}
.note-details > summary { cursor: pointer; list-style: none; padding: 1px 0; }
.note-details > summary::-webkit-details-marker { display: none; }
.note-details > summary::after { content: " ▾"; color: var(--muted-2); }
.note-details[open] > summary::after { content: " ▴"; }
.note-details[open] { padding-bottom: 10px; }
.note-details .ex-wrap { margin-top: 8px; }

/* Each foreign sum is its own bidi island, or "25,021.8 HUF" and "฿371.00"
   get reordered into gibberish inside the Hebrew tile. */
.stat .val bdi, .stat .sub bdi { unicode-bidi: isolate; }
.stat .sub.rest { font-family: var(--mono); color: var(--muted-2); font-size: 11.5px; line-height: 1.6; }

/* "הצילומים שלי" — the pile the person added by hand, on or off. */
.btn-connect.on { border-color: rgba(124, 58, 237, 0.6); background: rgba(124, 58, 237, 0.22); color: var(--ink); }

/* -------------------------------------------- "הצילומים שלי", כתמונות
 * שורה ברשת המסמכים נושאת תמונה ממוזערת של 40 פיקסלים — מספיק כדי לדעת
 * שיש שם נייר, לא מספיק כדי לראות שהוא הפוך. הגלריה מציגה אותם בגודל
 * שאפשר לשפוט בו, ושתי הפעולות שעושים לצילום גרוע יושבות על הצילום עצמו.
 */
.modal-card.modal-wide { width: min(980px, 100%); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.photo-card { margin: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.photo-pic { height: 220px; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.photo-pic .ph { font-size: 40px; opacity: 0.5; }
.photo-card figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.photo-card figcaption b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-card figcaption span { color: var(--muted); }
.photo-acts { display: flex; gap: 6px; padding: 0 10px 10px; }
.photo-acts .btn { flex: 1; padding: 5px 4px; font-size: 12px; }
@media (max-width: 520px) { .photo-grid { grid-template-columns: 1fr; } .photo-pic { height: 280px; } }

/* ------------------------------------------- מתג הכנסות חו"ל, במקום שרואים
 * המתג היה קיים כפיל קטן בתוך תא המטבע, שיושב בתוך "פרטים נוספים" הסגור.
 * התוצאה: הכנסות דולריות על המסך, ושום דבר שאומר אם הן נספרות. זה אותו מתג
 * בדיוק, בסרגל שמעל המסמכים, שם השאלה עולה.
 */
.foreign-btn { display: inline-flex; align-items: center; gap: 7px; }
.foreign-btn .fb-mark { font-weight: 700; }
.foreign-btn.on { border-color: var(--brand); color: #d8b4fe; }
.foreign-btn.on .fb-mark { color: #4ade80; }
.foreign-btn.off { opacity: 0.85; }
.foreign-btn.off .fb-mark { color: var(--amber); }
.foreign-btn .fb-val { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; }
.foreign-btn.off .fb-val { color: var(--muted); }
.foreign-btn .fb-n { color: var(--muted-2); font-size: 11px; }

/* --------------------------------------------- סרגל הסינון: שורה אחת כברירת מחדל
 * שמונה־עשר פקדים החזיקו 259 פיקסלים קבועים מעל רשת המסמכים, שאליה היה צריך
 * לגלול שישה מסכים. כפתורי התקופה נשארים בחוץ — הם אלה שבאמת נלחצים — וכל
 * השאר נפתח לפי דרישה. המונה על הכפתור הוא מה שהופך את ההסתרה לבטוחה.
 */
.filters-bar { row-gap: 6px; }
.filters-bar .spacer { flex: 1; }
.filters-more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#f-more.on, #f-more.has-filters { border-color: var(--brand); color: #d8b4fe; }
#f-more-n { font-family: var(--mono); font-size: 11px; }
/* הגרף מתקפל: 522 פיקסלים של הקשר בין הכרטיס למסמכים. */
.cy-fold { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 10px; width: 32px; height: 28px; cursor: pointer; font-size: 13px; }
.cy-fold:hover { border-color: var(--brand); color: var(--ink); }
.chart-year.cy-shut > *:not(.panel-head) { display: none; }
.chart-year.cy-shut .cy-controls { display: none; }

/* Income invoice by voice (openVoiceInvoice). One big microphone; the draft
   appears under it by itself. */
.vi-listen { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.vi-mic { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line-2); background: rgba(0, 0, 0, 0.3); font-size: 28px; cursor: pointer; flex: none; transition: all 0.15s; }
.vi-mic.on { border-color: var(--red); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18), 0 0 18px rgba(239, 68, 68, 0.5); animation: vi-pulse 1.2s ease-in-out infinite; }
@keyframes vi-pulse { 50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.08), 0 0 24px rgba(239, 68, 68, 0.6); } }
.vi-text { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.vi-card { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(0, 0, 0, 0.25); }
.vi-card label { display: grid; gap: 4px; min-width: 0; }
.vi-card input, .vi-card select { min-width: 0; max-width: 100%; }
.vi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vi-total { font-size: 15px; }
@media (max-width: 520px) { .vi-row { grid-template-columns: 1fr; } }