:root {
  --main: #208918;
  --main-dark: #14650f;
  --light: #eaf7e7;
  --soft: #f5fbf3;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e2ec;
  --white: #ffffff;
  --accent: #1d4ed8;
  --gold: #f59e0b;
  --shadow-3d: 0 18px 38px rgba(16, 24, 40, 0.14);
  --shadow-soft: 0 8px 24px rgba(16, 24, 40, 0.10);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(32, 137, 24, 0.16), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(29, 78, 216, 0.12), transparent 30%),
    linear-gradient(180deg, #f6f8fb 0%, var(--soft) 100%);
}

.topbar {
  border-bottom: 1px solid rgba(217, 226, 236, 0.8);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.07);
  backdrop-filter: blur(12px);
}

.brand .mark,
.mark {
  border-radius: 14px;
  background: linear-gradient(145deg, #2cbf20, var(--main-dark));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.34), 0 10px 22px rgba(32,137,24,.25);
}

.nav a {
  border: 1px solid transparent;
  border-radius: 999px;
}

.nav a:hover {
  color: var(--main-dark);
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.hero,
.hero-panel,
.form-card,
.card,
.level,
.stat,
table,
.notice,
.message {
  border-radius: 22px !important;
  box-shadow: var(--shadow-soft);
}

.hero-panel,
.form-card,
.card,
.level,
.stat,
table {
  border: 1px solid var(--line) !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fff6 100%) !important;
}

.hero {
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(246, 248, 251, .98) 0%, rgba(234, 247, 231, .78) 46%, rgba(255,255,255,.08) 100%),
    url("/assets/bookwall-hero-3d.png") center right / cover no-repeat,
    #eaf7e7 !important;
}

.hero-copy {
  margin: clamp(18px, 4vw, 44px);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.56));
  box-shadow: 0 18px 42px rgba(16, 24, 40, .12);
  backdrop-filter: blur(10px);
}

.eyebrow {
  color: var(--main) !important;
}

h1,
h2,
h3 {
  color: var(--ink);
}

.button,
button {
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(16,24,40,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.button:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.button.primary,
button.primary,
.button.good,
button.good,
.tab.active {
  border-color: var(--main) !important;
  color: #fff !important;
  background: linear-gradient(145deg, #2cbf20, var(--main-dark)) !important;
}

.button.warn,
button.warn {
  border-color: var(--gold) !important;
  background: linear-gradient(145deg, #fbbf24, #d97706) !important;
}

.levels .level,
.grid .card {
  position: relative;
  overflow: hidden;
}

.levels .level:before,
.grid .card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, var(--main), #8bdc73, var(--accent));
}

.levels .level:after,
.grid .card:after,
.form-card:after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(32,137,24,.34);
  border-radius: 17px;
  pointer-events: none;
}

.form-card,
.grid .card,
.levels .level {
  position: relative;
}

input,
select,
textarea {
  border-radius: 16px !important;
  border-color: var(--line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(32,137,24,.16);
  border-color: var(--main) !important;
}

.library {
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 220, 115, .2), transparent 25%),
    linear-gradient(145deg, #172033, #0d1b2d) !important;
}

.library .card {
  color: var(--ink);
  background: linear-gradient(145deg, #ffffff, #f5fbf3) !important;
}

.library .card p {
  color: var(--muted) !important;
}

.pill {
  border-radius: 999px;
}

th {
  background: var(--light) !important;
}

@media (max-width: 860px) {
  .hero-copy {
    margin: 18px;
  }
}