:root {
  --background: #f5f8f6;
  --foreground: #151a18;
  --green-950: #052e29;
  --green-900: #073d36;
  --green-800: #0b5b50;
  --green-700: #116b5b;
  --green-050: #edf8f5;
  --red-700: #d71920;
  --red-050: #fff1f2;
  --black: #101312;
  --gold: #b8944d;
  --muted: #63736f;
  --line: #d9e5e0;
  --paper: #ffffff;
  --shadow: 0 12px 32px rgba(7, 59, 50, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  gap: 10px;
  align-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(150deg, var(--green-950), var(--green-800) 58%, #08322d);
  color: #fff;
  opacity: 1;
  transition: opacity .35s ease, visibility .35s ease;
}

.splash-logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(48vw, 196px);
  aspect-ratio: 1;
  animation: splash-arrive .86s cubic-bezier(.2,.9,.18,1.08) both;
}

.splash-logo-mark::before,
.splash-logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  opacity: .96;
}

.splash-motion-layer {
  position: absolute;
  inset: -14px;
  border-radius: 34px;
  background:
    linear-gradient(90deg, transparent 8%, rgba(215,25,32,.9) 10%, transparent 20%),
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.2) 48%, transparent 56%);
  opacity: .68;
  animation: splash-sweep 1.25s ease-out .18s both;
}

.splash-motion-layer.secondary {
  inset: -22px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  transform: rotate(-7deg);
  animation: splash-orbit 1.8s ease-out .12s both;
}

.splash-logo-mark::before {
  border: 2px solid rgba(255,255,255,.34);
  animation: splash-ring 1.55s ease-out .2s both;
}

.splash-logo-mark::after {
  inset: auto 13% -4px 13%;
  height: 5px;
  border-radius: 999px;
  background: var(--red-700);
  transform-origin: left center;
  animation: splash-red-line .78s ease-out .58s both;
}

.splash-screen img {
  width: min(43vw, 176px);
  aspect-ratio: 1;
  border-radius: 28px;
  padding: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 22px 46px rgba(0,0,0,.22);
  animation: splash-breathe 1.35s ease-in-out .4s both;
}

.splash-term {
  position: relative;
  display: block;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto !important;
  min-width: 148px;
  margin-top: -3px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 5px 12px 6px;
  background: linear-gradient(90deg, rgba(215,25,32,.92), rgba(11,91,80,.82));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  color: #fff !important;
  text-align: center !important;
  animation: splash-term .72s ease-out .82s both !important;
}

.splash-term em,
.splash-term small {
  display: block;
  font-style: normal;
  line-height: 1.05;
}

.splash-term em {
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.splash-term small {
  margin-top: 1px;
  color: rgba(255,255,255,.84);
  font-size: 9.5px;
  font-weight: 850;
}

.splash-screen strong {
  margin-top: 8px;
  font-size: 22px;
  letter-spacing: .03em;
  text-align: center;
  animation: splash-copy .7s ease-out .5s both;
}

.splash-screen span {
  width: min(82vw, 360px);
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  animation: splash-copy .7s ease-out .68s both;
}

.splash-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes splash-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes splash-ring {
  from { opacity: .95; transform: scale(.84) rotate(0deg); }
  to { opacity: 0; transform: scale(1.24) rotate(8deg); }
}

@keyframes splash-red-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes splash-sweep {
  from { opacity: 0; transform: translateX(-28px) rotate(-8deg); }
  45% { opacity: .72; }
  to { opacity: 0; transform: translateX(28px) rotate(8deg); }
}

@keyframes splash-orbit {
  from { opacity: 0; transform: scale(.82) rotate(-12deg); }
  42% { opacity: 1; }
  to { opacity: .36; transform: scale(1.05) rotate(5deg); }
}

@keyframes splash-breathe {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.025); }
}

@keyframes splash-copy {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes splash-term {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.install-modal,
.recovery-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(6,47,40,.48);
}

.install-dialog,
.recovery-dialog {
  width: min(100%, 430px);
  border-radius: 14px;
  background: #fff;
  color: var(--foreground);
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
  padding: 18px;
  position: relative;
}

.install-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green-800);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

.install-dialog-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding-right: 36px;
}

.install-dialog-brand img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(7,59,50,.14);
}

.install-dialog-brand span {
  display: block;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 850;
}

.install-dialog-brand strong {
  display: block;
  color: var(--green-900);
  font-size: 22px;
  line-height: 1.08;
}

.install-dialog p {
  margin: 14px 0;
  color: var(--muted);
  line-height: 1.42;
}

.install-dialog-actions {
  display: grid;
  gap: 10px;
}

.install-dialog small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.recovery-code-box {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
  border: 1px solid rgba(16,109,82,.18);
  border-radius: 8px;
  background: var(--green-050);
  padding: 12px;
}

.recovery-code-box span,
.recovery-code-box small,
.recovery-input span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.recovery-code-box strong {
  color: var(--green-900);
  font-size: 22px;
  letter-spacing: .06em;
}

.recovery-input {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.recovery-input input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  color: var(--foreground);
  font-weight: 850;
  text-transform: uppercase;
}

.recovery-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid rgba(16,109,82,.18);
  border-left: 4px solid var(--red-700);
  border-radius: 0 8px 8px 0;
  background: var(--green-050);
  padding: 13px;
}

