:root {
  --bg-page:#F5F5F0; --bg-card:#FFFFFF; --bg-card-2:#F9FAFB; --bg-hover:#F9FAFB;
  --text-primary:#111827; --text-secondary:#1F2937; --text-muted:#4B5563;
  --text-accent:#4A8C47; --text-danger:#B91C1C; --text-warning:#B45309; --text-caution:#EA580C; --text-info:#2563EB;
  --border-primary:#E5E7EB; --border-light:#F3F4F6;
  --btn-primary-bg:#0071E3; --btn-primary-fg:#FFFFFF; --btn-primary-bg-hover:#0059B8;
  --badge-green-bg:#EDF2EB; --badge-green-fg:#6B8A68;
  --badge-red-bg:#FEE2E2; --badge-red-fg:#DC2626;
  --badge-neutral-bg:#F3F4F6; --badge-neutral-fg:#6B7280;
  --shadow-card:0 1px 3px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06);
  --radius-card:16px; --radius-input:12px; --radius-badge:8px;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.app { max-width:520px; margin:0 auto; min-height:100vh; padding:14px 14px calc(84px + env(safe-area-inset-bottom, 0px)); }
.app-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.app-brand { font-size:15px; font-weight:600; }
.app-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; }

.card { background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:16px 18px; margin-bottom:10px; }
.section-title { font-size:13px; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em; margin:14px 2px 8px; }

/* KPI-плитки 2 в ряд */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kpi { background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; }
.kpi-label { font-size:12px; color:var(--text-muted); font-weight:600; }
.kpi-value { font-size:22px; font-weight:700; line-height:1.1; }
.kpi-sub { font-size:12px; color:var(--text-secondary); }
.kpi[data-tone="ok"] .kpi-value { color:#15161A; }
.kpi[data-tone="danger"] .kpi-value { color:#15161A; }
.kpi[data-tone="ok"] .kpi-label { color:#16A34A; }
.kpi[data-tone="danger"] .kpi-label { color:#DC2626; }

/* строки списка */
.list-row { display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 0; border-bottom:.5px solid var(--border-primary); }
.list-row:last-child { border-bottom:none; }
.list-main { font-size:14px; font-weight:500; }
.list-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.list-amount { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }

/* бейджи статусов */
.badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--radius-badge); }
.badge-green{background:var(--badge-green-bg);color:var(--badge-green-fg);}
.badge-red{background:var(--badge-red-bg);color:var(--badge-red-fg);}
.badge-neutral{background:var(--badge-neutral-bg);color:var(--badge-neutral-fg);}

/* поля и кнопки */
.field-label { font-size:13px; color:var(--text-muted); font-weight:500; margin:10px 2px 4px; display:block; }
.input { width:100%; font-size:16px; padding:12px 14px; border:1px solid var(--border-primary);
  border-radius:var(--radius-input); background:var(--bg-card); color:var(--text-primary); }
.input:focus { outline:none; border-color:var(--btn-primary-bg); }
.btn { width:100%; font-size:16px; font-weight:600; padding:14px; border:none;
  border-radius:var(--radius-input); cursor:pointer; margin-top:10px; }
.btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-fg); }
.btn-primary:active { background:var(--btn-primary-bg-hover); }
.btn-ghost { background:transparent; color:var(--text-muted); }

/* нижнее меню */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:520px; margin:0 auto; display:flex; justify-content:space-around;
  background:rgba(245,245,240,.92); backdrop-filter:blur(20px);
  border-top:1px solid var(--border-primary); height:calc(64px + env(safe-area-inset-bottom,0));
  padding-bottom:env(safe-area-inset-bottom,0); }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--text-muted); background:none; border:none; cursor:pointer;
  font-size:11px; font-weight:500; text-decoration:none; position:relative; }
.nav-item .ico { width:24px; height:24px; }
.nav-item.active { color:var(--text-primary); }
.nav-item:active { transform:scale(.96); }
.nav-badge { position:absolute; top:8px; transform:translateX(16px);
  background:var(--text-danger); color:#fff; font-size:10px; font-weight:700;
  border-radius:10px; padding:1px 5px; }
.hidden { display:none; }

.action-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:10px 0; }
.action-tile { padding:12px 8px; font-size:14px; font-weight:600;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border-primary); border-radius:12px; cursor:pointer; }
.action-tile:active { background:var(--bg-hover); }