:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;

  /* Emerald -> cyan is the app's signature accent, used for the logo badge,
     primary buttons, active nav state, and "positive" figures. */
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #10b981;
  --accent-cyan: #06b6d4;

  --success: #059669;
  --danger: #dc2626;
  --danger-light: #ef4444;
  --amber: #d97706;
  --blue: #2563eb;
  --violet: #7c3aed;

  --sidebar-bg: #0f172a;
  --sidebar-bg-soft: #1e293b;
  --sidebar-border: rgba(51, 65, 85, .6);
  --sidebar-text: #94a3b8;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-glow: 0 8px 20px -6px rgba(5, 150, 105, .35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}
#app { min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.hidden { display: none !important; }

/* ---------- Auth screens ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 15%, #0b3b34 0%, transparent 45%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #064e3b 100%);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(30, 41, 59, .8);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 32px;
  border: 1px solid rgba(51, 65, 85, .5);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.auth-brand .logo {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-cyan));
  box-shadow: var(--shadow-glow);
}
.auth-brand .logo svg { width: 21px; height: 21px; }
.auth-card h1 { font-size: 22px; font-weight: 900; margin: 0 0 4px; color: #fff; text-align: center; }
.auth-card p.sub { color: var(--sidebar-text); margin: 0 0 22px; text-align: center; font-size: 13px; }
.auth-switch { margin-top: 16px; text-align: center; color: var(--sidebar-text); }
.auth-switch a { color: var(--primary-light); font-weight: 600; }
.auth-card .helptext { color: var(--sidebar-text); }
.auth-card .field label { color: #cbd5e1; }
.auth-card .field input {
  background: rgba(15, 23, 42, .5);
  border: 1px solid rgba(71, 85, 105, .6);
  color: #fff;
}
.auth-card .field input::placeholder { color: #64748b; }
.auth-card .field input:focus {
  border-color: rgba(16, 185, 129, .6);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
.auth-card .alert-error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .25); color: #fca5a5; }

/* ---------- Form elements ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: #fff;
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }

/* Compact inline <select> used for tagging Category/PG directly in the
   Transactions table -- deliberately smaller than a form field select so it
   sits comfortably in a table cell. Sized (box-sizing + explicit height) to
   match a plain read-only row's rendered height as closely as browsers allow
   -- without this, switching a row into edit mode grows it a few px taller
   than its neighbors, which pushes every row below it down the page right
   when the user clicks the pencil. That vertical jump reads as "the
   transaction moved" even though its position in the list never changed.
   Matching heights keeps the row -- and everything below it -- visually
   anchored in place while editing. */
