/* =========================================================
   EasyShiksha · Campus Ambassador UI
   - Everything is scoped under .ca and ca- class names so it
     will not clash with existing site styles.
   - Change brand colours / fonts in the :root-like block below.
   ========================================================= */
.html {
  font-size: 16px;
}

.ca #ca-demo-status {
  color: #212529;
}

.ca {
  --ca-ink: #12252A;
  --ca-muted: #5D6F74;
  --ca-line: #E0E6E5;
  --ca-line-strong: #C9D3D2;
  --ca-bg: #F5F7F6;
  --ca-surface: #FFFFFF;
  --ca-primary: #0B6B66;
  --ca-primary-dark: #084F4B;
  --ca-primary-soft: #E0F0EE;
  --ca-accent: #E8962B;
  --ca-accent-ink: #7A4A0B;
  --ca-accent-soft: #FCEFD9;
  --ca-on-accent: #2A1A04;
  --ca-dark: #12252A;
  --ca-dark-muted: #C9D6D8;
  --ca-good: #1D7F47;
  --ca-good-soft: #E2F3E8;
  --ca-warn: #A86A12;
  --ca-warn-soft: #FBF0DC;
  --ca-bad: #B83A28;
  --ca-bad-soft: #F9E3DF;
  --ca-radius: 16px;
  --ca-radius-sm: 10px;
  --ca-font: "Figtree", "Segoe UI", system-ui, sans-serif;
  --ca-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ca-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  font-family: var(--ca-font);
  color: var(--ca-ink);
  background: var(--ca-bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ca *,
.ca *::before,
.ca *::after {
  box-sizing: border-box;
}

.ca img {
  max-width: 100%;
  display: block;
}

.ca a {
  color: var(--ca-primary);
}

.ca a:hover {
  color: var(--ca-primary-dark);
}

.ca :focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
}

.ca [hidden] {
  display: none !important;
}

/* ---------- layout ---------- */
.ca-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ca-section {
  padding-block: 56px;
}

.ca-section--tight {
  padding-block: 28px 56px;
}

.ca-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ca-stack--sm {
  gap: 8px;
}

.ca-stack--lg {
  gap: 24px;
}

.ca-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ca-between {
  justify-content: space-between;
}

.ca-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.ca-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(var(--ca-min, 220px), 1fr));
}

.ca-split {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.ca-split>.ca-main {
  flex: 999 1 560px;
  min-width: 0;
}

.ca-split>.ca-aside {
  flex: 1 1 300px;
  min-width: 0;
}

/* dashboard shell: side menu + content; menu becomes a scrolling tab bar on small screens */
.ca-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-block: 28px 64px;
}

.ca-layout>.ca-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ca-sidenav {
  flex: 0 0 240px;
  position: sticky;
  top: 16px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ca-sidenav__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ca-muted);
  padding: 8px 12px;
}

.ca-sidenav a {
  padding: 11px 12px;
  border-radius: var(--ca-radius-sm);
  color: var(--ca-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ca-sidenav a:hover {
  background: var(--ca-bg);
  color: var(--ca-ink);
}

.ca-sidenav a[aria-current="page"] {
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
  font-weight: 700;
}

@media (max-width: 900px) {
  .ca-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 16px;
  }

  .ca-layout>.ca-content {
    width: 100%;
  }

  .ca-sidenav {
    position: static;
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .ca-sidenav__title {
    display: block;
    grid-column: 1 / -1;
    padding: 4px 4px 6px;
  }

  .ca-sidenav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    font-size: 13.5px;
    border-radius: 999px;
    background: var(--ca-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ca-sidenav a[aria-current="page"] {
    background: var(--ca-primary);
    color: #fff;
  }

  .ca-sidenav a:hover {
    background: var(--ca-line);
  }

  .ca-sidenav a[aria-current="page"]:hover {
    background: var(--ca-primary-dark);
  }
}

/* ---------- type ---------- */
.ca-h1 {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.ca-h2 {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.ca-h3 {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}

.ca-title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  margin: 0;
}

.ca-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ca-muted);
}

.ca-lead {
  font-size: 18px;
  max-width: 60ch;
  margin: 0;
}

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

.ca-small {
  font-size: 13px;
}

.ca-mono {
  font-family: var(--ca-font-mono);
  letter-spacing: .04em;
}

.ca-num {
  font-variant-numeric: tabular-nums;
}

.ca p {
  margin: 0;
}

/* ---------- buttons ---------- */
.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--ca-primary);
  color: #fff;
  transition: background .15s;
}

.ca a.ca-btn {
  color: #fff;
}

