:root {
  --polo-green: #1c4b6b;
  --polo-green-dark: #15485c;
  --polo-green-light: #eaf2f5;
  --polo-green-soft: #eef2f5;
  --polo-cream: #eaf3f5;
  --polo-brown: #0e1f2c;
  --polo-brown-soft: #3e6c7a;
  --polo-border: #9ab6c8;
  --polo-sky: #74acdf;
  --polo-sky-soft: #e0eef8;
  --polo-disabled: #a8bfd4;
  --polo-disabled-text: #70879a;
  --polo-gold: #d37bbd;
  --polo-gold-soft: #c9e2f3;
  --white: #ffffff;
  --ink: #111827;
  --page-bg: #ffffff;
  --shadow-soft: 0 16px 40px rgba(12, 28, 20, 0.12);
  --shadow-card: 0 10px 26px rgba(28, 107, 58, 0.12);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --pf-green: #1c456b;
  --pf-green-dark: #154b5c;
  --pf-border: #9aafc8;
  --pf-soft-text: #3e587a;
  --pf-disabled: #a8bfd4;
  --pf-soft-bg: #eef2f5;
  --pf-dark-text: #0e1b2c;
  --pf-cream-bg: #eaf1f5;
  --pf-sky: #74acdf;
  --pf-sky-dark: #5a9cd1;
  --pf-sky-hover: #5d99cc;
  --pf-blue: #3b82f6;
  --pf-gold: #37a7d4;
  --pf-gold-dark: #2788c9;
  --pf-brown: #77138b;
  --pf-brown-dark: #10476b;
  --pf-brown-muted: #708b9a;
  --pf-copy-muted: #314a5f;
  --pf-copper: #6a7fc4;
  --pf-sky-bg: #e0eef8;
  --pf-beige-bg: #d0e3e8;
  --pf-panel-bg: #f0f7f2;
  --pf-panel-alt: #f2efe9;
  --pf-card-bg: #f9f7f2;
  --pf-card-highlight: #fdfaf2;
  --pf-warning-bg: #fff8ee;
  --pf-line-green: #e0ebe0;
  --pf-line-soft: #f0ebe0;
  --pf-green-10: rgba(28, 56, 107, 0.1);
  --pf-green-20: rgba(28, 72, 107, 0.2);
  --pf-green-40: rgba(28, 53, 107, 0.4);
  --pf-green-50: rgba(28, 29, 107, 0.5);
  --pf-green-60: rgba(28, 49, 107, 0.6);
  --pf-border-50: rgba(154, 185, 200, 0.5);
  --pf-cream-50: rgba(234, 240, 245, 0.5);
}

.bg-page { background-color: var(--page-bg); }
.bg-polo-cream { background-color: var(--polo-cream); }
.bg-polo-soft { background-color: var(--polo-green-soft); }
.bg-polo-panel { background-color: rgba(255,255,255,0.9); }

.text-polo-brown { color: var(--polo-brown); }
.text-polo-soft { color: var(--polo-brown-soft); }
.text-polo-green { color: var(--polo-green); }

.border-polo-border { border-color: var(--polo-border); }
.border-polo-green { border-color: var(--polo-green); }

.text-pf-green { color: var(--pf-green); }
.text-pf-green-dark { color: var(--pf-green-dark); }
.text-pf-soft { color: var(--pf-soft-text); }
.text-pf-dark { color: var(--pf-dark-text); }
.text-pf-sky { color: var(--pf-sky); }
.text-pf-sky-dark { color: var(--pf-sky-dark); }
.text-pf-gold { color: var(--pf-gold); }
.text-pf-brown { color: var(--pf-brown); }
.text-pf-brown-muted { color: var(--pf-brown-muted); }
.text-pf-copy-muted { color: var(--pf-copy-muted); }

