:root {
  --cc-blue-light: #0088ce;
  --cc-blue-dark: #2631ca;
  --cc-lime: #cdd941;
  --cc-orange: #ff6a14;
  --cc-beige: #cac7a7;
  --cc-charcoal: #3f4443;
  --cc-text: #21303d;
  --cc-muted: #6a7784;
  --cc-border: #d7e1e8;
  --cc-surface: #ffffff;
  --cc-surface-alt: #f6f9fb;
  --cc-page: #eef3f6;
  --cc-shadow: 0 12px 32px rgba(38, 49, 202, 0.08);
  --cc-radius: 18px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--cc-text);
  background:
    radial-gradient(circle at top left, rgba(0, 136, 206, 0.1), transparent 28%),
    linear-gradient(180deg, #f9fbfd 0%, var(--cc-page) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 230px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(38, 49, 202, 0.98) 0%, rgba(0, 136, 206, 0.98) 72%, rgba(0, 136, 206, 0.9) 100%);
  clip-path: ellipse(92% 74% at 72% 0%);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 280px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(116, 219, 255, 0.55) 46%, rgba(0, 136, 206, 0.75) 100%);
  clip-path: ellipse(90% 38% at 74% 0%);
  z-index: -1;
}

header {
  background: transparent !important;
  border-bottom: none !important;
  color: white;
}

header h1 {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: white;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  padding: 0.4rem 0.7rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.app-brand img {
  display: block;
  height: 34px;
  width: auto;
  filter: none;
}

nav a {
  color: rgba(255, 255, 255, 0.82) !important;
}

nav a.active,
nav a:hover {
  color: white !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-user {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  white-space: nowrap;
}

.page,
.container {
  position: relative;
  z-index: 1;
}

.panel,
.card,
.hero,
.login-card {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: var(--cc-radius) !important;
  box-shadow: var(--cc-shadow) !important;
}

.panel h2,
.card h2,
.hero h2,
.section-header,
.company-title,
.results-header h2 {
  color: var(--cc-blue-light) !important;
}

.intro,
.panel-intro,
.hero p,
.meta,
.results-meta,
.small-text,
.hint,
.empty {
  color: var(--cc-muted) !important;
}

.btn,
.login-button {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.btn-primary,
.login-button {
  background: linear-gradient(90deg, var(--cc-blue-dark) 0%, var(--cc-blue-light) 100%) !important;
  color: white !important;
  border: none !important;
}

.btn-primary:hover,
.login-button:hover {
  filter: brightness(1.04);
}

.btn-secondary {
  background: #edf4f8 !important;
  color: var(--cc-charcoal) !important;
  border: 1px solid #d9e4ea !important;
}

.btn-danger {
  background: #fff1ea !important;
  color: #b54708 !important;
  border: 1px solid #ffd4bd !important;
}

input,
select,
textarea {
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--cc-blue-light) !important;
  box-shadow: 0 0 0 4px rgba(0, 136, 206, 0.12) !important;
}

label,
th {
  color: var(--cc-charcoal) !important;
}

.table-wrap,
table {
  background: #fff;
}

th {
  background: #f7fbfd !important;
  border-bottom-color: #dfe8ee !important;
}

td {
  border-bottom-color: #edf2f6 !important;
}

tr.selected td {
  background: #edf8fd !important;
}

tr:hover td {
  background: #f8fcfe !important;
}

.badge.active,
.badge-green {
  background: #e9fbff !important;
  color: var(--cc-blue-light) !important;
}

.badge.inactive,
.badge-red {
  background: #fff2ec !important;
  color: #b54708 !important;
}

.pill,
.account-code {
  background: #e9f8ff !important;
  color: var(--cc-blue-light) !important;
}

.section-title {
  color: var(--cc-blue-light) !important;
}

.message.success,
.banner.success {
  background: #ecfbf9 !important;
  border-color: #a6ece2 !important;
  color: #0f766e !important;
}

.message.error,
.banner.error,
.error-msg {
  background: #fff3ee !important;
  border-color: #ffd8c2 !important;
  color: #c2410c !important;
}

.message.info,
.company-title,
.txn-info-instructions,
.no-txns {
  background: #f5fbff !important;
  border-color: #d6ecf8 !important;
}

.company-title {
  border-left: 4px solid var(--cc-blue-light) !important;
}