.ca-btn:hover,
.ca a.ca-btn:hover {
  background: var(--ca-primary-dark);
  color: #fff;
}

.ca-btn--accent,
.ca a.ca-btn--accent {
  background: var(--ca-accent);
  color: var(--ca-on-accent);
}

.ca-btn--accent:hover,
.ca a.ca-btn--accent:hover {
  background: #D7841B;
  color: var(--ca-on-accent);
}

.ca-btn--outline,
.ca a.ca-btn--outline {
  background: var(--ca-surface);
  color: var(--ca-primary);
  border-color: var(--ca-primary);
}

.ca-btn--outline:hover,
.ca a.ca-btn--outline:hover {
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
}

.ca-btn--ghost-light,
.ca a.ca-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: #4C6168;
}

.ca-btn--ghost-light:hover,
.ca a.ca-btn--ghost-light:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ca-btn--danger,
.ca a.ca-btn--danger {
  background: var(--ca-bad);
  color: #fff;
}

.ca-btn--danger:hover {
  background: #9A2F20;
}

.ca-btn--link,
.ca a.ca-btn--link {
  background: transparent;
  color: var(--ca-primary);
  padding-inline: 8px;
}

.ca-btn--link:hover,
.ca a.ca-btn--link:hover {
  background: transparent;
  text-decoration: underline;
  color: var(--ca-primary-dark);
}

.ca-btn--sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 10px;
}

.ca-btn--block {
  width: 100%;
}

.ca-btn[disabled],
.ca-btn[aria-disabled="true"] {
  background: var(--ca-line);
  color: var(--ca-muted);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- chips ---------- */
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--ca-line);
  color: var(--ca-muted);
}

.ca-chip--good {
  background: var(--ca-good-soft);
  color: var(--ca-good);
}

.ca-chip--warn {
  background: var(--ca-warn-soft);
  color: var(--ca-warn);
}

.ca-chip--bad {
  background: var(--ca-bad-soft);
  color: var(--ca-bad);
}

.ca-chip--pri {
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
}

.ca-chip--acc {
  background: var(--ca-accent-soft);
  color: var(--ca-accent-ink);
}

.ca-tier {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #E7ECEE;
  color: #3C4A50;
}