.recovery-panel span,
.recovery-panel small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.recovery-panel strong {
  display: block;
  margin: 3px 0 5px;
  color: var(--green-900);
  font-size: 18px;
  letter-spacing: .04em;
}

.recovery-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.install-modal[hidden],
.recovery-modal[hidden] { display: none; }

body.is-standalone .install-modal,
body.is-installed .install-modal {
  display: none;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1000;
  width: min(calc(100% - 32px), 420px);
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--green-900);
  color: #fff;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 34px rgba(6,47,40,.28);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.update-banner {
  position: fixed;
  left: 50%;
  bottom: max(86px, calc(72px + env(safe-area-inset-bottom)));
  z-index: 950;
  width: min(430px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(16,109,82,.2);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
  transform: translateX(-50%);
}

.update-banner span {
  color: var(--green-900);
  font-weight: 850;
  line-height: 1.25;
}

.update-banner button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  padding: 0 12px;
  font-weight: 900;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.app-shell {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(11,79,66,.10), transparent 280px), var(--background);
}

.mobile-app {
  width: min(100%, 460px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #f7faf8;
  box-shadow: 0 0 0 1px rgba(7,59,50,.08);
}

.app-header {
  color: #fff;
  padding: max(14px, env(safe-area-inset-top)) 18px 16px;
  background:
    linear-gradient(180deg, rgba(16,19,18,.24), transparent 42%),
    linear-gradient(180deg, var(--green-800), var(--green-700));
  position: relative;
}

.app-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red-700), rgba(255,255,255,.65), transparent);
  opacity: .88;
}

.brand-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.brand-logos { display: flex; gap: 8px; }

.brand-logos img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 5px;
}

.brand-logos.single-logo img {
  box-shadow: 0 0 0 2px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.14);
}

.brand-text { min-width: 0; }
.brand-text strong, .brand-text span { display: block; }
.brand-text strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.brand-text span {
  max-width: 220px;
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.18;
}

.institutional-phrase {
  margin: 12px 0 0;
  border-left: 4px solid var(--red-700);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  padding: 9px 11px;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.22;
}

.install-badge {
  min-width: 82px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
}

.install-mark {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--green-800);
  box-shadow: inset 0 -3px 0 var(--red-700);
  line-height: 1;
}

.install-text {
  font-size: 12px;
  line-height: 1;
}

.install-help {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  display: grid;
  gap: 4px;
}

.install-help span { color: rgba(255,255,255,.82); line-height: 1.35; }

body.is-standalone .install-badge,
body.is-standalone .install-help,
body.is-installed .install-badge,
body.is-installed .install-help {
  display: none;
}

.search-box {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.search-box span {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 750;
}

.search-box input {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  color: var(--foreground);
  outline-color: var(--gold);
}

.benefit-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, var(--black), var(--green-950) 44%, var(--green-900));
  color: #fff;
}

.benefit-marquee div {
  width: max-content;
  display: flex;
  gap: 34px;
  padding: 11px 18px;
  animation: marquee-slide 24s linear infinite;
}

.benefit-marquee span {
  position: relative;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.benefit-marquee span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--red-700);
  transform: rotate(45deg);
  vertical-align: 1px;
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.app-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 18px;
  -webkit-overflow-scrolling: touch;
}

.hero-card, .detail-card, .category-card, .admin-card, .metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 6px 16px rgba(7,59,50,.07);
}

.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(215,25,32,.18), transparent 32%),
    linear-gradient(135deg, var(--green-800), #168061);
}

.hero-card h1 {
  margin: 5px 0 8px;
  font-size: 25px;
  line-height: 1.05;
}

.hero-card p, .detail-card p, .admin-card p {
  margin: 0;
  line-height: 1.4;
}

.hero-card p { color: rgba(255,255,255,.84); }

.hero-card img {
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: #fff;
  object-fit: contain;
  padding: 7px;
}

.hero-card a, .primary-action, .secondary-action {
  min-height: 42px;
  border-radius: 999px;
  border: 0;
  padding: 0 16px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero-card a {
  margin-top: 14px;
  background: #fff;
  color: var(--green-800);
  box-shadow: inset 0 -3px 0 var(--red-700);
}

.primary-action { background: var(--green-700); color: #fff; }
.secondary-action { background: var(--green-050); color: var(--green-800); border: 1px solid var(--line); }

.eyebrow {
  color: currentColor;
  opacity: .72;
  font-size: 13px;
  font-weight: 800;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin: 18px 0 10px;
}

.section-heading h2 {
  margin: 0;
  color: var(--green-900);
  font-size: 22px;
  line-height: 1.1;
}

.section-heading span {
  color: var(--green-700);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-height: 86px;
  padding: 10px 8px;
  color: var(--foreground);
  text-align: center;
  box-shadow: 0 6px 16px rgba(7,59,50,.06);
}

.feature-card.accent {
  border-color: rgba(215,25,32,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,247,.86)),
    linear-gradient(135deg, rgba(215,25,32,.1), transparent 58%);
  box-shadow: none;
}

.feature-card.accent .feature-icon {
  box-shadow: none;
  filter: none;
}

.feature-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-block;
  background: var(--green-700);
  -webkit-mask: var(--icon-shape) center / 22px 22px no-repeat;
  mask: var(--icon-shape) center / 22px 22px no-repeat;
}