.bg-pf-soft { background-color: var(--pf-soft-bg); }
.bg-pf-cream { background-color: var(--pf-cream-bg); }
.bg-pf-green { background-color: var(--pf-green); }
.bg-pf-green-dark { background-color: var(--pf-green-dark); }
.bg-pf-green-10 { background-color: var(--pf-green-10); }
.bg-pf-green-20 { background-color: var(--pf-green-20); }
.bg-pf-sky-soft { background-color: var(--pf-sky-bg); }
.bg-pf-sky-hover { background-color: var(--pf-sky-hover); }
.bg-pf-gold { background-color: var(--pf-gold); }
.bg-pf-gold-dark { background-color: var(--pf-gold-dark); }
.bg-pf-border { background-color: var(--pf-border); }
.bg-pf-disabled { background-color: var(--pf-disabled); }
.bg-pf-brown { background-color: var(--pf-brown); }
.bg-pf-brown-dark { background-color: var(--pf-brown-dark); }
.bg-pf-beige { background-color: var(--pf-beige-bg); }
.bg-pf-panel { background-color: var(--pf-panel-bg); }
.bg-pf-panel-alt { background-color: var(--pf-panel-alt); }
.bg-pf-card { background-color: var(--pf-card-bg); }
.bg-pf-card-highlight { background-color: var(--pf-card-highlight); }
.bg-pf-warning { background-color: var(--pf-warning-bg); }
.bg-pf-cream-50 { background-color: var(--pf-cream-50); }

.border-pf { border-color: var(--pf-border); }
.border-pf-50 { border-color: var(--pf-border-50); }
.border-pf-green { border-color: var(--pf-green); }
.border-pf-green-40 { border-color: var(--pf-green-40); }
.border-pf-green-50 { border-color: var(--pf-green-50); }
.border-pf-green-60 { border-color: var(--pf-green-60); }
.border-pf-sky { border-color: var(--pf-sky); }
.border-pf-copper { border-color: var(--pf-copper); }
.border-pf-line { border-color: var(--pf-line-green); }
.border-pf-beige { border-color: var(--pf-beige-bg); }
.border-pf-soft-line { border-color: var(--pf-line-soft); }

.divide-pf-beige > :not([hidden]) ~ :not([hidden]) { border-color: var(--pf-beige-bg); }
.divide-pf-soft-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--pf-line-soft); }

.ring-pf-green { --tw-ring-color: var(--pf-green); }
.ring-pf { --tw-ring-color: var(--pf-border); }

.accent-pf-green { accent-color: var(--pf-green); }

.placeholder-pf-brown-muted::placeholder { color: var(--pf-brown-muted); }

.hover\:bg-pf-cream:hover { background-color: var(--pf-cream-bg); }
.hover\:bg-pf-soft:hover { background-color: var(--pf-soft-bg); }
.hover\:bg-pf-panel:hover { background-color: var(--pf-panel-bg); }
.hover\:bg-pf-border:hover { background-color: var(--pf-border); }
.hover\:bg-pf-green-10:hover { background-color: var(--pf-green-10); }
.hover\:bg-pf-green-dark:hover { background-color: var(--pf-green-dark); }
.hover\:bg-pf-sky-hover:hover { background-color: var(--pf-sky-hover); }

.hover\:text-pf-dark:hover { color: var(--pf-dark-text); }
.hover\:text-pf-green:hover { color: var(--pf-green); }
.hover\:text-pf-green-dark:hover { color: var(--pf-green-dark); }
.hover\:text-pf-sky-dark:hover { color: var(--pf-sky-dark); }

.hover\:border-pf-green:hover { border-color: var(--pf-green); }
.hover\:border-pf-green-60:hover { border-color: var(--pf-green-60); }

.focus\:border-pf-green:focus { border-color: var(--pf-green); }
.focus\:ring-pf-green:focus { --tw-ring-color: var(--pf-green); }
.focus\:ring-pf:focus { --tw-ring-color: var(--pf-border); }

