:root {
  --bg: #f6f1e8;
  --panel: #ffffff;
  --ink: #24180f;
  --muted: #6d6258;
  --gold: #c99a3a;
  --deep: #3b2415;
  --red: #8a2f24;
  --green: #1f7a4d;
  --border: #e5d8c5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--red); text-decoration: none; }

.header {
  background: linear-gradient(135deg, var(--deep), #1e120b);
  color: #fff;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 600;
}

.nav a {
  color: #fff;
  margin-left: 16px;
  font-size: 14px;
}

.container {
  max-width: 1180px;
  margin: 28px auto;
  padding: 0 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 26px rgba(42,25,12,.08);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label {
  display:block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background:#fff;
}

textarea { min-height: 90px; }

button, .btn {
  display: inline-block;
  border: 0;
  background: var(--deep);
  color: #fff;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.btn.secondary { background: var(--gold); color: #1e120b; }
.btn.light { background: #efe2ce; color: var(--deep); }
.btn.danger { background: var(--red); }

.actions {
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.table {
  width:100%;
  border-collapse: collapse;
  margin-top: 18px;
}

.table th, .table td {
  text-align:left;
  padding: 12px;
  border-bottom:1px solid var(--border);
  font-size: 14px;
}

.table th {
  color: var(--muted);
  font-weight: 600;
}

.status {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  display:inline-block;
}

.status.Active { background: #e4f5ec; color: var(--green); }
.status.Expired, .status.Inactive { background: #f8e3df; color: var(--red); }

.login-wrap {
  max-width: 420px;
  margin: 80px auto;
  padding: 0 18px;
}

.notice {
  background:#fff8e7;
  border:1px solid #ecd7a8;
  color:#6b4a12;
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
}

.error {
  background:#fdebea;
  border:1px solid #f4b2aa;
  color:#84271d;
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
}

/* CARD LAYOUT */
.card-stage {
  display:flex;
  gap: 26px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.member-card {
  position: relative;
  overflow: hidden;
}

.template-card {
  width: min(100%, 980px);
  aspect-ratio: 1672 / 941;
  border-radius: 24px;
  background: #efe7d7;
  box-shadow: 0 14px 30px rgba(30,18,11,.14);
  isolation: isolate;
}

.card-template-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index: 1;
}

/* TEXT FIELDS ON CARD */
.field {
  position:absolute;
  z-index:2;
  color:#111;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
}

/* Actual member name */
.field-name {
  left: 5.3%;
  top: 49.4%;
  width: 38%;
  font-size: clamp(12px, 1.35vw, 22px);
  text-transform: none;
  letter-spacing: 0;
}

/* Membership type under the name */
.field-type {
  left: 5.3%;
  top: 54.8%;
  width: 34%;
  font-size: clamp(8px, .8vw, 13px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a4130;
  font-weight: 700;
}

/* Member ID value */
.field-id {
  left: 5.3%;
  top: 63.9%;
  width: 34%;
  font-size: clamp(10px, 1.1vw, 17px);
  text-transform: none;
}

/* Member since year */
.field-since {
  left: 5.3%;
  top: 77.2%;
  width: 26%;
  font-size: clamp(10px, 1.1vw, 17px);
  text-transform: none;
}

/* Valid through date */
.field-valid {
  left: 48.8%;
  top: 78.1%;
  width: 18%;
  font-size: clamp(10px, 1.05vw, 16px);
  text-align: center;
  text-transform: none;
}

/* QR CODE */
.card-qr {
  position:absolute;
  z-index:2;
  right: 5.2%;
  bottom: 11.2%;
  width: 14%;
  aspect-ratio: 1 / 1;
  background:#fff;
  padding: .75%;
  border-radius: 6px;
  box-shadow: none;
}

.card-qr img {
  width:100%;
  height:100%;
  display:block;
}

.qr {
  background:#fff;
  padding:8px;
  border-radius:10px;
  width:96px;
  height:96px;
}

.qr img {
  width:80px;
  height:80px;
  display:block;
}

.verify-box {
  max-width: 520px;
  margin: 60px auto;
  text-align:center;
}

.verify-status {
  font-size: 40px;
  margin: 10px 0;
}

.no-print {}

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .template-card { width:100%; }
}

/* PRINTABLE 3.5 x 2 CARD */
@media print {
  @page {
    size: 3.5in 2in landscape;
    margin: 0;
  }

  html, body {
    width: 3.5in;
    height: 2in;
    margin: 0;
    padding: 0;
    background: #fff !important;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .header,
  .actions,
  .no-print,
  .panel > h2,
  .panel > p,
  .card-stage > div:not(#memberCard) {
    display: none !important;
  }

  .container,
  .panel {
    width: 3.5in !important;
    height: 2in !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .card-stage {
    display: block !important;
    width: 3.5in !important;
    height: 2in !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .template-card {
    width: 3.5in !important;
    height: 2in !important;
    border-radius: 0.12in !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .field,
  .card-template-img,
  .card-qr,
  .card-qr img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .field-name {
    font-size: 7.8pt !important;
    left: 5.3% !important;
    top: 49.4% !important;
  }

  .field-type {
    font-size: 4.8pt !important;
    left: 5.3% !important;
    top: 54.8% !important;
  }

  .field-id {
    font-size: 6.4pt !important;
    left: 5.3% !important;
    top: 63.9% !important;
  }

  .field-since {
    font-size: 6.4pt !important;
    left: 5.3% !important;
    top: 77.2% !important;
  }

.field-valid {
  font-size: 6pt !important;
  left: 45.8% !important;
  top: 84.2% !important;
  width: 18% !important;
  text-align: center !important;
}

  .card-qr {
    width: 13.5% !important;
    right: 5.4% !important;
    bottom: 11.7% !important;
    padding: .6% !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }
}