/* ---------- cards ---------- */
.ca-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ca-card--flush {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.ca-card--dark {
  background: var(--ca-dark);
  border-color: var(--ca-dark);
  color: #fff;
}

.ca-card--dark .ca-muted {
  color: var(--ca-dark-muted);
}

.ca-card--primary {
  background: var(--ca-primary);
  border-color: var(--ca-primary);
  color: #fff;
}

.ca-card--primary .ca-muted {
  color: #CFE6E4;
}

.ca-card--accent {
  background: var(--ca-accent-soft);
  border-color: #F3D9AE;
  color: var(--ca-ink);
}

.ca-card--selected {
  border: 2px solid var(--ca-primary);
}

.ca-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.ca-card__pad {
  padding: 18px 22px;
}

.ca-card>.ca-btn:last-child {
  margin-top: auto;
}

/* ---------- state panels (status page, banners) ---------- */
.ca-state {
  border-radius: 22px;
  padding: clamp(22px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.ca-state--info {
  background: var(--ca-primary-soft);
}

.ca-state--warn {
  background: var(--ca-warn-soft);
}

.ca-state--bad {
  background: var(--ca-bad-soft);
}

.ca-state--good {
  background: var(--ca-good-soft);
}

.ca-state--neutral {
  background: #EBEFEE;
}

.ca-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
}

.ca-alert--info {
  background: var(--ca-primary-soft);
}

.ca-alert--warn {
  background: var(--ca-warn-soft);
}

.ca-alert--bad {
  background: var(--ca-bad-soft);
}

.ca-alert--good {
  background: var(--ca-good-soft);
}

.ca-alert__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.ca-quote {
  background: var(--ca-surface);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 64ch;
}

/* ---------- hero (landing) ---------- */
.ca-hero {
  background: var(--ca-dark);
  color: #fff;
}

.ca-hero .ca-lead {
  color: var(--ca-dark-muted);
}

.ca-hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-block: clamp(40px, 7vw, 80px);
}

.ca-hero__text {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ca-hero__art {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.ca-badge {
  align-self: flex-start;
  background: var(--ca-accent);
  color: var(--ca-on-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.ca-cta-band {
  background: var(--ca-primary);
  color: #fff;
}

/* ---------- ambassador ID card ---------- */
.ca-idcard {
  background: var(--ca-primary);
  color: #fff;
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .28);
}

.ca-idcard__code {
  font-family: var(--ca-font-mono);
  letter-spacing: .06em;
  background: rgba(0, 0, 0, .2);
  padding: 7px 12px;
  border-radius: 8px;
  align-self: flex-start;
}

.ca-idcard .ca-muted {
  color: #CFE6E4;
}

.ca-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
  overflow: hidden;
}

.ca-avatar--lg {
  width: 60px;
  height: 60px;
  font-size: 20px;
}

.ca-avatar--on-dark {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.ca-banner {
  background: var(--ca-primary);
  color: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.ca-banner .ca-muted {
  color: #CFE6E4;
}

/* ---------- stats & progress ---------- */
.ca-stat {
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ca-stat__label {
  font-size: 13px;
  color: var(--ca-muted);
  font-weight: 600;
}

.ca-stat__value {
  font-family: var(--ca-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ca-progress {
  height: 10px;
  border-radius: 5px;
  background: var(--ca-line);
  overflow: hidden;
}

.ca-progress>span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--ca-accent);
}

.ca-progress--sm {
  height: 6px;
}

.ca-progress--pri>span {
  background: var(--ca-primary);
}

/* ---------- lists & tables ---------- */
.ca-list {
  display: flex;
  flex-direction: column;
}

.ca-list__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--ca-line);
}

.ca-list__item:first-child {
  border-top: none;
}

.ca-table-wrap {
  overflow-x: auto;
}

.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ca-table th {
  background: var(--ca-bg);
  text-align: left;
  color: var(--ca-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 14px;
  white-space: nowrap;
}

.ca-table td {
  padding: 13px 14px;
  border-top: 1px solid var(--ca-line);
  vertical-align: top;
}

.ca-table th:first-child,
.ca-table td:first-child {
  padding-left: 22px;
}

.ca-table th:last-child,
.ca-table td:last-child {
  padding-right: 22px;
}

.ca-table .ca-right {
  text-align: right;
}

.ca-table tr.is-me td {
  background: var(--ca-accent-soft);
  font-weight: 700;
}

.ca-plus {
  color: var(--ca-good);
  font-weight: 700;
}

.ca-minus {
  color: var(--ca-bad);
  font-weight: 700;
}

.ca-pager {
  padding: 12px 22px;
  border-top: 1px solid var(--ca-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--ca-muted);
}

/* ---------- tabs (segmented) ---------- */
.ca-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #EBEFEE;
  padding: 4px;
  border-radius: 12px;
}

.ca-tabs button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ca-muted);
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
  min-height: 36px;
}

.ca-tabs button[aria-selected="true"] {
  background: var(--ca-surface);
  color: var(--ca-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ---------- forms ---------- */
.ca-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ca-label {
  font-weight: 600;
  font-size: 14px;
}

.ca-req {
  color: var(--ca-bad);
}

.ca-input,
.ca-select,
.ca-textarea {
  font: inherit;
  color: var(--ca-ink);
  background: var(--ca-surface);
  border: 1px solid var(--ca-line-strong);
  border-radius: var(--ca-radius-sm);
  padding: 11px 14px;
  width: 100%;
  min-height: 44px;
}

.ca-input[readonly] {
  background: var(--ca-bg);
}

.ca-textarea {
  min-height: 96px;
  resize: vertical;
}

.ca-input:focus,
.ca-select:focus,
.ca-textarea:focus {
  outline: 2px solid var(--ca-primary);
  outline-offset: 0;
  border-color: var(--ca-primary);
}

.ca-field.is-invalid .ca-input,
.ca-field.is-invalid .ca-upload {
  border-color: var(--ca-bad);
}

.ca-hint {
  font-size: 13px;
  color: var(--ca-muted);
}

.ca-error {
  font-size: 13px;
  color: var(--ca-bad);
  font-weight: 600;
}

.ca-upload {
  border: 1.5px dashed var(--ca-primary);
  background: var(--ca-primary-soft);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  cursor: pointer;
}

.ca-upload input[type="file"] {
  font-size: 13px;
  max-width: 100%;
}

.ca-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
}

.ca-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ca-primary);
  flex: none;
}

.ca-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ca-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ca-line);
}

/* stepper */
.ca-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 900px;
}

.ca-steps li {
  position: relative;
  padding-top: 13px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ca-muted);
}

.ca-steps li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 3px;
  background: var(--ca-line);
}

.ca-steps li.is-done,
.ca-steps li.is-current {
  color: var(--ca-ink);
}

.ca-steps li.is-done::before,
.ca-steps li.is-current::before {
  background: var(--ca-primary);
}