.inline-select {
  box-sizing: border-box;
  height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1;
  background: #fff;
  color: var(--text);
  width: 100%;
  max-width: 150px;
  /* Form controls default to vertical-align: baseline, which shares the
     surrounding text's line box (including its ascent/descent "strut") --
     that combination inflates the line box well past either the control's
     or the text's own height. vertical-align: middle removes the control
     from that baseline math, so the cell (and the row) stays as short as
     its plain-text neighbors instead of visibly growing. */
  vertical-align: middle;
}
.inline-select:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(16, 185, 129, .15); }
.inline-select:disabled { background: #f8fafc; color: var(--text-muted); cursor: not-allowed; }

/* Compact inline text box -- used for editing Remarks directly in the
   Transactions table, same treatment (and same row-height-matching reasoning)
   as .inline-select above. */
.inline-input {
  box-sizing: border-box;
  height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1;
  background: #fff;
  color: var(--text);
  width: 100%;
  vertical-align: middle;
}
.inline-input:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(16, 185, 129, .15); }
.inline-input::placeholder { color: #94a3b8; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  transition: all .15s ease;
}
.btn-primary {
  background: linear-gradient(90deg, var(--primary-light), var(--accent-cyan));
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(16, 185, 129, .45);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -4px rgba(16, 185, 129, .55); }
.btn-secondary { background: #fff; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-danger { background: #fff; border-color: #fecaca; color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }

/* A disabled button (e.g. "Import" while an account mismatch isn't yet
   confirmed) must look unmistakably inert -- otherwise it reads as clickable
   even though the browser blocks the click, which is confusing and, worse,
   looks like the safety check isn't working. */
.btn:disabled {
  opacity: .45;
  filter: grayscale(.3);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.alert {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 20px 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 15px;
  margin-bottom: 20px; padding: 4px 8px;
}
.sidebar .brand .logo {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-cyan));
  box-shadow: var(--shadow-glow);
}
.sidebar .brand .logo svg { width: 19px; height: 19px; }
.sidebar .brand .brand-sub { font-size: 11px; font-weight: 500; color: var(--sidebar-text); }
.sidebar nav { flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-text); padding: 10px 12px; border-radius: var(--radius-sm);
  margin-bottom: 3px; font-weight: 500; text-decoration: none; font-size: 13.5px;
  transition: all .12s ease; position: relative;
}
.sidebar nav a .nav-icon {
  width: 19px; height: 19px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
}
.sidebar nav a .nav-icon svg { width: 18px; height: 18px; }
.sidebar nav a:hover { background: var(--sidebar-bg-soft); color: #fff; }
.sidebar nav a.active .nav-icon { opacity: 1; }
.sidebar nav a.active {
  background: rgba(16, 185, 129, .15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, .2);
}
.sidebar nav a.active::after {
  content: '';
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399;
}
.sidebar .user-box {
  margin-top: 16px; padding: 12px; border-top: 1px solid var(--sidebar-border);
  font-size: 12.5px; color: var(--sidebar-text);
}
.sidebar .user-box .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sidebar .user-box .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-light), var(--accent-cyan));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sidebar .user-box .who-text { min-width: 0; }
.sidebar .user-box .name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user-box .email { font-size: 11.5px; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .logout-btn {
  width: 100%; background: transparent; border: 1px solid var(--sidebar-border);
  color: var(--sidebar-text); padding: 8px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600;
}
.sidebar .logout-btn:hover { background: var(--sidebar-bg-soft); color: #fff; border-color: #475569; }

.main { flex: 1; min-width: 0; padding: 28px 32px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-size: 26px; font-weight: 900; margin: 0; letter-spacing: -.01em; }
.page-header p { color: var(--text-muted); margin: 4px 0 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card + .card { margin-top: 18px; }
.card h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .shell { flex-direction: column; } .sidebar { width: 100%; } }

/* Dashboard KPI rows -- both stat-card rows share the same 3-column grid
   (previously the balances row used a 4-column grid while the transaction-
   counts row used 3, so cards in the two rows landed at different widths
   and didn't line up into shared columns) plus consistent spacing between
   the two rows and the Bank accounts card that follows them. */
.stat-row + .stat-row { margin-top: 16px; }
.stat-row + .card { margin-top: 18px; }

/* Sub-tab strip -- e.g. Deals / USDT Report / Dashboard under Third Party
   RTGS. Plain anchors (so they're real, bookmarkable/back-button-friendly
   hash routes) styled as a pill row, active one filled with the primary
   gradient like the sidebar's active nav item. */
.subtabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.subtabs a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13.5px;
  background: #fff;
}
.subtabs a:hover { border-color: var(--primary-light); color: var(--text); }
.subtabs a.active {
  background: linear-gradient(90deg, var(--primary-light), var(--accent-cyan));
  border-color: transparent;
  color: #fff;
}

/* Stat cards -- tinted background + bordered, with a premium gradient icon
   chip up top (glossy highlight + color-matched glow), mirroring the
   reference app's KPI card treatment. */
.stat-card {
  position: relative;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .18);
}
.stat-card .icon-chip {
  position: relative;
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  color: #fff;
  isolation: isolate;
}
.stat-card .icon-chip svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
/* Glossy top-edge sheen -- a soft diagonal highlight layered over the
   gradient so the chip reads as a raised, lacquered surface rather than a
   flat color swatch. */
