:root {
  --ink: #1b1f2a;
  --muted: #8b90a0;
  --bg: #f4f1ea;
  --card: #ffffff;
  --dns-primary: #0f3d32;
  --dns-accent: #c5a35a;
  --violet: var(--dns-primary);
  --green: #2f9e6b;
  --pink: #e56b8a;
  --sky: #4aa3e8;
  --navy: #3b4a9a;
  --shadow: 0 18px 40px rgba(40, 36, 28, 0.07);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; color: var(--ink); }
.shell { display: flex; min-height: 100vh; }
.rail {
  width: 112px; background: #fff; border-right: 1px solid rgba(0,0,0,.04);
  display: flex; flex-direction: column; align-items: center; padding: 18px 10px 16px; gap: 10px;
}
.rail a span, .rail .nav-lab { display: block; font-size: 10px; font-weight: 700; margin-top: 4px; line-height: 1.1; text-align: center; }
.logo {
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--dns-primary) 55%, #fff), var(--dns-primary));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px;
  box-shadow: 0 10px 20px rgba(109,92,255,.28);
}
.rail a, .rail button, .rail .nav-btn, .rail .rail-link {
  width: 88px; min-height: 58px; height: auto; padding: 6px 4px; border-radius: 14px; border: 0; background: transparent;
  color: #9aa0b4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.rail a.active, .rail a.router-link-active { background: #efeaff; color: var(--violet); }
.rail a:hover, .rail button:hover { background: #f6f4ee; color: var(--ink); }
.rail .rail-lab { display: block; font-size: 10px; font-weight: 700; margin-top: 4px; line-height: 1.1; text-align: center; }
.rail .rail-ico { display: grid; place-items: center; font-size: 16px; line-height: 1; }
.rail .spacer { display: none; }
.rail-logout {
  width: calc(100% - 4px);
  margin-top: 6px;
}
.rail-logout button {
  width: 100% !important;
  height: auto !important;
  min-height: 52px;
  padding: 10px 6px !important;
  border-radius: 14px !important;
  background: #14352c !important;
  color: #fff !important;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}
.rail-logout button:hover { filter: brightness(1.08); color: #fff !important; background: #14352c !important; }
.stage { flex: 1; padding: 28px 36px 40px; overflow: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.topbar h1 { margin: 0; font-size: 2rem; letter-spacing: -0.03em; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.icon-btn, .avatar {
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: var(--shadow); display: grid; place-items: center; color: #6b7280; cursor: pointer;
}
.avatar { background: linear-gradient(135deg, #6d5cff, #4aa3e8); color: #fff; font-weight: 800; }
.live { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 8px 12px; box-shadow: var(--shadow); font-size: 12px; font-weight: 700; color: var(--green); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.85); } }
.hero {
  background: linear-gradient(120deg, #5b8cff 0%, #79c4ff 55%, #d7f1ff 100%);
  border-radius: 28px; min-height: 168px; padding: 26px 28px; color: #fff;
  position: relative; overflow: hidden; box-shadow: 0 20px 36px rgba(74,163,232,.22); margin-bottom: 16px;
}
.hero h2 { margin: 0 0 6px; font-size: 1.7rem; }
.hero p { margin: 0; max-width: 70%; opacity: .92; font-size: 14px; line-height: 1.5; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.feat {
  border-radius: 22px; min-height: 140px; padding: 16px; color: #fff; box-shadow: var(--shadow);
}
.feat b { display: block; font-size: 1.35rem; margin-top: 24px; }
.feat span { font-size: 12px; opacity: .9; }
.feat:nth-child(1) { background: linear-gradient(180deg, #f08aa8, #d45d7a); }
.feat:nth-child(2) { background: linear-gradient(180deg, #3ecf8e, #1f9d63); }
.feat:nth-child(3) { background: linear-gradient(180deg, #5aa8ea, #2f78c4); }
.feat:nth-child(4) { background: linear-gradient(180deg, #6a63e8, #3d3aa8); }
/* Warm saffron (not pale peach) with dark ink so the label and count stay readable. */
.feat:nth-child(5), .feat--g80 {
  background: linear-gradient(180deg, #f0c078 0%, #d4893a 100%);
  color: #2a1406;
}
.feat:nth-child(5) span, .feat--g80 span {
  color: #3d1e08;
  opacity: 1;
  font-weight: 800;
}
.feat:nth-child(5) b, .feat--g80 b { color: #1a0c04; }
.panel {
  background: #fff; border-radius: 24px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.panel h3 { margin: 0 0 12px; font-size: 1.05rem; }
.md-form { margin-top: 18px; }
.md-form__intro { color: var(--muted); margin: 0 0 20px; font-size: 14px; line-height: 1.55; max-width: 52rem; }
.md-form__layout { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.md-photo {
  background: #f7f6f2; border: 1px dashed #d7d3c8; border-radius: 20px; padding: 14px; text-align: center;
}
.md-photo__frame {
  width: 132px; height: 160px; margin: 0 auto 12px; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid #ece8de; display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 700;
}
.md-photo__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-photo input[type="file"] { width: 100%; font-size: 12px; }
.md-photo p { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.md-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.md-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-field.span-2 { grid-column: 1 / -1; }
.md-field span { font-size: 12px; font-weight: 700; color: #4b5162; letter-spacing: .01em; }
.md-field input, .md-field select, .md-field textarea {
  width: 100%; height: 44px; border: 1px solid #e4e0d6; border-radius: 12px; padding: 0 14px;
  background: #fff; font: inherit; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s;
}
.md-field textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.md-field input:focus, .md-field select:focus, .md-field textarea:focus {
  border-color: var(--dns-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dns-primary) 16%, transparent);
}
.md-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid #efece4;
}
.md-form__fee { margin: 0; font-size: 15px; }
.md-form__fee b { font-size: 1.15rem; }
.md-form__hint { width: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.pill { background: #efeaff; color: var(--violet); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; display: inline-block; }
.pill.wait { background: #fff7ed; color: #c2410c; }
.pill.ok { background: #ecfdf5; color: #166534; }
.pill.no { background: #fef2f2; color: #991b1b; }
.btn {
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 800; cursor: pointer;
  background: var(--violet); color: #fff; font-family: inherit;
}
.btn.ghost { background: #f6f4ee; color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 dt { color: var(--muted); font-size: 12px; margin: 0; }
.grid2 dd { margin: 4px 0 0; font-weight: 700; }

/* ID card — CR80 (85.6 x 54 mm). Every inner size is an em of --idw, so the
   same markup scales from a phone preview to an exact print at card size. */
.idv2-wrap { display: flex; justify-content: center; padding: 12px 0 20px; container-type: inline-size; }
.idv2 {
  --idw: 460px;
  width: var(--idw); aspect-ratio: 1.586 / 1;
  font-size: calc(var(--idw) / 46);
  border-radius: 1.6em; position: relative; overflow: hidden; color: #fff;
  box-shadow: 0 30px 55px rgba(28, 22, 12, .22), 0 0 0 1px rgba(255,255,255,.12) inset;
}
/* Scale to the column the card sits in, not the viewport, so the desk sidebar
   never squeezes the card without shrinking its type to match. */
@supports (container-type: inline-size) {
  .idv2 { --idw: min(460px, 100cqw); }
}
.idv2::after {
  content: "";
  position: absolute;
  inset: .8em;
  border-radius: 1.1em;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(212, 160, 23, .22);
  pointer-events: none;
  z-index: 2;
}
.idv2__bg, .idv2__shine, .idv2__pattern { position: absolute; inset: 0; pointer-events: none; }
.idv2__shine {
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 62%);
  mix-blend-mode: screen; opacity: .7;
}
.idv2__pattern { opacity: .18; }
.idv2__inner {
  position: relative; z-index: 1; height: 100%; box-sizing: border-box;
  padding: 1.6em 1.8em 1.3em;
  display: grid; grid-template-rows: auto 1fr auto; gap: .9em;
}
.idv2__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.idv2__org {
  font-size: 1.05em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  opacity: .94; line-height: 1.25; max-width: 66%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.idv2__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.3em; align-items: start; }
.idv2__left { display: grid; justify-items: center; gap: .55em; }
.idv2__photo {
  width: 9.4em; height: 11.8em; border-radius: 1.2em; background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.5); display: grid; place-items: center;
  line-height: 1; overflow: hidden; box-sizing: border-box;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.idv2__photo span { font-size: 3em; font-weight: 800; opacity: .9; }
.idv2__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idv2__info { min-width: 0; }
.idv2__kicker { margin: 0 0 .3em; font-size: .92em; letter-spacing: .2em; text-transform: uppercase; opacity: .72; font-weight: 700; }
.idv2__name {
  margin: 0; font-size: 2.05em; font-weight: 800; line-height: 1.14;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.idv2__desig { margin: .45em 0 0; font-size: 1.25em; opacity: .92; line-height: 1.25; }
.idv2__num { margin: .7em 0 0; font-size: 1.2em; letter-spacing: .12em; font-weight: 800; }
.idv2__chip {
  width: 4.2em; height: 3em; border-radius: .6em;
  background: linear-gradient(135deg, #f4e2a8, #c9a227 45%, #fff3c4 55%, #d4af37);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.idv2__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; font-size: 1em; opacity: .88; letter-spacing: .04em; }
.idv2__qr { width: 6.2em; height: 6.2em; border-radius: 1em; background: #fff; padding: .4em; box-sizing: border-box; box-shadow: 0 8px 16px rgba(0,0,0,.12); }
.idv2__qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.idv2__stamp {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: .35em 1em; font-size: 1em; font-weight: 800; letter-spacing: .08em; flex-shrink: 0; white-space: nowrap;
}

.idv2--lotus { color: #3b2414; }
.idv2--lotus .idv2__bg { background: radial-gradient(120% 80% at 0% 0%, #fff7e8, #f3d5a0 42%, #c45c26 100%); }
.idv2--lotus .idv2__pattern { background: radial-gradient(circle at 80% 120%, rgba(255,255,255,.5) 0 18%, transparent 19%), repeating-radial-gradient(circle at 90% -10%, rgba(196,92,38,.15) 0 8px, transparent 9px 18px); opacity: .55; }
.idv2--lotus .idv2__name, .idv2--heritage .idv2__name, .idv2--royal .idv2__name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.45rem; }
.idv2--lotus .idv2__org { font-family: Cinzel, serif; color: #7a2e12; }

.idv2--saffron .idv2__bg { background: linear-gradient(180deg, #ff9933 0 28%, #fff 28% 72%, #138808 72% 100%); }
.idv2--saffron { color: #1b3a1a; text-shadow: none; }
.idv2--saffron .idv2__org, .idv2--saffron .idv2__stamp { color: #4a2200; }
.idv2--saffron .idv2__name { color: #0b3d1a; }
.idv2--saffron .idv2__pattern { background: linear-gradient(90deg, transparent 40%, rgba(0,0,128,.12), transparent 60%); opacity: 1; }

.idv2--royal .idv2__bg { background: radial-gradient(90% 120% at 100% 0%, #d4a017, transparent 50%), linear-gradient(145deg, #4a0e18, #8b1e3f 55%, #1a090c); }
.idv2--royal .idv2__pattern { background: repeating-linear-gradient(45deg, rgba(212,160,23,.12) 0 10px, transparent 10px 20px); }
.idv2--royal .idv2__org { font-family: Cinzel, serif; color: #f6e7b2; }

.idv2--midnight .idv2__bg { background: radial-gradient(80% 60% at 10% 120%, rgba(212,160,23,.35), transparent), linear-gradient(160deg, #070b14, #1a1630 60%, #0c0f18); }
.idv2--midnight .idv2__pattern { background: radial-gradient(circle at 2px 2px, rgba(255,215,140,.35) 1px, transparent 1.5px); background-size: 14px 14px; }
.idv2--midnight .idv2__name { letter-spacing: .02em; }

.idv2--ocean .idv2__bg { background: linear-gradient(135deg, #023e4a, #0ea5a0 50%, #7dd3c7); }
.idv2--ocean .idv2__pattern { background: radial-gradient(120% 80% at 80% 120%, rgba(255,255,255,.28), transparent 40%), repeating-linear-gradient(-12deg, transparent 0 12px, rgba(255,255,255,.08) 12px 13px); }

.idv2--aurora .idv2__bg { background: linear-gradient(120deg, #312e81, #7c3aed 40%, #db2777 78%, #f59e0b); }
.idv2--aurora .idv2__pattern { background: radial-gradient(60% 50% at 20% 20%, rgba(255,255,255,.25), transparent); }

.idv2--marble { color: #4a2c2a; }
.idv2--marble .idv2__bg { background: linear-gradient(145deg, #fffaf4, #f3e1d4 40%, #e8c3b8); }
.idv2--marble .idv2__pattern { background: radial-gradient(ellipse at 20% 30%, rgba(190,80,90,.12), transparent 40%), radial-gradient(ellipse at 80% 80%, rgba(180,140,90,.15), transparent 45%); opacity: .9; }
.idv2--marble .idv2__org { color: #9a4a4a; }
.idv2--marble .idv2__name { font-family: "Cormorant Garamond", Georgia, serif; color: #5c2a32; }

.idv2--heritage .idv2__bg { background: linear-gradient(180deg, #7f1d1d 0 22%, #f8ead0 22% 100%); color: #3f1d12; }
.idv2--heritage { color: #3f1d12; }
.idv2--heritage .idv2__org, .idv2--heritage .idv2__stamp { color: #f8ead0; }
.idv2--heritage .idv2__pattern { background: repeating-linear-gradient(90deg, rgba(127,29,29,.08) 0 8px, transparent 8px 16px); }

.idv2--onyx .idv2__bg { background: linear-gradient(160deg, #111827, #064e3b 90%); }
.idv2--onyx .idv2__pattern { background: linear-gradient(90deg, rgba(16,185,129,.2), transparent 30%); }
.idv2--onyx .idv2__chip { background: linear-gradient(135deg, #6ee7b7, #059669); }

.idv2--horizon .idv2__bg { background: linear-gradient(135deg, #4c1d95, #2563eb 55%, #38bdf8); }
.idv2--emerald .idv2__bg { background: linear-gradient(135deg, #064e3b, #10b981 60%, #a3e635); }
.idv2--gold .idv2__bg { background: linear-gradient(135deg, #1e1b4b, #92400e 50%, #fbbf24); }
.idv2--slate .idv2__bg { background: linear-gradient(160deg, #0f172a, #334155 50%, #64748b); }
.idv2--capture::after,
.idv2--capture .idv2__shine,
.idv2--capture .idv2__pattern { display: none !important; }
.idv2, .certv { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.id-design-hero {
  background: #fff; border-radius: 20px; padding: 12px 12px 8px;
  box-shadow: var(--shadow); margin: 18px auto 8px; overflow: hidden;
  max-width: 560px;
}
.id-design-hero .idv2-wrap,
.id-design-hero .certv-wrap,
.id-design-hero .appt-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.id-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.id-design-grid.cert-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
}
@media (max-width: 1100px) {
  .id-design-grid.cert-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .id-design-grid.cert-gallery { grid-template-columns: 1fr; }
}
.id-design-card { width: 100%; display: block; border: 0; background: #fff; border-radius: 18px; padding: 10px; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.id-design-card.is-on { outline: 2px solid #6d5cff; }
.id-design-card .idv2-wrap,
.cert-pick .certv-wrap,
.cert-pick .appt-wrap,
.el-dialog .idv2-wrap,
.el-dialog .certv-wrap { width: 100%; min-width: 0; }
/* Designer tiles match the original mini-card layout: fill the cell, keep
   photo / name / QR readable. Do not set --idw to 100% (breaks font-size). */
.id-design-card .idv2 { width: 100%; max-width: none; font-size: 10px; }
.id-design-card .idv2__inner { padding: 8px 10px 7px; gap: 4px; }
.id-design-card .idv2__org { font-size: 8px; max-width: 70%; }
.id-design-card .idv2__photo { width: 44px; height: 54px; font-size: 16px; border-radius: 8px; }
.id-design-card .idv2__qr { width: 36px; height: 36px; }
.id-design-card .idv2__name { font-size: 13px !important; }
.id-design-card .idv2__chip { width: 28px; height: 18px; }
.id-design-card .idv2__kicker { font-size: 7px; }
.id-design-card .idv2__desig, .id-design-card .idv2__num { font-size: 9px; margin-top: 3px; }
.id-design-card .idv2__meta, .id-design-card .idv2__stamp { font-size: 8px; }
.id-design-card .idv2__stamp { padding: 2px 6px; }
.id-design-card .idv2__row { gap: 8px; }
.id-design-card .idv2::after { inset: 5px; border-radius: 8px; }
.id-design-card span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; }

.verify-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.verify-card { background: #fff; border-radius: 28px; padding: 28px; max-width: 480px; width: 100%; box-shadow: var(--shadow); text-align: center; }

.ngo-gallery-page { max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }
.ngo-gallery-page__kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8a6d2b; font-weight: 700; }
.ngo-gallery-page__head h1 { margin: 6px 0 8px; font-size: 2rem; letter-spacing: -.03em; }
.ngo-gallery-page__head p { margin: 0; color: var(--muted); max-width: 40rem; }
.ngo-gallery-page__empty { margin-top: 28px; color: var(--muted); }
.ngo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.ngo-gallery__item {
  margin: 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ngo-gallery__item img { width: 100%; height: 190px; object-fit: cover; display: block; }
.ngo-gallery__item figcaption { padding: 12px 14px 16px; display: grid; gap: 4px; }
.ngo-gallery__item strong { font-size: 14px; }
.ngo-gallery__item span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.ngo-gallery__cat {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dns-accent);
}
.ngo-events-page { max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }
.ngo-events-page__kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8a6d2b; font-weight: 700; }
.ngo-events-page__head h1 { margin: 6px 0 8px; font-size: 2rem; letter-spacing: -.03em; }
.ngo-events-page__head p { margin: 0; color: var(--muted); max-width: 40rem; }
.ngo-events-page__empty { margin-top: 28px; color: var(--muted); }
.ngo-events { display: grid; gap: 18px; margin-top: 28px; }
.ngo-event {
  display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: #fff;
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
}
.ngo-event img { width: 100%; height: 160px; object-fit: cover; background: #efe8d8; }
.ngo-event__body { padding: 18px 18px 18px 0; }
.ngo-event time { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dns-primary); }
.ngo-event h3 { margin: 6px 0 8px; }
.ngo-event__venue { margin: 0 0 8px; font-weight: 700; }
.ngo-event p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .ngo-event { grid-template-columns: 1fr; } .ngo-event__body { padding: 4px 16px 16px; } }
.ngo-news { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.ngo-news__card { display: grid; grid-template-columns: 180px 1fr; gap: 16px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.ngo-news__card img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; }
.ngo-news__card > div { padding: 16px 18px 18px; }
.ngo-news__meta { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.ngo-news__card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.ngo-news__card p { margin: 0; color: #4b5563; line-height: 1.5; }

/* Certificates — full honour documents, unique layout per colour */
.certv-wrap { display: flex; justify-content: center; padding: 8px 0 16px; width: 100%; container-type: inline-size; }
.certv {
  --cw: 960px;
  width: var(--cw); max-width: 100%; aspect-ratio: 1.414 / 1;
  font-size: calc(var(--cw) / 80);
  position: relative; overflow: hidden; border-radius: .8em;
  color: #2a2118;
  box-shadow: 0 28px 50px rgba(40, 28, 12, .18);
}
@supports (container-type: inline-size) {
  .certv { --cw: min(960px, 100cqw); }
}
.certv__deco, .certv__ribbon { position: absolute; pointer-events: none; }
.certv__frame {
  position: absolute; inset: 1.8em; z-index: 1;
  padding: 2.2em 3em 1.8em;
  border: 2px solid rgba(212,160,23,.65);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  text-align: center;
  box-sizing: border-box;
}
.certv__head { display: grid; justify-items: center; gap: .4em; align-content: start; }
.certv__logo { height: 3.4em; max-width: 14em; object-fit: contain; }
.certv__org {
  margin: 0; font-family: Cinzel, serif; font-size: 1.15em; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700; line-height: 1.3;
}
.certv__tagline { margin: 0; font-size: .88em; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.certv__mid { display: grid; align-content: center; justify-items: center; gap: 0; min-height: 0; }
.certv__kicker { margin: 0; font-size: 1em; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.certv__award {
  margin: .5em 0 0; font-family: Cinzel, serif; font-size: 2em;
  letter-spacing: .04em; font-weight: 700; line-height: 1.25;
}
.certv__to { margin: .9em 0 0; font-size: 1.05em; font-style: italic; opacity: .8; }
.certv__name {
  margin: .1em 0 0; font-family: "Great Vibes", "Cormorant Garamond", serif;
  font-size: 3.4em; font-weight: 400; line-height: 1.25;
}
.certv__body {
  margin: .9em auto 0; max-width: 44em; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35em; line-height: 1.5; opacity: .92;
}
.certv__foot {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 1.5em; padding-top: 1.4em;
}
.certv__meta {
  display: grid; grid-template-columns: auto; gap: 0; text-align: left;
  font-size: .82em; letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}
.certv__meta strong {
  font-size: 1.05em; letter-spacing: 0; text-transform: none; opacity: 1;
  font-family: "Plus Jakarta Sans", sans-serif; margin-bottom: .5em;
}
.certv__meta strong:last-child { margin-bottom: 0; }
.certv__seal {
  width: 4.8em; height: 4.8em; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2em;
  border: 2px solid currentColor; background: rgba(255,255,255,.2);
}
/* A real stamp carries its own outline, so the drawn ring is dropped and the
   artwork is given the room the ring used to occupy. */
.certv__seal--img {
  border: 0; background: none; width: 7.4em; height: 7.4em;
}
.certv__seal--img img { width: 100%; height: 100%; object-fit: contain; }
.certv__qr { display: none !important; }

.certv-l--frame .certv__frame { box-shadow: inset 0 0 0 .7em rgba(212,160,23,.35), inset 0 0 0 .85em rgba(255,255,255,.12); }
.certv-l--floral .certv__deco { inset: 1.1em; border: .09em dashed currentColor; opacity: .35; border-radius: .4em; }
.certv-l--sidebar .certv__deco { top: 0; bottom: 0; left: 0; width: 2.4em; background: currentColor; opacity: .35; }
.certv-l--sidebar .certv__frame { left: 3.6em; }
.certv-l--banner .certv__deco { top: 0; left: 0; right: 0; height: 5em; background: currentColor; opacity: .22; }
.certv-l--banner .certv__head { padding-top: 2.2em; }
.certv-l--seal .certv__seal { width: 6em; height: 6em; font-size: 1.5em; }
.certv-l--bands .certv__deco { inset: 0; background: linear-gradient(180deg, rgba(255,153,51,.55) 0 18%, transparent 18% 82%, rgba(19,136,8,.5) 82% 100%); }
.certv-l--stars .certv__deco { inset: 0; background-image: radial-gradient(circle at 12% 20%, rgba(255,255,255,.7) 1px, transparent 2px), radial-gradient(circle at 80% 30%, rgba(255,255,200,.8) 1px, transparent 2px), radial-gradient(circle at 40% 70%, rgba(255,255,255,.5) 1px, transparent 2px); background-size: 120px 90px; }
.certv-l--wave .certv__deco { left: 0; right: 0; bottom: 0; height: 5.8em; background: radial-gradient(120% 80% at 50% 120%, currentColor 40%, transparent 41%); opacity: .25; }
.certv-l--panel .certv__frame { left: 6.4em; text-align: left; }
.certv-l--panel .certv__head, .certv-l--panel .certv__mid { justify-items: start; }
.certv-l--panel .certv__body { margin-left: 0; }
.certv-l--panel .certv__deco { top: 0; bottom: 0; left: 0; width: 5.2em; background: currentColor; opacity: .3; }
.certv-l--laurel .certv__frame { border-radius: 6em .8em; }
.certv-l--cross .certv__seal { border-radius: 8px; transform: rotate(45deg); }
.certv-l--cross .certv__seal span { transform: rotate(-45deg); display: block; }
.certv-l--folio .certv__frame { border-left-width: .8em; text-align: left; }
.certv-l--folio .certv__head, .certv-l--folio .certv__mid { justify-items: start; }
.certv-l--folio .certv__body { margin-left: 0; }
.certv-l--ice .certv__frame { border-style: double; border-width: .5em; }
.certv-l--sash .certv__ribbon { top: 3em; right: -3.4em; width: 18em; height: 3em; background: currentColor; opacity: .28; transform: rotate(28deg); }
.certv-l--diamond .certv__deco { width: 7.4em; height: 7.4em; top: 1.4em; left: 1.4em; border: 2px solid currentColor; transform: rotate(45deg); opacity: .4; }
.certv-l--garden .certv__deco { left: 0; right: 0; bottom: 0; height: 4em; background: repeating-linear-gradient(90deg, currentColor 0 .7em, transparent .7em 1.5em); opacity: .2; }
.certv-l--columns .certv__frame { left: 3.4em; right: 3.4em; }
.certv-l--columns { box-shadow: inset 1.5em 0 0 currentColor, inset -1.5em 0 0 currentColor; }

.certv--regal-gold { color: #f6e7b2; background: radial-gradient(90% 80% at 50% 0%, #5a4318, #1a1208 55%, #0c0906); }
.certv--regal-gold .certv__frame { border-color: #d4a017; }
.certv--regal-gold .certv__name { color: #ffe7a0; }

.certv--ivory-rose { color: #5c2a38; background: #fff7f4; }
.certv--ivory-rose .certv__frame { border-color: #c47884; background: linear-gradient(180deg, #fff, #fde8e8); }
.certv--ivory-rose .certv__name { color: #9a3d52; font-style: italic; }

.certv--emerald-scroll { color: #ecfdf5; background: #064e3b; }
.certv--emerald-scroll .certv__frame { border-color: #86efac; }
.certv--emerald-scroll .certv__name { color: #bbf7d0; }

.certv--sapphire-crest { color: #e0f2fe; background: #0f172a; }
.certv--sapphire-crest .certv__frame { border-color: #93c5fd; }
.certv--sapphire-crest .certv__name { color: #bfdbfe; }

.certv--ruby-honor { color: #fff1f2; background: #7f1d1d; }
.certv--ruby-honor .certv__frame { border-color: #fda4af; }
.certv--ruby-honor .certv__name { color: #fecdd3; }

.certv--sunrise-saffron { color: #4a2509; background: #fff7ed; }
.certv--sunrise-saffron .certv__frame { border-color: #ea580c; background: #fff; }
.certv--sunrise-saffron .certv__name { color: #7c2d12; }

.certv--midnight-star { color: #e5e7eb; background: #020617; }
.certv--midnight-star .certv__frame { border-color: #c4b5fd; }
.certv--midnight-star .certv__name { color: #fde68a; }

.certv--lotus-peace { color: #4c1d36; background: #fff1f2; }
.certv--lotus-peace .certv__frame { border-color: #f472b6; background: #fff; }
.certv--lotus-peace .certv__name { color: #9d174d; }

.certv--ocean-merit { color: #042f2e; background: #ccfbf1; }
.certv--ocean-merit .certv__frame { border-color: #0f766e; background: #f0fdfa; }
.certv--ocean-merit .certv__name { color: #134e4a; }

.certv--copper-hearth { color: #fff7ed; background: #7c2d12; }
.certv--copper-hearth .certv__frame { border-color: #fdba74; }
.certv--copper-hearth .certv__name { color: #ffedd5; }

.certv--violet-laurel { color: #f5f3ff; background: #4c1d95; }
.certv--violet-laurel .certv__frame { border-color: #ddd6fe; }
.certv--violet-laurel .certv__name { color: #ede9fe; }

.certv--jade-life { color: #14532d; background: #ecfccb; }
.certv--jade-life .certv__frame { border-color: #365314; background: #f7fee7; }
.certv--jade-life .certv__name { color: #052e16; }

.certv--parchment-ink { color: #3f2a14; background: #f5ecd2; }
.certv--parchment-ink .certv__frame { border-color: #92400e; background: #fffbeb; }
.certv--parchment-ink .certv__name { color: #78350f; font-family: "Cormorant Garamond", serif; }

.certv--arctic-frost { color: #0f172a; background: #e0f2fe; }
.certv--arctic-frost .certv__frame { border-color: #0369a1; background: #f8fafc; }
.certv--arctic-frost .certv__name { color: #0c4a6e; }

.certv--ember-festival { color: #fff7ed; background: #9a3412; }
.certv--ember-festival .certv__frame { border-color: #fed7aa; }
.certv--ember-festival .certv__name { color: #ffedd5; }

.certv--onyx-diamond { color: #f8fafc; background: #09090b; }
.certv--onyx-diamond .certv__frame { border-color: #e5e7eb; }
.certv--onyx-diamond .certv__name { color: #facc15; }

.certv--meadow-bloom { color: #365314; background: #f7fee7; }
.certv--meadow-bloom .certv__frame { border-color: #3f6212; background: #fff; }
.certv--meadow-bloom .certv__name { color: #1a2e05; }

.certv--amber-trustee { color: #1c1917; background: #fef3c7; }
.certv--amber-trustee .certv__frame { border-color: #78350f; background: #fffbeb; }
.certv--amber-trustee .certv__name { color: #431407; }

.cert-lock { position: relative; isolation: isolate; }
.cert-lock.is-locked .certv { filter: grayscale(1) blur(10px) brightness(.7); }
.cert-lock__veil {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(15, 18, 28, .55); color: #fff; text-align: center; padding: 16px;
  border-radius: 10px;
}
.cert-lock__veil strong { font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.cert-lock__veil p { margin: 0; max-width: 16rem; font-size: 13px; line-height: 1.4; }
.cert-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 16px;
}
/* Fill the grid cell; the A4 aspect ratio decides the height. */
.cert-grid .certv { width: 100%; max-width: none; }
.cert-card-label { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; }
.md-id-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.id-design-grid .certv,
.cert-pick .certv { width: 100%; max-width: none; }
.cert-pick { width: 100%; display: block; padding: 8px; overflow: hidden; }
/* Mini tiles: draw the real A4 page, then scale it into the cell so
   borders and type stay in proportion. Four fit on one desk row. */
.cert-pick .certv-wrap {
  width: 100%;
  padding: 0;
  aspect-ratio: 1.414 / 1;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}
.cert-pick .certv {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  max-width: none;
  --cw: 960px;
  font-size: 12px;
  transform: scale(calc(100cqw / 960px));
  transform-origin: top left;
}
.cert-pick .appt-wrap {
  width: 100%;
  padding: 0;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}
.cert-pick .appt {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  max-width: none;
  --aw: 760px;
  font-size: calc(760px / 63);
  transform: scale(calc(100cqw / 760px));
  transform-origin: top left;
}

@media (max-width: 900px) {
  .features { grid-template-columns: 1fr 1fr; }
  .shell { flex-direction: column; }
  .rail {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    overflow: visible;
    padding: 10px 8px 12px;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .rail .logo { width: 40px; height: 40px; font-size: 16px; }
  .rail a, .rail button, .rail .nav-btn, .rail .rail-link {
    width: auto;
    min-width: 68px;
    min-height: 56px;
    padding: 8px 6px;
    flex: 1 1 68px;
    border-radius: 12px;
  }
  .rail .rail-lab, .rail a span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
  }
  .rail-logout {
    flex: 1 1 100%;
    width: 100%;
    order: 99;
    margin-top: 4px;
  }
  .rail-logout button {
    min-height: 52px;
    font-size: 16px;
  }
  .md-form__layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .features, .grid2, .md-fields { grid-template-columns: 1fr; }
  .ngo-news__card { grid-template-columns: 1fr; }
  .md-field.span-2 { grid-column: auto; }
  .stage { padding: 20px 16px 32px; }
}

.idv2__linen {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}
.idv2--linen { color: #3d2a18; }
.idv2--linen .idv2__bg { background: linear-gradient(145deg, #f3e6c8, #d8b56a 48%, #8a5a2a); }
.idv2--linen .idv2__name { font-family: "Cormorant Garamond", Georgia, serif; }
.idv2--terracotta { color: #3b1d12; }
.idv2--terracotta .idv2__bg { background: radial-gradient(90% 80% at 10% 0%, #f4c7a1, #c45c26 55%, #6b2a14); }
.idv2--terracotta .idv2__name { font-family: "Cormorant Garamond", Georgia, serif; color: #fff7ed; }
.idv2--terracotta .idv2__org { color: #ffedd5; }
/* ID card back — same CR80 box, laid out as header / terms / contact footer so
   nothing is clipped mid-sentence. */
.idback {
  position: relative; z-index: 1; height: 100%; box-sizing: border-box;
  padding: 1.5em 1.7em 1.3em;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: .35em;
}
.idback__top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.idback__org {
  font-size: 1em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  opacity: .94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.idback__who { margin: .2em 0 0; font-size: 1em; font-weight: 700; opacity: .88; }
.idback__h { margin: .35em 0 0; font-size: 1em; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.idback__ol {
  margin: 0; padding-left: 1.4em; font-size: .92em; line-height: 1.32;
  display: grid; align-content: start; gap: .18em; overflow: hidden;
}
.idback__ol li { padding-left: .1em; }
.idback__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1em; align-items: end; }
.idback__contact { min-width: 0; }
.idback__addr, .idback__help, .idback__verify {
  margin: 0; font-size: .85em; line-height: 1.3; opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.idback__sig { display: grid; justify-items: center; gap: .1em; text-align: center; min-width: 7em; }
.idback__sig img {
  width: 8em; height: 3em; max-width: 100%;
  object-fit: contain; object-position: bottom center;
}
.idback__sigblank { display: block; width: 8em; height: 3em; }
.idback__sig span {
  font-size: .82em; opacity: .8; border-top: 1px solid currentColor; padding-top: .2em;
  width: 100%; white-space: nowrap;
}

/* Signature block: a normal hand-written size on A4 (~45–55mm wide),
   not a tiny stamp and not a banner across the footer. */
.sigblk { display: flex; gap: 1.6em; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; }
.sigblk__one {
  display: grid; justify-items: center; text-align: center;
  width: 11.5em; min-width: 9em; max-width: 13em; flex: 0 1 auto;
}
.sigblk__ink {
  width: 100%; height: 3.4em; max-width: 100%; display: block;
  object-fit: contain; object-position: bottom center; margin-bottom: .1em;
  overflow: hidden;
}
.sigblk__ink--blank { display: block; width: 100%; height: 3.4em; }
.sigblk__rule { display: block; width: 100%; border-top: 1px solid currentColor; opacity: .6; }
.sigblk strong { margin-top: .28em; font-size: 1em; line-height: 1.2; }
.sigblk__unset { display: block; min-height: 1.1em; }
.sigblk small { margin-top: .06em; font-size: .78em; opacity: .78; letter-spacing: .08em; text-transform: uppercase; }

.appt .sigblk { justify-content: flex-end; }
.appt .sigblk__one { width: 13em; min-width: 11em; max-width: 15em; }
.appt .sigblk__ink, .appt .sigblk__ink--blank { width: 100%; height: 3.6em; }
.appt .sigblk strong { font-size: 1.05em; }

.certv .sigblk { width: auto; flex-direction: row; align-items: flex-end; justify-content: flex-end; }
.certv .sigblk__one { width: 11em; min-width: 9em; max-width: 12.5em; }
.certv .sigblk__ink, .certv .sigblk__ink--blank { width: 100%; height: 3.3em; }

/* A scanned signature is dark ink on transparency, which all but disappears on
   the dark designs. Flip it to light so it reads, the same way the text does. */
.certv--regal-gold .sigblk__ink,
.certv--emerald-scroll .sigblk__ink,
.certv--sapphire-crest .sigblk__ink,
.certv--ruby-honor .sigblk__ink,
.certv--midnight-star .sigblk__ink,
.certv--copper-hearth .sigblk__ink,
.certv--violet-laurel .sigblk__ink,
.certv--onyx-diamond .sigblk__ink,
.certv--ember-festival .sigblk__ink,
.appt--royal-seal .sigblk__ink,
.appt--forest-grove .sigblk__ink,
.appt--indigo-court .sigblk__ink,
.appt--midnight-crest .sigblk__ink,
.idv2--royal .idback__sig img,
.idv2--midnight .idback__sig img,
.idv2--onyx .idback__sig img,
.idv2--ocean .idback__sig img,
.idv2--aurora .idback__sig img,
.idv2--horizon .idback__sig img,
.idv2--emerald .idback__sig img,
.idv2--gold .idback__sig img,
.idv2--slate .idback__sig img { filter: invert(1); }

/* Same problem for a scanned rubber stamp, which is usually dark ink too. */
.certv--regal-gold .certv__seal--img img,
.certv--emerald-scroll .certv__seal--img img,
.certv--sapphire-crest .certv__seal--img img,
.certv--ruby-honor .certv__seal--img img,
.certv--midnight-star .certv__seal--img img,
.certv--copper-hearth .certv__seal--img img,
.certv--violet-laurel .certv__seal--img img,
.certv--onyx-diamond .certv__seal--img img,
.certv--ember-festival .certv__seal--img img,
.appt--royal-seal .appt__wax--img img,
.appt--forest-grove .appt__wax--img img,
.appt--indigo-court .appt__wax--img img,
.appt--midnight-crest .appt__wax--img img { filter: invert(1); }
.id-print-page { page-break-after: always; break-after: page; }
.muted { color: var(--muted); }
.bell-wrap { position: relative; }
.bell-dot {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #e11d48; color: #fff; font-size: 9px; font-weight: 800;
  display: grid; place-items: center;
}
.bell-pop {
  position: absolute; right: 0; top: 48px; width: min(340px, 82vw); background: #fff;
  border-radius: 18px; box-shadow: var(--shadow); padding: 12px; z-index: 20; display: grid; gap: 8px;
}
.bell-row {
  display: grid; gap: 2px; text-align: left; border: 0; background: #f7f5ef; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font: inherit; color: inherit;
}
.bell-row span { font-size: 12px; color: var(--muted); }
.yantra__kicker { margin: 0 0 8px; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 800; color: #c5a35a; }
.yantra { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.yantra__art svg { width: 180px; height: 180px; display: block; }
.yantra__thread { margin: 0 0 8px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; text-transform: capitalize; }
@media (max-width: 720px) { .yantra { grid-template-columns: 1fr; } }
.sky {
  position: relative; height: 240px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(80% 90% at 20% 0%, #1d2a4a, #070b14 70%);
  margin: 16px 0 0;
}
.sky__star {
  position: absolute; border-radius: 50%; background: #fff8dc;
  box-shadow: 0 0 6px rgba(255,248,220,.7); transform: translate(-50%, -50%);
}
.sky__star.is-pending { opacity: .45; }
.sky__hint { position: absolute; left: 16px; bottom: 12px; color: #c9d2ea; font-size: 12px; margin: 0; }
.md-hero { background: linear-gradient(120deg, var(--dns-primary) 0%, color-mix(in srgb, var(--dns-primary) 72%, #fff) 48%, var(--dns-accent) 140%); }
.hero-volunteer { background: linear-gradient(120deg, #14532d 0%, #3f6212 50%, #a3e635 140%); }
.hero-coordinator { background: linear-gradient(120deg, #1e3a5f 0%, #2563eb 48%, #93c5fd 140%); }
.hero-district { background: linear-gradient(120deg, #4a1c2f 0%, #9d174d 48%, #f9a8d4 140%); }
.hero-state { background: linear-gradient(120deg, #1e1b4b 0%, #4c1d95 48%, #c4b5fd 140%); }
.hero-trustee { background: linear-gradient(120deg, #1c1917 0%, #44403c 48%, #d6b56a 140%); }
.desk-pill {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.desk-volunteer .logo { background: radial-gradient(circle at 30% 30%, #84cc16, #3f6212); }
.desk-coordinator .logo { background: radial-gradient(circle at 30% 30%, #60a5fa, #1e3a5f); }
.desk-district .logo { background: radial-gradient(circle at 30% 30%, #f9a8d4, #9d174d); }
.desk-state .logo { background: radial-gradient(circle at 30% 30%, #c4b5fd, #4c1d95); }
.desk-trustee .logo { background: radial-gradient(circle at 30% 30%, #d6b56a, #44403c); }
.md-shell .rail { width: 92px; }
.md-shell .rail a { height: auto; min-height: 44px; padding: 6px 2px; font-size: 16px; }
.hist-row, .hist-card header {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin: 0 0 12px;
}
.hist-row span, .hist-card header span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.hist-card { border-top: 1px solid #efece4; padding-top: 18px; margin-top: 18px; }
.share-btn {
  border: 0; border-radius: 999px; padding: 8px 12px; font-weight: 800; cursor: pointer; font: inherit; color: #fff;
}
.share-btn.wa { background: #128c7e; }
.share-btn.fb { background: #1877f2; }
.share-btn.ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.give-wrap { max-width: 440px; margin: 0 auto 8px; }
.give-wrap.give-wrap--paid { max-width: 760px; }
.give-card {
  background: #fffcf7;
  color: var(--ink);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(40, 36, 28, .1);
  border: 1px solid #ddd6c8;
  padding: 0;
}
.give-card__head {
  background: linear-gradient(165deg, #f3efe6 0%, #e8e2d6 100%);
  color: #3a342c;
  padding: 24px 22px 20px;
}
.give-card__head h3 { margin: 10px 0 0; font-size: 1.55rem; color: #3a342c; line-height: 1.25; letter-spacing: -.02em; }
.give-card__badge {
  display: inline-block; border: 1px solid #c9c0b0; color: #5c5348; background: rgba(255,255,255,.55);
  border-radius: 999px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; font-weight: 800;
}
.give-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; background: #fffcf7; }
.give-label {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6f6a62;
}
.give-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.give-field span { font-size: 12px; font-weight: 700; color: #4b5162; }
.give-field span i { font-style: normal; font-weight: 600; color: var(--muted); }
.give-field input, .give-field select, .give-field textarea {
  width: 100%; height: 46px; border: 1px solid #ddd6c8; border-radius: 12px; padding: 0 14px;
  background: #fff; font: inherit; color: var(--ink); outline: none;
}
.give-field textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
.give-field input:focus, .give-field select:focus, .give-field textarea:focus {
  border-color: #9aab9e; box-shadow: 0 0 0 4px rgba(79, 93, 82, .16);
}
.give-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.give-presets button {
  flex: 1 1 calc(33.33% - 8px); min-width: 28%;
  border: 1px solid #ddd6c8; background: #fff; color: var(--ink);
  border-radius: 12px; padding: 10px 8px; font-weight: 800; cursor: pointer; font: inherit; font-size: 13px;
}
.give-presets button.on {
  background: #e4ebe5; color: #2c2a26; border-color: #9aab9e;
}
.give-amount {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #ddd6c8; border-radius: 14px; background: #fff;
  min-height: 58px; padding: 0 16px 0 18px; width: 100%;
}
.give-amount:focus-within {
  border-color: #9aab9e;
  box-shadow: 0 0 0 4px rgba(79, 93, 82, .16);
}
.give-amount em { font-style: normal; font-weight: 800; font-size: 1.45rem; color: #6b6558; line-height: 1; flex: 0 0 auto; }
.give-amount input {
  flex: 1 1 auto; min-width: 0; width: auto !important; border: 0 !important; height: 54px !important;
  box-shadow: none !important; padding: 0 !important; font-size: 1.7rem; font-weight: 800; background: transparent;
}
.give-go {
  width: 100%; margin-top: 4px; background: #4f5d52;
  color: #fff; min-height: 50px; font-size: 16px; font-weight: 800; border-radius: 14px; border: 0; cursor: pointer;
  box-shadow: 0 10px 22px rgba(79, 93, 82, .22);
}
.give-go:disabled { opacity: .65; cursor: wait; }
.give-note { color: #5b6472; font-size: 13px; margin: 14px 0 0; }
.give-note--warn {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff6e5; border: 1px solid #f2d08a; color: #7a5209;
}
@media (max-width: 560px) {
  .give-wrap { max-width: none; }
  .give-card { border-radius: 20px; }
  .give-card__body { padding: 16px 14px 18px; }
}
.mem-panel { text-align: center; padding: 36px 20px; }
.mem-orbit {
  width: 180px; height: 180px; margin: 0 auto 18px; position: relative;
  display: grid; place-items: center;
}
.mem-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 6px solid #efeaff;
  border-top-color: #6d5cff;
  animation: spin 2.4s linear infinite;
}
.mem-orbit.is-ok .mem-ring { border-color: #d1fae5; border-top-color: #059669; }
.mem-orbit.is-no .mem-ring { border-color: #fee2e2; border-top-color: #dc2626; }
.mem-core {
  width: 128px; height: 128px; border-radius: 50%; background: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; align-content: center; gap: 4px;
}
.mem-core small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mem-core strong { font-size: 1.05rem; }
.mem-story { max-width: 34rem; margin: 0 auto 22px; color: var(--muted); line-height: 1.55; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice-card {
  background: #f7f5ef; border-radius: 16px; padding: 14px 16px; margin: 10px 0; cursor: pointer;
}
.notice-card.unread { outline: 2px solid #c5a35a; }
.notice-card p { margin: 6px 0; color: #4b5162; }
.notice-card span { font-size: 11px; color: var(--muted); }
.inv {
  max-width: 720px; margin: 12px auto; background: #fff; border: 1px solid #e7e1d2; border-radius: 16px; padding: 18px 20px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #1b1f2a;
}
.inv__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.inv__brand { display: flex; gap: 12px; align-items: center; }
.inv__brand h2 { margin: 0; font-size: 1.1rem; }
.inv__brand p { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.inv__meta { text-align: right; font-size: 12px; }
.inv__badge { display: inline-block; margin-top: 6px; background: #ecfdf5; color: #166534; border-radius: 999px; padding: 3px 8px; font-weight: 800; font-size: 10px; }
.inv__badge--fee { background: #eef2ff; color: #3730a3; }
.inv__grid { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.inv__grid th { text-align: left; width: 18%; color: #6b7280; font-weight: 700; padding: 6px 8px 6px 0; }
.inv__grid td { padding: 6px 8px; }
.inv__sum { background: #14352c; color: #fff; border-radius: 14px; padding: 14px 16px; }
.inv__sum p { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c5a35a; }
.inv__sum b { display: block; font-size: 1.6rem; margin: 4px 0; }
.inv__foot { font-size: 11px; color: #6b7280; margin: 12px 0 0; }
.appt-wrap { display: flex; justify-content: center; padding: 8px 0 18px; width: 100%; container-type: inline-size; }
/* Appointment letter — A4 portrait (210 x 297 mm) letterhead. */
.appt {
  --aw: 760px;
  width: var(--aw); max-width: 100%;
  min-height: calc(var(--aw) * 1.414);
  font-size: calc(var(--aw) / 63);
  position: relative; overflow: hidden; box-sizing: border-box;
  border-radius: .8em; padding: 3.4em 3.6em 2.8em;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1.4em;
  box-shadow: 0 24px 48px rgba(40,28,12,.16);
}
@supports (container-type: inline-size) {
  .appt { --aw: min(760px, 100cqw); }
}
.appt__bloom { position: absolute; inset: 0; pointer-events: none; }
.appt__head {
  display: flex; gap: 1.2em; align-items: center; position: relative; z-index: 1;
  padding-bottom: 1.1em; border-bottom: 1px solid currentColor;
}
.appt__ident { min-width: 0; }
.appt__logo { height: 4.4em; max-width: 11em; object-fit: contain; flex-shrink: 0; }
.appt__mark {
  width: 4.4em; height: 4.4em; border-radius: 1.2em; display: grid; place-items: center;
  font-weight: 800; font-size: 1.4em; background: rgba(255,255,255,.18); flex-shrink: 0;
}
.appt__org { margin: 0; font-family: Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; font-size: 1.25em; font-weight: 700; line-height: 1.3; }
.appt__addr { margin: .35em 0 0; font-size: 1em; opacity: .85; line-height: 1.4; }
.appt__contact { margin: .2em 0 0; font-size: .95em; opacity: .72; }
.appt__refline {
  display: flex; justify-content: space-between; gap: 1.5em; position: relative; z-index: 1;
  font-size: .95em; letter-spacing: .06em; opacity: .8;
}
.appt__mid { position: relative; z-index: 1; min-height: 0; align-content: start; overflow: hidden; }
.appt__kicker { margin: 0; font-size: .95em; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.appt__title { margin: .35em 0 0; font-family: Cinzel, serif; font-size: 1.9em; line-height: 1.25; }
.appt__to { margin: 1.2em 0 0; font-style: italic; font-size: 1.05em; opacity: .85; }
.appt__name { margin: .05em 0 0; font-family: "Great Vibes", "Cormorant Garamond", serif; font-size: 3em; font-weight: 400; line-height: 1.2; }
.appt__role { margin: .2em 0 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 1em; }
.appt__body { margin: 1.4em 0 0; max-width: 44em; font-size: 1.1em; line-height: 1.65; }
.appt__foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.8em;
  align-items: end; position: relative; z-index: 1; padding-top: 1.2em;
  min-height: 9em;
}
.appt__wax {
  width: 5.8em; height: 5.8em; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid currentColor; font-size: 1.2em; flex-shrink: 0;
}
.appt__wax--img { border: 0; width: 8.6em; height: 8.6em; }
.appt__wax--img img { width: 100%; height: 100%; object-fit: contain; }
.appt--royal-seal { color: #f6e7b2; background: radial-gradient(80% 70% at 100% 0%, #8b1e3f, #2a0b12); }
.appt--forest-grove { color: #ecfdf5; background: linear-gradient(160deg, #064e3b, #14532d 70%, #365314); }
.appt--indigo-court { color: #e0e7ff; background: linear-gradient(150deg, #1e1b4b, #312e81 60%, #0f172a); }
/* Band stops are a share of the full A4 sheet, so they land just under the
   letterhead rule rather than partway down the body. */
.appt--saffron-scroll { color: #4a2509; background: linear-gradient(180deg, #ff9933 0 11%, #fff7ed 11% 100%); }
.appt--marble-ivory { color: #4a2c2a; background: #fffaf4; box-shadow: inset 0 0 0 10px #f3e1d4; }
.appt--midnight-crest { color: #e5e7eb; background: #020617; }
.appt--lotus-field { color: #4c1d16; background: linear-gradient(180deg, #c45c26, #fff7ed 16%); }
.appt--ocean-charter { color: #042f2e; background: linear-gradient(160deg, #0f766e, #ccfbf1 26%); }
.appt--amber-ledger { color: #431407; background: #fef3c7; }
.appt--silk-ribbon { color: #4c1d36; background: #fff1f2; }
.appt-l--crest .appt__bloom { background: radial-gradient(circle at 90% 10%, rgba(212,160,23,.35), transparent 40%); }
.appt-l--grove .appt__bloom { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 8px, transparent 8px 18px); }
.appt-l--scroll .appt__bloom { background: linear-gradient(180deg, transparent 82%, rgba(19,136,8,.35)); }
.appt-l--ribbon .appt__bloom { background: linear-gradient(28deg, transparent 60%, rgba(244,114,182,.35) 60% 68%, transparent 68%); }
.task-banner { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; font-weight: 700; }
.task-tile { border: 1px solid #ece7dc; border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; background: #fff; box-shadow: 0 10px 24px rgba(40,36,28,.04); }
.task-tile header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.task-tile header strong { font-size: 1.05rem; }
.task-tile .pri, .task-tile .kind {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: #f4f1ea; border-radius: 999px; padding: 2px 8px;
}
.task-tile .pri.high { background: #fef2f2; color: #991b1b; }
.task-tile .pri.low { background: #ecfdf5; color: #166534; }
.task-tile.late { outline: 2px solid #f59e0b; background: #fffbeb; }
.task-tile.done { opacity: .6; }
.task-tile p { margin: 8px 0; color: var(--muted); }
.task-tile footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dns-form-card {
  background: #fff; border-radius: 24px; padding: 28px 24px; max-width: 40rem;
  box-shadow: 0 18px 40px rgba(40,36,28,.08);
}
.dns-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.dns-form > .full, .dns-form button { grid-column: 1 / -1; }
.dns-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #3a4050; }
.dns-form input, .dns-form select, .dns-form textarea {
  height: 46px; border: 1px solid #e8e2d4; border-radius: 14px; padding: 0 14px; font: inherit; background: #fbf8f2;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.dns-form textarea { height: 92px; padding: 12px 14px; }
.dns-form input:focus, .dns-form select:focus, .dns-form textarea:focus {
  outline: none; border-color: var(--dns-primary); background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dns-primary) 16%, transparent);
}
.dns-form button[type=submit] {
  height: 50px; border: 0; border-radius: 999px; background: var(--dns-primary); color: #fff; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--dns-primary) 28%, transparent);
}
.dns-form__title { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: -.02em; }
.dns-form__lead { color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
@media (max-width: 640px) { .dns-form { grid-template-columns: 1fr; } }
@media print {
  .id-print-page { page-break-after: always; break-after: page; }
  .id-print-page:last-child { page-break-after: auto; break-after: auto; }
  /* Print at true document sizes: CR80 card, A4 landscape, A4 portrait. */
  .idv2 { --idw: 85.6mm; border-radius: 3mm; box-shadow: none; }
  .idv2-wrap { padding: 0 0 6mm; justify-content: flex-start; }
  .certv { --cw: 297mm; max-width: none; border-radius: 0; box-shadow: none; }
  .certv-wrap { padding: 0; }
  .appt { --aw: 210mm; max-width: none; border-radius: 0; box-shadow: none; }
  .appt-wrap { padding: 0; }
}