:root {
  --ink: #10241b;
  --green: #174d35;
  --lime: #d9ee64;
  --paper: #f4f1e8;
  --white: #fff;
  --line: #d8d8cc;
  --danger: #9f2f2f;
  --danger-dark: #762020;
  --danger-wash: #fff7f5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.5 system-ui,
    -apple-system,
    sans-serif;
}
header {
  height: 68px;
  padding: 0 max(20px, calc((100% - 1100px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: white;
}
header a {
  color: white;
  text-decoration: none;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: translateY(0);
}
.brand {
  font-weight: 900;
  letter-spacing: 0.08em;
}
.brand span {
  color: var(--lime);
}
nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
header nav > a,
header nav .link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 8px;
}
nav form {
  margin: 0;
}
.link {
  background: none;
  border: 0;
  color: white;
  font: inherit;
  cursor: pointer;
}
main {
  max-width: 1100px;
  margin: auto;
  padding: 32px 18px 64px;
}
.hero {
  background: var(--green);
  color: white;
  padding: 48px 28px;
  border-radius: 22px;
  margin-bottom: 24px;
}
.hero.compact {
  padding: 34px 28px;
}
.hero h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 0.98;
  max-width: 850px;
  margin: 0.15em 0;
}
.hero.compact h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}
.hero a {
  color: white;
}
.eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #bcd3c6;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px #10241b0a;
}
.auth {
  max-width: 500px;
  margin: 40px auto;
}
.auth-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: min(720px, calc(100dvh - 164px));
  margin: 8px 0 40px;
  border: 1px solid #c8c2b2;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 60px #10241b1c;
}
.auth-stage .auth {
  align-self: center;
  width: min(100%, 500px);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(28px, 5vw, 64px);
}
.auth-stage .auth h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}
.auth-stage .auth-intro {
  max-width: 38ch;
  margin: 0 0 24px;
  color: #4f5752;
  line-height: 1.55;
}
.auth-stage .auth .eyebrow {
  color: #7b5d2d;
}
.auth-stage .auth-art {
  position: relative;
  min-height: 620px;
  margin: 0;
  background: #332719;
  overflow: hidden;
}
.auth-stage .auth-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 48%;
}
.auth-stage .auth-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, #1e160dcc 100%);
  pointer-events: none;
}
.auth-stage .auth-art figcaption {
  position: absolute;
  z-index: 1;
  left: 28px;
  right: 28px;
  bottom: 24px;
  color: #f7edda;
  font:
    700 clamp(1.15rem, 2vw, 1.55rem) / 1.2 Georgia,
    "Times New Roman",
    serif;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px #000;
}
.auth h1,
.card h2 {
  margin-top: 0;
}
label {
  display: block;
  font-weight: 700;
  margin: 14px 0;
}
input,
textarea,
select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid #a9ad9f;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
textarea {
  min-height: 80px;
}
.source-connection {
  margin: 10px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(65, 122, 85, 0.28);
  border-radius: 10px;
  background: #f2f8f3;
  color: #285338;
}
.source-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.source-details div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}
.source-details dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.source-details dd { margin: 0; }
.source-warning {
  padding: 12px 14px;
  border: 1px solid #d7a63a;
  border-radius: 10px;
  background: #fff8e7;
  color: #60440b;
}
.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 18px;
  border: 1px solid #a9ad9f;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.oauth-button:hover {
  background: #f8f6ef;
}
.google-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font:
    bold 18px/1 Arial,
    sans-serif;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #788078;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--lime);
  color: var(--ink) !important;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary {
  background: var(--green);
  color: white !important;
}
.button.danger {
  background: var(--danger);
  color: white !important;
}
.button.danger:hover {
  background: var(--danger-dark);
}
.button.danger:disabled {
  background: #b8aaa7;
  cursor: not-allowed;
}
.danger-zone {
  border-color: #d9aaa4;
  background: var(--danger-wash);
  box-shadow: none;
}
.danger-zone .danger-eyebrow {
  color: var(--danger);
}
.danger-zone > p:not(.eyebrow) {
  max-width: 780px;
}
.danger-disclosure {
  margin-top: 18px;
  border-top: 1px solid #e5c7c2;
  padding-top: 16px;
}
.danger-disclosure summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--danger);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--danger-dark);
  font-weight: 800;
  cursor: pointer;
}
.danger-disclosure summary::marker {
  content: "";
}
.danger-confirmation {
  max-width: 640px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #e5c7c2;
  border-radius: 12px;
  background: #fff;
}
.danger-confirmation > p:first-child {
  margin-top: 0;
}
.danger-help {
  margin: -6px 0 14px;
  font-size: .88rem;
}
.danger-status {
  display: inline-block;
  margin-left: 10px;
  color: var(--danger-dark);
  font-size: .88rem;
  font-weight: 700;
}
.button.small {
  padding: 7px 14px;
}
.list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.pill {
  font-size: 0.8rem;
  background: #e9eed7;
  padding: 3px 9px;
  border-radius: 99px;
}
.muted {
  color: #69736c;
}
.flash {
  background: var(--lime);
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}
footer {
  text-align: center;
  padding: 32px;
  color: #4f5d55;
}
footer p {
  margin: 0 0 8px;
}
.legal-links {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.legal-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 6px;
  color: var(--green);
}
.legal-copy {
  max-width: 820px;
  margin: 12px auto 40px;
}
.legal-copy h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: 1;
  margin: 0.15em 0;
}
.legal-copy h2 {
  margin-top: 2rem;
}
.legal-copy li {
  margin: 0.45rem 0;
}
.legal-copy code {
  font-size: 0.9em;
}
.legal-consent {
  font-size: 0.88rem;
}
.legal-consent a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--ink);
}
.entry-card {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0;
  list-style: none;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px;
}
.import-row.invalid {
  border-color: #b54b3e;
}
.import-row.valid {
  border-color: #7b9b62;
}
.validation-errors {
  color: #8e2f26;
  background: #fff2ef;
  border-radius: 10px;
  padding: 12px 28px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  header {
    height: auto;
    min-height: 64px;
    padding: 12px 16px;
    gap: 12px;
  }
  nav {
    gap: 10px;
    font-size: 0.9rem;
  }
  main {
    padding: 18px 14px 48px;
  }
  .hero {
    padding: 34px 20px;
    border-radius: 16px;
  }
  .card {
    padding: 19px;
  }
  .auth-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 0;
    border-radius: 18px;
  }
  .auth-stage .auth-art {
    height: 220px;
    min-height: 0;
  }
  .auth-stage .auth-art img {
    object-position: 50% 42%;
  }
  .auth-stage .auth-art figcaption {
    left: 20px;
    bottom: 18px;
  }
  .auth-stage .auth {
    width: 100%;
    padding: 32px 24px;
  }
  .auth-stage .auth h1 {
    font-size: clamp(2.4rem, 10.5vw, 3rem);
    line-height: 0.98;
    margin-bottom: 16px;
  }
  .auth-stage .auth-intro {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.5;
  }
  .auth-stage .oauth-button {
    min-height: 52px;
    margin-bottom: 0;
  }
  .list-row {
    align-items: flex-start;
  }
}
@media (max-width: 360px) {
  header {
    padding-inline: 8px;
    gap: 4px;
  }
  nav {
    gap: 0;
    font-size: 0.8rem;
  }
  header nav > a,
  header nav .link {
    padding-inline: 4px;
  }
}
.invite-share {
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px #10241b12;
}
.invite-share h2 {
  margin: 0.1em 0;
}
.invite-share .eyebrow {
  color: var(--green);
}
.copy-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.copy-row input {
  margin: 0;
  min-width: 0;
}
.copy-status {
  min-height: 1.5em;
  margin: 0.5em 0 0;
  color: var(--green);
  font-weight: 700;
}
.empty-state {
  padding: 8px 0;
}
.empty-state h3 {
  margin-bottom: 0.3em;
}
.event-row small {
  color: #607067;
}
.admin-card {
  border-style: dashed;
}
.error-card,
.recovery-card {
  max-width: 680px;
  margin: 8vh auto;
  padding: clamp(28px, 6vw, 56px);
}
.error-card h1,
.recovery-card h1 {
  font:
    700 clamp(2.4rem, 7vw, 4.5rem) / 1 Georgia,
    serif;
  margin: 0.2em 0;
}
.error-card .eyebrow,
.recovery-card .eyebrow {
  color: var(--green);
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 700px) {
  .copy-row {
    flex-direction: column;
  }
  .copy-row .button {
    width: 100%;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .event-row {
    align-items: flex-start;
  }
}
@media(prefers-reduced-motion:reduce){.oauth-button,.auth-submit,.auth-form input{transition:none}}

/* Achievements */
.achievements-card .eyebrow{margin-bottom:.25rem;color:var(--green)}
.achievements-card h2{margin-top:0}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px}
.achievement{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #d6d1c4;border-radius:14px;background:linear-gradient(135deg,#fffdf7,#f1ebd9)}
.achievement-mark,.achievement-badge{display:inline-grid;place-items:center;border:2px solid #8a6a2f;border-radius:50%;background:#f4d978;color:#34260d;font-weight:900;box-shadow:inset 0 0 0 3px #fff6c9}
.achievement-mark{flex:0 0 48px;width:48px;height:48px;font:900 1.35rem/1 Georgia,serif}
.achievement strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.15rem}
.achievement small{display:block;color:#5e685f}
.achievement-badge{width:24px;height:24px;margin-left:6px;vertical-align:middle;font-size:.72rem}
.achievement-state{margin-left:auto;padding:.24rem .55rem;border-radius:999px;background:#dce9bc;color:#294226;font-size:.67rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.achievement.locked{background:#f6f5f0;color:#69736d}
.achievement.locked .achievement-mark{border-color:#aeb4ad;background:#e5e7e2;color:#727971;box-shadow:inset 0 0 0 3px #f7f8f5}
.achievement.locked .achievement-state{background:#e6e8e4;color:#626963}
@media(max-width:420px){.achievement{align-items:flex-start;flex-wrap:wrap}.achievement>span:nth-child(2){min-width:calc(100% - 62px);flex:1}.achievement-state{margin-left:62px}}

/* League Tracker authentication surface */
.brand{display:flex;align-items:baseline;gap:.62rem;white-space:nowrap}
.brand span{font-size:.7rem;letter-spacing:.16em}
.auth-stage{grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);min-height:min(760px,calc(100dvh - 152px));margin:4px 0 44px;border-color:#c5c0b3;border-radius:20px;box-shadow:0 28px 70px rgba(16,36,27,.16),0 2px 8px rgba(16,36,27,.06)}
.auth-stage .auth{max-width:520px;padding:clamp(38px,5vw,66px)}
.auth-stage .auth h1{max-width:9ch;margin:0 0 16px;font-size:clamp(2.65rem,4.5vw,4.25rem);line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.auth-stage .auth .eyebrow{margin:0;color:#74582f;font-size:.72rem;letter-spacing:.2em}
.auth-intro{max-width:38ch;margin:0 0 24px;color:#45554c;font-size:1.03rem;line-height:1.55;text-wrap:pretty}
.auth-benefits{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:1.35rem 0 1.5rem;padding:1rem 0;border-block:1px solid #e3dfd5;list-style:none;color:#3f5147;font-size:.76rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.auth-benefits li{display:flex;align-items:center;gap:.45rem}
.auth-benefits li::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #dfe9df}
.auth-stage .auth-art{min-height:650px}
.auth-stage .auth-art img{filter:saturate(.8) contrast(1.04);transform:scale(1.005)}
.auth-stage .auth-art::after{background:linear-gradient(180deg,rgba(20,18,11,.32) 0%,transparent 32%,transparent 56%,rgba(18,14,8,.88) 100%)}
.auth-art-mark{position:absolute;z-index:1;top:26px;left:28px;display:flex;align-items:baseline;gap:.6rem;color:#f8f1df;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.auth-art-mark span{font-size:.76rem;font-weight:900;letter-spacing:.18em}
.auth-art-mark strong{padding-left:.6rem;border-left:1px solid rgba(248,241,223,.62);font:600 .75rem/1.2 system-ui,-apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.auth-stage .auth-art figcaption{bottom:30px;display:grid;gap:.45rem;font-family:system-ui,-apple-system,sans-serif;text-shadow:0 2px 16px #000}
.auth-stage .auth-art figcaption span{font-size:.7rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#d9ee64}
.auth-stage .auth-art figcaption strong{display:block;max-width:15ch;font:700 clamp(1.65rem,2.7vw,2.45rem)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.025em;text-wrap:balance}
.oauth-button{min-height:50px;margin:0 0 1.1rem;border-color:#b8bbae;border-radius:10px;transition:border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.oauth-button:hover{border-color:#77857c;background:#f8f7f2;box-shadow:0 5px 16px rgba(16,36,27,.08);transform:translateY(-1px)}
.oauth-button:active{transform:translateY(0)}
.google-mark{flex:0 0 auto;border-radius:0;background:transparent}
.auth-divider{margin:.15rem 0 .9rem;font-size:.7rem;letter-spacing:.13em}
.auth-form label{margin:.78rem 0;color:#24372d;font-size:.83rem;letter-spacing:.01em}
.auth-form input{min-height:50px;margin-top:.38rem;padding:12px 14px;border-color:#aeb5ac;border-radius:9px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.auth-form input:hover{border-color:#78877d}
.auth-form input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(23,77,53,.14);background:#fff}
.auth-submit{display:block;width:100%;min-height:50px;margin-top:1.05rem;border-radius:10px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.auth-submit:hover{background:#cae34d;box-shadow:0 8px 18px rgba(94,116,33,.2);transform:translateY(-1px)}
.auth-submit:active{transform:translateY(0)}
.auth-switch{margin:1.15rem 0 0;color:#657169;font-size:.9rem;text-align:center}
.auth-switch a{color:var(--green);font-weight:800;text-underline-offset:3px}
.auth-stage .legal-consent{margin:.1rem 0 1.1rem;line-height:1.45}
.oauth-button:focus-visible,.auth-submit:focus-visible,.auth-switch a:focus-visible,header a:focus-visible,header button:focus-visible{outline:3px solid #d9ee64;outline-offset:3px}
@media(max-width:720px){
  .brand{gap:.42rem}.brand span{font-size:.6rem;letter-spacing:.1em}
  .auth-stage{grid-template-columns:1fr;min-height:0;margin-top:0;border-radius:14px;box-shadow:0 16px 38px rgba(16,36,27,.14)}
  .auth-stage .auth-art{height:220px;min-height:220px;order:0}
  .auth-stage .auth-art img{position:absolute;inset:0;object-position:50% 43%}
  .auth-art-mark{top:16px;left:18px}
  .auth-stage .auth-art figcaption{left:18px;right:18px;bottom:16px;gap:.2rem}
  .auth-stage .auth-art figcaption span{font-size:.6rem}
  .auth-stage .auth-art figcaption strong{max-width:22ch;font-size:1.25rem}
  .auth-stage .auth{order:1;padding:30px 24px 32px}
  .auth-stage .auth h1{max-width:10ch;margin-bottom:16px;font-size:clamp(2.35rem,10.5vw,3rem);line-height:.98}
  .auth-intro{margin-bottom:20px;font-size:1rem;line-height:1.5}
  .auth-benefits{gap:.5rem .8rem;margin:1rem 0 1.15rem;padding:.78rem 0;font-size:.65rem}
  .oauth-button,.auth-form input,.auth-submit{min-height:52px}
}
@media(max-width:380px){
  header{padding-inline:12px}
  header nav{gap:7px}
  .brand span{font-size:.56rem}
  .auth-stage .auth-art{height:160px;min-height:160px}
  .auth-art-mark{display:none}
  .auth-stage .auth{padding:24px 18px 28px}
  .auth-benefits{padding:.68rem 0;margin:.85rem 0 1rem;justify-content:space-between;gap:.45rem}
  .auth-benefits li::before{display:none}
}
@media(prefers-reduced-motion:reduce){.oauth-button,.auth-submit,.auth-form input{transition:none}}