.stat-card .icon-chip::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
  z-index: 1;
}
.stat-card .label { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.stat-card .value { font-size: 21px; font-weight: 900; margin-top: 3px; letter-spacing: -.01em; }
.stat-card .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.stat-card-total { background: #ecfdf5; border-color: #a7f3d0; }
.stat-card-total .icon-chip { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); box-shadow: 0 8px 18px -6px rgba(5, 150, 105, .55); }
.stat-card-total .value { color: #047857; }

.stat-card-available { background: #eff6ff; border-color: #bfdbfe; }
.stat-card-available .icon-chip { background: linear-gradient(135deg, #60a5fa, #1d4ed8); box-shadow: 0 8px 18px -6px rgba(37, 99, 235, .55); }
.stat-card-available .value { color: #1d4ed8; }

.stat-card-freeze { background: #f5f3ff; border-color: #ddd6fe; }
.stat-card-freeze .icon-chip { background: linear-gradient(135deg, #a78bfa, #6d28d9); box-shadow: 0 8px 18px -6px rgba(124, 58, 237, .55); }
.stat-card-freeze .value { color: #6d28d9; }

.stat-card-count { background: #f8fafc; border-color: var(--border); }
.stat-card-count .icon-chip { background: linear-gradient(135deg, #64748b, #1e293b); box-shadow: 0 8px 18px -6px rgba(30, 41, 59, .45); }

.stat-card-tagged { background: #ecfdf5; border-color: #a7f3d0; }
.stat-card-tagged .icon-chip { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); box-shadow: 0 8px 18px -6px rgba(5, 150, 105, .55); }
.stat-card-tagged .value { color: #047857; }

.stat-card-untagged { background: #fffbeb; border-color: #fde68a; }
.stat-card-untagged .icon-chip { background: linear-gradient(135deg, #fbbf24, #b45309); box-shadow: 0 8px 18px -6px rgba(217, 119, 6, .55); }
.stat-card-untagged .value { color: #b45309; }

.stat-card-inflow { background: #ecfdf5; border-color: #a7f3d0; }
.stat-card-inflow .icon-chip { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); box-shadow: 0 8px 18px -6px rgba(5, 150, 105, .55); }
.stat-card-inflow .value { color: #047857; }

.stat-card-outflow { background: #fef2f2; border-color: #fecaca; }
.stat-card-outflow .icon-chip { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 8px 18px -6px rgba(185, 28, 28, .55); }
.stat-card-outflow .value { color: #b91c1c; }

/* Inflow/Outflow cards: same stat-card chrome, plus a scrollable
   per-category breakdown underneath the headline total. */
.flow-card { display: flex; flex-direction: column; }
.flow-rows {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  max-height: 220px;
  overflow-y: auto;
}
.flow-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
}
.flow-row + .flow-row { border-top: 1px dashed rgba(15, 23, 42, .06); }
.flow-row-cat { color: var(--text-muted); }
.flow-row-amt { font-weight: 700; }

/* Totals row under the Dashboard's Bank accounts table. */
tfoot .totals-row td { border-top: 2px solid var(--border); background: #f8fafc; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; }
thead tr:first-child th:first-child { border-top-left-radius: 10px; }
thead tr:first-child th:last-child { border-top-right-radius: 10px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.table-wrap table { border: none; }
.table-wrap th, .table-wrap td { border-left: none; border-right: none; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.badge-credit { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-debit { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.badge-active { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-freeze { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-tagged { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-untagged { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-category { background: #ecfdf5; color: #047857; border-color: #a7f3d0; font-weight: 500; }

.icon-btn-save { color: #059669; }
.icon-btn-save:hover { background: #ecfdf5; color: #047857; }

.role-pill {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: rgba(16, 185, 129, .15); color: #34d399;
  border: 1px solid rgba(16, 185, 129, .25); vertical-align: middle;
}

.quick-dates { display: flex; gap: 6px; flex-wrap: wrap; }
.qd-btn {
  background: #fff; border: 1px solid var(--border); color: var(--text-muted);
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.qd-btn:hover { color: var(--text); border-color: #cbd5e1; }
.qd-btn.active { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.qd-btn.qd-clear { color: var(--text-muted); }

/* Checkbox multi-select dropdown (Transactions filters) */
.msd { position: relative; display: inline-block; }
.msd summary {
  cursor: pointer; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-size: 13px; list-style: none; white-space: nowrap; user-select: none;
}
.msd summary::-webkit-details-marker { display: none; }
.msd summary::after { content: ' \25BE'; color: var(--text-muted); }
.msd[open] summary { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
.msd-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 6px; min-width: 220px; max-height: 240px; overflow-y: auto;
}
.msd-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; border-radius: 8px; cursor: pointer; }
.msd-opt:hover { background: #f8fafc; }
.msd-opt input { width: auto; }
.msd-opt-all { font-weight: 700; color: var(--primary-dark); }
.msd-sep { height: 1px; background: var(--border); margin: 4px 2px 6px; }

/* Search box at the top of a checkbox dropdown -- only rendered once a list
   is long enough to be worth searching (see MSD_SEARCH_THRESHOLD). Sticky so
   it stays put while the checkbox list scrolls underneath it. */
.msd-search {
  position: sticky; top: 0; z-index: 1;
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--text);
}
.msd-search:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(16, 185, 129, .15); }

.amount-credit { color: var(--success); font-weight: 700; }
.amount-debit { color: var(--danger); font-weight: 700; }

.bank-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bank-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 34px; margin-bottom: 8px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .field { margin-bottom: 0; min-width: 140px; }
.toolbar .field.grow { flex: 1; min-width: 200px; }

.bank-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.icon-btn { background: none; border: none; color: var(--text-muted); font-size: 15px; padding: 5px 7px; border-radius: 8px; }
.icon-btn:hover { background: #f1f5f9; color: var(--text); }

.kpi-mini { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; min-width: 120px; }
.kpi-mini-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi-mini-value { font-size: 17px; font-weight: 800; margin-top: 3px; }

.search-bar { position: relative; max-width: 360px; }
.search-bar .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 15px; height: 15px; pointer-events: none; }
.search-bar .search-icon svg { width: 15px; height: 15px; }
.search-bar input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; background: #fff; color: var(--text); }
.search-bar input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-md);
  width: 100%; max-width: 440px; padding: 26px; max-height: 90vh; overflow-y: auto;
}
.modal.modal-wide { max-width: 680px; }
.modal .table-scroll { overflow-x: auto; }
.modal h2 { margin-top: 0; font-size: 18px; font-weight: 800; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.pagination { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; color: var(--text-muted); font-size: 13px; }

.helptext { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.tag-list { display: flex; gap: 8px; flex-wrap: wrap; }