.feature-card strong,
.feature-card small {
  display: block;
}

.feature-card strong {
  color: var(--green-900);
  font-size: 12px;
  line-height: 1.08;
}

.feature-card small {
  display: none;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 750;
}

.feature-badge {
  top: 8px;
  right: 8px;
}

.info-panel {
  margin: 14px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(7,59,50,.08);
}

.panel-back {
  display: inline-flex;
  margin: 6px 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.panel-heading h2 {
  margin: 3px 0 10px;
  color: var(--green-900);
  line-height: 1.1;
}

.info-panel p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}

.webapp-welcome {
  margin: 0 -16px 16px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  color: #fff;
  padding: 18px 16px 22px;
}

.webapp-welcome span {
  display: inline-block;
  border-left: 5px solid var(--red-700);
  padding-left: 10px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.webapp-welcome h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(24px, 6.3vw, 32px);
  line-height: 1.12;
}

.webapp-copy {
  display: grid;
  gap: 12px;
}

.webapp-copy p {
  margin: 0;
  color: var(--foreground);
}

.webapp-highlight {
  border-left: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  color: #fff;
  padding: 15px 16px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: 0 10px 22px rgba(7,59,50,.12);
}

.executive-term {
  margin: 8px 0 18px;
  border: 1px solid rgba(215,25,32,.18);
  border-left: 5px solid var(--red-700);
  border-radius: 8px;
  background: #fff;
  padding: 14px 15px;
  box-shadow: 0 6px 16px rgba(7,59,50,.05);
}

.executive-term span,
.executive-term strong {
  display: block;
}

.executive-term span {
  color: var(--green-800);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.executive-term strong {
  margin-top: 4px;
  color: var(--green-900);
  font-size: 18px;
  line-height: 1.15;
}

.about-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 18px;
}

.about-shortcut {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 10px;
  color: var(--green-800);
  text-align: left;
  box-shadow: 0 6px 16px rgba(7,59,50,.05);
}

.about-shortcut .action-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
}

.about-shortcut strong,
.about-shortcut small {
  display: block;
}

.about-shortcut strong {
  color: var(--green-900);
  font-size: 15px;
  line-height: 1.1;
}

.about-shortcut small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.about-shortcuts .about-shortcut:only-child {
  grid-column: 1 / -1;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.contact-grid a,
.contact-grid div {
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  background: var(--green-050);
  padding: 11px;
  text-decoration: none;
}

.contact-actions {
  margin-top: 12px;
}

.contact-grid span,
.contact-grid strong {
  display: block;
}

.contact-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.contact-grid strong {
  margin-top: 2px;
  color: var(--green-900);
  font-weight: 500;
  line-height: 1.28;
}

.credential-preview {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(11,91,80,.28);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green-050), #fff);
  color: var(--muted);
  font-weight: 850;
  overflow: hidden;
}

.credential-preview img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: contain;
  object-position: center;
}

.credential-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.credential-actions .secondary-action {
  min-width: 0;
  padding: 0 8px;
  gap: 6px;
}

.directory-list {
  display: grid;
  gap: 8px;
}

.directory-person {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 12px 12px 18px;
  overflow: hidden;
}

.directory-person::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--green-700);
}

.directory-person::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 22px;
  background: var(--red-700);
}

.directory-person strong,
.directory-person small {
  display: block;
}

.directory-person strong {
  color: var(--green-900);
  font-size: 14px;
  line-height: 1.08;
}

.directory-person small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.directory-contact {
  margin-top: 14px;
}

.privacy-copy {
  display: grid;
  gap: 13px;
}

.privacy-copy p {
  margin: 0;
  color: var(--foreground);
  line-height: 1.48;
}

.privacy-block {
  border-radius: 8px;
  background: var(--green-050);
  padding: 12px;
}

.privacy-block span {
  display: block;
  margin-bottom: 8px;
  color: var(--green-900);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.privacy-block ul {
  margin: 0;
  padding-left: 18px;
}

.privacy-block li {
  margin: 5px 0;
  color: var(--foreground);
  line-height: 1.35;
}

.showcase-panel {
  background: #fff;
}

.showcase-purpose {
  margin: 0 0 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-700);
  border-radius: 8px;
  padding: 12px 13px;
  background: #fff;
}

.showcase-purpose span {
  display: block;
  margin-bottom: 4px;
  color: var(--green-900);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.showcase-purpose p {
  margin: 0;
  color: var(--green-900);
  font-weight: 500;
}

.showcase-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--green-900);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.showcase-divider::before,
.showcase-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.showcase-list {
  display: grid;
  gap: 12px;
}

.showcase-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(7,59,50,.07);
}

.showcase-card img {
  width: 100%;
  max-height: none;
  display: block;
  object-fit: contain;
  background: var(--green-050);
}

.showcase-card > div {
  padding: 13px;
}

.showcase-card span {
  color: var(--red-700);
  font-size: 12px;
  font-weight: 900;
}

.showcase-card h3 {
  margin: 4px 0 7px;
  color: var(--green-900);
  line-height: 1.1;
}