.ca-steps li.is-current {
  color: var(--ca-primary);
}

@media (max-width: 560px) {
  .ca-steps li span {
    display: none;
  }
}

/* ---------- timeline ---------- */
.ca-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ca-timeline li {
  display: flex;
  gap: 14px;
}

.ca-timeline li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--ca-line-strong);
}

.ca-timeline li.is-done::before {
  background: var(--ca-good);
}

.ca-timeline li.is-now::before {
  background: var(--ca-accent);
}

.ca-timeline li.is-bad::before {
  background: var(--ca-bad);
}

/* ---------- referral link, share, QR ---------- */
.ca-linkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border: 1.5px dashed var(--ca-primary);
  background: var(--ca-primary-soft);
  border-radius: 14px;
  padding: 10px 10px 10px 16px;
}

.ca-linkbox__url {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--ca-font-mono);
  font-size: 14.5px;
  color: var(--ca-primary);
  overflow-wrap: anywhere;
}

.ca-share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ca-share a {
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  background: #E7ECEE;
  color: #33424A;
}

.ca-share .is-wa {
  background: #E2F3E8;
  color: #17663A;
}

.ca-share .is-li {
  background: #E3ECF7;
  color: #1E5A9A;
}

.ca-share .is-ig {
  background: #FBE6EE;
  color: #A52A62;
}

.ca-qr {
  width: 168px;
  height: 168px;
  border: 1px solid var(--ca-line);
  border-radius: 12px;
  padding: 10px;
  background: var(--ca-surface);
  display: grid;
  place-items: center;
  color: var(--ca-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- leaderboard podium ---------- */
.ca-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 24px 22px 0;
  background: var(--ca-bg);
  text-align: center;
}

.ca-podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ca-podium__block {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: grid;
  place-items: center;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 26px;
  background: var(--ca-primary-soft);
  color: var(--ca-primary);
}

.ca-podium__col.is-1 .ca-podium__block {
  height: 100px;
  background: var(--ca-accent);
  color: var(--ca-on-accent);
}

.ca-podium__col.is-2 .ca-podium__block {
  height: 72px;
}

.ca-podium__col.is-3 .ca-podium__block {
  height: 56px;
}

/* ---------- kit assets & rewards ---------- */
.ca-asset {
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: var(--ca-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ca-asset__art {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  background: var(--ca-primary);
}

.ca-asset__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ca-asset__meta {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ca-reward__img {
  height: 104px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ca-primary);
  color: #fff;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding: 8px;
}

/* ---------- FAQ ---------- */
.ca-faq details {
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  border-radius: 14px;
  padding: 16px 20px;
}

.ca-faq summary {
  font-weight: 700;
  cursor: pointer;
}

.ca-faq details p {
  margin-top: 10px;
  color: var(--ca-muted);
}

/* ---------- modal (native <dialog>) ---------- */
.ca-modal {
  border: none;
  border-radius: 20px;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  color: var(--ca-ink);
  font-family: var(--ca-font);
  box-shadow: 0 30px 80px rgba(10, 30, 35, .35);
}

.ca-modal::backdrop {
  background: rgba(10, 25, 30, .5);
}

.ca-modal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ca-modal__foot {
  padding: 16px 24px;
  border-top: 1px solid var(--ca-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  background: var(--ca-bg);
}

/* ---------- toast ---------- */
.ca-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ca-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* ---------- suspended mode: locks actions marked data-ca-active-only ---------- */
.ca.is-suspended [data-ca-active-only] {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.4);
}

/* ---------- empty state ---------- */
.ca-empty {
  border: 1px dashed var(--ca-line-strong);
  border-radius: 14px;
  padding: 28px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

/* ---------- PREVIEW ONLY: status switcher bar. Remove in production. ---------- */
.ca-demo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #26343A;
  color: #fff;
  font-size: 13px;
}

.ca-demo .ca-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding-block: 8px;
}

.ca-demo select {
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
}

.ca-demo a {
  color: #CFE6E4;
}

@media (max-width: 600px) {
  .ca-container {
    padding-inline: 16px;
  }

  .ca-section {
    padding-block: 40px;
  }

  .ca-card {
    padding: 18px;
  }

  .ca-table th:first-child,
  .ca-table td:first-child {
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca * {
    transition: none !important;
  }
}

.ca-grid.ca-tiers {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 420px) {
  .ca-grid.ca-tiers {
    grid-template-columns: 1fr;
  }

  .ca-sidenav {
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  }

  .ca-sidenav a {
    font-size: 12.5px;
    padding: 7px 10px;
  }
}