/* LEC Digital Membership — shared styles (static site) */
:root {
  --green: #A5D89B;
  --blue: #B5DCF1;
  --green-deep: #2C7A44;
  --blue-deep: #3178A6;
  --ink: #101B12;
  --bg: #F2F8F0;
  --ok: #2C7A44;
  --bad: #C7382E;
  --muted: #5E7061;
  --line: #DCE8DA;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 56px;
}

/* brand — vector replica of the LEC icon */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mark {
  width: 50px; height: 42px; font-size: 0; color: transparent; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><defs><clipPath id='g'><rect x='6' y='4' width='78' height='62' rx='14'/><polygon points='22,58 4,92 44,66'/></clipPath></defs><rect x='6' y='4' width='78' height='62' rx='14' fill='%23A5D89B'/><polygon points='22,58 4,92 44,66' fill='%23A5D89B'/><ellipse cx='74' cy='54' rx='42' ry='33' fill='%23B5DCF1'/><polygon points='88,80 112,98 72,86' fill='%23B5DCF1'/><ellipse cx='74' cy='54' rx='42' ry='33' fill='%23FFFFFF' clip-path='url(%23g)'/></svg>") no-repeat center / contain;
}
.brand .name { font-size: 13px; font-weight: 800; line-height: 1.35; letter-spacing: 0.4px; text-transform: uppercase; }
.brand .name span { display: block; font-weight: 600; color: var(--muted); font-size: 10px; letter-spacing: 1.1px; }

/* panels & forms */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 20px; width: 100%; max-width: 400px;
  box-shadow: 0 2px 10px rgba(16, 27, 18, 0.05);
}
.panel + .panel { margin-top: 14px; }
.panel h1 { font-size: 20px; margin-bottom: 6px; }
.panel h2 { font-size: 14px; margin-bottom: 6px; }
.panel .sub { color: var(--muted); font-size: 14px; line-height: 1.45; margin-bottom: 18px; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
input {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  font-size: 16px; border: 1px solid var(--line); border-radius: 10px; background: #FAFDF9;
}
input:focus { outline: 2px solid var(--green-deep); border-color: transparent; }
button, .btnlink {
  display: block; width: 100%; padding: 13px; margin-top: 4px;
  background: var(--green-deep); color: #fff; font-size: 15px; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer; text-align: center; text-decoration: none;
}
button:disabled { opacity: 0.6; cursor: wait; }
.fieldhint { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 16px; }
.hint a { color: var(--blue-deep); }
.msg { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.msg.error { display: block; background: #FBEBE9; color: var(--bad); }
.msg.okay  { display: block; background: #E4F3E1; color: var(--green-deep); }
.msg a { color: inherit; font-weight: 700; }
.center { text-align: center; }
.loading { color: var(--muted); font-size: 14px; padding: 48px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3.5px solid var(--line);
  border-top-color: var(--green-deep);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* cute entrance: card pops in with a gentle overshoot */
@keyframes cardPop {
  0%   { opacity: 0; transform: scale(0.9) translateY(14px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.pop { animation: cardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fadeup { animation: fadeUp 0.45s ease both; }
/* the little tip panel drifts in just after the card */
.pop + .panel { animation: fadeUp 0.45s ease 0.18s both; }
@media (prefers-reduced-motion: reduce) {
  .pop, .fadeup, .pop + .panel, .spinner { animation: none; }
}

/* membership card */
.card {
  width: 100%; max-width: 400px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, #EFF8EA 0%, #E2F3D9 55%, #CFEAC2 100%);
  color: var(--ink); padding: 22px 22px 20px;
  box-shadow: 0 12px 30px rgba(44, 122, 68, 0.16);
}
.card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.card .mark { width: 58px; height: 48px; }
.card .club { text-align: right; font-size: 12px; letter-spacing: 0.8px; font-weight: 800; opacity: 0.85; line-height: 1.6; text-transform: uppercase; }
.card .member-name { font-size: 25px; font-weight: 800; letter-spacing: 0.2px; margin-bottom: 16px; }
.card .member-role { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-deep); margin: -12px 0 16px; }
.card .meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.card .meta span { display: block; font-size: 9.5px; letter-spacing: 1.4px; opacity: 0.62; margin-bottom: 3px; font-weight: 700; white-space: nowrap; }
.card .meta b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card .qrbox {
  background: #fff; border: 1px solid rgba(16, 27, 18, 0.07); border-radius: 14px; padding: 16px 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: fit-content; margin: 0 auto;
}
.card .qrbox .qr { padding: 6px; }
.card .qrbox p { color: var(--muted); font-size: 11.5px; text-align: center; line-height: 1.45; max-width: 200px; }
.card .qrbox .timer { color: var(--green-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

.card.expired { background: linear-gradient(135deg, #F1F3F0 0%, #DDE2DB 100%); box-shadow: 0 12px 30px rgba(94, 112, 97, 0.16); }
.card.expired .mark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><defs><clipPath id='g'><rect x='6' y='4' width='78' height='62' rx='14'/><polygon points='22,58 4,92 44,66'/></clipPath></defs><rect x='6' y='4' width='78' height='62' rx='14' fill='%23BCC7BB'/><polygon points='22,58 4,92 44,66' fill='%23BCC7BB'/><ellipse cx='74' cy='54' rx='42' ry='33' fill='%23C7D6E0'/><polygon points='88,80 112,98 72,86' fill='%23C7D6E0'/><ellipse cx='74' cy='54' rx='42' ry='33' fill='%23F1F3F0' clip-path='url(%23g)'/></svg>");
}
.card.expired .qrbox { opacity: 0.45; }
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; white-space: nowrap;
}
.pill.bad { background: var(--bad); color: #fff; }
.pill.good { background: var(--green-deep); color: #fff; }
.pill.committee { background: var(--blue-deep); color: #fff; }
.card.committee { background: linear-gradient(135deg, #EBF5FC 0%, #DCEDF9 55%, #C3E1F4 100%); box-shadow: 0 12px 30px rgba(49, 120, 166, 0.18); }
.card.committee .qrbox .timer { color: var(--blue-deep); }

/* verify view */
.verify {
  width: 100%; max-width: 400px; border-radius: 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(16,27,18,0.05);
}
.verify .band { padding: 34px 20px 28px; text-align: center; color: #fff; }
.verify.ok .band { background: var(--ok); }
.verify.bad .band { background: var(--bad); }
.verify .glyph {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(255,255,255,0.22); border: 2.5px solid #fff;
  font-size: 34px; font-weight: 800; line-height: 60px; text-align: center;
}
.verify .band h1 { font-size: 21px; }
.verify .rows { padding: 20px; }
.verify .row { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.verify .row:last-child { border-bottom: 0; }
.verify .row span { color: var(--muted); font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; padding-top: 1px; }
.verify .row b { font-weight: 700; }
.verify .checked { padding: 0 20px 18px; color: var(--muted); font-size: 11.5px; text-align: center; }

.foot { margin-top: 18px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.6; }
.foot a { color: var(--blue-deep); }