:root {
  --fw-bg: #f6f8fb;
  --fw-surface: #ffffff;
  --fw-surface-soft: #f9fbff;
  --fw-border: #e5eaf2;
  --fw-border-strong: #d7dfeb;
  --fw-text: #182230;
  --fw-muted: #637083;
  --fw-primary: #2563eb;
  --fw-primary-soft: #e8f0ff;
  --fw-success: #15803d;
  --fw-warning: #b45309;
  --fw-danger: #dc2626;
  --fw-radius: 10px;
  --fw-radius-sm: 7px;
  --fw-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

html {
  background: var(--fw-bg);
}

body {
  color: var(--fw-text);
  background:
    radial-gradient(circle at 18% -10%, rgba(37, 99, 235, 0.08), transparent 28rem),
    linear-gradient(180deg, #fbfdff 0%, var(--fw-bg) 22rem);
  letter-spacing: 0;
}

.card,
.section,
.panel,
.module-card,
.metric-card,
.stat-card,
.factor-card,
.import-card,
.account-group,
.valuation-card,
.flow-card {
  border: 1px solid var(--fw-border) !important;
  border-radius: var(--fw-radius) !important;
  background: var(--fw-surface) !important;
  box-shadow: var(--fw-shadow);
}

button,
.btn,
.tab-btn,
.nav-step {
  border-radius: var(--fw-radius-sm) !important;
  letter-spacing: 0;
}

button:not(:disabled),
.btn:not(:disabled),
.tab-btn:not(:disabled) {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

button:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

input,
select,
textarea {
  border-color: var(--fw-border-strong) !important;
  border-radius: var(--fw-radius-sm) !important;
}

.table-responsive,
.table-wrap,
.flow-table-wrap {
  border-radius: var(--fw-radius-sm);
}

table {
  border-color: var(--fw-border) !important;
}

th {
  background: var(--fw-surface-soft) !important;
  color: var(--fw-muted) !important;
  font-weight: 700;
}

td,
th {
  border-color: var(--fw-border) !important;
}

.tag,
.badge,
.status-badge {
  border-radius: 999px !important;
}

.up,
.positive,
.ok {
  color: var(--fw-success);
}

.down,
.negative,
.bad,
.error {
  color: var(--fw-danger);
}

.warn,
.warning {
  color: var(--fw-warning);
}

@media (max-width: 768px) {
  body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .section,
  .panel {
    padding: 14px !important;
  }

  .tab-bar,
  .nav-steps,
  .navbar-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 12px;
  }

  button,
  .btn,
  .tab-btn {
    min-height: 34px;
  }
}