.showcase-agreement-link {
  display: inline-flex;
  margin: 0 0 9px;
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green-800);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.showcase-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.showcase-feedback button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green-800);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.showcase-reserve {
  min-height: 34px;
  border: 1px solid var(--green-700);
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.showcase-feedback button.is-sent {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
}

.showcase-calendar,
.showcase-share {
  width: 100%;
  margin-top: 10px;
  gap: 8px;
}

.convocation-list {
  display: grid;
  gap: 14px;
}

.convocation-card {
  overflow: hidden;
  border: 1px solid rgba(215,25,32,.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(215,25,32,.04), transparent 34%),
    #fff;
  box-shadow: 0 8px 22px rgba(7,59,50,.07);
  padding: 15px;
}

.convocation-card > span {
  display: inline-flex;
  border-left: 4px solid var(--red-700);
  padding-left: 8px;
  color: var(--green-800);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.convocation-card h3 {
  margin: 10px 0 12px;
  color: var(--green-900);
  font-size: 24px;
  line-height: 1.08;
}

.convocation-card p {
  margin: 0 0 12px;
  color: var(--muted);
}

.convocation-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.convocation-meta div,
.convocation-agenda {
  border-radius: 8px;
  background: var(--green-050);
  padding: 11px;
}

.convocation-meta small,
.convocation-meta strong {
  display: block;
}

.convocation-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  margin-bottom: 3px;
}

.convocation-meta strong {
  color: var(--green-900);
  font-size: 13px;
  line-height: 1.2;
}

.convocation-agenda {
  margin: 10px 0 13px;
}

.convocation-agenda strong {
  display: block;
  color: var(--green-900);
  margin-bottom: 6px;
}

.convocation-agenda p {
  margin: 0;
  color: var(--foreground);
  font-size: 13px;
}

.convocation-actions {
  margin-top: 12px;
}

@media (max-width: 390px) {
  .convocation-meta {
    grid-template-columns: 1fr;
  }
}

.showcase-admin-card .agreement-admin-actions {
  min-width: min(100%, 280px);
}

.showcase-admin-card .agreement-admin-actions .admin-form {
  width: 100%;
}

.showcase-admin-card .agreement-admin-actions input,
.showcase-admin-card .agreement-admin-actions select,
.showcase-admin-card .agreement-admin-actions textarea {
  min-width: 0;
  font-size: 13px;
}

.back-to-list {
  border: 0;
  background: transparent;
  color: var(--green-700);
  font-weight: 850;
  padding: 0 0 6px;
  cursor: pointer;
}

body.is-detail-view .hero-card,
body.is-detail-view #categorias,
body.is-detail-view .category-grid,
body.is-category-view .hero-card,
body.is-category-view .feature-grid,
body.is-category-view #categorias,
body.is-category-view .category-grid,
body.is-searching .hero-card,
body.is-searching #categorias,
body.is-searching .category-grid {
  display: none;
}

body.has-open-panel .hero-card,
body.has-open-panel .feature-grid,
body.has-open-panel #categorias,
body.has-open-panel .category-grid,
body.has-open-panel #convenios,
body.has-open-panel .agreement-list {
  display: none;
}

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

.category-card {
  min-height: 158px;
  display: block;
  color: var(--foreground);
  cursor: pointer;
  font-weight: 800;
  text-align: left;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.category-card.is-selected {
  color: var(--green-800);
  border-color: rgba(17,99,79,.55);
  background: linear-gradient(180deg, #fff, var(--green-050));
}

.category-photo {
  display: block;
  height: 94px;
  background: linear-gradient(135deg, var(--green-050), #fff);
  background-size: cover;
  background-position: center;
  position: relative;
}

.category-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(5,54,45,.2)),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

.category-label {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 18px 12px 14px 68px;
  font-size: 15px;
  line-height: 1.08;
  color: var(--foreground);
}

.category-photo-salud { background-image: url("img/categories/salud.jpg"); }
.category-photo-restaurantes { background-image: url("img/categories/restaurantes.jpg"); }
.category-photo-hoteles { background-image: url("img/categories/hoteles.jpg"); }
.category-photo-automotriz { background-image: url("img/categories/automotriz.jpg"); }
.category-photo-viajes { background-image: url("img/categories/viajes.jpg"); }
.category-photo-computo { background-image: url("img/categories/computo.jpg"); }
.category-photo-estetica-spa,
.category-photo-estetica-y-spa { background-image: url("img/categories/estetica-spa.jpg"); }
.category-photo-ferreterias { background-image: url("img/categories/ferreterias.jpg"); }
.category-photo-servicios { background-image: url("img/categories/servicios.jpg"); }
.category-photo-pastelerias { background-image: url("img/categories/pastelerias.jpg"); }
.category-photo-zapaterias { background-image: url("img/categories/zapaterias.jpg"); }
.category-photo-eventos { background-image: url("img/categories/eventos.jpg"); }
.category-photo-mascotas { background-image: url("img/categories/mascotas.jpg"); }
.category-photo-funerarios { background-image: url("img/categories/funerarios.jpg"); }
.category-photo-instituciones-educativas { background-image: url("img/categories/instituciones-educativas.jpg"); }
.category-photo-aseguradoras-financieras { background-image: url("img/categories/aseguradoras-financieras.jpg"); }

.item-number {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--green-050);
  color: var(--green-800);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.category-card > .item-number {
  position: absolute;
  top: 10px;
  left: 10px;
}

.category-icon {
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 10px;
  background: var(--green-050);
  transform: rotate(45deg);
  position: relative;
}

.category-card .category-icon {
  position: absolute;
  left: 12px;
  top: 70px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  transform: none;
  box-shadow: 0 10px 22px rgba(7, 52, 44, .14);
  border: 1px solid rgba(214,229,224,.9);
  z-index: 2;
}

.category-icon::before {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--green-700);
  transform: rotate(-45deg);
  -webkit-mask: var(--icon-shape) center / contain no-repeat;
  mask: var(--icon-shape) center / contain no-repeat;
}

.category-card .category-icon::before {
  inset: 11px;
  transform: none;
}

.icon-medical,
.icon-salud { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z M12 8v6 M9 11h6'/%3E%3C/svg%3E"); }
.icon-bed,
.icon-hoteles { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7v10 M21 11v6 M3 13h18 M7 13V9h5a3 3 0 0 1 3 3v1 M5 17v2 M19 17v2'/%3E%3C/svg%3E"); }
.icon-fork,
.icon-restaurantes { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3v8 M10 3v8 M8 3v18 M16 3v18 M16 3c3 2 4 5 4 8h-4'/%3E%3C/svg%3E"); }
.icon-car,
.icon-automotriz { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 17h14 M6 17a2 2 0 1 1-4 0 M22 17a2 2 0 1 1-4 0 M4 15l2-6h11l3 6 M8 9l2-3h4l2 3'/%3E%3C/svg%3E"); }
.icon-plane,
.icon-viajes { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 2 11 13 M22 2l-7 20-4-9-9-4 20-7Z'/%3E%3C/svg%3E"); }
.icon-monitor,
.icon-computo,
.icon-cómputo { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v11H4z M9 21h6 M12 16v5'/%3E%3C/svg%3E"); }
.icon-spark,
.icon-estetica,
.icon-estética { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z M5 17l.8 2.2L8 20l-2.2.8L5 23l-.8-2.2L2 20l2.2-.8L5 17Z'/%3E%3C/svg%3E"); }
.icon-tool,
.icon-ferreterias,
.icon-ferreterías { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14.7 6.3a4 4 0 0 0 5 5L11 20l-4-4 8.7-8.7Z M6 18l-2 2'/%3E%3C/svg%3E"); }
.icon-briefcase,
.icon-servicios { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1 M4 7h16v12H4z M4 12h16 M10 12v2h4v-2'/%3E%3C/svg%3E"); }
.icon-cake,
.icon-pastelerias,
.icon-pastelerías { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 11h16v9H4z M8 11V8 M12 11V8 M16 11V8 M7 8h2 M11 8h2 M15 8h2 M4 15c2 1 4 1 6 0s4-1 6 0 3 1 4 0'/%3E%3C/svg%3E"); }
.icon-shoe,
.icon-zapaterias,
.icon-zapaterías { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 16c3 1 6 1 9-1l2-7 3 1-1 4 5 2v3H3v-2Z M12 15h9'/%3E%3C/svg%3E"); }
.icon-eventos { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v15H4z M8 3v4 M16 3v4 M4 10h16 M8 15h.01 M12 15h.01 M16 15h.01'/%3E%3C/svg%3E"); }
.icon-shield { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z M9 12l2 2 4-5'/%3E%3C/svg%3E"); }
.icon-graduation { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 10 12 5 2 10l10 5 10-5Z M6 12v5c3 2 9 2 12 0v-5 M20 11v5'/%3E%3C/svg%3E"); }
.icon-paw { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M16 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M6 17c0-3 3-5 6-5s6 2 6 5c0 2-2 3-3.5 2.2a5 5 0 0 0-5 0C8 20 6 19 6 17Z M4 14a1.8 1.8 0 1 0 0-3.6A1.8 1.8 0 0 0 4 14Z M20 14a1.8 1.8 0 1 0 0-3.6A1.8 1.8 0 0 0 20 14Z'/%3E%3C/svg%3E"); }
.icon-candle { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 2c2 2 2 4 0 6-2-2-2-4 0-6Z M9 9h6v10H9z M7 22h10 M12 9v10'/%3E%3C/svg%3E"); }

.login-home-link {
  margin-top: 14px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--green-050);
  color: var(--green-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 900;
  text-decoration: none;
}

.agreement-list {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
}

.agreement-item {
  scroll-margin-top: 14px;
}

.agreement-summary {
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 6px 16px rgba(7,59,50,.07);
  color: var(--foreground);
  text-align: left;
  padding: 14px;
  cursor: pointer;
}

.agreement-number {
  align-self: start;
  margin-top: 2px;
}

.agreement-summary img {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px;
}

.agreement-summary-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agreement-summary-copy span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.agreement-summary-copy strong {
  color: var(--green-900);
  font-size: 18px;
  line-height: 1.12;
}

.agreement-summary-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agreement-summary-copy em {
  color: var(--green-700);
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
}

.agreement-item.is-open .agreement-summary {
  border-color: rgba(17,99,79,.45);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.agreement-detail {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body.is-detail-view .agreement-item.is-open .agreement-summary {
  display: none;
}

body.is-detail-view .agreement-detail {
  border-top: 1px solid var(--line);
  border-radius: 8px;
}

.detail-card { padding: 16px; scroll-margin-top: 12px; }

.detail-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.detail-title img {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
}

.detail-title h2 {
  margin: 3px 0 5px;
  color: var(--green-900);
  line-height: 1.1;
}

.detail-card ul { margin: 14px 0; padding-left: 20px; }
.detail-card li { margin: 7px 0; line-height: 1.35; }

.detail-info-grid {
  display: grid;
  gap: 9px;
  margin: 14px 0;
}

.detail-info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--green-050);
  padding: 11px 12px;
}

.detail-info-card span {
  display: block;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-info-card strong {
  display: block;
  margin-top: 3px;
  color: var(--green-900);
  line-height: 1.35;
}

.requirement {
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 12px;
  color: var(--green-900);
  background: var(--green-050);
}

.promo-gallery {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.promo-gallery-heading {
  display: grid;
  gap: 2px;
}

.promo-gallery-heading span {
  color: var(--green-700);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.promo-gallery-heading strong {
  color: var(--green-900);
}

.promo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.promo-gallery-grid a {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  color: var(--green-800);
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.promo-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  background: var(--green-050);
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.action-grid .primary-action,
.action-grid .secondary-action {
  width: 100%;
  min-height: 48px;
  gap: 9px;
}

.detail-card > .action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.detail-card > .action-grid .primary-action,
.detail-card > .action-grid .secondary-action {
  min-height: 46px;
  padding: 6px 4px;
  border-radius: 18px;
  flex-direction: column;
  gap: 3px;
  font-size: clamp(10px, 2.55vw, 12px);
  line-height: 1.05;
  text-align: center;
}

.detail-card > .action-grid .action-icon {
  width: 17px;
  height: 17px;
}

.contact-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-actions .action-call {
  grid-column: 1 / -1;
}

@media (min-width: 520px) {
  .contact-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .contact-actions .action-call {
    grid-column: auto;
  }
}

@media (max-width: 350px) {
  .detail-card > .action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.action-icon,
.nav-icon {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--icon-shape) center / contain no-repeat;
  mask: var(--icon-shape) center / contain no-repeat;
}

.action-icon { width: 20px; height: 20px; }
.nav-icon { width: 24px; height: 24px; }

.icon-home { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.icon-grid { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 4h6v6H4z M14 4h6v6h-6z M4 14h6v6H4z M14 14h6v6h-6z'/%3E%3C/svg%3E"); }
.icon-heart { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E"); }
.icon-user { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 21a8 8 0 0 0-16 0 M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E"); }
.icon-phone { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
.icon-pin { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11Z M12 10.5h.01'/%3E%3C/svg%3E"); }
.icon-share { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z M18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z M8.6 13.5l6.8-4 M8.6 16.5l6.8 4'/%3E%3C/svg%3E"); }
.icon-external { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15 3h6v6 M10 14 21 3 M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.icon-info { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 17v-5 M12 8h.01 M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E"); }
.icon-card { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v14H4z M8 10h4 M8 14h8 M16 10h.01'/%3E%3C/svg%3E"); }
.icon-calendar { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v15H4z M8 3v4 M16 3v4 M4 10h16 M8 15h.01 M12 15h.01 M16 15h.01'/%3E%3C/svg%3E"); }
.icon-camera { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7h3l2-3h6l2 3h3v13H4z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E"); }
.icon-trash { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18 M8 6V4h8v2 M6 6l1 15h10l1-15 M10 11v6 M14 11v6'/%3E%3C/svg%3E"); }
.icon-mail { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16v14H4z M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.icon-facebook { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14 8.5V7.2c0-.6.4-1 1-1h1.3V3.3A17 17 0 0 0 13.9 3c-2.5 0-4.2 1.5-4.2 4v1.5H7v3.2h2.7V21H14v-9.3h2.9l.5-3.2H14Z'/%3E%3C/svg%3E"); }
.icon-document { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 2h9l5 5v15H6z M14 2v6h6 M9 13h6 M9 17h6'/%3E%3C/svg%3E"); }
.icon-download { --icon-shape: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3v12 M7 10l5 5 5-5 M5 21h14'/%3E%3C/svg%3E"); }

.bottom-nav {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 8px 7px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
}

.bottom-nav a, .bottom-nav button {
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 1px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  cursor: pointer;
  text-decoration: none;
}

.bottom-nav .active { color: var(--green-800); background: var(--green-050); }

.notification-badge {
  position: absolute;
  top: 5px;
  right: calc(50% - 24px);
  min-width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--red-700);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(6,47,40,.18);
}

.notification-badge[hidden] {
  display: none;
}

.empty-state, .alert, .success {
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
}

.alert { border-color: #efc7c7; background: #fff4f4; color: #8a2525; }
.success { border-color: #bee5cf; background: #f0fbf4; color: var(--green-800); }

.admin-body {
  background: #f5f8f7;
  padding-bottom: 86px;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px, 4vw, 38px);
  background: var(--green-900);
  color: #fff;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.admin-brand img {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  background: #fff;
  object-fit: contain;
  border-radius: 8px;
  padding: 4px;
}

.admin-brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-session-pill {
  flex: 0 1 auto;
  display: grid;
  gap: 1px;
  max-width: 190px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  padding: 7px 12px;
  text-align: right;
}

.admin-session-pill span {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-session-pill strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-main {
  width: min(1100px, calc(100% - 28px));
  margin: 20px auto 96px;
}

.admin-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px clamp(10px, 4vw, 38px) max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -12px 30px rgba(8, 57, 45, .08);
}

.admin-bottom-nav a {
  min-width: 0;
  min-height: 58px;
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px 2px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.admin-bottom-nav a.active {
  color: var(--green-800);
  background: var(--green-050);
}

.admin-bottom-nav .nav-icon {
  width: 23px;
  height: 23px;
}

.admin-card {
  padding: 18px;
  margin-bottom: 16px;
}

.login-card {
  width: min(430px, 100%);
  margin: clamp(18px, 7vh, 72px) auto 16px;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 18px 42px rgba(7, 59, 50, .13);
}

.login-mark {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--green-050);
}

.login-mark img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 12px;
}

.login-card h1 {
  margin-bottom: 6px;
}

.login-card p {
  margin: 0 0 16px;
  color: var(--muted);
}

.login-card .admin-form {
  text-align: left;
}

.login-card .login-action {
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  background: #fff;
  color: var(--green-800);
  border: 1px solid rgba(11, 91, 80, .18);
  box-shadow: inset 0 -3px 0 var(--red-700), 0 8px 18px rgba(7, 59, 50, .08);
}

.admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.admin-card h1, .admin-card h2 {
  margin: 4px 0 12px;
  color: var(--green-900);
}

.admin-home-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  color: #fff;
}

.admin-home-hero h1,
.admin-home-hero p {
  color: #fff;
}

.admin-home-hero p {
  margin: 0;
  max-width: 680px;
}

.admin-role-badge {
  min-width: 210px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  padding: 14px;
}

.admin-role-badge span,
.admin-role-badge strong {
  display: block;
}

.admin-role-badge span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-role-badge strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-module-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  min-height: 188px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  color: var(--foreground);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.admin-module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 109, 82, .34);
  box-shadow: var(--shadow);
}

.admin-module-icon {
  width: 66px;
  height: 66px;
  grid-row: span 2;
}

.admin-module-copy {
  display: grid;
  gap: 8px;
  align-self: start;
}

.admin-module-copy strong {
  color: var(--green-900);
  font-size: 22px;
  line-height: 1.08;
}

.admin-module-copy span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}

.admin-module-count {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  align-self: end;
  grid-column: 2;
  color: var(--green-800);
}

.admin-module-count strong {
  font-size: 28px;
  line-height: 1;
}

.admin-module-count span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.admin-warning-card {
  border-left: 5px solid var(--gold);
}

.admin-warning-card.expired {
  border-left-color: #b54a45;
}

.admin-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-filter-row a {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--green-800);
  padding: 8px 13px;
  font-weight: 850;
  text-decoration: none;
}

.admin-filter-row a.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.metric-card { padding: 14px; }
.metric-card span { display: block; color: var(--muted); font-size: 13px; font-weight: 750; }
.metric-card strong { display: block; margin-top: 4px; color: var(--green-800); font-size: 27px; }

.metrics-filter {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 4px 0 16px;
}

.metrics-filter label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.metrics-filter select,
.metrics-filter input {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  color: var(--foreground);
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.trend-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.trend-legend i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.trend-card {
  display: grid;
  gap: 10px;
}

.trend-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 12px;
  align-items: center;
}

.trend-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.trend-bars {
  display: grid;
  gap: 4px;
}

.trend-bars i {
  display: block;
  min-height: 7px;
  border-radius: 999px;
}

.trend-legend .views,
.trend-bars .views { background: var(--green-700); }
.trend-legend .saves,
.trend-bars .saves { background: var(--gold); }
.trend-legend .shares,
.trend-bars .shares { background: #2d7f9f; }
.trend-legend .opens,
.trend-bars .opens { background: #6a6f78; }

.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.rank-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.rank-card h3 {
  margin: 0 0 12px;
  color: var(--green-900);
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.rank-list li {
  display: grid;
  gap: 6px;
}

.rank-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}

.rank-list span {
  color: var(--foreground);
  font-weight: 750;
}

.rank-list strong {
  color: var(--green-800);
}

.rank-list i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-700), var(--gold));
}

.muted { color: var(--muted); }

.admin-form {
  display: grid;
  gap: 13px;
}

.admin-form.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
  color: var(--foreground);
  outline-color: var(--green-700);
}

.admin-form .wide { grid-column: 1 / -1; }

.admin-content-form {
  display: grid;
  gap: 16px;
  padding-bottom: 92px;
}

.content-block-list {
  display: grid;
  gap: 14px;
}

.content-block-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--green-050);
  padding: 14px;
}

.content-block-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.content-block-title strong {
  color: var(--green-900);
  font-size: 18px;
}

.content-block-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.directory-admin-list {
  display: grid;
  gap: 10px;
}

.directory-admin-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) 92px 120px;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.directory-admin-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.directory-admin-row input,
.directory-admin-row select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--foreground);
}

.directory-admin-new {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.directory-admin-new h3 {
  margin: 0 0 10px;
  color: var(--green-900);
}

.admin-sticky-actions {
  position: sticky;
  bottom: 92px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.check-row {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 42px;
  color: var(--green-900) !important;
}

.check-row input { width: auto; }

.inline-user-form {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr) minmax(130px, 1fr) minmax(90px, auto) minmax(90px, auto) minmax(100px, auto) auto;
  gap: 8px;
  align-items: center;
}

.inline-user-form input,
.inline-user-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px;
}

.inline-user-form span {
  color: var(--muted);
}

.inline-delete-form {
  margin: 8px 0 0;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; min-width: 680px; background: #fff; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--green-900); background: var(--green-050); }
tr:last-child td { border-bottom: 0; }

.admin-alert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 800;
}

.admin-alert.success {
  border: 1px solid #bee5cf;
  background: #f0fbf4;
  color: var(--green-800);
}

.admin-alert.error {
  border: 1px solid #efc7c7;
  background: #fff4f4;
  color: #8a2525;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.table-actions form { margin: 0; }

.table-action-link,
.table-action-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green-800);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.table-action-button:hover,
.table-action-link:hover {
  background: var(--green-050);
}

.table-action-button.danger {
  border-color: #efc7c7;
  color: #8a2525;
}

.admin-intro {
  margin: 0;
  color: var(--muted);
}

.admin-help {
  margin: 8px 0 0;
  color: var(--green-800);
  font-size: 13px;
  font-weight: 800;
}

.agreement-admin-list {
  display: grid;
  gap: 12px;
}

.agreement-admin-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(7,59,50,.08);
}

.agreement-admin-identity {
  display: grid;
  grid-template-columns: auto auto;
  gap: 9px;
  align-items: center;
}

.agreement-admin-number {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--green-050);
  color: var(--green-800);
  font-size: 12px;
  font-weight: 900;
}

.agreement-admin-logo-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
}

.agreement-admin-logo-wrap.no-logo {
  border-style: dashed;
  background: var(--green-050);
  opacity: .68;
}

.agreement-admin-logo-wrap.no-logo::after {
  content: "Sin logo";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: max-content;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.agreement-admin-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.agreement-admin-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.agreement-admin-title span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.agreement-admin-title h2 {
  margin: 2px 0 0;
  color: var(--green-900);
  font-size: 20px;
  line-height: 1.15;
}

.agreement-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green-800);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}

.status-pill.neutral { color: var(--muted); }
.status-pill.expired { background: #fff4f4; color: #8a2525; }
.status-pill.featured { background: rgba(184,148,77,.16); color: #7b5b1f; }

.agreement-admin-address {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.agreement-admin-address strong {
  color: var(--green-900);
}

.agreement-admin-actions {
  justify-content: flex-end;
}

.promo-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.promo-admin-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 9px;
}

.promo-admin-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  background: var(--green-050);
}

.promo-admin-card figcaption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  word-break: break-word;
}

.category-admin-list {
  display: grid;
  gap: 12px;
}

.category-admin-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(7,59,50,.08);
}

.category-admin-card.needs-attention {
  border-color: rgba(138,37,37,.28);
  background: linear-gradient(90deg, #fff8f8, #fff);
}

.category-admin-identity {
  display: grid;
  grid-template-columns: auto auto;
  gap: 9px;
  align-items: center;
}

.category-admin-identity .category-icon {
  width: 46px;
  height: 46px;
}

.category-admin-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.category-admin-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.category-create-form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  margin-top: 16px;
}

.category-edit-form {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(90px, .7fr) minmax(70px, .5fr) minmax(90px, .7fr) auto;
  gap: 8px;
  align-items: end;
}

.category-edit-form label,
.category-create-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.category-edit-form input,
.category-edit-form select,
.category-create-form input,
.category-create-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  color: var(--foreground);
}

@media (min-width: 760px) {
  .app-shell { padding: 24px; }
  .mobile-app {
    min-height: min(860px, calc(100svh - 48px));
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
}

@media (max-width: 680px) {
  .admin-topbar {
    align-items: center;
  }
  .admin-brand {
    gap: 8px;
    font-size: 14px;
  }
  .admin-brand img {
    width: 34px;
    height: 34px;
  }
  .admin-session-pill {
    max-width: 112px;
    padding: 6px 9px;
  }
  .admin-session-pill strong {
    font-size: 12px;
  }
  .admin-home-hero {
    grid-template-columns: 1fr;
  }
  .admin-role-badge {
    width: 100%;
  }
  .admin-module-grid {
    grid-template-columns: 1fr;
  }
  .admin-module-card {
    min-height: 156px;
  }
  .admin-form.two-col { grid-template-columns: 1fr; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .agreement-admin-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .agreement-admin-identity {
    margin-bottom: 4px;
  }
  .agreement-admin-actions {
    justify-content: flex-start;
  }
  .category-admin-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .category-create-form,
  .category-edit-form,
  .directory-admin-row,
  .inline-user-form,
  .metrics-filter {
    grid-template-columns: 1fr;
  }
  .admin-sticky-actions {
    bottom: 86px;
  }
  .trend-row {
    grid-template-columns: 1fr;
  }
}