.disabled\:bg-pf-disabled:disabled { background-color: var(--pf-disabled); }
.disabled\:bg-pf-green-dark:disabled { background-color: var(--pf-green-dark); }

.from-pf-green {
  --tw-gradient-from: var(--pf-green) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(28 107 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pf-green-dark {
  --tw-gradient-from: var(--pf-green-dark) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 92 48 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pf-soft {
  --tw-gradient-from: var(--pf-soft-text) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(122 92 62 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pf-sky {
  --tw-gradient-from: var(--pf-sky) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(116 172 223 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pf-gold {
  --tw-gradient-from: var(--pf-gold) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(212 175 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pf-gold-dark {
  --tw-gradient-from: var(--pf-gold-dark) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(201 162 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-pf-green-dark {
  --tw-gradient-to: rgb(21 92 48 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--pf-green-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-pf-dark { --tw-gradient-to: var(--pf-dark-text) var(--tw-gradient-to-position); }
.to-pf-green-dark { --tw-gradient-to: var(--pf-green-dark) var(--tw-gradient-to-position); }
.to-pf-sky { --tw-gradient-to: var(--pf-sky) var(--tw-gradient-to-position); }
.to-pf-blue { --tw-gradient-to: var(--pf-blue) var(--tw-gradient-to-position); }
.to-pf-gold { --tw-gradient-to: var(--pf-gold) var(--tw-gradient-to-position); }
.to-pf-gold-dark { --tw-gradient-to: var(--pf-gold-dark) var(--tw-gradient-to-position); }

.rounded-polo { border-radius: 12px; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top, rgba(28, 60, 107, 0.04), transparent 30%),
    linear-gradient(180deg, #e7eff2 0%, var(--page-bg) 100%);
  color: var(--polo-brown);
}

body,
#root,
.container {
  background-color: var(--page-bg);
}

#root {
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

.font-display {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.gold-text {
  color: var(--polo-green);
}

.gold-border {
  border-color: rgba(28, 60, 107, 0.22);
}

.gold-bg {
  background: linear-gradient(135deg, var(--polo-green) 0%, var(--polo-green-dark) 100%);
}

.card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(211, 183, 123, 0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(28, 60, 107, 0.28);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.4rem;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 1px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(28, 60, 107, 0.12);
}

.btn-primary {
  background: linear-gradient(135deg, var(--polo-green) 0%, var(--polo-green-dark) 100%);
  color: var(--white);
  border-color: rgba(28, 60, 107, 0.7);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--polo-green-dark) 0%, #0d2d20 100%);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.6);
  color: var(--polo-green);
  border-color: rgba(28, 60, 107, 0.38);
}

.btn-secondary:hover {
  background: rgba(28, 60, 107, 0.06);
}

.btn-disabled {
  background: #d9d0c2;
  color: #7b6456;
  cursor: not-allowed;
  border-color: #d9d0c2;
  box-shadow: none;
  transform: none;
}

header {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(234, 238, 245, 0.96));
  border: 1px solid rgba(211, 183, 123, 0.75);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px rgba(12, 28, 20, 0.08);
}

header .gold-text,
header .text-\[\#1C6B3A\] {
  color: var(--polo-green) !important;
}

header select {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(211, 183, 123, 0.8);
  color: var(--polo-brown);
  padding: 0.55rem 0.8rem;
}

nav {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(211, 183, 123, 0.7);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

nav button {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

nav button:not(.gold-bg):hover {
  background: rgba(28, 60, 107, 0.05) !important;
  color: var(--polo-green) !important;
}

nav button.gold-bg {
  box-shadow: 0 12px 22px rgba(28, 60, 107, 0.18);
}

main {
  padding-bottom: 2rem;
}

section,
article,
.table-card {
  background: rgba(255, 255, 255, 0.94);
}

input,
textarea,
select {
  border-radius: 10px !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 60, 107, 0.12);
  border-color: rgba(28, 60, 107,  0.45) !important;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(28, 107, 58, 0.26);
  border-radius: 999px;
}